LV Graphs

This version of UITK only contains graph styles for NM.

D3.js

Line Graphs

$ 1,388 21

This month you are $388.21 off track from your planned balance of $1,000.00.

Basics

Basic styles are provided for line graphs built with the D3.js library. All elements in the graph should be wrapped in an element g with chart class JavaScript Example: 
var g = svg.append('g')
    .attr('class', 'nm-chart')

Output:

<svg id="nmlvChart">
    <g class="chart">
    ...
    </g>
</svg>

Axes

X and Y Axes should add the classes chart__axis chart__axis-x and chart__axis chart__axis-y. By default the x and y axis has a stroke width of 0 since NM/LV designs do not show the y axis. The x-axis can be redrawn at the y-zero horizontal by calling provided addXAxisLine() js function. See JavaScript section below.

Ticks

Ticks along the x-axis are added by default with the class tick, when creating the xAxis with d3. Two additional classes are provided by the UTIK:

ClassDescription
today

Add this class to the tick representing the current month or time.
active

Add this class to the tick on mouseover/hover.

The line and text elements for each tick are automatically styled based on the class of the tick. If the text of line needs to be drawn with a different element you can use the .graph-tick-line and .graph-tick-text classes to assign the styles to your custom elements.

Value Lines

By default there are two value lines classes defined, .chart__val_line .chart__val_line-primary and .chart__val_line .chart__val_line-secondary with the designated NM colors.

JavaScript Example:

// Config primary line
lineConfig = d3.line()
    .x((d) => x(moment(d.date)))
    .y((d) => y(d.total));

// Add value line - primary
g.append('path')
    .attr('class', 'chart__val_line chart__val_line-primary')
    .datum(datum)
    .attr('d', lineConfig2(datum));

Additional value lines can be added using the graph-lines function and the .chart__val_line class.

.chart__val_line {
    @include graph-lines(
    $line-class-name: 'chart__val_line-primary',
    $line-color: $line-graph-primary-color);
}

Value Dots/Circles

Dots can be added overlaying each data point along a value lines with the wrapper class .chart__val_dots. Each dot should have a class of .chart__val_dot .chart__val_dot-primary or .chart__val_dot .chart__val_dot-secondary depending on the associated value line.

JavaScript Example:

// Add dots wrapper element
dots = g.append('g').attr('class', 'chart__val_dots');
// make some dot overlays for each data point on the primary line
dots.select('.chart__val_dots')
.data(datum).enter()
    .append('circle')
    .attr('class', 'chart__val_dot chart__val_dot-primary')
    .attr('cx', (d) => x(moment(d.date)))
    .attr('cy', (d) => y(d.planned));

Delta Areas

Two colors for negative and positive delta areas are provided and can be used by added the class name to the path object.

ColorClass Name

chart__negative_val_delta

chart__positive_val_delta

NM Hero Number

Default Hero Number classes are available to ease of adding the currency number at the top of the graph. A hero number mixin is available if the fonts sizes need to be changed. Two colors are available for the hero-number element:
ColorClass Name

no-accounts

accounts-added

EXAMPLE

Show Code

 
<div class="hero-number accounts-added">
    <span class="small-number">$</span>
    <span class="big-number">1,388</span>
    <span class="small-number">21</span>
</div>
$ 1,388 21

JavaScript

JavaScript functions are provided to assist in setting up the graph. It can be imported into your project by installing the ui-toolkit via npm and importing your themed js file. Additional you can link to or download a compiled NM-CX version at http://uitk.learnvest.com/v/[version_number]/js/nm-cx/nm-cx-uitk.js or http://uitk.learnvest.com/v/[version_number]/js/nm-cx/nm-cx-uitk.min.js. (Note graph js is only available in 1.14.1 and above.)

NM NPM Installation

Create/Update your project's .npmrc to point toward LV's internal private NPM registry. Include the following line:

registry=http://build.learnvest.net:8081/nexus/content/groups/npm-all/


Install the UI-Toolkit.

npm install --save-dev ui-toolkit


Import into your project.

Example:

var uitk = require('node_modules/ui-toolkit/src/js/theme/nm-uitk');


NM Available Functions/Objects

NM Colors

Object containing any brand colors that may be needed in creating graphs.

colors = {
    white: '#ffffff',
    black: '#000000',
    charcoal: '#444444',
    blue: '#0090f9',
    lightBlue: '#c6d4e2',
    regalBlue: '#00487c',
    burntSienna: '#ec544a',
    burntSiennaFaded: '#fbdcda',
    green: '#00aea6',
    greenFaded: '#cce8fd',
    grayBlue: '#5d7286',
    slateGrey: '#697e90',
    offWhite: '#f3f9ff'
};

Graph Values

Object containing values that may be needed in creating graphs. For examples, the inactiveDotRadius, todayDotRadius and activeDotRadius should be used when adding dots to the graph with the attribute r.

graphValues = {
    // Highlighted Text
    onTrackColor: colors.blue,
    offTrackColor: colors.burntSienna,
    aheadColor: colors.green,

    // Graph lines
    lineGraphPrimaryColor: colors.regalBlue,
    lineGraphSecondaryColor: colors.blue,
    lineGraphStrokeWidth: '3px',
    lineGraphAxisColor: colors.lightBlue,
    lineGraphAxisStrokeWidth: '1px',
    lineGraphXAxisStrokeWidth: '1px',
    lineGraphYAxisStrokeWidth: '0px',

    // Delta Fill
    offTrackDeltaColor: colors.burntSiennaFaded,
    aheadDeltaColor: colors.greenFaded,

    // Line Gradients & Dot colorss
    inactiveStartColor: colors.lightBlue,
    inactiveStopColor: colors.offWhite,
    inactiveStrokeWidth: '2px',
    inactiveTextColor: colors.grayBlue,
    inactiveTextWeight: 400,
    inactiveTextSize: '12px',
    inactiveDotRadius: '4.5px',
    inactiveDotBorderWidth: '2px',
    inactiveDotBorderColor: colors.white,
    inactiveDotPrimaryColor: colors.regalBlue,
    inactiveDotSecondaryColor: colors.blue,

    todayStartColor: colors.slateGrey,
    todayStopColor: colors.offWhite,
    todayStrokeWidth: '2px',
    todayTextColor: colors.charcoal,
    todayTextWeight: 500,
    todayTextSize: '12px',
    todayDotRadius: '4.5px',
    todayDotBorderWidth: '2px',
    todayDotBorderColor: colors.white,
    todayDotPrimaryColor: colors.regalBlue,
    todayDotSecondaryColor: colors.blue,

    activeStartColor: colors.black,
    activeStopColor: colors.black,
    activeStrokeWidth: '2px',
    activeTextcolors: colors.charcoal,
    activeTextWeight: 500,
    activeTextSize: '14px',
    activeDotRadius: '6.5px',
    activeDotBorderWidth: '2px',
    activeDotBorderColor: colors.white,
    activeDotPrimaryColor: colors.regalBlue,
    activeDotSecondaryColor: colors.blue
};

Default Gradients

Object containing two default gradients values. Additional gradients can be added by passing a new or appended object containing key value pairs of name-of-gradient: { ... offset values ... }.

defaultGradients = {
    'gridlines-gradient-inactive': [
    { offset: '0%', color: graphValues.inactiveStartColor },
    { offset: '100%', color: graphValues.inactiveStopColor }
    ],
    'gridlines-gradient-today': [
    { offset: '0%', color: graphValues.todayStartColor },
    { offset: '100%', color: graphValues.todayStopColor }
    ]
};

Add Linear Gradient Function

Adds LinearGradients to refs for grid lines

@function
@param {Object} container - d3 svg container
@param {Object} gradients - obj contain key:array pairs of gradient information
@param {Object} configs - height and padding are required

addLinearGradient = function (svgContainer, gradients = defaultGradients, configs = { height: 0, padding: 0 })

Add X Axis Line Function

Adds x axis line on y-zero horizontal

@function
@param {Object} container - d3 svg container
@param {Object} configs - { x1, x2, y1, y2, color, strokeWidth }

addXAxisLine = function (
svgContainer,
options = {
x1: 0,
x2: 0,
y1: 0,
y2: 0,
color: colors.lightBlue,
strokeWidth: graphValues.lineGraphXAxisStrokeWidth
})

SASS Reference

Variables

NameTypeDefault ValueDescription
$on-track-color: Color $blue

Font color for on track display.
$off-track-color Color $burnt-sienna

Font color for off track display.
$ahead-color Color $green

Font color for ahead display.
$no-accounts Color $regal-blue

Font color for hero number when no accounts are added.
$accounts-added Color $blue

Font color for hero number when accounts are added.
$hero-number-large-font-size Number 50px

Font size for hero number on top of graph. $ and cents will be calculated to be a percentage of the large dollar number.
$hero-number-padding-bottom Number 16px

Padding under the hero number.
$off-track-delta-color Color $burnt-sienna-faded

Fill color for are of chart when off track.
$ahead-delta-color Color $green-faded

Fill color for area of chart ahead display.
$line-graph-primary-color Color $regal-blue

Default color of the main value line.
$line-graph-secondary-color Color $blue

Default color of the secondary value line.
$line-graph-stroke-width/code> Number 3px

Default stroke width of graph value lines.
$line-graph-axis-color/code> Color $light-blue

Default color for the axes.
$line-graph-x-axis-stroke-width Number 0

Default axes stroke width. The axes have a stroke width of 0 to hide the default axes which do not conform to designs.
$line-graph-y-axis-stroke-width Number 0

Default axes stroke width. The axes have a stroke width of 0 to hide the default axes which do not conform to designs.
$inactive-start-color Color $off-white

Gradient start color for default tick lines.
$inactive-stop-color Color $light-blue

Gradient stop color for default tick lines.
$inactive-stroke-width Number 1px/code>

stroke width for default tick lines.
$inactive-text-color Color $gray-blue

Text color for default ticks.
$inactive-text-weight Number 400/code>

Text weight for default ticks.
$inactive-text-size Number 12px/code>

Text size for default ticks.
$inactive-dot-radius Number 4.5px

Radius for default dots.
$inactive-dot-border-width Number 2px/code>

Border width for default dots.
$inactive-dot-border-color Color $white

Border color for default dots.
$inactive-dot-primary-color Color $line-graph-primary-color

Color of default dots on the primary value line.
$inactive-dot-secondary-color Color $line-graph-secondary-color

Color of default dots on the secondary value line.
$today-start-color Color $off-white

Gradient start color for current tick line.
$today-stop-color Color $slate-gray

Gradient stop color for the current tick line.
$today-stroke-width Number 1px/code>

stroke width for the current tick line.
$today-text-color Color $charcoal

Text color for the current tick.
$today-text-weight Number 500/code>

Text weight for the current tick.
$today-text-size Number 12px

Text size for the current tick.
$today-dot-radius Number 4.5px

Radius for the current dot.
$today-dot-border-width Number 2px

Border width for current dot.
$today-dot-border-color Color $white

Border color for current dot.
$today-dot-primary-color Color $line-graph-primary-color

Color of current dot on the primary value line.
$today-dot-secondary-color Color $line-graph-secondary-color

Color of current dot on the secondary value line.
$active-start-color Color $off-white

Gradient start color for active tick line.
$active-stop-color Color $slate-gray

Gradient stop color for the active tick line.
$active-stroke-width Number 1px

stroke width for the active tick line.
$active-text-color Color $charcoal

Text color for the active tick.
$active-text-weight Number 500/code>

Text weight for the active tick.
$active-text-size Number 12px/code>

Text size for the active tick.
$active-dot-radius Number 4.5px

Radius for the active dot.
$active-dot-border-width Number 2px

Border width for active dot.
$active-dot-border-color Color $white

Border color for active dot.
$active-dot-primary-color Color $line-graph-primary-color

Color of active dot on the primary value line.
$active-dot-secondary-color Color $line-graph-secondary-color

Color of active dot on the secondary value line.

NM Mixins

You can use the mixins yourself to build your own class structure out of the UITK components.

graph-hero-number

@mixin graph-hero-number($dollar-font-size, $dollar-small-font-ratio)
ParameterTypeDefault ValueDescription
$dollar-font-size Number $hero-number-large-font-size

Font size of the large (dollar) numbers in the Hero number.
$dollar-small-font-ratio Number 0.56

Percentage of large (dollar) number for the smaller (cents) number. $small-font: $dollar-font-size * $dollar-small-font-ratio;

graph-fill

@mixin graph-fill($fill-class-name,    $fill-color)
ParameterTypeDefault ValueDescription
$fill-class-name String ""

Name of fill class
$fill-color Color $ahead-delta-color

Fill color

graph-lines

@mixin graph-lines($line-class-name, $line-color)
ParameterTypeDefault ValueDescription
$line-class-name String ""

Name of line class
$line-color Color $line-graph-primary-color

Line stroke color

graph-dots

@mixin graph-dots($dot-class-name, $dot-color)
ParameterTypeDefault ValueDescription
$dot-class-name String ""

Name of dot class
$dot-color Color $line-graph-primary-color

Dot fill color

graph-tick

@mixin graph-tick(
    $stroke-width,
    $text-color,
    $text-weight,
    $text-size,
    $line-gradient,
    $line-color)
ParameterTypeDefault ValueDescription
$stroke-width Number $inactive-stroke-width

Tick stroke width
$text-color Color $inactive-text-color

Tick text color
$text-weight Number $inactive-text-weight

Tick text weight
$text-size Number $inactive-text-size

Tick text size
$line-gradient Boolean false

Set to true if using a gradient url.
$line-color Color $inactive-line-color

Tick line color

Example Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Back to Version Explorer!