Add thousand separator for numbers, unified rendering for single number charts (#71)

* Add thousand separator to SingleValueChart

* Extract get type and renderer into util

* Added unified rendering for single values/tables

Co-authored-by: Marius Conjeaud <[email protected]>
Co-authored-by: Niels de Jong <[email protected]>

Author: mariusconjeaud

src/chart/SingleValueChart.tsx

@@ -1,6 +1,8 @@
 
 import React from 'react';
 import { ChartProps } from './Chart';
+
+import { getRecordType, getRendererForValue, renderValueByType } from '../report/RecordProcessing';
 /**
  * Renders Neo4j records as their JSON representation.
  */
@@ -11,9 +13,10 @@ const NeoSingleValueChart = (props: ChartProps) => {
     const color = props.settings && props.settings.color ? props.settings.color : "rgba(0, 0, 0, 0.87)";
     const textAlign = props.settings && props.settings.textAlign ? props.settings.textAlign : "left";
 
-    const value = (records && records[0] && records[0]["_fields"] && records[0]["_fields"][0]) ? records[0]["_fields"][0].toString() : "";
+    const value = (records && records[0] && records[0]["_fields"] && records[0]["_fields"][0]) ? records[0]["_fields"][0] : "";
+    const displayValue = renderValueByType(value);
     return <div style={{marginTop: marginTop, textAlign: textAlign, marginLeft: "15px", marginRight: "15px"}}>
-        <span style={{fontSize: fontSize, color: color}}>{value}</span>
+        <span style={{fontSize: fontSize, color: color}}>{displayValue}</span>
     </div >;
 }
 

src/chart/TableChart.tsx

@@ -1,102 +1,11 @@
 import React from 'react';
 import { DataGrid } from '@mui/x-data-grid';
-import { Chip } from '@material-ui/core';
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
 import { ChartProps } from './Chart';
-import { valueIsNode, valueIsRelationship, getRecordType } from '../report/RecordProcessing';
-
-function addDirection(relationship, start) {
-    relationship.direction = (relationship.start.low == start.identity.low);
-    return relationship;
-}
-
-const rightRelationship = "polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, 100% calc(100% - 50%), calc(100% - 10px) 100%, 0px 100%, 0% calc(100% - 0px), 0% 0px)"
-const leftRelationship = "polygon(10px 0%, calc(100% - 0%) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 0%) 100%, 10px 100%, 0% calc(100% - 50%), 0% 50%)"
-
-const HtmlTooltip = withStyles((theme) => ({
-    tooltip: {
-        color: 'white',
-        fontSize: theme.typography.pxToRem(12),
-        border: '1px solid #fcfffa',
-    },
-}))(Tooltip);
-
-function RenderNode(value, key = 0) {
-    return <HtmlTooltip key={key + "-" + value.identity} arrow title={<div><b> {value.labels.length > 0 ? value.labels.join(", ") : "Node"}</b><table><tbody>{Object.keys(value.properties).length == 0 ? <tr><td>(No properties)</td></tr> : Object.keys(value.properties).map((k, i) => <tr key={i}><td key={0}>{k.toString()}:</td><td key={1}>{value.properties[k].toString()}</td></tr>)}</tbody></table></div>}>
-        <Chip label={value.labels.length > 0 ? value.labels.join(", ") : "Node"} />
-    </HtmlTooltip>
-}
-
-function RenderRelationship(value, key = 0) {
-    return <HtmlTooltip key={key + "-" + value.identity} arrow title={<div><b> {value.type}</b><table><tbody>{Object.keys(value.properties).length == 0 ? <tr><td>(No properties)</td></tr> : Object.keys(value.properties).map((k, i) => <tr key={i}><td key={0}>{k.toString()}:</td><td key={1}>{value.properties[k].toString()}</td></tr>)}</tbody></table></div>}>
-        <Chip style={{ borderRadius: 0, clipPath: (value.direction == undefined) ? "none" : ((value.direction) ? rightRelationship : leftRelationship) }} label={value.type} />
-    </HtmlTooltip>
-}
-
-function RenderPath(value) {
-    return value.segments.map((segment, i) => {
-        return RenderSubValue((i < value.segments.length - 1) ?
-            [segment.start, addDirection(segment.relationship, segment.start)] :
-            [segment.start, addDirection(segment.relationship, segment.start), segment.end], i)
-    });
-}
-
-function RenderArray(value) {
-    const mapped = value.map((v, i) => {
-        return <div>
-            {RenderSubValue(v)}
-            {i < value.length - 1 && !valueIsNode(v) && !valueIsRelationship(v) ? <span>,&nbsp;</span> : <></>}
-        </div>
-    });
-    return mapped;
-}
-
-function RenderString(value) {
-    const str = value ? value.toString() : "";
-    if (str.startsWith("http") || str.startsWith("https")) {
-        return <a target="_blank" href={str}>{str}</a>;
-    }
-    return str;
-}
-
-const customColumnProperties: any = {
-    "node": {
-        type: 'string',
-        renderCell: (c) => RenderNode(c.value),
-    },
-    "relationship": {
-        type: 'string',
-        renderCell: (c) => RenderRelationship(c.value),
-    },
-    "path": {
-        type: 'string',
-        renderCell: (c) => RenderPath(c.value),
-    },
-    "object": {
-        type: 'string',
-        // valueGetter enables sorting and filtering on string values inside the object
-        valueGetter: (c) => { return JSON.stringify(c.value) },
-    },
-    "array": {
-        type: 'string',
-        renderCell: (c) => RenderArray(c.value),
-    },
-    "string": {
-        type: 'string',
-        renderCell: (c) => RenderString(c.value),
-    },
-    "null": {
-        type: 'string'
-    },
-    "undefined": {
-        type: 'string'
-    }
-};
+import { getRecordType, getRendererForValue } from '../report/RecordProcessing';
 
 function ApplyColumnType(column, value) {
-    column.type = getRecordType(value);
-    const columnProperties = customColumnProperties[column.type];
+    const renderer = getRendererForValue(value);
+    const columnProperties = {type: renderer.type, renderCell: renderer.renderValue};
 
     if (columnProperties) {
         column = { ...column, ...columnProperties }
@@ -105,24 +14,6 @@ function ApplyColumnType(column, value) {
     return column;
 }
 
-function RenderSubValue(value, key = 0) {
-    if (value == undefined) {
-        return "";
-    }
-    const type = getRecordType(value);
-    const columnProperties = customColumnProperties[type];
-
-    if (columnProperties) {
-        if (columnProperties.renderCell) {
-            return columnProperties.renderCell({ value: value });
-        } else if (columnProperties.valueGetter) {
-            return columnProperties.valueGetter({ value: value });
-        }
-    }
-
-    return RenderString(value);
-}
-
 const NeoTableChart = (props: ChartProps) => {
     const fullscreen = props.fullscreen ? props.fullscreen : false;
     const transposed = props.settings && props.settings.transposed ? props.settings.transposed : false;

src/report/RecordProcessing.tsx

@@ -1,5 +1,9 @@
 import _ from 'lodash';
-import { DateTime } from 'neo4j-driver';
+
+import React from 'react';
+import { Chip } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+import Tooltip from '@material-ui/core/Tooltip';
 
 const OPTIONAL_FIELD_UNAVAILABLE_IDENTIFIER = "(none)";
 
@@ -285,3 +289,130 @@ export function getRecordType(value) {
     // Use string as default type
     return 'string';
 }
+
+/* HELPER FUNCTIONS FOR RENDERING A FIELD BASED ON TYPE */
+const HtmlTooltip = withStyles((theme) => ({
+    tooltip: {
+        color: 'white',
+        fontSize: theme.typography.pxToRem(12),
+        border: '1px solid #fcfffa',
+    },
+}))(Tooltip);
+
+function addDirection(relationship, start) {
+    relationship.direction = (relationship.start.low == start.identity.low);
+    return relationship;
+}
+
+const rightRelationship = "polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, 100% calc(100% - 50%), calc(100% - 10px) 100%, 0px 100%, 0% calc(100% - 0px), 0% 0px)"
+const leftRelationship = "polygon(10px 0%, calc(100% - 0%) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 0%) 100%, 10px 100%, 0% calc(100% - 50%), 0% 50%)"
+
+function RenderNode(value, key = 0) {
+    return <HtmlTooltip key={key + "-" + value.identity} arrow title={<div><b> {value.labels.length > 0 ? value.labels.join(", ") : "Node"}</b><table><tbody>{Object.keys(value.properties).length == 0 ? <tr><td>(No properties)</td></tr> : Object.keys(value.properties).map((k, i) => <tr key={i}><td key={0}>{k.toString()}:</td><td key={1}>{value.properties[k].toString()}</td></tr>)}</tbody></table></div>}>
+        <Chip label={value.labels.length > 0 ? value.labels.join(", ") : "Node"} />
+    </HtmlTooltip>
+}
+
+function RenderRelationship(value, key = 0) {
+    return <HtmlTooltip key={key + "-" + value.identity} arrow title={<div><b> {value.type}</b><table><tbody>{Object.keys(value.properties).length == 0 ? <tr><td>(No properties)</td></tr> : Object.keys(value.properties).map((k, i) => <tr key={i}><td key={0}>{k.toString()}:</td><td key={1}>{value.properties[k].toString()}</td></tr>)}</tbody></table></div>}>
+        <Chip style={{ borderRadius: 0, clipPath: (value.direction == undefined) ? "none" : ((value.direction) ? rightRelationship : leftRelationship) }} label={value.type} />
+    </HtmlTooltip>
+}
+
+function RenderPath(value) {
+    return value.segments.map((segment, i) => {
+        return RenderSubValue((i < value.segments.length - 1) ?
+            [segment.start, addDirection(segment.relationship, segment.start)] :
+            [segment.start, addDirection(segment.relationship, segment.start), segment.end], i)
+    });
+}
+
+function RenderArray(value) {
+    const mapped = value.map((v, i) => {
+        return <div>
+            {RenderSubValue(v)}
+            {i < value.length - 1 && !valueIsNode(v) && !valueIsRelationship(v) ? <span>,&nbsp;</span> : <></>}
+        </div>
+    });
+    return mapped;
+}
+
+function RenderString(value) {
+    const str = value ? value.toString() : "";
+    if (str.startsWith("http") || str.startsWith("https")) {
+        return <a target="_blank" href={str}>{str}</a>;
+    }
+    return str;
+}
+
+function RenderNumber(value) {
+    const thousandsSeperator=" ";
+    const number = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g,thousandsSeperator);
+    return number;
+}
+
+function RenderSubValue(value, key = 0) {
+    if (value == undefined) {
+        return "";
+    }
+    const type = getRecordType(value);
+    const columnProperties = rendererForType[type];
+
+    if (columnProperties) {
+        if (columnProperties.renderCell) {
+            return columnProperties.renderCell({ value: value });
+        } else if (columnProperties.valueGetter) {
+            return columnProperties.valueGetter({ value: value });
+        }
+    }
+
+    return RenderString(value);
+}
+
+const rendererForType: any = {
+    "node": {
+        type: 'string',
+        renderValue: (c) => RenderNode(c.value),
+    },
+    "relationship": {
+        type: 'string',
+        renderValue: (c) => RenderRelationship(c.value),
+    },
+    "path": {
+        type: 'string',
+        renderValue: (c) => RenderPath(c.value),
+    },
+    "object": {
+        type: 'string',
+        // valueGetter enables sorting and filtering on string values inside the object
+        valueGetter: (c) => { return JSON.stringify(c.value) },
+    },
+    "array": {
+        type: 'string',
+        renderValue: (c) => RenderArray(c.value),
+    },
+    "string": {
+        type: 'string',
+        renderValue: (c) => RenderString(c.value),
+    },
+    "number": {
+        type: 'number',
+        renderValue: (c) => RenderNumber(c.value)
+    },
+    "null": {
+        type: 'string'
+    },
+    "undefined": {
+        type: 'string'
+    }
+};
+
+export function getRendererForValue(value) {
+    const type = getRecordType(value);
+    return rendererForType[type];
+}
+
+export function renderValueByType(value){
+    const renderer = getRendererForValue(value);
+    renderer.renderValue({value:value});
+}