From 84caf0bc9d63922a3a5c88e5a4c00d0695a58929 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Mon, 21 Jan 2019 12:17:23 +0100 Subject: [PATCH] Make named colors usable in angular code pt 1 --- public/app/plugins/panel/graph/graph.ts | 6 +++- .../plugins/panel/graph/threshold_manager.ts | 9 +++--- .../panel/graph/time_region_manager.ts | 28 +++++++++++++------ .../plugins/panel/graph/time_regions_form.ts | 3 ++ .../app/plugins/panel/heatmap/color_legend.ts | 7 ++++- .../app/plugins/panel/heatmap/heatmap_ctrl.ts | 1 + public/app/plugins/panel/heatmap/rendering.ts | 10 +++++-- public/app/plugins/panel/singlestat/module.ts | 20 +++++++++++-- public/app/plugins/panel/table/module.ts | 5 +++- public/app/plugins/panel/table/renderer.ts | 15 ++++++++-- 10 files changed, 80 insertions(+), 24 deletions(-) diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index 86a6fd1dfd2..78f9d09520b 100755 --- a/public/app/plugins/panel/graph/graph.ts +++ b/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; }); diff --git a/public/app/plugins/panel/graph/threshold_manager.ts b/public/app/plugins/panel/graph/threshold_manager.ts index e7d874e7451..1c782a99d3a 100644 --- a/public/app/plugins/panel/graph/threshold_manager.ts +++ b/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), }); } } diff --git a/public/app/plugins/panel/graph/time_region_manager.ts b/public/app/plugins/panel/graph/time_region_manager.ts index e5ec27ee77a..6d13e37d5c5 100644 --- a/public/app/plugins/panel/graph/time_region_manager.ts +++ b/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]; diff --git a/public/app/plugins/panel/graph/time_regions_form.ts b/public/app/plugins/panel/graph/time_regions_form.ts index 5dc9c4016eb..aa7c94e3cf1 100644 --- a/public/app/plugins/panel/graph/time_regions_form.ts +++ b/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(); } diff --git a/public/app/plugins/panel/heatmap/color_legend.ts b/public/app/plugins/panel/heatmap/color_legend.ts index 0e011e59439..4ba98890a31 100644 --- a/public/app/plugins/panel/heatmap/color_legend.ts +++ b/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)); } } diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts index 71e059a5750..6e2dd148b90 100644 --- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts +++ b/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(); } diff --git a/public/app/plugins/panel/heatmap/rendering.ts b/public/app/plugins/panel/heatmap/rendering.ts index 5d44231e362..68ee65547e2 100644 --- a/public/app/plugins/panel/heatmap/rendering.ts +++ b/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); } diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index b8e24616f0a..25d544d4922 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/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) { diff --git a/public/app/plugins/panel/table/module.ts b/public/app/plugins/panel/table/module.ts index a1366662955..ebc654f8be9 100644 --- a/public/app/plugins/panel/table/module.ts +++ b/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); diff --git a/public/app/plugins/panel/table/renderer.ts b/public/app/plugins/panel/table/renderer.ts index e4cc54e9c40..9f0354a6843 100644 --- a/public/app/plugins/panel/table/renderer.ts +++ b/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) {