@dynatrace/strato-components 3.13.3 → 3.14.1

package/esm/charts/core/components/canvas/Canvas.js

@@ -53,17 +53,13 @@ const Canvas = memo(
         prevHeight: 0,
         prevWidth: 0
       });
-      useImperativeHandle(
-        ref,
-        () => {
-          return {
-            customSetStyle: (key, value) => {
-              canvasRef.current?.style.setProperty(key, value);
-            }
-          };
-        },
-        []
-      );
+      useImperativeHandle(ref, () => {
+        return {
+          customSetStyle: (key, value) => {
+            canvasRef.current?.style.setProperty(key, value);
+          }
+        };
+      }, []);
       const isReady = useDeferredValue(width > MIN_WIDTH_CANVAS);
       useEffect(() => {
         if (!isReady || !canvasRef) {

package/esm/charts/core/components/canvas/Canvas.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/canvas/Canvas.tsx"],
-  "sourcesContent": ["import {\n  memo,\n  useContext,\n  useEffect,\n  type ReactNode,\n  useRef,\n  useDeferredValue,\n  forwardRef,\n  useImperativeHandle,\n  type RefObject,\n} from 'react';\n\nimport { CanvasContext } from './CanvasContext.js';\nimport { CanvasShape } from './types/canvas-shape.js';\n\nconst setupCanvas = (\n  canvasElement: HTMLCanvasElement,\n  width: number,\n  height: number,\n): CanvasRenderingContext2D | null => {\n  //* Get the device pixel ratio, falling back to 1. */\n  const dpr = Math.max(1, window.devicePixelRatio) || 1;\n\n  /**\n   * Give the canvasElement pixel dimensions of\n   * their CSS size * the device pixel ratio.\n   */\n  canvasElement.width = width * dpr;\n  canvasElement.height = height * dpr;\n\n  const context = canvasElement.getContext('2d');\n\n  /**\n   * Scale all drawing operations by the dpr, so you\n   * don't have to worry about the difference.\n   */\n  context?.scale(dpr, dpr);\n\n  /** Set the \"drawn\" size of the canvas */\n  canvasElement.style.width = '100%';\n  canvasElement.style.height = '100%';\n\n  return context;\n};\n\n/** Draw the shape */\nconst draw = (\n  canvasElement: HTMLCanvasElement | null,\n  context: CanvasRenderingContext2D,\n  shapeRefs: RefObject<CanvasShape>[],\n) => {\n  if (!canvasElement) {\n    return;\n  }\n\n  if (context) {\n    /** Clear the last draw */\n    context.clearRect(0, 0, canvasElement.width, canvasElement.height);\n\n    shapeRefs.forEach((ref) => {\n      ref.current?.draw(context, ref.current.id);\n    });\n  }\n};\n\ntype CurrentContext = {\n  ctx: CanvasRenderingContext2D | null;\n  prevHeight: number;\n  prevWidth: number;\n};\n\nfunction ensureCanvasContext(\n  currentCtx: CurrentContext,\n  canvasRef: RefObject<HTMLCanvasElement | null>,\n  width: number,\n  height: number,\n) {\n  if (\n    !currentCtx.ctx ||\n    currentCtx.prevHeight !== height ||\n    currentCtx.prevWidth !== width\n  ) {\n    if (canvasRef.current) {\n      currentCtx.ctx = setupCanvas(canvasRef.current, width, height);\n    } else {\n      currentCtx.ctx = null;\n    }\n    currentCtx.prevHeight = height;\n    currentCtx.prevWidth = width;\n  }\n}\n\ntype CanvasProps = {\n  children?: ReactNode;\n  width: number;\n  height: number;\n};\n\nconst MIN_WIDTH_CANVAS = 15;\n\nexport type CanvasRef = Partial<HTMLCanvasElement> & {\n  customSetStyle: (key: string, value: string) => void;\n};\n\nexport const Canvas = memo(\n  forwardRef<CanvasRef, CanvasProps>(\n    ({ children, ...props }: CanvasProps, ref) => {\n      const { height, width } = props;\n      const canvasRef = useRef<HTMLCanvasElement>(null);\n      const { shapeRefs } = useContext(CanvasContext);\n      const contextRef = useRef<CurrentContext>({\n        ctx: null,\n        prevHeight: 0,\n        prevWidth: 0,\n      });\n\n      useImperativeHandle(\n        ref,\n        () => {\n          return {\n            customSetStyle: (key: string, value: string) => {\n              canvasRef.current?.style.setProperty(key, value);\n            },\n          };\n        },\n        [],\n      );\n\n      /**\n       * We use a deferred value to avoid unnecessary renders\n       * when the width and height are not yet available.\n       * This is useful for perceived performance.\n       * We will add a minimum size stated on MIN_WIDTH_CANVAS,\n       * where we consider some left overs. In some charts width is never exactly 0; that means when a width is very low\n       * (e.g. < 15px) it effectively corresponds to \u201Cnot ready\u201D (the chart layout\n       * is still loading or not fully plotted).\n       *\n       * Extra clarification:\n       * - MIN_WIDTH_CANVAS is a guard against transient layout states and\n       *   intermediate measurements while parents are still sizing.\n       * - Very small widths typically come from initial mount, collapsed containers,\n       *   or placeholder phases; skipping work avoids unnecessary canvas setup/draw.\n       * - Once width > MIN_WIDTH_CANVAS, we consider the layout stable enough\n       *   to initialize and render shapes.\n       */\n      const isReady = useDeferredValue(width > MIN_WIDTH_CANVAS);\n\n      /**\n       * Interacting with our canvas produces \u201Cside effects\u201D\n       * which isn\u2019t allowed from within the render phase of a React component.\n       * In order to avoid extra effects, it won't execute if canvas have no width && height\n       * It must be setup using a useEffect hook.\n       */\n      useEffect(() => {\n        if (!isReady || !canvasRef) {\n          return;\n        }\n\n        ensureCanvasContext(contextRef.current, canvasRef, width, height);\n\n        if (contextRef.current.ctx) {\n          const shapes = [...shapeRefs.values()];\n          requestAnimationFrame(() => {\n            if (contextRef.current.ctx) {\n              draw(canvasRef.current, contextRef.current.ctx, shapes);\n            }\n          });\n        }\n\n        // To make it more reactive, we won't clear the previously triggered draw.\n        // FYI: https://bitbucket.lab.dynatrace.org/projects/APPFW/repos/design-system/pull-requests/5428/overview\n        // return () => {\n        //   drawId && cancelAnimationFrame(drawId);\n        // };\n      });\n\n      return <canvas ref={canvasRef}>{children}</canvas>;\n    },\n  ),\n);\n"],
-  "mappings": "AAgLa;AAhLb;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,qBAAqB;AAG9B,MAAM,cAAc,CAClB,eACA,OACA,WACoC;AAEpC,QAAM,MAAM,KAAK,IAAI,GAAG,OAAO,gBAAgB,KAAK;AAMpD,gBAAc,QAAQ,QAAQ;AAC9B,gBAAc,SAAS,SAAS;AAEhC,QAAM,UAAU,cAAc,WAAW,IAAI;AAM7C,WAAS,MAAM,KAAK,GAAG;AAGvB,gBAAc,MAAM,QAAQ;AAC5B,gBAAc,MAAM,SAAS;AAE7B,SAAO;AACT;AAGA,MAAM,OAAO,CACX,eACA,SACA,cACG;AACH,MAAI,CAAC,eAAe;AAClB;AAAA,EACF;AAEA,MAAI,SAAS;AAEX,YAAQ,UAAU,GAAG,GAAG,cAAc,OAAO,cAAc,MAAM;AAEjE,cAAU,QAAQ,CAAC,QAAQ;AACzB,UAAI,SAAS,KAAK,SAAS,IAAI,QAAQ,EAAE;AAAA,IAC3C,CAAC;AAAA,EACH;AACF;AAQA,SAAS,oBACP,YACA,WACA,OACA,QACA;AACA,MACE,CAAC,WAAW,OACZ,WAAW,eAAe,UAC1B,WAAW,cAAc,OACzB;AACA,QAAI,UAAU,SAAS;AACrB,iBAAW,MAAM,YAAY,UAAU,SAAS,OAAO,MAAM;AAAA,IAC/D,OAAO;AACL,iBAAW,MAAM;AAAA,IACnB;AACA,eAAW,aAAa;AACxB,eAAW,YAAY;AAAA,EACzB;AACF;AAQA,MAAM,mBAAmB;AAMlB,MAAM,SAAS;AAAA,EACpB;AAAA,IACE,CAAC,EAAE,UAAU,GAAG,MAAM,GAAgB,QAAQ;AAC5C,YAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,YAAM,YAAY,OAA0B,IAAI;AAChD,YAAM,EAAE,UAAU,IAAI,WAAW,aAAa;AAC9C,YAAM,aAAa,OAAuB;AAAA,QACxC,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,WAAW;AAAA,MACb,CAAC;AAED;AAAA,QACE;AAAA,QACA,MAAM;AACJ,iBAAO;AAAA,YACL,gBAAgB,CAAC,KAAa,UAAkB;AAC9C,wBAAU,SAAS,MAAM,YAAY,KAAK,KAAK;AAAA,YACjD;AAAA,UACF;AAAA,QACF;AAAA,QACA,CAAC;AAAA,MACH;AAmBA,YAAM,UAAU,iBAAiB,QAAQ,gBAAgB;AAQzD,gBAAU,MAAM;AACd,YAAI,CAAC,WAAW,CAAC,WAAW;AAC1B;AAAA,QACF;AAEA,4BAAoB,WAAW,SAAS,WAAW,OAAO,MAAM;AAEhE,YAAI,WAAW,QAAQ,KAAK;AAC1B,gBAAM,SAAS,CAAC,GAAG,UAAU,OAAO,CAAC;AACrC,gCAAsB,MAAM;AAC1B,gBAAI,WAAW,QAAQ,KAAK;AAC1B,mBAAK,UAAU,SAAS,WAAW,QAAQ,KAAK,MAAM;AAAA,YACxD;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MAOF,CAAC;AAED,aAAO,oBAAC,YAAO,KAAK,WAAY,UAAS;AAAA,IAC3C;AAAA,EACF;AACF;",
+  "sourcesContent": ["import {\n  memo,\n  useContext,\n  useEffect,\n  type ReactNode,\n  useRef,\n  useDeferredValue,\n  forwardRef,\n  useImperativeHandle,\n  type RefObject,\n} from 'react';\n\nimport { CanvasContext } from './CanvasContext.js';\nimport { CanvasShape } from './types/canvas-shape.js';\n\nconst setupCanvas = (\n  canvasElement: HTMLCanvasElement,\n  width: number,\n  height: number,\n): CanvasRenderingContext2D | null => {\n  //* Get the device pixel ratio, falling back to 1. */\n  const dpr = Math.max(1, window.devicePixelRatio) || 1;\n\n  /**\n   * Give the canvasElement pixel dimensions of\n   * their CSS size * the device pixel ratio.\n   */\n  canvasElement.width = width * dpr;\n  canvasElement.height = height * dpr;\n\n  const context = canvasElement.getContext('2d');\n\n  /**\n   * Scale all drawing operations by the dpr, so you\n   * don't have to worry about the difference.\n   */\n  context?.scale(dpr, dpr);\n\n  /** Set the \"drawn\" size of the canvas */\n  canvasElement.style.width = '100%';\n  canvasElement.style.height = '100%';\n\n  return context;\n};\n\n/** Draw the shape */\nconst draw = (\n  canvasElement: HTMLCanvasElement | null,\n  context: CanvasRenderingContext2D,\n  shapeRefs: RefObject<CanvasShape>[],\n) => {\n  if (!canvasElement) {\n    return;\n  }\n\n  if (context) {\n    /** Clear the last draw */\n    context.clearRect(0, 0, canvasElement.width, canvasElement.height);\n\n    shapeRefs.forEach((ref) => {\n      ref.current?.draw(context, ref.current.id);\n    });\n  }\n};\n\ntype CurrentContext = {\n  ctx: CanvasRenderingContext2D | null;\n  prevHeight: number;\n  prevWidth: number;\n};\n\nfunction ensureCanvasContext(\n  currentCtx: CurrentContext,\n  canvasRef: RefObject<HTMLCanvasElement | null>,\n  width: number,\n  height: number,\n) {\n  if (\n    !currentCtx.ctx ||\n    currentCtx.prevHeight !== height ||\n    currentCtx.prevWidth !== width\n  ) {\n    if (canvasRef.current) {\n      currentCtx.ctx = setupCanvas(canvasRef.current, width, height);\n    } else {\n      currentCtx.ctx = null;\n    }\n    currentCtx.prevHeight = height;\n    currentCtx.prevWidth = width;\n  }\n}\n\ntype CanvasProps = {\n  children?: ReactNode;\n  width: number;\n  height: number;\n};\n\nconst MIN_WIDTH_CANVAS = 15;\n\nexport type CanvasRef = Partial<HTMLCanvasElement> & {\n  customSetStyle: (key: string, value: string) => void;\n};\n\nexport const Canvas = memo(\n  forwardRef<CanvasRef, CanvasProps>(\n    ({ children, ...props }: CanvasProps, ref) => {\n      const { height, width } = props;\n      const canvasRef = useRef<HTMLCanvasElement>(null);\n      const { shapeRefs } = useContext(CanvasContext);\n      const contextRef = useRef<CurrentContext>({\n        ctx: null,\n        prevHeight: 0,\n        prevWidth: 0,\n      });\n\n      useImperativeHandle(ref, () => {\n        return {\n          customSetStyle: (key: string, value: string) => {\n            canvasRef.current?.style.setProperty(key, value);\n          },\n        };\n      }, []);\n\n      /**\n       * We use a deferred value to avoid unnecessary renders\n       * when the width and height are not yet available.\n       * This is useful for perceived performance.\n       * We will add a minimum size stated on MIN_WIDTH_CANVAS,\n       * where we consider some left overs. In some charts width is never exactly 0; that means when a width is very low\n       * (e.g. < 15px) it effectively corresponds to \u201Cnot ready\u201D (the chart layout\n       * is still loading or not fully plotted).\n       *\n       * Extra clarification:\n       * - MIN_WIDTH_CANVAS is a guard against transient layout states and\n       *   intermediate measurements while parents are still sizing.\n       * - Very small widths typically come from initial mount, collapsed containers,\n       *   or placeholder phases; skipping work avoids unnecessary canvas setup/draw.\n       * - Once width > MIN_WIDTH_CANVAS, we consider the layout stable enough\n       *   to initialize and render shapes.\n       */\n      const isReady = useDeferredValue(width > MIN_WIDTH_CANVAS);\n\n      /**\n       * Interacting with our canvas produces \u201Cside effects\u201D\n       * which isn\u2019t allowed from within the render phase of a React component.\n       * In order to avoid extra effects, it won't execute if canvas have no width && height\n       * It must be setup using a useEffect hook.\n       */\n      useEffect(() => {\n        if (!isReady || !canvasRef) {\n          return;\n        }\n\n        ensureCanvasContext(contextRef.current, canvasRef, width, height);\n\n        if (contextRef.current.ctx) {\n          const shapes = [...shapeRefs.values()];\n          requestAnimationFrame(() => {\n            if (contextRef.current.ctx) {\n              draw(canvasRef.current, contextRef.current.ctx, shapes);\n            }\n          });\n        }\n\n        // To make it more reactive, we won't clear the previously triggered draw.\n        // FYI: https://bitbucket.lab.dynatrace.org/projects/APPFW/repos/design-system/pull-requests/5428/overview\n        // return () => {\n        //   drawId && cancelAnimationFrame(drawId);\n        // };\n      });\n\n      return <canvas ref={canvasRef}>{children}</canvas>;\n    },\n  ),\n);\n"],
+  "mappings": "AA4Ka;AA5Kb;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,qBAAqB;AAG9B,MAAM,cAAc,CAClB,eACA,OACA,WACoC;AAEpC,QAAM,MAAM,KAAK,IAAI,GAAG,OAAO,gBAAgB,KAAK;AAMpD,gBAAc,QAAQ,QAAQ;AAC9B,gBAAc,SAAS,SAAS;AAEhC,QAAM,UAAU,cAAc,WAAW,IAAI;AAM7C,WAAS,MAAM,KAAK,GAAG;AAGvB,gBAAc,MAAM,QAAQ;AAC5B,gBAAc,MAAM,SAAS;AAE7B,SAAO;AACT;AAGA,MAAM,OAAO,CACX,eACA,SACA,cACG;AACH,MAAI,CAAC,eAAe;AAClB;AAAA,EACF;AAEA,MAAI,SAAS;AAEX,YAAQ,UAAU,GAAG,GAAG,cAAc,OAAO,cAAc,MAAM;AAEjE,cAAU,QAAQ,CAAC,QAAQ;AACzB,UAAI,SAAS,KAAK,SAAS,IAAI,QAAQ,EAAE;AAAA,IAC3C,CAAC;AAAA,EACH;AACF;AAQA,SAAS,oBACP,YACA,WACA,OACA,QACA;AACA,MACE,CAAC,WAAW,OACZ,WAAW,eAAe,UAC1B,WAAW,cAAc,OACzB;AACA,QAAI,UAAU,SAAS;AACrB,iBAAW,MAAM,YAAY,UAAU,SAAS,OAAO,MAAM;AAAA,IAC/D,OAAO;AACL,iBAAW,MAAM;AAAA,IACnB;AACA,eAAW,aAAa;AACxB,eAAW,YAAY;AAAA,EACzB;AACF;AAQA,MAAM,mBAAmB;AAMlB,MAAM,SAAS;AAAA,EACpB;AAAA,IACE,CAAC,EAAE,UAAU,GAAG,MAAM,GAAgB,QAAQ;AAC5C,YAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,YAAM,YAAY,OAA0B,IAAI;AAChD,YAAM,EAAE,UAAU,IAAI,WAAW,aAAa;AAC9C,YAAM,aAAa,OAAuB;AAAA,QACxC,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,WAAW;AAAA,MACb,CAAC;AAED,0BAAoB,KAAK,MAAM;AAC7B,eAAO;AAAA,UACL,gBAAgB,CAAC,KAAa,UAAkB;AAC9C,sBAAU,SAAS,MAAM,YAAY,KAAK,KAAK;AAAA,UACjD;AAAA,QACF;AAAA,MACF,GAAG,CAAC,CAAC;AAmBL,YAAM,UAAU,iBAAiB,QAAQ,gBAAgB;AAQzD,gBAAU,MAAM;AACd,YAAI,CAAC,WAAW,CAAC,WAAW;AAC1B;AAAA,QACF;AAEA,4BAAoB,WAAW,SAAS,WAAW,OAAO,MAAM;AAEhE,YAAI,WAAW,QAAQ,KAAK;AAC1B,gBAAM,SAAS,CAAC,GAAG,UAAU,OAAO,CAAC;AACrC,gCAAsB,MAAM;AAC1B,gBAAI,WAAW,QAAQ,KAAK;AAC1B,mBAAK,UAAU,SAAS,WAAW,QAAQ,KAAK,MAAM;AAAA,YACxD;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MAOF,CAAC;AAED,aAAO,oBAAC,YAAO,KAAK,WAAY,UAAS;AAAA,IAC3C;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/core/components/canvas/types/canvas-shape.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/canvas/types/canvas-shape.ts"],
-  "sourcesContent": ["import { SeriesCurve } from '../../../types/timeseries.js';\nimport type { PointShapeType } from '../../shape/type.js';\nimport { CanvasGradientGenerator } from '../utils/create-canvas-gradient.js';\n\n/**\n * @param ctx - canvas context\n * @param id - shapeId\n * @returns -\n */\nexport type CanvasDraw = (ctx: CanvasRenderingContext2D, id?: string) => void;\n\nexport type CanvasShape = {\n  id: string;\n  /** Handler containing the drawing logic of the shape **/\n  draw: CanvasDraw;\n};\n\ninterface CanvasInstance<Datum> {\n  canvasWidth: number;\n  canvasHeight: number;\n  data: Datum[];\n  strokeColor?: (d: Datum) => string;\n  displayScatterPlot?: (data: Datum[], index: number) => boolean;\n  defined?: (point: Datum) => boolean;\n}\n\ninterface CanvasColor<Datum> {\n  color: (point: Datum) => string;\n}\n\ninterface BarCanvasColor<Datum> extends CanvasColor<Datum> {\n  opacity: (point: Datum) => number;\n}\n\ninterface LinearCanvasColor<Datum> extends CanvasColor<Datum> {\n  opacity?: number;\n}\n\ninterface CanvasGradientColor<Datum> {\n  color: (d: Datum) => string | CanvasGradientGenerator;\n  opacity?: number;\n}\n\nexport interface LineCanvasInstance<Datum>\n  extends CanvasInstance<Datum>,\n    LinearCanvasColor<Datum> {\n  x: (d: Datum) => number;\n  y: (d: Datum) => number;\n  curve?: SeriesCurve;\n}\n\nexport interface DotCanvasInstance<Datum>\n  extends CanvasInstance<Datum>,\n    LinearCanvasColor<Datum> {\n  x: (d: Datum) => number;\n  y: (d: Datum) => number;\n}\n\nexport interface BarCanvasInstance<Datum>\n  extends CanvasInstance<Datum>,\n    BarCanvasColor<Datum> {\n  x: (d: Datum, index: number) => number;\n  y: (d: Datum, index: number) => number;\n  width: (d: Datum) => number;\n  height: (d: Datum) => number;\n  isVertical?: boolean;\n}\n\nexport const ORIENTATION_VERTICAL = 'vertical';\nexport const ORIENTATION_HORIZONTAL = 'horizontal';\n\nexport type Orientation =\n  | typeof ORIENTATION_VERTICAL\n  | typeof ORIENTATION_HORIZONTAL;\n\nexport interface AreaCanvasInstance<Datum>\n  extends CanvasInstance<Datum>,\n    CanvasGradientColor<Datum> {\n  x: (point: Datum) => number;\n  y0: (point: Datum) => number;\n  y1: (point: Datum) => number;\n  lineColor?: (point: Datum) => string;\n  lineStrokeWidth?: number;\n  curve?: SeriesCurve;\n  orientation?: Orientation;\n  showBandedArea?: boolean;\n}\n\ninterface CanvasColorProps<Datum> {\n  color: (point: Datum) => string;\n}\n\ninterface BarCanvasColorProps<Datum> extends CanvasColorProps<Datum> {\n  opacity: (point: Datum) => number;\n}\n\ninterface LinearCanvasColorProps<Datum> extends CanvasColorProps<Datum> {\n  opacity?: number;\n}\n\ninterface CanvasShapeProps<Datum> {\n  data: Datum[];\n  canvasWidth: number;\n  canvasHeight: number;\n  strokeColor?: (point: Datum) => string;\n  strokeWidth?: number;\n}\n\ninterface ShapeWithScatterProps<Datum> {\n  radius?: number;\n  displayScatterPlot?: (data: Datum[], index: number) => boolean;\n  enableDotOverflow?: boolean;\n}\n\nexport interface LineCanvasProps<Datum>\n  extends CanvasShapeProps<Datum>,\n    LinearCanvasColorProps<Datum>,\n    ShapeWithScatterProps<Datum> {\n  x: (point: Datum) => number;\n  y: (point: Datum) => number;\n  defined?: (point: Datum) => boolean;\n  curve?: SeriesCurve;\n  overlayPadding?: number;\n}\n\nexport interface AreaCanvasProps<Datum>\n  extends CanvasShapeProps<Datum>,\n    CanvasGradientColor<Datum>,\n    ShapeWithScatterProps<Datum> {\n  x: (point: Datum) => number;\n  y0: (point: Datum) => number;\n  y1: (point: Datum) => number;\n  defined?: (point: Datum) => boolean;\n  lineColor?: (point: Datum) => string;\n  lineStrokeWidth?: number;\n  curve?: SeriesCurve;\n  enableDotOverflow?: boolean;\n  overlayPadding?: number;\n  orientation?: Orientation;\n  showBandedArea?: boolean;\n}\n\nexport interface BarCanvasProps<Datum>\n  extends CanvasShapeProps<Datum>,\n    BarCanvasColorProps<Datum> {\n  x: (point: Datum, index: number) => number;\n  y: (point: Datum, index: number) => number;\n  width: (point: Datum) => number;\n  height: (point: Datum) => number;\n  isVertical?: boolean;\n  defined?: (point: Datum) => boolean;\n  enableDotOverflow?: boolean;\n  overlayPadding?: number;\n}\n\nexport interface DotCanvasProps<Datum>\n  extends CanvasShapeProps<Datum>,\n    LinearCanvasColorProps<Datum> {\n  //create new type that contains stroke width and color and extend it instead?\n  radius?: number;\n  x: (point: Datum) => number;\n  y: (point: Datum) => number;\n  defined?: (point: Datum) => boolean;\n  shape?: PointShapeType;\n  enableDotOverflow?: boolean;\n}\n\nexport type FnCanvasAccessor<Datum> = (d: Datum, i: number) => number;\n\n/**\n * Whether to show data points always, never, or depending on a width-based threshold amount\n * @public\n */\nexport const pointsDisplayOptions = ['always', 'never', 'auto'] as const;\n/**\n * @public\n */\nexport type PointsDisplay = (typeof pointsDisplayOptions)[number];\n"],
-  "mappings": "AAoEO,MAAM,uBAAuB;AAC7B,MAAM,yBAAyB;AAwG/B,MAAM,uBAAuB,CAAC,UAAU,SAAS,MAAM;",
+  "sourcesContent": ["import { SeriesCurve } from '../../../types/timeseries.js';\nimport type { PointShapeType } from '../../shape/type.js';\nimport { CanvasGradientGenerator } from '../utils/create-canvas-gradient.js';\n\n/**\n * @param ctx - canvas context\n * @param id - shapeId\n * @returns -\n */\nexport type CanvasDraw = (ctx: CanvasRenderingContext2D, id?: string) => void;\n\nexport type CanvasShape = {\n  id: string;\n  /** Handler containing the drawing logic of the shape **/\n  draw: CanvasDraw;\n};\n\ninterface CanvasInstance<Datum> {\n  canvasWidth: number;\n  canvasHeight: number;\n  data: Datum[];\n  strokeColor?: (d: Datum) => string;\n  displayScatterPlot?: (data: Datum[], index: number) => boolean;\n  defined?: (point: Datum) => boolean;\n}\n\ninterface CanvasColor<Datum> {\n  color: (point: Datum) => string;\n}\n\ninterface BarCanvasColor<Datum> extends CanvasColor<Datum> {\n  opacity: (point: Datum) => number;\n}\n\ninterface LinearCanvasColor<Datum> extends CanvasColor<Datum> {\n  opacity?: number;\n}\n\ninterface CanvasGradientColor<Datum> {\n  color: (d: Datum) => string | CanvasGradientGenerator;\n  opacity?: number;\n}\n\nexport interface LineCanvasInstance<Datum>\n  extends CanvasInstance<Datum>, LinearCanvasColor<Datum> {\n  x: (d: Datum) => number;\n  y: (d: Datum) => number;\n  curve?: SeriesCurve;\n}\n\nexport interface DotCanvasInstance<Datum>\n  extends CanvasInstance<Datum>, LinearCanvasColor<Datum> {\n  x: (d: Datum) => number;\n  y: (d: Datum) => number;\n}\n\nexport interface BarCanvasInstance<Datum>\n  extends CanvasInstance<Datum>, BarCanvasColor<Datum> {\n  x: (d: Datum, index: number) => number;\n  y: (d: Datum, index: number) => number;\n  width: (d: Datum) => number;\n  height: (d: Datum) => number;\n  isVertical?: boolean;\n}\n\nexport const ORIENTATION_VERTICAL = 'vertical';\nexport const ORIENTATION_HORIZONTAL = 'horizontal';\n\nexport type Orientation =\n  | typeof ORIENTATION_VERTICAL\n  | typeof ORIENTATION_HORIZONTAL;\n\nexport interface AreaCanvasInstance<Datum>\n  extends CanvasInstance<Datum>, CanvasGradientColor<Datum> {\n  x: (point: Datum) => number;\n  y0: (point: Datum) => number;\n  y1: (point: Datum) => number;\n  lineColor?: (point: Datum) => string;\n  lineStrokeWidth?: number;\n  curve?: SeriesCurve;\n  orientation?: Orientation;\n  showBandedArea?: boolean;\n}\n\ninterface CanvasColorProps<Datum> {\n  color: (point: Datum) => string;\n}\n\ninterface BarCanvasColorProps<Datum> extends CanvasColorProps<Datum> {\n  opacity: (point: Datum) => number;\n}\n\ninterface LinearCanvasColorProps<Datum> extends CanvasColorProps<Datum> {\n  opacity?: number;\n}\n\ninterface CanvasShapeProps<Datum> {\n  data: Datum[];\n  canvasWidth: number;\n  canvasHeight: number;\n  strokeColor?: (point: Datum) => string;\n  strokeWidth?: number;\n}\n\ninterface ShapeWithScatterProps<Datum> {\n  radius?: number;\n  displayScatterPlot?: (data: Datum[], index: number) => boolean;\n  enableDotOverflow?: boolean;\n}\n\nexport interface LineCanvasProps<Datum>\n  extends\n    CanvasShapeProps<Datum>,\n    LinearCanvasColorProps<Datum>,\n    ShapeWithScatterProps<Datum> {\n  x: (point: Datum) => number;\n  y: (point: Datum) => number;\n  defined?: (point: Datum) => boolean;\n  curve?: SeriesCurve;\n  overlayPadding?: number;\n}\n\nexport interface AreaCanvasProps<Datum>\n  extends\n    CanvasShapeProps<Datum>,\n    CanvasGradientColor<Datum>,\n    ShapeWithScatterProps<Datum> {\n  x: (point: Datum) => number;\n  y0: (point: Datum) => number;\n  y1: (point: Datum) => number;\n  defined?: (point: Datum) => boolean;\n  lineColor?: (point: Datum) => string;\n  lineStrokeWidth?: number;\n  curve?: SeriesCurve;\n  enableDotOverflow?: boolean;\n  overlayPadding?: number;\n  orientation?: Orientation;\n  showBandedArea?: boolean;\n}\n\nexport interface BarCanvasProps<Datum>\n  extends CanvasShapeProps<Datum>, BarCanvasColorProps<Datum> {\n  x: (point: Datum, index: number) => number;\n  y: (point: Datum, index: number) => number;\n  width: (point: Datum) => number;\n  height: (point: Datum) => number;\n  isVertical?: boolean;\n  defined?: (point: Datum) => boolean;\n  enableDotOverflow?: boolean;\n  overlayPadding?: number;\n}\n\nexport interface DotCanvasProps<Datum>\n  extends CanvasShapeProps<Datum>, LinearCanvasColorProps<Datum> {\n  //create new type that contains stroke width and color and extend it instead?\n  radius?: number;\n  x: (point: Datum) => number;\n  y: (point: Datum) => number;\n  defined?: (point: Datum) => boolean;\n  shape?: PointShapeType;\n  enableDotOverflow?: boolean;\n}\n\nexport type FnCanvasAccessor<Datum> = (d: Datum, i: number) => number;\n\n/**\n * Whether to show data points always, never, or depending on a width-based threshold amount\n * @public\n */\nexport const pointsDisplayOptions = ['always', 'never', 'auto'] as const;\n/**\n * @public\n */\nexport type PointsDisplay = (typeof pointsDisplayOptions)[number];\n"],
+  "mappings": "AAiEO,MAAM,uBAAuB;AAC7B,MAAM,yBAAyB;AAuG/B,MAAM,uBAAuB,CAAC,UAAU,SAAS,MAAM;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 import "./ChartGrid.css";
-var area = "_13lzg4k1-3-13-3";
-var plot = "_13lzg4k2-3-13-3";
-var plotLayout = "_13lzg4k0-3-13-3";
+var area = "_13lzg4k1-3-14-1";
+var plot = "_13lzg4k2-3-14-1";
+var plotLayout = "_13lzg4k0-3-14-1";
 export {
   area,
   plot,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-grid/ChartGrid.css.ts"],
-  "sourcesContent": ["import './ChartGrid.css';\nexport var area = '_13lzg4k1-3-13-3';\nexport var plot = '_13lzg4k2-3-13-3';\nexport var plotLayout = '_13lzg4k0-3-13-3';"],
+  "sourcesContent": ["import './ChartGrid.css';\nexport var area = '_13lzg4k1-3-14-1';\nexport var plot = '_13lzg4k2-3-14-1';\nexport var plotLayout = '_13lzg4k0-3-14-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;AACX,IAAI,OAAO;AACX,IAAI,aAAa;",
   "names": []
 }

package/esm/charts/core/components/chart-grid/ChartGridPlot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-grid/ChartGridPlot.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, memo } from 'react';\n\n\nimport { plot } from './ChartGrid.sty.js';\nimport { useGridPlotSize } from './hooks/useGridPlotSize.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\n\n/**\n * @internal\n */\nexport const ChartGridPlot = memo(({ children }: PropsWithChildren) => {\n  const { ref } = useGridPlotSize();\n\n  return (\n    <Grid<'div'> ref={ref} className={plot} gridItem gridArea=\"plot\">\n      {children}\n    </Grid>\n  );\n});\n"],
-  "mappings": "AAcI;AAdJ,SAAiC,YAAY;AAG7C,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,YAAY;AAKd,MAAM,gBAAgB,KAAK,CAAC,EAAE,SAAS,MAAyB;AACrE,QAAM,EAAE,IAAI,IAAI,gBAAgB;AAEhC,SACE,oBAAC,QAAY,KAAU,WAAW,MAAM,UAAQ,MAAC,UAAS,QACvD,UACH;AAEJ,CAAC;",
+  "sourcesContent": ["import { type PropsWithChildren, memo } from 'react';\n\nimport { plot } from './ChartGrid.sty.js';\nimport { useGridPlotSize } from './hooks/useGridPlotSize.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\n\n/**\n * @internal\n */\nexport const ChartGridPlot = memo(({ children }: PropsWithChildren) => {\n  const { ref } = useGridPlotSize();\n\n  return (\n    <Grid<'div'> ref={ref} className={plot} gridItem gridArea=\"plot\">\n      {children}\n    </Grid>\n  );\n});\n"],
+  "mappings": "AAaI;AAbJ,SAAiC,YAAY;AAE7C,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,YAAY;AAKd,MAAM,gBAAgB,KAAK,CAAC,EAAE,SAAS,MAAyB;AACrE,QAAM,EAAE,IAAI,IAAI,gBAAgB;AAEhC,SACE,oBAAC,QAAY,KAAU,WAAW,MAAM,UAAQ,MAAC,UAAS,QACvD,UACH;AAEJ,CAAC;",
   "names": []
 }

package/esm/charts/core/components/chart-grid/ChartGridRoot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-grid/ChartGridRoot.tsx"],
-  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useRef } from 'react';\n\n\nimport { ChartGridArea } from './ChartGridArea.js';\nimport { ChartGridPlot } from './ChartGridPlot.js';\nimport { GridPlotSizeProvider } from './providers/GridPlotSizeProvider.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { GridProps, Grid } from '../../../../layouts/grid/Grid.js';\n\n/**\n * @internal\n */\nexport interface ChartGridProps {\n  width: GridProps<'div'>['width'];\n  height: GridProps<'div'>['height'];\n  gridTemplateAreas: string;\n  gridTemplateColumns: string;\n  gridTemplateRows: string;\n}\n\n/**\n *\n * @internal\n * The layout used to have grid on a chart\n */\nexport const ChartGridRoot = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<ChartGridProps>\n>(\n  (\n    {\n      width,\n      height,\n      gridTemplateAreas,\n      gridTemplateColumns,\n      gridTemplateRows,\n      children,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const chartRef = useRef<HTMLDivElement>(null);\n    const mergedRef = useMergeRefs([forwardedRef, chartRef]);\n\n    return (\n      <Grid\n        ref={mergedRef}\n        width={width}\n        height={height}\n        gridTemplateAreas={gridTemplateAreas}\n        gridTemplateColumns={gridTemplateColumns}\n        gridTemplateRows={gridTemplateRows}\n        minHeight=\"min-content\"\n        gap={0}\n        {...props}\n      >\n        <GridPlotSizeProvider>{children}</GridPlotSizeProvider>\n      </Grid>\n    );\n  },\n);\n(ChartGridRoot as typeof ChartGridRoot & { displayName: string }).displayName =\n  'ChartGridRoot';\n\n/** @internal */\nexport const ChartGrid = Object.assign(ChartGridRoot, {\n  PlotArea: ChartGridPlot,\n  GridArea: ChartGridArea,\n});\n"],
-  "mappings": "AAwDQ;AAxDR,SAAS,YAAoC,cAAc;AAG3D,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAoB,YAAY;AAkBzB,MAAM,gBAAgC;AAAA,EAI3C,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,iBACG;AACH,UAAM,WAAW,OAAuB,IAAI;AAC5C,UAAM,YAAY,aAAa,CAAC,cAAc,QAAQ,CAAC;AAEvD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV,KAAK;AAAA,QACJ,GAAG;AAAA,QAEJ,8BAAC,wBAAsB,UAAS;AAAA;AAAA,IAClC;AAAA,EAEJ;AACF;AACC,cAAiE,cAChE;AAGK,MAAM,YAAY,OAAO,OAAO,eAAe;AAAA,EACpD,UAAU;AAAA,EACV,UAAU;AACZ,CAAC;",
+  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { ChartGridArea } from './ChartGridArea.js';\nimport { ChartGridPlot } from './ChartGridPlot.js';\nimport { GridPlotSizeProvider } from './providers/GridPlotSizeProvider.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { GridProps, Grid } from '../../../../layouts/grid/Grid.js';\n\n/**\n * @internal\n */\nexport interface ChartGridProps {\n  width: GridProps<'div'>['width'];\n  height: GridProps<'div'>['height'];\n  gridTemplateAreas: string;\n  gridTemplateColumns: string;\n  gridTemplateRows: string;\n}\n\n/**\n *\n * @internal\n * The layout used to have grid on a chart\n */\nexport const ChartGridRoot = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<ChartGridProps>\n>(\n  (\n    {\n      width,\n      height,\n      gridTemplateAreas,\n      gridTemplateColumns,\n      gridTemplateRows,\n      children,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const chartRef = useRef<HTMLDivElement>(null);\n    const mergedRef = useMergeRefs([forwardedRef, chartRef]);\n\n    return (\n      <Grid\n        ref={mergedRef}\n        width={width}\n        height={height}\n        gridTemplateAreas={gridTemplateAreas}\n        gridTemplateColumns={gridTemplateColumns}\n        gridTemplateRows={gridTemplateRows}\n        minHeight=\"min-content\"\n        gap={0}\n        {...props}\n      >\n        <GridPlotSizeProvider>{children}</GridPlotSizeProvider>\n      </Grid>\n    );\n  },\n);\n(ChartGridRoot as typeof ChartGridRoot & { displayName: string }).displayName =\n  'ChartGridRoot';\n\n/** @internal */\nexport const ChartGrid = Object.assign(ChartGridRoot, {\n  PlotArea: ChartGridPlot,\n  GridArea: ChartGridArea,\n});\n"],
+  "mappings": "AAuDQ;AAvDR,SAAS,YAAoC,cAAc;AAE3D,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAoB,YAAY;AAkBzB,MAAM,gBAAgC;AAAA,EAI3C,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,iBACG;AACH,UAAM,WAAW,OAAuB,IAAI;AAC5C,UAAM,YAAY,aAAa,CAAC,cAAc,QAAQ,CAAC;AAEvD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV,KAAK;AAAA,QACJ,GAAG;AAAA,QAEJ,8BAAC,wBAAsB,UAAS;AAAA;AAAA,IAClC;AAAA,EAEJ;AACF;AACC,cAAiE,cAChE;AAGK,MAAM,YAAY,OAAO,OAAO,eAAe;AAAA,EACpD,UAAU;AAAA,EACV,UAAU;AACZ,CAAC;",
   "names": []
 }

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

@@ -1,14 +1,31 @@
 const MIN_HEIGHT_FOR_ANNOTATIONS = 160;
 const MIN_HEIGHT_FOR_AXES = 50;
+var AnnotationDisplayMode = /* @__PURE__ */ ((AnnotationDisplayMode2) => {
+  AnnotationDisplayMode2["Hidden"] = "hidden";
+  AnnotationDisplayMode2["Compact"] = "compact";
+  AnnotationDisplayMode2["Normal"] = "normal";
+  return AnnotationDisplayMode2;
+})(AnnotationDisplayMode || {});
+function getAnnotationDisplayMode(chartGridHeight, tracksQuantity, compactEnabled = false) {
+  if (tracksQuantity <= 0 || chartGridHeight < MIN_HEIGHT_FOR_AXES) {
+    return "hidden" /* Hidden */;
+  }
+  if (chartGridHeight >= MIN_HEIGHT_FOR_ANNOTATIONS) {
+    return "normal" /* Normal */;
+  }
+  return compactEnabled ? "compact" /* Compact */ : "hidden" /* Hidden */;
+}
 function shouldShowAnnotations(chartGridHeight, tracksQuantity) {
-  return tracksQuantity > 0 && chartGridHeight >= MIN_HEIGHT_FOR_ANNOTATIONS;
+  return getAnnotationDisplayMode(chartGridHeight, tracksQuantity) !== "hidden" /* Hidden */;
 }
 function shouldShowAxes(chartGridHeight) {
   return chartGridHeight >= MIN_HEIGHT_FOR_AXES;
 }
 export {
+  AnnotationDisplayMode,
   MIN_HEIGHT_FOR_ANNOTATIONS,
   MIN_HEIGHT_FOR_AXES,
+  getAnnotationDisplayMode,
   shouldShowAnnotations,
   shouldShowAxes
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-grid/constants.ts"],
-  "sourcesContent": ["/**\n * Minimum chart grid height (in px) required to display annotations.\n * Below this threshold, annotations are hidden to prevent visual clipping.\n * @internal\n */\nexport const MIN_HEIGHT_FOR_ANNOTATIONS = 160;\n\n/**\n * Minimum chart grid height (in px) required to display top/bottom axes.\n * Below this threshold, axes are hidden to maximize the plot area.\n * @internal\n */\nexport const MIN_HEIGHT_FOR_AXES = 50;\n\n/**\n * Determines whether annotations should be visible based on chart height\n * and whether annotation tracks exist.\n * @internal\n */\nexport function shouldShowAnnotations(\n  chartGridHeight: number,\n  tracksQuantity: number,\n): boolean {\n  return tracksQuantity > 0 && chartGridHeight >= MIN_HEIGHT_FOR_ANNOTATIONS;\n}\n\n/**\n * Determines whether top/bottom axes should be visible based on chart height.\n * @internal\n */\nexport function shouldShowAxes(chartGridHeight: number): boolean {\n  return chartGridHeight >= MIN_HEIGHT_FOR_AXES;\n}\n"],
-  "mappings": "AAKO,MAAM,6BAA6B;AAOnC,MAAM,sBAAsB;AAO5B,SAAS,sBACd,iBACA,gBACS;AACT,SAAO,iBAAiB,KAAK,mBAAmB;AAClD;AAMO,SAAS,eAAe,iBAAkC;AAC/D,SAAO,mBAAmB;AAC5B;",
-  "names": []
+  "sourcesContent": ["/**\n * Minimum chart grid height (in px) required to display annotations.\n * Below this threshold, annotations are hidden to prevent visual clipping.\n * @internal\n */\nexport const MIN_HEIGHT_FOR_ANNOTATIONS = 160;\n\n/**\n * Minimum chart grid height (in px) required to display top/bottom axes.\n * Below this threshold, axes are hidden to maximize the plot area.\n * @internal\n */\nexport const MIN_HEIGHT_FOR_AXES = 50;\n\n/**\n * @internal\n */\nexport const enum AnnotationDisplayMode {\n  Hidden = 'hidden',\n  Compact = 'compact',\n  Normal = 'normal',\n}\n\n/**\n * Determines whether annotations should be hidden, compact, or normal based on\n * chart height and whether compact annotations are enabled for the chart.\n * @internal\n */\nexport function getAnnotationDisplayMode(\n  chartGridHeight: number,\n  tracksQuantity: number,\n  compactEnabled: boolean = false,\n): AnnotationDisplayMode {\n  if (tracksQuantity <= 0 || chartGridHeight < MIN_HEIGHT_FOR_AXES) {\n    return AnnotationDisplayMode.Hidden;\n  }\n\n  if (chartGridHeight >= MIN_HEIGHT_FOR_ANNOTATIONS) {\n    return AnnotationDisplayMode.Normal;\n  }\n\n  return compactEnabled\n    ? AnnotationDisplayMode.Compact\n    : AnnotationDisplayMode.Hidden;\n}\n\n/**\n * Determines whether annotations should be visible based on chart height\n * and whether annotation tracks exist.\n * @internal\n */\nexport function shouldShowAnnotations(\n  chartGridHeight: number,\n  tracksQuantity: number,\n): boolean {\n  return (\n    getAnnotationDisplayMode(chartGridHeight, tracksQuantity) !==\n    AnnotationDisplayMode.Hidden\n  );\n}\n\n/**\n * Determines whether top/bottom axes should be visible based on chart height.\n * @internal\n */\nexport function shouldShowAxes(chartGridHeight: number): boolean {\n  return chartGridHeight >= MIN_HEIGHT_FOR_AXES;\n}\n"],
+  "mappings": "AAKO,MAAM,6BAA6B;AAOnC,MAAM,sBAAsB;AAK5B,IAAW,wBAAX,kBAAWA,2BAAX;AACL,EAAAA,uBAAA,YAAS;AACT,EAAAA,uBAAA,aAAU;AACV,EAAAA,uBAAA,YAAS;AAHO,SAAAA;AAAA,GAAA;AAWX,SAAS,yBACd,iBACA,gBACA,iBAA0B,OACH;AACvB,MAAI,kBAAkB,KAAK,kBAAkB,qBAAqB;AAChE,WAAO;AAAA,EACT;AAEA,MAAI,mBAAmB,4BAA4B;AACjD,WAAO;AAAA,EACT;AAEA,SAAO,iBACH,0BACA;AACN;AAOO,SAAS,sBACd,iBACA,gBACS;AACT,SACE,yBAAyB,iBAAiB,cAAc,MACxD;AAEJ;AAMO,SAAS,eAAe,iBAAkC;AAC/D,SAAO,mBAAmB;AAC5B;",
+  "names": ["AnnotationDisplayMode"]
 }

package/esm/charts/core/components/chart-layout/components/styles.css

@@ -1,46 +1,46 @@
-._l1klj80-3-13-3 {
+._l1klj80-3-14-1 {
   min-width: 0;
   grid-area: graphArea;
 }
-._l1klj81-3-13-3 {
+._l1klj81-3-14-1 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj83-3-13-3 {
+._l1klj83-3-14-1 {
   height: inherit;
   grid-area: horizontalResize;
 }
-._l1klj84-3-13-3 {
+._l1klj84-3-14-1 {
   width: 100%;
   grid-area: verticalResize;
 }
-._l1klj85-3-13-3 {
+._l1klj85-3-14-1 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj86-3-13-3 {
+._l1klj86-3-14-1 {
   height: 100%;
 }
-._l1klj87-3-13-3 {
+._l1klj87-3-14-1 {
   grid-area: verticalLegend;
 }
-._l1klj88-3-13-3 {
+._l1klj88-3-14-1 {
   grid-area: horizontalLegend;
 }
-._l1klj89-3-13-3 {
+._l1klj89-3-14-1 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj8a-3-13-3 {
+._l1klj8a-3-14-1 {
   background: var(--dt-colors-border-neutral-default, #dadbe4);
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border-radius: var(--dt-spacings-size-8, 8px);
   touch-action: none;
 }
-._l1klj8a-3-13-3:hover {
+._l1klj8a-3-14-1:hover {
   background: var(--dt-colors-border-primary-accent, #464cce);
 }
-._l1klj8b-3-13-3 {
+._l1klj8b-3-14-1 {
   transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   height: 36px;
   width: 2px;
@@ -49,11 +49,11 @@
   grid-area: horizontalResize;
   align-self: center;
 }
-._l1klj8b-3-13-3:hover {
+._l1klj8b-3-14-1:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._l1klj8c-3-13-3 {
+._l1klj8c-3-14-1 {
   transition: width var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   height: 2px;
   width: 36px;
@@ -62,7 +62,7 @@
   grid-area: verticalResize;
   align-self: flex-end;
 }
-._l1klj8c-3-13-3:hover {
+._l1klj8c-3-14-1:hover {
   width: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }

package/esm/charts/core/components/chart-layout/components/styles.sty.js

@@ -1,9 +1,9 @@
 import "./styles.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var graphContainer = _7a468({ defaultClassName: "_l1klj80-3-13-3", variantClassNames: { loading: { true: "_l1klj81-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
-var legendContainer = _7a468({ defaultClassName: "_l1klj86-3-13-3", variantClassNames: { orientation: { horizontal: "_l1klj87-3-13-3", vertical: "_l1klj88-3-13-3" }, loading: { true: "_l1klj89-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
-var legendResizeLine = _7a468({ defaultClassName: "_l1klj8a-3-13-3", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-13-3", vertical: "_l1klj8c-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeContainer = _7a468({ defaultClassName: "_l1klj82-3-13-3", variantClassNames: { orientation: { horizontal: "_l1klj83-3-13-3", vertical: "_l1klj84-3-13-3" }, loading: { true: "_l1klj85-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
+var graphContainer = _7a468({ defaultClassName: "_l1klj80-3-14-1", variantClassNames: { loading: { true: "_l1klj81-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendContainer = _7a468({ defaultClassName: "_l1klj86-3-14-1", variantClassNames: { orientation: { horizontal: "_l1klj87-3-14-1", vertical: "_l1klj88-3-14-1" }, loading: { true: "_l1klj89-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendResizeLine = _7a468({ defaultClassName: "_l1klj8a-3-14-1", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-14-1", vertical: "_l1klj8c-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeContainer = _7a468({ defaultClassName: "_l1klj82-3-14-1", variantClassNames: { orientation: { horizontal: "_l1klj83-3-14-1", vertical: "_l1klj84-3-14-1" }, loading: { true: "_l1klj85-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   graphContainer,
   legendContainer,

package/esm/charts/core/components/chart-layout/components/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/components/styles.css.ts"],
-  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var graphContainer = _7a468({defaultClassName:'_l1klj80-3-13-3',variantClassNames:{loading:{true:'_l1klj81-3-13-3'}},defaultVariants:{},compoundVariants:[]});\nexport var legendContainer = _7a468({defaultClassName:'_l1klj86-3-13-3',variantClassNames:{orientation:{horizontal:'_l1klj87-3-13-3',vertical:'_l1klj88-3-13-3'},loading:{true:'_l1klj89-3-13-3'}},defaultVariants:{},compoundVariants:[]});\nexport var legendResizeLine = _7a468({defaultClassName:'_l1klj8a-3-13-3',variantClassNames:{orientation:{horizontal:'_l1klj8b-3-13-3',vertical:'_l1klj8c-3-13-3'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeContainer = _7a468({defaultClassName:'_l1klj82-3-13-3',variantClassNames:{orientation:{horizontal:'_l1klj83-3-13-3',vertical:'_l1klj84-3-13-3'},loading:{true:'_l1klj85-3-13-3'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var graphContainer = _7a468({defaultClassName:'_l1klj80-3-14-1',variantClassNames:{loading:{true:'_l1klj81-3-14-1'}},defaultVariants:{},compoundVariants:[]});\nexport var legendContainer = _7a468({defaultClassName:'_l1klj86-3-14-1',variantClassNames:{orientation:{horizontal:'_l1klj87-3-14-1',vertical:'_l1klj88-3-14-1'},loading:{true:'_l1klj89-3-14-1'}},defaultVariants:{},compoundVariants:[]});\nexport var legendResizeLine = _7a468({defaultClassName:'_l1klj8a-3-14-1',variantClassNames:{orientation:{horizontal:'_l1klj8b-3-14-1',vertical:'_l1klj8c-3-14-1'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeContainer = _7a468({defaultClassName:'_l1klj82-3-14-1',variantClassNames:{orientation:{horizontal:'_l1klj83-3-14-1',vertical:'_l1klj84-3-14-1'},loading:{true:'_l1klj85-3-14-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC5J,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,YAAW,mBAAkB,UAAS,kBAAiB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACnO,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,YAAW,mBAAkB,UAAS,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACnM,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,YAAW,mBAAkB,UAAS,kBAAiB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/hooks/useAutomaticRatio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/hooks/useAutomaticRatio.tsx"],
-  "sourcesContent": ["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { ORIENTATION } from '../../../constants.js';\nimport { Dimensions } from '../../../types/dimensions.js';\nimport { ChartLegendOrientation, LegendRatio } from '../../../types/legend.js';\nimport {\n  CATEGORICAL_LEGEND_CLASS,\n  MIN_ITEM_WIDTH,\n} from '../../legend/categorical/constants.js';\nimport { RANGE_LEGEND_CLASS } from '../../legend/range/constants.js';\nimport {\n  getLabelsHeightForRangeBottom,\n  getMaxItemSizeForCategoricalHorizontal,\n  getMaxLabelForRangeHorizontal,\n  getSizeForCategoricaVertical,\n} from '../utils/automatic-ratio.js';\n\ninterface AutomaticRatioParams {\n  legendCandidateSize?: number;\n  legendRef: (node: HTMLDivElement | null) => void;\n  readyForAutoRatio: boolean;\n  refreshAutoRatio: () => void;\n}\n\n/**\n * Hook responsible of determining the best ratio to apply to the chart in order\n * to fully display the content of the legend.\n * @param orientation -\n * @param ratio -\n * @param containerAvailableArea -\n */\nexport const useAutomaticRatio = (\n  orientation: ChartLegendOrientation,\n  ratio: LegendRatio,\n  containerAvailableArea: Dimensions,\n): AutomaticRatioParams => {\n  const [readyForAutoRatio, setReadyForAutoRatio] = useState(false);\n  const [idealLegendSize, setIdealLegendSize] = useState<number | undefined>(\n    undefined,\n  );\n  const readyForAutoRatioRef = useRef(readyForAutoRatio);\n  readyForAutoRatioRef.current = readyForAutoRatio;\n\n  const resetAutoRatio = useCallback(() => {\n    if (!readyForAutoRatioRef.current) {\n      return;\n    }\n    setReadyForAutoRatio(false);\n    setIdealLegendSize(undefined);\n  }, []);\n\n  useEffect(() => {\n    resetAutoRatio();\n  }, [orientation, resetAutoRatio]);\n\n  const legendNodeRef = useRef<HTMLDivElement | null>(null);\n\n  const legendRef = useCallback((node: HTMLDivElement | null) => {\n    legendNodeRef.current = node;\n  }, []);\n\n  const { height: containerHeight } = containerAvailableArea;\n  const hasAutoRatioEnabled = !ratio || ratio === 'auto';\n\n  useEffect(() => {\n    if (!hasAutoRatioEnabled) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setReadyForAutoRatio(true);\n      return;\n    }\n\n    const node = legendNodeRef.current;\n\n    if (!node || containerHeight === 0 || readyForAutoRatio) {\n      return;\n    }\n\n    let longestSeries;\n\n    const isCategoricalLegend = Array.from(node.classList).includes(\n      CATEGORICAL_LEGEND_CLASS,\n    );\n    const isRangeLegend = Array.from(node.classList).includes(\n      RANGE_LEGEND_CLASS,\n    );\n\n    if (isCategoricalLegend) {\n      longestSeries =\n        orientation === ORIENTATION.Horizontal\n          ? getMaxItemSizeForCategoricalHorizontal(node, containerHeight)\n          : getSizeForCategoricaVertical();\n    }\n    if (isRangeLegend) {\n      const hasLoadedLabels = node.getElementsByTagName('g').length !== 0;\n      if (!hasLoadedLabels) {\n        return;\n      }\n\n      longestSeries =\n        orientation === ORIENTATION.Horizontal\n          ? getMaxLabelForRangeHorizontal(node)\n          : getLabelsHeightForRangeBottom(node);\n    }\n\n    setIdealLegendSize(\n      longestSeries !== undefined && longestSeries > 0\n        ? longestSeries\n        : MIN_ITEM_WIDTH,\n    );\n    setReadyForAutoRatio(true);\n  }, [containerHeight, readyForAutoRatio, hasAutoRatioEnabled, orientation]);\n\n  return {\n    legendCandidateSize: idealLegendSize,\n    legendRef,\n    readyForAutoRatio,\n    refreshAutoRatio: resetAutoRatio,\n  };\n};\n"],
+  "sourcesContent": ["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { ORIENTATION } from '../../../constants.js';\nimport { Dimensions } from '../../../types/dimensions.js';\nimport { ChartLegendOrientation, LegendRatio } from '../../../types/legend.js';\nimport {\n  CATEGORICAL_LEGEND_CLASS,\n  MIN_ITEM_WIDTH,\n} from '../../legend/categorical/constants.js';\nimport { RANGE_LEGEND_CLASS } from '../../legend/range/constants.js';\nimport {\n  getLabelsHeightForRangeBottom,\n  getMaxItemSizeForCategoricalHorizontal,\n  getMaxLabelForRangeHorizontal,\n  getSizeForCategoricaVertical,\n} from '../utils/automatic-ratio.js';\n\ninterface AutomaticRatioParams {\n  legendCandidateSize?: number;\n  legendRef: (node: HTMLDivElement | null) => void;\n  readyForAutoRatio: boolean;\n  refreshAutoRatio: () => void;\n}\n\n/**\n * Hook responsible of determining the best ratio to apply to the chart in order\n * to fully display the content of the legend.\n * @param orientation -\n * @param ratio -\n * @param containerAvailableArea -\n */\nexport const useAutomaticRatio = (\n  orientation: ChartLegendOrientation,\n  ratio: LegendRatio,\n  containerAvailableArea: Dimensions,\n): AutomaticRatioParams => {\n  const [readyForAutoRatio, setReadyForAutoRatio] = useState(false);\n  const [idealLegendSize, setIdealLegendSize] = useState<number | undefined>(\n    undefined,\n  );\n  const readyForAutoRatioRef = useRef(readyForAutoRatio);\n  readyForAutoRatioRef.current = readyForAutoRatio;\n\n  const resetAutoRatio = useCallback(() => {\n    if (!readyForAutoRatioRef.current) {\n      return;\n    }\n    setReadyForAutoRatio(false);\n    setIdealLegendSize(undefined);\n  }, []);\n\n  useEffect(() => {\n    resetAutoRatio();\n  }, [orientation, resetAutoRatio]);\n\n  const legendNodeRef = useRef<HTMLDivElement | null>(null);\n\n  const legendRef = useCallback((node: HTMLDivElement | null) => {\n    legendNodeRef.current = node;\n  }, []);\n\n  const { height: containerHeight } = containerAvailableArea;\n  const hasAutoRatioEnabled = !ratio || ratio === 'auto';\n\n  useEffect(() => {\n    if (!hasAutoRatioEnabled) {\n      // oxlint-disable-next-line react/set-state-in-effect\n      setReadyForAutoRatio(true);\n      return;\n    }\n\n    const node = legendNodeRef.current;\n\n    if (!node || containerHeight === 0 || readyForAutoRatio) {\n      return;\n    }\n\n    let longestSeries;\n\n    const isCategoricalLegend = Array.from(node.classList).includes(\n      CATEGORICAL_LEGEND_CLASS,\n    );\n    const isRangeLegend = Array.from(node.classList).includes(\n      RANGE_LEGEND_CLASS,\n    );\n\n    if (isCategoricalLegend) {\n      longestSeries =\n        orientation === ORIENTATION.Horizontal\n          ? getMaxItemSizeForCategoricalHorizontal(node, containerHeight)\n          : getSizeForCategoricaVertical();\n    }\n    if (isRangeLegend) {\n      const hasLoadedLabels = node.getElementsByTagName('g').length !== 0;\n      if (!hasLoadedLabels) {\n        return;\n      }\n\n      longestSeries =\n        orientation === ORIENTATION.Horizontal\n          ? getMaxLabelForRangeHorizontal(node)\n          : getLabelsHeightForRangeBottom(node);\n    }\n\n    setIdealLegendSize(\n      longestSeries !== undefined && longestSeries > 0\n        ? longestSeries\n        : MIN_ITEM_WIDTH,\n    );\n    setReadyForAutoRatio(true);\n  }, [containerHeight, readyForAutoRatio, hasAutoRatioEnabled, orientation]);\n\n  return {\n    legendCandidateSize: idealLegendSize,\n    legendRef,\n    readyForAutoRatio,\n    refreshAutoRatio: resetAutoRatio,\n  };\n};\n"],
   "mappings": "AAAA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAEzD,SAAS,mBAAmB;AAG5B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAgBA,MAAM,oBAAoB,CAC/B,aACA,OACA,2BACyB;AACzB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,EACF;AACA,QAAM,uBAAuB,OAAO,iBAAiB;AACrD,uBAAqB,UAAU;AAE/B,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,CAAC,qBAAqB,SAAS;AACjC;AAAA,IACF;AACA,yBAAqB,KAAK;AAC1B,uBAAmB,MAAS;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,mBAAe;AAAA,EACjB,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,gBAAgB,OAA8B,IAAI;AAExD,QAAM,YAAY,YAAY,CAAC,SAAgC;AAC7D,kBAAc,UAAU;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,QAAQ,gBAAgB,IAAI;AACpC,QAAM,sBAAsB,CAAC,SAAS,UAAU;AAEhD,YAAU,MAAM;AACd,QAAI,CAAC,qBAAqB;AAExB,2BAAqB,IAAI;AACzB;AAAA,IACF;AAEA,UAAM,OAAO,cAAc;AAE3B,QAAI,CAAC,QAAQ,oBAAoB,KAAK,mBAAmB;AACvD;AAAA,IACF;AAEA,QAAI;AAEJ,UAAM,sBAAsB,MAAM,KAAK,KAAK,SAAS,EAAE;AAAA,MACrD;AAAA,IACF;AACA,UAAM,gBAAgB,MAAM,KAAK,KAAK,SAAS,EAAE;AAAA,MAC/C;AAAA,IACF;AAEA,QAAI,qBAAqB;AACvB,sBACE,gBAAgB,YAAY,aACxB,uCAAuC,MAAM,eAAe,IAC5D,6BAA6B;AAAA,IACrC;AACA,QAAI,eAAe;AACjB,YAAM,kBAAkB,KAAK,qBAAqB,GAAG,EAAE,WAAW;AAClE,UAAI,CAAC,iBAAiB;AACpB;AAAA,MACF;AAEA,sBACE,gBAAgB,YAAY,aACxB,8BAA8B,IAAI,IAClC,8BAA8B,IAAI;AAAA,IAC1C;AAEA;AAAA,MACE,kBAAkB,UAAa,gBAAgB,IAC3C,gBACA;AAAA,IACN;AACA,yBAAqB,IAAI;AAAA,EAC3B,GAAG,CAAC,iBAAiB,mBAAmB,qBAAqB,WAAW,CAAC;AAEzE,SAAO;AAAA,IACL,qBAAqB;AAAA,IACrB;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,EACpB;AACF;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/utils/get-resizer-wrapper-size.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/utils/get-resizer-wrapper-size.ts"],
-  "sourcesContent": ["import type { RefObject } from 'react';\n\nimport { DEFAULT_RESIZER_SIZE } from '../types/constants.js';\n\nexport const getResizerWrapperSize = (\n  isVertical: boolean,\n  legendResizeContainerRef: RefObject<HTMLDivElement | null>,\n) =>\n  isVertical\n    ? legendResizeContainerRef.current?.clientHeight ?? DEFAULT_RESIZER_SIZE\n    : legendResizeContainerRef.current?.clientWidth ?? DEFAULT_RESIZER_SIZE;\n"],
-  "mappings": "AAEA,SAAS,4BAA4B;AAE9B,MAAM,wBAAwB,CACnC,YACA,6BAEA,aACI,yBAAyB,SAAS,gBAAgB,uBAClD,yBAAyB,SAAS,eAAe;",
+  "sourcesContent": ["import type { RefObject } from 'react';\n\nimport { DEFAULT_RESIZER_SIZE } from '../types/constants.js';\n\nexport const getResizerWrapperSize = (\n  isVertical: boolean,\n  legendResizeContainerRef: RefObject<HTMLDivElement | null>,\n) =>\n  isVertical\n    ? (legendResizeContainerRef.current?.clientHeight ?? DEFAULT_RESIZER_SIZE)\n    : (legendResizeContainerRef.current?.clientWidth ?? DEFAULT_RESIZER_SIZE);\n"],
+  "mappings": "AAEA,SAAS,4BAA4B;AAE9B,MAAM,wBAAwB,CACnC,YACA,6BAEA,aACK,yBAAyB,SAAS,gBAAgB,uBAClD,yBAAyB,SAAS,eAAe;",
   "names": []
 }

package/esm/charts/core/components/chart-states/ChartState.css

@@ -1,16 +1,16 @@
-._4pqs4v0-3-13-3 {
+._4pqs4v0-3-14-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v1-3-13-3 {
+._4pqs4v1-3-14-1 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v2-3-13-3 {
+._4pqs4v2-3-14-1 {
   align-items: center;
   justify-content: center;
 }
-._4pqs4v3-3-13-3 {
+._4pqs4v3-3-14-1 {
   position: relative;
   width: 100%;
 }

package/esm/charts/core/components/chart-states/ChartState.sty.js

@@ -1,8 +1,8 @@
 import "./ChartState.css";
-var container = "_4pqs4v3-3-13-3";
-var emptyText = "_4pqs4v1-3-13-3";
-var errorText = "_4pqs4v0-3-13-3";
-var wrapper = "_4pqs4v2-3-13-3";
+var container = "_4pqs4v3-3-14-1";
+var emptyText = "_4pqs4v1-3-14-1";
+var errorText = "_4pqs4v0-3-14-1";
+var wrapper = "_4pqs4v2-3-14-1";
 export {
   container,
   emptyText,

package/esm/charts/core/components/chart-states/ChartState.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-states/ChartState.css.ts"],
-  "sourcesContent": ["import './ChartState.css';\nexport var container = '_4pqs4v3-3-13-3';\nexport var emptyText = '_4pqs4v1-3-13-3';\nexport var errorText = '_4pqs4v0-3-13-3';\nexport var wrapper = '_4pqs4v2-3-13-3';"],
+  "sourcesContent": ["import './ChartState.css';\nexport var container = '_4pqs4v3-3-14-1';\nexport var emptyText = '_4pqs4v1-3-14-1';\nexport var errorText = '_4pqs4v0-3-14-1';\nexport var wrapper = '_4pqs4v2-3-14-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/core/components/chart-states/EmptyState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-states/EmptyState.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, type ReactNode } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { emptyText } from './ChartState.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Text } from '../../../../typography/text/Text.js';\n\n\n/**\n * @internal\n */\nexport type EmptyStateProps = PropsWithChildren<{ height: string | number }>;\n\nconst EmptyStateTextWrapper = ({ height, children }: EmptyStateProps) => (\n  <Flex justifyContent=\"center\" alignItems=\"center\" height={height}>\n    <Text className={emptyText} textStyle=\"base\">\n      {children}\n    </Text>\n  </Flex>\n);\n\n/**\n * @internal\n */\nexport const EmptyState = ({ height, children }: EmptyStateProps) => {\n  const messageNode: ReactNode = children || (\n    <FormattedMessage\n      id=\"VkfutNWZVq0loZNC\"\n      defaultMessage=\"No data available.\"\n      description=\"Message to display when no data is available\"\n    />\n  );\n\n  return (\n    <EmptyStateTextWrapper height={height}>{messageNode}</EmptyStateTextWrapper>\n  );\n};\n\nEmptyState['displayName'] = 'EmptyState';\n"],
-  "mappings": "AAeI;AAdJ,SAAS,wBAAwB;AAEjC,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,YAAY;AAQrB,MAAM,wBAAwB,CAAC,EAAE,QAAQ,SAAS,MAChD,oBAAC,QAAK,gBAAe,UAAS,YAAW,UAAS,QAChD,8BAAC,QAAK,WAAW,WAAW,WAAU,QACnC,UACH,GACF;AAMK,MAAM,aAAa,CAAC,EAAE,QAAQ,SAAS,MAAuB;AACnE,QAAM,cAAyB,YAC7B;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,gBAAe;AAAA,MACf,aAAY;AAAA;AAAA,EACd;AAGF,SACE,oBAAC,yBAAsB,QAAiB,uBAAY;AAExD;AAEA,WAAW,aAAa,IAAI;",
+  "sourcesContent": ["import { type PropsWithChildren, type ReactNode } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { emptyText } from './ChartState.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Text } from '../../../../typography/text/Text.js';\n\n/**\n * @internal\n */\nexport type EmptyStateProps = PropsWithChildren<{ height: string | number }>;\n\nconst EmptyStateTextWrapper = ({ height, children }: EmptyStateProps) => (\n  <Flex justifyContent=\"center\" alignItems=\"center\" height={height}>\n    <Text className={emptyText} textStyle=\"base\">\n      {children}\n    </Text>\n  </Flex>\n);\n\n/**\n * @internal\n */\nexport const EmptyState = ({ height, children }: EmptyStateProps) => {\n  const messageNode: ReactNode = children || (\n    <FormattedMessage\n      id=\"VkfutNWZVq0loZNC\"\n      defaultMessage=\"No data available.\"\n      description=\"Message to display when no data is available\"\n    />\n  );\n\n  return (\n    <EmptyStateTextWrapper height={height}>{messageNode}</EmptyStateTextWrapper>\n  );\n};\n\nEmptyState['displayName'] = 'EmptyState';\n"],
+  "mappings": "AAcI;AAbJ,SAAS,wBAAwB;AAEjC,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,YAAY;AAOrB,MAAM,wBAAwB,CAAC,EAAE,QAAQ,SAAS,MAChD,oBAAC,QAAK,gBAAe,UAAS,YAAW,UAAS,QAChD,8BAAC,QAAK,WAAW,WAAW,WAAU,QACnC,UACH,GACF;AAMK,MAAM,aAAa,CAAC,EAAE,QAAQ,SAAS,MAAuB;AACnE,QAAM,cAAyB,YAC7B;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,gBAAe;AAAA,MACf,aAAY;AAAA;AAAA,EACd;AAGF,SACE,oBAAC,yBAAsB,QAAiB,uBAAY;AAExD;AAEA,WAAW,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/chart-states/ErrorState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-states/ErrorState.tsx"],
-  "sourcesContent": ["import { type ReactNode, type JSX } from 'react';\nimport { FallbackProps } from 'react-error-boundary';\nimport { FormattedMessage } from 'react-intl';\n\nimport { CriticalIcon } from '@dynatrace/strato-icons';\n\nimport { errorText, wrapper } from './ChartState.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Text } from '../../../../typography/text/Text.js';\n\n\n/**\n * @internal\n */\nexport type ErrorStateProps = {\n  height: string | number;\n  children?: ReactNode | ((message: string) => JSX.Element);\n};\n\nconst ErrorStateTextWrapper = ({ height, children }: ErrorStateProps) => (\n  <Flex\n    justifyContent=\"center\"\n    alignItems=\"center\"\n    height={height}\n    width=\"100%\"\n  >\n    <Text className={errorText} textStyle=\"base\">\n      {children as ReactNode}\n    </Text>\n  </Flex>\n);\n\n/**\n * Component used in charts to display an error message. To be used with HOC withErrorBoundary() as a fallback component\n *\n * @example\n * ```\n * const ErrorBoundedChart = withErrorBoundary(Chart, { FallbackComponent: ErrorState({ height })});\n * ```\n * @internal\n */\nexport const ErrorState =\n  ({ height, children }: ErrorStateProps) =>\n  (fallbackProps: FallbackProps) => {\n    let errorNode: ReactNode;\n\n    if (children && typeof children === 'function') {\n      errorNode = children(fallbackProps.error.message);\n    } else {\n      const errorMsg = fallbackProps.error.message\n        ? `: ${fallbackProps.error.message}`\n        : '';\n\n      errorNode = children || (\n        <Flex className={wrapper}>\n          <CriticalIcon />\n          <FormattedMessage\n            id=\"9SDB/Tz9eGlVpihz\"\n            defaultMessage=\"An error occurred\"\n            description=\"Message to display when there is an error\"\n          />\n          {errorMsg}\n        </Flex>\n      );\n    }\n\n    return (\n      <ErrorStateTextWrapper height={height}>{errorNode}</ErrorStateTextWrapper>\n    );\n  };\n\nErrorState['displayName'] = 'ErrorState';\n"],
-  "mappings": "AA0BI,cA4BI,YA5BJ;AAxBJ,SAAS,wBAAwB;AAEjC,SAAS,oBAAoB;AAE7B,SAAS,WAAW,eAAe;AACnC,SAAS,YAAY;AACrB,SAAS,YAAY;AAWrB,MAAM,wBAAwB,CAAC,EAAE,QAAQ,SAAS,MAChD;AAAA,EAAC;AAAA;AAAA,IACC,gBAAe;AAAA,IACf,YAAW;AAAA,IACX;AAAA,IACA,OAAM;AAAA,IAEN,8BAAC,QAAK,WAAW,WAAW,WAAU,QACnC,UACH;AAAA;AACF;AAYK,MAAM,aACX,CAAC,EAAE,QAAQ,SAAS,MACpB,CAAC,kBAAiC;AAChC,MAAI;AAEJ,MAAI,YAAY,OAAO,aAAa,YAAY;AAC9C,gBAAY,SAAS,cAAc,MAAM,OAAO;AAAA,EAClD,OAAO;AACL,UAAM,WAAW,cAAc,MAAM,UACjC,KAAK,cAAc,MAAM,OAAO,KAChC;AAEJ,gBAAY,YACV,qBAAC,QAAK,WAAW,SACf;AAAA,0BAAC,gBAAa;AAAA,MACd;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,gBAAe;AAAA,UACf,aAAY;AAAA;AAAA,MACd;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,oBAAC,yBAAsB,QAAiB,qBAAU;AAEtD;AAEF,WAAW,aAAa,IAAI;",
+  "sourcesContent": ["import { type ReactNode, type JSX } from 'react';\nimport { FallbackProps } from 'react-error-boundary';\nimport { FormattedMessage } from 'react-intl';\n\nimport { CriticalIcon } from '@dynatrace/strato-icons';\n\nimport { errorText, wrapper } from './ChartState.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Text } from '../../../../typography/text/Text.js';\n\n/**\n * @internal\n */\nexport type ErrorStateProps = {\n  height: string | number;\n  children?: ReactNode | ((message: string) => JSX.Element);\n};\n\nconst ErrorStateTextWrapper = ({ height, children }: ErrorStateProps) => (\n  <Flex\n    justifyContent=\"center\"\n    alignItems=\"center\"\n    height={height}\n    width=\"100%\"\n  >\n    <Text className={errorText} textStyle=\"base\">\n      {children as ReactNode}\n    </Text>\n  </Flex>\n);\n\n/**\n * Component used in charts to display an error message. To be used with HOC withErrorBoundary() as a fallback component\n *\n * @example\n * ```\n * const ErrorBoundedChart = withErrorBoundary(Chart, { FallbackComponent: ErrorState({ height })});\n * ```\n * @internal\n */\nexport const ErrorState =\n  ({ height, children }: ErrorStateProps) =>\n  (fallbackProps: FallbackProps) => {\n    let errorNode: ReactNode;\n\n    if (children && typeof children === 'function') {\n      errorNode = children(fallbackProps.error.message);\n    } else {\n      const errorMsg = fallbackProps.error.message\n        ? `: ${fallbackProps.error.message}`\n        : '';\n\n      errorNode = children || (\n        <Flex className={wrapper}>\n          <CriticalIcon />\n          <FormattedMessage\n            id=\"9SDB/Tz9eGlVpihz\"\n            defaultMessage=\"An error occurred\"\n            description=\"Message to display when there is an error\"\n          />\n          {errorMsg}\n        </Flex>\n      );\n    }\n\n    return (\n      <ErrorStateTextWrapper height={height}>{errorNode}</ErrorStateTextWrapper>\n    );\n  };\n\nErrorState['displayName'] = 'ErrorState';\n"],
+  "mappings": "AAyBI,cA4BI,YA5BJ;AAvBJ,SAAS,wBAAwB;AAEjC,SAAS,oBAAoB;AAE7B,SAAS,WAAW,eAAe;AACnC,SAAS,YAAY;AACrB,SAAS,YAAY;AAUrB,MAAM,wBAAwB,CAAC,EAAE,QAAQ,SAAS,MAChD;AAAA,EAAC;AAAA;AAAA,IACC,gBAAe;AAAA,IACf,YAAW;AAAA,IACX;AAAA,IACA,OAAM;AAAA,IAEN,8BAAC,QAAK,WAAW,WAAW,WAAU,QACnC,UACH;AAAA;AACF;AAYK,MAAM,aACX,CAAC,EAAE,QAAQ,SAAS,MACpB,CAAC,kBAAiC;AAChC,MAAI;AAEJ,MAAI,YAAY,OAAO,aAAa,YAAY;AAC9C,gBAAY,SAAS,cAAc,MAAM,OAAO;AAAA,EAClD,OAAO;AACL,UAAM,WAAW,cAAc,MAAM,UACjC,KAAK,cAAc,MAAM,OAAO,KAChC;AAEJ,gBAAY,YACV,qBAAC,QAAK,WAAW,SACf;AAAA,0BAAC,gBAAa;AAAA,MACd;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,gBAAe;AAAA,UACf,aAAY;AAAA;AAAA,MACd;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,oBAAC,yBAAsB,QAAiB,qBAAU;AAEtD;AAEF,WAAW,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/crosshair/components/Magnifier.css

@@ -1,4 +1,4 @@
-._nm3s3e0-3-13-3 {
+._nm3s3e0-3-14-1 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-default-weight, 400);
@@ -13,24 +13,24 @@
   z-index: var(--dt-elevations-sticky, 10);
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-4, 4px);
 }
-._nm3s3e1-3-13-3 {
+._nm3s3e1-3-14-1 {
   margin-left: -2px;
 }
-._nm3s3e2-3-13-3 {
+._nm3s3e2-3-14-1 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e3-3-13-3 {
+._nm3s3e3-3-14-1 {
   margin-top: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e4-3-13-3 {
+._nm3s3e4-3-14-1 {
   margin-top: -2px;
 }
-._nm3s3e5-3-13-3 {
+._nm3s3e5-3-14-1 {
   transform: rotate(-90deg);
   transform-origin: left bottom;
   margin-top: -2px;
 }
-._nm3s3e6-3-13-3 {
+._nm3s3e6-3-14-1 {
   transform: rotate(90deg) scaleX(-1) scaleY(-1) translateX(-100%) translateY(-100%);
   transform-origin: left top;
   margin-top: var(--dt-spacings-size-2, 2px);

package/esm/charts/core/components/crosshair/components/Magnifier.sty.js

@@ -1,12 +1,12 @@
 import "./Magnifier.css";
-var bottom = "_nm3s3e3-3-13-3";
-var left = "_nm3s3e1-3-13-3";
-var magnifier = "_nm3s3e0-3-13-3";
+var bottom = "_nm3s3e3-3-14-1";
+var left = "_nm3s3e1-3-14-1";
+var magnifier = "_nm3s3e0-3-14-1";
 var magnifierFontStyles = { fontFamily: "var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)", fontSize: "var(--dt-typography-text-small-default-size, 12px)", fontWeight: "var(--dt-typography-text-small-default-weight, 400)", lineHeight: "var(--dt-typography-text-small-default-line-height, 1.333333333)" };
-var right = "_nm3s3e2-3-13-3";
-var rotatedBottomStyle = "_nm3s3e6-3-13-3";
-var rotatedTopStyle = "_nm3s3e5-3-13-3";
-var top = "_nm3s3e4-3-13-3";
+var right = "_nm3s3e2-3-14-1";
+var rotatedBottomStyle = "_nm3s3e6-3-14-1";
+var rotatedTopStyle = "_nm3s3e5-3-14-1";
+var top = "_nm3s3e4-3-14-1";
 export {
   bottom,
   left,

package/esm/charts/core/components/crosshair/components/Magnifier.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/crosshair/components/Magnifier.css.ts"],
-  "sourcesContent": ["import './Magnifier.css';\nexport var bottom = '_nm3s3e3-3-13-3';\nexport var left = '_nm3s3e1-3-13-3';\nexport var magnifier = '_nm3s3e0-3-13-3';\nexport var magnifierFontStyles = {fontFamily:'var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)',fontSize:'var(--dt-typography-text-small-default-size, 12px)',fontWeight:'var(--dt-typography-text-small-default-weight, 400)',lineHeight:'var(--dt-typography-text-small-default-line-height, 1.333333333)'};\nexport var right = '_nm3s3e2-3-13-3';\nexport var rotatedBottomStyle = '_nm3s3e6-3-13-3';\nexport var rotatedTopStyle = '_nm3s3e5-3-13-3';\nexport var top = '_nm3s3e4-3-13-3';"],
+  "sourcesContent": ["import './Magnifier.css';\nexport var bottom = '_nm3s3e3-3-14-1';\nexport var left = '_nm3s3e1-3-14-1';\nexport var magnifier = '_nm3s3e0-3-14-1';\nexport var magnifierFontStyles = {fontFamily:'var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)',fontSize:'var(--dt-typography-text-small-default-size, 12px)',fontWeight:'var(--dt-typography-text-small-default-weight, 400)',lineHeight:'var(--dt-typography-text-small-default-line-height, 1.333333333)'};\nexport var right = '_nm3s3e2-3-14-1';\nexport var rotatedBottomStyle = '_nm3s3e6-3-14-1';\nexport var rotatedTopStyle = '_nm3s3e5-3-14-1';\nexport var top = '_nm3s3e4-3-14-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,YAAY;AAChB,IAAI,sBAAsB,EAAC,YAAW,6FAA4F,UAAS,sDAAqD,YAAW,uDAAsD,YAAW,mEAAkE;AAC9U,IAAI,QAAQ;AACZ,IAAI,qBAAqB;AACzB,IAAI,kBAAkB;AACtB,IAAI,MAAM;",
   "names": []
 }

package/esm/charts/core/components/interactions-overlay/InteractionsOverlay.css

@@ -1,4 +1,4 @@
-._nfahiq0-3-13-3 {
+._nfahiq0-3-14-1 {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -6,15 +6,15 @@
   left: 0;
   touch-action: none;
 }
-._nfahiq1-3-13-3 {
+._nfahiq1-3-14-1 {
   cursor: crosshair;
 }
-._nfahiq2-3-13-3 {
+._nfahiq2-3-14-1 {
   cursor: ew-resize;
 }
-._nfahiq3-3-13-3 {
+._nfahiq3-3-14-1 {
   cursor: zoom-in;
 }
-._nfahiq4-3-13-3 {
+._nfahiq4-3-14-1 {
   cursor: zoom-out;
 }

package/esm/charts/core/components/interactions-overlay/InteractionsOverlay.js

@@ -69,7 +69,7 @@ const InteractionsOverlay = forwardRef((props, forwardedRef) => {
     mode
   );
   const htmlRef = useRef(null);
-  usePreventScrollOnWheel(htmlRef);
+  usePreventScrollOnWheel(htmlRef, mode);
   const rootRef = useMergeRefs([htmlRef, forwardedRef]);
   const overlappingInteractionsProps = {
     selectionArea,
@@ -109,7 +109,7 @@ const InteractionsOverlay = forwardRef((props, forwardedRef) => {
     }
   };
   const handleWheel = (event) => {
-    interactions[getActiveMode(mode, event, zoomDisabled)].onWheel(event);
+    interactions[getActiveMode(mode, event, zoomDisabled, isPanDisabled)].onWheel(event);
   };
   const handleKeyboard = (event) => handleKeyDown({
     event,