fix: eopsode pollution

SocialGouv · Jul 20, 2023 · 1cb6a2a · 1cb6a2a
1 parent 5cc0bd8
commit 1cb6a2a
Show file tree

Hide file tree

Showing 24 changed files with 405 additions and 1,037 deletions.
diff --git a/frontend/src/components/dashboard/header/EpisodePollution.js b/frontend/src/components/dashboard/header/EpisodePollution.js
@@ -1,43 +1,30 @@
 import React, { useContext } from "react";
-import styled from "styled-components";
 
-import Button from "components/base/Button";
 import useIndicators from "hooks/useIndicators";
 import ModalContext from "utils/ModalContext";
 
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 18rem;
-  margin: 0 auto 2rem;
-  padding: 1.5rem 2rem 1.5rem;
-  background: ${(props) => props.theme.colors.error};
-  border-radius: 1.5rem;
-  box-shadow: 0.25rem 0.25rem 1rem 0
-    rgba(${(props) => props.theme.colors.backgroundAlpha}, 0.4);
-
-  ${(props) => props.theme.mq.small} {
-    padding: 1.5rem 1rem 1rem;
-  }
-`;
-const Title = styled.p`
-  margin-bottom: 1rem;
-  color: ${(props) => props.theme.colors.background};
-  text-align: center;
-`;
-export default function EpisodePollution(props) {
-  const { data } = useIndicators(props.place.code, props.date);
+export default function EpisodePollution({ place, date }) {
+  const { data } = useIndicators(place.code, date);
 
   const { setEpisodePollution } = useContext(ModalContext);
 
-  return data?.episodes_pollution?.advice ? (
-    <Wrapper>
-      <Title>
-        Un épisode de pollution est prévu{" "}
-        {props.date ? "demain" : "aujourd’hui"}
-      </Title>
-      <Button onClick={() => setEpisodePollution(true)}>En savoir plus</Button>
-    </Wrapper>
-  ) : null;
+  if (!data?.episodes_pollution?.advice) return null;
+
+  return (
+    <div className="mx-auto mb-8 flex max-w-xs flex-col gap-y-6 rounded-lg border-2 border-red-500 bg-white p-6 xl:mx-0">
+      <p className="m-0 rounded-full bg-red-500 text-center text-white">
+        ⚠️ Avertissement
+      </p>
+      <p className="m-0 text-center font-medium">
+        Un épisode de pollution est prévu {date ? "demain" : "aujourd’hui"}
+      </p>
+      <button
+        type="button"
+        className="text-center text-main underline"
+        onClick={() => setEpisodePollution(true)}
+      >
+        En savoir plus
+      </button>
+    </div>
+  );
 }
diff --git a/frontend/src/components/dashboard/indicators/Baignades.js b/frontend/src/components/dashboard/indicators/Baignades.js
@@ -6,7 +6,6 @@ import React, {
   useEffect,
 } from "react";
 
-import Chart from "./baignades/Chart";
 import useBaignades from "hooks/useBaignades";
 import ModalContext from "utils/ModalContext";
 
@@ -267,3 +266,61 @@ export default function Baignades(props) {
     </article>
   );
 }
+
+function Chart({ visible, summary, value }) {
+  const getStrokeColor = useCallback(
+    (index) => {
+      if (!visible) return "stroke-disabled";
+      if (value < index) return "stroke-disabled";
+      if (value < 2) return `stroke-baignades-${value}`;
+      if (summary[index] > 0) return `stroke-baignades-${index}`;
+      return "stroke-disabled";
+    },
+    [visible, value, summary]
+  );
+
+  return (
+    <svg
+      className="mx-auto h-12 w-auto overflow-visible"
+      aria-hidden={true}
+      viewBox="0 0 48 48"
+    >
+      <path
+        style={{
+          transition: visible
+            ? "opacity 1200ms 900ms, stroke 400ms 900ms"
+            : null,
+        }}
+        className={[
+          "fill-none stroke-[3] [stroke-linecap:round] [stroke-linejoin:round]",
+          getStrokeColor(2),
+        ].join(" ")}
+        d="M6 12C10.966 12 14.69 6 14.69 6C14.69 6 18.414 12 23.379 12C28.345 12 33.31 6 33.31 6C33.31 6 38.276 12 42 12"
+      />
+      <path
+        style={{
+          transition: visible
+            ? "opacity 1200ms 600ms, stroke 400ms 600ms"
+            : null,
+        }}
+        className={[
+          "fill-none stroke-[3] [stroke-linecap:round] [stroke-linejoin:round]",
+          getStrokeColor(1),
+        ].join(" ")}
+        d="M6 27C10.966 27 14.69 21 14.69 21C14.69 21 18.414 27 23.379 27C28.345 27 33.31 21 33.31 21C33.31 21 38.276 27 42 27"
+      />
+      <path
+        style={{
+          transition: visible
+            ? "opacity 1200ms 300ms, stroke 400ms 300ms"
+            : null,
+        }}
+        className={[
+          "fill-none stroke-[3] [stroke-linecap:round] [stroke-linejoin:round]",
+          getStrokeColor(0),
+        ].join(" ")}
+        d="M6 42C10.966 42 14.69 36 14.69 36C14.69 36 18.414 42 23.379 42C28.345 42 33.31 36 33.31 36C33.31 36 38.276 42 42 42"
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/dashboard/indicators/IndiceUv.js b/frontend/src/components/dashboard/indicators/IndiceUv.js
@@ -1,10 +1,10 @@
 import React, { useContext, useCallback, useRef, useState } from "react";
 
 import useIndicators from "hooks/useIndicators";
-import Chart from "./indiceUv/Chart";
 import ModalContext from "utils/ModalContext";
 
-export default function IndiceAtmo(props) {
+const maxValue = 11;
+export default function IndiceUv(props) {
   const { data, isError, isLoading } = useIndicators(
     props.place.code,
     props.date
@@ -41,7 +41,7 @@ export default function IndiceAtmo(props) {
           onClick={() => setModal("indice_uv")}
         >
           <h2 className="m-0 basis-3/4 text-left text-base font-medium text-main">
-            Indice UV (de 1 à 11)
+            Indice UV (de 1 à {maxValue})
           </h2>
           <span
             aria-label="Plus d'informations sur l'indice ATMO"
@@ -195,3 +195,161 @@ export default function IndiceAtmo(props) {
     </article>
   );
 }
+
+function Chart({ value }) {
+  value = Math.min(value, maxValue);
+  return (
+    <svg
+      className="h-16 w-auto -rotate-90 overflow-visible"
+      aria-hidden={true}
+      viewBox="0 0 48 48"
+    >
+      <circle cx="24" cy="24" r="12" className="fill-main/10" />
+      <circle
+        className={[`stroke-indiceuv-${value}`, "stroke-[12]"].join(" ")}
+        style={{
+          strokeDashoffset: 2 * Math.PI * 6 * (1 - value / maxValue),
+          strokeDasharray: 2 * Math.PI * 6,
+          strokeWidth: 2 * 6,
+          transition: `stroke-dashoffset ${value > 0 ? 3 : 0}s ease-in-out`,
+        }}
+        cx="24"
+        cy="24"
+        r="6"
+        fill="none"
+      />
+      <path // 4
+        className={[
+          "stroke-[3] [stroke-linecap:round] [stroke-linejoin:round]",
+          value > 3
+            ? `stroke-indiceuv-${value} transition-all delay-[2000ms] duration-1000`
+            : "stroke-main/10",
+        ].join(" ")}
+        visible={value > 3}
+        data-value={value}
+        d="M15.6553 38.4141L13.0001 43.0529"
+      />
+      <path // 10
+        className={[
+          "stroke-[3] [stroke-linecap:round] [stroke-linejoin:round]",
+          value > 9
+            ? `stroke-indiceuv-${value} transition-all delay-[2000ms] duration-1000`
+            : "stroke-main/10",
+        ].join(" ")}
+        visible={value > 9}
+        data-value={value}
+        d="M35 4.94727L32.3448 9.58602"
+      />
+      <path // 5
+        className={[
+          "stroke-[3] [stroke-linecap:round] [stroke-linejoin:round]",
+          value > 4
+            ? `stroke-indiceuv-${value} transition-all delay-[2000ms] duration-1000`
+            : "stroke-main/10",
+        ].join(" ")}
+        visible={value > 4}
+        data-value={value}
+        d="M9.58691 32.3447L4.94815 34.9999"
+      />
+      <path // 11
+        className={[
+          "stroke-[3] [stroke-linecap:round] [stroke-linejoin:round]",
+          value > 10
+            ? `stroke-indiceuv-${value} transition-all delay-[2000ms] duration-1000`
+            : "stroke-main/10",
+        ].join(" ")}
+        visible={value > 10}
+        data-value={value}
+        d="M43.0527 13L38.414 15.6552"
+      />
+      <path // 0
+        className={[
+          "stroke-[3] [stroke-linecap:round] [stroke-linejoin:round]",
+          value > 0
+            ? `stroke-indiceuv-${value} transition-all delay-[2000ms] duration-1000`
+            : "stroke-main/10",
+        ].join(" ")}
+        visible={value > 0}
+        data-value={value}
+        d="M46 24L40.6896 24"
+      />
+      <path // 6
+        className={[
+          "stroke-[3] [stroke-linecap:round] [stroke-linejoin:round]",
+          value > 5
+            ? `stroke-indiceuv-${value} transition-all delay-[2000ms] duration-1000`
+            : "stroke-main/10",
+        ].join(" ")}
+        visible={value > 5}
+        data-value={value}
+        d="M7.31055 24H2.00019"
+      />
+      <path // 1
+        className={[
+          "stroke-[3] [stroke-linecap:round] [stroke-linejoin:round]",
+          value > 0
+            ? `stroke-indiceuv-${value} transition-all delay-[2000ms] duration-1000`
+            : "stroke-main/10",
+        ].join(" ")}
+        visible={value > 0}
+        data-value={value}
+        d="M43.0527 35L38.414 32.3448"
+      />
+      <path // 7
+        className={[
+          "stroke-[3] [stroke-linecap:round] [stroke-linejoin:round]",
+          value > 6
+            ? `stroke-indiceuv-${value} transition-all delay-[2000ms] duration-1000`
+            : "stroke-main/10",
+        ].join(" ")}
+        visible={value > 6}
+        data-value={value}
+        d="M9.58691 15.6548L4.94815 12.9996"
+      />
+      <path // 2
+        className={[
+          "stroke-[3] [stroke-linecap:round] [stroke-linejoin:round]",
+          value > 1
+            ? `stroke-indiceuv-${value} transition-all delay-[2000ms] duration-1000`
+            : "stroke-main/10",
+        ].join(" ")}
+        visible={value > 1}
+        data-value={value}
+        d="M35 43.0527L32.3448 38.414"
+      />
+      <path // 8
+        className={[
+          "stroke-[3] [stroke-linecap:round] [stroke-linejoin:round]",
+          value > 7
+            ? `stroke-indiceuv-${value} transition-all delay-[2000ms] duration-1000`
+            : "stroke-main/10",
+        ].join(" ")}
+        visible={value > 7}
+        data-value={value}
+        d="M15.6553 9.58594L13.0001 4.94717"
+      />
+      <path // 9
+        className={[
+          "stroke-[3] [stroke-linecap:round] [stroke-linejoin:round]",
+          value > 8
+            ? `stroke-indiceuv-${value} transition-all delay-[2000ms] duration-1000`
+            : "stroke-main/10",
+        ].join(" ")}
+        visible={value > 8}
+        data-value={value}
+        d="M24 7.31055L24 2.00019"
+      />
+      <path // 3
+        className={[
+          "stroke-[3] [stroke-linecap:round] [stroke-linejoin:round]",
+          value > 2
+            ? `stroke-indiceuv-${value} transition-all delay-[2000ms] duration-1000`
+            : "stroke-main/10",
+        ].join(" ")}
+        visible={value > 2}
+        data-value={value}
+        d="M24 46V40.6896"
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/dashboard/indicators/PotentielRadon.js b/frontend/src/components/dashboard/indicators/PotentielRadon.js
@@ -1,7 +1,6 @@
 import React, { useContext, useCallback, useRef, useState } from "react";
 
 import useIndicators from "hooks/useIndicators";
-import Chart from "./potentielRadon/Chart";
 import ModalContext from "utils/ModalContext";
 
 export default function IndiceAtmo(props) {
@@ -178,3 +177,53 @@ export default function IndiceAtmo(props) {
     </article>
   );
 }
+
+function Chart({ value, visible, onlyValue, className }) {
+  return (
+    <svg
+      aria-hidden={true}
+      className={className}
+      viewBox="0 0 110 110"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M108.474 51.4639L98.4736 41.4639L58.4736 1.46393C57.5359 0.526577 56.2644 0 54.9386 0C53.6127 0 52.3412 0.526577 51.4036 1.46393L11.4036 41.4639L1.40356 51.4639C0.492769 52.4069 -0.0112031 53.67 0.000189013 54.9809C0.0115811 56.2919 0.537425 57.546 1.46447 58.473C2.39151 59.4001 3.64557 59.9259 4.95655 59.9373C6.26754 59.9487 7.53055 59.4447 8.47356 58.5339L9.93856 57.0689V104.999C9.93856 106.325 10.4653 107.597 11.403 108.534C12.3407 109.472 13.6125 109.999 14.9386 109.999H94.9386C96.2646 109.999 97.5364 109.472 98.4741 108.534C99.4118 107.597 99.9386 106.325 99.9386 104.999V57.0689L101.404 58.5339C102.347 59.4447 103.61 59.9487 104.921 59.9373C106.232 59.9259 107.486 59.4001 108.413 58.473C109.34 57.546 109.866 56.2919 109.877 54.9809C109.888 53.67 109.384 52.4069 108.474 51.4639ZM89.9386 99.9989H19.9386V47.0689L54.9386 12.0689L89.9386 47.0689V99.9989Z"
+        className={onlyValue ? "fill-none" : `fill-radon-${value}`}
+      />
+      <rect
+        x="28.1299"
+        y="81.8076"
+        width="53.617"
+        height="10.2128"
+        rx="4"
+        style={{
+          transition: visible ? "opacity 1200ms 300ms, fill 400ms 300ms" : null,
+        }}
+        className={value > 0 ? `fill-radon-${value}` : "fill-main/10"}
+      />
+      <rect
+        x="28.1299"
+        y="63.9351"
+        width="53.617"
+        height="10.2128"
+        rx="4"
+        style={{
+          transition: visible ? "opacity 1200ms 600ms, fill 400ms 600ms" : null,
+        }}
+        className={value > 1 ? `fill-radon-${value}` : "fill-main/10"}
+      />
+      <rect
+        x="28.1299"
+        y="46.063"
+        width="53.617"
+        height="10.2128"
+        rx="4"
+        style={{
+          transition: visible ? "opacity 1200ms 900ms, fill 400ms 900ms" : null,
+        }}
+        className={value > 2 ? `fill-radon-${value}` : "fill-main/10"}
+      />
+    </svg>
+  );
+}