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

Added useFetch hook. Updated database check.

Browse source
This commit is contained in:
Mike Cao 2020-08-30 15:29:31 -07:00
parent 7a81dda7b6
commit d0ca0819c6
14 changed files with 146 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

52
components/metrics/EventsChart.js
View file

@ -1,10 +1,8 @@
import React, { useState, useEffect, useMemo } from 'react';
import classNames from 'classnames';
import React, { useMemo } from 'react';
import tinycolor from 'tinycolor2';
import BarChart from './BarChart';
import { get } from 'lib/web';
import { getTimezone, getDateArray, getDateLength } from 'lib/date';
import styles from './BarChart.module.css';
import useFetch from 'hooks/useFetch';
const COLORS = [
'#2680eb',
@ -18,31 +16,15 @@ const COLORS = [
];
export default function EventsChart({ websiteId, startDate, endDate, unit }) {
const [data, setData] = useState();
const { data } = useFetch(`/api/website/${websiteId}/events`, {
start_at: +startDate,
end_at: +endDate,
unit,
tz: getTimezone(),
});
const datasets = useMemo(() => {
if (!data) return [];
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() {
const data = await get(`/api/website/${websiteId}/events`, {
start_at: +startDate,
end_at: +endDate,
unit,
tz: getTimezone(),
});
const map = data.reduce((obj, { x, t, y }) => {
if (!obj[x]) {
obj[x] = [];
@ -57,8 +39,18 @@ export default function EventsChart({ websiteId, startDate, endDate, unit }) {
map[key] = getDateArray(map[key], startDate, endDate, unit);
});
setData(map);
}
return Object.keys(map).map((key, index) => {
const color = tinycolor(COLORS[index]);
return {
label: key,
data: map[key],
lineTension: 0,
backgroundColor: color.setAlpha(0.4).toRgbString(),
borderColor: color.setAlpha(0.5).toRgbString(),
borderWidth: 1,
};
});
}, [data]);
function handleCreate(options) {
const legend = {
@ -74,10 +66,6 @@ export default function EventsChart({ websiteId, startDate, endDate, unit }) {
chart.update();
}
useEffect(() => {
loadData();
}, [websiteId, startDate, endDate]);
if (!data) {
return null;
}