@extends('layouts.mainlayout')
<style>
    #chartdiv {
        width: 100%;
        height: 500px;
    }
</style>
@section('content')
<div class="row">
    <div class="col-md-12 section-header">
        <h2>
            <span class="icon-i-gota"></span>Histórico de Consumo </h2>
    </div>
</div>
<div id="chartdiv"></div>
<div class="espacio"></div>
@endsection
<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//cdn.amcharts.com/lib/4/charts.js"></script>
<script src="//cdn.amcharts.com/lib/4/themes/animated.js"></script>
<script defer>
    let consumos = {!! $response !!};
    
        
    if (consumos.length > 0) {
        am4core.ready(function() {
            // Apply chart themes
            am4core.useTheme(am4themes_animated);
            am4core.useTheme(am4themes_themeAguakan);

            
            // Create chart instance
            var chart = am4core.create("chartdiv", am4charts.XYChart);

            //Asignamos los datos a la gráfica
            chart.data = consumos;

            // Create axes
            var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
            categoryAxis.dataFields.category = "FECHA";
            categoryAxis.title.text = "Periodos";

            // First value axis
            var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
            valueAxis.title.text = "Consumo (m3)";

            // Second value axis
            var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
            valueAxis2.title.text = "Lectura final (m3)";
            valueAxis2.renderer.opposite = true;

            // First series
            var series = chart.series.push(new am4charts.ColumnSeries());
            series.dataFields.valueY = "LECFINAL";
            series.dataFields.categoryX = "FECHA";
            series.name = "Lectura medidor";
            series.tooltipText = "{name}: [bold]{valueY}[/]";
            series.yAxis = valueAxis2;

            // Second series
            var series2 = chart.series.push(new am4charts.LineSeries());
            series2.dataFields.valueY = "CONSUMO";
            series2.dataFields.categoryX = "FECHA";
            series2.name = "Consumo";
            series2.tooltipText = "{name}: [bold]{valueY}[/]";
            series2.strokeWidth = 4;
            series2.yAxis = valueAxis;

            // Add legend
            chart.legend = new am4charts.Legend();
            // Add cursor
            chart.cursor = new am4charts.XYCursor();
            chart.exporting.menu = new am4core.ExportMenu();
            chart.exporting.menu.items = [{
            "label": "...",
            "menu": [
            { "type": "png", "label": "Exportar PNG" },
          
            { "label": "Imprimir", "type": "print" }
            ]
            }];
            chart.scrollbarX = new am4core.Scrollbar();
            chart.responsive.enabled = true;
            chart.responsive.rules.push({
                relevant: function(target) {
                    return false;
                },
                state: function(target, stateId) {
                    return;
                }
            });
            // Edit the theme by [SPARK]
            chart.legend.useDefaultMarker = true;
            let marker = chart.legend.markers.template.children.getIndex(0);
            marker.cornerRadius(12, 12, 12, 12);
            marker.strokeWidth = 2;
            marker.strokeOpacity = 1;
            marker.stroke = am4core.color("#f9f9f9");

        }); // end am4core.ready()
    }
    // Theme by [SPARKLABS]
    function am4themes_themeAguakan(target){
        // fondo de axis
        if (target instanceof am4charts.Axis) {
        target.background.fill = am4core.color("#f9f9f9");
        }
        // Posición de los textos de axis
        if (target instanceof am4charts.AxisRenderer) {
        target.minLabelPosition = 0.1;
        target.maxLabelPosition = 0.9;
        }
        // Colores a las líneas de gráficos
        if (target instanceof am4core.ColorSet) {
        target.list = [
        am4core.color("#B1DE25"), //verde
        am4core.color("#007aff")
        ];
        }
        // Color para el scrollbar y textos
        if (target instanceof am4core.InterfaceColorSet) {
        target.setFor("secondaryButton", am4core.color("#B1DE25"));
        target.setFor("secondaryButtonHover", am4core.color("#00BDD4").lighten(-0.2));
        target.setFor("secondaryButtonDown", am4core.color("#B1DE25").lighten(-0.2));
        target.setFor("secondaryButtonActive", am4core.color("#007aff").lighten(-0.2));
        target.setFor("secondaryButtonText", am4core.color("#FFFFFF"));
        target.setFor("secondaryButtonStroke", am4core.color("#ffffff"));
        target.setFor("grid", am4core.color("#00BDD4"));
        target.setFor("text", am4core.color("#2E2925"));
        }
    }
</script>