@splunk/visualizations 28.4.0 → 28.5.0

package/Scatter.js

@@ -1129,7 +1129,7 @@ var TrellisBackgroundColorEditor = {
   showEditor: isTrellisEnabled
 };
 
-// src/common/editorConfig/AxesChartDataDisplay.ts
+// src/common/editorConfig/AxesChartDataConfig.ts
 var isTrellisFeatureFlagOn2 = ({ featureFlags }) => {
   return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableTrellis);
 };
@@ -1137,146 +1137,8 @@ var isTrellisEnabled2 = ({ options, featureFlags }) => {
   const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
   return isTrellisFeatureFlagOn2({ featureFlags }) && splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
 };
-var AxesChartDataDisplayBase = {
-  label: (0, i18n_exports._)("Data display"),
-  layout: [
-    [
-      {
-        label: (0, i18n_exports._)("Stack mode"),
-        option: "stackMode",
-        editor: "editor.select",
-        editorProps: {
-          values: [
-            { label: (0, i18n_exports._)("Not stacked"), value: "auto" },
-            { label: (0, i18n_exports._)("Stacked"), value: "stacked" },
-            { label: (0, i18n_exports._)("Stacked 100%"), value: "stacked100" }
-          ]
-        }
-      }
-    ],
-    [
-      {
-        label: (0, i18n_exports._)("Null value display"),
-        option: "nullValueDisplay",
-        editor: "editor.radioBar",
-        editorProps: {
-          values: [
-            { label: (0, i18n_exports._)("Gaps"), value: "gaps" },
-            { label: (0, i18n_exports._)("Zero"), value: "zero" },
-            { label: (0, i18n_exports._)("Connect"), value: "connect" }
-          ]
-        }
-      }
-    ],
-    [
-      {
-        label: (0, i18n_exports._)("Data value display"),
-        option: "dataValuesDisplay",
-        editor: "editor.radioBar",
-        editorProps: {
-          values: [
-            { label: (0, i18n_exports._)("Off"), value: "off" },
-            { label: (0, i18n_exports._)("All"), value: "all" },
-            { label: (0, i18n_exports._)("Min/Max"), value: "minmax" }
-          ]
-        }
-      }
-    ],
-    [
-      {
-        label: (0, i18n_exports._)("Overlay fields"),
-        option: "overlayFields",
-        editor: "editor.columnMultiSelectionByFieldNameEditor",
-        editorProps: {
-          filterByTypes: ["number"]
-        },
-        isDisabled: isTrellisEnabled2
-      }
-    ],
-    [
-      {
-        label: (0, i18n_exports._)("Split series"),
-        option: "showSplitSeries",
-        editor: "editor.toggle"
-      }
-    ],
-    [
-      {
-        label: (0, i18n_exports._)("Independent y-axis for split series"),
-        option: "showIndependentYRanges",
-        editor: "editor.checkbox",
-        showEditor: ({ options }) => options.showSplitSeries
-      }
-    ],
-    ...TimechartTrellisEditorConfig
-  ]
-};
-var AxesChartDataDisplayBar = {
-  label: AxesChartDataDisplayBase.label,
-  layout: [
-    AxesChartDataDisplayBase.layout[0],
-    // remove null value display editor at index 1
-    ...AxesChartDataDisplayBase.layout.slice(2)
-  ]
-};
-var AxesChartDataDisplayScatter = {
-  label: AxesChartDataDisplayBase.label,
-  layout: [
-    ...TrellisEditorConfig,
-    [
-      {
-        label: (0, i18n_exports._)("Shared y-axis scale"),
-        option: "trellisSharedScale",
-        editor: "editor.checkbox",
-        showEditor: isTrellisEnabled2
-      }
-    ]
-  ]
-};
-var AxesChartDataDisplayColumn = {
-  label: AxesChartDataDisplayBase.label,
-  layout: [
-    AxesChartDataDisplayBase.layout[0],
-    // remove null value display and add data value display
-    AxesChartDataDisplayBase.layout[2],
-    [
-      {
-        label: (0, i18n_exports._)("Show tooltip on hover"),
-        option: "showTooltip",
-        editor: "editor.checkbox"
-      }
-    ],
-    ...AxesChartDataDisplayBase.layout.slice(3),
-    [
-      {
-        label: (0, i18n_exports._)("Column grouping mode"),
-        option: "columnGrouping",
-        editor: "editor.radioBar",
-        editorProps: {
-          values: [
-            { label: (0, i18n_exports._)("Auto"), value: "auto" },
-            { label: (0, i18n_exports._)("Overlay"), value: "overlay" }
-          ]
-        }
-      }
-    ]
-  ]
-};
-var AxesChartDataDisplayLine = {
-  label: AxesChartDataDisplayBase.label,
-  layout: [
-    // remove stacked mode editor
-    ...AxesChartDataDisplayBase.layout.slice(1)
-  ]
-};
-
-// src/common/editorConfig/AxesChartDataConfig.ts
-var isTrellisFeatureFlagOn3 = ({ featureFlags }) => {
-  return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableTrellis);
-};
-var isTrellisEnabled3 = ({ options, featureFlags }) => {
-  const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
-  return isTrellisFeatureFlagOn3({ featureFlags }) && splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+var isAcceleratedRenderFeatureFlagOn = ({ featureFlags }) => {
+  return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableAcceleratedRender);
 };
 var AxesChartDataConfig = {
   label: (0, i18n_exports._)("Data configurations"),
@@ -1339,7 +1201,7 @@ var AxesChartDataConfigBar = {
         supportsDSL: true,
         expectedDataPrimitive: ["series", "frame"]
       },
-      isDisabled: isTrellisEnabled3
+      isDisabled: isTrellisEnabled2
     }
   ])
 };
@@ -1411,9 +1273,6 @@ var AxesChartDataConfigBubble = {
     }
   ])
 };
-var isAcceleratedRenderFeatureFlagOn = ({ featureFlags }) => {
-  return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableAcceleratedRender);
-};
 var AcceleratedRenderEditorLayout = [
   [
     {
@@ -1423,7 +1282,7 @@ var AcceleratedRenderEditorLayout = [
       showEditor: isAcceleratedRenderFeatureFlagOn,
       editorProps: {
         help: (0, i18n_exports._)(
-          "Render visualizations faster for large datasets. Some functionalities might not be available in this mode."
+          "Render visualizations faster for large datasets. Split series is not available in this mode."
         ),
         helpFormat: "under"
         // helpTextLink: {
@@ -1468,6 +1327,168 @@ var AxesChartDataConfigLine = __spreadProps(__spreadValues({}, AxesChartDataConf
   layout: [...AcceleratedRenderEditorLayout, ...AxesChartDataConfigAreaColumnLine.layout]
 });
 
+// src/common/editorConfig/AxesChartDataDisplay.ts
+var isTrellisFeatureFlagOn3 = ({ featureFlags }) => {
+  return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableTrellis);
+};
+var isTrellisEnabled3 = ({ options, featureFlags }) => {
+  const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
+  return isTrellisFeatureFlagOn3({ featureFlags }) && splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+};
+var isAcceleratedRenderEnabled = ({ options, featureFlags }) => {
+  const { acceleratedRender } = options;
+  return isAcceleratedRenderFeatureFlagOn({ featureFlags }) && acceleratedRender;
+};
+var AxesChartDataDisplayBase = {
+  label: (0, i18n_exports._)("Data display"),
+  layout: [
+    [
+      {
+        label: (0, i18n_exports._)("Stack mode"),
+        option: "stackMode",
+        editor: "editor.select",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Not stacked"), value: "auto" },
+            { label: (0, i18n_exports._)("Stacked"), value: "stacked" },
+            { label: (0, i18n_exports._)("Stacked 100%"), value: "stacked100" }
+          ]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Null value display"),
+        option: "nullValueDisplay",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Gaps"), value: "gaps" },
+            { label: (0, i18n_exports._)("Zero"), value: "zero" },
+            { label: (0, i18n_exports._)("Connect"), value: "connect" }
+          ]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Data value display"),
+        option: "dataValuesDisplay",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Off"), value: "off" },
+            { label: (0, i18n_exports._)("All"), value: "all" },
+            { label: (0, i18n_exports._)("Min/Max"), value: "minmax" }
+          ]
+        }
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Overlay fields"),
+        option: "overlayFields",
+        editor: "editor.columnMultiSelectionByFieldNameEditor",
+        editorProps: {
+          filterByTypes: ["number"]
+        },
+        isDisabled: isTrellisEnabled3
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Split series"),
+        option: "showSplitSeries",
+        editor: "editor.toggle",
+        isDisabled: isAcceleratedRenderEnabled
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Independent y-axis for split series"),
+        option: "showIndependentYRanges",
+        editor: "editor.checkbox",
+        showEditor: ({ options, featureFlags }) => options.showSplitSeries && !isAcceleratedRenderEnabled({ options, featureFlags })
+      }
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Step position"),
+        option: "stepPosition",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Off"), value: "off" },
+            { label: (0, i18n_exports._)("Before"), value: "before" },
+            { label: (0, i18n_exports._)("After"), value: "after" }
+          ]
+        },
+        showEditor: ({ options, featureFlags }) => isAcceleratedRenderEnabled({ options, featureFlags })
+        // step position is only supported when accelerated render is enabled
+      }
+    ],
+    ...TimechartTrellisEditorConfig
+  ]
+};
+var AxesChartDataDisplayBar = {
+  label: AxesChartDataDisplayBase.label,
+  layout: [
+    AxesChartDataDisplayBase.layout[0],
+    // remove null value display editor at index 1
+    ...AxesChartDataDisplayBase.layout.slice(2)
+  ]
+};
+var AxesChartDataDisplayScatter = {
+  label: AxesChartDataDisplayBase.label,
+  layout: [
+    ...TrellisEditorConfig,
+    [
+      {
+        label: (0, i18n_exports._)("Shared y-axis scale"),
+        option: "trellisSharedScale",
+        editor: "editor.checkbox",
+        showEditor: isTrellisEnabled3
+      }
+    ]
+  ]
+};
+var AxesChartDataDisplayColumn = {
+  label: AxesChartDataDisplayBase.label,
+  layout: [
+    AxesChartDataDisplayBase.layout[0],
+    // remove null value display and add data value display
+    AxesChartDataDisplayBase.layout[2],
+    [
+      {
+        label: (0, i18n_exports._)("Show tooltip on hover"),
+        option: "showTooltip",
+        editor: "editor.checkbox"
+      }
+    ],
+    ...AxesChartDataDisplayBase.layout.slice(3),
+    [
+      {
+        label: (0, i18n_exports._)("Column grouping mode"),
+        option: "columnGrouping",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Auto"), value: "auto" },
+            { label: (0, i18n_exports._)("Overlay"), value: "overlay" }
+          ]
+        }
+      }
+    ]
+  ]
+};
+var AxesChartDataDisplayLine = {
+  label: AxesChartDataDisplayBase.label,
+  layout: [
+    // remove stacked mode editor
+    ...AxesChartDataDisplayBase.layout.slice(1)
+  ]
+};
+
 // src/common/editorConfig/AxesChartXGridAndLabels.ts
 var AxesChartXGridAndLabelsCommon = {
   label: (0, i18n_exports._)("X-axis grid and labels"),
@@ -1863,7 +1884,7 @@ var AxesChartLegendWithTrellisAndMode = ({
             { label: (0, i18n_exports._)("Bottom"), value: "bottom" },
             { label: (0, i18n_exports._)("Off"), value: "off" }
           ],
-          tooltip: showLegendTooltip && (0, i18n_exports._)('Legend mode must be "Standard" to configure legend display')
+          tooltip: showLegendTooltip ? (0, i18n_exports._)('Legend mode must be "Standard" to configure legend display') : void 0
         },
         isDisabled: showLegendTooltip ? ({ options }) => options.legendMode === "seriesCompare" : void 0,
         overrideDefaultValue: ({ options }) => (options == null ? void 0 : options.splitByLayout) === "trellis" ? "off" : "right"
@@ -2500,7 +2521,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.4.0 - 002bd482f"
+  "data-splunk-visualization-version": "28.5.0 - b192418b7"
 })`
     position: relative;
     width: 100%;
@@ -2581,7 +2602,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.4.0 - 002bd482f",
+        "data-splunk-visualization-version": "28.5.0 - b192418b7",
         width,
         height,
         backgroundColor
@@ -2981,16 +3002,14 @@ var dataSourcesSplitByModeTimechart = (dataSource, splitBy) => {
       splitDataSources[val] = (0, lodash_exports.cloneDeep)(
         (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
       );
-      splitDataSources[val].primary.data.fields = [
-        { name: fields[0].name },
-        ...dataSourceKeys.map((k) => ({
-          name: k
-        }))
-      ];
+      splitDataSources[val].primary.data.fields = [{ name: fields[0].name }];
       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.fields.push({
+              name: dsKey
+            });
             splitDataSources[val].primary.data.columns.push([...columns[idx]]);
           }
         });
@@ -3317,25 +3336,27 @@ var parseAxisValue = (val) => {
   const num = typeof val === "number" ? val : Number.parseFloat(val);
   return Number.isNaN(num) ? void 0 : num;
 };
-var SideLegendWidth = 75;
-var SeriesCompareLegendWidth = 200;
+var parseXAxisLineVisibility = (visibility) => {
+  if (visibility === "hide") return false;
+  if (visibility === "show") return true;
+  return void 0;
+};
 var getLegend = (props) => {
   const legendPlacement = props == null ? void 0 : props.legendDisplay;
-  const { isSeriesCompare } = props;
+  const { isSeriesCompare, legendTruncation } = props;
   const commonLegendProps = {
     center: true,
     fontSize: 12,
     largerTiles: true,
-    hideSeriesValue: !isSeriesCompare
+    hideSeriesValue: !isSeriesCompare,
     // Show values if in seriesCompare mode
+    legendTruncation
   };
   switch (legendPlacement) {
     case "off":
       return false;
     case "left":
-      return (0, visualization_canvas_exports.LeftLegendFactory)(__spreadValues({
-        width: isSeriesCompare ? SeriesCompareLegendWidth : SideLegendWidth
-      }, commonLegendProps));
+      return (0, visualization_canvas_exports.LeftLegendFactory)(__spreadValues({}, commonLegendProps));
     case "bottom":
       return (0, visualization_canvas_exports.BottomLegendFactory)(__spreadValues({
         wrap: true
@@ -3345,9 +3366,7 @@ var getLegend = (props) => {
         wrap: true
       }, commonLegendProps));
     default:
-      return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({
-        width: isSeriesCompare ? SeriesCompareLegendWidth : SideLegendWidth
-      }, commonLegendProps));
+      return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({}, commonLegendProps));
   }
 };
 var getComputedAxisTitles = (inputAxisTitle, fields, axisTitleVisibility) => {
@@ -3408,9 +3427,7 @@ var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale, yAxisLabelVisibilit
   if (yAxisAbbreviation !== "none") {
     yConfig.y.tickFmt = (v) => (0, visualization_canvas_exports.shortenNumber)(v, 1);
   }
-  if (yAxisAbbreviation === "none") {
-    yConfig.y.width = 55;
-  } else {
+  if (yAxisAbbreviation !== "none") {
     yConfig.y.width = label && label.length > 0 ? 30 : 10;
   }
   if (yAxisLabelVisibility === "hide") {
@@ -3433,6 +3450,7 @@ var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInt
   y2Config.y2.type = scaleType;
   if (axisAbbreviation !== "none") {
     y2Config.y2.tickFmt = (v) => (0, visualization_canvas_exports.shortenNumber)(v, 1, roundAxisLabelsToInteger);
+    y2Config.y2.width = label && label.length > 0 ? 50 : 10;
   } else if (roundAxisLabelsToInteger) {
     y2Config.y2.tickFmt = (v) => roundAxisLabelsToInteger ? Math.round(v).toString() : v.toString();
   }
@@ -3448,7 +3466,7 @@ var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInt
   }
   return y2Config;
 };
-var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay, lineDashStyle, lineDashStylesByField) => {
+var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay, lineDashStyle, lineDashStylesByField, stepPosition, stepPositionsByField) => {
   const seriesConfig = {};
   let spanGaps;
   let replaceNullsWithZero;
@@ -3475,6 +3493,8 @@ var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled
       );
       if (shouldAssignToY2) {
         seriesConfig[field].overrides.scale = "y2";
+      } else {
+        seriesConfig[field].overrides.scale = "y";
       }
     }
     if (overlayFields == null ? void 0 : overlayFields.includes(field)) {
@@ -3487,6 +3507,11 @@ var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled
     if (fieldDashStyle) {
       seriesConfig[field].lineDashStyle = fieldDashStyle;
     }
+    const hasFieldStepPosition = Object.hasOwn(stepPositionsByField || {}, field);
+    const fieldStepPosition = hasFieldStepPosition ? stepPositionsByField == null ? void 0 : stepPositionsByField[field] : stepPosition;
+    if (fieldStepPosition && fieldStepPosition !== "off") {
+      seriesConfig[field].stepPosition = fieldStepPosition;
+    }
     if (replaceNullsWithZero !== void 0) {
       seriesConfig[field].replaceNullsWithZero = replaceNullsWithZero;
     }
@@ -3669,6 +3694,9 @@ var TimeSeriesChartWrapper = (props) => {
     backgroundColor,
     defaultFontColor,
     additionalTooltipValues,
+    xAxisLineVisibility: xAxisLineVisibility,
+    yAxisLineVisibility,
+    y2AxisLineVisibility,
     showYAxisWithZero: showYAxisWithZeroFromProps,
     showY2AxisWithZero: showY2AxisWithZeroFromProps
   } = _a, otherOptions = __objRest(_a, [
@@ -3692,6 +3720,10 @@ var TimeSeriesChartWrapper = (props) => {
     "backgroundColor",
     "defaultFontColor",
     "additionalTooltipValues",
+    // Extract axis line visibility options from props
+    "xAxisLineVisibility",
+    "yAxisLineVisibility",
+    "y2AxisLineVisibility",
     // Extract showYAxisWithZero directly from props for accelerated render mode
     "showYAxisWithZero",
     "showY2AxisWithZero"
@@ -3704,6 +3736,7 @@ var TimeSeriesChartWrapper = (props) => {
     fieldColors,
     legendLabels: legendLabelsStr,
     legendMode,
+    legendTruncation,
     "axisTitleX.text": xAxisTitleText,
     "axisTitleY.text": yAxisTitleText,
     "axisTitleY2.text": y2AxisTitleText,
@@ -3712,6 +3745,7 @@ var TimeSeriesChartWrapper = (props) => {
     "axisTitleY2.visibility": y2AxisTitleVisibility,
     "axisLabelsX.majorLabelVisibility": xAxisLabelVisibility,
     "axisLabelsX.majorLabelStyle.rotation": xAxisLabelRotation,
+    "axisLabelsX.maxLabelParts": xAxisMaxLabelParts,
     "axisLabelsY.majorLabelVisibility": yAxisLabelVisibility,
     "axisLabelsY.majorUnit": yAxisMajorUnitFromSimpleXML,
     "axisLabelsY2.majorLabelVisibility": y2AxisLabelVisibility,
@@ -3729,6 +3763,8 @@ var TimeSeriesChartWrapper = (props) => {
     lineWidth,
     lineDashStyle,
     fieldDashStyles: lineDashStylesByFieldStr,
+    stepPosition,
+    fieldStepPositions: stepPositionsByFieldStr,
     yAxisMin: yAxisMinRaw,
     yAxisMax: yAxisMaxRaw,
     y2AxisMin: y2AxisMinRaw,
@@ -3739,6 +3775,8 @@ var TimeSeriesChartWrapper = (props) => {
     showYMinorGridLines,
     showY2MinorGridLines,
     showLineSmoothing,
+    xAxisMajorTickVisibility,
+    xAxisMajorTickSize,
     yAxisMajorTickVisibility,
     y2AxisMajorTickVisibility,
     yAxisMajorTickSize,
@@ -3755,10 +3793,14 @@ var TimeSeriesChartWrapper = (props) => {
   const dataValuesDisplay = showDataLabels === "none" ? "off" : showDataLabels;
   const showYAxisWithZero = showYAxisWithZeroFromProps != null ? showYAxisWithZeroFromProps : showYAxisWithZeroFromOptions;
   const showY2AxisWithZero = showY2AxisWithZeroFromProps != null ? showY2AxisWithZeroFromProps : showY2AxisWithZeroFromOptions;
+  const showXMajorTicks = xAxisMajorTickVisibility !== "hide";
   const showYMajorTicks = yAxisMajorTickVisibility === "show";
   const showY2MajorTicks = y2AxisMajorTickVisibility === "show";
   const showYMinorTicks = yAxisMinorTickVisibility === "show";
   const showY2MinorTicks = y2AxisMinorTickVisibility === "show";
+  const showXAxisLine = parseXAxisLineVisibility(xAxisLineVisibility);
+  const showYAxisLine = yAxisLineVisibility === "show";
+  const showY2AxisLine = y2AxisLineVisibility === "show";
   const yAxisMin = parseAxisValue(yAxisMinRaw);
   const yAxisMax = parseAxisValue(yAxisMaxRaw);
   const y2AxisMin = parseAxisValue(y2AxisMinRaw);
@@ -3773,13 +3815,15 @@ var TimeSeriesChartWrapper = (props) => {
     y2AxisMajorUnitFromSimpleXML,
     y2AxisMajorTickInterval
   );
-  const yAxisMajorTickSizeNum = yAxisMajorTickSize ? Number(yAxisMajorTickSize) : void 0;
-  const y2AxisMajorTickSizeNum = y2AxisMajorTickSize ? Number(y2AxisMajorTickSize) : void 0;
-  const yAxisMinorTickSizeNum = yAxisMinorTickSize ? Number(yAxisMinorTickSize) : void 0;
-  const y2AxisMinorTickSizeNum = y2AxisMinorTickSize ? Number(y2AxisMinorTickSize) : void 0;
+  const xAxisMajorTickSizeNum = xAxisMajorTickSize != null ? Number(xAxisMajorTickSize) : void 0;
+  const yAxisMajorTickSizeNum = yAxisMajorTickSize != null ? Number(yAxisMajorTickSize) : void 0;
+  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 seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
   const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
   const lineDashStylesByField = lineDashStylesByFieldStr ? JSON.parse(lineDashStylesByFieldStr) : void 0;
+  const stepPositionsByField = stepPositionsByFieldStr ? JSON.parse(stepPositionsByFieldStr) : void 0;
   const legendLabels = parseArrayOption(legendLabelsStr);
   const bgColor = backgroundColor || bgColorFromOptions;
   const [containerWidth, setContainerWidth] = react_exports.useState(Number(props.width));
@@ -3867,7 +3911,9 @@ var TimeSeriesChartWrapper = (props) => {
       nullValueMode,
       markerDisplay,
       lineDashStyle,
-      lineDashStylesByField
+      lineDashStylesByField,
+      stepPosition,
+      stepPositionsByField
     ),
     [
       yFields,
@@ -3878,7 +3924,9 @@ var TimeSeriesChartWrapper = (props) => {
       nullValueMode,
       markerDisplay,
       lineDashStyle,
-      lineDashStylesByField
+      lineDashStylesByField,
+      stepPosition,
+      stepPositionsByField
     ]
   );
   const chartingEventAnnotations = (0, react_exports.useMemo)(
@@ -3893,9 +3941,14 @@ var TimeSeriesChartWrapper = (props) => {
     () => __spreadValues(__spreadValues(__spreadValues({}, xScaleConfig), yScaleConfig), y2ScaleConfig),
     [xScaleConfig, yScaleConfig, y2ScaleConfig]
   );
+  const isSeriesCompare = legendMode === "seriesCompare";
   const legend = (0, react_exports.useMemo)(
-    () => getLegend({ legendDisplay, isSeriesCompare: legendMode === "seriesCompare" }),
-    [legendDisplay, legendMode]
+    () => getLegend({
+      legendDisplay: isSeriesCompare && legendDisplay !== "off" ? "right" : legendDisplay,
+      isSeriesCompare,
+      legendTruncation
+    }),
+    [legendDisplay, isSeriesCompare, legendTruncation]
   );
   const handleChartClick = react_exports.useCallback(
     (event) => {
@@ -4000,6 +4053,7 @@ var TimeSeriesChartWrapper = (props) => {
         seriesConfig: seriesOverrides,
         legend,
         legendLabels,
+        legendTruncation,
         isSeriesCompare: legendMode === "seriesCompare",
         maxSeriesFocus: legendMode === "seriesCompare" ? 0 : void 0,
         scaleConfig,
@@ -4021,6 +4075,8 @@ var TimeSeriesChartWrapper = (props) => {
         showY2MinorGridLines,
         showLineSmoothing,
         dataValuesDisplay,
+        showXMajorTicks,
+        xAxisMajorTickSize: xAxisMajorTickSizeNum,
         showYMajorTicks,
         showY2MajorTicks,
         yAxisMajorTickSize: yAxisMajorTickSizeNum,
@@ -4032,7 +4088,11 @@ var TimeSeriesChartWrapper = (props) => {
         yAxisMinorTickSize: yAxisMinorTickSizeNum,
         y2AxisMinorTickSize: y2AxisMinorTickSizeNum,
         showYAxisWithZero,
-        showY2AxisWithZero
+        showY2AxisWithZero,
+        showXAxisLine,
+        showYAxisLine,
+        showY2AxisLine,
+        xAxisMaxLabelParts
       }
     ));
   }, [
@@ -4047,6 +4107,7 @@ var TimeSeriesChartWrapper = (props) => {
     seriesOverrides,
     legend,
     legendLabels,
+    legendTruncation,
     scaleConfig,
     onClick,
     handleChartClick,
@@ -4065,6 +4126,8 @@ var TimeSeriesChartWrapper = (props) => {
     showY2MinorGridLines,
     showLineSmoothing,
     dataValuesDisplay,
+    showXMajorTicks,
+    xAxisMajorTickSizeNum,
     showYMajorTicks,
     showY2MajorTicks,
     yAxisMajorTickSizeNum,
@@ -4077,7 +4140,11 @@ var TimeSeriesChartWrapper = (props) => {
     y2AxisMinorTickSizeNum,
     showYAxisWithZero,
     showY2AxisWithZero,
-    legendMode
+    showXAxisLine,
+    showYAxisLine,
+    showY2AxisLine,
+    legendMode,
+    xAxisMaxLabelParts
   ]);
   const memoizedVisualization = (0, react_exports.useMemo)(() => {
     return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor: bgColor }, memoizedChart);