New analytic units start with a preset color from the palette

(redo previous color branch)

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();

src/controllers/analytic_controller.ts

@@ -14,6 +14,7 @@ import { SegmentArray } from '../models/segment_array';
 
 import { Emitter } from 'grafana/app/core/utils/emitter'
 
+import { ANALYTIC_UNIT_COLORS } from '../colors';
 import _ from 'lodash';
 
 
@@ -35,6 +36,7 @@ export class AnalyticController {
   private _savingNewAnalyticUnit: boolean = false;
   private _tempIdCounted = -1;
   private _graphLocked = false;
+  private _currentColorIndex = 0;
 
   private _statusRunners: Set<AnalyticUnitId> = new Set<AnalyticUnitId>();
 
@@ -47,6 +49,7 @@ export class AnalyticController {
     this._labelingDataDeletedSegments = new SegmentArray<AnalyticSegment>();
     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 {
@@ -65,9 +68,11 @@ export class AnalyticController {
   }
 
   createNew() {
-    this._newAnalyticUnit = new AnalyticUnit();
+    this._newAnalyticUnit = new AnalyticUnit(undefined, ANALYTIC_UNIT_COLORS[this._currentColorIndex]);
     this._creatingNewAnalyticType = true;
     this._savingNewAnalyticUnit = false;
+    this._currentColorIndex++;
+    this._currentColorIndex %= ANALYTIC_UNIT_COLORS.length;
   }
 
   async saveNew(metricExpanded: MetricExpanded, datasourceRequest: DatasourceRequest, panelId: number) {

src/models/analytic_unit.ts

@@ -3,7 +3,9 @@ import { SegmentArray } from './segment_array';
 import { Segment, SegmentId } from './segment';
 import { Metric } from './metric';
 
+import { ANALYTIC_UNIT_COLORS } from '../colors';
 import _ from 'lodash';
+import { AnalyticController } from 'controllers/analytic_controller';
 
 
 export type AnalyticSegmentPair = { anomalyType: AnalyticUnit, segment: AnalyticSegment };
@@ -29,15 +31,16 @@ export class AnalyticUnit {
   private _status: string;
   private _error: string;
   private _metric: Metric;
+  private _color: string;
 
   private _alertEnabled?: boolean;
 
-  constructor(private _panelObject?: any) {
+  constructor(private _panelObject?: any, color?: string) {
     if(_panelObject === undefined) {
       this._panelObject = {};
     }
     _.defaults(this._panelObject, {
-      name: 'AnalyticUnitName', confidence: 0.2, color: 'red', type: 'general'
+      name: 'AnalyticUnitName', confidence: 0.2, color, type: 'general'
     });
 
     //this._metric = new Metric(_panelObject.metric);