Merge pull request #84 from SocialGouv/fix/date-range-input

fix: prevent user from typing in date field

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<any[]>([]);
 
@@ -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));
   });
 

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}

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 {