From eac0ed1cc9800d3ef230569c2853cada8a5f7d23 Mon Sep 17 00:00:00 2001 From: Jas Kuner Date: Fri, 6 Dec 2019 10:55:18 +0000 Subject: [PATCH] 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 --- .../D3Visualization/components/Inspector.jsx | 12 +-- .../D3Visualization/components/Legend.jsx | 7 +- src/browser/modules/DBMSInfo/MetaItems.jsx | 3 +- src/shared/utils/number-to-US-locale.js | 20 ++++ src/shared/utils/number-to-US-locale.test.js | 93 +++++++++++++++++++ 5 files changed, 125 insertions(+), 10 deletions(-) create mode 100644 src/shared/utils/number-to-US-locale.js create mode 100644 src/shared/utils/number-to-US-locale.test.js diff --git a/src/browser/modules/D3Visualization/components/Inspector.jsx b/src/browser/modules/D3Visualization/components/Inspector.jsx index e321ba4f8db..df99e8e3db7 100644 --- a/src/browser/modules/D3Visualization/components/Inspector.jsx +++ b/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) => ( @@ -142,9 +142,9 @@ export class InspectorComponent extends Component { ) } 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 = ( diff --git a/src/browser/modules/D3Visualization/components/Legend.jsx b/src/browser/modules/D3Visualization/components/Legend.jsx index 2d03590baf4..e3062f34cec 100644 --- a/src/browser/modules/D3Visualization/components/Legend.jsx +++ b/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} - {`(${ + {`(${numberToUSLocale( labels[legendItemKey].count - })`} + )})`} @@ -134,7 +135,7 @@ export class LegendComponent extends Component { > {legendItemKey} - {`(${legendItems[legendItemKey].count})`} + {`(${numberToUSLocale(legendItems[legendItemKey].count)})`} diff --git a/src/browser/modules/DBMSInfo/MetaItems.jsx b/src/browser/modules/DBMSInfo/MetaItems.jsx index af4961b5b77..1f4ba5d2dd4 100644 --- a/src/browser/modules/DBMSInfo/MetaItems.jsx +++ b/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) } diff --git a/src/shared/utils/number-to-US-locale.js b/src/shared/utils/number-to-US-locale.js new file mode 100644 index 00000000000..e71aff7b301 --- /dev/null +++ b/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 . + * + */ + +export default value => + (parseInt(value, 10) >= 0 && parseInt(value, 10).toLocaleString('en-US')) || + value diff --git a/src/shared/utils/number-to-US-locale.test.js b/src/shared/utils/number-to-US-locale.test.js new file mode 100644 index 00000000000..81f348d8274 --- /dev/null +++ b/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 . + */ + +/* 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') + }) +})