chore: Remove obsolete ngx-charts module

apache · Feb 10, 2025 · 186bb85 · 186bb85
1 parent 0b99270
commit 186bb85
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 62 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,