backend/models/pipelines.py

@@ -27,97 +27,3 @@ 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,26 +34,13 @@ async def mangrove_by_country_agg(query: str):
     serializedData = serializer.serialize_many(rawData)
     return serializedData
 
-@router.get("/bitcoin_business_growth_percent_diff")
+@router.get("/bitcoin_business_growth")
-async def bitcoin_business_growth_percent_diff(query: str):
+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_percent_diff_schema
+    schema = schemas.bitcoin_business_growth
-    pipeline = pipelines.bitcoin_business_growth_percent_diff_days_ago(query)
+    pipeline = pipelines.bitcoin_business_growth(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,6 +1,3 @@
-def dt_to_date(datetime):
-    return datetime.date()
-
 def mangrove_by_country_latest_schema(data):
     return {
         "country_with_parent": str(data["country_with_parent"]),
@@ -17,21 +14,12 @@ def mangrove_by_country_agg_schema(data):
         "total_pixels": int(data["total_pixels"])
     }
 
-def bitcoin_business_growth_percent_diff_schema(data):
+def bitcoin_business_growth_schema(data):
     return {
         "country_name": str(data["country_name"]),
-        "first_value": int(data["first_value"]),
+        "cumulative_current_value": str(data["cumulative_current_value"]),
-        "date_range": str(f'{dt_to_date(data["first_date"])} to {dt_to_date(data["last_date"])}'),
+        "year": int(data["year"]),
-        "last_value": int(data["last_value"]),
+        "total_pixels": int(data["total_pixels"])
-        "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,10 +15,8 @@ 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/>
-{{< 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" >}}
+{{< chart src="/js/bitcoin-business-growth-chart.js" >}}
-{{< 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" >}}
+{{< table src="/js/bitcoin-business-growth-table.js" >}}
-
-{{< 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" scaleChart=true >}}
+{{< chart id="mangrove_countries" endpoint="mangrove_by_country_agg" chartType="bar" xAxisField="year" yAxisField="total_pixels" sortField="year" scaleChart=true >}}
 {{< map id="map" style="https://tiles.semitamaps.com/styles/maptiler-basic/style.json">}}

layouts/partials/chart.html

@@ -1,5 +1,8 @@
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
-<script>
+<section class="chart-container">
+  <div id="chart-modifiers"></div>
+  <div id="chart">
+    <script>
       chartData = [];
       function createChart(
         id,
@@ -12,7 +15,7 @@
       ) {
         async function fetchDataForChart(query, valueId) {
           try {
-        const apiEndpoint = `${apiURL}/${endpoint}?${query}`;
+            const apiEndpoint = `${apiURL}/${endpoint}?query=${query}`;
             const response = await fetch(apiEndpoint);
             if (!response.ok) {
               throw new Error(`HTTP error! status: ${response.status}`);
@@ -39,18 +42,17 @@
           for (let objectId in chartData) {
             chartDataMap.set(objectId, chartData[objectId]);
           }
-      var chartDom = document.getElementById(`${id}--chart`);
+          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 = {
-        tooltip: {
-          ...tooltip,
-          valueFormatter(value, index) {
-            return nFormatter(value, 0);
-          },
-        },
             xAxis: {
-          type: "time",
+              type: "category",
             },
             yAxis: {
               scale: scaleChart,
@@ -66,7 +68,6 @@
 
           myChart.setOption(option, true);
         }
-
         document.addEventListener("rowSelected", (event) => {
           console.log(
             "Row selected:",
@@ -75,12 +76,8 @@
             event.detail.valueId,
             event.detail.selectableRows,
           );
-      valueId = event.detail.valueId
+          query = `{'country_with_parent': '${event.detail.row.value}'}`;
-      let selectedRow = {
+          fetchDataForChart(query, event.detail.valueId);
-        [valueId]: event.detail.row.value,
-      };
-      query = queryConstructor(selectedRow);
-      fetchDataForChart(query, valueId);
         });
 
         document.addEventListener("rowDeselected", (event) => {
@@ -90,8 +87,10 @@
             event.detail.row.value,
           );
           delete chartData[event.detail.row.value];
-      updateChart();
+          updateChart()
         });
       }
-</script>
+    </script>
+  </div>
+</section>
 <script src="/js/chart-params.js"></script>

layouts/partials/head.html

@@ -9,7 +9,6 @@
   <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(query) {
+    async function fetchDataForTable() {
       try {
-        const apiEndpoint = `${apiURL}/${endpoint}?${query}`;
+        const apiEndpoint = `${apiURL}/${endpoint}`;
         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`;
+      table.id = id;
       const thead = document.createElement("thead");
       const tbody = document.createElement("tbody");
       const headerRow = document.createElement("tr");
@@ -89,6 +89,7 @@
               currentlySelectedRow = this.classList.contains("selected")
                 ? this
                 : null;
+
             } else {
               // Multi-select behavior
               this.classList.toggle("selected");
@@ -99,11 +100,7 @@
                 ? "rowSelected"
                 : "rowDeselected",
               {
-                detail: {
+                detail: { row: this, selectableRows: selectableRows, valueId: valueId},
-                  row: this,
-                  selectableRows: selectableRows,
-                  valueId: valueId,
-                },
               },
             );
 
@@ -111,21 +108,13 @@
           });
         }
       }
-      jsonTableContainer.appendChild(table);
 
-      // sortable
+      jsonTableContainer.appendChild(table);
       if (sortable == "true") {
         table.className = "sortable";
-        sorttable.makeSortable(document.getElementById(`${id}--table`));
+        sorttable.makeSortable(document.getElementById(id));
       }
     }
-
+    fetchDataForTable();
-    document.addEventListener("filterChange", function (event) {
-      query = queryConstructor()
-      fetchDataForTable(query);
-    });
-
-    query = queryConstructor()
-    fetchDataForTable(query);
   }
 </script>

layouts/shortcodes/chart.html

@@ -1,10 +1,8 @@
 {{ partial "chart.html" }}
-<section class = 'chart-container'>
+<div id = '{{ .Get "id" }}-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

@@ -1,27 +0,0 @@
-{{ $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 "cd backend && uvicorn main:app --reload" C-m
+       tmux send-keys -t 1 "python backend/main.py" C-m
        echo "Baseddata running in dev tmux shell"
     fi
   '';

static/css/charts.css

@@ -1,11 +1,24 @@
 /* Charts */
-.chart-container {
+.chart-flex-container {
   display: flex;
-  height: 300px;
 }
 
-.chart {
+.chart-flex-container article {
-  display: flex;
+  flex: 1;
-  height: 100%;
+}
-  width: 100%;
+
+#chart {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+
+.chart-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+#chart-modifiers {
+  display: flex;
 }

static/js/lib/helper-functions.js

@@ -1,16 +0,0 @@
-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,3 +15,6 @@ map.on("load", () => {
   });
 });
 
+document.addEventListener("DOMContentLoaded", function () {
+  fetchDataForTable();
+});