@model ResourcesManager.ViewModels.StatisticViewModel

@{
    ViewBag.Title = "Statisztika";
}

<!-- Styles -->
<style>
    #chartdiv, #chartdiv2, #chartdiv3, #chartdiv4 {
        width: 100%;
        height: 500px;
        font-size: 11px;
    }
</style>

<!-- Resources -->
<script src="~/amcharts/amcharts.js"></script>
<script src="~/amcharts/pie.js"></script>
<script src="~/amcharts/serial.js"></script>
<script src="~/amcharts/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="~/amcharts/plugins/export/export.css" type="text/css" media="all" />
<script src="~/amcharts/themes/light.js"></script>

@Scripts.Render("~/bundles/jquery")
<!-- Chart code -->
<script>
    var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.ByType, Newtonsoft.Json.Formatting.None, new Newtonsoft.Json.Converters.IsoDateTimeConverter() { DateTimeFormat = "MMM-dd" }));

    var chart = AmCharts.makeChart( "chartdiv", {
        "type": "serial",
        "theme": "light",
        "dataProvider": data,
        "valueAxes": [ {
            "gridColor": "#FFFFFF",
            "gridAlpha": 0.2,
            "dashLength": 0
        } ],
        "gridAboveGraphs": true,
        "startDuration": 1,
        "graphs": [ {
            "balloonText": "[[category]]: <b>[[value]]</b>",
            "fillAlphas": 0.8,
            "lineAlpha": 0.2,
            "type": "column",
            "valueField": "Value"
        } ],
        "chartCursor": {
            "categoryBalloonEnabled": false,
            "cursorAlpha": 0,
            "zoomable": false
        },
        "categoryField": "Name",
        "categoryAxis": {
            "gridPosition": "start",
            "gridAlpha": 0,
            "tickPosition": "start",
            "tickLength": 20,
            "labelRotation": 45
        },
        "export": {
            "enabled": false
        }

    } );

    var data2 = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.ByResource, Newtonsoft.Json.Formatting.None, new Newtonsoft.Json.Converters.IsoDateTimeConverter() { DateTimeFormat = "MMM-dd" }));
    var chart2 = AmCharts.makeChart( "chartdiv2", {
        "type": "serial",
        "theme": "light",
        "dataProvider": data2,
        "valueAxes": [ {
            "gridColor": "#FFFFFF",
            "gridAlpha": 0.2,
            "dashLength": 0
        } ],
        "gridAboveGraphs": true,
        "startDuration": 1,
        "graphs": [ {
            "balloonText": "[[category]]: <b>[[value]]</b>",
            "fillAlphas": 0.8,
            "lineAlpha": 0.2,
            "type": "column",
            "valueField": "Value"
        } ],
        "chartCursor": {
            "categoryBalloonEnabled": false,
            "cursorAlpha": 0,
            "zoomable": false
        },
        "categoryField": "Name",
        "categoryAxis": {
            "gridPosition": "start",
            "gridAlpha": 0,
            "tickPosition": "start",
            "tickLength": 20,
            "labelRotation": 45
        },
        "export": {
            "enabled": false
        }

    } );

    var chart3 = AmCharts.makeChart( "chartdiv3", {
        "type": "pie",
        "theme": "light",
        "dataProvider": @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.ByTypeCircle)),
        "valueField": "Value",
        "titleField": "Name",
        "balloon":{
            "fixedPosition":true
        },
        "export": {
            "enabled": false
        }
    } );

    var chart4 = AmCharts.makeChart( "chartdiv4", {
        "type": "pie",
        "theme": "light",
        "dataProvider": @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Subscribe)),
        "valueField": "Value",
        "titleField": "Name",
        "balloon":{
            "fixedPosition":true
        },
        "export": {
            "enabled": false
        }
    } );

</script>

<h2>Statisztika</h2>
    

@using (Html.BeginForm(null, null, FormMethod.Get, new { enctype = "multipart/form-data", id="form" }))
{
    @Html.AntiForgeryToken()
    <h3>Műveletek száma</h3>
    @Html.DropDownList("statTypeId", Model.StatisticType)
    <div id="chartdiv"></div>
    <h3>Tevékenységek száma </h3>
    @Html.DropDownList("resId", Model.Resources)
    <div id="chartdiv2"></div>
    <h3>Tevékenységek aránya</h3>
    <div id="chartdiv3"></div>
    <h3>Felíratkozások aránya</h3>
    <div id="chartdiv4"></div>

}
<script type="text/javascript">
    $('#statTypeId').on('change', function () {
        $('form').submit();
    });
    $('#resId').on('change', function () {
        $('form').submit();
    });
</script>