add None line type

facioquo · Nov 5, 2023 · 5eed73a · 5eed73a
1 parent cbfb19f
commit 5eed73a
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 25 deletions.
diff --git a/Client/src/app/picker/pick-config.component.html b/Client/src/app/picker/pick-config.component.html
@@ -25,44 +25,45 @@ <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>
 
           <!-- 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
@@ -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
@@ -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;
     }
   }