@splunk/visualizations 27.5.0 → 28.1.0

package/Punchcard.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;
@@ -125,41 +126,21 @@ var defaultImport6 = __toESM(require("@splunk/visualization-icons/placeholders")
 __reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
 var placeholders_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
 
-// esm-externals:@splunk/themes/pick
-var pick_exports = {};
-__export(pick_exports, {
-  default: () => pick_default
-});
-var defaultImport7 = __toESM(require("@splunk/themes/pick"));
-__reExport(pick_exports, require("@splunk/themes/pick"));
-var pick_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
-
-// esm-externals:@splunk/themes/variables
-var variables_exports = {};
-__export(variables_exports, {
-  default: () => variables_default
-});
-var defaultImport8 = __toESM(require("@splunk/themes/variables"));
-__reExport(variables_exports, require("@splunk/themes/variables"));
-var variables_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
-
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport9 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport7 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+var configUtils_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
 
 // 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;
 }
 
@@ -181,6 +162,33 @@ var background = ({
 ];
 var BackgroundColor_default = background;
 
+// esm-externals:@splunk/themes/pick
+var pick_exports = {};
+__export(pick_exports, {
+  default: () => pick_default
+});
+var defaultImport8 = __toESM(require("@splunk/themes/pick"));
+__reExport(pick_exports, require("@splunk/themes/pick"));
+var pick_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+
+// esm-externals:@splunk/themes/variables
+var variables_exports = {};
+__export(variables_exports, {
+  default: () => variables_default
+});
+var defaultImport9 = __toESM(require("@splunk/themes/variables"));
+__reExport(variables_exports, require("@splunk/themes/variables"));
+var variables_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+
+// src/common/ThemedDefaults.tsx
+var defaultBackgroundColor = (props) => pick_default({
+  enterprise: {
+    dark: variables_default.black(props),
+    light: variables_default.white(props)
+  },
+  prisma: variables_default.backgroundColorSection(props)
+})(props);
+
 // src/Punchcard/config.ts
 var dataContract = {
   requiredDataSources: [
@@ -210,13 +218,7 @@ var defaultContext = {
   }
 };
 var themes = {
-  defaultBackgroundColor: (props) => pick_default({
-    enterprise: {
-      dark: variables_default.black(props),
-      light: variables_default.backgroundColor(props)
-    },
-    prisma: variables_default.backgroundColorSidebar(props)
-  })(props)
+  defaultBackgroundColor
 };
 var editorConfig = [
   {
@@ -726,9 +728,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;
@@ -762,7 +769,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.5.0 - 5cfbc7064",
+        "data-splunk-visualization-version": "28.1.0 - 4a1bff08b",
         width,
         height,
         backgroundColor
@@ -828,7 +835,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.1.0 - 4a1bff08b"
 })`
     position: relative;
     width: 100%;
@@ -1197,7 +1204,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,
         () => {
@@ -1478,7 +1490,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 {};
@@ -1535,9 +1549,13 @@ var withDashboardViz = (opts) => {
         }
         eventCallbackProps[eventCallbackPropName] = (ev) => {
           if (ev && ev.payload) {
-            payload = ev.payload;
+            payload = __spreadValues({}, 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) {
@@ -1917,6 +1935,30 @@ var getElementToFocus = ({
   }
   return newEl;
 };
+function calculateLuminance(fg, bg) {
+  const hexToRgb = (hex) => {
+    const clean = hex == null ? void 0 : hex.replace("#", "");
+    const r2 = parseInt(clean.slice(0, 2), 16);
+    const g2 = parseInt(clean.slice(2, 4), 16);
+    const b2 = parseInt(clean.slice(4, 6), 16);
+    const a = clean.length === 8 ? parseInt(clean.slice(6, 8), 16) / 255 : 1;
+    return { r: r2, g: g2, b: b2, a };
+  };
+  const { r: fr, g: fgG, b: fb, a: opacity } = hexToRgb(fg);
+  const { r: br, g: bgG, b: bb } = hexToRgb(bg);
+  const blendChannel = (bgC, fgC) => Math.round(bgC * (1 - opacity) + fgC * opacity);
+  const r = blendChannel(br, fr);
+  const g = blendChannel(bgG, fgG);
+  const b = blendChannel(bb, fb);
+  const linearize = (c) => {
+    const x = c / 255;
+    return x <= 0.03928 ? x / 12.92 : __pow((x + 0.055) / 1.055, 2.4);
+  };
+  const R = linearize(r);
+  const G = linearize(g);
+  const B = linearize(b);
+  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+}
 
 // esm-externals:lodash/findIndex
 var findIndex_exports = {};
@@ -1972,9 +2014,25 @@ var TIME_RANGES = {
   ],
   wday: [
     { monday: true, mon: true, "mon.": true },
-    { tuesday: true, tu: true, "tu.": true, tue: true, "tue.": true, tues: true, "tues.": true },
+    {
+      tuesday: true,
+      tu: true,
+      "tu.": true,
+      tue: true,
+      "tue.": true,
+      tues: true,
+      "tues.": true
+    },
     { wednesday: true, wed: true, "wed.": true },
-    { thursday: true, th: true, "th.": true, thur: true, "thur.": true, thurs: true, "thurs.": true },
+    {
+      thursday: true,
+      th: true,
+      "th.": true,
+      thur: true,
+      "thur.": true,
+      thurs: true,
+      "thurs.": true
+    },
     { friday: true, fri: true, "fri.": true },
     { saturday: true, sat: true, "sat.": true },
     { sunday: true, sun: true, "sun.": true }
@@ -2083,11 +2141,7 @@ var sortAxis = (axis) => {
 var AxisLabelText = styled_components_default.text`
     cursor: pointer;
     dominant-baseline: middle;
-    fill: ${pick_default({
-  /* was previously named textColor in themeReg */
-  enterprise: variables_default.textColor,
-  prisma: variables_default.contentColorDefault
-})};
+    fill: ${variables_default.contentColorDefault};
     font-size: 12px;
     text-anchor: ${(props) => props.orientation === "horizontal" /* HORIZONTAL */ ? "middle" : "start"};
     opacity: ${(props) => props.muted ? 0.15 : 1};
@@ -2159,18 +2213,18 @@ PunchcardAxis.propTypes = propTypes3;
 PunchcardAxis.defaultProps = defaultProps;
 var PunchcardAxis_default = PunchcardAxis;
 
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport37 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+
 // src/Punchcard/PurePunchcard/src/PunchcardBubble.tsx
 var BubbleCircle = styled_components_default.circle`
-    fill: ${(props) => props.outline ? pick_default({
-  // bubbleTextColor
-  enterprise: {
-    light: variables_default.white,
-    // equal to enterpriseDark.textColor
-    dark: variables_default.contentColorInverted
-    // enterprise.textColor
-  },
-  prisma: variables_default.contentColorActive
-})(props) : props.color};
+    fill: ${(props) => props.outline ? themes_exports.variables.contentColorActive : props.color};
     fill-opacity: 1;
     opacity: ${(props) => props.hover ? 0 : props.fillOpacity};
     stroke: ${(props) => props.outline ? props.color : "none"};
@@ -2197,17 +2251,7 @@ var BubbleGroup = styled_components_default.g`
 var BubbleLabelText = styled_components_default.text`
     dominant-baseline: middle;
     opacity: ${(props) => props.displayLabel ? 1 : 0};
-    fill: ${(props) => props.hover || props.outline ? pick_default({
-  // bubbleAltTextColor
-  enterprise: variables_default.textColor,
-  prisma: variables_default.contentColorActive
-})(props) : pick_default({
-  enterprise: {
-    dark: variables_default.textColor,
-    light: variables_default.white
-  },
-  prisma: variables_default.contentColorActive
-})(props)};
+    fill: ${(props) => props.hover || props.outline ? themes_exports.variables.contentColorActive : props.textColor};
     font-size: ${(props) => props.hover ? "12px" : "10px"};
     font-weight: ${(props) => props.hover ? 500 : "normal"};
     text-anchor: middle;
@@ -2215,6 +2259,7 @@ var BubbleLabelText = styled_components_default.text`
 var MIN_BUBBLE_SIZE_TO_DISPLAY_LABEL = 13;
 var MAX_DISPLAYABLE_VALUE = 99499999999999;
 var VALUE_OVERFLOW_TEXT = "99T+";
+var WCAG_LUMINANCE_THRESHOLD = 0.182;
 var PunchcardBubble = (props) => {
   const {
     showBubbleLabel,
@@ -2231,16 +2276,22 @@ var PunchcardBubble = (props) => {
     r,
     handlePointClick,
     accessibleLabel,
-    tabindex
+    tabindex,
+    backgroundColor
   } = props;
   const outline = value < 0;
   const showPulsateBubble = pulsate && !muted && !hover;
   const displayLabel = hover || showBubbleLabel && r >= MIN_BUBBLE_SIZE_TO_DISPLAY_LABEL;
   const hasData = !!value;
+  let bubbleTextColor = themes_exports.variables.black;
   let bubbleLabelValueText = value <= MAX_DISPLAYABLE_VALUE ? (0, numberUtils_exports.formatNumber)(value, 0, { useTrendUnits: true }) : VALUE_OVERFLOW_TEXT;
   if (hover) {
     bubbleLabelValueText = (0, numberUtils_exports.formatNumber)(value, 2);
   }
+  if (color && backgroundColor) {
+    const luminance = calculateLuminance(color, backgroundColor) || 0;
+    bubbleTextColor = luminance > WCAG_LUMINANCE_THRESHOLD ? themes_exports.variables.black : themes_exports.variables.white;
+  }
   return /* @__PURE__ */ react_exports.createElement(
     BubbleGroup,
     {
@@ -2274,7 +2325,8 @@ var PunchcardBubble = (props) => {
         hover,
         outline,
         displayLabel,
-        "aria-label": accessibleLabel
+        "aria-label": accessibleLabel,
+        textColor: bubbleTextColor
       },
       hasData ? bubbleLabelValueText : (0, i18n_exports._)("Null")
     )
@@ -2282,6 +2334,7 @@ var PunchcardBubble = (props) => {
 };
 var propTypes4 = {
   showBubbleLabel: prop_types_exports.bool,
+  backgroundColor: prop_types_exports.string,
   color: prop_types_exports.string,
   cx: prop_types_exports.number,
   cy: prop_types_exports.number,
@@ -2299,6 +2352,7 @@ var propTypes4 = {
 };
 var defaultProps2 = {
   showBubbleLabel: true,
+  backgroundColor: null,
   color: "#46D3BB",
   cx: 0,
   cy: 0,
@@ -2325,6 +2379,7 @@ var PunchcardBubble_default = PunchcardBubble;
 var PunchcardRow = (props) => {
   const {
     showBubbleLabels,
+    backgroundColor,
     category,
     colors,
     handleMouseEnter,
@@ -2351,7 +2406,11 @@ var PunchcardRow = (props) => {
     const cx = xScale(xValue);
     const r = radiusValues[index];
     const fillOpacity = opacities[index];
-    const hover = isSomethingSelected({ selectedX, selectedY, selectedCategory }) && isBubbleSelected({
+    const hover = isSomethingSelected({
+      selectedX,
+      selectedY,
+      selectedCategory
+    }) && isBubbleSelected({
       selectedX,
       selectedY,
       selectedCategory,
@@ -2359,14 +2418,24 @@ var PunchcardRow = (props) => {
       yValue,
       categoryValue
     });
-    const muted = isSomethingSelected({ selectedX, selectedY, selectedCategory }) && !hover;
+    const muted = isSomethingSelected({
+      selectedX,
+      selectedY,
+      selectedCategory
+    }) && !hover;
     const showBubbleLabel = showBubbleLabels === "all" /* ALL */ || showBubbleLabels === "max" /* MAX */ && maxSizeValue === sizeValue;
-    const accessibleLabel = getBubbleAccessibleName({ categoryValue, xValue, yValue, sizeValue });
+    const accessibleLabel = getBubbleAccessibleName({
+      categoryValue,
+      xValue,
+      yValue,
+      sizeValue
+    });
     return /* @__PURE__ */ react_exports.createElement(
       PunchcardBubble_default,
       {
         key: `${xValue}-${yValue}-${sizeValue}-${categoryValue}`,
         showBubbleLabel,
+        backgroundColor,
         color: colorValue,
         cx,
         cy: yPosition,
@@ -2389,6 +2458,7 @@ var PunchcardRow = (props) => {
 };
 var propTypes5 = {
   showBubbleLabels: prop_types_exports.oneOf(Object.values(BUBBLE_LABELS_TYPES)),
+  backgroundColor: prop_types_exports.string,
   category: prop_types_exports.arrayOf(prop_types_exports.string),
   colors: prop_types_exports.arrayOf(prop_types_exports.string),
   handleMouseEnter: prop_types_exports.func,
@@ -2409,6 +2479,7 @@ var propTypes5 = {
   handlePointClick: prop_types_exports.func
 };
 var defaultProps3 = {
+  backgroundColor: null,
   showBubbleLabels: null,
   category: null,
   colors: null,
@@ -2441,6 +2512,7 @@ var PunchcardRow_default = (0, styled_components_exports.withTheme)(PunchcardRow
 var PunchcardChartArea = (props) => {
   const {
     showBubbleLabels,
+    backgroundColor,
     bubbleRowScale,
     bubbleScale,
     category,
@@ -2520,13 +2592,15 @@ var PunchcardChartArea = (props) => {
         yIndex: index,
         yPosition,
         yValue: row,
-        handlePointClick
+        handlePointClick,
+        backgroundColor
       }
     );
   }));
 };
 var propTypes6 = {
   showBubbleLabels: prop_types_exports.oneOf(Object.values(BUBBLE_LABELS_TYPES)),
+  backgroundColor: prop_types_exports.string,
   bubbleRowScale: prop_types_exports.oneOf(Object.values(BUBBLE_ROW_SCALE_TYPES)),
   bubbleScale: prop_types_exports.oneOf(Object.values(BUBBLE_SCALE_TYPES)),
   category: prop_types_exports.arrayOf(prop_types_exports.string),
@@ -2556,6 +2630,7 @@ var propTypes6 = {
 };
 var defaultProps4 = {
   showBubbleLabels: "all" /* ALL */,
+  backgroundColor: null,
   bubbleRowScale: "row" /* ROW */,
   bubbleScale: "area" /* AREA */,
   category: null,
@@ -2615,11 +2690,7 @@ var LegendIcon = styled_components_default.rect`
 `;
 var LegendText = styled_components_default.text`
     dominant-baseline: middle;
-    fill: ${pick_default({
-  /* was previously named textColor in themeReg */
-  enterprise: variables_default.textColor,
-  prisma: variables_default.contentColorDefault
-})};
+    fill: ${variables_default.contentColorDefault};
     font-size: 12px;
 `;
 var PunchcardLegend = (props) => {
@@ -2705,13 +2776,7 @@ var PunchcardLegend_default = PunchcardLegend;
 
 // src/Punchcard/PurePunchcard/src/PunchcardGridLines.tsx
 var GridLine = styled_components_default.line`
-    stroke: ${pick_default({
-  enterprise: {
-    light: variables_default.gray96,
-    dark: variables_default.gray25
-  },
-  prisma: variables_default.interactiveColorBackgroundDisabled
-})};
+    stroke: ${variables_default.borderColorWeak};
     stroke-width: 1px;
 `;
 var PunchcardGridLines = (props) => {
@@ -3021,7 +3086,8 @@ var Punchcard = (props) => {
           xScale: xPositionScale,
           y,
           yScale: yPositionScale,
-          handlePointClick
+          handlePointClick,
+          backgroundColor
         }
       ), /* @__PURE__ */ react_exports.createElement("filter", { id: GRAYSCALE_FILTER_ID }, /* @__PURE__ */ react_exports.createElement(
         "feColorMatrix",