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

Created PieChart component. Refactored charts.

Browse source
This commit is contained in:
Mike Cao 2024-03-14 20:26:52 -07:00
parent f277580722
commit f6524392e2
15 changed files with 403 additions and 336 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/components/metrics/EventsChart.tsx
View file

@ -1,7 +1,7 @@
import { useMemo } from 'react';
import { Loading } from 'react-basics';
import { colord } from 'colord';
import BarChart from './BarChart';
import BarChart from 'components/charts/BarChart';
import { getDateArray } from 'lib/date';
import {
useLocale,
@ -10,8 +10,8 @@ import {
useNavigation,
useWebsiteEvents,
} from 'components/hooks';
import { EVENT_COLORS } from 'lib/constants';
import { renderDateLabels, renderStatusTooltipPopup } from 'lib/charts';
import { CHART_COLORS } from 'lib/constants';
import { renderDateLabels } from 'lib/charts';
export interface EventsChartProps {
websiteId: string;
@ -26,7 +26,6 @@ export function EventsChart({ websiteId, className, token }: EventsChartProps) {
const {
query: { url, event },
} = useNavigation();
const { data, isLoading } = useWebsiteEvents(websiteId, {
startAt: +startDate,
endAt: +endDate,
@ -38,9 +37,8 @@ export function EventsChart({ websiteId, className, token }: EventsChartProps) {
offset,
});
const datasets = useMemo(() => {
const chartData = useMemo(() => {
if (!data) return [];
if (isLoading) return data;
const map = (data as any[]).reduce((obj, { x, t, y }) => {
if (!obj[x]) {
@ -56,18 +54,20 @@ export function EventsChart({ websiteId, className, token }: EventsChartProps) {
map[key] = getDateArray(map[key], startDate, endDate, unit);
});
return Object.keys(map).map((key, index) => {
const color = colord(EVENT_COLORS[index % EVENT_COLORS.length]);
return {
label: key,
data: map[key],
lineTension: 0,
backgroundColor: color.alpha(0.6).toRgbString(),
borderColor: color.alpha(0.7).toRgbString(),
borderWidth: 1,
};
});
}, [data, isLoading, startDate, endDate, unit]);
return {
datasets: Object.keys(map).map((key, index) => {
const color = colord(CHART_COLORS[index % CHART_COLORS.length]);
return {
label: key,
data: map[key],
lineTension: 0,
backgroundColor: color.alpha(0.6).toRgbString(),
borderColor: color.alpha(0.7).toRgbString(),
borderWidth: 1,
};
}),
};
}, [data, startDate, endDate, unit]);
if (isLoading) {
return <Loading icon="dots" />;
@ -76,11 +76,10 @@ export function EventsChart({ websiteId, className, token }: EventsChartProps) {
return (
<BarChart
className={className}
datasets={datasets as any[]}
data={chartData}
unit={unit}
stacked={true}
renderXLabel={renderDateLabels(unit, locale)}
renderTooltipPopup={renderStatusTooltipPopup(unit, locale)}
isLoading={isLoading}
/>
);