@elliemae/ds-dataviz 3.10.3 → 3.11.0-next.2

package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerX.js

@@ -41,6 +41,13 @@ const ScrollableContainerX = () => {
     props: { scrapper },
     xScrollbarPosition,
     containerRatio,
+    innerWidth,
+    isGrabbed,
+    setXScrollbarPosition,
+    setContainerRatio,
+    lastPosition,
+    innerHeight,
+    internalMargin,
     chartId
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const Scrappers = (0, import_react.useMemo)(() => {
@@ -50,19 +57,82 @@ const ScrollableContainerX = () => {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VerticalScrapper.VerticalScrapper, {});
     return null;
   }, [scrapper?.type]);
+  const [isZooming, setIsZooming] = (0, import_react.useState)(false);
+  const [startingPosition, setStartingPosition] = (0, import_react.useState)(0);
+  const [movingPosition, setMovingPosition] = (0, import_react.useState)(0);
+  const handleOnMouseDown = (0, import_react.useCallback)(
+    (e) => {
+      if (!isGrabbed) {
+        setIsZooming(true);
+        setStartingPosition(e.clientX);
+        setMovingPosition(0);
+      }
+    },
+    [isGrabbed]
+  );
+  const handleOnMouseMove = (0, import_react.useCallback)(
+    ({ clientX }) => {
+      if (isZooming)
+        setMovingPosition(clientX);
+    },
+    [isZooming]
+  );
+  const handleOnMouseUp = (0, import_react.useCallback)(
+    (e) => {
+      const bounds = e.currentTarget.closest("div").getBoundingClientRect();
+      if (!isZooming)
+        return;
+      setIsZooming(false);
+      const endingPosition = e.clientX;
+      const diff = Math.abs(startingPosition - endingPosition);
+      if (diff <= 0)
+        return;
+      const newRatio = innerWidth / (innerWidth * containerRatio / diff) < 40 ? innerWidth / 40 : innerWidth * containerRatio / diff;
+      const newPosition = lastPosition?.current + ((startingPosition > endingPosition ? endingPosition : startingPosition) - bounds.left - internalMargin.left) / containerRatio;
+      if (newPosition > innerWidth - innerWidth / newRatio)
+        setXScrollbarPosition(innerWidth - innerWidth / newRatio);
+      else
+        setXScrollbarPosition(newPosition);
+      setContainerRatio(newRatio);
+      lastPosition.current = newPosition;
+      e.stopPropagation();
+    },
+    [
+      containerRatio,
+      innerWidth,
+      isZooming,
+      internalMargin,
+      lastPosition,
+      setContainerRatio,
+      setXScrollbarPosition,
+      startingPosition
+    ]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
     className: "scrollable-container-x",
+    onMouseDown: handleOnMouseDown,
+    onMouseMove: handleOnMouseMove,
+    onMouseUp: handleOnMouseUp,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
         mask: `url(#mask-${chartId})`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-          transform: `translate(${-xScrollbarPosition * containerRatio},0)`,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesFactory.SeriesFactory, {}),
-            Scrappers,
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisBottom.AxisBottom, {})
-          ]
-        })
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+            transform: `translate(${-xScrollbarPosition * containerRatio},0)`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesFactory.SeriesFactory, {}),
+              Scrappers,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisBottom.AxisBottom, {})
+            ]
+          }),
+          isZooming && movingPosition !== 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+            x: (movingPosition < startingPosition ? movingPosition : startingPosition) - internalMargin.left,
+            width: Math.abs(movingPosition - startingPosition),
+            height: innerHeight,
+            fill: "orange",
+            style: { opacity: 0.2 }
+          }) : null
+        ]
       }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollBarX.ScrollBarX, {})
     ]

package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Scroller/ScrollableContainerX.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { AxisBottom } from '../Axis/AxisBottom';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarX } from './ScrollBarX';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nexport const ScrollableContainerX = () => {\n  const {\n    props: { scrapper },\n    xScrollbarPosition,\n    containerRatio,\n    chartId,\n  } = useContext(ChartContext);\n\n  const Scrappers = useMemo(() => {\n    if (scrapper?.type === 'horizontal') return <Scrapper />;\n    if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper?.type]);\n\n  return (\n    <g className=\"scrollable-container-x\">\n      <g mask={`url(#mask-${chartId})`}>\n        <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n          <SeriesFactory />\n          {Scrappers}\n          <AxisBottom />\n        </g>\n      </g>\n      <ScrollBarX />\n      {/* <defs>\n        <clipPath id={`scroll-clip-x-${chartId}`}>\n          <path\n            d={`M 0 -10 \n            H ${innerWidth} \n            V ${innerHeight + 2} \n            L ${innerWidth + 10}  ${innerHeight + 2} \n            L ${innerWidth + 10}  ${height} \n            L -10 ${height} \n            L -10 ${innerHeight}  \n            L 0 ${innerHeight}  \n            L 0 -10`}\n          />\n        </clipPath>\n      </defs> */}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAA2C;AAC3C,0BAA6B;AAC7B,wBAA2B;AAC3B,2BAA8B;AAC9B,wBAA2B;AAC3B,sBAAyB;AACzB,8BAAiC;AAC1B,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,4CAAC,4BAAS;AACtD,QAAI,UAAU,SAAS;AAAY,aAAO,4CAAC,4CAAiB;AAC5D,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE,6CAAC;AAAA,IAAE,WAAU;AAAA,IACX;AAAA,kDAAC;AAAA,QAAE,MAAM,aAAa;AAAA,QACpB,uDAAC;AAAA,UAAE,WAAW,aAAa,CAAC,qBAAqB;AAAA,UAC/C;AAAA,wDAAC,sCAAc;AAAA,YACd;AAAA,YACD,4CAAC,gCAAW;AAAA;AAAA,SACd;AAAA,OACF;AAAA,MACA,4CAAC,gCAAW;AAAA;AAAA,GAgBd;AAEJ;",
+  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useState, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { AxisBottom } from '../Axis/AxisBottom';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarX } from './ScrollBarX';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nimport { Controllers } from './Controllers';\nexport const ScrollableContainerX = () => {\n  const {\n    props: { scrapper },\n    xScrollbarPosition,\n    containerRatio,\n    innerWidth,\n    isGrabbed,\n    setXScrollbarPosition,\n    setContainerRatio,\n    lastPosition,\n    innerHeight,\n    internalMargin,\n    chartId,\n  } = useContext(ChartContext);\n\n  const Scrappers = useMemo(() => {\n    if (scrapper?.type === 'horizontal') return <Scrapper />;\n    if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper?.type]);\n\n  const [isZooming, setIsZooming] = useState(false);\n  const [startingPosition, setStartingPosition] = useState(0);\n  const [movingPosition, setMovingPosition] = useState(0);\n\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isGrabbed) {\n        setIsZooming(true);\n        setStartingPosition(e.clientX);\n        setMovingPosition(0);\n      }\n    },\n    [isGrabbed],\n  );\n  const handleOnMouseMove: React.MouseEventHandler = useCallback(\n    ({ clientX }) => {\n      if (isZooming) setMovingPosition(clientX);\n    },\n    [isZooming],\n  );\n  const handleOnMouseUp: React.MouseEventHandler = useCallback(\n    (e) => {\n      const bounds = e.currentTarget.closest('div').getBoundingClientRect();\n      if (!isZooming) return;\n      setIsZooming(false);\n      const endingPosition = e.clientX;\n\n      const diff = Math.abs(startingPosition - endingPosition);\n      if (diff <= 0) return;\n      const newRatio =\n        innerWidth / ((innerWidth * containerRatio) / diff) < 40\n          ? innerWidth / 40\n          : (innerWidth * containerRatio) / diff;\n      const newPosition =\n        lastPosition?.current +\n        ((startingPosition > endingPosition ? endingPosition : startingPosition) - bounds.left - internalMargin.left) /\n          containerRatio;\n\n      // if (newPosition < 0) setXScrollbarPosition(0);\n      // if is bigger thant innerwidth possible we force the end\n      if (newPosition > innerWidth - innerWidth / newRatio) setXScrollbarPosition(innerWidth - innerWidth / newRatio);\n      else setXScrollbarPosition(newPosition);\n\n      setContainerRatio(newRatio);\n      lastPosition.current = newPosition;\n      e.stopPropagation();\n    },\n    [\n      containerRatio,\n      innerWidth,\n      isZooming,\n      internalMargin,\n      lastPosition,\n      setContainerRatio,\n      setXScrollbarPosition,\n      startingPosition,\n    ],\n  );\n  return (\n    <g\n      className=\"scrollable-container-x\"\n      onMouseDown={handleOnMouseDown}\n      onMouseMove={handleOnMouseMove}\n      onMouseUp={handleOnMouseUp}\n    >\n      <g mask={`url(#mask-${chartId})`}>\n        <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n          <SeriesFactory />\n          {Scrappers}\n          <AxisBottom />\n        </g>\n        {isZooming && movingPosition !== 0 ? (\n          <rect\n            x={(movingPosition < startingPosition ? movingPosition : startingPosition) - internalMargin.left}\n            width={Math.abs(movingPosition - startingPosition)}\n            height={innerHeight}\n            fill=\"orange\"\n            style={{ opacity: 0.2 }}\n          />\n        ) : null}\n      </g>\n      <ScrollBarX />\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAAkE;AAClE,0BAA6B;AAC7B,wBAA2B;AAC3B,2BAA8B;AAC9B,wBAA2B;AAC3B,sBAAyB;AACzB,8BAAiC;AAE1B,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,4CAAC,4BAAS;AACtD,QAAI,UAAU,SAAS;AAAY,aAAO,4CAAC,4CAAiB;AAC5D,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAS,CAAC;AAC1D,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,CAAC;AAEtD,QAAM,wBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,CAAC,WAAW;AACd,qBAAa,IAAI;AACjB,4BAAoB,EAAE,OAAO;AAC7B,0BAAkB,CAAC;AAAA,MACrB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AACA,QAAM,wBAA6C;AAAA,IACjD,CAAC,EAAE,QAAQ,MAAM;AACf,UAAI;AAAW,0BAAkB,OAAO;AAAA,IAC1C;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AACA,QAAM,sBAA2C;AAAA,IAC/C,CAAC,MAAM;AACL,YAAM,SAAS,EAAE,cAAc,QAAQ,KAAK,EAAE,sBAAsB;AACpE,UAAI,CAAC;AAAW;AAChB,mBAAa,KAAK;AAClB,YAAM,iBAAiB,EAAE;AAEzB,YAAM,OAAO,KAAK,IAAI,mBAAmB,cAAc;AACvD,UAAI,QAAQ;AAAG;AACf,YAAM,WACJ,cAAe,aAAa,iBAAkB,QAAQ,KAClD,aAAa,KACZ,aAAa,iBAAkB;AACtC,YAAM,cACJ,cAAc,YACZ,mBAAmB,iBAAiB,iBAAiB,oBAAoB,OAAO,OAAO,eAAe,QACtG;AAIJ,UAAI,cAAc,aAAa,aAAa;AAAU,8BAAsB,aAAa,aAAa,QAAQ;AAAA;AACzG,8BAAsB,WAAW;AAEtC,wBAAkB,QAAQ;AAC1B,mBAAa,UAAU;AACvB,QAAE,gBAAgB;AAAA,IACpB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,SACE,6CAAC;AAAA,IACC,WAAU;AAAA,IACV,aAAa;AAAA,IACb,aAAa;AAAA,IACb,WAAW;AAAA,IAEX;AAAA,mDAAC;AAAA,QAAE,MAAM,aAAa;AAAA,QACpB;AAAA,uDAAC;AAAA,YAAE,WAAW,aAAa,CAAC,qBAAqB;AAAA,YAC/C;AAAA,0DAAC,sCAAc;AAAA,cACd;AAAA,cACD,4CAAC,gCAAW;AAAA;AAAA,WACd;AAAA,UACC,aAAa,mBAAmB,IAC/B,4CAAC;AAAA,YACC,IAAI,iBAAiB,mBAAmB,iBAAiB,oBAAoB,eAAe;AAAA,YAC5F,OAAO,KAAK,IAAI,iBAAiB,gBAAgB;AAAA,YACjD,QAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAO,EAAE,SAAS,IAAI;AAAA,WACxB,IACE;AAAA;AAAA,OACN;AAAA,MACA,4CAAC,gCAAW;AAAA;AAAA,GACd;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerY.js

@@ -38,13 +38,14 @@ var import_VerticalScrapper = require("../Scrapper/VerticalScrapper");
 var import_AxisLeft = require("../Axis/AxisLeft");
 const ScrollableContainerY = () => {
   const {
-    props: { scrapper, height, width },
+    props: { scrapper },
     xScrollbarPosition,
     containerRatio,
     innerHeight,
     innerWidth,
     internalMargin,
-    chartId
+    chartId,
+    width
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const Scrappers = (0, import_react.useMemo)(() => {
     if (scrapper?.type === "horizontal")
@@ -54,30 +55,20 @@ const ScrollableContainerY = () => {
     return null;
   }, [scrapper?.type]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-    className: "scrollable-container-x",
-    clipPath: `url(#scroll-clip-y-${chartId})`,
+    className: "scrollable-container-y",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-        transform: `translate(0,${-xScrollbarPosition * containerRatio})`,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisLeft.AxisLeft, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesFactory.SeriesFactory, {}),
-          Scrappers
-        ]
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollBarY.ScrollBarY, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", {
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", {
-          id: `scroll-clip-y-${chartId}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-            d: `M ${-internalMargin.left} 0 
-            H ${width} 
-            V ${innerHeight - 1} 
-            L ${-internalMargin.left} ${innerHeight - 1}
-            L ${-internalMargin.left}  0`
-          })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+        mask: `url(#mask-y-${chartId})`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+          transform: `translate(0,${-xScrollbarPosition * containerRatio})`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesFactory.SeriesFactory, {}),
+            Scrappers,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisLeft.AxisLeft, {})
+          ]
         })
-      })
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollBarY.ScrollBarY, {})
     ]
   });
 };

package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerY.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Scroller/ScrollableContainerY.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarY } from './ScrollBarY';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nimport { AxisLeft } from '../Axis/AxisLeft';\nexport const ScrollableContainerY = () => {\n  const {\n    props: { scrapper, height, width },\n    xScrollbarPosition,\n    containerRatio,\n    innerHeight,\n    innerWidth,\n    internalMargin,\n    chartId,\n  } = useContext(ChartContext);\n\n  const Scrappers = useMemo(() => {\n    if (scrapper?.type === 'horizontal') return <Scrapper />;\n    else if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper?.type]);\n\n  return (\n    <g className=\"scrollable-container-x\" clipPath={`url(#scroll-clip-y-${chartId})`}>\n      <g transform={`translate(0,${-xScrollbarPosition * containerRatio})`}>\n        <AxisLeft />\n        <SeriesFactory />\n        {Scrappers}\n      </g>\n      <ScrollBarY />\n\n      <defs>\n        <clipPath id={`scroll-clip-y-${chartId}`}>\n          <path\n            d={`M ${-internalMargin.left} 0 \n            H ${width} \n            V ${innerHeight - 1} \n            L ${-internalMargin.left} ${innerHeight - 1}\n            L ${-internalMargin.left}  0`}\n          />\n        </clipPath>\n      </defs>\n    </g>\n  );\n};\n\n// L ${innerWidth + 10}  ${innerHeight + 2}\n// L ${innerWidth + 10}  ${height}\n// L -10 ${height}\n// L -10 ${innerHeight}\n// L 0 ${innerHeight}\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAA2C;AAC3C,0BAA6B;AAC7B,2BAA8B;AAC9B,wBAA2B;AAC3B,sBAAyB;AACzB,8BAAiC;AACjC,sBAAyB;AAClB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,QAAQ,MAAM;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,4CAAC,4BAAS;AAAA,aAC7C,UAAU,SAAS;AAAY,aAAO,4CAAC,4CAAiB;AACjE,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE,6CAAC;AAAA,IAAE,WAAU;AAAA,IAAyB,UAAU,sBAAsB;AAAA,IACpE;AAAA,mDAAC;AAAA,QAAE,WAAW,eAAe,CAAC,qBAAqB;AAAA,QACjD;AAAA,sDAAC,4BAAS;AAAA,UACV,4CAAC,sCAAc;AAAA,UACd;AAAA;AAAA,OACH;AAAA,MACA,4CAAC,gCAAW;AAAA,MAEZ,4CAAC;AAAA,QACC,sDAAC;AAAA,UAAS,IAAI,iBAAiB;AAAA,UAC7B,sDAAC;AAAA,YACC,GAAG,KAAK,CAAC,eAAe;AAAA,gBACpB;AAAA,gBACA,cAAc;AAAA,gBACd,CAAC,eAAe,QAAQ,cAAc;AAAA,gBACtC,CAAC,eAAe;AAAA,WACtB;AAAA,SACF;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarY } from './ScrollBarY';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nimport { AxisLeft } from '../Axis/AxisLeft';\nexport const ScrollableContainerY = () => {\n  const {\n    props: { scrapper },\n    xScrollbarPosition,\n    containerRatio,\n    innerHeight,\n    innerWidth,\n    internalMargin,\n    chartId,\n    width,\n  } = useContext(ChartContext);\n\n  const Scrappers = useMemo(() => {\n    if (scrapper?.type === 'horizontal') return <Scrapper />;\n    else if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper?.type]);\n\n  return (\n    <g className=\"scrollable-container-y\">\n      <g mask={`url(#mask-y-${chartId})`}>\n        <g transform={`translate(0,${-xScrollbarPosition * containerRatio})`}>\n          <SeriesFactory />\n          {Scrappers}\n          <AxisLeft />\n        </g>\n      </g>\n      <ScrollBarY />\n\n      {/* <defs>\n        <clipPath id={`scroll-clip-y-${chartId}`}>\n          <path\n            d={`M ${-internalMargin.left} 0 \n            H ${width} \n            V ${innerHeight - 1} \n            L ${-internalMargin.left} ${innerHeight - 1}\n            L ${-internalMargin.left}  0`}\n          />\n        </clipPath>\n      </defs> */}\n    </g>\n  );\n};\n\n// L ${innerWidth + 10}  ${innerHeight + 2}\n// L ${innerWidth + 10}  ${height}\n// L -10 ${height}\n// L -10 ${innerHeight}\n// L 0 ${innerHeight}\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAA2C;AAC3C,0BAA6B;AAC7B,2BAA8B;AAC9B,wBAA2B;AAC3B,sBAAyB;AACzB,8BAAiC;AACjC,sBAAyB;AAClB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,4CAAC,4BAAS;AAAA,aAC7C,UAAU,SAAS;AAAY,aAAO,4CAAC,4CAAiB;AACjE,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE,6CAAC;AAAA,IAAE,WAAU;AAAA,IACX;AAAA,kDAAC;AAAA,QAAE,MAAM,eAAe;AAAA,QACtB,uDAAC;AAAA,UAAE,WAAW,eAAe,CAAC,qBAAqB;AAAA,UACjD;AAAA,wDAAC,sCAAc;AAAA,YACd;AAAA,YACD,4CAAC,4BAAS;AAAA;AAAA,SACZ;AAAA,OACF;AAAA,MACA,4CAAC,gCAAW;AAAA;AAAA,GAad;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/SeriesFactory.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/parts/SeriesFactory.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { Line, Points, Bars, StackedBar, Area, HorizontalBars, HorizontalStackedBars } from '../series';\nimport { getStackedIndex } from '../helpers';\nimport { useVirtualizedSeries } from '../helpers/useVirtualizedSeries';\n\nexport const SeriesFactory = () => {\n  const {\n    props: { groups, types },\n    isHorizontal,\n  } = useContext(ChartContext);\n\n  const virtualizedSeries = useVirtualizedSeries();\n  return useMemo(\n    () => (\n      <g className=\"content\">\n        {/* <g className=\"content\"> */}\n        {virtualizedSeries.map((serie) => {\n          const serieProps = {\n            key: serie.key,\n            serie,\n          };\n          if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1 && isHorizontal) {\n            return <HorizontalStackedBars {...serieProps} />;\n          }\n          if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1) {\n            return <StackedBar {...serieProps} />;\n          }\n          if (serie.type === 'bar' && isHorizontal) {\n            return <HorizontalBars {...serieProps} />;\n          }\n          if (serie.type === 'bar') {\n            return <Bars {...serieProps} />;\n          }\n          if ((types === 'scatter' && !serie.type) || serie.type === 'point') {\n            return <Points {...serieProps} />;\n          }\n          if (serie.type === 'line') {\n            return <Line {...serieProps} />;\n          }\n          if (serie.type === 'area') {\n            return <Area {...serieProps} />;\n          }\n          return null;\n        })}\n      </g>\n    ),\n    [groups, isHorizontal, types, virtualizedSeries],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAGA,mBAA2C;AAC3C,0BAA6B;AAC7B,oBAA4F;AAC5F,qBAAgC;AAChC,kCAAqC;AAE9B,MAAM,gBAAgB,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,MAAM;AAAA,IACvB;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,wBAAoB,kDAAqB;AAC/C,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,WAAU;AAAA,MAEV,4BAAkB,IAAI,CAAC,UAAU;AAChC,cAAM,aAAa;AAAA,UACjB,KAAK,MAAM;AAAA,UACX;AAAA,QACF;AACA,YAAI,MAAM,SAAS,SAAS,cAAU,gCAAgB,QAAQ,MAAM,IAAI,IAAI,MAAM,cAAc;AAC9F,iBAAO,4CAAC;AAAA,YAAuB,GAAG;AAAA,WAAY;AAAA,QAChD;AACA,YAAI,MAAM,SAAS,SAAS,cAAU,gCAAgB,QAAQ,MAAM,IAAI,IAAI,IAAI;AAC9E,iBAAO,4CAAC;AAAA,YAAY,GAAG;AAAA,WAAY;AAAA,QACrC;AACA,YAAI,MAAM,SAAS,SAAS,cAAc;AACxC,iBAAO,4CAAC;AAAA,YAAgB,GAAG;AAAA,WAAY;AAAA,QACzC;AACA,YAAI,MAAM,SAAS,OAAO;AACxB,iBAAO,4CAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,YAAK,UAAU,aAAa,CAAC,MAAM,QAAS,MAAM,SAAS,SAAS;AAClE,iBAAO,4CAAC;AAAA,YAAQ,GAAG;AAAA,WAAY;AAAA,QACjC;AACA,YAAI,MAAM,SAAS,QAAQ;AACzB,iBAAO,4CAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,YAAI,MAAM,SAAS,QAAQ;AACzB,iBAAO,4CAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,eAAO;AAAA,MACT,CAAC;AAAA,KACH;AAAA,IAEF,CAAC,QAAQ,cAAc,OAAO,iBAAiB;AAAA,EACjD;AACF;",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useState, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { Line, Points, Bars, StackedBar, Area, HorizontalBars, HorizontalStackedBars } from '../series';\nimport { getStackedIndex } from '../helpers';\nimport { useVirtualizedSeries } from '../helpers/useVirtualizedSeries';\n\nexport const SeriesFactory = () => {\n  const {\n    props: { groups, types },\n    isHorizontal,\n  } = useContext(ChartContext);\n\n  const virtualizedSeries = useVirtualizedSeries();\n\n  return useMemo(\n    () => (\n      <g className=\"content\">\n        {/* <g className=\"content\"> */}\n        {virtualizedSeries.map((serie) => {\n          const serieProps = {\n            key: serie.key,\n            serie,\n          };\n          if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1 && isHorizontal) {\n            return <HorizontalStackedBars {...serieProps} />;\n          }\n          if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1) {\n            return <StackedBar {...serieProps} />;\n          }\n          if (serie.type === 'bar' && isHorizontal) {\n            return <HorizontalBars {...serieProps} />;\n          }\n          if (serie.type === 'bar') {\n            return <Bars {...serieProps} />;\n          }\n          if ((types === 'scatter' && !serie.type) || serie.type === 'point') {\n            return <Points {...serieProps} />;\n          }\n          if (serie.type === 'line') {\n            return <Line {...serieProps} />;\n          }\n          if (serie.type === 'area') {\n            return <Area {...serieProps} />;\n          }\n          return null;\n        })}\n      </g>\n    ),\n    [groups, isHorizontal, types, virtualizedSeries],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAGA,mBAAkE;AAClE,0BAA6B;AAC7B,oBAA4F;AAC5F,qBAAgC;AAChC,kCAAqC;AAE9B,MAAM,gBAAgB,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,MAAM;AAAA,IACvB;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,wBAAoB,kDAAqB;AAE/C,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,WAAU;AAAA,MAEV,4BAAkB,IAAI,CAAC,UAAU;AAChC,cAAM,aAAa;AAAA,UACjB,KAAK,MAAM;AAAA,UACX;AAAA,QACF;AACA,YAAI,MAAM,SAAS,SAAS,cAAU,gCAAgB,QAAQ,MAAM,IAAI,IAAI,MAAM,cAAc;AAC9F,iBAAO,4CAAC;AAAA,YAAuB,GAAG;AAAA,WAAY;AAAA,QAChD;AACA,YAAI,MAAM,SAAS,SAAS,cAAU,gCAAgB,QAAQ,MAAM,IAAI,IAAI,IAAI;AAC9E,iBAAO,4CAAC;AAAA,YAAY,GAAG;AAAA,WAAY;AAAA,QACrC;AACA,YAAI,MAAM,SAAS,SAAS,cAAc;AACxC,iBAAO,4CAAC;AAAA,YAAgB,GAAG;AAAA,WAAY;AAAA,QACzC;AACA,YAAI,MAAM,SAAS,OAAO;AACxB,iBAAO,4CAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,YAAK,UAAU,aAAa,CAAC,MAAM,QAAS,MAAM,SAAS,SAAS;AAClE,iBAAO,4CAAC;AAAA,YAAQ,GAAG;AAAA,WAAY;AAAA,QACjC;AACA,YAAI,MAAM,SAAS,QAAQ;AACzB,iBAAO,4CAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,YAAI,MAAM,SAAS,QAAQ;AACzB,iBAAO,4CAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,eAAO;AAAA,MACT,CAAC;AAAA,KACH;AAAA,IAEF,CAAC,QAAQ,cAAc,OAAO,iBAAiB;AAAA,EACjD;AACF;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/TrendHighlight.js

@@ -0,0 +1,52 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TrendHighlight_exports = {};
+__export(TrendHighlight_exports, {
+  TrendHighlight: () => TrendHighlight
+});
+module.exports = __toCommonJS(TrendHighlight_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ChartContext = require("../ChartContext");
+const TrendHighlight = ({ currentDatum }) => {
+  const { currentData, xScale, getXScaleValue, getYScaleValue, yScale } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const prevPoint = currentData?.find((serie) => serie.name === currentDatum.serie && serie.type === "line")?.data?.find((datum) => datum.position === currentDatum.position - 1);
+  if (!prevPoint || prevPoint?.length === 0)
+    return null;
+  const xCurrentPosition = getXScaleValue(currentDatum);
+  const yCurrentPosition = getYScaleValue(currentDatum);
+  const xPreviousPosition = getXScaleValue(prevPoint);
+  const yPreviousPosition = getYScaleValue(prevPoint);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", {
+    strokeWidth: "2",
+    stroke: yPreviousPosition > yCurrentPosition ? "green" : "red",
+    x1: xPreviousPosition,
+    x2: xCurrentPosition,
+    y1: yPreviousPosition,
+    y2: yCurrentPosition
+  });
+};
+//# sourceMappingURL=TrendHighlight.js.map

package/dist/cjs/graphs/Chart/parts/TrendHighlight.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/graphs/Chart/parts/TrendHighlight.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\n\nexport const TrendHighlight = ({ currentDatum }) => {\n  const { currentData, xScale, getXScaleValue, getYScaleValue, yScale } = useContext(ChartContext);\n\n  const prevPoint = currentData\n    ?.find((serie) => serie.name === currentDatum.serie && serie.type === 'line')\n    ?.data?.find((datum) => datum.position === currentDatum.position - 1);\n\n  if (!prevPoint || prevPoint?.length === 0) return null;\n  // const offset = xScale.bandwidth ? xScale.bandwidth() / 2 : 0;\n\n  const xCurrentPosition = getXScaleValue(currentDatum);\n  const yCurrentPosition = getYScaleValue(currentDatum);\n  const xPreviousPosition = getXScaleValue(prevPoint);\n  const yPreviousPosition = getYScaleValue(prevPoint);\n\n  return (\n    <line\n      strokeWidth=\"2\"\n      stroke={yPreviousPosition > yCurrentPosition ? 'green' : 'red'}\n      x1={xPreviousPosition}\n      x2={xCurrentPosition}\n      y1={yPreviousPosition}\n      y2={yCurrentPosition}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAClC,0BAA6B;AAGtB,MAAM,iBAAiB,CAAC,EAAE,aAAa,MAAM;AAClD,QAAM,EAAE,aAAa,QAAQ,gBAAgB,gBAAgB,OAAO,QAAI,yBAAW,gCAAY;AAE/F,QAAM,YAAY,aACd,KAAK,CAAC,UAAU,MAAM,SAAS,aAAa,SAAS,MAAM,SAAS,MAAM,GAC1E,MAAM,KAAK,CAAC,UAAU,MAAM,aAAa,aAAa,WAAW,CAAC;AAEtE,MAAI,CAAC,aAAa,WAAW,WAAW;AAAG,WAAO;AAGlD,QAAM,mBAAmB,eAAe,YAAY;AACpD,QAAM,mBAAmB,eAAe,YAAY;AACpD,QAAM,oBAAoB,eAAe,SAAS;AAClD,QAAM,oBAAoB,eAAe,SAAS;AAElD,SACE,4CAAC;AAAA,IACC,aAAY;AAAA,IACZ,QAAQ,oBAAoB,mBAAmB,UAAU;AAAA,IACzD,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,GACN;AAEJ;",
+  "names": []
+}

package/dist/cjs/graphs/Chart/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/graphs/Chart/react-desc-prop-types.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\nimport { Series, ScaleLinear, ScaleBand } from 'd3';\nexport declare namespace DSChartT {\n  export type SerieTypeT = 'line' | 'bar' | 'area' | 'point';\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export type LinearScale = ScaleLinear<number, number, never>;\n  export type BandScale = ScaleBand<string>;\n\n  export type Scales = LinearScale | BandScale;\n  export interface SeriesT {\n    name: string;\n    data: Array<number | null | { x: number; y: number }>;\n    type: SerieTypeT;\n    scale?: string;\n    color?: string;\n    // line\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export interface ScrapperT {\n    type: 'horizontal' | 'vertical';\n    color: string;\n    tooltipPreference: string;\n  }\n\n  export interface SerieComponentT {\n    serie: InternalSerie;\n  }\n\n  export interface AxisTickT {\n    tickValues: number[] | Date[];\n    tickFormat: () => void | string;\n    tickCount: number;\n    tickRotation: number;\n    overwriteTicks: boolean;\n    color: string;\n  }\n\n  export interface AxisT {\n    showGrid: boolean;\n    color: string;\n    label: string;\n    type: AxisTypeT;\n    cols?: string[];\n    domainPadding: number;\n    hideAxis: boolean;\n    beginAtZero?: boolean;\n    advanced: {\n      pointSpacing: {\n        type: 'string';\n        value: number;\n      };\n    };\n    tick: AxisTickT;\n  }\n\n  export interface InternalDatum {\n    key: string;\n    value: number | { x: number; y: number };\n    position: number;\n    serie: string;\n  }\n\n  export interface InternalSerie {\n    key: string;\n    data: InternalDatum[];\n    name: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string | undefined;\n    color?: string;\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export type InternalData = InternalSerie[];\n\n  export interface OptionalProps {\n    y2Axis?: AxisT;\n    groups?: string[][];\n    types?: 'scatter';\n    scrapper: ScrapperT;\n  }\n\n  export interface DefaultProps {}\n\n  export interface RequiredProps {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    yAxis: AxisT;\n    xAxis: AxisT;\n  }\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n\n  export type StackedSeriesByGroupT = Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  height: PropTypes.number.isRequired.description('height').defaultValue(''),\n  width: PropTypes.number.isRequired.description('height').defaultValue(''),\n  margin: PropTypes.shape({\n    top: PropTypes.number,\n    bottom: PropTypes.number,\n    left: PropTypes.number,\n    right: PropTypes.number,\n  })\n    .isRequired.description('margin')\n    .defaultValue(''),\n  series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAqD;AAyG9C,MAAM,eAAsC,CAAC;AAE7C,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,8BAAU,MAAM;AAAA,IACtB,KAAK,8BAAU;AAAA,IACf,QAAQ,8BAAU;AAAA,IAClB,MAAM,8BAAU;AAAA,IAChB,OAAO,8BAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,8BAAU,QAAQ,8BAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
+  "sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\nimport { Series, ScaleLinear, ScaleBand } from 'd3';\nexport declare namespace DSChartT {\n  export type SerieTypeT = 'line' | 'bar' | 'area' | 'point';\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export type LinearScale = ScaleLinear<number, number, never>;\n  export type BandScale = ScaleBand<string>;\n\n  export type Scales = LinearScale | BandScale;\n  export interface SeriesT {\n    name: string;\n    data: Array<number | null | { x: number; y: number }>;\n    type: SerieTypeT;\n    scale?: string;\n    color?: string;\n    // line\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export interface ScrapperT {\n    type: 'horizontal' | 'vertical';\n    color: string;\n    tooltipPreference: string;\n  }\n\n  export interface SerieComponentT {\n    serie: InternalSerie;\n  }\n\n  export interface AxisTickT {\n    tickValues: number[] | Date[];\n    tickFormat: () => void | string;\n    tickCount: number;\n    tickRotation: number;\n    overwriteTicks: boolean;\n    color: string;\n  }\n\n  export interface AxisT {\n    showGrid: boolean;\n    color: string;\n    label: string;\n    type: AxisTypeT;\n    cols?: string[];\n    domainPadding: number;\n    hideAxis: boolean;\n    beginAtZero?: boolean;\n    advanced: {\n      pointSpacing: {\n        type: 'string';\n        value: number;\n      };\n    };\n    tick: AxisTickT;\n  }\n\n  export interface InternalDatum {\n    key: string;\n    value: number | { x: number; y: number };\n    position: number;\n    serie: string;\n  }\n\n  export interface InternalSerie {\n    key: string;\n    data: InternalDatum[];\n    name: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string | undefined;\n    color?: string;\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export type InternalData = InternalSerie[];\n\n  export interface OptionalProps {\n    y2Axis?: AxisT;\n    groups?: string[][];\n    types?: 'scatter';\n    scrapper: ScrapperT;\n    withTrendHighlight: boolean;\n    TooltipRenderer: () => JSX.Element;\n  }\n\n  export interface DefaultProps {}\n\n  export interface RequiredProps {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    yAxis: AxisT;\n    xAxis: AxisT;\n  }\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n\n  export type StackedSeriesByGroupT = Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  height: PropTypes.number.isRequired.description('height').defaultValue(''),\n  width: PropTypes.number.isRequired.description('height').defaultValue(''),\n  margin: PropTypes.shape({\n    top: PropTypes.number,\n    bottom: PropTypes.number,\n    left: PropTypes.number,\n    right: PropTypes.number,\n  })\n    .isRequired.description('margin')\n    .defaultValue(''),\n  series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAqD;AA2G9C,MAAM,eAAsC,CAAC;AAE7C,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,8BAAU,MAAM;AAAA,IACtB,KAAK,8BAAU;AAAA,IACf,QAAQ,8BAAU;AAAA,IAClB,MAAM,8BAAU;AAAA,IAChB,OAAO,8BAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,8BAAU,QAAQ,8BAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/Bars.js

@@ -69,7 +69,8 @@ const Bars = ({ serie }) => {
           height,
           id: bar.key,
           y: transformY,
-          isNegative: y < 0
+          isNegative: y < 0,
+          datum: bar
         })
       }, bar.key);
     })

package/dist/cjs/graphs/Chart/series/Bars.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Bars.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { ScaleBand } from 'd3';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\n\nexport const Bars = ({ serie }) => {\n  const {\n    props: { yAxis, TooltipRenderer },\n    innerHeight,\n    xScale,\n    yScale,\n    y2Scale,\n    subGroupScale,\n    colorScale,\n    getXValue,\n    getYValue,\n    chartId,\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const negativeSize = innerHeight - finalYScale(0);\n  const positiveSize = innerHeight - negativeSize;\n\n  return (\n    <g fill={colorScale(serie.name)} clipPath={`url(#rect-focus-ring-${chartId})`}>\n      {serie.data.map((bar, i) => {\n        const x = getXValue(bar);\n        const y = getYValue(bar);\n\n        const width = subGroupScale?.bandwidth();\n        const height = y > 0 ? positiveSize - finalYScale(y) : finalYScale(y) - finalYScale(0);\n\n        const transformX = subGroupScale(serie.name) + xScale(x);\n\n        // @todo find a way to create bars with linear\n        //       scale here is something but conflict with bars like {x: 'Monday', y: 10}\n        // const transformX = isHorizontal\n        //   ? 0\n        //   : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0);\n\n        const transformY = y > 0 ? finalYScale(0) - height : finalYScale(0);\n\n        return (\n          <g id={`${serie.name}-rects`} key={bar.key} transform={`translate(${transformX},0)`}>\n            <Rect\n              name={serie.name}\n              xValue={x}\n              yValue={y}\n              width={width}\n              height={height}\n              id={bar.key}\n              y={transformY}\n              isNegative={y < 0}\n            />\n            {/* {TooltipRenderer && (\n              <FocusableRegion\n                transform={`scale(1,-1) translate(0,${-height})`}\n                y={-transformY}\n                id={bar.key}\n                width={width}\n                height={height}\n                content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n              />\n            )} */}\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAGtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,gBAAgB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,cAAc,YAAY,CAAC;AAChD,QAAM,eAAe,cAAc;AAEnC,SACE,4CAAC;AAAA,IAAE,MAAM,WAAW,MAAM,IAAI;AAAA,IAAG,UAAU,wBAAwB;AAAA,IAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,IAAI,UAAU,GAAG;AACvB,YAAM,IAAI,UAAU,GAAG;AAEvB,YAAM,QAAQ,eAAe,UAAU;AACvC,YAAM,SAAS,IAAI,IAAI,eAAe,YAAY,CAAC,IAAI,YAAY,CAAC,IAAI,YAAY,CAAC;AAErF,YAAM,aAAa,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC;AAQvD,YAAM,aAAa,IAAI,IAAI,YAAY,CAAC,IAAI,SAAS,YAAY,CAAC;AAElE,aACE,4CAAC;AAAA,QAAE,IAAI,GAAG,MAAM;AAAA,QAA4B,WAAW,aAAa;AAAA,QAClE,sDAAC;AAAA,UACC,MAAM,MAAM;AAAA,UACZ,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR;AAAA,UACA;AAAA,UACA,IAAI,IAAI;AAAA,UACR,GAAG;AAAA,UACH,YAAY,IAAI;AAAA,SAClB;AAAA,SAViC,IAAI,GAqBvC;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { ScaleBand } from 'd3';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\n\nexport const Bars = ({ serie }) => {\n  const {\n    props: { yAxis, TooltipRenderer },\n    innerHeight,\n    xScale,\n    yScale,\n    y2Scale,\n    subGroupScale,\n    colorScale,\n    getXValue,\n    getYValue,\n    chartId,\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const negativeSize = innerHeight - finalYScale(0);\n  const positiveSize = innerHeight - negativeSize;\n\n  return (\n    <g fill={colorScale(serie.name)} clipPath={`url(#rect-focus-ring-${chartId})`}>\n      {serie.data.map((bar, i) => {\n        const x = getXValue(bar);\n        const y = getYValue(bar);\n\n        const width = subGroupScale?.bandwidth();\n        const height = y > 0 ? positiveSize - finalYScale(y) : finalYScale(y) - finalYScale(0);\n\n        const transformX = subGroupScale(serie.name) + xScale(x);\n\n        // @todo find a way to create bars with linear\n        //       scale here is something but conflict with bars like {x: 'Monday', y: 10}\n        // const transformX = isHorizontal\n        //   ? 0\n        //   : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0);\n\n        const transformY = y > 0 ? finalYScale(0) - height : finalYScale(0);\n\n        return (\n          <g id={`${serie.name}-rects`} key={bar.key} transform={`translate(${transformX},0)`}>\n            <Rect\n              name={serie.name}\n              xValue={x}\n              yValue={y}\n              width={width}\n              height={height}\n              id={bar.key}\n              y={transformY}\n              isNegative={y < 0}\n              datum={bar}\n            />\n            {/* {TooltipRenderer && (\n              <FocusableRegion\n                transform={`scale(1,-1) translate(0,${-height})`}\n                y={-transformY}\n                id={bar.key}\n                width={width}\n                height={height}\n                content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n              />\n            )} */}\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAGtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,gBAAgB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,cAAc,YAAY,CAAC;AAChD,QAAM,eAAe,cAAc;AAEnC,SACE,4CAAC;AAAA,IAAE,MAAM,WAAW,MAAM,IAAI;AAAA,IAAG,UAAU,wBAAwB;AAAA,IAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,IAAI,UAAU,GAAG;AACvB,YAAM,IAAI,UAAU,GAAG;AAEvB,YAAM,QAAQ,eAAe,UAAU;AACvC,YAAM,SAAS,IAAI,IAAI,eAAe,YAAY,CAAC,IAAI,YAAY,CAAC,IAAI,YAAY,CAAC;AAErF,YAAM,aAAa,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC;AAQvD,YAAM,aAAa,IAAI,IAAI,YAAY,CAAC,IAAI,SAAS,YAAY,CAAC;AAElE,aACE,4CAAC;AAAA,QAAE,IAAI,GAAG,MAAM;AAAA,QAA4B,WAAW,aAAa;AAAA,QAClE,sDAAC;AAAA,UACC,MAAM,MAAM;AAAA,UACZ,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR;AAAA,UACA;AAAA,UACA,IAAI,IAAI;AAAA,UACR,GAAG;AAAA,UACH,YAAY,IAAI;AAAA,UAChB,OAAO;AAAA,SACT;AAAA,SAXiC,IAAI,GAsBvC;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/HorizontalBars.js

@@ -33,8 +33,10 @@ var import_react = require("react");
 var import_Rect = require("./Rect");
 var import_ChartContext = require("../ChartContext");
 const HorizontalBars = ({ serie }) => {
-  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const { xScale, yScale, innerWidth, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
+  const negativeSize = innerWidth - xScale(0);
+  const positiveSize = innerWidth - negativeSize;
   return (0, import_react.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
       fill: colorScale(serie.name),
@@ -42,12 +44,14 @@ const HorizontalBars = ({ serie }) => {
       children: serie.data.map((bar, i) => {
         const x = getXValue(bar);
         const y = getYValue(bar);
-        const width = xScale(x);
+        const width = x < 0 ? positiveSize - xScale(x) : xScale(x) - xScale(0);
         const height = subGroupScale?.bandwidth();
+        const transformX = x < 0 ? xScale(0) - width : xScale(0);
         const transformY = subGroupScale(serie.name) + finalYScale(y);
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
-          transform: `translate(0,${transformY})`,
+          transform: `translate(${transformX},${transformY})`,
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Rect.Rect, {
+            datum: bar,
             name: serie.name,
             width,
             height,
@@ -59,7 +63,18 @@ const HorizontalBars = ({ serie }) => {
         }, bar.key);
       })
     }),
-    [chartId, colorScale, finalYScale, getXValue, getYValue, serie.data, serie.name, subGroupScale, xScale]
+    [
+      chartId,
+      colorScale,
+      finalYScale,
+      getXValue,
+      getYValue,
+      positiveSize,
+      serie.data,
+      serie.name,
+      subGroupScale,
+      xScale
+    ]
   );
 };
 //# sourceMappingURL=HorizontalBars.js.map

package/dist/cjs/graphs/Chart/series/HorizontalBars.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/HorizontalBars.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } =\n    useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  return useMemo(\n    () => (\n      <g fill={colorScale(serie.name)} clipPath={`url(#rect-focus-ring-${chartId})`}>\n        {serie.data.map((bar, i) => {\n          const x = getXValue(bar);\n          const y = getYValue(bar);\n\n          const width = xScale(x);\n          const height = subGroupScale?.bandwidth();\n\n          const transformY = subGroupScale(serie.name) + finalYScale(y);\n\n          return (\n            <g key={bar.key} transform={`translate(0,${transformY})`}>\n              <Rect name={serie.name} width={width} height={height} id={bar.key} x={0} xValue={x} yValue={y} />\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [chartId, colorScale, finalYScale, getXValue, getYValue, serie.data, serie.name, subGroupScale, xScale],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA2C;AAC3C,kBAAqB;AACrB,0BAA6B;AAGtB,MAAM,iBAAiB,CAAC,EAAE,MAAM,MAAgC;AACrE,QAAM,EAAE,QAAQ,QAAQ,SAAS,eAAe,YAAY,WAAW,WAAW,QAAQ,QACxF,yBAAW,gCAAY;AACzB,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,MAAM,WAAW,MAAM,IAAI;AAAA,MAAG,UAAU,wBAAwB;AAAA,MAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,cAAM,IAAI,UAAU,GAAG;AACvB,cAAM,IAAI,UAAU,GAAG;AAEvB,cAAM,QAAQ,OAAO,CAAC;AACtB,cAAM,SAAS,eAAe,UAAU;AAExC,cAAM,aAAa,cAAc,MAAM,IAAI,IAAI,YAAY,CAAC;AAE5D,eACE,4CAAC;AAAA,UAAgB,WAAW,eAAe;AAAA,UACzC,sDAAC;AAAA,YAAK,MAAM,MAAM;AAAA,YAAM;AAAA,YAAc;AAAA,YAAgB,IAAI,IAAI;AAAA,YAAK,GAAG;AAAA,YAAG,QAAQ;AAAA,YAAG,QAAQ;AAAA,WAAG;AAAA,WADzF,IAAI,GAEZ;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IAEF,CAAC,SAAS,YAAY,aAAa,WAAW,WAAW,MAAM,MAAM,MAAM,MAAM,eAAe,MAAM;AAAA,EACxG;AACF;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const { xScale, yScale, innerWidth, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } =\n    useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const negativeSize = innerWidth - xScale(0);\n  const positiveSize = innerWidth - negativeSize;\n\n  return useMemo(\n    () => (\n      <g fill={colorScale(serie.name)} clipPath={`url(#rect-focus-ring-${chartId})`}>\n        {serie.data.map((bar, i) => {\n          const x = getXValue(bar);\n          const y = getYValue(bar);\n\n          const width = x < 0 ? positiveSize - xScale(x) : xScale(x) - xScale(0);\n          const height = subGroupScale?.bandwidth();\n          const transformX = x < 0 ? xScale(0) - width : xScale(0);\n          const transformY = subGroupScale(serie.name) + finalYScale(y);\n\n          return (\n            <g key={bar.key} transform={`translate(${transformX},${transformY})`}>\n              <Rect\n                datum={bar}\n                name={serie.name}\n                width={width}\n                height={height}\n                id={bar.key}\n                x={0}\n                xValue={x}\n                yValue={y}\n              />\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [\n      chartId,\n      colorScale,\n      finalYScale,\n      getXValue,\n      getYValue,\n      positiveSize,\n      serie.data,\n      serie.name,\n      subGroupScale,\n      xScale,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA2C;AAC3C,kBAAqB;AACrB,0BAA6B;AAGtB,MAAM,iBAAiB,CAAC,EAAE,MAAM,MAAgC;AACrE,QAAM,EAAE,QAAQ,QAAQ,YAAY,SAAS,eAAe,YAAY,WAAW,WAAW,QAAQ,QACpG,yBAAW,gCAAY;AACzB,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,aAAa,OAAO,CAAC;AAC1C,QAAM,eAAe,aAAa;AAElC,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,MAAM,WAAW,MAAM,IAAI;AAAA,MAAG,UAAU,wBAAwB;AAAA,MAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,cAAM,IAAI,UAAU,GAAG;AACvB,cAAM,IAAI,UAAU,GAAG;AAEvB,cAAM,QAAQ,IAAI,IAAI,eAAe,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,OAAO,CAAC;AACrE,cAAM,SAAS,eAAe,UAAU;AACxC,cAAM,aAAa,IAAI,IAAI,OAAO,CAAC,IAAI,QAAQ,OAAO,CAAC;AACvD,cAAM,aAAa,cAAc,MAAM,IAAI,IAAI,YAAY,CAAC;AAE5D,eACE,4CAAC;AAAA,UAAgB,WAAW,aAAa,cAAc;AAAA,UACrD,sDAAC;AAAA,YACC,OAAO;AAAA,YACP,MAAM,MAAM;AAAA,YACZ;AAAA,YACA;AAAA,YACA,IAAI,IAAI;AAAA,YACR,GAAG;AAAA,YACH,QAAQ;AAAA,YACR,QAAQ;AAAA,WACV;AAAA,WAVM,IAAI,GAWZ;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/HorizontalStackedBars.js

@@ -51,9 +51,9 @@ const HorizontalStackedBars = ({ serie }) => {
       const isFloorStack = sequence[0] === 0;
       const xValue = sequence[1] - sequence[0];
       const yValue = getYValue(serie.data[i]);
-      const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 1 : 0);
+      const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 2 : 0);
       const height = subGroupScale?.bandwidth();
-      const transformX = xScale(sequence[0]) + (!isFloorStack ? 1 : 0);
+      const transformX = xScale(sequence[0]) + (!isFloorStack ? 2 : 0);
       const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yValue);
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
         clipPath: `url(#rect-focus-ring-${chartId})`,
@@ -67,7 +67,8 @@ const HorizontalStackedBars = ({ serie }) => {
             xValue,
             yValue,
             id: serie.data[i].key,
-            name: serie.name
+            name: serie.name,
+            datum: serie.data[i]
           })
         })
       }, serie.data[i].key);

package/dist/cjs/graphs/Chart/series/HorizontalStackedBars.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/HorizontalStackedBars.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\nimport { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalStackedBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getYValue,\n  } = useContext(ChartContext);\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g>\n      {serieWithStackedValues.map((sequence, i) => {\n        const isFloorStack = sequence[0] === 0;\n        const xValue = sequence[1] - sequence[0];\n        const yValue = getYValue(serie.data[i]);\n\n        const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 1 : 0);\n\n        const height = subGroupScale?.bandwidth();\n\n        const transformX = xScale(sequence[0]) + (!isFloorStack ? 1 : 0);\n        const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yValue);\n\n        return (\n          <g key={serie.data[i].key} clipPath={`url(#rect-focus-ring-${chartId})`}>\n            <g fill={colorScale(serie.name)} transform={`translate(0, ${transformY})`}>\n              <Rect\n                width={width}\n                height={height}\n                x={transformX}\n                xValue={xValue}\n                yValue={yValue}\n                id={serie.data[i].key}\n                name={serie.name}\n              />\n            </g>\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAGzC,MAAM,wBAAwB,CAAC,EAAE,MAAM,MAAgC;AAC5E,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,QAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAM,iBAAa,gCAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,4CAAC;AAAA,IACE,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,YAAM,eAAe,SAAS,OAAO;AACrC,YAAM,SAAS,SAAS,KAAK,SAAS;AACtC,YAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AAEtC,YAAM,QAAQ,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAE/E,YAAM,SAAS,eAAe,UAAU;AAExC,YAAM,aAAa,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAC9D,YAAM,aAAa,cAAc,gBAAgB,YAAY,IAAI,OAAO,MAAM;AAE9E,aACE,4CAAC;AAAA,QAA0B,UAAU,wBAAwB;AAAA,QAC3D,sDAAC;AAAA,UAAE,MAAM,WAAW,MAAM,IAAI;AAAA,UAAG,WAAW,gBAAgB;AAAA,UAC1D,sDAAC;AAAA,YACC;AAAA,YACA;AAAA,YACA,GAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA,IAAI,MAAM,KAAK,GAAG;AAAA,YAClB,MAAM,MAAM;AAAA,WACd;AAAA,SACF;AAAA,SAXM,MAAM,KAAK,GAAG,GAYtB;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\nimport { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalStackedBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getYValue,\n  } = useContext(ChartContext);\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g>\n      {serieWithStackedValues.map((sequence, i) => {\n        const isFloorStack = sequence[0] === 0;\n        const xValue = sequence[1] - sequence[0];\n        const yValue = getYValue(serie.data[i]);\n\n        const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 2 : 0);\n\n        const height = subGroupScale?.bandwidth();\n\n        const transformX = xScale(sequence[0]) + (!isFloorStack ? 2 : 0);\n        const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yValue);\n\n        return (\n          <g key={serie.data[i].key} clipPath={`url(#rect-focus-ring-${chartId})`}>\n            <g fill={colorScale(serie.name)} transform={`translate(0, ${transformY})`}>\n              <Rect\n                width={width}\n                height={height}\n                x={transformX}\n                xValue={xValue}\n                yValue={yValue}\n                id={serie.data[i].key}\n                name={serie.name}\n                datum={serie.data[i]}\n              />\n            </g>\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAGzC,MAAM,wBAAwB,CAAC,EAAE,MAAM,MAAgC;AAC5E,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,QAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAM,iBAAa,gCAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,4CAAC;AAAA,IACE,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,YAAM,eAAe,SAAS,OAAO;AACrC,YAAM,SAAS,SAAS,KAAK,SAAS;AACtC,YAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AAEtC,YAAM,QAAQ,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAE/E,YAAM,SAAS,eAAe,UAAU;AAExC,YAAM,aAAa,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAC9D,YAAM,aAAa,cAAc,gBAAgB,YAAY,IAAI,OAAO,MAAM;AAE9E,aACE,4CAAC;AAAA,QAA0B,UAAU,wBAAwB;AAAA,QAC3D,sDAAC;AAAA,UAAE,MAAM,WAAW,MAAM,IAAI;AAAA,UAAG,WAAW,gBAAgB;AAAA,UAC1D,sDAAC;AAAA,YACC;AAAA,YACA;AAAA,YACA,GAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA,IAAI,MAAM,KAAK,GAAG;AAAA,YAClB,MAAM,MAAM;AAAA,YACZ,OAAO,MAAM,KAAK;AAAA,WACpB;AAAA,SACF;AAAA,SAZM,MAAM,KAAK,GAAG,GAatB;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/Line.js

@@ -34,6 +34,7 @@ var import_d3 = require("d3");
 var import_Points = require("./Points");
 var import_ChartContext = require("../ChartContext");
 var import_constants = require("../../constants");
+var import_DataTestIds = require("../DataTestIds");
 const Line = ({ serie }) => {
   const { xScale, yScale, y2Scale, colorScale, getXValue, getYValue } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const ref = (0, import_react.useRef)(null);
@@ -60,7 +61,8 @@ const Line = ({ serie }) => {
     transform: `translate(${xTranslate}, 0)`,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
-        ref
+        ref,
+        "data-testid": import_DataTestIds.DataVizDataTestIds.LINE
       }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Points.Points, {
         serie

package/dist/cjs/graphs/Chart/series/Line.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Line.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useEffect, useMemo, useRef } from 'react';\nimport { line, select } from 'd3';\nimport { Points } from './Points';\nimport { ChartContext } from '../ChartContext';\nimport { LINE, curveStyleMap } from '../../constants';\n\nexport const Line = ({ serie }) => {\n  const { xScale, yScale, y2Scale, colorScale, getXValue, getYValue } = useContext(ChartContext);\n\n  const ref = useRef<React.SVGProps<SVGGElement> | SVGGElement>(null);\n  // const firstRender = useRef(true);\n\n  const finalYScale = useMemo(() => (serie.scale === 'y2' ? y2Scale : yScale), [serie.scale, y2Scale, yScale]);\n\n  const curveStyle = useMemo(\n    () => curveStyleMap[serie.curveStyle] ?? curveStyleMap[LINE.CURVE_STYLE.LINEAR],\n    [serie.curveStyle],\n  );\n\n  const lineD3 = useMemo(\n    () =>\n      line()\n        .x((d) => xScale(getXValue(d)))\n        .y((d) => finalYScale(getYValue(d)))\n        .curve(curveStyle),\n    [curveStyle, finalYScale, getXValue, getYValue, xScale],\n  );\n\n  useEffect(() => {\n    if (!ref.current) return;\n\n    const groupContent = select(ref?.current);\n\n    groupContent.selectAll('*').remove();\n    const path = groupContent\n      .append('path')\n      .datum(serie.data)\n      .attr('fill', 'none')\n      .attr('stroke', colorScale(serie.name))\n      .attr('stroke-linejoin', 'round')\n      // .attr('stroke-linecap', 'round')\n      .attr('stroke-width', 2)\n      .attr('d', lineD3);\n\n    if (serie.dashStyle) path.attr('stroke-dasharray', LINE.DASH_STYLE_VALUES[serie.dashStyle]);\n\n    // const pathLength = path.node()?.getTotalLength();\n\n    // if (firstRender?.current) {\n    //   const transitionPath = transition().ease(easeLinear).duration(800);\n\n    //   path\n    //     .attr('stroke-dashoffset', pathLength)\n    //     .attr('stroke-dasharray', pathLength)\n    //     .transition(transitionPath)\n    //     .attr('stroke-dashoffset', 0);\n\n    //   firstRender.current = false;\n    // }\n  }, [colorScale, finalYScale, getXValue, getYValue, lineD3, serie, xScale]);\n\n  // we need to center the points and lines when\n  // using them in a band axis context\n  const xTranslate = useMemo(() => (xScale?.bandwidth?.() ?? 0) / 2, [xScale]);\n\n  return (\n    <g transform={`translate(${xTranslate}, 0)`}>\n      <g ref={ref}></g>\n\n      <Points serie={serie} />\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA8D;AAC9D,gBAA6B;AAC7B,oBAAuB;AACvB,0BAA6B;AAC7B,uBAAoC;AAE7B,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM,EAAE,QAAQ,QAAQ,SAAS,YAAY,WAAW,UAAU,QAAI,yBAAW,gCAAY;AAE7F,QAAM,UAAM,qBAAkD,IAAI;AAGlE,QAAM,kBAAc,sBAAQ,MAAO,MAAM,UAAU,OAAO,UAAU,QAAS,CAAC,MAAM,OAAO,SAAS,MAAM,CAAC;AAE3G,QAAM,iBAAa;AAAA,IACjB,MAAM,+BAAc,MAAM,eAAe,+BAAc,sBAAK,YAAY;AAAA,IACxE,CAAC,MAAM,UAAU;AAAA,EACnB;AAEA,QAAM,aAAS;AAAA,IACb,UACE,gBAAK,EACF,EAAE,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC,CAAC,EAC7B,EAAE,CAAC,MAAM,YAAY,UAAU,CAAC,CAAC,CAAC,EAClC,MAAM,UAAU;AAAA,IACrB,CAAC,YAAY,aAAa,WAAW,WAAW,MAAM;AAAA,EACxD;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,IAAI;AAAS;AAElB,UAAM,mBAAe,kBAAO,KAAK,OAAO;AAExC,iBAAa,UAAU,GAAG,EAAE,OAAO;AACnC,UAAM,OAAO,aACV,OAAO,MAAM,EACb,MAAM,MAAM,IAAI,EAChB,KAAK,QAAQ,MAAM,EACnB,KAAK,UAAU,WAAW,MAAM,IAAI,CAAC,EACrC,KAAK,mBAAmB,OAAO,EAE/B,KAAK,gBAAgB,CAAC,EACtB,KAAK,KAAK,MAAM;AAEnB,QAAI,MAAM;AAAW,WAAK,KAAK,oBAAoB,sBAAK,kBAAkB,MAAM,UAAU;AAAA,EAe5F,GAAG,CAAC,YAAY,aAAa,WAAW,WAAW,QAAQ,OAAO,MAAM,CAAC;AAIzE,QAAM,iBAAa,sBAAQ,OAAO,QAAQ,YAAY,KAAK,KAAK,GAAG,CAAC,MAAM,CAAC;AAE3E,SACE,6CAAC;AAAA,IAAE,WAAW,aAAa;AAAA,IACzB;AAAA,kDAAC;AAAA,QAAE;AAAA,OAAU;AAAA,MAEb,4CAAC;AAAA,QAAO;AAAA,OAAc;AAAA;AAAA,GACxB;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useEffect, useMemo, useRef } from 'react';\nimport { line, select } from 'd3';\nimport { Points } from './Points';\nimport { ChartContext } from '../ChartContext';\nimport { LINE, curveStyleMap } from '../../constants';\nimport { DataVizDataTestIds } from '../DataTestIds';\nexport const Line = ({ serie }) => {\n  const { xScale, yScale, y2Scale, colorScale, getXValue, getYValue } = useContext(ChartContext);\n\n  const ref = useRef<SVGGElement>(null);\n  // const firstRender = useRef(true);\n\n  const finalYScale = useMemo(() => (serie.scale === 'y2' ? y2Scale : yScale), [serie.scale, y2Scale, yScale]);\n\n  const curveStyle = useMemo(\n    () => curveStyleMap[serie.curveStyle] ?? curveStyleMap[LINE.CURVE_STYLE.LINEAR],\n    [serie.curveStyle],\n  );\n\n  const lineD3 = useMemo(\n    () =>\n      line()\n        .x((d) => xScale(getXValue(d)))\n        .y((d) => finalYScale(getYValue(d)))\n        .curve(curveStyle),\n    [curveStyle, finalYScale, getXValue, getYValue, xScale],\n  );\n\n  useEffect(() => {\n    if (!ref.current) return;\n\n    const groupContent = select(ref?.current);\n\n    groupContent.selectAll('*').remove();\n    const path = groupContent\n      .append('path')\n      .datum(serie.data)\n      .attr('fill', 'none')\n      .attr('stroke', colorScale(serie.name))\n      .attr('stroke-linejoin', 'round')\n      // .attr('stroke-linecap', 'round')\n      .attr('stroke-width', 2)\n      .attr('d', lineD3);\n\n    if (serie.dashStyle) path.attr('stroke-dasharray', LINE.DASH_STYLE_VALUES[serie.dashStyle]);\n\n    // const pathLength = path.node()?.getTotalLength();\n\n    // if (firstRender?.current) {\n    //   const transitionPath = transition().ease(easeLinear).duration(800);\n\n    //   path\n    //     .attr('stroke-dashoffset', pathLength)\n    //     .attr('stroke-dasharray', pathLength)\n    //     .transition(transitionPath)\n    //     .attr('stroke-dashoffset', 0);\n\n    //   firstRender.current = false;\n    // }\n  }, [colorScale, finalYScale, getXValue, getYValue, lineD3, serie, xScale]);\n\n  // we need to center the points and lines when\n  // using them in a band axis context\n  const xTranslate = useMemo(() => (xScale?.bandwidth?.() ?? 0) / 2, [xScale]);\n\n  return (\n    <g transform={`translate(${xTranslate}, 0)`}>\n      <g ref={ref} data-testid={DataVizDataTestIds.LINE} />\n\n      <Points serie={serie} />\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA8D;AAC9D,gBAA6B;AAC7B,oBAAuB;AACvB,0BAA6B;AAC7B,uBAAoC;AACpC,yBAAmC;AAC5B,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM,EAAE,QAAQ,QAAQ,SAAS,YAAY,WAAW,UAAU,QAAI,yBAAW,gCAAY;AAE7F,QAAM,UAAM,qBAAoB,IAAI;AAGpC,QAAM,kBAAc,sBAAQ,MAAO,MAAM,UAAU,OAAO,UAAU,QAAS,CAAC,MAAM,OAAO,SAAS,MAAM,CAAC;AAE3G,QAAM,iBAAa;AAAA,IACjB,MAAM,+BAAc,MAAM,eAAe,+BAAc,sBAAK,YAAY;AAAA,IACxE,CAAC,MAAM,UAAU;AAAA,EACnB;AAEA,QAAM,aAAS;AAAA,IACb,UACE,gBAAK,EACF,EAAE,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC,CAAC,EAC7B,EAAE,CAAC,MAAM,YAAY,UAAU,CAAC,CAAC,CAAC,EAClC,MAAM,UAAU;AAAA,IACrB,CAAC,YAAY,aAAa,WAAW,WAAW,MAAM;AAAA,EACxD;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,IAAI;AAAS;AAElB,UAAM,mBAAe,kBAAO,KAAK,OAAO;AAExC,iBAAa,UAAU,GAAG,EAAE,OAAO;AACnC,UAAM,OAAO,aACV,OAAO,MAAM,EACb,MAAM,MAAM,IAAI,EAChB,KAAK,QAAQ,MAAM,EACnB,KAAK,UAAU,WAAW,MAAM,IAAI,CAAC,EACrC,KAAK,mBAAmB,OAAO,EAE/B,KAAK,gBAAgB,CAAC,EACtB,KAAK,KAAK,MAAM;AAEnB,QAAI,MAAM;AAAW,WAAK,KAAK,oBAAoB,sBAAK,kBAAkB,MAAM,UAAU;AAAA,EAe5F,GAAG,CAAC,YAAY,aAAa,WAAW,WAAW,QAAQ,OAAO,MAAM,CAAC;AAIzE,QAAM,iBAAa,sBAAQ,OAAO,QAAQ,YAAY,KAAK,KAAK,GAAG,CAAC,MAAM,CAAC;AAE3E,SACE,6CAAC;AAAA,IAAE,WAAW,aAAa;AAAA,IACzB;AAAA,kDAAC;AAAA,QAAE;AAAA,QAAU,eAAa,sCAAmB;AAAA,OAAM;AAAA,MAEnD,4CAAC;AAAA,QAAO;AAAA,OAAc;AAAA;AAAA,GACxB;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/Point.js

@@ -33,12 +33,15 @@ var import_react = require("react");
 var import_ChartContext = require("../ChartContext");
 var import_constants = require("../../constants");
 var import_FocusableRegion = require("../parts/FocusableRegion");
-const Point = ({ x, y, xValue, yValue, name, pointStyle, pointRadius, id, opacity }) => {
+var import_TrendHighlight = require("../parts/TrendHighlight");
+var import_DataTestIds = require("../DataTestIds");
+const Point = ({ x, y, xValue, yValue, name, pointStyle, pointRadius, id, opacity, datum }) => {
   const {
     activePoint,
     scrapperPosY,
     scrapperPosX,
-    props: { scrapper, TooltipRenderer }
+    setActivePoint,
+    props: { scrapper, TooltipRenderer, withTrendHighlight }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const isFocused = (0, import_react.useMemo)(() => {
     if (activePoint?.key === id) {
@@ -118,19 +121,38 @@ const Point = ({ x, y, xValue, yValue, name, pointStyle, pointRadius, id, opacit
       ]
     });
   }, [id, isFocused, opacity, pointRadius, pointStyle]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+  const handleMouseEnter = (0, import_react.useCallback)(() => {
+    if (!scrapper)
+      setActivePoint(datum);
+  }, [datum, scrapper, setActivePoint]);
+  const handleOnMouseLeave = (0, import_react.useCallback)(() => {
+    if (!scrapper)
+      setActivePoint(null);
+  }, [scrapper, setActivePoint]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [
-      point,
-      activePoint?.key === id && TooltipRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FocusableRegion.FocusableRegion, {
-        id,
-        width: (pointRadius ?? 3) * 2,
-        height: (pointRadius ?? 3) * 2,
-        pointRadius,
-        style: { transform: `translate(-${pointRadius}px, -${pointRadius}px)` },
-        content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, {
-          data: [{ name, yValue, xValue }]
-        })
-      }) : ""
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+        "data-testid": import_DataTestIds.DataVizDataTestIds.POINT,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleOnMouseLeave,
+        transform: `translate(${x},${y})`,
+        children: [
+          point,
+          activePoint?.key === id && TooltipRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FocusableRegion.FocusableRegion, {
+            id,
+            width: (pointRadius ?? 3) * 4,
+            height: (pointRadius ?? 3) * 4,
+            pointRadius,
+            style: { transform: `translate(-${pointRadius}px, -${pointRadius}px)` },
+            content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, {
+              data: [{ name, yValue, xValue }]
+            })
+          }) : null
+        ]
+      }),
+      isFocused && withTrendHighlight ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TrendHighlight.TrendHighlight, {
+        currentDatum: datum
+      }) : null
     ]
   });
 };