Merge pull request #32 from hastic/Colors#18

New analytic units start with a preset color from the palette

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

@@ -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<AnalyticUnitId> = new Set<AnalyticUnitId>();
 
@@ -47,6 +50,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 {
@@ -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) {

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