FunnelChart

Creates a funnel 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 { FunnelChart } from 'nr1'

Examples

Basic

<FunnelChart
  accountId={1}
  query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType"
/>;

1
<FunnelChart
2
  accountId={1}
3
  query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType"
4
/>;

ReferenceError: FunnelChart is not defined

Fill container

<FunnelChart
  accountId={1}
  query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType"
  fullWidth
  fullHeight
/>;

1
<FunnelChart
2
  accountId={1}
3
  query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType"
4
  fullWidth
5
  fullHeight
6
/>;

ReferenceError: FunnelChart is not defined

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: 1618083192778,
          y: 21400,
        },
        {
          x: 1618086792778,
          y: 12200,
        },
        {
          x: 1618090392778,
          y: 9300,
        },
        {
          x: 1618093992778,
          y: 14500,
        },
        {
          x: 1618097592778,
          y: 27500,
        },
        {
          x: 1618101192778,
          y: 24700,
        },
      ],
    },
    {
      metadata: {
        id: 'series-2',
        name: 'Serie 2',
        color: '#85c956',
        viz: 'main',
        units_data: {
          x: 'TIMESTAMP',
          y: 'BYTES',
        },
      },
      data: [
        {
          x: 1618083192778,
          y: 8800,
        },
        {
          x: 1618086792778,
          y: 1400,
        },
        {
          x: 1618090392778,
          y: 4600,
        },
        {
          x: 1618093992778,
          y: 5200,
        },
        {
          x: 1618097592778,
          y: 14100,
        },
        {
          x: 1618101192778,
          y: 19300,
        },
      ],
    },
    {
      metadata: {
        id: 'events',
        name: 'Events',
        color: 'red',
        viz: 'event',
      },
      data: [
        {
          x0: 1618086792778,
          x1: 1618090392778,
        },
        {
          x0: 1618097592778,
          x1: 1618097592778,
        },
      ],
    },
  ];

  return <FunnelChart data={data} fullWidth />;
}

1
function render() {
2
  const data = [
3
    {
4
      metadata: {
5
        id: 'series-1',
6
        name: 'Serie 1',
7
        color: '#a35ebf',
8
        viz: 'main',
9
        units_data: {
10
          x: 'TIMESTAMP',
11
          y: 'BYTES',
12
        },
13
      },
14
      data: [
15
        {
16
          x: 1618083192778,
17
          y: 21400,
18
        },
19
        {
20
          x: 1618086792778,
21
          y: 12200,
22
        },
23
        {
24
          x: 1618090392778,
25
          y: 9300,
26
        },
27
        {
28
          x: 1618093992778,
29
          y: 14500,
30
        },
31
        {
32
          x: 1618097592778,
33
          y: 27500,
34
        },
35
        {
36
          x: 1618101192778,
37
          y: 24700,
38
        },
39
      ],
40
    },
41
    {
42
      metadata: {
43
        id: 'series-2',
44
        name: 'Serie 2',
45
        color: '#85c956',
46
        viz: 'main',
47
        units_data: {
48
          x: 'TIMESTAMP',
49
          y: 'BYTES',
50
        },
51
      },
52
      data: [
53
        {
54
          x: 1618083192778,
55
          y: 8800,
56
        },
57
        {
58
          x: 1618086792778,
59
          y: 1400,
60
        },
61
        {
62
          x: 1618090392778,
63
          y: 4600,
64
        },
65
        {
66
          x: 1618093992778,
67
          y: 5200,
68
        },
69
        {
70
          x: 1618097592778,
71
          y: 14100,
72
        },
73
        {
74
          x: 1618101192778,
75
          y: 19300,
76
        },
77
      ],
78
    },
79
    {
80
      metadata: {
81
        id: 'events',
82
        name: 'Events',
83
        color: 'red',
84
        viz: 'event',
85
      },
86
      data: [
87
        {
88
          x0: 1618086792778,
89
          x1: 1618090392778,
90
        },
91
        {
92
          x0: 1618097592778,
93
          x1: 1618097592778,
94
        },
95
      ],
96
    },
97
  ];
98
99
  return <FunnelChart data={data} fullWidth />;
100
}

Props

accountIdnumber

Sets the account ID 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
      color: '#a35ebf',
7
      viz: 'main',
8
      units_data: {
9
        x: 'TIMESTAMP',
10
        y: 'BYTES',
11
      },
12
    },
13
    data: [
14
      {
15
        x: 1618083192778,
16
        y: 21400,
17
      },
18
      {
19
        x: 1618086792778,
20
        y: 12200,
21
      },
22
      {
23
        x: 1618090392778,
24
        y: 9300,
25
      },
26
      {
27
        x: 1618093992778,
28
        y: 14500,
29
      },
30
      {
31
        x: 1618097592778,
32
        y: 27500,
33
      },
34
      {
35
        x: 1618101192778,
36
        y: 24700,
37
      },
38
    ],
39
  },
40
  {
41
    metadata: {
42
      id: 'series-2',
43
      name: 'Serie 2',
44
      color: '#85c956',
45
      viz: 'main',
46
      units_data: {
47
        x: 'TIMESTAMP',
48
        y: 'BYTES',
49
      },
50
    },
51
    data: [
52
      {
53
        x: 1618083192778,
54
        y: 8800,
55
      },
56
      {
57
        x: 1618086792778,
58
        y: 1400,
59
      },
60
      {
61
        x: 1618090392778,
62
        y: 4600,
63
      },
64
      {
65
        x: 1618093992778,
66
        y: 5200,
67
      },
68
      {
69
        x: 1618097592778,
70
        y: 14100,
71
      },
72
      {
73
        x: 1618101192778,
74
        y: 19300,
75
      },
76
    ],
77
  },
78
  {
79
    metadata: {
80
      id: 'events',
81
      name: 'Events',
82
      color: 'red',
83
      viz: 'event',
84
    },
85
    data: [
86
      {
87
        x0: 1618086792778,
88
        x1: 1618090392778,
89
      },
90
      {
91
        x0: 1618097592778,
92
        x1: 1618097592778,
93
      },
94
    ],
95
  },
96
];

fullHeightboolean

DEFAULT

false

Expands the chart to occupy all available height.

fullWidthboolean

DEFAULT

false

Expands the chart to occupy all available width.

onClickFunnelfunction

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

function () => undefined

onHoverFunnelfunction

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

function () => undefined

querystring

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

styleobject

Inline style for custom styling.

Methods

`FunnelChart.render`

function () => undefined