| 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
101
102
103
104
105 |
1x
| import tooltipFormatter from './Tooltip';
const gradients = {
day: [
[0, 'rgba(246, 119, 157, 1)'],
[1, 'rgba(246,119,157,0.75)'],
],
type: [
[0, '#C588FF'],
[1, 'rgba(197,136,255,0.75)'],
],
frequency: [
[0, '#71DCE3'],
[1, 'rgba(113,220,227,0.75)'],
],
};
export default (metrics, type, formatter) => ({
title: null,
chart: {
type: 'column',
height: 220,
width: 510,
},
xAxis: {
gridLineWidth: 0,
title: { text: null },
lineWidth: 2,
maxPadding: 0,
minPadding: 0,
tickLength: 0,
minorGridLineWidth: 0,
lineColor: '#EEE',
labels: {
align: 'center',
formatter,
x: 0,
y: 25,
style: {
'font-size': '0.875rem',
'font-weight': '500',
'font-family': 'Roboto, sans serif',
color: '#676767',
},
},
categories: [...Object.keys(metrics).map(metric =>
metric.charAt(0).toUpperCase() + metric.slice(1))],
},
yAxis: {
title: { text: null },
gridLineWidth: 2,
max: Object.values(metrics).reduce((a, b) => Math.max(a, b)) * 100,
min: 0,
softMin: 0,
minRange: 8,
maxPadding: 0.1,
minPadding: 0.1,
gridLineColor: '#EEE',
lineColor: '#EEE',
showLastLabel: true,
endOnTick: false,
labels: {
x: -15,
y: 4,
format: '{value}%',
style: {
'font-size': '0.875rem',
'font-weight': '500',
'font-family': 'Roboto, sans serif',
color: '#676767',
},
},
},
legend: {
enabled: false,
},
credits: {
enabled: false,
},
plotOptions: {
column: {
pointWidth: 33,
borderRadius: 3,
},
},
series: [{
data: Object.values(metrics).map(value => value * 100),
color: {
linearGradient: { x1: 0, y1: 1, x2: 0, y2: 0 },
stops: gradients[type],
},
metricType: type,
}],
tooltip: {
shared: true,
crosshairs: true,
formatter: tooltipFormatter,
backgroundColor: 'rgba(54, 62, 69, 0.95)',
borderRadius: 3,
borderWidth: 0,
shadow: false,
useHTML: true,
},
});
|