refactor

layouts/partials/chart.html

@@ -1,8 +1,5 @@
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
-<section class="chart-container">
-  <div id="chart-modifiers"></div>
-  <div id="chart">
-    <script>
+<script>
   chartData = [];
   function createChart(
     id,
@@ -15,7 +12,7 @@
   ) {
     async function fetchDataForChart(query, valueId) {
       try {
-            const apiEndpoint = `${apiURL}/${endpoint}?query=${query}`;
+        const apiEndpoint = `${apiURL}/${endpoint}?${query}`;
         const response = await fetch(apiEndpoint);
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
@@ -42,17 +39,18 @@
       for (let objectId in chartData) {
         chartDataMap.set(objectId, chartData[objectId]);
       }
-          var chartDom = document.getElementById("chart");
+      var chartDom = document.getElementById(`${id}--chart`);
       var myChart = echarts.init(chartDom);
 
-          // // Sort the data by year
-          // if (sortField) {
-          //   data.sort((a, b) => a[sortField] - b[sortField]);
-          // }
-
       var option = {
+        tooltip: {
+          ...tooltip,
+          valueFormatter(value, index) {
+            return nFormatter(value, 0);
+          },
+        },
         xAxis: {
-              type: "category",
+          type: "time",
         },
         yAxis: {
           scale: scaleChart,
@@ -68,6 +66,7 @@
 
       myChart.setOption(option, true);
     }
+
     document.addEventListener("rowSelected", (event) => {
       console.log(
         "Row selected:",
@@ -76,8 +75,12 @@
         event.detail.valueId,
         event.detail.selectableRows,
       );
-          query = `{'country_with_parent': '${event.detail.row.value}'}`;
-          fetchDataForChart(query, event.detail.valueId);
+      valueId = event.detail.valueId
+      let selectedRow = {
+        [valueId]: event.detail.row.value,
+      };
+      query = queryConstructor(selectedRow);
+      fetchDataForChart(query, valueId);
     });
 
     document.addEventListener("rowDeselected", (event) => {
@@ -87,10 +90,8 @@
         event.detail.row.value,
       );
       delete chartData[event.detail.row.value];
-          updateChart()
+      updateChart();
     });
   }
-    </script>
-  </div>
-</section>
+</script>
 <script src="/js/chart-params.js"></script>

layouts/partials/head.html

@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="/css/articles.css" type="text/css" media="all" />
   <link rel="stylesheet" href="/css/charts.css" type="text/css" media="all" />
   <script src="/js/lib/sorttable.js"></script>
+  <script src="/js/lib/helper-functions.js"></script>
   <link
     rel="stylesheet"
     href="/css/codeblock.css"

layouts/partials/table.html

@@ -8,9 +8,9 @@
     valueId,
     selectableRows,
   ) {
-    async function fetchDataForTable() {
+    async function fetchDataForTable(query) {
       try {
-        const apiEndpoint = `${apiURL}/${endpoint}`;
+        const apiEndpoint = `${apiURL}/${endpoint}?${query}`;
         const response = await fetch(apiEndpoint);
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
@@ -25,7 +25,7 @@
 
     function generateTable(data) {
       const jsonTableContainer = document.getElementById(
-        `${id}-table-container`,
+        `${id}--table-container`,
       );
       jsonTableContainer.className = "jsonTableContainer";
       jsonTableContainer.innerHTML = "";
@@ -35,7 +35,7 @@
       tableHeaderKeys = Object.keys(headers);
 
       const table = document.createElement("table");
-      table.id = id;
+      table.id = `${id}--table`;
       const thead = document.createElement("thead");
       const tbody = document.createElement("tbody");
       const headerRow = document.createElement("tr");
@@ -89,7 +89,6 @@
               currentlySelectedRow = this.classList.contains("selected")
                 ? this
                 : null;
-
             } else {
               // Multi-select behavior
               this.classList.toggle("selected");
@@ -100,7 +99,11 @@
                 ? "rowSelected"
                 : "rowDeselected",
               {
-                detail: { row: this, selectableRows: selectableRows, valueId: valueId},
+                detail: {
+                  row: this,
+                  selectableRows: selectableRows,
+                  valueId: valueId,
+                },
               },
             );
 
@@ -108,13 +111,21 @@
           });
         }
       }
-
       jsonTableContainer.appendChild(table);
+
+      // sortable
       if (sortable == "true") {
         table.className = "sortable";
-        sorttable.makeSortable(document.getElementById(id));
+        sorttable.makeSortable(document.getElementById(`${id}--table`));
       }
     }
-    fetchDataForTable();
+
+    document.addEventListener("filterChange", function (event) {
+      query = queryConstructor()
+      fetchDataForTable(query);
+    });
+
+    query = queryConstructor()
+    fetchDataForTable(query);
   }
 </script>

layouts/shortcodes/chart.html

@@ -1,8 +1,10 @@
 {{ partial "chart.html" }}
-<div id = '{{ .Get "id" }}-chart-container'>
+<section class = 'chart-container'>
+<div class = "chart" id='{{ .Get "id" }}--chart'>
 <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" }})
 });
 </script>
 </div>
+</section>

layouts/shortcodes/table.html

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

shell.nix

@@ -25,7 +25,7 @@ pkgs.mkShell
        tmux new-session -d -s baseddata
        tmux split-window -h
        tmux send-keys -t 0 "hugo server" C-m
-       tmux send-keys -t 1 "python backend/main.py" C-m
+       tmux send-keys -t 1 "cd backend && uvicorn main:app --reload" C-m
        echo "Baseddata running in dev tmux shell"
     fi
   '';

static/css/charts.css

@@ -1,24 +1,11 @@
 /* Charts */
-.chart-flex-container {
-  display: flex;
-}
-
-.chart-flex-container article {
-  flex: 1;
-}
-
-#chart {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-}
-
 .chart-container {
-  margin-top: 20px;
   display: flex;
-  justify-content: center;
-  flex-direction: column;
+  height: 300px;
 }
 
-#chart-modifiers {
+.chart {
   display: flex;
+  height: 100%;
+  width: 100%;
 }

static/js/mangrove-map.js

@@ -15,6 +15,3 @@ map.on("load", () => {
   });
 });
 
-document.addEventListener("DOMContentLoaded", function () {
-  fetchDataForTable();
-});