Skip to content

Commit

Permalink
Showing 2 changed files with 396 additions and 0 deletions.
2 changes: 2 additions & 0 deletions src/data/nav.yml
Original file line number Diff line number Diff line change
@@ -68,6 +68,8 @@
url: https://opensource.newrelic.com/nerdpacks/
- title: Build custom visualizations for dashboards
url: '/build-apps/build-visualization'
- title: Customize your visualization with New Relic SDK components
url: '/build-apps/customize-visualization-with-New-Relic-components'
- title: Try our APIs
icon: nr-share
url: '/try-our-apis'
Original file line number Diff line number Diff line change
@@ -0,0 +1,394 @@
---
path: '/build-apps/customize-visualization-with-New-Relic-components'
duration: '25 min'
title: 'Custom visualizations and the New Relic One SDK'
template: 'GuideTemplate'
description: 'Customize your visualization'
resources:
- title: New Relic One VSCode extension
url: https://marketplace.visualstudio.com/items?itemName=new-relic.nr1
- title: 'Build on New Relic One'
url: https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-build-your-own-custom-new-relic-one-application
- title: New Relic VSCode extension pack
url: https://marketplace.visualstudio.com/items?itemName=new-relic.new-relic-extension-pack
tags:
- nr1 cli
- NR One Catalog
- Subscribe visualizations
---

<Intro>

Now that you have a basic visualization, let's customize it! You can use all of the <Link to="explore-docs/intro-to-sdk">New Relic One SDK</Link> components in a Custom Visualization the same way you can use them in a Nerdlet. In this guide, we will add a new chart type and a `SegmentedControl` component. You will be able to dynamically swap between the Radar chart and the new Treemap chart we will add in this guide right in the browser.

This guide builds off the <Link to="/build-apps/build-visualization">Build a custom visualization for dashboards</Link> guide.

</Intro>

## Before you begin

To get started, follow the <Link to="/build-apps/build-visualization">Build a custom visualization for dashboards</Link> guide to get setup with your <Link to="https://newrelic.com/signup?utm_source=developer-site">New Relic</Link> account, install the <Link to="/explore-docs/nr1-cli">New Relic One CLI</Link>, and create your first visualization. We will use the visualization you create in that guide as a starting point for this guide.

## Setup the visualization component state

In this first set of steps you will add component state to your visualization template form the previous guide referrenced above.

<Steps>

<Step>

From the root of the Nerdpack project you created in the previous guide, navigate to `/visualizations/<your-visualization>/index.js`. We will continue to work in the `index.js` file for the rest of this lesson. Add a chart types constant above the first line of the class.


```js
const CHART_TYPES = {
'Radar': 'radar',
'Treemap': 'treemap'
}
```

</Step>

<Step>

In the class component, just after the `static propTypes` block, add the component state property and set initial state for the `selectedChart`.

```js
state = {
selectedChart: CHART_TYPES.Radar
}
```

</Step>

After these two steps, the beginning of you `index.js` file should look like this:

```jsx

import React from 'react';
...

const CHART_TYPES = {
'Radar': 'radar',
'Treemap': 'treemap'
}

export default class MyAwesomeVisualization extends React.Component {

static propTypes = {
...
}

state = {
selectedChart: CHART_TYPES.Radar
}
...
}
```

</Steps>

## Add `SegmentedControl` and `SegmentedControlItem` components

To let our visualization consumer decide what type of chart they want to display, we are going to use `SegmentedControl` and `SegmentedControlItem` for switching between our chart types. To learn more about the components available from New Relic, go to our <Link to="explore-docs/intro-to-sdk">Intro to New Relic One SDK</Link>.

<Steps>
<Step>

### Import components

Add `SegmentedControl` and `SegmentedControlItem` to the import from `nr1` at the top of our index.js.

```js
import {
Card,
CardBody,
HeadingText,
NrqlQuery,
SegmentedControl,
SegmentedControlItem,
Spacing,
Spinner,
AutoSizer
} from 'nr1';
```

</Step>

<Step>

### Use the newly imported components

In the `render` function, wrap `RadarChart` in `<React.Fragment> ... </React.Fragment>`. Then add the `SegmentedControl` and `SegmentedControlItem` above the `RadarChart` and set the value and label.

```jsx
<SegmentedControl onChange={(event, value) => console.log(value)}>
<SegmentedControlItem value={CHART_TYPES.Radar} label="Radar chart" />
<SegmentedControlItem value={CHART_TYPES.Treemap} label="Treemap chart" />
</SegmentedControl>
```

</Step>

Now the final return in your render block should look like this:

```jsx
return (
<AutoSizer>
{({width, height}) => (
<NrqlQuery
query={nrqlQueries[0].query}
accountId={parseInt(nrqlQueries[0].accountId)}
pollInterval={NrqlQuery.AUTO_POLL_INTERVAL}
>
{({data, loading, error}) => {
if (loading) {
return <Spinner />;
}
if (error) {
return <ErrorState />;
}
const transformedData = this.transformData(data);

return (
<React.Fragment>
<Spacing type={[Spacing.TYPE.EXTRA_LARGE]}>
<SegmentedControl onChange={(event, value) => console.log(value)}>
<SegmentedControlItem value={CHART_TYPES.Radar} label="Radar chart" />
<SegmentedControlItem value={CHART_TYPES.Treemap} label="Treemap chart" />
</SegmentedControl>
</Spacing>
<RadarChart
width={width}
height={height}
data={transformedData}
>
<PolarGrid />
<PolarAngleAxis dataKey="name" />
<PolarRadiusAxis tickFormatter={this.formatTick} />
<Radar
dataKey="value"
stroke={stroke || '#51C9B7'}
fill={fill || '#51C9B7'}
fillOpacity={0.6}
/>
</RadarChart>
</React.Fragment>
);
}}
</NrqlQuery>
)}
</AutoSizer>
);
```

</Steps>

## Connect component state with the new UI controls

In the next steps, we are going to add a function to update state and connect that with the `SegmentedControl` component.

<Steps>

<Step>

Add a component method that updates state to your visualization class.

```js
updateSelectedChart = (evt, value) => {
this.setState({ selectedChart: value })
}
```

</Step>

<Step>

Use the `updateSelectedChart` method in `SegmentedControl` onChange prop.

```jsx
<SegmentedControl onChange={this.updateSelectedChart}>
```

</Step>

</Steps>

<Steps>

## Add our new chart option

In the next couple of steps, we will add the <Link to="https://recharts.org/en-US/api/Treemap">Treemap chart from Recharts</Link> and get the correct values passed into it.

<Step>

Add `Treemap` to the import from recharts.

```js
import {
Radar,
RadarChart,
PolarGrid,
PolarAngleAxis,
PolarRadiusAxis,
Treemap
} from 'recharts';
```

</Step>

To learn more about `Treemap` chart, go to the <Link to="https://recharts.org/en-US/examples/SimpleTreemap">Recharts Treemap example</Link> or the <Link to="https://recharts.org/en-US/api/Treemap">Recharts Treemap API docs</Link>.

<Step>

Under the `RadarChart` closing tag in render, add the `Treemap` component and the neccessary props.

```jsx
<Treemap
width={width}
height={height}
data={transformedData}
dataKey="value"
ratio={4 / 3}
stroke="#fff"
fill="#8884d8"
/>
```

</Step>

Now <Link to="/build-apps/build-visualization#render-the-visualization-in-local-development">Render the visualziation in local development</Link> to see the new Treemap chart below your Radar chart.

</Steps>

<Steps>

## Use component state to switch

In the final step, we will use our `selectedChart` state value to determine which chart to show, the Radar chart or the Treemap chart.

<Step>

Destructure `selectedChart` from state near the top of the `render()` function.

```js
const { selectedChart } = this.state;
```

</Step>

<Step>

Wrap the `RadarChart` and `Treemap` in a ternary using the `selectedChart` state.

```jsx
{
selectedChart === CHART_TYPES.Radar ?
<RadarChart> ... <RadarChart>
:
<Treemap />
}
```

</Step>

Your full render function should look like this:

```jsx
render() {
const { nrqlQueries, stroke, fill } = this.props;
const { selectedChart } = this.state;

const nrqlQueryPropsAvailable =
nrqlQueries &&
nrqlQueries[0] &&
nrqlQueries[0].accountId &&
nrqlQueries[0].query;

if (!nrqlQueryPropsAvailable) {
return <EmptyState />;
}

return (
<AutoSizer>
{({ width, height }) => (
<NrqlQuery
query={nrqlQueries[0].query}
accountId={parseInt(nrqlQueries[0].accountId)}
pollInterval={NrqlQuery.AUTO_POLL_INTERVAL}
>
{({ data, loading, error }) => {
if (loading) {
return <Spinner />;
}

if (error) {
return <ErrorState />;
}

const transformedData = this.transformData(data);

return (
<React.Fragment>
<Spacing type={[Spacing.TYPE.EXTRA_LARGE]}>
<SegmentedControl onChange={this.updateSelectedChart}>
<SegmentedControlItem value={CHART_TYPES.Radar} label="Radar chart" />
<SegmentedControlItem value={CHART_TYPES.Treemap} label="Treemap chart" />
</SegmentedControl>
</Spacing>
{ selectedChart === CHART_TYPES.Radar ?
<RadarChart
width={width}
height={height}
data={transformedData}
>
<PolarGrid />
<PolarAngleAxis dataKey="name" />
<PolarRadiusAxis tickFormatter={this.formatTick} />
<Radar
dataKey="value"
stroke={stroke || '#51C9B7'}
fill={fill || '#51C9B7'}
fillOpacity={0.6}
/>
</RadarChart>
:
<Treemap
width={width}
height={height}
data={transformedData}
dataKey="value"
ratio={4 / 3}
stroke="#fff"
fill="#8884d8"
/>
}
</React.Fragment>
);
}}
</NrqlQuery>
)}
</AutoSizer>
);
}
```

Go to the browser and try it out! View your visualization in the Custom Visualization app in New Relic, and click "Treemap chart" in the SegmentedControl. You should see your Treemap chart render instead of the Radar chart!

</Steps>


## Summary

Congratulations on completing the steps in this example! You've learned how to:

- Customize your visualization using New Relic One SDK components
- Add a new chart type to your visualization
- Create a user interaction in your visualization

## Additional resources

- New Relic Quick Tips video: [Dashboards and Custom Visualizations](https://www.youtube.com/watch?v=_F61mxtKfGA) (6 minutes)
- New Relic NerdBytes video: [Configuring custom visualizations for dashboards](https://www.youtube.com/watch?v=sFpG_iG7Xa8) (7 minutes)
- New Relic Nerdlog live stream: [Custom Data Visualizations on New Relic](https://www.youtube.com/watch?v=HuR0EdHGz24) (30 minutes)
- New Relic helpful components: <Link to="explore-docs/intro-to-sdk">Intro to New Relic One SDK Component library</Link>

0 comments on commit a37de0c

Please sign in to comment.