@domoinc/multiline-chart
Version:
MultiLineChart - Domo Widget
473 lines (406 loc) • 15.3 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("@domoinc/base-widget"), require("@domoinc/multiline"), require("@domoinc/axis"), require("@domoinc/da-theme2"), require("@domoinc/summary-number"));
else if(typeof define === 'function' && define.amd)
define(["d3", "d3.chart", "base-widget", "multiline", "axis", "da-theme2", "summary-number"], factory);
else if(typeof exports === 'object')
exports["MultiLineChart"] = factory(require("d3"), require("d3.chart"), require("@domoinc/base-widget"), require("@domoinc/multiline"), require("@domoinc/axis"), require("@domoinc/da-theme2"), require("@domoinc/summary-number"));
else
root["MultiLineChart"] = factory(root["d3"], root["d3.chart"], root["BaseWidget"], root["MultiLine"], root["Axis"], root["da"]["theme2"], root["SummaryNumber"]);
})(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__) {
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 BaseWidget = __webpack_require__(3);
var MultiLine = __webpack_require__(4);
var Axis = __webpack_require__(5);
var daTheme2 = __webpack_require__(6);
var SummaryNumber = __webpack_require__(7);
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
// 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;
};
}
});
/***/ },
/* 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__;
/***/ }
/******/ ])
});
;