TableChart

Creates a table chart. Data can either be obtained by performing a NRQL query against a particular account, or it can be passed through the data prop.

The data format is a series of objects, each containing metadata and data. Each data contains both values from this point, and x and y keys used to plot the chart.

Usage

import { TableChart } from 'nr1'

Examples

Basic

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

With multiple accounts

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

Fill container

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

With custom data

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 />;
}

Props

`accountId` DEPRECATED number	Due November 1st, 2022 The accountId is deprecated, use accountIds instead Sets the account ID to perform the query.
`accountIds` number[]	Sets the account IDs to perform the query.
`className` string	Appends class names to the component.
`data` object[]	Data is an array of objects where each object represents a series to be drawn. Each series comprises visualization metadata and an array of data points. `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` boolean	Expands the chart to occupy all available height.
`fullWidth` boolean	Expands the chart to occupy all available width.
`onClickTable` function	Adds a click listener that gets triggered when the user clicks over the corresponding table.
`onHoverTable` function	Adds a hover listener that gets triggered when the cursor is hovered over the corresponding table.
`query` string	NRQL query used for fetching data. The query is performed against the provided `accountIds`.
`style` object	Inline style for custom styling.

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

Examples

Basic

With multiple accounts

Fill container

With custom data

Props

DEPRECATED

number

Due November 1st, 2022

number[]

string

object[]

boolean

boolean

function

function

string

object

Usage