better formating

2026-04-28 01:26:01 +00:00 · 2025-12-03 18:21:04 +01:00
parent 910f9cadfe
commit 30b4c85c5a
2 changed files with 126 additions and 115 deletions
--- a/packages/tools/src/stringTools.ts
+++ b/packages/tools/src/stringTools.ts
@@ -45,14 +45,15 @@ export function hexStringToArray(inputString) {

 export function base64ToHex(base64String) {
  const binaryString = atob(base64String);
-  const hexString = Array.from(binaryString, c =>
-    c.charCodeAt(0).toString(16).padStart(2, '0')
-  ).join('');
+  const hexString = Array.from(binaryString, c => c.charCodeAt(0).toString(16).padStart(2, '0')).join('');
  return '0x' + hexString.toUpperCase();
-};
+}

 export function hexToBase64(hexString) {
-  const binaryString = hexString.match(/.{1,2}/g).map(byte => String.fromCharCode(parseInt(byte, 16))).join('');
+  const binaryString = hexString
+    .match(/.{1,2}/g)
+    .map(byte => String.fromCharCode(parseInt(byte, 16)))
+    .join('');
  return btoa(binaryString);
 }

@@ -68,9 +69,9 @@ export function parseCellValue(value, editorTypes?: DataEditorTypesBehaviour) {
    if (mHex) {
      return {
        $binary: {
-          base64: hexToBase64(value.substring(2))
-        }
-      }
+          base64: hexToBase64(value.substring(2)),
+        },
+      };
    }
  }

@@ -201,9 +202,23 @@ function stringifyJsonToGrid(value): ReturnType<typeof stringifyCellValue> {
 }

 function formatNumberCustomSeparator(value, thousandsSeparator) {
-    const [intPart, decPart] = value.split('.');
-    const intPartWithSeparator = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator);
-    return decPart ? `${intPartWithSeparator}.${decPart}` : intPartWithSeparator;
+  const [intPart, decPart] = value.split('.');
+  const intPartWithSeparator = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator);
+  return decPart ? `${intPartWithSeparator}.${decPart}` : intPartWithSeparator;
+}
+
+function formatCellNumber(value, gridFormattingOptions?: { thousandsSeparator?: string }) {
+  const separator = gridFormattingOptions?.thousandsSeparator;
+  if (_isNumber(value)) {
+    if (separator === 'none' || (value < 1000 && value > -1000)) return value.toString();
+    if (separator === 'system') return value.toLocaleString();
+  }
+  // fallback for system locale
+  if (separator === 'space' || separator === 'system') return formatNumberCustomSeparator(value.toString(), ' ');
+  if (separator === 'narrowspace') return formatNumberCustomSeparator(value.toString(), '\u202F');
+  if (separator === 'comma') return formatNumberCustomSeparator(value.toString(), ',');
+  if (separator === 'dot') return formatNumberCustomSeparator(value.toString(), '.');
+  return value.toString();
 }

 export function stringifyCellValue(
@@ -216,7 +231,7 @@ export function stringifyCellValue(
    | 'exportIntent'
    | 'clipboardIntent',
  editorTypes?: DataEditorTypesBehaviour,
-  gridFormattingOptions?: { thousandsSeparator?: string},
+  gridFormattingOptions?: { thousandsSeparator?: string },
  jsonParsedValue?: any
 ): {
  value: string;
@@ -262,7 +277,7 @@ export function stringifyCellValue(
    //   return { value: '0x' + arrayToHexString(value.data), gridStyle: 'valueCellStyle' };
    // }
  }
-  
+
  if (editorTypes?.parseObjectIdAsDollar) {
    if (value?.$oid) {
      switch (intent) {
@@ -276,13 +291,13 @@ export function stringifyCellValue(
  }
  if (value?.$bigint) {
    return {
-      value: value.$bigint,
+      value: formatCellNumber(value.$bigint, gridFormattingOptions),
      gridStyle: 'valueCellStyle',
    };
  }
  if (typeof value === 'bigint') {
    return {
-      value: value.toString(),
+      value: formatCellNumber(value.toString(), gridFormattingOptions),
      gridStyle: 'valueCellStyle',
    };
  }
@@ -358,14 +373,7 @@ export function stringifyCellValue(
    switch (intent) {
      case 'gridCellIntent':
        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' };
+        return { value: formatCellNumber(value, gridFormattingOptions), gridStyle: 'valueCellStyle' };
      default:
        return { value: value.toString() };
    }
--- a/packages/web/src/settings/DataGridSettings.svelte
+++ b/packages/web/src/settings/DataGridSettings.svelte
@@ -1,102 +1,105 @@
 <script lang="ts">
-  import FormCheckboxField from "../forms/FormCheckboxField.svelte";
-  import FormSelectField from "../forms/FormSelectField.svelte";
-  import FormTextField from "../forms/FormTextField.svelte";
-  import { _t } from "../translations";
-  import { isProApp } from "../utility/proTools";
-
-
+  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+  import FormSelectField from '../forms/FormSelectField.svelte';
+  import FormTextField from '../forms/FormTextField.svelte';
+  import { _t } from '../translations';
+  import { isProApp } from '../utility/proTools';
 </script>

 <div class="wrapper">
-    <div class="heading">{_t('settings.dataGrid.title', { defaultMessage: 'Data grid' })}</div>
-<FormTextField
-name="dataGrid.pageSize"
-label={_t('settings.dataGrid.pageSize', {
-    defaultMessage: 'Page size (number of rows for incremental loading, must be between 5 and 50000)',
-})}
-defaultValue="100"
-/>
-{#if isProApp()}
-<FormCheckboxField
-    name="dataGrid.showHintColumns"
-    label={_t('settings.dataGrid.showHintColumns', { defaultMessage: 'Show foreign key hints' })}
-    defaultValue={true}
-    data-testid="DataGridSettings_showHintColumns"
-/>
-{/if}
-<!-- <FormCheckboxField name="dataGrid.showHintColumns" label="Show foreign key hints" defaultValue={true} /> -->
+  <div class="heading">{_t('settings.dataGrid.title', { defaultMessage: 'Data grid' })}</div>
+  <FormTextField
+    name="dataGrid.pageSize"
+    label={_t('settings.dataGrid.pageSize', {
+      defaultMessage: 'Page size (number of rows for incremental loading, must be between 5 and 50000)',
+    })}
+    defaultValue="100"
+  />
+  {#if isProApp()}
+    <FormCheckboxField
+      name="dataGrid.showHintColumns"
+      label={_t('settings.dataGrid.showHintColumns', { defaultMessage: 'Show foreign key hints' })}
+      defaultValue={true}
+      data-testid="DataGridSettings_showHintColumns"
+    />
+  {/if}
+  <!-- <FormCheckboxField name="dataGrid.showHintColumns" label="Show foreign key hints" defaultValue={true} /> -->

-<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 (.)' }) },
-]}
-/>
+  <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: 'narrowspace',
+        label: _t('settings.dataGrid.thousandsSeparator.narrowSpace', {
+          defaultMessage: 'Narrow space',
+        }),
+      },
+      { value: 'comma', label: _t('settings.dataGrid.thousandsSeparator.comma', { defaultMessage: 'Comma (,)' }) },
+      { value: 'dot', label: _t('settings.dataGrid.thousandsSeparator.dot', { defaultMessage: 'Dot (.)' }) },
+    ]}
+  />

-<FormTextField
-name="dataGrid.defaultAutoRefreshInterval"
-label={_t('settings.dataGrid.defaultAutoRefreshInterval', {
-    defaultMessage: 'Default grid auto refresh interval in seconds',
-})}
-defaultValue="10"
-/>
+  <FormTextField
+    name="dataGrid.defaultAutoRefreshInterval"
+    label={_t('settings.dataGrid.defaultAutoRefreshInterval', {
+      defaultMessage: 'Default grid auto refresh interval in seconds',
+    })}
+    defaultValue="10"
+  />

-<FormCheckboxField
-name="dataGrid.alignNumbersRight"
-label={_t('settings.dataGrid.alignNumbersRight', { defaultMessage: 'Align numbers to right' })}
-defaultValue={false}
-/>
+  <FormCheckboxField
+    name="dataGrid.alignNumbersRight"
+    label={_t('settings.dataGrid.alignNumbersRight', { defaultMessage: 'Align numbers to right' })}
+    defaultValue={false}
+  />

-<FormTextField
-name="dataGrid.collectionPageSize"
-label={_t('settings.dataGrid.collectionPageSize', {
-    defaultMessage: 'Collection page size (for MongoDB JSON view, must be between 5 and 1000)',
-})}
-defaultValue="50"
-/>
+  <FormTextField
+    name="dataGrid.collectionPageSize"
+    label={_t('settings.dataGrid.collectionPageSize', {
+      defaultMessage: 'Collection page size (for MongoDB JSON view, must be between 5 and 1000)',
+    })}
+    defaultValue="50"
+  />

-<FormSelectField
-label={_t('settings.dataGrid.coloringMode', { defaultMessage: 'Row coloring mode' })}
-name="dataGrid.coloringMode"
-isNative
-defaultValue="36"
-options={[
-    {
-    value: '36',
-    label: _t('settings.dataGrid.coloringMode.36', { defaultMessage: 'Every 3rd and 6th row' }),
-    },
-    {
-    value: '2-primary',
-    label: _t('settings.dataGrid.coloringMode.2-primary', {
-        defaultMessage: 'Every 2-nd row, primary color',
-    }),
-    },
-    {
-    value: '2-secondary',
-    label: _t('settings.dataGrid.coloringMode.2-secondary', {
-        defaultMessage: 'Every 2-nd row, secondary color',
-    }),
-    },
-    { value: 'none', label: _t('settings.dataGrid.coloringMode.none', { defaultMessage: 'None' }) },
-]}
-/>
+  <FormSelectField
+    label={_t('settings.dataGrid.coloringMode', { defaultMessage: 'Row coloring mode' })}
+    name="dataGrid.coloringMode"
+    isNative
+    defaultValue="36"
+    options={[
+      {
+        value: '36',
+        label: _t('settings.dataGrid.coloringMode.36', { defaultMessage: 'Every 3rd and 6th row' }),
+      },
+      {
+        value: '2-primary',
+        label: _t('settings.dataGrid.coloringMode.2-primary', {
+          defaultMessage: 'Every 2-nd row, primary color',
+        }),
+      },
+      {
+        value: '2-secondary',
+        label: _t('settings.dataGrid.coloringMode.2-secondary', {
+          defaultMessage: 'Every 2-nd row, secondary color',
+        }),
+      },
+      { value: 'none', label: _t('settings.dataGrid.coloringMode.none', { defaultMessage: 'None' }) },
+    ]}
+  />

-<FormCheckboxField
-name="dataGrid.showAllColumnsWhenSearch"
-label={_t('settings.dataGrid.showAllColumnsWhenSearch', {
-    defaultMessage: 'Show all columns when searching',
-})}
-defaultValue={false}
-/>
+  <FormCheckboxField
+    name="dataGrid.showAllColumnsWhenSearch"
+    label={_t('settings.dataGrid.showAllColumnsWhenSearch', {
+      defaultMessage: 'Show all columns when searching',
+    })}
+    defaultValue={false}
+  />
 </div>

 <style>
@@ -107,11 +110,11 @@ defaultValue={false}
    margin-top: var(--dim-large-form-margin);
  }

-  .wrapper :global(select){
+  .wrapper :global(select) {
    max-width: 400px;
  }

-  .wrapper :global(input){
+  .wrapper :global(input) {
    max-width: 400px;
  }
-</style>
+</style>