using C1.Web.Mvc.Chart;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using WebApiExplorer.Models;
namespace WebApiExplorer.Controllers
{
public partial class MVCTreeMapController : Controller
{
private readonly ImageExportOptions _imageExportOptions = new ImageExportOptions
{
Exporter = "wijmo.chart.ImageExporter"
};
public ActionResult Index()
{
ViewBag.Options = _imageExportOptions;
ViewBag.DemoSettingsModel = new ClientSettingsModel
{
Settings = CreateSettings(),
DefaultValues = new Dictionary<string, object>
{
{"Type", "Squarified"},
{"MaxDepth", 2}
}
};
return View(ThingSale.GetDate());
}
private static IDictionary<string, object[]> CreateSettings()
{
var settings = new Dictionary<string, object[]>
{
{"Type", new object[]{"Squarified", "Horizontal", "Vertical"}},
{"MaxDepth", new object[]{ 0, 1, 2, 3, 4}},
};
return settings;
}
}
}
@model IEnumerable<ThingSale>
@{
ClientSettingsModel settings = ViewBag.DemoSettingsModel;
ImageExportOptions optionsModel = ViewBag.Options;
ViewBag.DemoSettings = true;
}
<style>
#breadCrumbs {
padding: 5px 10px;
margin-bottom: 20px;
list-style: none;
background-color: #ffffff;
border-radius: 4px;
}
#breadCrumbs > li {
display: inline-block;
}
#breadCrumbs > li + li:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}
#breadCrumbs > .active {
color: #999;
}
</style>
<script type="text/javascript">
var breadCrumbs = [];
var currentItem;
var treemap;
function onRendered() {
if (!treemap) {
treemap = wijmo.Control.getControl('#@settings.ControlId');
}
if (treemap) {
if (currentItem === treemap._currentItem) {
return;
}
currentItem = treemap._currentItem;
createBreadCrumbs();
}
}
function rollUp(num) {
//rollup treemap *num times.
for (var i = 0; i < num; i++) {
treemap._rollUp();
}
}
function createBreadCrumbs() {
breadCrumbs = [];
resetBreadCrumbs(currentItem);
breadCrumbs.reverse();
appendBreadCrumbs();
}
function appendBreadCrumbs() {
var ol = document.querySelector('#breadCrumbs');
ol.innerHTML = '';
var len = breadCrumbs.length;
breadCrumbs.forEach(function (label, idx) {
ol.appendChild(apendBreadCrumb(label, idx !== len - 1, len - idx - 1));
});
}
function apendBreadCrumb(label, isAnchor, param) {
var li = document.createElement('li');
if (isAnchor) {
li.className = 'breakcrumb-item';
var a = document.createElement('a');
a.href = 'javascript:void(0)';
a.innerHTML = label;
a.addEventListener('click', function (evt) {
rollUp(param);
});
li.appendChild(a);
} else {
li.className = 'breakcrumb-item active';
li.innerHTML = label;
}
return li;
}
function resetBreadCrumbs(item) {
if (item) {
breadCrumbs.push(item.label);
resetBreadCrumbs(item.parent);
} else {
breadCrumbs.push('Root');
}
}
</script>
<ol id="breadCrumbs"></ol>
@(Html.C1().TreeMap().Id(settings.ControlId)
.Binding("Sales")
.BindingName("Category")
.ChildItemsPath("Items")
.Bind(Model)
.MaxDepth((int)settings.DefaultValues["MaxDepth"])
.DataLabel(dlb => dlb.Position(C1.Web.Mvc.Chart.LabelPosition.Center).Content("{name}"))
.OnClientRendered("onRendered"))
@section Settings{
@Html.Partial("_ImageExportOptions", optionsModel)
}
@section Description{
@Html.Raw(Resources.MVCTreeMap.Index_Text0)
}