Fix: littles features

.env.example

@@ -1,10 +1,9 @@
-# !STARTERCONF Duplicate this to .env.local
+# !STARTERCONF Duplicate this to .env
 
 # DEVELOPMENT TOOLS
 # Ideally, don't add them to production deployment envs
 # !STARTERCONF Change to true if you want to log data
 NEXT_PUBLIC_SHOW_LOGGER="true"
 
-NEXT_PUBLIC_PINKBOMBS_DATA_URL="https://pinkbombsfkynigjl-pinkbombs-data.functions.fnc.fr-par.scw.cloud/api/v1/secure/graphs"
-#NEXT_PUBLIC_PINKBOMBS_DATA_URL="https://pinkbombsfkynigjl-pinkbombs-data.functions.fnc.fr-par.scw.cloud:8080/"
-NEXT_PUBLIC_PINKBOMBS_DATA_API_KEY="pinkbombs"
+export PINKBOMBS_DATA_URL=https://pinkbombsfkynigjl-pinkbombs-data.functions.fnc.fr-par.scw.cloud/api/v1/secure
+export PINKBOMBS_DATA_API_KEY=pinkbombs

src/app/page.tsx

@@ -218,7 +218,7 @@ const BusinessSection = () => {
           connaît depuis quelques décennies une hyper-croissance à l’échelle
           globale.
         </p>
-        <div className="flex md:justify-center min-h-[450px] overflow-y-auto bg-white">
+        <div className="flex md:justify-center min-h-[450px] overflow-y-auto">
           <Plot data={plot.data} layout={plot.layout} />
         </div>
         <div className="flex justify-center">

src/components/DashboardChart.tsx

@@ -1,4 +1,5 @@
 // import Plot from "react-plotly.js";
+import clsx from "clsx";
 import dynamic from "next/dynamic";
 import { Data } from "plotly.js-dist-min";
 import React from "react";
@@ -9,17 +10,29 @@ const DashboardChart = ({
   layout,
   id,
   className,
+  height = 450,
+  width = 700,
 }: {
   data: Data[];
   layout: object;
   id: string;
   className?: string;
+  height?: number;
+  width?: number;
 }) => {
   if (!id || !data || !layout) {
     return <></>;
   }
 
-  return <Plot divId={id} data={data} layout={layout} className={className} />;
+  return (
+    <Plot
+      divId={id}
+      data={data}
+      layout={{ ...layout, width, height }}
+      config={{ responsive: true }}
+      className={clsx("!block", className)}
+    />
+  );
 };
 
 export default DashboardChart;

src/components/Edito.tsx

@@ -32,7 +32,7 @@ const Edito = ({
           <h2 className={clsx("h1", "text-red1")}>{title}</h2>
           <p className="mt-3 lg:mt-6 lg:text-xl text-white">{content}</p>
           <Link
-            className="inline-flex gap-4 mt-6 lg:mt-12 p-4 lg:px-10 lg:text-xl text-red1 font-secondary uppercase rounded-md tracking-widest font-black border-2 border-red1 hover:bg-red1 hover:text-darkblue1"
+            className="inline-flex gap-4 mt-6 lg:mt-12 p-4 lg:px-10 lg:text-xl text-red1 font-secondary uppercase rounded-md tracking-widest border-2 border-red1 hover:bg-red1 hover:text-darkblue1"
             href={link}
           >
             <svg

src/components/JoinBlock.tsx

@@ -67,7 +67,7 @@ const IntroBlock = ({
             saumon au monde, porte une responsabilité particulière dans
             l'orientation des pratiques.
           </p>
-          <div className="flex lg:justify-center min-h-[300px] overflow-y-auto bg-white">
+          <div className="flex lg:justify-center min-h-[300px] overflow-y-auto">
             <Plot data={plot.data} layout={plot.layout} />
           </div>
         </div>