Open History to see the last commit
1import { Chart, Host, type ChartDataPoint } from "@expo/ui/swift-ui";
2import { frame } from "@expo/ui/swift-ui/modifiers";
3
4import type { DailyTotals } from "@t3tools/shared/usageMerge";
5
6import { buildChartDays, type UsageChartMetric } from "./usageChartData";
7import { useProviderColors } from "./usageProviders";
8
9export interface UsageDailyChartProps {
10 readonly days: readonly string[];
11 readonly daily: readonly DailyTotals[];
12 readonly metric: UsageChartMetric;
13 readonly height: number;
14}
15
16export function UsageDailyChart({ days, daily, metric, height }: UsageDailyChartProps) {
17 const colors = useProviderColors();
18
19 const data: ChartDataPoint[] = buildChartDays(days, daily, metric).flatMap((day) =>
20 day.values.map((entry) => ({
21 x: day.day,
22 y: entry.value,
23 color: colors[entry.provider],
24 })),
25 );
26
27 return (
28 <Host style={{ height, width: "100%" }}>
29 <Chart
30 type="bar"
31 data={data}
32 animate
33 showGrid={false}
34 barStyle={{ cornerRadius: 2 }}
35 modifiers={[frame({ height })]}
36 />
37 </Host>
38 );
39}