feat: Naïve vector tile implementation

tmp: Vector tiles experimentations build: Fix ESLint ignoring type-only imports PR: import-js/eslint-plugin-import#2220 feat: Naïve vector tile implementation
opendatasoft · Aug 24, 2022 · b9d1333 · b9d1333
1 parent 20727d3
commit b9d1333
Show file tree

Hide file tree

Showing 13 changed files with 14,342 additions and 13,684 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/visualizations-react/stories/Map/StudioChoropleth.stories.tsx b/packages/visualizations-react/stories/Map/StudioChoropleth.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta } from '@storybook/react';
 import { Choropleth, Props } from '../../src';
-import { ChoroplethOptions, DataFrame } from '@opendatasoft/visualizations';
+import { ColorScaleTypes, DataFrame, ChoroplethOptions, ChoroplethTooltipFormatter } from '@opendatasoft/visualizations';
 import { shapes, multiPolygonShapes } from './shapes';
 import { IMAGES } from '../utils';
 
@@ -16,6 +16,8 @@ const df = [
     { x: 'Corsica', y: 95 },
 ];
 
+const defaultLabelCallback: ChoroplethTooltipFormatter = ({ label, value }) => `<b>${label}:</b> ${value}`;
+
 export default meta;
 const Template = (args: Props<DataFrame, ChoroplethOptions>) => (
     <div
@@ -42,9 +44,11 @@ const StudioChoroplethArgs: Props<DataFrame, ChoroplethOptions> = {
         ],
     },
     options: {
-        style: {},
-        parameters: {},
-        shapes,
+        shapes: shapes,
+        emptyValueColor: 'red',
+        tooltip: {
+            label: defaultLabelCallback,
+        },
         aspectRatio: 1,
     },
 };
@@ -60,9 +64,11 @@ const StudioChoroplethMultiPolygonArgs: Props<DataFrame, ChoroplethOptions> = {
         ],
     },
     options: {
-        style: {},
-        parameters: {},
         shapes: multiPolygonShapes,
+        emptyValueColor: 'red',
+        tooltip: {
+            label: defaultLabelCallback,
+        },
         aspectRatio: 1,
     },
 };
@@ -78,10 +84,11 @@ const StudioChoroplethEmptyValueArgs: Props<DataFrame, ChoroplethOptions> = {
         ],
     },
     options: {
-        style: {},
-        parameters: {},
-        shapes,
-        emptyValueColor: '#f29d9d',
+        shapes: shapes,
+        emptyValueColor: 'red',
+        tooltip: {
+            label: defaultLabelCallback,
+        },
         aspectRatio: 1,
     },
 };
@@ -98,11 +105,13 @@ const StudioChoroplethGradientArgs: Props<DataFrame, ChoroplethOptions> = {
         ],
     },
     options: {
-        style: {},
-        parameters: {},
-        shapes,
+        shapes: shapes,
+        emptyValueColor: 'red',
+        tooltip: {
+            label: defaultLabelCallback,
+        },
         colorsScale: {
-            type: 'gradient',
+            type: ColorScaleTypes.Gradient,
             colors: {
                 start: '#bcf5f9',
                 end: '#0229bf',
@@ -127,11 +136,13 @@ const StudioChoroplethPaletteArgs: Props<DataFrame, ChoroplethOptions> = {
         ],
     },
     options: {
-        style: {},
-        parameters: {},
-        shapes,
+        shapes: shapes,
+        emptyValueColor: 'red',
+        tooltip: {
+            label: defaultLabelCallback,
+        },
         colorsScale: {
-            type: 'palette',
+            type: ColorScaleTypes.Palette,
             colors: ['#bcf5f9', '#89c5fd', '#3a80ec', '#0229bf'],
         },
         aspectRatio: 1,
@@ -149,11 +160,10 @@ const StudioChoroplethCustomTooltipArgs: Props<DataFrame, ChoroplethOptions> = {
         value: df,
     },
     options: {
-        style: {},
-        parameters: {},
-        shapes,
+        shapes: shapes,
+        emptyValueColor: 'red',
         colorsScale: {
-            type: 'palette',
+            type: ColorScaleTypes.Palette,
             colors: ['#bcf5f9', '#89c5fd', '#3a80ec', '#0229bf'],
         },
         aspectRatio: 1,
@@ -179,11 +189,10 @@ const StudioChoroplethComplexTooltipArgs: Props<DataFrame, ChoroplethOptions> =
         value: df,
     },
     options: {
-        style: {},
-        parameters: {},
-        shapes,
+        shapes: shapes,
+        emptyValueColor: 'red',
         colorsScale: {
-            type: 'palette',
+            type: ColorScaleTypes.Palette,
             colors: ['#bcf5f9', '#89c5fd', '#3a80ec', '#0229bf'],
         },
         aspectRatio: 1,
@@ -216,11 +225,13 @@ const StudioChoroplethLongLabelsArgs: Props<DataFrame, ChoroplethOptions> = {
         ],
     },
     options: {
-        style: {},
-        parameters: {},
-        shapes,
+        shapes: shapes,
+        emptyValueColor: 'red',
+        tooltip: {
+            label: defaultLabelCallback,
+        },
         colorsScale: {
-            type: 'palette',
+            type: ColorScaleTypes.Palette,
             colors: ['#bcf5f9', '#89c5fd', '#3a80ec', '#1e03fd', '#0229bf'],
         },
         aspectRatio: 1,
@@ -230,3 +241,62 @@ const StudioChoroplethLongLabelsArgs: Props<DataFrame, ChoroplethOptions> = {
     },
 };
 StudioChoroplethLongLabels.args = StudioChoroplethLongLabelsArgs;
+
+
+export const StudioVectorTilesChoropleth = Template.bind({});
+const StudioVectorTilesChoroplethArgs: Props<DataFrame, ChoroplethOptions> = {
+    data: {
+        loading: false,
+        value: [
+            { x: '01', y: 10 },
+            { x: '02', y: 2 },
+            { x: '03', y: 30 },
+            { x: '04', y: 4 },
+            { x: '05', y: 50 },
+            { x: '06', y: 6 },
+            { x: '11', y: 100 },
+            { x: '24', y: 8 },
+            { x: '27', y: 90 },
+            { x: '28', y: 10 },
+            { x: '32', y: 110 },
+            { x: '44', y: 12 },
+            { x: '52', y: 130 },
+            { x: '53', y: 14 },
+            { x: '75', y: 150 },
+            { x: '76', y: 16 },
+            { x: '84', y: 170 },
+            { x: '93', y: 18 },
+            { x: '94', y: 190 },
+            { x: '975', y: 20 },
+            { x: '977', y: 210 },
+            { x: '978', y: 22 },
+            { x: '984', y: 230 },
+            { x: '986', y: 24 },
+            { x: '987', y: 250 },
+            { x: '988', y: 26 },
+            { x: '989', y: 270 },
+        ],
+    },
+    options: {
+        shapes: {
+            type: 'vtiles',
+            url: 'https://static.opendatasoft.com/vector-tiles/fr_40_region_2021/{z}/{x}/{y}.pbf',
+            sourceLayer: 'fr_40_region_2021',
+            key: 'reg_code',
+        },
+        activeShapes: ['11', '93'],
+        emptyValueColor: 'red',
+        colorsScale: {
+            type: ColorScaleTypes.Palette,
+            colors: ['#bcf5f9', '#89c5fd', '#3a80ec', '#1e03fd', '#0229bf'],
+        },
+        aspectRatio: 1,
+        legend: {
+            title: 'I Am Legend',
+        },
+        tooltip: {
+            label: defaultLabelCallback,
+        },
+    },
+};
+StudioVectorTilesChoropleth.args = StudioVectorTilesChoroplethArgs;
diff --git a/packages/visualizations-react/stories/Map/shapes.ts b/packages/visualizations-react/stories/Map/shapes.ts
@@ -1,4 +1,6 @@
-export const shapes = {
+import { ChoroplethShapeGeoJsonValue } from '@opendatasoft/visualizations';
+
+export const shapes: ChoroplethShapeGeoJsonValue = {
     type: 'geojson',
     geoJson: {
         type: 'FeatureCollection',
@@ -567,7 +569,7 @@ export const shapes = {
     },
 };
 
-export const multiPolygonShapes = {
+export const multiPolygonShapes: ChoroplethShapeGeoJsonValue = {
     type: 'geojson',
     geoJson: {
         type: 'FeatureCollection',