HeatmapChart

Creates a heatmap 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 { HeatmapChart } from 'nr1';

Examples

Basic

<HeatmapChart
  accountIds={[1]}
  query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago FACET countryCode"
/>;

With multiple accounts

<HeatmapChart
  accountIds={[1, 1067061]}
  query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago FACET countryCode"
/>;

Fill container

<HeatmapChart
  accountIds={[1]}
  query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago FACET countryCode"
  fullWidth
  fullHeight
/>;

With custom data

function render() {
  const data = [
    {
      metadata: {
        id: 'series-1',
        name: 'Serie 1',
        viz: 'main',
      },
      data: [
        {
          x0: 0,
          x1: 1,
          y: 221,
        },
        {
          x0: 1,
          x1: 2,
          y: 581,
        },
        {
          x0: 2,
          x1: 3,
          y: 1330,
        },
        {
          x0: 3,
          x1: 4,
          y: 2220,
        },
        {
          x0: 4,
          x1: 5,
          y: 1810,
        },
        {
          x0: 5,
          x1: 6,
          y: 1290,
        },
        {
          x0: 6,
          x1: 7,
          y: 895,
        },
        {
          x0: 7,
          x1: 8,
          y: 755,
        },
        {
          x0: 8,
          x1: 9,
          y: 460,
        },
        {
          x0: 9,
          x1: 310,
          y: 414,
        },
      ],
    },
    {
      metadata: {
        id: 'series-2',
        name: 'Serie 2',
        viz: 'main',
      },
      data: [
        {
          x0: 0,
          x1: 1,
          y: 119,
        },
        {
          x0: 1,
          x1: 2,
          y: 1525,
        },
        {
          x0: 2,
          x1: 3,
          y: 1860,
        },
        {
          x0: 3,
          x1: 4,
          y: 2070,
        },
        {
          x0: 4,
          x1: 5,
          y: 1280,
        },
        {
          x0: 5,
          x1: 6,
          y: 1320,
        },
        {
          x0: 6,
          x1: 7,
          y: 888,
        },
        {
          x0: 7,
          x1: 8,
          y: 729,
        },
        {
          x0: 8,
          x1: 9,
          y: 432,
        },
        {
          x0: 9,
          x1: 310,
          y: 401,
        },
      ],
    },
  ];

  return <HeatmapChart 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', viz: 'main', }, data: [ { x0: 0, x1: 1, y: 221, }, { x0: 1, x1: 2, y: 581, }, { x0: 2, x1: 3, y: 1330, }, { x0: 3, x1: 4, y: 2220, }, { x0: 4, x1: 5, y: 1810, }, { x0: 5, x1: 6, y: 1290, }, { x0: 6, x1: 7, y: 895, }, { x0: 7, x1: 8, y: 755, }, { x0: 8, x1: 9, y: 460, }, { x0: 9, x1: 310, y: 414, }, ], }, { metadata: { id: 'series-2', name: 'Serie 2', viz: 'main', }, data: [ { x0: 0, x1: 1, y: 119, }, { x0: 1, x1: 2, y: 1525, }, { x0: 2, x1: 3, y: 1860, }, { x0: 3, x1: 4, y: 2070, }, { x0: 4, x1: 5, y: 1280, }, { x0: 5, x1: 6, y: 1320, }, { x0: 6, x1: 7, y: 888, }, { x0: 7, x1: 8, y: 729, }, { x0: 8, x1: 9, y: 432, }, { x0: 9, x1: 310, y: 401, }, ], }, ];
`fullHeight` boolean	Expands the chart to occupy all available height.
`fullWidth` boolean	Expands the chart to occupy all available width.
`onClick` function
`onClickHeatmap` function	Adds a click listener that gets triggered when the user clicks over the corresponding heatmap.
`onHoverHeatmap` function	Adds a hover listener that gets triggered when the cursor is hovered over the corresponding heatmap.
`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

string

object

Usage