From 2c77a90a479376e9001fea44acd9536c2f1ba621 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment?= <clement@numericite.eu>
Date: Wed, 15 Nov 2023 11:15:48 +0100
Subject: [PATCH 1/4] fix: use new colors to map & doughnut

---
 .../components/charts/doughnut/Doughnut.tsx   | 14 ++++++++--
 webapp-next/components/charts/map/Legends.tsx | 16 +++++------
 webapp-next/utils/map/props.ts                | 27 ++++++++++++++-----
 webapp-next/utils/tools.ts                    | 15 ++++++++---
 4 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/webapp-next/components/charts/doughnut/Doughnut.tsx b/webapp-next/components/charts/doughnut/Doughnut.tsx
index ed4d7a9..afe396a 100644
--- a/webapp-next/components/charts/doughnut/Doughnut.tsx
+++ b/webapp-next/components/charts/doughnut/Doughnut.tsx
@@ -1,7 +1,11 @@
 import { doughnutProps } from '@/utils/chartjs/props';
 import { Cm2dContext } from '@/utils/cm2d-provider';
 import { orders, sortByOrder } from '@/utils/orders';
-import { capitalizeString, getLabelFromKey } from '@/utils/tools';
+import {
+  capitalizeString,
+  chartsAvailableColors,
+  getLabelFromKey
+} from '@/utils/tools';
 import { useContext, useEffect, useState } from 'react';
 import { Doughnut } from 'react-chartjs-2';
 
@@ -45,11 +49,17 @@ export const ChartDoughnut = (props: Props) => {
             label = getLabelFromKey(ds.label.toString());
           }
 
+          const colors = yValues.map(
+            (_, index) =>
+              chartsAvailableColors[index % chartsAvailableColors.length]
+          );
+
           return {
             label: capitalizeString(label),
             data: yValues,
             fill: true,
-            borderRadius: 10
+            borderRadius: 10,
+            backgroundColor: colors
           };
         })
       );
diff --git a/webapp-next/components/charts/map/Legends.tsx b/webapp-next/components/charts/map/Legends.tsx
index a5db16f..a097a91 100644
--- a/webapp-next/components/charts/map/Legends.tsx
+++ b/webapp-next/components/charts/map/Legends.tsx
@@ -3,23 +3,23 @@ import { Box, Flex, Text } from '@chakra-ui/react';
 export function Legends() {
   const legends = [
     {
-      color: 'green.100',
-      borderColor: 'green.300',
+      color: '#c9e7c8',
+      borderColor: '#4daf4a',
       content: '0-10%'
     },
     {
-      color: 'blue.100',
-      borderColor: 'blue.300',
+      color: '#c3d8e9',
+      borderColor: '#377eb8',
       content: '10-20%'
     },
     {
-      color: 'orange.100',
-      borderColor: 'orange.300',
+      color: '#ffd8b2',
+      borderColor: '#ff7f00',
       content: '20-30%'
     },
     {
-      color: 'red.100',
-      borderColor: 'red.300',
+      color: '#f6baba',
+      borderColor: '#e41a1c',
       content: '30%+'
     }
   ];
diff --git a/webapp-next/utils/map/props.ts b/webapp-next/utils/map/props.ts
index 5da6aeb..5c72bcc 100644
--- a/webapp-next/utils/map/props.ts
+++ b/webapp-next/utils/map/props.ts
@@ -1,5 +1,5 @@
 import { orders, sortByOrder } from '../orders';
-import { capitalizeString, getLabelFromKey, isNC } from '../tools';
+import { capitalizeString, getLabelFromKey, hexToRGB, isNC } from '../tools';
 
 export const getMapProps = (
   id: string,
@@ -33,11 +33,26 @@ export const getMapProps = (
   }
 
   const stateColors = {
-    GREEN: { initial: '#C6F6D5', hover: '#68D391' },
-    BLUE: { initial: '#E9F1FF', hover: '#A7C4FD' },
-    ORANGE: { initial: '#FEEBCB', hover: '#F8AB4E' },
-    RED: { initial: '#FED7D7', hover: '#FC8181' },
-    NEUTRAL: { initial: '#EDF2F7', hover: '#CBD5E0' }
+    GREEN: {
+      initial: '#c9e7c8',
+      hover: '#4daf4a'
+    },
+    BLUE: {
+      initial: '#c3d8e9',
+      hover: '#377eb8'
+    },
+    ORANGE: {
+      initial: '#ffd8b2',
+      hover: '#ff7f00'
+    },
+    RED: {
+      initial: '#f6baba',
+      hover: '#e41a1c'
+    },
+    NEUTRAL: {
+      initial: '#e0e0e0',
+      hover: '#999999'
+    }
   };
 
   const getCountFromKey = (key: number): number => {
diff --git a/webapp-next/utils/tools.ts b/webapp-next/utils/tools.ts
index 7e42e9c..93185ce 100644
--- a/webapp-next/utils/tools.ts
+++ b/webapp-next/utils/tools.ts
@@ -384,7 +384,7 @@ export function getLastDayOfMonth(date: Date): Date {
   return lastDay;
 }
 
-const availableColors = [
+export const chartsAvailableColors = [
   '#e41a1c', // Bright red
   '#377eb8', // Vivid blue
   '#4daf4a', // Strong green
@@ -408,9 +408,16 @@ const availableColors = [
 ];
 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];
+  if (sIndex === undefined || sIndex >= chartsAvailableColors.length)
+    sIndex = Math.floor(Math.random() * chartsAvailableColors.length);
+  return chartsAvailableColors[sIndex];
+}
+
+export function hexToRGB(hex: string): string {
+  let r = parseInt(hex.slice(1, 3), 16);
+  let g = parseInt(hex.slice(3, 5), 16);
+  let b = parseInt(hex.slice(5, 7), 16);
+  return `${r}, ${g}, ${b}`;
 }
 
 export function isStringContainingDate(str: string): boolean {

From d6ce66f4a204380df4027a7e2ff3c2469568c3c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment?= <clement@numericite.eu>
Date: Wed, 15 Nov 2023 17:53:59 +0100
Subject: [PATCH 2/4] feat: map details

---
 webapp-next/components/charts/map/Map.tsx     | 47 +++++++++------
 .../components/charts/map/MapDetails.tsx      | 59 +++++++++++++++++++
 .../map/{Legends.tsx => MapLegends.tsx}       |  2 +-
 webapp-next/utils/map/props.ts                | 17 ++++--
 webapp-next/utils/tools.ts                    | 10 ++++
 5 files changed, 112 insertions(+), 23 deletions(-)
 create mode 100644 webapp-next/components/charts/map/MapDetails.tsx
 rename webapp-next/components/charts/map/{Legends.tsx => MapLegends.tsx} (96%)

diff --git a/webapp-next/components/charts/map/Map.tsx b/webapp-next/components/charts/map/Map.tsx
index 11a3361..b6d66ac 100644
--- a/webapp-next/components/charts/map/Map.tsx
+++ b/webapp-next/components/charts/map/Map.tsx
@@ -1,8 +1,10 @@
+import { Cm2dContext } from '@/utils/cm2d-provider';
 import { getMapProps } from '@/utils/map/props';
+import { MapConfig } from '@/utils/map/type';
 import { Flex } from '@chakra-ui/react';
-import React, { useContext } from 'react';
-import { Legends } from './Legends';
-import { Cm2dContext } from '@/utils/cm2d-provider';
+import React, { useContext, useState } from 'react';
+import { MapDetails } from './MapDetails';
+import { MapLegends } from './MapLegends';
 
 type Props = {
   id: string;
@@ -12,6 +14,7 @@ type Props = {
 export default function MapIframe(props: Props) {
   const iframeRef = React.useRef(null);
   const { datasets, id } = props;
+  const [mapConfig, setMapConfig] = useState<MapConfig | null>(null);
   const context = useContext(Cm2dContext);
 
   if (!context) {
@@ -25,6 +28,7 @@ export default function MapIframe(props: Props) {
 
     if (iframe) {
       const doc = (iframe as any).contentWindow.document;
+      const mapProps = getMapProps(id, datasets, saveAggregateX);
       doc.open();
       doc.write(`
       <html>
@@ -35,13 +39,13 @@ export default function MapIframe(props: Props) {
 						}, true);
 					</script>
 					<script type="text/javascript">
-						${getMapProps(id, datasets, saveAggregateX)}
+						${mapProps.injectJs}
 					</script>
 					<script type="text/javascript" src="libs/countrymap/countrymap.js"></script>
 					<style>
 						#${id}_access {
 							display: none !important;
-						}
+						}setMapConfig
 					</style>
         </head>
         <body style="display: flex; justify-content: center;">
@@ -50,6 +54,8 @@ export default function MapIframe(props: Props) {
       </html>
     `);
       doc.close();
+
+      if (mapProps.config) setMapConfig(mapProps.config);
     }
   };
 
@@ -65,19 +71,26 @@ export default function MapIframe(props: Props) {
   return (
     <Flex flexDir="column">
       <Flex justifyContent="end">
-        <Legends />
+        <MapLegends />
+      </Flex>
+      <Flex alignItems="center">
+        <iframe
+          title="Map"
+          ref={iframeRef}
+          width={'65%'}
+          height="700px"
+          loading="lazy"
+          onClick={e => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+        />
+        {mapConfig && (
+          <Flex w="30%" maxH="400px" overflowY="auto">
+            <MapDetails mapConfig={mapConfig} />
+          </Flex>
+        )}
       </Flex>
-      <iframe
-        title="Map"
-        ref={iframeRef}
-        width={'100%'}
-        height="700px"
-        loading="lazy"
-        onClick={e => {
-          e.preventDefault();
-          e.stopPropagation();
-        }}
-      />
     </Flex>
   );
 }
diff --git a/webapp-next/components/charts/map/MapDetails.tsx b/webapp-next/components/charts/map/MapDetails.tsx
new file mode 100644
index 0000000..d65c83a
--- /dev/null
+++ b/webapp-next/components/charts/map/MapDetails.tsx
@@ -0,0 +1,59 @@
+import { MapConfig } from '@/utils/map/type';
+import { getFirstIntFromString } from '@/utils/tools';
+import { Box, Flex, ListItem, UnorderedList } from '@chakra-ui/react';
+
+export type Props = {
+  mapConfig: MapConfig;
+};
+
+export function MapDetails({ mapConfig }: Props) {
+  console.log(mapConfig);
+
+  function extractDetailsValues(
+    input: string
+  ): { label: string; value: number }[] {
+    const values: { label: string; value: number }[] = [];
+
+    const regex = /<div>([^:]+)\s*:\s*(\d+)<\/div>/g;
+    let match;
+
+    while ((match = regex.exec(input)) !== null) {
+      const label = match[1].trim();
+      const value = parseInt(match[2], 10);
+
+      values.push({ label, value });
+    }
+
+    return values;
+  }
+
+  return (
+    <Flex direction="column">
+      {Object.entries(mapConfig.state_specific).map(([key, value]) => (
+        <Flex key={key} mb={3}>
+          <Box
+            w={4}
+            h={4}
+            mr={2}
+            mt={1.5}
+            borderRadius="full"
+            borderWidth={1}
+            borderColor={value.hover_color}
+            bg={value.color}
+          />
+          <p>
+            <strong>{value.name}</strong> :{' '}
+            {getFirstIntFromString(value.description)}
+            {extractDetailsValues(value.description).map((item, index) => (
+              <UnorderedList key={index} spacing={3} fontSize={'sm'}>
+                <ListItem>
+                  {item.label} : {item.value}
+                </ListItem>
+              </UnorderedList>
+            ))}
+          </p>
+        </Flex>
+      ))}
+    </Flex>
+  );
+}
diff --git a/webapp-next/components/charts/map/Legends.tsx b/webapp-next/components/charts/map/MapLegends.tsx
similarity index 96%
rename from webapp-next/components/charts/map/Legends.tsx
rename to webapp-next/components/charts/map/MapLegends.tsx
index a097a91..1beb3c8 100644
--- a/webapp-next/components/charts/map/Legends.tsx
+++ b/webapp-next/components/charts/map/MapLegends.tsx
@@ -1,6 +1,6 @@
 import { Box, Flex, Text } from '@chakra-ui/react';
 
-export function Legends() {
+export function MapLegends() {
   const legends = [
     {
       color: '#c9e7c8',
diff --git a/webapp-next/utils/map/props.ts b/webapp-next/utils/map/props.ts
index 5c72bcc..8c3240f 100644
--- a/webapp-next/utils/map/props.ts
+++ b/webapp-next/utils/map/props.ts
@@ -1,12 +1,16 @@
 import { orders, sortByOrder } from '../orders';
 import { capitalizeString, getLabelFromKey, hexToRGB, isNC } from '../tools';
+import { MapConfig } from './type';
 
 export const getMapProps = (
   id: string,
   datasets: { hits: any[]; total?: number }[],
   saveAggregateX?: string
-) => {
-  if (!datasets[0]) return '';
+): {
+  config?: MapConfig;
+  injectJs: string;
+} => {
+  if (!datasets[0]) return { injectJs: '' };
 
   const { hits, total } = datasets[0];
 
@@ -113,10 +117,10 @@ export const getMapProps = (
     return `Nombre de décès : ${getCountFromKey(key)}`;
   };
 
-  const config = {
+  const config: MapConfig = {
     main_settings: {
       //General settings
-      width: 700,
+      width: 600,
       background_color: '#FFFFFF',
       background_transparent: 'yes',
       border_color: '#246CF9',
@@ -254,5 +258,8 @@ export const getMapProps = (
     }
   };
 
-  return `var simplemaps_countrymap_mapdata=${JSON.stringify(config)}`;
+  return {
+    config: config,
+    injectJs: `var simplemaps_countrymap_mapdata=${JSON.stringify(config)}`
+  };
 };
diff --git a/webapp-next/utils/tools.ts b/webapp-next/utils/tools.ts
index 93185ce..003cbda 100644
--- a/webapp-next/utils/tools.ts
+++ b/webapp-next/utils/tools.ts
@@ -474,6 +474,16 @@ export function generateCode(): string {
   return code.toString();
 }
 
+export function getFirstIntFromString(input: string): number | null {
+  const match = input.match(/\d+/);
+
+  if (match) {
+    return parseInt(match[0], 10);
+  }
+
+  return null;
+}
+
 export function getCodeEmailHtml(code: string) {
   return `
 		<!DOCTYPE html>

From bf97a427b69b7e4ffebd6f743ffa69d16d259ef8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment?= <clement@numericite.eu>
Date: Wed, 15 Nov 2023 19:25:52 +0100
Subject: [PATCH 3/4] feat: doughnut details legend

---
 .../components/charts/doughnut/Doughnut.tsx   |  1 +
 .../charts/doughnut/DoughnutDetails.tsx       |  0
 webapp-next/components/charts/map/Map.tsx     |  2 +-
 webapp-next/pages/bo/index.tsx                |  1 +
 webapp-next/utils/chartjs/props.ts            | 36 ++++++++-
 webapp-next/utils/map/type.ts                 | 75 +++++++++++++++++++
 6 files changed, 111 insertions(+), 4 deletions(-)
 create mode 100644 webapp-next/components/charts/doughnut/DoughnutDetails.tsx
 create mode 100644 webapp-next/utils/map/type.ts

diff --git a/webapp-next/components/charts/doughnut/Doughnut.tsx b/webapp-next/components/charts/doughnut/Doughnut.tsx
index afe396a..ca7c0f1 100644
--- a/webapp-next/components/charts/doughnut/Doughnut.tsx
+++ b/webapp-next/components/charts/doughnut/Doughnut.tsx
@@ -6,6 +6,7 @@ import {
   chartsAvailableColors,
   getLabelFromKey
 } from '@/utils/tools';
+import { Box, Flex } from '@chakra-ui/react';
 import { useContext, useEffect, useState } from 'react';
 import { Doughnut } from 'react-chartjs-2';
 
diff --git a/webapp-next/components/charts/doughnut/DoughnutDetails.tsx b/webapp-next/components/charts/doughnut/DoughnutDetails.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/webapp-next/components/charts/map/Map.tsx b/webapp-next/components/charts/map/Map.tsx
index b6d66ac..63c923e 100644
--- a/webapp-next/components/charts/map/Map.tsx
+++ b/webapp-next/components/charts/map/Map.tsx
@@ -86,7 +86,7 @@ export default function MapIframe(props: Props) {
           }}
         />
         {mapConfig && (
-          <Flex w="30%" maxH="400px" overflowY="auto">
+          <Flex w="30%" maxH="400px" overflowY="auto" mb={20}>
             <MapDetails mapConfig={mapConfig} />
           </Flex>
         )}
diff --git a/webapp-next/pages/bo/index.tsx b/webapp-next/pages/bo/index.tsx
index ba8b6fc..7adb1ff 100644
--- a/webapp-next/pages/bo/index.tsx
+++ b/webapp-next/pages/bo/index.tsx
@@ -179,6 +179,7 @@ export default function Home() {
           maxH={
             ['line', 'histogram', 'doughnut'].includes(view) ? '30rem' : 'auto'
           }
+          position="relative"
         >
           <Text
             as="h2"
diff --git a/webapp-next/utils/chartjs/props.ts b/webapp-next/utils/chartjs/props.ts
index b26d96f..8319c03 100644
--- a/webapp-next/utils/chartjs/props.ts
+++ b/webapp-next/utils/chartjs/props.ts
@@ -1,4 +1,4 @@
-import { ChartOptions } from 'chart.js';
+import { Chart, ChartData, ChartOptions, LegendItem } from 'chart.js';
 import { legendSpacingPlugin, verticalLegendPlugin } from './utils';
 
 export const lineProps: { options: ChartOptions<'line'>; plugins: any[] } = {
@@ -100,14 +100,44 @@ export const doughnutProps: {
   options: {
     responsive: true,
     maintainAspectRatio: false,
+    layout: {
+      padding: {
+        bottom: 36,
+        top: 20
+      }
+    },
     plugins: {
       filler: {
         propagate: false
       },
       legend: {
-        position: 'top',
+        position: 'right',
         align: 'end',
         labels: {
+          generateLabels: function (chart: Chart) {
+            const data = chart.data as ChartData<'doughnut'>;
+            if (data.labels && data.datasets) {
+              return data.labels.map((label, i) => {
+                const dataset = data.datasets[0];
+                const value = dataset?.data[i] || '';
+                const backgroundColor =
+                  dataset?.backgroundColor || ''
+                    ? Array.isArray(dataset.backgroundColor)
+                      ? dataset.backgroundColor[i]
+                      : dataset.backgroundColor
+                    : 'grey';
+                return {
+                  text: `${label} : ${value}`,
+                  fillStyle: backgroundColor,
+                  strokeStyle: backgroundColor,
+                  lineWidth: 1,
+                  hidden: !chart.getDataVisibility(i),
+                  index: i
+                };
+              });
+            }
+            return [];
+          },
           font: {
             size: 14
           },
@@ -117,7 +147,7 @@ export const doughnutProps: {
         }
       }
     },
-    cutout: 140
+    cutout: 160
   },
   plugins: [legendSpacingPlugin]
 };
diff --git a/webapp-next/utils/map/type.ts b/webapp-next/utils/map/type.ts
new file mode 100644
index 0000000..8072ad0
--- /dev/null
+++ b/webapp-next/utils/map/type.ts
@@ -0,0 +1,75 @@
+export type MapConfig = {
+  main_settings: {
+    width: number;
+    background_color: string;
+    background_transparent: 'yes' | 'no';
+    border_color: string;
+    state_description: string;
+    state_color: string;
+    state_hover_color: string;
+    state_url: string;
+    border_size: number;
+    all_states_inactive: 'yes' | 'no';
+    all_states_zoomable: 'yes' | 'no';
+    location_url: string;
+    location_color: string;
+    location_opacity: number;
+    location_hover_opacity: number;
+    location_size: number;
+    location_type: string;
+    location_image_source: string;
+    location_border_color: string;
+    location_border: number;
+    location_hover_border: number;
+    all_locations_inactive: 'yes' | 'no';
+    all_locations_hidden: 'yes' | 'no';
+    label_color: string;
+    label_hover_color: string;
+    label_size: number;
+    label_font: string;
+    hide_labels: 'yes' | 'no';
+    hide_eastern_labels: 'yes' | 'no';
+    zoom: 'yes' | 'no';
+    manual_zoom: 'yes' | 'no';
+    back_image: 'yes' | 'no';
+    initial_back: 'yes' | 'no';
+    initial_zoom: string;
+    initial_zoom_solo: 'yes' | 'no';
+    region_opacity: number;
+    region_hover_opacity: number;
+    zoom_out_incrementally: 'yes' | 'no';
+    zoom_percentage: number;
+    zoom_time: number;
+    popup_color: string;
+    popup_opacity: number;
+    popup_shadow: number;
+    popup_corners: number;
+    popup_font: string;
+    popup_nocss: 'yes' | 'no';
+    div: any; // Should be replaced with the proper type, e.g., HTMLElement
+    auto_load: 'yes' | 'no';
+    url_new_tab: 'yes' | 'no';
+    images_directory: string;
+    fade_time: number;
+    link_text: string;
+    popups: string;
+    state_image_url: string;
+    state_image_position: string;
+    location_image_url: string;
+  };
+  state_specific: {
+    [key: string]: {
+      name: string;
+      description: string;
+      color: string;
+      hover_color: string;
+    };
+  };
+  regions: {
+    [key: string]: {
+      states: string[];
+      name: string;
+      zoomable: 'yes' | 'no';
+    };
+  };
+};

From 1de2278cd31f3f5b316157ca6496c88f25ebf0b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment?= <clement@numericite.eu>
Date: Wed, 15 Nov 2023 19:26:14 +0100
Subject: [PATCH 4/4] fix: remove unused file

---
 webapp-next/components/charts/doughnut/DoughnutDetails.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 webapp-next/components/charts/doughnut/DoughnutDetails.tsx

diff --git a/webapp-next/components/charts/doughnut/DoughnutDetails.tsx b/webapp-next/components/charts/doughnut/DoughnutDetails.tsx
deleted file mode 100644
index e69de29..0000000