jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[major] widespread modularization, refactoring utils

Browse Source
This commit is contained in:
pratu16x7 2017-11-08 23:59:42 +05:30
parent fbfdf835f3
commit e153c35179
21 changed files with 864 additions and 796 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

525
dist/frappe-charts.min.cjs.js vendored
View File

@ -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: '<span class="indicator ' + d.color + '">' + d.title + ': ' + d.value + '</span>'
});
_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(
// '<script src="http://' + (location.host || 'localhost').split(':')[0] +
// ':35729/livereload.js?snipver=1"></' + 'script>'
// );
// }
var chartTypes = {
line: LineChart,
bar: BarChart,

525
dist/frappe-charts.min.esm.js vendored
View File

@ -282,15 +282,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) {
@ -355,112 +346,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 {
@ -517,10 +402,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;
@ -530,29 +628,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,
@ -824,12 +914,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;
@ -898,20 +988,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: '<span class="indicator ' + d.color + '">' + d.title + ': ' + d.value + '</span>'
});
_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;
@ -921,19 +1011,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();
}
}
});
@ -991,14 +1081,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
}, {
@ -1028,6 +1110,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;
}
@ -1148,6 +1232,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,
@ -1177,7 +1262,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
@ -1326,7 +1411,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);
});
@ -1572,7 +1657,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);
@ -1647,8 +1732,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));
});
}
}, {
@ -1794,7 +1879,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,
@ -1822,7 +1907,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] : "";
@ -2076,90 +2161,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;
@ -2633,6 +2638,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;
@ -2794,7 +2817,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);
@ -2824,8 +2847,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;
@ -2834,7 +2857,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]);
}
@ -3240,6 +3263,14 @@ var Heatmap = function (_BaseChart) {
return Heatmap;
}(BaseChart);
// if ("development" !== 'production') {
// // Enable LiveReload
// document.write(
// '<script src="http://' + (location.host || 'localhost').split(':')[0] +
// ':35729/livereload.js?snipver=1"></' + 'script>'
// );
// }
var chartTypes = {
line: LineChart,
bar: BarChart,

2
dist/frappe-charts.min.iife.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/frappe-charts.min.js vendored
View File

File diff suppressed because one or more lines are too long

63
src/scripts/charts/AxisChart.js
View File

@ -1,5 +1,7 @@
import $ from '../helpers/dom';
import { float_2, arrays_equal, get_string_width, get_bar_height_and_y_attr } from '../helpers/utils';
import $ from '../utils/dom';
import { UnitRenderer } from '../utils/draw';
import { runSVGAnimation } from '../utils/animate';
import { float_2, arrays_equal, get_string_width } from '../utils/helpers';
import BaseChart from './BaseChart';
export default class AxisChart extends BaseChart {
@ -281,7 +283,7 @@ export default class AxisChart extends BaseChart {
units_array.length = 0;
y_values.map((y, i) => {
let data_unit = this.draw[unit.type](
let data_unit = this.UnitRenderer['draw_' + unit.type](
x_values[i],
y,
unit.args,
@ -507,7 +509,7 @@ export default class AxisChart extends BaseChart {
}
run_animation() {
let anim_svg = $.runSVGAnimation(this.svg, this.elements_to_animate);
let anim_svg = runSVGAnimation(this.svg, this.elements_to_animate);
if(this.svg.parentNode == this.chart_wrapper) {
this.chart_wrapper.removeChild(this.svg);
@ -573,11 +575,12 @@ export default class AxisChart extends BaseChart {
d.svg_units.map((unit, i) => {
if(new_x[i] === undefined || new_y[i] === undefined) return;
this.elements_to_animate.push(this.animate[type](
this.elements_to_animate.push(this.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
index,
this.y.length
));
});
}
@ -990,52 +993,6 @@ export default class AxisChart extends BaseChart {
}
setup_utils() {
this.draw = {
'bar': (x, y_top, args, color, index, dataset_index, no_of_datasets) => {
let total_width = this.avg_unit_width - args.space_width;
let start_x = x - total_width/2;
let width = total_width / no_of_datasets;
let current_x = start_x + width * dataset_index;
let [height, y] = get_bar_height_and_y_attr(y_top, this.zero_line, this.height);
return $.createSVG('rect', {
className: `bar mini fill ${color}`,
'data-point-index': index,
x: current_x,
y: y,
width: width,
height: height
});
},
'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': (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] = get_bar_height_and_y_attr(y_top, this.zero_line, this.height);
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': (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);
}
}

4
src/scripts/charts/BaseChart.js
View File

@ -1,6 +1,6 @@
import SvgTip from '../objects/SvgTip';
import $ from '../helpers/dom';
import { get_string_width } from '../helpers/utils';
import $ from '../utils/dom';
import { get_string_width } from '../utils/helpers';
import Chart from '../charts';
export default class BaseChart {

2
src/scripts/charts/Heatmap.js
View File

@ -1,5 +1,5 @@
import BaseChart from './BaseChart';
import $ from '../helpers/dom';
import $ from '../utils/dom';
export default class Heatmap extends BaseChart {
constructor({

2
src/scripts/charts/LineChart.js
View File

@ -1,5 +1,5 @@
import AxisChart from './AxisChart';
import $ from '../helpers/dom';
import $ from '../utils/dom';
export default class LineChart extends AxisChart {
constructor(args) {

2
src/scripts/charts/PercentageChart.js
View File

@ -1,5 +1,5 @@
import BaseChart from './BaseChart';
import $ from '../helpers/dom';
import $ from '../utils/dom';
export default class PercentageChart extends BaseChart {
constructor(args) {

13
src/scripts/charts/PieChart.js
View File

@ -1,6 +1,7 @@
import BaseChart from './BaseChart';
import $ from '../helpers/dom';
import { lightenDarkenColor } from '../helpers/utils';
import $ from '../utils/dom';
import { lighten_darken_color } from '../utils/colors';
import { runSVGAnimation, transform } from '../utils/animate';
const ANGLE_RATIO = Math.PI / 180;
const FULL_ANGLE = 360;
@ -135,7 +136,7 @@ export default class PieChart extends BaseChart {
// if(this.isAnimate) return ;
// this.isAnimate = true;
if(!this.elements_to_animate || this.elements_to_animate.length === 0) return;
let anim_svg = $.runSVGAnimation(this.svg, this.elements_to_animate);
let anim_svg = runSVGAnimation(this.svg, this.elements_to_animate);
if(this.svg.parentNode == this.chart_wrapper) {
this.chart_wrapper.removeChild(this.svg);
@ -161,8 +162,8 @@ export default class PieChart extends BaseChart {
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));
let g_off = $.offset(this.svg);
let x = e.pageX - g_off.left + 10;
let y = e.pageY - g_off.top - 10;
@ -172,7 +173,7 @@ export default class PieChart extends 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]);
}

0
src/scripts/helpers/animate.js
View File

25
src/scripts/helpers/draw.js
View File

@ -1,25 +0,0 @@
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() {}

0
src/scripts/helpers/intervals.js
View File

106
src/scripts/helpers/utils.js
View File

@ -1,106 +0,0 @@
export function arrays_equal(arr1, arr2) {
if(arr1.length !== arr2.length) return false;
let are_equal = true;
arr1.map((d, i) => {
if(arr2[i] !== d) are_equal = false;
});
return are_equal;
}
function limitColor(r){
if (r > 255) return 255;
else if (r < 0) return 0;
return r;
}
export function lightenDarkenColor(col, amt) {
let usePound = false;
if (col[0] == "#") {
col = col.slice(1);
usePound = true;
}
let num = parseInt(col,16);
let r = limitColor((num >> 16) + amt);
let b = limitColor(((num >> 8) & 0x00FF) + amt);
let 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.
*/
export function shuffle(array) {
// Awesomeness: https://bost.ocks.org/mike/shuffle/
// https://stackoverflow.com/a/2450976/6495043
// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array?noredirect=1&lq=1
for (let i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
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

2
src/scripts/objects/SvgTip.js
View File

@ -1,4 +1,4 @@
import $ from '../helpers/dom';
import $ from '../utils/dom';
export default class SvgTip {
constructor({

101
src/scripts/utils/animate.js Normal file
View File

@ -0,0 +1,101 @@
// Leveraging SMIL Animations
const 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, easing_type="linear", type=undefined, old_values={}) {
let anim_element = element.cloneNode(true);
let new_element = element.cloneNode(true);
for(var attributeName in props) {
let animate_element;
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");
}
let current_value = old_values[attributeName] || 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",
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];
}
export 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;
}
export function runSVGAnimation(svg_container, elements) {
let new_elements = [];
let anim_elements = [];
elements.map(element => {
let obj = element[0];
let parent = obj.unit.parentNode;
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]);
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) => {
anim_element[1].replaceChild(new_elements[i], anim_element[0]);
elements[i][0] = new_elements[i];
});
return anim_svg;
}

0
src/scripts/helpers/colors.js → src/scripts/utils/colors.js
View File

104
src/scripts/helpers/dom.js → src/scripts/utils/dom.js
View File

@ -2,16 +2,6 @@ export default function $(expr, con) {
return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
}
const 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 = (node) =>
{
var i = 0;
@ -79,100 +69,6 @@ $.createSVG = (tag, o) => {
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 parent = obj.unit.parentNode;
// let index = let 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]);
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) => {
anim_element[1].replaceChild(new_elements[i], anim_element[0]);
elements[i][0] = new_elements[i];
});
return anim_svg;
};
$.transform = (element, style)=>{
element.style.transform = style;
element.style.webkitTransform = style;
element.style.msTransform = style;
element.style.mozTransform = style;
element.style.oTransform = style;
};
$.animateSVG = (element, props, dur, easing_type="linear", type=undefined, old_values={}) => {
let anim_element = element.cloneNode(true);
let new_element = element.cloneNode(true);
for(var attributeName in props) {
let animate_element;
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");
}
let current_value = old_values[attributeName] || 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",
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 = (element) => {
let rect = element.getBoundingClientRect();
return {

102
src/scripts/utils/draw.js Normal file
View File

@ -0,0 +1,102 @@
import $ from './dom';
export var UnitRenderer = (function() {
var UnitRenderer = function(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) {
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];
}
UnitRenderer.prototype = {
draw_bar: function (x, y_top, args, color, index, dataset_index, no_of_datasets) {
let total_width = this.avg_unit_width - args.space_width;
let start_x = x - total_width/2;
let width = total_width / no_of_datasets;
let current_x = start_x + width * dataset_index;
let [height, y] = get_bar_height_and_y_attr(y_top, this.zero_line, this.total_height);
return $.createSVG('rect', {
className: `bar mini fill ${color}`,
'data-point-index': index,
x: current_x,
y: y,
width: width,
height: height
});
},
draw_dot: function(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(bar_obj, x, y_top, index, no_of_datasets) {
let start = x - this.avg_unit_width/4;
let width = (this.avg_unit_width/2)/no_of_datasets;
let [height, y] = get_bar_height_and_y_attr(y_top, this.zero_line, this.total_height);
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(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;
})();
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() {}

47
src/scripts/utils/helpers.js Normal file
View File

@ -0,0 +1,47 @@
/**
* Returns the value of a number upto 2 decimal places.
* @param {Number} d Any number
*/
export 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
*/
export function arrays_equal(arr1, arr2) {
if(arr1.length !== arr2.length) return false;
let are_equal = true;
arr1.map((d, i) => {
if(arr2[i] !== d) are_equal = false;
});
return are_equal;
}
/**
* Shuffles array in place. ES6 version
* @param {Array} array An array containing the items.
*/
export function shuffle(array) {
// Awesomeness: https://bost.ocks.org/mike/shuffle/
// https://stackoverflow.com/a/2450976/6495043
// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array?noredirect=1&lq=1
for (let i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
/**
* Returns pixel width of string.
* @param {String} string
* @param {Number} char_width Width of single char in pixels
*/
export function get_string_width(string, char_width) {
return (string+"").length * char_width;
}

33
src/scripts/utils/intervals.js Normal file
View File

@ -0,0 +1,33 @@
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 clump_intervals(start, interval_size, count) {
let intervals = [];
for(var i = 0; i <= count; i++){
intervals.push(start);
start += interval_size;
}
return intervals;
}
export function calc_intervals() {
//
}