add chart shortcode that responds to selectable table

layouts/partials/chart.html

@@ -2,7 +2,95 @@
 <section class="chart-container">
   <div id="chart-modifiers"></div>
   <div id="chart">
-    <script src="{{ .src }}"></script>
+    <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);
+          }
+        }
+
+        function updateChart() {
+          console.log(chartData);
+          let chartDataMap = new Map();
+          for (let objectId in chartData) {
+            chartDataMap.set(objectId, chartData[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()
+        });
+      }
+    </script>
   </div>
 </section>
 <script src="/js/chart-params.js"></script>

layouts/shortcodes/chart.html

@@ -1,2 +1,8 @@
-{{ $id := .Get "src" | md5 }} {{ partial "chart.html" (dict "src" (.Get "src")
-"id" $id) }}
+{{ partial "chart.html" }}
+<div id = '{{ .Get "id" }}-chart-container'>
+<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>