Rewrite series functions. Fix some legend columns

public/js/centropais_periurbano_charts.js

@@ -24,50 +24,17 @@ const makeStackedBarSeries = (chart, name, category, value, color) => {
     series.stroke = am4core.color(color);
 }
 
-const makeStackedBarLineSeries = (chart, name, category, value, barColor, yAxis, lineColor) => {
-    let barSeries = chart.series.push(new am4charts.ColumnSeries());
-    barSeries.columns.template.width = am4core.percent(80);
-    barSeries.name = name;
-    barSeries.dataFields.categoryX = category;
-    barSeries.dataFields.valueY = value;
-    barSeries.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha";
-    barSeries.dataItems.template.locations.categoryX = 0.5;
-    barSeries.stacked = true;
-    barSeries.tooltip.pointerOrientation = "vertical";
-    barSeries.fill = am4core.color(barColor);
-    barSeries.stroke = am4core.color(barColor);
-
-    let lineSeries = chart.series.push(new am4charts.LineSeries());
-    lineSeries.name = `% ${name}`;
-    lineSeries.dataFields.valueY = value;
-    lineSeries.dataFields.categoryX = category;
-    lineSeries.dataFields.valueYShow = "totalPercent";
-    // FIXME: using totalPercent chanhges values when turning series on or off
-    lineSeries.yAxis = yAxis;
-    //stackedBarLineLineSeries.dataItems.template.locations.categoryX = 0.5;
-
-    lineSeries.stroke = am4core.color(lineColor);
-    lineSeries.strokeWidth = 3;
-    lineSeries.propertyFields.strokeDasharray = "lineDash";
-    lineSeries.tooltip.label.textAlign = "middle";
-    lineSeries.stacked =true;
-    lineSeries.calculatePercent = true;
-
-    let bullet = lineSeries.bullets.push(new am4charts.Bullet());
-    bullet.fill = am4core.color(lineColor); // tooltips grab fill from parent by default
-    bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]";
-
-    let circle = bullet.createChild(am4core.Circle);
-    circle.radius = 4;
-    circle.fill = am4core.color("#fff");
-    circle.strokeWidth = 3;
-}
-
-const makeLineSeries = (chart, name, value, category, yAxis, color) => {
+const makeLineSeries = (chart, name, value, percent, category, yAxis, color) => {
     let series = chart.series.push(new am4charts.LineSeries());
     series.name = name;//"San Juan del río - Querétaro";
     series.dataFields.valueY = value;
     series.dataFields.categoryX = category;
+    if (percent) {
+        series.dataFields.valueYShow = "totalPercent";
+        series.stacked = true;
+        series.calculatePercent = true;
+    }
+    // FIXME: using totalPercent chanhges values when turning series on or off
     series.yAxis = yAxis;
     series.stroke = am4core.color(color);
     series.strokeWidth = 3;
@@ -259,15 +226,20 @@ am4core.ready(function() {
     stackedBarLinePercentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
     stackedBarLinePercentAxis.renderer.labels.template.fontSize = 9;
 
-    makeStackedBarLineSeries(stackedBarLineChart, "Bajo", "category", "value1", "#f8caa0", stackedBarLinePercentAxis, "#D197FA");
-    makeStackedBarLineSeries(stackedBarLineChart, "Medio", "category", "value2", "#cf8a4f", stackedBarLinePercentAxis, "#844DDF");
-    makeStackedBarLineSeries(stackedBarLineChart, "Alto", "category", "value3", "#93592a", stackedBarLinePercentAxis, "#351591");
+    makeStackedBarSeries(stackedBarLineChart, "Bajo", "category", "value1", "#f8caa0");
+    makeStackedBarSeries(stackedBarLineChart, "Medio", "category", "value2", "#cf8a4f");
+    makeStackedBarSeries(stackedBarLineChart, "Alto", "category", "value3", "#93592a");
+
+    makeLineSeries(stackedBarLineChart, "% Bajo", "value1", true, "category", stackedBarLinePercentAxis, "#D197FA");
+    makeLineSeries(stackedBarLineChart, "% Medio", "value2", true, "category", stackedBarLinePercentAxis, "#844DDF");
+    makeLineSeries(stackedBarLineChart, "% Alto", "value3", true, "category", stackedBarLinePercentAxis, "#351591");
 
     // Use this to avoid turning on or off legend items.
     // Remove if use of percentTotal is fixed in series
     stackedBarLineChart.legend.itemContainers.template.clickable = false;
     stackedBarLineChart.legend.itemContainers.template.focusable = false;
     stackedBarLineChart.legend.itemContainers.template.cursorOverStyle = am4core.MouseCursorStyle.default;
+    stackedBarLineChart.legend.maxColumns = 3;
 
     //++++++++++++++++++++++++++++++++++++++++++++ HISTORICO POR TRAMOS ++++++++++++++++++
 
@@ -356,24 +328,25 @@ am4core.ready(function() {
     let lineChartValueAxis = lineChart.yAxes.push(new am4charts.ValueAxis());
     lineChartValueAxis.min = 0;
     //lineChartValueAxis.max = 100;
-    lineChartValueAxis.strictMinMax = true;
+    //lineChartValueAxis.strictMinMax = true;
     lineChartValueAxis.calculateTotals = true;
     lineChartValueAxis.renderer.minWidth = 50;
     lineChartValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
     lineChartValueAxis.renderer.labels.template.fontSize = 9;
 
-    makeLineSeries(lineChart, "T7", "Tramo7", "category", lineChartValueAxis, "#fddfb9");
-    makeLineSeries(lineChart, "T8", "Tramo8", "category", lineChartValueAxis, "#fb9a99");
-    makeLineSeries(lineChart, "T9", "Tramo9", "category", lineChartValueAxis, "#33a09b");
-    makeLineSeries(lineChart, "T10", "Tramo10", "category", lineChartValueAxis, "#de6eb4");
-    makeLineSeries(lineChart, "T11", "Tramo11", "category", lineChartValueAxis, "#4db0ec");
-    makeLineSeries(lineChart, "T12", "Tramo12", "category", lineChartValueAxis, "#2be829");
+    makeLineSeries(lineChart, "T7", "Tramo7", false, "category", lineChartValueAxis, "#fddfb9");
+    makeLineSeries(lineChart, "T8", "Tramo8", false, "category", lineChartValueAxis, "#fb9a99");
+    makeLineSeries(lineChart, "T9", "Tramo9", false, "category", lineChartValueAxis, "#33a09b");
+    makeLineSeries(lineChart, "T10", "Tramo10", false, "category", lineChartValueAxis, "#de6eb4");
+    makeLineSeries(lineChart, "T11", "Tramo11", false, "category", lineChartValueAxis, "#4db0ec");
+    makeLineSeries(lineChart, "T12", "Tramo12", false, "category", lineChartValueAxis, "#2be829");
 
     // Use this to avoid turning on or off legend items.
     // Remove if use of percentTotal is fixed in series
     lineChart.legend.itemContainers.template.clickable = false;
     lineChart.legend.itemContainers.template.focusable = false;
     lineChart.legend.itemContainers.template.cursorOverStyle = am4core.MouseCursorStyle.default;
+    lineChart.legend.maxColumns = 3;
 
 
     // Create bar + percentage chart