HeatmapChart

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"
/>;1
<HeatmapChart
2
  accountIds={[1]}
3
  query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago FACET countryCode"
4
/>;

With multiple accounts

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

Fill container

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

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 />;
}1
function render() {
2
  const data = [
3
    {
4
      metadata: {
5
        id: 'series-1',
6
        name: 'Serie 1',
7
        viz: 'main',
8
      },
9
      data: [
10
        {
11
          x0: 0,
12
          x1: 1,
13
          y: 221,
14
        },
15
        {
16
          x0: 1,
17
          x1: 2,
18
          y: 581,
19
        },
20
        {
21
          x0: 2,
22
          x1: 3,
23
          y: 1330,
24
        },
25
        {
26
          x0: 3,
27
          x1: 4,
28
          y: 2220,
29
        },
30
        {
31
          x0: 4,
32
          x1: 5,
33
          y: 1810,
34
        },
35
        {
36
          x0: 5,
37
          x1: 6,
38
          y: 1290,
39
        },
40
        {
41
          x0: 6,
42
          x1: 7,
43
          y: 895,
44
        },
45
        {
46
          x0: 7,
47
          x1: 8,
48
          y: 755,
49
        },
50
        {
51
          x0: 8,
52
          x1: 9,
53
          y: 460,
54
        },
55
        {
56
          x0: 9,
57
          x1: 310,
58
          y: 414,
59
        },
60
      ],
61
    },
62
    {
63
      metadata: {
64
        id: 'series-2',
65
        name: 'Serie 2',
66
        viz: 'main',
67
      },
68
      data: [
69
        {
70
          x0: 0,
71
          x1: 1,
72
          y: 119,
73
        },
74
        {
75
          x0: 1,
76
          x1: 2,
77
          y: 1525,
78
        },
79
        {
80
          x0: 2,
81
          x1: 3,
82
          y: 1860,
83
        },
84
        {
85
          x0: 3,
86
          x1: 4,
87
          y: 2070,
88
        },
89
        {
90
          x0: 4,
91
          x1: 5,
92
          y: 1280,
93
        },
94
        {
95
          x0: 5,
96
          x1: 6,
97
          y: 1320,
98
        },
99
        {
100
          x0: 6,
101
          x1: 7,
102
          y: 888,
103
        },
104
        {
105
          x0: 7,
106
          x1: 8,
107
          y: 729,
108
        },
109
        {
110
          x0: 8,
111
          x1: 9,
112
          y: 432,
113
        },
114
        {
115
          x0: 9,
116
          x1: 310,
117
          y: 401,
118
        },
119
      ],
120
    },
121
  ];
122

123
  return <HeatmapChart data={data} fullWidth />;
124
}

Props

accountIddeprecatednumber

Due November 1st, 2022

The accountId is deprecated, use accountIds instead

Sets the account ID to perform the query.

accountIdsnumber[]

Sets the account IDs to perform the query.

classNamestring

Appends class names to the component.

dataobject[]

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.

Example 1

1
const data = [
2
  {
3
    metadata: {
4
      id: 'series-1',
5
      name: 'Serie 1',
6
      viz: 'main',
7
    },
8
    data: [
9
      {
10
        x0: 0,
11
        x1: 1,
12
        y: 221,
13
      },
14
      {
15
        x0: 1,
16
        x1: 2,
17
        y: 581,
18
      },
19
      {
20
        x0: 2,
21
        x1: 3,
22
        y: 1330,
23
      },
24
      {
25
        x0: 3,
26
        x1: 4,
27
        y: 2220,
28
      },
29
      {
30
        x0: 4,
31
        x1: 5,
32
        y: 1810,
33
      },
34
      {
35
        x0: 5,
36
        x1: 6,
37
        y: 1290,
38
      },
39
      {
40
        x0: 6,
41
        x1: 7,
42
        y: 895,
43
      },
44
      {
45
        x0: 7,
46
        x1: 8,
47
        y: 755,
48
      },
49
      {
50
        x0: 8,
51
        x1: 9,
52
        y: 460,
53
      },
54
      {
55
        x0: 9,
56
        x1: 310,
57
        y: 414,
58
      },
59
    ],
60
  },
61
  {
62
    metadata: {
63
      id: 'series-2',
64
      name: 'Serie 2',
65
      viz: 'main',
66
    },
67
    data: [
68
      {
69
        x0: 0,
70
        x1: 1,
71
        y: 119,
72
      },
73
      {
74
        x0: 1,
75
        x1: 2,
76
        y: 1525,
77
      },
78
      {
79
        x0: 2,
80
        x1: 3,
81
        y: 1860,
82
      },
83
      {
84
        x0: 3,
85
        x1: 4,
86
        y: 2070,
87
      },
88
      {
89
        x0: 4,
90
        x1: 5,
91
        y: 1280,
92
      },
93
      {
94
        x0: 5,
95
        x1: 6,
96
        y: 1320,
97
      },
98
      {
99
        x0: 6,
100
        x1: 7,
101
        y: 888,
102
      },
103
      {
104
        x0: 7,
105
        x1: 8,
106
        y: 729,
107
      },
108
      {
109
        x0: 8,
110
        x1: 9,
111
        y: 432,
112
      },
113
      {
114
        x0: 9,
115
        x1: 310,
116
        y: 401,
117
      },
118
    ],
119
  },
120
];

fullHeightboolean

DEFAULT

false

Expands the chart to occupy all available height.

fullWidthboolean

DEFAULT

false

Expands the chart to occupy all available width.

onClickfunction

onClickHeatmapfunction

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

onHoverHeatmapfunction

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

querystring

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

styleobject

Inline style for custom styling.