From e2d7ce8b21f096cb5e7e9eb827d9ffdad52b46aa Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Mon, 26 Oct 2020 12:25:58 +0530 Subject: [PATCH] feat: allow stroke color for yMarker --- src/js/charts/AxisChart.js | 84 +++++++++++++++---------------- src/js/objects/ChartComponents.js | 2 +- 2 files changed, 43 insertions(+), 43 deletions(-) diff --git a/src/js/charts/AxisChart.js b/src/js/charts/AxisChart.js index 6a814d8..63f2f14 100644 --- a/src/js/charts/AxisChart.js +++ b/src/js/charts/AxisChart.js @@ -24,7 +24,7 @@ export default class AxisChart extends BaseChart { } setMeasures() { - if(this.data.datasets.length <= 1) { + if (this.data.datasets.length <= 1) { this.config.showLegend = 0; this.measures.paddings.bottom = 30; } @@ -48,17 +48,17 @@ export default class AxisChart extends BaseChart { this.config.legendRowHeight = 30; } - prepareData(data=this.data) { + prepareData(data = this.data) { return dataPrep(data, this.type); } - prepareFirstData(data=this.data) { + prepareFirstData(data = this.data) { return zeroDataPrep(data); } calc(onlyWidthChange = false) { this.calcXPositions(); - if(!onlyWidthChange) { + if (!onlyWidthChange) { this.calcYAxisParameters(this.getAllYValues(), this.type === 'line'); } this.makeDataByIndex(); @@ -69,9 +69,9 @@ export default class AxisChart extends BaseChart { let labels = this.data.labels; 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 - s.xOffset = s.unitWidth/2; + s.xOffset = s.unitWidth / 2; // // For a pure Line Chart // s.unitWidth = this.width/(s.datasetLength - 1); @@ -127,14 +127,14 @@ export default class AxisChart extends BaseChart { calcYExtremes() { let s = this.state; - if(this.barOptions.stacked) { + if (this.barOptions.stacked) { s.yExtremes = s.datasets[s.datasets.length - 1].cumulativeYPos; return; } s.yExtremes = new Array(s.datasetLength).fill(9999); s.datasets.map(d => { d.yPositions.map((pos, j) => { - if(pos < s.yExtremes[j]) { + if (pos < s.yExtremes[j]) { s.yExtremes[j] = pos; } }); @@ -143,21 +143,21 @@ export default class AxisChart extends BaseChart { calcYRegions() { let s = this.state; - if(this.data.yMarkers) { + if (this.data.yMarkers) { this.state.yMarkers = this.data.yMarkers.map(d => { d.position = scale(d.value, s.yAxis); - if(!d.options) d.options = {}; + if (!d.options) d.options = {}; // if(!d.label.includes(':')) { // d.label += ': ' + d.value; // } return d; }); } - if(this.data.yRegions) { + if (this.data.yRegions) { this.state.yRegions = this.data.yRegions.map(d => { d.startPos = scale(d.start, s.yAxis); d.endPos = scale(d.end, s.yAxis); - if(!d.options) d.options = {}; + if (!d.options) d.options = {}; return d; }); } @@ -166,7 +166,7 @@ export default class AxisChart extends BaseChart { getAllYValues() { let key = 'values'; - if(this.barOptions.stacked) { + if (this.barOptions.stacked) { key = 'cumulativeYs'; let cumulative = new Array(this.state.datasetLength).fill(0); 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]); - if(this.data.yMarkers) { + if (this.data.yMarkers) { allValueLists.push(this.data.yMarkers.map(d => d.value)); } - if(this.data.yRegions) { + if (this.data.yRegions) { this.data.yRegions.map(d => { allValueLists.push([d.end, d.start]); }); @@ -198,7 +198,7 @@ export default class AxisChart extends BaseChart { shortenNumbers: this.config.shortenYAxisNumbers // pos: 'right' }, - function() { + function () { return this.state.yAxis; }.bind(this) ], @@ -210,7 +210,7 @@ export default class AxisChart extends BaseChart { height: this.height, // pos: 'right' }, - function() { + function () { let s = this.state; s.xAxis.calcLabels = getShortenedLabels(this.width, s.xAxis.labels, this.config.xIsSeries); @@ -225,7 +225,7 @@ export default class AxisChart extends BaseChart { width: this.width, pos: 'right' }, - function() { + function () { return this.state.yRegions; }.bind(this) ], @@ -247,23 +247,23 @@ export default class AxisChart extends BaseChart { valuesOverPoints: this.config.valuesOverPoints, minHeight: this.height * MIN_BAR_PERCENT_HEIGHT, }, - function() { + 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/(stacked ? 1 : barDatasets.length); + let barWidth = barsWidth / (stacked ? 1 : barDatasets.length); - let xPositions = s.xAxis.positions.map(x => x - barsWidth/2); - if(!stacked) { + let xPositions = s.xAxis.positions.map(x => x - barsWidth / 2); + if (!stacked) { xPositions = xPositions.map(p => p + barWidth * index); } let labels = new Array(s.datasetLength).fill(''); - if(this.config.valuesOverPoints) { - if(stacked && d.index === s.datasets.length - 1) { + if (this.config.valuesOverPoints) { + if (stacked && d.index === s.datasets.length - 1) { labels = d.cumulativeYs; } else { labels = d.values; @@ -271,7 +271,7 @@ export default class AxisChart extends BaseChart { } let offsets = new Array(s.datasetLength).fill(0); - if(stacked) { + if (stacked) { offsets = d.yPositions.map((y, j) => y - d.cumulativeYPos[j]); } @@ -307,7 +307,7 @@ export default class AxisChart extends BaseChart { // same for all datasets valuesOverPoints: this.config.valuesOverPoints, }, - function() { + function () { let s = this.state; let d = s.datasets[index]; let minLine = s.yAxis.positions[0] < s.yAxis.zeroLine @@ -333,7 +333,7 @@ export default class AxisChart extends BaseChart { width: this.width, pos: 'right' }, - function() { + function () { return this.state.yMarkers; }.bind(this) ] @@ -348,7 +348,7 @@ export default class AxisChart extends BaseChart { .filter(args => !optionals.includes(args[0]) || this.state[args[0]]) .map(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); } return [args[0], component]; @@ -393,8 +393,8 @@ export default class AxisChart extends BaseChart { let relX = e.pageX - o.left - getLeftOffset(m); let relY = e.pageY - o.top; - if(relY < this.height + getTopOffset(m) - && relY > getTopOffset(m)) { + if (relY < this.height + getTopOffset(m) + && relY > getTopOffset(m)) { this.mapTooltipXPosition(relX); } else { this.tip.hideTip(); @@ -404,7 +404,7 @@ export default class AxisChart extends BaseChart { mapTooltipXPosition(relX) { let s = this.state; - if(!s.yExtremes) return; + if (!s.yExtremes) return; let index = getClosestInArray(relX, s.xAxis.positions, true); if (index >= 0) { @@ -413,7 +413,7 @@ export default class AxisChart extends BaseChart { this.tip.setValues( dbi.xPos + this.tip.offset.x, dbi.yExtreme + this.tip.offset.y, - {name: dbi.formattedLabel, value: ''}, + { name: dbi.formattedLabel, value: '' }, dbi.values, 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; } @@ -478,7 +478,7 @@ export default class AxisChart extends BaseChart { } updateOverlayGuides() { - if(this.overlayGuides) { + if (this.overlayGuides) { this.overlayGuides.forEach(g => { let o = g.overlay; o.parentNode.removeChild(o); @@ -524,7 +524,7 @@ export default class AxisChart extends BaseChart { this.setCurrentDataPoint(this.state.currentIndex + 1); } - getDataPoint(index=this.state.currentIndex) { + getDataPoint(index = this.state.currentIndex) { let s = this.state; let data_point = { index: index, @@ -537,9 +537,9 @@ export default class AxisChart extends BaseChart { setCurrentDataPoint(index) { let s = this.state; index = parseInt(index); - if(index < 0) index = 0; - if(index >= s.xAxis.labels.length) index = s.xAxis.labels.length - 1; - if(index === s.currentIndex) return; + if (index < 0) index = 0; + if (index >= s.xAxis.labels.length) index = s.xAxis.labels.length - 1; + if (index === s.currentIndex) return; s.currentIndex = index; fire(this.parent, "data-select", this.getDataPoint()); } @@ -547,7 +547,7 @@ export default class AxisChart extends BaseChart { // API - addDataPoint(label, datasetValues, index=this.state.datasetLength) { + addDataPoint(label, datasetValues, index = this.state.datasetLength) { super.addDataPoint(label, datasetValues, index); this.data.labels.splice(index, 0, label); this.data.datasets.map((d, i) => { @@ -556,7 +556,7 @@ export default class AxisChart extends BaseChart { this.update(this.data); } - removeDataPoint(index = this.state.datasetLength-1) { + removeDataPoint(index = this.state.datasetLength - 1) { if (this.data.labels.length <= 1) { return; } @@ -568,7 +568,7 @@ export default class AxisChart extends BaseChart { this.update(this.data); } - updateDataset(datasetValues, index=0) { + updateDataset(datasetValues, index = 0) { this.data.datasets[index].values = datasetValues; this.update(this.data); } @@ -577,7 +577,7 @@ export default class AxisChart extends BaseChart { updateDatasets(datasets) { this.data.datasets.map((d, i) => { - if(datasets[i]) { + if (datasets[i]) { d.values = datasets[i]; } }); diff --git a/src/js/objects/ChartComponents.js b/src/js/objects/ChartComponents.js index ec6b249..cd20268 100644 --- a/src/js/objects/ChartComponents.js +++ b/src/js/objects/ChartComponents.js @@ -185,7 +185,7 @@ let componentConfigs = { makeElements(data) { return data.map(m => 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) {