jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[WIP] Working stage to start animation

Browse Source
This commit is contained in:
Prateeksha Singh 2018-02-24 09:30:31 +05:30
parent 7c14a0c5c0
commit e6014e7e82
11 changed files with 239 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1136,9 +1136,6 @@ class BaseChart {
}
update(data) {
// difference from draw(): yes you do rerender everything here as well,
// but not things like the chart itself or layers, mosty only at component level
// HERE IS WHERE THE ACTUAL STATE CHANGES, and old one matters, not in draw
this.refresh(data);
this.reRender();
}
@ -1174,7 +1171,7 @@ class BaseChart {
);
this.svgDefs = makeSVGDefs(this.svg);
// I wish !!!
// I WISH !!!
// this.svg = makeSVGGroup(
// svgContainer,
// 'flipped-coord-system',
@ -1196,7 +1193,9 @@ class BaseChart {
// Will update values(state)
// Will recalc specific parts depending on the update
refreshRenderer() {}
refreshRenderer() {
this.renderer = {};
}
reRender(animate=true) {
if(!animate) {
@ -1219,6 +1218,8 @@ class BaseChart {
renderComponents() { this.components.forEach(c => c.render()); }
loadAnimatedComponents() { this.components.forEach(c => c.loadAnimatedComponents()); }
refreshComponents() { this.components.forEach(c => c.refresh(this.state, this.rawChartArgs)); }
renderLegend() {}
setupNavigation(init=false) {
@ -1259,8 +1260,37 @@ class BaseChart {
onDownArrow() {}
onEnterKey() {}
// updateData() {
// update();
// }
getDataPoint() {}
updateCurrentDataPoint() {}
setCurrentDataPoint() {}
// Update the data here, then do relevant updates
// and drawing in child classes by overriding
// The Child chart will only know what a particular update means
// and what components are affected,
// BaseChart shouldn't be doing the animating
updateDataset(dataset, index) {}
updateDatasets(datasets) {
//
}
addDataset(dataset, index) {}
removeDataset(index = 0) {}
addDataPoint(dataPoint, index = 0) {}
removeDataPoint(index = 0) {}
updateDataPoint(dataPoint, index = 0) {}
getDifferentChart(type) {
return getDifferentChart(type, this.type, this.rawChartArgs);
@ -1273,6 +1303,10 @@ class ChartComponent {
constructor({
layerClass = '',
layerTransform = '',
initData,
// called on update
setData,
preMake,
make,
postMake,
@ -1281,6 +1315,9 @@ class ChartComponent {
this.layerClass = layerClass;
this.layerTransform = layerTransform;
this.initData = initData;
this.setData = setData;
this.preMake = preMake;
this.make = make;
this.postMake = postMake;
@ -1291,9 +1328,15 @@ class ChartComponent {
this.store = [];
}
refresh(args) {}
refresh(state, args) {
this.meta = Object.assign((this.meta || {}), args);
this.state = state;
}
render() {
this.data = this.setData(); // The only without this function?
this.preMake && this.preMake();
this.store = this.make();
@ -1302,7 +1345,7 @@ class ChartComponent {
this.layer.appendChild(element);
});
this.postMake && this.postMake(this.store, this.layer);
this.postMake && this.postMake();
}
setupParent(parent) {
@ -1496,7 +1539,7 @@ function getPaths(yList, xList, color, heatline=false, regionFill=false) {
// // Just make one out of the first element
// let index = this.xAxisLabels.length - 1;
// let unit = this.y[0].svg_units[index];
// this.updateCurrentDataPoint(index);
// this.setCurrentDataPoint(index);
// if(this.overlay) {
// this.overlay.parentNode.removeChild(this.overlay);
@ -1518,7 +1561,7 @@ function getPaths(yList, xList, color, heatline=false, regionFill=false) {
// units_array.map(unit => {
// unit.addEventListener('click', () => {
// let index = unit.getAttribute('data-point-index');
// this.updateCurrentDataPoint(index);
// this.setCurrentDataPoint(index);
// });
// });
// }
@ -1538,11 +1581,11 @@ function getPaths(yList, xList, color, heatline=false, regionFill=false) {
// }
// onLeftArrow() {
// this.updateCurrentDataPoint(this.currentIndex - 1);
// this.setCurrentDataPoint(this.currentIndex - 1);
// }
// onRightArrow() {
// this.updateCurrentDataPoint(this.currentIndex + 1);
// this.setCurrentDataPoint(this.currentIndex + 1);
// }
// }
@ -1998,8 +2041,6 @@ class AxisChart extends BaseChart {
// }
this.components = [
// temp
// this.yAxesAux,
...this.getYAxesComponents(),
this.getXAxisComponents(),
...this.getYRegions(),
@ -2007,13 +2048,26 @@ class AxisChart extends BaseChart {
...this.getYMarkerLines(),
// ...this.getXMarkerLines(),
...this.getChartComponents(),
...this.getChartLabels(),
];
}
getYAxesComponents() {
return [new ChartComponent({
layerClass: 'y axis',
setData: () => {
// let s = this.state;
// data = {};
// return data;
},
initializeData: function() {
this.axesPositions = this.state;
},
make: () => {
// positions, labels, renderer
let s = this.state;
return s.yAxis.positions.map((position, i) =>
this.renderer.yLine(position, s.yAxis.labels[i], {pos:'right'})
@ -2051,8 +2105,10 @@ class AxisChart extends BaseChart {
getXAxisComponents() {
return new ChartComponent({
layerClass: 'x axis',
setData: () => {},
make: () => {
let s = this.state;
// positions
// TODO: xAxis Label spacing
return s.xAxisPositions.map((position, i) =>
this.renderer.xLine(position, s.xAxisLabels[i]
@ -2102,9 +2158,15 @@ class AxisChart extends BaseChart {
return dataUnitsComponents;
}
getChartLabels() {
// To layer all labels above everything else
return [];
}
getDataUnitComponent(index, unitRenderer) {
return new ChartComponent({
layerClass: 'dataset-units dataset-' + index,
setData: () => {},
preMake: () => { },
make: () => {
let d = this.state.datasets[index];
@ -2121,15 +2183,15 @@ class AxisChart extends BaseChart {
);
});
},
postMake: (store, layer) => {
postMake: function() {
let translate_layer = () => {
layer.setAttribute('transform', `translate(${unitRenderer.consts.width * index}, 0)`);
this.layer.setAttribute('transform', `translate(${unitRenderer.consts.width * index}, 0)`);
};
// let d = this.state.datasets[index];
if(this.type === 'bar' && (!this.barOptions
|| !this.barOptions.stacked)) {
if(this.meta.type === 'bar' && (!this.meta.barOptions
|| !this.meta.barOptions.stacked)) {
translate_layer();
}
@ -2167,6 +2229,7 @@ class AxisChart extends BaseChart {
getPathComponent(d, index) {
return new ChartComponent({
layerClass: 'path dataset-path',
setData: () => {},
make: () => {
let d = this.state.datasets[index];
let color = this.colors[index];
@ -2216,6 +2279,7 @@ class AxisChart extends BaseChart {
return this.data.yMarkers.map((d, index) => {
return new ChartComponent({
layerClass: 'y-markers',
setData: () => {},
make: () => {
let s = this.state;
return s.yMarkers.map(marker =>
@ -2236,6 +2300,7 @@ class AxisChart extends BaseChart {
return this.data.yRegions.map((d, index) => {
return new ChartComponent({
layerClass: 'y-regions',
setData: () => {},
make: () => {
let s = this.state;
return s.yRegions.map(region =>
@ -2270,6 +2335,8 @@ class AxisChart extends BaseChart {
this.renderer.refreshState(state);
}
this.refreshComponents();
let meta = {
totalHeight: this.height,
totalWidth: this.width,
@ -2348,7 +2415,7 @@ class AxisChart extends BaseChart {
return data_point;
}
updateCurrentDataPoint(index) {
setCurrentDataPoint(index) {
index = parseInt(index);
if(index < 0) index = 0;
if(index >= this.xAxisLabels.length) index = this.xAxisLabels.length - 1;
@ -2360,6 +2427,7 @@ class AxisChart extends BaseChart {
// API
addDataPoint(label, datasetValues, index=this.state.datasetLength) {
super.addDataPoint(label, datasetValues, index);
// console.log(label, datasetValues, this.data.labels);
this.data.labels.splice(index, 0, label);
this.data.datasets.map((d, i) => {
@ -2370,6 +2438,7 @@ class AxisChart extends BaseChart {
}
removeDataPoint(index = this.state.datasetLength-1) {
super.removeDataPoint(index);
this.data.labels.splice(index, 1);
this.data.datasets.map(d => {
d.values.splice(index, 1);
@ -2377,12 +2446,12 @@ class AxisChart extends BaseChart {
this.update(this.data);
}
updateData() {
// animate if same no. of datasets,
// else return new chart
// updateData() {
// // animate if same no. of datasets,
// // else return new chart
//
}
// //
// }
}

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

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

@ -69,6 +69,37 @@ let line_composite_chart = new Chart ({
valuesOverPoints: 1,
});
// Assuming this data structure for all, what would the most used APIs?
// chart.updateDataset([], index)
// chart.updateDatasets([[], [], []])
// chart.addDataset([], index)
// chart.removeDatasets(index)
// chart.addDataPoint({'asd': [20, 10, 30]})
// chart.removeDataPoint(index)
// chart.updatePoint('asd': [20, 10, 30]}, index)
// chart.update(data)
// let bar_update = [];
// setInterval(() => {
// line_composite_data.datasets = [more_line_data[5]];
// line_composite_chart.update(line_composite_data);
// bar_composite_data.datasets = [more_line_data[5]];
// bar_composite_chart.update(bar_composite_data);
// }, 2000);
bar_composite_chart.parent.addEventListener('data-select', (e) => {
line_composite_chart.updateData([more_line_data[e.index]]);
});
@ -96,7 +127,7 @@ let type_data = {
yRegions: [
{
name: "Region Y 1",
start: 10,
start: -10,
end: 50
},
],
@ -398,7 +429,7 @@ let aggr_chart = new Chart({
colors: ['light-green', 'blue'],
valuesOverPoints: 1,
barOptions: {
stacked: 1
// stacked: 1
}
});

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

@ -257,8 +257,6 @@ export default class AxisChart extends BaseChart {
// }
this.components = [
// temp
// this.yAxesAux,
...this.getYAxesComponents(),
this.getXAxisComponents(),
...this.getYRegions(),
@ -266,13 +264,26 @@ export default class AxisChart extends BaseChart {
...this.getYMarkerLines(),
// ...this.getXMarkerLines(),
...this.getChartComponents(),
...this.getChartLabels(),
];
}
getYAxesComponents() {
return [new ChartComponent({
layerClass: 'y axis',
setData: () => {
// let s = this.state;
// data = {};
// return data;
},
initializeData: function() {
this.axesPositions = this.state
},
make: () => {
// positions, labels, renderer
let s = this.state;
return s.yAxis.positions.map((position, i) =>
this.renderer.yLine(position, s.yAxis.labels[i], {pos:'right'})
@ -310,8 +321,10 @@ export default class AxisChart extends BaseChart {
getXAxisComponents() {
return new ChartComponent({
layerClass: 'x axis',
setData: () => {},
make: () => {
let s = this.state;
// positions
// TODO: xAxis Label spacing
return s.xAxisPositions.map((position, i) =>
this.renderer.xLine(position, s.xAxisLabels[i]
@ -361,9 +374,15 @@ export default class AxisChart extends BaseChart {
return dataUnitsComponents;
}
getChartLabels() {
// To layer all labels above everything else
return [];
}
getDataUnitComponent(index, unitRenderer) {
return new ChartComponent({
layerClass: 'dataset-units dataset-' + index,
setData: () => {},
preMake: () => { },
make: () => {
let d = this.state.datasets[index];
@ -380,15 +399,15 @@ export default class AxisChart extends BaseChart {
);
});
},
postMake: (store, layer) => {
postMake: function() {
let translate_layer = () => {
layer.setAttribute('transform', `translate(${unitRenderer.consts.width * index}, 0)`);
this.layer.setAttribute('transform', `translate(${unitRenderer.consts.width * index}, 0)`);
}
// let d = this.state.datasets[index];
if(this.type === 'bar' && (!this.barOptions
|| !this.barOptions.stacked)) {
if(this.meta.type === 'bar' && (!this.meta.barOptions
|| !this.meta.barOptions.stacked)) {
translate_layer();
}
@ -426,6 +445,7 @@ export default class AxisChart extends BaseChart {
getPathComponent(d, index) {
return new ChartComponent({
layerClass: 'path dataset-path',
setData: () => {},
make: () => {
let d = this.state.datasets[index];
let color = this.colors[index];
@ -475,6 +495,7 @@ export default class AxisChart extends BaseChart {
return this.data.yMarkers.map((d, index) => {
return new ChartComponent({
layerClass: 'y-markers',
setData: () => {},
make: () => {
let s = this.state;
return s.yMarkers.map(marker =>
@ -495,6 +516,7 @@ export default class AxisChart extends BaseChart {
return this.data.yRegions.map((d, index) => {
return new ChartComponent({
layerClass: 'y-regions',
setData: () => {},
make: () => {
let s = this.state;
return s.yRegions.map(region =>
@ -529,6 +551,8 @@ export default class AxisChart extends BaseChart {
this.renderer.refreshState(state);
}
this.refreshComponents();
let meta = {
totalHeight: this.height,
totalWidth: this.width,
@ -607,7 +631,7 @@ export default class AxisChart extends BaseChart {
return data_point;
}
updateCurrentDataPoint(index) {
setCurrentDataPoint(index) {
index = parseInt(index);
if(index < 0) index = 0;
if(index >= this.xAxisLabels.length) index = this.xAxisLabels.length - 1;
@ -619,6 +643,7 @@ export default class AxisChart extends BaseChart {
// API
addDataPoint(label, datasetValues, index=this.state.datasetLength) {
super.addDataPoint(label, datasetValues, index);
// console.log(label, datasetValues, this.data.labels);
this.data.labels.splice(index, 0, label);
this.data.datasets.map((d, i) => {
@ -629,6 +654,7 @@ export default class AxisChart extends BaseChart {
}
removeDataPoint(index = this.state.datasetLength-1) {
super.removeDataPoint(index);
this.data.labels.splice(index, 1);
this.data.datasets.map(d => {
d.values.splice(index, 1);
@ -636,12 +662,12 @@ export default class AxisChart extends BaseChart {
this.update(this.data);
}
updateData() {
// animate if same no. of datasets,
// else return new chart
// updateData() {
// // animate if same no. of datasets,
// // else return new chart
//
}
// //
// }
}

42
src/js/charts/BaseChart.js
View File

@ -198,9 +198,6 @@ export default class BaseChart {
}
update(data) {
// difference from draw(): yes you do rerender everything here as well,
// but not things like the chart itself or layers, mosty only at component level
// HERE IS WHERE THE ACTUAL STATE CHANGES, and old one matters, not in draw
this.refresh(data);
this.reRender();
}
@ -236,7 +233,7 @@ export default class BaseChart {
);
this.svgDefs = makeSVGDefs(this.svg);
// I wish !!!
// I WISH !!!
// this.svg = makeSVGGroup(
// svgContainer,
// 'flipped-coord-system',
@ -258,7 +255,9 @@ export default class BaseChart {
// Will update values(state)
// Will recalc specific parts depending on the update
refreshRenderer() {}
refreshRenderer() {
this.renderer = {};
}
reRender(animate=true) {
if(!animate) {
@ -281,6 +280,8 @@ export default class BaseChart {
renderComponents() { this.components.forEach(c => c.render()); }
loadAnimatedComponents() { this.components.forEach(c => c.loadAnimatedComponents()); }
refreshComponents() { this.components.forEach(c => c.refresh(this.state, this.rawChartArgs)); }
renderLegend() {}
setupNavigation(init=false) {
@ -321,8 +322,37 @@ export default class BaseChart {
onDownArrow() {}
onEnterKey() {}
// updateData() {
// update();
// }
getDataPoint() {}
updateCurrentDataPoint() {}
setCurrentDataPoint() {}
// Update the data here, then do relevant updates
// and drawing in child classes by overriding
// The Child chart will only know what a particular update means
// and what components are affected,
// BaseChart shouldn't be doing the animating
updateDataset(dataset, index) {}
updateDatasets(datasets) {
//
}
addDataset(dataset, index) {}
removeDataset(index = 0) {}
addDataPoint(dataPoint, index = 0) {}
removeDataPoint(index = 0) {}
updateDataPoint(dataPoint, index = 0) {}
getDifferentChart(type) {
return getDifferentChart(type, this.type, this.rawChartArgs);

8
src/js/objects/AxisChartControllers.js
View File

@ -199,7 +199,7 @@ export function getPaths(yList, xList, color, heatline=false, regionFill=false)
// // Just make one out of the first element
// let index = this.xAxisLabels.length - 1;
// let unit = this.y[0].svg_units[index];
// this.updateCurrentDataPoint(index);
// this.setCurrentDataPoint(index);
// if(this.overlay) {
// this.overlay.parentNode.removeChild(this.overlay);
@ -221,7 +221,7 @@ export function getPaths(yList, xList, color, heatline=false, regionFill=false)
// units_array.map(unit => {
// unit.addEventListener('click', () => {
// let index = unit.getAttribute('data-point-index');
// this.updateCurrentDataPoint(index);
// this.setCurrentDataPoint(index);
// });
// });
// }
@ -241,11 +241,11 @@ export function getPaths(yList, xList, color, heatline=false, regionFill=false)
// }
// onLeftArrow() {
// this.updateCurrentDataPoint(this.currentIndex - 1);
// this.setCurrentDataPoint(this.currentIndex - 1);
// }
// onRightArrow() {
// this.updateCurrentDataPoint(this.currentIndex + 1);
// this.setCurrentDataPoint(this.currentIndex + 1);
// }
// }

17
src/js/objects/ChartComponent.js
View File

@ -4,6 +4,10 @@ export class ChartComponent {
constructor({
layerClass = '',
layerTransform = '',
initData,
// called on update
setData,
preMake,
make,
postMake,
@ -12,6 +16,9 @@ export class ChartComponent {
this.layerClass = layerClass;
this.layerTransform = layerTransform;
this.initData = initData;
this.setData = setData;
this.preMake = preMake;
this.make = make;
this.postMake = postMake;
@ -22,9 +29,15 @@ export class ChartComponent {
this.store = [];
}
refresh(args) {}
refresh(state, args) {
this.meta = Object.assign((this.meta || {}), args);
this.state = state;
}
render() {
this.data = this.setData(); // The only without this function?
this.preMake && this.preMake();
this.store = this.make();
@ -33,7 +46,7 @@ export class ChartComponent {
this.layer.appendChild(element);
});
this.postMake && this.postMake(this.store, this.layer);
this.postMake && this.postMake();
}
setupParent(parent) {

16
src/js/utils/draw.js
View File

@ -2,6 +2,22 @@ import { getBarHeightAndYAttr } from './draw-utils';
import { getStringWidth } from './helpers';
import { STD_EASING, UNIT_ANIM_DUR, MARKER_LINE_ANIM_DUR, PATH_ANIM_DUR } from './animate';
/*
<filter id="glow" x="-10%" y="-10%" width="120%" height="120%">
<feGaussianBlur stdDeviation="0.5 0.5" result="glow"></feGaussianBlur>
<feMerge>
<feMergeNode in="glow"></feMergeNode>
<feMergeNode in="glow"></feMergeNode>
<feMergeNode in="glow"></feMergeNode>
</feMerge>
</filter>
filter: url(#glow);
fill: #fff;
*/
const AXIS_TICK_LENGTH = 6;
const LABEL_MARGIN = 4;
export const FONT_SIZE = 10;