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é.
.
npm install elan-data-explorer.js
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"},
...
]-
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ètredata) -
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
itemPropertiesspécifie quelles propriétés (et dans quel ordre) seront affichées sur les éléments terminaux. -
Le paramètre
linkPropertypermet de spécifier quelle propriété sera utilisée pour affichier le lien vers la ressource. -
Les paramètres
sortLeavesPropertyetsortLeavesDirectionpermettent de spécifier la clé de tri des éléments terminaux et la direction du tri. -
Le paramètre
leavesAttributespermet 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
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)
});<!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
Arnaud Bey
GNU GENERAL PUBLIC LICENSE V3