AreaChart

Creates a area 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 { AreaChart } from 'nr1'

Examples

Basic

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

With multiple accounts

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

Fill container

<AreaChart
  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: '#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 />;
}

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

boolean

Expands the chart to occupy all available height.

fullWidth

boolean

Expands the chart to occupy all available width.

onClick

function

onClickArea

function

Adds a click listener that gets triggered when the user clicks over the corresponding area.

onClickEvent

function

Adds a click listener that gets triggered when the user clicks over the corresponding event.

onClickLine

function

Adds a click listener that gets triggered when the user clicks over the corresponding line.

onHoverArea

function

Adds a hover listener that gets triggered when the cursor is hovered over the corresponding area.

onHoverEvent

function

Adds a hover listener that gets triggered when the cursor is hovered over the corresponding event.

onHoverLine

function

Adds a hover listener that gets triggered when the cursor is hovered over the corresponding line.

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

function

function

function

function

function

string

object

Usage