@splunk/visualizations 27.0.0 → 27.2.0

package/Punchcard.js

@@ -60,7 +60,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/Punchcard/Punchcard.ts
+// src/Punchcard/index.ts
 var Punchcard_exports = {};
 __export(Punchcard_exports, {
   PurePunchcard: () => PurePunchcard,
@@ -762,7 +762,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.0.0 - 9bf093b7d",
+        "data-splunk-visualization-version": "27.2.0 - 2e7eda8d4",
         width,
         height,
         backgroundColor
@@ -828,7 +828,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.0.0 - 9bf093b7d"
+  "data-splunk-visualization-version": "27.2.0 - 2e7eda8d4"
 })`
     position: relative;
     width: 100%;
@@ -1315,6 +1315,25 @@ var getFeatureFlag = (context, flagName) => {
   return false;
 };
 
+// esm-externals:@splunk/visualizations-shared/trellisUtils
+var trellisUtils_exports = {};
+__export(trellisUtils_exports, {
+  default: () => trellisUtils_default
+});
+var defaultImport29 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+__reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
+var trellisUtils_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+
+// src/common/utils/trellisUtils.ts
+var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
+  if (isTrellisOn && !options.legendDisplay) {
+    return {
+      legendDisplay: "off"
+    };
+  }
+  return {};
+};
+
 // src/common/withDashboardViz.tsx
 var withDashboardViz = (opts) => {
   const {
@@ -1322,6 +1341,8 @@ var withDashboardViz = (opts) => {
     vizConfig,
     computeVizProps: computeVizProps2 = () => {
     },
+    computeVizPropsBeforeEval = () => {
+    },
     disableEditModeCover,
     useIconPlaceholder
   } = opts;
@@ -1371,14 +1392,26 @@ var withDashboardViz = (opts) => {
     const isDownsamplingEnabledByFeatureFlag = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableDownsampling
     );
+    const isTrellisFeatureFlagOn = Boolean(
+      featureFlagContext && featureFlagContext.visualizations_enableTrellis
+    );
+    const isTrellisOn = isTrellisFeatureFlagOn && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (options == null ? void 0 : options.splitByLayout) === "trellis" /* TRELLIS */;
     const isMounted = react_exports.useRef(true);
-    const optionsToEvaluate = react_exports.useMemo(
-      () => ({
+    const optionsToEvaluate = react_exports.useMemo(() => {
+      var _a2;
+      const legendDisplay = turnOffLegendDisplayWhenTrellisIsOn(isTrellisOn, options);
+      const computedOptions = (_a2 = computeVizPropsBeforeEval(options)) != null ? _a2 : {};
+      return {
         context: (0, lodash_exports.defaultsDeep)({}, context, vizConfig.defaultContext),
-        options: (0, hocUtils_exports.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
-      }),
-      [options, context]
-    );
+        options: (0, hocUtils_exports.deepMergeWithArrayPrimitiveOverrides)(
+          {},
+          legendDisplay,
+          computedOptions,
+          options,
+          defaultOptions
+        )
+      };
+    }, [isTrellisOn, options, context]);
     const [threshold, setThreshold] = react_exports.useState(Number(width));
     const onDownsamplingThresholdChange = react_exports.useCallback((newThreshold) => {
       setThreshold(newThreshold);
@@ -1459,11 +1492,8 @@ var withDashboardViz = (opts) => {
       useAsyncEvaluatedOptions
     ]);
     const evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
-    const isTrellisFeatureFlagOn = Boolean(
-      featureFlagContext && featureFlagContext.visualizations_enableTrellis
-    );
     let clonedEvaluatedOptions = evaluatedOptionsToUse;
-    if (isTrellisFeatureFlagOn && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.splitByLayout) === "trellis" /* TRELLIS */) {
+    if (isTrellisOn) {
       clonedEvaluatedOptions = __spreadProps(__spreadValues({}, evaluatedOptionsToUse), {
         backgroundColor: clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor
       });
@@ -1574,18 +1604,27 @@ var types_exports = {};
 __export(types_exports, {
   default: () => types_default
 });
-var defaultImport29 = __toESM(require("@splunk/visualization-encoding/utils/types"));
+var defaultImport30 = __toESM(require("@splunk/visualization-encoding/utils/types"));
 __reExport(types_exports, require("@splunk/visualization-encoding/utils/types"));
-var types_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+var types_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+
+// esm-externals:@splunk/ui-utils/keyboard
+var keyboard_exports = {};
+__export(keyboard_exports, {
+  default: () => keyboard_default
+});
+var defaultImport31 = __toESM(require("@splunk/ui-utils/keyboard"));
+__reExport(keyboard_exports, require("@splunk/ui-utils/keyboard"));
+var keyboard_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // esm-externals:d3-scale
 var d3_scale_exports = {};
 __export(d3_scale_exports, {
   default: () => d3_scale_default
 });
-var defaultImport30 = __toESM(require("d3-scale"));
+var defaultImport32 = __toESM(require("d3-scale"));
 __reExport(d3_scale_exports, require("d3-scale"));
-var d3_scale_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+var d3_scale_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
 
 // src/Punchcard/PurePunchcard/src/utils/punchcardUtils.ts
 var AXIS_ORIENTATION_TYPES = /* @__PURE__ */ ((AXIS_ORIENTATION_TYPES2) => {
@@ -1777,42 +1816,144 @@ var truncateAxisLabelText = ({
   }
   return `${label.slice(0, endMarker)}...`;
 };
+var getBubbleAccessibleName = ({ categoryValue, xValue, yValue, sizeValue }) => {
+  if (sizeValue) {
+    return categoryValue ? `Category: ${categoryValue}, X: ${xValue}, Y: ${yValue}, Size: ${sizeValue}` : `X: ${xValue}, Y: ${yValue}, Size: ${sizeValue}`;
+  }
+  return `There's no data for point: X: ${xValue}, Y: ${yValue}`;
+};
+var addNullValuesToRowData = ({ rowData, uniqX }) => {
+  const newRowData = uniqX.flatMap((singleX) => {
+    const indexesOfSingleXInRowData = rowData.rowXValues.map((element, index) => element === singleX ? index : -1).filter((index) => index !== -1);
+    if (indexesOfSingleXInRowData.length === 0) {
+      return {
+        rowXValues: singleX,
+        rowSizeValues: null,
+        rowCategoryValues: null,
+        rowColorValues: null,
+        rowFillOpacityValues: null,
+        rowRadiusValues: null
+      };
+    }
+    return indexesOfSingleXInRowData.map((indexOfSingleXInRowData) => {
+      return {
+        rowXValues: singleX,
+        rowSizeValues: rowData.rowSizeValues[indexOfSingleXInRowData],
+        rowCategoryValues: rowData.rowCategoryValues[indexOfSingleXInRowData],
+        rowColorValues: rowData.rowColorValues[indexOfSingleXInRowData],
+        rowFillOpacityValues: rowData.rowFillOpacityValues[indexOfSingleXInRowData],
+        rowRadiusValues: rowData.rowRadiusValues[indexOfSingleXInRowData]
+      };
+    });
+  });
+  return newRowData.reduce(
+    (acc, obj) => {
+      Object.keys(obj).forEach((key) => {
+        acc[key].push(obj[key]);
+      });
+      return acc;
+    },
+    {
+      rowXValues: [],
+      rowSizeValues: [],
+      rowCategoryValues: [],
+      rowColorValues: [],
+      rowFillOpacityValues: [],
+      rowRadiusValues: [],
+      rowSizeScale: rowData.rowSizeScale
+    }
+  );
+};
+var getElementToFocus = ({
+  category,
+  bubbleSizes,
+  x,
+  y,
+  uniqX,
+  uniqY,
+  selectedX,
+  selectedY,
+  selectedCategory,
+  key
+}) => {
+  const elementsByColumnsWithValues = x.map((el, i) => {
+    var _a;
+    return {
+      x: el,
+      y: y[i],
+      category: (_a = category[i]) != null ? _a : null,
+      size: bubbleSizes[i]
+    };
+  });
+  const elementsByColumns = uniqX.flatMap(
+    (uX) => uniqY.flatMap((uY) => {
+      const indexesOfElement = elementsByColumnsWithValues.map((el, index) => el.x === uX && el.y === uY ? index : -1).filter((index) => index !== -1);
+      if (indexesOfElement.length > 0) {
+        return indexesOfElement.map((indexOfElement) => elementsByColumnsWithValues[indexOfElement]);
+      }
+      return {
+        x: uX,
+        y: uY,
+        size: null,
+        category: null
+      };
+    })
+  );
+  const elementsByRows = uniqY.flatMap((uniqYEl) => elementsByColumns.filter((el) => el.y === uniqYEl));
+  const currentElIndexInColumns = elementsByColumns.findIndex(
+    (el) => el.x === selectedX && el.y === selectedY && el.category === selectedCategory
+  );
+  const currentElIndexInRows = elementsByRows.findIndex(
+    (el) => el.x === selectedX && el.y === selectedY && el.category === selectedCategory
+  );
+  let newEl;
+  if (key === "down") {
+    newEl = elementsByColumns[currentElIndexInColumns + 1];
+  } else if (key === "up") {
+    newEl = elementsByColumns[currentElIndexInColumns - 1];
+  } else if (key === "right") {
+    newEl = elementsByRows[currentElIndexInRows + 1];
+  } else if (key === "left") {
+    newEl = elementsByRows[currentElIndexInRows - 1];
+  }
+  return newEl;
+};
 
 // esm-externals:lodash/findIndex
 var findIndex_exports = {};
 __export(findIndex_exports, {
   default: () => findIndex_default
 });
-var defaultImport31 = __toESM(require("lodash/findIndex"));
+var defaultImport33 = __toESM(require("lodash/findIndex"));
 __reExport(findIndex_exports, require("lodash/findIndex"));
-var findIndex_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var findIndex_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // esm-externals:lodash/find
 var find_exports = {};
 __export(find_exports, {
   default: () => find_default
 });
-var defaultImport32 = __toESM(require("lodash/find"));
+var defaultImport34 = __toESM(require("lodash/find"));
 __reExport(find_exports, require("lodash/find"));
-var find_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var find_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // esm-externals:lodash/sortBy
 var sortBy_exports = {};
 __export(sortBy_exports, {
   default: () => sortBy_default
 });
-var defaultImport33 = __toESM(require("lodash/sortBy"));
+var defaultImport35 = __toESM(require("lodash/sortBy"));
 __reExport(sortBy_exports, require("lodash/sortBy"));
-var sortBy_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var sortBy_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // esm-externals:lodash/flattenDeep
 var flattenDeep_exports = {};
 __export(flattenDeep_exports, {
   default: () => flattenDeep_default
 });
-var defaultImport34 = __toESM(require("lodash/flattenDeep"));
+var defaultImport36 = __toESM(require("lodash/flattenDeep"));
 __reExport(flattenDeep_exports, require("lodash/flattenDeep"));
-var flattenDeep_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var flattenDeep_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // src/Punchcard/PurePunchcard/src/utils/sortUtils.js
 var TIME_RANGES = {
@@ -2067,7 +2208,7 @@ var BubbleLabelText = styled_components_default.text`
     light: variables_default.white
   },
   prisma: variables_default.contentColorActive
-})(props)}};
+})(props)};
     font-size: ${(props) => props.hover ? "12px" : "10px"};
     font-weight: ${(props) => props.hover ? 500 : "normal"};
     text-anchor: middle;
@@ -2089,11 +2230,14 @@ var PunchcardBubble = (props) => {
     pulsate,
     value,
     r,
-    handlePointClick
+    handlePointClick,
+    accessibleLabel,
+    tabindex
   } = 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 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);
@@ -2103,9 +2247,12 @@ var PunchcardBubble = (props) => {
     {
       "data-test": "bubble",
       muted,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      onClick: () => handlePointClick(value)
+      onMouseEnter: hasData ? handleMouseEnter : void 0,
+      onMouseLeave: hasData ? handleMouseLeave : void 0,
+      onClick: () => hasData && handlePointClick(value),
+      onFocus: handleMouseEnter,
+      onBlur: handleMouseLeave,
+      tabIndex: tabindex
     },
     showPulsateBubble && /* @__PURE__ */ react_exports.createElement(PulsateBubble, { cx, cy, r, color, outline: true, hover: null }),
     /* @__PURE__ */ react_exports.createElement(
@@ -2120,7 +2267,18 @@ var PunchcardBubble = (props) => {
         outline
       }
     ),
-    /* @__PURE__ */ react_exports.createElement(BubbleLabelText, { x: cx, y: cy, hover, outline, displayLabel }, bubbleLabelValueText)
+    /* @__PURE__ */ react_exports.createElement(
+      BubbleLabelText,
+      {
+        x: cx,
+        y: cy,
+        hover,
+        outline,
+        displayLabel,
+        "aria-label": accessibleLabel
+      },
+      hasData ? bubbleLabelValueText : (0, i18n_exports._)("Null")
+    )
   );
 };
 var propTypes4 = {
@@ -2136,7 +2294,9 @@ var propTypes4 = {
   pulsate: prop_types_exports.bool,
   value: prop_types_exports.number,
   r: prop_types_exports.number,
-  handlePointClick: prop_types_exports.func
+  handlePointClick: prop_types_exports.func,
+  accessibleLabel: prop_types_exports.string,
+  tabindex: prop_types_exports.number
 };
 var defaultProps2 = {
   showBubbleLabel: true,
@@ -2154,7 +2314,9 @@ var defaultProps2 = {
   r: 1,
   value: void 0,
   handlePointClick: () => {
-  }
+  },
+  accessibleLabel: "",
+  tabindex: -1
 };
 PunchcardBubble.propTypes = propTypes4;
 PunchcardBubble.defaultProps = defaultProps2;
@@ -2178,6 +2340,7 @@ var PunchcardRow = (props) => {
     size: size2,
     x,
     xScale,
+    yIndex,
     yPosition,
     yValue,
     handlePointClick
@@ -2199,6 +2362,7 @@ var PunchcardRow = (props) => {
     });
     const muted = isSomethingSelected({ selectedX, selectedY, selectedCategory }) && !hover;
     const showBubbleLabel = showBubbleLabels === "all" /* ALL */ || showBubbleLabels === "max" /* MAX */ && maxSizeValue === sizeValue;
+    const accessibleLabel = getBubbleAccessibleName({ categoryValue, xValue, yValue, sizeValue });
     return /* @__PURE__ */ react_exports.createElement(
       PunchcardBubble_default,
       {
@@ -2217,7 +2381,9 @@ var PunchcardRow = (props) => {
         pulsate: showMaxValuePulsation && sizeValue === maxSizeValue,
         value: sizeValue,
         r,
-        handlePointClick
+        handlePointClick,
+        accessibleLabel,
+        tabindex: hover || !muted && yIndex === 0 && index === 0 ? 0 : -1
       }
     );
   }));
@@ -2238,6 +2404,7 @@ var propTypes5 = {
   size: prop_types_exports.arrayOf(prop_types_exports.number),
   x: prop_types_exports.arrayOf(prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number])).isRequired,
   xScale: prop_types_exports.func,
+  yIndex: prop_types_exports.number,
   yPosition: prop_types_exports.number,
   yValue: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
   handlePointClick: prop_types_exports.func
@@ -2261,6 +2428,7 @@ var defaultProps3 = {
   // eslint-disable-next-line react/default-props-match-prop-types
   x: null,
   xScale: null,
+  yIndex: null,
   yPosition: null,
   yValue: null,
   handlePointClick: () => {
@@ -2294,6 +2462,7 @@ var PunchcardChartArea = (props) => {
     selectedX,
     selectedY,
     size: size2,
+    uniqX,
     x,
     xScale,
     y,
@@ -2318,7 +2487,8 @@ var PunchcardChartArea = (props) => {
     maxBubbleRadius,
     minBubbleRadius
   });
-  return /* @__PURE__ */ react_exports.createElement("g", null, Object.entries(dataByRows).map(([row, rowData]) => {
+  return /* @__PURE__ */ react_exports.createElement("g", null, Object.entries(dataByRows).map(([row, rowData], index) => {
+    const yPosition = yScale(row);
     const {
       rowXValues,
       rowSizeValues,
@@ -2327,8 +2497,7 @@ var PunchcardChartArea = (props) => {
       rowFillOpacityValues,
       rowSizeScale,
       rowRadiusValues
-    } = rowData;
-    const yPosition = yScale(row);
+    } = addNullValuesToRowData({ rowData, uniqX });
     return /* @__PURE__ */ react_exports.createElement(
       PunchcardRow_default,
       {
@@ -2349,6 +2518,7 @@ var PunchcardChartArea = (props) => {
         size: rowSizeValues,
         x: rowXValues,
         xScale,
+        yIndex: index,
         yPosition,
         yValue: row,
         handlePointClick
@@ -2378,6 +2548,7 @@ var propTypes6 = {
   selectedX: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
   selectedY: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
   size: prop_types_exports.arrayOf(prop_types_exports.number).isRequired,
+  uniqX: prop_types_exports.arrayOf(prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number])).isRequired,
   x: prop_types_exports.arrayOf(prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number])).isRequired,
   xScale: prop_types_exports.func,
   y: prop_types_exports.arrayOf(prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number])).isRequired,
@@ -2410,6 +2581,8 @@ var defaultProps4 = {
   // eslint-disable-next-line react/default-props-match-prop-types
   size: null,
   // eslint-disable-next-line react/default-props-match-prop-types
+  uniqX: null,
+  // eslint-disable-next-line react/default-props-match-prop-types
   x: null,
   xScale: null,
   // eslint-disable-next-line react/default-props-match-prop-types
@@ -2708,6 +2881,33 @@ var Punchcard = (props) => {
       }
     });
   };
+  const chartRef = react_exports.useRef();
+  const handleKeyDown = (e) => {
+    var _a, _b;
+    const key = (0, keyboard_exports.keycode)(e);
+    const elementToFocus = getElementToFocus({
+      category,
+      bubbleSizes,
+      x,
+      y,
+      uniqX,
+      uniqY,
+      selectedX,
+      selectedY,
+      selectedCategory,
+      key
+    });
+    if (!elementToFocus) {
+      return;
+    }
+    const ariaLabel = getBubbleAccessibleName({
+      categoryValue: elementToFocus.category,
+      xValue: elementToFocus.x,
+      yValue: elementToFocus.y,
+      sizeValue: elementToFocus.size
+    });
+    (_b = (_a = chartRef.current.querySelector(`[aria-label="${ariaLabel}"]`)) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.focus();
+  };
   const renderVisualization = () => {
     if (!containerWidth || !containerHeight) {
       return null;
@@ -2741,7 +2941,9 @@ var Punchcard = (props) => {
       {
         "data-test": "punchcard-container",
         width: containerWidth,
-        height: containerHeight
+        height: containerHeight,
+        ref: chartRef,
+        onKeyDown: handleKeyDown
       },
       /* @__PURE__ */ react_exports.createElement(PunchcardSVG, { width: containerWidth, height: containerHeight }, /* @__PURE__ */ react_exports.createElement(
         PunchcardGridLines_default,
@@ -2815,6 +3017,7 @@ var Punchcard = (props) => {
           selectedX,
           selectedY,
           size: bubbleSizes,
+          uniqX,
           x,
           xScale: xPositionScale,
           y,