@splunk/visualizations 28.5.3 → 28.7.0

package/Punchcard.js

@@ -60,6 +60,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/Punchcard/index.ts
 var Punchcard_exports = {};
@@ -495,7 +496,7 @@ var DefaultVizActionHandler = class {
 var INITIAL_HEIGHT = 250;
 var SplunkVisualization = class {
 };
-SplunkVisualization.propTypes = {
+__publicField(SplunkVisualization, "propTypes", {
   /**
    * display mode
    */
@@ -571,11 +572,11 @@ SplunkVisualization.propTypes = {
    * A callback to request new data with updated request params
    */
   onRequestParamsChange: prop_types_exports.func
-};
+});
 /**
  *
  */
-SplunkVisualization.defaults = {
+__publicField(SplunkVisualization, "defaults", {
   // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
   width: "100%",
   height: INITIAL_HEIGHT,
@@ -590,7 +591,7 @@ SplunkVisualization.defaults = {
   onComputedProps: () => ({}),
   loading: false,
   onRequestParamsChange: lodash_exports.noop
-};
+});
 var SplunkVisualization_default = SplunkVisualization;
 
 // src/common/interfaces/DataSource.ts
@@ -644,9 +645,9 @@ var usePaginationParams = ({
   meta,
   onRequestParamsChange
 }) => {
-  const totalCount = meta && meta.totalCount || 0;
-  const offset = requestParams && requestParams.offset || 0;
-  const count = requestParams && requestParams.count;
+  const totalCount = (meta == null ? void 0 : meta.totalCount) || 0;
+  const offset = (requestParams == null ? void 0 : requestParams.offset) || 0;
+  const count = requestParams == null ? void 0 : requestParams.count;
   const totalPages = typeof count === "number" && count > 0 ? Math.ceil(totalCount / count) : 0;
   const current = typeof count === "number" && count > 0 ? Math.floor(offset / count) + 1 : 0;
   const isPaging = totalPages > 1 && typeof onRequestParamsChange === "function";
@@ -754,7 +755,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.5.3 - 657435b86"
+  "data-splunk-visualization-version": "28.7.0 - d7b18cab6"
 })`
     position: relative;
     width: 100%;
@@ -844,7 +845,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.5.3 - 657435b86",
+        "data-splunk-visualization-version": "28.7.0 - d7b18cab6",
         width,
         height,
         backgroundColor
@@ -1385,6 +1386,24 @@ var defaultImport31 = __toESM(require("@splunk/react-icons/Triangle"));
 __reExport(Triangle_exports, require("@splunk/react-icons/Triangle"));
 var Triangle_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
+// esm-externals:@splunk/visualizations-shared/propUtils
+var propUtils_exports = {};
+__export(propUtils_exports, {
+  default: () => propUtils_default
+});
+var defaultImport32 = __toESM(require("@splunk/visualizations-shared/propUtils"));
+__reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
+var propUtils_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+
+// esm-externals:@splunk/visualizations-shared/simpleXMLOptions
+var simpleXMLOptions_exports = {};
+__export(simpleXMLOptions_exports, {
+  default: () => simpleXMLOptions_default
+});
+var defaultImport33 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
+__reExport(simpleXMLOptions_exports, require("@splunk/visualizations-shared/simpleXMLOptions"));
+var simpleXMLOptions_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+
 // src/common/chartingUtils.ts
 var DEFAULT_LINE_WIDTH = 2;
 var getAnnotationsForCanvas = ({
@@ -1434,9 +1453,9 @@ var shouldEnableSearchZoom = (eventHandlers = [], xField = "") => {
   const xAxisIsTime = xField === "_time";
   return !!rangeSelectEventHandler && xAxisIsTime;
 };
-var canvasSupportedTimeSeriesCharts = ["splunk.line"];
+var canvasSupportedTimeSeriesCharts = ["splunk.line", "splunk.area"];
 var isTimeSeriesCanvasRenderSupported = (vizConfigKey) => {
-  return canvasSupportedTimeSeriesCharts.indexOf(vizConfigKey) > -1;
+  return canvasSupportedTimeSeriesCharts.includes(vizConfigKey);
 };
 var filterChartDataFromInternalFields = (chartData) => {
   const { fields, columns } = chartData;
@@ -1591,46 +1610,66 @@ var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInt
   }
   return y2Config;
 };
-var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay, lineDashStyle, lineDashStylesByField, stepPosition, stepPositionsByField) => {
+var getSeriesType = (isOverlay, isAreaChart, isStacked) => {
+  if (isOverlay) return "line";
+  if (!isAreaChart) return void 0;
+  return isStacked ? "stacked-area" : "area";
+};
+var getY2Scale = (field, y2fields, overlayFields) => {
+  const assignToY2 = (y2fields == null ? void 0 : y2fields.length) > 0 && y2fields.includes(field) || !(y2fields == null ? void 0 : y2fields.length) && (overlayFields == null ? void 0 : overlayFields.includes(field));
+  return assignToY2 ? "y2" : "y";
+};
+var getSeriesOverrides = (opts) => {
+  var _a;
+  const {
+    yfields,
+    y2fields,
+    lineWidth,
+    overlayFields,
+    y2Enabled,
+    nullValueMode,
+    markerDisplay,
+    lineDashStyle,
+    lineDashStylesByField,
+    stepPosition,
+    stepPositionsByField,
+    type,
+    stackMode,
+    showLines
+  } = opts;
   const seriesConfig = {};
   let spanGaps;
-  let replaceNullsWithZero;
   if (nullValueMode === "gaps") {
     spanGaps = false;
-  } else if (nullValueMode === "connect" || nullValueMode === "zero") {
+  } else if (nullValueMode != null) {
     spanGaps = true;
-    if (nullValueMode === "zero") {
-      replaceNullsWithZero = true;
-    }
-  }
-  yfields.forEach((field) => {
+  } else {
+    spanGaps = void 0;
+  }
+  const replaceNullsWithZero = nullValueMode === "zero" ? true : void 0;
+  const isAreaChart = type === "area";
+  const isStacked = isAreaChart && (stackMode === "stacked" || stackMode === "stacked100");
+  const areaFields = isAreaChart ? yfields.filter((f) => !(overlayFields == null ? void 0 : overlayFields.includes(f))) : yfields;
+  const overlayFieldsInOrder = (_a = overlayFields == null ? void 0 : overlayFields.filter((f) => yfields.includes(f))) != null ? _a : [];
+  const orderedFields = isAreaChart ? [...areaFields, ...overlayFieldsInOrder] : yfields;
+  orderedFields.forEach((field) => {
+    var _a2;
+    const isOverlay = (_a2 = overlayFields == null ? void 0 : overlayFields.includes(field)) != null ? _a2 : false;
+    const isPercent = isAreaChart && stackMode === "stacked100" && !isOverlay;
+    const shouldHideAreaOutline = isAreaChart && showLines === false && !isOverlay;
     seriesConfig[field] = {
-      overrides: { width: lineWidth != null ? lineWidth : DEFAULT_LINE_WIDTH }
+      overrides: __spreadValues({
+        width: shouldHideAreaOutline ? 0 : lineWidth != null ? lineWidth : DEFAULT_LINE_WIDTH
+      }, isPercent ? { stacking: { mode: "percent", group: "A" } } : {})
     };
-    if (spanGaps !== void 0) {
-      seriesConfig[field].overrides.spanGaps = spanGaps;
-    }
-    if (y2Enabled) {
-      const shouldAssignToY2 = (
-        // If y2Fields are present, assign all y2Fields to y2 scale
-        (y2fields == null ? void 0 : y2fields.length) > 0 && y2fields.includes(field) || // Else, assign all overlayFields to y2 scale
-        (!y2fields || y2fields.length === 0) && (overlayFields == null ? void 0 : overlayFields.includes(field))
-      );
-      if (shouldAssignToY2) {
-        seriesConfig[field].overrides.scale = "y2";
-      } else {
-        seriesConfig[field].overrides.scale = "y";
-      }
-    }
-    if (overlayFields == null ? void 0 : overlayFields.includes(field)) {
-      seriesConfig[field].type = "line";
-    }
-    if (markerDisplay !== void 0) {
-      seriesConfig[field].markerDisplay = markerDisplay;
-    }
-    const fieldDashStyle = (lineDashStylesByField == null ? void 0 : lineDashStylesByField[field]) || lineDashStyle;
-    if (fieldDashStyle) {
-      seriesConfig[field].lineDashStyle = fieldDashStyle;
+    const seriesType = getSeriesType(isOverlay, isAreaChart, isStacked);
+    if (seriesType !== void 0) seriesConfig[field].type = seriesType;
+    if (spanGaps !== void 0) seriesConfig[field].overrides.spanGaps = spanGaps;
+    if (y2Enabled) seriesConfig[field].overrides.scale = getY2Scale(field, y2fields, overlayFields);
+    if (markerDisplay !== void 0) seriesConfig[field].markerDisplay = markerDisplay;
+    if (!isAreaChart || isOverlay) {
+      const fieldDashStyle = (lineDashStylesByField == null ? void 0 : lineDashStylesByField[field]) || lineDashStyle;
+      if (fieldDashStyle) seriesConfig[field].lineDashStyle = fieldDashStyle;
     }
     const hasFieldStepPosition = Object.hasOwn(stepPositionsByField || {}, field);
     const fieldStepPosition = hasFieldStepPosition ? stepPositionsByField == null ? void 0 : stepPositionsByField[field] : stepPosition;
@@ -1701,8 +1740,27 @@ var TrellisTitleDiv = styled_components_default.div`
     background-color: ${(props) => props.backgroundColor};
     box-shadow: 0 1px ${(props) => props.backgroundColor}; // this is added to avoid a 1px gap between title and viz divs that showed up intermittently because of pixel rounding error in chrome.
 `;
+var formatTrellisKey = (value) => {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return value.toString();
+  }
+  if (typeof value === "symbol") {
+    return value.toString();
+  }
+  try {
+    return JSON.stringify(value);
+  } catch (e) {
+    return typeof value === "bigint" ? value.toString() : "";
+  }
+};
 var TrellisTitle = (props) => {
-  const titleText = String(props.trellisKey).toString();
+  const titleText = formatTrellisKey(props.trellisKey);
   return /* @__PURE__ */ react_exports.createElement(
     TrellisTitleDiv,
     {
@@ -1838,6 +1896,38 @@ var parseArrayOption = (value) => {
   }
   return void 0;
 };
+var getAreaOpacityForCanvas = (areaOpacity) => (
+  // Preserve legacy visualizations behavior where area opacity is squared to match charting output.
+  areaOpacity !== void 0 && areaOpacity !== null ? __pow(areaOpacity, 2) : areaOpacity
+);
+var parseTickIntervalOption = (simpleXMLValue, canvasValue) => {
+  if (simpleXMLValue) return Number(simpleXMLValue);
+  if (canvasValue) return Number(canvasValue);
+  return void 0;
+};
+var getYAxisTitles = ({
+  y2Enabled,
+  yFields,
+  y2Fields,
+  overlayFields,
+  yAxisTitleText,
+  yAxisTitleVisibility,
+  y2AxisTitleText,
+  y2AxisTitleVisibility,
+  containerHeight
+}) => {
+  const yFieldsForTitle = y2Enabled ? yFields.filter((field) => !y2Fields.includes(field)) : yFields;
+  const fieldsForY2Axis = y2Fields.length > 0 ? y2Fields : overlayFields;
+  const yAxisTitle = ellipsisAxisTitle(
+    getComputedAxisTitles(yAxisTitleText, yFieldsForTitle, yAxisTitleVisibility),
+    containerHeight
+  );
+  const y2AxisTitle = ellipsisAxisTitle(
+    getComputedAxisTitles(y2AxisTitleText, fieldsForY2Axis, y2AxisTitleVisibility),
+    containerHeight
+  );
+  return { yAxisTitle, y2AxisTitle };
+};
 var TimeSeriesChartWrapper = (props) => {
   var _b, _c, _d;
   const _a = props, {
@@ -1927,6 +2017,8 @@ var TimeSeriesChartWrapper = (props) => {
     "chart.overlayFields": overlayFieldsStr,
     "chart.nullValueMode": nullValueMode,
     "chart.showDataLabels": showDataLabels,
+    "chart.showLines": showLines,
+    "chart.stackMode": stackMode,
     lineWidth,
     lineDashStyle,
     fieldDashStyles: lineDashStylesByFieldStr,
@@ -1955,7 +2047,10 @@ var TimeSeriesChartWrapper = (props) => {
     yAxisMinorTickSize,
     y2AxisMinorTickSize,
     showYAxisWithZero: showYAxisWithZeroFromOptions,
-    showY2AxisWithZero: showY2AxisWithZeroFromOptions
+    showY2AxisWithZero: showY2AxisWithZeroFromOptions,
+    // area only props
+    areaFillOpacity: areaOpacity,
+    chart: chartType
   } = options;
   const dataValuesDisplay = showDataLabels === "none" ? "off" : showDataLabels;
   const showYAxisWithZero = showYAxisWithZeroFromProps != null ? showYAxisWithZeroFromProps : showYAxisWithZeroFromOptions;
@@ -1972,13 +2067,11 @@ var TimeSeriesChartWrapper = (props) => {
   const yAxisMax = parseAxisValue(yAxisMaxRaw);
   const y2AxisMin = parseAxisValue(y2AxisMinRaw);
   const y2AxisMax = parseAxisValue(y2AxisMaxRaw);
-  const parseTickInterval = (simpleXMLValue, canvasValue) => {
-    if (simpleXMLValue) return Number(simpleXMLValue);
-    if (canvasValue) return Number(canvasValue);
-    return void 0;
-  };
-  const yAxisMajorTickIntervalNum = parseTickInterval(yAxisMajorUnitFromSimpleXML, yAxisMajorTickInterval);
-  const y2AxisMajorTickIntervalNum = parseTickInterval(
+  const yAxisMajorTickIntervalNum = parseTickIntervalOption(
+    yAxisMajorUnitFromSimpleXML,
+    yAxisMajorTickInterval
+  );
+  const y2AxisMajorTickIntervalNum = parseTickIntervalOption(
     y2AxisMajorUnitFromSimpleXML,
     y2AxisMajorTickInterval
   );
@@ -1987,6 +2080,7 @@ var TimeSeriesChartWrapper = (props) => {
   const y2AxisMajorTickSizeNum = y2AxisMajorTickSize != null ? Number(y2AxisMajorTickSize) : void 0;
   const yAxisMinorTickSizeNum = yAxisMinorTickSize != null ? Number(yAxisMinorTickSize) : void 0;
   const y2AxisMinorTickSizeNum = y2AxisMinorTickSize != null ? Number(y2AxisMinorTickSize) : void 0;
+  const areaOpacityForCanvas = getAreaOpacityForCanvas(areaOpacity);
   const seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
   const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
   const lineDashStylesByField = lineDashStylesByFieldStr ? JSON.parse(lineDashStylesByFieldStr) : void 0;
@@ -2017,26 +2111,40 @@ var TimeSeriesChartWrapper = (props) => {
   );
   let xAxisTitle = getComputedAxisTitles(xAxisTitleText, [xField], xAxisTitleVisibility);
   xAxisTitle = ellipsisAxisTitle(xAxisTitle, containerWidth);
-  const yFieldsForTitle = y2Enabled ? yFields.filter((field) => !y2Fields.includes(field)) : yFields;
-  let yAxisTitle = getComputedAxisTitles(yAxisTitleText, yFieldsForTitle, yAxisTitleVisibility);
-  yAxisTitle = ellipsisAxisTitle(yAxisTitle, containerHeight);
-  const fieldsForY2Axis = y2Fields.length > 0 ? y2Fields : overlayFields;
-  let y2AxisTitle = getComputedAxisTitles(y2AxisTitleText, fieldsForY2Axis, y2AxisTitleVisibility);
-  y2AxisTitle = ellipsisAxisTitle(y2AxisTitle, containerHeight);
+  const { yAxisTitle, y2AxisTitle } = getYAxisTitles({
+    y2Enabled,
+    yFields,
+    y2Fields,
+    overlayFields,
+    yAxisTitleText,
+    yAxisTitleVisibility,
+    y2AxisTitleText,
+    y2AxisTitleVisibility,
+    containerHeight
+  });
   const xScaleConfig = (0, react_exports.useMemo)(
     () => getXScaleConfig(xAxisTitle, xAxisLabelVisibility, xAxisLabelRotation),
     [xAxisTitle, xAxisLabelVisibility, xAxisLabelRotation]
   );
+  const isStacked100 = stackMode === "stacked100";
   const yScaleConfig = (0, react_exports.useMemo)(
-    () => getYScaleConfig(
-      yAxisTitle,
-      yAxisAbbreviation,
-      yAxisScale,
-      yAxisLabelVisibility,
-      yAxisMin,
-      yAxisMax
-    ),
-    [yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax]
+    () => {
+      const config3 = getYScaleConfig(
+        yAxisTitle,
+        yAxisAbbreviation,
+        yAxisScale,
+        yAxisLabelVisibility,
+        yAxisMin,
+        yAxisMax
+      );
+      if (isStacked100) {
+        config3.y.tickFmt = (v) => `${Math.round(v * 100)}%`;
+        config3.y.range = () => [0, 1];
+      }
+      return config3;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax, isStacked100]
   );
   const y2ScaleConfig = (0, react_exports.useMemo)(() => {
     if (y2Enabled) {
@@ -2068,10 +2176,11 @@ var TimeSeriesChartWrapper = (props) => {
   ];
   chartData.fields = filteredChartData.fields;
   chartData.columns = seriesDataFormatted;
+  const normalizedStackMode = stackMode === "stacked" || stackMode === "stacked100" ? stackMode : "auto";
   const seriesOverrides = (0, react_exports.useMemo)(
-    () => getSeriesOverrides(
-      yFields,
-      y2Fields,
+    () => getSeriesOverrides({
+      yfields: yFields,
+      y2fields: y2Fields,
       lineWidth,
       overlayFields,
       y2Enabled,
@@ -2080,8 +2189,11 @@ var TimeSeriesChartWrapper = (props) => {
       lineDashStyle,
       lineDashStylesByField,
       stepPosition,
-      stepPositionsByField
-    ),
+      stepPositionsByField,
+      type: chartType,
+      stackMode: normalizedStackMode,
+      showLines
+    }),
     [
       yFields,
       y2Fields,
@@ -2093,7 +2205,10 @@ var TimeSeriesChartWrapper = (props) => {
       lineDashStyle,
       lineDashStylesByField,
       stepPosition,
-      stepPositionsByField
+      stepPositionsByField,
+      chartType,
+      normalizedStackMode,
+      showLines
     ]
   );
   const chartingEventAnnotations = (0, react_exports.useMemo)(
@@ -2161,50 +2276,54 @@ var TimeSeriesChartWrapper = (props) => {
   react_exports.useEffect(() => {
     additionalTooltipValuesRef.current = additionalTooltipValues;
   }, [additionalTooltipValues]);
+  const handleCrosshairMouseout = react_exports.useCallback(() => {
+    if (onPointMouseOut && lastPayloadRef.current) {
+      onPointMouseOut({
+        type: "point.mouseout",
+        originalEvent: lastOriginalEventRef.current,
+        payload: lastPayloadRef.current
+      });
+    }
+    previousMouseoverPayloadRef.current = null;
+  }, [onPointMouseOut]);
   const handleChartCrosshairChange = react_exports.useCallback(
     (event) => {
-      if (onPointMouseOver || onPointMouseOut) {
-        if (!event) {
-          if (onPointMouseOut && lastPayloadRef.current) {
-            onPointMouseOut({
-              type: "point.mouseout",
-              originalEvent: lastOriginalEventRef.current,
-              payload: lastPayloadRef.current
-            });
-          }
-          previousMouseoverPayloadRef.current = null;
-          return;
-        }
-        const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(event, "value", "seriesKey", "time", "index", "seriesIndex")), {
-          name: event.seriesKey
+      if (!onPointMouseOver && !onPointMouseOut) {
+        return;
+      }
+      if (!event) {
+        handleCrosshairMouseout();
+        return;
+      }
+      const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(event, "value", "seriesKey", "time", "index", "seriesIndex")), {
+        name: event.seriesKey
+      });
+      delete payload.seriesKey;
+      if (event.rowContext) {
+        Object.assign(
+          payload,
+          Object.keys(event.rowContext).reduce((acc, fieldName) => {
+            acc[`row.${fieldName}.value`] = event.rowContext[fieldName];
+            return acc;
+          }, {})
+        );
+      }
+      const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
+      if (!hasMouseoverPayloadChanged(updatedPayload, previousMouseoverPayloadRef.current)) {
+        return;
+      }
+      lastPayloadRef.current = updatedPayload;
+      lastOriginalEventRef.current = event;
+      previousMouseoverPayloadRef.current = __spreadValues({}, updatedPayload);
+      if (onPointMouseOver) {
+        onPointMouseOver({
+          type: "point.mouseover",
+          originalEvent: event,
+          payload: updatedPayload
         });
-        delete payload.seriesKey;
-        if (event.rowContext) {
-          Object.assign(
-            payload,
-            Object.keys(event.rowContext).reduce((acc, fieldName) => {
-              acc[`row.${fieldName}.value`] = event.rowContext[fieldName];
-              return acc;
-            }, {})
-          );
-        }
-        const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
-        if (!hasMouseoverPayloadChanged(updatedPayload, previousMouseoverPayloadRef.current)) {
-          return;
-        }
-        lastPayloadRef.current = updatedPayload;
-        lastOriginalEventRef.current = event;
-        previousMouseoverPayloadRef.current = __spreadValues({}, updatedPayload);
-        if (onPointMouseOver) {
-          onPointMouseOver({
-            type: "point.mouseover",
-            originalEvent: event,
-            payload: updatedPayload
-          });
-        }
       }
     },
-    [onPointMouseOver, onPointMouseOut, trellisKey, trellisSplitBy]
+    [onPointMouseOver, onPointMouseOut, trellisKey, trellisSplitBy, handleCrosshairMouseout]
   );
   const dataKey = `${(_b = chartData.columns[0]) == null ? void 0 : _b[0]}-${(_c = chartData.columns[0]) == null ? void 0 : _c[chartData.columns[0].length - 1]}-${(_d = chartData.columns[0]) == null ? void 0 : _d.length}`;
   const memoizedChart = (0, react_exports.useMemo)(() => {
@@ -2259,7 +2378,8 @@ var TimeSeriesChartWrapper = (props) => {
         showXAxisLine,
         showYAxisLine,
         showY2AxisLine,
-        xAxisMaxLabelParts
+        xAxisMaxLabelParts,
+        areaOpacity: areaOpacityForCanvas
       }
     ));
   }, [
@@ -2311,7 +2431,8 @@ var TimeSeriesChartWrapper = (props) => {
     showYAxisLine,
     showY2AxisLine,
     legendMode,
-    xAxisMaxLabelParts
+    xAxisMaxLabelParts,
+    areaOpacityForCanvas
   ]);
   const memoizedVisualization = (0, react_exports.useMemo)(() => {
     return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor: bgColor }, memoizedChart);
@@ -2339,6 +2460,37 @@ var TimeSeriesChartWrapper_default = TimeSeriesChartWrapper;
 
 // src/common/withDashboardViz.tsx
 var SanitizedTimeSeriesChartWrapper = (0, SanitizeProps_exports.withSanitizedProps)(TimeSeriesChartWrapper_default);
+var buildEventCallbackProps = (supportedEvents, evaluatedOptionsToUse, onEventTrigger) => {
+  const result = {};
+  Object.keys(supportedEvents).forEach((eventName) => {
+    const { parentKeys, payloadKeys } = supportedEvents[eventName];
+    const eventCallbackPropName = (0, lodash_exports.camelCase)(`on.${eventName}`);
+    let payload = {};
+    if (Array.isArray(payloadKeys) && payloadKeys.length) {
+      payloadKeys.forEach((p) => {
+        payload[p] = evaluatedOptionsToUse[p];
+      });
+    }
+    result[eventCallbackPropName] = (ev) => {
+      if (ev == null ? void 0 : ev.payload) {
+        payload = __spreadValues({}, ev.payload);
+      }
+      return onEventTrigger({
+        originalEvent: ev,
+        payload,
+        type: eventName
+      });
+    };
+    if (parentKeys) {
+      for (let i = parentKeys.length - 1; i >= 0; i -= 1) {
+        const newObject = {};
+        newObject[parentKeys[i]] = result[eventCallbackPropName];
+        result[eventCallbackPropName] = newObject;
+      }
+    }
+  });
+  return result;
+};
 var withDashboardViz = (opts) => {
   const {
     ReactViz,
@@ -2396,9 +2548,7 @@ var withDashboardViz = (opts) => {
     const isDownsamplingEnabledByFeatureFlag = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableDownsampling
     );
-    const isTrellisFeatureFlagOn = Boolean(
-      featureFlagContext && featureFlagContext.visualizations_enableTrellis
-    );
+    const isTrellisFeatureFlagOn = Boolean(featureFlagContext == null ? void 0 : 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 isAcceleratedRenderFeatureFlagOn = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableAcceleratedRender
@@ -2563,38 +2713,12 @@ var withDashboardViz = (opts) => {
         }
       );
     }
-    const eventCallbackProps = {};
-    if (hasEventHandlers && mode === "view" && vizConfig.supports.indexOf("events" /* EVENTS */) > -1) {
-      const supportedEvents = vizConfig.events;
-      Object.keys(supportedEvents).forEach((eventName) => {
-        const { parentKeys, payloadKeys } = supportedEvents[eventName];
-        const eventCallbackPropName = (0, lodash_exports.camelCase)(`on.${eventName}`);
-        let payload = {};
-        if (Array.isArray(payloadKeys) && payloadKeys.length) {
-          payloadKeys.forEach((p) => {
-            payload[p] = evaluatedOptionsToUse[p];
-          });
-        }
-        eventCallbackProps[eventCallbackPropName] = (ev) => {
-          if (ev == null ? void 0 : ev.payload) {
-            payload = __spreadValues({}, ev.payload);
-          }
-          return onEventTrigger({
-            originalEvent: ev,
-            payload,
-            type: eventName
-          });
-        };
-        if (parentKeys) {
-          for (let i = parentKeys.length - 1; i >= 0; i -= 1) {
-            const newObject = {};
-            newObject[parentKeys[i]] = eventCallbackProps[eventCallbackPropName];
-            eventCallbackProps[eventCallbackPropName] = newObject;
-          }
-        }
-      });
-    }
-    const computedVizProps = computeVizProps2(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, props), evaluatedOptionsToUse), eventCallbackProps), {
+    const eventCallbackProps = hasEventHandlers && mode === "view" && vizConfig.supports.includes("events" /* EVENTS */) ? buildEventCallbackProps(vizConfig.events, evaluatedOptionsToUse, onEventTrigger) : {};
+    const computedVizProps = computeVizProps2(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, props), evaluatedOptionsToUse), {
+      // Align option transformation with the actual renderer selected below.
+      // This prevents canvas-only option preservation from leaking into Highcharts mode.
+      isAcceleratedRenderOn
+    }), eventCallbackProps), {
       themeFunc
     }));
     if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
@@ -2628,46 +2752,20 @@ var types_exports = {};
 __export(types_exports, {
   default: () => types_default
 });
-var defaultImport32 = __toESM(require("@splunk/visualization-encoding/utils/types"));
+var defaultImport34 = __toESM(require("@splunk/visualization-encoding/utils/types"));
 __reExport(types_exports, require("@splunk/visualization-encoding/utils/types"));
-var types_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var types_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // esm-externals:d3-scale
 var d3_scale_exports = {};
 __export(d3_scale_exports, {
   default: () => d3_scale_default
 });
-var defaultImport33 = __toESM(require("d3-scale"));
+var defaultImport35 = __toESM(require("d3-scale"));
 __reExport(d3_scale_exports, require("d3-scale"));
-var d3_scale_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var d3_scale_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // src/Punchcard/PurePunchcard/src/utils/punchcardUtils.ts
-var AXIS_ORIENTATION_TYPES = /* @__PURE__ */ ((AXIS_ORIENTATION_TYPES2) => {
-  AXIS_ORIENTATION_TYPES2["VERTICAL"] = "vertical";
-  AXIS_ORIENTATION_TYPES2["HORIZONTAL"] = "horizontal";
-  return AXIS_ORIENTATION_TYPES2;
-})(AXIS_ORIENTATION_TYPES || {});
-var BUBBLE_ROW_SCALE_TYPES = /* @__PURE__ */ ((BUBBLE_ROW_SCALE_TYPES2) => {
-  BUBBLE_ROW_SCALE_TYPES2["GLOBAL"] = "global";
-  BUBBLE_ROW_SCALE_TYPES2["ROW"] = "row";
-  return BUBBLE_ROW_SCALE_TYPES2;
-})(BUBBLE_ROW_SCALE_TYPES || {});
-var BUBBLE_SCALE_TYPES = /* @__PURE__ */ ((BUBBLE_SCALE_TYPES2) => {
-  BUBBLE_SCALE_TYPES2["RADIUS"] = "radius";
-  BUBBLE_SCALE_TYPES2["AREA"] = "area";
-  return BUBBLE_SCALE_TYPES2;
-})(BUBBLE_SCALE_TYPES || {});
-var COLOR_MODE_TYPES = /* @__PURE__ */ ((COLOR_MODE_TYPES2) => {
-  COLOR_MODE_TYPES2["SEQUENTIAL"] = "sequential";
-  COLOR_MODE_TYPES2["CATEGORICAL"] = "categorical";
-  return COLOR_MODE_TYPES2;
-})(COLOR_MODE_TYPES || {});
-var BUBBLE_LABELS_TYPES = /* @__PURE__ */ ((BUBBLE_LABELS_TYPES2) => {
-  BUBBLE_LABELS_TYPES2["ALL"] = "all";
-  BUBBLE_LABELS_TYPES2["MAX"] = "max";
-  BUBBLE_LABELS_TYPES2["NONE"] = "none";
-  return BUBBLE_LABELS_TYPES2;
-})(BUBBLE_LABELS_TYPES || {});
 var GRAYSCALE_FILTER_ID = `punchcard-grayscale-filter-id-${Math.floor(Math.random() * 1e3)}`;
 var X_AXIS_HEIGHT = 15;
 var Y_AXIS_WIDTH = 77;
@@ -2750,7 +2848,7 @@ var getDataByRows = ({
   y.forEach((yValue, index) => {
     const xValue = x[index];
     const sizeValue = size2[index];
-    const categoryValue = category && category[index] ? category[index] : null;
+    const categoryValue = (category == null ? void 0 : category[index]) || null;
     const bubbleColorValue = colorMode === "sequential" /* SEQUENTIAL */ && isBubbleColorAnArray ? bubbleColor[index] : getColorValue(categoryValue);
     if (xValue == null || yValue == null || sizeValue == null) {
       return;
@@ -2896,7 +2994,7 @@ var getElementToFocus = ({
     return {
       x: el,
       y: y[i],
-      category: (_a = category[i]) != null ? _a : null,
+      category: category ? (_a = category[i]) != null ? _a : null : null,
       size: bubbleSizes[i]
     };
   });
@@ -2963,36 +3061,36 @@ var findIndex_exports = {};
 __export(findIndex_exports, {
   default: () => findIndex_default
 });
-var defaultImport34 = __toESM(require("lodash/findIndex"));
+var defaultImport36 = __toESM(require("lodash/findIndex"));
 __reExport(findIndex_exports, require("lodash/findIndex"));
-var findIndex_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var findIndex_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // esm-externals:lodash/find
 var find_exports = {};
 __export(find_exports, {
   default: () => find_default
 });
-var defaultImport35 = __toESM(require("lodash/find"));
+var defaultImport37 = __toESM(require("lodash/find"));
 __reExport(find_exports, require("lodash/find"));
-var find_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var find_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // esm-externals:lodash/sortBy
 var sortBy_exports = {};
 __export(sortBy_exports, {
   default: () => sortBy_default
 });
-var defaultImport36 = __toESM(require("lodash/sortBy"));
+var defaultImport38 = __toESM(require("lodash/sortBy"));
 __reExport(sortBy_exports, require("lodash/sortBy"));
-var sortBy_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+var sortBy_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
 
 // esm-externals:lodash/flattenDeep
 var flattenDeep_exports = {};
 __export(flattenDeep_exports, {
   default: () => flattenDeep_default
 });
-var defaultImport37 = __toESM(require("lodash/flattenDeep"));
+var defaultImport39 = __toESM(require("lodash/flattenDeep"));
 __reExport(flattenDeep_exports, require("lodash/flattenDeep"));
-var flattenDeep_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+var flattenDeep_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
 
 // src/Punchcard/PurePunchcard/src/utils/sortUtils.js
 var TIME_RANGES = {
@@ -3136,6 +3234,8 @@ var sortAxis = (axis) => {
 };
 
 // src/Punchcard/PurePunchcard/src/PunchcardAxis.tsx
+var noop4 = () => {
+};
 var AxisLabelText = styled_components_default.text`
     cursor: pointer;
     dominant-baseline: middle;
@@ -3145,17 +3245,16 @@ var AxisLabelText = styled_components_default.text`
     opacity: ${(props) => props.muted ? 0.15 : 1};
     transition: all 0.15s;
 `;
-var PunchcardAxis = (props) => {
-  const {
-    labels,
-    handleMouseEnter,
-    handleMouseLeave,
-    orientation,
-    scale,
-    selected,
-    startPositionX,
-    startPositionY
-  } = props;
+var PunchcardAxis = ({
+  labels,
+  handleMouseEnter = noop4,
+  handleMouseLeave = noop4,
+  orientation = "vertical" /* VERTICAL */,
+  scale,
+  selected = null,
+  startPositionX = 0,
+  startPositionY = 0
+}) => {
   return /* @__PURE__ */ react_exports.createElement("g", { "data-test": `${orientation === "vertical" /* VERTICAL */ ? "y" : "x"}-axis` }, labels.map((label, index) => {
     const positionDelta = index * scale.bandwidth() + scale.bandwidth() / 2;
     const xPosition = orientation === "vertical" /* VERTICAL */ ? startPositionX : startPositionX + positionDelta;
@@ -3181,34 +3280,6 @@ var PunchcardAxis = (props) => {
     );
   }));
 };
-var propTypes = {
-  labels: prop_types_exports.arrayOf(prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number])).isRequired,
-  handleMouseEnter: prop_types_exports.func,
-  handleMouseLeave: prop_types_exports.func,
-  orientation: prop_types_exports.oneOf(Object.values(AXIS_ORIENTATION_TYPES)),
-  scale: prop_types_exports.func.isRequired,
-  selected: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  startPositionX: prop_types_exports.number,
-  startPositionY: prop_types_exports.number
-};
-var defaultProps = {
-  // set as undefined as we are using defaultProps in conjunction with ts
-  // where it requires all keys of interface to be present in defaultProps
-  // eslint-disable-next-line react/default-props-match-prop-types
-  labels: void 0,
-  handleMouseEnter: () => {
-  },
-  handleMouseLeave: () => {
-  },
-  orientation: "vertical",
-  // eslint-disable-next-line react/default-props-match-prop-types
-  scale: void 0,
-  selected: null,
-  startPositionX: 0,
-  startPositionY: 0
-};
-PunchcardAxis.propTypes = propTypes;
-PunchcardAxis.defaultProps = defaultProps;
 var PunchcardAxis_default = PunchcardAxis;
 
 // esm-externals:@splunk/themes
@@ -3216,9 +3287,9 @@ var themes_exports = {};
 __export(themes_exports, {
   default: () => themes_default
 });
-var defaultImport38 = __toESM(require("@splunk/themes"));
+var defaultImport40 = __toESM(require("@splunk/themes"));
 __reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+var themes_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
 
 // src/Punchcard/PurePunchcard/src/PunchcardBubble.tsx
 var BubbleCircle = styled_components_default.circle`
@@ -3258,25 +3329,26 @@ 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,
-    color,
-    cx,
-    cy,
-    fillOpacity,
-    handleMouseEnter,
-    handleMouseLeave,
-    hover,
-    muted,
-    pulsate,
-    value,
-    r,
-    handlePointClick,
-    accessibleLabel,
-    tabindex,
-    backgroundColor
-  } = props;
+var noop5 = () => {
+};
+var PunchcardBubble = ({
+  showBubbleLabel = true,
+  color = "#46D3BB",
+  cx = 0,
+  cy = 0,
+  fillOpacity = 1,
+  handleMouseEnter = noop5,
+  handleMouseLeave = noop5,
+  hover = false,
+  muted = false,
+  pulsate = false,
+  value = void 0,
+  r = 1,
+  handlePointClick = noop5,
+  accessibleLabel = "",
+  tabindex = -1,
+  backgroundColor = null
+}) => {
   const outline = value < 0;
   const showPulsateBubble = pulsate && !muted && !hover;
   const displayLabel = hover || showBubbleLabel && r >= MIN_BUBBLE_SIZE_TO_DISPLAY_LABEL;
@@ -3330,73 +3402,33 @@ var PunchcardBubble = (props) => {
     )
   );
 };
-var propTypes2 = {
-  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,
-  fillOpacity: prop_types_exports.number,
-  handleMouseEnter: prop_types_exports.func,
-  handleMouseLeave: prop_types_exports.func,
-  hover: prop_types_exports.bool,
-  muted: prop_types_exports.bool,
-  pulsate: prop_types_exports.bool,
-  value: prop_types_exports.number,
-  r: prop_types_exports.number,
-  handlePointClick: prop_types_exports.func,
-  accessibleLabel: prop_types_exports.string,
-  tabindex: prop_types_exports.number
-};
-var defaultProps2 = {
-  showBubbleLabel: true,
-  backgroundColor: null,
-  color: "#46D3BB",
-  cx: 0,
-  cy: 0,
-  fillOpacity: 1,
-  handleMouseEnter: () => {
-  },
-  handleMouseLeave: () => {
-  },
-  hover: false,
-  muted: false,
-  pulsate: false,
-  r: 1,
-  value: void 0,
-  handlePointClick: () => {
-  },
-  accessibleLabel: "",
-  tabindex: -1
-};
-PunchcardBubble.propTypes = propTypes2;
-PunchcardBubble.defaultProps = defaultProps2;
 var PunchcardBubble_default = PunchcardBubble;
 
 // src/Punchcard/PurePunchcard/src/PunchcardRow.tsx
-var PunchcardRow = (props) => {
-  const {
-    showBubbleLabels,
-    backgroundColor,
-    category,
-    colors,
-    handleMouseEnter,
-    handleMouseLeave,
-    maxSizeValue,
-    opacities,
-    radiusValues,
-    selectedCategory,
-    selectedX,
-    selectedY,
-    showMaxValuePulsation,
-    size: size2,
-    x,
-    xScale,
-    yIndex,
-    yPosition,
-    yValue,
-    handlePointClick
-  } = props;
+var noop6 = () => {
+};
+var PunchcardRow = ({
+  showBubbleLabels = null,
+  backgroundColor = null,
+  category,
+  colors,
+  handleMouseEnter = noop6,
+  handleMouseLeave = noop6,
+  maxSizeValue = null,
+  opacities,
+  radiusValues,
+  selectedCategory = null,
+  selectedX = null,
+  selectedY = null,
+  showMaxValuePulsation = true,
+  size: size2,
+  x,
+  xScale,
+  yIndex = null,
+  yPosition = null,
+  yValue = null,
+  handlePointClick = noop6
+}) => {
   return /* @__PURE__ */ react_exports.createElement("g", null, x.map((xValue, index) => {
     const sizeValue = size2[index];
     const categoryValue = category[index];
@@ -3454,90 +3486,41 @@ var PunchcardRow = (props) => {
     );
   }));
 };
-var propTypes3 = {
-  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,
-  handleMouseLeave: prop_types_exports.func,
-  maxSizeValue: prop_types_exports.number,
-  opacities: prop_types_exports.arrayOf(prop_types_exports.number),
-  radiusValues: prop_types_exports.arrayOf(prop_types_exports.number),
-  selectedCategory: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  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]),
-  showMaxValuePulsation: prop_types_exports.bool,
-  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
-};
-var defaultProps3 = {
-  backgroundColor: null,
-  showBubbleLabels: null,
-  category: null,
-  colors: null,
-  handleMouseEnter: () => {
-  },
-  handleMouseLeave: () => {
-  },
-  maxSizeValue: null,
-  opacities: null,
-  radiusValues: null,
-  selectedCategory: null,
-  selectedX: null,
-  selectedY: null,
-  showMaxValuePulsation: true,
-  size: null,
-  // eslint-disable-next-line react/default-props-match-prop-types
-  x: null,
-  xScale: null,
-  yIndex: null,
-  yPosition: null,
-  yValue: null,
-  handlePointClick: () => {
-  }
-};
-PunchcardRow.propTypes = propTypes3;
-PunchcardRow.defaultProps = defaultProps3;
 var PunchcardRow_default = (0, styled_components_exports.withTheme)(PunchcardRow);
 
 // src/Punchcard/PurePunchcard/src/PunchcardChartArea.tsx
-var PunchcardChartArea = (props) => {
-  const {
-    showBubbleLabels,
-    backgroundColor,
-    bubbleRowScale,
-    bubbleScale,
-    category,
-    colorCategoryMapping,
-    colorMode,
-    bubbleColor,
-    handleMouseEnter,
-    handleMouseLeave,
-    isBubbleSizeDynamic,
-    minBubbleColorIntensity,
-    minBand,
-    minBubbleSize,
-    maxBubbleSize,
-    maxBubbleRadius,
-    minBubbleRadius,
-    showMaxValuePulsation,
-    selectedCategory,
-    selectedX,
-    selectedY,
-    size: size2,
-    uniqX,
-    x,
-    xScale,
-    y,
-    yScale,
-    handlePointClick
-  } = props;
+var noop7 = () => {
+};
+var PunchcardChartArea = ({
+  showBubbleLabels = "all" /* ALL */,
+  backgroundColor = null,
+  bubbleRowScale = "row" /* ROW */,
+  bubbleScale = "area" /* AREA */,
+  category = null,
+  colorCategoryMapping = null,
+  colorMode = "categorical" /* CATEGORICAL */,
+  bubbleColor = "#A870EF",
+  handleMouseEnter = noop7,
+  handleMouseLeave = noop7,
+  isBubbleSizeDynamic = true,
+  minBubbleColorIntensity = 0.25,
+  minBand = 15,
+  minBubbleSize = 0.01,
+  maxBubbleSize = 1,
+  maxBubbleRadius = 15,
+  minBubbleRadius = 1,
+  showMaxValuePulsation = true,
+  selectedCategory = null,
+  selectedX = null,
+  selectedY = null,
+  size: size2,
+  uniqX,
+  x,
+  xScale,
+  y,
+  yScale,
+  handlePointClick = noop7
+}) => {
   const dataByRows = getDataByRows({
     bubbleRowScale,
     bubbleScale,
@@ -3596,78 +3579,11 @@ var PunchcardChartArea = (props) => {
     );
   }));
 };
-var propTypes4 = {
-  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),
-  colorCategoryMapping: prop_types_exports.func,
-  colorMode: prop_types_exports.oneOf(Object.values(COLOR_MODE_TYPES)),
-  bubbleColor: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.arrayOf(prop_types_exports.string)]),
-  handleMouseEnter: prop_types_exports.func,
-  handleMouseLeave: prop_types_exports.func,
-  isBubbleSizeDynamic: prop_types_exports.bool,
-  minBubbleColorIntensity: prop_types_exports.number,
-  minBand: prop_types_exports.number,
-  minBubbleSize: prop_types_exports.number,
-  maxBubbleSize: prop_types_exports.number,
-  maxBubbleRadius: prop_types_exports.number,
-  minBubbleRadius: prop_types_exports.number,
-  showMaxValuePulsation: prop_types_exports.bool,
-  selectedCategory: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  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,
-  yScale: prop_types_exports.func,
-  handlePointClick: prop_types_exports.func
-};
-var defaultProps4 = {
-  showBubbleLabels: "all" /* ALL */,
-  backgroundColor: null,
-  bubbleRowScale: "row" /* ROW */,
-  bubbleScale: "area" /* AREA */,
-  category: null,
-  colorCategoryMapping: null,
-  colorMode: "categorical" /* CATEGORICAL */,
-  bubbleColor: "#A870EF",
-  handleMouseEnter: () => {
-  },
-  handleMouseLeave: () => {
-  },
-  isBubbleSizeDynamic: true,
-  minBubbleColorIntensity: 0.25,
-  minBand: 15,
-  minBubbleSize: 0.01,
-  maxBubbleSize: 1,
-  maxBubbleRadius: 15,
-  minBubbleRadius: 1,
-  showMaxValuePulsation: true,
-  selectedCategory: null,
-  selectedX: null,
-  selectedY: null,
-  // 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
-  y: null,
-  yScale: null,
-  handlePointClick: () => {
-  }
-};
-PunchcardChartArea.propTypes = propTypes4;
-PunchcardChartArea.defaultProps = defaultProps4;
 var PunchcardChartArea_default = PunchcardChartArea;
 
 // src/Punchcard/PurePunchcard/src/PunchcardLegend.tsx
+var noop8 = () => {
+};
 var LEGEND_ITEM_VERTICAL_SPACER = 25;
 var LEGEND_ITEM_HORIZONTAL_SPACER = 10;
 var LEGEND_RECT_WIDTH = 5;
@@ -3691,19 +3607,18 @@ var LegendText = styled_components_default.text`
     fill: ${variables_default.contentColorDefault};
     font-size: 12px;
 `;
-var PunchcardLegend = (props) => {
-  const {
-    category,
-    colorCategoryMapping,
-    handleMouseEnter,
-    handleMouseLeave,
-    selected,
-    startPositionX,
-    startPositionY,
-    containerWidth,
-    containerHeight,
-    handleLegendClick: handleLegendClick2
-  } = props;
+var PunchcardLegend = ({
+  category,
+  colorCategoryMapping,
+  handleMouseEnter = noop8,
+  handleMouseLeave = noop8,
+  selected = null,
+  startPositionX = 0,
+  startPositionY = 0,
+  containerWidth = 100,
+  containerHeight = 100,
+  handleLegendClick: handleLegendClick2 = noop8
+}) => {
   const legendWidth = containerWidth - LEGEND_OFFSET_RIGHT - startPositionX;
   const legendHeight = containerHeight - LEGEND_OFFSET_BOTTOM;
   return /* @__PURE__ */ react_exports.createElement(
@@ -3740,36 +3655,6 @@ var PunchcardLegend = (props) => {
     }))
   );
 };
-var propTypes5 = {
-  category: prop_types_exports.arrayOf(prop_types_exports.string),
-  colorCategoryMapping: prop_types_exports.func.isRequired,
-  handleMouseEnter: prop_types_exports.func,
-  handleMouseLeave: prop_types_exports.func,
-  selected: prop_types_exports.string,
-  startPositionX: prop_types_exports.number,
-  startPositionY: prop_types_exports.number,
-  containerWidth: prop_types_exports.number,
-  containerHeight: prop_types_exports.number,
-  handleLegendClick: prop_types_exports.func
-};
-var defaultProps5 = {
-  category: null,
-  // eslint-disable-next-line react/default-props-match-prop-types
-  colorCategoryMapping: null,
-  handleMouseEnter: () => {
-  },
-  handleMouseLeave: () => {
-  },
-  selected: null,
-  startPositionX: 0,
-  startPositionY: 0,
-  containerWidth: 100,
-  containerHeight: 100,
-  handleLegendClick: () => {
-  }
-};
-PunchcardLegend.propTypes = propTypes5;
-PunchcardLegend.defaultProps = defaultProps5;
 var PunchcardLegend_default = PunchcardLegend;
 
 // src/Punchcard/PurePunchcard/src/PunchcardGridLines.tsx
@@ -3777,8 +3662,14 @@ var GridLine = styled_components_default.line`
     stroke: ${variables_default.borderColorWeak};
     stroke-width: 1px;
 `;
-var PunchcardGridLines = (props) => {
-  const { xStartPosition, xEndPosition, yStartPosition, yEndPosition, xDelta, yDelta } = props;
+var PunchcardGridLines = ({
+  xStartPosition,
+  xEndPosition,
+  yStartPosition,
+  yEndPosition,
+  xDelta = 10,
+  yDelta = 10
+}) => {
   const yGridLinesXPositions = (0, lodash_exports.range)(xStartPosition, xEndPosition + 1, xDelta);
   const xGridLinesYPositions = (0, lodash_exports.range)(yStartPosition, yEndPosition + 1, yDelta);
   return /* @__PURE__ */ react_exports.createElement("g", { "data-test": "data-test-gridlines" }, yGridLinesXPositions.map((xValue) => /* @__PURE__ */ react_exports.createElement(
@@ -3801,27 +3692,11 @@ var PunchcardGridLines = (props) => {
     }
   )));
 };
-var propTypes6 = {
-  xStartPosition: prop_types_exports.number,
-  xEndPosition: prop_types_exports.number,
-  yStartPosition: prop_types_exports.number,
-  yEndPosition: prop_types_exports.number,
-  xDelta: prop_types_exports.number,
-  yDelta: prop_types_exports.number
-};
-var defaultProps6 = {
-  xStartPosition: void 0,
-  xEndPosition: void 0,
-  yStartPosition: void 0,
-  yEndPosition: void 0,
-  xDelta: 10,
-  yDelta: 10
-};
-PunchcardGridLines.propTypes = propTypes6;
-PunchcardGridLines.defaultProps = defaultProps6;
 var PunchcardGridLines_default = PunchcardGridLines;
 
 // src/Punchcard/PurePunchcard/Punchcard.tsx
+var noop9 = () => {
+};
 var Container = styled_components_default.div`
     cursor: default;
     overflow: hidden;
@@ -3844,7 +3719,37 @@ var PunchcardContainer = styled_components_default.div`
 var PunchcardSVG = styled_components_default.svg`
     ${(props) => (0, style_exports.toDimension)((0, lodash_exports.pick)(props, ["width", "height"]))};
 `;
-var Punchcard = (props) => {
+var DEFAULT_BUBBLE_COLOR = "#7B56DB";
+var Punchcard = ({
+  backgroundColor = "transparent",
+  showBubbleLabels = "all" /* ALL */,
+  bubbleRowScale = "global" /* GLOBAL */,
+  bubbleScale = "area" /* AREA */,
+  category = null,
+  categoryField = null,
+  colorMode = "categorical" /* CATEGORICAL */,
+  seriesColors = visualization_color_palettes_exports.CATEGORICAL,
+  bubbleColor = DEFAULT_BUBBLE_COLOR,
+  minBubbleColorIntensity = 0.4,
+  showMaxValuePulsation = true,
+  height = 500,
+  isBubbleSizeDynamic = true,
+  minBubbleSize = 0.25,
+  maxBubbleSize = 1,
+  maxBubbleRadius = 15,
+  minBubbleRadius = 1,
+  useDefaultSort = false,
+  showLegend = true,
+  size: size2 = null,
+  sizeField = null,
+  width = "100%",
+  x = null,
+  y = null,
+  xField = null,
+  yField = null,
+  onPointClick = noop9,
+  onLegendClick = noop9
+}) => {
   const [selectedX, setSelectedX] = react_exports.useState(null);
   const [selectedY, setSelectedY] = react_exports.useState(null);
   const [selectedCategory, setSelectedCategory] = react_exports.useState(null);
@@ -3852,17 +3757,17 @@ var Punchcard = (props) => {
     setContainerWidth(w);
     setContainerHeight(h);
   }, []);
-  const [containerWidth, setContainerWidth] = react_exports.useState(Number(props.width));
-  const [containerHeight, setContainerHeight] = react_exports.useState(Number(props.height));
+  const [containerWidth, setContainerWidth] = react_exports.useState(Number(width));
+  const [containerHeight, setContainerHeight] = react_exports.useState(Number(height));
   const handleMouseLeave = () => {
     setSelectedX(null);
     setSelectedY(null);
     setSelectedCategory(null);
   };
-  const handleLegendHover = (category2) => {
+  const handleLegendHover = (hoveredCategory) => {
     setSelectedX(null);
     setSelectedY(null);
-    setSelectedCategory(category2);
+    setSelectedCategory(hoveredCategory);
   };
   const handleXAxisHover = (xValue) => {
     setSelectedX(xValue);
@@ -3874,43 +3779,17 @@ var Punchcard = (props) => {
     setSelectedY(yValue);
     setSelectedCategory(null);
   };
-  const handleBubbleHover = (xValue, yValue, category2) => {
+  const handleBubbleHover = (xValue, yValue, categoryValue) => {
     setSelectedX(xValue);
     setSelectedY(yValue);
-    setSelectedCategory(category2);
+    setSelectedCategory(categoryValue);
   };
-  const {
-    backgroundColor,
-    showBubbleLabels,
-    bubbleRowScale,
-    bubbleScale,
-    category,
-    categoryField,
-    colorMode,
-    seriesColors,
-    bubbleColor,
-    minBubbleColorIntensity,
-    height,
-    showMaxValuePulsation,
-    isBubbleSizeDynamic,
-    minBubbleSize,
-    maxBubbleSize,
-    maxBubbleRadius,
-    minBubbleRadius,
-    useDefaultSort,
-    showLegend,
-    size: size2,
-    sizeField,
-    width,
-    x,
-    y,
-    xField,
-    yField,
-    onPointClick,
-    onLegendClick
-  } = props;
   const calculatedColorMode = category ? colorMode : "sequential" /* SEQUENTIAL */;
   const displayLegend = showLegend && calculatedColorMode === "categorical" /* CATEGORICAL */;
+  const chartRef = react_exports.useRef();
+  if (!x || !y || !size2) {
+    return null;
+  }
   const uniqX = useDefaultSort ? sortAxis((0, lodash_exports.uniq)(x.map((v) => `${v}`))) : (0, lodash_exports.uniq)(x);
   const uniqY = useDefaultSort ? sortAxis((0, lodash_exports.uniq)(y.map((v) => `${v}`))) : (0, lodash_exports.uniq)(y);
   const uniqCategory = (0, lodash_exports.uniq)(category);
@@ -3943,7 +3822,6 @@ var Punchcard = (props) => {
       }
     });
   };
-  const chartRef = react_exports.useRef();
   const handleKeyDown = (e) => {
     var _a, _b;
     const keyMap = {
@@ -4104,71 +3982,6 @@ var Punchcard = (props) => {
   };
   return /* @__PURE__ */ react_exports.createElement(Container, { backgroundColor, height, width }, /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }), renderVisualization());
 };
-var propTypes7 = {
-  backgroundColor: prop_types_exports.string,
-  showBubbleLabels: prop_types_exports.oneOf(Object.values(BUBBLE_LABELS_TYPES)),
-  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),
-  categoryField: prop_types_exports.string,
-  colorMode: prop_types_exports.oneOf(Object.values(COLOR_MODE_TYPES)),
-  seriesColors: prop_types_exports.arrayOf(prop_types_exports.string),
-  bubbleColor: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.arrayOf(prop_types_exports.string)]),
-  minBubbleColorIntensity: prop_types_exports.number,
-  height: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  isBubbleSizeDynamic: prop_types_exports.bool,
-  minBubbleSize: prop_types_exports.number,
-  maxBubbleSize: prop_types_exports.number,
-  maxBubbleRadius: prop_types_exports.number,
-  minBubbleRadius: prop_types_exports.number,
-  useDefaultSort: prop_types_exports.bool,
-  showMaxValuePulsation: prop_types_exports.bool,
-  showLegend: prop_types_exports.bool,
-  sizeField: prop_types_exports.string,
-  width: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
-  // hotfix: isRequired check is removed here for x, y and size props
-  // to remove console warnings on early return of this component and
-  // implemented in config file using requiredProps
-  x: prop_types_exports.arrayOf(prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number])),
-  y: prop_types_exports.arrayOf(prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number])),
-  size: prop_types_exports.arrayOf(prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number])),
-  xField: prop_types_exports.string,
-  yField: prop_types_exports.string,
-  onPointClick: prop_types_exports.func,
-  onLegendClick: prop_types_exports.func
-};
-var defaultProps7 = {
-  backgroundColor: "transparent",
-  showBubbleLabels: "all",
-  bubbleRowScale: "global",
-  bubbleScale: "area",
-  category: null,
-  categoryField: null,
-  colorMode: "categorical",
-  seriesColors: visualization_color_palettes_exports.CATEGORICAL,
-  bubbleColor: "#7B56DB",
-  minBubbleColorIntensity: 0.4,
-  showMaxValuePulsation: true,
-  height: 500,
-  isBubbleSizeDynamic: true,
-  minBubbleSize: 0.25,
-  maxBubbleSize: 1,
-  maxBubbleRadius: 15,
-  minBubbleRadius: 1,
-  useDefaultSort: false,
-  showLegend: true,
-  size: null,
-  sizeField: null,
-  width: "100%",
-  x: null,
-  y: null,
-  xField: null,
-  yField: null,
-  onPointClick: lodash_exports.noop,
-  onLegendClick: lodash_exports.noop
-};
-Punchcard.propTypes = propTypes7;
-Punchcard.defaultProps = defaultProps7;
 var Punchcard_default = Punchcard;
 
 // src/Punchcard/punchcardUtils.ts
@@ -4230,7 +4043,7 @@ var computeVizProps = (_a) => {
     x,
     y,
     // PurePunchcard accepts category as string array
-    category: category && category.map(String)
+    category: category == null ? void 0 : category.map(String)
   }, options);
 };
 var viz = withDashboardViz_default({