Open History to see the last commit
1import { View } from "react-native";
2
3import type { DailyTotals } from "@t3tools/shared/usageMerge";
4
5import { buildChartDays, type UsageChartMetric } from "./usageChartData";
6import { useProviderColors } from "./usageProviders";
7
8export interface UsageDailyChartProps {
9 readonly days: readonly string[];
10 readonly daily: readonly DailyTotals[];
11 readonly metric: UsageChartMetric;
12 readonly height: number;
13}
14
15export function UsageDailyChart({ days, daily, metric, height }: UsageDailyChartProps) {
16 const colors = useProviderColors();
17 const chartDays = buildChartDays(days, daily, metric);
18 const max = chartDays.reduce((peak, day) => Math.max(peak, day.total), 0);
19
20 return (
21 <View style={{ height }} className="flex-row items-end gap-px">
22 {/* Use column-reverse: provider values are bottom-first and Hermes lacks toReversed. */}
23 {chartDays.map((day) => (
24 <View
25 key={day.day}
26 style={{ height: max === 0 ? 0 : (day.total / max) * height }}
27 className="flex-1 flex-col-reverse overflow-hidden rounded-t-sm"
28 >
29 {day.values.map((entry) => (
30 <View
31 key={entry.provider}
32 style={{
33 height: max === 0 ? 0 : (entry.value / max) * height,
34 backgroundColor: colors[entry.provider],
35 }}
36 />
37 ))}
38 </View>
39 ))}
40 </View>
41 );
42}