chore: rename base props

opendatasoft · Dec 9, 2024 · ff2b4d1 · ff2b4d1
1 parent 0c5019b
commit ff2b4d1
Show file tree

Hide file tree

Showing 15 changed files with 126 additions and 177 deletions.
diff --git a/packages/visualizations-react/src/index.ts b/packages/visualizations-react/src/index.ts
@@ -13,8 +13,7 @@ import {
     BooleanFormat as _BooleanFormat,
     DateFormat as _DateFormat,
     GeoFormat as _GeoFormat,
-    LongTextFormat as _LongTextFormat,
-    ShortTextFormat as _ShortTextFormat,
+    TextFormat as _TextFormat,
     URLFormat as _URLFormat,
     NumberFormat as _NumberFormat,
 } from '@opendatasoft/visualizations';
@@ -30,8 +29,7 @@ import type {
     BooleanFormatProps,
     DateFormatProps,
     GeoFormatProps,
-    LongTextFormatProps,
-    ShortTextFormatProps,
+    TextFormatProps,
     URLFormatProps,
     NumberFormatProps,
 } from '@opendatasoft/visualizations';
@@ -70,13 +68,9 @@ export const GeoFormat = reactifySvelte<GeoFormatProps>(
     _GeoFormat,
     'ods-visualizations-format-geo'
 );
-export const ShortTextFormat = reactifySvelte<ShortTextFormatProps>(
-    _ShortTextFormat,
-    'ods-visualizations-format-shorttext'
-);
-export const LongTextFormat = reactifySvelte<LongTextFormatProps>(
-    _LongTextFormat,
-    'ods-visualizations-format-longtext'
+export const TextFormat = reactifySvelte<TextFormatProps>(
+    _TextFormat,
+    'ods-visualizations-format-text'
 );
 export const NumberFormat = reactifySvelte<NumberFormatProps>(
     _NumberFormat,

diff --git a/packages/visualizations-react/stories/Table/options.ts b/packages/visualizations-react/stories/Table/options.ts
@@ -20,7 +20,7 @@ export const columns: Column[] = [
         key: 'title',
         dataFormat: 'short-text',
         options: {
-            display: (v: string) => v.toUpperCase(),
+            valueToLabel: (v: string) => v.toUpperCase(),
         },
     },
     {
@@ -44,7 +44,7 @@ export const columns: Column[] = [
         key: 'datePublished',
         dataFormat: 'date',
         options: {
-            display: (v: string) => `${v} 🗓️`,
+            valueToLabel: (v: string) => `${v} 🗓️`,
             intl: {
                 dateStyle: 'full',
             },
@@ -55,15 +55,15 @@ export const columns: Column[] = [
         key: 'isFeatured',
         dataFormat: 'boolean',
         options: {
-            display: (v: boolean) => (v ? 'αληθές' : 'ψευδές'),
+            valueToLabel: (v: boolean) => (v ? 'αληθές' : 'ψευδές'),
         },
     },
     {
         title: 'Word count',
         key: 'wordCount',
         dataFormat: 'number',
         options: {
-            display: (v: number) => `${v} words`,
+            valueToLabel: (v: number) => `${v} words`,
         },
     },
     {
@@ -82,46 +82,52 @@ export const columns: Column[] = [
         key: 'url',
         dataFormat: 'url',
         options: {
-            display: (v: string) => (v.startsWith('https://') ? 'link' : 'broken link'),
+            valueToLabel: (v: string) => (v.startsWith('https://') ? 'link' : 'broken link'),
         },
     },
     {
         title: 'Geo point',
         key: 'geopoint',
         dataFormat: 'geo',
+        accessor: (r: Record) => {
+            const coordinates = r.geopoint;
+
+            return {
+                sources: {
+                    'table-stories': {
+                        type: 'geojson',
+                        data: {
+                            type: 'FeatureCollection',
+                            features: [
+                                {
+                                    id: 1,
+                                    type: 'Feature',
+                                    geometry: {
+                                        type: 'Point',
+                                        coordinates,
+                                    },
+                                },
+                            ],
+                        },
+                    },
+                },
+                layers: [
+                    {
+                        id: 'table-stories-layer',
+                        source: 'table-stories',
+                        type: 'circle',
+                        color: 'black',
+                        borderColor: 'white',
+                    },
+                ],
+            };
+        },
         options: {
             mapOptions: {
                 style: 'https://demotiles.maplibre.org/style.json',
                 interactive: false,
             },
-            display: (v: [number, number]) => `longitude: ${v[0]}, latitude: ${v[1]}`,
-            sources: (coordinates: unknown) => ({
-                'table-stories': {
-                    type: 'geojson',
-                    data: {
-                        type: 'FeatureCollection',
-                        features: [
-                            {
-                                id: 1,
-                                type: 'Feature',
-                                geometry: {
-                                    type: 'Point',
-                                    coordinates,
-                                },
-                            },
-                        ],
-                    },
-                },
-            }),
-            layers: () => [
-                {
-                    id: 'table-stories-layer',
-                    source: 'table-stories',
-                    type: 'circle',
-                    color: 'black',
-                    borderColor: 'white',
-                },
-            ],
+            valueToLabel: (v: [number, number]) => `longitude: ${v[0]}, latitude: ${v[1]}`,
         },
     },
     {
@@ -133,21 +139,14 @@ export const columns: Column[] = [
         title: 'Geo shapes',
         key: 'geoshape',
         dataFormat: 'geo',
-        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: () => r.region,
-            sources: (v: unknown) => ({
+        accessor: (r: Record) => ({
+            sources: {
                 'table-stories': {
                     type: 'geojson',
-                    data: v as string,
+                    data: r.geoshape,
                 },
-            }),
-            layers: () => [
+            },
+            layers: [
                 {
                     id: 'table-stories-layer',
                     source: 'table-stories',
@@ -157,6 +156,15 @@ export const columns: Column[] = [
                 },
             ],
         }),
+        options: (r: Record) => ({
+            mapOptions: {
+                style: 'https://demotiles.maplibre.org/style.json',
+                interactive: false,
+                bbox: [-6.855469, 41.343825, 11.645508, 51.37178],
+                zoom: 3,
+            },
+            valueToLabel: () => r.region,
+        }),
     },
 ];
 

diff --git a/packages/visualizations/src/components/Format/BooleanFormat.svelte b/packages/visualizations/src/components/Format/BooleanFormat.svelte
@@ -4,13 +4,13 @@
 
     type $$Props = BooleanFormatProps;
 
-    export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] | null = null;
+    export let value: $$Props['value'];
+    export let valueToLabel: $$Props['valueToLabel'] | null = null;
     export let debugWarnings = false;
 
     $: format = (v: unknown) => {
-        if (typeof v === 'boolean' && display) {
-            return display(v as boolean);
+        if (typeof v === 'boolean' && valueToLabel) {
+            return valueToLabel(v as boolean);
         }
         if (debugWarnings) {
             warn(v, 'boolean');
@@ -20,4 +20,4 @@
     };
 </script>
 
-{format(rawValue)}
+{format(value)}
diff --git a/packages/visualizations/src/components/Format/DateFormat.svelte b/packages/visualizations/src/components/Format/DateFormat.svelte
@@ -4,8 +4,8 @@
 
     type $$Props = DateFormatProps;
 
-    export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] | null = null;
+    export let value: $$Props['value'];
+    export let valueToLabel: $$Props['valueToLabel'] | null = null;
     export let intl: $$Props['intl'] = {};
     export let locale = 'en-En';
     export let debugWarnings = false;
@@ -16,10 +16,10 @@
             !Number.isNaN(new Date(v).getTime())
         ) {
             const intlValue = Intl.DateTimeFormat(locale, intl).format(new Date(v));
-            if (display) {
-                return display(intlValue);
+            if (valueToLabel) {
+                return valueToLabel(intlValue);
             }
-            return v;
+            return intlValue;
         }
         if (debugWarnings) {
             warn(v, 'date');
@@ -28,4 +28,4 @@
     };
 </script>
 
-{format(rawValue)}
+{format(value)}
diff --git a/packages/visualizations/src/components/Format/GeoFormat.svelte b/packages/visualizations/src/components/Format/GeoFormat.svelte
@@ -2,28 +2,17 @@
     import type { Content } from 'tippy.js';
 
     import { WebGlMap } from 'components/Map';
-    import type { WebGlMapData } from 'components/Map';
     import tippy from 'components/utils/tippy';
     import type { GeoFormatProps } from './types';
 
     type $$Props = GeoFormatProps;
 
-    export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] | null = null;
+    export let value: $$Props['value'];
+    export let valueToLabel: $$Props['valueToLabel'] | null = null;
     export let mapOptions: $$Props['mapOptions'] = {};
-    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) {
-        data = {
-            sources: sources(rawValue),
-            layers: layers(rawValue),
-        };
-    }
 </script>
 
 <div
@@ -44,11 +33,11 @@
     }}
 >
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div class="label">{display && display(rawValue)}</div>
+    <div class="label">{valueToLabel && valueToLabel(value)}</div>
     <!-- To run a WebGl instance only when tooltip is visible -->
-    {#if showMap && data && mapOptions}
+    {#if showMap && value && mapOptions}
         <div bind:this={tooltipContent} class="table-cell-map-container">
-            <WebGlMap options={mapOptions} {data} />
+            <WebGlMap options={mapOptions} data={value} />
         </div>
     {/if}
 </div>

diff --git a/packages/visualizations/src/components/Format/NumberFormat.svelte b/packages/visualizations/src/components/Format/NumberFormat.svelte
@@ -4,8 +4,8 @@
 
     type $$Props = NumberFormatProps;
 
-    export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] | null = null;
+    export let value: $$Props['value'];
+    export let valueToLabel: $$Props['valueToLabel'] | null = null;
     export let intl: $$Props['intl'] = {};
     export let locale = 'en-EN';
     export let debugWarnings = false;
@@ -16,13 +16,13 @@
                 warn(v, 'number');
             }
             const intlValue = new Intl.NumberFormat(locale, intl).format(v);
-            if (display) {
-                return display(intlValue);
+            if (valueToLabel) {
+                return valueToLabel(intlValue);
             }
             return intlValue;
         }
         return v;
     };
 </script>
 
-{format(rawValue)}
+{format(value)}
diff --git a/packages/visualizations/src/components/Format/ShortTextFormat.svelte b/packages/visualizations/src/components/Format/ShortTextFormat.svelte
diff --git a/...c/components/Format/LongTextFormat.svelte → ...s/src/components/Format/TextFormat.svelte b/...c/components/Format/LongTextFormat.svelte → ...s/src/components/Format/TextFormat.svelte
@@ -4,13 +4,13 @@
 
     type $$Props = LongTextFormatProps;
 
-    export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] | null = null;
+    export let value: $$Props['value'];
+    export let valueToLabel: $$Props['valueToLabel'] | null = null;
     export let debugWarnings = false;
 
     $: format = (v: unknown) => {
-        if (typeof v === 'string' && display) {
-            return display(v as string);
+        if (typeof v === 'string' && valueToLabel) {
+            return valueToLabel(v as string);
         }
         if (debugWarnings) {
             warn(v, 'text');
@@ -20,4 +20,4 @@
 </script>
 
 <!-- Wrap value to style properly line clamp -->
-<span>{format(rawValue)}</span>
+<span>{format(value)}</span>