mirror of
https://github.com/Unleash/unleash.git
synced 2025-10-27 11:02:16 +01:00
7044cd4b1a
Adds the same batching functionality that was added to the archived:created chart to the new flags in production chart. In doing so, I've extracted the batching algorithm and the batched tooltip title creation, as well as the ChartDataResult type (though naming suggestions are still welcome on that front). Locale 'ja': <img width="1143" height="370" alt="image" src="https://github.com/user-attachments/assets/827b41c6-0e67-46f4-8f82-4ba12e2120bb" /> Locale 'no': <img width="1475" height="554" alt="image" src="https://github.com/user-attachments/assets/6125c318-25fb-42bd-a520-44e6a7f7ece7" />
36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import { useLocationSettings } from 'hooks/useLocationSettings';
|
||
import { getDateFnsLocale } from '../getDateFnsLocale.ts';
|
||
import type { ChartTypeRegistry, TooltipItem } from 'chart.js';
|
||
import { format, startOfWeek } from 'date-fns';
|
||
|
||
export const useBatchedTooltipDate = <T extends keyof ChartTypeRegistry>(
|
||
fallback: string = 'Unknown date range',
|
||
) => {
|
||
const { locationSettings } = useLocationSettings();
|
||
const locale = getDateFnsLocale(locationSettings.locale);
|
||
return (datapoints: TooltipItem<T>[]) => {
|
||
const dataPoint = datapoints[0].raw as any;
|
||
if (
|
||
'date' in dataPoint &&
|
||
typeof dataPoint.date === 'string' &&
|
||
'endDate' in dataPoint &&
|
||
typeof dataPoint.endDate === 'string'
|
||
) {
|
||
const startDate = format(
|
||
startOfWeek(new Date(dataPoint.date), {
|
||
locale,
|
||
weekStartsOn: 1,
|
||
}),
|
||
`PP`,
|
||
{ locale },
|
||
);
|
||
const endDate = format(new Date(dataPoint.endDate), `PP`, {
|
||
locale,
|
||
});
|
||
return `${startDate} – ${endDate}`;
|
||
}
|
||
|
||
return fallback;
|
||
};
|
||
};
|