Dans les stackbars, afficher un modal sous forme de tableau en cliquant sur une catégorie

davy39 commented 1 year ago

Le tableau affiché devrait lister chacune des dépenses (les plus petite children de la hierarchy avec date et libélé des dépenses). Exemple :

Date	Montant	Libellé	Fournisseur	Compte	Activité	Domaine
12/02/2023	30 000 €	Loyer du 1er trimestre	Silene	Loyer	Location	Fonctionnement

Cela peut se faire avec d3.js en s'inspirant de ce code (a tester en local dans un fichier html) :

<!DOCTYPE html>
<html>
<head>
  <title>D3 Hierarchy Table</title>
  <style>
    table {
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
    }
  </style>
</head>
<body>
  <div id="table-container"></div>

  <script src="https://d3js.org/d3.v6.min.js"></script>
  <script>
    // Données d'exemple
    const data = {
      name: "Racine",
      children: [
        {
          name: "Noeud 1",
          value: 10
        },
        {
          name: "Noeud 2",
          children: [
            {
              name: "Noeud 2.1",
              value: 5
            },
            {
              name: "Noeud 2.2",
              value: 8
            }
          ]
        },
        {
          name: "Noeud 3",
          value: 15
        },
        {
          name: "Noeud 4",
          children: [
            {
              name: "Noeud 4.1",
              value: 12
            },
            {
              name: "Noeud 4.2",
              value: 6
            }
          ]
        }
      ]
    };

    // Créer le tableau
    const container = d3.select("#table-container");
    const table = container.append("table");
    const tbody = table.append("tbody");

    // Convertir la hiérarchie en données de tableau
    const root = d3.hierarchy(data);
    const tableData = [];

    // Fonction auxiliaire pour obtenir la profondeur maximale de la hiérarchie
    function getMaxDepth(root) {
      let maxDepth = 0;
      root.each(node => {
        const depth = node.depth;
        if (depth > maxDepth) {
          maxDepth = depth;
        }
      });
      return maxDepth;
    }

    root.each(node => {
      // Si le nœud n'a pas d'enfants, on le considère comme une ligne de tableau
      if (!node.children) {
        const row = {};
        row.name = node.data.name;
        row.value = node.data.value;

        // Ajouter les noms des parents dans les colonnes respectives
        let current = node;
        let depth = 0;
        const parentNames = [];
        while (current.parent) {
          parentNames.unshift(current.parent.data.name);
          current = current.parent;
          depth++;
        }
        parentNames.forEach((parentName, index) => {
          row[`parentdepth${index}`] = parentName;
        });

        tableData.push(row);
      }
    });

    // Créer les lignes du tableau
    const rows = tbody.selectAll("tr")
      .data(tableData)
      .enter()
      .append("tr");

    // Créer les cellules du tableau
    rows.selectAll("td")
      .data(row => Object.values(row))
      .enter()
      .append("td")
      .text(d => d);

    // Ajouter les en-têtes de tableau
    const headers = table.append("thead").append("tr");
    const columnHeaders = Array.from(new Set(tableData.flatMap(Object.keys)));

    headers.selectAll("th")
      .data(columnHeaders)
      .enter()
      .append("th")
      .text(d => d);

  </script>
</body>
</html>

davy39 commented 1 year ago

Pour un affichage dynamique du tableau (tri des données, pagination...), on pourrait utiliser la librairie javascript datatables qui est adaptée pour un usage avec bulma.

davy39 commented 1 year ago

C'est fait ici 2f38c64

Lycee-Experimental / budget-lxp

Dans les stackbars, afficher un modal sous forme de tableau en cliquant sur une catégorie #13