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 accountIds={[1]} query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType" />

With multiple accounts

<FunnelChart accountIds={[1, 1067061]} query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType" />

Fill container

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

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


  return <FunnelChart 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',
      color: '#a35ebf',
      viz: 'main',
      units_data: {
        x: 'TIMESTAMP',
        y: 'BYTES',
      },
    },
    data: [
      {
        x: 1712312066891,
        y: 21400,
      },
      {
        x: 1712315666891,
        y: 12200,
      },
      {
        x: 1712319266891,
        y: 9300,
      },
      {
        x: 1712322866891,
        y: 14500,
      },
      {
        x: 1712326466891,
        y: 27500,
      },
      {
        x: 1712330066891,
        y: 24700,
      },
    ],
  },
  {
    metadata: {
      id: 'series-2',
      name: 'Serie 2',
      color: '#85c956',
      viz: 'main',
      units_data: {
        x: 'TIMESTAMP',
        y: 'BYTES',
      },
    },
    data: [
      {
        x: 1712312066891,
        y: 8800,
      },
      {
        x: 1712315666891,
        y: 1400,
      },
      {
        x: 1712319266891,
        y: 4600,
      },
      {
        x: 1712322866891,
        y: 5200,
      },
      {
        x: 1712326466891,
        y: 14100,
      },
      {
        x: 1712330066891,
        y: 19300,
      },
    ],
  },
  {
    metadata: {
      id: 'events',
      name: 'Events',
      color: 'red',
      viz: 'event',
    },
    data: [
      {
        x0: 1712315666891,
        x1: 1712319266891,
      },
      {
        x0: 1712326466891,
        x1: 1712326466891,
      },
    ],
  },
];

fullHeight

boolean

Expands the chart to occupy all available height.

fullWidth

boolean

Expands the chart to occupy all available width.

onClickFunnel

function

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

onHoverFunnel

function

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

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

string

object

Usage