@domoinc/multiline-chart
Version:
MultiLineChart - Domo Widget
1,282 lines (1,142 loc) • 39.9 kB
JavaScript
/*! Copyright 2016 Domo Inc. */
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("d3"), require("d3.chart"), require("lodash"), require("moment"), require("@domoinc/utilities"), require("@domoinc/base-widget"), require("@domoinc/summary-number"), require("@domoinc/domo-tooltip"), require("@domoinc/da-theme2"));
else if(typeof define === 'function' && define.amd)
define(["d3", "d3.chart", "lodash", "moment", "utilities", "base-widget", "summary-number", "domo-tooltip", "da-theme2"], factory);
else if(typeof exports === 'object')
exports["MultiLine"] = factory(require("d3"), require("d3.chart"), require("lodash"), require("moment"), require("@domoinc/utilities"), require("@domoinc/base-widget"), require("@domoinc/summary-number"), require("@domoinc/domo-tooltip"), require("@domoinc/da-theme2"));
else
root["MultiLine"] = factory(root["d3"], root["d3.chart"], root["_"], root["moment"], root["da"], root["BaseWidget"], root["SummaryNumber"], root["DomoTooltip"], root["da"]["theme2"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_9__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/dist/";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var d3 = __webpack_require__(1);
var d3Chart = __webpack_require__(2);
var _ = __webpack_require__(3);
var moment = __webpack_require__(4);
var Utilities = __webpack_require__(5);
var BaseWidget = __webpack_require__(6);
var SummaryNumber = __webpack_require__(7);
var Tooltip = __webpack_require__(8);
var daTheme2 = __webpack_require__(9);
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
// MultiLine
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
module.exports = BaseWidget.extend('MultiLine', {
initialize: function() {
var _Chart = this;
this._newConfig = {
chartName: {
description: 'Name of the chart',
value: 'Multiline',
type: 'string'
},
// Widget Non Text Elements
// Size
width: {
name: 'Widget Width',
description: 'Width of the widget',
value: 400,
type: 'number',
units: 'px'
},
height: {
name: 'Widget Height',
description: 'Height of the widget',
value: 400,
type: 'number',
units: 'px'
},
strokeWidth: {
name: 'Line Width',
description: 'Width of the line',
category: 'Lines',
value: 1,
type: 'number',
units: 'px'
},
radiusSize: {
name: 'Circle Radius',
description: 'Radii of the line points',
category: 'Lines',
value: 5,
type: 'number',
units: 'px'
},
// Color
chartPrimarySeriesColors: daTheme2.themeElements.primaryColorSeries(),
generalWashoutColor: daTheme2.themeElements.washoutColor(),
showGradients: {
name: 'Show Gradients',
description: 'Show or hide colored gradient areas under the lines',
category: 'Lines',
type: 'select',
value: {name: 'Hide', value: false},
options: [
{name: 'Show', value: true},
{name: 'Hide', value: false},
]
},
// Hover/Tooltip
showTooltip: {
name: 'Show tooltip',
description: 'Show or hide the tooltip',
type: 'select',
value: {name: 'Show', value: true},
options: [
{name: 'Show', value: true},
{name: 'Hide', value: false},
]
},
tooltipBackgroundColor: daTheme2.themeElements.tooltipBackground(),
tooltipFontFamily: daTheme2.themeElements.tooltipFontFamily(),
tooltipTextSize: daTheme2.themeElements.tooltipFontSize(),
tooltipTextColor: daTheme2.themeElements.tooltipFontColor(),
// Animation Elements
initialAnimation: {
name: 'Enable Animation',
description: 'Enable or disable the initial animation',
category: 'General',
type: 'select',
value: {name: 'Animate', value: true},
options: [
{name: 'Animate', value: true},
{name: "Don't Animate", value: false},
]
},
// Widget default elements
pointOpacity: {
description: 'Function that returns the opacity for the points',
value: function(d, i) {
return 0;
},
type: ['number', 'function']
},
lineOpacity: {
description: 'Number or array of numbers to use for the line opacities',
value: function(d, i) {
return 1;
},
type: ['number', 'function']
},
pointStyle: {
description: 'Style to use for points',
value: function(container) {
container.append('circle')
.attr({
'r': _Chart.c('radiusSize'),
'cx': _Chart.c('radiusSize'),
'cy': _Chart.c('radiusSize')
});
},
type: 'function'
},
lineDashArray: {
description: 'stroke-dasharray to use for lines',
value: 'none',
type: ['string', 'function']
},
tooltipValue: {
description: 'Value shown on the tooltip',
value: function(d) {
return service.summaryNumber(_Chart.a('Y Axis')(d)) + ' | ' + _Chart.a('Series')(d);
},
type: 'function'
},
permanentLabelSeries: {
description: 'Show label on each point of a series',
value: -1,
type: 'number'
},
labelValue: {
description: 'Value shown on the permanent label',
value: function(d) {
return _Chart.a('Y Axis')(d);
},
type: 'function'
},
showVoronoi: {
description: 'Whether or not to draw the voronoi layer',
value: true,
type: 'boolean'
},
showTooltipOnPointTrigger: {
description: 'Whether or not to show the tooltip on point trigger',
value: false,
type: 'boolean'
},
hover: {
description: 'Whether or not to have hover effects',
value: true,
type: 'boolean'
},
xScaleType: {
description: 'Type of x scale',
value: 'date',
type: 'string'
},
highlightType: {
description: 'Type of highlighting',
value: 'hover',
type: 'string'
},
pointHighlight: {
description: 'How to highlight the points',
value: 'series',
type: 'string'
},
lineHighlight: {
description: 'How to highlight the lines',
value: 'series',
type: 'string'
}
};
this.mergeConfig(_Chart._newConfig);
_Chart._newDataDefinition = {
'X Axis': {
type: ['number', 'date', 'string'],
validate: function(d) {
var isValid = this.accessor(d) !== undefined;
isValid = isValid && this.accessor(d) !== '';
if (_Chart.c('xScaleType') === 'date') {
isValid = isValid && !isNaN(this.accessor(d).getTime());
}
return isValid;
},
accessor: function(line) {
if (_Chart.c('xScaleType') === 'date') {
return moment(line[0]).toDate();
} else if (_Chart.c('xScaleType') === 'number') {
return Number(line[0]);
} else {
return line[0];
}
}
},
'Y Axis': {
type: 'number',
validate: function(d) {
return !isNaN(this.accessor(d));
},
accessor: function(line) {
return Number(line[1]);
}
},
'Series': {
type: 'string',
validate: function(d) {
return this.accessor(d) !== undefined;
},
accessor: function(line) {
return String(line[2]);
},
}
};
this.mergeDataDefinition(_Chart._newDataDefinition);
//----------------------------------------------------------------------------------
// Class Interface.
//----------------------------------------------------------------------------------
_Chart.on('external:mouseout', notifyOfLineHoverOff);
_Chart.on('external:mouseover:line', notifyOfLineHover);
_Chart.on('external:mouseover:point', notifyOfPointHover);
//----------------------------------------------------------------------------------
// Static
//----------------------------------------------------------------------------------
var service = new SummaryNumber();
_Chart._yScale = d3.scale.linear();
_Chart._xScale = d3.time.scale();
_Chart._colorScale = d3.scale.ordinal();
_Chart._manualColorScale = false;
_Chart._manualXScale = false;
_Chart._manualYScale = false;
_Chart._data = null;
_Chart._highlightedLine = null;
_Chart._initialAnimationTime = 1000;
_Chart._transitioning = {
initial: false,
lines: false
};
this._line = d3.svg.line();
_Chart._currentGroups = null;
_Chart._lineValueTextSize = 0;
this._linesLayer = this._layerGroup.append('g').attr('class', 'linesLayer');
this._pointsLayer = this._layerGroup.append('g').attr('class', 'pointsLayer');
this._labelLayer = this._layerGroup.append('g').attr('class', 'labelLayer');
_Chart._voronoiLayer = _Chart._layerGroup.append('g').attr('class', 'voronoiLayer');
_Chart._gGradients = _Chart._layerGroup.append('g').attr('class', 'gGradients').style('pointer-events', 'none');
_Chart._clipPathSelector = d3.DomoUniqueIdFromPrefix('remainderClip');
this._clipPath = _Chart._gGradients.append('clipPath')
.attr('id', _Chart._clipPathSelector)
.append('rect')
.attr('width', 0)
.attr('height', 0)
.attr('x', 0)
.attr('y', 0);
_Chart._tooltip = this._layerGroup.append('g')
.attr('class', 'tooltipLayer')
.chart('DomoTooltip')
.c('format', 'text')
.c('container', this._layerGroup);
_Chart._tooltip._appends.append('text').style('pointer-events', 'none');
_Chart._linearGradientIds = ['empty', 'empty'];
_Chart._linearGradients = [{}, {}];
makeGradients(_Chart._linearGradientIds, _Chart._linearGradients);
_Chart.transform = function(data) {
var validData = _Chart.validateData(data);
initChartVariables(validData);
setColorScale(validData);
return validData;
};
//----------------------------------------------------------------------------------
// Layers
//----------------------------------------------------------------------------------
this.layer('lines', this._linesLayer, {
dataBind: function(data) {
// return a data bound selection for the passed in data.
data.groups = d3.nest()
.key(_Chart.a('Series'))
.entries(data);
data.series = data.groups.map(function(d) {
return d.key;
});
_Chart._currentGroups = data.groups;
_Chart._data = data.groups;
return this.selectAll('g.lineGroup')
.data(data.groups, function(d) {
return d.key;
});
},
insert: function() {
var group = this.append('g')
.classed('lineGroup', true);
group.append('path')
.classed('line', true)
.style({
'stroke': colorForLine,
'opacity': _Chart.c('lineOpacity'),
'pointer-events': 'none'
})
.attr('clip-path', 'url(#' + _Chart._clipPathSelector + ')');
group.append('path')
.classed('gradient', true);
return this;
}
})
.on('enter', function() {
return this;
})
.on('merge', function() {
var opacity;
hideTooltip();
var that = this;
if (_Chart.c('initialAnimation').value) {
_Chart._clipPath
.attr('width', 0);
_Chart._clipPath
.transition()
.duration(_Chart._initialAnimationTime)
.attr('width', _Chart.c('width'))
.call(endAll, 'initial');
setTimeout(function() {
that.select('path.line').attr('clip-path', null);
}, _Chart._initialAnimationTime);
} else {
this.select('path.line').attr('clip-path', null);
}
var showGradients = _Chart._data.length < 3 && _Chart._data.length > 0 && _Chart.c('showGradients').value;
this.select('path.gradient')
.attr('fill', function(d, i) {
if (_Chart._linearGradientIds[i] !== undefined) {
return 'url(#' + _Chart._linearGradientIds[i] + ')';
} else {
return null;
}
})
.style({
'pointer-events': 'none',
'fill-opacity': function(d, i) {
if (_Chart._linearGradientIds[i] !== undefined && showGradients) {
return 1;
} else {
return 0;
}
}
})
.transition('d')
.attr({
'd': function(d, i) {
var area = _Chart._areaGenerator(d.values, i);
return area;
}
})
if (showGradients) {
opacity = 0.2;
} else {
opacity = 0;
}
_Chart._linearGradients[0].selectAll('stop')
.style({
'stop-color': function() {
return colorForLine(_Chart._data[0]);
}
})
.transition()
.duration(1000);
_Chart._linearGradients[0].select('stop')
.style({
'stop-opacity': opacity
});
if (_Chart._data[1] !== undefined) {
_Chart._linearGradients[1].selectAll('stop')
.style({
'stop-color': function() {
return colorForLine(_Chart._data[1]);
}
})
.transition()
.duration(1000);
_Chart._linearGradients[1].select('stop')
.style({
'stop-opacity': opacity
});
}
this.select('path.line')
.style({
'stroke': function(d) {
if (_Chart._highlightedLine === null) {
return colorForLine(d);
}
if (_Chart._highlightedLine === d.key) {
return colorForLine(d);
} else {
return _Chart.c('generalWashoutColor');
}
},
'opacity': _Chart.c('lineOpacity'),
'fill-opacity': 0,
'stroke-width': _Chart.c('strokeWidth'),
'stroke-dasharray': _Chart.c('lineDashArray')
})
.transition('d')
.attr('d', function(d) {
return _Chart._line(d.values);
})
.call(endAll, 'lines');
return this;
})
.on('exit', function() {
return this.remove();
});
this.layer('points', this._pointsLayer, {
dataBind: function(data) {
return this.selectAll('g')
.data(data, function(d) {
return '' + _Chart.a('Series')(d) + _Chart.a('X Axis')(d);
});
},
insert: function() {
var group = this.append('g')
.classed('hoverPoint', true)
.style('opacity', 0);
if (_Chart.c('initialAnimation').value) {
group.transition()
.delay(_Chart._initialAnimationTime / 2)
.style('opacity', _Chart.c('pointOpacity'));
} else {
group.style('opacity', _Chart.c('pointOpacity'));
}
return group;
}
})
.on('enter', function() {
if (_Chart.c('showVoronoi')) {
return this;
} else {
return this.on('mouseover', function(d, i) {
onMouseOver({
point: d
}, i);
})
.on('mouseout', function(d, i) {
onMouseOut({
point: d
}, i);
})
.on('click', function(d, i) {
onClick({
point: d
}, i);
_Chart._highlightedLine = _Chart.a('Series')(d);
});
}
})
.on('merge', function() {
this.select('*').remove();
this.call(_Chart.c('pointStyle'));
_Chart._pointBBox = this.node().getBBox();
this.style('fill', function(d) {
if (_Chart._highlightedLine === null) {
return colorForLine({
key: _Chart.a('Series')(d)
});
}
if (_Chart._highlightedLine === _Chart.a('Series')(d)) {
return colorForLine({
key: _Chart.a('Series')(d)
});
} else {
return _Chart.c('generalWashoutColor');
}
});
// Position the points
this.transition()
.attr('transform', function(d) {
var x;
if (_Chart._xScale.rangeBand) {
x = (_Chart._xScale(_Chart.a('X Axis')(d)) + _Chart._xScale.rangeBand() / 2) - _Chart._pointBBox.width / 2;
} else {
x = _Chart._xScale(_Chart.a('X Axis')(d)) - _Chart._pointBBox.width / 2;
}
return 'translate(' + x + ', ' +
(_Chart._yScale(_Chart.a('Y Axis')(d)) - _Chart._pointBBox.height / 2) + ')';
});
// Set opacity of the points
this.transition()
.delay(_Chart._initialAnimationTime / 2)
.style('opacity', _Chart.c('pointOpacity'));
return this;
})
.on('exit', function() {
return this.remove();
});
this.layer('labels', this._labelLayer, {
dataBind: function(data) {
data.groups = d3.nest()
.key(_Chart.a('Series'))
.entries(data);
data.series = data.groups.map(function(d) {
return d.key;
});
if (data.groups[_Chart.c('permanentLabelSeries')] !== undefined) {
data = data.groups[_Chart.c('permanentLabelSeries')].values;
} else {
data = [];
}
return this.selectAll('text')
.data(data);
},
insert: function() {
var textElement = this.append('text')
.classed('label', true)
.attr('fill', '#8a8d8e')
.attr('text-anchor', 'middle');
if (_Chart.c('initialAnimation').value) {
textElement.style('opacity', 0);
textElement.transition()
.delay(_Chart._initialAnimationTime / 2)
.duration(0)
.style('opacity', 1);
}
return this;
}
})
.on('enter', function() {
return this;
})
.on('merge', function() {
this.text(function(d) {
return _Chart.c('labelValue')(d);
});
this.transition()
.attr('x', function(d) {
return getLabelXPosition(this, d);
})
.attr('y', function(d) {
return getLabelYPosition(this, d);
});
this.transition()
.delay(_Chart._initialAnimationTime / 2)
.style('opacity', 1);
return this;
})
.on('exit', function() {
return this.remove();
});
this.layer('voronoi', this._voronoiLayer, {
dataBind: function(data) {
var uniqueData = _.uniq(data, function(d) {
return _Chart.a('X Axis')(d) + ',' + _Chart.a('Y Axis')(d);
});
var v = d3.geom.voronoi()
.x(function(d, i) {
if (_Chart._xScale.rangeBand) {
return _Chart._xScale(_Chart.a('X Axis')(d)) + (_Chart._xScale.rangeBand() / 2);
} else {
return _Chart._xScale(_Chart.a('X Axis')(d));
}
})
.y(function(d) {
return _Chart._yScale(_Chart.a('Y Axis')(d));
})
.clipExtent([
[0, 0],
[_Chart.c('width'), _Chart.c('height')]
]);
return this.selectAll('path.voronoi')
.data(v(uniqueData));
},
insert: function() {
return this.append('path')
.classed('voronoi', true);
}
})
.on('enter', function() {
return this.on('mouseover', onMouseOver)
.on('mouseout', onMouseOut)
.on('click', onClick);
})
.on('merge', function() {
return this.attr('d', function(d) {
if (d !== undefined && d.length) {
return 'M' + d.join('L') + 'Z';
} else {
return '';
}
})
.style('fill-opacity', 0);
})
.on('exit', function() {
return this.remove();
});
//**********************************************************************************
// initChartVariables
//**********************************************************************************
function initChartVariables(validatedData) {
if (!_Chart.c('showVoronoi')) {
if (_Chart.layer('voronoi')) {
_Chart.unlayer('voronoi');
}
}
var names = d3.set(validatedData.map(_Chart.a('X Axis'))).values();
setXScaleType();
_Chart.setupYScale(validatedData);
_Chart.setupXScale(validatedData);
if (_Chart.c('highlightType') === 'click') {
_Chart._voronoiLayer.style('cursor', 'pointer');
_Chart._pointsLayer.style('cursor', 'pointer');
}
_Chart._line.x(function(d) {
if (_Chart._xScale.rangeBand) {
return _Chart._xScale(_Chart.a('X Axis')(d)) + (_Chart._xScale.rangeBand() / 2);
} else {
return _Chart._xScale(_Chart.a('X Axis')(d));
}
})
.y(function(d) {
return _Chart._yScale(_Chart.a('Y Axis')(d));
});
setHighlightType();
setPointHighlight();
setLineHighlight();
_Chart._clipPath.attr('height', _Chart.c('height'));
_Chart._areaGenerator = d3.svg.area()
.x(function(d, i) {
if (_Chart._xScale.rangeBand) {
return _Chart._xScale(_Chart.a('X Axis')(d)) + (_Chart._xScale.rangeBand() / 2);
} else {
return _Chart._xScale(_Chart.a('X Axis')(d));
}
})
.y(function(d, i) {
return _Chart._yScale(_Chart.a('Y Axis')(d));
})
.y0(_Chart.c('height'));
updateGradientDimensions();
}
//----------------------------------------------------------------------------------
// Helper Functions
//----------------------------------------------------------------------------------
function updateGradientDimensions() {
_Chart._linearGradients[0] = d3.select('#' + _Chart._linearGradientIds[0])
.attr({
'x1': _Chart.c('width'),
'x2': _Chart.c('width'),
'y2': _Chart.c('height')
});
_Chart._linearGradients[1] = d3.select('#' + _Chart._linearGradientIds[1])
.attr({
'x1': _Chart.c('width'),
'x2': _Chart.c('width'),
'y2': _Chart.c('height')
});
}
function makeGradients(gradientIdList, linearGradients) {
gradientIdList[0] = d3.DomoUniqueIdFromPrefix('linearGradientId');
var linearGradient1 = _Chart._gGradients.append('linearGradient')
.attr({
'id': _Chart._linearGradientIds[0],
'gradientUnits': 'userSpaceOnUse',
'y1': 0,
});
linearGradient1.append('stop')
.attr({
'offset': '0%'
})
.style({
'stop-color': '#333333',
'stop-opacity': 0
});
linearGradient1.append('stop')
.attr({
'offset': '90%'
})
.style({
'stop-color': '#333333',
'stop-opacity': 0
});
gradientIdList[1] = d3.DomoUniqueIdFromPrefix('linearGradientId');
var linearGradient2 = _Chart._gGradients.append('linearGradient')
.attr({
'id': _Chart._linearGradientIds[1],
'gradientUnits': 'userSpaceOnUse',
'y1': 0,
});
linearGradient2.append('stop')
.attr({
'offset': '0%'
})
.style({
'stop-color': '#333333',
'stop-opacity': 0
});
linearGradient2.append('stop')
.attr({
'offset': '90%'
})
.style({
'stop-color': '#333333',
'stop-opacity': 0
});
linearGradients[0] = linearGradient1;
linearGradients[1] = linearGradient2;
}
function setXScaleType() {
var typesOfScales = {
'number': d3.scale.linear(),
'date': d3.time.scale(),
'string': d3.scale.ordinal()
};
if (_Chart._manualXScale === false) {
if (typesOfScales[_Chart.c('xScaleType')] !== undefined) {
_Chart._xScale = typesOfScales[_Chart.c('xScaleType')];
} else {
console.warn('No valid xScaleType value provided. Switching to default (date).');
_Chart._xScale = typesOfScales.date;
_Chart.c('xScaleType', 'date');
}
_Chart._manualXScale = false;
}
return _Chart;
}
function setHighlightType() {
var types = ['hover', 'click'];
if (types.indexOf(_Chart.c('highlightType')) === -1) {
console.warn('No valid highlightType provided. Switching to default (hover)');
_Chart.c('highlightType', 'hover');
}
return _Chart;
}
function setPointHighlight() {
var types = ['series', 'all', 'none', 'x'];
if (types.indexOf(_Chart.c('pointHighlight')) === -1) {
console.warn('No valid pointHighlight provided. Switching to default (series)');
_Chart.c('pointHighlight', 'series');
}
return _Chart;
}
function setLineHighlight() {
var types = ['series', 'all', 'none'];
if (types.indexOf(_Chart.c('lineHighlight')) === -1) {
console.warn('No valid lineHighlight provided. Switching to default (series)');
_Chart.c('lineHighlight', 'series');
}
return _Chart;
}
function getCurrentRow(row) {
return [
_Chart.a('X Axis')(row),
_Chart.a('Y Axis')(row),
_Chart.a('Series')(row),
];
}
function endAll(transition, transitionType) {
var n = 0;
transition
.each(function() {
_Chart._transitioning[transitionType] = true;
++n;
})
.each('end', function() {
if (!--n) {
_Chart._transitioning[transitionType] = false;
}
});
}
function notifyOfLineHover(key) {
unhighlightAllLines();
if (key) {
_Chart._currentGroups.forEach(function(d) {
if (d.key === key) {
highlightLine(key);
highlightPoints(key);
if (_Chart.c('highlightType') === 'click') {
_Chart._highlightedLine = key;
} else {
_Chart._highlightedLine = null;
}
}
});
}
}
function notifyOfPointHover(data) {
_Chart._currentGroups.forEach(function(d) {
var xIsSame;
for (var count = 0; count < d.values.length; count += 1) {
if (_Chart.c('xScaleType') === 'date') {
xIsSame = moment(_Chart.a('X Axis')(d.values[count])).isSame(_Chart.a('X Axis')(data));
} else {
xIsSame = _Chart.a('X Axis')(d.values[count]) === _Chart.a('X Axis')(data);
}
if (xIsSame && _Chart.a('Y Axis')(d.values[count]) === _Chart.a('Y Axis')(data)) {
highlightLine(_Chart.a('Series')(data));
highlightPoints(data);
if (_Chart.c('showTooltipOnPointTrigger')) {
showTooltip(data);
}
}
}
});
}
function notifyOfLineHoverOff() {
highlightAllLines();
highlightPoints();
}
function highlightLine(d) {
if (!_Chart._transitioning.lines) {
var path = _Chart._linesLayer.selectAll('path.mLine');
if (typeof d === 'string') {
_Chart._linesLayer.selectAll('path.line')
.each(function(d1) {
if ((_Chart.c('lineHighlight') === 'series' && d1.key === d) ||
_Chart.c('lineHighlight') === 'all') {
path = this;
d3.select(this).style('stroke', colorForLine(d1));
} else {
d3.select(this).style('stroke', _Chart.c('generalWashoutColor'));
}
});
} else {
_Chart._linesLayer.selectAll('path.line')
.each(function(d1) {
if ((_Chart.c('lineHighlight') === 'series' && d1.key === _Chart.a('Series')(d)) ||
_Chart.c('lineHighlight') === 'all') {
path = this;
d3.select(this).style('stroke', colorForLine(d1));
} else {
d3.select(this).style('stroke', _Chart.c('generalWashoutColor'));
}
});
}
if (path.parentElement) {
path.parentElement.appendChild(path);
}
}
return;
}
function highlightAllLines() {
_Chart._linesLayer.selectAll('path.line')
.style('stroke', colorForLine);
}
function unhighlightAllLines() {
_Chart._linesLayer.selectAll('path.line')
.style('stroke', _Chart.c('generalWashoutColor'));
_Chart._pointsLayer.selectAll('.hoverPoint')
.style('opacity', 0);
}
function highlightPoints(d) {
if (d !== undefined) {
var line = _Chart._pointsLayer.selectAll('g.hoverPoint');
if (typeof d === 'string') {
_Chart._pointsLayer.selectAll('g.hoverPoint')
.each(function(d1) {
if ((_Chart.c('pointHighlight') === 'series' && _Chart.a('Series')(d1) === d) ||
_Chart.c('pointHighlight') === 'all') {
line = this;
if (line.parentElement) {
line.parentElement.appendChild(line);
}
d3.select(this).style('fill', colorForLine({
key: _Chart.a('Series')(d1)
}))
.style('opacity', 1);
} else {
d3.select(this).style('fill', _Chart.c('generalWashoutColor'))
.style('opacity', _Chart.c('pointOpacity'));
}
});
} else {
_Chart._pointsLayer.selectAll('g.hoverPoint')
.each(function(d1) {
if ((_Chart.c('pointHighlight') === 'series' && _Chart.a('Series')(d1) === _Chart.a('Series')(d)) ||
_Chart.c('pointHighlight') === 'all' ||
(_Chart.c('pointHighlight') === 'x' && +_Chart.a('X Axis')(d1) === +_Chart.a('X Axis')(d))) {
line = this;
if (line.parentElement) {
line.parentElement.appendChild(line);
}
d3.select(this).style('fill', colorForLine({
key: _Chart.a('Series')(d1)
}))
.style('opacity', 1);
} else {
d3.select(this).style('fill', _Chart.c('generalWashoutColor'))
.style('opacity', _Chart.c('pointOpacity'));
}
});
}
} else {
_Chart._pointsLayer.selectAll('g.hoverPoint')
.style('fill', function(d) {
return colorForLine({
key: _Chart.a('Series')(d)
});
})
.style('opacity', _Chart.c('pointOpacity'));
}
return;
}
function showTooltip(d) {
if (_Chart.c('showTooltip').value) {
var x;
if (_Chart._xScale.rangeBand) {
x = _Chart._xScale(_Chart.a('X Axis')(d)) + (_Chart._xScale.rangeBand() / 2);
} else {
x = _Chart._xScale(_Chart.a('X Axis')(d));
}
var point = {
x: x,
y: _Chart._yScale(_Chart.a('Y Axis')(d))
};
_Chart._tooltip._appends.select('text')
.style({
'fill': _Chart.c('tooltipTextColor'),
'font-size': _Chart.c('tooltipTextSize') + 'px',
'font-family': _Chart.c('tooltipFontFamily')
})
.text(_Chart.c('tooltipValue')(d));
_Chart._tooltip.c('tooltipBackgroundColor', _Chart.c('tooltipBackgroundColor')).trigger('draw');
_Chart._tooltip.trigger('moveTo', point);
}
}
function hideTooltip() {
_Chart._tooltip.trigger('remove');
}
function getLabelXPosition(label, d) {
var boundingRect = label.getBBox();
if (_Chart._xScale(_Chart.a('X Axis')(d)) <= 0) {
return _Chart._xScale(_Chart.a('X Axis')(d)) + boundingRect.width;
}
if (_Chart._xScale(_Chart.a('X Axis')(d)) >= _Chart.c('width')) {
return _Chart._xScale(_Chart.a('X Axis')(d)) - boundingRect.width / 2;
}
return _Chart._xScale(_Chart.a('X Axis')(d));
}
function getLabelYPosition(label, d) {
var boundingRect = label.getBBox();
if (_Chart._yScale(_Chart.a('Y Axis')(d)) <= 0) {
return boundingRect.height * 1.5;
}
return _Chart._yScale(_Chart.a('Y Axis')(d)) - boundingRect.height;
}
function onMouseOver(d, i) {
if (_Chart.c('hover')) {
if (!_Chart._transitioning.lines) {
showTooltip(d.point);
if (_Chart.c('highlightType') === 'hover') {
highlightLine(d.point);
highlightPoints(d.point);
}
_Chart.trigger('mouseover', getCurrentRow(d.point), i);
}
}
}
function onMouseOut(d, i) {
if (_Chart.c('hover')) {
if (!_Chart._transitioning.lines) {
if (_Chart.c('highlightType') === 'hover') {
highlightAllLines();
highlightPoints();
}
hideTooltip();
_Chart.trigger('mouseout', getCurrentRow(d.point), i);
}
}
}
function onClick(d, i) {
if (!_Chart._transitioning.lines) {
if (_Chart.c('highlightType') === 'click') {
highlightLine(d.point);
highlightPoints(d.point);
}
showTooltip(d.point);
_Chart.trigger('click', getCurrentRow(d.point), i);
}
}
function colorForLine(line) {
return _Chart._colorScale(line.key);
}
function setColorScale(data) {
var domain = _.uniq(_.map(data, function(d, i) {
return _Chart.a('Series')(d);
}));
if (!_Chart._manualColorScale) {
daTheme2.updatePrimaryColorScale(_Chart._colorScale, domain, _Chart.c('chartPrimarySeriesColors'));
}
}
_Chart.setupXScale = function(data) {
if (_Chart._manualXScale === false) {
var xValues = data.map(this.a('X Axis'));
var maxX = Math.max.apply(null, xValues);
var minX = Math.min.apply(null, xValues);
if (Math.abs(maxX) === Infinity) {
maxX = 0;
}
if (Math.abs(minX) === Infinity) {
minX = 0;
}
if (_Chart.c('xScaleType') === 'string') {
_Chart._xScale.domain(_.uniq(xValues))
.rangePoints([0, this.c('width')]);
} else {
_Chart._xScale.domain([minX, maxX])
.range([0, this.c('width')]);
}
}
return _Chart;
};
_Chart.setupYScale = function(data) {
if (_Chart._manualYScale === false) {
var yValues = data.map(this.a('Y Axis'));
var maxY = Math.max.apply(null, yValues);
var minY = Math.min.apply(null, yValues);
if (minY > 0) {
minY = 0;
}
_Chart._yScale.domain([minY, maxY]).range([this.c('height'), 0]);
}
return _Chart;
};
_Chart.xScale = function(_) {
if (_) {
_Chart._xScale = _;
_Chart._manualXScale = true;
return this;
} else {
return this._xScale;
}
};
_Chart.yScale = function(_) {
if (_) {
_Chart._yScale = _;
_Chart._manualYScale = true;
return this;
} else {
return this._yScale;
}
};
_Chart.colorScale = function(_) {
if (_) {
this._manualColorScale = true;
this._colorScale = _;
return this;
} else {
return this._colorScale;
}
}
}
});
/***/ },
/* 1 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/ },
/* 2 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
/***/ },
/* 3 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
/***/ },
/* 4 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
/***/ },
/* 5 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_5__;
/***/ },
/* 6 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
/***/ },
/* 7 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_7__;
/***/ },
/* 8 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_8__;
/***/ },
/* 9 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_9__;
/***/ }
/******/ ])
});
;