jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[fix] stacked bar animation

Browse Source
This commit is contained in:
Prateeksha Singh 2018-03-04 17:40:34 +05:30
parent de19ce8e31
commit 3a9755cfc9
12 changed files with 81 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -336,8 +336,9 @@ function animateRegion(rectGroup, newY1, newY2, oldY2) {
return [rectAnim, groupAnim];
}
function animateBar(bar, x, yTop, width, index=0, meta={}) {
function animateBar(bar, x, yTop, width, offset=0, index=0, meta={}) {
let [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine);
y -= offset;
if(bar.nodeName !== 'rect') {
let rect = bar.childNodes[0];
let rectAnim = [
@ -398,7 +399,7 @@ const LEFT_MARGIN_BASE_CHART = 60;
const RIGHT_MARGIN_BASE_CHART = 40;
const Y_AXIS_MARGIN = 60;
const INIT_CHART_UPDATE_TIMEOUT = 400;
const INIT_CHART_UPDATE_TIMEOUT = 1000;
const CHART_POST_ANIMATE_TIMEOUT = 400;
const DEFAULT_AXIS_CHART_TYPE = 'line';
@ -1133,9 +1134,9 @@ class BaseChart {
this.rawChartArgs = options;
this.parent = typeof parent === 'string' ? document.querySelector(parent) : parent;
if (!(this.parent instanceof HTMLElement)) {
throw new Error('No `parent` element to render on was provided.');
}
if (!(this.parent instanceof HTMLElement)) {
throw new Error('No `parent` element to render on was provided.');
}
this.title = options.title || '';
this.subtitle = options.subtitle || '';
@ -2510,9 +2511,9 @@ let componentConfigs = {
y,
data.barWidth,
c.color,
(c.valuesOverPoints ? (c.stacked ? data.cumulativeYs[j] : data.values[j]) : ''),
data.labels[j],
j,
y - (c.stacked ? data.cumulativeYPos[j] : y),
data.offsets[j],
{
zeroLine: data.zeroLine,
barsWidth: data.barsWidth,
@ -2526,29 +2527,24 @@ let componentConfigs = {
let newXPos = newData.xPositions;
let newYPos = newData.yPositions;
let newCYPos = newData.cumulativeYPos;
let newValues = newData.values;
let newCYs = newData.cumulativeYs;
let newOffsets = newData.offsets;
let newLabels = newData.labels;
let oldXPos = this.oldData.xPositions;
let oldYPos = this.oldData.yPositions;
let oldCYPos = this.oldData.cumulativeYPos;
let oldValues = this.oldData.values;
let oldCYs = this.oldData.cumulativeYs;
let oldOffsets = this.oldData.offsets;
let oldLabels = this.oldData.labels;
[oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos);
[oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos);
[oldCYPos, newCYPos] = equilizeNoOfElements(oldCYPos, newCYPos);
[oldValues, newValues] = equilizeNoOfElements(oldValues, newValues);
[oldCYs, newCYs] = equilizeNoOfElements(oldCYs, newCYs);
[oldOffsets, newOffsets] = equilizeNoOfElements(oldOffsets, newOffsets);
[oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels);
this.render({
xPositions: oldXPos,
yPositions: oldYPos,
cumulativeYPos: oldCYPos,
values: newValues,
cumulativeYs: newCYs,
offsets: oldOffsets,
labels: newLabels,
zeroLine: this.oldData.zeroLine,
barsWidth: this.oldData.barsWidth,
@ -2559,7 +2555,7 @@ let componentConfigs = {
this.store.map((bar, i) => {
animateElements = animateElements.concat(animateBar(
bar, newXPos[i], newYPos[i], newData.barWidth, c.index,
bar, newXPos[i], newYPos[i], newData.barWidth, newOffsets[i], c.index,
{zeroLine: newData.zeroLine}
));
});
@ -2866,23 +2862,37 @@ class AxisChart extends BaseChart {
function() {
let s = this.state;
let d = s.datasets[index];
let stacked = this.barOptions.stacked;
let spaceRatio = this.barOptions.spaceRatio || BAR_CHART_SPACE_RATIO;
let barsWidth = s.unitWidth * (1 - spaceRatio);
let barWidth = barsWidth/(this.barOptions.stacked ? 1 : barDatasets.length);
let barWidth = barsWidth/(stacked ? 1 : barDatasets.length);
let xPositions = s.xAxis.positions.map(x => x - barsWidth/2);
if(!this.barOptions.stacked) {
if(!stacked) {
xPositions = xPositions.map(p => p + barWidth * index);
}
let labels = new Array(s.datasetLength).fill('');
if(this.valuesOverPoints) {
if(stacked && d.index === s.datasets.length - 1) {
labels = d.cumulativeYs;
} else {
labels = d.values;
}
}
let offsets = new Array(s.datasetLength).fill(0);
if(stacked) {
offsets = d.yPositions.map((y, j) => y - d.cumulativeYPos[j]);
}
return {
xPositions: xPositions,
yPositions: d.yPositions,
cumulativeYPos: d.cumulativeYPos,
values: d.values,
cumulativeYs: d.cumulativeYs,
offsets: offsets,
// values: d.values,
labels: labels,
zeroLine: s.yAxis.zeroLine,
barsWidth: barsWidth,

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
dist/frappe-charts.min.iife.js.map 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

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

File diff suppressed because one or more lines are too long

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

@ -219,23 +219,37 @@ export default class AxisChart extends BaseChart {
function() {
let s = this.state;
let d = s.datasets[index];
let stacked = this.barOptions.stacked;
let spaceRatio = this.barOptions.spaceRatio || BAR_CHART_SPACE_RATIO;
let barsWidth = s.unitWidth * (1 - spaceRatio);
let barWidth = barsWidth/(this.barOptions.stacked ? 1 : barDatasets.length);
let barWidth = barsWidth/(stacked ? 1 : barDatasets.length);
let xPositions = s.xAxis.positions.map(x => x - barsWidth/2);
if(!this.barOptions.stacked) {
if(!stacked) {
xPositions = xPositions.map(p => p + barWidth * index);
}
let labels = new Array(s.datasetLength).fill('');
if(this.valuesOverPoints) {
if(stacked && d.index === s.datasets.length - 1) {
labels = d.cumulativeYs;
} else {
labels = d.values;
}
}
let offsets = new Array(s.datasetLength).fill(0);
if(stacked) {
offsets = d.yPositions.map((y, j) => y - d.cumulativeYPos[j]);
}
return {
xPositions: xPositions,
yPositions: d.yPositions,
cumulativeYPos: d.cumulativeYPos,
values: d.values,
cumulativeYs: d.cumulativeYs,
offsets: offsets,
// values: d.values,
labels: labels,
zeroLine: s.yAxis.zeroLine,
barsWidth: barsWidth,

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

@ -13,9 +13,9 @@ export default class BaseChart {
this.rawChartArgs = options;
this.parent = typeof parent === 'string' ? document.querySelector(parent) : parent;
if (!(this.parent instanceof HTMLElement)) {
throw new Error('No `parent` element to render on was provided.');
}
if (!(this.parent instanceof HTMLElement)) {
throw new Error('No `parent` element to render on was provided.');
}
this.title = options.title || '';
this.subtitle = options.subtitle || '';
@ -249,7 +249,7 @@ export default class BaseChart {
'38': this.onUpArrow.bind(this),
'39': this.onRightArrow.bind(this),
'40': this.onDownArrow.bind(this),
}
};
document.addEventListener('keydown', (e) => {
if(isElementInViewport(this.chartWrapper)) {

27
src/js/objects/ChartComponents.js
View File

@ -207,9 +207,9 @@ let componentConfigs = {
y,
data.barWidth,
c.color,
(c.valuesOverPoints ? (c.stacked ? data.cumulativeYs[j] : data.values[j]) : ''),
data.labels[j],
j,
y - (c.stacked ? data.cumulativeYPos[j] : y),
data.offsets[j],
{
zeroLine: data.zeroLine,
barsWidth: data.barsWidth,
@ -223,29 +223,24 @@ let componentConfigs = {
let newXPos = newData.xPositions;
let newYPos = newData.yPositions;
let newCYPos = newData.cumulativeYPos;
let newValues = newData.values;
let newCYs = newData.cumulativeYs;
let newOffsets = newData.offsets;
let newLabels = newData.labels;
let oldXPos = this.oldData.xPositions;
let oldYPos = this.oldData.yPositions;
let oldCYPos = this.oldData.cumulativeYPos;
let oldValues = this.oldData.values;
let oldCYs = this.oldData.cumulativeYs;
let oldOffsets = this.oldData.offsets;
let oldLabels = this.oldData.labels;
[oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos);
[oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos);
[oldCYPos, newCYPos] = equilizeNoOfElements(oldCYPos, newCYPos);
[oldValues, newValues] = equilizeNoOfElements(oldValues, newValues);
[oldCYs, newCYs] = equilizeNoOfElements(oldCYs, newCYs);
[oldOffsets, newOffsets] = equilizeNoOfElements(oldOffsets, newOffsets);
[oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels);
this.render({
xPositions: oldXPos,
yPositions: oldYPos,
cumulativeYPos: oldCYPos,
values: newValues,
cumulativeYs: newCYs,
offsets: oldOffsets,
labels: newLabels,
zeroLine: this.oldData.zeroLine,
barsWidth: this.oldData.barsWidth,
@ -256,7 +251,7 @@ let componentConfigs = {
this.store.map((bar, i) => {
animateElements = animateElements.concat(animateBar(
bar, newXPos[i], newYPos[i], newData.barWidth, c.index,
bar, newXPos[i], newYPos[i], newData.barWidth, newOffsets[i], c.index,
{zeroLine: newData.zeroLine}
));
});

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

@ -42,8 +42,9 @@ export function animateRegion(rectGroup, newY1, newY2, oldY2) {
return [rectAnim, groupAnim];
}
export function animateBar(bar, x, yTop, width, index=0, meta={}) {
export function animateBar(bar, x, yTop, width, offset=0, index=0, meta={}) {
let [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine);
y -= offset;
if(bar.nodeName !== 'rect') {
let rect = bar.childNodes[0];
let rectAnim = [

2
src/js/utils/constants.js
View File

@ -4,7 +4,7 @@ export const LEFT_MARGIN_BASE_CHART = 60;
export const RIGHT_MARGIN_BASE_CHART = 40;
export const Y_AXIS_MARGIN = 60;
export const INIT_CHART_UPDATE_TIMEOUT = 400;
export const INIT_CHART_UPDATE_TIMEOUT = 1000;
export const CHART_POST_ANIMATE_TIMEOUT = 400;
export const DEFAULT_AXIS_CHART_TYPE = 'line';