diff --git a/webapp-next/components/charts/line/Line.tsx b/webapp-next/components/charts/line/Line.tsx index 377d4c3..1261224 100644 --- a/webapp-next/components/charts/line/Line.tsx +++ b/webapp-next/components/charts/line/Line.tsx @@ -24,7 +24,7 @@ export const ChartLine = (props: Props) => { throw new Error('Menu must be used within a Cm2dProvider'); } - const { saveAggregateX } = context; + const { filters, saveAggregateX } = context; const [displayDatasets, setDisplayDatasets] = useState([]); @@ -75,9 +75,22 @@ export const ChartLine = (props: Props) => { ); }, [datasets]); - if (!datasets.length) return <>; + if (!datasets.length || !filters.start_date || !filters.end_date) + return <>; + + const min = new Date(filters.start_date); + const max = new Date(filters.end_date); + + const datasetWithMostHits = datasets.reduce((prev, current) => { + return prev.hits.length > current.hits.length ? prev : current; + }, datasets[0]); + + const xValues = datasetWithMostHits.hits.map((item: any) => { + const currentDate = new Date(item.key_as_string); + + if (currentDate.getTime() < min.getTime()) return dateToWeekYear(min); + if (currentDate.getTime() > max.getTime()) return dateToWeekYear(max); - const xValues = datasets[0].hits.map((item: any) => { return dateToWeekYear(new Date(item.key_as_string)); }); diff --git a/webapp-next/components/filters/Dates.tsx b/webapp-next/components/filters/Dates.tsx index 8d8619d..d0f12ae 100644 --- a/webapp-next/components/filters/Dates.tsx +++ b/webapp-next/components/filters/Dates.tsx @@ -46,6 +46,9 @@ export function FilterDates() { setStartDate(start); setEndDate(end); }} + onKeyDown={e => { + e.preventDefault(); + }} className={startDate && endDate ? 'has-value' : ''} wrapperClassName={startDate && endDate ? 'has-value' : ''} startDate={startDate} diff --git a/webapp-next/utils/tools.ts b/webapp-next/utils/tools.ts index 435f3e1..3d6b0c1 100644 --- a/webapp-next/utils/tools.ts +++ b/webapp-next/utils/tools.ts @@ -1,6 +1,6 @@ -import { Filters, SearchCategory, View } from './cm2d-provider'; import { format } from 'date-fns'; import moment from 'moment'; +import { Filters, SearchCategory, View } from './cm2d-provider'; export const viewRefs: { label: string; value: View }[] = [ { label: 'Vue courbe', value: 'line' }, @@ -357,10 +357,23 @@ export function dateToMonthYear(date: Date): string { return formattedDate; } -export function dateToWeekYear(date: Date): string { - const weekNumber: string = format(date, 'w'); - const year: string = format(date, 'yyyy'); - return `S${weekNumber} ${year}`; +function getWeekNumber(date: Date): number { + const startOfYear = new Date(date.getFullYear(), 0, 1); + const millisecondsPerDay = 24 * 60 * 60 * 1000; + const dayOfYear = Math.floor( + (date.getTime() - startOfYear.getTime()) / millisecondsPerDay + ); + const weekNumber = Math.ceil((dayOfYear + startOfYear.getDay() + 1) / 7); + + return weekNumber; +} + +export function dateToWeekYear(inputDate: Date): string { + const year = inputDate.getFullYear(); + const weekNumber = getWeekNumber(inputDate); + const formattedString = `S${weekNumber.toString().padStart(2, '0')} ${year}`; + + return formattedString; } export function getLastDayOfMonth(date: Date): Date {