completed h3 example with filtering

h3-widgets/index.html

@@ -10,7 +10,7 @@
     <div id="top-left">
       <div id="story-card">
         <p class="overline">✨👀 You're viewing</p>
-        <h2>CARTO Widgets for H3 (12M rows).</h2>
+        <h2>CARTO Widgets for H3 Spatial Index</h2>
         <p>
           More info about
           <a
@@ -46,7 +46,9 @@ <h2>CARTO Widgets for H3 (12M rows).</h2>
             <div id="formula-data"></div>
           </div>
           <div class="widget histogram-widget relative">
+            <button class="clear-btn">Clear filter</button>
             <p class="overline">Urbanity categories</p>
+            <p class="">You can click the bars to filter the map with the selected category</p>
             <p class="loader hidden">Loading...</p>
             <canvas id="histogram-data" height="300px"></canvas>
           </div>

h3-widgets/index.ts

@@ -5,7 +5,7 @@ import {Deck, MapViewState} from '@deck.gl/core';
 import {H3TileLayer, BASEMAP, colorBins} from '@deck.gl/carto';
 import { initSelectors } from './selectorUtils';
 import { debounce, getSpatialFilterFromViewState } from './utils';
-import { h3TableSource, WidgetSource } from '@carto/api-client';
+import { addFilter, Filters, FilterType, h3TableSource, removeFilter, WidgetSource } from '@carto/api-client';
 import Chart from 'chart.js/auto';
 
 const cartoConfig = {
@@ -35,13 +35,19 @@ let aggregationExp = `SUM(${selectedVariable})`
 
 let source: Source;
 let viewState = INITIAL_VIEW_STATE
+const filters: Filters = {};
 
 // DOM elements
 const variableSelector = document.getElementById('variable') as HTMLSelectElement;
 const aggMethodLabel = document.getElementById('agg-method') as HTMLSelectElement;
 const formulaWidget = document.getElementById('formula-data') as HTMLDivElement;
-const categoriesWidget = document.getElementById('categories-data') as HTMLCanvasElement;
 const histogramWidget = document.getElementById('histogram-data') as HTMLCanvasElement;
+const histogramClearBtn = document.querySelector('.histogram-widget .clear-btn') as HTMLButtonElement;
+histogramClearBtn.addEventListener('click', () => {
+  removeFilter(filters, { column: 'urbanity' });
+  render();
+})
+
 let histogramChart: Chart; 
 
 aggMethodLabel.innerText = aggregationExp;
@@ -58,11 +64,12 @@ variableSelector?.addEventListener('change', () => {
 function render() {
   source = h3TableSource({
     ...cartoConfig,
+    filters,
     aggregationExp: `${aggregationExp} as value`,
     tableName: 'carto-demo-data.demo_tables.derived_spatialfeatures_esp_h3res8_v1_yearly_v2'
   });
-  renderLayers();
   renderWidgets();
+  renderLayers();
 }
 
 function renderLayers() {
@@ -119,7 +126,7 @@ async function renderFormula(ws: WidgetSource) {
   }).format(formula.value)
 }
 
-const TICKS = [100, 500, 1000, 5000];
+const HISTOGRAM_WIDGET_ID = 'urbanity_widget';
 
 async function renderHistogram(ws: WidgetSource) {
   histogramWidget.parentElement?.querySelector('.loader')?.classList.toggle('hidden', false);
@@ -128,16 +135,21 @@ async function renderHistogram(ws: WidgetSource) {
   const categories = await ws.getCategories({
     column: 'urbanity',
     operation: 'count',
+    filterOwner: HISTOGRAM_WIDGET_ID,
     spatialFilter: getSpatialFilterFromViewState(viewState),
     viewState,
   })
 
   histogramWidget.parentElement?.querySelector('.loader')?.classList.toggle('hidden', true);
   histogramWidget.classList.toggle('hidden', false);
 
+  const selectedCategory = filters['urbanity']?.[FilterType.IN]?.values[0];
+  const colors = categories.map((c) => c.name === selectedCategory ? 'rgba(255, 99, 132, 0.2)' : 'rgba(54, 162, 235, 0.2)')
+
   if (histogramChart) {
     histogramChart.data.labels = categories.map((c) => c.name);
     histogramChart.data.datasets[0].data = categories.map((c) => c.value);
+    histogramChart.data.datasets[0].backgroundColor = colors;
     histogramChart.update();
   } else {
     histogramChart = new Chart(histogramWidget, {
@@ -148,9 +160,28 @@ async function renderHistogram(ws: WidgetSource) {
           {
             label: 'Urbanity category',
             data: categories.map((c) => c.value),
+            backgroundColor: colors,
           }
         ]
       },
+      options: {
+        onClick: async (ev, elems) => {
+          console.log(elems[0])
+          const index = elems[0]?.index
+          const categoryName = categories[index]?.name
+          if (!categoryName || categoryName === selectedCategory) {
+            removeFilter(filters, { column: 'urbanity' })
+          } else {
+            addFilter(filters, {
+              column: 'urbanity',
+              type: FilterType.IN,
+              values: [categoryName],
+              owner: HISTOGRAM_WIDGET_ID,
+            })
+          }
+          await render()
+        }
+      },
     })
   }
 }

h3-widgets/style.css

@@ -149,3 +149,9 @@ button:hover {
 .hidden {
   opacity: 0;
 }
+
+.widget .clear-btn {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+}