diff --git a/dist/proteic.node.js b/dist/proteic.node.js
index 808984b..577d4ac 100644
--- a/dist/proteic.node.js
+++ b/dist/proteic.node.js
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
var d3$1 = require('d3');
-const paletteCategory1 = [
+var paletteCategory1 = [
'#e1c8df',
'#9ecd9d',
'#acd9d6',
@@ -16,7 +16,7 @@ const paletteCategory1 = [
'#acd9d6'
];
-const paletteCategory2 = [
+var paletteCategory2 = [
'#b6dde2',
'#6394af',
'#e4e9ab',
@@ -28,7 +28,7 @@ const paletteCategory2 = [
'#8d7e9e'
];
-const paletteCategory3 = [
+var paletteCategory3 = [
'#6b68a9',
'#8cc590',
'#b9487d',
@@ -40,7 +40,7 @@ const paletteCategory3 = [
'#d0553c'
];
-const paletteCategory4 = [
+var paletteCategory4 = [
'#f1a30d',
'#1d4763',
'#84c7bc',
@@ -52,7 +52,7 @@ const paletteCategory4 = [
'#87325d'
];
-const paletteCategory5 = [
+var paletteCategory5 = [
'#f1a30d',
'#0c3183',
'#acd9d6',
@@ -64,7 +64,7 @@ const paletteCategory5 = [
'#f09bbc'
];
-const paletteCategory6 = [
+var paletteCategory6 = [
'#71bbc3',
'#1d4763',
'#8fbe46',
@@ -76,7 +76,7 @@ const paletteCategory6 = [
'#634484'
];
-const paletteCategory7 = [
+var paletteCategory7 = [
'#ea671e',
'#684592',
'#84b92a',
@@ -88,7 +88,7 @@ const paletteCategory7 = [
'#775e47'
];
-const paletteCategory8 = [
+var paletteCategory8 = [
'#ebd646',
'#a50f38',
'#00a096',
@@ -100,7 +100,7 @@ const paletteCategory8 = [
'#7c4d25'
];
-const paletteSequentialYellow = [
+var paletteSequentialYellow = [
'#fff1c6',
'#fee5a7',
'#fcda87',
@@ -116,7 +116,7 @@ const paletteSequentialYellow = [
'#49230f'
];
-const paletteSequentialRedOrange = [
+var paletteSequentialRedOrange = [
'#ffecb8',
'#fbd68b',
'#f7bf5e',
@@ -132,7 +132,7 @@ const paletteSequentialRedOrange = [
'#470f0f'
];
-const paletteSequentialRed = [
+var paletteSequentialRed = [
'#fde4d4',
'#f1c4af',
'#f7bf5e',
@@ -148,7 +148,7 @@ const paletteSequentialRed = [
'#470f0f'
];
-const paletteSequentialPink = [
+var paletteSequentialPink = [
'#fbe3e3',
'#f9cfcc',
'#f0aaa9',
@@ -164,7 +164,7 @@ const paletteSequentialPink = [
'#420e30'
];
-const paletteSequentialPurplePink = [
+var paletteSequentialPurplePink = [
'#f9d8e6',
'#ebbed7',
'#dda4c7',
@@ -180,7 +180,7 @@ const paletteSequentialPurplePink = [
'#2d1c41'
];
-const paletteSequentialPurple = [
+var paletteSequentialPurple = [
'#f6e8f1',
'#dcc5de',
'#c2a3c9',
@@ -196,7 +196,7 @@ const paletteSequentialPurple = [
'#2c1c41'
];
-const paletteSequentialBlue = [
+var paletteSequentialBlue = [
'#e5f2f9',
'#d1e5f5',
'#afd3ed',
@@ -212,7 +212,7 @@ const paletteSequentialBlue = [
'#061020'
];
-const paletteSequentialLightBlue = [
+var paletteSequentialLightBlue = [
'#eff8fd',
'#d9eff6',
'#c2e5ef',
@@ -228,7 +228,7 @@ const paletteSequentialLightBlue = [
'#1e2354'
];
-const paletteSequentialBlueViolet = [
+var paletteSequentialBlueViolet = [
'#edf7e7',
'#c8e3d2',
'#91cdbf',
@@ -244,7 +244,7 @@ const paletteSequentialBlueViolet = [
'#0b1a3c'
];
-const paletteSequentialTurquoise = [
+var paletteSequentialTurquoise = [
'#e2ecf6',
'#cadfe6',
'#b1d3d6',
@@ -260,7 +260,7 @@ const paletteSequentialTurquoise = [
'#063b4c'
];
-const paletteSequentialLightGreen = [
+var paletteSequentialLightGreen = [
'#faf9de',
'#e9efc3',
'#d7e4a7',
@@ -276,7 +276,7 @@ const paletteSequentialLightGreen = [
'#074d21'
];
-const paletteSequentialDarkGreen = [
+var paletteSequentialDarkGreen = [
'#eaf3e5',
'#c7d5be',
'#a3ba9a',
@@ -292,7 +292,7 @@ const paletteSequentialDarkGreen = [
'#052613'
];
-const paletteSequentialGreenBrown = [
+var paletteSequentialGreenBrown = [
'#f7eccd',
'#d9cba6',
'#bcad82',
@@ -308,7 +308,7 @@ const paletteSequentialGreenBrown = [
'#231a0d'
];
-const paletteSequentialBrown = [
+var paletteSequentialBrown = [
'#f7eccd',
'#eed3ab',
'#e4bb89',
@@ -324,7 +324,7 @@ const paletteSequentialBrown = [
'#29130b'
];
-const paletteSequentialGrey = [
+var paletteSequentialGrey = [
'#e5e8ea',
'#bdbfc3',
'#999a9f',
@@ -340,7 +340,7 @@ const paletteSequentialGrey = [
'#000000'
];
-const paletteSequentialVioletCb = [
+var paletteSequentialVioletCb = [
'#f4f3f9',
'#e0dced',
'#cbc6e0',
@@ -356,7 +356,7 @@ const paletteSequentialVioletCb = [
'#2c2a44'
];
-const paletteSequentialPinkCb = [
+var paletteSequentialPinkCb = [
'#fbe5ee',
'#f8ccd5',
'#f4b2bc',
@@ -372,7 +372,7 @@ const paletteSequentialPinkCb = [
'#4a1c22'
];
-const paletteSequentialBlueCb = [
+var paletteSequentialBlueCb = [
'#eaf6fc',
'#cfe4f4',
'#cfe4f4',
@@ -388,7 +388,7 @@ const paletteSequentialBlueCb = [
'#192d35'
];
-const paletteSequentialGreenCb = [
+var paletteSequentialGreenCb = [
'#fff7d0',
'#e9e09b',
'#d1ca62',
@@ -404,7 +404,7 @@ const paletteSequentialGreenCb = [
'#333413'
];
-const paletteSequentialGreenBrownCb = [
+var paletteSequentialGreenBrownCb = [
'#f2edde',
'#d8d1c0',
'#bfb699',
@@ -420,7 +420,7 @@ const paletteSequentialGreenBrownCb = [
'#191a10'
];
-const paletteDivergingSpectral1 = [
+var paletteDivergingSpectral1 = [
'#98141f',
'#ab332c',
'#bf5040',
@@ -436,7 +436,7 @@ const paletteDivergingSpectral1 = [
'#06456c'
];
-const paletteDivergingSpectral2 = [
+var paletteDivergingSpectral2 = [
'#d43d4f',
'#df564b',
'#eb6d45',
@@ -452,7 +452,7 @@ const paletteDivergingSpectral2 = [
'#3489be'
];
-const paletteDivergingSpectral3 = [
+var paletteDivergingSpectral3 = [
'#651035',
'#ae1143',
'#c9314b',
@@ -468,7 +468,7 @@ const paletteDivergingSpectral3 = [
'#0c2c63'
];
-const paletteDivergingBrownTurquoise = [
+var paletteDivergingBrownTurquoise = [
'#3f3128',
'#683828',
'#933624',
@@ -484,7 +484,7 @@ const paletteDivergingBrownTurquoise = [
'#475b57'
];
-const paletteDivergingOrangePink = [
+var paletteDivergingOrangePink = [
'#e7511e',
'#eb6929',
'#ee7f37',
@@ -500,7 +500,7 @@ const paletteDivergingOrangePink = [
'#4b1c47'
];
-const paletteDivergingRedBlue = [
+var paletteDivergingRedBlue = [
'#b2172b',
'#c4443e',
'#d76a5a',
@@ -516,7 +516,7 @@ const paletteDivergingRedBlue = [
'#036896'
];
-const paletteDivergingRedGrey = [
+var paletteDivergingRedGrey = [
'#b2172b',
'#c54532',
'#da6c3b',
@@ -532,7 +532,7 @@ const paletteDivergingRedGrey = [
'#000000'
];
-const paletteDivergingOrangeViolet = [
+var paletteDivergingOrangeViolet = [
'#98141f',
'#ab332c',
'#f9bc47',
@@ -548,7 +548,7 @@ const paletteDivergingOrangeViolet = [
'#402357'
];
-const paletteDivergingPurpleGreen = [
+var paletteDivergingPurpleGreen = [
'#59194b',
'#85134b',
'#c71360',
@@ -564,7 +564,7 @@ const paletteDivergingPurpleGreen = [
'#39521f'
];
-const paletteDivergingVioletGreen = [
+var paletteDivergingVioletGreen = [
'#55296e',
'#75408e',
'#8a5fa0',
@@ -580,7 +580,7 @@ const paletteDivergingVioletGreen = [
'#084a22'
];
-const paletteDivergingRedGreen = [
+var paletteDivergingRedGreen = [
'#b2172b',
'#c5403c',
'#d96453',
@@ -596,7 +596,7 @@ const paletteDivergingRedGreen = [
'#39521f'
];
-const paletteDivergingBrownGreen = [
+var paletteDivergingBrownGreen = [
'#735146',
'#846454',
'#977a65',
@@ -612,7 +612,7 @@ const paletteDivergingBrownGreen = [
'#084a22'
];
-const paletteDivergingLightBrownTurquoise = [
+var paletteDivergingLightBrownTurquoise = [
'#8b5219',
'#a46821',
'#bf812c',
@@ -803,73 +803,66 @@ function diverging_lightBrown_turquoise() {
* @class Datasource The Datasource class
*
*/
-class Datasource {
- /**
- * Creates an instance of Datasource.
- *
- *
- * @memberOf Datasource
-
- */
- constructor() {
- this.filters = [];
- this.properties = [];
- }
+var Datasource = function Datasource() {
+ this.filters = [];
+ this.properties = [];
+};
- /**
- * Starts the stream of data
- *
- *
- * @memberOf Datasource
- */
- start() {
- window.console.log('Starting datasource');
- }
+/**
+ * Starts the stream of data
+ *
+ *
+ * @memberOf Datasource
+ */
+Datasource.prototype.start = function start () {
+ window.console.log('Starting datasource');
+};
- /**
- *
- * If started, this method stops the stream of data
- *
- * @memberOf Datasource
+/**
+ *
+ * If started, this method stops the stream of data
+ *
+ * @memberOf Datasource
- */
- stop() {
- window.console.log('Stopping datasource');
- }
+ */
+Datasource.prototype.stop = function stop () {
+ window.console.log('Stopping datasource');
+};
- property(prop, newProp, cast) {
- this.properties.push({ 'p': prop, 'newP': newProp, cast: cast });
- return this;
- }
+Datasource.prototype.property = function property (prop, newProp, cast) {
+ this.properties.push({ 'p': prop, 'newP': newProp, cast: cast });
+ return this;
+};
- convert(data) {
- let result = {};
- for (let i in this.properties) {
- let p = this.properties[i].p;
- let value = eval('data.' + this.properties[i].newP);
- // if(this.properties[i].cast){
- // value = new this.properties[i].cast(value);
- // }
+Datasource.prototype.convert = function convert (data) {
+ var this$1 = this;
- result[p] = value;
- }
- return result;
- }
+ var result = {};
+ for (var i in this.properties) {
+ var p = this$1.properties[i].p;
+ var value = eval('data.' + this$1.properties[i].newP);
+ // if(this.properties[i].cast){
+ //value = new this.properties[i].cast(value);
+ // }
- /**
- * Filters the incoming messages. Each data record that do not comply the filter condition will be discarded
- *
- * @param {any} filter A filter condition
- * @returns this Datasource instance
- *
- * @memberOf Datasource
- */
- filter(filter) {
- return this;
+ result[p] = value;
}
-}
+ return result;
+};
+
+/**
+ * Filters the incoming messages. Each data record that do not comply the filter condition will be discarded
+ *
+ * @param {any} filter A filter condition
+ * @returns this Datasource instance
+ *
+ * @memberOf Datasource
+ */
+Datasource.prototype.filter = function filter (filter) {
+ return this;
+};
/**
*
@@ -879,31 +872,18 @@ class Datasource {
* @extends {Datasource}
*/
-class HTTPDatasource extends Datasource {
-
- /**
- * Creates an instance of HTTPDatasource. This datasource will try to connect to the speficied HTTP endpoint.
- *
- * var source = {
- * endpoint: 'https://randomuser.me/api';
- * };
- *
- * linechart = new proteic.Linechart(new proteic.HTTPwDatasource(source));
- *
- *
- * If new data is available, this datasource will forward the data records to the chart, which automatically repaint the chart with these new records.
- * @param {any} source An http endpoint. If invalid, this class will throw an Error.
- *
- * @memberOf HTTPDatasource
-
- */
- constructor(source) {
- super();
+var HTTPDatasource = (function (Datasource$$1) {
+ function HTTPDatasource(source) {
+ Datasource$$1.call(this);
this.source = source;
this.intervalId = -1;
this.started = false;
}
+ if ( Datasource$$1 ) HTTPDatasource.__proto__ = Datasource$$1;
+ HTTPDatasource.prototype = Object.create( Datasource$$1 && Datasource$$1.prototype );
+ HTTPDatasource.prototype.constructor = HTTPDatasource;
+
/**
* Configure a dispatcher for this datasource.
*
@@ -911,9 +891,9 @@ class HTTPDatasource extends Datasource {
*
* @memberOf HTTPDatasource
*/
- configure(dispatcher) {
+ HTTPDatasource.prototype.configure = function configure (dispatcher) {
this.dispatcher = dispatcher;
- }
+ };
/**
*
@@ -922,67 +902,74 @@ class HTTPDatasource extends Datasource {
* @memberOf HTTPDatasource
*/
- start() {
+ HTTPDatasource.prototype.start = function start () {
if (!this.started) {
- super.start();
- let pollingTime = this.source.pollingTime;
- let url = this.source.url;
+ Datasource$$1.prototype.start.call(this);
+ var pollingTime = this.source.pollingTime;
+ var url = this.source.url;
this._startPolling(url, pollingTime);
this.started = true;
}
- }
+ };
- _startPolling(url, time = 1000) {
- let interval = window.setInterval;
- this.intervalId = interval(() => this._startRequest(url), time);
- }
+ HTTPDatasource.prototype._startPolling = function _startPolling (url, time) {
+ var this$1 = this;
+ if ( time === void 0 ) time = 1000;
+
+ var interval = window.setInterval;
+ this.intervalId = interval(function () { return this$1._startRequest(url); }, time);
+ };
+
+ HTTPDatasource.prototype._startRequest = function _startRequest (url) {
+ var this$1 = this;
- _startRequest(url) {
window.console.log('url', url);
- d3$1.request(url).get((e, response) => this._handleResponse(response));
- }
+ d3$1.request(url).get(function (e, response) { return this$1._handleResponse(response); });
+ };
- _stopPolling() {
- let clearInterval = window.clearInterval;
+ HTTPDatasource.prototype._stopPolling = function _stopPolling () {
+ var clearInterval = window.clearInterval;
clearInterval(this.intervalId);
- }
+ };
- _handleResponse(xmlHttpRequest) {
- let parseJson = window.JSON.parse;
+ HTTPDatasource.prototype._handleResponse = function _handleResponse (xmlHttpRequest) {
+ var parseJson = window.JSON.parse;
if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 200) {
- let response = parseJson(xmlHttpRequest.response);
+ var response = parseJson(xmlHttpRequest.response);
this._handleOK(response);
}
else {
this._handleError(xmlHttpRequest);
}
- }
+ };
- _handleOK(data) {
+ HTTPDatasource.prototype._handleOK = function _handleOK (data) {
if(this.properties.length > 0 ) {
data = this.convert(data);
}
this.dispatcher.call('onmessage', this, data);
- }
+ };
- _handleError(data) {
+ HTTPDatasource.prototype._handleError = function _handleError (data) {
this.dispatcher.call('onerror', this, data);
- }
+ };
/**
* If started, this method close the HTTP connection.
*
* @memberOf HTTPDatasource
* */
- stop() {
+ HTTPDatasource.prototype.stop = function stop () {
if (this.started) {
this._stopPolling();
this.started = false;
}
- }
-}
+ };
+
+ return HTTPDatasource;
+}(Datasource));
/**
*
@@ -992,28 +979,15 @@ class HTTPDatasource extends Datasource {
* @extends {Datasource}
*/
-class WebsocketDatasource extends Datasource {
-
- /**
- * Creates an instance of WebsocketDatasource. This datasource will try to connect to the speficied websocket endpoint.
- *
- * var source = {
- * endpoint: 'ws://192.168.3.32:3000/pathToWebsocketEndpoint';
- * };
- *
- * linechart = new proteic.Linechart(new proteic.WebsocketDatasource(source));
- *
- *
- * If new data is available, this datasource will forward the data records to the chart, which automatically repaint the chart with these new records.
- * @param {any} source A websocket endpoint. If invalid, this class will throw an Error.
- *
- * @memberOf WebsocketDatasource
-
- */
- constructor(source) {
- super();
+var WebsocketDatasource = (function (Datasource$$1) {
+ function WebsocketDatasource(source) {
+ Datasource$$1.call(this);
this.source = source;
}
+
+ if ( Datasource$$1 ) WebsocketDatasource.__proto__ = Datasource$$1;
+ WebsocketDatasource.prototype = Object.create( Datasource$$1 && Datasource$$1.prototype );
+ WebsocketDatasource.prototype.constructor = WebsocketDatasource;
/**
* Configure a dispatcher for this datasource.
@@ -1022,9 +996,9 @@ class WebsocketDatasource extends Datasource {
*
* @memberOf WebsocketDatasource
*/
- configure(dispatcher) {
+ WebsocketDatasource.prototype.configure = function configure (dispatcher) {
this.dispatcher = dispatcher;
- }
+ };
/**
*
@@ -1033,36 +1007,40 @@ class WebsocketDatasource extends Datasource {
* @memberOf WebsocketDatasource
*/
- start() {
- super.start();
+ WebsocketDatasource.prototype.start = function start () {
+ var this$1 = this;
+
+ Datasource$$1.prototype.start.call(this);
this.ws = new window.WebSocket(this.source.endpoint);
- this.ws.onopen = (e) => {
- this.dispatcher.call('onopen', this, e);
+ this.ws.onopen = function (e) {
+ this$1.dispatcher.call('onopen', this$1, e);
};
- this.ws.onerror = (e) => {
+ this.ws.onerror = function (e) {
throw new Error('An error occurred trying to reach the websocket server' + e);
//this.dispatcher.call('onerror', this, e);
};
- this.ws.onmessage = (e) => {
+ this.ws.onmessage = function (e) {
var data = JSON.parse(e.data);
- this.dispatcher.call('onmessage', this, data);
+ this$1.dispatcher.call('onmessage', this$1, data);
};
- }
+ };
/**
* If started, this method close the websocket connection.
*
* @memberOf WebsocketDatasource
* */
- stop() {
- super.stop();
+ WebsocketDatasource.prototype.stop = function stop () {
+ Datasource$$1.prototype.stop.call(this);
if (this.ws) {
this.ws.close();
}
- }
-}
+ };
+
+ return WebsocketDatasource;
+}(Datasource));
-const defaults = {
+var defaults = {
selector: '#chart',
colorScale: category7(),
//Area
@@ -1088,58 +1066,57 @@ const defaults = {
width: '100%', // %, auto, or numeric
height: 250,
//Events
- onDown(d) {
+ onDown: function onDown(d) {
},
- onHover(d) {
+ onHover: function onHover(d) {
},
- onLeave(d) {
+ onLeave: function onLeave(d) {
},
- onClick(d) {
+ onClick: function onClick(d) {
},
maxNumberOfElements: 100, // used by keepDrawing method to reduce the number of elements in the current chart
};
-class SvgContainer {
-
- constructor(config) {
- this._config = config;
- this.svg = this._initializeSvgContainer(config);
- this.components = Array();
- }
-
- _initializeSvgContainer(config) {
- let selector = config.selector,
- width = config.width + config.marginLeft + config.marginRight,
- height = config.height + config.marginTop + config.marginBottom,
- svg = null;
+var SvgContainer = function SvgContainer(config) {
+ this._config = config;
+ this.svg = this._initializeSvgContainer(config);
+ this.components = Array();
+};
- svg = d3$1.select(selector)
- .append('svg:svg')
- .attr('width', width)
- .attr('height', height)
- .append('g')
- .attr('class', 'chartContainer')
- .attr('transform', 'translate(' + config.marginLeft + ',' + config.marginTop + ')');
+SvgContainer.prototype._initializeSvgContainer = function _initializeSvgContainer (config) {
+ var selector = config.selector,
+ width = config.width + config.marginLeft + config.marginRight,
+ height = config.height + config.marginTop + config.marginBottom,
+ svg = null;
+
+ svg = d3$1.select(selector)
+ .append('svg:svg')
+ .attr('width', width)
+ .attr('height', height)
+ .append('g')
+ .attr('class', 'chartContainer')
+ .attr('transform', 'translate(' + config.marginLeft + ',' + config.marginTop + ')');
+
+ return svg;
+};
- return svg;
- }
+SvgContainer.prototype.add = function add (component, render) {
+ if ( render === void 0 ) render = true;
- add(component, render = true) {
- this.components.push(component);
+ this.components.push(component);
- if (render) {
- component.render(this.svg, this._config);
- }
- return this;
+ if (render) {
+ component.render(this.svg, this._config);
}
+ return this;
+};
- transform(translation) {
- this.svg.attr('transform', translation);
+SvgContainer.prototype.transform = function transform (translation) {
+ this.svg.attr('transform', translation);
- }
-}
+};
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
@@ -1150,8 +1127,8 @@ function isEven(n) {
}
function isPercentage(n) {
- let split = null;
- let number = null;
+ var split = null;
+ var number = null;
if (!n || typeof n !== 'string') {
return false;
}
@@ -1184,7 +1161,7 @@ function calculateWidth(widthConfig, selector) {
return widthConfig;
}
else if (isPercentage(widthConfig)) {
- let containerWidth, percentage;
+ var containerWidth, percentage;
containerWidth = d3$1.select(selector)
.node()
.getBoundingClientRect()
@@ -1196,599 +1173,595 @@ function calculateWidth(widthConfig, selector) {
}
}
-class SvgAxis {
- /**
- * Creates an instance of SvgAxis.
- *
- * @param {any} context Chart context. It contains data, configuration and chart type
- *
- * @memberOf SvgAxis
-
- */
- constructor(context) {
- this._loadConfig(context.config);
- this.svgContainer = new SvgContainer(this.config);
- }
-
- changeConfigProperty(p, v) {
- this.config[p] = v;
- if (p === 'width' || p === 'height') {
- this.config.needRescaling = true;
- }
- }
+var SvgAxis = function SvgAxis(context) {
+ this._loadConfig(context.config);
+ this.svgContainer = new SvgContainer(this.config);
+};
- rescale(width = this.config.width, height = this.config.height) {
- this.axes.rescale(width, height);
- this.config.needRescaling = false;
+SvgAxis.prototype.changeConfigProperty = function changeConfigProperty (p, v) {
+ this.config[p] = v;
+ if (p === 'width' || p === 'height') {
+ this.config.needRescaling = true;
}
+};
- /**
- *
- * Load the configuration context. It creates a configuration global from the parameters specified by users.
- * If any parameter is empty, this will be replaced by its default option
- *
- * @param {any} config User configuration
- * @param {any} defaults Defaults values for this chart
- *
- * @memberOf SvgAxis
-
- */
- _loadConfig(config, defaults) {
- this.config = {};
- //Selector
- this.config.selector = config.selector || defaults.selector;
- //Margins
- this.config.marginTop = config.marginTop || defaults.marginTop;
- this.config.marginLeft = config.marginLeft || defaults.marginLeft;
- this.config.marginRight = config.marginRight || defaults.marginRight;
- this.config.marginBottom = config.marginBottom || defaults.marginBottom;
- //Width & height
- this.config.width = config.width
- ? calculateWidth(config.width, this.config.selector) - this.config.marginLeft - this.config.marginRight
- : calculateWidth(defaults.width, this.config.selector) - this.config.marginLeft - this.config.marginRight;
- this.config.height = config.height || defaults.height;
- //Axis
- this.config.xAxisType = config.xAxisType || defaults.xAxisType;
- this.config.xAxisFormat = config.xAxisFormat || defaults.xAxisFormat;
- this.config.xAxisLabel = config.xAxisLabel || defaults.xAxisLabel;
- this.config.yAxisType = config.yAxisType || defaults.yAxisType;
- this.config.yAxisFormat = config.yAxisFormat || defaults.yAxisFormat;
- this.config.yAxisLabel = config.yAxisLabel || defaults.yAxisLabel;
- //Color
- this.config.colorScale = config.colorScale || defaults.colorScale;
- //Events
- this.config.onDown = config.onDown || defaults.onDown;
- this.config.onUp = config.onUp || defaults.onUp;
- this.config.onHover = config.onHover || defaults.onHover;
- this.config.onClick = config.onClick || defaults.onClick;
- this.config.onLeave = config.onLeave || defaults.onLeave;
- }
+SvgAxis.prototype.rescale = function rescale (width, height) {
+ if ( width === void 0 ) width = this.config.width;
+ if ( height === void 0 ) height = this.config.height;
-}
+ this.axes.rescale(width, height);
+ this.config.needRescaling = false;
+};
-class XAxis {
- constructor(xAxisType, config) {
- if (config === null) {
- throw new Error('No chart context specified for XAxis');
- }
+/**
+ *
+ * Load the configuration context. It creates a configuration global from the parameters specified by users.
+ * If any parameter is empty, this will be replaced by its default option
+ *
+ * @param {any} config User configuration
+ * @param {any} defaults Defaults values for this chart
+ *
+ * @memberOf SvgAxis
+
+ */
+SvgAxis.prototype._loadConfig = function _loadConfig (config, defaults) {
+ this.config = {};
+ //Selector
+ this.config.selector = config.selector || defaults.selector;
+ //Margins
+ this.config.marginTop = config.marginTop || defaults.marginTop;
+ this.config.marginLeft = config.marginLeft || defaults.marginLeft;
+ this.config.marginRight = config.marginRight || defaults.marginRight;
+ this.config.marginBottom = config.marginBottom || defaults.marginBottom;
+ //Width & height
+ this.config.width = config.width
+ ? calculateWidth(config.width, this.config.selector) - this.config.marginLeft - this.config.marginRight
+ : calculateWidth(defaults.width, this.config.selector) - this.config.marginLeft - this.config.marginRight;
+ this.config.height = config.height || defaults.height;
+ //Axis
+ this.config.xAxisType = config.xAxisType || defaults.xAxisType;
+ this.config.xAxisFormat = config.xAxisFormat || defaults.xAxisFormat;
+ this.config.xAxisLabel = config.xAxisLabel || defaults.xAxisLabel;
+ this.config.yAxisType = config.yAxisType || defaults.yAxisType;
+ this.config.yAxisFormat = config.yAxisFormat || defaults.yAxisFormat;
+ this.config.yAxisLabel = config.yAxisLabel || defaults.yAxisLabel;
+ //Color
+ this.config.colorScale = config.colorScale || defaults.colorScale;
+ //Events
+ this.config.onDown = config.onDown || defaults.onDown;
+ this.config.onUp = config.onUp || defaults.onUp;
+ this.config.onHover = config.onHover || defaults.onHover;
+ this.config.onClick = config.onClick || defaults.onClick;
+ this.config.onLeave = config.onLeave || defaults.onLeave;
+};
- this.xAxis = this._initializeXAxis(xAxisType, config);
+var XAxis = function XAxis(xAxisType, config) {
+ if (config === null) {
+ throw new Error('No chart context specified for XAxis');
}
+ this.xAxis = this._initializeXAxis(xAxisType, config);
+};
- rescale(width, height) {
- this.xAxis.scale().range([0, width]);
- }
- _initializeXAxis(xAxisType = 'linear', config) {
- let x = null,
- axis = null;
-
- // switch (xAxisType) {
- // case 'time':
- // x = scaleTime().range([0, config.width]);
- // break;
- // case 'linear':
- // x = scaleLinear().range([0, config.width]);
- // break;
- // case 'categorical':
- // x = scaleBand().rangeRound([0, config.width])
- // .padding(0.1)
- // .align(0.5);
- // break;
- // default:
- // throw new Error('Not allowed type for XAxis. Only allowed "time", "linear" or "categorical". Got: ' + xAxisType);
- // }
-
- switch (xAxisType) {
- case 'time':
- x = d3$1.scaleTime().range([0, config.width]);
- axis = d3$1.axisBottom(x);
- break;
- case 'linear':
- x = d3$1.scaleLinear().range([0, config.width]);
- axis = d3$1.axisBottom(x).tickFormat(d3$1.format(config.xAxisFormat));
- break;
- case 'categorical':
- x = d3$1.scaleBand().rangeRound([0, config.width])
- .padding(0.1)
- .align(0.5);
- axis = d3$1.axisBottom(x);
- break;
- default:
- throw new Error('Not allowed type for XAxis. Only allowed "time", "linear" or "categorical". Got: ' + xAxisType);
- }
+XAxis.prototype.rescale = function rescale (width, height) {
+ this.xAxis.scale().range([0, width]);
+};
- return d3$1.axisBottom(x);
- }
+XAxis.prototype._initializeXAxis = function _initializeXAxis (xAxisType, config) {
+ if ( xAxisType === void 0 ) xAxisType = 'linear';
+
+ var x = null,
+ axis = null;
+
+ // switch (xAxisType) {
+ // case 'time':
+ // x = scaleTime().range([0, config.width]);
+ // break;
+ // case 'linear':
+ // x = scaleLinear().range([0, config.width]);
+ // break;
+ // case 'categorical':
+ // x = scaleBand().rangeRound([0, config.width])
+ // .padding(0.1)
+ // .align(0.5);
+ // break;
+ // default:
+ // throw new Error('Not allowed type for XAxis. Only allowed "time","linear" or "categorical". Got: ' + xAxisType);
+ // }
- transition(svg, time = 200) {
- svg.selectAll('.x.axis').transition().duration(time).call(this.xAxis).on('end', this.xStyle);
- }
+ switch (xAxisType) {
+ case 'time':
+ x = d3$1.scaleTime().range([0, config.width]);
+ axis = d3$1.axisBottom(x);
+ break;
+ case 'linear':
+ x = d3$1.scaleLinear().range([0, config.width]);
+ axis = d3$1.axisBottom(x).tickFormat(d3$1.format(config.xAxisFormat));
+ break;
+ case 'categorical':
+ x = d3$1.scaleBand().rangeRound([0, config.width])
+ .padding(0.1)
+ .align(0.5);
+ axis = d3$1.axisBottom(x);
+ break;
+ default:
+ throw new Error('Not allowed type for XAxis. Only allowed "time","linear" or "categorical". Got: ' + xAxisType);
+ }
+
+ return d3$1.axisBottom(x);
+};
- xStyle() {
- d3$1.select(this).selectAll('g.tick text')
- .style('font', '1.4em Montserrat, sans-serif')
- .style('fill', (d, i) => !isEven(i) || i === 0 ? '#5e6b70' : '#1a2127')
- .style('fill', (d) => '#1a2127');
+XAxis.prototype.transition = function transition (svg, time) {
+ if ( time === void 0 ) time = 200;
+ svg.selectAll('.x.axis').transition().duration(time).call(this.xAxis).on('end', this.xStyle);
+};
- d3$1.select(this).selectAll(['path', 'line'])
- .attr('stroke', 'gray')
- .attr('stroke-width', .3);
+XAxis.prototype.xStyle = function xStyle () {
+ d3$1.select(this).selectAll('g.tick text')
+ .style('font', '1.4em Montserrat, sans-serif')
+ .style('fill', function (d, i) { return !isEven(i) || i === 0 ? '#5e6b70' : '#1a2127'; })
+ .style('fill', function (d) { return '#1a2127'; });
- }
- /**
- * This function is used when both x and y dial update their domains by x and y max/min values, respectively.
- */
- updateDomainByBBox(b) {
- let x = this.xAxis.scale();
- x.domain([b[0], b[1]]);
- }
+ d3$1.select(this).selectAll(['path', 'line'])
+ .attr('stroke', 'gray')
+ .attr('stroke-width', .3);
- /**
- * Used when x domain is caterogial (a set of keys) and y domain is linear.
- */
- updateDomainByKeys(keys$$1, yBbox) {
- let x = this.xAxis.scale();
- x.domain(keys$$1);
- }
+};
- render(svg, config) {
- let xAxis = this.xAxis,
- width = config.width,
- height = config.height;
- svg
- .append('g')
- .attr('class', 'x axis')
- .attr('transform', 'translate(0,' + config.height + ')')
- .call(xAxis);
-
- svg
- .append('text')
- .attr('class', 'xaxis-title')
- .attr("text-anchor", "middle")
- .attr('x', width / 2)
- .attr('y', height + 40)
- .text(config.xAxisLabel)
- .style('font', '0.8em Montserrat, sans-serif');
-
- this.svg = svg;
- }
-}
+/**
+ * This function is used when both x and y dial update their domains by x and y max/min values, respectively.
+ */
+XAxis.prototype.updateDomainByBBox = function updateDomainByBBox (b) {
+ var x = this.xAxis.scale();
+ x.domain([b[0], b[1]]);
+};
-class YAxis {
- constructor(yAxisType, config) {
- if (config === null) {
- throw new Error('No chart context specified for XAxis');
- }
+/**
+ * Used when x domain is caterogial (a set of keys) and y domain is linear.
+ */
+XAxis.prototype.updateDomainByKeys = function updateDomainByKeys (keys$$1, yBbox) {
+ var x = this.xAxis.scale();
+ x.domain(keys$$1);
+};
- this.yAxis = this._initializeYAxis(yAxisType, config);
- }
+XAxis.prototype.render = function render (svg, config) {
+ var xAxis = this.xAxis,
+ width = config.width,
+ height = config.height;
+ svg
+ .append('g')
+ .attr('class', 'x axis')
+ .attr('transform', 'translate(0,' + config.height + ')')
+ .call(xAxis);
+
+ svg
+ .append('text')
+ .attr('class', 'xaxis-title')
+ .attr("text-anchor", "middle")
+ .attr('x', width / 2)
+ .attr('y', height + 40)
+ .text(config.xAxisLabel)
+ .style('font', '0.8em Montserrat, sans-serif');
+
+ this.svg = svg;
+};
- rescale(width, height) {
- this.yAxis.tickSizeInner(-width);
+var YAxis = function YAxis(yAxisType, config) {
+ if (config === null) {
+ throw new Error('No chart context specified for XAxis');
}
- _initializeYAxis(yAxisType = 'linear', config) {
- let y = null,
- axis = null;
- switch (yAxisType) {
- case 'linear':
- y = d3$1.scaleLinear().range([config.height, 0]);
- axis = d3$1.axisLeft(y).tickFormat(d3$1.format(config.yAxisFormat));
- break;
- case 'categorical':
- y = d3$1.scaleBand().rangeRound([config.height, 0])
- .padding(0.1)
- .align(0.5);
- axis = d3$1.axisLeft(y);
- break;
- default:
- throw new Error('Not allowed type for YAxis. Only allowed "time", "linear" or "categorical". Got: ' + yAxisType);
- }
+ this.yAxis = this._initializeYAxis(yAxisType, config);
+};
- return axis.tickSizeInner(-config.width)
- .tickSizeOuter(0)
- .tickPadding(20);
- }
+YAxis.prototype.rescale = function rescale (width, height) {
+ this.yAxis.tickSizeInner(-width);
+};
- // _initializeYAxis(yAxisType = 'linear', config) {
- // let y = null,
- // yAxis = null;
- //
- // switch (yAxisType) {
- // case 'linear':
- // y = scaleLinear().range([config.height, 0]);
- // break;
- // case 'categorical':
- // y = scaleBand().rangeRound([config.height, 0])
- // .padding(0.1)
- // .align(0.5);
- // break;
- // default:
- // throw new Error('Not allowed type for YAxis. Only allowed "time", "linear" or "categorical". Got: ' + yAxisType);
- // }
- // return axisLeft(y)
- // .tickSizeInner(-config.width)
- // .tickSizeOuter(0)
- // .tickPadding(20)
- // .tickFormat((d) => d)
- // .ticks(config.yticks, config.tickLabel);
- // }
+YAxis.prototype._initializeYAxis = function _initializeYAxis (yAxisType, config) {
+ if ( yAxisType === void 0 ) yAxisType = 'linear';
+
+ var y = null,
+ axis = null;
+ switch (yAxisType) {
+ case 'linear':
+ y = d3$1.scaleLinear().range([config.height, 0]);
+ axis = d3$1.axisLeft(y).tickFormat(d3$1.format(config.yAxisFormat));
+ break;
+ case 'categorical':
+ y = d3$1.scaleBand().rangeRound([config.height, 0])
+ .padding(0.1)
+ .align(0.5);
+ axis = d3$1.axisLeft(y);
+ break;
+ default:
+ throw new Error('Not allowed type for YAxis. Only allowed "time","linear" or "categorical". Got: ' + yAxisType);
+ }
+
+ return axis.tickSizeInner(-config.width)
+ .tickSizeOuter(0)
+ .tickPadding(20);
+};
- transition(svg, time = 200) {
- svg.selectAll('.y.axis').transition().duration(time).call(this.yAxis).on('end', this.yStyle);
- }
+// _initializeYAxis(yAxisType = 'linear', config) {
+// let y = null,
+// yAxis = null;
+//
+// switch (yAxisType) {
+// case 'linear':
+// y = scaleLinear().range([config.height, 0]);
+// break;
+// case 'categorical':
+// y = scaleBand().rangeRound([config.height, 0])
+// .padding(0.1)
+// .align(0.5);
+// break;
+// default:
+// throw new Error('Not allowed type for YAxis. Only allowed "time","linear" or "categorical". Got: ' + yAxisType);
+// }
+// return axisLeft(y)
+// .tickSizeInner(-config.width)
+// .tickSizeOuter(0)
+// .tickPadding(20)
+// .tickFormat((d) => d)
+// .ticks(config.yticks, config.tickLabel);
+// }
+
+YAxis.prototype.transition = function transition (svg, time) {
+ if ( time === void 0 ) time = 200;
+
+ svg.selectAll('.y.axis').transition().duration(time).call(this.yAxis).on('end', this.yStyle);
+};
- yStyle() {
- d3$1.select(this).selectAll('g.tick text')
- .style('font', '1.4em Montserrat, sans-serif')
- .style('fill', (d, i) => !isEven(i) || i === 0 ? '#5e6b70' : '#1a2127');
- d3$1.select(this).selectAll('g.tick line')
- .style('stroke', (d, i) => isEven(i) && i !== 0 ? '#5e6b70' : '#dbdad8');
- }
+YAxis.prototype.yStyle = function yStyle () {
+ d3$1.select(this).selectAll('g.tick text')
+ .style('font', '1.4em Montserrat, sans-serif')
+ .style('fill', function (d, i) { return !isEven(i) || i === 0 ? '#5e6b70' : '#1a2127'; });
+ d3$1.select(this).selectAll('g.tick line')
+ .style('stroke', function (d, i) { return isEven(i) && i !== 0 ? '#5e6b70' : '#dbdad8'; });
+};
- updateDomainByBBox(b) {
- let y = this.yAxis.scale();
- y.domain(b);
- }
+YAxis.prototype.updateDomainByBBox = function updateDomainByBBox (b) {
+ var y = this.yAxis.scale();
+ y.domain(b);
+};
- updateDomainByKeys(keys$$1) {
- let y = this.yAxis.scale();
- y.domain(keys$$1);
- }
+YAxis.prototype.updateDomainByKeys = function updateDomainByKeys (keys$$1) {
+ var y = this.yAxis.scale();
+ y.domain(keys$$1);
+};
- render(svg, config) {
- let yAxis = this.yAxis,
- width = config.width,
- height = config.height;
- svg
- .append('g')
- .attr('class', 'y axis')
- .attr('stroke-dasharray', '1, 5')
- .call(yAxis);
-
- svg
- .append('text')
- .attr('class', 'yaxis-title')
- .attr("transform", "rotate(-90)")
- .attr("text-anchor", "middle")
- .attr('x', 0 - height / 2)
- .attr('y', 0 - 55)
- .text(config.yAxisLabel)
- .style('font', '0.8em Montserrat, sans-serif');
+YAxis.prototype.render = function render (svg, config) {
+ var yAxis = this.yAxis,
+ width = config.width,
+ height = config.height;
+ svg
+ .append('g')
+ .attr('class', 'y axis')
+ .attr('stroke-dasharray', '1, 5')
+ .call(yAxis);
+
+ svg
+ .append('text')
+ .attr('class', 'yaxis-title')
+ .attr("transform", "rotate(-90)")
+ .attr("text-anchor", "middle")
+ .attr('x', 0 - height / 2)
+ .attr('y', 0 - 55)
+ .text(config.yAxisLabel)
+ .style('font', '0.8em Montserrat, sans-serif');
+
+};
+var XYAxes = function XYAxes(xAxisType, yAxisType, config) {
+ if (config === null) {
+ throw new Error('No chart context specified for XAxis');
}
-}
-class XYAxes {
- constructor(xAxisType, yAxisType, config) {
- if (config === null) {
- throw new Error('No chart context specified for XAxis');
- }
+ this.x = new XAxis(xAxisType, config);
+ this.y = new YAxis(yAxisType, config);
+};
- this.x = new XAxis(xAxisType, config);
- this.y = new YAxis(yAxisType, config);
- }
+XYAxes.prototype.transition = function transition (svg, time) {
+ if ( time === void 0 ) time = 200;
- transition(svg, time = 200) {
- this.x.transition(svg, time);
- this.y.transition(svg, time);
- }
+ this.x.transition(svg, time);
+ this.y.transition(svg, time);
+};
- /**
- * This function is used when both x and y dial update their domains by x and y max/min values, respectively.
- */
- updateDomainByBBox(b) {
- this.x.updateDomainByBBox([b[0], b[1]]);
- this.y.updateDomainByBBox([b[2], b[3]]);
- }
+/**
+ * This function is used when both x and y dial update their domains by x and y max/min values, respectively.
+ */
+XYAxes.prototype.updateDomainByBBox = function updateDomainByBBox (b) {
+ this.x.updateDomainByBBox([b[0], b[1]]);
+ this.y.updateDomainByBBox([b[2], b[3]]);
+};
- /**
- * Used when x domain is caterogial (a set of keys) and y domain is linear.
- */
- updateDomainByKeysAndBBox(keys, bbox) {
- this.x.updateDomainByKeys(keys);
- this.y.updateDomainByBBox(bbox);
- }
+/**
+ * Used when x domain is caterogial (a set of keys) and y domain is linear.
+ */
+XYAxes.prototype.updateDomainByKeysAndBBox = function updateDomainByKeysAndBBox (keys, bbox) {
+ this.x.updateDomainByKeys(keys);
+ this.y.updateDomainByBBox(bbox);
+};
- updateDomainByBBoxAndKeys(bbox, keys){
- this.x.updateDomainByBBox(bbox);
- this.y.updateDomainByKeys(keys);
- }
+XYAxes.prototype.updateDomainByBBoxAndKeys = function updateDomainByBBoxAndKeys (bbox, keys){
+ this.x.updateDomainByBBox(bbox);
+ this.y.updateDomainByKeys(keys);
+};
- render(svg, config) {
- this.x.render(svg, config);
- this.y.render(svg, config);
- }
+XYAxes.prototype.render = function render (svg, config) {
+ this.x.render(svg, config);
+ this.y.render(svg, config);
+};
- rescale(width, height){
- this.x.rescale(width, height);
- this.y.rescale(width, height);
- }
-}
+XYAxes.prototype.rescale = function rescale (width, height){
+ this.x.rescale(width, height);
+ this.y.rescale(width, height);
+};
-class Lineset {
- constructor(x, y) {
- this.xAxis = x.xAxis;
- this.yAxis = y.yAxis;
- this.lineGenerator = d3$1.line()
- .x((d) => this.xAxis.scale()(d.x))
- .y((d) => this.yAxis.scale()(d.y));
- }
+var Lineset = function Lineset(x, y) {
+ var this$1 = this;
- update(svg, config, data) {
- let dataSeries = d3$1.nest().key((d) => d.key).entries(data),
- series = null,
- lines = null,
- colorScale = config.colorScale;
+ this.xAxis = x.xAxis;
+ this.yAxis = y.yAxis;
+ this.lineGenerator = d3$1.line()
+ .x(function (d) { return this$1.xAxis.scale()(d.x); })
+ .y(function (d) { return this$1.yAxis.scale()(d.y); });
+};
- svg.selectAll('g.serie').remove();
+Lineset.prototype.update = function update (svg, config, data) {
+ var this$1 = this;
+
+ var dataSeries = d3$1.nest().key(function (d) { return d.key; }).entries(data),
+ series = null,
+ lines = null,
+ colorScale = config.colorScale;
+
+ svg.selectAll('g.serie').remove();
+
+ series = svg.selectAll('g.serie');
+ lines = series
+ .data(dataSeries, function (d) { return d.key; })
+ .enter()
+ .append('g')
+ .attr('class', 'serie')
+ .attr('stroke', function (d, i) { return colorScale(i); })
+ .append('svg:path')
+ .style('stroke', function (d, i) { return colorScale(i); })
+ .style('stroke-width', 1.3)
+ .style('fill', 'none')
+ .attr('d', function (d) { return this$1.lineGenerator(d.values); })
+ .attr('class', 'line');
+
+ this.svg = svg;
+};
- series = svg.selectAll('g.serie');
- lines = series
- .data(dataSeries, (d) => d.key)
- .enter()
- .append('g')
- .attr('class', 'serie')
- .attr('stroke', (d, i) => colorScale(i))
- .append('svg:path')
- .style('stroke', (d, i) => colorScale(i))
- .style('stroke-width', 1.3)
- .style('fill', 'none')
- .attr('d', (d) => this.lineGenerator(d.values))
- .attr('class', 'line');
+Lineset.prototype.render = function render (svg, config) {
+ //Do nothing, since lines render only when new data is received.
+};
- this.svg = svg;
- }
+var Legend = function Legend() {};
- render(svg, config) {
- //Do nothing, since lines render only when new data is received.
- }
-}
+Legend.prototype.update = function update (svg, config, data) {
+ var dataSeries = d3$1.nest()
+ .key(function (d) { return d.key; })
+ .entries(data),
+ legend = null,
+ entries = null,
+ colorScale = config.colorScale,
+ height = config.height,
+ width = config.width;
-class Legend {
- constructor() {}
-
- update(svg, config, data) {
- let dataSeries = d3$1.nest()
- .key((d) => d.key)
- .entries(data),
- legend = null,
- entries = null,
- colorScale = config.colorScale,
- height = config.height,
- width = config.width;
-
- if(dataSeries.length === 1 && dataSeries[0].key === 'undefined'){
- console.warn('Not showing legend, since there is a valid key');
- return;
- }
+ if(dataSeries.length === 1 && dataSeries[0].key === 'undefined'){
+ console.warn('Not showing legend, since there is a valid key');
+ return;
+ }
- svg.selectAll('g.legend').remove();
+ svg.selectAll('g.legend').remove();
- legend = svg.append('g').attr('class', 'legend');
- entries = legend.selectAll('.legend-entry')
- .data(dataSeries, (d) => d.key)
- .enter()
- .append('g')
- .attr('class', 'legend-entry');
+ legend = svg.append('g').attr('class', 'legend');
+ entries = legend.selectAll('.legend-entry')
+ .data(dataSeries, function (d) { return d.key; })
+ .enter()
+ .append('g')
+ .attr('class', 'legend-entry');
+
+
+ entries.append('rect')
+ .attr('x', width + 10)
+ .attr('y', function (d, i) { return i * 25; })
+ .attr('height', 20)
+ .attr('width', 20)
+ .attr('fill', function (d, i) { return colorScale(i); })
+ .style('opacity', 0.8);
+
+ entries.append('text')
+ .attr("x", width + 25 + 10)
+ .attr("y", function (d, i) { return i * 25 + 7; })
+ .attr("dy", "0.55em")
+ .text(function (d) { return d.key; })
+ .style('font', '14px Montserrat, sans-serif');
+};
- entries.append('rect')
- .attr('x', width + 10)
- .attr('y', (d, i) => i * 25)
- .attr('height', 20)
- .attr('width', 20)
- .attr('fill', (d, i) => colorScale(i))
- .style('opacity', 0.8);
+Legend.prototype.render = function render (svg, config) {
+ //Do nothing, since legend render only when new data is received.
+};
- entries.append('text')
- .attr("x", width + 25 + 10)
- .attr("y", (d, i) => i * 25 + 7)
- .attr("dy", "0.55em")
- .text((d) => d.key)
- .style('font', '14px Montserrat, sans-serif');
+var Areaset = function Areaset(x, y) {
+ this.xAxis = x.xAxis;
+ this.yAxis = y.yAxis;
+};
- }
+Areaset.prototype.update = function update (svg, config, data) {
+ var this$1 = this;
- render(svg, config) {
- //Do nothing, since legend render only when new data is received.
- }
-}
+ var dataSeries = d3$1.nest()
+ .key(function (d) { return d.key; })
+ .entries(data);
-class Areaset {
- constructor(x, y) {
- this.xAxis = x.xAxis;
- this.yAxis = y.yAxis;
- }
+ var series = null
+ , areas = null
+ , area$$1 = config.area
+ , colorScale = config.colorScale
+ , height = config.height
+ , areaOpacity = config.areaOpacity;
- update(svg, config, data) {
- let dataSeries = d3$1.nest()
- .key((d) => d.key)
- .entries(data);
+ var areaGenerator = d3.area()
+ .x(function (d) { return this$1.xAxis.scale()(d.x); })
+ .y0(height)
+ .y1(function (d) { return this$1.yAxis.scale()(d.y); });
- let series = null
- , areas = null
- , area$$1 = config.area
- , colorScale = config.colorScale
- , height = config.height
- , areaOpacity = config.areaOpacity;
+ svg.selectAll('g.area').remove();
- let areaGenerator = d3.area()
- .x((d) => this.xAxis.scale()(d.x))
- .y0(height)
- .y1((d) => this.yAxis.scale()(d.y));
+ series = svg.selectAll('g.area');
+ areas = series
+ .data(dataSeries, function (d) { return d.key; })
+ .enter()
+ .append('g')
+ .attr('class', 'area')
+ .append('svg:path')
+ .style('fill', function (d, i) { return colorScale(i); })
+ .style('fill-opacity', areaOpacity)
+ .attr('d', function (d) { return areaGenerator(d.values); });
+
+ // series
+ // .insert('path', ':first-child') //if not :first-child, area overlaps markers.
+ // .attr('class', 'area')
+ // .data(dataSeries)
+ // .style('stroke', (d, i) => colorScale(i))
+ // .style('fill', (d, i) => colorScale(i))
+ // .style('fill-opacity', areaOpacity)
+ // .attr('d', (d) => areaGenerator(d.values));
+
+ this.svg = svg;
+};
- svg.selectAll('g.area').remove();
+Areaset.prototype.render = function render (svg, config) {
+ //Do nothing, since areas render only when new data is received.
+};
- series = svg.selectAll('g.area');
- areas = series
- .data(dataSeries, (d) => d.key)
+var Pointset = function Pointset(x, y) {
+ this.xAxis = x.xAxis;
+ this.yAxis = y.yAxis;
+};
+Pointset.prototype.update = function update (svg, config, data) {
+ var this$1 = this;
+
+ var dataSeries = d3$1.nest()
+ .key(function (d) { return d.key; })
+ .entries(data),
+ markers = null,
+ markerShape = config.markerShape,
+ markerSize = config.markerSize,
+ markerOutlineWidth = config.markerOutlineWidth,
+ colorScale = config.colorScale,
+ points = null,
+ series = null;
+
+ svg.selectAll('g.points').remove();
+
+ series = svg.selectAll('g.points');
+
+ switch (markerShape) {
+ case 'dot':
+ points = series
+ .data(dataSeries, function (d) { return d.key; })
.enter()
.append('g')
- .attr('class', 'area')
- .append('svg:path')
- .style('fill', (d, i) => colorScale(i))
- .style('fill-opacity', areaOpacity)
- .attr('d', (d) => areaGenerator(d.values));
-
- // series
- // .insert('path', ':first-child') //if not :first-child, area overlaps markers.
- // .attr('class', 'area')
- // .data(dataSeries)
- // .style('stroke', (d, i) => colorScale(i))
- // .style('fill', (d, i) => colorScale(i))
- // .style('fill-opacity', areaOpacity)
- // .attr('d', (d) => areaGenerator(d.values));
-
- this.svg = svg;
- }
-
- render(svg, config) {
- //Do nothing, since areas render only when new data is received.
- }
-}
-
-class Pointset {
- constructor(x, y) {
- this.xAxis = x.xAxis;
- this.yAxis = y.yAxis;
- }
- update(svg, config, data) {
- let dataSeries = d3$1.nest()
- .key((d) => d.key)
- .entries(data),
- markers = null,
- markerShape = config.markerShape,
- markerSize = config.markerSize,
- markerOutlineWidth = config.markerOutlineWidth,
- colorScale = config.colorScale,
- points = null,
- series = null;
-
- svg.selectAll('g.points').remove();
-
- series = svg.selectAll('g.points');
-
- switch (markerShape) {
- case 'dot':
- points = series
- .data(dataSeries, (d) => d.key)
- .enter()
- .append('g')
- .attr('class', 'points')
- .style('fill', (d, i) => colorScale(i))
- .selectAll('circle')
- .data((d) => d.values)
- .enter()
- .append('circle')
- .attr('cx', (d) => this.xAxis.scale()(d.x))
- .attr('cy', (d) => this.yAxis.scale()(d.y))
- .attr('r', markerSize)
- .attr('class', 'marker');
- break;
- case 'ring':
- window.console.warn('Deprecated "circle" marker shape: use "dot" or "ring" instead');
- points = series
- .data(dataSeries, (d) => d.key)
- .enter()
- .append('g')
- .attr('class', 'points')
- .style('stroke', (d, i) => colorScale(i))
- .selectAll('circle')
- .data((d, i) => d.values)
- .enter()
- .append('circle')
- .attr('cx', (d) => this.xAxis.scale()(d.x))
- .attr('cy', (d) => this.yAxis.scale()(d.y))
- .attr('r', markerSize)
- .attr('class', 'marker')
- .style('fill', 'white')
- .style('stroke-width', markerOutlineWidth);
- break;
- // Deprecated circle option
- case 'circle':
- window.console.warn('Deprecated "circle" marker shape: use "dot" or "ring" instead');
- points = series
- .data(dataSeries, (d) => d.key)
- .enter()
- .append('g')
- .attr('class', 'points')
- .style('stroke', (d, i) => colorScale(i))
- .selectAll('circle')
- .data((d, i) => d.values)
- .enter()
- .append('circle')
- .attr('cx', (d) => this.xAxis.scale()(d.x))
- .attr('cy', (d) => this.yAxis.scale()(d.y))
- .attr('r', markerSize)
- .attr('class', 'lineMarker')
- .style('fill', 'white')
- .style('stroke-width', markerOutlineWidth);
- break;
- default:
- points = series
- .data(dataSeries, (d) => d.key)
- .enter()
- .append('g')
- .attr('class', 'points')
- .style('stroke', (d, i) => colorScale(i))
- .selectAll('circle')
- .data((d, i) => d.values)
- .enter()
- .append('circle')
- .attr('cx', (d) => this.xAxis.scale()(d.x))
- .attr('cy', (d) => this.yAxis.scale()(d.y))
- .attr('r', markerSize)
- .attr('class', 'lineMarker')
- .style('fill', 'white')
- .style('stroke-width', markerOutlineWidth);
- }
-
- markers = svg.selectAll('g.points circle');
- markers
- .on('mousedown.user', config.onDown)
- .on('mouseup.user', config.onUp)
- .on('mouseleave.user', config.onLeave)
- .on('mouseover.user', config.onHover)
- .on('click.user', config.onClick);
-
- //this.interactiveElements = markers;
- }
+ .attr('class', 'points')
+ .style('fill', function (d, i) { return colorScale(i); })
+ .selectAll('circle')
+ .data(function (d) { return d.values; })
+ .enter()
+ .append('circle')
+ .attr('cx', function (d) { return this$1.xAxis.scale()(d.x); })
+ .attr('cy', function (d) { return this$1.yAxis.scale()(d.y); })
+ .attr('r', markerSize)
+ .attr('class', 'marker');
+ break;
+ case 'ring':
+ window.console.warn('Deprecated "circle" marker shape: use "dot" or "ring" instead');
+ points = series
+ .data(dataSeries, function (d) { return d.key; })
+ .enter()
+ .append('g')
+ .attr('class', 'points')
+ .style('stroke', function (d, i) { return colorScale(i); })
+ .selectAll('circle')
+ .data(function (d, i) { return d.values; })
+ .enter()
+ .append('circle')
+ .attr('cx', function (d) { return this$1.xAxis.scale()(d.x); })
+ .attr('cy', function (d) { return this$1.yAxis.scale()(d.y); })
+ .attr('r', markerSize)
+ .attr('class', 'marker')
+ .style('fill', 'white')
+ .style('stroke-width', markerOutlineWidth);
+ break;
+ // Deprecated circle option
+ case 'circle':
+ window.console.warn('Deprecated "circle" marker shape: use "dot" or "ring" instead');
+ points = series
+ .data(dataSeries, function (d) { return d.key; })
+ .enter()
+ .append('g')
+ .attr('class', 'points')
+ .style('stroke', function (d, i) { return colorScale(i); })
+ .selectAll('circle')
+ .data(function (d, i) { return d.values; })
+ .enter()
+ .append('circle')
+ .attr('cx', function (d) { return this$1.xAxis.scale()(d.x); })
+ .attr('cy', function (d) { return this$1.yAxis.scale()(d.y); })
+ .attr('r', markerSize)
+ .attr('class', 'lineMarker')
+ .style('fill', 'white')
+ .style('stroke-width', markerOutlineWidth);
+ break;
+ default:
+ points = series
+ .data(dataSeries, function (d) { return d.key; })
+ .enter()
+ .append('g')
+ .attr('class', 'points')
+ .style('stroke', function (d, i) { return colorScale(i); })
+ .selectAll('circle')
+ .data(function (d, i) { return d.values; })
+ .enter()
+ .append('circle')
+ .attr('cx', function (d) { return this$1.xAxis.scale()(d.x); })
+ .attr('cy', function (d) { return this$1.yAxis.scale()(d.y); })
+ .attr('r', markerSize)
+ .attr('class', 'lineMarker')
+ .style('fill', 'white')
+ .style('stroke-width', markerOutlineWidth);
+ }
+
+ markers = svg.selectAll('g.points circle');
+ markers
+ .on('mousedown.user', config.onDown)
+ .on('mouseup.user', config.onUp)
+ .on('mouseleave.user', config.onLeave)
+ .on('mouseover.user', config.onHover)
+ .on('click.user', config.onClick);
+
+ //this.interactiveElements = markers;
+};
- render(svg, config) {
- //Do nothing, since points render only when new data is received.
- }
-}
+Pointset.prototype.render = function render (svg, config) {
+ //Do nothing, since points render only when new data is received.
+};
function simple2stacked(data) {
- return d3$1.nest().key((d) => d.x).rollup((array) => {
- let r = {};
- for (let i = 0; i < array.length; i++) {
- let object = array[i];
+ return d3$1.nest().key(function (d) { return d.x; }).rollup(function (array) {
+ var r = {};
+ for (var i = 0; i < array.length; i++) {
+ var object = array[i];
if (object) {
r[object.key] = object.y;
}
@@ -1797,29 +1770,31 @@ function simple2stacked(data) {
}).entries(data);
}
-function simple2nested(data, key = 'key') {
- return d3$1.nest().key((d) => d[key]).entries(data);
+function simple2nested(data, key) {
+ if ( key === void 0 ) key = 'key';
+
+ return d3$1.nest().key(function (d) { return d[key]; }).entries(data);
}
function simple2Linked(data) {
var linkedData = { links: [], nodes: [] };
- data.map((d) => d.key === 'link' ? linkedData.links.push(d) : linkedData.nodes.push(d));
+ data.map(function (d) { return d.key === 'link' ? linkedData.links.push(d) : linkedData.nodes.push(d); });
return linkedData;
}
function convertPropretiesToTimeFormat(data, properties, format$$1) {
- data.forEach((d) => {
- properties.map((p) => {
+ data.forEach(function (d) {
+ properties.map(function (p) {
d[p] = d3$1.timeParse(format$$1)(d[p]);
});
});
}
function convertByXYFormat(data, config) {
- data.forEach((d) => {
+ data.forEach(function (d) {
//parse x coordinate
switch (config.xAxisType) {
case 'time':
@@ -1843,17 +1818,16 @@ function convertByXYFormat(data, config) {
}
function sortByField (array, field){
- array.sort((e1, e2) => {
+ array.sort(function (e1, e2) {
var a = e1[field];
var b = e2[field];
return (a < b) ? -1 : (a > b) ? 1 : 0;
});
}
-class SvgLinechartStrategy extends SvgAxis {
-
- constructor(context) {
- super(context);
+var SvgLinechartStrategy = (function (SvgAxis$$1) {
+ function SvgLinechartStrategy(context) {
+ SvgAxis$$1.call(this, context);
this.axes = new XYAxes(this.config.xAxisType, 'linear', this.config);
@@ -1877,13 +1851,17 @@ class SvgLinechartStrategy extends SvgAxis {
}
}
+ if ( SvgAxis$$1 ) SvgLinechartStrategy.__proto__ = SvgAxis$$1;
+ SvgLinechartStrategy.prototype = Object.create( SvgAxis$$1 && SvgAxis$$1.prototype );
+ SvgLinechartStrategy.prototype.constructor = SvgLinechartStrategy;
+
/**
* Renders a linechart based on data object
* @param {Object} data Data Object. Contains an array with x and y properties.
*
*/
- draw(data) {
- let svg = this.svgContainer.svg,
+ SvgLinechartStrategy.prototype.draw = function draw (data) {
+ var svg = this.svgContainer.svg,
config = this.config,
needRescaling = this.config.needRescaling,
bbox = null;
@@ -1923,30 +1901,30 @@ class SvgLinechartStrategy extends SvgAxis {
this.points.update(svg, config, data);
}
- }
+ };
- _getDomainBBox(data) {
- var minX = d3$1.min(data, (d) => d.x),
- maxX = d3$1.max(data, (d) => d.x),
- minY = d3$1.min(data, (d) => d.y),
- maxY = d3$1.max(data, (d) => d.y);
+ SvgLinechartStrategy.prototype._getDomainBBox = function _getDomainBBox (data) {
+ var minX = d3$1.min(data, function (d) { return d.x; }),
+ maxX = d3$1.max(data, function (d) { return d.x; }),
+ minY = d3$1.min(data, function (d) { return d.y; }),
+ maxY = d3$1.max(data, function (d) { return d.y; });
return [minX, maxX, minY, maxY];
- }
+ };
- _checkMarkers(config) {
+ SvgLinechartStrategy.prototype._checkMarkers = function _checkMarkers (config) {
return config.markerSize > 0;
- }
- _checkArea(config) {
+ };
+ SvgLinechartStrategy.prototype._checkArea = function _checkArea (config) {
return config.areaOpacity > 0;
- }
+ };
/**
* This method adds config options to the chart context.
* @param {Object} config Config object
*/
- _loadConfig(config) {
- super._loadConfig(config, defaults);
+ SvgLinechartStrategy.prototype._loadConfig = function _loadConfig (config) {
+ SvgAxis$$1.prototype._loadConfig.call(this, config, defaults);
//Markers
this.config.markerOutlineWidth = config.markerOutlineWidth || defaults.markerOutlineWidth;
this.config.markerShape = config.markerShape || defaults.markerShape;
@@ -1954,10 +1932,12 @@ class SvgLinechartStrategy extends SvgAxis {
//Area
this.config.areaOpacity = (typeof config.areaOpacity === 'undefined' || config.markerSize < 0) ? defaults.areaOpacity : config.areaOpacity;
return this;
- }
-}
+ };
-const defaults$1 = {
+ return SvgLinechartStrategy;
+}(SvgAxis));
+
+var defaults$1 = {
selector: '#chart',
colorScale: category5(),
//Stacked
@@ -1978,150 +1958,147 @@ const defaults$1 = {
width: '100%',
height: 350,
//Events
- onDown(d) {
+ onDown: function onDown(d) {
},
- onHover(d) {
+ onHover: function onHover(d) {
},
- onLeave(d) {
+ onLeave: function onLeave(d) {
},
- onClick(d) {
+ onClick: function onClick(d) {
}
};
-class Barset {
- constructor(xAxis, yAxis) {
- this.xAxis = xAxis;
- this.yAxis = yAxis;
- this.lineGenerator = d3$1.line()
- .x((d) => xAxis.scale()(d.x))
- .y((d) => yAxis.scale()(d.y));
- }
+var Barset = function Barset(xAxis, yAxis) {
+ this.xAxis = xAxis;
+ this.yAxis = yAxis;
+ this.lineGenerator = d3$1.line()
+ .x(function (d) { return xAxis.scale()(d.x); })
+ .y(function (d) { return yAxis.scale()(d.y); });
+};
- update(svg, config, data, method) {
- let bars = null;
+Barset.prototype.update = function update (svg, config, data, method) {
+ var bars = null;
- if (method === 'stacked') {
- this._updateStacked(svg, config, data);
- } else {
- this._updateGrouped(svg, config, data);
- }
- bars = svg.selectAll('g.serie rect');
- bars
- .on('mousedown.user', config.onDown)
- .on('mouseup.user', config.onUp)
- .on('mouseleave.user', config.onLeave)
- .on('mouseover.user', config.onHover)
- .on('click.user', config.onClick);
+ if (method === 'stacked') {
+ this._updateStacked(svg, config, data);
+ } else {
+ this._updateGrouped(svg, config, data);
+ }
+ bars = svg.selectAll('g.serie rect');
+ bars
+ .on('mousedown.user', config.onDown)
+ .on('mouseup.user', config.onUp)
+ .on('mouseleave.user', config.onLeave)
+ .on('mouseover.user', config.onHover)
+ .on('click.user', config.onClick);
- /**
- TODO: Add default events?
- bars
- .on('mousedown.default', config.onDown)
- .on('mouseup.default', config.onUp)
- .on('mouseleave.default', function (){ select(this).transition().duration(150).attr('fill-opacity', 1)})
- .on('mouseover.default', function (){ select(this).transition().duration(150).attr('fill-opacity', 0.9)})
- .on('click.default', config.onClick);
- **/
-
- this.interactiveElements = bars;
- }
+ /**
+ TODO: Add default events?
+ bars
+ .on('mousedown.default', config.onDown)
+ .on('mouseup.default', config.onUp)
+ .on('mouseleave.default', function (){ select(this).transition().duration(150).attr('fill-opacity', 1)})
+ .on('mouseover.default',function (){ select(this).transition().duration(150).attr('fill-opacity', 0.9)})
+ .on('click.default', config.onClick);
+ **/
+
+ this.interactiveElements = bars;
+};
- _updateStacked(svg, config, dataSeries) {
- this._cleanCurrentSeries(svg);
-
- let colorScale = config.colorScale,
- layer = svg.selectAll('.serie').data(dataSeries),
- layerEnter = layer.enter().append('g'),
- layerMerge = null,
- bar = null,
- barEnter = null,
- barMerge = null,
- x = this.xAxis.scale(),
- y = this.yAxis.scale();
-
- layerMerge = layer.merge(layerEnter)
- .attr('class', 'serie')
- .attr('fill', (d, i) => colorScale(i));
-
- bar = layerMerge.selectAll('rect')
- .data((d) => d);
-
- barEnter = bar.enter().append('rect');
-
- barMerge = bar.merge(barEnter)
- .attr("x", (d) => x(d.data.key))
- .attr("y", (d) => y(d[1]))
- .attr("height", (d) => y(d[0]) - y(d[1]))
- .attr("width", x.bandwidth());
- }
+Barset.prototype._updateStacked = function _updateStacked (svg, config, dataSeries) {
+ this._cleanCurrentSeries(svg);
+
+ var colorScale = config.colorScale,
+ layer = svg.selectAll('.serie').data(dataSeries),
+ layerEnter = layer.enter().append('g'),
+ layerMerge = null,
+ bar = null,
+ barEnter = null,
+ barMerge = null,
+ x = this.xAxis.scale(),
+ y = this.yAxis.scale();
+
+ layerMerge = layer.merge(layerEnter)
+ .attr('class', 'serie')
+ .attr('fill', function (d, i) { return colorScale(i); });
+
+ bar = layerMerge.selectAll('rect')
+ .data(function (d) { return d; });
+
+ barEnter = bar.enter().append('rect');
+
+ barMerge = bar.merge(barEnter)
+ .attr("x", function (d) { return x(d.data.key); })
+ .attr("y", function (d) { return y(d[1]); })
+ .attr("height", function (d) { return y(d[0]) - y(d[1]); })
+ .attr("width", x.bandwidth());
+};
- _updateGrouped(svg, config, data) {
- this._cleanCurrentSeries(svg);
+Barset.prototype._updateGrouped = function _updateGrouped (svg, config, data) {
+ this._cleanCurrentSeries(svg);
- let keys = d3$1.map(data, (d) => d.key).keys(),
- colorScale = config.colorScale,
- layer = svg.selectAll('.serie').data(data),
- layerEnter = null,
- layerMerge = null,
- bar = null,
- barEnter = null,
- barMerge = null,
- x = this.xAxis.scale(),
- y = this.yAxis.scale(),
- xGroup = d3$1.scaleBand().domain(keys).range([0, x.bandwidth()]),
- height = config.height;
+ var keys = d3$1.map(data, function (d) { return d.key; }).keys(),
+ colorScale = config.colorScale,
+ layer = svg.selectAll('.serie').data(data),
+ layerEnter = null,
+ layerMerge = null,
+ bar = null,
+ barEnter = null,
+ barMerge = null,
+ x = this.xAxis.scale(),
+ y = this.yAxis.scale(),
+ xGroup = d3$1.scaleBand().domain(keys).range([0, x.bandwidth()]),
+ height = config.height;
- data = simple2nested(data, 'x');
+ data = simple2nested(data, 'x');
- layer = svg.selectAll('.serie').data(data);
+ layer = svg.selectAll('.serie').data(data);
- layerEnter = layer.enter().append('g')
- .attr('transform', (d) => 'translate(' + x(d.key) + ')');
+ layerEnter = layer.enter().append('g')
+ .attr('transform', function (d) { return 'translate(' + x(d.key) + ')'; });
- layerMerge = layer.merge(layerEnter)
- .attr('class', 'serie')
- .attr('transform', (d) => 'translate(' + x(d.key) + ')');
+ layerMerge = layer.merge(layerEnter)
+ .attr('class', 'serie')
+ .attr('transform', function (d) { return 'translate(' + x(d.key) + ')'; });
- bar = layerMerge.selectAll('rect')
- .data((d) => d.values);
+ bar = layerMerge.selectAll('rect')
+ .data(function (d) { return d.values; });
- barEnter = bar.enter().append('rect');
+ barEnter = bar.enter().append('rect');
- barMerge = bar.merge(barEnter)
- .attr('width', xGroup.bandwidth())
- .attr("x", (d) => xGroup(d.key))
- .attr('fill', (d, i) => colorScale(i))
- .attr("y", (d) => y(d.y))
- .attr("height", (d) => height - y(d.y));
+ barMerge = bar.merge(barEnter)
+ .attr('width', xGroup.bandwidth())
+ .attr("x", function (d) { return xGroup(d.key); })
+ .attr('fill', function (d, i) { return colorScale(i); })
+ .attr("y", function (d) { return y(d.y); })
+ .attr("height", function (d) { return height - y(d.y); });
- }
+};
- _getKeysFromData(data) {
- let keys = [];
- for (let p in data[0]) {
- if (p !== 'total' && p !== 'key') {
- keys.push(p);
- }
+Barset.prototype._getKeysFromData = function _getKeysFromData (data) {
+ var keys = [];
+ for (var p in data[0]) {
+ if (p !== 'total' && p !== 'key') {
+ keys.push(p);
}
- return keys;
-
}
+ return keys;
- _cleanCurrentSeries(svg) {
- svg.selectAll('.serie').remove();
- }
+};
- render(svg, config) {
- //Do nothing, since bars render only when new data is received.
- }
-}
+Barset.prototype._cleanCurrentSeries = function _cleanCurrentSeries (svg) {
+ svg.selectAll('.serie').remove();
+};
-class SvgBarchartStrategy extends SvgAxis {
+Barset.prototype.render = function render (svg, config) {
+ //Do nothing, since bars render only when new data is received.
+};
- constructor(context) {
- super(context);
+var SvgBarchartStrategy = (function (SvgAxis$$1) {
+ function SvgBarchartStrategy(context) {
+ SvgAxis$$1.call(this, context);
this.axes = new XYAxes('categorical', 'linear', this.config);
this.bars = new Barset(this.axes.x.xAxis, this.axes.y.yAxis);
@@ -2135,21 +2112,27 @@ class SvgBarchartStrategy extends SvgAxis {
}
+ if ( SvgAxis$$1 ) SvgBarchartStrategy.__proto__ = SvgAxis$$1;
+ SvgBarchartStrategy.prototype = Object.create( SvgAxis$$1 && SvgAxis$$1.prototype );
+ SvgBarchartStrategy.prototype.constructor = SvgBarchartStrategy;
+
/**
* Renders a barchart based on data object
* @param {Object} data Data Object. Contains an array with x and y properties.
*
*/
- draw(data = this.data) {
- let svg = this.svgContainer.svg,
+ SvgBarchartStrategy.prototype.draw = function draw (data) {
+ if ( data === void 0 ) data = this.data;
+
+ var svg = this.svgContainer.svg,
config = this.config,
- keys = d3$1.map(data, (d) => d.key).keys(),
+ keys = d3$1.map(data, function (d) { return d.key; }).keys(),
data4stack = simple2stacked(data),
data4render = null,
isStacked = this.config.stacked,
stack$$1 = d3$1.stack().keys(keys)
- .value((d, k) => d.value[k])
+ .value(function (d, k) { return d.value[k]; })
.order(d3$1.stackOrderNone),
yMin = 0,
yMax = 0,
@@ -2164,10 +2147,10 @@ class SvgBarchartStrategy extends SvgAxis {
yMax = isStacked ?
- d3$1.max(dataSeries, (serie) => d3$1.max(serie, (d) => d[1])) :
- d3$1.max(data, (d) => d.y);
+ d3$1.max(dataSeries, function (serie) { return d3$1.max(serie, function (d) { return d[1]; }); }) :
+ d3$1.max(data, function (d) { return d.y; });
- this.axes.updateDomainByKeysAndBBox(d3$1.map(data, (d) => d.x).keys(), [yMin, yMax]);
+ this.axes.updateDomainByKeysAndBBox(d3$1.map(data, function (d) { return d.x; }).keys(), [yMin, yMax]);
this.axes.transition(svg, 200);
data4render = isStacked ? dataSeries : data;
@@ -2178,29 +2161,31 @@ class SvgBarchartStrategy extends SvgAxis {
this.data = data; // TODO: ?
- }
+ };
- transition2Stacked() {
+ SvgBarchartStrategy.prototype.transition2Stacked = function transition2Stacked () {
this.config.stacked = true;
- }
+ };
- transition2Grouped() {
+ SvgBarchartStrategy.prototype.transition2Grouped = function transition2Grouped () {
this.config.stacked = false;
- }
+ };
/**
* This method adds config options to the chart context.
* @param {Object} config Config object
*/
- _loadConfig(config) {
- super._loadConfig(config, defaults$1);
+ SvgBarchartStrategy.prototype._loadConfig = function _loadConfig (config) {
+ SvgAxis$$1.prototype._loadConfig.call(this, config, defaults$1);
//Stacked
this.config.stacked = typeof (config.stacked) === 'undefined' ? defaults$1.stacked : config.stacked; return this;
- }
-}
+ };
-const defaults$2 = {
+ return SvgBarchartStrategy;
+}(SvgAxis));
+
+var defaults$2 = {
selector: '#chart',
colorScale: category4(),
//Axes
@@ -2219,73 +2204,72 @@ const defaults$2 = {
width: '100%', // %, auto, or numeric
height: 250,
//Events
- onDown(d) {
+ onDown: function onDown(d) {
},
- onHover(d) {
+ onHover: function onHover(d) {
},
- onLeave(d) {
+ onLeave: function onLeave(d) {
},
- onClick(d) {
+ onClick: function onClick(d) {
},
maxNumberOfElements: 100, // used by keepDrawing method to reduce the number of elements in the current chart
};
-class Streamset {
- constructor(xAxis, yAxis) {
- this.xAxis = xAxis;
- this.yAxis = yAxis;
+var Streamset = function Streamset(xAxis, yAxis) {
+ var this$1 = this;
- this.areaGenerator = d3$1.area()
- .curve(d3$1.curveCardinal)
- .x((d) => this.xAxis.scale()((d3$1.timeParse(this.xDataFormat)(d.data.key)))) // TODO: It seems d3.nest() transform Date object in
- .y0((d) => this.yAxis.scale()(d[0]))
- .y1((d) => this.yAxis.scale()(d[1]));
- }
+ this.xAxis = xAxis;
+ this.yAxis = yAxis;
+
+ this.areaGenerator = d3$1.area()
+ .curve(d3$1.curveCardinal)
+ .x(function (d) { return this$1.xAxis.scale()((d3$1.timeParse(this$1.xDataFormat)(d.data.key))); }) // TODO: It seems d3.nest() transform Date object in
+ .y0(function (d) { return this$1.yAxis.scale()(d[0]); })
+ .y1(function (d) { return this$1.yAxis.scale()(d[1]); });
+};
- update(svg, config, data) {
- let series = null;
+Streamset.prototype.update = function update (svg, config, data) {
+ var series = null;
- //Update date format, used by areaGenerator function due to a problem when nesting with d3.
- this.xDataFormat = config.xAxisFormat;
+ //Update date format, used by areaGenerator function due to a problem when nesting with d3.
+ this.xDataFormat = config.xAxisFormat;
- svg.selectAll('.serie').remove();
+ svg.selectAll('.serie').remove();
- series = svg.selectAll('.serie')
- .data(data)
- .enter()
- .append('g')
- .attr('class', 'serie')
- .style('stroke', (d, i) => config.colorScale(i));
+ series = svg.selectAll('.serie')
+ .data(data)
+ .enter()
+ .append('g')
+ .attr('class', 'serie')
+ .style('stroke', function (d, i) { return config.colorScale(i); });
- series
- .append('path')
- .attr('class', 'layer')
- .attr('d', this.areaGenerator)
- .style('fill', (d, i) => config.colorScale(i));
+ series
+ .append('path')
+ .attr('class', 'layer')
+ .attr('d', this.areaGenerator)
+ .style('fill', function (d, i) { return config.colorScale(i); });
- series.exit().remove();
+ series.exit().remove();
- series
- .attr('opacity', 1)
- .on('mousedown.user', config.onDown)
- .on('mouseup.user', config.onUp)
- .on('mouseleave.user', config.onLeave)
- .on('mouseover.user', config.onHover)
- .on('click.user', config.onClick);
- }
-
- render(svg, config) {
- //Do nothing, since lines render only when new data is received.
- }
-}
+ series
+ .attr('opacity', 1)
+ .on('mousedown.user', config.onDown)
+ .on('mouseup.user', config.onUp)
+ .on('mouseleave.user', config.onLeave)
+ .on('mouseover.user', config.onHover)
+ .on('click.user', config.onClick);
+};
-class SvgStreamgraphStrategy extends SvgAxis {
+Streamset.prototype.render = function render (svg, config) {
+ //Do nothing, since lines render only when new data is received.
+};
- constructor(context) {
- super(context);
+var SvgStreamgraphStrategy = (function (SvgAxis$$1) {
+ function SvgStreamgraphStrategy(context) {
+ SvgAxis$$1.call(this, context);
this.x = new XAxis('time', this.config);
this.y = new YAxis('linear', this.config);
@@ -2301,16 +2285,20 @@ class SvgStreamgraphStrategy extends SvgAxis {
.add(this.legend)
.add(this.streams);
}
- draw(data) {
- let svg = this.svgContainer.svg,
+
+ if ( SvgAxis$$1 ) SvgStreamgraphStrategy.__proto__ = SvgAxis$$1;
+ SvgStreamgraphStrategy.prototype = Object.create( SvgAxis$$1 && SvgAxis$$1.prototype );
+ SvgStreamgraphStrategy.prototype.constructor = SvgStreamgraphStrategy;
+ SvgStreamgraphStrategy.prototype.draw = function draw (data) {
+ var svg = this.svgContainer.svg,
config = this.config,
bbox = null,
- keys = d3$1.map(data, (d) => d.key).keys(),
+ keys = d3$1.map(data, function (d) { return d.key; }).keys(),
xDataFormat = this.config.xAxisFormat,
data4stack = simple2stacked(data),
stack$$1 = d3$1.stack()
.keys(keys)
- .value((d, k) => d.value[k])
+ .value(function (d, k) { return d.value[k]; })
.order(d3$1.stackOrderInsideOut)
.offset(d3$1.stackOffsetWiggle),
dataSeries = stack$$1(data4stack),
@@ -2338,28 +2326,30 @@ class SvgStreamgraphStrategy extends SvgAxis {
// Update streams
this.streams.update(svg, config, dataSeries);
- }
+ };
- _getDomainBBox(data, dataSeries) {
- let minX = d3$1.min(data, (d) => new Date(d.x)),
- maxX = d3$1.max(data, (d) => new Date(d.x)),
- minY = d3$1.min(dataSeries, (serie) => d3$1.min(serie, (d) => d[0])),
- maxY = d3$1.max(dataSeries, (serie) => d3$1.max(serie, (d) => d[1]));
+ SvgStreamgraphStrategy.prototype._getDomainBBox = function _getDomainBBox (data, dataSeries) {
+ var minX = d3$1.min(data, function (d) { return new Date(d.x); }),
+ maxX = d3$1.max(data, function (d) { return new Date(d.x); }),
+ minY = d3$1.min(dataSeries, function (serie) { return d3$1.min(serie, function (d) { return d[0]; }); }),
+ maxY = d3$1.max(dataSeries, function (serie) { return d3$1.max(serie, function (d) { return d[1]; }); });
return [minX, maxX, minY, maxY];
- }
+ };
/**
* This method adds config options to the chart context.
* @param {Object} config Config object
*/
- _loadConfig(config) {
- super._loadConfig(config,defaults$2);
+ SvgStreamgraphStrategy.prototype._loadConfig = function _loadConfig (config) {
+ SvgAxis$$1.prototype._loadConfig.call(this, config,defaults$2);
return this;
- }
-}
+ };
+
+ return SvgStreamgraphStrategy;
+}(SvgAxis));
-const defaults$3 = {
+var defaults$3 = {
selector: '#chart',
colorScale: category2(),
//Axes
@@ -2378,21 +2368,20 @@ const defaults$3 = {
width: '100%', // %, auto, or numeric
height: 250,
//Events
- onDown(d) {
+ onDown: function onDown(d) {
},
- onHover(d) {
+ onHover: function onHover(d) {
},
- onLeave(d) {
+ onLeave: function onLeave(d) {
},
- onClick(d) {
+ onClick: function onClick(d) {
},
maxNumberOfElements: 100, // used by keepDrawing method to reduce the number of elements in the current chart
};
-class SvgStackedAreaStrategy extends SvgAxis {
-
- constructor(context) {
- super(context);
+var SvgStackedAreaStrategy = (function (SvgAxis$$1) {
+ function SvgStackedAreaStrategy(context) {
+ SvgAxis$$1.call(this, context);
this.axes = new XYAxes('time', 'linear', this.config);
@@ -2407,17 +2396,21 @@ class SvgStackedAreaStrategy extends SvgAxis {
.add(this.streams);
}
+ if ( SvgAxis$$1 ) SvgStackedAreaStrategy.__proto__ = SvgAxis$$1;
+ SvgStackedAreaStrategy.prototype = Object.create( SvgAxis$$1 && SvgAxis$$1.prototype );
+ SvgStackedAreaStrategy.prototype.constructor = SvgStackedAreaStrategy;
+
- draw(data) {
- let svg = this.svgContainer.svg,
+ SvgStackedAreaStrategy.prototype.draw = function draw (data) {
+ var svg = this.svgContainer.svg,
config = this.config,
bbox = null,
- keys = d3$1.map(data, (d) => d.key).keys(),
+ keys = d3$1.map(data, function (d) { return d.key; }).keys(),
data4stack = simple2stacked(data),
xDataFormat = this.config.xAxisFormat,
stack$$1 = d3$1.stack()
.keys(keys)
- .value((d, k) => d.value[k])
+ .value(function (d, k) { return d.value[k]; })
.order(d3$1.stackOrderInsideOut)
.offset(d3$1.stackOffNone),
dataSeries = stack$$1(data4stack),
@@ -2443,28 +2436,30 @@ class SvgStackedAreaStrategy extends SvgAxis {
// Update streams
this.streams.update(svg, config, dataSeries);
- }
+ };
- _getDomainBBox(data, dataSeries) {
- let minX = d3$1.min(data, (d) => (d.x)),
- maxX = d3$1.max(data, (d) => (d.x)),
- minY = d3$1.min(dataSeries, (serie) => d3$1.min(serie, (d) => d[0])),
- maxY = d3$1.max(dataSeries, (serie) => d3$1.max(serie, (d) => d[1]));
+ SvgStackedAreaStrategy.prototype._getDomainBBox = function _getDomainBBox (data, dataSeries) {
+ var minX = d3$1.min(data, function (d) { return (d.x); }),
+ maxX = d3$1.max(data, function (d) { return (d.x); }),
+ minY = d3$1.min(dataSeries, function (serie) { return d3$1.min(serie, function (d) { return d[0]; }); }),
+ maxY = d3$1.max(dataSeries, function (serie) { return d3$1.max(serie, function (d) { return d[1]; }); });
return [minX, maxX, minY, maxY];
- }
+ };
/**
* This method adds config options to the chart context.
* @param {Object} config Config object
*/
- _loadConfig(config) {
- super._loadConfig(config,defaults$3);
- }
-}
+ SvgStackedAreaStrategy.prototype._loadConfig = function _loadConfig (config) {
+ SvgAxis$$1.prototype._loadConfig.call(this, config,defaults$3);
+ };
-const defaults$4 = {
+ return SvgStackedAreaStrategy;
+}(SvgAxis));
+
+var defaults$4 = {
selector: '#chart',
colorScale: category3(),
//Axes
@@ -2483,81 +2478,77 @@ const defaults$4 = {
width: '100%', // %, auto, or numeric
height: 250,
//Events
- onDown(d) {
+ onDown: function onDown(d) {
},
- onHover(d) {
+ onHover: function onHover(d) {
},
- onLeave(d) {
+ onLeave: function onLeave(d) {
},
- onClick(d) {
+ onClick: function onClick(d) {
}
};
-class TimeBoxset {
-
- constructor(xAxis, yAxis) {
- this.xAxis = xAxis;
- this.yAxis = yAxis;
+var TimeBoxset = function TimeBoxset(xAxis, yAxis) {
+ this.xAxis = xAxis;
+ this.yAxis = yAxis;
- }
- update(svg, config, data) {
- let colorScale = config.colorScale,
- keys = d3$1.map(data, (d) => d.key).keys(),
- layer = svg.selectAll('.serie').data(data),
- layerEnter = null,
- layerMerge = null,
- box = null,
- boxEnter = null,
- boxMerge = null,
- extLanes = null,
- yLanes = null,
- yLanesBand = d3$1.scaleBand().range([0, keys.length + 1]).domain(keys),
- x = this.xAxis.scale(),
- y = this.yAxis.scale();
-
- data = simple2nested(data);
- extLanes = d3$1.extent(data, (d, i) => i);
- yLanes = d3$1.scaleLinear().domain([extLanes[0], extLanes[1] + 1]).range([0, config.height]);
-
- layer = svg.selectAll('.serie').data(data);
- layerEnter = layer.enter().append('g');
-
- layerMerge = layer.merge(layerEnter)
- .attr('class', 'serie');
-
-
- box = layerMerge.selectAll('rect')
- .data((d) => d.values);
-
- boxEnter = box.enter().append('rect');
-
- boxMerge = box.merge(boxEnter)
- .attr('width', (d) => x(d.end) - x(d.start))
- .attr('x', (d) => x(d.start))
- .attr('y', (d) => y(d.key))
- .attr('fill', (d) => colorScale(parseInt(yLanesBand(d.key))))
- .attr('height', () => 0.8 * yLanes(1));
-
- box = svg.selectAll('g.serie rect');
+};
+TimeBoxset.prototype.update = function update (svg, config, data) {
+ var colorScale = config.colorScale,
+ keys = d3$1.map(data, function (d) { return d.key; }).keys(),
+ layer = svg.selectAll('.serie').data(data),
+ layerEnter = null,
+ layerMerge = null,
+ box = null,
+ boxEnter = null,
+ boxMerge = null,
+ extLanes = null,
+ yLanes = null,
+ yLanesBand = d3$1.scaleBand().range([0, keys.length + 1]).domain(keys),
+ x = this.xAxis.scale(),
+ y = this.yAxis.scale();
+
+ data = simple2nested(data);
+ extLanes = d3$1.extent(data, function (d, i) { return i; });
+ yLanes = d3$1.scaleLinear().domain([extLanes[0], extLanes[1] + 1]).range([0, config.height]);
+
+ layer = svg.selectAll('.serie').data(data);
+ layerEnter = layer.enter().append('g');
+
+ layerMerge = layer.merge(layerEnter)
+ .attr('class', 'serie');
+
+
+ box = layerMerge.selectAll('rect')
+ .data(function (d) { return d.values; });
+
+ boxEnter = box.enter().append('rect');
+
+ boxMerge = box.merge(boxEnter)
+ .attr('width', function (d) { return x(d.end) - x(d.start); })
+ .attr('x', function (d) { return x(d.start); })
+ .attr('y', function (d) { return y(d.key); })
+ .attr('fill', function (d) { return colorScale(parseInt(yLanesBand(d.key))); })
+ .attr('height', function () { return 0.8 * yLanes(1); });
+
+ box = svg.selectAll('g.serie rect');
- box
- .on('mousedown.user', config.onDown)
- .on('mouseup.user', config.onUp)
- .on('mouseleave.user', config.onLeave)
- .on('mouseover.user', config.onHover)
- .on('click.user', config.onClick);
-
- }
+ box
+ .on('mousedown.user', config.onDown)
+ .on('mouseup.user', config.onUp)
+ .on('mouseleave.user', config.onLeave)
+ .on('mouseover.user', config.onHover)
+ .on('click.user', config.onClick);
- render(svg, config) {
- //Do nothing, since lines render only when new data is received.
- }
-}
+};
-class SvgSwimlaneStrategy extends SvgAxis {
+TimeBoxset.prototype.render = function render (svg, config) {
+ //Do nothing, since lines render only when new data is received.
+};
- constructor(context) {
- super(context);
+var SvgSwimlaneStrategy = (function (SvgAxis$$1) {
+ function SvgSwimlaneStrategy(context) {
+ SvgAxis$$1.call(this, context);
this.axes = new XYAxes('time', 'categorical', this.config);
this.boxs = new TimeBoxset(this.axes.x.xAxis, this.axes.y.yAxis);
this.legend = new Legend();
@@ -2568,11 +2559,15 @@ class SvgSwimlaneStrategy extends SvgAxis {
.add(this.legend);
}
- draw(data) {
- let svg = this.svgContainer.svg,
+ if ( SvgAxis$$1 ) SvgSwimlaneStrategy.__proto__ = SvgAxis$$1;
+ SvgSwimlaneStrategy.prototype = Object.create( SvgAxis$$1 && SvgAxis$$1.prototype );
+ SvgSwimlaneStrategy.prototype.constructor = SvgSwimlaneStrategy;
+
+ SvgSwimlaneStrategy.prototype.draw = function draw (data) {
+ var svg = this.svgContainer.svg,
config = this.config,
dataFormat = this.config.xAxisFormat,
- keys = d3$1.map(data, (d) => d.key).keys(),
+ keys = d3$1.map(data, function (d) { return d.key; }).keys(),
bbox = null,
needRescaling = this.config.needRescaling;
@@ -2591,23 +2586,25 @@ class SvgSwimlaneStrategy extends SvgAxis {
this.boxs.update(svg, config, data);
this.legend.update(svg, config, data);
- }
+ };
- _getBBox(data) {
+ SvgSwimlaneStrategy.prototype._getBBox = function _getBBox (data) {
return [
- d3$1.min(data, (d) => (d.start)),
- d3$1.max(data, (d) => (d.end))
+ d3$1.min(data, function (d) { return (d.start); }),
+ d3$1.max(data, function (d) { return (d.end); })
];
- }
+ };
- _loadConfig(config) {
- super._loadConfig(config, defaults$4);
+ SvgSwimlaneStrategy.prototype._loadConfig = function _loadConfig (config) {
+ SvgAxis$$1.prototype._loadConfig.call(this, config, defaults$4);
return this;
- }
-}
+ };
-const defaults$5 = {
+ return SvgSwimlaneStrategy;
+}(SvgAxis));
+
+var defaults$5 = {
selector: '#chart',
colorScale: diverging_spectral2(),
invertColorScale: true,
@@ -2633,294 +2630,292 @@ const defaults$5 = {
ticks: 10, // ticks for y dial.
};
-class Dial { // TODO tidy
- constructor(axisType, config) {
- if (config === null) {
- throw new Error('No chart context specified for polarAxis');
- }
-
- this.r = (
- (config.width > config.height) ?
- config.height : config.width
- ) / 2;
- this.translation = (() =>
- 'translate(' + this.r + ',' + this.r + ')'
- );
- config.colorScale.domain([0, 1]);
-
- this.scale = d3$1.scaleLinear()
- .domain([config.minLevel, config.maxLevel])
- .range([0, 1]);
-
- this.scaleMarks = this.scale.ticks(config.ticks);
-
- this.range = config.maxAngle - config.minAngle;
-
- this.arc = d3$1.arc()
- .innerRadius(this.r - config.ringWidth - config.ringMargin)
- .outerRadius(this.r - config.ringMargin)
- .startAngle((d, i) => {
- var ratio = d * i;
- return deg2rad(config.minAngle + (ratio * this.range));
- })
- .endAngle((d, i) => {
- var ratio = d * (i + 1);
- return deg2rad(config.minAngle + (ratio * this.range));
- });
+var Dial = function Dial(axisType, config) {
+ var this$1 = this;
- this.tickData = d3$1.range(config.ticks)
- .map(() => 1 / config.ticks);
+ if (config === null) {
+ throw new Error('No chart context specified for polarAxis');
}
- render(svg, config) {
- let labels = null;
-
- // Append the ring
- let arcs = svg.append('g')
- .attr('class', 'arc')
- .attr('transform', this.translation);
-
- // Append the ring sectors
- let arcPaths = arcs.selectAll('path')
- .data(this.tickData)
- .enter().append('path')
- // ID for textPath linking
- .attr('id', (d, i) => 'sector-' + i)
- .attr('d', this.arc);
-
- // Fill colors
- if (config.invertColorScale) {
- arcPaths.attr('fill', (d, i) => config.colorScale(1 - d * i));
- } else {
- arcPaths.attr('fill', (d, i) => config.colorScale(d * i));
- }
+ this.r = (
+ (config.width > config.height) ?
+ config.height : config.width
+ ) / 2;
+ this.translation = (function () { return 'translate(' + this$1.r + ',' + this$1.r + ')'; }
+ );
+ config.colorScale.domain([0, 1]);
- // Apend the scale labels
- labels = svg.append('g')
- .attr('class', 'labels')
- .attr('transform', this.translation);
-
- // // Append scale marker labels
- labels.selectAll('text')
- .data(this.scaleMarks)
- .enter().append('text')
- .attr('transform', (d) => {
- let ratio = this.scale(d);
- let newAngle = config.minAngle + (ratio * this.range);
- return 'rotate(' + newAngle + ') translate(0,' + (config.labelInset - this.r) + ')';
- })
- .text((d) => d)
- .style('text-anchor', 'middle')
- .style('font', '18px Montserrat, sans-serif');
- }
-}
+ this.scale = d3$1.scaleLinear()
+ .domain([config.minLevel, config.maxLevel])
+ .range([0, 1]);
+
+ this.scaleMarks = this.scale.ticks(config.ticks);
+
+ this.range = config.maxAngle - config.minAngle;
+
+ this.arc = d3$1.arc()
+ .innerRadius(this.r - config.ringWidth - config.ringMargin)
+ .outerRadius(this.r - config.ringMargin)
+ .startAngle(function (d, i) {
+ var ratio = d * i;
+ return deg2rad(config.minAngle + (ratio * this$1.range));
+ })
+ .endAngle(function (d, i) {
+ var ratio = d * (i + 1);
+ return deg2rad(config.minAngle + (ratio * this$1.range));
+ });
-class DialNeedle { // TODO tidy
- constructor(axisType, config) {
- if (config === null) {
- throw new Error('No chart context specified for polarAxis');
- }
+ this.tickData = d3$1.range(config.ticks)
+ .map(function () { return 1 / config.ticks; });
+};
- this.r = (
- (config.width > config.height) ?
- config.height : config.width
- ) / 2;
+Dial.prototype.render = function render (svg, config) {
+ var this$1 = this;
- this.needleLen = config.needleLenghtRatio * (this.r);
+ var labels = null;
- this.translation = (() =>
- 'translate(' + this.r + ',' + this.r + ')'
- );
- config.colorScale.domain([0, 1]);
+ // Append the ring
+ var arcs = svg.append('g')
+ .attr('class', 'arc')
+ .attr('transform', this.translation);
- this.scale = d3$1.scaleLinear()
- .domain([config.minLevel, config.maxLevel])
- .range([0, 1]);
+ // Append the ring sectors
+ var arcPaths = arcs.selectAll('path')
+ .data(this.tickData)
+ .enter().append('path')
+ // ID for textPath linking
+ .attr('id', function (d, i) { return 'sector-' + i; })
+ .attr('d', this.arc);
- this.angleScale = d3$1.scaleLinear()
- .domain([config.minLevel, config.maxLevel])
- .range([90 + config.minAngle, 90 + config.maxAngle]);
+ // Fill colors
+ if (config.invertColorScale) {
+ arcPaths.attr('fill', function (d, i) { return config.colorScale(1 - d * i); });
+ } else {
+ arcPaths.attr('fill', function (d, i) { return config.colorScale(d * i); });
+ }
+
+ // Apend the scale labels
+ labels = svg.append('g')
+ .attr('class', 'labels')
+ .attr('transform', this.translation);
+
+ // // Append scale marker labels
+ labels.selectAll('text')
+ .data(this.scaleMarks)
+ .enter().append('text')
+ .attr('transform', function (d) {
+ var ratio = this$1.scale(d);
+ var newAngle = config.minAngle + (ratio * this$1.range);
+ return 'rotate(' + newAngle + ') translate(0,' + (config.labelInset - this$1.r) + ')';
+ })
+ .text(function (d) { return d; })
+ .style('text-anchor', 'middle')
+ .style('font', '18px Montserrat, sans-serif');
+};
- this.scaleMarks = this.scale.ticks(config.ticks);
+var DialNeedle = function DialNeedle(axisType, config) {
+ var this$1 = this;
- this.range = config.maxAngle - config.minAngle;
+ if (config === null) {
+ throw new Error('No chart context specified for polarAxis');
+ }
- this.arc = d3$1.arc()
- .innerRadius(this.r - config.ringWidth - config.ringMargin)
- .outerRadius(this.r - config.ringMargin)
- .startAngle((d, i) => {
- let ratio = d * i;
- return deg2rad(config.minAngle + (ratio * this.range));
- })
- .endAngle((d, i) => {
- let ratio = d * (i + 1);
- return deg2rad(config.minAngle + (ratio * this.range));
- });
+ this.r = (
+ (config.width > config.height) ?
+ config.height : config.width
+ ) / 2;
- this.tickData = d3$1.range(config.ticks)
- .map(() => 1 / config.ticks);
- }
+ this.needleLen = config.needleLenghtRatio * (this.r);
- update(svg, config, data, method) {
- let datum = data[data.length - 1];
+ this.translation = (function () { return 'translate(' + this$1.r + ',' + this$1.r + ')'; }
+ );
+ config.colorScale.domain([0, 1]);
- this.needle
- .transition()
- .attr('transform', (d) => `translate(${this.r}, ${this.r}) rotate(${this.angleScale(datum.value) - 90})`)
- .attr('d', `M ${0 - config.needleNutRadius} ${0} L ${0} ${0 - this.needleLen} L ${config.needleNutRadius} ${0}`);
- }
+ this.scale = d3$1.scaleLinear()
+ .domain([config.minLevel, config.maxLevel])
+ .range([0, 1]);
+
+ this.angleScale = d3$1.scaleLinear()
+ .domain([config.minLevel, config.maxLevel])
+ .range([90 + config.minAngle, 90 + config.maxAngle]);
+
+ this.scaleMarks = this.scale.ticks(config.ticks);
+
+ this.range = config.maxAngle - config.minAngle;
+
+ this.arc = d3$1.arc()
+ .innerRadius(this.r - config.ringWidth - config.ringMargin)
+ .outerRadius(this.r - config.ringMargin)
+ .startAngle(function (d, i) {
+ var ratio = d * i;
+ return deg2rad(config.minAngle + (ratio * this$1.range));
+ })
+ .endAngle(function (d, i) {
+ var ratio = d * (i + 1);
+ return deg2rad(config.minAngle + (ratio * this$1.range));
+ });
- render(svg, config) {
- // Update the needle
- this.needle = svg.append('path')
- .attr('class', 'needle')
- .datum(0)
- .attr('transform', (d) => `translate(${this.r}, ${this.r}) rotate(${this.angleScale(d) - 90})`)
- .attr('d', `M ${0 - config.needleNutRadius} ${0} L ${0} ${0 - this.needleLen} L ${config.needleNutRadius} ${0}`)
- .style('fill', '#666666');
-
- // Append needle nut
- svg.append('circle')
- .attr('class', 'needle')
- .attr('transform', this.translation)
- .attr('cx', 0)
- .attr('cy', 0)
- .attr('r', config.needleNutRadius)
- .style('fill', '#666666');
- }
+ this.tickData = d3$1.range(config.ticks)
+ .map(function () { return 1 / config.ticks; });
+};
-}
+DialNeedle.prototype.update = function update (svg, config, data, method) {
+ var this$1 = this;
-class TextIndicator { // TODO tidy
- constructor(config) {
- if (config === null) {
- throw new Error('No chart context specified for polarAxis');
- }
+ var datum = data[data.length - 1];
- this.translation = config.textIndicatorTranslation;
- }
+ this.needle
+ .transition()
+ .attr('transform', function (d) { return ("translate(" + (this$1.r) + ", " + (this$1.r) + ") rotate(" + (this$1.angleScale(datum.value) - 90) + ")"); })
+ .attr('d', ("M " + (0 - config.needleNutRadius) + " " + (0) + " L " + (0) + " " + (0 - this.needleLen) + " L " + (config.needleNutRadius) + " " + (0)));
+};
- update(svg, value, label) {
- svg.select('.value')
- .text(value);
- svg.select('.label')
- .text(label);
+DialNeedle.prototype.render = function render (svg, config) {
+ var this$1 = this;
+
+ // Update the needle
+ this.needle = svg.append('path')
+ .attr('class', 'needle')
+ .datum(0)
+ .attr('transform', function (d) { return ("translate(" + (this$1.r) + ", " + (this$1.r) + ") rotate(" + (this$1.angleScale(d) - 90) + ")"); })
+ .attr('d', ("M " + (0 - config.needleNutRadius) + " " + (0) + " L " + (0) + " " + (0 - this.needleLen) + " L " + (config.needleNutRadius) + " " + (0)))
+ .style('fill', '#666666');
+
+ // Append needle nut
+ svg.append('circle')
+ .attr('class', 'needle')
+ .attr('transform', this.translation)
+ .attr('cx', 0)
+ .attr('cy', 0)
+ .attr('r', config.needleNutRadius)
+ .style('fill', '#666666');
+};
+
+var TextIndicator = function TextIndicator(config) {
+ if (config === null) {
+ throw new Error('No chart context specified for polarAxis');
}
- render(svg, config) {
- let indicator = svg.append('g')
- .attr('class', 'text-indicator')
- .attr('pointer-events', 'none')
- .style('text-anchor', 'middle')
- .style('alignment-baseline', 'central');
+ this.translation = config.textIndicatorTranslation;
+};
- if (this.translation) {
- indicator.attr('transform', this.translation);
- }
+TextIndicator.prototype.update = function update (svg, value, label) {
+ svg.select('.value')
+ .text(value);
+ svg.select('.label')
+ .text(label);
+};
- indicator.append('text')
- .attr('class', 'value')
- .attr('x', 0)
- .attr('y', 0)
- .attr('pointer-events', 'none')
- .text('0')
- .style('font', '48px Montserrat, sans-serif')
- .style('text-anchor', 'middle');
-
- indicator.append('text')
- .attr('class', 'label')
- .attr('x', 0)
- .attr('y', 0)
- .attr('pointer-events', 'none')
- .text('')
- .style('font', '24px Montserrat, sans-serif')
- .style('transform', 'translate(0, 1.5em')
- .style('text-anchor', 'middle');
- }
-}
+TextIndicator.prototype.render = function render (svg, config) {
+ var indicator = svg.append('g')
+ .attr('class', 'text-indicator')
+ .attr('pointer-events', 'none')
+ .style('text-anchor', 'middle')
+ .style('alignment-baseline', 'central');
+
+ if (this.translation) {
+ indicator.attr('transform', this.translation);
+ }
+
+ indicator.append('text')
+ .attr('class', 'value')
+ .attr('x', 0)
+ .attr('y', 0)
+ .attr('pointer-events', 'none')
+ .text('0')
+ .style('font', '48px Montserrat, sans-serif')
+ .style('text-anchor', 'middle');
+
+ indicator.append('text')
+ .attr('class', 'label')
+ .attr('x', 0)
+ .attr('y', 0)
+ .attr('pointer-events', 'none')
+ .text('')
+ .style('font', '24px Montserrat, sans-serif')
+ .style('transform', 'translate(0, 1.5em')
+ .style('text-anchor', 'middle');
+};
-class SvgGaugeStrategy {
- constructor(context) {
- this._loadConfig(context.config);
- this.svgContainer = new SvgContainer(this.config);
- let config = this.config;
+var SvgGaugeStrategy = function SvgGaugeStrategy(context) {
+ this._loadConfig(context.config);
+ this.svgContainer = new SvgContainer(this.config);
+ var config = this.config;
- this.dial = new Dial('linear', config);
- this.needle = new DialNeedle('linear', config);
+ this.dial = new Dial('linear', config);
+ this.needle = new DialNeedle('linear', config);
- this.svgContainer
- .add(this.dial)
- .add(this.needle);
-
- if (config.numericIndicator) {
- let r = (
- (config.width > config.height) ?
- config.height : config.width
- ) / 2;
- let indicatorOffset = r + 75;
- config.textIndicatorTranslation = 'translate(' + r + ',' + indicatorOffset + ')';
- this.textIndicator = new TextIndicator(config);
- this.svgContainer.add(this.textIndicator);
- }
+ this.svgContainer
+ .add(this.dial)
+ .add(this.needle);
+
+ if (config.numericIndicator) {
+ var r = (
+ (config.width > config.height) ?
+ config.height : config.width
+ ) / 2;
+ var indicatorOffset = r + 75;
+ config.textIndicatorTranslation = 'translate(' + r + ',' + indicatorOffset + ')';
+ this.textIndicator = new TextIndicator(config);
+ this.svgContainer.add(this.textIndicator);
}
+};
/**
* Renders a gauge chart based on data object
- * @param {Object} data Data Object. Contains a numeric value.
+ * @param{Object} data Data Object. Contains a numeric value.
*
*/
- draw(data) {
- let datum = data[data.length - 1],
- svg = this.svgContainer.svg,
- config = this.config;
-
- this.needle.update(svg, config, data);
- if (config.numericIndicator) {
- this.textIndicator.update(svg, datum.value, config.label);
- }
+SvgGaugeStrategy.prototype.draw = function draw (data) {
+ var datum = data[data.length - 1],
+ svg = this.svgContainer.svg,
+ config = this.config;
+
+ this.needle.update(svg, config, data);
+ if (config.numericIndicator) {
+ this.textIndicator.update(svg, datum.value, config.label);
}
+};
/**
* This method adds config options to the chart context.
- * @param {Object} config Config object
+ * @param{Object} config Config object
*/
- _loadConfig(config) {
- this.config = {};
- //Selector
- this.config.selector = config.selector || defaults$5.selector;
- //Margins
- this.config.marginTop = config.marginTop || defaults$5.marginTop;
- this.config.marginLeft = config.marginLeft || defaults$5.marginLeft;
- this.config.marginRight = config.marginRight || defaults$5.marginRight;
- this.config.marginBottom = config.marginBottom || defaults$5.marginBottom;
- //Width & height
- this.config.width = config.width ?
- calculateWidth(config.width, this.config.selector) - this.config.marginLeft - this.config.marginRight
- : calculateWidth(defaults$5.width, this.config.selector) - this.config.marginLeft - this.config.marginRight;
- this.config.height = config.height || defaults$5.height;
-
- this.config.colorScale = config.colorScale || defaults$5.colorScale;
- this.config.minLevel = config.minLevel || defaults$5.minLevel;
- this.config.maxLevel = config.maxLevel || defaults$5.maxLevel;
- this.config.minAngle = config.minAngle || defaults$5.minAngle;
- this.config.maxAngle = config.maxAngle || defaults$5.maxAngle;
- this.config.ticks = config.ticks || defaults$5.ticks;
- this.config.ringWidth = config.ringWidth || defaults$5.ringWidth;
- this.config.ringMargin = config.ringMargin || defaults$5.ringMargin;
- this.config.labelInset = config.labelInset || defaults$5.labelInset;
- this.config.needleNutRadius = config.needleNutRadius || defaults$5.needleNutRadius;
- this.config.needleLenghtRatio = config.needleLenghtRatio || defaults$5.needleLenghtRatio;
- this.config.invertColorScale = typeof (config.invertColorScale) === 'undefined' ? defaults$5.invertColorScale : config.invertColorScale;
- this.config.numericIndicator = typeof (config.numericIndicator) === 'undefined' ? defaults$5.numericIndicator : config.numericIndicator;
- this.config.label = config.label || defaults$5.label;
-
-
- return this;
- }
-
-}
+SvgGaugeStrategy.prototype._loadConfig = function _loadConfig (config) {
+ this.config = {};
+ //Selector
+ this.config.selector = config.selector || defaults$5.selector;
+ //Margins
+ this.config.marginTop = config.marginTop || defaults$5.marginTop;
+ this.config.marginLeft = config.marginLeft || defaults$5.marginLeft;
+ this.config.marginRight = config.marginRight || defaults$5.marginRight;
+ this.config.marginBottom = config.marginBottom || defaults$5.marginBottom;
+ //Width & height
+ this.config.width = config.width ?
+ calculateWidth(config.width, this.config.selector) - this.config.marginLeft - this.config.marginRight
+ : calculateWidth(defaults$5.width, this.config.selector) - this.config.marginLeft - this.config.marginRight;
+ this.config.height = config.height || defaults$5.height;
+
+ this.config.colorScale = config.colorScale || defaults$5.colorScale;
+ this.config.minLevel = config.minLevel || defaults$5.minLevel;
+ this.config.maxLevel = config.maxLevel || defaults$5.maxLevel;
+ this.config.minAngle = config.minAngle || defaults$5.minAngle;
+ this.config.maxAngle = config.maxAngle || defaults$5.maxAngle;
+ this.config.ticks = config.ticks || defaults$5.ticks;
+ this.config.ringWidth = config.ringWidth || defaults$5.ringWidth;
+ this.config.ringMargin = config.ringMargin || defaults$5.ringMargin;
+ this.config.labelInset = config.labelInset || defaults$5.labelInset;
+ this.config.needleNutRadius = config.needleNutRadius || defaults$5.needleNutRadius;
+ this.config.needleLenghtRatio = config.needleLenghtRatio || defaults$5.needleLenghtRatio;
+ this.config.invertColorScale = typeof (config.invertColorScale) === 'undefined' ? defaults$5.invertColorScale : config.invertColorScale;
+ this.config.numericIndicator = typeof (config.numericIndicator) === 'undefined' ? defaults$5.numericIndicator : config.numericIndicator;
+ this.config.label = config.label || defaults$5.label;
+
+
+ return this;
+};
-const defaults$6 = {
+var defaults$6 = {
selector: '#chart',
width: '100%', // %, auto, or numeric
height: 250,
@@ -2932,134 +2927,133 @@ const defaults$6 = {
marginLeft: 50,
};
-class Nodeset {
- constructor(config) {
- this.config = config;
- var width = config.width,
- height = config.height;
+var Nodeset = function Nodeset(config) {
+ var this$1 = this;
- this.simulation = d3$1.forceSimulation()
- .force("link", d3$1.forceLink().id((d) => d.id))
- .force("charge", d3$1.forceManyBody())
- .force("center", d3$1.forceCenter(width / 2, height / 2));
+ this.config = config;
+ var width = config.width,
+ height = config.height;
+ this.simulation = d3$1.forceSimulation()
+ .force("link", d3$1.forceLink().id(function (d) { return d.id; }))
+ .force("charge", d3$1.forceManyBody())
+ .force("center", d3$1.forceCenter(width / 2, height / 2));
- this.dragstarted = (d) => {
- if (!d3$1.event.active) this.simulation.alphaTarget(0.3).restart();
- d.fx = d.x;
- d.fy = d.y;
- };
- this.dragged = (d) => {
- d.fx = d3$1.event.x;
- d.fy = d3$1.event.y;
- };
+ this.dragstarted = function (d) {
+ if (!d3$1.event.active) { this$1.simulation.alphaTarget(0.3).restart(); }
+ d.fx = d.x;
+ d.fy = d.y;
+ };
- this.dragended = (d) => {
- if (!d3$1.event.active) this.simulation.alphaTarget(0);
- d.fx = null;
- d.fy = null;
- };
-
- }
+ this.dragged = function (d) {
+ d.fx = d3$1.event.x;
+ d.fy = d3$1.event.y;
+ };
- update(svg, config, data) {
- data = simple2Linked(data);
-
- var link = svg.append("g")
- .attr("class", "links")
- .selectAll("line")
- .data(data.links)
- .enter().append("line")
- .attr("stroke-width", 2)
- .attr("stroke", "#999")
- .attr("stroke-opacity", 0.6);
-
- var node = svg.append("g")
- .attr("class", "nodes")
- .selectAll("circle")
- .data(data.nodes)
- .enter()
- .append("circle")
- .attr("r", 5)
- .attr("fill", (d) => "#23436f")
- .call(d3$1.drag()
- .on("start", this.dragstarted)
- .on("drag", this.dragged)
- .on("end", this.dragended));
+ this.dragended = function (d) {
+ if (!d3$1.event.active) { this$1.simulation.alphaTarget(0); }
+ d.fx = null;
+ d.fy = null;
+ };
- node.append("title")
- .text((d) => d.id);
-
- this.simulation.nodes(data.nodes).on("tick", (e) => this.ticked(link, node));
-
- this.simulation.force("link").links(data.links);
- }
+};
- ticked(link, node) {
- link
- .attr("x1", (d) => d.source.x)
- .attr("y1", (d) => d.source.y)
- .attr("x2", (d) => d.target.x)
- .attr("y2", (d) => d.target.y);
+Nodeset.prototype.update = function update (svg, config, data) {
+ var this$1 = this;
+
+ data = simple2Linked(data);
+
+ var link = svg.append("g")
+ .attr("class", "links")
+ .selectAll("line")
+ .data(data.links)
+ .enter().append("line")
+ .attr("stroke-width", 2)
+ .attr("stroke", "#999")
+ .attr("stroke-opacity", 0.6);
+
+ var node = svg.append("g")
+ .attr("class", "nodes")
+ .selectAll("circle")
+ .data(data.nodes)
+ .enter()
+ .append("circle")
+ .attr("r", 5)
+ .attr("fill", function (d) { return "#23436f"; })
+ .call(d3$1.drag()
+ .on("start", this.dragstarted)
+ .on("drag", this.dragged)
+ .on("end", this.dragended));
+
+ node.append("title")
+ .text(function (d) { return d.id; });
+
+ this.simulation.nodes(data.nodes).on("tick", function (e) { return this$1.ticked(link, node); });
+
+ this.simulation.force("link").links(data.links);
+};
- node
- .attr("cx", (d) => d.x)
- .attr("cy", (d) => d.y);
- }
+Nodeset.prototype.ticked = function ticked (link, node) {
+ link
+ .attr("x1", function (d) { return d.source.x; })
+ .attr("y1", function (d) { return d.source.y; })
+ .attr("x2", function (d) { return d.target.x; })
+ .attr("y2", function (d) { return d.target.y; });
- render(svg, config) {
- //Do nothing, since lines render only when new data is received.
- }
-}
+ node
+ .attr("cx", function (d) { return d.x; })
+ .attr("cy", function (d) { return d.y; });
+};
-class SvgNetworkgraphStrategy {
+Nodeset.prototype.render = function render (svg, config) {
+ //Do nothing, since lines render only when new data is received.
+};
- constructor(context) {
- this._loadConfig(context.config);
+var SvgNetworkgraphStrategy = function SvgNetworkgraphStrategy(context) {
+ this._loadConfig(context.config);
- this.svgContainer = new SvgContainer(this.config);
+ this.svgContainer = new SvgContainer(this.config);
- this.nodeset = new Nodeset(this.config);
+ this.nodeset = new Nodeset(this.config);
- //Include components in the chart container
- this.svgContainer
- .add(this.nodeset);
- }
+ //Include components in the chart container
+ this.svgContainer
+ .add(this.nodeset);
+};
/**
* Renders a linechart based on data object
- * @param {Object} data Data Object. Contains an array with x and y properties.
+ * @param{Object} data Data Object. Contains an array with x and y properties.
*
*/
- draw(data) {
- let svg = this.svgContainer.svg,
- config = this.config;
-
- this.nodeset.update(svg, config, data);
- }
+SvgNetworkgraphStrategy.prototype.draw = function draw (data) {
+ var svg = this.svgContainer.svg,
+ config = this.config;
- /**
- * This method adds config options to the chart context.
- * @param {Object} config Config object
- */
- _loadConfig(config) {
- this.config = {};
- this.config.selector = config.selector || defaults$6.selector;
- //Margins
- this.config.marginTop = config.marginTop || defaults$6.marginTop;
- this.config.marginLeft = config.marginLeft || defaults$6.marginLeft;
- this.config.marginRight = config.marginRight || defaults$6.marginRight;
- this.config.marginBottom = config.marginBottom || defaults$6.marginBottom;
- this.config.width = config.width ? calculateWidth(config.width, this.config.selector) - this.config.marginLeft - this.config.marginRight
- : calculateWidth(defaults$6.width, this.config.selector) - this.config.marginLeft - this.config.marginRight;
- this.config.height = config.height || defaults$6.height;
+ this.nodeset.update(svg, config, data);
+};
- return this;
- }
-}
+/**
+ * This method adds config options to the chart context.
+ * @param{Object} config Config object
+ */
+SvgNetworkgraphStrategy.prototype._loadConfig = function _loadConfig (config) {
+ this.config = {};
+ this.config.selector = config.selector || defaults$6.selector;
+ //Margins
+ this.config.marginTop = config.marginTop || defaults$6.marginTop;
+ this.config.marginLeft = config.marginLeft || defaults$6.marginLeft;
+ this.config.marginRight = config.marginRight || defaults$6.marginRight;
+ this.config.marginBottom = config.marginBottom || defaults$6.marginBottom;
+ this.config.width = config.width ? calculateWidth(config.width, this.config.selector) - this.config.marginLeft - this.config.marginRight
+ : calculateWidth(defaults$6.width, this.config.selector) - this.config.marginLeft - this.config.marginRight;
+ this.config.height = config.height || defaults$6.height;
+
+ return this;
+};
-const defaults$7 = {
+var defaults$7 = {
selector: '#chart',
colorScale: category8(),
marginTop: 20,
@@ -3076,225 +3070,216 @@ const defaults$7 = {
prop: 'x'
},
//Events
- onDown(d) {
+ onDown: function onDown(d) {
},
- onHover(d) {
+ onHover: function onHover(d) {
},
- onLeave(d) {
+ onLeave: function onLeave(d) {
},
- onClick(d) {
+ onClick: function onClick(d) {
}
};
-class XRadialAxis {
+var XRadialAxis = function XRadialAxis(config) {
+ if (config === null) {
+ throw new Error('No chart context specified for XRadialAxis');
+ }
+
+ this.xRadialAxis = d3$1.scaleLinear().range([0, 2 * Math.PI]);
+};
+
+var YRadialAxis = function YRadialAxis(config) {
+ if (config === null) {
+ throw new Error('No chart context specified for XRadialAxis');
+ }
+
+ var radius = (Math.min(config.width, config.height) / 2) - 10;
- constructor(config) {
- if (config === null) {
- throw new Error('No chart context specified for XRadialAxis');
- }
+ this.yRadialAxis = d3$1.scaleSqrt()
+ .range([0, radius]);
+};
- this.xRadialAxis = d3$1.scaleLinear().range([0, 2 * Math.PI]);
+//
+var RadialAxes = function RadialAxes(config) {
+ if (config === null) {
+ throw new Error('No chart context specified for RadialAxis');
}
-}
-class YRadialAxis {
+ this.x = new XRadialAxis(config);
+ this.y = new YRadialAxis(config);
+};
- constructor(config) {
- if (config === null) {
- throw new Error('No chart context specified for XRadialAxis');
- }
+var SunburstDisk = function SunburstDisk(xRadialAxis, yRadialAxis) {
+ var this$1 = this;
- let radius = (Math.min(config.width, config.height) / 2) - 10;
+ this.x = xRadialAxis;
+ this.y = yRadialAxis;
+ this.arcGen = d3$1.arc()
+ .startAngle(function (d) { return Math.max(0, Math.min(2 * Math.PI, this$1.x(d.x0))); })
+ .endAngle(function (d) { return Math.max(0, Math.min(2 * Math.PI, this$1.x(d.x1))); })
+ .innerRadius(function (d) { return Math.max(0, this$1.y(d.y0)); })
+ .outerRadius(function (d) { return Math.max(0, this$1.y(d.y1)); });
+};
+
+SunburstDisk.prototype.update = function update (svg, config, data) {
+ var this$1 = this;
- this.yRadialAxis = d3$1.scaleSqrt()
- .range([0, radius]);
- }
-}
-//
-class RadialAxes {
- constructor(config) {
- if (config === null) {
- throw new Error('No chart context specified for RadialAxis');
- }
+ // Remove all the paths before redrawing
+ this._removePaths(svg);
- this.x = new XRadialAxis(config);
- this.y = new YRadialAxis(config);
- }
-}
+ // Create layout partition
+ var root = d3$1.stratify()
+ .id(function (d) { return d.id; })
+ .parentId(function (d) { return d.parent; })
+ (data);
-class SunburstDisk {
- constructor(xRadialAxis, yRadialAxis) {
- this.x = xRadialAxis;
- this.y = yRadialAxis;
- this.arcGen = d3$1.arc()
- .startAngle((d) => Math.max(0, Math.min(2 * Math.PI, this.x(d.x0))))
- .endAngle((d) => Math.max(0, Math.min(2 * Math.PI, this.x(d.x1))))
- .innerRadius((d) => Math.max(0, this.y(d.y0)))
- .outerRadius((d) => Math.max(0, this.y(d.y1)));
- }
+ root.sum(function (d) { return d.value; });
+ d3$1.partition()(root);
- update(svg, config, data) {
-
- // Remove all the paths before redrawing
- this._removePaths(svg);
-
- // Create layout partition
- let root = d3$1.stratify()
- .id((d) => d.id)
- .parentId((d) => d.parent)
- (data);
-
- root.sum((d) => d.value);
- d3$1.partition()(root);
-
- // Draw the paths (arcs)
- let paths = svg.selectAll('path')
- .data(root.descendants())
- .enter().append('path')
- .attr('d', this.arcGen)
- .style('fill', (d) => {
- if (!d.parent) {
- return 'white';
- } else {
- return config.colorScale(d.data.label);
+ // Draw the paths (arcs)
+ var paths = svg.selectAll('path')
+ .data(root.descendants())
+ .enter().append('path')
+ .attr('d', this.arcGen)
+ .style('fill', function (d) {
+ if (!d.parent) {
+ return 'white';
+ } else {
+ return config.colorScale(d.data.label);
+ }
+ })
+ .style('stroke', '#fff')
+ .style('stroke-width', '2')
+ .style('shape-rendering', 'crispEdge');
+
+ paths // TODO extract events to config?
+ .on('mouseover.default', function (d) {
+ var ancestors = this$1._getAncestors(d);
+ // Fade all the arcs
+ if (ancestors.length > 0) {
+ svg.selectAll('path')
+ .style('opacity', 0.3);
}
+ svg.selectAll('path')
+ .filter(function (node) { return ancestors.indexOf(node) >= 0; })
+ .style('opacity', 1);
+ // Hightlight the hovered arc
+ svg.select('.text-indicator .label').text(d.data.label);
+ svg.select('.text-indicator .value').text(d.value);
})
- .style('stroke', '#fff')
- .style('stroke-width', '2')
- .style('shape-rendering', 'crispEdge');
-
- paths // TODO extract events to config?
- .on('mouseover.default', (d) => {
- let ancestors = this._getAncestors(d);
- // Fade all the arcs
- if (ancestors.length > 0) {
- svg.selectAll('path')
- .style('opacity', 0.3);
- }
- svg.selectAll('path')
- .filter((node) => ancestors.indexOf(node) >= 0)
- .style('opacity', 1);
- // Hightlight the hovered arc
- svg.select('.text-indicator .label').text(d.data.label);
- svg.select('.text-indicator .value').text(d.value);
- })
- .on('mouseout.default', (d) => {
- svg.selectAll('path').style('opacity', 1);
- svg.select('.text-indicator .label').style('font-weight', 'normal');
- svg.select('.text-indicator .label').text('');
- svg.select('.text-indicator .value').text('');
- })
- ;
-
- paths
- .on('mousedown.user', config.onDown)
- .on('mouseup.user', config.onUp)
- .on('mouseleave.user', config.onLeave)
- .on('mouseover.user', config.onHover)
- .on('click.user', config.onClick);
-
- // ???
- svg.select(self.frameElement).style('height', this.height + 'px');
- }
+ .on('mouseout.default', function (d) {
+ svg.selectAll('path').style('opacity', 1);
+ svg.select('.text-indicator .label').style('font-weight', 'normal');
+ svg.select('.text-indicator .label').text('');
+ svg.select('.text-indicator .value').text('');
+ })
+ ;
- /**
- * Removes all the paths (arcs). Doing this before each redraw prevents the
- * transition to mess up the arcs.
- * @private
- */
- _removePaths(svg) {
- svg.selectAll('path').remove();
- }
+ paths
+ .on('mousedown.user', config.onDown)
+ .on('mouseup.user', config.onUp)
+ .on('mouseleave.user', config.onLeave)
+ .on('mouseover.user', config.onHover)
+ .on('click.user', config.onClick);
- /**
- * From: http://bl.ocks.org/kerryrodden/7090426
- * @param node
- * @returns {Array}
- * @private
- */
- _getAncestors(node) {
- let path = [];
- let current = node;
- while (current.parent) {
- path.unshift(current);
- current = current.parent;
- }
- return path;
- }
+ // ???
+ svg.select(self.frameElement).style('height', this.height + 'px');
+};
- render(svg, config) {
- //Do nothing, since disk render only when new data is received.
- }
-}
+/**
+ * Removes all the paths (arcs). Doing this before each redraw prevents the
+ * transition to mess up the arcs.
+ * @private
+ */
+SunburstDisk.prototype._removePaths = function _removePaths (svg) {
+ svg.selectAll('path').remove();
+};
-class SvgSunburstStrategy {
+/**
+ * From: http://bl.ocks.org/kerryrodden/7090426
+ * @param node
+ * @returns {Array}
+ * @private
+ */
+SunburstDisk.prototype._getAncestors = function _getAncestors (node) {
+ var path = [];
+ var current = node;
+ while (current.parent) {
+ path.unshift(current);
+ current = current.parent;
+ }
+ return path;
+};
- constructor(context) {
- this._loadConfig(context.config);
+SunburstDisk.prototype.render = function render (svg, config) {
+ //Do nothing, since disk render only when new data is received.
+};
- this.svgContainer = new SvgContainer(this.config);
- let config =
- this.config,
- translation = 'translate(' + config.width / 2 + ',' + (config.height / 2) + ')';
+var SvgSunburstStrategy = function SvgSunburstStrategy(context) {
+ this._loadConfig(context.config);
- this.svgContainer.transform(translation);
+ this.svgContainer = new SvgContainer(this.config);
+ var config =
+ this.config,
+ translation = 'translate(' + config.width / 2 + ',' + (config.height / 2) + ')';
- this.axes = new RadialAxes(config);
+ this.svgContainer.transform(translation);
- this.disk = new SunburstDisk(
- this.axes.x.xRadialAxis,
- this.axes.y.yRadialAxis,
- config
- );
+ this.axes = new RadialAxes(config);
- this.textIndicator = new TextIndicator(config);
+ this.disk = new SunburstDisk(
+ this.axes.x.xRadialAxis,
+ this.axes.y.yRadialAxis,
+ config
+ );
- this.svgContainer
- .add(this.disk)
- .add(this.textIndicator);
- }
+ this.textIndicator = new TextIndicator(config);
- draw(data) {
- let svg = this.svgContainer.svg,
- config = this.config;
+ this.svgContainer
+ .add(this.disk)
+ .add(this.textIndicator);
+};
- this.disk.update(svg, config, data);
- }
+SvgSunburstStrategy.prototype.draw = function draw (data) {
+ var svg = this.svgContainer.svg,
+ config = this.config;
- /**
- * This method adds config options to the chart context.
- * @param {Object} config Config object
- */
- _loadConfig(config) {
- this.config = {};
- //Selector
- this.config.selector = config.selector || defaults$7.selector;
- //Margins
- this.config.marginTop = config.marginTop || defaults$7.marginTop;
- this.config.marginLeft = config.marginLeft || defaults$7.marginLeft;
- this.config.marginRight = config.marginRight || defaults$7.marginRight;
- this.config.marginBottom = config.marginBottom || defaults$7.marginBottom;
- //Width & height
- this.config.width = config.width ?
- calculateWidth(config.width, this.config.selector) - this.config.marginLeft - this.config.marginRight
- : calculateWidth(defaults$7.width, this.config.selector) - this.config.marginLeft - this.config.marginRight;
- this.config.height = config.height || defaults$7.height;
+ this.disk.update(svg, config, data);
+};
+
+/**
+ * This method adds config options to the chart context.
+ * @param{Object} config Config object
+ */
+SvgSunburstStrategy.prototype._loadConfig = function _loadConfig (config) {
+ this.config = {};
+ //Selector
+ this.config.selector = config.selector || defaults$7.selector;
+ //Margins
+ this.config.marginTop = config.marginTop || defaults$7.marginTop;
+ this.config.marginLeft = config.marginLeft || defaults$7.marginLeft;
+ this.config.marginRight = config.marginRight || defaults$7.marginRight;
+ this.config.marginBottom = config.marginBottom || defaults$7.marginBottom;
+ //Width & height
+ this.config.width = config.width ?
+ calculateWidth(config.width, this.config.selector) - this.config.marginLeft - this.config.marginRight
+ : calculateWidth(defaults$7.width, this.config.selector) - this.config.marginLeft - this.config.marginRight;
+ this.config.height = config.height || defaults$7.height;
- this.config.colorScale = config.colorScale || defaults$7.colorScale;
+ this.config.colorScale = config.colorScale || defaults$7.colorScale;
- //Events
- this.config.onDown = config.onDown || defaults$7.onDown;
- this.config.onUp = config.onUp || defaults$7.onUp;
- this.config.onHover = config.onHover || defaults$7.onHover;
- this.config.onClick = config.onClick || defaults$7.onClick;
- this.config.onLeave = config.onLeave || defaults$7.onLeave;
+ //Events
+ this.config.onDown = config.onDown || defaults$7.onDown;
+ this.config.onUp = config.onUp || defaults$7.onUp;
+ this.config.onHover = config.onHover || defaults$7.onHover;
+ this.config.onClick = config.onClick || defaults$7.onClick;
+ this.config.onLeave = config.onLeave || defaults$7.onLeave;
- return this;
- }
-}
+ return this;
+};
-const defaults$8 = {
+var defaults$8 = {
selector: '#chart',
colorScale: category7(),
@@ -3317,22 +3302,21 @@ const defaults$8 = {
width: '100%', // %, auto, or numeric
height: 250,
//Events
- onDown(d) {
+ onDown: function onDown(d) {
},
- onHover(d) {
+ onHover: function onHover(d) {
},
- onLeave(d) {
+ onLeave: function onLeave(d) {
},
- onClick(d) {
+ onClick: function onClick(d) {
},
maxNumberOfElements: 100, // used by keepDrawing method to reduce the number of elements in the current chart
};
-class SvgScatterplotStrategy extends SvgAxis {
-
- constructor(context) {
- super(context);
+var SvgScatterplotStrategy = (function (SvgAxis$$1) {
+ function SvgScatterplotStrategy(context) {
+ SvgAxis$$1.call(this, context);
this.axes = new XYAxes(this.config.xAxisType, 'linear', this.config);
this.points = new Pointset(this.axes.x, this.axes.y);
this.legend = new Legend();
@@ -3343,13 +3327,17 @@ class SvgScatterplotStrategy extends SvgAxis {
.add(this.points);
}
+ if ( SvgAxis$$1 ) SvgScatterplotStrategy.__proto__ = SvgAxis$$1;
+ SvgScatterplotStrategy.prototype = Object.create( SvgAxis$$1 && SvgAxis$$1.prototype );
+ SvgScatterplotStrategy.prototype.constructor = SvgScatterplotStrategy;
+
/**
* Renders a scatterplot based on data object
* @param {Object} data Data Object. Contains an array with x and y properties.
*
*/
- draw(data) {
- let svg = this.svgContainer.svg,
+ SvgScatterplotStrategy.prototype.draw = function draw (data) {
+ var svg = this.svgContainer.svg,
config = this.config,
needRescaling = this.config.needRescaling,
bbox = null;
@@ -3377,29 +3365,29 @@ class SvgScatterplotStrategy extends SvgAxis {
// Update points
this.points.update(svg, config, data);
- }
+ };
- _getDomainBBox(data) {
- var minX = d3$1.min(data, (d) => d.x),
- maxX = d3$1.max(data, (d) => d.x),
- minY = d3$1.min(data, (d) => d.y),
- maxY = d3$1.max(data, (d) => d.y);
+ SvgScatterplotStrategy.prototype._getDomainBBox = function _getDomainBBox (data) {
+ var minX = d3$1.min(data, function (d) { return d.x; }),
+ maxX = d3$1.max(data, function (d) { return d.x; }),
+ minY = d3$1.min(data, function (d) { return d.y; }),
+ maxY = d3$1.max(data, function (d) { return d.y; });
return [minX, maxX, minY, maxY];
- }
+ };
- _checkMarkers(config) {
+ SvgScatterplotStrategy.prototype._checkMarkers = function _checkMarkers (config) {
return config.markerSize > 0;
- }
- _checkArea(config) {
+ };
+ SvgScatterplotStrategy.prototype._checkArea = function _checkArea (config) {
return config.areaOpacity > 0;
- }
+ };
/**
* This method adds config options to the chart context.
* @param {Object} config Config object
*/
- _loadConfig(config) {
- super._loadConfig(config, defaults$8);
+ SvgScatterplotStrategy.prototype._loadConfig = function _loadConfig (config) {
+ SvgAxis$$1.prototype._loadConfig.call(this, config, defaults$8);
//Markers
this.config.markerOutlineWidth = config.markerOutlineWidth || defaults$8.markerOutlineWidth;
this.config.markerShape = config.markerShape || defaults$8.markerShape;
@@ -3407,63 +3395,63 @@ class SvgScatterplotStrategy extends SvgAxis {
//Area
this.config.areaOpacity = (typeof config.areaOpacity === 'undefined' || config.markerSize < 0) ? defaults$8.areaOpacity : config.areaOpacity;
return this;
- }
-}
+ };
+
+ return SvgScatterplotStrategy;
+}(SvgAxis));
/**
* SvgStrategy wrapper class
*/
-class SvgStrategy {
- constructor(strategy) {
- this.strategy = strategy;
- }
- draw(data) {
- this.strategy.draw(data);
- }
- on(events){
- this.strategy.on(events);
- }
-}
-
-const strategies = {
- Barchart(chartContext) {
+var SvgStrategy = function SvgStrategy(strategy) {
+ this.strategy = strategy;
+ };
+ SvgStrategy.prototype.draw = function draw (data) {
+ this.strategy.draw(data);
+ };
+ SvgStrategy.prototype.on = function on (events){
+ this.strategy.on(events);
+ };
+
+var strategies = {
+ Barchart: function Barchart(chartContext) {
return new SvgBarchartStrategy(chartContext);
},
- Linechart(chartContext) {
+ Linechart: function Linechart(chartContext) {
return new SvgLinechartStrategy(chartContext);
},
- Streamgraph(chartContext) {
+ Streamgraph: function Streamgraph(chartContext) {
return new SvgStreamgraphStrategy(chartContext);
},
- Gauge(chartContext) {
+ Gauge: function Gauge(chartContext) {
return new SvgGaugeStrategy(chartContext);
},
- Scatterplot(chartContext) {
+ Scatterplot: function Scatterplot(chartContext) {
return new SvgScatterplotStrategy(chartContext);
},
- Sunburst(chartContext) {
+ Sunburst: function Sunburst(chartContext) {
return new SvgSunburstStrategy(chartContext);
},
- Swimlane(chartContext) {
+ Swimlane: function Swimlane(chartContext) {
return new SvgSwimlaneStrategy(chartContext);
},
- StackedArea(chartContext) {
+ StackedArea: function StackedArea(chartContext) {
return new SvgStackedAreaStrategy(chartContext);
},
- Networkgraph(chartContext) {
+ Networkgraph: function Networkgraph(chartContext) {
return new SvgNetworkgraphStrategy(chartContext);
}
};
-const doctype = '';
+var doctype = '';
function isExternal(url) {
return url && url.lastIndexOf('http', 0) === 0 && url.lastIndexOf(window.location.host) === -1;
}
function inlineImages(el, callback) {
- let images = el.querySelectorAll('image');
- let left = images.length;
+ var images = el.querySelectorAll('image');
+ var left = images.length;
if (left === 0) {
callback();
}
@@ -3476,9 +3464,9 @@ function inlineImages(el, callback) {
return;
}
}
- let canvas = window.document.createElement('canvas');
- let ctx = canvas.getContext('2d');
- let img = new window.Image();
+ var canvas = window.document.createElement('canvas');
+ var ctx = canvas.getContext('2d');
+ var img = new window.Image();
href = href || image.getAttribute('href');
img.src = href;
img.onload = function () {
@@ -3503,19 +3491,19 @@ function inlineImages(el, callback) {
}
function styles(el, selectorRemap) {
- let css = '';
- let sheets = document.styleSheets;
+ var css = '';
+ var sheets = document.styleSheets;
for (var i = 0; i < sheets.length; i++) {
if (isExternal(sheets[i].href)) {
window.console.warn('Cannot include styles from other hosts: ' + sheets[i].href);
continue;
}
- let rules = sheets[i].cssRules;
+ var rules = sheets[i].cssRules;
if (rules !== null) {
for (var j = 0; j < rules.length; j++) {
- let rule = rules[j];
+ var rule = rules[j];
if (typeof (rule.style) !== 'undefined') {
- let match = null;
+ var match = null;
try {
match = el.querySelector(rule.selectorText);
} catch (err) {
@@ -3547,14 +3535,14 @@ function svgAsDataUri(el, options, cb) {
width = parseInt(clone.getAttribute('width') || clone.style.width || getComputedStyle(el).getPropertyValue('width'));
height = parseInt(clone.getAttribute('height') || clone.style.height || getComputedStyle(el).getPropertyValue('height'));
} else {
- let box = el.getBBox();
+ var box = el.getBBox();
width = box.x + box.width;
height = box.y + box.height;
clone.setAttribute('transform', clone.getAttribute('transform').replace(/translate\(.*?\)/, ''));
- let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
- svg.appendChild(clone);
- clone = svg;
+ var svg$1 = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ svg$1.appendChild(clone);
+ clone = svg$1;
}
clone.setAttribute('version', '1.1');
@@ -3565,16 +3553,16 @@ function svgAsDataUri(el, options, cb) {
clone.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
outer.appendChild(clone);
- let css = styles(el, options.selectorRemap);
- let s = document.createElement('style');
+ var css = styles(el, options.selectorRemap);
+ var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.innerHTML = '';
- let defs = document.createElement('defs');
+ var defs = document.createElement('defs');
defs.appendChild(s);
clone.insertBefore(defs, clone.firstChild);
- let svg = doctype + outer.innerHTML;
- let uri = 'data:image/svg+xml;base64,' + window.btoa(window.unescape(encodeURIComponent(svg)));
+ var svg = doctype + outer.innerHTML;
+ var uri = 'data:image/svg+xml;base64,' + window.btoa(window.unescape(encodeURIComponent(svg)));
if (cb) {
cb(uri);
}
@@ -3586,262 +3574,248 @@ function svgAsDataUri(el, options, cb) {
* @export Chart
* @class Chart
*/
-class Chart {
- /**
- * Non-instanciable Chart. This is the parent class for all the ones (Linechart, Barchart, etc.)
- *
- * @param {any} d Data. This object could be an array of data points or a datasource. Examples:
- *
- * //With datasource
- * var data = {
- * endpoint: 'ws://192.168.3.32:3000/barchart'
- * };
- * var dataSource = new proteic.WebsocketDatasource(data);
- *
- * barchart = new proteic.Barchart(dataSource);
- *
- * //With data
- * barchart = new proteic.Barchart([{x:"SP", y:2},{x:"FR", y:6}]);
- *
- * @param {any} config Configuration of the chart.
- *
- * @memberOf Chart
- */
- constructor(d, config) {
- var clazz = this.constructor.name;
- if (clazz === 'Chart') {
- throw new Error(clazz + ' is non-instanciable');
- }
+var Chart = function Chart(d, config) {
+ var clazz = this.constructor.name;
+ if (clazz === 'Chart') {
+ throw new Error(clazz + ' is non-instanciable');
+ }
- this.events = {};
+ this.events = {};
- if (!d && !config) {
- throw new Error('Missing constructor parameters');
- }
+ if (!d && !config) {
+ throw new Error('Missing constructor parameters');
+ }
- let dataFormat = d.constructor.name;
- let nArguments = (d && config) ? 2 : 1;
-
- switch (dataFormat) {
- case 'WebsocketDatasource':
- case 'HTTPDatasource':
- this.datasource = d;
- this.data = [];
- this._configureDatasource();
- break;
- case 'Array':
- this.data = d;
- break;
- default:
- throw TypeError('Wrong data format');
- }
- //if only 1 parameter is specified, take default config. Else, take the second argument as config.
- this.config = (nArguments === 1) ? {} : config;
+ var dataFormat = d.constructor.name;
+ var nArguments = (d && config) ? 2 : 1;
- this._initializeSVGContext();
+ switch (dataFormat) {
+ case 'WebsocketDatasource':
+ case 'HTTPDatasource':
+ this.datasource = d;
+ this.data = [];
+ this._configureDatasource();
+ break;
+ case 'Array':
+ this.data = d;
+ break;
+ default:
+ throw TypeError('Wrong data format');
}
+ //if only 1 parameter is specified, take default config. Else, take the second argument as config.
+ this.config = (nArguments === 1) ? {} : config;
- /**
- * Private method. Initialize the API by dinamically creating methods. It creates N method, one per configuration option
- *
- * @param {any} properties An array that contains the name of the methods
- *
- * @memberOf Chart
- */
- _initializeAPI(properties) {
- let clazz = this.constructor;
- properties.forEach((method) => {
- clazz.prototype[method] = function (value) {
- return this.change(method, value);
- };
- });
- }
+ this._initializeSVGContext();
+};
- /**
- * Return the chart context: data, configuration and type
- *
- * @returns chart Chart context
- *
- * @memberOf Chart
- */
- _getChartContext() {
- return {
- data: this.data,
- config: this.config,
- cType: this.constructor.name
+/**
+ * Private method. Initialize the API by dinamically creating methods. It creates N method, one per configuration option
+ *
+ * @param {any} properties An array that contains the name of the methods
+ *
+ * @memberOf Chart
+ */
+Chart.prototype._initializeAPI = function _initializeAPI (properties) {
+ var clazz = this.constructor;
+ properties.forEach(function (method) {
+ clazz.prototype[method] = function (value) {
+ return this.change(method, value);
};
- }
+ });
+};
- /**
- * Initialize the SVG context, by dinamically creating an