AreaChart

Crée un graphique à deux dimensions. Les données peuvent être obtenues en effectuant une requête NRQL sur un compte particulier ou elles peuvent être transmises via la propriété data.

Le format data est une série d'objets, chacun contenant metadata et data. Chaque data contient à la fois les valeurs de ce point et les clés x et y utilisées pour tracer le graphique.

Usage

import { AreaChart } from 'nr1'

Exemples

Basique

<AreaChart accountIds={[1]} query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType" />

Avec plusieurs comptes

<AreaChart accountIds={[1, 1067061]} query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType" />

Remplir le conteneur

<AreaChart
  accountIds={[1]}
  query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType"
  fullWidth
  fullHeight
/>

Avec des données personnalisées

function render() {
  const data = [
     {
       metadata: {
         id: 'series-1',
         name: 'Serie 1',
         color: '#a35ebf',
         viz: 'main',
         units_data: {
           x: 'TIMESTAMP',
           y: 'BYTES',
         }
       },
       data: [
         {
           x: 1717070785286,
           y: 21400,
         },
         {
           x: 1717074385286,
           y: 12200,
         },
         {
           x: 1717077985286,
           y: 9300,
         },
         {
           x: 1717081585286,
           y: 14500,
         },
         {
           x: 1717085185286,
           y: 27500,
         },
         {
           x: 1717088785286,
           y: 24700,
         },
       ],
     },
     {
       metadata: {
         id: 'series-2',
         name: 'Serie 2',
         color: '#85c956',
         viz: 'main',
         units_data: {
           x: 'TIMESTAMP',
           y: 'BYTES',
         }
       },
       data: [
         {
           x: 1717070785286,
           y: 8800,
         },
         {
           x: 1717074385286,
           y: 1400,
         },
         {
           x: 1717077985286,
           y: 4600,
         },
         {
           x: 1717081585286,
           y: 5200,
         },
         {
           x: 1717085185286,
           y: 14100,
         },
         {
           x: 1717088785286,
           y: 19300,
         },
       ],
     },
     {
       metadata: {
         id: 'events',
         name: 'Events',
         color: 'red',
         viz: 'event',
       },
       data: [
         {
           x0: 1717074385286,
           x1: 1717077985286,
         },
         {
           x0: 1717085185286,
           x1: 1717085185286,
         },
       ],
     },
   ];;


  return <AreaChart data={data} fullWidth />;
}

Accessoires

`accountId` OBSOLÈTE numéro	Date limite de soumission : 1er novembre 2022 L'accountId est obsolète, utilisez plutôt accountIds Définit l'ID de compte pour effectuer la requête.
`accountIds` nombre[]	Définit les ID de compte pour effectuer la requête.
`className` chaîne	Ajoute les noms de classe au composant.
`data` objet[]	Les données sont un ensemble d'objets où chaque objet représente une série à dessiner. Chaque série comprend des métadonnées de visualisation et un éventail de points de données. const data = [ { metadata: { id: 'series-1', name: 'Serie 1', color: '#a35ebf', viz: 'main', units_data: { x: 'TIMESTAMP', y: 'BYTES', }, }, data: [ { x: 1712312066891, y: 21400, }, { x: 1712315666891, y: 12200, }, { x: 1712319266891, y: 9300, }, { x: 1712322866891, y: 14500, }, { x: 1712326466891, y: 27500, }, { x: 1712330066891, y: 24700, }, ], }, { metadata: { id: 'series-2', name: 'Serie 2', color: '#85c956', viz: 'main', units_data: { x: 'TIMESTAMP', y: 'BYTES', }, }, data: [ { x: 1712312066891, y: 8800, }, { x: 1712315666891, y: 1400, }, { x: 1712319266891, y: 4600, }, { x: 1712322866891, y: 5200, }, { x: 1712326466891, y: 14100, }, { x: 1712330066891, y: 19300, }, ], }, { metadata: { id: 'events', name: 'Events', color: 'red', viz: 'event', }, data: [ { x0: 1712315666891, x1: 1712319266891, }, { x0: 1712326466891, x1: 1712326466891, }, ], }, ];
`fullHeight` booléen	Étend le graphique pour occuper toute la hauteur disponible.
`fullWidth` booléen	Étend le graphique pour occuper toute la largeur disponible.
`onClick` fonction
`onClickArea` fonction	Ajoute un écouteur de clic qui se déclenche lorsque l'utilisateur clique sur la zone correspondante.
`onClickEvent` fonction	Ajoute un écouteur de clic qui se déclenche lorsque l'utilisateur clique sur l'événement correspondant.
`onClickLine` fonction	Ajoute un écouteur de clic qui se déclenche lorsque l'utilisateur clique sur la ligne correspondante.
`onHoverArea` fonction	Ajoute un écouteur de survol qui se déclenche lorsque le curseur survole la zone correspondante.
`onHoverEvent` fonction	Ajoute un écouteur de survol qui se déclenche lorsque le curseur survole l'événement correspondant.
`onHoverLine` fonction	Ajoute un écouteur de survol qui se déclenche lorsque le curseur passe sur la ligne correspondante.
`query` chaîne	Requête NRQL utilisée pour récupérer des données. La requête est exécutée sur le `accountIds` fourni.
`style` objet	Style en ligne pour un style personnalisé.

Cette traduction automatique est fournie pour votre commodité.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Exemples

Basique

Avec plusieurs comptes

Remplir le conteneur

Avec des données personnalisées

Accessoires

OBSOLÈTE

numéro

Date limite de soumission : 1er novembre 2022

nombre[]

chaîne

objet[]

booléen

booléen

fonction

fonction

fonction

fonction

fonction

fonction

fonction

chaîne

objet

Usage