DashboardLayout
DashboardLayout
自動グリッドレイアウト
このサンプルは、DashboardLayout コントロールで、自動グリッドレイアウトを適用する方法を示します。
機能
サンプル
売上:
経費:
利益:
説明
このサンプルは、DashboardLayout コントロールで、自動グリッドレイアウトを適用する方法を示します。
ソース
AutoGridLayoutController.cs
using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; using System.Collections.Generic; // For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860 namespace MvcExplorer.Controllers { partial class DashboardLayoutController : Controller { // GET: /<controller>/ public IActionResult AutoGridLayout() { var data = new ClientSettingsModel { Settings = CreateAutoGridLayoutSettings(), DefaultValues = new Dictionary<string, object> { {"Layout.CellSpacing", 6}, {"Layout.CellSize", 303}, {"Layout.GroupSpacing", 10} } }; data.LoadRequestData(Request); ViewBag.DemoSettingsModel = data; return View(new DashboardData()); } private static IDictionary<string, object[]> CreateAutoGridLayoutSettings() { var settings = new Dictionary<string, object[]> { {"AllowDrag", new object[]{true, false}}, {"AllowResize", new object[]{true, false}}, {"Layout.Orientation", new object[]{ "Vertical", "Horizontal"}}, {"Layout.MaxRowsOrColumns", new object[]{ 3, 4, 5, 6 }}, {"Layout.CellSize", new object[]{160, 200, 303, 400}}, {"Layout.CellSpacing", new object[]{ 0, 3, 6, 9}}, {"Layout.GroupSpacing", new object[]{ 0, 5, 10, 15}} }; return settings; } } }
AutoGridLayout.cshtml
@model DashboardData @{ ViewBag.DemoSettings = true; ViewBag.SettingsAtTop = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; } <style> .liContentChart.wj-flexchart { min-width: 240px; margin: 0px; padding: 4px; border: none; height: 240px; } </style> <c1-dashboard-layout id="@demoSettingsModel.ControlId"> <c1-auto-grid-layout orientation="Vertical" max-rows-or-columns="3" cell-size="303"> <c1-auto-grid-group> <c1-auto-grid-tile header-text="@(string.Format(DashboardLayoutRes.KPIs, Model.KPIsStr))" row-span="1" column-span="1"> <div id="kPIsSalesGaugeValue" style="display:inline-block;margin-bottom:8px;text-align:left;width:100%;">@DashboardLayoutRes.Share_Text1:</div> <c1-linear-gauge id="kPIsSalesGauge" min="0" max="@Model.KPIsData.Where(x=>x.Country=="All").Select(x=>x.Max).FirstOrDefault()" value="@Model.KPIsData.Where(x=>x.Country=="All").Select(x=>x.Sales).FirstOrDefault()" thumb-size="30" show-text="None" width="90%"> <c1-gauge-range c1-property="Pointer" color="Green"></c1-gauge-range> </c1-linear-gauge> <div id="kPIsExpensesGaugeValue" style="display:inline-block;margin:20px 0px 8px 0px;text-align:left;width:100%;"> @DashboardLayoutRes.Share_Text2: </div> <c1-linear-gauge id="kPIsExpensesGauge" min="0" max="@Model.KPIsData.Where(x=>x.Country=="All").Select(x=>x.Max).FirstOrDefault()" value="@Model.KPIsData.Where(x=>x.Country=="All").Select(x=>x.Expenses).FirstOrDefault()" thumb-size="30" show-text="None" width="90%"> <c1-gauge-range c1-property="Pointer" color="Red"></c1-gauge-range> </c1-linear-gauge> <div id="kPIsProfitGaugeValue" style="display:inline-block;margin: 20px 0px 8px 0px;text-align:left;width:100%;"> @DashboardLayoutRes.Share_Text3: </div> <c1-linear-gauge id="kPIsProfitGauge" min="0" max="@Model.KPIsData.Where(x=>x.Country=="All").Select(x=>x.Sales).FirstOrDefault()" value="@Model.KPIsData.Where(x=>x.Country=="All").Select(x=>x.Profit).FirstOrDefault()" thumb-size="30" show-text="None" width="90%"> <c1-gauge-range c1-property="Pointer" color="Gold"></c1-gauge-range> </c1-linear-gauge> </c1-auto-grid-tile> <c1-auto-grid-tile header-text="@(string.Format(DashboardLayoutRes.CostBudget, Model.CostBudgetingStr))" row-span="1" column-span="1"> <c1-flex-chart binding-x="Country" legend-position="Top" chart-type="Column" class="liContentChart"> <c1-items-source source-collection="@Model.CostBudgetingData"></c1-items-source> <c1-flex-chart-axis c1-property="AxisY" title="@DashboardLayoutRes.Share_Text6" format="g4,," log-base="10"></c1-flex-chart-axis> <c1-flex-chart-series name="@DashboardLayoutRes.Share_Text5" binding="Budget"></c1-flex-chart-series> <c1-flex-chart-series name="@DashboardLayoutRes.Share_Text2" binding="Expenses" chart-type="Line"></c1-flex-chart-series> <c1-flex-chart-tooltip content="<b>{seriesName}</b><br/>{x} {y:c0}"></c1-flex-chart-tooltip> <c1-annotation-layer> </c1-annotation-layer> </c1-flex-chart> </c1-auto-grid-tile> <c1-auto-grid-tile header-text="@(string.Format(DashboardLayoutRes.Countrywise, Model.CountrywiseSalesStr))" row-span="1" column-span="1"> <c1-flex-chart binding-x="Country" chart-type="Bar" legend-position="Top" class="liContentChart"> <c1-items-source source-collection="@Model.CountrywiseSalesData"></c1-items-source> <c1-flex-chart-axis c1-property="AxisX" format="g4,," title="@DashboardLayoutRes.Share_Text6"></c1-flex-chart-axis> <c1-flex-chart-series name="@DashboardLayoutRes.Share_Text1" binding="Sales"></c1-flex-chart-series> <c1-flex-chart-series name="@DashboardLayoutRes.Share_Text2" binding="Expenses"></c1-flex-chart-series> <c1-flex-chart-tooltip content="<b>{seriesName}</b><br/>{x} {y:c0}"></c1-flex-chart-tooltip> <c1-chart-animation animation-mode="All" easing="Swing" duration="400"></c1-chart-animation> </c1-flex-chart> </c1-auto-grid-tile> </c1-auto-grid-group> <c1-auto-grid-group> <c1-auto-grid-tile header-text="@(string.Format(DashboardLayoutRes.SalesDashboard, Model.SalesDashboardStr))" column-span="1" row-span="1"> <c1-flex-grid is-read-only="true" auto-generate-columns="false" selection-mode="Row" allow-resizing="None" headers-visibility="Column"> <c1-flex-grid-column header="@(DashboardLayoutRes.Share_Header1)" binding="Country" width="*"></c1-flex-grid-column> <c1-flex-grid-column header="@(DashboardLayoutRes.Share_Header2)" width="2*"> <c1-flex-grid-cell-template is-editing="false"> <c1-flex-chart height="20px" width="*" style="padding:0px;" legend-position="None" chart-type="Line" template-bindings="@(new {ItemsSource="Last12MonthsSales"})"> <c1-flex-chart-tooltip is-content-html="false" content=""></c1-flex-chart-tooltip> <c1-flex-chart-axis c1-property="AxisX" major-unit="100" axis-line="false" minor-grid="false" labels="false" position="None"></c1-flex-chart-axis> <c1-flex-chart-axis c1-property="AxisY" axis-line="false" minor-grid="false" labels="false" position="None"></c1-flex-chart-axis> <c1-flex-chart-series binding="Sales"></c1-flex-chart-series> </c1-flex-chart> </c1-flex-grid-cell-template> </c1-flex-grid-column> <c1-flex-grid-column header="@(DashboardLayoutRes.Share_Header3)" binding="Sales" format="c0" width="*"></c1-flex-grid-column> <c1-flex-grid-column header="@(DashboardLayoutRes.Share_Header4)" width="*"> <c1-flex-grid-cell-template is-editing="false"> <c1-bullet-graph direction="Right" show-ranges="true" thickness="0.5" min="0" template-bindings="@(new {Bad="BulletGBad",Target="BulletGTarget",Good= "BulletGGood",Max = "BulletGMax",Value = "BulletGValue" })"> </c1-bullet-graph> </c1-flex-grid-cell-template> </c1-flex-grid-column> <c1-items-source source-collection="@Model.SalesDashboardData"></c1-items-source> </c1-flex-grid> </c1-auto-grid-tile> </c1-auto-grid-group> </c1-auto-grid-layout> </c1-dashboard-layout> @section Summary{ @Html.Raw(DashboardLayoutRes.AutoGridLayout_Summary) } @section Description{ <p>@Html.Raw(DashboardLayoutRes.AutoGridLayout_Desc)</p> }
マニュアル