From 88b67652fff1ef3a8e218d122303761e837386f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcel=20Fr=C3=BCholz?=
 <78954450+Marcelfrueh@users.noreply.github.com>
Date: Tue, 17 Sep 2024 16:20:48 +0200
Subject: [PATCH] Add doughnut chart to pie chart (#3235)

---
 .../pie-chart-widget-config.component.html    | 72 ++++++++++++-------
 .../pie-chart-widget-config.component.ts      |  7 ++
 .../pie/model/pie-chart-widget.model.ts       |  1 +
 .../widgets/pie/pie-renderer.service.ts       |  2 +
 4 files changed, 57 insertions(+), 25 deletions(-)

diff --git a/ui/src/app/data-explorer/components/widgets/pie/config/pie-chart-widget-config.component.html b/ui/src/app/data-explorer/components/widgets/pie/config/pie-chart-widget-config.component.html
index fd1abc5775..a4f083aac8 100644
--- a/ui/src/app/data-explorer/components/widgets/pie/config/pie-chart-widget-config.component.html
+++ b/ui/src/app/data-explorer/components/widgets/pie/config/pie-chart-widget-config.component.html
@@ -38,33 +38,55 @@
                 ?.fieldCharacteristics.numeric
         "
     >
-        <div
-            fxFlex="100"
-            fxLayout="row"
-            fxLayoutAlign="start center"
-            fxLayoutGap="10px"
-        >
-            <small>Rounding</small>
-            <mat-form-field
-                appearance="outline"
-                class="marginColorField"
-                color="accent"
-                fxFlex
+        <div fxLayout="column" fxLayoutGap="10px">
+            <div
+                fxFlex="100"
+                fxLayout="row"
+                fxLayoutAlign="start center"
+                fxLayoutGap="10px"
             >
-                <mat-select
-                    [(value)]="
-                        currentlyConfiguredWidget.visualizationConfig
-                            .roundingValue
-                    "
-                    (selectionChange)="updateRoundingValue($event.value)"
+                <small>Rounding</small>
+                <mat-form-field
+                    appearance="outline"
+                    class="marginColorField"
+                    color="accent"
+                    fxFlex
                 >
-                    <mat-option [value]="100">100</mat-option>
-                    <mat-option [value]="10">10</mat-option>
-                    <mat-option [value]="1">1</mat-option>
-                    <mat-option [value]="0.1">0.1</mat-option>
-                    <mat-option [value]="0.01">0.01</mat-option>
-                </mat-select>
-            </mat-form-field>
+                    <mat-select
+                        [(value)]="
+                            currentlyConfiguredWidget.visualizationConfig
+                                .roundingValue
+                        "
+                        (selectionChange)="updateRoundingValue($event.value)"
+                    >
+                        <mat-option [value]="100">100</mat-option>
+                        <mat-option [value]="10">10</mat-option>
+                        <mat-option [value]="1">1</mat-option>
+                        <mat-option [value]="0.1">0.1</mat-option>
+                        <mat-option [value]="0.01">0.01</mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>
+            <div
+                fxFlex="100"
+                fxLayout="row"
+                fxLayoutAlign="start center"
+                fxLayoutGap="10px"
+            >
+                <small>Inner Radius</small>
+                <mat-slider min="0" max="80" step="1" fxFlex="65">
+                    <input
+                        matSliderThumb
+                        [(value)]="
+                            currentlyConfiguredWidget.visualizationConfig
+                                .selectedRadius
+                        "
+                        (input)="updateInnerRadius($event.value)"
+                        #slider
+                    />
+                </mat-slider>
+                <small>{{ slider.value }}% </small>
+            </div>
         </div>
     </sp-configuration-box>
 </sp-visualization-config-outer>
diff --git a/ui/src/app/data-explorer/components/widgets/pie/config/pie-chart-widget-config.component.ts b/ui/src/app/data-explorer/components/widgets/pie/config/pie-chart-widget-config.component.ts
index 39d2909449..e93dd8541d 100644
--- a/ui/src/app/data-explorer/components/widgets/pie/config/pie-chart-widget-config.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/pie/config/pie-chart-widget-config.component.ts
@@ -45,6 +45,7 @@ export class SpPieChartWidgetConfigComponent extends BaseWidgetConfig<
             () => this.fieldProvider.allFields[0],
         );
         config.roundingValue ??= 0.1;
+        config.selectedRadius ??= 0;
     }
 
     updateRoundingValue(selectedType: number) {
@@ -53,6 +54,12 @@ export class SpPieChartWidgetConfigComponent extends BaseWidgetConfig<
         this.triggerViewRefresh();
     }
 
+    updateInnerRadius(selectedRadius: number) {
+        this.currentlyConfiguredWidget.visualizationConfig.selectedRadius =
+            selectedRadius;
+        this.triggerViewRefresh();
+    }
+
     protected requiredFieldsForChartPresent(): boolean {
         return this.fieldProvider.allFields.length > 0;
     }
diff --git a/ui/src/app/data-explorer/components/widgets/pie/model/pie-chart-widget.model.ts b/ui/src/app/data-explorer/components/widgets/pie/model/pie-chart-widget.model.ts
index 5ea5d22fdc..a846ad00b8 100644
--- a/ui/src/app/data-explorer/components/widgets/pie/model/pie-chart-widget.model.ts
+++ b/ui/src/app/data-explorer/components/widgets/pie/model/pie-chart-widget.model.ts
@@ -26,6 +26,7 @@ import { DataExplorerVisConfig } from '../../../../models/dataview-dashboard.mod
 export interface PieChartVisConfig extends DataExplorerVisConfig {
     selectedProperty: DataExplorerField;
     roundingValue: number;
+    selectedRadius: number;
 }
 
 export interface PieChartWidgetModel extends DataExplorerWidgetModel {
diff --git a/ui/src/app/data-explorer/components/widgets/pie/pie-renderer.service.ts b/ui/src/app/data-explorer/components/widgets/pie/pie-renderer.service.ts
index 84346d9218..be48f98ae8 100644
--- a/ui/src/app/data-explorer/components/widgets/pie/pie-renderer.service.ts
+++ b/ui/src/app/data-explorer/components/widgets/pie/pie-renderer.service.ts
@@ -64,6 +64,7 @@ export class SpPieRendererService extends SpBaseSingleFieldEchartsRenderer<
         datasetIndex: number,
         _widgetConfig: PieChartWidgetModel,
     ): PieSeriesOption {
+        const innerRadius = _widgetConfig.visualizationConfig.selectedRadius;
         return {
             name,
             type: 'pie',
@@ -80,6 +81,7 @@ export class SpPieRendererService extends SpBaseSingleFieldEchartsRenderer<
                 },
             },
             encode: { itemName: 'name', value: 'value' },
+            radius: [innerRadius + '%', '90%'],
         };
     }