jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

feat: allow stroke color for yMarker

Browse Source
This commit is contained in:
Shivam Mishra 2020-10-26 12:25:58 +05:30
parent 73f1d9b1e3
commit e2d7ce8b21
2 changed files with 43 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,7 @@ export default class AxisChart extends BaseChart {
} }
setMeasures() { setMeasures() {
if(this.data.datasets.length <= 1) { if (this.data.datasets.length <= 1) {
this.config.showLegend = 0; this.config.showLegend = 0;
this.measures.paddings.bottom = 30; this.measures.paddings.bottom = 30;
} }
@ -48,17 +48,17 @@ export default class AxisChart extends BaseChart {
this.config.legendRowHeight = 30; this.config.legendRowHeight = 30;
} }
prepareData(data=this.data) { prepareData(data = this.data) {
return dataPrep(data, this.type); return dataPrep(data, this.type);
} }
prepareFirstData(data=this.data) { prepareFirstData(data = this.data) {
return zeroDataPrep(data); return zeroDataPrep(data);
} }
calc(onlyWidthChange = false) { calc(onlyWidthChange = false) {
this.calcXPositions(); this.calcXPositions();
if(!onlyWidthChange) { if (!onlyWidthChange) {
this.calcYAxisParameters(this.getAllYValues(), this.type === 'line'); this.calcYAxisParameters(this.getAllYValues(), this.type === 'line');
} }
this.makeDataByIndex(); this.makeDataByIndex();
@ -69,9 +69,9 @@ export default class AxisChart extends BaseChart {
let labels = this.data.labels; let labels = this.data.labels;
s.datasetLength = labels.length; s.datasetLength = labels.length;
s.unitWidth = this.width/(s.datasetLength); s.unitWidth = this.width / (s.datasetLength);
// Default, as per bar, and mixed. Only line will be a special case // Default, as per bar, and mixed. Only line will be a special case
s.xOffset = s.unitWidth/2; s.xOffset = s.unitWidth / 2;
// // For a pure Line Chart // // For a pure Line Chart
// s.unitWidth = this.width/(s.datasetLength - 1); // s.unitWidth = this.width/(s.datasetLength - 1);
@ -127,14 +127,14 @@ export default class AxisChart extends BaseChart {
calcYExtremes() { calcYExtremes() {
let s = this.state; let s = this.state;
if(this.barOptions.stacked) { if (this.barOptions.stacked) {
s.yExtremes = s.datasets[s.datasets.length - 1].cumulativeYPos; s.yExtremes = s.datasets[s.datasets.length - 1].cumulativeYPos;
return; return;
} }
s.yExtremes = new Array(s.datasetLength).fill(9999); s.yExtremes = new Array(s.datasetLength).fill(9999);
s.datasets.map(d => { s.datasets.map(d => {
d.yPositions.map((pos, j) => { d.yPositions.map((pos, j) => {
if(pos < s.yExtremes[j]) { if (pos < s.yExtremes[j]) {
s.yExtremes[j] = pos; s.yExtremes[j] = pos;
} }
}); });
@ -143,21 +143,21 @@ export default class AxisChart extends BaseChart {
calcYRegions() { calcYRegions() {
let s = this.state; let s = this.state;
if(this.data.yMarkers) { if (this.data.yMarkers) {
this.state.yMarkers = this.data.yMarkers.map(d => { this.state.yMarkers = this.data.yMarkers.map(d => {
d.position = scale(d.value, s.yAxis); d.position = scale(d.value, s.yAxis);
if(!d.options) d.options = {}; if (!d.options) d.options = {};
// if(!d.label.includes(':')) { // if(!d.label.includes(':')) {
// d.label += ': ' + d.value; // d.label += ': ' + d.value;
// } // }
return d; return d;
}); });
} }
if(this.data.yRegions) { if (this.data.yRegions) {
this.state.yRegions = this.data.yRegions.map(d => { this.state.yRegions = this.data.yRegions.map(d => {
d.startPos = scale(d.start, s.yAxis); d.startPos = scale(d.start, s.yAxis);
d.endPos = scale(d.end, s.yAxis); d.endPos = scale(d.end, s.yAxis);
if(!d.options) d.options = {}; if (!d.options) d.options = {};
return d; return d;
}); });
} }
@ -166,7 +166,7 @@ export default class AxisChart extends BaseChart {
getAllYValues() { getAllYValues() {
let key = 'values'; let key = 'values';
if(this.barOptions.stacked) { if (this.barOptions.stacked) {
key = 'cumulativeYs'; key = 'cumulativeYs';
let cumulative = new Array(this.state.datasetLength).fill(0); let cumulative = new Array(this.state.datasetLength).fill(0);
this.data.datasets.map((d, i) => { this.data.datasets.map((d, i) => {
@ -176,10 +176,10 @@ export default class AxisChart extends BaseChart {
} }
let allValueLists = this.data.datasets.map(d => d[key]); let allValueLists = this.data.datasets.map(d => d[key]);
if(this.data.yMarkers) { if (this.data.yMarkers) {
allValueLists.push(this.data.yMarkers.map(d => d.value)); allValueLists.push(this.data.yMarkers.map(d => d.value));
} }
if(this.data.yRegions) { if (this.data.yRegions) {
this.data.yRegions.map(d => { this.data.yRegions.map(d => {
allValueLists.push([d.end, d.start]); allValueLists.push([d.end, d.start]);
}); });
@ -198,7 +198,7 @@ export default class AxisChart extends BaseChart {
shortenNumbers: this.config.shortenYAxisNumbers shortenNumbers: this.config.shortenYAxisNumbers
// pos: 'right' // pos: 'right'
}, },
function() { function () {
return this.state.yAxis; return this.state.yAxis;
}.bind(this) }.bind(this)
], ],
@ -210,7 +210,7 @@ export default class AxisChart extends BaseChart {
height: this.height, height: this.height,
// pos: 'right' // pos: 'right'
}, },
function() { function () {
let s = this.state; let s = this.state;
s.xAxis.calcLabels = getShortenedLabels(this.width, s.xAxis.calcLabels = getShortenedLabels(this.width,
s.xAxis.labels, this.config.xIsSeries); s.xAxis.labels, this.config.xIsSeries);
@ -225,7 +225,7 @@ export default class AxisChart extends BaseChart {
width: this.width, width: this.width,
pos: 'right' pos: 'right'
}, },
function() { function () {
return this.state.yRegions; return this.state.yRegions;
}.bind(this) }.bind(this)
], ],
@ -247,23 +247,23 @@ export default class AxisChart extends BaseChart {
valuesOverPoints: this.config.valuesOverPoints, valuesOverPoints: this.config.valuesOverPoints,
minHeight: this.height * MIN_BAR_PERCENT_HEIGHT, minHeight: this.height * MIN_BAR_PERCENT_HEIGHT,
}, },
function() { function () {
let s = this.state; let s = this.state;
let d = s.datasets[index]; let d = s.datasets[index];
let stacked = this.barOptions.stacked; let stacked = this.barOptions.stacked;
let spaceRatio = this.barOptions.spaceRatio || BAR_CHART_SPACE_RATIO; let spaceRatio = this.barOptions.spaceRatio || BAR_CHART_SPACE_RATIO;
let barsWidth = s.unitWidth * (1 - spaceRatio); let barsWidth = s.unitWidth * (1 - spaceRatio);
let barWidth = barsWidth/(stacked ? 1 : barDatasets.length); let barWidth = barsWidth / (stacked ? 1 : barDatasets.length);
let xPositions = s.xAxis.positions.map(x => x - barsWidth/2); let xPositions = s.xAxis.positions.map(x => x - barsWidth / 2);
if(!stacked) { if (!stacked) {
xPositions = xPositions.map(p => p + barWidth * index); xPositions = xPositions.map(p => p + barWidth * index);
} }
let labels = new Array(s.datasetLength).fill(''); let labels = new Array(s.datasetLength).fill('');
if(this.config.valuesOverPoints) { if (this.config.valuesOverPoints) {
if(stacked && d.index === s.datasets.length - 1) { if (stacked && d.index === s.datasets.length - 1) {
labels = d.cumulativeYs; labels = d.cumulativeYs;
} else { } else {
labels = d.values; labels = d.values;
@ -271,7 +271,7 @@ export default class AxisChart extends BaseChart {
} }
let offsets = new Array(s.datasetLength).fill(0); let offsets = new Array(s.datasetLength).fill(0);
if(stacked) { if (stacked) {
offsets = d.yPositions.map((y, j) => y - d.cumulativeYPos[j]); offsets = d.yPositions.map((y, j) => y - d.cumulativeYPos[j]);
} }
@ -307,7 +307,7 @@ export default class AxisChart extends BaseChart {
// same for all datasets // same for all datasets
valuesOverPoints: this.config.valuesOverPoints, valuesOverPoints: this.config.valuesOverPoints,
}, },
function() { function () {
let s = this.state; let s = this.state;
let d = s.datasets[index]; let d = s.datasets[index];
let minLine = s.yAxis.positions[0] < s.yAxis.zeroLine let minLine = s.yAxis.positions[0] < s.yAxis.zeroLine
@ -333,7 +333,7 @@ export default class AxisChart extends BaseChart {
width: this.width, width: this.width,
pos: 'right' pos: 'right'
}, },
function() { function () {
return this.state.yMarkers; return this.state.yMarkers;
}.bind(this) }.bind(this)
] ]
@ -348,7 +348,7 @@ export default class AxisChart extends BaseChart {
.filter(args => !optionals.includes(args[0]) || this.state[args[0]]) .filter(args => !optionals.includes(args[0]) || this.state[args[0]])
.map(args => { .map(args => {
let component = getComponent(...args); let component = getComponent(...args);
if(args[0].includes('lineGraph') || args[0].includes('barGraph')) { if (args[0].includes('lineGraph') || args[0].includes('barGraph')) {
this.dataUnitComponents.push(component); this.dataUnitComponents.push(component);
} }
return [args[0], component]; return [args[0], component];
@ -393,8 +393,8 @@ export default class AxisChart extends BaseChart {
let relX = e.pageX - o.left - getLeftOffset(m); let relX = e.pageX - o.left - getLeftOffset(m);
let relY = e.pageY - o.top; let relY = e.pageY - o.top;
if(relY < this.height + getTopOffset(m) if (relY < this.height + getTopOffset(m)
&& relY > getTopOffset(m)) { && relY > getTopOffset(m)) {
this.mapTooltipXPosition(relX); this.mapTooltipXPosition(relX);
} else { } else {
this.tip.hideTip(); this.tip.hideTip();
@ -404,7 +404,7 @@ export default class AxisChart extends BaseChart {
mapTooltipXPosition(relX) { mapTooltipXPosition(relX) {
let s = this.state; let s = this.state;
if(!s.yExtremes) return; if (!s.yExtremes) return;
let index = getClosestInArray(relX, s.xAxis.positions, true); let index = getClosestInArray(relX, s.xAxis.positions, true);
if (index >= 0) { if (index >= 0) {
@ -413,7 +413,7 @@ export default class AxisChart extends BaseChart {
this.tip.setValues( this.tip.setValues(
dbi.xPos + this.tip.offset.x, dbi.xPos + this.tip.offset.x,
dbi.yExtreme + this.tip.offset.y, dbi.yExtreme + this.tip.offset.y,
{name: dbi.formattedLabel, value: ''}, { name: dbi.formattedLabel, value: '' },
dbi.values, dbi.values,
index index
); );
@ -464,7 +464,7 @@ export default class AxisChart extends BaseChart {
}; };
}); });
if(this.state.currentIndex === undefined) { if (this.state.currentIndex === undefined) {
this.state.currentIndex = this.state.datasetLength - 1; this.state.currentIndex = this.state.datasetLength - 1;
} }
@ -478,7 +478,7 @@ export default class AxisChart extends BaseChart {
} }
updateOverlayGuides() { updateOverlayGuides() {
if(this.overlayGuides) { if (this.overlayGuides) {
this.overlayGuides.forEach(g => { this.overlayGuides.forEach(g => {
let o = g.overlay; let o = g.overlay;
o.parentNode.removeChild(o); o.parentNode.removeChild(o);
@ -524,7 +524,7 @@ export default class AxisChart extends BaseChart {
this.setCurrentDataPoint(this.state.currentIndex + 1); this.setCurrentDataPoint(this.state.currentIndex + 1);
} }
getDataPoint(index=this.state.currentIndex) { getDataPoint(index = this.state.currentIndex) {
let s = this.state; let s = this.state;
let data_point = { let data_point = {
index: index, index: index,
@ -537,9 +537,9 @@ export default class AxisChart extends BaseChart {
setCurrentDataPoint(index) { setCurrentDataPoint(index) {
let s = this.state; let s = this.state;
index = parseInt(index); index = parseInt(index);
if(index < 0) index = 0; if (index < 0) index = 0;
if(index >= s.xAxis.labels.length) index = s.xAxis.labels.length - 1; if (index >= s.xAxis.labels.length) index = s.xAxis.labels.length - 1;
if(index === s.currentIndex) return; if (index === s.currentIndex) return;
s.currentIndex = index; s.currentIndex = index;
fire(this.parent, "data-select", this.getDataPoint()); fire(this.parent, "data-select", this.getDataPoint());
} }
@ -547,7 +547,7 @@ export default class AxisChart extends BaseChart {
// API // API
addDataPoint(label, datasetValues, index=this.state.datasetLength) { addDataPoint(label, datasetValues, index = this.state.datasetLength) {
super.addDataPoint(label, datasetValues, index); super.addDataPoint(label, datasetValues, index);
this.data.labels.splice(index, 0, label); this.data.labels.splice(index, 0, label);
this.data.datasets.map((d, i) => { this.data.datasets.map((d, i) => {
@ -556,7 +556,7 @@ export default class AxisChart extends BaseChart {
this.update(this.data); this.update(this.data);
} }
removeDataPoint(index = this.state.datasetLength-1) { removeDataPoint(index = this.state.datasetLength - 1) {
if (this.data.labels.length <= 1) { if (this.data.labels.length <= 1) {
return; return;
} }
@ -568,7 +568,7 @@ export default class AxisChart extends BaseChart {
this.update(this.data); this.update(this.data);
} }
updateDataset(datasetValues, index=0) { updateDataset(datasetValues, index = 0) {
this.data.datasets[index].values = datasetValues; this.data.datasets[index].values = datasetValues;
this.update(this.data); this.update(this.data);
} }
@ -577,7 +577,7 @@ export default class AxisChart extends BaseChart {
updateDatasets(datasets) { updateDatasets(datasets) {
this.data.datasets.map((d, i) => { this.data.datasets.map((d, i) => {
if(datasets[i]) { if (datasets[i]) {
d.values = datasets[i]; d.values = datasets[i];
} }
}); });

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

@ -185,7 +185,7 @@ let componentConfigs = {
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, stroke: m.options.stroke, mode: 'span', lineType: 'dashed' })
); );
}, },
animateElements(newData) { animateElements(newData) {