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