refactor

backend/models/pipelines.py

@@ -27,3 +27,97 @@ def mangrove_by_country_agg(query):
         {"$sort": {"year": 1}},
     ]
     return pipeline
+
+
+def bitcoin_business_growth_timeseries(query):
+    pipeline = [
+        {
+            "$match": {
+                "days_ago": {"$lte": int( query["days_ago"] )},
+                "country_name": query["country_name"],
+            }
+        },
+        {
+            "$project": {
+                "country_name": "$country_name",
+                "date": "$date",
+                "cumulative_value": "$cumulative_value",
+            }
+        },
+        {"$sort": {"country_name": 1, "days_ago": 1}},
+    ]
+    return pipeline
+
+
+def bitcoin_business_growth_percent_diff_days_ago(query):
+    pipeline = [
+        {"$match": {"days_ago": {"$lte": int( query["days_ago"] )}}},
+        {"$sort": {"country_name": 1, "days_ago": 1}},
+        {
+            "$group": {
+                "_id": "$country_name",
+                "firstValue": {"$first": "$cumulative_value"},
+                "lastValue": {"$last": "$cumulative_value"},
+                "firstDate": {"$min": "$date"},
+                "lastDate": {"$max": "$date"},
+            }
+        },
+        {
+            "$project": {
+                "country_name": "$_id",
+                "first_value": "$firstValue",
+                "last_value": "$lastValue",
+                "difference": {
+                    "$subtract": [
+                        {"$toDouble": "$firstValue"},
+                        {"$toDouble": "$lastValue"},
+                    ]
+                },
+                "first_date": "$firstDate",
+                "last_date": "$lastDate",
+                "percent_difference": {
+                    "$cond": {
+                        "if": {"$eq": [{"$toDouble": "$lastValue"}, 0]},
+                        "then": {
+                            "$cond": {
+                                "if": {"$gt": [{"$toDouble": "$firstValue"}, 0]},
+                                "then": "new",
+                                "else": "none",
+                            }
+                        },
+                        "else": {
+                            "$round": [
+                                {
+                                    "$multiply": [
+                                        {
+                                            "$divide": [
+                                                {
+                                                    "$subtract": [
+                                                        {"$toDouble": "$firstValue"},
+                                                        {"$toDouble": "$lastValue"},
+                                                    ]
+                                                },
+                                                {"$toDouble": "$lastValue"},
+                                            ]
+                                        },
+                                        100,
+                                    ]
+                                }
+                            ]
+                        },
+                    }
+                },
+            }
+        },
+    ]
+    return pipeline
+
+
+def bitcoin_business_growth_latest(query):
+    pipeline = [
+        {
+            "$match": query["filter"],
+        },
+        {"$sort": {"date": 1}},
+    ]
+    return pipeline

backend/routes/route.py

@@ -34,13 +34,26 @@ async def mangrove_by_country_agg(query: str):
     serializedData = serializer.serialize_many(rawData)
     return serializedData
 
-@router.get("/bitcoin_business_growth")
-async def bitcoin_business_growth(query: str):
+@router.get("/bitcoin_business_growth_percent_diff")
+async def bitcoin_business_growth_percent_diff(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)
+    schema = schemas.bitcoin_business_growth_percent_diff_schema
+    pipeline = pipelines.bitcoin_business_growth_percent_diff_days_ago(query)
+    serializer = DataSerializer(schema)
+    handler = MongoDBHandler(collection_name)
+    rawData = handler.aggregate(pipeline)
+    serializedData = serializer.serialize_many(rawData)
+    return serializedData
+
+@router.get("/bitcoin_business_growth_timeseries")
+async def bitcoin_business_growth_timeseries(query: str):
+    query = ast.literal_eval(query)
+    db = client.baseddata
+    collection_name = db["final__bitcoin_business_growth_by_country"]
+    schema = schemas.bitcoin_business_growth_timeseries_schema
+    pipeline = pipelines.bitcoin_business_growth_timeseries(query)
     serializer = DataSerializer(schema)
     handler = MongoDBHandler(collection_name)
     rawData = handler.aggregate(pipeline)

backend/schema/schemas.py

@@ -1,3 +1,6 @@
+def dt_to_date(datetime):
+    return datetime.date()
+
 def mangrove_by_country_latest_schema(data):
     return {
         "country_with_parent": str(data["country_with_parent"]),
@@ -14,12 +17,21 @@ def mangrove_by_country_agg_schema(data):
         "total_pixels": int(data["total_pixels"])
     }
 
-def bitcoin_business_growth_schema(data):
+def bitcoin_business_growth_percent_diff_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"])
+        "first_value": int(data["first_value"]),
+        "date_range": str(f'{dt_to_date(data["first_date"])} to {dt_to_date(data["last_date"])}'),
+        "last_value": int(data["last_value"]),
+        "difference": int(data["difference"]),
+        "percent_difference": str(data["percent_difference"])
+    }
+
+def bitcoin_business_growth_timeseries_schema(data):
+    return {
+        "country_name": str(data["country_name"]),
+        "date": dt_to_date(data["date"]),
+        "cumulative_value": int(data["cumulative_value"])
     }
 
 class DataSerializer:

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

@@ -15,8 +15,10 @@ You can select the growth period of interest from the drop-down, which updates t
 The chart always reflects the countries selected in the table.
 
 <br/>
-{{< chart src="/js/bitcoin-business-growth-chart.js" >}}
-{{< table src="/js/bitcoin-business-growth-table.js" >}}
+{{< dropdown_filter id="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" >}}
+{{< table id="bitcoin_business_growth" endpoint="bitcoin_business_growth_percent_diff" headers="{'country_name': 'Country', 'date_range': 'Date Range', 'last_value': 'Previous #', 'first_value': 'Current #', 'difference': 'Diff', 'percent_difference': '% Diff'}" maxHeight="400px" sortable="true" valueId="country_name" selectableRows="multi" >}}
+
+{{< chart id="bitcoin_business_growth" endpoint="bitcoin_business_growth_timeseries" chartType="line" xAxisField="date" yAxisField="cumulative_value" scaleChart=true >}}
 
 #### Attribution and License
 Data obtained from © [OpenStreetMap](https://www.openstreetmap.org/copyright)

content/data-lab/protected-mangroves.md

@@ -10,5 +10,5 @@ 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 >}}
+{{< 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">}}

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>

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/dropdown_filter.html

@@ -0,0 +1,27 @@
+{{ $id := .Get "id" }}
+{{ $default_selection := .Get "default_selection" }}
+{{ $options := .Get "options" }}
+
+{{ $options_split := split $options "," }}
+
+<div class="dropdown-filter-container">
+<select class="filter dropdown-filter" id="{{ $id }}" onchange="dispatchDropdownEvent(this)">
+  {{ range $options_split }}
+    {{ $parts := split . ":" }}
+    {{ $key := index $parts 0 }}
+    {{ $value := index $parts 1 }}
+    <option value="{{ $value }}" {{ if eq $key $default_selection }}selected{{ end }}>{{ $key }}</option>
+  {{ end }}
+</select>
+<script>
+  function dispatchDropdownEvent(selectElement) {
+    const event = new CustomEvent('filterChange', {
+      detail: {
+        filterId: selectElement.id,
+        filterValue: selectElement.value,
+      }
+    });
+    document.dispatchEvent(event);
+  }
+</script>
+</div>

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/lib/helper-functions.js

@@ -0,0 +1,16 @@
+function queryConstructor(customFilters = {}) {
+  let filters = document.querySelectorAll(".filter");
+  let queryObject = {};
+
+  Object.assign(queryObject, customFilters);
+
+  filters.forEach((filter) => {
+    const filterId = filter.id;
+    const filterValue = filter.value;
+    queryObject[filterId] = filterValue;
+  });
+
+  let queryString = `query=${JSON.stringify(queryObject)}`;
+
+  return queryString;
+}

static/js/mangrove-map.js

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