Skip to content

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

Improve element initialization flow

parent ad50aa10
Show whitespace changes
Inline Side-by-side
Showing with 118 additions and 115 deletions
public/js/cuerpos_functions.js
View file @ c88945e4
...@@ -45,7 +45,7 @@ let colors = { ...@@ -45,7 +45,7 @@ let colors = {
let currentTiles = {}, let currentTiles = {},
allTiles = {}; allTiles = {};
d3.json("https://unpkg.com/d3-time-format@2.1.1/locale/es-MX.json").then(locale => { d3.json("https://unpkg.com/d3-time-format@2.1.1/locale/es-MX.json").then(async locale => {
d3.timeFormatDefaultLocale(locale); d3.timeFormatDefaultLocale(locale);
...@@ -53,10 +53,11 @@ d3.json("https://unpkg.com/d3-time-format@2.1.1/locale/es-MX.json").then(locale ...@@ -53,10 +53,11 @@ d3.json("https://unpkg.com/d3-time-format@2.1.1/locale/es-MX.json").then(locale
timeFormat = d3.timeFormat("cuerpos_%B_%Y"); timeFormat = d3.timeFormat("cuerpos_%B_%Y");
setupTimeDimensionControl(); setupTimeDimensionControl();
setupDates() let dates = await setupDates(),
.then(dates => populateDates(dates)) userData = await populateDates(dates),
.then(userData => setupMap(userData)) mapData = await setupMap(userData);
.then(map => populateMap(map)); populateMap(mapData);
makeCharts();
}); });
const sortInitialDateAscending = (a, b) => { const sortInitialDateAscending = (a, b) => {
...@@ -282,116 +283,7 @@ const setupMap = (dates) => { ...@@ -282,116 +283,7 @@ const setupMap = (dates) => {
}); });
} }
let barChartData = [], const populateMap = async (mapData) => {
yearList;
const populateMap = async(mapData) => {
let baseUrl = new URL(`/data`, window.location.href).href;
// create sets of unique months and years
yearList = [... new Set(userDates.map( date => new Date(date).getFullYear() ))];
//let formatter = new Intl.DateTimeFormat('es', { month: 'long' });
// RADIAL CHART
// get am chart - may need this to update chart on date change
//let radialChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "radial_chart");
// async queries for each date that has been loaded
const queries = userFiles.map(async(mes, i) => {
//let query = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 value1,sum(perimcpo) value2, sum(dimfrcpo) value3`;
let query = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 area`;
const queryData = await d3.json(query);
queryData[0].date = new Date(userDates[i]);
return new Promise(resolve => {
resolve(queryData[0]);
});
});
// 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 radialChartData = [];
monthArray.forEach( (month, index) => {
let element = {};
yearList.forEach( year => {
//element.month = formatter.format(new Date(year, month, 1, 0, 0, 0));
element.month = month.toLowerCase();
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;
});
radialChartData.push(element);
});
makeRadialChart(radialChartData, monthArray, yearList);
});
// LINE + STACKED AREA CHARTS
// get am chart - may need this to update chart on date change
//let linesChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "linesChart");
//let stackedAreaChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "stackedAreaChart");
// async queries for each date that has been loaded
const queries_ls = userFiles.map(async(mes, i) => {
let query = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 area, descrip&group=descrip`;
const queryData = await d3.json(query);
for (const wbody in queryData) {
queryData[wbody].date = new Date(userDates[i]);
}
return new Promise(resolve => {
resolve(queryData);
});
});
// wait for all queries to complete and then set chart data
Promise.all(queries_ls).then( data => {
// TODO: maybe make this a function so it can be used to update chart when changing dates
let merged = [].concat.apply([], data);
let aguaPermanente = merged.filter(d => d.descrip == "Agua permanente" );
let aguaTemporal = merged.filter(d => d.descrip == "Áreas temporalmente inundadas" );
let aguaVegetacion = merged.filter(d => d.descrip == "Suelos húmedos-vegetación acuática" );
let chartData = [];
aguaPermanente.forEach( (wb, i) => {
let element = {
permanente: aguaPermanente[i].area,
temporal: aguaTemporal[i].area,
vegetacion: aguaVegetacion[i].area,
date: aguaPermanente[i].date
}
chartData.push(element);
});
chartData.sort((a, b) => (a.date > b.date) ? 1 : -1);
makeLineChart(chartData);
makeAreaChart(chartData);
});
// // 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(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
// TODO: better way to write these conditions?
if (Math.log(queryData[k].areacpo) <= 1) { queryData[k].grupo = 1 } else if (Math.log(queryData[k].areacpo) <= 2) { queryData[k].grupo = 2 } else if (Math.log(queryData[k].areacpo) <= 3) { queryData[k].grupo = 3 } else if (Math.log(queryData[k].areacpo) <= 4) { queryData[k].grupo = 4 } else if (Math.log(queryData[k].areacpo) <= 5) { queryData[k].grupo = 5 } else if (Math.log(queryData[k].areacpo) <= 6) { queryData[k].grupo = 6 } else if (Math.log(queryData[k].areacpo) <= 7) { queryData[k].grupo = 7 } else if (Math.log(queryData[k].areacpo) <= 8) { queryData[k].grupo = 8 } else if (Math.log(queryData[k].areacpo) <= 9) { queryData[k].grupo = 9 } else if (Math.log(queryData[k].areacpo) <= 10) { queryData[k].grupo = 10 } else if (Math.log(queryData[k].areacpo) <= 11) { queryData[k].grupo = 11 } else if (Math.log(queryData[k].areacpo) <= 12) { queryData[k].grupo = 12 } else if (Math.log(queryData[k].areacpo) <= 13) { queryData[k].grupo = 13 } else if (Math.log(queryData[k].areacpo) <= 14) { queryData[k].grupo = 14 } else if (Math.log(queryData[k].areacpo) <= 15) { queryData[k].grupo = 15 } else if (Math.log(queryData[k].areacpo) <= 16) { queryData[k].grupo = 16 } else if (Math.log(queryData[k].areacpo) <= 17) { queryData[k].grupo = 17 } else if (Math.log(queryData[k].areacpo) <= 18) { queryData[k].grupo = 18 } else if (Math.log(queryData[k].areacpo) <= 19) { queryData[k].grupo = 19 } else if (Math.log(queryData[k].areacpo) <= 20) { queryData[k].grupo = 20 } else { queryData[k].grupo = 20.0301186564 }
//if (k <= 20 && Math.log(queryData[k].areacpo) <= k + 1) { queryData[k].grupo = k + 1 } else { queryData[k].grupo = 20.0301186564 }
}
return new Promise(resolve => {
resolve(queryData);
});
});
// 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(userDates[0]);
makeBarChart(barChartData);
updateBarChart(filterDate, barChartData);
});
// end bars
let map = mapData.map; let map = mapData.map;
...@@ -680,6 +572,117 @@ legend.onAdd = () => { ...@@ -680,6 +572,117 @@ legend.onAdd = () => {
return div; return div;
}; };
let barChartData = [],
yearList;
const makeCharts = () => {
let baseUrl = new URL(`/data`, window.location.href).href;
// create sets of unique months and years
yearList = [... new Set(userDates.map( date => new Date(date).getFullYear() ))];
//let formatter = new Intl.DateTimeFormat('es', { month: 'long' });
// RADIAL CHART
// get am chart - may need this to update chart on date change
//let radialChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "radial_chart");
// async queries for each date that has been loaded
const queries = userFiles.map(async (mes, i) => {
//let query = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 value1,sum(perimcpo) value2, sum(dimfrcpo) value3`;
let query = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 area`;
const queryData = await d3.json(query);
queryData[0].date = new Date(userDates[i]);
return new Promise(resolve => {
resolve(queryData[0]);
});
});
// 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 radialChartData = [];
monthArray.forEach( (month, index) => {
let element = {};
yearList.forEach( year => {
//element.month = formatter.format(new Date(year, month, 1, 0, 0, 0));
element.month = month.toLowerCase();
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;
});
radialChartData.push(element);
});
makeRadialChart(radialChartData, monthArray, yearList);
});
// LINE + STACKED AREA CHARTS
// get am chart - may need this to update chart on date change
//let linesChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "linesChart");
//let stackedAreaChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "stackedAreaChart");
// async queries for each date that has been loaded
const queries_ls = userFiles.map(async (mes, i) => {
let query = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 area, descrip&group=descrip`;
const queryData = await d3.json(query);
for (const wbody in queryData) {
queryData[wbody].date = new Date(userDates[i]);
}
return new Promise(resolve => {
resolve(queryData);
});
});
// wait for all queries to complete and then set chart data
Promise.all(queries_ls).then( data => {
// TODO: maybe make this a function so it can be used to update chart when changing dates
let merged = [].concat.apply([], data);
let aguaPermanente = merged.filter(d => d.descrip == "Agua permanente" );
let aguaTemporal = merged.filter(d => d.descrip == "Áreas temporalmente inundadas" );
let aguaVegetacion = merged.filter(d => d.descrip == "Suelos húmedos-vegetación acuática" );
let chartData = [];
aguaPermanente.forEach( (wb, i) => {
let element = {
permanente: aguaPermanente[i].area,
temporal: aguaTemporal[i].area,
vegetacion: aguaVegetacion[i].area,
date: aguaPermanente[i].date
}
chartData.push(element);
});
chartData.sort((a, b) => (a.date > b.date) ? 1 : -1);
makeLineChart(chartData);
makeAreaChart(chartData);
});
// 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(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
// TODO: better way to write these conditions?
if (Math.log(queryData[k].areacpo) <= 1) { queryData[k].grupo = 1 } else if (Math.log(queryData[k].areacpo) <= 2) { queryData[k].grupo = 2 } else if (Math.log(queryData[k].areacpo) <= 3) { queryData[k].grupo = 3 } else if (Math.log(queryData[k].areacpo) <= 4) { queryData[k].grupo = 4 } else if (Math.log(queryData[k].areacpo) <= 5) { queryData[k].grupo = 5 } else if (Math.log(queryData[k].areacpo) <= 6) { queryData[k].grupo = 6 } else if (Math.log(queryData[k].areacpo) <= 7) { queryData[k].grupo = 7 } else if (Math.log(queryData[k].areacpo) <= 8) { queryData[k].grupo = 8 } else if (Math.log(queryData[k].areacpo) <= 9) { queryData[k].grupo = 9 } else if (Math.log(queryData[k].areacpo) <= 10) { queryData[k].grupo = 10 } else if (Math.log(queryData[k].areacpo) <= 11) { queryData[k].grupo = 11 } else if (Math.log(queryData[k].areacpo) <= 12) { queryData[k].grupo = 12 } else if (Math.log(queryData[k].areacpo) <= 13) { queryData[k].grupo = 13 } else if (Math.log(queryData[k].areacpo) <= 14) { queryData[k].grupo = 14 } else if (Math.log(queryData[k].areacpo) <= 15) { queryData[k].grupo = 15 } else if (Math.log(queryData[k].areacpo) <= 16) { queryData[k].grupo = 16 } else if (Math.log(queryData[k].areacpo) <= 17) { queryData[k].grupo = 17 } else if (Math.log(queryData[k].areacpo) <= 18) { queryData[k].grupo = 18 } else if (Math.log(queryData[k].areacpo) <= 19) { queryData[k].grupo = 19 } else if (Math.log(queryData[k].areacpo) <= 20) { queryData[k].grupo = 20 } else { queryData[k].grupo = 20.0301186564 }
//if (k <= 20 && Math.log(queryData[k].areacpo) <= k + 1) { queryData[k].grupo = k + 1 } else { queryData[k].grupo = 20.0301186564 }
}
return new Promise(resolve => {
resolve(queryData);
});
});
// 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(userDates[0]);
makeBarChart(barChartData);
updateBarChart(filterDate, barChartData);
});
// end bars
}
const updateBarChart = (filterDate, data) => { const updateBarChart = (filterDate, data) => {
let popBarsChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "dimfrcpo-graph"); let popBarsChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "dimfrcpo-graph");
let areclass = data.filter(d => d.date.valueOf() == filterDate.valueOf()); let areclass = data.filter(d => d.date.valueOf() == filterDate.valueOf());
......
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