100 lines
2.1 KiB
JavaScript
100 lines
2.1 KiB
JavaScript
const commonTooltips = () => ({
|
|
mode: 'x',
|
|
intersect: false,
|
|
});
|
|
|
|
const adjustedFontScale = () => ({
|
|
fontSize: 8,
|
|
});
|
|
|
|
const yAxesConfig = (shouldAdjustFontSize = false) => ({
|
|
yAxes: [
|
|
{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
...(shouldAdjustFontSize ? adjustedFontScale() : {}),
|
|
},
|
|
},
|
|
],
|
|
});
|
|
|
|
const xAxesConfig = (shouldAdjustFontSize = false) => ({
|
|
xAxes: [
|
|
{
|
|
ticks: {
|
|
...(shouldAdjustFontSize ? adjustedFontScale() : {}),
|
|
},
|
|
},
|
|
],
|
|
});
|
|
|
|
const commonChartOptions = () => ({
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
legend: false,
|
|
});
|
|
|
|
export const barChartOptions = shouldAdjustFontSize => ({
|
|
...commonChartOptions(),
|
|
scales: {
|
|
...yAxesConfig(shouldAdjustFontSize),
|
|
...xAxesConfig(shouldAdjustFontSize),
|
|
},
|
|
tooltips: {
|
|
...commonTooltips(),
|
|
displayColors: false,
|
|
callbacks: {
|
|
title() {
|
|
return '';
|
|
},
|
|
label({ xLabel, yLabel }) {
|
|
return `${xLabel}: ${yLabel}`;
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
export const pieChartOptions = commonChartOptions;
|
|
|
|
export const lineChartOptions = ({ width, numberOfPoints, shouldAdjustFontSize }) => ({
|
|
...commonChartOptions(),
|
|
scales: {
|
|
...yAxesConfig(shouldAdjustFontSize),
|
|
...xAxesConfig(shouldAdjustFontSize),
|
|
},
|
|
elements: {
|
|
point: {
|
|
hitRadius: width / (numberOfPoints * 2),
|
|
},
|
|
},
|
|
tooltips: {
|
|
...commonTooltips(),
|
|
caretSize: 0,
|
|
multiKeyBackground: 'rgba(0,0,0,0)',
|
|
callbacks: {
|
|
labelColor({ datasetIndex }, { config }) {
|
|
return {
|
|
backgroundColor: config.data.datasets[datasetIndex].backgroundColor,
|
|
borderColor: 'rgba(0,0,0,0)',
|
|
};
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
/**
|
|
* Takes a dataset and returns an array containing the y-values of it's first and last entry.
|
|
* (e.g., [['xValue1', 'yValue1'], ['xValue2', 'yValue2'], ['xValue3', 'yValue3']] will yield ['yValue1', 'yValue3'])
|
|
*
|
|
* @param {Array} data
|
|
* @returns {[*, *]}
|
|
*/
|
|
export const firstAndLastY = data => {
|
|
const [firstEntry] = data;
|
|
const [lastEntry] = data.slice(-1);
|
|
|
|
const firstY = firstEntry[1];
|
|
const lastY = lastEntry[1];
|
|
|
|
return [firstY, lastY];
|
|
};
|