@splunk/visualizations 27.1.0 → 27.2.0

package/Pie.js

@@ -1556,7 +1556,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.1.0 - fe8b048df",
+        "data-splunk-visualization-version": "27.2.0 - 2e7eda8d4",
         width,
         height,
         backgroundColor
@@ -1622,7 +1622,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.1.0 - fe8b048df"
+  "data-splunk-visualization-version": "27.2.0 - 2e7eda8d4"
 })`
     position: relative;
     width: 100%;

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.1.0 - fe8b048df",
+        "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.1.0 - fe8b048df"
+  "data-splunk-visualization-version": "27.2.0 - 2e7eda8d4"
 })`
     position: relative;
     width: 100%;
@@ -1608,14 +1608,23 @@ var defaultImport30 = __toESM(require("@splunk/visualization-encoding/utils/type
 __reExport(types_exports, require("@splunk/visualization-encoding/utils/types"));
 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 defaultImport31 = __toESM(require("d3-scale"));
+var defaultImport32 = __toESM(require("d3-scale"));
 __reExport(d3_scale_exports, require("d3-scale"));
-var d3_scale_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+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) => {
@@ -1807,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 defaultImport32 = __toESM(require("lodash/findIndex"));
+var defaultImport33 = __toESM(require("lodash/findIndex"));
 __reExport(findIndex_exports, require("lodash/findIndex"));
-var findIndex_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var findIndex_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // esm-externals:lodash/find
 var find_exports = {};
 __export(find_exports, {
   default: () => find_default
 });
-var defaultImport33 = __toESM(require("lodash/find"));
+var defaultImport34 = __toESM(require("lodash/find"));
 __reExport(find_exports, require("lodash/find"));
-var find_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var find_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // esm-externals:lodash/sortBy
 var sortBy_exports = {};
 __export(sortBy_exports, {
   default: () => sortBy_default
 });
-var defaultImport34 = __toESM(require("lodash/sortBy"));
+var defaultImport35 = __toESM(require("lodash/sortBy"));
 __reExport(sortBy_exports, require("lodash/sortBy"));
-var sortBy_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var sortBy_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // esm-externals:lodash/flattenDeep
 var flattenDeep_exports = {};
 __export(flattenDeep_exports, {
   default: () => flattenDeep_default
 });
-var defaultImport35 = __toESM(require("lodash/flattenDeep"));
+var defaultImport36 = __toESM(require("lodash/flattenDeep"));
 __reExport(flattenDeep_exports, require("lodash/flattenDeep"));
-var flattenDeep_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var flattenDeep_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // src/Punchcard/PurePunchcard/src/utils/sortUtils.js
 var TIME_RANGES = {
@@ -2097,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;
@@ -2119,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);
@@ -2133,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(
@@ -2150,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 = {
@@ -2166,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,
@@ -2184,7 +2314,9 @@ var defaultProps2 = {
   r: 1,
   value: void 0,
   handlePointClick: () => {
-  }
+  },
+  accessibleLabel: "",
+  tabindex: -1
 };
 PunchcardBubble.propTypes = propTypes4;
 PunchcardBubble.defaultProps = defaultProps2;
@@ -2208,6 +2340,7 @@ var PunchcardRow = (props) => {
     size: size2,
     x,
     xScale,
+    yIndex,
     yPosition,
     yValue,
     handlePointClick
@@ -2229,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,
       {
@@ -2247,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
       }
     );
   }));
@@ -2268,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
@@ -2291,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: () => {
@@ -2324,6 +2462,7 @@ var PunchcardChartArea = (props) => {
     selectedX,
     selectedY,
     size: size2,
+    uniqX,
     x,
     xScale,
     y,
@@ -2348,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,
@@ -2357,8 +2497,7 @@ var PunchcardChartArea = (props) => {
       rowFillOpacityValues,
       rowSizeScale,
       rowRadiusValues
-    } = rowData;
-    const yPosition = yScale(row);
+    } = addNullValuesToRowData({ rowData, uniqX });
     return /* @__PURE__ */ react_exports.createElement(
       PunchcardRow_default,
       {
@@ -2379,6 +2518,7 @@ var PunchcardChartArea = (props) => {
         size: rowSizeValues,
         x: rowXValues,
         xScale,
+        yIndex: index,
         yPosition,
         yValue: row,
         handlePointClick
@@ -2408,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,
@@ -2440,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
@@ -2738,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;
@@ -2771,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,
@@ -2845,6 +3017,7 @@ var Punchcard = (props) => {
           selectedX,
           selectedY,
           size: bubbleSizes,
+          uniqX,
           x,
           xScale: xPositionScale,
           y,