TableChart

Crée un graphique de tableau. 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 { TableChart } from 'nr1';

Exemples

Basique

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

Avec plusieurs comptes

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

Remplir le conteneur

<TableChart
  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: '#008c99',
        viz: 'main',
        columns: ['jobType', 'count'],
      },
      data: [
        {
          jobType: 'SIMPLE',
          count: 18,
        },
        {
          jobType: 'SCRIPT_BROWSER',
          count: 27,
        },
        {
          jobType: 'SCRIPT_API',
          count: 33,
        },
        {
          jobType: 'BROWSER',
          count: 29,
        },
        {
          jobType: 'SELENIUM_JSON',
          count: 22,
        },
        {
          jobType: 'SCRIPT',
          count: 31,
        },
      ],
    },
  ];

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

Accessoires

`accountId` OBSOLÈTE numéro	Date limite de soumission : 1er novembre 2022 Le `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: '#008c99', viz: 'main', columns: ['jobType', 'count'], }, data: [ { jobType: 'SIMPLE', count: 18, }, { jobType: 'SCRIPT_BROWSER', count: 27, }, { jobType: 'SCRIPT_API', count: 33, }, { jobType: 'BROWSER', count: 29, }, { jobType: 'SELENIUM_JSON', count: 22, }, { jobType: 'SCRIPT', count: 31, }, ], }, ];`
`fullHeight` booléen	Étend le graphique pour occuper toute la hauteur disponible.
`fullWidth` booléen	Étend le graphique pour occuper toute la largeur disponible.
`onClickTable` fonction	Ajoute un écouteur de clic qui se déclenche lorsque l'utilisateur clique sur le tableau correspondant.
`onHoverTable` fonction	Ajoute un écouteur de survol qui se déclenche lorsque le curseur est survolé sur la table 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

chaîne

objet

Usage