Add support for float numbers in renderers and use locale string for numbers (#72)

* Add thousand separator to SingleValueChart

* Extract get type and renderer into util

* Added unified rendering for single values/tables

* 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 <marius.conjeaud@neo4j.com>
Co-authored-by: Niels de Jong <niels-121@hotmail.com>

* 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 <marius.conjeaud@neo4j.com>
Co-authored-by: Niels de Jong <niels-121@hotmail.com>

* Add support for float rendering

Co-authored-by: Marius Conjeaud <marius.conjeaud@neo4j.com>
Co-authored-by: Niels de Jong <niels-121@hotmail.com>

Author: mariusconjeaud

src/chart/SingleValueChart.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { ChartProps } from './Chart';
 
-import { getRecordType, getRendererForValue, renderValueByType } from '../report/RecordProcessing';
+import { renderValueByType } from '../report/RecordProcessing';
 /**
  * Renders Neo4j records as their JSON representation.
  */

src/chart/TableChart.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { DataGrid } from '@mui/x-data-grid';
 import { ChartProps } from './Chart';
-import { getRecordType, getRendererForValue } from '../report/RecordProcessing';
+
+import { getRendererForValue } from '../report/RecordProcessing';
 
 function ApplyColumnType(column, value) {
     const renderer = getRendererForValue(value);

src/report/RecordProcessing.tsx

@@ -269,6 +269,8 @@ export function getRecordType(value) {
     } else if (value === null) {
         return 'null';
     } else if (value.__isInteger__) {
+        return 'integer';
+    } else if (typeof(value) == "number") {
         return 'number';
     } else if (value.__isDate__) {
         return 'date';
@@ -345,9 +347,13 @@ function RenderString(value) {
     return str;
 }
 
+function RenderInteger(value) {
+    const integer = value.toInt().toLocaleString();
+    return integer;
+}
+
 function RenderNumber(value) {
-    const thousandsSeperator=" ";
-    const number = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g,thousandsSeperator);
+    const number = value.toLocaleString();
     return number;
 }
 
@@ -395,6 +401,10 @@ const rendererForType: any = {
         type: 'string',
         renderValue: (c) => RenderString(c.value),
     },
+    "integer": {
+        type: 'number',
+        renderValue: (c) => RenderInteger(c.value)
+    },
     "number": {
         type: 'number',
         renderValue: (c) => RenderNumber(c.value)
@@ -414,5 +424,5 @@ export function getRendererForValue(value) {
 
 export function renderValueByType(value){
     const renderer = getRendererForValue(value);
-    renderer.renderValue({value:value});
+    return renderer.renderValue({value:value});
 }