This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 88b67652ff Add doughnut chart to pie chart (#3235)
88b67652ff is described below
commit 88b67652fff1ef3a8e218d122303761e837386f6
Author: Marcel Früholz <[email protected]>
AuthorDate: Tue Sep 17 16:20:48 2024 +0200
Add doughnut chart to pie chart (#3235)
---
.../config/pie-chart-widget-config.component.html | 72 ++++++++++++++--------
.../config/pie-chart-widget-config.component.ts | 7 +++
.../widgets/pie/model/pie-chart-widget.model.ts | 1 +
.../components/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%'],
};
}
