From 5eed73aa70b85b26a0a803d5f3f272e9423b6e15 Mon Sep 17 00:00:00 2001
From: Dave Skender <8432125+DaveSkender@users.noreply.github.com>
Date: Sun, 5 Nov 2023 18:19:04 -0500
Subject: [PATCH] add None line type

---
 .../src/app/picker/pick-config.component.html | 45 ++++++++++---------
 .../src/app/picker/pick-config.component.ts   |  7 +--
 Client/src/app/services/api.service.ts        | 18 ++++++++
 3 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/Client/src/app/picker/pick-config.component.html b/Client/src/app/picker/pick-config.component.html
index 18afb896..d008e523 100644
--- a/Client/src/app/picker/pick-config.component.html
+++ b/Client/src/app/picker/pick-config.component.html
@@ -25,30 +25,12 @@ <h2 mat-dialog-title matTooltip="{{listing.name}}" class="noselect">{{listing.na
 
           <h3>{{r.displayName}}</h3>
 
-          <!-- color -->
-          <mat-form-field class="style-input">
-            <mat-label>Color</mat-label>
-            <input matInput #hexcolor="ngModel" name="color{{i}}" [mtxColorpicker]="customPicker" [(ngModel)]="r.color" pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8})$">
-            <mat-error *ngIf="hexcolor.invalid">Invalid HEX color</mat-error>
-            <mtx-colorpicker-toggle matSuffix [for]="customPicker" [ngStyle]="{'color':r.color}">
-            </mtx-colorpicker-toggle>
-            <mtx-colorpicker #customPicker [content]="customPickerContent" disabled="false"></mtx-colorpicker>
-          </mat-form-field>
-
-          <ng-template #customPickerContent>
-            <div>
-              <color-compact [colors]="presetColors" [color]="customPicker.selected"
-                (onChange)="customPicker.select(getColor($event, customPicker))">
-              </color-compact>
-            </div>
-          </ng-template>
-
           <!-- line type -->
           <mat-form-field class="style-input">
-            <mat-label>Line style</mat-label>
+            <mat-label>Line type</mat-label>
             <mat-select name="linetype{{i}}" [(ngModel)]="r.lineType">
-              <mat-option *ngFor="let style of lineStyles" [value]="style.value">
-                {{style.name}}
+              <mat-option *ngFor="let type of lineTypes" [value]="type.value">
+                {{type.name}}
               </mat-option>
             </mat-select>
           </mat-form-field>
@@ -56,13 +38,32 @@ <h3>{{r.displayName}}</h3>
           <!-- line width -->
           <mat-form-field class="style-input">
             <mat-label>Line width</mat-label>
-            <mat-select name="linewidth{{i}}" [(ngModel)]="r.lineWidth">
+            <mat-select name="linewidth{{i}}" [(ngModel)]="r.lineWidth" [disabled]="r.lineType==='none'">
               <mat-option *ngFor="let width of lineWidths" [value]="width.value">
                 {{width.name}}
               </mat-option>
             </mat-select>
           </mat-form-field>
 
+          <!-- color -->
+          <mat-form-field class="style-input">
+            <mat-label>Color</mat-label>
+            <input matInput #hexcolor="ngModel" name="color{{i}}" [mtxColorpicker]="customPicker" [(ngModel)]="r.color"
+              pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8})$" [disabled]="r.lineType==='none'">
+            <mat-error *ngIf="hexcolor.invalid">Invalid HEX color</mat-error>
+            <mtx-colorpicker-toggle matSuffix [for]="customPicker" [ngStyle]="{'color':r.color}"
+              [disabled]="r.lineType==='none'">
+            </mtx-colorpicker-toggle>
+            <mtx-colorpicker #customPicker [content]="customPickerContent" disabled="false"></mtx-colorpicker>
+          </mat-form-field>
+
+          <ng-template #customPickerContent>
+            <div>
+              <color-compact [colors]="presetColors" [color]="customPicker.selected"
+                (onChange)="customPicker.select(getColor($event, customPicker))">
+              </color-compact>
+            </div>
+          </ng-template>
         </div>
       </mat-tab>
     </mat-tab-group>
diff --git a/Client/src/app/picker/pick-config.component.ts b/Client/src/app/picker/pick-config.component.ts
index b48c389f..4ce6f04e 100644
--- a/Client/src/app/picker/pick-config.component.ts
+++ b/Client/src/app/picker/pick-config.component.ts
@@ -20,7 +20,7 @@ interface LineWidth {
   value: number;
 }
 
-interface LineStyle {
+interface LineType {
   name: string;
   value: string;
 }
@@ -61,11 +61,12 @@ export class PickConfigComponent {
     { name: "thick", value: 2 }
   ];
 
-  lineStyles: LineStyle[] = [
+  lineTypes: LineType[] = [
     { name: "solid", value: "solid" },
     { name: "dashes", value: "dash" },
     { name: "dots", value: "dots" },
-    { name: "bar", value: "bar" }
+    { name: "bar", value: "bar" },
+    { name: "none", value: "none" }
   ];
 
   constructor(
diff --git a/Client/src/app/services/api.service.ts b/Client/src/app/services/api.service.ts
index dc841012..0cc19ebf 100644
--- a/Client/src/app/services/api.service.ts
+++ b/Client/src/app/services/api.service.ts
@@ -232,6 +232,24 @@ export class ApiService {
           order: r.order
         };
         return ptDataset;
+
+      case 'none':
+        // hide instead of exclude "none" lines,
+        // otherwise, it breaks line offset fill
+        const noneDataset: ChartDataset = {
+          label: r.label,
+          type: 'line',
+          data: [],
+          yAxisID: 'yAxis',
+          showLine: false,
+          pointRadius: 0,
+          borderWidth: 0,
+          borderColor: r.color,
+          backgroundColor: r.color,
+          fill: false,
+          order: r.order
+        };
+        return noneDataset;
     }
   }