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
index 6794d45b4..afb79b7b8 100644
--- 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
@@ -21,9 +21,9 @@ tags:
-Now that you have a basic visualization, it's time to 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, you'll add a new chart type and a `SegmentedControl` component. You'll be able to dynamically swap between the Radar chart and the new chart right from the browser.
+Now that you have a basic visualization, it's time to 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, you'll add a new chart type and a `SegmentedControl` component. You'll be able to dynamically swap between the Radar chart and the new chart right from the browser.
-This guide builds off the Build a custom visualization for dashboards guide.
+This guide builds off the Build a custom visualization for dashboards guide.
@@ -33,7 +33,7 @@ To get started, follow the Build a cu
## Set up the visualization component state
-In this first set of steps you'll add component state to your visualization template from the previous guide referenced above.
+In this first set of steps you'll add component state to your visualization template from the previous guide referenced above.
@@ -49,7 +49,7 @@ import {
PolarAngleAxis,
PolarRadiusAxis,
} from 'recharts';
-import {
+import {
Card,
CardBody,
HeadingText,
@@ -85,10 +85,6 @@ export default class YourAwesomeVisualization extends React.Component {
),
};
- state = {
- selectedChart: CHART_TYPES.Radar
- }
-
/**
* Restructure the data for a non-time-series, facet-based NRQL query into a
* form accepted by the Recharts library's RadarChart.
@@ -207,7 +203,7 @@ const ErrorState = () => (
-From the root of the Nerdpack project you created in the previous guide, navigate to `/visualizations//index.js`. You'll continue to work in the `index.js` file for the rest of this guide.
+From the root of the Nerdpack project you created in the previous guide, navigate to `/visualizations//index.js`. You'll continue to work in the `index.js` file for the rest of this guide.
Add a chart types constant above the first line of the class and add the component state property with an initial state for `selectedChart`:
@@ -222,7 +218,7 @@ import {
PolarAngleAxis,
PolarRadiusAxis,
} from 'recharts';
-import {
+import {
Card,
CardBody,
HeadingText,
@@ -391,7 +387,7 @@ To let the consumers of your visualization decide what type of chart they want t
-Add `SegmentedControl` and `SegmentedControlItem` to the import from `nr1`.
+Add `SegmentedControl` and `SegmentedControlItem` to the import from `nr1`:
```js fileName=visualizations/your-visualization/index.js
import React from 'react';
@@ -403,7 +399,7 @@ import {
PolarAngleAxis,
PolarRadiusAxis,
} from 'recharts';
-import {
+import {
Card,
CardBody,
HeadingText,
@@ -578,7 +574,7 @@ import {
PolarAngleAxis,
PolarRadiusAxis,
} from 'recharts';
-import {
+import {
Card,
CardBody,
HeadingText,
@@ -740,7 +736,7 @@ const ErrorState = () => (
-If you run your visualization locally, your visualization should match the following image and changing the SegmentedControl should not have any effect on the visualization.
+If you run your visualization locally, your visualization should match the following image and changing the SegmentedControl should not have any effect on the visualization:
-Add a component method that updates state to your visualization class.
+Add a component method that updates state to your visualization class:
-```js fileName=visualizations/your-visualization/index.js
+```js fileName=visualizations/your-visualization/index.js
import React from 'react';
import PropTypes from 'prop-types';
import {
@@ -769,7 +765,7 @@ import {
PolarAngleAxis,
PolarRadiusAxis,
} from 'recharts';
-import {
+import {
Card,
CardBody,
HeadingText,
@@ -940,7 +936,7 @@ const ErrorState = () => (
Pass `updateSelectedChart` as the `SegmentedControl` component's onChange prop:
-```jsx fileName=visualizations/your-visualization/index.js
+```jsx fileName=visualizations/your-visualization/index.js
import React from 'react';
import PropTypes from 'prop-types';
import {
@@ -950,7 +946,7 @@ import {
PolarAngleAxis,
PolarRadiusAxis,
} from 'recharts';
-import {
+import {
Card,
CardBody,
HeadingText,
@@ -1118,7 +1114,7 @@ const ErrorState = () => (
-## Add your new chart option
+## Add your new chart option
In the next couple of steps, you'll add the Treemap chart from Recharts and get the correct values passed into it.
@@ -1132,7 +1128,7 @@ This guide uses Recharts chart components
Add `Treemap` to the import from recharts:
-```jsx fileName=visualizations/your-visualization/index.js
+```jsx fileName=visualizations/your-visualization/index.js
import React from 'react';
import PropTypes from 'prop-types';
import {
@@ -1143,7 +1139,7 @@ import {
PolarRadiusAxis,
Treemap,
} from 'recharts';
-import {
+import {
Card,
CardBody,
HeadingText,
@@ -1309,7 +1305,7 @@ const ErrorState = () => (
To learn more about the Treemap chart component, go to the Recharts Treemap example or the Recharts Treemap API docs.
-
+
@@ -1317,7 +1313,7 @@ To learn more about the Treemap chart component, go to the render the visualization in local development to see the new Treemap chart below your Radar chart. If you scroll down a bit in your visualization, it should look something like the following:
+Now render the visualization in local development to see the new Treemap chart below your Radar chart. If you scroll down a bit in your visualization, it should look something like the following:
Run your visualization locally and view it in the Custom Visualization app in New Relic. Click on "Treemap chart" in the SegmentedControl. You should see your Treemap chart render instead of the Radar chart!
+Go to the browser and try it out! Run your visualization locally and view it in the Custom Visualization app in New Relic. Click on "Treemap chart" in the SegmentedControl. You should see your Treemap chart render instead of the Radar chart: