feat(Table): add locale props

To format number and dates according to the locale.
Default locale comes from the navigator language.

packages/visualizations-react/stories/Table/Table.stories.tsx

@@ -73,6 +73,7 @@ const options: TableOptions = {
     source: {
         href: '',
     },
+    locale: 'fr',
 };
 
 const Template: ComponentStory<typeof Table> = (args) => <Table {...args} />;

packages/visualizations/src/components/Table/Cell/Format/DateFormat.svelte

@@ -1,22 +1,24 @@
 <script lang="ts">
+    import store from '../../store';
     import type { DateColumn } from '../../types';
+
     import { warn } from './utils';
 
     export let rawValue: unknown;
     export let options: DateColumn['options'];
 
-    function getDisplayValue(v: unknown) {
+    function getDisplayValue(v: unknown, locale: string) {
         if (
             (typeof v === 'string' || typeof v === 'number') &&
             !Number.isNaN(new Date(v).getTime())
         ) {
-            return new Intl.DateTimeFormat(navigator.language, options).format(new Date(v));
+            return new Intl.DateTimeFormat(locale, options).format(new Date(v));
         }
         warn(v, 'date');
         return v;
     }
 
-    $: value = getDisplayValue(rawValue);
+    $: value = getDisplayValue(rawValue, $store.locale);
 </script>
 
 {value}

packages/visualizations/src/components/Table/Cell/Format/NumberFormat.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
+    import store from '../../store';
     import type { NumberColumn } from '../../types';
+
     import { warn } from './utils';
 
     export let rawValue: unknown;
     export let options: NumberColumn['options'];
 
-    function getDisplayValue(v: unknown) {
+    function getDisplayValue(v: unknown, locale: string) {
         if (!Number.isFinite(v)) {
             warn(v, 'number');
             return v;
         }
-        return new Intl.NumberFormat(navigator.language, options).format(v as number);
+        return new Intl.NumberFormat(locale, options).format(v as number);
     }
 
-    $: value = getDisplayValue(rawValue);
+    $: value = getDisplayValue(rawValue, $store.locale);
 </script>
 
 {value}

packages/visualizations/src/components/Table/Table.svelte

@@ -7,6 +7,7 @@
     import SourceLink from '../utils/SourceLink.svelte';
     import Header from './Header.svelte';
     import Body from './Body.svelte';
+    import { updateLocale } from './store';
 
     export let data: Async<TableData>;
     export let options: TableOptions;
@@ -16,8 +17,9 @@
     $: ({ value: records } = data);
     // FIXME: Eslint is in conflict with prettier
     // eslint-disable-next-line object-curly-newline
-    $: ({ columns, title, subtitle, description, source, unstyled } = options);
+    $: ({ columns, title, subtitle, description, source, unstyled, locale } = options);
     $: defaultStyle = !unstyled;
+    $: updateLocale(locale);
 </script>
 
 <div class="ods-dataviz-sdk-table" class:ods-dataviz-sdk-table--default={defaultStyle}>

packages/visualizations/src/components/Table/store.ts

@@ -0,0 +1,17 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { writable } from 'svelte/store';
+
+type TableStore = {
+    locale: string;
+};
+
+const defaultLocale = navigator.language;
+
+const store = writable<TableStore>({ locale: defaultLocale });
+
+const updateLocale = (locale: string = defaultLocale) => {
+    store.update((previousValue) => ({ ...previousValue, locale }));
+};
+
+export { updateLocale };
+export default store;

packages/visualizations/src/components/Table/types.ts

@@ -71,6 +71,8 @@ export type TableOptions = {
     subtitle?: string;
     description?: string;
     source?: Source;
+    /** To format date and number with the right locale. Default is from browser language */
+    locale?: string;
     /**
      * Removes all the presentational styles.
      * Default is `false`.