Merge pull request #10 from andymchugh/bgcolor

Bgcolor

CHANGELOG.md

@@ -7,6 +7,12 @@ Fixes x-scaling ratio when the SVG x-dimension is smaller than the available
 window. Now it scales with the window whereas before it scaled at twice the rate
 resulting in it being much smaller than necessary.
 
+Adds the ability to drive the SVG background. New panelConfig terms:
+- background.darkThemeColor
+- background.lightThemeColor
+Can be used with the normal color-names, rbg, hex values. When the relevant term is
+undefined the background color is not driven.
+
 ## 1.5.0
 Fixes the grafana variable threshold matching to break out on first rule
 match for a given variable/cell tuple. Before it was continuing through

src/components/Config.tsx

@@ -18,6 +18,11 @@ export type Link = {
   params: LinkUrlParams;
 };
 
+export type Background = {
+  darkThemeColor: string | undefined;
+  lightThemeColor: string | undefined;
+}
+
 export type PanelConfigCellLabel = {
   dataRef: string | undefined;
   separator: LabelSeparator;
@@ -49,6 +54,7 @@ export type SiteConfig = {
 };
 
 export type PanelConfig = {
+  background: Background;
   variableThresholdScalars: Map<string, VariableThresholdScalars[]>;
   gradientMode: ColorGradientMode;
   cellIdPreamble: string;
@@ -60,6 +66,7 @@ export type PanelConfig = {
 export function panelConfigFactory(config: any) {
   config = config || {};
   return {
+    background: config.background || {},
     variableThresholdScalars: new Map<string, VariableThresholdScalars[]>(Object.entries(config.variableThresholdScalars || {})),
     gradientMode: config.gradientMode || 'none',
     cellIdPreamble: config.cellIdPreamble || '',

src/components/FlowPanel.tsx

@@ -10,7 +10,7 @@ import { svgInit, svgUpdate, SvgHolder } from 'components/SvgUpdater';
 import { seriesExtend, seriesInterpolate , seriesTransform } from 'components/TimeSeries';
 import { TimeSliderFactory } from 'components/TimeSlider';
 import { displayColorsInner, displayDataInner, displayMappingsInner, displaySvgInner } from 'components/DebuggingEditor';
-import { primeColorCache, appendUrlParams, getInstrumenter } from 'components/Utils';
+import { appendUrlParams, getInstrumenter } from 'components/Utils';
 import { addHook, sanitize } from 'dompurify';
 
 interface Props extends PanelProps<FlowOptions> {}
@@ -133,8 +133,7 @@ export const FlowPanel: React.FC<Props> = ({ options, data, width, height, timeZ
       configInit(siteConfig, panelConfig);
 
       const svgDoc = new DOMParser().parseFromString(sanitizeSvgStr(svgStr), "text/xml");
-      const svgAttribs = svgInit(svgDoc, panelConfig, siteConfig);
-      primeColorCache(grafanaTheme.current, svgAttribs);
+      const svgAttribs = svgInit(svgDoc, grafanaTheme.current, panelConfig, siteConfig);
       svgHolderRef.current = {
         doc: svgDoc,
         attribs: svgAttribs,

src/components/SvgUpdater.tsx

@@ -1,11 +1,12 @@
-import { getValueFormatterIndex, formattedValueToString } from '@grafana/data';
+import { getValueFormatterIndex, formattedValueToString, GrafanaTheme2 } from '@grafana/data';
 import { 
    LabelSeparator, Link,
    PanelConfig, PanelConfigCell, PanelConfigCellColor, PanelConfigCellLabel,
    SiteConfig, VariableThresholdScalars } from 'components/Config';
 import { TimeSeriesData } from 'components/TimeSeries';
 import {
-   cellIdFactory, CellIdMaker, getColor,
+   cellIdFactory, CellIdMaker, colorLookup, getColor,
+   primeColorCache,
    variableThresholdScalarsInit, variableThresholdScaleValue } from 'components/Utils';
 
 // Defines the metadata stored against each drivable svg cell
@@ -109,7 +110,7 @@ function recurseElements(el: HTMLElement, cellData: SvgCell, cellIdMaker: CellId
   return false;
 }
 
-export function svgInit(doc: Document, panelConfig: PanelConfig, siteConfig: SiteConfig):  SvgAttribs {
+export function svgInit(doc: Document, grafanaTheme: GrafanaTheme2, panelConfig: PanelConfig, siteConfig: SiteConfig):  SvgAttribs {
   let cells = new Map<string, SvgCell>();
   const cellIdPreamble = panelConfig.cellIdPreamble;
   panelConfig.cells.forEach((cellProps, cellIdShort) => {
@@ -155,14 +156,27 @@ export function svgInit(doc: Document, panelConfig: PanelConfig, siteConfig: Sit
   // image won't scale and center corrently
   let dimensions = dimensionCoherence(doc);
 
-  return {
+
+
+  const svgAttribs = {
     width: dimensions.width,
     height: dimensions.height,
     scaleDrive: dimensions.scaleDrive,
     cells: cells,
     elementLinks: elementLinks,
     variableValues: variableValues,
   };
+
+  // Initialie the color cache and setup the background
+  primeColorCache(grafanaTheme, svgAttribs, panelConfig.background);
+
+  // Set background according to theme if defined in config
+  const bgColor = grafanaTheme.isDark ? panelConfig.background.darkThemeColor : panelConfig.background.lightThemeColor;
+  if (bgColor) {
+    doc.documentElement.style.backgroundColor = colorLookup(bgColor);
+  }
+
+  return svgAttribs;
 } 
 
 function getCellValue(tsName: string, tsData: TimeSeriesData) {

src/components/Utils.tsx

@@ -1,6 +1,6 @@
 import { GrafanaTheme2, colorManipulator } from '@grafana/data';
 import { SvgAttribs, SvgCell } from 'components/SvgUpdater'
-import { PanelConfigCellColor, Threshold ,VariableThresholdScalars } from 'components/Config';
+import { Background, PanelConfigCellColor, Threshold ,VariableThresholdScalars } from 'components/Config';
 
 
 
@@ -66,7 +66,7 @@ function rgbToString(rgb: number[]) {
   return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
 }
 
-export function primeColorCache(theme: GrafanaTheme2, svgAttribs: SvgAttribs) {
+export function primeColorCache(theme: GrafanaTheme2, svgAttribs: SvgAttribs, background: Background) {
   function initCache(thresholds: Threshold[] | undefined) {
     if (thresholds) {
       thresholds.forEach(function(threshold) {
@@ -79,6 +79,13 @@ export function primeColorCache(theme: GrafanaTheme2, svgAttribs: SvgAttribs) {
     initCache(cellData.cellProps.fillColor && cellData.cellProps.fillColor.thresholds);
     initCache(cellData.cellProps.labelColor && cellData.cellProps.labelColor.thresholds);
   });
+
+  if (background.darkThemeColor) {
+    colorStringToRgb(theme, background.darkThemeColor);
+  }
+  if (background.lightThemeColor) {
+    colorStringToRgb(theme, background.lightThemeColor);
+  }
 }
 
 export function colorStringToRgb(theme: GrafanaTheme2, colorStr: string) {

yaml_defs/panelConfig.yaml

@@ -30,6 +30,12 @@ variableThresholdScalars:
 #------------------------------------------------------------------------------
 # Panel Config
 
+# 1.6.0 onwards: When undefined the background color is not driven. When defined the color for
+# the current theme is used. Colors can be entered in all the normal ways of name, hex, hsl, etc.
+background:
+  darkThemeColor: "yellow"
+  lightThemeColor: "green"
+
 # This defines the default color gradientMode. It defines the default value on cell labelColor.gradientMode
 # and fillColor.gradientMode for when the field is undefined. Values are "hue" and "none" with
 # "none" being the default when undefined.