elan-data-explorer.js v1.0.35
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é.
.
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è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
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
etsortLeavesDirection
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
5 days ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago