diff --git a/frontend/src/components/dashboard/header/EpisodePollution.js b/frontend/src/components/dashboard/header/EpisodePollution.js index 9df8288a3..ed165fa43 100644 --- 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 ? ( - - - Un épisode de pollution est prévu{" "} - {props.date ? "demain" : "aujourd’hui"} - - - - ) : null; + if (!data?.episodes_pollution?.advice) return null; + + return ( +
+

+ ⚠️ Avertissement +

+

+ Un épisode de pollution est prévu {date ? "demain" : "aujourd’hui"} +

+ +
+ ); } diff --git a/frontend/src/components/dashboard/indicators/Baignades.js b/frontend/src/components/dashboard/indicators/Baignades.js index c44c76bc2..d57818203 100644 --- 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) { ); } + +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 ( + + + + + + ); +} diff --git a/frontend/src/components/dashboard/indicators/IndiceUv.js b/frontend/src/components/dashboard/indicators/IndiceUv.js index aed080f7d..a8a0de59f 100644 --- 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")} >

- Indice UV (de 1 à 11) + Indice UV (de 1 à {maxValue})

); } + +function Chart({ value }) { + value = Math.min(value, maxValue); + return ( + + + 0 ? 3 : 0}s ease-in-out`, + }} + cx="24" + cy="24" + r="6" + fill="none" + /> + 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" + /> + 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" + /> + 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" + /> + 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" + /> + 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" + /> + 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" + /> + 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" + /> + 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" + /> + 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" + /> + 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" + /> + 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" + /> + 2 + ? `stroke-indiceuv-${value} transition-all delay-[2000ms] duration-1000` + : "stroke-main/10", + ].join(" ")} + visible={value > 2} + data-value={value} + d="M24 46V40.6896" + /> + + ); +} diff --git a/frontend/src/components/dashboard/indicators/PotentielRadon.js b/frontend/src/components/dashboard/indicators/PotentielRadon.js index ae4db6c37..c40488cb3 100644 --- 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) { ); } + +function Chart({ value, visible, onlyValue, className }) { + return ( + + + 0 ? `fill-radon-${value}` : "fill-main/10"} + /> + 1 ? `fill-radon-${value}` : "fill-main/10"} + /> + 2 ? `fill-radon-${value}` : "fill-main/10"} + /> + + ); +} diff --git a/frontend/src/components/dashboard/indicators/Raep.js b/frontend/src/components/dashboard/indicators/Raep.js index d68db605b..d0c6b7612 100644 --- a/frontend/src/components/dashboard/indicators/Raep.js +++ b/frontend/src/components/dashboard/indicators/Raep.js @@ -7,7 +7,6 @@ import React, { } from "react"; import useIndicators from "hooks/useIndicators"; -import Chart from "./raep/Chart"; import ModalContext from "utils/ModalContext"; export default function Raep(props) { @@ -251,3 +250,53 @@ const labels = { urticacees: "Urticacées", armoises: "Armoises", }; + +function Chart({ value, visible }) { + return ( + + 0 ? `fill-raep-${value}` : "fill-main/10"} + index={0} + cx="23" + cy="98" + r="13" + /> + 1 ? `fill-raep-${value}` : "fill-main/10"} + index={1} + cx="50" + cy="78" + r="12" + /> + 2 ? `fill-raep-${value}` : "fill-main/10"} + index={2} + cx="16.5" + cy="59.5" + r="16.5" + /> + 3 ? `fill-raep-${value}` : "fill-main/10"} + index={3} + cx="60.5" + cy="45.5" + r="16.5" + /> + 4 ? `fill-raep-${value}` : "fill-main/10"} + cx="25" + cy="19" + r="19" + /> + + ); +} diff --git a/frontend/src/components/dashboard/indicators/VigilanceMeteo.js b/frontend/src/components/dashboard/indicators/VigilanceMeteo.js index ce8013f93..106cd4bed 100644 --- a/frontend/src/components/dashboard/indicators/VigilanceMeteo.js +++ b/frontend/src/components/dashboard/indicators/VigilanceMeteo.js @@ -1,7 +1,6 @@ import React, { useContext, useCallback, useRef, useState } from "react"; import useIndicators from "hooks/useIndicators"; -import Chart from "./vigilanceMeteo/Chart"; import ModalContext from "utils/ModalContext"; export default function IndiceAtmo(props) { @@ -193,101 +192,53 @@ export default function IndiceAtmo(props) { ); } -// import React from "react"; - -// import MagicLink from "components/base/MagicLink"; -// import Card from "components/misc/Card"; -// import useIndicators from "hooks/useIndicators"; -// import Chart from "./vigilanceMeteo/Chart"; -// import Details from "./vigilanceMeteo/Details"; - -// export default function VigilanceMeteo(props) { -// const { data, isError, isLoading } = useIndicators( -// props.place.code, -// props.date -// ); - -// return ( -// -// -// -// -// -// Vigilance météo -// -// -// {isError -// ? "Arf 🦖" -// : data && -// (data.vigilance_meteo.indice?.label -// ? data.vigilance_meteo.indice.label -// : "Pas de données")} -// -// -// -// -// -// -//
-// -// Nous ne sommes malheureusement pas en mesure d'afficher la vigilance météo pour l'instant. Veuillez réessayer dans quelques instants.

` -// : data && -// (data.vigilance_meteo.error -// ? `

Les données ne sont pas disponibles pour cette commune.

` -// : data.vigilance_meteo.advice && -// data.vigilance_meteo.advice.main), -// }} -// /> -// -// -// -// -// -// {data && -// data.vigilance_meteo && -// data.vigilance_meteo.validity && -// data.vigilance_meteo.sources && ( -// -//

-// Prévision{" "} -// {data.vigilance_meteo.validity.start ? ( -// <> -// du{" "} -// {new Date( -// data.vigilance_meteo.validity.start -// ).toLocaleDateString("fr", { -// year: "numeric", -// month: "long", -// day: "numeric", -// hour: "2-digit", -// })}{" "} -// au{" "} -// {new Date( -// data.vigilance_meteo.validity.end -// ).toLocaleDateString("fr", { -// year: "numeric", -// month: "long", -// day: "numeric", -// hour: "2-digit", -// })}{" "} -// dans -// -// ) : ( -// <> dans -// )}{" "} -// {data.vigilance_meteo.validity.area} -//

-//

-// Données fournies par{" "} -// -// {data.vigilance_meteo.sources[0].label} -// -//

-// -// )} -// -// ); -// } +function Chart({ visible, value }) { + return ( + + 0 ? "stroke-white" : "stroke-vigilancemeteo-0", + value > 2 ? "fill-disabled" : `fill-vigilancemeteo-${value}`, + ].join(" ")} + strokeWidth="5" + /> + 0 ? "stroke-white" : "stroke-vigilancemeteo-0", + value > 1 ? "fill-disabled" : `fill-vigilancemeteo-${value}`, + ].join(" ")} + strokeWidth="5" + /> + 0 ? "stroke-white" : "stroke-vigilancemeteo-0", + value > 0 ? "fill-disabled" : `fill-vigilancemeteo-${value}`, + ].join(" ")} + strokeWidth="5" + /> + + ); +} diff --git a/frontend/src/components/dashboard/indicators/baignades/Chart.js b/frontend/src/components/dashboard/indicators/baignades/Chart.js deleted file mode 100644 index 809d4d165..000000000 --- a/frontend/src/components/dashboard/indicators/baignades/Chart.js +++ /dev/null @@ -1,59 +0,0 @@ -import React, { useCallback } from "react"; - -export default 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 ( - - - - - - ); -} diff --git a/frontend/src/components/dashboard/indicators/baignades/Details.js b/frontend/src/components/dashboard/indicators/baignades/Details.js deleted file mode 100644 index efb912769..000000000 --- a/frontend/src/components/dashboard/indicators/baignades/Details.js +++ /dev/null @@ -1,57 +0,0 @@ -import React, { useEffect, useState } from "react"; -import styled from "styled-components"; - -import Button from "components/base/Button"; -import Element from "./details/Element"; - -const Wrapper = styled.div` - display: flex; - justify-content: space-between; - flex-direction: column; -`; -export default function Details(props) { - const offSeason = props.data?.baignades?.indice?.label === "Hors-saison"; - const allDetails = props.data?.baignades?.indice?.details; - const threshold = 5; - const [details, setDetails] = useState(null); - const [loadAll, setLoadAll] = useState(false); - const [hasMore, setHasMore] = useState(false); - const handleLoadAll = () => { - setLoadAll(true); - }; - useEffect(() => { - if (loadAll && hasMore) { - setDetails(allDetails); - setLoadAll(false); - } - }, [loadAll, hasMore]); //eslint-disable-line - useEffect(() => { - if (details) { - const hasMore = details.length < allDetails.length; - setHasMore(hasMore); - } - }, [details]); //eslint-disable-line - useEffect(() => { - allDetails && setDetails([...allDetails.slice(0, threshold)]); - }, [allDetails]); //eslint-disable-line - - return details ? ( - - {details.map((element) => ( - - ))} - {hasMore && ( - - - - )} - - ) : null; -} diff --git a/frontend/src/components/dashboard/indicators/baignades/details/Element.js b/frontend/src/components/dashboard/indicators/baignades/details/Element.js deleted file mode 100644 index eb700cec7..000000000 --- a/frontend/src/components/dashboard/indicators/baignades/details/Element.js +++ /dev/null @@ -1,178 +0,0 @@ -import MagicLink from "components/base/MagicLink"; -import React from "react"; -import styled from "styled-components"; -import Bon from "./images/Bon.png"; -import Excellent from "./images/Excellent.png"; -import Insuffisant from "./images/Insuffisant.png"; -import InterdictionImage from "./images/Interdiction.png"; -import Suffisant from "./images/Suffisant.png"; - -const ranking_images = { - Excellent: Excellent, - Bon: Bon, - Suffisant: Suffisant, - Insuffisant: Insuffisant, -}; - -const Wrapper = styled.div` - margin-bottom: 2rem; - &:last-child { - margin-bottom: 0; - } -`; -const Title = styled.h3` - font-weight: normal; - line-height: 0.75; - margin-bottom: 1rem; - color: ${(props) => props.theme.colors.text}; - font-size: inherit; -`; -const StyledMagicLink = styled(MagicLink)` - text-decoration: none; - &:hover { - text-decoration: underline; - } -`; -const Interdiction = styled.div` - position: relative; - margin-top: 0.5rem; - padding-left: 3.5rem; - line-height: 3rem; - color: ${(props) => props.theme.colors.error}; - - &:before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 3rem; - height: 3rem; - background: ${(props) => "url(" + InterdictionImage + ")"}; - background-repeat: no-repeat; - background-size: 100% auto; - background-position: center; - } - - > div { - display: inline-block; - vertical-align: middle; - line-height: 1.25rem; - } -`; -const Sample = styled.div` - position: relative; - padding-left: 3.5rem; - transition: color 300ms ease-out; - line-height: 1.5rem; - - &:before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 3rem; - height: 1.5rem; - background-color: ${(props) => props.theme.colors.main}; - opacity: ${(props) => 0.15}; - border-radius: 0.25rem; - } - - &:after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: ${(props) => - props.value >= 0 ? ((props.value + 1) / 3) * 3 : 0}rem; - height: 1.5rem; - background-color: ${(props) => - props.value >= 0 - ? props.theme.colors.baignades[props.value] - : props.theme.colors.main}; - border-radius: ${(props) => - props.value < 2 ? "0.25rem 0 0 0.25rem" : "0.25rem"}; - } -`; -const Date = styled.span` - font-weight: lighter; -`; -const Ranking = styled.div` - position: relative; - margin-top: 0.5rem; - padding-left: 3.5rem; - line-height: 3rem; - - &:before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 3rem; - height: 3rem; - background: ${(props) => "url(" + ranking_images[props.label] + ")"}; - background-repeat: no-repeat; - background-size: 100% auto; - background-position: center; - } -`; -const Year = styled.span` - font-weight: lighter; -`; - -export default function Element(props) { - const value = ["Bon résultat", "Résultat moyen", "Mauvais résultat"].indexOf( - props?.sample?.label - ); - return props?.label ? ( - - - {props?.url ? ( - <StyledMagicLink to={props.url}>{props.label}</StyledMagicLink> - ) : ( - props.label - )} - - {props?.sample && ( - - {props.sample.label - ? `${props.sample.label}` - : "Pas de résultats de prélèvements"} - {props.sample.date && ( - <> -  (prélèvement du {props.sample.date}) - - )} - - )} - {["Excellent", "Bon", "Suffisant", "Insuffisant"].includes( - props?.ranking?.label - ) && ( - - {props.ranking.label} - {props.ranking.year && ( - <> -  (classement de {props.ranking.year}) - - )} - - )} - {props?.interdiction && ( - -
- Interdiction{" "} - {props.interdiction.type ? `${props.interdiction.type}` : ""} de - baignade - {props.interdiction.reason && ( - <> pour raison {props.interdiction.reason} - )} - {props.interdiction.date && ( - <> -  ({props.interdiction.date}) - - )} -
- - )} - - ) : null; -} diff --git a/frontend/src/components/dashboard/indicators/baignades/details/images/Bon.png b/frontend/src/components/dashboard/indicators/baignades/details/images/Bon.png deleted file mode 100644 index b4e9bb76e..000000000 Binary files a/frontend/src/components/dashboard/indicators/baignades/details/images/Bon.png and /dev/null differ diff --git a/frontend/src/components/dashboard/indicators/baignades/details/images/Excellent.png b/frontend/src/components/dashboard/indicators/baignades/details/images/Excellent.png deleted file mode 100644 index 94f823255..000000000 Binary files a/frontend/src/components/dashboard/indicators/baignades/details/images/Excellent.png and /dev/null differ diff --git a/frontend/src/components/dashboard/indicators/baignades/details/images/Insuffisant.png b/frontend/src/components/dashboard/indicators/baignades/details/images/Insuffisant.png deleted file mode 100644 index e3254d78a..000000000 Binary files a/frontend/src/components/dashboard/indicators/baignades/details/images/Insuffisant.png and /dev/null differ diff --git a/frontend/src/components/dashboard/indicators/baignades/details/images/Interdiction.png b/frontend/src/components/dashboard/indicators/baignades/details/images/Interdiction.png deleted file mode 100644 index 5ee2384ca..000000000 Binary files a/frontend/src/components/dashboard/indicators/baignades/details/images/Interdiction.png and /dev/null differ diff --git a/frontend/src/components/dashboard/indicators/baignades/details/images/Suffisant.png b/frontend/src/components/dashboard/indicators/baignades/details/images/Suffisant.png deleted file mode 100644 index 1cdb99d10..000000000 Binary files a/frontend/src/components/dashboard/indicators/baignades/details/images/Suffisant.png and /dev/null differ diff --git a/frontend/src/components/dashboard/indicators/indiceAtmo/Details.js b/frontend/src/components/dashboard/indicators/indiceAtmo/Details.js deleted file mode 100644 index f375c2fe2..000000000 --- a/frontend/src/components/dashboard/indicators/indiceAtmo/Details.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import styled from "styled-components"; - -import Element from "./details/Element"; - -const Wrapper = styled.ul` - display: flex; - justify-content: space-between; - margin: 0; - padding: 0; - font-size: inherit; - - ${(props) => props.theme.mq.small} { - flex-direction: column; - align-items: center; - } - - li { - list-style: none; - } -`; -export default function Details(props) { - if (!props.data?.indice_atmo?.indice?.details) return null; - return ( - - {props.data.indice_atmo.indice.details.map((element) => ( -
  • - -
    • - ))} -     - ); -} diff --git a/frontend/src/components/dashboard/indicators/indiceUv/Chart.js b/frontend/src/components/dashboard/indicators/indiceUv/Chart.js deleted file mode 100644 index 30bafb79b..000000000 --- a/frontend/src/components/dashboard/indicators/indiceUv/Chart.js +++ /dev/null @@ -1,160 +0,0 @@ -import React from "react"; - -const maxValue = 11; -export default function Chart({ value }) { - value = Math.min(value, maxValue); - return ( - - - 0 ? 3 : 0}s ease-in-out`, - }} - cx="24" - cy="24" - r="6" - fill="none" - /> - 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" - /> - 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" - /> - 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" - /> - 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" - /> - 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" - /> - 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" - /> - 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" - /> - 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" - /> - 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" - /> - 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" - /> - 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" - /> - 2 - ? `stroke-indiceuv-${value} transition-all delay-[2000ms] duration-1000` - : "stroke-main/10", - ].join(" ")} - visible={value > 2} - data-value={value} - d="M24 46V40.6896" - /> - - ); -} diff --git a/frontend/src/components/dashboard/indicators/potentielRadon/Chart.js b/frontend/src/components/dashboard/indicators/potentielRadon/Chart.js deleted file mode 100644 index 7ff16693d..000000000 --- a/frontend/src/components/dashboard/indicators/potentielRadon/Chart.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from "react"; - -export default function Chart({ value, visible, onlyValue, className }) { - return ( - - - 0 ? `fill-radon-${value}` : "fill-main/10"} - /> - 1 ? `fill-radon-${value}` : "fill-main/10"} - /> - 2 ? `fill-radon-${value}` : "fill-main/10"} - /> - - ); -} diff --git a/frontend/src/components/dashboard/indicators/raep/Chart.js b/frontend/src/components/dashboard/indicators/raep/Chart.js deleted file mode 100644 index ba663a2f5..000000000 --- a/frontend/src/components/dashboard/indicators/raep/Chart.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from "react"; - -export default function Chart({ value, visible }) { - return ( - - 0 ? `fill-raep-${value}` : "fill-main/10"} - index={0} - cx="23" - cy="98" - r="13" - /> - 1 ? `fill-raep-${value}` : "fill-main/10"} - index={1} - cx="50" - cy="78" - r="12" - /> - 2 ? `fill-raep-${value}` : "fill-main/10"} - index={2} - cx="16.5" - cy="59.5" - r="16.5" - /> - 3 ? `fill-raep-${value}` : "fill-main/10"} - index={3} - cx="60.5" - cy="45.5" - r="16.5" - /> - 4 ? `fill-raep-${value}` : "fill-main/10"} - cx="25" - cy="19" - r="19" - /> - - ); -} diff --git a/frontend/src/components/dashboard/indicators/raep/Details.js b/frontend/src/components/dashboard/indicators/raep/Details.js deleted file mode 100644 index a36695ff2..000000000 --- a/frontend/src/components/dashboard/indicators/raep/Details.js +++ /dev/null @@ -1,43 +0,0 @@ -import React from "react"; -import styled from "styled-components"; - -import Element from "./details/Element"; - -const Wrapper = styled.div` - display: flex; - justify-content: center; - overflow: hidden; -`; -const Elements = styled.ul` - margin: 0; - padding: 0; - font-size: inherit; - - li { - list-style: none; - - &:last-child > * { - margin-bottom: 0; - } - } -`; -export default function Details(props) { - return props.data ? ( - - - {props.data.raep.indice.details - .filter((allergen) => allergen.indice.value) - .sort((a, b) => (a.indice.value > b.indice.value ? 1 : -1)) - .map((allergen, index) => ( -
  • - -
    • - ))} -     -     - ) : null; -} diff --git a/frontend/src/components/dashboard/indicators/raep/details/Element.js b/frontend/src/components/dashboard/indicators/raep/details/Element.js deleted file mode 100644 index 872c2596c..000000000 --- a/frontend/src/components/dashboard/indicators/raep/details/Element.js +++ /dev/null @@ -1,97 +0,0 @@ -import React, { useContext } from "react"; -import styled from "styled-components"; - -import ModalContext from "utils/ModalContext"; - -const Wrapper = styled.div` - position: relative; - margin-bottom: 1.5rem; - padding-right: 13.25rem; - line-height: 1.5; - text-align: right; - - ${(props) => props.theme.mq.small} { - margin-bottom: 1rem; - padding-right: 7rem; - } - - &:before { - content: ""; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 12.5rem; - height: 1.125rem; - background-color: ${(props) => props.theme.colors.main}; - border-radius: 0.5rem; - opacity: 0.15; - - ${(props) => props.theme.mq.small} { - width: 6rem; - } - } - &:after { - content: ""; - position: absolute; - top: 50%; - right: ${(props) => 12.5 - (props.value / 5) * 12.5}rem; - transform: translateY(-50%) scaleX(1); - transform-origin: left; - width: ${(props) => (props.value / 5) * 12.5}rem; - height: 1.125rem; - background-color: ${(props) => props.theme.colors.raep[props.value]}; - border-radius: ${(props) => - props.value < 5 ? "0.5rem 0 0 0.5rem" : "0.5rem"}; - transition: transform ${(props) => 150 * props.value}ms - ${(props) => props.index * 100}ms ease-out; - - ${(props) => props.theme.mq.small} { - right: ${(props) => 6 - (props.value / 5) * 6}rem; - width: ${(props) => (props.value / 5) * 6}rem; - } - } - &:hover { - color: ${(props) => props.theme.colors.main}; - } -`; -const Superscript = styled.sup` - font-size: 0.625rem; - color: ${(props) => props.theme.colors.main}; -`; -const labels = { - ambroisies: "Ambroisies", - cypres: "Cupressacées", - noisetier: "Noisetier", - aulne: "Aulne", - peuplier: "Peuplier", - saule: "Saule", - frene: "Frêne", - charme: "Charme", - bouleau: "Bouleau", - platane: "Platane", - chene: "Chêne", - olivier: "Olivier", - tilleul: "Tilleul", - chataignier: "Châtaignier", - rumex: "Rumex", - graminees: "Graminées", - plantain: "Plantain", - urticacees: "Urticacées", - armoises: "Armoises", -}; -export default function Element(props) { - const { setModal } = useContext(ModalContext); - - return ( - setModal(props.label)} - > - {labels[props.label]} - (?) - - ); -} diff --git a/frontend/src/components/dashboard/indicators/vigilanceMeteo/Chart.js b/frontend/src/components/dashboard/indicators/vigilanceMeteo/Chart.js index a61de36bb..01dea7e52 100644 --- a/frontend/src/components/dashboard/indicators/vigilanceMeteo/Chart.js +++ b/frontend/src/components/dashboard/indicators/vigilanceMeteo/Chart.js @@ -1,20 +1,5 @@ import React from "react"; -import styled from "styled-components"; -const Path = styled.path` - fill: ${(props) => - props.visible && props.index < props["data-value"] - ? props.theme.colors.vigilancemeteo[props["data-value"]] - : props.theme.colors.disabled}; - transition: opacity ${(props) => (props.visible ? 1200 : 0)}ms - ${(props) => (props.visible ? props.index * 300 + 300 : 0)}ms, - fill ${(props) => (props.visible ? 400 : 0)}ms - ${(props) => (props.visible ? props.index * 300 + 300 : 0)}ms; - - ${(props) => props.theme.mq.medium} { - transition: none; - } -`; export default function Chart({ visible, value }) { return ( - 0 ? "stroke-white" : "stroke-vigilancemeteo-0", + value > 2 ? "fill-disabled" : `fill-vigilancemeteo-${value}`, ].join(" ")} strokeWidth="5" /> - 0 ? "stroke-white" : "stroke-vigilancemeteo-0", + value > 1 ? "fill-disabled" : `fill-vigilancemeteo-${value}`, ].join(" ")} strokeWidth="5" /> - 0 ? "stroke-white" : "stroke-vigilancemeteo-0", + value > 0 ? "fill-disabled" : `fill-vigilancemeteo-${value}`, ].join(" ")} strokeWidth="5" /> diff --git a/frontend/src/components/misc/card/Mobile.js b/frontend/src/components/misc/card/Mobile.js deleted file mode 100644 index 3702d5e3e..000000000 --- a/frontend/src/components/misc/card/Mobile.js +++ /dev/null @@ -1,62 +0,0 @@ -import React, { useState } from "react"; -import AnimateHeight from "react-animate-height"; -import styled from "styled-components"; - -import useWindowSize from "hooks/useWindowSize"; -import Subscribe from "./Subscribe"; - -const Wrapper = styled.div` - display: flex; - justify-content: space-between; - text-align: center; -`; -const ButtonMore = styled.button` - display: flex; - justify-content: center; - align-items: center; - width: 2rem; - height: 2rem; - background-color: ${(props) => props.theme.colors.background}; - border: 0.125rem solid ${(props) => props.theme.colors.main}; - border-radius: 0.5rem; - padding: 0; - svg { - width: 1rem; - height: 1rem; - } - path { - fill: ${(props) => props.theme.colors.main}; - } -`; -export default function Recommandation(props) { - const [open, setOpen] = useState(false); - - const { width } = useWindowSize(); - return width > 640 ? ( - props.children - ) : ( - <> - - {props.children} - - - - setOpen((prevOpen) => !prevOpen)} noExpand> - {open ? ( - - - - ) : ( - - - - )} - - - - ); -} diff --git a/frontend/src/components/misc/card/Subscribe.js b/frontend/src/components/misc/card/Subscribe.js deleted file mode 100644 index 9918ec6bb..000000000 --- a/frontend/src/components/misc/card/Subscribe.js +++ /dev/null @@ -1,55 +0,0 @@ -import React, { useContext } from "react"; -import styled from "styled-components"; - -import { useLocalUser } from "hooks/useUser"; -import ModalContext from "utils/ModalContext"; - -const Wrapper = styled.button` - padding: 0; - color: ${(props) => props.theme.colors.main}; - text-decoration: underline; - background: transparent; - border: none; - opacity: ${(props) => (props.static ? 0.6 : 1)}; - cursor: ${(props) => (props.static ? "default" : "pointer")}; -`; -const Superscript = styled.sup` - display: inline-block; - margin-left: 0.2rem; - font-size: 0.625rem; - color: ${(props) => props.theme.colors.main}; - cursor: pointer; -`; -export default function Subscribe(props) { - const { setSubscription, setModal } = useContext(ModalContext); - const { mutateUser } = useLocalUser(); - - return ( - { - if (props.disabled) { - if (props.indicateur.includes("baignades")) { - setModal("donneesrestreintes"); - } else { - setModal("donneesstatiques"); - } - } else { - mutateUser({ indicateurs: [props.indicateur], commune: props.place }); - setSubscription("indicators"); - } - window?._paq?.push([ - "trackEvent", - "Subscription", - "Indicateur", - props.indicateur, - ]); - }} - static={props.disabled} - > - {props.disabled - ? `Pas d'abonnement disponible` - : `M'abonner à cet indicateur`} - {props.disabled && (?)} - - ); -} diff --git a/frontend/src/components/misc/card/Title.js b/frontend/src/components/misc/card/Title.js deleted file mode 100644 index 3a79fe875..000000000 --- a/frontend/src/components/misc/card/Title.js +++ /dev/null @@ -1,25 +0,0 @@ -import React, { useContext } from "react"; - -import ModalContext from "utils/ModalContext"; - -export default function Title({ indicateur, isLoading, children }) { - const { setModal } = useContext(ModalContext); - return ( -

    setModal(indicateur)} - onKeyDown={(e) => { - if (e.key === "Enter") { - e.currentTarget.click(); - } - }} - > - {children} - (?) -

    - ); -}