@splunk/visualizations 28.5.3 → 28.7.0

package/Area.js

@@ -12,6 +12,7 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __pow = Math.pow;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
@@ -59,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/Area/index.ts
 var Area_exports = {};
@@ -558,8 +560,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,
     {
@@ -797,6 +818,35 @@ var Charting = (props) => {
       });
     }
   );
+  const initChart = (updatedOptions, serializedTimezone, ianaTimezone, utcOffset) => {
+    destroyChart();
+    charting_bundle_default.setTheme(themeKey);
+    if (colorPalette.length > 0) {
+      charting_bundle_default.setColorPalette(colorPalette);
+    }
+    chart.current = charting_bundle_default.createChart(container.current, __spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, updatedOptions), {
+      drilldown: "all"
+    }), typeof serializedTimezone === "string" && {
+      "time.serializedTz": serializedTimezone
+    }), typeof ianaTimezone === "string" && {
+      "time.ianaTimezone": ianaTimezone
+    }), typeof utcOffset === "number" && {
+      "time.timezoneOffset": utcOffset
+    }));
+    chart.current.on("pointClick", (e) => {
+      handleClick2(e, "point.click" /* POINT_CLICK */);
+    });
+    chart.current.on("pointMouseOver", (e) => {
+      handlePointMouseOver(e, "point.mouseover" /* POINT_MOUSE_OVER */);
+    });
+    chart.current.on("pointMouseOut", (e) => {
+      handlePointMouseOut(e, "point.mouseout" /* POINT_MOUSE_OUT */);
+    });
+    chart.current.on("legendClick", (e) => {
+      handleClick2(e, "legend.click" /* LEGEND_CLICK */);
+    });
+    chart.current.on("chartRangeSelect", handleSelect);
+  };
   const drawChart = () => {
     const updatedOptions = __spreadProps(__spreadValues({}, options), { shouldColorizeTooltipData: false });
     const computedChartSize = computeChartingSize();
@@ -820,33 +870,7 @@ var Charting = (props) => {
     }
     try {
       if (needsInit.current) {
-        destroyChart();
-        charting_bundle_default.setTheme(themeKey);
-        if (colorPalette.length > 0) {
-          charting_bundle_default.setColorPalette(colorPalette);
-        }
-        chart.current = charting_bundle_default.createChart(container.current, __spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, updatedOptions), {
-          drilldown: "all"
-        }), typeof serializedTimezone === "string" && {
-          "time.serializedTz": serializedTimezone
-        }), typeof ianaTimezone === "string" && {
-          "time.ianaTimezone": ianaTimezone
-        }), typeof utcOffset === "number" && {
-          "time.timezoneOffset": utcOffset
-        }));
-        chart.current.on("pointClick", (e) => {
-          handleClick2(e, "point.click" /* POINT_CLICK */);
-        });
-        chart.current.on("pointMouseOver", (e) => {
-          handlePointMouseOver(e, "point.mouseover" /* POINT_MOUSE_OVER */);
-        });
-        chart.current.on("pointMouseOut", (e) => {
-          handlePointMouseOut(e, "point.mouseout" /* POINT_MOUSE_OUT */);
-        });
-        chart.current.on("legendClick", (e) => {
-          handleClick2(e, "legend.click" /* LEGEND_CLICK */);
-        });
-        chart.current.on("chartRangeSelect", handleSelect);
+        initChart(updatedOptions, serializedTimezone, ianaTimezone, utcOffset);
       }
       if (needsRedraw.current) {
         charting_bundle_default.setTheme(themeKey);
@@ -1225,26 +1249,59 @@ var isTrellisEnabled2 = ({ options, featureFlags }) => {
   const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
   return isTrellisFeatureFlagOn2({ featureFlags }) && splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
 };
-var TrellisEditorConfig = [
-  [
-    {
-      label: (0, i18n_exports._)("Trellis layout"),
-      option: "splitByLayout",
-      editor: "editor.toggle",
-      showEditor: isTrellisFeatureFlagOn2
-    }
-  ],
-  [
-    {
-      label: (0, i18n_exports._)("Split by"),
-      option: "trellisSplitBy",
-      editor: "editor.trellisSplitBy",
-      editorProps: {
-        dataSourceKey: "primary"
-      },
-      showEditor: isTrellisEnabled2
-    }
-  ],
+var sortByValuesBase = [
+  { label: (0, i18n_exports._)("Result"), value: "result" },
+  { label: (0, i18n_exports._)("Name"), value: "name" }
+];
+var sortByValuesWithValue = [...sortByValuesBase, { label: (0, i18n_exports._)("Value"), value: "value" }];
+var sortByValuesWithValueAndTrend = [
+  ...sortByValuesBase,
+  { label: (0, i18n_exports._)("Value"), value: "value" },
+  { label: (0, i18n_exports._)("Trend"), value: "trend" }
+];
+var makeSortRow = (sortByValues) => [
+  {
+    label: (0, i18n_exports._)("Sort by"),
+    option: "trellisSortBy",
+    editor: "editor.select",
+    editorProps: {
+      values: sortByValues
+    },
+    showEditor: isTrellisEnabled2
+  },
+  {
+    label: (0, i18n_exports._)("Sort order"),
+    option: "trellisSortOrder",
+    editor: "editor.select",
+    editorProps: {
+      values: [
+        { label: (0, i18n_exports._)("Ascending"), value: "ascending" },
+        { label: (0, i18n_exports._)("Descending"), value: "descending" }
+      ]
+    },
+    showEditor: isTrellisEnabled2
+  }
+];
+var trellisLayoutRow = [
+  {
+    label: (0, i18n_exports._)("Trellis layout"),
+    option: "splitByLayout",
+    editor: "editor.toggle",
+    showEditor: isTrellisFeatureFlagOn2
+  }
+];
+var trellisSplitByRow = [
+  {
+    label: (0, i18n_exports._)("Split by"),
+    option: "trellisSplitBy",
+    editor: "editor.trellisSplitBy",
+    editorProps: {
+      dataSourceKey: "primary"
+    },
+    showEditor: isTrellisEnabled2
+  }
+];
+var trellisLayoutRows = [
   [
     {
       label: (0, i18n_exports._)("Number of columns"),
@@ -1288,6 +1345,24 @@ var TrellisEditorConfig = [
     }
   ]
 ];
+var TrellisEditorConfig = [
+  trellisLayoutRow,
+  trellisSplitByRow,
+  makeSortRow(sortByValuesBase),
+  ...trellisLayoutRows
+];
+var GaugeTrellisEditorConfig = [
+  trellisLayoutRow,
+  trellisSplitByRow,
+  makeSortRow(sortByValuesWithValue),
+  ...trellisLayoutRows
+];
+var SingleValueTrellisEditorConfig = [
+  trellisLayoutRow,
+  trellisSplitByRow,
+  makeSortRow(sortByValuesWithValueAndTrend),
+  ...trellisLayoutRows
+];
 var TimechartTrellisEditorConfig = [
   [
     {
@@ -1295,7 +1370,6 @@ var TimechartTrellisEditorConfig = [
       option: "splitByLayout",
       editor: "editor.toggle",
       showEditor: isTrellisFeatureFlagOn2,
-      // add help text for timecharts
       editorProps: {
         help: (0, i18n_exports._)(
           "Y2-axis and overlay field configurations are not supported when trellis is enabled."
@@ -1304,7 +1378,9 @@ var TimechartTrellisEditorConfig = [
       }
     }
   ],
-  ...TrellisEditorConfig.slice(1),
+  trellisSplitByRow,
+  makeSortRow(sortByValuesBase),
+  ...trellisLayoutRows,
   [
     {
       label: (0, i18n_exports._)("Shared y-axis scale"),
@@ -1386,7 +1462,7 @@ var AxesChartDataDisplayBase = {
         editorProps: {
           filterByTypes: ["number"]
         },
-        isDisabled: isTrellisEnabled3
+        isDisabled: ({ options, featureFlags }) => isTrellisEnabled3({ options, featureFlags }) || options.stackMode === "stacked100"
       }
     ],
     [
@@ -1911,6 +1987,10 @@ var AxesChartXGridAndLabelsBubbleScatter = {
 var AxesChartXGridAndLabels_default = AxesChartXGridAndLabels;
 
 // src/common/editorConfig/AxesChartYGridAndLabels.ts
+var isAcceleratedRenderEnabled2 = ({ options, featureFlags }) => {
+  const { acceleratedRender } = options;
+  return isAcceleratedRenderFeatureFlagOn({ featureFlags }) && acceleratedRender;
+};
 var AxesChartYGridAndLabels = {
   label: (0, i18n_exports._)("Y-axis grid and labels"),
   layout: [
@@ -1975,7 +2055,8 @@ var AxesChartYGridAndLabels = {
       {
         label: (0, i18n_exports._)("Extend to whole grid"),
         option: "showYAxisExtendedRange",
-        editor: "editor.checkbox"
+        editor: "editor.checkbox",
+        showEditor: ({ options, featureFlags }) => !isAcceleratedRenderEnabled2({ options, featureFlags })
       }
     ],
     [
@@ -2272,6 +2353,7 @@ var axesChartY2GridAndLabels = {
 var AxesChartY2GridAndLabels_default = axesChartY2GridAndLabels;
 
 // src/Area/config.ts
+var hasSteppedInterpolationEnabled = ({ options }) => (options == null ? void 0 : options.stepPosition) === "before" || (options == null ? void 0 : options.stepPosition) === "after";
 var dataContract = {
   requiredDataSources: [
     {
@@ -2306,7 +2388,9 @@ var themes2 = {
   })(props)
 };
 var editorConfig = [
-  AxesChartDataConfigAreaColumnLine,
+  __spreadProps(__spreadValues({}, AxesChartDataConfigAreaColumnLine), {
+    layout: [...AcceleratedRenderEditorLayout, ...AxesChartDataConfigAreaColumnLine.layout]
+  }),
   AxesChartDataDisplayArea,
   {
     label: AxesChartColorAndStyleWithTrellis.label,
@@ -2331,6 +2415,14 @@ var editorConfig = [
           editor: "editor.checkbox"
         }
       ],
+      [
+        {
+          label: (0, i18n_exports._)("Line smoothing"),
+          option: "showLineSmoothing",
+          editor: "editor.toggle",
+          showEditor: ({ options, featureFlags }) => isAcceleratedRenderEnabled({ options, featureFlags }) && !hasSteppedInterpolationEnabled({ options })
+        }
+      ],
       [
         {
           label: (0, i18n_exports._)("Line width"),
@@ -2499,7 +2591,7 @@ var prop_types_default = "default" in defaultImport29 ? defaultImport29.default
 var INITIAL_HEIGHT = 250;
 var SplunkVisualization = class {
 };
-SplunkVisualization.propTypes = {
+__publicField(SplunkVisualization, "propTypes", {
   /**
    * display mode
    */
@@ -2575,11 +2667,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,
@@ -2594,7 +2686,7 @@ SplunkVisualization.defaults = {
   onComputedProps: () => ({}),
   loading: false,
   onRequestParamsChange: lodash_exports.noop
-};
+});
 var SplunkVisualization_default = SplunkVisualization;
 
 // src/common/hooks/useSorting.ts
@@ -2645,9 +2737,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";
@@ -2746,7 +2838,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%;
@@ -2827,7 +2919,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
@@ -3107,7 +3199,7 @@ var dataSourcesSplitByAggregationsUnknown = (dataSource) => {
   const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
   let splitDataSources = null;
   let errorCode = null;
-  if (fields && fields.length) {
+  if (fields == null ? void 0 : fields.length) {
     splitDataSources = {};
     for (let i = 0; i < fields.length; i += 1) {
       const fieldName = fields[i].name;
@@ -3158,7 +3250,7 @@ var dataSourcesSplitByAggregationsTimechartAndChart = (dataSource) => {
         }
       });
     });
-  } else if ((!splitByFields || !splitByFields.length) && fields.length > 1) {
+  } else if (!(splitByFields == null ? void 0 : splitByFields.length) && fields.length > 1) {
     splitDataSources = {};
     for (let i = 1; i < fields.length; i += 1) {
       const fieldName = fields[i].name;
@@ -3214,7 +3306,7 @@ var dataSourcesSplitByModeTimechart = (dataSource, splitBy) => {
   if (fields.length > 0) {
     splitByFields = (0, trellisUtils_exports.extractSplitByFieldsChartFields)(fields);
   }
-  if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
+  if (splitByFields == null ? void 0 : splitByFields.includes(splitBy)) {
     splitDataSources = {};
     const dataSourceKeys = (0, trellisUtils_exports.extractDataSourceAggregationKeysChart)(fields);
     const valueKeys = [];
@@ -3245,6 +3337,68 @@ var dataSourcesSplitByModeTimechart = (dataSource, splitBy) => {
   }
   return { splitDataSources, errorCode };
 };
+var splitRowWise = (dataSource, columns, fields, otherSplitBy, dataSourceKeys, nonDataSourceAggregations) => {
+  const splitDataSources = {};
+  const valueKeys = (0, lodash_exports.cloneDeep)(columns[0]);
+  valueKeys.forEach((val, idx) => {
+    splitDataSources[val] = (0, lodash_exports.cloneDeep)((0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"]));
+    splitDataSources[val].primary.data.fields = [];
+    if (otherSplitBy.length) {
+      splitDataSources[val].primary.data.fields = [{ name: otherSplitBy[0] }];
+    }
+    if (dataSourceKeys.length) {
+      const columnValues = [[]];
+      splitDataSources[val].primary.data.fields = [
+        ...splitDataSources[val].primary.data.fields,
+        ...dataSourceKeys.map((k) => ({ name: k }))
+      ];
+      dataSourceKeys.forEach(() => {
+        columnValues.push([]);
+      });
+      for (let i = 1; i <= Math.ceil((fields.length - 1) / dataSourceKeys.length); i += 1) {
+        columnValues[0].push(fields[i].splitby_value ? fields[i].splitby_value : fields[i].name);
+        dataSourceKeys.forEach((dskey, dsIndx) => {
+          const mul = (fields.length - 1) / dataSourceKeys.length;
+          columnValues[dsIndx + 1].push(columns[i + dsIndx * mul][idx]);
+        });
+      }
+      splitDataSources[val].primary.data.columns = columnValues;
+    } else if (nonDataSourceAggregations.length) {
+      const columnValues = [];
+      fields.forEach((aggregationField, fieldIdx) => {
+        if (fieldIdx > 0) {
+          splitDataSources[val].primary.data.fields.push(aggregationField);
+          columnValues.push([columns[fieldIdx][idx]]);
+        }
+      });
+      splitDataSources[val].primary.data.columns = columnValues;
+    }
+  });
+  return splitDataSources;
+};
+var splitColumnWise = (dataSource, columns, fields, otherSplitBy, dataSourceKeys) => {
+  const splitDataSources = {};
+  const valueKeys = [];
+  for (let i = 1; i < fields.length; i += 1) {
+    valueKeys.push(fields[i].splitby_value ? fields[i].splitby_value : fields[i].name);
+  }
+  valueKeys.forEach((val) => {
+    splitDataSources[val] = (0, lodash_exports.cloneDeep)((0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"]));
+    splitDataSources[val].primary.data.fields = [
+      { name: otherSplitBy[0] },
+      ...dataSourceKeys.map((k) => ({ name: k }))
+    ];
+    splitDataSources[val].primary.data.columns = [[...columns[0]]];
+    dataSourceKeys.forEach((dsKey) => {
+      fields.forEach((field, idx) => {
+        if (field.data_source === dsKey && (field.splitby_value === val || field.name === val)) {
+          splitDataSources[val].primary.data.columns.push([...columns[idx]]);
+        }
+      });
+    });
+  });
+  return splitDataSources;
+};
 var dataSourcesSplitByModeChart = (dataSource, splitBy) => {
   var _a, _b, _c, _d;
   const fields = toFieldEntries((_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields);
@@ -3255,8 +3409,7 @@ var dataSourcesSplitByModeChart = (dataSource, splitBy) => {
   if (fields.length > 0) {
     splitByFields = (0, trellisUtils_exports.extractSplitByFieldsChartFields)(fields);
   }
-  if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
-    splitDataSources = {};
+  if (splitByFields == null ? void 0 : splitByFields.includes(splitBy)) {
     const splitByFieldIdx = splitByFields.findIndex((f) => f === splitBy);
     const otherSplitBy = splitByFields.filter((f) => f !== splitBy);
     const dataSourceKeys = (0, trellisUtils_exports.extractDataSourceAggregationKeysChart)(fields);
@@ -3267,71 +3420,16 @@ var dataSourcesSplitByModeChart = (dataSource, splitBy) => {
       }
     }
     if (splitByFieldIdx === 0) {
-      const valueKeys = (0, lodash_exports.cloneDeep)(columns[0]);
-      valueKeys.forEach((val, idx) => {
-        splitDataSources[val] = (0, lodash_exports.cloneDeep)(
-          (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
-        );
-        splitDataSources[val].primary.data.fields = [];
-        if (otherSplitBy.length) {
-          splitDataSources[val].primary.data.fields = [{ name: otherSplitBy[0] }];
-        }
-        if (dataSourceKeys.length) {
-          const columnValues = [[]];
-          splitDataSources[val].primary.data.fields = [
-            ...splitDataSources[val].primary.data.fields,
-            ...dataSourceKeys.map((k) => ({
-              name: k
-            }))
-          ];
-          dataSourceKeys.forEach(() => {
-            columnValues.push([]);
-          });
-          for (let i = 1; i <= Math.ceil((fields.length - 1) / dataSourceKeys.length); i += 1) {
-            columnValues[0].push(
-              fields[i].splitby_value ? fields[i].splitby_value : fields[i].name
-            );
-            dataSourceKeys.forEach((dskey, dsIndx) => {
-              const mul = (fields.length - 1) / dataSourceKeys.length;
-              columnValues[dsIndx + 1].push(columns[i + dsIndx * mul][idx]);
-            });
-          }
-          splitDataSources[val].primary.data.columns = columnValues;
-        } else if (nonDataSourceAggregations.length) {
-          const columnValues = [];
-          fields.forEach((aggregationField, fieldIdx) => {
-            if (fieldIdx > 0) {
-              splitDataSources[val].primary.data.fields.push(aggregationField);
-              columnValues.push([columns[fieldIdx][idx]]);
-            }
-          });
-          splitDataSources[val].primary.data.columns = columnValues;
-        }
-      });
+      splitDataSources = splitRowWise(
+        dataSource,
+        columns,
+        fields,
+        otherSplitBy,
+        dataSourceKeys,
+        nonDataSourceAggregations
+      );
     } else {
-      const valueKeys = [];
-      for (let i = 1; i < fields.length; i += 1) {
-        valueKeys.push(fields[i].splitby_value ? fields[i].splitby_value : fields[i].name);
-      }
-      valueKeys.forEach((val) => {
-        splitDataSources[val] = (0, lodash_exports.cloneDeep)(
-          (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
-        );
-        splitDataSources[val].primary.data.fields = [
-          { name: otherSplitBy[0] },
-          ...dataSourceKeys.map((k) => ({
-            name: k
-          }))
-        ];
-        splitDataSources[val].primary.data.columns = [[...columns[0]]];
-        dataSourceKeys.forEach((dsKey) => {
-          fields.forEach((field, idx) => {
-            if (field.data_source === dsKey && (field.splitby_value === val || field.name === val)) {
-              splitDataSources[val].primary.data.columns.push([...columns[idx]]);
-            }
-          });
-        });
-      });
+      splitDataSources = splitColumnWise(dataSource, columns, fields, otherSplitBy, dataSourceKeys);
     }
   } else {
     errorCode = "INVALID_SPLIT_BY_FIELD";
@@ -3349,7 +3447,7 @@ var dataSourcesSplitByModeStatsorUnknown = (dataSource, splitBy, splitMode) => {
     splitByFields = splitMode !== trellisUtils_exports.UNKNOWN ? (0, trellisUtils_exports.extractSplitByFieldsForStats)(fields) : (0, trellisUtils_exports.extractSplitByFieldsForUnknown)(fields);
   }
   const splitByIndex = fields.findIndex((field) => field.name === splitBy);
-  if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
+  if (splitByFields == null ? void 0 : splitByFields.includes(splitBy)) {
     const splitByColumn = (_f = (_e = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _e.data) == null ? void 0 : _f.columns[splitByIndex];
     splitDataSources = {};
     splitByColumn.forEach((val, idx) => {
@@ -3471,11 +3569,78 @@ var defaultImport35 = __toESM(require("@splunk/react-icons/Triangle"));
 __reExport(Triangle_exports, require("@splunk/react-icons/Triangle"));
 var Triangle_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
+// esm-externals:@splunk/visualizations-shared/propUtils
+var propUtils_exports = {};
+__export(propUtils_exports, {
+  default: () => propUtils_default
+});
+var defaultImport36 = __toESM(require("@splunk/visualizations-shared/propUtils"));
+__reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
+var propUtils_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+
+// esm-externals:@splunk/visualizations-shared/simpleXMLOptions
+var simpleXMLOptions_exports = {};
+__export(simpleXMLOptions_exports, {
+  default: () => simpleXMLOptions_default
+});
+var defaultImport37 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
+__reExport(simpleXMLOptions_exports, require("@splunk/visualizations-shared/simpleXMLOptions"));
+var simpleXMLOptions_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+
 // src/common/chartingUtils.ts
+var SHARED_AXIS_CHART_CANVAS_SPECIFIC_PROPS = [
+  "yAxisMin",
+  "yAxisMax",
+  "y2AxisMin",
+  "y2AxisMax",
+  "showXMajorGridLines",
+  "showYMajorGridLines",
+  "showY2MajorGridLines",
+  "showYMinorGridLines",
+  "showY2MinorGridLines",
+  "xAxisMajorTickVisibility",
+  "xAxisMajorTickSize",
+  "yAxisMajorTickVisibility",
+  "y2AxisMajorTickVisibility",
+  "yAxisMajorTickSize",
+  "y2AxisMajorTickSize",
+  "yAxisMinorTickVisibility",
+  "y2AxisMinorTickVisibility",
+  "yAxisMinorTickSize",
+  "y2AxisMinorTickSize",
+  "legendMode",
+  "legendTruncation"
+];
+var transformAxisChartOptions = ({
+  originalOptions,
+  optionsSchema: optionsSchema2,
+  chart,
+  convertToSCProps,
+  preservedProps
+}) => {
+  const returnOptions = (0, propUtils_exports.adjustOptionsToSchema)(originalOptions, optionsSchema2);
+  const convertedOptions = convertToSCProps(returnOptions);
+  const transformed = __spreadProps(__spreadValues({}, (0, simpleXMLOptions_exports.getSimpleXMLOptionsForProps)(convertedOptions)), {
+    chart
+  });
+  const preserved = preservedProps.reduce(
+    (acc, prop) => {
+      if (returnOptions[prop] !== void 0) {
+        acc[prop] = returnOptions[prop];
+      }
+      return acc;
+    },
+    {}
+  );
+  if (convertedOptions.legendLabels !== void 0) {
+    preserved.legendLabels = convertedOptions.legendLabels;
+  }
+  return __spreadValues(__spreadValues({}, transformed), preserved);
+};
 var DEFAULT_LINE_WIDTH = 2;
-var getAnnotations = ({ annotationX, annotationColor, annotationLabel }) => annotationX && annotationX.length ? annotationX.map((timestamp, i) => ({
-  color: annotationColor && annotationColor[i],
-  label: annotationLabel && annotationLabel[i],
+var getAnnotations = ({ annotationX, annotationColor, annotationLabel }) => (annotationX == null ? void 0 : annotationX.length) ? annotationX.map((timestamp, i) => ({
+  color: annotationColor == null ? void 0 : annotationColor[i],
+  label: annotationLabel == null ? void 0 : annotationLabel[i],
   time: timestamp
 })) : [];
 var getAnnotationsForCanvas = ({
@@ -3548,6 +3713,65 @@ function constructAdditionalTooltipFieldsMap({ fields, columns, additionalToolti
   });
   return map;
 }
+function extractAdditionalTooltipValues(columns, fields, additionalTooltipFields) {
+  var _a;
+  if (!(additionalTooltipFields == null ? void 0 : additionalTooltipFields.length) || !(columns == null ? void 0 : columns.length) || !(fields == null ? void 0 : fields.length)) {
+    return [];
+  }
+  const fieldIndexMap = fields.reduce((acc, field, index) => {
+    acc[field.name] = index;
+    return acc;
+  }, {});
+  const numRows = ((_a = columns[0]) == null ? void 0 : _a.length) || 0;
+  const additionalTooltipValuesArray = [];
+  for (let i = 0; i < numRows; i += 1) {
+    const tooltipObject = {};
+    additionalTooltipFields.forEach((fieldName) => {
+      var _a2, _b;
+      if (fieldName in fieldIndexMap) {
+        const columnIndex = fieldIndexMap[fieldName];
+        tooltipObject[fieldName] = (_b = (_a2 = columns[columnIndex]) == null ? void 0 : _a2[i]) != null ? _b : null;
+      } else {
+        tooltipObject[fieldName] = null;
+      }
+    });
+    additionalTooltipValuesArray.push(tooltipObject);
+  }
+  return additionalTooltipValuesArray;
+}
+var areStringArraysEqual = (a, b) => {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+};
+var createAdditionalTooltipValuesMemoizer = () => {
+  let cache = {
+    columns: null,
+    fields: null,
+    additionalTooltipFields: void 0,
+    result: void 0
+  };
+  return (columns, fields, additionalTooltipFields) => {
+    if (cache.columns === columns && cache.fields === fields && areStringArraysEqual(cache.additionalTooltipFields, additionalTooltipFields)) {
+      return cache.result;
+    }
+    let result;
+    if ((additionalTooltipFields == null ? void 0 : additionalTooltipFields.length) && columns && fields) {
+      result = extractAdditionalTooltipValues(columns, fields, additionalTooltipFields);
+    }
+    cache = {
+      columns,
+      fields,
+      additionalTooltipFields,
+      result
+    };
+    return result;
+  };
+};
 var shouldEnableSearchZoom = (eventHandlers = [], xField = "") => {
   const rangeSelectEventHandler = eventHandlers.find(
     (eventHandler) => {
@@ -3558,9 +3782,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;
@@ -3715,46 +3939,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;
-    }
+  } else {
+    spanGaps = void 0;
   }
-  yfields.forEach((field) => {
+  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;
@@ -3920,6 +4164,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, {
@@ -4009,6 +4285,8 @@ var TimeSeriesChartWrapper = (props) => {
     "chart.overlayFields": overlayFieldsStr,
     "chart.nullValueMode": nullValueMode,
     "chart.showDataLabels": showDataLabels,
+    "chart.showLines": showLines,
+    "chart.stackMode": stackMode,
     lineWidth,
     lineDashStyle,
     fieldDashStyles: lineDashStylesByFieldStr,
@@ -4037,7 +4315,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;
@@ -4054,13 +4335,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
   );
@@ -4069,6 +4348,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;
@@ -4099,26 +4379,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 config2 = getYScaleConfig(
+        yAxisTitle,
+        yAxisAbbreviation,
+        yAxisScale,
+        yAxisLabelVisibility,
+        yAxisMin,
+        yAxisMax
+      );
+      if (isStacked100) {
+        config2.y.tickFmt = (v) => `${Math.round(v * 100)}%`;
+        config2.y.range = () => [0, 1];
+      }
+      return config2;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax, isStacked100]
   );
   const y2ScaleConfig = (0, react_exports.useMemo)(() => {
     if (y2Enabled) {
@@ -4150,10 +4444,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,
@@ -4162,8 +4457,11 @@ var TimeSeriesChartWrapper = (props) => {
       lineDashStyle,
       lineDashStylesByField,
       stepPosition,
-      stepPositionsByField
-    ),
+      stepPositionsByField,
+      type: chartType,
+      stackMode: normalizedStackMode,
+      showLines
+    }),
     [
       yFields,
       y2Fields,
@@ -4175,7 +4473,10 @@ var TimeSeriesChartWrapper = (props) => {
       lineDashStyle,
       lineDashStylesByField,
       stepPosition,
-      stepPositionsByField
+      stepPositionsByField,
+      chartType,
+      normalizedStackMode,
+      showLines
     ]
   );
   const chartingEventAnnotations = (0, react_exports.useMemo)(
@@ -4243,50 +4544,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 = appendTrellisToPayload2(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 = appendTrellisToPayload2(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)(() => {
@@ -4341,7 +4646,8 @@ var TimeSeriesChartWrapper = (props) => {
         showXAxisLine,
         showYAxisLine,
         showY2AxisLine,
-        xAxisMaxLabelParts
+        xAxisMaxLabelParts,
+        areaOpacity: areaOpacityForCanvas
       }
     ));
   }, [
@@ -4393,7 +4699,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);
@@ -4421,6 +4728,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,
@@ -4478,9 +4816,7 @@ var withDashboardViz = (opts) => {
     const isDownsamplingEnabledByFeatureFlag = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableDownsampling
     );
-    const isTrellisFeatureFlagOn5 = Boolean(
-      featureFlagContext && featureFlagContext.visualizations_enableTrellis
-    );
+    const isTrellisFeatureFlagOn5 = Boolean(featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableTrellis);
     const isTrellisOn = isTrellisFeatureFlagOn5 && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (options == null ? void 0 : options.splitByLayout) === "trellis" /* TRELLIS */;
     const isAcceleratedRenderFeatureFlagOn2 = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableAcceleratedRender
@@ -4645,38 +4981,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) {
@@ -4705,29 +5015,25 @@ var withDashboardViz = (opts) => {
 };
 var withDashboardViz_default = withDashboardViz;
 
-// esm-externals:@splunk/visualizations-shared/propUtils
-var propUtils_exports = {};
-__export(propUtils_exports, {
-  default: () => propUtils_default
-});
-var defaultImport36 = __toESM(require("@splunk/visualizations-shared/propUtils"));
-__reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
-var propUtils_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
-
-// esm-externals:@splunk/visualizations-shared/simpleXMLOptions
-var simpleXMLOptions_exports = {};
-__export(simpleXMLOptions_exports, {
-  default: () => simpleXMLOptions_default
-});
-var defaultImport37 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
-__reExport(simpleXMLOptions_exports, require("@splunk/visualizations-shared/simpleXMLOptions"));
-var simpleXMLOptions_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
-
 // src/Area/areaUtils.ts
-var transformOptions = (originalOptions) => {
-  const returnOptions = (0, propUtils_exports.adjustOptionsToSchema)(originalOptions, config_default.optionsSchema);
-  return __spreadProps(__spreadValues({}, (0, simpleXMLOptions_exports.getSimpleXMLOptionsForProps)(convertToAreaSCProperties(returnOptions))), {
-    chart: "area"
+var transformOptions = (originalOptions, isAcceleratedRenderOn) => {
+  if (!isAcceleratedRenderOn) {
+    const returnOptions = (0, propUtils_exports.adjustOptionsToSchema)(originalOptions, config_default.optionsSchema);
+    return __spreadProps(__spreadValues({}, (0, simpleXMLOptions_exports.getSimpleXMLOptionsForProps)(convertToAreaSCProperties(returnOptions))), {
+      chart: "area"
+    });
+  }
+  const preservedProps = [
+    ...SHARED_AXIS_CHART_CANVAS_SPECIFIC_PROPS
+    // Note: yAxisMajorTickInterval, y2AxisMajorTickInterval, showYAxisWithZero, and showY2AxisWithZero
+    // are NOT canvas-specific. They're mapped to SimpleXML props in lineOptionsSCMapping
+  ];
+  return transformAxisChartOptions({
+    originalOptions,
+    optionsSchema: config_default.optionsSchema,
+    chart: "area",
+    convertToSCProps: convertToAreaSCProperties,
+    preservedProps
   });
 };
 var convertToAreaSCProperties = (originalOptions) => {
@@ -4757,6 +5063,8 @@ var convertToAreaSCProperties = (originalOptions) => {
     seriesColorsByField: "fieldColors",
     nullValueDisplay: "nullValueMode",
     lineDashStylesByField: "fieldDashStyles",
+    stepPositionsByField: "fieldStepPositions",
+    stepPosition: "stepPosition",
     xAxisLineVisibility: "xAxisVisibility",
     yAxisLineVisibility: "yAxisVisibility",
     y2AxisLineVisibility: "y2AxisVisibility",
@@ -4794,7 +5102,13 @@ var convertToAreaSCProperties = (originalOptions) => {
       ellipsisOff: "ellipsisNone"
     }
   };
-  const stingValues = ["seriesColors", "fieldColors", "legendLabels", "fieldDashStyles"];
+  const stingValues = [
+    "seriesColors",
+    "fieldColors",
+    "legendLabels",
+    "fieldDashStyles",
+    "fieldStepPositions"
+  ];
   return (0, propUtils_exports.convertToSCProperties)(
     originalOptions,
     areaOptionsSCMapping,
@@ -4822,6 +5136,53 @@ __reExport(themes_exports, require("@splunk/themes"));
 var themes_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
 
 // src/common/hocs/withTrellis.tsx
+var evaluatePanelOption = (panelDataSources, allOptions, optionKey, vizContext) => {
+  try {
+    const evaluated = Options_exports.Options.evaluate({ context: vizContext, options: allOptions }, panelDataSources);
+    const num = Number(evaluated == null ? void 0 : evaluated[optionKey]);
+    return Number.isNaN(num) ? Number.NaN : num;
+  } catch (e) {
+    return Number.NaN;
+  }
+};
+var sortTrellisKeys = (keys, trellisSortBy, trellisSortOrder, modifiedDataSourceBySplitBy, mergedOptions, vizContext) => {
+  if (trellisSortBy === "name") {
+    keys.sort((a, b) => {
+      const cmp = a.localeCompare(b, void 0, { numeric: true, sensitivity: "base" });
+      return trellisSortOrder === "descending" ? -cmp : cmp;
+    });
+  } else if (trellisSortBy === "value" || trellisSortBy === "trend") {
+    let optionKey;
+    if (trellisSortBy === "trend") {
+      optionKey = "trendValue";
+    } else {
+      optionKey = mergedOptions.value !== void 0 ? "value" : "majorValue";
+    }
+    keys.sort((a, b) => {
+      const valA = evaluatePanelOption(
+        modifiedDataSourceBySplitBy[a],
+        mergedOptions,
+        optionKey,
+        vizContext
+      );
+      const valB = evaluatePanelOption(
+        modifiedDataSourceBySplitBy[b],
+        mergedOptions,
+        optionKey,
+        vizContext
+      );
+      const nanA = Number.isNaN(valA);
+      const nanB = Number.isNaN(valB);
+      if (nanA && nanB) return 0;
+      if (nanA) return 1;
+      if (nanB) return -1;
+      const cmp = valA - valB;
+      return trellisSortOrder === "descending" ? -cmp : cmp;
+    });
+  } else if (trellisSortOrder === "descending") {
+    keys.reverse();
+  }
+};
 var TrellisContainer = styled_components_default.div`
     overflow: hidden;
     display: flex;
@@ -4866,6 +5227,14 @@ var showErrorMessage = (errorCode, width, height) => {
   }
   return /* @__PURE__ */ react_exports.createElement(Message_default, { width, height, message: (0, i18n_exports._)("Error render in trellis"), level: "info" });
 };
+var resolveTrellisSplitBy = (trellisSplitBy, fields) => {
+  var _a;
+  if (trellisSplitBy && trellisSplitBy.length > 0) {
+    return trellisSplitBy;
+  }
+  const splitByPossibleFields = (0, trellisUtils_exports.getAllPossibleSplitByFields)(fields);
+  return ((_a = splitByPossibleFields.fields) == null ? void 0 : _a.length) ? splitByPossibleFields.fields[0] : AGGREGATIONS;
+};
 var withTrellis = (Viz) => {
   const VizWithTrellis = (opts) => {
     const cachedHandleResize = react_exports.useCallback((w, h) => {
@@ -4874,7 +5243,7 @@ var withTrellis = (Viz) => {
     }, []);
     const [containerWidth, setContainerWidth] = react_exports.useState(Number(opts.width));
     const [containerHeight, setContainerHeight] = react_exports.useState(Number(opts.height));
-    const _a = opts, { options = {}, height, width } = _a, otherProps = __objRest(_a, ["options", "height", "width"]);
+    const _a = opts, { options = {}, context = {}, height, width } = _a, otherProps = __objRest(_a, ["options", "context", "height", "width"]);
     const defaultOptions = (0, JSONSchemaUtils_exports.pickFieldFromJSONSchema)(Viz.config.optionsSchema, "default");
     const mergedOptions = (0, hocUtils_exports.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions);
     const {
@@ -4884,6 +5253,8 @@ var withTrellis = (Viz) => {
       trellisRowHeight,
       splitByLayout,
       trellisSplitBy,
+      trellisSortBy,
+      trellisSortOrder,
       trellisSharedScale,
       stackMode,
       yAxisMin,
@@ -4952,7 +5323,7 @@ var withTrellis = (Viz) => {
     }, [pageCount, trellisSplitBy]);
     (0, react_exports.useEffect)(() => {
       updateDataDisplay(pageNum);
-    }, [columns, fields, trellisSplitBy, pageNum, splitByLayout]);
+    }, [columns, fields, trellisSplitBy, trellisSortBy, trellisSortOrder, pageNum, splitByLayout]);
     const handlePageChange = (0, react_exports.useCallback)(
       (event, { page }) => {
         setPageNum(page);
@@ -4960,9 +5331,7 @@ var withTrellis = (Viz) => {
       [pageNum, pagedData]
     );
     const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-    const isTrellisFeatureFlagOn5 = Boolean(
-      featureFlagContext && featureFlagContext.visualizations_enableTrellis
-    );
+    const isTrellisFeatureFlagOn5 = Boolean(featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableTrellis);
     if (!isTrellisFeatureFlagOn5 || !splitByLayout || splitByLayout !== visualization_schemas_exports.LAYOUT_TYPE.Trellis) {
       return /* @__PURE__ */ react_exports.createElement(Viz, __spreadValues({}, opts));
     }
@@ -4970,14 +5339,9 @@ var withTrellis = (Viz) => {
       if (noColumns || noFields) {
         return /* @__PURE__ */ react_exports.createElement(Message_default, { width, height, message: (0, i18n_exports._)("Loading"), level: "info" });
       }
-      let currTrellisSplitBy = trellisSplitBy;
-      if (!trellisSplitBy || trellisSplitBy.length === 0) {
-        const splitByPossibleFields = (0, trellisUtils_exports.getAllPossibleSplitByFields)(fields);
-        currTrellisSplitBy = splitByPossibleFields.fields && splitByPossibleFields.fields.length ? splitByPossibleFields.fields[0] : AGGREGATIONS;
-      }
-      const splitMode = (0, trellisUtils_exports.getTrellisDataSplitterMode)(fields);
+      const currTrellisSplitBy = resolveTrellisSplitBy(trellisSplitBy, fields);
       const dataSplitResult = getTrellisDataSourcesBySplitMode(
-        splitMode,
+        (0, trellisUtils_exports.getTrellisDataSplitterMode)(fields),
         dataSources,
         currTrellisSplitBy
       );
@@ -4986,12 +5350,19 @@ var withTrellis = (Viz) => {
       if (!modifiedDataSourceBySplitBy || Object.keys(modifiedDataSourceBySplitBy).length === 0 || dataSplitErrorCode) {
         return showErrorMessage(dataSplitErrorCode, width, height);
       }
-      const splitByKeysModified = modifiedDataSourceBySplitBy ? Object.keys(modifiedDataSourceBySplitBy) : [];
-      if (splitByKeysModified) {
-        showPaginator = splitByKeysModified.length > pageCount;
-        splitByKeys = splitByKeysModified;
-        totalPages = splitByKeysModified ? Math.ceil(splitByKeysModified.length / pageCount) : 0;
-      }
+      const splitByKeysModified = Object.keys(modifiedDataSourceBySplitBy);
+      const vizContext = (0, lodash_exports.defaultsDeep)({}, context, Viz.config.defaultContext);
+      sortTrellisKeys(
+        splitByKeysModified,
+        trellisSortBy,
+        trellisSortOrder,
+        modifiedDataSourceBySplitBy,
+        mergedOptions,
+        vizContext
+      );
+      showPaginator = splitByKeysModified.length > pageCount;
+      splitByKeys = splitByKeysModified;
+      totalPages = Math.ceil(splitByKeysModified.length / pageCount);
       const [calculatedMin, calculatedMax] = determineMinMax(
         modifiedDataSourceBySplitBy,
         trellisSharedScale,
@@ -5025,6 +5396,7 @@ var withTrellis = (Viz) => {
           /* @__PURE__ */ react_exports.createElement(
             Viz,
             __spreadProps(__spreadValues({}, otherProps), {
+              context,
               trellisKey: splitByKey,
               trellisSplitBy: currTrellisSplitBy,
               dataSources: modifiedDataSourceBySplitBy[splitByKey],
@@ -5057,6 +5429,7 @@ var withTrellis = (Viz) => {
 var withTrellis_default = withTrellis;
 
 // src/Area/Area.tsx
+var getMemoizedAdditionalTooltipValues = createAdditionalTooltipValuesMemoizer();
 var computeVizProps = (_a) => {
   var _b = _a, {
     dataSources,
@@ -5072,7 +5445,8 @@ var computeVizProps = (_a) => {
     visualizationApiRef,
     trellisKey,
     trellisSplitBy,
-    themeFunc
+    themeFunc,
+    isAcceleratedRenderOn
   } = _b, otherOptions = __objRest(_b, [
     "dataSources",
     "onEventTrigger",
@@ -5087,18 +5461,23 @@ var computeVizProps = (_a) => {
     "visualizationApiRef",
     "trellisKey",
     "trellisSplitBy",
-    "themeFunc"
+    "themeFunc",
+    "isAcceleratedRenderOn"
   ]);
+  var _a2;
   const defaultFontColor = themeFunc("defaultFontColor");
   const computedProps = {
     visualizationApiRef,
     trellisKey,
     trellisSplitBy,
     defaultFontColor,
-    onEventTrigger
+    onEventTrigger,
+    // we want to turn marker Display off for area charts since it is not a supported option.
+    // but it is supported for Line
+    markerDisplay: "off"
   };
   const { y2, y2Fields, hasEventHandlers, eventHandlers } = otherOptions;
-  computedProps.options = transformOptions(otherOptions);
+  computedProps.options = transformOptions(otherOptions, isAcceleratedRenderOn);
   const chartingAnnotations = getAnnotations({
     annotationX,
     annotationColor,
@@ -5127,6 +5506,16 @@ var computeVizProps = (_a) => {
     computedProps.onPointMouseOver = onEventTrigger;
     computedProps.onPointMouseOut = onEventTrigger;
   }
+  computedProps.eventHandlers = eventHandlers;
+  computedProps.xField = xField;
+  if (((_a2 = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _a2.data) && (additionalTooltipFields == null ? void 0 : additionalTooltipFields.length)) {
+    const { columns: originalColumns, fields: originalFields } = dataSources.primary.data;
+    computedProps.additionalTooltipValues = getMemoizedAdditionalTooltipValues(
+      originalColumns,
+      originalFields,
+      additionalTooltipFields
+    );
+  }
   return computedProps;
 };
 var Area = withTrellis_default(