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