Code source wiki de Gestionnaire de modèles D3

Modifié par Aurelie Bertrand le 2025/02/07 10:13
Afficher les derniers auteurs
1 {{ddtoc/}}
2
3 (% style="text-align: justify;" %)
4 = Principe général =
5
6 (% style="text-align: justify;" %)
7 [[~[~[image:d3main.png~]~]>>https://d3js.org/||rel="noopener noreferrer" target="_blank"]]
8
9 {{info}}
10 [[Wikipedia>>https://fr.wikipedia.org/wiki/D3.js]] :
11
12 >D3.js (ou D3 pour Data-Driven Documents) est une bibliothèque graphique [[JavaScript>>url:https://fr.wikipedia.org/wiki/JavaScript]] qui permet l'affichage de données numériques sous une forme graphique et dynamique. Il s'agit d'un outil important pour la conformation aux normes [[W3C>>url:https://fr.wikipedia.org/wiki/W3C]] qui utilise les technologies courantes [[SVG>>url:https://fr.wikipedia.org/wiki/SVG]], [[JavaScript>>url:https://fr.wikipedia.org/wiki/JavaScript]] et [[CSS>>url:https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade]] pour la [[visualisation de données>>url:https://fr.wikipedia.org/wiki/Visualisation_de_donn%C3%A9es]]. Intégrée dans une page web [[HTML>>url:https://fr.wikipedia.org/wiki/HTML]], la bibliothèque JavaScript D3.js utilise des fonctions pré-construites de JavaScript pour sélectionner des éléments, créer des objets [[SVG>>url:https://fr.wikipedia.org/wiki/SVG]], les styliser, ou y ajouter des transitions, des effets dynamiques ou des [[infobulles>>url:https://fr.wikipedia.org/wiki/Infobulle]].
13 {{/info}}
14
15 (% style="text-align: justify;" %)
16 DigDash offre la possibilité de construire des modèles de visualisation basés sur d3.js.
17
18 (% style="text-align: justify;" %)
19 Cela permet aux utilisateurs qui le souhaitent d'enrichir leur bibliothèque de graphes, afin d'exploiter d'autres types de flux que ceux proposés par défaut.
20
21 (% style="text-align: justify;" %)
22 == Modèles (templates) D3 dans Digdash ==
23
24 (% style="text-align: justify;" %)
25 Dans DigDash, D3 correspond à un type de visualisation générique comportant un certain nombre de sous-modèles, à l'instar des visualisations de type jauge, barre d'énergie ou infographie.
26
27 (% style="text-align: justify;" %)
28 La différence avec les types précédemment cités réside dans le fait de pouvoir gérer ces modèles (création, édition, suppression).
29
30 (% style="text-align: justify;" %)
31 Chaque modèle est associé à un certains nombre de fichiers (essentiellement javascript et CSS) permettant d'une part de recevoir les données aplaties d'un modèle de rendu (via la //fonction de plugin//) puis d'autre part de construire la visualisation à partir de ces données.
32
33 (% style="text-align: justify;" %)
34 Ce principe peut être représenté par le schéma suivant :
35
36 (% style="text-align: justify;" %)
37 [[image:d3archi.PNG]]
38
39 (% style="text-align: justify;" %)
40 De droite à gauche :
41
42 * Chaque flux de type D3 est basé sur un modèle du type de visualisation principal D3.
43 * Chaque modèle est nommé et est associé à un certain nombre de fichiers qui doivent être présents sur le serveur de document D3templates
44
45 (% style="text-align: justify;" %)
46 Comme indiqué sur le schéma, un même fichier peut être exploité par plusieurs modèles à la fois (comme par exemple un fichier de version d3js). Il conviendra donc d'être prudent quant à la manipulation de ces fichiers de ressources, qui peut impacter plusieurs modèles et donc plusieurs flux.
47
48 (% style="text-align: justify;" %)
49 === Le dossier D3templates ===
50
51 (% style="text-align: justify;" %)
52 Le serveur de documents //D3templates //est le dossier suivant (situé dans votre répertoire d'installation de DigDash Entreprise) :
53
54 (% style="text-align: justify;" %)
55 **${DOSSIER DE CONFIGURATION DIGDASH}/Enterprise Server\${DOMAINE CONCERNE}\config\web\public\**
56
57 * Si le dossier //D3templates// n'existe pas, il vous faut l'importer : 
58 ** Rendez-vous dans le dossier "Add-on" à la racine du répertoire d'installation
59 ** Copier le dossier "D3templates"
60 ** Coller ce dossier dans ${DOSSIER DE CONFIGURATION DIGDASH}/Enterprise Server\${DOMAINE CONCERNE}\config\web\public\
61 * Vous disposez maintenant des fichiers de configuration des graphiques par défaut prédéfinis D3JS dans DigDash.
62
63 (% style="text-align: justify;" %)
64 === La fonction de plugin ===
65
66 (% style="text-align: justify;" %)
67 Chaque modèle doit être construit avec une fonction javascript spécifique : la fonction de plugin. C'est cette fonction qui permet de recevoir les données en entrée d'un flux DigDash afin de générer un graphe.
68
69 (% style="text-align: justify;" %)
70 Il n'y a pas de règles particulières quant à la dénomination de cette fonction mais il est conseillé de suivre la convention suivante : {NOM_MODELE}PluginDD
71
72 (% style="text-align: justify;" %)
73 Cette fonction doit impérativement se trouver dans un des fichiers javascript associé au modèle.
74
75 (% style="text-align: justify;" %)
76 La fonction de plugin prend en entrée trois paramètres :
77
78 * //ddjson// : l'objet contenant les informations du flux en cours d'édition (datamodel-sélection, n-uplets dimensionnels, mesures, palette de couleur) sous une forme exploitable par le développeur
79 * //ddobj// (déprécié) : un objet généré par la logique DigDash contenant la totalité des informations du flux en cours d'édition
80 * //exportCallback// : la fonction de callback a exécuter pour l'intégration du flux dans une fabrique de document / pour l'export
81
82 (% style="text-align: justify;" %)
83 **//Plus de détails dans la page de documentation [[Graphique D3>>doc:Digdash.user_guide.studio.Create_flow.Flow_types_and_configuration.Flow_type_miscellaneous.D3.WebHome]].//**
84
85 (% style="text-align: justify;" %)
86 = Gestionnaire de modèles D3 =
87
88 (% style="text-align: justify;" %)
89 Le gestionnaire est une interface en deux parties.
90
91 (% style="text-align: justify;" %)
92 À gauche, la liste des modèles D3.
93
94 (% style="text-align: justify;" %)
95 À droite, la configuration du modèle sélectionné, ainsi que la possibilité d'éditer le contenu des fichiers associés, fichiers qui seront chargés dans le DOM au rendu d'un flux.
96
97 (% style="text-align: justify;" %)
98 [[image:D3_manager_FR.png||alt="Gestionnaire D3"]]
99
100 (% style="text-align: justify;" %)
101 Un modèle peut être désigné comme modèle par défaut afin d'être automatiquement sélectionné à la création d'un flux de type D3.
102
103 (% style="text-align: justify;" %)
104 == Gestion des fichiers de ressources ==
105
106 (% style="text-align: justify;" %)
107 Il est possible de gérer les liens modèle-fichiers via le menu contextuel :
108
109 (% style="text-align: justify;" %)
110 [[image:D3_manager_add_file_FR.png||alt="Ajout fichier"]]
111
112 (% style="text-align: justify;" %)
113 Si le fichier existe dans le répertoire //D3templates//, il est possible de le sélectionner directement (//Choisir des fichiers existants sur le serveur...//) via l'interface de gestionnaire de documents.
114
115 (% style="text-align: justify;" %)
116 Sinon, il peut être importé, ou créé ex-nihilo, et ajouté à //D3templates//.
117
118 (% style="text-align: justify;" %)
119 Il est possible d'éditer directement le contenu d'un fichier dans l'éditeur de code.
120
121 (% style="text-align: justify;" %)
122 Une référence à un fichier peut être supprimée d'un modèle D3 (//Retirer du modèle//) : cela ne supprime pas le fichier en question qui reste présent dans le dossier //D3templates//. Le fichier ne sera plus chargé dans la page de rendu des flux utilisant ce modèle.
123
124 (% style="text-align: justify;" %)
125 De même, la suppression d'un modèle D3 ne supprime pas les fichiers associés dans //D3templates//.
126
127 (% style="text-align: justify;" %)
128 === Bien nommer ses fichiers ===
129
130 {{info}}
131 La gestion de sous-dossiers dans le répertoire //D3templates// n'étant provisoirement pas prise en charge, il est conseillé de nommer intelligemment les fichiers afin de s'y retrouver plus facilement.
132 {{/info}}
133
134 __Un fichier propre à un modèle devrait respecter la convention suivante__ :
135
136 **{nomDuModèle}_{rôleDuFichier}.{extension}**
137
138 Exemples : //textReport_plugin.js//, //circlePacking_style.css//
139
140 __Un fichier commun à plusieurs modèles devrait respecter la convention suivante__ :
141
142 **{nomDuGroupeCommun}_{rôleDuFichier}.{extension}**
143
144 Exemple : //common_tooltip.js//
145
146 Ainsi les fichiers d'un même modèle sont alphabétiquement regroupés.
147
148 (% style="text-align: justify;" %)
149 == Dupliquer un modèle existant ==
150
151 (% style="text-align: justify;" %)
152 Lors de la duplication d'un template D3, vous avez la possibilité de dupliquer des fichiers afin que leurs modifications n'impactent que le modèle nouvellement créé. C'est en général souhaité pour le fichier contenant la fonction de plugin ou les fichiers de construction graphique.
153
154 (% style="text-align: justify;" %)
155 La convention de nommage décrite précédemment reste fortement recommandée.
156
157 (% style="text-align: justify;" %)
158 [[image:D3_manager_duplicate_FR.png||alt="Dupliquer"]]
159
160 = Création de flux D3 dans DigDash =
161
162 La documentation pratique pour la mise en œuvre de modèles D3 pour la création de flux est détaillée à la page **//[[Graphique D3>>doc:Digdash.user_guide.studio.Create_flow.Flow_types_and_configuration.Flow_type_miscellaneous.D3.WebHome]].//**