From 212421b42fe52ad4c2e3f8a0cbb62043eb750560 Mon Sep 17 00:00:00 2001 From: Alexis Michaltsis Date: Mon, 26 Sep 2022 21:05:47 +0200 Subject: [PATCH 01/18] Add basic placeholder chart --- digiplan/static/js/popup.js | 73 +++++++++++++++++++++----- digiplan/templates/popups/default.html | 7 +-- digiplan/templates/popups/results.html | 8 +++ 3 files changed, 71 insertions(+), 17 deletions(-) create mode 100644 digiplan/templates/popups/results.html diff --git a/digiplan/static/js/popup.js b/digiplan/static/js/popup.js index 4138b8eb..ff439071 100644 --- a/digiplan/static/js/popup.js +++ b/digiplan/static/js/popup.js @@ -1,10 +1,12 @@ "use strict"; -function add_popup(layer_id, fields, template_id="default") { +function add_popup(layer_id, fields, template_id = "default") { map.on("click", layer_id, function (e) { let coordinates; // Check if popup already exists: - if ($('.mapboxgl-popup').length > 0) {return;} + if ($('.mapboxgl-popup').length > 0) { + return; + } if ("lat" in e.features[0].properties) { // Get coordinates from lat/lon: @@ -13,21 +15,68 @@ function add_popup(layer_id, fields, template_id="default") { // Get coordinates from geometry: coordinates = e.lngLat; } - var template = $($("#" + template_id + "_popup").prop("content")).find("div"); - var clone = template.clone(); - var table = clone.find("table"); - for (var label in fields) { + const template = document.getElementById(template_id + "_popup"); + const clone = template.content.cloneNode(true); + const html = clone.getElementById("popup_div"); + const table = html.querySelector("table"); + let tableRows = ""; + for (const label in fields) { const key = fields[label]; const value = e.features[0].properties[key]; - let row = $(""); - row.append($("").text(label)); - row.append($("").text(value)); - table.append(row); + tableRows += `${label}${value}`; } - new maplibregl.Popup().setLngLat(coordinates).setHTML(clone.html()).addTo(map); + table.innerHTML = tableRows; + + const chartDom = html.querySelector("#popup_chart"); + const myChart = echarts.init(chartDom, null, {renderer: 'svg'}); + let option; + + option = { + animation: false, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: [ + { + type: 'category', + data: ["2023", "2030", "2045"], + axisTick: { + alignWithLabel: true + } + } + ], + yAxis: [ + { + type: 'value' + } + ], + series: [ + { + name: 'Direct', + type: 'bar', + barWidth: '60%', + data: [20000, 22000, 24000] + } + ] + }; + + option && myChart.setOption(option); + + requestAnimationFrame(() => { + new maplibregl.Popup().setLngLat(coordinates).setHTML(html.innerHTML).addTo(map); + }); }); } -$(document).ready(function() { +$(document).ready(function () { $('#js-intro-modal').modal('show'); }); diff --git a/digiplan/templates/popups/default.html b/digiplan/templates/popups/default.html index 60531ec4..d9254768 100644 --- a/digiplan/templates/popups/default.html +++ b/digiplan/templates/popups/default.html @@ -1,9 +1,6 @@ - diff --git a/digiplan/templates/popups/results.html b/digiplan/templates/popups/results.html new file mode 100644 index 00000000..a778bd92 --- /dev/null +++ b/digiplan/templates/popups/results.html @@ -0,0 +1,8 @@ + From 22fef6b2dc607ddb8ea3f518dce87fdca31f5982 Mon Sep 17 00:00:00 2001 From: Alexis Michaltsis Date: Wed, 12 Oct 2022 16:05:51 +0200 Subject: [PATCH 02/18] Add layer id in debug mode in console log on map click --- digiplan/templates/map.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/digiplan/templates/map.html b/digiplan/templates/map.html index e187131e..2900e280 100644 --- a/digiplan/templates/map.html +++ b/digiplan/templates/map.html @@ -349,7 +349,7 @@ {% if debug %} {% for layer in all_layers %} map.on("click", "{{layer.id}}", function (e) { - console.log(e.features[0].properties.name, e.features[0]); + console.log("{{layer.id}}:", e.features[0].properties.name, e.features[0]); }); {% endfor %} setDebugMode(true); From 8fdec99ad7a3d4499f3d3af1082f22da14d2ede6 Mon Sep 17 00:00:00 2001 From: Alexis Michaltsis Date: Wed, 12 Oct 2022 17:08:00 +0200 Subject: [PATCH 03/18] Fetch popup chart data dynamically from static API test endpoint --- digiplan/static/js/popup.js | 127 ++++++++++++++++++--------- digiplan/static/tests/api/popup.json | 58 ++++++++++++ 2 files changed, 142 insertions(+), 43 deletions(-) create mode 100644 digiplan/static/tests/api/popup.json diff --git a/digiplan/static/js/popup.js b/digiplan/static/js/popup.js index ff439071..47672704 100644 --- a/digiplan/static/js/popup.js +++ b/digiplan/static/js/popup.js @@ -1,5 +1,36 @@ "use strict"; +async function fetchGetJson(url) { + try { + // Default options are marked with * + const response = await fetch(url, { + method: "GET", // *GET, POST, PUT, DELETE, etc. + mode: "cors", // no-cors, *cors, same-origin + cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached + credentials: "same-origin", // include, *same-origin, omit + headers: { + "Content-Type": "application/json", + }, + redirect: "follow", // manual, *follow, error + referrerPolicy: "no-referrer", // no-referrer, *client + }); + return await response.json(); // parses JSON response into native JavaScript objects + } catch (err) { + if (err instanceof Error) { + throw new Error(err.message); + } + throw err; + } +} + +function createListByName(name, series) { + let list = []; + for (const item in series) { + list.push(series[item][name]); + } + return list; +} + function add_popup(layer_id, fields, template_id = "default") { map.on("click", layer_id, function (e) { let coordinates; @@ -26,54 +57,64 @@ function add_popup(layer_id, fields, template_id = "default") { tableRows += `${label}${value}`; } table.innerHTML = tableRows; - const chartDom = html.querySelector("#popup_chart"); const myChart = echarts.init(chartDom, null, {renderer: 'svg'}); - let option; - option = { - animation: false, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - xAxis: [ - { - type: 'category', - data: ["2023", "2030", "2045"], - axisTick: { - alignWithLabel: true - } - } - ], - yAxis: [ - { - type: 'value' - } - ], - series: [ - { - name: 'Direct', - type: 'bar', - barWidth: '60%', - data: [20000, 22000, 24000] - } - ] - }; + const url = "/static/tests/api/popup.json??lookup=population&municipality=12lang=en"; // TODO: construct dynamically - option && myChart.setOption(option); + fetchGetJson(url).then( + // TODO: for now we assume response has chart. Later determine dynamically. + ({chart}) => { + // TODO: use chartType in payload to construct chart dynamically. For now we assume bar chart type. + // TODO: In this fetch we always expect one payload item. Make failsafe. + const series = chart.payload[0].data.series; + const xAxisData = createListByName("key", series); + const yAxisData = createListByName("value", series); + const option = { + animation: false, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: [ + { + type: 'category', + data: xAxisData, + axisTick: { + alignWithLabel: true + } + } + ], + yAxis: [ + { + type: 'value' + } + ], + series: [ + { + name: 'Direct', + type: 'bar', + barWidth: '60%', + data: yAxisData, + } + ] + }; - requestAnimationFrame(() => { - new maplibregl.Popup().setLngLat(coordinates).setHTML(html.innerHTML).addTo(map); - }); + myChart.setOption(option); + + requestAnimationFrame(() => { + new maplibregl.Popup().setLngLat(coordinates).setHTML(html.innerHTML).addTo(map); + }); + } + ); }); } diff --git a/digiplan/static/tests/api/popup.json b/digiplan/static/tests/api/popup.json new file mode 100644 index 00000000..deb2a8b7 --- /dev/null +++ b/digiplan/static/tests/api/popup.json @@ -0,0 +1,58 @@ +{ + "application": "popup", + "chart": { + "chartType": "bar", + "payload": [ + { + "data": { + "definition": { + "key": { + "lookup": "year", + "name": "Year", + "type": "integer" + }, + "value": { + "lookup": "population", + "name": "Population", + "type": "integer" + } + }, + "series": [ + { + "key": 2022, + "value": 9311 + }, + { + "key": 2030, + "value": 9182 + }, + { + "key": 2045, + "value": 8903 + } + ] + }, + "description": "The population in 2022 of Z\u00f6rbig was 9,311 inhabitants. The entire ABW region had 370,190 inhabitants at that time. The following chart shows a forecast of the population development for the years 2022, 2030, and 2045.", + "id": 12, + "name": "Z\u00f6rbig" + } + ] + }, + "language": "en", + "lookup": "population", + "name": "Population Forecast", + "sources": [ + { + "iri": "https://wam.rl-institut.de/digiplan/sources#11", + "name": "Bev\u00f6lkerungz\u00e4hlung Anhalt, 2021" + }, + { + "iri": "https://wam.rl-institut.de/digiplan/sources#12", + "name": "Bev\u00f6lkerungsprognose Anhalt, 2030" + }, + { + "iri": "https://wam.rl-institut.de/digiplan/sources#13", + "name": "Bev\u00f6lkerungsprognose Anhalt, 2050" + } + ] +} From d09e23f6a9c192480068402af9613a54325a25d0 Mon Sep 17 00:00:00 2001 From: Alexis Michaltsis Date: Wed, 12 Oct 2022 18:15:45 +0200 Subject: [PATCH 04/18] Construct coordinates from event --- digiplan/static/js/popup.js | 47 ++++++++++++++++++++++++------------- 1 file changed, 31 insertions(+), 16 deletions(-) diff --git a/digiplan/static/js/popup.js b/digiplan/static/js/popup.js index 47672704..d5543cc6 100644 --- a/digiplan/static/js/popup.js +++ b/digiplan/static/js/popup.js @@ -23,6 +23,13 @@ async function fetchGetJson(url) { } } +function createCoordinates(event) { + if ("lat" in event.features[0].properties) { + return [event.features[0].properties.lat, event.features[0].properties.lon]; + } + return event.lngLat; +} + function createListByName(name, series) { let list = []; for (const item in series) { @@ -32,20 +39,22 @@ function createListByName(name, series) { } function add_popup(layer_id, fields, template_id = "default") { - map.on("click", layer_id, function (e) { - let coordinates; - // Check if popup already exists: + map.on("click", layer_id, function (event) { + /* + Check if popup already exists + */ if ($('.mapboxgl-popup').length > 0) { return; } - if ("lat" in e.features[0].properties) { - // Get coordinates from lat/lon: - coordinates = [e.features[0].properties.lat, e.features[0].properties.lon]; - } else { - // Get coordinates from geometry: - coordinates = e.lngLat; - } + /* + Construct Coordinates From Event + */ + const coordinates = createCoordinates(event); + + /* + Construct Popup From Event And Params + */ const template = document.getElementById(template_id + "_popup"); const clone = template.content.cloneNode(true); const html = clone.getElementById("popup_div"); @@ -53,21 +62,29 @@ function add_popup(layer_id, fields, template_id = "default") { let tableRows = ""; for (const label in fields) { const key = fields[label]; - const value = e.features[0].properties[key]; + const value = event.features[0].properties[key]; tableRows += `${label}${value}`; } table.innerHTML = tableRows; + + /* + Init Chart + */ const chartDom = html.querySelector("#popup_chart"); const myChart = echarts.init(chartDom, null, {renderer: 'svg'}); - const url = "/static/tests/api/popup.json??lookup=population&municipality=12lang=en"; // TODO: construct dynamically + // TODO: construct dynamically via emitted id by event + const url = "/static/tests/api/popup.json??lookup=population&municipality=12lang=en"; fetchGetJson(url).then( // TODO: for now we assume response has chart. Later determine dynamically. - ({chart}) => { + (data) => { + /* + Construct Chart + */ // TODO: use chartType in payload to construct chart dynamically. For now we assume bar chart type. // TODO: In this fetch we always expect one payload item. Make failsafe. - const series = chart.payload[0].data.series; + const series = data.chart.payload[0].data.series; const xAxisData = createListByName("key", series); const yAxisData = createListByName("value", series); const option = { @@ -107,9 +124,7 @@ function add_popup(layer_id, fields, template_id = "default") { } ] }; - myChart.setOption(option); - requestAnimationFrame(() => { new maplibregl.Popup().setLngLat(coordinates).setHTML(html.innerHTML).addTo(map); }); From 64b583b187b20dd4b0e79a1a83808aa02942069c Mon Sep 17 00:00:00 2001 From: Alexis Michaltsis Date: Wed, 12 Oct 2022 20:40:40 +0200 Subject: [PATCH 05/18] Add all popup segments (fields) to popup and make them configurable via layers.py in backend --- digiplan/map/layers.py | 2 +- digiplan/schemas/popup.default.example.json | 2 +- digiplan/static/js/popup.js | 159 +++++++++++--------- digiplan/static/tests/api/popup.json | 95 ++++++------ digiplan/templates/popups/default.html | 7 +- digiplan/templates/popups/results.html | 13 +- 6 files changed, 152 insertions(+), 126 deletions(-) diff --git a/digiplan/map/layers.py b/digiplan/map/layers.py index 4c84bcaa..2aa64293 100644 --- a/digiplan/map/layers.py +++ b/digiplan/map/layers.py @@ -73,7 +73,7 @@ class RasterLayerData: name="Ergebnisse", name_singular="Ergebnis", description="", - popup_fields=["name"], + popup_fields=("title", "municipality", "description", "chart", "sources"), # order matters ) ] } diff --git a/digiplan/schemas/popup.default.example.json b/digiplan/schemas/popup.default.example.json index b36c2a10..5d1ae1c8 100644 --- a/digiplan/schemas/popup.default.example.json +++ b/digiplan/schemas/popup.default.example.json @@ -106,7 +106,7 @@ }, "language": "en", "lookup": "population", - "name": "Population Forecast", + "name": "Population", "sources": [ { "iri": "https://wam.rl-institut.de/digiplan/sources#11", diff --git a/digiplan/static/js/popup.js b/digiplan/static/js/popup.js index d5543cc6..712d49fc 100644 --- a/digiplan/static/js/popup.js +++ b/digiplan/static/js/popup.js @@ -52,82 +52,105 @@ function add_popup(layer_id, fields, template_id = "default") { */ const coordinates = createCoordinates(event); - /* - Construct Popup From Event And Params - */ - const template = document.getElementById(template_id + "_popup"); - const clone = template.content.cloneNode(true); - const html = clone.getElementById("popup_div"); - const table = html.querySelector("table"); - let tableRows = ""; - for (const label in fields) { - const key = fields[label]; - const value = event.features[0].properties[key]; - tableRows += `${label}${value}`; - } - table.innerHTML = tableRows; - - /* - Init Chart - */ - const chartDom = html.querySelector("#popup_chart"); - const myChart = echarts.init(chartDom, null, {renderer: 'svg'}); - // TODO: construct dynamically via emitted id by event const url = "/static/tests/api/popup.json??lookup=population&municipality=12lang=en"; fetchGetJson(url).then( // TODO: for now we assume response has chart. Later determine dynamically. - (data) => { + (response) => { /* - Construct Chart + Construct Popup From Event And Params */ - // TODO: use chartType in payload to construct chart dynamically. For now we assume bar chart type. - // TODO: In this fetch we always expect one payload item. Make failsafe. - const series = data.chart.payload[0].data.series; - const xAxisData = createListByName("key", series); - const yAxisData = createListByName("value", series); - const option = { - animation: false, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - xAxis: [ - { - type: 'category', - data: xAxisData, - axisTick: { - alignWithLabel: true - } - } - ], - yAxis: [ - { - type: 'value' - } - ], - series: [ - { - name: 'Direct', - type: 'bar', - barWidth: '60%', - data: yAxisData, + const template = document.getElementById(template_id + "_popup"); + const clone = template.content.cloneNode(true); + const html = clone.getElementById("popup"); + for (const field in fields) { + if (field === "title") { + const titleElement = html.querySelector("#popup__title"); + const {payload: {title}} = response; + titleElement.innerHTML = title; + } + if (field === "municipality") { + const municipalityElement = html.querySelector("#popup__municipality"); + const {payload: {municipality}} = response; + municipalityElement.innerHTML = municipality; + } + if (field === "description") { + const descriptionElement = html.querySelector("#popup__description"); + const {payload: {description}} = response; + descriptionElement.innerHTML = description; + } + if (field === "chart") { + + // Chart Title + const chartTitleElement = html.querySelector("#popup__chart-title"); + const {payload: {chart: {title}}} = response; + chartTitleElement.innerHTML = title; + + // Chart + const chartElement = html.querySelector("#popup__chart"); + const chart = echarts.init(chartElement, null, {renderer: 'svg'}); + // TODO: use chartType in payload to construct chart dynamically. For now we assume bar chart type. + // TODO: In this fetch we always expect one payload item. Make failsafe. + const {payload: {chart: {data: {series}}}} = response; + const xAxisData = createListByName("key", series); + const yAxisData = createListByName("value", series); + const option = { + animation: false, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: [ + { + type: 'category', + data: xAxisData, + axisTick: { + alignWithLabel: true + } + } + ], + yAxis: [ + { + type: 'value' + } + ], + series: [ + { + name: 'Direct', + type: 'bar', + barWidth: '60%', + data: yAxisData, + } + ] + }; + chart.setOption(option); + requestAnimationFrame(() => { + new maplibregl.Popup({ + // https://maplibre.org/maplibre-gl-js-docs/api/markers/#popup-parameters + maxWidth: "280px", + }).setLngLat(coordinates).setHTML(html.innerHTML).addTo(map); + }); + } + if (field === "sources") { + const sourcesElement = html.querySelector("#popup__sources"); + let links = []; + for (const index in response.payload.sources) { + const url = response.payload.sources[index].url; + const name = response.payload.sources[index].name; + links.push(`${name}`); } - ] - }; - myChart.setOption(option); - requestAnimationFrame(() => { - new maplibregl.Popup().setLngLat(coordinates).setHTML(html.innerHTML).addTo(map); - }); + sourcesElement.innerHTML = links.join(", "); + } + } } ); }); diff --git a/digiplan/static/tests/api/popup.json b/digiplan/static/tests/api/popup.json index deb2a8b7..4d391886 100644 --- a/digiplan/static/tests/api/popup.json +++ b/digiplan/static/tests/api/popup.json @@ -1,58 +1,57 @@ { - "application": "popup", - "chart": { - "chartType": "bar", - "payload": [ - { - "data": { - "definition": { - "key": { - "lookup": "year", - "name": "Year", - "type": "integer" + "application": "popup", + "language": "en", + "lookup": "population", + "payload": { + "chart": { + "chartType": "bar", + "data": { + "definition": { + "key": { + "lookup": "year", + "name": "Year", + "type": "integer" + }, + "value": { + "lookup": "population", + "name": "Population", + "type": "integer" + } + }, + "series": [ + { + "key": 2022, + "value": 9311 + }, + { + "key": 2030, + "value": 9182 + }, + { + "key": 2045, + "value": 8903 + } + ] }, - "value": { - "lookup": "population", - "name": "Population", - "type": "integer" - } - }, - "series": [ + "title": "Population Forecast" + }, + "description": "The population in 2022 of Zörbig was 9,311 inhabitants. The entire ABW region had 370,190 inhabitants at that time. The following chart shows a forecast of the population development for the years 2022, 2030, and 2045.", + "id": 12, + "municipality": "Zörbig", + "sources": [ { - "key": 2022, - "value": 9311 + "url": "https://wam.rl-institut.de/digiplan/sources#11", + "name": "Bevölkerungzählung Anhalt 2021" }, { - "key": 2030, - "value": 9182 + "url": "https://wam.rl-institut.de/digiplan/sources#12", + "name": "Bevölkerungsprognose Anhalt 2030" }, { - "key": 2045, - "value": 8903 + "url": "https://wam.rl-institut.de/digiplan/sources#13", + "name": "Bevölkerungsprognose Anhalt 2050" } - ] - }, - "description": "The population in 2022 of Z\u00f6rbig was 9,311 inhabitants. The entire ABW region had 370,190 inhabitants at that time. The following chart shows a forecast of the population development for the years 2022, 2030, and 2045.", - "id": 12, - "name": "Z\u00f6rbig" - } - ] - }, - "language": "en", - "lookup": "population", - "name": "Population Forecast", - "sources": [ - { - "iri": "https://wam.rl-institut.de/digiplan/sources#11", - "name": "Bev\u00f6lkerungz\u00e4hlung Anhalt, 2021" - }, - { - "iri": "https://wam.rl-institut.de/digiplan/sources#12", - "name": "Bev\u00f6lkerungsprognose Anhalt, 2030" - }, - { - "iri": "https://wam.rl-institut.de/digiplan/sources#13", - "name": "Bev\u00f6lkerungsprognose Anhalt, 2050" + ], + "title": "Population" } - ] } diff --git a/digiplan/templates/popups/default.html b/digiplan/templates/popups/default.html index d9254768..125aaa13 100644 --- a/digiplan/templates/popups/default.html +++ b/digiplan/templates/popups/default.html @@ -1,6 +1,7 @@ diff --git a/digiplan/templates/popups/results.html b/digiplan/templates/popups/results.html index a778bd92..38a1a3b6 100644 --- a/digiplan/templates/popups/results.html +++ b/digiplan/templates/popups/results.html @@ -1,8 +1,11 @@ From 7a6a4f13c35b4020d59acd0b124381967a47513f Mon Sep 17 00:00:00 2001 From: Alexis Michaltsis Date: Wed, 12 Oct 2022 21:01:21 +0200 Subject: [PATCH 06/18] Add "js-" prefix to all ids used in popup templates and calling code --- digiplan/static/js/popup.js | 16 ++++++++-------- digiplan/templates/popups/default.html | 10 +++++----- digiplan/templates/popups/results.html | 16 ++++++++-------- 3 files changed, 21 insertions(+), 21 deletions(-) diff --git a/digiplan/static/js/popup.js b/digiplan/static/js/popup.js index 712d49fc..05a16d9a 100644 --- a/digiplan/static/js/popup.js +++ b/digiplan/static/js/popup.js @@ -61,34 +61,34 @@ function add_popup(layer_id, fields, template_id = "default") { /* Construct Popup From Event And Params */ - const template = document.getElementById(template_id + "_popup"); + const template = document.getElementById("js-"+ template_id + "_popup"); const clone = template.content.cloneNode(true); - const html = clone.getElementById("popup"); + const html = clone.getElementById("js-"+ "popup"); for (const field in fields) { if (field === "title") { - const titleElement = html.querySelector("#popup__title"); + const titleElement = html.querySelector("#js-popup__title"); const {payload: {title}} = response; titleElement.innerHTML = title; } if (field === "municipality") { - const municipalityElement = html.querySelector("#popup__municipality"); + const municipalityElement = html.querySelector("#js-popup__municipality"); const {payload: {municipality}} = response; municipalityElement.innerHTML = municipality; } if (field === "description") { - const descriptionElement = html.querySelector("#popup__description"); + const descriptionElement = html.querySelector("#js-popup__description"); const {payload: {description}} = response; descriptionElement.innerHTML = description; } if (field === "chart") { // Chart Title - const chartTitleElement = html.querySelector("#popup__chart-title"); + const chartTitleElement = html.querySelector("#js-popup__chart-title"); const {payload: {chart: {title}}} = response; chartTitleElement.innerHTML = title; // Chart - const chartElement = html.querySelector("#popup__chart"); + const chartElement = html.querySelector("#js-popup__chart"); const chart = echarts.init(chartElement, null, {renderer: 'svg'}); // TODO: use chartType in payload to construct chart dynamically. For now we assume bar chart type. // TODO: In this fetch we always expect one payload item. Make failsafe. @@ -141,7 +141,7 @@ function add_popup(layer_id, fields, template_id = "default") { }); } if (field === "sources") { - const sourcesElement = html.querySelector("#popup__sources"); + const sourcesElement = html.querySelector("#js-popup__sources"); let links = []; for (const index in response.payload.sources) { const url = response.payload.sources[index].url; diff --git a/digiplan/templates/popups/default.html b/digiplan/templates/popups/default.html index 125aaa13..721d5758 100644 --- a/digiplan/templates/popups/default.html +++ b/digiplan/templates/popups/default.html @@ -1,7 +1,7 @@ - From 8c40b0323df8456c0d1ca7985fdf66c81733bc3a Mon Sep 17 00:00:00 2001 From: Bryan Lancien Date: Tue, 18 Oct 2022 16:21:42 +0100 Subject: [PATCH 09/18] start popup styling --- digiplan/static/js/popup.js | 9 ++++-- digiplan/static/scss/base/_variables.scss | 1 + digiplan/static/scss/components/_popup.scss | 31 ++++++++++++++++++++- digiplan/templates/popups/results.html | 11 ++++---- 4 files changed, 43 insertions(+), 9 deletions(-) diff --git a/digiplan/static/js/popup.js b/digiplan/static/js/popup.js index 98e04804..9e51522c 100644 --- a/digiplan/static/js/popup.js +++ b/digiplan/static/js/popup.js @@ -73,7 +73,7 @@ function add_popup(layer_id, fields, template_id = "default") { if (field === "municipality") { const municipalityElement = html.querySelector("#js-popup__municipality"); const {municipality} = response; - municipalityElement.innerHTML = municipality; + municipalityElement.innerHTML = `(${municipality})`; } if (field === "description") { const descriptionElement = html.querySelector("#js-popup__description"); @@ -83,9 +83,9 @@ function add_popup(layer_id, fields, template_id = "default") { if (field === "chart") { // Chart Title - const chartTitleElement = html.querySelector("#js-popup__chart-title"); + /* const chartTitleElement = html.querySelector("#js-popup__chart-title"); const {chart: {title}} = response; - chartTitleElement.innerHTML = title; + chartTitleElement.innerHTML = title; */ // Chart const chartElement = html.querySelector("#js-popup__chart"); @@ -96,6 +96,9 @@ function add_popup(layer_id, fields, template_id = "default") { const xAxisData = createListByName("key", series); const yAxisData = createListByName("value", series); const option = { + title: { + text: 'this is a test' + }, animation: false, tooltip: { trigger: 'axis', diff --git a/digiplan/static/scss/base/_variables.scss b/digiplan/static/scss/base/_variables.scss index 58833cab..17e1be8e 100644 --- a/digiplan/static/scss/base/_variables.scss +++ b/digiplan/static/scss/base/_variables.scss @@ -21,6 +21,7 @@ $font-size-xsmall: .75rem; // 12px $letter-spacing-small: 0.01rem; $letter-spacing-normal: 0.03rem; +$letter-spacing-large: 0.06rem; // LEFT PANEL $panel-width-sm: 22rem; diff --git a/digiplan/static/scss/components/_popup.scss b/digiplan/static/scss/components/_popup.scss index 005312c2..e2ddabc0 100644 --- a/digiplan/static/scss/components/_popup.scss +++ b/digiplan/static/scss/components/_popup.scss @@ -1,3 +1,32 @@ .mapboxgl-popup-content, .maplibregl-popup-content { - background: red; + @extend .p-0; + width: 28rem; + + .popup { + &__header { + @extend .bg-light; + @extend .py-1; + @include flex-row-justify-center; + } + + &__title, + &__municipality { + @extend .fs-4; + @extend .fw-light; + @extend .mb-0; + letter-spacing: $letter-spacing-large; + } + + &__municipality { + @extend .ps-1; + } + } + + .maplibregl-popup-close-button, + .mapboxgl-popup-close-button { + @extend .fs-3; + @extend .fw-light; + @extend .px-2; + @extend .py-1; + } } diff --git a/digiplan/templates/popups/results.html b/digiplan/templates/popups/results.html index 35828801..fcdc1395 100644 --- a/digiplan/templates/popups/results.html +++ b/digiplan/templates/popups/results.html @@ -1,11 +1,12 @@ From 3d4ce8fb0b7ac133a32067885c56f85c80123611 Mon Sep 17 00:00:00 2001 From: Bryan Lancien Date: Tue, 18 Oct 2022 17:46:51 +0100 Subject: [PATCH 10/18] style popup chart --- digiplan/static/js/popup.js | 52 ++++++++++++++++++--- digiplan/static/scss/base/_variables.scss | 3 ++ digiplan/static/scss/components/_popup.scss | 15 +++++- digiplan/templates/popups/results.html | 2 +- 4 files changed, 63 insertions(+), 9 deletions(-) diff --git a/digiplan/static/js/popup.js b/digiplan/static/js/popup.js index d86455cb..16636ca2 100644 --- a/digiplan/static/js/popup.js +++ b/digiplan/static/js/popup.js @@ -114,7 +114,14 @@ function add_popup(layer_id, fields, template_id = "default") { const yAxisData = createListByName("value", series); const option = { title: { - text: 'this is a test' + text: 'Population growth forecast', + textStyle: { + color: '#002E50', + fontSize: 14, + fontWeight: 400, + lineHeight: 16 + }, + left: 'center' }, animation: false, tooltip: { @@ -124,18 +131,49 @@ function add_popup(layer_id, fields, template_id = "default") { } }, grid: { - left: '3%', right: '4%', bottom: '3%', containLabel: true + left: 16, + right: 0, + bottom: 32, + top: 48, + containLabel: true }, + textStyle: { + color: '#002E50' + }, xAxis: [{ - type: 'category', data: xAxisData, axisTick: { - alignWithLabel: true - } + type: 'category', + data: xAxisData, + axisTick: { + show: false + }, + axisLine: { + show: true, + lineStyle: { + color: '#ECF2F6' + } + }, }], yAxis: [{ - type: 'value' + type: 'value', + splitLine: { + show: true, + lineStyle: { + color: '#ECF2F6' + } + } }], series: [{ - name: 'Direct', type: 'bar', barWidth: '60%', data: yAxisData, + name: 'Direct', + type: 'line', + symbol: 'circle', + symbolSize: 6, + data: yAxisData, + lineStyle: { + color: '#002E50' + }, + itemStyle: { + color: '#002E50' + } }] }; chart.setOption(option); diff --git a/digiplan/static/scss/base/_variables.scss b/digiplan/static/scss/base/_variables.scss index 17e1be8e..72359ed1 100644 --- a/digiplan/static/scss/base/_variables.scss +++ b/digiplan/static/scss/base/_variables.scss @@ -64,5 +64,8 @@ $map-control-position-left: 1rem; $map-control-z-index: 9; $map-control-bg-color: rgba(255, 255, 255, 1); +// POPUP +$popup-width: 28rem; + // ICONS $info-icon-size: 1.25rem; diff --git a/digiplan/static/scss/components/_popup.scss b/digiplan/static/scss/components/_popup.scss index e2ddabc0..945a9d5b 100644 --- a/digiplan/static/scss/components/_popup.scss +++ b/digiplan/static/scss/components/_popup.scss @@ -1,6 +1,6 @@ .mapboxgl-popup-content, .maplibregl-popup-content { @extend .p-0; - width: 28rem; + width: $popup-width; .popup { &__header { @@ -20,6 +20,19 @@ &__municipality { @extend .ps-1; } + + &__key-values, + &__chart, + &__description, + &__sources { + padding: $padding-normal; + } + + &__chart { + width: 26rem; + //width: calc(#{$popup-width} - (2 * #{$padding-normal})); + height: 13rem; + } } .maplibregl-popup-close-button, diff --git a/digiplan/templates/popups/results.html b/digiplan/templates/popups/results.html index 8a7bbbcc..626cb3f5 100644 --- a/digiplan/templates/popups/results.html +++ b/digiplan/templates/popups/results.html @@ -6,7 +6,7 @@

municipality

-
+
description
sources
From 864758d677dc8a56d14c18e2e3846d2612cf2b02 Mon Sep 17 00:00:00 2001 From: Bryan Lancien Date: Tue, 18 Oct 2022 17:53:34 +0100 Subject: [PATCH 11/18] style popup sources --- digiplan/static/js/popup.js | 2 +- digiplan/static/scss/components/_popup.scss | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/digiplan/static/js/popup.js b/digiplan/static/js/popup.js index 16636ca2..21b063f8 100644 --- a/digiplan/static/js/popup.js +++ b/digiplan/static/js/popup.js @@ -192,7 +192,7 @@ function add_popup(layer_id, fields, template_id = "default") { const name = response.sources[index].name; links.push(`${name}`); } - sourcesElement.innerHTML = links.join(", "); + sourcesElement.innerHTML = `Quellen: ${links.join(", ")}`; } } }); diff --git a/digiplan/static/scss/components/_popup.scss b/digiplan/static/scss/components/_popup.scss index 945a9d5b..39f3bbc5 100644 --- a/digiplan/static/scss/components/_popup.scss +++ b/digiplan/static/scss/components/_popup.scss @@ -28,10 +28,8 @@ padding: $padding-normal; } - &__chart { - width: 26rem; - //width: calc(#{$popup-width} - (2 * #{$padding-normal})); - height: 13rem; + &__sources { + @extend .border-top; } } From e69729143512faa15e01e21d2b4971d9bea5b5e6 Mon Sep 17 00:00:00 2001 From: Bryan Lancien Date: Tue, 18 Oct 2022 18:05:01 +0100 Subject: [PATCH 12/18] update popup text to roboto family --- digiplan/static/scss/components/_popup.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/digiplan/static/scss/components/_popup.scss b/digiplan/static/scss/components/_popup.scss index 39f3bbc5..0c635527 100644 --- a/digiplan/static/scss/components/_popup.scss +++ b/digiplan/static/scss/components/_popup.scss @@ -1,6 +1,7 @@ .mapboxgl-popup-content, .maplibregl-popup-content { @extend .p-0; width: $popup-width; + font-family: $font-family-sans-serif; .popup { &__header { @@ -28,6 +29,11 @@ padding: $padding-normal; } + &__description { + @extend .fw-light; + @extend .fs-7; + } + &__sources { @extend .border-top; } From bda8bf065babd3523c159ca779d65abe5c374b27 Mon Sep 17 00:00:00 2001 From: Bryan Lancien Date: Tue, 18 Oct 2022 20:10:02 +0100 Subject: [PATCH 13/18] finish styling popup for desktop --- digiplan/static/js/popup.js | 14 ++++--- digiplan/static/scss/components/_popup.scss | 45 ++++++++++++++++++++- 2 files changed, 53 insertions(+), 6 deletions(-) diff --git a/digiplan/static/js/popup.js b/digiplan/static/js/popup.js index 21b063f8..eed9c519 100644 --- a/digiplan/static/js/popup.js +++ b/digiplan/static/js/popup.js @@ -85,11 +85,15 @@ function add_popup(layer_id, fields, template_id = "default") { } } = response; keyValuesElement.innerHTML = ` - ${unit} - ${year} - ${municipalityValue} - ${regionTitle}: - ${regionValue} + + ${unit} + ${year} + ${municipalityValue} + + + ${regionTitle}: + ${regionValue} + `; } if (field === "description") { diff --git a/digiplan/static/scss/components/_popup.scss b/digiplan/static/scss/components/_popup.scss index 0c635527..dab7ff8d 100644 --- a/digiplan/static/scss/components/_popup.scss +++ b/digiplan/static/scss/components/_popup.scss @@ -6,7 +6,7 @@ .popup { &__header { @extend .bg-light; - @extend .py-1; + @extend .py-2; @include flex-row-justify-center; } @@ -29,6 +29,44 @@ padding: $padding-normal; } + &__key-values { + @extend .d-flex; + @extend .flex-row; + @extend .justify-content-between; + @extend .fs-7; + @extend .border-bottom; + + .key-values { + & > span { + @extend .d-block; + } + + &__municipality { + @extend .fw-bold; + } + + &__region { + color: $gray-600; + } + + &__region-value { + @extend .bg-primary; + @extend .text-white; + @extend .rounded; + margin-left: 4px; + } + + &__municipality-value { + @extend .bg-light; + } + + &__region-value, + &__municipality-value { + padding: 4px 8px; + } + } + } + &__description { @extend .fw-light; @extend .fs-7; @@ -36,6 +74,11 @@ &__sources { @extend .border-top; + @extend .lh-sm; + + a { + @extend .fw-bold; + } } } From bd5307022bbdcb5611a92ab2d5f0710e9094cde5 Mon Sep 17 00:00:00 2001 From: Bryan Lancien Date: Wed, 19 Oct 2022 12:46:44 +0100 Subject: [PATCH 14/18] dynamically populate chart title --- digiplan/static/js/popup.js | 4 +--- digiplan/templates/popups/results.html | 1 - 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/digiplan/static/js/popup.js b/digiplan/static/js/popup.js index eed9c519..8d9a5042 100644 --- a/digiplan/static/js/popup.js +++ b/digiplan/static/js/popup.js @@ -104,9 +104,7 @@ function add_popup(layer_id, fields, template_id = "default") { if (field === "chart") { // Chart Title - /* const chartTitleElement = html.querySelector("#js-popup__chart-title"); const {chart: {title}} = response; - chartTitleElement.innerHTML = title; */ // Chart const chartElement = html.querySelector("#js-popup__chart"); @@ -118,7 +116,7 @@ function add_popup(layer_id, fields, template_id = "default") { const yAxisData = createListByName("value", series); const option = { title: { - text: 'Population growth forecast', + text: title, textStyle: { color: '#002E50', fontSize: 14, diff --git a/digiplan/templates/popups/results.html b/digiplan/templates/popups/results.html index 626cb3f5..b5c57cbb 100644 --- a/digiplan/templates/popups/results.html +++ b/digiplan/templates/popups/results.html @@ -5,7 +5,6 @@

popup_title

municipality

-
description
sources
From bffbdf4527620563e63c4cef4a1df5d9bd2fa2d5 Mon Sep 17 00:00:00 2001 From: Bryan Lancien Date: Wed, 19 Oct 2022 12:48:36 +0100 Subject: [PATCH 15/18] add rounded corners to region value --- digiplan/static/scss/components/_popup.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/digiplan/static/scss/components/_popup.scss b/digiplan/static/scss/components/_popup.scss index dab7ff8d..0a495caa 100644 --- a/digiplan/static/scss/components/_popup.scss +++ b/digiplan/static/scss/components/_popup.scss @@ -52,7 +52,6 @@ &__region-value { @extend .bg-primary; @extend .text-white; - @extend .rounded; margin-left: 4px; } @@ -63,6 +62,7 @@ &__region-value, &__municipality-value { padding: 4px 8px; + @extend .rounded; } } } From de5e47895a86f331a0bc6dc6c6c05a3571a6b504 Mon Sep 17 00:00:00 2001 From: Bryan Lancien Date: Wed, 19 Oct 2022 12:53:54 +0100 Subject: [PATCH 16/18] add user select none to popup header --- digiplan/static/scss/base/_mixins.scss | 1 + digiplan/static/scss/components/_popup.scss | 2 ++ 2 files changed, 3 insertions(+) diff --git a/digiplan/static/scss/base/_mixins.scss b/digiplan/static/scss/base/_mixins.scss index 19f82401..e7aad3b9 100644 --- a/digiplan/static/scss/base/_mixins.scss +++ b/digiplan/static/scss/base/_mixins.scss @@ -69,6 +69,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; + pointer-events: none; } // UL diff --git a/digiplan/static/scss/components/_popup.scss b/digiplan/static/scss/components/_popup.scss index 0a495caa..7b215093 100644 --- a/digiplan/static/scss/components/_popup.scss +++ b/digiplan/static/scss/components/_popup.scss @@ -8,6 +8,7 @@ @extend .bg-light; @extend .py-2; @include flex-row-justify-center; + @include user-select-none; } &__title, @@ -35,6 +36,7 @@ @extend .justify-content-between; @extend .fs-7; @extend .border-bottom; + @include user-select-none; .key-values { & > span { From 1f0cb0e57778cfb36ac3025948ce900d67155366 Mon Sep 17 00:00:00 2001 From: Alexis Michaltsis Date: Thu, 20 Oct 2022 13:13:47 +0200 Subject: [PATCH 17/18] Add locale numeric rendering to key values components in popups --- digiplan/static/js/helper.js | 7 +++++++ digiplan/static/js/popup.js | 25 +++++++++++++------------ 2 files changed, 20 insertions(+), 12 deletions(-) diff --git a/digiplan/static/js/helper.js b/digiplan/static/js/helper.js index 8bfacb9b..eb464923 100644 --- a/digiplan/static/js/helper.js +++ b/digiplan/static/js/helper.js @@ -13,3 +13,10 @@ function logMessage(msg) { return whatCalledWho; } } + +function getLanguage() { + // TODO: implement dynamic language determination + // In the future this will properly be implement. + // For now, this function always returns "en" + return "en-US"; +} diff --git a/digiplan/static/js/popup.js b/digiplan/static/js/popup.js index 8d9a5042..05f9ef20 100644 --- a/digiplan/static/js/popup.js +++ b/digiplan/static/js/popup.js @@ -74,6 +74,7 @@ function add_popup(layer_id, fields, template_id = "default") { municipalityElement.innerHTML = `(${municipality})`; } if (field === "key-values") { + const lang = getLanguage(); const keyValuesElement = html.querySelector("#js-popup__key-values"); const { keyValues: { @@ -88,11 +89,11 @@ function add_popup(layer_id, fields, template_id = "default") { ${unit} ${year} - ${municipalityValue} + ${municipalityValue.toLocaleString(lang)} ${regionTitle}: - ${regionValue} + ${regionValue.toLocaleString(lang)} `; } @@ -127,23 +128,23 @@ function add_popup(layer_id, fields, template_id = "default") { }, animation: false, tooltip: { - trigger: 'axis', + trigger: 'axis', axisPointer: { type: 'shadow' } - }, + }, grid: { - left: 16, - right: 0, + left: 16, + right: 0, bottom: 32, top: 48, containLabel: true - }, + }, textStyle: { color: '#002E50' }, xAxis: [{ - type: 'category', + type: 'category', data: xAxisData, axisTick: { show: false @@ -154,7 +155,7 @@ function add_popup(layer_id, fields, template_id = "default") { color: '#ECF2F6' } }, - }], + }], yAxis: [{ type: 'value', splitLine: { @@ -163,10 +164,10 @@ function add_popup(layer_id, fields, template_id = "default") { color: '#ECF2F6' } } - }], + }], series: [{ - name: 'Direct', - type: 'line', + name: 'Direct', + type: 'line', symbol: 'circle', symbolSize: 6, data: yAxisData, From 42ed4ac5bf906c0f138b4f9baed4ba0bc14f6a5c Mon Sep 17 00:00:00 2001 From: Alexis Michaltsis Date: Thu, 20 Oct 2022 17:43:33 +0200 Subject: [PATCH 18/18] YAGNI, remove unneeded CSS compress block in map HTML template --- digiplan/templates/map.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/digiplan/templates/map.html b/digiplan/templates/map.html index d9d43e05..696acaba 100644 --- a/digiplan/templates/map.html +++ b/digiplan/templates/map.html @@ -12,11 +12,7 @@ {% compress css %} {% endcompress %} - {{ block.super }} - - {% compress css %} - {% endcompress %} {% endblock %} {% block content %}