feat: add cumulative chart

README.md

@@ -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.
 
@@ -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
@@ -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" />
 
   ---
@@ -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" />
 
   ---
@@ -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" />
 
   ---
@@ -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" />
 
   ---
@@ -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" />
 
   ---
@@ -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" />
 
@@ -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:
@@ -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" />
 
@@ -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.
 
@@ -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.
 
@@ -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).
-
-

nr1.json

@@ -3,4 +3,4 @@
   "id": "090369b0-4f5d-464d-a6b2-48d42a8ae2f4",
   "displayName": "Labs Widget Pack",
   "description": "A collection of custom visualizations"
-}
+}

package.json

@@ -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",
@@ -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",

visualizations/nr-cumulative-chart/docs.js

@@ -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>
+  );
+}