woocommerce/plugins/woocommerce-admin/client/components/chart/utils.js

607 lines
18 KiB
JavaScript
Raw Normal View History

2018-06-15 18:11:25 +00:00
/** @format */
/**
* External dependencies
*/
import { findIndex, get } from 'lodash';
2018-08-12 17:01:10 +00:00
import { max as d3Max } from 'd3-array';
2018-06-15 18:11:25 +00:00
import { axisBottom as d3AxisBottom, axisLeft as d3AxisLeft } from 'd3-axis';
2018-09-12 11:16:36 +00:00
import { format as d3Format } from 'd3-format';
2018-06-15 18:11:25 +00:00
import {
scaleBand as d3ScaleBand,
scaleLinear as d3ScaleLinear,
scaleTime as d3ScaleTime,
} from 'd3-scale';
import { event as d3Event, mouse as d3Mouse, select as d3Select } from 'd3-selection';
import { line as d3Line } from 'd3-shape';
2018-09-04 13:03:46 +00:00
/**
* Internal dependencies
*/
import { formatCurrency } from 'lib/currency';
2018-06-15 18:11:25 +00:00
/**
* Describes `smallestFactor`
* @param {number} inputNum - any double or integer
* @returns {integer} smallest factor of num
*/
export const getFactors = inputNum => {
const num_factors = [];
for ( let i = 1; i <= Math.floor( Math.sqrt( inputNum ) ); i += 1 ) {
if ( inputNum % i === 0 ) {
num_factors.push( i );
inputNum / i !== i && num_factors.push( inputNum / i );
}
}
num_factors.sort( ( x, y ) => x - y ); // numeric sort
return num_factors;
};
2018-07-10 14:03:37 +00:00
/**
* Describes `getUniqueKeys`
* @param {array} data - The chart component's `data` prop.
* @returns {array} of unique category keys
*/
2018-06-15 18:11:25 +00:00
export const getUniqueKeys = data => {
return [
...new Set(
data.reduce( ( accum, curr ) => {
Object.keys( curr ).forEach( key => key !== 'date' && accum.push( key ) );
return accum;
}, [] )
),
];
};
2018-07-10 14:03:37 +00:00
/**
* Describes `getOrderedKeys`
* @param {array} data - The chart component's `data` prop.
* @param {array} uniqueKeys - from `getUniqueKeys`.
* @returns {array} of unique category keys ordered by cumulative total value
*/
export const getOrderedKeys = ( data, uniqueKeys ) =>
uniqueKeys
2018-06-15 18:11:25 +00:00
.map( key => ( {
key,
focus: true,
total: data.reduce( ( a, c ) => a + c[ key ].value, 0 ),
visible: true,
2018-06-15 18:11:25 +00:00
} ) )
.sort( ( a, b ) => b.total - a.total );
2018-06-15 18:11:25 +00:00
2018-07-10 14:03:37 +00:00
/**
* Describes `getLineData`
* @param {array} data - The chart component's `data` prop.
* @param {array} orderedKeys - from `getOrderedKeys`.
* @returns {array} an array objects with a category `key` and an array of `values` with `date` and `value` properties
*/
export const getLineData = ( data, orderedKeys ) =>
orderedKeys.map( row => ( {
key: row.key,
focus: row.focus,
visible: row.visible,
2018-06-15 18:11:25 +00:00
values: data.map( d => ( {
date: d.date,
focus: row.focus,
value: get( d, [ row.key, 'value' ], 0 ),
visible: row.visible,
2018-06-15 18:11:25 +00:00
} ) ),
} ) );
2018-07-10 14:03:37 +00:00
/**
* Describes `getUniqueDates`
* @param {array} lineData - from `GetLineData`
* @param {function} parseDate - D3 time format parser
2018-07-10 14:03:37 +00:00
* @returns {array} an array of unique date values sorted from earliest to latest
*/
export const getUniqueDates = ( lineData, parseDate ) => {
2018-06-15 18:11:25 +00:00
return [
...new Set(
lineData.reduce( ( accum, { values } ) => {
2018-06-15 18:11:25 +00:00
values.forEach( ( { date } ) => accum.push( date ) );
return accum;
}, [] )
),
].sort( ( a, b ) => parseDate( a ) - parseDate( b ) );
};
export const getColor = ( key, params ) => {
const smallColorScales = [
[],
[ 0.5 ],
[ 0.333, 0.667 ],
[ 0.2, 0.5, 0.8 ],
[ 0.12, 0.375, 0.625, 0.88 ],
];
let keyValue = 0;
const len = params.orderedKeys.length;
const idx = findIndex( params.orderedKeys, d => d.key === key );
if ( len < 5 ) {
keyValue = smallColorScales[ len ][ idx ];
} else {
keyValue = idx / ( params.orderedKeys.length - 1 );
}
return params.colorScheme( keyValue );
};
2018-07-10 14:03:37 +00:00
/**
* Describes getXScale
* @param {array} uniqueDates - from `getUniqueDates`
* @param {number} width - calculated width of the charting space
* @returns {function} a D3 scale of the dates
*/
export const getXScale = ( uniqueDates, width ) =>
2018-06-15 18:11:25 +00:00
d3ScaleBand()
.domain( uniqueDates )
2018-06-15 18:11:25 +00:00
.rangeRound( [ 0, width ] )
.paddingInner( 0.1 );
2018-07-10 14:03:37 +00:00
/**
* Describes getXGroupScale
* @param {array} orderedKeys - from `getOrderedKeys`
* @param {function} xScale - from `getXScale`
* @returns {function} a D3 scale for each category within the xScale range
*/
export const getXGroupScale = ( orderedKeys, xScale ) =>
2018-06-15 18:11:25 +00:00
d3ScaleBand()
.domain( orderedKeys.filter( d => d.visible ).map( d => d.key ) )
.rangeRound( [ 0, xScale.bandwidth() ] )
2018-06-15 18:11:25 +00:00
.padding( 0.07 );
2018-07-10 14:03:37 +00:00
/**
* Describes getXLineScale
* @param {array} uniqueDates - from `getUniqueDates`
* @param {number} width - calculated width of the charting space
* @returns {function} a D3 scaletime for each date
*/
export const getXLineScale = ( uniqueDates, width ) =>
d3ScaleTime()
2018-06-15 18:11:25 +00:00
.domain( [ new Date( uniqueDates[ 0 ] ), new Date( uniqueDates[ uniqueDates.length - 1 ] ) ] )
.rangeRound( [ 0, width ] );
2018-07-10 14:03:37 +00:00
/**
2018-09-07 12:48:07 +00:00
* Describes and rounds the maximum y value to the nearest thousadn, ten-thousand, million etc.
2018-07-10 14:03:37 +00:00
* @param {array} lineData - from `getLineData`
* @returns {number} the maximum value in the timeseries multiplied by 4/3
*/
2018-09-05 11:20:12 +00:00
export const getYMax = lineData => {
2018-09-07 12:48:07 +00:00
const yMax = 4 / 3 * d3Max( lineData, d => d3Max( d.values.map( date => date.value ) ) );
2018-09-05 11:20:12 +00:00
const pow3Y = Math.pow( 10, ( ( Math.log( yMax ) * Math.LOG10E + 1 ) | 0 ) - 2 ) * 3;
return Math.ceil( yMax / pow3Y ) * pow3Y;
};
2018-06-15 18:11:25 +00:00
2018-07-10 14:03:37 +00:00
/**
* Describes getYScale
* @param {number} height - calculated height of the charting space
* @param {number} yMax - from `getYMax`
* @returns {function} the D3 linear scale from 0 to the value from `getYMax`
*/
export const getYScale = ( height, yMax ) =>
2018-06-15 18:11:25 +00:00
d3ScaleLinear()
.domain( [ 0, yMax ] )
2018-06-15 18:11:25 +00:00
.rangeRound( [ height, 0 ] );
2018-07-10 14:03:37 +00:00
/**
* Describes getyTickOffset
* @param {number} height - calculated height of the charting space
* @param {number} scale - ratio of the expected width to calculated width (given the viewbox)
* @param {number} yMax - from `getYMax`
* @returns {function} the D3 linear scale from 0 to the value from `getYMax`, offset by 12 pixels down
*/
export const getYTickOffset = ( height, scale, yMax ) =>
2018-06-15 18:11:25 +00:00
d3ScaleLinear()
.domain( [ 0, yMax ] )
2018-06-15 18:11:25 +00:00
.rangeRound( [ height + scale * 12, scale * 12 ] );
2018-07-10 14:03:37 +00:00
/**
* Describes getyTickOffset
* @param {function} xLineScale - from `getXLineScale`.
* @param {function} yScale - from `getYScale`.
* @returns {function} the D3 line function for plotting all category values
*/
export const getLine = ( xLineScale, yScale ) =>
d3Line()
.x( d => xLineScale( new Date( d.date ) ) )
2018-06-15 18:11:25 +00:00
.y( d => yScale( d.value ) );
/**
* Describes getXTicks
* @param {array} uniqueDates - all the unique dates from the input data for the chart
* @param {integer} width - calculated page width
* @param {string} layout - standard, comparison or compact chart types
* @returns {integer} number of x-axis ticks based on width and chart layout
*/
export const getXTicks = ( uniqueDates, width, layout ) => {
// caluclate the maximum number of ticks allowed in the x-axis based on the width
// and layout of the chart
let ticks = 16;
if ( width < 783 ) {
ticks = 7;
} else if ( width >= 783 && width < 1129 ) {
ticks = 12;
} else if ( width >= 1130 && width < 1365 ) {
if ( layout === 'standard' ) {
ticks = 16;
} else if ( layout === 'comparison' ) {
ticks = 12;
} else if ( layout === 'compact' ) {
ticks = 7;
}
} else if ( width >= 1365 ) {
if ( layout === 'standard' ) {
ticks = 31;
} else if ( layout === 'comparison' ) {
ticks = 16;
} else if ( layout === 'compact' ) {
ticks = 12;
}
}
if ( uniqueDates.length <= ticks ) {
return uniqueDates;
}
let factors = [];
let i = 0;
// first we get all the factors of the length of the uniqieDates array
// if the number is a prime number or near prime (with 3 factors) then we
// step down by 1 integer and try again
while ( factors.length <= 3 ) {
factors = getFactors( uniqueDates.length - ( 1 + i ) );
i += 1;
}
let newTicks = [];
let factorIndex = 0;
// newTicks is the first tick plus the smallest factor (initiallY) etc.
// however, if we still end up with too many ticks we look at the next factor
// and try again unttil we have fewer ticks than the max
while ( newTicks.length > ticks || newTicks.length === 0 ) {
if ( newTicks.length > ticks ) {
factorIndex += 1;
newTicks = [];
}
for ( let idx = 0; idx < uniqueDates.length; idx = idx + factors[ factorIndex ] ) {
newTicks.push( uniqueDates[ idx ] );
}
}
// if, for some reason, the first or last date is missing from the newTicks array, add it back in
if ( newTicks[ 0 ] !== uniqueDates[ 0 ] ) {
newTicks.unshift( uniqueDates[ 0 ] );
}
if ( newTicks[ newTicks.length - 1 ] !== uniqueDates[ uniqueDates.length - 1 ] ) {
newTicks.push( uniqueDates[ uniqueDates.length - 1 ] );
}
return newTicks;
};
2018-07-10 14:03:37 +00:00
/**
* Describes getDateSpaces
* @param {array} uniqueDates - from `getUniqueDates`
* @param {number} width - calculated width of the charting space
* @param {function} xLineScale - from `getXLineScale`
* @returns {array} that icnludes the date, start (x position) and width to layout the mouseover rectangles
*/
export const getDateSpaces = ( uniqueDates, width, xLineScale ) =>
uniqueDates.map( ( d, i ) => {
const xNow = xLineScale( new Date( d ) );
const xPrev =
i >= 1
? xLineScale( new Date( uniqueDates[ i - 1 ] ) )
: xLineScale( new Date( uniqueDates[ 0 ] ) );
const xNext =
i < uniqueDates.length - 1
? xLineScale( new Date( uniqueDates[ i + 1 ] ) )
: xLineScale( new Date( uniqueDates[ uniqueDates.length - 1 ] ) );
let xWidth = i === 0 ? xNext - xNow : xNow - xPrev;
const xStart = i === 0 ? 0 : xNow - xWidth / 2;
xWidth = i === 0 || i === uniqueDates.length - 1 ? xWidth / 2 : xWidth;
return {
date: d,
start: uniqueDates.length > 1 ? xStart : 0,
width: uniqueDates.length > 1 ? xWidth : width,
};
} );
2018-06-15 18:11:25 +00:00
2018-08-12 17:01:10 +00:00
export const drawAxis = ( node, params ) => {
const xScale = params.type === 'line' ? params.xLineScale : params.xScale;
2018-06-15 18:11:25 +00:00
const yGrids = [];
for ( let i = 0; i < 4; i++ ) {
yGrids.push( i / 3 * params.yMax );
2018-06-15 18:11:25 +00:00
}
const ticks = params.xTicks.map( d => ( params.type === 'line' ? new Date( d ) : d ) );
2018-06-15 18:11:25 +00:00
node
.append( 'g' )
.attr( 'class', 'axis' )
.attr( 'transform', `translate(0,${ params.height })` )
.call(
d3AxisBottom( xScale )
.tickValues( ticks )
2018-09-05 20:52:35 +00:00
.tickFormat( d => params.xFormat( d instanceof Date ? d : new Date( d ) ) )
2018-06-15 18:11:25 +00:00
);
2018-09-04 11:31:18 +00:00
node
.append( 'g' )
.attr( 'class', 'axis axis-month' )
2018-09-04 13:03:46 +00:00
.attr( 'transform', `translate(3, ${ params.height + 20 })` )
2018-09-04 11:31:18 +00:00
.call(
d3AxisBottom( xScale )
.tickValues( ticks )
2018-09-12 11:16:44 +00:00
.tickFormat( ( d, i ) => {
const monthDate = d instanceof Date ? d : new Date( d );
let prevMonth = i !== 0 ? ticks[ i - 1 ] : ticks[ i ];
2018-09-14 11:36:53 +00:00
prevMonth = prevMonth instanceof Date ? prevMonth : new Date( prevMonth );
return monthDate.getDate() === 1 ||
i === 0 ||
params.x2Format( monthDate ) !== params.x2Format( prevMonth )
? params.x2Format( monthDate )
: '';
2018-09-12 11:16:44 +00:00
} )
2018-09-04 11:31:18 +00:00
)
.call( g => g.select( '.domain' ).remove() );
2018-09-04 13:03:46 +00:00
node
.selectAll( '.axis-month .tick text' )
.style( 'font-size', `${ Math.round( params.scale * 10 ) }px` );
2018-09-04 11:31:18 +00:00
node
.append( 'g' )
.attr( 'class', 'pipes' )
.attr( 'transform', `translate(0, ${ params.height })` )
.call(
d3AxisBottom( xScale )
.tickValues( ticks )
2018-09-04 11:31:18 +00:00
.tickSize( 5 )
.tickFormat( '' )
);
2018-06-15 18:11:25 +00:00
node
.append( 'g' )
.attr( 'class', 'grid' )
.attr( 'transform', `translate(-${ params.margin.left },0)` )
.call(
d3AxisLeft( params.yScale )
2018-06-15 18:11:25 +00:00
.tickValues( yGrids )
2018-09-04 13:03:46 +00:00
.tickSize( -params.width - params.margin.left - params.margin.right )
2018-06-15 18:11:25 +00:00
.tickFormat( '' )
)
.call( g => g.select( '.domain' ).remove() );
node
.append( 'g' )
.attr( 'class', 'axis y-axis' )
2018-09-07 10:28:02 +00:00
.attr( 'transform', 'translate(-50, 0)' )
.attr( 'text-anchor', 'start' )
2018-06-15 18:11:25 +00:00
.call(
d3AxisLeft( params.yTickOffset )
2018-06-15 18:11:25 +00:00
.tickValues( yGrids )
2018-09-07 12:39:31 +00:00
.tickFormat( d => d3Format( params.yFormat )( d !== 0 ? d : 0 ) )
2018-06-15 18:11:25 +00:00
);
node
.selectAll( '.y-axis .tick text' )
.style( 'font-size', `${ Math.round( params.scale * 10 ) }px` );
node.selectAll( '.domain' ).remove();
node
.selectAll( '.axis' )
.selectAll( '.tick' )
.select( 'line' )
.remove();
};
const showTooltip = ( node, params, d, position ) => {
const chartCoords = node.node().getBoundingClientRect();
let [ xPosition, yPosition ] = position ? position : d3Mouse( node.node() );
2018-09-07 10:41:40 +00:00
xPosition = xPosition > chartCoords.width - 340 ? xPosition - 340 : xPosition + 100;
yPosition = yPosition > chartCoords.height - 150 ? yPosition - 200 : yPosition + 20;
const keys = params.orderedKeys.filter( row => row.visible ).map(
2018-08-12 17:01:10 +00:00
row => `
2018-09-04 13:03:46 +00:00
<li class="key-row">
<div class="key-container">
2018-09-07 12:45:29 +00:00
<span class="key-color" style="background-color:${ getColor( row.key, params ) }"></span>
<span class="key-key">${ d[ row.key ].label ? d[ row.key ].label : row.key }</span>
2018-09-04 13:03:46 +00:00
</div>
<span class="key-value">${ formatCurrency( d[ row.key ].value ) }</span>
</li>
`
);
2018-08-12 17:01:10 +00:00
const tooltipTitle = params.tooltipTitle
? params.tooltipTitle
: params.tooltipFormat( d.date instanceof Date ? d.date : new Date( d.date ) );
2018-07-25 14:58:32 +00:00
params.tooltip
.style( 'left', xPosition + 'px' )
.style( 'top', yPosition + 'px' )
2018-09-04 13:03:46 +00:00
.style( 'display', 'flex' ).html( `
<div>
<h4>${ tooltipTitle }</h4>
<ul>
${ keys.join( '' ) }
</ul>
</div>
` );
};
const handleMouseOverBarChart = ( d, i, nodes, node, data, params, position ) => {
d3Select( nodes[ i ].parentNode )
.select( '.barfocus' )
.attr( 'opacity', '0.1' );
showTooltip( node, params, d, position );
};
2018-07-25 14:58:32 +00:00
const handleMouseOutBarChart = ( d, i, nodes, params ) => {
d3Select( nodes[ i ].parentNode )
.select( '.barfocus' )
.attr( 'opacity', '0' );
params.tooltip.style( 'display', 'none' );
};
const handleMouseOverLineChart = ( d, i, nodes, node, data, params, position ) => {
d3Select( nodes[ i ].parentNode )
.select( '.focus-grid' )
.attr( 'opacity', '1' );
showTooltip( node, params, data.find( e => e.date === d.date ), position );
};
2018-07-25 14:58:32 +00:00
const handleMouseOutLineChart = ( d, i, nodes, params ) => {
d3Select( nodes[ i ].parentNode )
.select( '.focus-grid' )
.attr( 'opacity', '0' );
2018-07-25 14:58:32 +00:00
params.tooltip.style( 'display', 'none' );
};
const calculatePositionInChart = ( element, chart ) => {
const elementCoords = element.getBoundingClientRect();
const chartCoords = chart.getBoundingClientRect();
return [ elementCoords.x - chartCoords.x, elementCoords.y - chartCoords.y ];
};
2018-06-15 18:11:25 +00:00
export const drawLines = ( node, data, params ) => {
const series = node
.append( 'g' )
.attr( 'class', 'lines' )
2018-06-15 18:11:25 +00:00
.selectAll( '.line-g' )
.data( params.lineData.filter( d => d.visible ) )
2018-06-15 18:11:25 +00:00
.enter()
.append( 'g' )
.attr( 'class', 'line-g' );
series
.append( 'path' )
.attr( 'fill', 'none' )
.attr( 'stroke-width', 3 )
.attr( 'stroke-linejoin', 'round' )
.attr( 'stroke-linecap', 'round' )
.attr( 'stroke', d => getColor( d.key, params ) )
.style( 'opacity', d => {
const opacity = d.focus ? 1 : 0.1;
return d.visible ? opacity : 0;
} )
.attr( 'd', d => params.line( d.values ) );
2018-06-15 18:11:25 +00:00
params.uniqueDates.length < 50 &&
series
.selectAll( 'circle' )
.data( ( d, i ) => d.values.map( row => ( { ...row, i, visible: d.visible, key: d.key } ) ) )
.enter()
.append( 'circle' )
.attr( 'r', 6 )
.attr( 'fill', d => getColor( d.key, params ) )
.attr( 'stroke', '#fff' )
.attr( 'stroke-width', 3 )
.style( 'opacity', d => {
const opacity = d.focus ? 1 : 0.1;
return d.visible ? opacity : 0;
} )
.attr( 'cx', d => params.xLineScale( new Date( d.date ) ) )
.attr( 'cy', d => params.yScale( d.value ) )
.on( 'mouseover', ( d, i, nodes ) =>
handleMouseOverLineChart( d, i, nodes, node, data, params )
)
.on( 'mouseout', ( d, i, nodes ) => handleMouseOutLineChart( d, i, nodes, params ) );
2018-09-07 10:41:40 +00:00
const focus = node
.append( 'g' )
.attr( 'class', 'focusspaces' )
.selectAll( '.focus' )
.data( params.dateSpaces )
.enter()
.append( 'g' )
.attr( 'class', 'focus' );
focus
.append( 'line' )
.attr( 'class', 'focus-grid' )
.attr( 'x1', d => params.xLineScale( new Date( d.date ) ) )
.attr( 'y1', 0 )
.attr( 'x2', d => params.xLineScale( new Date( d.date ) ) )
.attr( 'y2', params.height )
.attr( 'opacity', '0' );
focus
.append( 'rect' )
.attr( 'class', 'focus-g' )
.attr( 'x', d => d.start )
.attr( 'y', 0 )
.attr( 'width', d => d.width )
.attr( 'height', params.height )
.attr( 'opacity', 0 )
.attr( 'tabindex', '0' )
2018-09-07 10:41:40 +00:00
.on( 'mouseover', ( d, i, nodes ) =>
handleMouseOverLineChart( d, i, nodes, node, data, params )
)
.on( 'focus', ( d, i, nodes ) => {
const position = calculatePositionInChart( d3Event.target, node.node() );
handleMouseOverLineChart( d, i, nodes, node, data, params, position );
} )
.on( 'mouseout blur', ( d, i, nodes ) => handleMouseOutLineChart( d, i, nodes, params ) );
2018-06-15 18:11:25 +00:00
};
export const drawBars = ( node, data, params ) => {
const barGroup = node
.append( 'g' )
.attr( 'class', 'bars' )
.selectAll( 'g' )
.data( data )
.enter()
.append( 'g' )
.attr( 'transform', d => `translate(${ params.xScale( d.date ) },0)` )
2018-06-15 18:11:25 +00:00
.attr( 'class', 'bargroup' );
barGroup
.append( 'rect' )
.attr( 'class', 'barfocus' )
.attr( 'x', 0 )
.attr( 'y', 0 )
.attr( 'width', params.xGroupScale.range()[ 1 ] )
2018-06-15 18:11:25 +00:00
.attr( 'height', params.height )
.attr( 'opacity', '0' );
barGroup
.selectAll( '.bar' )
.data( d =>
params.orderedKeys.filter( row => row.visible ).map( row => ( {
key: row.key,
focus: row.focus,
value: d[ row.key ].value,
visible: row.visible,
} ) )
)
2018-06-15 18:11:25 +00:00
.enter()
.append( 'rect' )
.attr( 'class', 'bar' )
.attr( 'x', d => params.xGroupScale( d.key ) )
.attr( 'y', d => params.yScale( d.value ) )
.attr( 'width', params.xGroupScale.bandwidth() )
.attr( 'height', d => params.height - params.yScale( d.value ) )
.attr( 'fill', d => getColor( d.key, params ) )
.style( 'opacity', d => {
const opacity = d.focus ? 1 : 0.1;
return d.visible ? opacity : 0;
2018-09-04 13:03:46 +00:00
} )
.on( 'mouseover', ( d, i, nodes ) =>
handleMouseOverBarChart( d, i, nodes, node, data, params )
)
.on( 'mouseout', ( d, i, nodes ) => handleMouseOutBarChart( d, i, nodes, params ) );
2018-06-15 18:11:25 +00:00
barGroup
.append( 'rect' )
.attr( 'class', 'barmouse' )
.attr( 'x', 0 )
.attr( 'y', 0 )
.attr( 'width', params.xGroupScale.range()[ 1 ] )
2018-06-15 18:11:25 +00:00
.attr( 'height', params.height )
.attr( 'opacity', '0' )
.attr( 'tabindex', '0' )
.on( 'mouseover', ( d, i, nodes ) =>
handleMouseOverBarChart( d, i, nodes, node, data, params )
)
.on( 'focus', ( d, i, nodes ) => {
const position = calculatePositionInChart( d3Event.target, node.node() );
handleMouseOverBarChart( d, i, nodes, node, data, params, position );
} )
.on( 'mouseout blur', ( d, i, nodes ) => handleMouseOutBarChart( d, i, nodes, params ) );
2018-06-15 18:11:25 +00:00
};