fix: color of lines in chart

SocialGouv · Nov 15, 2023 · 7a9409d · 7a9409d
1 parent 0015616
commit 7a9409d
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 29 deletions.
diff --git a/webapp-next/components/charts/line/Line.tsx b/webapp-next/components/charts/line/Line.tsx
@@ -34,7 +34,6 @@ export const ChartLine = (props: Props) => {
         datasets
           .map(ds => {
             const yValues = ds.hits.map((item: any) => item.doc_count);
-            const hasMultipleDatasets = datasets.length > 1;
             let label = 'nombre de décès';
 
             if (ds.label) {
@@ -45,20 +44,7 @@ export const ChartLine = (props: Props) => {
               label: capitalizeString(label),
               data: yValues,
               fill: true,
-              borderColor: hasMultipleDatasets ? getRandomColor() : '#002395',
               borderWidth: 2,
-              backgroundColor: hasMultipleDatasets
-                ? () => {
-                    return 'transparent';
-                  }
-                : (context: ScriptableContext<'line'>) => {
-                    const ctx = context.chart.ctx;
-                    const gradient = ctx.createLinearGradient(0, 500, 0, 0);
-                    gradient.addColorStop(0, '#FFFFFF');
-                    gradient.addColorStop(0.5, '#EBF1FE');
-                    gradient.addColorStop(1, '#D4E2FE');
-                    return gradient;
-                  },
               tension: 0.5
             };
           })
@@ -72,6 +58,28 @@ export const ChartLine = (props: Props) => {
               ]
             )
           )
+          .map((ds, index) => {
+            const hasMultipleDatasets = datasets.length > 1;
+
+            return {
+              ...ds,
+              borderColor: hasMultipleDatasets
+                ? getRandomColor(index)
+                : '#002395',
+              backgroundColor: hasMultipleDatasets
+                ? () => {
+                    return 'transparent';
+                  }
+                : (context: ScriptableContext<'line'>) => {
+                    const ctx = context.chart.ctx;
+                    const gradient = ctx.createLinearGradient(0, 500, 0, 0);
+                    gradient.addColorStop(0, '#FFFFFF');
+                    gradient.addColorStop(0.5, '#EBF1FE');
+                    gradient.addColorStop(1, '#D4E2FE');
+                    return gradient;
+                  }
+            };
+          })
       );
   }, [datasets]);
 

diff --git a/webapp-next/utils/tools.ts b/webapp-next/utils/tools.ts
@@ -384,22 +384,33 @@ export function getLastDayOfMonth(date: Date): Date {
   return lastDay;
 }
 
-const availableColors: string[] = [
-  '#91B6FC',
-  '#A0AEC0',
-  '#F56565',
-  '#FF943C',
-  '#ECC94B',
-  '#48BB78',
-  '#38B2AC',
-  '#4299E1',
-  '#0BC5EA',
-  '#9F7AEA',
-  '#ED64A6'
+const availableColors = [
+  '#e41a1c', // Bright red
+  '#377eb8', // Vivid blue
+  '#4daf4a', // Strong green
+  '#984ea3', // Deep purple
+  '#ff7f00', // Bright orange
+  '#000000', // Neon yellow
+  '#a65628', // Dark tan
+  '#999999', // Dark gray
+  '#7fc97f', // Faded green
+  '#beaed4', // Soft purple
+  '#fdc086', // Peach
+  '#fb9a99', // Soft red
+  '#e31a1c', // Another shade of red
+  '#fdbf6f', // Light orange
+  '#cab2d6', // Lilac
+  '#1b9e77', // Jade green
+  '#d95f02', // Dark orange
+  '#6a3d9a', // Plum
+  '#33a02c', // Dark green
+  '#b15928' // Sienna
 ];
-export function getRandomColor(): string {
-  const randomIndex = Math.floor(Math.random() * availableColors.length);
-  return availableColors[randomIndex];
+export function getRandomColor(index?: number): string {
+  let sIndex = index;
+  if (sIndex === undefined || sIndex >= availableColors.length)
+    sIndex = Math.floor(Math.random() * availableColors.length);
+  return availableColors[sIndex];
 }
 
 export function isStringContainingDate(str: string): boolean {