From cfe117a62ad1a210667be92ac51ba1e551f88672 Mon Sep 17 00:00:00 2001
From: krut_ni <nils.kruthoff@dlr.de>
Date: Tue, 4 Aug 2026 19:26:49 +0200
Subject: [PATCH] applied styles to the ChartBlock.razor

---
 app/MindWork AI Studio/Chat/ChartBlock.razor  | 64 ++++++++++---------
 .../Chat/ChartBlock.razor.cs                  |  9 +++
 2 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/app/MindWork AI Studio/Chat/ChartBlock.razor b/app/MindWork AI Studio/Chat/ChartBlock.razor
index d28f4af1..48811bf8 100644
--- a/app/MindWork AI Studio/Chat/ChartBlock.razor	
+++ b/app/MindWork AI Studio/Chat/ChartBlock.razor	
@@ -4,36 +4,40 @@
 
 @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>
+    <div class="chart-block-shell my-3">
+        <MudPaper Class="chart-block" Outlined="true">
+            <MudText Typo="Typo.h6" Class="chart-block-title">@chart.Title</MudText>
+            @if (chart.Type is ChartDefinitionType.PIE or ChartDefinitionType.DONUT)
+            {
+                <div class="chart-block-plot chart-block-plot-circular">
+                    <MudChart ChartType="@this.ChartType"
+                              InputData="@chart.Series[0].Values.ToArray()"
+                              InputLabels="@chart.Categories.ToArray()"
+                              ChartOptions="@this.ChartOptions"
+                              Width="100%"
+                              Height="200px" />
+                </div>
+            }
+            else
+            {
+                <div class="chart-block-plot chart-block-plot-axis">
+                    <MudChart ChartType="@this.ChartType"
+                              ChartSeries="@this.ChartSeries"
+                              XAxisLabels="@chart.Categories.ToArray()"
+                              ChartOptions="@this.ChartOptions"
+                              AxisChartOptions="@this.AxisChartOptions"
+                              Width="100%"
+                              Height="350px" />
+                </div>
+            }
+            @if (chart.Caption is not null)
+            {
+                <MudText Typo="Typo.caption" Align="Align.Center" Class="chart-block-caption d-block">
+                    <em>@chart.Caption</em>
+                </MudText>
+            }
+        </MudPaper>
+    </div>
 }
 else
 {
diff --git a/app/MindWork AI Studio/Chat/ChartBlock.razor.cs b/app/MindWork AI Studio/Chat/ChartBlock.razor.cs
index 3dc47153..5d627aec 100644
--- a/app/MindWork AI Studio/Chat/ChartBlock.razor.cs	
+++ b/app/MindWork AI Studio/Chat/ChartBlock.razor.cs	
@@ -7,6 +7,15 @@ public partial class ChartBlock : MSGComponentBase
 {
     private AxisChartOptions AxisChartOptions { get; } = new() { MatchBoundsToSize = true };
 
+    private ChartOptions ChartOptions { get; } = new()
+    {
+        ChartPalette =
+        [
+            "#236A50", "#F2D264", "#79AE90", "#C97857", "#4E7894", "#9B6B8F",
+            "#6A233D", "#6484F2", "#AE7997", "#57A8C9", "#946A4E", "#6B9B77",
+        ],
+    };
+
     [Parameter]
     public ChartBlockParseResult Result { get; set; } = ChartBlockParseResult.Invalid(string.Empty, string.Empty);