@dynatrace/strato-components 3.7.1 → 3.8.0

package/charts/core/components/axes/AxisPrimitive.js

@@ -0,0 +1,221 @@
+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 AxisPrimitive_exports = {};
+__export(AxisPrimitive_exports, {
+  AxisPrimitive: () => AxisPrimitive
+});
+module.exports = __toCommonJS(AxisPrimitive_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_get_tick_value_as_number = require("../../../../core/utils/get-tick-value-as-number.js");
+var import_get_ticks = require("../../../../core/utils/get-ticks.js");
+const TICK_LABEL_FONT_SIZE = 10;
+const SVG_OVERFLOW_STYLE = { overflow: "visible" };
+const defaultTextProps = {
+  textAnchor: "middle",
+  fontFamily: "Arial",
+  fontSize: 10,
+  fill: "#222"
+};
+function getStartDy(verticalAnchor) {
+  if (verticalAnchor === "start") {
+    return "0.71em";
+  }
+  if (verticalAnchor === "middle") {
+    return "0.355em";
+  }
+  return "0";
+}
+function getTickPosition(scale) {
+  const s = scale;
+  if ("bandwidth" in s) {
+    let offset = s.bandwidth();
+    offset /= 2;
+    if (s.round()) {
+      offset = Math.round(offset);
+    }
+    return (d) => {
+      const scaledValue = s(d);
+      return typeof scaledValue === "number" ? scaledValue + offset : scaledValue;
+    };
+  }
+  return scale;
+}
+function getTickFormatter(scale) {
+  const s = scale;
+  if ("tickFormat" in s) {
+    return s.tickFormat();
+  }
+  return String;
+}
+function createHorizontalPoint(coords) {
+  return coords;
+}
+function createVerticalPoint(coords) {
+  return { x: coords.y, y: coords.x };
+}
+function getLabelTransform({
+  labelOffset,
+  labelProps,
+  orientation,
+  range
+}) {
+  const sign = orientation === "left" || orientation === "top" ? -1 : 1;
+  if (orientation === "top" || orientation === "bottom") {
+    const yBottomOffset = orientation === "bottom" && typeof labelProps.fontSize === "number" ? labelProps.fontSize : 0;
+    return {
+      x: (Number(range[0]) + Number(range[range.length - 1])) / 2,
+      y: sign * (labelOffset + TICK_LABEL_FONT_SIZE + yBottomOffset),
+      transform: void 0
+    };
+  }
+  return {
+    x: sign * ((Number(range[0]) + Number(range[range.length - 1])) / 2),
+    y: -labelOffset,
+    transform: `rotate(${sign * 90})`
+  };
+}
+function AxisPrimitive({
+  scale,
+  orientation = "bottom",
+  tickComponent,
+  tickLabelProps,
+  tickFormat,
+  numTicks = 10,
+  tickValues,
+  hideZero = false,
+  label = "",
+  labelClassName,
+  labelOffset = 14,
+  labelProps,
+  left = 0,
+  top: topOffset = 0,
+  axisClassName,
+  innerRef
+}) {
+  const isTop = orientation === "top";
+  const horizontal = isTop || orientation === "bottom";
+  const tickPosition = getTickPosition(scale);
+  const format = tickFormat ?? getTickFormatter(scale);
+  const filteredTickValues = (tickValues ?? (0, import_get_ticks.getTicks)(scale, numTicks)).filter(
+    (value) => !hideZero || value !== 0 && value !== "0"
+  ).map((value, index) => ({ value, index }));
+  const pointCreator = horizontal ? createHorizontalPoint : createVerticalPoint;
+  const ticks = filteredTickValues.map(
+    ({ value, index }) => {
+      const scaledValue = (0, import_get_tick_value_as_number.getTickValueAsNumber)(tickPosition(value));
+      return {
+        value,
+        index,
+        to: pointCreator({ x: scaledValue, y: 0 }),
+        formattedValue: format(
+          value,
+          index,
+          filteredTickValues
+        )
+      };
+    }
+  );
+  const tickLabelPropsDefault = {
+    ...defaultTextProps,
+    ...typeof tickLabelProps === "object" ? tickLabelProps : null
+  };
+  const allTickLabelProps = ticks.map(
+    ({ value, index }) => typeof tickLabelProps === "function" ? tickLabelProps(value, index, filteredTickValues) : tickLabelPropsDefault
+  );
+  const combinedLabelProps = { ...defaultTextProps, ...labelProps };
+  const labelTransform = label ? getLabelTransform({
+    labelOffset,
+    labelProps: combinedLabelProps,
+    orientation,
+    range: scale.range()
+  }) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "g",
+    {
+      className: axisClassName ? `visx-axis ${axisClassName}` : "visx-axis",
+      ref: innerRef,
+      transform: `translate(${left}, ${topOffset})`,
+      children: [
+        ticks.map(({ value, index, to, formattedValue }) => {
+          const currentTickLabelProps = allTickLabelProps[index] ?? {};
+          const tickYCoord = to.y + (horizontal && orientation !== "top" ? TICK_LABEL_FONT_SIZE : 0);
+          const effectiveX = currentTickLabelProps.x ?? to.x;
+          const effectiveY = currentTickLabelProps.y ?? tickYCoord;
+          const dxOffset = currentTickLabelProps.dx ?? 0;
+          const dyOffset = currentTickLabelProps.dy ?? 0;
+          const startDy = getStartDy(
+            currentTickLabelProps.verticalAnchor ?? "end"
+          );
+          const tickAngle = currentTickLabelProps.angle;
+          const tickTransform = tickAngle ? `rotate(${tickAngle}, ${effectiveX}, ${effectiveY})` : void 0;
+          const defaultTickElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "svg",
+            {
+              x: dxOffset,
+              y: dyOffset,
+              fontSize: currentTickLabelProps.fontSize,
+              style: SVG_OVERFLOW_STYLE,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "text",
+                {
+                  x: effectiveX,
+                  y: effectiveY,
+                  transform: tickTransform,
+                  textAnchor: currentTickLabelProps.textAnchor,
+                  fontFamily: currentTickLabelProps.fontFamily,
+                  fontSize: currentTickLabelProps.fontSize,
+                  fill: currentTickLabelProps.fill,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tspan", { x: effectiveX, dy: startDy, children: formattedValue })
+                }
+              )
+            }
+          );
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { className: "visx-axis-tick", children: tickComponent ? tickComponent({
+            ...currentTickLabelProps,
+            x: to.x,
+            y: tickYCoord,
+            formattedValue
+          }) : defaultTickElement }, `visx-tick-${value}-${index}`);
+        }),
+        label && labelTransform && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "svg",
+          {
+            x: 0,
+            y: 0,
+            fontSize: combinedLabelProps.fontSize,
+            style: SVG_OVERFLOW_STYLE,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "text",
+              {
+                className: labelClassName ? `visx-axis-label ${labelClassName}` : "visx-axis-label",
+                x: labelTransform.x,
+                y: labelTransform.y,
+                transform: labelTransform.transform,
+                textAnchor: combinedLabelProps.textAnchor,
+                fontFamily: combinedLabelProps.fontFamily,
+                fontSize: combinedLabelProps.fontSize,
+                fill: combinedLabelProps.fill,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tspan", { x: labelTransform.x, dy: "0", children: label })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}

package/charts/core/components/axes/components/CategoryBottomAxis.js

@@ -21,10 +21,10 @@ __export(CategoryBottomAxis_exports, {
 });
 module.exports = __toCommonJS(CategoryBottomAxis_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_scale = require("@visx/scale");
-var import_DivAxisWrapper = require("./DivAxisWrapper.js");
+var import_get_ticks = require("../../../../../core/utils/get-ticks.js");
 var import_AxisBottom = require("../AxisBottom.js");
 var import_constants = require("../constants.js");
+var import_DivAxisWrapper = require("./DivAxisWrapper.js");
 var import_TickLabel = require("./TickLabel.js");
 var import_calculate_axis_size = require("../utils/calculate-axis-size.js");
 var import_get_tick_label_props = require("../utils/get-tick-label-props.js");
@@ -40,7 +40,7 @@ const CategoryBottomAxis = (props) => {
     label,
     truncationMode = "end"
   } = props;
-  const ticks = (0, import_scale.getTicks)(scale);
+  const ticks = (0, import_get_ticks.getTicks)(scale);
   const tickNames = ticks.map((tickId) => categories[tickId]) ?? "Unknown";
   const isTickRotated = tickLabelLayout === "vertical";
   const isTickLabelVisible = (0, import_is_tick_label_visible.isTickLabelSpaceAvailable)(scale.step());

package/charts/core/components/axes/components/CategoryLeftAxis.js

@@ -21,7 +21,7 @@ __export(CategoryLeftAxis_exports, {
 });
 module.exports = __toCommonJS(CategoryLeftAxis_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_scale = require("@visx/scale");
+var import_get_ticks = require("../../../../../core/utils/get-ticks.js");
 var import_constants = require("../../../constants.js");
 var import_AxisLeft = require("../AxisLeft.js");
 var import_constants2 = require("../constants.js");
@@ -42,7 +42,7 @@ const CategoryLeftAxis = (props) => {
     truncationMode = import_constants.DEFAULT_TRUNCATION_MODE,
     isVerticalLayout = true
   } = props;
-  const ticks = (0, import_scale.getTicks)(scale);
+  const ticks = (0, import_get_ticks.getTicks)(scale);
   const tickNames = ticks.map((tickId) => categories[tickId]) ?? "Unknown";
   const maxSize = (0, import_calculate_axis_size.getYTickMaxSize)(containerWidth, label);
   const tickFormat = (_, index) => tickNames[index];

package/charts/core/components/axes/components/PanningControls/PanningControls.css

@@ -1,4 +1,4 @@
-@keyframes _3rbllj2-3-7-1 {
+@keyframes _3rbllj2-3-8-0 {
   0% {
     transform: translateX(-4px);
     opacity: 0.2;
@@ -8,7 +8,7 @@
     opacity: 1;
   }
 }
-@keyframes _3rbllj3-3-7-1 {
+@keyframes _3rbllj3-3-8-0 {
   0% {
     transform: translateX(4px);
     opacity: 0.2;
@@ -18,7 +18,7 @@
     opacity: 1;
   }
 }
-._3rbllj4-3-7-1 {
+._3rbllj4-3-8-0 {
   opacity: 0;
   height: 100%;
   position: absolute;
@@ -34,29 +34,29 @@
   animation-delay: 0.2s;
   animation-fill-mode: forwards;
 }
-._3rbllj5-3-7-1 {
+._3rbllj5-3-8-0 {
   left: 0;
-  animation-name: _3rbllj2-3-7-1;
+  animation-name: _3rbllj2-3-8-0;
 }
-._3rbllj6-3-7-1 {
+._3rbllj6-3-8-0 {
   right: 0;
-  animation-name: _3rbllj3-3-7-1;
+  animation-name: _3rbllj3-3-8-0;
 }
-._3rbllj7-3-7-1 {
+._3rbllj7-3-8-0 {
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._3rbllj7-3-7-1:hover {
+._3rbllj7-3-8-0:hover {
   color: var(--dt-colors-icon-neutral-subdued-hover, #434465);
 }
-._3rbllj7-3-7-1:active {
+._3rbllj7-3-8-0:active {
   color: var(--dt-colors-icon-neutral-subdued-active, #2f2f4f);
 }
-._3rbllj5-3-7-1 ~ div {
-  --_3rbllj0-3-7-1: rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 1) 40px;
+._3rbllj5-3-8-0 ~ div {
+  --_3rbllj0-3-8-0: rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 1) 40px;
 }
-._3rbllj6-3-7-1 ~ div {
-  --_3rbllj1-3-7-1: rgba(0, 0, 0, 1) calc(100% - 40px), rgba(0, 0, 0, 0) calc(100% - 12px);
+._3rbllj6-3-8-0 ~ div {
+  --_3rbllj1-3-8-0: rgba(0, 0, 0, 1) calc(100% - 40px), rgba(0, 0, 0, 0) calc(100% - 12px);
 }
-._3rbllj4-3-7-1 ~ div {
-  mask: linear-gradient(90deg, var(--_3rbllj0-3-7-1, rgba(0,0,0,1) 0%), var(--_3rbllj1-3-7-1, rgba(0,0,0,1) 0%));
+._3rbllj4-3-8-0 ~ div {
+  mask: linear-gradient(90deg, var(--_3rbllj0-3-8-0, rgba(0,0,0,1) 0%), var(--_3rbllj1-3-8-0, rgba(0,0,0,1) 0%));
 }

package/charts/core/components/axes/components/PanningControls/PanningControls.sty.js

@@ -23,5 +23,5 @@ __export(PanningControls_css_exports, {
 module.exports = __toCommonJS(PanningControls_css_exports);
 var import_PanningControls_css_ts_vanilla = require("./PanningControls.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var panningArrow = "_3rbllj7-3-7-1";
-var panningButtons = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_3rbllj4-3-7-1", variantClassNames: { direction: { toLeft: "_3rbllj5-3-7-1", toRight: "_3rbllj6-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
+var panningArrow = "_3rbllj7-3-8-0";
+var panningButtons = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_3rbllj4-3-8-0", variantClassNames: { direction: { toLeft: "_3rbllj5-3-8-0", toRight: "_3rbllj6-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/axes/components/TickLabel.d.ts

@@ -1,5 +1,5 @@
-import { TickRendererProps } from '@visx/axis';
 import type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';
+import type { TickRendererProps } from '../types.js';
 interface TickLabelProps extends TickRendererProps {
     foreignObjectInlineStyle: Record<string, string | number>;
     foreignObjectContentInlineStyle: Record<string, string | number>;

package/charts/core/components/axes/components/TimeTableHeaderAxis.js

@@ -21,8 +21,8 @@ __export(TimeTableHeaderAxis_exports, {
 });
 module.exports = __toCommonJS(TimeTableHeaderAxis_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_scale = require("@visx/scale");
 var import_DivAxisWrapper = require("./DivAxisWrapper.js");
+var import_get_ticks = require("../../../../../core/utils/get-ticks.js");
 var import_format_date_ticks = require("../../../utils/format-date-ticks.js");
 var import_format_value = require("../../../utils/format-value.js");
 var import_ticks = require("../../../utils/ticks.js");
@@ -32,7 +32,7 @@ var import_get_tick_label_props = require("../utils/get-tick-label-props.js");
 const TimeTableHeaderAxis = (props) => {
   const { scale, containerWidth, containerHeight, stroke, min, max } = props;
   const numTicks = (0, import_ticks.getGanttHorizontalTimeAxisNumTicks)(containerWidth);
-  const ticks = (0, import_scale.getTicks)(scale, numTicks);
+  const ticks = (0, import_get_ticks.getTicks)(scale, numTicks);
   const tickValues = (0, import_format_value.getTickValues)(
     ticks,
     import_format_date_ticks.formatDateTicks

package/charts/core/components/axes/components/ValueTableHeaderAxis.js

@@ -21,8 +21,8 @@ __export(ValueTableHeaderAxis_exports, {
 });
 module.exports = __toCommonJS(ValueTableHeaderAxis_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_scale = require("@visx/scale");
 var import_DivAxisWrapper = require("./DivAxisWrapper.js");
+var import_get_ticks = require("../../../../../core/utils/get-ticks.js");
 var import_format_value = require("../../../utils/format-value.js");
 var import_ticks = require("../../../utils/ticks.js");
 var import_AxisTableHeader = require("../AxisTableHeader.js");
@@ -39,7 +39,7 @@ const ValueTableHeaderAxis = (props) => {
     max
   } = props;
   const numTicks = (0, import_ticks.getHorizontalNumTicks)(containerWidth);
-  const ticks = (0, import_scale.getTicks)(scale, numTicks);
+  const ticks = (0, import_get_ticks.getTicks)(scale, numTicks);
   const tickValues = (0, import_format_value.getTickValues)(ticks, formatter);
   const tickFormat = (_, index) => tickValues[index];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/charts/core/components/axes/constants.d.ts

@@ -1,6 +1,5 @@
 import { TextPropsRequired } from './types.js';
 import type { MappedObject } from '../../types/helpers/mapped-object.js';
-export declare const AXIS_TICK_LENGTH = 0;
 export declare const X_AXES_TICK_LINE_OFFSET = 4;
 export declare const Y_AXES_TICK_LINE_OFFSET = 6;
 export declare const AXIS_LABEL_HEIGHT = 12;

package/charts/core/components/axes/constants.js

@@ -28,7 +28,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var constants_exports = {};
 __export(constants_exports, {
   AXIS_LABEL_HEIGHT: () => AXIS_LABEL_HEIGHT,
-  AXIS_TICK_LENGTH: () => AXIS_TICK_LENGTH,
   BOTTOM_AXIS_LINE_OFFSET: () => BOTTOM_AXIS_LINE_OFFSET,
   DEFAULT_AXIS_FONT_COLOR: () => DEFAULT_AXIS_FONT_COLOR,
   EMOJI_REGEX: () => EMOJI_REGEX,
@@ -52,7 +51,6 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
 var import_typography = __toESM(require("@dynatrace/strato-design-tokens/typography"));
-const AXIS_TICK_LENGTH = 0;
 const X_AXES_TICK_LINE_OFFSET = 4;
 const Y_AXES_TICK_LINE_OFFSET = 6;
 const AXIS_LABEL_HEIGHT = 12;

package/charts/core/components/axes/types.d.ts

@@ -1,6 +1,52 @@
-import { AxisScale, SharedAxisProps } from '@visx/axis';
-import type { SVGAttributes } from 'react';
-import { TextProps } from '../../types/text-props.js';
+import type { ReactNode, Ref, SVGAttributes } from 'react';
+import { TextProps, TickLabelProps } from '../../types/text-props.js';
+type NumberLike = {
+    valueOf(): number;
+};
+type AxisScaleOutput = number | NumberLike | undefined;
+type D3ScaleLike<Output> = {
+    (input: any): Output;
+    domain(): any[];
+    range(): any[];
+    copy(): D3ScaleLike<Output>;
+};
+/**
+ * @internal
+ */
+export type AxisScale<Output extends AxisScaleOutput = AxisScaleOutput> = D3ScaleLike<Output>;
+/**
+ * @internal
+ */
+export type TickRendererProps = Partial<TextProps> & {
+    x: number;
+    y: number;
+    formattedValue: string | undefined;
+};
+/**
+ * @internal
+ */
+export interface SharedAxisProps<Scale extends AxisScale> {
+    scale: Scale;
+    orientation?: Orientation;
+    tickFormat?: (value: any, index: number, values: any) => string;
+    tickValues?: readonly any[];
+    numTicks?: number;
+    tickLabelProps?: Partial<TextProps> | TickLabelProps<any>;
+    tickComponent?: (props: TickRendererProps) => ReactNode;
+    label?: string;
+    labelProps?: Partial<TextProps>;
+    labelOffset?: number;
+    labelClassName?: string;
+    rangePadding?: number;
+    hideZero?: boolean;
+    left?: number;
+    top?: number;
+    axisClassName?: string;
+    innerRef?: Ref<SVGGElement>;
+    hideTicks?: boolean;
+    hideAxisLine?: boolean;
+    tickLength?: number;
+}
 /**
  * @internal
  */
@@ -49,3 +95,4 @@ export type TextPropsRequired = Required<Pick<TextProps, 'fill' | 'fontFamily'>>
  * @internal
  */
 export type TickCategory = Record<string, string>;
+export {};

package/charts/core/components/axes/utils/get-tick-label-props.d.ts

@@ -2,30 +2,8 @@ import type { AnyScale } from '../../../types/scales.js';
 import { TickLabelProps } from '../../../types/text-props.js';
 import { TickPrimitiveValue } from '../../../types/tick-value.js';
 import { Orientation, TickLabelLayout } from '../types.js';
-/**
- * Returns tick label props for the bottom axis with domain-aware alignment.
- *
- * Only ticks whose value exactly matches a domain boundary receive edge alignment
- * (`start` for domainMin, `end` for domainMax). All other ticks are center-aligned
- * (`middle`), preventing outermost rendered ticks that don't coincide with domain
- * extremes from being clipped against the chart edge.
- *
- * @param domainMin - domain start as a number (use `+` to convert Date values)
- * @param domainMax - domain end as a number (use `+` to convert Date values)
- */
-export declare const getBottomTickLabelPropsWithDomainAlignment: (domainMin: number, domainMax: number) => TickLabelProps<TickPrimitiveValue>;
 export declare const ELLIPSIS_BUFFER = 2;
-/**
- * Returns tick label props for the top axis with domain-aware alignment.
- *
- * Mirrors `getBottomTickLabelPropsWithDomainAlignment` for the top position:
- * only ticks whose value exactly matches a domain boundary receive edge alignment
- * (`start` for domainMin, `end` for domainMax). All other ticks are center-aligned.
- *
- * @param domainMin - domain start as a number (use `+` to convert Date values)
- * @param domainMax - domain end as a number (use `+` to convert Date values)
- */
-export declare const getTopTickLabelPropsWithDomainAlignment: (domainMin: number, domainMax: number) => TickLabelProps<TickPrimitiveValue>;
+export declare function getYAxisTickLabelProps(position: 'left' | 'right', isCategoricalAxis: boolean, scale: AnyScale | undefined): TickLabelProps<TickPrimitiveValue>;
 export declare const getTickLabelPropsForCategoryAxis: (orientation: Orientation, tickLabelLayout?: TickLabelLayout) => TickLabelProps<TickPrimitiveValue>;
 export declare const bottomTickLabelDateProps: TickLabelProps<Date>;
 export declare const bottomPanTickLabelDateProps: TickLabelProps<Date>;

package/charts/core/components/axes/utils/get-tick-label-props.js

@@ -20,15 +20,14 @@ __export(get_tick_label_props_exports, {
   ELLIPSIS_BUFFER: () => ELLIPSIS_BUFFER,
   bottomPanTickLabelDateProps: () => bottomPanTickLabelDateProps,
   bottomTickLabelDateProps: () => bottomTickLabelDateProps,
-  getBottomTickLabelPropsWithDomainAlignment: () => getBottomTickLabelPropsWithDomainAlignment,
   getTickLabelPropsForCategoryAxis: () => getTickLabelPropsForCategoryAxis,
   getTickLabelPropsForGanttAxis: () => getTickLabelPropsForGanttAxis,
   getTickLabelPropsForValueAxis: () => getTickLabelPropsForValueAxis,
-  getTopTickLabelPropsWithDomainAlignment: () => getTopTickLabelPropsWithDomainAlignment,
-  getXAxisTickLabelProps: () => getXAxisTickLabelProps
+  getXAxisTickLabelProps: () => getXAxisTickLabelProps,
+  getYAxisTickLabelProps: () => getYAxisTickLabelProps
 });
 module.exports = __toCommonJS(get_tick_label_props_exports);
-var import_get_tick_value_as_number = require("../../../utils/get-tick-value-as-number.js");
+var import_get_tick_value_as_number = require("../../../../../core/utils/get-tick-value-as-number.js");
 var import_constants = require("../constants.js");
 const getBottomTickLabelPropsWithDomainAlignment = (domainMin, domainMax) => {
   return (value) => {
@@ -123,6 +122,48 @@ const getTopTickLabelPropsWithDomainAlignment = (domainMin, domainMax) => {
     };
   };
 };
+const getLeftTickLabelPropsWithDomainAlignment = (domainMin, domainMax) => {
+  return (value) => {
+    const numericValue = (0, import_get_tick_value_as_number.getTickValueAsNumber)(value);
+    let verticalAnchor = import_constants.TICK_ALIGMENT.Middle;
+    if (numericValue === domainMin) {
+      verticalAnchor = import_constants.TICK_ALIGMENT.End;
+    } else if (numericValue === domainMax) {
+      verticalAnchor = import_constants.TICK_ALIGMENT.Start;
+    }
+    return {
+      x: -import_constants.Y_AXES_TICK_LINE_OFFSET,
+      textAnchor: import_constants.TICK_ALIGMENT.End,
+      verticalAnchor
+    };
+  };
+};
+const getRightTickLabelPropsWithDomainAlignment = (domainMin, domainMax) => {
+  return (value) => {
+    const numericValue = (0, import_get_tick_value_as_number.getTickValueAsNumber)(value);
+    let verticalAnchor = import_constants.TICK_ALIGMENT.Middle;
+    if (numericValue === domainMin) {
+      verticalAnchor = import_constants.TICK_ALIGMENT.End;
+    } else if (numericValue === domainMax) {
+      verticalAnchor = import_constants.TICK_ALIGMENT.Start;
+    }
+    return {
+      x: +import_constants.Y_AXES_TICK_LINE_OFFSET,
+      textAnchor: import_constants.TICK_ALIGMENT.Start,
+      verticalAnchor
+    };
+  };
+};
+function getYAxisTickLabelProps(position, isCategoricalAxis, scale) {
+  if (isCategoricalAxis) {
+    return getTickLabelPropsForValueAxis(position);
+  }
+  if (scale) {
+    const domain = scale.domain();
+    return position === "left" ? getLeftTickLabelPropsWithDomainAlignment(+domain[0], +domain[1]) : getRightTickLabelPropsWithDomainAlignment(+domain[0], +domain[1]);
+  }
+  return getTickLabelPropsForValueAxis(position);
+}
 const getTickLabelPropsForCategoryAxis = (orientation, tickLabelLayout = "horizontal") => {
   if (orientation === "left") {
     return leftTickCategoricalLabelProps;

package/charts/core/components/chart-grid/ChartGrid.css

@@ -1,13 +1,13 @@
-._13lzg4k0-3-7-1 {
+._13lzg4k0-3-8-0 {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
 }
-._13lzg4k1-3-7-1 {
+._13lzg4k1-3-8-0 {
   box-sizing: content-box;
 }
-._13lzg4k2-3-7-1 {
+._13lzg4k2-3-8-0 {
   position: relative;
 }

package/charts/core/components/chart-grid/ChartGrid.sty.js

@@ -23,6 +23,6 @@ __export(ChartGrid_css_exports, {
 });
 module.exports = __toCommonJS(ChartGrid_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("./ChartGrid.css");
-var area = "_13lzg4k1-3-7-1";
-var plot = "_13lzg4k2-3-7-1";
-var plotLayout = "_13lzg4k0-3-7-1";
+var area = "_13lzg4k1-3-8-0";
+var plot = "_13lzg4k2-3-8-0";
+var plotLayout = "_13lzg4k0-3-8-0";

package/charts/core/components/chart-grid/constants.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Minimum chart grid height (in px) required to display annotations.
+ * Below this threshold, annotations are hidden to prevent visual clipping.
+ * @internal
+ */
+export declare const MIN_HEIGHT_FOR_ANNOTATIONS = 160;
+/**
+ * Minimum chart grid height (in px) required to display top/bottom axes.
+ * Below this threshold, axes are hidden to maximize the plot area.
+ * @internal
+ */
+export declare const MIN_HEIGHT_FOR_AXES = 50;
+/**
+ * Determines whether annotations should be visible based on chart height
+ * and whether annotation tracks exist.
+ * @internal
+ */
+export declare function shouldShowAnnotations(chartGridHeight: number, tracksQuantity: number): boolean;
+/**
+ * Determines whether top/bottom axes should be visible based on chart height.
+ * @internal
+ */
+export declare function shouldShowAxes(chartGridHeight: number): boolean;

package/charts/core/components/chart-grid/constants.js

@@ -0,0 +1,33 @@
+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 constants_exports = {};
+__export(constants_exports, {
+  MIN_HEIGHT_FOR_ANNOTATIONS: () => MIN_HEIGHT_FOR_ANNOTATIONS,
+  MIN_HEIGHT_FOR_AXES: () => MIN_HEIGHT_FOR_AXES,
+  shouldShowAnnotations: () => shouldShowAnnotations,
+  shouldShowAxes: () => shouldShowAxes
+});
+module.exports = __toCommonJS(constants_exports);
+const MIN_HEIGHT_FOR_ANNOTATIONS = 160;
+const MIN_HEIGHT_FOR_AXES = 50;
+function shouldShowAnnotations(chartGridHeight, tracksQuantity) {
+  return tracksQuantity > 0 && chartGridHeight >= MIN_HEIGHT_FOR_ANNOTATIONS;
+}
+function shouldShowAxes(chartGridHeight) {
+  return chartGridHeight >= MIN_HEIGHT_FOR_AXES;
+}