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

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/.eslintrc.js

@@ -3,6 +3,11 @@ module.exports = {
         browser: true,
         es2021: true,
     },
+    settings: {
+        "import/resolver": {
+            typescript: {}
+        },
+    },
     extends: [
         'eslint:recommended',
         'plugin:@typescript-eslint/recommended',

packages/visualizations/package.json

@@ -45,6 +45,7 @@
     "devDependencies": {
         "@babel/core": "^7.13.10",
         "@babel/preset-env": "^7.13.10",
+        "@rollup/plugin-alias": "^5.1.0",
         "@rollup/plugin-babel": "^5.3.0",
         "@rollup/plugin-commonjs": "^19.0.0",
         "@rollup/plugin-json": "^4.1.0",
@@ -68,6 +69,7 @@
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-config-prettier": "^8.3.0",
+        "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-svelte": "^2.35.1",

packages/visualizations/rollup.config.js

@@ -2,6 +2,7 @@ import svelte from 'rollup-plugin-svelte';
 import autoPreprocess from 'svelte-preprocess';
 import postcss from 'rollup-plugin-postcss';
 import autoprefixer from 'autoprefixer';
+import path from 'path';
 // import visualizer from 'rollup-plugin-visualizer';
 import { terser } from 'rollup-plugin-terser';
 import typescript from '@rollup/plugin-typescript';
@@ -10,13 +11,22 @@ import commonjs from '@rollup/plugin-commonjs';
 import json from '@rollup/plugin-json';
 import { babel } from '@rollup/plugin-babel';
 import replace from '@rollup/plugin-replace';
+import alias from '@rollup/plugin-alias';
 import { defineConfig } from 'rollup';
 import pkg from './package.json';
 
 const production = !process.env.ROLLUP_WATCH;
+const projectRootDir = path.resolve(__dirname);
 
 function basePlugins() {
     return [
+        alias({
+            entries: {
+                "components": path.resolve(projectRootDir, 'src/components'),
+                "stores": path.resolve(projectRootDir, 'src/stores'),
+                "types": path.resolve(projectRootDir, 'src/types'),
+            },
+        }),
         svelte({
             // enable run-time checks when not in production
             dev: !production,

packages/visualizations/src/components/Chart/Chart.svelte

@@ -3,12 +3,15 @@
     import type { ChartConfiguration } from 'chart.js';
     import { Chart } from 'chart.js';
     import 'chartjs-adapter-luxon';
-    import type { DataFrame } from '../types';
-    import { generateId } from '../utils';
-    import SourceLink from '../utils/SourceLink.svelte';
-    import { defaultNumberFormat } from '../utils/formatter';
-    import CategoryLegend from '../Legend/CategoryLegend.svelte';
-    import type { LegendPositions, CategoryLegend as CategoryLegendType } from '../Legend/types';
+    import type { DataFrame } from 'components/types';
+    import { generateId } from 'components/utils';
+    import SourceLink from 'components/utils/SourceLink.svelte';
+    import { defaultNumberFormat } from 'components/utils/formatter';
+    import CategoryLegend from 'components/Legend/CategoryLegend.svelte';
+    import type {
+        LegendPositions,
+        CategoryLegend as CategoryLegendType,
+    } from 'components/Legend/types';
     import { ChartSeriesType } from './types';
     import type {
         ChartProps,

packages/visualizations/src/components/Chart/datasets.ts

@@ -1,13 +1,13 @@
 import type { ChartDataset } from 'chart.js';
 import type { Options as DataLabelsOptions } from 'chartjs-plugin-datalabels/types/options';
+import { defaultCompactNumberFormat, assureMaxLength } from 'components/utils/formatter';
+import type { DataFrame } from 'components/types';
 import type {
     ChartSeries,
     DataLabelsConfiguration,
     FillConfiguration,
     ScriptableTreemapContext,
 } from './types';
-import type { DataFrame } from '../types';
-import { defaultCompactNumberFormat, assureMaxLength } from '../utils/formatter';
 import {
     defaultValue,
     singleChartJsColor,

packages/visualizations/src/components/Chart/legend.ts

@@ -1,9 +1,9 @@
 import type { LegendOptions, ChartConfiguration, Chart } from 'chart.js';
 import type { _DeepPartialObject } from 'chart.js/dist/types/utils';
+import { assureMaxLength } from 'components/utils/formatter';
+import { CATEGORY_ITEM_VARIANT } from 'components/Legend/types';
 import type { ChartOptions } from './types';
-import { assureMaxLength } from '../utils/formatter';
 import { defaultValue, DEFAULT_GREY_COLOR } from './utils';
-import { CATEGORY_ITEM_VARIANT } from '../Legend/types';
 
 const LEGEND_MAX_LENGTH = 50;
 

packages/visualizations/src/components/Chart/scales.ts

@@ -8,6 +8,7 @@ import type {
 } from 'chart.js';
 import { DateTime } from 'luxon';
 import type { DeepPartial } from 'chart.js/dist/types/utils';
+import { assureMaxLength, defaultCompactNumberFormat } from 'components/utils/formatter';
 import type {
     CartesianAxisConfiguration,
     ChartOptions,
@@ -16,7 +17,6 @@ import type {
     TimeCartesianAxisConfiguration,
 } from './types';
 import { defaultValue, singleChartJsColor } from './utils';
-import { assureMaxLength, defaultCompactNumberFormat } from '../utils/formatter';
 
 const TICK_MAX_LENGTH = 40;
 

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

@@ -1,6 +1,6 @@
-import type { Color, DataFrame, Source } from '../types';
-import type { LegendConfiguration } from '../Legend/types';
-import type { Async } from '../../types';
+import type { Async } from 'types';
+import type { Color, DataFrame, Source } from 'components/types';
+import type { LegendConfiguration } from 'components/Legend/types';
 
 export interface ChartOptions {
     /** Specify label column in DataFrame (mandatory for all charts except Treemap) */

packages/visualizations/src/components/Chart/utils.ts

@@ -1,4 +1,4 @@
-import type { Color } from '../types';
+import type { Color } from 'components/types';
 
 export const DEFAULT_GREY_COLOR = '#F0F0F0';