Skip to content

F
fordecyt_2019
Commit afc95448 authored by Rodrigo Tapia-McClung's avatar Rodrigo Tapia-McClung
Browse files
Options

Clean code and update bar+line graph

parent 8ce216ea
Show whitespace changes
Inline Side-by-side
Showing with 114 additions and 192 deletions
public/js/evolucion_urbana_charts.js
View file @ afc95448
/* /*
* Copyright 2020 - All rights reserved. * Copyright 2020-2021 - All rights reserved.
* Rodrigo Tapia-McClung * Rodrigo Tapia-McClung
* *
* June 2020 * June 2020 - March 2021
*/ */
/* globals am4core, am4charts, am4themes_animated, intervals*/ /* globals am4core, am4charts, am4themes_animated */
// amchart // amchart
am4core.ready(function() { am4core.ready(function() {
// am4core.useTheme(urban_theme); // am4core.useTheme(urban_theme);
let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color'); let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
// bar and line chart // bar and line chart
var chart = am4core.create("topChart", am4charts.XYChart); var chart = am4core.create("topChart", am4charts.XYChart);
let ctitle = chart.titles.create(); let ctitle = chart.titles.create();
...@@ -24,210 +22,146 @@ am4core.ready(function() { ...@@ -24,210 +22,146 @@ am4core.ready(function() {
//title.marginBottom = 30; //title.marginBottom = 30;
ctitle.fill = am4core.color(mainTextColor); ctitle.fill = am4core.color(mainTextColor);
//Add data
const baseUrl = new URL(`/data`, window.location.href).href;
let table = "urbanization_year";
let query = `${baseUrl}/query/${table}?columns=yeartrimes,sum(area)/10000 as area,date&group=yeartrimes,date&sort=yeartrimes`;
d3.json(query).then(d => {
chart.data = d;
ParetoData()
});
// Create axes // Create axes
let xAxis = chart.xAxes.push(new am4charts.DateAxis()); let xAxis = chart.xAxes.push(new am4charts.DateAxis());
xAxis.baseInterval = { timeUnit: "month", count: 3 }; //xAxis.baseInterval = { timeUnit: "month", count: 3 };
xAxis.renderer.labels.template.fill = am4core.color(mainTextColor); xAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
xAxis.renderer.labels.template.fontSize = 15; xAxis.renderer.labels.template.fontSize = 15;
xAxis.renderer.labels.template.location = 0.5; xAxis.renderer.labels.template.location = 0.5;
xAxis.tooltipDateFormat = "q yyyy"; /*xAxis.tooltipDateFormat = "q yyyy";
xAxis.adapter.add("getTooltipText", (text) => { xAxis.adapter.add("getTooltipText", (text) => {
return "Q" + text; return "Q" + text;
});*/
//xAxis.dateFormats.setKey("month", "Qq yyyy");
//xAxis.periodChangeDateFormats.setKey("month", "Qq yyyy");
xAxis.renderer.grid.template.location = 0;
//categoryAxis.renderer.line.strokeOpacity = 1;
//categoryAxis.renderer.minGridDistance = 30;
//xAxis.renderer.cellStartLocation = 0.2;
//xAxis.renderer.cellEndLocation = 0.8;
let valueAxisBars = chart.yAxes.push(new am4charts.ValueAxis());
valueAxisBars.title.text = "Área urbanizada (Ha)";
valueAxisBars.title.fill = am4core.color(mainTextColor);
valueAxisBars.min = valueAxisBars.minZoomed;
valueAxisBars.max = valueAxisBars.maxZoomed;
valueAxisBars.title.fill = am4core.color(mainTextColor);
valueAxisBars.renderer.labels.template.fill = am4core.color(mainTextColor);
valueAxisBars.fontSize = 15;
valueAxisBars.renderer.labels.template.fontSize = 15;
valueAxisBars.numberFormatter = new am4core.NumberFormatter();
valueAxisBars.numberFormatter.numberFormat = "#,###";
let xAxisL = chart.xAxes.push(new am4charts.DateAxis());
xAxisL.renderer.grid.template.location = 0;
xAxisL.renderer.labels.template.disabled = true;
xAxisL.renderer.grid.template.disabled = true;
xAxisL.renderer.tooltip.disabled = true;
/*xAxisL.baseInterval = { timeUnit: "month", count: 3 };
xAxisL.renderer.labels.template.fontSize = 15;
xAxisL.renderer.labels.template.location = 0.5;
xAxisL.tooltipDateFormat = "q yyyy";
xAxisL.adapter.add("getTooltipText", (text) => {
return "Q" + text;
}); });
xAxis.dateFormats.setKey("month", "Qq yyyy"); xAxisL.dateFormats.setKey("month", "Qq yyyy");
xAxis.periodChangeDateFormats.setKey("month", "Qq yyyy"); xAxisL.periodChangeDateFormats.setKey("month", "Qq yyyy");
xAxisL.renderer.grid.template.location = 0;
let valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis()); xAxisL.renderer.cellStartLocation = 0.2;
valueAxis1.title.text = "Área urbanizada (Ha)"; xAxisL.renderer.cellEndLocation = 0.8;*/
valueAxis1.title.fill = am4core.color(mainTextColor);
valueAxis1.min = valueAxis1.minZoomed; let valueAxisL = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis1.max = valueAxis1.maxZoomed; valueAxisL.title.text = "Porcentaje acumulado (%)";
valueAxis1.title.fill = am4core.color(mainTextColor); valueAxisL.renderer.opposite = true;
valueAxis1.renderer.labels.template.fill = am4core.color(mainTextColor); valueAxisL.min = 0;
valueAxis1.fontSize = 15; valueAxisL.max = 100;
valueAxis1.renderer.labels.template.fontSize = 15; valueAxisL.strictMinMax = true;
//valueAxisL.render.grid.template.disabled = true;
valueAxisL.numberFormatter = new am4core.NumberFormatter();
valueAxis1.numberFormatter = new am4core.NumberFormatter(); valueAxisL.numberFormatter.numberFormat = "#'%'"
valueAxis1.numberFormatter.numberFormat = "#,###"; valueAxisL.cursorTooltipEnabled = false;
//valueAxisL.numberFormatter.numberFormat = "#.#";
valueAxisL.renderer.labels.template.fill = am4core.color("#b9ce37");
valueAxisL.title.fill = am4core.color("#b9ce37");
//valueAxisL.min = -300;
//valueAxisL.syncWithAxis = valueAxis1;
valueAxisL.fontSize = 15;
valueAxisL.renderer.labels.template.fontSize = 15;
//valueAxisL.calculateTotals = true;
//valueAxisL.min = valueAxis3.minZoomed;
//valueAxisL.max = valueAxis3.maxZoomed;
// Modify chart's colors // Modify chart's colors
/* chart.colors.list = [
am4core.color("#313695"),
am4core.color("#313695"),
am4core.color("#313695"),
am4core.color("#5e6bbf"),
am4core.color("#5e6bbf"),
am4core.color("#5e6bbf"),
am4core.color("#5e6bbf"),
am4core.color("#e0f3f8"),
am4core.color("#e0f3f8"),
am4core.color("#e0f3f8"),
am4core.color("#e0f3f8"),
am4core.color("#ffffbf"),
am4core.color("#ffffbf"),
am4core.color("#ffffbf"),
am4core.color("#ffffbf"),
am4core.color("#b82a76"),
am4core.color("#b82a76"),
am4core.color("#b82a76"),
am4core.color("#9e0142"),
am4core.color("#9e0142"),
am4core.color("#9e0142"),
am4core.color("#9e0142"),
];*/
chart.colors.list = [ chart.colors.list = [
am4core.color("#BB677C"),
am4core.color("#7B5572"),
am4core.color("#3E4157"),
am4core.color("#F18275"),
am4core.color("#BB677C"),
am4core.color("#7B5572"),
am4core.color("#3E4157"),
am4core.color("#F18275"),
am4core.color("#BB677C"),
am4core.color("#7B5572"),
am4core.color("#3E4157"),
am4core.color("#F18275"),
am4core.color("#BB677C"),
am4core.color("#7B5572"),
am4core.color("#3E4157"),
//am4core.color("#F18275"),
am4core.color("#BB677C"),
am4core.color("#7B5572"),
am4core.color("#3E4157"),
am4core.color("#F18275"), am4core.color("#F18275"),
am4core.color("#BB677C"), am4core.color("#BB677C"),
am4core.color("#7B5572"), am4core.color("#7B5572"),
am4core.color("#3E4157"), am4core.color("#3E4157")
]; ];
const paretoData = data => {
let total = 0,
sum = 0,
value;
for (let i = 0; i < data.length; i++) {
value = data[i].area;
function ParetoData() {
console.log(chart.data)
var total = 0;
for (var i = 0; i < chart.data.length; i++) {
var value = chart.data[i].area;
total += value; total += value;
} }
for (let i = 0; i < data.length; i++) {
var sum = 0; value = data[i].area;
for (var i = 0; i < chart.data.length; i++) {
var value = chart.data[i].area;
sum += value; sum += value;
chart.data[i].pareto = sum / total * 100; data[i].pareto = sum / total * 100;
} }
} }
//Add data
const baseUrl = new URL(`/data`, window.location.href).href;
let table = "urbanization_year";
let query = `${baseUrl}/query/${table}?columns=yeartrimes,sum(area)/10000 as area,date&group=yeartrimes,date&sort=yeartrimes`;
d3.json(query).then( d => {
paretoData(d);
let chartData = d;
[1, 2, 3, 4].forEach( q => {
let series = chart.series.push(new am4charts.ColumnSeries());
series.data = chartData.filter( d => Math.floor((new Date(d.date).getMonth() + 3) / 3) == q);
series.dataFields.valueY = "area";
series.dataFields.dateX = "date";
series.xAxis = xAxis;
series.yAxis = valueAxisBars;
series.name = `Q${q}`;
series.tooltipText = "[bold]Q{dateX.formatDate('q yyyy')}:[/]\nÁrea urbanizada: {valueY.formatNumber('#.#')} Ha";
series.strokeWidth = 0;
});
let seriesL = chart.series.push(new am4charts.LineSeries());
let valueAxis3 = chart.yAxes.push(new am4charts.ValueAxis()); seriesL.data = chartData;
valueAxis3.title.text = "Porcentaje acumulado (%)"; //"Market Days"; seriesL.dataFields.dateX = "date";
// valueAxis3.calculateTotals = true; seriesL.dataFields.valueY = "pareto";
valueAxis3.renderer.opposite = true; seriesL.name = "Porcentaje acumulado";
valueAxis3.min = 0; seriesL.xAxis = xAxisL;
valueAxis3.max = 100; seriesL.yAxis = valueAxisL;
valueAxis3.strictMinMax = true; seriesL.strokeOpacity = 0.5;
//valueAxis3.render.grid.template.disabled = true; seriesL.tensionX = 0.7;
valueAxis3.numberFormatter = new am4core.NumberFormatter(); seriesL.stroke = am4core.color("#b9ce37");
valueAxis3.numberFormatter.numberFormat = "#'%'" seriesL.tooltip.label.fontSize = 15;
valueAxis3.cursorTooltipEnabled = false; seriesL.tooltipText = "[bold]Q{dateX.formatDate('q yyyy')}:[/]\nIncremento acumulado de urbanización: {valueY.formatNumber('#.0')}% [/]\nIncremento urbanización: {valueY.previousChange.formatNumber('#.0')}%";
//valueAxis3.numberFormatter.numberFormat = "#.#"; seriesL.tooltip.getFillFromObject = false;
valueAxis3.renderer.labels.template.fill = am4core.color("#b9ce37"); seriesL.tooltip.background.fill = am4core.color(mainTextColor);
valueAxis3.title.fill = am4core.color("#b9ce37"); });
//valueAxis3.min = -300;
//valueAxis3.syncWithAxis = valueAxis1;
valueAxis3.fontSize = 15;
valueAxis3.renderer.labels.template.fontSize = 15;
valueAxis3.calculateTotals = true;
//valueAxis3.min = valueAxis3.minZoomed;
//valueAxis3.max = valueAxis3.maxZoomed;
// valueAxis3.numberFormatter = new am4core.NumberFormatter();
// valueAxis3.numberFormatter.numberFormat = "#,###";
//valueAxis3.syncWithAxis = valueAxis1;
// Create series
let series1 = chart.series.push(new am4charts.ColumnSeries());
series1.dataFields.dateX = "date";
series1.dataFields.valueY = "area";
series1.name = "Área urbanizada";
series1.yAxes = valueAxis1;
//series1.tooltipText = "{name}\n{dateX}:\n[bold font-size: 20] {valueY}"; //"{name}\n[bold font-size: 20]{valueY}"; //M[/]";
// series1.tooltipText = "[bold font-size: 20]{name}\n[bold font-size: 20] {valueY.formatNumber('#,###.#')} Ha";
series1.fill = chart.colors.getIndex(0);
series1.strokeWidth = 0;
series1.clustered = false;
series1.tooltipText = "[bold]Q{dateX.formatDate('q yyyy')}:[/]\nÁrea urbanizada: {valueY.formatNumber('#.#')} Ha";
//series1.tooltipText = "[{categoryX}: bold]{valueY.formatNumber('#.0')} Ha[/]";
series1.columns.template.adapter.add("fill", function(fill, target) {
return chart.colors.getIndex(target.dataItem.index);
})
let series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "pareto"; //"area";
//series3.dataFields.valueYShow = "pareto"; //previousChangePercent";
series3.dataFields.dateX = "date";
series3.name = "Porcentaje acumulado";
series3.yAxis = valueAxis3;
series3.tooltipText = "pareto: {valueY.formatNumber('#.0')}%[/]";
//series3.bullets.push(new am4charts.CircleBullet());
//series3.strokeWidth = 2;
//series3.stroke = new am4core.InterfaceColorSet().getFor("alternativeBackground");
series3.strokeOpacity = 0.5;
//series3.strokeWidth = 2;
series3.tensionX = 0.7;
series3.stroke = am4core.color("#b9ce37");
//series3.strokeDasharray = "3,3";
//series3.yAxis = valueAxis3;
series3.tooltip.label.fontSize = 15;
series3.tooltipText = "[bold]Q{dateX.formatDate('q yyyy')}:[/]\nIncremento acumulado de urbanización: {valueY.formatNumber('#.0')}% [/]\nIncremento urbanización: {valueY.previousChange.formatNumber('#.0')}%";
series3.tooltip.getFillFromObject = false;
series3.tooltip.background.fill = am4core.color(mainTextColor);
//Add cursor //Add cursor
chart.cursor = new am4charts.XYCursor(); chart.cursor = new am4charts.XYCursor();
// TODO: find a way to display bar and line tooltip.
// only let one tooltip other wise we get one for each colun and line...
chart.cursor.maxTooltipDistance = -1;
//Add legend //Add legend
chart.legend = new am4charts.Legend(); chart.legend = new am4charts.Legend();
chart.legend.position = "top"; chart.legend.position = "top";
chart.legend.fontSize = 15; chart.legend.fontSize = 15;
chart.legend.labels.template.fill = am4core.color(mainTextColor); chart.legend.labels.template.fill = am4core.color(mainTextColor);
//chart.legend.markers.template.disabled = true;
//chart.legend.labels.template.text = "Series: [bold {color}]{name}[/]";
var legenddata = [{ name: "Q1", fill: am4core.color("#F18275") },
{ name: "Q2", fill: am4core.color("#BB677C") },
{ name: "Q3", fill: am4core.color("#7B5572") },
{ name: "Q4", fill: am4core.color("#3E4157") },
{ name: "Porcentaje acumulado", fill: am4core.color("#b9ce37"), marker: "line" }
];
chart.legend.data = legenddata;
//Add scrollbar //Add scrollbar
// chart.legend.labels.template.fill = am4core.color(mainTextColor); // chart.legend.labels.template.fill = am4core.color(mainTextColor);
...@@ -285,8 +219,6 @@ am4core.ready(function() { ...@@ -285,8 +219,6 @@ am4core.ready(function() {
pieSeries.labels.template.text = "{category}"; pieSeries.labels.template.text = "{category}";
// radar chart // radar chart
//am4core.useTheme(am4themes_QQTheme); //am4core.useTheme(am4themes_QQTheme);
am4core.useTheme(am4themes_animated); am4core.useTheme(am4themes_animated);
...@@ -294,11 +226,6 @@ am4core.ready(function() { ...@@ -294,11 +226,6 @@ am4core.ready(function() {
var rchart = am4core.create("bottomRightChart", am4charts.RadarChart); var rchart = am4core.create("bottomRightChart", am4charts.RadarChart);
// chart.hiddenState.properties.opacity = 0; // this creates initial fade-in // chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
//const baseUrl = new URL(`/data`, window.location.href).href;
//let table = "urbanization_year";
//let query = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,date,DATE_PART('month',date) as mm&group=mm,date &sort=mm`;
//let query = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,DATE_PART('month',date) as mm&group=mm &sort=mm`;
let query_r = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,DATE_PART('month',date) as mm,concat('Q', DATE_PART('quarter',date)::text) as qq&group=mm,qq &sort=mm`; let query_r = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,DATE_PART('month',date) as mm,concat('Q', DATE_PART('quarter',date)::text) as qq&group=mm,qq &sort=mm`;
d3.json(query_r).then(d => rchart.data = d); d3.json(query_r).then(d => rchart.data = d);
...@@ -338,19 +265,15 @@ am4core.ready(function() { ...@@ -338,19 +265,15 @@ am4core.ready(function() {
valueAxis.renderer.grid.template.stroke = am4core.color(mainTextColor); valueAxis.renderer.grid.template.stroke = am4core.color(mainTextColor);
// valueAxis.calculateTotals = true; // valueAxis.calculateTotals = true;
//Add series //Add series
var columnSeries = rchart.series.push(new am4charts.RadarColumnSeries()); var columnSeries = rchart.series.push(new am4charts.RadarColumnSeries());
// columnSeries.dataFields.dateX = "date"; // columnSeries.dataFields.dateX = "date";
columnSeries.dataFields.categoryX = "qq"; //date columnSeries.dataFields.categoryX = "qq"; //date
columnSeries.dataFields.valueY = "area"; columnSeries.dataFields.valueY = "area";
// columnSeries.dataFields.valueYShow = "sum"; // columnSeries.dataFields.valueYShow = "sum";
columnSeries.columns.template.strokeOpacity = 0; columnSeries.columns.template.strokeOpacity = 0;
columnSeries.columns.template.width = am4core.percent(95); columnSeries.columns.template.width = am4core.percent(95);
//
//columnSeries.fill = am4core.color("#80acba"); //columnSeries.fill = am4core.color("#80acba");
columnSeries.fillOpacity = 0.5; columnSeries.fillOpacity = 0.5;
...@@ -373,8 +296,6 @@ am4core.ready(function() { ...@@ -373,8 +296,6 @@ am4core.ready(function() {
} }
}); });
/* //ANILLO EXTERIOR /* //ANILLO EXTERIOR
var range = dateAxis.axisRanges.create(); var range = dateAxis.axisRanges.create();
range.category = "January"; range.category = "January";
...@@ -431,7 +352,8 @@ am4core.ready(function() { ...@@ -431,7 +352,8 @@ am4core.ready(function() {
bubbleBullet.tooltipText = "[bold]Q{date.formatDate('q yyyy')}:[/] \n{value.formatNumber('#,###.0')} Ha"; bubbleBullet.tooltipText = "[bold]Q{date.formatDate('q yyyy')}:[/] \n{value.formatNumber('#,###.0')} Ha";
bubbleBullet.adapter.add("tooltipY", function(tooltipY, target) { bubbleBullet.adapter.add("tooltipY", function(tooltipY, target) {
return -target.circle.radius; return -target.circle.radius;
}) });
// TODO: Fix these calls to automatically use available years
bubbleBullet.adapter.add("fill", function(fill, target) { bubbleBullet.adapter.add("fill", function(fill, target) {
if (target.dataItem && (target.dataItem.categoryY == "2014")) { if (target.dataItem && (target.dataItem.categoryY == "2014")) {
return am4core.color("#313695"); return am4core.color("#313695");
...@@ -449,6 +371,7 @@ am4core.ready(function() { ...@@ -449,6 +371,7 @@ am4core.ready(function() {
return fill; return fill;
} }
}); });
// TODO: Fix these calls to automatically use available years
bubbleBullet.adapter.add("stroke", function(fill, target) { bubbleBullet.adapter.add("stroke", function(fill, target) {
if (target.dataItem && (target.dataItem.categoryY == "2014")) { if (target.dataItem && (target.dataItem.categoryY == "2014")) {
return am4core.color("#313695"); return am4core.color("#313695");
...@@ -467,7 +390,6 @@ am4core.ready(function() { ...@@ -467,7 +390,6 @@ am4core.ready(function() {
} }
}); });
bubbleSeries.heatRules.push({ target: bubbleBullet.circle, min: 2, max: 12, dataField: "value", property: "radius" }); bubbleSeries.heatRules.push({ target: bubbleBullet.circle, min: 2, max: 12, dataField: "value", property: "radius" });
bubbleSeries.dataItems.template.locations.categoryY = 0.5; bubbleSeries.dataItems.template.locations.categoryY = 0.5;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment