소스 검색

feat: allow stroke color for yMarker

pull/347/head
Shivam Mishra 4 년 전
부모
커밋
e2d7ce8b21
2개의 변경된 파일43개의 추가작업 그리고 43개의 파일을 삭제
  1. +42
    -42
      src/js/charts/AxisChart.js
  2. +1
    -1
      src/js/objects/ChartComponents.js

+ 42
- 42
src/js/charts/AxisChart.js 파일 보기

@@ -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);
if(!stacked) {
let xPositions = s.xAxis.positions.map(x => x - barsWidth / 2);
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(stacked && d.index === s.datasets.length - 1) {
if (this.config.valuesOverPoints) {
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)
&& relY > getTopOffset(m)) {
if (relY < this.height + 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 >= 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; 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];
} }
}); });


+ 1
- 1
src/js/objects/ChartComponents.js 파일 보기

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


불러오는 중...
취소
저장