diff --git a/src/panel/graph_panel/colors.ts b/src/panel/graph_panel/colors.ts index 33b9f9f..72886fe 100644 --- a/src/panel/graph_panel/colors.ts +++ b/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(); } @@ -85,4 +91,4 @@ export function hslToHex(color) { } -export default colors; \ No newline at end of file +export default colors; diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts index 6c2b0a9..abcbbe7 100644 --- a/src/panel/graph_panel/controllers/analytic_controller.ts +++ b/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 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 const LABELING_MODE_ALPHA = 0.7; 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 fillColor = addAlphaToRGB(analyticUnit.color, REGION_FILL_ALPHA); + let defaultBorderColor = addAlphaToRGB(analyticUnit.labeledColor, REGION_STROKE_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); - fillColor = addAlphaToRGB(fillColor, LABELING_MODE_ALPHA); + defaultBorderColor = addAlphaToRGB(defaultBorderColor, 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 segmentFillColor = fillColor; + let segmentBorderColor = defaultBorderColor; + let segmentFillColor = defaultFillColor; if(s.deleted) { segmentBorderColor = deletedSegmentBorderColor; diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts index ebbc3cc..72ef6ab 100644 --- a/src/panel/graph_panel/graph_ctrl.ts +++ b/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(); } diff --git a/src/panel/graph_panel/graph_renderer.ts b/src/panel/graph_panel/graph_renderer.ts index 2f474aa..2a81e58 100644 --- a/src/panel/graph_panel/graph_renderer.ts +++ b/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; diff --git a/src/panel/graph_panel/graph_tooltip.ts b/src/panel/graph_panel/graph_tooltip.ts index 46761eb..97c5f31 100644 --- a/src/panel/graph_panel/graph_tooltip.ts +++ b/src/panel/graph_panel/graph_tooltip.ts @@ -211,7 +211,7 @@ export class GraphTooltip { result += `
- + ${s.analyticUnit.name}:
diff --git a/src/panel/graph_panel/models/analytic_unit.ts b/src/panel/graph_panel/models/analytic_unit.ts index 2841548..8a19cb3 100644 --- a/src/panel/graph_panel/models/analytic_unit.ts +++ b/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; } - get color(): string { return this._panelObject.color; } + set labeledColor(value: string) { this._panelObject.labeledColor = value; } + 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; } diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html index 8a4e3f7..066ee09 100644 --- a/src/panel/graph_panel/partials/tab_analytics.html +++ b/src/panel/graph_panel/partials/tab_analytics.html @@ -39,11 +39,19 @@ /> --> - + + + + + +