@dynatrace/strato-components 3.7.1 → 3.9.0

package/esm/charts/categorical-bar/components/interactions/tooltip/CategoricalBarChartTooltip.js

@@ -72,6 +72,10 @@ function CategoricalBarChartTooltip({
   const actionClickHandler = useSeriesActionClickHandler(
     sortedTooltipItems.length > 1
   );
+  const handleActionClick = (event) => {
+    actionClickHandler(event);
+    updateSelectedItem("");
+  };
   const seriesActions = useTooltipSeriesActions(
     closestCategory?.dimensions,
     (dimension) => safeGet(dimensionMap, dimension).id
@@ -85,46 +89,71 @@ function CategoricalBarChartTooltip({
     (item) => item.id === closestDimensionPoint.datapoint.id
   ) : void 0;
   const bodyItems = headerItem ? sortedTooltipItems.filter((item) => item !== headerItem) : sortedTooltipItems;
-  return showTooltip ? /* @__PURE__ */ jsxs(
-    CategoricalBarChartTooltipWrapper,
-    {
-      onMouseLeave: handleMenuLeave,
-      onScrollContent: handleMenuScroll,
-      estimatedItemSize,
-      children: [
-        /* @__PURE__ */ jsx(InteractiveChartTooltip.Header, { children: hasHeader && /* @__PURE__ */ jsx(
-          CategoricalTooltipHeader,
+  const renderBodyItem = (item, index) => {
+    const isOpen = selectedItem === item.id;
+    const handleRowClickCapture = (event) => {
+      if (isOpen) {
+        return;
+      }
+      event.stopPropagation();
+      updateSelectedItem(item.id);
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "none",
+        style: { pointerEvents: "auto" },
+        onClickCapture: handleRowClickCapture,
+        children: /* @__PURE__ */ jsx(
+          ChartActionsMenu,
           {
-            name: safeGet(categoryMap, closestCategory).name,
-            item: headerItem
+            isOpen,
+            actions: isOpen ? seriesActions(item) : void 0,
+            defaultActions: getDefaultAction(item),
+            ref: actionsMenuRef,
+            onActionClick: handleActionClick,
+            children: /* @__PURE__ */ jsx(
+              SeriesBasedContent,
+              {
+                item,
+                onMouseHover: () => updateSelectedItem(item.id),
+                showDivider: index !== bodyItems.length - 1,
+                truncationMode,
+                isScrolling
+              }
+            )
           }
-        ) }),
-        bodyItems && /* @__PURE__ */ jsx(InteractiveChartTooltip.Body, { children: bodyItems.map((item, index) => () => {
-          const isBodyItem = item !== headerItem;
-          const isOpen = selectedItem === item.id;
-          return isBodyItem && /* @__PURE__ */ jsx(
-            ChartActionsMenu,
-            {
-              isOpen,
-              actions: isOpen ? seriesActions(item) : void 0,
-              defaultActions: getDefaultAction(item),
-              ref: actionsMenuRef,
-              onActionClick: actionClickHandler,
-              children: /* @__PURE__ */ jsx(
-                SeriesBasedContent,
-                {
-                  item,
-                  onMouseHover: () => updateSelectedItem(item.id),
-                  showDivider: index !== bodyItems.length - 1,
-                  truncationMode,
-                  isScrolling
-                }
-              )
-            },
-            `${item.id}`
-          );
-        }) })
-      ]
+        )
+      },
+      item.id
+    );
+  };
+  return showTooltip ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "none",
+      onClick: (event) => event.stopPropagation(),
+      onMouseMove: (event) => event.stopPropagation(),
+      children: /* @__PURE__ */ jsxs(
+        CategoricalBarChartTooltipWrapper,
+        {
+          onMouseLeave: handleMenuLeave,
+          onScrollContent: handleMenuScroll,
+          estimatedItemSize,
+          children: [
+            /* @__PURE__ */ jsx(InteractiveChartTooltip.Header, { children: hasHeader && /* @__PURE__ */ jsx(
+              CategoricalTooltipHeader,
+              {
+                name: safeGet(categoryMap, closestCategory).name,
+                item: headerItem
+              }
+            ) }),
+            bodyItems && /* @__PURE__ */ jsx(InteractiveChartTooltip.Body, { children: bodyItems.map(
+              (item, index) => () => item !== headerItem && renderBodyItem(item, index)
+            ) })
+          ]
+        }
+      )
     }
   ) : null;
 }

package/esm/charts/categorical-bar/components/interactions/tooltip/CategoricalBarChartTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/categorical-bar/components/interactions/tooltip/CategoricalBarChartTooltip.tsx"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated -- DEPRECATION: [APPDEV-17834] BREAKING-CHANGE: migrate to ChartTooltip before next major. */\nimport { useMemo } from 'react';\n\nimport {\n  getClosestCategory,\n  getSortedTooltipItems,\n} from './categorical-tooltip.js';\nimport { CategoricalBarChartTooltipWrapper } from './CategoricalBarChartTooltipWrapper.js';\nimport { ChartActionsMenu } from '../../../../core/components/series-action/ChartActionsMenu.js';\nimport { useChartActionsMenu } from '../../../../core/components/series-action/hooks/useChartActionsMenu.js';\nimport { getDefaultAction } from '../../../../core/components/series-action/hooks/useDefaultAction.js';\nimport { InteractiveChartTooltip } from '../../../../core/components/tooltip/InteractiveChartTooltip/components/InteractiveChartTooltip.js';\nimport { SeriesBasedContent } from '../../../../core/components/tooltip/InteractiveChartTooltip/contents/SeriesBasedContent.js';\nimport { CategoricalTooltipHeader } from '../../../../core/components/tooltip/InteractiveChartTooltip/headers/CategoricalTooltipHeader.js';\nimport { useSeriesBasedItemEstimatedSize } from '../../../../core/components/tooltip/InteractiveChartTooltip/hooks/useSeriesBasedItemEstimatedSize.js';\nimport { useTooltipSeriesActions } from '../../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport type { ChartUnit } from '../../../../core/types/chart-unit.js';\nimport { Formatter } from '../../../../core/types/formatter.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { VARIANT_GROUPED } from '../../../constants.js';\nimport { useTooltipState } from '../../../hooks/store/selectors.js';\nimport { useCategoricalBarChartScales } from '../../../hooks/useCategoricalBarChartScales.js';\nimport { useCategoricalBarChartTooltip } from '../../../hooks/useCategoricalBarChartTooltip.js';\nimport { useCategoricalBarFilteredData } from '../../../hooks/useCategoricalBarFilteredData.js';\nimport { useTruncationMode } from '../../../hooks/useTruncationMode.js';\nimport {\n  Dimension,\n  DimensionXYPoint,\n} from '../../../types/categorical-bar-chart-data.js';\nimport { useSeriesActionClickHandler } from '../hooks/useSeriesActionClickHandler.js';\n\ninterface CategoricalBarChartTooltipProps {\n  /** Closest point to the mouse position & the x and y position of the tooltip */\n  closestDimensionPoint?: DimensionXYPoint;\n  hasHeader: boolean;\n  formatter: Formatter;\n  unit?: ChartUnit;\n}\n\n/**\n * Tooltip specific to the CategoricalBarChart.\n */\nexport function CategoricalBarChartTooltip({\n  closestDimensionPoint,\n  hasHeader,\n  formatter,\n  unit,\n}: CategoricalBarChartTooltipProps) {\n  const { visibleTooltip } = useTooltipState();\n  const { variant } = useCategoricalBarChartTooltip();\n  const truncationMode = useTruncationMode();\n  const {\n    filteredCategories: categories,\n    dimensionMap,\n    categoryMap,\n  } = useCategoricalBarFilteredData();\n  const {\n    onLeave: handleMenuLeave,\n    onScroll: handleMenuScroll,\n    selectedItem,\n    updateSelectedItem,\n    actionsMenuRef,\n    isScrolling,\n  } = useChartActionsMenu();\n  const grouped = variant === VARIANT_GROUPED;\n  const closestCategory = useMemo(\n    () => getClosestCategory(categories, dimensionMap, closestDimensionPoint),\n    [categories, dimensionMap, closestDimensionPoint],\n  );\n  const { valueScale } = useCategoricalBarChartScales();\n  const sortedTooltipItems = useMemo(\n    () =>\n      getSortedTooltipItems(\n        dimensionMap,\n        closestDimensionPoint,\n        grouped,\n        closestCategory,\n        formatter,\n        valueScale,\n        unit,\n      ),\n    [\n      dimensionMap,\n      closestDimensionPoint,\n      grouped,\n      closestCategory,\n      formatter,\n      valueScale,\n      unit,\n    ],\n  );\n\n  const actionClickHandler = useSeriesActionClickHandler(\n    sortedTooltipItems.length > 1,\n  );\n\n  const seriesActions = useTooltipSeriesActions<Dimension>(\n    closestCategory?.dimensions,\n    (dimension) => safeGet(dimensionMap, dimension).id,\n  );\n\n  const estimatedItemSize = useSeriesBasedItemEstimatedSize(\n    sortedTooltipItems,\n    'single-line',\n  );\n\n  const showTooltip = sortedTooltipItems.length && visibleTooltip;\n\n  const headerItem = hasHeader\n    ? closestDimensionPoint &&\n      sortedTooltipItems.find(\n        (item) => item.id === closestDimensionPoint.datapoint.id,\n      )\n    : undefined;\n\n  const bodyItems = headerItem\n    ? sortedTooltipItems.filter((item) => item !== headerItem)\n    : sortedTooltipItems;\n\n  return showTooltip ? (\n    <CategoricalBarChartTooltipWrapper\n      onMouseLeave={handleMenuLeave}\n      onScrollContent={handleMenuScroll}\n      estimatedItemSize={estimatedItemSize}\n    >\n      <InteractiveChartTooltip.Header>\n        {hasHeader && (\n          <CategoricalTooltipHeader\n            name={safeGet(categoryMap, closestCategory).name}\n            item={headerItem}\n          />\n        )}\n      </InteractiveChartTooltip.Header>\n      {bodyItems && (\n        <InteractiveChartTooltip.Body>\n          {bodyItems.map((item, index) => () => {\n            const isBodyItem = item !== headerItem;\n            const isOpen = selectedItem === item.id;\n            return (\n              isBodyItem && (\n                <ChartActionsMenu\n                  key={`${item.id}`}\n                  isOpen={isOpen}\n                  actions={isOpen ? seriesActions(item) : undefined}\n                  defaultActions={getDefaultAction(item)}\n                  ref={actionsMenuRef}\n                  onActionClick={actionClickHandler}\n                >\n                  <SeriesBasedContent\n                    item={item}\n                    onMouseHover={() => updateSelectedItem(item.id)}\n                    showDivider={index !== bodyItems.length - 1}\n                    truncationMode={truncationMode}\n                    isScrolling={isScrolling}\n                  />\n                </ChartActionsMenu>\n              )\n            );\n          })}\n        </InteractiveChartTooltip.Body>\n      )}\n    </CategoricalBarChartTooltipWrapper>\n  ) : null;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated -- DEPRECATION: [APPDEV-17834] BREAKING-CHANGE: migrate to ChartTooltip before next major. */\nimport { useMemo, type MouseEvent as ReactMouseEvent } from 'react';\n\nimport {\n  getClosestCategory,\n  getSortedTooltipItems,\n} from './categorical-tooltip.js';\nimport { CategoricalBarChartTooltipWrapper } from './CategoricalBarChartTooltipWrapper.js';\nimport { ChartActionsMenu } from '../../../../core/components/series-action/ChartActionsMenu.js';\nimport { useChartActionsMenu } from '../../../../core/components/series-action/hooks/useChartActionsMenu.js';\nimport { getDefaultAction } from '../../../../core/components/series-action/hooks/useDefaultAction.js';\nimport { InteractiveChartTooltip } from '../../../../core/components/tooltip/InteractiveChartTooltip/components/InteractiveChartTooltip.js';\nimport { SeriesBasedContent } from '../../../../core/components/tooltip/InteractiveChartTooltip/contents/SeriesBasedContent.js';\nimport { CategoricalTooltipHeader } from '../../../../core/components/tooltip/InteractiveChartTooltip/headers/CategoricalTooltipHeader.js';\nimport { useSeriesBasedItemEstimatedSize } from '../../../../core/components/tooltip/InteractiveChartTooltip/hooks/useSeriesBasedItemEstimatedSize.js';\nimport { useTooltipSeriesActions } from '../../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport type { ChartUnit } from '../../../../core/types/chart-unit.js';\nimport { Formatter } from '../../../../core/types/formatter.js';\nimport { TooltipItem } from '../../../../core/types/tooltip.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { VARIANT_GROUPED } from '../../../constants.js';\nimport { useTooltipState } from '../../../hooks/store/selectors.js';\nimport { useCategoricalBarChartScales } from '../../../hooks/useCategoricalBarChartScales.js';\nimport { useCategoricalBarChartTooltip } from '../../../hooks/useCategoricalBarChartTooltip.js';\nimport { useCategoricalBarFilteredData } from '../../../hooks/useCategoricalBarFilteredData.js';\nimport { useTruncationMode } from '../../../hooks/useTruncationMode.js';\nimport {\n  Dimension,\n  DimensionXYPoint,\n} from '../../../types/categorical-bar-chart-data.js';\nimport { useSeriesActionClickHandler } from '../hooks/useSeriesActionClickHandler.js';\n\ninterface CategoricalBarChartTooltipProps {\n  /** Closest point to the mouse position & the x and y position of the tooltip */\n  closestDimensionPoint?: DimensionXYPoint;\n  hasHeader: boolean;\n  formatter: Formatter;\n  unit?: ChartUnit;\n}\n\n/**\n * Tooltip specific to the CategoricalBarChart.\n */\nexport function CategoricalBarChartTooltip({\n  closestDimensionPoint,\n  hasHeader,\n  formatter,\n  unit,\n}: CategoricalBarChartTooltipProps) {\n  const { visibleTooltip } = useTooltipState();\n  const { variant } = useCategoricalBarChartTooltip();\n  const truncationMode = useTruncationMode();\n  const {\n    filteredCategories: categories,\n    dimensionMap,\n    categoryMap,\n  } = useCategoricalBarFilteredData();\n  const {\n    onLeave: handleMenuLeave,\n    onScroll: handleMenuScroll,\n    selectedItem,\n    updateSelectedItem,\n    actionsMenuRef,\n    isScrolling,\n  } = useChartActionsMenu();\n  const grouped = variant === VARIANT_GROUPED;\n  const closestCategory = useMemo(\n    () => getClosestCategory(categories, dimensionMap, closestDimensionPoint),\n    [categories, dimensionMap, closestDimensionPoint],\n  );\n  const { valueScale } = useCategoricalBarChartScales();\n  const sortedTooltipItems = useMemo(\n    () =>\n      getSortedTooltipItems(\n        dimensionMap,\n        closestDimensionPoint,\n        grouped,\n        closestCategory,\n        formatter,\n        valueScale,\n        unit,\n      ),\n    [\n      dimensionMap,\n      closestDimensionPoint,\n      grouped,\n      closestCategory,\n      formatter,\n      valueScale,\n      unit,\n    ],\n  );\n\n  const actionClickHandler = useSeriesActionClickHandler(\n    sortedTooltipItems.length > 1,\n  );\n  const handleActionClick = (event: ReactMouseEvent) => {\n    actionClickHandler(event);\n    // Close this item's action menu once its action has run; the tooltip\n    // itself must stay open/pinned exactly as it was.\n    updateSelectedItem('');\n  };\n\n  const seriesActions = useTooltipSeriesActions<Dimension>(\n    closestCategory?.dimensions,\n    (dimension) => safeGet(dimensionMap, dimension).id,\n  );\n\n  const estimatedItemSize = useSeriesBasedItemEstimatedSize(\n    sortedTooltipItems,\n    'single-line',\n  );\n\n  const showTooltip = sortedTooltipItems.length && visibleTooltip;\n\n  const headerItem = hasHeader\n    ? closestDimensionPoint &&\n      sortedTooltipItems.find(\n        (item) => item.id === closestDimensionPoint.datapoint.id,\n      )\n    : undefined;\n\n  const bodyItems = headerItem\n    ? sortedTooltipItems.filter((item) => item !== headerItem)\n    : sortedTooltipItems;\n\n  const renderBodyItem = (item: TooltipItem, index: number) => {\n    const isOpen = selectedItem === item.id;\n\n    const handleRowClickCapture = (event: ReactMouseEvent<HTMLDivElement>) => {\n      if (isOpen) {\n        return;\n      }\n      // ChartActionsMenu treats any bubbled click as an executed action.\n      // Stop the opening tap/click here so it only opens the menu instead\n      // of misfiring the (not yet visible) action.\n      event.stopPropagation();\n      updateSelectedItem(item.id);\n    };\n\n    return (\n      <div\n        key={item.id}\n        role=\"none\"\n        style={{ pointerEvents: 'auto' }}\n        onClickCapture={handleRowClickCapture}\n      >\n        <ChartActionsMenu\n          isOpen={isOpen}\n          actions={isOpen ? seriesActions(item) : undefined}\n          defaultActions={getDefaultAction(item)}\n          ref={actionsMenuRef}\n          onActionClick={handleActionClick}\n        >\n          <SeriesBasedContent\n            item={item}\n            onMouseHover={() => updateSelectedItem(item.id)}\n            showDivider={index !== bodyItems.length - 1}\n            truncationMode={truncationMode}\n            isScrolling={isScrolling}\n          />\n        </ChartActionsMenu>\n      </div>\n    );\n  };\n\n  return showTooltip ? (\n    <div\n      role=\"none\"\n      onClick={(event) => event.stopPropagation()}\n      onMouseMove={(event) => event.stopPropagation()}\n    >\n      <CategoricalBarChartTooltipWrapper\n        onMouseLeave={handleMenuLeave}\n        onScrollContent={handleMenuScroll}\n        estimatedItemSize={estimatedItemSize}\n      >\n        <InteractiveChartTooltip.Header>\n          {hasHeader && (\n            <CategoricalTooltipHeader\n              name={safeGet(categoryMap, closestCategory).name}\n              item={headerItem}\n            />\n          )}\n        </InteractiveChartTooltip.Header>\n        {bodyItems && (\n          <InteractiveChartTooltip.Body>\n            {bodyItems.map(\n              (item, index) => () =>\n                item !== headerItem && renderBodyItem(item, index),\n            )}\n          </InteractiveChartTooltip.Body>\n        )}\n      </CategoricalBarChartTooltipWrapper>\n    </div>\n  ) : null;\n}\n"],
+  "mappings": "AA0JU,cAkBJ,YAlBI;AAzJV,SAAS,eAAmD;AAE5D;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,yCAAyC;AAClD,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,gCAAgC;AACzC,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AAIxC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,oCAAoC;AAC7C,SAAS,qCAAqC;AAC9C,SAAS,qCAAqC;AAC9C,SAAS,yBAAyB;AAKlC,SAAS,mCAAmC;AAarC,SAAS,2BAA2B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoC;AAClC,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAC3C,QAAM,EAAE,QAAQ,IAAI,8BAA8B;AAClD,QAAM,iBAAiB,kBAAkB;AACzC,QAAM;AAAA,IACJ,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,IAAI,8BAA8B;AAClC,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AACxB,QAAM,UAAU,YAAY;AAC5B,QAAM,kBAAkB;AAAA,IACtB,MAAM,mBAAmB,YAAY,cAAc,qBAAqB;AAAA,IACxE,CAAC,YAAY,cAAc,qBAAqB;AAAA,EAClD;AACA,QAAM,EAAE,WAAW,IAAI,6BAA6B;AACpD,QAAM,qBAAqB;AAAA,IACzB,MACE;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBAAqB;AAAA,IACzB,mBAAmB,SAAS;AAAA,EAC9B;AACA,QAAM,oBAAoB,CAAC,UAA2B;AACpD,uBAAmB,KAAK;AAGxB,uBAAmB,EAAE;AAAA,EACvB;AAEA,QAAM,gBAAgB;AAAA,IACpB,iBAAiB;AAAA,IACjB,CAAC,cAAc,QAAQ,cAAc,SAAS,EAAE;AAAA,EAClD;AAEA,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,cAAc,mBAAmB,UAAU;AAEjD,QAAM,aAAa,YACf,yBACA,mBAAmB;AAAA,IACjB,CAAC,SAAS,KAAK,OAAO,sBAAsB,UAAU;AAAA,EACxD,IACA;AAEJ,QAAM,YAAY,aACd,mBAAmB,OAAO,CAAC,SAAS,SAAS,UAAU,IACvD;AAEJ,QAAM,iBAAiB,CAAC,MAAmB,UAAkB;AAC3D,UAAM,SAAS,iBAAiB,KAAK;AAErC,UAAM,wBAAwB,CAAC,UAA2C;AACxE,UAAI,QAAQ;AACV;AAAA,MACF;AAIA,YAAM,gBAAgB;AACtB,yBAAmB,KAAK,EAAE;AAAA,IAC5B;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,OAAO,EAAE,eAAe,OAAO;AAAA,QAC/B,gBAAgB;AAAA,QAEhB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,SAAS,SAAS,cAAc,IAAI,IAAI;AAAA,YACxC,gBAAgB,iBAAiB,IAAI;AAAA,YACrC,KAAK;AAAA,YACL,eAAe;AAAA,YAEf;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,cAAc,MAAM,mBAAmB,KAAK,EAAE;AAAA,gBAC9C,aAAa,UAAU,UAAU,SAAS;AAAA,gBAC1C;AAAA,gBACA;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,MAnBK,KAAK;AAAA,IAoBZ;AAAA,EAEJ;AAEA,SAAO,cACL;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAC1C,aAAa,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAE9C;AAAA,QAAC;AAAA;AAAA,UACC,cAAc;AAAA,UACd,iBAAiB;AAAA,UACjB;AAAA,UAEA;AAAA,gCAAC,wBAAwB,QAAxB,EACE,uBACC;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM,QAAQ,aAAa,eAAe,EAAE;AAAA,gBAC5C,MAAM;AAAA;AAAA,YACR,GAEJ;AAAA,YACC,aACC,oBAAC,wBAAwB,MAAxB,EACE,oBAAU;AAAA,cACT,CAAC,MAAM,UAAU,MACf,SAAS,cAAc,eAAe,MAAM,KAAK;AAAA,YACrD,GACF;AAAA;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF,IACE;AACN;",
   "names": []
 }

package/esm/charts/categorical-bar/hooks/store/state-setters.js

@@ -2,7 +2,9 @@ const setMouseOutBounds = (prev) => ({
   ...prev,
   overlays: {
     ...prev.overlays,
-    mouseInBounds: false
+    mouseInBounds: false,
+    mousePosition: void 0,
+    visibleTooltip: prev.overlays.pinnedTooltip
   }
 });
 export {

package/esm/charts/categorical-bar/hooks/store/state-setters.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/categorical-bar/hooks/store/state-setters.ts"],
-  "sourcesContent": ["import type { CategoricalBarChartState } from '../../types/state.js';\n\nexport const setMouseOutBounds = (prev: CategoricalBarChartState) => ({\n  ...prev,\n  overlays: {\n    ...prev.overlays,\n    mouseInBounds: false,\n  },\n});\n"],
-  "mappings": "AAEO,MAAM,oBAAoB,CAAC,UAAoC;AAAA,EACpE,GAAG;AAAA,EACH,UAAU;AAAA,IACR,GAAG,KAAK;AAAA,IACR,eAAe;AAAA,EACjB;AACF;",
+  "sourcesContent": ["import type { CategoricalBarChartState } from '../../types/state.js';\n\nexport const setMouseOutBounds = (prev: CategoricalBarChartState) => ({\n  ...prev,\n  overlays: {\n    ...prev.overlays,\n    mouseInBounds: false,\n    mousePosition: undefined,\n    visibleTooltip: prev.overlays.pinnedTooltip,\n  },\n});\n"],
+  "mappings": "AAEO,MAAM,oBAAoB,CAAC,UAAoC;AAAA,EACpE,GAAG;AAAA,EACH,UAAU;AAAA,IACR,GAAG,KAAK;AAAA,IACR,eAAe;AAAA,IACf,eAAe;AAAA,IACf,gBAAgB,KAAK,SAAS;AAAA,EAChC;AACF;",
   "names": []
 }

package/esm/charts/categorical-bar/layout/CategoricalGridLayout.js

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-import { Group } from "@visx/group";
 import { plotLayout } from "../../core/components/chart-grid/ChartGrid.sty.js";
 import { useGridPlotSize } from "../../core/components/chart-grid/hooks/useGridPlotSize.js";
 import { GridLayout } from "../components/grid/GridLayout.js";
@@ -9,7 +8,7 @@ const CategoricalGridLayout = () => {
   const { width, height } = useGridPlotSize();
   const { layout } = useCategoricalBarChartBaseConfig();
   const { valueScale } = useCategoricalBarChartScales();
-  return /* @__PURE__ */ jsx("svg", { className: plotLayout, children: /* @__PURE__ */ jsx(Group, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { className: plotLayout, children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
     GridLayout,
     {
       layout,

package/esm/charts/categorical-bar/layout/CategoricalGridLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/categorical-bar/layout/CategoricalGridLayout.tsx"],
-  "sourcesContent": ["import { Group } from '@visx/group';\n\nimport { plotLayout } from '../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { GridLayout } from '../components/grid/GridLayout.js';\nimport { useCategoricalBarChartBaseConfig } from '../hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartScales } from '../hooks/useCategoricalBarChartScales.js';\n\nexport const CategoricalGridLayout = () => {\n  const { width, height } = useGridPlotSize();\n  const { layout } = useCategoricalBarChartBaseConfig();\n  const { valueScale } = useCategoricalBarChartScales();\n\n  return (\n    <svg className={plotLayout}>\n      <Group>\n        <GridLayout\n          layout={layout}\n          width={width}\n          height={height}\n          scale={valueScale}\n        />\n      </Group>\n    </svg>\n  );\n};\n\nCategoricalGridLayout['displayName'] = 'CategoricalGridLayout';\n"],
-  "mappings": "AAgBQ;AAhBR,SAAS,aAAa;AAEtB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,wCAAwC;AACjD,SAAS,oCAAoC;AAEtC,MAAM,wBAAwB,MAAM;AACzC,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,EAAE,OAAO,IAAI,iCAAiC;AACpD,QAAM,EAAE,WAAW,IAAI,6BAA6B;AAEpD,SACE,oBAAC,SAAI,WAAW,YACd,8BAAC,SACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA;AAAA,EACT,GACF,GACF;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
+  "sourcesContent": ["import { plotLayout } from '../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { GridLayout } from '../components/grid/GridLayout.js';\nimport { useCategoricalBarChartBaseConfig } from '../hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartScales } from '../hooks/useCategoricalBarChartScales.js';\n\nexport const CategoricalGridLayout = () => {\n  const { width, height } = useGridPlotSize();\n  const { layout } = useCategoricalBarChartBaseConfig();\n  const { valueScale } = useCategoricalBarChartScales();\n\n  return (\n    <svg className={plotLayout}>\n      <g>\n        <GridLayout\n          layout={layout}\n          width={width}\n          height={height}\n          scale={valueScale}\n        />\n      </g>\n    </svg>\n  );\n};\n\nCategoricalGridLayout['displayName'] = 'CategoricalGridLayout';\n"],
+  "mappings": "AAcQ;AAdR,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,wCAAwC;AACjD,SAAS,oCAAoC;AAEtC,MAAM,wBAAwB,MAAM;AACzC,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,EAAE,OAAO,IAAI,iCAAiC;AACpD,QAAM,EAAE,WAAW,IAAI,6BAA6B;AAEpD,SACE,oBAAC,SAAI,WAAW,YACd,8BAAC,OACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA;AAAA,EACT,GACF,GACF;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/annotations/AnnotationsAtom.css

@@ -1,3 +1,3 @@
-._145zb630-3-7-1 {
+._145zb630-3-9-0 {
   position: relative;
 }

package/esm/charts/core/components/annotations/AnnotationsAtom.js

@@ -23,7 +23,8 @@ const _AnnotationsAtom = (props) => {
     width,
     children,
     showLabels = true,
-    labelsWidth = DEFAULT_LABELS_WIDTH
+    labelsWidth = DEFAULT_LABELS_WIDTH,
+    outerBottomLine = false
   } = props;
   const trackWidth = width - labelsWidth;
   const tracks = extractVisibleTracks(children);
@@ -49,7 +50,8 @@ const _AnnotationsAtom = (props) => {
           value: {
             showLabels,
             labelsWidth,
-            trackWidth
+            trackWidth,
+            outerBottomLine
           },
           children: /* @__PURE__ */ jsx(MarkersByTrackContext.Provider, { value: tracksConfig, children: /* @__PURE__ */ jsx(MarkerCoordinatesContext.Provider, { value: markersPerTrack, children: /* @__PURE__ */ jsx(MarkerEventHandlersContext.Provider, { value: markerEventHandlers, children: /* @__PURE__ */ jsx(TrackEventHandlersContext.Provider, { value: trackEventHandlers, children: /* @__PURE__ */ jsxs(CanvasSvgToImagesProvider, { icons, children: [
             /* @__PURE__ */ jsx(

package/esm/charts/core/components/annotations/AnnotationsAtom.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/annotations/AnnotationsAtom.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, Children } from 'react';\n\nimport { wrapper } from './AnnotationsAtom.sty.js';\nimport { AnnotationsCanvasLayout } from './components/canvas/AnnotationsCanvasLayout.js';\nimport { CanvasSvgToImagesProvider } from './components/canvas/providers/CanvasSvgToImages.Provider.js';\nimport { AnnotationsOverlays } from './components/overlays/AnnotationsOverlays.js';\nimport {\n  DEFAULT_LABELS_WIDTH,\n  TRACK_SEPARATOR_STROKE_WIDTH,\n} from './constants.js';\nimport { AnnotationsConfigContext } from './contexts/AnnotationsConfig.context.js';\nimport { MarkerCoordinatesContext } from './contexts/MarkerCoordinates.context.js';\nimport { MarkerEventHandlersContext } from './contexts/MarkerEventHandlers.context.js';\nimport { MarkersByTrackContext } from './contexts/MarkersByTrack.context.js';\nimport { TrackEventHandlersContext } from './contexts/TrackEventHandlers.context.js';\nimport { MarkerAtom } from './slots/MarkerAtom.js';\nimport { TrackAtom } from './slots/TrackAtom.js';\nimport { aggregateMarkersCoords } from './utils/aggregate-markers-coords.js';\nimport { extractVisibleTracks } from './utils/extract-visible-tracks.js';\nimport { getAnnotationsTracksHeight } from './utils/get-annotations-tracks-height.js';\n\n/**\n * Props for AnnotationsAtom, representing properties related to annotations.\n * @internal\n */\nexport interface AnnotationsAtomProps {\n  /** Width of the annotations' container. */\n  width: number;\n  /**\n   * Optional flag to determine whether to display labels.\n   * @defaultValue true\n   */\n  showLabels?: boolean;\n  /**\n   * Optional width for the labels if displayed.\n   * @defaultValue 'DEFAULT_LABELS_WIDTH' constant\n   */\n  labelsWidth?: number;\n}\n\n/**\n * The Annotations atomic component\n * @internal\n */\nexport const _AnnotationsAtom = (\n  props: PropsWithChildren<AnnotationsAtomProps>,\n) => {\n  const {\n    width,\n    children,\n    showLabels = true,\n    labelsWidth = DEFAULT_LABELS_WIDTH,\n  } = props;\n\n  const trackWidth = width - labelsWidth;\n  const tracks = extractVisibleTracks(children);\n  const tracksQuantity = Children.count(tracks);\n  const totalTracksHeight = getAnnotationsTracksHeight(tracksQuantity);\n\n  const {\n    markersPerTrack,\n    markerEventHandlers,\n    trackEventHandlers,\n    icons,\n    tracksConfig,\n  } = aggregateMarkersCoords(tracks, trackWidth);\n\n  return (\n    <div\n      className={wrapper}\n      style={{\n        height: totalTracksHeight,\n      }}\n    >\n      <AnnotationsConfigContext.Provider\n        value={{\n          showLabels,\n          labelsWidth,\n          trackWidth,\n        }}\n      >\n        <MarkersByTrackContext.Provider value={tracksConfig}>\n          <MarkerCoordinatesContext.Provider value={markersPerTrack}>\n            <MarkerEventHandlersContext.Provider value={markerEventHandlers}>\n              <TrackEventHandlersContext.Provider value={trackEventHandlers}>\n                <CanvasSvgToImagesProvider icons={icons}>\n                  <AnnotationsOverlays\n                    height={totalTracksHeight - TRACK_SEPARATOR_STROKE_WIDTH}\n                  />\n                  <AnnotationsCanvasLayout\n                    width={width}\n                    height={totalTracksHeight}\n                  />\n                </CanvasSvgToImagesProvider>\n              </TrackEventHandlersContext.Provider>\n            </MarkerEventHandlersContext.Provider>\n          </MarkerCoordinatesContext.Provider>\n        </MarkersByTrackContext.Provider>\n      </AnnotationsConfigContext.Provider>\n    </div>\n  );\n};\n\n/**\n * The Annotations atomic component\n * @internal\n **/\nexport const AnnotationsAtom = Object.assign(_AnnotationsAtom, {\n  TrackAtom,\n  MarkerAtom,\n});\n\n(\n  AnnotationsAtom as typeof AnnotationsAtom & { displayName: string }\n).displayName = 'AnnotationsAtom';\n"],
-  "mappings": "AAqFgB,SACE,KADF;AArFhB,SAAiC,gBAAgB;AAEjD,SAAS,eAAe;AACxB,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AACzC,SAAS,kCAAkC;AAC3C,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAyBpC,MAAM,mBAAmB,CAC9B,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,cAAc;AAAA,EAChB,IAAI;AAEJ,QAAM,aAAa,QAAQ;AAC3B,QAAM,SAAS,qBAAqB,QAAQ;AAC5C,QAAM,iBAAiB,SAAS,MAAM,MAAM;AAC5C,QAAM,oBAAoB,2BAA2B,cAAc;AAEnE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,uBAAuB,QAAQ,UAAU;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,MAEA;AAAA,QAAC,yBAAyB;AAAA,QAAzB;AAAA,UACC,OAAO;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UAEA,8BAAC,sBAAsB,UAAtB,EAA+B,OAAO,cACrC,8BAAC,yBAAyB,UAAzB,EAAkC,OAAO,iBACxC,8BAAC,2BAA2B,UAA3B,EAAoC,OAAO,qBAC1C,8BAAC,0BAA0B,UAA1B,EAAmC,OAAO,oBACzC,+BAAC,6BAA0B,OACzB;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,QAAQ,oBAAoB;AAAA;AAAA,YAC9B;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,QAAQ;AAAA;AAAA,YACV;AAAA,aACF,GACF,GACF,GACF,GACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAMO,MAAM,kBAAkB,OAAO,OAAO,kBAAkB;AAAA,EAC7D;AAAA,EACA;AACF,CAAC;AAGC,gBACA,cAAc;",
+  "sourcesContent": ["import { type PropsWithChildren, Children } from 'react';\n\nimport { wrapper } from './AnnotationsAtom.sty.js';\nimport { AnnotationsCanvasLayout } from './components/canvas/AnnotationsCanvasLayout.js';\nimport { CanvasSvgToImagesProvider } from './components/canvas/providers/CanvasSvgToImages.Provider.js';\nimport { AnnotationsOverlays } from './components/overlays/AnnotationsOverlays.js';\nimport {\n  DEFAULT_LABELS_WIDTH,\n  TRACK_SEPARATOR_STROKE_WIDTH,\n} from './constants.js';\nimport { AnnotationsConfigContext } from './contexts/AnnotationsConfig.context.js';\nimport { MarkerCoordinatesContext } from './contexts/MarkerCoordinates.context.js';\nimport { MarkerEventHandlersContext } from './contexts/MarkerEventHandlers.context.js';\nimport { MarkersByTrackContext } from './contexts/MarkersByTrack.context.js';\nimport { TrackEventHandlersContext } from './contexts/TrackEventHandlers.context.js';\nimport { MarkerAtom } from './slots/MarkerAtom.js';\nimport { TrackAtom } from './slots/TrackAtom.js';\nimport { aggregateMarkersCoords } from './utils/aggregate-markers-coords.js';\nimport { extractVisibleTracks } from './utils/extract-visible-tracks.js';\nimport { getAnnotationsTracksHeight } from './utils/get-annotations-tracks-height.js';\n\n/**\n * Props for AnnotationsAtom, representing properties related to annotations.\n * @internal\n */\nexport interface AnnotationsAtomProps {\n  /** Width of the annotations' container. */\n  width: number;\n  /**\n   * Optional flag to determine whether to display labels.\n   * @defaultValue true\n   */\n  showLabels?: boolean;\n  /**\n   * Optional width for the labels if displayed.\n   * @defaultValue 'DEFAULT_LABELS_WIDTH' constant\n   */\n  labelsWidth?: number;\n  /**\n   * Draws a separator line below the bottom-most track. Used when the\n   * annotations area is not directly adjacent to the plot (e.g. an XY chart\n   * with a top axis) and the plot border cannot act as the separator.\n   * @defaultValue false\n   */\n  outerBottomLine?: boolean;\n}\n\n/**\n * The Annotations atomic component\n * @internal\n */\nexport const _AnnotationsAtom = (\n  props: PropsWithChildren<AnnotationsAtomProps>,\n) => {\n  const {\n    width,\n    children,\n    showLabels = true,\n    labelsWidth = DEFAULT_LABELS_WIDTH,\n    outerBottomLine = false,\n  } = props;\n\n  const trackWidth = width - labelsWidth;\n  const tracks = extractVisibleTracks(children);\n  const tracksQuantity = Children.count(tracks);\n  const totalTracksHeight = getAnnotationsTracksHeight(tracksQuantity);\n\n  const {\n    markersPerTrack,\n    markerEventHandlers,\n    trackEventHandlers,\n    icons,\n    tracksConfig,\n  } = aggregateMarkersCoords(tracks, trackWidth);\n\n  return (\n    <div\n      className={wrapper}\n      style={{\n        height: totalTracksHeight,\n      }}\n    >\n      <AnnotationsConfigContext.Provider\n        value={{\n          showLabels,\n          labelsWidth,\n          trackWidth,\n          outerBottomLine,\n        }}\n      >\n        <MarkersByTrackContext.Provider value={tracksConfig}>\n          <MarkerCoordinatesContext.Provider value={markersPerTrack}>\n            <MarkerEventHandlersContext.Provider value={markerEventHandlers}>\n              <TrackEventHandlersContext.Provider value={trackEventHandlers}>\n                <CanvasSvgToImagesProvider icons={icons}>\n                  <AnnotationsOverlays\n                    height={totalTracksHeight - TRACK_SEPARATOR_STROKE_WIDTH}\n                  />\n                  <AnnotationsCanvasLayout\n                    width={width}\n                    height={totalTracksHeight}\n                  />\n                </CanvasSvgToImagesProvider>\n              </TrackEventHandlersContext.Provider>\n            </MarkerEventHandlersContext.Provider>\n          </MarkerCoordinatesContext.Provider>\n        </MarkersByTrackContext.Provider>\n      </AnnotationsConfigContext.Provider>\n    </div>\n  );\n};\n\n/**\n * The Annotations atomic component\n * @internal\n **/\nexport const AnnotationsAtom = Object.assign(_AnnotationsAtom, {\n  TrackAtom,\n  MarkerAtom,\n});\n\n(\n  AnnotationsAtom as typeof AnnotationsAtom & { displayName: string }\n).displayName = 'AnnotationsAtom';\n"],
+  "mappings": "AA8FgB,SACE,KADF;AA9FhB,SAAiC,gBAAgB;AAEjD,SAAS,eAAe;AACxB,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AACzC,SAAS,kCAAkC;AAC3C,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAgCpC,MAAM,mBAAmB,CAC9B,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,cAAc;AAAA,IACd,kBAAkB;AAAA,EACpB,IAAI;AAEJ,QAAM,aAAa,QAAQ;AAC3B,QAAM,SAAS,qBAAqB,QAAQ;AAC5C,QAAM,iBAAiB,SAAS,MAAM,MAAM;AAC5C,QAAM,oBAAoB,2BAA2B,cAAc;AAEnE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,uBAAuB,QAAQ,UAAU;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,MAEA;AAAA,QAAC,yBAAyB;AAAA,QAAzB;AAAA,UACC,OAAO;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UAEA,8BAAC,sBAAsB,UAAtB,EAA+B,OAAO,cACrC,8BAAC,yBAAyB,UAAzB,EAAkC,OAAO,iBACxC,8BAAC,2BAA2B,UAA3B,EAAoC,OAAO,qBAC1C,8BAAC,0BAA0B,UAA1B,EAAmC,OAAO,oBACzC,+BAAC,6BAA0B,OACzB;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,QAAQ,oBAAoB;AAAA;AAAA,YAC9B;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,QAAQ;AAAA;AAAA,YACV;AAAA,aACF,GACF,GACF,GACF,GACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAMO,MAAM,kBAAkB,OAAO,OAAO,kBAAkB;AAAA,EAC7D;AAAA,EACA;AACF,CAAC;AAGC,gBACA,cAAc;",
   "names": []
 }

package/esm/charts/core/components/annotations/AnnotationsAtom.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsAtom.css";
-var wrapper = "_145zb630-3-7-1";
+var wrapper = "_145zb630-3-9-0";
 export {
   wrapper
 };

package/esm/charts/core/components/annotations/AnnotationsAtom.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/annotations/AnnotationsAtom.css.ts"],
-  "sourcesContent": ["import './AnnotationsAtom.css';\nexport var wrapper = '_145zb630-3-7-1';"],
+  "sourcesContent": ["import './AnnotationsAtom.css';\nexport var wrapper = '_145zb630-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/AnnotationsRenderer.js

@@ -8,8 +8,13 @@ import { MarkerAtom } from "../slots/MarkerAtom.js";
 import { TrackAtom } from "../slots/TrackAtom.js";
 import { calculateMarkerDimension } from "../utils/calculate-marker-dimension.js";
 import { defineMarkerBrightnessState } from "../utils/define-marker-brightness-state.js";
-import { defineMarkerColor } from "../utils/define-marker-color.js";
+import { defineMarkerColors } from "../utils/define-marker-color.js";
 import { defineMarkerContent } from "../utils/define-marker-content.js";
+const compareByHoverAwarePriority = (isHovered, getPriority) => (a, b) => {
+  const priorityA = isHovered(a) ? Infinity : getPriority(a);
+  const priorityB = isHovered(b) ? Infinity : getPriority(b);
+  return priorityA - priorityB;
+};
 const AnnotationsRenderer = (props) => {
   const {
     scale,
@@ -18,10 +23,11 @@ const AnnotationsRenderer = (props) => {
     showLabels,
     tracks,
     textOverflow,
-    truncateMode
+    truncateMode,
+    outerBottomLine
   } = props;
   const overlay = useOverlay();
-  const groupedData = useGroupedAnnotationsData(tracks, scale.domain());
+  const groupedData = useGroupedAnnotationsData(tracks, scale, textOverflow);
   const selection = useAnnotationsSelectionState();
   const { handleMouseEnter, handleMouseMove, handleMouseLeave, handleClick } = useMarkerEventHandlers(overlay.overlayRef);
   return /* @__PURE__ */ jsx(
@@ -30,9 +36,14 @@ const AnnotationsRenderer = (props) => {
       width,
       labelsWidth: labelsOffset,
       showLabels,
+      outerBottomLine,
       children: groupedData.map((track, trackNumber) => {
+        const hoveredKey = selection.pinnedGroup ? selection.hoverGroupListKey : void 0;
         const currentTrack = Array.from(track.markers.entries()).sort(
-          ([, a], [, b]) => Math.max(...a.map((g) => g.priority)) - Math.max(...b.map((g) => g.priority))
+          compareByHoverAwarePriority(
+            ([, group]) => group.some((g) => g.key === hoveredKey),
+            ([, group]) => Math.max(...group.map((g) => g.priority))
+          )
         );
         return /* @__PURE__ */ jsx(
           TrackAtom,
@@ -40,9 +51,14 @@ const AnnotationsRenderer = (props) => {
             label: track.label,
             hidden: track.hidden,
             children: currentTrack.map(([groupId, annotationsGroup]) => {
-              return annotationsGroup.toSorted((a, b) => a.priority - b.priority).map(({ key: markerId, markers }) => {
+              return annotationsGroup.toSorted(
+                compareByHoverAwarePriority(
+                  (g) => hoveredKey === g.key,
+                  (g) => g.priority
+                )
+              ).map(({ key: markerId, markers }) => {
                 const [marker] = markers;
-                const color = defineMarkerColor(markers);
+                const { color, symbolColor } = defineMarkerColors(markers);
                 const state = defineMarkerBrightnessState(
                   markerId,
                   selection
@@ -55,6 +71,7 @@ const AnnotationsRenderer = (props) => {
                     x,
                     width: width2,
                     color,
+                    symbolColor,
                     onMouseEnter: handleMouseEnter(
                       markerId,
                       groupId,

package/esm/charts/core/components/annotations/components/AnnotationsRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/annotations/components/AnnotationsRenderer.tsx"],
-  "sourcesContent": ["import type {\n  ScaleLinear,\n  ScaleLogarithmic,\n  ScaleSymLog,\n  ScaleTime,\n} from 'd3-scale';\n\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { useOverlay } from '../../overlay-tooltip/contexts/OverlayContext.js';\nimport { AnnotationsAtom } from '../AnnotationsAtom.js';\nimport { useAnnotationsSelectionState } from '../hooks/store/selectors.js';\nimport { useGroupedAnnotationsData } from '../hooks/useGroupedAnnotationsData.js';\nimport { useMarkerEventHandlers } from '../hooks/useMarkerEventHandlers.js';\nimport { MarkerAtom } from '../slots/MarkerAtom.js';\nimport { TrackAtom } from '../slots/TrackAtom.js';\nimport type { AnnotationsTrackConfig } from '../types/annotations-track-props.js';\nimport type { TextOverflowOptions } from '../types/marker.js';\nimport { calculateMarkerDimension } from '../utils/calculate-marker-dimension.js';\nimport { defineMarkerBrightnessState } from '../utils/define-marker-brightness-state.js';\nimport { defineMarkerColor } from '../utils/define-marker-color.js';\nimport { defineMarkerContent } from '../utils/define-marker-content.js';\n\ntype AnnotationsRendererProps = {\n  scale:\n    | ScaleTime<number, number>\n    | ScaleLinear<number, number>\n    | ScaleLogarithmic<number, number>\n    | ScaleSymLog<number, number>;\n  width: number;\n  labelsOffset: number;\n  showLabels: boolean;\n  tracks: AnnotationsTrackConfig[];\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n};\n\nexport const AnnotationsRenderer = (props: AnnotationsRendererProps) => {\n  const {\n    scale,\n    width,\n    labelsOffset,\n    showLabels,\n    tracks,\n    textOverflow,\n    truncateMode,\n  } = props;\n  const overlay = useOverlay();\n  const groupedData = useGroupedAnnotationsData(tracks, scale.domain());\n\n  const selection = useAnnotationsSelectionState();\n  const { handleMouseEnter, handleMouseMove, handleMouseLeave, handleClick } =\n    useMarkerEventHandlers(overlay.overlayRef);\n\n  return (\n    <AnnotationsAtom\n      width={width}\n      labelsWidth={labelsOffset}\n      showLabels={showLabels}\n    >\n      {groupedData.map((track, trackNumber) => {\n        const currentTrack = Array.from(track.markers.entries()).sort(\n          ([, a], [, b]) =>\n            Math.max(...a.map((g) => g.priority)) -\n            Math.max(...b.map((g) => g.priority)),\n        );\n\n        return (\n          <TrackAtom\n            label={track.label}\n            hidden={track.hidden}\n            key={trackNumber}\n          >\n            {currentTrack.map(([groupId, annotationsGroup]) => {\n              return annotationsGroup\n                .toSorted((a, b) => a.priority - b.priority)\n                .map(({ key: markerId, markers }) => {\n                  const [marker] = markers;\n\n                  const color = defineMarkerColor(markers);\n\n                  const state = defineMarkerBrightnessState(\n                    markerId,\n                    selection,\n                  );\n\n                  const { x, width } = calculateMarkerDimension(marker, scale);\n\n                  const markerContent = defineMarkerContent(markers);\n\n                  return (\n                    <MarkerAtom\n                      key={markerId}\n                      x={x}\n                      width={width}\n                      color={color}\n                      onMouseEnter={handleMouseEnter(\n                        markerId,\n                        groupId,\n                        annotationsGroup,\n                      )}\n                      onMouseMove={handleMouseMove}\n                      onMouseLeave={handleMouseLeave}\n                      onClick={handleClick(groupId, annotationsGroup)}\n                      content={markerContent}\n                      interactionState={state}\n                      textOverflow={textOverflow}\n                      truncateMode={truncateMode}\n                    />\n                  );\n                });\n            })}\n          </TrackAtom>\n        );\n      })}\n    </AnnotationsAtom>\n  );\n};\n\n(\n  AnnotationsRenderer as typeof AnnotationsRenderer & {\n    displayName: string;\n  }\n).displayName = 'AnnotationsContent';\n"],
-  "mappings": "AA0FoB;AAlFpB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,oCAAoC;AAC7C,SAAS,iCAAiC;AAC1C,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAG1B,SAAS,gCAAgC;AACzC,SAAS,mCAAmC;AAC5C,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AAgB7B,MAAM,sBAAsB,CAAC,UAAoC;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,UAAU,WAAW;AAC3B,QAAM,cAAc,0BAA0B,QAAQ,MAAM,OAAO,CAAC;AAEpE,QAAM,YAAY,6BAA6B;AAC/C,QAAM,EAAE,kBAAkB,iBAAiB,kBAAkB,YAAY,IACvE,uBAAuB,QAAQ,UAAU;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MAEC,sBAAY,IAAI,CAAC,OAAO,gBAAgB;AACvC,cAAM,eAAe,MAAM,KAAK,MAAM,QAAQ,QAAQ,CAAC,EAAE;AAAA,UACvD,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,MACV,KAAK,IAAI,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,IACpC,KAAK,IAAI,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC;AAAA,QACxC;AAEA,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,MAAM;AAAA,YACb,QAAQ,MAAM;AAAA,YAGb,uBAAa,IAAI,CAAC,CAAC,SAAS,gBAAgB,MAAM;AACjD,qBAAO,iBACJ,SAAS,CAAC,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ,EAC1C,IAAI,CAAC,EAAE,KAAK,UAAU,QAAQ,MAAM;AACnC,sBAAM,CAAC,MAAM,IAAI;AAEjB,sBAAM,QAAQ,kBAAkB,OAAO;AAEvC,sBAAM,QAAQ;AAAA,kBACZ;AAAA,kBACA;AAAA,gBACF;AAEA,sBAAM,EAAE,GAAG,OAAAA,OAAM,IAAI,yBAAyB,QAAQ,KAAK;AAE3D,sBAAM,gBAAgB,oBAAoB,OAAO;AAEjD,uBACE;AAAA,kBAAC;AAAA;AAAA,oBAEC;AAAA,oBACA,OAAOA;AAAA,oBACP;AAAA,oBACA,cAAc;AAAA,sBACZ;AAAA,sBACA;AAAA,sBACA;AAAA,oBACF;AAAA,oBACA,aAAa;AAAA,oBACb,cAAc;AAAA,oBACd,SAAS,YAAY,SAAS,gBAAgB;AAAA,oBAC9C,SAAS;AAAA,oBACT,kBAAkB;AAAA,oBAClB;AAAA,oBACA;AAAA;AAAA,kBAfK;AAAA,gBAgBP;AAAA,cAEJ,CAAC;AAAA,YACL,CAAC;AAAA;AAAA,UAxCI;AAAA,QAyCP;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAGE,oBAGA,cAAc;",
+  "sourcesContent": ["import type {\n  ScaleLinear,\n  ScaleLogarithmic,\n  ScaleSymLog,\n  ScaleTime,\n} from 'd3-scale';\n\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { useOverlay } from '../../overlay-tooltip/contexts/OverlayContext.js';\nimport { AnnotationsAtom } from '../AnnotationsAtom.js';\nimport { useAnnotationsSelectionState } from '../hooks/store/selectors.js';\nimport { useGroupedAnnotationsData } from '../hooks/useGroupedAnnotationsData.js';\nimport { useMarkerEventHandlers } from '../hooks/useMarkerEventHandlers.js';\nimport { MarkerAtom } from '../slots/MarkerAtom.js';\nimport { TrackAtom } from '../slots/TrackAtom.js';\nimport type { AnnotationsTrackConfig } from '../types/annotations-track-props.js';\nimport type { TextOverflowOptions } from '../types/marker.js';\nimport { calculateMarkerDimension } from '../utils/calculate-marker-dimension.js';\nimport { defineMarkerBrightnessState } from '../utils/define-marker-brightness-state.js';\nimport { defineMarkerColors } from '../utils/define-marker-color.js';\nimport { defineMarkerContent } from '../utils/define-marker-content.js';\n\nconst compareByHoverAwarePriority =\n  <T,>(isHovered: (item: T) => boolean, getPriority: (item: T) => number) =>\n  (a: T, b: T) => {\n    const priorityA = isHovered(a) ? Infinity : getPriority(a);\n    const priorityB = isHovered(b) ? Infinity : getPriority(b);\n    return priorityA - priorityB;\n  };\n\ntype AnnotationsRendererProps = {\n  scale:\n    | ScaleTime<number, number>\n    | ScaleLinear<number, number>\n    | ScaleLogarithmic<number, number>\n    | ScaleSymLog<number, number>;\n  width: number;\n  labelsOffset: number;\n  showLabels: boolean;\n  tracks: AnnotationsTrackConfig[];\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n  outerBottomLine?: boolean;\n};\n\nexport const AnnotationsRenderer = (props: AnnotationsRendererProps) => {\n  const {\n    scale,\n    width,\n    labelsOffset,\n    showLabels,\n    tracks,\n    textOverflow,\n    truncateMode,\n    outerBottomLine,\n  } = props;\n  const overlay = useOverlay();\n  const groupedData = useGroupedAnnotationsData(tracks, scale, textOverflow);\n\n  const selection = useAnnotationsSelectionState();\n  const { handleMouseEnter, handleMouseMove, handleMouseLeave, handleClick } =\n    useMarkerEventHandlers(overlay.overlayRef);\n\n  return (\n    <AnnotationsAtom\n      width={width}\n      labelsWidth={labelsOffset}\n      showLabels={showLabels}\n      outerBottomLine={outerBottomLine}\n    >\n      {groupedData.map((track, trackNumber) => {\n        const hoveredKey = selection.pinnedGroup\n          ? selection.hoverGroupListKey\n          : undefined;\n\n        const currentTrack = Array.from(track.markers.entries()).sort(\n          compareByHoverAwarePriority(\n            ([, group]) => group.some((g) => g.key === hoveredKey),\n            ([, group]) => Math.max(...group.map((g) => g.priority)),\n          ),\n        );\n\n        return (\n          <TrackAtom\n            label={track.label}\n            hidden={track.hidden}\n            key={trackNumber}\n          >\n            {currentTrack.map(([groupId, annotationsGroup]) => {\n              return annotationsGroup\n                .toSorted(\n                  compareByHoverAwarePriority(\n                    (g) => hoveredKey === g.key,\n                    (g) => g.priority,\n                  ),\n                )\n                .map(({ key: markerId, markers }) => {\n                  const [marker] = markers;\n\n                  const { color, symbolColor } = defineMarkerColors(markers);\n\n                  const state = defineMarkerBrightnessState(\n                    markerId,\n                    selection,\n                  );\n\n                  const { x, width } = calculateMarkerDimension(marker, scale);\n\n                  const markerContent = defineMarkerContent(markers);\n\n                  return (\n                    <MarkerAtom\n                      key={markerId}\n                      x={x}\n                      width={width}\n                      color={color}\n                      symbolColor={symbolColor}\n                      onMouseEnter={handleMouseEnter(\n                        markerId,\n                        groupId,\n                        annotationsGroup,\n                      )}\n                      onMouseMove={handleMouseMove}\n                      onMouseLeave={handleMouseLeave}\n                      onClick={handleClick(groupId, annotationsGroup)}\n                      content={markerContent}\n                      interactionState={state}\n                      textOverflow={textOverflow}\n                      truncateMode={truncateMode}\n                    />\n                  );\n                });\n            })}\n          </TrackAtom>\n        );\n      })}\n    </AnnotationsAtom>\n  );\n};\n\n(\n  AnnotationsRenderer as typeof AnnotationsRenderer & {\n    displayName: string;\n  }\n).displayName = 'AnnotationsContent';\n"],
+  "mappings": "AA+GoB;AAvGpB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,oCAAoC;AAC7C,SAAS,iCAAiC;AAC1C,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAG1B,SAAS,gCAAgC;AACzC,SAAS,mCAAmC;AAC5C,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AAEpC,MAAM,8BACJ,CAAK,WAAiC,gBACtC,CAAC,GAAM,MAAS;AACd,QAAM,YAAY,UAAU,CAAC,IAAI,WAAW,YAAY,CAAC;AACzD,QAAM,YAAY,UAAU,CAAC,IAAI,WAAW,YAAY,CAAC;AACzD,SAAO,YAAY;AACrB;AAiBK,MAAM,sBAAsB,CAAC,UAAoC;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,UAAU,WAAW;AAC3B,QAAM,cAAc,0BAA0B,QAAQ,OAAO,YAAY;AAEzE,QAAM,YAAY,6BAA6B;AAC/C,QAAM,EAAE,kBAAkB,iBAAiB,kBAAkB,YAAY,IACvE,uBAAuB,QAAQ,UAAU;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MAEC,sBAAY,IAAI,CAAC,OAAO,gBAAgB;AACvC,cAAM,aAAa,UAAU,cACzB,UAAU,oBACV;AAEJ,cAAM,eAAe,MAAM,KAAK,MAAM,QAAQ,QAAQ,CAAC,EAAE;AAAA,UACvD;AAAA,YACE,CAAC,CAAC,EAAE,KAAK,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,QAAQ,UAAU;AAAA,YACrD,CAAC,CAAC,EAAE,KAAK,MAAM,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC;AAAA,UACzD;AAAA,QACF;AAEA,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,MAAM;AAAA,YACb,QAAQ,MAAM;AAAA,YAGb,uBAAa,IAAI,CAAC,CAAC,SAAS,gBAAgB,MAAM;AACjD,qBAAO,iBACJ;AAAA,gBACC;AAAA,kBACE,CAAC,MAAM,eAAe,EAAE;AAAA,kBACxB,CAAC,MAAM,EAAE;AAAA,gBACX;AAAA,cACF,EACC,IAAI,CAAC,EAAE,KAAK,UAAU,QAAQ,MAAM;AACnC,sBAAM,CAAC,MAAM,IAAI;AAEjB,sBAAM,EAAE,OAAO,YAAY,IAAI,mBAAmB,OAAO;AAEzD,sBAAM,QAAQ;AAAA,kBACZ;AAAA,kBACA;AAAA,gBACF;AAEA,sBAAM,EAAE,GAAG,OAAAA,OAAM,IAAI,yBAAyB,QAAQ,KAAK;AAE3D,sBAAM,gBAAgB,oBAAoB,OAAO;AAEjD,uBACE;AAAA,kBAAC;AAAA;AAAA,oBAEC;AAAA,oBACA,OAAOA;AAAA,oBACP;AAAA,oBACA;AAAA,oBACA,cAAc;AAAA,sBACZ;AAAA,sBACA;AAAA,sBACA;AAAA,oBACF;AAAA,oBACA,aAAa;AAAA,oBACb,cAAc;AAAA,oBACd,SAAS,YAAY,SAAS,gBAAgB;AAAA,oBAC9C,SAAS;AAAA,oBACT,kBAAkB;AAAA,oBAClB;AAAA,oBACA;AAAA;AAAA,kBAhBK;AAAA,gBAiBP;AAAA,cAEJ,CAAC;AAAA,YACL,CAAC;AAAA;AAAA,UA9CI;AAAA,QA+CP;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAGE,oBAGA,cAAc;",
   "names": ["width"]
 }

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css

@@ -1,4 +1,4 @@
-._1yc349j0-3-7-1 {
+._1yc349j0-3-9-0 {
   position: absolute;
   top: 0;
   left: 0;

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsCanvasLayout.css";
-var canvasContainer = "_1yc349j0-3-7-1";
+var canvasContainer = "_1yc349j0-3-9-0";
 export {
   canvasContainer
 };

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css.ts"],
-  "sourcesContent": ["import './AnnotationsCanvasLayout.css';\nexport var canvasContainer = '_1yc349j0-3-7-1';"],
+  "sourcesContent": ["import './AnnotationsCanvasLayout.css';\nexport var canvasContainer = '_1yc349j0-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/displays/AnnotationsChartDisplay.js

@@ -1,20 +1,26 @@
 import { Fragment, jsx } from "react/jsx-runtime";
+import { useContext } from "react";
 import { AnnotationsTrackDisplay } from "./AnnotationsTrackDisplay.js";
+import { AnnotationsConfigContext } from "../../../contexts/AnnotationsConfig.context.js";
 import { useMarkersByTrack } from "../../../hooks/useMarkersByTrack.js";
 const AnnotationsChartDisplay = () => {
   const tracksWithMarkers = useMarkersByTrack();
-  return /* @__PURE__ */ jsx(Fragment, { children: tracksWithMarkers.map(({ markers, hidden, label }, i) => /* @__PURE__ */ jsx(
-    AnnotationsTrackDisplay,
-    {
-      trackIndex: i,
-      drawTopLine: i === 0,
-      markers,
-      label,
-      hidden,
-      emphasizeBottomLine: i === tracksWithMarkers.length - 1
-    },
-    i
-  )) });
+  const { outerBottomLine } = useContext(AnnotationsConfigContext);
+  return /* @__PURE__ */ jsx(Fragment, { children: tracksWithMarkers.map(({ markers, hidden, label }, i) => {
+    const isLastTrack = i === tracksWithMarkers.length - 1;
+    return /* @__PURE__ */ jsx(
+      AnnotationsTrackDisplay,
+      {
+        trackIndex: i,
+        drawTopLine: i === 0 && tracksWithMarkers.length > 1,
+        drawBottomLine: !isLastTrack || !!outerBottomLine,
+        markers,
+        label,
+        hidden
+      },
+      i
+    );
+  }) });
 };
 AnnotationsChartDisplay["displayName"] = "AnnotationsChartDisplay";
 export {

package/esm/charts/core/components/annotations/components/canvas/displays/AnnotationsChartDisplay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/annotations/components/canvas/displays/AnnotationsChartDisplay.tsx"],
-  "sourcesContent": ["import { AnnotationsTrackDisplay } from './AnnotationsTrackDisplay.js';\nimport { useMarkersByTrack } from '../../../hooks/useMarkersByTrack.js';\n\nexport const AnnotationsChartDisplay = () => {\n  const tracksWithMarkers = useMarkersByTrack();\n\n  return (\n    <>\n      {tracksWithMarkers.map(({ markers, hidden, label }, i) => (\n        <AnnotationsTrackDisplay\n          key={i}\n          trackIndex={i}\n          drawTopLine={i === 0}\n          markers={markers}\n          label={label}\n          hidden={hidden}\n          emphasizeBottomLine={i === tracksWithMarkers.length - 1}\n        />\n      ))}\n    </>\n  );\n};\n\nAnnotationsChartDisplay['displayName'] = 'AnnotationsChartDisplay';\n"],
-  "mappings": "AAOI,mBAEI,WAFJ;AAPJ,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAE3B,MAAM,0BAA0B,MAAM;AAC3C,QAAM,oBAAoB,kBAAkB;AAE5C,SACE,gCACG,4BAAkB,IAAI,CAAC,EAAE,SAAS,QAAQ,MAAM,GAAG,MAClD;AAAA,IAAC;AAAA;AAAA,MAEC,YAAY;AAAA,MACZ,aAAa,MAAM;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA,qBAAqB,MAAM,kBAAkB,SAAS;AAAA;AAAA,IANjD;AAAA,EAOP,CACD,GACH;AAEJ;AAEA,wBAAwB,aAAa,IAAI;",
+  "sourcesContent": ["import { useContext } from 'react';\n\nimport { AnnotationsTrackDisplay } from './AnnotationsTrackDisplay.js';\nimport { AnnotationsConfigContext } from '../../../contexts/AnnotationsConfig.context.js';\nimport { useMarkersByTrack } from '../../../hooks/useMarkersByTrack.js';\n\nexport const AnnotationsChartDisplay = () => {\n  const tracksWithMarkers = useMarkersByTrack();\n  const { outerBottomLine } = useContext(AnnotationsConfigContext);\n\n  return (\n    <>\n      {tracksWithMarkers.map(({ markers, hidden, label }, i) => {\n        const isLastTrack = i === tracksWithMarkers.length - 1;\n\n        return (\n          <AnnotationsTrackDisplay\n            key={i}\n            trackIndex={i}\n            drawTopLine={i === 0 && tracksWithMarkers.length > 1}\n            drawBottomLine={!isLastTrack || !!outerBottomLine}\n            markers={markers}\n            label={label}\n            hidden={hidden}\n          />\n        );\n      })}\n    </>\n  );\n};\n\nAnnotationsChartDisplay['displayName'] = 'AnnotationsChartDisplay';\n"],
+  "mappings": "AAWI,mBAKM,WALN;AAXJ,SAAS,kBAAkB;AAE3B,SAAS,+BAA+B;AACxC,SAAS,gCAAgC;AACzC,SAAS,yBAAyB;AAE3B,MAAM,0BAA0B,MAAM;AAC3C,QAAM,oBAAoB,kBAAkB;AAC5C,QAAM,EAAE,gBAAgB,IAAI,WAAW,wBAAwB;AAE/D,SACE,gCACG,4BAAkB,IAAI,CAAC,EAAE,SAAS,QAAQ,MAAM,GAAG,MAAM;AACxD,UAAM,cAAc,MAAM,kBAAkB,SAAS;AAErD,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,YAAY;AAAA,QACZ,aAAa,MAAM,KAAK,kBAAkB,SAAS;AAAA,QACnD,gBAAgB,CAAC,eAAe,CAAC,CAAC;AAAA,QAClC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,MANK;AAAA,IAOP;AAAA,EAEJ,CAAC,GACH;AAEJ;AAEA,wBAAwB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/displays/AnnotationsMarkersDisplay.js

@@ -38,7 +38,8 @@ const AnnotationsMarkersDisplay = ({
       width: widthProp,
       x,
       textOverflow,
-      truncateMode
+      truncateMode,
+      symbolColor
     } = props;
     const isRange = widthProp > 0;
     const outOfBounds = isRange ? x + widthProp <= 0 : x < 0 || x > trackWidth;
@@ -78,6 +79,7 @@ const AnnotationsMarkersDisplay = ({
       strokeColor: getTokenComputedStyle(MARKER_STROKE_COLOR),
       opacity,
       brightness,
+      symbolColor: symbolColor ? getTokenComputedStyle(symbolColor) : void 0,
       children: sanitizedContent
     };
     return isRange ? /* @__PURE__ */ jsxs(Fragment, { children: [

package/esm/charts/core/components/annotations/components/canvas/displays/AnnotationsMarkersDisplay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/annotations/components/canvas/displays/AnnotationsMarkersDisplay.tsx"],
-  "sourcesContent": ["import { Fragment, type PropsWithChildren, useContext } from 'react';\n\nimport { useCurrentTheme } from '../../../../../../../core/hooks/useCurrentTheme.js';\nimport { getTokenComputedStyle } from '../../../../../utils/getTokenComputedStyle.js';\nimport { RectClipPathCanvas } from '../../../../canvas/components/RectClipPathCanvas.js';\nimport {\n  MARKER_STROKE_COLOR,\n  MARKER_STROKE_WIDTH,\n  MINIMUM_MARKER_WIDTH,\n  PILL_MARKER_HEIGHT,\n  TRACK_HEIGHT,\n} from '../../../constants.js';\nimport { AnnotationsConfigContext } from '../../../contexts/AnnotationsConfig.context.js';\nimport { type MarkerAtomProps } from '../../../types/marker.js';\nimport { cropMarker } from '../../../utils/crop-marker.js';\nimport { getMarkerOffsetByTrack } from '../../../utils/get-markers-offset-by-track.js';\nimport { useTrackDisplay } from '../hooks/use-track-display.js';\nimport { CanvasContextRestore } from '../renderers/CanvasContextRestore.js';\nimport { RangeMarkerRenderer } from '../renderers/RangeMarkerRenderer.js';\nimport { VALUE_MARKER_WIDTH } from '../renderers/value-marker-renderer/constants.js';\nimport {\n  ValueMarkerRenderer,\n  ValueMarkerRendererProps,\n} from '../renderers/value-marker-renderer/ValueMarkerRenderer.js';\nimport { calculateMarkerWidthAndContent } from '../utils/calculate-marker-width-and-content.js';\nimport { getMarkerBrightnessPercentageBasedOnState } from '../utils/get-marker-brightness-percentage-based-on-state.js';\n\nconst MARKER_DEFAULT_OPACITY = 0.85;\nconst MARKER_HOVER_OPACITY = 0.2;\n\nexport const AnnotationsMarkersDisplay = ({\n  markers,\n}: {\n  markers: MarkerAtomProps[];\n}) => {\n  const theme = useCurrentTheme();\n  const { trackWidth } = useContext(AnnotationsConfigContext);\n  const { offsetX, trackIndex } = useTrackDisplay();\n\n  return markers.map((props, markerKey) => {\n    const {\n      color,\n      content,\n      interactionState = 'default',\n      width: widthProp,\n      x,\n      textOverflow,\n      truncateMode,\n    } = props;\n    const isRange = widthProp > 0;\n    const outOfBounds = isRange ? x + widthProp <= 0 : x < 0 || x > trackWidth;\n\n    if (outOfBounds) {\n      return null;\n    }\n\n    const markerMinWidth = isRange ? MINIMUM_MARKER_WIDTH : VALUE_MARKER_WIDTH;\n    const width = Math.max(widthProp, markerMinWidth);\n\n    const markerOffsetByTrack = getMarkerOffsetByTrack(trackIndex);\n\n    const brightness = getMarkerBrightnessPercentageBasedOnState(\n      theme,\n      interactionState,\n    );\n\n    const opacity =\n      interactionState === 'inactive'\n        ? MARKER_HOVER_OPACITY\n        : MARKER_DEFAULT_OPACITY;\n\n    const { croppedX, croppedWidth } = cropMarker(x, width, trackWidth);\n\n    const {\n      sanitizedContent,\n      calculatedMarkerWidth,\n      valueMarkerOrientation,\n      calculatedX,\n    } = calculateMarkerWidthAndContent({\n      trackWidth,\n      trackLeftBoundary: offsetX,\n      content,\n      width: croppedWidth,\n      x: croppedX,\n      isRange,\n      textOverflow,\n      truncateMode,\n    });\n\n    const markerProps: PropsWithChildren<ValueMarkerRendererProps> = {\n      x: calculatedX,\n      y: markerOffsetByTrack,\n      width: calculatedMarkerWidth,\n      height: PILL_MARKER_HEIGHT,\n      fillColor: getTokenComputedStyle(color),\n      strokeColor: getTokenComputedStyle(MARKER_STROKE_COLOR),\n      opacity: opacity,\n      brightness: brightness,\n      children: sanitizedContent,\n    };\n\n    return isRange ? (\n      <Fragment key={`${markerKey}_${x}`}>\n        <RectClipPathCanvas\n          position={{\n            x: offsetX - MARKER_STROKE_WIDTH * devicePixelRatio,\n            y: markerOffsetByTrack - MARKER_STROKE_WIDTH * devicePixelRatio,\n          }}\n          height={TRACK_HEIGHT}\n          width={trackWidth + 2 * MARKER_STROKE_WIDTH * devicePixelRatio}\n        />\n        <RangeMarkerRenderer {...markerProps} />\n        <CanvasContextRestore />\n      </Fragment>\n    ) : (\n      <Fragment key={`${markerKey}_${x}`}>\n        <ValueMarkerRenderer\n          {...markerProps}\n          orientation={valueMarkerOrientation}\n        />\n      </Fragment>\n    );\n  });\n};\n\nAnnotationsMarkersDisplay['displayName'] = 'AnnotationsMarkersDisplay';\n"],
-  "mappings": "AAsGM,SACE,KADF;AAtGN,SAAS,UAAkC,kBAAkB;AAE7D,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAEzC,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,OAEK;AACP,SAAS,sCAAsC;AAC/C,SAAS,iDAAiD;AAE1D,MAAM,yBAAyB;AAC/B,MAAM,uBAAuB;AAEtB,MAAM,4BAA4B,CAAC;AAAA,EACxC;AACF,MAEM;AACJ,QAAM,QAAQ,gBAAgB;AAC9B,QAAM,EAAE,WAAW,IAAI,WAAW,wBAAwB;AAC1D,QAAM,EAAE,SAAS,WAAW,IAAI,gBAAgB;AAEhD,SAAO,QAAQ,IAAI,CAAC,OAAO,cAAc;AACvC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AACJ,UAAM,UAAU,YAAY;AAC5B,UAAM,cAAc,UAAU,IAAI,aAAa,IAAI,IAAI,KAAK,IAAI;AAEhE,QAAI,aAAa;AACf,aAAO;AAAA,IACT;AAEA,UAAM,iBAAiB,UAAU,uBAAuB;AACxD,UAAM,QAAQ,KAAK,IAAI,WAAW,cAAc;AAEhD,UAAM,sBAAsB,uBAAuB,UAAU;AAE7D,UAAM,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,IACF;AAEA,UAAM,UACJ,qBAAqB,aACjB,uBACA;AAEN,UAAM,EAAE,UAAU,aAAa,IAAI,WAAW,GAAG,OAAO,UAAU;AAElE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,+BAA+B;AAAA,MACjC;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,MACP,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,cAA2D;AAAA,MAC/D,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAW,sBAAsB,KAAK;AAAA,MACtC,aAAa,sBAAsB,mBAAmB;AAAA,MACtD;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAEA,WAAO,UACL,qBAAC,YACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,YACR,GAAG,UAAU,sBAAsB;AAAA,YACnC,GAAG,sBAAsB,sBAAsB;AAAA,UACjD;AAAA,UACA,QAAQ;AAAA,UACR,OAAO,aAAa,IAAI,sBAAsB;AAAA;AAAA,MAChD;AAAA,MACA,oBAAC,uBAAqB,GAAG,aAAa;AAAA,MACtC,oBAAC,wBAAqB;AAAA,SAVT,GAAG,SAAS,IAAI,CAAC,EAWhC,IAEA,oBAAC,YACC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,aAAa;AAAA;AAAA,IACf,KAJa,GAAG,SAAS,IAAI,CAAC,EAKhC;AAAA,EAEJ,CAAC;AACH;AAEA,0BAA0B,aAAa,IAAI;",
+  "sourcesContent": ["import { Fragment, type PropsWithChildren, useContext } from 'react';\n\nimport { useCurrentTheme } from '../../../../../../../core/hooks/useCurrentTheme.js';\nimport { getTokenComputedStyle } from '../../../../../utils/getTokenComputedStyle.js';\nimport { RectClipPathCanvas } from '../../../../canvas/components/RectClipPathCanvas.js';\nimport {\n  MARKER_STROKE_COLOR,\n  MARKER_STROKE_WIDTH,\n  MINIMUM_MARKER_WIDTH,\n  PILL_MARKER_HEIGHT,\n  TRACK_HEIGHT,\n} from '../../../constants.js';\nimport { AnnotationsConfigContext } from '../../../contexts/AnnotationsConfig.context.js';\nimport { type MarkerAtomProps } from '../../../types/marker.js';\nimport { cropMarker } from '../../../utils/crop-marker.js';\nimport { getMarkerOffsetByTrack } from '../../../utils/get-markers-offset-by-track.js';\nimport { useTrackDisplay } from '../hooks/use-track-display.js';\nimport { CanvasContextRestore } from '../renderers/CanvasContextRestore.js';\nimport { RangeMarkerRenderer } from '../renderers/RangeMarkerRenderer.js';\nimport { VALUE_MARKER_WIDTH } from '../renderers/value-marker-renderer/constants.js';\nimport {\n  ValueMarkerRenderer,\n  ValueMarkerRendererProps,\n} from '../renderers/value-marker-renderer/ValueMarkerRenderer.js';\nimport { calculateMarkerWidthAndContent } from '../utils/calculate-marker-width-and-content.js';\nimport { getMarkerBrightnessPercentageBasedOnState } from '../utils/get-marker-brightness-percentage-based-on-state.js';\n\nconst MARKER_DEFAULT_OPACITY = 0.85;\nconst MARKER_HOVER_OPACITY = 0.2;\n\nexport const AnnotationsMarkersDisplay = ({\n  markers,\n}: {\n  markers: MarkerAtomProps[];\n}) => {\n  const theme = useCurrentTheme();\n  const { trackWidth } = useContext(AnnotationsConfigContext);\n  const { offsetX, trackIndex } = useTrackDisplay();\n\n  return markers.map((props, markerKey) => {\n    const {\n      color,\n      content,\n      interactionState = 'default',\n      width: widthProp,\n      x,\n      textOverflow,\n      truncateMode,\n      symbolColor,\n    } = props;\n    const isRange = widthProp > 0;\n    const outOfBounds = isRange ? x + widthProp <= 0 : x < 0 || x > trackWidth;\n\n    if (outOfBounds) {\n      return null;\n    }\n\n    const markerMinWidth = isRange ? MINIMUM_MARKER_WIDTH : VALUE_MARKER_WIDTH;\n    const width = Math.max(widthProp, markerMinWidth);\n\n    const markerOffsetByTrack = getMarkerOffsetByTrack(trackIndex);\n\n    const brightness = getMarkerBrightnessPercentageBasedOnState(\n      theme,\n      interactionState,\n    );\n\n    const opacity =\n      interactionState === 'inactive'\n        ? MARKER_HOVER_OPACITY\n        : MARKER_DEFAULT_OPACITY;\n\n    const { croppedX, croppedWidth } = cropMarker(x, width, trackWidth);\n\n    const {\n      sanitizedContent,\n      calculatedMarkerWidth,\n      valueMarkerOrientation,\n      calculatedX,\n    } = calculateMarkerWidthAndContent({\n      trackWidth,\n      trackLeftBoundary: offsetX,\n      content,\n      width: croppedWidth,\n      x: croppedX,\n      isRange,\n      textOverflow,\n      truncateMode,\n    });\n\n    const markerProps: PropsWithChildren<ValueMarkerRendererProps> = {\n      x: calculatedX,\n      y: markerOffsetByTrack,\n      width: calculatedMarkerWidth,\n      height: PILL_MARKER_HEIGHT,\n      fillColor: getTokenComputedStyle(color),\n      strokeColor: getTokenComputedStyle(MARKER_STROKE_COLOR),\n      opacity: opacity,\n      brightness: brightness,\n      symbolColor: symbolColor ? getTokenComputedStyle(symbolColor) : undefined,\n      children: sanitizedContent,\n    };\n\n    return isRange ? (\n      <Fragment key={`${markerKey}_${x}`}>\n        <RectClipPathCanvas\n          position={{\n            x: offsetX - MARKER_STROKE_WIDTH * devicePixelRatio,\n            y: markerOffsetByTrack - MARKER_STROKE_WIDTH * devicePixelRatio,\n          }}\n          height={TRACK_HEIGHT}\n          width={trackWidth + 2 * MARKER_STROKE_WIDTH * devicePixelRatio}\n        />\n        <RangeMarkerRenderer {...markerProps} />\n        <CanvasContextRestore />\n      </Fragment>\n    ) : (\n      <Fragment key={`${markerKey}_${x}`}>\n        <ValueMarkerRenderer\n          {...markerProps}\n          orientation={valueMarkerOrientation}\n        />\n      </Fragment>\n    );\n  });\n};\n\nAnnotationsMarkersDisplay['displayName'] = 'AnnotationsMarkersDisplay';\n"],
+  "mappings": "AAwGM,SACE,KADF;AAxGN,SAAS,UAAkC,kBAAkB;AAE7D,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAEzC,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,OAEK;AACP,SAAS,sCAAsC;AAC/C,SAAS,iDAAiD;AAE1D,MAAM,yBAAyB;AAC/B,MAAM,uBAAuB;AAEtB,MAAM,4BAA4B,CAAC;AAAA,EACxC;AACF,MAEM;AACJ,QAAM,QAAQ,gBAAgB;AAC9B,QAAM,EAAE,WAAW,IAAI,WAAW,wBAAwB;AAC1D,QAAM,EAAE,SAAS,WAAW,IAAI,gBAAgB;AAEhD,SAAO,QAAQ,IAAI,CAAC,OAAO,cAAc;AACvC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AACJ,UAAM,UAAU,YAAY;AAC5B,UAAM,cAAc,UAAU,IAAI,aAAa,IAAI,IAAI,KAAK,IAAI;AAEhE,QAAI,aAAa;AACf,aAAO;AAAA,IACT;AAEA,UAAM,iBAAiB,UAAU,uBAAuB;AACxD,UAAM,QAAQ,KAAK,IAAI,WAAW,cAAc;AAEhD,UAAM,sBAAsB,uBAAuB,UAAU;AAE7D,UAAM,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,IACF;AAEA,UAAM,UACJ,qBAAqB,aACjB,uBACA;AAEN,UAAM,EAAE,UAAU,aAAa,IAAI,WAAW,GAAG,OAAO,UAAU;AAElE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,+BAA+B;AAAA,MACjC;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,MACP,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,cAA2D;AAAA,MAC/D,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAW,sBAAsB,KAAK;AAAA,MACtC,aAAa,sBAAsB,mBAAmB;AAAA,MACtD;AAAA,MACA;AAAA,MACA,aAAa,cAAc,sBAAsB,WAAW,IAAI;AAAA,MAChE,UAAU;AAAA,IACZ;AAEA,WAAO,UACL,qBAAC,YACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,YACR,GAAG,UAAU,sBAAsB;AAAA,YACnC,GAAG,sBAAsB,sBAAsB;AAAA,UACjD;AAAA,UACA,QAAQ;AAAA,UACR,OAAO,aAAa,IAAI,sBAAsB;AAAA;AAAA,MAChD;AAAA,MACA,oBAAC,uBAAqB,GAAG,aAAa;AAAA,MACtC,oBAAC,wBAAqB;AAAA,SAVT,GAAG,SAAS,IAAI,CAAC,EAWhC,IAEA,oBAAC,YACC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,aAAa;AAAA;AAAA,IACf,KAJa,GAAG,SAAS,IAAI,CAAC,EAKhC;AAAA,EAEJ,CAAC;AACH;AAEA,0BAA0B,aAAa,IAAI;",
   "names": []
 }