From a37de0c164e2bd46130d1b22dd8909fb24f58038 Mon Sep 17 00:00:00 2001 From: Jewels Nocera Date: Fri, 19 Mar 2021 22:08:59 -0700 Subject: [PATCH] feat(CustomViz): Adds a new guide for custom visualizations --- src/data/nav.yml | 2 + ...isualization-with-New-Relic-components.mdx | 394 ++++++++++++++++++ 2 files changed, 396 insertions(+) create mode 100644 src/markdown-pages/build-apps/customize-visualization-with-New-Relic-components.mdx diff --git a/src/data/nav.yml b/src/data/nav.yml index dd4c36158..6b8d6edc2 100644 --- a/src/data/nav.yml +++ b/src/data/nav.yml @@ -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' diff --git a/src/markdown-pages/build-apps/customize-visualization-with-New-Relic-components.mdx b/src/markdown-pages/build-apps/customize-visualization-with-New-Relic-components.mdx new file mode 100644 index 000000000..e068be4e5 --- /dev/null +++ b/src/markdown-pages/build-apps/customize-visualization-with-New-Relic-components.mdx @@ -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 +--- + + + +Now that you have a basic visualization, let's customize it! You can use all of the New Relic One SDK 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 Build a custom visualization for dashboards guide. + + + +## Before you begin + +To get started, follow the Build a custom visualization for dashboards guide to get setup with your New Relic account, install the New Relic One CLI, 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. + + + + + +From the root of the Nerdpack project you created in the previous guide, navigate to `/visualizations//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' +} +``` + + + + + +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 + } +``` + + + +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 + } + ... +} +``` + + + +## 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 Intro to New Relic One SDK. + + + + +### 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'; +``` + + + + + +### Use the newly imported components + +In the `render` function, wrap `RadarChart` in ` ... `. Then add the `SegmentedControl` and `SegmentedControlItem` above the `RadarChart` and set the value and label. + +```jsx + console.log(value)}> + + + +``` + + + +Now the final return in your render block should look like this: + +```jsx +return ( + + {({width, height}) => ( + + {({data, loading, error}) => { + if (loading) { + return ; + } + if (error) { + return ; + } + const transformedData = this.transformData(data); + + return ( + + + console.log(value)}> + + + + + + + + + + + + ); + }} + + )} + +); +``` + + + +## 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. + + + + + +Add a component method that updates state to your visualization class. + +```js + updateSelectedChart = (evt, value) => { + this.setState({ selectedChart: value }) + } +``` + + + + + +Use the `updateSelectedChart` method in `SegmentedControl` onChange prop. + +```jsx + +``` + + + + + + + +## Add our new chart option + +In the next couple of steps, we will add the Treemap chart from Recharts and get the correct values passed into it. + + + +Add `Treemap` to the import from recharts. + +```js +import { + Radar, + RadarChart, + PolarGrid, + PolarAngleAxis, + PolarRadiusAxis, + Treemap +} from 'recharts'; +``` + + + +To learn more about `Treemap` chart, go to the Recharts Treemap example or the Recharts Treemap API docs. + + + +Under the `RadarChart` closing tag in render, add the `Treemap` component and the neccessary props. + +```jsx + +``` + + + +Now Render the visualziation in local development to see the new Treemap chart below your Radar chart. + + + + + +## 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. + + + +Destructure `selectedChart` from state near the top of the `render()` function. + +```js +const { selectedChart } = this.state; +``` + + + + + +Wrap the `RadarChart` and `Treemap` in a ternary using the `selectedChart` state. + +```jsx +{ + selectedChart === CHART_TYPES.Radar ? + ... + : + +} +``` + + + +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 ; + } + + return ( + + {({ width, height }) => ( + + {({ data, loading, error }) => { + if (loading) { + return ; + } + + if (error) { + return ; + } + + const transformedData = this.transformData(data); + + return ( + + + + + + + + { selectedChart === CHART_TYPES.Radar ? + + + + + + + : + + } + + ); + }} + + )} + + ); +} +``` + +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! + + + + +## 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: Intro to New Relic One SDK Component library