feat: detector improvements (#802)

Author: desoindx

app/(iframes)/iframes/detecteur/page.tsx

@@ -0,0 +1,14 @@
+import TranslationProvider from 'src/providers/TranslationProvider'
+import DetecteurPage from 'src/views/DetecteurPage'
+import Exemples from 'components/outils/detecteur/Exemples'
+
+const page = () => {
+  return (
+    <TranslationProvider>
+      <Exemples />
+      <DetecteurPage />
+    </TranslationProvider>
+  )
+}
+
+export default page

detection/index-async.ts

@@ -1,3 +1,4 @@
+import { RandomCategory } from 'components/comparateur/randomEtiquette'
 import { initMatomo, start } from './start'
 
 initMatomo()
@@ -6,7 +7,13 @@ const element = document.getElementById('script-detecteur-impact-co2')
 if (element) {
   const search = new URLSearchParams(element.dataset.search || '')
   // @ts-expect-error: adding on purpose
-  window.impactCO2Detection = () => start(search.get('theme') === 'night', search.get('language') as 'fr' | 'en')
+  window.impactCO2Detection = () =>
+    start(
+      search.get('theme') === 'night',
+      search.get('language') as 'fr' | 'en',
+      search.get('category') as RandomCategory,
+      search.get('equivalents') as string
+    )
 } else {
   // @ts-expect-error: adding on purpose
   window.impactCO2Detection = start

detection/index.ts

@@ -1,12 +1,27 @@
+import { RandomCategory } from 'components/comparateur/randomEtiquette'
 import { initMatomo, start } from './start'
 
 initMatomo()
 
 const element = document.getElementById('script-detecteur-impact-co2')
 if (element) {
   const search = new URLSearchParams(element.dataset.search || '')
-  start(search.get('theme') === 'night', search.get('language') as 'fr' | 'en')
-  setTimeout(() => start(search.get('theme') === 'night', search.get('language') as 'fr' | 'en'), 2000)
+  start(
+    search.get('theme') === 'night',
+    search.get('language') as 'fr' | 'en',
+    search.get('category') as RandomCategory,
+    search.get('equivalents') as string
+  )
+  setTimeout(
+    () =>
+      start(
+        search.get('theme') === 'night',
+        search.get('language') as 'fr' | 'en',
+        search.get('category') as RandomCategory,
+        search.get('equivalents') as string
+      ),
+    2000
+  )
 } else {
   start()
   setTimeout(start, 2000)

detection/start.ts

@@ -1,12 +1,19 @@
 import React, { render } from 'preact/compat'
 import 'utils/variables.css'
+import { RandomCategory } from 'components/comparateur/randomEtiquette'
 import Detector, { regexs } from 'components/externalModules/detection/Detector'
 import './style.css'
 
 const className = 'impactCO2-container'
 const forbiddenTag = ['TITLE', 'HEAD', 'STYLE', 'SCRIPT', 'path', 'IMG', 'META', 'BUTTON', 'A']
 
-const transform = (element: Element, language: 'fr' | 'en', darkMode?: boolean) => {
+const transform = (
+  element: Element,
+  language: 'fr' | 'en',
+  category: RandomCategory,
+  equivalents?: string,
+  darkMode?: boolean
+) => {
   if (forbiddenTag.includes(element.tagName) || element.getAttribute('impactCO2') === 'managed') {
     return
   }
@@ -25,14 +32,23 @@ const transform = (element: Element, language: 'fr' | 'en', darkMode?: boolean)
     const after = document.createElement('DIV')
     after.className = className
     after.innerHTML = existingValues[1]
-    transform(after, language, darkMode)
-    render(React.createElement(Detector, { impact: hasImpact[0], language }), etiquette)
+    transform(after, language, category, equivalents, darkMode)
+    render(
+      React.createElement(Detector, { impact: hasImpact[0], language, category, customEquivalents: equivalents }),
+      etiquette
+    )
     element.setAttribute('impactCO2', 'managed')
     element.replaceChildren(before, etiquette, after)
   }
 }
 
-const transformText = (element: Element, language: 'fr' | 'en', darkMode?: boolean) => {
+const transformText = (
+  element: Element,
+  language: 'fr' | 'en',
+  category: RandomCategory,
+  equivalents?: string,
+  darkMode?: boolean
+) => {
   ;[...element.childNodes.values()]
     .filter((child) => child.nodeName === '#text')
     .forEach((child) => {
@@ -51,8 +67,11 @@ const transformText = (element: Element, language: 'fr' | 'en', darkMode?: boole
           const after = document.createElement('DIV')
           after.className = className
           after.innerHTML = existingValues[1]
-          transform(after, language, darkMode)
-          render(React.createElement(Detector, { impact: hasImpact[0], language }), etiquette)
+          transform(after, language, category, equivalents, darkMode)
+          render(
+            React.createElement(Detector, { impact: hasImpact[0], language, category, customEquivalents: equivalents }),
+            etiquette
+          )
           child.replaceWith(before, etiquette, after)
         }
       }
@@ -91,7 +110,7 @@ export const initMatomo = () => {
   }
 }
 
-export const start = (darkMode?: boolean, language?: 'fr' | 'en') => {
+export const start = (darkMode?: boolean, language?: 'fr' | 'en', category?: RandomCategory, equivalents?: string) => {
   const elems = document.querySelectorAll('*')
 
   Array.from(elems)
@@ -128,12 +147,12 @@ export const start = (darkMode?: boolean, language?: 'fr' | 'en') => {
               child.nodeName === 'STRONG'
           )
         ) {
-          transform(elem, language || 'fr', darkMode)
+          transform(elem, language || 'fr', category || 'all', equivalents, darkMode)
         } else {
           ;[...elem.children].forEach((child) => {
-            transform(child, language || 'fr', darkMode)
+            transform(child, language || 'fr', category || 'all', equivalents, darkMode)
           })
-          transformText(elem, language || 'fr', darkMode)
+          transformText(elem, language || 'fr', category || 'all', equivalents, darkMode)
         }
       } catch (e) {
         console.error('Impossible de générer les équivalents', e)

public/images/detecteur-co2.jpg

@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import DetectorInformation from 'components/outils/DetectorInformation'
 import DetectorScript from 'components/outils/DetectorScript'
 
 export const tools = [
@@ -130,32 +130,10 @@ export const smallTools = [
   {
     slug: 'detecteur',
     title: 'Détecteur CO₂',
-    description: 'L’outil pratique pour mettre en lumière vos données carbone.',
+    description: 'L’outil innovant pour mettre en lumière vos données carbone.',
     meta: 'Valoriser et mieux faire comprendre les données carbones grâce au détecteur CO2 qui communique les bons ordres de grandeur',
     linkLabel: 'Découvrir',
-    content: (
-      <>
-        <p>
-          Impact CO₂ lance le détecteur CO₂, un nouveau format innovant pour détecter et surligner automatiquement les
-          mentions de données carbones dans vos contenus.
-        </p>
-        <p>
-          Cet <b>outil gratuit</b>, simple d’utilisation et basé sur les données de l’ADEME a vocation à s’intégrer sur
-          les sites internet de médias, d’entreprises ou d’associations pour{' '}
-          <b>vulgariser les bons ordres de grandeur et remettre en perspective les données carbones.</b>
-        </p>
-        <p>Un exemple vaut mieux que mille mots ! Découvrez par vous-même 👇</p>
-        <p>
-          <b>
-            L’Info Durable est le premier média spécialisé en développement durable à avoir intégré l’outil sur son site
-            internet (plus de 45 000 articles en ligne !).
-          </b>
-        </p>
-        <div>
-          <Image src='/images/detecteur-co2.jpg' alt='' width={680} height={208} />
-        </div>
-      </>
-    ),
+    content: <DetectorInformation />,
     script: <DetectorScript />,
   },
 ]

public/images/detecteur-co2.webp

@@ -1,28 +1,51 @@
-const defaultEquivalents = [
-  { max: 1000, equivalents: [['tgv'], ['eaudurobinet'], ['pomme']] },
-  {
-    max: 50000,
-    equivalents: [
-      ['friends', 'game-of-thrones'],
-      ['tgv-paris-berlin', 'tgv-paris-marseille'],
-      ['repasvegetarien', 'repasvegetalien'],
-      ['tomate', 'abricot', 'avocat'],
-    ],
-  },
-  {
-    min: 50000,
-    max: 500000,
-    equivalents: [
-      ['repasavecduboeuf'],
-      ['voiture-lille-nimes', 'voiturethermique'],
-      ['smartphone', 'tabletteclassique'],
-    ],
-  },
-  { min: 500000, equivalents: [['avion-pny'], ['francais'], ['ordinateurfixeparticulier', 'ordinateurportable']] },
-]
+const defaultEquivalents = {
+  all: [
+    { max: 1_000, equivalents: [['tgv'], ['eaudurobinet'], ['pomme'], ['email']] },
+    {
+      max: 50_000,
+      equivalents: [
+        ['friends', 'game-of-thrones'],
+        ['tgv-paris-berlin', 'tgv-paris-marseille', 'voiturethermique'],
+        ['repasvegetarien', 'repasvegetalien'],
+        ['tomate', 'abricot', 'avocat'],
+      ],
+    },
+    {
+      min: 50000,
+      max: 500_000,
+      equivalents: [
+        ['repasavecduboeuf'],
+        ['voiture-lille-nimes', 'voiturethermique'],
+        ['smartphone', 'tabletteclassique'],
+      ],
+    },
+    {
+      min: 500_000,
+      max: 10_000_000,
+      equivalents: [['avion-pny'], ['francais'], ['ordinateurfixeparticulier', 'ordinateurportable']],
+    },
+  ],
+  transport: [],
+  voiture: [
+    {
+      min: 1_000,
+      max: 10_000_000,
+      equivalents: [['voiturethermique']],
+    },
+    {
+      min: 10_000_000,
+      max: 10_000_000_000,
+      equivalents: [['terre-voiture']],
+    },
+  ],
+  numerique: [],
+  custom: [],
+}
+
+export type RandomCategory = keyof typeof defaultEquivalents
 
-export const getRandomEquivalentForValue = (value: number) => {
-  const equivalents = defaultEquivalents.find(
+export const getRandomEquivalentForValue = (value: number, category?: RandomCategory) => {
+  const equivalents = defaultEquivalents[category || 'all'].find(
     (equivalent) => (!equivalent.min || equivalent.min < value) && (!equivalent.max || equivalent.max >= value)
   )
 

src/components/cards/tools.tsx

@@ -11,27 +11,44 @@ import LocalNumber from 'components/base/LocalNumber'
 import InfinityIcon from 'components/base/icons/infinity'
 import styles from './SimpleValue.module.css'
 
-const equivalents = values as Record<string, SimpleEquivalent>
+const allEquivalents = values as Record<string, SimpleEquivalent>
+
+export const getRandomEquivalent = (equivalents: [string, SimpleEquivalent][]) => {
+  if (equivalents.length === 0) {
+    return null
+  }
+
+  const categories = [...new Set(equivalents.map((equivalent) => equivalent[1].category))]
+  const randomCategory = categories[Math.floor(Math.random() * categories.length)]
+  const categoryEquivalents = equivalents.filter((equivalent) => equivalent[1].category === randomCategory)
+  const randomEquivalent = categoryEquivalents[Math.floor(Math.random() * categoryEquivalents.length)]
+  return { slug: randomEquivalent[0], equivalent: randomEquivalent[1] }
+}
+
+export const getValues = (comparison: string | null, value: number) => {
+  if (comparison === null) {
+    return null
+  }
 
-export const getValues = (comparison: string, value: number) => {
   const [slug, carpool] = comparison.split('+')
-  if (comparison !== 'random' && equivalents[slug]) {
-    const equivalent = equivalents[slug]
+  if (comparison !== 'random' && allEquivalents[slug]) {
+    const equivalent = allEquivalents[slug]
     return {
       equivalent: {
-        ...equivalents[slug],
+        ...allEquivalents[slug],
         carpool: carpool ? Number(carpool) : 0,
         value: carpool ? equivalent.value / (Number(carpool) + 1) : equivalent.value,
       },
       slug,
     }
   }
-  const meaningfullEquivalents = Object.entries(equivalents).filter(([, ecv]) => value / ecv.value > 1 && ecv.value > 0)
-  const categories = [...new Set(meaningfullEquivalents.map((equivalent) => equivalent[1].category))]
-  const randomCategory = categories[Math.floor(Math.random() * categories.length)]
-  const categoryEquivalents = meaningfullEquivalents.filter((equivalent) => equivalent[1].category === randomCategory)
-  const randomEquivalent = categoryEquivalents[Math.floor(Math.random() * categoryEquivalents.length)]
-  return { slug: randomEquivalent[0], equivalent: randomEquivalent[1] }
+  const meaningfullEquivalents = Object.entries(allEquivalents).filter(
+    ([, ecv]) => value / ecv.value >= 1 && value / ecv.value <= 99_999 && ecv.value > 0
+  )
+  if (meaningfullEquivalents.length === 0) {
+    return null
+  }
+  return getRandomEquivalent(meaningfullEquivalents)
 }
 
 const SimpleValue = ({
@@ -41,20 +58,26 @@ const SimpleValue = ({
   id,
 }: {
   value: number
-  comparison: string
+  comparison: string | null
   language: Language
   id?: string
 }) => {
-  const [values, setValues] = useState<{ equivalent: SimpleEquivalent; slug: string } | undefined>(
-    comparison === 'random' ? undefined : getValues(comparison, value)
+  const [values, setValues] = useState<{ equivalent: SimpleEquivalent; slug: string } | null>(
+    comparison === 'random' ? null : getValues(comparison, value)
   )
 
   useEffect(() => {
     setValues(getValues(comparison, value))
   }, [comparison, value])
 
   if (!values) {
-    return null
+    return (
+      <p className={classNames(styles.label, 'impactCO2-etiquette-text')}>
+        {language === 'en'
+          ? 'No equivalent available for this amount'
+          : 'Aucun équivalent disponible pour cette quantité'}
+      </p>
+    )
   }
 
   const comparisonValue = ((values.equivalent.percentage ? 100 : 1) * value) / values.equivalent.value