/// <reference path="JsChart-vsdoc.js" />

var Charting = MindFusion.Charting;

var Controls = Charting.Controls;

var Collections = MindFusion.Common.Collections;

var Drawing = MindFusion.Drawing;

// 1. Dynamic Data Generation

var currentYear = new Date().getFullYear();

var years = [];

for (var i = 0; i < 4; i++) {

years.push((currentYear - i).toString());

}

// Map the generated years to the UI labels

years.forEach(function (year, index) {

var labelEl = document.getElementById('label' + index);

if (labelEl) {

// Keep the checkbox input but update the text node

var checkbox = labelEl.querySelector('input');

labelEl.innerHTML = '';

labelEl.appendChild(checkbox);

labelEl.appendChild(document.createTextNode(' ' + year));

}

});

// Create randomized but logical values for market share

var baseValues = [40, 30, 20, 10];

var values = new Collections.List();

baseValues.forEach(v => values.add(v));

// 2. Create the chart

var pieChartEl = document.getElementById('pieChart');

pieChartEl.width = pieChartEl.offsetParent.clientWidth;

pieChartEl.height = pieChartEl.offsetParent.clientHeight;

var pieChart = new Controls.PieChart(pieChartEl);

pieChart.startAngle = 45;

pieChart.showLegend = false;

pieChart.chartPadding = 10;

// Set the series with dynamic year labels

pieChart.series = new Charting.PieSeries(

values,

new Collections.List(["40%", "30%", "20%", "10%"]),

new Collections.List(years));

// 3. Modern Theme Styling

var brushes = new Collections.List([

new Drawing.Brush("#0EA5E9"), // Sky Blue

new Drawing.Brush("#6366F1"), // Indigo

new Drawing.Brush("#10B981"), // Emerald

new Drawing.Brush("#64748B") // Slate

]);

var seriesBrushes = new Collections.List();

seriesBrushes.add(brushes);

var strokes = new Collections.List([new Drawing.Brush("#ffffff")]);

var seriesStrokes = new Collections.List();

seriesStrokes.add(strokes);

pieChart.plot.seriesStyle = new Charting.PerElementSeriesStyle(seriesBrushes, seriesStrokes);

pieChart.theme.highlightStroke = new Drawing.Brush("#455a64");

pieChart.theme.dataLabelsFontSize = 14;

pieChart.theme.dataLabelsBrush = new Drawing.Brush("#000000");

pieChart.draw();

// 4. Handlers

document.getElementById('chartPadding').addEventListener("input", function () {

pieChart.chartPadding = parseFloat(this.value);

pieChart.draw();

});

var slice0 = document.getElementById('slice0');

slice0.checked = pieChart.detachedSlices.contains(+slice0.value);

slice0.addEventListener("change", function () { sliceChanged(slice0); });

var slice1 = document.getElementById('slice1');

slice1.checked = pieChart.detachedSlices.contains(+slice1.value);

slice1.addEventListener("change", function () { sliceChanged(slice1); });

var slice2 = document.getElementById('slice2');

slice2.checked = pieChart.detachedSlices.contains(+slice2.value);

slice2.addEventListener("change", function () { sliceChanged(slice2); });

var slice3 = document.getElementById('slice3');

slice3.checked = pieChart.detachedSlices.contains(+slice3.value);

slice3.addEventListener("change", function () { sliceChanged(slice3); });

function sliceChanged(control) {

var slices = pieChart.detachedSlices;

if (control.checked) {

if (!slices.contains(+control.value))

slices.add(+control.value);

}

if (!control.checked) {

slices.remove(+control.value);

}

pieChart.detachedSlices = slices;

pieChart.draw();

}

[0, 1, 2, 3].forEach(id => {

document.getElementById('slice' + id).addEventListener("change", () => sliceChanged(id));

});

document.getElementById('startAngle').addEventListener("input", function () {

pieChart.startAngle = parseFloat(this.value);

pieChart.draw();

});

document.getElementById('doughnut').addEventListener("change", function () {

pieChart.doughnut = this.checked;

pieChart.draw();

});

document.getElementById('allowRotate').addEventListener("change", function () {

pieChart.allowRotate = this.checked;

pieChart.draw();

});

document.getElementById('showDataLabels').addEventListener("change", function () {

pieChart.showDataLabels = this.checked ? Charting.LabelKinds.All : Charting.LabelKinds.None;

pieChart.draw();

});