SparklineTableRowCell

Renders a table row cell showing a sparkline. Sparklines can either come from a NRQL query (thus providing accountId and query), or from a predefined data passed in the chart format. In either case, all props are 1:1 compatible with the <NrqlQuery> format type CHART.

A common case to render one row per NRQL facet, is to perform the query outside of the table, then pass the result as items (returned data from a <NrqlQuery> is an array, that can be directly used as the input items of a table). Once rendering the sparkline, you need to re-wrap the data in an array, in order to build, from a series, a new entire set of data.

Usage

import { SparklineTableRowCell } from 'nr1';

Examples

Example 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>
  );
}

Example 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>;

Props

accountId

DEPRECATED

number

Due November 1st, 2022

The accountId is deprecated, use accountIds instead

Sets the account ID to perform the query.

className

string

Appends class names to the component.Should be used only for positioning and spacing purposes.

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: '#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

function

Callback fired any time the user clicks on the table cell.

function (event: React.MouseEvent 
)

query

string

NRQL query used for fetching data. The query is performed against the provided accountIds.

style

object

Inline style for custom styling.Should be used only for positioning and spacing purposes.

testId

string

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, my-nerdpack.some-element.

Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

to

shape|string

Location object or url string to link to.Linked TableRowCells are unstyled and will not show icons for external links. If the same styling as the Link component is what is desired, then use a Link instead as a child component within the cell.

shape

pathname

REQUIRED

string

search

string

hash

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

Examples

Example 1

Example 2

Props

DEPRECATED

number

Due November 1st, 2022

string

object[]

function

string

object

string

shape|string

shape

REQUIRED

string

string

string

Usage