elan-data-explorer.js

v1.0.36

Published

6 days ago

Affichage hierarchisé de données, avec filtre et tri

Downloads

153

0High
0Medium
0Low

arnaudbey

vanilla data json

DataExplorer.js

Affichage dynamique et hierarchisé de données "plates", avec filtre et tri

Refonte complète du code de Maxime Bouton et Vincent Maillard (Protocole astral) qui tend maintenant à la généricité.

Screenshot .

Installation

npm install elan-data-explorer.js

Utilisation

Structure de données

Les données en entrée doivent être en JSON, sous cette forme

[
  {'id': 1, "property_1": "foo", "property_2": "oof 2", "property_3": "ofo"},
  {'id': 2, "property_1": "bar", "property_2": ["oof", "bra"], "property_3": "rab"},
  ...
]

Paramètres

Il faut fournir une URL d'API pour les récupérer (voir le paramètre apiUrl; /!\ CORS) ou passer les données en javascript (via le paramètre data)
On définit les propriétés qui seront utilisées pour l'affichage hiérarchique via le paramètre hierarchicalOptions
On définit les propriétés qui feront l'objet de filtres via le paramètre filters
On peut traduire les intitulés des propriétés via le paramètre strings
On peut surcharger les intitulés de certains éléments de l'interface via la paramètre strOverride
Le paramètre itemProperties spécifie quelles propriétés (et dans quel ordre) seront affichées sur les éléments terminaux.
Le paramètre linkProperty permet de spécifier quelle propriété sera utilisée pour affichier le lien vers la ressource.
Les paramètres sortLeavesProperty et sortLeavesDirection permettent de spécifier la clé de tri des éléments terminaux et la direction du tri.
Le paramètre leavesAttributes permet de définir les propriétés pour lesquelles les valeurs seront injectées sous forme de data-attribute au niveau des éléments terminaux.
le document HTML doit comporter un élément dont l'id est explorer-wrapper

Exemple d'utlisation

script.js

import { Explorer } from './node_modules/elan-data-explorer.js/index.js'
window.addEventListener("load", (event) => {
  const params = {
    data: [
      {'id': 1, "property_1": "foo", "property_2": "oof 2", "property_3": "ofo"},
      {'id': 2, "property_1": "bar", "property_2": ["oof", "bra"], "property_3": "rab"}
    ],
    apiUrl: null,
    itemBaseUrl: "https://domain.name/item/",
    filters: [
      "property_2", 
      "property_3"
    ],
    hierarchicalOptions: [
      "property_1", 
      "property_2"
    ],
    itemProperties: [
        "property_1", 
        "property_3",
        "id"
    ],
    strings: {
      "property_1": "Propriété 1", 
      "property_2": "Propriété 2", 
      "property_3": "Propriété 3"
    },
    linkProperty: "id"
  }
  const e = Object.create(Explorer)
  e.init(params)
});

index.html

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>Démo Explorer</title>
      <link href="node_modules/elan-data-explorer.js/style.css" rel="stylesheet">
  </head>
  <body>
      <div id="explorer-wrapper"></div>
      <script src="script.js" type="module"></script>
  </body>
</html>

Voir des exemples d'utilisation ici

Auteur

Arnaud Bey

Licence

GNU GENERAL PUBLIC LICENSE V3

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme