CartoDB · donmccurdy · Feb 10, 2025 · Dec 19, 2024 · Feb 10, 2025
diff --git a/examples/01-basic/index.html b/examples/01-basic/index.html
@@ -40,6 +40,7 @@ <h1>Pure JS</h1>
           id="table"
           header="Store type"
           columns='["storetype","revenue"]'
+          sortBy="revenue"
         ></table-widget>
 
         <scatter-widget

diff --git a/examples/03-tileset/app.ts b/examples/03-tileset/app.ts
@@ -0,0 +1,116 @@
+import maplibregl from 'maplibre-gl';
+import {Deck, WebMercatorViewport} from '@deck.gl/core';
+import {VectorTileLayer} from '@deck.gl/carto';
+import {
+  Filter,
+  TilejsonResult,
+  WidgetTilesetSource,
+  vectorTilesetSource,
+  createViewportSpatialFilter,
+} from '@carto/api-client';
+import '../components/index.js';
+import type {Widget, FilterEvent} from '../components/index.js';
+
+/**************************************************************************
+ * REACTIVE STATE
+ */
+
+let data: TilejsonResult & {widgetSource: WidgetTilesetSource};
+let viewState = {latitude: 40.7128, longitude: -74.006, zoom: 12};
+let filters: Record<string, Filter> = {};
+
+/**************************************************************************
+ * DECK.GL
+ */
+
+const deck = new Deck({
+  canvas: 'deck-canvas',
+  initialViewState: viewState,
+  controller: true,
+  layers: [],
+});
+
+const map = new maplibregl.Map({
+  container: 'map',
+  style:
+    'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
+  interactive: false,
+});
+
+deck.setProps({
+  onViewStateChange: (params) => {
+    viewState = params.viewState;
+    const {longitude, latitude, ...rest} = viewState;
+    map.jumpTo({center: [longitude, latitude], ...rest});
+    updateWidgets();
+  },
+});
+
+const widgets: Widget[] = [
+  bindWidget('#category'),
+  bindWidget('#formula'),
+  bindWidget('#histogram'),
+  bindWidget('#pie'),
+  bindWidget('#scatter'),
+  bindWidget('#table'),
+];
+
+updateSources();
+
+/**************************************************************************
+ * UPDATES
+ */
+
+async function updateSources() {
+  data = await vectorTilesetSource({
+    tableName: 'cartodb-on-gcp-frontend-team.donmccurdy.retail_stores_tileset',
+    accessToken:
+      'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfNDd1dW5tZWciLCJqdGkiOiI1Njc2MDQ0NCJ9.p2_1ts1plciXMI3Pk0GJaHjhdZUd0lKITgdO9BaX2ho',
+    connectionName: 'bqconn-front',
+  });
+
+  document.querySelector('#footer')!.innerHTML = data.attribution;
+
+  updateLayers();
+  updateWidgets();
+}
+
+function updateLayers() {
+  const layer = new VectorTileLayer({
+    id: 'retail_stores',
+    data,
+    pointRadiusMinPixels: 4,
+    getFillColor: [200, 0, 80],
+    onViewportLoad: (tiles) => {
+      const viewport = new WebMercatorViewport(viewState);
+      const spatialFilter = createViewportSpatialFilter(viewport.getBounds())!;
+      data.widgetSource.loadTiles(tiles);
+      data.widgetSource.extractTileFeatures({spatialFilter});
+      updateWidgets();
+    },
+  });
+
+  deck.setProps({layers: [layer]});
+}
+
+function updateWidgets() {
+  for (const widget of widgets) {
+    widget.data = Promise.resolve(data);
+    widget.viewState = viewState;
+  }
+}
+
+/**************************************************************************
+ * INITIALIZATION
+ */
+
+function bindWidget(selector: string): Widget {
+  const widget = document.querySelector<Widget>(selector)!;
+
+  widget.addEventListener('filter', (event) => {
+    filters = (event as FilterEvent).detail.filters;
+    updateSources();
+  });
+
+  return widget;
+}
diff --git a/examples/03-tileset/index.html b/examples/03-tileset/index.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <title>Examples / Tileset</title>
+    <link rel="stylesheet" href="../style.css" />
+  </head>
+  <body>
+    <main id="app">
+      <header>
+        <h1>Tileset</h1>
+        <a href="../">← Back</a>
+      </header>
+      <section id="view">
+        <div id="map"></div>
+        <canvas id="deck-canvas"></canvas>
+      </section>
+      <section id="rail">
+        <formula-widget
+          id="formula"
+          header="Total"
+          operation="count"
+        ></formula-widget>
+
+        <category-widget
+          id="category"
+          header="Store type"
+          operation="count"
+          column="storetype"
+        ></category-widget>
+
+        <pie-widget
+          id="pie"
+          header="Store type"
+          operation="count"
+          column="storetype"
+        ></pie-widget>
+
+        <table-widget
+          id="table"
+          header="Store type"
+          columns='["storetype","revenue"]'
+          sortBy="revenue"
+        ></table-widget>
+
+        <scatter-widget
+          id="scatter"
+          header="Size vs. Revenue"
+          xAxisColumn="size_m2"
+          yAxisColumn="revenue"
+        ></scatter-widget>
+
+        <histogram-widget
+          id="histogram"
+          header="Revenue"
+          column="revenue"
+          ticks="[1250000, 1500000, 1750000]"
+        ></histogram-widget>
+      </section>
+      <footer id="footer"></footer>
+    </main>
+    <script type="module" src="./app.ts"></script>
+  </body>
+</html>
diff --git a/examples/04-tileset-h3/app.ts b/examples/04-tileset-h3/app.ts
@@ -0,0 +1,116 @@
+import maplibregl from 'maplibre-gl';
+import {Deck, WebMercatorViewport} from '@deck.gl/core';
+import {H3TileLayer} from '@deck.gl/carto';
+import {
+  Filter,
+  TilejsonResult,
+  WidgetTilesetSource,
+  createViewportSpatialFilter,
+  h3TilesetSource,
+} from '@carto/api-client';
+import '../components/index.js';
+import type {Widget, FilterEvent} from '../components/index.js';
+
+/**************************************************************************
+ * REACTIVE STATE
+ */
+
+let data: TilejsonResult & {widgetSource: WidgetTilesetSource};
+let viewState = {latitude: 40.7128, longitude: -74.006, zoom: 12};
+let filters: Record<string, Filter> = {};
+
+/**************************************************************************
+ * DECK.GL
+ */
+
+const deck = new Deck({
+  canvas: 'deck-canvas',
+  initialViewState: viewState,
+  controller: true,
+  layers: [],
+});
+
+const map = new maplibregl.Map({
+  container: 'map',
+  style:
+    'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
+  interactive: false,
+});
+
+deck.setProps({
+  onViewStateChange: (params) => {
+    viewState = params.viewState;
+    const {longitude, latitude, ...rest} = viewState;
+    map.jumpTo({center: [longitude, latitude], ...rest});
+    updateWidgets();
+  },
+});
+
+const widgets: Widget[] = [
+  bindWidget('#formula'),
+  bindWidget('#histogram'),
+  bindWidget('#scatter'),
+  bindWidget('#table'),
+];
+
+updateSources();
+
+/**************************************************************************
+ * UPDATES
+ */
+
+async function updateSources() {
+  data = await h3TilesetSource({
+    tableName:
+      'cartodb-on-gcp-frontend-team.donmccurdy.retail_stores_tileset_h3',
+    accessToken:
+      'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfNDd1dW5tZWciLCJqdGkiOiI1Njc2MDQ0NCJ9.p2_1ts1plciXMI3Pk0GJaHjhdZUd0lKITgdO9BaX2ho',
+    connectionName: 'bqconn-front',
+  });
+
+  document.querySelector('#footer')!.innerHTML = data.attribution;
+
+  updateLayers();
+  updateWidgets();
+}
+
+function updateLayers() {
+  const layer = new H3TileLayer({
+    id: 'retail_stores',
+    data,
+    pointRadiusMinPixels: 4,
+    getFillColor: [200, 0, 80],
+    extruded: false,
+    onViewportLoad: (tiles) => {
+      const viewport = new WebMercatorViewport(viewState);
+      const spatialFilter = createViewportSpatialFilter(viewport.getBounds())!;
+      data.widgetSource.loadTiles(tiles);
+      data.widgetSource.extractTileFeatures({spatialFilter});
+      updateWidgets();
+    },
+  });
+
+  deck.setProps({layers: [layer]});
+}
+
+function updateWidgets() {
+  for (const widget of widgets) {
+    widget.data = Promise.resolve(data);
+    widget.viewState = viewState;
+  }
+}
+
+/**************************************************************************
+ * INITIALIZATION
+ */
+
+function bindWidget(selector: string): Widget {
+  const widget = document.querySelector<Widget>(selector)!;
+
+  widget.addEventListener('filter', (event) => {
+    filters = (event as FilterEvent).detail.filters;
+    updateSources();
+  });
+
+  return widget;
+}
diff --git a/examples/04-tileset-h3/index.html b/examples/04-tileset-h3/index.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <title>Examples / H3 Tileset</title>
+    <link rel="stylesheet" href="../style.css" />
+  </head>
+  <body>
+    <main id="app">
+      <header>
+        <h1>Tileset</h1>
+        <a href="../">← Back</a>
+      </header>
+      <section id="view">
+        <div id="map"></div>
+        <canvas id="deck-canvas"></canvas>
+      </section>
+      <section id="rail">
+        <formula-widget
+          id="formula"
+          header="Total"
+          operation="count"
+        ></formula-widget>
+
+        <table-widget
+          id="table"
+          header="Store type"
+          columns='["revenue", "size_m2"]'
+          sortBy="revenue"
+        ></table-widget>
+
+        <scatter-widget
+          id="scatter"
+          header="Size vs. Revenue"
+          xAxisColumn="size_m2"
+          yAxisColumn="revenue"
+        ></scatter-widget>
+
+        <histogram-widget
+          id="histogram"
+          header="Revenue"
+          column="revenue"
+          ticks="[1250000, 1500000, 1750000]"
+        ></histogram-widget>
+      </section>
+      <footer id="footer"></footer>
+    </main>
+    <script type="module" src="./app.ts"></script>
+  </body>
+</html>
diff --git a/examples/components/widgets/formula-widget.ts b/examples/components/widgets/formula-widget.ts
@@ -78,13 +78,15 @@ export class FormulaWidget extends BaseWidget {
       pending: () =>
         html`<h3>${this.header}</h3>
           <figure>
-            <div class="scorecard">&hellip;</div>
+            <div class="scorecard">…</div>
             <figcaption>${this.caption}</figcaption>
           </figure>`,
       complete: (taskResult) => html`
         <h3>${this.header}</h3>
         <figure>
-          <div class="scorecard">${taskResult.toLocaleString()}</div>
+          <div class="scorecard">
+            ${taskResult ? taskResult.toLocaleString() : '…'}
+          </div>
           <figcaption>${this.caption}</figcaption>
         </figure>
       `,

diff --git a/examples/components/widgets/table-widget.ts b/examples/components/widgets/table-widget.ts
@@ -57,7 +57,7 @@ export class TableWidget extends BaseWidget {
   private _task = new Task(this, {
     task: async ([data, columns, sortBy, sortDirection, limit], {signal}) => {
       if (!data) {
-        return {hasData: false, rows: [], totalCount: -1};
+        return {rows: [], totalCount: 0};
       }
 
       await sleep(DEBOUNCE_TIME_MS);

diff --git a/examples/index.html b/examples/index.html
@@ -14,8 +14,12 @@
   <body>
     <h1>Examples</h1>
     <ol>
-      <li><a href="./01-basic/index.html">pure js</a></li>
-      <li><a href="./02-spatial-index/index.html">spatial index</a></li>
+      <li><a href="/01-basic/index.html">pure js</a></li>
+      <li><a href="/02-spatial-index/index.html">spatial index</a></li>
+      <li><a href="/03-tileset/index.html">tileset</a></li>
+      <li>
+        <a href="/04-tileset-h3/index.html">tileset - H3</a>
+      </li>
     </ol>
   </body>
 </html>