From fbfdf835f3fb6067afeac620912859e82d3efa6c Mon Sep 17 00:00:00 2001 From: pratu16x7 Date: Sun, 5 Nov 2017 21:23:08 +0530 Subject: [PATCH 1/3] [start] decouple utils --- src/scripts/charts/AxisChart.js | 35 ++++------------ src/scripts/charts/BaseChart.js | 12 +++--- src/scripts/helpers/animate.js | 0 src/scripts/helpers/colors.js | 18 ++++++++ src/scripts/helpers/draw.js | 25 ++++++++++++ src/scripts/helpers/intervals.js | 0 src/scripts/helpers/utils.js | 70 +++++++++++++++++++++++++++++--- 7 files changed, 120 insertions(+), 40 deletions(-) create mode 100644 src/scripts/helpers/animate.js create mode 100644 src/scripts/helpers/colors.js create mode 100644 src/scripts/helpers/draw.js create mode 100644 src/scripts/helpers/intervals.js diff --git a/src/scripts/charts/AxisChart.js b/src/scripts/charts/AxisChart.js index 3f16c38..9f073d5 100644 --- a/src/scripts/charts/AxisChart.js +++ b/src/scripts/charts/AxisChart.js @@ -1,5 +1,5 @@ import $ from '../helpers/dom'; -import { float_2, arrays_equal } from '../helpers/utils'; +import { float_2, arrays_equal, get_string_width, get_bar_height_and_y_attr } from '../helpers/utils'; import BaseChart from './BaseChart'; export default class AxisChart extends BaseChart { @@ -19,6 +19,8 @@ export default class AxisChart extends BaseChart { 'yellow', 'light-blue', 'light-green', 'purple', 'magenta']; this.zero_line = this.height; + + this.old_values = {}; } setup_values() { @@ -113,6 +115,7 @@ export default class AxisChart extends BaseChart { // make VERTICAL lines for x values make_x_axis(animate=false) { + let char_width = 8; let start_at, height, text_start_at, axis_line_class = ''; if(this.x_axis_mode === 'span') { // long spanning lines start_at = -7; @@ -137,7 +140,7 @@ export default class AxisChart extends BaseChart { this.x_axis_group.textContent = ''; this.x.map((point, i) => { - let space_taken = this.get_strwidth(point) + 2; + let space_taken = get_string_width(point, char_width) + 2; if(space_taken > allowed_space) { if(this.is_series) { // Skip some axis lines if X axis is a series @@ -986,30 +989,6 @@ export default class AxisChart extends BaseChart { // this.make_tooltip(); } - get_bar_height_and_y_attr(y_top) { - let height, y; - if (y_top <= this.zero_line) { - height = this.zero_line - y_top; - y = y_top; - - // In case of invisible bars - if(height === 0) { - height = this.height * 0.01; - y -= height; - } - } else { - height = y_top - this.zero_line; - y = this.zero_line; - - // In case of invisible bars - if(height === 0) { - height = this.height * 0.01; - } - } - - return [height, y]; - } - setup_utils() { this.draw = { 'bar': (x, y_top, args, color, index, dataset_index, no_of_datasets) => { @@ -1019,7 +998,7 @@ export default class AxisChart extends BaseChart { let width = total_width / no_of_datasets; let current_x = start_x + width * dataset_index; - let [height, y] = this.get_bar_height_and_y_attr(y_top); + let [height, y] = get_bar_height_and_y_attr(y_top, this.zero_line, this.height); return $.createSVG('rect', { className: `bar mini fill ${color}`, @@ -1046,7 +1025,7 @@ export default class AxisChart extends BaseChart { 'bar': (bar_obj, x, y_top, index) => { let start = x - this.avg_unit_width/4; let width = (this.avg_unit_width/2)/this.y.length; - let [height, y] = this.get_bar_height_and_y_attr(y_top); + let [height, y] = get_bar_height_and_y_attr(y_top, this.zero_line, this.height); x = start + (width * index); diff --git a/src/scripts/charts/BaseChart.js b/src/scripts/charts/BaseChart.js index 77c2535..85efb3d 100644 --- a/src/scripts/charts/BaseChart.js +++ b/src/scripts/charts/BaseChart.js @@ -1,5 +1,6 @@ import SvgTip from '../objects/SvgTip'; import $ from '../helpers/dom'; +import { get_string_width } from '../helpers/utils'; import Chart from '../charts'; export default class BaseChart { @@ -122,9 +123,11 @@ export default class BaseChart { set_width() { let special_values_width = 0; + let char_width = 8; this.specific_values.map(val => { - if(this.get_strwidth(val.title) > special_values_width) { - special_values_width = this.get_strwidth(val.title) - 40; + let str_width = get_string_width((val.title + ""), char_width); + if(str_width > special_values_width) { + special_values_width = str_width - 40; } }); this.base_width = this.parent.offsetWidth - special_values_width; @@ -256,11 +259,6 @@ export default class BaseChart { $.fire(this.parent, "data-select", this.get_data_point()); } - // Helpers - get_strwidth(string) { - return (string+"").length * 8; - } - // Objects setup_utils() { } } diff --git a/src/scripts/helpers/animate.js b/src/scripts/helpers/animate.js new file mode 100644 index 0000000..e69de29 diff --git a/src/scripts/helpers/colors.js b/src/scripts/helpers/colors.js new file mode 100644 index 0000000..fc4ae36 --- /dev/null +++ b/src/scripts/helpers/colors.js @@ -0,0 +1,18 @@ +function limit_color(r){ + if (r > 255) return 255; + else if (r < 0) return 0; + return r; +} + +export function lighten_darken_color(col, amt) { + let usePound = false; + if (col[0] == "#") { + col = col.slice(1); + usePound = true; + } + let num = parseInt(col,16); + let r = limit_color((num >> 16) + amt); + let b = limit_color(((num >> 8) & 0x00FF) + amt); + let g = limit_color((num & 0x0000FF) + amt); + return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); +} \ No newline at end of file diff --git a/src/scripts/helpers/draw.js b/src/scripts/helpers/draw.js new file mode 100644 index 0000000..03c3a29 --- /dev/null +++ b/src/scripts/helpers/draw.js @@ -0,0 +1,25 @@ +export function float_2(d) { + return parseFloat(d.toFixed(2)); +} + +export function make_x_line(height, text_start_at, point, label_class, axis_line_class, x_pos) { + +} + +export function make_y_line() {} + +export function draw_x_line() {} + +export function draw_y_line() {} + +export function label_x_line() {} + +export function label_y_line() {} + +export function get_anim_x_line() {} + +export function get_anim_y_line() {} + +export function draw_rect() {} + +export function draw_circle() {} \ No newline at end of file diff --git a/src/scripts/helpers/intervals.js b/src/scripts/helpers/intervals.js new file mode 100644 index 0000000..e69de29 diff --git a/src/scripts/helpers/utils.js b/src/scripts/helpers/utils.js index d9064a6..b9ed175 100644 --- a/src/scripts/helpers/utils.js +++ b/src/scripts/helpers/utils.js @@ -1,6 +1,4 @@ -export function float_2(d) { - return parseFloat(d.toFixed(2)); -} + export function arrays_equal(arr1, arr2) { if(arr1.length !== arr2.length) return false; @@ -17,7 +15,7 @@ function limitColor(r){ return r; } -export function lightenDarkenColor(col,amt) { +export function lightenDarkenColor(col, amt) { let usePound = false; if (col[0] == "#") { col = col.slice(1); @@ -43,4 +41,66 @@ export function shuffle(array) { let j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } -} \ No newline at end of file + + return array; +} + +export function get_string_width(string, char_width) { + return (string+"").length * char_width; +} + +export function get_bar_height_and_y_attr(y_top, zero_line, total_height) { + let height, y; + if (y_top <= zero_line) { + height = zero_line - y_top; + y = y_top; + + // In case of invisible bars + if(height === 0) { + height = total_height * 0.01; + y -= height; + } + } else { + height = y_top - zero_line; + y = zero_line; + + // In case of invisible bars + if(height === 0) { + height = total_height * 0.01; + } + } + + return [height, y]; +} + +export function divide_if_more_than_five(number) { + return (number < 5) ? number : number / 2; +} + +export function calc_whole_parts(value, divisor) { + return Math.ceil(value / divisor); +} + +export function make_even(number) { + return (number % 2 !== 0) ? ++number : number; +} + +export function calc_part_size(value) { + // take care of fractions + return Math.pow(10, ((value+"").length - 1)); +} + +export function calc_upper_bound(value) { + +} + +export function calc_intervals(start, interval_size, count) { + let intervals = []; + for(var i = 0; i <= count; i++){ + intervals.push(start); + start += interval_size; + } + return intervals; +} + +// export function From e153c35179c1dd692ab9c54433984d254dae15e6 Mon Sep 17 00:00:00 2001 From: pratu16x7 Date: Wed, 8 Nov 2017 23:59:42 +0530 Subject: [PATCH 2/3] [major] widespread modularization, refactoring utils --- dist/frappe-charts.min.cjs.js | 525 ++++++++++++----------- dist/frappe-charts.min.esm.js | 525 ++++++++++++----------- dist/frappe-charts.min.iife.js | 2 +- docs/assets/js/frappe-charts.min.js | 2 +- src/scripts/charts/AxisChart.js | 63 +-- src/scripts/charts/BaseChart.js | 4 +- src/scripts/charts/Heatmap.js | 2 +- src/scripts/charts/LineChart.js | 2 +- src/scripts/charts/PercentageChart.js | 2 +- src/scripts/charts/PieChart.js | 13 +- src/scripts/helpers/animate.js | 0 src/scripts/helpers/draw.js | 25 -- src/scripts/helpers/intervals.js | 0 src/scripts/helpers/utils.js | 106 ----- src/scripts/objects/SvgTip.js | 2 +- src/scripts/utils/animate.js | 101 +++++ src/scripts/{helpers => utils}/colors.js | 0 src/scripts/{helpers => utils}/dom.js | 104 ----- src/scripts/utils/draw.js | 102 +++++ src/scripts/utils/helpers.js | 47 ++ src/scripts/utils/intervals.js | 33 ++ 21 files changed, 864 insertions(+), 796 deletions(-) delete mode 100644 src/scripts/helpers/animate.js delete mode 100644 src/scripts/helpers/draw.js delete mode 100644 src/scripts/helpers/intervals.js delete mode 100644 src/scripts/helpers/utils.js create mode 100644 src/scripts/utils/animate.js rename src/scripts/{helpers => utils}/colors.js (100%) rename src/scripts/{helpers => utils}/dom.js (53%) create mode 100644 src/scripts/utils/draw.js create mode 100644 src/scripts/utils/helpers.js create mode 100644 src/scripts/utils/intervals.js diff --git a/dist/frappe-charts.min.cjs.js b/dist/frappe-charts.min.cjs.js index 1bfdd2f..d849f6e 100644 --- a/dist/frappe-charts.min.cjs.js +++ b/dist/frappe-charts.min.cjs.js @@ -284,15 +284,6 @@ function $(expr, con) { return typeof expr === "string" ? (con || document).querySelector(expr) : expr || null; } -var 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" -}; - $.findNodeIndex = function (node) { var i = 0; while (node.previousSibling) { @@ -357,112 +348,6 @@ $.createSVG = function (tag, o) { return element; }; -$.runSVGAnimation = function (svg_container, elements) { - // let parent = elements[0][0]['unit'].parentNode; - - var new_elements = []; - var anim_elements = []; - - elements.map(function (element) { - var obj = element[0]; - var parent = obj.unit.parentNode; - // let index = let findNodeIndex(obj.unit); - - var anim_element = void 0, - new_element = void 0; - - element[0] = obj.unit; - - var _$$animateSVG = $.animateSVG.apply($, toConsumableArray(element)); - - var _$$animateSVG2 = slicedToArray(_$$animateSVG, 2); - - anim_element = _$$animateSVG2[0]; - new_element = _$$animateSVG2[1]; - - - new_elements.push(new_element); - anim_elements.push([anim_element, parent]); - - parent.replaceChild(anim_element, obj.unit); - - if (obj.array) { - obj.array[obj.index] = new_element; - } else { - obj.object[obj.key] = new_element; - } - }); - - var anim_svg = svg_container.cloneNode(true); - - anim_elements.map(function (anim_element, i) { - anim_element[1].replaceChild(new_elements[i], anim_element[0]); - elements[i][0] = new_elements[i]; - }); - - return anim_svg; -}; - -$.transform = function (element, style) { - element.style.transform = style; - element.style.webkitTransform = style; - element.style.msTransform = style; - element.style.mozTransform = style; - element.style.oTransform = style; -}; - -$.animateSVG = function (element, props, dur) { - var easing_type = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "linear"; - var type = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined; - var old_values = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {}; - - - var anim_element = element.cloneNode(true); - var new_element = element.cloneNode(true); - - for (var attributeName in props) { - var animate_element = void 0; - if (attributeName === 'transform') { - animate_element = document.createElementNS("http://www.w3.org/2000/svg", "animateTransform"); - } else { - animate_element = document.createElementNS("http://www.w3.org/2000/svg", "animate"); - } - var current_value = old_values[attributeName] || element.getAttribute(attributeName); - var value = props[attributeName]; - - var 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", - fill: 'freeze' - }; - - if (type) { - anim_attr["type"] = type; - } - - for (var i in anim_attr) { - animate_element.setAttribute(i, anim_attr[i]); - } - - anim_element.appendChild(animate_element); - - if (type) { - new_element.setAttribute(attributeName, "translate(" + value + ")"); - } else { - new_element.setAttribute(attributeName, value); - } - } - - return [anim_element, new_element]; -}; - $.offset = function (element) { var rect = element.getBoundingClientRect(); return { @@ -519,10 +404,223 @@ $.fire = function (target, type, properties) { return target.dispatchEvent(evt); }; +var UnitRenderer = function () { + var UnitRenderer = function UnitRenderer(total_height, zero_line, avg_unit_width) { + this.total_height = total_height; + this.zero_line = zero_line; + this.avg_unit_width = avg_unit_width; + }; + + function get_bar_height_and_y_attr(y_top, zero_line, total_height) { + var height = void 0, + y = void 0; + if (y_top <= zero_line) { + height = zero_line - y_top; + y = y_top; + + // In case of invisible bars + if (height === 0) { + height = total_height * 0.01; + y -= height; + } + } else { + height = y_top - zero_line; + y = zero_line; + + // In case of invisible bars + if (height === 0) { + height = total_height * 0.01; + } + } + + return [height, y]; + } + + UnitRenderer.prototype = { + draw_bar: function draw_bar(x, y_top, args, color, index, dataset_index, no_of_datasets) { + var total_width = this.avg_unit_width - args.space_width; + var start_x = x - total_width / 2; + + var width = total_width / no_of_datasets; + var current_x = start_x + width * dataset_index; + + var _get_bar_height_and_y = get_bar_height_and_y_attr(y_top, this.zero_line, this.total_height), + _get_bar_height_and_y2 = slicedToArray(_get_bar_height_and_y, 2), + height = _get_bar_height_and_y2[0], + y = _get_bar_height_and_y2[1]; + + return $.createSVG('rect', { + className: 'bar mini fill ' + color, + 'data-point-index': index, + x: current_x, + y: y, + width: width, + height: height + }); + }, + + draw_dot: function draw_dot(x, y, args, color, index) { + return $.createSVG('circle', { + className: 'fill ' + color, + 'data-point-index': index, + cx: x, + cy: y, + r: args.radius + }); + }, + + animate_bar: function animate_bar(bar_obj, x, y_top, index, no_of_datasets) { + var start = x - this.avg_unit_width / 4; + var width = this.avg_unit_width / 2 / no_of_datasets; + + var _get_bar_height_and_y3 = get_bar_height_and_y_attr(y_top, this.zero_line, this.total_height), + _get_bar_height_and_y4 = slicedToArray(_get_bar_height_and_y3, 2), + height = _get_bar_height_and_y4[0], + y = _get_bar_height_and_y4[1]; + + x = start + width * index; + + return [bar_obj, { width: width, height: height, x: x, y: y }, 350, "easein"]; + // bar.animate({height: args.new_height, y: y_top}, 350, mina.easein); + }, + + animate_dot: function animate_dot(dot_obj, x, y_top) { + return [dot_obj, { cx: x, cy: y_top }, 350, "easein"]; + // dot.animate({cy: y_top}, 350, mina.easein); + } + }; + + return UnitRenderer; +}(); + +// Leveraging SMIL Animations + +var 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" +}; + +function animateSVG(element, props, dur) { + var easing_type = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "linear"; + var type = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined; + var old_values = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {}; + + + var anim_element = element.cloneNode(true); + var new_element = element.cloneNode(true); + + for (var attributeName in props) { + var animate_element = void 0; + if (attributeName === 'transform') { + animate_element = document.createElementNS("http://www.w3.org/2000/svg", "animateTransform"); + } else { + animate_element = document.createElementNS("http://www.w3.org/2000/svg", "animate"); + } + var current_value = old_values[attributeName] || element.getAttribute(attributeName); + var value = props[attributeName]; + + var 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", + fill: 'freeze' + }; + + if (type) { + anim_attr["type"] = type; + } + + for (var i in anim_attr) { + animate_element.setAttribute(i, anim_attr[i]); + } + + anim_element.appendChild(animate_element); + + if (type) { + new_element.setAttribute(attributeName, "translate(" + value + ")"); + } else { + new_element.setAttribute(attributeName, value); + } + } + + return [anim_element, new_element]; +} + +function transform(element, style) { + // eslint-disable-line no-unused-vars + element.style.transform = style; + element.style.webkitTransform = style; + element.style.msTransform = style; + element.style.mozTransform = style; + element.style.oTransform = style; +} + +function runSVGAnimation(svg_container, elements) { + var new_elements = []; + var anim_elements = []; + + elements.map(function (element) { + var obj = element[0]; + var parent = obj.unit.parentNode; + + var anim_element = void 0, + new_element = void 0; + + element[0] = obj.unit; + + var _animateSVG = animateSVG.apply(undefined, toConsumableArray(element)); + + var _animateSVG2 = slicedToArray(_animateSVG, 2); + + anim_element = _animateSVG2[0]; + new_element = _animateSVG2[1]; + + + new_elements.push(new_element); + anim_elements.push([anim_element, parent]); + + parent.replaceChild(anim_element, obj.unit); + + if (obj.array) { + obj.array[obj.index] = new_element; + } else { + obj.object[obj.key] = new_element; + } + }); + + var anim_svg = svg_container.cloneNode(true); + + anim_elements.map(function (anim_element, i) { + anim_element[1].replaceChild(new_elements[i], anim_element[0]); + elements[i][0] = new_elements[i]; + }); + + return anim_svg; +} + +/** + * Returns the value of a number upto 2 decimal places. + * @param {Number} d Any number + */ function float_2(d) { return parseFloat(d.toFixed(2)); } +/** + * Returns whether or not two given arrays are equal. + * @param {Array} arr1 First array + * @param {Array} arr2 Second array + */ function arrays_equal(arr1, arr2) { if (arr1.length !== arr2.length) return false; var are_equal = true; @@ -532,29 +630,21 @@ function arrays_equal(arr1, arr2) { return are_equal; } -function limitColor(r) { - if (r > 255) return 255;else if (r < 0) return 0; - return r; -} - -function lightenDarkenColor(col, amt) { - var usePound = false; - if (col[0] == "#") { - col = col.slice(1); - usePound = true; - } - var num = parseInt(col, 16); - var r = limitColor((num >> 16) + amt); - var b = limitColor((num >> 8 & 0x00FF) + amt); - var g = limitColor((num & 0x0000FF) + amt); - return (usePound ? "#" : "") + (g | b << 8 | r << 16).toString(16); -} - /** * Shuffles array in place. ES6 version - * @param {Array} a items An array containing the items. + * @param {Array} array An array containing the items. */ + +/** + * Returns pixel width of string. + * @param {String} string + * @param {Number} char_width Width of single char in pixels + */ +function get_string_width(string, char_width) { + return (string + "").length * char_width; +} + var SvgTip = function () { function SvgTip(_ref) { var _ref$parent = _ref.parent, @@ -826,12 +916,12 @@ var BaseChart = function () { }, { key: 'set_width', value: function set_width() { - var _this2 = this; - var special_values_width = 0; + var char_width = 8; this.specific_values.map(function (val) { - if (_this2.get_strwidth(val.title) > special_values_width) { - special_values_width = _this2.get_strwidth(val.title) - 40; + var str_width = get_string_width(val.title + "", char_width); + if (str_width > special_values_width) { + special_values_width = str_width - 40; } }); this.base_width = this.parent.offsetWidth - special_values_width; @@ -900,20 +990,20 @@ var BaseChart = function () { }, { key: 'show_custom_summary', value: function show_custom_summary() { - var _this3 = this; + var _this2 = this; this.summary.map(function (d) { var stats = $.create('div', { className: 'stats', innerHTML: '' + d.title + ': ' + d.value + '' }); - _this3.stats_wrapper.appendChild(stats); + _this2.stats_wrapper.appendChild(stats); }); } }, { key: 'setup_navigation', value: function setup_navigation() { - var _this4 = this; + var _this3 = this; var init = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; @@ -923,19 +1013,19 @@ var BaseChart = function () { this.bind_overlay(); document.addEventListener('keydown', function (e) { - if ($.isElementInViewport(_this4.chart_wrapper)) { + if ($.isElementInViewport(_this3.chart_wrapper)) { e = e || window.event; if (e.keyCode == '37') { - _this4.on_left_arrow(); + _this3.on_left_arrow(); } else if (e.keyCode == '39') { - _this4.on_right_arrow(); + _this3.on_right_arrow(); } else if (e.keyCode == '38') { - _this4.on_up_arrow(); + _this3.on_up_arrow(); } else if (e.keyCode == '40') { - _this4.on_down_arrow(); + _this3.on_down_arrow(); } else if (e.keyCode == '13') { - _this4.on_enter_key(); + _this3.on_enter_key(); } } }); @@ -993,14 +1083,6 @@ var BaseChart = function () { $.fire(this.parent, "data-select", this.get_data_point()); } - // Helpers - - }, { - key: 'get_strwidth', - value: function get_strwidth(string) { - return (string + "").length * 8; - } - // Objects }, { @@ -1030,6 +1112,8 @@ var AxisChart = function (_BaseChart) { _this.colors = ['green', 'blue', 'violet', 'red', 'orange', 'yellow', 'light-blue', 'light-green', 'purple', 'magenta']; _this.zero_line = _this.height; + + _this.old_values = {}; return _this; } @@ -1150,6 +1234,7 @@ var AxisChart = function (_BaseChart) { var animate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + var char_width = 8; var start_at = void 0, height = void 0, text_start_at = void 0, @@ -1179,7 +1264,7 @@ var AxisChart = function (_BaseChart) { this.x_axis_group.textContent = ''; this.x.map(function (point, i) { - var space_taken = _this4.get_strwidth(point) + 2; + var space_taken = get_string_width(point, char_width) + 2; if (space_taken > allowed_space) { if (_this4.is_series) { // Skip some axis lines if X axis is a series @@ -1328,7 +1413,7 @@ var AxisChart = function (_BaseChart) { units_array.length = 0; y_values.map(function (y, i) { - var data_unit = _this9.draw[unit.type](x_values[i], y, unit.args, color, i, dataset_index, no_of_datasets); + var data_unit = _this9.UnitRenderer['draw_' + unit.type](x_values[i], y, unit.args, color, i, dataset_index, no_of_datasets); units_group.appendChild(data_unit); units_array.push(data_unit); }); @@ -1574,7 +1659,7 @@ var AxisChart = function (_BaseChart) { value: function run_animation() { var _this17 = this; - var anim_svg = $.runSVGAnimation(this.svg, this.elements_to_animate); + var anim_svg = runSVGAnimation(this.svg, this.elements_to_animate); if (this.svg.parentNode == this.chart_wrapper) { this.chart_wrapper.removeChild(this.svg); @@ -1649,8 +1734,8 @@ var AxisChart = function (_BaseChart) { d.svg_units.map(function (unit, i) { if (new_x[i] === undefined || new_y[i] === undefined) return; - _this19.elements_to_animate.push(_this19.animate[type]({ unit: unit, array: d.svg_units, index: i }, // unit, with info to replace where it came from in the data - new_x[i], new_y[i], index)); + _this19.elements_to_animate.push(_this19.UnitRenderer['animate_' + type]({ unit: unit, array: d.svg_units, index: i }, // unit, with info to replace where it came from in the data + new_x[i], new_y[i], index, _this19.y.length)); }); } }, { @@ -1796,7 +1881,7 @@ var AxisChart = function (_BaseChart) { } }, { key: 'make_x_line', - value: function make_x_line(height, text_start_at, point, label_class, axis_line_class, x_pos) { + value: function make_x_line$$1(height, text_start_at, point, label_class, axis_line_class, x_pos) { var line = $.createSVG('line', { x1: 0, x2: 0, @@ -1824,7 +1909,7 @@ var AxisChart = function (_BaseChart) { } }, { key: 'make_y_line', - value: function make_y_line(start_at, width, text_end_at, point, label_class, axis_line_class, y_pos) { + value: function make_y_line$$1(start_at, width, text_end_at, point, label_class, axis_line_class, y_pos) { var darker = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false; var line_type = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : ""; @@ -2078,90 +2163,10 @@ var AxisChart = function (_BaseChart) { // this.chart_wrapper.removeChild(this.tip.container); // this.make_tooltip(); } - }, { - key: 'get_bar_height_and_y_attr', - value: function get_bar_height_and_y_attr(y_top) { - var height = void 0, - y = void 0; - if (y_top <= this.zero_line) { - height = this.zero_line - y_top; - y = y_top; - - // In case of invisible bars - if (height === 0) { - height = this.height * 0.01; - y -= height; - } - } else { - height = y_top - this.zero_line; - y = this.zero_line; - - // In case of invisible bars - if (height === 0) { - height = this.height * 0.01; - } - } - - return [height, y]; - } }, { key: 'setup_utils', value: function setup_utils() { - var _this25 = this; - - this.draw = { - 'bar': function bar(x, y_top, args, color, index, dataset_index, no_of_datasets) { - var total_width = _this25.avg_unit_width - args.space_width; - var start_x = x - total_width / 2; - - var width = total_width / no_of_datasets; - var current_x = start_x + width * dataset_index; - - var _get_bar_height_and_y = _this25.get_bar_height_and_y_attr(y_top), - _get_bar_height_and_y2 = slicedToArray(_get_bar_height_and_y, 2), - height = _get_bar_height_and_y2[0], - y = _get_bar_height_and_y2[1]; - - return $.createSVG('rect', { - className: 'bar mini fill ' + color, - 'data-point-index': index, - x: current_x, - y: y, - width: width, - height: height - }); - }, - 'dot': function dot(x, y, args, color, index) { - return $.createSVG('circle', { - className: 'fill ' + color, - 'data-point-index': index, - cx: x, - cy: y, - r: args.radius - }); - } - }; - - this.animate = { - 'bar': function bar(bar_obj, x, y_top, index) { - var start = x - _this25.avg_unit_width / 4; - var width = _this25.avg_unit_width / 2 / _this25.y.length; - - var _get_bar_height_and_y3 = _this25.get_bar_height_and_y_attr(y_top), - _get_bar_height_and_y4 = slicedToArray(_get_bar_height_and_y3, 2), - height = _get_bar_height_and_y4[0], - y = _get_bar_height_and_y4[1]; - - x = start + width * index; - - return [bar_obj, { width: width, height: height, x: x, y: y }, 350, "easein"]; - // bar.animate({height: args.new_height, y: y_top}, 350, mina.easein); - }, - 'dot': function dot(dot_obj, x, y_top) { - return [dot_obj, { cx: x, cy: y_top }, 350, "easein"]; - // dot.animate({cy: y_top}, 350, mina.easein); - } - }; + this.UnitRenderer = new UnitRenderer(this.height, this.zero_line, this.avg_unit_width); } }]); return AxisChart; @@ -2635,6 +2640,24 @@ var PercentageChart = function (_BaseChart) { return PercentageChart; }(BaseChart); +function limit_color(r) { + if (r > 255) return 255;else if (r < 0) return 0; + return r; +} + +function lighten_darken_color(col, amt) { + var usePound = false; + if (col[0] == "#") { + col = col.slice(1); + usePound = true; + } + var num = parseInt(col, 16); + var r = limit_color((num >> 16) + amt); + var b = limit_color((num >> 8 & 0x00FF) + amt); + var g = limit_color((num & 0x0000FF) + amt); + return (usePound ? "#" : "") + (g | b << 8 | r << 16).toString(16); +} + var ANGLE_RATIO = Math.PI / 180; var FULL_ANGLE = 360; @@ -2796,7 +2819,7 @@ var PieChart = function (_BaseChart) { // if(this.isAnimate) return ; // this.isAnimate = true; if (!this.elements_to_animate || this.elements_to_animate.length === 0) return; - var anim_svg = $.runSVGAnimation(this.svg, this.elements_to_animate); + var anim_svg = runSVGAnimation(this.svg, this.elements_to_animate); if (this.svg.parentNode == this.chart_wrapper) { this.chart_wrapper.removeChild(this.svg); @@ -2826,8 +2849,8 @@ var PieChart = function (_BaseChart) { value: function hoverSlice(path, i, flag, e) { if (!path) return; if (flag) { - $.transform(path, this.calTranslateByAngle(this.slicesProperties[i])); - path.setAttribute('fill', lightenDarkenColor(this.colors[i], 50)); + transform(path, this.calTranslateByAngle(this.slicesProperties[i])); + path.setAttribute('fill', lighten_darken_color(this.colors[i], 50)); var g_off = $.offset(this.svg); var x = e.pageX - g_off.left + 10; var y = e.pageY - g_off.top - 10; @@ -2836,7 +2859,7 @@ var PieChart = function (_BaseChart) { this.tip.set_values(x, y, title, percent + "%"); this.tip.show_tip(); } else { - $.transform(path, 'translate3d(0,0,0)'); + transform(path, 'translate3d(0,0,0)'); this.tip.hide_tip(); path.setAttribute('fill', this.colors[i]); } @@ -3242,6 +3265,14 @@ var Heatmap = function (_BaseChart) { return Heatmap; }(BaseChart); +// if ("development" !== 'production') { +// // Enable LiveReload +// document.write( +// '