Skip to content

Commit

Permalink
Merge pull request #37 from newrelic/kpeet/cumulativeChart
Browse files Browse the repository at this point in the history
feat: add cumulative chart
  • Loading branch information
khpeet authored Oct 22, 2024
2 parents 8711011 + 2bd006a commit 7587659
Show file tree
Hide file tree
Showing 10 changed files with 411 additions and 47 deletions.
57 changes: 40 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

# Labs Widget Pack

![GitHub release (latest SemVer including pre-releases)](https://img.shields.io/github/v/release/newrelic/nr-labs-widget-pack?include_prereleases&sort=semver)
![GitHub release (latest SemVer including pre-releases)](https://img.shields.io/github/v/release/newrelic/nr-labs-widget-pack?include_prereleases&sort=semver)

A library of New Relic custom chart widgets created by the New Relic Labs team, for use in New Relic dashboards.

Expand Down Expand Up @@ -34,7 +34,7 @@ Click on the short description in each section to view chart details.
- the X axis represents time
- the left Y axis represents the values for the Bar Charts
- the right Y axis represents the values for the Line Charts

The chart allows you to define multiple line and bar queries, so it is highly recommended that the queries are aligned in terms of units and time periods.

#### Requirements
Expand Down Expand Up @@ -83,12 +83,37 @@ Click on the short description in each section to view chart details.
---
</details>

### Cumulative Timeseries Chart

<details>

<summary>Trend cumulative values over time as a line or area chart.</summary>

<img src="screenshots/cumulative_01.png" height="250" alt="Cumulative chart screenshot" />

#### Overview
Use the Cumulative Chart to see running totals, or the total sum of a given data set as it grows with time.

The Cumulative Timeseries chart supports Line & Area chart types.

#### Requirements
In order to use this chart, there are a few requirements:
- Each query must use and end with the `TIMESERIES` clause, and also contain the bucket eg. `TIMESERIES 1 second`
- Do not use SINCE or UNTIL clauses as they will automatically be determined based on the time range picker
- If using the LIMIT clause, this should be placed before and not after the TIMESERIES clause

A valid query for the chart could look like this:
`SELECT count(*) FROM Transaction FACET appName TIMESERIES`

---
</details>


### Multiline Compare Chart
<details>

<summary>Display multiple comparison periods in a single timeseries chart.</summary>

<img src="screenshots/multiline_01.png" height="450" alt="Multi Line Compare chart screenshot" />

---
Expand All @@ -98,7 +123,7 @@ Click on the short description in each section to view chart details.
<details>

<summary>Render events as markers on a line chart.</summary>

<img src="screenshots/multiline_event_02.png" height="450" alt="Line and Event overlay screenshot" />

---
Expand All @@ -108,7 +133,7 @@ Click on the short description in each section to view chart details.
<details>

<summary>Render events as markers on an area chart.</summary>

<img src="screenshots/area_event_01.png" height="450" alt="Area and Event overlay screenshot" />

---
Expand All @@ -118,7 +143,7 @@ Click on the short description in each section to view chart details.
<details>

<summary>Render events as markers on a scatter chart.</summary>

<img src="screenshots/scatter_event_01.png" height="450" alt="Scatter and Event overlay screenshot" />

---
Expand All @@ -128,7 +153,7 @@ Click on the short description in each section to view chart details.
<details>

<summary>Plot one or more groups of values over multiple variables, and compare them on a two-dimensional plane.</summary>

<img src="screenshots/radar_01.png" height="450" alt="Radar chart screenshot" />

---
Expand All @@ -137,7 +162,7 @@ Click on the short description in each section to view chart details.
### Map Widget
<details>
<summary>Plot any data that includes latitude and longitude onto an interactive map, leveraging the Leaflet or Mapbox API.</summary>

#### Overview
<img src="screenshots/mapbox_01.png" height="450" alt="Map screenshot" />

Expand All @@ -150,7 +175,7 @@ Click on the short description in each section to view chart details.
- Query should contain one alias with 'name:SOME_VALUE' which will be used as the marker name
- Query should have a FACET for latitude and longitude, use precision to ensure the FACET does not round the number
```
FACET string(lat, precision: 5) as 'lat', string(lng, precision: 5) as 'lng'
FACET string(lat, precision: 5) as 'lat', string(lng, precision: 5) as 'lng'
```
- Rotation can be set using the following alias with 'rotate:SOME_VALUE' (Map Box only)
- Example Query:
Expand All @@ -164,7 +189,7 @@ Click on the short description in each section to view chart details.
<details>

<summary>Display query results in a list, with smart formatting options.</summary>

#### Overview
<img src="screenshots/list-view-screenshot-1.png" height="450" alt="List view screenshot" />

Expand All @@ -176,17 +201,17 @@ Click on the short description in each section to view chart details.
- Search bar to filter list to the searched text

#### Requirements
For full details on how to use and format results in this chart, read the [Template String documentation](./list-view-template.md).

For full details on how to use and format results in this chart, read the [Template String documentation](./list-view-template.md).

---
</details>

### Action Loader
<details>

<summary>Incorporate buttons into your dashboards, with configurable onClick actions.</summary>

#### Overview
Incorporate buttons into your dashboards, with configurable onClick actions.

Expand All @@ -202,7 +227,7 @@ Click on the short description in each section to view chart details.

# Enabling this Nerdpack <a id="enable"></a>

This pack of visualizations is available via the New Relic Catalog.
This pack of visualizations is available via the New Relic Catalog.

To enable it in your account, go to `Add Data > Apps and Visualzations` and search for "Labs Widget Pack". Click the icon and subscribe this to your accounts.

Expand Down Expand Up @@ -234,5 +259,3 @@ Keep in mind that when you submit your pull request, you'll need to sign the CLA
# Open source license

This project is distributed under the [Apache 2 license](LICENSE).


2 changes: 1 addition & 1 deletion nr1.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@
"id": "090369b0-4f5d-464d-a6b2-48d42a8ae2f4",
"displayName": "Labs Widget Pack",
"description": "A collection of custom visualizations"
}
}
54 changes: 27 additions & 27 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"private": true,
"name": "nr-labs-widget-pack",
"description": "Nerdpack template",
"version": "1.46.0",
"version": "1.46.4",
"scripts": {
"start": "nr1 nerdpack:serve",
"test": "exit 0",
Expand Down Expand Up @@ -33,7 +33,7 @@
"react-leaflet": "^3.1.0",
"react-leaflet-marker": "^1.1.4",
"react-map-gl": "^7.0.19",
"recharts": "^2.8.0"
"recharts": "^2.12.7"
},
"ids": {
"am": "c2fab1ee-57c3-43d6-bc5c-c7343ecaff0c",
Expand Down
Binary file added screenshots/cumulative_01.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
72 changes: 72 additions & 0 deletions visualizations/nr-cumulative-chart/docs.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import React from 'react';

import {
Card,
CardHeader,
CardBody,
HeadingText,
BlockText,
Spacing
} from 'nr1';

import RenderPropertyInfo from '../../shared/PropertyInfo';

const properties = require('./nr1.json');

export default function Docs() {
return (
<div style={{ textAlign: 'left' }}>
<HeadingText type={HeadingText.TYPE.HEADING_2}>Documentation</HeadingText>
<Card collapsible>
<CardHeader title="Overview" />
<CardBody style={{ marginLeft: '35px' }}>
<BlockText spacingType={[BlockText.SPACING_TYPE.MEDIUM]}>
Use the Cumulative Chart to see running totals, or the total sum of
a given data set as it grows with time.
<br />
<br />
The chart supports Line & Area chart types.
</BlockText>
</CardBody>
</Card>
<Card collapsible defaultCollapsed>
<CardHeader title="Query Syntax" />
<CardBody style={{ marginLeft: '35px' }}>
<BlockText spacingType={[BlockText.SPACING_TYPE.MEDIUM]}>
In order to populate the chart, there are a few requirements:
<Spacing type={[Spacing.TYPE.MEDIUM, Spacing.TYPE.EXTRA_LARGE]}>
<ul>
<li>At least 1 timeseries query</li>
<li>
Timeseries queries should contain the <code>TIMESERIES</code>{' '}
clause
</li>
</ul>
</Spacing>
<Spacing type={[Spacing.TYPE.MEDIUM]}>
<div>
A valid timeseries query for the chart could look like this:{' '}
</div>
</Spacing>
<Spacing type={[Spacing.TYPE.MEDIUM, Spacing.TYPE.LARGE]}>
<code>SELECT count(*) FROM Transaction TIMESERIES</code>
</Spacing>
</BlockText>
</CardBody>
</Card>

<Card collapsible defaultCollapsed>
<CardHeader title="Properties" />
<CardBody style={{ marginLeft: '35px' }}>
{properties.configuration
.filter(c => c.name !== 'showDocs')
.map(config => {
return RenderPropertyInfo(config, false, {});
})}
</CardBody>
</Card>

<hr />
</div>
);
}
Loading

0 comments on commit 7587659

Please sign in to comment.