More user defined band properties (#592)

* feat: add more user definable props for bands

* style: prettier

Author: jake-bassett

projects/observability/src/shared/dashboard/widgets/charts/cartesian-widget/band.model.ts

@@ -14,24 +14,42 @@ import { Observable } from 'rxjs';
   type: 'band'
 })
 export class BandModel<TInterval> {
-  public static readonly BAND_COLOR: string = Color.Gray2;
-  public static readonly BASELINE_COLOR: string = Color.Gray4;
-  public static readonly BASELINE_NAME: string = 'Baseline';
-  public static readonly UPPER_BOUND_NAME: string = 'Upper Bound';
-  public static readonly LOWER_BOUND_NAME: string = 'Lower Bound';
-  public static readonly DEFAULT_OPACITY: number = 0.4;
+  private static readonly BAND_COLOR: string = Color.Gray2;
+  private static readonly BASELINE_COLOR: string = Color.Gray4;
+  private static readonly DEFAULT_OPACITY: number = 0.4;
+  private static readonly BASELINE_NAME: string = 'Baseline';
+  private static readonly UPPER_BOUND_NAME: string = 'Upper Bound';
+  private static readonly LOWER_BOUND_NAME: string = 'Lower Bound';
 
   @ModelProperty({
-    key: 'band-color',
+    key: 'name',
     type: STRING_PROPERTY.type
   })
-  public bandColor: string = BandModel.BAND_COLOR;
+  public name: string = BandModel.BASELINE_NAME;
+
+  @ModelProperty({
+    key: 'upper-bound-name',
+    type: STRING_PROPERTY.type
+  })
+  public upperBoundName: string = BandModel.UPPER_BOUND_NAME;
+
+  @ModelProperty({
+    key: 'lower-bound-name',
+    type: STRING_PROPERTY.type
+  })
+  public lowerBoundName: string = BandModel.LOWER_BOUND_NAME;
+
+  @ModelProperty({
+    key: 'color',
+    type: STRING_PROPERTY.type
+  })
+  public color: string = BandModel.BASELINE_COLOR;
 
   @ModelProperty({
-    key: 'baseline-color',
+    key: 'band-color',
     type: STRING_PROPERTY.type
   })
-  public baselineColor: string = BandModel.BASELINE_COLOR;
+  public bandColor: string = BandModel.BAND_COLOR;
 
   @ModelProperty({
     key: 'opacity',

projects/observability/src/shared/dashboard/widgets/charts/cartesian-widget/cartesian-widget.model.ts

@@ -171,7 +171,7 @@ export class CartesianWidgetModel<TInterval> {
             this.mapToBaseline(bands[index].bandModel, b)
           )
         ],
-        bands: result.bands.map((b: MetricBand<TInterval>) => this.mapToBand(b))
+        bands: result.bands.map((b: MetricBand<TInterval>, index: number) => this.mapToBand(bands[index].bandModel, b))
       }))
     );
   }
@@ -202,18 +202,18 @@ export class CartesianWidgetModel<TInterval> {
     return {
       data: metricBand.intervals,
       units: metricBand.units,
-      color: BandModel.BASELINE_COLOR,
-      name: BandModel.BASELINE_NAME,
+      color: model.color,
+      name: model.name,
       type: CartesianSeriesVisualizationType.DashedLine,
       hide: model.hide
     };
   }
 
-  private mapToBand(metricSeries: MetricSeries<TInterval>): Band<TInterval> {
+  private mapToBand(model: BandModel<TInterval>, metricSeries: MetricSeries<TInterval>): Band<TInterval> {
     return {
       name: '',
-      color: BandModel.BAND_COLOR,
-      opacity: BandModel.DEFAULT_OPACITY,
+      color: model.bandColor,
+      opacity: model.opacity,
       upper: {
         data: metricSeries.intervals
           .map((interval: unknown) => interval as MetricTimeseriesBandInterval)
@@ -226,8 +226,8 @@ export class CartesianWidgetModel<TInterval> {
           )
           .map(interval => interval as TInterval),
         type: CartesianSeriesVisualizationType.DashedLine,
-        color: BandModel.BAND_COLOR,
-        name: BandModel.UPPER_BOUND_NAME
+        color: model.bandColor,
+        name: model.upperBoundName
       },
       lower: {
         data: metricSeries.intervals
@@ -241,8 +241,8 @@ export class CartesianWidgetModel<TInterval> {
           )
           .map(interval => interval as TInterval),
         type: CartesianSeriesVisualizationType.DashedLine,
-        color: BandModel.BAND_COLOR,
-        name: BandModel.LOWER_BOUND_NAME
+        color: model.bandColor,
+        name: model.lowerBoundName
       }
     };
   }