Créer et éditer des composants

Objectif

Dans ce tutoriel, vous apprendrez à créer et éditer vos premiers graphiques, et à les ajouter à vos dashboards.

Créer et éditer un composant de graphique

Ajouter un composant

Vous pouvez facilement ajouter un nouveau composant à votre dashboard Rides Analytics. Pour cela, ajoutez cet objet json à l'array items dans rides-analytics.json

{
  "type": "panel",
  "id": "rides-holidays-container",
  "sizeX": 37,
  "sizeY": 64,
  "row": 191,
  "col": 38,
  "items": [
    {
      "type": "chart",
      "chart": {
        "id": "chart-6930201",
        "component": "recharts.bar",
        "request": {
          "data": {
            "fields": {
              "avg_rides_per_day_per_station": ["select"]
            }
          },
          "scale": {
            "fields": ["cat_holiday"]
          }
        },
        "options": {}
      },
      "sizeX": 100,
      "sizeY": 54,
      "row": 6,
      "col": 0
    },
    {
      "type": "html",
      "content": "Rides variability on Holidays",
      "customclass": "chart-title",
      "sizeX": 100,
      "sizeY": 5,
      "row": 0,
      "col": 0
    }
  ]
}

Ce json définit un panel qui contient 2 items, le graphique lui-même et son titre.

Un graphique est un item spécial qui a besoin d'une requête pour fonctionner. Une fois le composant de graphique chargé, la requête est exécutée et le résultat est affiché différemment selon le type du graphique.
La requête a le même format que les requêtes de l'Analytics Manager. Vous pouvez aussi créer votre requête dans l'Analytics Manager et indiquer l'id de la requête à la place de la requête elle-même. Dans ce cas, vous devrez remplacer request par requestId dans le json ci-dessus.

Le type du graphique est défini par la clé component. De nombreux types de graphiques sont disponibles nativement dans Data Platform, mais vous pouvez aussi créer vos propres composants, nous vous montrerons comment y parvenir dans la prochaine partie de ce guide.
Dans cet exemple, nous avons défini un nouveau graphique en barres à l'aide de la librairie recharts. La requête calcule le nombre moyen de trajets par jour pour chaque jour férié.

Au départ, votre graphique ressemble à ceci :

Personnaliser un graphique

Comme ce graphique est réalisé avec la librairie recharts, il existe de nombreuses propriétés que vous pouvez modifier.

Pour transmettre ces propriétés depuis le json de configuration de votre graphique, il vous suffit d'éditer la clé options relative à ce graphique.
Par exemple, pour modifier la taille des barres, ajoutez une propriété barSize dans options comme ci-dessous :

"options": {
  "barSize": 20
}

Vous pouvez aussi personnaliser les axes en ajoutant la propriété xAxis ou yAxis. Vous pouvez ensuite transmettre les propriétés disponibles sur la page de documentation Recharts Axis
Par exemple, changez le domaine et l'échelle de votre YAxis :

"options": {
  "barSize": 20,
  "yAxis": {
    "domain": [
      2000,
      3800
    ],
    "scale": "linear"
  }
}

Après ces quelques changements, votre graphique ressemble désormais à ceci :

Revenons un instant au fichier de configuration du graphique afin d'expliquer la configuration du titre.
Ce composant est également nativement disponible avec Data Platform. Il vous permet d'écrire du code HTML dans la propriété content. Il sera encapsulé dans une div. Vous pouvez associer une classe personnalisée à cette div à l'aide de la propriété customclass.

Le code html associé au json défini ci-dessus est :

<div class="html chart-title">Rides variability on Holidays</div>

Créer et éditer un paramètre dynamique

Un paramètre dynamique permet à l'utilisateur d'interagir avec un ou plusieurs graphiques en modifiant leurs requêtes à la volée.

Pour créer un nouveau paramètre dynamique, ouvrez config/menus/sidebar.json et ajoutez l'objet json suivant à l'objet containers, juste au-dessus de l'item footer.

  {
    "id": "dyn-weekday",
    "items": [
      {
        "type": "html",
        "content": "Weekday",
        "customclass": "dyn-title"
      },
      {
        "type": "dynamic-parameter",
        "dynamic-parameter": {
          "type": "filter",
          "id": "dynamic-weekday",
          "dictionary": "week_day_label",
          "component": "selectbox",
          "placeholder": "Select Weekday",
          "multi": true
        },
        "style": {
          "paddingBottom": "10px"
        }
      }
    ]
  }

Ce json définit un paramètre dynamique qui vous permet de filtrer les requêtes de graphiques par un ou plusieurs jours de la semaine.

Il suit la même logique que celle suivie par les graphiques.

Voici le détail de cette configuration :

• type : indique comment le paramètre dynamique sera utilisé, ici comme un filtre. Cela signifie que tout graphique associé à ce paramètre dynamique verra ses résultats filtrés pour n'afficher que ceux correspondant aux jours de la semaine sélectionnés.
• dictionary : définit le champ lié à ce dynamic-parameter.
• component : définit le composant auquel ce dynamic-parameter est associé, ici, le composant selectbox.
• id : sert à référencer cet objet au sein de la platform et est couramment utilisé pour lier ce paramètre dynamique à des graphiques.
• placeholder : spécifique au composant selectbox, précise le texte affiché par défaut dans la selectbox.
• multi : spécifique au composant selectbox, c'est une propriété booléenne qui permet de sélectionner plusieurs options lorsqu'elle est définie sur true.

Après avoir copié-collé l'objet json ci-dessus définissant ce paramètre dynamique, votre nouveau composant doit maintenant apparaître dans la sidebar :

Pour utiliser ce dynamic-parameter que vous venez de créer, vous devez le lier à un graphique. Vous pouvez le faire en éditant la configuration des graphiques.

• Ouvrez config/dashboards/rides-analytics.json
• Dans l'objet json définissant le graphique d'historique des trajets, ajoutez "dynamic-weekday" au tableau dynamic-parameters.
• Rechargez votre page, votre paramètre dynamique est maintenant lié au graphique d'historique des trajets.
• Sélectionnez un jour pour filtrer le graphique par jour de la semaine et observez son rafraîchissement avec les nouvelles données.

Vous avez appris à utiliser des composants existants. Vous êtes maintenant prêt à découvrir la création de vos propres composants personnalisés et leur utilisation pour créer des paramètres dynamiques et des graphiques uniques !

Aller plus loin

Si vous avez besoin d'une formation ou d'une assistance technique pour la mise en oeuvre de nos solutions, contactez votre commercial ou cliquez sur ce lien pour obtenir un devis et demander une analyse personnalisée de votre projet à nos experts de l’équipe Professional Services.

Posez vos questions, faites-nous part de vos commentaires et interagissez directement avec l’équipe qui développe la Data Platform sur le canal Discord dédié.

Si vous avez besoin d'une assistance concernant vos services OVHcloud, créez une demande depuis notre centre d'aide.

Rejoignez notre communauté d'utilisateurs.