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
ReferenceError: FunnelChart is not defined
Fill container
ReferenceError: FunnelChart is not defined
With custom data
Props
Sets the account ID to perform the query.
Appends class names to the component.
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
1const 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];
false
Expands the chart to occupy all available height.
false
Expands the chart to occupy all available width.
Adds a click listener that gets triggered when the user clicks over the corresponding funnel.
function () => undefined
Adds a hover listener that gets triggered when the cursor is hovered over the corresponding funnel.
function () => undefined
NRQL query used for fetching data. The query is performed against the
provided accountId
.
Inline style for custom styling.
Methods
FunnelChart.render
function () => undefined