jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

Bug fixes and working with wrong yAxis data

Browse Source
This commit is contained in:
Kaleb White 2021-11-15 10:28:30 -08:00
parent 5034c7a954
commit b4f3e77acb
4 changed files with 5290 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5111
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

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

@ -51,7 +51,12 @@ export default class AxisChart extends BaseChart {
}; };
}); });
} else { } else {
this.config.yAxisMode = axisOptions.yAxisMode || 'span'; this.config.yAxisMode = yAxis ? yAxis.yAxisMode : axisOptions.yAxisMode || 'span';
// if we have yAxis config settings lets populate a yAxis config array.
if (yAxis.id && yAxis.position) {
this.config.yAxisConfig = [yAxis]
}
} }
this.config.xIsSeries = axisOptions.xIsSeries || 0; this.config.xIsSeries = axisOptions.xIsSeries || 0;
@ -102,7 +107,9 @@ export default class AxisChart extends BaseChart {
calcYAxisParameters(dataValues, withMinimum = 'false') { calcYAxisParameters(dataValues, withMinimum = 'false') {
let yPts, scaleMultiplier, intervalHeight, zeroLine, positions; let yPts, scaleMultiplier, intervalHeight, zeroLine, positions, yAxisConfigObject, yAxisAlignment;
yAxisConfigObject = this.config.yAxisMode || {};
yAxisAlignment = yAxisConfigObject.position ? yAxisConfigObject.position : 'left';
// if we have an object we have multiple yAxisParameters. // if we have an object we have multiple yAxisParameters.
if (dataValues instanceof Array) { if (dataValues instanceof Array) {
@ -110,9 +117,12 @@ export default class AxisChart extends BaseChart {
scaleMultiplier = this.height / getValueRange(yPts); scaleMultiplier = this.height / getValueRange(yPts);
intervalHeight = getIntervalSize(yPts) * scaleMultiplier; intervalHeight = getIntervalSize(yPts) * scaleMultiplier;
zeroLine = this.height - getZeroIndex(yPts) * intervalHeight; zeroLine = this.height - getZeroIndex(yPts) * intervalHeight;
this.state.yAxis = { this.state.yAxis = {
labels: yPts, labels: yPts,
positions: yPts.map((d) => zeroLine - d * scaleMultiplier), positions: yPts.map((d) => zeroLine - d * scaleMultiplier),
title: yAxisConfigObject.title || null,
pos: yAxisAlignment,
scaleMultiplier: scaleMultiplier, scaleMultiplier: scaleMultiplier,
zeroLine: zeroLine zeroLine: zeroLine
}; };
@ -120,19 +130,15 @@ export default class AxisChart extends BaseChart {
this.state.yAxis = []; this.state.yAxis = [];
for (let key in dataValues) { for (let key in dataValues) {
const dataValue = dataValues[key]; const dataValue = dataValues[key];
yAxisConfigObject = this.config.yAxisConfig.find((item) => key === item.id) || [];
yAxisAlignment = yAxisConfigObject.position ? yAxisConfigObject.position : 'left';
yPts = calcChartIntervals(dataValue, withMinimum); yPts = calcChartIntervals(dataValue, withMinimum);
scaleMultiplier = this.height / getValueRange(yPts); scaleMultiplier = this.height / getValueRange(yPts);
intervalHeight = getIntervalSize(yPts) * scaleMultiplier; intervalHeight = getIntervalSize(yPts) * scaleMultiplier;
zeroLine = this.height - getZeroIndex(yPts) * intervalHeight; zeroLine = this.height - getZeroIndex(yPts) * intervalHeight;
positions = yPts.map((d) => zeroLine - d * scaleMultiplier); positions = yPts.map((d) => zeroLine - d * scaleMultiplier);
const yAxisConfigObject = if (this.state.yAxis.length > 1) {
this.config.yAxisConfig.find((item) => key === item.id) || [];
const yAxisAlignment = yAxisConfigObject
? yAxisConfigObject.position
: 'right';
if (this.state.yAxis.length) {
const yPtsArray = []; const yPtsArray = [];
const firstArr = this.state.yAxis[0]; const firstArr = this.state.yAxis[0];
// we need to loop through original positions. // we need to loop through original positions.

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

@ -1,55 +1,75 @@
import { makeSVGGroup } from '../utils/draw'; import { makeSVGGroup } from '../utils/draw';
import { makeText, generateAxisLabel, makePath, xLine, yLine, yMarker, yRegion, datasetBar, datasetDot, percentageBar, getPaths, heatSquare } from '../utils/draw'; import {
makeText,
makePath,
xLine,
yLine,
generateAxisLabel,
yMarker,
yRegion,
datasetBar,
datasetDot,
percentageBar,
getPaths,
heatSquare
} from '../utils/draw';
import { equilizeNoOfElements } from '../utils/draw-utils'; import { equilizeNoOfElements } from '../utils/draw-utils';
import { translateHoriLine, translateVertLine, animateRegion, animateBar, import {
animateDot, animatePath, animatePathStr } from '../utils/animate'; translateHoriLine,
translateVertLine,
animateRegion,
animateBar,
animateDot,
animatePath,
animatePathStr
} from '../utils/animate';
import { getMonthName } from '../utils/date-utils'; import { getMonthName } from '../utils/date-utils';
class ChartComponent { class ChartComponent {
constructor({ constructor({
layerClass = '', layerClass = '',
layerTransform = '', layerTransform = '',
constants, constants,
getData, getData,
makeElements, makeElements,
animateElements animateElements
}) { }) {
this.layerTransform = layerTransform; this.layerTransform = layerTransform;
this.constants = constants; this.constants = constants;
this.makeElements = makeElements; this.makeElements = makeElements;
this.getData = getData; this.getData = getData;
this.animateElements = animateElements; this.animateElements = animateElements;
this.store = []; this.store = [];
this.labels = []; this.labels = [];
this.layerClass = layerClass; this.layerClass = layerClass;
this.layerClass = typeof(this.layerClass) === 'function' this.layerClass =
? this.layerClass() : this.layerClass; typeof this.layerClass === 'function' ? this.layerClass() : this.layerClass;
this.refresh(); this.refresh();
} }
refresh(data) { refresh(data) {
this.data = data || this.getData(); this.data = data || this.getData();
} }
setup(parent) { setup(parent) {
this.layer = makeSVGGroup(this.layerClass, this.layerTransform, parent); this.layer = makeSVGGroup(this.layerClass, this.layerTransform, parent);
} }
make() { make() {
this.render(this.data); this.render(this.data);
this.oldData = this.data; this.oldData = this.data;
} }
render(data) { render(data) {
this.store = this.makeElements(data); this.store = this.makeElements(data);
this.layer.textContent = ''; this.layer.textContent = '';
this.store.forEach((element) => { this.store.forEach((element) => {
element.length element.length
? element.forEach((el) => { ? element.forEach((el) => {
@ -57,12 +77,12 @@ class ChartComponent {
}) })
: this.layer.appendChild(element); : this.layer.appendChild(element);
}); });
this.labels.forEach(element => { this.labels.forEach((element) => {
this.layer.appendChild(element); this.layer.appendChild(element);
}); });
} }
update(animate = true) { update(animate = true) {
this.refresh(); this.refresh();
let animateElements = []; let animateElements = [];
if(animate) { if(animate) {
@ -122,7 +142,7 @@ let componentConfigs = {
layerClass: 'y axis', layerClass: 'y axis',
makeElements(data) { makeElements(data) {
let elements = []; let elements = [];
// will loop through each yaxis dataset if it exists
if (data.length) { if (data.length) {
data.forEach((item, i) => { data.forEach((item, i) => {
item.positions.map((position, i) => { item.positions.map((position, i) => {
@ -150,13 +170,26 @@ let componentConfigs = {
return elements; return elements;
} }
return data.positions.map((position, i) => { data.positions.forEach((position, i) => {
return yLine(position, data.labels[i], this.constants.width, { elements.push(yLine(position, data.labels[i], this.constants.width, {
mode: this.constants.mode, mode: this.constants.mode,
pos: this.constants.pos, pos: data.pos || this.constants.pos,
shortenNumbers: this.constants.shortenNumbers shortenNumbers: this.constants.shortenNumbers
}); }));
}); });
if (data.title) {
elements.push(
generateAxisLabel({
title: data.title,
position: data.pos,
height: data.zeroLine,
width: this.constants.width
})
);
}
return elements;
}, },
animateElements(newData) { animateElements(newData) {
@ -240,9 +273,12 @@ let componentConfigs = {
yMarkers: { yMarkers: {
layerClass: 'y-markers', layerClass: 'y-markers',
makeElements(data) { makeElements(data) {
return data.map(m => return data.map((m) =>
yMarker(m.position, m.label, this.constants.width, yMarker(m.position, m.label, this.constants.width, {
{labelPos: m.options.labelPos, mode: 'span', lineType: 'dashed'}) labelPos: m.options.labelPos,
mode: 'span',
lineType: 'dashed'
})
); );
}, },
animateElements(newData) { animateElements(newData) {
@ -416,84 +452,95 @@ let componentConfigs = {
} }
}, },
lineGraph: { lineGraph: {
layerClass: function() { return 'dataset-units dataset-line dataset-' + this.constants.index; }, layerClass: function () {
makeElements(data) { return 'dataset-units dataset-line dataset-' + this.constants.index;
let c = this.constants; },
this.unitType = 'dot'; makeElements(data) {
this.paths = {}; let c = this.constants;
if(!c.hideLine) { this.unitType = 'dot';
this.paths = getPaths( this.paths = {};
data.xPositions, if (!c.hideLine) {
data.yPositions, this.paths = getPaths(
c.color, data.xPositions,
{ data.yPositions,
heatline: c.heatline, c.color,
regionFill: c.regionFill, {
spline: c.spline heatline: c.heatline,
}, regionFill: c.regionFill,
{ spline: c.spline
svgDefs: c.svgDefs, },
zeroLine: data.zeroLine {
} svgDefs: c.svgDefs,
); zeroLine: data.zeroLine
} }
);
}
this.units = []; this.units = [];
if(!c.hideDots) {
this.units = data.yPositions.map((y, j) => {
return datasetDot(
data.xPositions[j],
y,
data.radius,
c.color,
(c.valuesOverPoints ? data.values[j] : ''),
j
);
});
}
return Object.values(this.paths).concat(this.units); if (!c.hideDots) {
}, this.units = data.yPositions.map((y, j) => {
animateElements(newData) { return datasetDot(
let newXPos = newData.xPositions; data.xPositions[j],
let newYPos = newData.yPositions; y,
let newValues = newData.values; data.radius,
c.color,
c.valuesOverPoints ? data.values[j] : '',
j
);
});
}
let oldXPos = this.oldData.xPositions; return Object.values(this.paths).concat(this.units);
let oldYPos = this.oldData.yPositions; },
let oldValues = this.oldData.values; animateElements(newData) {
let newXPos = newData.xPositions;
let newYPos = newData.yPositions;
let newValues = newData.values;
[oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos); let oldXPos = this.oldData.xPositions;
[oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos); let oldYPos = this.oldData.yPositions;
[oldValues, newValues] = equilizeNoOfElements(oldValues, newValues); let oldValues = this.oldData.values;
this.render({ [oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos);
xPositions: oldXPos, [oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos);
yPositions: oldYPos, [oldValues, newValues] = equilizeNoOfElements(oldValues, newValues);
values: newValues,
zeroLine: this.oldData.zeroLine, this.render({
radius: this.oldData.radius, xPositions: oldXPos,
}); yPositions: oldYPos,
values: newValues,
let animateElements = []; zeroLine: this.oldData.zeroLine,
radius: this.oldData.radius
});
if(Object.keys(this.paths).length) { let animateElements = [];
animateElements = animateElements.concat(animatePath(
this.paths, newXPos, newYPos, newData.zeroLine, this.constants.spline));
}
if(this.units.length) { if (Object.keys(this.paths).length) {
this.units.map((dot, i) => { animateElements = animateElements.concat(
animateElements = animateElements.concat(animateDot( animatePath(
dot, newXPos[i], newYPos[i])); this.paths,
}); newXPos,
} newYPos,
newData.zeroLine,
this.constants.spline
)
);
}
return animateElements; if (this.units.length) {
} this.units.map((dot, i) => {
} animateElements = animateElements.concat(
animateDot(dot, newXPos[i], newYPos[i])
);
});
}
return animateElements;
}
}
}; };
export function getComponent(name, constants, getData) { export function getComponent(name, constants, getData) {