calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-08-25 21:45:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add valueFormatter prop to ToggleableTrendChart and ChartTooltipContent so we see more decimals

Browse Source
This commit is contained in:
Owen
2026-08-24 14:39:17 -04:00
parent 2051e5df37
commit 77cab56fa9
3 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ai-usage-analytics/ToggleableTrendChart.tsx
+2
View File
@@ -129,6 +129,7 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
payload?.[0]?.payload?.day payload?.[0]?.payload?.day
) )
} }
valueFormatter={valueFormatter}
/> />
} }
/> />
@@ -172,6 +173,7 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
payload?.[0]?.payload?.day payload?.[0]?.payload?.day
) )
} }
valueFormatter={valueFormatter}
/> />
} }
/> />
src/components/ai-usage-analytics/shared.ts
+2 -1
View File
@@ -47,7 +47,8 @@ export function buildSeriesFromData(
export const currencyFormatter = new Intl.NumberFormat(undefined, { export const currencyFormatter = new Intl.NumberFormat(undefined, {
style: "currency", style: "currency",
currency: "USD", currency: "USD",
maximumFractionDigits: 2 minimumFractionDigits: 2,
maximumFractionDigits: 4
}); });
export const compactNumberFormatter = new Intl.NumberFormat(undefined, { export const compactNumberFormatter = new Intl.NumberFormat(undefined, {
src/components/ui/chart.tsx
+16 -10
View File
@@ -135,6 +135,7 @@ type ChartTooltipContentProps = React.ComponentProps<"div"> & {
labelKey?: string; labelKey?: string;
color?: string; color?: string;
labelClassName?: string; labelClassName?: string;
valueFormatter?: (value: number) => string;
}; };
const ChartTooltipContent = React.forwardRef< const ChartTooltipContent = React.forwardRef<
@@ -155,7 +156,8 @@ const ChartTooltipContent = React.forwardRef<
formatter, formatter,
color, color,
nameKey, nameKey,
labelKey labelKey,
valueFormatter
}, },
ref ref
) => { ) => {
@@ -302,19 +304,23 @@ const ChartTooltipContent = React.forwardRef<
item.name} item.name}
</span> </span>
</div> </div>
{item.value && ( {item.value !== undefined && (
<span className="font-mono font-medium tabular-nums text-foreground"> <span className="font-mono font-medium tabular-nums text-foreground">
{!isNaN( {!isNaN(
item.value as number item.value as number
) )
? new Intl.NumberFormat( ? valueFormatter
navigator.language, ? valueFormatter(
{ item.value as number
maximumFractionDigits: 0 )
} : new Intl.NumberFormat(
).format( navigator.language,
item.value as number {
) maximumFractionDigits: 0
}
).format(
item.value as number
)
: item.value.toLocaleString()} : item.value.toLocaleString()}
</span> </span>
)} )}