Skip to content

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

Improve bar chart creation

parent 41916715
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 84 deletions
public/js/cuerpos_charts.js
View file @ ad50aa10
......@@ -6,7 +6,7 @@
*/
/* globals updateBarChart, barChartData, am4charts, am4core, am4themes_animated, yearList */
/* export makeRadialChart, makeLineChart */
/* export makeRadialChart, makeLineChart, makeAreaChart, makeBarChart */
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
function grijalva_theme(target) {
......@@ -35,7 +35,12 @@ function customizeGrip(grip) {
img.align = "center";
img.valign = "middle";
}
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ RADAR- LINES
// Themes begin
am4core.useTheme(am4themes_animated);
am4core.useTheme(grijalva_theme);
//let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
// Themes end
let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
......@@ -65,14 +70,14 @@ const makeRadialRange = (axis, start, end, color, span) => {
}
const makeLineAxisAndSeries = (chart, field, name, opposite, bullet) => {
var lineValueAxis = chart.yAxes.push(new am4charts.ValueAxis());
let lineValueAxis = chart.yAxes.push(new am4charts.ValueAxis());
lineValueAxis.fontSize = 8;
if (chart.yAxes.indexOf(lineValueAxis) != 0) {
lineValueAxis.syncWithAxis = chart.yAxes.getIndex(0);
}
var lineSeries = chart.series.push(new am4charts.LineSeries());
let lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = field;
lineSeries.dataFields.dateX = "date";
lineSeries.strokeWidth = 2;
......@@ -93,7 +98,7 @@ const makeLineAxisAndSeries = (chart, field, name, opposite, bullet) => {
const makeDateRange = (axis, start, width, color) => {
yearList.forEach( y => {
var range = axis.axisRanges.create();
let range = axis.axisRanges.create();
range.date = new Date(y, start, 1, 0, 0, 0);
range.endDate = new Date(y, start+width, 1, 0, 0, 0);
range.axisFill.fill = am4core.color(color);
......@@ -117,6 +122,29 @@ const makeAreaSeries = (chart, field, name) => {
return areasSeries;
}
const makeBarSeries = (chart, field, name) => {
let barSeries = chart.series.push(new am4charts.ColumnSeries());
barSeries.dataFields.valueY = field;
barSeries.dataFields.categoryX = "grupo";
barSeries.dataFields.categoryX = "grupo"; //"year";
barSeries.name = name;
barSeries.columns.template.tooltipText = "[underline][bold]Menor a [bold]{categoryX.formatNumber('#,###.#')} Ha[/]: {valueY.formatNumber('#,###.#')} cuerpos[/]";
barSeries.columns.template.height = am4core.percent(100);
barSeries.sequencedInterpolation = true;
let barValueLabel = barSeries.bullets.push(new am4charts.LabelBullet());
barValueLabel.label.text = "{valueY}";
barValueLabel.label.horizontalCenter = "middle";
barValueLabel.label.dx = 3;
barValueLabel.label.dy = -5;
barValueLabel.label.hideOversized = false;
barValueLabel.label.truncate = false;
barValueLabel.fontSize = 10;
//barValueLabel.label.fill = am4core.color(mainTextColor);
barValueLabel.label.fill = am4core.color("#fff");
}
const makeRadialChart = (data, months, years) => {
let radialChart = am4core.create("radial_chart", am4charts.RadarChart);
......@@ -203,7 +231,7 @@ const makeLineChart = (data) => {
lineChart.data = data;
var lineDateAxis = lineChart.xAxes.push(new am4charts.DateAxis());
let lineDateAxis = lineChart.xAxes.push(new am4charts.DateAxis());
lineDateAxis.renderer.minGridDistance = 50;
lineDateAxis.fontSize = 8;
lineDateAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
......@@ -242,7 +270,7 @@ const makeAreaChart = (data) => {
areaChart.data = data;
// chart.dateFormatter.inputDateFormat = "dd-mm-yyyy";
var areaDateAxis = areaChart.xAxes.push(new am4charts.DateAxis());
let areaDateAxis = areaChart.xAxes.push(new am4charts.DateAxis());
areaDateAxis.renderer.minGridDistance = 60;
areaDateAxis.fontSize = 8;
areaDateAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
......@@ -253,7 +281,7 @@ const makeAreaChart = (data) => {
count: 1
}
var areaValueAxis = areaChart.yAxes.push(new am4charts.ValueAxis());
let areaValueAxis = areaChart.yAxes.push(new am4charts.ValueAxis());
areaValueAxis.tooltip.disabled = true;
areaValueAxis.fontSize = 8;
areaValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
......@@ -268,7 +296,7 @@ const makeAreaChart = (data) => {
makeDateRange(areaDateAxis, 2, 2, "#595952");
makeDateRange(areaDateAxis, 4, 4, "#838278");
makeDateRange(areaDateAxis, 8, 3, "#B1AE9F");
makeDateRange(areaDateAxis, 11, 1, "#E1DBC8"); // FIXME: this range shows a small line separator between Dec-Jan
makeDateRange(areaDateAxis, 11, 1, "#E1DBC8");
areaChart.cursor = new am4charts.XYCursor();
areaChart.snapToSeries = areaSeries2;
......@@ -291,25 +319,17 @@ const makeAreaChart = (data) => {
month = parseInt(mm) + 1;
month.toString();
}
let filterDate = new Date(`${yy}-${month}-01T00:00:00`);
let filterDate = new Date(`${yy}-${month}`).setUTCHours(6, 0, 0);
// only update chart when dates in cursor change month
if (filterDate.valueOf() != previousDate.valueOf()) {
previousDate = filterDate;
updateBarChart(filterDate, barChartData);
updateBarChart(filterDate, barChartData); // FIXME: when calling this update, bar chart may not exist yet
}
})
});
}
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
am4core.useTheme(grijalva_theme);
//let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
// Themes end
// bar chart
var barChart = am4core.create("dimfrcpo-graph", am4charts.XYChart);
const makeBarChart = (data) => {
let barChart = am4core.create("dimfrcpo-graph", am4charts.XYChart);
let barTitle = barChart.titles.create();
barTitle.text = "Conteo por tipo de cuerpo";
......@@ -317,9 +337,10 @@ am4core.ready(function() {
barTitle.marginBottom = 5;
barTitle.fill = am4core.color(mainTextColor);
barChart.data = data;
// Create axes
//var barCategoryAxis = barChart.yAxes.push(new am4charts.CategoryAxis());
var barCategoryAxis = barChart.xAxes.push(new am4charts.CategoryAxis());
let barCategoryAxis = barChart.xAxes.push(new am4charts.CategoryAxis());
barCategoryAxis.dataFields.category = "grupo";
barCategoryAxis.numberFormatter.numberFormat = "#,###.#";
barCategoryAxis.renderer.inversed = true;
......@@ -331,8 +352,7 @@ am4core.ready(function() {
barCategoryAxis.title.text = "Superficie (Ha)";
barCategoryAxis.title.fill = am4core.color(mainTextColor);
//var barValueAxis = barChart.xAxes.push(new am4charts.ValueAxis());
var barValueAxis = barChart.yAxes.push(new am4charts.ValueAxis());
let barValueAxis = barChart.yAxes.push(new am4charts.ValueAxis());
//barValueAxis.renderer.opposite = true;
//barValueAxis.calculateTotals = true
barValueAxis.fontSize = 10;
......@@ -340,42 +360,8 @@ am4core.ready(function() {
barValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
barValueAxis.max = 1250; // TODO: compute max value from data
// Create series
function createSeries(field, name) {
var barSeries = barChart.series.push(new am4charts.ColumnSeries());
//barSeries.dataFields.valueX = field;
//barSeries.dataFields.categoryY = "grupo";
barSeries.dataFields.valueY = field;
barSeries.dataFields.categoryX = "grupo";
//barSeries.dataFields.valueYShow = "count";
//barSeries.dataFields.categoryY = "grupo"; //"year";
barSeries.dataFields.categoryX = "grupo"; //"year";
barSeries.name = name;
barSeries.columns.template.tooltipText = "[underline][bold]Menor a [bold]{categoryX.formatNumber('#,###.#')} Ha[/]: {valueY.formatNumber('#,###.#')} cuerpos[/]";
barSeries.columns.template.height = am4core.percent(100);
barSeries.sequencedInterpolation = true;
var barValueLabel = barSeries.bullets.push(new am4charts.LabelBullet());
//barValueLabel.label.text = "{valueX}";
barValueLabel.label.text = "{valueY}";
barValueLabel.label.horizontalCenter = "middle";
//barValueLabel.label.verticalCenter = "top";
//barValueLabel.label.align = "center";
barValueLabel.label.dx = 3;
barValueLabel.label.dy = -5;
barValueLabel.label.hideOversized = false;
barValueLabel.label.truncate = false;
barValueLabel.fontSize = 10;
//barValueLabel.label.fill = am4core.color(mainTextColor);
barValueLabel.label.fill = am4core.color("#fff");
}
createSeries("ap", "Agua permanente");
createSeries("at", "Áreas temporalmente inundadas");
createSeries("av", "Suelos húmedos-vegetación acuática");
}); // end am4core.ready()
//--------------------------------------------------------------------------------------------------------------------
\ No newline at end of file
// crate series
makeBarSeries(barChart, "ap", "Agua permanente");
makeBarSeries(barChart, "at", "Áreas temporalmente inundadas");
makeBarSeries(barChart, "av", "Suelos húmedos-vegetación acuática");
}
\ No newline at end of file
public/js/cuerpos_functions.js
View file @ ad50aa10
......@@ -5,7 +5,7 @@
* January 2021
*/
/* globals omnivore, Promise, makeBaseMap, am4core, makeRadialChart, makeLineChart, makeAreaChart */
/* globals omnivore, Promise, makeBaseMap, am4core, makeRadialChart, makeLineChart, makeAreaChart, makeBarChart */
/* exported. userFiles, userDates, timeParse, layerControl, yearList */
let timeParse,
......@@ -267,9 +267,9 @@ const setupMap = (dates) => {
});
const offsetGlobal = (center, zoom, refMap, tgtMap) => {
var refC = refMap.getContainer();
var tgtC = tgtMap.getContainer();
var pt = refMap.project(center, zoom)
let refC = refMap.getContainer();
let tgtC = tgtMap.getContainer();
let pt = refMap.project(center, zoom)
.subtract([refC.offsetLeft, refC.offsetTop])
.subtract(refMap.getSize().divideBy(2))
.add([tgtC.offsetLeft, tgtC.offsetTop])
......@@ -309,7 +309,7 @@ const populateMap = async(mapData) => {
// wait for all queries to complete and then set chart data
Promise.all(queries).then( data => {
// TODO: maybe make this a function so it can be used to update chart when changing dates
let chartData = [];
let radialChartData = [];
monthArray.forEach( (month, index) => {
let element = {};
yearList.forEach( year => {
......@@ -318,9 +318,9 @@ const populateMap = async(mapData) => {
let yearData = data.filter(d => new Date(d.date).getMonth() == index && new Date(d.date).getFullYear() == year);
element[year] = yearData.length > 0 ? yearData[0].area : null;
});
chartData.push(element);
radialChartData.push(element);
});
makeRadialChart(chartData, monthArray, yearList);
makeRadialChart(radialChartData, monthArray, yearList);
});
// LINE + STACKED AREA CHARTS
......@@ -363,13 +363,13 @@ const populateMap = async(mapData) => {
makeAreaChart(chartData);
});
// populate bars
// // BAR CHART
// async queries for each date that has been loaded
const queries_pb = userFiles.map(async(mes, i) => {
let query_pb = `${baseUrl}/query/${mes}?columns=descrip, areacpo`;
const queryData = await d3.json(query_pb);
let date = new Date(dateArray[i]);
let date = new Date(userDates[i]);
for (let k = 0; k < queryData.length; k++) {
queryData[k].date = date; // assign date to each element
// assign bar groups to each element
......@@ -385,9 +385,9 @@ const populateMap = async(mapData) => {
// wait for all queries to complete and set barChartData to its response
Promise.all(queries_pb).then((d) => {
barChartData = [].concat.apply([], d);
// set initial date to january 2016
let filterDate = new Date(dateArray[0]);
let filterDate = new Date(userDates[0]);
makeBarChart(barChartData);
updateBarChart(filterDate, barChartData);
});
......@@ -492,7 +492,7 @@ const populateMap = async(mapData) => {
"Carto Light": cartoLightLayer,
"OpenStreetMap": osmLayer
};
var overlays = {
let overlays = {
"<span id=\"cuencaOverlay\">Agua en la cuenca del Grijalva</span>": timeLayer
};
......@@ -638,7 +638,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
return;
}
var time = this._timeDimension.getCurrentTime();
let time = this._timeDimension.getCurrentTime();
// get data for time
let d = new Date(time),
......@@ -671,7 +671,7 @@ let legend = L.control({
legend.onAdd = () => {
let div = L.DomUtil.create("div", "info legend leaflet-bar");
var html = "<h6>Cuerpos de agua</h6><ul>";
let html = "<h6>Cuerpos de agua</h6><ul>";
Object.keys(colors).forEach( c => {
html += `<li><i style="background: ${colors[c].fill}"></i>${c}</li>`;
});
......@@ -683,8 +683,7 @@ legend.onAdd = () => {
const updateBarChart = (filterDate, data) => {
let popBarsChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "dimfrcpo-graph");
let areclass = data.filter(d => d.date.valueOf() == filterDate.valueOf());
var elementpb = {},
let elementpb = {},
cart_pb = [];
// TODO: prepare all these group data sets instead of recalculating when calling the function
......@@ -700,7 +699,8 @@ const updateBarChart = (filterDate, data) => {
let cart_pb1 = cart_pb.filter(function(d) { return d.ap > 0 || d.at > 0 || d.av > 0 });
cart_pb1.sort((a, b) => (a < b ? 1 : -1));
//console.log("cart_pb1", cart_pb1);
popBarsChart.data = cart_pb1;
popBarsChart.invalidateRawData();
if (popBarsChart) {
popBarsChart.data = cart_pb1;
popBarsChart.invalidateRawData();
}
}
\ No newline at end of file
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