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
)
}
valueFormatter={valueFormatter}
/>
}
/>
@@ -172,6 +173,7 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
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, {
style: "currency",
currency: "USD",
maximumFractionDigits: 2
minimumFractionDigits: 2,
maximumFractionDigits: 4
});
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;
color?: string;
labelClassName?: string;
valueFormatter?: (value: number) => string;
};
const ChartTooltipContent = React.forwardRef<
@@ -155,7 +156,8 @@ const ChartTooltipContent = React.forwardRef<
formatter,
color,
nameKey,
labelKey
labelKey,
valueFormatter
},
ref
) => {
@@ -302,19 +304,23 @@ const ChartTooltipContent = React.forwardRef<
item.name}
</span>
</div>
{item.value && (
{item.value !== undefined && (
<span className="font-mono font-medium tabular-nums text-foreground">
{!isNaN(
item.value as number
)
? new Intl.NumberFormat(
navigator.language,
{
maximumFractionDigits: 0
}
).format(
item.value as number
)
? valueFormatter
? valueFormatter(
item.value as number
)
: new Intl.NumberFormat(
navigator.language,
{
maximumFractionDigits: 0
}
).format(
item.value as number
)
: item.value.toLocaleString()}
</span>
)}