watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-14 17:45:38 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Refactor BarChart component.

Browse source
This commit is contained in:
Mike Cao 2020-08-27 13:46:05 -07:00
parent 4618dc7f15
commit d936ecc86e
3 changed files with 73 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

40
components/metrics/EventsChart.js
View file

@ -1,21 +1,34 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useMemo } from 'react';
import classNames from 'classnames';
import BarChart from './BarChart';
import { get } from 'lib/web';
import { getTimezone, getDateArray } from 'lib/date';
import { getTimezone, getDateArray, getDateLength } from 'lib/date';
import styles from './PageviewsChart.module.css';
const COLORS = [
'rgba(38, 128, 235, 0.5)',
'rgba(227, 72, 80, 0.5)',
'rgba(146, 86, 217, 0.5)',
'rgba(45, 157, 120, 0.5)',
'rgba(216, 55, 144, 0.5)',
'rgba(227, 72, 80, 0.5)',
'rgba(103, 103, 236, 0.5)',
'rgba(68, 181, 86, 0.5)',
'rgba(146, 86, 217, 0.5)',
];
export default function EventsChart({ websiteId, startDate, endDate, unit, className }) {
const [data, setData] = useState();
const datasets = useMemo(() => {
if (!data) return [];
return Object.keys(data).map((key, index) => ({
label: key,
data: data[key],
lineTension: 0,
backgroundColor: COLORS[index],
borderColor: COLORS[index],
borderWidth: 1,
}));
}, [data]);
async function loadData() {
const data = await get(`/api/website/${websiteId}/events`, {
@ -43,13 +56,7 @@ export default function EventsChart({ websiteId, startDate, endDate, unit, class
}
function handleUpdate(chart) {
const {
data: { datasets },
options,
} = chart;
datasets[0].data = data.uniques;
datasets[1].data = data.pageviews;
chart.data.datasets = datasets;
chart.update();
}
@ -66,16 +73,9 @@ export default function EventsChart({ websiteId, startDate, endDate, unit, class
<div className={classNames(styles.chart, className)}>
<BarChart
chartId={websiteId}
datasets={Object.keys(data).map((key, index) => ({
label: key,
data: data[key],
lineTension: 0,
backgroundColor: COLORS[index],
borderColor: COLORS[index],
borderWidth: 1,
}))}
datasets={datasets}
unit={unit}
records={7}
records={getDateLength(startDate, endDate, unit)}
onUpdate={handleUpdate}
stacked
/>