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

Updated menus, chart tooltips, styles.

Browse source
This commit is contained in:
Mike Cao 2025-05-05 01:36:16 -07:00
parent 0a16ab38e4
commit 92b283486e
23 changed files with 179 additions and 208 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/charts/PieChart.tsx
View file

@ -1,27 +1,31 @@
import { Chart, ChartProps } from '@/components/charts/Chart';
import { useState } from 'react';
import { StatusLight } from '@umami/react-zen';
import { formatLongNumber } from '@/lib/format';
import { ChartTooltip } from '@/components/charts/ChartTooltip';
export interface PieChartProps extends ChartProps {
type?: 'doughnut' | 'pie';
}
export function PieChart(props: PieChartProps) {
export function PieChart({ type = 'pie', ...props }: PieChartProps) {
const [tooltip, setTooltip] = useState(null);
const { type = 'pie' } = props;
const handleTooltip = ({ tooltip }) => {
const { labelColors, dataPoints } = tooltip;
const { opacity, labelColors, title, dataPoints } = tooltip;
setTooltip(
tooltip.opacity ? (
<StatusLight color={labelColors?.[0]?.backgroundColor}>
{formatLongNumber(dataPoints?.[0]?.raw)} {dataPoints?.[0]?.label}
</StatusLight>
) : null,
opacity
? {
color: labelColors?.[0]?.backgroundColor,
value: `${title}: ${dataPoints[0].raw}`,
}
: null,
);
};
return <Chart {...props} type={type} tooltip={tooltip} onTooltip={handleTooltip} />;
return (
<>
<Chart {...props} type={type} onTooltip={handleTooltip} />
{tooltip && <ChartTooltip {...tooltip} />}
</>
);
}