Add mangrove country timeseries functionality

- Add `mangrove_country_timeseries` function in `pipelines.py` to fetch timeseries data.
- Implement `mangrove_country_timeseries` endpoint in `route.py` to handle requests.
- Define `mangrove_country_timeseries_schema` in `schemas.py` for data serialization

backend/api/pipelines.py

@@ -12,6 +12,14 @@ def mangrove_by_country_latest():
            order by cumulative_pixels_diff desc
            """
 
+def mangrove_country_timeseries(args):
+    country_name = args["country_with_parent"]
+    return f"""
+           select year, total_n_pixels from models_final.final__protected_mangroves_summary_stats_by_country_agg
+           where country_with_parent = '{country_name}'
+           order by year
+           """
+
 def bitcoin_business_growth_timeseries(args):
     days_ago = parse_int(args["days_ago"])
     country_name = args["country_name"]

backend/api/route.py

@@ -24,6 +24,19 @@ async def mangrove_by_country_latest():
     serializedData = serializer.serialize_many(rawData)
     return serializedData
 
+@router.get("/mangrove_country_timeseries")
+async def mangrove_country_timeseries(query: str):
+    args = parse_args_to_dict(query)
+
+    pipeline = pipelines.mangrove_country_timeseries(args)
+    handler = PostgresHandler()
+
+    schema = schemas.mangrove_country_timeseries_schema
+    serializer = DataSerializer(schema)
+    rawData = handler.execute_query(pipeline)
+    serializedData = serializer.serialize_many(rawData)
+    return serializedData
+
 @router.get("/bitcoin_business_growth_timeseries")
 async def bitcoin_business_growth_timeseries(query: str):
     args = parse_args_to_dict(query)

backend/api/schemas.py

@@ -7,6 +7,12 @@ def mangrove_by_country_latest_schema(data):
         "cumulative_pct_diff": float(data["cumulative_pct_diff"]),
     }
 
+def mangrove_country_timeseries_schema(data):
+    return {
+        "year": str(data["year"]),
+        "total_n_pixels": int(data["total_n_pixels"]),
+    }
+
 def mangrove_by_country_agg_schema(data):
     return {
         "country_with_parent": str(data["country_with_parent"]),

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

@@ -18,7 +18,7 @@ The chart always reflects the countries selected in the table.
 {{< 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-table" endpoint="bitcoin_business_growth_percent_diff" headers="{'country_name': 'Country', 'date_range': 'Date Range', 'first_value': 'Previous #', 'last_value': 'Current #', 'difference': 'Diff', 'percent_difference': '% Diff'}" maxHeight="400px" sortable="true" valueId="country_name" selectableRows="multi" targets="bitcoin-business-growth-chart" defaultFirstSelected="true" >}}
 
-{{< chart id="bitcoin-business-growth-chart" 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 xAxisType="category" >}}
 
 #### Attribution and License
 Data obtained from © [OpenStreetMap](https://www.openstreetmap.org/copyright)

content/data-lab/protected-mangroves.md

@@ -9,8 +9,7 @@ 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" defaultFirstSelected="true" >}}
-{{< chart id="mangrove_countries" endpoint="mangrove_by_country_agg" chartType="bar" xAxisField="year" yAxisField="total_pixels" scaleChart=true >}}
-{{< map id="map" style="https://tiles.semitamaps.com/styles/maptiler-basic/style.json">}}
+{{< 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" defaultFirstSelected="true" targets="mangrove-country-timeseries-chart" >}}
+
+{{< chart id="mangrove-country-timeseries-chart" endpoint="mangrove_country_timeseries" chartType="bar" xAxisField="year" yAxisField="total_n_pixels" scaleChart=true xAxisType="category" >}}
 
-{{< chart id="mangrove-country-timeseries-chart" endpoint="mangrove_country_timeseries" chartType="line" xAxisField="date" yAxisField="n_pixels" scaleChart=true >}}

layouts/data-lab/baseof.html

@@ -1,4 +1,5 @@
 <!doctype html>
+<script src="/js/chart-params.js"></script>
 <head>
   {{ partial "head.html" . }}
 </head>

layouts/partials/chart.html

@@ -9,6 +9,8 @@
     yAxisField,
     sortField = null,
     scaleChart = false,
+    xAxisType = "time",
+    formatValueDecimalPlaces = null
   ) {
     async function fetchDataForChart(query, valueId) {
       try {
@@ -34,7 +36,6 @@
     }
 
     function updateChart() {
-      console.log(chartData);
       let chartDataMap = new Map();
       for (let objectId in chartData) {
         chartDataMap.set(objectId, chartData[objectId]);
@@ -46,11 +47,11 @@
         tooltip: {
           ...tooltip,
           valueFormatter(value, index) {
-            return nFormatter(value, 0);
+            return formatValueDecimalPlaces == null ? value : nFormatter(value, formatValueDecimalPlaces);
           },
         },
         xAxis: {
-          type: "time",
+          type: xAxisType,
         },
         yAxis: {
           scale: scaleChart,
@@ -93,4 +94,3 @@
     });
   }
 </script>
-<script src="/js/chart-params.js"></script>

layouts/partials/table.html

@@ -98,6 +98,16 @@
                 document.dispatchEvent(event);
               }
             } else if (selectableRows === "single") {
+                const event = new CustomEvent("filterChange", {
+                  detail: {
+                    filterId: valueId,
+                    filterValue: this.value,
+                    filterActions: ["selected"],
+                    filterTargets: filterTargets,
+                  },
+                });
+                document.dispatchEvent(event);
+
               if (this.classList.contains("selected")) {
                 this.classList.remove("selected");
               } else {

layouts/shortcodes/chart.html

@@ -3,7 +3,7 @@
 <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" }})
+  createChart(id={{ .Get "id" }}, endpoint={{ .Get "endpoint" }}, chartType={{ .Get "chartType" }},  xAxisField={{ .Get "xAxisField" }}, yAxisField={{ .Get "yAxisField" }}, sortField={{ .Get "sortField" }}, scaleChart={{ .Get "scaleChart" }}, xAxisType={{ .Get "xAxisType" }})
 });
 </script>
 </div>

static/js/mangrove-map.js

@@ -1,17 +1,17 @@
-maplibregl.addProtocol("cog", MaplibreCOGProtocol.cogProtocol);
-
-map.on("load", () => {
-  map.addSource("imageSource", {
-    type: "raster",
-    url: `cog://http://localhost:5000/cog?year=${year}&pid=${pid}`,
-    tileSize: 256,
-    minzoom: 0,
-  });
-
-  map.addLayer({
-    id: "imageLayer",
-    source: "imageSource",
-    type: "raster",
-  });
-});
-
+// maplibregl.addProtocol("cog", MaplibreCOGProtocol.cogProtocol);
+//
+// map.on("load", () => {
+//   map.addSource("imageSource", {
+//     type: "raster",
+//     url: `cog://http://localhost:5000/cog?year=${year}&pid=${pid}`,
+//     tileSize: 256,
+//     minzoom: 0,
+//   });
+//
+//   map.addLayer({
+//     id: "imageLayer",
+//     source: "imageSource",
+//     type: "raster",
+//   });
+// });
+//