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
*
* June 2020
* June 2020 - March 2021
*/
/* globals am4core, am4charts, am4themes_animated, intervals*/
/* globals am4core, am4charts, am4themes_animated */
// amchart
am4core.ready(function() {
// am4core.useTheme(urban_theme);
let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
// bar and line chart
var chart = am4core.create("topChart", am4charts.XYChart);
let ctitle = chart.titles.create();
......@@ -24,210 +22,146 @@ am4core.ready(function() {
//title.marginBottom = 30;
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
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.fontSize = 15;
xAxis.renderer.labels.template.location = 0.5;
xAxis.tooltipDateFormat = "q yyyy";
/*xAxis.tooltipDateFormat = "q yyyy";
xAxis.adapter.add("getTooltipText", (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");
xAxis.periodChangeDateFormats.setKey("month", "Qq yyyy");
let valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis1.title.text = "Área urbanizada (Ha)";
valueAxis1.title.fill = am4core.color(mainTextColor);
valueAxis1.min = valueAxis1.minZoomed;
valueAxis1.max = valueAxis1.maxZoomed;
valueAxis1.title.fill = am4core.color(mainTextColor);
valueAxis1.renderer.labels.template.fill = am4core.color(mainTextColor);
valueAxis1.fontSize = 15;
valueAxis1.renderer.labels.template.fontSize = 15;
valueAxis1.numberFormatter = new am4core.NumberFormatter();
valueAxis1.numberFormatter.numberFormat = "#,###";
xAxisL.dateFormats.setKey("month", "Qq yyyy");
xAxisL.periodChangeDateFormats.setKey("month", "Qq yyyy");
xAxisL.renderer.grid.template.location = 0;
xAxisL.renderer.cellStartLocation = 0.2;
xAxisL.renderer.cellEndLocation = 0.8;*/
let valueAxisL = chart.yAxes.push(new am4charts.ValueAxis());
valueAxisL.title.text = "Porcentaje acumulado (%)";
valueAxisL.renderer.opposite = true;
valueAxisL.min = 0;
valueAxisL.max = 100;
valueAxisL.strictMinMax = true;
//valueAxisL.render.grid.template.disabled = true;
valueAxisL.numberFormatter = new am4core.NumberFormatter();
valueAxisL.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
/* 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 = [
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("#BB677C"),
am4core.color("#7B5572"),
am4core.color("#3E4157"),
am4core.color("#3E4157")
];
const paretoData = data => {
let total = 0,
sum = 0,
value;
function ParetoData() {
console.log(chart.data)
var total = 0;
for (var i = 0; i < chart.data.length; i++) {
var value = chart.data[i].area;
for (let i = 0; i < data.length; i++) {
value = data[i].area;
total += value;
}
var sum = 0;
for (var i = 0; i < chart.data.length; i++) {
var value = chart.data[i].area;
for (let i = 0; i < data.length; i++) {
value = data[i].area;
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 valueAxis3 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis3.title.text = "Porcentaje acumulado (%)"; //"Market Days";
// valueAxis3.calculateTotals = true;
valueAxis3.renderer.opposite = true;
valueAxis3.min = 0;
valueAxis3.max = 100;
valueAxis3.strictMinMax = true;
//valueAxis3.render.grid.template.disabled = true;
valueAxis3.numberFormatter = new am4core.NumberFormatter();
valueAxis3.numberFormatter.numberFormat = "#'%'"
valueAxis3.cursorTooltipEnabled = false;
//valueAxis3.numberFormatter.numberFormat = "#.#";
valueAxis3.renderer.labels.template.fill = am4core.color("#b9ce37");
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);
let seriesL = chart.series.push(new am4charts.LineSeries());
seriesL.data = chartData;
seriesL.dataFields.dateX = "date";
seriesL.dataFields.valueY = "pareto";
seriesL.name = "Porcentaje acumulado";
seriesL.xAxis = xAxisL;
seriesL.yAxis = valueAxisL;
seriesL.strokeOpacity = 0.5;
seriesL.tensionX = 0.7;
seriesL.stroke = am4core.color("#b9ce37");
seriesL.tooltip.label.fontSize = 15;
seriesL.tooltipText = "[bold]Q{dateX.formatDate('q yyyy')}:[/]\nIncremento acumulado de urbanización: {valueY.formatNumber('#.0')}% [/]\nIncremento urbanización: {valueY.previousChange.formatNumber('#.0')}%";
seriesL.tooltip.getFillFromObject = false;
seriesL.tooltip.background.fill = am4core.color(mainTextColor);
});
//Add cursor
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
chart.legend = new am4charts.Legend();
chart.legend.position = "top";
chart.legend.fontSize = 15;
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
// chart.legend.labels.template.fill = am4core.color(mainTextColor);
......@@ -285,8 +219,6 @@ am4core.ready(function() {
pieSeries.labels.template.text = "{category}";
// radar chart
//am4core.useTheme(am4themes_QQTheme);
am4core.useTheme(am4themes_animated);
......@@ -294,11 +226,6 @@ am4core.ready(function() {
var rchart = am4core.create("bottomRightChart", am4charts.RadarChart);
// 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`;
d3.json(query_r).then(d => rchart.data = d);
......@@ -338,19 +265,15 @@ am4core.ready(function() {
valueAxis.renderer.grid.template.stroke = am4core.color(mainTextColor);
// valueAxis.calculateTotals = true;
//Add series
var columnSeries = rchart.series.push(new am4charts.RadarColumnSeries());
// columnSeries.dataFields.dateX = "date";
columnSeries.dataFields.categoryX = "qq"; //date
columnSeries.dataFields.valueY = "area";
// columnSeries.dataFields.valueYShow = "sum";
columnSeries.columns.template.strokeOpacity = 0;
columnSeries.columns.template.width = am4core.percent(95);
//
//columnSeries.fill = am4core.color("#80acba");
columnSeries.fillOpacity = 0.5;
......@@ -373,8 +296,6 @@ am4core.ready(function() {
}
});
/* //ANILLO EXTERIOR
var range = dateAxis.axisRanges.create();
range.category = "January";
......@@ -431,7 +352,8 @@ am4core.ready(function() {
bubbleBullet.tooltipText = "[bold]Q{date.formatDate('q yyyy')}:[/] \n{value.formatNumber('#,###.0')} Ha";
bubbleBullet.adapter.add("tooltipY", function(tooltipY, target) {
return -target.circle.radius;
})
});
// TODO: Fix these calls to automatically use available years
bubbleBullet.adapter.add("fill", function(fill, target) {
if (target.dataItem && (target.dataItem.categoryY == "2014")) {
return am4core.color("#313695");
......@@ -449,6 +371,7 @@ am4core.ready(function() {
return fill;
}
});
// TODO: Fix these calls to automatically use available years
bubbleBullet.adapter.add("stroke", function(fill, target) {
if (target.dataItem && (target.dataItem.categoryY == "2014")) {
return am4core.color("#313695");
......@@ -467,7 +390,6 @@ am4core.ready(function() {
}
});
bubbleSeries.heatRules.push({ target: bubbleBullet.circle, min: 2, max: 12, dataField: "value", property: "radius" });
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