jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[refactor] name marker variables semantically

Browse Source
This commit is contained in:
pratu16x7 2017-11-26 03:07:40 +05:30
parent a61f336d71
commit 617c0cb9de
10 changed files with 162 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
dist/frappe-charts.esm.js vendored
View File

@ -451,8 +451,8 @@ var UnitRenderer = (function() {
})(); })();
const UNIT_ANIM_DUR = 350; const UNIT_ANIM_DUR = 350;
const PATH_ANIM_DUR = 350; const PATH_ANIM_DUR = 650;
const MARKER_LINE_ANIM_DUR = 350; const MARKER_LINE_ANIM_DUR = UNIT_ANIM_DUR;
const REPLACE_ALL_NEW_DUR = 250; const REPLACE_ALL_NEW_DUR = 250;
const STD_EASING = 'easein'; const STD_EASING = 'easein';
@ -1281,7 +1281,7 @@ class AxisChart extends BaseChart {
constructor(args) { constructor(args) {
super(args); super(args);
this.x = this.data.labels || []; this.xAxisLabels = this.data.labels || [];
this.y = this.data.datasets || []; this.y = this.data.datasets || [];
this.is_series = args.is_series; this.is_series = args.is_series;
@ -1310,20 +1310,20 @@ class AxisChart extends BaseChart {
setup_x() { setup_x() {
this.set_avg_unit_width_and_x_offset(); this.set_avg_unit_width_and_x_offset();
if(this.x_axis_positions) { if(this.xPositions) {
this.x_old_axis_positions = this.x_axis_positions.slice(); this.x_old_axis_positions = this.xPositions.slice();
} }
this.x_axis_positions = this.x.map((d, i) => this.xPositions = this.xAxisLabels.map((d, i) =>
floatTwo(this.x_offset + i * this.avg_unit_width)); floatTwo(this.x_offset + i * this.avg_unit_width));
if(!this.x_old_axis_positions) { if(!this.x_old_axis_positions) {
this.x_old_axis_positions = this.x_axis_positions.slice(); this.x_old_axis_positions = this.xPositions.slice();
} }
} }
setup_y() { setup_y() {
if(this.y_axis_values) { if(this.yAxisLabels) {
this.y_old_axis_values = this.y_axis_values.slice(); this.y_old_axis_values = this.yAxisLabels.slice();
} }
let values = this.get_all_y_values(); let values = this.get_all_y_values();
@ -1332,13 +1332,13 @@ class AxisChart extends BaseChart {
values = values.concat(this.y_sums); values = values.concat(this.y_sums);
} }
this.y_axis_values = calcIntervals(values, this.type === 'line'); this.yAxisLabels = calcIntervals(values, this.type === 'line');
if(!this.y_old_axis_values) { if(!this.y_old_axis_values) {
this.y_old_axis_values = this.y_axis_values.slice(); this.y_old_axis_values = this.yAxisLabels.slice();
} }
const y_pts = this.y_axis_values; const y_pts = this.yAxisLabels;
const value_range = y_pts[y_pts.length-1] - y_pts[0]; const value_range = y_pts[y_pts.length-1] - y_pts[0];
if(this.multiplier) this.old_multiplier = this.multiplier; if(this.multiplier) this.old_multiplier = this.multiplier;
@ -1372,7 +1372,7 @@ class AxisChart extends BaseChart {
// Make positions arrays for y elements // Make positions arrays for y elements
if(this.yAxisPositions) this.oldYAxisPositions = this.yAxisPositions; if(this.yAxisPositions) this.oldYAxisPositions = this.yAxisPositions;
this.yAxisPositions = this.y_axis_values.map(d => this.zero_line - d * this.multiplier); this.yAxisPositions = this.yAxisLabels.map(d => this.zero_line - d * this.multiplier);
if(!this.oldYAxisPositions) this.oldYAxisPositions = this.yAxisPositions; if(!this.oldYAxisPositions) this.oldYAxisPositions = this.yAxisPositions;
if(this.yAnnotationPositions) this.oldYAnnotationPositions = this.yAnnotationPositions; if(this.yAnnotationPositions) this.oldYAnnotationPositions = this.yAnnotationPositions;
@ -1407,8 +1407,8 @@ class AxisChart extends BaseChart {
} }
make_graph_components(init=false) { make_graph_components(init=false) {
this.makeYLines(this.yAxisPositions, this.y_axis_values); this.makeYLines(this.yAxisPositions, this.yAxisLabels);
this.makeXLines(this.x_axis_positions, this.x); this.makeXLines(this.xPositions, this.xAxisLabels);
this.draw_graph(init); this.draw_graph(init);
// this.make_y_specifics(this.yAnnotationPositions, this.specific_values); // this.make_y_specifics(this.yAnnotationPositions, this.specific_values);
} }
@ -1480,7 +1480,7 @@ class AxisChart extends BaseChart {
if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) { if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) {
this.y.map((d, i) => { this.y.map((d, i) => {
d.svg_units = []; d.svg_units = [];
this.make_path && this.make_path(d, this.x_axis_positions, d.y_tops, this.colors[i]); this.make_path && this.make_path(d, this.xPositions, d.yUnitPositions, this.colors[i]);
this.make_new_units(d); this.make_new_units(d);
this.calc_y_dependencies(); this.calc_y_dependencies();
}); });
@ -1492,7 +1492,7 @@ class AxisChart extends BaseChart {
} }
this.y.map((d, i) => { this.y.map((d, i) => {
d.svg_units = []; d.svg_units = [];
this.make_path && this.make_path(d, this.x_axis_positions, d.y_tops, this.colors[i]); this.make_path && this.make_path(d, this.xPositions, d.yUnitPositions, this.colors[i]);
this.make_new_units(d); this.make_new_units(d);
}); });
} }
@ -1501,11 +1501,11 @@ class AxisChart extends BaseChart {
let data = []; let data = [];
this.y.map((d, i) => { this.y.map((d, i) => {
// Anim: Don't draw initial values, store them and update later // Anim: Don't draw initial values, store them and update later
d.y_tops = new Array(d.values.length).fill(this.zero_line); // no value d.yUnitPositions = new Array(d.values.length).fill(this.zero_line); // no value
data.push({values: d.values}); data.push({values: d.values});
d.svg_units = []; d.svg_units = [];
this.make_path && this.make_path(d, this.x_axis_positions, d.y_tops, this.colors[i]); this.make_path && this.make_path(d, this.xPositions, d.yUnitPositions, this.colors[i]);
this.make_new_units(d); this.make_new_units(d);
}); });
@ -1527,8 +1527,8 @@ class AxisChart extends BaseChart {
make_new_units(d) { make_new_units(d) {
this.make_new_units_for_dataset( this.make_new_units_for_dataset(
this.x_axis_positions, this.xPositions,
d.y_tops, d.yUnitPositions,
this.colors[d.index], this.colors[d.index],
d.index, d.index,
this.y.length this.y.length
@ -1584,16 +1584,16 @@ class AxisChart extends BaseChart {
map_tooltip_x_position_and_show(relX) { map_tooltip_x_position_and_show(relX) {
if(!this.y_min_tops) return; if(!this.y_min_tops) return;
let titles = this.x; let titles = this.xAxisLabels;
if(this.format_tooltip_x && this.format_tooltip_x(this.x[0])) { if(this.format_tooltip_x && this.format_tooltip_x(this.xAxisLabels[0])) {
titles = this.x.map(d=>this.format_tooltip_x(d)); titles = this.xAxisLabels.map(d=>this.format_tooltip_x(d));
} }
let y_format = this.format_tooltip_y && this.format_tooltip_y(this.y[0].values[0]); let y_format = this.format_tooltip_y && this.format_tooltip_y(this.y[0].values[0]);
for(var i=this.x_axis_positions.length - 1; i >= 0 ; i--) { for(var i=this.xPositions.length - 1; i >= 0 ; i--) {
let x_val = this.x_axis_positions[i]; let x_val = this.xPositions[i];
// let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_positions[i-1]; // let delta = i === 0 ? this.avg_unit_width : x_val - this.xPositions[i-1];
if(relX > x_val - this.avg_unit_width/2) { if(relX > x_val - this.avg_unit_width/2) {
let x = x_val + this.translate_x; let x = x_val + this.translate_x;
let y = this.y_min_tops[i] + this.translate_y; let y = this.y_min_tops[i] + this.translate_y;
@ -1615,20 +1615,20 @@ class AxisChart extends BaseChart {
} }
// API // API
updateData(new_y, new_x) { updateData(newY, newX) {
if(!new_x) { if(!newX) {
new_x = this.x; newX = this.xAxisLabels;
} }
this.updating = true; this.updating = true;
this.old_x_values = this.x.slice(); this.old_x_values = this.xAxisLabels.slice();
this.old_y_axis_tops = this.y.map(d => d.y_tops.slice()); this.old_y_axis_tops = this.y.map(d => d.yUnitPositions.slice());
this.old_y_values = this.y.map(d => d.values); this.old_y_values = this.y.map(d => d.values);
// Just update values prop, setup_x/y() will do the rest // Just update values prop, setup_x/y() will do the rest
if(new_y) this.y.map(d => {d.values = new_y[d.index].values;}); if(newY) this.y.map(d => {d.values = newY[d.index].values;});
if(new_x) this.x = new_x; if(newX) this.xAxisLabels = newX;
this.setup_x(); this.setup_x();
this.setup_y(); this.setup_y();
@ -1647,9 +1647,9 @@ class AxisChart extends BaseChart {
animate_graphs() { animate_graphs() {
this.elements_to_animate = []; this.elements_to_animate = [];
// Pre-prep, equilize no of positions between old and new // Pre-prep, equilize no of positions between old and new
let [old_x, new_x] = equilizeNoOfElements( let [old_x, newX] = equilizeNoOfElements(
this.x_old_axis_positions.slice(), this.x_old_axis_positions.slice(),
this.x_axis_positions.slice() this.xPositions.slice()
); );
let [oldYAxis, newYAxis] = equilizeNoOfElements( let [oldYAxis, newYAxis] = equilizeNoOfElements(
@ -1657,10 +1657,10 @@ class AxisChart extends BaseChart {
this.yAxisPositions.slice() this.yAxisPositions.slice()
); );
let newXValues = this.x.slice(); let newXValues = this.xAxisLabels.slice();
let newYValues = this.y_axis_values.slice(); let newYValues = this.yAxisLabels.slice();
let extra_points = this.x_axis_positions.slice().length - this.x_old_axis_positions.slice().length; let extra_points = this.xPositions.slice().length - this.x_old_axis_positions.slice().length;
if(extra_points > 0) { if(extra_points > 0) {
this.makeXLines(old_x, newXValues); this.makeXLines(old_x, newXValues);
@ -1670,53 +1670,53 @@ class AxisChart extends BaseChart {
// Animation // Animation
if(extra_points !== 0) { if(extra_points !== 0) {
this.animateXLines(old_x, new_x); this.animateXLines(old_x, newX);
} }
this.animateYLines(oldYAxis, newYAxis); this.animateYLines(oldYAxis, newYAxis);
this.y.map(d => { this.y.map(d => {
let [old_y, new_y] = equilizeNoOfElements( let [old_y, newY] = equilizeNoOfElements(
this.old_y_axis_tops[d.index].slice(), this.old_y_axis_tops[d.index].slice(),
d.y_tops.slice() d.yUnitPositions.slice()
); );
if(extra_points > 0) { if(extra_points > 0) {
this.make_path && this.make_path(d, old_x, old_y, this.colors[d.index]); this.make_path && this.make_path(d, old_x, old_y, this.colors[d.index]);
this.make_new_units_for_dataset(old_x, old_y, this.colors[d.index], d.index, this.y.length); this.make_new_units_for_dataset(old_x, old_y, this.colors[d.index], d.index, this.y.length);
} }
// Animation // Animation
d.path && this.animate_path(d, new_x, new_y); d.path && this.animate_path(d, newX, newY);
this.animate_units(d, new_x, new_y); this.animate_units(d, newX, newY);
}); });
runSMILAnimation(this.chart_wrapper, this.svg, this.elements_to_animate); runSMILAnimation(this.chart_wrapper, this.svg, this.elements_to_animate);
setTimeout(() => { setTimeout(() => {
this.y.map(d => { this.y.map(d => {
this.make_path && this.make_path(d, this.x_axis_positions, d.y_tops, this.colors[d.index]); this.make_path && this.make_path(d, this.xPositions, d.yUnitPositions, this.colors[d.index]);
this.make_new_units(d); this.make_new_units(d);
this.makeYLines(this.yAxisPositions, this.y_axis_values); this.makeYLines(this.yAxisPositions, this.yAxisLabels);
this.makeXLines(this.x_axis_positions, this.x); this.makeXLines(this.xPositions, this.xAxisLabels);
// this.make_y_specifics(this.yAnnotationPositions, this.specific_values); // this.make_y_specifics(this.yAnnotationPositions, this.specific_values);
}); });
}, 400); }, 400);
} }
animate_path(d, new_x, new_y) { animate_path(d, newX, newY) {
const newPointsList = new_y.map((y, i) => (new_x[i] + ',' + y)); const newPointsList = newY.map((y, i) => (newX[i] + ',' + y));
this.elements_to_animate = this.elements_to_animate this.elements_to_animate = this.elements_to_animate
.concat(this.animator.path(d, newPointsList.join("L"))); .concat(this.animator.path(d, newPointsList.join("L")));
} }
animate_units(d, new_x, new_y) { animate_units(d, newX, newY) {
let type = this.unit_args.type; let type = this.unit_args.type;
d.svg_units.map((unit, i) => { d.svg_units.map((unit, i) => {
if(new_x[i] === undefined || new_y[i] === undefined) return; if(newX[i] === undefined || newY[i] === undefined) return;
this.elements_to_animate.push(this.animator[type]( this.elements_to_animate.push(this.animator[type](
{unit:unit, array:d.svg_units, index: i}, // unit, with info to replace where it came from in the data {unit:unit, array:d.svg_units, index: i}, // unit, with info to replace where it came from in the data
new_x[i], newX[i],
new_y[i], newY[i],
d.index, d.index,
this.y.length this.y.length
)); ));
@ -1743,24 +1743,24 @@ class AxisChart extends BaseChart {
// //
} }
add_data_point(y_point, x_point, index=this.x.length) { add_data_point(y_point, x_point, index=this.xAxisLabels.length) {
let new_y = this.y.map(data_set => { return {values:data_set.values}; }); let newY = this.y.map(data_set => { return {values:data_set.values}; });
new_y.map((d, i) => { d.values.splice(index, 0, y_point[i]); }); newY.map((d, i) => { d.values.splice(index, 0, y_point[i]); });
let new_x = this.x.slice(); let newX = this.xAxisLabels.slice();
new_x.splice(index, 0, x_point); newX.splice(index, 0, x_point);
this.updateData(new_y, new_x); this.updateData(newY, newX);
} }
remove_data_point(index = this.x.length-1) { remove_data_point(index = this.xAxisLabels.length-1) {
if(this.x.length < 3) return; if(this.xAxisLabels.length < 3) return;
let new_y = this.y.map(data_set => { return {values:data_set.values}; }); let newY = this.y.map(data_set => { return {values:data_set.values}; });
new_y.map((d) => { d.values.splice(index, 1); }); newY.map((d) => { d.values.splice(index, 1); });
let new_x = this.x.slice(); let newX = this.xAxisLabels.slice();
new_x.splice(index, 1); newX.splice(index, 1);
this.updateData(new_y, new_x); this.updateData(newY, newX);
} }
getDataPoint(index=this.current_index) { getDataPoint(index=this.current_index) {
@ -1769,18 +1769,18 @@ class AxisChart extends BaseChart {
index: index index: index
}; };
let y = this.y[0]; let y = this.y[0];
['svg_units', 'y_tops', 'values'].map(key => { ['svg_units', 'yUnitPositions', 'values'].map(key => {
let data_key = key.slice(0, key.length-1); let data_key = key.slice(0, key.length-1);
data_point[data_key] = y[key][index]; data_point[data_key] = y[key][index];
}); });
data_point.label = this.x[index]; data_point.label = this.xAxisLabels[index];
return data_point; return data_point;
} }
updateCurrentDataPoint(index) { updateCurrentDataPoint(index) {
index = parseInt(index); index = parseInt(index);
if(index < 0) index = 0; if(index < 0) index = 0;
if(index >= this.x.length) index = this.x.length - 1; if(index >= this.xAxisLabels.length) index = this.xAxisLabels.length - 1;
if(index === this.current_index) return; if(index === this.current_index) return;
this.current_index = index; this.current_index = index;
$.fire(this.parent, "data-select", this.getDataPoint()); $.fire(this.parent, "data-select", this.getDataPoint());
@ -1788,7 +1788,7 @@ class AxisChart extends BaseChart {
set_avg_unit_width_and_x_offset() { set_avg_unit_width_and_x_offset() {
// Set the ... you get it // Set the ... you get it
this.avg_unit_width = this.width/(this.x.length - 1); this.avg_unit_width = this.width/(this.xAxisLabels.length - 1);
this.x_offset = 0; this.x_offset = 0;
} }
@ -1805,12 +1805,12 @@ class AxisChart extends BaseChart {
} }
calc_y_dependencies() { calc_y_dependencies() {
this.y_min_tops = new Array(this.x.length).fill(9999); this.y_min_tops = new Array(this.xAxisLabels.length).fill(9999);
this.y.map(d => { this.y.map(d => {
d.y_tops = d.values.map( val => floatTwo(this.zero_line - val * this.multiplier)); d.yUnitPositions = d.values.map( val => floatTwo(this.zero_line - val * this.multiplier));
d.y_tops.map( (y_top, i) => { d.yUnitPositions.map( (yUnitPosition, i) => {
if(y_top < this.y_min_tops[i]) { if(yUnitPosition < this.y_min_tops[i]) {
this.y_min_tops[i] = y_top; this.y_min_tops[i] = yUnitPosition;
} }
}); });
}); });
@ -1842,7 +1842,7 @@ class BarChart extends AxisChart {
make_overlay() { make_overlay() {
// Just make one out of the first element // Just make one out of the first element
let index = this.x.length - 1; let index = this.xAxisLabels.length - 1;
let unit = this.y[0].svg_units[index]; let unit = this.y[0].svg_units[index];
this.updateCurrentDataPoint(index); this.updateCurrentDataPoint(index);
@ -1894,7 +1894,7 @@ class BarChart extends AxisChart {
} }
set_avg_unit_width_and_x_offset() { set_avg_unit_width_and_x_offset() {
this.avg_unit_width = this.width/(this.x.length + 1); this.avg_unit_width = this.width/(this.xAxisLabels.length + 1);
this.x_offset = this.avg_unit_width; this.x_offset = this.avg_unit_width;
} }
} }
@ -1956,7 +1956,7 @@ class LineChart extends AxisChart {
make_paths() { make_paths() {
this.y.map(d => { this.y.map(d => {
this.make_path(d, this.x_axis_positions, d.y_tops, d.color || this.colors[d.index]); this.make_path(d, this.xPositions, d.yUnitPositions, d.color || this.colors[d.index]);
}); });
} }

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

4
docs/assets/js/index.js
View File

@ -24,8 +24,8 @@ let line_composite_data = {
}; };
let more_line_data = { let more_line_data = {
// 0: {values: [4, 0, 3, 1, 1, 2, 1, 2, 1, 0, 1, 1]}, 0: {values: [4, 0, 3, 1, 1, 2, 1, 2, 1, 0, 1, 1]},
0: {values: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]}, // 0: {values: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]},
1: {values: [2, 3, 3, 2, 1, 4, 0, 1, 2, 7, 11, 4]}, 1: {values: [2, 3, 3, 2, 1, 4, 0, 1, 2, 7, 11, 4]},
2: {values: [7, 7, 2, 4, 0, 1, 5, 3, 1, 2, 0, 1]}, 2: {values: [7, 7, 2, 4, 0, 1, 5, 3, 1, 2, 0, 1]},
3: {values: [0, 2, 6, 2, 2, 1, 2, 3, 6, 3, 7, 10]}, 3: {values: [0, 2, 6, 2, 2, 1, 2, 3, 6, 3, 7, 10]},

146
src/js/charts/AxisChart.js
View File

@ -11,7 +11,7 @@ export default class AxisChart extends BaseChart {
constructor(args) { constructor(args) {
super(args); super(args);
this.x = this.data.labels || []; this.xAxisLabels = this.data.labels || [];
this.y = this.data.datasets || []; this.y = this.data.datasets || [];
this.is_series = args.is_series; this.is_series = args.is_series;
@ -40,20 +40,20 @@ export default class AxisChart extends BaseChart {
setup_x() { setup_x() {
this.set_avg_unit_width_and_x_offset(); this.set_avg_unit_width_and_x_offset();
if(this.x_axis_positions) { if(this.xPositions) {
this.x_old_axis_positions = this.x_axis_positions.slice(); this.x_old_axis_positions = this.xPositions.slice();
} }
this.x_axis_positions = this.x.map((d, i) => this.xPositions = this.xAxisLabels.map((d, i) =>
floatTwo(this.x_offset + i * this.avg_unit_width)); floatTwo(this.x_offset + i * this.avg_unit_width));
if(!this.x_old_axis_positions) { if(!this.x_old_axis_positions) {
this.x_old_axis_positions = this.x_axis_positions.slice(); this.x_old_axis_positions = this.xPositions.slice();
} }
} }
setup_y() { setup_y() {
if(this.y_axis_values) { if(this.yAxisLabels) {
this.y_old_axis_values = this.y_axis_values.slice(); this.y_old_axis_values = this.yAxisLabels.slice();
} }
let values = this.get_all_y_values(); let values = this.get_all_y_values();
@ -62,13 +62,13 @@ export default class AxisChart extends BaseChart {
values = values.concat(this.y_sums); values = values.concat(this.y_sums);
} }
this.y_axis_values = calcIntervals(values, this.type === 'line'); this.yAxisLabels = calcIntervals(values, this.type === 'line');
if(!this.y_old_axis_values) { if(!this.y_old_axis_values) {
this.y_old_axis_values = this.y_axis_values.slice(); this.y_old_axis_values = this.yAxisLabels.slice();
} }
const y_pts = this.y_axis_values; const y_pts = this.yAxisLabels;
const value_range = y_pts[y_pts.length-1] - y_pts[0]; const value_range = y_pts[y_pts.length-1] - y_pts[0];
if(this.multiplier) this.old_multiplier = this.multiplier; if(this.multiplier) this.old_multiplier = this.multiplier;
@ -102,7 +102,7 @@ export default class AxisChart extends BaseChart {
// Make positions arrays for y elements // Make positions arrays for y elements
if(this.yAxisPositions) this.oldYAxisPositions = this.yAxisPositions; if(this.yAxisPositions) this.oldYAxisPositions = this.yAxisPositions;
this.yAxisPositions = this.y_axis_values.map(d => this.zero_line - d * this.multiplier); this.yAxisPositions = this.yAxisLabels.map(d => this.zero_line - d * this.multiplier);
if(!this.oldYAxisPositions) this.oldYAxisPositions = this.yAxisPositions; if(!this.oldYAxisPositions) this.oldYAxisPositions = this.yAxisPositions;
if(this.yAnnotationPositions) this.oldYAnnotationPositions = this.yAnnotationPositions; if(this.yAnnotationPositions) this.oldYAnnotationPositions = this.yAnnotationPositions;
@ -137,8 +137,8 @@ export default class AxisChart extends BaseChart {
} }
make_graph_components(init=false) { make_graph_components(init=false) {
this.makeYLines(this.yAxisPositions, this.y_axis_values); this.makeYLines(this.yAxisPositions, this.yAxisLabels);
this.makeXLines(this.x_axis_positions, this.x); this.makeXLines(this.xPositions, this.xAxisLabels);
this.draw_graph(init); this.draw_graph(init);
// this.make_y_specifics(this.yAnnotationPositions, this.specific_values); // this.make_y_specifics(this.yAnnotationPositions, this.specific_values);
} }
@ -210,7 +210,7 @@ export default class AxisChart extends BaseChart {
if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) { if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) {
this.y.map((d, i) => { this.y.map((d, i) => {
d.svg_units = []; d.svg_units = [];
this.make_path && this.make_path(d, this.x_axis_positions, d.y_tops, this.colors[i]); this.make_path && this.make_path(d, this.xPositions, d.yUnitPositions, this.colors[i]);
this.make_new_units(d); this.make_new_units(d);
this.calc_y_dependencies(); this.calc_y_dependencies();
}); });
@ -222,7 +222,7 @@ export default class AxisChart extends BaseChart {
} }
this.y.map((d, i) => { this.y.map((d, i) => {
d.svg_units = []; d.svg_units = [];
this.make_path && this.make_path(d, this.x_axis_positions, d.y_tops, this.colors[i]); this.make_path && this.make_path(d, this.xPositions, d.yUnitPositions, this.colors[i]);
this.make_new_units(d); this.make_new_units(d);
}); });
} }
@ -231,11 +231,11 @@ export default class AxisChart extends BaseChart {
let data = []; let data = [];
this.y.map((d, i) => { this.y.map((d, i) => {
// Anim: Don't draw initial values, store them and update later // Anim: Don't draw initial values, store them and update later
d.y_tops = new Array(d.values.length).fill(this.zero_line); // no value d.yUnitPositions = new Array(d.values.length).fill(this.zero_line); // no value
data.push({values: d.values}); data.push({values: d.values});
d.svg_units = []; d.svg_units = [];
this.make_path && this.make_path(d, this.x_axis_positions, d.y_tops, this.colors[i]); this.make_path && this.make_path(d, this.xPositions, d.yUnitPositions, this.colors[i]);
this.make_new_units(d); this.make_new_units(d);
}); });
@ -257,8 +257,8 @@ export default class AxisChart extends BaseChart {
make_new_units(d) { make_new_units(d) {
this.make_new_units_for_dataset( this.make_new_units_for_dataset(
this.x_axis_positions, this.xPositions,
d.y_tops, d.yUnitPositions,
this.colors[d.index], this.colors[d.index],
d.index, d.index,
this.y.length this.y.length
@ -314,16 +314,16 @@ export default class AxisChart extends BaseChart {
map_tooltip_x_position_and_show(relX) { map_tooltip_x_position_and_show(relX) {
if(!this.y_min_tops) return; if(!this.y_min_tops) return;
let titles = this.x; let titles = this.xAxisLabels;
if(this.format_tooltip_x && this.format_tooltip_x(this.x[0])) { if(this.format_tooltip_x && this.format_tooltip_x(this.xAxisLabels[0])) {
titles = this.x.map(d=>this.format_tooltip_x(d)); titles = this.xAxisLabels.map(d=>this.format_tooltip_x(d));
} }
let y_format = this.format_tooltip_y && this.format_tooltip_y(this.y[0].values[0]); let y_format = this.format_tooltip_y && this.format_tooltip_y(this.y[0].values[0]);
for(var i=this.x_axis_positions.length - 1; i >= 0 ; i--) { for(var i=this.xPositions.length - 1; i >= 0 ; i--) {
let x_val = this.x_axis_positions[i]; let x_val = this.xPositions[i];
// let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_positions[i-1]; // let delta = i === 0 ? this.avg_unit_width : x_val - this.xPositions[i-1];
if(relX > x_val - this.avg_unit_width/2) { if(relX > x_val - this.avg_unit_width/2) {
let x = x_val + this.translate_x; let x = x_val + this.translate_x;
let y = this.y_min_tops[i] + this.translate_y; let y = this.y_min_tops[i] + this.translate_y;
@ -345,20 +345,20 @@ export default class AxisChart extends BaseChart {
} }
// API // API
updateData(new_y, new_x) { updateData(newY, newX) {
if(!new_x) { if(!newX) {
new_x = this.x; newX = this.xAxisLabels;
} }
this.updating = true; this.updating = true;
this.old_x_values = this.x.slice(); this.old_x_values = this.xAxisLabels.slice();
this.old_y_axis_tops = this.y.map(d => d.y_tops.slice()); this.old_y_axis_tops = this.y.map(d => d.yUnitPositions.slice());
this.old_y_values = this.y.map(d => d.values); this.old_y_values = this.y.map(d => d.values);
// Just update values prop, setup_x/y() will do the rest // Just update values prop, setup_x/y() will do the rest
if(new_y) this.y.map(d => {d.values = new_y[d.index].values;}); if(newY) this.y.map(d => {d.values = newY[d.index].values;});
if(new_x) this.x = new_x; if(newX) this.xAxisLabels = newX;
this.setup_x(); this.setup_x();
this.setup_y(); this.setup_y();
@ -377,9 +377,9 @@ export default class AxisChart extends BaseChart {
animate_graphs() { animate_graphs() {
this.elements_to_animate = []; this.elements_to_animate = [];
// Pre-prep, equilize no of positions between old and new // Pre-prep, equilize no of positions between old and new
let [old_x, new_x] = equilizeNoOfElements( let [old_x, newX] = equilizeNoOfElements(
this.x_old_axis_positions.slice(), this.x_old_axis_positions.slice(),
this.x_axis_positions.slice() this.xPositions.slice()
); );
let [oldYAxis, newYAxis] = equilizeNoOfElements( let [oldYAxis, newYAxis] = equilizeNoOfElements(
@ -387,10 +387,10 @@ export default class AxisChart extends BaseChart {
this.yAxisPositions.slice() this.yAxisPositions.slice()
); );
let newXValues = this.x.slice(); let newXValues = this.xAxisLabels.slice();
let newYValues = this.y_axis_values.slice(); let newYValues = this.yAxisLabels.slice();
let extra_points = this.x_axis_positions.slice().length - this.x_old_axis_positions.slice().length; let extra_points = this.xPositions.slice().length - this.x_old_axis_positions.slice().length;
if(extra_points > 0) { if(extra_points > 0) {
this.makeXLines(old_x, newXValues); this.makeXLines(old_x, newXValues);
@ -400,53 +400,53 @@ export default class AxisChart extends BaseChart {
// Animation // Animation
if(extra_points !== 0) { if(extra_points !== 0) {
this.animateXLines(old_x, new_x); this.animateXLines(old_x, newX);
} }
this.animateYLines(oldYAxis, newYAxis); this.animateYLines(oldYAxis, newYAxis);
this.y.map(d => { this.y.map(d => {
let [old_y, new_y] = equilizeNoOfElements( let [old_y, newY] = equilizeNoOfElements(
this.old_y_axis_tops[d.index].slice(), this.old_y_axis_tops[d.index].slice(),
d.y_tops.slice() d.yUnitPositions.slice()
); );
if(extra_points > 0) { if(extra_points > 0) {
this.make_path && this.make_path(d, old_x, old_y, this.colors[d.index]); this.make_path && this.make_path(d, old_x, old_y, this.colors[d.index]);
this.make_new_units_for_dataset(old_x, old_y, this.colors[d.index], d.index, this.y.length); this.make_new_units_for_dataset(old_x, old_y, this.colors[d.index], d.index, this.y.length);
} }
// Animation // Animation
d.path && this.animate_path(d, new_x, new_y); d.path && this.animate_path(d, newX, newY);
this.animate_units(d, new_x, new_y); this.animate_units(d, newX, newY);
}); });
runSMILAnimation(this.chart_wrapper, this.svg, this.elements_to_animate); runSMILAnimation(this.chart_wrapper, this.svg, this.elements_to_animate);
setTimeout(() => { setTimeout(() => {
this.y.map(d => { this.y.map(d => {
this.make_path && this.make_path(d, this.x_axis_positions, d.y_tops, this.colors[d.index]); this.make_path && this.make_path(d, this.xPositions, d.yUnitPositions, this.colors[d.index]);
this.make_new_units(d); this.make_new_units(d);
this.makeYLines(this.yAxisPositions, this.y_axis_values); this.makeYLines(this.yAxisPositions, this.yAxisLabels);
this.makeXLines(this.x_axis_positions, this.x); this.makeXLines(this.xPositions, this.xAxisLabels);
// this.make_y_specifics(this.yAnnotationPositions, this.specific_values); // this.make_y_specifics(this.yAnnotationPositions, this.specific_values);
}); });
}, 400); }, 400);
} }
animate_path(d, new_x, new_y) { animate_path(d, newX, newY) {
const newPointsList = new_y.map((y, i) => (new_x[i] + ',' + y)); const newPointsList = newY.map((y, i) => (newX[i] + ',' + y));
this.elements_to_animate = this.elements_to_animate this.elements_to_animate = this.elements_to_animate
.concat(this.animator.path(d, newPointsList.join("L"))); .concat(this.animator.path(d, newPointsList.join("L")));
} }
animate_units(d, new_x, new_y) { animate_units(d, newX, newY) {
let type = this.unit_args.type; let type = this.unit_args.type;
d.svg_units.map((unit, i) => { d.svg_units.map((unit, i) => {
if(new_x[i] === undefined || new_y[i] === undefined) return; if(newX[i] === undefined || newY[i] === undefined) return;
this.elements_to_animate.push(this.animator[type]( this.elements_to_animate.push(this.animator[type](
{unit:unit, array:d.svg_units, index: i}, // unit, with info to replace where it came from in the data {unit:unit, array:d.svg_units, index: i}, // unit, with info to replace where it came from in the data
new_x[i], newX[i],
new_y[i], newY[i],
d.index, d.index,
this.y.length this.y.length
)); ));
@ -473,24 +473,24 @@ export default class AxisChart extends BaseChart {
// //
} }
add_data_point(y_point, x_point, index=this.x.length) { add_data_point(y_point, x_point, index=this.xAxisLabels.length) {
let new_y = this.y.map(data_set => { return {values:data_set.values}; }); let newY = this.y.map(data_set => { return {values:data_set.values}; });
new_y.map((d, i) => { d.values.splice(index, 0, y_point[i]); }); newY.map((d, i) => { d.values.splice(index, 0, y_point[i]); });
let new_x = this.x.slice(); let newX = this.xAxisLabels.slice();
new_x.splice(index, 0, x_point); newX.splice(index, 0, x_point);
this.updateData(new_y, new_x); this.updateData(newY, newX);
} }
remove_data_point(index = this.x.length-1) { remove_data_point(index = this.xAxisLabels.length-1) {
if(this.x.length < 3) return; if(this.xAxisLabels.length < 3) return;
let new_y = this.y.map(data_set => { return {values:data_set.values}; }); let newY = this.y.map(data_set => { return {values:data_set.values}; });
new_y.map((d) => { d.values.splice(index, 1); }); newY.map((d) => { d.values.splice(index, 1); });
let new_x = this.x.slice(); let newX = this.xAxisLabels.slice();
new_x.splice(index, 1); newX.splice(index, 1);
this.updateData(new_y, new_x); this.updateData(newY, newX);
} }
getDataPoint(index=this.current_index) { getDataPoint(index=this.current_index) {
@ -499,18 +499,18 @@ export default class AxisChart extends BaseChart {
index: index index: index
}; };
let y = this.y[0]; let y = this.y[0];
['svg_units', 'y_tops', 'values'].map(key => { ['svg_units', 'yUnitPositions', 'values'].map(key => {
let data_key = key.slice(0, key.length-1); let data_key = key.slice(0, key.length-1);
data_point[data_key] = y[key][index]; data_point[data_key] = y[key][index];
}); });
data_point.label = this.x[index]; data_point.label = this.xAxisLabels[index];
return data_point; return data_point;
} }
updateCurrentDataPoint(index) { updateCurrentDataPoint(index) {
index = parseInt(index); index = parseInt(index);
if(index < 0) index = 0; if(index < 0) index = 0;
if(index >= this.x.length) index = this.x.length - 1; if(index >= this.xAxisLabels.length) index = this.xAxisLabels.length - 1;
if(index === this.current_index) return; if(index === this.current_index) return;
this.current_index = index; this.current_index = index;
$.fire(this.parent, "data-select", this.getDataPoint()); $.fire(this.parent, "data-select", this.getDataPoint());
@ -518,7 +518,7 @@ export default class AxisChart extends BaseChart {
set_avg_unit_width_and_x_offset() { set_avg_unit_width_and_x_offset() {
// Set the ... you get it // Set the ... you get it
this.avg_unit_width = this.width/(this.x.length - 1); this.avg_unit_width = this.width/(this.xAxisLabels.length - 1);
this.x_offset = 0; this.x_offset = 0;
} }
@ -535,12 +535,12 @@ export default class AxisChart extends BaseChart {
} }
calc_y_dependencies() { calc_y_dependencies() {
this.y_min_tops = new Array(this.x.length).fill(9999); this.y_min_tops = new Array(this.xAxisLabels.length).fill(9999);
this.y.map(d => { this.y.map(d => {
d.y_tops = d.values.map( val => floatTwo(this.zero_line - val * this.multiplier)); d.yUnitPositions = d.values.map( val => floatTwo(this.zero_line - val * this.multiplier));
d.y_tops.map( (y_top, i) => { d.yUnitPositions.map( (yUnitPosition, i) => {
if(y_top < this.y_min_tops[i]) { if(yUnitPosition < this.y_min_tops[i]) {
this.y_min_tops[i] = y_top; this.y_min_tops[i] = yUnitPosition;
} }
}); });
}); });

4
src/js/charts/BarChart.js
View File

@ -23,7 +23,7 @@ export default class BarChart extends AxisChart {
make_overlay() { make_overlay() {
// Just make one out of the first element // Just make one out of the first element
let index = this.x.length - 1; let index = this.xAxisLabels.length - 1;
let unit = this.y[0].svg_units[index]; let unit = this.y[0].svg_units[index];
this.updateCurrentDataPoint(index); this.updateCurrentDataPoint(index);
@ -75,7 +75,7 @@ export default class BarChart extends AxisChart {
} }
set_avg_unit_width_and_x_offset() { set_avg_unit_width_and_x_offset() {
this.avg_unit_width = this.width/(this.x.length + 1); this.avg_unit_width = this.width/(this.xAxisLabels.length + 1);
this.x_offset = this.avg_unit_width; this.x_offset = this.avg_unit_width;
} }
} }

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

@ -58,7 +58,7 @@ export default class LineChart extends AxisChart {
make_paths() { make_paths() {
this.y.map(d => { this.y.map(d => {
this.make_path(d, this.x_axis_positions, d.y_tops, d.color || this.colors[d.index]); this.make_path(d, this.xPositions, d.yUnitPositions, d.color || this.colors[d.index]);
}); });
} }

4
src/js/utils/animate.js
View File

@ -1,8 +1,8 @@
import { getBarHeightAndYAttr } from './draw-utils'; import { getBarHeightAndYAttr } from './draw-utils';
const UNIT_ANIM_DUR = 350; const UNIT_ANIM_DUR = 350;
const PATH_ANIM_DUR = 350; const PATH_ANIM_DUR = 650;
const MARKER_LINE_ANIM_DUR = 350; const MARKER_LINE_ANIM_DUR = UNIT_ANIM_DUR;
export const REPLACE_ALL_NEW_DUR = 250; export const REPLACE_ALL_NEW_DUR = 250;
const STD_EASING = 'easein'; const STD_EASING = 'easein';