From d975b31b752491828c27d45ad8686ff036866e5e Mon Sep 17 00:00:00 2001
From: Nils Kruthoff <nils.kruthoff@dlr.de>
Date: Tue, 4 Aug 2026 14:52:22 +0200
Subject: [PATCH] added a component that renders the parsed JSON chart into an
 MudBlazor Chart

---
 app/MindWork AI Studio/Chat/ChartBlock.razor  | 44 +++++++++++++++++++
 .../Chat/ChartBlock.razor.cs                  | 26 +++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 app/MindWork AI Studio/Chat/ChartBlock.razor
 create mode 100644 app/MindWork AI Studio/Chat/ChartBlock.razor.cs

diff --git a/app/MindWork AI Studio/Chat/ChartBlock.razor b/app/MindWork AI Studio/Chat/ChartBlock.razor
new file mode 100644
index 00000000..d28f4af1
--- /dev/null
+++ b/app/MindWork AI Studio/Chat/ChartBlock.razor	
@@ -0,0 +1,44 @@
+@namespace AIStudio.Chat
+@using MudBlazor
+@inherits AIStudio.Components.MSGComponentBase
+
+@if (this.Result.Chart is { } chart)
+{
+    <MudPaper Class="pa-4 my-3" Outlined="false" Elevation="4">
+        <MudText Typo="Typo.h6" Class="mb-3">@chart.Title</MudText>
+        @if (chart.Type is ChartDefinitionType.PIE or ChartDefinitionType.DONUT)
+        {
+            <div class="d-flex justify-center">
+                <MudChart ChartType="@this.ChartType"
+                          InputData="@chart.Series[0].Values.ToArray()"
+                          InputLabels="@chart.Categories.ToArray()"
+                          Width="50%"
+                          Height="200px" />
+            </div>
+        }
+        else
+        {
+            <div class="d-flex justify-center">
+                <MudChart ChartType="@this.ChartType"
+                          ChartSeries="@this.ChartSeries"
+                          XAxisLabels="@chart.Categories.ToArray()"
+                          AxisChartOptions="@this.AxisChartOptions"
+                          Width="75%"
+                          Height="350px" />
+            </div>
+        }
+        @if (chart.Caption is not null)
+        {
+            <MudText Typo="Typo.caption" Align="Align.Center" Class="d-block">
+                <em>@chart.Caption</em>
+            </MudText>
+        }
+    </MudPaper>
+}
+else
+{
+    <MudAlert Severity="Severity.Warning" Variant="Variant.Outlined" Class="my-3">
+        @string.Format(T("This chart cannot be displayed: {0}"), this.Result.Error)
+    </MudAlert>
+    <pre class="overflow-auto"><code>@this.Result.RawJson</code></pre>
+}
diff --git a/app/MindWork AI Studio/Chat/ChartBlock.razor.cs b/app/MindWork AI Studio/Chat/ChartBlock.razor.cs
new file mode 100644
index 00000000..3dc47153
--- /dev/null
+++ b/app/MindWork AI Studio/Chat/ChartBlock.razor.cs	
@@ -0,0 +1,26 @@
+using AIStudio.Components;
+using Microsoft.AspNetCore.Components;
+
+namespace AIStudio.Chat;
+
+public partial class ChartBlock : MSGComponentBase
+{
+    private AxisChartOptions AxisChartOptions { get; } = new() { MatchBoundsToSize = true };
+
+    [Parameter]
+    public ChartBlockParseResult Result { get; set; } = ChartBlockParseResult.Invalid(string.Empty, string.Empty);
+
+    private ChartType ChartType => this.Result.Chart?.Type switch
+    {
+        ChartDefinitionType.BAR => ChartType.Bar,
+        ChartDefinitionType.STACKED_BAR => ChartType.StackedBar,
+        ChartDefinitionType.LINE => ChartType.Line,
+        ChartDefinitionType.PIE => ChartType.Pie,
+        ChartDefinitionType.DONUT => ChartType.Donut,
+        _ => ChartType.Bar,
+    };
+
+    private List<ChartSeries> ChartSeries => this.Result.Chart?.Series
+        .Select(series => new ChartSeries { Name = series.Name, Data = series.Values.ToArray() })
+        .ToList() ?? [];
+}