Graphiques

Dans votre application, vous pouvez afficher les données dans des graphiques, comme ceux utilisés ailleurs dans l'interface utilisateur de New Relic. Le SDK New Relic fournit des composants React pour différents types de graphiques.

Une fois que vous avez décidé du type de données que vous souhaitez présenter, provenant de New Relic ou d'une autre source, vous fournissez ces données à votre graphique à l'aide d'accessoires.

Interroger les données New Relic

Dans certains cas, vous souhaitez récupérer des données de la base de données de New Relic. Par exemple, vous souhaitez peut-être afficher un graphique linéaire qui trace le nombre de transactions que votre application reçoit au fil du temps.

Avec votre composant graphique, définissez les accessoires accountId et query pour interroger vos données New Relic à l'aide de NRQL:

<LineChart accountId={1234} query="SELECT count(*) FROM Transaction" />;

Alternativement, vous pouvez récupérer des données avec un NrqlQuery et définir la propriété data :

<NrqlQuery accountId={1234} query="SELECT count(*) FROM Transaction">
  {({ data }) => <LineChart data={data} />}
</NrqlQuery>;

Si vous souhaitez visualiser les données New Relic, telles que les temps de réponse de votre application Web ou le débit de votre serveur, l'interrogation des données dans vos graphiques est la solution idéale. Mais que faire si vous souhaitez créer des graphiques qui ne sont pas axés sur les données New Relic ? L'accessoire data est suffisamment flexible pour que vous puissiez fournir n'importe quelle donnée arbitraire, à condition qu'elle corresponde au format standardisé.

Créer des données personnalisées

Que vous utilisiez un ensemble de données personnalisé ou les résultats d'un NrqlQuery, la propriété data d'un graphique doit être un éventail d'objets où chaque objet possède les deux champs suivants :

metadata: Définit comment le graphique présente ses données
data: Un ensemble de points de données qui apparaissent sur le graphique

Par exemple, créez un graphique composé d'une ligne entre deux points en fournissant deux coordonnées xy dans son champ data :

const data = [
  {
    metadata: {
      id: 'series-1',
      name: 'My series',
      viz: 'main',
      color: 'blue',
    },
    data: [
      {
        x: 0,
        y: 0,
      },
      {
        x: 20,
        y: 10,
      },
    ],
  },
];
<LineChart data={data} />;

Ce LineChart trace une ligne entre les coordonnées (0, 0) et (20, 10). Utilisez les coordonnées xy pour tous les formats de graphiques bidimensionnels. Pour d’autres formats, sur lesquels vous en apprendrez davantage plus tard, utilisez d’autres types de points de données.

Étant donné que data accepte un éventail, vous pouvez fournir deux séries au même graphique :

const data = [
  {
    metadata: {
      id: 'series-1',
      name: 'My series',
      viz: 'main',
      color: 'blue',
    },
    data: [
      {
        x: 0,
        y: 0,
      },
      {
        x: 20,
        y: 10,
      },
    ],
  },
  {
    metadata: {
      id: 'series-2',
      name: 'My second series',
      viz: 'main',
      color: 'red',
    },
    data: [
      {
        x: 0,
        y: 50,
      },
      {
        x: 20,
        y: 100,
      },
    ],
  },
];

<LineChart data={data} />;

Dans cet exemple, vous créez un graphique unique avec deux séries. La première série contient la ligne du dernier exemple. La deuxième série contient une ligne entre les points (0, 50) et (20, 100). Lorsque vous utilisez deux séries dans un seul graphique, comme celui-ci, vous souhaiterez peut-être définir comment le graphique représente chaque série. Utilisez metadata pour définir ces éléments.

Métadonnées

Le metadata d'une série définit certaines fonctionnalités de la série elle-même, comme la manière dont elle doit être affichée dans votre graphique. metadata se compose de l'attribut suivant :

Attribut	Description
`id`	L'identifiant de la série. Deux séries ayant le même `id` sont considérées comme la même série, quel que soit leur emplacement. En général, utilisez un `id` unique pour chaque série. Cependant, si vous utilisez la même série pour plusieurs graphiques, conserver la cohérence du `id` peut aider à certaines fonctionnalités inter-graphiques, comme la mise en évidence simultanée de plusieurs graphiques.
`name`	Le nom de la série. `name` est utilisé dans les légendes, les info-bulles et d'autres zones pour indiquer la série que vous regardez.
`color`	La couleur de la série. La plupart des visualisations utilisent cette valeur pour différencier les séries. Certaines visualisations, comme `BillboardChart` ou `JsonChart`, l'ignorent. Utilisez n’importe quelle représentation de couleur CSS valide, telle que `#RRGGBB`, `hsl(HHH, SS%, LL%)` ou `rgba(RR, GG, BB, .AA)`. Évitez de modifier la valeur alpha, lorsque cela est possible, car les graphiques utilisent l'alpha pour mettre en évidence ou atténuer certaines séries.
`viz`	Le style visuel de la série. Bien que vous utilisiez le plus souvent `main`, ce champ accepte plusieurs options : `main`: Afficher la série en fonction du type de graphique. Par instance, un `LineChart` montre la série sous forme de ligne et un `AreaChart` montre la série sous forme de zone. `line`: Afficher la série sous forme de ligne, quel que soit le type de graphique. Ce paramètre s'applique uniquement à `AreaChart` et `ScatterChart`. Les autres types de graphiques n'afficheront pas la série. `area`: Afficher la série sous forme de zone, quel que soit le type de graphique. Ce paramètre s'applique uniquement à `LineChart` et `ScatterChart`. Les autres types de graphiques n'afficheront pas la série. `event`: Afficher la série comme un événement, quel que soit le type de graphique. Les graphiques représentent un événement sous la forme d’une zone verticale derrière la visualisation principale. Les événements sont souvent utilisés pour afficher des alertes. Ce paramètre s'applique uniquement à `AreaChart`, `LineChart` et `ScatterChart`. Les autres types de graphiques n'afficheront pas la série. `target-line`: Afficher la série sous forme de ligne verticale. Ce paramètre s'applique uniquement à `AreaChart`, `LineChart` et `ScatterChart`. Les autres types de graphiques n'afficheront pas la série.
`units_data`	Vous pouvez attribuer un type d’unité à chaque axe d’un graphique. Le graphique présentera les données en fonction du type d'unité que vous avez défini avec `units_data`. Pour définir `unit_data`, transmettez un objet JSON qui mappe l'axe à l'un des types d'unités suivants : `UNKNOWN`: Le graphique affiche la série sans unités spéciales. `COUNT`: Chaque valeur du graphique représente un décompte. Le graphique formate les valeurs avec leur préfixe du système international. Par exemple, « k » représente des milliers, « M » représente des millions et « G » représente des milliards. `PERCENTAGE`: Chaque valeur du graphique représente un pourcentage. En règle générale, vous fournissez des valeurs comprises entre `0` et `1`. Le graphique formate une valeur de `1` comme « 100 % », une valeur de `2` comme « 200 % » et une valeur de `0.01` comme « 1 % ». `MS`: Chaque valeur du graphique représente un certain nombre de millisecondes. Le graphique représente les valeurs supérieures à 1 sous forme de durée lisible par une personne. Par exemple, `60000` est représenté par « 1 minute ». Le graphique représente les valeurs inférieures à 1 en utilisant les préfixes SI. Par exemple, `0.001` est représenté par 1 μs. `TIMESTAMP`: Chaque valeur du graphique représente un horodatage, le nombre de millisecondes depuis minuit UTC le 1er janvier 1970, l' Epoch UNIX. Le graphique formate chaque valeur sous forme de date. `BITS`: Chaque valeur du graphique représente un certain nombre de bits. Le graphique formate ces valeurs en utilisant « b ». Lors de la mise à l'échelle, le graphique affichera des préfixes décimaux au lieu de préfixes binaires. Par exemple, le graphique affiche `1000` comme « 1 ko ». `BITS_PER_SECOND`: Chaque valeur du graphique représente un certain nombre de bits par seconde. Le graphique formate ces valeurs en utilisant « b/s ». Lors de la mise à l'échelle, le graphique affichera des préfixes décimaux au lieu de préfixes binaires. Par exemple, le graphique affiche `1000` comme « 1 kb/s ». `BYTES`: Chaque valeur du graphique représente un certain nombre d'octets. Le graphique formate ces valeurs en utilisant « B ». Par exemple, le graphique affiche `1000` comme « 1 Ko ». `BYTES_PER_SECOND`: Chaque valeur du graphique représente un certain nombre d'octets par seconde. Le graphique formate ces valeurs en utilisant « B/s ». Par exemple, le graphique affiche `1000` comme « 1 kB/s ». Ainsi, pour représenter l'axe des y de votre série en bits, définissez la valeur y dans `units_data`: `{ "units_data": { "y": "BITS" } }`

Données

Alors qu'une série de données peut contenir n'importe quelle valeur arbitraire, un graphique utilise uniquement les valeurs qui adhèrent à son type. Créez donc vos points de données en fonction du type de graphique :

Type de série	Exemple	Description
Unidimensionnel	`[{ "y": 10 }, { "y": 20 }]`	Le graphique trace des points de données en utilisant des valeurs `y`. Utilisez ce format avec `BarChart`, `BillboardChart`, `PieChart`, `StackedBarChart`.
Bidimensionnel	`[ { "x": 10, "y": 20 }, { "x": 20, "y": 30 } ]`	Le graphique trace les points de données à l’aide des valeurs `x` et `y`. Utilisez ce format avec `AreaChart`, `LineChart`, `ScatterChart`, `SparklineChart`,
Entonnoir	`[{ "label1": 10, "label2": 20 }]`	Le graphique trace les données en fonction des étiquettes. Utilisez ce format avec `FunnelChart`.
Tableau	`[{ "jobType": "SIMPLE", "count": 18 }]`	Le graphique trace les données en fonction des colonnes du tableau. Vous devez spécifier les colonnes du tableau dans le `metadata`. Utilisez ce format avec `TableChart`.
Événement	`[ { "x0": 0, "x1": 5 }, { "x0": 10, "x1": 15 } ]`	Le graphique trace la largeur de l'événement en fonction des valeurs `x0` et `x1`.
Histogramme	`[ { "x0": 10, "x1": 20, "y": 100 }, { "x0": 30, "x1": 40, "y": 150 } ]`	Le graphique trace la largeur de la série en fonction de `x0` et `x1` et la hauteur en fonction de `y`. Utilisez ce format avec `HistogramChart` et `HeatmapChart`.

Conseil

JsonChart est un cas particulier car il traite toutes les données valides. Par exemple, vous pouvez définir un objet JSON arbitraire pour le data du graphique :

const data = {
    data: [
        {
            id: 1,
            name: 'Foo',
            price: 123,
            tags: ['Bar', 'Eek'],
            stock: {
                warehouse: 300,
                retail: 20,
            }
        }
    ],
}

<JsonChart data={data} />

États spéciaux

Dans les sections précédentes, vous avez appris que le data d'un graphique est un éventail de séries. Mais vous pouvez utiliser des valeurs spéciales pour présenter des états de graphique spéciaux :

null ou undefined: indique que le graphique « charge » ses données. Dans cet état, le graphique montre un ensemble de données d'espace réservé.
[]: Indique qu'il n'y a aucune donnée à afficher. Le graphique indique : « Aucune donnée graphique disponible ».

Configurez votre graphique

Comme vous l'avez vu, vous utilisez query ou data pour fournir des données à votre graphique, mais vous pouvez également configurer d'autres aspects de votre graphique, tels que les paramètres visuels et les écouteurs d'événements de clic et de survol. Lisez la documentation du graphique que vous utilisez pour obtenir des informations plus spécifiques.

Groupes de graphiques

Dans certaines circonstances, vous souhaiterez peut-être synchroniser des événements, tels que le glissement ou le nettoyage, sur plusieurs graphiques. Pour ce faire, utilisez un ChartGroup. Tous les graphiques d'un ChartGroup synchronisent leur événement :

<ChartGroup>
  <Stack>
    <StackItem>
      <LineChart
        accountId={1}
        query="SELECT count(*) FROM Transaction SINCE 1 hour ago"
      />
    </StackItem>
    <StackItem>
      <AreaChart
        accountId={1}
        query="SELECT count(*) FROM Synthetics SINCE 1 day ago"
      />
    </StackItem>
  </Stack>
</ChartGroup>;

Idéalement, regroupez les graphiques qui sont conceptuellement liés et séparez les graphiques qui ne sont pas conceptuellement liés.

Étape suivante

Lisez la documentation spécifique au graphique que vous souhaitez utiliser pour en savoir plus sur le comportement et la configuration de ce graphique.

Cette traduction automatique est fournie pour votre commodité.

Interroger les données New Relic .css-21sua1{background:none;border:none;width:0;padding:0;}