Page de documentation en cours de réalisation
La fonctionnalité graphique de ce logiciel permet de visualiser des données à l'aide de divers types de graphiques interactifs et configurables. Elle offre des options avancées pour personnaliser les axes, le type de graphique, les couleurs, et l'agrégation des données.
Les éléments principaux pour configurer un graphique sont les suivants :
d4c-dataset-context) : Définit le jeu de données source et le contexte dans lequel le graphique sera interprété.d4c-chart) : Contient les paramètres principaux de l'affichage du graphique, notamment l'alignement temporel et les options d'analyse IA.d4c-chart-query) : Structure la requête en définissant les champs à afficher sur chaque axe, ainsi que des limites sur le nombre de points à afficher.d4c-chart-serie) : Paramètre chaque série de données dans le graphique, en définissant le type de graphique, la couleur et la méthode d'agrégation des données.Le type des attributs est basique et peut être soit :
true ou falsed4c-dataset-context)context : Nom du contexte de données, pour filtrer et organiser les données spécifiques à la visualisation.[id-du-jdd]-dataset : Identifiant du jeu de données pour assurer la liaison entre le graphique et ses données sources.Exemple :
<d4c-dataset-context context="equipementsaccessibilitegarestransilien" equipementsaccessibilitegarestransilien-dataset="equipements-accessibilite-gares-transilien" >
d4c-chart)align-month : Aligne les données sur une base mensuelle pour les axes temporels. Prend la valeur true ou false.display-legend : Indiquer si la légende sera affichée ou non sur le graphique (true ou false)labels-x-length : Permet de définir la longueur des labels de l'axe X. Utile pour éviter que les labels soient illisible ou coupé, selon le cas d'usage.single-y-axis : Permet de fusionner les axes Y au sein d'une seule et même échelle. Utile pour l'affichage de plusieurs jeux de données sur le même graphique.min : Définit la valeur minimale de l’axe Y.
min="-5" force l’axe Y à commencer à -5, ce qui peut être utile pour les graphiques où les valeurs proches de zéro sont pertinentes.max : Définit la valeur maximale de l’axe Y.
max="500" limite l’axe Y à une valeur maximale de 500, idéal pour éviter que le graphique ne s'étende au-delà de la plage d’intérêt.step : Spécifie l’incrément entre chaque marque de l’axe Y.
step="10" définit un intervalle de 10 unités entre chaque marque, permettant une lecture plus structurée et facilitant la comparaison entre les valeurs.scientific-display : l'axe prend des valeurs dans un format scientifique (true ou false).logarithmic : Applique une échelle logarithmique à l’axe Y (true ou false).
logarithmic="true" transforme l’axe Y en une échelle logarithmique, ce qui peut être utile lorsque les valeurs couvrent une large plage (par exemple, des ordres de grandeur très différents).animation-type : Définit le type d'animation utilisé lors de l'affichage du graphique.
drop : les barres ou segments du graphique apparaissent en "tombant" du haut vers le bas, ce qui attire l'attention sur chaque élément et rend le graphique plus vivant.
animation-dataset-delay : Définit un délai en millisecondes avant le début de l'animation des éléments du graphique. Chaque élément du graphique sera animé avec le délai défini (en millisecondes), ce qui crée une séquence d'animation fluide et harmonieuse.resize : Les éléments du graphique (barres, segments, etc.) s'ajustent de manière animée lors de la mise à jour ou de la modification des données. Cela permet aux utilisateurs de mieux suivre les changements dans les valeurs, créant une expérience visuelle plus fluide.progressiveLine :
animation-duration : La durée totale de l'animation (en millisecondes), permettant une transition rapide qui maintient l'attention de l'utilisateur.Propriétés internes utilisés par le back-office :
display-ai-analysis
real-time-ai
d4c-chart-query)Cette section détermine les données affichées pour chaque axe du graphique :
field-x : Champ utilisé pour l'axe X (souvent une mesure de temps, de catégorie ou de localisation).maxpoints : Nombre maximal de points de données à afficher. Une valeur de 0 signifie qu'il n'y a pas de limite.sort : Attribut qui spécifie l'ordre de tri des points de données dans le graphique.
sort="serieY-X", où X indique le numéro de la série, et Y le niveau ou la priorité de tri.Plusieurs balises
d4c-chart-querypermettent de gérer plusieurs jeu de données au sein de l'affichage du graphique.
d4c-chart-serie)Il peut y avoir un ou plusieurs balise série et chaque série de données dans le graphique peut être personnalisée selon les paramètres suivants :
expression-y : Champ utilisé pour l'axe Y, souvent une mesure numérique ou une catégorie à compter.chart-type : Type de graphique pour cette série dont les suivants
column (Colonnes)bar (Barres)pie (Camembert)line (Ligne)spline (Courbe)arearange (Enveloppe)areasplinerange (Enveloppe courbe)columnrange (Plage de colonne)area (Zone)areaspline (Zone et courbe)scatter (Nuage de points)spiderweb (Radar)polar (Polaire)funnel (Entonnoir)subseries : Nécessaire pour certains chart-type (arearange (Enveloppe), areasplinerange (Enveloppe courbe), columnrange (Plage de colonne)).
'[{"func":"MIN","yAxis":"code_uic"},{"func":"MAX","yAxis":"code_uic"}]function-y : Fonction d'agrégation appliquée aux données (ex. : COUNT, AVG, MIN, MAX, SUM, STDDEV (écart-type), QUANTILES (percentile), CONSTANT).series-breakdown : Ventile (fractionne) les séries de données en fonction des valeurs uniques d’un champ. Génère une série distincte pour chaque valeur unique du champ défini, comparant ainsi différentes sous-catégories pour le champ spécifié. Permet une vue segmentée des données, ce qui est particulièrement utile pour des analyses de sous-catégories sans nécessiter plusieurs graphiques.
label-y : Définit l’étiquette textuelle pour l’axe Y. Ajoute une description qui facilite l’interprétation des données en indiquant explicitement ce que les valeurs de l’axe Y représentent.
cumulative : Indique si les valeurs de la série doivent être cumulées (true ou false). Si activé, affiche les valeurs sous forme cumulative, en additionnant chaque valeur aux précédentes, pour montrer une progression ou un total cumulé
chart-type (type de graphiques) suivants : bar (Barres) et column (Colonnes)color : Couleur de la série sous forme de code hexadécimal (ex. : #66c2a5).color-thresholds : Liste de seuils de couleur définie pour la série, qui modifie la couleur d’affichage au-delà de certains niveaux.
color-thresholds='[{"color":"<code couleur>","value":<seuil>}]'color-thresholds='[{"color":"#fc8d62","value":15}]' applique la couleur #fc8d62 (orange) à toutes les valeurs de la série qui sont égales ou supérieures à 15.chart-type (type de graphiques) suivants : scatter (Nuage de points), bar (Barres) et column (Colonnes)category-colors : Définit les couleurs associées à chaque catégorie spécifiée. Pratique pour offrir une meilleure distinction visuelle entre différentes catégories de données, facilitant ainsi l’interprétation rapide des résultats.
{'clé':'valeur'} où chaque clé représente la valeur de la catégorie (ou une valeur spécifique de la colonne désigné par l'attribut series-breakdown), et chaque valeur est un code couleur hexadécimal.category-colors="{'1':'#E5352D','2':'#A5352E','3':'#A535E0','5':'#A5AA2E','Pas de CAB':'#EEEEEE','':'#AAAAAA'}" (la couleur #E5352D sera appliquée à la catégorie 1 et les catégories sans valeur associée ('') auront une couleur #AAAAAA).display-values : Active l’affichage des valeurs sur le graphique (true ou false).
display-values="true" affiche la valeur exacte de chaque point de données, permettant aux utilisateurs de lire facilement les valeurs sans survoler chaque élément.display-stack-values : Active l’affichage des valeurs empilées pour les graphiques empilés (true ou false).
display-stack-values="true" permet de voir les totaux lorsque les valeurs sont empilées, utile pour des visualisations comparatives ou cumulatives.min : Définit la valeur minimale de l’axe Y.
min="-5" force l’axe Y à commencer à -5, ce qui peut être utile pour les graphiques où les valeurs proches de zéro sont pertinentes.max : Définit la valeur maximale de l’axe Y.
max="500" limite l’axe Y à une valeur maximale de 500, idéal pour éviter que le graphique ne s'étende au-delà de la plage d’intérêt.step : Spécifie l’incrément entre chaque marque de l’axe Y.
step="10" définit un intervalle de 10 unités entre chaque marque, permettant une lecture plus structurée et facilitant la comparaison entre les valeurs.scientific-display : l'axe prend des valeurs dans un format scientifique (true ou false).logarithmic : Applique une échelle logarithmique à l’axe Y (true ou false).
logarithmic="true" transforme l’axe Y en une échelle logarithmique, ce qui peut être utile lorsque les valeurs couvrent une large plage (par exemple, des ordres de grandeur très différents).La fonctionnalité Cartes permet aux utilisateurs de visualiser des données géographiques de manière interactive. Le widget de carte permet d'afficher des couches de données géographiques sur une carte interactive. Voici les principales options et attributs configurables.
Les éléments principaux pour configurer un graphique sont les suivants :
d4c-dataset-context) : La balise d4c-dataset-context sert de conteneur principal pour définir le contexte de la carte et les jeux de données associés. Elle permet de spécifier les données qui seront utilisées pour créer la carte.d4c-map) : Contient la carte interactive elle-même. Elle est utilisée pour définir les propriétés de la carte, y compris l'affichage et le comportement interactif.d4c-map-layer-group est un conteneur pour un ou plusieurs niveaux de couches de carte. Elle permet d'organiser les différentes couches de données sur la carte.
d4c-map-layer : contient la définition d'une couche spécifique sur la carte, contenant des données géographiques à afficher. Chaque couche peut avoir ses propres caractéristiques et styles.Le type des attributs est basique et peut être soit :
true ou falsed4c-dataset-context)context : Définit le contexte de la carte, utilisé pour référencer les données à afficher.[dataset] : Indique le jeu de données à charger (ex: antenne-relais-grenoble).[parameters] : Paramètres optionnels pour affiner les données affichées (ex: filtres).d4c-map) :no-refit : Si true, la carte ne se réajuste pas automatiquement après le chargement.scroll-wheel-zoom : Si true, permet le zoom de la carte à l'aide de la molette de la souris.display-control : Si true, affiche les contrôles de la carte (zoom, légende, etc.).display : Détermine quand la couche doit être affichée (ex: auto).search-box : Si true, affiche une boîte de recherche pour localiser des éléments sur la carte.toolbar-fullscreen : Si true, permet à l'utilisateur de basculer en mode plein écran.toolbar-geolocation : Si true, permet à l'utilisateur de se géolocaliser sur la carte.location : Définit les coordonnées et le niveau de zoom initial de la carte, au format latitude,longitude,zoom.d4c-map-layer-group) :d4c-map-layer) :context : Contexte de la carte, utilisé pour définir le jeu de données à afficher. Identifiant du contexte de la couche de données.color : Couleur de la couche sur la carte.picto : Icône à utiliser pour représenter les points de données.show-marker : Si true, affiche un marqueur sur la carte.display-control : Si true, affiche les contrôles de la carte (zoom, légende, etc.).display : Détermine quand la couche doit être affichée (ex: auto).no-refit : Si true, la carte ne se réajuste pas automatiquement après le chargement.scroll-wheel-zoom : Si true, permet le zoom de la carte à l'aide de la molette de la souris.search-box : Si true, affiche une boîte de recherche pour localiser des éléments sur la carte.toolbar-fullscreen : Si true, permet à l'utilisateur de basculer en mode plein écran.toolbar-geolocation : Si true, permet à l'utilisateur de se géolocaliser sur la carte.location : Définit les coordonnées et le niveau de zoom initial de la carte, au format latitude,longitude,zoom.shape-opacity : Opacité de la forme de la couche.point-opacity : Opacité des points affichés.border-color : Couleur de la bordure de la couche.border-opacity : Opacité de la bordure.border-size : Épaisseur de la bordure.border-pattern : Modèle de bordure (ex: solid).caption : Si true, affiche une légende pour les éléments de la couche.caption-picto-icon : Icône utilisée pour la légende.caption-picto-color : Couleur de l'icône de la légende.title : Titre de la couche.description : Brève description du jeu de données.size : Taille des éléments affichés sur la carte.size-min : Taille minimale des éléments.size-max : Taille maximale des éléments.size-function : Fonction de taille utilisée pour adapter les éléments.Voici un exemple d'un widget de carte simple :
<d4c-dataset-context context="antennerelaisgrenoble"
antennerelaisgrenoble-dataset="antenne-relais-grenoble"
antennerelaisgrenoble-parameters="{'refine.adm_lb_nom':'FREE MOBILE'}">
<d4c-map no-refit="true"
scroll-wheel-zoom="false"
display-control="true"
search-box="true"
toolbar-fullscreen="true"
toolbar-geolocation="true"
location="13,45.18089,5.71753">
<d4c-map-layer-group>
<d4c-map-layer context="antennerelaisgrenoble"
color="#C32D1C"
picto="d4c-accommodation"
show-marker="false"
display="auto"
shape-opacity="0.5"
point-opacity="1"
border-color="#FFFFFF"
border-opacity="1"
border-size="1"
border-pattern="solid"
caption="true"
caption-picto-icon="d4c-hostel"
caption-picto-color="#E5E5E5"
title="Titre du jeu de données"
description="Ce jeu de données contient les ..."
size="10"
size-min="3"
size-max="5"
size-function="linear"/>
</d4c-map-layer-group>
</d4c-map>
</d4c-dataset-context>
Ce widget permet d’afficher les éléments d’un jeu de données spécifique dans une interface tabulaire ou en grille. Grâce aux options de filtrage et de tri, les utilisateurs peuvent explorer les éléments du jeu de données en fonction de leurs attributs, comme la date, la catégorie, ou d'autres caractéristiques pertinentes. Les paramètres peuvent également être configurés pour personnaliser la vue et filtrer les données de manière dynamique.
Exemple de widget tableau :
<d4c-dataset-context context="idjdd" idjdd-dataset="idjdd" idjdd-parameters="{'id':'idjdd', 'disjunctive.colonneA':true,'discjuntive.colonneC':true, 'refine.colonneC':'Valeur filtrée'}">
<d4c-table context="idjdd"></d4c-table>
</d4c-dataset-context>
Ce widget utilise deux composants personnalisés, <d4c-dataset-context> et <d4c-table>, pour afficher des données sous forme de tableau ou de grille dans une interface structurée. Ce widget permet de visualiser, filtrer et organiser les éléments d’un jeu de données en fonction de plusieurs critères.
<d4c-dataset-context>Le composant <d4c-dataset-context> crée un cadre de contexte pour un jeu de données, permettant aux composants enfants (comme le tableau) d’accéder aux informations de manière organisée et contrôlée. Voici les attributs principaux utilisés dans ce composant :
context : Ce contexte donne accès aux composants enfants, leur permettant d'interagir avec les données de manière adaptée.
[context]-dataset : Cet attribut contient l’identifiant du jeu de données utilisé, défini ailleurs dans l’application. Ce jeu de données regroupe des éléments contenant des informations pertinentes comme des dates, des catégories, des descriptions, etc. L’identifiant unique permet d’accéder aux données de manière spécifique.
[context]-parameters : Cet attribut accepte un dictionnaire JSON contenant des paramètres d’accès ou de filtrage pour le jeu de données. Par exemple, {'id':'identifiant-jeu-de-donnees', 'disjunctive.date':true,'refine.gare_de_depart':'ANNECY'} pourrait spécifier l’identifiant du jeu de données, gérer la disjonction des dates. Ce paramètre permet d’adapter la présentation et le filtrage des données dans le tableau.
<d4c-table>Ce composant affiche une vue tabulaire ou une grille des éléments dans le contexte du jeu de données défini, facilitant la consultation et l’analyse des informations dans un format structuré.
context : Cet attribut correspond au contexte spécifié dans <d4c-dataset-context>. En utilisant ce contexte, le tableau affiche les éléments du jeu de données en fonction de leurs attributs (par exemple, date, catégorie, ou autres critères pertinents) dans une disposition structurée par lignes et colonnes.Ce widget de calendrier utilise deux composants personnalisés, <d4c-dataset-context> et <d4c-calendar>, pour afficher des données organisées en fonction de critères temporels. Il permet de naviguer et de consulter les éléments d'un jeu de données dans une interface calendaire.
Exemple de widget calendrier :
<d4c-dataset-context context="calendrier"
[id-jdd]-dataset="calendrier"
[id-jdd]-parameters="{'id':'calendrier'}">
<d4c-calendar context="calendrier"/>
</d4c-dataset-context>
<d4c-dataset-context>Le composant <d4c-dataset-context> crée un cadre contextuel pour un jeu de données, permettant aux composants enfants, comme le calendrier, d’accéder aux données et de les visualiser dans un contexte temporel. Voici les détails de ses attributs principaux :
context : Ce contexte donne accès aux composants enfants, leur permettant d'interagir avec les données de manière adaptée.
[context]-dataset : Cet attribut contient l’identifiant du jeu de données utilisé. Par exemple, il pourrait référencer un jeu de données lié à un ensemble spécifique d'éléments. Ce jeu de données contient généralement des informations pertinentes à chaque élément, comme des dates ou des métadonnées nécessaires pour l'affichage et la navigation dans le calendrier.
[context]-parameters : Cet attribut accepte un dictionnaire JSON qui sert à définir des paramètres d’accès ou de filtrage pour le jeu de données.Par exemple, {'id':'identifiant-jeu-de-donnees', 'disjunctive.date':true, 'calendarview':'month','refine.gare_de_depart':'ANNECY'} permet de préciser l’identifiant unique du jeu de données et d’ajouter des options de filtrage, comme la gestion de dates disjonctives.
<d4c-calendar>Ce composant affiche un calendrier intégré dans le contexte défini, permettant de naviguer dans les éléments du jeu de données en fonction de critères temporels.
context : Cet attribut doit être le même que celui défini dans <d4c-dataset-context>. En utilisant ce contexte, le calendrier affiche les éléments en fonction de la date associée à chaque entrée du jeu de données, permettant ainsi une visualisation des données par jour, mois ou année.Ce widget affiche une galerie d'images associée à un jeu de données spécifique, permettant aux utilisateurs de parcourir le contenu visuel. Il est configuré avec une référence de jeu de données et inclut des info-bulles affichant des informations supplémentaires pour chaque image.
<d4c-dataset-context context="idjdd"
idjdd-dataset="idjdd"
idjdd-parameters="{'id':'idjdd'}">
<d4c-media-gallery context="idjdd"
d4c-widget-tooltip
d4c-auto-resize
display-mode="compact"/>
</d4c-dataset-context>
Balise d4c-media-gallery :
context : Définit le contexte dans lequel le widget fonctionne
[context]-dataset : Fait référence à l'identifiant du jeu de données. Cet identifiant permet de récupérer dynamiquement les enregistrements de données pertinents et de lier le widget de galerie au jeu de données approprié. L'identifiant de jeu de données est unique pour chaque ensemble et permet aux utilisateurs de visualiser les images associées à ce jeu de données.
d4c-widget-tooltip : Ajoute une info-bulle personnalisée à chaque image dans la galerie. L'info-bulle fournit des informations supplémentaires sur l'image, basées sur les champs configurés dans le jeu de données.
d4c-auto-resize : Active le redimensionnement automatique du widget pour s’adapter à différentes tailles d'écran et dimensions de conteneur, garantissant une présentation optimale sur divers appareils.
display-mode="compact" : Définit la galerie en mode d'affichage compact, où les images sont présentées dans une mise en page condensée pour économiser de l'espace. Ce mode est particulièrement utile lorsque l'espace est limité ou lorsque les utilisateurs souhaitent avoir un aperçu rapide de plusieurs images.
Ce widget affiche une chronologie interactive associée à un jeu de données spécifique, permettant aux utilisateurs de visualiser des événements ou des points de données dans un ordre chronologique. Il est configuré avec un identifiant de contexte basé sur le jeu de données pour établir la liaison avec les événements pertinents.
<d4c-dataset-context context="contextjdd"
contextjdd-dataset="idjdd"
contextjdd-parameters="{'id':'idjdd'}">
<d4c-timeline context="contextjdd"/>
</d4c-dataset-context>
context : Définit le contexte d'exécution du widget, liant ainsi le widget à un ensemble d'événements ou de points temporels associés au jeu de données spécifié.
[context]-dataset : Spécifie l'identifiant du jeu de données. Cet identifiant permet de récupérer les événements associés au jeu de données et d'afficher une chronologie pertinente pour cet ensemble spécifique.
[context]-parameters : Permet de définir des paramètres supplémentaires pour le contexte du jeu de données (dont les filtres à facette, etc). Notamment, le paramètre {'id':'idjdd'} est utilisé pour spécifier l'identifiant du jeu de données de manière explicite.
Exemple de widget facette :
<d4c-facets context="{{$context_du_jeu_de_donnees}}">
<p>Statut</p>
<d4c-facet disjunctive="true"
name="statut"/>
</d4c-facets>
d4c-facets)La balise d4c-facets sert principalement de structure de groupe.
context pour associer à un contexte à une jeu de données.d4c-facet)disjunctive : Si true, permet d'appliquer des filtres disjonctifs (ou exclusifs)name : Nom de la facette qui détermine le critère de filtrageVoici un exemple d'un widget de tableau de bord :
<iframe frameborder="0"
width="800"
height="600"
src="https://{{$site_url}}/{{id_tableau_de_bord}}/frame"
/>
Voici un exemple d'un widget d'un indicateur:
<iframe frameborder="0"
width="800"
height="600"
src="https://{{$site_url}}/kpi/frame?kpi-id={{$id_kpi}}"
/>