-
Notifications
You must be signed in to change notification settings - Fork 114
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(CustomViz): Adds a new guide for custom visualizations
- v1.97.5
- v1.97.4
- v1.97.3
- v1.97.2
- v1.97.1
- v1.97.0
- v1.96.6
- v1.96.5
- v1.96.4
- v1.96.3
- v1.96.2
- v1.96.1
- v1.96.0
- v1.95.2
- v1.95.1
- v1.95.0
- v1.94.0
- v1.93.3
- v1.93.2
- v1.93.1
- v1.93.0
- v1.92.3
- v1.92.2
- v1.92.1
- v1.92.0
- v1.91.2
- v1.91.1
- v1.91.0
- v1.90.0
- v1.89.3
- v1.89.2
- v1.89.1
- v1.89.0
- v1.88.5
- v1.88.4
- v1.88.3
- v1.88.2
- v1.88.1
- v1.88.0
- v1.87.2
- v1.87.1
- v1.87.0
- v1.86.2
- v1.86.1
- v1.86.0
- v1.85.0
- v1.84.1
- v1.84.0
- v1.83.0
- v1.82.3
- v1.82.2
- v1.82.1
- v1.82.0
- v1.81.3
- v1.81.2
- v1.81.1
- v1.81.0
- v1.80.0
- v1.79.0
- v1.78.0
- v1.77.0
- v1.76.3
- v1.76.2
- v1.76.1
- v1.76.0
- v1.75.0
- v1.74.0
- v1.73.0
- v1.72.1
- v1.72.0
- v1.71.2
- v1.71.1
- v1.71.0
- v1.70.0
- v1.69.2
- v1.69.1
- v1.69.0
- v1.68.3
- v1.68.2
- v1.68.1
- v1.68.0
- v1.67.5
- v1.67.4
- v1.67.3
- v1.67.2
- v1.67.1
- v1.67.0
- v1.66.1
- v1.66.0
- v1.65.0
- v1.64.0
- v1.63.0
- v1.62.0
- v1.61.0
- v1.60.0
- v1.59.2
- v1.59.1
- v1.59.0
- v1.58.0
- v1.57.2
- v1.57.1
- v1.57.0
- v1.56.0
- v1.55.0
- v1.54.0
- v1.53.1
- v1.53.0
- v1.52.3
- v1.52.2
- v1.52.1
- v1.52.0
- v1.51.0
- v1.50.2
- v1.50.1
- v1.50.0
- v1.49.0
- v1.48.1
- v1.48.0
- v1.47.3
- v1.47.2
- v1.47.1
- v1.47.0
- v1.46.0
- v1.45.0
- v1.44.3
- v1.44.2
- v1.44.1
- v1.44.0
- v1.43.0
- v1.42.3
- v1.42.2
- v1.42.1
- v1.42.0
- v1.41.0
- v1.40.2
- v1.40.1
- v1.40.0
- v1.39.0
- v1.38.0
- v1.37.0
- v1.36.0
1 parent
a7ff4f9
commit a37de0c
Showing
2 changed files
with
396 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
394 changes: 394 additions & 0 deletions
394
...markdown-pages/build-apps/customize-visualization-with-New-Relic-components.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |