@using DashboardModel

@using C1.Web.Mvc.Grid

<script>
    $(window).resize(function () {
        updateDashboard();
    });

    $(document).ready(function () {
        updateDashboard();
    });

    function updateDashboard() {
        var dashboard = wijmo.Control.getControl('#dashboard');
        resetTileContentsSize();

        var wsSplitLayout = c1.getService('wsSplitLayout'),
            nsSplitLayout = c1.getService('nsSplitLayout'),
            layout = document.body.clientWidth < 1000 ? nsSplitLayout : wsSplitLayout;

        if (dashboard.layout === layout) {
            dashboard.refresh();
        } else {
            dashboard.layout = layout;
        }
    }

    function refreshAll(start, end) {
        refreshData(start, end, '@Url.Action("GetAnalysisData")', function (data) {
            var chartOpportunities = wijmo.Control.getControl("#chartOpportunities");
            chartOpportunities.itemsSource = minSale(data[1].items)  > 0 ? data[1].items : null;

            var chartRegionSales = wijmo.Control.getControl("#chartRegionSale");
            chartRegionSales.itemsSource = data[0].items;
        });
    }

    function minSale(list) {
        var min = Number.MAX_VALUE;
        $.each(list, function (i, v) {
            if (min > v.Sales)
                min = v.Sales;
        });
        return min;
    }

    function resetTileContentsSize() {
        var eleIds = ['pivotPanelTile', 'pivotGrid', 'chartRegionSale', 'chartOpportunities'];
        for (var i = 0; i < eleIds.length; i++) {
            var domEle = document.getElementById(eleIds[i]);
            if (domEle) {
                domEle.removeAttribute('style');
            }
        }
    }

    function tileContentRefreshing(sender, e) {
        var eleCtl = sender.hostElement,
            tileEle = eleCtl.parentElement.parentElement,
            height = $(tileEle).height() - 15;
        if (sender instanceof wijmo.chart.FlexChartBase) {
            height -= 12;
        } else if (sender instanceof wijmo.grid.FlexGrid) {
            height -= 5;
        }
        $(eleCtl).outerHeight(height + 'px');
    }

</script>

<div style="visibility:hidden;position:absolute;left:-10000px;top:-10000px">
    @(Html.C1().PivotEngine().Id("indexEngine").Bind(ViewBag.ProductWiseSaleCollection as List<ProductsWiseSaleItem>)
        .RowFields(pfcb => pfcb.Items("Category", "Product"))
        .ColumnFields(cfcb => cfcb.Items("Region"))
        .ValueFields(vfcb => vfcb.Items("Sale")))

    <div id="pivotPanelTile">
        <div class="caption">@Resources.DashboardDemo.ProductWise_Header</div>
        @Html.C1().PivotPanel().ItemsSourceId("indexEngine")
    </div>

    @Html.C1().PivotGrid().ItemsSourceId("indexEngine").Id("pivotGrid").AutoSizeMode(AutoSizeMode.None)

    @(Html.C1().TreeMap().Id("chartRegionSale")
            .DataLabel(l => l.Content("{name}"))
            .Bind(ViewBag.RegionSales as List<ProductsWiseSaleItem>)
            .Binding("Sale")
            .BindingName("Region, Category")
            .HeaderStyle(x =>
            {
                x.Halign("left");
            })
            .Header(@Resources.DashboardDemo.CategoryRegion_Sale)
            .Tooltip(c =>
            {
                c.Content("<b>{name}</b><br />{value:c0}");
            })
            .OnClientRefreshing("tileContentRefreshing")
    )

    @(Html.C1().FlexChart().Id("chartOpportunities")
            .Bind(ViewBag.OpportunityItemList as List<Opportunity>)
            .BindingX("LevelName")
            .ChartType(C1.Web.Mvc.Chart.ChartType.Funnel)
            .Series(sers =>
            {
                sers.Add().Name(Resources.DashboardDemo.Sale_Series).Binding("Sales");
            }).AxisY(y =>
            {
                y.Position(C1.Web.Mvc.Chart.Position.None);
            }).HeaderStyle(x =>
            {
                x.Halign("left");
            }).Legend(C1.Web.Mvc.Chart.Position.Bottom)
            .Header(@Resources.DashboardDemo.Opportunities_Header)
            .DataLabel(x =>
            {
                x.Position(C1.Web.Mvc.Chart.LabelPosition.Center);
                x.Content("{y:C0}");
            }).Options(x =>
            {
                x.Funnel(o =>
                {
                    o.NeckHeight(0.2f);
                });
            }).Tooltip(t =>
            {
                t.Content("<b>{name}</b><br />{x} {value:c0}");
            })
            .OnClientRefreshing("tileContentRefreshing")
    )
</div>

<div class="flex vertical" style="width:100%;height:100%;overflow:hidden;">
    <div>
        <h3>
            @Resources.DashboardDemo.AnalysisPage_Title
        </h3>
    </div>
    <div class="auto" style="overflow:auto">
        @(Html.C1().SplitLayout()
            .Id("wsSplitLayout")
            .Orientation(LayoutOrientation.Horizontal)
            .Items(isb =>
            {
                isb.AddTile().Content("#pivotPanelTile").ShowHeader(false).Size("2*");
                isb.AddTile().Content("#pivotGrid").ShowHeader(false).Size("4*");
                isb.AddGroup()
                    .Size("4*")
                    .Orientation(LayoutOrientation.Vertical)
                    .Children(cb =>
                    {
                        cb.AddTile().Content("#chartRegionSale").ShowHeader(false).Size("*");
                        cb.AddTile().Content("#chartOpportunities").ShowHeader(false).Size("*");
                    });
            }))
        @(Html.C1().SplitLayout()
            .Id("nsSplitLayout")
            .Orientation(LayoutOrientation.Vertical)
            .Items(isb =>
            {
                isb.AddTile().ShowHeader(false).Content("#pivotPanelTile");
                isb.AddTile().ShowHeader(false).Content("#pivotGrid");
                isb.AddTile().ShowHeader(false).Content("#chartRegionSale");
                isb.AddTile().ShowHeader(false).Content("#chartOpportunities");
            }))

        @Html.C1().DashboardLayout().Id("dashboard").CssStyle("height", "100%")
    </div>
    <div class="rangeSelector-container">
        @Html.Partial("RangeSelector", ViewBag.RangeSelectorModel as RangeSelectorModel)
    </div>
</div>
