Merge pull request #1286 from dbgate/feature/custom-thousands-separator

Feature/custom thousands separator

packages/tools/src/stringTools.ts

@@ -200,6 +200,12 @@ function stringifyJsonToGrid(value): ReturnType<typeof stringifyCellValue> {
   return { value: '(JSON)', gridStyle: 'nullCellStyle' };
 }
 
+function formatNumberCustomSeparator(value, thousandsSeparator) {
+    const [intPart, decPart] = value.split('.');
+    const intPartWithSeparator = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator);
+    return decPart ? `${intPartWithSeparator}.${decPart}` : intPartWithSeparator;
+}
+
 export function stringifyCellValue(
   value,
   intent:
@@ -210,7 +216,7 @@ export function stringifyCellValue(
     | 'exportIntent'
     | 'clipboardIntent',
   editorTypes?: DataEditorTypesBehaviour,
-  gridFormattingOptions?: { useThousandsSeparator?: boolean },
+  gridFormattingOptions?: { thousandsSeparator?: string},
   jsonParsedValue?: any
 ): {
   value: string;
@@ -351,13 +357,15 @@ export function stringifyCellValue(
   if (_isNumber(value)) {
     switch (intent) {
       case 'gridCellIntent':
-        return {
-          value:
-            gridFormattingOptions?.useThousandsSeparator && (value >= 10000 || value <= -10000)
-              ? value.toLocaleString()
-              : value.toString(),
-          gridStyle: 'valueCellStyle',
-        };
+        const separator = gridFormattingOptions?.thousandsSeparator;
+        let formattedValue;
+        if (separator === 'none' || (value < 1000 && value > -1000)) formattedValue = value.toString();
+        else if (separator === 'system') formattedValue = value.toLocaleString();
+        else if (separator === 'space') formattedValue = formatNumberCustomSeparator(value.toString(), ' ');
+        else if (separator === 'nobreakspace') formattedValue = formatNumberCustomSeparator(value.toString(), '\u202F');
+        else if (separator === 'comma') formattedValue = formatNumberCustomSeparator(value.toString(), ',');
+        else if (separator === 'dot') formattedValue = formatNumberCustomSeparator(value.toString(), '.');
+        return { value: formattedValue, gridStyle: 'valueCellStyle' };
       default:
         return { value: value.toString() };
     }

packages/web/src/datagrid/CellValue.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import _ from 'lodash';
-  import { getBoolSettingsValue } from '../settings/settingsTools';
+  import { getStringSettingsValue } from '../settings/settingsTools';
   import { stringifyCellValue } from 'dbgate-tools';
 
   export let rowData;
@@ -13,7 +13,7 @@
     value,
     'gridCellIntent',
     editorTypes,
-    { useThousandsSeparator: getBoolSettingsValue('dataGrid.thousandsSeparator', false) },
+    { thousandsSeparator: getStringSettingsValue('dataGrid.thousandsSeparatorChar', 'system') },
     jsonParsedValue
   );
 

packages/web/src/settings/DataGridSettings.svelte

@@ -27,11 +27,19 @@ defaultValue="100"
 {/if}
 <!-- <FormCheckboxField name="dataGrid.showHintColumns" label="Show foreign key hints" defaultValue={true} /> -->
 
-<FormCheckboxField
-name="dataGrid.thousandsSeparator"
-label={_t('settings.dataGrid.thousandsSeparator', {
-    defaultMessage: 'Use thousands separator for numbers',
-})}
+<FormSelectField
+label={_t('settings.dataGrid.thousandsSeparator', { defaultMessage: 'Thousands separator for numbers' })}
+name="dataGrid.thousandsSeparatorChar"
+isNative
+defaultValue='none'
+options={[
+    { value: 'none', label: _t('settings.dataGrid.thousandsSeparator.none', { defaultMessage: 'None' }) },
+    { value: 'system', label: _t('settings.dataGrid.thousandsSeparator.system', { defaultMessage: 'System' }) },
+    { value: 'space', label: _t('settings.dataGrid.thousandsSeparator.space', { defaultMessage: 'Space' }) },
+    { value: 'nobreakspace', label: _t('settings.dataGrid.thousandsSeparator.narrowNoBreakSpace', { defaultMessage: 'Narrow no-break space' }) },
+    { value: 'comma', label: _t('settings.dataGrid.thousandsSeparator.comma', { defaultMessage: 'Comma (,)' }) },
+    { value: 'dot', label: _t('settings.dataGrid.thousandsSeparator.dot', { defaultMessage: 'Dot (.)' }) },
+]}
 />
 
 <FormTextField