Composants dashboard - HDF

Comment ça marche

⬇ Télécharger modele-dashboard.zip Contenu : blank_dashboard.html + template/ (css + js)

1. Téléchargez l'archive modele-dashboard.zip (bouton ci-dessus).
2. Créez un dossier pour votre reporting (ex : Mon rapport) et extrayez-y le contenu du zip. Vous devez obtenir, côte à côte, le fichier blank_dashboard.html et le dossier template : c'est ce dossier qui contient la mise en forme et le moteur des graphiques. Sans lui, la page s'affiche sans aucun style.
3. Renommez blank_dashboard.html (ex : mon_dashboard.html) - sans le déplacer, il doit rester à côté du dossier template.
4. Ouvrez-le dans un éditeur de texte (Notepad++ ou VSCode), et gardez-le aussi ouvert dans le navigateur (Ctrl+S puis F5 pour voir chaque modification).
5. Dans cette doc, trouvez le composant voulu, onglet Code HTML → Copier, puis collez le bloc dans une page (<section class="page">) de votre dashboard.
6. Si le composant a un onglet Code JS (c'est le cas des graphiques), copiez-le aussi et collez-le tout en bas du fichier, dans le bloc <script> placé après <!-- CODE JAVASCRIPT DES GRAPHIQUES --> et à l'intérieur de window.addEventListener("components-ready", () => { … }). Ne laissez jamais de <script> au milieu du HTML.
7. Modifiez les textes et les chiffres. Pour les graphiques, changez aussi l'id s'il y en a déjà un identique dans votre fichier - il doit rester identique dans le HTML et dans le JS (<div class="chart" id="…"> et graphiqueLignes("#…", …)).

Couleurs de la charte (référencées dans les blocs par leur nom) :

Bandeau tricolore

Le liseré aux couleurs du logo, à placer tout en haut de chaque page, juste après <section class="page">.

En-tête de page

Titre + sous-titre à gauche, badge de date à droite. À placer juste après le bandeau tricolore.

Pied de page

À placer en dernier dans chaque page, juste avant </section>. Pensez à mettre à jour le numéro p. X/Y à la main.

Badge

Pastille arrondie pour la date de situation (ou toute mention courte). S'utilise dans l'en-tête de page ou la page de couverture.

Tuiles KPI

Rangée de chiffres clés. Options : la classe de la grille fixe le nombre de colonnes (kpis c3, c4, c5 ou c6) ; la couleur du liseré gauche se choisit avec --kc:var(--serie-1) à --serie-4 (ou --brand-1) ; la ligne sub est facultative (complément d'info ou écart, voir composant suivant).

Écarts (delta)

Petit indicateur d'évolution, à placer dans la ligne sub d'une tuile KPI. 3 variantes : delta pos (vert, en hausse favorable), delta neg (rouge, défavorable), delta nul (gris, stable). Le sens dépend de l'indicateur : une baisse du « restant à instruire » est une bonne nouvelle → pos avec ▼.

Jauge

Barre de progression avec libellé et valeur. À modifier : le texte, les chiffres, et surtout width:79% = valeur ÷ total × 100. Couleur : --mc:var(--serie-1) à --serie-4 ou --brand-2.

Entonnoir

Parcours des dossiers, de l'étape la plus large à la plus étroite. À modifier : les libellés, les valeurs, et width = valeur ÷ plus grande valeur × 100. Couleurs : dans l'ordre --rampe-1 (clair) → --rampe-4 (foncé). Ajoutez/supprimez des fstage selon le nombre d'étapes.

Graphique en lignes

Pour les évolutions cumulées, avec une ou plusieurs séries. Ce composant a deux parties : le code HTML (le <div class="chart">, à placer dans la page) et le code JS (à placer en bas du fichier, voir l'onglet correspondant). À modifier uniquement dans le JS : etiquettes (une par point), et pour chaque série nom, couleur (1 = bleu, 2 = vert, 3 = rose, 4 = ambre) et valeurs (une par étiquette, null = pas de donnée). ⚠️ Si vous ajoutez plusieurs graphiques, donnez à chacun un id différent - et le même dans le HTML et dans le JS. La légende et les infobulles sont automatiques.

Graphique en colonnes

Pour les flux mensuels (une seule série). Comme tous les graphiques, il se colle en deux fois : le HTML dans la page, le JS en bas du fichier. À modifier dans le JS : etiquettes, nom, couleur (1 à 4) et valeurs. Mêmes règles que le graphique en lignes (id unique, null = pas de donnée).

Graphique empilé

Pour montrer la répartition d'un stock en catégories qui s'additionnent (le total s'affiche au sommet). HTML dans la page, JS en bas du fichier. À modifier dans le JS : etiquettes et les séries (nom, couleur, valeurs). L'ordre des séries = l'ordre d'empilement, de bas en haut.

Tableau de détail

Tableau mensuel classique. À modifier : les colonnes (un <th> dans l'en-tête + un <td> par ligne) et les lignes (<tr>). Première cellule = libellé, les autres = valeurs, – quand il n'y a pas de donnée. La dernière colonne est mise en valeur automatiquement (fond teinté, gras) et une ligne sur deux est grisée.

Titre de section & séparateur

Pour découper une page en deux sujets (ex : AJA en haut, DJA en bas). Le <small> est facultatif. Le séparateur divider marque la limite entre les deux moitiés.

Note de bas de section

Petite ligne grise pour un renvoi, une source ou un jalon, à placer sous un graphique ou une section.

Carte de synthèse

Carte de la page de couverture : grand chiffre, lignes d'indicateurs, jauge en bas. Couleur du liseré haut et du grand chiffre : --cc:var(--brand-1), --brand-2 ou --brand-3. Les cartes se placent dans une grille <div class="cards"> (2 colonnes). Ajoutez/supprimez des lignes r selon le besoin ; la jauge est facultative.

Carte note

Variante à fond teinté avec liste à puces, pour les faits marquants (« À retenir ») ou un lexique. Ajoutez/supprimez des <li> librement ; les <b> mettent les chiffres et sigles en valeur.

Page de synthèse

La page de couverture : grand titre + badge + 4 cartes (3 dispositifs + « À retenir »). C'est en général la première page du dashboard. L'aperçu est réduit ; en réel la page fait un A4 paysage.

Page standard

Le gabarit le plus courant : en-tête + rangée de KPI + 2 graphiques + tableau + pied de page. Dupliquez-la pour chaque dispositif. ⚠️ À chaque copie, changez les id des deux graphiques (dans les <div> du HTML ET dans le JS). L'aperçu ci-dessous est réduit ; en réel la page fait un A4 paysage.