@model string
@{
    ViewBag.Title = "Hello Razor";
}

<div id="chart"></div>

<script>
    var base_url = "@Url.Content("~/api/")";
    var end_url = "/@Model/last/48";

    $.getJSON(base_url + "heartbeat" + end_url, function (heartbeat) {
        $.getJSON(base_url + "step" + end_url, function (steps) {
            $.getJSON(base_url + "sleep" + end_url, function (sleep) {

                var sleepArr = [];
                sleep.forEach( function (el) {
                    sleepArr.push({ "time": el.time, "value": 1 });
                    var base_time = new Date(el.time).getTime();

                    for (var i = 60000; i <= el.value; i += 60000) {
                        sleepArr.push({ "time": new Date(base_time + i), "value": 1 });
                    }
                });

                $("#chart").kendoChart({
                    title: { text: "Visualizzazione attivita' di @Model" },
                    legend: { position: "bottom" },
                    seriesDefaults: {
                        type: "line",
                        style: "smooth"
                    },
                    series: [{
                        name: "Battito",
                        field: "value",
                        color: "red",
                        axis: "Heartbeat",
                        categoryField: "time",
                        data: heartbeat,
                        tooltip: {
                            visible: true,
                            format: "{0}%",
                            template: "Media di: #= value # bpm"
                        }
                    }, {
                        name: "Passi",
                        field: "value",
                        color: "blue",
                        axis: "Steps",
                        categoryField: "time",
                        data: steps,
                        tooltip: {
                            visible: true,
                            format: "{0}%",
                            template: "#= series.name #: #= value #"
                        }
                    }, {
                        type: "area",
                        name: "Sonno",
                        field: "value",
                        color: "black",
                        axis: "Sleep",
                        categoryField: "time",
                        data: sleepArr
                    }],
                    categoryAxis: {
                        labels: {
                            rotation: +45,
                            dateFormats: {
                                hours: "HH:mm"
                            }
                        },
                        type: "Date",
                        baseUnit: "hours"
                    },
                    valueAxes: [{
                        name: "Heartbeat",
                        color: "red"
                    }, {
                        name: "Steps",
                        color: "blue"
                    }, {
                        name: "Sleep",
                        color: "gray",
                        visible: false,
                        max: 1,
                        min: 0
                    }]
                })
            })
        })
    });
</script>