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 Wijmo5TreeMapController : 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();
 }

 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;
 }
 }
}

@{
 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>

<ol id="breadCrumbs"></ol>
<div id="@(optionsModel.ControlId)" ></div>
@section Settings{
 @Html.Partial("_ImageExportOptions", optionsModel)
}

<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>

<script>
 // create controls
 var chart = new wijmo.chart.hierarchical.TreeMap('#@(optionsModel.ControlId)');

 // initialize TreeMap's properties
 chart.beginUpdate();
 chart.maxDepth = 2;
 chart.binding = 'sales';
 chart.bindingName = 'type';
 chart.childItemsPath = 'items';
 chart.itemsSource = getMaxDepthData();
 chart.dataLabel.position = wijmo.chart.LabelPosition.Center;
 chart.dataLabel.content = '{name}';
 chart.rendered.addHandler(onRendered);
 chart.endUpdate();

 function rand() {
 return Math.round(Math.random() * 100)
 };

 function getMaxDepthData() {
 var data = [{
 type: 'Music',
 items: [{
 type: 'Country',
 items: [{
 type: 'Classic Country',
 sales: rand()
 }, {
 type: 'Cowboy Country',
 sales: rand()
 }, {
 type: 'Outlaw Country',
 sales: rand()
 }, {
 type: 'Western Swing',
 sales: rand()
 }, {
 type: 'Roadhouse Country',
 sales: rand()
 }]
 }, {
 type: 'Rock',
 items: [{
 type: 'Hard Rock',
 sales: rand()
 }, {
 type: 'Blues Rock',
 sales: rand()
 }, {
 type: 'Funk Rock',
 sales: rand()
 }, {
 type: 'Rap Rock',
 sales: rand()
 }, {
 type: 'Guitar Rock',
 sales: rand()
 }, {
 type: 'Progressive Rock',
 sales: rand()
 }]
 }, {
 type: 'Classical',
 items: [{
 type: 'Symphonies',
 sales: rand()
 }, {
 type: 'Chamber Music',
 sales: rand()
 }]
 }, {
 type: 'Soundtracks',
 items: [{
 type: 'Movie Soundtracks',
 sales: rand()
 }, {
 type: 'Musical Soundtracks',
 sales: rand()
 }]
 }, {
 type: 'Jazz',
 items: [{
 type: 'Smooth Jazz',
 sales: rand()
 }, {
 type: 'Vocal Jazz',
 sales: rand()
 }, {
 type: 'Jazz Fusion',
 sales: rand()
 }, {
 type: 'Swing Jazz',
 sales: rand()
 }, {
 type: 'Cool Jazz',
 sales: rand()
 }, {
 type: 'Traditional Jazz',
 sales: rand()
 }]
 }, {
 type: 'Electronic',
 items: [{
 type: 'Electronica',
 sales: rand()
 }, {
 type: 'Disco',
 sales: rand()
 }, {
 type: 'House',
 sales: rand()
 }]
 }]
 }, {
 type: 'Video',
 items: [{
 type: 'Movie',
 items: [{
 type: 'Kid & Family',
 sales: rand()
 }, {
 type: 'Action & Adventure',
 sales: rand()
 }, {
 type: 'Animation',
 sales: rand()
 }, {
 type: 'Comedy',
 sales: rand()
 }, {
 type: 'Drama',
 sales: rand()
 }, {
 type: 'Romance',
 sales: rand()
 }]
 }, {
 type: 'TV',
 items: [{
 type: 'Science Fiction',
 sales: rand()
 }, {
 type: 'Documentary',
 sales: rand()
 }, {
 type: 'Fantasy',
 sales: rand()
 }, {
 type: 'Military & War',
 sales: rand()
 }, {
 type: 'Horror',
 sales: rand()
 }]
 }]
 }, {
 type: 'Books',
 items: [{
 type: 'Arts & Photography',
 items: [{
 type: 'Architecture',
 sales: rand()
 }, {
 type: 'Graphic Design',
 sales: rand()
 }, {
 type: 'Drawing',
 sales: rand()
 }, {
 type: 'Photography',
 sales: rand()
 }, {
 type: 'Performing Arts',
 sales: rand()
 }]
 }, {
 type: "Children's Books",
 items: [{
 type: 'Beginning Readers',
 sales: rand()
 }, {
 type: 'Board Books',
 sales: rand()
 }, {
 type: 'Chapter Books',
 sales: rand()
 }, {
 type: 'Coloring Books',
 sales: rand()
 }, {
 type: 'Picture Books',
 sales: rand()
 }, {
 type: 'Sound Books',
 sales: rand()
 }]
 }, {
 type: 'History',
 items: [{
 type: 'Ancient',
 sales: rand()
 }, {
 type: 'Medieval',
 sales: rand()
 }, {
 type: 'Renaissance',
 sales: rand()
 }]
 }, {
 type: 'Mystery',
 items: [{
 type: 'Mystery',
 sales: rand()
 }, {
 type: 'Thriller & Suspense',
 sales: rand()
 }]
 }, {
 type: 'Romance',
 items: [{
 type: 'Action & Adventure',
 sales: rand()
 }, {
 type: 'Holidays',
 sales: rand()
 }, {
 type: 'Romantic Comedy',
 sales: rand()
 }, {
 type: 'Romantic Suspense',
 sales: rand()
 }, {
 type: 'Western',
 sales: rand()
 }, {
 type: 'Historical',
 sales: rand()
 }]
 }, {
 type: 'Sci-Fi & Fantasy',
 items: [{
 type: 'Fantasy',
 sales: rand()
 }, {
 type: 'Gaming',
 sales: rand()
 }, {
 type: 'Science Fiction',
 sales: rand()
 }]
 }]
 }, {
 type: 'Electronics',
 items: [{
 type: 'Camera',
 items: [{
 type: 'Digital Cameras',
 sales: rand()
 }, {
 type: 'Film Photography',
 sales: rand()
 }, {
 type: 'Lenses',
 sales: rand()
 }, {
 type: 'Video',
 sales: rand()
 }, {
 type: 'Accessories',
 sales: rand()
 }]
 }, {
 type: 'Headphones',
 items: [{
 type: 'Earbud headphones',
 sales: rand()
 }, {
 type: 'Over-ear headphones',
 sales: rand()
 }, {
 type: 'On-ear headphones',
 sales: rand()
 }, {
 type: 'Bluetooth headphones',
 sales: rand()
 }, {
 type: 'Noise-cancelling headphones',
 sales: rand()
 }, {
 type: 'Audiophile headphones',
 sales: rand()
 }]
 }, {
 type: 'Cell Phones',
 items: [{
 type: 'Cell Phones',
 sales: rand()
 }, {
 type: 'Accessories',
 items: [{
 type: 'Batteries',
 sales: rand()
 }, {
 type: 'Bluetooth Headsets',
 sales: rand()
 }, {
 type: 'Bluetooth Speakers',
 sales: rand()
 }, {
 type: 'Chargers',
 sales: rand()
 }, {
 type: 'Screen Protectors',
 sales: rand()
 }]
 }]
 }, {
 type: 'Wearable Technology',
 items: [{
 type: 'Activity Trackers',
 sales: rand()
 }, {
 type: 'Smart Watches',
 sales: rand()
 }, {
 type: 'Sports & GPS Watches',
 sales: rand()
 }, {
 type: 'Virtual Reality Headsets',
 sales: rand()
 }, {
 type: 'Wearable Cameras',
 sales: rand()
 }, {
 type: 'Smart Glasses',
 sales: rand()
 }]
 }]
 }, {
 type: 'Computers & Tablets',
 items: [{
 type: 'Desktops',
 items: [{
 type: 'All-in-ones',
 sales: rand()
 }, {
 type: 'Minis',
 sales: rand()
 }, {
 type: 'Towers',
 sales: rand()
 }]
 }, {
 type: 'Laptops',
 items: [{
 type: '2 in 1 laptops',
 sales: rand()
 }, {
 type: 'Traditional laptops',
 sales: rand()
 }]
 }, {
 type: 'Tablets',
 items: [{
 type: 'iOS',
 sales: rand()
 }, {
 type: 'Andriod',
 sales: rand()
 }, {
 type: 'Fire os',
 sales: rand()
 }, {
 type: 'Windows',
 sales: rand()
 }]
 }]
 }];
 return data;
 }
</script>

@section Description{
 @Html.Raw(Resources.Wijmo5TreeMap.Index_Text0)
}