fix: lift accessor function to table

opendatasoft · Dec 9, 2024 · bb3988f · bb3988f
1 parent f8128d6
commit bb3988f
Show file tree

Hide file tree

Showing 15 changed files with 181 additions and 129 deletions.
diff --git a/packages/visualizations-react/stories/Table/data.ts b/packages/visualizations-react/stories/Table/data.ts
@@ -8,8 +8,10 @@ export default [
         wordCount: 1200,
         readingTime: 5.5,
         url: 'htt:broken-url',
-        geopoint: [2.357573,48.837904],
-        geoshape: 'centre-val-de-loire',
+        geopoint: [2.357573, 48.837904],
+        region: 'Centre Val de Loire',
+        geoshape:
+            'https://france-geojson.gregoiredavid.fr/repo/regions/centre-val-de-loire/region-centre-val-de-loire.geojson',
     },
     {
         title: 'pellentesque nec blog post',
@@ -21,8 +23,10 @@ export default [
         wordCount: 800,
         readingTime: 3.8,
         url: 'https://example.com/pellentesque-nec',
-        geopoint: [2.357573,48.837904],
-        geoshape: 'bretagne',
+        geopoint: [2.357573, 48.837904],
+        region: 'Bretagne',
+        geoshape:
+            'https://france-geojson.gregoiredavid.fr/repo/regions/bretagne/region-bretagne.geojson',
     },
     {
         title: 'fusce sit amet blog post',
@@ -34,8 +38,10 @@ export default [
         wordCount: 1500,
         readingTime: 7.2,
         url: 'https://example.com/fusce-sit-amet',
-        geopoint: [2.357573,48.837904],
-        geoshape: 'nouvelle-aquitaine',
+        geopoint: [2.357573, 48.837904],
+        region: 'Nouvelle Aquitaine',
+        geoshape:
+            'https://france-geojson.gregoiredavid.fr/repo/regions/nouvelle-aquitaine/region-nouvelle-aquitaine.geojson',
     },
     {
         title: 'vestibulum nec blog post',
@@ -46,8 +52,10 @@ export default [
         wordCount: 1000,
         readingTime: 4.5,
         url: 'https://example.com/vestibulum-nec',
-        geopoint: [2.357573,48.837904],
-        geoshape: 'occitanie',
+        geopoint: [2.357573, 48.837904],
+        region: 'Occitanie',
+        geoshape:
+            'https://france-geojson.gregoiredavid.fr/repo/regions/occitanie/region-occitanie.geojson',
     },
     {
         title: 'Cras At Blog Post',
@@ -59,8 +67,10 @@ export default [
         wordCount: 1300,
         readingTime: 6.0,
         url: 'https://example.com/cras-at',
-        geopoint: [2.357573,48.837904],
-        geoshape: 'provence-alpes-cote-d-azur',
+        geopoint: [2.357573, 48.837904],
+        region: 'PACA',
+        geoshape:
+            'https://france-geojson.gregoiredavid.fr/repo/regions/provence-alpes-cote-d-azur/region-provence-alpes-cote-d-azur.geojson',
     },
     {
         title: 'Quisque A Blog Post',
@@ -72,8 +82,10 @@ export default [
         wordCount: 900,
         readingTime: 4.0,
         url: 'https://example.com/quisque-a',
-        geopoint: [2.357573,48.837904],
-        geoshape: 'auvergne-rhone-alpes',
+        geopoint: [2.357573, 48.837904],
+        region: 'Auvergnes Rhône-Alpes',
+        geoshape:
+            'https://france-geojson.gregoiredavid.fr/repo/regions/auvergne-rhone-alpes/region-auvergne-rhone-alpes.geojson',
     },
     {
         title: 'Ut Vitae Blog Post',
@@ -85,8 +97,10 @@ export default [
         wordCount: 1100,
         readingTime: 5.0,
         url: 'https://example.com/ut-vitae',
-        geopoint: [2.357573,48.837904],
-        geoshape: 'bourgogne-franche-comte',
+        geopoint: [2.357573, 48.837904],
+        region: 'Bourgogne Franche-Comté',
+        geoshape:
+            'https://france-geojson.gregoiredavid.fr/repo/regions/bourgogne-franche-comte/region-bourgogne-franche-comte.geojson',
     },
     {
         title: 'Integer Id Blog Post',
@@ -98,8 +112,10 @@ export default [
         wordCount: 950,
         readingTime: 4.2,
         url: 'https://example.com/integer-id',
-        geopoint: [2.357573,48.837904],
-        geoshape: 'grand-est',
+        geopoint: [2.357573, 48.837904],
+        region: 'Grand Est',
+        geoshape:
+            'https://france-geojson.gregoiredavid.fr/repo/regions/grand-est/region-grand-est.geojson',
     },
     {
         title: 'Undefined row',

diff --git a/packages/visualizations-react/stories/Table/options.ts b/packages/visualizations-react/stories/Table/options.ts
@@ -1,12 +1,26 @@
 import type { Column, TableOptions } from '@opendatasoft/visualizations';
 
+type Record = {
+    title: string;
+    price: number;
+    content: string;
+    datePublished: string;
+    isFeatured: boolean;
+    wordCount: number;
+    readingTime: number;
+    url: string;
+    geopoint: [number, number];
+    region: string;
+    geoshape: string;
+};
+
 export const columns: Column[] = [
     {
         title: 'Title',
         key: 'title',
         dataFormat: 'short-text',
         options: {
-            display: (title: string) => `${title.toUpperCase()}`,
+            display: (v: string) => v.toUpperCase(),
         },
     },
     {
@@ -30,7 +44,7 @@ export const columns: Column[] = [
         key: 'datePublished',
         dataFormat: 'date',
         options: {
-            display: (date: string) => `${date} 🗓️`,
+            display: (v: string) => `${v} 🗓️`,
             intl: {
                 dateStyle: 'full',
             },
@@ -41,15 +55,15 @@ export const columns: Column[] = [
         key: 'isFeatured',
         dataFormat: 'boolean',
         options: {
-            display: (bool: boolean) => (bool ? 'αληθές' : 'ψευδές'),
+            display: (v: boolean) => (v ? 'αληθές' : 'ψευδές'),
         },
     },
     {
         title: 'Word count',
         key: 'wordCount',
         dataFormat: 'number',
         options: {
-            display: (v: string) => `${v} words`,
+            display: (v: number) => `${v} words`,
         },
     },
     {
@@ -68,7 +82,7 @@ export const columns: Column[] = [
         key: 'url',
         dataFormat: 'url',
         options: {
-            display: (value: string) => value.startsWith('https://')  ? 'link' : 'broken link',
+            display: (v: string) => (v.startsWith('https://') ? 'link' : 'broken link'),
         },
     },
     {
@@ -80,10 +94,10 @@ export const columns: Column[] = [
                 style: 'https://demotiles.maplibre.org/style.json',
                 interactive: false,
             },
-            display: (v: unknown) => `longitude: ${(v as number[])[0]}, latitude: ${(v as number[])[1]}`,
+            display: (v: [number, number]) => `longitude: ${v[0]}, latitude: ${v[1]}`,
             sources: (coordinates: unknown) => ({
-                'table-stories' : {
-                    type: 'geojson', 
+                'table-stories': {
+                    type: 'geojson',
                     data: {
                         type: 'FeatureCollection',
                         features: [
@@ -96,44 +110,53 @@ export const columns: Column[] = [
                                 },
                             },
                         ],
-                    }
+                    },
                 },
             }),
-            layers: () => ([{
-                id:'table-stories-layer',
-                source: 'table-stories',
-                type: 'circle',
-                color: 'black',
-                borderColor: 'white',
-            }])
+            layers: () => [
+                {
+                    id: 'table-stories-layer',
+                    source: 'table-stories',
+                    type: 'circle',
+                    color: 'black',
+                    borderColor: 'white',
+                },
+            ],
         },
     },
+    {
+        title: 'Région',
+        key: 'region',
+        dataFormat: 'short-text',
+    },
     {
         title: 'Geo shapes',
         key: 'geoshape',
         dataFormat: 'geo',
-        options: {
+        options: (r: Record) => ({
             mapOptions: {
                 style: 'https://demotiles.maplibre.org/style.json',
                 interactive: false,
                 bbox: [-6.855469, 41.343825, 11.645508, 51.37178],
                 zoom: 3,
             },
-            display: (v : unknown) => v as string,
+            display: () => r.region,
             sources: (v: unknown) => ({
-                'table-stories' : {
-                    type: 'geojson', 
-                    data: `https://france-geojson.gregoiredavid.fr/repo/regions/${v}/region-${v}.geojson`
+                'table-stories': {
+                    type: 'geojson',
+                    data: v as string,
                 },
             }),
-            layers: () => ([{
-                id:'table-stories-layer',
-                source: 'table-stories',
-                type: "fill",
-                color: 'black',
-                borderColor: 'white',
-            }])
-        },
+            layers: () => [
+                {
+                    id: 'table-stories-layer',
+                    source: 'table-stories',
+                    type: 'fill',
+                    color: 'black',
+                    borderColor: 'white',
+                },
+            ],
+        }),
     },
 ];
 

diff --git a/packages/visualizations/src/components/Format/BooleanFormat.svelte b/packages/visualizations/src/components/Format/BooleanFormat.svelte
@@ -5,8 +5,7 @@
     type $$Props = BooleanFormatProps;
 
     export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] = (v: unknown) => v as string;
-    export let accessor: $$Props['accessor'] = (v: unknown) => v as boolean;
+    export let display: $$Props['display'] | null = null;
     export let debugWarnings = false;
 
     $: format = (v: unknown) => {
@@ -21,8 +20,6 @@
         }
         return v;
     };
-
-    $: value = format(accessor ? accessor(rawValue) : rawValue);
 </script>
 
-{value}
+{format(rawValue)}
diff --git a/packages/visualizations/src/components/Format/DateFormat.svelte b/packages/visualizations/src/components/Format/DateFormat.svelte
@@ -5,8 +5,7 @@
     type $$Props = DateFormatProps;
 
     export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] = (v: unknown) => v as string;
-    export let accessor: $$Props['accessor'] = (v: unknown) => v as string;
+    export let display: $$Props['display'] | null = null;
     export let intl: $$Props['intl'] = {};
     export let locale = 'en-En';
     export let debugWarnings = false;
@@ -27,8 +26,6 @@
         }
         return v;
     };
-
-    $: value = format(accessor ? accessor(rawValue) : rawValue);
 </script>
 
-{value}
+{format(rawValue)}
diff --git a/packages/visualizations/src/components/Format/GeoFormat.svelte b/packages/visualizations/src/components/Format/GeoFormat.svelte
@@ -9,21 +9,19 @@
     type $$Props = GeoFormatProps;
 
     export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] = (v: unknown) => v as string;
-    export let accessor: $$Props['accessor'] = (v: unknown) => v as WebGlMapData;
+    export let display: $$Props['display'] | null = null;
     export let mapOptions: $$Props['mapOptions'] = {};
-    export let sources: $$Props['sources'] = () => ({});
-    export let layers: $$Props['layers'] = () => [];
+    export let sources: $$Props['sources'] | null = null;
+    export let layers: $$Props['layers'] | null = null;
 
     let tooltipContent: Content;
     let showMap = false;
     let data: WebGlMapData;
 
     $: if (sources && layers) {
-        const value = accessor ? accessor(rawValue) : rawValue;
         data = {
-            sources: sources(value),
-            layers: layers(value),
+            sources: sources(rawValue),
+            layers: layers(rawValue),
         };
     }
 </script>

diff --git a/packages/visualizations/src/components/Format/LongTextFormat.svelte b/packages/visualizations/src/components/Format/LongTextFormat.svelte
@@ -5,8 +5,7 @@
     type $$Props = LongTextFormatProps;
 
     export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] = (v: unknown) => v as string;
-    export let accessor: $$Props['accessor'] = (v: unknown) => v as string;
+    export let display: $$Props['display'] | null = null;
     export let debugWarnings = false;
 
     $: format = (v: unknown) => {
@@ -20,9 +19,7 @@
         }
         return v;
     };
-
-    $: value = format(accessor ? accessor(rawValue) : rawValue);
 </script>
 
 <!-- Wrap value to style properly line clamp -->
-<span>{value}</span>
+<span>{format(rawValue)}</span>
diff --git a/packages/visualizations/src/components/Format/NumberFormat.svelte b/packages/visualizations/src/components/Format/NumberFormat.svelte
@@ -5,27 +5,24 @@
     type $$Props = NumberFormatProps;
 
     export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] = (v: unknown) => v as string;
-    export let accessor: $$Props['accessor'] = (v: unknown) => v as number;
+    export let display: $$Props['display'] | null = null;
     export let intl: $$Props['intl'] = {};
     export let locale = 'en-EN';
     export let debugWarnings = false;
 
-    $: format = (v: unknown) => {
+    $: format = (v: number) => {
         if (!Number.isFinite(v)) {
             if (debugWarnings) {
                 warn(v, 'number');
             }
             return v;
         }
-        const intlValue = new Intl.NumberFormat(locale, intl).format(v as number);
+        const intlValue = new Intl.NumberFormat(locale, intl).format(v);
         if (display) {
             return display(intlValue);
         }
         return intlValue;
     };
-
-    $: value = format(accessor ? accessor(rawValue) : rawValue);
 </script>
 
-{value}
+{format(rawValue)}
diff --git a/packages/visualizations/src/components/Format/ShortTextFormat.svelte b/packages/visualizations/src/components/Format/ShortTextFormat.svelte
@@ -5,8 +5,7 @@
     type $$Props = ShortTextFormatProps;
 
     export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] = (v: unknown) => v as string;
-    export let accessor: $$Props['accessor'] = (v: unknown) => v as string;
+    export let display: $$Props['display'] | null = null;
     export let debugWarnings = false;
 
     $: format = (v: unknown) => {
@@ -20,8 +19,6 @@
         }
         return v;
     };
-
-    $: value = format(accessor ? accessor(rawValue) : rawValue);
 </script>
 
-{value}
+{format(rawValue)}