Merge pull request #100 from opendatasoft/map-typescript

Moving all the map-related code to TypeScript
opendatasoft · Aug 24, 2022 · baaf481 · baaf481
2 parents 61f66d8 + 20727d3
commit baaf481
Show file tree

Hide file tree

Showing 10 changed files with 296 additions and 146 deletions.
diff --git a/packages/visualizations/package-lock.json b/packages/visualizations/package-lock.json
diff --git a/packages/visualizations/package.json b/packages/visualizations/package.json
@@ -45,8 +45,11 @@
         "@rollup/plugin-replace": "^3.0.1",
         "@rollup/plugin-typescript": "^6.1.0",
         "@tsconfig/svelte": "^1.0.10",
+        "@types/chroma-js": "^2.1.4",
+        "@types/geojson": "^7946.0.10",
         "@types/lodash": "^4.14.182",
         "@types/luxon": "^2.0.5",
+        "@types/mapbox__geo-viewport": "^0.4.1",
         "@types/markdown-it": "^12.0.1",
         "@types/markdown-it-link-attributes": "^3.0.1",
         "@types/rollup-plugin-visualizer": "^4.2.1",

diff --git a/packages/visualizations/src/components/Map/Choropleth.svelte b/packages/visualizations/src/components/Map/Choropleth.svelte
@@ -1,18 +1,31 @@
 <svelte:options immutable={true} />
 
-<script>
+<script lang="ts">
     import turfBbox from '@turf/bbox';
+    import type { SourceSpecification } from 'maplibre-gl';
+    // eslint-disable-next-line import/no-unresolved
+    import type { BBox, FeatureCollection } from 'geojson';
+    import type { ColorsScale, DataBounds, Color } from '../types';
     import MapRender from './MapRender.svelte';
     import { BLANK } from './mapStyles';
     import { colorShapes, LIGHT_GREY, DARK_GREY } from './utils';
-
-    export let data; // values, and the key to match
-    export let options; // contains the shapes to display & match
-
-    let shapes;
-    let colorsScale;
-
-    const defaultColorsScale = {
+    import type {
+        ChoroplethDataValue,
+        ChoroplethLayer,
+        ChoroplethOptions,
+        MapRenderTooltipFunction,
+        ChoroplethShapeValue,
+        ChoroplethTooltipFormatter,
+        MapLegend,
+    } from './types';
+
+    export let data: { value: ChoroplethDataValue[] }; // values, and the key to match
+    export let options: ChoroplethOptions; // contains the shapes to display & match
+
+    let shapes: ChoroplethShapeValue;
+    let colorsScale: ColorsScale;
+
+    const defaultColorsScale: ColorsScale = {
         type: 'gradient',
         colors: {
             start: LIGHT_GREY,
@@ -22,13 +35,15 @@
 
     const defaultEmptyValueColor = '#cccccc';
 
-    let aspectRatio;
-    let renderTooltip;
-    let bbox;
-    let activeShapes;
+    let aspectRatio: number;
+    let renderTooltip: MapRenderTooltipFunction;
+    let bbox: BBox;
+    let activeShapes: string[] | undefined;
+    let interactive: boolean;
+    let legend: MapLegend | undefined;
 
     // Used to apply a chosen color for shapes without values (default: #cccccc)
-    let emptyValueColor;
+    let emptyValueColor: Color;
 
     const defaultInteractive = true;
     $: ({
@@ -43,30 +58,23 @@
 
     // Choropleth is always display over a blank map, for readability purposes
     const style = BLANK;
-    let layer;
-    let source;
-    let dataBounds;
-
-    /*
-shapes: {
-    type: 'geojson',
-    geoJson: {}
-}
-later
-shapes: {
-    type: 'vtiles',
-    url: ''
-}
-*/
-    function computeSourceLayerAndBboxes(values = [], newShapes, newColorScale) {
+    let layer: ChoroplethLayer;
+    let source: SourceSpecification;
+    let dataBounds: DataBounds;
+
+    function computeSourceLayerAndBboxes(
+        values: ChoroplethDataValue[] = [],
+        newShapes: ChoroplethShapeValue,
+        newColorScale: ColorsScale
+    ) {
         if (newShapes.type === 'geojson' && !newShapes.geoJson) {
             // We don't have everything we need yet
             return;
         }
 
         if (newShapes.type === 'geojson') {
             const computeColors = colorShapes(
-                newShapes.geoJson,
+                newShapes.geoJson as FeatureCollection,
                 values,
                 newColorScale,
                 emptyValueColor
@@ -91,24 +99,26 @@ shapes: {
 
             bbox = turfBbox(newShapes.geoJson);
         } else {
+            // eslint-disable-next-line no-console
             console.error('Unknown shapes type', newShapes.type);
         }
     }
 
     $: computeSourceLayerAndBboxes(data.value, shapes, colorsScale);
 
-    const defaultFormat = ({ value, label }) => (value ? `${label} &mdash; ${value}` : label);
+    const defaultFormat: ChoroplethTooltipFormatter = ({ value, label }) =>
+        value ? `${label} &mdash; ${value}` : label;
 
     $: renderTooltip = (hoveredFeature) => {
         const values = data.value || [];
         const matchedFeature = values.find(
-            (item) => String(item.x) === hoveredFeature.properties.key
+            (item) => String(item.x) === hoveredFeature.properties?.key
         );
 
-        const tooltipRawValues = {
+        const tooltipRawValues: { value?: number; label: string; key: string } = {
             value: matchedFeature?.y,
-            label: hoveredFeature.properties.label || hoveredFeature.properties.key,
-            key: hoveredFeature.properties.key, // === matchedFeature.x
+            label: hoveredFeature.properties?.label || hoveredFeature.properties?.key,
+            key: hoveredFeature.properties?.key, // === matchedFeature.x
         };
         const format = options?.tooltip?.label;