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() {
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];
}
});

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

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