Skip to content

Commit

Permalink
chore: Incorporate feedback, update to use Custom Visualizations naming
Browse files Browse the repository at this point in the history
  • Loading branch information
timglaser committed Feb 19, 2021
1 parent 33e0afc commit d5065a9
Showing 1 changed file with 17 additions and 16 deletions.
33 changes: 17 additions & 16 deletions src/markdown-pages/build-apps/build-visualization.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ path: '/build-apps/build-visualization'
duration: '15 min'
title: 'Build a custom visualization for dashboards'
template: 'GuideTemplate'
description: 'Build and publish a visualization'
description: 'Create custom data views'
resources:
- title: New Relic One VSCode extension
url: https://marketplace.visualstudio.com/items?itemName=new-relic.nr1
Expand All @@ -19,7 +19,7 @@ tags:

<Intro>

You can build your own visualizations for New Relic One dashboards. This allows you and your organization to query any data sources and display them on your dashboards. In this guide, you'll learn to generate a visualization boilerplate and run it locally in New Relic One's Visualization Explorer where you can quickly test and iterate before publishing.
Building your own visualizations for New Relic dashboards enables you and your organization to query data from any source and display it on your dashboard. In this guide, you'll learn how to use the CLI to generate a visualization file structure, run the visualization locally in New Relic One's Visualization Explorer where you can quickly test and iterate, and deploy the visualization for you and others to use on dashboards.

</Intro>

Expand Down Expand Up @@ -52,29 +52,30 @@ nr1 update

Start with a new Nerdpack. If you just installed the New Relic One CLI, then you have a new Nerdpack project directory (called something like, `my-awesome-nerdpack`). If you need to create one, run `nr1 create` and select the `nerdpack` option.

```bash
nr1 create --type visualization --name my-awesome-nerdpack
```

</Step>

<Step>

Navigate to the root of your Nerdpack project, and then run the `create` command like this:
Navigate to the root of your Nerdpack project, and then run the `create` command.

```bash
nr1 create --type visualization
cd my-awesome-nerdpack
nr1 create --type visualization --name my-awesome-visualization
```

As a result, you have a new visualization directory matching the name you gave your visualization. It is located in the `visualizations` directory in the root of your nerdpack project. <img src="../../images/build-an-app/visualization-boilerplate-files.png" alt="Visualization files generated by CLI" />

TODO: Point to reference(s) explaining nr1.json for visualizations.

TODO: Point to reference(s) explaining visualization props and guidance on system/dashboard interactions like the time picker.

</Step>

</Steps>

## Render the visualization in local development

Now you run the generated visualization locally, and view it in the Visualization Explorer, where you can quickly test changes to your code.
Now you run the generated visualization locally, and view it in Custom Visualizations, where you can quickly test changes to your code.

<Steps>
<Step>
Expand All @@ -95,25 +96,25 @@ In a browser, open [https://one.newrelic.com/?nerdpacks=local](https://one.newre

<Step>

Open the **Apps** page, and navigate to the **Visualization Explorer**, which you will find favorited by default.
Open the **Apps** page, and navigate to the **Custom Visualizations**, which you will find favorited by default.

<img
src="../../images/build-an-app/visualization-explorer-navigation.png"
alt="Visualization Explorer is located in the Apps listing"
alt="Custom Visualizations is located in the Apps listing"
/>

</Step>

<Step>

In the **Visualization Explorer**, find and click on the tile for your visualization. If the tile is not showing up or it is not indicating that it is running locally, restart the node server and refresh the browser.
In the **Custom Visualizations** listing, find and click on the tile for your visualization. If the tile is not showing up or it is not indicating that it is running locally, restart the node server and refresh the browser.

<img
src="../../images/build-an-app/visualization-explorer-local-entry.png"
alt="Your visualization listed in the Visualization Explorer"
alt="Your visualization listed in the Custom Visualizations"
/>

When you select your locally running visualization, it loads in the **Visualization Builder** where you can take advantage of the features outlined in the following steps.
When you select your locally running visualization, the visualization hosted by your local node server is rendered with prop configuration inputs. Here you can take advantage of the features outlined in the following steps.

</Step>

Expand Down Expand Up @@ -162,7 +163,7 @@ Open and follow the guide to [publish and deploy the nerdpack to New Relic One a

<Step>

Then you can [add your visualization to a dashboard](https://docs.newrelic.com/).
Then you can [add your visualization to a dashboard](https://docs.newrelic.com/docs/query-your-data/explore-query-data/dashboards/add-custom-visualizations-your-dashboards).

</Step>

Expand Down Expand Up @@ -193,6 +194,6 @@ For this reason, your network administrator may need to enable access to:
Now that you've completed the steps in this example, you learned the steps to:

- Create a visualization and run it locally
- Quickly test and iterate on visualization code changes using the Visualization Explorer
- Quickly test and iterate on visualization code changes in Custom Visualizations
- Deploy a visualization
- Add a custom visualization to a dashboard

0 comments on commit d5065a9

Please sign in to comment.