diff --git a/src/colors.ts b/src/colors.ts index e63c031..7cebdcd 100644 --- a/src/colors.ts +++ b/src/colors.ts @@ -68,6 +68,15 @@ let colors = [ '#DEDAF7', ]; +export const ANALYTIC_UNIT_COLORS = [ + '#FF99FF', + '#71b1f9', + '#aee9fb', + '#9ce677', + '#f88990', + '#f9e26e', + '#f8c171', +]; export function hexToHsl(color) { return tinycolor(color).toHsl(); diff --git a/src/controllers/analytic_controller.ts b/src/controllers/analytic_controller.ts index 0e2ae45..813dabc 100644 --- a/src/controllers/analytic_controller.ts +++ b/src/controllers/analytic_controller.ts @@ -12,7 +12,9 @@ import { Segment, SegmentId } from '../models/segment'; import { SegmentsSet } from '../models/segment_set'; import { SegmentArray } from '../models/segment_array'; -import { Emitter } from 'grafana/app/core/utils/emitter' +import { ANALYTIC_UNIT_COLORS } from '../colors'; + +import { Emitter } from 'grafana/app/core/utils/emitter'; import _ from 'lodash'; @@ -33,8 +35,9 @@ export class AnalyticController { private _newAnalyticUnit: AnalyticUnit = null; private _creatingNewAnalyticType: boolean = false; private _savingNewAnalyticUnit: boolean = false; - private _tempIdCounted = -1; - private _graphLocked = false; + private _tempIdCounted: number = -1; + private _graphLocked: boolean = false; + private _currentColorIndex: number = 0; private _statusRunners: Set = new Set(); @@ -47,6 +50,7 @@ export class AnalyticController { this._labelingDataDeletedSegments = new SegmentArray(); this._analyticUnitsSet = new AnalyticUnitsSet(this._panelObject.anomalyTypes); this.analyticUnits.forEach(a => this.runEnabledWaiter(a)); + this._currentColorIndex = this._panelObject.anomalyTypes.length % ANALYTIC_UNIT_COLORS.length; } getSegmentsSearcher(): AnalyticSegmentsSearcher { @@ -68,6 +72,9 @@ export class AnalyticController { this._newAnalyticUnit = new AnalyticUnit(); this._creatingNewAnalyticType = true; this._savingNewAnalyticUnit = false; + this._newAnalyticUnit.color = ANALYTIC_UNIT_COLORS[this._currentColorIndex]; + this._currentColorIndex++; + this._currentColorIndex %= ANALYTIC_UNIT_COLORS.length; } async saveNew(metricExpanded: MetricExpanded, datasourceRequest: DatasourceRequest, panelId: number) { diff --git a/src/models/analytic_unit.ts b/src/models/analytic_unit.ts index 2a1bf07..7ae6a5d 100644 --- a/src/models/analytic_unit.ts +++ b/src/models/analytic_unit.ts @@ -3,6 +3,8 @@ import { SegmentArray } from './segment_array'; import { Segment, SegmentId } from './segment'; import { Metric } from './metric'; +import { ANALYTIC_UNIT_COLORS } from '../colors'; + import _ from 'lodash'; @@ -37,7 +39,7 @@ export class AnalyticUnit { this._panelObject = {}; } _.defaults(this._panelObject, { - name: 'AnalyticUnitName', confidence: 0.2, color: 'red', type: 'general' + name: 'AnalyticUnitName', confidence: 0.2, color: ANALYTIC_UNIT_COLORS[0], type: 'general' }); //this._metric = new Metric(_panelObject.metric);