<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="cmp_SheetsStats.ascx.cs" Inherits="NKC_WF.WebUserControls.cmp_SheetsStats" %>

<%--https://www.chartjs.org/--%>

<div class="card m-2">
    <div class="card-header">
        <h4>Unload Part Plan <sub>(<%: hfBatchId.Value %>)</sub></h4>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-12 px-2">
                <asp:HiddenField runat="server" ID="hfBatchId" />
                <asp:HiddenField runat="server" ID="hfMaxHour" Value="-1" />
                <canvas id="myChartTS" height="600"></canvas>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    //var prm = Sys.WebForms.PageRequestManager.getInstance();
    //prm.add_pageLoaded(pageLoaded);

    //function pageLoaded(sender, args) {
    //    console.log('pageLoaded!');
    //    // chiamo recupero dati + plot della TS e dell'Histogram
    //    plotTS();
    //}

    // funzione eseguita se successo al caricamento
    function OnSuccess_(reponse) {

        // recupero dati restituiti
        var dataTS = reponse;
        //console.log('Recieved our data', dataTS);

        var myOptions = {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                yAxes: [{
                    //type: 'linear',
                    display: true,
                    ticks: {
                        min: 0,
                        maxTicksLimit: 20,
                    }
                }],
                xAxes: [{
                    type: 'time',
                    //type: 'linear',
                    time: {
                        unit: 'minute',
                        stepSize: 1,
                    },
                    ticks: {
                        source: 'data',
                        minRotation: 60
                    },
                    distribution: 'linear',
                }]
            }
            , animation: {
                duration: 200
            },
        };

        // recupero obj chart
        var ctx = document.getElementById('myChartTS').getContext('2d');
        var chart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    borderColor: 'rgb(7, 173, 236)',
                    lineTension: 0,
                    steppedLine: true,
                    label: '# Parts to unload',
                    data: dataTS
                }]
            },
            options: myOptions
        });

    }
    // errore in reload!
    function OnErrorCall_(repo) {
        alert("Errore recupero dati grafico!");
    }
    // effettuo plotting grafico TimeSerie!
    function plotTS() {
        // console.log("api/SheetStats/<%=hfBatchId.Value %>");
        // caricamento pagina
        $.ajax({
            type: "GET",
            url: "../api/SheetStats/<%=hfBatchId.Value %>?MaxHour=<%=hfMaxHour.Value%>",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess_,
            error: OnErrorCall_
        });
    }

    // funzione di drawing ad OGNI pageload!
    function pageLoad() {
        // chiamo recupero dati + plot della TS
        plotTS();
        // console.log('pageLoad!');
    }
</script>