diff --git a/.eslintrc b/.eslintrc
index a956ffdd47..d7cd742651 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -120,6 +120,7 @@
"get_url_arg": true,
"QUnit": true,
"JsBarcode": true,
- "L": true
+ "L": true,
+ "Chart": true
}
}
diff --git a/frappe/public/build.json b/frappe/public/build.json
index 7e02a8fe16..097a6f043a 100755
--- a/frappe/public/build.json
+++ b/frappe/public/build.json
@@ -119,8 +119,7 @@
"public/css/desktop.css",
"public/css/form.css",
"public/css/mobile.css",
- "public/css/kanban.css",
- "public/css/charts.css"
+ "public/css/kanban.css"
],
"css/frappe-rtl.css": [
"public/css/bootstrap-rtl.css",
@@ -142,6 +141,7 @@
"public/js/frappe/translate.js",
"public/js/lib/datepicker/datepicker.min.js",
"public/js/lib/datepicker/locale-all.js",
+ "public/js/lib/frappe-charts/frappe-charts.min.js",
"public/js/lib/jquery.jrumble.min.js",
"public/js/lib/webcam.min.js",
"public/js/lib/leaflet/leaflet.js",
@@ -240,7 +240,6 @@
"public/js/frappe/desk.js",
"public/js/frappe/query_string.js",
- "public/js/frappe/ui/charts.js",
"public/js/frappe/ui/comment.js",
"public/js/frappe/misc/rating_icons.html",
diff --git a/frappe/public/css/charts.css b/frappe/public/css/charts.css
deleted file mode 100644
index f5d279568a..0000000000
--- a/frappe/public/css/charts.css
+++ /dev/null
@@ -1,284 +0,0 @@
-/* charts */
-.chart-container .graph-focus-margin {
- margin: 0px 5%;
-}
-.chart-container .graphics {
- margin-top: 10px;
- padding-top: 10px;
- padding-bottom: 10px;
- position: relative;
-}
-.chart-container .graph-stats-group {
- display: flex;
- justify-content: space-around;
- flex: 1;
-}
-.chart-container .graph-stats-container {
- display: flex;
- justify-content: space-around;
- 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 {
- font-size: 10px;
- fill: #555b51;
-}
-.chart-container .axis line,
-.chart-container .chart-label line {
- stroke: rgba(27, 31, 35, 0.2);
-}
-.chart-container .percentage-graph .progress {
- margin-bottom: 0px;
-}
-.chart-container .data-points circle {
- stroke: #fff;
- stroke-width: 2;
-}
-.chart-container .data-points path {
- fill: none;
- stroke-opacity: 1;
- stroke-width: 2px;
-}
-.chart-container line.dashed {
- stroke-dasharray: 5,3;
-}
-.chart-container .tick.x-axis-label {
- display: block;
-}
-.chart-container .tick .specific-value {
- text-anchor: start;
-}
-.chart-container .tick .y-value-text {
- text-anchor: end;
-}
-.chart-container .tick .x-value-text {
- text-anchor: middle;
-}
-.graph-svg-tip {
- position: absolute;
- z-index: 99999;
- padding: 10px;
- font-size: 12px;
- color: #959da5;
- text-align: center;
- background: rgba(0, 0, 0, 0.8);
- border-radius: 3px;
-}
-.graph-svg-tip.comparison {
- padding: 0;
- text-align: left;
- pointer-events: none;
-}
-.graph-svg-tip.comparison .title {
- display: block;
- padding: 10px;
- margin: 0;
- font-weight: 600;
- line-height: 1;
- pointer-events: none;
-}
-.graph-svg-tip.comparison ul {
- margin: 0;
- white-space: nowrap;
- list-style: none;
-}
-.graph-svg-tip.comparison li {
- display: inline-block;
- padding: 5px 10px;
-}
-.graph-svg-tip ul,
-.graph-svg-tip ol {
- padding-left: 0;
- display: flex;
-}
-.graph-svg-tip ul.data-point-list li {
- min-width: 90px;
- flex: 1;
-}
-.graph-svg-tip strong {
- color: #dfe2e5;
-}
-.graph-svg-tip .svg-pointer {
- position: absolute;
- bottom: -10px;
- left: 50%;
- width: 5px;
- height: 5px;
- margin: 0 0 0 -5px;
- content: " ";
- border: 5px solid transparent;
- border-top-color: rgba(0, 0, 0, 0.8);
-}
-.stroke.grey {
- stroke: #F0F4F7;
-}
-.stroke.blue {
- stroke: #5e64ff;
-}
-.stroke.red {
- stroke: #ff5858;
-}
-.stroke.light-green {
- stroke: #98d85b;
-}
-.stroke.lightgreen {
- stroke: #98d85b;
-}
-.stroke.green {
- stroke: #28a745;
-}
-.stroke.orange {
- stroke: #ffa00a;
-}
-.stroke.purple {
- stroke: #743ee2;
-}
-.stroke.darkgrey {
- stroke: #b8c2cc;
-}
-.stroke.black {
- stroke: #36414C;
-}
-.stroke.yellow {
- stroke: #FEEF72;
-}
-.stroke.light-blue {
- stroke: #7CD6FD;
-}
-.stroke.lightblue {
- stroke: #7CD6FD;
-}
-.fill.grey {
- fill: #F0F4F7;
-}
-.fill.blue {
- fill: #5e64ff;
-}
-.fill.red {
- fill: #ff5858;
-}
-.fill.light-green {
- fill: #98d85b;
-}
-.fill.lightgreen {
- fill: #98d85b;
-}
-.fill.green {
- fill: #28a745;
-}
-.fill.orange {
- fill: #ffa00a;
-}
-.fill.purple {
- fill: #743ee2;
-}
-.fill.darkgrey {
- fill: #b8c2cc;
-}
-.fill.black {
- fill: #36414C;
-}
-.fill.yellow {
- fill: #FEEF72;
-}
-.fill.light-blue {
- fill: #7CD6FD;
-}
-.fill.lightblue {
- fill: #7CD6FD;
-}
-.background.grey {
- background: #F0F4F7;
-}
-.background.blue {
- background: #5e64ff;
-}
-.background.red {
- background: #ff5858;
-}
-.background.light-green {
- background: #98d85b;
-}
-.background.lightgreen {
- background: #98d85b;
-}
-.background.green {
- background: #28a745;
-}
-.background.orange {
- background: #ffa00a;
-}
-.background.purple {
- background: #743ee2;
-}
-.background.darkgrey {
- background: #b8c2cc;
-}
-.background.black {
- background: #36414C;
-}
-.background.yellow {
- background: #FEEF72;
-}
-.background.light-blue {
- background: #7CD6FD;
-}
-.background.lightblue {
- background: #7CD6FD;
-}
-.border-top.grey {
- border-top: 3px solid #F0F4F7;
-}
-.border-top.blue {
- border-top: 3px solid #5e64ff;
-}
-.border-top.red {
- border-top: 3px solid #ff5858;
-}
-.border-top.light-green {
- border-top: 3px solid #98d85b;
-}
-.border-top.lightgreen {
- border-top: 3px solid #98d85b;
-}
-.border-top.green {
- border-top: 3px solid #28a745;
-}
-.border-top.orange {
- border-top: 3px solid #ffa00a;
-}
-.border-top.purple {
- border-top: 3px solid #743ee2;
-}
-.border-top.darkgrey {
- border-top: 3px solid #b8c2cc;
-}
-.border-top.black {
- border-top: 3px solid #36414C;
-}
-.border-top.yellow {
- border-top: 3px solid #FEEF72;
-}
-.border-top.light-blue {
- border-top: 3px solid #7CD6FD;
-}
-.border-top.lightblue {
- border-top: 3px solid #7CD6FD;
-}
diff --git a/frappe/public/js/frappe/form/dashboard.js b/frappe/public/js/frappe/form/dashboard.js
index 9c84a07af0..caa3323d46 100644
--- a/frappe/public/js/frappe/form/dashboard.js
+++ b/frappe/public/js/frappe/form/dashboard.js
@@ -334,7 +334,7 @@ frappe.ui.form.Dashboard = Class.extend({
// heatmap
render_heatmap: function() {
if(!this.heatmap) {
- this.heatmap = new frappe.chart.FrappeChart({
+ this.heatmap = new Chart({
parent: "#heatmap-" + frappe.model.scrub(this.frm.doctype),
type: 'heatmap',
height: 100,
@@ -412,7 +412,7 @@ frappe.ui.form.Dashboard = Class.extend({
});
this.show();
- this.chart = new frappe.chart.FrappeChart(args);
+ this.chart = new Chart(args);
if(!this.chart) {
this.hide();
}
diff --git a/frappe/public/js/frappe/ui/charts.js b/frappe/public/js/frappe/ui/charts.js
deleted file mode 100644
index 8927f2e21b..0000000000
--- a/frappe/public/js/frappe/ui/charts.js
+++ /dev/null
@@ -1,1556 +0,0 @@
-// specific_values = [
-// {
-// title: "Average",
-// line_type: "dashed", // "dashed" or "solid"
-// value: 10
-// },
-
-// summary = [
-// {
-// title: "Total",
-// color: 'blue', // Indicator colors: 'grey', 'blue', 'red', 'green', 'orange',
-// // 'purple', 'darkgrey', 'black', 'yellow', 'lightblue'
-// value: 80
-// }
-// ]
-
-// Validate all arguments, check passed data format, set defaults
-
-frappe.provide("frappe.chart");
-
-frappe.chart.FrappeChart = class {
- constructor({
- parent = "",
- height = 240,
-
- title = '', subtitle = '',
-
- data = {},
- format_lambdas = {},
-
- specific_values = [],
- summary = [],
-
- is_navigable = 0,
-
- type = ''
- }) {
- if(Object.getPrototypeOf(this) === frappe.chart.FrappeChart.prototype) {
- if(type === 'line') {
- return new frappe.chart.LineChart(arguments[0]);
- } else if(type === 'bar') {
- return new frappe.chart.BarChart(arguments[0]);
- } else if(type === 'percentage') {
- return new frappe.chart.PercentageChart(arguments[0]);
- } else if(type === 'heatmap') {
- return new frappe.chart.HeatMap(arguments[0]);
- }
- }
-
- this.parent = document.querySelector(parent);
- this.title = title;
- this.subtitle = subtitle;
-
- this.data = data;
- this.format_lambdas = format_lambdas;
-
- this.specific_values = specific_values;
- this.summary = summary;
-
- this.is_navigable = is_navigable;
- if(this.is_navigable) {
- this.current_index = 0;
- }
-
- this.set_margins(height);
- }
-
- set_margins(height) {
- this.base_height = height;
- this.height = height - 40;
- this.translate_x = 60;
- this.translate_y = 10;
- }
-
- setup() {
- this.bind_window_events();
- this.refresh();
- }
-
- bind_window_events() {
- window.addEventListener('resize', () => this.refresh());
- window.addEventListener('orientationchange', () => this.refresh());
- }
-
- refresh() {
- this.setup_base_values();
- this.set_width();
-
- this.setup_container();
- this.setup_components();
-
- this.setup_values();
- this.setup_utils();
-
- this.make_graph_components();
- this.make_tooltip();
-
- if(this.summary.length > 0) {
- this.show_custom_summary();
- } else {
- this.show_summary();
- }
-
- if(this.is_navigable) {
- this.setup_navigation();
- }
- }
-
- set_width() {
- let special_values_width = 0;
- this.specific_values.map(val => {
- if(this.get_strwidth(val.title) > special_values_width) {
- special_values_width = this.get_strwidth(val.title);
- }
- });
- this.base_width = this.parent.offsetWidth - special_values_width;
- this.width = this.base_width - this.translate_x * 2;
- }
-
- setup_base_values() {}
-
- setup_container() {
- this.container = $$.create('div', {
- className: 'chart-container',
- innerHTML: `${this.title}
- ${this.subtitle}
-
- `
- });
-
- // Chart needs a dedicated parent element
- this.parent.innerHTML = '';
- this.parent.appendChild(this.container);
-
- this.chart_wrapper = this.container.querySelector('.frappe-chart');
- // this.chart_wrapper.appendChild();
-
- this.make_chart_area();
- this.make_draw_area();
-
- this.stats_wrapper = this.container.querySelector('.graph-stats-container');
- }
-
- make_chart_area() {
- this.svg = $$.createSVG('svg', {
- className: 'chart',
- inside: this.chart_wrapper,
- width: this.base_width,
- height: this.base_height
- });
-
- return this.svg;
- }
-
- make_draw_area() {
- this.draw_area = $$.createSVG("g", {
- className: this.type,
- inside: this.svg,
- transform: `translate(${this.translate_x}, ${this.translate_y})`
- });
- }
-
- setup_components() {
- this.svg_units_group = $$.createSVG('g', {
- className: 'data-points',
- inside: this.draw_area
- });
- }
-
- make_tooltip() {
- this.tip = new frappe.chart.SvgTip({
- parent: this.chart_wrapper,
- });
- this.bind_tooltip();
- }
-
-
- show_summary() {}
- show_custom_summary() {
- this.summary.map(d => {
- let stats = $$.create('div', {
- className: 'stats',
- innerHTML: `${d.title}: ${d.value}`
- });
- this.stats_wrapper.appendChild(stats);
- });
- }
-
- setup_navigation() {
- this.make_overlay();
- this.bind_overlay();
- document.onkeydown = (e) => {
- e = e || window.event;
-
- if (e.keyCode == '37') {
- this.on_left_arrow();
- } else if (e.keyCode == '39') {
- this.on_right_arrow();
- } else if (e.keyCode == '38') {
- this.on_up_arrow();
- } else if (e.keyCode == '40') {
- this.on_down_arrow();
- } else if (e.keyCode == '13') {
- this.on_enter_key();
- }
- };
- }
-
- make_overlay() {}
- bind_overlay() {}
-
- on_left_arrow() {}
- on_right_arrow() {}
- on_up_arrow() {}
- on_down_arrow() {}
- on_enter_key() {}
-
- get_data_point(index=this.current_index) {
- // check for length
- let data_point = {
- index: index
- };
- let y = this.y[0];
- ['svg_units', 'y_tops', 'values'].map(key => {
- let data_key = key.slice(0, key.length-1);
- data_point[data_key] = y[key][index];
- });
- data_point.label = this.x[index];
- return data_point;
- }
-
- update_current_data_point(index) {
- if(index < 0) index = 0;
- if(index >= this.x.length) index = this.x.length - 1;
- if(index === this.current_index) return;
- this.current_index = index;
- $$.fire(this.parent, "data-select", this.get_data_point());
- }
-
- // Helpers
- get_strwidth(string) {
- return string.length * 8;
- }
-
- // Objects
- setup_utils() {
- this.draw = {
- 'bar': (x, y, args, color, index) => {
- let total_width = this.avg_unit_width - args.space_width;
- let start_x = x - total_width/2;
-
- let width = total_width / args.no_of_datasets;
- let current_x = start_x + width * index;
- if(y == this.height) {
- y = this.height * 0.98;
- }
- return $$.createSVG('rect', {
- className: `bar mini fill ${color}`,
- x: current_x,
- y: y,
- width: width,
- height: this.height - y
- });
-
- },
- 'dot': (x, y, args, color) => {
- return $$.createSVG('circle', {
- className: `fill ${color}`,
- cx: x,
- cy: y,
- r: args.radius
- });
- }
- };
-
- this.animate = {
- 'bar': (bar, new_y, args) => {
- return [bar, {height: args.new_height, y: new_y}, 300, "easein"];
- // bar.animate({height: args.new_height, y: new_y}, 300, mina.easein);
- },
- 'dot': (dot, new_y) => {
- return [dot, {cy: new_y}, 300, "easein"];
- // dot.animate({cy: new_y}, 300, mina.easein);
- }
- };
- }
-}
-
-frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
- constructor(args) {
- super(args);
-
- this.x = this.data.labels;
- this.y = this.data.datasets;
-
- this.get_x_label = this.format_lambdas.x_label;
- this.get_y_label = this.format_lambdas.y_label;
- this.get_x_tooltip = this.format_lambdas.x_tooltip;
- this.get_y_tooltip = this.format_lambdas.y_tooltip;
-
- this.colors = ['lightblue', 'purple', 'blue', 'green', 'lightgreen',
- 'yellow', 'orange', 'red'];
- }
-
- setup_values() {
- this.data.datasets.map(d => {
- d.values = d.values.map(val => (!isNaN(val) ? val : 0));
- });
- this.setup_x();
- this.setup_y();
- }
-
- setup_x() {
- this.set_avg_unit_width_and_x_offset();
- this.x_axis_values = this.x.map((d, i) => frappe.chart.utils.float_2(this.x_offset + i * this.avg_unit_width));
- }
-
- setup_y() {
- this.setup_metrics();
- this.y_axis_values = this.get_y_axis_values(this.upper_limit, this.parts);
- }
-
- setup_components() {
- this.y_axis_group = $$.createSVG('g', {className: 'y axis', inside: this.draw_area});
- this.x_axis_group = $$.createSVG('g', {className: 'x axis', inside: this.draw_area});
- this.specific_y_lines = $$.createSVG('g', {className: 'specific axis', inside: this.draw_area});
- super.setup_components();
- }
-
- make_graph_components() {
- this.make_y_axis();
- this.make_x_axis();
- this.draw_graph();
- this.make_y_specifics();
- }
-
- // make HORIZONTAL lines for y values
- make_y_axis() {
- if(this.y_axis_group.textContent) {
- // animate from old to new, both elemnets
- } else {
- // only new
- }
-
- this.y_axis_group.textContent = '';
-
- let width, text_end_at = -9, label_class = '', start_at = 0;
- if(this.y_axis_mode === 'span') { // long spanning lines
- width = this.width + 6;
- start_at = -6;
- } else if(this.y_axis_mode === 'tick'){ // short label lines
- width = -6;
- label_class = 'y-axis-label';
- }
-
- this.y_axis_values.map((point) => {
- let line = $$.createSVG('line', {
- x1: start_at,
- x2: width,
- y1: 0,
- y2: 0
- });
- let text = $$.createSVG('text', {
- className: 'y-value-text',
- x: text_end_at,
- y: 0,
- dy: '.32em',
- innerHTML: point+""
- });
-
- let y_level = $$.createSVG('g', {
- className: `tick ${label_class}`,
- transform: `translate(0, ${this.height - point * this.multiplier })`
- });
-
- y_level.appendChild(line);
- y_level.appendChild(text);
-
- this.y_axis_group.appendChild(y_level);
- });
- }
-
- // make VERTICAL lines for x values
- make_x_axis() {
- let start_at, height, text_start_at, label_class = '';
- if(this.x_axis_mode === 'span') { // long spanning lines
- start_at = -7;
- height = this.height + 15;
- text_start_at = this.height + 25;
- } else if(this.x_axis_mode === 'tick'){ // short label lines
- start_at = this.height;
- height = 6;
- text_start_at = 9;
- label_class = 'x-axis-label';
- }
-
- this.x_axis_group.setAttribute('transform', `translate(0,${start_at})`);
-
- this.x.map((point, i) => {
- let allowed_space = this.avg_unit_width * 1.5;
- if(this.get_strwidth(point) > allowed_space) {
- let allowed_letters = allowed_space / 8;
- point = point.slice(0, allowed_letters-3) + " ...";
- }
-
- let line = $$.createSVG('line', {
- x1: 0,
- x2: 0,
- y1: 0,
- y2: height
- });
- let text = $$.createSVG('text', {
- className: 'x-value-text',
- x: 0,
- y: text_start_at,
- dy: '.71em',
- innerHTML: point
- });
-
- let x_level = $$.createSVG('g', {
- className: `tick ${label_class}`,
- transform: `translate(${ this.x_axis_values[i] }, 0)`
- });
-
- x_level.appendChild(line);
- x_level.appendChild(text);
-
- this.x_axis_group.appendChild(x_level);
- });
- }
-
- draw_graph() {
- // TODO: Don't animate on refresh
- let data = [];
- this.svg_units_group.textContent = '';
- this.y.map((d, i) => {
- // Anim: Don't draw initial values, store them and update later
- d.y_tops = new Array(d.values.length).fill(this.height); // no value
- data.push({values: d.values});
- d.svg_units = [];
-
- this.make_new_units_for_dataset(d.y_tops, d.color || this.colors[i], i);
- this.make_path && this.make_path(d, d.color || this.colors[i]);
- });
-
- // Data points
- // this.calc_all_y_tops();
- // this.calc_min_tops();
-
- setTimeout(() => {
- this.update_values(data);
- }, 500);
- }
-
- setup_navigation() {
- // Hack: defer nav till initial update_values
- setTimeout(() => {
- super.setup_navigation();
- }, 1000);
- }
-
- make_new_units_for_dataset(y_values, color, dataset_index) {
- this.y[dataset_index].svg_units = [];
-
- let d = this.unit_args;
- y_values.map((y, i) => {
- let data_unit = this.draw[d.type](
- this.x_axis_values[i],
- y,
- d.args,
- color,
- dataset_index
- );
- this.svg_units_group.appendChild(data_unit);
- this.y[dataset_index].svg_units.push(data_unit);
- });
- }
-
- make_y_specifics() {
- this.specific_values.map(d => {
- let line = $$.createSVG('line', {
- className: d.line_type === "dashed" ? "dashed": "",
- x1: 0,
- x2: this.width,
- y1: 0,
- y2: 0
- });
-
- let text = $$.createSVG('text', {
- className: 'specific-value',
- x: this.width + 5,
- y: 0,
- dy: '.32em',
- innerHTML: d.title.toUpperCase()
- });
-
- let specific_y_level = $$.createSVG('g', {
- className: `tick`,
- transform: `translate(0, ${this.height - d.value * this.multiplier })`
- });
-
- specific_y_level.appendChild(line);
- specific_y_level.appendChild(text);
-
- this.specific_y_lines.appendChild(specific_y_level);
- });
- }
-
- bind_tooltip() {
- // should be w.r.t. this.parent, but will have to take care of
- // all the elements and padding, margins on top
- this.chart_wrapper.addEventListener('mousemove', (e) => {
- let rect = this.chart_wrapper.getBoundingClientRect();
- let offset = {
- top: rect.top + document.body.scrollTop,
- left: rect.left + document.body.scrollLeft
- }
- let relX = e.pageX - offset.left - this.translate_x;
- let relY = e.pageY - offset.top - this.translate_y;
-
- if(relY < this.height + this.translate_y * 2) {
- this.map_tooltip_x_position_and_show(relX);
- } else {
- this.tip.hide_tip();
- }
- });
- }
-
- map_tooltip_x_position_and_show(relX) {
- for(var i=this.x_axis_values.length - 1; i >= 0 ; i--) {
- let x_val = this.x_axis_values[i];
- // let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_values[i-1];
- if(relX > x_val - this.avg_unit_width/2) {
- let x = x_val + this.translate_x - 0.5;
- let y = this.y_min_tops[i] + this.translate_y + 4; // adjustment
-
- let title = this.x.formatted && this.x.formatted.length>0
- ? this.x.formatted[i] : this.x[i];
- let values = this.y.map((set, j) => {
- return {
- title: set.title,
- value: set.formatted ? set.formatted[i] : set.values[i],
- color: set.color || this.colors[j],
- }
- });
-
- this.tip.set_values(x, y, title, '', values);
- this.tip.show_tip();
- break;
- }
- }
- }
-
- // API
- update_values(new_y) {
- // Just update values prop, setup_y() will do the rest
- this.y.map((d, i) => {d.values = new_y[i].values;});
-
- let old_upper_limit = this.upper_limit;
- this.setup_y();
- if(old_upper_limit !== this.upper_limit){
- this.make_y_axis();
- }
-
- let elements_to_animate = [];
- elements_to_animate = this.animate_for_equilength_data(elements_to_animate);
-
- // create new x,y pair string and animate path
- if(this.y[0].path) {
- this.y.map((e, i) => {
- let new_points_list = e.y_tops.map((y, i) => (this.x_axis_values[i] + ',' + y));
- let new_path_str = "M"+new_points_list.join("L");
- let args = [{unit:this.y[i].path, object: this.y[i], key:'path'}, {d:new_path_str}, 300, "easein"];
- elements_to_animate.push(args);
- });
- }
-
- // elements_to_animate = elements_to_animate.concat(this.update_y_axis());
- let anim_svg = $$.runSVGAnimation(this.svg, elements_to_animate);
- this.chart_wrapper.innerHTML = '';
- this.chart_wrapper.appendChild(anim_svg);
-
- // Replace the new svg (data has long been replaced)
- setTimeout(() => {
- this.chart_wrapper.innerHTML = '';
- this.chart_wrapper.appendChild(this.svg);
- }, 250);
- }
-
- update_y_axis() {
- let elements = [];
-
- return elements;
- }
-
- update_x_axis() {
- // update
- }
-
- animate_for_equilength_data(elements_to_animate) {
- this.y.map((d) => {
- d.y_tops = d.values.map(val => frappe.chart.utils.float_2(this.height - val * this.multiplier));
- d.svg_units.map((unit, j) => {
- elements_to_animate.push(this.animate[this.unit_args.type](
- {unit:unit, array:d.svg_units, index: j}, // unit, with info to replace from data
- d.y_tops[j],
- {new_height: this.height - d.y_tops[j]}
- ));
- });
- });
- this.calc_min_tops();
- return elements_to_animate;
- }
-
- add_data_point(data_point) {
- this.x.push(data_point.label);
- this.y.values.push();
- }
-
- // Helpers
- get_upper_limit_and_parts(array) {
- let max_val = parseInt(Math.max(...array));
- if((max_val+"").length <= 1) {
- return [10, 5];
- } else {
- let multiplier = Math.pow(10, ((max_val+"").length - 1));
- let significant = Math.ceil(max_val/multiplier);
- if(significant % 2 !== 0) significant++;
- let parts = (significant < 5) ? significant : significant/2;
- return [significant * multiplier, parts];
- }
- }
-
- get_y_axis_values(upper_limit, parts) {
- let y_axis = [];
- for(var i = 0; i <= parts; i++){
- y_axis.push(upper_limit / parts * i);
- }
- return y_axis;
- }
-
- set_avg_unit_width_and_x_offset() {
- this.avg_unit_width = this.width/(this.x.length - 1);
- this.x_offset = 0;
- }
-
- setup_metrics() {
- // Metrics: upper limit, no. of parts, multiplier
- let values = this.get_all_y_values();
- [this.upper_limit, this.parts] = this.get_upper_limit_and_parts(values);
- this.multiplier = this.height / this.upper_limit;
- }
-
- get_all_y_values() {
- let all_values = [];
- this.y.map(d => {
- all_values = all_values.concat(d.values);
- });
- return all_values.concat(this.specific_values.map(d => d.value));
- }
-
- calc_all_y_tops() {
- this.y.map(d => {
- d.y_tops = d.values.map( val => frappe.chart.utils.float_2(this.height - val * this.multiplier));
- });
- }
-
- calc_min_tops() {
- this.y_min_tops = new Array(this.x_axis_values.length).fill(9999);
- this.y.map(d => {
- d.y_tops.map( (y_top, i) => {
- if(y_top < this.y_min_tops[i]) {
- this.y_min_tops[i] = y_top;
- }
- });
- });
- }
-}
-
-frappe.chart.BarChart = class BarChart extends frappe.chart.AxisChart {
- constructor() {
- super(arguments[0]);
-
- this.type = 'bar-graph';
- this.setup();
- }
-
- setup_values() {
- super.setup_values();
- this.x_offset = this.avg_unit_width;
- this.y_axis_mode = 'span';
- this.x_axis_mode = 'tick';
- this.unit_args = {
- type: 'bar',
- args: {
- space_width: this.avg_unit_width/2,
- no_of_datasets: this.y.length
- }
- };
- }
-
- make_overlay() {
- // Just make one out of the first element
- let unit = this.y[0].svg_units[0];
-
- this.overlay = unit.cloneNode();
- this.overlay.style.fill = '#000000';
- this.overlay.style.opacity = '0.4';
- this.draw_area.appendChild(this.overlay);
- }
-
- bind_overlay() {
- // on event, update overlay
- this.parent.addEventListener('data-select', (e) => {
- this.update_overlay(e.svg_unit);
- });
- }
-
- update_overlay(unit) {
- let attributes = [];
- Object.keys(unit.attributes).map(index => {
- attributes.push(unit.attributes[index]);
- });
-
- attributes.filter(attr => attr.specified).map(attr => {
- this.overlay.setAttribute(attr.name, attr.nodeValue);
- });
- }
-
- on_left_arrow() {
- this.update_current_data_point(this.current_index - 1);
- }
-
- on_right_arrow() {
- this.update_current_data_point(this.current_index + 1);
- }
-
- set_avg_unit_width_and_x_offset() {
- this.avg_unit_width = this.width/(this.x.length + 1);
- this.x_offset = this.avg_unit_width;
- }
-}
-
-frappe.chart.LineChart = class LineChart extends frappe.chart.AxisChart {
- constructor(args) {
- super(args);
- if(Object.getPrototypeOf(this) !== frappe.chart.LineChart.prototype) {
- return;
- }
-
- this.type = 'line-graph';
-
- this.setup();
- }
-
- setup_values() {
- super.setup_values();
- this.y_axis_mode = 'span';
- this.x_axis_mode = 'span';
- this.unit_args = {
- type: 'dot',
- args: { radius: 4 }
- };
- }
-
- make_path(d, color) {
- let points_list = d.y_tops.map((y, i) => (this.x_axis_values[i] + ',' + y));
- let path_str = "M"+points_list.join("L");
-
- d.path = $$.createSVG('path', {
- className: `stroke ${color}`,
- d: path_str
- });
-
- this.svg_units_group.prepend(d.path);
- }
-}
-
-frappe.chart.RegionChart = class RegionChart extends frappe.chart.LineChart {
- constructor(args) {
- super(args);
-
- this.type = 'region-graph';
- this.region_fill = 1;
- this.setup();
- }
-}
-
-frappe.chart.PercentageChart = class PercentageChart extends frappe.chart.FrappeChart {
- constructor(args) {
- super(args);
-
- this.x = this.data.labels;
- this.y = this.data.datasets;
-
- this.get_x_label = this.format_lambdas.x_label;
- this.get_y_label = this.format_lambdas.y_label;
- this.get_x_tooltip = this.format_lambdas.x_tooltip;
- this.get_y_tooltip = this.format_lambdas.y_tooltip;
-
- this.setup();
- }
-
- make_chart_area() {
- this.chart_wrapper.className += ' ' + 'graph-focus-margin';
- this.chart_wrapper.style.marginTop = '45px';
-
- this.stats_wrapper.className += ' ' + 'graph-focus-margin';
- this.stats_wrapper.style.marginBottom = '30px';
- this.stats_wrapper.style.paddingTop = '0px';
-
- this.chart_div = $$.create('div', {
- className: 'div',
- inside: this.chart_wrapper,
- width: this.base_width,
- height: this.base_height
- });
-
- this.chart = $$.create('div', {
- className: 'progress-chart',
- inside: this.chart_div
- });
- }
-
- setup_values() {
- this.x.totals = this.x.map((d, i) => {
- let total = 0;
- this.y.map(e => {
- total += e.values[i];
- });
- return total;
- });
-
- if(!this.x.colors) {
- this.x.colors = ['green', 'blue', 'purple', 'red', 'orange',
- 'yellow', 'lightblue', 'lightgreen'];
- }
- }
-
- setup_utils() { }
- setup_components() {
- this.percentage_bar = $$.create('div', {
- className: 'progress',
- inside: this.chart
- });
- }
-
- make_graph_components() {
- this.grand_total = this.x.totals.reduce((a, b) => a + b, 0);
- this.x.units = [];
- this.x.totals.map((total, i) => {
- let part = $$.create('div', {
- className: `progress-bar background ${this.x.colors[i]}`,
- style: `width: ${total*100/this.grand_total}%`,
- inside: this.percentage_bar
- });
- this.x.units.push(part);
- });
- }
-
- bind_tooltip() {
- this.x.units.map((part, i) => {
- part.addEventListener('mouseenter', () => {
- let g_off = this.chart_wrapper.offset(), p_off = part.offset();
-
- let x = p_off.left - g_off.left + part.offsetWidth/2;
- let y = p_off.top - g_off.top - 6;
- let title = (this.x.formatted && this.x.formatted.length>0
- ? this.x.formatted[i] : this.x[i]) + ': ';
- let percent = (this.x.totals[i]*100/this.grand_total).toFixed(1);
-
- this.tip.set_values(x, y, title, percent);
- this.tip.show_tip();
- });
- });
- }
-
- show_summary() {
- let x_values = this.x.formatted && this.x.formatted.length > 0
- ? this.x.formatted : this.x;
- this.x.totals.map((d, i) => {
- if(d) {
- let stats = $$.create('div', {
- className: 'stats',
- inside: this.stats_wrapper
- });
- stats.innerHTML = `
- ${x_values[i]}:
- ${d}
- `;
- }
- });
- }
-}
-
-frappe.chart.HeatMap = class HeatMap extends frappe.chart.FrappeChart {
- constructor({
- start = new Date(moment().subtract(1, 'year').toDate()),
- domain = '',
- subdomain = '',
- data = {},
- discrete_domains = 0,
- count_label = ''
- }) {
- super(arguments[0]);
-
- this.type = 'heatmap';
-
- this.domain = domain;
- this.subdomain = subdomain;
- this.start = start;
- this.data = data;
- this.discrete_domains = discrete_domains;
- this.count_label = count_label;
-
- this.legend_colors = ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];
-
- this.translate_x = 0;
- this.setup();
- }
-
- setup_base_values() {
- this.today = new Date();
-
- if(!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());
- if(this.first_week_start.getDay() !== 7) {
- this.add_days(this.first_week_start, (-1) * this.first_week_start.getDay());
- }
- if(this.last_week_start.getDay() !== 7) {
- this.add_days(this.last_week_start, (-1) * this.last_week_start.getDay());
- }
- this.no_of_cols = this.get_weeks_between(this.first_week_start + '', this.last_week_start + '') + 1;
- }
-
- set_width() {
- this.base_width = (this.no_of_cols) * 12;
- }
-
- setup_components() {
- this.domain_label_group = $$.createSVG("g", {
- className: "domain-label-group chart-label",
- inside: this.draw_area
- });
- this.data_groups = $$.createSVG("g", {
- className: "data-groups",
- inside: this.draw_area,
- transform: `translate(0, 20)`
- });
- }
-
- setup_values() {
- this.domain_label_group.textContent = '';
- this.data_groups.textContent = '';
- this.distribution = this.get_distribution(this.data, this.legend_colors);
- this.month_names = ["January", "February", "March", "April", "May", "June",
- "July", "August", "September", "October", "November", "December"
- ];
-
- this.render_all_weeks_and_store_x_values(this.no_of_cols);
- }
-
- render_all_weeks_and_store_x_values(no_of_weeks) {
- let current_week_sunday = new Date(this.first_week_start);
- this.week_col = 0;
- this.current_month = current_week_sunday.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; i < no_of_weeks; i++) {
- let data_group, month_change = 0;
- let day = new Date(current_week_sunday);
-
- [data_group, month_change] = this.get_week_squares_group(day, this.week_col);
- this.data_groups.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;
- }
- this.add_days(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;
-
- let month_change = 0;
- let week_col_change = 0;
-
- let data_group = $$.createSVG("g", {
- className: "data-group",
- inside: this.data_groups
- });
-
- for(var y = 0, i = 0; i < no_of_weekdays; i += step, y += (square_side + cell_padding)) {
- let data_value = 0;
- let color_index = 0;
-
- // TODO: More foolproof for any data
- let timestamp = Math.floor(current_date.getTime()/1000).toFixed(1);
-
- if(this.data[timestamp]) {
- data_value = this.data[timestamp];
- color_index = this.get_max_checkpoint(data_value, this.distribution);
- }
-
- if(this.data[Math.round(timestamp)]) {
- data_value = this.data[Math.round(timestamp)];
- color_index = this.get_max_checkpoint(data_value, this.distribution);
- }
-
- let x = 13 + (index + week_col_change) * 12;
-
- $$.createSVG("rect", {
- className: 'day',
- inside: data_group,
- x: x,
- y: y,
- width: square_side,
- height: square_side,
- fill: this.legend_colors[color_index],
- 'data-date': this.get_dd_mm_yyyy(current_date),
- 'data-value': data_value,
- 'data-day': current_date.getDay()
- });
-
- let next_date = new Date(current_date);
- this.add_days(next_date, 1);
- if(next_date.getMonth() - current_date.getMonth()) {
- month_change = 1;
- if(this.discrete_domains) {
- week_col_change = 1;
- }
-
- this.month_start_points.push(13 + (index + week_col_change) * 12);
- }
- 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;
- // }
- // this.last_month_label = 1;
-
- // let first_month = this.months.shift();
- // let first_month_start = this.month_start_points.shift();
- // render first month if
-
- // let last_month = this.months.pop();
- // let last_month_start = this.month_start_points.pop();
- // render last month if
-
- this.months.shift();
- this.month_start_points.shift();
- this.months.pop();
- this.month_start_points.pop();
-
- this.month_start_points.map((start, i) => {
- let month_name = this.month_names[this.months[i]].substring(0, 3);
-
- $$.createSVG('text', {
- className: 'y-value-text',
- inside: this.domain_label_group,
- x: start + 12,
- y: 10,
- dy: '.32em',
- innerHTML: month_name
- });
-
- });
- }
-
- make_graph_components() {
- Array.prototype.slice.call(
- this.container.querySelectorAll('.graph-stats-container, .sub-title, .title')
- ).map(d => {
- d.style.display = 'None';
- });
- this.chart_wrapper.style.marginTop = '0px';
- this.chart_wrapper.style.paddingTop = '0px';
- }
-
- bind_tooltip() {
- 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('-');
-
- let month = this.month_names[parseInt(date_parts[1])-1].substring(0, 3);
-
- let g_off = this.chart_wrapper.getBoundingClientRect(), p_off = e.target.getBoundingClientRect();
-
- 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];
-
- this.tip.set_values(x, y, name, value, [], 1);
- this.tip.show_tip();
- });
- });
- }
-
- update(data) {
- this.data = data;
- this.setup_values();
- this.bind_tooltip();
- }
-
- get_distribution(data={}, mapper_array) {
- let data_values = Object.keys(data).map(key => data[key]);
- let data_max_value = Math.max(...data_values);
-
- let distribution_step = 1 / (mapper_array.length - 1);
- let distribution = [];
-
- mapper_array.map((color, i) => {
- let checkpoint = data_max_value * (distribution_step * i);
- distribution.push(checkpoint);
- });
-
- return distribution;
- }
-
- get_max_checkpoint(value, distribution) {
- return distribution.filter((d, i) => {
- if(i === 1) {
- return distribution[0] < value;
- }
- return d <= value;
- }).length - 1;
- }
-
- // TODO: date utils, move these out
-
- // https://stackoverflow.com/a/11252167/6495043
- treat_as_utc(date_str) {
- let result = new Date(date_str);
- result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
- return result;
- }
-
- get_dd_mm_yyyy(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('-');
- }
-
- get_weeks_between(start_date_str, end_date_str) {
- return Math.ceil(this.get_days_between(start_date_str, end_date_str) / 7);
- }
-
- get_days_between(start_date_str, end_date_str) {
- let milliseconds_per_day = 24 * 60 * 60 * 1000;
- return (this.treat_as_utc(end_date_str) - this.treat_as_utc(start_date_str)) / milliseconds_per_day;
- }
-
- // mutates
- add_days(date, number_of_days) {
- date.setDate(date.getDate() + number_of_days);
- }
-
- get_month_name() {}
-}
-
-frappe.chart.SvgTip = class {
- constructor({
- parent = null
- }) {
- this.parent = parent;
- this.title_name = '';
- this.title_value = '';
- this.list_values = [];
- this.title_value_first = 0;
-
- this.x = 0;
- this.y = 0;
-
- this.top = 0;
- this.left = 0;
-
- this.setup();
- }
-
- setup() {
- this.make_tooltip();
- }
-
- refresh() {
- this.fill();
- this.calc_position();
- // this.show_tip();
- }
-
- make_tooltip() {
- this.container = $$.create('div', {
- className: 'graph-svg-tip comparison',
- innerHTML: `
-
- `
- });
-
- this.parent.appendChild(this.container);
- this.hide_tip();
-
- this.title = this.container.querySelector('.title');
- this.data_point_list = this.container.querySelector('.data-point-list');
-
- this.parent.addEventListener('mouseleave', () => {
- this.hide_tip();
- });
- }
-
- fill() {
- let title;
- if(this.title_value_first) {
- title = `${this.title_value}${this.title_name}`;
- } else {
- title = `${this.title_name}${this.title_value}`;
- }
- this.title.innerHTML = title;
- this.data_point_list.innerHTML = '';
-
- this.list_values.map((set) => {
- let li = $$.create('li', {
- className: `border-top ${set.color || 'black'}`,
- innerHTML: `${set.value ? set.value : '' }
- ${set.title ? set.title : '' }`
- });
-
- this.data_point_list.appendChild(li);
- });
- }
-
- calc_position() {
- this.top = this.y - this.container.offsetHeight;
- this.left = this.x - this.container.offsetWidth/2;
- let max_left = this.parent.offsetWidth - this.container.offsetWidth;
-
- let pointer = this.container.querySelector('.svg-pointer');
-
- if(this.left < 0) {
- pointer.style.left = `calc(50% - ${-1 * this.left}px)`;
- this.left = 0;
- } else if(this.left > max_left) {
- let delta = this.left - max_left;
- pointer.style.left = `calc(50% + ${delta}px)`;
- this.left = max_left;
- } else {
- pointer.style.left = `50%`;
- }
- }
-
- set_values(x, y, title_name = '', title_value = '', list_values = [], title_value_first = 0) {
- this.title_name = title_name;
- this.title_value = title_value;
- this.list_values = list_values;
- this.x = x;
- this.y = y;
- this.title_value_first = title_value_first;
- this.refresh();
- }
-
- hide_tip() {
- this.container.style.top = '0px';
- this.container.style.left = '0px';
- this.container.style.opacity = '0';
- }
-
- show_tip() {
- this.container.style.top = this.top + 'px';
- this.container.style.left = this.left + 'px';
- this.container.style.opacity = '1';
- }
-}
-
-frappe.chart.map_c3 = (chart) => {
- if (chart.data) {
- let data = chart.data;
- let type = chart.chart_type || 'line';
- if(type === 'pie') {
- type = 'percentage';
- }
-
- let x = {}, y = [];
-
- if(data.columns) {
- let columns = data.columns;
-
- x = columns.filter(col => {
- return col[0] === data.x;
- })[0];
-
- if(x && x.length) {
- let dataset_length = x.length;
- let dirty = false;
- columns.map(col => {
- if(col[0] !== data.x) {
- if(col.length === dataset_length) {
- let title = col[0];
- col.splice(0, 1);
- y.push({
- title: title,
- values: col,
- });
- } else {
- dirty = true;
- }
- }
- });
-
- if(dirty) {
- return;
- }
-
- x.splice(0, 1);
-
- return {
- type: type,
- y: y,
- x: x
- }
-
- }
- } else if(data.rows) {
- let rows = data.rows;
- x = rows[0];
-
- rows.map((row, i) => {
- if(i === 0) {
- x = row;
- } else {
- y.push({
- title: 'data' + i,
- values: row,
- });
- }
- });
-
- return {
- type: type,
- y: y,
- x: x
- }
- }
- }
-}
-
-// Helpers
-frappe.chart.utils = {};
-frappe.chart.utils.float_2 = d => parseFloat(d.toFixed(2));
-function $$(expr, con) {
- return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
-}
-
-// $$.findNodeIndex = (node) =>
-// {
-// var i = 0;
-// while (node = node.previousSibling) {
-// if (node.nodeType === 1) { ++i; }
-// }
-// return i;
-// }
-
-$$.create = function(tag, o) {
- var element = document.createElement(tag);
-
- for (var i in o) {
- var val = o[i];
-
- if (i === "inside") {
- $$(val).appendChild(element);
- }
- else if (i === "around") {
- var ref = $$(val);
- ref.parentNode.insertBefore(element, ref);
- element.appendChild(ref);
- }
- else if (i in element) {
- element[i] = val;
- }
- else {
- element.setAttribute(i, val);
- }
- }
-
- return element;
-};
-
-$$.createSVG = function(tag, o) {
- var element = document.createElementNS("http://www.w3.org/2000/svg", tag);
-
- for (var i in o) {
- var val = o[i];
-
- if (i === "inside") {
- $$(val).appendChild(element);
- }
- else if (i === "around") {
- var ref = $$(val);
- ref.parentNode.insertBefore(element, ref);
- element.appendChild(ref);
- }
- else {
- if(i === "className") { i = "class"; }
- if(i === "innerHTML") {
- element['textContent'] = val;
- } else {
- element.setAttribute(i, val);
- }
- }
- }
-
- return element;
-};
-
-$$.runSVGAnimation = (svg_container, elements) => {
- let parent = elements[0][0]['unit'].parentNode;
-
- let new_elements = [];
- let anim_elements = [];
-
- elements.map(element => {
- let obj = element[0];
- // let index = $$.findNodeIndex(obj.unit);
-
- let anim_element, new_element;
-
- element[0] = obj.unit;
- [anim_element, new_element] = $$.animateSVG(...element);
-
- new_elements.push(new_element);
- anim_elements.push(anim_element);
-
- parent.replaceChild(anim_element, obj.unit);
-
- if(obj.array) {
- obj.array[obj.index] = new_element;
- } else {
- obj.object[obj.key] = new_element;
- }
- });
-
- let anim_svg = svg_container.cloneNode(true);
-
- anim_elements.map((anim_element, i) => {
- parent.replaceChild(new_elements[i], anim_element);
- elements[i][0] = new_elements[i];
- });
-
- return anim_svg;
-}
-
-$$.animateSVG = (element, props, dur, easing_type="linear") => {
- let easing = {
- ease: "0.25 0.1 0.25 1",
- linear: "0 0 1 1",
- // easein: "0.42 0 1 1",
- easein: "0.1 0.8 0.2 1",
- easeout: "0 0 0.58 1",
- easeinout: "0.42 0 0.58 1"
- }
-
- let anim_element = element.cloneNode(false);
- let new_element = element.cloneNode(false);
-
- for(var attributeName in props) {
- let animate_element = document.createElementNS("http://www.w3.org/2000/svg", "animate");
-
- let current_value = element.getAttribute(attributeName);
- let value = props[attributeName];
-
- let anim_attr = {
- attributeName: attributeName,
- from: current_value,
- to: value,
- begin: "0s",
- dur: dur/1000 + "s",
- values: current_value + ";" + value,
- keySplines: easing[easing_type],
- keyTimes: "0;1",
- calcMode: "spline"
- }
-
- for (var i in anim_attr) {
- animate_element.setAttribute(i, anim_attr[i]);
- }
-
- anim_element.appendChild(animate_element);
- new_element.setAttribute(attributeName, value);
- }
-
- return [anim_element, new_element];
-}
-
-$$.bind = function(element, o) {
- if (element) {
- for (var event in o) {
- var callback = o[event];
-
- event.split(/\s+/).forEach(function (event) {
- element.addEventListener(event, callback);
- });
- }
- }
-};
-
-$$.unbind = function(element, o) {
- if (element) {
- for (var event in o) {
- var callback = o[event];
-
- event.split(/\s+/).forEach(function(event) {
- element.removeEventListener(event, callback);
- });
- }
- }
-};
-
-$$.fire = function(target, type, properties) {
- var evt = document.createEvent("HTMLEvents");
-
- evt.initEvent(type, true, true );
-
- for (var j in properties) {
- evt[j] = properties[j];
- }
-
- return target.dispatchEvent(evt);
-};
diff --git a/frappe/public/js/frappe/views/reports/grid_report.js b/frappe/public/js/frappe/views/reports/grid_report.js
index 504708a12c..054a3b2b09 100644
--- a/frappe/public/js/frappe/views/reports/grid_report.js
+++ b/frappe/public/js/frappe/views/reports/grid_report.js
@@ -672,7 +672,7 @@ frappe.views.GridReportWithPlot = frappe.views.GridReport.extend({
}
var chart_data = this.get_chart_data ? this.get_chart_data() : null;
- this.chart = new frappe.chart.FrappeChart({
+ this.chart = new Chart({
parent: ".chart",
height: 200,
data: chart_data,
diff --git a/frappe/public/js/frappe/views/reports/query_report.js b/frappe/public/js/frappe/views/reports/query_report.js
index 54dda994f5..88ada6c62f 100644
--- a/frappe/public/js/frappe/views/reports/query_report.js
+++ b/frappe/public/js/frappe/views/reports/query_report.js
@@ -945,7 +945,7 @@ frappe.views.QueryReport = Class.extend({
if(opts.data && opts.data.labels && opts.data.labels.length) {
this.chart_area.toggle(true);
- this.chart = new frappe.chart.FrappeChart(opts);
+ this.chart = new Chart(opts);
}
},
diff --git a/frappe/public/js/lib/Chart.min.js b/frappe/public/js/lib/Chart.min.js
deleted file mode 100755
index ab63588108..0000000000
--- a/frappe/public/js/lib/Chart.min.js
+++ /dev/null
@@ -1,39 +0,0 @@
-var Chart=function(s){function v(a,c,b){a=A((a-c.graphMin)/(c.steps*c.stepValue),1,0);return b*c.steps*a}function x(a,c,b,e){function h(){g+=f;var k=a.animation?A(d(g),null,0):1;e.clearRect(0,0,q,u);a.scaleOverlay?(b(k),c()):(c(),b(k));if(1>=g)D(h);else if("function"==typeof a.onAnimationComplete)a.onAnimationComplete()}var f=a.animation?1/A(a.animationSteps,Number.MAX_VALUE,1):1,d=B[a.animationEasing],g=a.animation?0:1;"function"!==typeof c&&(c=function(){});D(h)}function C(a,c,b,e,h,f){var d;a=
-Math.floor(Math.log(e-h)/Math.LN10);h=Math.floor(h/(1*Math.pow(10,a)))*Math.pow(10,a);e=Math.ceil(e/(1*Math.pow(10,a)))*Math.pow(10,a)-h;a=Math.pow(10,a);for(d=Math.round(e/a);dc;)a=dc?c:!isNaN(parseFloat(b))&&
-isFinite(b)&&a)[^\t]*)'/g,"$1\r").replace(/\t=(.*?)%>/g,"',$1,'").split("\t").join("');").split("%>").join("p.push('").split("\r").join("\\'")+"');}return p.join('');");return c?
-b(c):b}var r=this,B={linear:function(a){return a},easeInQuad:function(a){return a*a},easeOutQuad:function(a){return-1*a*(a-2)},easeInOutQuad:function(a){return 1>(a/=0.5)?0.5*a*a:-0.5*(--a*(a-2)-1)},easeInCubic:function(a){return a*a*a},easeOutCubic:function(a){return 1*((a=a/1-1)*a*a+1)},easeInOutCubic:function(a){return 1>(a/=0.5)?0.5*a*a*a:0.5*((a-=2)*a*a+2)},easeInQuart:function(a){return a*a*a*a},easeOutQuart:function(a){return-1*((a=a/1-1)*a*a*a-1)},easeInOutQuart:function(a){return 1>(a/=0.5)?
-0.5*a*a*a*a:-0.5*((a-=2)*a*a*a-2)},easeInQuint:function(a){return 1*(a/=1)*a*a*a*a},easeOutQuint:function(a){return 1*((a=a/1-1)*a*a*a*a+1)},easeInOutQuint:function(a){return 1>(a/=0.5)?0.5*a*a*a*a*a:0.5*((a-=2)*a*a*a*a+2)},easeInSine:function(a){return-1*Math.cos(a/1*(Math.PI/2))+1},easeOutSine:function(a){return 1*Math.sin(a/1*(Math.PI/2))},easeInOutSine:function(a){return-0.5*(Math.cos(Math.PI*a/1)-1)},easeInExpo:function(a){return 0==a?1:1*Math.pow(2,10*(a/1-1))},easeOutExpo:function(a){return 1==
-a?1:1*(-Math.pow(2,-10*a/1)+1)},easeInOutExpo:function(a){return 0==a?0:1==a?1:1>(a/=0.5)?0.5*Math.pow(2,10*(a-1)):0.5*(-Math.pow(2,-10*--a)+2)},easeInCirc:function(a){return 1<=a?a:-1*(Math.sqrt(1-(a/=1)*a)-1)},easeOutCirc:function(a){return 1*Math.sqrt(1-(a=a/1-1)*a)},easeInOutCirc:function(a){return 1>(a/=0.5)?-0.5*(Math.sqrt(1-a*a)-1):0.5*(Math.sqrt(1-(a-=2)*a)+1)},easeInElastic:function(a){var c=1.70158,b=0,e=1;if(0==a)return 0;if(1==(a/=1))return 1;b||(b=0.3);ea?-0.5*e*Math.pow(2,10*
-(a-=1))*Math.sin((1*a-c)*2*Math.PI/b):0.5*e*Math.pow(2,-10*(a-=1))*Math.sin((1*a-c)*2*Math.PI/b)+1},easeInBack:function(a){return 1*(a/=1)*a*(2.70158*a-1.70158)},easeOutBack:function(a){return 1*((a=a/1-1)*a*(2.70158*a+1.70158)+1)},easeInOutBack:function(a){var c=1.70158;return 1>(a/=0.5)?0.5*a*a*(((c*=1.525)+1)*a-c):0.5*((a-=2)*a*(((c*=1.525)+1)*a+c)+2)},easeInBounce:function(a){return 1-B.easeOutBounce(1-a)},easeOutBounce:function(a){return(a/=1)<1/2.75?1*7.5625*a*a:a<2/2.75?1*(7.5625*(a-=1.5/2.75)*
-a+0.75):a<2.5/2.75?1*(7.5625*(a-=2.25/2.75)*a+0.9375):1*(7.5625*(a-=2.625/2.75)*a+0.984375)},easeInOutBounce:function(a){return 0.5>a?0.5*B.easeInBounce(2*a):0.5*B.easeOutBounce(2*a-1)+0.5}},q=s.canvas.width,u=s.canvas.height;window.devicePixelRatio&&(s.canvas.style.width=q+"px",s.canvas.style.height=u+"px",s.canvas.height=u*window.devicePixelRatio,s.canvas.width=q*window.devicePixelRatio,s.scale(window.devicePixelRatio,window.devicePixelRatio));this.PolarArea=function(a,c){r.PolarArea.defaults={scaleOverlay:!0,
-scaleOverride:!1,scaleSteps:null,scaleStepWidth:null,scaleStartValue:null,scaleShowLine:!0,scaleLineColor:"rgba(0,0,0,.1)",scaleLineWidth:1,scaleShowLabels:!0,scaleLabel:"<%=value%>",scaleFontFamily:"'Arial'",scaleFontSize:12,scaleFontStyle:"normal",scaleFontColor:"#666",scaleShowLabelBackdrop:!0,scaleBackdropColor:"rgba(255,255,255,0.75)",scaleBackdropPaddingY:2,scaleBackdropPaddingX:2,segmentShowStroke:!0,segmentStrokeColor:"#fff",segmentStrokeWidth:2,animation:!0,animationSteps:100,animationEasing:"easeOutBounce",
-animateRotate:!0,animateScale:!1,onAnimationComplete:null};var b=c?y(r.PolarArea.defaults,c):r.PolarArea.defaults;return new G(a,b,s)};this.Radar=function(a,c){r.Radar.defaults={scaleOverlay:!1,scaleOverride:!1,scaleSteps:null,scaleStepWidth:null,scaleStartValue:null,scaleShowLine:!0,scaleLineColor:"rgba(0,0,0,.1)",scaleLineWidth:1,scaleShowLabels:!1,scaleLabel:"<%=value%>",scaleFontFamily:"'Arial'",scaleFontSize:12,scaleFontStyle:"normal",scaleFontColor:"#666",scaleShowLabelBackdrop:!0,scaleBackdropColor:"rgba(255,255,255,0.75)",
-scaleBackdropPaddingY:2,scaleBackdropPaddingX:2,angleShowLineOut:!0,angleLineColor:"rgba(0,0,0,.1)",angleLineWidth:1,pointLabelFontFamily:"'Arial'",pointLabelFontStyle:"normal",pointLabelFontSize:12,pointLabelFontColor:"#666",pointDot:!0,pointDotRadius:3,pointDotStrokeWidth:1,datasetStroke:!0,datasetStrokeWidth:2,datasetFill:!0,animation:!0,animationSteps:60,animationEasing:"easeOutQuart",onAnimationComplete:null};var b=c?y(r.Radar.defaults,c):r.Radar.defaults;return new H(a,b,s)};this.Pie=function(a,
-c){r.Pie.defaults={segmentShowStroke:!0,segmentStrokeColor:"#fff",segmentStrokeWidth:2,animation:!0,animationSteps:100,animationEasing:"easeOutBounce",animateRotate:!0,animateScale:!1,onAnimationComplete:null};var b=c?y(r.Pie.defaults,c):r.Pie.defaults;return new I(a,b,s)};this.Doughnut=function(a,c){r.Doughnut.defaults={segmentShowStroke:!0,segmentStrokeColor:"#fff",segmentStrokeWidth:2,percentageInnerCutout:50,animation:!0,animationSteps:100,animationEasing:"easeOutBounce",animateRotate:!0,animateScale:!1,
-onAnimationComplete:null};var b=c?y(r.Doughnut.defaults,c):r.Doughnut.defaults;return new J(a,b,s)};this.Line=function(a,c){r.Line.defaults={scaleOverlay:!1,scaleOverride:!1,scaleSteps:null,scaleStepWidth:null,scaleStartValue:null,scaleLineColor:"rgba(0,0,0,.1)",scaleLineWidth:1,scaleShowLabels:!0,scaleLabel:"<%=value%>",scaleFontFamily:"'Arial'",scaleFontSize:12,scaleFontStyle:"normal",scaleFontColor:"#666",scaleShowGridLines:!0,scaleGridLineColor:"rgba(0,0,0,.05)",scaleGridLineWidth:1,bezierCurve:!0,
-pointDot:!0,pointDotRadius:4,pointDotStrokeWidth:2,datasetStroke:!0,datasetStrokeWidth:2,datasetFill:!0,animation:!0,animationSteps:60,animationEasing:"easeOutQuart",onAnimationComplete:null};var b=c?y(r.Line.defaults,c):r.Line.defaults;return new K(a,b,s)};this.Bar=function(a,c){r.Bar.defaults={scaleOverlay:!1,scaleOverride:!1,scaleSteps:null,scaleStepWidth:null,scaleStartValue:null,scaleLineColor:"rgba(0,0,0,.1)",scaleLineWidth:1,scaleShowLabels:!0,scaleLabel:"<%=value%>",scaleFontFamily:"'Arial'",
-scaleFontSize:12,scaleFontStyle:"normal",scaleFontColor:"#666",scaleShowGridLines:!0,scaleGridLineColor:"rgba(0,0,0,.05)",scaleGridLineWidth:1,barShowStroke:!0,barStrokeWidth:2,barValueSpacing:5,barDatasetSpacing:1,animation:!0,animationSteps:60,animationEasing:"easeOutQuart",onAnimationComplete:null};var b=c?y(r.Bar.defaults,c):r.Bar.defaults;return new L(a,b,s)};var G=function(a,c,b){var e,h,f,d,g,k,j,l,m;g=Math.min.apply(Math,[q,u])/2;g-=Math.max.apply(Math,[0.5*c.scaleFontSize,0.5*c.scaleLineWidth]);
-d=2*c.scaleFontSize;c.scaleShowLabelBackdrop&&(d+=2*c.scaleBackdropPaddingY,g-=1.5*c.scaleBackdropPaddingY);l=g;d=d?d:5;e=Number.MIN_VALUE;h=Number.MAX_VALUE;for(f=0;fe&&(e=a[f].value),a[f].valuel&&(l=h);g-=Math.max.apply(Math,[l,1.5*(c.pointLabelFontSize/2)]);g-=c.pointLabelFontSize;l=g=A(g,null,0);d=d?d:5;e=Number.MIN_VALUE;
-h=Number.MAX_VALUE;for(f=0;fe&&(e=a.datasets[f].data[m]),a.datasets[f].data[m]Math.PI?"right":"left";b.textBaseline="middle";b.fillText(a.labels[d],f,-h)}b.restore()},function(d){var e=2*Math.PI/a.datasets[0].data.length;b.save();b.translate(q/2,u/2);for(var g=0;gt?e:t;q/a.labels.lengthe&&(e=a.datasets[f].data[l]),a.datasets[f].data[l]d?h:d;d+=10}r=q-d-t;m=Math.floor(r/(a.labels.length-1));n=q-t/2-r;p=g+c.scaleFontSize/2;x(c,function(){b.lineWidth=c.scaleLineWidth;b.strokeStyle=c.scaleLineColor;b.beginPath();b.moveTo(q-t/2+5,p);b.lineTo(q-t/2-r-5,p);b.stroke();0t?e:t;q/a.labels.lengthe&&(e=a.datasets[f].data[l]),a.datasets[f].data[l]<
-h&&(h=a.datasets[f].data[l]);f=Math.floor(g/(0.66*d));d=Math.floor(0.5*(g/d));l=c.scaleShowLabels?c.scaleLabel:"";c.scaleOverride?(j={steps:c.scaleSteps,stepValue:c.scaleStepWidth,graphMin:c.scaleStartValue,labels:[]},z(l,j.labels,j.steps,c.scaleStartValue,c.scaleStepWidth)):j=C(g,f,d,e,h,l);k=Math.floor(g/j.steps);d=1;if(c.scaleShowLabels){b.font=c.scaleFontStyle+" "+c.scaleFontSize+"px "+c.scaleFontFamily;for(e=0;ed?h:d;d+=10}r=q-d-t;m=
-Math.floor(r/a.labels.length);s=(m-2*c.scaleGridLineWidth-2*c.barValueSpacing-(c.barDatasetSpacing*a.datasets.length-1)-(c.barStrokeWidth/2*a.datasets.length-1))/a.datasets.length;n=q-t/2-r;p=g+c.scaleFontSize/2;x(c,function(){b.lineWidth=c.scaleLineWidth;b.strokeStyle=c.scaleLineColor;b.beginPath();b.moveTo(q-t/2+5,p);b.lineTo(q-t/2-r-5,p);b.stroke();0.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{font-size:11px;fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .data-points circle{stroke:#fff;stroke-width:2}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .tick.x-axis-label{display:block}.chart-container .tick .specific-value{text-anchor:start}.chart-container .tick .y-value-text{text-anchor:end}.chart-container .tick .x-value-text{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}.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}.graph-svg-tip ol,.graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.graph-svg-tip strong{color:#dfe2e5;font-weight:600}.graph-svg-tip .svg-pointer{position:absolute;bottom:-10px;left:50%;width:5px;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.indicator,.indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.indicator-right:after,.indicator:before{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.indicator:before{margin:0 4px 0 0}.indicator-right:after{margin:0 0 0 4px}.background.grey,.indicator-right.grey:after,.indicator.grey:before{background:#bdd3e6}.background.light-grey,.indicator-right.light-grey:after,.indicator.light-grey:before{background:#f0f4f7}.background.blue,.indicator-right.blue:after,.indicator.blue:before{background:#5e64ff}.background.red,.indicator-right.red:after,.indicator.red:before{background:#ff5858}.background.green,.indicator-right.green:after,.indicator.green:before{background:#28a745}.background.light-green,.indicator-right.light-green:after,.indicator.light-green:before{background:#98d85b}.background.orange,.indicator-right.orange:after,.indicator.orange:before{background:#ffa00a}.background.violet,.indicator-right.violet:after,.indicator.violet:before{background:#743ee2}.background.dark-grey,.indicator-right.dark-grey:after,.indicator.dark-grey:before{background:#b8c2cc}.background.black,.indicator-right.black:after,.indicator.black:before{background:#36414c}.background.yellow,.indicator-right.yellow:after,.indicator.yellow:before{background:#feef72}.background.light-blue,.indicator-right.light-blue:after,.indicator.light-blue:before{background:#7cd6fd}.background.purple,.indicator-right.purple:after,.indicator.purple:before{background:#b554ff}.background.magenta,.indicator-right.magenta:after,.indicator.magenta:before{background:#ffa3ef}.stroke.grey{stroke:#bdd3e6}.stroke.light-grey{stroke:#f0f4f7}.stroke.blue{stroke:#5e64ff}.stroke.red{stroke:#ff5858}.stroke.light-green{stroke:#98d85b}.stroke.green{stroke:#28a745}.stroke.orange{stroke:#ffa00a}.stroke.violet{stroke:#743ee2}.stroke.dark-grey{stroke:#b8c2cc}.stroke.black{stroke:#36414c}.stroke.yellow{stroke:#feef72}.stroke.light-blue{stroke:#7cd6fd}.stroke.purple{stroke:#b554ff}.stroke.magenta{stroke:#ffa3ef}.fill.grey{fill:#bdd3e6}.fill.light-grey{fill:#f0f4f7}.fill.blue{fill:#5e64ff}.fill.red{fill:#ff5858}.fill.light-green{fill:#98d85b}.fill.green{fill:#28a745}.fill.orange{fill:#ffa00a}.fill.violet{fill:#743ee2}.fill.dark-grey{fill:#b8c2cc}.fill.black{fill:#36414c}.fill.yellow{fill:#feef72}.fill.light-blue{fill:#7cd6fd}.fill.purple{fill:#b554ff}.fill.magenta{fill:#ffa3ef}.border-top.grey{border-top:3px solid #bdd3e6}.border-top.light-grey{border-top:3px solid #f0f4f7}.border-top.blue{border-top:3px solid #5e64ff}.border-top.red{border-top:3px solid #ff5858}.border-top.light-green{border-top:3px solid #98d85b}.border-top.green{border-top:3px solid #28a745}.border-top.orange{border-top:3px solid #ffa00a}.border-top.violet{border-top:3px solid #743ee2}.border-top.dark-grey{border-top:3px solid #b8c2cc}.border-top.black{border-top:3px solid #36414c}.border-top.yellow{border-top:3px solid #feef72}.border-top.light-blue{border-top:3px solid #7cd6fd}.border-top.purple{border-top:3px solid #b554ff}.border-top.magenta{border-top:3px solid #ffa3ef}.stop-color.grey{stop-color:#bdd3e6}.stop-color.light-grey{stop-color:#f0f4f7}.stop-color.blue{stop-color:#5e64ff}.stop-color.red{stop-color:#ff5858}.stop-color.light-green{stop-color:#98d85b}.stop-color.green{stop-color:#28a745}.stop-color.orange{stop-color:#ffa00a}.stop-color.violet{stop-color:#743ee2}.stop-color.dark-grey{stop-color:#b8c2cc}.stop-color.black{stop-color:#36414c}.stop-color.yellow{stop-color:#feef72}.stop-color.light-blue{stop-color:#7cd6fd}.stop-color.purple{stop-color:#b554ff}.stop-color.magenta{stop-color:#ffa3ef}',void 0);!function(){function t(t){this.value=t}function e(e){function i(s,n){try{var r=e[s](n),o=r.value;o instanceof t?Promise.resolve(o.value).then(function(t){i("next",t)},function(t){i("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)?i(s.key,s.arg):n=null}var s,n;this._invoke=function(t,e){return new Promise(function(a,r){var o={key:t,arg:e,resolve:a,reject:r,next:null};n?n=n.next=o:(s=n=o,i(t,e))})},"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)}}();var a=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},s=function(){function t(t,e){for(var i=0;i3&&void 0!==arguments[3]?arguments[3]:"linear",s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:void 0,n=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{},r={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"},o=t.cloneNode(!0),l=t.cloneNode(!0);for(var h in e){var _=void 0;_="transform"===h?document.createElementNS("http://www.w3.org/2000/svg","animateTransform"):document.createElementNS("http://www.w3.org/2000/svg","animate");var u=n[h]||t.getAttribute(h),c=e[h],p={attributeName:h,from:u,to:c,begin:"0s",dur:i/1e3+"s",values:u+";"+c,keySplines:r[a],keyTimes:"0;1",calcMode:"spline",fill:"freeze"};s&&(p.type=s);for(var d in p)_.setAttribute(d,p[d]);o.appendChild(_),s?l.setAttribute(h,"translate("+c+")"):l.setAttribute(h,c)}return[o,l]},t.offset=function(t){var e=t.getBoundingClientRect();return{top:e.top+(document.documentElement.scrollTop||document.body.scrollTop),left:e.left+(document.documentElement.scrollLeft||document.body.scrollLeft)}},t.isElementInViewport=function(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)},t.bind=function(t,e){if(t)for(var i in e){var a=e[i];i.split(/\s+/).forEach(function(e){t.addEventListener(e,a)})}},t.unbind=function(t,e){if(t)for(var i in e){var a=e[i];i.split(/\s+/).forEach(function(e){t.removeEventListener(e,a)})}},t.fire=function(t,e,i){var a=document.createEvent("HTMLEvents");a.initEvent(e,!0,!0);for(var s in i)a[s]=i[s];return t.dispatchEvent(a)};var _=function(){function e(t){var i=t.parent,s=void 0===i?null:i;a(this,e),this.parent=s,this.title_name="",this.title_value="",this.list_values=[],this.title_value_first=0,this.x=0,this.y=0,this.top=0,this.left=0,this.setup()}return s(e,[{key:"setup",value:function(){this.make_tooltip()}},{key:"refresh",value:function(){this.fill(),this.calc_position()}},{key:"make_tooltip",value:function(){var e=this;this.container=t.create("div",{inside:this.parent,className:"graph-svg-tip comparison",innerHTML:'\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){var a=t.create("li",{className:"border-top "+(i.color||"black"),innerHTML:''+(i.value?i.value:"")+"\n\t\t\t\t\t"+(i.title?i.title:"")});e.data_point_list.appendChild(a)})}},{key:"calc_position",value:function(){this.top=this.y-this.container.offsetHeight,this.left=this.x-this.container.offsetWidth/2;var t=this.parent.offsetWidth-this.container.offsetWidth,e=this.container.querySelector(".svg-pointer");if(this.left<0)e.style.left="calc(50% - "+-1*this.left+"px)",this.left=0;else if(this.left>t){var i=this.left-t;e.style.left="calc(50% + "+i+"px)",this.left=t}else e.style.left="50%"}},{key:"set_values",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],n=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0;this.title_name=i,this.title_value=a,this.list_values=s,this.x=t,this.y=e,this.title_value_first=n,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}(),u=function(){function e(t){var i=t.parent,s=void 0===i?"":i,n=t.height,r=void 0===n?240:n,o=t.title,l=void 0===o?"":o,h=t.subtitle,_=void 0===h?"":h,u=t.data,c=void 0===u?{}:u,p=t.format_lambdas,d=void 0===p?{}:p,f=t.summary,g=void 0===f?[]:f,v=t.is_navigable,y=void 0===v?0:v,m=t.has_legend,x=void 0===m?0:m;a(this,e),this.raw_chart_args=arguments[0],this.parent=document.querySelector(s),this.title=l,this.subtitle=_,this.data=c,this.format_lambdas=d,this.specific_values=c.specific_values||[],this.summary=g,this.is_navigable=y,this.is_navigable&&(this.current_index=0),this.has_legend=x,this.chart_types=["line","scatter","bar","percentage","heatmap"],this.set_margins(r)}return s(e,[{key:"get_different_chart",value:function(t){if(this.chart_types.includes(t)||console.error("'"+t+"' is not a valid chart type."),t!==this.type){return{bar:["line","scatter","percentage"],line:["scatter","bar","percentage"],scatter:["line","bar","percentage"],percentage:["bar","line","scatter"],heatmap:[]}[this.type].includes(t)||console.error("'"+this.type+"' chart cannot be converted to a '"+t+"' chart."),new y({parent:this.raw_chart_args.parent,title:this.title,data:this.raw_chart_args.data,type:t,height:this.raw_chart_args.height})}}},{key:"set_margins",value:function(t){this.base_height=t,this.height=t-40,this.translate_x=60,this.translate_y=10}},{key:"setup",value:function(){this.bind_window_events(),this.refresh(!0)}},{key:"bind_window_events",value:function(){var t=this;window.addEventListener("resize",function(){return t.refresh()}),window.addEventListener("orientationchange",function(){return t.refresh()})}},{key:"refresh",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.setup_base_values(),this.set_width(),this.setup_container(),this.setup_components(),this.setup_values(),this.setup_utils(),this.make_graph_components(t),this.make_tooltip(),this.summary.length>0?this.show_custom_summary():this.show_summary(),this.is_navigable&&this.setup_navigation(t)}},{key:"set_width",value:function(){var t=this,e=0;this.specific_values.map(function(i){t.get_strwidth(i.title)>e&&(e=t.get_strwidth(i.title)-40)}),this.base_width=this.parent.offsetWidth-e,this.width=this.base_width-2*this.translate_x}},{key:"setup_base_values",value:function(){}},{key:"setup_container",value:function(){this.container=t.create("div",{className:"chart-container",innerHTML:''+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.chart_wrapper=this.container.querySelector(".frappe-chart"),this.stats_wrapper=this.container.querySelector(".graph-stats-container"),this.make_chart_area(),this.make_draw_area()}},{key:"make_chart_area",value:function(){return this.svg=t.createSVG("svg",{className:"chart",inside:this.chart_wrapper,width:this.base_width,height:this.base_height}),this.svg_defs=t.createSVG("defs",{inside:this.svg}),this.svg}},{key:"make_draw_area",value:function(){this.draw_area=t.createSVG("g",{className:this.type+"-chart",inside:this.svg,transform:"translate("+this.translate_x+", "+this.translate_y+")"})}},{key:"setup_components",value:function(){}},{key:"make_tooltip",value:function(){this.tip=new _({parent:this.chart_wrapper}),this.bind_tooltip()}},{key:"show_summary",value:function(){}},{key:"show_custom_summary",value:function(){var e=this;this.summary.map(function(i){var a=t.create("div",{className:"stats",innerHTML:''+i.title+": "+i.value+""});e.stats_wrapper.appendChild(a)})}},{key:"setup_navigation",value:function(){var e=this,i=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.make_overlay(),i&&(this.bind_overlay(),document.addEventListener("keydown",function(i){t.isElementInViewport(e.chart_wrapper)&&("37"==(i=i||window.event).keyCode?e.on_left_arrow():"39"==i.keyCode?e.on_right_arrow():"38"==i.keyCode?e.on_up_arrow():"40"==i.keyCode?e.on_down_arrow():"13"==i.keyCode&&e.on_enter_key())}))}},{key:"make_overlay",value:function(){}},{key:"bind_overlay",value:function(){}},{key:"bind_units",value:function(){}},{key:"on_left_arrow",value:function(){}},{key:"on_right_arrow",value:function(){}},{key:"on_up_arrow",value:function(){}},{key:"on_down_arrow",value:function(){}},{key:"on_enter_key",value:function(){}},{key:"get_data_point",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.current_index,e={index:t},i=this.y[0];return["svg_units","y_tops","values"].map(function(a){var s=a.slice(0,a.length-1);e[s]=i[a][t]}),e.label=this.x[t],e}},{key:"update_current_data_point",value:function(e){(e=parseInt(e))<0&&(e=0),e>=this.x.length&&(e=this.x.length-1),e!==this.current_index&&(this.current_index=e,t.fire(this.parent,"data-select",this.get_data_point()))}},{key:"get_strwidth",value:function(t){return 8*(t+"").length}},{key:"setup_utils",value:function(){}}]),e}(),c=function(_){function c(t){a(this,c);var e=o(this,(c.__proto__||Object.getPrototypeOf(c)).call(this,t));return e.x=e.data.labels,e.y=e.data.datasets,e.is_series=t.is_series,e.get_y_label=e.format_lambdas.y_label,e.get_y_tooltip=e.format_lambdas.y_tooltip,e.get_x_tooltip=e.format_lambdas.x_tooltip,e.colors=["green","blue","violet","red","orange","yellow","light-blue","light-green","purple","magenta"],e.zero_line=e.height,e}return r(c,u),s(c,[{key:"setup_values",value:function(){this.data.datasets.map(function(t){t.values=t.values.map(function(t){return isNaN(t)?0:t})}),this.setup_x(),this.setup_y()}},{key:"setup_x",value:function(){var t=this;this.set_avg_unit_width_and_x_offset(),this.x_axis_positions&&(this.x_old_axis_positions=this.x_axis_positions.slice()),this.x_axis_positions=this.x.map(function(i,a){return e(t.x_offset+a*t.avg_unit_width)}),this.x_old_axis_positions||(this.x_old_axis_positions=this.x_axis_positions.slice())}},{key:"setup_y",value:function(){this.y_axis_values&&(this.y_old_axis_values=this.y_axis_values.slice());var t=this.get_all_y_values();this.y_sums&&this.y_sums.length>0&&(t=t.concat(this.y_sums)),this.y_axis_values=this.get_y_axis_points(t),this.y_old_axis_values||(this.y_old_axis_values=this.y_axis_values.slice());var e=this.y_axis_values,i=e[e.length-1]-e[0];this.multiplier&&(this.old_multiplier=this.multiplier),this.multiplier=this.height/i,this.old_multiplier||(this.old_multiplier=this.multiplier);var a=e.indexOf(0),s=(e[1]-e[0])*this.multiplier;this.zero_line&&(this.old_zero_line=this.zero_line),this.zero_line=this.height-a*s,this.old_zero_line||(this.old_zero_line=this.zero_line)}},{key:"setup_components",value:function(){n(c.prototype.__proto__||Object.getPrototypeOf(c.prototype),"setup_components",this).call(this),this.setup_marker_components(),this.setup_aggregation_components(),this.setup_graph_components()}},{key:"setup_marker_components",value:function(){this.y_axis_group=t.createSVG("g",{className:"y axis",inside:this.draw_area}),this.x_axis_group=t.createSVG("g",{className:"x axis",inside:this.draw_area}),this.specific_y_group=t.createSVG("g",{className:"specific axis",inside:this.draw_area})}},{key:"setup_aggregation_components",value:function(){this.sum_group=t.createSVG("g",{className:"data-points",inside:this.draw_area}),this.average_group=t.createSVG("g",{className:"chart-area",inside:this.draw_area})}},{key:"setup_graph_components",value:function(){var e=this;this.svg_units_groups=[],this.y.map(function(i,a){e.svg_units_groups[a]=t.createSVG("g",{className:"data-points data-points-"+a,inside:e.draw_area})})}},{key:"make_graph_components",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.make_y_axis(),this.make_x_axis(),this.draw_graph(t),this.make_y_specifics()}},{key:"make_x_axis",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],i=void 0,a=void 0,s=void 0,n="";if("span"===this.x_axis_mode?(i=-7,a=this.height+15,s=this.height+25):"tick"===this.x_axis_mode&&(i=this.height,a=6,s=9,n="x-axis-label"),this.x_axis_group.setAttribute("transform","translate(0,"+i+")"),e)this.make_anim_x_axis(a,s,n);else{var r=1.5*this.avg_unit_width,o=r/8;this.x_axis_group.textContent="",this.x.map(function(e,i){var l=t.get_strwidth(e);if(l>r)if(t.is_series){for(var h=1;l/h*2>r;)h++;if(i%h!=0)return}else e=e.slice(0,o-3)+" ...";t.x_axis_group.appendChild(t.make_x_line(a,s,e,"x-value-text",n,t.x_axis_positions[i]))})}}},{key:"make_y_axis",value:function(){var t=this;if(arguments.length>0&&void 0!==arguments[0]&&arguments[0])return this.make_anim_y_axis(),void this.make_anim_y_specifics();var e=this.get_y_axis_line_props(),i=l(e,4),a=i[0],s=i[1],n=i[2],r=i[3];this.y_axis_group.textContent="",this.y_axis_values.map(function(e,i){t.y_axis_group.appendChild(t.make_y_line(r,a,s,e,"y-value-text",n,t.zero_line-e*t.multiplier,0===e&&0!==i))})}},{key:"get_y_axis_line_props",value:function(){if(arguments.length>0&&void 0!==arguments[0]&&arguments[0])return[this.width,this.width+5,"specific-value",0];var t=void 0,e="",i=0;return"span"===this.y_axis_mode?(t=this.width+6,i=-6):"tick"===this.y_axis_mode&&(t=-6,e="y-axis-label"),[t,-9,e,i]}},{key:"draw_graph",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];!this.raw_chart_args.hasOwnProperty("init")||this.raw_chart_args.init?e?this.draw_new_graph_and_animate():this.y.map(function(e,i){e.svg_units=[],t.make_path&&t.make_path(e,i,t.x_axis_positions,e.y_tops,e.color||t.colors[i]),t.make_new_units(e,i)}):this.y.map(function(e,i){e.svg_units=[],t.make_path&&t.make_path(e,i,t.x_axis_positions,e.y_tops,e.color||t.colors[i]),t.make_new_units(e,i),t.calc_y_dependencies()})}},{key:"draw_new_graph_and_animate",value:function(){var t=this,e=[];this.y.map(function(i,a){i.y_tops=new Array(i.values.length).fill(t.zero_line),e.push({values:i.values}),i.svg_units=[],t.make_path&&t.make_path(i,a,t.x_axis_positions,i.y_tops,i.color||t.colors[a]),t.make_new_units(i,a)}),setTimeout(function(){t.update_values(e)},350)}},{key:"setup_navigation",value:function(t){var e=this;t?setTimeout(function(){n(c.prototype.__proto__||Object.getPrototypeOf(c.prototype),"setup_navigation",e).call(e,t)},500):n(c.prototype.__proto__||Object.getPrototypeOf(c.prototype),"setup_navigation",this).call(this,t)}},{key:"make_new_units",value:function(t,e){this.make_new_units_for_dataset(this.x_axis_positions,t.y_tops,t.color||this.colors[e],e,this.y.length)}},{key:"make_new_units_for_dataset",value:function(t,e,i,a,s,n,r,o){var l=this;n||(n=this.svg_units_groups[a]),r||(r=this.y[a].svg_units),o||(o=this.unit_args),n.textContent="",r.length=0,e.map(function(e,h){var _=l.draw[o.type](t[h],e,o.args,i,h,a,s);n.appendChild(_),r.push(_)}),this.is_navigable&&this.bind_units(r)}},{key:"make_y_specifics",value:function(){var t=this;this.specific_y_group.textContent="",this.specific_values.map(function(e){t.specific_y_group.appendChild(t.make_y_line(0,t.width,t.width+5,e.title.toUpperCase(),"specific-value","specific-value",t.zero_line-e.value*t.multiplier,!1,e.line_type))})}},{key:"bind_tooltip",value:function(){var e=this;this.chart_wrapper.addEventListener("mousemove",function(i){var a=t.offset(e.chart_wrapper),s=i.pageX-a.left-e.translate_x;i.pageY-a.top-e.translate_y=0;i--){var a=this.x_axis_positions[i];if(t>a-this.avg_unit_width/2){var s=a+this.translate_x,n=this.y_min_tops[i]+this.translate_y,r=this.x.formatted&&this.x.formatted.length>0?this.x.formatted[i]:this.x[i],o=this.y.map(function(t,a){return{title:t.title,value:t.formatted?t.formatted[i]:t.values[i],color:t.color||e.colors[a]}});this.tip.set_values(s,n,r,"",o),this.tip.show_tip();break}}}},{key:"show_sums",value:function(){var t=this;this.updating=!0,this.y_sums=new Array(this.x_axis_positions.length).fill(0),this.y.map(function(e){e.values.map(function(e,i){t.y_sums[i]+=e})}),this.update_values(),this.sum_units=[],this.make_new_units_for_dataset(this.x_axis_positions,this.y_sums.map(function(i){return e(t.zero_line-i*t.multiplier)}),"light-grey",0,1,this.sum_group,this.sum_units),this.updating=!1}},{key:"hide_sums",value:function(){this.updating||(this.y_sums=[],this.sum_group.textContent="",this.sum_units=[],this.update_values())}},{key:"show_averages",value:function(){var t=this;this.old_specific_values=this.specific_values.slice(),this.y.map(function(e,i){var a=0;e.values.map(function(t){a+=t});var s=a/e.values.length;t.specific_values.push({title:"AVG "+(i+1),line_type:"dashed",value:s,auto:1})}),this.update_values()}},{key:"hide_averages",value:function(){var t=this;this.old_specific_values=this.specific_values.slice();var e=[];this.specific_values.map(function(t,i){t.auto&&e.unshift(i)}),e.map(function(e){t.specific_values.splice(e,1)}),this.update_values()}},{key:"update_values",value:function(t,e){var a=this;e||(e=this.x),this.elements_to_animate=[],this.updating=!0,this.old_x_values=this.x.slice(),this.old_y_axis_tops=this.y.map(function(t){return t.y_tops.slice()}),this.old_y_values=this.y.map(function(t){return t.values}),this.no_of_extra_pts=e.length-this.x.length,t&&this.y.map(function(e,i){e.values=t[i].values}),e&&(this.x=e),this.setup_x(),this.setup_y(),i(this.x_old_axis_positions,this.x_axis_positions)||(this.make_x_axis(!0),setTimeout(function(){a.updating||a.make_x_axis()},350)),(!i(this.y_old_axis_values,this.y_axis_values)||this.old_specific_values&&!i(this.old_specific_values,this.specific_values))&&(this.make_y_axis(!0),setTimeout(function(){a.updating||(a.make_y_axis(),a.make_y_specifics())},350)),this.calc_y_dependencies(),this.animate_graphs(),this.run_animation(),this.updating=!1}},{key:"add_data_point",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.x.length,a=this.y.map(function(t){return{values:t.values}});a.map(function(e,a){e.values.splice(i,0,t[a])});var s=this.x.slice();s.splice(i,0,e),this.update_values(a,s)}},{key:"remove_data_point",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.x.length-1;if(!(this.x.length<3)){var e=this.y.map(function(t){return{values:t.values}});e.map(function(e){e.values.splice(t,1)});var i=this.x.slice();i.splice(t,1),this.update_values(e,i)}}},{key:"run_animation",value:function(){var e=this,i=t.runSVGAnimation(this.svg,this.elements_to_animate);this.svg.parentNode==this.chart_wrapper&&(this.chart_wrapper.removeChild(this.svg),this.chart_wrapper.appendChild(i)),setTimeout(function(){i.parentNode==e.chart_wrapper&&(e.chart_wrapper.removeChild(i),e.chart_wrapper.appendChild(e.svg))},250)}},{key:"animate_graphs",value:function(){var t=this;this.y.map(function(e,i){var a=t.calc_old_and_new_postions(e,i),s=l(a,4),n=s[0],r=s[1],o=s[2],h=s[3];t.no_of_extra_pts>=0&&(t.make_path&&t.make_path(e,i,n,r,e.color||t.colors[i]),t.make_new_units_for_dataset(n,r,e.color||t.colors[i],i,t.y.length)),e.path&&t.animate_path(e,i,n,r,o,h),t.animate_units(e,i,n,r,o,h)}),setTimeout(function(){t.y.map(function(e,i){t.make_path&&t.make_path(e,i,t.x_axis_positions,e.y_tops,e.color||t.colors[i]),t.make_new_units(e,i)})},400)}},{key:"animate_path",value:function(t,e,i,a,s,n){var r=n.map(function(t,e){return s[e]+","+t}).join("L"),o=[{unit:t.path,object:t,key:"path"},{d:"M"+r},350,"easein"];if(this.elements_to_animate.push(o),t.region_path){var l="0,"+this.zero_line+"L",h="L"+this.width+","+this.zero_line,_=[{unit:t.region_path,object:t,key:"region_path"},{d:"M"+l+r+h},350,"easein"];this.elements_to_animate.push(_)}}},{key:"animate_units",value:function(t,e,i,a,s,n){var r=this,o=this.unit_args.type;t.svg_units.map(function(i,a){void 0!==s[a]&&void 0!==n[a]&&r.elements_to_animate.push(r.animate[o]({unit:i,array:t.svg_units,index:a},s[a],n[a],e))})}},{key:"calc_old_and_new_postions",value:function(t,e){var i=this.x_old_axis_positions.slice(),a=this.x_axis_positions.slice(),s=this.old_y_axis_tops[e].slice(),n=t.y_tops.slice(),r=i[i.length-1],o=s[s.length-1],l=a[a.length-1],h=n[n.length-1];if(this.no_of_extra_pts>=0){var _=new Array(Math.abs(this.no_of_extra_pts)).fill(r),u=new Array(Math.abs(this.no_of_extra_pts)).fill(o);i=i.concat(_),s=s.concat(u)}else{var c=new Array(Math.abs(this.no_of_extra_pts)).fill(l),p=new Array(Math.abs(this.no_of_extra_pts)).fill(h);a=a.concat(c),n=n.concat(p)}return[i,s,a,n]}},{key:"make_anim_x_axis",value:function(t,e,i){var a=this,s=this.x_old_axis_positions,n=this.x_axis_positions,r=this.old_x_values,o=this.x,l=s[s.length-1];this.x_axis_group.textContent="",this.make_new_axis_anim_lines(s,n,r,o,l,function(s,n,r){"string"==typeof r&&(r=parseInt(r.substring(0,r.length-1)));var o=a.make_x_line(t,e,s,"x-value-text",i,n);a.x_axis_group.appendChild(o),a.elements_to_animate&&a.elements_to_animate.push([{unit:o,array:[0],index:0},{transform:r+", 0"},350,"easein","translate",{transform:n+", 0"}])})}},{key:"make_anim_y_axis",value:function(){var t=this,e=this.y_old_axis_values.map(function(e){return t.zero_line-e*t.multiplier}),i=this.y_axis_values.map(function(e){return t.zero_line-e*t.multiplier}),a=this.y_old_axis_values,s=this.y_axis_values,n=e[e.length-1];this.y_axis_group.textContent="",this.make_new_axis_anim_lines(e,i,a,s,n,this.add_and_animate_y_line.bind(this),this.y_axis_group)}},{key:"make_anim_y_specifics",value:function(){var t=this;this.specific_y_group.textContent="",this.specific_values.map(function(e){t.add_and_animate_y_line(e.title,t.old_zero_line-e.value*t.old_multiplier,t.zero_line-e.value*t.multiplier,0,t.specific_y_group,e.line_type,!0)})}},{key:"make_new_axis_anim_lines",value:function(t,e,i,a,s,n,r){var o=void 0,l=void 0,h=a.length-i.length;if(h>0)o=e.slice(0,t.length),l=a.slice(0,i.length);else{var _=new Array(Math.abs(h)).fill("");l=a.concat(_);var u=new Array(Math.abs(h)).fill(s+"F");o=e.concat(u)}if(l.map(function(e,i){n(e,t[i],o[i],i,r)}),h>0){var c=a.slice(i.length),p=e.slice(t.length);c.map(function(t,e){n(t,s,p[e],e,r)})}}},{key:"make_x_line",value:function(e,i,a,s,n,r){var o=t.createSVG("line",{x1:0,x2:0,y1:0,y2:e}),l=t.createSVG("text",{className:s,x:0,y:i,dy:".71em",innerHTML:a}),h=t.createSVG("g",{className:"tick "+n,transform:"translate("+r+", 0)"});return h.appendChild(o),h.appendChild(l),h}},{key:"make_y_line",value:function(e,i,a,s,n,r,o){var l=arguments.length>7&&void 0!==arguments[7]&&arguments[7],h=arguments.length>8&&void 0!==arguments[8]?arguments[8]:"",_=t.createSVG("line",{className:"dashed"===h?"dashed":"",x1:e,x2:i,y1:0,y2:0}),u=t.createSVG("text",{className:n,x:a,y:0,dy:".32em",innerHTML:s+""}),c=t.createSVG("g",{className:"tick "+r,transform:"translate(0, "+o+")","stroke-opacity":1});return l&&(_.style.stroke="rgba(27, 31, 35, 0.6)"),c.appendChild(_),c.appendChild(u),c}},{key:"add_and_animate_y_line",value:function(t,e,i,a,s,n){var r=arguments.length>6&&void 0!==arguments[6]&&arguments[6],o=!1;"string"==typeof i&&(i=parseInt(i.substring(0,i.length-1)),o=!0);var h={transform:"0, "+i},_={transform:"0, "+e};o&&(h["stroke-opacity"]=0);var u=this.get_y_axis_line_props(r),c=l(u,4),p=c[0],d=c[1],f=c[2],g=c[3],v=r?"specific-value":"y-value-text";t=r?(t+"").toUpperCase():t;var y=this.make_y_line(g,p,d,t,v,f,e,0===t&&0!==a,n);s.appendChild(y),this.elements_to_animate&&this.elements_to_animate.push([{unit:y,array:[0],index:0},h,350,"easein","translate",_])}},{key:"get_y_axis_points",value:function(t){var e=this,i=void 0,a=void 0,s=void 0,n=void 0,r=parseInt(Math.max.apply(Math,h(t))),o=parseInt(Math.min.apply(Math,h(t)));o>=0&&(o=0);var _=function(t,i){var a=void 0,s=void 0,n=void 0,r=void 0,o=void 0;if((t+"").length<=1)a=10,n=5;else{var h=e.calc_upper_bound_and_no_of_parts(t),_=l(h,2);a=_[0],n=_[1]}return o=a/n,r=e.calc_no_of_parts(i,o),s=r*o,[a,s,n,r,o]},u=-1*o;if(u<=r){var c=_(r,u),p=l(c,5);i=p[1],a=p[2],s=p[3],n=p[4],0===u&&(i=0,s=0)}else{var d=_(u,r),f=l(d,5);i=f[0],s=f[2],a=f[3],n=f[4]}a%2!=0&&s>0&&a++,s%2!=0&&(s++,i+=n);var g=a+s;return g>5&&(g/=2,n*=2,a/=2),r<(a-1)*n&&g--,this.get_intervals(-1*i,n,g)}},{key:"get_intervals",value:function(t,e,i){for(var a=[],s=0;s<=i;s++)a.push(t),t+=e;return a}},{key:"calc_upper_bound_and_no_of_parts",value:function(t){var e=Math.pow(10,(t+"").length-1),i=this.calc_no_of_parts(t,e);return[e*i,i]}},{key:"calc_no_of_parts",value:function(t,e){var i=Math.ceil(t/e);return i%2!=0&&i++,i}},{key:"get_optimal_no_of_parts",value:function(t){return t<5?t:t/2}},{key:"set_avg_unit_width_and_x_offset",value:function(){this.avg_unit_width=this.width/(this.x.length-1),this.x_offset=0}},{key:"get_all_y_values",value:function(){var t=[];return this.y.map(function(e){t=t.concat(e.values)}),t.concat(this.specific_values.map(function(t){return t.value}))}},{key:"calc_y_dependencies",value:function(){var t=this;this.y_min_tops=new Array(this.x_axis_positions.length).fill(9999),this.y.map(function(i){i.y_tops=i.values.map(function(i){return e(t.zero_line-i*t.multiplier)}),i.y_tops.map(function(e,i){e1&&void 0!==arguments[1]&&arguments[1],a="path-fill-gradient-"+e,s=t.createSVG("linearGradient",{inside:this.svg_defs,id:a,x1:0,x2:0,y1:0,y2:1}),n=function(e,i,a,s){t.createSVG("stop",{className:"stop-color "+a,inside:e,offset:i,"stop-opacity":s})},r=[1,.6,.2];return i&&(r=[.4,.2,0]),n(s,"0%",e,r[0]),n(s,"50%",e,r[1]),n(s,"100%",e,r[2]),a}}]),i}(),f=function(t){function e(t){a(this,e);var i=o(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return i.type="scatter",t.dot_radius?i.dot_radius=t.dot_radius:i.dot_radius=8,i.setup(),i}return r(e,d),s(e,[{key:"setup_graph_components",value:function(){this.setup_path_groups(),n(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_graph_components",this).call(this)}},{key:"setup_path_groups",value:function(){}},{key:"setup_values",value:function(){n(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setup_values",this).call(this),this.unit_args={type:"dot",args:{radius:this.dot_radius}}}},{key:"make_paths",value:function(){}},{key:"make_path",value:function(){}}]),e}(),g=function(e){function i(t){a(this,i);var e=o(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,t));return e.type="percentage",e.get_y_label=e.format_lambdas.y_label,e.get_x_tooltip=e.format_lambdas.x_tooltip,e.get_y_tooltip=e.format_lambdas.y_tooltip,e.max_slices=10,e.max_legend_points=6,e.colors=t.colors,(!e.colors||e.colors.length0}),i=e;if(e.length>this.max_slices){e.sort(function(t,e){return e[0]-t[0]}),i=e.slice(0,this.max_slices-1);var a=0;e.slice(this.max_slices-1).map(function(t){a+=t[0]}),i.push([a,"Rest"]),this.colors[this.max_slices-1]="grey"}this.labels=[],i.map(function(e){t.slice_totals.push(e[0]),t.labels.push(e[1])}),this.legend_totals=this.slice_totals.slice(0,this.max_legend_points)}},{key:"setup_utils",value:function(){}},{key:"make_graph_components",value:function(){var e=this;this.grand_total=this.slice_totals.reduce(function(t,e){return t+e},0),this.slices=[],this.slice_totals.map(function(i,a){var s=t.create("div",{className:"progress-bar background "+e.colors[a],style:"width: "+100*i/e.grand_total+"%",inside:e.percentage_bar});e.slices.push(s)})}},{key:"bind_tooltip",value:function(){var e=this;this.slices.map(function(i,a){i.addEventListener("mouseenter",function(){var s=t.offset(e.chart_wrapper),n=t.offset(i),r=n.left-s.left+i.offsetWidth/2,o=n.top-s.top-6,l=(e.formatted_labels&&e.formatted_labels.length>0?e.formatted_labels[a]:e.labels[a])+": ",h=(100*e.slice_totals[a]/e.grand_total).toFixed(1);e.tip.set_values(r,o,l,h+"%"),e.tip.show_tip()})})}},{key:"show_summary",value:function(){var e=this,i=this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels:this.labels;this.legend_totals.map(function(a,s){a&&(t.create("div",{className:"stats",inside:e.stats_wrapper}).innerHTML='\n\t\t\t\t\t'+i[s]+":\n\t\t\t\t\t"+a+"\n\t\t\t\t")})}}]),i}(),v=function(e){function i(t){var e=t.start,s=void 0===e?"":e,n=t.domain,r=void 0===n?"":n,l=t.subdomain,h=void 0===l?"":l,_=t.data,u=void 0===_?{}:_,c=t.discrete_domains,p=void 0===c?0:c,d=t.count_label,f=void 0===d?"":d;a(this,i);var g=o(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,arguments[0]));g.type="heatmap",g.domain=r,g.subdomain=h,g.data=u,g.discrete_domains=p,g.count_label=f;var v=new Date;return g.start=s||g.add_days(v,365),g.legend_colors=["#ebedf0","#c6e48b","#7bc96f","#239a3b","#196127"],g.translate_x=0,g.setup(),g}return r(i,u),s(i,[{key:"setup_base_values",value:function(){this.today=new Date,this.start||(this.start=new Date,this.start.setFullYear(this.start.getFullYear()-1)),this.first_week_start=new Date(this.start.toDateString()),this.last_week_start=new Date(this.today.toDateString()),7!==this.first_week_start.getDay()&&this.add_days(this.first_week_start,-1*this.first_week_start.getDay()),7!==this.last_week_start.getDay()&&this.add_days(this.last_week_start,-1*this.last_week_start.getDay()),this.no_of_cols=this.get_weeks_between(this.first_week_start+"",this.last_week_start+"")+1}},{key:"set_width",value:function(){this.base_width=12*this.no_of_cols,this.discrete_domains&&(this.base_width+=144)}},{key:"setup_components",value:function(){this.domain_label_group=t.createSVG("g",{className:"domain-label-group chart-label",inside:this.draw_area}),this.data_groups=t.createSVG("g",{className:"data-groups",inside:this.draw_area,transform:"translate(0, 20)"})}},{key:"setup_values",value:function(){this.domain_label_group.textContent="",this.data_groups.textContent="",this.distribution=this.get_distribution(this.data,this.legend_colors),this.month_names=["January","February","March","April","May","June","July","August","September","October","November","December"],this.render_all_weeks_and_store_x_values(this.no_of_cols)}},{key:"render_all_weeks_and_store_x_values",value:function(t){var e=new Date(this.first_week_start);this.week_col=0,this.current_month=e.getMonth(),this.months=[this.current_month+""],this.month_weeks={},this.month_start_points=[],this.month_weeks[this.current_month]=0,this.month_start_points.push(13);for(var i=0;i0&&void 0!==arguments[0]?arguments[0]:{},e=arguments[1],i=Object.keys(t).map(function(e){return t[e]}),a=Math.max.apply(Math,h(i)),s=1/(e.length-1),n=[];return e.map(function(t,e){var i=a*(s*e);n.push(i)}),n}},{key:"get_max_checkpoint",value:function(t,e){return e.filter(function(i,a){return 1===a?e[0]9?"":"0")+e,(i>9?"":"0")+i,t.getFullYear()].join("-")}},{key:"get_weeks_between",value:function(t,e){return Math.ceil(this.get_days_between(t,e)/7)}},{key:"get_days_between",value:function(t,e){return(this.treat_as_utc(e)-this.treat_as_utc(t))/864e5}},{key:"add_days",value:function(t,e){t.setDate(t.getDate()+e)}},{key:"get_month_name",value:function(){}}]),i}(),y=function t(e){return a(this,t),"line"===e.type?new d(arguments[0]):"bar"===e.type?new p(arguments[0]):"scatter"===e.type?new f(arguments[0]):"percentage"===e.type?new g(arguments[0]):"heatmap"===e.type?new v(arguments[0]):new d(arguments[0])};return y}();
+//# sourceMappingURL=frappe-charts.min.js.map
diff --git a/frappe/public/less/charts.less b/frappe/public/less/charts.less
deleted file mode 100644
index 03ff165a32..0000000000
--- a/frappe/public/less/charts.less
+++ /dev/null
@@ -1,327 +0,0 @@
-
-/* charts */
-.chart-container {
- // font-family: Verdana, Geneva, Tahoma, sans-serif;
-
- .graph-focus-margin {
- margin: 0px 5%;
- }
-
- .graphics {
- margin-top: 10px;
- padding-top: 10px;
- padding-bottom: 10px;
- position: relative;
- }
-
- .graph-stats-group {
- display: flex;
- justify-content: space-around;
- flex: 1;
- }
-
- .graph-stats-container {
- display: flex;
- justify-content: space-around;
- padding-top: 10px;
-
- .stats {
- padding-bottom: 15px;
- }
-
- // Custom (impactified) stats style
- .stats-title {
- color: #8D99A6;
- }
- .stats-value {
- font-size: 20px;
- font-weight: 300;
- }
- .stats-description {
- font-size: 12px;
- color: #8D99A6;
- }
- .graph-data .stats-value {
- color: #98d85b;
- }
- }
-
- .axis, .chart-label {
- font-size: 10px;
- fill: #555b51;
-
- line {
- stroke: rgba(27,31,35,0.2);
- }
- }
-
- .percentage-graph {
- .progress {
- margin-bottom: 0px;
- }
- }
-
- .data-points {
- circle {
- // fill: #28a745;
- stroke: #fff;
- stroke-width: 2;
- }
-
- g.mini {
- // fill: #98d85b;
- }
-
- path {
- fill: none;
- // stroke: #28a745;
- stroke-opacity: 1;
- stroke-width: 2px;
- }
- }
-
- line.dashed {
- stroke-dasharray: 5,3;
- }
-
- .tick {
- &.x-axis-label {
- display: block;
- }
-
- .specific-value {
- text-anchor: start;
- }
-
- .y-value-text {
- text-anchor: end;
- }
-
- .x-value-text {
- text-anchor: middle;
- }
- }
-}
-
-.graph-svg-tip {
- position: absolute;
- z-index: 99999;
- padding: 10px;
- font-size: 12px;
- color: #959da5;
- text-align: center;
- background: rgba(0,0,0,0.8);
- border-radius: 3px;
-
- &.comparison {
- padding: 0;
- text-align: left;
- pointer-events: none;
-
- .title {
- display: block;
- padding: 10px;
- margin: 0;
- font-weight: 600;
- line-height: 1;
- pointer-events: none;
- }
-
- ul {
- margin: 0;
- white-space: nowrap;
- list-style: none;
- }
-
- li {
- display: inline-block;
- padding: 5px 10px;
- }
- }
-
- ul, ol {
- padding-left: 0;
- display: flex;
- }
-
- ul.data-point-list li {
- min-width: 90px;
- flex: 1;
- }
-
- strong {
- color: #dfe2e5;
- }
-
- .svg-pointer {
- position: absolute;
- bottom: -10px;
- left: 50%;
- width: 5px;
- height: 5px;
- margin: 0 0 0 -5px;
- content: " ";
- border: 5px solid transparent;
- border-top-color: rgba(0,0,0,0.8);
- }
-}
-
-.stroke.grey {
- stroke: #F0F4F7;
-}
-.stroke.blue {
- stroke: #5e64ff;
-}
-.stroke.red {
- stroke: #ff5858;
-}
-.stroke.light-green {
- stroke: #98d85b;
-}
-.stroke.lightgreen {
- stroke: #98d85b;
-}
-.stroke.green {
- stroke: #28a745;
-}
-.stroke.orange {
- stroke: #ffa00a;
-}
-.stroke.purple {
- stroke: #743ee2;
-}
-.stroke.darkgrey {
- stroke: #b8c2cc;
-}
-.stroke.black {
- stroke: #36414C;
-}
-.stroke.yellow {
- stroke: #FEEF72;
-}
-.stroke.light-blue {
- stroke: #7CD6FD;
-}
-.stroke.lightblue {
- stroke: #7CD6FD;
-}
-
-.fill.grey {
- fill: #F0F4F7;
-}
-.fill.blue {
- fill: #5e64ff;
-}
-.fill.red {
- fill: #ff5858;
-}
-.fill.light-green {
- fill: #98d85b;
-}
-.fill.lightgreen {
- fill: #98d85b;
-}
-.fill.green {
- fill: #28a745;
-}
-.fill.orange {
- fill: #ffa00a;
-}
-.fill.purple {
- fill: #743ee2;
-}
-.fill.darkgrey {
- fill: #b8c2cc;
-}
-.fill.black {
- fill: #36414C;
-}
-.fill.yellow {
- fill: #FEEF72;
-}
-.fill.light-blue {
- fill: #7CD6FD;
-}
-.fill.lightblue {
- fill: #7CD6FD;
-}
-
-.background.grey {
- background: #F0F4F7;
-}
-.background.blue {
- background: #5e64ff;
-}
-.background.red {
- background: #ff5858;
-}
-.background.light-green {
- background: #98d85b;
-}
-.background.lightgreen {
- background: #98d85b;
-}
-.background.green {
- background: #28a745;
-}
-.background.orange {
- background: #ffa00a;
-}
-.background.purple {
- background: #743ee2;
-}
-.background.darkgrey {
- background: #b8c2cc;
-}
-.background.black {
- background: #36414C;
-}
-.background.yellow {
- background: #FEEF72;
-}
-.background.light-blue {
- background: #7CD6FD;
-}
-.background.lightblue {
- background: #7CD6FD;
-}
-
-.border-top.grey {
- border-top: 3px solid #F0F4F7;
-}
-.border-top.blue {
- border-top: 3px solid #5e64ff;
-}
-.border-top.red {
- border-top: 3px solid #ff5858;
-}
-.border-top.light-green {
- border-top: 3px solid #98d85b;
-}
-.border-top.lightgreen {
- border-top: 3px solid #98d85b;
-}
-.border-top.green {
- border-top: 3px solid #28a745;
-}
-.border-top.orange {
- border-top: 3px solid #ffa00a;
-}
-.border-top.purple {
- border-top: 3px solid #743ee2;
-}
-.border-top.darkgrey {
- border-top: 3px solid #b8c2cc;
-}
-.border-top.black {
- border-top: 3px solid #36414C;
-}
-.border-top.yellow {
- border-top: 3px solid #FEEF72;
-}
-.border-top.light-blue {
- border-top: 3px solid #7CD6FD;
-}
-.border-top.lightblue {
- border-top: 3px solid #7CD6FD;
-}