npm - @dynatrace/strato-components - Versions diffs - 3.4.0 → 3.5.0 - Mend

@dynatrace/strato-components 3.4.0 → 3.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2305) hide show

package/esm/charts/core/components/legend/range/components/RangeLegendItemMarker/RangeLegendItemMarker.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/legend/range/components/RangeLegendItemMarker/RangeLegendItemMarker.tsx"],
-  "sourcesContent": ["import { useRef } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { legendMarker } from './RangeLegendItemMarker.sty.js';\nimport { ORIENTATION } from '../../../../chart-layout/types/constants.js';\nimport {\n  CONTAINER_PADDING,\n  DEFAULT_GAP_THICKNESS,\n  DEFAULT_ITEM_THICKNESS,\n  DEFAULT_SEGMENT_SIZE,\n  STROKE_WIDTH,\n} from '../../constants.js';\nimport { useOrientation } from '../../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../../context/RangeLegendScaleContext.js';\nimport { useRangeLegendHoveredMarkerId } from '../../hooks/store/selectors.js';\n\ninterface RangeLegendItemMarkerProps {\n  position: number;\n  markerValue: number;\n  isReversed?: boolean;\n  isSinglePointRange?: boolean;\n}\n\nexport const RangeLegendItemMarker = (props: RangeLegendItemMarkerProps) => {\n  const { markerValue, position, isReversed, isSinglePointRange } = props;\n\n  const svgRef = useRef<SVGSVGElement>(null);\n\n  const hoveredMarkerId = useRangeLegendHoveredMarkerId();\n  const { scale } = useScale();\n  const isBoundarySegment = scale.range().includes(position);\n\n  const { orientation } = useOrientation();\n  const isVertical = orientation === ORIENTATION.Vertical;\n  const isHorizontal = orientation === ORIENTATION.Horizontal;\n\n  const itemX = isHorizontal ? position + DEFAULT_GAP_THICKNESS / 2 : 0;\n  const itemY = isVertical ? position + DEFAULT_GAP_THICKNESS / 2 : 0;\n  const itemWidth = isHorizontal\n    ? DEFAULT_GAP_THICKNESS\n    : DEFAULT_ITEM_THICKNESS;\n  const itemHeight = isVertical\n    ? DEFAULT_GAP_THICKNESS\n    : DEFAULT_ITEM_THICKNESS;\n\n  const defaultTranslateY = `-${DEFAULT_GAP_THICKNESS / 2}`;\n\n  const verticalSinglePointTranslateY = isReversed\n    ? defaultTranslateY\n    : `-${DEFAULT_GAP_THICKNESS * 2}`;\n  const singlePointRangeTranslateY = isHorizontal\n    ? DEFAULT_GAP_THICKNESS\n    : verticalSinglePointTranslateY;\n\n  const CSSTranslate = `translateX(${DEFAULT_GAP_THICKNESS}px) translateY(${\n    isSinglePointRange && !isBoundarySegment\n      ? singlePointRangeTranslateY\n      : defaultTranslateY\n  }px)`;\n\n  const ITEM_X = {\n    [ORIENTATION.Vertical]: () => itemX - itemWidth + STROKE_WIDTH,\n    [ORIENTATION.Horizontal]: () => {\n      if (isSinglePointRange && !isBoundarySegment) {\n        return (\n          itemX +\n          CONTAINER_PADDING -\n          (DEFAULT_SEGMENT_SIZE + STROKE_WIDTH * 2) / 2\n        );\n      }\n\n      return itemX + CONTAINER_PADDING - STROKE_WIDTH * 2;\n    },\n  };\n\n  const ITEM_Y = {\n    [ORIENTATION.Vertical]: () => {\n      if (isSinglePointRange && !isBoundarySegment) {\n        return itemY - CONTAINER_PADDING - itemHeight / 2;\n      }\n\n      return itemY - CONTAINER_PADDING + STROKE_WIDTH;\n    },\n    [ORIENTATION.Horizontal]: () => {\n      return itemY - itemHeight + STROKE_WIDTH;\n    },\n  };\n\n  return (\n    <svg\n      width=\"48\"\n      height=\"13\"\n      viewBox=\"0 0 48 13\"\n      fill=\"none\"\n      ref={svgRef}\n      x={ITEM_X[orientation]()}\n      y={ITEM_Y[orientation]()}\n      className={legendMarker({\n        isMarkerShown: hoveredMarkerId === markerValue,\n      })}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"presentation\"\n    >\n      <path\n        d=\"M7.27736 7.08243L7.90139 6.66639L7.27734 6.25038L1.27734 2.25065L0.5 1.73246L0.5 2.66668L0.5 10.6667L0.5 11.601L1.27736 11.0827L7.27736 7.08243Z\"\n        fill={Colors.Icon.Neutral.Default}\n        strokeWidth={STROKE_WIDTH}\n        stroke={Colors.Background.Base.Default}\n        style={{\n          transform: isHorizontal\n            ? `rotate(90deg) ${CSSTranslate}`\n            : CSSTranslate,\n        }}\n      />\n    </svg>\n  );\n};\n"],
+  "sourcesContent": ["import { useRef } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { legendMarker } from './RangeLegendItemMarker.sty.js';\nimport { ORIENTATION } from '../../../../../constants.js';\nimport {\n  CONTAINER_PADDING,\n  DEFAULT_GAP_THICKNESS,\n  DEFAULT_ITEM_THICKNESS,\n  DEFAULT_SEGMENT_SIZE,\n  STROKE_WIDTH,\n} from '../../constants.js';\nimport { useOrientation } from '../../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../../context/RangeLegendScaleContext.js';\nimport { useRangeLegendHoveredMarkerId } from '../../hooks/store/selectors.js';\n\ninterface RangeLegendItemMarkerProps {\n  position: number;\n  markerValue: number;\n  isReversed?: boolean;\n  isSinglePointRange?: boolean;\n}\n\nexport const RangeLegendItemMarker = (props: RangeLegendItemMarkerProps) => {\n  const { markerValue, position, isReversed, isSinglePointRange } = props;\n\n  const svgRef = useRef<SVGSVGElement>(null);\n\n  const hoveredMarkerId = useRangeLegendHoveredMarkerId();\n  const { scale } = useScale();\n  const isBoundarySegment = scale.range().includes(position);\n\n  const { orientation } = useOrientation();\n  const isVertical = orientation === ORIENTATION.Vertical;\n  const isHorizontal = orientation === ORIENTATION.Horizontal;\n\n  const itemX = isHorizontal ? position + DEFAULT_GAP_THICKNESS / 2 : 0;\n  const itemY = isVertical ? position + DEFAULT_GAP_THICKNESS / 2 : 0;\n  const itemWidth = isHorizontal\n    ? DEFAULT_GAP_THICKNESS\n    : DEFAULT_ITEM_THICKNESS;\n  const itemHeight = isVertical\n    ? DEFAULT_GAP_THICKNESS\n    : DEFAULT_ITEM_THICKNESS;\n\n  const defaultTranslateY = `-${DEFAULT_GAP_THICKNESS / 2}`;\n\n  const verticalSinglePointTranslateY = isReversed\n    ? defaultTranslateY\n    : `-${DEFAULT_GAP_THICKNESS * 2}`;\n  const singlePointRangeTranslateY = isHorizontal\n    ? DEFAULT_GAP_THICKNESS\n    : verticalSinglePointTranslateY;\n\n  const CSSTranslate = `translateX(${DEFAULT_GAP_THICKNESS}px) translateY(${\n    isSinglePointRange && !isBoundarySegment\n      ? singlePointRangeTranslateY\n      : defaultTranslateY\n  }px)`;\n\n  const ITEM_X = {\n    [ORIENTATION.Vertical]: () => itemX - itemWidth + STROKE_WIDTH,\n    [ORIENTATION.Horizontal]: () => {\n      if (isSinglePointRange && !isBoundarySegment) {\n        return (\n          itemX +\n          CONTAINER_PADDING -\n          (DEFAULT_SEGMENT_SIZE + STROKE_WIDTH * 2) / 2\n        );\n      }\n\n      return itemX + CONTAINER_PADDING - STROKE_WIDTH * 2;\n    },\n  };\n\n  const ITEM_Y = {\n    [ORIENTATION.Vertical]: () => {\n      if (isSinglePointRange && !isBoundarySegment) {\n        return itemY - CONTAINER_PADDING - itemHeight / 2;\n      }\n\n      return itemY - CONTAINER_PADDING + STROKE_WIDTH;\n    },\n    [ORIENTATION.Horizontal]: () => {\n      return itemY - itemHeight + STROKE_WIDTH;\n    },\n  };\n\n  return (\n    <svg\n      width=\"48\"\n      height=\"13\"\n      viewBox=\"0 0 48 13\"\n      fill=\"none\"\n      ref={svgRef}\n      x={ITEM_X[orientation]()}\n      y={ITEM_Y[orientation]()}\n      className={legendMarker({\n        isMarkerShown: hoveredMarkerId === markerValue,\n      })}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"presentation\"\n    >\n      <path\n        d=\"M7.27736 7.08243L7.90139 6.66639L7.27734 6.25038L1.27734 2.25065L0.5 1.73246L0.5 2.66668L0.5 10.6667L0.5 11.601L1.27736 11.0827L7.27736 7.08243Z\"\n        fill={Colors.Icon.Neutral.Default}\n        strokeWidth={STROKE_WIDTH}\n        stroke={Colors.Background.Base.Default}\n        style={{\n          transform: isHorizontal\n            ? `rotate(90deg) ${CSSTranslate}`\n            : CSSTranslate,\n        }}\n      />\n    </svg>\n  );\n};\n"],
   "mappings": "AAwGM;AAxGN,SAAS,cAAc;AAEvB,OAAO,YAAY;AAEnB,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,qCAAqC;AASvC,MAAM,wBAAwB,CAAC,UAAsC;AAC1E,QAAM,EAAE,aAAa,UAAU,YAAY,mBAAmB,IAAI;AAElE,QAAM,SAAS,OAAsB,IAAI;AAEzC,QAAM,kBAAkB,8BAA8B;AACtD,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,oBAAoB,MAAM,MAAM,EAAE,SAAS,QAAQ;AAEzD,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,eAAe,gBAAgB,YAAY;AAEjD,QAAM,QAAQ,eAAe,WAAW,wBAAwB,IAAI;AACpE,QAAM,QAAQ,aAAa,WAAW,wBAAwB,IAAI;AAClE,QAAM,YAAY,eACd,wBACA;AACJ,QAAM,aAAa,aACf,wBACA;AAEJ,QAAM,oBAAoB,IAAI,wBAAwB,CAAC;AAEvD,QAAM,gCAAgC,aAClC,oBACA,IAAI,wBAAwB,CAAC;AACjC,QAAM,6BAA6B,eAC/B,wBACA;AAEJ,QAAM,eAAe,cAAc,qBAAqB,kBACtD,sBAAsB,CAAC,oBACnB,6BACA,iBACN;AAEA,QAAM,SAAS;AAAA,IACb,CAAC,YAAY,QAAQ,GAAG,MAAM,QAAQ,YAAY;AAAA,IAClD,CAAC,YAAY,UAAU,GAAG,MAAM;AAC9B,UAAI,sBAAsB,CAAC,mBAAmB;AAC5C,eACE,QACA,qBACC,uBAAuB,eAAe,KAAK;AAAA,MAEhD;AAEA,aAAO,QAAQ,oBAAoB,eAAe;AAAA,IACpD;AAAA,EACF;AAEA,QAAM,SAAS;AAAA,IACb,CAAC,YAAY,QAAQ,GAAG,MAAM;AAC5B,UAAI,sBAAsB,CAAC,mBAAmB;AAC5C,eAAO,QAAQ,oBAAoB,aAAa;AAAA,MAClD;AAEA,aAAO,QAAQ,oBAAoB;AAAA,IACrC;AAAA,IACA,CAAC,YAAY,UAAU,GAAG,MAAM;AAC9B,aAAO,QAAQ,aAAa;AAAA,IAC9B;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,KAAK;AAAA,MACL,GAAG,OAAO,WAAW,EAAE;AAAA,MACvB,GAAG,OAAO,WAAW,EAAE;AAAA,MACvB,WAAW,aAAa;AAAA,QACtB,eAAe,oBAAoB;AAAA,MACrC,CAAC;AAAA,MACD,OAAM;AAAA,MACN,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAM,OAAO,KAAK,QAAQ;AAAA,UAC1B,aAAa;AAAA,UACb,QAAQ,OAAO,WAAW,KAAK;AAAA,UAC/B,OAAO;AAAA,YACL,WAAW,eACP,iBAAiB,YAAY,KAC7B;AAAA,UACN;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/legend/range/components/RangeLegendItemMarker/RangeLegendItemMarker.sty.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import "./RangeLegendItemMarker.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var legendMarker = _7a468({ defaultClassName: "_1kzx6wv0-3-4-0", variantClassNames: { isMarkerShown: { true: "_1kzx6wv1-3-4-0", false: "_1kzx6wv2-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendMarker = _7a468({ defaultClassName: "_1kzx6wv0-3-5-0", variantClassNames: { isMarkerShown: { true: "_1kzx6wv1-3-5-0", false: "_1kzx6wv2-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   legendMarker
 };

package/esm/charts/core/components/legend/range/components/RangeLegendItemMarker/RangeLegendItemMarker.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/legend/range/components/RangeLegendItemMarker/RangeLegendItemMarker.css.ts"],
-  "sourcesContent": ["import './RangeLegendItemMarker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var legendMarker = _7a468({defaultClassName:'_1kzx6wv0-3-4-0',variantClassNames:{isMarkerShown:{true:'_1kzx6wv1-3-4-0',false:'_1kzx6wv2-3-4-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './RangeLegendItemMarker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var legendMarker = _7a468({defaultClassName:'_1kzx6wv0-3-5-0',variantClassNames:{isMarkerShown:{true:'_1kzx6wv1-3-5-0',false:'_1kzx6wv2-3-5-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,eAAc,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.css CHANGED Viewed

@@ -1,12 +1,12 @@
-._u32l830-3-4-0 {
+._u32l830-3-5-0 {
   overflow: visible;
   position: absolute;
 }
-._u32l831-3-4-0 {
+._u32l831-3-5-0 {
   width: 100%;
   height: 10px;
 }
-._u32l832-3-4-0 {
+._u32l832-3-5-0 {
   height: 100%;
   width: 10px;
 }

package/esm/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { isNumber } from "lodash-es";
 import { Fragment, useMemo } from "react";
 import { legendMarkersSvg } from "./RangeLegendMarkers.sty.js";
-import { ORIENTATION } from "../../../../chart-layout/types/constants.js";
+import { ORIENTATION } from "../../../../../constants.js";
 import { LABEL_ALIGNMENT } from "../../constants.js";
 import { useOrientation } from "../../context/RangeLegendOrientationContext.js";
 import { useScale } from "../../context/RangeLegendScaleContext.js";

package/esm/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.tsx"],
-  "sourcesContent": ["import { isNumber } from 'lodash-es';\nimport { Fragment, useMemo } from 'react';\n\nimport { legendMarkersSvg } from './RangeLegendMarkers.sty.js';\nimport { ORIENTATION } from '../../../../chart-layout/types/constants.js';\nimport { LABEL_ALIGNMENT } from '../../constants.js';\nimport { useOrientation } from '../../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../../context/RangeLegendScaleContext.js';\nimport { useLegendFormattedLabels } from '../../hooks/use-legend-formatted-labels.js';\nimport type { InternalRangeItem } from '../../types/range-legend.internal.js';\nimport { getLabelAlignment } from '../../utils/get-label-alignment.js';\nimport { getLabelEndPosition } from '../../utils/get-label-end-position.js';\nimport { getMarkers } from '../../utils/get-markers.js';\nimport { RangeLegendBoundaryLabels } from '../RangeLegendBoundaryLabels.js';\nimport { RangeLegendItemLabel } from '../RangeLegendItemLabel/RangeLegendItemLabel.js';\nimport { RangeLegendItemMarker } from '../RangeLegendItemMarker/RangeLegendItemMarker.js';\nimport { RangeLegendSegmentsOverlay } from '../RangeLegendSegmentsOverlay.js';\n\ninterface RangeLegendMarkersProps {\n  items: InternalRangeItem[];\n  maxValue?: number;\n  minValue?: number;\n}\n\nexport const RangeLegendMarkers = (props: RangeLegendMarkersProps) => {\n  const { items, maxValue, minValue } = props;\n  const hasMinValue = isNumber(minValue);\n  const hasMaxValue = isNumber(maxValue);\n\n  const { orientation } = useOrientation();\n  const { scale } = useScale();\n  const [rangeStartPosition, rangeEndPosition] = scale.range();\n\n  const isVertical = orientation === ORIENTATION.Vertical;\n\n  const { itemMarkers, singlePointRangeMarkers } = useMemo(\n    () => getMarkers(items, isVertical),\n    [isVertical, items],\n  );\n\n  const internalRangeItems = useLegendFormattedLabels(items);\n\n  const addedMarkers = new Set<number>([]);\n  const markerLabel = isVertical\n    ? `Labels from ${Array.from(itemMarkers)[itemMarkers.size - 1]} to ${\n        Array.from(itemMarkers)[0]\n      }`\n    : `Labels from ${Array.from(itemMarkers)[0]} to ${\n        Array.from(itemMarkers)[itemMarkers.size - 1]\n      }`;\n\n  return (\n    <svg\n      className={legendMarkersSvg({\n        isHorizontal: orientation === ORIENTATION.Horizontal,\n      })}\n      role=\"group\"\n      aria-label=\"Chart legend\"\n    >\n      <g role=\"list\" aria-label={markerLabel}>\n        {/* LABELS */}\n        {internalRangeItems.map((item) => {\n          const hasFromLabel =\n            itemMarkers.has(item.from) && !addedMarkers.has(item.from);\n          const hasToLabel =\n            itemMarkers.has(item.to) && !addedMarkers.has(item.to);\n\n          if (!hasFromLabel && !hasToLabel) {\n            return null;\n          }\n\n          addedMarkers.add(item.from);\n          addedMarkers.add(item.to);\n\n          const startPosition = scale(item.from);\n          const endPosition = scale(item.to);\n          const isSinglePointRange = startPosition === endPosition;\n\n          const hasSameStartPosition = isVertical\n            ? startPosition === rangeEndPosition\n            : startPosition === rangeStartPosition;\n          const isFirstItem = hasSameStartPosition && !hasMinValue;\n\n          const hasSameEndPosition = isVertical\n            ? endPosition === rangeStartPosition\n            : endPosition === rangeEndPosition;\n          const isLastItem = hasSameEndPosition && !hasMaxValue;\n\n          const labelAlignment = getLabelAlignment(\n            hasMaxValue,\n            isLastItem,\n            isVertical,\n          );\n\n          const labelEndPosition = getLabelEndPosition(\n            endPosition,\n            isSinglePointRange,\n            isLastItem,\n          );\n\n          return (\n            <Fragment key={`label-'${item.from}`}>\n              {hasFromLabel && (\n                <RangeLegendItemLabel\n                  labelId={item.from}\n                  startPosition={startPosition}\n                  endPosition={startPosition}\n                  text={item.labels.from}\n                  alignment={\n                    hasMinValue || !isFirstItem\n                      ? LABEL_ALIGNMENT.Center\n                      : LABEL_ALIGNMENT.End\n                  }\n                />\n              )}\n              {hasToLabel && !isSinglePointRange && (\n                <RangeLegendItemLabel\n                  labelId={item.to}\n                  startPosition={labelEndPosition}\n                  endPosition={labelEndPosition}\n                  text={item.labels.to}\n                  alignment={labelAlignment}\n                />\n              )}\n            </Fragment>\n          );\n        })}\n\n        {/* ARROWS */}\n        {Array.from(itemMarkers).map((marker) => {\n          const position = scale(marker);\n\n          return (\n            <RangeLegendItemMarker\n              key={`marker-'${marker}`}\n              position={position}\n              markerValue={marker}\n              isReversed={isVertical}\n              isSinglePointRange={singlePointRangeMarkers.has(marker)}\n            />\n          );\n        })}\n        <RangeLegendBoundaryLabels\n          items={internalRangeItems}\n          maxValue={maxValue}\n          minValue={minValue}\n        />\n      </g>\n\n      <RangeLegendSegmentsOverlay itemMarkers={Array.from(itemMarkers)} />\n    </svg>\n  );\n};\n"],
+  "sourcesContent": ["import { isNumber } from 'lodash-es';\nimport { Fragment, useMemo } from 'react';\n\nimport { legendMarkersSvg } from './RangeLegendMarkers.sty.js';\nimport { ORIENTATION } from '../../../../../constants.js';\nimport { LABEL_ALIGNMENT } from '../../constants.js';\nimport { useOrientation } from '../../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../../context/RangeLegendScaleContext.js';\nimport { useLegendFormattedLabels } from '../../hooks/use-legend-formatted-labels.js';\nimport type { InternalRangeItem } from '../../types/range-legend.internal.js';\nimport { getLabelAlignment } from '../../utils/get-label-alignment.js';\nimport { getLabelEndPosition } from '../../utils/get-label-end-position.js';\nimport { getMarkers } from '../../utils/get-markers.js';\nimport { RangeLegendBoundaryLabels } from '../RangeLegendBoundaryLabels.js';\nimport { RangeLegendItemLabel } from '../RangeLegendItemLabel/RangeLegendItemLabel.js';\nimport { RangeLegendItemMarker } from '../RangeLegendItemMarker/RangeLegendItemMarker.js';\nimport { RangeLegendSegmentsOverlay } from '../RangeLegendSegmentsOverlay.js';\n\ninterface RangeLegendMarkersProps {\n  items: InternalRangeItem[];\n  maxValue?: number;\n  minValue?: number;\n}\n\nexport const RangeLegendMarkers = (props: RangeLegendMarkersProps) => {\n  const { items, maxValue, minValue } = props;\n  const hasMinValue = isNumber(minValue);\n  const hasMaxValue = isNumber(maxValue);\n\n  const { orientation } = useOrientation();\n  const { scale } = useScale();\n  const [rangeStartPosition, rangeEndPosition] = scale.range();\n\n  const isVertical = orientation === ORIENTATION.Vertical;\n\n  const { itemMarkers, singlePointRangeMarkers } = useMemo(\n    () => getMarkers(items, isVertical),\n    [isVertical, items],\n  );\n\n  const internalRangeItems = useLegendFormattedLabels(items);\n\n  const addedMarkers = new Set<number>([]);\n  const markerLabel = isVertical\n    ? `Labels from ${Array.from(itemMarkers)[itemMarkers.size - 1]} to ${\n        Array.from(itemMarkers)[0]\n      }`\n    : `Labels from ${Array.from(itemMarkers)[0]} to ${\n        Array.from(itemMarkers)[itemMarkers.size - 1]\n      }`;\n\n  return (\n    <svg\n      className={legendMarkersSvg({\n        isHorizontal: orientation === ORIENTATION.Horizontal,\n      })}\n      role=\"group\"\n      aria-label=\"Chart legend\"\n    >\n      <g role=\"list\" aria-label={markerLabel}>\n        {/* LABELS */}\n        {internalRangeItems.map((item) => {\n          const hasFromLabel =\n            itemMarkers.has(item.from) && !addedMarkers.has(item.from);\n          const hasToLabel =\n            itemMarkers.has(item.to) && !addedMarkers.has(item.to);\n\n          if (!hasFromLabel && !hasToLabel) {\n            return null;\n          }\n\n          addedMarkers.add(item.from);\n          addedMarkers.add(item.to);\n\n          const startPosition = scale(item.from);\n          const endPosition = scale(item.to);\n          const isSinglePointRange = startPosition === endPosition;\n\n          const hasSameStartPosition = isVertical\n            ? startPosition === rangeEndPosition\n            : startPosition === rangeStartPosition;\n          const isFirstItem = hasSameStartPosition && !hasMinValue;\n\n          const hasSameEndPosition = isVertical\n            ? endPosition === rangeStartPosition\n            : endPosition === rangeEndPosition;\n          const isLastItem = hasSameEndPosition && !hasMaxValue;\n\n          const labelAlignment = getLabelAlignment(\n            hasMaxValue,\n            isLastItem,\n            isVertical,\n          );\n\n          const labelEndPosition = getLabelEndPosition(\n            endPosition,\n            isSinglePointRange,\n            isLastItem,\n          );\n\n          return (\n            <Fragment key={`label-'${item.from}`}>\n              {hasFromLabel && (\n                <RangeLegendItemLabel\n                  labelId={item.from}\n                  startPosition={startPosition}\n                  endPosition={startPosition}\n                  text={item.labels.from}\n                  alignment={\n                    hasMinValue || !isFirstItem\n                      ? LABEL_ALIGNMENT.Center\n                      : LABEL_ALIGNMENT.End\n                  }\n                />\n              )}\n              {hasToLabel && !isSinglePointRange && (\n                <RangeLegendItemLabel\n                  labelId={item.to}\n                  startPosition={labelEndPosition}\n                  endPosition={labelEndPosition}\n                  text={item.labels.to}\n                  alignment={labelAlignment}\n                />\n              )}\n            </Fragment>\n          );\n        })}\n\n        {/* ARROWS */}\n        {Array.from(itemMarkers).map((marker) => {\n          const position = scale(marker);\n\n          return (\n            <RangeLegendItemMarker\n              key={`marker-'${marker}`}\n              position={position}\n              markerValue={marker}\n              isReversed={isVertical}\n              isSinglePointRange={singlePointRangeMarkers.has(marker)}\n            />\n          );\n        })}\n        <RangeLegendBoundaryLabels\n          items={internalRangeItems}\n          maxValue={maxValue}\n          minValue={minValue}\n        />\n      </g>\n\n      <RangeLegendSegmentsOverlay itemMarkers={Array.from(itemMarkers)} />\n    </svg>\n  );\n};\n"],
   "mappings": "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",
   "names": []
 }

package/esm/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.sty.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import "./RangeLegendMarkers.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var legendMarkersSvg = _7a468({ defaultClassName: "_u32l830-3-4-0", variantClassNames: { isHorizontal: { true: "_u32l831-3-4-0", false: "_u32l832-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendMarkersSvg = _7a468({ defaultClassName: "_u32l830-3-5-0", variantClassNames: { isHorizontal: { true: "_u32l831-3-5-0", false: "_u32l832-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   legendMarkersSvg
 };

package/esm/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.css.ts"],
-  "sourcesContent": ["import './RangeLegendMarkers.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var legendMarkersSvg = _7a468({defaultClassName:'_u32l830-3-4-0',variantClassNames:{isHorizontal:{true:'_u32l831-3-4-0',false:'_u32l832-3-4-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './RangeLegendMarkers.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var legendMarkersSvg = _7a468({defaultClassName:'_u32l830-3-5-0',variantClassNames:{isHorizontal:{true:'_u32l831-3-5-0',false:'_u32l832-3-5-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,cAAa,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.css CHANGED Viewed

@@ -1,21 +1,21 @@
-._6z9t250-3-4-0 {
+._6z9t250-3-5-0 {
   display: block;
   border-radius: 2px;
   overflow: hidden;
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._6z9t250-3-4-0:focus {
+._6z9t250-3-5-0:focus {
   outline: none;
 }
-._6z9t251-3-4-0 {
+._6z9t251-3-5-0 {
   margin: 0 auto;
   width: 100%;
   height: 10px;
 }
-._6z9t252-3-4-0 {
+._6z9t252-3-5-0 {
   height: 100%;
   width: 10px;
 }
-._6z9t250-3-4-0 rect:focus {
+._6z9t250-3-5-0 rect:focus {
   outline: none;
 }

package/esm/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
-import { ORIENTATION } from "../../../../chart-layout/types/constants.js";
+import { ORIENTATION } from "../../../../../constants.js";
 import { useOrientation } from "../../context/RangeLegendOrientationContext.js";
 import { useScale } from "../../context/RangeLegendScaleContext.js";
 import { useLegendFormattedLabels } from "../../hooks/use-legend-formatted-labels.js";

package/esm/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.tsx"],
-  "sourcesContent": ["import { useRef } from 'react';\n\nimport { ORIENTATION } from '../../../../chart-layout/types/constants.js';\nimport { useOrientation } from '../../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../../context/RangeLegendScaleContext.js';\nimport { useLegendFormattedLabels } from '../../hooks/use-legend-formatted-labels.js';\nimport type { InternalRangeItem } from '../../types/range-legend.internal.js';\nimport { RangeLegendSegmentsItem } from '../RangeLegendSegmentsItem.js';\nimport { legendSvg } from './RangeLegendSegments.sty.js';\n\ninterface RangeLegendSegmentsProps {\n  items: InternalRangeItem[];\n  minValue?: number;\n  maxValue?: number;\n}\n\nexport const RangeLegendSegments = (props: RangeLegendSegmentsProps) => {\n  const { items } = props;\n\n  const svgRef = useRef<SVGSVGElement>(null);\n\n  const { scale } = useScale();\n  const { orientation } = useOrientation();\n  const reversedScale = orientation === ORIENTATION.Vertical;\n  const internalRangeItems = useLegendFormattedLabels(items);\n\n  return (\n    <svg\n      ref={svgRef}\n      className={legendSvg({\n        isHorizontal: orientation === ORIENTATION.Horizontal,\n      })}\n      role=\"presentation\"\n      data-testid=\"range-legend-segments\"\n    >\n      {internalRangeItems.map((item) => {\n        const startPosition = scale(reversedScale ? item.to : item.from);\n        const endPosition = scale(reversedScale ? item.from : item.to);\n        const segmentSize = endPosition - startPosition;\n\n        return (\n          <RangeLegendSegmentsItem\n            key={`segment-'${item.from}-${item.to}`}\n            item={item}\n            segmentSize={segmentSize}\n            startPosition={startPosition}\n          />\n        );\n      })}\n    </svg>\n  );\n};\n"],
+  "sourcesContent": ["import { useRef } from 'react';\n\nimport { ORIENTATION } from '../../../../../constants.js';\nimport { useOrientation } from '../../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../../context/RangeLegendScaleContext.js';\nimport { useLegendFormattedLabels } from '../../hooks/use-legend-formatted-labels.js';\nimport type { InternalRangeItem } from '../../types/range-legend.internal.js';\nimport { RangeLegendSegmentsItem } from '../RangeLegendSegmentsItem.js';\nimport { legendSvg } from './RangeLegendSegments.sty.js';\n\ninterface RangeLegendSegmentsProps {\n  items: InternalRangeItem[];\n  minValue?: number;\n  maxValue?: number;\n}\n\nexport const RangeLegendSegments = (props: RangeLegendSegmentsProps) => {\n  const { items } = props;\n\n  const svgRef = useRef<SVGSVGElement>(null);\n\n  const { scale } = useScale();\n  const { orientation } = useOrientation();\n  const reversedScale = orientation === ORIENTATION.Vertical;\n  const internalRangeItems = useLegendFormattedLabels(items);\n\n  return (\n    <svg\n      ref={svgRef}\n      className={legendSvg({\n        isHorizontal: orientation === ORIENTATION.Horizontal,\n      })}\n      role=\"presentation\"\n      data-testid=\"range-legend-segments\"\n    >\n      {internalRangeItems.map((item) => {\n        const startPosition = scale(reversedScale ? item.to : item.from);\n        const endPosition = scale(reversedScale ? item.from : item.to);\n        const segmentSize = endPosition - startPosition;\n\n        return (\n          <RangeLegendSegmentsItem\n            key={`segment-'${item.from}-${item.to}`}\n            item={item}\n            segmentSize={segmentSize}\n            startPosition={startPosition}\n          />\n        );\n      })}\n    </svg>\n  );\n};\n"],
   "mappings": "AAyCU;AAzCV,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,gCAAgC;AAEzC,SAAS,+BAA+B;AACxC,SAAS,iBAAiB;AAQnB,MAAM,sBAAsB,CAAC,UAAoC;AACtE,QAAM,EAAE,MAAM,IAAI;AAElB,QAAM,SAAS,OAAsB,IAAI;AAEzC,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,gBAAgB,gBAAgB,YAAY;AAClD,QAAM,qBAAqB,yBAAyB,KAAK;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,UAAU;AAAA,QACnB,cAAc,gBAAgB,YAAY;AAAA,MAC5C,CAAC;AAAA,MACD,MAAK;AAAA,MACL,eAAY;AAAA,MAEX,6BAAmB,IAAI,CAAC,SAAS;AAChC,cAAM,gBAAgB,MAAM,gBAAgB,KAAK,KAAK,KAAK,IAAI;AAC/D,cAAM,cAAc,MAAM,gBAAgB,KAAK,OAAO,KAAK,EAAE;AAC7D,cAAM,cAAc,cAAc;AAElC,eACE;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,UAHK,YAAY,KAAK,IAAI,IAAI,KAAK,EAAE;AAAA,QAIvC;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.sty.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import "./RangeLegendSegments.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var legendSvg = _7a468({ defaultClassName: "_6z9t250-3-4-0", variantClassNames: { isHorizontal: { true: "_6z9t251-3-4-0", false: "_6z9t252-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendSvg = _7a468({ defaultClassName: "_6z9t250-3-5-0", variantClassNames: { isHorizontal: { true: "_6z9t251-3-5-0", false: "_6z9t252-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   legendSvg
 };

package/esm/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.css.ts"],
-  "sourcesContent": ["import './RangeLegendSegments.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var legendSvg = _7a468({defaultClassName:'_6z9t250-3-4-0',variantClassNames:{isHorizontal:{true:'_6z9t251-3-4-0',false:'_6z9t252-3-4-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './RangeLegendSegments.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var legendSvg = _7a468({defaultClassName:'_6z9t250-3-5-0',variantClassNames:{isHorizontal:{true:'_6z9t251-3-5-0',false:'_6z9t252-3-5-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,cAAa,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/legend/range/components/RangeLegendSegmentsItem.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import Colors from "@dynatrace/strato-design-tokens/colors";
-import { ORIENTATION } from "../../../chart-layout/types/constants.js";
+import { ORIENTATION } from "../../../../constants.js";
 import { DEFAULT_GAP_THICKNESS, DEFAULT_SEGMENT_COLOR } from "../constants.js";
 import { useOrientation } from "../context/RangeLegendOrientationContext.js";
 import { useScale } from "../context/RangeLegendScaleContext.js";

package/esm/charts/core/components/legend/range/components/RangeLegendSegmentsItem.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/legend/range/components/RangeLegendSegmentsItem.tsx"],
-  "sourcesContent": ["import { useRef } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { ORIENTATION } from '../../../chart-layout/types/constants.js';\nimport { DEFAULT_GAP_THICKNESS, DEFAULT_SEGMENT_COLOR } from '../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../context/RangeLegendScaleContext.js';\nimport { useLegendSegmentKeyboardHandler } from '../hooks/use-legend-segment-keyboard-handler.js';\nimport type { RangeItem } from '../types/range-legend.js';\nimport { getSegmentItemPositionAndSize } from '../utils/get-segment-item-position-and-size.js';\nimport { getStrokeDasharray } from '../utils/get-stroke-dasharray.js';\n\ninterface RangeLegendSegmentsItemProps {\n  item: RangeItem;\n  segmentSize: number;\n  startPosition: number;\n}\n\nexport const RangeLegendSegmentsItem = ({\n  item,\n  segmentSize,\n  startPosition,\n}: RangeLegendSegmentsItemProps) => {\n  const rectRef = useRef<SVGRectElement>(null);\n\n  const { orientation } = useOrientation();\n  const isVertical = orientation === ORIENTATION.Vertical;\n\n  const { scale } = useScale();\n  const [, endScalePosition] = scale.range();\n\n  const hasPreviousGap = startPosition > 0;\n  const hasNextGap = Math.ceil(startPosition + segmentSize) < endScalePosition;\n\n  const { itemHeight, itemWidth, itemX, itemY } = getSegmentItemPositionAndSize(\n    orientation,\n    startPosition,\n    segmentSize,\n  );\n\n  const strokeDashArray = getStrokeDasharray(\n    { height: itemHeight, width: itemWidth },\n    {\n      bottom: isVertical && hasNextGap,\n      left: !isVertical && hasPreviousGap,\n      right: !isVertical && hasNextGap,\n      top: isVertical && hasPreviousGap,\n    },\n  );\n\n  const { onBlurHandler, onFocusHandler, onKeyDownHandler } =\n    useLegendSegmentKeyboardHandler(\n      rectRef.current,\n      item.from,\n      item.to,\n      startPosition,\n    );\n\n  return (\n    <rect\n      ref={rectRef}\n      x={itemX}\n      y={itemY}\n      width={itemWidth}\n      height={itemHeight}\n      fill={item.color ?? DEFAULT_SEGMENT_COLOR}\n      stroke={Colors.Background.Base.Default}\n      strokeWidth={DEFAULT_GAP_THICKNESS}\n      strokeDasharray={strokeDashArray}\n      role=\"presentation\"\n      tabIndex={0}\n      onFocus={onFocusHandler}\n      onBlur={onBlurHandler}\n      onKeyDown={onKeyDownHandler}\n    />\n  );\n};\n"],
+  "sourcesContent": ["import { useRef } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { ORIENTATION } from '../../../../constants.js';\nimport { DEFAULT_GAP_THICKNESS, DEFAULT_SEGMENT_COLOR } from '../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../context/RangeLegendScaleContext.js';\nimport { useLegendSegmentKeyboardHandler } from '../hooks/use-legend-segment-keyboard-handler.js';\nimport type { RangeItem } from '../types/range-legend.js';\nimport { getSegmentItemPositionAndSize } from '../utils/get-segment-item-position-and-size.js';\nimport { getStrokeDasharray } from '../utils/get-stroke-dasharray.js';\n\ninterface RangeLegendSegmentsItemProps {\n  item: RangeItem;\n  segmentSize: number;\n  startPosition: number;\n}\n\nexport const RangeLegendSegmentsItem = ({\n  item,\n  segmentSize,\n  startPosition,\n}: RangeLegendSegmentsItemProps) => {\n  const rectRef = useRef<SVGRectElement>(null);\n\n  const { orientation } = useOrientation();\n  const isVertical = orientation === ORIENTATION.Vertical;\n\n  const { scale } = useScale();\n  const [, endScalePosition] = scale.range();\n\n  const hasPreviousGap = startPosition > 0;\n  const hasNextGap = Math.ceil(startPosition + segmentSize) < endScalePosition;\n\n  const { itemHeight, itemWidth, itemX, itemY } = getSegmentItemPositionAndSize(\n    orientation,\n    startPosition,\n    segmentSize,\n  );\n\n  const strokeDashArray = getStrokeDasharray(\n    { height: itemHeight, width: itemWidth },\n    {\n      bottom: isVertical && hasNextGap,\n      left: !isVertical && hasPreviousGap,\n      right: !isVertical && hasNextGap,\n      top: isVertical && hasPreviousGap,\n    },\n  );\n\n  const { onBlurHandler, onFocusHandler, onKeyDownHandler } =\n    useLegendSegmentKeyboardHandler(\n      rectRef.current,\n      item.from,\n      item.to,\n      startPosition,\n    );\n\n  return (\n    <rect\n      ref={rectRef}\n      x={itemX}\n      y={itemY}\n      width={itemWidth}\n      height={itemHeight}\n      fill={item.color ?? DEFAULT_SEGMENT_COLOR}\n      stroke={Colors.Background.Base.Default}\n      strokeWidth={DEFAULT_GAP_THICKNESS}\n      strokeDasharray={strokeDashArray}\n      role=\"presentation\"\n      tabIndex={0}\n      onFocus={onFocusHandler}\n      onBlur={onBlurHandler}\n      onKeyDown={onKeyDownHandler}\n    />\n  );\n};\n"],
   "mappings": "AA4DI;AA5DJ,SAAS,cAAc;AAEvB,OAAO,YAAY;AAEnB,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB,6BAA6B;AAC7D,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,uCAAuC;AAEhD,SAAS,qCAAqC;AAC9C,SAAS,0BAA0B;AAQ5B,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAAoC;AAClC,QAAM,UAAU,OAAuB,IAAI;AAE3C,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,aAAa,gBAAgB,YAAY;AAE/C,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,CAAC,EAAE,gBAAgB,IAAI,MAAM,MAAM;AAEzC,QAAM,iBAAiB,gBAAgB;AACvC,QAAM,aAAa,KAAK,KAAK,gBAAgB,WAAW,IAAI;AAE5D,QAAM,EAAE,YAAY,WAAW,OAAO,MAAM,IAAI;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB;AAAA,IACtB,EAAE,QAAQ,YAAY,OAAO,UAAU;AAAA,IACvC;AAAA,MACE,QAAQ,cAAc;AAAA,MACtB,MAAM,CAAC,cAAc;AAAA,MACrB,OAAO,CAAC,cAAc;AAAA,MACtB,KAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAEA,QAAM,EAAE,eAAe,gBAAgB,iBAAiB,IACtD;AAAA,IACE,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AAAA,EACF;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,KAAK,SAAS;AAAA,MACpB,QAAQ,OAAO,WAAW,KAAK;AAAA,MAC/B,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,WAAW;AAAA;AAAA,EACb;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/legend/range/components/RangeLegendSegmentsOverlay.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from "react";
-import { ORIENTATION } from "../../../chart-layout/types/constants.js";
+import { ORIENTATION } from "../../../../constants.js";
 import { OVERLAY_ADDITIONAL_SIZE, OVERLAY_OFFSET } from "../constants.js";
 import { useOrientation } from "../context/RangeLegendOrientationContext.js";
 import { useLegendSegmentsOverlayHandlers } from "../hooks/use-legend-segments-overlay-handlers.js";

package/esm/charts/core/components/legend/range/components/RangeLegendSegmentsOverlay.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/legend/range/components/RangeLegendSegmentsOverlay.tsx"],
-  "sourcesContent": ["import { useCallback, useEffect, useRef } from 'react';\n\nimport { ORIENTATION } from '../../../chart-layout/types/constants.js';\nimport { OVERLAY_ADDITIONAL_SIZE, OVERLAY_OFFSET } from '../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useLegendSegmentsOverlayHandlers } from '../hooks/use-legend-segments-overlay-handlers.js';\n\nexport const RangeLegendSegmentsOverlay = (props: {\n  itemMarkers: number[];\n}) => {\n  const { itemMarkers } = props;\n\n  const overlayRef = useRef<SVGRectElement>(null);\n\n  const { onMouseLeaveHandler, onMouseMoveHandler } =\n    useLegendSegmentsOverlayHandlers(itemMarkers);\n  const { orientation } = useOrientation();\n  const isVertical = orientation === ORIENTATION.Vertical;\n\n  const overlaySizeHandler = useCallback(\n    (legendBar: SVGSVGElement, overlayEl: SVGRectElement) => {\n      const { height: legendHeight, width: legendWidth } =\n        legendBar.getBoundingClientRect();\n\n      const overlayHeight =\n        legendHeight + (isVertical ? 0 : OVERLAY_ADDITIONAL_SIZE);\n      const overlayY = isVertical ? 0 : -OVERLAY_OFFSET;\n      const overlayWidth =\n        legendWidth + (isVertical ? OVERLAY_ADDITIONAL_SIZE : 0);\n      const overlayX = isVertical ? -OVERLAY_OFFSET : 0;\n\n      overlayEl.setAttribute('y', overlayY.toString());\n      overlayEl.setAttribute('x', overlayX.toString());\n      overlayEl.setAttribute('height', overlayHeight.toString());\n      overlayEl.setAttribute('width', overlayWidth.toString());\n    },\n    [isVertical],\n  );\n\n  useEffect(() => {\n    if (overlayRef.current) {\n      const legendBar = overlayRef.current.closest('svg')\n        ?.previousElementSibling as SVGSVGElement;\n\n      if (legendBar) {\n        overlaySizeHandler(legendBar, overlayRef.current);\n\n        const observer = new MutationObserver(() => {\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          overlaySizeHandler(legendBar, overlayRef.current!);\n        });\n\n        observer.observe(legendBar, {\n          attributes: true,\n          childList: true,\n          subtree: true,\n          characterData: true,\n        });\n\n        return () => observer.disconnect();\n      }\n    }\n  }, [overlaySizeHandler]);\n\n  return (\n    <rect\n      ref={overlayRef}\n      role=\"presentation\"\n      id=\"segments-overlay\"\n      fill=\"transparent\"\n      onMouseMove={onMouseMoveHandler}\n      onMouseLeave={onMouseLeaveHandler}\n    />\n  );\n};\n"],
+  "sourcesContent": ["import { useCallback, useEffect, useRef } from 'react';\n\nimport { ORIENTATION } from '../../../../constants.js';\nimport { OVERLAY_ADDITIONAL_SIZE, OVERLAY_OFFSET } from '../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useLegendSegmentsOverlayHandlers } from '../hooks/use-legend-segments-overlay-handlers.js';\n\nexport const RangeLegendSegmentsOverlay = (props: {\n  itemMarkers: number[];\n}) => {\n  const { itemMarkers } = props;\n\n  const overlayRef = useRef<SVGRectElement>(null);\n\n  const { onMouseLeaveHandler, onMouseMoveHandler } =\n    useLegendSegmentsOverlayHandlers(itemMarkers);\n  const { orientation } = useOrientation();\n  const isVertical = orientation === ORIENTATION.Vertical;\n\n  const overlaySizeHandler = useCallback(\n    (legendBar: SVGSVGElement, overlayEl: SVGRectElement) => {\n      const { height: legendHeight, width: legendWidth } =\n        legendBar.getBoundingClientRect();\n\n      const overlayHeight =\n        legendHeight + (isVertical ? 0 : OVERLAY_ADDITIONAL_SIZE);\n      const overlayY = isVertical ? 0 : -OVERLAY_OFFSET;\n      const overlayWidth =\n        legendWidth + (isVertical ? OVERLAY_ADDITIONAL_SIZE : 0);\n      const overlayX = isVertical ? -OVERLAY_OFFSET : 0;\n\n      overlayEl.setAttribute('y', overlayY.toString());\n      overlayEl.setAttribute('x', overlayX.toString());\n      overlayEl.setAttribute('height', overlayHeight.toString());\n      overlayEl.setAttribute('width', overlayWidth.toString());\n    },\n    [isVertical],\n  );\n\n  useEffect(() => {\n    if (overlayRef.current) {\n      const legendBar = overlayRef.current.closest('svg')\n        ?.previousElementSibling as SVGSVGElement;\n\n      if (legendBar) {\n        overlaySizeHandler(legendBar, overlayRef.current);\n\n        const observer = new MutationObserver(() => {\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          overlaySizeHandler(legendBar, overlayRef.current!);\n        });\n\n        observer.observe(legendBar, {\n          attributes: true,\n          childList: true,\n          subtree: true,\n          characterData: true,\n        });\n\n        return () => observer.disconnect();\n      }\n    }\n  }, [overlaySizeHandler]);\n\n  return (\n    <rect\n      ref={overlayRef}\n      role=\"presentation\"\n      id=\"segments-overlay\"\n      fill=\"transparent\"\n      onMouseMove={onMouseMoveHandler}\n      onMouseLeave={onMouseLeaveHandler}\n    />\n  );\n};\n"],
   "mappings": "AAiEI;AAjEJ,SAAS,aAAa,WAAW,cAAc;AAE/C,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB,sBAAsB;AACxD,SAAS,sBAAsB;AAC/B,SAAS,wCAAwC;AAE1C,MAAM,6BAA6B,CAAC,UAErC;AACJ,QAAM,EAAE,YAAY,IAAI;AAExB,QAAM,aAAa,OAAuB,IAAI;AAE9C,QAAM,EAAE,qBAAqB,mBAAmB,IAC9C,iCAAiC,WAAW;AAC9C,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,aAAa,gBAAgB,YAAY;AAE/C,QAAM,qBAAqB;AAAA,IACzB,CAAC,WAA0B,cAA8B;AACvD,YAAM,EAAE,QAAQ,cAAc,OAAO,YAAY,IAC/C,UAAU,sBAAsB;AAElC,YAAM,gBACJ,gBAAgB,aAAa,IAAI;AACnC,YAAM,WAAW,aAAa,IAAI,CAAC;AACnC,YAAM,eACJ,eAAe,aAAa,0BAA0B;AACxD,YAAM,WAAW,aAAa,CAAC,iBAAiB;AAEhD,gBAAU,aAAa,KAAK,SAAS,SAAS,CAAC;AAC/C,gBAAU,aAAa,KAAK,SAAS,SAAS,CAAC;AAC/C,gBAAU,aAAa,UAAU,cAAc,SAAS,CAAC;AACzD,gBAAU,aAAa,SAAS,aAAa,SAAS,CAAC;AAAA,IACzD;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,YAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtB,YAAM,YAAY,WAAW,QAAQ,QAAQ,KAAK,GAC9C;AAEJ,UAAI,WAAW;AACb,2BAAmB,WAAW,WAAW,OAAO;AAEhD,cAAM,WAAW,IAAI,iBAAiB,MAAM;AAE1C,6BAAmB,WAAW,WAAW,OAAQ;AAAA,QACnD,CAAC;AAED,iBAAS,QAAQ,WAAW;AAAA,UAC1B,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,SAAS;AAAA,UACT,eAAe;AAAA,QACjB,CAAC;AAED,eAAO,MAAM,SAAS,WAAW;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,kBAAkB,CAAC;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,IAAG;AAAA,MACH,MAAK;AAAA,MACL,aAAa;AAAA,MACb,cAAc;AAAA;AAAA,EAChB;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/legend/range/hooks/use-boundary-labels.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { isNumber } from "lodash-es";
-import { ORIENTATION } from "../../../chart-layout/types/constants.js";
+import { ORIENTATION } from "../../../../constants.js";
 import { useFormatter } from "../context/FormatterContext.js";
 import { useOrientation } from "../context/RangeLegendOrientationContext.js";
 import { useScale } from "../context/RangeLegendScaleContext.js";

package/esm/charts/core/components/legend/range/hooks/use-boundary-labels.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/legend/range/hooks/use-boundary-labels.ts"],
-  "sourcesContent": ["import { isNumber } from 'lodash-es';\n\nimport { ORIENTATION } from '../../../chart-layout/types/constants.js';\nimport { useFormatter } from '../context/FormatterContext.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../context/RangeLegendScaleContext.js';\nimport { InternalRangeItem } from '../types/range-legend.internal.js';\n\nexport const useBoundaryLabels = (\n  items: InternalRangeItem[],\n  rangeStartPosition: number,\n  rangeEndPosition: number,\n  min?: number,\n  max?: number,\n) => {\n  const { scale } = useScale();\n  const { formatter } = useFormatter();\n  const { orientation } = useOrientation();\n\n  const isReversed = orientation === ORIENTATION.Vertical;\n\n  const firstItem = items.find(\n    (item) => scale(isReversed ? item.to : item.from) === rangeStartPosition,\n  );\n  const lastItem = items.find(\n    (item) => scale(isReversed ? item.from : item.to) === rangeEndPosition,\n  );\n\n  const firstItemValue = firstItem?.labels[isReversed ? 'to' : 'from'] ?? '';\n  const lastItemValue = lastItem?.labels[isReversed ? 'from' : 'to'] ?? '';\n\n  if (isReversed) {\n    const formattedFirstValue = isNumber(max) ? formatter(max) : firstItemValue;\n\n    const formattedLastValue = isNumber(min) ? formatter(min) : lastItemValue;\n\n    return {\n      firstLabel: formattedFirstValue,\n      lastLabel: formattedLastValue,\n    };\n  }\n\n  const formattedFirstValue = isNumber(min) ? formatter(min) : firstItemValue;\n\n  const formattedLastValue = isNumber(max) ? formatter(max) : lastItemValue;\n\n  return {\n    firstLabel: formattedFirstValue,\n    lastLabel: formattedLastValue,\n  };\n};\n"],
+  "sourcesContent": ["import { isNumber } from 'lodash-es';\n\nimport { ORIENTATION } from '../../../../constants.js';\nimport { useFormatter } from '../context/FormatterContext.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../context/RangeLegendScaleContext.js';\nimport { InternalRangeItem } from '../types/range-legend.internal.js';\n\nexport const useBoundaryLabels = (\n  items: InternalRangeItem[],\n  rangeStartPosition: number,\n  rangeEndPosition: number,\n  min?: number,\n  max?: number,\n) => {\n  const { scale } = useScale();\n  const { formatter } = useFormatter();\n  const { orientation } = useOrientation();\n\n  const isReversed = orientation === ORIENTATION.Vertical;\n\n  const firstItem = items.find(\n    (item) => scale(isReversed ? item.to : item.from) === rangeStartPosition,\n  );\n  const lastItem = items.find(\n    (item) => scale(isReversed ? item.from : item.to) === rangeEndPosition,\n  );\n\n  const firstItemValue = firstItem?.labels[isReversed ? 'to' : 'from'] ?? '';\n  const lastItemValue = lastItem?.labels[isReversed ? 'from' : 'to'] ?? '';\n\n  if (isReversed) {\n    const formattedFirstValue = isNumber(max) ? formatter(max) : firstItemValue;\n\n    const formattedLastValue = isNumber(min) ? formatter(min) : lastItemValue;\n\n    return {\n      firstLabel: formattedFirstValue,\n      lastLabel: formattedLastValue,\n    };\n  }\n\n  const formattedFirstValue = isNumber(min) ? formatter(min) : firstItemValue;\n\n  const formattedLastValue = isNumber(max) ? formatter(max) : lastItemValue;\n\n  return {\n    firstLabel: formattedFirstValue,\n    lastLabel: formattedLastValue,\n  };\n};\n"],
   "mappings": "AAAA,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AAGlB,MAAM,oBAAoB,CAC/B,OACA,oBACA,kBACA,KACA,QACG;AACH,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,EAAE,UAAU,IAAI,aAAa;AACnC,QAAM,EAAE,YAAY,IAAI,eAAe;AAEvC,QAAM,aAAa,gBAAgB,YAAY;AAE/C,QAAM,YAAY,MAAM;AAAA,IACtB,CAAC,SAAS,MAAM,aAAa,KAAK,KAAK,KAAK,IAAI,MAAM;AAAA,EACxD;AACA,QAAM,WAAW,MAAM;AAAA,IACrB,CAAC,SAAS,MAAM,aAAa,KAAK,OAAO,KAAK,EAAE,MAAM;AAAA,EACxD;AAEA,QAAM,iBAAiB,WAAW,OAAO,aAAa,OAAO,MAAM,KAAK;AACxE,QAAM,gBAAgB,UAAU,OAAO,aAAa,SAAS,IAAI,KAAK;AAEtE,MAAI,YAAY;AACd,UAAMA,uBAAsB,SAAS,GAAG,IAAI,UAAU,GAAG,IAAI;AAE7D,UAAMC,sBAAqB,SAAS,GAAG,IAAI,UAAU,GAAG,IAAI;AAE5D,WAAO;AAAA,MACL,YAAYD;AAAA,MACZ,WAAWC;AAAA,IACb;AAAA,EACF;AAEA,QAAM,sBAAsB,SAAS,GAAG,IAAI,UAAU,GAAG,IAAI;AAE7D,QAAM,qBAAqB,SAAS,GAAG,IAAI,UAAU,GAAG,IAAI;AAE5D,SAAO;AAAA,IACL,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AACF;",
   "names": ["formattedFirstValue", "formattedLastValue"]
 }

package/esm/charts/core/components/legend/range/hooks/use-legend-boundary-label-collision-detector.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
-import { ORIENTATION } from "../../../chart-layout/types/constants.js";
+import { ORIENTATION } from "../../../../constants.js";
 import { useLegendSize } from "../../shared/context/LegendSizeContext.js";
 import {
   CONTAINER_PADDING,

package/esm/charts/core/components/legend/range/hooks/use-legend-boundary-label-collision-detector.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/legend/range/hooks/use-legend-boundary-label-collision-detector.ts"],
-  "sourcesContent": ["import { useCallback, useEffect, useState } from 'react';\n\nimport { Orientation } from '../../../../../../core/types/orientation.js';\nimport { ORIENTATION } from '../../../chart-layout/types/constants.js';\nimport { useLegendSize } from '../../shared/context/LegendSizeContext.js';\nimport {\n  CONTAINER_PADDING,\n  MAX_LEGEND_HEIGHT,\n  MAX_LEGEND_WIDTH,\n} from '../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useRangeLegendTruncation } from '../context/RangeLegendTruncationContext.js';\nimport { handleCollisionInVerticalLayout } from '../utils/handle-collision-in-vertical-layout.js';\nimport { handleTwoLabelsCollisions } from '../utils/handle-two-labels-collisions.js';\nimport { getLabelsPosition } from '../utils/labels-collision.js';\n\n/**\n * Hook responsible to detect and resolve the collisions for the boundary labels\n * (only first and last).\n * In the case where a collision is detected, the labels will be modified by\n * adding the text truncation.\n */\nexport const useLegendBoundaryLabelCollisionDetector = (\n  startLabel: string,\n  endLabel: string,\n) => {\n  const [labels, setLabels] = useState({ startLabel, endLabel });\n  const truncationMode = useRangeLegendTruncation();\n  const { orientation } = useOrientation();\n  const { width: legendWidth, height: legendHeight } = useLegendSize();\n\n  const containerLegendHeight = legendHeight - CONTAINER_PADDING * 2;\n  const containerLegendWidth = legendWidth - CONTAINER_PADDING * 2;\n\n  const width = Math.min(containerLegendWidth, MAX_LEGEND_WIDTH);\n  const height = Math.max(containerLegendHeight, MAX_LEGEND_HEIGHT);\n\n  const handleLabelCollision = useCallback(\n    (\n      firstLabel: string,\n      lastLabel: string,\n      orientation: Orientation,\n      width: number,\n    ): { startLabel: string; endLabel: string } => {\n      if (orientation === ORIENTATION.Horizontal) {\n        return handleTwoLabelsCollisions(\n          firstLabel,\n          lastLabel,\n          truncationMode,\n          [0, width],\n        );\n      }\n      const { startLabel, endLabel } = getLabelsPosition(\n        firstLabel,\n        lastLabel,\n        [0, width],\n      );\n      const { text: startLabelTruncated } = handleCollisionInVerticalLayout(\n        firstLabel,\n        startLabel,\n        'start',\n        truncationMode,\n        [0, width],\n      );\n      const { text: endLabelTruncated } = handleCollisionInVerticalLayout(\n        lastLabel,\n        endLabel,\n        'end',\n        truncationMode,\n        [0, width],\n      );\n\n      return { startLabel: startLabelTruncated, endLabel: endLabelTruncated };\n    },\n    [truncationMode],\n  );\n\n  useEffect(() => {\n    if (width <= 0 || height <= 0) {\n      return;\n    }\n    const labelsWithTruncation = handleLabelCollision(\n      startLabel,\n      endLabel,\n      orientation,\n      width,\n    );\n    setLabels({\n      startLabel: labelsWithTruncation.startLabel,\n      endLabel: labelsWithTruncation.endLabel,\n    });\n  }, [handleLabelCollision, startLabel, endLabel, orientation, width, height]);\n\n  return labels;\n};\n"],
+  "sourcesContent": ["import { useCallback, useEffect, useState } from 'react';\n\nimport { Orientation } from '../../../../../../core/types/orientation.js';\nimport { ORIENTATION } from '../../../../constants.js';\nimport { useLegendSize } from '../../shared/context/LegendSizeContext.js';\nimport {\n  CONTAINER_PADDING,\n  MAX_LEGEND_HEIGHT,\n  MAX_LEGEND_WIDTH,\n} from '../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useRangeLegendTruncation } from '../context/RangeLegendTruncationContext.js';\nimport { handleCollisionInVerticalLayout } from '../utils/handle-collision-in-vertical-layout.js';\nimport { handleTwoLabelsCollisions } from '../utils/handle-two-labels-collisions.js';\nimport { getLabelsPosition } from '../utils/labels-collision.js';\n\n/**\n * Hook responsible to detect and resolve the collisions for the boundary labels\n * (only first and last).\n * In the case where a collision is detected, the labels will be modified by\n * adding the text truncation.\n */\nexport const useLegendBoundaryLabelCollisionDetector = (\n  startLabel: string,\n  endLabel: string,\n) => {\n  const [labels, setLabels] = useState({ startLabel, endLabel });\n  const truncationMode = useRangeLegendTruncation();\n  const { orientation } = useOrientation();\n  const { width: legendWidth, height: legendHeight } = useLegendSize();\n\n  const containerLegendHeight = legendHeight - CONTAINER_PADDING * 2;\n  const containerLegendWidth = legendWidth - CONTAINER_PADDING * 2;\n\n  const width = Math.min(containerLegendWidth, MAX_LEGEND_WIDTH);\n  const height = Math.max(containerLegendHeight, MAX_LEGEND_HEIGHT);\n\n  const handleLabelCollision = useCallback(\n    (\n      firstLabel: string,\n      lastLabel: string,\n      orientation: Orientation,\n      width: number,\n    ): { startLabel: string; endLabel: string } => {\n      if (orientation === ORIENTATION.Horizontal) {\n        return handleTwoLabelsCollisions(\n          firstLabel,\n          lastLabel,\n          truncationMode,\n          [0, width],\n        );\n      }\n      const { startLabel, endLabel } = getLabelsPosition(\n        firstLabel,\n        lastLabel,\n        [0, width],\n      );\n      const { text: startLabelTruncated } = handleCollisionInVerticalLayout(\n        firstLabel,\n        startLabel,\n        'start',\n        truncationMode,\n        [0, width],\n      );\n      const { text: endLabelTruncated } = handleCollisionInVerticalLayout(\n        lastLabel,\n        endLabel,\n        'end',\n        truncationMode,\n        [0, width],\n      );\n\n      return { startLabel: startLabelTruncated, endLabel: endLabelTruncated };\n    },\n    [truncationMode],\n  );\n\n  useEffect(() => {\n    if (width <= 0 || height <= 0) {\n      return;\n    }\n    const labelsWithTruncation = handleLabelCollision(\n      startLabel,\n      endLabel,\n      orientation,\n      width,\n    );\n    setLabels({\n      startLabel: labelsWithTruncation.startLabel,\n      endLabel: labelsWithTruncation.endLabel,\n    });\n  }, [handleLabelCollision, startLabel, endLabel, orientation, width, height]);\n\n  return labels;\n};\n"],
   "mappings": "AAAA,SAAS,aAAa,WAAW,gBAAgB;AAGjD,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AACzC,SAAS,uCAAuC;AAChD,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAQ3B,MAAM,0CAA0C,CACrD,YACA,aACG;AACH,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE,YAAY,SAAS,CAAC;AAC7D,QAAM,iBAAiB,yBAAyB;AAChD,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,EAAE,OAAO,aAAa,QAAQ,aAAa,IAAI,cAAc;AAEnE,QAAM,wBAAwB,eAAe,oBAAoB;AACjE,QAAM,uBAAuB,cAAc,oBAAoB;AAE/D,QAAM,QAAQ,KAAK,IAAI,sBAAsB,gBAAgB;AAC7D,QAAM,SAAS,KAAK,IAAI,uBAAuB,iBAAiB;AAEhE,QAAM,uBAAuB;AAAA,IAC3B,CACE,YACA,WACAA,cACAC,WAC6C;AAC7C,UAAID,iBAAgB,YAAY,YAAY;AAC1C,eAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA,CAAC,GAAGC,MAAK;AAAA,QACX;AAAA,MACF;AACA,YAAM,EAAE,YAAAC,aAAY,UAAAC,UAAS,IAAI;AAAA,QAC/B;AAAA,QACA;AAAA,QACA,CAAC,GAAGF,MAAK;AAAA,MACX;AACA,YAAM,EAAE,MAAM,oBAAoB,IAAI;AAAA,QACpC;AAAA,QACAC;AAAA,QACA;AAAA,QACA;AAAA,QACA,CAAC,GAAGD,MAAK;AAAA,MACX;AACA,YAAM,EAAE,MAAM,kBAAkB,IAAI;AAAA,QAClC;AAAA,QACAE;AAAA,QACA;AAAA,QACA;AAAA,QACA,CAAC,GAAGF,MAAK;AAAA,MACX;AAEA,aAAO,EAAE,YAAY,qBAAqB,UAAU,kBAAkB;AAAA,IACxE;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,YAAU,MAAM;AACd,QAAI,SAAS,KAAK,UAAU,GAAG;AAC7B;AAAA,IACF;AACA,UAAM,uBAAuB;AAAA,MAC3B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,cAAU;AAAA,MACR,YAAY,qBAAqB;AAAA,MACjC,UAAU,qBAAqB;AAAA,IACjC,CAAC;AAAA,EACH,GAAG,CAAC,sBAAsB,YAAY,UAAU,aAAa,OAAO,MAAM,CAAC;AAE3E,SAAO;AACT;",
   "names": ["orientation", "width", "startLabel", "endLabel"]
 }

package/esm/charts/core/components/legend/range/hooks/use-legend-intermediate-label-collision-detector.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { ORIENTATION } from "../../../chart-layout/types/constants.js";
+import { ORIENTATION } from "../../../../constants.js";
 import { useLegendSize } from "../../shared/context/LegendSizeContext.js";
 import {
   MAX_LEGEND_WIDTH,

package/esm/charts/core/components/legend/range/hooks/use-legend-intermediate-label-collision-detector.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/legend/range/hooks/use-legend-intermediate-label-collision-detector.ts"],
-  "sourcesContent": ["import { useEffect, useState } from 'react';\n\nimport { ORIENTATION } from '../../../chart-layout/types/constants.js';\nimport { useLegendSize } from '../../shared/context/LegendSizeContext.js';\nimport {\n  MAX_LEGEND_WIDTH,\n  MAX_LEGEND_HEIGHT,\n  CONTAINER_PADDING,\n} from '../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../context/RangeLegendScaleContext.js';\nimport { useRangeLegendTruncation } from '../context/RangeLegendTruncationContext.js';\nimport {\n  HorizontalCoords,\n  LabelAlignment,\n  RangeLabel,\n} from '../types/range-legend.internal.js';\nimport { handleCollisionInHorizontalLayout } from '../utils/handle-collision-in-horizontal-layout.js';\nimport { handleCollisionInVerticalLayout } from '../utils/handle-collision-in-vertical-layout.js';\n\n/**\n * Hook responsible to detect and resolve the collisions for the intermediate labels.\n * The collision is relative to the bounds of the legend, meaning that if a\n * label will overflow the start segment or the end segment position, text truncation\n * will be applied.\n */\nexport const useLegendIntermediateLabelCollisionDetector = (\n  labelText: string,\n  segmentStartPosition: number,\n  segmentEndPosition: number,\n  alignment: LabelAlignment,\n  skipCollisionDetector: boolean,\n): RangeLabel => {\n  const [label, setLabel] = useState<RangeLabel>({ text: labelText });\n\n  const truncationMode = useRangeLegendTruncation();\n  const { orientation } = useOrientation();\n  const { scale } = useScale();\n  const { width: legendWidth, height: legendHeight } = useLegendSize();\n\n  const containerLegendHeight = legendHeight - CONTAINER_PADDING * 2;\n  const containerLegendWidth = legendWidth - CONTAINER_PADDING * 2;\n\n  const width = Math.min(containerLegendWidth, MAX_LEGEND_WIDTH);\n  const height = Math.max(containerLegendHeight, MAX_LEGEND_HEIGHT);\n\n  useEffect(() => {\n    if (skipCollisionDetector || width <= 0 || height <= 0) {\n      return;\n    }\n\n    const labelPosition: HorizontalCoords = {\n      start: segmentStartPosition,\n      end: segmentEndPosition,\n    };\n\n    if (orientation === ORIENTATION.Horizontal) {\n      const newLabel = handleCollisionInHorizontalLayout(\n        labelText,\n        labelPosition,\n        alignment,\n        truncationMode,\n        scale.range(),\n      );\n\n      setLabel(newLabel);\n    } else {\n      const newLabel = handleCollisionInVerticalLayout(\n        labelText,\n        labelPosition,\n        alignment,\n        truncationMode,\n        scale.range(),\n      );\n      setLabel(newLabel);\n    }\n  }, [\n    width,\n    height,\n    alignment,\n    segmentStartPosition,\n    segmentEndPosition,\n    skipCollisionDetector,\n    orientation,\n    labelText,\n    truncationMode,\n    scale,\n  ]);\n\n  return label;\n};\n"],
+  "sourcesContent": ["import { useEffect, useState } from 'react';\n\nimport { ORIENTATION } from '../../../../constants.js';\nimport { useLegendSize } from '../../shared/context/LegendSizeContext.js';\nimport {\n  MAX_LEGEND_WIDTH,\n  MAX_LEGEND_HEIGHT,\n  CONTAINER_PADDING,\n} from '../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../context/RangeLegendScaleContext.js';\nimport { useRangeLegendTruncation } from '../context/RangeLegendTruncationContext.js';\nimport {\n  HorizontalCoords,\n  LabelAlignment,\n  RangeLabel,\n} from '../types/range-legend.internal.js';\nimport { handleCollisionInHorizontalLayout } from '../utils/handle-collision-in-horizontal-layout.js';\nimport { handleCollisionInVerticalLayout } from '../utils/handle-collision-in-vertical-layout.js';\n\n/**\n * Hook responsible to detect and resolve the collisions for the intermediate labels.\n * The collision is relative to the bounds of the legend, meaning that if a\n * label will overflow the start segment or the end segment position, text truncation\n * will be applied.\n */\nexport const useLegendIntermediateLabelCollisionDetector = (\n  labelText: string,\n  segmentStartPosition: number,\n  segmentEndPosition: number,\n  alignment: LabelAlignment,\n  skipCollisionDetector: boolean,\n): RangeLabel => {\n  const [label, setLabel] = useState<RangeLabel>({ text: labelText });\n\n  const truncationMode = useRangeLegendTruncation();\n  const { orientation } = useOrientation();\n  const { scale } = useScale();\n  const { width: legendWidth, height: legendHeight } = useLegendSize();\n\n  const containerLegendHeight = legendHeight - CONTAINER_PADDING * 2;\n  const containerLegendWidth = legendWidth - CONTAINER_PADDING * 2;\n\n  const width = Math.min(containerLegendWidth, MAX_LEGEND_WIDTH);\n  const height = Math.max(containerLegendHeight, MAX_LEGEND_HEIGHT);\n\n  useEffect(() => {\n    if (skipCollisionDetector || width <= 0 || height <= 0) {\n      return;\n    }\n\n    const labelPosition: HorizontalCoords = {\n      start: segmentStartPosition,\n      end: segmentEndPosition,\n    };\n\n    if (orientation === ORIENTATION.Horizontal) {\n      const newLabel = handleCollisionInHorizontalLayout(\n        labelText,\n        labelPosition,\n        alignment,\n        truncationMode,\n        scale.range(),\n      );\n\n      setLabel(newLabel);\n    } else {\n      const newLabel = handleCollisionInVerticalLayout(\n        labelText,\n        labelPosition,\n        alignment,\n        truncationMode,\n        scale.range(),\n      );\n      setLabel(newLabel);\n    }\n  }, [\n    width,\n    height,\n    alignment,\n    segmentStartPosition,\n    segmentEndPosition,\n    skipCollisionDetector,\n    orientation,\n    labelText,\n    truncationMode,\n    scale,\n  ]);\n\n  return label;\n};\n"],
   "mappings": "AAAA,SAAS,WAAW,gBAAgB;AAEpC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,gCAAgC;AAMzC,SAAS,yCAAyC;AAClD,SAAS,uCAAuC;AAQzC,MAAM,8CAA8C,CACzD,WACA,sBACA,oBACA,WACA,0BACe;AACf,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAqB,EAAE,MAAM,UAAU,CAAC;AAElE,QAAM,iBAAiB,yBAAyB;AAChD,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,EAAE,OAAO,aAAa,QAAQ,aAAa,IAAI,cAAc;AAEnE,QAAM,wBAAwB,eAAe,oBAAoB;AACjE,QAAM,uBAAuB,cAAc,oBAAoB;AAE/D,QAAM,QAAQ,KAAK,IAAI,sBAAsB,gBAAgB;AAC7D,QAAM,SAAS,KAAK,IAAI,uBAAuB,iBAAiB;AAEhE,YAAU,MAAM;AACd,QAAI,yBAAyB,SAAS,KAAK,UAAU,GAAG;AACtD;AAAA,IACF;AAEA,UAAM,gBAAkC;AAAA,MACtC,OAAO;AAAA,MACP,KAAK;AAAA,IACP;AAEA,QAAI,gBAAgB,YAAY,YAAY;AAC1C,YAAM,WAAW;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,MAAM;AAAA,MACd;AAEA,eAAS,QAAQ;AAAA,IACnB,OAAO;AACL,YAAM,WAAW;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,MAAM;AAAA,MACd;AACA,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
   "names": []
 }

package/esm/charts/core/components/legend/range/hooks/use-legend-segment-keyboard-handler.js CHANGED Viewed

@@ -5,7 +5,7 @@ import {
   useRef
 } from "react";
 import { useSetHoveredMarkerId } from "./store/use-set-hovered-marker-id.js";
-import { ORIENTATION } from "../../../chart-layout/types/constants.js";
+import { ORIENTATION } from "../../../../constants.js";
 import { useOrientation } from "../context/RangeLegendOrientationContext.js";
 const useLegendSegmentKeyboardHandler = (rectEl, itemFrom, itemTo, startPosition) => {
   const isFirstSegment = startPosition === 0;

package/esm/charts/core/components/legend/range/hooks/use-legend-segment-keyboard-handler.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/legend/range/hooks/use-legend-segment-keyboard-handler.ts"],
-  "sourcesContent": ["import {\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  type KeyboardEvent,\n} from 'react';\n\nimport { useSetHoveredMarkerId } from './store/use-set-hovered-marker-id.js';\nimport { ORIENTATION } from '../../../chart-layout/types/constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\n\nexport const useLegendSegmentKeyboardHandler = (\n  rectEl: SVGRectElement | null,\n  itemFrom: number,\n  itemTo: number,\n  startPosition: number,\n) => {\n  const isFirstSegment = startPosition === 0;\n  const hoveredMarkerId = useRef<number>(isFirstSegment ? itemFrom : itemTo);\n\n  const { setHoveredMarkerId } = useSetHoveredMarkerId();\n  const { orientation } = useOrientation();\n\n  const moveFocusForward = useCallback(() => {\n    rectEl?.parentElement?.nextElementSibling?.querySelector('rect')?.focus();\n    rectEl?.blur();\n  }, [rectEl]);\n\n  const moveFocusBackward = useCallback(() => {\n    rectEl?.parentElement?.previousElementSibling\n      ?.querySelector('rect')\n      ?.focus();\n    rectEl?.blur();\n  }, [rectEl]);\n\n  const movePositionForward = useCallback(() => {\n    hoveredMarkerId.current = itemTo;\n    setHoveredMarkerId(hoveredMarkerId.current);\n  }, [itemTo, setHoveredMarkerId]);\n\n  const movePositionBackward = useCallback(() => {\n    hoveredMarkerId.current = itemFrom;\n    setHoveredMarkerId(hoveredMarkerId.current);\n  }, [itemFrom, setHoveredMarkerId]);\n\n  const KEYDOWN_HANDLERS: Record<string, Record<string, () => void>> = useMemo(\n    () => ({\n      [ORIENTATION.Horizontal]: {\n        ArrowRight: () => {\n          const isFirstPosition =\n            hoveredMarkerId.current === itemFrom && isFirstSegment;\n\n          if (isFirstPosition) {\n            movePositionForward();\n          } else {\n            moveFocusForward();\n          }\n        },\n        ArrowLeft: () => {\n          const isSecondPosition =\n            hoveredMarkerId.current === itemTo && isFirstSegment;\n\n          if (isSecondPosition) {\n            movePositionBackward();\n          } else {\n            moveFocusBackward();\n          }\n        },\n      },\n      [ORIENTATION.Vertical]: {\n        ArrowDown: () => {\n          const isFirstPosition =\n            hoveredMarkerId.current === itemFrom && isFirstSegment;\n\n          if (isFirstPosition) {\n            movePositionForward();\n          } else {\n            moveFocusForward();\n          }\n        },\n        ArrowUp: () => {\n          const isSecondPosition =\n            hoveredMarkerId.current === itemTo && isFirstSegment;\n\n          if (isSecondPosition) {\n            movePositionBackward();\n          } else {\n            moveFocusBackward();\n          }\n        },\n      },\n    }),\n    [\n      isFirstSegment,\n      itemFrom,\n      itemTo,\n      moveFocusBackward,\n      moveFocusForward,\n      movePositionBackward,\n      movePositionForward,\n    ],\n  );\n\n  const onFocusHandler = useCallback(\n    () => setHoveredMarkerId(hoveredMarkerId.current),\n    [setHoveredMarkerId],\n  );\n\n  const onBlurHandler = useCallback(\n    () => setHoveredMarkerId(null),\n    [setHoveredMarkerId],\n  );\n\n  const onKeyDownHandler = useCallback(\n    (event: KeyboardEvent<SVGRectElement>) => {\n      if (event.key === 'Tab') {\n        const isFirstPosition =\n          hoveredMarkerId.current === itemFrom && isFirstSegment;\n\n        if (isFirstPosition) {\n          event.preventDefault();\n          hoveredMarkerId.current = itemTo;\n          setHoveredMarkerId(hoveredMarkerId.current);\n        }\n      }\n\n      if (event.key in KEYDOWN_HANDLERS[orientation]) {\n        KEYDOWN_HANDLERS[orientation][event.key]();\n      }\n    },\n    [\n      KEYDOWN_HANDLERS,\n      isFirstSegment,\n      itemFrom,\n      itemTo,\n      orientation,\n      setHoveredMarkerId,\n    ],\n  );\n\n  useLayoutEffect(() => {\n    if (isFirstSegment) {\n      const parentSvg = rectEl?.closest('svg');\n\n      if (parentSvg) {\n        const eventListenerCallback = (event: FocusEvent) => {\n          event.preventDefault();\n          hoveredMarkerId.current = itemFrom;\n        };\n\n        parentSvg.addEventListener('blur', eventListenerCallback);\n\n        return () =>\n          parentSvg.removeEventListener('blur', eventListenerCallback);\n      }\n    }\n  }, [isFirstSegment, itemFrom, rectEl]);\n\n  return {\n    onBlurHandler,\n    onFocusHandler,\n    onKeyDownHandler,\n  };\n};\n"],
+  "sourcesContent": ["import {\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  type KeyboardEvent,\n} from 'react';\n\nimport { useSetHoveredMarkerId } from './store/use-set-hovered-marker-id.js';\nimport { ORIENTATION } from '../../../../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\n\nexport const useLegendSegmentKeyboardHandler = (\n  rectEl: SVGRectElement | null,\n  itemFrom: number,\n  itemTo: number,\n  startPosition: number,\n) => {\n  const isFirstSegment = startPosition === 0;\n  const hoveredMarkerId = useRef<number>(isFirstSegment ? itemFrom : itemTo);\n\n  const { setHoveredMarkerId } = useSetHoveredMarkerId();\n  const { orientation } = useOrientation();\n\n  const moveFocusForward = useCallback(() => {\n    rectEl?.parentElement?.nextElementSibling?.querySelector('rect')?.focus();\n    rectEl?.blur();\n  }, [rectEl]);\n\n  const moveFocusBackward = useCallback(() => {\n    rectEl?.parentElement?.previousElementSibling\n      ?.querySelector('rect')\n      ?.focus();\n    rectEl?.blur();\n  }, [rectEl]);\n\n  const movePositionForward = useCallback(() => {\n    hoveredMarkerId.current = itemTo;\n    setHoveredMarkerId(hoveredMarkerId.current);\n  }, [itemTo, setHoveredMarkerId]);\n\n  const movePositionBackward = useCallback(() => {\n    hoveredMarkerId.current = itemFrom;\n    setHoveredMarkerId(hoveredMarkerId.current);\n  }, [itemFrom, setHoveredMarkerId]);\n\n  const KEYDOWN_HANDLERS: Record<string, Record<string, () => void>> = useMemo(\n    () => ({\n      [ORIENTATION.Horizontal]: {\n        ArrowRight: () => {\n          const isFirstPosition =\n            hoveredMarkerId.current === itemFrom && isFirstSegment;\n\n          if (isFirstPosition) {\n            movePositionForward();\n          } else {\n            moveFocusForward();\n          }\n        },\n        ArrowLeft: () => {\n          const isSecondPosition =\n            hoveredMarkerId.current === itemTo && isFirstSegment;\n\n          if (isSecondPosition) {\n            movePositionBackward();\n          } else {\n            moveFocusBackward();\n          }\n        },\n      },\n      [ORIENTATION.Vertical]: {\n        ArrowDown: () => {\n          const isFirstPosition =\n            hoveredMarkerId.current === itemFrom && isFirstSegment;\n\n          if (isFirstPosition) {\n            movePositionForward();\n          } else {\n            moveFocusForward();\n          }\n        },\n        ArrowUp: () => {\n          const isSecondPosition =\n            hoveredMarkerId.current === itemTo && isFirstSegment;\n\n          if (isSecondPosition) {\n            movePositionBackward();\n          } else {\n            moveFocusBackward();\n          }\n        },\n      },\n    }),\n    [\n      isFirstSegment,\n      itemFrom,\n      itemTo,\n      moveFocusBackward,\n      moveFocusForward,\n      movePositionBackward,\n      movePositionForward,\n    ],\n  );\n\n  const onFocusHandler = useCallback(\n    () => setHoveredMarkerId(hoveredMarkerId.current),\n    [setHoveredMarkerId],\n  );\n\n  const onBlurHandler = useCallback(\n    () => setHoveredMarkerId(null),\n    [setHoveredMarkerId],\n  );\n\n  const onKeyDownHandler = useCallback(\n    (event: KeyboardEvent<SVGRectElement>) => {\n      if (event.key === 'Tab') {\n        const isFirstPosition =\n          hoveredMarkerId.current === itemFrom && isFirstSegment;\n\n        if (isFirstPosition) {\n          event.preventDefault();\n          hoveredMarkerId.current = itemTo;\n          setHoveredMarkerId(hoveredMarkerId.current);\n        }\n      }\n\n      if (event.key in KEYDOWN_HANDLERS[orientation]) {\n        KEYDOWN_HANDLERS[orientation][event.key]();\n      }\n    },\n    [\n      KEYDOWN_HANDLERS,\n      isFirstSegment,\n      itemFrom,\n      itemTo,\n      orientation,\n      setHoveredMarkerId,\n    ],\n  );\n\n  useLayoutEffect(() => {\n    if (isFirstSegment) {\n      const parentSvg = rectEl?.closest('svg');\n\n      if (parentSvg) {\n        const eventListenerCallback = (event: FocusEvent) => {\n          event.preventDefault();\n          hoveredMarkerId.current = itemFrom;\n        };\n\n        parentSvg.addEventListener('blur', eventListenerCallback);\n\n        return () =>\n          parentSvg.removeEventListener('blur', eventListenerCallback);\n      }\n    }\n  }, [isFirstSegment, itemFrom, rectEl]);\n\n  return {\n    onBlurHandler,\n    onFocusHandler,\n    onKeyDownHandler,\n  };\n};\n"],
   "mappings": "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",
   "names": []
 }

package/esm/charts/core/components/legend/range/hooks/use-legend-segments-overlay-handlers.js CHANGED Viewed

@@ -1,5 +1,5 @@
+import { ORIENTATION } from "../../../../constants.js";
 import { useChartLayoutLoading } from "../../../chart-layout/hooks/useChartLayoutLoading.js";
-import { ORIENTATION } from "../../../chart-layout/types/constants.js";
 import { useOrientation } from "../context/RangeLegendOrientationContext.js";
 import { useScale } from "../context/RangeLegendScaleContext.js";
 import { useSetHoveredMarkerId } from "../hooks/store/use-set-hovered-marker-id.js";

package/esm/charts/core/components/legend/range/hooks/use-legend-segments-overlay-handlers.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/legend/range/hooks/use-legend-segments-overlay-handlers.ts"],
-  "sourcesContent": ["import { type MouseEvent } from 'react';\n\nimport { useChartLayoutLoading } from '../../../chart-layout/hooks/useChartLayoutLoading.js';\nimport { ORIENTATION } from '../../../chart-layout/types/constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../context/RangeLegendScaleContext.js';\nimport { useSetHoveredMarkerId } from '../hooks/store/use-set-hovered-marker-id.js';\n\n// https://en.wikipedia.org/wiki/Euclidean_distance\nconst distance = (point: number, pointToCheck: number) =>\n  Math.sqrt(Math.pow(point - pointToCheck, 2));\n\n/**\n * This hook is responsible for calculating the closest marker when\n * range legend overlay is hovered, using euclidian distance math,\n * setting the corresponding marker in order to show to the consumer the marker\n *\n * @param itemMarkers - a set of markers\n * @param overlayEl - the overlay element\n *\n * @returns Mouse movement handlers\n */\nexport const useLegendSegmentsOverlayHandlers = (itemMarkers: number[]) => {\n  const { setHoveredMarkerId } = useSetHoveredMarkerId();\n  const { scale } = useScale();\n  const { orientation } = useOrientation();\n  const isLoading = useChartLayoutLoading();\n  const isHorizontal = orientation === ORIENTATION.Horizontal;\n\n  const markersWithPosition = itemMarkers.map((marker) => ({\n    marker,\n    position: scale(marker),\n  }));\n\n  const onMouseMoveHandler = (event: MouseEvent<SVGRectElement>) => {\n    const { clientX, clientY } = event;\n    const { left, top } = event.currentTarget.getBoundingClientRect();\n    const mousePosition = isHorizontal ? clientX - left : clientY - top;\n\n    if (!isLoading) {\n      const closest = markersWithPosition.reduce(\n        (acc, cur) =>\n          distance(acc.position, mousePosition) <\n          distance(cur.position, mousePosition)\n            ? acc\n            : cur,\n        markersWithPosition[0],\n      );\n\n      setHoveredMarkerId(closest.marker);\n    }\n  };\n\n  const onMouseLeaveHandler = () => setHoveredMarkerId(null);\n\n  return {\n    onMouseMoveHandler,\n    onMouseLeaveHandler,\n  };\n};\n"],
-  "mappings": "AAEA,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,6BAA6B;AAGtC,MAAM,WAAW,CAAC,OAAe,iBAC/B,KAAK,KAAK,KAAK,IAAI,QAAQ,cAAc,CAAC,CAAC;AAYtC,MAAM,mCAAmC,CAAC,gBAA0B;AACzE,QAAM,EAAE,mBAAmB,IAAI,sBAAsB;AACrD,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,YAAY,sBAAsB;AACxC,QAAM,eAAe,gBAAgB,YAAY;AAEjD,QAAM,sBAAsB,YAAY,IAAI,CAAC,YAAY;AAAA,IACvD;AAAA,IACA,UAAU,MAAM,MAAM;AAAA,EACxB,EAAE;AAEF,QAAM,qBAAqB,CAAC,UAAsC;AAChE,UAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,UAAM,EAAE,MAAM,IAAI,IAAI,MAAM,cAAc,sBAAsB;AAChE,UAAM,gBAAgB,eAAe,UAAU,OAAO,UAAU;AAEhE,QAAI,CAAC,WAAW;AACd,YAAM,UAAU,oBAAoB;AAAA,QAClC,CAAC,KAAK,QACJ,SAAS,IAAI,UAAU,aAAa,IACpC,SAAS,IAAI,UAAU,aAAa,IAChC,MACA;AAAA,QACN,oBAAoB,CAAC;AAAA,MACvB;AAEA,yBAAmB,QAAQ,MAAM;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,sBAAsB,MAAM,mBAAmB,IAAI;AAEzD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { type MouseEvent } from 'react';\n\nimport { ORIENTATION } from '../../../../constants.js';\nimport { useChartLayoutLoading } from '../../../chart-layout/hooks/useChartLayoutLoading.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../context/RangeLegendScaleContext.js';\nimport { useSetHoveredMarkerId } from '../hooks/store/use-set-hovered-marker-id.js';\n\n// https://en.wikipedia.org/wiki/Euclidean_distance\nconst distance = (point: number, pointToCheck: number) =>\n  Math.sqrt(Math.pow(point - pointToCheck, 2));\n\n/**\n * This hook is responsible for calculating the closest marker when\n * range legend overlay is hovered, using euclidian distance math,\n * setting the corresponding marker in order to show to the consumer the marker\n *\n * @param itemMarkers - a set of markers\n * @param overlayEl - the overlay element\n *\n * @returns Mouse movement handlers\n */\nexport const useLegendSegmentsOverlayHandlers = (itemMarkers: number[]) => {\n  const { setHoveredMarkerId } = useSetHoveredMarkerId();\n  const { scale } = useScale();\n  const { orientation } = useOrientation();\n  const isLoading = useChartLayoutLoading();\n  const isHorizontal = orientation === ORIENTATION.Horizontal;\n\n  const markersWithPosition = itemMarkers.map((marker) => ({\n    marker,\n    position: scale(marker),\n  }));\n\n  const onMouseMoveHandler = (event: MouseEvent<SVGRectElement>) => {\n    const { clientX, clientY } = event;\n    const { left, top } = event.currentTarget.getBoundingClientRect();\n    const mousePosition = isHorizontal ? clientX - left : clientY - top;\n\n    if (!isLoading) {\n      const closest = markersWithPosition.reduce(\n        (acc, cur) =>\n          distance(acc.position, mousePosition) <\n          distance(cur.position, mousePosition)\n            ? acc\n            : cur,\n        markersWithPosition[0],\n      );\n\n      setHoveredMarkerId(closest.marker);\n    }\n  };\n\n  const onMouseLeaveHandler = () => setHoveredMarkerId(null);\n\n  return {\n    onMouseMoveHandler,\n    onMouseLeaveHandler,\n  };\n};\n"],
+  "mappings": "AAEA,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,6BAA6B;AAGtC,MAAM,WAAW,CAAC,OAAe,iBAC/B,KAAK,KAAK,KAAK,IAAI,QAAQ,cAAc,CAAC,CAAC;AAYtC,MAAM,mCAAmC,CAAC,gBAA0B;AACzE,QAAM,EAAE,mBAAmB,IAAI,sBAAsB;AACrD,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,YAAY,sBAAsB;AACxC,QAAM,eAAe,gBAAgB,YAAY;AAEjD,QAAM,sBAAsB,YAAY,IAAI,CAAC,YAAY;AAAA,IACvD;AAAA,IACA,UAAU,MAAM,MAAM;AAAA,EACxB,EAAE;AAEF,QAAM,qBAAqB,CAAC,UAAsC;AAChE,UAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,UAAM,EAAE,MAAM,IAAI,IAAI,MAAM,cAAc,sBAAsB;AAChE,UAAM,gBAAgB,eAAe,UAAU,OAAO,UAAU;AAEhE,QAAI,CAAC,WAAW;AACd,YAAM,UAAU,oBAAoB;AAAA,QAClC,CAAC,KAAK,QACJ,SAAS,IAAI,UAAU,aAAa,IACpC,SAAS,IAAI,UAAU,aAAa,IAChC,MACA;AAAA,QACN,oBAAoB,CAAC;AAAA,MACvB;AAEA,yBAAmB,QAAQ,MAAM;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,sBAAsB,MAAM,mBAAmB,IAAI;AAEzD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/core/components/legend/range/utils/get-segment-item-position-and-size.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ORIENTATION } from "../../../chart-layout/types/constants.js";
+import { ORIENTATION } from "../../../../constants.js";
 import { DEFAULT_ITEM_THICKNESS, DEFAULT_SEGMENT_SIZE } from "../constants.js";
 const getSegmentItemPositionAndSize = (orientation, startPosition, size) => {
   const itemPosition = size === 0 && startPosition > DEFAULT_SEGMENT_SIZE ? startPosition - DEFAULT_SEGMENT_SIZE : startPosition;

package/esm/charts/core/components/legend/range/utils/get-segment-item-position-and-size.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/legend/range/utils/get-segment-item-position-and-size.ts"],
-  "sourcesContent": ["import { ChartLegendOrientation } from '../../../../types/legend.js';\nimport { ORIENTATION } from '../../../chart-layout/types/constants.js';\nimport { DEFAULT_ITEM_THICKNESS, DEFAULT_SEGMENT_SIZE } from '../constants.js';\nimport { SegmentPositionAndSize } from '../types/range-legend.internal.js';\n\nexport const getSegmentItemPositionAndSize = (\n  orientation: ChartLegendOrientation,\n  startPosition: number,\n  size: number,\n): SegmentPositionAndSize => {\n  const itemPosition =\n    size === 0 && startPosition > DEFAULT_SEGMENT_SIZE\n      ? startPosition - DEFAULT_SEGMENT_SIZE\n      : startPosition;\n\n  if (orientation === ORIENTATION.Horizontal) {\n    return {\n      itemX: itemPosition,\n      itemY: 0,\n      itemHeight: DEFAULT_ITEM_THICKNESS,\n      itemWidth: size || DEFAULT_SEGMENT_SIZE,\n    };\n  }\n\n  return {\n    itemX: 0,\n    itemY: itemPosition,\n    itemHeight: size || DEFAULT_SEGMENT_SIZE,\n    itemWidth: DEFAULT_ITEM_THICKNESS,\n  };\n};\n"],
-  "mappings": "AACA,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB,4BAA4B;AAGtD,MAAM,gCAAgC,CAC3C,aACA,eACA,SAC2B;AAC3B,QAAM,eACJ,SAAS,KAAK,gBAAgB,uBAC1B,gBAAgB,uBAChB;AAEN,MAAI,gBAAgB,YAAY,YAAY;AAC1C,WAAO;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,WAAW,QAAQ;AAAA,IACrB;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY,QAAQ;AAAA,IACpB,WAAW;AAAA,EACb;AACF;",
+  "sourcesContent": ["import { ORIENTATION } from '../../../../constants.js';\nimport { ChartLegendOrientation } from '../../../../types/legend.js';\nimport { DEFAULT_ITEM_THICKNESS, DEFAULT_SEGMENT_SIZE } from '../constants.js';\nimport { SegmentPositionAndSize } from '../types/range-legend.internal.js';\n\nexport const getSegmentItemPositionAndSize = (\n  orientation: ChartLegendOrientation,\n  startPosition: number,\n  size: number,\n): SegmentPositionAndSize => {\n  const itemPosition =\n    size === 0 && startPosition > DEFAULT_SEGMENT_SIZE\n      ? startPosition - DEFAULT_SEGMENT_SIZE\n      : startPosition;\n\n  if (orientation === ORIENTATION.Horizontal) {\n    return {\n      itemX: itemPosition,\n      itemY: 0,\n      itemHeight: DEFAULT_ITEM_THICKNESS,\n      itemWidth: size || DEFAULT_SEGMENT_SIZE,\n    };\n  }\n\n  return {\n    itemX: 0,\n    itemY: itemPosition,\n    itemHeight: size || DEFAULT_SEGMENT_SIZE,\n    itemWidth: DEFAULT_ITEM_THICKNESS,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,wBAAwB,4BAA4B;AAGtD,MAAM,gCAAgC,CAC3C,aACA,eACA,SAC2B;AAC3B,QAAM,eACJ,SAAS,KAAK,gBAAgB,uBAC1B,gBAAgB,uBAChB;AAEN,MAAI,gBAAgB,YAAY,YAAY;AAC1C,WAAO;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,WAAW,QAAQ;AAAA,IACrB;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY,QAAQ;AAAA,IACpB,WAAW;AAAA,EACb;AACF;",
   "names": []
 }

package/esm/charts/core/components/loader-overlay/LoaderOverlay.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._bs5vaz0-3-4-0 {
+._bs5vaz0-3-5-0 {
   position: absolute;
   top: 0;
   width: 100%;
@@ -6,7 +6,7 @@
   z-index: 1;
   pointer-events: none;
 }
-._bs5vaz1-3-4-0 {
+._bs5vaz1-3-5-0 {
   position: absolute;
   top: 0;
   width: 100%;

package/esm/charts/core/components/loader-overlay/LoaderOverlay.sty.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import "./LoaderOverlay.css";
-var loaderOverlay = "_bs5vaz0-3-4-0";
-var progressCircle = "_bs5vaz1-3-4-0";
+var loaderOverlay = "_bs5vaz0-3-5-0";
+var progressCircle = "_bs5vaz1-3-5-0";
 export {
   loaderOverlay,
   progressCircle

package/esm/charts/core/components/loader-overlay/LoaderOverlay.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/loader-overlay/LoaderOverlay.css.ts"],
-  "sourcesContent": ["import './LoaderOverlay.css';\nexport var loaderOverlay = '_bs5vaz0-3-4-0';\nexport var progressCircle = '_bs5vaz1-3-4-0';"],
+  "sourcesContent": ["import './LoaderOverlay.css';\nexport var loaderOverlay = '_bs5vaz0-3-5-0';\nexport var progressCircle = '_bs5vaz1-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;",
   "names": []
 }

package/esm/charts/core/components/overlay-tooltip/OverlayTooltip.js CHANGED Viewed

@@ -29,7 +29,18 @@ const OverlayTooltip = Object.assign(TooltipRoot, {
   SeriesHeader,
   SeriesItem
 });
+const Tooltip = () => null;
+Tooltip.displayName = "ChartTooltip";
+const ChartTooltip = Object.assign(Tooltip, {
+  Action,
+  ActionsPlaceholder,
+  Series,
+  SeriesHeader,
+  SeriesItem
+});
 export {
-  OverlayTooltip
+  ChartTooltip,
+  OverlayTooltip,
+  Tooltip
 };
 //# sourceMappingURL=OverlayTooltip.js.map

package/esm/charts/core/components/overlay-tooltip/OverlayTooltip.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/overlay-tooltip/OverlayTooltip.tsx"],
-  "sourcesContent": ["import type { PropsWithChildren } from 'react';\n\nimport { DynamicTooltipRenderer } from './components/DynamicTooltipRenderer.js';\nimport { Action } from './components/global-actions/Action.js';\nimport { ActionsPlaceholder } from './components/global-actions/ActionsPlaceholder.js';\nimport { Header } from './components/header/Header.js';\nimport { Series } from './components/series/Series.js';\nimport { SeriesHeader } from './components/series/SeriesHeader.js';\nimport { SeriesItem } from './components/series/SeriesItem.js';\nimport { TooltipPortal } from './components/TooltipPortal.js';\nimport type { OverlayTooltipProps } from './types.js';\n\n/**\n * Tooltip root component\n * @internal\n */\nconst TooltipRoot = (props: PropsWithChildren<OverlayTooltipProps>) => {\n  if (props.absoluteX !== undefined && props.absoluteY !== undefined) {\n    return (\n      <TooltipPortal\n        isInteractive={props.isInteractive ?? false}\n        absoluteX={props.absoluteX}\n        absoluteY={props.absoluteY}\n      >\n        {props.children}\n      </TooltipPortal>\n    );\n  }\n\n  return <DynamicTooltipRenderer {...props} />;\n};\n\n/**\n * OverlayTooltip WIP component\n * @internal\n */\nexport const OverlayTooltip = Object.assign(TooltipRoot, {\n  Action,\n  ActionsPlaceholder,\n  Header,\n  Series,\n  SeriesHeader,\n  SeriesItem,\n});\n"],
-  "mappings": "AAmBM;AAjBN,SAAS,8BAA8B;AACvC,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAO9B,MAAM,cAAc,CAAC,UAAkD;AACrE,MAAI,MAAM,cAAc,UAAa,MAAM,cAAc,QAAW;AAClE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAe,MAAM,iBAAiB;AAAA,QACtC,WAAW,MAAM;AAAA,QACjB,WAAW,MAAM;AAAA,QAEhB,gBAAM;AAAA;AAAA,IACT;AAAA,EAEJ;AAEA,SAAO,oBAAC,0BAAwB,GAAG,OAAO;AAC5C;AAMO,MAAM,iBAAiB,OAAO,OAAO,aAAa;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import type { PropsWithChildren } from 'react';\n\nimport { DynamicTooltipRenderer } from './components/DynamicTooltipRenderer.js';\nimport { Action } from './components/global-actions/Action.js';\nimport { ActionsPlaceholder } from './components/global-actions/ActionsPlaceholder.js';\nimport { Header } from './components/header/Header.js';\nimport { Series } from './components/series/Series.js';\nimport { SeriesHeader } from './components/series/SeriesHeader.js';\nimport { SeriesItem } from './components/series/SeriesItem.js';\nimport { TooltipPortal } from './components/TooltipPortal.js';\nimport type { OverlayTooltipProps } from './types.js';\n\n/**\n * Tooltip root component\n * @internal\n */\nconst TooltipRoot = (props: PropsWithChildren<OverlayTooltipProps>) => {\n  if (props.absoluteX !== undefined && props.absoluteY !== undefined) {\n    return (\n      <TooltipPortal\n        isInteractive={props.isInteractive ?? false}\n        absoluteX={props.absoluteX}\n        absoluteY={props.absoluteY}\n      >\n        {props.children}\n      </TooltipPortal>\n    );\n  }\n\n  return <DynamicTooltipRenderer {...props} />;\n};\n\n/**\n * OverlayTooltip WIP component\n * @internal\n */\nexport const OverlayTooltip = Object.assign(TooltipRoot, {\n  Action,\n  ActionsPlaceholder,\n  Header,\n  Series,\n  SeriesHeader,\n  SeriesItem,\n});\n\nexport const Tooltip = () => null;\nTooltip.displayName = 'ChartTooltip';\n/**\n * ChartTooltip Component\n * @public\n */\nexport const ChartTooltip = Object.assign(Tooltip, {\n  Action,\n  ActionsPlaceholder,\n  Series,\n  SeriesHeader,\n  SeriesItem,\n});\n"],
+  "mappings": "AAmBM;AAjBN,SAAS,8BAA8B;AACvC,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAO9B,MAAM,cAAc,CAAC,UAAkD;AACrE,MAAI,MAAM,cAAc,UAAa,MAAM,cAAc,QAAW;AAClE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAe,MAAM,iBAAiB;AAAA,QACtC,WAAW,MAAM;AAAA,QACjB,WAAW,MAAM;AAAA,QAEhB,gBAAM;AAAA;AAAA,IACT;AAAA,EAEJ;AAEA,SAAO,oBAAC,0BAAwB,GAAG,OAAO;AAC5C;AAMO,MAAM,iBAAiB,OAAO,OAAO,aAAa;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAEM,MAAM,UAAU,MAAM;AAC7B,QAAQ,cAAc;AAKf,MAAM,eAAe,OAAO,OAAO,SAAS;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
   "names": []
 }