diff --git a/backend/api/pipelines.py b/backend/api/pipelines.py index 683e1ae..1b778d1 100644 --- a/backend/api/pipelines.py +++ b/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"] diff --git a/backend/api/route.py b/backend/api/route.py index 22c8455..02ce12b 100644 --- a/backend/api/route.py +++ b/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) diff --git a/backend/api/schemas.py b/backend/api/schemas.py index f822d3a..4747ec7 100644 --- a/backend/api/schemas.py +++ b/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"]), diff --git a/content/data-lab/global-business-growth.md b/content/data-lab/global-business-growth.md index c7858c3..d87cea3 100644 --- a/content/data-lab/global-business-growth.md +++ b/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) diff --git a/content/data-lab/protected-mangroves.md b/content/data-lab/protected-mangroves.md index 4c11a03..47d935d 100644 --- a/content/data-lab/protected-mangroves.md +++ b/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 >}} diff --git a/layouts/data-lab/baseof.html b/layouts/data-lab/baseof.html index 33de3a0..ce96df4 100644 --- a/layouts/data-lab/baseof.html +++ b/layouts/data-lab/baseof.html @@ -1,4 +1,5 @@ + {{ partial "head.html" . }} diff --git a/layouts/partials/chart.html b/layouts/partials/chart.html index 92a8ef9..cbf44d4 100644 --- a/layouts/partials/chart.html +++ b/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 @@ }); } - diff --git a/layouts/partials/table.html b/layouts/partials/table.html index 22d836f..2a21d0a 100644 --- a/layouts/partials/table.html +++ b/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 { diff --git a/layouts/shortcodes/chart.html b/layouts/shortcodes/chart.html index b030efa..f092699 100644 --- a/layouts/shortcodes/chart.html +++ b/layouts/shortcodes/chart.html @@ -3,7 +3,7 @@
diff --git a/static/js/mangrove-map.js b/static/js/mangrove-map.js index c5920ae..3617fc5 100644 --- a/static/js/mangrove-map.js +++ b/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", +// }); +// }); +//