Make named colors usable in angular code pt 1

public/app/plugins/panel/graph/graph.ts

@@ -26,6 +26,7 @@ import ReactDOM from 'react-dom';
 import { Legend, GraphLegendProps } from './Legend/Legend';
 
 import { GraphCtrl } from './module';
+import { GrafanaTheme } from '@grafana/ui';
 
 class GraphElement {
   ctrl: GraphCtrl;
@@ -51,7 +52,10 @@ class GraphElement {
     this.panelWidth = 0;
     this.eventManager = new EventManager(this.ctrl);
     this.thresholdManager = new ThresholdManager(this.ctrl);
-    this.timeRegionManager = new TimeRegionManager(this.ctrl);
+    this.timeRegionManager = new TimeRegionManager(
+      this.ctrl,
+      config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark
+    );
     this.tooltip = new GraphTooltip(this.elem, this.ctrl.dashboard, this.scope, () => {
       return this.sortedSeries;
     });

public/app/plugins/panel/graph/threshold_manager.ts

@@ -1,6 +1,7 @@
 import 'vendor/flot/jquery.flot';
 import $ from 'jquery';
 import _ from 'lodash';
+import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
 
 export class ThresholdManager {
   plot: any;
@@ -225,12 +226,12 @@ export class ThresholdManager {
         if (threshold.yaxis === 'right' && this.hasSecondYAxis) {
           options.grid.markings.push({
             y2axis: { from: threshold.value, to: limit },
-            color: fillColor,
+            color: getColorFromHexRgbOrName(fillColor),
           });
         } else {
           options.grid.markings.push({
             yaxis: { from: threshold.value, to: limit },
-            color: fillColor,
+            color: getColorFromHexRgbOrName(fillColor),
           });
         }
       }
@@ -238,12 +239,12 @@ export class ThresholdManager {
         if (threshold.yaxis === 'right' && this.hasSecondYAxis) {
           options.grid.markings.push({
             y2axis: { from: threshold.value, to: threshold.value },
-            color: lineColor,
+            color: getColorFromHexRgbOrName(lineColor),
           });
         } else {
           options.grid.markings.push({
             yaxis: { from: threshold.value, to: threshold.value },
-            color: lineColor,
+            color: getColorFromHexRgbOrName(lineColor),
           });
         }
       }

public/app/plugins/panel/graph/time_region_manager.ts

@@ -1,7 +1,13 @@
 import 'vendor/flot/jquery.flot';
 import _ from 'lodash';
 import moment from 'moment';
-import config from 'app/core/config';
+import { GrafanaTheme } from '@grafana/ui';
+import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
+
+type TimeRegionColorDefinition = {
+  fill: string;
+  line: string;
+};
 
 export const colorModes = {
   gray: {
@@ -38,31 +44,35 @@ export function getColorModes() {
   });
 }
 
-function getColor(timeRegion) {
+function getColor(timeRegion, theme: GrafanaTheme): TimeRegionColorDefinition {
   if (Object.keys(colorModes).indexOf(timeRegion.colorMode) === -1) {
     timeRegion.colorMode = 'red';
   }
 
   if (timeRegion.colorMode === 'custom') {
     return {
-      fill: timeRegion.fillColor,
-      line: timeRegion.lineColor,
+      fill: getColorFromHexRgbOrName(timeRegion.fillColor, theme),
+      line: getColorFromHexRgbOrName(timeRegion.lineColor, theme),
     };
   }
 
   const colorMode = colorModes[timeRegion.colorMode];
+
   if (colorMode.themeDependent === true) {
-    return config.bootData.user.lightTheme ? colorMode.lightColor : colorMode.darkColor;
+    return theme === GrafanaTheme.Light ? colorMode.lightColor : colorMode.darkColor;
   }
 
-  return colorMode.color;
+  return {
+    fill: getColorFromHexRgbOrName(colorMode.color.fill, theme),
+    line: getColorFromHexRgbOrName(colorMode.color.line, theme),
+  };
 }
 
 export class TimeRegionManager {
   plot: any;
   timeRegions: any;
 
-  constructor(private panelCtrl) {}
+  constructor(private panelCtrl, private theme: GrafanaTheme = GrafanaTheme.Dark) {}
 
   draw(plot) {
     this.timeRegions = this.panelCtrl.panel.timeRegions;
@@ -76,7 +86,7 @@ export class TimeRegionManager {
 
     const tRange = { from: moment(this.panelCtrl.range.from).utc(), to: moment(this.panelCtrl.range.to).utc() };
 
-    let i, hRange, timeRegion, regions, fromStart, fromEnd, timeRegionColor;
+    let i, hRange, timeRegion, regions, fromStart, fromEnd, timeRegionColor: TimeRegionColorDefinition;
 
     const timeRegionsCopy = panel.timeRegions.map(a => ({ ...a }));
 
@@ -200,7 +210,7 @@ export class TimeRegionManager {
         }
       }
 
-      timeRegionColor = getColor(timeRegion);
+      timeRegionColor = getColor(timeRegion, this.theme);
 
       for (let j = 0; j < regions.length; j++) {
         const r = regions[j];

public/app/plugins/panel/graph/time_regions_form.ts

@@ -35,6 +35,9 @@ export class TimeRegionFormCtrl {
       colorMode: 'background6',
       fill: true,
       line: false,
+      // Default colors for new
+      fillColor: 'rgba(234, 112, 112, 0.12)',
+      lineColor: 'rgba(237, 46, 24, 0.60)'
     });
     this.panelCtrl.render();
   }

public/app/plugins/panel/heatmap/color_legend.ts

@@ -5,6 +5,8 @@ import { contextSrv } from 'app/core/core';
 import { tickStep } from 'app/core/utils/ticks';
 import { getColorScale, getOpacityScale } from './color_scale';
 import coreModule from 'app/core/core_module';
+import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
+import { GrafanaTheme } from '@grafana/ui';
 
 const LEGEND_HEIGHT_PX = 6;
 const LEGEND_WIDTH_PX = 100;
@@ -247,7 +249,10 @@ function drawSimpleOpacityLegend(elem, options) {
       .attr('width', rangeStep)
       .attr('height', legendHeight)
       .attr('stroke-width', 0)
-      .attr('fill', options.cardColor)
+      .attr(
+        'fill',
+        getColorFromHexRgbOrName(options.cardColor, contextSrv.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark)
+      )
       .style('opacity', d => legendOpacityScale(d));
   }
 }

public/app/plugins/panel/heatmap/heatmap_ctrl.ts

@@ -304,6 +304,7 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
   }
 
   onCardColorChange(newColor) {
+    console.log(newColor)
     this.panel.color.cardColor = newColor;
     this.render();
   }

public/app/plugins/panel/heatmap/rendering.ts

@@ -8,6 +8,8 @@ import * as ticksUtils from 'app/core/utils/ticks';
 import { HeatmapTooltip } from './heatmap_tooltip';
 import { mergeZeroBuckets } from './heatmap_data_converter';
 import { getColorScale, getOpacityScale } from './color_scale';
+import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
+import { GrafanaTheme } from '@grafana/ui';
 
 const MIN_CARD_SIZE = 1,
   CARD_PADDING = 1,
@@ -521,7 +523,6 @@ export class HeatmapRenderer {
     const maxValueAuto = this.data.cardStats.max;
     const maxValue = this.panel.color.max || maxValueAuto;
     const minValue = this.panel.color.min || 0;
-
     const colorScheme = _.find(this.ctrl.colorSchemes, {
       value: this.panel.color.colorScheme,
     });
@@ -662,7 +663,12 @@ export class HeatmapRenderer {
 
   getCardColor(d) {
     if (this.panel.color.mode === 'opacity') {
-      return this.panel.color.cardColor;
+
+      return getColorFromHexRgbOrName(
+        this.panel.color.cardColor,
+        contextSrv.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark
+      );
+
     } else {
       return this.colorScale(d.count);
     }

public/app/plugins/panel/singlestat/module.ts

@@ -8,6 +8,8 @@ import kbn from 'app/core/utils/kbn';
 import config from 'app/core/config';
 import TimeSeries from 'app/core/time_series2';
 import { MetricsPanelCtrl } from 'app/plugins/sdk';
+import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
+import { GrafanaTheme } from '@grafana/ui';
 
 class SingleStatCtrl extends MetricsPanelCtrl {
   static templateUrl = 'module.html';
@@ -479,6 +481,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       plotCanvas.css(plotCss);
 
       const thresholds = [];
+
       for (let i = 0; i < data.thresholds.length; i++) {
         thresholds.push({
           value: data.thresholds[i],
@@ -586,7 +589,10 @@ class SingleStatCtrl extends MetricsPanelCtrl {
             fill: 1,
             zero: false,
             lineWidth: 1,
-            fillColor: panel.sparkline.fillColor,
+            fillColor: getColorFromHexRgbOrName(
+              panel.sparkline.fillColor,
+              config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark
+            ),
           },
         },
         yaxes: { show: false },
@@ -603,7 +609,10 @@ class SingleStatCtrl extends MetricsPanelCtrl {
 
       const plotSeries = {
         data: data.flotpairs,
-        color: panel.sparkline.lineColor,
+        color: getColorFromHexRgbOrName(
+          panel.sparkline.lineColor,
+          config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark
+        ),
       };
 
       $.plot(plotCanvas, [plotSeries], options);
@@ -619,12 +628,17 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       data.thresholds = panel.thresholds.split(',').map(strVale => {
         return Number(strVale.trim());
       });
-      data.colorMap = panel.colors;
+
+      // Map panel colors to hex or rgb/a values
+      data.colorMap = panel.colors.map(color =>
+        getColorFromHexRgbOrName(color, config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark)
+      );
 
       const body = panel.gauge.show ? '' : getBigValueHtml();
 
       if (panel.colorBackground) {
         const color = getColorForValue(data, data.value);
+        console.log(color);
         if (color) {
           $panelContainer.css('background-color', color);
           if (scope.fullscreen) {

public/app/plugins/panel/table/module.ts

@@ -1,10 +1,12 @@
 import _ from 'lodash';
 import $ from 'jquery';
 import { MetricsPanelCtrl } from 'app/plugins/sdk';
+import config from 'app/core/config';
 import { transformDataToTable } from './transformers';
 import { tablePanelEditor } from './editor';
 import { columnOptionsTab } from './column_options';
 import { TableRenderer } from './renderer';
+import { GrafanaTheme } from '@grafana/ui';
 
 class TablePanelCtrl extends MetricsPanelCtrl {
   static templateUrl = 'module.html';
@@ -129,7 +131,8 @@ class TablePanelCtrl extends MetricsPanelCtrl {
       this.table,
       this.dashboard.isTimezoneUtc(),
       this.$sanitize,
-      this.templateSrv
+      this.templateSrv,
+      config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark,
     );
 
     return super.render(this.table);

public/app/plugins/panel/table/renderer.ts

@@ -1,12 +1,21 @@
 import _ from 'lodash';
 import moment from 'moment';
 import kbn from 'app/core/utils/kbn';
+import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
+import { GrafanaTheme } from '@grafana/ui';
 
 export class TableRenderer {
   formatters: any[];
   colorState: any;
 
-  constructor(private panel, private table, private isUtc, private sanitize, private templateSrv) {
+  constructor(
+    private panel,
+    private table,
+    private isUtc,
+    private sanitize,
+    private templateSrv,
+    private theme?: GrafanaTheme
+  ) {
     this.initColumns();
   }
 
@@ -49,10 +58,10 @@ export class TableRenderer {
     }
     for (let i = style.thresholds.length; i > 0; i--) {
       if (value >= style.thresholds[i - 1]) {
-        return style.colors[i];
+        return getColorFromHexRgbOrName(style.colors[i], this.theme);
       }
     }
-    return _.first(style.colors);
+    return getColorFromHexRgbOrName(_.first(style.colors), this.theme);
   }
 
   defaultCellFormatter(v, style) {