finish simulator

incubateur-ademe · Nov 13, 2024 · 84fd701 · 84fd701
1 parent 9533b0c
commit 84fd701
Show file tree

Hide file tree

Showing 32 changed files with 581 additions and 201 deletions.
diff --git a/next.config.js b/next.config.js
@@ -131,11 +131,6 @@ const nextConfig = {
         destination: '/outils/alimentation/:slug*',
         permanent: true,
       },
-      {
-        source: '/iframes/repas/:slug*',
-        destination: '/iframes/alimentation/:slug*',
-        permanent: true,
-      },
       {
         source: '/categories/:slug*',
         destination: '/:slug*',
@@ -170,7 +165,7 @@ const nextConfig = {
       { source: '/transport/:slug*', destination: '/outils/transport/:slug*', permanent: true },
       { source: '/fruitsetlegumes/:slug*', destination: '/outils/fruitsetlegumes/:slug*', permanent: true },
       { source: '/numerique/:slug*', destination: '/outils/numerique/:slug*', permanent: true },
-      { source: '/repas/:slug*', destination: '/outils/repas/:slug*', permanent: true },
+      { source: '/repas/:slug*', destination: '/outils/alimentation/:slug*', permanent: true },
       { source: '/habillement/:slug*', destination: '/outils/habillement/:slug*', permanent: true },
       { source: '/mobilier/:slug*', destination: '/outils/mobilier/:slug*', permanent: true },
       { source: '/electromenager/:slug*', destination: '/outils/electromenager/:slug*', permanent: true },

diff --git a/public/icons/repas.svg → public/icons/alimentation.svg b/public/icons/repas.svg → public/icons/alimentation.svg
diff --git a/src/components/base/EquivalentIcon.tsx b/src/components/base/EquivalentIcon.tsx
@@ -16,9 +16,7 @@ const EquivalentIcon = ({
 
   return (
     <img
-      src={buildCurrentUrlFor(
-        `/icons/${equivalent.carpool ? 'covoiturage' : ''}${slug.endsWith('alimentation') ? slug.replace('alimentation', '') : getComparisonSlug(slug)}.svg`
-      )}
+      src={buildCurrentUrlFor(`/icons/${equivalent.carpool ? 'covoiturage' : ''}${getComparisonSlug(slug)}.svg`)}
       width={(height || 1) * 16}
       height={(height || 1) * 16}
       alt={alt || ''}

diff --git a/src/components/cards/tools.tsx b/src/components/cards/tools.tsx
@@ -41,6 +41,7 @@ export const tools = [
   {
     slug: 'repas',
     title: 'Repas',
+    link: '/outils/alimentation#repas',
     description: 'Comparer l’empreinte carbone des différents types de repas',
     linkLabel: 'Découvrir',
   },

diff --git a/src/components/comparateur/overscreens/Category.tsx b/src/components/comparateur/overscreens/Category.tsx
@@ -37,6 +37,10 @@ const Category = ({
         .filter((equivalent) => equivalent.category === category.id)
         .filter((equivalent) => equivalent.slug !== comparedEquivalent?.slug)
         .filter((equivalent) => equivalent.value)
+        .filter(
+          (equivalent, index, values) =>
+            values.findIndex((computedEquivalent) => computedEquivalent.slug === equivalent.slug) === index
+        )
         .flatMap(getEquivalentWithCarpool)
         .sort((a, b) => getName('fr', a).localeCompare(getName('fr', b))),
     [category, comparedEquivalent]

diff --git a/src/components/comparateur/overscreens/EquivalentsOverscreen.tsx b/src/components/comparateur/overscreens/EquivalentsOverscreen.tsx
@@ -30,7 +30,6 @@ const EquivalentsOverscreen = () => {
 
   const [search, setSearch] = useState('')
   const results = useSearchEquivalent(search, true)
-
   const t = useTranslations('comparateur.overscreen')
   const tModal = useTranslations('modal')
   return (

diff --git a/src/components/outils/AlimentationSimulator.tsx b/src/components/outils/AlimentationSimulator.tsx
@@ -45,15 +45,18 @@ const AlimentationSimulator = () => {
             <CategorySimulator
               equivalents={equivalentsByCategory[category][0]?.equivalents || []}
               tracking='Alimentation'
+              reverse
             />
           </div>
         ) : (
-          values.map((value) => (
+          values.map((value, index) => (
             <AlimentationSubCategory
               equivalents={value.equivalents}
+              logos={value.logos}
               name={value.name}
               key={value.name}
               proportion={value.mean / values[0].mean}
+              barInfo={index === 0 ? t('biggest') : index === values.length - 1 ? t('smallest') : undefined}
             />
           ))
         )}

diff --git a/src/components/outils/CategoryPage.tsx b/src/components/outils/CategoryPage.tsx
@@ -16,7 +16,14 @@ const CategoryPage = ({
 }: {
   category: CategoryType
   simulator?: ReactNode
-  extraSimulator?: { slug: string; tracking: string; title: string; description: string; simulator: ReactNode }
+  extraSimulator?: {
+    slug: string
+    tracking: string
+    title: string
+    description: string
+    simulator: ReactNode
+    small?: boolean
+  }
 }) => {
   return (
     <>
@@ -33,7 +40,7 @@ const CategoryPage = ({
       </Block>
       {extraSimulator && (
         <Block id={extraSimulator.slug} title={extraSimulator.title} description={extraSimulator.description}>
-          <ExtraSimulator tracking={extraSimulator.tracking} slug={extraSimulator.slug}>
+          <ExtraSimulator tracking={extraSimulator.tracking} slug={extraSimulator.slug} small={extraSimulator.small}>
             {extraSimulator.simulator}
           </ExtraSimulator>
         </Block>

diff --git a/src/components/outils/CategorySimulator.tsx b/src/components/outils/CategorySimulator.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import { useTranslations } from 'next-intl'
 import Image from 'next/image'
@@ -33,6 +35,7 @@ const CategorySimulator = ({
   moreText,
   withSimulator,
   type,
+  reverse,
 }: {
   tracking: string
   equivalents: ComputedEquivalent[]
@@ -41,6 +44,7 @@ const CategorySimulator = ({
   moreText?: string
   withSimulator?: boolean
   type?: TransportSimulateur
+  reverse?: boolean
 }) => {
   const params = useParamContext()
   const t = useTranslations('category-simulator')
@@ -80,7 +84,7 @@ const CategorySimulator = ({
       <ul ref={ref} id='category-equivalents-list'>
         {equivalents &&
           equivalents
-            .sort((a, b) => getValue(a, initialParams, type) - getValue(b, initialParams, type))
+            .sort((a, b) => (getValue(a, initialParams, type) - getValue(b, initialParams, type)) * (reverse ? -1 : 1))
             .map((equivalent, index) => {
               const usagePercent = (100 * formatUsage(equivalent)) / equivalent.value
               const barExplanation = `usage : ${usagePercent.toFixed(0)}% et construction : ${(100 - usagePercent).toFixed(0)}%`

diff --git a/src/components/outils/ExtraSimulator.tsx b/src/components/outils/ExtraSimulator.tsx
@@ -1,18 +1,33 @@
 import React, { ReactNode, useMemo } from 'react'
 import Shareable from 'components/shareable/Shareable'
-import { overScreenExtraSimulatorValues } from 'components/shareable/overScreens/Values'
+import { overScreenCategoryValues, overScreenOsezChangerValues } from 'components/shareable/overScreens/Values'
 import styles from './ExtraSimulator.module.css'
 
-const ExtraSimulator = ({ children, tracking, slug }: { children: ReactNode; tracking: string; slug: string }) => {
-  const overScreens = useMemo(() => overScreenExtraSimulatorValues(slug), [slug])
+const ExtraSimulator = ({
+  children,
+  tracking,
+  slug,
+  small,
+}: {
+  children: ReactNode
+  tracking: string
+  slug: string
+  small?: boolean
+}) => {
+  const overScreens = useMemo(
+    () =>
+      slug === 'osez-changer'
+        ? overScreenOsezChangerValues()
+        : overScreenCategoryValues({ id: 2, unit: slug, slug, name: tracking }),
+    [slug, tracking]
+  )
 
-  return (
-    <div className={styles.container}>
-      <Shareable slug={slug} tracking={tracking} overScreens={overScreens} small>
-        {children}
-      </Shareable>
-    </div>
+  const simulator = (
+    <Shareable slug={slug} tracking={tracking} overScreens={overScreens} small={small}>
+      {children}
+    </Shareable>
   )
+  return small ? <div className={styles.container}>{simulator}</div> : simulator
 }
 
 export default ExtraSimulator
diff --git a/src/components/outils/alimentation/AlimentationSubCategory.module.css b/src/components/outils/alimentation/AlimentationSubCategory.module.css
@@ -15,7 +15,7 @@
   font-weight: 700;
   line-height: 1.75rem;
   display: flex;
-  gap: 1.5rem;
+  gap: 0.75rem 1.5rem;
   align-items: center;
 
   &:hover {
@@ -38,11 +38,20 @@
     border-radius: calc(1rem - 2px) calc(1rem - 2px) 0 0;
     border-bottom: 2px solid var(--primary-30);
   }
+
+  @media screen and (max-width: 29.875rem) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }
 
 .info {
   flex: 1;
   text-align: left;
+  position: relative;
+  @media screen and (max-width: 29.875rem) {
+    width: 100%;
+  }
 }
 
 .displayedBar,
@@ -62,6 +71,20 @@
   background: var(--primary-20);
 }
 
+.barText {
+  color: var(--primary-60);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  padding: 0 0.5rem;
+  position: absolute;
+  left: 50%;
+  bottom: 0.25rem;
+  transform: translateX(-50%) translateY(50%);
+  background-color: var(--neutral-00);
+  width: max-content;
+}
+
 .hide {
   display: flex;
   align-items: center;
@@ -77,13 +100,21 @@
     width: 1rem;
     height: 1rem;
   }
+  @media screen and (max-width: 29.875rem) {
+    width: 100%;
+    justify-content: center;
+  }
 }
 
 .icons {
   display: flex;
   justify-content: flex-end;
   gap: 0.25rem;
   width: 11rem;
+
+  @media screen and (max-width: 29.875rem) {
+    justify-content: flex-start;
+  }
 }
 
 .icon {

diff --git a/src/components/outils/alimentation/AlimentationSubCategory.tsx b/src/components/outils/alimentation/AlimentationSubCategory.tsx
@@ -12,10 +12,14 @@ const AlimentationSubCategory = ({
   name,
   equivalents,
   proportion,
+  barInfo,
+  logos,
 }: {
   name: string
+  logos?: number[]
   equivalents: ComputedEquivalent[]
   proportion: number
+  barInfo?: string
 }) => {
   const { language } = useParamContext()
   const t = useTranslations('alimentation')
@@ -35,26 +39,32 @@ const AlimentationSubCategory = ({
             style={{ width: `${proportion * 100}%` }}
             aria-label={t('impact', { value: proportion * 100 })}
           />
+          {barInfo && <div className={styles.barText}>{barInfo}</div>}
         </div>
         {display ? (
           <p className={styles.hide}>
             {t('hide')} <DropdownArrowUpIcon />
           </p>
         ) : (
-          <div className={styles.icons}>
-            <div className={styles.icon}>
-              <EquivalentIcon equivalent={equivalents[0]} height={2} alt={getName(language, equivalents[0])} />
+          logos && (
+            <div className={styles.icons}>
+              {logos.map((logo) => (
+                <div className={styles.icon} key={logo}>
+                  <EquivalentIcon
+                    equivalent={equivalents[logo]}
+                    height={2}
+                    alt={getName(language, equivalents[logo])}
+                  />
+                </div>
+              ))}
+              <div className={styles.icon}>{t('more', { count: equivalents.length - logos.length })}</div>
             </div>
-            <div className={styles.icon}>
-              <EquivalentIcon equivalent={equivalents[1]} height={2} alt={getName(language, equivalents[1])} />
-            </div>
-            <div className={styles.icon}>{t('more', { count: equivalents.length - 2 })}</div>
-          </div>
+          )
         )}
       </button>
       {display && (
         <div id={`alimentation-category-${name}`} className={styles.categories}>
-          <CategorySimulator tracking='Alimentation' equivalents={equivalents} withSimulator />
+          <CategorySimulator tracking='Alimentation' equivalents={equivalents} withSimulator reverse />
         </div>
       )}
     </div>

diff --git a/src/components/outils/equivalents/simulators/EquivalentHeader.tsx b/src/components/outils/equivalents/simulators/EquivalentHeader.tsx
@@ -35,7 +35,7 @@ const EquivalentHeader = ({ category, equivalent }: { category: Category; equiva
         <p className={styles.hypothesis}>
           <span className={styles.hypothesisTitle}>{t('hypotheses')}</span>
           {equivalent.carpool && <span>{getCarpool(language, equivalent.carpool)}</span>}
-          {'months' in equivalent && <span>{getMonthsLabel(equivalent.months, language)}</span>}
+          {'months' in equivalent && <span>{getMonthsLabel(equivalent.months, language)} </span>}
           {hasPre && <span>{pre}</span>}
           {hasPost && <span>{post}</span>}
         </p>

diff --git a/src/components/outils/simulators.tsx b/src/components/outils/simulators.tsx
@@ -1,10 +1,13 @@
 import { ReactNode } from 'react'
 import { LivraisonProvider } from 'src/providers/LivraisonProvider'
 import { UsageNumeriqueProvider } from 'src/providers/UsageNumeriqueProvider'
+import { computedEquivalents } from 'data/categories/computedEquivalents'
+import { repas } from 'data/categories/repas'
 import ChauffageSimulator from 'components/outils/ChauffageSimulator'
 import FruitsEtLegumesSimulator from 'components/outils/FruitsEtLegumesSimulator'
 import TransportSimulator from 'components/outils/TransportSimulator'
 import AlimentationSimulator from './AlimentationSimulator'
+import CategorySimulator from './CategorySimulator'
 import LivraisonSimulator from './LivraisonSimulator'
 import TeletravailSimulator from './TeletravailSimulator'
 import OsezChangerSimulator from './osezChanger/OsezChangerSimulator'
@@ -30,13 +33,21 @@ export const simulators: Record<string, ReactNode> = {
 
 export const extraSimulators: Record<
   string,
-  { slug: string; tracking: string; title: string; description: string; simulator: ReactNode }
+  { slug: string; tracking: string; title: string; description: string; simulator: ReactNode; small?: boolean }
 > = {
   habillement: {
     slug: 'osez-changer',
     tracking: 'OsezChanger',
     title: 'Défi chaussures',
     description: 'Sensibiliser à l’impact de l’achat de chaussures neuves',
     simulator: <OsezChangerSimulator />,
+    small: true,
+  },
+  alimentation: {
+    slug: 'repas',
+    tracking: 'Repas',
+    title: 'Repas',
+    description: "Comparer l'empreinte carbone de différents types de repas",
+    simulator: <CategorySimulator tracking='Repas' equivalents={computedEquivalents('alimentation', repas)} />,
   },
 }
diff --git a/src/components/shareable/Shareable.module.css b/src/components/shareable/Shareable.module.css
@@ -174,6 +174,11 @@
   }
 }
 
+.withoutBorder {
+  border: none;
+  padding-top: 0.75rem;
+}
+
 .bottomLanguage,
 .language {
   position: relative;
@@ -206,4 +211,4 @@
   padding: 0.75rem 1.5rem;
   border-top: 2px solid var(--primary-30);
   color: var(--neutral-50);
-}
+}
diff --git a/src/components/shareable/Shareable.tsx b/src/components/shareable/Shareable.tsx
@@ -156,7 +156,10 @@ const Shareable = ({
         {secondary === undefined && (
           <>
             {overScreens && ('hypothesis' in overScreens || 'data' in overScreens) ? (
-              <div className={classNames('no-screenshot', styles.ressources)}>
+              <div
+                className={classNames('no-screenshot', styles.ressources, {
+                  [styles.withoutBorder]: overScreens.hypothesis?.noBorder,
+                })}>
                 {'data' in overScreens && (
                   <Feature
                     slug={slug}