activeUsers = (data, title) => {
const activeUsersGrowthRate = data.reduce((prev, curr, index) => {
if(index === 0) return prev;
const previous = data[index - 1].states;
const previousValue = previous.high + previous.first + previous.low;
const currentValue = curr.states.high + curr.states.first + curr.states.low;
return [...prev, Math.floor((currentValue - previousValue) / previousValue * 100)]
}, [])
const container = html`<canvas></canvas>`;
const [_, ...lastData] = data
const myChart = new Chart(container, {
type: 'bar',
data: {
labels: data.slice(1).map((d) => dateDiffToHuman(d.date)),
datasets: [{
type: 'line',
data: lastData.map(({ states }) => states.high + states.low + states.first),
label: 'Active User Volume',
yAxisID: 'B',
fill: false,
borderColor: color.green,
lineTension: 0,
borderWidth: 3,
}, {
type: 'bar',
data: activeUsersGrowthRate,
label: 'Active User Volume Growth Rate',
yAxisID: 'A',
backgroundColor: d3.color(color.green).brighter().hex(),
},]
},
options: {
title: {
display: true,
text: title
},
scales: {
yAxes: [{
id: 'B',
ticks: {
min: 0
},
position: 'right',
scaleLabel: {
display: true,
labelString: 'User Volume',
},
gridLines: {
display: false
},
}, {
id: 'A',
ticks: {
callback: (value) => `${value}%`,
},
gridLines: {
zeroLineColor: 'black'
},
scaleLabel: {
display: true,
labelString: 'Active User Volume Growth',
},
}],
}
},
});
return container;
}