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

var Charting = MindFusion.Charting;

var Controls = Charting.Controls;

var Collections = MindFusion.Common.Collections;

var Drawing = MindFusion.Drawing;

var Components = Charting.Components;

// create the dashboard

var dashboardEl = document.getElementById('dashboard');

dashboardEl.width = dashboardEl.offsetParent.clientWidth;

dashboardEl.height = dashboardEl.offsetParent.clientHeight;

var dashboard = new Controls.ChartBase(dashboardEl);

dashboard.allowZoom = false;

dashboard.theme.plotBackground = new Drawing.Brush("#FFFFFF");

dashboard.theme.gridLineColor = new Drawing.Color("#F1F5F9");

dashboard.theme.commonSeriesFills = getFills();

dashboard.theme.commonSeriesStrokes = getStrokes();

var mainGrid = new Components.GridPanel();

mainGrid.horizontalAlignment = Components.LayoutAlignment.Stretch;

mainGrid.verticalAlignment = Components.LayoutAlignment.Stretch;

mainGrid.columns.add(new Components.GridColumn());

dashboard.rootPanel.children.add(mainGrid);

// create plots grid

var plotGrid = new Components.GridPanel();

plotGrid.gridColumn = 1;

plotGrid.gridRow = 0;

plotGrid.columns.add(new Components.GridColumn());

plotGrid.columns.add(new Components.GridColumn());

mainGrid.children.add(plotGrid);

// add plot1

var plot1 = new Charting.Plot2D();

plot1.gridColumn = 0;

plot1.verticalScroll = false;

plot1.allowPan = false;

plot1.highlightStroke = new Drawing.Brush("#000063");

plot1.highlightStrokeThickness = 1;

var lineRenderer = new Charting.StepAreaRenderer(getSeriesCollection());

plot1.seriesRenderers.add(lineRenderer);

plotGrid.children.add(plot1);

// add plot2

var plot2 = new Charting.Plot2D();

plot2.gridColumn = 1;

plot2.allowPan = false;

plot2.verticalScroll = false;

plot2.highlightStroke = new Drawing.Brush("#000063");

plot2.highlightStrokeThickness = 1;

var barRenderer = new Charting.BarRenderer(getSeriesCollection());

plot2.seriesRenderers.add(barRenderer);

plotGrid.children.add(plot2);

// add plot3

var plot3 = new Charting.Plot2D();

plot3.allowPan = false;

plot3.gridColumn = 2;

plot3.verticalScroll = false;

plot3.highlightStroke = new Drawing.Brush("#000063");

plot1.highlightStrokeThickness = 1;

var scatterRenderer = new Charting.ScatterRenderer(getSeriesCollection());

// Increase scatter/bubble shape size (default is 6)

scatterRenderer.shapeSize = 18;

// Optional: Explicitly specify shape type (Circle, Rectangle, Triangle, Star)

scatterRenderer.shape = Charting.ScatterType.Triangle;

plot3.seriesRenderers.add(scatterRenderer);

plotGrid.children.add(plot3);

// add axis

var xa = new Charting.Axis();

xa.title = "Months";

var ya = new Charting.Axis();

ya.minValue = 0;

ya.maxValue = 100000;

ya.interval = 5000;

ya.title = "Revenues";

ya.numberFormat = new Intl.NumberFormat("en-GB", {

style: "currency",

currency: "GBP",

minimumFractionDigits: 0,

maximumFractionDigits: 0

});

var yAxis = new Charting.YAxisRenderer(ya, xa);

yAxis.gridColumn = 0;

yAxis.plotLeftSide = true;

yAxis.labelsSource = plot1;

yAxis.axisStroke = new Drawing.Brush("#CBD5E1");

yAxis.axisStrokeThickness = 1;

yAxis.titleBrush = new Drawing.Brush("#334155");

yAxis.titleFontSize = 14;

yAxis.titleFontStyle = Drawing.FontStyle.Bold;

yAxis.labelBrush = new Drawing.Brush("#64748B");

mainGrid.children.add(yAxis);

// attach plots to axis

plot1.xAxis = plot2.xAxis = plot3.xAxis = xa;

plot1.yAxis = plot2.yAxis = plot3.yAxis = ya;

const highlightBrush = new Drawing.Brush("#0F172A");

plot1.highlightStroke = highlightBrush;

plot1.highlightStrokeThickness = 1.5;

plot2.highlightStroke = highlightBrush;

plot2.highlightStrokeThickness = 1.5;

plot3.highlightStroke = highlightBrush;

plot3.highlightStrokeThickness = 1.5;

function getSeriesCollection()

{

var collection = new Collections.ObservableCollection();

var s = null;

for (var i = 0; i < 3; i++)

{

if (i == 0)

{

s = new Charting.Series2D(

new Collections.List([0, 1, 2, 3]),

new Collections.List([25000, 50000, 40000, 55000]),

new Collections.List(["Jan", "Feb", "Mar", "Apr"]));

s.title = "Series 1";

collection.add(s);

}

if (i == 1)

{

s = new Charting.Series2D(

new Collections.List([0, 1, 2, 3]),

new Collections.List([30000, 70000, 65000, 15000]),

new Collections.List(["May", "Jun", "Jul", "Aug"]));

s.title = "Series 2";

collection.add(s);

}

if (i == 2)

{

s = new Charting.Series2D(

new Collections.List([0, 1, 2, 3]),

new Collections.List([27000, 45000, 35000, 65000]),

new Collections.List(["Sep", "Oct", "Nov", "Dec"]));

s.title = "Series 3";

collection.add(s);

}

}

return collection;

}

function getFills() {

var fills = new Collections.List();

fills.add(new Drawing.Brush(Drawing.Color.fromArgb(0.7, 14, 165, 233))); // Sky Blue

fills.add(new Drawing.Brush(Drawing.Color.fromArgb(0.7, 99, 102, 241))); // Indigo

fills.add(new Drawing.Brush(Drawing.Color.fromArgb(0.7, 20, 184, 166))); // Teal

return fills;

}

function getStrokes() {

var strokes = new Collections.List();

strokes.add(new Drawing.Brush("#0284C7"));

strokes.add(new Drawing.Brush("#4F46E5"));

strokes.add(new Drawing.Brush("#0D9488"));

return strokes;

}