Your data. Anywhere you go.

New Relic for iOS or Android


Download on the App Store    Android App on Google play


New Relic Insights App for iOS


Download on the App Store


Learn more

Close icon

How to populate your Nerdpack layout template with data

ui
gettingstarted
nerdpack

#1

Getting Started
If you’ve cloned one of the NR1 Nerdpack Layout repositories, you’re ready to take the next step by charting or displaying your data. That’s what this How To is meant to offer. Here, we’ll offer a number of directions to go for displaying your data in your nerdpack.

Pro tip
Before all that, a recommendation / reminder to rename your Layout Nerdpack to something that makes more sense for your project. (Nerdpack Layout - 3 column isn’t really a helpful description of your functionality :slight_smile:)

If you want to display chart data from your New Relic account…
Open the index.js of your Layout Nerdpack template and replace the <Stack> component (and it’s contents) that has a className of empty-state with something like the following:

<LineChart
  accountId={<YOUR_ACCOUNT_ID>}
  query='SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType'
  fullWidth
  fullHeight 
/>

Then, add the following to the import statements at the top of the file.

import { LineChart } from 'nr1'; 

To explore other charting components, see the API docs on developer.newrelic.com

If you want to see a list of entities to which you have access…
Open the index.js of your Layout Nerdpack template and replace the p tag with the className of empty-state-description with something like the following:

<EntitiesByDomainTypeQuery entityDomain="APM" entityType="APPLICATION">
{({ loading, error, data, fetchMore }) => {
    if (loading) {
        return <Spinner />;
    }

    if (error) {
        return 'Error!';
    }

    return (
        <List items={data.entities} rowCount={data.count} onLoadMore={fetchMore}>
            {({ item }) => <ListItem key={item.guid}>{item.name}</ListItem>}
        </List>
    );
}}
</EntitiesByDomainTypeQuery>

Then, add the following to the import statements at the top of the file.

import { EntitiesByDomainTypeQuery, Spinner, List, ListItem } from 'nr1'; 

To explore other data fetching components, see the API docs on developer.newrelic.com

And finally, more resources


Layout Nerdpacks