feat: fix html issue in RAS maps

dataforgoodfr · Jun 13, 2024 · 0afeee5 · 0afeee5
1 parent 26effd8
commit 0afeee5
Show file tree

Hide file tree

Showing 7 changed files with 5,569 additions and 5,555 deletions.
diff --git a/public/dashboard/maps/en/evolution-map.html b/public/dashboard/maps/en/evolution-map.html
diff --git a/public/dashboard/maps/en/ras-map.html b/public/dashboard/maps/en/ras-map.html
diff --git a/public/dashboard/maps/fr/evolution-map.html b/public/dashboard/maps/fr/evolution-map.html
diff --git a/public/dashboard/maps/fr/ras-map.html b/public/dashboard/maps/fr/ras-map.html
diff --git a/src/app/[locale]/dashboard/dashboard.tsx b/src/app/[locale]/dashboard/dashboard.tsx
@@ -310,7 +310,7 @@ const TopCountriesSection = () => {
           {t("sections.intro.blocks.top-10.subblock.title")}
         </h3>
 
-        <Chart id="evolution-map" type="maps" className="min-h-[700px]" />
+        <Chart id="evolution-map" type="maps" changeFrameHeight className="min-h-[700px]" />
         <MetaChart
           data={[
             {

diff --git a/src/components/Chart.tsx b/src/components/Chart.tsx
@@ -12,6 +12,7 @@ type ChartProps = {
   className?: string;
   height?: number;
   width?: number;
+  changeFrameHeight?: boolean;
   type?: "graphs" | "maps";
 };
 
@@ -20,6 +21,7 @@ const Chart = ({
   className,
   type = "graphs",
   height = 450,
+  changeFrameHeight = false,
   width,
 }: ChartProps) => {
   const [chartData, setChartData] = useState({
@@ -72,7 +74,10 @@ const Chart = ({
           src={mapData}
           width={1000}
           height={900}
-          className="w-full"
+          className={clsx(
+            "w-full",
+            changeFrameHeight ? "!h-[300px] sm:!h-[500px] xl:!h-[900px]" : "",
+          )}
         />
       ) : (
         <div className="overflow-x-auto">

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -11,8 +11,8 @@ export default {
       },
       colors: {
         purple1: "#3b0764",
-        red1: "#F34620",
-        red2: "#E13212",
+        red2: "#F34620",
+        red1: "#E13212",
         yellow1: "#EBF97B",
         pink1: "#FEEAE9",
         brown1: "#F3E8D8",