Editeur de widget

Vous pouvez éditer les widgets dans l' éditeur de widget en cliquant sur l'icône Configurer du widget (crayon) dans un widget. Vous pouvez ensuite les personnaliser dans l'éditeur ou en modifiant le code JSON.

Dans l'éditeur, vous pouvez facilement modifier le nom de votre widget et sélectionner la source des données que vous souhaitez afficher dans votre vue Visualisation.

Lorsque vous modifiez un widget dans l' éditeur de widget, un aperçu s'affiche également pour vous montrer vos modifications. Vous pouvez ensuite choisir de sauvegarder vos modifications en cliquant sur OK, qui ferme l' éditeur de widget, ou vous pouvez sélectionner Annuler pour abandonner vos modifications.

L'éditeur JSON vous offre des possibilités d'édition plus avancées. Pour plus d'informations sur la syntaxe des widgets JSON, voir la section suivante: Syntaxe des widgets de visualisation.

Vous pouvez télécharger votre vue Visualisation sous forme de fichier JSON, contenant les définitions et les données, ce qui vous permet de partager plus facilement vos résultats avec vos collaborateurs.

Pages de visualisation

Vous pouvez créer différentes pages pour différents scénarios ou combiner des scénarios sur la même page.

Vous pouvez ajouter des pages en cliquant sur le signe plus. Vous pouvez ensuite personnaliser ce qui s'affiche sur chaque page. Vous pouvez également ajouter des pages dans l' éditeur de visualisation.

Pour éditer une page, cliquez sur l'icône Editer (crayon). Dans l' éditeur de visualisation , vous pouvez éditer le nom de la page, la réorganiser et ajouter des pages. Vous pouvez également modifier le nom de la page en cliquant deux fois sur l'onglet de la page.

Pour supprimer une page, cliquez sur le bouton Supprimer dans l'onglet de la page ou dans l' éditeur de visualisation.

Cliquez sur OK dans l' éditeur de visualisation pour sauvegarder vos mises à jour et fermer l'éditeur. Vous pouvez également sélectionner Annuler pour abandonner vos modifications.

Recherche et filtrage de table

Vous pouvez filtrer les tables dans les Préparer les données, Explorer la solution et Visualisation vuesen cliquant sur l'icône de recherche et en entrant une valeur pour la recherche. Vous pouvez également spécifier un nom de colonne, un signe deux-points et une valeur. Par exemple, si vous entrez food:hot dans la zone de recherche de table diet_food_nutrients , la table est filtrée pour afficher uniquement les lignes qui contiennent la nourriture "chaude". Dans cet exemple, vous obtenez une seule ligne contenant la nourriture Hotdog. Vous pouvez également entrer le préfixe d'un nom de colonne. Par exemple, la saisie de fo:hot permet d'obtenir le même résultat que food:hot. Le nom de la colonne étant facultatif, vous pouvez également entrer hot dans ce cas. Si aucun nom de colonne n'est spécifié, la recherche est effectuée sur toutes les colonnes et les lignes correspondantes sont obtenues. Par exemple, si vous entrez 0, dans la table diet_food_nutrients , vous obtenez quatre lignes contenant cette valeur dans l'une des colonnes. Vous pouvez également filtrer en utilisant des valeurs numériques comme suit:

Syntaxe des widgets de visualisation

La syntaxe de widget peut être utile pour personnaliser des widgets au-delà de la fonctionnalité fournie par l'éditeur JSON.

La syntaxe de base du widget est la suivante :

{
  "name": "Widget Title",
  "type": "WidgetType",
  "props": {}
}

La syntaxe de base des widgets qui sont connectés à des données, telles que des tableaux et des graphiques, est la suivante:

{
  "name": "Table Cars",
  "type": "Table",
  "props": {
    "container": "",
    "data": "cars",
    "spec": {},
    "search": ""
  }
}

Spécifications du widget Notes

Le widget Notes peut être stylisé comme un post-it, comme illustré dans l'exemple de code suivant :

{
  "name": "Notes",
  "type": "Notes",
  "props": {
    "notes": "My post-it note",
    "style": {
      "background": "#ffe"
    },
    "headerStyle": {
      "background": "#ffe"
    }
  }
}

Cet exemple de style s'applique à d'autres widgets.

Spécifications du widget de table

Les spécifications de widget de table sont composées d'une liste de colonnes qui suivent cette syntaxe:

{
  "name": "Table Cars",
  "type": "Table",
  "property": "Acceleration",
  "label": "Acceleration",
  "type": "Number",
  "visible": true,
  "width": 100,
  "style": {}
}

Vous pouvez personnaliser le rendu des tableaux à l'aide des éléments suivants:

La fonction de recherche et de filtrage est disponible dans les tableaux. Pour rechercher du contenu dans une table, cliquez sur l'icône de recherche . Vous pouvez limiter votre recherche à une colonne spécifique en ajoutant un préfixe à votre recherche comme suit : "column heading":"search", par exemple name:chevrolet. Pour rechercher des valeurs comprises entre x et x, utilisez 10..20. Vous pouvez également rechercher des valeurs supérieures à x, par exemple 10.. et des valeurs inférieures à x, par exemple ..20. Pour plus d'informations sur le filtrage de table, voir Recherche et filtrage de table.

Widgets graphiques

Vous pouvez utiliser deux types de widgets de graphique: Graphiques Vega et Graphiques. Différents types de graphique sont disponibles lorsque vous ouvrez ces éditeurs de widget graphique.

Spécifications du widget graphique Vega

Le widget Graphique Vega utilise les spécifications Vega-Lite pour créer différents types de graphique (graphiques à barres, graphiques à points, etc.). Si vous laissez spec vide, un diagramme à barres simple est automatiquement généré avec la première colonne de chaîne de l'axe des X et le premier nombre dans l'axe des ordonnées.

Vega-Lite permet le filtrage et la transformation des données. Par exemple, les chaînes peuvent être transformées en dates.

Pour en savoir plus sur Vega-Lite, voir Vega-Lite-A High-Level Visualization Grammar.

Voici un exemple avancé d'un diagramme à barres groupées basé sur un tableau de données de population. Cet exemple montre comment filtrer des données et comment calculer une colonne virtuelle :

{
  "name": "Population Grouped Bar Chart",
  "type": "Chart",
  "props": {
    "data": "population",
    "spec": {
      "transform": [
        {
          "filter": "datum.year == 2000"
        },
        {
          "calculate": "datum.sex == 2 ? 'Female' : 'Male'",
          "as": "gender"
        }
      ],
      "mark": "bar",
      "encoding": {
        "column": {
          "field": "age",
          "type": "ordinal"
        },
        "y": {
          "aggregate": "sum",
          "field": "people",
          "type": "quantitative",
          "axis": {
            "title": "population",
            "grid": false
          }
        },
        "x": {
          "field": "gender",
          "type": "nominal",
          "scale": {
            "rangeStep": 12
          },
          "axis": {
            "title": ""
          }
        },
        "color": {
          "field": "gender",
          "type": "nominal",
          "scale": {
            "range": [
              "#EA98D2",
              "#659CCA"
            ]
          }
        }
      },
      "config": {
        "facet": {
          "cell": {
            "strokeWidth": 0
          }
        },
        "axis": {
          "domainWidth": 1
        }
      }
      }
    }
  }

Widget de diagramme de Gantt

Les diagrammes de Gantt sont automatiquement créés pour afficher la solution aux problèmes de planification créés avec Modeling Assistant. Vous pouvez cependant modifier, créer et configurer des diagrammes de Gantt pour toutes les données où cela est significatif, à l'aide du widget de Gantt. Vous pouvez utiliser Editeur de widget pour sélectionner les scénario pertinent, et Ressources, Activités, Réservations et Dates à afficher. Vous pouvez également utiliser l'éditeur JSON pour configurer des diagrammes de Gantt en cliquant sur l'icône en forme de crayon et en sélectionnant le panneau JSON.

{
  "name": "",
  "type": "Gantt",
  "props": {
    "container": "",
    "data": "$cognitive-gantt",
    "spec": {},
    "search": ""
  }
}

  "data": [
    "resourcesTableName",
    "activitiesTableName",
    "reservationsTableName"
  ],

  "resources": {
    "data": "resourcesTableName",
    "id": "id",
    "parent": "parent",
    "name": "name"
  },
  "activities": {
    "data": "activitiesTableName",
    "id": "id",
    "name": "name",
    "start": "start",
    "end": "end",
    "parent": "parent"
  },
  "reservations": {
    "data": "reservationsTableName",
    "activity": "activity",
    "resource": "resource"
  },

Une autre zone obligatoire que vous devez également définir dans la spécification est dateFormat afin que tous les formats de date communs puissent être convertis en dates réelles. Certains formats de date communs sont par exemple'yyyy-MM-dd','yyyy-MM-dd HH:mm:ss', etc. Vous pouvez également utiliser S for milliseconds for Epoch time, par exemple, "dateFormat": "S". dateFormat doit correspondre aux zones "start" et "end" de la table "activity" .

Le message d'erreur Aucune fenêtre de temps définie s'affiche jusqu'à ce que vous définissez la table activity, avec les zones start et end qui utilisent le dateFormat spécifié.

{
  "name": "",
  "type": "Gantt",
  "props": {
    "container": "",
    "data": [
      "resources",
      "activities",
      "reservations"
    ],
    "spec": {
      "resources": {
        "data": "resources",
        "id": "id",
        "parent": "parent",
        "name": "name"
      },
      "activities": {
        "data": "activities",
        "id": "id",
        "name": "name",
        "start": "start",
        "end": "end",
        "parent": "parent"
      },
      "reservations": {
        "data": "reservations",
        "activity": "activity",
        "resource": "resource"
      },
      "dateFormat": "S",
      "resourceQuantity": "quantity"
    },
    "search": ""
  }
}

{
  "name": "",
  "type": "Gantt",
  "props": {
    "container": "",
    "data": [
      "resources",
      "activities",
      "reservations",
      "constraints"
    ],
    "spec": {
      "type": "ActivityChart",
      "resources": {
        "data": "resources",
        "id": "id",
        "parent": "parent",
        "name": "name"
      },
      "activities": {
        "data": "activities",
        "id": "id",
        "name": "name",
        "start": "start",
        "end": "end",
        "parent": "parent"
      },
      "constraints": {
        "data": "constraints",
        "from": "from",
        "to": "to",
        "type": "type"
      },
      "reservations": {
        "data": "reservations",
        "activity": "activity",
        "resource": "resource"
      },
      "dateFormat": "S",
      "resourceQuantity": "quantity"
    },
    "search": ""
  }
}

En savoir plus

Pour les autres types de graphiques, voir Visualisation de vos données.