correct color application ordering

andymchugh · Apr 12, 2024 · 8311489 · 8311489
1 parent ab1da12
commit 8311489
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/src/components/FlowPanel.tsx b/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> {}
@@ -132,10 +132,8 @@ export const FlowPanel: React.FC<Props> = ({ options, data, width, height, timeZ
     if (svgStr && panelConfig && siteConfig) {
       configInit(siteConfig, panelConfig);
 
-      const gt = grafanaTheme.current;
       const svgDoc = new DOMParser().parseFromString(sanitizeSvgStr(svgStr), "text/xml");
-      const svgAttribs = svgInit(svgDoc, gt.isDark, panelConfig, siteConfig);
-      primeColorCache(gt, svgAttribs, panelConfig.background);
+      const svgAttribs = svgInit(svgDoc, grafanaTheme.current, panelConfig, siteConfig);
       svgHolderRef.current = {
         doc: svgDoc,
         attribs: svgAttribs,

diff --git a/src/components/SvgUpdater.tsx b/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, 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, isDark: boolean, 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,20 +156,27 @@ export function svgInit(doc: Document, isDark: boolean, panelConfig: PanelConfig
   // image won't scale and center corrently
   let dimensions = dimensionCoherence(doc);
 
-  // Set background according to theme if defined in config
-  const bgColor = isDark ? panelConfig.background.darkThemeColor : panelConfig.background.lightThemeColor;
-  if (bgColor) {
-    doc.documentElement.style.backgroundColor = colorLookup(bgColor);
-  }
+
 
-  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) {

diff --git a/yaml_defs/panelConfig.yaml b/yaml_defs/panelConfig.yaml
@@ -30,7 +30,7 @@ variableThresholdScalars:
 #------------------------------------------------------------------------------
 # Panel Config
 
-# 1.6.0 onwards: When undefined the backgrond color is not driven. When defined the color for
+# 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"