From 55c8b6861fd45b6baa7d66499d8ea430bfa90fab Mon Sep 17 00:00:00 2001 From: Prateeksha Singh Date: Fri, 16 Feb 2018 15:32:55 +0530 Subject: [PATCH] [major] regions, markers, tooltips, unit control --- dist/frappe-charts.esm.js | 898 +++++++++++++++++-------- dist/frappe-charts.min.cjs.js | 2 +- dist/frappe-charts.min.esm.js | 2 +- dist/frappe-charts.min.iife.js | 2 +- docs/assets/js/frappe-charts.min.js | 2 +- docs/assets/js/index.js | 57 +- docs/index.html | 4 +- src/js/chart.js | 22 +- src/js/charts/AxisChart.js | 355 ++++++++-- src/js/charts/BarChart.js | 83 --- src/js/charts/LineChart.js | 81 --- src/js/charts/MultiAxisChart.js | 9 +- src/js/objects/AxisChartControllers.js | 215 ++++++ src/js/utils/draw-utils.js | 2 +- src/js/utils/draw.js | 151 +++-- 15 files changed, 1294 insertions(+), 591 deletions(-) delete mode 100644 src/js/charts/BarChart.js create mode 100644 src/js/objects/AxisChartControllers.js diff --git a/dist/frappe-charts.esm.js b/dist/frappe-charts.esm.js index 959c199..ab4695c 100644 --- a/dist/frappe-charts.esm.js +++ b/dist/frappe-charts.esm.js @@ -1,20 +1,20 @@ -function $(expr, con) { +function $$1(expr, con) { return typeof expr === "string"? (con || document).querySelector(expr) : expr || null; } -$.create = (tag, o) => { +$$1.create = (tag, o) => { var element = document.createElement(tag); for (var i in o) { var val = o[i]; if (i === "inside") { - $(val).appendChild(element); + $$1(val).appendChild(element); } else if (i === "around") { - var ref = $(val); + var ref = $$1(val); ref.parentNode.insertBefore(element, ref); element.appendChild(ref); @@ -98,7 +98,7 @@ class SvgTip { } make_tooltip() { - this.container = $.create('div', { + this.container = $$1.create('div', { inside: this.parent, className: 'graph-svg-tip comparison', innerHTML: ` @@ -128,7 +128,7 @@ class SvgTip { this.list_values.map((set, i) => { const color = this.colors[i] || 'black'; - let li = $.create('li', { + let li = $$1.create('li', { styles: { 'border-top': `3px solid ${color}` }, @@ -228,6 +228,9 @@ function fillArray(array, count, element, start=false) { * @param {String} string * @param {Number} charWidth Width of single char in pixels */ +function getStringWidth(string, charWidth) { + return (string+"").length * charWidth; +} const MIN_BAR_PERCENT_HEIGHT = 0.01; @@ -273,7 +276,7 @@ function equilizeNoOfElements(array1, array2, // return values.map((value, i) => { // let space_taken = getStringWidth(value, char_width) + 2; // if(space_taken > allowed_space) { -// if(is_series) { +// if(isSeries) { // // Skip some axis lines if X axis is a series // let skips = 1; // while((space_taken/skips)*2 > allowed_space) { @@ -298,8 +301,7 @@ const AXIS_TICK_LENGTH = 6; const LABEL_MARGIN = 4; const FONT_SIZE = 10; const BASE_LINE_COLOR = '#dadada'; - -function $$1(expr, con) { +function $$2(expr, con) { return typeof expr === "string"? (con || document).querySelector(expr) : expr || null; } @@ -310,10 +312,10 @@ function createSVG(tag, o) { var val = o[i]; if (i === "inside") { - $$1(val).appendChild(element); + $$2(val).appendChild(element); } else if (i === "around") { - var ref = $$1(val); + var ref = $$2(val); ref.parentNode.insertBefore(element, ref); element.appendChild(ref); @@ -412,7 +414,7 @@ function makeHeatSquare(className, x, y, size, fill='none', data={}) { y: y, width: size, height: size, - fill: fill + fill: 1 }; Object.keys(data).map(key => { @@ -475,8 +477,8 @@ function makeHoriLine(y, label, x1, x2, options={}) { className: className, x1: x1, x2: x2, - y1: 0, - y2: 0, + y1: y, + y2: y, styles: { stroke: options.stroke } @@ -484,7 +486,7 @@ function makeHoriLine(y, label, x1, x2, options={}) { let text = createSVG('text', { x: x1 < x2 ? x1 - LABEL_MARGIN : x1 + LABEL_MARGIN, - y: 0, + y: y, dy: (FONT_SIZE / 2 - 2) + 'px', 'font-size': FONT_SIZE + 'px', 'text-anchor': x1 < x2 ? 'end' : 'start', @@ -492,7 +494,6 @@ function makeHoriLine(y, label, x1, x2, options={}) { }); let line = createSVG('g', { - transform: `translate(0, ${ y })`, 'stroke-opacity': 1 }); @@ -524,46 +525,11 @@ class AxisChartRenderer { this.zeroLine = zeroLine; } - bar(x, yTop, args, color, index, datasetIndex, noOfDatasets) { - - let totalWidth = this.unitWidth - args.spaceWidth; - let startX = x - totalWidth/2; - - // temp commented - // let width = totalWidth / noOfDatasets; - // let currentX = startX + width * datasetIndex; - - // temp - let width = totalWidth; - let currentX = startX; - - let [height, y] = getBarHeightAndYAttr(yTop, this.zeroLine, this.totalHeight); - - return createSVG('rect', { - className: `bar mini`, - style: `fill: ${color}`, - 'data-point-index': index, - x: currentX, - y: y, - width: width, - height: height - }); - } - - dot(x, y, args, color, index) { - return createSVG('circle', { - style: `fill: ${color}`, - 'data-point-index': index, - cx: x, - cy: y, - r: args.radius - }); - } - xLine(x, label, options={}) { if(!options.pos) options.pos = 'bottom'; if(!options.offset) options.offset = 0; if(!options.mode) options.mode = this.xAxisMode; + console.log(this.xAxisMode); if(!options.stroke) options.stroke = BASE_LINE_COLOR; if(!options.className) options.className = ''; @@ -589,7 +555,8 @@ class AxisChartRenderer { return makeVertLine(x, label, y1, y2, { stroke: options.stroke, - className: options.className + className: options.className, + lineType: options.lineType }); } @@ -613,16 +580,102 @@ class AxisChartRenderer { return makeHoriLine(y, label, x1, x2, { stroke: options.stroke, - className: options.className + className: options.className, + lineType: options.lineType }); } xMarker() {} - yMarker() {} + yMarker(y, label, options={}) { + let labelSvg = createSVG('text', { + className: 'chart-label', + x: this.totalWidth - getStringWidth(label, 5) - LABEL_MARGIN, + y: y - FONT_SIZE - 2, + dy: (FONT_SIZE / 2) + 'px', + 'font-size': FONT_SIZE + 'px', + 'text-anchor': 'start', + innerHTML: label+"" + }); + + let line = makeHoriLine(y, '', 0, this.totalWidth, { + stroke: options.stroke || BASE_LINE_COLOR, + className: options.className || '', + lineType: options.lineType + }); + + line.appendChild(labelSvg); + + return line; + } + + xRegion() { + return createSVG('rect', { + className: `bar mini`, // remove class + style: `fill: rgba(228, 234, 239, 0.49)`, + // 'data-point-index': index, + x: 0, + y: y2, + width: this.totalWidth, + height: y1 - y2 + }); - xRegion() {} - yRegion() {} + return region; + } + + yRegion(y1, y2, label) { + // return a group + + let rect = createSVG('rect', { + className: `bar mini`, // remove class + style: `fill: rgba(228, 234, 239, 0.49)`, + // 'data-point-index': index, + x: 0, + y: y2, + width: this.totalWidth, + height: y1 - y2 + }); + + let upperBorder = createSVG('line', { + className: 'line-horizontal', + x1: 0, + x2: this.totalWidth, + y1: y2, + y2: y2, + styles: { + stroke: BASE_LINE_COLOR + } + }); + let lowerBorder = createSVG('line', { + className: 'line-horizontal', + x1: 0, + x2: this.totalWidth, + y1: y1, + y2: y1, + styles: { + stroke: BASE_LINE_COLOR + } + }); + + let labelSvg = createSVG('text', { + className: 'chart-label', + x: this.totalWidth - getStringWidth(label, 4.5) - LABEL_MARGIN, + y: y2 - FONT_SIZE - 2, + dy: (FONT_SIZE / 2) + 'px', + 'font-size': FONT_SIZE + 'px', + 'text-anchor': 'start', + innerHTML: label+"" + }); + + let region = createSVG('g', {}); + + region.appendChild(rect); + region.appendChild(upperBorder); + region.appendChild(lowerBorder); + region.appendChild(labelSvg); + + return region; + } animatebar(bar, x, yTop, index, noOfDatasets) { let start = x - this.avgUnitWidth/4; @@ -1033,7 +1086,7 @@ class BaseChart { } makeContainer() { - this.container = $.create('div', { + this.container = $$1.create('div', { className: 'chart-container', innerHTML: `
${this.title}
${this.subtitle}
@@ -1249,6 +1302,196 @@ class ChartComponent { } } +class AxisChartController { + constructor(meta) { + // TODO: make configurable passing args + this.refreshMeta(meta); + this.setupArgs(); + } + + setupArgs() {} + + refreshMeta(meta) { + this.meta = meta || {}; + } + + draw() {} + animate() {} +} + + + +class BarChartController extends AxisChartController { + constructor(meta) { + super(meta); + } + + setupArgs() { + this.args = { + spaceRatio: 0.5, + }; + } + + draw(x, yTop, color, index, datasetIndex, noOfDatasets) { + let totalWidth = this.meta.unitWidth - this.meta.unitWidth * this.args.spaceRatio; + let startX = x - totalWidth/2; + + // temp commented + // let width = totalWidth / noOfDatasets; + // let currentX = startX + width * datasetIndex; + + // temp + let width = totalWidth; + let currentX = startX; + + let [height, y] = getBarHeightAndYAttr(yTop, this.meta.zeroLine, this.meta.totalHeight); + + return createSVG('rect', { + className: `bar mini`, + style: `fill: ${color}`, + 'data-point-index': index, + x: currentX, + y: y, + width: width, + height: height + }); + } + + animate(bar, x, yTop, index, noOfDatasets) { + let start = x - this.meta.avgUnitWidth/4; + let width = (this.meta.avgUnitWidth/2)/noOfDatasets; + let [height, y] = getBarHeightAndYAttr(yTop, this.meta.zeroLine, this.meta.totalHeight); + + x = start + (width * index); + + return [bar, {width: width, height: height, x: x, y: y}, UNIT_ANIM_DUR, STD_EASING]; + // bar.animate({height: args.newHeight, y: yTop}, UNIT_ANIM_DUR, mina.easein); + } +} + +class LineChartController extends AxisChartController { + constructor(meta) { + super(meta); + } + + setupArgs() { + console.log(this); + this.args = { + radius: this.meta.dotSize || 4 + }; + } + + draw(x, y, color, index) { + return createSVG('circle', { + style: `fill: ${color}`, + 'data-point-index': index, + cx: x, + cy: y, + r: this.args.radius + }); + } + + animate(dot, x, yTop) { + return [dot, {cx: x, cy: yTop}, UNIT_ANIM_DUR, STD_EASING]; + // dot.animate({cy: yTop}, UNIT_ANIM_DUR, mina.easein); + } +} + +function getPaths(yList, xList, color, heatline=false, regionFill=false) { + let pointsList = yList.map((y, i) => (xList[i] + ',' + y)); + let pointsStr = pointsList.join("L"); + let path = makePath("M"+pointsStr, 'line-graph-path', color); + + // HeatLine + if(heatline) { + let gradient_id = makeGradient(this.svgDefs, color); + path.style.stroke = `url(#${gradient_id})`; + } + + let components = [path]; + + // Region + if(regionFill) { + let gradient_id_region = makeGradient(this.svgDefs, color, true); + + let zeroLine = this.state.yAxis.zeroLine; + // TODO: use zeroLine OR minimum + let pathStr = "M" + `0,${zeroLine}L` + pointsStr + `L${this.width},${zeroLine}`; + components.push(makePath(pathStr, `region-fill`, 'none', `url(#${gradient_id_region})`)); + } + + return components; +} + +// class BarChart extends AxisChart { +// constructor(args) { +// super(args); +// this.type = 'bar'; +// this.setup(); +// } + +// configure(args) { +// super.configure(args); +// this.config.xAxisMode = args.xAxisMode || 'tick'; +// this.config.yAxisMode = args.yAxisMode || 'span'; +// } + +// // ================================= + +// makeOverlay() { +// // Just make one out of the first element +// let index = this.xAxisLabels.length - 1; +// let unit = this.y[0].svg_units[index]; +// this.updateCurrentDataPoint(index); + +// if(this.overlay) { +// this.overlay.parentNode.removeChild(this.overlay); +// } +// this.overlay = unit.cloneNode(); +// this.overlay.style.fill = '#000000'; +// this.overlay.style.opacity = '0.4'; +// this.drawArea.appendChild(this.overlay); +// } + +// bindOverlay() { +// // on event, update overlay +// this.parent.addEventListener('data-select', (e) => { +// this.update_overlay(e.svg_unit); +// }); +// } + +// bind_units(units_array) { +// units_array.map(unit => { +// unit.addEventListener('click', () => { +// let index = unit.getAttribute('data-point-index'); +// this.updateCurrentDataPoint(index); +// }); +// }); +// } + +// update_overlay(unit) { +// let attributes = []; +// Object.keys(unit.attributes).map(index => { +// attributes.push(unit.attributes[index]); +// }); + +// attributes.filter(attr => attr.specified).map(attr => { +// this.overlay.setAttribute(attr.name, attr.nodeValue); +// }); + +// this.overlay.style.fill = '#000000'; +// this.overlay.style.opacity = '0.4'; +// } + +// onLeftArrow() { +// this.updateCurrentDataPoint(this.currentIndex - 1); +// } + +// onRightArrow() { +// this.updateCurrentDataPoint(this.currentIndex + 1); +// } +// } + function normalize(x) { // Calculates mantissa and exponent of a number // Returns normalized number and exponent @@ -1457,11 +1700,33 @@ function getMaxCheckpoint(value, distribution) { class AxisChart extends BaseChart { constructor(args) { super(args); - this.is_series = args.is_series; - this.format_tooltip_y = args.format_tooltip_y; - this.format_tooltip_x = args.format_tooltip_x; + this.isSeries = args.isSeries; + this.formatTooltipY = args.formatTooltipY; + this.formatTooltipX = args.formatTooltipX; + this.unitType = args.unitType || 'line'; + + this.setupUnitRenderer(); this.zeroLine = this.height; + this.preSetup(); + this.setup(); + } + + configure(args) { + super.configure(); + + this.config.xAxisMode = args.xAxisMode; + this.config.yAxisMode = args.yAxisMode; + } + + preSetup() {} + + setupUnitRenderer() { + let options = this.rawChartArgs.options; + this.unitRenderers = { + bar: new BarChartController(options), + line: new LineChartController(options) + }; } setHorizontalMargin() { @@ -1481,8 +1746,16 @@ class AxisChart extends BaseChart { this.state = { xAxisLabels: [], xAxisPositions: [], + xAxisMode: this.config.xAxisMode, + yAxisMode: this.config.yAxisMode }; + this.data.datasets.map(d => { + if(!d.chartType ) { + d.chartType = this.unitType; + } + }); + this.prepareYAxis(); } @@ -1523,6 +1796,8 @@ class AxisChart extends BaseChart { }); s.noOfDatasets = s.datasets.length; + s.yMarkers = data.yMarkers; + s.yRegions = data.yRegions; } prepareYAxis() { @@ -1542,6 +1817,7 @@ class AxisChart extends BaseChart { this.setYAxis(); this.calcYUnits(); this.calcYMaximums(); + this.calcYRegions(); // should be state this.configUnits(); @@ -1556,7 +1832,8 @@ class AxisChart extends BaseChart { let s = this.state; this.setUnitWidthAndXOffset(); s.xAxisPositions = s.xAxisLabels.map((d, i) => - floatTwo(s.xOffset + i * s.unitWidth)); + floatTwo(s.xOffset + i * s.unitWidth) + ); s.xUnitPositions = new Array(s.noOfDatasets).fill(s.xAxisPositions); } @@ -1595,8 +1872,26 @@ class AxisChart extends BaseChart { // this.make_tooltip(); } + calcYRegions() { + let s = this.state; + if(s.yMarkers) { + s.yMarkers = s.yMarkers.map(d => { + d.value = floatTwo(s.yAxis.zeroLine - d.value * s.yAxis.scaleMultiplier); + return d; + }); + } + if(s.yRegions) { + s.yRegions = s.yRegions.map(d => { + d.start = floatTwo(s.yAxis.zeroLine - d.start * s.yAxis.scaleMultiplier); + d.end = floatTwo(s.yAxis.zeroLine - d.end * s.yAxis.scaleMultiplier); + return d; + }); + } + } + configUnits() {} + // Default, as per bar, and mixed. Only line will be a special case setUnitWidthAndXOffset() { this.state.unitWidth = this.width/(this.state.datasetLength); this.state.xOffset = this.state.unitWidth/2; @@ -1625,11 +1920,11 @@ class AxisChart extends BaseChart { // this.yAxesAux, ...this.getYAxesComponents(), this.getXAxisComponents(), - // this.getYMarkerLines(), - // this.getXMarkerLines(), - // TODO: regions too? - ...this.getPathComponents(), - ...this.getDataUnitsComponents(this.config), + ...this.getYRegions(), + ...this.getXRegions(), + ...this.getYMarkerLines(), + // ...this.getXMarkerLines(), + ...this.getChartComponents(), ]; } @@ -1678,7 +1973,9 @@ class AxisChart extends BaseChart { let s = this.state; // TODO: xAxis Label spacing return s.xAxisPositions.map((position, i) => - this.renderer.xLine(position, s.xAxisLabels[i], {pos:'top'}) + this.renderer.xLine(position, s.xAxisLabels[i] + // , {pos:'top'} + ) ); }, animate: (xLines) => { @@ -1707,68 +2004,156 @@ class AxisChart extends BaseChart { }); } - getDataUnitsComponents() { - return this.data.datasets.map((d, index) => { - return new ChartComponent({ - layerClass: 'dataset-units dataset-' + index, - make: () => { - let d = this.state.datasets[index]; - let unitType = this.unitArgs; - - return d.positions.map((y, j) => { - return this.renderer[unitType.type]( - this.state.xAxisPositions[j], - y, - unitType.args, - this.colors[index], - j, - index, - this.state.noOfDatasets - ); - }); - }, - animate: (svgUnits) => { - let unitType = this.unitArgs.type; + getChartComponents() { + let dataUnitsComponents = []; + // this.state is not defined at this stage + this.data.datasets.forEach((d, index) => { + if(d.chartType === 'line') { + dataUnitsComponents.push(this.getPathComponent(d, index)); + } + console.log(this.unitRenderers[d.chartType], d.chartType); + dataUnitsComponents.push(this.getDataUnitComponent( + d, index, this.unitRenderers[d.chartType] + )); + }); + return dataUnitsComponents; + } - // have been updated in axis render; - let newX = this.state.xAxisPositions; - let newY = this.state.datasets[index].positions; + getDataUnitComponent(d, index, unitRenderer) { + return new ChartComponent({ + layerClass: 'dataset-units dataset-' + index, + make: () => { + let d = this.state.datasets[index]; + + return d.positions.map((y, j) => { + return unitRenderer.draw( + this.state.xAxisPositions[j], + y, + this.colors[index], + j, + index, + this.state.noOfDatasets + ); + }); + }, + animate: (svgUnits) => { + // have been updated in axis render; + let newX = this.state.xAxisPositions; + let newY = this.state.datasets[index].positions; - let lastUnit = svgUnits[svgUnits.length - 1]; - let parentNode = lastUnit.parentNode; + let lastUnit = svgUnits[svgUnits.length - 1]; + let parentNode = lastUnit.parentNode; - if(this.oldState.xExtra > 0) { - for(var i = 0; i 0) { + for(var i = 0; i { - if(newX[i] === undefined || newY[i] === undefined) return; - this.elementsToAnimate.push(this.renderer['animate' + unitType]( - unit, // unit, with info to replace where it came from in the data - newX[i], - newY[i], - index, - this.state.noOfDatasets - )); - }); } - }); + + svgUnits.map((unit, i) => { + if(newX[i] === undefined || newY[i] === undefined) return; + this.elementsToAnimate.push(unitRenderer.animate( + unit, // unit, with info to replace where it came from in the data + newX[i], + newY[i], + index, + this.state.noOfDatasets + )); + }); + } }); } - getPathComponents() { - return []; + getPathComponent(d, index) { + return new ChartComponent({ + layerClass: 'path dataset-path', + make: () => { + let d = this.state.datasets[index]; + let color = this.colors[index]; + + return getPaths( + d.positions, + this.state.xAxisPositions, + color, + this.config.heatline, + this.config.regionFill + ); + }, + animate: (paths) => { + let newX = this.state.xAxisPositions; + let newY = this.state.datasets[index].positions; + + let oldX = this.oldState.xAxisPositions; + let oldY = this.oldState.datasets[index].positions; + + + let parentNode = paths[0].parentNode; + + [oldX, newX] = equilizeNoOfElements(oldX, newX); + [oldY, newY] = equilizeNoOfElements(oldY, newY); + + if(this.oldState.xExtra > 0) { + paths = getPaths( + oldY, oldX, this.colors[index], + this.config.heatline, + this.config.regionFill + ); + parentNode.textContent = ''; + paths.map(path => parentNode.appendChild(path)); + } + + const newPointsList = newY.map((y, i) => (newX[i] + ',' + y)); + this.elementsToAnimate = this.elementsToAnimate + .concat(this.renderer.animatepath(paths, newPointsList.join("L"))); + } + }); } getYMarkerLines() { - return []; + if(!this.data.yMarkers) { + return []; + } + return this.data.yMarkers.map((d, index) => { + return new ChartComponent({ + layerClass: 'y-markers', + make: () => { + let s = this.state; + return s.yMarkers.map(marker => + this.renderer.yMarker(marker.value, marker.name, + {pos:'right', mode: 'span', lineType: marker.type}) + ); + }, + animate: () => {} + }); + }); } - getXMarkerLines() { + // getXMarkerLines() { + // return []; + // } + + getYRegions() { + if(!this.data.yRegions) { + return []; + } + // return []; + return this.data.yRegions.map((d, index) => { + return new ChartComponent({ + layerClass: 'y-regions', + make: () => { + let s = this.state; + return s.yRegions.map(region => + this.renderer.yRegion(region.start, region.end, region.name) + ); + }, + animate: () => {} + }); + }); + } + + getXRegions() { return []; } @@ -1790,6 +2175,88 @@ class AxisChart extends BaseChart { } else { this.renderer.refreshState(state); } + + let meta = { + totalHeight: this.height, + totalWidth: this.width, + zeroLine: this.state.zeroLine, + unitWidth: this.state.unitWidth, + }; + + Object.keys(this.unitRenderers).map(key => { + this.unitRenderers[key].refreshMeta(meta); + }); + } + + bindTooltip() { + // TODO: could be in tooltip itself, as it is a given functionality for its parent + this.chartWrapper.addEventListener('mousemove', (e) => { + let o = getOffset(this.chartWrapper); + let relX = e.pageX - o.left - this.translateXLeft; + let relY = e.pageY - o.top - this.translateY; + + if(relY < this.height + this.translateY * 2) { + this.mapTooltipXPosition(relX); + } else { + this.tip.hide_tip(); + } + }); + } + + mapTooltipXPosition(relX) { + let s = this.state; + if(!s.yUnitMinimums) return; + + let titles = s.xAxisLabels; + if(this.formatTooltipX && this.formatTooltipX(titles[0])) { + titles = titles.map(d=>this.formatTooltipX(d)); + } + + let formatY = this.formatTooltipY && this.formatTooltipY(this.y[0].values[0]); + + for(var i=s.datasetLength - 1; i >= 0 ; i--) { + let xVal = s.xAxisPositions[i]; + // let delta = i === 0 ? s.unitWidth : xVal - s.xAxisPositions[i-1]; + if(relX > xVal - s.unitWidth/2) { + let x = xVal + this.translateXLeft; + let y = s.yUnitMinimums[i] + this.translateY; + + let values = s.datasets.map((set, j) => { + return { + title: set.title, + value: formatY ? this.formatTooltipY(set.values[i]) : set.values[i], + color: this.colors[j], + }; + }); + + this.tip.set_values(x, y, titles[i], '', values); + this.tip.show_tip(); + break; + } + } + } + + getDataPoint(index=this.current_index) { + // check for length + let data_point = { + index: index + }; + let y = this.y[0]; + ['svg_units', 'yUnitPositions', 'values'].map(key => { + let data_key = key.slice(0, key.length-1); + data_point[data_key] = y[key][index]; + }); + data_point.label = this.xAxisLabels[index]; + return data_point; + } + + updateCurrentDataPoint(index) { + index = parseInt(index); + if(index < 0) index = 0; + if(index >= this.xAxisLabels.length) index = this.xAxisLabels.length - 1; + if(index === this.current_index) return; + this.current_index = index; + $.fire(this.parent, "data-select", this.getDataPoint()); } // API @@ -1820,87 +2287,8 @@ class AxisChart extends BaseChart { } } -class BarChart extends AxisChart { - constructor(args) { - super(args); - this.type = 'bar'; - this.setup(); - } - configure(args) { - super.configure(args); - this.config.xAxisMode = args.xAxisMode || 'tick'; - this.config.yAxisMode = args.yAxisMode || 'span'; - } - - // setUnitWidthAndXOffset() { - // this.state.unitWidth = this.width/(this.state.datasetLength); - // this.state.xOffset = this.state.unitWidth/2; - // } - - configUnits() { - this.unitArgs = { - type: 'bar', - args: { - spaceWidth: this.state.unitWidth/2, - } - }; - } - - // makeOverlay() { - // // Just make one out of the first element - // let index = this.xAxisLabels.length - 1; - // let unit = this.y[0].svg_units[index]; - // this.updateCurrentDataPoint(index); - - // if(this.overlay) { - // this.overlay.parentNode.removeChild(this.overlay); - // } - // this.overlay = unit.cloneNode(); - // this.overlay.style.fill = '#000000'; - // this.overlay.style.opacity = '0.4'; - // this.drawArea.appendChild(this.overlay); - // } - - // bindOverlay() { - // // on event, update overlay - // this.parent.addEventListener('data-select', (e) => { - // this.update_overlay(e.svg_unit); - // }); - // } - - // bind_units(units_array) { - // units_array.map(unit => { - // unit.addEventListener('click', () => { - // let index = unit.getAttribute('data-point-index'); - // this.updateCurrentDataPoint(index); - // }); - // }); - // } - - // update_overlay(unit) { - // let attributes = []; - // Object.keys(unit.attributes).map(index => { - // attributes.push(unit.attributes[index]); - // }); - - // attributes.filter(attr => attr.specified).map(attr => { - // this.overlay.setAttribute(attr.name, attr.nodeValue); - // }); - - // this.overlay.style.fill = '#000000'; - // this.overlay.style.opacity = '0.4'; - // } - - // onLeftArrow() { - // this.updateCurrentDataPoint(this.currentIndex - 1); - // } - - // onRightArrow() { - // this.updateCurrentDataPoint(this.currentIndex + 1); - // } - -} +// keep a binding at the end of chart class LineChart extends AxisChart { constructor(args) { @@ -1939,87 +2327,6 @@ class LineChart extends AxisChart { this.state.xOffset = 0; } - getDataUnitsComponents(config) { - if(!config.showDots) { - return []; - } - else { - return super.getDataUnitsComponents(); - } - } - - getPathComponents() { - return this.data.datasets.map((d, index) => { - return new ChartComponent({ - layerClass: 'path dataset-path', - make: () => { - let d = this.state.datasets[index]; - let color = this.colors[index]; - - return this.getPaths( - d.positions, - this.state.xAxisPositions, - color, - this.config.heatline, - this.config.regionFill - ); - }, - animate: (paths) => { - let newX = this.state.xAxisPositions; - let newY = this.state.datasets[index].positions; - - let oldX = this.oldState.xAxisPositions; - let oldY = this.oldState.datasets[index].positions; - - - let parentNode = paths[0].parentNode; - - [oldX, newX] = equilizeNoOfElements(oldX, newX); - [oldY, newY] = equilizeNoOfElements(oldY, newY); - - if(this.oldState.xExtra > 0) { - paths = this.getPaths( - oldY, oldX, this.colors[index], - this.config.heatline, - this.config.regionFill - ); - parentNode.textContent = ''; - paths.map(path => parentNode.appendChild(path)); - } - - const newPointsList = newY.map((y, i) => (newX[i] + ',' + y)); - this.elementsToAnimate = this.elementsToAnimate - .concat(this.renderer.animatepath(paths, newPointsList.join("L"))); - } - }); - }); - } - - getPaths(yList, xList, color, heatline=false, regionFill=false) { - let pointsList = yList.map((y, i) => (xList[i] + ',' + y)); - let pointsStr = pointsList.join("L"); - let path = makePath("M"+pointsStr, 'line-graph-path', color); - - // HeatLine - if(heatline) { - let gradient_id = makeGradient(this.svgDefs, color); - path.style.stroke = `url(#${gradient_id})`; - } - - let components = [path]; - - // Region - if(regionFill) { - let gradient_id_region = makeGradient(this.svgDefs, color, true); - - let zeroLine = this.state.yAxis.zeroLine; - // TODO: use zeroLine OR minimum - let pathStr = "M" + `0,${zeroLine}L` + pointsStr + `L${this.width},${zeroLine}`; - components.push(makePath(pathStr, `region-fill`, 'none', `url(#${gradient_id_region})`)); - } - - return components; - } } class ScatterChart extends LineChart { @@ -2052,9 +2359,12 @@ class ScatterChart extends LineChart { class MultiAxisChart extends AxisChart { constructor(args) { super(args); + // this.unitType = args.unitType || 'line'; + // this.setup(); + } + + preSetup() { this.type = 'multiaxis'; - this.unitType = args.unitType || 'line'; - this.setup(); } setHorizontalMargin() { @@ -2153,7 +2463,7 @@ class MultiAxisChart extends AxisChart { } // TODO remove renderer zeroline from above and below - getDataUnitsComponents() { + getChartComponents() { return this.data.datasets.map((d, index) => { return new ChartComponent({ layerClass: 'dataset-units dataset-' + index, @@ -2232,19 +2542,19 @@ class PercentageChart extends BaseChart { this.statsWrapper.style.marginBottom = '30px'; this.statsWrapper.style.paddingTop = '0px'; - this.chartDiv = $.create('div', { + this.chartDiv = $$1.create('div', { className: 'div', inside: this.chartWrapper }); - this.chart = $.create('div', { + this.chart = $$1.create('div', { className: 'progress-chart', inside: this.chartDiv }); } setupLayers() { - this.percentageBar = $.create('div', { + this.percentageBar = $$1.create('div', { className: 'progress', inside: this.chart }); @@ -2289,7 +2599,7 @@ class PercentageChart extends BaseChart { this.grand_total = this.slice_totals.reduce((a, b) => a + b, 0); this.slices = []; this.slice_totals.map((total, i) => { - let slice = $.create('div', { + let slice = $$1.create('div', { className: `progress-bar`, inside: this.percentageBar, styles: { @@ -2323,7 +2633,7 @@ class PercentageChart extends BaseChart { ? this.formatted_labels : this.labels; this.legend_totals.map((d, i) => { if(d) { - let stats = $.create('div', { + let stats = $$1.create('div', { className: 'stats', inside: this.statsWrapper }); @@ -2511,7 +2821,7 @@ class PieChart extends BaseChart { const color = this.colors[i]; if(d) { - let stats = $.create('div', { + let stats = $$1.create('div', { className: 'stats', inside: this.statsWrapper }); @@ -2819,8 +3129,7 @@ class Heatmap extends BaseChart { } const chartTypes = { - line: LineChart, - bar: BarChart, + mixed: AxisChart, multiaxis: MultiAxisChart, scatter: ScatterChart, percentage: PercentageChart, @@ -2829,8 +3138,17 @@ const chartTypes = { }; function getChartByType(chartType = 'line', options) { + if(chartType === 'line') { + options.unitType = 'line'; + return new AxisChart(options); + } else if (chartType === 'bar') { + options.unitType = 'bar'; + return new AxisChart(options); + } + if (!chartTypes[chartType]) { - return new LineChart(options); + console.error("Undefined chart type: " + chartType); + return; } return new chartTypes[chartType](options); diff --git a/dist/frappe-charts.min.cjs.js b/dist/frappe-charts.min.cjs.js index 2a63474..831e2cb 100644 --- a/dist/frappe-charts.min.cjs.js +++ b/dist/frappe-charts.min.cjs.js @@ -1 +1 @@ -"use strict";function __$styleInject(t,e){if("undefined"==typeof document)return e;t=t||"";var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");return i.type="text/css",a.appendChild(i),i.styleSheet?i.styleSheet.cssText=t:i.appendChild(document.createTextNode(t)),e}function $(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function getOffset(t){var e=t.getBoundingClientRect();return{top:e.top+(document.documentElement.scrollTop||document.body.scrollTop),left:e.left+(document.documentElement.scrollLeft||document.body.scrollLeft)}}function isElementInViewport(t){var e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}function getElementContentWidth(t){var e=window.getComputedStyle(t),a=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return t.clientWidth-a}function floatTwo(t){return parseFloat(t.toFixed(2))}function fillArray(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]&&arguments[3];a||(a=i?t[0]:t[t.length-1]);var n=new Array(Math.abs(e)).fill(a);return t=i?n.concat(t):t.concat(n)}function getBarHeightAndYAttr(t,e,a){var i=void 0,n=void 0;return t<=e?(n=t,0===(i=e-t)&&(n-=i=a*MIN_BAR_PERCENT_HEIGHT)):(n=e,0===(i=t-e)&&(i=a*MIN_BAR_PERCENT_HEIGHT)),[i,n]}function equilizeNoOfElements(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.length-t.length;return a>0?t=fillArray(t,a):e=fillArray(e,a),[t,e]}function $$1(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function createSVG(t,e){var a=document.createElementNS("http://www.w3.org/2000/svg",t);for(var i in e){var n=e[i];if("inside"===i)$$1(n).appendChild(a);else if("around"===i){var s=$$1(n);s.parentNode.insertBefore(a,s),a.appendChild(s)}else"styles"===i?"object"===(void 0===n?"undefined":_typeof(n))&&Object.keys(n).map(function(t){a.style[t]=n[t]}):("className"===i&&(i="class"),"innerHTML"===i?a.textContent=n:a.setAttribute(i,n))}return a}function renderVerticalGradient(t,e){return createSVG("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function setGradientStop(t,e,a,i){return createSVG("stop",{inside:t,style:"stop-color: "+a,offset:e,"stop-opacity":i})}function makeSVGContainer(t,e,a,i){return createSVG("svg",{className:e,inside:t,width:a,height:i})}function makeSVGDefs(t){return createSVG("defs",{inside:t})}function makeSVGGroup(t,e){return createSVG("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function makePath(t){return createSVG("path",{className:arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",d:t,styles:{stroke:arguments.length>2&&void 0!==arguments[2]?arguments[2]:"none",fill:arguments.length>3&&void 0!==arguments[3]?arguments[3]:"none"}})}function makeGradient(t,e){var a=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i="path-fill-gradient-"+e,n=renderVerticalGradient(t,i),s=[1,.6,.2];return a&&(s=[.4,.2,0]),setGradientStop(n,"0%",e,s[0]),setGradientStop(n,"50%",e,s[1]),setGradientStop(n,"100%",e,s[2]),i}function makeHeatSquare(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"none",s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},r={className:t,x:e,y:a,width:i,height:i,fill:n};return Object.keys(s).map(function(t){r[t]=s[t]}),createSVG("rect",r)}function makeText(t,e,a,i){return createSVG("text",{className:t,x:e,y:a,dy:FONT_SIZE/2+"px","font-size":FONT_SIZE+"px",innerHTML:i})}function makeVertLine(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};n.stroke||(n.stroke=BASE_LINE_COLOR);var s=createSVG("line",{className:"line-vertical "+n.className,x1:0,x2:0,y1:a,y2:i,styles:{stroke:n.stroke}}),r=createSVG("text",{x:0,y:a>i?a+LABEL_MARGIN:a-LABEL_MARGIN-FONT_SIZE,dy:FONT_SIZE+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:e}),o=createSVG("g",{transform:"translate("+t+", 0)"});return o.appendChild(s),o.appendChild(r),o}function makeHoriLine(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};n.stroke||(n.stroke=BASE_LINE_COLOR),n.lineType||(n.lineType="");var s=createSVG("line",{className:"line-horizontal "+n.className+("dashed"===n.lineType?"dashed":""),x1:a,x2:i,y1:0,y2:0,styles:{stroke:n.stroke}}),r=createSVG("text",{x:a255?255:t<0?0:t}function lightenDarkenColor(t,e){var a=getColor(t),i=!1;"#"==a[0]&&(a=a.slice(1),i=!0);var n=parseInt(a,16),s=limitColor((n>>16)+e),r=limitColor((n>>8&255)+e),o=limitColor((255&n)+e);return(i?"#":"")+(o|r<<8|s<<16).toString(16)}function isValidColor(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t)}function getDifferentChart(t,e,a){if(t!==e){ALL_CHART_TYPES.includes(t)||console.error("'"+t+"' is not a valid chart type."),COMPATIBLE_CHARTS[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var i=COLOR_COMPATIBLE_CHARTS[e].includes(t);return new Chart({parent:a.parent,title:a.title,data:a.data,type:t,height:a.height,colors:i?a.colors:void 0})}}function animateSVGElement(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"linear",n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:void 0,s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},r=t.cloneNode(!0),o=t.cloneNode(!0);for(var l in e){var h=void 0;h="transform"===l?document.createElementNS("http://www.w3.org/2000/svg","animateTransform"):document.createElementNS("http://www.w3.org/2000/svg","animate");var c=s[l]||t.getAttribute(l),u=e[l],p={attributeName:l,from:c,to:u,begin:"0s",dur:a/1e3+"s",values:c+";"+u,keySplines:EASING[i],keyTimes:"0;1",calcMode:"spline",fill:"freeze"};n&&(p.type=n);for(var d in p)h.setAttribute(d,p[d]);r.appendChild(h),n?o.setAttribute(l,"translate("+u+")"):o.setAttribute(l,u)}return[r,o]}function transform(t,e){t.style.transform=e,t.style.webkitTransform=e,t.style.msTransform=e,t.style.mozTransform=e,t.style.oTransform=e}function animateSVG(t,e){var a=[],i=[];e.map(function(t){var e=t[0],n=e.parentNode,s=void 0,r=void 0;t[0]=e;var o=animateSVGElement.apply(void 0,toConsumableArray(t)),l=slicedToArray(o,2);s=l[0],r=l[1],a.push(r),i.push([s,n]),n.replaceChild(s,e)});var n=t.cloneNode(!0);return i.map(function(t,i){t[1].replaceChild(a[i],t[0]),e[i][0]=a[i]}),n}function runSMILAnimation(t,e,a){if(0!==a.length){var i=animateSVG(e,a);e.parentNode==t&&(t.removeChild(e),t.appendChild(i)),setTimeout(function(){i.parentNode==t&&(t.removeChild(i),t.appendChild(e))},REPLACE_ALL_NEW_DUR)}}function normalize(t){if(0===t)return[0,0];if(isNaN(t))return{mantissa:-6755399441055744,exponent:972};var e=t>0?1:-1;if(!isFinite(t))return{mantissa:4503599627370496*e,exponent:972};t=Math.abs(t);var a=Math.floor(Math.log10(t));return[e*(t/Math.pow(10,a)),a]}function getRangeIntervals(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,a=Math.ceil(t),i=Math.floor(e),n=a-i,s=n,r=1;n>5&&(n%2!=0&&(n=++a-i),s=n/2,r=2),n<=2&&(r=n/(s=4)),0===n&&(s=5,r=1);for(var o=[],l=0;l<=s;l++)o.push(i+r*l);return o}function getIntervals(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,a=normalize(t),i=slicedToArray(a,2),n=i[0],s=i[1],r=e?e/Math.pow(10,s):0,o=getRangeIntervals(n=n.toFixed(6),r);return o=o.map(function(t){return t*Math.pow(10,s)})}function calcIntervals(t){function e(t,e){for(var a=getIntervals(t),i=a[1]-a[0],n=0,s=1;n1&&void 0!==arguments[1]&&arguments[1],i=Math.max.apply(Math,toConsumableArray(t)),n=Math.min.apply(Math,toConsumableArray(t)),s=[];if(i>=0&&n>=0)normalize(i)[1],s=a?getIntervals(i,n):getIntervals(i);else if(i>0&&n<0){var r=Math.abs(n);i>=r?(normalize(i)[1],s=e(i,r)):(normalize(r)[1],s=e(r,i).map(function(t){return-1*t}))}else if(i<=0&&n<=0){var o=Math.abs(n),l=Math.abs(i);normalize(o)[1],s=(s=a?getIntervals(o,l):getIntervals(o)).reverse().map(function(t){return-1*t})}return s}function getZeroIndex(t){var e=getIntervalSize(t);return t.indexOf(0)>=0?t.indexOf(0):t[0]>0?-1*t[0]/e:-1*t[t.length-1]/e+(t.length-1)}function getIntervalSize(t){return t[1]-t[0]}function getValueRange(t){return t[t.length-1]-t[0]}function calcDistribution(t,e){for(var a=Math.max.apply(Math,toConsumableArray(t)),i=1/(e-1),n=[],s=0;s9?"":"0")+e,(a>9?"":"0")+a,t.getFullYear()].join("-")}function getWeeksBetween(t,e){return Math.ceil(getDaysBetween(t,e)/7)}function getDaysBetween(t,e){return(treatAsUtc(e)-treatAsUtc(t))/864e5}function addDays(t,e){t.setDate(t.getDate()+e)}function getChartByType(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return chartTypes[t]?new chartTypes[t](e):new LineChart(e)}__$styleInject('.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path,.chart-container .multiaxis-chart .line-horizontal,.chart-container .multiaxis-chart .y-axis-guide{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}',void 0);var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},asyncGenerator=function(){function t(t){this.value=t}function e(e){function a(t,e){return new Promise(function(a,n){var o={key:t,arg:e,resolve:a,reject:n,next:null};r?r=r.next=o:(s=r=o,i(t,e))})}function i(a,s){try{var r=e[a](s),o=r.value;o instanceof t?Promise.resolve(o.value).then(function(t){i("next",t)},function(t){i("throw",t)}):n(r.done?"return":"normal",r.value)}catch(t){n("throw",t)}}function n(t,e){switch(t){case"return":s.resolve({value:e,done:!0});break;case"throw":s.reject(e);break;default:s.resolve({value:e,done:!1})}(s=s.next)?i(s.key,s.arg):r=null}var s,r;this._invoke=a,"function"!=typeof e.return&&(this.return=void 0)}return"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)},{wrap:function(t){return function(){return new e(t.apply(this,arguments))}},await:function(e){return new t(e)}}}(),classCallCheck=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},createClass=function(){function t(t,e){for(var a=0;a\n\t\t\t\t
    \n\t\t\t\t
    '}),this.hide_tip(),this.title=this.container.querySelector(".title"),this.data_point_list=this.container.querySelector(".data-point-list"),this.parent.addEventListener("mouseleave",function(){t.hide_tip()})}},{key:"fill",value:function(){var t=this,e=void 0;e=this.title_value_first?""+this.title_value+""+this.title_name:this.title_name+""+this.title_value+"",this.title.innerHTML=e,this.data_point_list.innerHTML="",this.list_values.map(function(e,a){var i=t.colors[a]||"black",n=$.create("li",{styles:{"border-top":"3px solid "+i},innerHTML:''+(0===e.value||e.value?e.value:"")+"\n\t\t\t\t\t"+(e.title?e.title:"")});t.data_point_list.appendChild(n)})}},{key:"calc_position",value:function(){var t=this.container.offsetWidth;this.top=this.y-this.container.offsetHeight,this.left=this.x-t/2;var e=this.parent.offsetWidth-t,a=this.container.querySelector(".svg-pointer");if(this.left<0)a.style.left="calc(50% - "+-1*this.left+"px)",this.left=0;else if(this.left>e){var i="calc(50% + "+(this.left-e)+"px)";a.style.left=i,this.left=e}else a.style.left="50%"}},{key:"set_values",value:function(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0;this.title_name=a,this.title_value=i,this.list_values=n,this.x=t,this.y=e,this.title_value_first=s,this.refresh()}},{key:"hide_tip",value:function(){this.container.style.top="0px",this.container.style.left="0px",this.container.style.opacity="0"}},{key:"show_tip",value:function(){this.container.style.top=this.top+"px",this.container.style.left=this.left+"px",this.container.style.opacity="1"}}]),t}(),MIN_BAR_PERCENT_HEIGHT=.01,UNIT_ANIM_DUR=350,PATH_ANIM_DUR=350,MARKER_LINE_ANIM_DUR=UNIT_ANIM_DUR,REPLACE_ALL_NEW_DUR=250,STD_EASING="easein",AXIS_TICK_LENGTH=6,LABEL_MARGIN=4,FONT_SIZE=10,BASE_LINE_COLOR="#dadada",AxisChartRenderer=function(){function t(e){classCallCheck(this,t),this.refreshState(e)}return createClass(t,[{key:"refreshState",value:function(t){this.totalHeight=t.totalHeight,this.totalWidth=t.totalWidth,this.zeroLine=t.zeroLine,this.unitWidth=t.unitWidth,this.xAxisMode=t.xAxisMode,this.yAxisMode=t.yAxisMode}},{key:"setZeroline",value:function(t){this.zeroLine=t}},{key:"bar",value:function(t,e,a,i,n,s,r){var o=this.unitWidth-a.spaceWidth,l=o,h=t-o/2,c=getBarHeightAndYAttr(e,this.zeroLine,this.totalHeight),u=slicedToArray(c,2),p=u[0];return createSVG("rect",{className:"bar mini",style:"fill: "+i,"data-point-index":n,x:h,y:u[1],width:l,height:p})}},{key:"dot",value:function(t,e,a,i,n){return createSVG("circle",{style:"fill: "+i,"data-point-index":n,cx:t,cy:e,r:a.radius})}},{key:"xLine",value:function(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};a.pos||(a.pos="bottom"),a.offset||(a.offset=0),a.mode||(a.mode=this.xAxisMode),a.stroke||(a.stroke=BASE_LINE_COLOR),a.className||(a.className="");var i=this.totalHeight+AXIS_TICK_LENGTH,n="span"===a.mode?-1*AXIS_TICK_LENGTH:this.totalHeight;return"tick"===a.mode&&"top"===a.pos&&(i=-1*AXIS_TICK_LENGTH,n=0),makeVertLine(t,e,i,n,{stroke:a.stroke,className:a.className})}},{key:"yLine",value:function(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};a.pos||(a.pos="left"),a.offset||(a.offset=0),a.mode||(a.mode=this.yAxisMode),a.stroke||(a.stroke=BASE_LINE_COLOR),a.className||(a.className="");var i=-1*AXIS_TICK_LENGTH,n="span"===a.mode?this.totalWidth+AXIS_TICK_LENGTH:0;return"tick"===a.mode&&"right"===a.pos&&(i=this.totalWidth+AXIS_TICK_LENGTH,n=this.totalWidth),i+=a.offset,n+=a.offset,makeHoriLine(t,e,i,n,{stroke:a.stroke,className:a.className})}},{key:"xMarker",value:function(){}},{key:"yMarker",value:function(){}},{key:"xRegion",value:function(){}},{key:"yRegion",value:function(){}},{key:"animatebar",value:function(t,e,a,i,n){var s=e-this.avgUnitWidth/4,r=this.avgUnitWidth/2/n,o=getBarHeightAndYAttr(a,this.zeroLine,this.totalHeight),l=slicedToArray(o,2);return e=s+r*i,[t,{width:r,height:l[0],x:e,y:l[1]},UNIT_ANIM_DUR,STD_EASING]}},{key:"animatedot",value:function(t,e,a){return[t,{cx:e,cy:a},UNIT_ANIM_DUR,STD_EASING]}},{key:"animatepath",value:function(t,e){var a=[],i=[t[0],{d:"M"+e},PATH_ANIM_DUR,STD_EASING];if(a.push(i),t[1]){var n="0,"+this.zeroLine+"L",s="L"+this.totalWidth+", "+this.zeroLine,r=[t[1],{d:"M"+n+e+s},PATH_ANIM_DUR,STD_EASING];a.push(r)}return a}},{key:"translate",value:function(t,e,a,i){return[t,{transform:a.join(", ")},i,STD_EASING,"translate",{transform:e.join(", ")}]}},{key:"translateVertLine",value:function(t,e,a){return this.translate(t,[a,0],[e,0],MARKER_LINE_ANIM_DUR)}},{key:"translateHoriLine",value:function(t,e,a){return this.translate(t,[0,a],[0,e],MARKER_LINE_ANIM_DUR)}}]),t}(),PRESET_COLOR_MAP={"light-blue":"#7cd6fd",blue:"#5e64ff",violet:"#743ee2",red:"#ff5858",orange:"#ffa00a",yellow:"#feef72",green:"#28a745","light-green":"#98d85b",purple:"#b554ff",magenta:"#ffa3ef",black:"#36114C",grey:"#bdd3e6","light-grey":"#f0f4f7","dark-grey":"#b8c2cc"},DEFAULT_COLORS=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],getColor=function(t){return PRESET_COLOR_MAP[t]||t},ALL_CHART_TYPES=["line","scatter","bar","percentage","heatmap","pie"],COMPATIBLE_CHARTS={bar:["line","scatter","percentage","pie"],line:["scatter","bar","percentage","pie"],pie:["line","scatter","percentage","bar"],scatter:["line","bar","percentage","pie"],percentage:["bar","line","scatter","pie"],heatmap:[]},COLOR_COMPATIBLE_CHARTS={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},EASING={ease:"0.25 0.1 0.25 1",linear:"0 0 1 1",easein:"0.1 0.8 0.2 1",easeout:"0 0 0.58 1",easeinout:"0.42 0 0.58 1"},BaseChart=function(){function t(e){var a=e.height,i=void 0===a?240:a,n=e.title,s=void 0===n?"":n,r=e.subtitle,o=void 0===r?"":r,l=(e.colors,e.isNavigable),h=void 0===l?0:l,c=(e.showLegend,e.type,e.parent);classCallCheck(this,t),this.rawChartArgs=arguments[0],this.parent="string"==typeof c?document.querySelector(c):c,this.title=s,this.subtitle=o,this.argHeight=i,this.isNavigable=h,this.isNavigable&&(this.currentIndex=0),this.configure(arguments[0])}return createClass(t,[{key:"configure",value:function(t){this.setColors(),this.config={showTooltip:1,showLegend:1,isNavigable:0,animate:0},this.state={colors:this.colors}}},{key:"setColors",value:function(){var t=this.rawChartArgs,e="percentage"===t.type||"pie"===t.type?t.data.labels:t.data.datasets;!t.colors||e&&t.colors.length'+this.title+'\n\t\t\t\t
    '+this.subtitle+'
    \n\t\t\t\t
    \n\t\t\t\t
    '}),this.parent.innerHTML="",this.parent.appendChild(this.container),this.chartWrapper=this.container.querySelector(".frappe-chart"),this.statsWrapper=this.container.querySelector(".graph-stats-container")}},{key:"makeTooltip",value:function(){this.tip=new SvgTip({parent:this.chartWrapper,colors:this.colors}),this.bindTooltip()}},{key:"bindTooltip",value:function(){}},{key:"draw",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calcWidth(),this.refresh(this.data),this.makeChartArea(),this.setComponentParent(),this.makeComponentLayers(),this.renderLegend(),this.setupNavigation(t),this.renderComponents(),this.renderConstants(),this.config.animate&&this.update(this.firstUpdateData)}},{key:"update",value:function(t){this.refresh(t),this.reRender()}},{key:"calcWidth",value:function(){this.baseWidth=getElementContentWidth(this.parent)-0,this.width=this.baseWidth-(this.translateXLeft+this.translateXRight)}},{key:"refresh",value:function(t){this.oldState=this.state?JSON.parse(JSON.stringify(this.state)):{},this.intermedState={},this.prepareData(t),this.reCalc(),this.refreshRenderer()}},{key:"makeChartArea",value:function(){this.svg=makeSVGContainer(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svgDefs=makeSVGDefs(this.svg),this.drawArea=makeSVGGroup(this.svg,this.type+"-chart","translate("+this.translateXLeft+", "+this.translateY+")")}},{key:"prepareData",value:function(){}},{key:"renderConstants",value:function(){}},{key:"reCalc",value:function(){}},{key:"refreshRenderer",value:function(){}},{key:"reRender",value:function(){var t=this;if(!(!(arguments.length>0&&void 0!==arguments[0])||arguments[0]))return void this.renderComponents();this.elementsToAnimate=[],this.loadAnimatedComponents(),runSMILAnimation(this.chartWrapper,this.svg,this.elementsToAnimate),setTimeout(function(){t.renderComponents()},400)}},{key:"setComponentParent",value:function(){var t=this;this.components.forEach(function(e){return e.setupParent(t.drawArea)})}},{key:"makeComponentLayers",value:function(){this.components.forEach(function(t){return t.makeLayer()})}},{key:"renderComponents",value:function(){this.components.forEach(function(t){return t.render()})}},{key:"loadAnimatedComponents",value:function(){this.components.forEach(function(t){return t.loadAnimatedComponents()})}},{key:"renderLegend",value:function(){}},{key:"setupNavigation",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.isNavigable||(this.makeOverlay(),e&&(this.bindOverlay(),document.addEventListener("keydown",function(e){isElementInViewport(t.chartWrapper)&&("37"==(e=e||window.event).keyCode?t.onLeftArrow():"39"==e.keyCode?t.onRightArrow():"38"==e.keyCode?t.onUpArrow():"40"==e.keyCode?t.onDownArrow():"13"==e.keyCode&&t.onEnterKey())})))}},{key:"makeOverlay",value:function(){}},{key:"bindOverlay",value:function(){}},{key:"bind_units",value:function(){}},{key:"onLeftArrow",value:function(){}},{key:"onRightArrow",value:function(){}},{key:"onUpArrow",value:function(){}},{key:"onDownArrow",value:function(){}},{key:"onEnterKey",value:function(){}},{key:"getDataPoint",value:function(){}},{key:"updateCurrentDataPoint",value:function(){}},{key:"getDifferentChart",value:function(t){return getDifferentChart(t,this.type,this.rawChartArgs)}}]),t}(),Y_AXIS_MARGIN=60,ChartComponent=function(){function t(e){var a=e.layerClass,i=void 0===a?"":a,n=e.layerTransform,s=void 0===n?"":n,r=e.make,o=e.animate;classCallCheck(this,t),this.layerClass=i,this.layerTransform=s,this.make=r,this.animate=o,this.layer=void 0,this.store=[]}return createClass(t,[{key:"refresh",value:function(t){}},{key:"render",value:function(){var t=this;this.store=this.make(),this.layer.textContent="",this.store.forEach(function(e){t.layer.appendChild(e)})}},{key:"setupParent",value:function(t){this.parent=t}},{key:"loadAnimatedComponents",value:function(){this.animate(this.store)}},{key:"makeLayer",value:function(){this.layer=makeSVGGroup(this.parent,this.layerClass,this.layerTransform)}}]),t}(),AxisChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.is_series=t.is_series,a.format_tooltip_y=t.format_tooltip_y,a.format_tooltip_x=t.format_tooltip_x,a.zeroLine=a.height,a}return inherits(e,t),createClass(e,[{key:"setHorizontalMargin",value:function(){this.translateXLeft=Y_AXIS_MARGIN,this.translateXRight=Y_AXIS_MARGIN}},{key:"checkData",value:function(t){return!0}},{key:"getFirstUpdateData",value:function(t){}},{key:"setupConstants",value:function(){this.state={xAxisLabels:[],xAxisPositions:[]},this.prepareYAxis()}},{key:"prepareData",value:function(t){var e=this.state;e.xAxisLabels=t.labels||[],e.datasetLength=e.xAxisLabels.length;var a=new Array(e.datasetLength).fill(0);e.datasets=t.datasets,t.datasets||(e.datasets=[{values:a}]),e.datasets.map(function(t,i){var n=t.values;n=n?(n=n.map(function(t){return isNaN(t)?0:t})).length>e.datasetLength?n.slice(0,e.datasetLength):fillArray(n,e.datasetLength-n.length,0):a,t.index=i}),e.noOfDatasets=e.datasets.length}},{key:"prepareYAxis",value:function(){this.state.yAxis={labels:[],positions:[]}}},{key:"reCalc",value:function(){var t=this.state;t.xAxisLabels=this.data.labels,this.calcXPositions(),t.datasetsLabels=this.data.datasets.map(function(t){return t.name}),this.setYAxis(),this.calcYUnits(),this.calcYMaximums(),this.configUnits()}},{key:"setYAxis",value:function(){this.calcYAxisParameters(this.state.yAxis,this.getAllYValues(),"line"===this.type),this.state.zeroLine=this.state.yAxis.zeroLine}},{key:"calcXPositions",value:function(){var t=this.state;this.setUnitWidthAndXOffset(),t.xAxisPositions=t.xAxisLabels.map(function(e,a){return floatTwo(t.xOffset+a*t.unitWidth)}),t.xUnitPositions=new Array(t.noOfDatasets).fill(t.xAxisPositions)}},{key:"calcYAxisParameters",value:function(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"false";t.labels=calcIntervals(e,a);var i=t.labels;t.scaleMultiplier=this.height/getValueRange(i);var n=getIntervalSize(i)*t.scaleMultiplier;t.zeroLine=this.height-getZeroIndex(i)*n,t.positions=i.map(function(e){return t.zeroLine-e*t.scaleMultiplier})}},{key:"calcYUnits",value:function(){var t=this.state;t.datasets.map(function(e){e.positions=e.values.map(function(e){return floatTwo(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"calcYMaximums",value:function(){var t=this.state;t.yUnitMinimums=new Array(t.datasetLength).fill(9999),t.datasets.map(function(e,a){e.positions.map(function(e,a){e0)for(var h=0;h0)for(var l=0;l0)for(var l=0;l2&&void 0!==arguments[2]?arguments[2]:this.state.datasetLength;this.data.labels.splice(a,0,t),this.data.datasets.map(function(t,i){t.values.splice(a,0,e[i])}),this.update(this.data)}},{key:"removeDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.datasetLength-1;this.data.labels.splice(t,1),this.data.datasets.map(function(e){e.values.splice(t,1)}),this.update(this.data)}},{key:"updateData",value:function(){}}]),e}(BaseChart),BarChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.type="bar",a.setup(),a}return inherits(e,t),createClass(e,[{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"tick",this.config.yAxisMode=t.yAxisMode||"span"}},{key:"configUnits",value:function(){this.unitArgs={type:"bar",args:{spaceWidth:this.state.unitWidth/2}}}}]),e}(AxisChart),LineChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.type="line",Object.getPrototypeOf(a)!==e.prototype?possibleConstructorReturn(a):(a.setup(),a)}return inherits(e,t),createClass(e,[{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"span",this.config.yAxisMode=t.yAxisMode||"span",this.config.dotRadius=t.dotRadius||4,this.config.heatline=t.heatline||0,this.config.regionFill=t.regionFill||0,this.config.showDots=t.showDots||1}},{key:"configUnits",value:function(){this.unitArgs={type:"dot",args:{radius:this.config.dotRadius}}}},{key:"setUnitWidthAndXOffset",value:function(){this.state.unitWidth=this.width/(this.state.datasetLength-1),this.state.xOffset=0}},{key:"getDataUnitsComponents",value:function(t){return t.showDots?get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"getDataUnitsComponents",this).call(this):[]}},{key:"getPathComponents",value:function(){var t=this;return this.data.datasets.map(function(e,a){return new ChartComponent({layerClass:"path dataset-path",make:function(){var e=t.state.datasets[a],i=t.colors[a];return t.getPaths(e.positions,t.state.xAxisPositions,i,t.config.heatline,t.config.regionFill)},animate:function(e){var i=t.state.xAxisPositions,n=t.state.datasets[a].positions,s=t.oldState.xAxisPositions,r=t.oldState.datasets[a].positions,o=e[0].parentNode,l=equilizeNoOfElements(s,i),h=slicedToArray(l,2);s=h[0],i=h[1];var c=equilizeNoOfElements(r,n),u=slicedToArray(c,2);r=u[0],n=u[1],t.oldState.xExtra>0&&(e=t.getPaths(r,s,t.colors[a],t.config.heatline,t.config.regionFill),o.textContent="",e.map(function(t){return o.appendChild(t)}));var p=n.map(function(t,e){return i[e]+","+t});t.elementsToAnimate=t.elementsToAnimate.concat(t.renderer.animatepath(e,p.join("L")))}})})}},{key:"getPaths",value:function(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]&&arguments[3],n=arguments.length>4&&void 0!==arguments[4]&&arguments[4],s=t.map(function(t,a){return e[a]+","+t}).join("L"),r=makePath("M"+s,"line-graph-path",a);if(i){var o=makeGradient(this.svgDefs,a);r.style.stroke="url(#"+o+")"}var l=[r];if(n){var h=makeGradient(this.svgDefs,a,!0),c=this.state.yAxis.zeroLine,u="M0,"+c+"L"+s+"L"+this.width+","+c;l.push(makePath(u,"region-fill","none","url(#"+h+")"))}return l}}]),e}(AxisChart),ScatterChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.type="scatter",t.dotRadius?a.dotRadius=t.dotRadius:a.dotRadius=8,a.setup(),a}return inherits(e,t),createClass(e,[{key:"setup_values",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_values",this).call(this),this.unit_args={type:"dot",args:{radius:this.dotRadius}}}},{key:"make_paths",value:function(){}},{key:"make_path",value:function(){}}]),e}(LineChart),MultiAxisChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.type="multiaxis",a.unitType=t.unitType||"line",a.setup(),a}return inherits(e,t),createClass(e,[{key:"setHorizontalMargin",value:function(){var t=this.data.datasets.filter(function(t){return"left"===t.axisPosition}).length;this.translateXLeft=t*Y_AXIS_MARGIN||Y_AXIS_MARGIN,this.translateXRight=(this.data.datasets.length-t)*Y_AXIS_MARGIN||Y_AXIS_MARGIN}},{key:"prepareYAxis",value:function(){}},{key:"prepareData",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"prepareData",this).call(this,t);var a=0,i=0;this.state.datasets.forEach(function(t,e){t.yAxis={position:t.axisPosition,index:"left"===t.axisPosition?a++:i++}})}},{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"tick",this.config.yAxisMode=t.yAxisMode||"span"}},{key:"configUnits",value:function(){this.unitArgs={type:"bar",args:{spaceWidth:this.state.unitWidth/2}}}},{key:"setYAxis",value:function(){var t=this;this.state.datasets.map(function(e){t.calcYAxisParameters(e.yAxis,e.values,"line"===t.unitType)})}},{key:"calcYUnits",value:function(){this.state.datasets.map(function(t){t.positions=t.values.map(function(e){return floatTwo(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"renderConstants",value:function(){var t=this;this.state.datasets.map(function(e){var a="left"===e.yAxis.position?-1*e.yAxis.index*Y_AXIS_MARGIN:t.width+e.yAxis.index*Y_AXIS_MARGIN;t.renderer.xLine(a,"",{pos:"top",mode:"span",stroke:t.colors[i],className:"y-axis-guide"})})}},{key:"getYAxesComponents",value:function(){var t=this;return this.data.datasets.map(function(e,a){return new ChartComponent({layerClass:"y axis y-axis-"+a,make:function(){var e=t.state.datasets[a].yAxis;t.renderer.setZeroline(e.zeroline);var i={pos:e.position,mode:"tick",offset:e.index*Y_AXIS_MARGIN,stroke:t.colors[a]};return e.positions.map(function(a,n){return t.renderer.yLine(a,e.labels[n],i)})},animate:function(){}})})}},{key:"getDataUnitsComponents",value:function(){var t=this;return this.data.datasets.map(function(e,a){return new ChartComponent({layerClass:"dataset-units dataset-"+a,make:function(){var e=t.state.datasets[a],i=t.unitArgs;return t.renderer.setZeroline(e.yAxis.zeroLine),e.positions.map(function(e,n){return t.renderer[i.type](t.state.xAxisPositions[n],e,i.args,t.colors[a],n,a,t.state.datasetLength)})},animate:function(e){var i=t.state.datasets[a],n=t.unitArgs.type,s=t.state.xAxisPositions,r=t.state.datasets[a].positions,o=e[e.length-1],l=o.parentNode;if(t.oldState.xExtra>0)for(var h=0;h0}),a=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),a=e.slice(0,this.max_slices-1);var i=0;e.slice(this.max_slices-1).map(function(t){i+=t[0]}),a.push([i,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],a.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"renderComponents",value:function(){var t=this;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0),this.slices=[],this.slice_totals.map(function(e,a){var i=$.create("div",{className:"progress-bar",inside:t.percentageBar,styles:{background:t.colors[a],width:100*e/t.grand_total+"%"}});t.slices.push(i)})}},{key:"bindTooltip",value:function(){var t=this;this.slices.map(function(e,a){e.addEventListener("mouseenter",function(){var i=getOffset(t.chartWrapper),n=getOffset(e),s=n.left-i.left+e.offsetWidth/2,r=n.top-i.top-6,o=(t.formatted_labels&&t.formatted_labels.length>0?t.formatted_labels[a]:t.labels[a])+": ",l=(100*t.slice_totals[a]/t.grand_total).toFixed(1);t.tip.set_values(s,r,o,l+"%"),t.tip.show_tip()})})}},{key:"renderLegend",value:function(){var t=this,e=this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels:this.labels;this.legend_totals.map(function(a,i){a&&($.create("div",{className:"stats",inside:t.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+e[i]+":\n\t\t\t\t\t"+a+"\n\t\t\t\t")})}}]),e}(BaseChart),ANGLE_RATIO=Math.PI/180,FULL_ANGLE=360,PieChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.type="pie",a.elements_to_animate=null,a.hoverRadio=t.hoverRadio||.1,a.max_slices=10,a.max_legend_points=6,a.isAnimate=!1,a.startAngle=t.startAngle||0,a.clockWise=t.clockWise||!1,a.mouseMove=a.mouseMove.bind(a),a.mouseLeave=a.mouseLeave.bind(a),a.setup(),a}return inherits(e,t),createClass(e,[{key:"setup_values",value:function(){var t=this;this.centerX=this.width/2,this.centerY=this.height/2,this.radius=this.height>this.width?this.centerX:this.centerY,this.slice_totals=[];var e=this.data.labels.map(function(e,a){var i=0;return t.data.datasets.map(function(t){i+=t.values[a]}),[i,e]}).filter(function(t){return t[0]>0}),a=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),a=e.slice(0,this.max_slices-1);var i=0;e.slice(this.max_slices-1).map(function(t){i+=t[0]}),a.push([i,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],a.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"makeArcPath",value:function(t,e){var a=this.centerX,i=this.centerY,n=this.radius,s=this.clockWise;return"M"+a+" "+i+" L"+(a+t.x)+" "+(i+t.y)+" A "+n+" "+n+" 0 0 "+(s?1:0)+" "+(a+e.x)+" "+(i+e.y)+" z"}},{key:"renderComponents",value:function(t){var a=this,i=this.radius,n=this.clockWise;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0);var s=this.slicesProperties||[];this.slices=[],this.elements_to_animate=[],this.slicesProperties=[];var r=180-this.startAngle;this.slice_totals.map(function(o,l){var h=r,c=o/a.grand_total*FULL_ANGLE,u=n?-c:c,p=r+=u,d=e.getPositionByAngle(h,i),f=e.getPositionByAngle(p,i),v=t&&s[l],g=void 0,y=void 0;t?(g=v?v.startPosition:d,y=v?v.endPosition:d):(g=d,y=f);var m=a.makeArcPath(g,y),_=makePath(m,"pie-path","none",a.colors[l]);_.style.transition="transform .3s;",a.drawArea.appendChild(_),a.slices.push(_),a.slicesProperties.push({startPosition:d,endPosition:f,value:o,total:a.grand_total,startAngle:h,endAngle:p,angle:u}),t&&a.elements_to_animate.push([{unit:_,array:a.slices,index:a.slices.length-1},{d:a.makeArcPath(d,f)},650,"easein",null,{d:m}])}),t&&runSMILAnimation(this.chartWrapper,this.svg,this.elements_to_animate)}},{key:"calTranslateByAngle",value:function(t){var a=this.radius,i=this.hoverRadio,n=e.getPositionByAngle(t.startAngle+t.angle/2,a);return"translate3d("+n.x*i+"px,"+n.y*i+"px,0)"}},{key:"hoverSlice",value:function(t,e,a,i){if(t){var n=this.colors[e];if(a){transform(t,this.calTranslateByAngle(this.slicesProperties[e])),t.style.fill=lightenDarkenColor(n,50);var s=getOffset(this.svg),r=i.pageX-s.left+10,o=i.pageY-s.top-10,l=(this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels[e]:this.labels[e])+": ",h=(100*this.slice_totals[e]/this.grand_total).toFixed(1);this.tip.set_values(r,o,l,h+"%"),this.tip.show_tip()}else transform(t,"translate3d(0,0,0)"),this.tip.hide_tip(),t.style.fill=n}}},{key:"mouseMove",value:function(t){for(var e=t.target,a=this.curActiveSliceIndex,i=this.curActiveSlice,n=0;n0?this.formatted_labels:this.labels;this.legend_totals.map(function(a,i){var n=t.colors[i];a&&($.create("div",{className:"stats",inside:t.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+e[i]+":\n\t\t\t\t\t"+a+"\n\t\t\t\t")})}}],[{key:"getPositionByAngle",value:function(t,e){return{x:Math.sin(t*ANGLE_RATIO)*e,y:Math.cos(t*ANGLE_RATIO)*e}}}]),e}(BaseChart),Heatmap=function(t){function e(t){var a=t.start,i=void 0===a?"":a,n=t.domain,s=void 0===n?"":n,r=t.subdomain,o=void 0===r?"":r,l=t.data,h=void 0===l?{}:l,c=t.discrete_domains,u=void 0===c?0:c,p=t.count_label,d=void 0===p?"":p,f=t.legend_colors,v=void 0===f?[]:f;classCallCheck(this,e);var g=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,arguments[0]));g.type="heatmap",g.domain=s,g.subdomain=o,g.data=h,g.discrete_domains=u,g.count_label=d;var y=new Date;return g.start=i||addDays(y,365),v=v.slice(0,5),g.legend_colors=g.validate_colors(v)?v:["#ebedf0","#c6e48b","#7bc96f","#239a3b","#196127"],g.distribution_size=5,g.translateX=0,g}return inherits(e,t),createClass(e,[{key:"validate_colors",value:function(t){if(t.length<5)return 0;var e=1;return t.forEach(function(t){isValidColor(t)||(e=0,console.warn('"'+t+'" is not a valid color.'))},this),e}},{key:"setupConstants",value:function(){this.today=new Date,this.start||(this.start=new Date,this.start.setFullYear(this.start.getFullYear()-1)),this.first_week_start=new Date(this.start.toDateString()),this.last_week_start=new Date(this.today.toDateString()),7!==this.first_week_start.getDay()&&addDays(this.first_week_start,-1*this.first_week_start.getDay()),7!==this.last_week_start.getDay()&&addDays(this.last_week_start,-1*this.last_week_start.getDay()),this.no_of_cols=getWeeksBetween(this.first_week_start+"",this.last_week_start+"")+1}},{key:"calcWidth",value:function(){this.baseWidth=12*(this.no_of_cols+3),this.discrete_domains&&(this.baseWidth+=144)}},{key:"setupLayers",value:function(){this.domain_label_group=this.makeLayer("domain-label-group chart-label"),this.data_groups=this.makeLayer("data-groups","translate(0, 20)")}},{key:"setup_values",value:function(){var t=this;this.domain_label_group.textContent="",this.data_groups.textContent="";var e=Object.keys(this.data).map(function(e){return t.data[e]});this.distribution=calcDistribution(e,this.distribution_size),this.month_names=["January","February","March","April","May","June","July","August","September","October","November","December"],this.render_all_weeks_and_store_x_values(this.no_of_cols)}},{key:"render_all_weeks_and_store_x_values",value:function(t){var e=new Date(this.first_week_start);this.week_col=0,this.current_month=e.getMonth(),this.months=[this.current_month+""],this.month_weeks={},this.month_start_points=[],this.month_weeks[this.current_month]=0,this.month_start_points.push(13);for(var a=0;aa)break;v.getMonth()-t.getMonth()&&(i=1,this.discrete_domains&&(n=1),this.month_start_points.push(13+12*(e+n))),t=v}return[s,i]}},{key:"render_month_labels",value:function(){var t=this;this.months.shift(),this.month_start_points.shift(),this.months.pop(),this.month_start_points.pop(),this.month_start_points.map(function(e,a){var i=makeText("y-value-text",e+12,10,t.month_names[t.months[a]].substring(0,3));t.domain_label_group.appendChild(i)})}},{key:"renderComponents",value:function(){Array.prototype.slice.call(this.container.querySelectorAll(".graph-stats-container, .sub-title, .title")).map(function(t){t.style.display="None"}),this.chartWrapper.style.marginTop="0px",this.chartWrapper.style.paddingTop="0px"}},{key:"bindTooltip",value:function(){var t=this;Array.prototype.slice.call(document.querySelectorAll(".data-group .day")).map(function(e){e.addEventListener("mouseenter",function(e){var a=e.target.getAttribute("data-value"),i=e.target.getAttribute("data-date").split("-"),n=t.month_names[parseInt(i[1])-1].substring(0,3),s=t.chartWrapper.getBoundingClientRect(),r=e.target.getBoundingClientRect(),o=parseInt(e.target.getAttribute("width")),l=r.left-s.left+(o+2)/2,h=r.top-s.top-(o+2)/2,c=a+" "+t.count_label,u=" on "+n+" "+i[0]+", "+i[2];t.tip.set_values(l,h,u,c,[],1),t.tip.show_tip()})})}},{key:"update",value:function(t){this.data=t,this.setup_values(),this.bindTooltip()}}]),e}(BaseChart),chartTypes={line:LineChart,bar:BarChart,multiaxis:MultiAxisChart,scatter:ScatterChart,percentage:PercentageChart,heatmap:Heatmap,pie:PieChart},Chart=function t(e){return classCallCheck(this,t),getChartByType(e.type,arguments[0])};module.exports=Chart; +"use strict";function __$styleInject(t,e){if("undefined"==typeof document)return e;t=t||"";var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");return a.type="text/css",i.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t)),e}function $$1(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function getOffset(t){var e=t.getBoundingClientRect();return{top:e.top+(document.documentElement.scrollTop||document.body.scrollTop),left:e.left+(document.documentElement.scrollLeft||document.body.scrollLeft)}}function isElementInViewport(t){var e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}function getElementContentWidth(t){var e=window.getComputedStyle(t),i=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return t.clientWidth-i}function floatTwo(t){return parseFloat(t.toFixed(2))}function fillArray(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]&&arguments[3];i||(i=a?t[0]:t[t.length-1]);var n=new Array(Math.abs(e)).fill(i);return t=a?n.concat(t):t.concat(n)}function getStringWidth(t,e){return(t+"").length*e}function getBarHeightAndYAttr(t,e,i){var a=void 0,n=void 0;return t<=e?(n=t,0===(a=e-t)&&(n-=a=i*MIN_BAR_PERCENT_HEIGHT)):(n=e,0===(a=t-e)&&(a=i*MIN_BAR_PERCENT_HEIGHT)),[a,n]}function equilizeNoOfElements(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.length-t.length;return i>0?t=fillArray(t,i):e=fillArray(e,i),[t,e]}function $$2(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function createSVG(t,e){var i=document.createElementNS("http://www.w3.org/2000/svg",t);for(var a in e){var n=e[a];if("inside"===a)$$2(n).appendChild(i);else if("around"===a){var s=$$2(n);s.parentNode.insertBefore(i,s),i.appendChild(s)}else"styles"===a?"object"===(void 0===n?"undefined":_typeof(n))&&Object.keys(n).map(function(t){i.style[t]=n[t]}):("className"===a&&(a="class"),"innerHTML"===a?i.textContent=n:i.setAttribute(a,n))}return i}function renderVerticalGradient(t,e){return createSVG("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function setGradientStop(t,e,i,a){return createSVG("stop",{inside:t,style:"stop-color: "+i,offset:e,"stop-opacity":a})}function makeSVGContainer(t,e,i,a){return createSVG("svg",{className:e,inside:t,width:i,height:a})}function makeSVGDefs(t){return createSVG("defs",{inside:t})}function makeSVGGroup(t,e){return createSVG("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function makePath(t){return createSVG("path",{className:arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",d:t,styles:{stroke:arguments.length>2&&void 0!==arguments[2]?arguments[2]:"none",fill:arguments.length>3&&void 0!==arguments[3]?arguments[3]:"none"}})}function makeGradient(t,e){var i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],a="path-fill-gradient-"+e,n=renderVerticalGradient(t,a),s=[1,.6,.2];return i&&(s=[.4,.2,0]),setGradientStop(n,"0%",e,s[0]),setGradientStop(n,"50%",e,s[1]),setGradientStop(n,"100%",e,s[2]),a}function makeHeatSquare(t,e,i,a){var n=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},s={className:t,x:e,y:i,width:a,height:a,fill:1};return Object.keys(n).map(function(t){s[t]=n[t]}),createSVG("rect",s)}function makeText(t,e,i,a){return createSVG("text",{className:t,x:e,y:i,dy:FONT_SIZE/2+"px","font-size":FONT_SIZE+"px",innerHTML:a})}function makeVertLine(t,e,i,a){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};n.stroke||(n.stroke=BASE_LINE_COLOR);var s=createSVG("line",{className:"line-vertical "+n.className,x1:0,x2:0,y1:i,y2:a,styles:{stroke:n.stroke}}),r=createSVG("text",{x:0,y:i>a?i+LABEL_MARGIN:i-LABEL_MARGIN-FONT_SIZE,dy:FONT_SIZE+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:e}),o=createSVG("g",{transform:"translate("+t+", 0)"});return o.appendChild(s),o.appendChild(r),o}function makeHoriLine(t,e,i,a){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};n.stroke||(n.stroke=BASE_LINE_COLOR),n.lineType||(n.lineType="");var s=createSVG("line",{className:"line-horizontal "+n.className+("dashed"===n.lineType?"dashed":""),x1:i,x2:a,y1:t,y2:t,styles:{stroke:n.stroke}}),r=createSVG("text",{x:i255?255:t<0?0:t}function lightenDarkenColor(t,e){var i=getColor(t),a=!1;"#"==i[0]&&(i=i.slice(1),a=!0);var n=parseInt(i,16),s=limitColor((n>>16)+e),r=limitColor((n>>8&255)+e),o=limitColor((255&n)+e);return(a?"#":"")+(o|r<<8|s<<16).toString(16)}function isValidColor(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t)}function getDifferentChart(t,e,i){if(t!==e){ALL_CHART_TYPES.includes(t)||console.error("'"+t+"' is not a valid chart type."),COMPATIBLE_CHARTS[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var a=COLOR_COMPATIBLE_CHARTS[e].includes(t);return new Chart({parent:i.parent,title:i.title,data:i.data,type:t,height:i.height,colors:a?i.colors:void 0})}}function animateSVGElement(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"linear",n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:void 0,s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},r=t.cloneNode(!0),o=t.cloneNode(!0);for(var l in e){var h=void 0;h="transform"===l?document.createElementNS("http://www.w3.org/2000/svg","animateTransform"):document.createElementNS("http://www.w3.org/2000/svg","animate");var c=s[l]||t.getAttribute(l),u=e[l],p={attributeName:l,from:c,to:u,begin:"0s",dur:i/1e3+"s",values:c+";"+u,keySplines:EASING[a],keyTimes:"0;1",calcMode:"spline",fill:"freeze"};n&&(p.type=n);for(var d in p)h.setAttribute(d,p[d]);r.appendChild(h),n?o.setAttribute(l,"translate("+u+")"):o.setAttribute(l,u)}return[r,o]}function transform(t,e){t.style.transform=e,t.style.webkitTransform=e,t.style.msTransform=e,t.style.mozTransform=e,t.style.oTransform=e}function animateSVG(t,e){var i=[],a=[];e.map(function(t){var e=t[0],n=e.parentNode,s=void 0,r=void 0;t[0]=e;var o=animateSVGElement.apply(void 0,toConsumableArray(t)),l=slicedToArray(o,2);s=l[0],r=l[1],i.push(r),a.push([s,n]),n.replaceChild(s,e)});var n=t.cloneNode(!0);return a.map(function(t,a){t[1].replaceChild(i[a],t[0]),e[a][0]=i[a]}),n}function runSMILAnimation(t,e,i){if(0!==i.length){var a=animateSVG(e,i);e.parentNode==t&&(t.removeChild(e),t.appendChild(a)),setTimeout(function(){a.parentNode==t&&(t.removeChild(a),t.appendChild(e))},REPLACE_ALL_NEW_DUR)}}function getPaths(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]&&arguments[3],n=arguments.length>4&&void 0!==arguments[4]&&arguments[4],s=t.map(function(t,i){return e[i]+","+t}).join("L"),r=makePath("M"+s,"line-graph-path",i);if(a){var o=makeGradient(this.svgDefs,i);r.style.stroke="url(#"+o+")"}var l=[r];if(n){var h=makeGradient(this.svgDefs,i,!0),c=this.state.yAxis.zeroLine,u="M0,"+c+"L"+s+"L"+this.width+","+c;l.push(makePath(u,"region-fill","none","url(#"+h+")"))}return l}function normalize(t){if(0===t)return[0,0];if(isNaN(t))return{mantissa:-6755399441055744,exponent:972};var e=t>0?1:-1;if(!isFinite(t))return{mantissa:4503599627370496*e,exponent:972};t=Math.abs(t);var i=Math.floor(Math.log10(t));return[e*(t/Math.pow(10,i)),i]}function getRangeIntervals(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=Math.ceil(t),a=Math.floor(e),n=i-a,s=n,r=1;n>5&&(n%2!=0&&(n=++i-a),s=n/2,r=2),n<=2&&(r=n/(s=4)),0===n&&(s=5,r=1);for(var o=[],l=0;l<=s;l++)o.push(a+r*l);return o}function getIntervals(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=normalize(t),a=slicedToArray(i,2),n=a[0],s=a[1],r=e?e/Math.pow(10,s):0,o=getRangeIntervals(n=n.toFixed(6),r);return o=o.map(function(t){return t*Math.pow(10,s)})}function calcIntervals(t){function e(t,e){for(var i=getIntervals(t),a=i[1]-i[0],n=0,s=1;n1&&void 0!==arguments[1]&&arguments[1],a=Math.max.apply(Math,toConsumableArray(t)),n=Math.min.apply(Math,toConsumableArray(t)),s=[];if(a>=0&&n>=0)normalize(a)[1],s=i?getIntervals(a,n):getIntervals(a);else if(a>0&&n<0){var r=Math.abs(n);a>=r?(normalize(a)[1],s=e(a,r)):(normalize(r)[1],s=e(r,a).map(function(t){return-1*t}))}else if(a<=0&&n<=0){var o=Math.abs(n),l=Math.abs(a);normalize(o)[1],s=(s=i?getIntervals(o,l):getIntervals(o)).reverse().map(function(t){return-1*t})}return s}function getZeroIndex(t){var e=getIntervalSize(t);return t.indexOf(0)>=0?t.indexOf(0):t[0]>0?-1*t[0]/e:-1*t[t.length-1]/e+(t.length-1)}function getIntervalSize(t){return t[1]-t[0]}function getValueRange(t){return t[t.length-1]-t[0]}function calcDistribution(t,e){for(var i=Math.max.apply(Math,toConsumableArray(t)),a=1/(e-1),n=[],s=0;s9?"":"0")+e,(i>9?"":"0")+i,t.getFullYear()].join("-")}function getWeeksBetween(t,e){return Math.ceil(getDaysBetween(t,e)/7)}function getDaysBetween(t,e){return(treatAsUtc(e)-treatAsUtc(t))/864e5}function addDays(t,e){t.setDate(t.getDate()+e)}function getChartByType(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return"line"===t?(e.unitType="line",new AxisChart(e)):"bar"===t?(e.unitType="bar",new AxisChart(e)):chartTypes[t]?new chartTypes[t](e):void console.error("Undefined chart type: "+t)}__$styleInject('.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path,.chart-container .multiaxis-chart .line-horizontal,.chart-container .multiaxis-chart .y-axis-guide{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}',void 0);var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},asyncGenerator=function(){function t(t){this.value=t}function e(e){function i(t,e){return new Promise(function(i,n){var o={key:t,arg:e,resolve:i,reject:n,next:null};r?r=r.next=o:(s=r=o,a(t,e))})}function a(i,s){try{var r=e[i](s),o=r.value;o instanceof t?Promise.resolve(o.value).then(function(t){a("next",t)},function(t){a("throw",t)}):n(r.done?"return":"normal",r.value)}catch(t){n("throw",t)}}function n(t,e){switch(t){case"return":s.resolve({value:e,done:!0});break;case"throw":s.reject(e);break;default:s.resolve({value:e,done:!1})}(s=s.next)?a(s.key,s.arg):r=null}var s,r;this._invoke=i,"function"!=typeof e.return&&(this.return=void 0)}return"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)},{wrap:function(t){return function(){return new e(t.apply(this,arguments))}},await:function(e){return new t(e)}}}(),classCallCheck=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},createClass=function(){function t(t,e){for(var i=0;i\n\t\t\t\t
      \n\t\t\t\t
      '}),this.hide_tip(),this.title=this.container.querySelector(".title"),this.data_point_list=this.container.querySelector(".data-point-list"),this.parent.addEventListener("mouseleave",function(){t.hide_tip()})}},{key:"fill",value:function(){var t=this,e=void 0;e=this.title_value_first?""+this.title_value+""+this.title_name:this.title_name+""+this.title_value+"",this.title.innerHTML=e,this.data_point_list.innerHTML="",this.list_values.map(function(e,i){var a=t.colors[i]||"black",n=$$1.create("li",{styles:{"border-top":"3px solid "+a},innerHTML:''+(0===e.value||e.value?e.value:"")+"\n\t\t\t\t\t"+(e.title?e.title:"")});t.data_point_list.appendChild(n)})}},{key:"calc_position",value:function(){var t=this.container.offsetWidth;this.top=this.y-this.container.offsetHeight,this.left=this.x-t/2;var e=this.parent.offsetWidth-t,i=this.container.querySelector(".svg-pointer");if(this.left<0)i.style.left="calc(50% - "+-1*this.left+"px)",this.left=0;else if(this.left>e){var a="calc(50% + "+(this.left-e)+"px)";i.style.left=a,this.left=e}else i.style.left="50%"}},{key:"set_values",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0;this.title_name=i,this.title_value=a,this.list_values=n,this.x=t,this.y=e,this.title_value_first=s,this.refresh()}},{key:"hide_tip",value:function(){this.container.style.top="0px",this.container.style.left="0px",this.container.style.opacity="0"}},{key:"show_tip",value:function(){this.container.style.top=this.top+"px",this.container.style.left=this.left+"px",this.container.style.opacity="1"}}]),t}(),MIN_BAR_PERCENT_HEIGHT=.01,UNIT_ANIM_DUR=350,PATH_ANIM_DUR=350,MARKER_LINE_ANIM_DUR=UNIT_ANIM_DUR,REPLACE_ALL_NEW_DUR=250,STD_EASING="easein",AXIS_TICK_LENGTH=6,LABEL_MARGIN=4,FONT_SIZE=10,BASE_LINE_COLOR="#dadada",AxisChartRenderer=function(){function t(e){classCallCheck(this,t),this.refreshState(e)}return createClass(t,[{key:"refreshState",value:function(t){this.totalHeight=t.totalHeight,this.totalWidth=t.totalWidth,this.zeroLine=t.zeroLine,this.unitWidth=t.unitWidth,this.xAxisMode=t.xAxisMode,this.yAxisMode=t.yAxisMode}},{key:"setZeroline",value:function(t){this.zeroLine=t}},{key:"xLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};i.pos||(i.pos="bottom"),i.offset||(i.offset=0),i.mode||(i.mode=this.xAxisMode),console.log(this.xAxisMode),i.stroke||(i.stroke=BASE_LINE_COLOR),i.className||(i.className="");var a=this.totalHeight+AXIS_TICK_LENGTH,n="span"===i.mode?-1*AXIS_TICK_LENGTH:this.totalHeight;return"tick"===i.mode&&"top"===i.pos&&(a=-1*AXIS_TICK_LENGTH,n=0),makeVertLine(t,e,a,n,{stroke:i.stroke,className:i.className,lineType:i.lineType})}},{key:"yLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};i.pos||(i.pos="left"),i.offset||(i.offset=0),i.mode||(i.mode=this.yAxisMode),i.stroke||(i.stroke=BASE_LINE_COLOR),i.className||(i.className="");var a=-1*AXIS_TICK_LENGTH,n="span"===i.mode?this.totalWidth+AXIS_TICK_LENGTH:0;return"tick"===i.mode&&"right"===i.pos&&(a=this.totalWidth+AXIS_TICK_LENGTH,n=this.totalWidth),a+=i.offset,n+=i.offset,makeHoriLine(t,e,a,n,{stroke:i.stroke,className:i.className,lineType:i.lineType})}},{key:"xMarker",value:function(){}},{key:"yMarker",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},a=createSVG("text",{className:"chart-label",x:this.totalWidth-getStringWidth(e,5)-LABEL_MARGIN,y:t-FONT_SIZE-2,dy:FONT_SIZE/2+"px","font-size":FONT_SIZE+"px","text-anchor":"start",innerHTML:e+""}),n=makeHoriLine(t,"",0,this.totalWidth,{stroke:i.stroke||BASE_LINE_COLOR,className:i.className||"",lineType:i.lineType});return n.appendChild(a),n}},{key:"xRegion",value:function(){return createSVG("rect",{className:"bar mini",style:"fill: rgba(228, 234, 239, 0.49)",x:0,y:y2,width:this.totalWidth,height:y1-y2})}},{key:"yRegion",value:function(t,e,i){var a=createSVG("rect",{className:"bar mini",style:"fill: rgba(228, 234, 239, 0.49)",x:0,y:e,width:this.totalWidth,height:t-e}),n=createSVG("line",{className:"line-horizontal",x1:0,x2:this.totalWidth,y1:e,y2:e,styles:{stroke:BASE_LINE_COLOR}}),s=createSVG("line",{className:"line-horizontal",x1:0,x2:this.totalWidth,y1:t,y2:t,styles:{stroke:BASE_LINE_COLOR}}),r=createSVG("text",{className:"chart-label",x:this.totalWidth-getStringWidth(i,4.5)-LABEL_MARGIN,y:e-FONT_SIZE-2,dy:FONT_SIZE/2+"px","font-size":FONT_SIZE+"px","text-anchor":"start",innerHTML:i+""}),o=createSVG("g",{});return o.appendChild(a),o.appendChild(n),o.appendChild(s),o.appendChild(r),o}},{key:"animatebar",value:function(t,e,i,a,n){var s=e-this.avgUnitWidth/4,r=this.avgUnitWidth/2/n,o=getBarHeightAndYAttr(i,this.zeroLine,this.totalHeight),l=slicedToArray(o,2);return e=s+r*a,[t,{width:r,height:l[0],x:e,y:l[1]},UNIT_ANIM_DUR,STD_EASING]}},{key:"animatedot",value:function(t,e,i){return[t,{cx:e,cy:i},UNIT_ANIM_DUR,STD_EASING]}},{key:"animatepath",value:function(t,e){var i=[],a=[t[0],{d:"M"+e},PATH_ANIM_DUR,STD_EASING];if(i.push(a),t[1]){var n="0,"+this.zeroLine+"L",s="L"+this.totalWidth+", "+this.zeroLine,r=[t[1],{d:"M"+n+e+s},PATH_ANIM_DUR,STD_EASING];i.push(r)}return i}},{key:"translate",value:function(t,e,i,a){return[t,{transform:i.join(", ")},a,STD_EASING,"translate",{transform:e.join(", ")}]}},{key:"translateVertLine",value:function(t,e,i){return this.translate(t,[i,0],[e,0],MARKER_LINE_ANIM_DUR)}},{key:"translateHoriLine",value:function(t,e,i){return this.translate(t,[0,i],[0,e],MARKER_LINE_ANIM_DUR)}}]),t}(),PRESET_COLOR_MAP={"light-blue":"#7cd6fd",blue:"#5e64ff",violet:"#743ee2",red:"#ff5858",orange:"#ffa00a",yellow:"#feef72",green:"#28a745","light-green":"#98d85b",purple:"#b554ff",magenta:"#ffa3ef",black:"#36114C",grey:"#bdd3e6","light-grey":"#f0f4f7","dark-grey":"#b8c2cc"},DEFAULT_COLORS=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],getColor=function(t){return PRESET_COLOR_MAP[t]||t},ALL_CHART_TYPES=["line","scatter","bar","percentage","heatmap","pie"],COMPATIBLE_CHARTS={bar:["line","scatter","percentage","pie"],line:["scatter","bar","percentage","pie"],pie:["line","scatter","percentage","bar"],scatter:["line","bar","percentage","pie"],percentage:["bar","line","scatter","pie"],heatmap:[]},COLOR_COMPATIBLE_CHARTS={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},EASING={ease:"0.25 0.1 0.25 1",linear:"0 0 1 1",easein:"0.1 0.8 0.2 1",easeout:"0 0 0.58 1",easeinout:"0.42 0 0.58 1"},BaseChart=function(){function t(e){var i=e.height,a=void 0===i?240:i,n=e.title,s=void 0===n?"":n,r=e.subtitle,o=void 0===r?"":r,l=(e.colors,e.isNavigable),h=void 0===l?0:l,c=(e.showLegend,e.type,e.parent);classCallCheck(this,t),this.rawChartArgs=arguments[0],this.parent="string"==typeof c?document.querySelector(c):c,this.title=s,this.subtitle=o,this.argHeight=a,this.isNavigable=h,this.isNavigable&&(this.currentIndex=0),this.configure(arguments[0])}return createClass(t,[{key:"configure",value:function(t){this.setColors(),this.config={showTooltip:1,showLegend:1,isNavigable:0,animate:0},this.state={colors:this.colors}}},{key:"setColors",value:function(){var t=this.rawChartArgs,e="percentage"===t.type||"pie"===t.type?t.data.labels:t.data.datasets;!t.colors||e&&t.colors.length'+this.title+'\n\t\t\t\t
      '+this.subtitle+'
      \n\t\t\t\t
      \n\t\t\t\t
      '}),this.parent.innerHTML="",this.parent.appendChild(this.container),this.chartWrapper=this.container.querySelector(".frappe-chart"),this.statsWrapper=this.container.querySelector(".graph-stats-container")}},{key:"makeTooltip",value:function(){this.tip=new SvgTip({parent:this.chartWrapper,colors:this.colors}),this.bindTooltip()}},{key:"bindTooltip",value:function(){}},{key:"draw",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calcWidth(),this.refresh(this.data),this.makeChartArea(),this.setComponentParent(),this.makeComponentLayers(),this.renderLegend(),this.setupNavigation(t),this.renderComponents(),this.renderConstants(),this.config.animate&&this.update(this.firstUpdateData)}},{key:"update",value:function(t){this.refresh(t),this.reRender()}},{key:"calcWidth",value:function(){this.baseWidth=getElementContentWidth(this.parent)-0,this.width=this.baseWidth-(this.translateXLeft+this.translateXRight)}},{key:"refresh",value:function(t){this.oldState=this.state?JSON.parse(JSON.stringify(this.state)):{},this.intermedState={},this.prepareData(t),this.reCalc(),this.refreshRenderer()}},{key:"makeChartArea",value:function(){this.svg=makeSVGContainer(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svgDefs=makeSVGDefs(this.svg),this.drawArea=makeSVGGroup(this.svg,this.type+"-chart","translate("+this.translateXLeft+", "+this.translateY+")")}},{key:"prepareData",value:function(){}},{key:"renderConstants",value:function(){}},{key:"reCalc",value:function(){}},{key:"refreshRenderer",value:function(){}},{key:"reRender",value:function(){var t=this;if(!(!(arguments.length>0&&void 0!==arguments[0])||arguments[0]))return void this.renderComponents();this.elementsToAnimate=[],this.loadAnimatedComponents(),runSMILAnimation(this.chartWrapper,this.svg,this.elementsToAnimate),setTimeout(function(){t.renderComponents()},400)}},{key:"setComponentParent",value:function(){var t=this;this.components.forEach(function(e){return e.setupParent(t.drawArea)})}},{key:"makeComponentLayers",value:function(){this.components.forEach(function(t){return t.makeLayer()})}},{key:"renderComponents",value:function(){this.components.forEach(function(t){return t.render()})}},{key:"loadAnimatedComponents",value:function(){this.components.forEach(function(t){return t.loadAnimatedComponents()})}},{key:"renderLegend",value:function(){}},{key:"setupNavigation",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.isNavigable||(this.makeOverlay(),e&&(this.bindOverlay(),document.addEventListener("keydown",function(e){isElementInViewport(t.chartWrapper)&&("37"==(e=e||window.event).keyCode?t.onLeftArrow():"39"==e.keyCode?t.onRightArrow():"38"==e.keyCode?t.onUpArrow():"40"==e.keyCode?t.onDownArrow():"13"==e.keyCode&&t.onEnterKey())})))}},{key:"makeOverlay",value:function(){}},{key:"bindOverlay",value:function(){}},{key:"bind_units",value:function(){}},{key:"onLeftArrow",value:function(){}},{key:"onRightArrow",value:function(){}},{key:"onUpArrow",value:function(){}},{key:"onDownArrow",value:function(){}},{key:"onEnterKey",value:function(){}},{key:"getDataPoint",value:function(){}},{key:"updateCurrentDataPoint",value:function(){}},{key:"getDifferentChart",value:function(t){return getDifferentChart(t,this.type,this.rawChartArgs)}}]),t}(),Y_AXIS_MARGIN=60,ChartComponent=function(){function t(e){var i=e.layerClass,a=void 0===i?"":i,n=e.layerTransform,s=void 0===n?"":n,r=e.make,o=e.animate;classCallCheck(this,t),this.layerClass=a,this.layerTransform=s,this.make=r,this.animate=o,this.layer=void 0,this.store=[]}return createClass(t,[{key:"refresh",value:function(t){}},{key:"render",value:function(){var t=this;this.store=this.make(),this.layer.textContent="",this.store.forEach(function(e){t.layer.appendChild(e)})}},{key:"setupParent",value:function(t){this.parent=t}},{key:"loadAnimatedComponents",value:function(){this.animate(this.store)}},{key:"makeLayer",value:function(){this.layer=makeSVGGroup(this.parent,this.layerClass,this.layerTransform)}}]),t}(),AxisChartController=function(){function t(e){classCallCheck(this,t),this.refreshMeta(e),this.setupArgs()}return createClass(t,[{key:"setupArgs",value:function(){}},{key:"refreshMeta",value:function(t){this.meta=t||{}}},{key:"draw",value:function(){}},{key:"animate",value:function(){}}]),t}(),AxisController=function(t){function e(t){return classCallCheck(this,e),possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return inherits(e,t),createClass(e,[{key:"setupArgs",value:function(){}},{key:"draw",value:function(t,e,i,a){return createSVG("circle",{style:"fill: "+i,"data-point-index":a,cx:t,cy:e,r:this.args.radius})}},{key:"animate",value:function(t,e,i){return[t,{cx:e,cy:i},UNIT_ANIM_DUR,STD_EASING]}}]),e}(AxisChartController),BarChartController=function(t){function e(t){return classCallCheck(this,e),possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return inherits(e,t),createClass(e,[{key:"setupArgs",value:function(){this.args={spaceRatio:.5}}},{key:"draw",value:function(t,e,i,a,n,s){var r=this.meta.unitWidth-this.meta.unitWidth*this.args.spaceRatio,o=r,l=t-r/2,h=getBarHeightAndYAttr(e,this.meta.zeroLine,this.meta.totalHeight),c=slicedToArray(h,2),u=c[0];return createSVG("rect",{className:"bar mini",style:"fill: "+i,"data-point-index":a,x:l,y:c[1],width:o,height:u})}},{key:"animate",value:function(t,e,i,a,n){var s=e-this.meta.avgUnitWidth/4,r=this.meta.avgUnitWidth/2/n,o=getBarHeightAndYAttr(i,this.meta.zeroLine,this.meta.totalHeight),l=slicedToArray(o,2);return e=s+r*a,[t,{width:r,height:l[0],x:e,y:l[1]},UNIT_ANIM_DUR,STD_EASING]}}]),e}(AxisChartController),LineChartController=function(t){function e(t){return classCallCheck(this,e),possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return inherits(e,t),createClass(e,[{key:"setupArgs",value:function(){console.log(this),this.args={radius:this.meta.dotSize||4}}},{key:"draw",value:function(t,e,i,a){return createSVG("circle",{style:"fill: "+i,"data-point-index":a,cx:t,cy:e,r:this.args.radius})}},{key:"animate",value:function(t,e,i){return[t,{cx:e,cy:i},UNIT_ANIM_DUR,STD_EASING]}}]),e}(AxisChartController),AxisChart=function(t){function e(t){classCallCheck(this,e);var i=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.isSeries=t.isSeries,i.formatTooltipY=t.formatTooltipY,i.formatTooltipX=t.formatTooltipX,i.unitType=t.unitType||"line",i.setupUnitRenderer(),i.zeroLine=i.height,i.preSetup(),i.setup(),i}return inherits(e,t),createClass(e,[{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this),this.config.xAxisMode=t.xAxisMode,this.config.yAxisMode=t.yAxisMode}},{key:"preSetup",value:function(){}},{key:"setupUnitRenderer",value:function(){var t=this.rawChartArgs.options;this.unitRenderers={bar:new BarChartController(t),line:new LineChartController(t)}}},{key:"setHorizontalMargin",value:function(){this.translateXLeft=Y_AXIS_MARGIN,this.translateXRight=Y_AXIS_MARGIN}},{key:"checkData",value:function(t){return!0}},{key:"getFirstUpdateData",value:function(t){}},{key:"setupConstants",value:function(){var t=this;this.state={xAxisLabels:[],xAxisPositions:[],xAxisMode:this.config.xAxisMode,yAxisMode:this.config.yAxisMode},this.data.datasets.map(function(e){e.chartType||(e.chartType=t.unitType)}),this.prepareYAxis()}},{key:"prepareData",value:function(t){var e=this.state;e.xAxisLabels=t.labels||[],e.datasetLength=e.xAxisLabels.length;var i=new Array(e.datasetLength).fill(0);e.datasets=t.datasets,t.datasets||(e.datasets=[{values:i}]),e.datasets.map(function(t,a){var n=t.values;n=n?(n=n.map(function(t){return isNaN(t)?0:t})).length>e.datasetLength?n.slice(0,e.datasetLength):fillArray(n,e.datasetLength-n.length,0):i,t.index=a}),e.noOfDatasets=e.datasets.length,e.yMarkers=t.yMarkers,e.yRegions=t.yRegions}},{key:"prepareYAxis",value:function(){this.state.yAxis={labels:[],positions:[]}}},{key:"reCalc",value:function(){var t=this.state;t.xAxisLabels=this.data.labels,this.calcXPositions(),t.datasetsLabels=this.data.datasets.map(function(t){return t.name}),this.setYAxis(),this.calcYUnits(),this.calcYMaximums(),this.calcYRegions(),this.configUnits()}},{key:"setYAxis",value:function(){this.calcYAxisParameters(this.state.yAxis,this.getAllYValues(),"line"===this.type),this.state.zeroLine=this.state.yAxis.zeroLine}},{key:"calcXPositions",value:function(){var t=this.state;this.setUnitWidthAndXOffset(),t.xAxisPositions=t.xAxisLabels.map(function(e,i){return floatTwo(t.xOffset+i*t.unitWidth)}),t.xUnitPositions=new Array(t.noOfDatasets).fill(t.xAxisPositions)}},{key:"calcYAxisParameters",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"false";t.labels=calcIntervals(e,i);var a=t.labels;t.scaleMultiplier=this.height/getValueRange(a);var n=getIntervalSize(a)*t.scaleMultiplier;t.zeroLine=this.height-getZeroIndex(a)*n,t.positions=a.map(function(e){return t.zeroLine-e*t.scaleMultiplier})}},{key:"calcYUnits",value:function(){var t=this.state;t.datasets.map(function(e){e.positions=e.values.map(function(e){return floatTwo(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"calcYMaximums",value:function(){var t=this.state;t.yUnitMinimums=new Array(t.datasetLength).fill(9999),t.datasets.map(function(e,i){e.positions.map(function(e,i){e0)for(var h=0;h0)for(var l=0;l0)for(var l=0;l0&&(t=getPaths(r,s,i.colors[e],i.config.heatline,i.config.regionFill),o.textContent="",t.map(function(t){return o.appendChild(t)}));var p=n.map(function(t,e){return a[e]+","+t});i.elementsToAnimate=i.elementsToAnimate.concat(i.renderer.animatepath(t,p.join("L")))}})}},{key:"getYMarkerLines",value:function(){var t=this;return this.data.yMarkers?this.data.yMarkers.map(function(e,i){return new ChartComponent({layerClass:"y-markers",make:function(){return t.state.yMarkers.map(function(e){return t.renderer.yMarker(e.value,e.name,{pos:"right",mode:"span",lineType:e.type})})},animate:function(){}})}):[]}},{key:"getYRegions",value:function(){var t=this;return this.data.yRegions?this.data.yRegions.map(function(e,i){return new ChartComponent({layerClass:"y-regions",make:function(){return t.state.yRegions.map(function(e){return t.renderer.yRegion(e.start,e.end,e.name)})},animate:function(){}})}):[]}},{key:"getXRegions",value:function(){return[]}},{key:"refreshRenderer",value:function(){var t=this,e={totalHeight:this.height,totalWidth:this.width,xAxisMode:this.config.xAxisMode,yAxisMode:this.config.yAxisMode,zeroLine:this.state.zeroLine,unitWidth:this.state.unitWidth};this.renderer?this.renderer.refreshState(e):this.renderer=new AxisChartRenderer(e);var i={totalHeight:this.height,totalWidth:this.width,zeroLine:this.state.zeroLine,unitWidth:this.state.unitWidth};Object.keys(this.unitRenderers).map(function(e){t.unitRenderers[e].refreshMeta(i)})}},{key:"bindTooltip",value:function(){var t=this;this.chartWrapper.addEventListener("mousemove",function(e){var i=getOffset(t.chartWrapper),a=e.pageX-i.left-t.translateXLeft;e.pageY-i.top-t.translateY=0;s--){var r=i.xAxisPositions[s];if(t>r-i.unitWidth/2){var o=r+this.translateXLeft,l=i.yUnitMinimums[s]+this.translateY,h=i.datasets.map(function(t,i){return{title:t.title,value:n?e.formatTooltipY(t.values[s]):t.values[s],color:e.colors[i]}});this.tip.set_values(o,l,a[s],"",h),this.tip.show_tip();break}}}}},{key:"getDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.current_index,e={index:t},i=this.y[0];return["svg_units","yUnitPositions","values"].map(function(a){var n=a.slice(0,a.length-1);e[n]=i[a][t]}),e.label=this.xAxisLabels[t],e}},{key:"updateCurrentDataPoint",value:function(t){(t=parseInt(t))<0&&(t=0),t>=this.xAxisLabels.length&&(t=this.xAxisLabels.length-1),t!==this.current_index&&(this.current_index=t,$.fire(this.parent,"data-select",this.getDataPoint()))}},{key:"addDataPoint",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.state.datasetLength;this.data.labels.splice(i,0,t),this.data.datasets.map(function(t,a){t.values.splice(i,0,e[a])}),this.update(this.data)}},{key:"removeDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.datasetLength-1;this.data.labels.splice(t,1),this.data.datasets.map(function(e){e.values.splice(t,1)}),this.update(this.data)}},{key:"updateData",value:function(){}}]),e}(BaseChart),LineChart=function(t){function e(t){classCallCheck(this,e);var i=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="line",Object.getPrototypeOf(i)!==e.prototype?possibleConstructorReturn(i):(i.setup(),i)}return inherits(e,t),createClass(e,[{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"span",this.config.yAxisMode=t.yAxisMode||"span",this.config.dotRadius=t.dotRadius||4,this.config.heatline=t.heatline||0,this.config.regionFill=t.regionFill||0,this.config.showDots=t.showDots||1}},{key:"configUnits",value:function(){this.unitArgs={type:"dot",args:{radius:this.config.dotRadius}}}},{key:"setUnitWidthAndXOffset",value:function(){this.state.unitWidth=this.width/(this.state.datasetLength-1),this.state.xOffset=0}}]),e}(AxisChart),ScatterChart=function(t){function e(t){classCallCheck(this,e);var i=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="scatter",t.dotRadius?i.dotRadius=t.dotRadius:i.dotRadius=8,i.setup(),i}return inherits(e,t),createClass(e,[{key:"setup_values",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_values",this).call(this),this.unit_args={type:"dot",args:{radius:this.dotRadius}}}},{key:"make_paths",value:function(){}},{key:"make_path",value:function(){}}]),e}(LineChart),MultiAxisChart=function(t){function e(t){return classCallCheck(this,e),possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return inherits(e,t),createClass(e,[{key:"preSetup",value:function(){this.type="multiaxis"}},{key:"setHorizontalMargin",value:function(){var t=this.data.datasets.filter(function(t){return"left"===t.axisPosition}).length;this.translateXLeft=t*Y_AXIS_MARGIN||Y_AXIS_MARGIN,this.translateXRight=(this.data.datasets.length-t)*Y_AXIS_MARGIN||Y_AXIS_MARGIN}},{key:"prepareYAxis",value:function(){}},{key:"prepareData",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"prepareData",this).call(this,t);var i=0,a=0;this.state.datasets.forEach(function(t,e){t.yAxis={position:t.axisPosition,index:"left"===t.axisPosition?i++:a++}})}},{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"tick",this.config.yAxisMode=t.yAxisMode||"span"}},{key:"configUnits",value:function(){this.unitArgs={type:"bar",args:{spaceWidth:this.state.unitWidth/2}}}},{key:"setYAxis",value:function(){var t=this;this.state.datasets.map(function(e){t.calcYAxisParameters(e.yAxis,e.values,"line"===t.unitType)})}},{key:"calcYUnits",value:function(){this.state.datasets.map(function(t){t.positions=t.values.map(function(e){return floatTwo(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"renderConstants",value:function(){var t=this;this.state.datasets.map(function(e){var a="left"===e.yAxis.position?-1*e.yAxis.index*Y_AXIS_MARGIN:t.width+e.yAxis.index*Y_AXIS_MARGIN;t.renderer.xLine(a,"",{pos:"top",mode:"span",stroke:t.colors[i],className:"y-axis-guide"})})}},{key:"getYAxesComponents",value:function(){var t=this;return this.data.datasets.map(function(e,i){return new ChartComponent({layerClass:"y axis y-axis-"+i,make:function(){var e=t.state.datasets[i].yAxis;t.renderer.setZeroline(e.zeroline);var a={pos:e.position,mode:"tick",offset:e.index*Y_AXIS_MARGIN,stroke:t.colors[i]};return e.positions.map(function(i,n){return t.renderer.yLine(i,e.labels[n],a)})},animate:function(){}})})}},{key:"getChartComponents",value:function(){var t=this;return this.data.datasets.map(function(e,i){return new ChartComponent({layerClass:"dataset-units dataset-"+i,make:function(){var e=t.state.datasets[i],a=t.unitArgs;return t.renderer.setZeroline(e.yAxis.zeroLine),e.positions.map(function(e,n){return t.renderer[a.type](t.state.xAxisPositions[n],e,a.args,t.colors[i],n,i,t.state.datasetLength)})},animate:function(e){var a=t.state.datasets[i],n=t.unitArgs.type,s=t.state.xAxisPositions,r=t.state.datasets[i].positions,o=e[e.length-1],l=o.parentNode;if(t.oldState.xExtra>0)for(var h=0;h0}),i=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),i=e.slice(0,this.max_slices-1);var a=0;e.slice(this.max_slices-1).map(function(t){a+=t[0]}),i.push([a,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],i.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"renderComponents",value:function(){var t=this;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0),this.slices=[],this.slice_totals.map(function(e,i){var a=$$1.create("div",{className:"progress-bar",inside:t.percentageBar,styles:{background:t.colors[i],width:100*e/t.grand_total+"%"}});t.slices.push(a)})}},{key:"bindTooltip",value:function(){var t=this;this.slices.map(function(e,i){e.addEventListener("mouseenter",function(){var a=getOffset(t.chartWrapper),n=getOffset(e),s=n.left-a.left+e.offsetWidth/2,r=n.top-a.top-6,o=(t.formatted_labels&&t.formatted_labels.length>0?t.formatted_labels[i]:t.labels[i])+": ",l=(100*t.slice_totals[i]/t.grand_total).toFixed(1);t.tip.set_values(s,r,o,l+"%"),t.tip.show_tip()})})}},{key:"renderLegend",value:function(){var t=this,e=this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels:this.labels;this.legend_totals.map(function(i,a){i&&($$1.create("div",{className:"stats",inside:t.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+e[a]+":\n\t\t\t\t\t"+i+"\n\t\t\t\t")})}}]),e}(BaseChart),ANGLE_RATIO=Math.PI/180,FULL_ANGLE=360,PieChart=function(t){function e(t){classCallCheck(this,e);var i=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="pie",i.elements_to_animate=null,i.hoverRadio=t.hoverRadio||.1,i.max_slices=10,i.max_legend_points=6,i.isAnimate=!1,i.startAngle=t.startAngle||0,i.clockWise=t.clockWise||!1,i.mouseMove=i.mouseMove.bind(i),i.mouseLeave=i.mouseLeave.bind(i),i.setup(),i}return inherits(e,t),createClass(e,[{key:"setup_values",value:function(){var t=this;this.centerX=this.width/2,this.centerY=this.height/2,this.radius=this.height>this.width?this.centerX:this.centerY,this.slice_totals=[];var e=this.data.labels.map(function(e,i){var a=0;return t.data.datasets.map(function(t){a+=t.values[i]}),[a,e]}).filter(function(t){return t[0]>0}),i=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),i=e.slice(0,this.max_slices-1);var a=0;e.slice(this.max_slices-1).map(function(t){a+=t[0]}),i.push([a,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],i.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"makeArcPath",value:function(t,e){var i=this.centerX,a=this.centerY,n=this.radius,s=this.clockWise;return"M"+i+" "+a+" L"+(i+t.x)+" "+(a+t.y)+" A "+n+" "+n+" 0 0 "+(s?1:0)+" "+(i+e.x)+" "+(a+e.y)+" z"}},{key:"renderComponents",value:function(t){var i=this,a=this.radius,n=this.clockWise;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0);var s=this.slicesProperties||[];this.slices=[],this.elements_to_animate=[],this.slicesProperties=[];var r=180-this.startAngle;this.slice_totals.map(function(o,l){var h=r,c=o/i.grand_total*FULL_ANGLE,u=n?-c:c,p=r+=u,d=e.getPositionByAngle(h,a),f=e.getPositionByAngle(p,a),v=t&&s[l],g=void 0,y=void 0;t?(g=v?v.startPosition:d,y=v?v.endPosition:d):(g=d,y=f);var m=i.makeArcPath(g,y),_=makePath(m,"pie-path","none",i.colors[l]);_.style.transition="transform .3s;",i.drawArea.appendChild(_),i.slices.push(_),i.slicesProperties.push({startPosition:d,endPosition:f,value:o,total:i.grand_total,startAngle:h,endAngle:p,angle:u}),t&&i.elements_to_animate.push([{unit:_,array:i.slices,index:i.slices.length-1},{d:i.makeArcPath(d,f)},650,"easein",null,{d:m}])}),t&&runSMILAnimation(this.chartWrapper,this.svg,this.elements_to_animate)}},{key:"calTranslateByAngle",value:function(t){var i=this.radius,a=this.hoverRadio,n=e.getPositionByAngle(t.startAngle+t.angle/2,i);return"translate3d("+n.x*a+"px,"+n.y*a+"px,0)"}},{key:"hoverSlice",value:function(t,e,i,a){if(t){var n=this.colors[e];if(i){transform(t,this.calTranslateByAngle(this.slicesProperties[e])),t.style.fill=lightenDarkenColor(n,50);var s=getOffset(this.svg),r=a.pageX-s.left+10,o=a.pageY-s.top-10,l=(this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels[e]:this.labels[e])+": ",h=(100*this.slice_totals[e]/this.grand_total).toFixed(1);this.tip.set_values(r,o,l,h+"%"),this.tip.show_tip()}else transform(t,"translate3d(0,0,0)"),this.tip.hide_tip(),t.style.fill=n}}},{key:"mouseMove",value:function(t){for(var e=t.target,i=this.curActiveSliceIndex,a=this.curActiveSlice,n=0;n0?this.formatted_labels:this.labels;this.legend_totals.map(function(i,a){var n=t.colors[a];i&&($$1.create("div",{className:"stats",inside:t.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+e[a]+":\n\t\t\t\t\t"+i+"\n\t\t\t\t")})}}],[{key:"getPositionByAngle",value:function(t,e){return{x:Math.sin(t*ANGLE_RATIO)*e,y:Math.cos(t*ANGLE_RATIO)*e}}}]),e}(BaseChart),Heatmap=function(t){function e(t){var i=t.start,a=void 0===i?"":i,n=t.domain,s=void 0===n?"":n,r=t.subdomain,o=void 0===r?"":r,l=t.data,h=void 0===l?{}:l,c=t.discrete_domains,u=void 0===c?0:c,p=t.count_label,d=void 0===p?"":p,f=t.legend_colors,v=void 0===f?[]:f;classCallCheck(this,e);var g=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,arguments[0]));g.type="heatmap",g.domain=s,g.subdomain=o,g.data=h,g.discrete_domains=u,g.count_label=d;var y=new Date;return g.start=a||addDays(y,365),v=v.slice(0,5),g.legend_colors=g.validate_colors(v)?v:["#ebedf0","#c6e48b","#7bc96f","#239a3b","#196127"],g.distribution_size=5,g.translateX=0,g}return inherits(e,t),createClass(e,[{key:"validate_colors",value:function(t){if(t.length<5)return 0;var e=1;return t.forEach(function(t){isValidColor(t)||(e=0,console.warn('"'+t+'" is not a valid color.'))},this),e}},{key:"setupConstants",value:function(){this.today=new Date,this.start||(this.start=new Date,this.start.setFullYear(this.start.getFullYear()-1)),this.first_week_start=new Date(this.start.toDateString()),this.last_week_start=new Date(this.today.toDateString()),7!==this.first_week_start.getDay()&&addDays(this.first_week_start,-1*this.first_week_start.getDay()),7!==this.last_week_start.getDay()&&addDays(this.last_week_start,-1*this.last_week_start.getDay()),this.no_of_cols=getWeeksBetween(this.first_week_start+"",this.last_week_start+"")+1}},{key:"calcWidth",value:function(){this.baseWidth=12*(this.no_of_cols+3),this.discrete_domains&&(this.baseWidth+=144)}},{key:"setupLayers",value:function(){this.domain_label_group=this.makeLayer("domain-label-group chart-label"),this.data_groups=this.makeLayer("data-groups","translate(0, 20)")}},{key:"setup_values",value:function(){var t=this;this.domain_label_group.textContent="",this.data_groups.textContent="";var e=Object.keys(this.data).map(function(e){return t.data[e]});this.distribution=calcDistribution(e,this.distribution_size),this.month_names=["January","February","March","April","May","June","July","August","September","October","November","December"],this.render_all_weeks_and_store_x_values(this.no_of_cols)}},{key:"render_all_weeks_and_store_x_values",value:function(t){var e=new Date(this.first_week_start);this.week_col=0,this.current_month=e.getMonth(),this.months=[this.current_month+""],this.month_weeks={},this.month_start_points=[],this.month_weeks[this.current_month]=0,this.month_start_points.push(13);for(var i=0;ii)break;v.getMonth()-t.getMonth()&&(a=1,this.discrete_domains&&(n=1),this.month_start_points.push(13+12*(e+n))),t=v}return[s,a]}},{key:"render_month_labels",value:function(){var t=this;this.months.shift(),this.month_start_points.shift(),this.months.pop(),this.month_start_points.pop(),this.month_start_points.map(function(e,i){var a=makeText("y-value-text",e+12,10,t.month_names[t.months[i]].substring(0,3));t.domain_label_group.appendChild(a)})}},{key:"renderComponents",value:function(){Array.prototype.slice.call(this.container.querySelectorAll(".graph-stats-container, .sub-title, .title")).map(function(t){t.style.display="None"}),this.chartWrapper.style.marginTop="0px",this.chartWrapper.style.paddingTop="0px"}},{key:"bindTooltip",value:function(){var t=this;Array.prototype.slice.call(document.querySelectorAll(".data-group .day")).map(function(e){e.addEventListener("mouseenter",function(e){var i=e.target.getAttribute("data-value"),a=e.target.getAttribute("data-date").split("-"),n=t.month_names[parseInt(a[1])-1].substring(0,3),s=t.chartWrapper.getBoundingClientRect(),r=e.target.getBoundingClientRect(),o=parseInt(e.target.getAttribute("width")),l=r.left-s.left+(o+2)/2,h=r.top-s.top-(o+2)/2,c=i+" "+t.count_label,u=" on "+n+" "+a[0]+", "+a[2];t.tip.set_values(l,h,u,c,[],1),t.tip.show_tip()})})}},{key:"update",value:function(t){this.data=t,this.setup_values(),this.bindTooltip()}}]),e}(BaseChart),chartTypes={mixed:AxisChart,multiaxis:MultiAxisChart,scatter:ScatterChart,percentage:PercentageChart,heatmap:Heatmap,pie:PieChart},Chart=function t(e){return classCallCheck(this,t),getChartByType(e.type,arguments[0])};module.exports=Chart; diff --git a/dist/frappe-charts.min.esm.js b/dist/frappe-charts.min.esm.js index 5d3a7e7..82a8df1 100644 --- a/dist/frappe-charts.min.esm.js +++ b/dist/frappe-charts.min.esm.js @@ -1 +1 @@ -function __$styleInject(t,e){if("undefined"==typeof document)return e;t=t||"";var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");return i.type="text/css",a.appendChild(i),i.styleSheet?i.styleSheet.cssText=t:i.appendChild(document.createTextNode(t)),e}function $(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function getOffset(t){var e=t.getBoundingClientRect();return{top:e.top+(document.documentElement.scrollTop||document.body.scrollTop),left:e.left+(document.documentElement.scrollLeft||document.body.scrollLeft)}}function isElementInViewport(t){var e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}function getElementContentWidth(t){var e=window.getComputedStyle(t),a=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return t.clientWidth-a}function floatTwo(t){return parseFloat(t.toFixed(2))}function fillArray(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]&&arguments[3];a||(a=i?t[0]:t[t.length-1]);var n=new Array(Math.abs(e)).fill(a);return t=i?n.concat(t):t.concat(n)}function getBarHeightAndYAttr(t,e,a){var i=void 0,n=void 0;return t<=e?(n=t,0===(i=e-t)&&(n-=i=a*MIN_BAR_PERCENT_HEIGHT)):(n=e,0===(i=t-e)&&(i=a*MIN_BAR_PERCENT_HEIGHT)),[i,n]}function equilizeNoOfElements(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.length-t.length;return a>0?t=fillArray(t,a):e=fillArray(e,a),[t,e]}function $$1(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function createSVG(t,e){var a=document.createElementNS("http://www.w3.org/2000/svg",t);for(var i in e){var n=e[i];if("inside"===i)$$1(n).appendChild(a);else if("around"===i){var s=$$1(n);s.parentNode.insertBefore(a,s),a.appendChild(s)}else"styles"===i?"object"===(void 0===n?"undefined":_typeof(n))&&Object.keys(n).map(function(t){a.style[t]=n[t]}):("className"===i&&(i="class"),"innerHTML"===i?a.textContent=n:a.setAttribute(i,n))}return a}function renderVerticalGradient(t,e){return createSVG("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function setGradientStop(t,e,a,i){return createSVG("stop",{inside:t,style:"stop-color: "+a,offset:e,"stop-opacity":i})}function makeSVGContainer(t,e,a,i){return createSVG("svg",{className:e,inside:t,width:a,height:i})}function makeSVGDefs(t){return createSVG("defs",{inside:t})}function makeSVGGroup(t,e){return createSVG("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function makePath(t){return createSVG("path",{className:arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",d:t,styles:{stroke:arguments.length>2&&void 0!==arguments[2]?arguments[2]:"none",fill:arguments.length>3&&void 0!==arguments[3]?arguments[3]:"none"}})}function makeGradient(t,e){var a=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i="path-fill-gradient-"+e,n=renderVerticalGradient(t,i),s=[1,.6,.2];return a&&(s=[.4,.2,0]),setGradientStop(n,"0%",e,s[0]),setGradientStop(n,"50%",e,s[1]),setGradientStop(n,"100%",e,s[2]),i}function makeHeatSquare(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"none",s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},r={className:t,x:e,y:a,width:i,height:i,fill:n};return Object.keys(s).map(function(t){r[t]=s[t]}),createSVG("rect",r)}function makeText(t,e,a,i){return createSVG("text",{className:t,x:e,y:a,dy:FONT_SIZE/2+"px","font-size":FONT_SIZE+"px",innerHTML:i})}function makeVertLine(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};n.stroke||(n.stroke=BASE_LINE_COLOR);var s=createSVG("line",{className:"line-vertical "+n.className,x1:0,x2:0,y1:a,y2:i,styles:{stroke:n.stroke}}),r=createSVG("text",{x:0,y:a>i?a+LABEL_MARGIN:a-LABEL_MARGIN-FONT_SIZE,dy:FONT_SIZE+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:e}),o=createSVG("g",{transform:"translate("+t+", 0)"});return o.appendChild(s),o.appendChild(r),o}function makeHoriLine(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};n.stroke||(n.stroke=BASE_LINE_COLOR),n.lineType||(n.lineType="");var s=createSVG("line",{className:"line-horizontal "+n.className+("dashed"===n.lineType?"dashed":""),x1:a,x2:i,y1:0,y2:0,styles:{stroke:n.stroke}}),r=createSVG("text",{x:a255?255:t<0?0:t}function lightenDarkenColor(t,e){var a=getColor(t),i=!1;"#"==a[0]&&(a=a.slice(1),i=!0);var n=parseInt(a,16),s=limitColor((n>>16)+e),r=limitColor((n>>8&255)+e),o=limitColor((255&n)+e);return(i?"#":"")+(o|r<<8|s<<16).toString(16)}function isValidColor(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t)}function getDifferentChart(t,e,a){if(t!==e){ALL_CHART_TYPES.includes(t)||console.error("'"+t+"' is not a valid chart type."),COMPATIBLE_CHARTS[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var i=COLOR_COMPATIBLE_CHARTS[e].includes(t);return new Chart({parent:a.parent,title:a.title,data:a.data,type:t,height:a.height,colors:i?a.colors:void 0})}}function animateSVGElement(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"linear",n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:void 0,s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},r=t.cloneNode(!0),o=t.cloneNode(!0);for(var l in e){var h=void 0;h="transform"===l?document.createElementNS("http://www.w3.org/2000/svg","animateTransform"):document.createElementNS("http://www.w3.org/2000/svg","animate");var c=s[l]||t.getAttribute(l),u=e[l],p={attributeName:l,from:c,to:u,begin:"0s",dur:a/1e3+"s",values:c+";"+u,keySplines:EASING[i],keyTimes:"0;1",calcMode:"spline",fill:"freeze"};n&&(p.type=n);for(var d in p)h.setAttribute(d,p[d]);r.appendChild(h),n?o.setAttribute(l,"translate("+u+")"):o.setAttribute(l,u)}return[r,o]}function transform(t,e){t.style.transform=e,t.style.webkitTransform=e,t.style.msTransform=e,t.style.mozTransform=e,t.style.oTransform=e}function animateSVG(t,e){var a=[],i=[];e.map(function(t){var e=t[0],n=e.parentNode,s=void 0,r=void 0;t[0]=e;var o=animateSVGElement.apply(void 0,toConsumableArray(t)),l=slicedToArray(o,2);s=l[0],r=l[1],a.push(r),i.push([s,n]),n.replaceChild(s,e)});var n=t.cloneNode(!0);return i.map(function(t,i){t[1].replaceChild(a[i],t[0]),e[i][0]=a[i]}),n}function runSMILAnimation(t,e,a){if(0!==a.length){var i=animateSVG(e,a);e.parentNode==t&&(t.removeChild(e),t.appendChild(i)),setTimeout(function(){i.parentNode==t&&(t.removeChild(i),t.appendChild(e))},REPLACE_ALL_NEW_DUR)}}function normalize(t){if(0===t)return[0,0];if(isNaN(t))return{mantissa:-6755399441055744,exponent:972};var e=t>0?1:-1;if(!isFinite(t))return{mantissa:4503599627370496*e,exponent:972};t=Math.abs(t);var a=Math.floor(Math.log10(t));return[e*(t/Math.pow(10,a)),a]}function getRangeIntervals(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,a=Math.ceil(t),i=Math.floor(e),n=a-i,s=n,r=1;n>5&&(n%2!=0&&(n=++a-i),s=n/2,r=2),n<=2&&(r=n/(s=4)),0===n&&(s=5,r=1);for(var o=[],l=0;l<=s;l++)o.push(i+r*l);return o}function getIntervals(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,a=normalize(t),i=slicedToArray(a,2),n=i[0],s=i[1],r=e?e/Math.pow(10,s):0,o=getRangeIntervals(n=n.toFixed(6),r);return o=o.map(function(t){return t*Math.pow(10,s)})}function calcIntervals(t){function e(t,e){for(var a=getIntervals(t),i=a[1]-a[0],n=0,s=1;n1&&void 0!==arguments[1]&&arguments[1],i=Math.max.apply(Math,toConsumableArray(t)),n=Math.min.apply(Math,toConsumableArray(t)),s=[];if(i>=0&&n>=0)normalize(i)[1],s=a?getIntervals(i,n):getIntervals(i);else if(i>0&&n<0){var r=Math.abs(n);i>=r?(normalize(i)[1],s=e(i,r)):(normalize(r)[1],s=e(r,i).map(function(t){return-1*t}))}else if(i<=0&&n<=0){var o=Math.abs(n),l=Math.abs(i);normalize(o)[1],s=(s=a?getIntervals(o,l):getIntervals(o)).reverse().map(function(t){return-1*t})}return s}function getZeroIndex(t){var e=getIntervalSize(t);return t.indexOf(0)>=0?t.indexOf(0):t[0]>0?-1*t[0]/e:-1*t[t.length-1]/e+(t.length-1)}function getIntervalSize(t){return t[1]-t[0]}function getValueRange(t){return t[t.length-1]-t[0]}function calcDistribution(t,e){for(var a=Math.max.apply(Math,toConsumableArray(t)),i=1/(e-1),n=[],s=0;s9?"":"0")+e,(a>9?"":"0")+a,t.getFullYear()].join("-")}function getWeeksBetween(t,e){return Math.ceil(getDaysBetween(t,e)/7)}function getDaysBetween(t,e){return(treatAsUtc(e)-treatAsUtc(t))/864e5}function addDays(t,e){t.setDate(t.getDate()+e)}function getChartByType(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return chartTypes[t]?new chartTypes[t](e):new LineChart(e)}__$styleInject('.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path,.chart-container .multiaxis-chart .line-horizontal,.chart-container .multiaxis-chart .y-axis-guide{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}',void 0);var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},asyncGenerator=function(){function t(t){this.value=t}function e(e){function a(t,e){return new Promise(function(a,n){var o={key:t,arg:e,resolve:a,reject:n,next:null};r?r=r.next=o:(s=r=o,i(t,e))})}function i(a,s){try{var r=e[a](s),o=r.value;o instanceof t?Promise.resolve(o.value).then(function(t){i("next",t)},function(t){i("throw",t)}):n(r.done?"return":"normal",r.value)}catch(t){n("throw",t)}}function n(t,e){switch(t){case"return":s.resolve({value:e,done:!0});break;case"throw":s.reject(e);break;default:s.resolve({value:e,done:!1})}(s=s.next)?i(s.key,s.arg):r=null}var s,r;this._invoke=a,"function"!=typeof e.return&&(this.return=void 0)}return"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)},{wrap:function(t){return function(){return new e(t.apply(this,arguments))}},await:function(e){return new t(e)}}}(),classCallCheck=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},createClass=function(){function t(t,e){for(var a=0;a\n\t\t\t\t
        \n\t\t\t\t
        '}),this.hide_tip(),this.title=this.container.querySelector(".title"),this.data_point_list=this.container.querySelector(".data-point-list"),this.parent.addEventListener("mouseleave",function(){t.hide_tip()})}},{key:"fill",value:function(){var t=this,e=void 0;e=this.title_value_first?""+this.title_value+""+this.title_name:this.title_name+""+this.title_value+"",this.title.innerHTML=e,this.data_point_list.innerHTML="",this.list_values.map(function(e,a){var i=t.colors[a]||"black",n=$.create("li",{styles:{"border-top":"3px solid "+i},innerHTML:''+(0===e.value||e.value?e.value:"")+"\n\t\t\t\t\t"+(e.title?e.title:"")});t.data_point_list.appendChild(n)})}},{key:"calc_position",value:function(){var t=this.container.offsetWidth;this.top=this.y-this.container.offsetHeight,this.left=this.x-t/2;var e=this.parent.offsetWidth-t,a=this.container.querySelector(".svg-pointer");if(this.left<0)a.style.left="calc(50% - "+-1*this.left+"px)",this.left=0;else if(this.left>e){var i="calc(50% + "+(this.left-e)+"px)";a.style.left=i,this.left=e}else a.style.left="50%"}},{key:"set_values",value:function(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0;this.title_name=a,this.title_value=i,this.list_values=n,this.x=t,this.y=e,this.title_value_first=s,this.refresh()}},{key:"hide_tip",value:function(){this.container.style.top="0px",this.container.style.left="0px",this.container.style.opacity="0"}},{key:"show_tip",value:function(){this.container.style.top=this.top+"px",this.container.style.left=this.left+"px",this.container.style.opacity="1"}}]),t}(),MIN_BAR_PERCENT_HEIGHT=.01,UNIT_ANIM_DUR=350,PATH_ANIM_DUR=350,MARKER_LINE_ANIM_DUR=UNIT_ANIM_DUR,REPLACE_ALL_NEW_DUR=250,STD_EASING="easein",AXIS_TICK_LENGTH=6,LABEL_MARGIN=4,FONT_SIZE=10,BASE_LINE_COLOR="#dadada",AxisChartRenderer=function(){function t(e){classCallCheck(this,t),this.refreshState(e)}return createClass(t,[{key:"refreshState",value:function(t){this.totalHeight=t.totalHeight,this.totalWidth=t.totalWidth,this.zeroLine=t.zeroLine,this.unitWidth=t.unitWidth,this.xAxisMode=t.xAxisMode,this.yAxisMode=t.yAxisMode}},{key:"setZeroline",value:function(t){this.zeroLine=t}},{key:"bar",value:function(t,e,a,i,n,s,r){var o=this.unitWidth-a.spaceWidth,l=o,h=t-o/2,c=getBarHeightAndYAttr(e,this.zeroLine,this.totalHeight),u=slicedToArray(c,2),p=u[0];return createSVG("rect",{className:"bar mini",style:"fill: "+i,"data-point-index":n,x:h,y:u[1],width:l,height:p})}},{key:"dot",value:function(t,e,a,i,n){return createSVG("circle",{style:"fill: "+i,"data-point-index":n,cx:t,cy:e,r:a.radius})}},{key:"xLine",value:function(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};a.pos||(a.pos="bottom"),a.offset||(a.offset=0),a.mode||(a.mode=this.xAxisMode),a.stroke||(a.stroke=BASE_LINE_COLOR),a.className||(a.className="");var i=this.totalHeight+AXIS_TICK_LENGTH,n="span"===a.mode?-1*AXIS_TICK_LENGTH:this.totalHeight;return"tick"===a.mode&&"top"===a.pos&&(i=-1*AXIS_TICK_LENGTH,n=0),makeVertLine(t,e,i,n,{stroke:a.stroke,className:a.className})}},{key:"yLine",value:function(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};a.pos||(a.pos="left"),a.offset||(a.offset=0),a.mode||(a.mode=this.yAxisMode),a.stroke||(a.stroke=BASE_LINE_COLOR),a.className||(a.className="");var i=-1*AXIS_TICK_LENGTH,n="span"===a.mode?this.totalWidth+AXIS_TICK_LENGTH:0;return"tick"===a.mode&&"right"===a.pos&&(i=this.totalWidth+AXIS_TICK_LENGTH,n=this.totalWidth),i+=a.offset,n+=a.offset,makeHoriLine(t,e,i,n,{stroke:a.stroke,className:a.className})}},{key:"xMarker",value:function(){}},{key:"yMarker",value:function(){}},{key:"xRegion",value:function(){}},{key:"yRegion",value:function(){}},{key:"animatebar",value:function(t,e,a,i,n){var s=e-this.avgUnitWidth/4,r=this.avgUnitWidth/2/n,o=getBarHeightAndYAttr(a,this.zeroLine,this.totalHeight),l=slicedToArray(o,2);return e=s+r*i,[t,{width:r,height:l[0],x:e,y:l[1]},UNIT_ANIM_DUR,STD_EASING]}},{key:"animatedot",value:function(t,e,a){return[t,{cx:e,cy:a},UNIT_ANIM_DUR,STD_EASING]}},{key:"animatepath",value:function(t,e){var a=[],i=[t[0],{d:"M"+e},PATH_ANIM_DUR,STD_EASING];if(a.push(i),t[1]){var n="0,"+this.zeroLine+"L",s="L"+this.totalWidth+", "+this.zeroLine,r=[t[1],{d:"M"+n+e+s},PATH_ANIM_DUR,STD_EASING];a.push(r)}return a}},{key:"translate",value:function(t,e,a,i){return[t,{transform:a.join(", ")},i,STD_EASING,"translate",{transform:e.join(", ")}]}},{key:"translateVertLine",value:function(t,e,a){return this.translate(t,[a,0],[e,0],MARKER_LINE_ANIM_DUR)}},{key:"translateHoriLine",value:function(t,e,a){return this.translate(t,[0,a],[0,e],MARKER_LINE_ANIM_DUR)}}]),t}(),PRESET_COLOR_MAP={"light-blue":"#7cd6fd",blue:"#5e64ff",violet:"#743ee2",red:"#ff5858",orange:"#ffa00a",yellow:"#feef72",green:"#28a745","light-green":"#98d85b",purple:"#b554ff",magenta:"#ffa3ef",black:"#36114C",grey:"#bdd3e6","light-grey":"#f0f4f7","dark-grey":"#b8c2cc"},DEFAULT_COLORS=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],getColor=function(t){return PRESET_COLOR_MAP[t]||t},ALL_CHART_TYPES=["line","scatter","bar","percentage","heatmap","pie"],COMPATIBLE_CHARTS={bar:["line","scatter","percentage","pie"],line:["scatter","bar","percentage","pie"],pie:["line","scatter","percentage","bar"],scatter:["line","bar","percentage","pie"],percentage:["bar","line","scatter","pie"],heatmap:[]},COLOR_COMPATIBLE_CHARTS={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},EASING={ease:"0.25 0.1 0.25 1",linear:"0 0 1 1",easein:"0.1 0.8 0.2 1",easeout:"0 0 0.58 1",easeinout:"0.42 0 0.58 1"},BaseChart=function(){function t(e){var a=e.height,i=void 0===a?240:a,n=e.title,s=void 0===n?"":n,r=e.subtitle,o=void 0===r?"":r,l=(e.colors,e.isNavigable),h=void 0===l?0:l,c=(e.showLegend,e.type,e.parent);classCallCheck(this,t),this.rawChartArgs=arguments[0],this.parent="string"==typeof c?document.querySelector(c):c,this.title=s,this.subtitle=o,this.argHeight=i,this.isNavigable=h,this.isNavigable&&(this.currentIndex=0),this.configure(arguments[0])}return createClass(t,[{key:"configure",value:function(t){this.setColors(),this.config={showTooltip:1,showLegend:1,isNavigable:0,animate:0},this.state={colors:this.colors}}},{key:"setColors",value:function(){var t=this.rawChartArgs,e="percentage"===t.type||"pie"===t.type?t.data.labels:t.data.datasets;!t.colors||e&&t.colors.length'+this.title+'\n\t\t\t\t
        '+this.subtitle+'
        \n\t\t\t\t
        \n\t\t\t\t
        '}),this.parent.innerHTML="",this.parent.appendChild(this.container),this.chartWrapper=this.container.querySelector(".frappe-chart"),this.statsWrapper=this.container.querySelector(".graph-stats-container")}},{key:"makeTooltip",value:function(){this.tip=new SvgTip({parent:this.chartWrapper,colors:this.colors}),this.bindTooltip()}},{key:"bindTooltip",value:function(){}},{key:"draw",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calcWidth(),this.refresh(this.data),this.makeChartArea(),this.setComponentParent(),this.makeComponentLayers(),this.renderLegend(),this.setupNavigation(t),this.renderComponents(),this.renderConstants(),this.config.animate&&this.update(this.firstUpdateData)}},{key:"update",value:function(t){this.refresh(t),this.reRender()}},{key:"calcWidth",value:function(){this.baseWidth=getElementContentWidth(this.parent)-0,this.width=this.baseWidth-(this.translateXLeft+this.translateXRight)}},{key:"refresh",value:function(t){this.oldState=this.state?JSON.parse(JSON.stringify(this.state)):{},this.intermedState={},this.prepareData(t),this.reCalc(),this.refreshRenderer()}},{key:"makeChartArea",value:function(){this.svg=makeSVGContainer(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svgDefs=makeSVGDefs(this.svg),this.drawArea=makeSVGGroup(this.svg,this.type+"-chart","translate("+this.translateXLeft+", "+this.translateY+")")}},{key:"prepareData",value:function(){}},{key:"renderConstants",value:function(){}},{key:"reCalc",value:function(){}},{key:"refreshRenderer",value:function(){}},{key:"reRender",value:function(){var t=this;if(!(!(arguments.length>0&&void 0!==arguments[0])||arguments[0]))return void this.renderComponents();this.elementsToAnimate=[],this.loadAnimatedComponents(),runSMILAnimation(this.chartWrapper,this.svg,this.elementsToAnimate),setTimeout(function(){t.renderComponents()},400)}},{key:"setComponentParent",value:function(){var t=this;this.components.forEach(function(e){return e.setupParent(t.drawArea)})}},{key:"makeComponentLayers",value:function(){this.components.forEach(function(t){return t.makeLayer()})}},{key:"renderComponents",value:function(){this.components.forEach(function(t){return t.render()})}},{key:"loadAnimatedComponents",value:function(){this.components.forEach(function(t){return t.loadAnimatedComponents()})}},{key:"renderLegend",value:function(){}},{key:"setupNavigation",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.isNavigable||(this.makeOverlay(),e&&(this.bindOverlay(),document.addEventListener("keydown",function(e){isElementInViewport(t.chartWrapper)&&("37"==(e=e||window.event).keyCode?t.onLeftArrow():"39"==e.keyCode?t.onRightArrow():"38"==e.keyCode?t.onUpArrow():"40"==e.keyCode?t.onDownArrow():"13"==e.keyCode&&t.onEnterKey())})))}},{key:"makeOverlay",value:function(){}},{key:"bindOverlay",value:function(){}},{key:"bind_units",value:function(){}},{key:"onLeftArrow",value:function(){}},{key:"onRightArrow",value:function(){}},{key:"onUpArrow",value:function(){}},{key:"onDownArrow",value:function(){}},{key:"onEnterKey",value:function(){}},{key:"getDataPoint",value:function(){}},{key:"updateCurrentDataPoint",value:function(){}},{key:"getDifferentChart",value:function(t){return getDifferentChart(t,this.type,this.rawChartArgs)}}]),t}(),Y_AXIS_MARGIN=60,ChartComponent=function(){function t(e){var a=e.layerClass,i=void 0===a?"":a,n=e.layerTransform,s=void 0===n?"":n,r=e.make,o=e.animate;classCallCheck(this,t),this.layerClass=i,this.layerTransform=s,this.make=r,this.animate=o,this.layer=void 0,this.store=[]}return createClass(t,[{key:"refresh",value:function(t){}},{key:"render",value:function(){var t=this;this.store=this.make(),this.layer.textContent="",this.store.forEach(function(e){t.layer.appendChild(e)})}},{key:"setupParent",value:function(t){this.parent=t}},{key:"loadAnimatedComponents",value:function(){this.animate(this.store)}},{key:"makeLayer",value:function(){this.layer=makeSVGGroup(this.parent,this.layerClass,this.layerTransform)}}]),t}(),AxisChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.is_series=t.is_series,a.format_tooltip_y=t.format_tooltip_y,a.format_tooltip_x=t.format_tooltip_x,a.zeroLine=a.height,a}return inherits(e,t),createClass(e,[{key:"setHorizontalMargin",value:function(){this.translateXLeft=Y_AXIS_MARGIN,this.translateXRight=Y_AXIS_MARGIN}},{key:"checkData",value:function(t){return!0}},{key:"getFirstUpdateData",value:function(t){}},{key:"setupConstants",value:function(){this.state={xAxisLabels:[],xAxisPositions:[]},this.prepareYAxis()}},{key:"prepareData",value:function(t){var e=this.state;e.xAxisLabels=t.labels||[],e.datasetLength=e.xAxisLabels.length;var a=new Array(e.datasetLength).fill(0);e.datasets=t.datasets,t.datasets||(e.datasets=[{values:a}]),e.datasets.map(function(t,i){var n=t.values;n=n?(n=n.map(function(t){return isNaN(t)?0:t})).length>e.datasetLength?n.slice(0,e.datasetLength):fillArray(n,e.datasetLength-n.length,0):a,t.index=i}),e.noOfDatasets=e.datasets.length}},{key:"prepareYAxis",value:function(){this.state.yAxis={labels:[],positions:[]}}},{key:"reCalc",value:function(){var t=this.state;t.xAxisLabels=this.data.labels,this.calcXPositions(),t.datasetsLabels=this.data.datasets.map(function(t){return t.name}),this.setYAxis(),this.calcYUnits(),this.calcYMaximums(),this.configUnits()}},{key:"setYAxis",value:function(){this.calcYAxisParameters(this.state.yAxis,this.getAllYValues(),"line"===this.type),this.state.zeroLine=this.state.yAxis.zeroLine}},{key:"calcXPositions",value:function(){var t=this.state;this.setUnitWidthAndXOffset(),t.xAxisPositions=t.xAxisLabels.map(function(e,a){return floatTwo(t.xOffset+a*t.unitWidth)}),t.xUnitPositions=new Array(t.noOfDatasets).fill(t.xAxisPositions)}},{key:"calcYAxisParameters",value:function(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"false";t.labels=calcIntervals(e,a);var i=t.labels;t.scaleMultiplier=this.height/getValueRange(i);var n=getIntervalSize(i)*t.scaleMultiplier;t.zeroLine=this.height-getZeroIndex(i)*n,t.positions=i.map(function(e){return t.zeroLine-e*t.scaleMultiplier})}},{key:"calcYUnits",value:function(){var t=this.state;t.datasets.map(function(e){e.positions=e.values.map(function(e){return floatTwo(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"calcYMaximums",value:function(){var t=this.state;t.yUnitMinimums=new Array(t.datasetLength).fill(9999),t.datasets.map(function(e,a){e.positions.map(function(e,a){e0)for(var h=0;h0)for(var l=0;l0)for(var l=0;l2&&void 0!==arguments[2]?arguments[2]:this.state.datasetLength;this.data.labels.splice(a,0,t),this.data.datasets.map(function(t,i){t.values.splice(a,0,e[i])}),this.update(this.data)}},{key:"removeDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.datasetLength-1;this.data.labels.splice(t,1),this.data.datasets.map(function(e){e.values.splice(t,1)}),this.update(this.data)}},{key:"updateData",value:function(){}}]),e}(BaseChart),BarChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.type="bar",a.setup(),a}return inherits(e,t),createClass(e,[{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"tick",this.config.yAxisMode=t.yAxisMode||"span"}},{key:"configUnits",value:function(){this.unitArgs={type:"bar",args:{spaceWidth:this.state.unitWidth/2}}}}]),e}(AxisChart),LineChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.type="line",Object.getPrototypeOf(a)!==e.prototype?possibleConstructorReturn(a):(a.setup(),a)}return inherits(e,t),createClass(e,[{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"span",this.config.yAxisMode=t.yAxisMode||"span",this.config.dotRadius=t.dotRadius||4,this.config.heatline=t.heatline||0,this.config.regionFill=t.regionFill||0,this.config.showDots=t.showDots||1}},{key:"configUnits",value:function(){this.unitArgs={type:"dot",args:{radius:this.config.dotRadius}}}},{key:"setUnitWidthAndXOffset",value:function(){this.state.unitWidth=this.width/(this.state.datasetLength-1),this.state.xOffset=0}},{key:"getDataUnitsComponents",value:function(t){return t.showDots?get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"getDataUnitsComponents",this).call(this):[]}},{key:"getPathComponents",value:function(){var t=this;return this.data.datasets.map(function(e,a){return new ChartComponent({layerClass:"path dataset-path",make:function(){var e=t.state.datasets[a],i=t.colors[a];return t.getPaths(e.positions,t.state.xAxisPositions,i,t.config.heatline,t.config.regionFill)},animate:function(e){var i=t.state.xAxisPositions,n=t.state.datasets[a].positions,s=t.oldState.xAxisPositions,r=t.oldState.datasets[a].positions,o=e[0].parentNode,l=equilizeNoOfElements(s,i),h=slicedToArray(l,2);s=h[0],i=h[1];var c=equilizeNoOfElements(r,n),u=slicedToArray(c,2);r=u[0],n=u[1],t.oldState.xExtra>0&&(e=t.getPaths(r,s,t.colors[a],t.config.heatline,t.config.regionFill),o.textContent="",e.map(function(t){return o.appendChild(t)}));var p=n.map(function(t,e){return i[e]+","+t});t.elementsToAnimate=t.elementsToAnimate.concat(t.renderer.animatepath(e,p.join("L")))}})})}},{key:"getPaths",value:function(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]&&arguments[3],n=arguments.length>4&&void 0!==arguments[4]&&arguments[4],s=t.map(function(t,a){return e[a]+","+t}).join("L"),r=makePath("M"+s,"line-graph-path",a);if(i){var o=makeGradient(this.svgDefs,a);r.style.stroke="url(#"+o+")"}var l=[r];if(n){var h=makeGradient(this.svgDefs,a,!0),c=this.state.yAxis.zeroLine,u="M0,"+c+"L"+s+"L"+this.width+","+c;l.push(makePath(u,"region-fill","none","url(#"+h+")"))}return l}}]),e}(AxisChart),ScatterChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.type="scatter",t.dotRadius?a.dotRadius=t.dotRadius:a.dotRadius=8,a.setup(),a}return inherits(e,t),createClass(e,[{key:"setup_values",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_values",this).call(this),this.unit_args={type:"dot",args:{radius:this.dotRadius}}}},{key:"make_paths",value:function(){}},{key:"make_path",value:function(){}}]),e}(LineChart),MultiAxisChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.type="multiaxis",a.unitType=t.unitType||"line",a.setup(),a}return inherits(e,t),createClass(e,[{key:"setHorizontalMargin",value:function(){var t=this.data.datasets.filter(function(t){return"left"===t.axisPosition}).length;this.translateXLeft=t*Y_AXIS_MARGIN||Y_AXIS_MARGIN,this.translateXRight=(this.data.datasets.length-t)*Y_AXIS_MARGIN||Y_AXIS_MARGIN}},{key:"prepareYAxis",value:function(){}},{key:"prepareData",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"prepareData",this).call(this,t);var a=0,i=0;this.state.datasets.forEach(function(t,e){t.yAxis={position:t.axisPosition,index:"left"===t.axisPosition?a++:i++}})}},{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"tick",this.config.yAxisMode=t.yAxisMode||"span"}},{key:"configUnits",value:function(){this.unitArgs={type:"bar",args:{spaceWidth:this.state.unitWidth/2}}}},{key:"setYAxis",value:function(){var t=this;this.state.datasets.map(function(e){t.calcYAxisParameters(e.yAxis,e.values,"line"===t.unitType)})}},{key:"calcYUnits",value:function(){this.state.datasets.map(function(t){t.positions=t.values.map(function(e){return floatTwo(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"renderConstants",value:function(){var t=this;this.state.datasets.map(function(e){var a="left"===e.yAxis.position?-1*e.yAxis.index*Y_AXIS_MARGIN:t.width+e.yAxis.index*Y_AXIS_MARGIN;t.renderer.xLine(a,"",{pos:"top",mode:"span",stroke:t.colors[i],className:"y-axis-guide"})})}},{key:"getYAxesComponents",value:function(){var t=this;return this.data.datasets.map(function(e,a){return new ChartComponent({layerClass:"y axis y-axis-"+a,make:function(){var e=t.state.datasets[a].yAxis;t.renderer.setZeroline(e.zeroline);var i={pos:e.position,mode:"tick",offset:e.index*Y_AXIS_MARGIN,stroke:t.colors[a]};return e.positions.map(function(a,n){return t.renderer.yLine(a,e.labels[n],i)})},animate:function(){}})})}},{key:"getDataUnitsComponents",value:function(){var t=this;return this.data.datasets.map(function(e,a){return new ChartComponent({layerClass:"dataset-units dataset-"+a,make:function(){var e=t.state.datasets[a],i=t.unitArgs;return t.renderer.setZeroline(e.yAxis.zeroLine),e.positions.map(function(e,n){return t.renderer[i.type](t.state.xAxisPositions[n],e,i.args,t.colors[a],n,a,t.state.datasetLength)})},animate:function(e){var i=t.state.datasets[a],n=t.unitArgs.type,s=t.state.xAxisPositions,r=t.state.datasets[a].positions,o=e[e.length-1],l=o.parentNode;if(t.oldState.xExtra>0)for(var h=0;h0}),a=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),a=e.slice(0,this.max_slices-1);var i=0;e.slice(this.max_slices-1).map(function(t){i+=t[0]}),a.push([i,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],a.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"renderComponents",value:function(){var t=this;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0),this.slices=[],this.slice_totals.map(function(e,a){var i=$.create("div",{className:"progress-bar",inside:t.percentageBar,styles:{background:t.colors[a],width:100*e/t.grand_total+"%"}});t.slices.push(i)})}},{key:"bindTooltip",value:function(){var t=this;this.slices.map(function(e,a){e.addEventListener("mouseenter",function(){var i=getOffset(t.chartWrapper),n=getOffset(e),s=n.left-i.left+e.offsetWidth/2,r=n.top-i.top-6,o=(t.formatted_labels&&t.formatted_labels.length>0?t.formatted_labels[a]:t.labels[a])+": ",l=(100*t.slice_totals[a]/t.grand_total).toFixed(1);t.tip.set_values(s,r,o,l+"%"),t.tip.show_tip()})})}},{key:"renderLegend",value:function(){var t=this,e=this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels:this.labels;this.legend_totals.map(function(a,i){a&&($.create("div",{className:"stats",inside:t.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+e[i]+":\n\t\t\t\t\t"+a+"\n\t\t\t\t")})}}]),e}(BaseChart),ANGLE_RATIO=Math.PI/180,FULL_ANGLE=360,PieChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.type="pie",a.elements_to_animate=null,a.hoverRadio=t.hoverRadio||.1,a.max_slices=10,a.max_legend_points=6,a.isAnimate=!1,a.startAngle=t.startAngle||0,a.clockWise=t.clockWise||!1,a.mouseMove=a.mouseMove.bind(a),a.mouseLeave=a.mouseLeave.bind(a),a.setup(),a}return inherits(e,t),createClass(e,[{key:"setup_values",value:function(){var t=this;this.centerX=this.width/2,this.centerY=this.height/2,this.radius=this.height>this.width?this.centerX:this.centerY,this.slice_totals=[];var e=this.data.labels.map(function(e,a){var i=0;return t.data.datasets.map(function(t){i+=t.values[a]}),[i,e]}).filter(function(t){return t[0]>0}),a=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),a=e.slice(0,this.max_slices-1);var i=0;e.slice(this.max_slices-1).map(function(t){i+=t[0]}),a.push([i,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],a.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"makeArcPath",value:function(t,e){var a=this.centerX,i=this.centerY,n=this.radius,s=this.clockWise;return"M"+a+" "+i+" L"+(a+t.x)+" "+(i+t.y)+" A "+n+" "+n+" 0 0 "+(s?1:0)+" "+(a+e.x)+" "+(i+e.y)+" z"}},{key:"renderComponents",value:function(t){var a=this,i=this.radius,n=this.clockWise;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0);var s=this.slicesProperties||[];this.slices=[],this.elements_to_animate=[],this.slicesProperties=[];var r=180-this.startAngle;this.slice_totals.map(function(o,l){var h=r,c=o/a.grand_total*FULL_ANGLE,u=n?-c:c,p=r+=u,d=e.getPositionByAngle(h,i),f=e.getPositionByAngle(p,i),v=t&&s[l],g=void 0,y=void 0;t?(g=v?v.startPosition:d,y=v?v.endPosition:d):(g=d,y=f);var m=a.makeArcPath(g,y),_=makePath(m,"pie-path","none",a.colors[l]);_.style.transition="transform .3s;",a.drawArea.appendChild(_),a.slices.push(_),a.slicesProperties.push({startPosition:d,endPosition:f,value:o,total:a.grand_total,startAngle:h,endAngle:p,angle:u}),t&&a.elements_to_animate.push([{unit:_,array:a.slices,index:a.slices.length-1},{d:a.makeArcPath(d,f)},650,"easein",null,{d:m}])}),t&&runSMILAnimation(this.chartWrapper,this.svg,this.elements_to_animate)}},{key:"calTranslateByAngle",value:function(t){var a=this.radius,i=this.hoverRadio,n=e.getPositionByAngle(t.startAngle+t.angle/2,a);return"translate3d("+n.x*i+"px,"+n.y*i+"px,0)"}},{key:"hoverSlice",value:function(t,e,a,i){if(t){var n=this.colors[e];if(a){transform(t,this.calTranslateByAngle(this.slicesProperties[e])),t.style.fill=lightenDarkenColor(n,50);var s=getOffset(this.svg),r=i.pageX-s.left+10,o=i.pageY-s.top-10,l=(this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels[e]:this.labels[e])+": ",h=(100*this.slice_totals[e]/this.grand_total).toFixed(1);this.tip.set_values(r,o,l,h+"%"),this.tip.show_tip()}else transform(t,"translate3d(0,0,0)"),this.tip.hide_tip(),t.style.fill=n}}},{key:"mouseMove",value:function(t){for(var e=t.target,a=this.curActiveSliceIndex,i=this.curActiveSlice,n=0;n0?this.formatted_labels:this.labels;this.legend_totals.map(function(a,i){var n=t.colors[i];a&&($.create("div",{className:"stats",inside:t.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+e[i]+":\n\t\t\t\t\t"+a+"\n\t\t\t\t")})}}],[{key:"getPositionByAngle",value:function(t,e){return{x:Math.sin(t*ANGLE_RATIO)*e,y:Math.cos(t*ANGLE_RATIO)*e}}}]),e}(BaseChart),Heatmap=function(t){function e(t){var a=t.start,i=void 0===a?"":a,n=t.domain,s=void 0===n?"":n,r=t.subdomain,o=void 0===r?"":r,l=t.data,h=void 0===l?{}:l,c=t.discrete_domains,u=void 0===c?0:c,p=t.count_label,d=void 0===p?"":p,f=t.legend_colors,v=void 0===f?[]:f;classCallCheck(this,e);var g=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,arguments[0]));g.type="heatmap",g.domain=s,g.subdomain=o,g.data=h,g.discrete_domains=u,g.count_label=d;var y=new Date;return g.start=i||addDays(y,365),v=v.slice(0,5),g.legend_colors=g.validate_colors(v)?v:["#ebedf0","#c6e48b","#7bc96f","#239a3b","#196127"],g.distribution_size=5,g.translateX=0,g}return inherits(e,t),createClass(e,[{key:"validate_colors",value:function(t){if(t.length<5)return 0;var e=1;return t.forEach(function(t){isValidColor(t)||(e=0,console.warn('"'+t+'" is not a valid color.'))},this),e}},{key:"setupConstants",value:function(){this.today=new Date,this.start||(this.start=new Date,this.start.setFullYear(this.start.getFullYear()-1)),this.first_week_start=new Date(this.start.toDateString()),this.last_week_start=new Date(this.today.toDateString()),7!==this.first_week_start.getDay()&&addDays(this.first_week_start,-1*this.first_week_start.getDay()),7!==this.last_week_start.getDay()&&addDays(this.last_week_start,-1*this.last_week_start.getDay()),this.no_of_cols=getWeeksBetween(this.first_week_start+"",this.last_week_start+"")+1}},{key:"calcWidth",value:function(){this.baseWidth=12*(this.no_of_cols+3),this.discrete_domains&&(this.baseWidth+=144)}},{key:"setupLayers",value:function(){this.domain_label_group=this.makeLayer("domain-label-group chart-label"),this.data_groups=this.makeLayer("data-groups","translate(0, 20)")}},{key:"setup_values",value:function(){var t=this;this.domain_label_group.textContent="",this.data_groups.textContent="";var e=Object.keys(this.data).map(function(e){return t.data[e]});this.distribution=calcDistribution(e,this.distribution_size),this.month_names=["January","February","March","April","May","June","July","August","September","October","November","December"],this.render_all_weeks_and_store_x_values(this.no_of_cols)}},{key:"render_all_weeks_and_store_x_values",value:function(t){var e=new Date(this.first_week_start);this.week_col=0,this.current_month=e.getMonth(),this.months=[this.current_month+""],this.month_weeks={},this.month_start_points=[],this.month_weeks[this.current_month]=0,this.month_start_points.push(13);for(var a=0;aa)break;v.getMonth()-t.getMonth()&&(i=1,this.discrete_domains&&(n=1),this.month_start_points.push(13+12*(e+n))),t=v}return[s,i]}},{key:"render_month_labels",value:function(){var t=this;this.months.shift(),this.month_start_points.shift(),this.months.pop(),this.month_start_points.pop(),this.month_start_points.map(function(e,a){var i=makeText("y-value-text",e+12,10,t.month_names[t.months[a]].substring(0,3));t.domain_label_group.appendChild(i)})}},{key:"renderComponents",value:function(){Array.prototype.slice.call(this.container.querySelectorAll(".graph-stats-container, .sub-title, .title")).map(function(t){t.style.display="None"}),this.chartWrapper.style.marginTop="0px",this.chartWrapper.style.paddingTop="0px"}},{key:"bindTooltip",value:function(){var t=this;Array.prototype.slice.call(document.querySelectorAll(".data-group .day")).map(function(e){e.addEventListener("mouseenter",function(e){var a=e.target.getAttribute("data-value"),i=e.target.getAttribute("data-date").split("-"),n=t.month_names[parseInt(i[1])-1].substring(0,3),s=t.chartWrapper.getBoundingClientRect(),r=e.target.getBoundingClientRect(),o=parseInt(e.target.getAttribute("width")),l=r.left-s.left+(o+2)/2,h=r.top-s.top-(o+2)/2,c=a+" "+t.count_label,u=" on "+n+" "+i[0]+", "+i[2];t.tip.set_values(l,h,u,c,[],1),t.tip.show_tip()})})}},{key:"update",value:function(t){this.data=t,this.setup_values(),this.bindTooltip()}}]),e}(BaseChart),chartTypes={line:LineChart,bar:BarChart,multiaxis:MultiAxisChart,scatter:ScatterChart,percentage:PercentageChart,heatmap:Heatmap,pie:PieChart},Chart=function t(e){return classCallCheck(this,t),getChartByType(e.type,arguments[0])};export default Chart; +function __$styleInject(t,e){if("undefined"==typeof document)return e;t=t||"";var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");return a.type="text/css",i.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t)),e}function $$1(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function getOffset(t){var e=t.getBoundingClientRect();return{top:e.top+(document.documentElement.scrollTop||document.body.scrollTop),left:e.left+(document.documentElement.scrollLeft||document.body.scrollLeft)}}function isElementInViewport(t){var e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}function getElementContentWidth(t){var e=window.getComputedStyle(t),i=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return t.clientWidth-i}function floatTwo(t){return parseFloat(t.toFixed(2))}function fillArray(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]&&arguments[3];i||(i=a?t[0]:t[t.length-1]);var n=new Array(Math.abs(e)).fill(i);return t=a?n.concat(t):t.concat(n)}function getStringWidth(t,e){return(t+"").length*e}function getBarHeightAndYAttr(t,e,i){var a=void 0,n=void 0;return t<=e?(n=t,0===(a=e-t)&&(n-=a=i*MIN_BAR_PERCENT_HEIGHT)):(n=e,0===(a=t-e)&&(a=i*MIN_BAR_PERCENT_HEIGHT)),[a,n]}function equilizeNoOfElements(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.length-t.length;return i>0?t=fillArray(t,i):e=fillArray(e,i),[t,e]}function $$2(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function createSVG(t,e){var i=document.createElementNS("http://www.w3.org/2000/svg",t);for(var a in e){var n=e[a];if("inside"===a)$$2(n).appendChild(i);else if("around"===a){var s=$$2(n);s.parentNode.insertBefore(i,s),i.appendChild(s)}else"styles"===a?"object"===(void 0===n?"undefined":_typeof(n))&&Object.keys(n).map(function(t){i.style[t]=n[t]}):("className"===a&&(a="class"),"innerHTML"===a?i.textContent=n:i.setAttribute(a,n))}return i}function renderVerticalGradient(t,e){return createSVG("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function setGradientStop(t,e,i,a){return createSVG("stop",{inside:t,style:"stop-color: "+i,offset:e,"stop-opacity":a})}function makeSVGContainer(t,e,i,a){return createSVG("svg",{className:e,inside:t,width:i,height:a})}function makeSVGDefs(t){return createSVG("defs",{inside:t})}function makeSVGGroup(t,e){return createSVG("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function makePath(t){return createSVG("path",{className:arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",d:t,styles:{stroke:arguments.length>2&&void 0!==arguments[2]?arguments[2]:"none",fill:arguments.length>3&&void 0!==arguments[3]?arguments[3]:"none"}})}function makeGradient(t,e){var i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],a="path-fill-gradient-"+e,n=renderVerticalGradient(t,a),s=[1,.6,.2];return i&&(s=[.4,.2,0]),setGradientStop(n,"0%",e,s[0]),setGradientStop(n,"50%",e,s[1]),setGradientStop(n,"100%",e,s[2]),a}function makeHeatSquare(t,e,i,a){var n=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},s={className:t,x:e,y:i,width:a,height:a,fill:1};return Object.keys(n).map(function(t){s[t]=n[t]}),createSVG("rect",s)}function makeText(t,e,i,a){return createSVG("text",{className:t,x:e,y:i,dy:FONT_SIZE/2+"px","font-size":FONT_SIZE+"px",innerHTML:a})}function makeVertLine(t,e,i,a){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};n.stroke||(n.stroke=BASE_LINE_COLOR);var s=createSVG("line",{className:"line-vertical "+n.className,x1:0,x2:0,y1:i,y2:a,styles:{stroke:n.stroke}}),r=createSVG("text",{x:0,y:i>a?i+LABEL_MARGIN:i-LABEL_MARGIN-FONT_SIZE,dy:FONT_SIZE+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:e}),o=createSVG("g",{transform:"translate("+t+", 0)"});return o.appendChild(s),o.appendChild(r),o}function makeHoriLine(t,e,i,a){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};n.stroke||(n.stroke=BASE_LINE_COLOR),n.lineType||(n.lineType="");var s=createSVG("line",{className:"line-horizontal "+n.className+("dashed"===n.lineType?"dashed":""),x1:i,x2:a,y1:t,y2:t,styles:{stroke:n.stroke}}),r=createSVG("text",{x:i255?255:t<0?0:t}function lightenDarkenColor(t,e){var i=getColor(t),a=!1;"#"==i[0]&&(i=i.slice(1),a=!0);var n=parseInt(i,16),s=limitColor((n>>16)+e),r=limitColor((n>>8&255)+e),o=limitColor((255&n)+e);return(a?"#":"")+(o|r<<8|s<<16).toString(16)}function isValidColor(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t)}function getDifferentChart(t,e,i){if(t!==e){ALL_CHART_TYPES.includes(t)||console.error("'"+t+"' is not a valid chart type."),COMPATIBLE_CHARTS[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var a=COLOR_COMPATIBLE_CHARTS[e].includes(t);return new Chart({parent:i.parent,title:i.title,data:i.data,type:t,height:i.height,colors:a?i.colors:void 0})}}function animateSVGElement(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"linear",n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:void 0,s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},r=t.cloneNode(!0),o=t.cloneNode(!0);for(var l in e){var h=void 0;h="transform"===l?document.createElementNS("http://www.w3.org/2000/svg","animateTransform"):document.createElementNS("http://www.w3.org/2000/svg","animate");var c=s[l]||t.getAttribute(l),u=e[l],p={attributeName:l,from:c,to:u,begin:"0s",dur:i/1e3+"s",values:c+";"+u,keySplines:EASING[a],keyTimes:"0;1",calcMode:"spline",fill:"freeze"};n&&(p.type=n);for(var d in p)h.setAttribute(d,p[d]);r.appendChild(h),n?o.setAttribute(l,"translate("+u+")"):o.setAttribute(l,u)}return[r,o]}function transform(t,e){t.style.transform=e,t.style.webkitTransform=e,t.style.msTransform=e,t.style.mozTransform=e,t.style.oTransform=e}function animateSVG(t,e){var i=[],a=[];e.map(function(t){var e=t[0],n=e.parentNode,s=void 0,r=void 0;t[0]=e;var o=animateSVGElement.apply(void 0,toConsumableArray(t)),l=slicedToArray(o,2);s=l[0],r=l[1],i.push(r),a.push([s,n]),n.replaceChild(s,e)});var n=t.cloneNode(!0);return a.map(function(t,a){t[1].replaceChild(i[a],t[0]),e[a][0]=i[a]}),n}function runSMILAnimation(t,e,i){if(0!==i.length){var a=animateSVG(e,i);e.parentNode==t&&(t.removeChild(e),t.appendChild(a)),setTimeout(function(){a.parentNode==t&&(t.removeChild(a),t.appendChild(e))},REPLACE_ALL_NEW_DUR)}}function getPaths(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]&&arguments[3],n=arguments.length>4&&void 0!==arguments[4]&&arguments[4],s=t.map(function(t,i){return e[i]+","+t}).join("L"),r=makePath("M"+s,"line-graph-path",i);if(a){var o=makeGradient(this.svgDefs,i);r.style.stroke="url(#"+o+")"}var l=[r];if(n){var h=makeGradient(this.svgDefs,i,!0),c=this.state.yAxis.zeroLine,u="M0,"+c+"L"+s+"L"+this.width+","+c;l.push(makePath(u,"region-fill","none","url(#"+h+")"))}return l}function normalize(t){if(0===t)return[0,0];if(isNaN(t))return{mantissa:-6755399441055744,exponent:972};var e=t>0?1:-1;if(!isFinite(t))return{mantissa:4503599627370496*e,exponent:972};t=Math.abs(t);var i=Math.floor(Math.log10(t));return[e*(t/Math.pow(10,i)),i]}function getRangeIntervals(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=Math.ceil(t),a=Math.floor(e),n=i-a,s=n,r=1;n>5&&(n%2!=0&&(n=++i-a),s=n/2,r=2),n<=2&&(r=n/(s=4)),0===n&&(s=5,r=1);for(var o=[],l=0;l<=s;l++)o.push(a+r*l);return o}function getIntervals(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=normalize(t),a=slicedToArray(i,2),n=a[0],s=a[1],r=e?e/Math.pow(10,s):0,o=getRangeIntervals(n=n.toFixed(6),r);return o=o.map(function(t){return t*Math.pow(10,s)})}function calcIntervals(t){function e(t,e){for(var i=getIntervals(t),a=i[1]-i[0],n=0,s=1;n1&&void 0!==arguments[1]&&arguments[1],a=Math.max.apply(Math,toConsumableArray(t)),n=Math.min.apply(Math,toConsumableArray(t)),s=[];if(a>=0&&n>=0)normalize(a)[1],s=i?getIntervals(a,n):getIntervals(a);else if(a>0&&n<0){var r=Math.abs(n);a>=r?(normalize(a)[1],s=e(a,r)):(normalize(r)[1],s=e(r,a).map(function(t){return-1*t}))}else if(a<=0&&n<=0){var o=Math.abs(n),l=Math.abs(a);normalize(o)[1],s=(s=i?getIntervals(o,l):getIntervals(o)).reverse().map(function(t){return-1*t})}return s}function getZeroIndex(t){var e=getIntervalSize(t);return t.indexOf(0)>=0?t.indexOf(0):t[0]>0?-1*t[0]/e:-1*t[t.length-1]/e+(t.length-1)}function getIntervalSize(t){return t[1]-t[0]}function getValueRange(t){return t[t.length-1]-t[0]}function calcDistribution(t,e){for(var i=Math.max.apply(Math,toConsumableArray(t)),a=1/(e-1),n=[],s=0;s9?"":"0")+e,(i>9?"":"0")+i,t.getFullYear()].join("-")}function getWeeksBetween(t,e){return Math.ceil(getDaysBetween(t,e)/7)}function getDaysBetween(t,e){return(treatAsUtc(e)-treatAsUtc(t))/864e5}function addDays(t,e){t.setDate(t.getDate()+e)}function getChartByType(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return"line"===t?(e.unitType="line",new AxisChart(e)):"bar"===t?(e.unitType="bar",new AxisChart(e)):chartTypes[t]?new chartTypes[t](e):void console.error("Undefined chart type: "+t)}__$styleInject('.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path,.chart-container .multiaxis-chart .line-horizontal,.chart-container .multiaxis-chart .y-axis-guide{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}',void 0);var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},asyncGenerator=function(){function t(t){this.value=t}function e(e){function i(t,e){return new Promise(function(i,n){var o={key:t,arg:e,resolve:i,reject:n,next:null};r?r=r.next=o:(s=r=o,a(t,e))})}function a(i,s){try{var r=e[i](s),o=r.value;o instanceof t?Promise.resolve(o.value).then(function(t){a("next",t)},function(t){a("throw",t)}):n(r.done?"return":"normal",r.value)}catch(t){n("throw",t)}}function n(t,e){switch(t){case"return":s.resolve({value:e,done:!0});break;case"throw":s.reject(e);break;default:s.resolve({value:e,done:!1})}(s=s.next)?a(s.key,s.arg):r=null}var s,r;this._invoke=i,"function"!=typeof e.return&&(this.return=void 0)}return"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)},{wrap:function(t){return function(){return new e(t.apply(this,arguments))}},await:function(e){return new t(e)}}}(),classCallCheck=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},createClass=function(){function t(t,e){for(var i=0;i\n\t\t\t\t
          \n\t\t\t\t
          '}),this.hide_tip(),this.title=this.container.querySelector(".title"),this.data_point_list=this.container.querySelector(".data-point-list"),this.parent.addEventListener("mouseleave",function(){t.hide_tip()})}},{key:"fill",value:function(){var t=this,e=void 0;e=this.title_value_first?""+this.title_value+""+this.title_name:this.title_name+""+this.title_value+"",this.title.innerHTML=e,this.data_point_list.innerHTML="",this.list_values.map(function(e,i){var a=t.colors[i]||"black",n=$$1.create("li",{styles:{"border-top":"3px solid "+a},innerHTML:''+(0===e.value||e.value?e.value:"")+"\n\t\t\t\t\t"+(e.title?e.title:"")});t.data_point_list.appendChild(n)})}},{key:"calc_position",value:function(){var t=this.container.offsetWidth;this.top=this.y-this.container.offsetHeight,this.left=this.x-t/2;var e=this.parent.offsetWidth-t,i=this.container.querySelector(".svg-pointer");if(this.left<0)i.style.left="calc(50% - "+-1*this.left+"px)",this.left=0;else if(this.left>e){var a="calc(50% + "+(this.left-e)+"px)";i.style.left=a,this.left=e}else i.style.left="50%"}},{key:"set_values",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0;this.title_name=i,this.title_value=a,this.list_values=n,this.x=t,this.y=e,this.title_value_first=s,this.refresh()}},{key:"hide_tip",value:function(){this.container.style.top="0px",this.container.style.left="0px",this.container.style.opacity="0"}},{key:"show_tip",value:function(){this.container.style.top=this.top+"px",this.container.style.left=this.left+"px",this.container.style.opacity="1"}}]),t}(),MIN_BAR_PERCENT_HEIGHT=.01,UNIT_ANIM_DUR=350,PATH_ANIM_DUR=350,MARKER_LINE_ANIM_DUR=UNIT_ANIM_DUR,REPLACE_ALL_NEW_DUR=250,STD_EASING="easein",AXIS_TICK_LENGTH=6,LABEL_MARGIN=4,FONT_SIZE=10,BASE_LINE_COLOR="#dadada",AxisChartRenderer=function(){function t(e){classCallCheck(this,t),this.refreshState(e)}return createClass(t,[{key:"refreshState",value:function(t){this.totalHeight=t.totalHeight,this.totalWidth=t.totalWidth,this.zeroLine=t.zeroLine,this.unitWidth=t.unitWidth,this.xAxisMode=t.xAxisMode,this.yAxisMode=t.yAxisMode}},{key:"setZeroline",value:function(t){this.zeroLine=t}},{key:"xLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};i.pos||(i.pos="bottom"),i.offset||(i.offset=0),i.mode||(i.mode=this.xAxisMode),console.log(this.xAxisMode),i.stroke||(i.stroke=BASE_LINE_COLOR),i.className||(i.className="");var a=this.totalHeight+AXIS_TICK_LENGTH,n="span"===i.mode?-1*AXIS_TICK_LENGTH:this.totalHeight;return"tick"===i.mode&&"top"===i.pos&&(a=-1*AXIS_TICK_LENGTH,n=0),makeVertLine(t,e,a,n,{stroke:i.stroke,className:i.className,lineType:i.lineType})}},{key:"yLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};i.pos||(i.pos="left"),i.offset||(i.offset=0),i.mode||(i.mode=this.yAxisMode),i.stroke||(i.stroke=BASE_LINE_COLOR),i.className||(i.className="");var a=-1*AXIS_TICK_LENGTH,n="span"===i.mode?this.totalWidth+AXIS_TICK_LENGTH:0;return"tick"===i.mode&&"right"===i.pos&&(a=this.totalWidth+AXIS_TICK_LENGTH,n=this.totalWidth),a+=i.offset,n+=i.offset,makeHoriLine(t,e,a,n,{stroke:i.stroke,className:i.className,lineType:i.lineType})}},{key:"xMarker",value:function(){}},{key:"yMarker",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},a=createSVG("text",{className:"chart-label",x:this.totalWidth-getStringWidth(e,5)-LABEL_MARGIN,y:t-FONT_SIZE-2,dy:FONT_SIZE/2+"px","font-size":FONT_SIZE+"px","text-anchor":"start",innerHTML:e+""}),n=makeHoriLine(t,"",0,this.totalWidth,{stroke:i.stroke||BASE_LINE_COLOR,className:i.className||"",lineType:i.lineType});return n.appendChild(a),n}},{key:"xRegion",value:function(){return createSVG("rect",{className:"bar mini",style:"fill: rgba(228, 234, 239, 0.49)",x:0,y:y2,width:this.totalWidth,height:y1-y2})}},{key:"yRegion",value:function(t,e,i){var a=createSVG("rect",{className:"bar mini",style:"fill: rgba(228, 234, 239, 0.49)",x:0,y:e,width:this.totalWidth,height:t-e}),n=createSVG("line",{className:"line-horizontal",x1:0,x2:this.totalWidth,y1:e,y2:e,styles:{stroke:BASE_LINE_COLOR}}),s=createSVG("line",{className:"line-horizontal",x1:0,x2:this.totalWidth,y1:t,y2:t,styles:{stroke:BASE_LINE_COLOR}}),r=createSVG("text",{className:"chart-label",x:this.totalWidth-getStringWidth(i,4.5)-LABEL_MARGIN,y:e-FONT_SIZE-2,dy:FONT_SIZE/2+"px","font-size":FONT_SIZE+"px","text-anchor":"start",innerHTML:i+""}),o=createSVG("g",{});return o.appendChild(a),o.appendChild(n),o.appendChild(s),o.appendChild(r),o}},{key:"animatebar",value:function(t,e,i,a,n){var s=e-this.avgUnitWidth/4,r=this.avgUnitWidth/2/n,o=getBarHeightAndYAttr(i,this.zeroLine,this.totalHeight),l=slicedToArray(o,2);return e=s+r*a,[t,{width:r,height:l[0],x:e,y:l[1]},UNIT_ANIM_DUR,STD_EASING]}},{key:"animatedot",value:function(t,e,i){return[t,{cx:e,cy:i},UNIT_ANIM_DUR,STD_EASING]}},{key:"animatepath",value:function(t,e){var i=[],a=[t[0],{d:"M"+e},PATH_ANIM_DUR,STD_EASING];if(i.push(a),t[1]){var n="0,"+this.zeroLine+"L",s="L"+this.totalWidth+", "+this.zeroLine,r=[t[1],{d:"M"+n+e+s},PATH_ANIM_DUR,STD_EASING];i.push(r)}return i}},{key:"translate",value:function(t,e,i,a){return[t,{transform:i.join(", ")},a,STD_EASING,"translate",{transform:e.join(", ")}]}},{key:"translateVertLine",value:function(t,e,i){return this.translate(t,[i,0],[e,0],MARKER_LINE_ANIM_DUR)}},{key:"translateHoriLine",value:function(t,e,i){return this.translate(t,[0,i],[0,e],MARKER_LINE_ANIM_DUR)}}]),t}(),PRESET_COLOR_MAP={"light-blue":"#7cd6fd",blue:"#5e64ff",violet:"#743ee2",red:"#ff5858",orange:"#ffa00a",yellow:"#feef72",green:"#28a745","light-green":"#98d85b",purple:"#b554ff",magenta:"#ffa3ef",black:"#36114C",grey:"#bdd3e6","light-grey":"#f0f4f7","dark-grey":"#b8c2cc"},DEFAULT_COLORS=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],getColor=function(t){return PRESET_COLOR_MAP[t]||t},ALL_CHART_TYPES=["line","scatter","bar","percentage","heatmap","pie"],COMPATIBLE_CHARTS={bar:["line","scatter","percentage","pie"],line:["scatter","bar","percentage","pie"],pie:["line","scatter","percentage","bar"],scatter:["line","bar","percentage","pie"],percentage:["bar","line","scatter","pie"],heatmap:[]},COLOR_COMPATIBLE_CHARTS={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},EASING={ease:"0.25 0.1 0.25 1",linear:"0 0 1 1",easein:"0.1 0.8 0.2 1",easeout:"0 0 0.58 1",easeinout:"0.42 0 0.58 1"},BaseChart=function(){function t(e){var i=e.height,a=void 0===i?240:i,n=e.title,s=void 0===n?"":n,r=e.subtitle,o=void 0===r?"":r,l=(e.colors,e.isNavigable),h=void 0===l?0:l,c=(e.showLegend,e.type,e.parent);classCallCheck(this,t),this.rawChartArgs=arguments[0],this.parent="string"==typeof c?document.querySelector(c):c,this.title=s,this.subtitle=o,this.argHeight=a,this.isNavigable=h,this.isNavigable&&(this.currentIndex=0),this.configure(arguments[0])}return createClass(t,[{key:"configure",value:function(t){this.setColors(),this.config={showTooltip:1,showLegend:1,isNavigable:0,animate:0},this.state={colors:this.colors}}},{key:"setColors",value:function(){var t=this.rawChartArgs,e="percentage"===t.type||"pie"===t.type?t.data.labels:t.data.datasets;!t.colors||e&&t.colors.length'+this.title+'\n\t\t\t\t
          '+this.subtitle+'
          \n\t\t\t\t
          \n\t\t\t\t
          '}),this.parent.innerHTML="",this.parent.appendChild(this.container),this.chartWrapper=this.container.querySelector(".frappe-chart"),this.statsWrapper=this.container.querySelector(".graph-stats-container")}},{key:"makeTooltip",value:function(){this.tip=new SvgTip({parent:this.chartWrapper,colors:this.colors}),this.bindTooltip()}},{key:"bindTooltip",value:function(){}},{key:"draw",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calcWidth(),this.refresh(this.data),this.makeChartArea(),this.setComponentParent(),this.makeComponentLayers(),this.renderLegend(),this.setupNavigation(t),this.renderComponents(),this.renderConstants(),this.config.animate&&this.update(this.firstUpdateData)}},{key:"update",value:function(t){this.refresh(t),this.reRender()}},{key:"calcWidth",value:function(){this.baseWidth=getElementContentWidth(this.parent)-0,this.width=this.baseWidth-(this.translateXLeft+this.translateXRight)}},{key:"refresh",value:function(t){this.oldState=this.state?JSON.parse(JSON.stringify(this.state)):{},this.intermedState={},this.prepareData(t),this.reCalc(),this.refreshRenderer()}},{key:"makeChartArea",value:function(){this.svg=makeSVGContainer(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svgDefs=makeSVGDefs(this.svg),this.drawArea=makeSVGGroup(this.svg,this.type+"-chart","translate("+this.translateXLeft+", "+this.translateY+")")}},{key:"prepareData",value:function(){}},{key:"renderConstants",value:function(){}},{key:"reCalc",value:function(){}},{key:"refreshRenderer",value:function(){}},{key:"reRender",value:function(){var t=this;if(!(!(arguments.length>0&&void 0!==arguments[0])||arguments[0]))return void this.renderComponents();this.elementsToAnimate=[],this.loadAnimatedComponents(),runSMILAnimation(this.chartWrapper,this.svg,this.elementsToAnimate),setTimeout(function(){t.renderComponents()},400)}},{key:"setComponentParent",value:function(){var t=this;this.components.forEach(function(e){return e.setupParent(t.drawArea)})}},{key:"makeComponentLayers",value:function(){this.components.forEach(function(t){return t.makeLayer()})}},{key:"renderComponents",value:function(){this.components.forEach(function(t){return t.render()})}},{key:"loadAnimatedComponents",value:function(){this.components.forEach(function(t){return t.loadAnimatedComponents()})}},{key:"renderLegend",value:function(){}},{key:"setupNavigation",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.isNavigable||(this.makeOverlay(),e&&(this.bindOverlay(),document.addEventListener("keydown",function(e){isElementInViewport(t.chartWrapper)&&("37"==(e=e||window.event).keyCode?t.onLeftArrow():"39"==e.keyCode?t.onRightArrow():"38"==e.keyCode?t.onUpArrow():"40"==e.keyCode?t.onDownArrow():"13"==e.keyCode&&t.onEnterKey())})))}},{key:"makeOverlay",value:function(){}},{key:"bindOverlay",value:function(){}},{key:"bind_units",value:function(){}},{key:"onLeftArrow",value:function(){}},{key:"onRightArrow",value:function(){}},{key:"onUpArrow",value:function(){}},{key:"onDownArrow",value:function(){}},{key:"onEnterKey",value:function(){}},{key:"getDataPoint",value:function(){}},{key:"updateCurrentDataPoint",value:function(){}},{key:"getDifferentChart",value:function(t){return getDifferentChart(t,this.type,this.rawChartArgs)}}]),t}(),Y_AXIS_MARGIN=60,ChartComponent=function(){function t(e){var i=e.layerClass,a=void 0===i?"":i,n=e.layerTransform,s=void 0===n?"":n,r=e.make,o=e.animate;classCallCheck(this,t),this.layerClass=a,this.layerTransform=s,this.make=r,this.animate=o,this.layer=void 0,this.store=[]}return createClass(t,[{key:"refresh",value:function(t){}},{key:"render",value:function(){var t=this;this.store=this.make(),this.layer.textContent="",this.store.forEach(function(e){t.layer.appendChild(e)})}},{key:"setupParent",value:function(t){this.parent=t}},{key:"loadAnimatedComponents",value:function(){this.animate(this.store)}},{key:"makeLayer",value:function(){this.layer=makeSVGGroup(this.parent,this.layerClass,this.layerTransform)}}]),t}(),AxisChartController=function(){function t(e){classCallCheck(this,t),this.refreshMeta(e),this.setupArgs()}return createClass(t,[{key:"setupArgs",value:function(){}},{key:"refreshMeta",value:function(t){this.meta=t||{}}},{key:"draw",value:function(){}},{key:"animate",value:function(){}}]),t}(),AxisController=function(t){function e(t){return classCallCheck(this,e),possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return inherits(e,t),createClass(e,[{key:"setupArgs",value:function(){}},{key:"draw",value:function(t,e,i,a){return createSVG("circle",{style:"fill: "+i,"data-point-index":a,cx:t,cy:e,r:this.args.radius})}},{key:"animate",value:function(t,e,i){return[t,{cx:e,cy:i},UNIT_ANIM_DUR,STD_EASING]}}]),e}(AxisChartController),BarChartController=function(t){function e(t){return classCallCheck(this,e),possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return inherits(e,t),createClass(e,[{key:"setupArgs",value:function(){this.args={spaceRatio:.5}}},{key:"draw",value:function(t,e,i,a,n,s){var r=this.meta.unitWidth-this.meta.unitWidth*this.args.spaceRatio,o=r,l=t-r/2,h=getBarHeightAndYAttr(e,this.meta.zeroLine,this.meta.totalHeight),c=slicedToArray(h,2),u=c[0];return createSVG("rect",{className:"bar mini",style:"fill: "+i,"data-point-index":a,x:l,y:c[1],width:o,height:u})}},{key:"animate",value:function(t,e,i,a,n){var s=e-this.meta.avgUnitWidth/4,r=this.meta.avgUnitWidth/2/n,o=getBarHeightAndYAttr(i,this.meta.zeroLine,this.meta.totalHeight),l=slicedToArray(o,2);return e=s+r*a,[t,{width:r,height:l[0],x:e,y:l[1]},UNIT_ANIM_DUR,STD_EASING]}}]),e}(AxisChartController),LineChartController=function(t){function e(t){return classCallCheck(this,e),possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return inherits(e,t),createClass(e,[{key:"setupArgs",value:function(){console.log(this),this.args={radius:this.meta.dotSize||4}}},{key:"draw",value:function(t,e,i,a){return createSVG("circle",{style:"fill: "+i,"data-point-index":a,cx:t,cy:e,r:this.args.radius})}},{key:"animate",value:function(t,e,i){return[t,{cx:e,cy:i},UNIT_ANIM_DUR,STD_EASING]}}]),e}(AxisChartController),AxisChart=function(t){function e(t){classCallCheck(this,e);var i=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.isSeries=t.isSeries,i.formatTooltipY=t.formatTooltipY,i.formatTooltipX=t.formatTooltipX,i.unitType=t.unitType||"line",i.setupUnitRenderer(),i.zeroLine=i.height,i.preSetup(),i.setup(),i}return inherits(e,t),createClass(e,[{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this),this.config.xAxisMode=t.xAxisMode,this.config.yAxisMode=t.yAxisMode}},{key:"preSetup",value:function(){}},{key:"setupUnitRenderer",value:function(){var t=this.rawChartArgs.options;this.unitRenderers={bar:new BarChartController(t),line:new LineChartController(t)}}},{key:"setHorizontalMargin",value:function(){this.translateXLeft=Y_AXIS_MARGIN,this.translateXRight=Y_AXIS_MARGIN}},{key:"checkData",value:function(t){return!0}},{key:"getFirstUpdateData",value:function(t){}},{key:"setupConstants",value:function(){var t=this;this.state={xAxisLabels:[],xAxisPositions:[],xAxisMode:this.config.xAxisMode,yAxisMode:this.config.yAxisMode},this.data.datasets.map(function(e){e.chartType||(e.chartType=t.unitType)}),this.prepareYAxis()}},{key:"prepareData",value:function(t){var e=this.state;e.xAxisLabels=t.labels||[],e.datasetLength=e.xAxisLabels.length;var i=new Array(e.datasetLength).fill(0);e.datasets=t.datasets,t.datasets||(e.datasets=[{values:i}]),e.datasets.map(function(t,a){var n=t.values;n=n?(n=n.map(function(t){return isNaN(t)?0:t})).length>e.datasetLength?n.slice(0,e.datasetLength):fillArray(n,e.datasetLength-n.length,0):i,t.index=a}),e.noOfDatasets=e.datasets.length,e.yMarkers=t.yMarkers,e.yRegions=t.yRegions}},{key:"prepareYAxis",value:function(){this.state.yAxis={labels:[],positions:[]}}},{key:"reCalc",value:function(){var t=this.state;t.xAxisLabels=this.data.labels,this.calcXPositions(),t.datasetsLabels=this.data.datasets.map(function(t){return t.name}),this.setYAxis(),this.calcYUnits(),this.calcYMaximums(),this.calcYRegions(),this.configUnits()}},{key:"setYAxis",value:function(){this.calcYAxisParameters(this.state.yAxis,this.getAllYValues(),"line"===this.type),this.state.zeroLine=this.state.yAxis.zeroLine}},{key:"calcXPositions",value:function(){var t=this.state;this.setUnitWidthAndXOffset(),t.xAxisPositions=t.xAxisLabels.map(function(e,i){return floatTwo(t.xOffset+i*t.unitWidth)}),t.xUnitPositions=new Array(t.noOfDatasets).fill(t.xAxisPositions)}},{key:"calcYAxisParameters",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"false";t.labels=calcIntervals(e,i);var a=t.labels;t.scaleMultiplier=this.height/getValueRange(a);var n=getIntervalSize(a)*t.scaleMultiplier;t.zeroLine=this.height-getZeroIndex(a)*n,t.positions=a.map(function(e){return t.zeroLine-e*t.scaleMultiplier})}},{key:"calcYUnits",value:function(){var t=this.state;t.datasets.map(function(e){e.positions=e.values.map(function(e){return floatTwo(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"calcYMaximums",value:function(){var t=this.state;t.yUnitMinimums=new Array(t.datasetLength).fill(9999),t.datasets.map(function(e,i){e.positions.map(function(e,i){e0)for(var h=0;h0)for(var l=0;l0)for(var l=0;l0&&(t=getPaths(r,s,i.colors[e],i.config.heatline,i.config.regionFill),o.textContent="",t.map(function(t){return o.appendChild(t)}));var p=n.map(function(t,e){return a[e]+","+t});i.elementsToAnimate=i.elementsToAnimate.concat(i.renderer.animatepath(t,p.join("L")))}})}},{key:"getYMarkerLines",value:function(){var t=this;return this.data.yMarkers?this.data.yMarkers.map(function(e,i){return new ChartComponent({layerClass:"y-markers",make:function(){return t.state.yMarkers.map(function(e){return t.renderer.yMarker(e.value,e.name,{pos:"right",mode:"span",lineType:e.type})})},animate:function(){}})}):[]}},{key:"getYRegions",value:function(){var t=this;return this.data.yRegions?this.data.yRegions.map(function(e,i){return new ChartComponent({layerClass:"y-regions",make:function(){return t.state.yRegions.map(function(e){return t.renderer.yRegion(e.start,e.end,e.name)})},animate:function(){}})}):[]}},{key:"getXRegions",value:function(){return[]}},{key:"refreshRenderer",value:function(){var t=this,e={totalHeight:this.height,totalWidth:this.width,xAxisMode:this.config.xAxisMode,yAxisMode:this.config.yAxisMode,zeroLine:this.state.zeroLine,unitWidth:this.state.unitWidth};this.renderer?this.renderer.refreshState(e):this.renderer=new AxisChartRenderer(e);var i={totalHeight:this.height,totalWidth:this.width,zeroLine:this.state.zeroLine,unitWidth:this.state.unitWidth};Object.keys(this.unitRenderers).map(function(e){t.unitRenderers[e].refreshMeta(i)})}},{key:"bindTooltip",value:function(){var t=this;this.chartWrapper.addEventListener("mousemove",function(e){var i=getOffset(t.chartWrapper),a=e.pageX-i.left-t.translateXLeft;e.pageY-i.top-t.translateY=0;s--){var r=i.xAxisPositions[s];if(t>r-i.unitWidth/2){var o=r+this.translateXLeft,l=i.yUnitMinimums[s]+this.translateY,h=i.datasets.map(function(t,i){return{title:t.title,value:n?e.formatTooltipY(t.values[s]):t.values[s],color:e.colors[i]}});this.tip.set_values(o,l,a[s],"",h),this.tip.show_tip();break}}}}},{key:"getDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.current_index,e={index:t},i=this.y[0];return["svg_units","yUnitPositions","values"].map(function(a){var n=a.slice(0,a.length-1);e[n]=i[a][t]}),e.label=this.xAxisLabels[t],e}},{key:"updateCurrentDataPoint",value:function(t){(t=parseInt(t))<0&&(t=0),t>=this.xAxisLabels.length&&(t=this.xAxisLabels.length-1),t!==this.current_index&&(this.current_index=t,$.fire(this.parent,"data-select",this.getDataPoint()))}},{key:"addDataPoint",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.state.datasetLength;this.data.labels.splice(i,0,t),this.data.datasets.map(function(t,a){t.values.splice(i,0,e[a])}),this.update(this.data)}},{key:"removeDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.datasetLength-1;this.data.labels.splice(t,1),this.data.datasets.map(function(e){e.values.splice(t,1)}),this.update(this.data)}},{key:"updateData",value:function(){}}]),e}(BaseChart),LineChart=function(t){function e(t){classCallCheck(this,e);var i=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="line",Object.getPrototypeOf(i)!==e.prototype?possibleConstructorReturn(i):(i.setup(),i)}return inherits(e,t),createClass(e,[{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"span",this.config.yAxisMode=t.yAxisMode||"span",this.config.dotRadius=t.dotRadius||4,this.config.heatline=t.heatline||0,this.config.regionFill=t.regionFill||0,this.config.showDots=t.showDots||1}},{key:"configUnits",value:function(){this.unitArgs={type:"dot",args:{radius:this.config.dotRadius}}}},{key:"setUnitWidthAndXOffset",value:function(){this.state.unitWidth=this.width/(this.state.datasetLength-1),this.state.xOffset=0}}]),e}(AxisChart),ScatterChart=function(t){function e(t){classCallCheck(this,e);var i=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="scatter",t.dotRadius?i.dotRadius=t.dotRadius:i.dotRadius=8,i.setup(),i}return inherits(e,t),createClass(e,[{key:"setup_values",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_values",this).call(this),this.unit_args={type:"dot",args:{radius:this.dotRadius}}}},{key:"make_paths",value:function(){}},{key:"make_path",value:function(){}}]),e}(LineChart),MultiAxisChart=function(t){function e(t){return classCallCheck(this,e),possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return inherits(e,t),createClass(e,[{key:"preSetup",value:function(){this.type="multiaxis"}},{key:"setHorizontalMargin",value:function(){var t=this.data.datasets.filter(function(t){return"left"===t.axisPosition}).length;this.translateXLeft=t*Y_AXIS_MARGIN||Y_AXIS_MARGIN,this.translateXRight=(this.data.datasets.length-t)*Y_AXIS_MARGIN||Y_AXIS_MARGIN}},{key:"prepareYAxis",value:function(){}},{key:"prepareData",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"prepareData",this).call(this,t);var i=0,a=0;this.state.datasets.forEach(function(t,e){t.yAxis={position:t.axisPosition,index:"left"===t.axisPosition?i++:a++}})}},{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"tick",this.config.yAxisMode=t.yAxisMode||"span"}},{key:"configUnits",value:function(){this.unitArgs={type:"bar",args:{spaceWidth:this.state.unitWidth/2}}}},{key:"setYAxis",value:function(){var t=this;this.state.datasets.map(function(e){t.calcYAxisParameters(e.yAxis,e.values,"line"===t.unitType)})}},{key:"calcYUnits",value:function(){this.state.datasets.map(function(t){t.positions=t.values.map(function(e){return floatTwo(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"renderConstants",value:function(){var t=this;this.state.datasets.map(function(e){var a="left"===e.yAxis.position?-1*e.yAxis.index*Y_AXIS_MARGIN:t.width+e.yAxis.index*Y_AXIS_MARGIN;t.renderer.xLine(a,"",{pos:"top",mode:"span",stroke:t.colors[i],className:"y-axis-guide"})})}},{key:"getYAxesComponents",value:function(){var t=this;return this.data.datasets.map(function(e,i){return new ChartComponent({layerClass:"y axis y-axis-"+i,make:function(){var e=t.state.datasets[i].yAxis;t.renderer.setZeroline(e.zeroline);var a={pos:e.position,mode:"tick",offset:e.index*Y_AXIS_MARGIN,stroke:t.colors[i]};return e.positions.map(function(i,n){return t.renderer.yLine(i,e.labels[n],a)})},animate:function(){}})})}},{key:"getChartComponents",value:function(){var t=this;return this.data.datasets.map(function(e,i){return new ChartComponent({layerClass:"dataset-units dataset-"+i,make:function(){var e=t.state.datasets[i],a=t.unitArgs;return t.renderer.setZeroline(e.yAxis.zeroLine),e.positions.map(function(e,n){return t.renderer[a.type](t.state.xAxisPositions[n],e,a.args,t.colors[i],n,i,t.state.datasetLength)})},animate:function(e){var a=t.state.datasets[i],n=t.unitArgs.type,s=t.state.xAxisPositions,r=t.state.datasets[i].positions,o=e[e.length-1],l=o.parentNode;if(t.oldState.xExtra>0)for(var h=0;h0}),i=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),i=e.slice(0,this.max_slices-1);var a=0;e.slice(this.max_slices-1).map(function(t){a+=t[0]}),i.push([a,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],i.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"renderComponents",value:function(){var t=this;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0),this.slices=[],this.slice_totals.map(function(e,i){var a=$$1.create("div",{className:"progress-bar",inside:t.percentageBar,styles:{background:t.colors[i],width:100*e/t.grand_total+"%"}});t.slices.push(a)})}},{key:"bindTooltip",value:function(){var t=this;this.slices.map(function(e,i){e.addEventListener("mouseenter",function(){var a=getOffset(t.chartWrapper),n=getOffset(e),s=n.left-a.left+e.offsetWidth/2,r=n.top-a.top-6,o=(t.formatted_labels&&t.formatted_labels.length>0?t.formatted_labels[i]:t.labels[i])+": ",l=(100*t.slice_totals[i]/t.grand_total).toFixed(1);t.tip.set_values(s,r,o,l+"%"),t.tip.show_tip()})})}},{key:"renderLegend",value:function(){var t=this,e=this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels:this.labels;this.legend_totals.map(function(i,a){i&&($$1.create("div",{className:"stats",inside:t.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+e[a]+":\n\t\t\t\t\t"+i+"\n\t\t\t\t")})}}]),e}(BaseChart),ANGLE_RATIO=Math.PI/180,FULL_ANGLE=360,PieChart=function(t){function e(t){classCallCheck(this,e);var i=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="pie",i.elements_to_animate=null,i.hoverRadio=t.hoverRadio||.1,i.max_slices=10,i.max_legend_points=6,i.isAnimate=!1,i.startAngle=t.startAngle||0,i.clockWise=t.clockWise||!1,i.mouseMove=i.mouseMove.bind(i),i.mouseLeave=i.mouseLeave.bind(i),i.setup(),i}return inherits(e,t),createClass(e,[{key:"setup_values",value:function(){var t=this;this.centerX=this.width/2,this.centerY=this.height/2,this.radius=this.height>this.width?this.centerX:this.centerY,this.slice_totals=[];var e=this.data.labels.map(function(e,i){var a=0;return t.data.datasets.map(function(t){a+=t.values[i]}),[a,e]}).filter(function(t){return t[0]>0}),i=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),i=e.slice(0,this.max_slices-1);var a=0;e.slice(this.max_slices-1).map(function(t){a+=t[0]}),i.push([a,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],i.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"makeArcPath",value:function(t,e){var i=this.centerX,a=this.centerY,n=this.radius,s=this.clockWise;return"M"+i+" "+a+" L"+(i+t.x)+" "+(a+t.y)+" A "+n+" "+n+" 0 0 "+(s?1:0)+" "+(i+e.x)+" "+(a+e.y)+" z"}},{key:"renderComponents",value:function(t){var i=this,a=this.radius,n=this.clockWise;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0);var s=this.slicesProperties||[];this.slices=[],this.elements_to_animate=[],this.slicesProperties=[];var r=180-this.startAngle;this.slice_totals.map(function(o,l){var h=r,c=o/i.grand_total*FULL_ANGLE,u=n?-c:c,p=r+=u,d=e.getPositionByAngle(h,a),f=e.getPositionByAngle(p,a),v=t&&s[l],g=void 0,y=void 0;t?(g=v?v.startPosition:d,y=v?v.endPosition:d):(g=d,y=f);var m=i.makeArcPath(g,y),_=makePath(m,"pie-path","none",i.colors[l]);_.style.transition="transform .3s;",i.drawArea.appendChild(_),i.slices.push(_),i.slicesProperties.push({startPosition:d,endPosition:f,value:o,total:i.grand_total,startAngle:h,endAngle:p,angle:u}),t&&i.elements_to_animate.push([{unit:_,array:i.slices,index:i.slices.length-1},{d:i.makeArcPath(d,f)},650,"easein",null,{d:m}])}),t&&runSMILAnimation(this.chartWrapper,this.svg,this.elements_to_animate)}},{key:"calTranslateByAngle",value:function(t){var i=this.radius,a=this.hoverRadio,n=e.getPositionByAngle(t.startAngle+t.angle/2,i);return"translate3d("+n.x*a+"px,"+n.y*a+"px,0)"}},{key:"hoverSlice",value:function(t,e,i,a){if(t){var n=this.colors[e];if(i){transform(t,this.calTranslateByAngle(this.slicesProperties[e])),t.style.fill=lightenDarkenColor(n,50);var s=getOffset(this.svg),r=a.pageX-s.left+10,o=a.pageY-s.top-10,l=(this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels[e]:this.labels[e])+": ",h=(100*this.slice_totals[e]/this.grand_total).toFixed(1);this.tip.set_values(r,o,l,h+"%"),this.tip.show_tip()}else transform(t,"translate3d(0,0,0)"),this.tip.hide_tip(),t.style.fill=n}}},{key:"mouseMove",value:function(t){for(var e=t.target,i=this.curActiveSliceIndex,a=this.curActiveSlice,n=0;n0?this.formatted_labels:this.labels;this.legend_totals.map(function(i,a){var n=t.colors[a];i&&($$1.create("div",{className:"stats",inside:t.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+e[a]+":\n\t\t\t\t\t"+i+"\n\t\t\t\t")})}}],[{key:"getPositionByAngle",value:function(t,e){return{x:Math.sin(t*ANGLE_RATIO)*e,y:Math.cos(t*ANGLE_RATIO)*e}}}]),e}(BaseChart),Heatmap=function(t){function e(t){var i=t.start,a=void 0===i?"":i,n=t.domain,s=void 0===n?"":n,r=t.subdomain,o=void 0===r?"":r,l=t.data,h=void 0===l?{}:l,c=t.discrete_domains,u=void 0===c?0:c,p=t.count_label,d=void 0===p?"":p,f=t.legend_colors,v=void 0===f?[]:f;classCallCheck(this,e);var g=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,arguments[0]));g.type="heatmap",g.domain=s,g.subdomain=o,g.data=h,g.discrete_domains=u,g.count_label=d;var y=new Date;return g.start=a||addDays(y,365),v=v.slice(0,5),g.legend_colors=g.validate_colors(v)?v:["#ebedf0","#c6e48b","#7bc96f","#239a3b","#196127"],g.distribution_size=5,g.translateX=0,g}return inherits(e,t),createClass(e,[{key:"validate_colors",value:function(t){if(t.length<5)return 0;var e=1;return t.forEach(function(t){isValidColor(t)||(e=0,console.warn('"'+t+'" is not a valid color.'))},this),e}},{key:"setupConstants",value:function(){this.today=new Date,this.start||(this.start=new Date,this.start.setFullYear(this.start.getFullYear()-1)),this.first_week_start=new Date(this.start.toDateString()),this.last_week_start=new Date(this.today.toDateString()),7!==this.first_week_start.getDay()&&addDays(this.first_week_start,-1*this.first_week_start.getDay()),7!==this.last_week_start.getDay()&&addDays(this.last_week_start,-1*this.last_week_start.getDay()),this.no_of_cols=getWeeksBetween(this.first_week_start+"",this.last_week_start+"")+1}},{key:"calcWidth",value:function(){this.baseWidth=12*(this.no_of_cols+3),this.discrete_domains&&(this.baseWidth+=144)}},{key:"setupLayers",value:function(){this.domain_label_group=this.makeLayer("domain-label-group chart-label"),this.data_groups=this.makeLayer("data-groups","translate(0, 20)")}},{key:"setup_values",value:function(){var t=this;this.domain_label_group.textContent="",this.data_groups.textContent="";var e=Object.keys(this.data).map(function(e){return t.data[e]});this.distribution=calcDistribution(e,this.distribution_size),this.month_names=["January","February","March","April","May","June","July","August","September","October","November","December"],this.render_all_weeks_and_store_x_values(this.no_of_cols)}},{key:"render_all_weeks_and_store_x_values",value:function(t){var e=new Date(this.first_week_start);this.week_col=0,this.current_month=e.getMonth(),this.months=[this.current_month+""],this.month_weeks={},this.month_start_points=[],this.month_weeks[this.current_month]=0,this.month_start_points.push(13);for(var i=0;ii)break;v.getMonth()-t.getMonth()&&(a=1,this.discrete_domains&&(n=1),this.month_start_points.push(13+12*(e+n))),t=v}return[s,a]}},{key:"render_month_labels",value:function(){var t=this;this.months.shift(),this.month_start_points.shift(),this.months.pop(),this.month_start_points.pop(),this.month_start_points.map(function(e,i){var a=makeText("y-value-text",e+12,10,t.month_names[t.months[i]].substring(0,3));t.domain_label_group.appendChild(a)})}},{key:"renderComponents",value:function(){Array.prototype.slice.call(this.container.querySelectorAll(".graph-stats-container, .sub-title, .title")).map(function(t){t.style.display="None"}),this.chartWrapper.style.marginTop="0px",this.chartWrapper.style.paddingTop="0px"}},{key:"bindTooltip",value:function(){var t=this;Array.prototype.slice.call(document.querySelectorAll(".data-group .day")).map(function(e){e.addEventListener("mouseenter",function(e){var i=e.target.getAttribute("data-value"),a=e.target.getAttribute("data-date").split("-"),n=t.month_names[parseInt(a[1])-1].substring(0,3),s=t.chartWrapper.getBoundingClientRect(),r=e.target.getBoundingClientRect(),o=parseInt(e.target.getAttribute("width")),l=r.left-s.left+(o+2)/2,h=r.top-s.top-(o+2)/2,c=i+" "+t.count_label,u=" on "+n+" "+a[0]+", "+a[2];t.tip.set_values(l,h,u,c,[],1),t.tip.show_tip()})})}},{key:"update",value:function(t){this.data=t,this.setup_values(),this.bindTooltip()}}]),e}(BaseChart),chartTypes={mixed:AxisChart,multiaxis:MultiAxisChart,scatter:ScatterChart,percentage:PercentageChart,heatmap:Heatmap,pie:PieChart},Chart=function t(e){return classCallCheck(this,t),getChartByType(e.type,arguments[0])};export default Chart; diff --git a/dist/frappe-charts.min.iife.js b/dist/frappe-charts.min.iife.js index f183f76..b65e80a 100644 --- a/dist/frappe-charts.min.iife.js +++ b/dist/frappe-charts.min.iife.js @@ -1 +1 @@ -var Chart=function(){"use strict";function t(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function e(t){var e=t.getBoundingClientRect();return{top:e.top+(document.documentElement.scrollTop||document.body.scrollTop),left:e.left+(document.documentElement.scrollLeft||document.body.scrollLeft)}}function n(t){var e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}function a(t){var e=window.getComputedStyle(t),i=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return t.clientWidth-i}function s(t){return parseFloat(t.toFixed(2))}function r(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]&&arguments[3];i||(i=n?t[0]:t[t.length-1]);var a=new Array(Math.abs(e)).fill(i);return t=n?a.concat(t):t.concat(a)}function o(t,e,i){var n=void 0,a=void 0;return t<=e?(a=t,0===(n=e-t)&&(a-=n=i*tt)):(a=e,0===(n=t-e)&&(n=i*tt)),[n,a]}function l(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.length-t.length;return i>0?t=r(t,i):e=r(e,i),[t,e]}function h(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function c(t,e){var i=document.createElementNS("http://www.w3.org/2000/svg",t);for(var n in e){var a=e[n];if("inside"===n)h(a).appendChild(i);else if("around"===n){var s=h(a);s.parentNode.insertBefore(i,s),i.appendChild(s)}else"styles"===n?"object"===(void 0===a?"undefined":I(a))&&Object.keys(a).map(function(t){i.style[t]=a[t]}):("className"===n&&(n="class"),"innerHTML"===n?i.textContent=a:i.setAttribute(n,a))}return i}function u(t,e){return c("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function p(t,e,i,n){return c("stop",{inside:t,style:"stop-color: "+i,offset:e,"stop-opacity":n})}function d(t,e,i,n){return c("svg",{className:e,inside:t,width:i,height:n})}function f(t){return c("defs",{inside:t})}function v(t,e){return c("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function g(t){return c("path",{className:arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",d:t,styles:{stroke:arguments.length>2&&void 0!==arguments[2]?arguments[2]:"none",fill:arguments.length>3&&void 0!==arguments[3]?arguments[3]:"none"}})}function y(t,e){var i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],n="path-fill-gradient-"+e,a=u(t,n),s=[1,.6,.2];return i&&(s=[.4,.2,0]),p(a,"0%",e,s[0]),p(a,"50%",e,s[1]),p(a,"100%",e,s[2]),n}function m(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"none",s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},r={className:t,x:e,y:i,width:n,height:n,fill:a};return Object.keys(s).map(function(t){r[t]=s[t]}),c("rect",r)}function x(t,e,i,n){return c("text",{className:t,x:e,y:i,dy:nt/2+"px","font-size":nt+"px",innerHTML:n})}function k(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};a.stroke||(a.stroke=at);var s=c("line",{className:"line-vertical "+a.className,x1:0,x2:0,y1:i,y2:n,styles:{stroke:a.stroke}}),r=c("text",{x:0,y:i>n?i+it:i-it-nt,dy:nt+"px","font-size":nt+"px","text-anchor":"middle",innerHTML:e}),o=c("g",{transform:"translate("+t+", 0)"});return o.appendChild(s),o.appendChild(r),o}function _(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};a.stroke||(a.stroke=at),a.lineType||(a.lineType="");var s=c("line",{className:"line-horizontal "+a.className+("dashed"===a.lineType?"dashed":""),x1:i,x2:n,y1:0,y2:0,styles:{stroke:a.stroke}}),r=c("text",{x:i255?255:t<0?0:t}function w(t,e){var i=lt(t),n=!1;"#"==i[0]&&(i=i.slice(1),n=!0);var a=parseInt(i,16),s=b((a>>16)+e),r=b((a>>8&255)+e),o=b((255&a)+e);return(n?"#":"")+(o|r<<8|s<<16).toString(16)}function A(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t)}function C(t,e,i){if(t!==e){ht.includes(t)||console.error("'"+t+"' is not a valid chart type."),ct[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var n=ut[e].includes(t);return new Ct({parent:i.parent,title:i.title,data:i.data,type:t,height:i.height,colors:n?i.colors:void 0})}}function L(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"linear",a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:void 0,s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},r=t.cloneNode(!0),o=t.cloneNode(!0);for(var l in e){var h=void 0;h="transform"===l?document.createElementNS("http://www.w3.org/2000/svg","animateTransform"):document.createElementNS("http://www.w3.org/2000/svg","animate");var c=s[l]||t.getAttribute(l),u=e[l],p={attributeName:l,from:c,to:u,begin:"0s",dur:i/1e3+"s",values:c+";"+u,keySplines:pt[n],keyTimes:"0;1",calcMode:"spline",fill:"freeze"};a&&(p.type=a);for(var d in p)h.setAttribute(d,p[d]);r.appendChild(h),a?o.setAttribute(l,"translate("+u+")"):o.setAttribute(l,u)}return[r,o]}function M(t,e){t.style.transform=e,t.style.webkitTransform=e,t.style.msTransform=e,t.style.mozTransform=e,t.style.oTransform=e}function P(t,e){var i=[],n=[];e.map(function(t){var e=t[0],a=e.parentNode,s=void 0,r=void 0;t[0]=e;var o=L.apply(void 0,G(t)),l=$(o,2);s=l[0],r=l[1],i.push(r),n.push([s,a]),a.replaceChild(s,e)});var a=t.cloneNode(!0);return n.map(function(t,n){t[1].replaceChild(i[n],t[0]),e[n][0]=i[n]}),a}function N(t,e,i){if(0!==i.length){var n=P(e,i);e.parentNode==t&&(t.removeChild(e),t.appendChild(n)),setTimeout(function(){n.parentNode==t&&(t.removeChild(n),t.appendChild(e))},et)}}function O(t){if(0===t)return[0,0];if(isNaN(t))return{mantissa:-6755399441055744,exponent:972};var e=t>0?1:-1;if(!isFinite(t))return{mantissa:4503599627370496*e,exponent:972};t=Math.abs(t);var i=Math.floor(Math.log10(t));return[e*(t/Math.pow(10,i)),i]}function S(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=Math.ceil(t),n=Math.floor(e),a=i-n,s=a,r=1;a>5&&(a%2!=0&&(a=++i-n),s=a/2,r=2),a<=2&&(r=a/(s=4)),0===a&&(s=5,r=1);for(var o=[],l=0;l<=s;l++)o.push(n+r*l);return o}function W(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=O(t),n=$(i,2),a=n[0],s=n[1],r=e?e/Math.pow(10,s):0,o=S(a=a.toFixed(6),r);return o=o.map(function(t){return t*Math.pow(10,s)})}function T(t){function e(t,e){for(var i=W(t),n=i[1]-i[0],a=0,s=1;a1&&void 0!==arguments[1]&&arguments[1],n=Math.max.apply(Math,G(t)),a=Math.min.apply(Math,G(t)),s=[];if(n>=0&&a>=0)O(n)[1],s=i?W(n,a):W(n);else if(n>0&&a<0){var r=Math.abs(a);n>=r?(O(n)[1],s=e(n,r)):(O(r)[1],s=e(r,n).map(function(t){return-1*t}))}else if(n<=0&&a<=0){var o=Math.abs(a),l=Math.abs(n);O(o)[1],s=(s=i?W(o,l):W(o)).reverse().map(function(t){return-1*t})}return s}function D(t){var e=z(t);return t.indexOf(0)>=0?t.indexOf(0):t[0]>0?-1*t[0]/e:-1*t[t.length-1]/e+(t.length-1)}function z(t){return t[1]-t[0]}function E(t){return t[t.length-1]-t[0]}function j(t,e){for(var i=Math.max.apply(Math,G(t)),n=1/(e-1),a=[],s=0;s9?"":"0")+e,(i>9?"":"0")+i,t.getFullYear()].join("-")}function Y(t,e){return Math.ceil(F(t,e)/7)}function F(t,e){return(R(e)-R(t))/864e5}function X(t,e){t.setDate(t.getDate()+e)}function B(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return At[t]?new At[t](e):new yt(e)}!function(t,e){if("undefined"==typeof document)return e;t=t||"";var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css",i.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}('.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path,.chart-container .multiaxis-chart .line-horizontal,.chart-container .multiaxis-chart .y-axis-guide{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}',void 0);var I="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},q=(function(){function t(t){this.value=t}function e(e){function i(t,e){return new Promise(function(i,a){var o={key:t,arg:e,resolve:i,reject:a,next:null};r?r=r.next=o:(s=r=o,n(t,e))})}function n(i,s){try{var r=e[i](s),o=r.value;o instanceof t?Promise.resolve(o.value).then(function(t){n("next",t)},function(t){n("throw",t)}):a(r.done?"return":"normal",r.value)}catch(t){a("throw",t)}}function a(t,e){switch(t){case"return":s.resolve({value:e,done:!0});break;case"throw":s.reject(e);break;default:s.resolve({value:e,done:!1})}(s=s.next)?n(s.key,s.arg):r=null}var s,r;this._invoke=i,"function"!=typeof e.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)}}(),function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}),J=function(){function t(t,e){for(var i=0;i\n\t\t\t\t
            \n\t\t\t\t
            '}),this.hide_tip(),this.title=this.container.querySelector(".title"),this.data_point_list=this.container.querySelector(".data-point-list"),this.parent.addEventListener("mouseleave",function(){e.hide_tip()})}},{key:"fill",value:function(){var e=this,i=void 0;i=this.title_value_first?""+this.title_value+""+this.title_name:this.title_name+""+this.title_value+"",this.title.innerHTML=i,this.data_point_list.innerHTML="",this.list_values.map(function(i,n){var a=e.colors[n]||"black",s=t.create("li",{styles:{"border-top":"3px solid "+a},innerHTML:''+(0===i.value||i.value?i.value:"")+"\n\t\t\t\t\t"+(i.title?i.title:"")});e.data_point_list.appendChild(s)})}},{key:"calc_position",value:function(){var t=this.container.offsetWidth;this.top=this.y-this.container.offsetHeight,this.left=this.x-t/2;var e=this.parent.offsetWidth-t,i=this.container.querySelector(".svg-pointer");if(this.left<0)i.style.left="calc(50% - "+-1*this.left+"px)",this.left=0;else if(this.left>e){var n="calc(50% + "+(this.left-e)+"px)";i.style.left=n,this.left=e}else i.style.left="50%"}},{key:"set_values",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0;this.title_name=i,this.title_value=n,this.list_values=a,this.x=t,this.y=e,this.title_value_first=s,this.refresh()}},{key:"hide_tip",value:function(){this.container.style.top="0px",this.container.style.left="0px",this.container.style.opacity="0"}},{key:"show_tip",value:function(){this.container.style.top=this.top+"px",this.container.style.left=this.left+"px",this.container.style.opacity="1"}}]),e}(),tt=.01,et=250,it=4,nt=10,at="#dadada",st=function(){function t(e){q(this,t),this.refreshState(e)}return J(t,[{key:"refreshState",value:function(t){this.totalHeight=t.totalHeight,this.totalWidth=t.totalWidth,this.zeroLine=t.zeroLine,this.unitWidth=t.unitWidth,this.xAxisMode=t.xAxisMode,this.yAxisMode=t.yAxisMode}},{key:"setZeroline",value:function(t){this.zeroLine=t}},{key:"bar",value:function(t,e,i,n,a,s,r){var l=this.unitWidth-i.spaceWidth,h=l,u=t-l/2,p=o(e,this.zeroLine,this.totalHeight),d=$(p,2),f=d[0];return c("rect",{className:"bar mini",style:"fill: "+n,"data-point-index":a,x:u,y:d[1],width:h,height:f})}},{key:"dot",value:function(t,e,i,n,a){return c("circle",{style:"fill: "+n,"data-point-index":a,cx:t,cy:e,r:i.radius})}},{key:"xLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};i.pos||(i.pos="bottom"),i.offset||(i.offset=0),i.mode||(i.mode=this.xAxisMode),i.stroke||(i.stroke=at),i.className||(i.className="");var n=this.totalHeight+6,a="span"===i.mode?-6:this.totalHeight;return"tick"===i.mode&&"top"===i.pos&&(n=-6,a=0),k(t,e,n,a,{stroke:i.stroke,className:i.className})}},{key:"yLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};i.pos||(i.pos="left"),i.offset||(i.offset=0),i.mode||(i.mode=this.yAxisMode),i.stroke||(i.stroke=at),i.className||(i.className="");var n=-6,a="span"===i.mode?this.totalWidth+6:0;return"tick"===i.mode&&"right"===i.pos&&(n=this.totalWidth+6,a=this.totalWidth),n+=i.offset,a+=i.offset,_(t,e,n,a,{stroke:i.stroke,className:i.className})}},{key:"xMarker",value:function(){}},{key:"yMarker",value:function(){}},{key:"xRegion",value:function(){}},{key:"yRegion",value:function(){}},{key:"animatebar",value:function(t,e,i,n,a){var s=e-this.avgUnitWidth/4,r=this.avgUnitWidth/2/a,l=o(i,this.zeroLine,this.totalHeight),h=$(l,2);return e=s+r*n,[t,{width:r,height:h[0],x:e,y:h[1]},350,"easein"]}},{key:"animatedot",value:function(t,e,i){return[t,{cx:e,cy:i},350,"easein"]}},{key:"animatepath",value:function(t,e){var i=[],n=[t[0],{d:"M"+e},350,"easein"];if(i.push(n),t[1]){var a="0,"+this.zeroLine+"L",s="L"+this.totalWidth+", "+this.zeroLine,r=[t[1],{d:"M"+a+e+s},350,"easein"];i.push(r)}return i}},{key:"translate",value:function(t,e,i,n){return[t,{transform:i.join(", ")},n,"easein","translate",{transform:e.join(", ")}]}},{key:"translateVertLine",value:function(t,e,i){return this.translate(t,[i,0],[e,0],350)}},{key:"translateHoriLine",value:function(t,e,i){return this.translate(t,[0,i],[0,e],350)}}]),t}(),rt={"light-blue":"#7cd6fd",blue:"#5e64ff",violet:"#743ee2",red:"#ff5858",orange:"#ffa00a",yellow:"#feef72",green:"#28a745","light-green":"#98d85b",purple:"#b554ff",magenta:"#ffa3ef",black:"#36114C",grey:"#bdd3e6","light-grey":"#f0f4f7","dark-grey":"#b8c2cc"},ot=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],lt=function(t){return rt[t]||t},ht=["line","scatter","bar","percentage","heatmap","pie"],ct={bar:["line","scatter","percentage","pie"],line:["scatter","bar","percentage","pie"],pie:["line","scatter","percentage","bar"],scatter:["line","bar","percentage","pie"],percentage:["bar","line","scatter","pie"],heatmap:[]},ut={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},pt={ease:"0.25 0.1 0.25 1",linear:"0 0 1 1",easein:"0.1 0.8 0.2 1",easeout:"0 0 0.58 1",easeinout:"0.42 0 0.58 1"},dt=function(){function e(t){var i=t.height,n=void 0===i?240:i,a=t.title,s=void 0===a?"":a,r=t.subtitle,o=void 0===r?"":r,l=(t.colors,t.isNavigable),h=void 0===l?0:l,c=(t.showLegend,t.type,t.parent);q(this,e),this.rawChartArgs=arguments[0],this.parent="string"==typeof c?document.querySelector(c):c,this.title=s,this.subtitle=o,this.argHeight=n,this.isNavigable=h,this.isNavigable&&(this.currentIndex=0),this.configure(arguments[0])}return J(e,[{key:"configure",value:function(t){this.setColors(),this.config={showTooltip:1,showLegend:1,isNavigable:0,animate:0},this.state={colors:this.colors}}},{key:"setColors",value:function(){var t=this.rawChartArgs,e="percentage"===t.type||"pie"===t.type?t.data.labels:t.data.datasets;!t.colors||e&&t.colors.length'+this.title+'\n\t\t\t\t
            '+this.subtitle+'
            \n\t\t\t\t
            \n\t\t\t\t
            '}),this.parent.innerHTML="",this.parent.appendChild(this.container),this.chartWrapper=this.container.querySelector(".frappe-chart"),this.statsWrapper=this.container.querySelector(".graph-stats-container")}},{key:"makeTooltip",value:function(){this.tip=new Q({parent:this.chartWrapper,colors:this.colors}),this.bindTooltip()}},{key:"bindTooltip",value:function(){}},{key:"draw",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calcWidth(),this.refresh(this.data),this.makeChartArea(),this.setComponentParent(),this.makeComponentLayers(),this.renderLegend(),this.setupNavigation(t),this.renderComponents(),this.renderConstants(),this.config.animate&&this.update(this.firstUpdateData)}},{key:"update",value:function(t){this.refresh(t),this.reRender()}},{key:"calcWidth",value:function(){this.baseWidth=a(this.parent)-0,this.width=this.baseWidth-(this.translateXLeft+this.translateXRight)}},{key:"refresh",value:function(t){this.oldState=this.state?JSON.parse(JSON.stringify(this.state)):{},this.intermedState={},this.prepareData(t),this.reCalc(),this.refreshRenderer()}},{key:"makeChartArea",value:function(){this.svg=d(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svgDefs=f(this.svg),this.drawArea=v(this.svg,this.type+"-chart","translate("+this.translateXLeft+", "+this.translateY+")")}},{key:"prepareData",value:function(){}},{key:"renderConstants",value:function(){}},{key:"reCalc",value:function(){}},{key:"refreshRenderer",value:function(){}},{key:"reRender",value:function(){var t=this;if(!(!(arguments.length>0&&void 0!==arguments[0])||arguments[0]))return void this.renderComponents();this.elementsToAnimate=[],this.loadAnimatedComponents(),N(this.chartWrapper,this.svg,this.elementsToAnimate),setTimeout(function(){t.renderComponents()},400)}},{key:"setComponentParent",value:function(){var t=this;this.components.forEach(function(e){return e.setupParent(t.drawArea)})}},{key:"makeComponentLayers",value:function(){this.components.forEach(function(t){return t.makeLayer()})}},{key:"renderComponents",value:function(){this.components.forEach(function(t){return t.render()})}},{key:"loadAnimatedComponents",value:function(){this.components.forEach(function(t){return t.loadAnimatedComponents()})}},{key:"renderLegend",value:function(){}},{key:"setupNavigation",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.isNavigable||(this.makeOverlay(),e&&(this.bindOverlay(),document.addEventListener("keydown",function(e){n(t.chartWrapper)&&("37"==(e=e||window.event).keyCode?t.onLeftArrow():"39"==e.keyCode?t.onRightArrow():"38"==e.keyCode?t.onUpArrow():"40"==e.keyCode?t.onDownArrow():"13"==e.keyCode&&t.onEnterKey())})))}},{key:"makeOverlay",value:function(){}},{key:"bindOverlay",value:function(){}},{key:"bind_units",value:function(){}},{key:"onLeftArrow",value:function(){}},{key:"onRightArrow",value:function(){}},{key:"onUpArrow",value:function(){}},{key:"onDownArrow",value:function(){}},{key:"onEnterKey",value:function(){}},{key:"getDataPoint",value:function(){}},{key:"updateCurrentDataPoint",value:function(){}},{key:"getDifferentChart",value:function(t){return C(t,this.type,this.rawChartArgs)}}]),e}(),ft=function(){function t(e){var i=e.layerClass,n=void 0===i?"":i,a=e.layerTransform,s=void 0===a?"":a,r=e.make,o=e.animate;q(this,t),this.layerClass=n,this.layerTransform=s,this.make=r,this.animate=o,this.layer=void 0,this.store=[]}return J(t,[{key:"refresh",value:function(t){}},{key:"render",value:function(){var t=this;this.store=this.make(),this.layer.textContent="",this.store.forEach(function(e){t.layer.appendChild(e)})}},{key:"setupParent",value:function(t){this.parent=t}},{key:"loadAnimatedComponents",value:function(){this.animate(this.store)}},{key:"makeLayer",value:function(){this.layer=v(this.parent,this.layerClass,this.layerTransform)}}]),t}(),vt=function(t){function e(t){q(this,e);var i=K(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.is_series=t.is_series,i.format_tooltip_y=t.format_tooltip_y,i.format_tooltip_x=t.format_tooltip_x,i.zeroLine=i.height,i}return Z(e,t),J(e,[{key:"setHorizontalMargin",value:function(){this.translateXLeft=60,this.translateXRight=60}},{key:"checkData",value:function(t){return!0}},{key:"getFirstUpdateData",value:function(t){}},{key:"setupConstants",value:function(){this.state={xAxisLabels:[],xAxisPositions:[]},this.prepareYAxis()}},{key:"prepareData",value:function(t){var e=this.state;e.xAxisLabels=t.labels||[],e.datasetLength=e.xAxisLabels.length;var i=new Array(e.datasetLength).fill(0);e.datasets=t.datasets,t.datasets||(e.datasets=[{values:i}]),e.datasets.map(function(t,n){var a=t.values;a=a?(a=a.map(function(t){return isNaN(t)?0:t})).length>e.datasetLength?a.slice(0,e.datasetLength):r(a,e.datasetLength-a.length,0):i,t.index=n}),e.noOfDatasets=e.datasets.length}},{key:"prepareYAxis",value:function(){this.state.yAxis={labels:[],positions:[]}}},{key:"reCalc",value:function(){var t=this.state;t.xAxisLabels=this.data.labels,this.calcXPositions(),t.datasetsLabels=this.data.datasets.map(function(t){return t.name}),this.setYAxis(),this.calcYUnits(),this.calcYMaximums(),this.configUnits()}},{key:"setYAxis",value:function(){this.calcYAxisParameters(this.state.yAxis,this.getAllYValues(),"line"===this.type),this.state.zeroLine=this.state.yAxis.zeroLine}},{key:"calcXPositions",value:function(){var t=this.state;this.setUnitWidthAndXOffset(),t.xAxisPositions=t.xAxisLabels.map(function(e,i){return s(t.xOffset+i*t.unitWidth)}),t.xUnitPositions=new Array(t.noOfDatasets).fill(t.xAxisPositions)}},{key:"calcYAxisParameters",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"false";t.labels=T(e,i);var n=t.labels;t.scaleMultiplier=this.height/E(n);var a=z(n)*t.scaleMultiplier;t.zeroLine=this.height-D(n)*a,t.positions=n.map(function(e){return t.zeroLine-e*t.scaleMultiplier})}},{key:"calcYUnits",value:function(){var t=this.state;t.datasets.map(function(e){e.positions=e.values.map(function(e){return s(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"calcYMaximums",value:function(){var t=this.state;t.yUnitMinimums=new Array(t.datasetLength).fill(9999),t.datasets.map(function(e,i){e.positions.map(function(e,i){e0)for(var c=0;c0)for(var h=0;h0)for(var l=0;l2&&void 0!==arguments[2]?arguments[2]:this.state.datasetLength;this.data.labels.splice(i,0,t),this.data.datasets.map(function(t,n){t.values.splice(i,0,e[n])}),this.update(this.data)}},{key:"removeDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.datasetLength-1;this.data.labels.splice(t,1),this.data.datasets.map(function(e){e.values.splice(t,1)}),this.update(this.data)}},{key:"updateData",value:function(){}}]),e}(dt),gt=function(t){function e(t){q(this,e);var i=K(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="bar",i.setup(),i}return Z(e,t),J(e,[{key:"configure",value:function(t){V(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"tick",this.config.yAxisMode=t.yAxisMode||"span"}},{key:"configUnits",value:function(){this.unitArgs={type:"bar",args:{spaceWidth:this.state.unitWidth/2}}}}]),e}(vt),yt=function(t){function e(t){q(this,e);var i=K(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="line",Object.getPrototypeOf(i)!==e.prototype?K(i):(i.setup(),i)}return Z(e,t),J(e,[{key:"configure",value:function(t){V(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"span",this.config.yAxisMode=t.yAxisMode||"span",this.config.dotRadius=t.dotRadius||4,this.config.heatline=t.heatline||0,this.config.regionFill=t.regionFill||0,this.config.showDots=t.showDots||1}},{key:"configUnits",value:function(){this.unitArgs={type:"dot",args:{radius:this.config.dotRadius}}}},{key:"setUnitWidthAndXOffset",value:function(){this.state.unitWidth=this.width/(this.state.datasetLength-1),this.state.xOffset=0}},{key:"getDataUnitsComponents",value:function(t){return t.showDots?V(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"getDataUnitsComponents",this).call(this):[]}},{key:"getPathComponents",value:function(){var t=this;return this.data.datasets.map(function(e,i){return new ft({layerClass:"path dataset-path",make:function(){var e=t.state.datasets[i],n=t.colors[i];return t.getPaths(e.positions,t.state.xAxisPositions,n,t.config.heatline,t.config.regionFill)},animate:function(e){var n=t.state.xAxisPositions,a=t.state.datasets[i].positions,s=t.oldState.xAxisPositions,r=t.oldState.datasets[i].positions,o=e[0].parentNode,h=l(s,n),c=$(h,2);s=c[0],n=c[1];var u=l(r,a),p=$(u,2);r=p[0],a=p[1],t.oldState.xExtra>0&&(e=t.getPaths(r,s,t.colors[i],t.config.heatline,t.config.regionFill),o.textContent="",e.map(function(t){return o.appendChild(t)}));var d=a.map(function(t,e){return n[e]+","+t});t.elementsToAnimate=t.elementsToAnimate.concat(t.renderer.animatepath(e,d.join("L")))}})})}},{key:"getPaths",value:function(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]&&arguments[3],a=arguments.length>4&&void 0!==arguments[4]&&arguments[4],s=t.map(function(t,i){return e[i]+","+t}).join("L"),r=g("M"+s,"line-graph-path",i);if(n){var o=y(this.svgDefs,i);r.style.stroke="url(#"+o+")"}var l=[r];if(a){var h=y(this.svgDefs,i,!0),c=this.state.yAxis.zeroLine,u="M0,"+c+"L"+s+"L"+this.width+","+c;l.push(g(u,"region-fill","none","url(#"+h+")"))}return l}}]),e}(vt),mt=function(t){function e(t){q(this,e);var i=K(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="scatter",t.dotRadius?i.dotRadius=t.dotRadius:i.dotRadius=8,i.setup(),i}return Z(e,t),J(e,[{key:"setup_values",value:function(){V(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_values",this).call(this),this.unit_args={type:"dot",args:{radius:this.dotRadius}}}},{key:"make_paths",value:function(){}},{key:"make_path",value:function(){}}]),e}(yt),xt=function(t){function e(t){q(this,e);var i=K(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="multiaxis",i.unitType=t.unitType||"line",i.setup(),i}return Z(e,t),J(e,[{key:"setHorizontalMargin",value:function(){var t=this.data.datasets.filter(function(t){return"left"===t.axisPosition}).length;this.translateXLeft=60*t||60,this.translateXRight=60*(this.data.datasets.length-t)||60}},{key:"prepareYAxis",value:function(){}},{key:"prepareData",value:function(t){V(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"prepareData",this).call(this,t);var i=0,n=0;this.state.datasets.forEach(function(t,e){t.yAxis={position:t.axisPosition,index:"left"===t.axisPosition?i++:n++}})}},{key:"configure",value:function(t){V(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"tick",this.config.yAxisMode=t.yAxisMode||"span"}},{key:"configUnits",value:function(){this.unitArgs={type:"bar",args:{spaceWidth:this.state.unitWidth/2}}}},{key:"setYAxis",value:function(){var t=this;this.state.datasets.map(function(e){t.calcYAxisParameters(e.yAxis,e.values,"line"===t.unitType)})}},{key:"calcYUnits",value:function(){this.state.datasets.map(function(t){t.positions=t.values.map(function(e){return s(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"renderConstants",value:function(){var t=this;this.state.datasets.map(function(e){var n="left"===e.yAxis.position?-1*e.yAxis.index*60:t.width+60*e.yAxis.index;t.renderer.xLine(n,"",{pos:"top",mode:"span",stroke:t.colors[i],className:"y-axis-guide"})})}},{key:"getYAxesComponents",value:function(){var t=this;return this.data.datasets.map(function(e,i){return new ft({layerClass:"y axis y-axis-"+i,make:function(){var e=t.state.datasets[i].yAxis;t.renderer.setZeroline(e.zeroline);var n={pos:e.position,mode:"tick",offset:60*e.index,stroke:t.colors[i]};return e.positions.map(function(i,a){return t.renderer.yLine(i,e.labels[a],n)})},animate:function(){}})})}},{key:"getDataUnitsComponents",value:function(){var t=this;return this.data.datasets.map(function(e,i){return new ft({layerClass:"dataset-units dataset-"+i,make:function(){var e=t.state.datasets[i],n=t.unitArgs;return t.renderer.setZeroline(e.yAxis.zeroLine),e.positions.map(function(e,a){return t.renderer[n.type](t.state.xAxisPositions[a],e,n.args,t.colors[i],a,i,t.state.datasetLength)})},animate:function(e){var n=t.state.datasets[i],a=t.unitArgs.type,s=t.state.xAxisPositions,r=t.state.datasets[i].positions,o=e[e.length-1],l=o.parentNode;if(t.oldState.xExtra>0)for(var h=0;h0}),i=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),i=e.slice(0,this.max_slices-1);var n=0;e.slice(this.max_slices-1).map(function(t){n+=t[0]}),i.push([n,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],i.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"renderComponents",value:function(){var e=this;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0),this.slices=[],this.slice_totals.map(function(i,n){var a=t.create("div",{className:"progress-bar",inside:e.percentageBar,styles:{background:e.colors[n],width:100*i/e.grand_total+"%"}});e.slices.push(a)})}},{key:"bindTooltip",value:function(){var t=this;this.slices.map(function(i,n){i.addEventListener("mouseenter",function(){var a=e(t.chartWrapper),s=e(i),r=s.left-a.left+i.offsetWidth/2,o=s.top-a.top-6,l=(t.formatted_labels&&t.formatted_labels.length>0?t.formatted_labels[n]:t.labels[n])+": ",h=(100*t.slice_totals[n]/t.grand_total).toFixed(1);t.tip.set_values(r,o,l,h+"%"),t.tip.show_tip()})})}},{key:"renderLegend",value:function(){var e=this,i=this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels:this.labels;this.legend_totals.map(function(n,a){n&&(t.create("div",{className:"stats",inside:e.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+i[a]+":\n\t\t\t\t\t"+n+"\n\t\t\t\t")})}}]),n}(dt),_t=Math.PI/180,bt=function(i){function n(t){q(this,n);var e=K(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,t));return e.type="pie",e.elements_to_animate=null,e.hoverRadio=t.hoverRadio||.1,e.max_slices=10,e.max_legend_points=6,e.isAnimate=!1,e.startAngle=t.startAngle||0,e.clockWise=t.clockWise||!1,e.mouseMove=e.mouseMove.bind(e),e.mouseLeave=e.mouseLeave.bind(e),e.setup(),e}return Z(n,i),J(n,[{key:"setup_values",value:function(){var t=this;this.centerX=this.width/2,this.centerY=this.height/2,this.radius=this.height>this.width?this.centerX:this.centerY,this.slice_totals=[];var e=this.data.labels.map(function(e,i){var n=0;return t.data.datasets.map(function(t){n+=t.values[i]}),[n,e]}).filter(function(t){return t[0]>0}),i=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),i=e.slice(0,this.max_slices-1);var n=0;e.slice(this.max_slices-1).map(function(t){n+=t[0]}),i.push([n,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],i.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"makeArcPath",value:function(t,e){var i=this.centerX,n=this.centerY,a=this.radius,s=this.clockWise;return"M"+i+" "+n+" L"+(i+t.x)+" "+(n+t.y)+" A "+a+" "+a+" 0 0 "+(s?1:0)+" "+(i+e.x)+" "+(n+e.y)+" z"}},{key:"renderComponents",value:function(t){var e=this,i=this.radius,a=this.clockWise;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0);var s=this.slicesProperties||[];this.slices=[],this.elements_to_animate=[],this.slicesProperties=[];var r=180-this.startAngle;this.slice_totals.map(function(o,l){var h=r,c=o/e.grand_total*360,u=a?-c:c,p=r+=u,d=n.getPositionByAngle(h,i),f=n.getPositionByAngle(p,i),v=t&&s[l],y=void 0,m=void 0;t?(y=v?v.startPosition:d,m=v?v.endPosition:d):(y=d,m=f);var x=e.makeArcPath(y,m),k=g(x,"pie-path","none",e.colors[l]);k.style.transition="transform .3s;",e.drawArea.appendChild(k),e.slices.push(k),e.slicesProperties.push({startPosition:d,endPosition:f,value:o,total:e.grand_total,startAngle:h,endAngle:p,angle:u}),t&&e.elements_to_animate.push([{unit:k,array:e.slices,index:e.slices.length-1},{d:e.makeArcPath(d,f)},650,"easein",null,{d:x}])}),t&&N(this.chartWrapper,this.svg,this.elements_to_animate)}},{key:"calTranslateByAngle",value:function(t){var e=this.radius,i=this.hoverRadio,a=n.getPositionByAngle(t.startAngle+t.angle/2,e);return"translate3d("+a.x*i+"px,"+a.y*i+"px,0)"}},{key:"hoverSlice",value:function(t,i,n,a){if(t){var s=this.colors[i];if(n){M(t,this.calTranslateByAngle(this.slicesProperties[i])),t.style.fill=w(s,50);var r=e(this.svg),o=a.pageX-r.left+10,l=a.pageY-r.top-10,h=(this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels[i]:this.labels[i])+": ",c=(100*this.slice_totals[i]/this.grand_total).toFixed(1);this.tip.set_values(o,l,h,c+"%"),this.tip.show_tip()}else M(t,"translate3d(0,0,0)"),this.tip.hide_tip(),t.style.fill=s}}},{key:"mouseMove",value:function(t){for(var e=t.target,i=this.curActiveSliceIndex,n=this.curActiveSlice,a=0;a0?this.formatted_labels:this.labels;this.legend_totals.map(function(n,a){var s=e.colors[a];n&&(t.create("div",{className:"stats",inside:e.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+i[a]+":\n\t\t\t\t\t"+n+"\n\t\t\t\t")})}}],[{key:"getPositionByAngle",value:function(t,e){return{x:Math.sin(t*_t)*e,y:Math.cos(t*_t)*e}}}]),n}(dt),wt=function(t){function e(t){var i=t.start,n=void 0===i?"":i,a=t.domain,s=void 0===a?"":a,r=t.subdomain,o=void 0===r?"":r,l=t.data,h=void 0===l?{}:l,c=t.discrete_domains,u=void 0===c?0:c,p=t.count_label,d=void 0===p?"":p,f=t.legend_colors,v=void 0===f?[]:f;q(this,e);var g=K(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,arguments[0]));g.type="heatmap",g.domain=s,g.subdomain=o,g.data=h,g.discrete_domains=u,g.count_label=d;var y=new Date;return g.start=n||X(y,365),v=v.slice(0,5),g.legend_colors=g.validate_colors(v)?v:["#ebedf0","#c6e48b","#7bc96f","#239a3b","#196127"],g.distribution_size=5,g.translateX=0,g}return Z(e,t),J(e,[{key:"validate_colors",value:function(t){if(t.length<5)return 0;var e=1;return t.forEach(function(t){A(t)||(e=0,console.warn('"'+t+'" is not a valid color.'))},this),e}},{key:"setupConstants",value:function(){this.today=new Date,this.start||(this.start=new Date,this.start.setFullYear(this.start.getFullYear()-1)),this.first_week_start=new Date(this.start.toDateString()),this.last_week_start=new Date(this.today.toDateString()),7!==this.first_week_start.getDay()&&X(this.first_week_start,-1*this.first_week_start.getDay()),7!==this.last_week_start.getDay()&&X(this.last_week_start,-1*this.last_week_start.getDay()),this.no_of_cols=Y(this.first_week_start+"",this.last_week_start+"")+1}},{key:"calcWidth",value:function(){this.baseWidth=12*(this.no_of_cols+3),this.discrete_domains&&(this.baseWidth+=144)}},{key:"setupLayers",value:function(){this.domain_label_group=this.makeLayer("domain-label-group chart-label"),this.data_groups=this.makeLayer("data-groups","translate(0, 20)")}},{key:"setup_values",value:function(){var t=this;this.domain_label_group.textContent="",this.data_groups.textContent="";var e=Object.keys(this.data).map(function(e){return t.data[e]});this.distribution=j(e,this.distribution_size),this.month_names=["January","February","March","April","May","June","July","August","September","October","November","December"],this.render_all_weeks_and_store_x_values(this.no_of_cols)}},{key:"render_all_weeks_and_store_x_values",value:function(t){var e=new Date(this.first_week_start);this.week_col=0,this.current_month=e.getMonth(),this.months=[this.current_month+""],this.month_weeks={},this.month_start_points=[],this.month_weeks[this.current_month]=0,this.month_start_points.push(13);for(var i=0;ii)break;g.getMonth()-t.getMonth()&&(n=1,this.discrete_domains&&(a=1),this.month_start_points.push(13+12*(e+a))),t=g}return[s,n]}},{key:"render_month_labels",value:function(){var t=this;this.months.shift(),this.month_start_points.shift(),this.months.pop(),this.month_start_points.pop(),this.month_start_points.map(function(e,i){var n=x("y-value-text",e+12,10,t.month_names[t.months[i]].substring(0,3));t.domain_label_group.appendChild(n)})}},{key:"renderComponents",value:function(){Array.prototype.slice.call(this.container.querySelectorAll(".graph-stats-container, .sub-title, .title")).map(function(t){t.style.display="None"}),this.chartWrapper.style.marginTop="0px",this.chartWrapper.style.paddingTop="0px"}},{key:"bindTooltip",value:function(){var t=this;Array.prototype.slice.call(document.querySelectorAll(".data-group .day")).map(function(e){e.addEventListener("mouseenter",function(e){var i=e.target.getAttribute("data-value"),n=e.target.getAttribute("data-date").split("-"),a=t.month_names[parseInt(n[1])-1].substring(0,3),s=t.chartWrapper.getBoundingClientRect(),r=e.target.getBoundingClientRect(),o=parseInt(e.target.getAttribute("width")),l=r.left-s.left+(o+2)/2,h=r.top-s.top-(o+2)/2,c=i+" "+t.count_label,u=" on "+a+" "+n[0]+", "+n[2];t.tip.set_values(l,h,u,c,[],1),t.tip.show_tip()})})}},{key:"update",value:function(t){this.data=t,this.setup_values(),this.bindTooltip()}}]),e}(dt),At={line:yt,bar:gt,multiaxis:xt,scatter:mt,percentage:kt,heatmap:wt,pie:bt},Ct=function t(e){return q(this,t),B(e.type,arguments[0])};return Ct}(); +var Chart=function(){"use strict";function t(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function e(t){var e=t.getBoundingClientRect();return{top:e.top+(document.documentElement.scrollTop||document.body.scrollTop),left:e.left+(document.documentElement.scrollLeft||document.body.scrollLeft)}}function n(t){var e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}function a(t){var e=window.getComputedStyle(t),i=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return t.clientWidth-i}function s(t){return parseFloat(t.toFixed(2))}function r(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]&&arguments[3];i||(i=n?t[0]:t[t.length-1]);var a=new Array(Math.abs(e)).fill(i);return t=n?a.concat(t):t.concat(a)}function o(t,e){return(t+"").length*e}function l(t,e,i){var n=void 0,a=void 0;return t<=e?(a=t,0===(n=e-t)&&(a-=n=i*nt)):(a=e,0===(n=t-e)&&(n=i*nt)),[n,a]}function h(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.length-t.length;return i>0?t=r(t,i):e=r(e,i),[t,e]}function u(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function c(t,e){var i=document.createElementNS("http://www.w3.org/2000/svg",t);for(var n in e){var a=e[n];if("inside"===n)u(a).appendChild(i);else if("around"===n){var s=u(a);s.parentNode.insertBefore(i,s),i.appendChild(s)}else"styles"===n?"object"===(void 0===a?"undefined":J(a))&&Object.keys(a).map(function(t){i.style[t]=a[t]}):("className"===n&&(n="class"),"innerHTML"===n?i.textContent=a:i.setAttribute(n,a))}return i}function p(t,e){return c("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function d(t,e,i,n){return c("stop",{inside:t,style:"stop-color: "+i,offset:e,"stop-opacity":n})}function f(t,e,i,n){return c("svg",{className:e,inside:t,width:i,height:n})}function v(t){return c("defs",{inside:t})}function y(t,e){return c("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function g(t){return c("path",{className:arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",d:t,styles:{stroke:arguments.length>2&&void 0!==arguments[2]?arguments[2]:"none",fill:arguments.length>3&&void 0!==arguments[3]?arguments[3]:"none"}})}function m(t,e){var i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],n="path-fill-gradient-"+e,a=p(t,n),s=[1,.6,.2];return i&&(s=[.4,.2,0]),d(a,"0%",e,s[0]),d(a,"50%",e,s[1]),d(a,"100%",e,s[2]),n}function x(t,e,i,n){var a=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},s={className:t,x:e,y:i,width:n,height:n,fill:1};return Object.keys(a).map(function(t){s[t]=a[t]}),c("rect",s)}function k(t,e,i,n){return c("text",{className:t,x:e,y:i,dy:rt/2+"px","font-size":rt+"px",innerHTML:n})}function _(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};a.stroke||(a.stroke=ot);var s=c("line",{className:"line-vertical "+a.className,x1:0,x2:0,y1:i,y2:n,styles:{stroke:a.stroke}}),r=c("text",{x:0,y:i>n?i+st:i-st-rt,dy:rt+"px","font-size":rt+"px","text-anchor":"middle",innerHTML:e}),o=c("g",{transform:"translate("+t+", 0)"});return o.appendChild(s),o.appendChild(r),o}function b(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};a.stroke||(a.stroke=ot),a.lineType||(a.lineType="");var s=c("line",{className:"line-horizontal "+a.className+("dashed"===a.lineType?"dashed":""),x1:i,x2:n,y1:t,y2:t,styles:{stroke:a.stroke}}),r=c("text",{x:i255?255:t<0?0:t}function A(t,e){var i=ct(t),n=!1;"#"==i[0]&&(i=i.slice(1),n=!0);var a=parseInt(i,16),s=w((a>>16)+e),r=w((a>>8&255)+e),o=w((255&a)+e);return(n?"#":"")+(o|r<<8|s<<16).toString(16)}function C(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t)}function M(t,e,i){if(t!==e){pt.includes(t)||console.error("'"+t+"' is not a valid chart type."),dt[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var n=ft[e].includes(t);return new Nt({parent:i.parent,title:i.title,data:i.data,type:t,height:i.height,colors:n?i.colors:void 0})}}function L(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"linear",a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:void 0,s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},r=t.cloneNode(!0),o=t.cloneNode(!0);for(var l in e){var h=void 0;h="transform"===l?document.createElementNS("http://www.w3.org/2000/svg","animateTransform"):document.createElementNS("http://www.w3.org/2000/svg","animate");var u=s[l]||t.getAttribute(l),c=e[l],p={attributeName:l,from:u,to:c,begin:"0s",dur:i/1e3+"s",values:u+";"+c,keySplines:vt[n],keyTimes:"0;1",calcMode:"spline",fill:"freeze"};a&&(p.type=a);for(var d in p)h.setAttribute(d,p[d]);r.appendChild(h),a?o.setAttribute(l,"translate("+c+")"):o.setAttribute(l,c)}return[r,o]}function T(t,e){t.style.transform=e,t.style.webkitTransform=e,t.style.msTransform=e,t.style.mozTransform=e,t.style.oTransform=e}function N(t,e){var i=[],n=[];e.map(function(t){var e=t[0],a=e.parentNode,s=void 0,r=void 0;t[0]=e;var o=L.apply(void 0,et(t)),l=tt(o,2);s=l[0],r=l[1],i.push(r),n.push([s,a]),a.replaceChild(s,e)});var a=t.cloneNode(!0);return n.map(function(t,n){t[1].replaceChild(i[n],t[0]),e[n][0]=i[n]}),a}function P(t,e,i){if(0!==i.length){var n=N(e,i);e.parentNode==t&&(t.removeChild(e),t.appendChild(n)),setTimeout(function(){n.parentNode==t&&(t.removeChild(n),t.appendChild(e))},at)}}function W(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]&&arguments[3],a=arguments.length>4&&void 0!==arguments[4]&&arguments[4],s=t.map(function(t,i){return e[i]+","+t}).join("L"),r=g("M"+s,"line-graph-path",i);if(n){var o=m(this.svgDefs,i);r.style.stroke="url(#"+o+")"}var l=[r];if(a){var h=m(this.svgDefs,i,!0),u=this.state.yAxis.zeroLine,c="M0,"+u+"L"+s+"L"+this.width+","+u;l.push(g(c,"region-fill","none","url(#"+h+")"))}return l}function S(t){if(0===t)return[0,0];if(isNaN(t))return{mantissa:-6755399441055744,exponent:972};var e=t>0?1:-1;if(!isFinite(t))return{mantissa:4503599627370496*e,exponent:972};t=Math.abs(t);var i=Math.floor(Math.log10(t));return[e*(t/Math.pow(10,i)),i]}function O(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=Math.ceil(t),n=Math.floor(e),a=i-n,s=a,r=1;a>5&&(a%2!=0&&(a=++i-n),s=a/2,r=2),a<=2&&(r=a/(s=4)),0===a&&(s=5,r=1);for(var o=[],l=0;l<=s;l++)o.push(n+r*l);return o}function D(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=S(t),n=tt(i,2),a=n[0],s=n[1],r=e?e/Math.pow(10,s):0,o=O(a=a.toFixed(6),r);return o=o.map(function(t){return t*Math.pow(10,s)})}function R(t){function e(t,e){for(var i=D(t),n=i[1]-i[0],a=0,s=1;a1&&void 0!==arguments[1]&&arguments[1],n=Math.max.apply(Math,et(t)),a=Math.min.apply(Math,et(t)),s=[];if(n>=0&&a>=0)S(n)[1],s=i?D(n,a):D(n);else if(n>0&&a<0){var r=Math.abs(a);n>=r?(S(n)[1],s=e(n,r)):(S(r)[1],s=e(r,n).map(function(t){return-1*t}))}else if(n<=0&&a<=0){var o=Math.abs(a),l=Math.abs(n);S(o)[1],s=(s=i?D(o,l):D(o)).reverse().map(function(t){return-1*t})}return s}function z(t){var e=Y(t);return t.indexOf(0)>=0?t.indexOf(0):t[0]>0?-1*t[0]/e:-1*t[t.length-1]/e+(t.length-1)}function Y(t){return t[1]-t[0]}function E(t){return t[t.length-1]-t[0]}function j(t,e){for(var i=Math.max.apply(Math,et(t)),n=1/(e-1),a=[],s=0;s9?"":"0")+e,(i>9?"":"0")+i,t.getFullYear()].join("-")}function F(t,e){return Math.ceil(B(t,e)/7)}function B(t,e){return(U(e)-U(t))/864e5}function I(t,e){t.setDate(t.getDate()+e)}function q(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return"line"===t?(e.unitType="line",new _t(e)):"bar"===t?(e.unitType="bar",new _t(e)):Tt[t]?new Tt[t](e):void console.error("Undefined chart type: "+t)}!function(t,e){if("undefined"==typeof document)return e;t=t||"";var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css",i.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}('.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path,.chart-container .multiaxis-chart .line-horizontal,.chart-container .multiaxis-chart .y-axis-guide{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}',void 0);var J="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},V=(function(){function t(t){this.value=t}function e(e){function i(t,e){return new Promise(function(i,a){var o={key:t,arg:e,resolve:i,reject:a,next:null};r?r=r.next=o:(s=r=o,n(t,e))})}function n(i,s){try{var r=e[i](s),o=r.value;o instanceof t?Promise.resolve(o.value).then(function(t){n("next",t)},function(t){n("throw",t)}):a(r.done?"return":"normal",r.value)}catch(t){a("throw",t)}}function a(t,e){switch(t){case"return":s.resolve({value:e,done:!0});break;case"throw":s.reject(e);break;default:s.resolve({value:e,done:!1})}(s=s.next)?n(s.key,s.arg):r=null}var s,r;this._invoke=i,"function"!=typeof e.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)}}(),function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}),Z=function(){function t(t,e){for(var i=0;i\n\t\t\t\t
              \n\t\t\t\t
              '}),this.hide_tip(),this.title=this.container.querySelector(".title"),this.data_point_list=this.container.querySelector(".data-point-list"),this.parent.addEventListener("mouseleave",function(){e.hide_tip()})}},{key:"fill",value:function(){var e=this,i=void 0;i=this.title_value_first?""+this.title_value+""+this.title_name:this.title_name+""+this.title_value+"",this.title.innerHTML=i,this.data_point_list.innerHTML="",this.list_values.map(function(i,n){var a=e.colors[n]||"black",s=t.create("li",{styles:{"border-top":"3px solid "+a},innerHTML:''+(0===i.value||i.value?i.value:"")+"\n\t\t\t\t\t"+(i.title?i.title:"")});e.data_point_list.appendChild(s)})}},{key:"calc_position",value:function(){var t=this.container.offsetWidth;this.top=this.y-this.container.offsetHeight,this.left=this.x-t/2;var e=this.parent.offsetWidth-t,i=this.container.querySelector(".svg-pointer");if(this.left<0)i.style.left="calc(50% - "+-1*this.left+"px)",this.left=0;else if(this.left>e){var n="calc(50% + "+(this.left-e)+"px)";i.style.left=n,this.left=e}else i.style.left="50%"}},{key:"set_values",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0;this.title_name=i,this.title_value=n,this.list_values=a,this.x=t,this.y=e,this.title_value_first=s,this.refresh()}},{key:"hide_tip",value:function(){this.container.style.top="0px",this.container.style.left="0px",this.container.style.opacity="0"}},{key:"show_tip",value:function(){this.container.style.top=this.top+"px",this.container.style.left=this.left+"px",this.container.style.opacity="1"}}]),e}(),nt=.01,at=250,st=4,rt=10,ot="#dadada",lt=function(){function t(e){V(this,t),this.refreshState(e)}return Z(t,[{key:"refreshState",value:function(t){this.totalHeight=t.totalHeight,this.totalWidth=t.totalWidth,this.zeroLine=t.zeroLine,this.unitWidth=t.unitWidth,this.xAxisMode=t.xAxisMode,this.yAxisMode=t.yAxisMode}},{key:"setZeroline",value:function(t){this.zeroLine=t}},{key:"xLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};i.pos||(i.pos="bottom"),i.offset||(i.offset=0),i.mode||(i.mode=this.xAxisMode),console.log(this.xAxisMode),i.stroke||(i.stroke=ot),i.className||(i.className="");var n=this.totalHeight+6,a="span"===i.mode?-6:this.totalHeight;return"tick"===i.mode&&"top"===i.pos&&(n=-6,a=0),_(t,e,n,a,{stroke:i.stroke,className:i.className,lineType:i.lineType})}},{key:"yLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};i.pos||(i.pos="left"),i.offset||(i.offset=0),i.mode||(i.mode=this.yAxisMode),i.stroke||(i.stroke=ot),i.className||(i.className="");var n=-6,a="span"===i.mode?this.totalWidth+6:0;return"tick"===i.mode&&"right"===i.pos&&(n=this.totalWidth+6,a=this.totalWidth),n+=i.offset,a+=i.offset,b(t,e,n,a,{stroke:i.stroke,className:i.className,lineType:i.lineType})}},{key:"xMarker",value:function(){}},{key:"yMarker",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},n=c("text",{className:"chart-label",x:this.totalWidth-o(e,5)-st,y:t-rt-2,dy:rt/2+"px","font-size":rt+"px","text-anchor":"start",innerHTML:e+""}),a=b(t,"",0,this.totalWidth,{stroke:i.stroke||ot,className:i.className||"",lineType:i.lineType});return a.appendChild(n),a}},{key:"xRegion",value:function(){return c("rect",{className:"bar mini",style:"fill: rgba(228, 234, 239, 0.49)",x:0,y:y2,width:this.totalWidth,height:y1-y2})}},{key:"yRegion",value:function(t,e,i){var n=c("rect",{className:"bar mini",style:"fill: rgba(228, 234, 239, 0.49)",x:0,y:e,width:this.totalWidth,height:t-e}),a=c("line",{className:"line-horizontal",x1:0,x2:this.totalWidth,y1:e,y2:e,styles:{stroke:ot}}),s=c("line",{className:"line-horizontal",x1:0,x2:this.totalWidth,y1:t,y2:t,styles:{stroke:ot}}),r=c("text",{className:"chart-label",x:this.totalWidth-o(i,4.5)-st,y:e-rt-2,dy:rt/2+"px","font-size":rt+"px","text-anchor":"start",innerHTML:i+""}),l=c("g",{});return l.appendChild(n),l.appendChild(a),l.appendChild(s),l.appendChild(r),l}},{key:"animatebar",value:function(t,e,i,n,a){var s=e-this.avgUnitWidth/4,r=this.avgUnitWidth/2/a,o=l(i,this.zeroLine,this.totalHeight),h=tt(o,2);return e=s+r*n,[t,{width:r,height:h[0],x:e,y:h[1]},350,"easein"]}},{key:"animatedot",value:function(t,e,i){return[t,{cx:e,cy:i},350,"easein"]}},{key:"animatepath",value:function(t,e){var i=[],n=[t[0],{d:"M"+e},350,"easein"];if(i.push(n),t[1]){var a="0,"+this.zeroLine+"L",s="L"+this.totalWidth+", "+this.zeroLine,r=[t[1],{d:"M"+a+e+s},350,"easein"];i.push(r)}return i}},{key:"translate",value:function(t,e,i,n){return[t,{transform:i.join(", ")},n,"easein","translate",{transform:e.join(", ")}]}},{key:"translateVertLine",value:function(t,e,i){return this.translate(t,[i,0],[e,0],350)}},{key:"translateHoriLine",value:function(t,e,i){return this.translate(t,[0,i],[0,e],350)}}]),t}(),ht={"light-blue":"#7cd6fd",blue:"#5e64ff",violet:"#743ee2",red:"#ff5858",orange:"#ffa00a",yellow:"#feef72",green:"#28a745","light-green":"#98d85b",purple:"#b554ff",magenta:"#ffa3ef",black:"#36114C",grey:"#bdd3e6","light-grey":"#f0f4f7","dark-grey":"#b8c2cc"},ut=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],ct=function(t){return ht[t]||t},pt=["line","scatter","bar","percentage","heatmap","pie"],dt={bar:["line","scatter","percentage","pie"],line:["scatter","bar","percentage","pie"],pie:["line","scatter","percentage","bar"],scatter:["line","bar","percentage","pie"],percentage:["bar","line","scatter","pie"],heatmap:[]},ft={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},vt={ease:"0.25 0.1 0.25 1",linear:"0 0 1 1",easein:"0.1 0.8 0.2 1",easeout:"0 0 0.58 1",easeinout:"0.42 0 0.58 1"},yt=function(){function e(t){var i=t.height,n=void 0===i?240:i,a=t.title,s=void 0===a?"":a,r=t.subtitle,o=void 0===r?"":r,l=(t.colors,t.isNavigable),h=void 0===l?0:l,u=(t.showLegend,t.type,t.parent);V(this,e),this.rawChartArgs=arguments[0],this.parent="string"==typeof u?document.querySelector(u):u,this.title=s,this.subtitle=o,this.argHeight=n,this.isNavigable=h,this.isNavigable&&(this.currentIndex=0),this.configure(arguments[0])}return Z(e,[{key:"configure",value:function(t){this.setColors(),this.config={showTooltip:1,showLegend:1,isNavigable:0,animate:0},this.state={colors:this.colors}}},{key:"setColors",value:function(){var t=this.rawChartArgs,e="percentage"===t.type||"pie"===t.type?t.data.labels:t.data.datasets;!t.colors||e&&t.colors.length'+this.title+'\n\t\t\t\t
              '+this.subtitle+'
              \n\t\t\t\t
              \n\t\t\t\t
              '}),this.parent.innerHTML="",this.parent.appendChild(this.container),this.chartWrapper=this.container.querySelector(".frappe-chart"),this.statsWrapper=this.container.querySelector(".graph-stats-container")}},{key:"makeTooltip",value:function(){this.tip=new it({parent:this.chartWrapper,colors:this.colors}),this.bindTooltip()}},{key:"bindTooltip",value:function(){}},{key:"draw",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calcWidth(),this.refresh(this.data),this.makeChartArea(),this.setComponentParent(),this.makeComponentLayers(),this.renderLegend(),this.setupNavigation(t),this.renderComponents(),this.renderConstants(),this.config.animate&&this.update(this.firstUpdateData)}},{key:"update",value:function(t){this.refresh(t),this.reRender()}},{key:"calcWidth",value:function(){this.baseWidth=a(this.parent)-0,this.width=this.baseWidth-(this.translateXLeft+this.translateXRight)}},{key:"refresh",value:function(t){this.oldState=this.state?JSON.parse(JSON.stringify(this.state)):{},this.intermedState={},this.prepareData(t),this.reCalc(),this.refreshRenderer()}},{key:"makeChartArea",value:function(){this.svg=f(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svgDefs=v(this.svg),this.drawArea=y(this.svg,this.type+"-chart","translate("+this.translateXLeft+", "+this.translateY+")")}},{key:"prepareData",value:function(){}},{key:"renderConstants",value:function(){}},{key:"reCalc",value:function(){}},{key:"refreshRenderer",value:function(){}},{key:"reRender",value:function(){var t=this;if(!(!(arguments.length>0&&void 0!==arguments[0])||arguments[0]))return void this.renderComponents();this.elementsToAnimate=[],this.loadAnimatedComponents(),P(this.chartWrapper,this.svg,this.elementsToAnimate),setTimeout(function(){t.renderComponents()},400)}},{key:"setComponentParent",value:function(){var t=this;this.components.forEach(function(e){return e.setupParent(t.drawArea)})}},{key:"makeComponentLayers",value:function(){this.components.forEach(function(t){return t.makeLayer()})}},{key:"renderComponents",value:function(){this.components.forEach(function(t){return t.render()})}},{key:"loadAnimatedComponents",value:function(){this.components.forEach(function(t){return t.loadAnimatedComponents()})}},{key:"renderLegend",value:function(){}},{key:"setupNavigation",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.isNavigable||(this.makeOverlay(),e&&(this.bindOverlay(),document.addEventListener("keydown",function(e){n(t.chartWrapper)&&("37"==(e=e||window.event).keyCode?t.onLeftArrow():"39"==e.keyCode?t.onRightArrow():"38"==e.keyCode?t.onUpArrow():"40"==e.keyCode?t.onDownArrow():"13"==e.keyCode&&t.onEnterKey())})))}},{key:"makeOverlay",value:function(){}},{key:"bindOverlay",value:function(){}},{key:"bind_units",value:function(){}},{key:"onLeftArrow",value:function(){}},{key:"onRightArrow",value:function(){}},{key:"onUpArrow",value:function(){}},{key:"onDownArrow",value:function(){}},{key:"onEnterKey",value:function(){}},{key:"getDataPoint",value:function(){}},{key:"updateCurrentDataPoint",value:function(){}},{key:"getDifferentChart",value:function(t){return M(t,this.type,this.rawChartArgs)}}]),e}(),gt=function(){function t(e){var i=e.layerClass,n=void 0===i?"":i,a=e.layerTransform,s=void 0===a?"":a,r=e.make,o=e.animate;V(this,t),this.layerClass=n,this.layerTransform=s,this.make=r,this.animate=o,this.layer=void 0,this.store=[]}return Z(t,[{key:"refresh",value:function(t){}},{key:"render",value:function(){var t=this;this.store=this.make(),this.layer.textContent="",this.store.forEach(function(e){t.layer.appendChild(e)})}},{key:"setupParent",value:function(t){this.parent=t}},{key:"loadAnimatedComponents",value:function(){this.animate(this.store)}},{key:"makeLayer",value:function(){this.layer=y(this.parent,this.layerClass,this.layerTransform)}}]),t}(),mt=function(){function t(e){V(this,t),this.refreshMeta(e),this.setupArgs()}return Z(t,[{key:"setupArgs",value:function(){}},{key:"refreshMeta",value:function(t){this.meta=t||{}}},{key:"draw",value:function(){}},{key:"animate",value:function(){}}]),t}(),xt=(function(t){function e(t){return V(this,e),Q(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}G(e,t),Z(e,[{key:"setupArgs",value:function(){}},{key:"draw",value:function(t,e,i,n){return c("circle",{style:"fill: "+i,"data-point-index":n,cx:t,cy:e,r:this.args.radius})}},{key:"animate",value:function(t,e,i){return[t,{cx:e,cy:i},350,"easein"]}}])}(mt),function(t){function e(t){return V(this,e),Q(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return G(e,t),Z(e,[{key:"setupArgs",value:function(){this.args={spaceRatio:.5}}},{key:"draw",value:function(t,e,i,n,a,s){var r=this.meta.unitWidth-this.meta.unitWidth*this.args.spaceRatio,o=r,h=t-r/2,u=l(e,this.meta.zeroLine,this.meta.totalHeight),p=tt(u,2),d=p[0];return c("rect",{className:"bar mini",style:"fill: "+i,"data-point-index":n,x:h,y:p[1],width:o,height:d})}},{key:"animate",value:function(t,e,i,n,a){var s=e-this.meta.avgUnitWidth/4,r=this.meta.avgUnitWidth/2/a,o=l(i,this.meta.zeroLine,this.meta.totalHeight),h=tt(o,2);return e=s+r*n,[t,{width:r,height:h[0],x:e,y:h[1]},350,"easein"]}}]),e}(mt)),kt=function(t){function e(t){return V(this,e),Q(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return G(e,t),Z(e,[{key:"setupArgs",value:function(){console.log(this),this.args={radius:this.meta.dotSize||4}}},{key:"draw",value:function(t,e,i,n){return c("circle",{style:"fill: "+i,"data-point-index":n,cx:t,cy:e,r:this.args.radius})}},{key:"animate",value:function(t,e,i){return[t,{cx:e,cy:i},350,"easein"]}}]),e}(mt),_t=function(t){function i(t){V(this,i);var e=Q(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,t));return e.isSeries=t.isSeries,e.formatTooltipY=t.formatTooltipY,e.formatTooltipX=t.formatTooltipX,e.unitType=t.unitType||"line",e.setupUnitRenderer(),e.zeroLine=e.height,e.preSetup(),e.setup(),e}return G(i,t),Z(i,[{key:"configure",value:function(t){K(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"configure",this).call(this),this.config.xAxisMode=t.xAxisMode,this.config.yAxisMode=t.yAxisMode}},{key:"preSetup",value:function(){}},{key:"setupUnitRenderer",value:function(){var t=this.rawChartArgs.options;this.unitRenderers={bar:new xt(t),line:new kt(t)}}},{key:"setHorizontalMargin",value:function(){this.translateXLeft=60,this.translateXRight=60}},{key:"checkData",value:function(t){return!0}},{key:"getFirstUpdateData",value:function(t){}},{key:"setupConstants",value:function(){var t=this;this.state={xAxisLabels:[],xAxisPositions:[],xAxisMode:this.config.xAxisMode,yAxisMode:this.config.yAxisMode},this.data.datasets.map(function(e){e.chartType||(e.chartType=t.unitType)}),this.prepareYAxis()}},{key:"prepareData",value:function(t){var e=this.state;e.xAxisLabels=t.labels||[],e.datasetLength=e.xAxisLabels.length;var i=new Array(e.datasetLength).fill(0);e.datasets=t.datasets,t.datasets||(e.datasets=[{values:i}]),e.datasets.map(function(t,n){var a=t.values;a=a?(a=a.map(function(t){return isNaN(t)?0:t})).length>e.datasetLength?a.slice(0,e.datasetLength):r(a,e.datasetLength-a.length,0):i,t.index=n}),e.noOfDatasets=e.datasets.length,e.yMarkers=t.yMarkers,e.yRegions=t.yRegions}},{key:"prepareYAxis",value:function(){this.state.yAxis={labels:[],positions:[]}}},{key:"reCalc",value:function(){var t=this.state;t.xAxisLabels=this.data.labels,this.calcXPositions(),t.datasetsLabels=this.data.datasets.map(function(t){return t.name}),this.setYAxis(),this.calcYUnits(),this.calcYMaximums(),this.calcYRegions(),this.configUnits()}},{key:"setYAxis",value:function(){this.calcYAxisParameters(this.state.yAxis,this.getAllYValues(),"line"===this.type),this.state.zeroLine=this.state.yAxis.zeroLine}},{key:"calcXPositions",value:function(){var t=this.state;this.setUnitWidthAndXOffset(),t.xAxisPositions=t.xAxisLabels.map(function(e,i){return s(t.xOffset+i*t.unitWidth)}),t.xUnitPositions=new Array(t.noOfDatasets).fill(t.xAxisPositions)}},{key:"calcYAxisParameters",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"false";t.labels=R(e,i);var n=t.labels;t.scaleMultiplier=this.height/E(n);var a=Y(n)*t.scaleMultiplier;t.zeroLine=this.height-z(n)*a,t.positions=n.map(function(e){return t.zeroLine-e*t.scaleMultiplier})}},{key:"calcYUnits",value:function(){var t=this.state;t.datasets.map(function(e){e.positions=e.values.map(function(e){return s(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"calcYMaximums",value:function(){var t=this.state;t.yUnitMinimums=new Array(t.datasetLength).fill(9999),t.datasets.map(function(e,i){e.positions.map(function(e,i){e0)for(var u=0;u0)for(var l=0;l0)for(var l=0;l0&&(t=W(r,s,i.colors[e],i.config.heatline,i.config.regionFill),o.textContent="",t.map(function(t){return o.appendChild(t)}));var d=a.map(function(t,e){return n[e]+","+t});i.elementsToAnimate=i.elementsToAnimate.concat(i.renderer.animatepath(t,d.join("L")))}})}},{key:"getYMarkerLines",value:function(){var t=this;return this.data.yMarkers?this.data.yMarkers.map(function(e,i){return new gt({layerClass:"y-markers",make:function(){return t.state.yMarkers.map(function(e){return t.renderer.yMarker(e.value,e.name,{pos:"right",mode:"span",lineType:e.type})})},animate:function(){}})}):[]}},{key:"getYRegions",value:function(){var t=this;return this.data.yRegions?this.data.yRegions.map(function(e,i){return new gt({layerClass:"y-regions",make:function(){return t.state.yRegions.map(function(e){return t.renderer.yRegion(e.start,e.end,e.name)})},animate:function(){}})}):[]}},{key:"getXRegions",value:function(){return[]}},{key:"refreshRenderer",value:function(){var t=this,e={totalHeight:this.height,totalWidth:this.width,xAxisMode:this.config.xAxisMode,yAxisMode:this.config.yAxisMode,zeroLine:this.state.zeroLine,unitWidth:this.state.unitWidth};this.renderer?this.renderer.refreshState(e):this.renderer=new lt(e);var i={totalHeight:this.height,totalWidth:this.width,zeroLine:this.state.zeroLine,unitWidth:this.state.unitWidth};Object.keys(this.unitRenderers).map(function(e){t.unitRenderers[e].refreshMeta(i)})}},{key:"bindTooltip",value:function(){var t=this;this.chartWrapper.addEventListener("mousemove",function(i){var n=e(t.chartWrapper),a=i.pageX-n.left-t.translateXLeft;i.pageY-n.top-t.translateY=0;s--){var r=i.xAxisPositions[s];if(t>r-i.unitWidth/2){var o=r+this.translateXLeft,l=i.yUnitMinimums[s]+this.translateY,h=i.datasets.map(function(t,i){return{title:t.title,value:a?e.formatTooltipY(t.values[s]):t.values[s],color:e.colors[i]}});this.tip.set_values(o,l,n[s],"",h),this.tip.show_tip();break}}}}},{key:"getDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.current_index,e={index:t},i=this.y[0];return["svg_units","yUnitPositions","values"].map(function(n){var a=n.slice(0,n.length-1);e[a]=i[n][t]}),e.label=this.xAxisLabels[t],e}},{key:"updateCurrentDataPoint",value:function(t){(t=parseInt(t))<0&&(t=0),t>=this.xAxisLabels.length&&(t=this.xAxisLabels.length-1),t!==this.current_index&&(this.current_index=t,$.fire(this.parent,"data-select",this.getDataPoint()))}},{key:"addDataPoint",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.state.datasetLength;this.data.labels.splice(i,0,t),this.data.datasets.map(function(t,n){t.values.splice(i,0,e[n])}),this.update(this.data)}},{key:"removeDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.datasetLength-1;this.data.labels.splice(t,1),this.data.datasets.map(function(e){e.values.splice(t,1)}),this.update(this.data)}},{key:"updateData",value:function(){}}]),i}(yt),bt=function(t){function e(t){V(this,e);var i=Q(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="scatter",t.dotRadius?i.dotRadius=t.dotRadius:i.dotRadius=8,i.setup(),i}return G(e,t),Z(e,[{key:"setup_values",value:function(){K(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_values",this).call(this),this.unit_args={type:"dot",args:{radius:this.dotRadius}}}},{key:"make_paths",value:function(){}},{key:"make_path",value:function(){}}]),e}(function(t){function e(t){V(this,e);var i=Q(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="line",Object.getPrototypeOf(i)!==e.prototype?Q(i):(i.setup(),i)}return G(e,t),Z(e,[{key:"configure",value:function(t){K(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"span",this.config.yAxisMode=t.yAxisMode||"span",this.config.dotRadius=t.dotRadius||4,this.config.heatline=t.heatline||0,this.config.regionFill=t.regionFill||0,this.config.showDots=t.showDots||1}},{key:"configUnits",value:function(){this.unitArgs={type:"dot",args:{radius:this.config.dotRadius}}}},{key:"setUnitWidthAndXOffset",value:function(){this.state.unitWidth=this.width/(this.state.datasetLength-1),this.state.xOffset=0}}]),e}(_t)),wt=function(t){function e(t){return V(this,e),Q(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return G(e,t),Z(e,[{key:"preSetup",value:function(){this.type="multiaxis"}},{key:"setHorizontalMargin",value:function(){var t=this.data.datasets.filter(function(t){return"left"===t.axisPosition}).length;this.translateXLeft=60*t||60,this.translateXRight=60*(this.data.datasets.length-t)||60}},{key:"prepareYAxis",value:function(){}},{key:"prepareData",value:function(t){K(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"prepareData",this).call(this,t);var i=0,n=0;this.state.datasets.forEach(function(t,e){t.yAxis={position:t.axisPosition,index:"left"===t.axisPosition?i++:n++}})}},{key:"configure",value:function(t){K(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"tick",this.config.yAxisMode=t.yAxisMode||"span"}},{key:"configUnits",value:function(){this.unitArgs={type:"bar",args:{spaceWidth:this.state.unitWidth/2}}}},{key:"setYAxis",value:function(){var t=this;this.state.datasets.map(function(e){t.calcYAxisParameters(e.yAxis,e.values,"line"===t.unitType)})}},{key:"calcYUnits",value:function(){this.state.datasets.map(function(t){t.positions=t.values.map(function(e){return s(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"renderConstants",value:function(){var t=this;this.state.datasets.map(function(e){var n="left"===e.yAxis.position?-1*e.yAxis.index*60:t.width+60*e.yAxis.index;t.renderer.xLine(n,"",{pos:"top",mode:"span",stroke:t.colors[i],className:"y-axis-guide"})})}},{key:"getYAxesComponents",value:function(){var t=this;return this.data.datasets.map(function(e,i){return new gt({layerClass:"y axis y-axis-"+i,make:function(){var e=t.state.datasets[i].yAxis;t.renderer.setZeroline(e.zeroline);var n={pos:e.position,mode:"tick",offset:60*e.index,stroke:t.colors[i]};return e.positions.map(function(i,a){return t.renderer.yLine(i,e.labels[a],n)})},animate:function(){}})})}},{key:"getChartComponents",value:function(){var t=this;return this.data.datasets.map(function(e,i){return new gt({layerClass:"dataset-units dataset-"+i,make:function(){var e=t.state.datasets[i],n=t.unitArgs;return t.renderer.setZeroline(e.yAxis.zeroLine),e.positions.map(function(e,a){return t.renderer[n.type](t.state.xAxisPositions[a],e,n.args,t.colors[i],a,i,t.state.datasetLength)})},animate:function(e){var n=t.state.datasets[i],a=t.unitArgs.type,s=t.state.xAxisPositions,r=t.state.datasets[i].positions,o=e[e.length-1],l=o.parentNode;if(t.oldState.xExtra>0)for(var h=0;h0}),i=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),i=e.slice(0,this.max_slices-1);var n=0;e.slice(this.max_slices-1).map(function(t){n+=t[0]}),i.push([n,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],i.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"renderComponents",value:function(){var e=this;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0),this.slices=[],this.slice_totals.map(function(i,n){var a=t.create("div",{className:"progress-bar",inside:e.percentageBar,styles:{background:e.colors[n],width:100*i/e.grand_total+"%"}});e.slices.push(a)})}},{key:"bindTooltip",value:function(){var t=this;this.slices.map(function(i,n){i.addEventListener("mouseenter",function(){var a=e(t.chartWrapper),s=e(i),r=s.left-a.left+i.offsetWidth/2,o=s.top-a.top-6,l=(t.formatted_labels&&t.formatted_labels.length>0?t.formatted_labels[n]:t.labels[n])+": ",h=(100*t.slice_totals[n]/t.grand_total).toFixed(1);t.tip.set_values(r,o,l,h+"%"),t.tip.show_tip()})})}},{key:"renderLegend",value:function(){var e=this,i=this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels:this.labels;this.legend_totals.map(function(n,a){n&&(t.create("div",{className:"stats",inside:e.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+i[a]+":\n\t\t\t\t\t"+n+"\n\t\t\t\t")})}}]),n}(yt),Ct=Math.PI/180,Mt=function(i){function n(t){V(this,n);var e=Q(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,t));return e.type="pie",e.elements_to_animate=null,e.hoverRadio=t.hoverRadio||.1,e.max_slices=10,e.max_legend_points=6,e.isAnimate=!1,e.startAngle=t.startAngle||0,e.clockWise=t.clockWise||!1,e.mouseMove=e.mouseMove.bind(e),e.mouseLeave=e.mouseLeave.bind(e),e.setup(),e}return G(n,i),Z(n,[{key:"setup_values",value:function(){var t=this;this.centerX=this.width/2,this.centerY=this.height/2,this.radius=this.height>this.width?this.centerX:this.centerY,this.slice_totals=[];var e=this.data.labels.map(function(e,i){var n=0;return t.data.datasets.map(function(t){n+=t.values[i]}),[n,e]}).filter(function(t){return t[0]>0}),i=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),i=e.slice(0,this.max_slices-1);var n=0;e.slice(this.max_slices-1).map(function(t){n+=t[0]}),i.push([n,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],i.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"makeArcPath",value:function(t,e){var i=this.centerX,n=this.centerY,a=this.radius,s=this.clockWise;return"M"+i+" "+n+" L"+(i+t.x)+" "+(n+t.y)+" A "+a+" "+a+" 0 0 "+(s?1:0)+" "+(i+e.x)+" "+(n+e.y)+" z"}},{key:"renderComponents",value:function(t){var e=this,i=this.radius,a=this.clockWise;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0);var s=this.slicesProperties||[];this.slices=[],this.elements_to_animate=[],this.slicesProperties=[];var r=180-this.startAngle;this.slice_totals.map(function(o,l){var h=r,u=o/e.grand_total*360,c=a?-u:u,p=r+=c,d=n.getPositionByAngle(h,i),f=n.getPositionByAngle(p,i),v=t&&s[l],y=void 0,m=void 0;t?(y=v?v.startPosition:d,m=v?v.endPosition:d):(y=d,m=f);var x=e.makeArcPath(y,m),k=g(x,"pie-path","none",e.colors[l]);k.style.transition="transform .3s;",e.drawArea.appendChild(k),e.slices.push(k),e.slicesProperties.push({startPosition:d,endPosition:f,value:o,total:e.grand_total,startAngle:h,endAngle:p,angle:c}),t&&e.elements_to_animate.push([{unit:k,array:e.slices,index:e.slices.length-1},{d:e.makeArcPath(d,f)},650,"easein",null,{d:x}])}),t&&P(this.chartWrapper,this.svg,this.elements_to_animate)}},{key:"calTranslateByAngle",value:function(t){var e=this.radius,i=this.hoverRadio,a=n.getPositionByAngle(t.startAngle+t.angle/2,e);return"translate3d("+a.x*i+"px,"+a.y*i+"px,0)"}},{key:"hoverSlice",value:function(t,i,n,a){if(t){var s=this.colors[i];if(n){T(t,this.calTranslateByAngle(this.slicesProperties[i])),t.style.fill=A(s,50);var r=e(this.svg),o=a.pageX-r.left+10,l=a.pageY-r.top-10,h=(this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels[i]:this.labels[i])+": ",u=(100*this.slice_totals[i]/this.grand_total).toFixed(1);this.tip.set_values(o,l,h,u+"%"),this.tip.show_tip()}else T(t,"translate3d(0,0,0)"),this.tip.hide_tip(),t.style.fill=s}}},{key:"mouseMove",value:function(t){for(var e=t.target,i=this.curActiveSliceIndex,n=this.curActiveSlice,a=0;a0?this.formatted_labels:this.labels;this.legend_totals.map(function(n,a){var s=e.colors[a];n&&(t.create("div",{className:"stats",inside:e.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+i[a]+":\n\t\t\t\t\t"+n+"\n\t\t\t\t")})}}],[{key:"getPositionByAngle",value:function(t,e){return{x:Math.sin(t*Ct)*e,y:Math.cos(t*Ct)*e}}}]),n}(yt),Lt=function(t){function e(t){var i=t.start,n=void 0===i?"":i,a=t.domain,s=void 0===a?"":a,r=t.subdomain,o=void 0===r?"":r,l=t.data,h=void 0===l?{}:l,u=t.discrete_domains,c=void 0===u?0:u,p=t.count_label,d=void 0===p?"":p,f=t.legend_colors,v=void 0===f?[]:f;V(this,e);var y=Q(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,arguments[0]));y.type="heatmap",y.domain=s,y.subdomain=o,y.data=h,y.discrete_domains=c,y.count_label=d;var g=new Date;return y.start=n||I(g,365),v=v.slice(0,5),y.legend_colors=y.validate_colors(v)?v:["#ebedf0","#c6e48b","#7bc96f","#239a3b","#196127"],y.distribution_size=5,y.translateX=0,y}return G(e,t),Z(e,[{key:"validate_colors",value:function(t){if(t.length<5)return 0;var e=1;return t.forEach(function(t){C(t)||(e=0,console.warn('"'+t+'" is not a valid color.'))},this),e}},{key:"setupConstants",value:function(){this.today=new Date,this.start||(this.start=new Date,this.start.setFullYear(this.start.getFullYear()-1)),this.first_week_start=new Date(this.start.toDateString()),this.last_week_start=new Date(this.today.toDateString()),7!==this.first_week_start.getDay()&&I(this.first_week_start,-1*this.first_week_start.getDay()),7!==this.last_week_start.getDay()&&I(this.last_week_start,-1*this.last_week_start.getDay()),this.no_of_cols=F(this.first_week_start+"",this.last_week_start+"")+1}},{key:"calcWidth",value:function(){this.baseWidth=12*(this.no_of_cols+3),this.discrete_domains&&(this.baseWidth+=144)}},{key:"setupLayers",value:function(){this.domain_label_group=this.makeLayer("domain-label-group chart-label"),this.data_groups=this.makeLayer("data-groups","translate(0, 20)")}},{key:"setup_values",value:function(){var t=this;this.domain_label_group.textContent="",this.data_groups.textContent="";var e=Object.keys(this.data).map(function(e){return t.data[e]});this.distribution=j(e,this.distribution_size),this.month_names=["January","February","March","April","May","June","July","August","September","October","November","December"],this.render_all_weeks_and_store_x_values(this.no_of_cols)}},{key:"render_all_weeks_and_store_x_values",value:function(t){var e=new Date(this.first_week_start);this.week_col=0,this.current_month=e.getMonth(),this.months=[this.current_month+""],this.month_weeks={},this.month_start_points=[],this.month_weeks[this.current_month]=0,this.month_start_points.push(13);for(var i=0;ii)break;v.getMonth()-t.getMonth()&&(n=1,this.discrete_domains&&(a=1),this.month_start_points.push(13+12*(e+a))),t=v}return[s,n]}},{key:"render_month_labels",value:function(){var t=this;this.months.shift(),this.month_start_points.shift(),this.months.pop(),this.month_start_points.pop(),this.month_start_points.map(function(e,i){var n=k("y-value-text",e+12,10,t.month_names[t.months[i]].substring(0,3));t.domain_label_group.appendChild(n)})}},{key:"renderComponents",value:function(){Array.prototype.slice.call(this.container.querySelectorAll(".graph-stats-container, .sub-title, .title")).map(function(t){t.style.display="None"}),this.chartWrapper.style.marginTop="0px",this.chartWrapper.style.paddingTop="0px"}},{key:"bindTooltip",value:function(){var t=this;Array.prototype.slice.call(document.querySelectorAll(".data-group .day")).map(function(e){e.addEventListener("mouseenter",function(e){var i=e.target.getAttribute("data-value"),n=e.target.getAttribute("data-date").split("-"),a=t.month_names[parseInt(n[1])-1].substring(0,3),s=t.chartWrapper.getBoundingClientRect(),r=e.target.getBoundingClientRect(),o=parseInt(e.target.getAttribute("width")),l=r.left-s.left+(o+2)/2,h=r.top-s.top-(o+2)/2,u=i+" "+t.count_label,c=" on "+a+" "+n[0]+", "+n[2];t.tip.set_values(l,h,c,u,[],1),t.tip.show_tip()})})}},{key:"update",value:function(t){this.data=t,this.setup_values(),this.bindTooltip()}}]),e}(yt),Tt={mixed:_t,multiaxis:wt,scatter:bt,percentage:At,heatmap:Lt,pie:Mt},Nt=function t(e){return V(this,t),q(e.type,arguments[0])};return Nt}(); diff --git a/docs/assets/js/frappe-charts.min.js b/docs/assets/js/frappe-charts.min.js index f183f76..b65e80a 100644 --- a/docs/assets/js/frappe-charts.min.js +++ b/docs/assets/js/frappe-charts.min.js @@ -1 +1 @@ -var Chart=function(){"use strict";function t(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function e(t){var e=t.getBoundingClientRect();return{top:e.top+(document.documentElement.scrollTop||document.body.scrollTop),left:e.left+(document.documentElement.scrollLeft||document.body.scrollLeft)}}function n(t){var e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}function a(t){var e=window.getComputedStyle(t),i=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return t.clientWidth-i}function s(t){return parseFloat(t.toFixed(2))}function r(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]&&arguments[3];i||(i=n?t[0]:t[t.length-1]);var a=new Array(Math.abs(e)).fill(i);return t=n?a.concat(t):t.concat(a)}function o(t,e,i){var n=void 0,a=void 0;return t<=e?(a=t,0===(n=e-t)&&(a-=n=i*tt)):(a=e,0===(n=t-e)&&(n=i*tt)),[n,a]}function l(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.length-t.length;return i>0?t=r(t,i):e=r(e,i),[t,e]}function h(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function c(t,e){var i=document.createElementNS("http://www.w3.org/2000/svg",t);for(var n in e){var a=e[n];if("inside"===n)h(a).appendChild(i);else if("around"===n){var s=h(a);s.parentNode.insertBefore(i,s),i.appendChild(s)}else"styles"===n?"object"===(void 0===a?"undefined":I(a))&&Object.keys(a).map(function(t){i.style[t]=a[t]}):("className"===n&&(n="class"),"innerHTML"===n?i.textContent=a:i.setAttribute(n,a))}return i}function u(t,e){return c("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function p(t,e,i,n){return c("stop",{inside:t,style:"stop-color: "+i,offset:e,"stop-opacity":n})}function d(t,e,i,n){return c("svg",{className:e,inside:t,width:i,height:n})}function f(t){return c("defs",{inside:t})}function v(t,e){return c("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function g(t){return c("path",{className:arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",d:t,styles:{stroke:arguments.length>2&&void 0!==arguments[2]?arguments[2]:"none",fill:arguments.length>3&&void 0!==arguments[3]?arguments[3]:"none"}})}function y(t,e){var i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],n="path-fill-gradient-"+e,a=u(t,n),s=[1,.6,.2];return i&&(s=[.4,.2,0]),p(a,"0%",e,s[0]),p(a,"50%",e,s[1]),p(a,"100%",e,s[2]),n}function m(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"none",s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},r={className:t,x:e,y:i,width:n,height:n,fill:a};return Object.keys(s).map(function(t){r[t]=s[t]}),c("rect",r)}function x(t,e,i,n){return c("text",{className:t,x:e,y:i,dy:nt/2+"px","font-size":nt+"px",innerHTML:n})}function k(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};a.stroke||(a.stroke=at);var s=c("line",{className:"line-vertical "+a.className,x1:0,x2:0,y1:i,y2:n,styles:{stroke:a.stroke}}),r=c("text",{x:0,y:i>n?i+it:i-it-nt,dy:nt+"px","font-size":nt+"px","text-anchor":"middle",innerHTML:e}),o=c("g",{transform:"translate("+t+", 0)"});return o.appendChild(s),o.appendChild(r),o}function _(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};a.stroke||(a.stroke=at),a.lineType||(a.lineType="");var s=c("line",{className:"line-horizontal "+a.className+("dashed"===a.lineType?"dashed":""),x1:i,x2:n,y1:0,y2:0,styles:{stroke:a.stroke}}),r=c("text",{x:i255?255:t<0?0:t}function w(t,e){var i=lt(t),n=!1;"#"==i[0]&&(i=i.slice(1),n=!0);var a=parseInt(i,16),s=b((a>>16)+e),r=b((a>>8&255)+e),o=b((255&a)+e);return(n?"#":"")+(o|r<<8|s<<16).toString(16)}function A(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t)}function C(t,e,i){if(t!==e){ht.includes(t)||console.error("'"+t+"' is not a valid chart type."),ct[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var n=ut[e].includes(t);return new Ct({parent:i.parent,title:i.title,data:i.data,type:t,height:i.height,colors:n?i.colors:void 0})}}function L(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"linear",a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:void 0,s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},r=t.cloneNode(!0),o=t.cloneNode(!0);for(var l in e){var h=void 0;h="transform"===l?document.createElementNS("http://www.w3.org/2000/svg","animateTransform"):document.createElementNS("http://www.w3.org/2000/svg","animate");var c=s[l]||t.getAttribute(l),u=e[l],p={attributeName:l,from:c,to:u,begin:"0s",dur:i/1e3+"s",values:c+";"+u,keySplines:pt[n],keyTimes:"0;1",calcMode:"spline",fill:"freeze"};a&&(p.type=a);for(var d in p)h.setAttribute(d,p[d]);r.appendChild(h),a?o.setAttribute(l,"translate("+u+")"):o.setAttribute(l,u)}return[r,o]}function M(t,e){t.style.transform=e,t.style.webkitTransform=e,t.style.msTransform=e,t.style.mozTransform=e,t.style.oTransform=e}function P(t,e){var i=[],n=[];e.map(function(t){var e=t[0],a=e.parentNode,s=void 0,r=void 0;t[0]=e;var o=L.apply(void 0,G(t)),l=$(o,2);s=l[0],r=l[1],i.push(r),n.push([s,a]),a.replaceChild(s,e)});var a=t.cloneNode(!0);return n.map(function(t,n){t[1].replaceChild(i[n],t[0]),e[n][0]=i[n]}),a}function N(t,e,i){if(0!==i.length){var n=P(e,i);e.parentNode==t&&(t.removeChild(e),t.appendChild(n)),setTimeout(function(){n.parentNode==t&&(t.removeChild(n),t.appendChild(e))},et)}}function O(t){if(0===t)return[0,0];if(isNaN(t))return{mantissa:-6755399441055744,exponent:972};var e=t>0?1:-1;if(!isFinite(t))return{mantissa:4503599627370496*e,exponent:972};t=Math.abs(t);var i=Math.floor(Math.log10(t));return[e*(t/Math.pow(10,i)),i]}function S(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=Math.ceil(t),n=Math.floor(e),a=i-n,s=a,r=1;a>5&&(a%2!=0&&(a=++i-n),s=a/2,r=2),a<=2&&(r=a/(s=4)),0===a&&(s=5,r=1);for(var o=[],l=0;l<=s;l++)o.push(n+r*l);return o}function W(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=O(t),n=$(i,2),a=n[0],s=n[1],r=e?e/Math.pow(10,s):0,o=S(a=a.toFixed(6),r);return o=o.map(function(t){return t*Math.pow(10,s)})}function T(t){function e(t,e){for(var i=W(t),n=i[1]-i[0],a=0,s=1;a1&&void 0!==arguments[1]&&arguments[1],n=Math.max.apply(Math,G(t)),a=Math.min.apply(Math,G(t)),s=[];if(n>=0&&a>=0)O(n)[1],s=i?W(n,a):W(n);else if(n>0&&a<0){var r=Math.abs(a);n>=r?(O(n)[1],s=e(n,r)):(O(r)[1],s=e(r,n).map(function(t){return-1*t}))}else if(n<=0&&a<=0){var o=Math.abs(a),l=Math.abs(n);O(o)[1],s=(s=i?W(o,l):W(o)).reverse().map(function(t){return-1*t})}return s}function D(t){var e=z(t);return t.indexOf(0)>=0?t.indexOf(0):t[0]>0?-1*t[0]/e:-1*t[t.length-1]/e+(t.length-1)}function z(t){return t[1]-t[0]}function E(t){return t[t.length-1]-t[0]}function j(t,e){for(var i=Math.max.apply(Math,G(t)),n=1/(e-1),a=[],s=0;s9?"":"0")+e,(i>9?"":"0")+i,t.getFullYear()].join("-")}function Y(t,e){return Math.ceil(F(t,e)/7)}function F(t,e){return(R(e)-R(t))/864e5}function X(t,e){t.setDate(t.getDate()+e)}function B(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return At[t]?new At[t](e):new yt(e)}!function(t,e){if("undefined"==typeof document)return e;t=t||"";var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css",i.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}('.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path,.chart-container .multiaxis-chart .line-horizontal,.chart-container .multiaxis-chart .y-axis-guide{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}',void 0);var I="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},q=(function(){function t(t){this.value=t}function e(e){function i(t,e){return new Promise(function(i,a){var o={key:t,arg:e,resolve:i,reject:a,next:null};r?r=r.next=o:(s=r=o,n(t,e))})}function n(i,s){try{var r=e[i](s),o=r.value;o instanceof t?Promise.resolve(o.value).then(function(t){n("next",t)},function(t){n("throw",t)}):a(r.done?"return":"normal",r.value)}catch(t){a("throw",t)}}function a(t,e){switch(t){case"return":s.resolve({value:e,done:!0});break;case"throw":s.reject(e);break;default:s.resolve({value:e,done:!1})}(s=s.next)?n(s.key,s.arg):r=null}var s,r;this._invoke=i,"function"!=typeof e.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)}}(),function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}),J=function(){function t(t,e){for(var i=0;i\n\t\t\t\t
                \n\t\t\t\t
                '}),this.hide_tip(),this.title=this.container.querySelector(".title"),this.data_point_list=this.container.querySelector(".data-point-list"),this.parent.addEventListener("mouseleave",function(){e.hide_tip()})}},{key:"fill",value:function(){var e=this,i=void 0;i=this.title_value_first?""+this.title_value+""+this.title_name:this.title_name+""+this.title_value+"",this.title.innerHTML=i,this.data_point_list.innerHTML="",this.list_values.map(function(i,n){var a=e.colors[n]||"black",s=t.create("li",{styles:{"border-top":"3px solid "+a},innerHTML:''+(0===i.value||i.value?i.value:"")+"\n\t\t\t\t\t"+(i.title?i.title:"")});e.data_point_list.appendChild(s)})}},{key:"calc_position",value:function(){var t=this.container.offsetWidth;this.top=this.y-this.container.offsetHeight,this.left=this.x-t/2;var e=this.parent.offsetWidth-t,i=this.container.querySelector(".svg-pointer");if(this.left<0)i.style.left="calc(50% - "+-1*this.left+"px)",this.left=0;else if(this.left>e){var n="calc(50% + "+(this.left-e)+"px)";i.style.left=n,this.left=e}else i.style.left="50%"}},{key:"set_values",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0;this.title_name=i,this.title_value=n,this.list_values=a,this.x=t,this.y=e,this.title_value_first=s,this.refresh()}},{key:"hide_tip",value:function(){this.container.style.top="0px",this.container.style.left="0px",this.container.style.opacity="0"}},{key:"show_tip",value:function(){this.container.style.top=this.top+"px",this.container.style.left=this.left+"px",this.container.style.opacity="1"}}]),e}(),tt=.01,et=250,it=4,nt=10,at="#dadada",st=function(){function t(e){q(this,t),this.refreshState(e)}return J(t,[{key:"refreshState",value:function(t){this.totalHeight=t.totalHeight,this.totalWidth=t.totalWidth,this.zeroLine=t.zeroLine,this.unitWidth=t.unitWidth,this.xAxisMode=t.xAxisMode,this.yAxisMode=t.yAxisMode}},{key:"setZeroline",value:function(t){this.zeroLine=t}},{key:"bar",value:function(t,e,i,n,a,s,r){var l=this.unitWidth-i.spaceWidth,h=l,u=t-l/2,p=o(e,this.zeroLine,this.totalHeight),d=$(p,2),f=d[0];return c("rect",{className:"bar mini",style:"fill: "+n,"data-point-index":a,x:u,y:d[1],width:h,height:f})}},{key:"dot",value:function(t,e,i,n,a){return c("circle",{style:"fill: "+n,"data-point-index":a,cx:t,cy:e,r:i.radius})}},{key:"xLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};i.pos||(i.pos="bottom"),i.offset||(i.offset=0),i.mode||(i.mode=this.xAxisMode),i.stroke||(i.stroke=at),i.className||(i.className="");var n=this.totalHeight+6,a="span"===i.mode?-6:this.totalHeight;return"tick"===i.mode&&"top"===i.pos&&(n=-6,a=0),k(t,e,n,a,{stroke:i.stroke,className:i.className})}},{key:"yLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};i.pos||(i.pos="left"),i.offset||(i.offset=0),i.mode||(i.mode=this.yAxisMode),i.stroke||(i.stroke=at),i.className||(i.className="");var n=-6,a="span"===i.mode?this.totalWidth+6:0;return"tick"===i.mode&&"right"===i.pos&&(n=this.totalWidth+6,a=this.totalWidth),n+=i.offset,a+=i.offset,_(t,e,n,a,{stroke:i.stroke,className:i.className})}},{key:"xMarker",value:function(){}},{key:"yMarker",value:function(){}},{key:"xRegion",value:function(){}},{key:"yRegion",value:function(){}},{key:"animatebar",value:function(t,e,i,n,a){var s=e-this.avgUnitWidth/4,r=this.avgUnitWidth/2/a,l=o(i,this.zeroLine,this.totalHeight),h=$(l,2);return e=s+r*n,[t,{width:r,height:h[0],x:e,y:h[1]},350,"easein"]}},{key:"animatedot",value:function(t,e,i){return[t,{cx:e,cy:i},350,"easein"]}},{key:"animatepath",value:function(t,e){var i=[],n=[t[0],{d:"M"+e},350,"easein"];if(i.push(n),t[1]){var a="0,"+this.zeroLine+"L",s="L"+this.totalWidth+", "+this.zeroLine,r=[t[1],{d:"M"+a+e+s},350,"easein"];i.push(r)}return i}},{key:"translate",value:function(t,e,i,n){return[t,{transform:i.join(", ")},n,"easein","translate",{transform:e.join(", ")}]}},{key:"translateVertLine",value:function(t,e,i){return this.translate(t,[i,0],[e,0],350)}},{key:"translateHoriLine",value:function(t,e,i){return this.translate(t,[0,i],[0,e],350)}}]),t}(),rt={"light-blue":"#7cd6fd",blue:"#5e64ff",violet:"#743ee2",red:"#ff5858",orange:"#ffa00a",yellow:"#feef72",green:"#28a745","light-green":"#98d85b",purple:"#b554ff",magenta:"#ffa3ef",black:"#36114C",grey:"#bdd3e6","light-grey":"#f0f4f7","dark-grey":"#b8c2cc"},ot=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],lt=function(t){return rt[t]||t},ht=["line","scatter","bar","percentage","heatmap","pie"],ct={bar:["line","scatter","percentage","pie"],line:["scatter","bar","percentage","pie"],pie:["line","scatter","percentage","bar"],scatter:["line","bar","percentage","pie"],percentage:["bar","line","scatter","pie"],heatmap:[]},ut={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},pt={ease:"0.25 0.1 0.25 1",linear:"0 0 1 1",easein:"0.1 0.8 0.2 1",easeout:"0 0 0.58 1",easeinout:"0.42 0 0.58 1"},dt=function(){function e(t){var i=t.height,n=void 0===i?240:i,a=t.title,s=void 0===a?"":a,r=t.subtitle,o=void 0===r?"":r,l=(t.colors,t.isNavigable),h=void 0===l?0:l,c=(t.showLegend,t.type,t.parent);q(this,e),this.rawChartArgs=arguments[0],this.parent="string"==typeof c?document.querySelector(c):c,this.title=s,this.subtitle=o,this.argHeight=n,this.isNavigable=h,this.isNavigable&&(this.currentIndex=0),this.configure(arguments[0])}return J(e,[{key:"configure",value:function(t){this.setColors(),this.config={showTooltip:1,showLegend:1,isNavigable:0,animate:0},this.state={colors:this.colors}}},{key:"setColors",value:function(){var t=this.rawChartArgs,e="percentage"===t.type||"pie"===t.type?t.data.labels:t.data.datasets;!t.colors||e&&t.colors.length'+this.title+'\n\t\t\t\t
                '+this.subtitle+'
                \n\t\t\t\t
                \n\t\t\t\t
                '}),this.parent.innerHTML="",this.parent.appendChild(this.container),this.chartWrapper=this.container.querySelector(".frappe-chart"),this.statsWrapper=this.container.querySelector(".graph-stats-container")}},{key:"makeTooltip",value:function(){this.tip=new Q({parent:this.chartWrapper,colors:this.colors}),this.bindTooltip()}},{key:"bindTooltip",value:function(){}},{key:"draw",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calcWidth(),this.refresh(this.data),this.makeChartArea(),this.setComponentParent(),this.makeComponentLayers(),this.renderLegend(),this.setupNavigation(t),this.renderComponents(),this.renderConstants(),this.config.animate&&this.update(this.firstUpdateData)}},{key:"update",value:function(t){this.refresh(t),this.reRender()}},{key:"calcWidth",value:function(){this.baseWidth=a(this.parent)-0,this.width=this.baseWidth-(this.translateXLeft+this.translateXRight)}},{key:"refresh",value:function(t){this.oldState=this.state?JSON.parse(JSON.stringify(this.state)):{},this.intermedState={},this.prepareData(t),this.reCalc(),this.refreshRenderer()}},{key:"makeChartArea",value:function(){this.svg=d(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svgDefs=f(this.svg),this.drawArea=v(this.svg,this.type+"-chart","translate("+this.translateXLeft+", "+this.translateY+")")}},{key:"prepareData",value:function(){}},{key:"renderConstants",value:function(){}},{key:"reCalc",value:function(){}},{key:"refreshRenderer",value:function(){}},{key:"reRender",value:function(){var t=this;if(!(!(arguments.length>0&&void 0!==arguments[0])||arguments[0]))return void this.renderComponents();this.elementsToAnimate=[],this.loadAnimatedComponents(),N(this.chartWrapper,this.svg,this.elementsToAnimate),setTimeout(function(){t.renderComponents()},400)}},{key:"setComponentParent",value:function(){var t=this;this.components.forEach(function(e){return e.setupParent(t.drawArea)})}},{key:"makeComponentLayers",value:function(){this.components.forEach(function(t){return t.makeLayer()})}},{key:"renderComponents",value:function(){this.components.forEach(function(t){return t.render()})}},{key:"loadAnimatedComponents",value:function(){this.components.forEach(function(t){return t.loadAnimatedComponents()})}},{key:"renderLegend",value:function(){}},{key:"setupNavigation",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.isNavigable||(this.makeOverlay(),e&&(this.bindOverlay(),document.addEventListener("keydown",function(e){n(t.chartWrapper)&&("37"==(e=e||window.event).keyCode?t.onLeftArrow():"39"==e.keyCode?t.onRightArrow():"38"==e.keyCode?t.onUpArrow():"40"==e.keyCode?t.onDownArrow():"13"==e.keyCode&&t.onEnterKey())})))}},{key:"makeOverlay",value:function(){}},{key:"bindOverlay",value:function(){}},{key:"bind_units",value:function(){}},{key:"onLeftArrow",value:function(){}},{key:"onRightArrow",value:function(){}},{key:"onUpArrow",value:function(){}},{key:"onDownArrow",value:function(){}},{key:"onEnterKey",value:function(){}},{key:"getDataPoint",value:function(){}},{key:"updateCurrentDataPoint",value:function(){}},{key:"getDifferentChart",value:function(t){return C(t,this.type,this.rawChartArgs)}}]),e}(),ft=function(){function t(e){var i=e.layerClass,n=void 0===i?"":i,a=e.layerTransform,s=void 0===a?"":a,r=e.make,o=e.animate;q(this,t),this.layerClass=n,this.layerTransform=s,this.make=r,this.animate=o,this.layer=void 0,this.store=[]}return J(t,[{key:"refresh",value:function(t){}},{key:"render",value:function(){var t=this;this.store=this.make(),this.layer.textContent="",this.store.forEach(function(e){t.layer.appendChild(e)})}},{key:"setupParent",value:function(t){this.parent=t}},{key:"loadAnimatedComponents",value:function(){this.animate(this.store)}},{key:"makeLayer",value:function(){this.layer=v(this.parent,this.layerClass,this.layerTransform)}}]),t}(),vt=function(t){function e(t){q(this,e);var i=K(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.is_series=t.is_series,i.format_tooltip_y=t.format_tooltip_y,i.format_tooltip_x=t.format_tooltip_x,i.zeroLine=i.height,i}return Z(e,t),J(e,[{key:"setHorizontalMargin",value:function(){this.translateXLeft=60,this.translateXRight=60}},{key:"checkData",value:function(t){return!0}},{key:"getFirstUpdateData",value:function(t){}},{key:"setupConstants",value:function(){this.state={xAxisLabels:[],xAxisPositions:[]},this.prepareYAxis()}},{key:"prepareData",value:function(t){var e=this.state;e.xAxisLabels=t.labels||[],e.datasetLength=e.xAxisLabels.length;var i=new Array(e.datasetLength).fill(0);e.datasets=t.datasets,t.datasets||(e.datasets=[{values:i}]),e.datasets.map(function(t,n){var a=t.values;a=a?(a=a.map(function(t){return isNaN(t)?0:t})).length>e.datasetLength?a.slice(0,e.datasetLength):r(a,e.datasetLength-a.length,0):i,t.index=n}),e.noOfDatasets=e.datasets.length}},{key:"prepareYAxis",value:function(){this.state.yAxis={labels:[],positions:[]}}},{key:"reCalc",value:function(){var t=this.state;t.xAxisLabels=this.data.labels,this.calcXPositions(),t.datasetsLabels=this.data.datasets.map(function(t){return t.name}),this.setYAxis(),this.calcYUnits(),this.calcYMaximums(),this.configUnits()}},{key:"setYAxis",value:function(){this.calcYAxisParameters(this.state.yAxis,this.getAllYValues(),"line"===this.type),this.state.zeroLine=this.state.yAxis.zeroLine}},{key:"calcXPositions",value:function(){var t=this.state;this.setUnitWidthAndXOffset(),t.xAxisPositions=t.xAxisLabels.map(function(e,i){return s(t.xOffset+i*t.unitWidth)}),t.xUnitPositions=new Array(t.noOfDatasets).fill(t.xAxisPositions)}},{key:"calcYAxisParameters",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"false";t.labels=T(e,i);var n=t.labels;t.scaleMultiplier=this.height/E(n);var a=z(n)*t.scaleMultiplier;t.zeroLine=this.height-D(n)*a,t.positions=n.map(function(e){return t.zeroLine-e*t.scaleMultiplier})}},{key:"calcYUnits",value:function(){var t=this.state;t.datasets.map(function(e){e.positions=e.values.map(function(e){return s(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"calcYMaximums",value:function(){var t=this.state;t.yUnitMinimums=new Array(t.datasetLength).fill(9999),t.datasets.map(function(e,i){e.positions.map(function(e,i){e0)for(var c=0;c0)for(var h=0;h0)for(var l=0;l2&&void 0!==arguments[2]?arguments[2]:this.state.datasetLength;this.data.labels.splice(i,0,t),this.data.datasets.map(function(t,n){t.values.splice(i,0,e[n])}),this.update(this.data)}},{key:"removeDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.datasetLength-1;this.data.labels.splice(t,1),this.data.datasets.map(function(e){e.values.splice(t,1)}),this.update(this.data)}},{key:"updateData",value:function(){}}]),e}(dt),gt=function(t){function e(t){q(this,e);var i=K(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="bar",i.setup(),i}return Z(e,t),J(e,[{key:"configure",value:function(t){V(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"tick",this.config.yAxisMode=t.yAxisMode||"span"}},{key:"configUnits",value:function(){this.unitArgs={type:"bar",args:{spaceWidth:this.state.unitWidth/2}}}}]),e}(vt),yt=function(t){function e(t){q(this,e);var i=K(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="line",Object.getPrototypeOf(i)!==e.prototype?K(i):(i.setup(),i)}return Z(e,t),J(e,[{key:"configure",value:function(t){V(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"span",this.config.yAxisMode=t.yAxisMode||"span",this.config.dotRadius=t.dotRadius||4,this.config.heatline=t.heatline||0,this.config.regionFill=t.regionFill||0,this.config.showDots=t.showDots||1}},{key:"configUnits",value:function(){this.unitArgs={type:"dot",args:{radius:this.config.dotRadius}}}},{key:"setUnitWidthAndXOffset",value:function(){this.state.unitWidth=this.width/(this.state.datasetLength-1),this.state.xOffset=0}},{key:"getDataUnitsComponents",value:function(t){return t.showDots?V(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"getDataUnitsComponents",this).call(this):[]}},{key:"getPathComponents",value:function(){var t=this;return this.data.datasets.map(function(e,i){return new ft({layerClass:"path dataset-path",make:function(){var e=t.state.datasets[i],n=t.colors[i];return t.getPaths(e.positions,t.state.xAxisPositions,n,t.config.heatline,t.config.regionFill)},animate:function(e){var n=t.state.xAxisPositions,a=t.state.datasets[i].positions,s=t.oldState.xAxisPositions,r=t.oldState.datasets[i].positions,o=e[0].parentNode,h=l(s,n),c=$(h,2);s=c[0],n=c[1];var u=l(r,a),p=$(u,2);r=p[0],a=p[1],t.oldState.xExtra>0&&(e=t.getPaths(r,s,t.colors[i],t.config.heatline,t.config.regionFill),o.textContent="",e.map(function(t){return o.appendChild(t)}));var d=a.map(function(t,e){return n[e]+","+t});t.elementsToAnimate=t.elementsToAnimate.concat(t.renderer.animatepath(e,d.join("L")))}})})}},{key:"getPaths",value:function(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]&&arguments[3],a=arguments.length>4&&void 0!==arguments[4]&&arguments[4],s=t.map(function(t,i){return e[i]+","+t}).join("L"),r=g("M"+s,"line-graph-path",i);if(n){var o=y(this.svgDefs,i);r.style.stroke="url(#"+o+")"}var l=[r];if(a){var h=y(this.svgDefs,i,!0),c=this.state.yAxis.zeroLine,u="M0,"+c+"L"+s+"L"+this.width+","+c;l.push(g(u,"region-fill","none","url(#"+h+")"))}return l}}]),e}(vt),mt=function(t){function e(t){q(this,e);var i=K(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="scatter",t.dotRadius?i.dotRadius=t.dotRadius:i.dotRadius=8,i.setup(),i}return Z(e,t),J(e,[{key:"setup_values",value:function(){V(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_values",this).call(this),this.unit_args={type:"dot",args:{radius:this.dotRadius}}}},{key:"make_paths",value:function(){}},{key:"make_path",value:function(){}}]),e}(yt),xt=function(t){function e(t){q(this,e);var i=K(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="multiaxis",i.unitType=t.unitType||"line",i.setup(),i}return Z(e,t),J(e,[{key:"setHorizontalMargin",value:function(){var t=this.data.datasets.filter(function(t){return"left"===t.axisPosition}).length;this.translateXLeft=60*t||60,this.translateXRight=60*(this.data.datasets.length-t)||60}},{key:"prepareYAxis",value:function(){}},{key:"prepareData",value:function(t){V(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"prepareData",this).call(this,t);var i=0,n=0;this.state.datasets.forEach(function(t,e){t.yAxis={position:t.axisPosition,index:"left"===t.axisPosition?i++:n++}})}},{key:"configure",value:function(t){V(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"tick",this.config.yAxisMode=t.yAxisMode||"span"}},{key:"configUnits",value:function(){this.unitArgs={type:"bar",args:{spaceWidth:this.state.unitWidth/2}}}},{key:"setYAxis",value:function(){var t=this;this.state.datasets.map(function(e){t.calcYAxisParameters(e.yAxis,e.values,"line"===t.unitType)})}},{key:"calcYUnits",value:function(){this.state.datasets.map(function(t){t.positions=t.values.map(function(e){return s(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"renderConstants",value:function(){var t=this;this.state.datasets.map(function(e){var n="left"===e.yAxis.position?-1*e.yAxis.index*60:t.width+60*e.yAxis.index;t.renderer.xLine(n,"",{pos:"top",mode:"span",stroke:t.colors[i],className:"y-axis-guide"})})}},{key:"getYAxesComponents",value:function(){var t=this;return this.data.datasets.map(function(e,i){return new ft({layerClass:"y axis y-axis-"+i,make:function(){var e=t.state.datasets[i].yAxis;t.renderer.setZeroline(e.zeroline);var n={pos:e.position,mode:"tick",offset:60*e.index,stroke:t.colors[i]};return e.positions.map(function(i,a){return t.renderer.yLine(i,e.labels[a],n)})},animate:function(){}})})}},{key:"getDataUnitsComponents",value:function(){var t=this;return this.data.datasets.map(function(e,i){return new ft({layerClass:"dataset-units dataset-"+i,make:function(){var e=t.state.datasets[i],n=t.unitArgs;return t.renderer.setZeroline(e.yAxis.zeroLine),e.positions.map(function(e,a){return t.renderer[n.type](t.state.xAxisPositions[a],e,n.args,t.colors[i],a,i,t.state.datasetLength)})},animate:function(e){var n=t.state.datasets[i],a=t.unitArgs.type,s=t.state.xAxisPositions,r=t.state.datasets[i].positions,o=e[e.length-1],l=o.parentNode;if(t.oldState.xExtra>0)for(var h=0;h0}),i=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),i=e.slice(0,this.max_slices-1);var n=0;e.slice(this.max_slices-1).map(function(t){n+=t[0]}),i.push([n,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],i.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"renderComponents",value:function(){var e=this;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0),this.slices=[],this.slice_totals.map(function(i,n){var a=t.create("div",{className:"progress-bar",inside:e.percentageBar,styles:{background:e.colors[n],width:100*i/e.grand_total+"%"}});e.slices.push(a)})}},{key:"bindTooltip",value:function(){var t=this;this.slices.map(function(i,n){i.addEventListener("mouseenter",function(){var a=e(t.chartWrapper),s=e(i),r=s.left-a.left+i.offsetWidth/2,o=s.top-a.top-6,l=(t.formatted_labels&&t.formatted_labels.length>0?t.formatted_labels[n]:t.labels[n])+": ",h=(100*t.slice_totals[n]/t.grand_total).toFixed(1);t.tip.set_values(r,o,l,h+"%"),t.tip.show_tip()})})}},{key:"renderLegend",value:function(){var e=this,i=this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels:this.labels;this.legend_totals.map(function(n,a){n&&(t.create("div",{className:"stats",inside:e.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+i[a]+":\n\t\t\t\t\t"+n+"\n\t\t\t\t")})}}]),n}(dt),_t=Math.PI/180,bt=function(i){function n(t){q(this,n);var e=K(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,t));return e.type="pie",e.elements_to_animate=null,e.hoverRadio=t.hoverRadio||.1,e.max_slices=10,e.max_legend_points=6,e.isAnimate=!1,e.startAngle=t.startAngle||0,e.clockWise=t.clockWise||!1,e.mouseMove=e.mouseMove.bind(e),e.mouseLeave=e.mouseLeave.bind(e),e.setup(),e}return Z(n,i),J(n,[{key:"setup_values",value:function(){var t=this;this.centerX=this.width/2,this.centerY=this.height/2,this.radius=this.height>this.width?this.centerX:this.centerY,this.slice_totals=[];var e=this.data.labels.map(function(e,i){var n=0;return t.data.datasets.map(function(t){n+=t.values[i]}),[n,e]}).filter(function(t){return t[0]>0}),i=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),i=e.slice(0,this.max_slices-1);var n=0;e.slice(this.max_slices-1).map(function(t){n+=t[0]}),i.push([n,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],i.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"makeArcPath",value:function(t,e){var i=this.centerX,n=this.centerY,a=this.radius,s=this.clockWise;return"M"+i+" "+n+" L"+(i+t.x)+" "+(n+t.y)+" A "+a+" "+a+" 0 0 "+(s?1:0)+" "+(i+e.x)+" "+(n+e.y)+" z"}},{key:"renderComponents",value:function(t){var e=this,i=this.radius,a=this.clockWise;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0);var s=this.slicesProperties||[];this.slices=[],this.elements_to_animate=[],this.slicesProperties=[];var r=180-this.startAngle;this.slice_totals.map(function(o,l){var h=r,c=o/e.grand_total*360,u=a?-c:c,p=r+=u,d=n.getPositionByAngle(h,i),f=n.getPositionByAngle(p,i),v=t&&s[l],y=void 0,m=void 0;t?(y=v?v.startPosition:d,m=v?v.endPosition:d):(y=d,m=f);var x=e.makeArcPath(y,m),k=g(x,"pie-path","none",e.colors[l]);k.style.transition="transform .3s;",e.drawArea.appendChild(k),e.slices.push(k),e.slicesProperties.push({startPosition:d,endPosition:f,value:o,total:e.grand_total,startAngle:h,endAngle:p,angle:u}),t&&e.elements_to_animate.push([{unit:k,array:e.slices,index:e.slices.length-1},{d:e.makeArcPath(d,f)},650,"easein",null,{d:x}])}),t&&N(this.chartWrapper,this.svg,this.elements_to_animate)}},{key:"calTranslateByAngle",value:function(t){var e=this.radius,i=this.hoverRadio,a=n.getPositionByAngle(t.startAngle+t.angle/2,e);return"translate3d("+a.x*i+"px,"+a.y*i+"px,0)"}},{key:"hoverSlice",value:function(t,i,n,a){if(t){var s=this.colors[i];if(n){M(t,this.calTranslateByAngle(this.slicesProperties[i])),t.style.fill=w(s,50);var r=e(this.svg),o=a.pageX-r.left+10,l=a.pageY-r.top-10,h=(this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels[i]:this.labels[i])+": ",c=(100*this.slice_totals[i]/this.grand_total).toFixed(1);this.tip.set_values(o,l,h,c+"%"),this.tip.show_tip()}else M(t,"translate3d(0,0,0)"),this.tip.hide_tip(),t.style.fill=s}}},{key:"mouseMove",value:function(t){for(var e=t.target,i=this.curActiveSliceIndex,n=this.curActiveSlice,a=0;a0?this.formatted_labels:this.labels;this.legend_totals.map(function(n,a){var s=e.colors[a];n&&(t.create("div",{className:"stats",inside:e.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+i[a]+":\n\t\t\t\t\t"+n+"\n\t\t\t\t")})}}],[{key:"getPositionByAngle",value:function(t,e){return{x:Math.sin(t*_t)*e,y:Math.cos(t*_t)*e}}}]),n}(dt),wt=function(t){function e(t){var i=t.start,n=void 0===i?"":i,a=t.domain,s=void 0===a?"":a,r=t.subdomain,o=void 0===r?"":r,l=t.data,h=void 0===l?{}:l,c=t.discrete_domains,u=void 0===c?0:c,p=t.count_label,d=void 0===p?"":p,f=t.legend_colors,v=void 0===f?[]:f;q(this,e);var g=K(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,arguments[0]));g.type="heatmap",g.domain=s,g.subdomain=o,g.data=h,g.discrete_domains=u,g.count_label=d;var y=new Date;return g.start=n||X(y,365),v=v.slice(0,5),g.legend_colors=g.validate_colors(v)?v:["#ebedf0","#c6e48b","#7bc96f","#239a3b","#196127"],g.distribution_size=5,g.translateX=0,g}return Z(e,t),J(e,[{key:"validate_colors",value:function(t){if(t.length<5)return 0;var e=1;return t.forEach(function(t){A(t)||(e=0,console.warn('"'+t+'" is not a valid color.'))},this),e}},{key:"setupConstants",value:function(){this.today=new Date,this.start||(this.start=new Date,this.start.setFullYear(this.start.getFullYear()-1)),this.first_week_start=new Date(this.start.toDateString()),this.last_week_start=new Date(this.today.toDateString()),7!==this.first_week_start.getDay()&&X(this.first_week_start,-1*this.first_week_start.getDay()),7!==this.last_week_start.getDay()&&X(this.last_week_start,-1*this.last_week_start.getDay()),this.no_of_cols=Y(this.first_week_start+"",this.last_week_start+"")+1}},{key:"calcWidth",value:function(){this.baseWidth=12*(this.no_of_cols+3),this.discrete_domains&&(this.baseWidth+=144)}},{key:"setupLayers",value:function(){this.domain_label_group=this.makeLayer("domain-label-group chart-label"),this.data_groups=this.makeLayer("data-groups","translate(0, 20)")}},{key:"setup_values",value:function(){var t=this;this.domain_label_group.textContent="",this.data_groups.textContent="";var e=Object.keys(this.data).map(function(e){return t.data[e]});this.distribution=j(e,this.distribution_size),this.month_names=["January","February","March","April","May","June","July","August","September","October","November","December"],this.render_all_weeks_and_store_x_values(this.no_of_cols)}},{key:"render_all_weeks_and_store_x_values",value:function(t){var e=new Date(this.first_week_start);this.week_col=0,this.current_month=e.getMonth(),this.months=[this.current_month+""],this.month_weeks={},this.month_start_points=[],this.month_weeks[this.current_month]=0,this.month_start_points.push(13);for(var i=0;ii)break;g.getMonth()-t.getMonth()&&(n=1,this.discrete_domains&&(a=1),this.month_start_points.push(13+12*(e+a))),t=g}return[s,n]}},{key:"render_month_labels",value:function(){var t=this;this.months.shift(),this.month_start_points.shift(),this.months.pop(),this.month_start_points.pop(),this.month_start_points.map(function(e,i){var n=x("y-value-text",e+12,10,t.month_names[t.months[i]].substring(0,3));t.domain_label_group.appendChild(n)})}},{key:"renderComponents",value:function(){Array.prototype.slice.call(this.container.querySelectorAll(".graph-stats-container, .sub-title, .title")).map(function(t){t.style.display="None"}),this.chartWrapper.style.marginTop="0px",this.chartWrapper.style.paddingTop="0px"}},{key:"bindTooltip",value:function(){var t=this;Array.prototype.slice.call(document.querySelectorAll(".data-group .day")).map(function(e){e.addEventListener("mouseenter",function(e){var i=e.target.getAttribute("data-value"),n=e.target.getAttribute("data-date").split("-"),a=t.month_names[parseInt(n[1])-1].substring(0,3),s=t.chartWrapper.getBoundingClientRect(),r=e.target.getBoundingClientRect(),o=parseInt(e.target.getAttribute("width")),l=r.left-s.left+(o+2)/2,h=r.top-s.top-(o+2)/2,c=i+" "+t.count_label,u=" on "+a+" "+n[0]+", "+n[2];t.tip.set_values(l,h,u,c,[],1),t.tip.show_tip()})})}},{key:"update",value:function(t){this.data=t,this.setup_values(),this.bindTooltip()}}]),e}(dt),At={line:yt,bar:gt,multiaxis:xt,scatter:mt,percentage:kt,heatmap:wt,pie:bt},Ct=function t(e){return q(this,t),B(e.type,arguments[0])};return Ct}(); +var Chart=function(){"use strict";function t(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function e(t){var e=t.getBoundingClientRect();return{top:e.top+(document.documentElement.scrollTop||document.body.scrollTop),left:e.left+(document.documentElement.scrollLeft||document.body.scrollLeft)}}function n(t){var e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}function a(t){var e=window.getComputedStyle(t),i=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return t.clientWidth-i}function s(t){return parseFloat(t.toFixed(2))}function r(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]&&arguments[3];i||(i=n?t[0]:t[t.length-1]);var a=new Array(Math.abs(e)).fill(i);return t=n?a.concat(t):t.concat(a)}function o(t,e){return(t+"").length*e}function l(t,e,i){var n=void 0,a=void 0;return t<=e?(a=t,0===(n=e-t)&&(a-=n=i*nt)):(a=e,0===(n=t-e)&&(n=i*nt)),[n,a]}function h(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.length-t.length;return i>0?t=r(t,i):e=r(e,i),[t,e]}function u(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function c(t,e){var i=document.createElementNS("http://www.w3.org/2000/svg",t);for(var n in e){var a=e[n];if("inside"===n)u(a).appendChild(i);else if("around"===n){var s=u(a);s.parentNode.insertBefore(i,s),i.appendChild(s)}else"styles"===n?"object"===(void 0===a?"undefined":J(a))&&Object.keys(a).map(function(t){i.style[t]=a[t]}):("className"===n&&(n="class"),"innerHTML"===n?i.textContent=a:i.setAttribute(n,a))}return i}function p(t,e){return c("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function d(t,e,i,n){return c("stop",{inside:t,style:"stop-color: "+i,offset:e,"stop-opacity":n})}function f(t,e,i,n){return c("svg",{className:e,inside:t,width:i,height:n})}function v(t){return c("defs",{inside:t})}function y(t,e){return c("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function g(t){return c("path",{className:arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",d:t,styles:{stroke:arguments.length>2&&void 0!==arguments[2]?arguments[2]:"none",fill:arguments.length>3&&void 0!==arguments[3]?arguments[3]:"none"}})}function m(t,e){var i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],n="path-fill-gradient-"+e,a=p(t,n),s=[1,.6,.2];return i&&(s=[.4,.2,0]),d(a,"0%",e,s[0]),d(a,"50%",e,s[1]),d(a,"100%",e,s[2]),n}function x(t,e,i,n){var a=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},s={className:t,x:e,y:i,width:n,height:n,fill:1};return Object.keys(a).map(function(t){s[t]=a[t]}),c("rect",s)}function k(t,e,i,n){return c("text",{className:t,x:e,y:i,dy:rt/2+"px","font-size":rt+"px",innerHTML:n})}function _(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};a.stroke||(a.stroke=ot);var s=c("line",{className:"line-vertical "+a.className,x1:0,x2:0,y1:i,y2:n,styles:{stroke:a.stroke}}),r=c("text",{x:0,y:i>n?i+st:i-st-rt,dy:rt+"px","font-size":rt+"px","text-anchor":"middle",innerHTML:e}),o=c("g",{transform:"translate("+t+", 0)"});return o.appendChild(s),o.appendChild(r),o}function b(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};a.stroke||(a.stroke=ot),a.lineType||(a.lineType="");var s=c("line",{className:"line-horizontal "+a.className+("dashed"===a.lineType?"dashed":""),x1:i,x2:n,y1:t,y2:t,styles:{stroke:a.stroke}}),r=c("text",{x:i255?255:t<0?0:t}function A(t,e){var i=ct(t),n=!1;"#"==i[0]&&(i=i.slice(1),n=!0);var a=parseInt(i,16),s=w((a>>16)+e),r=w((a>>8&255)+e),o=w((255&a)+e);return(n?"#":"")+(o|r<<8|s<<16).toString(16)}function C(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t)}function M(t,e,i){if(t!==e){pt.includes(t)||console.error("'"+t+"' is not a valid chart type."),dt[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var n=ft[e].includes(t);return new Nt({parent:i.parent,title:i.title,data:i.data,type:t,height:i.height,colors:n?i.colors:void 0})}}function L(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"linear",a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:void 0,s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},r=t.cloneNode(!0),o=t.cloneNode(!0);for(var l in e){var h=void 0;h="transform"===l?document.createElementNS("http://www.w3.org/2000/svg","animateTransform"):document.createElementNS("http://www.w3.org/2000/svg","animate");var u=s[l]||t.getAttribute(l),c=e[l],p={attributeName:l,from:u,to:c,begin:"0s",dur:i/1e3+"s",values:u+";"+c,keySplines:vt[n],keyTimes:"0;1",calcMode:"spline",fill:"freeze"};a&&(p.type=a);for(var d in p)h.setAttribute(d,p[d]);r.appendChild(h),a?o.setAttribute(l,"translate("+c+")"):o.setAttribute(l,c)}return[r,o]}function T(t,e){t.style.transform=e,t.style.webkitTransform=e,t.style.msTransform=e,t.style.mozTransform=e,t.style.oTransform=e}function N(t,e){var i=[],n=[];e.map(function(t){var e=t[0],a=e.parentNode,s=void 0,r=void 0;t[0]=e;var o=L.apply(void 0,et(t)),l=tt(o,2);s=l[0],r=l[1],i.push(r),n.push([s,a]),a.replaceChild(s,e)});var a=t.cloneNode(!0);return n.map(function(t,n){t[1].replaceChild(i[n],t[0]),e[n][0]=i[n]}),a}function P(t,e,i){if(0!==i.length){var n=N(e,i);e.parentNode==t&&(t.removeChild(e),t.appendChild(n)),setTimeout(function(){n.parentNode==t&&(t.removeChild(n),t.appendChild(e))},at)}}function W(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]&&arguments[3],a=arguments.length>4&&void 0!==arguments[4]&&arguments[4],s=t.map(function(t,i){return e[i]+","+t}).join("L"),r=g("M"+s,"line-graph-path",i);if(n){var o=m(this.svgDefs,i);r.style.stroke="url(#"+o+")"}var l=[r];if(a){var h=m(this.svgDefs,i,!0),u=this.state.yAxis.zeroLine,c="M0,"+u+"L"+s+"L"+this.width+","+u;l.push(g(c,"region-fill","none","url(#"+h+")"))}return l}function S(t){if(0===t)return[0,0];if(isNaN(t))return{mantissa:-6755399441055744,exponent:972};var e=t>0?1:-1;if(!isFinite(t))return{mantissa:4503599627370496*e,exponent:972};t=Math.abs(t);var i=Math.floor(Math.log10(t));return[e*(t/Math.pow(10,i)),i]}function O(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=Math.ceil(t),n=Math.floor(e),a=i-n,s=a,r=1;a>5&&(a%2!=0&&(a=++i-n),s=a/2,r=2),a<=2&&(r=a/(s=4)),0===a&&(s=5,r=1);for(var o=[],l=0;l<=s;l++)o.push(n+r*l);return o}function D(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=S(t),n=tt(i,2),a=n[0],s=n[1],r=e?e/Math.pow(10,s):0,o=O(a=a.toFixed(6),r);return o=o.map(function(t){return t*Math.pow(10,s)})}function R(t){function e(t,e){for(var i=D(t),n=i[1]-i[0],a=0,s=1;a1&&void 0!==arguments[1]&&arguments[1],n=Math.max.apply(Math,et(t)),a=Math.min.apply(Math,et(t)),s=[];if(n>=0&&a>=0)S(n)[1],s=i?D(n,a):D(n);else if(n>0&&a<0){var r=Math.abs(a);n>=r?(S(n)[1],s=e(n,r)):(S(r)[1],s=e(r,n).map(function(t){return-1*t}))}else if(n<=0&&a<=0){var o=Math.abs(a),l=Math.abs(n);S(o)[1],s=(s=i?D(o,l):D(o)).reverse().map(function(t){return-1*t})}return s}function z(t){var e=Y(t);return t.indexOf(0)>=0?t.indexOf(0):t[0]>0?-1*t[0]/e:-1*t[t.length-1]/e+(t.length-1)}function Y(t){return t[1]-t[0]}function E(t){return t[t.length-1]-t[0]}function j(t,e){for(var i=Math.max.apply(Math,et(t)),n=1/(e-1),a=[],s=0;s9?"":"0")+e,(i>9?"":"0")+i,t.getFullYear()].join("-")}function F(t,e){return Math.ceil(B(t,e)/7)}function B(t,e){return(U(e)-U(t))/864e5}function I(t,e){t.setDate(t.getDate()+e)}function q(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return"line"===t?(e.unitType="line",new _t(e)):"bar"===t?(e.unitType="bar",new _t(e)):Tt[t]?new Tt[t](e):void console.error("Undefined chart type: "+t)}!function(t,e){if("undefined"==typeof document)return e;t=t||"";var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css",i.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}('.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path,.chart-container .multiaxis-chart .line-horizontal,.chart-container .multiaxis-chart .y-axis-guide{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}',void 0);var J="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},V=(function(){function t(t){this.value=t}function e(e){function i(t,e){return new Promise(function(i,a){var o={key:t,arg:e,resolve:i,reject:a,next:null};r?r=r.next=o:(s=r=o,n(t,e))})}function n(i,s){try{var r=e[i](s),o=r.value;o instanceof t?Promise.resolve(o.value).then(function(t){n("next",t)},function(t){n("throw",t)}):a(r.done?"return":"normal",r.value)}catch(t){a("throw",t)}}function a(t,e){switch(t){case"return":s.resolve({value:e,done:!0});break;case"throw":s.reject(e);break;default:s.resolve({value:e,done:!1})}(s=s.next)?n(s.key,s.arg):r=null}var s,r;this._invoke=i,"function"!=typeof e.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)}}(),function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}),Z=function(){function t(t,e){for(var i=0;i\n\t\t\t\t
                  \n\t\t\t\t
                  '}),this.hide_tip(),this.title=this.container.querySelector(".title"),this.data_point_list=this.container.querySelector(".data-point-list"),this.parent.addEventListener("mouseleave",function(){e.hide_tip()})}},{key:"fill",value:function(){var e=this,i=void 0;i=this.title_value_first?""+this.title_value+""+this.title_name:this.title_name+""+this.title_value+"",this.title.innerHTML=i,this.data_point_list.innerHTML="",this.list_values.map(function(i,n){var a=e.colors[n]||"black",s=t.create("li",{styles:{"border-top":"3px solid "+a},innerHTML:''+(0===i.value||i.value?i.value:"")+"\n\t\t\t\t\t"+(i.title?i.title:"")});e.data_point_list.appendChild(s)})}},{key:"calc_position",value:function(){var t=this.container.offsetWidth;this.top=this.y-this.container.offsetHeight,this.left=this.x-t/2;var e=this.parent.offsetWidth-t,i=this.container.querySelector(".svg-pointer");if(this.left<0)i.style.left="calc(50% - "+-1*this.left+"px)",this.left=0;else if(this.left>e){var n="calc(50% + "+(this.left-e)+"px)";i.style.left=n,this.left=e}else i.style.left="50%"}},{key:"set_values",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0;this.title_name=i,this.title_value=n,this.list_values=a,this.x=t,this.y=e,this.title_value_first=s,this.refresh()}},{key:"hide_tip",value:function(){this.container.style.top="0px",this.container.style.left="0px",this.container.style.opacity="0"}},{key:"show_tip",value:function(){this.container.style.top=this.top+"px",this.container.style.left=this.left+"px",this.container.style.opacity="1"}}]),e}(),nt=.01,at=250,st=4,rt=10,ot="#dadada",lt=function(){function t(e){V(this,t),this.refreshState(e)}return Z(t,[{key:"refreshState",value:function(t){this.totalHeight=t.totalHeight,this.totalWidth=t.totalWidth,this.zeroLine=t.zeroLine,this.unitWidth=t.unitWidth,this.xAxisMode=t.xAxisMode,this.yAxisMode=t.yAxisMode}},{key:"setZeroline",value:function(t){this.zeroLine=t}},{key:"xLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};i.pos||(i.pos="bottom"),i.offset||(i.offset=0),i.mode||(i.mode=this.xAxisMode),console.log(this.xAxisMode),i.stroke||(i.stroke=ot),i.className||(i.className="");var n=this.totalHeight+6,a="span"===i.mode?-6:this.totalHeight;return"tick"===i.mode&&"top"===i.pos&&(n=-6,a=0),_(t,e,n,a,{stroke:i.stroke,className:i.className,lineType:i.lineType})}},{key:"yLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};i.pos||(i.pos="left"),i.offset||(i.offset=0),i.mode||(i.mode=this.yAxisMode),i.stroke||(i.stroke=ot),i.className||(i.className="");var n=-6,a="span"===i.mode?this.totalWidth+6:0;return"tick"===i.mode&&"right"===i.pos&&(n=this.totalWidth+6,a=this.totalWidth),n+=i.offset,a+=i.offset,b(t,e,n,a,{stroke:i.stroke,className:i.className,lineType:i.lineType})}},{key:"xMarker",value:function(){}},{key:"yMarker",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},n=c("text",{className:"chart-label",x:this.totalWidth-o(e,5)-st,y:t-rt-2,dy:rt/2+"px","font-size":rt+"px","text-anchor":"start",innerHTML:e+""}),a=b(t,"",0,this.totalWidth,{stroke:i.stroke||ot,className:i.className||"",lineType:i.lineType});return a.appendChild(n),a}},{key:"xRegion",value:function(){return c("rect",{className:"bar mini",style:"fill: rgba(228, 234, 239, 0.49)",x:0,y:y2,width:this.totalWidth,height:y1-y2})}},{key:"yRegion",value:function(t,e,i){var n=c("rect",{className:"bar mini",style:"fill: rgba(228, 234, 239, 0.49)",x:0,y:e,width:this.totalWidth,height:t-e}),a=c("line",{className:"line-horizontal",x1:0,x2:this.totalWidth,y1:e,y2:e,styles:{stroke:ot}}),s=c("line",{className:"line-horizontal",x1:0,x2:this.totalWidth,y1:t,y2:t,styles:{stroke:ot}}),r=c("text",{className:"chart-label",x:this.totalWidth-o(i,4.5)-st,y:e-rt-2,dy:rt/2+"px","font-size":rt+"px","text-anchor":"start",innerHTML:i+""}),l=c("g",{});return l.appendChild(n),l.appendChild(a),l.appendChild(s),l.appendChild(r),l}},{key:"animatebar",value:function(t,e,i,n,a){var s=e-this.avgUnitWidth/4,r=this.avgUnitWidth/2/a,o=l(i,this.zeroLine,this.totalHeight),h=tt(o,2);return e=s+r*n,[t,{width:r,height:h[0],x:e,y:h[1]},350,"easein"]}},{key:"animatedot",value:function(t,e,i){return[t,{cx:e,cy:i},350,"easein"]}},{key:"animatepath",value:function(t,e){var i=[],n=[t[0],{d:"M"+e},350,"easein"];if(i.push(n),t[1]){var a="0,"+this.zeroLine+"L",s="L"+this.totalWidth+", "+this.zeroLine,r=[t[1],{d:"M"+a+e+s},350,"easein"];i.push(r)}return i}},{key:"translate",value:function(t,e,i,n){return[t,{transform:i.join(", ")},n,"easein","translate",{transform:e.join(", ")}]}},{key:"translateVertLine",value:function(t,e,i){return this.translate(t,[i,0],[e,0],350)}},{key:"translateHoriLine",value:function(t,e,i){return this.translate(t,[0,i],[0,e],350)}}]),t}(),ht={"light-blue":"#7cd6fd",blue:"#5e64ff",violet:"#743ee2",red:"#ff5858",orange:"#ffa00a",yellow:"#feef72",green:"#28a745","light-green":"#98d85b",purple:"#b554ff",magenta:"#ffa3ef",black:"#36114C",grey:"#bdd3e6","light-grey":"#f0f4f7","dark-grey":"#b8c2cc"},ut=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],ct=function(t){return ht[t]||t},pt=["line","scatter","bar","percentage","heatmap","pie"],dt={bar:["line","scatter","percentage","pie"],line:["scatter","bar","percentage","pie"],pie:["line","scatter","percentage","bar"],scatter:["line","bar","percentage","pie"],percentage:["bar","line","scatter","pie"],heatmap:[]},ft={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},vt={ease:"0.25 0.1 0.25 1",linear:"0 0 1 1",easein:"0.1 0.8 0.2 1",easeout:"0 0 0.58 1",easeinout:"0.42 0 0.58 1"},yt=function(){function e(t){var i=t.height,n=void 0===i?240:i,a=t.title,s=void 0===a?"":a,r=t.subtitle,o=void 0===r?"":r,l=(t.colors,t.isNavigable),h=void 0===l?0:l,u=(t.showLegend,t.type,t.parent);V(this,e),this.rawChartArgs=arguments[0],this.parent="string"==typeof u?document.querySelector(u):u,this.title=s,this.subtitle=o,this.argHeight=n,this.isNavigable=h,this.isNavigable&&(this.currentIndex=0),this.configure(arguments[0])}return Z(e,[{key:"configure",value:function(t){this.setColors(),this.config={showTooltip:1,showLegend:1,isNavigable:0,animate:0},this.state={colors:this.colors}}},{key:"setColors",value:function(){var t=this.rawChartArgs,e="percentage"===t.type||"pie"===t.type?t.data.labels:t.data.datasets;!t.colors||e&&t.colors.length'+this.title+'\n\t\t\t\t
                  '+this.subtitle+'
                  \n\t\t\t\t
                  \n\t\t\t\t
                  '}),this.parent.innerHTML="",this.parent.appendChild(this.container),this.chartWrapper=this.container.querySelector(".frappe-chart"),this.statsWrapper=this.container.querySelector(".graph-stats-container")}},{key:"makeTooltip",value:function(){this.tip=new it({parent:this.chartWrapper,colors:this.colors}),this.bindTooltip()}},{key:"bindTooltip",value:function(){}},{key:"draw",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calcWidth(),this.refresh(this.data),this.makeChartArea(),this.setComponentParent(),this.makeComponentLayers(),this.renderLegend(),this.setupNavigation(t),this.renderComponents(),this.renderConstants(),this.config.animate&&this.update(this.firstUpdateData)}},{key:"update",value:function(t){this.refresh(t),this.reRender()}},{key:"calcWidth",value:function(){this.baseWidth=a(this.parent)-0,this.width=this.baseWidth-(this.translateXLeft+this.translateXRight)}},{key:"refresh",value:function(t){this.oldState=this.state?JSON.parse(JSON.stringify(this.state)):{},this.intermedState={},this.prepareData(t),this.reCalc(),this.refreshRenderer()}},{key:"makeChartArea",value:function(){this.svg=f(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svgDefs=v(this.svg),this.drawArea=y(this.svg,this.type+"-chart","translate("+this.translateXLeft+", "+this.translateY+")")}},{key:"prepareData",value:function(){}},{key:"renderConstants",value:function(){}},{key:"reCalc",value:function(){}},{key:"refreshRenderer",value:function(){}},{key:"reRender",value:function(){var t=this;if(!(!(arguments.length>0&&void 0!==arguments[0])||arguments[0]))return void this.renderComponents();this.elementsToAnimate=[],this.loadAnimatedComponents(),P(this.chartWrapper,this.svg,this.elementsToAnimate),setTimeout(function(){t.renderComponents()},400)}},{key:"setComponentParent",value:function(){var t=this;this.components.forEach(function(e){return e.setupParent(t.drawArea)})}},{key:"makeComponentLayers",value:function(){this.components.forEach(function(t){return t.makeLayer()})}},{key:"renderComponents",value:function(){this.components.forEach(function(t){return t.render()})}},{key:"loadAnimatedComponents",value:function(){this.components.forEach(function(t){return t.loadAnimatedComponents()})}},{key:"renderLegend",value:function(){}},{key:"setupNavigation",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.isNavigable||(this.makeOverlay(),e&&(this.bindOverlay(),document.addEventListener("keydown",function(e){n(t.chartWrapper)&&("37"==(e=e||window.event).keyCode?t.onLeftArrow():"39"==e.keyCode?t.onRightArrow():"38"==e.keyCode?t.onUpArrow():"40"==e.keyCode?t.onDownArrow():"13"==e.keyCode&&t.onEnterKey())})))}},{key:"makeOverlay",value:function(){}},{key:"bindOverlay",value:function(){}},{key:"bind_units",value:function(){}},{key:"onLeftArrow",value:function(){}},{key:"onRightArrow",value:function(){}},{key:"onUpArrow",value:function(){}},{key:"onDownArrow",value:function(){}},{key:"onEnterKey",value:function(){}},{key:"getDataPoint",value:function(){}},{key:"updateCurrentDataPoint",value:function(){}},{key:"getDifferentChart",value:function(t){return M(t,this.type,this.rawChartArgs)}}]),e}(),gt=function(){function t(e){var i=e.layerClass,n=void 0===i?"":i,a=e.layerTransform,s=void 0===a?"":a,r=e.make,o=e.animate;V(this,t),this.layerClass=n,this.layerTransform=s,this.make=r,this.animate=o,this.layer=void 0,this.store=[]}return Z(t,[{key:"refresh",value:function(t){}},{key:"render",value:function(){var t=this;this.store=this.make(),this.layer.textContent="",this.store.forEach(function(e){t.layer.appendChild(e)})}},{key:"setupParent",value:function(t){this.parent=t}},{key:"loadAnimatedComponents",value:function(){this.animate(this.store)}},{key:"makeLayer",value:function(){this.layer=y(this.parent,this.layerClass,this.layerTransform)}}]),t}(),mt=function(){function t(e){V(this,t),this.refreshMeta(e),this.setupArgs()}return Z(t,[{key:"setupArgs",value:function(){}},{key:"refreshMeta",value:function(t){this.meta=t||{}}},{key:"draw",value:function(){}},{key:"animate",value:function(){}}]),t}(),xt=(function(t){function e(t){return V(this,e),Q(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}G(e,t),Z(e,[{key:"setupArgs",value:function(){}},{key:"draw",value:function(t,e,i,n){return c("circle",{style:"fill: "+i,"data-point-index":n,cx:t,cy:e,r:this.args.radius})}},{key:"animate",value:function(t,e,i){return[t,{cx:e,cy:i},350,"easein"]}}])}(mt),function(t){function e(t){return V(this,e),Q(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return G(e,t),Z(e,[{key:"setupArgs",value:function(){this.args={spaceRatio:.5}}},{key:"draw",value:function(t,e,i,n,a,s){var r=this.meta.unitWidth-this.meta.unitWidth*this.args.spaceRatio,o=r,h=t-r/2,u=l(e,this.meta.zeroLine,this.meta.totalHeight),p=tt(u,2),d=p[0];return c("rect",{className:"bar mini",style:"fill: "+i,"data-point-index":n,x:h,y:p[1],width:o,height:d})}},{key:"animate",value:function(t,e,i,n,a){var s=e-this.meta.avgUnitWidth/4,r=this.meta.avgUnitWidth/2/a,o=l(i,this.meta.zeroLine,this.meta.totalHeight),h=tt(o,2);return e=s+r*n,[t,{width:r,height:h[0],x:e,y:h[1]},350,"easein"]}}]),e}(mt)),kt=function(t){function e(t){return V(this,e),Q(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return G(e,t),Z(e,[{key:"setupArgs",value:function(){console.log(this),this.args={radius:this.meta.dotSize||4}}},{key:"draw",value:function(t,e,i,n){return c("circle",{style:"fill: "+i,"data-point-index":n,cx:t,cy:e,r:this.args.radius})}},{key:"animate",value:function(t,e,i){return[t,{cx:e,cy:i},350,"easein"]}}]),e}(mt),_t=function(t){function i(t){V(this,i);var e=Q(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,t));return e.isSeries=t.isSeries,e.formatTooltipY=t.formatTooltipY,e.formatTooltipX=t.formatTooltipX,e.unitType=t.unitType||"line",e.setupUnitRenderer(),e.zeroLine=e.height,e.preSetup(),e.setup(),e}return G(i,t),Z(i,[{key:"configure",value:function(t){K(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"configure",this).call(this),this.config.xAxisMode=t.xAxisMode,this.config.yAxisMode=t.yAxisMode}},{key:"preSetup",value:function(){}},{key:"setupUnitRenderer",value:function(){var t=this.rawChartArgs.options;this.unitRenderers={bar:new xt(t),line:new kt(t)}}},{key:"setHorizontalMargin",value:function(){this.translateXLeft=60,this.translateXRight=60}},{key:"checkData",value:function(t){return!0}},{key:"getFirstUpdateData",value:function(t){}},{key:"setupConstants",value:function(){var t=this;this.state={xAxisLabels:[],xAxisPositions:[],xAxisMode:this.config.xAxisMode,yAxisMode:this.config.yAxisMode},this.data.datasets.map(function(e){e.chartType||(e.chartType=t.unitType)}),this.prepareYAxis()}},{key:"prepareData",value:function(t){var e=this.state;e.xAxisLabels=t.labels||[],e.datasetLength=e.xAxisLabels.length;var i=new Array(e.datasetLength).fill(0);e.datasets=t.datasets,t.datasets||(e.datasets=[{values:i}]),e.datasets.map(function(t,n){var a=t.values;a=a?(a=a.map(function(t){return isNaN(t)?0:t})).length>e.datasetLength?a.slice(0,e.datasetLength):r(a,e.datasetLength-a.length,0):i,t.index=n}),e.noOfDatasets=e.datasets.length,e.yMarkers=t.yMarkers,e.yRegions=t.yRegions}},{key:"prepareYAxis",value:function(){this.state.yAxis={labels:[],positions:[]}}},{key:"reCalc",value:function(){var t=this.state;t.xAxisLabels=this.data.labels,this.calcXPositions(),t.datasetsLabels=this.data.datasets.map(function(t){return t.name}),this.setYAxis(),this.calcYUnits(),this.calcYMaximums(),this.calcYRegions(),this.configUnits()}},{key:"setYAxis",value:function(){this.calcYAxisParameters(this.state.yAxis,this.getAllYValues(),"line"===this.type),this.state.zeroLine=this.state.yAxis.zeroLine}},{key:"calcXPositions",value:function(){var t=this.state;this.setUnitWidthAndXOffset(),t.xAxisPositions=t.xAxisLabels.map(function(e,i){return s(t.xOffset+i*t.unitWidth)}),t.xUnitPositions=new Array(t.noOfDatasets).fill(t.xAxisPositions)}},{key:"calcYAxisParameters",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"false";t.labels=R(e,i);var n=t.labels;t.scaleMultiplier=this.height/E(n);var a=Y(n)*t.scaleMultiplier;t.zeroLine=this.height-z(n)*a,t.positions=n.map(function(e){return t.zeroLine-e*t.scaleMultiplier})}},{key:"calcYUnits",value:function(){var t=this.state;t.datasets.map(function(e){e.positions=e.values.map(function(e){return s(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"calcYMaximums",value:function(){var t=this.state;t.yUnitMinimums=new Array(t.datasetLength).fill(9999),t.datasets.map(function(e,i){e.positions.map(function(e,i){e0)for(var u=0;u0)for(var l=0;l0)for(var l=0;l0&&(t=W(r,s,i.colors[e],i.config.heatline,i.config.regionFill),o.textContent="",t.map(function(t){return o.appendChild(t)}));var d=a.map(function(t,e){return n[e]+","+t});i.elementsToAnimate=i.elementsToAnimate.concat(i.renderer.animatepath(t,d.join("L")))}})}},{key:"getYMarkerLines",value:function(){var t=this;return this.data.yMarkers?this.data.yMarkers.map(function(e,i){return new gt({layerClass:"y-markers",make:function(){return t.state.yMarkers.map(function(e){return t.renderer.yMarker(e.value,e.name,{pos:"right",mode:"span",lineType:e.type})})},animate:function(){}})}):[]}},{key:"getYRegions",value:function(){var t=this;return this.data.yRegions?this.data.yRegions.map(function(e,i){return new gt({layerClass:"y-regions",make:function(){return t.state.yRegions.map(function(e){return t.renderer.yRegion(e.start,e.end,e.name)})},animate:function(){}})}):[]}},{key:"getXRegions",value:function(){return[]}},{key:"refreshRenderer",value:function(){var t=this,e={totalHeight:this.height,totalWidth:this.width,xAxisMode:this.config.xAxisMode,yAxisMode:this.config.yAxisMode,zeroLine:this.state.zeroLine,unitWidth:this.state.unitWidth};this.renderer?this.renderer.refreshState(e):this.renderer=new lt(e);var i={totalHeight:this.height,totalWidth:this.width,zeroLine:this.state.zeroLine,unitWidth:this.state.unitWidth};Object.keys(this.unitRenderers).map(function(e){t.unitRenderers[e].refreshMeta(i)})}},{key:"bindTooltip",value:function(){var t=this;this.chartWrapper.addEventListener("mousemove",function(i){var n=e(t.chartWrapper),a=i.pageX-n.left-t.translateXLeft;i.pageY-n.top-t.translateY=0;s--){var r=i.xAxisPositions[s];if(t>r-i.unitWidth/2){var o=r+this.translateXLeft,l=i.yUnitMinimums[s]+this.translateY,h=i.datasets.map(function(t,i){return{title:t.title,value:a?e.formatTooltipY(t.values[s]):t.values[s],color:e.colors[i]}});this.tip.set_values(o,l,n[s],"",h),this.tip.show_tip();break}}}}},{key:"getDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.current_index,e={index:t},i=this.y[0];return["svg_units","yUnitPositions","values"].map(function(n){var a=n.slice(0,n.length-1);e[a]=i[n][t]}),e.label=this.xAxisLabels[t],e}},{key:"updateCurrentDataPoint",value:function(t){(t=parseInt(t))<0&&(t=0),t>=this.xAxisLabels.length&&(t=this.xAxisLabels.length-1),t!==this.current_index&&(this.current_index=t,$.fire(this.parent,"data-select",this.getDataPoint()))}},{key:"addDataPoint",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.state.datasetLength;this.data.labels.splice(i,0,t),this.data.datasets.map(function(t,n){t.values.splice(i,0,e[n])}),this.update(this.data)}},{key:"removeDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.datasetLength-1;this.data.labels.splice(t,1),this.data.datasets.map(function(e){e.values.splice(t,1)}),this.update(this.data)}},{key:"updateData",value:function(){}}]),i}(yt),bt=function(t){function e(t){V(this,e);var i=Q(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="scatter",t.dotRadius?i.dotRadius=t.dotRadius:i.dotRadius=8,i.setup(),i}return G(e,t),Z(e,[{key:"setup_values",value:function(){K(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_values",this).call(this),this.unit_args={type:"dot",args:{radius:this.dotRadius}}}},{key:"make_paths",value:function(){}},{key:"make_path",value:function(){}}]),e}(function(t){function e(t){V(this,e);var i=Q(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="line",Object.getPrototypeOf(i)!==e.prototype?Q(i):(i.setup(),i)}return G(e,t),Z(e,[{key:"configure",value:function(t){K(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"span",this.config.yAxisMode=t.yAxisMode||"span",this.config.dotRadius=t.dotRadius||4,this.config.heatline=t.heatline||0,this.config.regionFill=t.regionFill||0,this.config.showDots=t.showDots||1}},{key:"configUnits",value:function(){this.unitArgs={type:"dot",args:{radius:this.config.dotRadius}}}},{key:"setUnitWidthAndXOffset",value:function(){this.state.unitWidth=this.width/(this.state.datasetLength-1),this.state.xOffset=0}}]),e}(_t)),wt=function(t){function e(t){return V(this,e),Q(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return G(e,t),Z(e,[{key:"preSetup",value:function(){this.type="multiaxis"}},{key:"setHorizontalMargin",value:function(){var t=this.data.datasets.filter(function(t){return"left"===t.axisPosition}).length;this.translateXLeft=60*t||60,this.translateXRight=60*(this.data.datasets.length-t)||60}},{key:"prepareYAxis",value:function(){}},{key:"prepareData",value:function(t){K(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"prepareData",this).call(this,t);var i=0,n=0;this.state.datasets.forEach(function(t,e){t.yAxis={position:t.axisPosition,index:"left"===t.axisPosition?i++:n++}})}},{key:"configure",value:function(t){K(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"tick",this.config.yAxisMode=t.yAxisMode||"span"}},{key:"configUnits",value:function(){this.unitArgs={type:"bar",args:{spaceWidth:this.state.unitWidth/2}}}},{key:"setYAxis",value:function(){var t=this;this.state.datasets.map(function(e){t.calcYAxisParameters(e.yAxis,e.values,"line"===t.unitType)})}},{key:"calcYUnits",value:function(){this.state.datasets.map(function(t){t.positions=t.values.map(function(e){return s(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"renderConstants",value:function(){var t=this;this.state.datasets.map(function(e){var n="left"===e.yAxis.position?-1*e.yAxis.index*60:t.width+60*e.yAxis.index;t.renderer.xLine(n,"",{pos:"top",mode:"span",stroke:t.colors[i],className:"y-axis-guide"})})}},{key:"getYAxesComponents",value:function(){var t=this;return this.data.datasets.map(function(e,i){return new gt({layerClass:"y axis y-axis-"+i,make:function(){var e=t.state.datasets[i].yAxis;t.renderer.setZeroline(e.zeroline);var n={pos:e.position,mode:"tick",offset:60*e.index,stroke:t.colors[i]};return e.positions.map(function(i,a){return t.renderer.yLine(i,e.labels[a],n)})},animate:function(){}})})}},{key:"getChartComponents",value:function(){var t=this;return this.data.datasets.map(function(e,i){return new gt({layerClass:"dataset-units dataset-"+i,make:function(){var e=t.state.datasets[i],n=t.unitArgs;return t.renderer.setZeroline(e.yAxis.zeroLine),e.positions.map(function(e,a){return t.renderer[n.type](t.state.xAxisPositions[a],e,n.args,t.colors[i],a,i,t.state.datasetLength)})},animate:function(e){var n=t.state.datasets[i],a=t.unitArgs.type,s=t.state.xAxisPositions,r=t.state.datasets[i].positions,o=e[e.length-1],l=o.parentNode;if(t.oldState.xExtra>0)for(var h=0;h0}),i=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),i=e.slice(0,this.max_slices-1);var n=0;e.slice(this.max_slices-1).map(function(t){n+=t[0]}),i.push([n,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],i.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"renderComponents",value:function(){var e=this;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0),this.slices=[],this.slice_totals.map(function(i,n){var a=t.create("div",{className:"progress-bar",inside:e.percentageBar,styles:{background:e.colors[n],width:100*i/e.grand_total+"%"}});e.slices.push(a)})}},{key:"bindTooltip",value:function(){var t=this;this.slices.map(function(i,n){i.addEventListener("mouseenter",function(){var a=e(t.chartWrapper),s=e(i),r=s.left-a.left+i.offsetWidth/2,o=s.top-a.top-6,l=(t.formatted_labels&&t.formatted_labels.length>0?t.formatted_labels[n]:t.labels[n])+": ",h=(100*t.slice_totals[n]/t.grand_total).toFixed(1);t.tip.set_values(r,o,l,h+"%"),t.tip.show_tip()})})}},{key:"renderLegend",value:function(){var e=this,i=this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels:this.labels;this.legend_totals.map(function(n,a){n&&(t.create("div",{className:"stats",inside:e.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+i[a]+":\n\t\t\t\t\t"+n+"\n\t\t\t\t")})}}]),n}(yt),Ct=Math.PI/180,Mt=function(i){function n(t){V(this,n);var e=Q(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,t));return e.type="pie",e.elements_to_animate=null,e.hoverRadio=t.hoverRadio||.1,e.max_slices=10,e.max_legend_points=6,e.isAnimate=!1,e.startAngle=t.startAngle||0,e.clockWise=t.clockWise||!1,e.mouseMove=e.mouseMove.bind(e),e.mouseLeave=e.mouseLeave.bind(e),e.setup(),e}return G(n,i),Z(n,[{key:"setup_values",value:function(){var t=this;this.centerX=this.width/2,this.centerY=this.height/2,this.radius=this.height>this.width?this.centerX:this.centerY,this.slice_totals=[];var e=this.data.labels.map(function(e,i){var n=0;return t.data.datasets.map(function(t){n+=t.values[i]}),[n,e]}).filter(function(t){return t[0]>0}),i=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),i=e.slice(0,this.max_slices-1);var n=0;e.slice(this.max_slices-1).map(function(t){n+=t[0]}),i.push([n,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],i.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"makeArcPath",value:function(t,e){var i=this.centerX,n=this.centerY,a=this.radius,s=this.clockWise;return"M"+i+" "+n+" L"+(i+t.x)+" "+(n+t.y)+" A "+a+" "+a+" 0 0 "+(s?1:0)+" "+(i+e.x)+" "+(n+e.y)+" z"}},{key:"renderComponents",value:function(t){var e=this,i=this.radius,a=this.clockWise;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0);var s=this.slicesProperties||[];this.slices=[],this.elements_to_animate=[],this.slicesProperties=[];var r=180-this.startAngle;this.slice_totals.map(function(o,l){var h=r,u=o/e.grand_total*360,c=a?-u:u,p=r+=c,d=n.getPositionByAngle(h,i),f=n.getPositionByAngle(p,i),v=t&&s[l],y=void 0,m=void 0;t?(y=v?v.startPosition:d,m=v?v.endPosition:d):(y=d,m=f);var x=e.makeArcPath(y,m),k=g(x,"pie-path","none",e.colors[l]);k.style.transition="transform .3s;",e.drawArea.appendChild(k),e.slices.push(k),e.slicesProperties.push({startPosition:d,endPosition:f,value:o,total:e.grand_total,startAngle:h,endAngle:p,angle:c}),t&&e.elements_to_animate.push([{unit:k,array:e.slices,index:e.slices.length-1},{d:e.makeArcPath(d,f)},650,"easein",null,{d:x}])}),t&&P(this.chartWrapper,this.svg,this.elements_to_animate)}},{key:"calTranslateByAngle",value:function(t){var e=this.radius,i=this.hoverRadio,a=n.getPositionByAngle(t.startAngle+t.angle/2,e);return"translate3d("+a.x*i+"px,"+a.y*i+"px,0)"}},{key:"hoverSlice",value:function(t,i,n,a){if(t){var s=this.colors[i];if(n){T(t,this.calTranslateByAngle(this.slicesProperties[i])),t.style.fill=A(s,50);var r=e(this.svg),o=a.pageX-r.left+10,l=a.pageY-r.top-10,h=(this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels[i]:this.labels[i])+": ",u=(100*this.slice_totals[i]/this.grand_total).toFixed(1);this.tip.set_values(o,l,h,u+"%"),this.tip.show_tip()}else T(t,"translate3d(0,0,0)"),this.tip.hide_tip(),t.style.fill=s}}},{key:"mouseMove",value:function(t){for(var e=t.target,i=this.curActiveSliceIndex,n=this.curActiveSlice,a=0;a0?this.formatted_labels:this.labels;this.legend_totals.map(function(n,a){var s=e.colors[a];n&&(t.create("div",{className:"stats",inside:e.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+i[a]+":\n\t\t\t\t\t"+n+"\n\t\t\t\t")})}}],[{key:"getPositionByAngle",value:function(t,e){return{x:Math.sin(t*Ct)*e,y:Math.cos(t*Ct)*e}}}]),n}(yt),Lt=function(t){function e(t){var i=t.start,n=void 0===i?"":i,a=t.domain,s=void 0===a?"":a,r=t.subdomain,o=void 0===r?"":r,l=t.data,h=void 0===l?{}:l,u=t.discrete_domains,c=void 0===u?0:u,p=t.count_label,d=void 0===p?"":p,f=t.legend_colors,v=void 0===f?[]:f;V(this,e);var y=Q(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,arguments[0]));y.type="heatmap",y.domain=s,y.subdomain=o,y.data=h,y.discrete_domains=c,y.count_label=d;var g=new Date;return y.start=n||I(g,365),v=v.slice(0,5),y.legend_colors=y.validate_colors(v)?v:["#ebedf0","#c6e48b","#7bc96f","#239a3b","#196127"],y.distribution_size=5,y.translateX=0,y}return G(e,t),Z(e,[{key:"validate_colors",value:function(t){if(t.length<5)return 0;var e=1;return t.forEach(function(t){C(t)||(e=0,console.warn('"'+t+'" is not a valid color.'))},this),e}},{key:"setupConstants",value:function(){this.today=new Date,this.start||(this.start=new Date,this.start.setFullYear(this.start.getFullYear()-1)),this.first_week_start=new Date(this.start.toDateString()),this.last_week_start=new Date(this.today.toDateString()),7!==this.first_week_start.getDay()&&I(this.first_week_start,-1*this.first_week_start.getDay()),7!==this.last_week_start.getDay()&&I(this.last_week_start,-1*this.last_week_start.getDay()),this.no_of_cols=F(this.first_week_start+"",this.last_week_start+"")+1}},{key:"calcWidth",value:function(){this.baseWidth=12*(this.no_of_cols+3),this.discrete_domains&&(this.baseWidth+=144)}},{key:"setupLayers",value:function(){this.domain_label_group=this.makeLayer("domain-label-group chart-label"),this.data_groups=this.makeLayer("data-groups","translate(0, 20)")}},{key:"setup_values",value:function(){var t=this;this.domain_label_group.textContent="",this.data_groups.textContent="";var e=Object.keys(this.data).map(function(e){return t.data[e]});this.distribution=j(e,this.distribution_size),this.month_names=["January","February","March","April","May","June","July","August","September","October","November","December"],this.render_all_weeks_and_store_x_values(this.no_of_cols)}},{key:"render_all_weeks_and_store_x_values",value:function(t){var e=new Date(this.first_week_start);this.week_col=0,this.current_month=e.getMonth(),this.months=[this.current_month+""],this.month_weeks={},this.month_start_points=[],this.month_weeks[this.current_month]=0,this.month_start_points.push(13);for(var i=0;ii)break;v.getMonth()-t.getMonth()&&(n=1,this.discrete_domains&&(a=1),this.month_start_points.push(13+12*(e+a))),t=v}return[s,n]}},{key:"render_month_labels",value:function(){var t=this;this.months.shift(),this.month_start_points.shift(),this.months.pop(),this.month_start_points.pop(),this.month_start_points.map(function(e,i){var n=k("y-value-text",e+12,10,t.month_names[t.months[i]].substring(0,3));t.domain_label_group.appendChild(n)})}},{key:"renderComponents",value:function(){Array.prototype.slice.call(this.container.querySelectorAll(".graph-stats-container, .sub-title, .title")).map(function(t){t.style.display="None"}),this.chartWrapper.style.marginTop="0px",this.chartWrapper.style.paddingTop="0px"}},{key:"bindTooltip",value:function(){var t=this;Array.prototype.slice.call(document.querySelectorAll(".data-group .day")).map(function(e){e.addEventListener("mouseenter",function(e){var i=e.target.getAttribute("data-value"),n=e.target.getAttribute("data-date").split("-"),a=t.month_names[parseInt(n[1])-1].substring(0,3),s=t.chartWrapper.getBoundingClientRect(),r=e.target.getBoundingClientRect(),o=parseInt(e.target.getAttribute("width")),l=r.left-s.left+(o+2)/2,h=r.top-s.top-(o+2)/2,u=i+" "+t.count_label,c=" on "+a+" "+n[0]+", "+n[2];t.tip.set_values(l,h,c,u,[],1),t.tip.show_tip()})})}},{key:"update",value:function(t){this.data=t,this.setup_values(),this.bindTooltip()}}]),e}(yt),Tt={mixed:_t,multiaxis:wt,scatter:bt,percentage:At,heatmap:Lt,pie:Mt},Nt=function t(e){return V(this,t),q(e.type,arguments[0])};return Nt}(); diff --git a/docs/assets/js/index.js b/docs/assets/js/index.js index f9904ab..4f87439 100755 --- a/docs/assets/js/index.js +++ b/docs/assets/js/index.js @@ -51,7 +51,7 @@ let bar_composite_chart = new Chart ({ height: 180, colors: ['orange'], isNavigable: 1, - is_series: 1 + isSeries: 1 // regionFill: 1 }); @@ -59,9 +59,12 @@ let line_composite_chart = new Chart ({ parent: c2, data: line_composite_data, type: 'line', + options: { + dotSize: 10 + }, height: 180, colors: ['green'], - is_series: 1 + isSeries: 1 }); bar_composite_chart.parent.addEventListener('data-select', (e) => { @@ -75,16 +78,48 @@ let type_data = { labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"], + yMarkers: [ + { + name: "Marker 1", + value: 42, + type: 'dashed' + }, + { + name: "Marker 2", + value: 25, + type: 'dashed' + } + ], + + yRegions: [ + { + name: "Region Y 1", + start: 10, + end: 50 + }, + ], + + // will depend on series code for calculating X values + // xRegions: [ + // { + // name: "Region X 2", + // start: , + // end: , + // } + // ], + datasets: [ { name: "Some Data", values: [18, 40, 30, 35, 8, 52, 17, -4], - axisPosition: 'right' + axisPosition: 'right', + chartType: 'bar' }, { name: "Another Set", values: [30, 50, -10, 15, 18, 32, 27, 14], - axisPosition: 'right' + axisPosition: 'right', + chartType: 'line' }, // { // name: "Yet Another", @@ -111,12 +146,14 @@ let type_chart = new Chart({ parent: "#chart-types", // title: "My Awesome Chart", data: type_data, - type: 'multiaxis', + type: 'line', height: 250, colors: ['purple', 'magenta'], - is_series: 1, - format_tooltip_x: d => (d + '').toUpperCase(), - format_tooltip_y: d => d + ' pts' + isSeries: 1, + xAxisMode: 'tick', + yAxisMode: 'span', + // formatTooltipX: d => (d + '').toUpperCase(), + // formatTooltipY: d => d + ' pts' }); Array.prototype.slice.call( @@ -164,7 +201,7 @@ let plot_chart_args = { type: 'line', height: 250, colors: ['blue'], - is_series: 1, + isSeries: 1, showDots: 0, heatline: 1, xAxisMode: 'tick', @@ -241,7 +278,7 @@ let update_chart = new Chart({ type: 'line', height: 250, colors: ['red'], - is_series: 1, + isSeries: 1, regionFill: 1 }); diff --git a/docs/index.html b/docs/index.html index dbd04e4..151f356 100644 --- a/docs/index.html +++ b/docs/index.html @@ -24,7 +24,7 @@
                  -

                  Frappé Charts

                  +

                  Frappe Charts

                  GitHub-inspired simple and modern charts for the web

                  with zero dependencies.

                  @@ -162,7 +162,7 @@ xAxisMode: 'tick', // for short label ticks // or 'span' for long spanning vertical axis lines yAxisMode: 'span', // for long horizontal lines, or 'tick' - is_series: 1, // to allow for skipping of X values + isSeries: 1, // to allow for skipping of X values ...
                  diff --git a/src/js/chart.js b/src/js/chart.js index 5d247f4..eabea1f 100644 --- a/src/js/chart.js +++ b/src/js/chart.js @@ -1,12 +1,11 @@ import '../scss/charts.scss'; -import BarChart from './charts/BarChart'; -import LineChart from './charts/LineChart'; import ScatterChart from './charts/ScatterChart'; import MultiAxisChart from './charts/MultiAxisChart'; import PercentageChart from './charts/PercentageChart'; import PieChart from './charts/PieChart'; import Heatmap from './charts/Heatmap'; +import AxisChart from './charts/AxisChart'; // if (ENV !== 'production') { // // Enable LiveReload @@ -16,9 +15,13 @@ import Heatmap from './charts/Heatmap'; // ); // } +// If type is bar + + + + const chartTypes = { - line: LineChart, - bar: BarChart, + mixed: AxisChart, multiaxis: MultiAxisChart, scatter: ScatterChart, percentage: PercentageChart, @@ -27,8 +30,17 @@ const chartTypes = { }; function getChartByType(chartType = 'line', options) { + if(chartType === 'line') { + options.unitType = 'line'; + return new AxisChart(options); + } else if (chartType === 'bar') { + options.unitType = 'bar'; + return new AxisChart(options); + } + if (!chartTypes[chartType]) { - return new LineChart(options); + console.error("Undefined chart type: " + chartType); + return; } return new chartTypes[chartType](options); diff --git a/src/js/charts/AxisChart.js b/src/js/charts/AxisChart.js index 12c93c1..57157b8 100644 --- a/src/js/charts/AxisChart.js +++ b/src/js/charts/AxisChart.js @@ -1,8 +1,9 @@ import BaseChart from './BaseChart'; import { Y_AXIS_MARGIN } from '../utils/margins'; import { ChartComponent } from '../objects/ChartComponent'; +import { BarChartController, LineChartController, getPaths } from '../objects/AxisChartControllers'; import { getOffset, fire } from '../utils/dom'; -import { AxisChartRenderer, makePath, makeGradient } from '../utils/draw'; +import { AxisChartRenderer } from '../utils/draw'; import { equilizeNoOfElements } from '../utils/draw-utils'; import { Animator } from '../utils/animate'; import { runSMILAnimation } from '../utils/animation'; @@ -12,11 +13,33 @@ import { floatTwo, fillArray } from '../utils/helpers'; export default class AxisChart extends BaseChart { constructor(args) { super(args); - this.is_series = args.is_series; - this.format_tooltip_y = args.format_tooltip_y; - this.format_tooltip_x = args.format_tooltip_x; + this.isSeries = args.isSeries; + this.formatTooltipY = args.formatTooltipY; + this.formatTooltipX = args.formatTooltipX; + this.unitType = args.unitType || 'line'; + + this.setupUnitRenderer(); this.zeroLine = this.height; + this.preSetup(); + this.setup(); + } + + configure(args) { + super.configure(); + + this.config.xAxisMode = args.xAxisMode; + this.config.yAxisMode = args.yAxisMode; + } + + preSetup() {} + + setupUnitRenderer() { + let options = this.rawChartArgs.options; + this.unitRenderers = { + bar: new BarChartController(options), + line: new LineChartController(options) + }; } setHorizontalMargin() { @@ -36,8 +59,16 @@ export default class AxisChart extends BaseChart { this.state = { xAxisLabels: [], xAxisPositions: [], + xAxisMode: this.config.xAxisMode, + yAxisMode: this.config.yAxisMode } + this.data.datasets.map(d => { + if(!d.chartType ) { + d.chartType = this.unitType; + } + }); + this.prepareYAxis(); } @@ -78,6 +109,8 @@ export default class AxisChart extends BaseChart { }); s.noOfDatasets = s.datasets.length; + s.yMarkers = data.yMarkers; + s.yRegions = data.yRegions; } prepareYAxis() { @@ -97,6 +130,7 @@ export default class AxisChart extends BaseChart { this.setYAxis(); this.calcYUnits(); this.calcYMaximums(); + this.calcYRegions(); // should be state this.configUnits(); @@ -111,7 +145,8 @@ export default class AxisChart extends BaseChart { let s = this.state; this.setUnitWidthAndXOffset(); s.xAxisPositions = s.xAxisLabels.map((d, i) => - floatTwo(s.xOffset + i * s.unitWidth)); + floatTwo(s.xOffset + i * s.unitWidth) + ); s.xUnitPositions = new Array(s.noOfDatasets).fill(s.xAxisPositions); } @@ -150,8 +185,26 @@ export default class AxisChart extends BaseChart { // this.make_tooltip(); } + calcYRegions() { + let s = this.state; + if(s.yMarkers) { + s.yMarkers = s.yMarkers.map(d => { + d.value = floatTwo(s.yAxis.zeroLine - d.value * s.yAxis.scaleMultiplier); + return d; + }); + } + if(s.yRegions) { + s.yRegions = s.yRegions.map(d => { + d.start = floatTwo(s.yAxis.zeroLine - d.start * s.yAxis.scaleMultiplier); + d.end = floatTwo(s.yAxis.zeroLine - d.end * s.yAxis.scaleMultiplier); + return d; + }); + } + } + configUnits() {} + // Default, as per bar, and mixed. Only line will be a special case setUnitWidthAndXOffset() { this.state.unitWidth = this.width/(this.state.datasetLength); this.state.xOffset = this.state.unitWidth/2; @@ -180,11 +233,11 @@ export default class AxisChart extends BaseChart { // this.yAxesAux, ...this.getYAxesComponents(), this.getXAxisComponents(), - // this.getYMarkerLines(), - // this.getXMarkerLines(), - // TODO: regions too? - ...this.getPathComponents(), - ...this.getDataUnitsComponents(this.config), + ...this.getYRegions(), + ...this.getXRegions(), + ...this.getYMarkerLines(), + // ...this.getXMarkerLines(), + ...this.getChartComponents(), ]; } @@ -233,7 +286,9 @@ export default class AxisChart extends BaseChart { let s = this.state; // TODO: xAxis Label spacing return s.xAxisPositions.map((position, i) => - this.renderer.xLine(position, s.xAxisLabels[i], {pos:'top'}) + this.renderer.xLine(position, s.xAxisLabels[i] + // , {pos:'top'} + ) ); }, animate: (xLines) => { @@ -262,68 +317,156 @@ export default class AxisChart extends BaseChart { }); } - getDataUnitsComponents() { - return this.data.datasets.map((d, index) => { - return new ChartComponent({ - layerClass: 'dataset-units dataset-' + index, - make: () => { - let d = this.state.datasets[index]; - let unitType = this.unitArgs; - - return d.positions.map((y, j) => { - return this.renderer[unitType.type]( - this.state.xAxisPositions[j], - y, - unitType.args, - this.colors[index], - j, - index, - this.state.noOfDatasets - ); - }); - }, - animate: (svgUnits) => { - let unitType = this.unitArgs.type; - - // have been updated in axis render; - let newX = this.state.xAxisPositions; - let newY = this.state.datasets[index].positions; - - let lastUnit = svgUnits[svgUnits.length - 1]; - let parentNode = lastUnit.parentNode; - - if(this.oldState.xExtra > 0) { - for(var i = 0; i { + if(d.chartType === 'line') { + dataUnitsComponents.push(this.getPathComponent(d, index)); + } + console.log(this.unitRenderers[d.chartType], d.chartType); + dataUnitsComponents.push(this.getDataUnitComponent( + d, index, this.unitRenderers[d.chartType] + )); + }); + return dataUnitsComponents; + } - svgUnits.map((unit, i) => { - if(newX[i] === undefined || newY[i] === undefined) return; - this.elementsToAnimate.push(this.renderer['animate' + unitType]( - unit, // unit, with info to replace where it came from in the data - newX[i], - newY[i], - index, - this.state.noOfDatasets - )); - }); + getDataUnitComponent(d, index, unitRenderer) { + return new ChartComponent({ + layerClass: 'dataset-units dataset-' + index, + make: () => { + let d = this.state.datasets[index]; + + return d.positions.map((y, j) => { + return unitRenderer.draw( + this.state.xAxisPositions[j], + y, + this.colors[index], + j, + index, + this.state.noOfDatasets + ); + }); + }, + animate: (svgUnits) => { + // have been updated in axis render; + let newX = this.state.xAxisPositions; + let newY = this.state.datasets[index].positions; + + let lastUnit = svgUnits[svgUnits.length - 1]; + let parentNode = lastUnit.parentNode; + + if(this.oldState.xExtra > 0) { + for(var i = 0; i { + if(newX[i] === undefined || newY[i] === undefined) return; + this.elementsToAnimate.push(unitRenderer.animate( + unit, // unit, with info to replace where it came from in the data + newX[i], + newY[i], + index, + this.state.noOfDatasets + )); + }); + } }); } - getPathComponents() { - return []; + getPathComponent(d, index) { + return new ChartComponent({ + layerClass: 'path dataset-path', + make: () => { + let d = this.state.datasets[index]; + let color = this.colors[index]; + + return getPaths( + d.positions, + this.state.xAxisPositions, + color, + this.config.heatline, + this.config.regionFill + ); + }, + animate: (paths) => { + let newX = this.state.xAxisPositions; + let newY = this.state.datasets[index].positions; + + let oldX = this.oldState.xAxisPositions; + let oldY = this.oldState.datasets[index].positions; + + + let parentNode = paths[0].parentNode; + + [oldX, newX] = equilizeNoOfElements(oldX, newX); + [oldY, newY] = equilizeNoOfElements(oldY, newY); + + if(this.oldState.xExtra > 0) { + paths = getPaths( + oldY, oldX, this.colors[index], + this.config.heatline, + this.config.regionFill + ); + parentNode.textContent = ''; + paths.map(path => parentNode.appendChild(path)); + } + + const newPointsList = newY.map((y, i) => (newX[i] + ',' + y)); + this.elementsToAnimate = this.elementsToAnimate + .concat(this.renderer.animatepath(paths, newPointsList.join("L"))); + } + }); } getYMarkerLines() { - return []; + if(!this.data.yMarkers) { + return []; + } + return this.data.yMarkers.map((d, index) => { + return new ChartComponent({ + layerClass: 'y-markers', + make: () => { + let s = this.state; + return s.yMarkers.map(marker => + this.renderer.yMarker(marker.value, marker.name, + {pos:'right', mode: 'span', lineType: marker.type}) + ); + }, + animate: () => {} + }); + }); + } + + // getXMarkerLines() { + // return []; + // } + + getYRegions() { + if(!this.data.yRegions) { + return []; + } + // return []; + return this.data.yRegions.map((d, index) => { + return new ChartComponent({ + layerClass: 'y-regions', + make: () => { + let s = this.state; + return s.yRegions.map(region => + this.renderer.yRegion(region.start, region.end, region.name) + ); + }, + animate: () => {} + }); + }); } - getXMarkerLines() { + getXRegions() { return []; } @@ -345,6 +488,88 @@ export default class AxisChart extends BaseChart { } else { this.renderer.refreshState(state); } + + let meta = { + totalHeight: this.height, + totalWidth: this.width, + zeroLine: this.state.zeroLine, + unitWidth: this.state.unitWidth, + }; + + Object.keys(this.unitRenderers).map(key => { + this.unitRenderers[key].refreshMeta(meta); + }); + } + + bindTooltip() { + // TODO: could be in tooltip itself, as it is a given functionality for its parent + this.chartWrapper.addEventListener('mousemove', (e) => { + let o = getOffset(this.chartWrapper); + let relX = e.pageX - o.left - this.translateXLeft; + let relY = e.pageY - o.top - this.translateY; + + if(relY < this.height + this.translateY * 2) { + this.mapTooltipXPosition(relX); + } else { + this.tip.hide_tip(); + } + }); + } + + mapTooltipXPosition(relX) { + let s = this.state; + if(!s.yUnitMinimums) return; + + let titles = s.xAxisLabels; + if(this.formatTooltipX && this.formatTooltipX(titles[0])) { + titles = titles.map(d=>this.formatTooltipX(d)); + } + + let formatY = this.formatTooltipY && this.formatTooltipY(this.y[0].values[0]); + + for(var i=s.datasetLength - 1; i >= 0 ; i--) { + let xVal = s.xAxisPositions[i]; + // let delta = i === 0 ? s.unitWidth : xVal - s.xAxisPositions[i-1]; + if(relX > xVal - s.unitWidth/2) { + let x = xVal + this.translateXLeft; + let y = s.yUnitMinimums[i] + this.translateY; + + let values = s.datasets.map((set, j) => { + return { + title: set.title, + value: formatY ? this.formatTooltipY(set.values[i]) : set.values[i], + color: this.colors[j], + }; + }); + + this.tip.set_values(x, y, titles[i], '', values); + this.tip.show_tip(); + break; + } + } + } + + getDataPoint(index=this.current_index) { + // check for length + let data_point = { + index: index + }; + let y = this.y[0]; + ['svg_units', 'yUnitPositions', 'values'].map(key => { + let data_key = key.slice(0, key.length-1); + data_point[data_key] = y[key][index]; + }); + data_point.label = this.xAxisLabels[index]; + return data_point; + } + + updateCurrentDataPoint(index) { + index = parseInt(index); + if(index < 0) index = 0; + if(index >= this.xAxisLabels.length) index = this.xAxisLabels.length - 1; + if(index === this.current_index) return; + this.current_index = index; + $.fire(this.parent, "data-select", this.getDataPoint()); } // API @@ -374,3 +599,7 @@ export default class AxisChart extends BaseChart { // } } + + +// keep a binding at the end of chart + diff --git a/src/js/charts/BarChart.js b/src/js/charts/BarChart.js deleted file mode 100644 index 04a7783..0000000 --- a/src/js/charts/BarChart.js +++ /dev/null @@ -1,83 +0,0 @@ -import AxisChart from './AxisChart'; - -export default class BarChart extends AxisChart { - constructor(args) { - super(args); - this.type = 'bar'; - this.setup(); - } - - configure(args) { - super.configure(args); - this.config.xAxisMode = args.xAxisMode || 'tick'; - this.config.yAxisMode = args.yAxisMode || 'span'; - } - - // setUnitWidthAndXOffset() { - // this.state.unitWidth = this.width/(this.state.datasetLength); - // this.state.xOffset = this.state.unitWidth/2; - // } - - configUnits() { - this.unitArgs = { - type: 'bar', - args: { - spaceWidth: this.state.unitWidth/2, - } - }; - } - - // makeOverlay() { - // // Just make one out of the first element - // let index = this.xAxisLabels.length - 1; - // let unit = this.y[0].svg_units[index]; - // this.updateCurrentDataPoint(index); - - // if(this.overlay) { - // this.overlay.parentNode.removeChild(this.overlay); - // } - // this.overlay = unit.cloneNode(); - // this.overlay.style.fill = '#000000'; - // this.overlay.style.opacity = '0.4'; - // this.drawArea.appendChild(this.overlay); - // } - - // bindOverlay() { - // // on event, update overlay - // this.parent.addEventListener('data-select', (e) => { - // this.update_overlay(e.svg_unit); - // }); - // } - - // bind_units(units_array) { - // units_array.map(unit => { - // unit.addEventListener('click', () => { - // let index = unit.getAttribute('data-point-index'); - // this.updateCurrentDataPoint(index); - // }); - // }); - // } - - // update_overlay(unit) { - // let attributes = []; - // Object.keys(unit.attributes).map(index => { - // attributes.push(unit.attributes[index]); - // }); - - // attributes.filter(attr => attr.specified).map(attr => { - // this.overlay.setAttribute(attr.name, attr.nodeValue); - // }); - - // this.overlay.style.fill = '#000000'; - // this.overlay.style.opacity = '0.4'; - // } - - // onLeftArrow() { - // this.updateCurrentDataPoint(this.currentIndex - 1); - // } - - // onRightArrow() { - // this.updateCurrentDataPoint(this.currentIndex + 1); - // } - -} diff --git a/src/js/charts/LineChart.js b/src/js/charts/LineChart.js index d793bb0..83e7a23 100644 --- a/src/js/charts/LineChart.js +++ b/src/js/charts/LineChart.js @@ -40,85 +40,4 @@ export default class LineChart extends AxisChart { this.state.xOffset = 0; } - getDataUnitsComponents(config) { - if(!config.showDots) { - return []; - } - else { - return super.getDataUnitsComponents(); - } - } - - getPathComponents() { - return this.data.datasets.map((d, index) => { - return new ChartComponent({ - layerClass: 'path dataset-path', - make: () => { - let d = this.state.datasets[index]; - let color = this.colors[index]; - - return this.getPaths( - d.positions, - this.state.xAxisPositions, - color, - this.config.heatline, - this.config.regionFill - ); - }, - animate: (paths) => { - let newX = this.state.xAxisPositions; - let newY = this.state.datasets[index].positions; - - let oldX = this.oldState.xAxisPositions; - let oldY = this.oldState.datasets[index].positions; - - - let parentNode = paths[0].parentNode; - - [oldX, newX] = equilizeNoOfElements(oldX, newX); - [oldY, newY] = equilizeNoOfElements(oldY, newY); - - if(this.oldState.xExtra > 0) { - paths = this.getPaths( - oldY, oldX, this.colors[index], - this.config.heatline, - this.config.regionFill - ); - parentNode.textContent = ''; - paths.map(path => parentNode.appendChild(path)); - } - - const newPointsList = newY.map((y, i) => (newX[i] + ',' + y)); - this.elementsToAnimate = this.elementsToAnimate - .concat(this.renderer.animatepath(paths, newPointsList.join("L"))); - } - }); - }); - } - - getPaths(yList, xList, color, heatline=false, regionFill=false) { - let pointsList = yList.map((y, i) => (xList[i] + ',' + y)); - let pointsStr = pointsList.join("L"); - let path = makePath("M"+pointsStr, 'line-graph-path', color); - - // HeatLine - if(heatline) { - let gradient_id = makeGradient(this.svgDefs, color); - path.style.stroke = `url(#${gradient_id})`; - } - - let components = [path]; - - // Region - if(regionFill) { - let gradient_id_region = makeGradient(this.svgDefs, color, true); - - let zeroLine = this.state.yAxis.zeroLine; - // TODO: use zeroLine OR minimum - let pathStr = "M" + `0,${zeroLine}L` + pointsStr + `L${this.width},${zeroLine}`; - components.push(makePath(pathStr, `region-fill`, 'none', `url(#${gradient_id_region})`)); - } - - return components; - } } diff --git a/src/js/charts/MultiAxisChart.js b/src/js/charts/MultiAxisChart.js index 361b68e..8e15925 100644 --- a/src/js/charts/MultiAxisChart.js +++ b/src/js/charts/MultiAxisChart.js @@ -6,9 +6,12 @@ import { floatTwo } from '../utils/helpers'; export default class MultiAxisChart extends AxisChart { constructor(args) { super(args); + // this.unitType = args.unitType || 'line'; + // this.setup(); + } + + preSetup() { this.type = 'multiaxis'; - this.unitType = args.unitType || 'line'; - this.setup(); } setHorizontalMargin() { @@ -107,7 +110,7 @@ export default class MultiAxisChart extends AxisChart { } // TODO remove renderer zeroline from above and below - getDataUnitsComponents() { + getChartComponents() { return this.data.datasets.map((d, index) => { return new ChartComponent({ layerClass: 'dataset-units dataset-' + index, diff --git a/src/js/objects/AxisChartControllers.js b/src/js/objects/AxisChartControllers.js new file mode 100644 index 0000000..885be17 --- /dev/null +++ b/src/js/objects/AxisChartControllers.js @@ -0,0 +1,215 @@ +import { getBarHeightAndYAttr } from '../utils/draw-utils'; +import { createSVG, makePath, makeGradient } from '../utils/draw'; +import { STD_EASING, UNIT_ANIM_DUR, MARKER_LINE_ANIM_DUR, PATH_ANIM_DUR } from '../utils/animate'; + +class AxisChartController { + constructor(meta) { + // TODO: make configurable passing args + this.refreshMeta(meta); + this.setupArgs(); + } + + setupArgs() {} + + refreshMeta(meta) { + this.meta = meta || {}; + } + + draw() {} + animate() {} +} + +export class AxisController extends AxisChartController { + constructor(meta) { + super(meta); + } + + setupArgs() {} + + draw(x, y, color, index) { + return createSVG('circle', { + style: `fill: ${color}`, + 'data-point-index': index, + cx: x, + cy: y, + r: this.args.radius + }); + } + + animate(dot, x, yTop) { + return [dot, {cx: x, cy: yTop}, UNIT_ANIM_DUR, STD_EASING]; + // dot.animate({cy: yTop}, UNIT_ANIM_DUR, mina.easein); + } +} + +export class BarChartController extends AxisChartController { + constructor(meta) { + super(meta); + } + + setupArgs() { + this.args = { + spaceRatio: 0.5, + }; + } + + draw(x, yTop, color, index, datasetIndex, noOfDatasets) { + let totalWidth = this.meta.unitWidth - this.meta.unitWidth * this.args.spaceRatio; + let startX = x - totalWidth/2; + + // temp commented + // let width = totalWidth / noOfDatasets; + // let currentX = startX + width * datasetIndex; + + // temp + let width = totalWidth; + let currentX = startX; + + let [height, y] = getBarHeightAndYAttr(yTop, this.meta.zeroLine, this.meta.totalHeight); + + return createSVG('rect', { + className: `bar mini`, + style: `fill: ${color}`, + 'data-point-index': index, + x: currentX, + y: y, + width: width, + height: height + }); + } + + animate(bar, x, yTop, index, noOfDatasets) { + let start = x - this.meta.avgUnitWidth/4; + let width = (this.meta.avgUnitWidth/2)/noOfDatasets; + let [height, y] = getBarHeightAndYAttr(yTop, this.meta.zeroLine, this.meta.totalHeight); + + x = start + (width * index); + + return [bar, {width: width, height: height, x: x, y: y}, UNIT_ANIM_DUR, STD_EASING]; + // bar.animate({height: args.newHeight, y: yTop}, UNIT_ANIM_DUR, mina.easein); + } +} + +export class LineChartController extends AxisChartController { + constructor(meta) { + super(meta); + } + + setupArgs() { + console.log(this); + this.args = { + radius: this.meta.dotSize || 4 + }; + } + + draw(x, y, color, index) { + return createSVG('circle', { + style: `fill: ${color}`, + 'data-point-index': index, + cx: x, + cy: y, + r: this.args.radius + }); + } + + animate(dot, x, yTop) { + return [dot, {cx: x, cy: yTop}, UNIT_ANIM_DUR, STD_EASING]; + // dot.animate({cy: yTop}, UNIT_ANIM_DUR, mina.easein); + } +} + +export function getPaths(yList, xList, color, heatline=false, regionFill=false) { + let pointsList = yList.map((y, i) => (xList[i] + ',' + y)); + let pointsStr = pointsList.join("L"); + let path = makePath("M"+pointsStr, 'line-graph-path', color); + + // HeatLine + if(heatline) { + let gradient_id = makeGradient(this.svgDefs, color); + path.style.stroke = `url(#${gradient_id})`; + } + + let components = [path]; + + // Region + if(regionFill) { + let gradient_id_region = makeGradient(this.svgDefs, color, true); + + let zeroLine = this.state.yAxis.zeroLine; + // TODO: use zeroLine OR minimum + let pathStr = "M" + `0,${zeroLine}L` + pointsStr + `L${this.width},${zeroLine}`; + components.push(makePath(pathStr, `region-fill`, 'none', `url(#${gradient_id_region})`)); + } + + return components; +} + +// class BarChart extends AxisChart { +// constructor(args) { +// super(args); +// this.type = 'bar'; +// this.setup(); +// } + +// configure(args) { +// super.configure(args); +// this.config.xAxisMode = args.xAxisMode || 'tick'; +// this.config.yAxisMode = args.yAxisMode || 'span'; +// } + +// // ================================= + +// makeOverlay() { +// // Just make one out of the first element +// let index = this.xAxisLabels.length - 1; +// let unit = this.y[0].svg_units[index]; +// this.updateCurrentDataPoint(index); + +// if(this.overlay) { +// this.overlay.parentNode.removeChild(this.overlay); +// } +// this.overlay = unit.cloneNode(); +// this.overlay.style.fill = '#000000'; +// this.overlay.style.opacity = '0.4'; +// this.drawArea.appendChild(this.overlay); +// } + +// bindOverlay() { +// // on event, update overlay +// this.parent.addEventListener('data-select', (e) => { +// this.update_overlay(e.svg_unit); +// }); +// } + +// bind_units(units_array) { +// units_array.map(unit => { +// unit.addEventListener('click', () => { +// let index = unit.getAttribute('data-point-index'); +// this.updateCurrentDataPoint(index); +// }); +// }); +// } + +// update_overlay(unit) { +// let attributes = []; +// Object.keys(unit.attributes).map(index => { +// attributes.push(unit.attributes[index]); +// }); + +// attributes.filter(attr => attr.specified).map(attr => { +// this.overlay.setAttribute(attr.name, attr.nodeValue); +// }); + +// this.overlay.style.fill = '#000000'; +// this.overlay.style.opacity = '0.4'; +// } + +// onLeftArrow() { +// this.updateCurrentDataPoint(this.currentIndex - 1); +// } + +// onRightArrow() { +// this.updateCurrentDataPoint(this.currentIndex + 1); +// } +// } + diff --git a/src/js/utils/draw-utils.js b/src/js/utils/draw-utils.js index f36575d..06b44c7 100644 --- a/src/js/utils/draw-utils.js +++ b/src/js/utils/draw-utils.js @@ -44,7 +44,7 @@ export function equilizeNoOfElements(array1, array2, // return values.map((value, i) => { // let space_taken = getStringWidth(value, char_width) + 2; // if(space_taken > allowed_space) { -// if(is_series) { +// if(isSeries) { // // Skip some axis lines if X axis is a series // let skips = 1; // while((space_taken/skips)*2 > allowed_space) { diff --git a/src/js/utils/draw.js b/src/js/utils/draw.js index 4383652..0468d1d 100644 --- a/src/js/utils/draw.js +++ b/src/js/utils/draw.js @@ -1,16 +1,18 @@ import { getBarHeightAndYAttr } from './draw-utils'; +import { getStringWidth } from './helpers'; import { STD_EASING, UNIT_ANIM_DUR, MARKER_LINE_ANIM_DUR, PATH_ANIM_DUR } from './animate'; const AXIS_TICK_LENGTH = 6; const LABEL_MARGIN = 4; const FONT_SIZE = 10; const BASE_LINE_COLOR = '#dadada'; +const BASE_BG_COLOR = '#F7FAFC'; function $(expr, con) { return typeof expr === "string"? (con || document).querySelector(expr) : expr || null; } -function createSVG(tag, o) { +export function createSVG(tag, o) { var element = document.createElementNS("http://www.w3.org/2000/svg", tag); for (var i in o) { @@ -119,7 +121,7 @@ export function makeHeatSquare(className, x, y, size, fill='none', data={}) { y: y, width: size, height: size, - fill: fill + fill: 1 }; Object.keys(data).map(key => { @@ -140,7 +142,7 @@ export function makeText(className, x, y, content) { }); } -export function makeVertLine(x, label, y1, y2, options={}) { +function makeVertLine(x, label, y1, y2, options={}) { if(!options.stroke) options.stroke = BASE_LINE_COLOR; let l = createSVG('line', { className: 'line-vertical ' + options.className, @@ -172,7 +174,7 @@ export function makeVertLine(x, label, y1, y2, options={}) { return line; } -export function makeHoriLine(y, label, x1, x2, options={}) { +function makeHoriLine(y, label, x1, x2, options={}) { if(!options.stroke) options.stroke = BASE_LINE_COLOR; if(!options.lineType) options.lineType = ''; let className = 'line-horizontal ' + options.className + @@ -182,8 +184,8 @@ export function makeHoriLine(y, label, x1, x2, options={}) { className: className, x1: x1, x2: x2, - y1: 0, - y2: 0, + y1: y, + y2: y, styles: { stroke: options.stroke } @@ -191,7 +193,7 @@ export function makeHoriLine(y, label, x1, x2, options={}) { let text = createSVG('text', { x: x1 < x2 ? x1 - LABEL_MARGIN : x1 + LABEL_MARGIN, - y: 0, + y: y, dy: (FONT_SIZE / 2 - 2) + 'px', 'font-size': FONT_SIZE + 'px', 'text-anchor': x1 < x2 ? 'end' : 'start', @@ -199,7 +201,6 @@ export function makeHoriLine(y, label, x1, x2, options={}) { }); let line = createSVG('g', { - transform: `translate(0, ${ y })`, 'stroke-opacity': 1 }); @@ -231,46 +232,11 @@ export class AxisChartRenderer { this.zeroLine = zeroLine; } - bar(x, yTop, args, color, index, datasetIndex, noOfDatasets) { - - let totalWidth = this.unitWidth - args.spaceWidth; - let startX = x - totalWidth/2; - - // temp commented - // let width = totalWidth / noOfDatasets; - // let currentX = startX + width * datasetIndex; - - // temp - let width = totalWidth; - let currentX = startX; - - let [height, y] = getBarHeightAndYAttr(yTop, this.zeroLine, this.totalHeight); - - return createSVG('rect', { - className: `bar mini`, - style: `fill: ${color}`, - 'data-point-index': index, - x: currentX, - y: y, - width: width, - height: height - }); - } - - dot(x, y, args, color, index) { - return createSVG('circle', { - style: `fill: ${color}`, - 'data-point-index': index, - cx: x, - cy: y, - r: args.radius - }); - } - xLine(x, label, options={}) { if(!options.pos) options.pos = 'bottom'; if(!options.offset) options.offset = 0; if(!options.mode) options.mode = this.xAxisMode; + console.log(this.xAxisMode); if(!options.stroke) options.stroke = BASE_LINE_COLOR; if(!options.className) options.className = ''; @@ -296,7 +262,8 @@ export class AxisChartRenderer { return makeVertLine(x, label, y1, y2, { stroke: options.stroke, - className: options.className + className: options.className, + lineType: options.lineType }); } @@ -322,16 +289,102 @@ export class AxisChartRenderer { return makeHoriLine(y, label, x1, x2, { stroke: options.stroke, - className: options.className + className: options.className, + lineType: options.lineType }); } xMarker() {} - yMarker() {} + yMarker(y, label, options={}) { + let labelSvg = createSVG('text', { + className: 'chart-label', + x: this.totalWidth - getStringWidth(label, 5) - LABEL_MARGIN, + y: y - FONT_SIZE - 2, + dy: (FONT_SIZE / 2) + 'px', + 'font-size': FONT_SIZE + 'px', + 'text-anchor': 'start', + innerHTML: label+"" + }); + + let line = makeHoriLine(y, '', 0, this.totalWidth, { + stroke: options.stroke || BASE_LINE_COLOR, + className: options.className || '', + lineType: options.lineType + }); + + line.appendChild(labelSvg); - xRegion() {} - yRegion() {} + return line; + } + + xRegion() { + return createSVG('rect', { + className: `bar mini`, // remove class + style: `fill: rgba(228, 234, 239, 0.49)`, + // 'data-point-index': index, + x: 0, + y: y2, + width: this.totalWidth, + height: y1 - y2 + }); + + return region; + } + + yRegion(y1, y2, label) { + // return a group + + let rect = createSVG('rect', { + className: `bar mini`, // remove class + style: `fill: rgba(228, 234, 239, 0.49)`, + // 'data-point-index': index, + x: 0, + y: y2, + width: this.totalWidth, + height: y1 - y2 + }); + + let upperBorder = createSVG('line', { + className: 'line-horizontal', + x1: 0, + x2: this.totalWidth, + y1: y2, + y2: y2, + styles: { + stroke: BASE_LINE_COLOR + } + }); + let lowerBorder = createSVG('line', { + className: 'line-horizontal', + x1: 0, + x2: this.totalWidth, + y1: y1, + y2: y1, + styles: { + stroke: BASE_LINE_COLOR + } + }); + + let labelSvg = createSVG('text', { + className: 'chart-label', + x: this.totalWidth - getStringWidth(label, 4.5) - LABEL_MARGIN, + y: y2 - FONT_SIZE - 2, + dy: (FONT_SIZE / 2) + 'px', + 'font-size': FONT_SIZE + 'px', + 'text-anchor': 'start', + innerHTML: label+"" + }); + + let region = createSVG('g', {}); + + region.appendChild(rect); + region.appendChild(upperBorder); + region.appendChild(lowerBorder); + region.appendChild(labelSvg); + + return region; + } animatebar(bar, x, yTop, index, noOfDatasets) { let start = x - this.avgUnitWidth/4;