backend/models/pipelines.py

@@ -1,29 +1,5 @@
-def mangrove_by_country_latest():
-    pipeline = [
-        {
-            "$match": {"year": "2020"},
-        },
-    ]
-    return pipeline
-
-
-def mangrove_by_country_agg(query):
-    pipeline = [
-        {"$match": {"country_with_parent": query["country_with_parent"]}},
-        {
-            "$group": {
-                "_id": {"country_with_parent": "$country_with_parent", "year": "$year"},
-                "total_pixels": {"$sum": "$total_n_pixels"},
-            }
-        },
-        {
-            "$project": {
-                "_id": 0,
-                "country_with_parent": "$_id.country_with_parent",
-                "year": "$_id.year",
-                "total_pixels": 1,
-            }
-        },
-        {"$sort": {"year": 1}},
-    ]
-    return pipeline
+aggregate_mangrove_by_country = [
+    {
+        "$match": {"year": "2020"},
+    },
+]

backend/routes/route.py

@@ -4,45 +4,18 @@ from models.mongodb_handler import MongoDBHandler
 import models.pipelines as pipelines
 import schema.schemas as schemas
 from schema.schemas import DataSerializer
-import ast
 
 router = APIRouter()
 
 
-@router.get("/mangrove_by_country_latest")
-async def mangrove_by_country_latest():
+@router.get("/mangrove_country_data")
+async def mangrove_country_data():
     db = client.baseddata
     collection_name = db["final__protected_mangroves_summary_stats_by_country_agg"]
-    schema = schemas.mangrove_by_country_latest_schema
-    pipeline = pipelines.mangrove_by_country_latest()
+    schema = schemas.mangrove_country_schema
+    query = pipelines.aggregate_mangrove_by_country
     serializer = DataSerializer(schema)
     handler = MongoDBHandler(collection_name)
-    rawData = handler.aggregate(pipeline)
-    serializedData = serializer.serialize_many(rawData)
-    return serializedData
-
-@router.get("/mangrove_by_country_agg")
-async def mangrove_by_country_agg(query: str):
-    query = ast.literal_eval(query)
-    db = client.baseddata
-    collection_name = db["final__protected_mangroves_summary_stats_by_country_agg"]
-    schema = schemas.mangrove_by_country_agg_schema
-    pipeline = pipelines.mangrove_by_country_agg(query)
-    serializer = DataSerializer(schema)
-    handler = MongoDBHandler(collection_name)
-    rawData = handler.aggregate(pipeline)
-    serializedData = serializer.serialize_many(rawData)
-    return serializedData
-
-@router.get("/bitcoin_business_growth")
-async def bitcoin_business_growth(query: str):
-    query = ast.literal_eval(query)
-    db = client.baseddata
-    collection_name = db["final__bitcoin_business_growth_by_country"]
-    schema = schemas.bitcoin_business_growth
-    pipeline = pipelines.bitcoin_business_growth(query)
-    serializer = DataSerializer(schema)
-    handler = MongoDBHandler(collection_name)
-    rawData = handler.aggregate(pipeline)
+    rawData = handler.aggregate(query)
     serializedData = serializer.serialize_many(rawData)
     return serializedData

backend/schema/schemas.py

@@ -1,4 +1,4 @@
-def mangrove_by_country_latest_schema(data):
+def mangrove_country_schema(data):
     return {
         "country_with_parent": str(data["country_with_parent"]),
         "original_pixels": int(data["original_pixels"]),
@@ -7,20 +7,6 @@ def mangrove_by_country_latest_schema(data):
         "cumulative_pct_diff": float(data["cumulative_pct_diff"]),
     }
 
-def mangrove_by_country_agg_schema(data):
-    return {
-        "country_with_parent": str(data["country_with_parent"]),
-        "year": int(data["year"]),
-        "total_pixels": int(data["total_pixels"])
-    }
-
-def bitcoin_business_growth_schema(data):
-    return {
-        "country_name": str(data["country_name"]),
-        "cumulative_current_value": str(data["cumulative_current_value"]),
-        "year": int(data["year"]),
-        "total_pixels": int(data["total_pixels"])
-    }
 
 class DataSerializer:
     def __init__(self, schema_func):

content/data-lab/protected-mangroves.md

@@ -9,6 +9,5 @@ tags: ["Bitcoin", "Stats"]
 script: "/js/mangrove-map.js"
 ---
 
-{{< table id="mangrove_countries" endpoint="mangrove_by_country_latest" headers="{'country_with_parent': 'Country', 'original_pixels': '1996 Cover', 'total_n_pixels': '2020 Cover', 'cumulative_pixels_diff': 'Diff', 'cumulative_pct_diff': '% Diff'}" maxHeight="400px" sortable="true" valueId="country_with_parent" selectableRows="single" >}}
-{{< chart id="mangrove_countries" endpoint="mangrove_by_country_agg" chartType="bar" xAxisField="year" yAxisField="total_pixels" sortField="year" scaleChart=true >}}
+{{< table id="mangrove_countries" endpoint="mangrove_country_data" headers="{'country_with_parent': 'Country', 'original_pixels': '1996 Cover', 'total_n_pixels': '2020 Cover', 'cumulative_pixels_diff': 'Diff', 'cumulative_pct_diff': '% Diff'}" maxHeight="400px" sortable="true">}}
 {{< map id="map" style="https://tiles.semitamaps.com/styles/maptiler-basic/style.json">}}

layouts/partials/chart.html

@@ -2,95 +2,7 @@
 <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);
-          }
-        }
-
-        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>
+    <script src="{{ .src }}"></script>
   </div>
 </section>
 <script src="/js/chart-params.js"></script>

layouts/partials/head.html

@@ -8,7 +8,6 @@
   <link rel="stylesheet" href="/css/toc.css" type="text/css" media="all" />
   <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>
   <link
     rel="stylesheet"
     href="/css/codeblock.css"

layouts/partials/table.html

@@ -1,120 +0,0 @@
-<script>
-  function createTable(
-    endpoint,
-    id,
-    headers,
-    maxHeight,
-    sortable,
-    valueId,
-    selectableRows,
-  ) {
-    async function fetchDataForTable() {
-      try {
-        const apiEndpoint = `${apiURL}/${endpoint}`;
-        const response = await fetch(apiEndpoint);
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const fetchedData = await response.json();
-        data = fetchedData;
-        generateTable(data);
-      } catch (error) {
-        console.error("Fetching data failed:", error);
-      }
-    }
-
-    function generateTable(data) {
-      const jsonTableContainer = document.getElementById(
-        `${id}-table-container`,
-      );
-      jsonTableContainer.className = "jsonTableContainer";
-      jsonTableContainer.innerHTML = "";
-      jsonTableContainer.style.maxHeight = maxHeight;
-
-      tableHeaderNames = Object.values(headers);
-      tableHeaderKeys = Object.keys(headers);
-
-      const table = document.createElement("table");
-      table.id = id;
-      const thead = document.createElement("thead");
-      const tbody = document.createElement("tbody");
-      const headerRow = document.createElement("tr");
-      tableHeaderNames.forEach((header) => {
-        const th = document.createElement("th");
-        th.textContent = header;
-        headerRow.appendChild(th);
-      });
-      thead.appendChild(headerRow);
-      table.appendChild(thead);
-
-      for (const key in data) {
-        const row = document.createElement("tr");
-        row.value = data[key][valueId];
-        tableHeaderKeys.forEach((columnName) => {
-          const td = document.createElement("td");
-          const div = document.createElement("div");
-          div.id = "scrollable";
-          div.textContent = data[key][columnName];
-          td.appendChild(div);
-          row.appendChild(td);
-          tbody.appendChild(row);
-        });
-      }
-      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") {
-              // Deselect the currently selected row, if any
-              if (currentlySelectedRow && currentlySelectedRow !== this) {
-                currentlySelectedRow.classList.remove("selected");
-                const deselectEvent = new CustomEvent("rowDeselected", {
-                  detail: { row: currentlySelectedRow },
-                });
-                document.dispatchEvent(deselectEvent);
-              }
-
-              // 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);
-          });
-        }
-      }
-
-      jsonTableContainer.appendChild(table);
-      if (sortable == "true") {
-        table.className = "sortable";
-        sorttable.makeSortable(document.getElementById(id));
-      }
-    }
-    fetchDataForTable();
-  }
-</script>

layouts/shortcodes/chart.html

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

layouts/shortcodes/table.html

@@ -1,8 +1,63 @@
-{{ partial "table.html" }}
-<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" }})
-});
+  async function fetchDataForTable() {
+    try {
+      const apiEndpoint = `${apiURL}/{{ .Get "endpoint" }}`;
+      const response = await fetch(apiEndpoint);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const fetchedData = await response.json();
+      data = fetchedData;
+      console.log(data);
+      createTable(data);
+    } catch (error) {
+      console.error("Fetching data failed:", error);
+    }
+  }
+
+  function createTable(data) {
+    const jsonTableContainer = document.getElementById("jsonTableContainer");
+    jsonTableContainer.innerHTML = "";
+    jsonTableContainer.style.maxHeight = "{{ .Get `maxHeight` }}"
+
+    tableHeaderNames = Object.values({{ .Get `headers` | safeJS }});
+    tableHeaderKeys = Object.keys({{ .Get `headers` | safeJS }});
+
+    const table = document.createElement("table");
+    table.id = "{{ .Get `id` }}"
+    const thead = document.createElement("thead");
+    const tbody = document.createElement("tbody");
+    const headerRow = document.createElement("tr");
+    tableHeaderNames.forEach((header) => {
+      const th = document.createElement("th");
+      th.textContent = header;
+      headerRow.appendChild(th);
+    });
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+
+    for (const key in data) {
+      const row = document.createElement('tr');
+      tableHeaderKeys.forEach((columnName) => {
+        const td = document.createElement("td");
+        const div = document.createElement("div");
+        div.id = "scrollable";
+        div.textContent = data[key][columnName];
+        td.appendChild(div);
+        row.appendChild(td);
+        tbody.appendChild(row);
+      });
+    }
+    table.appendChild(thead);
+    table.appendChild(tbody);
+    jsonTableContainer.appendChild(table)
+    {{ if eq (.Get "sortable") "true" }}
+      table.className = "sortable"
+      sorttable.makeSortable(document.getElementById("{{ .Get `id` }}"));
+    {{ end }}
+
+    table.className = ""
+  }
 </script>
-</div>
+<div id="jsonTableContainer"></div>
+<script src="/js/lib/sorttable.js"></script>

static/css/tables.css

@@ -1,5 +1,5 @@
 /* Tables */
-.jsonTableContainer {
+#jsonTableContainer {
   display: flex;
   overflow-y: auto;
 }
@@ -49,10 +49,3 @@ tr:nth-child(odd) {
   background-color: var(--table-odd-row-bg-color);
   font-size: var(--table-row-font-size);
 }
-tr:hover {
-  background-color: #f5f5f5;
-}
-
-tr.selected {
-  background-color: #d1ecf1;
-}