UserActionSankeyDiagram_Index.cshtml

@model UserActionSankeyDiagramViewModel
@{
    ViewBag.Title = "ユーザーの行動";
}

<h2>ユーザーの行動（BigQuery ※1日キャッシュ）</h2>

<div class="padding-top-10"></div>

@using (Html.BeginForm("Index", "UserActionSankeyDiagram", FormMethod.Get, new { role = "form" }))
{
    //Html.MonthsとHtml.Intsは https://gist.github.com/kiyoaki/7cfd60d171d82679eaea 参照
    <span>@Html.DropDownList("targetMonth", Html.Months(Model.ReleaseMonth, Model.ThisMonth, Model.TargetMonth), new { onchange = "this.form.submit();" })</span>
    <span>@Html.DropDownList("targetStep", Html.Ints(MinStep, MaxStep, Model.TargetStep), new { onchange = "this.form.submit();" })</span>
}
<div class="padding-top-10"></div>
<div id="sankey-multiple-loading"><img src="~/Content/loading.gif" /></div>
<div id="sankey-multiple"></div>
@Html.Partial("_ClearBigqueryCacheButton")

@section styles
{
    <style>
        .padding-top-10 {
            padding-top: 10px;
        }
    </style>
}

@section scripts
{
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        (function (ctx) {
            var google = ctx.google;
            var doc = ctx.document;
            var loading = doc.getElementById("sankey-multiple-loading");
            var parent = doc.getElementById('sankey-multiple');
            var screenWidth = screen.width;
            var screenHeight = screen.height;
            var chartWidth = screenWidth - 20 > 1140 ? 1140 : screenWidth - 20;
            var chartHeight = screenHeight - 20 > 640 ? 640 : screenHeight - 20;

            function draw(json) {
                if (json == null || json.length === 0) {
                    return;
                }

                var data = new google.visualization.DataTable();
                data.addColumn('string', 'From');
                data.addColumn('string', 'To');
                data.addColumn('number', 'Weight');
                data.addRows(json);

                // Set chart options
                var options = {
                    width: chartWidth,
                    height: chartHeight
                };

                // Instantiate and draw our chart, passing in some options.
                var chart = new google.visualization.Sankey(parent);
                chart.draw(data, options);

                loading.remove();
            }

            function requestApi() {
                ctx.$.ajax.getJSON("/api/UserActionSankeyDiagramApi", { targetMonth: "@Model.TargetMonth", targetStep: "@Model.TargetStep" }, draw);
            }

            google.charts.load("current", { packages: ["sankey"] });
            google.charts.setOnLoadCallback(requestApi);
        })(this);
    </script>
}