Start adapting from d3 to amcharts

public/js/cuerpos_functions.js

@@ -361,41 +361,8 @@ const getMinMax = table => {
 
 const populateMap = async (mapData) => {
 
-    const chartData = await getData();
-
-    // Define charts with reusable components
-    indicators.map( async (indicator, index) => {
-        // indicatorVars[indicator].chart gives areaChart, perimeterChart, etc.
-        // First, make all charts with same general options
-        indicatorVars[indicator].chart = makeIndicatorGraph()
-            .width(Math.floor($(indicatorVars[indicator].container)[0].offsetParent.offsetWidth * 0.95))
-            .height(Math.floor($(indicatorVars[indicator].container)[0].offsetParent.offsetHeight * 0.95))
-            .lineVariables([`${indicator}0`]) // d.area is used to draw stuff on y axis
-            .displayName("date") // d.date is used to draw stuff on x axis
-            .lineAxisLabel("(m)")
-            .id(indicator)
-            .xAxisFormat(d3.timeFormat("%b '%y")) // label x axis as mm 'yy
-            .yAxisFormat(d3.format(indicatorsxAxisFormat[index])) // yAxis label in SI or other
-            // Then, specify some parameters for each chart
-            .tooltipUnits(indicatorsUnits[index])
-            .tooltipFormat(d3.format(indicatorsxAxisFormat[index])) // tooltip format in SI or other
-            .title(indicatorsUnits[index] == "" ? indicatorsNames[index] :
-                `${indicatorsNames[index]} (${indicatorsUnits[index]})`);
-
-        // Finally, set chart data with async function calling stuff from DB
-        indicatorVars[indicator].chart.data( chartData[indicator]);
-        // create chart with passed options
-        d3.select(indicatorVars[indicator].container)
-            .call(indicatorVars[indicator].chart);
-        // Reload chart data and force chart update
-        indicatorVars[indicator].chartData = indicatorVars[indicator].chart.data(); // get chart data
-        indicatorVars[indicator].chart.data(indicatorVars[indicator].chartData); // set chart data
-
-        // Highlight plot title according to selected option
-        let option = $("#indicatorSelect").val(); // option selected from dropdrown
-        d3.select(indicatorVars[option].container).select("svg text.title").classed("active", true);
-    });
-
+    //const chartData = await getData();
+    // call amchart here
 
     let map = mapData.map,
         minIndicators = mapData.minIndicators,
@@ -413,8 +380,6 @@ const populateMap = async (mapData) => {
     });
     let cuencaBufferMask = omnivore.topojson("data/buffer_cuenca.topojson", null, cuencaLayer);
     cuencaBufferMask.addTo(map);
-    //map.createPane("wb-Tiles");
-    //map.getPane("wb-Tiles").style.zIndex = 450;
 
     // create mvt layers
     userFiles.forEach( f => {
@@ -579,7 +544,7 @@ const updateMap = (mapData) => {
             //.then(legend.addTo(map)); // add legend control -> it updates
     });
     // Update charts
-    updateCharts();
+    //updateCharts();
 }
 
 const updateCharts = async () => {
@@ -722,10 +687,10 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
         title.html(`<h2>Cobertura de agua en la cuenca del r&iacute;o Grijalva en ${month} de ${year}</h2>`);
 
         // Update graphs only on timeload event
-        indicators.forEach( indicator => {
+        /*indicators.forEach( indicator => {
             indicatorVars[indicator].chartData = indicatorVars[indicator].chart.data(); // get chart data
             indicatorVars[indicator].chart.data(indicatorVars[indicator].chartData); // set chart data
-        });
+        });*/
 
         //console.time("process");
         //console.log("data for", monthYear);