Instances de données locales pour plusieurs visualisations de données

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 6 minutes de lecture
  • Une ressource de données API de visualisation des données spéciale est disponible pour extraire les données de plusieurs visualisations de données simultanément. Cette ressource de données réduit le nombre d’appels d’API et peut donc accélérer la récupération des données.

    Quand l’utiliser

    Vous pouvez utiliser la ressource de données « API de visualisation de données pour plusieurs visualisations de données » dans les scénarios suivants :
    • Plusieurs visualisations de données du même type ont la même source de données. Par exemple, vous avez cinq visualisations dont le type de visualisation est Single Score (Score unique) et la source de données est la table Incident [incident] avec le filtre active=true. Si vous avez plusieurs groupes d’indicateurs du même type et de la même source de données, vous pouvez créer une instance de la même ressource de données de visualisation multiple pour chaque groupe.
    • Une visualisation de données comporte plusieurs ressources de données qui font référence à la même source de données. Par exemple, vous disposez d’une visualisation linéaire avec une ressource de données de l’indicateur « Nombre d’incidents ouverts » et une autre ressource de données de l’indicateur « Âge moyen des incidents ouverts ». Ces deux indicateurs utilisent la source de données Incident.Open. Par souci d’efficacité, vous pouvez convertir cette visualisation pour n’utiliser qu’une seule ressource de données.

    Quand ne pas utiliser

    • Il n’y a qu’une seule visualisation de données sur la Générateur d'IU page.
    • Le chargement des données sur la page est susceptible de prendre beaucoup de temps. Dans ce cas, il est préférable de répartir le chargement des données entre des ressources de données distinctes.

    Configurer une ressource de données de visualisation multiple

    Si votre cas d’utilisation répond aux critères d’une ressource de données de visualisation multiple, vous pouvez suivre cette procédure.

    Avant de commencer

    Passez en revue le cas d’utilisation d’une ressource de données unique pour plusieurs visualisations dans Instances de données locales pour plusieurs visualisations de données.

    Rôle requis : ui_builder_admin, admin

    Pourquoi et quand exécuter cette tâche

    Important :
    Cette ressource de données fusionne plusieurs appels en un seul. L’appel unique est exécuté comme une transaction unique sur un seul thread. Par conséquent, utilisez cette ressource de données avec une prudence particulière, en particulier lors du traitement d’une grande quantité de données, car dans certains cas, cela peut entraîner des délais d’expiration des transactions. En fonction de la quantité de données, de la configuration de la page et de l’expérience utilisateur ciblée, vous pouvez obtenir de meilleurs résultats en utilisant des ressources de données distinctes.

    Procédure

    1. Accédez au tableau de bord technique ou à la page UIB avec les visualisations de données.
    2. Vérifiez que les visualisations de données sur la page répondent aux critères de la section Quand les utiliser.
      Par exemple, vous avez plusieurs visualisations à cadran sur la source de données de la table Incident, et la quantité de données extraites n’est pas trop importante.
    3. Dans le tiroir Données et scripts, sous Ressources de données, sélectionnez + Ajouter une ressource de données.

      Ajoutez un lien de ressource de données lorsqu’il n’y en a pas encore.
    4. Dans la fenêtre Sélectionner une ressource de données, recherchez Visualisation des données.
      Vous obtenez une sélection des ressources de données que vous pouvez utiliser.
      Sélection des ressources de données de l’API de visualisation des données, y compris celle permettant plusieurs visualisations de données.
    5. Sélectionnez « API de visualisation de données pour plusieurs visualisations de données ».
    6. Définissez le type sur Configurations de données.
    7. Dans le champ de demande, renseignez le JSON.
      Consultez l’exemple à la fin de cette procédure.
    8. Dans chaque visualisation de données que vous souhaitez utiliser avec cette ressource de données, effectuez les actions suivantes :
      1. Sélectionnez la visualisation de données.
      2. Ouvrez le panneau Configuration.
      3. Activez Définir les données manuellement.
      4. Utilisez la liaison de données pour lier un script au champ de données.

    Ressource de données pour trois visualisations à score unique avec la même source de données

    Dans cet exemple, nous commençons par une page UIB qui contient trois composants de visualisation des données. Ces composants sont tous du type de visualisation à score unique et utilisent tous la même source de données.

    Vous suivez la procédure générale jusqu’à l’étape 6. Vous disposez maintenant d’une API de visualisation de données pour plusieurs visualisations de données sur votre page Tableaux de bord.

    Ensuite, vous écrivez le JSON de la demande, comme suit :
    [
        {
            "details": {
                "visualizationId": "vis_1",
                "followFilter": true
            },
            "configurations": {
                "dataConfigurations": [
                    {
                        "sourceType": "table",
                        "dataCategory": "simple",
                        "order": 0,
                        "tableOrViewName": "incident",
                        "aggregateFunction": "COUNT"
                    }
                ]
            }
        },
        {
            "details": {
                "visualizationId": "vis_2",
                "followFilter": true
            },
            "configurations": {
                "dataConfigurations": [
                    {
                        "sourceType": "table",
                        "dataCategory": "simple",
                        "order": 0,
                        "tableOrViewName": "incident",
                        "aggregateFunction": "AVG",
                        "aggregateField": "business_duration"
                    }
                ]
            }
        },
        {
            "details": {
                "visualizationId": "vis_3",
                "followFilter": true
            },
            "configurations": {
                "dataConfigurations": [
                    {
                        "sourceType": "table",
                        "dataCategory": "simple",
                        "order": 0,
                        "tableOrViewName": "incident",
                        "aggregateFunction": "AVG",
                        "aggregateField": "priority"
                    }
                ]
            }
        }
    ]

    La demande se présente sous la forme d’un tableau d’objets, un pour chaque visualisation de données. Chaque visualisation a une details propriété avec une valeur arbitraire pour le visualizationId et un paramètre booléen followFilter si la visualisation suit les composants de filtre sur la page. Dans ce cas, les trois visualisations suivent des filtres.

    Chaque visualisation possède également une configurations propriété, contenant uniquement un dataConfigurations tableau. Étant donné que toutes les visualisations sont du même type, Single Score, et que ce type de visualisation n’affiche qu’une valeur simple, les trois dataCategory propriétés sont « simples ». De même, toutes les visualisations utilisent la même source de données. Étant donné que la source de données est la table Incident [incident], les trois visualisations ont une sourceType de « table » et une de tableOrViewName « incident ». Le seul endroit où les visualisations peuvent varier est dans les agrégats qu’ils utilisent. Ici, vous voyez que le premier utilise une agrégation COUNT, le second prend un agrégat AVG sur le champ business_duration et le troisième prend un AVG du champ de priorité.

    La configuration finale de la ressource de données ressemble à ceci :
    configuration terminée du courtier en données du tableau de bord.
    Enfin, pour chaque visualisation de données, vous liez le script suivant au champ de données. Vous utilisez la valeur arbitraire visualizationId que vous avez donnée à chaque visualisation comme valeur vizId dans le script pour cette visualisation.
    function evaluateProperty({api, helpers}) {
      const data = api.data.data_visualization_api_for_multiple_data_visualizations_1.output;
    ​
      if (!data) {
        return [];
      }
    ​
      const vizId = 'vis_1';
    ​
      const dataForViz = data.result.find(d => d.details.visualizationId === vizId);
    ​
        return dataForViz.dataResponses;
    }

    JSON de demande pour un indicateur

    La demande de visualisation sur un indicateur diffère de l’exemple précédent, qui concernait une table. Voici le JSON pour une visualisation de séries chronologiques, qui montre une tendance dans le temps, pour l’indicateur du nombre d’incidents ouverts, regroupés par répartition des priorités :
    [
        {
            "details": {
                "visualizationId": "vis1",
                "followFilter": true
            },
            "configurations": {
                "dataConfigurations": [
                    {
                        "sortBy": "choice",
                        "sortOrder": "asc",
                        "sourceType": "indicator",
                        "dataCategory": "trend",
                        "order": 0,
                        "splitView": false,
                        "numberOfGroups": 2,
                        "uuid": {
                            "indicator": "fb007202d7130100b96d45a3ce6103b4",
                            "breakdowns": []
                        },
                        "trendBy": "anything",
                        "trendInterval": "date",
                        "groupBy": [
                            "0df47e02d7130100b96d45a3ce610399"
                        ],
                        "removeMissingIntervalData": false
                    }
                ]
            }
        }
    ]

    La première différence évidente est que le est un sourceType « indicateur » et une dataCategory « tendance ». Vous voyez également qu’au lieu d’une tableOrViewName propriété, vous avez un uuid objet avec l’uuid de l’indicateur Nombre d’incidents ouverts et un tableau vide qui pourrait contenir les UUID des répartitions pour filtrer cet indicateur. Étant donné que cette visualisation prend en charge les valeurs Grouper par, vous disposez d’un groupBy tableau qui, dans ce cas, contient uniquement l’uuid de la répartition des priorités. Avoir un groupe-par implique un tri, et ici vous voyez que le est «  sortBy choix », reflétant le type de données de la répartition des priorités, et le sortOrder est croissant.