PieChart

Creates a pie 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 { PieChart } from 'nr1';

Examples

Basic

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

With multiple accounts

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

Fill container

<PieChart
  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: {
          y: 'BYTES',
        },
      },
      data: [{ y: 128 }],
    },
    {
      metadata: {
        id: 'series-2',
        name: 'Serie 2',
        color: '#85c956',
        viz: 'main',
        units_data: {
          y: 'BYTES',
        },
      },
      data: [{ y: 256 }],
    },
    {
      metadata: {
        id: 'series-3',
        name: 'Serie 3',
        color: '#f86e40',
        viz: 'main',
        units_data: {
          y: 'BYTES',
        },
      },
      data: [{ y: 300 }],
    },
    {
      metadata: {
        id: 'series-4',
        name: 'Serie 4',
        color: '#c21684',
        viz: 'main',
        units_data: {
          y: 'BYTES',
        },
      },
      data: [{ y: 450 }],
    },
    {
      metadata: {
        id: 'series-5',
        name: 'Serie 5',
        color: '#51c9b7',
        viz: 'main',
        units_data: {
          y: 'BYTES',
        },
      },
      data: [{ y: 170 }],
    },
    {
      metadata: {
        id: 'series-6',
        name: 'Serie 6',
        color: '#48d2f0',
        viz: 'main',
        units_data: {
          y: 'BYTES',
        },
      },
      data: [{ y: 200 }],
    },
  ];

  return <PieChart 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: { y: 'BYTES', }, }, data: [{ y: 128 }], }, { metadata: { id: 'series-2', name: 'Serie 2', color: '#85c956', viz: 'main', units_data: { y: 'BYTES', }, }, data: [{ y: 256 }], }, { metadata: { id: 'series-3', name: 'Serie 3', color: '#f86e40', viz: 'main', units_data: { y: 'BYTES', }, }, data: [{ y: 300 }], }, { metadata: { id: 'series-4', name: 'Serie 4', color: '#c21684', viz: 'main', units_data: { y: 'BYTES', }, }, data: [{ y: 450 }], }, { metadata: { id: 'series-5', name: 'Serie 5', color: '#51c9b7', viz: 'main', units_data: { y: 'BYTES', }, }, data: [{ y: 170 }], }, { metadata: { id: 'series-6', name: 'Serie 6', color: '#48d2f0', viz: 'main', units_data: { y: 'BYTES', }, }, data: [{ y: 200 }], }, ];
`fullHeight` boolean	Expands the chart to occupy all available height.
`fullWidth` boolean	Expands the chart to occupy all available width.
`onClickPie` function	Adds a click listener that gets triggered when the user clicks over the corresponding pie.
`onHoverPie` function	Adds a hover listener that gets triggered when the cursor is hovered over the corresponding pie.
`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