diff --git a/dist/frappe-charts.esm.js b/dist/frappe-charts.esm.js index 9b1d00e..5511124 100644 --- a/dist/frappe-charts.esm.js +++ b/dist/frappe-charts.esm.js @@ -392,8 +392,15 @@ function animatePath(paths, newXList, newYList, zeroLine) { return pathComponents; } +const VERT_SPACE_OUTSIDE_BASE_CHART = 40; +const TRANSLATE_Y_BASE_CHART = 20; +const LEFT_MARGIN_BASE_CHART = 60; +const RIGHT_MARGIN_BASE_CHART = 40; const Y_AXIS_MARGIN = 60; +const INIT_CHART_UPDATE_TIMEOUT = 400; +const CHART_POST_ANIMATE_TIMEOUT = 400; + const DEFAULT_AXIS_CHART_TYPE = 'line'; const AXIS_DATASET_CHART_TYPES = ['line', 'bar']; @@ -401,7 +408,6 @@ const BAR_CHART_SPACE_RATIO = 0.5; const MIN_BAR_PERCENT_HEIGHT = 0.01; const LINE_CHART_DOT_SIZE = 4; - const DOT_OVERLAY_SIZE_INCR = 4; const AXIS_TICK_LENGTH = 6; @@ -1194,15 +1200,14 @@ class BaseChart { } setMargins() { - // TODO: think for all let height = this.argHeight; this.baseHeight = height; - this.height = height - 40; // change - this.translateY = 20; + this.height = height - VERT_SPACE_OUTSIDE_BASE_CHART; + this.translateY = TRANSLATE_Y_BASE_CHART; // Horizontal margins - this.translateXLeft = 60; - this.translateXRight = 40; + this.leftMargin = LEFT_MARGIN_BASE_CHART; + this.rightMargin = RIGHT_MARGIN_BASE_CHART; } validate(){ @@ -1269,7 +1274,7 @@ class BaseChart { // TODO: remove timeout and decrease post animate time in chart component if(init) { this.data = this.realData; - setTimeout(() => {this.update();}, 400); + setTimeout(() => {this.update();}, INIT_CHART_UPDATE_TIMEOUT); } this.renderLegend(); @@ -1286,7 +1291,7 @@ class BaseChart { // } // }); this.baseWidth = getElementContentWidth(this.parent) - outerAnnotationsWidth; - this.width = this.baseWidth - (this.translateXLeft + this.translateXRight); + this.width = this.baseWidth - (this.leftMargin + this.rightMargin); } update(data=this.data) { @@ -1321,7 +1326,7 @@ class BaseChart { setTimeout(() => { components.forEach(c => c.make()); this.updateNav(); - }, 400); + }, CHART_POST_ANIMATE_TIMEOUT); } else { this.updateNav(); } @@ -1361,7 +1366,7 @@ class BaseChart { this.drawArea = makeSVGGroup( this.svg, this.type + '-chart', - `translate(${this.translateXLeft}, ${this.translateY})` + `translate(${this.leftMargin}, ${this.translateY})` ); } @@ -1418,445 +1423,351 @@ class BaseChart { } } -function dataPrep(data, type) { - data.labels = data.labels || []; +class PercentageChart extends BaseChart { + constructor(args) { + super(args); + this.type = 'percentage'; - let datasetLength = data.labels.length; + this.max_slices = 10; + this.max_legend_points = 6; - // Datasets - let datasets = data.datasets; - let zeroArray = new Array(datasetLength).fill(0); - if(!datasets) { - // default - datasets = [{ - values: zeroArray - }]; + this.setup(); } - datasets.map((d, i)=> { - // Set values - if(!d.values) { - d.values = zeroArray; - } else { - // Check for non values - let vals = d.values; - vals = vals.map(val => (!isNaN(val) ? val : 0)); - - // Trim or extend - if(vals.length > datasetLength) { - vals = vals.slice(0, datasetLength); - } else { - vals = fillArray(vals, datasetLength - vals.length, 0); - } - } + makeChartArea() { + this.chartWrapper.className += ' ' + 'graph-focus-margin'; + this.chartWrapper.style.marginTop = '45px'; - // Set labels - // + this.statsWrapper.className += ' ' + 'graph-focus-margin'; + this.statsWrapper.style.marginBottom = '30px'; + this.statsWrapper.style.paddingTop = '0px'; - // Set type - if(!d.chartType ) { - if(!AXIS_DATASET_CHART_TYPES.includes(type)) type === DEFAULT_AXIS_CHART_TYPE; - d.chartType = type; - } + this.svg = $.create('div', { + className: 'div', + inside: this.chartWrapper + }); - }); + this.chart = $.create('div', { + className: 'progress-chart', + inside: this.svg + }); - // Markers + this.percentageBar = $.create('div', { + className: 'progress', + inside: this.chart + }); + } - // Regions - // data.yRegions = data.yRegions || []; - if(data.yRegions) { - data.yRegions.map(d => { - if(d.end < d.start) { - [d.start, d.end] = [d.end, d.start]; - } + render() { + this.grand_total = this.sliceTotals.reduce((a, b) => a + b, 0); + this.slices = []; + this.sliceTotals.map((total, i) => { + let slice = $.create('div', { + className: `progress-bar`, + inside: this.percentageBar, + styles: { + background: this.colors[i], + width: total*100/this.grand_total + "%" + } + }); + this.slices.push(slice); }); } - return data; -} + calc() { + this.sliceTotals = []; + let all_totals = this.data.labels.map((d, i) => { + let total = 0; + this.data.datasets.map(e => { + total += e.values[i]; + }); + return [total, d]; + }).filter(d => { return d[0] > 0; }); // keep only positive results -function zeroDataPrep(realData) { - let datasetLength = realData.labels.length; - let zeroArray = new Array(datasetLength).fill(0); + let totals = all_totals; - let zeroData = { - labels: realData.labels.slice(0, -1), - datasets: realData.datasets.map(d => { - return { - name: '', - values: zeroArray.slice(0, -1), - chartType: d.chartType - } - }), - yRegions: [ - { - start: 0, - end: 0, - label: '' - } - ], - yMarkers: [ - { - value: 0, - label: '' - } - ] - }; + if(all_totals.length > this.max_slices) { + all_totals.sort((a, b) => { return b[0] - a[0]; }); - return zeroData; -} + totals = all_totals.slice(0, this.max_slices-1); + let others = all_totals.slice(this.max_slices-1); -class ChartComponent$1 { - constructor({ - layerClass = '', - layerTransform = '', - constants, + let sum_of_others = 0; + others.map(d => {sum_of_others += d[0];}); - getData, - makeElements, - animateElements - }) { - this.layerTransform = layerTransform; - this.constants = constants; + totals.push([sum_of_others, 'Rest']); - this.makeElements = makeElements; - this.getData = getData; + this.colors[this.max_slices-1] = 'grey'; + } - this.animateElements = animateElements; + this.labels = []; + totals.map(d => { + this.sliceTotals.push(d[0]); + this.labels.push(d[1]); + }); - this.store = []; + this.legend_totals = this.sliceTotals.slice(0, this.max_legend_points); + } - this.layerClass = layerClass; - this.layerClass = typeof(this.layerClass) === 'function' - ? this.layerClass() : this.layerClass; + bindTooltip() { + // this.slices.map((slice, i) => { + // slice.addEventListener('mouseenter', () => { + // let g_off = getOffset(this.chartWrapper), p_off = getOffset(slice); - this.refresh(); - } + // let x = p_off.left - g_off.left + slice.offsetWidth/2; + // let y = p_off.top - g_off.top - 6; + // let title = (this.formatted_labels && this.formatted_labels.length>0 + // ? this.formatted_labels[i] : this.labels[i]) + ': '; + // let percent = (this.sliceTotals[i]*100/this.grand_total).toFixed(1); - refresh(data) { - this.data = data || this.getData(); + // this.tip.set_values(x, y, title, percent + "%"); + // this.tip.show_tip(); + // }); + // }); } - setup(parent) { - this.layer = makeSVGGroup(parent, this.layerClass, this.layerTransform); + renderLegend() { + // let x_values = this.formatted_labels && this.formatted_labels.length > 0 + // ? this.formatted_labels : this.labels; + // this.legend_totals.map((d, i) => { + // if(d) { + // let stats = $.create('div', { + // className: 'stats', + // inside: this.statsWrapper + // }); + // stats.innerHTML = ` + // + // ${x_values[i]}: + // ${d} + // `; + // } + // }); } +} - make() { - this.render(this.data); - this.oldData = this.data; +const ANGLE_RATIO = Math.PI / 180; +const FULL_ANGLE = 360; + +class PieChart extends BaseChart { + constructor(args) { + super(args); + this.type = 'pie'; + this.elements_to_animate = null; + this.hoverRadio = args.hoverRadio || 0.1; + this.max_slices = 10; + this.max_legend_points = 6; + this.isAnimate = false; + this.startAngle = args.startAngle || 0; + this.clockWise = args.clockWise || false; + this.mouseMove = this.mouseMove.bind(this); + this.mouseLeave = this.mouseLeave.bind(this); + this.setup(); } + calc() { + this.centerX = this.width / 2; + this.centerY = this.height / 2; + this.radius = (this.height > this.width ? this.centerX : this.centerY); + this.slice_totals = []; + let all_totals = this.data.labels.map((d, i) => { + let total = 0; + this.data.datasets.map(e => { + total += e.values[i]; + }); + return [total, d]; + }).filter(d => { return d[0] > 0; }); // keep only positive results - render(data) { - this.store = this.makeElements(data); + let totals = all_totals; - this.layer.textContent = ''; - this.store.forEach(element => { - this.layer.appendChild(element); - }); - } + if(all_totals.length > this.max_slices) { + all_totals.sort((a, b) => { return b[0] - a[0]; }); - update(animate = true) { - this.refresh(); - let animateElements = []; - if(animate) { - animateElements = this.animateElements(this.data); + totals = all_totals.slice(0, this.max_slices-1); + let others = all_totals.slice(this.max_slices-1); + + let sum_of_others = 0; + others.map(d => {sum_of_others += d[0];}); + + totals.push([sum_of_others, 'Rest']); + + this.colors[this.max_slices-1] = 'grey'; } - return animateElements; - } -} -let componentConfigs = { - yAxis: { - layerClass: 'y axis', - makeElements(data) { - return data.positions.map((position, i) => - yLine(position, data.labels[i], this.constants.width, - {mode: this.constants.mode, pos: this.constants.pos}) - ); - }, - - animateElements(newData) { - let newPos = newData.positions; - let newLabels = newData.labels; - let oldPos = this.oldData.positions; - let oldLabels = this.oldData.labels; - - [oldPos, newPos] = equilizeNoOfElements(oldPos, newPos); - [oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels); - - this.render({ - positions: oldPos, - labels: newLabels - }); - - return this.store.map((line, i) => { - return translateHoriLine( - line, newPos[i], oldPos[i] - ); - }); - } - }, - - xAxis: { - layerClass: 'x axis', - makeElements(data) { - return data.positions.map((position, i) => - xLine(position, data.labels[i], this.constants.height, - {mode: this.constants.mode, pos: this.constants.pos}) - ); - }, - - animateElements(newData) { - let newPos = newData.positions; - let newLabels = newData.labels; - let oldPos = this.oldData.positions; - let oldLabels = this.oldData.labels; + this.labels = []; + totals.map(d => { + this.slice_totals.push(d[0]); + this.labels.push(d[1]); + }); - [oldPos, newPos] = equilizeNoOfElements(oldPos, newPos); - [oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels); + this.legend_totals = this.slice_totals.slice(0, this.max_legend_points); + } - this.render({ - positions: oldPos, - labels: newLabels - }); + static getPositionByAngle(angle,radius) { + return { + x:Math.sin(angle * ANGLE_RATIO) * radius, + y:Math.cos(angle * ANGLE_RATIO) * radius, + }; + } + makeArcPath(startPosition,endPosition){ + const{centerX,centerY,radius,clockWise} = this; + return `M${centerX} ${centerY} L${centerX+startPosition.x} ${centerY+startPosition.y} A ${radius} ${radius} 0 0 ${clockWise ? 1 : 0} ${centerX+endPosition.x} ${centerY+endPosition.y} z`; + } + render(init) { + const{radius,clockWise} = this; + this.grand_total = this.slice_totals.reduce((a, b) => a + b, 0); + const prevSlicesProperties = this.slicesProperties || []; + this.slices = []; + this.elements_to_animate = []; + this.slicesProperties = []; + let curAngle = 180 - this.startAngle; + this.slice_totals.map((total, i) => { + const startAngle = curAngle; + const originDiffAngle = (total / this.grand_total) * FULL_ANGLE; + const diffAngle = clockWise ? -originDiffAngle : originDiffAngle; + const endAngle = curAngle = curAngle + diffAngle; + const startPosition = PieChart.getPositionByAngle(startAngle,radius); + const endPosition = PieChart.getPositionByAngle(endAngle,radius); + const prevProperty = init && prevSlicesProperties[i]; + let curStart,curEnd; + if(init){ + curStart = prevProperty?prevProperty.startPosition : startPosition; + curEnd = prevProperty? prevProperty.endPosition : startPosition; + }else{ + curStart = startPosition; + curEnd = endPosition; + } + const curPath = this.makeArcPath(curStart,curEnd); + let slice = makePath(curPath, 'pie-path', 'none', this.colors[i]); + slice.style.transition = 'transform .3s;'; + this.drawArea.appendChild(slice); - return this.store.map((line, i) => { - return translateVertLine( - line, newPos[i], oldPos[i] - ); + this.slices.push(slice); + this.slicesProperties.push({ + startPosition, + endPosition, + value: total, + total: this.grand_total, + startAngle, + endAngle, + angle:diffAngle }); - } - }, - - yMarkers: { - layerClass: 'y-markers', - makeElements(data) { - return data.map(marker => - yMarker(marker.position, marker.label, this.constants.width, - {pos:'right', mode: 'span', lineType: 'dashed'}) - ); - }, - animateElements(newData) { - [this.oldData, newData] = equilizeNoOfElements(this.oldData, newData); - - let newPos = newData.map(d => d.position); - let newLabels = newData.map(d => d.label); - - let oldPos = this.oldData.map(d => d.position); - let oldLabels = this.oldData.map(d => d.label); - - this.render(oldPos.map((pos, i) => { - return { - position: oldPos[i], - label: newLabels[i] - } - })); + if(init){ + this.elements_to_animate.push([{unit: slice, array: this.slices, index: this.slices.length - 1}, + {d:this.makeArcPath(startPosition,endPosition)}, + 650, "easein",null,{ + d:curPath + }]); + } - return this.store.map((line, i) => { - return translateHoriLine( - line, newPos[i], oldPos[i] - ); - }); + }); + if(init){ + runSMILAnimation(this.chartWrapper, this.svg, this.elements_to_animate); } - }, - - yRegions: { - layerClass: 'y-regions', - makeElements(data) { - return data.map(region => - yRegion(region.start, region.end, this.constants.width, - region.label) - ); - }, - animateElements(newData) { - [this.oldData, newData] = equilizeNoOfElements(this.oldData, newData); - - let newPos = newData.map(d => d.end); - let newLabels = newData.map(d => d.label); - let newStarts = newData.map(d => d.start); - - let oldPos = this.oldData.map(d => d.end); - let oldLabels = this.oldData.map(d => d.label); - let oldStarts = this.oldData.map(d => d.start); - - this.render(oldPos.map((pos, i) => { - return { - start: oldStarts[i], - end: oldPos[i], - label: newLabels[i] - } - })); - - let animateElements = []; - - this.store.map((rectGroup, i) => { - animateElements = animateElements.concat(animateRegion( - rectGroup, newStarts[i], newPos[i], oldPos[i] - )); - }); + } - return animateElements; + calTranslateByAngle(property){ + const{radius,hoverRadio} = this; + const position = PieChart.getPositionByAngle(property.startAngle+(property.angle / 2),radius); + return `translate3d(${(position.x) * hoverRadio}px,${(position.y) * hoverRadio}px,0)`; + } + hoverSlice(path,i,flag,e){ + if(!path) return; + const color = this.colors[i]; + if(flag){ + transform(path,this.calTranslateByAngle(this.slicesProperties[i])); + path.style.fill = lightenDarkenColor(color,50); + let g_off = getOffset(this.svg); + let x = e.pageX - g_off.left + 10; + let y = e.pageY - g_off.top - 10; + let title = (this.formatted_labels && this.formatted_labels.length>0 + ? this.formatted_labels[i] : this.labels[i]) + ': '; + let percent = (this.slice_totals[i]*100/this.grand_total).toFixed(1); + this.tip.set_values(x, y, title, percent + "%"); + this.tip.show_tip(); + }else{ + transform(path,'translate3d(0,0,0)'); + this.tip.hide_tip(); + path.style.fill = color; } - }, - - barGraph: { - layerClass: function() { return 'dataset-units dataset-bars dataset-' + this.constants.index; }, - makeElements(data) { - let c = this.constants; - this.unitType = 'bar'; - return data.yPositions.map((y, j) => { - return datasetBar( - data.xPositions[j], - y, - data.barWidth, - c.color, - (c.valuesOverPoints ? (c.stacked ? data.cumulativeYs[j] : data.values[j]) : ''), - j, - y - (c.stacked ? data.cumulativeYPos[j] : y), - { - zeroLine: data.zeroLine, - barsWidth: data.barsWidth, - minHeight: c.minHeight - } - ) - }); - }, - animateElements(newData) { - let c = this.constants; - - let newXPos = newData.xPositions; - let newYPos = newData.yPositions; - let newCYPos = newData.cumulativeYPos; - let newValues = newData.values; - let newCYs = newData.cumulativeYs; - - let oldXPos = this.oldData.xPositions; - let oldYPos = this.oldData.yPositions; - let oldCYPos = this.oldData.cumulativeYPos; - let oldValues = this.oldData.values; - let oldCYs = this.oldData.cumulativeYs; - - [oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos); - [oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos); - [oldCYPos, newCYPos] = equilizeNoOfElements(oldCYPos, newCYPos); - [oldValues, newValues] = equilizeNoOfElements(oldValues, newValues); - [oldCYs, newCYs] = equilizeNoOfElements(oldCYs, newCYs); - - this.render({ - xPositions: oldXPos, - yPositions: oldYPos, - cumulativeYPos: oldCYPos, - - values: newValues, - cumulativeYs: newCYs, - - zeroLine: this.oldData.zeroLine, - barsWidth: this.oldData.barsWidth, - barWidth: this.oldData.barWidth, - }); - - let animateElements = []; - - this.store.map((bar, i) => { - animateElements = animateElements.concat(animateBar( - bar, newXPos[i], newYPos[i], newData.barWidth, c.index, - {zeroLine: newData.zeroLine} - )); - }); + } - return animateElements; + mouseMove(e){ + const target = e.target; + let prevIndex = this.curActiveSliceIndex; + let prevAcitve = this.curActiveSlice; + for(let i = 0; i < this.slices.length; i++){ + if(target === this.slices[i]){ + this.hoverSlice(prevAcitve,prevIndex,false); + this.curActiveSlice = target; + this.curActiveSliceIndex = i; + this.hoverSlice(target,i,true,e); + break; + } } - }, - - lineGraph: { - layerClass: function() { return 'dataset-units dataset-line dataset-' + this.constants.index; }, - makeElements(data) { - let c = this.constants; - this.unitType = 'dot'; - - this.paths = getPaths( - data.xPositions, - data.yPositions, - c.color, - { - heatline: c.heatline, - regionFill: c.regionFill - }, - { - svgDefs: c.svgDefs, - zeroLine: data.zeroLine - } - ); + } + mouseLeave(){ + this.hoverSlice(this.curActiveSlice,this.curActiveSliceIndex,false); + } + bindTooltip() { + // this.drawArea.addEventListener('mousemove',this.mouseMove); + // this.drawArea.addEventListener('mouseleave',this.mouseLeave); + } - this.dots = []; + renderLegend() { + let x_values = this.formatted_labels && this.formatted_labels.length > 0 + ? this.formatted_labels : this.labels; + this.legend_totals.map((d, i) => { + const color = this.colors[i]; - if(!c.hideDots) { - this.dots = data.yPositions.map((y, j) => { - return datasetDot( - data.xPositions[j], - y, - data.radius, - c.color, - (c.valuesOverPoints ? data.values[j] : ''), - j - ) + if(d) { + let stats = $.create('div', { + className: 'stats', + inside: this.statsWrapper }); + stats.innerHTML = ` + + ${x_values[i]}: + ${d} + `; } + }); + } +} - return Object.values(this.paths).concat(this.dots); - // return this.dots; - }, - animateElements(newData) { - let newXPos = newData.xPositions; - let newYPos = newData.yPositions; - let newValues = newData.values; - - - let oldXPos = this.oldData.xPositions; - let oldYPos = this.oldData.yPositions; - let oldValues = this.oldData.values; - - [oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos); - [oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos); - [oldValues, newValues] = equilizeNoOfElements(oldValues, newValues); - - this.render({ - xPositions: oldXPos, - yPositions: oldYPos, - values: newValues, - - zeroLine: this.oldData.zeroLine, - radius: this.oldData.radius, - }); +// Playing around with dates - let animateElements = []; +// https://stackoverflow.com/a/11252167/6495043 +function treatAsUtc(dateStr) { + let result = new Date(dateStr); + result.setMinutes(result.getMinutes() - result.getTimezoneOffset()); + return result; +} - animateElements = animateElements.concat(animatePath( - this.paths, newXPos, newYPos, newData.zeroLine)); +function getDdMmYyyy(date) { + let dd = date.getDate(); + let mm = date.getMonth() + 1; // getMonth() is zero-based + return [ + (dd>9 ? '' : '0') + dd, + (mm>9 ? '' : '0') + mm, + date.getFullYear() + ].join('-'); +} - if(this.dots.length) { - this.dots.map((dot, i) => { - animateElements = animateElements.concat(animateDot( - dot, newXPos[i], newYPos[i])); - }); - } +function getWeeksBetween(startDateStr, endDateStr) { + return Math.ceil(getDaysBetween(startDateStr, endDateStr) / 7); +} - return animateElements; - } - } -}; +function getDaysBetween(startDateStr, endDateStr) { + let millisecondsPerDay = 24 * 60 * 60 * 1000; + return (treatAsUtc(endDateStr) - treatAsUtc(startDateStr)) / millisecondsPerDay; +} -function getComponent(name, constants, getData) { - let keys = Object.keys(componentConfigs).filter(k => name.includes(k)); - let config = componentConfigs[keys[0]]; - Object.assign(config, { - constants: constants, - getData: getData - }); - return new ChartComponent$1(config); +// mutates +function addDays(date, numberOfDays) { + date.setDate(date.getDate() + numberOfDays); } +// export function getMonthName() {} + function normalize(x) { // Calculates mantissa and exponent of a number // Returns normalized number and exponent @@ -2068,1091 +1979,1186 @@ function getMaxCheckpoint(value, distribution) { return distribution.filter(d => d < value).length; } -class AxisChart extends BaseChart { - constructor(args) { - super(args); - this.isSeries = args.isSeries; - this.valuesOverPoints = args.valuesOverPoints; - this.formatTooltipY = args.formatTooltipY; - this.formatTooltipX = args.formatTooltipX; - this.barOptions = args.barOptions || {}; - this.lineOptions = args.lineOptions || {}; - this.type = args.type || 'line'; - - this.xAxisMode = args.xAxisMode || 'span'; - this.yAxisMode = args.yAxisMode || 'span'; - - this.setup(); - } - - configure(args) {3; - super.configure(); - this.config.xAxisMode = args.xAxisMode; - this.config.yAxisMode = args.yAxisMode; - } - - setMargins() { - super.setMargins(); - this.translateXLeft = Y_AXIS_MARGIN; - this.translateXRight = Y_AXIS_MARGIN; - } - - prepareData(data=this.data) { - return dataPrep(data, this.type); - } - - prepareFirstData(data=this.data) { - return zeroDataPrep(data); - } - - calc() { - this.calcXPositions(); - this.calcYAxisParameters(this.getAllYValues(), this.type === 'line'); - } - - calcXPositions(s=this.state) { - let labels = this.data.labels; - s.datasetLength = labels.length; +class Heatmap extends BaseChart { + constructor({ + start = '', + domain = '', + subdomain = '', + data = {}, + discrete_domains = 0, + count_label = '', + legend_colors = [] + }) { + super(arguments[0]); - s.unitWidth = this.width/(s.datasetLength); - // Default, as per bar, and mixed. Only line will be a special case - s.xOffset = s.unitWidth/2; + this.type = 'heatmap'; - // // For a pure Line Chart - // s.unitWidth = this.width/(s.datasetLength - 1); - // s.xOffset = 0; + this.domain = domain; + this.subdomain = subdomain; + this.data = data; + this.discrete_domains = discrete_domains; + this.count_label = count_label; - s.xAxis = { - labels: labels, - positions: labels.map((d, i) => - floatTwo(s.xOffset + i * s.unitWidth) - ) - }; - } + let today = new Date(); + this.start = start || addDays(today, 365); - calcYAxisParameters(dataValues, withMinimum = 'false') { - const yPts = calcChartIntervals(dataValues, withMinimum); - const scaleMultiplier = this.height / getValueRange(yPts); - const intervalHeight = getIntervalSize(yPts) * scaleMultiplier; - const zeroLine = this.height - (getZeroIndex(yPts) * intervalHeight); + legend_colors = legend_colors.slice(0, 5); + this.legend_colors = this.validate_colors(legend_colors) + ? legend_colors + : ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']; - this.state.yAxis = { - labels: yPts, - positions: yPts.map(d => zeroLine - d * scaleMultiplier), - scaleMultiplier: scaleMultiplier, - zeroLine: zeroLine, - }; + // Fixed 5-color theme, + // More colors are difficult to parse visually + this.distribution_size = 5; - // Dependent if above changes - this.calcDatasetPoints(); - this.calcYExtremes(); - this.calcYRegions(); + this.translateX = 0; + this.setup(); } - calcDatasetPoints() { - let s = this.state; - let scaleAll = values => values.map(val => scale(val, s.yAxis)); - - s.datasets = this.data.datasets.map((d, i) => { - let values = d.values; - let cumulativeYs = d.cumulativeYs || []; - return { - name: d.name, - index: i, - chartType: d.chartType, + validate_colors(colors) { + if(colors.length < 5) return 0; - values: values, - yPositions: scaleAll(values), + let valid = 1; + colors.forEach(function(string) { + if(!isValidColor(string)) { + valid = 0; + console.warn('"' + string + '" is not a valid color.'); + } + }, this); - cumulativeYs: cumulativeYs, - cumulativeYPos: scaleAll(cumulativeYs), - }; - }); + return valid; } - calcYExtremes() { - let s = this.state; - if(this.barOptions.stacked) { - s.yExtremes = s.datasets[s.datasets.length - 1].cumulativeYPos; - return; - } - s.yExtremes = new Array(s.datasetLength).fill(9999); - s.datasets.map((d, i) => { - d.yPositions.map((pos, j) => { - if(pos < s.yExtremes[j]) { - s.yExtremes[j] = pos; - } - }); - }); - } + configure() { + super.configure(); + this.today = new Date(); - calcYRegions() { - let s = this.state; - if(this.data.yMarkers) { - this.state.yMarkers = this.data.yMarkers.map(d => { - d.position = scale(d.value, s.yAxis); - d.label += ': ' + d.value; - return d; - }); + if(!this.start) { + this.start = new Date(); + this.start.setFullYear( this.start.getFullYear() - 1 ); } - if(this.data.yRegions) { - this.state.yRegions = this.data.yRegions.map(d => { - d.start = scale(d.start, s.yAxis); - d.end = scale(d.end, s.yAxis); - return d; - }); + this.first_week_start = new Date(this.start.toDateString()); + this.last_week_start = new Date(this.today.toDateString()); + if(this.first_week_start.getDay() !== 7) { + addDays(this.first_week_start, (-1) * this.first_week_start.getDay()); + } + if(this.last_week_start.getDay() !== 7) { + 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; } - getAllYValues() { - // TODO: yMarkers, regions, sums, every Y value ever - let key = 'values'; + calcWidth() { + this.baseWidth = (this.no_of_cols + 3) * 12 ; - if(this.barOptions.stacked) { - key = 'cumulativeYs'; - let cumulative = new Array(this.state.datasetLength).fill(0); - this.data.datasets.map((d, i) => { - let values = this.data.datasets[i].values; - d[key] = cumulative = cumulative.map((c, i) => c + values[i]); - }); + if(this.discrete_domains) { + this.baseWidth += (12 * 12); } + } - return [].concat(...this.data.datasets.map(d => d[key])); + makeChartArea() { + super.makeChartArea(); + this.domainLabelGroup = makeSVGGroup(this.drawArea, + 'domain-label-group chart-label'); + + this.dataGroups = makeSVGGroup(this.drawArea, + 'data-groups', + `translate(0, 20)` + ); + // Array.prototype.slice.call( + // this.container.querySelectorAll('.graph-stats-container, .sub-title, .title') + // ).map(d => { + // d.style.display = 'None'; + // }); + // this.chartWrapper.style.marginTop = '0px'; + // this.chartWrapper.style.paddingTop = '0px'; } - setupComponents() { - let componentConfigs = [ - [ - 'yAxis', - { - mode: this.yAxisMode, - width: this.width, - // pos: 'right' - } - ], + calc() { - [ - 'xAxis', - { - mode: this.xAxisMode, - height: this.height, - // pos: 'right' - } - ], + let data_values = Object.keys(this.data).map(key => this.data[key]); + this.distribution = calcDistribution(data_values, this.distribution_size); - [ - 'yRegions', - { - width: this.width, - pos: 'right' - } - ], + this.month_names = ["January", "February", "March", "April", "May", "June", + "July", "August", "September", "October", "November", "December" ]; + } - componentConfigs.map(args => { - args.push( - function() { - return this.state[args[0]]; - }.bind(this) - ); - }); + render() { + this.renderAllWeeksAndStoreXValues(this.no_of_cols); + } - let barDatasets = this.state.datasets.filter(d => d.chartType === 'bar'); - let lineDatasets = this.state.datasets.filter(d => d.chartType === 'line'); + renderAllWeeksAndStoreXValues(no_of_weeks) { + // renderAllWeeksAndStoreXValues + this.domainLabelGroup.textContent = ''; + this.dataGroups.textContent = ''; - // console.log('barDatasets', barDatasets, this.state.datasets); + let current_week_sunday = new Date(this.first_week_start); + this.week_col = 0; + this.current_month = current_week_sunday.getMonth(); - let barsConfigs = barDatasets.map(d => { - let index = d.index; - return [ - 'barGraph' + '-' + d.index, - { - index: index, - color: this.colors[index], - stacked: this.barOptions.stacked, + 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); - // same for all datasets - valuesOverPoints: this.valuesOverPoints, - minHeight: this.height * MIN_BAR_PERCENT_HEIGHT, - }, - function() { - let s = this.state; - let d = s.datasets[index]; + for(var i = 0; i < no_of_weeks; i++) { + let data_group, month_change = 0; + let day = new Date(current_week_sunday); - let spaceRatio = this.barOptions.spaceRatio || BAR_CHART_SPACE_RATIO; - let barsWidth = s.unitWidth * (1 - spaceRatio); - let barWidth = barsWidth/(this.barOptions.stacked ? 1 : barDatasets.length); + [data_group, month_change] = this.get_week_squares_group(day, this.week_col); + this.dataGroups.appendChild(data_group); + this.week_col += 1 + parseInt(this.discrete_domains && month_change); + this.month_weeks[this.current_month]++; + if(month_change) { + this.current_month = (this.current_month + 1) % 12; + this.months.push(this.current_month + ''); + this.month_weeks[this.current_month] = 1; + } + addDays(current_week_sunday, 7); + } + this.render_month_labels(); + } + + get_week_squares_group(current_date, index) { + const no_of_weekdays = 7; + const square_side = 10; + const cell_padding = 2; + const step = 1; + const today_time = this.today.getTime(); - let xPositions = s.xAxis.positions.map(x => x - barsWidth/2); - if(!this.barOptions.stacked) { - xPositions = xPositions.map(p => p + barWidth * index); - } + let month_change = 0; + let week_col_change = 0; - return { - xPositions: xPositions, - yPositions: d.yPositions, - cumulativeYPos: d.cumulativeYPos, + let data_group = makeSVGGroup(this.dataGroups, 'data-group'); - values: d.values, - cumulativeYs: d.cumulativeYs, + for(var y = 0, i = 0; i < no_of_weekdays; i += step, y += (square_side + cell_padding)) { + let data_value = 0; + let colorIndex = 0; - zeroLine: s.yAxis.zeroLine, - barsWidth: barsWidth, - barWidth: barWidth, - }; - }.bind(this) - ]; - }); + let current_timestamp = current_date.getTime()/1000; + let timestamp = Math.floor(current_timestamp - (current_timestamp % 86400)).toFixed(1); - let lineConfigs = lineDatasets.map(d => { - let index = d.index; - return [ - 'lineGraph' + '-' + d.index, - { - index: index, - color: this.colors[index], - svgDefs: this.svgDefs, - heatline: this.lineOptions.heatline, - regionFill: this.lineOptions.regionFill, - hideDots: this.lineOptions.hideDots, + if(this.data[timestamp]) { + data_value = this.data[timestamp]; + } - // same for all datasets - valuesOverPoints: this.valuesOverPoints, - }, - function() { - let s = this.state; - let d = s.datasets[index]; + if(this.data[Math.round(timestamp)]) { + data_value = this.data[Math.round(timestamp)]; + } - return { - xPositions: s.xAxis.positions, - yPositions: d.yPositions, + if(data_value) { + colorIndex = getMaxCheckpoint(data_value, this.distribution); + } - values: d.values, + let x = 13 + (index + week_col_change) * 12; - zeroLine: s.yAxis.zeroLine, - radius: this.lineOptions.dotSize || LINE_CHART_DOT_SIZE, - }; - }.bind(this) - ]; - }); + let dataAttr = { + 'data-date': getDdMmYyyy(current_date), + 'data-value': data_value, + 'data-day': current_date.getDay() + }; - let markerConfigs = [ - [ - 'yMarkers', - { - width: this.width, - pos: 'right' - } - ] - ]; + let heatSquare = makeHeatSquare('day', x, y, square_side, + this.legend_colors[colorIndex], dataAttr); - markerConfigs.map(args => { - args.push( - function() { - return this.state[args[0]]; - }.bind(this) - ); - }); + data_group.appendChild(heatSquare); - componentConfigs = componentConfigs.concat(barsConfigs, lineConfigs, markerConfigs); + let next_date = new Date(current_date); + addDays(next_date, 1); + if(next_date.getTime() > today_time) break; - let optionals = ['yMarkers', 'yRegions']; - this.dataUnitComponents = []; - this.components = new Map(componentConfigs - .filter(args => !optionals.includes(args[0]) || this.state[args[0]]) - .map(args => { - let component = getComponent(...args); - if(args[0].includes('lineGraph') || args[0].includes('barGraph')) { - this.dataUnitComponents.push(component); + if(next_date.getMonth() - current_date.getMonth()) { + month_change = 1; + if(this.discrete_domains) { + week_col_change = 1; } - return [args[0], component]; - })); - } - - bindTooltip() { - // NOTE: could be in tooltip itself, as it is a given functionality for its parent - this.chartWrapper.addEventListener('mousemove', (e) => { - let o = getOffset(this.chartWrapper); - let relX = e.pageX - o.left - this.translateXLeft; - let relY = e.pageY - o.top - this.translateY; - if(relY < this.height + this.translateY * 2) { - this.mapTooltipXPosition(relX); - } else { - this.tip.hide_tip(); + this.month_start_points.push(13 + (index + week_col_change) * 12); } - }); - } + current_date = next_date; + } - mapTooltipXPosition(relX) { - let s = this.state; - if(!s.yExtremes) return; + return [data_group, month_change]; + } - let titles = s.xAxis.labels; - if(this.formatTooltipX && this.formatTooltipX(titles[0])) { - titles = titles.map(d=>this.formatTooltipX(d)); - } + render_month_labels() { + // this.first_month_label = 1; + // if (this.first_week_start.getDate() > 8) { + // this.first_month_label = 0; + // } + // this.last_month_label = 1; - let formatY = this.formatTooltipY && this.formatTooltipY(this.y[0].values[0]); + // let first_month = this.months.shift(); + // let first_month_start = this.month_start_points.shift(); + // render first month if - for(var i=s.datasetLength - 1; i >= 0 ; i--) { - let xVal = s.xAxis.positions[i]; - // let delta = i === 0 ? s.unitWidth : xVal - s.xAxis.positions[i-1]; - if(relX > xVal - s.unitWidth/2) { - let x = xVal + this.translateXLeft; - let y = s.yExtremes[i] + this.translateY; + // let last_month = this.months.pop(); + // let last_month_start = this.month_start_points.pop(); + // render last month if - let values = this.data.datasets.map((set, j) => { - return { - title: set.title, - value: formatY ? this.formatTooltipY(set.values[i]) : set.values[i], - color: this.colors[j], - }; - }); + this.months.shift(); + this.month_start_points.shift(); + this.months.pop(); + this.month_start_points.pop(); - this.tip.set_values(x, y, titles[i], '', values); - this.tip.show_tip(); - break; - } - } + this.month_start_points.map((start, i) => { + let month_name = this.month_names[this.months[i]].substring(0, 3); + let text = makeText('y-value-text', start+12, 10, month_name); + this.domainLabelGroup.appendChild(text); + }); } - makeOverlays() { - // Just make one out of the first element - // let index = this.xAxisLabels.length - 1; - // let unit = this.y[0].svg_units[index]; - // this.setCurrentDataPoint(index); + bindTooltip() { + Array.prototype.slice.call( + document.querySelectorAll(".data-group .day") + ).map(el => { + el.addEventListener('mouseenter', (e) => { + let count = e.target.getAttribute('data-value'); + let date_parts = e.target.getAttribute('data-date').split('-'); - // if(this.overlay) { - // this.overlay.parentNode.removeChild(this.overlay); - // } + let month = this.month_names[parseInt(date_parts[1])-1].substring(0, 3); - // this.overlay = unit.cloneNode(); - // this.overlay.style.fill = '#000000'; - // this.overlay.style.opacity = '0.4'; - // this.drawArea.appendChild(this.overlay); - this.overlayGuides = this.dataUnitComponents.map(c => { - return { - type: c.unitType, - overlay: undefined, - units: c.store, - } - }); + let g_off = this.chartWrapper.getBoundingClientRect(), p_off = e.target.getBoundingClientRect(); - this.state.currentIndex = 0; + let width = parseInt(e.target.getAttribute('width')); + let x = p_off.left - g_off.left + (width+2)/2; + let y = p_off.top - g_off.top - (width+2)/2; + let value = count + ' ' + this.count_label; + let name = ' on ' + month + ' ' + date_parts[0] + ', ' + date_parts[2]; - // Render overlays - this.overlayGuides.map(d => { - let currentUnit = d.units[this.state.currentIndex]; - d.overlay = makeOverlay[d.type](currentUnit); - this.drawArea.appendChild(d.overlay); + this.tip.set_values(x, y, name, value, [], 1); + this.tip.show_tip(); + }); }); } - bindOverlay() { - // on event, update overlay - this.parent.addEventListener('data-select', (e) => { - this.updateOverlay(e.svg_unit); - }); + update(data) { + super.update(data); + this.bindTooltip(); } +} - bindUnits(units_array) { - // units_array.map(unit => { - // unit.addEventListener('click', () => { - // let index = unit.getAttribute('data-point-index'); - // this.setCurrentDataPoint(index); - // }); - // }); - } +function dataPrep(data, type) { + data.labels = data.labels || []; - updateOverlay() { - this.overlayGuides.map(d => { - let currentUnit = d.units[this.state.currentIndex]; - updateOverlay[d.type](currentUnit, d.overlay); - }); - } + let datasetLength = data.labels.length; - onLeftArrow() { - this.setCurrentDataPoint(this.state.currentIndex - 1); + // Datasets + let datasets = data.datasets; + let zeroArray = new Array(datasetLength).fill(0); + if(!datasets) { + // default + datasets = [{ + values: zeroArray + }]; } - onRightArrow() { - this.setCurrentDataPoint(this.state.currentIndex + 1); - } + datasets.map((d, i)=> { + // Set values + if(!d.values) { + d.values = zeroArray; + } else { + // Check for non values + let vals = d.values; + vals = vals.map(val => (!isNaN(val) ? val : 0)); + + // Trim or extend + if(vals.length > datasetLength) { + vals = vals.slice(0, datasetLength); + } else { + vals = fillArray(vals, datasetLength - vals.length, 0); + } + } - getDataPoint(index=this.state.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.xAxis.labels[index]; - return data_point; - } + // Set labels + // - setCurrentDataPoint(index) { - let s = this.state; - index = parseInt(index); - if(index < 0) index = 0; - if(index >= s.xAxis.labels.length) index = s.xAxis.labels.length - 1; - if(index === s.currentIndex) return; - s.currentIndex = index; - fire(this.parent, "data-select", this.getDataPoint()); - } + // Set type + if(!d.chartType ) { + if(!AXIS_DATASET_CHART_TYPES.includes(type)) type === DEFAULT_AXIS_CHART_TYPE; + d.chartType = type; + } - // API + }); - addDataPoint(label, datasetValues, index=this.state.datasetLength) { - super.addDataPoint(label, datasetValues, index); - // console.log(label, datasetValues, this.data.labels); - this.data.labels.splice(index, 0, label); - this.data.datasets.map((d, i) => { - d.values.splice(index, 0, datasetValues[i]); - }); - // console.log(this.data); - this.update(this.data); - } + // Markers - removeDataPoint(index = this.state.datasetLength-1) { - super.removeDataPoint(index); - this.data.labels.splice(index, 1); - this.data.datasets.map(d => { - d.values.splice(index, 1); + // Regions + // data.yRegions = data.yRegions || []; + if(data.yRegions) { + data.yRegions.map(d => { + if(d.end < d.start) { + [d.start, d.end] = [d.end, d.start]; + } }); - this.update(this.data); } - // getDataPoint(index = 0) {} - // setCurrentDataPoint(point) {} + return data; +} - updateDataset(datasetValues, index=0) { - this.data.datasets[index].values = datasetValues; - this.update(this.data); - } - // addDataset(dataset, index) {} - // removeDataset(index = 0) {} +function zeroDataPrep(realData) { + let datasetLength = realData.labels.length; + let zeroArray = new Array(datasetLength).fill(0); - // updateDatasets(datasets) {} + let zeroData = { + labels: realData.labels.slice(0, -1), + datasets: realData.datasets.map(d => { + return { + name: '', + values: zeroArray.slice(0, -1), + chartType: d.chartType + } + }), + yRegions: [ + { + start: 0, + end: 0, + label: '' + } + ], + yMarkers: [ + { + value: 0, + label: '' + } + ] + }; - // updateDataPoint(dataPoint, index = 0) {} - // addDataPoint(dataPoint, index = 0) {} - // removeDataPoint(index = 0) {} + return zeroData; } +class ChartComponent { + constructor({ + layerClass = '', + layerTransform = '', + constants, -// keep a binding at the end of chart + getData, + makeElements, + animateElements + }) { + this.layerTransform = layerTransform; + this.constants = constants; -class PercentageChart extends BaseChart { - constructor(args) { - super(args); - this.type = 'percentage'; + this.makeElements = makeElements; + this.getData = getData; - this.max_slices = 10; - this.max_legend_points = 6; + this.animateElements = animateElements; - this.setup(); + this.store = []; + + this.layerClass = layerClass; + this.layerClass = typeof(this.layerClass) === 'function' + ? this.layerClass() : this.layerClass; + + this.refresh(); } - makeChartArea() { - this.chartWrapper.className += ' ' + 'graph-focus-margin'; - this.chartWrapper.style.marginTop = '45px'; + refresh(data) { + this.data = data || this.getData(); + } - this.statsWrapper.className += ' ' + 'graph-focus-margin'; - this.statsWrapper.style.marginBottom = '30px'; - this.statsWrapper.style.paddingTop = '0px'; + setup(parent) { + this.layer = makeSVGGroup(parent, this.layerClass, this.layerTransform); + } - this.svg = $.create('div', { - className: 'div', - inside: this.chartWrapper - }); + make() { + this.render(this.data); + this.oldData = this.data; + } - this.chart = $.create('div', { - className: 'progress-chart', - inside: this.svg - }); + render(data) { + this.store = this.makeElements(data); - this.percentageBar = $.create('div', { - className: 'progress', - inside: this.chart + this.layer.textContent = ''; + this.store.forEach(element => { + this.layer.appendChild(element); }); } - render() { - this.grand_total = this.sliceTotals.reduce((a, b) => a + b, 0); - this.slices = []; - this.sliceTotals.map((total, i) => { - let slice = $.create('div', { - className: `progress-bar`, - inside: this.percentageBar, - styles: { - background: this.colors[i], - width: total*100/this.grand_total + "%" - } - }); - this.slices.push(slice); - }); + update(animate = true) { + this.refresh(); + let animateElements = []; + if(animate) { + animateElements = this.animateElements(this.data); + } + return animateElements; } +} - calc() { - this.sliceTotals = []; - let all_totals = this.data.labels.map((d, i) => { - let total = 0; - this.data.datasets.map(e => { - total += e.values[i]; +let componentConfigs = { + yAxis: { + layerClass: 'y axis', + makeElements(data) { + return data.positions.map((position, i) => + yLine(position, data.labels[i], this.constants.width, + {mode: this.constants.mode, pos: this.constants.pos}) + ); + }, + + animateElements(newData) { + let newPos = newData.positions; + let newLabels = newData.labels; + let oldPos = this.oldData.positions; + let oldLabels = this.oldData.labels; + + [oldPos, newPos] = equilizeNoOfElements(oldPos, newPos); + [oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels); + + this.render({ + positions: oldPos, + labels: newLabels }); - return [total, d]; - }).filter(d => { return d[0] > 0; }); // keep only positive results - let totals = all_totals; + return this.store.map((line, i) => { + return translateHoriLine( + line, newPos[i], oldPos[i] + ); + }); + } + }, - if(all_totals.length > this.max_slices) { - all_totals.sort((a, b) => { return b[0] - a[0]; }); + xAxis: { + layerClass: 'x axis', + makeElements(data) { + return data.positions.map((position, i) => + xLine(position, data.labels[i], this.constants.height, + {mode: this.constants.mode, pos: this.constants.pos}) + ); + }, - totals = all_totals.slice(0, this.max_slices-1); - let others = all_totals.slice(this.max_slices-1); + animateElements(newData) { + let newPos = newData.positions; + let newLabels = newData.labels; + let oldPos = this.oldData.positions; + let oldLabels = this.oldData.labels; + + [oldPos, newPos] = equilizeNoOfElements(oldPos, newPos); + [oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels); + + this.render({ + positions: oldPos, + labels: newLabels + }); + + return this.store.map((line, i) => { + return translateVertLine( + line, newPos[i], oldPos[i] + ); + }); + } + }, - let sum_of_others = 0; - others.map(d => {sum_of_others += d[0];}); + yMarkers: { + layerClass: 'y-markers', + makeElements(data) { + return data.map(marker => + yMarker(marker.position, marker.label, this.constants.width, + {pos:'right', mode: 'span', lineType: 'dashed'}) + ); + }, + animateElements(newData) { + [this.oldData, newData] = equilizeNoOfElements(this.oldData, newData); - totals.push([sum_of_others, 'Rest']); + let newPos = newData.map(d => d.position); + let newLabels = newData.map(d => d.label); - this.colors[this.max_slices-1] = 'grey'; - } + let oldPos = this.oldData.map(d => d.position); + let oldLabels = this.oldData.map(d => d.label); - this.labels = []; - totals.map(d => { - this.sliceTotals.push(d[0]); - this.labels.push(d[1]); - }); + this.render(oldPos.map((pos, i) => { + return { + position: oldPos[i], + label: newLabels[i] + } + })); - this.legend_totals = this.sliceTotals.slice(0, this.max_legend_points); - } + return this.store.map((line, i) => { + return translateHoriLine( + line, newPos[i], oldPos[i] + ); + }); + } + }, - bindTooltip() { - // this.slices.map((slice, i) => { - // slice.addEventListener('mouseenter', () => { - // let g_off = getOffset(this.chartWrapper), p_off = getOffset(slice); + yRegions: { + layerClass: 'y-regions', + makeElements(data) { + return data.map(region => + yRegion(region.start, region.end, this.constants.width, + region.label) + ); + }, + animateElements(newData) { + [this.oldData, newData] = equilizeNoOfElements(this.oldData, newData); - // let x = p_off.left - g_off.left + slice.offsetWidth/2; - // let y = p_off.top - g_off.top - 6; - // let title = (this.formatted_labels && this.formatted_labels.length>0 - // ? this.formatted_labels[i] : this.labels[i]) + ': '; - // let percent = (this.sliceTotals[i]*100/this.grand_total).toFixed(1); + let newPos = newData.map(d => d.end); + let newLabels = newData.map(d => d.label); + let newStarts = newData.map(d => d.start); - // this.tip.set_values(x, y, title, percent + "%"); - // this.tip.show_tip(); - // }); - // }); - } + let oldPos = this.oldData.map(d => d.end); + let oldLabels = this.oldData.map(d => d.label); + let oldStarts = this.oldData.map(d => d.start); - renderLegend() { - // let x_values = this.formatted_labels && this.formatted_labels.length > 0 - // ? this.formatted_labels : this.labels; - // this.legend_totals.map((d, i) => { - // if(d) { - // let stats = $.create('div', { - // className: 'stats', - // inside: this.statsWrapper - // }); - // stats.innerHTML = ` - // - // ${x_values[i]}: - // ${d} - // `; - // } - // }); - } -} + this.render(oldPos.map((pos, i) => { + return { + start: oldStarts[i], + end: oldPos[i], + label: newLabels[i] + } + })); -const ANGLE_RATIO = Math.PI / 180; -const FULL_ANGLE = 360; + let animateElements = []; -class PieChart extends BaseChart { - constructor(args) { - super(args); - this.type = 'pie'; - this.elements_to_animate = null; - this.hoverRadio = args.hoverRadio || 0.1; - this.max_slices = 10; - this.max_legend_points = 6; - this.isAnimate = false; - this.startAngle = args.startAngle || 0; - this.clockWise = args.clockWise || false; - this.mouseMove = this.mouseMove.bind(this); - this.mouseLeave = this.mouseLeave.bind(this); - this.setup(); - } - calc() { - this.centerX = this.width / 2; - this.centerY = this.height / 2; - this.radius = (this.height > this.width ? this.centerX : this.centerY); - this.slice_totals = []; - let all_totals = this.data.labels.map((d, i) => { - let total = 0; - this.data.datasets.map(e => { - total += e.values[i]; + this.store.map((rectGroup, i) => { + animateElements = animateElements.concat(animateRegion( + rectGroup, newStarts[i], newPos[i], oldPos[i] + )); }); - return [total, d]; - }).filter(d => { return d[0] > 0; }); // keep only positive results - let totals = all_totals; + return animateElements; + } + }, - if(all_totals.length > this.max_slices) { - all_totals.sort((a, b) => { return b[0] - a[0]; }); + barGraph: { + layerClass: function() { return 'dataset-units dataset-bars dataset-' + this.constants.index; }, + makeElements(data) { + let c = this.constants; + this.unitType = 'bar'; + return data.yPositions.map((y, j) => { + return datasetBar( + data.xPositions[j], + y, + data.barWidth, + c.color, + (c.valuesOverPoints ? (c.stacked ? data.cumulativeYs[j] : data.values[j]) : ''), + j, + y - (c.stacked ? data.cumulativeYPos[j] : y), + { + zeroLine: data.zeroLine, + barsWidth: data.barsWidth, + minHeight: c.minHeight + } + ) + }); + }, + animateElements(newData) { + let c = this.constants; - totals = all_totals.slice(0, this.max_slices-1); - let others = all_totals.slice(this.max_slices-1); + let newXPos = newData.xPositions; + let newYPos = newData.yPositions; + let newCYPos = newData.cumulativeYPos; + let newValues = newData.values; + let newCYs = newData.cumulativeYs; - let sum_of_others = 0; - others.map(d => {sum_of_others += d[0];}); + let oldXPos = this.oldData.xPositions; + let oldYPos = this.oldData.yPositions; + let oldCYPos = this.oldData.cumulativeYPos; + let oldValues = this.oldData.values; + let oldCYs = this.oldData.cumulativeYs; - totals.push([sum_of_others, 'Rest']); + [oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos); + [oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos); + [oldCYPos, newCYPos] = equilizeNoOfElements(oldCYPos, newCYPos); + [oldValues, newValues] = equilizeNoOfElements(oldValues, newValues); + [oldCYs, newCYs] = equilizeNoOfElements(oldCYs, newCYs); - this.colors[this.max_slices-1] = 'grey'; - } + this.render({ + xPositions: oldXPos, + yPositions: oldYPos, + cumulativeYPos: oldCYPos, - this.labels = []; - totals.map(d => { - this.slice_totals.push(d[0]); - this.labels.push(d[1]); - }); + values: newValues, + cumulativeYs: newCYs, - this.legend_totals = this.slice_totals.slice(0, this.max_legend_points); - } + zeroLine: this.oldData.zeroLine, + barsWidth: this.oldData.barsWidth, + barWidth: this.oldData.barWidth, + }); - static getPositionByAngle(angle,radius) { - return { - x:Math.sin(angle * ANGLE_RATIO) * radius, - y:Math.cos(angle * ANGLE_RATIO) * radius, - }; - } - makeArcPath(startPosition,endPosition){ - const{centerX,centerY,radius,clockWise} = this; - return `M${centerX} ${centerY} L${centerX+startPosition.x} ${centerY+startPosition.y} A ${radius} ${radius} 0 0 ${clockWise ? 1 : 0} ${centerX+endPosition.x} ${centerY+endPosition.y} z`; - } - render(init) { - const{radius,clockWise} = this; - this.grand_total = this.slice_totals.reduce((a, b) => a + b, 0); - const prevSlicesProperties = this.slicesProperties || []; - this.slices = []; - this.elements_to_animate = []; - this.slicesProperties = []; - let curAngle = 180 - this.startAngle; - this.slice_totals.map((total, i) => { - const startAngle = curAngle; - const originDiffAngle = (total / this.grand_total) * FULL_ANGLE; - const diffAngle = clockWise ? -originDiffAngle : originDiffAngle; - const endAngle = curAngle = curAngle + diffAngle; - const startPosition = PieChart.getPositionByAngle(startAngle,radius); - const endPosition = PieChart.getPositionByAngle(endAngle,radius); - const prevProperty = init && prevSlicesProperties[i]; - let curStart,curEnd; - if(init){ - curStart = prevProperty?prevProperty.startPosition : startPosition; - curEnd = prevProperty? prevProperty.endPosition : startPosition; - }else{ - curStart = startPosition; - curEnd = endPosition; - } - const curPath = this.makeArcPath(curStart,curEnd); - let slice = makePath(curPath, 'pie-path', 'none', this.colors[i]); - slice.style.transition = 'transform .3s;'; - this.drawArea.appendChild(slice); + let animateElements = []; - this.slices.push(slice); - this.slicesProperties.push({ - startPosition, - endPosition, - value: total, - total: this.grand_total, - startAngle, - endAngle, - angle:diffAngle - }); - if(init){ - this.elements_to_animate.push([{unit: slice, array: this.slices, index: this.slices.length - 1}, - {d:this.makeArcPath(startPosition,endPosition)}, - 650, "easein",null,{ - d:curPath - }]); - } + this.store.map((bar, i) => { + animateElements = animateElements.concat(animateBar( + bar, newXPos[i], newYPos[i], newData.barWidth, c.index, + {zeroLine: newData.zeroLine} + )); + }); - }); - if(init){ - runSMILAnimation(this.chartWrapper, this.svg, this.elements_to_animate); + return animateElements; } - } + }, - calTranslateByAngle(property){ - const{radius,hoverRadio} = this; - const position = PieChart.getPositionByAngle(property.startAngle+(property.angle / 2),radius); - return `translate3d(${(position.x) * hoverRadio}px,${(position.y) * hoverRadio}px,0)`; - } - hoverSlice(path,i,flag,e){ - if(!path) return; - const color = this.colors[i]; - if(flag){ - transform(path,this.calTranslateByAngle(this.slicesProperties[i])); - path.style.fill = lightenDarkenColor(color,50); - let g_off = getOffset(this.svg); - let x = e.pageX - g_off.left + 10; - let y = e.pageY - g_off.top - 10; - let title = (this.formatted_labels && this.formatted_labels.length>0 - ? this.formatted_labels[i] : this.labels[i]) + ': '; - let percent = (this.slice_totals[i]*100/this.grand_total).toFixed(1); - this.tip.set_values(x, y, title, percent + "%"); - this.tip.show_tip(); - }else{ - transform(path,'translate3d(0,0,0)'); - this.tip.hide_tip(); - path.style.fill = color; - } - } + lineGraph: { + layerClass: function() { return 'dataset-units dataset-line dataset-' + this.constants.index; }, + makeElements(data) { + let c = this.constants; + this.unitType = 'dot'; - mouseMove(e){ - const target = e.target; - let prevIndex = this.curActiveSliceIndex; - let prevAcitve = this.curActiveSlice; - for(let i = 0; i < this.slices.length; i++){ - if(target === this.slices[i]){ - this.hoverSlice(prevAcitve,prevIndex,false); - this.curActiveSlice = target; - this.curActiveSliceIndex = i; - this.hoverSlice(target,i,true,e); - break; + this.paths = getPaths( + data.xPositions, + data.yPositions, + c.color, + { + heatline: c.heatline, + regionFill: c.regionFill + }, + { + svgDefs: c.svgDefs, + zeroLine: data.zeroLine + } + ); + + this.dots = []; + + if(!c.hideDots) { + this.dots = data.yPositions.map((y, j) => { + return datasetDot( + data.xPositions[j], + y, + data.radius, + c.color, + (c.valuesOverPoints ? data.values[j] : ''), + j + ) + }); } - } - } - mouseLeave(){ - this.hoverSlice(this.curActiveSlice,this.curActiveSliceIndex,false); - } - bindTooltip() { - // this.drawArea.addEventListener('mousemove',this.mouseMove); - // this.drawArea.addEventListener('mouseleave',this.mouseLeave); - } - renderLegend() { - let x_values = this.formatted_labels && this.formatted_labels.length > 0 - ? this.formatted_labels : this.labels; - this.legend_totals.map((d, i) => { - const color = this.colors[i]; + return Object.values(this.paths).concat(this.dots); + // return this.dots; + }, + animateElements(newData) { + let newXPos = newData.xPositions; + let newYPos = newData.yPositions; + let newValues = newData.values; - if(d) { - let stats = $.create('div', { - className: 'stats', - inside: this.statsWrapper + + let oldXPos = this.oldData.xPositions; + let oldYPos = this.oldData.yPositions; + let oldValues = this.oldData.values; + + [oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos); + [oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos); + [oldValues, newValues] = equilizeNoOfElements(oldValues, newValues); + + this.render({ + xPositions: oldXPos, + yPositions: oldYPos, + values: newValues, + + zeroLine: this.oldData.zeroLine, + radius: this.oldData.radius, + }); + + let animateElements = []; + + animateElements = animateElements.concat(animatePath( + this.paths, newXPos, newYPos, newData.zeroLine)); + + if(this.dots.length) { + this.dots.map((dot, i) => { + animateElements = animateElements.concat(animateDot( + dot, newXPos[i], newYPos[i])); }); - stats.innerHTML = ` - - ${x_values[i]}: - ${d} - `; } - }); + + return animateElements; + } } +}; + +function getComponent(name, constants, getData) { + let keys = Object.keys(componentConfigs).filter(k => name.includes(k)); + let config = componentConfigs[keys[0]]; + Object.assign(config, { + constants: constants, + getData: getData + }); + return new ChartComponent(config); } -// Playing around with dates +class AxisChart extends BaseChart { + constructor(args) { + super(args); + this.isSeries = args.isSeries; + this.valuesOverPoints = args.valuesOverPoints; + this.formatTooltipY = args.formatTooltipY; + this.formatTooltipX = args.formatTooltipX; + this.barOptions = args.barOptions || {}; + this.lineOptions = args.lineOptions || {}; + this.type = args.type || 'line'; -// https://stackoverflow.com/a/11252167/6495043 -function treatAsUtc(dateStr) { - let result = new Date(dateStr); - result.setMinutes(result.getMinutes() - result.getTimezoneOffset()); - return result; -} + this.xAxisMode = args.xAxisMode || 'span'; + this.yAxisMode = args.yAxisMode || 'span'; -function getDdMmYyyy(date) { - let dd = date.getDate(); - let mm = date.getMonth() + 1; // getMonth() is zero-based - return [ - (dd>9 ? '' : '0') + dd, - (mm>9 ? '' : '0') + mm, - date.getFullYear() - ].join('-'); -} + this.setup(); + } -function getWeeksBetween(startDateStr, endDateStr) { - return Math.ceil(getDaysBetween(startDateStr, endDateStr) / 7); -} + configure(args) {3; + super.configure(); + this.config.xAxisMode = args.xAxisMode; + this.config.yAxisMode = args.yAxisMode; + } -function getDaysBetween(startDateStr, endDateStr) { - let millisecondsPerDay = 24 * 60 * 60 * 1000; - return (treatAsUtc(endDateStr) - treatAsUtc(startDateStr)) / millisecondsPerDay; -} + setMargins() { + super.setMargins(); + this.leftMargin = Y_AXIS_MARGIN; + this.rightMargin = Y_AXIS_MARGIN; + } -// mutates -function addDays(date, numberOfDays) { - date.setDate(date.getDate() + numberOfDays); -} + prepareData(data=this.data) { + return dataPrep(data, this.type); + } -// export function getMonthName() {} + prepareFirstData(data=this.data) { + return zeroDataPrep(data); + } -class Heatmap extends BaseChart { - constructor({ - start = '', - domain = '', - subdomain = '', - data = {}, - discrete_domains = 0, - count_label = '', - legend_colors = [] - }) { - super(arguments[0]); + calc() { + this.calcXPositions(); + this.calcYAxisParameters(this.getAllYValues(), this.type === 'line'); + } - this.type = 'heatmap'; + calcXPositions(s=this.state) { + let labels = this.data.labels; + s.datasetLength = labels.length; - this.domain = domain; - this.subdomain = subdomain; - this.data = data; - this.discrete_domains = discrete_domains; - this.count_label = count_label; + s.unitWidth = this.width/(s.datasetLength); + // Default, as per bar, and mixed. Only line will be a special case + s.xOffset = s.unitWidth/2; - let today = new Date(); - this.start = start || addDays(today, 365); + // // For a pure Line Chart + // s.unitWidth = this.width/(s.datasetLength - 1); + // s.xOffset = 0; - legend_colors = legend_colors.slice(0, 5); - this.legend_colors = this.validate_colors(legend_colors) - ? legend_colors - : ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']; + s.xAxis = { + labels: labels, + positions: labels.map((d, i) => + floatTwo(s.xOffset + i * s.unitWidth) + ) + }; + } - // Fixed 5-color theme, - // More colors are difficult to parse visually - this.distribution_size = 5; + calcYAxisParameters(dataValues, withMinimum = 'false') { + const yPts = calcChartIntervals(dataValues, withMinimum); + const scaleMultiplier = this.height / getValueRange(yPts); + const intervalHeight = getIntervalSize(yPts) * scaleMultiplier; + const zeroLine = this.height - (getZeroIndex(yPts) * intervalHeight); - this.translateX = 0; - this.setup(); + this.state.yAxis = { + labels: yPts, + positions: yPts.map(d => zeroLine - d * scaleMultiplier), + scaleMultiplier: scaleMultiplier, + zeroLine: zeroLine, + }; + + // Dependent if above changes + this.calcDatasetPoints(); + this.calcYExtremes(); + this.calcYRegions(); } - validate_colors(colors) { - if(colors.length < 5) return 0; + calcDatasetPoints() { + let s = this.state; + let scaleAll = values => values.map(val => scale(val, s.yAxis)); - let valid = 1; - colors.forEach(function(string) { - if(!isValidColor(string)) { - valid = 0; - console.warn('"' + string + '" is not a valid color.'); - } - }, this); + s.datasets = this.data.datasets.map((d, i) => { + let values = d.values; + let cumulativeYs = d.cumulativeYs || []; + return { + name: d.name, + index: i, + chartType: d.chartType, - return valid; - } + values: values, + yPositions: scaleAll(values), - configure() { - super.configure(); - this.today = new Date(); + cumulativeYs: cumulativeYs, + cumulativeYPos: scaleAll(cumulativeYs), + }; + }); + } - if(!this.start) { - this.start = new Date(); - this.start.setFullYear( this.start.getFullYear() - 1 ); + calcYExtremes() { + let s = this.state; + if(this.barOptions.stacked) { + s.yExtremes = s.datasets[s.datasets.length - 1].cumulativeYPos; + return; } - this.first_week_start = new Date(this.start.toDateString()); - this.last_week_start = new Date(this.today.toDateString()); - if(this.first_week_start.getDay() !== 7) { - addDays(this.first_week_start, (-1) * this.first_week_start.getDay()); + s.yExtremes = new Array(s.datasetLength).fill(9999); + s.datasets.map((d, i) => { + d.yPositions.map((pos, j) => { + if(pos < s.yExtremes[j]) { + s.yExtremes[j] = pos; + } + }); + }); + } + + calcYRegions() { + let s = this.state; + if(this.data.yMarkers) { + this.state.yMarkers = this.data.yMarkers.map(d => { + d.position = scale(d.value, s.yAxis); + d.label += ': ' + d.value; + return d; + }); } - if(this.last_week_start.getDay() !== 7) { - addDays(this.last_week_start, (-1) * this.last_week_start.getDay()); + if(this.data.yRegions) { + this.state.yRegions = this.data.yRegions.map(d => { + d.start = scale(d.start, s.yAxis); + d.end = scale(d.end, s.yAxis); + return d; + }); } - this.no_of_cols = getWeeksBetween(this.first_week_start + '', this.last_week_start + '') + 1; } - calcWidth() { - this.baseWidth = (this.no_of_cols + 3) * 12 ; + getAllYValues() { + // TODO: yMarkers, regions, sums, every Y value ever + let key = 'values'; - if(this.discrete_domains) { - this.baseWidth += (12 * 12); + if(this.barOptions.stacked) { + key = 'cumulativeYs'; + let cumulative = new Array(this.state.datasetLength).fill(0); + this.data.datasets.map((d, i) => { + let values = this.data.datasets[i].values; + d[key] = cumulative = cumulative.map((c, i) => c + values[i]); + }); } - } - - makeChartArea() { - super.makeChartArea(); - this.domainLabelGroup = makeSVGGroup(this.drawArea, - 'domain-label-group chart-label'); - this.dataGroups = makeSVGGroup(this.drawArea, - 'data-groups', - `translate(0, 20)` - ); - // Array.prototype.slice.call( - // this.container.querySelectorAll('.graph-stats-container, .sub-title, .title') - // ).map(d => { - // d.style.display = 'None'; - // }); - // this.chartWrapper.style.marginTop = '0px'; - // this.chartWrapper.style.paddingTop = '0px'; + return [].concat(...this.data.datasets.map(d => d[key])); } - calc() { + setupComponents() { + let componentConfigs = [ + [ + 'yAxis', + { + mode: this.yAxisMode, + width: this.width, + // pos: 'right' + } + ], - let data_values = Object.keys(this.data).map(key => this.data[key]); - this.distribution = calcDistribution(data_values, this.distribution_size); + [ + 'xAxis', + { + mode: this.xAxisMode, + height: this.height, + // pos: 'right' + } + ], - this.month_names = ["January", "February", "March", "April", "May", "June", - "July", "August", "September", "October", "November", "December" + [ + 'yRegions', + { + width: this.width, + pos: 'right' + } + ], ]; - } - render() { - this.renderAllWeeksAndStoreXValues(this.no_of_cols); - } + componentConfigs.map(args => { + args.push( + function() { + return this.state[args[0]]; + }.bind(this) + ); + }); - renderAllWeeksAndStoreXValues(no_of_weeks) { - // renderAllWeeksAndStoreXValues - this.domainLabelGroup.textContent = ''; - this.dataGroups.textContent = ''; + let barDatasets = this.state.datasets.filter(d => d.chartType === 'bar'); + let lineDatasets = this.state.datasets.filter(d => d.chartType === 'line'); - let current_week_sunday = new Date(this.first_week_start); - this.week_col = 0; - this.current_month = current_week_sunday.getMonth(); + // console.log('barDatasets', barDatasets, this.state.datasets); - 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); + let barsConfigs = barDatasets.map(d => { + let index = d.index; + return [ + 'barGraph' + '-' + d.index, + { + index: index, + color: this.colors[index], + stacked: this.barOptions.stacked, - for(var i = 0; i < no_of_weeks; i++) { - let data_group, month_change = 0; - let day = new Date(current_week_sunday); + // same for all datasets + valuesOverPoints: this.valuesOverPoints, + minHeight: this.height * MIN_BAR_PERCENT_HEIGHT, + }, + function() { + let s = this.state; + let d = s.datasets[index]; - [data_group, month_change] = this.get_week_squares_group(day, this.week_col); - this.dataGroups.appendChild(data_group); - this.week_col += 1 + parseInt(this.discrete_domains && month_change); - this.month_weeks[this.current_month]++; - if(month_change) { - this.current_month = (this.current_month + 1) % 12; - this.months.push(this.current_month + ''); - this.month_weeks[this.current_month] = 1; - } - addDays(current_week_sunday, 7); - } - this.render_month_labels(); - } + let spaceRatio = this.barOptions.spaceRatio || BAR_CHART_SPACE_RATIO; + let barsWidth = s.unitWidth * (1 - spaceRatio); + let barWidth = barsWidth/(this.barOptions.stacked ? 1 : barDatasets.length); - get_week_squares_group(current_date, index) { - const no_of_weekdays = 7; - const square_side = 10; - const cell_padding = 2; - const step = 1; - const today_time = this.today.getTime(); + let xPositions = s.xAxis.positions.map(x => x - barsWidth/2); + if(!this.barOptions.stacked) { + xPositions = xPositions.map(p => p + barWidth * index); + } - let month_change = 0; - let week_col_change = 0; + return { + xPositions: xPositions, + yPositions: d.yPositions, + cumulativeYPos: d.cumulativeYPos, + + values: d.values, + cumulativeYs: d.cumulativeYs, + + zeroLine: s.yAxis.zeroLine, + barsWidth: barsWidth, + barWidth: barWidth, + }; + }.bind(this) + ]; + }); + + let lineConfigs = lineDatasets.map(d => { + let index = d.index; + return [ + 'lineGraph' + '-' + d.index, + { + index: index, + color: this.colors[index], + svgDefs: this.svgDefs, + heatline: this.lineOptions.heatline, + regionFill: this.lineOptions.regionFill, + hideDots: this.lineOptions.hideDots, + + // same for all datasets + valuesOverPoints: this.valuesOverPoints, + }, + function() { + let s = this.state; + let d = s.datasets[index]; + + return { + xPositions: s.xAxis.positions, + yPositions: d.yPositions, + + values: d.values, - let data_group = makeSVGGroup(this.dataGroups, 'data-group'); + zeroLine: s.yAxis.zeroLine, + radius: this.lineOptions.dotSize || LINE_CHART_DOT_SIZE, + }; + }.bind(this) + ]; + }); - for(var y = 0, i = 0; i < no_of_weekdays; i += step, y += (square_side + cell_padding)) { - let data_value = 0; - let colorIndex = 0; + let markerConfigs = [ + [ + 'yMarkers', + { + width: this.width, + pos: 'right' + } + ] + ]; - let current_timestamp = current_date.getTime()/1000; - let timestamp = Math.floor(current_timestamp - (current_timestamp % 86400)).toFixed(1); + markerConfigs.map(args => { + args.push( + function() { + return this.state[args[0]]; + }.bind(this) + ); + }); - if(this.data[timestamp]) { - data_value = this.data[timestamp]; - } + componentConfigs = componentConfigs.concat(barsConfigs, lineConfigs, markerConfigs); - if(this.data[Math.round(timestamp)]) { - data_value = this.data[Math.round(timestamp)]; - } + let optionals = ['yMarkers', 'yRegions']; + this.dataUnitComponents = []; - if(data_value) { - colorIndex = getMaxCheckpoint(data_value, this.distribution); - } + this.components = new Map(componentConfigs + .filter(args => !optionals.includes(args[0]) || this.state[args[0]]) + .map(args => { + let component = getComponent(...args); + if(args[0].includes('lineGraph') || args[0].includes('barGraph')) { + this.dataUnitComponents.push(component); + } + return [args[0], component]; + })); + } - let x = 13 + (index + week_col_change) * 12; + bindTooltip() { + // NOTE: could be in tooltip itself, as it is a given functionality for its parent + this.chartWrapper.addEventListener('mousemove', (e) => { + let o = getOffset(this.chartWrapper); + let relX = e.pageX - o.left - this.leftMargin; + let relY = e.pageY - o.top - this.translateY; - let dataAttr = { - 'data-date': getDdMmYyyy(current_date), - 'data-value': data_value, - 'data-day': current_date.getDay() - }; + if(relY < this.height + this.translateY * 2) { + this.mapTooltipXPosition(relX); + } else { + this.tip.hide_tip(); + } + }); + } - let heatSquare = makeHeatSquare('day', x, y, square_side, - this.legend_colors[colorIndex], dataAttr); + mapTooltipXPosition(relX) { + let s = this.state; + if(!s.yExtremes) return; - data_group.appendChild(heatSquare); + let titles = s.xAxis.labels; + if(this.formatTooltipX && this.formatTooltipX(titles[0])) { + titles = titles.map(d=>this.formatTooltipX(d)); + } - let next_date = new Date(current_date); - addDays(next_date, 1); - if(next_date.getTime() > today_time) break; + let formatY = this.formatTooltipY && this.formatTooltipY(this.y[0].values[0]); + for(var i=s.datasetLength - 1; i >= 0 ; i--) { + let xVal = s.xAxis.positions[i]; + // let delta = i === 0 ? s.unitWidth : xVal - s.xAxis.positions[i-1]; + if(relX > xVal - s.unitWidth/2) { + let x = xVal + this.leftMargin; + let y = s.yExtremes[i] + this.translateY; - if(next_date.getMonth() - current_date.getMonth()) { - month_change = 1; - if(this.discrete_domains) { - week_col_change = 1; - } + let values = this.data.datasets.map((set, j) => { + return { + title: set.title, + value: formatY ? this.formatTooltipY(set.values[i]) : set.values[i], + color: this.colors[j], + }; + }); - this.month_start_points.push(13 + (index + week_col_change) * 12); + this.tip.set_values(x, y, titles[i], '', values); + this.tip.show_tip(); + break; } - current_date = next_date; } - - return [data_group, month_change]; } - render_month_labels() { - // this.first_month_label = 1; - // if (this.first_week_start.getDate() > 8) { - // this.first_month_label = 0; + makeOverlays() { + // Just make one out of the first element + // let index = this.xAxisLabels.length - 1; + // let unit = this.y[0].svg_units[index]; + // this.setCurrentDataPoint(index); + + // if(this.overlay) { + // this.overlay.parentNode.removeChild(this.overlay); // } - // this.last_month_label = 1; - // let first_month = this.months.shift(); - // let first_month_start = this.month_start_points.shift(); - // render first month if + // this.overlay = unit.cloneNode(); + // this.overlay.style.fill = '#000000'; + // this.overlay.style.opacity = '0.4'; + // this.drawArea.appendChild(this.overlay); + this.overlayGuides = this.dataUnitComponents.map(c => { + return { + type: c.unitType, + overlay: undefined, + units: c.store, + } + }); - // let last_month = this.months.pop(); - // let last_month_start = this.month_start_points.pop(); - // render last month if + this.state.currentIndex = 0; - this.months.shift(); - this.month_start_points.shift(); - this.months.pop(); - this.month_start_points.pop(); + // Render overlays + this.overlayGuides.map(d => { + let currentUnit = d.units[this.state.currentIndex]; + d.overlay = makeOverlay[d.type](currentUnit); + this.drawArea.appendChild(d.overlay); + }); + } - this.month_start_points.map((start, i) => { - let month_name = this.month_names[this.months[i]].substring(0, 3); - let text = makeText('y-value-text', start+12, 10, month_name); - this.domainLabelGroup.appendChild(text); + bindOverlay() { + // on event, update overlay + this.parent.addEventListener('data-select', (e) => { + this.updateOverlay(e.svg_unit); }); } - bindTooltip() { - Array.prototype.slice.call( - document.querySelectorAll(".data-group .day") - ).map(el => { - el.addEventListener('mouseenter', (e) => { - let count = e.target.getAttribute('data-value'); - let date_parts = e.target.getAttribute('data-date').split('-'); + bindUnits(units_array) { + // units_array.map(unit => { + // unit.addEventListener('click', () => { + // let index = unit.getAttribute('data-point-index'); + // this.setCurrentDataPoint(index); + // }); + // }); + } - let month = this.month_names[parseInt(date_parts[1])-1].substring(0, 3); + updateOverlay() { + this.overlayGuides.map(d => { + let currentUnit = d.units[this.state.currentIndex]; + updateOverlay[d.type](currentUnit, d.overlay); + }); + } - let g_off = this.chartWrapper.getBoundingClientRect(), p_off = e.target.getBoundingClientRect(); + onLeftArrow() { + this.setCurrentDataPoint(this.state.currentIndex - 1); + } - let width = parseInt(e.target.getAttribute('width')); - let x = p_off.left - g_off.left + (width+2)/2; - let y = p_off.top - g_off.top - (width+2)/2; - let value = count + ' ' + this.count_label; - let name = ' on ' + month + ' ' + date_parts[0] + ', ' + date_parts[2]; + onRightArrow() { + this.setCurrentDataPoint(this.state.currentIndex + 1); + } - this.tip.set_values(x, y, name, value, [], 1); - this.tip.show_tip(); - }); + getDataPoint(index=this.state.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.xAxis.labels[index]; + return data_point; + } + + setCurrentDataPoint(index) { + let s = this.state; + index = parseInt(index); + if(index < 0) index = 0; + if(index >= s.xAxis.labels.length) index = s.xAxis.labels.length - 1; + if(index === s.currentIndex) return; + s.currentIndex = index; + fire(this.parent, "data-select", this.getDataPoint()); + } + + // API + + addDataPoint(label, datasetValues, index=this.state.datasetLength) { + super.addDataPoint(label, datasetValues, index); + // console.log(label, datasetValues, this.data.labels); + this.data.labels.splice(index, 0, label); + this.data.datasets.map((d, i) => { + d.values.splice(index, 0, datasetValues[i]); }); + // console.log(this.data); + this.update(this.data); } - update(data) { - super.update(data); - this.bindTooltip(); + removeDataPoint(index = this.state.datasetLength-1) { + super.removeDataPoint(index); + this.data.labels.splice(index, 1); + this.data.datasets.map(d => { + d.values.splice(index, 1); + }); + this.update(this.data); + } + + // getDataPoint(index = 0) {} + // setCurrentDataPoint(point) {} + + updateDataset(datasetValues, index=0) { + this.data.datasets[index].values = datasetValues; + this.update(this.data); } + // addDataset(dataset, index) {} + // removeDataset(index = 0) {} + + // updateDatasets(datasets) {} + + // updateDataPoint(dataPoint, index = 0) {} + // addDataPoint(dataPoint, index = 0) {} + // removeDataPoint(index = 0) {} } + +// keep a binding at the end of chart + +// import MultiAxisChart from './charts/MultiAxisChart'; const chartTypes = { // multiaxis: MultiAxisChart, percentage: PercentageChart, diff --git a/dist/frappe-charts.min.cjs.js b/dist/frappe-charts.min.cjs.js index d0b6c80..9460d5d 100644 --- a/dist/frappe-charts.min.cjs.js +++ b/dist/frappe-charts.min.cjs.js @@ -1 +1 @@ -"use strict";function __$styleInject(t,e){if("undefined"==typeof document)return e;t=t||"";var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");return i.type="text/css",a.appendChild(i),i.styleSheet?i.styleSheet.cssText=t:i.appendChild(document.createTextNode(t)),e}function $(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function getOffset(t){var e=t.getBoundingClientRect();return{top:e.top+(document.documentElement.scrollTop||document.body.scrollTop),left:e.left+(document.documentElement.scrollLeft||document.body.scrollLeft)}}function isElementInViewport(t){var e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}function getElementContentWidth(t){var e=window.getComputedStyle(t),a=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return t.clientWidth-a}function fire(t,e,a){var i=document.createEvent("HTMLEvents");i.initEvent(e,!0,!0);for(var n in a)i[n]=a[n];return t.dispatchEvent(i)}function floatTwo(t){return parseFloat(t.toFixed(2))}function fillArray(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]&&arguments[3];a||(a=i?t[0]:t[t.length-1]);var n=new Array(Math.abs(e)).fill(a);return t=i?n.concat(t):t.concat(n)}function getStringWidth(t,e){return(t+"").length*e}function getBarHeightAndYAttr(t,e){var a=void 0,i=void 0;return t<=e?(a=e-t,i=t):(a=t-e,i=e),[a,i]}function equilizeNoOfElements(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.length-t.length;return a>0?t=fillArray(t,a):e=fillArray(e,a),[t,e]}function translate(t,e,a,i){var n="string"==typeof e?e:e.join(", ");return[t,{transform:a.join(", ")},i,STD_EASING,"translate",{transform:n}]}function translateVertLine(t,e,a){return translate(t,[a,0],[e,0],MARKER_LINE_ANIM_DUR)}function translateHoriLine(t,e,a){return translate(t,[0,a],[0,e],MARKER_LINE_ANIM_DUR)}function animateRegion(t,e,a,i){var n=e-a,r=t.childNodes[0];return[[r,{height:n,"stroke-dasharray":r.getAttribute("width")+", "+n},MARKER_LINE_ANIM_DUR,STD_EASING],translate(t,[0,i],[0,a],MARKER_LINE_ANIM_DUR)]}function animateBar(t,e,a,i){var n=getBarHeightAndYAttr(a,(arguments.length>5&&void 0!==arguments[5]?arguments[5]:{}).zeroLine),r=slicedToArray(n,2),s=r[0],o=r[1];return"rect"!==t.nodeName?[[t.childNodes[0],{width:i,height:s},UNIT_ANIM_DUR,STD_EASING],translate(t,t.getAttribute("transform").split("(")[1].slice(0,-1),[e,o],MARKER_LINE_ANIM_DUR)]:[[t,{width:i,height:s,x:e,y:o},UNIT_ANIM_DUR,STD_EASING]]}function animateDot(t,e,a){return"circle"!==t.nodeName?[translate(t,t.getAttribute("transform").split("(")[1].slice(0,-1),[e,a],MARKER_LINE_ANIM_DUR)]:[[t,{cx:e,cy:a},UNIT_ANIM_DUR,STD_EASING]]}function animatePath(t,e,a,i){var n=[],r=a.map(function(t,a){return e[a]+","+t}).join("L"),s=[t.path,{d:"M"+r},PATH_ANIM_DUR,STD_EASING];if(n.push(s),t.region){var o=e[0]+","+i+"L",l="L"+e.slice(-1)[0]+", "+i,c=[t.region,{d:"M"+o+r+l},PATH_ANIM_DUR,STD_EASING];n.push(c)}return n}function $$1(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function createSVG(t,e){var a=document.createElementNS("http://www.w3.org/2000/svg",t);for(var i in e){var n=e[i];if("inside"===i)$$1(n).appendChild(a);else if("around"===i){var r=$$1(n);r.parentNode.insertBefore(a,r),a.appendChild(r)}else"styles"===i?"object"===(void 0===n?"undefined":_typeof(n))&&Object.keys(n).map(function(t){a.style[t]=n[t]}):("className"===i&&(i="class"),"innerHTML"===i?a.textContent=n:a.setAttribute(i,n))}return a}function renderVerticalGradient(t,e){return createSVG("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function setGradientStop(t,e,a,i){return createSVG("stop",{inside:t,style:"stop-color: "+a,offset:e,"stop-opacity":i})}function makeSVGContainer(t,e,a,i){return createSVG("svg",{className:e,inside:t,width:a,height:i})}function makeSVGDefs(t){return createSVG("defs",{inside:t})}function makeSVGGroup(t,e){return createSVG("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function makePath(t){return createSVG("path",{className:arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",d:t,styles:{stroke:arguments.length>2&&void 0!==arguments[2]?arguments[2]:"none",fill:arguments.length>3&&void 0!==arguments[3]?arguments[3]:"none"}})}function makeGradient(t,e){var a=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i="path-fill-gradient-"+e+"-"+(a?"lighter":"default"),n=renderVerticalGradient(t,i),r=[1,.6,.2];return a&&(r=[.4,.2,0]),setGradientStop(n,"0%",e,r[0]),setGradientStop(n,"50%",e,r[1]),setGradientStop(n,"100%",e,r[2]),i}function makeHeatSquare(t,e,a,i){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:a,width:i,height:i,fill:n};return Object.keys(r).map(function(t){s[t]=r[t]}),createSVG("rect",s)}function makeText(t,e,a,i){return createSVG("text",{className:t,x:e,y:a,dy:FONT_SIZE/2+"px","font-size":FONT_SIZE+"px",innerHTML:i})}function makeVertLine(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};n.stroke||(n.stroke=BASE_LINE_COLOR);var r=createSVG("line",{className:"line-vertical "+n.className,x1:0,x2:0,y1:a,y2:i,styles:{stroke:n.stroke}}),s=createSVG("text",{x:0,y:a>i?a+LABEL_MARGIN:a-LABEL_MARGIN-FONT_SIZE,dy:FONT_SIZE+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:e}),o=createSVG("g",{transform:"translate("+t+", 0)"});return o.appendChild(r),o.appendChild(s),o}function makeHoriLine(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};n.stroke||(n.stroke=BASE_LINE_COLOR),n.lineType||(n.lineType="");var r=createSVG("line",{className:"line-horizontal "+n.className+("dashed"===n.lineType?"dashed":""),x1:a,x2:i,y1:0,y2:0,styles:{stroke:n.stroke}}),s=createSVG("text",{x:a3&&void 0!==arguments[3]?arguments[3]:{};i.pos||(i.pos="left"),i.offset||(i.offset=0),i.mode||(i.mode="span"),i.stroke||(i.stroke=BASE_LINE_COLOR),i.className||(i.className="");var n=-1*AXIS_TICK_LENGTH,r="span"===i.mode?a+AXIS_TICK_LENGTH:0;return"tick"===i.mode&&"right"===i.pos&&(n=a+AXIS_TICK_LENGTH,r=a),n+=i.offset,r+=i.offset,makeHoriLine(t,e,n,r,{stroke:i.stroke,className:i.className,lineType:i.lineType})}function xLine(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};i.pos||(i.pos="bottom"),i.offset||(i.offset=0),i.mode||(i.mode="span"),i.stroke||(i.stroke=BASE_LINE_COLOR),i.className||(i.className="");var n=a+AXIS_TICK_LENGTH,r="span"===i.mode?-1*AXIS_TICK_LENGTH:a;return"tick"===i.mode&&"top"===i.pos&&(n=-1*AXIS_TICK_LENGTH,r=0),makeVertLine(t,e,n,r,{stroke:i.stroke,className:i.className,lineType:i.lineType})}function yMarker(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},n=createSVG("text",{className:"chart-label",x:a-getStringWidth(e,5)-LABEL_MARGIN,y:0,dy:FONT_SIZE/-2+"px","font-size":FONT_SIZE+"px","text-anchor":"start",innerHTML:e+""}),r=makeHoriLine(t,"",0,a,{stroke:i.stroke||BASE_LINE_COLOR,className:i.className||"",lineType:i.lineType});return r.appendChild(n),r}function yRegion(t,e,a,i){var n=t-e,r=createSVG("rect",{className:"bar mini",styles:{fill:"rgba(228, 234, 239, 0.49)",stroke:BASE_LINE_COLOR,"stroke-dasharray":a+", "+n},x:0,y:0,width:a,height:n}),s=createSVG("text",{className:"chart-label",x:a-getStringWidth(i,4.5)-LABEL_MARGIN,y:0,dy:FONT_SIZE/-2+"px","font-size":FONT_SIZE+"px","text-anchor":"start",innerHTML:i+""}),o=createSVG("g",{transform:"translate(0, "+e+")"});return o.appendChild(r),o.appendChild(s),o}function datasetBar(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"",r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,s=arguments.length>6&&void 0!==arguments[6]?arguments[6]:0,o=arguments.length>7&&void 0!==arguments[7]?arguments[7]:{},l=getBarHeightAndYAttr(e,o.zeroLine),c=slicedToArray(l,2),h=c[0],u=c[1],d=createSVG("rect",{className:"bar mini",style:"fill: "+i,"data-point-index":r,x:t,y:u-=s,width:a,height:h||o.minHeight});if(n||n.length){d.setAttribute("y",0),d.setAttribute("x",0);var p=createSVG("text",{className:"data-point-value",x:a/2,y:0,dy:FONT_SIZE/2*-1+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:n}),f=createSVG("g",{transform:"translate("+t+", "+u+")"});return f.appendChild(d),f.appendChild(p),f}return d}function datasetDot(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"",r=createSVG("circle",{style:"fill: "+i,"data-point-index":arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,cx:t,cy:e,r:a});if(n||n.length){r.setAttribute("cy",0),r.setAttribute("cx",0);var s=createSVG("text",{className:"data-point-value",x:0,y:0,dy:FONT_SIZE/2*-1-a+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:n}),o=createSVG("g",{transform:"translate("+t+", "+e+")"});return o.appendChild(r),o.appendChild(s),o}return r}function getPaths(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{},r=e.map(function(e,a){return t[a]+","+e}).join("L"),s=makePath("M"+r,"line-graph-path",a);if(i.heatline){var o=makeGradient(n.svgDefs,a);s.style.stroke="url(#"+o+")"}var l={path:s};if(i.regionFill){var c=makeGradient(n.svgDefs,a,!0),h="M"+t[0]+","+n.zeroLine+"L"+r+"L"+t.slice(-1)[0]+","+n.zeroLine;l.region=makePath(h,"region-fill","none","url(#"+c+")")}return l}function limitColor(t){return t>255?255:t<0?0:t}function lightenDarkenColor(t,e){var a=getColor(t),i=!1;"#"==a[0]&&(a=a.slice(1),i=!0);var n=parseInt(a,16),r=limitColor((n>>16)+e),s=limitColor((n>>8&255)+e),o=limitColor((255&n)+e);return(i?"#":"")+(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,a){if(t!==e){ALL_CHART_TYPES.includes(t)||console.error("'"+t+"' is not a valid chart type."),COMPATIBLE_CHARTS[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var i=COLOR_COMPATIBLE_CHARTS[e].includes(t);return new Chart({parent:a.parent,title:a.title,data:a.data,type:t,height:a.height,colors:i?a.colors:void 0})}}function animateSVGElement(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"linear",n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:void 0,r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},s=t.cloneNode(!0),o=t.cloneNode(!0);for(var l in e){var c=void 0;c="transform"===l?document.createElementNS("http://www.w3.org/2000/svg","animateTransform"):document.createElementNS("http://www.w3.org/2000/svg","animate");var h=r[l]||t.getAttribute(l),u=e[l],d={attributeName:l,from:h,to:u,begin:"0s",dur:a/1e3+"s",values:h+";"+u,keySplines:EASING[i],keyTimes:"0;1",calcMode:"spline",fill:"freeze"};n&&(d.type=n);for(var p in d)c.setAttribute(p,d[p]);s.appendChild(c),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 a=[],i=[];e.map(function(t){var e=t[0],n=e.parentNode,r=void 0,s=void 0;t[0]=e;var o=animateSVGElement.apply(void 0,toConsumableArray(t)),l=slicedToArray(o,2);r=l[0],s=l[1],a.push(s),i.push([r,n]),n.replaceChild(r,e)});var n=t.cloneNode(!0);return i.map(function(t,i){t[1].replaceChild(a[i],t[0]),e[i][0]=a[i]}),n}function runSMILAnimation(t,e,a){if(0!==a.length){var i=animateSVG(e,a);e.parentNode==t&&(t.removeChild(e),t.appendChild(i)),setTimeout(function(){i.parentNode==t&&(t.removeChild(i),t.appendChild(e))},REPLACE_ALL_NEW_DUR)}}function dataPrep(t,e){t.labels=t.labels||[];var a=t.labels.length,i=t.datasets,n=new Array(a).fill(0);return i||(i=[{values:n}]),i.map(function(t,i){if(t.values){var r=t.values;r=(r=r.map(function(t){return isNaN(t)?0:t})).length>a?r.slice(0,a):fillArray(r,a-r.length,0)}else t.values=n;t.chartType||(AXIS_DATASET_CHART_TYPES.includes(e),t.chartType=e)}),t.yRegions&&t.yRegions.map(function(t){if(t.end0?1:-1;if(!isFinite(t))return{mantissa:4503599627370496*e,exponent:972};t=Math.abs(t);var a=Math.floor(Math.log10(t));return[e*(t/Math.pow(10,a)),a]}function getChartRangeIntervals(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,a=Math.ceil(t),i=Math.floor(e),n=a-i,r=n,s=1;n>5&&(n%2!=0&&(n=++a-i),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(i+s*l);return o}function getChartIntervals(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,a=normalize(t),i=slicedToArray(a,2),n=i[0],r=i[1],s=e?e/Math.pow(10,r):0,o=getChartRangeIntervals(n=n.toFixed(6),s);return o=o.map(function(t){return t*Math.pow(10,r)})}function calcChartIntervals(t){function e(t,e){for(var a=getChartIntervals(t),i=a[1]-a[0],n=0,r=1;n1&&void 0!==arguments[1]&&arguments[1],i=Math.max.apply(Math,toConsumableArray(t)),n=Math.min.apply(Math,toConsumableArray(t)),r=[];if(i>=0&&n>=0)normalize(i)[1],r=a?getChartIntervals(i,n):getChartIntervals(i);else if(i>0&&n<0){var s=Math.abs(n);i>=s?(normalize(i)[1],r=e(i,s)):(normalize(s)[1],r=e(s,i).map(function(t){return-1*t}))}else if(i<=0&&n<=0){var o=Math.abs(n),l=Math.abs(i);normalize(o)[1],r=(r=a?getChartIntervals(o,l):getChartIntervals(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 scale(t,e){return floatTwo(e.zeroLine-t*e.scaleMultiplier)}function calcDistribution(t,e){for(var a=Math.max.apply(Math,toConsumableArray(t)),i=1/(e-1),n=[],r=0;r9?"":"0")+e,(a>9?"":"0")+a,t.getFullYear()].join("-")}function getWeeksBetween(t,e){return Math.ceil(getDaysBetween(t,e)/7)}function getDaysBetween(t,e){return(treatAsUtc(e)-treatAsUtc(t))/864e5}function addDays(t,e){t.setDate(t.getDate()+e)}function getChartByType(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return"line"===t?(e.type="line",new AxisChart(e)):"bar"===t?(e.type="bar",new AxisChart(e)):"axis-mixed"===t?(e.type="line",new AxisChart(e)):chartTypes[t]?new chartTypes[t](e):void console.error("Undefined chart type: "+t)}__$styleInject('.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path,.chart-container .multiaxis-chart .line-horizontal,.chart-container .multiaxis-chart .y-axis-guide{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}',void 0);var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},asyncGenerator=function(){function t(t){this.value=t}function e(e){function a(t,e){return new Promise(function(a,n){var o={key:t,arg:e,resolve:a,reject:n,next:null};s?s=s.next=o:(r=s=o,i(t,e))})}function i(a,r){try{var s=e[a](r),o=s.value;o instanceof t?Promise.resolve(o.value).then(function(t){i("next",t)},function(t){i("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)?i(r.key,r.arg):s=null}var r,s;this._invoke=a,"function"!=typeof e.return&&(this.return=void 0)}return"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)},{wrap:function(t){return function(){return new e(t.apply(this,arguments))}},await:function(e){return new t(e)}}}(),classCallCheck=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},createClass=function(){function t(t,e){for(var a=0;a\n\t\t\t\t
    \n\t\t\t\t
    '}),this.hide_tip(),this.title=this.container.querySelector(".title"),this.data_point_list=this.container.querySelector(".data-point-list"),this.parent.addEventListener("mouseleave",function(){t.hide_tip()})}},{key:"fill",value:function(){var t=this,e=void 0;e=this.title_value_first?""+this.title_value+""+this.title_name:this.title_name+""+this.title_value+"",this.title.innerHTML=e,this.data_point_list.innerHTML="",this.list_values.map(function(e,a){var i=t.colors[a]||"black",n=$.create("li",{styles:{"border-top":"3px solid "+i},innerHTML:''+(0===e.value||e.value?e.value:"")+"\n\t\t\t\t\t"+(e.title?e.title:"")});t.data_point_list.appendChild(n)})}},{key:"calc_position",value:function(){var t=this.container.offsetWidth;this.top=this.y-this.container.offsetHeight,this.left=this.x-t/2;var e=this.parent.offsetWidth-t,a=this.container.querySelector(".svg-pointer");if(this.left<0)a.style.left="calc(50% - "+-1*this.left+"px)",this.left=0;else if(this.left>e){var i="calc(50% + "+(this.left-e)+"px)";a.style.left=i,this.left=e}else a.style.left="50%"}},{key:"set_values",value:function(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0;this.title_name=a,this.title_value=i,this.list_values=n,this.x=t,this.y=e,this.title_value_first=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}(),UNIT_ANIM_DUR=350,PATH_ANIM_DUR=350,MARKER_LINE_ANIM_DUR=UNIT_ANIM_DUR,REPLACE_ALL_NEW_DUR=250,STD_EASING="easein",Y_AXIS_MARGIN=60,DEFAULT_AXIS_CHART_TYPE="line",AXIS_DATASET_CHART_TYPES=["line","bar"],BAR_CHART_SPACE_RATIO=.5,MIN_BAR_PERCENT_HEIGHT=.01,LINE_CHART_DOT_SIZE=4,DOT_OVERLAY_SIZE_INCR=4,AXIS_TICK_LENGTH=6,LABEL_MARGIN=4,FONT_SIZE=10,BASE_LINE_COLOR="#dadada",makeOverlay={bar:function(t){var e=void 0;"rect"!==t.nodeName&&(e=t.getAttribute("transform"),t=t.childNodes[0]);var a=t.cloneNode();return a.style.fill="#000000",a.style.opacity="0.4",e&&a.setAttribute("transform",e),a},dot:function(t){var e=void 0;"circle"!==t.nodeName&&(e=t.getAttribute("transform"),t=t.childNodes[0]);var a=t.cloneNode(),i=t.getAttribute("r");return a.setAttribute("r",i+DOT_OVERLAY_SIZE_INCR),a.style.fill="#000000",a.style.opacity="0.4",e&&a.setAttribute("transform",e),a}},updateOverlay={bar:function(t,e){var a=void 0;"rect"!==t.nodeName&&(a=t.getAttribute("transform"),t=t.childNodes[0]);var i=["x","y","width","height"];Object.values(t.attributes).filter(function(t){return i.includes(t.name)&&t.specified}).map(function(t){e.setAttribute(t.name,t.nodeValue)}),a&&e.setAttribute("transform",a)},dot:function(t,e){var a=void 0;"circle"!==t.nodeName&&(a=t.getAttribute("transform"),t=t.childNodes[0]);var i=["cx","cy"];Object.values(t.attributes).filter(function(t){return i.includes(t.name)&&t.specified}).map(function(t){e.setAttribute(t.name,t.nodeValue)}),a&&e.setAttribute("transform",a)}},PRESET_COLOR_MAP={"light-blue":"#7cd6fd",blue:"#5e64ff",violet:"#743ee2",red:"#ff5858",orange:"#ffa00a",yellow:"#feef72",green:"#28a745","light-green":"#98d85b",purple:"#b554ff",magenta:"#ffa3ef",black:"#36114C",grey:"#bdd3e6","light-grey":"#f0f4f7","dark-grey":"#b8c2cc"},DEFAULT_COLORS=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],getColor=function(t){return PRESET_COLOR_MAP[t]||t},ALL_CHART_TYPES=["line","scatter","bar","percentage","heatmap","pie"],COMPATIBLE_CHARTS={bar:["line","scatter","percentage","pie"],line:["scatter","bar","percentage","pie"],pie:["line","scatter","percentage","bar"],scatter:["line","bar","percentage","pie"],percentage:["bar","line","scatter","pie"],heatmap:[]},COLOR_COMPATIBLE_CHARTS={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},EASING={ease:"0.25 0.1 0.25 1",linear:"0 0 1 1",easein:"0.1 0.8 0.2 1",easeout:"0 0 0.58 1",easeinout:"0.42 0 0.58 1"},BaseChart=function(){function t(e){var a=e.height,i=void 0===a?240:a,n=e.title,r=void 0===n?"":n,s=e.subtitle,o=void 0===s?"":s,l=(e.colors,e.isNavigable),c=void 0===l?0:l,h=(e.showLegend,e.type),u=void 0===h?"":h,d=e.parent,p=e.data;classCallCheck(this,t),this.rawChartArgs=arguments[0],this.parent="string"==typeof d?document.querySelector(d):d,this.title=r,this.subtitle=o,this.argHeight=i,this.type=u,this.realData=this.prepareData(p),this.data=this.prepareFirstData(this.realData),this.colors=[],this.config={showTooltip:1,showLegend:1,isNavigable:c,animate:1},this.state={},this.options={},this.config.isNavigable&&(this.state.currentIndex=0,this.overlays=[]),this.configure(arguments[0])}return createClass(t,[{key:"configure",value:function(t){var e=this;this.setColors(),this.setMargins(),window.addEventListener("resize",function(){return e.draw()}),window.addEventListener("orientationchange",function(){return e.draw()})}},{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=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calcWidth(),this.calc(),this.makeChartArea(),this.setupComponents(),this.components.forEach(function(e){return e.setup(t.drawArea)}),this.components.forEach(function(t){return t.make()}),e&&(this.data=this.realData,setTimeout(function(){t.update()},400)),this.renderLegend(),this.setupNavigation(e)}},{key:"calcWidth",value:function(){this.baseWidth=getElementContentWidth(this.parent)-0,this.width=this.baseWidth-(this.translateXLeft+this.translateXRight)}},{key:"update",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data;this.data=this.prepareData(t),this.calc(),this.render()}},{key:"prepareData",value:function(){return arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data}},{key:"prepareFirstData",value:function(){return arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data}},{key:"calc",value:function(){}},{key:"render",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.components,a=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.config.isNavigable&&this.overlays.map(function(t){return t.parentNode.removeChild(t)});var i=[];e.forEach(function(t){i=i.concat(t.update(a))}),i.length>0?(runSMILAnimation(this.chartWrapper,this.svg,i),setTimeout(function(){e.forEach(function(t){return t.make()}),t.updateNav()},400)):this.updateNav()}},{key:"updateNav",value:function(){this.config.isNavigable&&(this.overlayGuides?this.updateOverlays():(this.makeOverlays(),this.bindUnits()))}},{key:"makeChartArea",value:function(){this.svg&&this.chartWrapper.removeChild(this.svg),this.svg=makeSVGContainer(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svgDefs=makeSVGDefs(this.svg),this.drawArea=makeSVGGroup(this.svg,this.type+"-chart","translate("+this.translateXLeft+", "+this.translateY+")")}},{key:"renderLegend",value:function(){}},{key:"setupNavigation",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.config.isNavigable&&e&&(this.bindOverlay(),this.keyActions={13:this.onEnterKey.bind(this),37:this.onLeftArrow.bind(this),38:this.onUpArrow.bind(this),39:this.onRightArrow.bind(this),40:this.onDownArrow.bind(this)},document.addEventListener("keydown",function(e){isElementInViewport(t.chartWrapper)&&(e=e||window.event,t.keyActions[e.keyCode]())}))}},{key:"makeOverlays",value:function(){}},{key:"bindOverlay",value:function(){}},{key:"bindUnits",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:"setCurrentDataPoint",value:function(t){}},{key:"updateDataset",value:function(t,e){}},{key:"addDataset",value:function(t,e){}},{key:"removeDataset",value:function(){}},{key:"updateDatasets",value:function(t){}},{key:"updateDataPoint",value:function(t){}},{key:"addDataPoint",value:function(t){}},{key:"removeDataPoint",value:function(){}},{key:"getDifferentChart",value:function(t){return getDifferentChart(t,this.type,this.rawChartArgs)}}]),t}(),ChartComponent$1=function(){function t(e){var a=e.layerClass,i=void 0===a?"":a,n=e.layerTransform,r=void 0===n?"":n,s=e.constants,o=e.getData,l=e.makeElements,c=e.animateElements;classCallCheck(this,t),this.layerTransform=r,this.constants=s,this.makeElements=l,this.getData=o,this.animateElements=c,this.store=[],this.layerClass=i,this.layerClass="function"==typeof this.layerClass?this.layerClass():this.layerClass,this.refresh()}return createClass(t,[{key:"refresh",value:function(t){this.data=t||this.getData()}},{key:"setup",value:function(t){this.layer=makeSVGGroup(t,this.layerClass,this.layerTransform)}},{key:"make",value:function(){this.render(this.data),this.oldData=this.data}},{key:"render",value:function(t){var e=this;this.store=this.makeElements(t),this.layer.textContent="",this.store.forEach(function(t){e.layer.appendChild(t)})}},{key:"update",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.refresh();var e=[];return t&&(e=this.animateElements(this.data)),e}}]),t}(),componentConfigs={yAxis:{layerClass:"y axis",makeElements:function(t){var e=this;return t.positions.map(function(a,i){return yLine(a,t.labels[i],e.constants.width,{mode:e.constants.mode,pos:e.constants.pos})})},animateElements:function(t){var e=t.positions,a=t.labels,i=this.oldData.positions,n=this.oldData.labels,r=equilizeNoOfElements(i,e),s=slicedToArray(r,2);i=s[0],e=s[1];var o=equilizeNoOfElements(n,a),l=slicedToArray(o,2);return n=l[0],a=l[1],this.render({positions:i,labels:a}),this.store.map(function(t,a){return translateHoriLine(t,e[a],i[a])})}},xAxis:{layerClass:"x axis",makeElements:function(t){var e=this;return t.positions.map(function(a,i){return xLine(a,t.labels[i],e.constants.height,{mode:e.constants.mode,pos:e.constants.pos})})},animateElements:function(t){var e=t.positions,a=t.labels,i=this.oldData.positions,n=this.oldData.labels,r=equilizeNoOfElements(i,e),s=slicedToArray(r,2);i=s[0],e=s[1];var o=equilizeNoOfElements(n,a),l=slicedToArray(o,2);return n=l[0],a=l[1],this.render({positions:i,labels:a}),this.store.map(function(t,a){return translateVertLine(t,e[a],i[a])})}},yMarkers:{layerClass:"y-markers",makeElements:function(t){var e=this;return t.map(function(t){return yMarker(t.position,t.label,e.constants.width,{pos:"right",mode:"span",lineType:"dashed"})})},animateElements:function(t){var e=equilizeNoOfElements(this.oldData,t),a=slicedToArray(e,2);this.oldData=a[0];var i=(t=a[1]).map(function(t){return t.position}),n=t.map(function(t){return t.label}),r=this.oldData.map(function(t){return t.position});this.oldData.map(function(t){return t.label});return this.render(r.map(function(t,e){return{position:r[e],label:n[e]}})),this.store.map(function(t,e){return translateHoriLine(t,i[e],r[e])})}},yRegions:{layerClass:"y-regions",makeElements:function(t){var e=this;return t.map(function(t){return yRegion(t.start,t.end,e.constants.width,t.label)})},animateElements:function(t){var e=equilizeNoOfElements(this.oldData,t),a=slicedToArray(e,2);this.oldData=a[0];var i=(t=a[1]).map(function(t){return t.end}),n=t.map(function(t){return t.label}),r=t.map(function(t){return t.start}),s=this.oldData.map(function(t){return t.end}),o=(this.oldData.map(function(t){return t.label}),this.oldData.map(function(t){return t.start}));this.render(s.map(function(t,e){return{start:o[e],end:s[e],label:n[e]}}));var l=[];return this.store.map(function(t,e){l=l.concat(animateRegion(t,r[e],i[e],s[e]))}),l}},barGraph:{layerClass:function(){return"dataset-units dataset-bars dataset-"+this.constants.index},makeElements:function(t){var e=this.constants;return this.unitType="bar",t.yPositions.map(function(a,i){return datasetBar(t.xPositions[i],a,t.barWidth,e.color,e.valuesOverPoints?e.stacked?t.cumulativeYs[i]:t.values[i]:"",i,a-(e.stacked?t.cumulativeYPos[i]:a),{zeroLine:t.zeroLine,barsWidth:t.barsWidth,minHeight:e.minHeight})})},animateElements:function(t){var e=this.constants,a=t.xPositions,i=t.yPositions,n=t.cumulativeYPos,r=t.values,s=t.cumulativeYs,o=this.oldData.xPositions,l=this.oldData.yPositions,c=this.oldData.cumulativeYPos,h=this.oldData.values,u=this.oldData.cumulativeYs,d=equilizeNoOfElements(o,a),p=slicedToArray(d,2);o=p[0],a=p[1];var f=equilizeNoOfElements(l,i),v=slicedToArray(f,2);l=v[0],i=v[1];var m=equilizeNoOfElements(c,n),y=slicedToArray(m,2);c=y[0],n=y[1];var g=equilizeNoOfElements(h,r),_=slicedToArray(g,2);h=_[0],r=_[1];var b=equilizeNoOfElements(u,s),x=slicedToArray(b,2);u=x[0],s=x[1],this.render({xPositions:o,yPositions:l,cumulativeYPos:c,values:r,cumulativeYs:s,zeroLine:this.oldData.zeroLine,barsWidth:this.oldData.barsWidth,barWidth:this.oldData.barWidth});var A=[];return this.store.map(function(n,r){A=A.concat(animateBar(n,a[r],i[r],t.barWidth,e.index,{zeroLine:t.zeroLine}))}),A}},lineGraph:{layerClass:function(){return"dataset-units dataset-line dataset-"+this.constants.index},makeElements:function(t){var e=this.constants;return this.unitType="dot",this.paths=getPaths(t.xPositions,t.yPositions,e.color,{heatline:e.heatline,regionFill:e.regionFill},{svgDefs:e.svgDefs,zeroLine:t.zeroLine}),this.dots=[],e.hideDots||(this.dots=t.yPositions.map(function(a,i){return datasetDot(t.xPositions[i],a,t.radius,e.color,e.valuesOverPoints?t.values[i]:"",i)})),Object.values(this.paths).concat(this.dots)},animateElements:function(t){var e=t.xPositions,a=t.yPositions,i=t.values,n=this.oldData.xPositions,r=this.oldData.yPositions,s=this.oldData.values,o=equilizeNoOfElements(n,e),l=slicedToArray(o,2);n=l[0],e=l[1];var c=equilizeNoOfElements(r,a),h=slicedToArray(c,2);r=h[0],a=h[1];var u=equilizeNoOfElements(s,i),d=slicedToArray(u,2);s=d[0],i=d[1],this.render({xPositions:n,yPositions:r,values:i,zeroLine:this.oldData.zeroLine,radius:this.oldData.radius});var p=[];return p=p.concat(animatePath(this.paths,e,a,t.zeroLine)),this.dots.length&&this.dots.map(function(t,i){p=p.concat(animateDot(t,e[i],a[i]))}),p}}},AxisChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.isSeries=t.isSeries,a.valuesOverPoints=t.valuesOverPoints,a.formatTooltipY=t.formatTooltipY,a.formatTooltipX=t.formatTooltipX,a.barOptions=t.barOptions||{},a.lineOptions=t.lineOptions||{},a.type=t.type||"line",a.xAxisMode=t.xAxisMode||"span",a.yAxisMode=t.yAxisMode||"span",a.setup(),a}return inherits(e,t),createClass(e,[{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this),this.config.xAxisMode=t.xAxisMode,this.config.yAxisMode=t.yAxisMode}},{key:"setMargins",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setMargins",this).call(this),this.translateXLeft=Y_AXIS_MARGIN,this.translateXRight=Y_AXIS_MARGIN}},{key:"prepareData",value:function(){return dataPrep(arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data,this.type)}},{key:"prepareFirstData",value:function(){return zeroDataPrep(arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data)}},{key:"calc",value:function(){this.calcXPositions(),this.calcYAxisParameters(this.getAllYValues(),"line"===this.type)}},{key:"calcXPositions",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state,e=this.data.labels;t.datasetLength=e.length,t.unitWidth=this.width/t.datasetLength,t.xOffset=t.unitWidth/2,t.xAxis={labels:e,positions:e.map(function(e,a){return floatTwo(t.xOffset+a*t.unitWidth)})}}},{key:"calcYAxisParameters",value:function(t){var e=calcChartIntervals(t,arguments.length>1&&void 0!==arguments[1]?arguments[1]:"false"),a=this.height/getValueRange(e),i=getIntervalSize(e)*a,n=this.height-getZeroIndex(e)*i;this.state.yAxis={labels:e,positions:e.map(function(t){return n-t*a}),scaleMultiplier:a,zeroLine:n},this.calcDatasetPoints(),this.calcYExtremes(),this.calcYRegions()}},{key:"calcDatasetPoints",value:function(){var t=this.state,e=function(e){return e.map(function(e){return scale(e,t.yAxis)})};t.datasets=this.data.datasets.map(function(t,a){var i=t.values,n=t.cumulativeYs||[];return{name:t.name,index:a,chartType:t.chartType,values:i,yPositions:e(i),cumulativeYs:n,cumulativeYPos:e(n)}})}},{key:"calcYExtremes",value:function(){var t=this.state;if(this.barOptions.stacked)return void(t.yExtremes=t.datasets[t.datasets.length-1].cumulativeYPos);t.yExtremes=new Array(t.datasetLength).fill(9999),t.datasets.map(function(e,a){e.yPositions.map(function(e,a){e=0;r--){var s=a.xAxis.positions[r];if(t>s-a.unitWidth/2){var o=s+this.translateXLeft,l=a.yExtremes[r]+this.translateY,c=this.data.datasets.map(function(t,a){return{title:t.title,value:n?e.formatTooltipY(t.values[r]):t.values[r],color:e.colors[a]}});this.tip.set_values(o,l,i[r],"",c),this.tip.show_tip();break}}}}},{key:"makeOverlays",value:function(){var t=this;this.overlayGuides=this.dataUnitComponents.map(function(t){return{type:t.unitType,overlay:void 0,units:t.store}}),this.state.currentIndex=0,this.overlayGuides.map(function(e){var a=e.units[t.state.currentIndex];e.overlay=makeOverlay[e.type](a),t.drawArea.appendChild(e.overlay)})}},{key:"bindOverlay",value:function(){var t=this;this.parent.addEventListener("data-select",function(e){t.updateOverlay(e.svg_unit)})}},{key:"bindUnits",value:function(t){}},{key:"updateOverlay",value:function(){var t=this;this.overlayGuides.map(function(e){var a=e.units[t.state.currentIndex];updateOverlay[e.type](a,e.overlay)})}},{key:"onLeftArrow",value:function(){this.setCurrentDataPoint(this.state.currentIndex-1)}},{key:"onRightArrow",value:function(){this.setCurrentDataPoint(this.state.currentIndex+1)}},{key:"getDataPoint",value:function(){return{index:arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.currentIndex}}},{key:"setCurrentDataPoint",value:function(t){var e=this.state;(t=parseInt(t))<0&&(t=0),t>=e.xAxis.labels.length&&(t=e.xAxis.labels.length-1),t!==e.currentIndex&&(e.currentIndex=t,fire(this.parent,"data-select",this.getDataPoint()))}},{key:"addDataPoint",value:function(t,a){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.state.datasetLength;get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"addDataPoint",this).call(this,t,a,i),this.data.labels.splice(i,0,t),this.data.datasets.map(function(t,e){t.values.splice(i,0,a[e])}),this.update(this.data)}},{key:"removeDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.datasetLength-1;get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"removeDataPoint",this).call(this,t),this.data.labels.splice(t,1),this.data.datasets.map(function(e){e.values.splice(t,1)}),this.update(this.data)}},{key:"updateDataset",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;this.data.datasets[e].values=t,this.update(this.data)}}]),e}(BaseChart),MultiAxisChart=function(t){function e(t){return classCallCheck(this,e),possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return inherits(e,t),createClass(e,[{key:"preSetup",value:function(){this.type="multiaxis"}},{key:"setMargins",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setMargins",this).call(this);var t=this.data.datasets.filter(function(t){return"left"===t.axisPosition}).length;this.translateXLeft=t*Y_AXIS_MARGIN||Y_AXIS_MARGIN,this.translateXRight=(this.data.datasets.length-t)*Y_AXIS_MARGIN||Y_AXIS_MARGIN}},{key:"prepareYAxis",value:function(){}},{key:"prepareData",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"prepareData",this).call(this,t);var a=0,i=0;this.state.datasets.forEach(function(t,e){t.yAxis={position:t.axisPosition,index:"left"===t.axisPosition?a++:i++}})}},{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"tick",this.config.yAxisMode=t.yAxisMode||"span"}},{key:"configUnits",value:function(){this.unitArgs={type:"bar",args:{spaceWidth:this.state.unitWidth/2}}}},{key:"setYAxis",value:function(){var t=this;this.state.datasets.map(function(e){t.calcYAxisParameters(e.yAxis,e.values,"line"===t.unitType)})}},{key:"calcYUnits",value:function(){this.state.datasets.map(function(t){t.positions=t.values.map(function(e){return floatTwo(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"renderConstants",value:function(){var t=this;this.state.datasets.map(function(e){var a="left"===e.yAxis.position?-1*e.yAxis.index*Y_AXIS_MARGIN:t.width+e.yAxis.index*Y_AXIS_MARGIN;t.renderer.xLine(a,"",{pos:"top",mode:"span",stroke:t.colors[i],className:"y-axis-guide"})})}},{key:"getYAxesComponents",value:function(){var t=this;return this.data.datasets.map(function(e,a){return new ChartComponent({layerClass:"y axis y-axis-"+a,make:function(){var e=t.state.datasets[a].yAxis;t.renderer.setZeroline(e.zeroline);var i={pos:e.position,mode:"tick",offset:e.index*Y_AXIS_MARGIN,stroke:t.colors[a]};return e.positions.map(function(a,n){return t.renderer.yLine(a,e.labels[n],i)})},animate:function(){}})})}},{key:"getChartComponents",value:function(){var t=this;return this.data.datasets.map(function(e,a){return new ChartComponent({layerClass:"dataset-units dataset-"+a,make:function(){var e=t.state.datasets[a],i=t.unitArgs;return t.renderer.setZeroline(e.yAxis.zeroLine),e.positions.map(function(e,n){return t.renderer[i.type](t.state.xAxisPositions[n],e,i.args,t.colors[a],n,a,t.state.datasetLength)})},animate:function(e){var i=t.state.datasets[a],n=t.unitArgs.type,r=t.state.xAxisPositions,s=t.state.datasets[a].positions,o=e[e.length-1],l=o.parentNode;if(t.oldState.xExtra>0)for(var c=0;c0}),a=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),a=e.slice(0,this.max_slices-1);var i=0;e.slice(this.max_slices-1).map(function(t){i+=t[0]}),a.push([i,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],a.map(function(e){t.sliceTotals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.sliceTotals.slice(0,this.max_legend_points)}},{key:"bindTooltip",value:function(){}},{key:"renderLegend",value:function(){}}]),e}(BaseChart),ANGLE_RATIO=Math.PI/180,FULL_ANGLE=360,PieChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.type="pie",a.elements_to_animate=null,a.hoverRadio=t.hoverRadio||.1,a.max_slices=10,a.max_legend_points=6,a.isAnimate=!1,a.startAngle=t.startAngle||0,a.clockWise=t.clockWise||!1,a.mouseMove=a.mouseMove.bind(a),a.mouseLeave=a.mouseLeave.bind(a),a.setup(),a}return inherits(e,t),createClass(e,[{key:"calc",value:function(){var t=this;this.centerX=this.width/2,this.centerY=this.height/2,this.radius=this.height>this.width?this.centerX:this.centerY,this.slice_totals=[];var e=this.data.labels.map(function(e,a){var i=0;return t.data.datasets.map(function(t){i+=t.values[a]}),[i,e]}).filter(function(t){return t[0]>0}),a=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),a=e.slice(0,this.max_slices-1);var i=0;e.slice(this.max_slices-1).map(function(t){i+=t[0]}),a.push([i,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],a.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"makeArcPath",value:function(t,e){var a=this.centerX,i=this.centerY,n=this.radius,r=this.clockWise;return"M"+a+" "+i+" L"+(a+t.x)+" "+(i+t.y)+" A "+n+" "+n+" 0 0 "+(r?1:0)+" "+(a+e.x)+" "+(i+e.y)+" z"}},{key:"render",value:function(t){var a=this,i=this.radius,n=this.clockWise;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0);var r=this.slicesProperties||[];this.slices=[],this.elements_to_animate=[],this.slicesProperties=[];var s=180-this.startAngle;this.slice_totals.map(function(o,l){var c=s,h=o/a.grand_total*FULL_ANGLE,u=n?-h:h,d=s+=u,p=e.getPositionByAngle(c,i),f=e.getPositionByAngle(d,i),v=t&&r[l],m=void 0,y=void 0;t?(m=v?v.startPosition:p,y=v?v.endPosition:p):(m=p,y=f);var g=a.makeArcPath(m,y),_=makePath(g,"pie-path","none",a.colors[l]);_.style.transition="transform .3s;",a.drawArea.appendChild(_),a.slices.push(_),a.slicesProperties.push({startPosition:p,endPosition:f,value:o,total:a.grand_total,startAngle:c,endAngle:d,angle:u}),t&&a.elements_to_animate.push([{unit:_,array:a.slices,index:a.slices.length-1},{d:a.makeArcPath(p,f)},650,"easein",null,{d:g}])}),t&&runSMILAnimation(this.chartWrapper,this.svg,this.elements_to_animate)}},{key:"calTranslateByAngle",value:function(t){var a=this.radius,i=this.hoverRadio,n=e.getPositionByAngle(t.startAngle+t.angle/2,a);return"translate3d("+n.x*i+"px,"+n.y*i+"px,0)"}},{key:"hoverSlice",value:function(t,e,a,i){if(t){var n=this.colors[e];if(a){transform(t,this.calTranslateByAngle(this.slicesProperties[e])),t.style.fill=lightenDarkenColor(n,50);var r=getOffset(this.svg),s=i.pageX-r.left+10,o=i.pageY-r.top-10,l=(this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels[e]:this.labels[e])+": ",c=(100*this.slice_totals[e]/this.grand_total).toFixed(1);this.tip.set_values(s,o,l,c+"%"),this.tip.show_tip()}else transform(t,"translate3d(0,0,0)"),this.tip.hide_tip(),t.style.fill=n}}},{key:"mouseMove",value:function(t){for(var e=t.target,a=this.curActiveSliceIndex,i=this.curActiveSlice,n=0;n0?this.formatted_labels:this.labels;this.legend_totals.map(function(a,i){var n=t.colors[i];a&&($.create("div",{className:"stats",inside:t.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+e[i]+":\n\t\t\t\t\t"+a+"\n\t\t\t\t")})}}],[{key:"getPositionByAngle",value:function(t,e){return{x:Math.sin(t*ANGLE_RATIO)*e,y:Math.cos(t*ANGLE_RATIO)*e}}}]),e}(BaseChart),Heatmap=function(t){function e(t){var a=t.start,i=void 0===a?"":a,n=t.domain,r=void 0===n?"":n,s=t.subdomain,o=void 0===s?"":s,l=t.data,c=void 0===l?{}:l,h=t.discrete_domains,u=void 0===h?0:h,d=t.count_label,p=void 0===d?"":d,f=t.legend_colors,v=void 0===f?[]:f;classCallCheck(this,e);var m=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,arguments[0]));m.type="heatmap",m.domain=r,m.subdomain=o,m.data=c,m.discrete_domains=u,m.count_label=p;var y=new Date;return m.start=i||addDays(y,365),v=v.slice(0,5),m.legend_colors=m.validate_colors(v)?v:["#ebedf0","#c6e48b","#7bc96f","#239a3b","#196127"],m.distribution_size=5,m.translateX=0,m.setup(),m}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:"configure",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this),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:"makeChartArea",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"makeChartArea",this).call(this),this.domainLabelGroup=makeSVGGroup(this.drawArea,"domain-label-group chart-label"),this.dataGroups=makeSVGGroup(this.drawArea,"data-groups","translate(0, 20)")}},{key:"calc",value:function(){var t=this,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"]}},{key:"render",value:function(){this.renderAllWeeksAndStoreXValues(this.no_of_cols)}},{key:"renderAllWeeksAndStoreXValues",value:function(t){this.domainLabelGroup.textContent="",this.dataGroups.textContent="";var e=new Date(this.first_week_start);this.week_col=0,this.current_month=e.getMonth(),this.months=[this.current_month+""],this.month_weeks={},this.month_start_points=[],this.month_weeks[this.current_month]=0,this.month_start_points.push(13);for(var a=0;aa)break;v.getMonth()-t.getMonth()&&(i=1,this.discrete_domains&&(n=1),this.month_start_points.push(13+12*(e+n))),t=v}return[r,i]}},{key:"render_month_labels",value:function(){var t=this;this.months.shift(),this.month_start_points.shift(),this.months.pop(),this.month_start_points.pop(),this.month_start_points.map(function(e,a){var i=makeText("y-value-text",e+12,10,t.month_names[t.months[a]].substring(0,3));t.domainLabelGroup.appendChild(i)})}},{key:"bindTooltip",value:function(){var t=this;Array.prototype.slice.call(document.querySelectorAll(".data-group .day")).map(function(e){e.addEventListener("mouseenter",function(e){var a=e.target.getAttribute("data-value"),i=e.target.getAttribute("data-date").split("-"),n=t.month_names[parseInt(i[1])-1].substring(0,3),r=t.chartWrapper.getBoundingClientRect(),s=e.target.getBoundingClientRect(),o=parseInt(e.target.getAttribute("width")),l=s.left-r.left+(o+2)/2,c=s.top-r.top-(o+2)/2,h=a+" "+t.count_label,u=" on "+n+" "+i[0]+", "+i[2];t.tip.set_values(l,c,u,h,[],1),t.tip.show_tip()})})}},{key:"update",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"update",this).call(this,t),this.bindTooltip()}}]),e}(BaseChart),chartTypes={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 a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");return i.type="text/css",a.appendChild(i),i.styleSheet?i.styleSheet.cssText=t:i.appendChild(document.createTextNode(t)),e}function $(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function getOffset(t){var e=t.getBoundingClientRect();return{top:e.top+(document.documentElement.scrollTop||document.body.scrollTop),left:e.left+(document.documentElement.scrollLeft||document.body.scrollLeft)}}function isElementInViewport(t){var e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}function getElementContentWidth(t){var e=window.getComputedStyle(t),a=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return t.clientWidth-a}function fire(t,e,a){var i=document.createEvent("HTMLEvents");i.initEvent(e,!0,!0);for(var n in a)i[n]=a[n];return t.dispatchEvent(i)}function floatTwo(t){return parseFloat(t.toFixed(2))}function fillArray(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]&&arguments[3];a||(a=i?t[0]:t[t.length-1]);var n=new Array(Math.abs(e)).fill(a);return t=i?n.concat(t):t.concat(n)}function getStringWidth(t,e){return(t+"").length*e}function getBarHeightAndYAttr(t,e){var a=void 0,i=void 0;return t<=e?(a=e-t,i=t):(a=t-e,i=e),[a,i]}function equilizeNoOfElements(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.length-t.length;return a>0?t=fillArray(t,a):e=fillArray(e,a),[t,e]}function translate(t,e,a,i){var n="string"==typeof e?e:e.join(", ");return[t,{transform:a.join(", ")},i,STD_EASING,"translate",{transform:n}]}function translateVertLine(t,e,a){return translate(t,[a,0],[e,0],MARKER_LINE_ANIM_DUR)}function translateHoriLine(t,e,a){return translate(t,[0,a],[0,e],MARKER_LINE_ANIM_DUR)}function animateRegion(t,e,a,i){var n=e-a,r=t.childNodes[0];return[[r,{height:n,"stroke-dasharray":r.getAttribute("width")+", "+n},MARKER_LINE_ANIM_DUR,STD_EASING],translate(t,[0,i],[0,a],MARKER_LINE_ANIM_DUR)]}function animateBar(t,e,a,i){var n=getBarHeightAndYAttr(a,(arguments.length>5&&void 0!==arguments[5]?arguments[5]:{}).zeroLine),r=slicedToArray(n,2),s=r[0],o=r[1];return"rect"!==t.nodeName?[[t.childNodes[0],{width:i,height:s},UNIT_ANIM_DUR,STD_EASING],translate(t,t.getAttribute("transform").split("(")[1].slice(0,-1),[e,o],MARKER_LINE_ANIM_DUR)]:[[t,{width:i,height:s,x:e,y:o},UNIT_ANIM_DUR,STD_EASING]]}function animateDot(t,e,a){return"circle"!==t.nodeName?[translate(t,t.getAttribute("transform").split("(")[1].slice(0,-1),[e,a],MARKER_LINE_ANIM_DUR)]:[[t,{cx:e,cy:a},UNIT_ANIM_DUR,STD_EASING]]}function animatePath(t,e,a,i){var n=[],r=a.map(function(t,a){return e[a]+","+t}).join("L"),s=[t.path,{d:"M"+r},PATH_ANIM_DUR,STD_EASING];if(n.push(s),t.region){var o=e[0]+","+i+"L",l="L"+e.slice(-1)[0]+", "+i,c=[t.region,{d:"M"+o+r+l},PATH_ANIM_DUR,STD_EASING];n.push(c)}return n}function $$1(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function createSVG(t,e){var a=document.createElementNS("http://www.w3.org/2000/svg",t);for(var i in e){var n=e[i];if("inside"===i)$$1(n).appendChild(a);else if("around"===i){var r=$$1(n);r.parentNode.insertBefore(a,r),a.appendChild(r)}else"styles"===i?"object"===(void 0===n?"undefined":_typeof(n))&&Object.keys(n).map(function(t){a.style[t]=n[t]}):("className"===i&&(i="class"),"innerHTML"===i?a.textContent=n:a.setAttribute(i,n))}return a}function renderVerticalGradient(t,e){return createSVG("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function setGradientStop(t,e,a,i){return createSVG("stop",{inside:t,style:"stop-color: "+a,offset:e,"stop-opacity":i})}function makeSVGContainer(t,e,a,i){return createSVG("svg",{className:e,inside:t,width:a,height:i})}function makeSVGDefs(t){return createSVG("defs",{inside:t})}function makeSVGGroup(t,e){return createSVG("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function makePath(t){return createSVG("path",{className:arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",d:t,styles:{stroke:arguments.length>2&&void 0!==arguments[2]?arguments[2]:"none",fill:arguments.length>3&&void 0!==arguments[3]?arguments[3]:"none"}})}function makeGradient(t,e){var a=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i="path-fill-gradient-"+e+"-"+(a?"lighter":"default"),n=renderVerticalGradient(t,i),r=[1,.6,.2];return a&&(r=[.4,.2,0]),setGradientStop(n,"0%",e,r[0]),setGradientStop(n,"50%",e,r[1]),setGradientStop(n,"100%",e,r[2]),i}function makeHeatSquare(t,e,a,i){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:a,width:i,height:i,fill:n};return Object.keys(r).map(function(t){s[t]=r[t]}),createSVG("rect",s)}function makeText(t,e,a,i){return createSVG("text",{className:t,x:e,y:a,dy:FONT_SIZE/2+"px","font-size":FONT_SIZE+"px",innerHTML:i})}function makeVertLine(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};n.stroke||(n.stroke=BASE_LINE_COLOR);var r=createSVG("line",{className:"line-vertical "+n.className,x1:0,x2:0,y1:a,y2:i,styles:{stroke:n.stroke}}),s=createSVG("text",{x:0,y:a>i?a+LABEL_MARGIN:a-LABEL_MARGIN-FONT_SIZE,dy:FONT_SIZE+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:e}),o=createSVG("g",{transform:"translate("+t+", 0)"});return o.appendChild(r),o.appendChild(s),o}function makeHoriLine(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};n.stroke||(n.stroke=BASE_LINE_COLOR),n.lineType||(n.lineType="");var r=createSVG("line",{className:"line-horizontal "+n.className+("dashed"===n.lineType?"dashed":""),x1:a,x2:i,y1:0,y2:0,styles:{stroke:n.stroke}}),s=createSVG("text",{x:a3&&void 0!==arguments[3]?arguments[3]:{};i.pos||(i.pos="left"),i.offset||(i.offset=0),i.mode||(i.mode="span"),i.stroke||(i.stroke=BASE_LINE_COLOR),i.className||(i.className="");var n=-1*AXIS_TICK_LENGTH,r="span"===i.mode?a+AXIS_TICK_LENGTH:0;return"tick"===i.mode&&"right"===i.pos&&(n=a+AXIS_TICK_LENGTH,r=a),n+=i.offset,r+=i.offset,makeHoriLine(t,e,n,r,{stroke:i.stroke,className:i.className,lineType:i.lineType})}function xLine(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};i.pos||(i.pos="bottom"),i.offset||(i.offset=0),i.mode||(i.mode="span"),i.stroke||(i.stroke=BASE_LINE_COLOR),i.className||(i.className="");var n=a+AXIS_TICK_LENGTH,r="span"===i.mode?-1*AXIS_TICK_LENGTH:a;return"tick"===i.mode&&"top"===i.pos&&(n=-1*AXIS_TICK_LENGTH,r=0),makeVertLine(t,e,n,r,{stroke:i.stroke,className:i.className,lineType:i.lineType})}function yMarker(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},n=createSVG("text",{className:"chart-label",x:a-getStringWidth(e,5)-LABEL_MARGIN,y:0,dy:FONT_SIZE/-2+"px","font-size":FONT_SIZE+"px","text-anchor":"start",innerHTML:e+""}),r=makeHoriLine(t,"",0,a,{stroke:i.stroke||BASE_LINE_COLOR,className:i.className||"",lineType:i.lineType});return r.appendChild(n),r}function yRegion(t,e,a,i){var n=t-e,r=createSVG("rect",{className:"bar mini",styles:{fill:"rgba(228, 234, 239, 0.49)",stroke:BASE_LINE_COLOR,"stroke-dasharray":a+", "+n},x:0,y:0,width:a,height:n}),s=createSVG("text",{className:"chart-label",x:a-getStringWidth(i,4.5)-LABEL_MARGIN,y:0,dy:FONT_SIZE/-2+"px","font-size":FONT_SIZE+"px","text-anchor":"start",innerHTML:i+""}),o=createSVG("g",{transform:"translate(0, "+e+")"});return o.appendChild(r),o.appendChild(s),o}function datasetBar(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"",r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,s=arguments.length>6&&void 0!==arguments[6]?arguments[6]:0,o=arguments.length>7&&void 0!==arguments[7]?arguments[7]:{},l=getBarHeightAndYAttr(e,o.zeroLine),c=slicedToArray(l,2),h=c[0],u=c[1],d=createSVG("rect",{className:"bar mini",style:"fill: "+i,"data-point-index":r,x:t,y:u-=s,width:a,height:h||o.minHeight});if(n||n.length){d.setAttribute("y",0),d.setAttribute("x",0);var p=createSVG("text",{className:"data-point-value",x:a/2,y:0,dy:FONT_SIZE/2*-1+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:n}),f=createSVG("g",{transform:"translate("+t+", "+u+")"});return f.appendChild(d),f.appendChild(p),f}return d}function datasetDot(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"",r=createSVG("circle",{style:"fill: "+i,"data-point-index":arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,cx:t,cy:e,r:a});if(n||n.length){r.setAttribute("cy",0),r.setAttribute("cx",0);var s=createSVG("text",{className:"data-point-value",x:0,y:0,dy:FONT_SIZE/2*-1-a+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:n}),o=createSVG("g",{transform:"translate("+t+", "+e+")"});return o.appendChild(r),o.appendChild(s),o}return r}function getPaths(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{},r=e.map(function(e,a){return t[a]+","+e}).join("L"),s=makePath("M"+r,"line-graph-path",a);if(i.heatline){var o=makeGradient(n.svgDefs,a);s.style.stroke="url(#"+o+")"}var l={path:s};if(i.regionFill){var c=makeGradient(n.svgDefs,a,!0),h="M"+t[0]+","+n.zeroLine+"L"+r+"L"+t.slice(-1)[0]+","+n.zeroLine;l.region=makePath(h,"region-fill","none","url(#"+c+")")}return l}function limitColor(t){return t>255?255:t<0?0:t}function lightenDarkenColor(t,e){var a=getColor(t),i=!1;"#"==a[0]&&(a=a.slice(1),i=!0);var n=parseInt(a,16),r=limitColor((n>>16)+e),s=limitColor((n>>8&255)+e),o=limitColor((255&n)+e);return(i?"#":"")+(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,a){if(t!==e){ALL_CHART_TYPES.includes(t)||console.error("'"+t+"' is not a valid chart type."),COMPATIBLE_CHARTS[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var i=COLOR_COMPATIBLE_CHARTS[e].includes(t);return new Chart({parent:a.parent,title:a.title,data:a.data,type:t,height:a.height,colors:i?a.colors:void 0})}}function animateSVGElement(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"linear",n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:void 0,r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},s=t.cloneNode(!0),o=t.cloneNode(!0);for(var l in e){var c=void 0;c="transform"===l?document.createElementNS("http://www.w3.org/2000/svg","animateTransform"):document.createElementNS("http://www.w3.org/2000/svg","animate");var h=r[l]||t.getAttribute(l),u=e[l],d={attributeName:l,from:h,to:u,begin:"0s",dur:a/1e3+"s",values:h+";"+u,keySplines:EASING[i],keyTimes:"0;1",calcMode:"spline",fill:"freeze"};n&&(d.type=n);for(var p in d)c.setAttribute(p,d[p]);s.appendChild(c),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 a=[],i=[];e.map(function(t){var e=t[0],n=e.parentNode,r=void 0,s=void 0;t[0]=e;var o=animateSVGElement.apply(void 0,toConsumableArray(t)),l=slicedToArray(o,2);r=l[0],s=l[1],a.push(s),i.push([r,n]),n.replaceChild(r,e)});var n=t.cloneNode(!0);return i.map(function(t,i){t[1].replaceChild(a[i],t[0]),e[i][0]=a[i]}),n}function runSMILAnimation(t,e,a){if(0!==a.length){var i=animateSVG(e,a);e.parentNode==t&&(t.removeChild(e),t.appendChild(i)),setTimeout(function(){i.parentNode==t&&(t.removeChild(i),t.appendChild(e))},REPLACE_ALL_NEW_DUR)}}function treatAsUtc(t){var e=new Date(t);return e.setMinutes(e.getMinutes()-e.getTimezoneOffset()),e}function getDdMmYyyy(t){var e=t.getDate(),a=t.getMonth()+1;return[(e>9?"":"0")+e,(a>9?"":"0")+a,t.getFullYear()].join("-")}function getWeeksBetween(t,e){return Math.ceil(getDaysBetween(t,e)/7)}function getDaysBetween(t,e){return(treatAsUtc(e)-treatAsUtc(t))/864e5}function addDays(t,e){t.setDate(t.getDate()+e)}function normalize(t){if(0===t)return[0,0];if(isNaN(t))return{mantissa:-6755399441055744,exponent:972};var e=t>0?1:-1;if(!isFinite(t))return{mantissa:4503599627370496*e,exponent:972};t=Math.abs(t);var a=Math.floor(Math.log10(t));return[e*(t/Math.pow(10,a)),a]}function getChartRangeIntervals(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,a=Math.ceil(t),i=Math.floor(e),n=a-i,r=n,s=1;n>5&&(n%2!=0&&(n=++a-i),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(i+s*l);return o}function getChartIntervals(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,a=normalize(t),i=slicedToArray(a,2),n=i[0],r=i[1],s=e?e/Math.pow(10,r):0,o=getChartRangeIntervals(n=n.toFixed(6),s);return o=o.map(function(t){return t*Math.pow(10,r)})}function calcChartIntervals(t){function e(t,e){for(var a=getChartIntervals(t),i=a[1]-a[0],n=0,r=1;n1&&void 0!==arguments[1]&&arguments[1],i=Math.max.apply(Math,toConsumableArray(t)),n=Math.min.apply(Math,toConsumableArray(t)),r=[];if(i>=0&&n>=0)normalize(i)[1],r=a?getChartIntervals(i,n):getChartIntervals(i);else if(i>0&&n<0){var s=Math.abs(n);i>=s?(normalize(i)[1],r=e(i,s)):(normalize(s)[1],r=e(s,i).map(function(t){return-1*t}))}else if(i<=0&&n<=0){var o=Math.abs(n),l=Math.abs(i);normalize(o)[1],r=(r=a?getChartIntervals(o,l):getChartIntervals(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 scale(t,e){return floatTwo(e.zeroLine-t*e.scaleMultiplier)}function calcDistribution(t,e){for(var a=Math.max.apply(Math,toConsumableArray(t)),i=1/(e-1),n=[],r=0;ra?r.slice(0,a):fillArray(r,a-r.length,0)}else t.values=n;t.chartType||(AXIS_DATASET_CHART_TYPES.includes(e),t.chartType=e)}),t.yRegions&&t.yRegions.map(function(t){if(t.end0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return"line"===t?(e.type="line",new AxisChart(e)):"bar"===t?(e.type="bar",new AxisChart(e)):"axis-mixed"===t?(e.type="line",new AxisChart(e)):chartTypes[t]?new chartTypes[t](e):void console.error("Undefined chart type: "+t)}__$styleInject('.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path,.chart-container .multiaxis-chart .line-horizontal,.chart-container .multiaxis-chart .y-axis-guide{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}',void 0);var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},asyncGenerator=function(){function t(t){this.value=t}function e(e){function a(t,e){return new Promise(function(a,n){var o={key:t,arg:e,resolve:a,reject:n,next:null};s?s=s.next=o:(r=s=o,i(t,e))})}function i(a,r){try{var s=e[a](r),o=s.value;o instanceof t?Promise.resolve(o.value).then(function(t){i("next",t)},function(t){i("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)?i(r.key,r.arg):s=null}var r,s;this._invoke=a,"function"!=typeof e.return&&(this.return=void 0)}return"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)},{wrap:function(t){return function(){return new e(t.apply(this,arguments))}},await:function(e){return new t(e)}}}(),classCallCheck=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},createClass=function(){function t(t,e){for(var a=0;a\n\t\t\t\t
      \n\t\t\t\t
      '}),this.hide_tip(),this.title=this.container.querySelector(".title"),this.data_point_list=this.container.querySelector(".data-point-list"),this.parent.addEventListener("mouseleave",function(){t.hide_tip()})}},{key:"fill",value:function(){var t=this,e=void 0;e=this.title_value_first?""+this.title_value+""+this.title_name:this.title_name+""+this.title_value+"",this.title.innerHTML=e,this.data_point_list.innerHTML="",this.list_values.map(function(e,a){var i=t.colors[a]||"black",n=$.create("li",{styles:{"border-top":"3px solid "+i},innerHTML:''+(0===e.value||e.value?e.value:"")+"\n\t\t\t\t\t"+(e.title?e.title:"")});t.data_point_list.appendChild(n)})}},{key:"calc_position",value:function(){var t=this.container.offsetWidth;this.top=this.y-this.container.offsetHeight,this.left=this.x-t/2;var e=this.parent.offsetWidth-t,a=this.container.querySelector(".svg-pointer");if(this.left<0)a.style.left="calc(50% - "+-1*this.left+"px)",this.left=0;else if(this.left>e){var i="calc(50% + "+(this.left-e)+"px)";a.style.left=i,this.left=e}else a.style.left="50%"}},{key:"set_values",value:function(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0;this.title_name=a,this.title_value=i,this.list_values=n,this.x=t,this.y=e,this.title_value_first=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}(),UNIT_ANIM_DUR=350,PATH_ANIM_DUR=350,MARKER_LINE_ANIM_DUR=UNIT_ANIM_DUR,REPLACE_ALL_NEW_DUR=250,STD_EASING="easein",VERT_SPACE_OUTSIDE_BASE_CHART=40,TRANSLATE_Y_BASE_CHART=20,LEFT_MARGIN_BASE_CHART=60,RIGHT_MARGIN_BASE_CHART=40,Y_AXIS_MARGIN=60,INIT_CHART_UPDATE_TIMEOUT=400,CHART_POST_ANIMATE_TIMEOUT=400,DEFAULT_AXIS_CHART_TYPE="line",AXIS_DATASET_CHART_TYPES=["line","bar"],BAR_CHART_SPACE_RATIO=.5,MIN_BAR_PERCENT_HEIGHT=.01,LINE_CHART_DOT_SIZE=4,DOT_OVERLAY_SIZE_INCR=4,AXIS_TICK_LENGTH=6,LABEL_MARGIN=4,FONT_SIZE=10,BASE_LINE_COLOR="#dadada",makeOverlay={bar:function(t){var e=void 0;"rect"!==t.nodeName&&(e=t.getAttribute("transform"),t=t.childNodes[0]);var a=t.cloneNode();return a.style.fill="#000000",a.style.opacity="0.4",e&&a.setAttribute("transform",e),a},dot:function(t){var e=void 0;"circle"!==t.nodeName&&(e=t.getAttribute("transform"),t=t.childNodes[0]);var a=t.cloneNode(),i=t.getAttribute("r");return a.setAttribute("r",i+DOT_OVERLAY_SIZE_INCR),a.style.fill="#000000",a.style.opacity="0.4",e&&a.setAttribute("transform",e),a}},updateOverlay={bar:function(t,e){var a=void 0;"rect"!==t.nodeName&&(a=t.getAttribute("transform"),t=t.childNodes[0]);var i=["x","y","width","height"];Object.values(t.attributes).filter(function(t){return i.includes(t.name)&&t.specified}).map(function(t){e.setAttribute(t.name,t.nodeValue)}),a&&e.setAttribute("transform",a)},dot:function(t,e){var a=void 0;"circle"!==t.nodeName&&(a=t.getAttribute("transform"),t=t.childNodes[0]);var i=["cx","cy"];Object.values(t.attributes).filter(function(t){return i.includes(t.name)&&t.specified}).map(function(t){e.setAttribute(t.name,t.nodeValue)}),a&&e.setAttribute("transform",a)}},PRESET_COLOR_MAP={"light-blue":"#7cd6fd",blue:"#5e64ff",violet:"#743ee2",red:"#ff5858",orange:"#ffa00a",yellow:"#feef72",green:"#28a745","light-green":"#98d85b",purple:"#b554ff",magenta:"#ffa3ef",black:"#36114C",grey:"#bdd3e6","light-grey":"#f0f4f7","dark-grey":"#b8c2cc"},DEFAULT_COLORS=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],getColor=function(t){return PRESET_COLOR_MAP[t]||t},ALL_CHART_TYPES=["line","scatter","bar","percentage","heatmap","pie"],COMPATIBLE_CHARTS={bar:["line","scatter","percentage","pie"],line:["scatter","bar","percentage","pie"],pie:["line","scatter","percentage","bar"],scatter:["line","bar","percentage","pie"],percentage:["bar","line","scatter","pie"],heatmap:[]},COLOR_COMPATIBLE_CHARTS={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},EASING={ease:"0.25 0.1 0.25 1",linear:"0 0 1 1",easein:"0.1 0.8 0.2 1",easeout:"0 0 0.58 1",easeinout:"0.42 0 0.58 1"},BaseChart=function(){function t(e){var a=e.height,i=void 0===a?240:a,n=e.title,r=void 0===n?"":n,s=e.subtitle,o=void 0===s?"":s,l=(e.colors,e.isNavigable),c=void 0===l?0:l,h=(e.showLegend,e.type),u=void 0===h?"":h,d=e.parent,p=e.data;classCallCheck(this,t),this.rawChartArgs=arguments[0],this.parent="string"==typeof d?document.querySelector(d):d,this.title=r,this.subtitle=o,this.argHeight=i,this.type=u,this.realData=this.prepareData(p),this.data=this.prepareFirstData(this.realData),this.colors=[],this.config={showTooltip:1,showLegend:1,isNavigable:c,animate:1},this.state={},this.options={},this.config.isNavigable&&(this.state.currentIndex=0,this.overlays=[]),this.configure(arguments[0])}return createClass(t,[{key:"configure",value:function(t){var e=this;this.setColors(),this.setMargins(),window.addEventListener("resize",function(){return e.draw()}),window.addEventListener("orientationchange",function(){return e.draw()})}},{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=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calcWidth(),this.calc(),this.makeChartArea(),this.setupComponents(),this.components.forEach(function(e){return e.setup(t.drawArea)}),this.components.forEach(function(t){return t.make()}),e&&(this.data=this.realData,setTimeout(function(){t.update()},INIT_CHART_UPDATE_TIMEOUT)),this.renderLegend(),this.setupNavigation(e)}},{key:"calcWidth",value:function(){this.baseWidth=getElementContentWidth(this.parent)-0,this.width=this.baseWidth-(this.leftMargin+this.rightMargin)}},{key:"update",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data;this.data=this.prepareData(t),this.calc(),this.render()}},{key:"prepareData",value:function(){return arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data}},{key:"prepareFirstData",value:function(){return arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data}},{key:"calc",value:function(){}},{key:"render",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.components,a=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.config.isNavigable&&this.overlays.map(function(t){return t.parentNode.removeChild(t)});var i=[];e.forEach(function(t){i=i.concat(t.update(a))}),i.length>0?(runSMILAnimation(this.chartWrapper,this.svg,i),setTimeout(function(){e.forEach(function(t){return t.make()}),t.updateNav()},CHART_POST_ANIMATE_TIMEOUT)):this.updateNav()}},{key:"updateNav",value:function(){this.config.isNavigable&&(this.overlayGuides?this.updateOverlays():(this.makeOverlays(),this.bindUnits()))}},{key:"makeChartArea",value:function(){this.svg&&this.chartWrapper.removeChild(this.svg),this.svg=makeSVGContainer(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svgDefs=makeSVGDefs(this.svg),this.drawArea=makeSVGGroup(this.svg,this.type+"-chart","translate("+this.leftMargin+", "+this.translateY+")")}},{key:"renderLegend",value:function(){}},{key:"setupNavigation",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.config.isNavigable&&e&&(this.bindOverlay(),this.keyActions={13:this.onEnterKey.bind(this),37:this.onLeftArrow.bind(this),38:this.onUpArrow.bind(this),39:this.onRightArrow.bind(this),40:this.onDownArrow.bind(this)},document.addEventListener("keydown",function(e){isElementInViewport(t.chartWrapper)&&(e=e||window.event,t.keyActions[e.keyCode]())}))}},{key:"makeOverlays",value:function(){}},{key:"bindOverlay",value:function(){}},{key:"bindUnits",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:"setCurrentDataPoint",value:function(t){}},{key:"updateDataset",value:function(t,e){}},{key:"addDataset",value:function(t,e){}},{key:"removeDataset",value:function(){}},{key:"updateDatasets",value:function(t){}},{key:"updateDataPoint",value:function(t){}},{key:"addDataPoint",value:function(t){}},{key:"removeDataPoint",value:function(){}},{key:"getDifferentChart",value:function(t){return getDifferentChart(t,this.type,this.rawChartArgs)}}]),t}(),PercentageChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.type="percentage",a.max_slices=10,a.max_legend_points=6,a.setup(),a}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.svg=$.create("div",{className:"div",inside:this.chartWrapper}),this.chart=$.create("div",{className:"progress-chart",inside:this.svg}),this.percentageBar=$.create("div",{className:"progress",inside:this.chart})}},{key:"render",value:function(){var t=this;this.grand_total=this.sliceTotals.reduce(function(t,e){return t+e},0),this.slices=[],this.sliceTotals.map(function(e,a){var i=$.create("div",{className:"progress-bar",inside:t.percentageBar,styles:{background:t.colors[a],width:100*e/t.grand_total+"%"}});t.slices.push(i)})}},{key:"calc",value:function(){var t=this;this.sliceTotals=[];var e=this.data.labels.map(function(e,a){var i=0;return t.data.datasets.map(function(t){i+=t.values[a]}),[i,e]}).filter(function(t){return t[0]>0}),a=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),a=e.slice(0,this.max_slices-1);var i=0;e.slice(this.max_slices-1).map(function(t){i+=t[0]}),a.push([i,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],a.map(function(e){t.sliceTotals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.sliceTotals.slice(0,this.max_legend_points)}},{key:"bindTooltip",value:function(){}},{key:"renderLegend",value:function(){}}]),e}(BaseChart),ANGLE_RATIO=Math.PI/180,FULL_ANGLE=360,PieChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.type="pie",a.elements_to_animate=null,a.hoverRadio=t.hoverRadio||.1,a.max_slices=10,a.max_legend_points=6,a.isAnimate=!1,a.startAngle=t.startAngle||0,a.clockWise=t.clockWise||!1,a.mouseMove=a.mouseMove.bind(a),a.mouseLeave=a.mouseLeave.bind(a),a.setup(),a}return inherits(e,t),createClass(e,[{key:"calc",value:function(){var t=this;this.centerX=this.width/2,this.centerY=this.height/2,this.radius=this.height>this.width?this.centerX:this.centerY,this.slice_totals=[];var e=this.data.labels.map(function(e,a){var i=0;return t.data.datasets.map(function(t){i+=t.values[a]}),[i,e]}).filter(function(t){return t[0]>0}),a=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),a=e.slice(0,this.max_slices-1);var i=0;e.slice(this.max_slices-1).map(function(t){i+=t[0]}),a.push([i,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],a.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"makeArcPath",value:function(t,e){var a=this.centerX,i=this.centerY,n=this.radius,r=this.clockWise;return"M"+a+" "+i+" L"+(a+t.x)+" "+(i+t.y)+" A "+n+" "+n+" 0 0 "+(r?1:0)+" "+(a+e.x)+" "+(i+e.y)+" z"}},{key:"render",value:function(t){var a=this,i=this.radius,n=this.clockWise;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0);var r=this.slicesProperties||[];this.slices=[],this.elements_to_animate=[],this.slicesProperties=[];var s=180-this.startAngle;this.slice_totals.map(function(o,l){var c=s,h=o/a.grand_total*FULL_ANGLE,u=n?-h:h,d=s+=u,p=e.getPositionByAngle(c,i),f=e.getPositionByAngle(d,i),v=t&&r[l],m=void 0,g=void 0;t?(m=v?v.startPosition:p,g=v?v.endPosition:p):(m=p,g=f);var y=a.makeArcPath(m,g),_=makePath(y,"pie-path","none",a.colors[l]);_.style.transition="transform .3s;",a.drawArea.appendChild(_),a.slices.push(_),a.slicesProperties.push({startPosition:p,endPosition:f,value:o,total:a.grand_total,startAngle:c,endAngle:d,angle:u}),t&&a.elements_to_animate.push([{unit:_,array:a.slices,index:a.slices.length-1},{d:a.makeArcPath(p,f)},650,"easein",null,{d:y}])}),t&&runSMILAnimation(this.chartWrapper,this.svg,this.elements_to_animate)}},{key:"calTranslateByAngle",value:function(t){var a=this.radius,i=this.hoverRadio,n=e.getPositionByAngle(t.startAngle+t.angle/2,a);return"translate3d("+n.x*i+"px,"+n.y*i+"px,0)"}},{key:"hoverSlice",value:function(t,e,a,i){if(t){var n=this.colors[e];if(a){transform(t,this.calTranslateByAngle(this.slicesProperties[e])),t.style.fill=lightenDarkenColor(n,50);var r=getOffset(this.svg),s=i.pageX-r.left+10,o=i.pageY-r.top-10,l=(this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels[e]:this.labels[e])+": ",c=(100*this.slice_totals[e]/this.grand_total).toFixed(1);this.tip.set_values(s,o,l,c+"%"),this.tip.show_tip()}else transform(t,"translate3d(0,0,0)"),this.tip.hide_tip(),t.style.fill=n}}},{key:"mouseMove",value:function(t){for(var e=t.target,a=this.curActiveSliceIndex,i=this.curActiveSlice,n=0;n0?this.formatted_labels:this.labels;this.legend_totals.map(function(a,i){var n=t.colors[i];a&&($.create("div",{className:"stats",inside:t.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+e[i]+":\n\t\t\t\t\t"+a+"\n\t\t\t\t")})}}],[{key:"getPositionByAngle",value:function(t,e){return{x:Math.sin(t*ANGLE_RATIO)*e,y:Math.cos(t*ANGLE_RATIO)*e}}}]),e}(BaseChart),Heatmap=function(t){function e(t){var a=t.start,i=void 0===a?"":a,n=t.domain,r=void 0===n?"":n,s=t.subdomain,o=void 0===s?"":s,l=t.data,c=void 0===l?{}:l,h=t.discrete_domains,u=void 0===h?0:h,d=t.count_label,p=void 0===d?"":d,f=t.legend_colors,v=void 0===f?[]:f;classCallCheck(this,e);var m=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,arguments[0]));m.type="heatmap",m.domain=r,m.subdomain=o,m.data=c,m.discrete_domains=u,m.count_label=p;var g=new Date;return m.start=i||addDays(g,365),v=v.slice(0,5),m.legend_colors=m.validate_colors(v)?v:["#ebedf0","#c6e48b","#7bc96f","#239a3b","#196127"],m.distribution_size=5,m.translateX=0,m.setup(),m}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:"configure",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this),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:"makeChartArea",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"makeChartArea",this).call(this),this.domainLabelGroup=makeSVGGroup(this.drawArea,"domain-label-group chart-label"),this.dataGroups=makeSVGGroup(this.drawArea,"data-groups","translate(0, 20)")}},{key:"calc",value:function(){var t=this,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"]}},{key:"render",value:function(){this.renderAllWeeksAndStoreXValues(this.no_of_cols)}},{key:"renderAllWeeksAndStoreXValues",value:function(t){this.domainLabelGroup.textContent="",this.dataGroups.textContent="";var e=new Date(this.first_week_start);this.week_col=0,this.current_month=e.getMonth(),this.months=[this.current_month+""],this.month_weeks={},this.month_start_points=[],this.month_weeks[this.current_month]=0,this.month_start_points.push(13);for(var a=0;aa)break;v.getMonth()-t.getMonth()&&(i=1,this.discrete_domains&&(n=1),this.month_start_points.push(13+12*(e+n))),t=v}return[r,i]}},{key:"render_month_labels",value:function(){var t=this;this.months.shift(),this.month_start_points.shift(),this.months.pop(),this.month_start_points.pop(),this.month_start_points.map(function(e,a){var i=makeText("y-value-text",e+12,10,t.month_names[t.months[a]].substring(0,3));t.domainLabelGroup.appendChild(i)})}},{key:"bindTooltip",value:function(){var t=this;Array.prototype.slice.call(document.querySelectorAll(".data-group .day")).map(function(e){e.addEventListener("mouseenter",function(e){var a=e.target.getAttribute("data-value"),i=e.target.getAttribute("data-date").split("-"),n=t.month_names[parseInt(i[1])-1].substring(0,3),r=t.chartWrapper.getBoundingClientRect(),s=e.target.getBoundingClientRect(),o=parseInt(e.target.getAttribute("width")),l=s.left-r.left+(o+2)/2,c=s.top-r.top-(o+2)/2,h=a+" "+t.count_label,u=" on "+n+" "+i[0]+", "+i[2];t.tip.set_values(l,c,u,h,[],1),t.tip.show_tip()})})}},{key:"update",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"update",this).call(this,t),this.bindTooltip()}}]),e}(BaseChart),ChartComponent=function(){function t(e){var a=e.layerClass,i=void 0===a?"":a,n=e.layerTransform,r=void 0===n?"":n,s=e.constants,o=e.getData,l=e.makeElements,c=e.animateElements;classCallCheck(this,t),this.layerTransform=r,this.constants=s,this.makeElements=l,this.getData=o,this.animateElements=c,this.store=[],this.layerClass=i,this.layerClass="function"==typeof this.layerClass?this.layerClass():this.layerClass,this.refresh()}return createClass(t,[{key:"refresh",value:function(t){this.data=t||this.getData()}},{key:"setup",value:function(t){this.layer=makeSVGGroup(t,this.layerClass,this.layerTransform)}},{key:"make",value:function(){this.render(this.data),this.oldData=this.data}},{key:"render",value:function(t){var e=this;this.store=this.makeElements(t),this.layer.textContent="",this.store.forEach(function(t){e.layer.appendChild(t)})}},{key:"update",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.refresh();var e=[];return t&&(e=this.animateElements(this.data)),e}}]),t}(),componentConfigs={yAxis:{layerClass:"y axis",makeElements:function(t){var e=this;return t.positions.map(function(a,i){return yLine(a,t.labels[i],e.constants.width,{mode:e.constants.mode,pos:e.constants.pos})})},animateElements:function(t){var e=t.positions,a=t.labels,i=this.oldData.positions,n=this.oldData.labels,r=equilizeNoOfElements(i,e),s=slicedToArray(r,2);i=s[0],e=s[1];var o=equilizeNoOfElements(n,a),l=slicedToArray(o,2);return n=l[0],a=l[1],this.render({positions:i,labels:a}),this.store.map(function(t,a){return translateHoriLine(t,e[a],i[a])})}},xAxis:{layerClass:"x axis",makeElements:function(t){var e=this;return t.positions.map(function(a,i){return xLine(a,t.labels[i],e.constants.height,{mode:e.constants.mode,pos:e.constants.pos})})},animateElements:function(t){var e=t.positions,a=t.labels,i=this.oldData.positions,n=this.oldData.labels,r=equilizeNoOfElements(i,e),s=slicedToArray(r,2);i=s[0],e=s[1];var o=equilizeNoOfElements(n,a),l=slicedToArray(o,2);return n=l[0],a=l[1],this.render({positions:i,labels:a}),this.store.map(function(t,a){return translateVertLine(t,e[a],i[a])})}},yMarkers:{layerClass:"y-markers",makeElements:function(t){var e=this;return t.map(function(t){return yMarker(t.position,t.label,e.constants.width,{pos:"right",mode:"span",lineType:"dashed"})})},animateElements:function(t){var e=equilizeNoOfElements(this.oldData,t),a=slicedToArray(e,2);this.oldData=a[0];var i=(t=a[1]).map(function(t){return t.position}),n=t.map(function(t){return t.label}),r=this.oldData.map(function(t){return t.position});this.oldData.map(function(t){return t.label});return this.render(r.map(function(t,e){return{position:r[e],label:n[e]}})),this.store.map(function(t,e){return translateHoriLine(t,i[e],r[e])})}},yRegions:{layerClass:"y-regions",makeElements:function(t){var e=this;return t.map(function(t){return yRegion(t.start,t.end,e.constants.width,t.label)})},animateElements:function(t){var e=equilizeNoOfElements(this.oldData,t),a=slicedToArray(e,2);this.oldData=a[0];var i=(t=a[1]).map(function(t){return t.end}),n=t.map(function(t){return t.label}),r=t.map(function(t){return t.start}),s=this.oldData.map(function(t){return t.end}),o=(this.oldData.map(function(t){return t.label}),this.oldData.map(function(t){return t.start}));this.render(s.map(function(t,e){return{start:o[e],end:s[e],label:n[e]}}));var l=[];return this.store.map(function(t,e){l=l.concat(animateRegion(t,r[e],i[e],s[e]))}),l}},barGraph:{layerClass:function(){return"dataset-units dataset-bars dataset-"+this.constants.index},makeElements:function(t){var e=this.constants;return this.unitType="bar",t.yPositions.map(function(a,i){return datasetBar(t.xPositions[i],a,t.barWidth,e.color,e.valuesOverPoints?e.stacked?t.cumulativeYs[i]:t.values[i]:"",i,a-(e.stacked?t.cumulativeYPos[i]:a),{zeroLine:t.zeroLine,barsWidth:t.barsWidth,minHeight:e.minHeight})})},animateElements:function(t){var e=this.constants,a=t.xPositions,i=t.yPositions,n=t.cumulativeYPos,r=t.values,s=t.cumulativeYs,o=this.oldData.xPositions,l=this.oldData.yPositions,c=this.oldData.cumulativeYPos,h=this.oldData.values,u=this.oldData.cumulativeYs,d=equilizeNoOfElements(o,a),p=slicedToArray(d,2);o=p[0],a=p[1];var f=equilizeNoOfElements(l,i),v=slicedToArray(f,2);l=v[0],i=v[1];var m=equilizeNoOfElements(c,n),g=slicedToArray(m,2);c=g[0],n=g[1];var y=equilizeNoOfElements(h,r),_=slicedToArray(y,2);h=_[0],r=_[1];var b=equilizeNoOfElements(u,s),A=slicedToArray(b,2);u=A[0],s=A[1],this.render({xPositions:o,yPositions:l,cumulativeYPos:c,values:r,cumulativeYs:s,zeroLine:this.oldData.zeroLine,barsWidth:this.oldData.barsWidth,barWidth:this.oldData.barWidth});var k=[];return this.store.map(function(n,r){k=k.concat(animateBar(n,a[r],i[r],t.barWidth,e.index,{zeroLine:t.zeroLine}))}),k}},lineGraph:{layerClass:function(){return"dataset-units dataset-line dataset-"+this.constants.index},makeElements:function(t){var e=this.constants;return this.unitType="dot",this.paths=getPaths(t.xPositions,t.yPositions,e.color,{heatline:e.heatline,regionFill:e.regionFill},{svgDefs:e.svgDefs,zeroLine:t.zeroLine}),this.dots=[],e.hideDots||(this.dots=t.yPositions.map(function(a,i){return datasetDot(t.xPositions[i],a,t.radius,e.color,e.valuesOverPoints?t.values[i]:"",i)})),Object.values(this.paths).concat(this.dots)},animateElements:function(t){var e=t.xPositions,a=t.yPositions,i=t.values,n=this.oldData.xPositions,r=this.oldData.yPositions,s=this.oldData.values,o=equilizeNoOfElements(n,e),l=slicedToArray(o,2);n=l[0],e=l[1];var c=equilizeNoOfElements(r,a),h=slicedToArray(c,2);r=h[0],a=h[1];var u=equilizeNoOfElements(s,i),d=slicedToArray(u,2);s=d[0],i=d[1],this.render({xPositions:n,yPositions:r,values:i,zeroLine:this.oldData.zeroLine,radius:this.oldData.radius});var p=[];return p=p.concat(animatePath(this.paths,e,a,t.zeroLine)),this.dots.length&&this.dots.map(function(t,i){p=p.concat(animateDot(t,e[i],a[i]))}),p}}},AxisChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.isSeries=t.isSeries,a.valuesOverPoints=t.valuesOverPoints,a.formatTooltipY=t.formatTooltipY,a.formatTooltipX=t.formatTooltipX,a.barOptions=t.barOptions||{},a.lineOptions=t.lineOptions||{},a.type=t.type||"line",a.xAxisMode=t.xAxisMode||"span",a.yAxisMode=t.yAxisMode||"span",a.setup(),a}return inherits(e,t),createClass(e,[{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this),this.config.xAxisMode=t.xAxisMode,this.config.yAxisMode=t.yAxisMode}},{key:"setMargins",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setMargins",this).call(this),this.leftMargin=Y_AXIS_MARGIN,this.rightMargin=Y_AXIS_MARGIN}},{key:"prepareData",value:function(){return dataPrep(arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data,this.type)}},{key:"prepareFirstData",value:function(){return zeroDataPrep(arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data)}},{key:"calc",value:function(){this.calcXPositions(),this.calcYAxisParameters(this.getAllYValues(),"line"===this.type)}},{key:"calcXPositions",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state,e=this.data.labels;t.datasetLength=e.length,t.unitWidth=this.width/t.datasetLength,t.xOffset=t.unitWidth/2,t.xAxis={labels:e,positions:e.map(function(e,a){return floatTwo(t.xOffset+a*t.unitWidth)})}}},{key:"calcYAxisParameters",value:function(t){var e=calcChartIntervals(t,arguments.length>1&&void 0!==arguments[1]?arguments[1]:"false"),a=this.height/getValueRange(e),i=getIntervalSize(e)*a,n=this.height-getZeroIndex(e)*i;this.state.yAxis={labels:e,positions:e.map(function(t){return n-t*a}),scaleMultiplier:a,zeroLine:n},this.calcDatasetPoints(),this.calcYExtremes(),this.calcYRegions()}},{key:"calcDatasetPoints",value:function(){var t=this.state,e=function(e){return e.map(function(e){return scale(e,t.yAxis)})};t.datasets=this.data.datasets.map(function(t,a){var i=t.values,n=t.cumulativeYs||[];return{name:t.name,index:a,chartType:t.chartType,values:i,yPositions:e(i),cumulativeYs:n,cumulativeYPos:e(n)}})}},{key:"calcYExtremes",value:function(){var t=this.state;if(this.barOptions.stacked)return void(t.yExtremes=t.datasets[t.datasets.length-1].cumulativeYPos);t.yExtremes=new Array(t.datasetLength).fill(9999),t.datasets.map(function(e,a){e.yPositions.map(function(e,a){e=0;r--){var s=a.xAxis.positions[r];if(t>s-a.unitWidth/2){var o=s+this.leftMargin,l=a.yExtremes[r]+this.translateY,c=this.data.datasets.map(function(t,a){return{title:t.title,value:n?e.formatTooltipY(t.values[r]):t.values[r],color:e.colors[a]}});this.tip.set_values(o,l,i[r],"",c),this.tip.show_tip();break}}}}},{key:"makeOverlays",value:function(){var t=this;this.overlayGuides=this.dataUnitComponents.map(function(t){return{type:t.unitType,overlay:void 0,units:t.store}}),this.state.currentIndex=0,this.overlayGuides.map(function(e){var a=e.units[t.state.currentIndex];e.overlay=makeOverlay[e.type](a),t.drawArea.appendChild(e.overlay)})}},{key:"bindOverlay",value:function(){var t=this;this.parent.addEventListener("data-select",function(e){t.updateOverlay(e.svg_unit)})}},{key:"bindUnits",value:function(t){}},{key:"updateOverlay",value:function(){var t=this;this.overlayGuides.map(function(e){var a=e.units[t.state.currentIndex];updateOverlay[e.type](a,e.overlay)})}},{key:"onLeftArrow",value:function(){this.setCurrentDataPoint(this.state.currentIndex-1)}},{key:"onRightArrow",value:function(){this.setCurrentDataPoint(this.state.currentIndex+1)}},{key:"getDataPoint",value:function(){return{index:arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.currentIndex}}},{key:"setCurrentDataPoint",value:function(t){var e=this.state;(t=parseInt(t))<0&&(t=0),t>=e.xAxis.labels.length&&(t=e.xAxis.labels.length-1),t!==e.currentIndex&&(e.currentIndex=t,fire(this.parent,"data-select",this.getDataPoint()))}},{key:"addDataPoint",value:function(t,a){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.state.datasetLength;get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"addDataPoint",this).call(this,t,a,i),this.data.labels.splice(i,0,t),this.data.datasets.map(function(t,e){t.values.splice(i,0,a[e])}),this.update(this.data)}},{key:"removeDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.datasetLength-1;get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"removeDataPoint",this).call(this,t),this.data.labels.splice(t,1),this.data.datasets.map(function(e){e.values.splice(t,1)}),this.update(this.data)}},{key:"updateDataset",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;this.data.datasets[e].values=t,this.update(this.data)}}]),e}(BaseChart),chartTypes={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 6241928..a7ea51d 100644 --- a/dist/frappe-charts.min.esm.js +++ b/dist/frappe-charts.min.esm.js @@ -1 +1 @@ -function __$styleInject(t,e){if("undefined"==typeof document)return e;t=t||"";var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");return i.type="text/css",a.appendChild(i),i.styleSheet?i.styleSheet.cssText=t:i.appendChild(document.createTextNode(t)),e}function $(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function getOffset(t){var e=t.getBoundingClientRect();return{top:e.top+(document.documentElement.scrollTop||document.body.scrollTop),left:e.left+(document.documentElement.scrollLeft||document.body.scrollLeft)}}function isElementInViewport(t){var e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}function getElementContentWidth(t){var e=window.getComputedStyle(t),a=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return t.clientWidth-a}function fire(t,e,a){var i=document.createEvent("HTMLEvents");i.initEvent(e,!0,!0);for(var n in a)i[n]=a[n];return t.dispatchEvent(i)}function floatTwo(t){return parseFloat(t.toFixed(2))}function fillArray(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]&&arguments[3];a||(a=i?t[0]:t[t.length-1]);var n=new Array(Math.abs(e)).fill(a);return t=i?n.concat(t):t.concat(n)}function getStringWidth(t,e){return(t+"").length*e}function getBarHeightAndYAttr(t,e){var a=void 0,i=void 0;return t<=e?(a=e-t,i=t):(a=t-e,i=e),[a,i]}function equilizeNoOfElements(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.length-t.length;return a>0?t=fillArray(t,a):e=fillArray(e,a),[t,e]}function translate(t,e,a,i){var n="string"==typeof e?e:e.join(", ");return[t,{transform:a.join(", ")},i,STD_EASING,"translate",{transform:n}]}function translateVertLine(t,e,a){return translate(t,[a,0],[e,0],MARKER_LINE_ANIM_DUR)}function translateHoriLine(t,e,a){return translate(t,[0,a],[0,e],MARKER_LINE_ANIM_DUR)}function animateRegion(t,e,a,i){var n=e-a,r=t.childNodes[0];return[[r,{height:n,"stroke-dasharray":r.getAttribute("width")+", "+n},MARKER_LINE_ANIM_DUR,STD_EASING],translate(t,[0,i],[0,a],MARKER_LINE_ANIM_DUR)]}function animateBar(t,e,a,i){var n=getBarHeightAndYAttr(a,(arguments.length>5&&void 0!==arguments[5]?arguments[5]:{}).zeroLine),r=slicedToArray(n,2),s=r[0],o=r[1];return"rect"!==t.nodeName?[[t.childNodes[0],{width:i,height:s},UNIT_ANIM_DUR,STD_EASING],translate(t,t.getAttribute("transform").split("(")[1].slice(0,-1),[e,o],MARKER_LINE_ANIM_DUR)]:[[t,{width:i,height:s,x:e,y:o},UNIT_ANIM_DUR,STD_EASING]]}function animateDot(t,e,a){return"circle"!==t.nodeName?[translate(t,t.getAttribute("transform").split("(")[1].slice(0,-1),[e,a],MARKER_LINE_ANIM_DUR)]:[[t,{cx:e,cy:a},UNIT_ANIM_DUR,STD_EASING]]}function animatePath(t,e,a,i){var n=[],r=a.map(function(t,a){return e[a]+","+t}).join("L"),s=[t.path,{d:"M"+r},PATH_ANIM_DUR,STD_EASING];if(n.push(s),t.region){var o=e[0]+","+i+"L",l="L"+e.slice(-1)[0]+", "+i,c=[t.region,{d:"M"+o+r+l},PATH_ANIM_DUR,STD_EASING];n.push(c)}return n}function $$1(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function createSVG(t,e){var a=document.createElementNS("http://www.w3.org/2000/svg",t);for(var i in e){var n=e[i];if("inside"===i)$$1(n).appendChild(a);else if("around"===i){var r=$$1(n);r.parentNode.insertBefore(a,r),a.appendChild(r)}else"styles"===i?"object"===(void 0===n?"undefined":_typeof(n))&&Object.keys(n).map(function(t){a.style[t]=n[t]}):("className"===i&&(i="class"),"innerHTML"===i?a.textContent=n:a.setAttribute(i,n))}return a}function renderVerticalGradient(t,e){return createSVG("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function setGradientStop(t,e,a,i){return createSVG("stop",{inside:t,style:"stop-color: "+a,offset:e,"stop-opacity":i})}function makeSVGContainer(t,e,a,i){return createSVG("svg",{className:e,inside:t,width:a,height:i})}function makeSVGDefs(t){return createSVG("defs",{inside:t})}function makeSVGGroup(t,e){return createSVG("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function makePath(t){return createSVG("path",{className:arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",d:t,styles:{stroke:arguments.length>2&&void 0!==arguments[2]?arguments[2]:"none",fill:arguments.length>3&&void 0!==arguments[3]?arguments[3]:"none"}})}function makeGradient(t,e){var a=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i="path-fill-gradient-"+e+"-"+(a?"lighter":"default"),n=renderVerticalGradient(t,i),r=[1,.6,.2];return a&&(r=[.4,.2,0]),setGradientStop(n,"0%",e,r[0]),setGradientStop(n,"50%",e,r[1]),setGradientStop(n,"100%",e,r[2]),i}function makeHeatSquare(t,e,a,i){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:a,width:i,height:i,fill:n};return Object.keys(r).map(function(t){s[t]=r[t]}),createSVG("rect",s)}function makeText(t,e,a,i){return createSVG("text",{className:t,x:e,y:a,dy:FONT_SIZE/2+"px","font-size":FONT_SIZE+"px",innerHTML:i})}function makeVertLine(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};n.stroke||(n.stroke=BASE_LINE_COLOR);var r=createSVG("line",{className:"line-vertical "+n.className,x1:0,x2:0,y1:a,y2:i,styles:{stroke:n.stroke}}),s=createSVG("text",{x:0,y:a>i?a+LABEL_MARGIN:a-LABEL_MARGIN-FONT_SIZE,dy:FONT_SIZE+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:e}),o=createSVG("g",{transform:"translate("+t+", 0)"});return o.appendChild(r),o.appendChild(s),o}function makeHoriLine(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};n.stroke||(n.stroke=BASE_LINE_COLOR),n.lineType||(n.lineType="");var r=createSVG("line",{className:"line-horizontal "+n.className+("dashed"===n.lineType?"dashed":""),x1:a,x2:i,y1:0,y2:0,styles:{stroke:n.stroke}}),s=createSVG("text",{x:a3&&void 0!==arguments[3]?arguments[3]:{};i.pos||(i.pos="left"),i.offset||(i.offset=0),i.mode||(i.mode="span"),i.stroke||(i.stroke=BASE_LINE_COLOR),i.className||(i.className="");var n=-1*AXIS_TICK_LENGTH,r="span"===i.mode?a+AXIS_TICK_LENGTH:0;return"tick"===i.mode&&"right"===i.pos&&(n=a+AXIS_TICK_LENGTH,r=a),n+=i.offset,r+=i.offset,makeHoriLine(t,e,n,r,{stroke:i.stroke,className:i.className,lineType:i.lineType})}function xLine(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};i.pos||(i.pos="bottom"),i.offset||(i.offset=0),i.mode||(i.mode="span"),i.stroke||(i.stroke=BASE_LINE_COLOR),i.className||(i.className="");var n=a+AXIS_TICK_LENGTH,r="span"===i.mode?-1*AXIS_TICK_LENGTH:a;return"tick"===i.mode&&"top"===i.pos&&(n=-1*AXIS_TICK_LENGTH,r=0),makeVertLine(t,e,n,r,{stroke:i.stroke,className:i.className,lineType:i.lineType})}function yMarker(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},n=createSVG("text",{className:"chart-label",x:a-getStringWidth(e,5)-LABEL_MARGIN,y:0,dy:FONT_SIZE/-2+"px","font-size":FONT_SIZE+"px","text-anchor":"start",innerHTML:e+""}),r=makeHoriLine(t,"",0,a,{stroke:i.stroke||BASE_LINE_COLOR,className:i.className||"",lineType:i.lineType});return r.appendChild(n),r}function yRegion(t,e,a,i){var n=t-e,r=createSVG("rect",{className:"bar mini",styles:{fill:"rgba(228, 234, 239, 0.49)",stroke:BASE_LINE_COLOR,"stroke-dasharray":a+", "+n},x:0,y:0,width:a,height:n}),s=createSVG("text",{className:"chart-label",x:a-getStringWidth(i,4.5)-LABEL_MARGIN,y:0,dy:FONT_SIZE/-2+"px","font-size":FONT_SIZE+"px","text-anchor":"start",innerHTML:i+""}),o=createSVG("g",{transform:"translate(0, "+e+")"});return o.appendChild(r),o.appendChild(s),o}function datasetBar(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"",r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,s=arguments.length>6&&void 0!==arguments[6]?arguments[6]:0,o=arguments.length>7&&void 0!==arguments[7]?arguments[7]:{},l=getBarHeightAndYAttr(e,o.zeroLine),c=slicedToArray(l,2),h=c[0],u=c[1],d=createSVG("rect",{className:"bar mini",style:"fill: "+i,"data-point-index":r,x:t,y:u-=s,width:a,height:h||o.minHeight});if(n||n.length){d.setAttribute("y",0),d.setAttribute("x",0);var p=createSVG("text",{className:"data-point-value",x:a/2,y:0,dy:FONT_SIZE/2*-1+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:n}),f=createSVG("g",{transform:"translate("+t+", "+u+")"});return f.appendChild(d),f.appendChild(p),f}return d}function datasetDot(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"",r=createSVG("circle",{style:"fill: "+i,"data-point-index":arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,cx:t,cy:e,r:a});if(n||n.length){r.setAttribute("cy",0),r.setAttribute("cx",0);var s=createSVG("text",{className:"data-point-value",x:0,y:0,dy:FONT_SIZE/2*-1-a+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:n}),o=createSVG("g",{transform:"translate("+t+", "+e+")"});return o.appendChild(r),o.appendChild(s),o}return r}function getPaths(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{},r=e.map(function(e,a){return t[a]+","+e}).join("L"),s=makePath("M"+r,"line-graph-path",a);if(i.heatline){var o=makeGradient(n.svgDefs,a);s.style.stroke="url(#"+o+")"}var l={path:s};if(i.regionFill){var c=makeGradient(n.svgDefs,a,!0),h="M"+t[0]+","+n.zeroLine+"L"+r+"L"+t.slice(-1)[0]+","+n.zeroLine;l.region=makePath(h,"region-fill","none","url(#"+c+")")}return l}function limitColor(t){return t>255?255:t<0?0:t}function lightenDarkenColor(t,e){var a=getColor(t),i=!1;"#"==a[0]&&(a=a.slice(1),i=!0);var n=parseInt(a,16),r=limitColor((n>>16)+e),s=limitColor((n>>8&255)+e),o=limitColor((255&n)+e);return(i?"#":"")+(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,a){if(t!==e){ALL_CHART_TYPES.includes(t)||console.error("'"+t+"' is not a valid chart type."),COMPATIBLE_CHARTS[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var i=COLOR_COMPATIBLE_CHARTS[e].includes(t);return new Chart({parent:a.parent,title:a.title,data:a.data,type:t,height:a.height,colors:i?a.colors:void 0})}}function animateSVGElement(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"linear",n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:void 0,r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},s=t.cloneNode(!0),o=t.cloneNode(!0);for(var l in e){var c=void 0;c="transform"===l?document.createElementNS("http://www.w3.org/2000/svg","animateTransform"):document.createElementNS("http://www.w3.org/2000/svg","animate");var h=r[l]||t.getAttribute(l),u=e[l],d={attributeName:l,from:h,to:u,begin:"0s",dur:a/1e3+"s",values:h+";"+u,keySplines:EASING[i],keyTimes:"0;1",calcMode:"spline",fill:"freeze"};n&&(d.type=n);for(var p in d)c.setAttribute(p,d[p]);s.appendChild(c),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 a=[],i=[];e.map(function(t){var e=t[0],n=e.parentNode,r=void 0,s=void 0;t[0]=e;var o=animateSVGElement.apply(void 0,toConsumableArray(t)),l=slicedToArray(o,2);r=l[0],s=l[1],a.push(s),i.push([r,n]),n.replaceChild(r,e)});var n=t.cloneNode(!0);return i.map(function(t,i){t[1].replaceChild(a[i],t[0]),e[i][0]=a[i]}),n}function runSMILAnimation(t,e,a){if(0!==a.length){var i=animateSVG(e,a);e.parentNode==t&&(t.removeChild(e),t.appendChild(i)),setTimeout(function(){i.parentNode==t&&(t.removeChild(i),t.appendChild(e))},REPLACE_ALL_NEW_DUR)}}function dataPrep(t,e){t.labels=t.labels||[];var a=t.labels.length,i=t.datasets,n=new Array(a).fill(0);return i||(i=[{values:n}]),i.map(function(t,i){if(t.values){var r=t.values;r=(r=r.map(function(t){return isNaN(t)?0:t})).length>a?r.slice(0,a):fillArray(r,a-r.length,0)}else t.values=n;t.chartType||(AXIS_DATASET_CHART_TYPES.includes(e),t.chartType=e)}),t.yRegions&&t.yRegions.map(function(t){if(t.end0?1:-1;if(!isFinite(t))return{mantissa:4503599627370496*e,exponent:972};t=Math.abs(t);var a=Math.floor(Math.log10(t));return[e*(t/Math.pow(10,a)),a]}function getChartRangeIntervals(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,a=Math.ceil(t),i=Math.floor(e),n=a-i,r=n,s=1;n>5&&(n%2!=0&&(n=++a-i),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(i+s*l);return o}function getChartIntervals(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,a=normalize(t),i=slicedToArray(a,2),n=i[0],r=i[1],s=e?e/Math.pow(10,r):0,o=getChartRangeIntervals(n=n.toFixed(6),s);return o=o.map(function(t){return t*Math.pow(10,r)})}function calcChartIntervals(t){function e(t,e){for(var a=getChartIntervals(t),i=a[1]-a[0],n=0,r=1;n1&&void 0!==arguments[1]&&arguments[1],i=Math.max.apply(Math,toConsumableArray(t)),n=Math.min.apply(Math,toConsumableArray(t)),r=[];if(i>=0&&n>=0)normalize(i)[1],r=a?getChartIntervals(i,n):getChartIntervals(i);else if(i>0&&n<0){var s=Math.abs(n);i>=s?(normalize(i)[1],r=e(i,s)):(normalize(s)[1],r=e(s,i).map(function(t){return-1*t}))}else if(i<=0&&n<=0){var o=Math.abs(n),l=Math.abs(i);normalize(o)[1],r=(r=a?getChartIntervals(o,l):getChartIntervals(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 scale(t,e){return floatTwo(e.zeroLine-t*e.scaleMultiplier)}function calcDistribution(t,e){for(var a=Math.max.apply(Math,toConsumableArray(t)),i=1/(e-1),n=[],r=0;r9?"":"0")+e,(a>9?"":"0")+a,t.getFullYear()].join("-")}function getWeeksBetween(t,e){return Math.ceil(getDaysBetween(t,e)/7)}function getDaysBetween(t,e){return(treatAsUtc(e)-treatAsUtc(t))/864e5}function addDays(t,e){t.setDate(t.getDate()+e)}function getChartByType(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return"line"===t?(e.type="line",new AxisChart(e)):"bar"===t?(e.type="bar",new AxisChart(e)):"axis-mixed"===t?(e.type="line",new AxisChart(e)):chartTypes[t]?new chartTypes[t](e):void console.error("Undefined chart type: "+t)}__$styleInject('.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path,.chart-container .multiaxis-chart .line-horizontal,.chart-container .multiaxis-chart .y-axis-guide{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}',void 0);var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},asyncGenerator=function(){function t(t){this.value=t}function e(e){function a(t,e){return new Promise(function(a,n){var o={key:t,arg:e,resolve:a,reject:n,next:null};s?s=s.next=o:(r=s=o,i(t,e))})}function i(a,r){try{var s=e[a](r),o=s.value;o instanceof t?Promise.resolve(o.value).then(function(t){i("next",t)},function(t){i("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)?i(r.key,r.arg):s=null}var r,s;this._invoke=a,"function"!=typeof e.return&&(this.return=void 0)}return"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)},{wrap:function(t){return function(){return new e(t.apply(this,arguments))}},await:function(e){return new t(e)}}}(),classCallCheck=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},createClass=function(){function t(t,e){for(var a=0;a\n\t\t\t\t
        \n\t\t\t\t
        '}),this.hide_tip(),this.title=this.container.querySelector(".title"),this.data_point_list=this.container.querySelector(".data-point-list"),this.parent.addEventListener("mouseleave",function(){t.hide_tip()})}},{key:"fill",value:function(){var t=this,e=void 0;e=this.title_value_first?""+this.title_value+""+this.title_name:this.title_name+""+this.title_value+"",this.title.innerHTML=e,this.data_point_list.innerHTML="",this.list_values.map(function(e,a){var i=t.colors[a]||"black",n=$.create("li",{styles:{"border-top":"3px solid "+i},innerHTML:''+(0===e.value||e.value?e.value:"")+"\n\t\t\t\t\t"+(e.title?e.title:"")});t.data_point_list.appendChild(n)})}},{key:"calc_position",value:function(){var t=this.container.offsetWidth;this.top=this.y-this.container.offsetHeight,this.left=this.x-t/2;var e=this.parent.offsetWidth-t,a=this.container.querySelector(".svg-pointer");if(this.left<0)a.style.left="calc(50% - "+-1*this.left+"px)",this.left=0;else if(this.left>e){var i="calc(50% + "+(this.left-e)+"px)";a.style.left=i,this.left=e}else a.style.left="50%"}},{key:"set_values",value:function(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0;this.title_name=a,this.title_value=i,this.list_values=n,this.x=t,this.y=e,this.title_value_first=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}(),UNIT_ANIM_DUR=350,PATH_ANIM_DUR=350,MARKER_LINE_ANIM_DUR=UNIT_ANIM_DUR,REPLACE_ALL_NEW_DUR=250,STD_EASING="easein",Y_AXIS_MARGIN=60,DEFAULT_AXIS_CHART_TYPE="line",AXIS_DATASET_CHART_TYPES=["line","bar"],BAR_CHART_SPACE_RATIO=.5,MIN_BAR_PERCENT_HEIGHT=.01,LINE_CHART_DOT_SIZE=4,DOT_OVERLAY_SIZE_INCR=4,AXIS_TICK_LENGTH=6,LABEL_MARGIN=4,FONT_SIZE=10,BASE_LINE_COLOR="#dadada",makeOverlay={bar:function(t){var e=void 0;"rect"!==t.nodeName&&(e=t.getAttribute("transform"),t=t.childNodes[0]);var a=t.cloneNode();return a.style.fill="#000000",a.style.opacity="0.4",e&&a.setAttribute("transform",e),a},dot:function(t){var e=void 0;"circle"!==t.nodeName&&(e=t.getAttribute("transform"),t=t.childNodes[0]);var a=t.cloneNode(),i=t.getAttribute("r");return a.setAttribute("r",i+DOT_OVERLAY_SIZE_INCR),a.style.fill="#000000",a.style.opacity="0.4",e&&a.setAttribute("transform",e),a}},updateOverlay={bar:function(t,e){var a=void 0;"rect"!==t.nodeName&&(a=t.getAttribute("transform"),t=t.childNodes[0]);var i=["x","y","width","height"];Object.values(t.attributes).filter(function(t){return i.includes(t.name)&&t.specified}).map(function(t){e.setAttribute(t.name,t.nodeValue)}),a&&e.setAttribute("transform",a)},dot:function(t,e){var a=void 0;"circle"!==t.nodeName&&(a=t.getAttribute("transform"),t=t.childNodes[0]);var i=["cx","cy"];Object.values(t.attributes).filter(function(t){return i.includes(t.name)&&t.specified}).map(function(t){e.setAttribute(t.name,t.nodeValue)}),a&&e.setAttribute("transform",a)}},PRESET_COLOR_MAP={"light-blue":"#7cd6fd",blue:"#5e64ff",violet:"#743ee2",red:"#ff5858",orange:"#ffa00a",yellow:"#feef72",green:"#28a745","light-green":"#98d85b",purple:"#b554ff",magenta:"#ffa3ef",black:"#36114C",grey:"#bdd3e6","light-grey":"#f0f4f7","dark-grey":"#b8c2cc"},DEFAULT_COLORS=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],getColor=function(t){return PRESET_COLOR_MAP[t]||t},ALL_CHART_TYPES=["line","scatter","bar","percentage","heatmap","pie"],COMPATIBLE_CHARTS={bar:["line","scatter","percentage","pie"],line:["scatter","bar","percentage","pie"],pie:["line","scatter","percentage","bar"],scatter:["line","bar","percentage","pie"],percentage:["bar","line","scatter","pie"],heatmap:[]},COLOR_COMPATIBLE_CHARTS={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},EASING={ease:"0.25 0.1 0.25 1",linear:"0 0 1 1",easein:"0.1 0.8 0.2 1",easeout:"0 0 0.58 1",easeinout:"0.42 0 0.58 1"},BaseChart=function(){function t(e){var a=e.height,i=void 0===a?240:a,n=e.title,r=void 0===n?"":n,s=e.subtitle,o=void 0===s?"":s,l=(e.colors,e.isNavigable),c=void 0===l?0:l,h=(e.showLegend,e.type),u=void 0===h?"":h,d=e.parent,p=e.data;classCallCheck(this,t),this.rawChartArgs=arguments[0],this.parent="string"==typeof d?document.querySelector(d):d,this.title=r,this.subtitle=o,this.argHeight=i,this.type=u,this.realData=this.prepareData(p),this.data=this.prepareFirstData(this.realData),this.colors=[],this.config={showTooltip:1,showLegend:1,isNavigable:c,animate:1},this.state={},this.options={},this.config.isNavigable&&(this.state.currentIndex=0,this.overlays=[]),this.configure(arguments[0])}return createClass(t,[{key:"configure",value:function(t){var e=this;this.setColors(),this.setMargins(),window.addEventListener("resize",function(){return e.draw()}),window.addEventListener("orientationchange",function(){return e.draw()})}},{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=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calcWidth(),this.calc(),this.makeChartArea(),this.setupComponents(),this.components.forEach(function(e){return e.setup(t.drawArea)}),this.components.forEach(function(t){return t.make()}),e&&(this.data=this.realData,setTimeout(function(){t.update()},400)),this.renderLegend(),this.setupNavigation(e)}},{key:"calcWidth",value:function(){this.baseWidth=getElementContentWidth(this.parent)-0,this.width=this.baseWidth-(this.translateXLeft+this.translateXRight)}},{key:"update",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data;this.data=this.prepareData(t),this.calc(),this.render()}},{key:"prepareData",value:function(){return arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data}},{key:"prepareFirstData",value:function(){return arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data}},{key:"calc",value:function(){}},{key:"render",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.components,a=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.config.isNavigable&&this.overlays.map(function(t){return t.parentNode.removeChild(t)});var i=[];e.forEach(function(t){i=i.concat(t.update(a))}),i.length>0?(runSMILAnimation(this.chartWrapper,this.svg,i),setTimeout(function(){e.forEach(function(t){return t.make()}),t.updateNav()},400)):this.updateNav()}},{key:"updateNav",value:function(){this.config.isNavigable&&(this.overlayGuides?this.updateOverlays():(this.makeOverlays(),this.bindUnits()))}},{key:"makeChartArea",value:function(){this.svg&&this.chartWrapper.removeChild(this.svg),this.svg=makeSVGContainer(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svgDefs=makeSVGDefs(this.svg),this.drawArea=makeSVGGroup(this.svg,this.type+"-chart","translate("+this.translateXLeft+", "+this.translateY+")")}},{key:"renderLegend",value:function(){}},{key:"setupNavigation",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.config.isNavigable&&e&&(this.bindOverlay(),this.keyActions={13:this.onEnterKey.bind(this),37:this.onLeftArrow.bind(this),38:this.onUpArrow.bind(this),39:this.onRightArrow.bind(this),40:this.onDownArrow.bind(this)},document.addEventListener("keydown",function(e){isElementInViewport(t.chartWrapper)&&(e=e||window.event,t.keyActions[e.keyCode]())}))}},{key:"makeOverlays",value:function(){}},{key:"bindOverlay",value:function(){}},{key:"bindUnits",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:"setCurrentDataPoint",value:function(t){}},{key:"updateDataset",value:function(t,e){}},{key:"addDataset",value:function(t,e){}},{key:"removeDataset",value:function(){}},{key:"updateDatasets",value:function(t){}},{key:"updateDataPoint",value:function(t){}},{key:"addDataPoint",value:function(t){}},{key:"removeDataPoint",value:function(){}},{key:"getDifferentChart",value:function(t){return getDifferentChart(t,this.type,this.rawChartArgs)}}]),t}(),ChartComponent$1=function(){function t(e){var a=e.layerClass,i=void 0===a?"":a,n=e.layerTransform,r=void 0===n?"":n,s=e.constants,o=e.getData,l=e.makeElements,c=e.animateElements;classCallCheck(this,t),this.layerTransform=r,this.constants=s,this.makeElements=l,this.getData=o,this.animateElements=c,this.store=[],this.layerClass=i,this.layerClass="function"==typeof this.layerClass?this.layerClass():this.layerClass,this.refresh()}return createClass(t,[{key:"refresh",value:function(t){this.data=t||this.getData()}},{key:"setup",value:function(t){this.layer=makeSVGGroup(t,this.layerClass,this.layerTransform)}},{key:"make",value:function(){this.render(this.data),this.oldData=this.data}},{key:"render",value:function(t){var e=this;this.store=this.makeElements(t),this.layer.textContent="",this.store.forEach(function(t){e.layer.appendChild(t)})}},{key:"update",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.refresh();var e=[];return t&&(e=this.animateElements(this.data)),e}}]),t}(),componentConfigs={yAxis:{layerClass:"y axis",makeElements:function(t){var e=this;return t.positions.map(function(a,i){return yLine(a,t.labels[i],e.constants.width,{mode:e.constants.mode,pos:e.constants.pos})})},animateElements:function(t){var e=t.positions,a=t.labels,i=this.oldData.positions,n=this.oldData.labels,r=equilizeNoOfElements(i,e),s=slicedToArray(r,2);i=s[0],e=s[1];var o=equilizeNoOfElements(n,a),l=slicedToArray(o,2);return n=l[0],a=l[1],this.render({positions:i,labels:a}),this.store.map(function(t,a){return translateHoriLine(t,e[a],i[a])})}},xAxis:{layerClass:"x axis",makeElements:function(t){var e=this;return t.positions.map(function(a,i){return xLine(a,t.labels[i],e.constants.height,{mode:e.constants.mode,pos:e.constants.pos})})},animateElements:function(t){var e=t.positions,a=t.labels,i=this.oldData.positions,n=this.oldData.labels,r=equilizeNoOfElements(i,e),s=slicedToArray(r,2);i=s[0],e=s[1];var o=equilizeNoOfElements(n,a),l=slicedToArray(o,2);return n=l[0],a=l[1],this.render({positions:i,labels:a}),this.store.map(function(t,a){return translateVertLine(t,e[a],i[a])})}},yMarkers:{layerClass:"y-markers",makeElements:function(t){var e=this;return t.map(function(t){return yMarker(t.position,t.label,e.constants.width,{pos:"right",mode:"span",lineType:"dashed"})})},animateElements:function(t){var e=equilizeNoOfElements(this.oldData,t),a=slicedToArray(e,2);this.oldData=a[0];var i=(t=a[1]).map(function(t){return t.position}),n=t.map(function(t){return t.label}),r=this.oldData.map(function(t){return t.position});this.oldData.map(function(t){return t.label});return this.render(r.map(function(t,e){return{position:r[e],label:n[e]}})),this.store.map(function(t,e){return translateHoriLine(t,i[e],r[e])})}},yRegions:{layerClass:"y-regions",makeElements:function(t){var e=this;return t.map(function(t){return yRegion(t.start,t.end,e.constants.width,t.label)})},animateElements:function(t){var e=equilizeNoOfElements(this.oldData,t),a=slicedToArray(e,2);this.oldData=a[0];var i=(t=a[1]).map(function(t){return t.end}),n=t.map(function(t){return t.label}),r=t.map(function(t){return t.start}),s=this.oldData.map(function(t){return t.end}),o=(this.oldData.map(function(t){return t.label}),this.oldData.map(function(t){return t.start}));this.render(s.map(function(t,e){return{start:o[e],end:s[e],label:n[e]}}));var l=[];return this.store.map(function(t,e){l=l.concat(animateRegion(t,r[e],i[e],s[e]))}),l}},barGraph:{layerClass:function(){return"dataset-units dataset-bars dataset-"+this.constants.index},makeElements:function(t){var e=this.constants;return this.unitType="bar",t.yPositions.map(function(a,i){return datasetBar(t.xPositions[i],a,t.barWidth,e.color,e.valuesOverPoints?e.stacked?t.cumulativeYs[i]:t.values[i]:"",i,a-(e.stacked?t.cumulativeYPos[i]:a),{zeroLine:t.zeroLine,barsWidth:t.barsWidth,minHeight:e.minHeight})})},animateElements:function(t){var e=this.constants,a=t.xPositions,i=t.yPositions,n=t.cumulativeYPos,r=t.values,s=t.cumulativeYs,o=this.oldData.xPositions,l=this.oldData.yPositions,c=this.oldData.cumulativeYPos,h=this.oldData.values,u=this.oldData.cumulativeYs,d=equilizeNoOfElements(o,a),p=slicedToArray(d,2);o=p[0],a=p[1];var f=equilizeNoOfElements(l,i),v=slicedToArray(f,2);l=v[0],i=v[1];var m=equilizeNoOfElements(c,n),y=slicedToArray(m,2);c=y[0],n=y[1];var g=equilizeNoOfElements(h,r),_=slicedToArray(g,2);h=_[0],r=_[1];var b=equilizeNoOfElements(u,s),x=slicedToArray(b,2);u=x[0],s=x[1],this.render({xPositions:o,yPositions:l,cumulativeYPos:c,values:r,cumulativeYs:s,zeroLine:this.oldData.zeroLine,barsWidth:this.oldData.barsWidth,barWidth:this.oldData.barWidth});var A=[];return this.store.map(function(n,r){A=A.concat(animateBar(n,a[r],i[r],t.barWidth,e.index,{zeroLine:t.zeroLine}))}),A}},lineGraph:{layerClass:function(){return"dataset-units dataset-line dataset-"+this.constants.index},makeElements:function(t){var e=this.constants;return this.unitType="dot",this.paths=getPaths(t.xPositions,t.yPositions,e.color,{heatline:e.heatline,regionFill:e.regionFill},{svgDefs:e.svgDefs,zeroLine:t.zeroLine}),this.dots=[],e.hideDots||(this.dots=t.yPositions.map(function(a,i){return datasetDot(t.xPositions[i],a,t.radius,e.color,e.valuesOverPoints?t.values[i]:"",i)})),Object.values(this.paths).concat(this.dots)},animateElements:function(t){var e=t.xPositions,a=t.yPositions,i=t.values,n=this.oldData.xPositions,r=this.oldData.yPositions,s=this.oldData.values,o=equilizeNoOfElements(n,e),l=slicedToArray(o,2);n=l[0],e=l[1];var c=equilizeNoOfElements(r,a),h=slicedToArray(c,2);r=h[0],a=h[1];var u=equilizeNoOfElements(s,i),d=slicedToArray(u,2);s=d[0],i=d[1],this.render({xPositions:n,yPositions:r,values:i,zeroLine:this.oldData.zeroLine,radius:this.oldData.radius});var p=[];return p=p.concat(animatePath(this.paths,e,a,t.zeroLine)),this.dots.length&&this.dots.map(function(t,i){p=p.concat(animateDot(t,e[i],a[i]))}),p}}},AxisChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.isSeries=t.isSeries,a.valuesOverPoints=t.valuesOverPoints,a.formatTooltipY=t.formatTooltipY,a.formatTooltipX=t.formatTooltipX,a.barOptions=t.barOptions||{},a.lineOptions=t.lineOptions||{},a.type=t.type||"line",a.xAxisMode=t.xAxisMode||"span",a.yAxisMode=t.yAxisMode||"span",a.setup(),a}return inherits(e,t),createClass(e,[{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this),this.config.xAxisMode=t.xAxisMode,this.config.yAxisMode=t.yAxisMode}},{key:"setMargins",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setMargins",this).call(this),this.translateXLeft=Y_AXIS_MARGIN,this.translateXRight=Y_AXIS_MARGIN}},{key:"prepareData",value:function(){return dataPrep(arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data,this.type)}},{key:"prepareFirstData",value:function(){return zeroDataPrep(arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data)}},{key:"calc",value:function(){this.calcXPositions(),this.calcYAxisParameters(this.getAllYValues(),"line"===this.type)}},{key:"calcXPositions",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state,e=this.data.labels;t.datasetLength=e.length,t.unitWidth=this.width/t.datasetLength,t.xOffset=t.unitWidth/2,t.xAxis={labels:e,positions:e.map(function(e,a){return floatTwo(t.xOffset+a*t.unitWidth)})}}},{key:"calcYAxisParameters",value:function(t){var e=calcChartIntervals(t,arguments.length>1&&void 0!==arguments[1]?arguments[1]:"false"),a=this.height/getValueRange(e),i=getIntervalSize(e)*a,n=this.height-getZeroIndex(e)*i;this.state.yAxis={labels:e,positions:e.map(function(t){return n-t*a}),scaleMultiplier:a,zeroLine:n},this.calcDatasetPoints(),this.calcYExtremes(),this.calcYRegions()}},{key:"calcDatasetPoints",value:function(){var t=this.state,e=function(e){return e.map(function(e){return scale(e,t.yAxis)})};t.datasets=this.data.datasets.map(function(t,a){var i=t.values,n=t.cumulativeYs||[];return{name:t.name,index:a,chartType:t.chartType,values:i,yPositions:e(i),cumulativeYs:n,cumulativeYPos:e(n)}})}},{key:"calcYExtremes",value:function(){var t=this.state;if(this.barOptions.stacked)return void(t.yExtremes=t.datasets[t.datasets.length-1].cumulativeYPos);t.yExtremes=new Array(t.datasetLength).fill(9999),t.datasets.map(function(e,a){e.yPositions.map(function(e,a){e=0;r--){var s=a.xAxis.positions[r];if(t>s-a.unitWidth/2){var o=s+this.translateXLeft,l=a.yExtremes[r]+this.translateY,c=this.data.datasets.map(function(t,a){return{title:t.title,value:n?e.formatTooltipY(t.values[r]):t.values[r],color:e.colors[a]}});this.tip.set_values(o,l,i[r],"",c),this.tip.show_tip();break}}}}},{key:"makeOverlays",value:function(){var t=this;this.overlayGuides=this.dataUnitComponents.map(function(t){return{type:t.unitType,overlay:void 0,units:t.store}}),this.state.currentIndex=0,this.overlayGuides.map(function(e){var a=e.units[t.state.currentIndex];e.overlay=makeOverlay[e.type](a),t.drawArea.appendChild(e.overlay)})}},{key:"bindOverlay",value:function(){var t=this;this.parent.addEventListener("data-select",function(e){t.updateOverlay(e.svg_unit)})}},{key:"bindUnits",value:function(t){}},{key:"updateOverlay",value:function(){var t=this;this.overlayGuides.map(function(e){var a=e.units[t.state.currentIndex];updateOverlay[e.type](a,e.overlay)})}},{key:"onLeftArrow",value:function(){this.setCurrentDataPoint(this.state.currentIndex-1)}},{key:"onRightArrow",value:function(){this.setCurrentDataPoint(this.state.currentIndex+1)}},{key:"getDataPoint",value:function(){return{index:arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.currentIndex}}},{key:"setCurrentDataPoint",value:function(t){var e=this.state;(t=parseInt(t))<0&&(t=0),t>=e.xAxis.labels.length&&(t=e.xAxis.labels.length-1),t!==e.currentIndex&&(e.currentIndex=t,fire(this.parent,"data-select",this.getDataPoint()))}},{key:"addDataPoint",value:function(t,a){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.state.datasetLength;get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"addDataPoint",this).call(this,t,a,i),this.data.labels.splice(i,0,t),this.data.datasets.map(function(t,e){t.values.splice(i,0,a[e])}),this.update(this.data)}},{key:"removeDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.datasetLength-1;get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"removeDataPoint",this).call(this,t),this.data.labels.splice(t,1),this.data.datasets.map(function(e){e.values.splice(t,1)}),this.update(this.data)}},{key:"updateDataset",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;this.data.datasets[e].values=t,this.update(this.data)}}]),e}(BaseChart),MultiAxisChart=function(t){function e(t){return classCallCheck(this,e),possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return inherits(e,t),createClass(e,[{key:"preSetup",value:function(){this.type="multiaxis"}},{key:"setMargins",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setMargins",this).call(this);var t=this.data.datasets.filter(function(t){return"left"===t.axisPosition}).length;this.translateXLeft=t*Y_AXIS_MARGIN||Y_AXIS_MARGIN,this.translateXRight=(this.data.datasets.length-t)*Y_AXIS_MARGIN||Y_AXIS_MARGIN}},{key:"prepareYAxis",value:function(){}},{key:"prepareData",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"prepareData",this).call(this,t);var a=0,i=0;this.state.datasets.forEach(function(t,e){t.yAxis={position:t.axisPosition,index:"left"===t.axisPosition?a++:i++}})}},{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"tick",this.config.yAxisMode=t.yAxisMode||"span"}},{key:"configUnits",value:function(){this.unitArgs={type:"bar",args:{spaceWidth:this.state.unitWidth/2}}}},{key:"setYAxis",value:function(){var t=this;this.state.datasets.map(function(e){t.calcYAxisParameters(e.yAxis,e.values,"line"===t.unitType)})}},{key:"calcYUnits",value:function(){this.state.datasets.map(function(t){t.positions=t.values.map(function(e){return floatTwo(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"renderConstants",value:function(){var t=this;this.state.datasets.map(function(e){var a="left"===e.yAxis.position?-1*e.yAxis.index*Y_AXIS_MARGIN:t.width+e.yAxis.index*Y_AXIS_MARGIN;t.renderer.xLine(a,"",{pos:"top",mode:"span",stroke:t.colors[i],className:"y-axis-guide"})})}},{key:"getYAxesComponents",value:function(){var t=this;return this.data.datasets.map(function(e,a){return new ChartComponent({layerClass:"y axis y-axis-"+a,make:function(){var e=t.state.datasets[a].yAxis;t.renderer.setZeroline(e.zeroline);var i={pos:e.position,mode:"tick",offset:e.index*Y_AXIS_MARGIN,stroke:t.colors[a]};return e.positions.map(function(a,n){return t.renderer.yLine(a,e.labels[n],i)})},animate:function(){}})})}},{key:"getChartComponents",value:function(){var t=this;return this.data.datasets.map(function(e,a){return new ChartComponent({layerClass:"dataset-units dataset-"+a,make:function(){var e=t.state.datasets[a],i=t.unitArgs;return t.renderer.setZeroline(e.yAxis.zeroLine),e.positions.map(function(e,n){return t.renderer[i.type](t.state.xAxisPositions[n],e,i.args,t.colors[a],n,a,t.state.datasetLength)})},animate:function(e){var i=t.state.datasets[a],n=t.unitArgs.type,r=t.state.xAxisPositions,s=t.state.datasets[a].positions,o=e[e.length-1],l=o.parentNode;if(t.oldState.xExtra>0)for(var c=0;c0}),a=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),a=e.slice(0,this.max_slices-1);var i=0;e.slice(this.max_slices-1).map(function(t){i+=t[0]}),a.push([i,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],a.map(function(e){t.sliceTotals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.sliceTotals.slice(0,this.max_legend_points)}},{key:"bindTooltip",value:function(){}},{key:"renderLegend",value:function(){}}]),e}(BaseChart),ANGLE_RATIO=Math.PI/180,FULL_ANGLE=360,PieChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.type="pie",a.elements_to_animate=null,a.hoverRadio=t.hoverRadio||.1,a.max_slices=10,a.max_legend_points=6,a.isAnimate=!1,a.startAngle=t.startAngle||0,a.clockWise=t.clockWise||!1,a.mouseMove=a.mouseMove.bind(a),a.mouseLeave=a.mouseLeave.bind(a),a.setup(),a}return inherits(e,t),createClass(e,[{key:"calc",value:function(){var t=this;this.centerX=this.width/2,this.centerY=this.height/2,this.radius=this.height>this.width?this.centerX:this.centerY,this.slice_totals=[];var e=this.data.labels.map(function(e,a){var i=0;return t.data.datasets.map(function(t){i+=t.values[a]}),[i,e]}).filter(function(t){return t[0]>0}),a=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),a=e.slice(0,this.max_slices-1);var i=0;e.slice(this.max_slices-1).map(function(t){i+=t[0]}),a.push([i,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],a.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"makeArcPath",value:function(t,e){var a=this.centerX,i=this.centerY,n=this.radius,r=this.clockWise;return"M"+a+" "+i+" L"+(a+t.x)+" "+(i+t.y)+" A "+n+" "+n+" 0 0 "+(r?1:0)+" "+(a+e.x)+" "+(i+e.y)+" z"}},{key:"render",value:function(t){var a=this,i=this.radius,n=this.clockWise;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0);var r=this.slicesProperties||[];this.slices=[],this.elements_to_animate=[],this.slicesProperties=[];var s=180-this.startAngle;this.slice_totals.map(function(o,l){var c=s,h=o/a.grand_total*FULL_ANGLE,u=n?-h:h,d=s+=u,p=e.getPositionByAngle(c,i),f=e.getPositionByAngle(d,i),v=t&&r[l],m=void 0,y=void 0;t?(m=v?v.startPosition:p,y=v?v.endPosition:p):(m=p,y=f);var g=a.makeArcPath(m,y),_=makePath(g,"pie-path","none",a.colors[l]);_.style.transition="transform .3s;",a.drawArea.appendChild(_),a.slices.push(_),a.slicesProperties.push({startPosition:p,endPosition:f,value:o,total:a.grand_total,startAngle:c,endAngle:d,angle:u}),t&&a.elements_to_animate.push([{unit:_,array:a.slices,index:a.slices.length-1},{d:a.makeArcPath(p,f)},650,"easein",null,{d:g}])}),t&&runSMILAnimation(this.chartWrapper,this.svg,this.elements_to_animate)}},{key:"calTranslateByAngle",value:function(t){var a=this.radius,i=this.hoverRadio,n=e.getPositionByAngle(t.startAngle+t.angle/2,a);return"translate3d("+n.x*i+"px,"+n.y*i+"px,0)"}},{key:"hoverSlice",value:function(t,e,a,i){if(t){var n=this.colors[e];if(a){transform(t,this.calTranslateByAngle(this.slicesProperties[e])),t.style.fill=lightenDarkenColor(n,50);var r=getOffset(this.svg),s=i.pageX-r.left+10,o=i.pageY-r.top-10,l=(this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels[e]:this.labels[e])+": ",c=(100*this.slice_totals[e]/this.grand_total).toFixed(1);this.tip.set_values(s,o,l,c+"%"),this.tip.show_tip()}else transform(t,"translate3d(0,0,0)"),this.tip.hide_tip(),t.style.fill=n}}},{key:"mouseMove",value:function(t){for(var e=t.target,a=this.curActiveSliceIndex,i=this.curActiveSlice,n=0;n0?this.formatted_labels:this.labels;this.legend_totals.map(function(a,i){var n=t.colors[i];a&&($.create("div",{className:"stats",inside:t.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+e[i]+":\n\t\t\t\t\t"+a+"\n\t\t\t\t")})}}],[{key:"getPositionByAngle",value:function(t,e){return{x:Math.sin(t*ANGLE_RATIO)*e,y:Math.cos(t*ANGLE_RATIO)*e}}}]),e}(BaseChart),Heatmap=function(t){function e(t){var a=t.start,i=void 0===a?"":a,n=t.domain,r=void 0===n?"":n,s=t.subdomain,o=void 0===s?"":s,l=t.data,c=void 0===l?{}:l,h=t.discrete_domains,u=void 0===h?0:h,d=t.count_label,p=void 0===d?"":d,f=t.legend_colors,v=void 0===f?[]:f;classCallCheck(this,e);var m=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,arguments[0]));m.type="heatmap",m.domain=r,m.subdomain=o,m.data=c,m.discrete_domains=u,m.count_label=p;var y=new Date;return m.start=i||addDays(y,365),v=v.slice(0,5),m.legend_colors=m.validate_colors(v)?v:["#ebedf0","#c6e48b","#7bc96f","#239a3b","#196127"],m.distribution_size=5,m.translateX=0,m.setup(),m}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:"configure",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this),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:"makeChartArea",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"makeChartArea",this).call(this),this.domainLabelGroup=makeSVGGroup(this.drawArea,"domain-label-group chart-label"),this.dataGroups=makeSVGGroup(this.drawArea,"data-groups","translate(0, 20)")}},{key:"calc",value:function(){var t=this,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"]}},{key:"render",value:function(){this.renderAllWeeksAndStoreXValues(this.no_of_cols)}},{key:"renderAllWeeksAndStoreXValues",value:function(t){this.domainLabelGroup.textContent="",this.dataGroups.textContent="";var e=new Date(this.first_week_start);this.week_col=0,this.current_month=e.getMonth(),this.months=[this.current_month+""],this.month_weeks={},this.month_start_points=[],this.month_weeks[this.current_month]=0,this.month_start_points.push(13);for(var a=0;aa)break;v.getMonth()-t.getMonth()&&(i=1,this.discrete_domains&&(n=1),this.month_start_points.push(13+12*(e+n))),t=v}return[r,i]}},{key:"render_month_labels",value:function(){var t=this;this.months.shift(),this.month_start_points.shift(),this.months.pop(),this.month_start_points.pop(),this.month_start_points.map(function(e,a){var i=makeText("y-value-text",e+12,10,t.month_names[t.months[a]].substring(0,3));t.domainLabelGroup.appendChild(i)})}},{key:"bindTooltip",value:function(){var t=this;Array.prototype.slice.call(document.querySelectorAll(".data-group .day")).map(function(e){e.addEventListener("mouseenter",function(e){var a=e.target.getAttribute("data-value"),i=e.target.getAttribute("data-date").split("-"),n=t.month_names[parseInt(i[1])-1].substring(0,3),r=t.chartWrapper.getBoundingClientRect(),s=e.target.getBoundingClientRect(),o=parseInt(e.target.getAttribute("width")),l=s.left-r.left+(o+2)/2,c=s.top-r.top-(o+2)/2,h=a+" "+t.count_label,u=" on "+n+" "+i[0]+", "+i[2];t.tip.set_values(l,c,u,h,[],1),t.tip.show_tip()})})}},{key:"update",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"update",this).call(this,t),this.bindTooltip()}}]),e}(BaseChart),chartTypes={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 a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");return i.type="text/css",a.appendChild(i),i.styleSheet?i.styleSheet.cssText=t:i.appendChild(document.createTextNode(t)),e}function $(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function getOffset(t){var e=t.getBoundingClientRect();return{top:e.top+(document.documentElement.scrollTop||document.body.scrollTop),left:e.left+(document.documentElement.scrollLeft||document.body.scrollLeft)}}function isElementInViewport(t){var e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}function getElementContentWidth(t){var e=window.getComputedStyle(t),a=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return t.clientWidth-a}function fire(t,e,a){var i=document.createEvent("HTMLEvents");i.initEvent(e,!0,!0);for(var n in a)i[n]=a[n];return t.dispatchEvent(i)}function floatTwo(t){return parseFloat(t.toFixed(2))}function fillArray(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]&&arguments[3];a||(a=i?t[0]:t[t.length-1]);var n=new Array(Math.abs(e)).fill(a);return t=i?n.concat(t):t.concat(n)}function getStringWidth(t,e){return(t+"").length*e}function getBarHeightAndYAttr(t,e){var a=void 0,i=void 0;return t<=e?(a=e-t,i=t):(a=t-e,i=e),[a,i]}function equilizeNoOfElements(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.length-t.length;return a>0?t=fillArray(t,a):e=fillArray(e,a),[t,e]}function translate(t,e,a,i){var n="string"==typeof e?e:e.join(", ");return[t,{transform:a.join(", ")},i,STD_EASING,"translate",{transform:n}]}function translateVertLine(t,e,a){return translate(t,[a,0],[e,0],MARKER_LINE_ANIM_DUR)}function translateHoriLine(t,e,a){return translate(t,[0,a],[0,e],MARKER_LINE_ANIM_DUR)}function animateRegion(t,e,a,i){var n=e-a,r=t.childNodes[0];return[[r,{height:n,"stroke-dasharray":r.getAttribute("width")+", "+n},MARKER_LINE_ANIM_DUR,STD_EASING],translate(t,[0,i],[0,a],MARKER_LINE_ANIM_DUR)]}function animateBar(t,e,a,i){var n=getBarHeightAndYAttr(a,(arguments.length>5&&void 0!==arguments[5]?arguments[5]:{}).zeroLine),r=slicedToArray(n,2),s=r[0],o=r[1];return"rect"!==t.nodeName?[[t.childNodes[0],{width:i,height:s},UNIT_ANIM_DUR,STD_EASING],translate(t,t.getAttribute("transform").split("(")[1].slice(0,-1),[e,o],MARKER_LINE_ANIM_DUR)]:[[t,{width:i,height:s,x:e,y:o},UNIT_ANIM_DUR,STD_EASING]]}function animateDot(t,e,a){return"circle"!==t.nodeName?[translate(t,t.getAttribute("transform").split("(")[1].slice(0,-1),[e,a],MARKER_LINE_ANIM_DUR)]:[[t,{cx:e,cy:a},UNIT_ANIM_DUR,STD_EASING]]}function animatePath(t,e,a,i){var n=[],r=a.map(function(t,a){return e[a]+","+t}).join("L"),s=[t.path,{d:"M"+r},PATH_ANIM_DUR,STD_EASING];if(n.push(s),t.region){var o=e[0]+","+i+"L",l="L"+e.slice(-1)[0]+", "+i,c=[t.region,{d:"M"+o+r+l},PATH_ANIM_DUR,STD_EASING];n.push(c)}return n}function $$1(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function createSVG(t,e){var a=document.createElementNS("http://www.w3.org/2000/svg",t);for(var i in e){var n=e[i];if("inside"===i)$$1(n).appendChild(a);else if("around"===i){var r=$$1(n);r.parentNode.insertBefore(a,r),a.appendChild(r)}else"styles"===i?"object"===(void 0===n?"undefined":_typeof(n))&&Object.keys(n).map(function(t){a.style[t]=n[t]}):("className"===i&&(i="class"),"innerHTML"===i?a.textContent=n:a.setAttribute(i,n))}return a}function renderVerticalGradient(t,e){return createSVG("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function setGradientStop(t,e,a,i){return createSVG("stop",{inside:t,style:"stop-color: "+a,offset:e,"stop-opacity":i})}function makeSVGContainer(t,e,a,i){return createSVG("svg",{className:e,inside:t,width:a,height:i})}function makeSVGDefs(t){return createSVG("defs",{inside:t})}function makeSVGGroup(t,e){return createSVG("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function makePath(t){return createSVG("path",{className:arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",d:t,styles:{stroke:arguments.length>2&&void 0!==arguments[2]?arguments[2]:"none",fill:arguments.length>3&&void 0!==arguments[3]?arguments[3]:"none"}})}function makeGradient(t,e){var a=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i="path-fill-gradient-"+e+"-"+(a?"lighter":"default"),n=renderVerticalGradient(t,i),r=[1,.6,.2];return a&&(r=[.4,.2,0]),setGradientStop(n,"0%",e,r[0]),setGradientStop(n,"50%",e,r[1]),setGradientStop(n,"100%",e,r[2]),i}function makeHeatSquare(t,e,a,i){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:a,width:i,height:i,fill:n};return Object.keys(r).map(function(t){s[t]=r[t]}),createSVG("rect",s)}function makeText(t,e,a,i){return createSVG("text",{className:t,x:e,y:a,dy:FONT_SIZE/2+"px","font-size":FONT_SIZE+"px",innerHTML:i})}function makeVertLine(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};n.stroke||(n.stroke=BASE_LINE_COLOR);var r=createSVG("line",{className:"line-vertical "+n.className,x1:0,x2:0,y1:a,y2:i,styles:{stroke:n.stroke}}),s=createSVG("text",{x:0,y:a>i?a+LABEL_MARGIN:a-LABEL_MARGIN-FONT_SIZE,dy:FONT_SIZE+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:e}),o=createSVG("g",{transform:"translate("+t+", 0)"});return o.appendChild(r),o.appendChild(s),o}function makeHoriLine(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};n.stroke||(n.stroke=BASE_LINE_COLOR),n.lineType||(n.lineType="");var r=createSVG("line",{className:"line-horizontal "+n.className+("dashed"===n.lineType?"dashed":""),x1:a,x2:i,y1:0,y2:0,styles:{stroke:n.stroke}}),s=createSVG("text",{x:a3&&void 0!==arguments[3]?arguments[3]:{};i.pos||(i.pos="left"),i.offset||(i.offset=0),i.mode||(i.mode="span"),i.stroke||(i.stroke=BASE_LINE_COLOR),i.className||(i.className="");var n=-1*AXIS_TICK_LENGTH,r="span"===i.mode?a+AXIS_TICK_LENGTH:0;return"tick"===i.mode&&"right"===i.pos&&(n=a+AXIS_TICK_LENGTH,r=a),n+=i.offset,r+=i.offset,makeHoriLine(t,e,n,r,{stroke:i.stroke,className:i.className,lineType:i.lineType})}function xLine(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};i.pos||(i.pos="bottom"),i.offset||(i.offset=0),i.mode||(i.mode="span"),i.stroke||(i.stroke=BASE_LINE_COLOR),i.className||(i.className="");var n=a+AXIS_TICK_LENGTH,r="span"===i.mode?-1*AXIS_TICK_LENGTH:a;return"tick"===i.mode&&"top"===i.pos&&(n=-1*AXIS_TICK_LENGTH,r=0),makeVertLine(t,e,n,r,{stroke:i.stroke,className:i.className,lineType:i.lineType})}function yMarker(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},n=createSVG("text",{className:"chart-label",x:a-getStringWidth(e,5)-LABEL_MARGIN,y:0,dy:FONT_SIZE/-2+"px","font-size":FONT_SIZE+"px","text-anchor":"start",innerHTML:e+""}),r=makeHoriLine(t,"",0,a,{stroke:i.stroke||BASE_LINE_COLOR,className:i.className||"",lineType:i.lineType});return r.appendChild(n),r}function yRegion(t,e,a,i){var n=t-e,r=createSVG("rect",{className:"bar mini",styles:{fill:"rgba(228, 234, 239, 0.49)",stroke:BASE_LINE_COLOR,"stroke-dasharray":a+", "+n},x:0,y:0,width:a,height:n}),s=createSVG("text",{className:"chart-label",x:a-getStringWidth(i,4.5)-LABEL_MARGIN,y:0,dy:FONT_SIZE/-2+"px","font-size":FONT_SIZE+"px","text-anchor":"start",innerHTML:i+""}),o=createSVG("g",{transform:"translate(0, "+e+")"});return o.appendChild(r),o.appendChild(s),o}function datasetBar(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"",r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,s=arguments.length>6&&void 0!==arguments[6]?arguments[6]:0,o=arguments.length>7&&void 0!==arguments[7]?arguments[7]:{},l=getBarHeightAndYAttr(e,o.zeroLine),c=slicedToArray(l,2),h=c[0],u=c[1],d=createSVG("rect",{className:"bar mini",style:"fill: "+i,"data-point-index":r,x:t,y:u-=s,width:a,height:h||o.minHeight});if(n||n.length){d.setAttribute("y",0),d.setAttribute("x",0);var p=createSVG("text",{className:"data-point-value",x:a/2,y:0,dy:FONT_SIZE/2*-1+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:n}),f=createSVG("g",{transform:"translate("+t+", "+u+")"});return f.appendChild(d),f.appendChild(p),f}return d}function datasetDot(t,e,a,i){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"",r=createSVG("circle",{style:"fill: "+i,"data-point-index":arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,cx:t,cy:e,r:a});if(n||n.length){r.setAttribute("cy",0),r.setAttribute("cx",0);var s=createSVG("text",{className:"data-point-value",x:0,y:0,dy:FONT_SIZE/2*-1-a+"px","font-size":FONT_SIZE+"px","text-anchor":"middle",innerHTML:n}),o=createSVG("g",{transform:"translate("+t+", "+e+")"});return o.appendChild(r),o.appendChild(s),o}return r}function getPaths(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{},r=e.map(function(e,a){return t[a]+","+e}).join("L"),s=makePath("M"+r,"line-graph-path",a);if(i.heatline){var o=makeGradient(n.svgDefs,a);s.style.stroke="url(#"+o+")"}var l={path:s};if(i.regionFill){var c=makeGradient(n.svgDefs,a,!0),h="M"+t[0]+","+n.zeroLine+"L"+r+"L"+t.slice(-1)[0]+","+n.zeroLine;l.region=makePath(h,"region-fill","none","url(#"+c+")")}return l}function limitColor(t){return t>255?255:t<0?0:t}function lightenDarkenColor(t,e){var a=getColor(t),i=!1;"#"==a[0]&&(a=a.slice(1),i=!0);var n=parseInt(a,16),r=limitColor((n>>16)+e),s=limitColor((n>>8&255)+e),o=limitColor((255&n)+e);return(i?"#":"")+(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,a){if(t!==e){ALL_CHART_TYPES.includes(t)||console.error("'"+t+"' is not a valid chart type."),COMPATIBLE_CHARTS[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var i=COLOR_COMPATIBLE_CHARTS[e].includes(t);return new Chart({parent:a.parent,title:a.title,data:a.data,type:t,height:a.height,colors:i?a.colors:void 0})}}function animateSVGElement(t,e,a){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"linear",n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:void 0,r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},s=t.cloneNode(!0),o=t.cloneNode(!0);for(var l in e){var c=void 0;c="transform"===l?document.createElementNS("http://www.w3.org/2000/svg","animateTransform"):document.createElementNS("http://www.w3.org/2000/svg","animate");var h=r[l]||t.getAttribute(l),u=e[l],d={attributeName:l,from:h,to:u,begin:"0s",dur:a/1e3+"s",values:h+";"+u,keySplines:EASING[i],keyTimes:"0;1",calcMode:"spline",fill:"freeze"};n&&(d.type=n);for(var p in d)c.setAttribute(p,d[p]);s.appendChild(c),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 a=[],i=[];e.map(function(t){var e=t[0],n=e.parentNode,r=void 0,s=void 0;t[0]=e;var o=animateSVGElement.apply(void 0,toConsumableArray(t)),l=slicedToArray(o,2);r=l[0],s=l[1],a.push(s),i.push([r,n]),n.replaceChild(r,e)});var n=t.cloneNode(!0);return i.map(function(t,i){t[1].replaceChild(a[i],t[0]),e[i][0]=a[i]}),n}function runSMILAnimation(t,e,a){if(0!==a.length){var i=animateSVG(e,a);e.parentNode==t&&(t.removeChild(e),t.appendChild(i)),setTimeout(function(){i.parentNode==t&&(t.removeChild(i),t.appendChild(e))},REPLACE_ALL_NEW_DUR)}}function treatAsUtc(t){var e=new Date(t);return e.setMinutes(e.getMinutes()-e.getTimezoneOffset()),e}function getDdMmYyyy(t){var e=t.getDate(),a=t.getMonth()+1;return[(e>9?"":"0")+e,(a>9?"":"0")+a,t.getFullYear()].join("-")}function getWeeksBetween(t,e){return Math.ceil(getDaysBetween(t,e)/7)}function getDaysBetween(t,e){return(treatAsUtc(e)-treatAsUtc(t))/864e5}function addDays(t,e){t.setDate(t.getDate()+e)}function normalize(t){if(0===t)return[0,0];if(isNaN(t))return{mantissa:-6755399441055744,exponent:972};var e=t>0?1:-1;if(!isFinite(t))return{mantissa:4503599627370496*e,exponent:972};t=Math.abs(t);var a=Math.floor(Math.log10(t));return[e*(t/Math.pow(10,a)),a]}function getChartRangeIntervals(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,a=Math.ceil(t),i=Math.floor(e),n=a-i,r=n,s=1;n>5&&(n%2!=0&&(n=++a-i),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(i+s*l);return o}function getChartIntervals(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,a=normalize(t),i=slicedToArray(a,2),n=i[0],r=i[1],s=e?e/Math.pow(10,r):0,o=getChartRangeIntervals(n=n.toFixed(6),s);return o=o.map(function(t){return t*Math.pow(10,r)})}function calcChartIntervals(t){function e(t,e){for(var a=getChartIntervals(t),i=a[1]-a[0],n=0,r=1;n1&&void 0!==arguments[1]&&arguments[1],i=Math.max.apply(Math,toConsumableArray(t)),n=Math.min.apply(Math,toConsumableArray(t)),r=[];if(i>=0&&n>=0)normalize(i)[1],r=a?getChartIntervals(i,n):getChartIntervals(i);else if(i>0&&n<0){var s=Math.abs(n);i>=s?(normalize(i)[1],r=e(i,s)):(normalize(s)[1],r=e(s,i).map(function(t){return-1*t}))}else if(i<=0&&n<=0){var o=Math.abs(n),l=Math.abs(i);normalize(o)[1],r=(r=a?getChartIntervals(o,l):getChartIntervals(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 scale(t,e){return floatTwo(e.zeroLine-t*e.scaleMultiplier)}function calcDistribution(t,e){for(var a=Math.max.apply(Math,toConsumableArray(t)),i=1/(e-1),n=[],r=0;ra?r.slice(0,a):fillArray(r,a-r.length,0)}else t.values=n;t.chartType||(AXIS_DATASET_CHART_TYPES.includes(e),t.chartType=e)}),t.yRegions&&t.yRegions.map(function(t){if(t.end0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return"line"===t?(e.type="line",new AxisChart(e)):"bar"===t?(e.type="bar",new AxisChart(e)):"axis-mixed"===t?(e.type="line",new AxisChart(e)):chartTypes[t]?new chartTypes[t](e):void console.error("Undefined chart type: "+t)}__$styleInject('.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path,.chart-container .multiaxis-chart .line-horizontal,.chart-container .multiaxis-chart .y-axis-guide{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}',void 0);var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},asyncGenerator=function(){function t(t){this.value=t}function e(e){function a(t,e){return new Promise(function(a,n){var o={key:t,arg:e,resolve:a,reject:n,next:null};s?s=s.next=o:(r=s=o,i(t,e))})}function i(a,r){try{var s=e[a](r),o=s.value;o instanceof t?Promise.resolve(o.value).then(function(t){i("next",t)},function(t){i("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)?i(r.key,r.arg):s=null}var r,s;this._invoke=a,"function"!=typeof e.return&&(this.return=void 0)}return"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)},{wrap:function(t){return function(){return new e(t.apply(this,arguments))}},await:function(e){return new t(e)}}}(),classCallCheck=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},createClass=function(){function t(t,e){for(var a=0;a\n\t\t\t\t
          \n\t\t\t\t
          '}),this.hide_tip(),this.title=this.container.querySelector(".title"),this.data_point_list=this.container.querySelector(".data-point-list"),this.parent.addEventListener("mouseleave",function(){t.hide_tip()})}},{key:"fill",value:function(){var t=this,e=void 0;e=this.title_value_first?""+this.title_value+""+this.title_name:this.title_name+""+this.title_value+"",this.title.innerHTML=e,this.data_point_list.innerHTML="",this.list_values.map(function(e,a){var i=t.colors[a]||"black",n=$.create("li",{styles:{"border-top":"3px solid "+i},innerHTML:''+(0===e.value||e.value?e.value:"")+"\n\t\t\t\t\t"+(e.title?e.title:"")});t.data_point_list.appendChild(n)})}},{key:"calc_position",value:function(){var t=this.container.offsetWidth;this.top=this.y-this.container.offsetHeight,this.left=this.x-t/2;var e=this.parent.offsetWidth-t,a=this.container.querySelector(".svg-pointer");if(this.left<0)a.style.left="calc(50% - "+-1*this.left+"px)",this.left=0;else if(this.left>e){var i="calc(50% + "+(this.left-e)+"px)";a.style.left=i,this.left=e}else a.style.left="50%"}},{key:"set_values",value:function(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0;this.title_name=a,this.title_value=i,this.list_values=n,this.x=t,this.y=e,this.title_value_first=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}(),UNIT_ANIM_DUR=350,PATH_ANIM_DUR=350,MARKER_LINE_ANIM_DUR=UNIT_ANIM_DUR,REPLACE_ALL_NEW_DUR=250,STD_EASING="easein",VERT_SPACE_OUTSIDE_BASE_CHART=40,TRANSLATE_Y_BASE_CHART=20,LEFT_MARGIN_BASE_CHART=60,RIGHT_MARGIN_BASE_CHART=40,Y_AXIS_MARGIN=60,INIT_CHART_UPDATE_TIMEOUT=400,CHART_POST_ANIMATE_TIMEOUT=400,DEFAULT_AXIS_CHART_TYPE="line",AXIS_DATASET_CHART_TYPES=["line","bar"],BAR_CHART_SPACE_RATIO=.5,MIN_BAR_PERCENT_HEIGHT=.01,LINE_CHART_DOT_SIZE=4,DOT_OVERLAY_SIZE_INCR=4,AXIS_TICK_LENGTH=6,LABEL_MARGIN=4,FONT_SIZE=10,BASE_LINE_COLOR="#dadada",makeOverlay={bar:function(t){var e=void 0;"rect"!==t.nodeName&&(e=t.getAttribute("transform"),t=t.childNodes[0]);var a=t.cloneNode();return a.style.fill="#000000",a.style.opacity="0.4",e&&a.setAttribute("transform",e),a},dot:function(t){var e=void 0;"circle"!==t.nodeName&&(e=t.getAttribute("transform"),t=t.childNodes[0]);var a=t.cloneNode(),i=t.getAttribute("r");return a.setAttribute("r",i+DOT_OVERLAY_SIZE_INCR),a.style.fill="#000000",a.style.opacity="0.4",e&&a.setAttribute("transform",e),a}},updateOverlay={bar:function(t,e){var a=void 0;"rect"!==t.nodeName&&(a=t.getAttribute("transform"),t=t.childNodes[0]);var i=["x","y","width","height"];Object.values(t.attributes).filter(function(t){return i.includes(t.name)&&t.specified}).map(function(t){e.setAttribute(t.name,t.nodeValue)}),a&&e.setAttribute("transform",a)},dot:function(t,e){var a=void 0;"circle"!==t.nodeName&&(a=t.getAttribute("transform"),t=t.childNodes[0]);var i=["cx","cy"];Object.values(t.attributes).filter(function(t){return i.includes(t.name)&&t.specified}).map(function(t){e.setAttribute(t.name,t.nodeValue)}),a&&e.setAttribute("transform",a)}},PRESET_COLOR_MAP={"light-blue":"#7cd6fd",blue:"#5e64ff",violet:"#743ee2",red:"#ff5858",orange:"#ffa00a",yellow:"#feef72",green:"#28a745","light-green":"#98d85b",purple:"#b554ff",magenta:"#ffa3ef",black:"#36114C",grey:"#bdd3e6","light-grey":"#f0f4f7","dark-grey":"#b8c2cc"},DEFAULT_COLORS=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],getColor=function(t){return PRESET_COLOR_MAP[t]||t},ALL_CHART_TYPES=["line","scatter","bar","percentage","heatmap","pie"],COMPATIBLE_CHARTS={bar:["line","scatter","percentage","pie"],line:["scatter","bar","percentage","pie"],pie:["line","scatter","percentage","bar"],scatter:["line","bar","percentage","pie"],percentage:["bar","line","scatter","pie"],heatmap:[]},COLOR_COMPATIBLE_CHARTS={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},EASING={ease:"0.25 0.1 0.25 1",linear:"0 0 1 1",easein:"0.1 0.8 0.2 1",easeout:"0 0 0.58 1",easeinout:"0.42 0 0.58 1"},BaseChart=function(){function t(e){var a=e.height,i=void 0===a?240:a,n=e.title,r=void 0===n?"":n,s=e.subtitle,o=void 0===s?"":s,l=(e.colors,e.isNavigable),c=void 0===l?0:l,h=(e.showLegend,e.type),u=void 0===h?"":h,d=e.parent,p=e.data;classCallCheck(this,t),this.rawChartArgs=arguments[0],this.parent="string"==typeof d?document.querySelector(d):d,this.title=r,this.subtitle=o,this.argHeight=i,this.type=u,this.realData=this.prepareData(p),this.data=this.prepareFirstData(this.realData),this.colors=[],this.config={showTooltip:1,showLegend:1,isNavigable:c,animate:1},this.state={},this.options={},this.config.isNavigable&&(this.state.currentIndex=0,this.overlays=[]),this.configure(arguments[0])}return createClass(t,[{key:"configure",value:function(t){var e=this;this.setColors(),this.setMargins(),window.addEventListener("resize",function(){return e.draw()}),window.addEventListener("orientationchange",function(){return e.draw()})}},{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=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calcWidth(),this.calc(),this.makeChartArea(),this.setupComponents(),this.components.forEach(function(e){return e.setup(t.drawArea)}),this.components.forEach(function(t){return t.make()}),e&&(this.data=this.realData,setTimeout(function(){t.update()},INIT_CHART_UPDATE_TIMEOUT)),this.renderLegend(),this.setupNavigation(e)}},{key:"calcWidth",value:function(){this.baseWidth=getElementContentWidth(this.parent)-0,this.width=this.baseWidth-(this.leftMargin+this.rightMargin)}},{key:"update",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data;this.data=this.prepareData(t),this.calc(),this.render()}},{key:"prepareData",value:function(){return arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data}},{key:"prepareFirstData",value:function(){return arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data}},{key:"calc",value:function(){}},{key:"render",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.components,a=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.config.isNavigable&&this.overlays.map(function(t){return t.parentNode.removeChild(t)});var i=[];e.forEach(function(t){i=i.concat(t.update(a))}),i.length>0?(runSMILAnimation(this.chartWrapper,this.svg,i),setTimeout(function(){e.forEach(function(t){return t.make()}),t.updateNav()},CHART_POST_ANIMATE_TIMEOUT)):this.updateNav()}},{key:"updateNav",value:function(){this.config.isNavigable&&(this.overlayGuides?this.updateOverlays():(this.makeOverlays(),this.bindUnits()))}},{key:"makeChartArea",value:function(){this.svg&&this.chartWrapper.removeChild(this.svg),this.svg=makeSVGContainer(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svgDefs=makeSVGDefs(this.svg),this.drawArea=makeSVGGroup(this.svg,this.type+"-chart","translate("+this.leftMargin+", "+this.translateY+")")}},{key:"renderLegend",value:function(){}},{key:"setupNavigation",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.config.isNavigable&&e&&(this.bindOverlay(),this.keyActions={13:this.onEnterKey.bind(this),37:this.onLeftArrow.bind(this),38:this.onUpArrow.bind(this),39:this.onRightArrow.bind(this),40:this.onDownArrow.bind(this)},document.addEventListener("keydown",function(e){isElementInViewport(t.chartWrapper)&&(e=e||window.event,t.keyActions[e.keyCode]())}))}},{key:"makeOverlays",value:function(){}},{key:"bindOverlay",value:function(){}},{key:"bindUnits",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:"setCurrentDataPoint",value:function(t){}},{key:"updateDataset",value:function(t,e){}},{key:"addDataset",value:function(t,e){}},{key:"removeDataset",value:function(){}},{key:"updateDatasets",value:function(t){}},{key:"updateDataPoint",value:function(t){}},{key:"addDataPoint",value:function(t){}},{key:"removeDataPoint",value:function(){}},{key:"getDifferentChart",value:function(t){return getDifferentChart(t,this.type,this.rawChartArgs)}}]),t}(),PercentageChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.type="percentage",a.max_slices=10,a.max_legend_points=6,a.setup(),a}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.svg=$.create("div",{className:"div",inside:this.chartWrapper}),this.chart=$.create("div",{className:"progress-chart",inside:this.svg}),this.percentageBar=$.create("div",{className:"progress",inside:this.chart})}},{key:"render",value:function(){var t=this;this.grand_total=this.sliceTotals.reduce(function(t,e){return t+e},0),this.slices=[],this.sliceTotals.map(function(e,a){var i=$.create("div",{className:"progress-bar",inside:t.percentageBar,styles:{background:t.colors[a],width:100*e/t.grand_total+"%"}});t.slices.push(i)})}},{key:"calc",value:function(){var t=this;this.sliceTotals=[];var e=this.data.labels.map(function(e,a){var i=0;return t.data.datasets.map(function(t){i+=t.values[a]}),[i,e]}).filter(function(t){return t[0]>0}),a=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),a=e.slice(0,this.max_slices-1);var i=0;e.slice(this.max_slices-1).map(function(t){i+=t[0]}),a.push([i,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],a.map(function(e){t.sliceTotals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.sliceTotals.slice(0,this.max_legend_points)}},{key:"bindTooltip",value:function(){}},{key:"renderLegend",value:function(){}}]),e}(BaseChart),ANGLE_RATIO=Math.PI/180,FULL_ANGLE=360,PieChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.type="pie",a.elements_to_animate=null,a.hoverRadio=t.hoverRadio||.1,a.max_slices=10,a.max_legend_points=6,a.isAnimate=!1,a.startAngle=t.startAngle||0,a.clockWise=t.clockWise||!1,a.mouseMove=a.mouseMove.bind(a),a.mouseLeave=a.mouseLeave.bind(a),a.setup(),a}return inherits(e,t),createClass(e,[{key:"calc",value:function(){var t=this;this.centerX=this.width/2,this.centerY=this.height/2,this.radius=this.height>this.width?this.centerX:this.centerY,this.slice_totals=[];var e=this.data.labels.map(function(e,a){var i=0;return t.data.datasets.map(function(t){i+=t.values[a]}),[i,e]}).filter(function(t){return t[0]>0}),a=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),a=e.slice(0,this.max_slices-1);var i=0;e.slice(this.max_slices-1).map(function(t){i+=t[0]}),a.push([i,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],a.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"makeArcPath",value:function(t,e){var a=this.centerX,i=this.centerY,n=this.radius,r=this.clockWise;return"M"+a+" "+i+" L"+(a+t.x)+" "+(i+t.y)+" A "+n+" "+n+" 0 0 "+(r?1:0)+" "+(a+e.x)+" "+(i+e.y)+" z"}},{key:"render",value:function(t){var a=this,i=this.radius,n=this.clockWise;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0);var r=this.slicesProperties||[];this.slices=[],this.elements_to_animate=[],this.slicesProperties=[];var s=180-this.startAngle;this.slice_totals.map(function(o,l){var c=s,h=o/a.grand_total*FULL_ANGLE,u=n?-h:h,d=s+=u,p=e.getPositionByAngle(c,i),f=e.getPositionByAngle(d,i),v=t&&r[l],m=void 0,g=void 0;t?(m=v?v.startPosition:p,g=v?v.endPosition:p):(m=p,g=f);var y=a.makeArcPath(m,g),_=makePath(y,"pie-path","none",a.colors[l]);_.style.transition="transform .3s;",a.drawArea.appendChild(_),a.slices.push(_),a.slicesProperties.push({startPosition:p,endPosition:f,value:o,total:a.grand_total,startAngle:c,endAngle:d,angle:u}),t&&a.elements_to_animate.push([{unit:_,array:a.slices,index:a.slices.length-1},{d:a.makeArcPath(p,f)},650,"easein",null,{d:y}])}),t&&runSMILAnimation(this.chartWrapper,this.svg,this.elements_to_animate)}},{key:"calTranslateByAngle",value:function(t){var a=this.radius,i=this.hoverRadio,n=e.getPositionByAngle(t.startAngle+t.angle/2,a);return"translate3d("+n.x*i+"px,"+n.y*i+"px,0)"}},{key:"hoverSlice",value:function(t,e,a,i){if(t){var n=this.colors[e];if(a){transform(t,this.calTranslateByAngle(this.slicesProperties[e])),t.style.fill=lightenDarkenColor(n,50);var r=getOffset(this.svg),s=i.pageX-r.left+10,o=i.pageY-r.top-10,l=(this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels[e]:this.labels[e])+": ",c=(100*this.slice_totals[e]/this.grand_total).toFixed(1);this.tip.set_values(s,o,l,c+"%"),this.tip.show_tip()}else transform(t,"translate3d(0,0,0)"),this.tip.hide_tip(),t.style.fill=n}}},{key:"mouseMove",value:function(t){for(var e=t.target,a=this.curActiveSliceIndex,i=this.curActiveSlice,n=0;n0?this.formatted_labels:this.labels;this.legend_totals.map(function(a,i){var n=t.colors[i];a&&($.create("div",{className:"stats",inside:t.statsWrapper}).innerHTML='\n\t\t\t\t\t\n\t\t\t\t\t'+e[i]+":\n\t\t\t\t\t"+a+"\n\t\t\t\t")})}}],[{key:"getPositionByAngle",value:function(t,e){return{x:Math.sin(t*ANGLE_RATIO)*e,y:Math.cos(t*ANGLE_RATIO)*e}}}]),e}(BaseChart),Heatmap=function(t){function e(t){var a=t.start,i=void 0===a?"":a,n=t.domain,r=void 0===n?"":n,s=t.subdomain,o=void 0===s?"":s,l=t.data,c=void 0===l?{}:l,h=t.discrete_domains,u=void 0===h?0:h,d=t.count_label,p=void 0===d?"":d,f=t.legend_colors,v=void 0===f?[]:f;classCallCheck(this,e);var m=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,arguments[0]));m.type="heatmap",m.domain=r,m.subdomain=o,m.data=c,m.discrete_domains=u,m.count_label=p;var g=new Date;return m.start=i||addDays(g,365),v=v.slice(0,5),m.legend_colors=m.validate_colors(v)?v:["#ebedf0","#c6e48b","#7bc96f","#239a3b","#196127"],m.distribution_size=5,m.translateX=0,m.setup(),m}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:"configure",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this),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:"makeChartArea",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"makeChartArea",this).call(this),this.domainLabelGroup=makeSVGGroup(this.drawArea,"domain-label-group chart-label"),this.dataGroups=makeSVGGroup(this.drawArea,"data-groups","translate(0, 20)")}},{key:"calc",value:function(){var t=this,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"]}},{key:"render",value:function(){this.renderAllWeeksAndStoreXValues(this.no_of_cols)}},{key:"renderAllWeeksAndStoreXValues",value:function(t){this.domainLabelGroup.textContent="",this.dataGroups.textContent="";var e=new Date(this.first_week_start);this.week_col=0,this.current_month=e.getMonth(),this.months=[this.current_month+""],this.month_weeks={},this.month_start_points=[],this.month_weeks[this.current_month]=0,this.month_start_points.push(13);for(var a=0;aa)break;v.getMonth()-t.getMonth()&&(i=1,this.discrete_domains&&(n=1),this.month_start_points.push(13+12*(e+n))),t=v}return[r,i]}},{key:"render_month_labels",value:function(){var t=this;this.months.shift(),this.month_start_points.shift(),this.months.pop(),this.month_start_points.pop(),this.month_start_points.map(function(e,a){var i=makeText("y-value-text",e+12,10,t.month_names[t.months[a]].substring(0,3));t.domainLabelGroup.appendChild(i)})}},{key:"bindTooltip",value:function(){var t=this;Array.prototype.slice.call(document.querySelectorAll(".data-group .day")).map(function(e){e.addEventListener("mouseenter",function(e){var a=e.target.getAttribute("data-value"),i=e.target.getAttribute("data-date").split("-"),n=t.month_names[parseInt(i[1])-1].substring(0,3),r=t.chartWrapper.getBoundingClientRect(),s=e.target.getBoundingClientRect(),o=parseInt(e.target.getAttribute("width")),l=s.left-r.left+(o+2)/2,c=s.top-r.top-(o+2)/2,h=a+" "+t.count_label,u=" on "+n+" "+i[0]+", "+i[2];t.tip.set_values(l,c,u,h,[],1),t.tip.show_tip()})})}},{key:"update",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"update",this).call(this,t),this.bindTooltip()}}]),e}(BaseChart),ChartComponent=function(){function t(e){var a=e.layerClass,i=void 0===a?"":a,n=e.layerTransform,r=void 0===n?"":n,s=e.constants,o=e.getData,l=e.makeElements,c=e.animateElements;classCallCheck(this,t),this.layerTransform=r,this.constants=s,this.makeElements=l,this.getData=o,this.animateElements=c,this.store=[],this.layerClass=i,this.layerClass="function"==typeof this.layerClass?this.layerClass():this.layerClass,this.refresh()}return createClass(t,[{key:"refresh",value:function(t){this.data=t||this.getData()}},{key:"setup",value:function(t){this.layer=makeSVGGroup(t,this.layerClass,this.layerTransform)}},{key:"make",value:function(){this.render(this.data),this.oldData=this.data}},{key:"render",value:function(t){var e=this;this.store=this.makeElements(t),this.layer.textContent="",this.store.forEach(function(t){e.layer.appendChild(t)})}},{key:"update",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.refresh();var e=[];return t&&(e=this.animateElements(this.data)),e}}]),t}(),componentConfigs={yAxis:{layerClass:"y axis",makeElements:function(t){var e=this;return t.positions.map(function(a,i){return yLine(a,t.labels[i],e.constants.width,{mode:e.constants.mode,pos:e.constants.pos})})},animateElements:function(t){var e=t.positions,a=t.labels,i=this.oldData.positions,n=this.oldData.labels,r=equilizeNoOfElements(i,e),s=slicedToArray(r,2);i=s[0],e=s[1];var o=equilizeNoOfElements(n,a),l=slicedToArray(o,2);return n=l[0],a=l[1],this.render({positions:i,labels:a}),this.store.map(function(t,a){return translateHoriLine(t,e[a],i[a])})}},xAxis:{layerClass:"x axis",makeElements:function(t){var e=this;return t.positions.map(function(a,i){return xLine(a,t.labels[i],e.constants.height,{mode:e.constants.mode,pos:e.constants.pos})})},animateElements:function(t){var e=t.positions,a=t.labels,i=this.oldData.positions,n=this.oldData.labels,r=equilizeNoOfElements(i,e),s=slicedToArray(r,2);i=s[0],e=s[1];var o=equilizeNoOfElements(n,a),l=slicedToArray(o,2);return n=l[0],a=l[1],this.render({positions:i,labels:a}),this.store.map(function(t,a){return translateVertLine(t,e[a],i[a])})}},yMarkers:{layerClass:"y-markers",makeElements:function(t){var e=this;return t.map(function(t){return yMarker(t.position,t.label,e.constants.width,{pos:"right",mode:"span",lineType:"dashed"})})},animateElements:function(t){var e=equilizeNoOfElements(this.oldData,t),a=slicedToArray(e,2);this.oldData=a[0];var i=(t=a[1]).map(function(t){return t.position}),n=t.map(function(t){return t.label}),r=this.oldData.map(function(t){return t.position});this.oldData.map(function(t){return t.label});return this.render(r.map(function(t,e){return{position:r[e],label:n[e]}})),this.store.map(function(t,e){return translateHoriLine(t,i[e],r[e])})}},yRegions:{layerClass:"y-regions",makeElements:function(t){var e=this;return t.map(function(t){return yRegion(t.start,t.end,e.constants.width,t.label)})},animateElements:function(t){var e=equilizeNoOfElements(this.oldData,t),a=slicedToArray(e,2);this.oldData=a[0];var i=(t=a[1]).map(function(t){return t.end}),n=t.map(function(t){return t.label}),r=t.map(function(t){return t.start}),s=this.oldData.map(function(t){return t.end}),o=(this.oldData.map(function(t){return t.label}),this.oldData.map(function(t){return t.start}));this.render(s.map(function(t,e){return{start:o[e],end:s[e],label:n[e]}}));var l=[];return this.store.map(function(t,e){l=l.concat(animateRegion(t,r[e],i[e],s[e]))}),l}},barGraph:{layerClass:function(){return"dataset-units dataset-bars dataset-"+this.constants.index},makeElements:function(t){var e=this.constants;return this.unitType="bar",t.yPositions.map(function(a,i){return datasetBar(t.xPositions[i],a,t.barWidth,e.color,e.valuesOverPoints?e.stacked?t.cumulativeYs[i]:t.values[i]:"",i,a-(e.stacked?t.cumulativeYPos[i]:a),{zeroLine:t.zeroLine,barsWidth:t.barsWidth,minHeight:e.minHeight})})},animateElements:function(t){var e=this.constants,a=t.xPositions,i=t.yPositions,n=t.cumulativeYPos,r=t.values,s=t.cumulativeYs,o=this.oldData.xPositions,l=this.oldData.yPositions,c=this.oldData.cumulativeYPos,h=this.oldData.values,u=this.oldData.cumulativeYs,d=equilizeNoOfElements(o,a),p=slicedToArray(d,2);o=p[0],a=p[1];var f=equilizeNoOfElements(l,i),v=slicedToArray(f,2);l=v[0],i=v[1];var m=equilizeNoOfElements(c,n),g=slicedToArray(m,2);c=g[0],n=g[1];var y=equilizeNoOfElements(h,r),_=slicedToArray(y,2);h=_[0],r=_[1];var b=equilizeNoOfElements(u,s),A=slicedToArray(b,2);u=A[0],s=A[1],this.render({xPositions:o,yPositions:l,cumulativeYPos:c,values:r,cumulativeYs:s,zeroLine:this.oldData.zeroLine,barsWidth:this.oldData.barsWidth,barWidth:this.oldData.barWidth});var k=[];return this.store.map(function(n,r){k=k.concat(animateBar(n,a[r],i[r],t.barWidth,e.index,{zeroLine:t.zeroLine}))}),k}},lineGraph:{layerClass:function(){return"dataset-units dataset-line dataset-"+this.constants.index},makeElements:function(t){var e=this.constants;return this.unitType="dot",this.paths=getPaths(t.xPositions,t.yPositions,e.color,{heatline:e.heatline,regionFill:e.regionFill},{svgDefs:e.svgDefs,zeroLine:t.zeroLine}),this.dots=[],e.hideDots||(this.dots=t.yPositions.map(function(a,i){return datasetDot(t.xPositions[i],a,t.radius,e.color,e.valuesOverPoints?t.values[i]:"",i)})),Object.values(this.paths).concat(this.dots)},animateElements:function(t){var e=t.xPositions,a=t.yPositions,i=t.values,n=this.oldData.xPositions,r=this.oldData.yPositions,s=this.oldData.values,o=equilizeNoOfElements(n,e),l=slicedToArray(o,2);n=l[0],e=l[1];var c=equilizeNoOfElements(r,a),h=slicedToArray(c,2);r=h[0],a=h[1];var u=equilizeNoOfElements(s,i),d=slicedToArray(u,2);s=d[0],i=d[1],this.render({xPositions:n,yPositions:r,values:i,zeroLine:this.oldData.zeroLine,radius:this.oldData.radius});var p=[];return p=p.concat(animatePath(this.paths,e,a,t.zeroLine)),this.dots.length&&this.dots.map(function(t,i){p=p.concat(animateDot(t,e[i],a[i]))}),p}}},AxisChart=function(t){function e(t){classCallCheck(this,e);var a=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return a.isSeries=t.isSeries,a.valuesOverPoints=t.valuesOverPoints,a.formatTooltipY=t.formatTooltipY,a.formatTooltipX=t.formatTooltipX,a.barOptions=t.barOptions||{},a.lineOptions=t.lineOptions||{},a.type=t.type||"line",a.xAxisMode=t.xAxisMode||"span",a.yAxisMode=t.yAxisMode||"span",a.setup(),a}return inherits(e,t),createClass(e,[{key:"configure",value:function(t){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this),this.config.xAxisMode=t.xAxisMode,this.config.yAxisMode=t.yAxisMode}},{key:"setMargins",value:function(){get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setMargins",this).call(this),this.leftMargin=Y_AXIS_MARGIN,this.rightMargin=Y_AXIS_MARGIN}},{key:"prepareData",value:function(){return dataPrep(arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data,this.type)}},{key:"prepareFirstData",value:function(){return zeroDataPrep(arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data)}},{key:"calc",value:function(){this.calcXPositions(),this.calcYAxisParameters(this.getAllYValues(),"line"===this.type)}},{key:"calcXPositions",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state,e=this.data.labels;t.datasetLength=e.length,t.unitWidth=this.width/t.datasetLength,t.xOffset=t.unitWidth/2,t.xAxis={labels:e,positions:e.map(function(e,a){return floatTwo(t.xOffset+a*t.unitWidth)})}}},{key:"calcYAxisParameters",value:function(t){var e=calcChartIntervals(t,arguments.length>1&&void 0!==arguments[1]?arguments[1]:"false"),a=this.height/getValueRange(e),i=getIntervalSize(e)*a,n=this.height-getZeroIndex(e)*i;this.state.yAxis={labels:e,positions:e.map(function(t){return n-t*a}),scaleMultiplier:a,zeroLine:n},this.calcDatasetPoints(),this.calcYExtremes(),this.calcYRegions()}},{key:"calcDatasetPoints",value:function(){var t=this.state,e=function(e){return e.map(function(e){return scale(e,t.yAxis)})};t.datasets=this.data.datasets.map(function(t,a){var i=t.values,n=t.cumulativeYs||[];return{name:t.name,index:a,chartType:t.chartType,values:i,yPositions:e(i),cumulativeYs:n,cumulativeYPos:e(n)}})}},{key:"calcYExtremes",value:function(){var t=this.state;if(this.barOptions.stacked)return void(t.yExtremes=t.datasets[t.datasets.length-1].cumulativeYPos);t.yExtremes=new Array(t.datasetLength).fill(9999),t.datasets.map(function(e,a){e.yPositions.map(function(e,a){e=0;r--){var s=a.xAxis.positions[r];if(t>s-a.unitWidth/2){var o=s+this.leftMargin,l=a.yExtremes[r]+this.translateY,c=this.data.datasets.map(function(t,a){return{title:t.title,value:n?e.formatTooltipY(t.values[r]):t.values[r],color:e.colors[a]}});this.tip.set_values(o,l,i[r],"",c),this.tip.show_tip();break}}}}},{key:"makeOverlays",value:function(){var t=this;this.overlayGuides=this.dataUnitComponents.map(function(t){return{type:t.unitType,overlay:void 0,units:t.store}}),this.state.currentIndex=0,this.overlayGuides.map(function(e){var a=e.units[t.state.currentIndex];e.overlay=makeOverlay[e.type](a),t.drawArea.appendChild(e.overlay)})}},{key:"bindOverlay",value:function(){var t=this;this.parent.addEventListener("data-select",function(e){t.updateOverlay(e.svg_unit)})}},{key:"bindUnits",value:function(t){}},{key:"updateOverlay",value:function(){var t=this;this.overlayGuides.map(function(e){var a=e.units[t.state.currentIndex];updateOverlay[e.type](a,e.overlay)})}},{key:"onLeftArrow",value:function(){this.setCurrentDataPoint(this.state.currentIndex-1)}},{key:"onRightArrow",value:function(){this.setCurrentDataPoint(this.state.currentIndex+1)}},{key:"getDataPoint",value:function(){return{index:arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.currentIndex}}},{key:"setCurrentDataPoint",value:function(t){var e=this.state;(t=parseInt(t))<0&&(t=0),t>=e.xAxis.labels.length&&(t=e.xAxis.labels.length-1),t!==e.currentIndex&&(e.currentIndex=t,fire(this.parent,"data-select",this.getDataPoint()))}},{key:"addDataPoint",value:function(t,a){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.state.datasetLength;get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"addDataPoint",this).call(this,t,a,i),this.data.labels.splice(i,0,t),this.data.datasets.map(function(t,e){t.values.splice(i,0,a[e])}),this.update(this.data)}},{key:"removeDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.datasetLength-1;get(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"removeDataPoint",this).call(this,t),this.data.labels.splice(t,1),this.data.datasets.map(function(e){e.values.splice(t,1)}),this.update(this.data)}},{key:"updateDataset",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;this.data.datasets[e].values=t,this.update(this.data)}}]),e}(BaseChart),chartTypes={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 5337cea..96e3c04 100644 --- a/dist/frappe-charts.min.iife.js +++ b/dist/frappe-charts.min.iife.js @@ -1,2 +1,2 @@ -var Chart=function(){"use strict";function t(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function e(t){var e=t.getBoundingClientRect();return{top:e.top+(document.documentElement.scrollTop||document.body.scrollTop),left:e.left+(document.documentElement.scrollLeft||document.body.scrollLeft)}}function n(t){var e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}function a(t){var e=window.getComputedStyle(t),i=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return t.clientWidth-i}function s(t,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 r(t){return parseFloat(t.toFixed(2))}function o(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 l(t,e){return(t+"").length*e}function h(t,e){var i=void 0,n=void 0;return t<=e?(i=e-t,n=t):(i=t-e,n=e),[i,n]}function c(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.length-t.length;return i>0?t=o(t,i):e=o(e,i),[t,e]}function u(t,e,i,n){var a="string"==typeof e?e:e.join(", ");return[t,{transform:i.join(", ")},n,At,"translate",{transform:a}]}function d(t,e,i){return u(t,[i,0],[e,0],_t)}function p(t,e,i){return u(t,[0,i],[0,e],_t)}function f(t,e,i,n){var a=e-i,s=t.childNodes[0];return[[s,{height:a,"stroke-dasharray":s.getAttribute("width")+", "+a},_t,At],u(t,[0,n],[0,i],_t)]}function v(t,e,i,n){var a=h(i,(arguments.length>5&&void 0!==arguments[5]?arguments[5]:{}).zeroLine),s=mt(a,2),r=s[0],o=s[1];return"rect"!==t.nodeName?[[t.childNodes[0],{width:n,height:r},xt,At],u(t,t.getAttribute("transform").split("(")[1].slice(0,-1),[e,o],_t)]:[[t,{width:n,height:r,x:e,y:o},xt,At]]}function y(t,e,i){return"circle"!==t.nodeName?[u(t,t.getAttribute("transform").split("(")[1].slice(0,-1),[e,i],_t)]:[[t,{cx:e,cy:i},xt,At]]}function m(t,e,i,n){var a=[],s=i.map(function(t,i){return e[i]+","+t}).join("L"),r=[t.path,{d:"M"+s},kt,At];if(a.push(r),t.region){var o=e[0]+","+n+"L",l="L"+e.slice(-1)[0]+", "+n,h=[t.region,{d:"M"+o+s+l},kt,At];a.push(h)}return a}function g(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function b(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)g(a).appendChild(i);else if("around"===n){var s=g(a);s.parentNode.insertBefore(i,s),i.appendChild(s)}else"styles"===n?"object"===(void 0===a?"undefined":ut(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 x(t,e){return b("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function k(t,e,i,n){return b("stop",{inside:t,style:"stop-color: "+i,offset:e,"stop-opacity":n})}function _(t,e,i,n){return b("svg",{className:e,inside:t,width:i,height:n})}function w(t){return b("defs",{inside:t})}function A(t,e){return b("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function P(t){return b("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 D(t,e){var i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],n="path-fill-gradient-"+e+"-"+(i?"lighter":"default"),a=x(t,n),s=[1,.6,.2];return i&&(s=[.4,.2,0]),k(a,"0%",e,s[0]),k(a,"50%",e,s[1]),k(a,"100%",e,s[2]),n}function C(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]}),b("rect",r)}function T(t,e,i,n){return b("text",{className:t,x:e,y:i,dy:Tt/2+"px","font-size":Tt+"px",innerHTML:n})}function M(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};a.stroke||(a.stroke=Mt);var s=b("line",{className:"line-vertical "+a.className,x1:0,x2:0,y1:i,y2:n,styles:{stroke:a.stroke}}),r=b("text",{x:0,y:i>n?i+Ct:i-Ct-Tt,dy:Tt+"px","font-size":Tt+"px","text-anchor":"middle",innerHTML:e}),o=b("g",{transform:"translate("+t+", 0)"});return o.appendChild(s),o.appendChild(r),o}function L(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};a.stroke||(a.stroke=Mt),a.lineType||(a.lineType="");var s=b("line",{className:"line-horizontal "+a.className+("dashed"===a.lineType?"dashed":""),x1:i,x2:n,y1:0,y2:0,styles:{stroke:a.stroke}}),r=b("text",{x:i3&&void 0!==arguments[3]?arguments[3]:{};n.pos||(n.pos="left"),n.offset||(n.offset=0),n.mode||(n.mode="span"),n.stroke||(n.stroke=Mt),n.className||(n.className="");var a=-1*Dt,s="span"===n.mode?i+Dt:0;return"tick"===n.mode&&"right"===n.pos&&(a=i+Dt,s=i),a+=n.offset,s+=n.offset,L(t,e,a,s,{stroke:n.stroke,className:n.className,lineType:n.lineType})}function N(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};n.pos||(n.pos="bottom"),n.offset||(n.offset=0),n.mode||(n.mode="span"),n.stroke||(n.stroke=Mt),n.className||(n.className="");var a=i+Dt,s="span"===n.mode?-1*Dt:i;return"tick"===n.mode&&"top"===n.pos&&(a=-1*Dt,s=0),M(t,e,a,s,{stroke:n.stroke,className:n.className,lineType:n.lineType})}function E(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},a=b("text",{className:"chart-label",x:i-l(e,5)-Ct,y:0,dy:Tt/-2+"px","font-size":Tt+"px","text-anchor":"start",innerHTML:e+""}),s=L(t,"",0,i,{stroke:n.stroke||Mt,className:n.className||"",lineType:n.lineType});return s.appendChild(a),s}function W(t,e,i,n){var a=t-e,s=b("rect",{className:"bar mini",styles:{fill:"rgba(228, 234, 239, 0.49)",stroke:Mt,"stroke-dasharray":i+", "+a},x:0,y:0,width:i,height:a}),r=b("text",{className:"chart-label",x:i-l(n,4.5)-Ct,y:0,dy:Tt/-2+"px","font-size":Tt+"px","text-anchor":"start",innerHTML:n+""}),o=b("g",{transform:"translate(0, "+e+")"});return o.appendChild(s),o.appendChild(r),o}function S(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"",s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,r=arguments.length>6&&void 0!==arguments[6]?arguments[6]:0,o=arguments.length>7&&void 0!==arguments[7]?arguments[7]:{},l=h(e,o.zeroLine),c=mt(l,2),u=c[0],d=c[1],p=b("rect",{className:"bar mini",style:"fill: "+n,"data-point-index":s,x:t,y:d-=r,width:i,height:u||o.minHeight});if(a||a.length){p.setAttribute("y",0),p.setAttribute("x",0);var f=b("text",{className:"data-point-value",x:i/2,y:0,dy:Tt/2*-1+"px","font-size":Tt+"px","text-anchor":"middle",innerHTML:a}),v=b("g",{transform:"translate("+t+", "+d+")"});return v.appendChild(p),v.appendChild(f),v}return p}function z(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"",s=b("circle",{style:"fill: "+n,"data-point-index":arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,cx:t,cy:e,r:i});if(a||a.length){s.setAttribute("cy",0),s.setAttribute("cx",0);var r=b("text",{className:"data-point-value",x:0,y:0,dy:Tt/2*-1-i+"px","font-size":Tt+"px","text-anchor":"middle",innerHTML:a}),o=b("g",{transform:"translate("+t+", "+e+")"});return o.appendChild(s),o.appendChild(r),o}return s}function Y(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{},s=e.map(function(e,i){return t[i]+","+e}).join("L"),r=P("M"+s,"line-graph-path",i);if(n.heatline){var o=D(a.svgDefs,i);r.style.stroke="url(#"+o+")"}var l={path:r};if(n.regionFill){var h=D(a.svgDefs,i,!0),c="M"+t[0]+","+a.zeroLine+"L"+s+"L"+t.slice(-1)[0]+","+a.zeroLine;l.region=P(c,"region-fill","none","url(#"+h+")")}return l}function j(t){return t>255?255:t<0?0:t}function R(t,e){var i=Wt(t),n=!1;"#"==i[0]&&(i=i.slice(1),n=!0);var a=parseInt(i,16),s=j((a>>16)+e),r=j((a>>8&255)+e),o=j((255&a)+e);return(n?"#":"")+(o|r<<8|s<<16).toString(16)}function H(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t)}function X(t,e,i){if(t!==e){St.includes(t)||console.error("'"+t+"' is not a valid chart type."),zt[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var n=Yt[e].includes(t);return new qt({parent:i.parent,title:i.title,data:i.data,type:t,height:i.height,colors:n?i.colors:void 0})}}function F(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],d={attributeName:l,from:c,to:u,begin:"0s",dur:i/1e3+"s",values:c+";"+u,keySplines:jt[n],keyTimes:"0;1",calcMode:"spline",fill:"freeze"};a&&(d.type=a);for(var p in d)h.setAttribute(p,d[p]);r.appendChild(h),a?o.setAttribute(l,"translate("+u+")"):o.setAttribute(l,u)}return[r,o]}function I(t,e){t.style.transform=e,t.style.webkitTransform=e,t.style.msTransform=e,t.style.mozTransform=e,t.style.oTransform=e}function G(t,e){var i=[],n=[];e.map(function(t){var e=t[0],a=e.parentNode,s=void 0,r=void 0;t[0]=e;var o=F.apply(void 0,gt(t)),l=mt(o,2);s=l[0],r=l[1],i.push(r),n.push([s,a]),a.replaceChild(s,e)});var a=t.cloneNode(!0);return n.map(function(t,n){t[1].replaceChild(i[n],t[0]),e[n][0]=i[n]}),a}function B(t,e,i){if(0!==i.length){var n=G(e,i);e.parentNode==t&&(t.removeChild(e),t.appendChild(n)),setTimeout(function(){n.parentNode==t&&(t.removeChild(n),t.appendChild(e))},wt)}}function U(t,e){t.labels=t.labels||[];var i=t.labels.length,n=t.datasets,a=new Array(i).fill(0);return n||(n=[{values:a}]),n.map(function(t,n){if(t.values){var s=t.values;s=(s=s.map(function(t){return isNaN(t)?0:t})).length>i?s.slice(0,i):o(s,i-s.length,0)}else t.values=a;t.chartType||(Pt.includes(e),t.chartType=e)}),t.yRegions&&t.yRegions.map(function(t){if(t.end0?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 Z(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 K(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=J(t),n=mt(i,2),a=n[0],s=n[1],r=e?e/Math.pow(10,s):0,o=Z(a=a.toFixed(6),r);return o=o.map(function(t){return t*Math.pow(10,s)})}function $(t){function e(t,e){for(var i=K(t),n=i[1]-i[0],a=0,s=1;a1&&void 0!==arguments[1]&&arguments[1],n=Math.max.apply(Math,gt(t)),a=Math.min.apply(Math,gt(t)),s=[];if(n>=0&&a>=0)J(n)[1],s=i?K(n,a):K(n);else if(n>0&&a<0){var r=Math.abs(a);n>=r?(J(n)[1],s=e(n,r)):(J(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);J(o)[1],s=(s=i?K(o,l):K(o)).reverse().map(function(t){return-1*t})}return s}function Q(t){var e=tt(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 tt(t){return t[1]-t[0]}function et(t){return t[t.length-1]-t[0]}function it(t,e){return r(e.zeroLine-t*e.scaleMultiplier)}function nt(t,e){for(var i=Math.max.apply(Math,gt(t)),n=1/(e-1),a=[],s=0;s9?"":"0")+e,(i>9?"":"0")+i,t.getFullYear()].join("-")}function ot(t,e){return Math.ceil(lt(t,e)/7)}function lt(t,e){return(st(e)-st(t))/864e5}function ht(t,e){t.setDate(t.getDate()+e)}function ct(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return"line"===t?(e.type="line",new Ft(e)):"bar"===t?(e.type="bar",new Ft(e)):"axis-mixed"===t?(e.type="line",new Ft(e)):Ut[t]?new Ut[t](e):void console.error("Undefined chart type: "+t)}!function(t,e){if("undefined"==typeof document)return e;t=t||"";var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css",i.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}('.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path,.chart-container .multiaxis-chart .line-horizontal,.chart-container .multiaxis-chart .y-axis-guide{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}',void 0);var ut="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},dt=(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")}),pt=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}(),xt=350,kt=350,_t=xt,wt=250,At="easein",Pt=["line","bar"],Dt=6,Ct=4,Tt=10,Mt="#dadada",Lt={bar:function(t){var e=void 0;"rect"!==t.nodeName&&(e=t.getAttribute("transform"),t=t.childNodes[0]);var i=t.cloneNode();return i.style.fill="#000000",i.style.opacity="0.4",e&&i.setAttribute("transform",e),i},dot:function(t){var e=void 0;"circle"!==t.nodeName&&(e=t.getAttribute("transform"),t=t.childNodes[0]);var i=t.cloneNode(),n=t.getAttribute("r");return i.setAttribute("r",n+4),i.style.fill="#000000",i.style.opacity="0.4",e&&i.setAttribute("transform",e),i}},Ot={bar:function(t,e){var i=void 0;"rect"!==t.nodeName&&(i=t.getAttribute("transform"),t=t.childNodes[0]);var n=["x","y","width","height"];Object.values(t.attributes).filter(function(t){return n.includes(t.name)&&t.specified}).map(function(t){e.setAttribute(t.name,t.nodeValue)}),i&&e.setAttribute("transform",i)},dot:function(t,e){var i=void 0;"circle"!==t.nodeName&&(i=t.getAttribute("transform"),t=t.childNodes[0]);var n=["cx","cy"];Object.values(t.attributes).filter(function(t){return n.includes(t.name)&&t.specified}).map(function(t){e.setAttribute(t.name,t.nodeValue)}),i&&e.setAttribute("transform",i)}},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"},Et=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],Wt=function(t){return Nt[t]||t},St=["line","scatter","bar","percentage","heatmap","pie"],zt={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:[]},Yt={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},jt={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"},Rt=function(){function e(t){var i=t.height,n=void 0===i?240:i,a=t.title,s=void 0===a?"":a,r=t.subtitle,o=void 0===r?"":r,l=(t.colors,t.isNavigable),h=void 0===l?0:l,c=(t.showLegend,t.type),u=void 0===c?"":c,d=t.parent,p=t.data;dt(this,e),this.rawChartArgs=arguments[0],this.parent="string"==typeof d?document.querySelector(d):d,this.title=s,this.subtitle=o,this.argHeight=n,this.type=u,this.realData=this.prepareData(p),this.data=this.prepareFirstData(this.realData),this.colors=[],this.config={showTooltip:1,showLegend:1,isNavigable:h,animate:1},this.state={},this.options={},this.config.isNavigable&&(this.state.currentIndex=0,this.overlays=[]),this.configure(arguments[0])}return pt(e,[{key:"configure",value:function(t){var e=this;this.setColors(),this.setMargins(),window.addEventListener("resize",function(){return e.draw()}),window.addEventListener("orientationchange",function(){return e.draw()})}},{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 bt({parent:this.chartWrapper,colors:this.colors}),this.bindTooltip()}},{key:"bindTooltip",value:function(){}},{key:"draw",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calcWidth(),this.calc(),this.makeChartArea(),this.setupComponents(),this.components.forEach(function(e){return e.setup(t.drawArea)}),this.components.forEach(function(t){return t.make()}),e&&(this.data=this.realData,setTimeout(function(){t.update()},400)),this.renderLegend(),this.setupNavigation(e)}},{key:"calcWidth",value:function(){this.baseWidth=a(this.parent)-0,this.width=this.baseWidth-(this.translateXLeft+this.translateXRight)}},{key:"update",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data;this.data=this.prepareData(t),this.calc(),this.render()}},{key:"prepareData",value:function(){return arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data}},{key:"prepareFirstData",value:function(){return arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data}},{key:"calc",value:function(){}},{key:"render",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.components,i=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.config.isNavigable&&this.overlays.map(function(t){return t.parentNode.removeChild(t)});var n=[];e.forEach(function(t){n=n.concat(t.update(i))}),n.length>0?(B(this.chartWrapper,this.svg,n),setTimeout(function(){e.forEach(function(t){return t.make()}),t.updateNav()},400)):this.updateNav()}},{key:"updateNav",value:function(){this.config.isNavigable&&(this.overlayGuides?this.updateOverlays():(this.makeOverlays(),this.bindUnits()))}},{key:"makeChartArea",value:function(){this.svg&&this.chartWrapper.removeChild(this.svg),this.svg=_(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svgDefs=w(this.svg),this.drawArea=A(this.svg,this.type+"-chart","translate("+this.translateXLeft+", "+this.translateY+")")}},{key:"renderLegend",value:function(){}},{key:"setupNavigation",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.config.isNavigable&&e&&(this.bindOverlay(),this.keyActions={13:this.onEnterKey.bind(this),37:this.onLeftArrow.bind(this),38:this.onUpArrow.bind(this),39:this.onRightArrow.bind(this),40:this.onDownArrow.bind(this)},document.addEventListener("keydown",function(e){n(t.chartWrapper)&&(e=e||window.event,t.keyActions[e.keyCode]())}))}},{key:"makeOverlays",value:function(){}},{key:"bindOverlay",value:function(){}},{key:"bindUnits",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:"setCurrentDataPoint",value:function(t){}},{key:"updateDataset",value:function(t,e){}},{key:"addDataset",value:function(t,e){}},{key:"removeDataset",value:function(){}},{key:"updateDatasets",value:function(t){}},{key:"updateDataPoint",value:function(t){}},{key:"addDataPoint",value:function(t){}},{key:"removeDataPoint",value:function(){}},{key:"getDifferentChart",value:function(t){return X(t,this.type,this.rawChartArgs)}}]),e}(),Ht=function(){function t(e){var i=e.layerClass,n=void 0===i?"":i,a=e.layerTransform,s=void 0===a?"":a,r=e.constants,o=e.getData,l=e.makeElements,h=e.animateElements;dt(this,t),this.layerTransform=s,this.constants=r,this.makeElements=l,this.getData=o,this.animateElements=h,this.store=[],this.layerClass=n,this.layerClass="function"==typeof this.layerClass?this.layerClass():this.layerClass,this.refresh()}return pt(t,[{key:"refresh",value:function(t){this.data=t||this.getData()}},{key:"setup",value:function(t){this.layer=A(t,this.layerClass,this.layerTransform)}},{key:"make",value:function(){this.render(this.data),this.oldData=this.data}},{key:"render",value:function(t){var e=this;this.store=this.makeElements(t),this.layer.textContent="",this.store.forEach(function(t){e.layer.appendChild(t)})}},{key:"update",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.refresh();var e=[];return t&&(e=this.animateElements(this.data)),e}}]),t}(),Xt={yAxis:{layerClass:"y axis",makeElements:function(t){var e=this;return t.positions.map(function(i,n){return O(i,t.labels[n],e.constants.width,{mode:e.constants.mode,pos:e.constants.pos})})},animateElements:function(t){var e=t.positions,i=t.labels,n=this.oldData.positions,a=this.oldData.labels,s=c(n,e),r=mt(s,2);n=r[0],e=r[1];var o=c(a,i),l=mt(o,2);return a=l[0],i=l[1],this.render({positions:n,labels:i}),this.store.map(function(t,i){return p(t,e[i],n[i])})}},xAxis:{layerClass:"x axis",makeElements:function(t){var e=this;return t.positions.map(function(i,n){return N(i,t.labels[n],e.constants.height,{mode:e.constants.mode,pos:e.constants.pos})})},animateElements:function(t){var e=t.positions,i=t.labels,n=this.oldData.positions,a=this.oldData.labels,s=c(n,e),r=mt(s,2);n=r[0],e=r[1];var o=c(a,i),l=mt(o,2);return a=l[0],i=l[1],this.render({positions:n,labels:i}),this.store.map(function(t,i){return d(t,e[i],n[i])})}},yMarkers:{layerClass:"y-markers",makeElements:function(t){var e=this;return t.map(function(t){return E(t.position,t.label,e.constants.width,{pos:"right",mode:"span",lineType:"dashed"})})},animateElements:function(t){var e=c(this.oldData,t),i=mt(e,2);this.oldData=i[0];var n=(t=i[1]).map(function(t){return t.position}),a=t.map(function(t){return t.label}),s=this.oldData.map(function(t){return t.position});this.oldData.map(function(t){return t.label});return this.render(s.map(function(t,e){return{position:s[e],label:a[e]}})),this.store.map(function(t,e){return p(t,n[e],s[e])})}},yRegions:{layerClass:"y-regions",makeElements:function(t){var e=this;return t.map(function(t){return W(t.start,t.end,e.constants.width,t.label)})},animateElements:function(t){var e=c(this.oldData,t),i=mt(e,2);this.oldData=i[0];var n=(t=i[1]).map(function(t){return t.end}),a=t.map(function(t){return t.label}),s=t.map(function(t){return t.start}),r=this.oldData.map(function(t){return t.end}),o=(this.oldData.map(function(t){return t.label}),this.oldData.map(function(t){return t.start}));this.render(r.map(function(t,e){return{start:o[e],end:r[e],label:a[e]}}));var l=[];return this.store.map(function(t,e){l=l.concat(f(t,s[e],n[e],r[e]))}),l}},barGraph:{layerClass:function(){return"dataset-units dataset-bars dataset-"+this.constants.index},makeElements:function(t){var e=this.constants;return this.unitType="bar",t.yPositions.map(function(i,n){return S(t.xPositions[n],i,t.barWidth,e.color,e.valuesOverPoints?e.stacked?t.cumulativeYs[n]:t.values[n]:"",n,i-(e.stacked?t.cumulativeYPos[n]:i),{zeroLine:t.zeroLine,barsWidth:t.barsWidth,minHeight:e.minHeight})})},animateElements:function(t){var e=this.constants,i=t.xPositions,n=t.yPositions,a=t.cumulativeYPos,s=t.values,r=t.cumulativeYs,o=this.oldData.xPositions,l=this.oldData.yPositions,h=this.oldData.cumulativeYPos,u=this.oldData.values,d=this.oldData.cumulativeYs,p=c(o,i),f=mt(p,2);o=f[0],i=f[1];var y=c(l,n),m=mt(y,2);l=m[0],n=m[1];var g=c(h,a),b=mt(g,2);h=b[0],a=b[1];var x=c(u,s),k=mt(x,2);u=k[0],s=k[1];var _=c(d,r),w=mt(_,2);d=w[0],r=w[1],this.render({xPositions:o,yPositions:l,cumulativeYPos:h,values:s,cumulativeYs:r,zeroLine:this.oldData.zeroLine,barsWidth:this.oldData.barsWidth,barWidth:this.oldData.barWidth});var A=[];return this.store.map(function(a,s){A=A.concat(v(a,i[s],n[s],t.barWidth,e.index,{zeroLine:t.zeroLine}))}),A}},lineGraph:{layerClass:function(){return"dataset-units dataset-line dataset-"+this.constants.index},makeElements:function(t){var e=this.constants;return this.unitType="dot",this.paths=Y(t.xPositions,t.yPositions,e.color,{heatline:e.heatline,regionFill:e.regionFill},{svgDefs:e.svgDefs,zeroLine:t.zeroLine}),this.dots=[],e.hideDots||(this.dots=t.yPositions.map(function(i,n){return z(t.xPositions[n],i,t.radius,e.color,e.valuesOverPoints?t.values[n]:"",n)})),Object.values(this.paths).concat(this.dots)},animateElements:function(t){var e=t.xPositions,i=t.yPositions,n=t.values,a=this.oldData.xPositions,s=this.oldData.yPositions,r=this.oldData.values,o=c(a,e),l=mt(o,2);a=l[0],e=l[1];var h=c(s,i),u=mt(h,2);s=u[0],i=u[1];var d=c(r,n),p=mt(d,2);r=p[0],n=p[1],this.render({xPositions:a,yPositions:s,values:n,zeroLine:this.oldData.zeroLine,radius:this.oldData.radius});var f=[];return f=f.concat(m(this.paths,e,i,t.zeroLine)),this.dots.length&&this.dots.map(function(t,n){f=f.concat(y(t,e[n],i[n]))}),f}}},Ft=function(t){function i(t){dt(this,i);var e=yt(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,t));return e.isSeries=t.isSeries,e.valuesOverPoints=t.valuesOverPoints,e.formatTooltipY=t.formatTooltipY,e.formatTooltipX=t.formatTooltipX,e.barOptions=t.barOptions||{},e.lineOptions=t.lineOptions||{},e.type=t.type||"line",e.xAxisMode=t.xAxisMode||"span",e.yAxisMode=t.yAxisMode||"span",e.setup(),e}return vt(i,t),pt(i,[{key:"configure",value:function(t){ft(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"configure",this).call(this),this.config.xAxisMode=t.xAxisMode,this.config.yAxisMode=t.yAxisMode}},{key:"setMargins",value:function(){ft(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"setMargins",this).call(this),this.translateXLeft=60,this.translateXRight=60}},{key:"prepareData",value:function(){return U(arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data,this.type)}},{key:"prepareFirstData",value:function(){return q(arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data)}},{key:"calc",value:function(){this.calcXPositions(),this.calcYAxisParameters(this.getAllYValues(),"line"===this.type)}},{key:"calcXPositions",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state,e=this.data.labels;t.datasetLength=e.length,t.unitWidth=this.width/t.datasetLength,t.xOffset=t.unitWidth/2,t.xAxis={labels:e,positions:e.map(function(e,i){return r(t.xOffset+i*t.unitWidth)})}}},{key:"calcYAxisParameters",value:function(t){var e=$(t,arguments.length>1&&void 0!==arguments[1]?arguments[1]:"false"),i=this.height/et(e),n=tt(e)*i,a=this.height-Q(e)*n;this.state.yAxis={labels:e,positions:e.map(function(t){return a-t*i}),scaleMultiplier:i,zeroLine:a},this.calcDatasetPoints(),this.calcYExtremes(),this.calcYRegions()}},{key:"calcDatasetPoints",value:function(){var t=this.state,e=function(e){return e.map(function(e){return it(e,t.yAxis)})};t.datasets=this.data.datasets.map(function(t,i){var n=t.values,a=t.cumulativeYs||[];return{name:t.name,index:i,chartType:t.chartType,values:n,yPositions:e(n),cumulativeYs:a,cumulativeYPos:e(a)}})}},{key:"calcYExtremes",value:function(){var t=this.state;if(this.barOptions.stacked)return void(t.yExtremes=t.datasets[t.datasets.length-1].cumulativeYPos);t.yExtremes=new Array(t.datasetLength).fill(9999),t.datasets.map(function(e,i){e.yPositions.map(function(e,i){e=0;s--){var r=i.xAxis.positions[s];if(t>r-i.unitWidth/2){var o=r+this.translateXLeft,l=i.yExtremes[s]+this.translateY,h=this.data.datasets.map(function(t,i){return{title:t.title,value:a?e.formatTooltipY(t.values[s]):t.values[s],color:e.colors[i]}});this.tip.set_values(o,l,n[s],"",h),this.tip.show_tip();break}}}}},{key:"makeOverlays",value:function(){var t=this;this.overlayGuides=this.dataUnitComponents.map(function(t){return{type:t.unitType,overlay:void 0,units:t.store}}),this.state.currentIndex=0,this.overlayGuides.map(function(e){var i=e.units[t.state.currentIndex];e.overlay=Lt[e.type](i),t.drawArea.appendChild(e.overlay)})}},{key:"bindOverlay",value:function(){var t=this;this.parent.addEventListener("data-select",function(e){t.updateOverlay(e.svg_unit)})}},{key:"bindUnits",value:function(t){}},{key:"updateOverlay",value:function(){var t=this;this.overlayGuides.map(function(e){var i=e.units[t.state.currentIndex];Ot[e.type](i,e.overlay)})}},{key:"onLeftArrow",value:function(){this.setCurrentDataPoint(this.state.currentIndex-1)}},{key:"onRightArrow",value:function(){this.setCurrentDataPoint(this.state.currentIndex+1)}},{key:"getDataPoint",value:function(){return{index:arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.currentIndex}}},{key:"setCurrentDataPoint",value:function(t){var e=this.state;(t=parseInt(t))<0&&(t=0),t>=e.xAxis.labels.length&&(t=e.xAxis.labels.length-1),t!==e.currentIndex&&(e.currentIndex=t,s(this.parent,"data-select",this.getDataPoint()))}},{key:"addDataPoint",value:function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.state.datasetLength;ft(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"addDataPoint",this).call(this,t,e,n),this.data.labels.splice(n,0,t),this.data.datasets.map(function(t,i){t.values.splice(n,0,e[i])}),this.update(this.data)}},{key:"removeDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.datasetLength-1;ft(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"removeDataPoint",this).call(this,t),this.data.labels.splice(t,1),this.data.datasets.map(function(e){e.values.splice(t,1)}),this.update(this.data)}},{key:"updateDataset",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;this.data.datasets[e].values=t,this.update(this.data)}}]),i}(Rt),It=(function(t){function e(t){return dt(this,e),yt(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}vt(e,t),pt(e,[{key:"preSetup",value:function(){this.type="multiaxis"}},{key:"setMargins",value:function(){ft(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setMargins",this).call(this);var t=this.data.datasets.filter(function(t){return"left"===t.axisPosition}).length;this.translateXLeft=60*t||60,this.translateXRight=60*(this.data.datasets.length-t)||60}},{key:"prepareYAxis",value:function(){}},{key:"prepareData",value:function(t){ft(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"prepareData",this).call(this,t);var i=0,n=0;this.state.datasets.forEach(function(t,e){t.yAxis={position:t.axisPosition,index:"left"===t.axisPosition?i++:n++}})}},{key:"configure",value:function(t){ft(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this,t),this.config.xAxisMode=t.xAxisMode||"tick",this.config.yAxisMode=t.yAxisMode||"span"}},{key:"configUnits",value:function(){this.unitArgs={type:"bar",args:{spaceWidth:this.state.unitWidth/2}}}},{key:"setYAxis",value:function(){var t=this;this.state.datasets.map(function(e){t.calcYAxisParameters(e.yAxis,e.values,"line"===t.unitType)})}},{key:"calcYUnits",value:function(){this.state.datasets.map(function(t){t.positions=t.values.map(function(e){return r(t.yAxis.zeroLine-e*t.yAxis.scaleMultiplier)})})}},{key:"renderConstants",value:function(){var t=this;this.state.datasets.map(function(e){var n="left"===e.yAxis.position?-1*e.yAxis.index*60:t.width+60*e.yAxis.index;t.renderer.xLine(n,"",{pos:"top",mode:"span",stroke:t.colors[i],className:"y-axis-guide"})})}},{key:"getYAxesComponents",value:function(){var t=this;return this.data.datasets.map(function(e,i){return new ChartComponent({layerClass:"y axis y-axis-"+i,make:function(){var e=t.state.datasets[i].yAxis;t.renderer.setZeroline(e.zeroline);var n={pos:e.position,mode:"tick",offset:60*e.index,stroke:t.colors[i]};return e.positions.map(function(i,a){return t.renderer.yLine(i,e.labels[a],n)})},animate:function(){}})})}},{key:"getChartComponents",value:function(){var t=this;return this.data.datasets.map(function(e,i){return new ChartComponent({layerClass:"dataset-units dataset-"+i,make:function(){var e=t.state.datasets[i],n=t.unitArgs;return t.renderer.setZeroline(e.yAxis.zeroLine),e.positions.map(function(e,a){return t.renderer[n.type](t.state.xAxisPositions[a],e,n.args,t.colors[i],a,i,t.state.datasetLength)})},animate:function(e){var n=t.state.datasets[i],a=t.unitArgs.type,s=t.state.xAxisPositions,r=t.state.datasets[i].positions,o=e[e.length-1],l=o.parentNode;if(t.oldState.xExtra>0)for(var h=0;h0}),i=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),i=e.slice(0,this.max_slices-1);var n=0;e.slice(this.max_slices-1).map(function(t){n+=t[0]}),i.push([n,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],i.map(function(e){t.sliceTotals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.sliceTotals.slice(0,this.max_legend_points)}},{key:"bindTooltip",value:function(){}},{key:"renderLegend",value:function(){}}]),i}(Rt)),Gt=Math.PI/180,Bt=function(i){function n(t){dt(this,n);var e=yt(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 vt(n,i),pt(n,[{key:"calc",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:"render",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,d=r+=u,p=n.getPositionByAngle(h,i),f=n.getPositionByAngle(d,i),v=t&&s[l],y=void 0,m=void 0;t?(y=v?v.startPosition:p,m=v?v.endPosition:p):(y=p,m=f);var g=e.makeArcPath(y,m),b=P(g,"pie-path","none",e.colors[l]);b.style.transition="transform .3s;",e.drawArea.appendChild(b),e.slices.push(b),e.slicesProperties.push({startPosition:p,endPosition:f,value:o,total:e.grand_total,startAngle:h,endAngle:d,angle:u}),t&&e.elements_to_animate.push([{unit:b,array:e.slices,index:e.slices.length-1},{d:e.makeArcPath(p,f)},650,"easein",null,{d:g}])}),t&&B(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){I(t,this.calTranslateByAngle(this.slicesProperties[i])),t.style.fill=R(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 I(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}(Rt),Ut={percentage:It,heatmap: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,d=t.count_label,p=void 0===d?"":d,f=t.legend_colors,v=void 0===f?[]:f;dt(this,e);var y=yt(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=u,y.count_label=p;var m=new Date;return y.start=n||ht(m,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.setup(),y}return vt(e,t),pt(e,[{key:"validate_colors",value:function(t){if(t.length<5)return 0;var e=1;return t.forEach(function(t){H(t)||(e=0,console.warn('"'+t+'" is not a valid color.'))},this),e}},{key:"configure",value:function(){ft(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this),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()&&ht(this.first_week_start,-1*this.first_week_start.getDay()),7!==this.last_week_start.getDay()&&ht(this.last_week_start,-1*this.last_week_start.getDay()),this.no_of_cols=ot(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:"makeChartArea",value:function(){ft(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"makeChartArea",this).call(this),this.domainLabelGroup=A(this.drawArea,"domain-label-group chart-label"),this.dataGroups=A(this.drawArea,"data-groups","translate(0, 20)")}},{key:"calc",value:function(){var t=this,e=Object.keys(this.data).map(function(e){return t.data[e]});this.distribution=nt(e,this.distribution_size),this.month_names=["January","February","March","April","May","June","July","August","September","October","November","December"]}},{key:"render",value:function(){this.renderAllWeeksAndStoreXValues(this.no_of_cols)}},{key:"renderAllWeeksAndStoreXValues",value:function(t){this.domainLabelGroup.textContent="",this.dataGroups.textContent="";var e=new Date(this.first_week_start);this.week_col=0,this.current_month=e.getMonth(),this.months=[this.current_month+""],this.month_weeks={},this.month_start_points=[],this.month_weeks[this.current_month]=0,this.month_start_points.push(13);for(var i=0;ii)break;v.getMonth()-t.getMonth()&&(n=1,this.discrete_domains&&(a=1),this.month_start_points.push(13+12*(e+a))),t=v}return[s,n]}},{key:"render_month_labels",value:function(){var t=this;this.months.shift(),this.month_start_points.shift(),this.months.pop(),this.month_start_points.pop(),this.month_start_points.map(function(e,i){var n=T("y-value-text",e+12,10,t.month_names[t.months[i]].substring(0,3));t.domainLabelGroup.appendChild(n)})}},{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){ft(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"update",this).call(this,t),this.bindTooltip()}}]),e}(Rt),pie:Bt},qt=function t(e){return dt(this,t),ct(e.type,arguments[0])};return qt}(); +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){return(t+"").length*e}function l(t,e){var i=void 0,n=void 0;return t<=e?(i=e-t,n=t):(i=t-e,n=e),[i,n]}function h(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.length-t.length;return i>0?t=r(t,i):e=r(e,i),[t,e]}function c(t,e,i,n){var a="string"==typeof e?e:e.join(", ");return[t,{transform:i.join(", ")},n,wt,"translate",{transform:a}]}function u(t,e,i){return c(t,[i,0],[e,0],kt)}function d(t,e,i){return c(t,[0,i],[0,e],kt)}function p(t,e,i,n){var a=e-i,s=t.childNodes[0];return[[s,{height:a,"stroke-dasharray":s.getAttribute("width")+", "+a},kt,wt],c(t,[0,n],[0,i],kt)]}function f(t,e,i,n){var a=l(i,(arguments.length>5&&void 0!==arguments[5]?arguments[5]:{}).zeroLine),s=gt(a,2),r=s[0],o=s[1];return"rect"!==t.nodeName?[[t.childNodes[0],{width:n,height:r},bt,wt],c(t,t.getAttribute("transform").split("(")[1].slice(0,-1),[e,o],kt)]:[[t,{width:n,height:r,x:e,y:o},bt,wt]]}function v(t,e,i){return"circle"!==t.nodeName?[c(t,t.getAttribute("transform").split("(")[1].slice(0,-1),[e,i],kt)]:[[t,{cx:e,cy:i},bt,wt]]}function g(t,e,i,n){var a=[],s=i.map(function(t,i){return e[i]+","+t}).join("L"),r=[t.path,{d:"M"+s},xt,wt];if(a.push(r),t.region){var o=e[0]+","+n+"L",l="L"+e.slice(-1)[0]+", "+n,h=[t.region,{d:"M"+o+s+l},xt,wt];a.push(h)}return a}function m(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function y(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)m(a).appendChild(i);else if("around"===n){var s=m(a);s.parentNode.insertBefore(i,s),i.appendChild(s)}else"styles"===n?"object"===(void 0===a?"undefined":ct(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 b(t,e){return y("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}function x(t,e,i,n){return y("stop",{inside:t,style:"stop-color: "+i,offset:e,"stop-opacity":n})}function k(t,e,i,n){return y("svg",{className:e,inside:t,width:i,height:n})}function _(t){return y("defs",{inside:t})}function w(t,e){return y("g",{className:e,inside:t,transform:arguments.length>2&&void 0!==arguments[2]?arguments[2]:""})}function A(t){return y("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 P(t,e){var i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],n="path-fill-gradient-"+e+"-"+(i?"lighter":"default"),a=b(t,n),s=[1,.6,.2];return i&&(s=[.4,.2,0]),x(a,"0%",e,s[0]),x(a,"50%",e,s[1]),x(a,"100%",e,s[2]),n}function D(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]}),y("rect",r)}function M(t,e,i,n){return y("text",{className:t,x:e,y:i,dy:Mt/2+"px","font-size":Mt+"px",innerHTML:n})}function T(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};a.stroke||(a.stroke=Tt);var s=y("line",{className:"line-vertical "+a.className,x1:0,x2:0,y1:i,y2:n,styles:{stroke:a.stroke}}),r=y("text",{x:0,y:i>n?i+Dt:i-Dt-Mt,dy:Mt+"px","font-size":Mt+"px","text-anchor":"middle",innerHTML:e}),o=y("g",{transform:"translate("+t+", 0)"});return o.appendChild(s),o.appendChild(r),o}function C(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};a.stroke||(a.stroke=Tt),a.lineType||(a.lineType="");var s=y("line",{className:"line-horizontal "+a.className+("dashed"===a.lineType?"dashed":""),x1:i,x2:n,y1:0,y2:0,styles:{stroke:a.stroke}}),r=y("text",{x:i3&&void 0!==arguments[3]?arguments[3]:{};n.pos||(n.pos="left"),n.offset||(n.offset=0),n.mode||(n.mode="span"),n.stroke||(n.stroke=Tt),n.className||(n.className="");var a=-1*Pt,s="span"===n.mode?i+Pt:0;return"tick"===n.mode&&"right"===n.pos&&(a=i+Pt,s=i),a+=n.offset,s+=n.offset,C(t,e,a,s,{stroke:n.stroke,className:n.className,lineType:n.lineType})}function O(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};n.pos||(n.pos="bottom"),n.offset||(n.offset=0),n.mode||(n.mode="span"),n.stroke||(n.stroke=Tt),n.className||(n.className="");var a=i+Pt,s="span"===n.mode?-1*Pt:i;return"tick"===n.mode&&"top"===n.pos&&(a=-1*Pt,s=0),T(t,e,a,s,{stroke:n.stroke,className:n.className,lineType:n.lineType})}function L(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},a=y("text",{className:"chart-label",x:i-o(e,5)-Dt,y:0,dy:Mt/-2+"px","font-size":Mt+"px","text-anchor":"start",innerHTML:e+""}),s=C(t,"",0,i,{stroke:n.stroke||Tt,className:n.className||"",lineType:n.lineType});return s.appendChild(a),s}function E(t,e,i,n){var a=t-e,s=y("rect",{className:"bar mini",styles:{fill:"rgba(228, 234, 239, 0.49)",stroke:Tt,"stroke-dasharray":i+", "+a},x:0,y:0,width:i,height:a}),r=y("text",{className:"chart-label",x:i-o(n,4.5)-Dt,y:0,dy:Mt/-2+"px","font-size":Mt+"px","text-anchor":"start",innerHTML:n+""}),l=y("g",{transform:"translate(0, "+e+")"});return l.appendChild(s),l.appendChild(r),l}function W(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"",s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,r=arguments.length>6&&void 0!==arguments[6]?arguments[6]:0,o=arguments.length>7&&void 0!==arguments[7]?arguments[7]:{},h=l(e,o.zeroLine),c=gt(h,2),u=c[0],d=c[1],p=y("rect",{className:"bar mini",style:"fill: "+n,"data-point-index":s,x:t,y:d-=r,width:i,height:u||o.minHeight});if(a||a.length){p.setAttribute("y",0),p.setAttribute("x",0);var f=y("text",{className:"data-point-value",x:i/2,y:0,dy:Mt/2*-1+"px","font-size":Mt+"px","text-anchor":"middle",innerHTML:a}),v=y("g",{transform:"translate("+t+", "+d+")"});return v.appendChild(p),v.appendChild(f),v}return p}function S(t,e,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"",s=y("circle",{style:"fill: "+n,"data-point-index":arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,cx:t,cy:e,r:i});if(a||a.length){s.setAttribute("cy",0),s.setAttribute("cx",0);var r=y("text",{className:"data-point-value",x:0,y:0,dy:Mt/2*-1-i+"px","font-size":Mt+"px","text-anchor":"middle",innerHTML:a}),o=y("g",{transform:"translate("+t+", "+e+")"});return o.appendChild(s),o.appendChild(r),o}return s}function z(t,e,i){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{},s=e.map(function(e,i){return t[i]+","+e}).join("L"),r=A("M"+s,"line-graph-path",i);if(n.heatline){var o=P(a.svgDefs,i);r.style.stroke="url(#"+o+")"}var l={path:r};if(n.regionFill){var h=P(a.svgDefs,i,!0),c="M"+t[0]+","+a.zeroLine+"L"+s+"L"+t.slice(-1)[0]+","+a.zeroLine;l.region=A(c,"region-fill","none","url(#"+h+")")}return l}function Y(t){return t>255?255:t<0?0:t}function j(t,e){var i=Et(t),n=!1;"#"==i[0]&&(i=i.slice(1),n=!0);var a=parseInt(i,16),s=Y((a>>16)+e),r=Y((a>>8&255)+e),o=Y((255&a)+e);return(n?"#":"")+(o|r<<8|s<<16).toString(16)}function H(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t)}function R(t,e,i){if(t!==e){Wt.includes(t)||console.error("'"+t+"' is not a valid chart type."),St[e].includes(t)||console.error("'"+e+"' chart cannot be converted to a '"+t+"' chart.");var n=zt[e].includes(t);return new Ut({parent:i.parent,title:i.title,data:i.data,type:t,height:i.height,colors:n?i.colors:void 0})}}function F(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],d={attributeName:l,from:c,to:u,begin:"0s",dur:i/1e3+"s",values:c+";"+u,keySplines:Yt[n],keyTimes:"0;1",calcMode:"spline",fill:"freeze"};a&&(d.type=a);for(var p in d)h.setAttribute(p,d[p]);r.appendChild(h),a?o.setAttribute(l,"translate("+u+")"):o.setAttribute(l,u)}return[r,o]}function I(t,e){t.style.transform=e,t.style.webkitTransform=e,t.style.msTransform=e,t.style.mozTransform=e,t.style.oTransform=e}function G(t,e){var i=[],n=[];e.map(function(t){var e=t[0],a=e.parentNode,s=void 0,r=void 0;t[0]=e;var o=F.apply(void 0,mt(t)),l=gt(o,2);s=l[0],r=l[1],i.push(r),n.push([s,a]),a.replaceChild(s,e)});var a=t.cloneNode(!0);return n.map(function(t,n){t[1].replaceChild(i[n],t[0]),e[n][0]=i[n]}),a}function B(t,e,i){if(0!==i.length){var n=G(e,i);e.parentNode==t&&(t.removeChild(e),t.appendChild(n)),setTimeout(function(){n.parentNode==t&&(t.removeChild(n),t.appendChild(e))},_t)}}function X(t){var e=new Date(t);return e.setMinutes(e.getMinutes()-e.getTimezoneOffset()),e}function q(t){var e=t.getDate(),i=t.getMonth()+1;return[(e>9?"":"0")+e,(i>9?"":"0")+i,t.getFullYear()].join("-")}function U(t,e){return Math.ceil(V(t,e)/7)}function V(t,e){return(X(e)-X(t))/864e5}function J(t,e){t.setDate(t.getDate()+e)}function K(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 $(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 Q(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=K(t),n=gt(i,2),a=n[0],s=n[1],r=e?e/Math.pow(10,s):0,o=$(a=a.toFixed(6),r);return o=o.map(function(t){return t*Math.pow(10,s)})}function Z(t){function e(t,e){for(var i=Q(t),n=i[1]-i[0],a=0,s=1;a1&&void 0!==arguments[1]&&arguments[1],n=Math.max.apply(Math,mt(t)),a=Math.min.apply(Math,mt(t)),s=[];if(n>=0&&a>=0)K(n)[1],s=i?Q(n,a):Q(n);else if(n>0&&a<0){var r=Math.abs(a);n>=r?(K(n)[1],s=e(n,r)):(K(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);K(o)[1],s=(s=i?Q(o,l):Q(o)).reverse().map(function(t){return-1*t})}return s}function tt(t){var e=et(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 et(t){return t[1]-t[0]}function it(t){return t[t.length-1]-t[0]}function nt(t,e){return s(e.zeroLine-t*e.scaleMultiplier)}function at(t,e){for(var i=Math.max.apply(Math,mt(t)),n=1/(e-1),a=[],s=0;si?s.slice(0,i):r(s,i-s.length,0)}else t.values=a;t.chartType||(At.includes(e),t.chartType=e)}),t.yRegions&&t.yRegions.map(function(t){if(t.end0&&void 0!==arguments[0]?arguments[0]:"line",e=arguments[1];return"line"===t?(e.type="line",new Xt(e)):"bar"===t?(e.type="bar",new Xt(e)):"axis-mixed"===t?(e.type="line",new Xt(e)):qt[t]?new qt[t](e):void console.error("Undefined chart type: "+t)}!function(t,e){if("undefined"==typeof document)return e;t=t||"";var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css",i.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}('.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path,.chart-container .multiaxis-chart .line-horizontal,.chart-container .multiaxis-chart .y-axis-guide{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}',void 0);var ct="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},ut=(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")}),dt=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}(),bt=350,xt=350,kt=bt,_t=250,wt="easein",At=["line","bar"],Pt=6,Dt=4,Mt=10,Tt="#dadada",Ct={bar:function(t){var e=void 0;"rect"!==t.nodeName&&(e=t.getAttribute("transform"),t=t.childNodes[0]);var i=t.cloneNode();return i.style.fill="#000000",i.style.opacity="0.4",e&&i.setAttribute("transform",e),i},dot:function(t){var e=void 0;"circle"!==t.nodeName&&(e=t.getAttribute("transform"),t=t.childNodes[0]);var i=t.cloneNode(),n=t.getAttribute("r");return i.setAttribute("r",n+4),i.style.fill="#000000",i.style.opacity="0.4",e&&i.setAttribute("transform",e),i}},Nt={bar:function(t,e){var i=void 0;"rect"!==t.nodeName&&(i=t.getAttribute("transform"),t=t.childNodes[0]);var n=["x","y","width","height"];Object.values(t.attributes).filter(function(t){return n.includes(t.name)&&t.specified}).map(function(t){e.setAttribute(t.name,t.nodeValue)}),i&&e.setAttribute("transform",i)},dot:function(t,e){var i=void 0;"circle"!==t.nodeName&&(i=t.getAttribute("transform"),t=t.childNodes[0]);var n=["cx","cy"];Object.values(t.attributes).filter(function(t){return n.includes(t.name)&&t.specified}).map(function(t){e.setAttribute(t.name,t.nodeValue)}),i&&e.setAttribute("transform",i)}},Ot={"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"},Lt=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta"],Et=function(t){return Ot[t]||t},Wt=["line","scatter","bar","percentage","heatmap","pie"],St={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:[]},zt={bar:["line","scatter"],line:["scatter","bar"],pie:["percentage"],scatter:["line","bar"],percentage:["pie"],heatmap:[]},Yt={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"},jt=function(){function e(t){var i=t.height,n=void 0===i?240:i,a=t.title,s=void 0===a?"":a,r=t.subtitle,o=void 0===r?"":r,l=(t.colors,t.isNavigable),h=void 0===l?0:l,c=(t.showLegend,t.type),u=void 0===c?"":c,d=t.parent,p=t.data;ut(this,e),this.rawChartArgs=arguments[0],this.parent="string"==typeof d?document.querySelector(d):d,this.title=s,this.subtitle=o,this.argHeight=n,this.type=u,this.realData=this.prepareData(p),this.data=this.prepareFirstData(this.realData),this.colors=[],this.config={showTooltip:1,showLegend:1,isNavigable:h,animate:1},this.state={},this.options={},this.config.isNavigable&&(this.state.currentIndex=0,this.overlays=[]),this.configure(arguments[0])}return dt(e,[{key:"configure",value:function(t){var e=this;this.setColors(),this.setMargins(),window.addEventListener("resize",function(){return e.draw()}),window.addEventListener("orientationchange",function(){return e.draw()})}},{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 yt({parent:this.chartWrapper,colors:this.colors}),this.bindTooltip()}},{key:"bindTooltip",value:function(){}},{key:"draw",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.calcWidth(),this.calc(),this.makeChartArea(),this.setupComponents(),this.components.forEach(function(e){return e.setup(t.drawArea)}),this.components.forEach(function(t){return t.make()}),e&&(this.data=this.realData,setTimeout(function(){t.update()},400)),this.renderLegend(),this.setupNavigation(e)}},{key:"calcWidth",value:function(){this.baseWidth=n(this.parent)-0,this.width=this.baseWidth-(this.leftMargin+this.rightMargin)}},{key:"update",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data;this.data=this.prepareData(t),this.calc(),this.render()}},{key:"prepareData",value:function(){return arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data}},{key:"prepareFirstData",value:function(){return arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data}},{key:"calc",value:function(){}},{key:"render",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.components,i=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.config.isNavigable&&this.overlays.map(function(t){return t.parentNode.removeChild(t)});var n=[];e.forEach(function(t){n=n.concat(t.update(i))}),n.length>0?(B(this.chartWrapper,this.svg,n),setTimeout(function(){e.forEach(function(t){return t.make()}),t.updateNav()},400)):this.updateNav()}},{key:"updateNav",value:function(){this.config.isNavigable&&(this.overlayGuides?this.updateOverlays():(this.makeOverlays(),this.bindUnits()))}},{key:"makeChartArea",value:function(){this.svg&&this.chartWrapper.removeChild(this.svg),this.svg=k(this.chartWrapper,"chart",this.baseWidth,this.baseHeight),this.svgDefs=_(this.svg),this.drawArea=w(this.svg,this.type+"-chart","translate("+this.leftMargin+", "+this.translateY+")")}},{key:"renderLegend",value:function(){}},{key:"setupNavigation",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.config.isNavigable&&e&&(this.bindOverlay(),this.keyActions={13:this.onEnterKey.bind(this),37:this.onLeftArrow.bind(this),38:this.onUpArrow.bind(this),39:this.onRightArrow.bind(this),40:this.onDownArrow.bind(this)},document.addEventListener("keydown",function(e){i(t.chartWrapper)&&(e=e||window.event,t.keyActions[e.keyCode]())}))}},{key:"makeOverlays",value:function(){}},{key:"bindOverlay",value:function(){}},{key:"bindUnits",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:"setCurrentDataPoint",value:function(t){}},{key:"updateDataset",value:function(t,e){}},{key:"addDataset",value:function(t,e){}},{key:"removeDataset",value:function(){}},{key:"updateDatasets",value:function(t){}},{key:"updateDataPoint",value:function(t){}},{key:"addDataPoint",value:function(t){}},{key:"removeDataPoint",value:function(){}},{key:"getDifferentChart",value:function(t){return R(t,this.type,this.rawChartArgs)}}]),e}(),Ht=function(e){function i(t){ut(this,i);var e=vt(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,t));return e.type="percentage",e.max_slices=10,e.max_legend_points=6,e.setup(),e}return ft(i,e),dt(i,[{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.svg=t.create("div",{className:"div",inside:this.chartWrapper}),this.chart=t.create("div",{className:"progress-chart",inside:this.svg}),this.percentageBar=t.create("div",{className:"progress",inside:this.chart})}},{key:"render",value:function(){var e=this;this.grand_total=this.sliceTotals.reduce(function(t,e){return t+e},0),this.slices=[],this.sliceTotals.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:"calc",value:function(){var t=this;this.sliceTotals=[];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.sliceTotals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.sliceTotals.slice(0,this.max_legend_points)}},{key:"bindTooltip",value:function(){}},{key:"renderLegend",value:function(){}}]),i}(jt),Rt=Math.PI/180,Ft=function(i){function n(t){ut(this,n);var e=vt(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 ft(n,i),dt(n,[{key:"calc",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:"render",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,d=r+=u,p=n.getPositionByAngle(h,i),f=n.getPositionByAngle(d,i),v=t&&s[l],g=void 0,m=void 0;t?(g=v?v.startPosition:p,m=v?v.endPosition:p):(g=p,m=f);var y=e.makeArcPath(g,m),b=A(y,"pie-path","none",e.colors[l]);b.style.transition="transform .3s;",e.drawArea.appendChild(b),e.slices.push(b),e.slicesProperties.push({startPosition:p,endPosition:f,value:o,total:e.grand_total,startAngle:h,endAngle:d,angle:u}),t&&e.elements_to_animate.push([{unit:b,array:e.slices,index:e.slices.length-1},{d:e.makeArcPath(p,f)},650,"easein",null,{d:y}])}),t&&B(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){I(t,this.calTranslateByAngle(this.slicesProperties[i])),t.style.fill=j(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 I(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*Rt)*e,y:Math.cos(t*Rt)*e}}}]),n}(jt),It=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,d=t.count_label,p=void 0===d?"":d,f=t.legend_colors,v=void 0===f?[]:f;ut(this,e);var g=vt(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=p;var m=new Date;return g.start=n||J(m,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.setup(),g}return ft(e,t),dt(e,[{key:"validate_colors",value:function(t){if(t.length<5)return 0;var e=1;return t.forEach(function(t){H(t)||(e=0,console.warn('"'+t+'" is not a valid color.'))},this),e}},{key:"configure",value:function(){pt(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"configure",this).call(this),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()&&J(this.first_week_start,-1*this.first_week_start.getDay()),7!==this.last_week_start.getDay()&&J(this.last_week_start,-1*this.last_week_start.getDay()),this.no_of_cols=U(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:"makeChartArea",value:function(){pt(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"makeChartArea",this).call(this),this.domainLabelGroup=w(this.drawArea,"domain-label-group chart-label"),this.dataGroups=w(this.drawArea,"data-groups","translate(0, 20)")}},{key:"calc",value:function(){var t=this,e=Object.keys(this.data).map(function(e){return t.data[e]});this.distribution=at(e,this.distribution_size),this.month_names=["January","February","March","April","May","June","July","August","September","October","November","December"]}},{key:"render",value:function(){this.renderAllWeeksAndStoreXValues(this.no_of_cols)}},{key:"renderAllWeeksAndStoreXValues",value:function(t){this.domainLabelGroup.textContent="",this.dataGroups.textContent="";var e=new Date(this.first_week_start);this.week_col=0,this.current_month=e.getMonth(),this.months=[this.current_month+""],this.month_weeks={},this.month_start_points=[],this.month_weeks[this.current_month]=0,this.month_start_points.push(13);for(var i=0;ii)break;v.getMonth()-t.getMonth()&&(n=1,this.discrete_domains&&(a=1),this.month_start_points.push(13+12*(e+a))),t=v}return[s,n]}},{key:"render_month_labels",value:function(){var t=this;this.months.shift(),this.month_start_points.shift(),this.months.pop(),this.month_start_points.pop(),this.month_start_points.map(function(e,i){var n=M("y-value-text",e+12,10,t.month_names[t.months[i]].substring(0,3));t.domainLabelGroup.appendChild(n)})}},{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){pt(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"update",this).call(this,t),this.bindTooltip()}}]),e}(jt),Gt=function(){function t(e){var i=e.layerClass,n=void 0===i?"":i,a=e.layerTransform,s=void 0===a?"":a,r=e.constants,o=e.getData,l=e.makeElements,h=e.animateElements;ut(this,t),this.layerTransform=s,this.constants=r,this.makeElements=l,this.getData=o,this.animateElements=h,this.store=[],this.layerClass=n,this.layerClass="function"==typeof this.layerClass?this.layerClass():this.layerClass,this.refresh()}return dt(t,[{key:"refresh",value:function(t){this.data=t||this.getData()}},{key:"setup",value:function(t){this.layer=w(t,this.layerClass,this.layerTransform)}},{key:"make",value:function(){this.render(this.data),this.oldData=this.data}},{key:"render",value:function(t){var e=this;this.store=this.makeElements(t),this.layer.textContent="",this.store.forEach(function(t){e.layer.appendChild(t)})}},{key:"update",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.refresh();var e=[];return t&&(e=this.animateElements(this.data)),e}}]),t}(),Bt={yAxis:{layerClass:"y axis",makeElements:function(t){var e=this;return t.positions.map(function(i,n){return N(i,t.labels[n],e.constants.width,{mode:e.constants.mode,pos:e.constants.pos})})},animateElements:function(t){var e=t.positions,i=t.labels,n=this.oldData.positions,a=this.oldData.labels,s=h(n,e),r=gt(s,2);n=r[0],e=r[1];var o=h(a,i),l=gt(o,2);return a=l[0],i=l[1],this.render({positions:n,labels:i}),this.store.map(function(t,i){return d(t,e[i],n[i])})}},xAxis:{layerClass:"x axis",makeElements:function(t){var e=this;return t.positions.map(function(i,n){return O(i,t.labels[n],e.constants.height,{mode:e.constants.mode,pos:e.constants.pos})})},animateElements:function(t){var e=t.positions,i=t.labels,n=this.oldData.positions,a=this.oldData.labels,s=h(n,e),r=gt(s,2);n=r[0],e=r[1];var o=h(a,i),l=gt(o,2);return a=l[0],i=l[1],this.render({positions:n,labels:i}),this.store.map(function(t,i){return u(t,e[i],n[i])})}},yMarkers:{layerClass:"y-markers",makeElements:function(t){var e=this;return t.map(function(t){return L(t.position,t.label,e.constants.width,{pos:"right",mode:"span",lineType:"dashed"})})},animateElements:function(t){var e=h(this.oldData,t),i=gt(e,2);this.oldData=i[0];var n=(t=i[1]).map(function(t){return t.position}),a=t.map(function(t){return t.label}),s=this.oldData.map(function(t){return t.position});this.oldData.map(function(t){return t.label});return this.render(s.map(function(t,e){return{position:s[e],label:a[e]}})),this.store.map(function(t,e){return d(t,n[e],s[e])})}},yRegions:{layerClass:"y-regions",makeElements:function(t){var e=this;return t.map(function(t){return E(t.start,t.end,e.constants.width,t.label)})},animateElements:function(t){var e=h(this.oldData,t),i=gt(e,2);this.oldData=i[0];var n=(t=i[1]).map(function(t){return t.end}),a=t.map(function(t){return t.label}),s=t.map(function(t){return t.start}),r=this.oldData.map(function(t){return t.end}),o=(this.oldData.map(function(t){return t.label}),this.oldData.map(function(t){return t.start}));this.render(r.map(function(t,e){return{start:o[e],end:r[e],label:a[e]}}));var l=[];return this.store.map(function(t,e){l=l.concat(p(t,s[e],n[e],r[e]))}),l}},barGraph:{layerClass:function(){return"dataset-units dataset-bars dataset-"+this.constants.index},makeElements:function(t){var e=this.constants;return this.unitType="bar",t.yPositions.map(function(i,n){return W(t.xPositions[n],i,t.barWidth,e.color,e.valuesOverPoints?e.stacked?t.cumulativeYs[n]:t.values[n]:"",n,i-(e.stacked?t.cumulativeYPos[n]:i),{zeroLine:t.zeroLine,barsWidth:t.barsWidth,minHeight:e.minHeight})})},animateElements:function(t){var e=this.constants,i=t.xPositions,n=t.yPositions,a=t.cumulativeYPos,s=t.values,r=t.cumulativeYs,o=this.oldData.xPositions,l=this.oldData.yPositions,c=this.oldData.cumulativeYPos,u=this.oldData.values,d=this.oldData.cumulativeYs,p=h(o,i),v=gt(p,2);o=v[0],i=v[1];var g=h(l,n),m=gt(g,2);l=m[0],n=m[1];var y=h(c,a),b=gt(y,2);c=b[0],a=b[1];var x=h(u,s),k=gt(x,2);u=k[0],s=k[1];var _=h(d,r),w=gt(_,2);d=w[0],r=w[1],this.render({xPositions:o,yPositions:l,cumulativeYPos:c,values:s,cumulativeYs:r,zeroLine:this.oldData.zeroLine,barsWidth:this.oldData.barsWidth,barWidth:this.oldData.barWidth});var A=[];return this.store.map(function(a,s){A=A.concat(f(a,i[s],n[s],t.barWidth,e.index,{zeroLine:t.zeroLine}))}),A}},lineGraph:{layerClass:function(){return"dataset-units dataset-line dataset-"+this.constants.index},makeElements:function(t){var e=this.constants;return this.unitType="dot",this.paths=z(t.xPositions,t.yPositions,e.color,{heatline:e.heatline,regionFill:e.regionFill},{svgDefs:e.svgDefs,zeroLine:t.zeroLine}),this.dots=[],e.hideDots||(this.dots=t.yPositions.map(function(i,n){return S(t.xPositions[n],i,t.radius,e.color,e.valuesOverPoints?t.values[n]:"",n)})),Object.values(this.paths).concat(this.dots)},animateElements:function(t){var e=t.xPositions,i=t.yPositions,n=t.values,a=this.oldData.xPositions,s=this.oldData.yPositions,r=this.oldData.values,o=h(a,e),l=gt(o,2);a=l[0],e=l[1];var c=h(s,i),u=gt(c,2);s=u[0],i=u[1];var d=h(r,n),p=gt(d,2);r=p[0],n=p[1],this.render({xPositions:a,yPositions:s,values:n,zeroLine:this.oldData.zeroLine,radius:this.oldData.radius});var f=[];return f=f.concat(g(this.paths,e,i,t.zeroLine)),this.dots.length&&this.dots.map(function(t,n){f=f.concat(v(t,e[n],i[n]))}),f}}},Xt=function(t){function i(t){ut(this,i);var e=vt(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,t));return e.isSeries=t.isSeries,e.valuesOverPoints=t.valuesOverPoints,e.formatTooltipY=t.formatTooltipY,e.formatTooltipX=t.formatTooltipX,e.barOptions=t.barOptions||{},e.lineOptions=t.lineOptions||{},e.type=t.type||"line",e.xAxisMode=t.xAxisMode||"span",e.yAxisMode=t.yAxisMode||"span",e.setup(),e}return ft(i,t),dt(i,[{key:"configure",value:function(t){pt(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"configure",this).call(this),this.config.xAxisMode=t.xAxisMode,this.config.yAxisMode=t.yAxisMode}},{key:"setMargins",value:function(){pt(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"setMargins",this).call(this),this.leftMargin=60,this.rightMargin=60}},{key:"prepareData",value:function(){return rt(arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data,this.type)}},{key:"prepareFirstData",value:function(){return ot(arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data)}},{key:"calc",value:function(){this.calcXPositions(),this.calcYAxisParameters(this.getAllYValues(),"line"===this.type)}},{key:"calcXPositions",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state,e=this.data.labels;t.datasetLength=e.length,t.unitWidth=this.width/t.datasetLength,t.xOffset=t.unitWidth/2,t.xAxis={labels:e,positions:e.map(function(e,i){return s(t.xOffset+i*t.unitWidth)})}}},{key:"calcYAxisParameters",value:function(t){var e=Z(t,arguments.length>1&&void 0!==arguments[1]?arguments[1]:"false"),i=this.height/it(e),n=et(e)*i,a=this.height-tt(e)*n;this.state.yAxis={labels:e,positions:e.map(function(t){return a-t*i}),scaleMultiplier:i,zeroLine:a},this.calcDatasetPoints(),this.calcYExtremes(),this.calcYRegions()}},{key:"calcDatasetPoints",value:function(){var t=this.state,e=function(e){return e.map(function(e){return nt(e,t.yAxis)})};t.datasets=this.data.datasets.map(function(t,i){var n=t.values,a=t.cumulativeYs||[];return{name:t.name,index:i,chartType:t.chartType,values:n,yPositions:e(n),cumulativeYs:a,cumulativeYPos:e(a)}})}},{key:"calcYExtremes",value:function(){var t=this.state;if(this.barOptions.stacked)return void(t.yExtremes=t.datasets[t.datasets.length-1].cumulativeYPos);t.yExtremes=new Array(t.datasetLength).fill(9999),t.datasets.map(function(e,i){e.yPositions.map(function(e,i){e=0;s--){var r=i.xAxis.positions[s];if(t>r-i.unitWidth/2){var o=r+this.leftMargin,l=i.yExtremes[s]+this.translateY,h=this.data.datasets.map(function(t,i){return{title:t.title,value:a?e.formatTooltipY(t.values[s]):t.values[s],color:e.colors[i]}});this.tip.set_values(o,l,n[s],"",h),this.tip.show_tip();break}}}}},{key:"makeOverlays",value:function(){var t=this;this.overlayGuides=this.dataUnitComponents.map(function(t){return{type:t.unitType,overlay:void 0,units:t.store}}),this.state.currentIndex=0,this.overlayGuides.map(function(e){var i=e.units[t.state.currentIndex];e.overlay=Ct[e.type](i),t.drawArea.appendChild(e.overlay)})}},{key:"bindOverlay",value:function(){var t=this;this.parent.addEventListener("data-select",function(e){t.updateOverlay(e.svg_unit)})}},{key:"bindUnits",value:function(t){}},{key:"updateOverlay",value:function(){var t=this;this.overlayGuides.map(function(e){var i=e.units[t.state.currentIndex];Nt[e.type](i,e.overlay)})}},{key:"onLeftArrow",value:function(){this.setCurrentDataPoint(this.state.currentIndex-1)}},{key:"onRightArrow",value:function(){this.setCurrentDataPoint(this.state.currentIndex+1)}},{key:"getDataPoint",value:function(){return{index:arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.currentIndex}}},{key:"setCurrentDataPoint",value:function(t){var e=this.state;(t=parseInt(t))<0&&(t=0),t>=e.xAxis.labels.length&&(t=e.xAxis.labels.length-1),t!==e.currentIndex&&(e.currentIndex=t,a(this.parent,"data-select",this.getDataPoint()))}},{key:"addDataPoint",value:function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.state.datasetLength;pt(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"addDataPoint",this).call(this,t,e,n),this.data.labels.splice(n,0,t),this.data.datasets.map(function(t,i){t.values.splice(n,0,e[i])}),this.update(this.data)}},{key:"removeDataPoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.datasetLength-1;pt(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"removeDataPoint",this).call(this,t),this.data.labels.splice(t,1),this.data.datasets.map(function(e){e.values.splice(t,1)}),this.update(this.data)}},{key:"updateDataset",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;this.data.datasets[e].values=t,this.update(this.data)}}]),i}(jt),qt={percentage:Ht,heatmap:It,pie:Ft},Ut=function t(e){return ut(this,t),ht(e.type,arguments[0])};return Ut}(); //# sourceMappingURL=frappe-charts.min.iife.js.map diff --git a/dist/frappe-charts.min.iife.js.map b/dist/frappe-charts.min.iife.js.map index 1d859ca..506b310 100644 --- a/dist/frappe-charts.min.iife.js.map +++ b/dist/frappe-charts.min.iife.js.map @@ -1 +1 @@ -{"version":3,"file":"frappe-charts.min.iife.js","sources":["../src/js/utils/dom.js","../src/js/utils/helpers.js","../src/js/utils/draw-utils.js","../src/js/utils/animate.js","../src/js/utils/draw.js","../src/js/utils/colors.js","../src/js/config.js","../src/js/utils/animation.js","../src/js/charts/axis-chart-utils.js","../src/js/objects/ChartComponents.js","../src/js/utils/intervals.js","../src/js/utils/date-utils.js","../src/js/chart.js","../src/js/objects/SvgTip.js","../src/js/utils/constants.js","../src/js/charts/BaseChart.js","../src/js/charts/AxisChart.js","../src/js/charts/PercentageChart.js","../src/js/charts/MultiAxisChart.js","../src/js/charts/PieChart.js","../src/js/charts/Heatmap.js"],"sourcesContent":["export function $(expr, con) {\n\treturn typeof expr === \"string\"? (con || document).querySelector(expr) : expr || null;\n}\n\nexport function findNodeIndex(node)\n{\n\tvar i = 0;\n\twhile (node.previousSibling) {\n\t\tnode = node.previousSibling;\n\t\ti++;\n\t}\n\treturn i;\n}\n\n$.create = (tag, o) => {\n\tvar element = document.createElement(tag);\n\n\tfor (var i in o) {\n\t\tvar val = o[i];\n\n\t\tif (i === \"inside\") {\n\t\t\t$(val).appendChild(element);\n\t\t}\n\t\telse if (i === \"around\") {\n\t\t\tvar ref = $(val);\n\t\t\tref.parentNode.insertBefore(element, ref);\n\t\t\telement.appendChild(ref);\n\n\t\t} else if (i === \"styles\") {\n\t\t\tif(typeof val === \"object\") {\n\t\t\t\tObject.keys(val).map(prop => {\n\t\t\t\t\telement.style[prop] = val[prop];\n\t\t\t\t});\n\t\t\t}\n\t\t} else if (i in element ) {\n\t\t\telement[i] = val;\n\t\t}\n\t\telse {\n\t\t\telement.setAttribute(i, val);\n\t\t}\n\t}\n\n\treturn element;\n};\n\nexport function getOffset(element) {\n\tlet rect = element.getBoundingClientRect();\n\treturn {\n\t\t// https://stackoverflow.com/a/7436602/6495043\n\t\t// rect.top varies with scroll, so we add whatever has been\n\t\t// scrolled to it to get absolute distance from actual page top\n\t\ttop: rect.top + (document.documentElement.scrollTop || document.body.scrollTop),\n\t\tleft: rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft)\n\t};\n}\n\nexport function isElementInViewport(el) {\n\t// Although straightforward: https://stackoverflow.com/a/7557433/6495043\n\tvar rect = el.getBoundingClientRect();\n\n\treturn (\n\t\trect.top >= 0 &&\n rect.left >= 0 &&\n rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */\n rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */\n\t);\n}\n\nexport function getElementContentWidth(element) {\n\tvar styles = window.getComputedStyle(element);\n\tvar padding = parseFloat(styles.paddingLeft) +\n\t\tparseFloat(styles.paddingRight);\n\n\treturn element.clientWidth - padding;\n}\n\nexport function bind(element, o){\n\tif (element) {\n\t\tfor (var event in o) {\n\t\t\tvar callback = o[event];\n\n\t\t\tevent.split(/\\s+/).forEach(function (event) {\n\t\t\t\telement.addEventListener(event, callback);\n\t\t\t});\n\t\t}\n\t}\n}\n\nexport function unbind(element, o){\n\tif (element) {\n\t\tfor (var event in o) {\n\t\t\tvar callback = o[event];\n\n\t\t\tevent.split(/\\s+/).forEach(function(event) {\n\t\t\t\telement.removeEventListener(event, callback);\n\t\t\t});\n\t\t}\n\t}\n}\n\nexport function fire(target, type, properties) {\n\tvar evt = document.createEvent(\"HTMLEvents\");\n\n\tevt.initEvent(type, true, true );\n\n\tfor (var j in properties) {\n\t\tevt[j] = properties[j];\n\t}\n\n\treturn target.dispatchEvent(evt);\n}\n","/**\n * Returns the value of a number upto 2 decimal places.\n * @param {Number} d Any number\n */\nexport function floatTwo(d) {\n\treturn parseFloat(d.toFixed(2));\n}\n\n/**\n * Returns whether or not two given arrays are equal.\n * @param {Array} arr1 First array\n * @param {Array} arr2 Second array\n */\nexport function arraysEqual(arr1, arr2) {\n\tif(arr1.length !== arr2.length) return false;\n\tlet areEqual = true;\n\tarr1.map((d, i) => {\n\t\tif(arr2[i] !== d) areEqual = false;\n\t});\n\treturn areEqual;\n}\n\n/**\n * Shuffles array in place. ES6 version\n * @param {Array} array An array containing the items.\n */\nexport function shuffle(array) {\n\t// Awesomeness: https://bost.ocks.org/mike/shuffle/\n\t// https://stackoverflow.com/a/2450976/6495043\n\t// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array?noredirect=1&lq=1\n\n\tfor (let i = array.length - 1; i > 0; i--) {\n\t\tlet j = Math.floor(Math.random() * (i + 1));\n\t\t[array[i], array[j]] = [array[j], array[i]];\n\t}\n\n\treturn array;\n}\n\n/**\n * Fill an array with extra points\n * @param {Array} array Array\n * @param {Number} count number of filler elements\n * @param {Object} element element to fill with\n * @param {Boolean} start fill at start?\n */\nexport function fillArray(array, count, element, start=false) {\n\tif(!element) {\n\t\telement = start ? array[0] : array[array.length - 1];\n\t}\n\tlet fillerArray = new Array(Math.abs(count)).fill(element);\n\tarray = start ? fillerArray.concat(array) : array.concat(fillerArray);\n\treturn array;\n}\n\n/**\n * Returns pixel width of string.\n * @param {String} string\n * @param {Number} charWidth Width of single char in pixels\n */\nexport function getStringWidth(string, charWidth) {\n\treturn (string+\"\").length * charWidth;\n}\n\nexport function bindChange(obj, getFn, setFn) {\n\treturn new Proxy(obj, {\n\t\tset: function(target, prop, value) {\n\t\t\tsetFn();\n\t\t\treturn Reflect.set(target, prop, value);\n\t\t},\n\t\tget: function(target, prop, value) {\n\t\t\tgetFn();\n\t\t\treturn Reflect.get(target, prop);\n\t\t}\n\t});\n}\n","import { fillArray } from './helpers';\n\nexport function getBarHeightAndYAttr(yTop, zeroLine) {\n\tlet height, y;\n\tif (yTop <= zeroLine) {\n\t\theight = zeroLine - yTop;\n\t\ty = yTop;\n\t} else {\n\t\theight = yTop - zeroLine;\n\t\ty = zeroLine;\n\t}\n\n\treturn [height, y];\n}\n\nexport function equilizeNoOfElements(array1, array2,\n\textra_count=array2.length - array1.length) {\n\n\t// Doesn't work if either has zero elements.\n\tif(extra_count > 0) {\n\t\tarray1 = fillArray(array1, extra_count);\n\t} else {\n\t\tarray2 = fillArray(array2, extra_count);\n\t}\n\treturn [array1, array2];\n}\n\n// let char_width = 8;\n// let allowed_space = avgUnitWidth * 1.5;\n// let allowed_letters = allowed_space / 8;\n\n// return values.map((value, i) => {\n// \tlet space_taken = getStringWidth(value, char_width) + 2;\n// \tif(space_taken > allowed_space) {\n// \t\tif(isSeries) {\n// \t\t\t// Skip some axis lines if X axis is a series\n// \t\t\tlet skips = 1;\n// \t\t\twhile((space_taken/skips)*2 > allowed_space) {\n// \t\t\t\tskips++;\n// \t\t\t}\n// \t\t\tif(i % skips !== 0) {\n// \t\t\t\treturn;\n// \t\t\t}\n// \t\t} else {\n// \t\t\tvalue = value.slice(0, allowed_letters-3) + \" ...\";\n// \t\t}\n// \t}\n","import { getBarHeightAndYAttr } from './draw-utils';\n\nexport const UNIT_ANIM_DUR = 350;\nexport const PATH_ANIM_DUR = 350;\nexport const MARKER_LINE_ANIM_DUR = UNIT_ANIM_DUR;\nexport const REPLACE_ALL_NEW_DUR = 250;\n\nexport const STD_EASING = 'easein';\n\nexport function translate(unit, oldCoord, newCoord, duration) {\n\tlet old = typeof oldCoord === 'string' ? oldCoord : oldCoord.join(', ');\n\treturn [\n\t\tunit,\n\t\t{transform: newCoord.join(', ')},\n\t\tduration,\n\t\tSTD_EASING,\n\t\t\"translate\",\n\t\t{transform: old}\n\t];\n}\n\nexport function translateVertLine(xLine, newX, oldX) {\n\treturn translate(xLine, [oldX, 0], [newX, 0], MARKER_LINE_ANIM_DUR);\n}\n\nexport function translateHoriLine(yLine, newY, oldY) {\n\treturn translate(yLine, [0, oldY], [0, newY], MARKER_LINE_ANIM_DUR);\n}\n\nexport function animateRegion(rectGroup, newY1, newY2, oldY2) {\n\tlet newHeight = newY1 - newY2;\n\tlet rect = rectGroup.childNodes[0];\n\tlet width = rect.getAttribute(\"width\");\n\tlet rectAnim = [\n\t\trect,\n\t\t{ height: newHeight, 'stroke-dasharray': `${width}, ${newHeight}` },\n\t\tMARKER_LINE_ANIM_DUR,\n\t\tSTD_EASING\n\t]\n\n\tlet groupAnim = translate(rectGroup, [0, oldY2], [0, newY2], MARKER_LINE_ANIM_DUR);\n\treturn [rectAnim, groupAnim];\n}\n\nexport function animateBar(bar, x, yTop, width, index=0, meta={}) {\n\tlet [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine);\n\tif(bar.nodeName !== 'rect') {\n\t\tlet rect = bar.childNodes[0];\n\t\tlet rectAnim = [\n\t\t\trect,\n\t\t\t{width: width, height: height},\n\t\t\tUNIT_ANIM_DUR,\n\t\t\tSTD_EASING\n\t\t]\n\n\t\tlet oldCoordStr = bar.getAttribute(\"transform\").split(\"(\")[1].slice(0, -1);\n\t\tlet groupAnim = translate(bar, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);\n\t\treturn [rectAnim, groupAnim];\n\t} else {\n\t\treturn [[bar, {width: width, height: height, x: x, y: y}, UNIT_ANIM_DUR, STD_EASING]];\n\t}\n\t// bar.animate({height: args.newHeight, y: yTop}, UNIT_ANIM_DUR, mina.easein);\n}\n\nexport function animateDot(dot, x, y) {\n\tif(dot.nodeName !== 'circle') {\n\t\tlet oldCoordStr = dot.getAttribute(\"transform\").split(\"(\")[1].slice(0, -1);\n\t\tlet groupAnim = translate(dot, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);\n\t\treturn [groupAnim];\n\t} else {\n\t\treturn [[dot, {cx: x, cy: y}, UNIT_ANIM_DUR, STD_EASING]];\n\t}\n\t// dot.animate({cy: yTop}, UNIT_ANIM_DUR, mina.easein);\n}\n\nexport function animatePath(paths, newXList, newYList, zeroLine) {\n\tlet pathComponents = [];\n\n\tlet pointsStr = newYList.map((y, i) => (newXList[i] + ',' + y));\n\tlet pathStr = pointsStr.join(\"L\");\n\n\tconst animPath = [paths.path, {d:\"M\"+pathStr}, PATH_ANIM_DUR, STD_EASING];\n\tpathComponents.push(animPath);\n\n\tif(paths.region) {\n\t\tlet regStartPt = `${newXList[0]},${zeroLine}L`;\n\t\tlet regEndPt = `L${newXList.slice(-1)[0]}, ${zeroLine}`;\n\n\t\tconst animRegion = [\n\t\t\tpaths.region,\n\t\t\t{d:\"M\" + regStartPt + pathStr + regEndPt},\n\t\t\tPATH_ANIM_DUR,\n\t\t\tSTD_EASING\n\t\t];\n\t\tpathComponents.push(animRegion);\n\t}\n\n\treturn pathComponents;\n}\n\n","import { getBarHeightAndYAttr } from './draw-utils';\nimport { getStringWidth } from './helpers';\nimport { STD_EASING, UNIT_ANIM_DUR, MARKER_LINE_ANIM_DUR, PATH_ANIM_DUR } from './animate';\nimport { DOT_OVERLAY_SIZE_INCR } from './constants';\n\n/*\n\n\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\n\n\n filter: url(#glow);\n fill: #fff;\n\n*/\n\nconst AXIS_TICK_LENGTH = 6;\nconst LABEL_MARGIN = 4;\nexport const FONT_SIZE = 10;\nconst BASE_LINE_COLOR = '#dadada';\nconst BASE_BG_COLOR = '#F7FAFC';\n\nfunction $(expr, con) {\n\treturn typeof expr === \"string\"? (con || document).querySelector(expr) : expr || null;\n}\n\nexport function createSVG(tag, o) {\n\tvar element = document.createElementNS(\"http://www.w3.org/2000/svg\", tag);\n\n\tfor (var i in o) {\n\t\tvar val = o[i];\n\n\t\tif (i === \"inside\") {\n\t\t\t$(val).appendChild(element);\n\t\t}\n\t\telse if (i === \"around\") {\n\t\t\tvar ref = $(val);\n\t\t\tref.parentNode.insertBefore(element, ref);\n\t\t\telement.appendChild(ref);\n\n\t\t} else if (i === \"styles\") {\n\t\t\tif(typeof val === \"object\") {\n\t\t\t\tObject.keys(val).map(prop => {\n\t\t\t\t\telement.style[prop] = val[prop];\n\t\t\t\t});\n\t\t\t}\n\t\t} else {\n\t\t\tif(i === \"className\") { i = \"class\"; }\n\t\t\tif(i === \"innerHTML\") {\n\t\t\t\telement['textContent'] = val;\n\t\t\t} else {\n\t\t\t\telement.setAttribute(i, val);\n\t\t\t}\n\t\t}\n\t}\n\n\treturn element;\n}\n\nfunction renderVerticalGradient(svgDefElem, gradientId) {\n\treturn createSVG('linearGradient', {\n\t\tinside: svgDefElem,\n\t\tid: gradientId,\n\t\tx1: 0,\n\t\tx2: 0,\n\t\ty1: 0,\n\t\ty2: 1\n\t});\n}\n\nfunction setGradientStop(gradElem, offset, color, opacity) {\n\treturn createSVG('stop', {\n\t\t'inside': gradElem,\n\t\t'style': `stop-color: ${color}`,\n\t\t'offset': offset,\n\t\t'stop-opacity': opacity\n\t});\n}\n\nexport function makeSVGContainer(parent, className, width, height) {\n\treturn createSVG('svg', {\n\t\tclassName: className,\n\t\tinside: parent,\n\t\twidth: width,\n\t\theight: height\n\t});\n}\n\nexport function makeSVGDefs(svgContainer) {\n\treturn createSVG('defs', {\n\t\tinside: svgContainer,\n\t});\n}\n\nexport function makeSVGGroup(parent, className, transform='') {\n\treturn createSVG('g', {\n\t\tclassName: className,\n\t\tinside: parent,\n\t\ttransform: transform\n\t});\n}\n\nexport function wrapInSVGGroup(elements, className='') {\n\tlet g = createSVG('g', {\n\t\tclassName: className\n\t});\n\telements.forEach(e => g.appendChild(e));\n\treturn g;\n}\n\nexport function makePath(pathStr, className='', stroke='none', fill='none') {\n\treturn createSVG('path', {\n\t\tclassName: className,\n\t\td: pathStr,\n\t\tstyles: {\n\t\t\tstroke: stroke,\n\t\t\tfill: fill\n\t\t}\n\t});\n}\n\nexport function makeGradient(svgDefElem, color, lighter = false) {\n\tlet gradientId ='path-fill-gradient' + '-' + color + '-' +(lighter ? 'lighter' : 'default');\n\tlet gradientDef = renderVerticalGradient(svgDefElem, gradientId);\n\tlet opacities = [1, 0.6, 0.2];\n\tif(lighter) {\n\t\topacities = [0.4, 0.2, 0];\n\t}\n\n\tsetGradientStop(gradientDef, \"0%\", color, opacities[0]);\n\tsetGradientStop(gradientDef, \"50%\", color, opacities[1]);\n\tsetGradientStop(gradientDef, \"100%\", color, opacities[2]);\n\n\treturn gradientId;\n}\n\nexport function makeHeatSquare(className, x, y, size, fill='none', data={}) {\n\tlet args = {\n\t\tclassName: className,\n\t\tx: x,\n\t\ty: y,\n\t\twidth: size,\n\t\theight: size,\n\t\tfill: fill\n\t};\n\n\tObject.keys(data).map(key => {\n\t\targs[key] = data[key];\n\t});\n\n\treturn createSVG(\"rect\", args);\n}\n\nexport function makeText(className, x, y, content) {\n\treturn createSVG('text', {\n\t\tclassName: className,\n\t\tx: x,\n\t\ty: y,\n\t\tdy: (FONT_SIZE / 2) + 'px',\n\t\t'font-size': FONT_SIZE + 'px',\n\t\tinnerHTML: content\n\t});\n}\n\nfunction makeVertLine(x, label, y1, y2, options={}) {\n\tif(!options.stroke) options.stroke = BASE_LINE_COLOR;\n\tlet l = createSVG('line', {\n\t\tclassName: 'line-vertical ' + options.className,\n\t\tx1: 0,\n\t\tx2: 0,\n\t\ty1: y1,\n\t\ty2: y2,\n\t\tstyles: {\n\t\t\tstroke: options.stroke\n\t\t}\n\t});\n\n\tlet text = createSVG('text', {\n\t\tx: 0,\n\t\ty: y1 > y2 ? y1 + LABEL_MARGIN : y1 - LABEL_MARGIN - FONT_SIZE,\n\t\tdy: FONT_SIZE + 'px',\n\t\t'font-size': FONT_SIZE + 'px',\n\t\t'text-anchor': 'middle',\n\t\tinnerHTML: label\n\t});\n\n\tlet line = createSVG('g', {\n\t\ttransform: `translate(${ x }, 0)`\n\t});\n\n\tline.appendChild(l);\n\tline.appendChild(text);\n\n\treturn line;\n}\n\nfunction makeHoriLine(y, label, x1, x2, options={}) {\n\tif(!options.stroke) options.stroke = BASE_LINE_COLOR;\n\tif(!options.lineType) options.lineType = '';\n\tlet className = 'line-horizontal ' + options.className +\n\t\t(options.lineType === \"dashed\" ? \"dashed\": \"\");\n\n\tlet l = createSVG('line', {\n\t\tclassName: className,\n\t\tx1: x1,\n\t\tx2: x2,\n\t\ty1: 0,\n\t\ty2: 0,\n\t\tstyles: {\n\t\t\tstroke: options.stroke\n\t\t}\n\t});\n\n\tlet text = createSVG('text', {\n\t\tx: x1 < x2 ? x1 - LABEL_MARGIN : x1 + LABEL_MARGIN,\n\t\ty: 0,\n\t\tdy: (FONT_SIZE / 2 - 2) + 'px',\n\t\t'font-size': FONT_SIZE + 'px',\n\t\t'text-anchor': x1 < x2 ? 'end' : 'start',\n\t\tinnerHTML: label+\"\"\n\t});\n\n\tlet line = createSVG('g', {\n\t\ttransform: `translate(0, ${y})`,\n\t\t'stroke-opacity': 1\n\t});\n\n\tif(text === 0 || text === '0') {\n\t\tline.style.stroke = \"rgba(27, 31, 35, 0.6)\";\n\t}\n\n\tline.appendChild(l);\n\tline.appendChild(text);\n\n\treturn line;\n}\n\nexport function yLine(y, label, width, options={}) {\n\tif(!options.pos) options.pos = 'left';\n\tif(!options.offset) options.offset = 0;\n\tif(!options.mode) options.mode = 'span';\n\tif(!options.stroke) options.stroke = BASE_LINE_COLOR;\n\tif(!options.className) options.className = '';\n\n\tlet x1 = -1 * AXIS_TICK_LENGTH;\n\tlet x2 = options.mode === 'span' ? width + AXIS_TICK_LENGTH : 0;\n\n\tif(options.mode === 'tick' && options.pos === 'right') {\n\t\tx1 = width + AXIS_TICK_LENGTH\n\t\tx2 = width;\n\t}\n\n\tlet offset = options.pos === 'left' ? -1 * options.offset : options.offset;\n\n\tx1 += options.offset;\n\tx2 += options.offset;\n\n\treturn makeHoriLine(y, label, x1, x2, {\n\t\tstroke: options.stroke,\n\t\tclassName: options.className,\n\t\tlineType: options.lineType\n\t});\n}\n\nexport function xLine(x, label, height, options={}) {\n\tif(!options.pos) options.pos = 'bottom';\n\tif(!options.offset) options.offset = 0;\n\tif(!options.mode) options.mode = 'span';\n\tif(!options.stroke) options.stroke = BASE_LINE_COLOR;\n\tif(!options.className) options.className = '';\n\n\t// Draw X axis line in span/tick mode with optional label\n\t// \ty2(span)\n\t// \t\t\t\t\t\t|\n\t// \t\t\t\t\t\t|\n\t//\t\t\t\tx line\t|\n\t//\t\t\t\t\t\t|\n\t// \t\t\t\t\t \t|\n\t// ---------------------+-- y2(tick)\n\t//\t\t\t\t\t\t|\n\t//\t\t\t\t\t\t\ty1\n\n\tlet y1 = height + AXIS_TICK_LENGTH;\n\tlet y2 = options.mode === 'span' ? -1 * AXIS_TICK_LENGTH : height;\n\n\tif(options.mode === 'tick' && options.pos === 'top') {\n\t\t// top axis ticks\n\t\ty1 = -1 * AXIS_TICK_LENGTH;\n\t\ty2 = 0;\n\t}\n\n\treturn makeVertLine(x, label, y1, y2, {\n\t\tstroke: options.stroke,\n\t\tclassName: options.className,\n\t\tlineType: options.lineType\n\t});\n}\n\nexport function yMarker(y, label, width, options={}) {\n\tlet labelSvg = createSVG('text', {\n\t\tclassName: 'chart-label',\n\t\tx: width - getStringWidth(label, 5) - LABEL_MARGIN,\n\t\ty: 0,\n\t\tdy: (FONT_SIZE / -2) + 'px',\n\t\t'font-size': FONT_SIZE + 'px',\n\t\t'text-anchor': 'start',\n\t\tinnerHTML: label+\"\"\n\t});\n\n\tlet line = makeHoriLine(y, '', 0, width, {\n\t\tstroke: options.stroke || BASE_LINE_COLOR,\n\t\tclassName: options.className || '',\n\t\tlineType: options.lineType\n\t});\n\n\tline.appendChild(labelSvg);\n\n\treturn line;\n}\n\nexport function yRegion(y1, y2, width, label) {\n\t// return a group\n\tlet height = y1 - y2;\n\n\tlet rect = createSVG('rect', {\n\t\tclassName: `bar mini`, // remove class\n\t\tstyles: {\n\t\t\tfill: `rgba(228, 234, 239, 0.49)`,\n\t\t\tstroke: BASE_LINE_COLOR,\n\t\t\t'stroke-dasharray': `${width}, ${height}`\n\t\t},\n\t\t// 'data-point-index': index,\n\t\tx: 0,\n\t\ty: 0,\n\t\twidth: width,\n\t\theight: height\n\t});\n\n\tlet labelSvg = createSVG('text', {\n\t\tclassName: 'chart-label',\n\t\tx: width - getStringWidth(label, 4.5) - LABEL_MARGIN,\n\t\ty: 0,\n\t\tdy: (FONT_SIZE / -2) + 'px',\n\t\t'font-size': FONT_SIZE + 'px',\n\t\t'text-anchor': 'start',\n\t\tinnerHTML: label+\"\"\n\t});\n\n\tlet region = createSVG('g', {\n\t\ttransform: `translate(0, ${y2})`\n\t});\n\n\tregion.appendChild(rect);\n\tregion.appendChild(labelSvg);\n\n\treturn region;\n}\n\nexport function datasetBar(x, yTop, width, color, label='', index=0, offset=0, meta={}) {\n\tlet [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine);\n\ty -= offset;\n\n\tlet rect = createSVG('rect', {\n\t\tclassName: `bar mini`,\n\t\tstyle: `fill: ${color}`,\n\t\t'data-point-index': index,\n\t\tx: x,\n\t\ty: y,\n\t\twidth: width,\n\t\theight: height || meta.minHeight // TODO: correct y for positive min height\n\t});\n\n\tif(!label && !label.length) {\n\t\treturn rect;\n\t} else {\n\t\trect.setAttribute('y', 0);\n\t\trect.setAttribute('x', 0);\n\t\tlet text = createSVG('text', {\n\t\t\tclassName: 'data-point-value',\n\t\t\tx: width/2,\n\t\t\ty: 0,\n\t\t\tdy: (FONT_SIZE / 2 * -1) + 'px',\n\t\t\t'font-size': FONT_SIZE + 'px',\n\t\t\t'text-anchor': 'middle',\n\t\t\tinnerHTML: label\n\t\t});\n\n\t\tlet group = createSVG('g', {\n\t\t\ttransform: `translate(${x}, ${y})`\n\t\t});\n\t\tgroup.appendChild(rect);\n\t\tgroup.appendChild(text);\n\n\t\treturn group;\n\t}\n}\n\nexport function datasetDot(x, y, radius, color, label='', index=0, meta={}) {\n\tlet dot = createSVG('circle', {\n\t\tstyle: `fill: ${color}`,\n\t\t'data-point-index': index,\n\t\tcx: x,\n\t\tcy: y,\n\t\tr: radius\n\t});\n\n\tif(!label && !label.length) {\n\t\treturn dot;\n\t} else {\n\t\tdot.setAttribute('cy', 0);\n\t\tdot.setAttribute('cx', 0);\n\n\t\tlet text = createSVG('text', {\n\t\t\tclassName: 'data-point-value',\n\t\t\tx: 0,\n\t\t\ty: 0,\n\t\t\tdy: (FONT_SIZE / 2 * -1 - radius) + 'px',\n\t\t\t'font-size': FONT_SIZE + 'px',\n\t\t\t'text-anchor': 'middle',\n\t\t\tinnerHTML: label\n\t\t});\n\n\t\tlet group = createSVG('g', {\n\t\t\ttransform: `translate(${x}, ${y})`\n\t\t});\n\t\tgroup.appendChild(dot);\n\t\tgroup.appendChild(text);\n\n\t\treturn group;\n\t}\n}\n\nexport function getPaths(xList, yList, color, options={}, meta={}) {\n\tlet pointsList = yList.map((y, i) => (xList[i] + ',' + y));\n\tlet pointsStr = pointsList.join(\"L\");\n\tlet path = makePath(\"M\"+pointsStr, 'line-graph-path', color);\n\n\t// HeatLine\n\tif(options.heatline) {\n\t\tlet gradient_id = makeGradient(meta.svgDefs, color);\n\t\tpath.style.stroke = `url(#${gradient_id})`;\n\t}\n\n\tlet paths = {\n\t\tpath: path\n\t}\n\n\t// Region\n\tif(options.regionFill) {\n\t\tlet gradient_id_region = makeGradient(meta.svgDefs, color, true);\n\n\t\t// TODO: use zeroLine OR minimum\n\t\tlet pathStr = \"M\" + `${xList[0]},${meta.zeroLine}L` + pointsStr + `L${xList.slice(-1)[0]},${meta.zeroLine}`;\n\t\tpaths.region = makePath(pathStr, `region-fill`, 'none', `url(#${gradient_id_region})`);\n\t}\n\n\treturn paths;\n}\n\nexport let makeOverlay = {\n\t'bar': (unit) => {\n\t\tlet transformValue;\n\t\tif(unit.nodeName !== 'rect') {\n\t\t\ttransformValue = unit.getAttribute('transform');\n\t\t\tunit = unit.childNodes[0];\n\t\t}\n\t\tlet overlay = unit.cloneNode();\n\t\toverlay.style.fill = '#000000';\n\t\toverlay.style.opacity = '0.4';\n\n\t\tif(transformValue) {\n\t\t\toverlay.setAttribute('transform', transformValue);\n\t\t}\n\t\treturn overlay;\n\t},\n\n\t'dot': (unit) => {\n\t\tlet transformValue;\n\t\tif(unit.nodeName !== 'circle') {\n\t\t\ttransformValue = unit.getAttribute('transform');\n\t\t\tunit = unit.childNodes[0];\n\t\t}\n\t\tlet overlay = unit.cloneNode();\n\t\tlet radius = unit.getAttribute('r');\n\t\toverlay.setAttribute('r', radius + DOT_OVERLAY_SIZE_INCR);\n\t\toverlay.style.fill = '#000000';\n\t\toverlay.style.opacity = '0.4';\n\n\t\tif(transformValue) {\n\t\t\toverlay.setAttribute('transform', transformValue);\n\t\t}\n\t\treturn overlay;\n\t}\n}\n\nexport let updateOverlay = {\n\t'bar': (unit, overlay) => {\n\t\tlet transformValue;\n\t\tif(unit.nodeName !== 'rect') {\n\t\t\ttransformValue = unit.getAttribute('transform');\n\t\t\tunit = unit.childNodes[0];\n\t\t}\n\t\tlet attributes = ['x', 'y', 'width', 'height'];\n\t\tObject.values(unit.attributes)\n\t\t.filter(attr => attributes.includes(attr.name) && attr.specified)\n\t\t.map(attr => {\n\t\t\toverlay.setAttribute(attr.name, attr.nodeValue);\n\t\t});\n\n\t\tif(transformValue) {\n\t\t\toverlay.setAttribute('transform', transformValue);\n\t\t}\n\t},\n\n\t'dot': (unit, overlay) => {\n\t\tlet transformValue;\n\t\tif(unit.nodeName !== 'circle') {\n\t\t\ttransformValue = unit.getAttribute('transform');\n\t\t\tunit = unit.childNodes[0];\n\t\t}\n\t\tlet attributes = ['cx', 'cy'];\n\t\tObject.values(unit.attributes)\n\t\t.filter(attr => attributes.includes(attr.name) && attr.specified)\n\t\t.map(attr => {\n\t\t\toverlay.setAttribute(attr.name, attr.nodeValue);\n\t\t});\n\n\t\tif(transformValue) {\n\t\t\toverlay.setAttribute('transform', transformValue);\n\t\t}\n\t}\n}\n\n","const PRESET_COLOR_MAP = {\n\t'light-blue': '#7cd6fd',\n\t'blue': '#5e64ff',\n\t'violet': '#743ee2',\n\t'red': '#ff5858',\n\t'orange': '#ffa00a',\n\t'yellow': '#feef72',\n\t'green': '#28a745',\n\t'light-green': '#98d85b',\n\t'purple': '#b554ff',\n\t'magenta': '#ffa3ef',\n\t'black': '#36114C',\n\t'grey': '#bdd3e6',\n\t'light-grey': '#f0f4f7',\n\t'dark-grey': '#b8c2cc'\n};\n\nexport const DEFAULT_COLORS = ['light-blue', 'blue', 'violet', 'red', 'orange',\n\t'yellow', 'green', 'light-green', 'purple', 'magenta'];\n\nfunction limitColor(r){\n\tif (r > 255) return 255;\n\telse if (r < 0) return 0;\n\treturn r;\n}\n\nexport function lightenDarkenColor(color, amt) {\n\tlet col = getColor(color);\n\tlet usePound = false;\n\tif (col[0] == \"#\") {\n\t\tcol = col.slice(1);\n\t\tusePound = true;\n\t}\n\tlet num = parseInt(col,16);\n\tlet r = limitColor((num >> 16) + amt);\n\tlet b = limitColor(((num >> 8) & 0x00FF) + amt);\n\tlet g = limitColor((num & 0x0000FF) + amt);\n\treturn (usePound?\"#\":\"\") + (g | (b << 8) | (r << 16)).toString(16);\n}\n\nexport function isValidColor(string) {\n\t// https://stackoverflow.com/a/8027444/6495043\n\treturn /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(string);\n}\n\nexport const getColor = (color) => {\n\treturn PRESET_COLOR_MAP[color] || color;\n};\n","import Chart from './chart';\n\nconst ALL_CHART_TYPES = ['line', 'scatter', 'bar', 'percentage', 'heatmap', 'pie'];\n\nconst COMPATIBLE_CHARTS = {\n\tbar: ['line', 'scatter', 'percentage', 'pie'],\n\tline: ['scatter', 'bar', 'percentage', 'pie'],\n\tpie: ['line', 'scatter', 'percentage', 'bar'],\n\tscatter: ['line', 'bar', 'percentage', 'pie'],\n\tpercentage: ['bar', 'line', 'scatter', 'pie'],\n\theatmap: []\n};\n\n// Needs structure as per only labels/datasets\nconst COLOR_COMPATIBLE_CHARTS = {\n\tbar: ['line', 'scatter'],\n\tline: ['scatter', 'bar'],\n\tpie: ['percentage'],\n\tscatter: ['line', 'bar'],\n\tpercentage: ['pie'],\n\theatmap: []\n};\n\nexport function getDifferentChart(type, current_type, args) {\n\tif(type === current_type) return;\n\n\tif(!ALL_CHART_TYPES.includes(type)) {\n\t\tconsole.error(`'${type}' is not a valid chart type.`);\n\t}\n\n\tif(!COMPATIBLE_CHARTS[current_type].includes(type)) {\n\t\tconsole.error(`'${current_type}' chart cannot be converted to a '${type}' chart.`);\n\t}\n\n\t// whether the new chart can use the existing colors\n\tconst useColor = COLOR_COMPATIBLE_CHARTS[current_type].includes(type);\n\n\t// Okay, this is anticlimactic\n\t// this function will need to actually be 'changeChartType(type)'\n\t// that will update only the required elements, but for now ...\n\treturn new Chart({\n\t\tparent: args.parent,\n\t\ttitle: args.title,\n\t\tdata: args.data,\n\t\ttype: type,\n\t\theight: args.height,\n\t\tcolors: useColor ? args.colors : undefined\n\t});\n}","// Leveraging SMIL Animations\n\nimport { REPLACE_ALL_NEW_DUR } from './animate';\n\nconst EASING = {\n\tease: \"0.25 0.1 0.25 1\",\n\tlinear: \"0 0 1 1\",\n\t// easein: \"0.42 0 1 1\",\n\teasein: \"0.1 0.8 0.2 1\",\n\teaseout: \"0 0 0.58 1\",\n\teaseinout: \"0.42 0 0.58 1\"\n};\n\nfunction animateSVGElement(element, props, dur, easingType=\"linear\", type=undefined, oldValues={}) {\n\n\tlet animElement = element.cloneNode(true);\n\tlet newElement = element.cloneNode(true);\n\n\tfor(var attributeName in props) {\n\t\tlet animateElement;\n\t\tif(attributeName === 'transform') {\n\t\t\tanimateElement = document.createElementNS(\"http://www.w3.org/2000/svg\", \"animateTransform\");\n\t\t} else {\n\t\t\tanimateElement = document.createElementNS(\"http://www.w3.org/2000/svg\", \"animate\");\n\t\t}\n\t\tlet currentValue = oldValues[attributeName] || element.getAttribute(attributeName);\n\t\tlet value = props[attributeName];\n\n\t\tlet animAttr = {\n\t\t\tattributeName: attributeName,\n\t\t\tfrom: currentValue,\n\t\t\tto: value,\n\t\t\tbegin: \"0s\",\n\t\t\tdur: dur/1000 + \"s\",\n\t\t\tvalues: currentValue + \";\" + value,\n\t\t\tkeySplines: EASING[easingType],\n\t\t\tkeyTimes: \"0;1\",\n\t\t\tcalcMode: \"spline\",\n\t\t\tfill: 'freeze'\n\t\t};\n\n\t\tif(type) {\n\t\t\tanimAttr[\"type\"] = type;\n\t\t}\n\n\t\tfor (var i in animAttr) {\n\t\t\tanimateElement.setAttribute(i, animAttr[i]);\n\t\t}\n\n\t\tanimElement.appendChild(animateElement);\n\n\t\tif(type) {\n\t\t\tnewElement.setAttribute(attributeName, `translate(${value})`);\n\t\t} else {\n\t\t\tnewElement.setAttribute(attributeName, value);\n\t\t}\n\t}\n\n\treturn [animElement, newElement];\n}\n\nexport function transform(element, style) { // eslint-disable-line no-unused-vars\n\telement.style.transform = style;\n\telement.style.webkitTransform = style;\n\telement.style.msTransform = style;\n\telement.style.mozTransform = style;\n\telement.style.oTransform = style;\n}\n\nfunction animateSVG(svgContainer, elements) {\n\tlet newElements = [];\n\tlet animElements = [];\n\n\telements.map(element => {\n\t\tlet unit = element[0];\n\t\tlet parent = unit.parentNode;\n\n\t\tlet animElement, newElement;\n\n\t\telement[0] = unit;\n\t\t[animElement, newElement] = animateSVGElement(...element);\n\n\t\tnewElements.push(newElement);\n\t\tanimElements.push([animElement, parent]);\n\n\t\tparent.replaceChild(animElement, unit);\n\t});\n\n\tlet animSvg = svgContainer.cloneNode(true);\n\n\tanimElements.map((animElement, i) => {\n\t\tanimElement[1].replaceChild(newElements[i], animElement[0]);\n\t\telements[i][0] = newElements[i];\n\t});\n\n\treturn animSvg;\n}\n\nexport function runSMILAnimation(parent, svgElement, elementsToAnimate) {\n\tif(elementsToAnimate.length === 0) return;\n\n\tlet animSvgElement = animateSVG(svgElement, elementsToAnimate);\n\tif(svgElement.parentNode == parent) {\n\t\tparent.removeChild(svgElement);\n\t\tparent.appendChild(animSvgElement);\n\n\t}\n\n\t// Replace the new svgElement (data has already been replaced)\n\tsetTimeout(() => {\n\t\tif(animSvgElement.parentNode == parent) {\n\t\t\tparent.removeChild(animSvgElement);\n\t\t\tparent.appendChild(svgElement);\n\t\t}\n\t}, REPLACE_ALL_NEW_DUR);\n}\n","import { floatTwo, fillArray } from '../utils/helpers';\nimport { DEFAULT_AXIS_CHART_TYPE, AXIS_DATASET_CHART_TYPES } from '../utils/constants';\n\nexport function dataPrep(data, type) {\n\tdata.labels = data.labels || [];\n\n\tlet datasetLength = data.labels.length;\n\n\t// Datasets\n\tlet datasets = data.datasets;\n\tlet zeroArray = new Array(datasetLength).fill(0);\n\tif(!datasets) {\n\t\t// default\n\t\tdatasets = [{\n\t\t\tvalues: zeroArray\n\t\t}];\n\t}\n\n\tdatasets.map((d, i)=> {\n\t\t// Set values\n\t\tif(!d.values) {\n\t\t\td.values = zeroArray;\n\t\t} else {\n\t\t\t// Check for non values\n\t\t\tlet vals = d.values;\n\t\t\tvals = vals.map(val => (!isNaN(val) ? val : 0));\n\n\t\t\t// Trim or extend\n\t\t\tif(vals.length > datasetLength) {\n\t\t\t\tvals = vals.slice(0, datasetLength);\n\t\t\t} else {\n\t\t\t\tvals = fillArray(vals, datasetLength - vals.length, 0);\n\t\t\t}\n\t\t}\n\n\t\t// Set labels\n\t\t//\n\n\t\t// Set type\n\t\tif(!d.chartType ) {\n\t\t\tif(!AXIS_DATASET_CHART_TYPES.includes(type)) type === DEFAULT_AXIS_CHART_TYPE;\n\t\t\td.chartType = type;\n\t\t}\n\n\t});\n\n\t// Markers\n\n\t// Regions\n\t// data.yRegions = data.yRegions || [];\n\tif(data.yRegions) {\n\t\tdata.yRegions.map(d => {\n\t\t\tif(d.end < d.start) {\n\t\t\t\t[d.start, d.end] = [d.end, d.start];\n\t\t\t}\n\t\t});\n\t}\n\n\treturn data;\n}\n\nexport function zeroDataPrep(realData) {\n\tlet datasetLength = realData.labels.length;\n\tlet zeroArray = new Array(datasetLength).fill(0);\n\n\tlet zeroData = {\n\t\tlabels: realData.labels.slice(0, -1),\n\t\tdatasets: realData.datasets.map(d => {\n\t\t\treturn {\n\t\t\t\tname: '',\n\t\t\t\tvalues: zeroArray.slice(0, -1),\n\t\t\t\tchartType: d.chartType\n\t\t\t}\n\t\t}),\n\t\tyRegions: [\n\t\t\t{\n\t\t\t\tstart: 0,\n\t\t\t\tend: 0,\n\t\t\t\tlabel: ''\n\t\t\t}\n\t\t],\n\t\tyMarkers: [\n\t\t\t{\n\t\t\t\tvalue: 0,\n\t\t\t\tlabel: ''\n\t\t\t}\n\t\t]\n\t};\n\n\treturn zeroData;\n}","import { makeSVGGroup } from '../utils/draw';\nimport { xLine, yLine, yMarker, yRegion, datasetBar, datasetDot, getPaths } from '../utils/draw';\nimport { equilizeNoOfElements } from '../utils/draw-utils';\nimport { translateHoriLine, translateVertLine, animateRegion, animateBar, animateDot, animatePath } from '../utils/animate';\n\nclass ChartComponent {\n\tconstructor({\n\t\tlayerClass = '',\n\t\tlayerTransform = '',\n\t\tconstants,\n\n\t\tgetData,\n\t\tmakeElements,\n\t\tanimateElements\n\t}) {\n\t\tthis.layerTransform = layerTransform;\n\t\tthis.constants = constants;\n\n\t\tthis.makeElements = makeElements;\n\t\tthis.getData = getData;\n\n\t\tthis.animateElements = animateElements;\n\n\t\tthis.store = [];\n\n\t\tthis.layerClass = layerClass;\n\t\tthis.layerClass = typeof(this.layerClass) === 'function'\n\t\t\t? this.layerClass() : this.layerClass;\n\n\t\tthis.refresh();\n\t}\n\n\trefresh(data) {\n\t\tthis.data = data || this.getData();\n\t}\n\n\tsetup(parent) {\n\t\tthis.layer = makeSVGGroup(parent, this.layerClass, this.layerTransform);\n\t}\n\n\tmake() {\n\t\tthis.render(this.data);\n\t\tthis.oldData = this.data;\n\t}\n\n\trender(data) {\n\t\tthis.store = this.makeElements(data);\n\n\t\tthis.layer.textContent = '';\n\t\tthis.store.forEach(element => {\n\t\t\tthis.layer.appendChild(element);\n\t\t});\n\t}\n\n\tupdate(animate = true) {\n\t\tthis.refresh();\n\t\tlet animateElements = []\n\t\tif(animate) {\n\t\t\tanimateElements = this.animateElements(this.data);\n\t\t}\n\t\treturn animateElements;\n\t}\n}\n\nlet componentConfigs = {\n\tyAxis: {\n\t\tlayerClass: 'y axis',\n\t\tmakeElements(data) {\n\t\t\treturn data.positions.map((position, i) =>\n\t\t\t\tyLine(position, data.labels[i], this.constants.width,\n\t\t\t\t\t{mode: this.constants.mode, pos: this.constants.pos})\n\t\t\t);\n\t\t},\n\n\t\tanimateElements(newData) {\n\t\t\tlet newPos = newData.positions;\n\t\t\tlet newLabels = newData.labels;\n\t\t\tlet oldPos = this.oldData.positions;\n\t\t\tlet oldLabels = this.oldData.labels;\n\n\t\t\t[oldPos, newPos] = equilizeNoOfElements(oldPos, newPos);\n\t\t\t[oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels);\n\n\t\t\tthis.render({\n\t\t\t\tpositions: oldPos,\n\t\t\t\tlabels: newLabels\n\t\t\t});\n\n\t\t\treturn this.store.map((line, i) => {\n\t\t\t\treturn translateHoriLine(\n\t\t\t\t\tline, newPos[i], oldPos[i]\n\t\t\t\t);\n\t\t\t});\n\t\t}\n\t},\n\n\txAxis: {\n\t\tlayerClass: 'x axis',\n\t\tmakeElements(data) {\n\t\t\treturn data.positions.map((position, i) =>\n\t\t\t\txLine(position, data.labels[i], this.constants.height,\n\t\t\t\t\t{mode: this.constants.mode, pos: this.constants.pos})\n\t\t\t);\n\t\t},\n\n\t\tanimateElements(newData) {\n\t\t\tlet newPos = newData.positions;\n\t\t\tlet newLabels = newData.labels;\n\t\t\tlet oldPos = this.oldData.positions;\n\t\t\tlet oldLabels = this.oldData.labels;\n\n\t\t\t[oldPos, newPos] = equilizeNoOfElements(oldPos, newPos);\n\t\t\t[oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels);\n\n\t\t\tthis.render({\n\t\t\t\tpositions: oldPos,\n\t\t\t\tlabels: newLabels\n\t\t\t});\n\n\t\t\treturn this.store.map((line, i) => {\n\t\t\t\treturn translateVertLine(\n\t\t\t\t\tline, newPos[i], oldPos[i]\n\t\t\t\t);\n\t\t\t});\n\t\t}\n\t},\n\n\tyMarkers: {\n\t\tlayerClass: 'y-markers',\n\t\tmakeElements(data) {\n\t\t\treturn data.map(marker =>\n\t\t\t\tyMarker(marker.position, marker.label, this.constants.width,\n\t\t\t\t\t{pos:'right', mode: 'span', lineType: 'dashed'})\n\t\t\t);\n\t\t},\n\t\tanimateElements(newData) {\n\t\t\t[this.oldData, newData] = equilizeNoOfElements(this.oldData, newData);\n\n\t\t\tlet newPos = newData.map(d => d.position);\n\t\t\tlet newLabels = newData.map(d => d.label);\n\n\t\t\tlet oldPos = this.oldData.map(d => d.position);\n\t\t\tlet oldLabels = this.oldData.map(d => d.label);\n\n\t\t\tthis.render(oldPos.map((pos, i) => {\n\t\t\t\treturn {\n\t\t\t\t\tposition: oldPos[i],\n\t\t\t\t\tlabel: newLabels[i]\n\t\t\t\t}\n\t\t\t}));\n\n\t\t\treturn this.store.map((line, i) => {\n\t\t\t\treturn translateHoriLine(\n\t\t\t\t\tline, newPos[i], oldPos[i]\n\t\t\t\t);\n\t\t\t});\n\t\t}\n\t},\n\n\tyRegions: {\n\t\tlayerClass: 'y-regions',\n\t\tmakeElements(data) {\n\t\t\treturn data.map(region =>\n\t\t\t\tyRegion(region.start, region.end, this.constants.width,\n\t\t\t\t\tregion.label)\n\t\t\t);\n\t\t},\n\t\tanimateElements(newData) {\n\t\t\t[this.oldData, newData] = equilizeNoOfElements(this.oldData, newData);\n\n\t\t\tlet newPos = newData.map(d => d.end);\n\t\t\tlet newLabels = newData.map(d => d.label);\n\t\t\tlet newStarts = newData.map(d => d.start);\n\n\t\t\tlet oldPos = this.oldData.map(d => d.end);\n\t\t\tlet oldLabels = this.oldData.map(d => d.label);\n\t\t\tlet oldStarts = this.oldData.map(d => d.start);\n\n\t\t\tthis.render(oldPos.map((pos, i) => {\n\t\t\t\treturn {\n\t\t\t\t\tstart: oldStarts[i],\n\t\t\t\t\tend: oldPos[i],\n\t\t\t\t\tlabel: newLabels[i]\n\t\t\t\t}\n\t\t\t}));\n\n\t\t\tlet animateElements = [];\n\n\t\t\tthis.store.map((rectGroup, i) => {\n\t\t\t\tanimateElements = animateElements.concat(animateRegion(\n\t\t\t\t\trectGroup, newStarts[i], newPos[i], oldPos[i]\n\t\t\t\t));\n\t\t\t});\n\n\t\t\treturn animateElements;\n\t\t}\n\t},\n\n\tbarGraph: {\n\t\tlayerClass: function() { return 'dataset-units dataset-bars dataset-' + this.constants.index; },\n\t\tmakeElements(data) {\n\t\t\tlet c = this.constants;\n\t\t\tthis.unitType = 'bar';\n\t\t\treturn data.yPositions.map((y, j) => {\n\t\t\t\treturn datasetBar(\n\t\t\t\t\tdata.xPositions[j],\n\t\t\t\t\ty,\n\t\t\t\t\tdata.barWidth,\n\t\t\t\t\tc.color,\n\t\t\t\t\t(c.valuesOverPoints ? (c.stacked ? data.cumulativeYs[j] : data.values[j]) : ''),\n\t\t\t\t\tj,\n\t\t\t\t\ty - (c.stacked ? data.cumulativeYPos[j] : y),\n\t\t\t\t\t{\n\t\t\t\t\t\tzeroLine: data.zeroLine,\n\t\t\t\t\t\tbarsWidth: data.barsWidth,\n\t\t\t\t\t\tminHeight: c.minHeight\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t});\n\t\t},\n\t\tanimateElements(newData) {\n\t\t\tlet c = this.constants;\n\n\t\t\tlet newXPos = newData.xPositions;\n\t\t\tlet newYPos = newData.yPositions;\n\t\t\tlet newCYPos = newData.cumulativeYPos;\n\t\t\tlet newValues = newData.values;\n\t\t\tlet newCYs = newData.cumulativeYs;\n\n\t\t\tlet oldXPos = this.oldData.xPositions;\n\t\t\tlet oldYPos = this.oldData.yPositions;\n\t\t\tlet oldCYPos = this.oldData.cumulativeYPos;\n\t\t\tlet oldValues = this.oldData.values;\n\t\t\tlet oldCYs = this.oldData.cumulativeYs;\n\n\t\t\t[oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos);\n\t\t\t[oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos);\n\t\t\t[oldCYPos, newCYPos] = equilizeNoOfElements(oldCYPos, newCYPos);\n\t\t\t[oldValues, newValues] = equilizeNoOfElements(oldValues, newValues);\n\t\t\t[oldCYs, newCYs] = equilizeNoOfElements(oldCYs, newCYs);\n\n\t\t\tthis.render({\n\t\t\t\txPositions: oldXPos,\n\t\t\t\tyPositions: oldYPos,\n\t\t\t\tcumulativeYPos: oldCYPos,\n\n\t\t\t\tvalues: newValues,\n\t\t\t\tcumulativeYs: newCYs,\n\n\t\t\t\tzeroLine: this.oldData.zeroLine,\n\t\t\t\tbarsWidth: this.oldData.barsWidth,\n\t\t\t\tbarWidth: this.oldData.barWidth,\n\t\t\t});\n\n\t\t\tlet animateElements = [];\n\n\t\t\tthis.store.map((bar, i) => {\n\t\t\t\tanimateElements = animateElements.concat(animateBar(\n\t\t\t\t\tbar, newXPos[i], newYPos[i], newData.barWidth, c.index,\n\t\t\t\t\t\t{zeroLine: newData.zeroLine}\n\t\t\t\t));\n\t\t\t});\n\n\t\t\treturn animateElements;\n\t\t}\n\t},\n\n\tlineGraph: {\n\t\tlayerClass: function() { return 'dataset-units dataset-line dataset-' + this.constants.index; },\n\t\tmakeElements(data) {\n\t\t\tlet c = this.constants;\n\t\t\tthis.unitType = 'dot';\n\n\t\t\tthis.paths = getPaths(\n\t\t\t\tdata.xPositions,\n\t\t\t\tdata.yPositions,\n\t\t\t\tc.color,\n\t\t\t\t{\n\t\t\t\t\theatline: c.heatline,\n\t\t\t\t\tregionFill: c.regionFill\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tsvgDefs: c.svgDefs,\n\t\t\t\t\tzeroLine: data.zeroLine\n\t\t\t\t}\n\t\t\t)\n\n\t\t\tthis.dots = []\n\n\t\t\tif(!c.hideDots) {\n\t\t\t\tthis.dots = data.yPositions.map((y, j) => {\n\t\t\t\t\treturn datasetDot(\n\t\t\t\t\t\tdata.xPositions[j],\n\t\t\t\t\t\ty,\n\t\t\t\t\t\tdata.radius,\n\t\t\t\t\t\tc.color,\n\t\t\t\t\t\t(c.valuesOverPoints ? data.values[j] : ''),\n\t\t\t\t\t\tj\n\t\t\t\t\t)\n\t\t\t\t});\n\t\t\t}\n\n\t\t\treturn Object.values(this.paths).concat(this.dots);\n\t\t\t// return this.dots;\n\t\t},\n\t\tanimateElements(newData) {\n\t\t\tlet c = this.constants;\n\n\t\t\tlet newXPos = newData.xPositions;\n\t\t\tlet newYPos = newData.yPositions;\n\t\t\tlet newValues = newData.values;\n\n\n\t\t\tlet oldXPos = this.oldData.xPositions;\n\t\t\tlet oldYPos = this.oldData.yPositions;\n\t\t\tlet oldValues = this.oldData.values;\n\n\t\t\t[oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos);\n\t\t\t[oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos);\n\t\t\t[oldValues, newValues] = equilizeNoOfElements(oldValues, newValues);\n\n\t\t\tthis.render({\n\t\t\t\txPositions: oldXPos,\n\t\t\t\tyPositions: oldYPos,\n\t\t\t\tvalues: newValues,\n\n\t\t\t\tzeroLine: this.oldData.zeroLine,\n\t\t\t\tradius: this.oldData.radius,\n\t\t\t});\n\n\t\t\tlet animateElements = [];\n\n\t\t\tanimateElements = animateElements.concat(animatePath(\n\t\t\t\tthis.paths, newXPos, newYPos, newData.zeroLine));\n\n\t\t\tif(this.dots.length) {\n\t\t\t\tthis.dots.map((dot, i) => {\n\t\t\t\t\tanimateElements = animateElements.concat(animateDot(\n\t\t\t\t\t\tdot, newXPos[i], newYPos[i]));\n\t\t\t\t});\n\t\t\t}\n\n\t\t\treturn animateElements;\n\t\t}\n\t}\n}\n\nexport function getComponent(name, constants, getData) {\n\tlet keys = Object.keys(componentConfigs).filter(k => name.includes(k));\n\tlet config = componentConfigs[keys[0]];\n\tObject.assign(config, {\n\t\tconstants: constants,\n\t\tgetData: getData\n\t})\n\treturn new ChartComponent(config);\n}\n","import { floatTwo } from './helpers';\n\nfunction normalize(x) {\n\t// Calculates mantissa and exponent of a number\n\t// Returns normalized number and exponent\n\t// https://stackoverflow.com/q/9383593/6495043\n\n\tif(x===0) {\n\t\treturn [0, 0];\n\t}\n\tif(isNaN(x)) {\n\t\treturn {mantissa: -6755399441055744, exponent: 972};\n\t}\n\tvar sig = x > 0 ? 1 : -1;\n\tif(!isFinite(x)) {\n\t\treturn {mantissa: sig * 4503599627370496, exponent: 972};\n\t}\n\n\tx = Math.abs(x);\n\tvar exp = Math.floor(Math.log10(x));\n\tvar man = x/Math.pow(10, exp);\n\n\treturn [sig * man, exp];\n}\n\nfunction getChartRangeIntervals(max, min=0) {\n\tlet upperBound = Math.ceil(max);\n\tlet lowerBound = Math.floor(min);\n\tlet range = upperBound - lowerBound;\n\n\tlet noOfParts = range;\n\tlet partSize = 1;\n\n\t// To avoid too many partitions\n\tif(range > 5) {\n\t\tif(range % 2 !== 0) {\n\t\t\tupperBound++;\n\t\t\t// Recalc range\n\t\t\trange = upperBound - lowerBound;\n\t\t}\n\t\tnoOfParts = range/2;\n\t\tpartSize = 2;\n\t}\n\n\t// Special case: 1 and 2\n\tif(range <= 2) {\n\t\tnoOfParts = 4;\n\t\tpartSize = range/noOfParts;\n\t}\n\n\t// Special case: 0\n\tif(range === 0) {\n\t\tnoOfParts = 5;\n\t\tpartSize = 1;\n\t}\n\n\tlet intervals = [];\n\tfor(var i = 0; i <= noOfParts; i++){\n\t\tintervals.push(lowerBound + partSize * i);\n\t}\n\treturn intervals;\n}\n\nfunction getChartIntervals(maxValue, minValue=0) {\n\tlet [normalMaxValue, exponent] = normalize(maxValue);\n\tlet normalMinValue = minValue ? minValue/Math.pow(10, exponent): 0;\n\n\t// Allow only 7 significant digits\n\tnormalMaxValue = normalMaxValue.toFixed(6);\n\n\tlet intervals = getChartRangeIntervals(normalMaxValue, normalMinValue);\n\tintervals = intervals.map(value => value * Math.pow(10, exponent));\n\treturn intervals;\n}\n\nexport function calcChartIntervals(values, withMinimum=false) {\n\t//*** Where the magic happens ***\n\n\t// Calculates best-fit y intervals from given values\n\t// and returns the interval array\n\n\tlet maxValue = Math.max(...values);\n\tlet minValue = Math.min(...values);\n\n\t// Exponent to be used for pretty print\n\tlet exponent = 0, intervals = []; // eslint-disable-line no-unused-vars\n\n\tfunction getPositiveFirstIntervals(maxValue, absMinValue) {\n\t\tlet intervals = getChartIntervals(maxValue);\n\n\t\tlet intervalSize = intervals[1] - intervals[0];\n\n\t\t// Then unshift the negative values\n\t\tlet value = 0;\n\t\tfor(var i = 1; value < absMinValue; i++) {\n\t\t\tvalue += intervalSize;\n\t\t\tintervals.unshift((-1) * value);\n\t\t}\n\t\treturn intervals;\n\t}\n\n\t// CASE I: Both non-negative\n\n\tif(maxValue >= 0 && minValue >= 0) {\n\t\texponent = normalize(maxValue)[1];\n\t\tif(!withMinimum) {\n\t\t\tintervals = getChartIntervals(maxValue);\n\t\t} else {\n\t\t\tintervals = getChartIntervals(maxValue, minValue);\n\t\t}\n\t}\n\n\t// CASE II: Only minValue negative\n\n\telse if(maxValue > 0 && minValue < 0) {\n\t\t// `withMinimum` irrelevant in this case,\n\t\t// We'll be handling both sides of zero separately\n\t\t// (both starting from zero)\n\t\t// Because ceil() and floor() behave differently\n\t\t// in those two regions\n\n\t\tlet absMinValue = Math.abs(minValue);\n\n\t\tif(maxValue >= absMinValue) {\n\t\t\texponent = normalize(maxValue)[1];\n\t\t\tintervals = getPositiveFirstIntervals(maxValue, absMinValue);\n\t\t} else {\n\t\t\t// Mirror: maxValue => absMinValue, then change sign\n\t\t\texponent = normalize(absMinValue)[1];\n\t\t\tlet posIntervals = getPositiveFirstIntervals(absMinValue, maxValue);\n\t\t\tintervals = posIntervals.map(d => d * (-1));\n\t\t}\n\n\t}\n\n\t// CASE III: Both non-positive\n\n\telse if(maxValue <= 0 && minValue <= 0) {\n\t\t// Mirrored Case I:\n\t\t// Work with positives, then reverse the sign and array\n\n\t\tlet pseudoMaxValue = Math.abs(minValue);\n\t\tlet pseudoMinValue = Math.abs(maxValue);\n\n\t\texponent = normalize(pseudoMaxValue)[1];\n\t\tif(!withMinimum) {\n\t\t\tintervals = getChartIntervals(pseudoMaxValue);\n\t\t} else {\n\t\t\tintervals = getChartIntervals(pseudoMaxValue, pseudoMinValue);\n\t\t}\n\n\t\tintervals = intervals.reverse().map(d => d * (-1));\n\t}\n\n\treturn intervals;\n}\n\nexport function getZeroIndex(yPts) {\n\tlet zeroIndex;\n\tlet interval = getIntervalSize(yPts);\n\tif(yPts.indexOf(0) >= 0) {\n\t\t// the range has a given zero\n\t\t// zero-line on the chart\n\t\tzeroIndex = yPts.indexOf(0);\n\t} else if(yPts[0] > 0) {\n\t\t// Minimum value is positive\n\t\t// zero-line is off the chart: below\n\t\tlet min = yPts[0];\n\t\tzeroIndex = (-1) * min / interval;\n\t} else {\n\t\t// Maximum value is negative\n\t\t// zero-line is off the chart: above\n\t\tlet max = yPts[yPts.length - 1];\n\t\tzeroIndex = (-1) * max / interval + (yPts.length - 1);\n\t}\n\treturn zeroIndex;\n}\n\nexport function getRealIntervals(max, noOfIntervals, min = 0, asc = 1) {\n\tlet range = max - min;\n\tlet part = range * 1.0 / noOfIntervals;\n\tlet intervals = [];\n\n\tfor(var i = 0; i <= noOfIntervals; i++) {\n\t\tintervals.push(min + part * i);\n\t}\n\n\treturn asc ? intervals : intervals.reverse();\n}\n\nexport function getIntervalSize(orderedArray) {\n\treturn orderedArray[1] - orderedArray[0];\n}\n\nexport function getValueRange(orderedArray) {\n\treturn orderedArray[orderedArray.length-1] - orderedArray[0];\n}\n\nexport function scale(val, yAxis) {\n\treturn floatTwo(yAxis.zeroLine - val * yAxis.scaleMultiplier)\n}\n\nexport function calcDistribution(values, distributionSize) {\n\t// Assume non-negative values,\n\t// implying distribution minimum at zero\n\n\tlet dataMaxValue = Math.max(...values);\n\n\tlet distributionStep = 1 / (distributionSize - 1);\n\tlet distribution = [];\n\n\tfor(var i = 0; i < distributionSize; i++) {\n\t\tlet checkpoint = dataMaxValue * (distributionStep * i);\n\t\tdistribution.push(checkpoint);\n\t}\n\n\treturn distribution;\n}\n\nexport function getMaxCheckpoint(value, distribution) {\n\treturn distribution.filter(d => d < value).length;\n}\n","// Playing around with dates\n\n// https://stackoverflow.com/a/11252167/6495043\nfunction treatAsUtc(dateStr) {\n\tlet result = new Date(dateStr);\n\tresult.setMinutes(result.getMinutes() - result.getTimezoneOffset());\n\treturn result;\n}\n\nexport function getDdMmYyyy(date) {\n\tlet dd = date.getDate();\n\tlet mm = date.getMonth() + 1; // getMonth() is zero-based\n\treturn [\n\t\t(dd>9 ? '' : '0') + dd,\n\t\t(mm>9 ? '' : '0') + mm,\n\t\tdate.getFullYear()\n\t].join('-');\n}\n\nexport function getWeeksBetween(startDateStr, endDateStr) {\n\treturn Math.ceil(getDaysBetween(startDateStr, endDateStr) / 7);\n}\n\nexport function getDaysBetween(startDateStr, endDateStr) {\n\tlet millisecondsPerDay = 24 * 60 * 60 * 1000;\n\treturn (treatAsUtc(endDateStr) - treatAsUtc(startDateStr)) / millisecondsPerDay;\n}\n\n// mutates\nexport function addDays(date, numberOfDays) {\n\tdate.setDate(date.getDate() + numberOfDays);\n}\n\n// export function getMonthName() {}\n","import '../scss/charts.scss';\n\nimport MultiAxisChart from './charts/MultiAxisChart';\nimport PercentageChart from './charts/PercentageChart';\nimport PieChart from './charts/PieChart';\nimport Heatmap from './charts/Heatmap';\nimport AxisChart from './charts/AxisChart';\n\n// if (ENV !== 'production') {\n// \t// Enable LiveReload\n// \tdocument.write(\n// \t\t'