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

var Charting = MindFusion.Charting;

var Gauges = MindFusion.Gauges;

var Controls = MindFusion.Charting.Controls;

var Components = MindFusion.Charting.Components;

var Collections = MindFusion.Common.Collections;

var Drawing = MindFusion.Drawing;

// create the dashboard JS object

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

if (element.offsetParent) {

element.width = element.offsetParent.clientWidth;

element.height = element.offsetParent.clientHeight;

}

var dashboard = new Controls.ChartBase(element);

var builder = new Controls.LayoutBuilder(dashboard);

// Global Theme Settings

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

// define and style the title

var titleLabel = new Components.TextComponent();

titleLabel.horizontalAlignment = Components.LayoutAlignment.Center;

titleLabel.text = "GLOBAL AI INFRASTRUCTURE HEALTH";

titleLabel.font = new Drawing.Font("Inter", 18, Drawing.FontStyle.Bold);

titleLabel.textBrush = new Drawing.Brush("#263238");

dashboard.layoutPanel.children.add(titleLabel);

var nameStack = new Components.StackPanel();

nameStack.orientation = Components.Orientation.Horizontal;

nameStack.horizontalAlignment = Components.LayoutAlignment.Center;

nameStack.margin = new Charting.Margins(0, 0, 0, 10);

dashboard.layoutPanel.children.add(nameStack);

addToStack(nameStack, "OPENAI", new Drawing.Brush("#26a69a"));

addToStack(nameStack, " vs ", new Drawing.Brush("#546e7a"));

addToStack(nameStack, "ANTHROPIC", new Drawing.Brush("#3f51b5"));

addToStack(nameStack, " vs ", new Drawing.Brush("#546e7a"));

addToStack(nameStack, "META AI", new Drawing.Brush("#ffa000"));

// define the plot for the line chart

var linePlot = new Charting.Plot2D();

linePlot.gridType = Charting.GridType.Horizontal;

linePlot.gridColor1 = new Drawing.Color("#f5f5f5");

var lineYAxis = new Charting.Axis();

lineYAxis.title = "Tokens (B)";

var lineXAxis = new Charting.Axis();

lineXAxis.title = "";

function generateTokenData(trend) {

var vals = new Collections.List();

var curr = 10;

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

curr += Math.random() * trend;

vals.add(curr);

}

return vals;

}

var xLine = new Collections.List();

for (var i = 0; i < 36; i++) xLine.add(i);

var l1 = new Charting.Series2D(xLine, generateTokenData(5), null); l1.title = "OpenAI";

var l2 = new Charting.Series2D(xLine, generateTokenData(4), null); l2.title = "Anthropic";

var l3 = new Charting.Series2D(xLine, generateTokenData(6), null); l3.title = "Meta AI";

var lineRenderer = new Charting.LineRenderer(new Collections.ObservableCollection([l1, l2, l3]));

var lineStyle = new Charting.MixedSeriesStyle();

lineStyle.commonFills = lineStyle.commonStrokes = new Collections.List([

new Drawing.Brush("#26a69a"),

new Drawing.Brush("#3f51b5"),

new Drawing.Brush("#ffa000")

]);

lineStyle.uniformStrokeThickness = 3;

lineRenderer.seriesStyle = lineStyle;

linePlot.seriesRenderers.add(lineRenderer);

linePlot.yAxis = lineYAxis;

linePlot.xAxis = lineXAxis;

var linePlotXRenderer = new Charting.XAxisRenderer(lineXAxis);

var linePlotYRenderer = new Charting.YAxisRenderer(lineYAxis);

linePlotXRenderer.labelsSource = linePlot;

linePlotYRenderer.labelsSource = linePlot;

// add the line chart plot to the main panel

var linePanel = builder.createAndAddPlotWithBottomAndLeftAxes(

linePlot,

linePlotXRenderer,

linePlotYRenderer

);

// create the plot for the bar chart

var barPlot = new Charting.Plot2D();

barPlot.gridType = Charting.GridType.Horizontal;

barPlot.gridColor1 = new Drawing.Color("#f5f5f5");

var barYAxis = new Charting.Axis();

barYAxis.title = "Latency (ms)";

barYAxis.minValue = 0;

barYAxis.maxValue = 300;

var barXAxis = new Charting.Axis();

barXAxis.title = "Time of Day";

var labels = new Collections.List();

for (var i = 0; i < 24; i++) labels.add((i % 12 || 12) + (i < 12 ? " AM" : " PM"));

function generateLatencyData(base) {

var vals = new Collections.List();

for (var i = 0; i < 24; i++) vals.add(base + Math.random() * 50);

return vals;

}

var s1 = new Charting.BarSeries(generateLatencyData(120), labels);

s1.title = "OpenAI";

s1.supportedLabels = Charting.LabelKinds.XAxisLabel;

var s2 = new Charting.BarSeries(generateLatencyData(150), null);

s2.title = "Anthropic";

var s3 = new Charting.BarSeries(generateLatencyData(180), null);

s3.title = "Meta AI";

var barRenderer = new Charting.BarRenderer(new Collections.ObservableCollection([s1, s2, s3]));

barRenderer.seriesStyle = new Charting.PerSeriesStyle(

new Collections.List([new Drawing.Brush("#26a69a"), new Drawing.Brush("#3f51b5"), new Drawing.Brush("#ffa000")]),

new Collections.List([new Drawing.Brush("#ffffff"), new Drawing.Brush("#ffffff"), new Drawing.Brush("#ffffff")]),

new Collections.List([1, 1, 1])

);

barPlot.seriesRenderers.add(barRenderer);

barPlot.yAxis = barYAxis;

barPlot.xAxis = barXAxis;

var barPlotXAxisRenderer = new Charting.XAxisRenderer(barXAxis);

var barPlotYAxisRenderer = new Charting.YAxisRenderer(barYAxis);

barPlotXAxisRenderer.labelsSource = barPlot;

barPlotXAxisRenderer.showCoordinates = false;

// setup for the gauge

var ovalGauge = new MindFusion.Charting.Gauges.OvalGaugeRenderer(element);

ovalGauge.background = new Drawing.Brush("#ffffff");

var scale = ovalGauge.gauge.scales[0];

scale.minValue = 0;

scale.maxValue = 100;

scale.startAngle = 135;

scale.endAngle = 405;

var loadPointer = new Gauges.Pointer();

loadPointer.value = 72;

loadPointer.fill = "#F97316";

scale.addPointer(loadPointer);

// bottom grid: bar chart and gauge

var pnlGrid = new Components.GridPanel();

// define 2 columns and 2 rows

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

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

pnlGrid.rows.add(new Components.GridRow());

pnlGrid.rows.add(new Components.GridRow());

pnlGrid.columns.items()[0].lengthType = Components.LengthType.Relative;

pnlGrid.columns.items()[1].lengthType = Components.LengthType.Relative;

var barPlotWithAxes = builder.createPlotWithBottomAndLeftAxes(

barPlot,

barPlotXAxisRenderer,

barPlotYAxisRenderer

);

var barText = new Components.TextComponent();

barText.gridRow = 0;

barText.gridColumn = 0;

barText.text = "Model Latency Breakdown";

barText.horizontalAlignment = Components.LayoutAlignment.Center;

barText.font = new Drawing.Font("Inter", 12, Drawing.FontStyle.Bold);

var gaugeTitle = new Components.TextComponent();

gaugeTitle.gridRow = 0;

gaugeTitle.gridColumn = 1;

gaugeTitle.text = "Cluster Load %";

gaugeTitle.horizontalAlignment = Components.LayoutAlignment.Center;

gaugeTitle.font = new Drawing.Font("Inter", 12, Drawing.FontStyle.Bold);

barPlotWithAxes.gridRow = 1;

barPlotWithAxes.gridColumn = 0;

ovalGauge.gridRow = 1;

ovalGauge.gridColumn = 1;

pnlGrid.children.add(barText);

pnlGrid.children.add(gaugeTitle);

pnlGrid.children.add(barPlotWithAxes);

pnlGrid.children.add(ovalGauge);

// create the legends

var legendLine = new Charting.LegendRenderer();

legendLine.content = new Collections.ObservableCollection([lineRenderer]);

legendLine.background = new Drawing.Brush("#ffffff");

legendLine.borderStroke = new Drawing.Brush("#eeeeee");

legendLine.horizontalAlignment = Components.LayoutAlignment.Far;

var legendBar = new Charting.LegendRenderer();

legendBar.content = new Collections.ObservableCollection([barRenderer]);

legendBar.background = new Drawing.Brush("#ffffff");

legendBar.borderStroke = new Drawing.Brush("#eeeeee");

legendBar.horizontalAlignment = Components.LayoutAlignment.Near;

legendBar.verticalAlignment = Components.LayoutAlignment.Center;

dashboard.rootPanel.children.add(legendLine);

dashboard.rootPanel.children.add(legendBar);

dashboard.layoutPanel.children.add(pnlGrid);

// always call the draw method

dashboard.draw();

// auxiliary method

function addToStack(stack, text, brush) {

var component = new Components.TextComponent();

component.text = text;

if (brush) component.textBrush = brush;

component.font = new Drawing.Font("Inter", 14, Drawing.FontStyle.Bold);

stack.children.add(component);

return component;

}