Ver código fonte

[fix] stacked bar animation

tags/1.2.0
Prateeksha Singh 7 anos atrás
pai
commit
3a9755cfc9
12 arquivos alterados com 81 adições e 61 exclusões
  1. +37
    -27
      dist/frappe-charts.esm.js
  2. +1
    -1
      dist/frappe-charts.min.cjs.js
  3. +1
    -1
      dist/frappe-charts.min.esm.js
  4. +1
    -1
      dist/frappe-charts.min.iife.js
  5. +1
    -1
      dist/frappe-charts.min.iife.js.map
  6. +1
    -1
      docs/assets/js/frappe-charts.min.js
  7. +1
    -1
      docs/assets/js/frappe-charts.min.js.map
  8. +20
    -6
      src/js/charts/AxisChart.js
  9. +4
    -4
      src/js/charts/BaseChart.js
  10. +11
    -16
      src/js/objects/ChartComponents.js
  11. +2
    -1
      src/js/utils/animate.js
  12. +1
    -1
      src/js/utils/constants.js

+ 37
- 27
dist/frappe-charts.esm.js Ver arquivo

@@ -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,


+ 1
- 1
dist/frappe-charts.min.cjs.js
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


+ 1
- 1
dist/frappe-charts.min.esm.js
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


+ 1
- 1
dist/frappe-charts.min.iife.js
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


+ 1
- 1
dist/frappe-charts.min.iife.js.map
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


+ 1
- 1
docs/assets/js/frappe-charts.min.js
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


+ 1
- 1
docs/assets/js/frappe-charts.min.js.map
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


+ 20
- 6
src/js/charts/AxisChart.js Ver arquivo

@@ -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,


+ 4
- 4
src/js/charts/BaseChart.js Ver arquivo

@@ -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)) {


+ 11
- 16
src/js/objects/ChartComponents.js Ver arquivo

@@ -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}
));
});


+ 2
- 1
src/js/utils/animate.js Ver arquivo

@@ -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 = [


+ 1
- 1
src/js/utils/constants.js Ver arquivo

@@ -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';


Carregando…
Cancelar
Salvar