Gauge Chart (#223)

* added new gauge chart type (react-gauge-chart)

* Gauge 0.1

* Added docs for Gauge chart

* Gauge 0.4

* Added docs for gauge

* Added value type handling for gauge

* Gauge 0.6

* Added test for gauge chart

* Gauge 0.9 Example and Margins

* Removed reference to old record mapper

Co-authored-by: Dekel Paz <[email protected]>
Co-authored-by: Niels de Jong <[email protected]>

Author: 3 people

cypress/fixtures/cypher_queries.js

@@ -1,4 +1,4 @@
-import { tableCypherQuery, barChartCypherQuery, mapChartCypherQuery, sunburstChartCypherQuery, iFrameText, markdownText, loadDashboardURL, sankeyChartCypherQuery } from "../fixtures/cypher_queries"
+import { tableCypherQuery, barChartCypherQuery, mapChartCypherQuery, sunburstChartCypherQuery, iFrameText, markdownText, loadDashboardURL, sankeyChartCypherQuery, gaugeChartCypherQuery } from "../fixtures/cypher_queries"
 
 // Ignore warnings that may appear when using the Cypress dev server
 Cypress.on('uncaught:exception', (err, runnable) => {
@@ -105,6 +105,11 @@ describe('NeoDash E2E Tests', () => {
         cy.get('main .react-grid-item:eq(2) .MuiCardContent-root > div > div:nth-child(2) > span').contains('1,999')
     })
 
+    it('creates a gauge chart report', () => {
+        createReportOfType('Gauge Chart', gaugeChartCypherQuery)
+        cy.get('.text-group > text').contains('69')
+    })
+
     it('creates a sunburst chart report', () => {
         createReportOfType('Sunburst Chart', sunburstChartCypherQuery)
         cy.get('main .react-grid-item:eq(2) .MuiCardActions-root .MuiInputLabel-root').contains('Path').next()

cypress/integration/start_page.spec.js

@@ -17,6 +17,7 @@
 *** xref:user-guide/reports/map.adoc[Map]
 *** xref:user-guide/reports/choropleth.adoc[Choropleth]
 *** xref:user-guide/reports/single-value.adoc[Single Value]
+*** xref:user-guide/reports/gauge-chart.adoc[Gauge Chart]
 *** xref:user-guide/reports/raw-json.adoc[Raw JSON]
 *** xref:user-guide/reports/parameter-select.adoc[Parameter Select]
 *** xref:user-guide/reports/iframe.adoc[iFrame]

docs/modules/ROOT/images/gauge.png

@@ -0,0 +1,40 @@
+= Gauge Chart
+
+A gauge chart takes a single numeric value, and plots it on an animated gauge:
+
+- The value returned should be in the range of 0 to 100.
+- The gauge chart can be customized with different colors and levels (arc segments).
+
+== Examples
+
+=== Basic Gauge Chart
+
+[source,cypher]
+----
+MATCH (c:CPU)
+WHERE c.id = 1
+RETURN c.load_percentage * 100 
+----
+
+image::gauge.png[Gauge Chart]
+
+== Advanced Settings
+
+              
+[width="100%",cols="15%,2%,6%,77%",options="header",]
+|===
+|Name |Type |Default Value |Description
+|Number of levels | number | 3 | The number of distinct colored levels in the gauge.
+
+| Comma-separated length of each arc | List |  "0.15, 0.55, 0.3" | A comma-separated list of length for each of the colored arc segments on the gauge.
+
+| Comma-separated arc colors | List | "#5BE12C, #F5CD19, #EA4228" | The HEX color values to assign to each arc.
+
+| Color of the text | string | black | The color of the number on the gauge.
+
+| Delay in ms before needle animation | number | 0 | Delay in milliseconds before starting the animation.
+
+| Duration in ms for needle animation | number | 2000 | The duration of the moving needle animation when the chart renders.
+
+|===
+

docs/modules/ROOT/nav.adoc

@@ -117,6 +117,7 @@ pages:
 - link:choropleth[Choropleth Chart] 
 - link:single-value[Single Value] 
 - link:sankey[Sankey Chart] 
+- link:gauge[Gauge Chart]
 - link:raw-json[Raw JSON] 
 - link:parameter-select[Parameter Select] 
 - link:iframe[iFrame]

docs/modules/ROOT/pages/user-guide/reports/gauge-chart.adoc

@@ -72,7 +72,8 @@
     "redux-thunk": "^2.4.1",
     "remark-gfm": "^3.0.1",
     "reselect": "^4.1.5",
-    "use-neo4j": "^0.3.13"
+    "use-neo4j": "^0.3.13",
+    "react-gauge-chart": "^0.4.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.8",

docs/modules/ROOT/pages/user-guide/reports/index.adoc

@@ -49,7 +49,7 @@ const NeoCardView = ({ title, database, query, globalParameters,
             showOptionalSelections={(settings["showOptionalSelections"])} >
         </NeoCardViewFooter> : <></>;
 
-    const withoutFooter = !REPORT_TYPES[type].selection || (settings && settings.hideSelections);
+    const withoutFooter = REPORT_TYPES[type].withoutFooter ? REPORT_TYPES[type].withoutFooter : !REPORT_TYPES[type].selection || (settings && settings.hideSelections);
 
     const getGlobalParameter = (key: string): any => {
         return globalParameters ? globalParameters[key] : undefined;

package.json

@@ -0,0 +1,74 @@
+import React from 'react';
+import { ChartProps } from '../Chart';
+import GaugeChart from 'react-gauge-chart'
+import { createUUID } from '../../dashboard/DashboardThunks'
+import { NoDrawableDataErrorMessage } from "../../component/editor/CodeViewerComponent";
+
+    /**
+     * Based on https://github.com/dekelpaz PR https://github.com/neo4j-labs/neodash/pull/191
+     */
+const NeoGaugeChart = (props: ChartProps) => {
+
+    const records = props.records;
+    const selection = props.selection;
+    const settings = props.settings;
+
+
+
+    if (!selection || props.records == null || props.records.length == 0 || props.records[0].keys == null) {
+        return <NoDrawableDataErrorMessage />
+    }
+    /**
+     * This visualization was extracted from https://github.com/Martin36/react-gauge-chart.
+     */
+
+        const nrOfLevels = settings.nrOfLevels ? props.settings.nrOfLevels : 3;
+        const arcsLength = settings.arcsLength ? props.settings.arcsLength : "0.15, 0.55, 0.3";
+        const arcPadding = props.settings.arcPadding ? props.settings.arcPadding : 0.02;
+        const colors = props.settings.colors ? props.settings.colors : "#5BE12C, #F5CD19, #EA4228";
+        const textColor = props.settings.textColor ? props.settings.textColor : "black";
+        const animDelay = props.settings.animDelay ? props.settings.animDelay : 0;
+        const animateDuration = props.settings.animateDuration ? props.settings.animateDuration : 2000;
+        const marginRight = (settings["marginRight"]) ? settings["marginRight"] : 24;
+        const marginLeft = (settings["marginLeft"]) ? settings["marginLeft"] : 24;
+        const marginTop = (settings["marginTop"]) ? settings["marginTop"] : 40;
+        const marginBottom = (settings["marginBottom"]) ? settings["marginBottom"] : 40;
+
+    let arcsLengthN = arcsLength.split(",").map(
+        e => parseFloat(e.trim())
+    );
+
+    if ((arcsLengthN.filter(e => isNaN(e)).length > 0) || (arcsLengthN.length != nrOfLevels))
+        arcsLengthN = Array(nrOfLevels).fill(1);
+    const sumArcs = arcsLengthN.reduce(
+        (previousValue, currentValue) => previousValue + currentValue,
+        0
+    );
+    arcsLengthN = arcsLengthN.map(e => e / sumArcs);
+
+    const chartId = createUUID();
+    let score = (records && records[0] && records[0]["_fields"] && records[0]["_fields"][0]) ? records[0]["_fields"][0] : "";
+
+    if (isNaN(score)) return <NoDrawableDataErrorMessage />
+    if (score.low != undefined) score = score.low;
+    if (score >= 0) score = score / 100; // supporting older versions of Neo4j which don't support round to 2 decimal points
+
+    return <div style={{ position: "relative", top: "40%", transform: "translateY(-50%)" }}>
+        {typeof (score) == "number" ?
+            <GaugeChart
+                id={chartId}
+                nrOfLevels={nrOfLevels}
+                percent={score}
+                arcsLength={arcsLengthN}
+                arcPadding={arcPadding}
+                colors={colors.split(", ")}
+                textColor={textColor}
+                style={{ marginTop: marginTop, marginRight: marginRight, marginBottom:  marginBottom, marginLeft : marginLeft  }}
+                animDelay={animDelay}
+                animateDuration={animateDuration}
+            /> : <></>}
+    </div>
+
+}
+
+export default NeoGaugeChart;