feat: detector improvements

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,12 @@ 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
+    )
 } else {
   // @ts-expect-error: adding on purpose
   window.impactCO2Detection = start

detection/index.ts

@@ -1,12 +1,25 @@
+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
+  )
+  setTimeout(
+    () =>
+      start(
+        search.get('theme') === 'night',
+        search.get('language') as 'fr' | 'en',
+        search.get('category') as RandomCategory
+      ),
+    2000
+  )
 } else {
   start()
   setTimeout(start, 2000)

detection/start.ts

@@ -1,12 +1,13 @@
 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, darkMode?: boolean) => {
   if (forbiddenTag.includes(element.tagName) || element.getAttribute('impactCO2') === 'managed') {
     return
   }
@@ -25,14 +26,14 @@ 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, darkMode)
+    render(React.createElement(Detector, { impact: hasImpact[0], language, category }), 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, darkMode?: boolean) => {
   ;[...element.childNodes.values()]
     .filter((child) => child.nodeName === '#text')
     .forEach((child) => {
@@ -51,8 +52,8 @@ 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, darkMode)
+          render(React.createElement(Detector, { impact: hasImpact[0], language, category }), etiquette)
           child.replaceWith(before, etiquette, after)
         }
       }
@@ -91,7 +92,7 @@ export const initMatomo = () => {
   }
 }
 
-export const start = (darkMode?: boolean, language?: 'fr' | 'en') => {
+export const start = (darkMode?: boolean, language?: 'fr' | 'en', category?: RandomCategory) => {
   const elems = document.querySelectorAll('*')
 
   Array.from(elems)
@@ -128,12 +129,12 @@ export const start = (darkMode?: boolean, language?: 'fr' | 'en') => {
               child.nodeName === 'STRONG'
           )
         ) {
-          transform(elem, language || 'fr', darkMode)
+          transform(elem, language || 'fr', category || 'all', darkMode)
         } else {
           ;[...elem.children].forEach((child) => {
-            transform(child, language || 'fr', darkMode)
+            transform(child, language || 'fr', category || 'all', darkMode)
           })
-          transformText(elem, language || 'fr', darkMode)
+          transformText(elem, language || 'fr', category || 'all', 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 = [
@@ -133,29 +133,7 @@ export const smallTools = [
     description: 'L’outil pratique 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.png

@@ -1,28 +1,50 @@
-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: [],
+}
+
+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

@@ -9,13 +9,58 @@ import formatNumber from 'utils/formatNumber'
 import EquivalentIcon from 'components/base/EquivalentIcon'
 import LocalNumber from 'components/base/LocalNumber'
 import InfinityIcon from 'components/base/icons/infinity'
+import { RandomCategory } from 'components/comparateur/randomEtiquette'
 import styles from './SimpleValue.module.css'
 
-const equivalents = values as Record<string, SimpleEquivalent>
+const allEquivalents = values as Record<string, SimpleEquivalent>
+const transportEquivalents = [
+  'tgv-paris-berlin',
+  'tgv-paris-marseille',
+  'avion-pny',
+  'voiture-lille-nimes',
+  'terre-voiture',
+  'trainenfrancejour',
+  'voiturefrancaiseheure',
+  'voiturefrancaisejour',
+  'aviationcivileenfrance',
+  'voiturefrancaisean',
+]
+const voitureEquivalents = [
+  'voiturethermique',
+  'terre-voiture',
+  'voiturefrancaiseheure',
+  'voiturefrancaisejour',
+  'voiturefrancaisean',
+]
+const numeriqueEquivalents = [
+  'game-of-thrones',
+  'friends',
+  'harry-potter',
+  'datacenterjour',
+  'numeriqueenfrance',
+  'numeriqueenfrancejour',
+]
 
-export const getValues = (comparison: string, value: number) => {
+const equivalentCategories: Record<RandomCategory, Record<string, SimpleEquivalent>> = {
+  all: allEquivalents,
+  transport: Object.fromEntries(
+    Object.entries(allEquivalents).filter(
+      ([key, equivalent]) => transportEquivalents.includes(key) || equivalent.category === 4
+    )
+  ),
+  voiture: Object.fromEntries(Object.entries(allEquivalents).filter(([key]) => voitureEquivalents.includes(key))),
+  numerique: Object.fromEntries(
+    Object.entries(allEquivalents).filter(
+      ([key, equivalent]) =>
+        numeriqueEquivalents.includes(key) || equivalent.category === 1 || equivalent.category === 10
+    )
+  ),
+}
+
+export const getValues = (comparison: string, value: number, category?: RandomCategory) => {
   const [slug, carpool] = comparison.split('+')
-  if (comparison !== 'random' && equivalents[slug]) {
+  const equivalents = category ? equivalentCategories[category] : allEquivalents
+  if (comparison !== 'random' && allEquivalents[slug]) {
     const equivalent = equivalents[slug]
     return {
       equivalent: {
@@ -26,7 +71,12 @@ export const getValues = (comparison: string, value: number) => {
       slug,
     }
   }
-  const meaningfullEquivalents = Object.entries(equivalents).filter(([, ecv]) => value / ecv.value > 1 && ecv.value > 0)
+  const meaningfullEquivalents = Object.entries(equivalents).filter(
+    ([, ecv]) => value / ecv.value >= 1 && value / ecv.value <= 99_999 && ecv.value > 0
+  )
+  if (meaningfullEquivalents.length === 0) {
+    return null
+  }
   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)
@@ -39,22 +89,30 @@ const SimpleValue = ({
   comparison,
   language,
   id,
+  category,
 }: {
   value: number
   comparison: string
   language: Language
   id?: string
+  category?: RandomCategory
 }) => {
-  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, category)
   )
 
   useEffect(() => {
-    setValues(getValues(comparison, value))
-  }, [comparison, value])
+    setValues(getValues(comparison, value, category))
+  }, [comparison, value, category])
 
   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