Ajout d'un template d3.js (versions antérieures à 2022R2)

Last modified by Aurelie Bertrand on 2023/04/12 17:26

Section valable pour les versions antérieures à 2022R2

Cas d'étude :

Récupération des données

  • Avant toute chose, il convient de choisir la représentation graphique s'appuyant sur la librairie D3.JS que vous souhaitez importer dans DigDash.

Le site Internet https://d3js.org/ propose diverses représentations importables dans DigDash.

  • De plus, afin d'accélerer votre développement, nous vous conseillons d'essayer de réaliser un premier graphique de manière locale dans un fichier HTML incorporant la librairie D3 et appelant un fichier JSON contenant un jeu de données similaires à celui que vous appellerez dans DigDash. Cela vous permettra, lors de l'insertion du template dans DigDash de connaître ce template et de savoir les données qui sont attendues au bon endroit. 
  • Une fois le graphique sélectionné, la page correspondante contient les données nécessaires à l’import dans DigDash(JS, CSS, JSON).

Ajout des templates D3 prédéfinis dans DigDash

  • Vérifier le contenu du dossier suivant (situé dans votre répertoire d'installation de DigDash Entreprise) : ${DOSSIER DE CONFIGURATION DIGDASH}/Enterprise Server\${DOMAINE CONCERNE}\config\web\public\
  • Si ce dossier ne contient pas un dossier D3templates, il vous faut l'importer : 
    • Rendez-vous dans le dossier "Add-on" à la racine du répertoire d'installation
    • Copier le dossier "D3templates"
    • Coller ce dossier dans ${DOSSIER DE CONFIGURATION DIGDASH}/Enterprise Server\${DOMAINE CONCERNE}\config\web\public\
  • Vous disposez maintenant des fichiers de configuration de 3 graphiques par défaut prédéfinis D3JS dans DigDash : 
    • Bar
    • Arc
    • Sankey

Architecture des templates D3 dans DigDash

  • Chaque template D3 dans DigDash respecte l'architecture suivante : 
    • un fichier js-d3Plugins-{NOM_GRAPHIQUE}DD.js 
      • ce fichier comporte la logique faisant appel à la librairie D3JS pour créer un graphe à partir des données fournies
    • un fichier {NOM_GRAPHIQUE}.css
      • ce fichier comporte les styles s'appliquant au graphique
    • un fichier main_{NOM_GRAPHIQUE}.json
      • ce fichier comporte les données à insérer en guise de test

js-d3Plugins-{NOM_GRAPHIQUE}DD.js

  1. Ouvrir un fichier de référence, de même type dans le répertoire afin d’y copier des éléments qui seront en commun (exemple js-d3Plugins-ArcDD.js) afin d’en copier une partie de code.
  2. Coller les éléments dans votre nouveau fichier, puis remplacer le nom de la fonction arcPluginDD par {NOM_GRAPHIQUE}PluginDD.
  3. Coller le code Javascript fourni pour votre nouveau graphique à l’intérieur de la fonction.
  4. Mettre en commentaire la définition de la variable svg.
  5. Dans le fichier de référence (exemple js-d3Plugins-ArcDD.js), récupérer les lignes d’affectation de la variable svg contenant “#D3DD”, puis coller les lignes en dessous du commentaire.
  6. Commenter l’appel à la fonction json sur l’objet d3 avec “//” en début de ligne. Bien penser à mettre en commentaire l’accolade de fermeture de cette fonction.

La fonction {NOM_GRAPHIQUE}PluginDD

Cette fonction prend en entrée deux objets automatiquement alimentés par la logique DD : ddjson & ddobj

Ces deux objets contiennent les données envoyées par DigDash pour la construction du graphe. 

ddjson

L'objet "ddjson" passé en premier paramètre de la fonction est l'objet qui contient les données du fichier JSON stocké en dur (le cas échéant). 

ddobj

L'objet "ddobj" passé en second paramètre de fonction est l'object contenant les données générées par la logique DD. 

C'est dans cet objet que l'on retrouvera toutes les dimensions et mesures configurées dans le studio. 

Manipuler ddobj

Il est ainsi possible de construire un graphique D3JS à l'aide de cet objet "ddobj". 

Les valeurs des mesures se trouvent dans ddobj.values.values. 

Les valeurs des dimensions se trouvent dans ddobj.values.axis.

Ces deux variables sont des tableaux. 

L'algorithme ci-dessous explicite la manière de récupérer des mesures et de les associer aux dimensions, pour ensuite construire le graphe : 

-- vérification des tableaux des mesures

-- DEBUT parcours du tableau des mesures
-- -- split de chaque membre sur '-'

-- -- récupération de l'index de mesure
-- -- récupération de l'index de dimension "bar"
-- -- récupération de l'index de dimension "groupement"

-- -- vérification de l'index de mesure
-- -- affectation d'un objet en conséquence

-- FIN parcours

-- construction du graphe à l'aide de D3.JS

La sous-page permet de consulter un exemple d'implémentation de cet algorithme pour construire un social graph. 

{NOM_GRAPHIQUE}.css

  • Coller le code CSS fourni pour votre nouveau graphique à l’intérieur du fichier {NOM_GRAPHIQUE}.css

main_{NOM_GRAPHIQUE}.json

  • Coller le code JSON (jeu de données) fourni pour votre nouveau graphique à l’intérieur du fichier main_{NOM_GRAPHIQUE}.json

Ajout du template dans le Studio

Pour lier le template créé au Studio : 

  1. Accéder au menu supérieur et choisir “Gestionnaire de modèle D3”

    https://lh4.googleusercontent.com/Eilwmglj9uRuNLn_Ncuj0VBF6XxBZVmOEnmf9C6DdOq2QaeMPHSuWJP0oU2JsmYa2z_KB6lxds4BWbGMWTBJymMHpJ-6fu6urVYYVk25DL4X_ZAXfyeZW5q4MKC7wlfKuui6HsaxAv4
  2. Les modèles déja chargées dans DigDash apparaissent alors. 

    https://lh6.googleusercontent.com/RDGuDwG0BBlc0Adz7mlt7QvpntcQpSnWvRAATUKB9CI0Dge4q_3lfJMYlR6vkU-C5b4-tTSL8Tpmgf-YLjSak3aC18qWVZwNoMnAlQ893Hx7oXgDBSRFCAgJKe03waXpVZKpUzr1pYc
  3. Ajouter un nouveau modèle https://lh5.googleusercontent.com/y8jFowuI6cKkTZoZPfmdNuDuhL1llkXwBgVrF9LQZE5gzSJftWrrC5DlyQi0DxRwiML-HTMgFsMwmezN4vgaWKa1p51-Hx92DYldalKPax1pSrdFoHENL-QbN6iy3ku0dahx7rVgGvY
    • Le nom du modèle est le nom utilisé pour l'affichage dans le sélecteur de modèle dans DigDash
    • Le nom du plugin est le nom correspondant à la fonction dans js-d3Plugins-{NOM_GRAPHIQUE}DD.js
  4. Ajouter ensuite les fichiers du modèle
    • Choisir le serveur D3 Templates

      https://lh5.googleusercontent.com/mRXhNvgXmoFEOmK4kxVWF2PqTqxd6kaivCXydAQOH7QtjN2blx7uDvxygTNuVI2j0PKC0ohKFHubKRTEFz6CsRnbcnl0OCzH3Fq576l35f7jpVh5X2Yvpg7pYpy4htKaJGN3veY_K7o
  5. Choisir les fichiers nécessaires à votre templatehttps://lh5.googleusercontent.com/XAdxycdnGcQGnzoj5L32dANkSreNBeOSGZWAItf207pg1596eWQ6r_KznCuIz1lAn0760yP6EQ3xBsTsJnT4j_bkO9pj2fdbm0XYE6jTnwiNsGDzMmJImFL-uyYpWh9JQyPa-dy7i-4
    • le plugin javascript (.js)
    • le fichier CSS
    • le fichier JSON (si besoin)
    • le fichier contenant la librairie D3.jsLa librairie D3.js est proposée dans sa version 3 dans le fichier “js-d3Version.js”. 
      Il est possible d’ajouter la version souhaitée en l’incorporant au dossier D3Templates puis en l’ajoutant au modèle. 
  6. Valider en cliquant sur OK.
  7. Le nouveau modèle D3.js apparaît dans la liste des modèles 

    https://lh5.googleusercontent.com/UDg_ZMsktWXR5Y2sJ6zDrH3pgyYL5mOz5uSjEBrIn7q6K0oKgd-c_MNGzNSl4faRdXjavAYjZIGxtR12wp1XJjqE2548rwk1RsuzEtMjQmpX0VpE-VfPuNGZQyuasDNaRiTcehfwJbs

Test du graphique D3 dans le Studio

  1. Redémarrer le serveur ainsi que DigDash Enterprise Studio (si modification du XML)
  2. Créer un graphique D3.

    https://lh4.googleusercontent.com/4yfqHBpM0I92pyMKy-5lIlt_s5Tl18AXQnplLseJZUqtTo-zV3Aw9-4cKXBOKN5lQJ8b7AgyOjReKHJeIGPTxrv6yJxxzOd4dl-tiE1iEVzZHJ_kt_gorC4biG9iXlITAia2_5cLG0Y
  3. En haut à gauche de l’interface, une flèche permet de changer de visualisation.

    https://lh4.googleusercontent.com/2U7jDka0ZQjjpj5Un8A2rsMJuEZzFb8xc1C4tyA3pPRI_845wJceG4AN9ulllQMnRGomaIY3dkkCsiZYESbnWwvVFeImoBXCirFRxiJZjdtDH1jrEMFKMc4cG1LFJs1YIVZ_eMkDyI8
  4. Si un message d’erreur apparaît (notamment des variables non initialisées), retourner dans le fichier .js afin d’initialiser ces variables (généralement des coordonnées).
  5. Il faut en général modifier légèrement le code js fourni afin d’avoir un résultat agréable à voir dans DigDash.