Format node/relationship counts in sidebar, inspector and legend (#1008)

* commas-node-and-relation-count-new: initial

* commas-node-and-relation-count-new: thousand comma separation utility created. naming needs looking at.

* commas-node-and-relation-count: remove a classname added just for a test build

* commas-node-and-relation-count-new: rename util to be more suitable and rework the function with logical operators

* commas-node-and-relation-count-new: used alias for shared utils import path, added additional tests and reworked number-to-US-locale.js to allow 0 to be output as string to be consistent with other values

* commas-node-and-relation-count-new: remove accidentally inserted local mock for node and relationship values

Author: Jas Kuner

src/browser/modules/D3Visualization/components/Inspector.jsx

@@ -39,12 +39,12 @@ import {
 import { GrassEditor } from './GrassEditor'
 import { RowExpandToggleComponent } from './RowExpandToggle'
 import ClickableUrls from '../../../components/clickable-urls'
+import numberToUSLocale from 'shared/utils/number-to-US-locale'
 
 const mapItemProperties = itemProperties =>
   itemProperties
-    .sort(
-      ({ key: keyA }, { key: keyB }) =>
-        keyA < keyB ? -1 : keyA === keyB ? 0 : 1
+    .sort(({ key: keyA }, { key: keyB }) =>
+      keyA < keyB ? -1 : keyA === keyB ? 0 : 1
     )
     .map((prop, i) => (
       <StyledInspectorFooterRowListPair className='pair' key={'prop' + i}>
@@ -142,9 +142,9 @@ export class InspectorComponent extends Component {
           </StyledInlineList>
         )
       } else if (type === 'canvas') {
-        const description = `Displaying ${item.nodeCount} nodes, ${
-          item.relationshipCount
-        } relationships.`
+        const description = `Displaying ${numberToUSLocale(
+          item.nodeCount
+        )} nodes, ${numberToUSLocale(item.relationshipCount)} relationships.`
         inspectorContent = (
           <StyledInlineList className='list-inline'>
             <StyledInspectorFooterRowListPair className='pair' key='pair'>

src/browser/modules/D3Visualization/components/Legend.jsx

@@ -31,6 +31,7 @@ import {
   StyledLegendInlineList
 } from './styled'
 import { RowExpandToggleComponent } from './RowExpandToggle'
+import numberToUSLocale from 'shared/utils/number-to-US-locale'
 
 export class LegendComponent extends Component {
   constructor (props) {
@@ -75,9 +76,9 @@ export class LegendComponent extends Component {
                 className='token token-label'
               >
                 {legendItemKey}
-                <StyledTokenCount className='count'>{`(${
+                <StyledTokenCount className='count'>{`(${numberToUSLocale(
                   labels[legendItemKey].count
-                })`}</StyledTokenCount>
+                )})`}</StyledTokenCount>
               </StyledLabelToken>
             </StyledLegendContents>
           </StyledLegendInlineListItem>
@@ -134,7 +135,7 @@ export class LegendComponent extends Component {
               >
                 {legendItemKey}
                 <StyledTokenCount className='count'>
-                  {`(${legendItems[legendItemKey].count})`}
+                  {`(${numberToUSLocale(legendItems[legendItemKey].count)})`}
                 </StyledTokenCount>
               </StyledTokenRelationshipType>
             </StyledLegendContents>

src/browser/modules/DBMSInfo/MetaItems.jsx

@@ -34,6 +34,7 @@ import {
   StyledShowMoreLink
 } from './styled'
 import Render from 'browser-components/Render'
+import numberToUSLocale from 'shared/utils/number-to-US-locale'
 
 const ShowMore = ({ total, shown, moreStep, onMore }) => {
   const numMore = total - shown > moreStep ? moreStep : total - shown
@@ -64,7 +65,7 @@ const createItems = (
   if (showStar) {
     let str = '*'
     if (count) {
-      str = `${str}(${count})`
+      str = `${str}(${numberToUSLocale(count)})`
     }
     items.unshift(str)
   }

src/shared/utils/number-to-US-locale.js

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2002-2019 "Neo4j,"
+ * Neo4j Sweden AB [http://neo4j.com]
+ * This file is part of Neo4j.
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+export default value =>
+  (parseInt(value, 10) >= 0 && parseInt(value, 10).toLocaleString('en-US')) ||
+  value

src/shared/utils/number-to-US-locale.test.js

@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2002-2019 "Neo4j,"
+ * Neo4j Sweden AB [http://neo4j.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/* global describe, test, expect */
+import numberToUSLocale from './number-to-US-locale'
+
+describe('numberToUSLocale', () => {
+  test('should return the original value if isNaN(value) is true', () => {
+    // Given
+    const value = null
+
+    // When
+    const returnValue = numberToUSLocale(value)
+
+    // Then
+    expect(returnValue).toBe(value)
+  })
+  test('should return a non-comma separated number if isNaN(value) is false and 0 <= value < 1000', () => {
+    let value, returnValue
+    // Given
+    value = 0
+
+    // When
+    returnValue = numberToUSLocale(value)
+
+    // Then
+    expect(returnValue).toBe('0')
+
+    // Given
+    value = '10'
+
+    // When
+    returnValue = numberToUSLocale(value)
+
+    // Then
+    expect(returnValue).toBe('10')
+
+    // Given
+    value = 999
+
+    // When
+    returnValue = numberToUSLocale(value)
+
+    // Then
+    expect(returnValue).toBe('999')
+  })
+  test('should return a thousands comma separated number if isNaN(value) is false and value >= 1000 ', () => {
+    let value, returnValue
+    // Given
+    value = 1000
+
+    // When
+    returnValue = numberToUSLocale(value)
+
+    // Then
+    expect(returnValue).toBe('1,000')
+
+    // Given
+    value = '123456789'
+
+    // When
+    returnValue = numberToUSLocale(value)
+
+    // Then
+    expect(returnValue).toBe('123,456,789')
+
+    // Given
+    value = 987654312345
+
+    // When
+    returnValue = numberToUSLocale(value)
+
+    // Then
+    expect(returnValue).toBe('987,654,312,345')
+  })
+})