Migrate website examples to TypeScript (#8646)

visgl · Apr 4, 2024 · 919459b · 919459b
1 parent 1cd0da9
commit 919459b
Show file tree

Hide file tree

Showing 99 changed files with 1,293 additions and 789 deletions.
diff --git a/examples/website/3d-heatmap/app.jsx → examples/website/3d-heatmap/app.tsx b/examples/website/3d-heatmap/app.jsx → examples/website/3d-heatmap/app.tsx
@@ -4,8 +4,10 @@ import {Map} from 'react-map-gl/maplibre';
 import {AmbientLight, PointLight, LightingEffect} from '@deck.gl/core';
 import {HexagonLayer} from '@deck.gl/aggregation-layers';
 import DeckGL from '@deck.gl/react';
+import {CSVLoader} from '@loaders.gl/csv';
+import {load} from '@loaders.gl/core';
 
-import {csv} from 'd3-request';
+import type {Color, PickingInfo, MapViewState} from '@deck.gl/core';
 
 // Source data CSV
 const DATA_URL =
@@ -30,14 +32,7 @@ const pointLight2 = new PointLight({
 
 const lightingEffect = new LightingEffect({ambientLight, pointLight1, pointLight2});
 
-const material = {
-  ambient: 0.64,
-  diffuse: 0.6,
-  shininess: 32,
-  specularColor: [51, 51, 51]
-};
-
-const INITIAL_VIEW_STATE = {
+const INITIAL_VIEW_STATE: MapViewState = {
   longitude: -1.415727,
   latitude: 52.232395,
   zoom: 6.6,
@@ -49,7 +44,7 @@ const INITIAL_VIEW_STATE = {
 
 const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json';
 
-export const colorRange = [
+export const colorRange: Color[] = [
   [1, 152, 189],
   [73, 227, 206],
   [216, 254, 181],
@@ -58,7 +53,7 @@ export const colorRange = [
   [209, 55, 78]
 ];
 
-function getTooltip({object}) {
+function getTooltip({object}: PickingInfo) {
   if (!object) {
     return null;
   }
@@ -72,16 +67,23 @@ function getTooltip({object}) {
     ${count} Accidents`;
 }
 
-/* eslint-disable react/no-deprecated */
+type DataPoint = [longitude: number, latitude: number];
+
 export default function App({
-  data,
+  data = null,
   mapStyle = MAP_STYLE,
   radius = 1000,
   upperPercentile = 100,
   coverage = 1
+}: {
+  data?: DataPoint[] | null;
+  mapStyle?: string;
+  radius?: number;
+  upperPercentile?: number;
+  coverage?: number;
 }) {
   const layers = [
-    new HexagonLayer({
+    new HexagonLayer<DataPoint>({
       id: 'heatmap',
       colorRange,
       coverage,
@@ -93,7 +95,12 @@ export default function App({
       pickable: true,
       radius,
       upperPercentile,
-      material,
+      material: {
+        ambient: 0.64,
+        diffuse: 0.6,
+        shininess: 32,
+        specularColor: [51, 51, 51]
+      },
 
       transitions: {
         elevationScale: 3000
@@ -114,14 +121,11 @@ export default function App({
   );
 }
 
-export function renderToDOM(container) {
+export async function renderToDOM(container: HTMLDivElement) {
   const root = createRoot(container);
   root.render(<App />);
 
-  csv(DATA_URL, (error, response) => {
-    if (!error) {
-      const data = response.map(d => [Number(d.lng), Number(d.lat)]);
-      root.render(<App data={data} />);
-    }
-  });
+  const data = (await load(DATA_URL, CSVLoader)).data;
+  const points: DataPoint[] = data.map(d => [d.lng, d.lat]);
+  root.render(<App data={points} />);
 }
diff --git a/examples/website/3d-heatmap/index.html b/examples/website/3d-heatmap/index.html
@@ -13,7 +13,7 @@
 <div id="app"></div>
 </body>
 <script type="module">
-  import {renderToDOM} from './app.jsx';
+  import {renderToDOM} from './app.tsx';
   renderToDOM(document.getElementById('app'));
 </script>
 </html>
diff --git a/examples/website/3d-heatmap/package.json b/examples/website/3d-heatmap/package.json
@@ -9,7 +9,9 @@
     "build": "vite build"
   },
   "dependencies": {
-    "d3-request": "^1.0.5",
+    "@loaders.gl/csv": "^4.1.4",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "deck.gl": "^9.0.0",
     "maplibre-gl": "^3.0.0",
     "react": "^18.0.0",

diff --git a/examples/website/3d-heatmap/tsconfig.json b/examples/website/3d-heatmap/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true
+  }
+}
diff --git a/examples/website/3d-tiles/app.jsx → examples/website/3d-tiles/app.tsx b/examples/website/3d-tiles/app.jsx → examples/website/3d-tiles/app.tsx
@@ -3,15 +3,17 @@ import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
 import DeckGL from '@deck.gl/react';
 import {Tile3DLayer} from '@deck.gl/geo-layers';
-
 import {CesiumIonLoader} from '@loaders.gl/3d-tiles';
 
+import type {MapViewState} from '@deck.gl/core';
+import type {Tileset3D} from '@loaders.gl/tiles';
+
 const ION_ASSET_ID = 43978;
 const ION_TOKEN =
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NjEwMjA4Ni00YmVkLTQyMjgtYjRmZS1lY2M3ZWFiMmFmNTYiLCJpZCI6MjYxMzMsImlhdCI6MTY3NTM2ODY4NX0.chGkGL6DkDNv5wYJQDMzWIvi9iDoVa27dgng_5ARDmo';
 const TILESET_URL = `https://assets.ion.cesium.com/${ION_ASSET_ID}/tileset.json`;
 
-const INITIAL_VIEW_STATE = {
+const INITIAL_VIEW_STATE: MapViewState = {
   latitude: 40,
   longitude: -75,
   pitch: 45,
@@ -25,10 +27,13 @@ const INITIAL_VIEW_STATE = {
 export default function App({
   mapStyle = 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
   updateAttributions
+}: {
+  mapStyle?: string;
+  updateAttributions?: (attributions: any) => void;
 }) {
   const [initialViewState, setInitialViewState] = useState(INITIAL_VIEW_STATE);
 
-  const onTilesetLoad = tileset => {
+  const onTilesetLoad = (tileset: Tileset3D) => {
     // Recenter view to cover the new tileset
     const {cartographicCenter, zoom} = tileset;
     setInitialViewState({
@@ -59,6 +64,6 @@ export default function App({
   );
 }
 
-export function renderToDOM(container) {
+export function renderToDOM(container: HTMLDivElement) {
   createRoot(container).render(<App />);
 }
diff --git a/examples/website/3d-tiles/index.html b/examples/website/3d-tiles/index.html
@@ -19,7 +19,7 @@
     <div id="app"></div>
   </body>
   <script type="module">
-    import {renderToDOM} from './app.jsx';
+    import {renderToDOM} from './app.tsx';
     renderToDOM(document.getElementById('app'));
   </script>
 </html>
diff --git a/examples/website/3d-tiles/package.json b/examples/website/3d-tiles/package.json
@@ -9,8 +9,10 @@
     "build": "vite build"
   },
   "dependencies": {
-    "deck.gl": "^9.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@loaders.gl/3d-tiles": "^4.1.4",
+    "deck.gl": "^9.0.0",
     "maplibre-gl": "^3.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

diff --git a/examples/website/3d-tiles/tsconfig.json b/examples/website/3d-tiles/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true
+  }
+}
diff --git a/examples/website/arc/app.jsx → examples/website/arc/app.tsx b/examples/website/arc/app.jsx → examples/website/arc/app.tsx
@@ -6,11 +6,14 @@ import DeckGL from '@deck.gl/react';
 import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
 import {scaleQuantile} from 'd3-scale';
 
+import type {Color, PickingInfo, MapViewState} from '@deck.gl/core';
+import type {Feature, Polygon, MultiPolygon} from 'geojson';
+
 // Source data GeoJSON
 const DATA_URL =
   'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/arc/counties.json'; // eslint-disable-line
 
-export const inFlowColors = [
+export const inFlowColors: Color[] = [
   [255, 255, 204],
   [199, 233, 180],
   [127, 205, 187],
@@ -20,7 +23,7 @@ export const inFlowColors = [
   [12, 44, 132]
 ];
 
-export const outFlowColors = [
+export const outFlowColors: Color[] = [
   [255, 255, 178],
   [254, 217, 118],
   [254, 178, 76],
@@ -30,7 +33,7 @@ export const outFlowColors = [
   [177, 0, 38]
 ];
 
-const INITIAL_VIEW_STATE = {
+const INITIAL_VIEW_STATE: MapViewState = {
   longitude: -100,
   latitude: 40.7,
   zoom: 3,
@@ -41,21 +44,41 @@ const INITIAL_VIEW_STATE = {
 
 const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json';
 
-function calculateArcs(data, selectedCounty) {
+type CountyProperties = {
+  /** county name */
+  name: string;
+  /** county index -> net flow */
+  flows: Record<string, number>;
+  /** geographical centroid */
+  centroid: [lon: number, lat: number];
+};
+
+type County = Feature<Polygon|MultiPolygon, CountyProperties>;
+
+type MigrationFlow = {
+  source: County;
+  target: County;
+  /** Number of migrants */
+  value: number;
+  quantile: number;
+}
+
+function calculateArcs(data: County[] | undefined, selectedCounty?: County) {
   if (!data || !data.length) {
     return null;
   }
   if (!selectedCounty) {
-    selectedCounty = data.find(f => f.properties.name === 'Los Angeles, CA');
+    selectedCounty = data.find(f => f.properties.name === 'Los Angeles, CA')!;
   }
-  const {flows, centroid} = selectedCounty.properties;
+  const {flows} = selectedCounty.properties;
 
-  const arcs = Object.keys(flows).map(toId => {
-    const f = data[toId];
+  const arcs: MigrationFlow[] = Object.keys(flows).map(toId => {
+    const f = data[Number(toId)];
     return {
-      source: centroid,
-      target: f.properties.centroid,
-      value: flows[toId]
+      source: selectedCounty,
+      target: f,
+      value: flows[toId],
+      quantile: 0
     };
   });
 
@@ -64,25 +87,28 @@ function calculateArcs(data, selectedCounty) {
     .range(inFlowColors.map((c, i) => i));
 
   arcs.forEach(a => {
-    a.gain = Math.sign(a.value);
     a.quantile = scale(Math.abs(a.value));
   });
 
   return arcs;
 }
 
-function getTooltip({object}) {
+function getTooltip({object}: PickingInfo<County>) {
   return object && object.properties.name;
 }
 
 /* eslint-disable react/no-deprecated */
-export default function App({data, strokeWidth = 1, mapStyle = MAP_STYLE}) {
-  const [selectedCounty, selectCounty] = useState(null);
+export default function App({data, strokeWidth = 1, mapStyle = MAP_STYLE}: {
+  data?: County[];
+  strokeWidth?: number;
+  mapStyle?: string;
+}) {
+  const [selectedCounty, selectCounty] = useState<County>();
 
   const arcs = useMemo(() => calculateArcs(data, selectedCounty), [data, selectedCounty]);
 
   const layers = [
-    new GeoJsonLayer({
+    new GeoJsonLayer<CountyProperties>({
       id: 'geojson',
       data,
       stroked: false,
@@ -91,13 +117,13 @@ export default function App({data, strokeWidth = 1, mapStyle = MAP_STYLE}) {
       onClick: ({object}) => selectCounty(object),
       pickable: true
     }),
-    new ArcLayer({
+    new ArcLayer<MigrationFlow>({
       id: 'arc',
       data: arcs,
-      getSourcePosition: d => d.source,
-      getTargetPosition: d => d.target,
-      getSourceColor: d => (d.gain > 0 ? inFlowColors : outFlowColors)[d.quantile],
-      getTargetColor: d => (d.gain > 0 ? outFlowColors : inFlowColors)[d.quantile],
+      getSourcePosition: d => d.source.properties.centroid,
+      getTargetPosition: d => d.target.properties.centroid,
+      getSourceColor: d => (d.value > 0 ? inFlowColors : outFlowColors)[d.quantile],
+      getTargetColor: d => (d.value > 0 ? outFlowColors : inFlowColors)[d.quantile],
       getWidth: strokeWidth
     })
   ];
@@ -114,7 +140,7 @@ export default function App({data, strokeWidth = 1, mapStyle = MAP_STYLE}) {
   );
 }
 
-export function renderToDOM(container) {
+export function renderToDOM(container: HTMLDivElement) {
   const root = createRoot(container);
   root.render(<App />);
 

diff --git a/examples/website/arc/index.html b/examples/website/arc/index.html
@@ -13,7 +13,7 @@
 <div id="app"></div>
 </body>
 <script type="module">
-  import {renderToDOM} from './app.jsx';
+  import {renderToDOM} from './app.tsx';
   renderToDOM(document.getElementById('app'));
 </script>
 </html>
diff --git a/examples/website/arc/package.json b/examples/website/arc/package.json
@@ -9,7 +9,10 @@
     "build": "vite build"
   },
   "dependencies": {
-    "d3-scale": "^2.0.0",
+    "@types/d3-scale": "^4.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "d3-scale": "^4.0.0",
     "deck.gl": "^9.0.0",
     "maplibre-gl": "^3.0.0",
     "react": "^18.0.0",

diff --git a/examples/website/arc/tsconfig.json b/examples/website/arc/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true
+  }
+}