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 f26aaa45da chore: Remove obsolete ngx-charts module (#3467)
f26aaa45da is described below
commit f26aaa45dae356b78dabc302d2f190efdf74fabc
Author: Dominik Riemer <[email protected]>
AuthorDate: Tue Feb 11 09:10:58 2025 +0100
chore: Remove obsolete ngx-charts module (#3467)
---
ui/package.json | 1 -
ui/src/app/core-ui/core-ui.module.ts | 2 --
.../simple-metrics/simple-metrics.component.html | 27 +++++++++---------
.../core-ui/status/status-widget.component.html | 25 ++++++++--------
.../core-ui/status/status-widget.component.scss | 20 +++++++++++++
.../app/core-ui/status/status-widget.component.ts | 33 +++-------------------
ui/src/app/dashboard/dashboard.module.ts | 2 --
.../data-explorer-shared.module.ts | 2 --
ui/src/app/data-explorer/data-explorer.module.ts | 2 --
9 files changed, 52 insertions(+), 62 deletions(-)
diff --git a/ui/package.json b/ui/package.json
index 5a76f02690..7e276db737 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -50,7 +50,6 @@
"@ngx-loading-bar/core": "6.0.2",
"@ngx-loading-bar/http-client": "6.0.2",
"@panzoom/panzoom": "^4.5.1",
- "@swimlane/ngx-charts": "^20.5.0",
"angular-gridster2": "^18.0.1",
"codemirror": "^5.65.11",
"console-browserify": "^1.2.0",
diff --git a/ui/src/app/core-ui/core-ui.module.ts
b/ui/src/app/core-ui/core-ui.module.ts
index f0a6e6f5da..bc883c7620 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -52,7 +52,6 @@ import { ColorPickerModule } from 'ngx-color-picker';
import { QuillModule } from 'ngx-quill';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { NgxChartsModule } from '@swimlane/ngx-charts';
import { ErrorHintComponent } from './error-hint/error-hint.component';
import { AddToCollectionComponent } from
'./static-properties/static-collection/add-to-collection/add-to-collection.component';
import { PipelineStartedStatusComponent } from
'./pipeline/pipeline-started-status/pipeline-started-status.component';
@@ -152,7 +151,6 @@ import { TopicsComponent } from './topics/topics.component';
MatProgressSpinnerModule,
MatDatepickerModule,
MatNativeDateModule,
- NgxChartsModule,
MatSliderModule,
MatSlideToggleModule,
MatChipsModule,
diff --git
a/ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.html
b/ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.html
index a08152fef9..bc76be0893 100644
--- a/ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.html
+++ b/ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.html
@@ -16,28 +16,29 @@
~
-->
-<sp-basic-header-title-component
- [title]="elementName + ' - Metrics'"
-></sp-basic-header-title-component>
-<div fxLayout="row" fxLayoutAlign="center center">
- <div fxFlex="50">
+<div fxLayout="column">
+ <sp-basic-header-title-component
+ [title]="elementName + ' - Metrics'"
+ ></sp-basic-header-title-component>
+ <div
+ fxLayout="row"
+ fxLayoutAlign="center center"
+ fxLayoutGap="20px"
+ fxFlex="100"
+ >
<sp-status-widget
- fxFlex="100"
+ fxFlex="50"
[label]="lastPublishedLabel"
- [widgetHeight]="400"
- [widgetWidth]="500"
+ widgetHeight="400px"
[statusValue]="
lastTimestamp === 0 ? 'n/a' : (lastTimestamp | date: 'medium')
"
>
</sp-status-widget>
- </div>
- <div fxFlex="50">
<sp-status-widget
- fxFlex="100"
+ fxFlex="50"
[label]="statusValueLabel"
- [widgetHeight]="400"
- [widgetWidth]="500"
+ widgetHeight="400px"
[statusValue]="statusValue"
>
</sp-status-widget>
diff --git a/ui/src/app/core-ui/status/status-widget.component.html
b/ui/src/app/core-ui/status/status-widget.component.html
index 94408cd9c0..d82600e671 100644
--- a/ui/src/app/core-ui/status/status-widget.component.html
+++ b/ui/src/app/core-ui/status/status-widget.component.html
@@ -17,15 +17,18 @@
-->
<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column">
- <ngx-charts-number-card
- [ngStyle]="{ width: widgetWidth + 'px' }"
- [view]="[widgetWidth, widgetHeight]"
- [results]="chartData"
- [scheme]="'cool'"
- [cardColor]="color"
- [animations]="false"
- [bandColor]="bandColor"
- [textColor]="textColor"
- >
- </ngx-charts-number-card>
+ <div class="status-container p-10" [ngStyle]="{ height: widgetHeight }">
+ <div fxFlex fxLayout="column">
+ <div class="status-container-label" fxLayoutAlign="start start">
+ <span>{{ label }}</span>
+ </div>
+ <div
+ class="status-container-value"
+ fxLayoutAlign="center center"
+ fxFlex
+ >
+ <span>{{ statusValue }}</span>
+ </div>
+ </div>
+ </div>
</div>
diff --git a/ui/src/app/core-ui/status/status-widget.component.scss
b/ui/src/app/core-ui/status/status-widget.component.scss
index 5007b46489..f34ee5e257 100644
--- a/ui/src/app/core-ui/status/status-widget.component.scss
+++ b/ui/src/app/core-ui/status/status-widget.component.scss
@@ -33,3 +33,23 @@
.fix-margin {
margin-top: -5px;
}
+
+.status-container {
+ height: 150px;
+ width: 100%;
+ color: var(--color-accent);
+ border-radius: 5px;
+ margin-bottom: 20px;
+ border: 2px solid var(--color-bg-2);
+ background: var(--color-bg-2);
+ border-bottom: 5px solid var(--color-accent);
+}
+
+.status-container-value {
+ font-size: 36pt;
+ font-weight: bold;
+}
+
+.status-container-label {
+ font-size: 14pt;
+}
diff --git a/ui/src/app/core-ui/status/status-widget.component.ts
b/ui/src/app/core-ui/status/status-widget.component.ts
index 8bee6751f0..011274b9a6 100644
--- a/ui/src/app/core-ui/status/status-widget.component.ts
+++ b/ui/src/app/core-ui/status/status-widget.component.ts
@@ -24,38 +24,13 @@ import { Component, Input } from '@angular/core';
styleUrls: ['./status-widget.component.scss'],
})
export class StatusWidgetComponent {
- @Input() color = 'rgb(156, 156, 156)';
- @Input() bandColor = 'rgb(27, 20, 100)';
- @Input() textColor = 'rgb(96,96,96)';
-
- @Input() widgetWidth = 400;
- @Input() widgetHeight = 150;
-
- _label: string;
- _statusValue: string | number;
-
- chartData: any;
-
- constructor() {}
+ @Input() widgetHeight = '150px';
@Input()
- set statusValue(statusValue: string | number) {
- this._statusValue = statusValue;
- this.updateChartData();
- }
+ label: string;
@Input()
- set label(label: string) {
- this._label = label;
- this.updateChartData();
- }
-
- updateChartData() {
- this.chartData = [];
- this.chartData = [{ name: this._label, value: this._statusValue }];
- }
+ statusValue: string | number;
- getBackground() {
- return { background: this.color };
- }
+ constructor() {}
}
diff --git a/ui/src/app/dashboard/dashboard.module.ts
b/ui/src/app/dashboard/dashboard.module.ts
index 1cadedd016..765fc818c3 100644
--- a/ui/src/app/dashboard/dashboard.module.ts
+++ b/ui/src/app/dashboard/dashboard.module.ts
@@ -25,7 +25,6 @@ import { FormsModule } from '@angular/forms';
import { ColorPickerModule } from 'ngx-color-picker';
import { MatGridListModule } from '@angular/material/grid-list';
import { DashboardOverviewComponent } from
'./components/overview/dashboard-overview.component';
-import { NgxChartsModule } from '@swimlane/ngx-charts';
import { CdkTableModule } from '@angular/cdk/table';
import { LeafletModule } from '@bluehalo/ngx-leaflet';
import { CoreUiModule } from '../core-ui/core-ui.module';
@@ -107,7 +106,6 @@ import { DashboardOverviewTableComponent } from
'./components/overview/dashboard
MatFormFieldModule,
MatTableModule,
MatButtonModule,
- NgxChartsModule,
CdkTableModule,
LeafletModule,
PlatformServicesModule,
diff --git a/ui/src/app/data-explorer-shared/data-explorer-shared.module.ts
b/ui/src/app/data-explorer-shared/data-explorer-shared.module.ts
index 67c827309a..b30d640fa5 100644
--- a/ui/src/app/data-explorer-shared/data-explorer-shared.module.ts
+++ b/ui/src/app/data-explorer-shared/data-explorer-shared.module.ts
@@ -48,7 +48,6 @@ import { FlexLayoutModule } from '@ngbracket/ngx-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ColorPickerModule } from 'ngx-color-picker';
import { MatGridListModule } from '@angular/material/grid-list';
-import { NgxChartsModule } from '@swimlane/ngx-charts';
import { CdkTableModule } from '@angular/cdk/table';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -130,7 +129,6 @@ import { SpDataZoomConfigComponent } from
'./components/chart-config/data-zoom-c
FormsModule,
ColorPickerModule,
MatGridListModule,
- NgxChartsModule,
CdkTableModule,
MatSnackBarModule,
MatProgressSpinnerModule,
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts
b/ui/src/app/data-explorer/data-explorer.module.ts
index 017c4432a9..13b7a97c7c 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -30,7 +30,6 @@ import { MatSnackBarModule } from
'@angular/material/snack-bar';
import { MatTabsModule } from '@angular/material/tabs';
import { LeafletModule } from '@bluehalo/ngx-leaflet';
-import { NgxChartsModule } from '@swimlane/ngx-charts';
import { GridsterModule } from 'angular-gridster2';
import { ColorPickerModule } from 'ngx-color-picker';
import { PlatformServicesModule } from '@streampipes/platform-services';
@@ -116,7 +115,6 @@ import { AggregateConfigurationComponent } from
'./components/chart-view/designe
FormsModule,
ColorPickerModule,
MatGridListModule,
- NgxChartsModule,
CdkTableModule,
MatSnackBarModule,
MatProgressSpinnerModule,
