[FEAT][EXPLO][SC-46279] Table - Geo field

package.json

@@ -30,7 +30,7 @@
     "build-ci": "npm ci --workspaces --include-workspace-root --install-links",
     "test": "lerna run test --parallel --no-bail",
     "watch": "lerna run watch --parallel --stream",
-    "lint": "lerna run lint:prettier:check,lint:eslint:check  --parallel --no-bail",
+    "lint": "lerna run lint:prettier:check,lint:eslint:check,lint:svelte:check  --parallel --no-bail",
     "lint:fix": "lerna run lint:prettier:fix,lint:eslint:fix --parallel --no-bail",
     "build-package-lock": "lerna run build-package-lock",
     "storybook": "lerna run --scope=@opendatasoft/visualizations-react storybook"

packages/visualizations-react/src/index.ts

@@ -16,7 +16,7 @@ import type {
     MarkdownTextProps,
     ChoroplethGeoJsonProps,
     ChoroplethVectorTilesProps,
-    MapPoiProps,
+    PoiMapProps,
     TableProps,
 } from '@opendatasoft/visualizations';
 import reactifySvelte from 'reactify';
@@ -39,5 +39,5 @@ export const ChoroplethSvg = reactifySvelte<ChoroplethGeoJsonProps>(
     _ChoroplethSvg,
     'ods-visualizations-choropleth-svg'
 );
-export const PoiMap = reactifySvelte<MapPoiProps>(_PoiMap, 'ods-visualizations-poi-map');
+export const PoiMap = reactifySvelte<PoiMapProps>(_PoiMap, 'ods-visualizations-poi-map');
 export const Table = reactifySvelte<TableProps>(_Table, 'ods-visualizations-table');

packages/visualizations-react/stories/Poi/PoiMap.stories.tsx

@@ -154,7 +154,7 @@ const meta: ComponentMeta<typeof PoiMap> = {
 
 export default meta;
 
-const Template: ComponentStory<typeof PoiMap> = (args) => (
+const Template: ComponentStory<typeof PoiMap> = args => (
     <div
         style={{
             width: '50%',

packages/visualizations-react/stories/Poi/sources.ts

@@ -1,7 +1,7 @@
 
 import { PoiMapData } from '@opendatasoft/visualizations';
 
-const sources : PoiMapData["sources"] = {
+const sources : Required<PoiMapData>["value"]["sources"] = {
     cities : {
         type: 'geojson', 
         data: {

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

@@ -8,6 +8,7 @@ export default [
         wordCount: 1200,
         readingTime: 5.5,
         url: 'https://example.com/lorem-ipsum',
+        geopoint: [2.357573,48.837904],
     },
     {
         title: 'pellentesque nec blog post',
@@ -19,6 +20,7 @@ export default [
         wordCount: 800,
         readingTime: 3.8,
         url: 'https://example.com/pellentesque-nec',
+        geopoint: [2.357573,48.837904],
     },
     {
         title: 'fusce sit amet blog post',
@@ -30,6 +32,7 @@ export default [
         wordCount: 1500,
         readingTime: 7.2,
         url: 'https://example.com/fusce-sit-amet',
+        geopoint: [2.357573,48.837904],
     },
     {
         title: 'vestibulum nec blog post',
@@ -40,6 +43,7 @@ export default [
         wordCount: 1000,
         readingTime: 4.5,
         url: 'https://example.com/vestibulum-nec',
+        geopoint: [2.357573,48.837904],
     },
     {
         title: 'Cras At Blog Post',
@@ -51,6 +55,7 @@ export default [
         wordCount: 1300,
         readingTime: 6.0,
         url: 'https://example.com/cras-at',
+        geopoint: [2.357573,48.837904],
     },
     {
         title: 'Quisque A Blog Post',
@@ -62,6 +67,7 @@ export default [
         wordCount: 900,
         readingTime: 4.0,
         url: 'https://example.com/quisque-a',
+        geopoint: [2.357573,48.837904],
     },
     {
         title: 'Ut Vitae Blog Post',
@@ -73,6 +79,7 @@ export default [
         wordCount: 1100,
         readingTime: 5.0,
         url: 'https://example.com/ut-vitae',
+        geopoint: [2.357573,48.837904],
     },
     {
         title: 'Integer Id Blog Post',
@@ -84,6 +91,7 @@ export default [
         wordCount: 950,
         readingTime: 4.2,
         url: 'https://example.com/integer-id',
+        geopoint: [2.357573,48.837904],
     },
     {
         title: 'Undefined row',
@@ -94,6 +102,7 @@ export default [
         wordCount: undefined,
         readingTime: null,
         url: undefined,
+        geopoint: undefined,
     },
     {
         title: 'Empty row',

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

@@ -71,6 +71,43 @@ export const columns: Column[] = [
             display: () => 'link',
         },
     },
+    {
+        title: 'Geo point',
+        key: 'geopoint',
+        dataFormat: 'geo',
+        options: {
+            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',
+            }])
+        },
+    },
 ];
 
 const options: TableOptions = {

packages/visualizations/src/components/Map/WebGl/MapRender.svelte → packages/visualizations/src/components/ChoroplethMap/WebGl/MapRender.svelte

@@ -1,5 +1,3 @@
-<svelte:options immutable={true} />
-
 <script lang="ts">
     import maplibregl, {
         Map as MapType,

packages/visualizations/src/components/ChoroplethMap/WebGl/index.ts

@@ -0,0 +1,4 @@
+import 'maplibre-gl/dist/maplibre-gl.css';
+
+export { default as ChoroplethGeoJson } from './ChoroplethGeoJson.svelte';
+export { default as ChoroplethVectorTiles } from './ChoroplethVectorTiles.svelte';

packages/visualizations/src/components/Legend/ColorsLegend.svelte

@@ -1,5 +1,3 @@
-<svelte:options immutable={true} />
-
 <script lang="ts">
     import { onDestroy } from 'svelte';
     import { debounce } from 'lodash';

packages/visualizations/src/components/Map/Poi/Poi.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+    import CategoryLegend from '../../Legend/CategoryLegend.svelte';
+    import SourceLink from '../../utils/SourceLink.svelte';
+    import WelGlMap from '../WebGl';
+
+    import type { PoiMapProps } from './types';
+    import { DEFAULT_ASPECT_RATIO } from './constants';
+
+    // ensure exported type matches declared props
+    type $$Props = PoiMapProps;
+
+    export let data: $$Props['data'];
+    export let options: $$Props['options'];
+
+    // Used in front of console and error messages to debug multiple maps on a same page
+    const mapId = Math.floor(Math.random() * 1000);
+
+    $: ({
+        title,
+        subtitle,
+        description,
+        legend,
+        sourceLink,
+        aspectRatio = DEFAULT_ASPECT_RATIO,
+    } = options);
+
+    $: cssVarStyles = `--aspect-ratio:${aspectRatio};`;
+</script>
+
+<figure class="map-card maps-container" style={cssVarStyles}>
+    {#if title || subtitle}
+        <figcaption>
+            {#if title}
+                <h3>
+                    {title}
+                </h3>
+            {/if}
+            {#if subtitle}
+                <p>
+                    {subtitle}
+                </p>
+            {/if}
+        </figcaption>
+    {/if}
+    <div class="main" aria-describedby={description ? mapId.toString() : undefined}>
+        {#key options.style}
+            <WelGlMap {options} data={data.value} />
+        {/key}
+    </div>
+    {#if description}
+        <p id={mapId.toString()} class="a11y-invisible-description">{description}</p>
+    {/if}
+    {#if legend}
+        <CategoryLegend legendOptions={legend} />
+    {/if}
+    {#if sourceLink}
+        <SourceLink source={sourceLink} />
+    {/if}
+</figure>
+
+<style>
+    .map-card {
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+        position: relative;
+    }
+    figcaption {
+        margin: 0 0 1em 0;
+    }
+    figcaption p,
+    figcaption h3 {
+        margin: 0;
+    }
+
+    .main {
+        aspect-ratio: var(--aspect-ratio);
+        flex-grow: 1;
+        position: relative;
+        display: block;
+    }
+    /* Suitable for elements that are used via aria-describedby or aria-labelledby */
+    .a11y-invisible-description {
+        display: none;
+    }
+</style>

packages/visualizations/src/components/Map/Poi/constants.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const DEFAULT_ASPECT_RATIO = 1;

packages/visualizations/src/components/Map/Poi/index.ts

@@ -0,0 +1,3 @@
+import PoiMap from './Poi.svelte';
+
+export default PoiMap;

packages/visualizations/src/components/Map/Poi/types.ts

@@ -0,0 +1,20 @@
+import type { Async } from '../../../types';
+import type { Source } from '../../types';
+import type { WebGlMapData, WebGlMapOptions } from '../WebGl/types';
+import type { CategoryLegend } from '../../Legend/types';
+
+export type PoiMapData = Async<WebGlMapData>;
+
+export type PoiMapOptions = WebGlMapOptions & {
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    legend?: CategoryLegend;
+    /** Link button to source */
+    sourceLink?: Source;
+};
+
+export type PoiMapProps = {
+    data: PoiMapData;
+    options: PoiMapOptions;
+};