SparklineTableRowCell

Affiche une cellule de ligne de tableau affichant un graphique sparkline. Les sparklines peuvent provenir soit d'une requête NRQL (fournissant ainsi accountId et query), soit d'un data prédéfini transmis dans le format du graphique. Dans les deux cas, tous les accessoires sont compatibles 1:1 avec le type de format <NrqlQuery> CHART.

Un cas courant pour restituer une ligne par facette NRQL consiste à effectuer la requête en dehors de la table, puis à transmettre le résultat sous forme d'éléments (les données renvoyées par un <NrqlQuery> sont un éventail, qui peut être directement utilisé comme éléments d'entrée d'une table). Une fois le rendu du sparkline effectué, vous devez ré-encapsuler les données dans un éventail, afin de construire, à partir d'une série, un nouvel ensemble complet de données.

Usage

import { SparklineTableRowCell } from 'nr1'

Exemples

Exemple 1

function render() {
  const items = [
    {
      accountId: 1,
      query: "SELECT count(*) FROM Transaction WHERE metric = '…' TIMESERIES",
    },
  ];


  return (
    <Table items={items}>
      <TableHeader>
        <TableHeaderCell>Account</TableHeaderCell>
        <TableHeaderCell>Stats</TableHeaderCell>
      </TableHeader>


      {({ item }) => (
        <TableRow>
          <TableRowCell>{item.accountId}</TableRowCell>
          <SparklineTableRowCell
            accountId={item.accountId}
            query={item.query}
          />
        </TableRow>
      )}
    </Table>
  );
}

Exemple 2

<NrqlQuery
  accountId={1}
  query="SELECT count(*) FROM Transaction WHERE metric = '…' TIMESERIES"
>
  {({ loading, error, data }) => {
    if (loading || error) {
      return null;
    }


    return (
      <Table items={data}>
        <TableHeader>
          <TableHeaderCell>Name</TableHeaderCell>
          <TableHeaderCell>Stats</TableHeaderCell>
        </TableHeader>


        {({ item }) => (
          <TableRow>
            <TableRowCell>{item.metadata.name}</TableRowCell>
            <SparklineTableRowCell data={[item]} />
          </TableRow>
        )}
      </Table>
    );
  }}
</NrqlQuery>

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.

className

chaîne

Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement.

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,
      },
    ],
  },
];

onClick

fonction

Rappel déclenché à chaque fois que l'utilisateur clique sur la cellule du tableau.

function (event: React.MouseEvent 
)

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é. Doit être utilisé uniquement à des fins de positionnement et d'espacement.

testId

chaîne

Ajoute un attribut data-test-id. Utilisez-le pour cibler le composant dans les tests unitaires et E2E. Pour qu'un identifiant de test soit valide, préfixez-le avec votre identifiant nerdpack, suivi d'un point. Par exemple, my-nerdpack.some-element.

Remarque : vous ne verrez peut-être pas l'attribut data-test-id car ils sont supprimés du DOM. Pour les déboguer, transmettez un paramètre de requête e2e-test à l'URL.

to

forme|chaîne

Objet d'emplacement ou chaîne d'URL vers laquelle créer un lien. Les TableRowCellliés ne sont pas stylisés et n'afficheront pas d'icônes pour les liens externes. Si le même style que le composant Link est souhaité, utilisez plutôt un Link comme composant enfant dans la cellule.

forme

pathname

OBLIGATOIRE

chaîne

search

chaîne

hash

Cette traduction automatique est fournie pour votre commodité.

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

Exemples

Exemple 1

Exemple 2

Accessoires

OBSOLÈTE

numéro

Date limite de soumission : 1er novembre 2022

chaîne

objet[]

fonction

chaîne

objet

chaîne

forme|chaîne

forme

OBLIGATOIRE

chaîne

chaîne

chaîne

Usage