working filter system

content/data-lab/global-business-growth.md

@@ -15,10 +15,10 @@ You can select the growth period of interest from the drop-down, which updates t
 The chart always reflects the countries selected in the table.
 
 <br/>
-{{< dropdown_filter id="days_ago" options="1 day:1,7 day:7,28 day:28,1 year:365,5 year:1826,10 year:3652,all time:10000" default_selection="7 day" >}}
+{{< dropdown_filter id="days_ago_dropdown_filter" id_filter="days_ago" options="1 day:1,7 day:7,28 day:28,1 year:365,5 year:1826,10 year:3652,all time:10000" default_selection="7 day" targets="bitcoin-business-growth-chart bitcoin-business-growth-table" >}}
-{{< table id="bitcoin_business_growth" endpoint="bitcoin_business_growth_percent_diff" headers="{'country_name': 'Country', 'date_range': 'Date Range', 'last_value': 'Previous #', 'first_value': 'Current #', 'difference': 'Diff', 'percent_difference': '% Diff'}" maxHeight="400px" sortable="true" valueId="country_name" selectableRows="multi" >}}
+{{< table id="bitcoin-business-growth-table" endpoint="bitcoin_business_growth_percent_diff" headers="{'country_name': 'Country', 'date_range': 'Date Range', 'last_value': 'Previous #', 'first_value': 'Current #', 'difference': 'Diff', 'percent_difference': '% Diff'}" maxHeight="400px" sortable="true" valueId="country_name" selectableRows="multi" targets="bitcoin-business-growth-chart" >}}
 
-{{< chart id="bitcoin_business_growth" endpoint="bitcoin_business_growth_timeseries" chartType="line" xAxisField="date" yAxisField="cumulative_value" scaleChart=true >}}
+{{< chart id="bitcoin-business-growth-chart" endpoint="bitcoin_business_growth_timeseries" chartType="line" xAxisField="date" yAxisField="cumulative_value" scaleChart=true >}}
 
 #### Attribution and License
 Data obtained from © [OpenStreetMap](https://www.openstreetmap.org/copyright)

layouts/partials/chart.html

@@ -39,7 +39,7 @@
       for (let objectId in chartData) {
         chartDataMap.set(objectId, chartData[objectId]);
       }
-      var chartDom = document.getElementById(`${id}--chart`);
+      var chartDom = document.getElementById(`${id}`);
       var myChart = echarts.init(chartDom);
 
       var option = {
@@ -67,30 +67,29 @@
       myChart.setOption(option, true);
     }
 
-    document.addEventListener("rowSelected", (event) => {
+    // listen for filter events for this target
-      console.log(
+    document.addEventListener("filterChange", function (event) {
-        "Row selected:",
+      tableId = document.getElementById(id).id;
-        event.detail.row.offsetParent.id,
+      console.log(event.detail);
-        event.detail.row.value,
+      eventDetail = event.detail;
-        event.detail.valueId,
+      if (eventDetail.filterActions.includes("refresh")) {
-        event.detail.selectableRows,
+        chartData = [];
-      );
+        updateChart();
-      valueId = event.detail.valueId
+      } else {
-      let selectedRow = {
+        if (eventDetail.filterTargets.includes(tableId)) {
-        [valueId]: event.detail.row.value,
+          if (eventDetail.filterActions.includes("selected")) {
-      };
+            valueId = eventDetail.filterId;
-      query = queryConstructor(selectedRow);
+            let selectedRow = {
-      fetchDataForChart(query, valueId);
+              [valueId]: eventDetail.filterValue,
-    });
+            };
-
+            query = queryConstructor(selectedRow);
-    document.addEventListener("rowDeselected", (event) => {
+            fetchDataForChart(query, valueId);
-      console.log(
+          } else {
-        "Row deselected:",
+            delete chartData[eventDetail.filterValue];
-        event.detail.row.offsetParent.id,
+            updateChart();
-        event.detail.row.value,
+          }
-      );
+        }
-      delete chartData[event.detail.row.value];
+      }
-      updateChart();
     });
   }
 </script>

layouts/partials/table.html

@@ -7,6 +7,7 @@
     sortable,
     valueId,
     selectableRows,
+    filterTargets
   ) {
     async function fetchDataForTable(query) {
       try {
@@ -25,7 +26,7 @@
 
     function generateTable(data) {
       const jsonTableContainer = document.getElementById(
-        `${id}--table-container`,
+        `${id}--container`,
       );
       jsonTableContainer.className = "jsonTableContainer";
       jsonTableContainer.innerHTML = "";
@@ -35,7 +36,7 @@
       tableHeaderKeys = Object.keys(headers);
 
       const table = document.createElement("table");
-      table.id = `${id}--table`;
+      table.id = `${id}`;
       const thead = document.createElement("thead");
       const tbody = document.createElement("tbody");
       const headerRow = document.createElement("tr");
@@ -63,51 +64,43 @@
       table.appendChild(thead);
       table.appendChild(tbody);
 
-      // selectable rows
-      let currentlySelectedRow = null;
-
       if (selectableRows === "multi" || selectableRows === "single") {
         const rows = table.getElementsByTagName("tr");
-
         for (let i = 1; i < rows.length; i++) {
-          // Skip the header row
           rows[i].addEventListener("click", function () {
-            if (selectableRows === "single") {
+            if (selectableRows === "multi") {
-              // Deselect the currently selected row, if any
+              this.classList.toggle("selected");
-              if (currentlySelectedRow && currentlySelectedRow !== this) {
+              if (this.classList.contains("selected")) {
-                currentlySelectedRow.classList.remove("selected");
+                const event = new CustomEvent("filterChange", {
-                const deselectEvent = new CustomEvent("rowDeselected", {
+                  detail: {
-                  detail: { row: currentlySelectedRow },
+                    filterId: valueId,
+                    filterValue: this.value,
+                    filterActions: ["selected"],
+                    filterTargets: filterTargets
+                  },
                 });
-                document.dispatchEvent(deselectEvent);
+                document.dispatchEvent(event);
+              } else {
+                const event = new CustomEvent("filterChange", {
+                  detail: {
+                    filterId: valueId,
+                    filterValue: this.value,
+                    filterActions: ["deselected"],
+                    filterTargets: filterTargets
+                  },
+                });
+                document.dispatchEvent(event);
+              }
+            } else if (selectableRows === "single") {
+              if (this.classList.contains("selected")) {
+                this.classList.remove("selected");
+              } else {
+                for (let j = 1; j < rows.length; j++) {
+                  rows[j].classList.remove("selected");
+                }
+                this.classList.add("selected");
               }
-
-              // Toggle the selected class on the clicked row
-              this.classList.toggle("selected");
-
-              // Update the currently selected row
-              currentlySelectedRow = this.classList.contains("selected")
-                ? this
-                : null;
-            } else {
-              // Multi-select behavior
-              this.classList.toggle("selected");
             }
-
-            const event = new CustomEvent(
-              this.classList.contains("selected")
-                ? "rowSelected"
-                : "rowDeselected",
-              {
-                detail: {
-                  row: this,
-                  selectableRows: selectableRows,
-                  valueId: valueId,
-                },
-              },
-            );
-
-            document.dispatchEvent(event);
           });
         }
       }
@@ -116,16 +109,20 @@
       // sortable
       if (sortable == "true") {
         table.className = "sortable";
-        sorttable.makeSortable(document.getElementById(`${id}--table`));
+        sorttable.makeSortable(document.getElementById(`${id}`));
       }
     }
-
+    
+    // listen for filter events for this target
     document.addEventListener("filterChange", function (event) {
-      query = queryConstructor()
+      tableId = document.getElementById(id).id 
-      fetchDataForTable(query);
+      if (event.detail.filterTargets.includes(tableId)) {
+        query = queryConstructor();
+        fetchDataForTable(query);
+      }
     });
 
-    query = queryConstructor()
+    query = queryConstructor();
     fetchDataForTable(query);
   }
 </script>

layouts/shortcodes/chart.html

@@ -1,6 +1,6 @@
 {{ partial "chart.html" }}
 <section class = 'chart-container'>
-<div class = "chart" id='{{ .Get "id" }}--chart'>
+<div class = "chart" id='{{ .Get "id" }}'>
 <script>
 document.addEventListener("DOMContentLoaded", function () {
   createChart(id={{ .Get "id" }}, endpoint={{ .Get "endpoint" }}, chartType={{ .Get "chartType" }},  xAxisField={{ .Get "xAxisField" }}, yAxisField={{ .Get "yAxisField" }}, sortField={{ .Get "sortField" }}, scaleChart={{ .Get "scaleChart" }})

layouts/shortcodes/dropdown_filter.html

@@ -5,7 +5,7 @@
 {{ $options_split := split $options "," }}
 
 <div class="dropdown-filter-container">
-<select class="filter dropdown-filter" id="{{ $id }}" onchange="dispatchDropdownEvent(this)">
+  <select class="filter dropdown-filter" id="{{ $id }}" idFilter='{{ .Get "id_filter" }}' onchange="dispatchDropdownEvent(this)">
   {{ range $options_split }}
     {{ $parts := split . ":" }}
     {{ $key := index $parts 0 }}
@@ -17,8 +17,10 @@
   function dispatchDropdownEvent(selectElement) {
     const event = new CustomEvent('filterChange', {
       detail: {
-        filterId: selectElement.id,
+        filterId: '{{ .Get "id_filter" }}',
         filterValue: selectElement.value,
+        filterActions: ["refresh"],
+        filterTargets: '{{ .Get "targets" }}'.split(" ")
       }
     });
     document.dispatchEvent(event);

layouts/shortcodes/table.html

@@ -1,8 +1,8 @@
 {{ partial "table.html" }}
-<div id = '{{ .Get "id" }}--table-container'>
+<div id = '{{ .Get "id" }}--container'>
 <script>
 document.addEventListener("DOMContentLoaded", function () {
-  createTable({{ .Get "endpoint" }}, {{ .Get "id" }}, {{ .Get "headers" | safeJS }}, {{ .Get "maxHeight" }}, {{ .Get "sortable" }}, {{ .Get "valueId" }}, {{ .Get "selectableRows" }})
+  createTable({{ .Get "endpoint" }}, {{ .Get "id" }}, {{ .Get "headers" | safeJS }}, {{ .Get "maxHeight" }}, {{ .Get "sortable" }}, {{ .Get "valueId" }}, {{ .Get "selectableRows" }}, '{{ .Get "targets" }}'.split(" "))
 });
 </script>
 </div>

static/js/lib/helper-functions.js

@@ -5,7 +5,7 @@ function queryConstructor(customFilters = {}) {
   Object.assign(queryObject, customFilters);
 
   filters.forEach((filter) => {
-    const filterId = filter.id;
+    const filterId = filter.getAttribute("idFilter");
     const filterValue = filter.value;
     queryObject[filterId] = filterValue;
   });