watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-22 21:45:36 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Bar chart styling.

Browse source
This commit is contained in:
Mike Cao 2020-08-27 18:44:20 -07:00
parent d936ecc86e
commit a7e7469d22
9 changed files with 130 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

66
components/metrics/EventsChart.js
View file

@ -1,33 +1,38 @@
import React, { useState, useEffect, useMemo } from 'react';
import classNames from 'classnames';
import tinycolor from 'tinycolor2';
import BarChart from './BarChart';
import { get } from 'lib/web';
import { getTimezone, getDateArray, getDateLength } from 'lib/date';
import styles from './PageviewsChart.module.css';
import styles from './BarChart.module.css';
const COLORS = [
'rgba(38, 128, 235, 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)',
'#2680eb',
'#9256d9',
'#44b556',
'#e68619',
'#e34850',
'#1b959a',
'#d83790',
'#85d044',
];
export default function EventsChart({ websiteId, startDate, endDate, unit, className }) {
export default function EventsChart({ websiteId, startDate, endDate, unit }) {
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,
}));
return Object.keys(data).map((key, index) => {
const color = tinycolor(COLORS[index]);
return {
label: key,
data: data[key],
lineTension: 0,
backgroundColor: color.setAlpha(0.4).toRgbString(),
borderColor: color.setAlpha(0.5).toRgbString(),
borderWidth: 1,
};
});
}, [data]);
async function loadData() {
@ -55,6 +60,14 @@ export default function EventsChart({ websiteId, startDate, endDate, unit, class
setData(map);
}
function handleCreate(options) {
const legend = {
position: 'bottom',
};
options.legend = legend;
}
function handleUpdate(chart) {
chart.data.datasets = datasets;
@ -70,15 +83,14 @@ export default function EventsChart({ websiteId, startDate, endDate, unit, class
}
return (
<div className={classNames(styles.chart, className)}>
<BarChart
chartId={websiteId}
datasets={datasets}
unit={unit}
records={getDateLength(startDate, endDate, unit)}
onUpdate={handleUpdate}
stacked
/>
</div>
<BarChart
chartId={`events-${websiteId}`}
datasets={datasets}
unit={unit}
records={getDateLength(startDate, endDate, unit)}
onCreate={handleCreate}
onUpdate={handleUpdate}
stacked
/>
);
}