CartoDB · juandjara · Nov 29, 2024 · Nov 29, 2024 · Nov 29, 2024 · Nov 29, 2024
diff --git a/examples/05-react-h3/app.tsx b/examples/05-react-h3/app.tsx
@@ -0,0 +1,124 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import {Map} from 'react-map-gl/maplibre';
+import DeckGL from '@deck.gl/react';
+import { h3TableSource, Filters } from '@carto/api-client';
+import {
+  CategoryWidget,
+  FormulaWidget,
+  HistogramWidget,
+  PieWidget,
+  ScatterWidget,
+  TableWidget,
+} from '../components/index-react.js';
+import {MapView} from '@deck.gl/core';
+import {H3TileLayer} from '@deck.gl/carto';
+import {FilterEvent} from '../components/types.js';
+
+const MAP_VIEW = new MapView({repeat: true});
+const MAP_STYLE =
+  'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json';
+const INITIAL_VIEW_STATE = {latitude: 37.3753636, longitude: -5.9962577, zoom: 6};
+
+export function App(): JSX.Element {
+  const [viewState, setViewState] = useState({...INITIAL_VIEW_STATE});
+  const [filters, setFilters] = useState<Filters>({});
+  const [attributionHTML, setAttributionHTML] = useState('');
+
+  // Update sources.
+  const data = useMemo(() => {
+    return h3TableSource({
+      accessToken: import.meta.env.VITE_CARTO_ACCESS_TOKEN,
+      connectionName: 'carto_dw',
+      tableName:
+        'carto-demo-data.demo_tables.derived_spatialfeatures_esp_h3res8_v1_yearly_v2',
+      filters,
+      aggregationExp: 'sum(population) as population',
+    })
+  }, [filters]);
+
+  // Update layers.
+  const layers = useMemo(() => {
+    return [
+      new H3TileLayer({
+        id: 'retail_stores',
+        data,
+        pointRadiusMinPixels: 4,
+        getFillColor: [200, 0, 80],
+      }),
+    ];
+  }, [data]);
+
+  useEffect(() => {
+    data?.then(({attribution}) => setAttributionHTML(attribution));
+  }, [data]);
+
+  return (
+    <>
+      <header>
+        <h1>React</h1>
+        <a href="../">← Back</a>
+      </header>
+      <section id="view">
+        <DeckGL
+          layers={layers}
+          views={MAP_VIEW}
+          initialViewState={INITIAL_VIEW_STATE}
+          controller={{dragRotate: false}}
+          onViewStateChange={({viewState}) => setViewState(viewState)}
+        >
+          <Map reuseMaps mapStyle={MAP_STYLE} />
+        </DeckGL>
+      </section>
+      <section id="rail">
+        <FormulaWidget
+          data={data}
+          viewState={viewState}
+          header="Total population"
+          operation="count"
+        ></FormulaWidget>
+
+        <CategoryWidget
+          data={data}
+          viewState={viewState}
+          header="Urbanity"
+          operation="count"
+          column="urbanity"
+          onfilter={(e) => setFilters((e as FilterEvent).detail.filters)}
+        ></CategoryWidget>
+        <PieWidget
+          data={data}
+          viewState={viewState}
+          header="Urbanity"
+          operation="count"
+          column="urbanity"
+          onfilter={(e) => setFilters((e as FilterEvent).detail.filters)}
+        ></PieWidget>
+        <TableWidget
+          data={data}
+          viewState={viewState}
+          header="Pop. Distribution"
+          columns={['population', 'male', 'female']}
+          sortBy='population'
+        ></TableWidget>
+        <ScatterWidget
+          data={data}
+          viewState={viewState}
+          header="Education vs. Healthcare"
+          xAxisColumn="education"
+          yAxisColumn="healthcare"
+        ></ScatterWidget>
+        <HistogramWidget
+          data={data}
+          viewState={viewState}
+          header="Population distribution"
+          column="population"
+          ticks={[100, 500, 1000, 5000]}
+        ></HistogramWidget>
+      </section>
+      <footer
+        id="footer"
+        dangerouslySetInnerHTML={{__html: attributionHTML}}
+      ></footer>
+    </>
+  );
+}
diff --git a/examples/05-react-h3/index.html b/examples/05-react-h3/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <title>Examples / React</title>
+    <link rel="stylesheet" href="../style.css" />
+  </head>
+  <body>
+    <main id="app"></main>
+    <script type="module" src="./react.tsx"></script>
+  </body>
+</html>
diff --git a/examples/05-react-h3/react.tsx b/examples/05-react-h3/react.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import {createRoot} from 'react-dom/client';
+import {App} from './app';
+
+const container = document.querySelector('#app')!;
+createRoot(container).render(<App />);
diff --git a/examples/components/widgets/category-widget.ts b/examples/components/widgets/category-widget.ts
@@ -57,6 +57,13 @@ export class CategoryWidget extends BaseWidget {
         spatialFilter: this.getSpatialFilterOrViewState(),
         operation,
         column,
+        viewState: this.viewState
+          ? {
+              zoom: this.viewState.zoom,
+              latitude: this.viewState.latitude,
+              longitude: this.viewState.longitude,
+            }
+          : undefined,
       });
     },
     args: () =>

diff --git a/examples/components/widgets/formula-widget.ts b/examples/components/widgets/formula-widget.ts
@@ -59,6 +59,13 @@ export class FormulaWidget extends BaseWidget {
         operation,
         column,
         spatialFilter: this.getSpatialFilterOrViewState(),
+        viewState: this.viewState
+          ? {
+              zoom: this.viewState.zoom,
+              latitude: this.viewState.latitude,
+              longitude: this.viewState.longitude,
+            }
+          : undefined,
       });
       return response.value;
     },

diff --git a/examples/components/widgets/histogram-widget.ts b/examples/components/widgets/histogram-widget.ts
@@ -58,6 +58,13 @@ export class HistogramWidget extends BaseWidget {
         column,
         operation,
         ticks,
+        viewState: this.viewState
+          ? {
+              zoom: this.viewState.zoom,
+              latitude: this.viewState.latitude,
+              longitude: this.viewState.longitude,
+            }
+          : undefined,
       });
     },
     args: () =>

diff --git a/examples/components/widgets/scatter-widget.ts b/examples/components/widgets/scatter-widget.ts
@@ -65,6 +65,13 @@ export class ScatterWidget extends BaseWidget {
         xAxisJoinOperation,
         yAxisColumn,
         yAxisJoinOperation,
+        viewState: this.viewState
+          ? {
+              zoom: this.viewState.zoom,
+              latitude: this.viewState.latitude,
+              longitude: this.viewState.longitude,
+            }
+          : undefined,
       });
     },
     args: () =>

diff --git a/examples/components/widgets/table-widget.ts b/examples/components/widgets/table-widget.ts
@@ -69,6 +69,13 @@ export class TableWidget extends BaseWidget {
         ...(sortBy && {sortBy, sortDirection}),
         limit,
         spatialFilter: this.getSpatialFilterOrViewState(),
+        viewState: this.viewState
+          ? {
+              zoom: this.viewState.zoom,
+              latitude: this.viewState.latitude,
+              longitude: this.viewState.longitude,
+            }
+          : undefined,
       });
     },
     args: () =>
@@ -136,11 +143,14 @@ function renderTableRow(row: unknown[]) {
   </tr>`;
 }
 
-const _numberFormatter = new Intl.NumberFormat();
+const _numberFormatter = new Intl.NumberFormat('en-US', {
+  maximumFractionDigits: 2,
+  notation: 'compact',
+});
 function renderTableCell(value: unknown) {
   let formattedValue: string;
   if (typeof value === 'number') {
-    return _numberFormatter.format(value);
+    formattedValue = _numberFormatter.format(value);
   } else {
     formattedValue = String(value);
   }

diff --git a/examples/index.html b/examples/index.html
@@ -19,6 +19,7 @@ <h2>Frameworks</h2>
       <li><a href="./02-react/index.html">react</a></li>
       <li><a href="./03-svelte/index.html">svelte</a></li>
       <li><a href="./04-vue/index.html">vue</a></li>
+      <li><a href="./05-react-h3/index.html">react-h3</a></li>
       <li>angular (TODO)</li>
     </ol>
   </body>

diff --git a/src/api/query.ts b/src/api/query.ts
@@ -12,8 +12,7 @@ import {buildQueryUrl} from './endpoints';
 import {requestWithParameters} from './request-with-parameters';
 import {APIErrorContext} from './carto-api-error';
 
-export type QueryOptions = SourceOptions &
-  Omit<QuerySourceOptions, 'spatialDataColumn'>;
+export type QueryOptions = SourceOptions & QuerySourceOptions;
 type UrlParameters = {q: string; queryParameters?: string};
 
 export const query = async function (

diff --git a/src/models/model.ts b/src/models/model.ts
@@ -10,6 +10,7 @@ import {$TODO} from '../types-internal.js';
 import {assert} from '../utils.js';
 import {ModelRequestOptions, makeCall} from './common.js';
 import {ApiVersion} from '../constants.js';
+import {SpatialDataType, SpatialFilterPolyfillMode} from '../sources/types.js';
 
 /** @internalRemarks Source: @carto/react-api */
 const AVAILABLE_MODELS = [
@@ -38,6 +39,12 @@ export interface ModelSource {
   geoColumn?: string;
   spatialFilter?: SpatialFilter;
   queryParameters?: QueryParameters;
+  spatialDataColumn?: string;
+  spatialDataType?: SpatialDataType;
+  spatialFiltersResolution?: number;
+  spatialFiltersMode?: SpatialFilterPolyfillMode;
+  /** original resolution of the spatial index data as stored in the DW */
+  dataResolution?: number;
 }
 
 const {V3} = ApiVersion;
@@ -79,7 +86,9 @@ export function executeModel(props: {
     data,
     filters,
     filtersLogicalOperator = 'and',
-    geoColumn = DEFAULT_GEO_COLUMN,
+    spatialDataType = 'geo',
+    spatialFiltersMode = 'intersects',
+    spatialFiltersResolution = 0,
   } = source;
 
   const queryParameters = source.queryParameters
@@ -96,18 +105,30 @@ export function executeModel(props: {
     filtersLogicalOperator,
   };
 
+  const spatialDataColumn =
+    source.spatialDataColumn || source.geoColumn || DEFAULT_GEO_COLUMN;
+
   // Picking Model API requires 'spatialDataColumn'.
   if (model === 'pick') {
-    queryParams.spatialDataColumn = geoColumn;
+    queryParams.spatialDataColumn = spatialDataColumn;
   }
 
   // API supports multiple filters, we apply it only to geoColumn
   const spatialFilters = source.spatialFilter
-    ? {[geoColumn]: source.spatialFilter}
+    ? {[spatialDataColumn]: source.spatialFilter}
     : undefined;
 
   if (spatialFilters) {
     queryParams.spatialFilters = JSON.stringify(spatialFilters);
+    queryParams.spatialDataColumn = spatialDataColumn;
+    queryParams.spatialDataType = spatialDataType;
+  }
+
+  if (spatialDataType !== 'geo') {
+    if (spatialFiltersResolution > 0) {
+      queryParams.spatialFiltersResolution = String(spatialFiltersResolution);
+    }
+    queryParams.spatialFiltersMode = spatialFiltersMode;
   }
 
   const urlWithSearchParams =

diff --git a/src/sources/h3-query-source.ts b/src/sources/h3-query-source.ts
@@ -19,6 +19,7 @@ export type H3QuerySourceOptions = SourceOptions &
   QuerySourceOptions &
   AggregationOptions &
   FilterOptions;
+
 type UrlParameters = {
   aggregationExp: string;
   aggregationResLevel?: string;
@@ -59,7 +60,12 @@ export const h3QuerySource = async function (
   return baseSource<UrlParameters>('query', options, urlParameters).then(
     (result) => ({
       ...(result as TilejsonResult),
-      widgetSource: new WidgetQuerySource(options),
+      widgetSource: new WidgetQuerySource({
+        ...options,
+        // NOTE: passing redundant spatialDataColumn here to apply the default value 'h3'
+        spatialDataColumn,
+        spatialDataType: 'h3',
+      }),
     })
   );
 };
diff --git a/src/sources/h3-table-source.ts b/src/sources/h3-table-source.ts
@@ -55,7 +55,12 @@ export const h3TableSource = async function (
   return baseSource<UrlParameters>('table', options, urlParameters).then(
     (result) => ({
       ...(result as TilejsonResult),
-      widgetSource: new WidgetTableSource(options),
+      widgetSource: new WidgetTableSource({
+        ...options,
+        // NOTE: passing redundant spatialDataColumn here to apply the default value 'h3'
+        spatialDataColumn,
+        spatialDataType: 'h3',
+      }),
     })
   );
 };
diff --git a/src/sources/quadbin-query-source.ts b/src/sources/quadbin-query-source.ts
@@ -60,7 +60,12 @@ export const quadbinQuerySource = async function (
   return baseSource<UrlParameters>('query', options, urlParameters).then(
     (result) => ({
       ...(result as TilejsonResult),
-      widgetSource: new WidgetQuerySource(options),
+      widgetSource: new WidgetQuerySource({
+        ...options,
+        // NOTE: passing redundant spatialDataColumn here to apply the default value 'quadbin'
+        spatialDataColumn,
+        spatialDataType: 'quadbin',
+      }),
     })
   );
 };
diff --git a/src/sources/quadbin-table-source.ts b/src/sources/quadbin-table-source.ts
@@ -56,7 +56,12 @@ export const quadbinTableSource = async function (
   return baseSource<UrlParameters>('table', options, urlParameters).then(
     (result) => ({
       ...(result as TilejsonResult),
-      widgetSource: new WidgetTableSource(options),
+      widgetSource: new WidgetTableSource({
+        ...options,
+        // NOTE: passing redundant spatialDataColumn here to apply the default value 'quadbin'
+        spatialDataColumn,
+        spatialDataType: 'quadbin',
+      }),
     })
   );
 };