Chore: add accessor to formatters

package.json

@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "lerna": "^8.1.2",
-    "nx": "^19.2.3"
+    "nx": "^20.2.1"
   },
   "dependencies": {
     "-": "^0.0.1"

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,

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

@@ -7,7 +7,7 @@ import './custom-style.css';
 import { Table } from '../../src';
 
 import value from './data';
-import options from './options';
+import options, { DatasetRecord } from './options';
 
 const meta: ComponentMeta<typeof Table> = {
     title: 'Table/Table',
@@ -41,22 +41,32 @@ const ScrollTemplate: ComponentStory<typeof Table> = args => (
 
 const RowHoverTemplate: ComponentStory<typeof Table> = args => {
     const { options: argOptions, data: argData } = args;
-    const [hoveredRecord, setHovered] = useState<Record<string, unknown> | undefined | null>(null);
-    const [lastClicked, setLastClicked] = useState<Record<string, unknown> | undefined | null>(null);
-
-    const onMouseEnter = (record?: Record<string, unknown>) => {setHovered(record);};
-    const onMouseLeave = () => {setHovered(null);};
-    const onClick = (record?: Record<string, unknown>) => {setLastClicked(record);};
+    const [hoveredRecord, setHovered] = useState<DatasetRecord | undefined | null>(null);
+    const [lastClicked, setLastClicked] = useState<DatasetRecord | undefined | null>(null);
+
+    const onMouseEnter = (record: DatasetRecord) => {
+        setHovered(record);
+    };
+    const onMouseLeave = () => {
+        setHovered(null);
+    };
+    const onClick = (record: DatasetRecord) => {
+        setLastClicked(record);
+    };
 
     return (
         <>
-        <h3>Hovered</h3>
-        <pre>{JSON.stringify(hoveredRecord)}</pre>
-        <h3>Clicked</h3>
-        <pre>{JSON.stringify(lastClicked)}</pre>
-            <div style={{ maxWidth: '800px' }} className='design-system'>
-                <Table data={argData} options={{...argOptions, rowProps: { onClick, onMouseEnter, onMouseLeave}}}/>
-            </div>;
+            <h3>Hovered</h3>
+            <pre>{JSON.stringify(hoveredRecord)}</pre>
+            <h3>Clicked</h3>
+            <pre>{JSON.stringify(lastClicked)}</pre>
+            <div style={{ maxWidth: '800px' }} className="design-system">
+                <Table
+                    data={argData}
+                    options={{ ...argOptions, rowProps: { onClick, onMouseEnter, onMouseLeave } }}
+                />
+            </div>
+            ;
         </>
     );
 };

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',

packages/visualizations-react/stories/Table/options.ts

@@ -1,12 +1,26 @@
 import type { Column, TableOptions } from '@opendatasoft/visualizations';
 
-export const columns: Column[] = [
+export type DatasetRecord = {
+    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<DatasetRecord>[] = [
     {
         title: 'Title',
         key: 'title',
         dataFormat: 'short-text',
         options: {
-            display: (title: string) => `${title.toUpperCase()}`,
+            valueToLabel: (v: string) => v.toUpperCase(),
         },
     },
     {
@@ -30,7 +44,7 @@ export const columns: Column[] = [
         key: 'datePublished',
         dataFormat: 'date',
         options: {
-            display: (date: string) => `${date} 🗓️`,
+            valueToLabel: (v: string) => `${v} 🗓️`,
             intl: {
                 dateStyle: 'full',
             },
@@ -41,15 +55,15 @@ export const columns: Column[] = [
         key: 'isFeatured',
         dataFormat: 'boolean',
         options: {
-            display: (bool: boolean) => (bool ? 'αληθές' : 'ψευδές'),
+            valueToLabel: (v: boolean) => (v ? 'αληθές' : 'ψευδές'),
         },
     },
     {
         title: 'Word count',
         key: 'wordCount',
         dataFormat: 'number',
         options: {
-            display: (v: string) => `${v} words`,
+            valueToLabel: (v: number) => `${v} words`,
         },
     },
     {
@@ -68,72 +82,85 @@ export const columns: Column[] = [
         key: 'url',
         dataFormat: 'url',
         options: {
-            display: (value: string) => value.startsWith('https://')  ? 'link' : 'broken link',
+            valueToLabel: (v: string) => (v.startsWith('https://') ? 'link' : 'broken link'),
         },
     },
     {
         title: 'Geo point',
         key: 'geopoint',
         dataFormat: 'geo',
-        options: {
+        accessor: r => {
+            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: r => ({
             mapOptions: {
                 style: 'https://demotiles.maplibre.org/style.json',
                 interactive: false,
             },
-            display: (v: unknown) => `longitude: ${(v as number[])[0]}, latitude: ${(v as number[])[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: () =>
+                r?.geopoint && `longitude: ${r.geopoint[0]}, latitude: ${r.geopoint[1]}`,
+        }),
     },
     {
         title: 'Geo shapes',
         key: 'geoshape',
         dataFormat: 'geo',
-        options: {
+        accessor: r => ({
+            sources: {
+                'table-stories': {
+                    type: 'geojson',
+                    data: r.geoshape,
+                },
+            },
+            layers: [
+                {
+                    id: 'table-stories-layer',
+                    source: 'table-stories',
+                    type: 'fill',
+                    color: 'black',
+                    borderColor: 'white',
+                },
+            ],
+        }),
+        options: r => ({
             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,
-            sources: (v: unknown) => ({
-                'table-stories' : {
-                    type: 'geojson', 
-                    data: `https://france-geojson.gregoiredavid.fr/repo/regions/${v}/region-${v}.geojson`
-                },
-            }),
-            layers: () => ([{
-                id:'table-stories-layer',
-                source: 'table-stories',
-                type: "fill",
-                color: 'black',
-                borderColor: 'white',
-            }])
-        },
+            valueToLabel: () => r.region,
+        }),
     },
 ];