@domoinc/multiline-chart
Version:
MultiLineChart - Domo Widget
369 lines (329 loc) • 11.6 kB
JavaScript
var d3 = require('d3');
var d3Chart = require('d3.chart');
var BaseWidget = require('@domoinc/base-widget');
var MultiLine = require('@domoinc/multiline');
var Axis = require('@domoinc/axis');
var daTheme2 = require('@domoinc/da-theme2');
var SummaryNumber = require('@domoinc/summary-number');
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
// MultiLineChart:
// This is MultiLine with Axes
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
module.exports = MultiLine.extend('MultiLineChart', {
//**********************************************************************************
// Initialization
//**********************************************************************************
initialize: function () {
'use strict';
var _Chart = this;
//----------------------------------------------------------------------------------
// Config
//----------------------------------------------------------------------------------
this._newConfig = {
singleColor: {
name: 'Line Color',
description: 'Color for the line',
type: 'color',
value: ''
},
// Plugin configs
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'
},
// x axis
xAddAxis: {
description: 'Show X Axis',
type: 'select',
value: {name: 'Show', value: true},
options: [
{name: 'Show', value: true},
{name: 'Hide', value: false},
]
},
xAddBaseline: {
name: 'Show X Axis',
description: 'Show or hide the X axis (the horizontal line immediately above the X axis labels)',
type: 'select',
value: {name: 'Show', value: true},
options: [
{name: 'Show', value: true},
{name: 'Hide', value: false},
]
},
xAddGridlines: {
// name: 'Show X Axis Gridlines',
description: 'Show or hide the X axis gridlines',
type: 'select',
value: {name: 'Hide', value: false},
options: [
{name: 'Show', value: true},
{name: 'Hide', value: false},
]
},
xAddTicks: {
name: 'Show X Axis Ticks',
description: 'Show or hide the X axis tick marks',
type: 'select',
value: {name: 'Hide', value: false},
options: [
{name: 'Show', value: true},
{name: 'Hide', value: false},
]
},
xAddLabels: {
name: 'Show X Axis Labels',
description: 'Show or hide the X axis labels',
type: 'select',
value: {name: 'Show', value: true},
options: [
{name: 'Show', value: true},
{name: 'Hide', value: false},
]
},
//y axis
yAddAxis: {
description: 'Show Y Axis',
type: 'select',
value: {name: 'Show', value: true},
options: [
{name: 'Show', value: true},
{name: 'Hide', value: false},
]
},
yAddBaseline: {
name: 'Show Y Axis',
description: 'Show or hide the Y axis (the horizontal line immediately adjacent to the Y axis labels)',
type: 'select',
value: {name: 'Hide', value: false},
options: [
{name: 'Show', value: true},
{name: 'Hide', value: false},
]
},
yAddZeroline: {
name: 'Show Zeroline',
description: 'Show or hide the axis zeroline (the horizontal line perpendicular to the 0 value on the Y axis)',
type: 'select',
value: {name: 'Hide', value: false},
options: [
{name: 'Show', value: true},
{name: 'Hide', value: false},
]
},
yAddGridlines: {
name: 'Show Gridlines',
description: 'Show or hide the axis gridlines',
type: 'select',
value: {name: 'Show', value: true},
options: [
{name: 'Show', value: true},
{name: 'Hide', value: false},
]
},
yAddTicks: {
name: 'Show Y Axis Ticks',
description: 'Show or hide the Y axis tick marks',
type: 'select',
value: {name: 'Hide', value: false},
options: [
{name: 'Show', value: true},
{name: 'Hide', value: false},
]
},
yAddLabels: {
name: 'Show Y Axis Labels',
description: 'Show or hide the Y axis labels',
type: 'select',
value: {name: 'Show', value: true},
options: [
{name: 'Show', value: true},
{name: 'Hide', value: false},
]
},
axesLineColor: daTheme2.themeElements.axesLineColor(),
axesLabelFontFamily: daTheme2.themeElements.axesFontFamily(),
axesLabelSize: daTheme2.themeElements.axesFontSize(),
axesLabelColor: daTheme2.themeElements.axesFontColor(),
// Other configs
chartName: {
description: 'Name of chart for reporting',
type: 'string',
value: 'MultiLineChart'
},
xScaleType: {
description: 'Type of xScale',
value: 'string',
type: 'string'
},
tickFormat: {
description: 'Label format function for the tick labels',
type: 'function',
value: function (d) {
if (_Chart.c('xScaleType') === 'date') {
return moment(d).format('M/DD/YY');
}
return d;
}
},
};
this.mergeConfig(_Chart._newConfig);
//----------------------------------------------------------------------------------
// Data Definition:
//----------------------------------------------------------------------------------
// _Chart._newDataDefinition = {
// 'X Axis': {
// type: 'string',
// validate: function (d) {
// return this.accessor(d) !== undefined;
// },
// accessor: function (line) {
// return line[0] === undefined ? undefined : String(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 line[2] === undefined ? undefined : String(line[2]);
// }
// }
// };
// this.mergeDataDefinition(_Chart._newDataDefinition);
//----------------------------------------------------------------------------------
// Interface - chart's .on()' and document '.trigger()'
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
// Static - Anything that is defined here will never change
// If extending 'BaseWidget' : _Chart._layerGroup is the NEW BASE
//----------------------------------------------------------------------------------
_Chart._axis = _Chart._layerGroup.insert('g', '.linesLayer')
.attr('class', 'axis');
_Chart._xAxis = _Chart._axis.append('g')
.attr('class', 'xAxis')
.chart('Axis')
.c({
tickSpacing: 100,
});
_Chart._yAxis = _Chart._axis.append('g')
.attr('class', 'yAxis')
.chart('Axis')
.c({
tickSpacing: 100,
orient: 'left',
addGridlines: true
});
_Chart.attach('xAxis', _Chart._xAxis);
_Chart.attach('yAxis', _Chart._yAxis);
//**********************************************************************************
// d3.Chart Transform
//**********************************************************************************
var superTransform = _Chart.transform;
_Chart.transform = function (data) {
var validData = superTransform(data);
setupAxis();
setSingleColor();
return validData;
};
/*----------------------------------------------------------------------------------
// HELPER FUNCTIONS
----------------------------------------------------------------------------------*/
/**
* pass in theme element for axis
*/
function passThemeElement(name, val) {
_Chart._xAxis.c(name, val);
_Chart._yAxis.c(name, val);
}
function setupAxis() {
_Chart._xAxis.c({
tickFormat: _Chart.c('tickFormat')
});
_Chart._xAxis.c('width', _Chart.c('width'));
_Chart._xAxis.c('x', 0);
_Chart._yAxis.c('width', _Chart.c('width'));
_Chart._yAxis.c('x', 0);
_Chart._xAxis.c('height', _Chart.c('height'));
_Chart._xAxis.c('y', _Chart.c('height'));
_Chart._yAxis.c('height', _Chart.c('height'));
_Chart._yAxis.c('y', 0);
passThemeElement('axesLineColor', _Chart.c('axesLineColor'));
passThemeElement('axesLabelColor', _Chart.c('axesLabelColor'));
passThemeElement('axesLabelSize', _Chart.c('axesLabelSize'));
passThemeElement('axesLabelFontFamily', _Chart.c('axesLabelFontFamily'));
_Chart._xAxis.c('scale', _Chart.xScale());
_Chart._yAxis.c('addBaseline', _Chart.c('yAddBaseline').value);
_Chart._yAxis.c('addZeroline', _Chart.c('yAddZeroline').value);
_Chart._yAxis.c('addGridlines', _Chart.c('yAddGridlines').value);
_Chart._yAxis.c('addTicks', _Chart.c('yAddTicks').value);
_Chart._yAxis.c('addLabels', _Chart.c('yAddLabels').value);
_Chart._xAxis.c('addBaseline', _Chart.c('xAddBaseline').value);
_Chart._xAxis.c('addZeroline', false);
_Chart._xAxis.c('addGridlines', _Chart.c('xAddGridlines').value);
_Chart._xAxis.c('addTicks', _Chart.c('xAddTicks').value);
_Chart._xAxis.c('addLabels', _Chart.c('xAddLabels').value);
}
function setSingleColor() {
if (_Chart.c('singleColor') !== '') {
_Chart.colorScale(d3.scale.ordinal()
.domain([0, 1])
.range([_Chart.c('singleColor')])
);
}
}
var superSetupXScale = _Chart.setupXScale;
_Chart.setupXScale = function (data) {
var xValues;
var maxX;
superSetupXScale.call(_Chart, data);
xValues = data.map(this.a('X Axis'));
maxX = Math.max.apply(null, xValues);
if (Math.abs(maxX) === Infinity) {
maxX = 0;
}
this._xAxis.c('scale', _Chart.xScale());
if (maxX === 0) {
this._axis.style('opacity', 0);
}
else {
this._axis.style('opacity', 1);
}
return _Chart;
};
var superSetupYScale = _Chart.setupYScale;
_Chart.setupYScale = function (data) {
superSetupYScale.call(_Chart, data);
var tickSpacing = _Chart.c('tickSpacing');
if (tickSpacing < 20) {
var n = Math.ceil(_Chart.c('height') / 20);
tickSpacing = _Chart.c('height') / n;
}
this._yAxis.c('tickSpacing', tickSpacing);
this._yAxis.c('scale', _Chart.yScale());
return _Chart;
};
}
});