From 5930fe90a10c0213091a04e5e4c1cb9ee41f83c3 Mon Sep 17 00:00:00 2001
From: Sam <samual.shop@proton.me>
Date: Mon, 23 Sep 2024 17:46:59 +0100
Subject: [PATCH] refactor

---
 layouts/partials/chart.html   | 183 +++++++++++++++++-----------------
 layouts/partials/head.html    |   1 +
 layouts/partials/table.html   |  29 ++++--
 layouts/shortcodes/chart.html |   4 +-
 layouts/shortcodes/table.html |   2 +-
 shell.nix                     |   2 +-
 static/css/charts.css         |  21 +---
 static/js/mangrove-map.js     |   3 -
 8 files changed, 122 insertions(+), 123 deletions(-)

diff --git a/layouts/partials/chart.html b/layouts/partials/chart.html
index de3bcb3..6f9e5bb 100644
--- a/layouts/partials/chart.html
+++ b/layouts/partials/chart.html
@@ -1,96 +1,97 @@
 <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>
-      chartData = [];
-      function createChart(
-        id,
-        endpoint,
-        chartType,
-        xAxisField,
-        yAxisField,
-        sortField = null,
-        scaleChart = false,
-      ) {
-        async function fetchDataForChart(query, valueId) {
-          try {
-            const apiEndpoint = `${apiURL}/${endpoint}?query=${query}`;
-            const response = await fetch(apiEndpoint);
-            if (!response.ok) {
-              throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            const fetchedData = await response.json();
-            const newData = fetchedData.reduce((acc, item) => {
-              const objectId = item[valueId];
-              if (!acc[objectId]) {
-                acc[objectId] = [];
-              }
-              acc[objectId].push([item[xAxisField], item[yAxisField]]);
-              return acc;
-            }, {});
-            chartData = { ...chartData, ...newData };
-            updateChart();
-          } catch (error) {
-            console.error("Fetching data failed:", error);
-          }
+<script>
+  chartData = [];
+  function createChart(
+    id,
+    endpoint,
+    chartType,
+    xAxisField,
+    yAxisField,
+    sortField = null,
+    scaleChart = false,
+  ) {
+    async function fetchDataForChart(query, valueId) {
+      try {
+        const apiEndpoint = `${apiURL}/${endpoint}?${query}`;
+        const response = await fetch(apiEndpoint);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
         }
-
-        function updateChart() {
-          console.log(chartData);
-          let chartDataMap = new Map();
-          for (let objectId in chartData) {
-            chartDataMap.set(objectId, chartData[objectId]);
+        const fetchedData = await response.json();
+        const newData = fetchedData.reduce((acc, item) => {
+          const objectId = item[valueId];
+          if (!acc[objectId]) {
+            acc[objectId] = [];
           }
-          var chartDom = document.getElementById("chart");
-          var myChart = echarts.init(chartDom);
-
-          // // Sort the data by year
-          // if (sortField) {
-          //   data.sort((a, b) => a[sortField] - b[sortField]);
-          // }
-
-          var option = {
-            xAxis: {
-              type: "category",
-            },
-            yAxis: {
-              scale: scaleChart,
-              type: "value",
-            },
-            series: Array.from(chartDataMap.entries()).map(([name, data]) => ({
-              name,
-              type: chartType,
-              data,
-              showSymbol: false,
-            })),
-          };
-
-          myChart.setOption(option, true);
-        }
-        document.addEventListener("rowSelected", (event) => {
-          console.log(
-            "Row selected:",
-            event.detail.row.offsetParent.id,
-            event.detail.row.value,
-            event.detail.valueId,
-            event.detail.selectableRows,
-          );
-          query = `{'country_with_parent': '${event.detail.row.value}'}`;
-          fetchDataForChart(query, event.detail.valueId);
-        });
-
-        document.addEventListener("rowDeselected", (event) => {
-          console.log(
-            "Row deselected:",
-            event.detail.row.offsetParent.id,
-            event.detail.row.value,
-          );
-          delete chartData[event.detail.row.value];
-          updateChart()
-        });
+          acc[objectId].push([item[xAxisField], item[yAxisField]]);
+          return acc;
+        }, {});
+        chartData = { ...chartData, ...newData };
+        updateChart();
+      } catch (error) {
+        console.error("Fetching data failed:", error);
       }
-    </script>
-  </div>
-</section>
+    }
+
+    function updateChart() {
+      console.log(chartData);
+      let chartDataMap = new Map();
+      for (let objectId in chartData) {
+        chartDataMap.set(objectId, chartData[objectId]);
+      }
+      var chartDom = document.getElementById(`${id}--chart`);
+      var myChart = echarts.init(chartDom);
+
+      var option = {
+        tooltip: {
+          ...tooltip,
+          valueFormatter(value, index) {
+            return nFormatter(value, 0);
+          },
+        },
+        xAxis: {
+          type: "time",
+        },
+        yAxis: {
+          scale: scaleChart,
+          type: "value",
+        },
+        series: Array.from(chartDataMap.entries()).map(([name, data]) => ({
+          name,
+          type: chartType,
+          data,
+          showSymbol: false,
+        })),
+      };
+
+      myChart.setOption(option, true);
+    }
+
+    document.addEventListener("rowSelected", (event) => {
+      console.log(
+        "Row selected:",
+        event.detail.row.offsetParent.id,
+        event.detail.row.value,
+        event.detail.valueId,
+        event.detail.selectableRows,
+      );
+      valueId = event.detail.valueId
+      let selectedRow = {
+        [valueId]: event.detail.row.value,
+      };
+      query = queryConstructor(selectedRow);
+      fetchDataForChart(query, valueId);
+    });
+
+    document.addEventListener("rowDeselected", (event) => {
+      console.log(
+        "Row deselected:",
+        event.detail.row.offsetParent.id,
+        event.detail.row.value,
+      );
+      delete chartData[event.detail.row.value];
+      updateChart();
+    });
+  }
+</script>
 <script src="/js/chart-params.js"></script>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index e336652..5624d97 100644
--- a/layouts/partials/head.html
+++ b/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"
diff --git a/layouts/partials/table.html b/layouts/partials/table.html
index 4d6f17c..39c2ad6 100644
--- a/layouts/partials/table.html
+++ b/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>
diff --git a/layouts/shortcodes/chart.html b/layouts/shortcodes/chart.html
index 10c581a..ce478ee 100644
--- a/layouts/shortcodes/chart.html
+++ b/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>
diff --git a/layouts/shortcodes/table.html b/layouts/shortcodes/table.html
index d18114f..2f77f05 100644
--- a/layouts/shortcodes/table.html
+++ b/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" }})
diff --git a/shell.nix b/shell.nix
index 9252e91..ba2c03f 100644
--- a/shell.nix
+++ b/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
   '';
diff --git a/static/css/charts.css b/static/css/charts.css
index 68468a5..1f4e2b7 100644
--- a/static/css/charts.css
+++ b/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%;
 }
diff --git a/static/js/mangrove-map.js b/static/js/mangrove-map.js
index efdc0db..c5920ae 100644
--- a/static/js/mangrove-map.js
+++ b/static/js/mangrove-map.js
@@ -15,6 +15,3 @@ map.on("load", () => {
   });
 });
 
-document.addEventListener("DOMContentLoaded", function () {
-  fetchDataForTable();
-});