@splunk/visualizations 27.5.0 → 28.0.0

package/SingleValue.js

@@ -1,6 +1,7 @@
 /* Copyright © 2020 Splunk Inc.
 SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
 in part without a valid written license from Splunk Inc. is PROHIBITED. */
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -299,8 +300,8 @@ var getTrendColor = ({
   if (Number.isNaN(Number(trendValue))) {
     return void 0;
   }
-  const { defaultFontColor, defaultBlockFontColor, defaultBackgroundColor } = defaultColors;
-  if (hasBackground(customizedBgColor) && !isIdenticalColor(customizedBgColor, defaultBackgroundColor) && !isIdenticalColor(customizedBgColor, defaultBlockFontColor)) {
+  const { defaultFontColor, defaultBlockFontColor, defaultBackgroundColor: defaultBackgroundColor2 } = defaultColors;
+  if (hasBackground(customizedBgColor) && !isIdenticalColor(customizedBgColor, defaultBackgroundColor2) && !isIdenticalColor(customizedBgColor, defaultBlockFontColor)) {
     return defaultBlockFontColor;
   }
   const isInvalidTrend = trendDisplay === "percent" && trendValue === parseFloat(majorValue);
@@ -657,11 +658,16 @@ var handleValueClickCallback = (ev, majorValue, majorValueField, trendValue, onV
     trendValue,
     value: majorValue,
     name: majorValueField
-  }, trellisEnabled && { "trellis.name": trellisSplitBy, "trellis.value": trellisKey })
+  }, trellisEnabled && {
+    "trellis.name": trellisSplitBy,
+    "trellis.value": trellisKey
+  })
 }));
 var getTrendColorWithPercent = (options) => {
   const shouldUsePercentTrendColor = options.trendColor === "> trendValue | rangeValue(trendColorEditorConfig)" && options.trendDisplay === "percent";
-  return shouldUsePercentTrendColor ? { trendColor: "> trendValuePercent | rangeValue(trendColorEditorConfig)" } : {};
+  return shouldUsePercentTrendColor ? {
+    trendColor: "> trendValuePercent | rangeValue(trendColorEditorConfig)"
+  } : {};
 };
 
 // esm-externals:@splunk/react-icons/enterprise/ArrowUp
@@ -962,6 +968,7 @@ var StyledTooltip = styled_components_default.div`
     padding: 3px 8px;
     font-size: 12px;
 `;
+var preventDefault = (e) => e.preventDefault();
 var _SparkLine = class _SparkLine extends react_exports.Component {
   constructor(props, ...rest) {
     super(props, ...rest);
@@ -972,21 +979,99 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     });
     this.state = {
       anchor: null,
-      currentPointX: null,
-      open: false,
-      rectArea: null,
-      tooltip: null
+      activeIndex: 0,
+      hoveredIndex: null,
+      componentIsFocused: false
     };
-    this.titleId = (0, id_exports.createDOMID)();
+    this.titleId = (0, id_exports.createDOMID)("sparkline-title");
+    this.pointRefs = [];
+    this.containerRef = react_default.createRef();
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+  }
+  handleFocus(event) {
+    const { target } = event;
+    const { pointIndex: pointIndexStr } = target.dataset || {};
+    const { activeIndex, componentIsFocused, hoveredIndex } = this.state;
+    if (pointIndexStr !== void 0) {
+      const pointIndex = parseInt(pointIndexStr, 10);
+      if (activeIndex !== pointIndex || !componentIsFocused || hoveredIndex !== null) {
+        this.setState({
+          activeIndex: pointIndex,
+          hoveredIndex: null,
+          componentIsFocused: true
+        });
+      }
+    } else if (this.pointRefs.length > 0) {
+      const indexToFocus = activeIndex ? Math.min(this.pointRefs.length - 1, activeIndex) : 0;
+      this.pointRefs[indexToFocus].focus();
+    }
+  }
+  handleBlur(event) {
+    if (this.containerRef.current && !this.containerRef.current.contains(event.relatedTarget)) {
+      this.setState({ componentIsFocused: false });
+    }
+  }
+  handleKeyDown(event) {
+    const { data } = this.props;
+    const { activeIndex } = this.state;
+    const numPoints = data.length;
+    if (numPoints === 0) {
+      return;
+    }
+    const allowedKeys = ["ArrowLeft", "ArrowRight", "Home", "End"];
+    if (!allowedKeys.includes(event.key)) {
+      return;
+    }
+    let newIndex = activeIndex;
+    switch (event.key) {
+      case "Home":
+        newIndex = 0;
+        break;
+      case "End":
+        newIndex = numPoints - 1;
+        break;
+      case "ArrowLeft":
+        newIndex = Math.max(0, activeIndex - 1);
+        break;
+      case "ArrowRight":
+        newIndex = Math.min(numPoints - 1, activeIndex + 1);
+        break;
+      default:
+        return;
+    }
+    if (newIndex !== activeIndex) {
+      event.preventDefault();
+      if (this.pointRefs[newIndex]) {
+        this.pointRefs[newIndex].focus();
+      }
+    }
+  }
+  handleMouseOver(event) {
+    const pointIndexStr = event.target.dataset && event.target.dataset.pointIndex;
+    if (pointIndexStr !== void 0) {
+      const pointIndex = parseInt(pointIndexStr, 10);
+      if (this.state.hoveredIndex !== pointIndex) {
+        this.setState({ hoveredIndex: pointIndex });
+      }
+    }
+  }
+  handleMouseLeave() {
+    if (this.state.hoveredIndex !== null) {
+      this.setState({ hoveredIndex: null });
+    }
   }
   getMax() {
     const { data, acceptNull, yMax } = this.props;
-    const dataMax = () => acceptNull ? (0, lodash_exports.max)(this.fillNull(data)) : (0, lodash_exports.max)(data);
+    const dataMax = () => acceptNull ? (0, lodash_exports.max)(this.fillNull()) : (0, lodash_exports.max)(data);
     return yMax !== void 0 ? yMax : dataMax();
   }
   getMin() {
     const { data, acceptNull, yMin } = this.props;
-    const dataMin = () => acceptNull ? (0, lodash_exports.min)(this.fillNull(data)) : (0, lodash_exports.min)(data);
+    const dataMin = () => acceptNull ? (0, lodash_exports.min)(this.fillNull()) : (0, lodash_exports.min)(data);
     return yMin !== void 0 ? yMin : dataMin();
   }
   /**
@@ -1066,15 +1151,14 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     })).map((p) => [p.x, p.y]);
   }
   /**
-   * Renders rect area for helping figure out which is the nearest point so that
-   * render related cursor and tooltip.
+   * Renders rect area for each datapoint for interactions and screen reader support
    * @param {Array} points - array of points coordination.
    * @param {Number} xMargin - margin of x axis.
    * @return {Array} array of svg rect objects
    * @private
    */
   renderRect(points, xMargin) {
-    const { data, height } = this.props;
+    const { data, height, showTooltip } = this.props;
     const xUnit = this.getXUnit(xMargin);
     return points.map((p, i) => (
       /* eslint-disable react/no-array-index-key */
@@ -1082,20 +1166,20 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         "rect",
         {
           key: `${i}_${p[0]}`,
+          role: "img",
+          "aria-label": `Value: ${data[i] === null ? "N/A" : data[i]}, point ${i + 1} of ${data.length}`,
           "data-test": `rect-${i}`,
+          "data-point-index": i,
+          tabIndex: showTooltip && this.state.activeIndex === i ? 0 : -1,
+          ref: (el) => {
+            this.pointRefs[i] = el;
+          },
           x: p[0] - xUnit / 2 <= 0 ? 0 : p[0] - xUnit / 2,
           y: 0,
           width: i === 0 && data.length !== 1 ? xUnit / 2 : xUnit,
           height,
           style: { fillOpacity: 0 },
-          onMouseOver: (e) => {
-            this.setState({
-              open: data[i] !== null,
-              rectArea: data[i] === null ? null : e.target,
-              tooltip: data[i],
-              currentPointX: p[0]
-            });
-          }
+          onMouseDown: preventDefault
         }
       )
     ));
@@ -1131,22 +1215,16 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       }
     )));
   }
-  renderCursor() {
-    const {
-      cursorStroke,
-      cursorStrokeWidth,
-      cursorStrokeLinecap,
-      cursorStrokeDasharray,
-      height
-    } = this.props;
-    return this.state.rectArea !== null && /* @__PURE__ */ react_default.createElement(
+  renderCursor(currentPointX, shouldRender) {
+    const { cursorStroke, cursorStrokeWidth, cursorStrokeLinecap, cursorStrokeDasharray, height } = this.props;
+    return shouldRender && /* @__PURE__ */ react_default.createElement(
       "line",
       {
         "data-test": "cursor",
         ref: this.handleCursorMount,
-        x1: this.state.currentPointX,
+        x1: currentPointX,
         y1: 0,
-        x2: this.state.currentPointX,
+        x2: currentPointX,
         y2: height,
         style: {
           stroke: cursorStroke,
@@ -1157,19 +1235,20 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       }
     );
   }
-  renderTooltip() {
-    return this.state.anchor !== null && /* @__PURE__ */ react_default.createElement(
+  renderTooltip(tooltipValue, isOpen) {
+    const { anchor } = this.state;
+    return /* @__PURE__ */ react_default.createElement(
       Popover_default,
       {
         "data-test": "tooltip",
-        open: this.state.open,
-        anchor: this.state.anchor,
-        "data-test-value": this.state.tooltip,
+        open: isOpen,
+        anchor,
+        "data-test-value": tooltipValue,
         appearance: "inverted",
         defaultPlacement: "above",
         animation: false
       },
-      /* @__PURE__ */ react_default.createElement(StyledTooltip, null, this.state.anchor !== null ? this.state.tooltip : void 0)
+      /* @__PURE__ */ react_default.createElement(StyledTooltip, null, tooltipValue)
     );
   }
   /**
@@ -1240,39 +1319,69 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       width,
       title
     } = this.props;
+    const { activeIndex, hoveredIndex, componentIsFocused } = this.state;
     if (data.length === 0) {
       return null;
     }
+    if (this.pointRefs.length !== data.length) {
+      this.pointRefs.length = data.length;
+    }
     const xMargin = endDotRadius + endDotStrokeWidth / 2;
     const yMargin = Math.max(lineStrokeWidth / 2, endDotRadius + endDotStrokeWidth / 2);
     const points = this.dataToPoints(xMargin, yMargin);
     const dotsToShow = Math.max(showEndDot && 1, (0, lodash_exports.isFinite)(endDotCount) && endDotCount > 0 && endDotCount);
+    let currentPointX = null;
+    let tooltipValue = null;
+    let showCursorAndTooltip = false;
+    let interactiveProps = {};
+    if (showTooltip) {
+      const isHovered = hoveredIndex !== null;
+      const shouldDisplayInteractiveElements = (isHovered || componentIsFocused) && data.length > 0;
+      if (shouldDisplayInteractiveElements) {
+        const displayIndex = isHovered ? hoveredIndex : activeIndex;
+        if (displayIndex !== null && displayIndex >= 0 && data.length > displayIndex && points.length > displayIndex) {
+          const displayPointCoords = points[displayIndex];
+          if (displayPointCoords) {
+            [currentPointX] = displayPointCoords;
+          }
+          tooltipValue = data[displayIndex];
+          showCursorAndTooltip = currentPointX !== null;
+        }
+      }
+      interactiveProps = {
+        onKeyDown: this.handleKeyDown,
+        onMouseOver: this.handleMouseOver,
+        onMouseLeave: this.handleMouseLeave,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur
+      };
+    }
+    const ariaLabel = title || (0, i18n_exports._)("Source count over time sparkline trend");
     return /* @__PURE__ */ react_default.createElement(
       "div",
-      __spreadValues({
+      __spreadValues(__spreadValues({
         "data-test": "line",
         "data-test-type": isArea ? "area" : "line",
-        onMouseOut: () => {
-          this.setState({
-            open: false,
-            anchor: null,
-            rectArea: null,
-            currentPointX: null
-          });
-        },
-        ref: elementRef
-      }, (0, lodash_exports.omit)(this.props, (0, lodash_exports.keys)(_SparkLine.propTypes))),
+        role: "group",
+        ref: (el) => {
+          this.containerRef.current = el;
+          if (typeof elementRef === "function") {
+            elementRef(el);
+          } else if (elementRef && typeof elementRef === "object") {
+            elementRef.current = el;
+          }
+        }
+      }, interactiveProps), (0, lodash_exports.omit)(this.props, (0, lodash_exports.keys)(_SparkLine.propTypes))),
       /* @__PURE__ */ react_default.createElement(
         StyledSvg,
         {
           height,
           width,
-          role: "img",
           "aria-labelledby": this.titleId,
           "data-test": "sparkline-svg"
         },
-        /* @__PURE__ */ react_default.createElement("title", { id: this.titleId, "data-test": "sparkline-title" }, title || (0, i18n_exports._)("Source count over time sparkline trend")),
-        /* @__PURE__ */ react_default.createElement("g", null, this.renderCursor(), this.renderPolyline(points), this.renderArea(points), dotsToShow ? this.renderEndDots(points, dotsToShow, xMargin) : null, showTooltip ? this.renderRect(points, xMargin) : null, showTooltip ? this.renderTooltip() : null)
+        /* @__PURE__ */ react_default.createElement("title", { id: this.titleId, "data-test": "sparkline-title" }, ariaLabel),
+        /* @__PURE__ */ react_default.createElement("g", null, showTooltip ? this.renderCursor(currentPointX, showCursorAndTooltip) : null, this.renderPolyline(points), this.renderArea(points), dotsToShow ? this.renderEndDots(points, dotsToShow, xMargin) : null, this.renderRect(points, xMargin), showTooltip ? this.renderTooltip(tooltipValue, showCursorAndTooltip) : null)
       )
     );
   }
@@ -1403,7 +1512,12 @@ var SingleValueSparkline = ({
     endDotStroke: (0, propUtils_exports.formatColor)(stroke),
     endDotFillColor: (0, propUtils_exports.formatColor)(stroke),
     acceptNull,
-    style: { flex: "0 0 auto", justifyContent: "center", display: "flex", alignItems: "flex-end" }
+    style: {
+      flex: "0 0 auto",
+      justifyContent: "center",
+      display: "flex",
+      alignItems: "flex-end"
+    }
   }
 );
 SingleValueSparkline.propTypes = {
@@ -1504,7 +1618,10 @@ var getSparklines = ({
     contentHeight,
     isSparklinePositionBelow
   });
-  const sparklineSegments = getSparklineSegments({ hasSparkline, sparklineHighlightSegments });
+  const sparklineSegments = getSparklineSegments({
+    hasSparkline,
+    sparklineHighlightSegments
+  });
   const endDots = getEndDots({ hasSparkline, sparklineHighlightDots });
   return {
     sparklineWidth,
@@ -1727,7 +1844,7 @@ var SingleValue = (_a) => {
     shouldSparklineAcceptNullData,
     onValueClick,
     defaultFontColor,
-    defaultBackgroundColor,
+    defaultBackgroundColor: defaultBackgroundColor2,
     defaultBlockFontColor,
     sparklineSeverityColors = DEFAULT_SPARKLINE_SEVERITY_COLORS,
     sparklineAreaColor,
@@ -1739,7 +1856,7 @@ var SingleValue = (_a) => {
   } = props;
   const defaultColors = {
     defaultFontColor,
-    defaultBackgroundColor,
+    defaultBackgroundColor: defaultBackgroundColor2,
     defaultBlockFontColor,
     sparklineSeverityColors
   };
@@ -1800,14 +1917,7 @@ var SingleValue = (_a) => {
       { key: "trendDisplay", value: "off" },
       { key: "unit", value: "" }
     ];
-    const {
-      majorText,
-      trendText,
-      majorTextFontSize,
-      trendTextFontSize,
-      majorValueTitle,
-      smallVizProps
-    } = computeSingleValueContent({
+    const { majorText, trendText, majorTextFontSize, trendTextFontSize, majorValueTitle, smallVizProps } = computeSingleValueContent({
       majorValue,
       majorValueDisplay,
       trendValue,
@@ -1837,7 +1947,10 @@ var SingleValue = (_a) => {
       hasSparkline,
       isSparklinePositionBelow,
       majorTextFontSize,
-      underLabelHeight: getUnderLabelHeight({ underLabel, underLabelFontSize })
+      underLabelHeight: getUnderLabelHeight({
+        underLabel,
+        underLabelFontSize
+      })
     });
     const { sparklineWidth, sparklineHeight, sparklineSegments, endDots } = getSparklines({
       width: containerWidth,
@@ -2266,9 +2379,14 @@ var Item = styled_components_default.div.attrs(({ width }) => ({
     position: relative;
     background-color: ${(props) => (0, colorUtils_exports.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor}};
 `;
-var FixSizeItem = styled_components_default.div.attrs(({ width, height }) => ({
-  style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), height && { height: (0, style_exports.toPx)(height) })
-}))`
+var FixSizeItem = styled_components_default.div.attrs(
+  ({
+    width,
+    height
+  }) => ({
+    style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), height && { height: (0, style_exports.toPx)(height) })
+  })
+)`
     position: relative;
     flex-direction: column;
     flex: 1;
@@ -2302,7 +2420,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.5.0 - 5cfbc7064",
+        "data-splunk-visualization-version": "28.0.0 - 0c5f07712",
         width,
         height,
         backgroundColor
@@ -2368,7 +2486,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.5.0 - 5cfbc7064"
+  "data-splunk-visualization-version": "28.0.0 - 0c5f07712"
 })`
     position: relative;
     width: 100%;
@@ -2737,7 +2855,12 @@ var useGetXAndYFields = ({
         y2Fields: options.y2 ? "> y2 | getField()" : void 0,
         fieldTypes: "> primary | getType()"
       };
-      const { xField = "", yFields = [], y2Fields = [], fieldTypes } = Options_exports.Options.evaluate(
+      const {
+        xField = "",
+        yFields = [],
+        y2Fields = [],
+        fieldTypes
+      } = Options_exports.Options.evaluate(
         { options: optionsToEvaluate, context },
         dataSourcesWithOnlyOnePoint,
         () => {
@@ -3351,7 +3474,9 @@ var withDashboardViz = (opts) => {
           return result;
         }
       } catch (e) {
-        console.error(`unexpected error evaluating options: ${e.message}`);
+        if (e instanceof Error) {
+          console.error(`unexpected error evaluating options: ${e.message}`);
+        }
         return {};
       }
       return {};
@@ -3410,7 +3535,11 @@ var withDashboardViz = (opts) => {
           if (ev && ev.payload) {
             payload = ev.payload;
           }
-          return onEventTrigger({ originalEvent: ev, payload, type: eventName });
+          return onEventTrigger({
+            originalEvent: ev,
+            payload,
+            type: eventName
+          });
         };
         if (parentKeys) {
           for (let i = parentKeys.length - 1; i >= 0; i -= 1) {
@@ -3725,11 +3854,9 @@ var StaticBackgroundColorEditor_default = StaticBackgroundColorEditor;
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
   const enhancedConfig = __spreadValues({}, vizConfig);
-  enhancedConfig.editorConfig = vizConfig.editorConfig.map(
-    (config3) => {
-      return __spreadProps(__spreadValues({}, config3), { open: config3.open || false });
-    }
-  );
+  enhancedConfig.editorConfig = vizConfig.editorConfig.map((config3) => {
+    return __spreadProps(__spreadValues({}, config3), { open: config3.open || false });
+  });
   return enhancedConfig;
 }
 function hasCompatibleContexts(vizContext, presetContext) {
@@ -3791,7 +3918,6 @@ var TrellisEditorConfig = [
       editorProps: {
         min: 1
       },
-      placeholder: (0, i18n_exports._)("Auto"),
       showEditor: isTrellisEnabled
     }
   ],
@@ -3860,6 +3986,15 @@ var TrellisBackgroundColorEditor = {
   showEditor: isTrellisEnabled
 };
 
+// src/common/ThemedDefaults.tsx
+var defaultBackgroundColor = (props) => pick_default2({
+  enterprise: {
+    dark: variables_default.black(props),
+    light: variables_default.white(props)
+  },
+  prisma: variables_default.backgroundColorSection(props)
+})(props);
+
 // src/SingleValue/config.ts
 var dataContract = {
   requiredDataSources: [
@@ -3960,13 +4095,7 @@ var themes = {
     enterprise: variables_default.white(props),
     prisma: variables_default.contentColorActive(props)
   })(props),
-  defaultBackgroundColor: (props) => pick_default2({
-    enterprise: {
-      dark: variables_default.black(props),
-      light: variables_default.backgroundColor(props)
-    },
-    prisma: variables_default.backgroundColorSidebar(props)
-  })(props),
+  defaultBackgroundColor,
   defaultSparklineStrokeColor: (props) => pick_default2({
     enterprise: variables_default.textColor(props),
     prisma: variables_default.contentColorActive(props)
@@ -4146,7 +4275,12 @@ var editorConfig = [
           }
         })
       ],
-      [getDynamicMajorColorEditor({ defaultContext, defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig })],
+      [
+        getDynamicMajorColorEditor({
+          defaultContext,
+          defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig
+        })
+      ],
       [
         __spreadProps(__spreadValues({}, StaticTrendColorEditor_default), {
           editorProps: {
@@ -4154,7 +4288,12 @@ var editorConfig = [
           }
         })
       ],
-      [getDynamicTrendColorEditor({ defaultContext, defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig })],
+      [
+        getDynamicTrendColorEditor({
+          defaultContext,
+          defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig
+        })
+      ],
       [
         __spreadProps(__spreadValues({}, StaticBackgroundColorEditor_default), {
           editorProps: {
@@ -4169,7 +4308,12 @@ var editorConfig = [
           }
         })
       ],
-      [getDynamicBackgroundColorEditor({ defaultContext, defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig })],
+      [
+        getDynamicBackgroundColorEditor({
+          defaultContext,
+          defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig
+        })
+      ],
       [
         {
           label: (0, i18n_exports._)("Major value size (px)"),
@@ -4178,7 +4322,6 @@ var editorConfig = [
           editorProps: {
             min: 1
           },
-          placeholder: (0, i18n_exports._)("Auto"),
           showEditor: ({ options }) => options.showValue || options.showValue === void 0
         },
         {
@@ -4188,7 +4331,6 @@ var editorConfig = [
           editorProps: {
             min: 1
           },
-          placeholder: (0, i18n_exports._)("Auto"),
           showEditor: ({ options }) => options.showValue || options.showValue === void 0,
           isDisabled: ({ options }) => options.trendDisplay === "off"
         }
@@ -4381,7 +4523,9 @@ var withTrellis = (Viz) => {
       const evaluated = Options_exports.Options.evaluate(
         {
           context: Viz.config.context,
-          options: { trellisBackgroundColor: mergedOptions.trellisBackgroundColor }
+          options: {
+            trellisBackgroundColor: mergedOptions.trellisBackgroundColor
+          }
         },
         {},
         themeFunc