ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: use European date/time formats (en-GB) and guard against undefined dateObj

Browse Source
This commit is contained in:
Usman Baig
2026-03-22 15:04:11 +01:00
parent c85f305f1e
commit bd023e76f5
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/dashboard/Chart.tsx
View File

@@ -439,8 +439,8 @@ export default function Chart({
<VisxXAxis <VisxXAxis
numTicks={6} numTicks={6}
formatLabel={interval === 'minute' || interval === 'hour' formatLabel={interval === 'minute' || interval === 'hour'
? (d) => d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }) ? (d) => d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })
: undefined : (d) => d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })
} }
/> />
<VisxYAxis <VisxYAxis
@@ -452,12 +452,12 @@ export default function Chart({
/> />
<VisxChartTooltip <VisxChartTooltip
content={({ point }) => { content={({ point }) => {
const dateObj = point.dateObj as Date const dateObj = point.dateObj instanceof Date ? point.dateObj : new Date(point.dateObj as string || Date.now())
const config = METRIC_CONFIGS.find((m) => m.key === metric) const config = METRIC_CONFIGS.find((m) => m.key === metric)
const value = point[metric] as number const value = point[metric] as number
const title = interval === 'minute' || interval === 'hour' const title = interval === 'minute' || interval === 'hour'
? dateObj.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }) ? dateObj.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })
: dateObj.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }) : dateObj.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' })
return ( return (
<div className="px-3 py-2.5"> <div className="px-3 py-2.5">
<div className="mb-2 font-medium text-neutral-400 text-xs">{title}</div> <div className="mb-2 font-medium text-neutral-400 text-xs">{title}</div>

6
components/ui/area-chart.tsx
View File

@@ -1061,7 +1061,7 @@ export function ChartTooltip({
if (barXAccessor) { if (barXAccessor) {
return barXAccessor(tooltipData.point); return barXAccessor(tooltipData.point);
} }
return xAccessor(tooltipData.point).toLocaleDateString("en-US", { return xAccessor(tooltipData.point).toLocaleDateString("en-GB", {
weekday: "short", weekday: "short",
month: "short", month: "short",
day: "numeric", day: "numeric",
@@ -1377,7 +1377,7 @@ export function XAxis({ numTicks = 5, tickerHalfWidth = 50, formatLabel }: XAxis
dates.push(new Date(time)); dates.push(new Date(time));
} }
const defaultFormat = (d: Date) => d.toLocaleDateString("en-US", { month: "short", day: "numeric" }); const defaultFormat = (d: Date) => d.toLocaleDateString("en-GB", { month: "short", day: "numeric" });
const fmt = formatLabel ?? defaultFormat; const fmt = formatLabel ?? defaultFormat;
return dates.map((date) => ({ return dates.map((date) => ({
@@ -2135,7 +2135,7 @@ function ChartInner({
const dateLabels = useMemo( const dateLabels = useMemo(
() => () =>
data.map((d) => data.map((d) =>
xAccessor(d).toLocaleDateString("en-US", { xAccessor(d).toLocaleDateString("en-GB", {
month: "short", month: "short",
day: "numeric", day: "numeric",
}) })