Choose deleted segment color #182

src/panel/graph_panel/colors.ts

@@ -76,6 +76,12 @@ export const ANALYTIC_UNIT_COLORS = [
   '#f8c171',
 ];
 
+export const REGION_DELETE_COLOR_LIGHT = '#d1d1d1';
+export const REGION_DELETE_COLOR_DARK = 'white';
+export const LABELED_SEGMENT_BORDER_COLOR = 'black';
+export const DELETED_SEGMENT_FILL_COLOR = '#00f0ff';
+export const DELETED_SEGMENT_BORDER_COLOR = 'black';
+
 export function hexToHsl(color) {
   return tinycolor(color).toHsl();
 }

src/panel/graph_panel/controllers/analytic_controller.ts

@@ -14,7 +14,12 @@ import { SegmentArray } from '../models/segment_array';
 import { ServerInfo } from '../models/info';
 import { Threshold, Condition } from '../models/threshold';
 
-import { ANALYTIC_UNIT_COLORS } from '../colors';
+import { 
+  ANALYTIC_UNIT_COLORS,
+  LABELED_SEGMENT_BORDER_COLOR,
+  DELETED_SEGMENT_FILL_COLOR,
+  DELETED_SEGMENT_BORDER_COLOR
+} from '../colors';
 
 import { Emitter } from 'grafana/app/core/utils/emitter';
 
@@ -23,13 +28,7 @@ import * as tinycolor from 'tinycolor2';
 
 export const REGION_FILL_ALPHA = 0.5;
 export const REGION_STROKE_ALPHA = 0.8;
-const LABELING_MODE_ALPHA = 0.7;
+export const LABELING_MODE_ALPHA = 0.7;
-export const REGION_DELETE_COLOR_LIGHT = '#d1d1d1';
-export const REGION_DELETE_COLOR_DARK = 'white';
-const LABELED_SEGMENT_BORDER_COLOR = 'black';
-const DELETED_SEGMENT_FILL_COLOR = '#00f0ff';
-const DELETED_SEGMENT_BORDER_COLOR = 'black';
-
 
 export class AnalyticController {
 
@@ -87,11 +86,11 @@ export class AnalyticController {
     this._creatingNewAnalyticType = true;
     this._savingNewAnalyticUnit = false;
     if (this.analyticUnits.length === 0) {
-      this._newAnalyticUnit.color = ANALYTIC_UNIT_COLORS[0];
+      this._newAnalyticUnit.labeledColor = ANALYTIC_UNIT_COLORS[0];
     } else {
-      let colorIndex = ANALYTIC_UNIT_COLORS.indexOf(_.last(this.analyticUnits).color) + 1;
+      let colorIndex = ANALYTIC_UNIT_COLORS.indexOf(_.last(this.analyticUnits).labeledColor) + 1;
       colorIndex %= ANALYTIC_UNIT_COLORS.length;
-      this._newAnalyticUnit.color = ANALYTIC_UNIT_COLORS[colorIndex];
+      this._newAnalyticUnit.labeledColor = ANALYTIC_UNIT_COLORS[colorIndex];
     }
   }
 
@@ -195,11 +194,15 @@ export class AnalyticController {
     return this._analyticUnitsSet.items;
   }
 
-  onAnalyticUnitColorChange(id: AnalyticUnitId, value: string) {
+  onAnalyticUnitColorChange(id: AnalyticUnitId, value: string, deleted: boolean) {
     if(id === undefined) {
       throw new Error('id is undefined');
     }
-    this._analyticUnitsSet.byId(id).color = value;
+    if(deleted) {
+      this._analyticUnitsSet.byId(id).deletedColor = value;
+    } else {
+      this._analyticUnitsSet.byId(id).labeledColor = value;
+    }
   }
 
   fetchAnalyticUnitsStatuses() {
@@ -265,18 +268,18 @@ export class AnalyticController {
         continue;
       }
 
-      let borderColor = addAlphaToRGB(analyticUnit.color, REGION_STROKE_ALPHA);
+      let defaultBorderColor = addAlphaToRGB(analyticUnit.labeledColor, REGION_STROKE_ALPHA);
-      let fillColor = addAlphaToRGB(analyticUnit.color, REGION_FILL_ALPHA);
+      let defaultFillColor = addAlphaToRGB(analyticUnit.labeledColor, REGION_FILL_ALPHA);
       let labeledSegmentBorderColor = tinycolor(LABELED_SEGMENT_BORDER_COLOR).toRgbString();
       labeledSegmentBorderColor = addAlphaToRGB(labeledSegmentBorderColor, REGION_STROKE_ALPHA);
-      let deletedSegmentFillColor = tinycolor(DELETED_SEGMENT_FILL_COLOR).toRgbString();
+      let deletedSegmentFillColor = tinycolor(analyticUnit.deletedColor).toRgbString();
       deletedSegmentFillColor = addAlphaToRGB(deletedSegmentFillColor, REGION_FILL_ALPHA);
       let deletedSegmentBorderColor = tinycolor(DELETED_SEGMENT_BORDER_COLOR).toRgbString();
       deletedSegmentBorderColor = addAlphaToRGB(deletedSegmentBorderColor, REGION_STROKE_ALPHA);
 
       if(isEditMode && this.labelingMode && analyticUnit.selected) {
-        borderColor = addAlphaToRGB(borderColor, LABELING_MODE_ALPHA);
+        defaultBorderColor = addAlphaToRGB(defaultBorderColor, LABELING_MODE_ALPHA);
-        fillColor = addAlphaToRGB(fillColor, LABELING_MODE_ALPHA);
+        defaultFillColor = addAlphaToRGB(defaultFillColor, LABELING_MODE_ALPHA);
         labeledSegmentBorderColor = addAlphaToRGB(labeledSegmentBorderColor, LABELING_MODE_ALPHA);
         deletedSegmentFillColor = addAlphaToRGB(deletedSegmentFillColor, LABELING_MODE_ALPHA);
         deletedSegmentBorderColor = addAlphaToRGB(deletedSegmentBorderColor, LABELING_MODE_ALPHA);
@@ -286,8 +289,8 @@ export class AnalyticController {
       const rangeDist = +options.xaxis.max - +options.xaxis.min;
 
       segments.forEach(s => {
-        let segmentBorderColor = borderColor;
+        let segmentBorderColor = defaultBorderColor;
-        let segmentFillColor = fillColor;
+        let segmentFillColor = defaultFillColor;
 
         if(s.deleted) {
           segmentBorderColor = deletedSegmentBorderColor;

src/panel/graph_panel/graph_ctrl.ts

@@ -580,11 +580,11 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.analyticsController.fetchAnalyticUnitName(analyticUnit);
   }
 
-  onColorChange(id: AnalyticUnitId, value: string) {
+  onColorChange(id: AnalyticUnitId, deleted: boolean, value: string) {
     if(id === undefined) {
       throw new Error('id is undefined');
     }
-    this.analyticsController.onAnalyticUnitColorChange(id, value);
+    this.analyticsController.onAnalyticUnitColorChange(id, value, deleted);
     this.render();
   }
 

src/panel/graph_panel/graph_renderer.ts

@@ -5,10 +5,13 @@ import { convertValuesToHistogram, getSeriesValues } from './histogram';
 import {
   AnalyticController,
   REGION_FILL_ALPHA,
-  REGION_STROKE_ALPHA,
+  REGION_STROKE_ALPHA
+} from './controllers/analytic_controller';
+
+import {
   REGION_DELETE_COLOR_LIGHT,
   REGION_DELETE_COLOR_DARK
-} from './controllers/analytic_controller';
+} from './colors';
 
 import { GraphCtrl } from './graph_ctrl';
 
@@ -345,7 +348,7 @@ export class GraphRenderer {
           REGION_DELETE_COLOR_LIGHT :
           REGION_DELETE_COLOR_DARK;
       } else {
-        color = this._analyticController.labelingUnit.color;
+        color = this._analyticController.labelingUnit.labeledColor;
       }
       fillAlpha = REGION_FILL_ALPHA;
       strokeAlpha = REGION_STROKE_ALPHA;

src/panel/graph_panel/graph_tooltip.ts

@@ -211,7 +211,7 @@ export class GraphTooltip {
       result += `
         <div class="graph-tooltip-list-item">
           <div class="graph-tooltip-series-name">
-            <i class="fa fa-exclamation" style="color:${s.analyticUnit.color}"></i>
+            <i class="fa fa-exclamation" style="color:${s.analyticUnit.labeledColor}"></i>
             ${s.analyticUnit.name}:
           </div>
           <div class="graph-tooltip-value">

src/panel/graph_panel/models/analytic_unit.ts

@@ -36,7 +36,8 @@ export class AnalyticUnit {
     }
     _.defaults(this._panelObject, {
       name: 'AnalyticUnitName',
-      color: ANALYTIC_UNIT_COLORS[0],
+      labeledColor: ANALYTIC_UNIT_COLORS[0],
+      deletedColor: '#00f0ff',
       detectorType: 'pattern',
       type: 'GENERAL',
       alert: false
@@ -58,8 +59,11 @@ export class AnalyticUnit {
   set confidence(value: number) { this._panelObject.confidence = value; }
   get confidence(): number { return this._panelObject.confidence; }
 
-  set color(value: string) { this._panelObject.color = value; }
+  set labeledColor(value: string) { this._panelObject.labeledColor = value; }
-  get color(): string { return this._panelObject.color; }
+  get labeledColor(): string { return this._panelObject.labeledColor; }
+
+  set deletedColor(value: string) { this._panelObject.deletedColor = value; }
+  get deletedColor(): string { return this._panelObject.deletedColor; }
 
   set alert(value: boolean) { this._panelObject.alert = value; }
   get alert(): boolean { return this._panelObject.alert; }

src/panel/graph_panel/partials/tab_analytics.html

@@ -39,11 +39,19 @@
       />
       -->
 
-      <label class="gf-form-label width-6"> Color </label>
+      <label class="gf-form-label width-8"> Labeled Color </label>
       <span class="gf-form-label">
         <color-picker
-          color="analyticUnit.color"
+          color="analyticUnit.labeledColor"
-          onChange="ctrl.onColorChange.bind(ctrl, analyticUnit.id)"
+          onChange="ctrl.onColorChange.bind(ctrl, analyticUnit.id, false)"
+        />
+      </span>
+
+      <label class="gf-form-label width-8"> Deleted Color </label>
+      <span class="gf-form-label">
+        <color-picker
+          color="analyticUnit.deletedColor"
+          onChange="ctrl.onColorChange.bind(ctrl, analyticUnit.id, true)"
         />
       </span>