@dynatrace/strato-components 3.4.1 → 3.5.2

package/charts/xy-chart/components/tooltip/HoveredPointTooltip/hoveredPointTooltipBodyUtils.js

@@ -21,6 +21,7 @@ __export(hoveredPointTooltipBodyUtils_exports, {
 });
 module.exports = __toCommonJS(hoveredPointTooltipBodyUtils_exports);
 var import_safe_get = require("../../../../core/utils/safe-get.js");
+var import_guards = require("../../../types/guards.js");
 var import_value_representation = require("../../../utils/value-representation.js");
 var import_get_tooltip_formatter = require("../utils/get-tooltip-formatter.js");
 var import_getHoveredPointTooltipBodyContent = require("./hooks/getHoveredPointTooltipBodyContent.js");
@@ -31,6 +32,7 @@ const buildHoveredPointTooltipBodyProps = ({
   axisIdToFormatter,
   axisIdToScaleDomain,
   datapointMetadataMap,
+  formatCategory,
   intl
 }) => {
   const { xAxis, yAxis } = (0, import_safe_get.safeGet)(seriesToMetadata, series);
@@ -48,18 +50,21 @@ const buildHoveredPointTooltipBodyProps = ({
     max: binDomain
   } : (0, import_safe_get.safeGet)(axisIdToScaleDomain, yAxis.id);
   const { x0, x1, y0, y1 } = datapoint;
+  const buildCategoricalStringFormatter = (axis) => (0, import_guards.isCategorical)(axis.type) ? (value) => formatCategory(axis, value) ?? value : void 0;
+  const xResolvedFormatter = buildCategoricalStringFormatter(xAxis) ?? xFormatter;
+  const yResolvedFormatter = buildCategoricalStringFormatter(yAxis) ?? yFormatter;
   const { text: textX, duration: durationX } = (0, import_getHoveredPointTooltipBodyContent.getHoveredPointTooltipBodyContent)(
     intl,
     x0,
     x1,
-    xFormatter,
+    xResolvedFormatter,
     (0, import_value_representation.getRelativeAccessor)(xAxis, yDomain)
   );
   const { text: textY, duration: durationY } = (0, import_getHoveredPointTooltipBodyContent.getHoveredPointTooltipBodyContent)(
     intl,
     y0,
     y1,
-    yFormatter,
+    yResolvedFormatter,
     (0, import_value_representation.getRelativeAccessor)(yAxis, xDomain)
   );
   return {

package/charts/xy-chart/components/tooltip/XYChartTooltipContent.js

@@ -44,7 +44,10 @@ const XYChartTooltipContent = ({
   const colorScaleMap = (0, import_useXYChartColorScales.useXYChartColorScales)();
   const { seriesToMetadata } = (0, import_useXYChartData.useXYChartData)();
   const { datapointMetadataMap } = (0, import_useXYChartData.useXYChartData)();
-  if (customTooltip?.children) {
+  if (customTooltip?.hidden) {
+    return null;
+  }
+  if (customTooltip?.template) {
     const customTooltipPayload = (0, import_get_custom_tooltip_payload.getCustomTooltipPayload)(
       content,
       (0, import_safe_get.safeGet)(seriesToMetadata, content.series),
@@ -53,7 +56,7 @@ const XYChartTooltipContent = ({
       colorScaleMap,
       (0, import_safe_get.safeGet)(datapointMetadataMap, content.datapoint).colorOverride
     );
-    const customTooltipContent = customTooltip.children?.(customTooltipPayload);
+    const customTooltipContent = customTooltip.template?.(customTooltipPayload);
     if (customTooltipContent === null) {
       return null;
     }

package/charts/xy-chart/components/tooltip/XYChartTooltipTemplate/XYChartTooltipTemplate.css

@@ -1,4 +1,4 @@
-._fnoz5j0-3-4-1 {
+._fnoz5j0-3-5-2 {
   min-width: 225px;
   max-width: 300px;
 }

package/charts/xy-chart/components/tooltip/XYChartTooltipTemplate/XYChartTooltipTemplate.sty.js

@@ -21,4 +21,4 @@ __export(XYChartTooltipTemplate_css_exports, {
 });
 module.exports = __toCommonJS(XYChartTooltipTemplate_css_exports);
 var import_XYChartTooltipTemplate_css_ts_vanilla = require("./XYChartTooltipTemplate.css");
-var body = "_fnoz5j0-3-4-1";
+var body = "_fnoz5j0-3-5-2";

package/charts/xy-chart/components/tooltip/utils/tooltip-styles.css

@@ -1,23 +1,23 @@
-._1u58xor0-3-4-1 {
+._1u58xor0-3-5-2 {
   display: flex;
   flex-wrap: wrap;
   overflow-wrap: anywhere;
   margin-left: var(--dt-spacings-size-4, 4px);
   margin-right: var(--dt-spacings-size-4, 4px);
 }
-._1u58xor1-3-4-1 {
+._1u58xor1-3-5-2 {
   font-weight: var(--dt-typography-text-small-emphasized-weight, 500);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1u58xor1-3-4-1::after {
+._1u58xor1-3-5-2::after {
   content: " ";
   white-space: pre;
 }
-._1u58xor2-3-4-1 {
+._1u58xor2-3-5-2 {
   flex: 0 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }
-._1u58xor3-3-4-1 {
+._1u58xor3-3-5-2 {
   flex: 1 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }

package/charts/xy-chart/components/tooltip/utils/tooltip-styles.sty.js

@@ -24,7 +24,7 @@ __export(tooltip_styles_css_exports, {
 });
 module.exports = __toCommonJS(tooltip_styles_css_exports);
 var import_tooltip_styles_css_ts_vanilla = require("./tooltip-styles.css");
-var axisName = "_1u58xor1-3-4-1";
-var axisValue = "_1u58xor2-3-4-1";
-var duration = "_1u58xor3-3-4-1";
-var wrapper = "_1u58xor0-3-4-1";
+var axisName = "_1u58xor1-3-5-2";
+var axisValue = "_1u58xor2-3-5-2";
+var duration = "_1u58xor3-3-5-2";
+var wrapper = "_1u58xor0-3-5-2";

package/charts/xy-chart/constants/defaults.d.ts

@@ -22,4 +22,5 @@ export declare const DEFAULT_POINTS_DISPLAY: PointsDisplay;
 export declare const RECT_STROKE_WIDTH = 1;
 export declare const XY_CHART_BOTTOM_AXIS_LABEL = "Bottom axis";
 export declare const XY_CHART_TOP_AXIS_LABEL = "Top axis";
+export declare const DISPLAY_NAME = "XYChart";
 export {};

package/charts/xy-chart/constants/defaults.js

@@ -25,6 +25,7 @@ __export(defaults_exports, {
   DEFAULT_LEGEND_RANGE_FORMATTER: () => DEFAULT_LEGEND_RANGE_FORMATTER,
   DEFAULT_LOADING_STATE: () => DEFAULT_LOADING_STATE,
   DEFAULT_POINTS_DISPLAY: () => DEFAULT_POINTS_DISPLAY,
+  DISPLAY_NAME: () => DISPLAY_NAME,
   DISPLAY_UNITS_LIMIT: () => DISPLAY_UNITS_LIMIT,
   RECT_STROKE_WIDTH: () => RECT_STROKE_WIDTH,
   XY_CHART_ARIA_LABEL: () => XY_CHART_ARIA_LABEL,
@@ -93,3 +94,4 @@ const DEFAULT_POINTS_DISPLAY = "auto";
 const RECT_STROKE_WIDTH = 1;
 const XY_CHART_BOTTOM_AXIS_LABEL = "Bottom axis";
 const XY_CHART_TOP_AXIS_LABEL = "Top axis";
+const DISPLAY_NAME = "XYChart";

package/charts/xy-chart/context/XYChartCustomTooltip.context.d.ts

@@ -1,2 +1,9 @@
-import type { XYChartCustomTooltipProps } from '../types/xy-chart-props.js';
-export declare const XYChartCustomTooltipContext: import("react").Context<XYChartCustomTooltipProps | undefined>;
+import { type ReactNode } from 'react';
+import { DEFAULT_CUSTOM_TOOLTIP_CONFIG } from '../../core/constants.js';
+import type { ChartTooltipConfig } from '../../core/types/tooltip.js';
+import { XYChartTooltipPayload } from '../types/xy-chart.js';
+export interface XYChartCustomTooltipConfig extends ChartTooltipConfig {
+    template?: (tooltipPayload: XYChartTooltipPayload) => ReactNode;
+}
+export { DEFAULT_CUSTOM_TOOLTIP_CONFIG };
+export declare const XYChartCustomTooltipContext: import("react").Context<XYChartCustomTooltipConfig>;

package/charts/xy-chart/context/XYChartCustomTooltip.context.js

@@ -17,8 +17,10 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var XYChartCustomTooltip_context_exports = {};
 __export(XYChartCustomTooltip_context_exports, {
+  DEFAULT_CUSTOM_TOOLTIP_CONFIG: () => import_constants.DEFAULT_CUSTOM_TOOLTIP_CONFIG,
   XYChartCustomTooltipContext: () => XYChartCustomTooltipContext
 });
 module.exports = __toCommonJS(XYChartCustomTooltip_context_exports);
 var import_react = require("react");
-const XYChartCustomTooltipContext = (0, import_react.createContext)(void 0);
+var import_constants = require("../../core/constants.js");
+const XYChartCustomTooltipContext = (0, import_react.createContext)(import_constants.DEFAULT_CUSTOM_TOOLTIP_CONFIG);

package/charts/xy-chart/context/XYChartData.context.d.ts

@@ -1,4 +1,5 @@
 import type { AxisIdToScaleDomain, XYChartAxisInternal, XYChartSeriesWithDatapoints, MapDatapoints, SeriesToMetadata, AxisIdToDimension } from '../types/xy-chart-internals.js';
+import type { XYChartData } from '../types/xy-chart.js';
 export type XYChartDataContext = {
     axesMetadata: {
         isZoomEnabled: boolean;
@@ -9,6 +10,7 @@ export type XYChartDataContext = {
     seriesWithDatapoints: XYChartSeriesWithDatapoints[];
     filteredSeriesWithDatapoints: XYChartSeriesWithDatapoints[];
     axisIdToScaleDomain: AxisIdToScaleDomain;
+    axisIdToCategoryDatum: Map<string, Map<string, XYChartData>>;
     datapointMetadataMap: MapDatapoints;
     seriesToMetadata: SeriesToMetadata;
     axisIdToDimension: AxisIdToDimension;

package/charts/xy-chart/hooks/useFormatCategory.d.ts

@@ -0,0 +1,13 @@
+import type { XYChartAxisInternal } from '../types/xy-chart-internals.js';
+import type { XYChartXAxisPosition, XYChartYAxisPosition } from '../types/xy-chart.js';
+export type XYChartAxisPosition = XYChartXAxisPosition | XYChartYAxisPosition | 'top' | 'bottom' | 'left' | 'right';
+export type FormatCategory = (axis: XYChartAxisInternal | XYChartAxisPosition | undefined, raw: string | undefined) => string | undefined;
+/**
+ * Returns a stable function that formats a raw category string using the
+ * categorical axis formatter. The axis can be addressed by position (`'top'`)
+ * or by passing the internal axis config directly. Falls back to the raw value
+ * when the axis isn't categorical, has no formatter, or the value is missing.
+ *
+ * @internal
+ */
+export declare const useFormatCategory: () => FormatCategory;

package/charts/xy-chart/hooks/useFormatCategory.js

@@ -0,0 +1,60 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useFormatCategory_exports = {};
+__export(useFormatCategory_exports, {
+  useFormatCategory: () => useFormatCategory
+});
+module.exports = __toCommonJS(useFormatCategory_exports);
+var import_react = require("react");
+var import_units = require("@dynatrace-sdk/units");
+var import_useVisibleAxesConfig = require("./useVisibleAxesConfig.js");
+var import_formatter = require("../../core/types/formatter.js");
+var import_XYChartData_context = require("../context/XYChartData.context.js");
+var import_guards = require("../types/guards.js");
+const useFormatCategory = () => {
+  const config = (0, import_useVisibleAxesConfig.useVisibleAxesConfig)();
+  const context = (0, import_react.useContext)(import_XYChartData_context.XYChartDataContext);
+  if (context === void 0) {
+    throw new Error(
+      "useFormatCategory must be used within a XYChartDataContext"
+    );
+  }
+  const { axisIdToCategoryDatum } = context;
+  return (0, import_react.useCallback)(
+    (axisOrPosition, raw) => {
+      if (typeof raw !== "string") {
+        return raw;
+      }
+      const axis = typeof axisOrPosition === "string" ? config[axisOrPosition] : axisOrPosition;
+      if (!axis || !(0, import_guards.isCategorical)(axis.type)) {
+        return raw;
+      }
+      const formatter = axis.formatter;
+      if (!formatter) {
+        return raw;
+      }
+      const numericFormatter = formatter;
+      if ((0, import_formatter.isFormatterOptions)(numericFormatter)) {
+        return (0, import_units.format)(Number(raw), numericFormatter);
+      }
+      const datum = axisIdToCategoryDatum.get(axis.id)?.get(raw) ?? {};
+      return formatter(raw, datum);
+    },
+    [config, axisIdToCategoryDatum]
+  );
+};

package/charts/xy-chart/hooks/useXYChartConfig.d.ts

@@ -1,8 +1,3 @@
 import type { XYChartSlots } from '../types/xy-chart-internals.js';
 import type { XYChartProps } from '../types/xy-chart-props.js';
-export declare const useXYChartConfig: (props: XYChartProps, slots: XYChartSlots) => Omit<Required<import("../types/xy-chart-props.js").XYChartConfigProperties>, "select" | "colorPalette" | "annotations" | "customTooltip"> & {
-    annotations?: import("../context/XYChartAnnotationsConfig.context.js").XYChartAnnotationsConfigProps;
-    select?: import("../types/xy-chart-props.js").XYChartSelectConfig;
-    colorPalette?: import("../types/xy-chart.js").XYChartColorPalette;
-    customTooltip?: import("../types/xy-chart-props.js").XYChartCustomTooltipProps;
-};
+export declare const useXYChartConfig: (props: XYChartProps, slots: XYChartSlots) => import("../utils/xy-chart-configuration.js").XYChartConfig;

package/charts/xy-chart/hooks/useXYChartCustomTooltip.d.ts

@@ -1 +1 @@
-export declare const useXYChartCustomTooltip: () => import("../types/xy-chart-props.js").XYChartCustomTooltipProps | undefined;
+export declare const useXYChartCustomTooltip: () => import("../context/XYChartCustomTooltip.context.js").XYChartCustomTooltipConfig;

package/charts/xy-chart/hooks/useXYChartDataProvider.d.ts

@@ -1,4 +1,4 @@
-import type { AxisIdToScaleDomain, MapDatapoints, SeriesToMetadata, XYChartSeriesWithDatapoints, XYChartVariantsInternal } from '../types/xy-chart-internals.js';
+import type { AxisIdToScaleDomain, MapDatapoints, SeriesToMetadata, XYChartAxisInternal, XYChartSeriesWithDatapoints, XYChartVariantsInternal } from '../types/xy-chart-internals.js';
 import type { XYChartData } from '../types/xy-chart.js';
 /**
  * A hook to process chart data and configure axes for an XY chart.
@@ -18,8 +18,9 @@ export declare function useXYChartDataProvider(seriesVariantsProps: XYChartVaria
         isPanEnabled: boolean;
         isInfinite: boolean;
     };
-    axes: import("../types/xy-chart-internals.js").XYChartAxisInternal[];
+    axes: XYChartAxisInternal[];
     axisIdToScaleDomain: AxisIdToScaleDomain;
+    axisIdToCategoryDatum: Map<string, Map<string, XYChartData>>;
     seriesIdToValueScaleDomain: import("../types/xy-chart-internals.js").RectSeriesIdToValueScaleDomain;
     datapointMetadataMap: MapDatapoints;
     linearSelectionContextValue: {

package/charts/xy-chart/hooks/useXYChartDataProvider.js

@@ -31,7 +31,9 @@ var import_bar_series = require("../processing-strategies/strategies/bar-series.
 var import_dot_series = require("../processing-strategies/strategies/dot-series.js");
 var import_line_series = require("../processing-strategies/strategies/line-series.js");
 var import_rect_series = require("../processing-strategies/strategies/rect-series.js");
+var import_get_datapoints = require("../processing-strategies/utils/access-datapoint/get-datapoints.js");
 var import_selectors = require("../store/selectors.js");
+var import_guards = require("../types/guards.js");
 var import_axis_interactions = require("../utils/axis-interactions.js");
 var import_combine_data_with_corresponding_series = require("../utils/combine-data-with-corresponding-series.js");
 var import_combine_series_with_axes = require("../utils/combine-series-with-axes.js");
@@ -40,7 +42,9 @@ function useXYChartDataProvider(seriesVariantsProps, data) {
   const colorPalette = (0, import_useColorPalette.useColorPalette)();
   const intl = (0, import_react_intl.useIntl)();
   const axisIdToScaleDomain = /* @__PURE__ */ new Map();
+  const axisWithSeries = /* @__PURE__ */ new Set();
   const datapointMetadataMap = /* @__PURE__ */ new Map();
+  const axisIdToCategoryDatum = /* @__PURE__ */ new Map();
   const {
     addValue,
     getCurrentSelectConfig: getCurrentShapeSelectConfig,
@@ -86,7 +90,26 @@ function useXYChartDataProvider(seriesVariantsProps, data) {
     intl,
     colorPalette,
     datapointMetadataMap,
-    filteredSeriesIds
+    filteredSeriesIds,
+    axisWithSeries
+  };
+  const captureCategoryDatum = (axis, accessor, datum) => {
+    if (!(0, import_guards.isCategorical)(axis.type) || !accessor) {
+      return;
+    }
+    const rawValue = (0, import_get_datapoints.getDatumValue)(datum, accessor);
+    if (typeof rawValue !== "string" && typeof rawValue !== "number") {
+      return;
+    }
+    const raw = String(rawValue);
+    let perAxis = axisIdToCategoryDatum.get(axis.id);
+    if (!perAxis) {
+      perAxis = /* @__PURE__ */ new Map();
+      axisIdToCategoryDatum.set(axis.id, perAxis);
+    }
+    if (!perAxis.has(raw)) {
+      perAxis.set(raw, datum);
+    }
   };
   for (const { data: data2, series } of dataWithSeries.filter(
     ({ series: series2 }) => series2.length
@@ -116,10 +139,14 @@ function useXYChartDataProvider(seriesVariantsProps, data) {
             `No strategy found to process series with id: ${seriesProps.id}`
           );
         }
+        captureCategoryDatum(xAxis, seriesProps.x0Accessor, datum);
+        captureCategoryDatum(yAxis, seriesProps.y0Accessor, datum);
       }
     }
   }
-  const validAxes = axes.filter((axis) => axisIdToScaleDomain.has(axis.id));
+  const validAxes = axes.filter(
+    (axis) => axisIdToScaleDomain.has(axis.id) && axisWithSeries.has(axis.id)
+  );
   const linearSelectionContextValue = {
     selectionConfigByAxisId: getCurrentShapeSelectConfig(),
     searchAllAxisDatapoints: searchAllAxisShapeDatapoints
@@ -136,6 +163,7 @@ function useXYChartDataProvider(seriesVariantsProps, data) {
     },
     axes: validAxes,
     axisIdToScaleDomain,
+    axisIdToCategoryDatum,
     seriesIdToValueScaleDomain: rectSeriesStrategy.seriesIdToValueScaleDomain,
     datapointMetadataMap,
     linearSelectionContextValue,

package/charts/xy-chart/layout/XYChartLayout.css

@@ -1,10 +1,10 @@
-._1ru1qe70-3-4-1 {
+._1ru1qe70-3-5-2 {
   pointer-events: none;
   width: 100%;
   height: 100%;
   z-index: 1;
 }
-._1ru1qe71-3-4-1 {
+._1ru1qe71-3-5-2 {
   top: -5.5px;
   left: -5.5px;
   width: calc(100% + 11px);

package/charts/xy-chart/layout/XYChartLayout.sty.js

@@ -23,5 +23,5 @@ __export(XYChartLayout_css_exports, {
 module.exports = __toCommonJS(XYChartLayout_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../core/components/chart-grid/ChartGrid.css");
 var import_XYChartLayout_css_ts_vanilla = require("./XYChartLayout.css");
-var datapointCanvasPlot = "_1ru1qe71-3-4-1 _13lzg4k0-3-4-1 _1ru1qe70-3-4-1";
-var rectangleCanvasPlot = "_13lzg4k0-3-4-1 _1ru1qe70-3-4-1";
+var datapointCanvasPlot = "_1ru1qe71-3-5-2 _13lzg4k0-3-5-2 _1ru1qe70-3-5-2";
+var rectangleCanvasPlot = "_13lzg4k0-3-5-2 _1ru1qe70-3-5-2";

package/charts/xy-chart/processing-strategies/strategies/area-series.js

@@ -216,6 +216,8 @@ class AreaSeriesStrategy extends import_base_series.SeriesBaseStrategy {
     }
     const currentSeriesMetadata = (0, import_safe_get.safeGet)(seriesToMetadata, currentSeries);
     if (isSeriesVisible) {
+      context.axisWithSeries.add(xAxis.id);
+      context.axisWithSeries.add(yAxis.id);
       const gappedDatapoint = this.gapHelper.handleGapDetection(
         datapoint,
         currentSeries,
@@ -237,18 +239,19 @@ class AreaSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       currentSeries,
       context
     );
+    this.updateAxisDomains(
+      calcDatapoint,
+      xAxis,
+      yAxis,
+      context.axisIdToScaleDomain,
+      isSeriesVisible
+    );
     if (isSeriesVisible) {
       this.addValue({
         series: currentSeries,
         datapoint,
         color: currentSeriesMetadata?.color
       });
-      this.updateAxisDomains(
-        calcDatapoint,
-        xAxis,
-        yAxis,
-        context.axisIdToScaleDomain
-      );
     }
   }
   getColor(datum, seriesProps, configColorPalette, seriesName, seriesIndex) {

package/charts/xy-chart/processing-strategies/strategies/bar-series.js

@@ -230,17 +230,20 @@ class BarSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       currentSeries,
       context
     );
+    this.updateAxisDomains(
+      calcDatapoint,
+      xAxis,
+      yAxis,
+      context.axisIdToScaleDomain,
+      isSeriesVisible
+    );
     if (isSeriesVisible) {
+      context.axisWithSeries.add(xAxis.id);
+      context.axisWithSeries.add(yAxis.id);
       this.addValue({
         series: currentSeries,
         datapoint
       });
-      this.updateAxisDomains(
-        calcDatapoint,
-        xAxis,
-        yAxis,
-        context.axisIdToScaleDomain
-      );
     }
   }
   getColor(datum, seriesProps, configColorPalette, seriesName, seriesIndex) {

package/charts/xy-chart/processing-strategies/strategies/base-series.d.ts

@@ -47,7 +47,7 @@ export declare abstract class SeriesBaseStrategy<T extends XYChartSelectionLinea
     /**
      * Calculates and sets the axis domains.
      */
-    protected updateAxisDomains(calcPoint: AnyDatapoint, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, axisIdToScaleDomain: MutableProcessingContext['axisIdToScaleDomain']): void;
+    protected updateAxisDomains(calcPoint: AnyDatapoint, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, axisIdToScaleDomain: MutableProcessingContext['axisIdToScaleDomain'], isSeriesVisible: boolean): void;
     /**
      * Gets the calculation point for domain updates. Override for custom logic (e.g., time centering).
      */

package/charts/xy-chart/processing-strategies/strategies/base-series.js

@@ -21,6 +21,7 @@ __export(base_series_exports, {
 });
 module.exports = __toCommonJS(base_series_exports);
 var import_lodash_es = require("lodash");
+var import_axis = require("../../types/axis.js");
 var import_calculate_axes_domains = require("../../utils/calculate-axes-domains.js");
 var import_get_series_name = require("../utils/series-naming/get-series-name.js");
 class SeriesBaseStrategy {
@@ -92,15 +93,18 @@ class SeriesBaseStrategy {
   /**
    * Calculates and sets the axis domains.
    */
-  updateAxisDomains(calcPoint, xAxis, yAxis, axisIdToScaleDomain) {
+  updateAxisDomains(calcPoint, xAxis, yAxis, axisIdToScaleDomain, isSeriesVisible) {
     const { xDomain, yDomain } = (0, import_calculate_axes_domains.calculateAxesDomains)(
       xAxis,
       yAxis,
       calcPoint,
-      axisIdToScaleDomain
+      axisIdToScaleDomain,
+      isSeriesVisible
     );
     axisIdToScaleDomain.set(xAxis.id, xDomain);
-    axisIdToScaleDomain.set(yAxis.id, yDomain);
+    if (isSeriesVisible || yAxis.type === import_axis.XYAxisTypeCategorical) {
+      axisIdToScaleDomain.set(yAxis.id, yDomain);
+    }
   }
   /**
    * Gets the calculation point for domain updates. Override for custom logic (e.g., time centering).

package/charts/xy-chart/processing-strategies/strategies/dot-series.js

@@ -105,20 +105,23 @@ class DotSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       currentSeries,
       context
     );
+    const calcPoint = this.getCalculationPoint(datapoint, xAxis, yAxis);
+    this.updateAxisDomains(
+      calcPoint,
+      xAxis,
+      yAxis,
+      context.axisIdToScaleDomain,
+      isSeriesVisible
+    );
     if (isSeriesVisible) {
+      context.axisWithSeries.add(xAxis.id);
+      context.axisWithSeries.add(yAxis.id);
       const currentSeriesMetadata = (0, import_safe_get.safeGet)(seriesToMetadata, currentSeries);
       this.addValue({
         series: currentSeries,
         datapoint,
         color: currentSeriesMetadata?.color
       });
-      const calcPoint = this.getCalculationPoint(datapoint, xAxis, yAxis);
-      this.updateAxisDomains(
-        calcPoint,
-        xAxis,
-        yAxis,
-        context.axisIdToScaleDomain
-      );
     }
   }
   getColor(datum, seriesProps, configColorPalette, seriesName, seriesIndex) {

package/charts/xy-chart/processing-strategies/strategies/line-series.js

@@ -121,20 +121,23 @@ class LineSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       currentSeries,
       context
     );
+    const calcPoint = this.getCalculationPoint(datapoint, xAxis, yAxis);
+    this.updateAxisDomains(
+      calcPoint,
+      xAxis,
+      yAxis,
+      context.axisIdToScaleDomain,
+      isSeriesVisible
+    );
     if (isSeriesVisible) {
+      context.axisWithSeries.add(xAxis.id);
+      context.axisWithSeries.add(yAxis.id);
       const currentSeriesMetadata = (0, import_safe_get.safeGet)(seriesToMetadata, currentSeries);
       this.addValue({
         series: currentSeries,
         datapoint,
         color: currentSeriesMetadata?.color
       });
-      const calcPoint = this.getCalculationPoint(datapoint, xAxis, yAxis);
-      this.updateAxisDomains(
-        calcPoint,
-        xAxis,
-        yAxis,
-        context.axisIdToScaleDomain
-      );
     }
   }
   getColor(datum, seriesProps, configColorPalette, seriesName, seriesIndex) {

package/charts/xy-chart/processing-strategies/strategies/rect-series.js

@@ -114,20 +114,23 @@ class RectSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       context
     );
     const datapointIsVisible = datapointMetadata.isVisible === void 0 || datapointMetadata.isVisible === true;
-    if (!datapointMetadata.isGap && datapointIsVisible) {
-      this.addValue({
-        series: currentSeries,
-        datapoint
-      });
-    }
     if (datapointIsVisible) {
-      this.updateAxisDomains(
-        datapoint,
-        xAxis,
-        yAxis,
-        context.axisIdToScaleDomain
-      );
+      context.axisWithSeries.add(xAxis.id);
+      context.axisWithSeries.add(yAxis.id);
+      if (!datapointMetadata.isGap) {
+        this.addValue({
+          series: currentSeries,
+          datapoint
+        });
+      }
     }
+    this.updateAxisDomains(
+      datapoint,
+      xAxis,
+      yAxis,
+      context.axisIdToScaleDomain,
+      datapointIsVisible
+    );
   }
   getColor(colorPalette, fallbackColorPalette) {
     const validColorPalette = (0, import_get_valid_color_palette.getValidColorPalette)(

package/charts/xy-chart/processing-strategies/types/processing-types.d.ts

@@ -19,6 +19,7 @@ export interface MutableProcessingContext {
     colorPalette?: XYChartColorPalette;
     datapointMetadataMap: MapDatapoints;
     filteredSeriesIds?: Set<string>;
+    axisWithSeries: Set<string>;
 }
 export interface SeriesConstructor<T> {
     addValue: (point: T) => void;

package/charts/xy-chart/providers/XYChartAnnotationsDataProvider.js

@@ -29,11 +29,13 @@ var import_XYChartAnnotationsHiddenTracks_context = require("../context/XYChartA
 var import_XYChartAnnotationsIndicators_context = require("../context/XYChartAnnotationsIndicators.context.js");
 var import_useAxesConfig = require("../hooks/useAxesConfig.js");
 var import_useXYChartAnnotationsConfig = require("../hooks/useXYChartAnnotationsConfig.js");
+var import_selectors = require("../store/selectors.js");
 const XYChartAnnotationsDataProvider = ({
   children
 }) => {
   const annotationsConfig = (0, import_useXYChartAnnotationsConfig.useXYChartAnnotationsConfig)();
   const axesConfig = (0, import_useAxesConfig.useAxesConfig)();
+  const selection = (0, import_selectors.useAnnotationsState)();
   if ((0, import_lodash_es.isUndefined)(annotationsConfig) || (0, import_lodash_es.isUndefined)(annotationsConfig?.data)) {
     return children;
   }
@@ -41,7 +43,7 @@ const XYChartAnnotationsDataProvider = ({
     return children;
   }
   const { data, tracksConfig, markersConfig } = annotationsConfig;
-  const { indicators, annotationsByTrack, hiddenTracks } = (0, import_get_indicators_from_annotations.getIndicatorsFromAnnotations)(data, tracksConfig, markersConfig);
+  const { indicators, annotationsByTrack, hiddenTracks } = (0, import_get_indicators_from_annotations.getIndicatorsFromAnnotations)(data, tracksConfig, markersConfig, selection);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsData_context.XYChartAnnotationsDataContext.Provider, { value: annotationsByTrack, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_XYChartAnnotationsHiddenTracks_context.XYChartAnnotationsHiddenTracksContext.Provider,
     {

package/charts/xy-chart/providers/XYChartAxesTicksProvider.d.ts

@@ -1,7 +1,9 @@
 import { type PropsWithChildren } from 'react';
+import type { FormatterWithPrecision, StringFormatter } from '../../core/types/formatter.js';
 import type { TickAxis } from '../../core/utils/formatter-by-ticks.js';
+import { type FormatCategory } from '../hooks/useFormatCategory.js';
 import type { AnyXYChartScale, AxisIdToFormatter, XYChartAxisInternal } from '../types/xy-chart-internals.js';
-declare function getFormatter(numTicks: number, axisIdToFormatter: AxisIdToFormatter, config: XYChartAxisInternal, scale?: AnyXYChartScale): import("../../index.js")._FormatterWithPrecision;
+declare function getFormatter(numTicks: number, axisIdToFormatter: AxisIdToFormatter, config: XYChartAxisInternal, scale: AnyXYChartScale | undefined, formatCategory: FormatCategory): FormatterWithPrecision | StringFormatter;
 /**
  * @internal
  * Resolves the tick data for a single axis. Uses nice unit ticks when the axis