elan-data-explorer.js v1.0.53
DataExplorer.js
Logiciel produit dans le cadre du projet ANR L'invention du théâtre antique dans le corpus des paratextes savants du XVIe s. Analyse, traduction, exploration numérique – IThAC
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
Mise à jour
npm update elan-data-explorer.js
(attention si la version est fixée dans le fichier package.json
du projet utilisant l'explorer, il faut le modifier avant)
Contribution au code
Penser à incrémenter la ligne "version": "1.0.xx"
dans le package.json
de ce projet quand le code change. Il faut aussi publier la nouvelle version avec la commande npm publish
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
. (laisser une chaine vide pour le 1er élément)
hierarchicalOptions: [
"",
"source_author",
"source_work"
]
- On définit les propriétés qui feront l'objet de filtres via le paramètre
filters
filters: [
"source_author",
"source_work",
"bibl_scope",
"fragment_id"
]
- On peut traduire les intitulés des propriétés et leurs valeurs via le paramètre
strings
strings: {
"inconnu": "Inconnu",
"source_author": "Auteur source",
"source_work": "Oeuvre source",
"source_genre": "Genre source",
"citing_author": "Auteur citant"
}
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
itemPropertiesDisplay
permet de choisir d'afficher les propriétés des éléments de façoninline
oublock
. Si la valeur estblock
, les titres des propriétés sont affichés.Le paramètre
itemPropertiesHideUndefined
permet de masquer les propriétés pour lesquelles la valeur estundefined
(true
orfalse
).Le paramètre
linkProperty
permet de spécifier quelle propriété sera utilisée pour afficher 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 (ASC
ouDESC
).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 paramètre
colors
permet de surcharger certaines couleurs.
colors: {
"--lvl1": "#f89623",
"--lvl2": "#d91e5f",
"--lvl3": "#683191",
},
- le paramètre
strOverride
permet de surcharger certaines chaines de caractères de l'interface
strOverride: {
addChoice: "Ajouter un choix",
default: "Commencez par ajouter autant de choix hiérarchiques...",
filters: "Filtres",
hierarchicalChoices: "Choix hiérarchiques",
loading: 'Récupération des données ...',
options: "Options",
reinit: "Réinitialiser",
copyURL: "Copier l'URL",
undefined: "Non renseigné",
items: "Items",
blocks: "Blocs",
blockSort: "Tri des blocs",
itemCount: "Nombre d'items"
}
Autre
- 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",
colors: {
"--lvl1":"#FC999B",
"--lvl2":"#A0B5C6",
"--lvl3":"#FCE09F",
"--lvl4":"#C4DCB1",
"--lvl5":"#F8B28C",
"--lvl6":"#95D5C1",
"--lvl7":"#FBC787"
},
}
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 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago