1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
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];
};
|
