From b339eed0a9620d150416fc225d84b79006b3c062 Mon Sep 17 00:00:00 2001 From: Jas Kuner Date: Wed, 4 Dec 2019 16:22:00 +0000 Subject: [PATCH 1/6] commas-node-and-relation-count-new: initial --- .../modules/D3Visualization/components/Inspector.jsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/browser/modules/D3Visualization/components/Inspector.jsx b/src/browser/modules/D3Visualization/components/Inspector.jsx index e321ba4f8db..cdb8f90ea94 100644 --- a/src/browser/modules/D3Visualization/components/Inspector.jsx +++ b/src/browser/modules/D3Visualization/components/Inspector.jsx @@ -42,9 +42,8 @@ import ClickableUrls from '../../../components/clickable-urls' 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) => ( @@ -118,7 +117,7 @@ export class InspectorComponent extends Component { } if (type === 'status-item') { inspectorContent = ( - + {item} ) @@ -142,9 +141,7 @@ export class InspectorComponent extends Component { ) } else if (type === 'canvas') { - const description = `Displaying ${item.nodeCount} nodes, ${ - item.relationshipCount - } relationships.` + const description = `Displaying ${item.nodeCount} nodes, ${item.relationshipCount} relationships.` inspectorContent = ( From 2ebca26d501b69efe3bd6e149122d12430e5065e Mon Sep 17 00:00:00 2001 From: Jas Kuner Date: Wed, 4 Dec 2019 18:32:59 +0000 Subject: [PATCH 2/6] commas-node-and-relation-count-new: thousand comma separation utility created. naming needs looking at. --- .../D3Visualization/components/Inspector.jsx | 7 ++- .../D3Visualization/components/Legend.jsx | 9 ++- src/browser/modules/DBMSInfo/MetaItems.jsx | 3 +- .../utils/thousands-separated-number.js | 21 +++++++ .../utils/thousands-separated-number.test.js | 55 +++++++++++++++++++ 5 files changed, 90 insertions(+), 5 deletions(-) create mode 100644 src/shared/utils/thousands-separated-number.js create mode 100644 src/shared/utils/thousands-separated-number.test.js diff --git a/src/browser/modules/D3Visualization/components/Inspector.jsx b/src/browser/modules/D3Visualization/components/Inspector.jsx index cdb8f90ea94..a1b44e76624 100644 --- a/src/browser/modules/D3Visualization/components/Inspector.jsx +++ b/src/browser/modules/D3Visualization/components/Inspector.jsx @@ -39,6 +39,7 @@ import { import { GrassEditor } from './GrassEditor' import { RowExpandToggleComponent } from './RowExpandToggle' import ClickableUrls from '../../../components/clickable-urls' +import thousandsCommaSeparatedNumber from '../../../../shared/utils/thousands-separated-number' const mapItemProperties = itemProperties => itemProperties @@ -141,7 +142,11 @@ export class InspectorComponent extends Component { ) } else if (type === 'canvas') { - const description = `Displaying ${item.nodeCount} nodes, ${item.relationshipCount} relationships.` + const description = `Displaying ${thousandsCommaSeparatedNumber( + item.nodeCount + )} nodes, ${thousandsCommaSeparatedNumber( + item.relationshipCount + )} relationships.` inspectorContent = ( diff --git a/src/browser/modules/D3Visualization/components/Legend.jsx b/src/browser/modules/D3Visualization/components/Legend.jsx index 2d03590baf4..c8376e592a6 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 thousandsCommaSeparatedNumber from '../../../../shared/utils/thousands-separated-number' export class LegendComponent extends Component { constructor (props) { @@ -75,9 +76,9 @@ export class LegendComponent extends Component { className='token token-label' > {legendItemKey} - {`(${ + {`(${thousandsCommaSeparatedNumber( labels[legendItemKey].count - })`} + )})`} @@ -134,7 +135,9 @@ export class LegendComponent extends Component { > {legendItemKey} - {`(${legendItems[legendItemKey].count})`} + {`(${thousandsCommaSeparatedNumber( + legendItems[legendItemKey].count + )})`} diff --git a/src/browser/modules/DBMSInfo/MetaItems.jsx b/src/browser/modules/DBMSInfo/MetaItems.jsx index af4961b5b77..87d0c0617f1 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 thousandsCommaSeparatedNumber from '../../../shared/utils/thousands-separated-number' 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}(${thousandsCommaSeparatedNumber(count)})` } items.unshift(str) } diff --git a/src/shared/utils/thousands-separated-number.js b/src/shared/utils/thousands-separated-number.js new file mode 100644 index 00000000000..7b9fd568644 --- /dev/null +++ b/src/shared/utils/thousands-separated-number.js @@ -0,0 +1,21 @@ +/* + * 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 => + isNaN(parseInt(value, 10)) + ? value + : parseInt(value, 10).toLocaleString('en-US') diff --git a/src/shared/utils/thousands-separated-number.test.js b/src/shared/utils/thousands-separated-number.test.js new file mode 100644 index 00000000000..ec4b7a5b8b4 --- /dev/null +++ b/src/shared/utils/thousands-separated-number.test.js @@ -0,0 +1,55 @@ +/* + * 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 thousandsSeparatedNumber from './thousands-separated-number' + +describe('thousandsSeparatedNumber', () => { + test('should return the original value if isNaN(value) is true', () => { + // Given + const value = null + + // When + const returnValue = thousandsSeparatedNumber(value) + + // Then + expect(returnValue).toBe(value) + }) + test('should return a thousands comma separated number if isNaN(value) is false', () => { + let value, returnValue + // Given + value = '123456789' + + // When + returnValue = thousandsSeparatedNumber(value) + + // Then + expect(returnValue).toBe('123,456,789') + + // Given + value = 987654312345 + + // When + returnValue = thousandsSeparatedNumber(value) + + // Then + expect(returnValue).toBe('987,654,312,345') + }) +}) From d225a55cefd9d2e75ecc5b450a5e2bba656701c6 Mon Sep 17 00:00:00 2001 From: Jas Kuner Date: Wed, 4 Dec 2019 18:34:41 +0000 Subject: [PATCH 3/6] commas-node-and-relation-count: remove a classname added just for a test build --- src/browser/modules/D3Visualization/components/Inspector.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser/modules/D3Visualization/components/Inspector.jsx b/src/browser/modules/D3Visualization/components/Inspector.jsx index a1b44e76624..d07d46887a2 100644 --- a/src/browser/modules/D3Visualization/components/Inspector.jsx +++ b/src/browser/modules/D3Visualization/components/Inspector.jsx @@ -118,7 +118,7 @@ export class InspectorComponent extends Component { } if (type === 'status-item') { inspectorContent = ( - + {item} ) From b0c006b52713bbbda0d5266e59d10b34e2f874de Mon Sep 17 00:00:00 2001 From: Jas Kuner Date: Thu, 5 Dec 2019 13:55:12 +0000 Subject: [PATCH 4/6] commas-node-and-relation-count-new: rename util to be more suitable and rework the function with logical operators --- .../modules/D3Visualization/components/Inspector.jsx | 8 +++----- .../modules/D3Visualization/components/Legend.jsx | 8 +++----- src/browser/modules/DBMSInfo/MetaItems.jsx | 4 ++-- ...ands-separated-number.js => number-to-US-locale.js} | 4 +--- ...ated-number.test.js => number-to-US-locale.test.js} | 10 +++++----- 5 files changed, 14 insertions(+), 20 deletions(-) rename src/shared/utils/{thousands-separated-number.js => number-to-US-locale.js} (89%) rename src/shared/utils/{thousands-separated-number.test.js => number-to-US-locale.test.js} (83%) diff --git a/src/browser/modules/D3Visualization/components/Inspector.jsx b/src/browser/modules/D3Visualization/components/Inspector.jsx index d07d46887a2..3e325fcff5a 100644 --- a/src/browser/modules/D3Visualization/components/Inspector.jsx +++ b/src/browser/modules/D3Visualization/components/Inspector.jsx @@ -39,7 +39,7 @@ import { import { GrassEditor } from './GrassEditor' import { RowExpandToggleComponent } from './RowExpandToggle' import ClickableUrls from '../../../components/clickable-urls' -import thousandsCommaSeparatedNumber from '../../../../shared/utils/thousands-separated-number' +import numberToUSLocale from '../../../../shared/utils/number-to-US-locale' const mapItemProperties = itemProperties => itemProperties @@ -142,11 +142,9 @@ export class InspectorComponent extends Component { ) } else if (type === 'canvas') { - const description = `Displaying ${thousandsCommaSeparatedNumber( + const description = `Displaying ${numberToUSLocale( item.nodeCount - )} nodes, ${thousandsCommaSeparatedNumber( - item.relationshipCount - )} relationships.` + )} 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 c8376e592a6..22a318f70fc 100644 --- a/src/browser/modules/D3Visualization/components/Legend.jsx +++ b/src/browser/modules/D3Visualization/components/Legend.jsx @@ -31,7 +31,7 @@ import { StyledLegendInlineList } from './styled' import { RowExpandToggleComponent } from './RowExpandToggle' -import thousandsCommaSeparatedNumber from '../../../../shared/utils/thousands-separated-number' +import numberToUSLocale from '../../../../shared/utils/number-to-US-locale' export class LegendComponent extends Component { constructor (props) { @@ -76,7 +76,7 @@ export class LegendComponent extends Component { className='token token-label' > {legendItemKey} - {`(${thousandsCommaSeparatedNumber( + {`(${numberToUSLocale( labels[legendItemKey].count )})`} @@ -135,9 +135,7 @@ export class LegendComponent extends Component { > {legendItemKey} - {`(${thousandsCommaSeparatedNumber( - legendItems[legendItemKey].count - )})`} + {`(${numberToUSLocale(legendItems[legendItemKey].count)})`} diff --git a/src/browser/modules/DBMSInfo/MetaItems.jsx b/src/browser/modules/DBMSInfo/MetaItems.jsx index 87d0c0617f1..b22c5bba826 100644 --- a/src/browser/modules/DBMSInfo/MetaItems.jsx +++ b/src/browser/modules/DBMSInfo/MetaItems.jsx @@ -34,7 +34,7 @@ import { StyledShowMoreLink } from './styled' import Render from 'browser-components/Render' -import thousandsCommaSeparatedNumber from '../../../shared/utils/thousands-separated-number' +import numberToUSLocale from '../../../shared/utils/number-to-US-locale' const ShowMore = ({ total, shown, moreStep, onMore }) => { const numMore = total - shown > moreStep ? moreStep : total - shown @@ -65,7 +65,7 @@ const createItems = ( if (showStar) { let str = '*' if (count) { - str = `${str}(${thousandsCommaSeparatedNumber(count)})` + str = `${str}(${numberToUSLocale(count)})` } items.unshift(str) } diff --git a/src/shared/utils/thousands-separated-number.js b/src/shared/utils/number-to-US-locale.js similarity index 89% rename from src/shared/utils/thousands-separated-number.js rename to src/shared/utils/number-to-US-locale.js index 7b9fd568644..8dd6f1fb3e1 100644 --- a/src/shared/utils/thousands-separated-number.js +++ b/src/shared/utils/number-to-US-locale.js @@ -16,6 +16,4 @@ */ export default value => - isNaN(parseInt(value, 10)) - ? value - : parseInt(value, 10).toLocaleString('en-US') + (parseInt(value, 10) && parseInt(value, 10).toLocaleString('en-US')) || value diff --git a/src/shared/utils/thousands-separated-number.test.js b/src/shared/utils/number-to-US-locale.test.js similarity index 83% rename from src/shared/utils/thousands-separated-number.test.js rename to src/shared/utils/number-to-US-locale.test.js index ec4b7a5b8b4..ea0c37607f2 100644 --- a/src/shared/utils/thousands-separated-number.test.js +++ b/src/shared/utils/number-to-US-locale.test.js @@ -19,15 +19,15 @@ */ /* global describe, test, expect */ -import thousandsSeparatedNumber from './thousands-separated-number' +import numberToUSLocale from './number-to-US-locale' -describe('thousandsSeparatedNumber', () => { +describe('numberToUSLocale', () => { test('should return the original value if isNaN(value) is true', () => { // Given const value = null // When - const returnValue = thousandsSeparatedNumber(value) + const returnValue = numberToUSLocale(value) // Then expect(returnValue).toBe(value) @@ -38,7 +38,7 @@ describe('thousandsSeparatedNumber', () => { value = '123456789' // When - returnValue = thousandsSeparatedNumber(value) + returnValue = numberToUSLocale(value) // Then expect(returnValue).toBe('123,456,789') @@ -47,7 +47,7 @@ describe('thousandsSeparatedNumber', () => { value = 987654312345 // When - returnValue = thousandsSeparatedNumber(value) + returnValue = numberToUSLocale(value) // Then expect(returnValue).toBe('987,654,312,345') From cc265b5d1ad53224548042bf6e11986d6e6cd9eb Mon Sep 17 00:00:00 2001 From: Jas Kuner Date: Thu, 5 Dec 2019 15:25:19 +0000 Subject: [PATCH 5/6] 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 --- .../D3Visualization/components/Inspector.jsx | 2 +- .../D3Visualization/components/Legend.jsx | 2 +- src/browser/modules/DBMSInfo/MetaItems.jsx | 2 +- src/shared/utils/number-to-US-locale.js | 9 ++++- src/shared/utils/number-to-US-locale.test.js | 40 ++++++++++++++++++- 5 files changed, 49 insertions(+), 6 deletions(-) diff --git a/src/browser/modules/D3Visualization/components/Inspector.jsx b/src/browser/modules/D3Visualization/components/Inspector.jsx index 3e325fcff5a..df99e8e3db7 100644 --- a/src/browser/modules/D3Visualization/components/Inspector.jsx +++ b/src/browser/modules/D3Visualization/components/Inspector.jsx @@ -39,7 +39,7 @@ import { import { GrassEditor } from './GrassEditor' import { RowExpandToggleComponent } from './RowExpandToggle' import ClickableUrls from '../../../components/clickable-urls' -import numberToUSLocale from '../../../../shared/utils/number-to-US-locale' +import numberToUSLocale from 'shared/utils/number-to-US-locale' const mapItemProperties = itemProperties => itemProperties diff --git a/src/browser/modules/D3Visualization/components/Legend.jsx b/src/browser/modules/D3Visualization/components/Legend.jsx index 22a318f70fc..e3062f34cec 100644 --- a/src/browser/modules/D3Visualization/components/Legend.jsx +++ b/src/browser/modules/D3Visualization/components/Legend.jsx @@ -31,7 +31,7 @@ import { StyledLegendInlineList } from './styled' import { RowExpandToggleComponent } from './RowExpandToggle' -import numberToUSLocale from '../../../../shared/utils/number-to-US-locale' +import numberToUSLocale from 'shared/utils/number-to-US-locale' export class LegendComponent extends Component { constructor (props) { diff --git a/src/browser/modules/DBMSInfo/MetaItems.jsx b/src/browser/modules/DBMSInfo/MetaItems.jsx index b22c5bba826..1f4ba5d2dd4 100644 --- a/src/browser/modules/DBMSInfo/MetaItems.jsx +++ b/src/browser/modules/DBMSInfo/MetaItems.jsx @@ -34,7 +34,7 @@ import { StyledShowMoreLink } from './styled' import Render from 'browser-components/Render' -import numberToUSLocale from '../../../shared/utils/number-to-US-locale' +import numberToUSLocale from 'shared/utils/number-to-US-locale' const ShowMore = ({ total, shown, moreStep, onMore }) => { const numMore = total - shown > moreStep ? moreStep : total - shown diff --git a/src/shared/utils/number-to-US-locale.js b/src/shared/utils/number-to-US-locale.js index 8dd6f1fb3e1..37dabd27d18 100644 --- a/src/shared/utils/number-to-US-locale.js +++ b/src/shared/utils/number-to-US-locale.js @@ -15,5 +15,10 @@ * */ -export default value => - (parseInt(value, 10) && parseInt(value, 10).toLocaleString('en-US')) || value +export default value => { + value = 0 + return ( + (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 index ea0c37607f2..81f348d8274 100644 --- a/src/shared/utils/number-to-US-locale.test.js +++ b/src/shared/utils/number-to-US-locale.test.js @@ -32,8 +32,46 @@ describe('numberToUSLocale', () => { // Then expect(returnValue).toBe(value) }) - test('should return a thousands comma separated number if isNaN(value) is false', () => { + 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' From 160a260d4fe9ee7ab6fb7e7ac2154f4659305017 Mon Sep 17 00:00:00 2001 From: Jas Kuner Date: Thu, 5 Dec 2019 15:26:59 +0000 Subject: [PATCH 6/6] commas-node-and-relation-count-new: remove accidentally inserted local mock for node and relationship values --- src/shared/utils/number-to-US-locale.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/shared/utils/number-to-US-locale.js b/src/shared/utils/number-to-US-locale.js index 37dabd27d18..e71aff7b301 100644 --- a/src/shared/utils/number-to-US-locale.js +++ b/src/shared/utils/number-to-US-locale.js @@ -15,10 +15,6 @@ * */ -export default value => { - value = 0 - return ( - (parseInt(value, 10) >= 0 && parseInt(value, 10).toLocaleString('en-US')) || - value - ) -} +export default value => + (parseInt(value, 10) >= 0 && parseInt(value, 10).toLocaleString('en-US')) || + value