diff --git a/dist/frappe-charts.esm.js b/dist/frappe-charts.esm.js index 777268d..c8a757a 100644 --- a/dist/frappe-charts.esm.js +++ b/dist/frappe-charts.esm.js @@ -66,22 +66,6 @@ function getElementContentWidth(element) { return element.clientWidth - padding; } - - - - -function fire(target, type, properties) { - var evt = document.createEvent("HTMLEvents"); - - evt.initEvent(type, true, true ); - - for (var j in properties) { - evt[j] = properties[j]; - } - - return target.dispatchEvent(evt); -} - class SvgTip { constructor({ parent = null, @@ -271,16 +255,7 @@ function getBarHeightAndYAttr(yTop, zeroLine, totalHeight) { return [height, y]; } -function equilizeNoOfElements(array1, array2, - extra_count=array2.length - array1.length) { - if(extra_count > 0) { - array1 = fillArray(array1, extra_count); - } else { - array2 = fillArray(array2, extra_count); - } - return [array1, array2]; -} // let char_width = 8; // let allowed_space = avgUnitWidth * 1.5; @@ -508,10 +483,10 @@ function makeHoriYLine(y, label, totalWidth, mode) { class AxisChartRenderer { constructor(state) { - this.updateState(state); + this.refreshState(state); } - updateState(state) { + refreshState(state) { this.totalHeight = state.totalHeight; this.totalWidth = state.totalWidth; this.zeroLine = state.zeroLine; @@ -672,6 +647,7 @@ class BaseChart { colors = [], isNavigable = 0, + showLegend = 1, type = '', @@ -689,23 +665,26 @@ class BaseChart { this.currentIndex = 0; } - this.setupConfiguration(); + this.configure(arguments[0]); } - setupConfiguration() { + configure(args) { // Make a this.config, that has stuff like showTooltip, // showLegend, which then all functions will check this.setColors(); - this.setMargins(); + this.setMargins(args); // constants this.config = { - showTooltip: 1, + showTooltip: 1, // calculate showLegend: 1, isNavigable: 0, - animate: 1 + // animate: 1 + animate: 0 }; + + this.state = {}; } setColors() { @@ -725,8 +704,8 @@ class BaseChart { this.colors = this.colors.map(color => getColor(color)); } - setMargins() { - let height = this.rawChartArgs.height; + setMargins(args) { + let height = args.height; this.baseHeight = height; this.height = height - 40; this.translateX = 60; @@ -759,7 +738,7 @@ class BaseChart { } checkData() {} - getFirstUpdateData(data) {} + getFirstUpdateData() {} setup() { if(this.validate()) { @@ -770,9 +749,7 @@ class BaseChart { _setup() { this.bindWindowEvents(); this.setupConstants(); - - // this.setupComponents(); - + this.setupComponents(); this.makeContainer(); this.makeTooltip(); // without binding this.draw(true); @@ -814,32 +791,35 @@ class BaseChart { this.bindTooltip(); } + bindTooltip() {} + draw(init=false) { // difference from update(): draw the whole object due to groudbreaking event (init, resize, etc.) // (draw everything, layers, groups, units) - this.calc(); - this.refreshRenderer(); // this chart's rendered with the config - this.setupComponents(); + + this.calcWidth(); + this.refresh(); // refresh conponent with chart a this.makeChartArea(); - this.makeLayers(); + this.setComponentParent(); + this.makeComponentLayers(); - this.renderComponents(); // with zero values this.renderLegend(); this.setupNavigation(init); + this.renderComponents(); // first time plain render, so no rerender + if(this.config.animate) this.update(this.firstUpdateData); } update() { // difference from draw(): yes you do rerender everything here as well, - // but not things like the chart itself, mosty only at component level - this.reCalc(); + // but not things like the chart itself or layers, mosty only at component level + // HERE IS WHERE THE ACTUAL STATE CHANGES, and old one matters, not in draw + this.refresh(); this.reRender(); } - refreshRenderer() {} - calcWidth() { let outerAnnotationsWidth = 0; // let charWidth = 8; @@ -853,9 +833,12 @@ class BaseChart { this.width = this.baseWidth - this.translateX * 2; } - calc() { - this.calcWidth(); + refresh() { //?? refresh? + this.oldState = this.state ? Object.assign({}, this.state) : {}; + this.prepareData(); this.reCalc(); + this.refreshRenderer(); + this.refreshComponents(); } makeChartArea() { @@ -874,33 +857,21 @@ class BaseChart { ); } + prepareData() {} - makeLayers() { - this.components.forEach((component) => { - component.layer = this.makeLayer(component.layerClass); - }); - } + reCalc() {} + // Will update values(state) + // Will recalc specific parts depending on the update - calculateValues() {} - - renderComponents() { - this.components.forEach(c => { - c.store = c.make(...c.makeArgs); - c.layer.textContent = ''; - c.store.forEach(element => {c.layer.appendChild(element);}); - }); - } - - reCalc() { - // Will update values(state) - // Will recalc specific parts depending on the update - } + refreshRenderer() {} reRender(animate=true) { if(!animate) { this.renderComponents(); return; } + this.intermedState = this.calcIntermedState(); + this.refreshComponents(); this.animateComponents(); setTimeout(() => { this.renderComponents(); @@ -909,19 +880,23 @@ class BaseChart { // (opt, should not redraw if still in animate?) } - animateComponents() { - this.intermedValues = this.calcIntermediateValues(); - this.components.forEach(c => { - // c.store = c.animate(...c.animateArgs); - // c.layer.textContent = ''; - // c.store.forEach(element => {c.layer.appendChild(element);}); - }); + calcIntermedState() {} + + // convenient component array abstractions + setComponentParent() { this.components.forEach(c => c.setupParent(this.drawArea)); }; + makeComponentLayers() { this.components.forEach(c => c.makeLayer()); } + renderComponents() { this.components.forEach(c => c.render()); } + animateComponents() { this.components.forEach(c => c.animate()); } + refreshComponents() { + let args = { + chartState: this.state, + oldChartState: this.oldState, + intermedState: this.intermedState, + chartRenderer: this.renderer + }; + this.components.forEach(c => c.refresh(args)); } - - calcInitStage() {} - - renderLegend() {} setupNavigation(init=false) { @@ -965,93 +940,60 @@ class BaseChart { getDataPoint() {} updateCurrentDataPoint() {} - makeLayer(className, transform='') { - return makeSVGGroup(this.drawArea, className, transform); - } - getDifferentChart(type) { return getDifferentChart(type, this.type, this.rawChartArgs); } } -const UNIT_ANIM_DUR = 350; -const PATH_ANIM_DUR = 650; -const MARKER_LINE_ANIM_DUR = UNIT_ANIM_DUR; +class ChartComponent { + constructor({ + layerClass = '', + layerTransform = '', + make, + argsKeys, + animate + }) { + this.layerClass = layerClass; // 'y axis' + this.layerTransform = layerTransform; + this.make = make; + this.argsKeys = argsKeys;//['yAxisPositions', 'yAxisLabels']; + this.animate = animate; + + this.layer = undefined; + this.store = []; //[[]] depends on indexed + } + + refresh(args) { + this.chartState = args.chartState; + this.oldChartState = args.oldChartState; + this.intermedState = args.intermedState; + + this.chartRenderer = args.chartRenderer; + } + + render() { + let args = this.argsKeys.map(key => this.chartState[key]); + args.unshift(this.chartRenderer); + this.store = this.make(...args); + + this.layer.textContent = ''; + this.store.forEach(element => { + this.layer.appendChild(element); + }); + } + + setupParent(parent) { + this.parent = parent; + } + + makeLayer() { + this.layer = makeSVGGroup(this.parent, this.layerClass, this.layerTransform); + } +} + const REPLACE_ALL_NEW_DUR = 250; -const STD_EASING = 'easein'; -var Animator = (function() { - var Animator = function(totalHeight, totalWidth, zeroLine, avgUnitWidth) { - // constants - this.totalHeight = totalHeight; - this.totalWidth = totalWidth; - - // changeables - this.avgUnitWidth = avgUnitWidth; - this.zeroLine = zeroLine; - }; - - Animator.prototype = { - bar: function(barObj, x, yTop, index, noOfDatasets) { - let start = x - this.avgUnitWidth/4; - let width = (this.avgUnitWidth/2)/noOfDatasets; - let [height, y] = getBarHeightAndYAttr(yTop, this.zeroLine, this.totalHeight); - - x = start + (width * index); - - return [barObj, {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); - }, - - dot: function(dotObj, x, yTop) { - return [dotObj, {cx: x, cy: yTop}, UNIT_ANIM_DUR, STD_EASING]; - // dot.animate({cy: yTop}, UNIT_ANIM_DUR, mina.easein); - }, - - path: function(d, pathStr) { - let pathComponents = []; - const animPath = [{unit: d.path, object: d, key: 'path'}, {d:"M"+pathStr}, PATH_ANIM_DUR, STD_EASING]; - pathComponents.push(animPath); - - if(d.regionPath) { - let regStartPt = `0,${this.zeroLine}L`; - let regEndPt = `L${this.totalWidth}, ${this.zeroLine}`; - - const animRegion = [ - {unit: d.regionPath, object: d, key: 'regionPath'}, - {d:"M" + regStartPt + pathStr + regEndPt}, - PATH_ANIM_DUR, - STD_EASING - ]; - pathComponents.push(animRegion); - } - - return pathComponents; - }, - - translate: function(obj, oldCoord, newCoord, duration) { - return [ - {unit: obj, array: [0], index: 0}, - {transform: newCoord.join(', ')}, - duration, - STD_EASING, - "translate", - {transform: oldCoord.join(', ')} - ]; - }, - - verticalLine: function(xLine, newX, oldX) { - return this.translate(xLine, [oldX, 0], [newX, 0], MARKER_LINE_ANIM_DUR); - }, - - horizontalLine: function(yLine, newY, oldY) { - return this.translate(yLine, [0, oldY], [0, newY], MARKER_LINE_ANIM_DUR); - } - }; - - return Animator; -})(); @@ -1347,6 +1289,35 @@ function calcIntervals(values, withMinimum=false) { return intervals; } +function getZeroIndex(yPts) { + let zeroIndex; + let interval = getIntervalSize(yPts); + if(yPts.indexOf(0) >= 0) { + // the range has a given zero + // zero-line on the chart + zeroIndex = yPts.indexOf(0); + } else if(yPts[0] > 0) { + // Minimum value is positive + // zero-line is off the chart: below + let min = yPts[0]; + zeroIndex = (-1) * min / interval; + } else { + // Maximum value is negative + // zero-line is off the chart: above + let max = yPts[yPts.length - 1]; + zeroIndex = (-1) * max / interval + (yPts.length - 1); + } + return zeroIndex; +} + +function getIntervalSize(orderedArray) { + return orderedArray[1] - orderedArray[0]; +} + +function getValueRange(orderedArray) { + return orderedArray[orderedArray.length-1] - orderedArray[0]; +} + function calcDistribution(values, distributionSize) { // Assume non-negative values, // implying distribution minimum at zero @@ -1377,560 +1348,14 @@ class AxisChart extends BaseChart { this.zeroLine = this.height; } - parseData() { - let args = this.rawChartArgs; - this.xAxisLabels = args.data.labels || []; - this.y = args.data.datasets || []; - - this.y.forEach(function(d, i) { - d.index = i; - }, this); + checkData(data) { return true; } - reCalc() { - // examples: - - // [A] Dimension change: - - // [B] Data change: - // 1. X values update - // 2. Y values update - - - // Aka all the values(state), these all will be documented in an old values object - - // Backup first! - this.oldValues = ["everything"]; - - // extracted, raw args will remain in their own object - this.datasetsLabels = []; - this.datasetsValues = [[[12, 34, 68], [10, 5, 46]], [[20, 20, 20]]]; - - // CALCULATION: we'll need the first batch of calcs - // List of what will happen: - // this.xOffset = 0; - // this.unitWidth = 0; - // this.scaleMultipliers = []; - // this.datasetsPoints = - - // Now, the function calls - - // var merged = [].concat(...arrays) - - - - // INIT - // axes - this.yAxisPositions = [this.height, this.height/2, 0]; - this.yAxisLabels = ['0', '5', '10']; - - this.xPositions = [0, this.width/2, this.width]; - this.xAxisLabels = ['0', '5', '10']; - - - } - - calcInitStage() { - // will borrow from the full recalc function - } - - calcIntermediateValues() { + getFirstUpdateData(data) { // } - // this should be inherent in BaseChart - refreshRenderer() { - // These args are basically the current state of the chart, - // with constant and alive params mixed - this.renderer = new AxisChartRenderer({ - totalHeight: this.height, - totalWidth: this.width, - zeroLine: this.zeroLine, - avgUnitWidth: this.avgUnitWidth, - xAxisMode: this.xAxisMode, - yAxisMode: this.yAxisMode - }); - } - - setupComponents() { - // Must have access to all current data things - let self = this; - this.yAxis = { - layerClass: 'y axis', - layer: undefined, - make: self.makeYLines.bind(self), - makeArgs: [self.yAxisPositions, self.yAxisLabels], - store: [], - // animate? or update? will come to while implementing - animate: self.animateYLines, - // indexed: 1 // ?? As per datasets? - }; - this.xAxis = { - layerClass: 'x axis', - layer: undefined, - make: self.makeXLines.bind(self), - // TODO: will implement series skip with avgUnitWidth and isSeries later - makeArgs: [self.xPositions, self.xAxisLabels], - store: [], - animate: self.animateXLines - }; - // Indexed according to dataset - // this.dataUnits = { - // layerClass: 'y marker axis', - // layer: undefined, - // make: makeXLines, - // makeArgs: [this.xPositions, this.xAxisLabels], - // store: [], - // animate: animateXLines, - // indexed: 1 - // }; - this.yMarkerLines = { - // layerClass: 'y marker axis', - // layer: undefined, - // make: makeYMarkerLines, - // makeArgs: [this.yMarkerPositions, this.yMarker], - // store: [], - // animate: animateYMarkerLines - }; - this.xMarkerLines = { - // layerClass: 'x marker axis', - // layer: undefined, - // make: makeXMarkerLines, - // makeArgs: [this.xMarkerPositions, this.xMarker], - // store: [], - // animate: animateXMarkerLines - }; - - // Marker Regions - - this.components = [ - this.yAxis, - this.xAxis, - // this.yMarkerLines, - // this.xMarkerLines, - // this.dataUnits, - ]; - } - - setup_values() { - this.data.datasets.map(d => { - d.values = d.values.map(val => (!isNaN(val) ? val : 0)); - }); - this.setup_x(); - this.setup_y(); - } - - setup_x() { - this.set_avgUnitWidth_and_x_offset(); - if(this.xPositions) { - this.x_old_axis_positions = this.xPositions.slice(); - } - this.xPositions = this.xAxisLabels.map((d, i) => - floatTwo(this.x_offset + i * this.avgUnitWidth)); - - if(!this.x_old_axis_positions) { - this.x_old_axis_positions = this.xPositions.slice(); - } - } - - setup_y() { - if(this.yAxisLabels) { - this.y_old_axis_values = this.yAxisLabels.slice(); - } - - let values = this.get_all_y_values(); - - if(this.y_sums && this.y_sums.length > 0) { - values = values.concat(this.y_sums); - } - - this.yAxisLabels = calcIntervals(values, this.type === 'line'); - - if(!this.y_old_axis_values) { - this.y_old_axis_values = this.yAxisLabels.slice(); - } - - const y_pts = this.yAxisLabels; - const value_range = y_pts[y_pts.length-1] - y_pts[0]; - - if(this.multiplier) this.old_multiplier = this.multiplier; - this.multiplier = this.height / value_range; - if(!this.old_multiplier) this.old_multiplier = this.multiplier; - - const interval = y_pts[1] - y_pts[0]; - const interval_height = interval * this.multiplier; - - let zero_index; - - if(y_pts.indexOf(0) >= 0) { - // the range has a given zero - // zero-line on the chart - zero_index = y_pts.indexOf(0); - } else if(y_pts[0] > 0) { - // Minimum value is positive - // zero-line is off the chart: below - let min = y_pts[0]; - zero_index = (-1) * min / interval; - } else { - // Maximum value is negative - // zero-line is off the chart: above - let max = y_pts[y_pts.length - 1]; - zero_index = (-1) * max / interval + (y_pts.length - 1); - } - - if(this.zeroLine) this.old_zeroLine = this.zeroLine; - this.zeroLine = this.height - (zero_index * interval_height); - if(!this.old_zeroLine) this.old_zeroLine = this.zeroLine; - - // Make positions arrays for y elements - if(this.yAxisPositions) this.oldYAxisPositions = this.yAxisPositions; - this.yAxisPositions = this.yAxisLabels.map(d => this.zeroLine - d * this.multiplier); - if(!this.oldYAxisPositions) this.oldYAxisPositions = this.yAxisPositions; - - // if(this.yAnnotationPositions) this.oldYAnnotationPositions = this.yAnnotationPositions; - // this.yAnnotationPositions = this.specific_values.map(d => this.zeroLine - d.value * this.multiplier); - // if(!this.oldYAnnotationPositions) this.oldYAnnotationPositions = this.yAnnotationPositions; - } - - makeXLines(positions, values) { - // TODO: draw as per condition (with/without label etc.) - return positions.map((position, i) => this.renderer.xLine(position, values[i])); - } - - makeYLines(positions, values) { - return positions.map((position, i) => this.renderer.yLine(position, values[i])); - } - - draw_graph(init=false) { - // TODO: NO INIT! - if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) { - this.y.map((d, i) => { - d.svg_units = []; - this.make_path && this.make_path(d, this.xPositions, d.yUnitPositions, this.colors[i]); - this.makeUnits(d); - this.calcYDependencies(); - }); - return; - } - if(init) { - this.draw_new_graph_and_animate(); - return; - } - this.y.map((d, i) => { - d.svg_units = []; - this.make_path && this.make_path(d, this.xPositions, d.yUnitPositions, this.colors[i]); - this.makeUnits(d); - }); - } - - draw_new_graph_and_animate() { - let data = []; - this.y.map((d, i) => { - // Anim: Don't draw initial values, store them and update later - d.yUnitPositions = new Array(d.values.length).fill(this.zeroLine); // no value - data.push({values: d.values}); - d.svg_units = []; - - this.make_path && this.make_path(d, this.xPositions, d.yUnitPositions, this.colors[i]); - this.makeUnits(d); - }); - - setTimeout(() => { - this.updateData(data); - }, 350); - } - - setupNavigation(init) { - if(init) { - // Hack: defer nav till initial updateData - setTimeout(() => { - super.setupNavigation(init); - }, 500); - } else { - super.setupNavigation(init); - } - } - - makeUnits(d) { - this.makeDatasetUnits( - this.xPositions, - d.yUnitPositions, - this.colors[d.index], - d.index, - this.y.length - ); - } - - makeDatasetUnits(x_values, y_values, color, dataset_index, - no_of_datasets, units_group, units_array, unit) { - - if(!units_group) units_group = this.svg_units_groups[dataset_index]; - if(!units_array) units_array = this.y[dataset_index].svg_units; - if(!unit) unit = this.unit_args; - - units_group.textContent = ''; - units_array.length = 0; - - let unit_AxisChartRenderer = new AxisChartRenderer(this.height, this.zeroLine, this.avgUnitWidth); - - y_values.map((y, i) => { - let data_unit = unit_AxisChartRenderer[unit.type]( - x_values[i], - y, - unit.args, - color, - i, - dataset_index, - no_of_datasets - ); - units_group.appendChild(data_unit); - units_array.push(data_unit); - }); - - if(this.isNavigable) { - this.bind_units(units_array); - } - } - - bindTooltip() { - // TODO: could be in tooltip itself, as it is a given functionality for its parent - this.chartWrapper.addEventListener('mousemove', (e) => { - let offset = getOffset(this.chartWrapper); - let relX = e.pageX - offset.left - this.translateX; - let relY = e.pageY - offset.top - this.translateY; - - if(relY < this.height + this.translateY * 2) { - this.mapTooltipXPosition(relX); - } else { - this.tip.hide_tip(); - } - }); - } - - mapTooltipXPosition(relX) { - if(!this.y_min_tops) return; - - let titles = this.xAxisLabels; - if(this.format_tooltip_x && this.format_tooltip_x(this.xAxisLabels[0])) { - titles = this.xAxisLabels.map(d=>this.format_tooltip_x(d)); - } - - let y_format = this.format_tooltip_y && this.format_tooltip_y(this.y[0].values[0]); - - for(var i=this.xPositions.length - 1; i >= 0 ; i--) { - let x_val = this.xPositions[i]; - // let delta = i === 0 ? this.avgUnitWidth : x_val - this.xPositions[i-1]; - if(relX > x_val - this.avgUnitWidth/2) { - let x = x_val + this.translateX; - let y = this.y_min_tops[i] + this.translateY; - - let title = titles[i]; - let values = this.y.map((set, j) => { - return { - title: set.title, - value: y_format ? this.format_tooltip_y(set.values[i]) : set.values[i], - color: this.colors[j], - }; - }); - - this.tip.set_values(x, y, title, '', values); - this.tip.show_tip(); - break; - } - } - } - - // API - updateData(newY, newX) { - if(!newX) { - newX = this.xAxisLabels; - } - this.updating = true; - - this.old_x_values = this.xAxisLabels.slice(); - this.old_y_axis_tops = this.y.map(d => d.yUnitPositions.slice()); - - this.old_y_values = this.y.map(d => d.values); - - // Just update values prop, setup_x/y() will do the rest - if(newY) this.y.map(d => {d.values = newY[d.index].values;}); - if(newX) this.xAxisLabels = newX; - - this.setup_x(); - this.setup_y(); - - // Change in data, so calculate dependencies - this.calcYDependencies(); - - // Got the values? Now begin drawing - this.animator = new Animator(this.height, this.width, this.zeroLine, this.avgUnitWidth); - - this.animate_graphs(); - - this.updating = false; - } - - animate_graphs() { - this.elements_to_animate = []; - // Pre-prep, equilize no of positions between old and new - let [old_x, newX] = equilizeNoOfElements( - this.x_old_axis_positions.slice(), - this.xPositions.slice() - ); - - let [oldYAxis, newYAxis] = equilizeNoOfElements( - this.oldYAxisPositions.slice(), - this.yAxisPositions.slice() - ); - - let newXValues = this.xAxisLabels.slice(); - let newYValues = this.yAxisLabels.slice(); - - let extra_points = this.xPositions.slice().length - this.x_old_axis_positions.slice().length; - - if(extra_points > 0) { - this.makeXLines(old_x, newXValues); - } - // No Y extra check? - this.makeYLines(oldYAxis, newYValues); - - // Animation - if(extra_points !== 0) { - this.animateXLines(old_x, newX); - } - this.animateYLines(oldYAxis, newYAxis); - - this.y.map(d => { - let [old_y, newY] = equilizeNoOfElements( - this.old_y_axis_tops[d.index].slice(), - d.yUnitPositions.slice() - ); - if(extra_points > 0) { - this.make_path && this.make_path(d, old_x, old_y, this.colors[d.index]); - this.makeDatasetUnits(old_x, old_y, this.colors[d.index], d.index, this.y.length); - } - // Animation - d.path && this.animate_path(d, newX, newY); - this.animate_units(d, newX, newY); - }); - - runSMILAnimation(this.chartWrapper, this.svg, this.elements_to_animate); - - setTimeout(() => { - this.y.map(d => { - this.make_path && this.make_path(d, this.xPositions, d.yUnitPositions, this.colors[d.index]); - this.makeUnits(d); - - this.makeYLines(this.yAxisPositions, this.yAxisLabels); - this.makeXLines(this.xPositions, this.xAxisLabels); - // this.make_y_specifics(this.yAnnotationPositions, this.specific_values); - }); - }, 400); - } - - animate_path(d, newX, newY) { - const newPointsList = newY.map((y, i) => (newX[i] + ',' + y)); - this.elements_to_animate = this.elements_to_animate - .concat(this.animator.path(d, newPointsList.join("L"))); - } - - animate_units(d, newX, newY) { - let type = this.unit_args.type; - - d.svg_units.map((unit, i) => { - if(newX[i] === undefined || newY[i] === undefined) return; - this.elements_to_animate.push(this.animator[type]( - {unit:unit, array:d.svg_units, index: i}, // unit, with info to replace where it came from in the data - newX[i], - newY[i], - d.index, - this.y.length - )); - }); - } - - animateXLines(oldX, newX) { - this.xAxisLines.map((xLine, i) => { - this.elements_to_animate.push(this.animator.verticalLine( - xLine, newX[i], oldX[i] - )); - }); - } - - animateYLines(oldY, newY) { - this.yAxisLines.map((yLine, i) => { - this.elements_to_animate.push(this.animator.horizontalLine( - yLine, newY[i], oldY[i] - )); - }); - } - - animateYAnnotations() { - // - } - - add_data_point(y_point, x_point, index=this.xAxisLabels.length) { - let newY = this.y.map(data_set => { return {values:data_set.values}; }); - newY.map((d, i) => { d.values.splice(index, 0, y_point[i]); }); - let newX = this.xAxisLabels.slice(); - newX.splice(index, 0, x_point); - - this.updateData(newY, newX); - } - - remove_data_point(index = this.xAxisLabels.length-1) { - if(this.xAxisLabels.length < 3) return; - - let newY = this.y.map(data_set => { return {values:data_set.values}; }); - newY.map((d) => { d.values.splice(index, 1); }); - let newX = this.xAxisLabels.slice(); - newX.splice(index, 1); - - this.updateData(newY, newX); - } - - getDataPoint(index=this.currentIndex) { - // 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.currentIndex) return; - this.currentIndex = index; - fire(this.parent, "data-select", this.getDataPoint()); - } - - set_avgUnitWidth_and_x_offset() { - // Set the ... you get it - this.avgUnitWidth = this.width/(this.xAxisLabels.length - 1); - this.x_offset = 0; - } - - get_all_y_values() { - let all_values = []; - - // Add in all the y values in the datasets - this.y.map(d => { - all_values = all_values.concat(d.values); - }); - - // Add in all the specific values - return all_values.concat(this.specific_values.map(d => d.value)); - } - calcYDependencies() { this.y_min_tops = new Array(this.xAxisLabels.length).fill(9999); this.y.map(d => { @@ -1944,18 +1369,178 @@ class AxisChart extends BaseChart { // this.chartWrapper.removeChild(this.tip.container); // this.make_tooltip(); } + + prepareData() { + let s = this.state; + s.xAxisLabels = this.data.labels || []; + s.datasetLength = s.xAxisLabels.length; + + let zeroArray = new Array(s.datasetLength).fill(0); + + s.datasets = this.data.datasets; + if(!this.data.datasets) { + // default + s.datasets = [{ + values: zeroArray + }]; + } + + s.datasets.map((d, i)=> { + let vals = d.values; + if(!vals) { + vals = zeroArray; + } else { + // Check for non values + vals = vals.map(val => (!isNaN(val) ? val : 0)); + + // Trim or extend + if(vals.length > s.datasetLength) { + vals = vals.slice(0, s.datasetLength); + } else { + vals = fillArray(vals, s.datasetLength - vals.length, 0); + } + } + + d.index = i; + }); + } + + reCalc() { + let s = this.state; + + // X + s.xAxisLabels = this.data.labels; + this.calcXPositions(); + + // Y + s.datasetsLabels = this.data.datasets.map(d => d.label); + + // s.datasetsValues = [[]]; indexed component + // s.datasetsValues = [[[12, 34, 68], [10, 5, 46]], [[20, 20, 20]]]; // array of indexed components + s.datasetsValues = s.datasets.map(d => d.values); // indexed component + s.yAxisLabels = calcIntervals(this.getAllYValues(), this.type === 'line'); + this.calcYAxisPositions(); + + // *** this.state.datasetsPoints = + } + + calcXPositions() { + let s = this.state; + this.setUnitWidthAndXOffset(); + s.xPositions = s.xAxisLabels.map((d, i) => + floatTwo(s.xOffset + i * s.unitWidth)); + } + + calcYAxisPositions() { + let s = this.state; + const yPts = s.yAxisLabels; + + s.scaleMultiplier = this.height / getValueRange(yPts); + const intervalHeight = getIntervalSize(yPts) * s.scaleMultiplier; + s.zeroLine = this.height - (getZeroIndex(yPts) * intervalHeight); + + s.yAxisPositions = yPts.map(d => s.zeroLine - d * s.scaleMultiplier); + } + + setUnitWidthAndXOffset() { + this.state.unitWidth = this.width/(this.state.datasetLength - 1); + this.state.xOffset = 0; + } + + getAllYValues() { + // TODO: yMarkers, regions, sums, every Y value ever + return [].concat(...this.state.datasetsValues); + } + + calcIntermedState() { + // + } + + // this should be inherent in BaseChart + refreshRenderer() { + // These args are basically the current state of the chart, + // with constant and alive params mixed + let state = { + totalHeight: this.height, + totalWidth: this.width, + + xAxisMode: this.config.xAxisMode, + yAxisMode: this.config.yAxisMode, + + zeroLine: this.state.zeroLine, + unitWidth: this.state.unitWidth, + }; + if(!this.renderer) { + this.renderer = new AxisChartRenderer(state); + } else { + this.renderer.refreshState(state); + } + } + + setupComponents() { + this.yAxis = new ChartComponent({ + layerClass: 'y axis', + make: (renderer, positions, values) => { + return positions.map((position, i) => renderer.yLine(position, values[i])); + }, + argsKeys: ['yAxisPositions', 'yAxisLabels'], + animate: () => {} + }); + + this.xAxis = new ChartComponent({ + layerClass: 'x axis', + make: (renderer, positions, values) => { + return positions.map((position, i) => renderer.xLine(position, values[i])); + }, + argsKeys: ['xPositions', 'xAxisLabels'], + animate: () => {} + }); + + // Indexed according to dataset + + // this.dataUnits = new IndexedChartComponent({ + // layerClass: 'x axis', + // make: (renderer, positions, values) => { + // return positions.map((position, i) => renderer.xLine(position, values[i])); + // }, + // argsKeys: ['xPositions', 'xAxisLabels'], + // animate: () => {} + // }); + + this.yMarkerLines = {}; + this.xMarkerLines = {}; + + // Marker Regions + + this.components = [ + this.yAxis, + this.xAxis, + // this.yMarkerLines, + // this.xMarkerLines, + // this.dataUnits, + ]; + } + } class BarChart extends AxisChart { constructor(args) { super(args); - this.type = 'bar'; - this.xAxisMode = args.xAxisMode || 'tick'; - this.yAxisMode = args.yAxisMode || 'span'; 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 + 1); + this.state.xOffset = this.state.unitWidth; + } + setup_values() { super.setup_values(); this.x_offset = this.avgUnitWidth; @@ -2020,36 +1605,33 @@ class BarChart extends AxisChart { this.updateCurrentDataPoint(this.currentIndex + 1); } - set_avgUnitWidth_and_x_offset() { - this.avgUnitWidth = this.width/(this.xAxisLabels.length + 1); - this.x_offset = this.avgUnitWidth; - } + } class LineChart extends AxisChart { constructor(args) { super(args); - - this.xAxisMode = args.xAxisMode || 'span'; - this.yAxisMode = args.yAxisMode || 'span'; - - if(args.hasOwnProperty('show_dots')) { - this.show_dots = args.show_dots; - } else { - this.show_dots = 1; - } - this.region_fill = args.region_fill; + this.type = 'line'; if(Object.getPrototypeOf(this) !== LineChart.prototype) { return; } - this.dot_radius = args.dot_radius || 4; - this.heatline = args.heatline; - this.type = 'line'; this.setup(); } + configure(args) { + super.configure(args); + this.config.xAxisMode = args.xAxisMode || 'span'; + this.config.yAxisMode = args.yAxisMode || 'span'; + + this.config.dot_radius = args.dot_radius || 4; + + this.config.heatline = args.heatline || 0; + this.config.region_fill = args.region_fill || 0; + this.config.show_dots = args.show_dots || 1; + } + setupPreUnitLayers() { // Path groups this.paths_groups = []; diff --git a/dist/frappe-charts.min.cjs.js b/dist/frappe-charts.min.cjs.js index 9ea96ca..1a63093 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 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 $(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 fire(t,e,i){var a=document.createEvent("HTMLEvents");a.initEvent(e,!0,!0);for(var n in i)a[n]=i[n];return t.dispatchEvent(a)}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 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 $$1(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)$$1(n).appendChild(i);else if("around"===a){var s=$$1(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>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:a,height:a,fill:n};return Object.keys(s).map(function(t){r[t]=s[t]}),createSVG("rect",r)}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 makeVertXLine(t,e,i,a){var n=createSVG("line",{x1:0,x2:0,y1:i+AXIS_TICK_LENGTH,y2:"span"===a?-1*AXIS_TICK_LENGTH:i}),s=createSVG("text",{x:0,y:i+AXIS_TICK_LENGTH+LABEL_MARGIN,dy:FONT_SIZE+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:e}),r=createSVG("g",{transform:"translate("+t+", 0)"});return r.appendChild(n),r.appendChild(s),r}function makeHoriYLine(t,e,i,a){var n=createSVG("line",{className:"",x1:-1*AXIS_TICK_LENGTH,x2:"span"===a?i+AXIS_TICK_LENGTH:AXIS_TICK_LENGTH,y1:0,y2:0}),s=createSVG("text",{x:-1*(LABEL_MARGIN+AXIS_TICK_LENGTH),y:0,dy:FONT_SIZE/2-2+"px","font-size":FONT_SIZE+"px","text-anchor":"end",innerHTML:e+""}),r=createSVG("g",{transform:"translate(0, "+t+")","stroke-opacity":1});return 0!==s&&"0"!==s||(r.style.stroke="rgba(27, 31, 35, 0.6)"),r.appendChild(n),r.appendChild(s),r}function limitColor(t){return t>255?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.unit.parentNode,s=void 0,r=void 0;t[0]=e.unit;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.unit),e.array?e.array[e.index]=r:e.object[e.key]=r});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 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 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 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 .data-points circle{stroke:#fff;stroke-width:2}.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=$.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,AXIS_TICK_LENGTH=6,LABEL_MARGIN=4,FONT_SIZE=10,AxisChartRenderer=function(){function t(e){classCallCheck(this,t),this.updateState(e)}return createClass(t,[{key:"updateState",value:function(t){this.totalHeight=t.totalHeight,this.totalWidth=t.totalWidth,this.zeroLine=t.zeroLine,this.avgUnitWidth=t.avgUnitWidth,this.xAxisMode=t.xAxisMode,this.yAxisMode=t.yAxisMode}},{key:"bar",value:function(t,e,i,a,n,s,r){var o=this.avgUnitWidth-i.spaceWidth,l=o/r,h=t-o/2+l*s,c=getBarHeightAndYAttr(e,this.zeroLine,this.totalHeight),u=slicedToArray(c,2),p=u[0];return createSVG("rect",{className:"bar mini",style:"fill: "+a,"data-point-index":n,x:h,y:u[1],width:l,height:p})}},{key:"dot",value:function(t,e,i,a,n){return createSVG("circle",{style:"fill: "+a,"data-point-index":n,cx:t,cy:e,r:i.radius})}},{key:"xLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.xAxisMode;return makeVertXLine(t,e,this.totalHeight,i)}},{key:"yLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.yAxisMode;return makeHoriYLine(t,e,this.totalWidth,i)}},{key:"xMarker",value:function(){}},{key:"yMarker",value:function(){}},{key:"xRegion",value:function(){}},{key:"yRegion",value:function(){}}]),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:[]},BaseChart=function(){function t(e){e.height;var i=e.title,a=void 0===i?"":i,n=e.subtitle,s=void 0===n?"":n,r=(e.colors,e.isNavigable),o=void 0===r?0:r,l=(e.type,e.parent);classCallCheck(this,t),this.rawChartArgs=arguments[0],this.parent="string"==typeof l?document.querySelector(l):l,this.title=a,this.subtitle=s,this.isNavigable=o,this.isNavigable&&(this.currentIndex=0),this.setupConfiguration()}return createClass(t,[{key:"setupConfiguration",value:function(){this.setColors(),this.setMargins(),this.config={showTooltip:1,showLegend:1,isNavigable:0,animate:1}}},{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:"draw",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calc(),this.refreshRenderer(),this.setupComponents(),this.makeChartArea(),this.makeLayers(),this.renderComponents(),this.renderLegend(),this.setupNavigation(t),this.config.animate&&this.update(this.firstUpdateData)}},{key:"update",value:function(){this.reCalc(),this.reRender()}},{key:"refreshRenderer",value:function(){}},{key:"calcWidth",value:function(){this.baseWidth=getElementContentWidth(this.parent)-0,this.width=this.baseWidth-2*this.translateX}},{key:"calc",value:function(){this.calcWidth(),this.reCalc()}},{key:"makeChartArea",value:function(){this.svg=makeSVGContainer(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svg_defs=makeSVGDefs(this.svg),this.drawArea=makeSVGGroup(this.svg,this.type+"-chart","translate("+this.translateX+", "+this.translateY+")")}},{key:"makeLayers",value:function(){var t=this;this.components.forEach(function(e){e.layer=t.makeLayer(e.layerClass)})}},{key:"calculateValues",value:function(){}},{key:"renderComponents",value:function(){this.components.forEach(function(t){t.store=t.make.apply(t,toConsumableArray(t.makeArgs)),t.layer.textContent="",t.store.forEach(function(e){t.layer.appendChild(e)})})}},{key:"reCalc",value:function(){}},{key:"reRender",value:function(){var t=this;if(!(!(arguments.length>0&&void 0!==arguments[0])||arguments[0]))return void this.renderComponents();this.animateComponents(),setTimeout(function(){t.renderComponents()},400)}},{key:"animateComponents",value:function(){this.intermedValues=this.calcIntermediateValues(),this.components.forEach(function(t){})}},{key:"calcInitStage",value:function(){}},{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:"makeLayer",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return makeSVGGroup(this.drawArea,t,e)}},{key:"getDifferentChart",value:function(t){return getDifferentChart(t,this.type,this.rawChartArgs)}}]),t}(),UNIT_ANIM_DUR=350,PATH_ANIM_DUR=650,MARKER_LINE_ANIM_DUR=UNIT_ANIM_DUR,REPLACE_ALL_NEW_DUR=250,STD_EASING="easein",Animator=function(){var t=function(t,e,i,a){this.totalHeight=t,this.totalWidth=e,this.avgUnitWidth=a,this.zeroLine=i};return t.prototype={bar: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]},dot:function(t,e,i){return[t,{cx:e,cy:i},UNIT_ANIM_DUR,STD_EASING]},path:function(t,e){var i=[],a=[{unit:t.path,object:t,key:"path"},{d:"M"+e},PATH_ANIM_DUR,STD_EASING];if(i.push(a),t.regionPath){var n="0,"+this.zeroLine+"L",s="L"+this.totalWidth+", "+this.zeroLine,r=[{unit:t.regionPath,object:t,key:"regionPath"},{d:"M"+n+e+s},PATH_ANIM_DUR,STD_EASING];i.push(r)}return i},translate:function(t,e,i,a){return[{unit:t,array:[0],index:0},{transform:i.join(", ")},a,STD_EASING,"translate",{transform:e.join(", ")}]},verticalLine:function(t,e,i){return this.translate(t,[i,0],[e,0],MARKER_LINE_ANIM_DUR)},horizontalLine:function(t,e,i){return this.translate(t,[0,i],[0,e],MARKER_LINE_ANIM_DUR)}},t}(),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"},AxisChart=function(t){function e(t){classCallCheck(this,e);var i=possibleConstructorReturn(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 inherits(e,t),createClass(e,[{key:"parseData",value:function(){var t=this.rawChartArgs;return this.xAxisLabels=t.data.labels||[],this.y=t.data.datasets||[],this.y.forEach(function(t,e){t.index=e},this),!0}},{key:"reCalc",value:function(){this.oldValues=["everything"],this.datasetsLabels=[],this.datasetsValues=[[[12,34,68],[10,5,46]],[[20,20,20]]],this.yAxisPositions=[this.height,this.height/2,0],this.yAxisLabels=["0","5","10"],this.xPositions=[0,this.width/2,this.width],this.xAxisLabels=["0","5","10"]}},{key:"calcInitStage",value:function(){}},{key:"calcIntermediateValues",value:function(){}},{key:"refreshRenderer",value:function(){this.renderer=new AxisChartRenderer({totalHeight:this.height,totalWidth:this.width,zeroLine:this.zeroLine,avgUnitWidth:this.avgUnitWidth,xAxisMode:this.xAxisMode,yAxisMode:this.yAxisMode})}},{key:"setupComponents",value:function(){var t=this;this.yAxis={layerClass:"y axis",layer:void 0,make:t.makeYLines.bind(t),makeArgs:[t.yAxisPositions,t.yAxisLabels],store:[],animate:t.animateYLines},this.xAxis={layerClass:"x axis",layer:void 0,make:t.makeXLines.bind(t),makeArgs:[t.xPositions,t.xAxisLabels],store:[],animate:t.animateXLines},this.yMarkerLines={},this.xMarkerLines={},this.components=[this.yAxis,this.xAxis]}},{key:"setup_values",value:function(){this.data.datasets.map(function(t){t.values=t.values.map(function(t){return isNaN(t)?0:t})}),this.setup_x(),this.setup_y()}},{key:"setup_x",value:function(){var t=this;this.set_avgUnitWidth_and_x_offset(),this.xPositions&&(this.x_old_axis_positions=this.xPositions.slice()),this.xPositions=this.xAxisLabels.map(function(e,i){return floatTwo(t.x_offset+i*t.avgUnitWidth)}),this.x_old_axis_positions||(this.x_old_axis_positions=this.xPositions.slice())}},{key:"setup_y",value:function(){var t=this;this.yAxisLabels&&(this.y_old_axis_values=this.yAxisLabels.slice());var e=this.get_all_y_values();this.y_sums&&this.y_sums.length>0&&(e=e.concat(this.y_sums)),this.yAxisLabels=calcIntervals(e,"line"===this.type),this.y_old_axis_values||(this.y_old_axis_values=this.yAxisLabels.slice());var i=this.yAxisLabels,a=i[i.length-1]-i[0];this.multiplier&&(this.old_multiplier=this.multiplier),this.multiplier=this.height/a,this.old_multiplier||(this.old_multiplier=this.multiplier);var n=i[1]-i[0],s=n*this.multiplier,r=void 0;r=i.indexOf(0)>=0?i.indexOf(0):i[0]>0?-1*i[0]/n:-1*i[i.length-1]/n+(i.length-1),this.zeroLine&&(this.old_zeroLine=this.zeroLine),this.zeroLine=this.height-r*s,this.old_zeroLine||(this.old_zeroLine=this.zeroLine),this.yAxisPositions&&(this.oldYAxisPositions=this.yAxisPositions),this.yAxisPositions=this.yAxisLabels.map(function(e){return t.zeroLine-e*t.multiplier}),this.oldYAxisPositions||(this.oldYAxisPositions=this.yAxisPositions)}},{key:"makeXLines",value:function(t,e){var i=this;return t.map(function(t,a){return i.renderer.xLine(t,e[a])})}},{key:"makeYLines",value:function(t,e){var i=this;return t.map(function(t,a){return i.renderer.yLine(t,e[a])})}},{key:"draw_graph",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return this.raw_chart_args.hasOwnProperty("init")&&!this.raw_chart_args.init?void this.y.map(function(e,i){e.svg_units=[],t.make_path&&t.make_path(e,t.xPositions,e.yUnitPositions,t.colors[i]),t.makeUnits(e),t.calcYDependencies()}):e?void this.draw_new_graph_and_animate():void this.y.map(function(e,i){e.svg_units=[],t.make_path&&t.make_path(e,t.xPositions,e.yUnitPositions,t.colors[i]),t.makeUnits(e)})}},{key:"draw_new_graph_and_animate",value:function(){var t=this,e=[];this.y.map(function(i,a){i.yUnitPositions=new Array(i.values.length).fill(t.zeroLine),e.push({values:i.values}),i.svg_units=[],t.make_path&&t.make_path(i,t.xPositions,i.yUnitPositions,t.colors[a]),t.makeUnits(i)}),setTimeout(function(){t.updateData(e)},350)}},{key:"setupNavigation",value:function(t){var i=this;t?setTimeout(function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setupNavigation",i).call(i,t)},500):get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setupNavigation",this).call(this,t)}},{key:"makeUnits",value:function(t){this.makeDatasetUnits(this.xPositions,t.yUnitPositions,this.colors[t.index],t.index,this.y.length)}},{key:"makeDatasetUnits",value:function(t,e,i,a,n,s,r,o){s||(s=this.svg_units_groups[a]),r||(r=this.y[a].svg_units),o||(o=this.unit_args),s.textContent="",r.length=0;var l=new AxisChartRenderer(this.height,this.zeroLine,this.avgUnitWidth);e.map(function(e,h){var c=l[o.type](t[h],e,o.args,i,h,a,n);s.appendChild(c),r.push(c)}),this.isNavigable&&this.bind_units(r)}},{key:"bindTooltip",value:function(){var t=this;this.chartWrapper.addEventListener("mousemove",function(e){var i=getOffset(t.chartWrapper),a=e.pageX-i.left-t.translateX;e.pageY-i.top-t.translateY=0;n--){var s=this.xPositions[n];if(t>s-this.avgUnitWidth/2){var r=s+this.translateX,o=this.y_min_tops[n]+this.translateY,l=i[n],h=this.y.map(function(t,i){return{title:t.title,value:a?e.format_tooltip_y(t.values[n]):t.values[n],color:e.colors[i]}});this.tip.set_values(r,o,l,"",h),this.tip.show_tip();break}}}}},{key:"updateData",value:function(t,e){e||(e=this.xAxisLabels),this.updating=!0,this.old_x_values=this.xAxisLabels.slice(),this.old_y_axis_tops=this.y.map(function(t){return t.yUnitPositions.slice()}),this.old_y_values=this.y.map(function(t){return t.values}),t&&this.y.map(function(e){e.values=t[e.index].values}),e&&(this.xAxisLabels=e),this.setup_x(),this.setup_y(),this.calcYDependencies(),this.animator=new Animator(this.height,this.width,this.zeroLine,this.avgUnitWidth),this.animate_graphs(),this.updating=!1}},{key:"animate_graphs",value:function(){var t=this;this.elements_to_animate=[];var e=equilizeNoOfElements(this.x_old_axis_positions.slice(),this.xPositions.slice()),i=slicedToArray(e,2),a=i[0],n=i[1],s=equilizeNoOfElements(this.oldYAxisPositions.slice(),this.yAxisPositions.slice()),r=slicedToArray(s,2),o=r[0],l=r[1],h=this.xAxisLabels.slice(),c=this.yAxisLabels.slice(),u=this.xPositions.slice().length-this.x_old_axis_positions.slice().length;u>0&&this.makeXLines(a,h),this.makeYLines(o,c),0!==u&&this.animateXLines(a,n),this.animateYLines(o,l),this.y.map(function(e){var i=equilizeNoOfElements(t.old_y_axis_tops[e.index].slice(),e.yUnitPositions.slice()),s=slicedToArray(i,2),r=s[0],o=s[1];u>0&&(t.make_path&&t.make_path(e,a,r,t.colors[e.index]),t.makeDatasetUnits(a,r,t.colors[e.index],e.index,t.y.length)),e.path&&t.animate_path(e,n,o),t.animate_units(e,n,o)}),runSMILAnimation(this.chartWrapper,this.svg,this.elements_to_animate),setTimeout(function(){t.y.map(function(e){t.make_path&&t.make_path(e,t.xPositions,e.yUnitPositions,t.colors[e.index]),t.makeUnits(e),t.makeYLines(t.yAxisPositions,t.yAxisLabels),t.makeXLines(t.xPositions,t.xAxisLabels)})},400)}},{key:"animate_path",value:function(t,e,i){var a=i.map(function(t,i){return e[i]+","+t});this.elements_to_animate=this.elements_to_animate.concat(this.animator.path(t,a.join("L")))}},{key:"animate_units",value:function(t,e,i){var a=this,n=this.unit_args.type;t.svg_units.map(function(s,r){void 0!==e[r]&&void 0!==i[r]&&a.elements_to_animate.push(a.animator[n]({unit:s,array:t.svg_units,index:r},e[r],i[r],t.index,a.y.length))})}},{key:"animateXLines",value:function(t,e){var i=this;this.xAxisLines.map(function(a,n){i.elements_to_animate.push(i.animator.verticalLine(a,e[n],t[n]))})}},{key:"animateYLines",value:function(t,e){var i=this;this.yAxisLines.map(function(a,n){i.elements_to_animate.push(i.animator.horizontalLine(a,e[n],t[n]))})}},{key:"animateYAnnotations",value:function(){}},{key:"add_data_point",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.xAxisLabels.length,a=this.y.map(function(t){return{values:t.values}});a.map(function(e,a){e.values.splice(i,0,t[a])});var n=this.xAxisLabels.slice();n.splice(i,0,e),this.updateData(a,n)}},{key:"remove_data_point",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.xAxisLabels.length-1;if(!(this.xAxisLabels.length<3)){var e=this.y.map(function(t){return{values:t.values}});e.map(function(e){e.values.splice(t,1)});var i=this.xAxisLabels.slice();i.splice(t,1),this.updateData(e,i)}}},{key:"getDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.currentIndex,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.currentIndex&&(this.currentIndex=t,fire(this.parent,"data-select",this.getDataPoint()))}},{key:"set_avgUnitWidth_and_x_offset",value:function(){this.avgUnitWidth=this.width/(this.xAxisLabels.length-1),this.x_offset=0}},{key:"get_all_y_values",value:function(){var t=[];return this.y.map(function(e){t=t.concat(e.values)}),t.concat(this.specific_values.map(function(t){return t.value}))}},{key:"calcYDependencies",value:function(){var t=this;this.y_min_tops=new Array(this.xAxisLabels.length).fill(9999),this.y.map(function(e){e.yUnitPositions=e.values.map(function(e){return floatTwo(t.zeroLine-e*t.multiplier)}),e.yUnitPositions.map(function(e,i){e0}),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=$.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&&($.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],_=void 0,y=void 0;t?(_=v?v.startPosition:d,y=v?v.endPosition:d):(_=d,y=f);var g=i.makeArcPath(_,y),m=makePath(g,"pie-path","none",i.colors[l]);m.style.transition="transform .3s;",i.drawArea.appendChild(m),i.slices.push(m),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:m,array:i.slices,index:i.slices.length-1},{d:i.makeArcPath(d,f)},650,"easein",null,{d:g}])}),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&&($.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 _=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,arguments[0]));_.type="heatmap",_.domain=s,_.subdomain=o,_.data=h,_.discrete_domains=u,_.count_label=d;var y=new Date;return _.start=a||addDays(y,365),v=v.slice(0,5),_.legend_colors=_.validate_colors(v)?v:["#ebedf0","#c6e48b","#7bc96f","#239a3b","#196127"],_.distribution_size=5,_.translateX=0,_}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={line:LineChart,bar:BarChart,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 $(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 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 $$1(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)$$1(n).appendChild(i);else if("around"===a){var r=$$1(n);r.parentNode.insertBefore(i,r),i.appendChild(r)}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),r=[1,.6,.2];return i&&(r=[.4,.2,0]),setGradientStop(n,"0%",e,r[0]),setGradientStop(n,"50%",e,r[1]),setGradientStop(n,"100%",e,r[2]),a}function makeHeatSquare(t,e,i,a){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"none",r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},s={className:t,x:e,y:i,width:a,height:a,fill:n};return Object.keys(r).map(function(t){s[t]=r[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 makeVertXLine(t,e,i,a){var n=createSVG("line",{x1:0,x2:0,y1:i+AXIS_TICK_LENGTH,y2:"span"===a?-1*AXIS_TICK_LENGTH:i}),r=createSVG("text",{x:0,y:i+AXIS_TICK_LENGTH+LABEL_MARGIN,dy:FONT_SIZE+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:e}),s=createSVG("g",{transform:"translate("+t+", 0)"});return s.appendChild(n),s.appendChild(r),s}function makeHoriYLine(t,e,i,a){var n=createSVG("line",{className:"",x1:-1*AXIS_TICK_LENGTH,x2:"span"===a?i+AXIS_TICK_LENGTH:AXIS_TICK_LENGTH,y1:0,y2:0}),r=createSVG("text",{x:-1*(LABEL_MARGIN+AXIS_TICK_LENGTH),y:0,dy:FONT_SIZE/2-2+"px","font-size":FONT_SIZE+"px","text-anchor":"end",innerHTML:e+""}),s=createSVG("g",{transform:"translate(0, "+t+")","stroke-opacity":1});return 0!==r&&"0"!==r||(s.style.stroke="rgba(27, 31, 35, 0.6)"),s.appendChild(n),s.appendChild(r),s}function limitColor(t){return t>255?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),r=limitColor((n>>16)+e),s=limitColor((n>>8&255)+e),o=limitColor((255&n)+e);return(a?"#":"")+(o|s<<8|r<<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,r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},s=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=r[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]);s.appendChild(h),n?o.setAttribute(l,"translate("+u+")"):o.setAttribute(l,u)}return[s,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.unit.parentNode,r=void 0,s=void 0;t[0]=e.unit;var o=animateSVGElement.apply(void 0,toConsumableArray(t)),l=slicedToArray(o,2);r=l[0],s=l[1],i.push(s),a.push([r,n]),n.replaceChild(r,e.unit),e.array?e.array[e.index]=s:e.object[e.key]=s});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 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,r=n,s=1;n>5&&(n%2!=0&&(n=++i-a),r=n/2,s=2),n<=2&&(s=n/(r=4)),0===n&&(r=5,s=1);for(var o=[],l=0;l<=r;l++)o.push(a+s*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],r=a[1],s=e?e/Math.pow(10,r):0,o=getRangeIntervals(n=n.toFixed(6),s);return o=o.map(function(t){return t*Math.pow(10,r)})}function calcIntervals(t){function e(t,e){for(var i=getIntervals(t),a=i[1]-i[0],n=0,r=1;n1&&void 0!==arguments[1]&&arguments[1],a=Math.max.apply(Math,toConsumableArray(t)),n=Math.min.apply(Math,toConsumableArray(t)),r=[];if(a>=0&&n>=0)normalize(a)[1],r=i?getIntervals(a,n):getIntervals(a);else if(a>0&&n<0){var s=Math.abs(n);a>=s?(normalize(a)[1],r=e(a,s)):(normalize(s)[1],r=e(s,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],r=(r=i?getIntervals(o,l):getIntervals(o)).reverse().map(function(t){return-1*t})}return r}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=[],r=0;r9?"":"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 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 .data-points circle{stroke:#fff;stroke-width:2}.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};s?s=s.next=o:(r=s=o,a(t,e))})}function a(i,r){try{var s=e[i](r),o=s.value;o instanceof t?Promise.resolve(o.value).then(function(t){a("next",t)},function(t){a("throw",t)}):n(s.done?"return":"normal",s.value)}catch(t){n("throw",t)}}function n(t,e){switch(t){case"return":r.resolve({value:e,done:!0});break;case"throw":r.reject(e);break;default:r.resolve({value:e,done:!1})}(r=r.next)?a(r.key,r.arg):s=null}var r,s;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=$.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]:[],r=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=r,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,AXIS_TICK_LENGTH=6,LABEL_MARGIN=4,FONT_SIZE=10,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.avgUnitWidth=t.avgUnitWidth,this.xAxisMode=t.xAxisMode,this.yAxisMode=t.yAxisMode}},{key:"bar",value:function(t,e,i,a,n,r,s){var o=this.avgUnitWidth-i.spaceWidth,l=o/s,h=t-o/2+l*r,c=getBarHeightAndYAttr(e,this.zeroLine,this.totalHeight),u=slicedToArray(c,2),p=u[0];return createSVG("rect",{className:"bar mini",style:"fill: "+a,"data-point-index":n,x:h,y:u[1],width:l,height:p})}},{key:"dot",value:function(t,e,i,a,n){return createSVG("circle",{style:"fill: "+a,"data-point-index":n,cx:t,cy:e,r:i.radius})}},{key:"xLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.xAxisMode;return makeVertXLine(t,e,this.totalHeight,i)}},{key:"yLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.yAxisMode;return makeHoriYLine(t,e,this.totalWidth,i)}},{key:"xMarker",value:function(){}},{key:"yMarker",value:function(){}},{key:"xRegion",value:function(){}},{key:"yRegion",value:function(){}}]),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:[]},BaseChart=function(){function t(e){e.height;var i=e.title,a=void 0===i?"":i,n=e.subtitle,r=void 0===n?"":n,s=(e.colors,e.isNavigable),o=void 0===s?0:s,l=(e.showLegend,e.type,e.parent);classCallCheck(this,t),this.rawChartArgs=arguments[0],this.parent="string"==typeof l?document.querySelector(l):l,this.title=a,this.subtitle=r,this.isNavigable=o,this.isNavigable&&(this.currentIndex=0),this.configure(arguments[0])}return createClass(t,[{key:"configure",value:function(t){this.setColors(),this.setMargins(t),this.config={showTooltip:1,showLegend:1,isNavigable:0,animate:0},this.state={}}},{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.makeChartArea(),this.setComponentParent(),this.makeComponentLayers(),this.renderLegend(),this.setupNavigation(t),this.renderComponents(),this.config.animate&&this.update(this.firstUpdateData)}},{key:"update",value:function(){this.refresh(),this.reRender()}},{key:"calcWidth",value:function(){this.baseWidth=getElementContentWidth(this.parent)-0,this.width=this.baseWidth-2*this.translateX}},{key:"refresh",value:function(){this.oldState=this.state?Object.assign({},this.state):{},this.prepareData(),this.reCalc(),this.refreshRenderer(),this.refreshComponents()}},{key:"makeChartArea",value:function(){this.svg=makeSVGContainer(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svg_defs=makeSVGDefs(this.svg),this.drawArea=makeSVGGroup(this.svg,this.type+"-chart","translate("+this.translateX+", "+this.translateY+")")}},{key:"prepareData",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.intermedState=this.calcIntermedState(),this.refreshComponents(),this.animateComponents(),setTimeout(function(){t.renderComponents()},400)}},{key:"calcIntermedState",value:function(){}},{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:"animateComponents",value:function(){this.components.forEach(function(t){return t.animate()})}},{key:"refreshComponents",value:function(){var t={chartState:this.state,oldChartState:this.oldState,intermedState:this.intermedState,chartRenderer:this.renderer};this.components.forEach(function(e){return e.refresh(t)})}},{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}(),ChartComponent=function(){function t(e){var i=e.layerClass,a=void 0===i?"":i,n=e.layerTransform,r=void 0===n?"":n,s=e.make,o=e.argsKeys,l=e.animate;classCallCheck(this,t),this.layerClass=a,this.layerTransform=r,this.make=s,this.argsKeys=o,this.animate=l,this.layer=void 0,this.store=[]}return createClass(t,[{key:"refresh",value:function(t){this.chartState=t.chartState,this.oldChartState=t.oldChartState,this.intermedState=t.intermedState,this.chartRenderer=t.chartRenderer}},{key:"render",value:function(){var t=this,e=this.argsKeys.map(function(e){return t.chartState[e]});e.unshift(this.chartRenderer),this.store=this.make.apply(this,toConsumableArray(e)),this.layer.textContent="",this.store.forEach(function(e){t.layer.appendChild(e)})}},{key:"setupParent",value:function(t){this.parent=t}},{key:"makeLayer",value:function(){this.layer=makeSVGGroup(this.parent,this.layerClass,this.layerTransform)}}]),t}(),IndexedChartComponent=function(t){function e(){return classCallCheck(this,e),possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return inherits(e,t),e}(ChartComponent),REPLACE_ALL_NEW_DUR=250,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"},AxisChart=function(t){function e(t){classCallCheck(this,e);var i=possibleConstructorReturn(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 inherits(e,t),createClass(e,[{key:"checkData",value:function(t){return!0}},{key:"getFirstUpdateData",value:function(t){}},{key:"calcYDependencies",value:function(){var t=this;this.y_min_tops=new Array(this.xAxisLabels.length).fill(9999),this.y.map(function(e){e.yUnitPositions=e.values.map(function(e){return floatTwo(t.zeroLine-e*t.multiplier)}),e.yUnitPositions.map(function(e,i){et.datasetLength?n.slice(0,t.datasetLength):fillArray(n,t.datasetLength-n.length,0):e,i.index=a})}},{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.label}),t.datasetsValues=t.datasets.map(function(t){return t.values}),t.yAxisLabels=calcIntervals(this.getAllYValues(),"line"===this.type),this.calcYAxisPositions()}},{key:"calcXPositions",value:function(){var t=this.state;this.setUnitWidthAndXOffset(),t.xPositions=t.xAxisLabels.map(function(e,i){return floatTwo(t.xOffset+i*t.unitWidth)})}},{key:"calcYAxisPositions",value:function(){var t=this.state,e=t.yAxisLabels;t.scaleMultiplier=this.height/getValueRange(e);var i=getIntervalSize(e)*t.scaleMultiplier;t.zeroLine=this.height-getZeroIndex(e)*i,t.yAxisPositions=e.map(function(e){return t.zeroLine-e*t.scaleMultiplier})}},{key:"setUnitWidthAndXOffset",value:function(){this.state.unitWidth=this.width/(this.state.datasetLength-1),this.state.xOffset=0}},{key:"getAllYValues",value:function(){var t;return(t=[]).concat.apply(t,toConsumableArray(this.state.datasetsValues))}},{key:"calcIntermedState",value:function(){}},{key:"refreshRenderer",value:function(){var t={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(t):this.renderer=new AxisChartRenderer(t)}},{key:"setupComponents",value:function(){this.yAxis=new ChartComponent({layerClass:"y axis",make:function(t,e,i){return e.map(function(e,a){return t.yLine(e,i[a])})},argsKeys:["yAxisPositions","yAxisLabels"],animate:function(){}}),this.xAxis=new ChartComponent({layerClass:"x axis",make:function(t,e,i){return e.map(function(e,a){return t.xLine(e,i[a])})},argsKeys:["xPositions","xAxisLabels"],animate:function(){}}),this.yMarkerLines={},this.xMarkerLines={},this.components=[this.yAxis,this.xAxis]}}]),e}(BaseChart),BarChart=function(t){function e(t){classCallCheck(this,e);var i=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="bar",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||"tick",this.config.yAxisMode=t.yAxisMode||"span"}},{key:"setUnitWidthAndXOffset",value:function(){this.state.unitWidth=this.width/(this.state.datasetLength+1),this.state.xOffset=this.state.unitWidth}},{key:"setup_values",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_values",this).call(this),this.x_offset=this.avgUnitWidth,this.unit_args={type:"bar",args:{spaceWidth:this.avgUnitWidth/2}}}},{key:"bind_units",value:function(t){var e=this;t.map(function(t){t.addEventListener("click",function(){var i=t.getAttribute("data-point-index");e.updateCurrentDataPoint(i)})})}},{key:"update_overlay",value:function(t){var e=this,i=[];Object.keys(t.attributes).map(function(e){i.push(t.attributes[e])}),i.filter(function(t){return t.specified}).map(function(t){e.overlay.setAttribute(t.name,t.nodeValue)}),this.overlay.style.fill="#000000",this.overlay.style.opacity="0.4"}},{key:"onLeftArrow",value:function(){this.updateCurrentDataPoint(this.currentIndex-1)}},{key:"onRightArrow",value:function(){this.updateCurrentDataPoint(this.currentIndex+1)}}]),e}(AxisChart),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.dot_radius=t.dot_radius||4,this.config.heatline=t.heatline||0,this.config.region_fill=t.region_fill||0,this.config.show_dots=t.show_dots||1}},{key:"setupPreUnitLayers",value:function(){var t=this;this.paths_groups=[],this.y.map(function(e,i){t.paths_groups[i]=makeSVGGroup(t.drawArea,"path-group path-group-"+i)})}},{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.dot_radius}}}},{key:"makeDatasetUnits",value:function(t,i,a,n,r,s,o,l){this.show_dots&&get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"makeDatasetUnits",this).call(this,t,i,a,n,r,s,o,l)}},{key:"make_paths",value:function(){var t=this;this.y.map(function(e){t.make_path(e,t.xPositions,e.yUnitPositions,e.color||t.colors[e.index])})}},{key:"make_path",value:function(t,e,i,a){var n=i.map(function(t,i){return e[i]+","+t}).join("L");if(this.paths_groups[t.index].textContent="",t.path=makePath("M"+n,"line-graph-path",a),this.paths_groups[t.index].appendChild(t.path),this.heatline){var r=makeGradient(this.svg_defs,a);t.path.style.stroke="url(#"+r+")"}this.region_fill&&this.fill_region_for_dataset(t,a,n)}},{key:"fill_region_for_dataset",value:function(t,e,i){var a=makeGradient(this.svg_defs,e,!0),n="M0,"+this.zeroLine+"L"+i+"L"+this.width+","+this.zeroLine;t.regionPath=makePath(n,"region-fill","none","url(#"+a+")"),this.paths_groups[t.index].appendChild(t.regionPath)}}]),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.dot_radius?i.dot_radius=t.dot_radius:i.dot_radius=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.dot_radius}}}},{key:"make_paths",value:function(){}},{key:"make_path",value:function(){}}]),e}(LineChart),PercentageChart=function(t){function e(t){classCallCheck(this,e);var i=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="percentage",i.max_slices=10,i.max_legend_points=6,i.setup(),i}return inherits(e,t),createClass(e,[{key:"makeChartArea",value:function(){this.chartWrapper.className+=" graph-focus-margin",this.chartWrapper.style.marginTop="45px",this.statsWrapper.className+=" graph-focus-margin",this.statsWrapper.style.marginBottom="30px",this.statsWrapper.style.paddingTop="0px",this.chartDiv=$.create("div",{className:"div",inside:this.chartWrapper}),this.chart=$.create("div",{className:"progress-chart",inside:this.chartDiv})}},{key:"setupLayers",value:function(){this.percentageBar=$.create("div",{className:"progress",inside:this.chart})}},{key:"setup_values",value:function(){var t=this;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:"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=$.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),r=n.left-a.left+e.offsetWidth/2,s=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(r,s,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&&($.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,r=this.clockWise;return"M"+i+" "+a+" L"+(i+t.x)+" "+(a+t.y)+" A "+n+" "+n+" 0 0 "+(r?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 r=this.slicesProperties||[];this.slices=[],this.elements_to_animate=[],this.slicesProperties=[];var s=180-this.startAngle;this.slice_totals.map(function(o,l){var h=s,c=o/i.grand_total*FULL_ANGLE,u=n?-c:c,p=s+=u,d=e.getPositionByAngle(h,a),f=e.getPositionByAngle(p,a),v=t&&r[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 r=getOffset(this.svg),s=a.pageX-r.left+10,o=a.pageY-r.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(s,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&&($.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,r=void 0===n?"":n,s=t.subdomain,o=void 0===s?"":s,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=r,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[r,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),r=t.chartWrapper.getBoundingClientRect(),s=e.target.getBoundingClientRect(),o=parseInt(e.target.getAttribute("width")),l=s.left-r.left+(o+2)/2,h=s.top-r.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={line:LineChart,bar:BarChart,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 75dbeff..78ae46a 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 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 $(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 fire(t,e,i){var a=document.createEvent("HTMLEvents");a.initEvent(e,!0,!0);for(var n in i)a[n]=i[n];return t.dispatchEvent(a)}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 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 $$1(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)$$1(n).appendChild(i);else if("around"===a){var s=$$1(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>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:a,height:a,fill:n};return Object.keys(s).map(function(t){r[t]=s[t]}),createSVG("rect",r)}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 makeVertXLine(t,e,i,a){var n=createSVG("line",{x1:0,x2:0,y1:i+AXIS_TICK_LENGTH,y2:"span"===a?-1*AXIS_TICK_LENGTH:i}),s=createSVG("text",{x:0,y:i+AXIS_TICK_LENGTH+LABEL_MARGIN,dy:FONT_SIZE+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:e}),r=createSVG("g",{transform:"translate("+t+", 0)"});return r.appendChild(n),r.appendChild(s),r}function makeHoriYLine(t,e,i,a){var n=createSVG("line",{className:"",x1:-1*AXIS_TICK_LENGTH,x2:"span"===a?i+AXIS_TICK_LENGTH:AXIS_TICK_LENGTH,y1:0,y2:0}),s=createSVG("text",{x:-1*(LABEL_MARGIN+AXIS_TICK_LENGTH),y:0,dy:FONT_SIZE/2-2+"px","font-size":FONT_SIZE+"px","text-anchor":"end",innerHTML:e+""}),r=createSVG("g",{transform:"translate(0, "+t+")","stroke-opacity":1});return 0!==s&&"0"!==s||(r.style.stroke="rgba(27, 31, 35, 0.6)"),r.appendChild(n),r.appendChild(s),r}function limitColor(t){return t>255?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.unit.parentNode,s=void 0,r=void 0;t[0]=e.unit;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.unit),e.array?e.array[e.index]=r:e.object[e.key]=r});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 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 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 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 .data-points circle{stroke:#fff;stroke-width:2}.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=$.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,AXIS_TICK_LENGTH=6,LABEL_MARGIN=4,FONT_SIZE=10,AxisChartRenderer=function(){function t(e){classCallCheck(this,t),this.updateState(e)}return createClass(t,[{key:"updateState",value:function(t){this.totalHeight=t.totalHeight,this.totalWidth=t.totalWidth,this.zeroLine=t.zeroLine,this.avgUnitWidth=t.avgUnitWidth,this.xAxisMode=t.xAxisMode,this.yAxisMode=t.yAxisMode}},{key:"bar",value:function(t,e,i,a,n,s,r){var o=this.avgUnitWidth-i.spaceWidth,l=o/r,h=t-o/2+l*s,c=getBarHeightAndYAttr(e,this.zeroLine,this.totalHeight),u=slicedToArray(c,2),p=u[0];return createSVG("rect",{className:"bar mini",style:"fill: "+a,"data-point-index":n,x:h,y:u[1],width:l,height:p})}},{key:"dot",value:function(t,e,i,a,n){return createSVG("circle",{style:"fill: "+a,"data-point-index":n,cx:t,cy:e,r:i.radius})}},{key:"xLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.xAxisMode;return makeVertXLine(t,e,this.totalHeight,i)}},{key:"yLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.yAxisMode;return makeHoriYLine(t,e,this.totalWidth,i)}},{key:"xMarker",value:function(){}},{key:"yMarker",value:function(){}},{key:"xRegion",value:function(){}},{key:"yRegion",value:function(){}}]),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:[]},BaseChart=function(){function t(e){e.height;var i=e.title,a=void 0===i?"":i,n=e.subtitle,s=void 0===n?"":n,r=(e.colors,e.isNavigable),o=void 0===r?0:r,l=(e.type,e.parent);classCallCheck(this,t),this.rawChartArgs=arguments[0],this.parent="string"==typeof l?document.querySelector(l):l,this.title=a,this.subtitle=s,this.isNavigable=o,this.isNavigable&&(this.currentIndex=0),this.setupConfiguration()}return createClass(t,[{key:"setupConfiguration",value:function(){this.setColors(),this.setMargins(),this.config={showTooltip:1,showLegend:1,isNavigable:0,animate:1}}},{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:"draw",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calc(),this.refreshRenderer(),this.setupComponents(),this.makeChartArea(),this.makeLayers(),this.renderComponents(),this.renderLegend(),this.setupNavigation(t),this.config.animate&&this.update(this.firstUpdateData)}},{key:"update",value:function(){this.reCalc(),this.reRender()}},{key:"refreshRenderer",value:function(){}},{key:"calcWidth",value:function(){this.baseWidth=getElementContentWidth(this.parent)-0,this.width=this.baseWidth-2*this.translateX}},{key:"calc",value:function(){this.calcWidth(),this.reCalc()}},{key:"makeChartArea",value:function(){this.svg=makeSVGContainer(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svg_defs=makeSVGDefs(this.svg),this.drawArea=makeSVGGroup(this.svg,this.type+"-chart","translate("+this.translateX+", "+this.translateY+")")}},{key:"makeLayers",value:function(){var t=this;this.components.forEach(function(e){e.layer=t.makeLayer(e.layerClass)})}},{key:"calculateValues",value:function(){}},{key:"renderComponents",value:function(){this.components.forEach(function(t){t.store=t.make.apply(t,toConsumableArray(t.makeArgs)),t.layer.textContent="",t.store.forEach(function(e){t.layer.appendChild(e)})})}},{key:"reCalc",value:function(){}},{key:"reRender",value:function(){var t=this;if(!(!(arguments.length>0&&void 0!==arguments[0])||arguments[0]))return void this.renderComponents();this.animateComponents(),setTimeout(function(){t.renderComponents()},400)}},{key:"animateComponents",value:function(){this.intermedValues=this.calcIntermediateValues(),this.components.forEach(function(t){})}},{key:"calcInitStage",value:function(){}},{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:"makeLayer",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return makeSVGGroup(this.drawArea,t,e)}},{key:"getDifferentChart",value:function(t){return getDifferentChart(t,this.type,this.rawChartArgs)}}]),t}(),UNIT_ANIM_DUR=350,PATH_ANIM_DUR=650,MARKER_LINE_ANIM_DUR=UNIT_ANIM_DUR,REPLACE_ALL_NEW_DUR=250,STD_EASING="easein",Animator=function(){var t=function(t,e,i,a){this.totalHeight=t,this.totalWidth=e,this.avgUnitWidth=a,this.zeroLine=i};return t.prototype={bar: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]},dot:function(t,e,i){return[t,{cx:e,cy:i},UNIT_ANIM_DUR,STD_EASING]},path:function(t,e){var i=[],a=[{unit:t.path,object:t,key:"path"},{d:"M"+e},PATH_ANIM_DUR,STD_EASING];if(i.push(a),t.regionPath){var n="0,"+this.zeroLine+"L",s="L"+this.totalWidth+", "+this.zeroLine,r=[{unit:t.regionPath,object:t,key:"regionPath"},{d:"M"+n+e+s},PATH_ANIM_DUR,STD_EASING];i.push(r)}return i},translate:function(t,e,i,a){return[{unit:t,array:[0],index:0},{transform:i.join(", ")},a,STD_EASING,"translate",{transform:e.join(", ")}]},verticalLine:function(t,e,i){return this.translate(t,[i,0],[e,0],MARKER_LINE_ANIM_DUR)},horizontalLine:function(t,e,i){return this.translate(t,[0,i],[0,e],MARKER_LINE_ANIM_DUR)}},t}(),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"},AxisChart=function(t){function e(t){classCallCheck(this,e);var i=possibleConstructorReturn(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 inherits(e,t),createClass(e,[{key:"parseData",value:function(){var t=this.rawChartArgs;return this.xAxisLabels=t.data.labels||[],this.y=t.data.datasets||[],this.y.forEach(function(t,e){t.index=e},this),!0}},{key:"reCalc",value:function(){this.oldValues=["everything"],this.datasetsLabels=[],this.datasetsValues=[[[12,34,68],[10,5,46]],[[20,20,20]]],this.yAxisPositions=[this.height,this.height/2,0],this.yAxisLabels=["0","5","10"],this.xPositions=[0,this.width/2,this.width],this.xAxisLabels=["0","5","10"]}},{key:"calcInitStage",value:function(){}},{key:"calcIntermediateValues",value:function(){}},{key:"refreshRenderer",value:function(){this.renderer=new AxisChartRenderer({totalHeight:this.height,totalWidth:this.width,zeroLine:this.zeroLine,avgUnitWidth:this.avgUnitWidth,xAxisMode:this.xAxisMode,yAxisMode:this.yAxisMode})}},{key:"setupComponents",value:function(){var t=this;this.yAxis={layerClass:"y axis",layer:void 0,make:t.makeYLines.bind(t),makeArgs:[t.yAxisPositions,t.yAxisLabels],store:[],animate:t.animateYLines},this.xAxis={layerClass:"x axis",layer:void 0,make:t.makeXLines.bind(t),makeArgs:[t.xPositions,t.xAxisLabels],store:[],animate:t.animateXLines},this.yMarkerLines={},this.xMarkerLines={},this.components=[this.yAxis,this.xAxis]}},{key:"setup_values",value:function(){this.data.datasets.map(function(t){t.values=t.values.map(function(t){return isNaN(t)?0:t})}),this.setup_x(),this.setup_y()}},{key:"setup_x",value:function(){var t=this;this.set_avgUnitWidth_and_x_offset(),this.xPositions&&(this.x_old_axis_positions=this.xPositions.slice()),this.xPositions=this.xAxisLabels.map(function(e,i){return floatTwo(t.x_offset+i*t.avgUnitWidth)}),this.x_old_axis_positions||(this.x_old_axis_positions=this.xPositions.slice())}},{key:"setup_y",value:function(){var t=this;this.yAxisLabels&&(this.y_old_axis_values=this.yAxisLabels.slice());var e=this.get_all_y_values();this.y_sums&&this.y_sums.length>0&&(e=e.concat(this.y_sums)),this.yAxisLabels=calcIntervals(e,"line"===this.type),this.y_old_axis_values||(this.y_old_axis_values=this.yAxisLabels.slice());var i=this.yAxisLabels,a=i[i.length-1]-i[0];this.multiplier&&(this.old_multiplier=this.multiplier),this.multiplier=this.height/a,this.old_multiplier||(this.old_multiplier=this.multiplier);var n=i[1]-i[0],s=n*this.multiplier,r=void 0;r=i.indexOf(0)>=0?i.indexOf(0):i[0]>0?-1*i[0]/n:-1*i[i.length-1]/n+(i.length-1),this.zeroLine&&(this.old_zeroLine=this.zeroLine),this.zeroLine=this.height-r*s,this.old_zeroLine||(this.old_zeroLine=this.zeroLine),this.yAxisPositions&&(this.oldYAxisPositions=this.yAxisPositions),this.yAxisPositions=this.yAxisLabels.map(function(e){return t.zeroLine-e*t.multiplier}),this.oldYAxisPositions||(this.oldYAxisPositions=this.yAxisPositions)}},{key:"makeXLines",value:function(t,e){var i=this;return t.map(function(t,a){return i.renderer.xLine(t,e[a])})}},{key:"makeYLines",value:function(t,e){var i=this;return t.map(function(t,a){return i.renderer.yLine(t,e[a])})}},{key:"draw_graph",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return this.raw_chart_args.hasOwnProperty("init")&&!this.raw_chart_args.init?void this.y.map(function(e,i){e.svg_units=[],t.make_path&&t.make_path(e,t.xPositions,e.yUnitPositions,t.colors[i]),t.makeUnits(e),t.calcYDependencies()}):e?void this.draw_new_graph_and_animate():void this.y.map(function(e,i){e.svg_units=[],t.make_path&&t.make_path(e,t.xPositions,e.yUnitPositions,t.colors[i]),t.makeUnits(e)})}},{key:"draw_new_graph_and_animate",value:function(){var t=this,e=[];this.y.map(function(i,a){i.yUnitPositions=new Array(i.values.length).fill(t.zeroLine),e.push({values:i.values}),i.svg_units=[],t.make_path&&t.make_path(i,t.xPositions,i.yUnitPositions,t.colors[a]),t.makeUnits(i)}),setTimeout(function(){t.updateData(e)},350)}},{key:"setupNavigation",value:function(t){var i=this;t?setTimeout(function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setupNavigation",i).call(i,t)},500):get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setupNavigation",this).call(this,t)}},{key:"makeUnits",value:function(t){this.makeDatasetUnits(this.xPositions,t.yUnitPositions,this.colors[t.index],t.index,this.y.length)}},{key:"makeDatasetUnits",value:function(t,e,i,a,n,s,r,o){s||(s=this.svg_units_groups[a]),r||(r=this.y[a].svg_units),o||(o=this.unit_args),s.textContent="",r.length=0;var l=new AxisChartRenderer(this.height,this.zeroLine,this.avgUnitWidth);e.map(function(e,h){var c=l[o.type](t[h],e,o.args,i,h,a,n);s.appendChild(c),r.push(c)}),this.isNavigable&&this.bind_units(r)}},{key:"bindTooltip",value:function(){var t=this;this.chartWrapper.addEventListener("mousemove",function(e){var i=getOffset(t.chartWrapper),a=e.pageX-i.left-t.translateX;e.pageY-i.top-t.translateY=0;n--){var s=this.xPositions[n];if(t>s-this.avgUnitWidth/2){var r=s+this.translateX,o=this.y_min_tops[n]+this.translateY,l=i[n],h=this.y.map(function(t,i){return{title:t.title,value:a?e.format_tooltip_y(t.values[n]):t.values[n],color:e.colors[i]}});this.tip.set_values(r,o,l,"",h),this.tip.show_tip();break}}}}},{key:"updateData",value:function(t,e){e||(e=this.xAxisLabels),this.updating=!0,this.old_x_values=this.xAxisLabels.slice(),this.old_y_axis_tops=this.y.map(function(t){return t.yUnitPositions.slice()}),this.old_y_values=this.y.map(function(t){return t.values}),t&&this.y.map(function(e){e.values=t[e.index].values}),e&&(this.xAxisLabels=e),this.setup_x(),this.setup_y(),this.calcYDependencies(),this.animator=new Animator(this.height,this.width,this.zeroLine,this.avgUnitWidth),this.animate_graphs(),this.updating=!1}},{key:"animate_graphs",value:function(){var t=this;this.elements_to_animate=[];var e=equilizeNoOfElements(this.x_old_axis_positions.slice(),this.xPositions.slice()),i=slicedToArray(e,2),a=i[0],n=i[1],s=equilizeNoOfElements(this.oldYAxisPositions.slice(),this.yAxisPositions.slice()),r=slicedToArray(s,2),o=r[0],l=r[1],h=this.xAxisLabels.slice(),c=this.yAxisLabels.slice(),u=this.xPositions.slice().length-this.x_old_axis_positions.slice().length;u>0&&this.makeXLines(a,h),this.makeYLines(o,c),0!==u&&this.animateXLines(a,n),this.animateYLines(o,l),this.y.map(function(e){var i=equilizeNoOfElements(t.old_y_axis_tops[e.index].slice(),e.yUnitPositions.slice()),s=slicedToArray(i,2),r=s[0],o=s[1];u>0&&(t.make_path&&t.make_path(e,a,r,t.colors[e.index]),t.makeDatasetUnits(a,r,t.colors[e.index],e.index,t.y.length)),e.path&&t.animate_path(e,n,o),t.animate_units(e,n,o)}),runSMILAnimation(this.chartWrapper,this.svg,this.elements_to_animate),setTimeout(function(){t.y.map(function(e){t.make_path&&t.make_path(e,t.xPositions,e.yUnitPositions,t.colors[e.index]),t.makeUnits(e),t.makeYLines(t.yAxisPositions,t.yAxisLabels),t.makeXLines(t.xPositions,t.xAxisLabels)})},400)}},{key:"animate_path",value:function(t,e,i){var a=i.map(function(t,i){return e[i]+","+t});this.elements_to_animate=this.elements_to_animate.concat(this.animator.path(t,a.join("L")))}},{key:"animate_units",value:function(t,e,i){var a=this,n=this.unit_args.type;t.svg_units.map(function(s,r){void 0!==e[r]&&void 0!==i[r]&&a.elements_to_animate.push(a.animator[n]({unit:s,array:t.svg_units,index:r},e[r],i[r],t.index,a.y.length))})}},{key:"animateXLines",value:function(t,e){var i=this;this.xAxisLines.map(function(a,n){i.elements_to_animate.push(i.animator.verticalLine(a,e[n],t[n]))})}},{key:"animateYLines",value:function(t,e){var i=this;this.yAxisLines.map(function(a,n){i.elements_to_animate.push(i.animator.horizontalLine(a,e[n],t[n]))})}},{key:"animateYAnnotations",value:function(){}},{key:"add_data_point",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.xAxisLabels.length,a=this.y.map(function(t){return{values:t.values}});a.map(function(e,a){e.values.splice(i,0,t[a])});var n=this.xAxisLabels.slice();n.splice(i,0,e),this.updateData(a,n)}},{key:"remove_data_point",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.xAxisLabels.length-1;if(!(this.xAxisLabels.length<3)){var e=this.y.map(function(t){return{values:t.values}});e.map(function(e){e.values.splice(t,1)});var i=this.xAxisLabels.slice();i.splice(t,1),this.updateData(e,i)}}},{key:"getDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.currentIndex,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.currentIndex&&(this.currentIndex=t,fire(this.parent,"data-select",this.getDataPoint()))}},{key:"set_avgUnitWidth_and_x_offset",value:function(){this.avgUnitWidth=this.width/(this.xAxisLabels.length-1),this.x_offset=0}},{key:"get_all_y_values",value:function(){var t=[];return this.y.map(function(e){t=t.concat(e.values)}),t.concat(this.specific_values.map(function(t){return t.value}))}},{key:"calcYDependencies",value:function(){var t=this;this.y_min_tops=new Array(this.xAxisLabels.length).fill(9999),this.y.map(function(e){e.yUnitPositions=e.values.map(function(e){return floatTwo(t.zeroLine-e*t.multiplier)}),e.yUnitPositions.map(function(e,i){e0}),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=$.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&&($.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],_=void 0,y=void 0;t?(_=v?v.startPosition:d,y=v?v.endPosition:d):(_=d,y=f);var g=i.makeArcPath(_,y),m=makePath(g,"pie-path","none",i.colors[l]);m.style.transition="transform .3s;",i.drawArea.appendChild(m),i.slices.push(m),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:m,array:i.slices,index:i.slices.length-1},{d:i.makeArcPath(d,f)},650,"easein",null,{d:g}])}),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&&($.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 _=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,arguments[0]));_.type="heatmap",_.domain=s,_.subdomain=o,_.data=h,_.discrete_domains=u,_.count_label=d;var y=new Date;return _.start=a||addDays(y,365),v=v.slice(0,5),_.legend_colors=_.validate_colors(v)?v:["#ebedf0","#c6e48b","#7bc96f","#239a3b","#196127"],_.distribution_size=5,_.translateX=0,_}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={line:LineChart,bar:BarChart,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 $(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 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 $$1(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)$$1(n).appendChild(i);else if("around"===a){var r=$$1(n);r.parentNode.insertBefore(i,r),i.appendChild(r)}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),r=[1,.6,.2];return i&&(r=[.4,.2,0]),setGradientStop(n,"0%",e,r[0]),setGradientStop(n,"50%",e,r[1]),setGradientStop(n,"100%",e,r[2]),a}function makeHeatSquare(t,e,i,a){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"none",r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},s={className:t,x:e,y:i,width:a,height:a,fill:n};return Object.keys(r).map(function(t){s[t]=r[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 makeVertXLine(t,e,i,a){var n=createSVG("line",{x1:0,x2:0,y1:i+AXIS_TICK_LENGTH,y2:"span"===a?-1*AXIS_TICK_LENGTH:i}),r=createSVG("text",{x:0,y:i+AXIS_TICK_LENGTH+LABEL_MARGIN,dy:FONT_SIZE+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:e}),s=createSVG("g",{transform:"translate("+t+", 0)"});return s.appendChild(n),s.appendChild(r),s}function makeHoriYLine(t,e,i,a){var n=createSVG("line",{className:"",x1:-1*AXIS_TICK_LENGTH,x2:"span"===a?i+AXIS_TICK_LENGTH:AXIS_TICK_LENGTH,y1:0,y2:0}),r=createSVG("text",{x:-1*(LABEL_MARGIN+AXIS_TICK_LENGTH),y:0,dy:FONT_SIZE/2-2+"px","font-size":FONT_SIZE+"px","text-anchor":"end",innerHTML:e+""}),s=createSVG("g",{transform:"translate(0, "+t+")","stroke-opacity":1});return 0!==r&&"0"!==r||(s.style.stroke="rgba(27, 31, 35, 0.6)"),s.appendChild(n),s.appendChild(r),s}function limitColor(t){return t>255?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),r=limitColor((n>>16)+e),s=limitColor((n>>8&255)+e),o=limitColor((255&n)+e);return(a?"#":"")+(o|s<<8|r<<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,r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},s=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=r[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]);s.appendChild(h),n?o.setAttribute(l,"translate("+u+")"):o.setAttribute(l,u)}return[s,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.unit.parentNode,r=void 0,s=void 0;t[0]=e.unit;var o=animateSVGElement.apply(void 0,toConsumableArray(t)),l=slicedToArray(o,2);r=l[0],s=l[1],i.push(s),a.push([r,n]),n.replaceChild(r,e.unit),e.array?e.array[e.index]=s:e.object[e.key]=s});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 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,r=n,s=1;n>5&&(n%2!=0&&(n=++i-a),r=n/2,s=2),n<=2&&(s=n/(r=4)),0===n&&(r=5,s=1);for(var o=[],l=0;l<=r;l++)o.push(a+s*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],r=a[1],s=e?e/Math.pow(10,r):0,o=getRangeIntervals(n=n.toFixed(6),s);return o=o.map(function(t){return t*Math.pow(10,r)})}function calcIntervals(t){function e(t,e){for(var i=getIntervals(t),a=i[1]-i[0],n=0,r=1;n1&&void 0!==arguments[1]&&arguments[1],a=Math.max.apply(Math,toConsumableArray(t)),n=Math.min.apply(Math,toConsumableArray(t)),r=[];if(a>=0&&n>=0)normalize(a)[1],r=i?getIntervals(a,n):getIntervals(a);else if(a>0&&n<0){var s=Math.abs(n);a>=s?(normalize(a)[1],r=e(a,s)):(normalize(s)[1],r=e(s,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],r=(r=i?getIntervals(o,l):getIntervals(o)).reverse().map(function(t){return-1*t})}return r}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=[],r=0;r9?"":"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 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 .data-points circle{stroke:#fff;stroke-width:2}.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};s?s=s.next=o:(r=s=o,a(t,e))})}function a(i,r){try{var s=e[i](r),o=s.value;o instanceof t?Promise.resolve(o.value).then(function(t){a("next",t)},function(t){a("throw",t)}):n(s.done?"return":"normal",s.value)}catch(t){n("throw",t)}}function n(t,e){switch(t){case"return":r.resolve({value:e,done:!0});break;case"throw":r.reject(e);break;default:r.resolve({value:e,done:!1})}(r=r.next)?a(r.key,r.arg):s=null}var r,s;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=$.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]:[],r=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=r,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,AXIS_TICK_LENGTH=6,LABEL_MARGIN=4,FONT_SIZE=10,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.avgUnitWidth=t.avgUnitWidth,this.xAxisMode=t.xAxisMode,this.yAxisMode=t.yAxisMode}},{key:"bar",value:function(t,e,i,a,n,r,s){var o=this.avgUnitWidth-i.spaceWidth,l=o/s,h=t-o/2+l*r,c=getBarHeightAndYAttr(e,this.zeroLine,this.totalHeight),u=slicedToArray(c,2),p=u[0];return createSVG("rect",{className:"bar mini",style:"fill: "+a,"data-point-index":n,x:h,y:u[1],width:l,height:p})}},{key:"dot",value:function(t,e,i,a,n){return createSVG("circle",{style:"fill: "+a,"data-point-index":n,cx:t,cy:e,r:i.radius})}},{key:"xLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.xAxisMode;return makeVertXLine(t,e,this.totalHeight,i)}},{key:"yLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.yAxisMode;return makeHoriYLine(t,e,this.totalWidth,i)}},{key:"xMarker",value:function(){}},{key:"yMarker",value:function(){}},{key:"xRegion",value:function(){}},{key:"yRegion",value:function(){}}]),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:[]},BaseChart=function(){function t(e){e.height;var i=e.title,a=void 0===i?"":i,n=e.subtitle,r=void 0===n?"":n,s=(e.colors,e.isNavigable),o=void 0===s?0:s,l=(e.showLegend,e.type,e.parent);classCallCheck(this,t),this.rawChartArgs=arguments[0],this.parent="string"==typeof l?document.querySelector(l):l,this.title=a,this.subtitle=r,this.isNavigable=o,this.isNavigable&&(this.currentIndex=0),this.configure(arguments[0])}return createClass(t,[{key:"configure",value:function(t){this.setColors(),this.setMargins(t),this.config={showTooltip:1,showLegend:1,isNavigable:0,animate:0},this.state={}}},{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.makeChartArea(),this.setComponentParent(),this.makeComponentLayers(),this.renderLegend(),this.setupNavigation(t),this.renderComponents(),this.config.animate&&this.update(this.firstUpdateData)}},{key:"update",value:function(){this.refresh(),this.reRender()}},{key:"calcWidth",value:function(){this.baseWidth=getElementContentWidth(this.parent)-0,this.width=this.baseWidth-2*this.translateX}},{key:"refresh",value:function(){this.oldState=this.state?Object.assign({},this.state):{},this.prepareData(),this.reCalc(),this.refreshRenderer(),this.refreshComponents()}},{key:"makeChartArea",value:function(){this.svg=makeSVGContainer(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svg_defs=makeSVGDefs(this.svg),this.drawArea=makeSVGGroup(this.svg,this.type+"-chart","translate("+this.translateX+", "+this.translateY+")")}},{key:"prepareData",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.intermedState=this.calcIntermedState(),this.refreshComponents(),this.animateComponents(),setTimeout(function(){t.renderComponents()},400)}},{key:"calcIntermedState",value:function(){}},{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:"animateComponents",value:function(){this.components.forEach(function(t){return t.animate()})}},{key:"refreshComponents",value:function(){var t={chartState:this.state,oldChartState:this.oldState,intermedState:this.intermedState,chartRenderer:this.renderer};this.components.forEach(function(e){return e.refresh(t)})}},{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}(),ChartComponent=function(){function t(e){var i=e.layerClass,a=void 0===i?"":i,n=e.layerTransform,r=void 0===n?"":n,s=e.make,o=e.argsKeys,l=e.animate;classCallCheck(this,t),this.layerClass=a,this.layerTransform=r,this.make=s,this.argsKeys=o,this.animate=l,this.layer=void 0,this.store=[]}return createClass(t,[{key:"refresh",value:function(t){this.chartState=t.chartState,this.oldChartState=t.oldChartState,this.intermedState=t.intermedState,this.chartRenderer=t.chartRenderer}},{key:"render",value:function(){var t=this,e=this.argsKeys.map(function(e){return t.chartState[e]});e.unshift(this.chartRenderer),this.store=this.make.apply(this,toConsumableArray(e)),this.layer.textContent="",this.store.forEach(function(e){t.layer.appendChild(e)})}},{key:"setupParent",value:function(t){this.parent=t}},{key:"makeLayer",value:function(){this.layer=makeSVGGroup(this.parent,this.layerClass,this.layerTransform)}}]),t}(),IndexedChartComponent=function(t){function e(){return classCallCheck(this,e),possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return inherits(e,t),e}(ChartComponent),REPLACE_ALL_NEW_DUR=250,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"},AxisChart=function(t){function e(t){classCallCheck(this,e);var i=possibleConstructorReturn(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 inherits(e,t),createClass(e,[{key:"checkData",value:function(t){return!0}},{key:"getFirstUpdateData",value:function(t){}},{key:"calcYDependencies",value:function(){var t=this;this.y_min_tops=new Array(this.xAxisLabels.length).fill(9999),this.y.map(function(e){e.yUnitPositions=e.values.map(function(e){return floatTwo(t.zeroLine-e*t.multiplier)}),e.yUnitPositions.map(function(e,i){et.datasetLength?n.slice(0,t.datasetLength):fillArray(n,t.datasetLength-n.length,0):e,i.index=a})}},{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.label}),t.datasetsValues=t.datasets.map(function(t){return t.values}),t.yAxisLabels=calcIntervals(this.getAllYValues(),"line"===this.type),this.calcYAxisPositions()}},{key:"calcXPositions",value:function(){var t=this.state;this.setUnitWidthAndXOffset(),t.xPositions=t.xAxisLabels.map(function(e,i){return floatTwo(t.xOffset+i*t.unitWidth)})}},{key:"calcYAxisPositions",value:function(){var t=this.state,e=t.yAxisLabels;t.scaleMultiplier=this.height/getValueRange(e);var i=getIntervalSize(e)*t.scaleMultiplier;t.zeroLine=this.height-getZeroIndex(e)*i,t.yAxisPositions=e.map(function(e){return t.zeroLine-e*t.scaleMultiplier})}},{key:"setUnitWidthAndXOffset",value:function(){this.state.unitWidth=this.width/(this.state.datasetLength-1),this.state.xOffset=0}},{key:"getAllYValues",value:function(){var t;return(t=[]).concat.apply(t,toConsumableArray(this.state.datasetsValues))}},{key:"calcIntermedState",value:function(){}},{key:"refreshRenderer",value:function(){var t={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(t):this.renderer=new AxisChartRenderer(t)}},{key:"setupComponents",value:function(){this.yAxis=new ChartComponent({layerClass:"y axis",make:function(t,e,i){return e.map(function(e,a){return t.yLine(e,i[a])})},argsKeys:["yAxisPositions","yAxisLabels"],animate:function(){}}),this.xAxis=new ChartComponent({layerClass:"x axis",make:function(t,e,i){return e.map(function(e,a){return t.xLine(e,i[a])})},argsKeys:["xPositions","xAxisLabels"],animate:function(){}}),this.yMarkerLines={},this.xMarkerLines={},this.components=[this.yAxis,this.xAxis]}}]),e}(BaseChart),BarChart=function(t){function e(t){classCallCheck(this,e);var i=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="bar",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||"tick",this.config.yAxisMode=t.yAxisMode||"span"}},{key:"setUnitWidthAndXOffset",value:function(){this.state.unitWidth=this.width/(this.state.datasetLength+1),this.state.xOffset=this.state.unitWidth}},{key:"setup_values",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_values",this).call(this),this.x_offset=this.avgUnitWidth,this.unit_args={type:"bar",args:{spaceWidth:this.avgUnitWidth/2}}}},{key:"bind_units",value:function(t){var e=this;t.map(function(t){t.addEventListener("click",function(){var i=t.getAttribute("data-point-index");e.updateCurrentDataPoint(i)})})}},{key:"update_overlay",value:function(t){var e=this,i=[];Object.keys(t.attributes).map(function(e){i.push(t.attributes[e])}),i.filter(function(t){return t.specified}).map(function(t){e.overlay.setAttribute(t.name,t.nodeValue)}),this.overlay.style.fill="#000000",this.overlay.style.opacity="0.4"}},{key:"onLeftArrow",value:function(){this.updateCurrentDataPoint(this.currentIndex-1)}},{key:"onRightArrow",value:function(){this.updateCurrentDataPoint(this.currentIndex+1)}}]),e}(AxisChart),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.dot_radius=t.dot_radius||4,this.config.heatline=t.heatline||0,this.config.region_fill=t.region_fill||0,this.config.show_dots=t.show_dots||1}},{key:"setupPreUnitLayers",value:function(){var t=this;this.paths_groups=[],this.y.map(function(e,i){t.paths_groups[i]=makeSVGGroup(t.drawArea,"path-group path-group-"+i)})}},{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.dot_radius}}}},{key:"makeDatasetUnits",value:function(t,i,a,n,r,s,o,l){this.show_dots&&get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"makeDatasetUnits",this).call(this,t,i,a,n,r,s,o,l)}},{key:"make_paths",value:function(){var t=this;this.y.map(function(e){t.make_path(e,t.xPositions,e.yUnitPositions,e.color||t.colors[e.index])})}},{key:"make_path",value:function(t,e,i,a){var n=i.map(function(t,i){return e[i]+","+t}).join("L");if(this.paths_groups[t.index].textContent="",t.path=makePath("M"+n,"line-graph-path",a),this.paths_groups[t.index].appendChild(t.path),this.heatline){var r=makeGradient(this.svg_defs,a);t.path.style.stroke="url(#"+r+")"}this.region_fill&&this.fill_region_for_dataset(t,a,n)}},{key:"fill_region_for_dataset",value:function(t,e,i){var a=makeGradient(this.svg_defs,e,!0),n="M0,"+this.zeroLine+"L"+i+"L"+this.width+","+this.zeroLine;t.regionPath=makePath(n,"region-fill","none","url(#"+a+")"),this.paths_groups[t.index].appendChild(t.regionPath)}}]),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.dot_radius?i.dot_radius=t.dot_radius:i.dot_radius=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.dot_radius}}}},{key:"make_paths",value:function(){}},{key:"make_path",value:function(){}}]),e}(LineChart),PercentageChart=function(t){function e(t){classCallCheck(this,e);var i=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="percentage",i.max_slices=10,i.max_legend_points=6,i.setup(),i}return inherits(e,t),createClass(e,[{key:"makeChartArea",value:function(){this.chartWrapper.className+=" graph-focus-margin",this.chartWrapper.style.marginTop="45px",this.statsWrapper.className+=" graph-focus-margin",this.statsWrapper.style.marginBottom="30px",this.statsWrapper.style.paddingTop="0px",this.chartDiv=$.create("div",{className:"div",inside:this.chartWrapper}),this.chart=$.create("div",{className:"progress-chart",inside:this.chartDiv})}},{key:"setupLayers",value:function(){this.percentageBar=$.create("div",{className:"progress",inside:this.chart})}},{key:"setup_values",value:function(){var t=this;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:"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=$.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),r=n.left-a.left+e.offsetWidth/2,s=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(r,s,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&&($.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,r=this.clockWise;return"M"+i+" "+a+" L"+(i+t.x)+" "+(a+t.y)+" A "+n+" "+n+" 0 0 "+(r?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 r=this.slicesProperties||[];this.slices=[],this.elements_to_animate=[],this.slicesProperties=[];var s=180-this.startAngle;this.slice_totals.map(function(o,l){var h=s,c=o/i.grand_total*FULL_ANGLE,u=n?-c:c,p=s+=u,d=e.getPositionByAngle(h,a),f=e.getPositionByAngle(p,a),v=t&&r[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 r=getOffset(this.svg),s=a.pageX-r.left+10,o=a.pageY-r.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(s,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&&($.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,r=void 0===n?"":n,s=t.subdomain,o=void 0===s?"":s,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=r,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[r,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),r=t.chartWrapper.getBoundingClientRect(),s=e.target.getBoundingClientRect(),o=parseInt(e.target.getAttribute("width")),l=s.left-r.left+(o+2)/2,h=s.top-r.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={line:LineChart,bar:BarChart,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 3d7c4d6..d0082ca 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 i(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 n(t){var e=window.getComputedStyle(t),i=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return t.clientWidth-i}function a(t,e,i){var n=document.createEvent("HTMLEvents");n.initEvent(e,!0,!0);for(var a in i)n[a]=i[a];return t.dispatchEvent(n)}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*G)):(a=e,0===(n=t-e)&&(n=i*G)),[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 u(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":R(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 c(t,e){return u("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function p(t,e,i,n){return u("stop",{inside:t,style:"stop-color: "+i,offset:e,"stop-opacity":n})}function d(t,e,i,n){return u("svg",{className:e,inside:t,width:i,height:n})}function f(t){return u("defs",{inside:t})}function v(t,e){return u("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function y(t){return u("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 g(t,e){var i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],n="path-fill-gradient-"+e,a=c(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 _(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]}),u("rect",r)}function m(t,e,i,n){return u("text",{className:t,x:e,y:i,dy:tt/2+"px","font-size":tt+"px",innerHTML:n})}function x(t,e,i,n){var a=u("line",{x1:0,x2:0,y1:i+Q,y2:"span"===n?-1*Q:i}),s=u("text",{x:0,y:i+Q+Z,dy:tt+"px","font-size":tt+"px","text-anchor":"middle",innerHTML:e}),r=u("g",{transform:"translate("+t+", 0)"});return r.appendChild(a),r.appendChild(s),r}function b(t,e,i,n){var a=u("line",{className:"",x1:-1*Q,x2:"span"===n?i+Q:Q,y1:0,y2:0}),s=u("text",{x:-1*(Z+Q),y:0,dy:tt/2-2+"px","font-size":tt+"px","text-anchor":"end",innerHTML:e+""}),r=u("g",{transform:"translate(0, "+t+")","stroke-opacity":1});return 0!==s&&"0"!==s||(r.style.stroke="rgba(27, 31, 35, 0.6)"),r.appendChild(a),r.appendChild(s),r}function k(t){return t>255?255:t<0?0:t}function w(t,e){var i=at(t),n=!1;"#"==i[0]&&(i=i.slice(1),n=!0);var a=parseInt(i,16),s=k((a>>16)+e),r=k((a>>8&255)+e),o=k((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 L(t,e,i){if(t!==e){st.includes(t)||console.error("'"+t+"' is not a valid chart type."),rt[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var n=ot[e].includes(t);return new bt({parent:i.parent,title:i.title,data:i.data,type:t,height:i.height,colors:n?i.colors:void 0})}}function P(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:ct[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 C(t,e){t.style.transform=e,t.style.webkitTransform=e,t.style.msTransform=e,t.style.mozTransform=e,t.style.oTransform=e}function M(t,e){var i=[],n=[];e.map(function(t){var e=t[0],a=e.unit.parentNode,s=void 0,r=void 0;t[0]=e.unit;var o=P.apply(void 0,K(t)),l=J(o,2);s=l[0],r=l[1],i.push(r),n.push([s,a]),a.replaceChild(s,e.unit),e.array?e.array[e.index]=r:e.object[e.key]=r});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 W(t,e,i){if(0!==i.length){var n=M(e,i);e.parentNode==t&&(t.removeChild(e),t.appendChild(n)),setTimeout(function(){n.parentNode==t&&(t.removeChild(n),t.appendChild(e))},ht)}}function D(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 T(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=D(t),n=J(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 N(t){function e(t,e){for(var i=T(t),n=i[1]-i[0],a=0,s=1;a1&&void 0!==arguments[1]&&arguments[1],n=Math.max.apply(Math,K(t)),a=Math.min.apply(Math,K(t)),s=[];if(n>=0&&a>=0)D(n)[1],s=i?T(n,a):T(n);else if(n>0&&a<0){var r=Math.abs(a);n>=r?(D(n)[1],s=e(n,r)):(D(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);D(o)[1],s=(s=i?T(o,l):T(o)).reverse().map(function(t){return-1*t})}return s}function U(t,e){for(var i=Math.max.apply(Math,K(t)),n=1/(e-1),a=[],s=0;s9?"":"0")+e,(i>9?"":"0")+i,t.getFullYear()].join("-")}function E(t,e){return Math.ceil(Y(t,e)/7)}function Y(t,e){return(z(e)-z(t))/864e5}function H(t,e){t.setDate(t.getDate()+e)}function I(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return xt[t]?new xt[t](e):new ft(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 .data-points circle{stroke:#fff;stroke-width:2}.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 R="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},F=(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")}),X=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}(),G=.01,Q=6,Z=4,tt=10,et=function(){function t(e){F(this,t),this.updateState(e)}return X(t,[{key:"updateState",value:function(t){this.totalHeight=t.totalHeight,this.totalWidth=t.totalWidth,this.zeroLine=t.zeroLine,this.avgUnitWidth=t.avgUnitWidth,this.xAxisMode=t.xAxisMode,this.yAxisMode=t.yAxisMode}},{key:"bar",value:function(t,e,i,n,a,s,r){var l=this.avgUnitWidth-i.spaceWidth,h=l/r,c=t-l/2+h*s,p=o(e,this.zeroLine,this.totalHeight),d=J(p,2),f=d[0];return u("rect",{className:"bar mini",style:"fill: "+n,"data-point-index":a,x:c,y:d[1],width:h,height:f})}},{key:"dot",value:function(t,e,i,n,a){return u("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]:this.xAxisMode;return x(t,e,this.totalHeight,i)}},{key:"yLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.yAxisMode;return b(t,e,this.totalWidth,i)}},{key:"xMarker",value:function(){}},{key:"yMarker",value:function(){}},{key:"xRegion",value:function(){}},{key:"yRegion",value:function(){}}]),t}(),it={"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"},nt=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],at=function(t){return it[t]||t},st=["line","scatter","bar","percentage","heatmap","pie"],rt={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:[]},ot={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},lt=function(){function e(t){t.height;var i=t.title,n=void 0===i?"":i,a=t.subtitle,s=void 0===a?"":a,r=(t.colors,t.isNavigable),o=void 0===r?0:r,l=(t.type,t.parent);F(this,e),this.rawChartArgs=arguments[0],this.parent="string"==typeof l?document.querySelector(l):l,this.title=n,this.subtitle=s,this.isNavigable=o,this.isNavigable&&(this.currentIndex=0),this.setupConfiguration()}return X(e,[{key:"setupConfiguration",value:function(){this.setColors(),this.setMargins(),this.config={showTooltip:1,showLegend:1,isNavigable:0,animate:1}}},{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 $({parent:this.chartWrapper,colors:this.colors}),this.bindTooltip()}},{key:"draw",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calc(),this.refreshRenderer(),this.setupComponents(),this.makeChartArea(),this.makeLayers(),this.renderComponents(),this.renderLegend(),this.setupNavigation(t),this.config.animate&&this.update(this.firstUpdateData)}},{key:"update",value:function(){this.reCalc(),this.reRender()}},{key:"refreshRenderer",value:function(){}},{key:"calcWidth",value:function(){this.baseWidth=n(this.parent)-0,this.width=this.baseWidth-2*this.translateX}},{key:"calc",value:function(){this.calcWidth(),this.reCalc()}},{key:"makeChartArea",value:function(){this.svg=d(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svg_defs=f(this.svg),this.drawArea=v(this.svg,this.type+"-chart","translate("+this.translateX+", "+this.translateY+")")}},{key:"makeLayers",value:function(){var t=this;this.components.forEach(function(e){e.layer=t.makeLayer(e.layerClass)})}},{key:"calculateValues",value:function(){}},{key:"renderComponents",value:function(){this.components.forEach(function(t){t.store=t.make.apply(t,K(t.makeArgs)),t.layer.textContent="",t.store.forEach(function(e){t.layer.appendChild(e)})})}},{key:"reCalc",value:function(){}},{key:"reRender",value:function(){var t=this;if(!(!(arguments.length>0&&void 0!==arguments[0])||arguments[0]))return void this.renderComponents();this.animateComponents(),setTimeout(function(){t.renderComponents()},400)}},{key:"animateComponents",value:function(){this.intermedValues=this.calcIntermediateValues(),this.components.forEach(function(t){})}},{key:"calcInitStage",value:function(){}},{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){i(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:"makeLayer",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return v(this.drawArea,t,e)}},{key:"getDifferentChart",value:function(t){return L(t,this.type,this.rawChartArgs)}}]),e}(),ht=250,ut=function(){var t=function(t,e,i,n){this.totalHeight=t,this.totalWidth=e,this.avgUnitWidth=n,this.zeroLine=i};return t.prototype={bar: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=J(l,2);return e=s+r*n,[t,{width:r,height:h[0],x:e,y:h[1]},350,"easein"]},dot:function(t,e,i){return[t,{cx:e,cy:i},350,"easein"]},path:function(t,e){var i=[],n=[{unit:t.path,object:t,key:"path"},{d:"M"+e},650,"easein"];if(i.push(n),t.regionPath){var a="0,"+this.zeroLine+"L",s="L"+this.totalWidth+", "+this.zeroLine,r=[{unit:t.regionPath,object:t,key:"regionPath"},{d:"M"+a+e+s},650,"easein"];i.push(r)}return i},translate:function(t,e,i,n){return[{unit:t,array:[0],index:0},{transform:i.join(", ")},n,"easein","translate",{transform:e.join(", ")}]},verticalLine:function(t,e,i){return this.translate(t,[i,0],[e,0],350)},horizontalLine:function(t,e,i){return this.translate(t,[0,i],[0,e],350)}},t}(),ct={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"},pt=function(t){function i(t){F(this,i);var e=V(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,t));return e.is_series=t.is_series,e.format_tooltip_y=t.format_tooltip_y,e.format_tooltip_x=t.format_tooltip_x,e.zeroLine=e.height,e}return q(i,t),X(i,[{key:"parseData",value:function(){var t=this.rawChartArgs;return this.xAxisLabels=t.data.labels||[],this.y=t.data.datasets||[],this.y.forEach(function(t,e){t.index=e},this),!0}},{key:"reCalc",value:function(){this.oldValues=["everything"],this.datasetsLabels=[],this.datasetsValues=[[[12,34,68],[10,5,46]],[[20,20,20]]],this.yAxisPositions=[this.height,this.height/2,0],this.yAxisLabels=["0","5","10"],this.xPositions=[0,this.width/2,this.width],this.xAxisLabels=["0","5","10"]}},{key:"calcInitStage",value:function(){}},{key:"calcIntermediateValues",value:function(){}},{key:"refreshRenderer",value:function(){this.renderer=new et({totalHeight:this.height,totalWidth:this.width,zeroLine:this.zeroLine,avgUnitWidth:this.avgUnitWidth,xAxisMode:this.xAxisMode,yAxisMode:this.yAxisMode})}},{key:"setupComponents",value:function(){var t=this;this.yAxis={layerClass:"y axis",layer:void 0,make:t.makeYLines.bind(t),makeArgs:[t.yAxisPositions,t.yAxisLabels],store:[],animate:t.animateYLines},this.xAxis={layerClass:"x axis",layer:void 0,make:t.makeXLines.bind(t),makeArgs:[t.xPositions,t.xAxisLabels],store:[],animate:t.animateXLines},this.yMarkerLines={},this.xMarkerLines={},this.components=[this.yAxis,this.xAxis]}},{key:"setup_values",value:function(){this.data.datasets.map(function(t){t.values=t.values.map(function(t){return isNaN(t)?0:t})}),this.setup_x(),this.setup_y()}},{key:"setup_x",value:function(){var t=this;this.set_avgUnitWidth_and_x_offset(),this.xPositions&&(this.x_old_axis_positions=this.xPositions.slice()),this.xPositions=this.xAxisLabels.map(function(e,i){return s(t.x_offset+i*t.avgUnitWidth)}),this.x_old_axis_positions||(this.x_old_axis_positions=this.xPositions.slice())}},{key:"setup_y",value:function(){var t=this;this.yAxisLabels&&(this.y_old_axis_values=this.yAxisLabels.slice());var e=this.get_all_y_values();this.y_sums&&this.y_sums.length>0&&(e=e.concat(this.y_sums)),this.yAxisLabels=N(e,"line"===this.type),this.y_old_axis_values||(this.y_old_axis_values=this.yAxisLabels.slice());var i=this.yAxisLabels,n=i[i.length-1]-i[0];this.multiplier&&(this.old_multiplier=this.multiplier),this.multiplier=this.height/n,this.old_multiplier||(this.old_multiplier=this.multiplier);var a=i[1]-i[0],s=a*this.multiplier,r=void 0;r=i.indexOf(0)>=0?i.indexOf(0):i[0]>0?-1*i[0]/a:-1*i[i.length-1]/a+(i.length-1),this.zeroLine&&(this.old_zeroLine=this.zeroLine),this.zeroLine=this.height-r*s,this.old_zeroLine||(this.old_zeroLine=this.zeroLine),this.yAxisPositions&&(this.oldYAxisPositions=this.yAxisPositions),this.yAxisPositions=this.yAxisLabels.map(function(e){return t.zeroLine-e*t.multiplier}),this.oldYAxisPositions||(this.oldYAxisPositions=this.yAxisPositions)}},{key:"makeXLines",value:function(t,e){var i=this;return t.map(function(t,n){return i.renderer.xLine(t,e[n])})}},{key:"makeYLines",value:function(t,e){var i=this;return t.map(function(t,n){return i.renderer.yLine(t,e[n])})}},{key:"draw_graph",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return this.raw_chart_args.hasOwnProperty("init")&&!this.raw_chart_args.init?void this.y.map(function(e,i){e.svg_units=[],t.make_path&&t.make_path(e,t.xPositions,e.yUnitPositions,t.colors[i]),t.makeUnits(e),t.calcYDependencies()}):e?void this.draw_new_graph_and_animate():void this.y.map(function(e,i){e.svg_units=[],t.make_path&&t.make_path(e,t.xPositions,e.yUnitPositions,t.colors[i]),t.makeUnits(e)})}},{key:"draw_new_graph_and_animate",value:function(){var t=this,e=[];this.y.map(function(i,n){i.yUnitPositions=new Array(i.values.length).fill(t.zeroLine),e.push({values:i.values}),i.svg_units=[],t.make_path&&t.make_path(i,t.xPositions,i.yUnitPositions,t.colors[n]),t.makeUnits(i)}),setTimeout(function(){t.updateData(e)},350)}},{key:"setupNavigation",value:function(t){var e=this;t?setTimeout(function(){B(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"setupNavigation",e).call(e,t)},500):B(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"setupNavigation",this).call(this,t)}},{key:"makeUnits",value:function(t){this.makeDatasetUnits(this.xPositions,t.yUnitPositions,this.colors[t.index],t.index,this.y.length)}},{key:"makeDatasetUnits",value:function(t,e,i,n,a,s,r,o){s||(s=this.svg_units_groups[n]),r||(r=this.y[n].svg_units),o||(o=this.unit_args),s.textContent="",r.length=0;var l=new et(this.height,this.zeroLine,this.avgUnitWidth);e.map(function(e,h){var u=l[o.type](t[h],e,o.args,i,h,n,a);s.appendChild(u),r.push(u)}),this.isNavigable&&this.bind_units(r)}},{key:"bindTooltip",value:function(){var t=this;this.chartWrapper.addEventListener("mousemove",function(i){var n=e(t.chartWrapper),a=i.pageX-n.left-t.translateX;i.pageY-n.top-t.translateY=0;a--){var s=this.xPositions[a];if(t>s-this.avgUnitWidth/2){var r=s+this.translateX,o=this.y_min_tops[a]+this.translateY,l=i[a],h=this.y.map(function(t,i){return{title:t.title,value:n?e.format_tooltip_y(t.values[a]):t.values[a],color:e.colors[i]}});this.tip.set_values(r,o,l,"",h),this.tip.show_tip();break}}}}},{key:"updateData",value:function(t,e){e||(e=this.xAxisLabels),this.updating=!0,this.old_x_values=this.xAxisLabels.slice(),this.old_y_axis_tops=this.y.map(function(t){return t.yUnitPositions.slice()}),this.old_y_values=this.y.map(function(t){return t.values}),t&&this.y.map(function(e){e.values=t[e.index].values}),e&&(this.xAxisLabels=e),this.setup_x(),this.setup_y(),this.calcYDependencies(),this.animator=new ut(this.height,this.width,this.zeroLine,this.avgUnitWidth),this.animate_graphs(),this.updating=!1}},{key:"animate_graphs",value:function(){var t=this;this.elements_to_animate=[];var e=l(this.x_old_axis_positions.slice(),this.xPositions.slice()),i=J(e,2),n=i[0],a=i[1],s=l(this.oldYAxisPositions.slice(),this.yAxisPositions.slice()),r=J(s,2),o=r[0],h=r[1],u=this.xAxisLabels.slice(),c=this.yAxisLabels.slice(),p=this.xPositions.slice().length-this.x_old_axis_positions.slice().length;p>0&&this.makeXLines(n,u),this.makeYLines(o,c),0!==p&&this.animateXLines(n,a),this.animateYLines(o,h),this.y.map(function(e){var i=l(t.old_y_axis_tops[e.index].slice(),e.yUnitPositions.slice()),s=J(i,2),r=s[0],o=s[1];p>0&&(t.make_path&&t.make_path(e,n,r,t.colors[e.index]),t.makeDatasetUnits(n,r,t.colors[e.index],e.index,t.y.length)),e.path&&t.animate_path(e,a,o),t.animate_units(e,a,o)}),W(this.chartWrapper,this.svg,this.elements_to_animate),setTimeout(function(){t.y.map(function(e){t.make_path&&t.make_path(e,t.xPositions,e.yUnitPositions,t.colors[e.index]),t.makeUnits(e),t.makeYLines(t.yAxisPositions,t.yAxisLabels),t.makeXLines(t.xPositions,t.xAxisLabels)})},400)}},{key:"animate_path",value:function(t,e,i){var n=i.map(function(t,i){return e[i]+","+t});this.elements_to_animate=this.elements_to_animate.concat(this.animator.path(t,n.join("L")))}},{key:"animate_units",value:function(t,e,i){var n=this,a=this.unit_args.type;t.svg_units.map(function(s,r){void 0!==e[r]&&void 0!==i[r]&&n.elements_to_animate.push(n.animator[a]({unit:s,array:t.svg_units,index:r},e[r],i[r],t.index,n.y.length))})}},{key:"animateXLines",value:function(t,e){var i=this;this.xAxisLines.map(function(n,a){i.elements_to_animate.push(i.animator.verticalLine(n,e[a],t[a]))})}},{key:"animateYLines",value:function(t,e){var i=this;this.yAxisLines.map(function(n,a){i.elements_to_animate.push(i.animator.horizontalLine(n,e[a],t[a]))})}},{key:"animateYAnnotations",value:function(){}},{key:"add_data_point",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.xAxisLabels.length,n=this.y.map(function(t){return{values:t.values}});n.map(function(e,n){e.values.splice(i,0,t[n])});var a=this.xAxisLabels.slice();a.splice(i,0,e),this.updateData(n,a)}},{key:"remove_data_point",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.xAxisLabels.length-1;if(!(this.xAxisLabels.length<3)){var e=this.y.map(function(t){return{values:t.values}});e.map(function(e){e.values.splice(t,1)});var i=this.xAxisLabels.slice();i.splice(t,1),this.updateData(e,i)}}},{key:"getDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.currentIndex,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.currentIndex&&(this.currentIndex=t,a(this.parent,"data-select",this.getDataPoint()))}},{key:"set_avgUnitWidth_and_x_offset",value:function(){this.avgUnitWidth=this.width/(this.xAxisLabels.length-1),this.x_offset=0}},{key:"get_all_y_values",value:function(){var t=[];return this.y.map(function(e){t=t.concat(e.values)}),t.concat(this.specific_values.map(function(t){return t.value}))}},{key:"calcYDependencies",value:function(){var t=this;this.y_min_tops=new Array(this.xAxisLabels.length).fill(9999),this.y.map(function(e){e.yUnitPositions=e.values.map(function(e){return s(t.zeroLine-e*t.multiplier)}),e.yUnitPositions.map(function(e,i){e0}),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}(lt),gt=Math.PI/180,_t=function(i){function n(t){F(this,n);var e=V(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 q(n,i),X(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],g=void 0,_=void 0;t?(g=v?v.startPosition:d,_=v?v.endPosition:d):(g=d,_=f);var m=e.makeArcPath(g,_),x=y(m,"pie-path","none",e.colors[l]);x.style.transition="transform .3s;",e.drawArea.appendChild(x),e.slices.push(x),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:x,array:e.slices,index:e.slices.length-1},{d:e.makeArcPath(d,f)},650,"easein",null,{d:m}])}),t&&W(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){C(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])+": ",u=(100*this.slice_totals[i]/this.grand_total).toFixed(1);this.tip.set_values(o,l,h,u+"%"),this.tip.show_tip()}else C(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*gt)*e,y:Math.cos(t*gt)*e}}}]),n}(lt),mt=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;F(this,e);var y=V(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||H(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 q(e,t),X(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()&&H(this.first_week_start,-1*this.first_week_start.getDay()),7!==this.last_week_start.getDay()&&H(this.last_week_start,-1*this.last_week_start.getDay()),this.no_of_cols=E(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=U(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;y.getMonth()-t.getMonth()&&(n=1,this.discrete_domains&&(a=1),this.month_start_points.push(13+12*(e+a))),t=y}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=m("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}(lt),xt={line:ft,bar:dt,scatter:vt,percentage:yt,heatmap:mt,pie:_t},bt=function t(e){return F(this,t),I(e.type,arguments[0])};return bt}(); +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 i(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 n(t){var e=window.getComputedStyle(t),i=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return t.clientWidth-i}function a(t){return parseFloat(t.toFixed(2))}function s(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 r(t,e,i){var n=void 0,a=void 0;return t<=e?(a=t,0===(n=e-t)&&(a-=n=i*Q)):(a=e,0===(n=t-e)&&(n=i*Q)),[n,a]}function o(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function l(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)o(a).appendChild(i);else if("around"===n){var s=o(a);s.parentNode.insertBefore(i,s),i.appendChild(s)}else"styles"===n?"object"===(void 0===a?"undefined":B(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 h(t,e){return l("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function c(t,e,i,n){return l("stop",{inside:t,style:"stop-color: "+i,offset:e,"stop-opacity":n})}function u(t,e,i,n){return l("svg",{className:e,inside:t,width:i,height:n})}function p(t){return l("defs",{inside:t})}function d(t,e){return l("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function f(t){return l("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 v(t,e){var i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],n="path-fill-gradient-"+e,a=h(t,n),s=[1,.6,.2];return i&&(s=[.4,.2,0]),c(a,"0%",e,s[0]),c(a,"50%",e,s[1]),c(a,"100%",e,s[2]),n}function g(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]}),l("rect",r)}function y(t,e,i,n){return l("text",{className:t,x:e,y:i,dy:et/2+"px","font-size":et+"px",innerHTML:n})}function m(t,e,i,n){var a=l("line",{x1:0,x2:0,y1:i+Z,y2:"span"===n?-1*Z:i}),s=l("text",{x:0,y:i+Z+tt,dy:et+"px","font-size":et+"px","text-anchor":"middle",innerHTML:e}),r=l("g",{transform:"translate("+t+", 0)"});return r.appendChild(a),r.appendChild(s),r}function _(t,e,i,n){var a=l("line",{className:"",x1:-1*Z,x2:"span"===n?i+Z:Z,y1:0,y2:0}),s=l("text",{x:-1*(tt+Z),y:0,dy:et/2-2+"px","font-size":et+"px","text-anchor":"end",innerHTML:e+""}),r=l("g",{transform:"translate(0, "+t+")","stroke-opacity":1});return 0!==s&&"0"!==s||(r.style.stroke="rgba(27, 31, 35, 0.6)"),r.appendChild(a),r.appendChild(s),r}function b(t){return t>255?255:t<0?0:t}function x(t,e){var i=st(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 k(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t)}function w(t,e,i){if(t!==e){rt.includes(t)||console.error("'"+t+"' is not a valid chart type."),ot[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var n=lt[e].includes(t);return new kt({parent:i.parent,title:i.title,data:i.data,type:t,height:i.height,colors:n?i.colors:void 0})}}function A(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 C(t,e){t.style.transform=e,t.style.webkitTransform=e,t.style.msTransform=e,t.style.mozTransform=e,t.style.oTransform=e}function L(t,e){var i=[],n=[];e.map(function(t){var e=t[0],a=e.unit.parentNode,s=void 0,r=void 0;t[0]=e.unit;var o=A.apply(void 0,$(t)),l=J(o,2);s=l[0],r=l[1],i.push(r),n.push([s,a]),a.replaceChild(s,e.unit),e.array?e.array[e.index]=r:e.object[e.key]=r});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 M(t,e,i){if(0!==i.length){var n=L(e,i);e.parentNode==t&&(t.removeChild(e),t.appendChild(n)),setTimeout(function(){n.parentNode==t&&(t.removeChild(n),t.appendChild(e))},ut)}}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 P(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=S(t),n=J(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 W(t){function e(t,e){for(var i=P(t),n=i[1]-i[0],a=0,s=1;a1&&void 0!==arguments[1]&&arguments[1],n=Math.max.apply(Math,$(t)),a=Math.min.apply(Math,$(t)),s=[];if(n>=0&&a>=0)S(n)[1],s=i?P(n,a):P(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?P(o,l):P(o)).reverse().map(function(t){return-1*t})}return s}function T(t){var e=D(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 D(t){return t[1]-t[0]}function N(t){return t[t.length-1]-t[0]}function j(t,e){for(var i=Math.max.apply(Math,$(t)),n=1/(e-1),a=[],s=0;s9?"":"0")+e,(i>9?"":"0")+i,t.getFullYear()].join("-")}function H(t,e){return Math.ceil(U(t,e)/7)}function U(t,e){return(z(e)-z(t))/864e5}function F(t,e){t.setDate(t.getDate()+e)}function I(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return xt[t]?new xt[t](e):new vt(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 .data-points circle{stroke:#fff;stroke-width:2}.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 B="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},Y=(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")}),X=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}(),Q=.01,Z=6,tt=4,et=10,it=function(){function t(e){Y(this,t),this.refreshState(e)}return X(t,[{key:"refreshState",value:function(t){this.totalHeight=t.totalHeight,this.totalWidth=t.totalWidth,this.zeroLine=t.zeroLine,this.avgUnitWidth=t.avgUnitWidth,this.xAxisMode=t.xAxisMode,this.yAxisMode=t.yAxisMode}},{key:"bar",value:function(t,e,i,n,a,s,o){var h=this.avgUnitWidth-i.spaceWidth,c=h/o,u=t-h/2+c*s,p=r(e,this.zeroLine,this.totalHeight),d=J(p,2),f=d[0];return l("rect",{className:"bar mini",style:"fill: "+n,"data-point-index":a,x:u,y:d[1],width:c,height:f})}},{key:"dot",value:function(t,e,i,n,a){return l("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]:this.xAxisMode;return m(t,e,this.totalHeight,i)}},{key:"yLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.yAxisMode;return _(t,e,this.totalWidth,i)}},{key:"xMarker",value:function(){}},{key:"yMarker",value:function(){}},{key:"xRegion",value:function(){}},{key:"yRegion",value:function(){}}]),t}(),nt={"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"},at=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],st=function(t){return nt[t]||t},rt=["line","scatter","bar","percentage","heatmap","pie"],ot={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:[]},lt={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},ht=function(){function e(t){t.height;var i=t.title,n=void 0===i?"":i,a=t.subtitle,s=void 0===a?"":a,r=(t.colors,t.isNavigable),o=void 0===r?0:r,l=(t.showLegend,t.type,t.parent);Y(this,e),this.rawChartArgs=arguments[0],this.parent="string"==typeof l?document.querySelector(l):l,this.title=n,this.subtitle=s,this.isNavigable=o,this.isNavigable&&(this.currentIndex=0),this.configure(arguments[0])}return X(e,[{key:"configure",value:function(t){this.setColors(),this.setMargins(t),this.config={showTooltip:1,showLegend:1,isNavigable:0,animate:0},this.state={}}},{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 G({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.makeChartArea(),this.setComponentParent(),this.makeComponentLayers(),this.renderLegend(),this.setupNavigation(t),this.renderComponents(),this.config.animate&&this.update(this.firstUpdateData)}},{key:"update",value:function(){this.refresh(),this.reRender()}},{key:"calcWidth",value:function(){this.baseWidth=n(this.parent)-0,this.width=this.baseWidth-2*this.translateX}},{key:"refresh",value:function(){this.oldState=this.state?Object.assign({},this.state):{},this.prepareData(),this.reCalc(),this.refreshRenderer(),this.refreshComponents()}},{key:"makeChartArea",value:function(){this.svg=u(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svg_defs=p(this.svg),this.drawArea=d(this.svg,this.type+"-chart","translate("+this.translateX+", "+this.translateY+")")}},{key:"prepareData",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.intermedState=this.calcIntermedState(),this.refreshComponents(),this.animateComponents(),setTimeout(function(){t.renderComponents()},400)}},{key:"calcIntermedState",value:function(){}},{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:"animateComponents",value:function(){this.components.forEach(function(t){return t.animate()})}},{key:"refreshComponents",value:function(){var t={chartState:this.state,oldChartState:this.oldState,intermedState:this.intermedState,chartRenderer:this.renderer};this.components.forEach(function(e){return e.refresh(t)})}},{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){i(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 w(t,this.type,this.rawChartArgs)}}]),e}(),ct=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.argsKeys,l=e.animate;Y(this,t),this.layerClass=n,this.layerTransform=s,this.make=r,this.argsKeys=o,this.animate=l,this.layer=void 0,this.store=[]}return X(t,[{key:"refresh",value:function(t){this.chartState=t.chartState,this.oldChartState=t.oldChartState,this.intermedState=t.intermedState,this.chartRenderer=t.chartRenderer}},{key:"render",value:function(){var t=this,e=this.argsKeys.map(function(e){return t.chartState[e]});e.unshift(this.chartRenderer),this.store=this.make.apply(this,$(e)),this.layer.textContent="",this.store.forEach(function(e){t.layer.appendChild(e)})}},{key:"setupParent",value:function(t){this.parent=t}},{key:"makeLayer",value:function(){this.layer=d(this.parent,this.layerClass,this.layerTransform)}}]),t}(),ut=(function(t){function e(){return Y(this,e),V(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}K(e,t)}(ct),250),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(t){function e(t){Y(this,e);var i=V(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 K(e,t),X(e,[{key:"checkData",value:function(t){return!0}},{key:"getFirstUpdateData",value:function(t){}},{key:"calcYDependencies",value:function(){var t=this;this.y_min_tops=new Array(this.xAxisLabels.length).fill(9999),this.y.map(function(e){e.yUnitPositions=e.values.map(function(e){return a(t.zeroLine-e*t.multiplier)}),e.yUnitPositions.map(function(e,i){et.datasetLength?a.slice(0,t.datasetLength):s(a,t.datasetLength-a.length,0):e,i.index=n})}},{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.label}),t.datasetsValues=t.datasets.map(function(t){return t.values}),t.yAxisLabels=W(this.getAllYValues(),"line"===this.type),this.calcYAxisPositions()}},{key:"calcXPositions",value:function(){var t=this.state;this.setUnitWidthAndXOffset(),t.xPositions=t.xAxisLabels.map(function(e,i){return a(t.xOffset+i*t.unitWidth)})}},{key:"calcYAxisPositions",value:function(){var t=this.state,e=t.yAxisLabels;t.scaleMultiplier=this.height/N(e);var i=D(e)*t.scaleMultiplier;t.zeroLine=this.height-T(e)*i,t.yAxisPositions=e.map(function(e){return t.zeroLine-e*t.scaleMultiplier})}},{key:"setUnitWidthAndXOffset",value:function(){this.state.unitWidth=this.width/(this.state.datasetLength-1),this.state.xOffset=0}},{key:"getAllYValues",value:function(){var t;return(t=[]).concat.apply(t,$(this.state.datasetsValues))}},{key:"calcIntermedState",value:function(){}},{key:"refreshRenderer",value:function(){var t={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(t):this.renderer=new it(t)}},{key:"setupComponents",value:function(){this.yAxis=new ct({layerClass:"y axis",make:function(t,e,i){return e.map(function(e,n){return t.yLine(e,i[n])})},argsKeys:["yAxisPositions","yAxisLabels"],animate:function(){}}),this.xAxis=new ct({layerClass:"x axis",make:function(t,e,i){return e.map(function(e,n){return t.xLine(e,i[n])})},argsKeys:["xPositions","xAxisLabels"],animate:function(){}}),this.yMarkerLines={},this.xMarkerLines={},this.components=[this.yAxis,this.xAxis]}}]),e}(ht),ft=function(t){function e(t){Y(this,e);var i=V(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="bar",i.setup(),i}return K(e,t),X(e,[{key:"configure",value:function(t){q(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:"setUnitWidthAndXOffset",value:function(){this.state.unitWidth=this.width/(this.state.datasetLength+1),this.state.xOffset=this.state.unitWidth}},{key:"setup_values",value:function(){q(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_values",this).call(this),this.x_offset=this.avgUnitWidth,this.unit_args={type:"bar",args:{spaceWidth:this.avgUnitWidth/2}}}},{key:"bind_units",value:function(t){var e=this;t.map(function(t){t.addEventListener("click",function(){var i=t.getAttribute("data-point-index");e.updateCurrentDataPoint(i)})})}},{key:"update_overlay",value:function(t){var e=this,i=[];Object.keys(t.attributes).map(function(e){i.push(t.attributes[e])}),i.filter(function(t){return t.specified}).map(function(t){e.overlay.setAttribute(t.name,t.nodeValue)}),this.overlay.style.fill="#000000",this.overlay.style.opacity="0.4"}},{key:"onLeftArrow",value:function(){this.updateCurrentDataPoint(this.currentIndex-1)}},{key:"onRightArrow",value:function(){this.updateCurrentDataPoint(this.currentIndex+1)}}]),e}(dt),vt=function(t){function e(t){Y(this,e);var i=V(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="line",Object.getPrototypeOf(i)!==e.prototype?V(i):(i.setup(),i)}return K(e,t),X(e,[{key:"configure",value:function(t){q(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.dot_radius=t.dot_radius||4,this.config.heatline=t.heatline||0,this.config.region_fill=t.region_fill||0,this.config.show_dots=t.show_dots||1}},{key:"setupPreUnitLayers",value:function(){var t=this;this.paths_groups=[],this.y.map(function(e,i){t.paths_groups[i]=d(t.drawArea,"path-group path-group-"+i)})}},{key:"setup_values",value:function(){q(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_values",this).call(this),this.unit_args={type:"dot",args:{radius:this.dot_radius}}}},{key:"makeDatasetUnits",value:function(t,i,n,a,s,r,o,l){this.show_dots&&q(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"makeDatasetUnits",this).call(this,t,i,n,a,s,r,o,l)}},{key:"make_paths",value:function(){var t=this;this.y.map(function(e){t.make_path(e,t.xPositions,e.yUnitPositions,e.color||t.colors[e.index])})}},{key:"make_path",value:function(t,e,i,n){var a=i.map(function(t,i){return e[i]+","+t}).join("L");if(this.paths_groups[t.index].textContent="",t.path=f("M"+a,"line-graph-path",n),this.paths_groups[t.index].appendChild(t.path),this.heatline){var s=v(this.svg_defs,n);t.path.style.stroke="url(#"+s+")"}this.region_fill&&this.fill_region_for_dataset(t,n,a)}},{key:"fill_region_for_dataset",value:function(t,e,i){var n=v(this.svg_defs,e,!0),a="M0,"+this.zeroLine+"L"+i+"L"+this.width+","+this.zeroLine;t.regionPath=f(a,"region-fill","none","url(#"+n+")"),this.paths_groups[t.index].appendChild(t.regionPath)}}]),e}(dt),gt=function(t){function e(t){Y(this,e);var i=V(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="scatter",t.dot_radius?i.dot_radius=t.dot_radius:i.dot_radius=8,i.setup(),i}return K(e,t),X(e,[{key:"setup_values",value:function(){q(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_values",this).call(this),this.unit_args={type:"dot",args:{radius:this.dot_radius}}}},{key:"make_paths",value:function(){}},{key:"make_path",value:function(){}}]),e}(vt),yt=function(i){function n(t){Y(this,n);var e=V(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,t));return e.type="percentage",e.max_slices=10,e.max_legend_points=6,e.setup(),e}return K(n,i),X(n,[{key:"makeChartArea",value:function(){this.chartWrapper.className+=" graph-focus-margin",this.chartWrapper.style.marginTop="45px",this.statsWrapper.className+=" graph-focus-margin",this.statsWrapper.style.marginBottom="30px",this.statsWrapper.style.paddingTop="0px",this.chartDiv=t.create("div",{className:"div",inside:this.chartWrapper}),this.chart=t.create("div",{className:"progress-chart",inside:this.chartDiv})}},{key:"setupLayers",value:function(){this.percentageBar=t.create("div",{className:"progress",inside:this.chart})}},{key:"setup_values",value:function(){var t=this;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:"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}(ht),mt=Math.PI/180,_t=function(i){function n(t){Y(this,n);var e=V(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 K(n,i),X(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),v=n.getPositionByAngle(p,i),g=t&&s[l],y=void 0,m=void 0;t?(y=g?g.startPosition:d,m=g?g.endPosition:d):(y=d,m=v);var _=e.makeArcPath(y,m),b=f(_,"pie-path","none",e.colors[l]);b.style.transition="transform .3s;",e.drawArea.appendChild(b),e.slices.push(b),e.slicesProperties.push({startPosition:d,endPosition:v,value:o,total:e.grand_total,startAngle:h,endAngle:p,angle:u}),t&&e.elements_to_animate.push([{unit:b,array:e.slices,index:e.slices.length-1},{d:e.makeArcPath(d,v)},650,"easein",null,{d:_}])}),t&&M(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){C(t,this.calTranslateByAngle(this.slicesProperties[i])),t.style.fill=x(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 C(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*mt)*e,y:Math.cos(t*mt)*e}}}]),n}(ht),bt=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;Y(this,e);var g=V(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||F(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 K(e,t),X(e,[{key:"validate_colors",value:function(t){if(t.length<5)return 0;var e=1;return t.forEach(function(t){k(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()&&F(this.first_week_start,-1*this.first_week_start.getDay()),7!==this.last_week_start.getDay()&&F(this.last_week_start,-1*this.last_week_start.getDay()),this.no_of_cols=H(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;y.getMonth()-t.getMonth()&&(n=1,this.discrete_domains&&(a=1),this.month_start_points.push(13+12*(e+a))),t=y}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=y("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}(ht),xt={line:vt,bar:ft,scatter:gt,percentage:yt,heatmap:bt,pie:_t},kt=function t(e){return Y(this,t),I(e.type,arguments[0])};return kt}(); diff --git a/docs/assets/js/frappe-charts.min.js b/docs/assets/js/frappe-charts.min.js index 3d7c4d6..d0082ca 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 i(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 n(t){var e=window.getComputedStyle(t),i=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return t.clientWidth-i}function a(t,e,i){var n=document.createEvent("HTMLEvents");n.initEvent(e,!0,!0);for(var a in i)n[a]=i[a];return t.dispatchEvent(n)}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*G)):(a=e,0===(n=t-e)&&(n=i*G)),[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 u(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":R(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 c(t,e){return u("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function p(t,e,i,n){return u("stop",{inside:t,style:"stop-color: "+i,offset:e,"stop-opacity":n})}function d(t,e,i,n){return u("svg",{className:e,inside:t,width:i,height:n})}function f(t){return u("defs",{inside:t})}function v(t,e){return u("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function y(t){return u("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 g(t,e){var i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],n="path-fill-gradient-"+e,a=c(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 _(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]}),u("rect",r)}function m(t,e,i,n){return u("text",{className:t,x:e,y:i,dy:tt/2+"px","font-size":tt+"px",innerHTML:n})}function x(t,e,i,n){var a=u("line",{x1:0,x2:0,y1:i+Q,y2:"span"===n?-1*Q:i}),s=u("text",{x:0,y:i+Q+Z,dy:tt+"px","font-size":tt+"px","text-anchor":"middle",innerHTML:e}),r=u("g",{transform:"translate("+t+", 0)"});return r.appendChild(a),r.appendChild(s),r}function b(t,e,i,n){var a=u("line",{className:"",x1:-1*Q,x2:"span"===n?i+Q:Q,y1:0,y2:0}),s=u("text",{x:-1*(Z+Q),y:0,dy:tt/2-2+"px","font-size":tt+"px","text-anchor":"end",innerHTML:e+""}),r=u("g",{transform:"translate(0, "+t+")","stroke-opacity":1});return 0!==s&&"0"!==s||(r.style.stroke="rgba(27, 31, 35, 0.6)"),r.appendChild(a),r.appendChild(s),r}function k(t){return t>255?255:t<0?0:t}function w(t,e){var i=at(t),n=!1;"#"==i[0]&&(i=i.slice(1),n=!0);var a=parseInt(i,16),s=k((a>>16)+e),r=k((a>>8&255)+e),o=k((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 L(t,e,i){if(t!==e){st.includes(t)||console.error("'"+t+"' is not a valid chart type."),rt[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var n=ot[e].includes(t);return new bt({parent:i.parent,title:i.title,data:i.data,type:t,height:i.height,colors:n?i.colors:void 0})}}function P(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:ct[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 C(t,e){t.style.transform=e,t.style.webkitTransform=e,t.style.msTransform=e,t.style.mozTransform=e,t.style.oTransform=e}function M(t,e){var i=[],n=[];e.map(function(t){var e=t[0],a=e.unit.parentNode,s=void 0,r=void 0;t[0]=e.unit;var o=P.apply(void 0,K(t)),l=J(o,2);s=l[0],r=l[1],i.push(r),n.push([s,a]),a.replaceChild(s,e.unit),e.array?e.array[e.index]=r:e.object[e.key]=r});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 W(t,e,i){if(0!==i.length){var n=M(e,i);e.parentNode==t&&(t.removeChild(e),t.appendChild(n)),setTimeout(function(){n.parentNode==t&&(t.removeChild(n),t.appendChild(e))},ht)}}function D(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 T(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=D(t),n=J(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 N(t){function e(t,e){for(var i=T(t),n=i[1]-i[0],a=0,s=1;a1&&void 0!==arguments[1]&&arguments[1],n=Math.max.apply(Math,K(t)),a=Math.min.apply(Math,K(t)),s=[];if(n>=0&&a>=0)D(n)[1],s=i?T(n,a):T(n);else if(n>0&&a<0){var r=Math.abs(a);n>=r?(D(n)[1],s=e(n,r)):(D(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);D(o)[1],s=(s=i?T(o,l):T(o)).reverse().map(function(t){return-1*t})}return s}function U(t,e){for(var i=Math.max.apply(Math,K(t)),n=1/(e-1),a=[],s=0;s9?"":"0")+e,(i>9?"":"0")+i,t.getFullYear()].join("-")}function E(t,e){return Math.ceil(Y(t,e)/7)}function Y(t,e){return(z(e)-z(t))/864e5}function H(t,e){t.setDate(t.getDate()+e)}function I(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return xt[t]?new xt[t](e):new ft(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 .data-points circle{stroke:#fff;stroke-width:2}.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 R="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},F=(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")}),X=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}(),G=.01,Q=6,Z=4,tt=10,et=function(){function t(e){F(this,t),this.updateState(e)}return X(t,[{key:"updateState",value:function(t){this.totalHeight=t.totalHeight,this.totalWidth=t.totalWidth,this.zeroLine=t.zeroLine,this.avgUnitWidth=t.avgUnitWidth,this.xAxisMode=t.xAxisMode,this.yAxisMode=t.yAxisMode}},{key:"bar",value:function(t,e,i,n,a,s,r){var l=this.avgUnitWidth-i.spaceWidth,h=l/r,c=t-l/2+h*s,p=o(e,this.zeroLine,this.totalHeight),d=J(p,2),f=d[0];return u("rect",{className:"bar mini",style:"fill: "+n,"data-point-index":a,x:c,y:d[1],width:h,height:f})}},{key:"dot",value:function(t,e,i,n,a){return u("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]:this.xAxisMode;return x(t,e,this.totalHeight,i)}},{key:"yLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.yAxisMode;return b(t,e,this.totalWidth,i)}},{key:"xMarker",value:function(){}},{key:"yMarker",value:function(){}},{key:"xRegion",value:function(){}},{key:"yRegion",value:function(){}}]),t}(),it={"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"},nt=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],at=function(t){return it[t]||t},st=["line","scatter","bar","percentage","heatmap","pie"],rt={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:[]},ot={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},lt=function(){function e(t){t.height;var i=t.title,n=void 0===i?"":i,a=t.subtitle,s=void 0===a?"":a,r=(t.colors,t.isNavigable),o=void 0===r?0:r,l=(t.type,t.parent);F(this,e),this.rawChartArgs=arguments[0],this.parent="string"==typeof l?document.querySelector(l):l,this.title=n,this.subtitle=s,this.isNavigable=o,this.isNavigable&&(this.currentIndex=0),this.setupConfiguration()}return X(e,[{key:"setupConfiguration",value:function(){this.setColors(),this.setMargins(),this.config={showTooltip:1,showLegend:1,isNavigable:0,animate:1}}},{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 $({parent:this.chartWrapper,colors:this.colors}),this.bindTooltip()}},{key:"draw",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calc(),this.refreshRenderer(),this.setupComponents(),this.makeChartArea(),this.makeLayers(),this.renderComponents(),this.renderLegend(),this.setupNavigation(t),this.config.animate&&this.update(this.firstUpdateData)}},{key:"update",value:function(){this.reCalc(),this.reRender()}},{key:"refreshRenderer",value:function(){}},{key:"calcWidth",value:function(){this.baseWidth=n(this.parent)-0,this.width=this.baseWidth-2*this.translateX}},{key:"calc",value:function(){this.calcWidth(),this.reCalc()}},{key:"makeChartArea",value:function(){this.svg=d(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svg_defs=f(this.svg),this.drawArea=v(this.svg,this.type+"-chart","translate("+this.translateX+", "+this.translateY+")")}},{key:"makeLayers",value:function(){var t=this;this.components.forEach(function(e){e.layer=t.makeLayer(e.layerClass)})}},{key:"calculateValues",value:function(){}},{key:"renderComponents",value:function(){this.components.forEach(function(t){t.store=t.make.apply(t,K(t.makeArgs)),t.layer.textContent="",t.store.forEach(function(e){t.layer.appendChild(e)})})}},{key:"reCalc",value:function(){}},{key:"reRender",value:function(){var t=this;if(!(!(arguments.length>0&&void 0!==arguments[0])||arguments[0]))return void this.renderComponents();this.animateComponents(),setTimeout(function(){t.renderComponents()},400)}},{key:"animateComponents",value:function(){this.intermedValues=this.calcIntermediateValues(),this.components.forEach(function(t){})}},{key:"calcInitStage",value:function(){}},{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){i(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:"makeLayer",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return v(this.drawArea,t,e)}},{key:"getDifferentChart",value:function(t){return L(t,this.type,this.rawChartArgs)}}]),e}(),ht=250,ut=function(){var t=function(t,e,i,n){this.totalHeight=t,this.totalWidth=e,this.avgUnitWidth=n,this.zeroLine=i};return t.prototype={bar: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=J(l,2);return e=s+r*n,[t,{width:r,height:h[0],x:e,y:h[1]},350,"easein"]},dot:function(t,e,i){return[t,{cx:e,cy:i},350,"easein"]},path:function(t,e){var i=[],n=[{unit:t.path,object:t,key:"path"},{d:"M"+e},650,"easein"];if(i.push(n),t.regionPath){var a="0,"+this.zeroLine+"L",s="L"+this.totalWidth+", "+this.zeroLine,r=[{unit:t.regionPath,object:t,key:"regionPath"},{d:"M"+a+e+s},650,"easein"];i.push(r)}return i},translate:function(t,e,i,n){return[{unit:t,array:[0],index:0},{transform:i.join(", ")},n,"easein","translate",{transform:e.join(", ")}]},verticalLine:function(t,e,i){return this.translate(t,[i,0],[e,0],350)},horizontalLine:function(t,e,i){return this.translate(t,[0,i],[0,e],350)}},t}(),ct={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"},pt=function(t){function i(t){F(this,i);var e=V(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,t));return e.is_series=t.is_series,e.format_tooltip_y=t.format_tooltip_y,e.format_tooltip_x=t.format_tooltip_x,e.zeroLine=e.height,e}return q(i,t),X(i,[{key:"parseData",value:function(){var t=this.rawChartArgs;return this.xAxisLabels=t.data.labels||[],this.y=t.data.datasets||[],this.y.forEach(function(t,e){t.index=e},this),!0}},{key:"reCalc",value:function(){this.oldValues=["everything"],this.datasetsLabels=[],this.datasetsValues=[[[12,34,68],[10,5,46]],[[20,20,20]]],this.yAxisPositions=[this.height,this.height/2,0],this.yAxisLabels=["0","5","10"],this.xPositions=[0,this.width/2,this.width],this.xAxisLabels=["0","5","10"]}},{key:"calcInitStage",value:function(){}},{key:"calcIntermediateValues",value:function(){}},{key:"refreshRenderer",value:function(){this.renderer=new et({totalHeight:this.height,totalWidth:this.width,zeroLine:this.zeroLine,avgUnitWidth:this.avgUnitWidth,xAxisMode:this.xAxisMode,yAxisMode:this.yAxisMode})}},{key:"setupComponents",value:function(){var t=this;this.yAxis={layerClass:"y axis",layer:void 0,make:t.makeYLines.bind(t),makeArgs:[t.yAxisPositions,t.yAxisLabels],store:[],animate:t.animateYLines},this.xAxis={layerClass:"x axis",layer:void 0,make:t.makeXLines.bind(t),makeArgs:[t.xPositions,t.xAxisLabels],store:[],animate:t.animateXLines},this.yMarkerLines={},this.xMarkerLines={},this.components=[this.yAxis,this.xAxis]}},{key:"setup_values",value:function(){this.data.datasets.map(function(t){t.values=t.values.map(function(t){return isNaN(t)?0:t})}),this.setup_x(),this.setup_y()}},{key:"setup_x",value:function(){var t=this;this.set_avgUnitWidth_and_x_offset(),this.xPositions&&(this.x_old_axis_positions=this.xPositions.slice()),this.xPositions=this.xAxisLabels.map(function(e,i){return s(t.x_offset+i*t.avgUnitWidth)}),this.x_old_axis_positions||(this.x_old_axis_positions=this.xPositions.slice())}},{key:"setup_y",value:function(){var t=this;this.yAxisLabels&&(this.y_old_axis_values=this.yAxisLabels.slice());var e=this.get_all_y_values();this.y_sums&&this.y_sums.length>0&&(e=e.concat(this.y_sums)),this.yAxisLabels=N(e,"line"===this.type),this.y_old_axis_values||(this.y_old_axis_values=this.yAxisLabels.slice());var i=this.yAxisLabels,n=i[i.length-1]-i[0];this.multiplier&&(this.old_multiplier=this.multiplier),this.multiplier=this.height/n,this.old_multiplier||(this.old_multiplier=this.multiplier);var a=i[1]-i[0],s=a*this.multiplier,r=void 0;r=i.indexOf(0)>=0?i.indexOf(0):i[0]>0?-1*i[0]/a:-1*i[i.length-1]/a+(i.length-1),this.zeroLine&&(this.old_zeroLine=this.zeroLine),this.zeroLine=this.height-r*s,this.old_zeroLine||(this.old_zeroLine=this.zeroLine),this.yAxisPositions&&(this.oldYAxisPositions=this.yAxisPositions),this.yAxisPositions=this.yAxisLabels.map(function(e){return t.zeroLine-e*t.multiplier}),this.oldYAxisPositions||(this.oldYAxisPositions=this.yAxisPositions)}},{key:"makeXLines",value:function(t,e){var i=this;return t.map(function(t,n){return i.renderer.xLine(t,e[n])})}},{key:"makeYLines",value:function(t,e){var i=this;return t.map(function(t,n){return i.renderer.yLine(t,e[n])})}},{key:"draw_graph",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return this.raw_chart_args.hasOwnProperty("init")&&!this.raw_chart_args.init?void this.y.map(function(e,i){e.svg_units=[],t.make_path&&t.make_path(e,t.xPositions,e.yUnitPositions,t.colors[i]),t.makeUnits(e),t.calcYDependencies()}):e?void this.draw_new_graph_and_animate():void this.y.map(function(e,i){e.svg_units=[],t.make_path&&t.make_path(e,t.xPositions,e.yUnitPositions,t.colors[i]),t.makeUnits(e)})}},{key:"draw_new_graph_and_animate",value:function(){var t=this,e=[];this.y.map(function(i,n){i.yUnitPositions=new Array(i.values.length).fill(t.zeroLine),e.push({values:i.values}),i.svg_units=[],t.make_path&&t.make_path(i,t.xPositions,i.yUnitPositions,t.colors[n]),t.makeUnits(i)}),setTimeout(function(){t.updateData(e)},350)}},{key:"setupNavigation",value:function(t){var e=this;t?setTimeout(function(){B(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"setupNavigation",e).call(e,t)},500):B(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"setupNavigation",this).call(this,t)}},{key:"makeUnits",value:function(t){this.makeDatasetUnits(this.xPositions,t.yUnitPositions,this.colors[t.index],t.index,this.y.length)}},{key:"makeDatasetUnits",value:function(t,e,i,n,a,s,r,o){s||(s=this.svg_units_groups[n]),r||(r=this.y[n].svg_units),o||(o=this.unit_args),s.textContent="",r.length=0;var l=new et(this.height,this.zeroLine,this.avgUnitWidth);e.map(function(e,h){var u=l[o.type](t[h],e,o.args,i,h,n,a);s.appendChild(u),r.push(u)}),this.isNavigable&&this.bind_units(r)}},{key:"bindTooltip",value:function(){var t=this;this.chartWrapper.addEventListener("mousemove",function(i){var n=e(t.chartWrapper),a=i.pageX-n.left-t.translateX;i.pageY-n.top-t.translateY=0;a--){var s=this.xPositions[a];if(t>s-this.avgUnitWidth/2){var r=s+this.translateX,o=this.y_min_tops[a]+this.translateY,l=i[a],h=this.y.map(function(t,i){return{title:t.title,value:n?e.format_tooltip_y(t.values[a]):t.values[a],color:e.colors[i]}});this.tip.set_values(r,o,l,"",h),this.tip.show_tip();break}}}}},{key:"updateData",value:function(t,e){e||(e=this.xAxisLabels),this.updating=!0,this.old_x_values=this.xAxisLabels.slice(),this.old_y_axis_tops=this.y.map(function(t){return t.yUnitPositions.slice()}),this.old_y_values=this.y.map(function(t){return t.values}),t&&this.y.map(function(e){e.values=t[e.index].values}),e&&(this.xAxisLabels=e),this.setup_x(),this.setup_y(),this.calcYDependencies(),this.animator=new ut(this.height,this.width,this.zeroLine,this.avgUnitWidth),this.animate_graphs(),this.updating=!1}},{key:"animate_graphs",value:function(){var t=this;this.elements_to_animate=[];var e=l(this.x_old_axis_positions.slice(),this.xPositions.slice()),i=J(e,2),n=i[0],a=i[1],s=l(this.oldYAxisPositions.slice(),this.yAxisPositions.slice()),r=J(s,2),o=r[0],h=r[1],u=this.xAxisLabels.slice(),c=this.yAxisLabels.slice(),p=this.xPositions.slice().length-this.x_old_axis_positions.slice().length;p>0&&this.makeXLines(n,u),this.makeYLines(o,c),0!==p&&this.animateXLines(n,a),this.animateYLines(o,h),this.y.map(function(e){var i=l(t.old_y_axis_tops[e.index].slice(),e.yUnitPositions.slice()),s=J(i,2),r=s[0],o=s[1];p>0&&(t.make_path&&t.make_path(e,n,r,t.colors[e.index]),t.makeDatasetUnits(n,r,t.colors[e.index],e.index,t.y.length)),e.path&&t.animate_path(e,a,o),t.animate_units(e,a,o)}),W(this.chartWrapper,this.svg,this.elements_to_animate),setTimeout(function(){t.y.map(function(e){t.make_path&&t.make_path(e,t.xPositions,e.yUnitPositions,t.colors[e.index]),t.makeUnits(e),t.makeYLines(t.yAxisPositions,t.yAxisLabels),t.makeXLines(t.xPositions,t.xAxisLabels)})},400)}},{key:"animate_path",value:function(t,e,i){var n=i.map(function(t,i){return e[i]+","+t});this.elements_to_animate=this.elements_to_animate.concat(this.animator.path(t,n.join("L")))}},{key:"animate_units",value:function(t,e,i){var n=this,a=this.unit_args.type;t.svg_units.map(function(s,r){void 0!==e[r]&&void 0!==i[r]&&n.elements_to_animate.push(n.animator[a]({unit:s,array:t.svg_units,index:r},e[r],i[r],t.index,n.y.length))})}},{key:"animateXLines",value:function(t,e){var i=this;this.xAxisLines.map(function(n,a){i.elements_to_animate.push(i.animator.verticalLine(n,e[a],t[a]))})}},{key:"animateYLines",value:function(t,e){var i=this;this.yAxisLines.map(function(n,a){i.elements_to_animate.push(i.animator.horizontalLine(n,e[a],t[a]))})}},{key:"animateYAnnotations",value:function(){}},{key:"add_data_point",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.xAxisLabels.length,n=this.y.map(function(t){return{values:t.values}});n.map(function(e,n){e.values.splice(i,0,t[n])});var a=this.xAxisLabels.slice();a.splice(i,0,e),this.updateData(n,a)}},{key:"remove_data_point",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.xAxisLabels.length-1;if(!(this.xAxisLabels.length<3)){var e=this.y.map(function(t){return{values:t.values}});e.map(function(e){e.values.splice(t,1)});var i=this.xAxisLabels.slice();i.splice(t,1),this.updateData(e,i)}}},{key:"getDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.currentIndex,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.currentIndex&&(this.currentIndex=t,a(this.parent,"data-select",this.getDataPoint()))}},{key:"set_avgUnitWidth_and_x_offset",value:function(){this.avgUnitWidth=this.width/(this.xAxisLabels.length-1),this.x_offset=0}},{key:"get_all_y_values",value:function(){var t=[];return this.y.map(function(e){t=t.concat(e.values)}),t.concat(this.specific_values.map(function(t){return t.value}))}},{key:"calcYDependencies",value:function(){var t=this;this.y_min_tops=new Array(this.xAxisLabels.length).fill(9999),this.y.map(function(e){e.yUnitPositions=e.values.map(function(e){return s(t.zeroLine-e*t.multiplier)}),e.yUnitPositions.map(function(e,i){e0}),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}(lt),gt=Math.PI/180,_t=function(i){function n(t){F(this,n);var e=V(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 q(n,i),X(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],g=void 0,_=void 0;t?(g=v?v.startPosition:d,_=v?v.endPosition:d):(g=d,_=f);var m=e.makeArcPath(g,_),x=y(m,"pie-path","none",e.colors[l]);x.style.transition="transform .3s;",e.drawArea.appendChild(x),e.slices.push(x),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:x,array:e.slices,index:e.slices.length-1},{d:e.makeArcPath(d,f)},650,"easein",null,{d:m}])}),t&&W(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){C(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])+": ",u=(100*this.slice_totals[i]/this.grand_total).toFixed(1);this.tip.set_values(o,l,h,u+"%"),this.tip.show_tip()}else C(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*gt)*e,y:Math.cos(t*gt)*e}}}]),n}(lt),mt=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;F(this,e);var y=V(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||H(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 q(e,t),X(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()&&H(this.first_week_start,-1*this.first_week_start.getDay()),7!==this.last_week_start.getDay()&&H(this.last_week_start,-1*this.last_week_start.getDay()),this.no_of_cols=E(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=U(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;y.getMonth()-t.getMonth()&&(n=1,this.discrete_domains&&(a=1),this.month_start_points.push(13+12*(e+a))),t=y}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=m("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}(lt),xt={line:ft,bar:dt,scatter:vt,percentage:yt,heatmap:mt,pie:_t},bt=function t(e){return F(this,t),I(e.type,arguments[0])};return bt}(); +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 i(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 n(t){var e=window.getComputedStyle(t),i=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return t.clientWidth-i}function a(t){return parseFloat(t.toFixed(2))}function s(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 r(t,e,i){var n=void 0,a=void 0;return t<=e?(a=t,0===(n=e-t)&&(a-=n=i*Q)):(a=e,0===(n=t-e)&&(n=i*Q)),[n,a]}function o(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function l(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)o(a).appendChild(i);else if("around"===n){var s=o(a);s.parentNode.insertBefore(i,s),i.appendChild(s)}else"styles"===n?"object"===(void 0===a?"undefined":B(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 h(t,e){return l("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function c(t,e,i,n){return l("stop",{inside:t,style:"stop-color: "+i,offset:e,"stop-opacity":n})}function u(t,e,i,n){return l("svg",{className:e,inside:t,width:i,height:n})}function p(t){return l("defs",{inside:t})}function d(t,e){return l("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function f(t){return l("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 v(t,e){var i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],n="path-fill-gradient-"+e,a=h(t,n),s=[1,.6,.2];return i&&(s=[.4,.2,0]),c(a,"0%",e,s[0]),c(a,"50%",e,s[1]),c(a,"100%",e,s[2]),n}function g(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]}),l("rect",r)}function y(t,e,i,n){return l("text",{className:t,x:e,y:i,dy:et/2+"px","font-size":et+"px",innerHTML:n})}function m(t,e,i,n){var a=l("line",{x1:0,x2:0,y1:i+Z,y2:"span"===n?-1*Z:i}),s=l("text",{x:0,y:i+Z+tt,dy:et+"px","font-size":et+"px","text-anchor":"middle",innerHTML:e}),r=l("g",{transform:"translate("+t+", 0)"});return r.appendChild(a),r.appendChild(s),r}function _(t,e,i,n){var a=l("line",{className:"",x1:-1*Z,x2:"span"===n?i+Z:Z,y1:0,y2:0}),s=l("text",{x:-1*(tt+Z),y:0,dy:et/2-2+"px","font-size":et+"px","text-anchor":"end",innerHTML:e+""}),r=l("g",{transform:"translate(0, "+t+")","stroke-opacity":1});return 0!==s&&"0"!==s||(r.style.stroke="rgba(27, 31, 35, 0.6)"),r.appendChild(a),r.appendChild(s),r}function b(t){return t>255?255:t<0?0:t}function x(t,e){var i=st(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 k(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t)}function w(t,e,i){if(t!==e){rt.includes(t)||console.error("'"+t+"' is not a valid chart type."),ot[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var n=lt[e].includes(t);return new kt({parent:i.parent,title:i.title,data:i.data,type:t,height:i.height,colors:n?i.colors:void 0})}}function A(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 C(t,e){t.style.transform=e,t.style.webkitTransform=e,t.style.msTransform=e,t.style.mozTransform=e,t.style.oTransform=e}function L(t,e){var i=[],n=[];e.map(function(t){var e=t[0],a=e.unit.parentNode,s=void 0,r=void 0;t[0]=e.unit;var o=A.apply(void 0,$(t)),l=J(o,2);s=l[0],r=l[1],i.push(r),n.push([s,a]),a.replaceChild(s,e.unit),e.array?e.array[e.index]=r:e.object[e.key]=r});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 M(t,e,i){if(0!==i.length){var n=L(e,i);e.parentNode==t&&(t.removeChild(e),t.appendChild(n)),setTimeout(function(){n.parentNode==t&&(t.removeChild(n),t.appendChild(e))},ut)}}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 P(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=S(t),n=J(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 W(t){function e(t,e){for(var i=P(t),n=i[1]-i[0],a=0,s=1;a1&&void 0!==arguments[1]&&arguments[1],n=Math.max.apply(Math,$(t)),a=Math.min.apply(Math,$(t)),s=[];if(n>=0&&a>=0)S(n)[1],s=i?P(n,a):P(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?P(o,l):P(o)).reverse().map(function(t){return-1*t})}return s}function T(t){var e=D(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 D(t){return t[1]-t[0]}function N(t){return t[t.length-1]-t[0]}function j(t,e){for(var i=Math.max.apply(Math,$(t)),n=1/(e-1),a=[],s=0;s9?"":"0")+e,(i>9?"":"0")+i,t.getFullYear()].join("-")}function H(t,e){return Math.ceil(U(t,e)/7)}function U(t,e){return(z(e)-z(t))/864e5}function F(t,e){t.setDate(t.getDate()+e)}function I(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return xt[t]?new xt[t](e):new vt(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 .data-points circle{stroke:#fff;stroke-width:2}.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 B="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},Y=(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")}),X=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}(),Q=.01,Z=6,tt=4,et=10,it=function(){function t(e){Y(this,t),this.refreshState(e)}return X(t,[{key:"refreshState",value:function(t){this.totalHeight=t.totalHeight,this.totalWidth=t.totalWidth,this.zeroLine=t.zeroLine,this.avgUnitWidth=t.avgUnitWidth,this.xAxisMode=t.xAxisMode,this.yAxisMode=t.yAxisMode}},{key:"bar",value:function(t,e,i,n,a,s,o){var h=this.avgUnitWidth-i.spaceWidth,c=h/o,u=t-h/2+c*s,p=r(e,this.zeroLine,this.totalHeight),d=J(p,2),f=d[0];return l("rect",{className:"bar mini",style:"fill: "+n,"data-point-index":a,x:u,y:d[1],width:c,height:f})}},{key:"dot",value:function(t,e,i,n,a){return l("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]:this.xAxisMode;return m(t,e,this.totalHeight,i)}},{key:"yLine",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.yAxisMode;return _(t,e,this.totalWidth,i)}},{key:"xMarker",value:function(){}},{key:"yMarker",value:function(){}},{key:"xRegion",value:function(){}},{key:"yRegion",value:function(){}}]),t}(),nt={"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"},at=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],st=function(t){return nt[t]||t},rt=["line","scatter","bar","percentage","heatmap","pie"],ot={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:[]},lt={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},ht=function(){function e(t){t.height;var i=t.title,n=void 0===i?"":i,a=t.subtitle,s=void 0===a?"":a,r=(t.colors,t.isNavigable),o=void 0===r?0:r,l=(t.showLegend,t.type,t.parent);Y(this,e),this.rawChartArgs=arguments[0],this.parent="string"==typeof l?document.querySelector(l):l,this.title=n,this.subtitle=s,this.isNavigable=o,this.isNavigable&&(this.currentIndex=0),this.configure(arguments[0])}return X(e,[{key:"configure",value:function(t){this.setColors(),this.setMargins(t),this.config={showTooltip:1,showLegend:1,isNavigable:0,animate:0},this.state={}}},{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 G({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.makeChartArea(),this.setComponentParent(),this.makeComponentLayers(),this.renderLegend(),this.setupNavigation(t),this.renderComponents(),this.config.animate&&this.update(this.firstUpdateData)}},{key:"update",value:function(){this.refresh(),this.reRender()}},{key:"calcWidth",value:function(){this.baseWidth=n(this.parent)-0,this.width=this.baseWidth-2*this.translateX}},{key:"refresh",value:function(){this.oldState=this.state?Object.assign({},this.state):{},this.prepareData(),this.reCalc(),this.refreshRenderer(),this.refreshComponents()}},{key:"makeChartArea",value:function(){this.svg=u(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svg_defs=p(this.svg),this.drawArea=d(this.svg,this.type+"-chart","translate("+this.translateX+", "+this.translateY+")")}},{key:"prepareData",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.intermedState=this.calcIntermedState(),this.refreshComponents(),this.animateComponents(),setTimeout(function(){t.renderComponents()},400)}},{key:"calcIntermedState",value:function(){}},{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:"animateComponents",value:function(){this.components.forEach(function(t){return t.animate()})}},{key:"refreshComponents",value:function(){var t={chartState:this.state,oldChartState:this.oldState,intermedState:this.intermedState,chartRenderer:this.renderer};this.components.forEach(function(e){return e.refresh(t)})}},{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){i(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 w(t,this.type,this.rawChartArgs)}}]),e}(),ct=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.argsKeys,l=e.animate;Y(this,t),this.layerClass=n,this.layerTransform=s,this.make=r,this.argsKeys=o,this.animate=l,this.layer=void 0,this.store=[]}return X(t,[{key:"refresh",value:function(t){this.chartState=t.chartState,this.oldChartState=t.oldChartState,this.intermedState=t.intermedState,this.chartRenderer=t.chartRenderer}},{key:"render",value:function(){var t=this,e=this.argsKeys.map(function(e){return t.chartState[e]});e.unshift(this.chartRenderer),this.store=this.make.apply(this,$(e)),this.layer.textContent="",this.store.forEach(function(e){t.layer.appendChild(e)})}},{key:"setupParent",value:function(t){this.parent=t}},{key:"makeLayer",value:function(){this.layer=d(this.parent,this.layerClass,this.layerTransform)}}]),t}(),ut=(function(t){function e(){return Y(this,e),V(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}K(e,t)}(ct),250),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(t){function e(t){Y(this,e);var i=V(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 K(e,t),X(e,[{key:"checkData",value:function(t){return!0}},{key:"getFirstUpdateData",value:function(t){}},{key:"calcYDependencies",value:function(){var t=this;this.y_min_tops=new Array(this.xAxisLabels.length).fill(9999),this.y.map(function(e){e.yUnitPositions=e.values.map(function(e){return a(t.zeroLine-e*t.multiplier)}),e.yUnitPositions.map(function(e,i){et.datasetLength?a.slice(0,t.datasetLength):s(a,t.datasetLength-a.length,0):e,i.index=n})}},{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.label}),t.datasetsValues=t.datasets.map(function(t){return t.values}),t.yAxisLabels=W(this.getAllYValues(),"line"===this.type),this.calcYAxisPositions()}},{key:"calcXPositions",value:function(){var t=this.state;this.setUnitWidthAndXOffset(),t.xPositions=t.xAxisLabels.map(function(e,i){return a(t.xOffset+i*t.unitWidth)})}},{key:"calcYAxisPositions",value:function(){var t=this.state,e=t.yAxisLabels;t.scaleMultiplier=this.height/N(e);var i=D(e)*t.scaleMultiplier;t.zeroLine=this.height-T(e)*i,t.yAxisPositions=e.map(function(e){return t.zeroLine-e*t.scaleMultiplier})}},{key:"setUnitWidthAndXOffset",value:function(){this.state.unitWidth=this.width/(this.state.datasetLength-1),this.state.xOffset=0}},{key:"getAllYValues",value:function(){var t;return(t=[]).concat.apply(t,$(this.state.datasetsValues))}},{key:"calcIntermedState",value:function(){}},{key:"refreshRenderer",value:function(){var t={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(t):this.renderer=new it(t)}},{key:"setupComponents",value:function(){this.yAxis=new ct({layerClass:"y axis",make:function(t,e,i){return e.map(function(e,n){return t.yLine(e,i[n])})},argsKeys:["yAxisPositions","yAxisLabels"],animate:function(){}}),this.xAxis=new ct({layerClass:"x axis",make:function(t,e,i){return e.map(function(e,n){return t.xLine(e,i[n])})},argsKeys:["xPositions","xAxisLabels"],animate:function(){}}),this.yMarkerLines={},this.xMarkerLines={},this.components=[this.yAxis,this.xAxis]}}]),e}(ht),ft=function(t){function e(t){Y(this,e);var i=V(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="bar",i.setup(),i}return K(e,t),X(e,[{key:"configure",value:function(t){q(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:"setUnitWidthAndXOffset",value:function(){this.state.unitWidth=this.width/(this.state.datasetLength+1),this.state.xOffset=this.state.unitWidth}},{key:"setup_values",value:function(){q(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_values",this).call(this),this.x_offset=this.avgUnitWidth,this.unit_args={type:"bar",args:{spaceWidth:this.avgUnitWidth/2}}}},{key:"bind_units",value:function(t){var e=this;t.map(function(t){t.addEventListener("click",function(){var i=t.getAttribute("data-point-index");e.updateCurrentDataPoint(i)})})}},{key:"update_overlay",value:function(t){var e=this,i=[];Object.keys(t.attributes).map(function(e){i.push(t.attributes[e])}),i.filter(function(t){return t.specified}).map(function(t){e.overlay.setAttribute(t.name,t.nodeValue)}),this.overlay.style.fill="#000000",this.overlay.style.opacity="0.4"}},{key:"onLeftArrow",value:function(){this.updateCurrentDataPoint(this.currentIndex-1)}},{key:"onRightArrow",value:function(){this.updateCurrentDataPoint(this.currentIndex+1)}}]),e}(dt),vt=function(t){function e(t){Y(this,e);var i=V(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="line",Object.getPrototypeOf(i)!==e.prototype?V(i):(i.setup(),i)}return K(e,t),X(e,[{key:"configure",value:function(t){q(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.dot_radius=t.dot_radius||4,this.config.heatline=t.heatline||0,this.config.region_fill=t.region_fill||0,this.config.show_dots=t.show_dots||1}},{key:"setupPreUnitLayers",value:function(){var t=this;this.paths_groups=[],this.y.map(function(e,i){t.paths_groups[i]=d(t.drawArea,"path-group path-group-"+i)})}},{key:"setup_values",value:function(){q(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_values",this).call(this),this.unit_args={type:"dot",args:{radius:this.dot_radius}}}},{key:"makeDatasetUnits",value:function(t,i,n,a,s,r,o,l){this.show_dots&&q(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"makeDatasetUnits",this).call(this,t,i,n,a,s,r,o,l)}},{key:"make_paths",value:function(){var t=this;this.y.map(function(e){t.make_path(e,t.xPositions,e.yUnitPositions,e.color||t.colors[e.index])})}},{key:"make_path",value:function(t,e,i,n){var a=i.map(function(t,i){return e[i]+","+t}).join("L");if(this.paths_groups[t.index].textContent="",t.path=f("M"+a,"line-graph-path",n),this.paths_groups[t.index].appendChild(t.path),this.heatline){var s=v(this.svg_defs,n);t.path.style.stroke="url(#"+s+")"}this.region_fill&&this.fill_region_for_dataset(t,n,a)}},{key:"fill_region_for_dataset",value:function(t,e,i){var n=v(this.svg_defs,e,!0),a="M0,"+this.zeroLine+"L"+i+"L"+this.width+","+this.zeroLine;t.regionPath=f(a,"region-fill","none","url(#"+n+")"),this.paths_groups[t.index].appendChild(t.regionPath)}}]),e}(dt),gt=function(t){function e(t){Y(this,e);var i=V(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="scatter",t.dot_radius?i.dot_radius=t.dot_radius:i.dot_radius=8,i.setup(),i}return K(e,t),X(e,[{key:"setup_values",value:function(){q(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_values",this).call(this),this.unit_args={type:"dot",args:{radius:this.dot_radius}}}},{key:"make_paths",value:function(){}},{key:"make_path",value:function(){}}]),e}(vt),yt=function(i){function n(t){Y(this,n);var e=V(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,t));return e.type="percentage",e.max_slices=10,e.max_legend_points=6,e.setup(),e}return K(n,i),X(n,[{key:"makeChartArea",value:function(){this.chartWrapper.className+=" graph-focus-margin",this.chartWrapper.style.marginTop="45px",this.statsWrapper.className+=" graph-focus-margin",this.statsWrapper.style.marginBottom="30px",this.statsWrapper.style.paddingTop="0px",this.chartDiv=t.create("div",{className:"div",inside:this.chartWrapper}),this.chart=t.create("div",{className:"progress-chart",inside:this.chartDiv})}},{key:"setupLayers",value:function(){this.percentageBar=t.create("div",{className:"progress",inside:this.chart})}},{key:"setup_values",value:function(){var t=this;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:"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}(ht),mt=Math.PI/180,_t=function(i){function n(t){Y(this,n);var e=V(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 K(n,i),X(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),v=n.getPositionByAngle(p,i),g=t&&s[l],y=void 0,m=void 0;t?(y=g?g.startPosition:d,m=g?g.endPosition:d):(y=d,m=v);var _=e.makeArcPath(y,m),b=f(_,"pie-path","none",e.colors[l]);b.style.transition="transform .3s;",e.drawArea.appendChild(b),e.slices.push(b),e.slicesProperties.push({startPosition:d,endPosition:v,value:o,total:e.grand_total,startAngle:h,endAngle:p,angle:u}),t&&e.elements_to_animate.push([{unit:b,array:e.slices,index:e.slices.length-1},{d:e.makeArcPath(d,v)},650,"easein",null,{d:_}])}),t&&M(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){C(t,this.calTranslateByAngle(this.slicesProperties[i])),t.style.fill=x(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 C(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*mt)*e,y:Math.cos(t*mt)*e}}}]),n}(ht),bt=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;Y(this,e);var g=V(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||F(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 K(e,t),X(e,[{key:"validate_colors",value:function(t){if(t.length<5)return 0;var e=1;return t.forEach(function(t){k(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()&&F(this.first_week_start,-1*this.first_week_start.getDay()),7!==this.last_week_start.getDay()&&F(this.last_week_start,-1*this.last_week_start.getDay()),this.no_of_cols=H(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;y.getMonth()-t.getMonth()&&(n=1,this.discrete_domains&&(a=1),this.month_start_points.push(13+12*(e+a))),t=y}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=y("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}(ht),xt={line:vt,bar:ft,scatter:gt,percentage:yt,heatmap:bt,pie:_t},kt=function t(e){return Y(this,t),I(e.type,arguments[0])};return kt}(); diff --git a/docs/assets/js/index.js b/docs/assets/js/index.js index fcc8487..89a5d43 100755 --- a/docs/assets/js/index.js +++ b/docs/assets/js/index.js @@ -8,7 +8,7 @@ let bar_composite_data = { "2013", "2014", "2015", "2016", "2017"], datasets: [{ - "title": "Events", + "label": "Events", "values": report_count_list, // "formatted": report_count_list.map(d => d + " reports") }] @@ -77,15 +77,15 @@ let type_data = { datasets: [ { - title: "Some Data", + label: "Some Data", values: [25, 40, 30, 35, 8, 52, 17, -4] }, { - title: "Another Set", + label: "Another Set", values: [25, 50, -10, 15, 18, 32, 27, 14] }, { - title: "Yet Another", + label: "Yet Another", values: [15, 20, -3, -15, 58, 12, -17, 37] } ] @@ -211,8 +211,8 @@ let update_data = { }], "specific_values": [ { - title: "Altitude", - // title: "A very long text", + label: "Altitude", + // label: "A very long text", line_type: "dashed", value: 38 }, diff --git a/docs/index.html b/docs/index.html index d2a6ec8..d6da7ed 100644 --- a/docs/index.html +++ b/docs/index.html @@ -64,15 +64,15 @@ datasets: [ { - title: "Some Data", + label: "Some Data", values: [25, 40, 30, 35, 8, 52, 17, -4] }, { - title: "Another Set", + label: "Another Set", values: [25, 50, -10, 15, 18, 32, 27, 14] }, { - title: "Yet Another", + label: "Yet Another", values: [15, 20, -3, -15, 58, 12, -17, 37] } ] @@ -144,7 +144,7 @@ data.specific_values = [ { - title: "Altitude", + label: "Altitude", line_type: "dashed", // or "solid" value: 38 } diff --git a/src/js/charts/AxisChart.js b/src/js/charts/AxisChart.js index 0fde749..6de955c 100644 --- a/src/js/charts/AxisChart.js +++ b/src/js/charts/AxisChart.js @@ -1,11 +1,12 @@ import BaseChart from './BaseChart'; +import { ChartComponent, IndexedChartComponent } from '../objects/ChartComponent'; import { getOffset, fire } from '../utils/dom'; import { AxisChartRenderer } from '../utils/draw'; import { equilizeNoOfElements } from '../utils/draw-utils'; import { Animator } from '../utils/animate'; import { runSMILAnimation } from '../utils/animation'; -import { calcIntervals } from '../utils/intervals'; -import { floatTwo } from '../utils/helpers'; +import { calcIntervals, getIntervalSize, getValueRange, getZeroIndex } from '../utils/intervals'; +import { floatTwo, fillArray } from '../utils/helpers'; export default class AxisChart extends BaseChart { constructor(args) { @@ -16,560 +17,14 @@ export default class AxisChart extends BaseChart { this.zeroLine = this.height; } - parseData() { - let args = this.rawChartArgs; - this.xAxisLabels = args.data.labels || []; - this.y = args.data.datasets || []; - - this.y.forEach(function(d, i) { - d.index = i; - }, this); + checkData(data) { return true; } - reCalc() { - // examples: - - // [A] Dimension change: - - // [B] Data change: - // 1. X values update - // 2. Y values update - - - // Aka all the values(state), these all will be documented in an old values object - - // Backup first! - this.oldValues = ["everything"]; - - // extracted, raw args will remain in their own object - this.datasetsLabels = []; - this.datasetsValues = [[[12, 34, 68], [10, 5, 46]], [[20, 20, 20]]]; - - // CALCULATION: we'll need the first batch of calcs - // List of what will happen: - // this.xOffset = 0; - // this.unitWidth = 0; - // this.scaleMultipliers = []; - // this.datasetsPoints = - - // Now, the function calls - - // var merged = [].concat(...arrays) - - - - // INIT - // axes - this.yAxisPositions = [this.height, this.height/2, 0]; - this.yAxisLabels = ['0', '5', '10']; - - this.xPositions = [0, this.width/2, this.width]; - this.xAxisLabels = ['0', '5', '10']; - - - } - - calcInitStage() { - // will borrow from the full recalc function - } - - calcIntermediateValues() { + getFirstUpdateData(data) { // } - // this should be inherent in BaseChart - refreshRenderer() { - // These args are basically the current state of the chart, - // with constant and alive params mixed - this.renderer = new AxisChartRenderer({ - totalHeight: this.height, - totalWidth: this.width, - zeroLine: this.zeroLine, - avgUnitWidth: this.avgUnitWidth, - xAxisMode: this.xAxisMode, - yAxisMode: this.yAxisMode - }); - } - - setupComponents() { - // Must have access to all current data things - let self = this; - this.yAxis = { - layerClass: 'y axis', - layer: undefined, - make: self.makeYLines.bind(self), - makeArgs: [self.yAxisPositions, self.yAxisLabels], - store: [], - // animate? or update? will come to while implementing - animate: self.animateYLines, - // indexed: 1 // ?? As per datasets? - }; - this.xAxis = { - layerClass: 'x axis', - layer: undefined, - make: self.makeXLines.bind(self), - // TODO: will implement series skip with avgUnitWidth and isSeries later - makeArgs: [self.xPositions, self.xAxisLabels], - store: [], - animate: self.animateXLines - }; - // Indexed according to dataset - // this.dataUnits = { - // layerClass: 'y marker axis', - // layer: undefined, - // make: makeXLines, - // makeArgs: [this.xPositions, this.xAxisLabels], - // store: [], - // animate: animateXLines, - // indexed: 1 - // }; - this.yMarkerLines = { - // layerClass: 'y marker axis', - // layer: undefined, - // make: makeYMarkerLines, - // makeArgs: [this.yMarkerPositions, this.yMarker], - // store: [], - // animate: animateYMarkerLines - }; - this.xMarkerLines = { - // layerClass: 'x marker axis', - // layer: undefined, - // make: makeXMarkerLines, - // makeArgs: [this.xMarkerPositions, this.xMarker], - // store: [], - // animate: animateXMarkerLines - }; - - // Marker Regions - - this.components = [ - this.yAxis, - this.xAxis, - // this.yMarkerLines, - // this.xMarkerLines, - // this.dataUnits, - ]; - } - - setup_values() { - this.data.datasets.map(d => { - d.values = d.values.map(val => (!isNaN(val) ? val : 0)); - }); - this.setup_x(); - this.setup_y(); - } - - setup_x() { - this.set_avgUnitWidth_and_x_offset(); - if(this.xPositions) { - this.x_old_axis_positions = this.xPositions.slice(); - } - this.xPositions = this.xAxisLabels.map((d, i) => - floatTwo(this.x_offset + i * this.avgUnitWidth)); - - if(!this.x_old_axis_positions) { - this.x_old_axis_positions = this.xPositions.slice(); - } - } - - setup_y() { - if(this.yAxisLabels) { - this.y_old_axis_values = this.yAxisLabels.slice(); - } - - let values = this.get_all_y_values(); - - if(this.y_sums && this.y_sums.length > 0) { - values = values.concat(this.y_sums); - } - - this.yAxisLabels = calcIntervals(values, this.type === 'line'); - - if(!this.y_old_axis_values) { - this.y_old_axis_values = this.yAxisLabels.slice(); - } - - const y_pts = this.yAxisLabels; - const value_range = y_pts[y_pts.length-1] - y_pts[0]; - - if(this.multiplier) this.old_multiplier = this.multiplier; - this.multiplier = this.height / value_range; - if(!this.old_multiplier) this.old_multiplier = this.multiplier; - - const interval = y_pts[1] - y_pts[0]; - const interval_height = interval * this.multiplier; - - let zero_index; - - if(y_pts.indexOf(0) >= 0) { - // the range has a given zero - // zero-line on the chart - zero_index = y_pts.indexOf(0); - } else if(y_pts[0] > 0) { - // Minimum value is positive - // zero-line is off the chart: below - let min = y_pts[0]; - zero_index = (-1) * min / interval; - } else { - // Maximum value is negative - // zero-line is off the chart: above - let max = y_pts[y_pts.length - 1]; - zero_index = (-1) * max / interval + (y_pts.length - 1); - } - - if(this.zeroLine) this.old_zeroLine = this.zeroLine; - this.zeroLine = this.height - (zero_index * interval_height); - if(!this.old_zeroLine) this.old_zeroLine = this.zeroLine; - - // Make positions arrays for y elements - if(this.yAxisPositions) this.oldYAxisPositions = this.yAxisPositions; - this.yAxisPositions = this.yAxisLabels.map(d => this.zeroLine - d * this.multiplier); - if(!this.oldYAxisPositions) this.oldYAxisPositions = this.yAxisPositions; - - // if(this.yAnnotationPositions) this.oldYAnnotationPositions = this.yAnnotationPositions; - // this.yAnnotationPositions = this.specific_values.map(d => this.zeroLine - d.value * this.multiplier); - // if(!this.oldYAnnotationPositions) this.oldYAnnotationPositions = this.yAnnotationPositions; - } - - makeXLines(positions, values) { - // TODO: draw as per condition (with/without label etc.) - return positions.map((position, i) => this.renderer.xLine(position, values[i])); - } - - makeYLines(positions, values) { - return positions.map((position, i) => this.renderer.yLine(position, values[i])); - } - - draw_graph(init=false) { - // TODO: NO INIT! - if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) { - this.y.map((d, i) => { - d.svg_units = []; - this.make_path && this.make_path(d, this.xPositions, d.yUnitPositions, this.colors[i]); - this.makeUnits(d); - this.calcYDependencies(); - }); - return; - } - if(init) { - this.draw_new_graph_and_animate(); - return; - } - this.y.map((d, i) => { - d.svg_units = []; - this.make_path && this.make_path(d, this.xPositions, d.yUnitPositions, this.colors[i]); - this.makeUnits(d); - }); - } - - draw_new_graph_and_animate() { - let data = []; - this.y.map((d, i) => { - // Anim: Don't draw initial values, store them and update later - d.yUnitPositions = new Array(d.values.length).fill(this.zeroLine); // no value - data.push({values: d.values}); - d.svg_units = []; - - this.make_path && this.make_path(d, this.xPositions, d.yUnitPositions, this.colors[i]); - this.makeUnits(d); - }); - - setTimeout(() => { - this.updateData(data); - }, 350); - } - - setupNavigation(init) { - if(init) { - // Hack: defer nav till initial updateData - setTimeout(() => { - super.setupNavigation(init); - }, 500); - } else { - super.setupNavigation(init); - } - } - - makeUnits(d) { - this.makeDatasetUnits( - this.xPositions, - d.yUnitPositions, - this.colors[d.index], - d.index, - this.y.length - ); - } - - makeDatasetUnits(x_values, y_values, color, dataset_index, - no_of_datasets, units_group, units_array, unit) { - - if(!units_group) units_group = this.svg_units_groups[dataset_index]; - if(!units_array) units_array = this.y[dataset_index].svg_units; - if(!unit) unit = this.unit_args; - - units_group.textContent = ''; - units_array.length = 0; - - let unit_AxisChartRenderer = new AxisChartRenderer(this.height, this.zeroLine, this.avgUnitWidth); - - y_values.map((y, i) => { - let data_unit = unit_AxisChartRenderer[unit.type]( - x_values[i], - y, - unit.args, - color, - i, - dataset_index, - no_of_datasets - ); - units_group.appendChild(data_unit); - units_array.push(data_unit); - }); - - if(this.isNavigable) { - this.bind_units(units_array); - } - } - - bindTooltip() { - // TODO: could be in tooltip itself, as it is a given functionality for its parent - this.chartWrapper.addEventListener('mousemove', (e) => { - let offset = getOffset(this.chartWrapper); - let relX = e.pageX - offset.left - this.translateX; - let relY = e.pageY - offset.top - this.translateY; - - if(relY < this.height + this.translateY * 2) { - this.mapTooltipXPosition(relX); - } else { - this.tip.hide_tip(); - } - }); - } - - mapTooltipXPosition(relX) { - if(!this.y_min_tops) return; - - let titles = this.xAxisLabels; - if(this.format_tooltip_x && this.format_tooltip_x(this.xAxisLabels[0])) { - titles = this.xAxisLabels.map(d=>this.format_tooltip_x(d)); - } - - let y_format = this.format_tooltip_y && this.format_tooltip_y(this.y[0].values[0]); - - for(var i=this.xPositions.length - 1; i >= 0 ; i--) { - let x_val = this.xPositions[i]; - // let delta = i === 0 ? this.avgUnitWidth : x_val - this.xPositions[i-1]; - if(relX > x_val - this.avgUnitWidth/2) { - let x = x_val + this.translateX; - let y = this.y_min_tops[i] + this.translateY; - - let title = titles[i]; - let values = this.y.map((set, j) => { - return { - title: set.title, - value: y_format ? this.format_tooltip_y(set.values[i]) : set.values[i], - color: this.colors[j], - }; - }); - - this.tip.set_values(x, y, title, '', values); - this.tip.show_tip(); - break; - } - } - } - - // API - updateData(newY, newX) { - if(!newX) { - newX = this.xAxisLabels; - } - this.updating = true; - - this.old_x_values = this.xAxisLabels.slice(); - this.old_y_axis_tops = this.y.map(d => d.yUnitPositions.slice()); - - this.old_y_values = this.y.map(d => d.values); - - // Just update values prop, setup_x/y() will do the rest - if(newY) this.y.map(d => {d.values = newY[d.index].values;}); - if(newX) this.xAxisLabels = newX; - - this.setup_x(); - this.setup_y(); - - // Change in data, so calculate dependencies - this.calcYDependencies(); - - // Got the values? Now begin drawing - this.animator = new Animator(this.height, this.width, this.zeroLine, this.avgUnitWidth); - - this.animate_graphs(); - - this.updating = false; - } - - animate_graphs() { - this.elements_to_animate = []; - // Pre-prep, equilize no of positions between old and new - let [old_x, newX] = equilizeNoOfElements( - this.x_old_axis_positions.slice(), - this.xPositions.slice() - ); - - let [oldYAxis, newYAxis] = equilizeNoOfElements( - this.oldYAxisPositions.slice(), - this.yAxisPositions.slice() - ); - - let newXValues = this.xAxisLabels.slice(); - let newYValues = this.yAxisLabels.slice(); - - let extra_points = this.xPositions.slice().length - this.x_old_axis_positions.slice().length; - - if(extra_points > 0) { - this.makeXLines(old_x, newXValues); - } - // No Y extra check? - this.makeYLines(oldYAxis, newYValues); - - // Animation - if(extra_points !== 0) { - this.animateXLines(old_x, newX); - } - this.animateYLines(oldYAxis, newYAxis); - - this.y.map(d => { - let [old_y, newY] = equilizeNoOfElements( - this.old_y_axis_tops[d.index].slice(), - d.yUnitPositions.slice() - ); - if(extra_points > 0) { - this.make_path && this.make_path(d, old_x, old_y, this.colors[d.index]); - this.makeDatasetUnits(old_x, old_y, this.colors[d.index], d.index, this.y.length); - } - // Animation - d.path && this.animate_path(d, newX, newY); - this.animate_units(d, newX, newY); - }); - - runSMILAnimation(this.chartWrapper, this.svg, this.elements_to_animate); - - setTimeout(() => { - this.y.map(d => { - this.make_path && this.make_path(d, this.xPositions, d.yUnitPositions, this.colors[d.index]); - this.makeUnits(d); - - this.makeYLines(this.yAxisPositions, this.yAxisLabels); - this.makeXLines(this.xPositions, this.xAxisLabels); - // this.make_y_specifics(this.yAnnotationPositions, this.specific_values); - }); - }, 400); - } - - animate_path(d, newX, newY) { - const newPointsList = newY.map((y, i) => (newX[i] + ',' + y)); - this.elements_to_animate = this.elements_to_animate - .concat(this.animator.path(d, newPointsList.join("L"))); - } - - animate_units(d, newX, newY) { - let type = this.unit_args.type; - - d.svg_units.map((unit, i) => { - if(newX[i] === undefined || newY[i] === undefined) return; - this.elements_to_animate.push(this.animator[type]( - {unit:unit, array:d.svg_units, index: i}, // unit, with info to replace where it came from in the data - newX[i], - newY[i], - d.index, - this.y.length - )); - }); - } - - animateXLines(oldX, newX) { - this.xAxisLines.map((xLine, i) => { - this.elements_to_animate.push(this.animator.verticalLine( - xLine, newX[i], oldX[i] - )); - }); - } - - animateYLines(oldY, newY) { - this.yAxisLines.map((yLine, i) => { - this.elements_to_animate.push(this.animator.horizontalLine( - yLine, newY[i], oldY[i] - )); - }); - } - - animateYAnnotations() { - // - } - - add_data_point(y_point, x_point, index=this.xAxisLabels.length) { - let newY = this.y.map(data_set => { return {values:data_set.values}; }); - newY.map((d, i) => { d.values.splice(index, 0, y_point[i]); }); - let newX = this.xAxisLabels.slice(); - newX.splice(index, 0, x_point); - - this.updateData(newY, newX); - } - - remove_data_point(index = this.xAxisLabels.length-1) { - if(this.xAxisLabels.length < 3) return; - - let newY = this.y.map(data_set => { return {values:data_set.values}; }); - newY.map((d) => { d.values.splice(index, 1); }); - let newX = this.xAxisLabels.slice(); - newX.splice(index, 1); - - this.updateData(newY, newX); - } - - getDataPoint(index=this.currentIndex) { - // 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.currentIndex) return; - this.currentIndex = index; - fire(this.parent, "data-select", this.getDataPoint()); - } - - set_avgUnitWidth_and_x_offset() { - // Set the ... you get it - this.avgUnitWidth = this.width/(this.xAxisLabels.length - 1); - this.x_offset = 0; - } - - get_all_y_values() { - let all_values = []; - - // Add in all the y values in the datasets - this.y.map(d => { - all_values = all_values.concat(d.values); - }); - - // Add in all the specific values - return all_values.concat(this.specific_values.map(d => d.value)); - } - calcYDependencies() { this.y_min_tops = new Array(this.xAxisLabels.length).fill(9999); this.y.map(d => { @@ -583,4 +38,156 @@ export default class AxisChart extends BaseChart { // this.chartWrapper.removeChild(this.tip.container); // this.make_tooltip(); } + + prepareData() { + let s = this.state; + s.xAxisLabels = this.data.labels || []; + s.datasetLength = s.xAxisLabels.length; + + let zeroArray = new Array(s.datasetLength).fill(0); + + s.datasets = this.data.datasets; + if(!this.data.datasets) { + // default + s.datasets = [{ + values: zeroArray + }]; + } + + s.datasets.map((d, i)=> { + let vals = d.values; + if(!vals) { + vals = zeroArray; + } else { + // Check for non values + vals = vals.map(val => (!isNaN(val) ? val : 0)); + + // Trim or extend + if(vals.length > s.datasetLength) { + vals = vals.slice(0, s.datasetLength); + } else { + vals = fillArray(vals, s.datasetLength - vals.length, 0); + } + } + + d.index = i; + }); + } + + reCalc() { + let s = this.state; + + // X + s.xAxisLabels = this.data.labels; + this.calcXPositions(); + + // Y + s.datasetsLabels = this.data.datasets.map(d => d.label); + + // s.datasetsValues = [[]]; indexed component + // s.datasetsValues = [[[12, 34, 68], [10, 5, 46]], [[20, 20, 20]]]; // array of indexed components + s.datasetsValues = s.datasets.map(d => d.values); // indexed component + s.yAxisLabels = calcIntervals(this.getAllYValues(), this.type === 'line'); + this.calcYAxisPositions(); + + // *** this.state.datasetsPoints = + } + + calcXPositions() { + let s = this.state; + this.setUnitWidthAndXOffset(); + s.xPositions = s.xAxisLabels.map((d, i) => + floatTwo(s.xOffset + i * s.unitWidth)); + } + + calcYAxisPositions() { + let s = this.state; + const yPts = s.yAxisLabels; + + s.scaleMultiplier = this.height / getValueRange(yPts); + const intervalHeight = getIntervalSize(yPts) * s.scaleMultiplier; + s.zeroLine = this.height - (getZeroIndex(yPts) * intervalHeight); + + s.yAxisPositions = yPts.map(d => s.zeroLine - d * s.scaleMultiplier); + } + + setUnitWidthAndXOffset() { + this.state.unitWidth = this.width/(this.state.datasetLength - 1); + this.state.xOffset = 0; + } + + getAllYValues() { + // TODO: yMarkers, regions, sums, every Y value ever + return [].concat(...this.state.datasetsValues); + } + + calcIntermedState() { + // + } + + // this should be inherent in BaseChart + refreshRenderer() { + // These args are basically the current state of the chart, + // with constant and alive params mixed + let state = { + totalHeight: this.height, + totalWidth: this.width, + + xAxisMode: this.config.xAxisMode, + yAxisMode: this.config.yAxisMode, + + zeroLine: this.state.zeroLine, + unitWidth: this.state.unitWidth, + }; + if(!this.renderer) { + this.renderer = new AxisChartRenderer(state); + } else { + this.renderer.refreshState(state); + } + } + + setupComponents() { + this.yAxis = new ChartComponent({ + layerClass: 'y axis', + make: (renderer, positions, values) => { + return positions.map((position, i) => renderer.yLine(position, values[i])); + }, + argsKeys: ['yAxisPositions', 'yAxisLabels'], + animate: () => {} + }); + + this.xAxis = new ChartComponent({ + layerClass: 'x axis', + make: (renderer, positions, values) => { + return positions.map((position, i) => renderer.xLine(position, values[i])); + }, + argsKeys: ['xPositions', 'xAxisLabels'], + animate: () => {} + }); + + // Indexed according to dataset + + // this.dataUnits = new IndexedChartComponent({ + // layerClass: 'x axis', + // make: (renderer, positions, values) => { + // return positions.map((position, i) => renderer.xLine(position, values[i])); + // }, + // argsKeys: ['xPositions', 'xAxisLabels'], + // animate: () => {} + // }); + + this.yMarkerLines = {}; + this.xMarkerLines = {}; + + // Marker Regions + + this.components = [ + this.yAxis, + this.xAxis, + // this.yMarkerLines, + // this.xMarkerLines, + // this.dataUnits, + ]; + } + } diff --git a/src/js/charts/BarChart.js b/src/js/charts/BarChart.js index 92332b5..93e781c 100644 --- a/src/js/charts/BarChart.js +++ b/src/js/charts/BarChart.js @@ -3,13 +3,21 @@ import AxisChart from './AxisChart'; export default class BarChart extends AxisChart { constructor(args) { super(args); - this.type = 'bar'; - this.xAxisMode = args.xAxisMode || 'tick'; - this.yAxisMode = args.yAxisMode || 'span'; 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 + 1); + this.state.xOffset = this.state.unitWidth; + } + setup_values() { super.setup_values(); this.x_offset = this.avgUnitWidth; @@ -74,8 +82,5 @@ export default class BarChart extends AxisChart { this.updateCurrentDataPoint(this.currentIndex + 1); } - set_avgUnitWidth_and_x_offset() { - this.avgUnitWidth = this.width/(this.xAxisLabels.length + 1); - this.x_offset = this.avgUnitWidth; - } + } diff --git a/src/js/charts/BaseChart.js b/src/js/charts/BaseChart.js index de308c6..49184d1 100644 --- a/src/js/charts/BaseChart.js +++ b/src/js/charts/BaseChart.js @@ -14,6 +14,7 @@ export default class BaseChart { colors = [], isNavigable = 0, + showLegend = 1, type = '', @@ -31,23 +32,26 @@ export default class BaseChart { this.currentIndex = 0; } - this.setupConfiguration(); + this.configure(arguments[0]); } - setupConfiguration() { + configure(args) { // Make a this.config, that has stuff like showTooltip, // showLegend, which then all functions will check this.setColors(); - this.setMargins(); + this.setMargins(args); // constants this.config = { - showTooltip: 1, + showTooltip: 1, // calculate showLegend: 1, isNavigable: 0, - animate: 1 + // animate: 1 + animate: 0 }; + + this.state = {}; } setColors() { @@ -67,8 +71,8 @@ export default class BaseChart { this.colors = this.colors.map(color => getColor(color)); } - setMargins() { - let height = this.rawChartArgs.height; + setMargins(args) { + let height = args.height; this.baseHeight = height; this.height = height - 40; this.translateX = 60; @@ -103,7 +107,7 @@ export default class BaseChart { } checkData() {} - getFirstUpdateData(data) {} + getFirstUpdateData() {} setup() { if(this.validate()) { @@ -114,9 +118,7 @@ export default class BaseChart { _setup() { this.bindWindowEvents(); this.setupConstants(); - - // this.setupComponents(); - + this.setupComponents(); this.makeContainer(); this.makeTooltip(); // without binding this.draw(true); @@ -158,32 +160,35 @@ export default class BaseChart { this.bindTooltip(); } + bindTooltip() {} + draw(init=false) { // difference from update(): draw the whole object due to groudbreaking event (init, resize, etc.) // (draw everything, layers, groups, units) - this.calc(); - this.refreshRenderer() // this chart's rendered with the config - this.setupComponents(); + + this.calcWidth(); + this.refresh(); // refresh conponent with chart a this.makeChartArea(); - this.makeLayers(); + this.setComponentParent(); + this.makeComponentLayers(); - this.renderComponents(); // with zero values this.renderLegend(); this.setupNavigation(init); + this.renderComponents(); // first time plain render, so no rerender + if(this.config.animate) this.update(this.firstUpdateData); } update() { // difference from draw(): yes you do rerender everything here as well, - // but not things like the chart itself, mosty only at component level - this.reCalc(); + // but not things like the chart itself or layers, mosty only at component level + // HERE IS WHERE THE ACTUAL STATE CHANGES, and old one matters, not in draw + this.refresh(); this.reRender(); } - refreshRenderer() {} - calcWidth() { let outerAnnotationsWidth = 0; // let charWidth = 8; @@ -197,9 +202,12 @@ export default class BaseChart { this.width = this.baseWidth - this.translateX * 2; } - calc() { - this.calcWidth(); + refresh() { //?? refresh? + this.oldState = this.state ? Object.assign({}, this.state) : {}; + this.prepareData(); this.reCalc(); + this.refreshRenderer(); + this.refreshComponents(); } makeChartArea() { @@ -218,33 +226,21 @@ export default class BaseChart { ); } + prepareData() {} - makeLayers() { - this.components.forEach((component) => { - component.layer = this.makeLayer(component.layerClass); - }); - } + reCalc() {} + // Will update values(state) + // Will recalc specific parts depending on the update - calculateValues() {} - - renderComponents() { - this.components.forEach(c => { - c.store = c.make(...c.makeArgs); - c.layer.textContent = ''; - c.store.forEach(element => {c.layer.appendChild(element);}); - }); - } - - reCalc() { - // Will update values(state) - // Will recalc specific parts depending on the update - } + refreshRenderer() {} reRender(animate=true) { if(!animate) { this.renderComponents(); return; } + this.intermedState = this.calcIntermedState(); + this.refreshComponents(); this.animateComponents(); setTimeout(() => { this.renderComponents(); @@ -253,19 +249,23 @@ export default class BaseChart { // (opt, should not redraw if still in animate?) } - animateComponents() { - this.intermedValues = this.calcIntermediateValues(); - this.components.forEach(c => { - // c.store = c.animate(...c.animateArgs); - // c.layer.textContent = ''; - // c.store.forEach(element => {c.layer.appendChild(element);}); - }); + calcIntermedState() {} + + // convenient component array abstractions + setComponentParent() { this.components.forEach(c => c.setupParent(this.drawArea)); }; + makeComponentLayers() { this.components.forEach(c => c.makeLayer()); } + renderComponents() { this.components.forEach(c => c.render()); } + animateComponents() { this.components.forEach(c => c.animate()); } + refreshComponents() { + let args = { + chartState: this.state, + oldChartState: this.oldState, + intermedState: this.intermedState, + chartRenderer: this.renderer + }; + this.components.forEach(c => c.refresh(args)); } - - calcInitStage() {} - - renderLegend() {} setupNavigation(init=false) { @@ -309,10 +309,6 @@ export default class BaseChart { getDataPoint() {} updateCurrentDataPoint() {} - makeLayer(className, transform='') { - return makeSVGGroup(this.drawArea, className, transform); - } - getDifferentChart(type) { return getDifferentChart(type, this.type, this.rawChartArgs); } diff --git a/src/js/charts/LineChart.js b/src/js/charts/LineChart.js index 5552c8e..3696afb 100644 --- a/src/js/charts/LineChart.js +++ b/src/js/charts/LineChart.js @@ -4,27 +4,27 @@ import { makeSVGGroup, makePath, makeGradient } from '../utils/draw'; export default class LineChart extends AxisChart { constructor(args) { super(args); - - this.xAxisMode = args.xAxisMode || 'span'; - this.yAxisMode = args.yAxisMode || 'span'; - - if(args.hasOwnProperty('show_dots')) { - this.show_dots = args.show_dots; - } else { - this.show_dots = 1; - } - this.region_fill = args.region_fill; + this.type = 'line'; if(Object.getPrototypeOf(this) !== LineChart.prototype) { return; } - this.dot_radius = args.dot_radius || 4; - this.heatline = args.heatline; - this.type = 'line'; this.setup(); } + configure(args) { + super.configure(args); + this.config.xAxisMode = args.xAxisMode || 'span'; + this.config.yAxisMode = args.yAxisMode || 'span'; + + this.config.dot_radius = args.dot_radius || 4; + + this.config.heatline = args.heatline || 0; + this.config.region_fill = args.region_fill || 0; + this.config.show_dots = args.show_dots || 1; + } + setupPreUnitLayers() { // Path groups this.paths_groups = []; diff --git a/src/js/objects/ChartComponent.js b/src/js/objects/ChartComponent.js index eed1ac5..6255903 100644 --- a/src/js/objects/ChartComponent.js +++ b/src/js/objects/ChartComponent.js @@ -1,26 +1,51 @@ -// export default class ChartComponent { -// constructor({ -// parent = null, -// colors = [] -// }) { -// this.parent = parent; -// this.colors = colors; -// this.title_name = ''; -// this.title_value = ''; -// this.list_values = []; -// this.title_value_first = 0; +import { makeSVGGroup } from '../utils/draw'; -// this.x = 0; -// this.y = 0; +export class ChartComponent { + constructor({ + layerClass = '', + layerTransform = '', + make, + argsKeys, + animate + }) { + this.layerClass = layerClass; // 'y axis' + this.layerTransform = layerTransform; + this.make = make; + this.argsKeys = argsKeys;//['yAxisPositions', 'yAxisLabels']; + this.animate = animate; -// this.top = 0; -// this.left = 0; + this.layer = undefined; + this.store = []; //[[]] depends on indexed + } -// this.setup(); -// } + refresh(args) { + this.chartState = args.chartState; + this.oldChartState = args.oldChartState; + this.intermedState = args.intermedState; -// setup() { -// this.make_tooltip(); -// } + this.chartRenderer = args.chartRenderer; + } -// } \ No newline at end of file + render() { + let args = this.argsKeys.map(key => this.chartState[key]); + args.unshift(this.chartRenderer); + this.store = this.make(...args); + + this.layer.textContent = ''; + this.store.forEach(element => { + this.layer.appendChild(element); + }); + } + + setupParent(parent) { + this.parent = parent; + } + + makeLayer() { + this.layer = makeSVGGroup(this.parent, this.layerClass, this.layerTransform); + } +} + +export class IndexedChartComponent extends ChartComponent { + // +} \ No newline at end of file diff --git a/src/js/utils/draw-utils.js b/src/js/utils/draw-utils.js index a641a6f..f36575d 100644 --- a/src/js/utils/draw-utils.js +++ b/src/js/utils/draw-utils.js @@ -1,4 +1,4 @@ -import { fillArray } from '../utils/helpers'; +import { fillArray } from './helpers'; const MIN_BAR_PERCENT_HEIGHT = 0.01; diff --git a/src/js/utils/draw.js b/src/js/utils/draw.js index 95da02d..ee4e5ea 100644 --- a/src/js/utils/draw.js +++ b/src/js/utils/draw.js @@ -205,10 +205,10 @@ export function makeHoriYLine(y, label, totalWidth, mode) { export class AxisChartRenderer { constructor(state) { - this.updateState(state); + this.refreshState(state); } - updateState(state) { + refreshState(state) { this.totalHeight = state.totalHeight; this.totalWidth = state.totalWidth; this.zeroLine = state.zeroLine; diff --git a/src/js/utils/intervals.js b/src/js/utils/intervals.js index bee3568..21371af 100644 --- a/src/js/utils/intervals.js +++ b/src/js/utils/intervals.js @@ -153,6 +153,35 @@ export function calcIntervals(values, withMinimum=false) { return intervals; } +export function getZeroIndex(yPts) { + let zeroIndex; + let interval = getIntervalSize(yPts); + if(yPts.indexOf(0) >= 0) { + // the range has a given zero + // zero-line on the chart + zeroIndex = yPts.indexOf(0); + } else if(yPts[0] > 0) { + // Minimum value is positive + // zero-line is off the chart: below + let min = yPts[0]; + zeroIndex = (-1) * min / interval; + } else { + // Maximum value is negative + // zero-line is off the chart: above + let max = yPts[yPts.length - 1]; + zeroIndex = (-1) * max / interval + (yPts.length - 1); + } + return zeroIndex; +} + +export function getIntervalSize(orderedArray) { + return orderedArray[1] - orderedArray[0]; +} + +export function getValueRange(orderedArray) { + return orderedArray[orderedArray.length-1] - orderedArray[0]; +} + export function calcDistribution(values, distributionSize) { // Assume non-negative values, // implying distribution minimum at zero