dsfr-charts

[revolunet]

Il existe une lib de charts dédiée DSFR : https://github.com/GouvernementFR/dsfr-chart

C'est implémenté en VueJS avec des webcomponents;

Une idée de comment ca pourrait s'intégrer (ou pas) dans un projet react-dsfr ?

[revolunet]

Un essai ici, ça a l'air de bien fonctionner : https://stackblitz.com/edit/vitejs-vite-aqzu7b?file=src%2FApp.tsx

ils utilisent ca à un endroit, or il faut que le script "UMD" soit déjà exécuté

const getHexaFromName = function (colorName, options = undefined) {
  return window.dsfr.colors.getColor('artwork', 'major', colorName, options)
}

J'ai du faire un truc degueu, je sais pas si vous avez une meilleure idée

const MiseryWrapper = (props) => {
  const [ready, setReady] = useState(false);
  const check = () => {
    if ('dsfr' in window && window.dsfr.colors) {
      setReady(true);
    } else {
      setTimeout(check, 50);
    }
  };
  useEffect(() => {
    if (!ready) {
      check();
    }
  }, []);

  if (!ready) {
    return null;
  }

  return props.children;
};

[garronej]

Ah super! Merci du feedback!
Dsl de ne pas avoir rep je me suis dis que j'allais regarder mais je n'ai pas trouver le temps.

Mais si tu as un truck qui marche ça pourais être cool de faire une page dédier sur le site gitbook!

Qu'es que tu en pense?

[revolunet]

Yes je peux, stackblitz m'a delete mon travail mais je vais refaire 😡

[garronej]

Great thanks!

[revolunet]

Here is an example implementation https://github.com/betagouv/template/blob/main/src/components/DsFrChart.tsx

Any idea how to better handle umd ?

[K4ST0R]

I start to work on it. You can take a look there : https://github.com/K4ST0R/react-dsfr/tree/feat-chart

[revolunet]

released in v1.13.1 thanks to @K4ST0R