feat: dynamic line stroke settings

AnalogJ · Nov 10, 2022 · 536b590 · 536b590
1 parent 098ce06
commit 536b590
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 1 deletion.
diff --git a/webapp/backend/pkg/database/scrutiny_repository_migrations.go b/webapp/backend/pkg/database/scrutiny_repository_migrations.go
@@ -325,6 +325,12 @@ func (sr *scrutinyRepository) Migrate(ctx context.Context) error {
 						SettingDataType:       "bool",
 						SettingValueBool:      false,
 					},
+					{
+                        SettingKeyName:        "line_stroke",
+                        SettingKeyDescription: "Temperature chart line stroke ('smooth' | 'straight' | 'stepline')",
+                        SettingDataType:       "string",
+                        SettingValueString:    "smooth",
+                    },
 
 					{
 						SettingKeyName:        "metrics.notify_level",

diff --git a/webapp/backend/pkg/models/settings.go b/webapp/backend/pkg/models/settings.go
@@ -14,6 +14,7 @@ type Settings struct {
 	DashboardSort    string `json:"dashboard_sort" mapstructure:"dashboard_sort"`
 	TemperatureUnit  string `json:"temperature_unit" mapstructure:"temperature_unit"`
 	FileSizeSIUnits  bool   `json:"file_size_si_units" mapstructure:"file_size_si_units"`
+	LineStroke       string `json:"line_stroke" mapstructure:"line_stroke"`
 
 	Metrics struct {
 		NotifyLevel            int `json:"notify_level" mapstructure:"notify_level"`

diff --git a/webapp/frontend/src/app/core/config/app.config.ts b/webapp/frontend/src/app/core/config/app.config.ts
@@ -10,6 +10,8 @@ export type DashboardSort = 'status' | 'title' | 'age'
 
 export type TemperatureUnit = 'celsius' | 'fahrenheit'
 
+export type LineStroke = 'smooth' | 'straight' | 'stepline'
+
 
 export enum MetricsNotifyLevel {
     Warn = 1,
@@ -45,6 +47,8 @@ export interface AppConfig {
 
     file_size_si_units?: boolean;
 
+    line_stroke?: LineStroke;
+
     // Settings from Scrutiny API
 
     metrics?: {
@@ -73,6 +77,8 @@ export const appConfig: AppConfig = {
     temperature_unit: 'celsius',
     file_size_si_units: false,
 
+    line_stroke: 'smooth',
+
     metrics: {
         notify_level: MetricsNotifyLevel.Fail,
         status_filter_attributes: MetricsStatusFilterAttributes.All,

diff --git a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html b/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
@@ -53,6 +53,17 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
             </mat-form-field>
         </div>
 
+        <div class="flex flex-col mt-5 gt-md:flex-row">
+            <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
+                <mat-label>Line stroke</mat-label>
+                <mat-select [(ngModel)]="lineStroke">
+                    <mat-option value="smooth">Smooth</mat-option>
+                    <mat-option value="straight">Straight</mat-option>
+                    <mat-option value="stepline">Stepline</mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+
         <div class="flex flex-col mt-5 gt-md:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Device Status - Thresholds</mat-label>

diff --git a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.ts b/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.ts
@@ -6,6 +6,7 @@ import {
     MetricsStatusFilterAttributes,
     MetricsStatusThreshold,
     TemperatureUnit,
+    LineStroke,
     Theme
 } from 'app/core/config/app.config';
 import {ScrutinyConfigService} from 'app/core/config/scrutiny-config.service';
@@ -23,6 +24,7 @@ export class DashboardSettingsComponent implements OnInit {
     dashboardSort: string;
     temperatureUnit: string;
     fileSizeSIUnits: boolean;
+    lineStroke: string;
     theme: string;
     statusThreshold: number;
     statusFilterAttributes: number;
@@ -48,6 +50,7 @@ export class DashboardSettingsComponent implements OnInit {
                 this.dashboardSort = config.dashboard_sort;
                 this.temperatureUnit = config.temperature_unit;
                 this.fileSizeSIUnits = config.file_size_si_units;
+                this.lineStroke = config.line_stroke;
                 this.theme = config.theme;
 
                 this.statusFilterAttributes = config.metrics.status_filter_attributes;
@@ -63,6 +66,7 @@ export class DashboardSettingsComponent implements OnInit {
             dashboard_sort: this.dashboardSort as DashboardSort,
             temperature_unit: this.temperatureUnit as TemperatureUnit,
             file_size_si_units: this.fileSizeSIUnits,
+            line_stroke: this.lineStroke as LineStroke,
             theme: this.theme as Theme,
             metrics: {
                 status_filter_attributes: this.statusFilterAttributes as MetricsStatusFilterAttributes,

diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
@@ -201,7 +201,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
             },
             series : this._deviceDataTemperatureSeries(),
             stroke : {
-                curve: 'straight',
+                curve: this.config.line_stroke,
                 width: 2
             },
             tooltip: {