@elliemae/ds-dataviz 3.14.3 → 3.14.6

package/dist/esm/graphs/Chart/parts/Axis/AxisRight.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Axis/AxisRight.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisRight } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport { getFormatGenerator } from '../../helpers';\n\nexport const AxisRight = () => {\n  const {\n    props: { y2Axis },\n    innerHeight,\n    innerWidth,\n    y2Scale,\n    chartId,\n    height,\n    setAxisRightRef,\n  } = useContext(ChartContext);\n\n  const ref = useRef<SVGSVGElement>(null);\n  const gridRef = useRef<SVGSVGElement>(null);\n  const { tickValues, color: tickColor, tickFormat, overwriteTicks, tickRotation, tickCount } = y2Axis.tick || {};\n\n  const ticks = y2Scale.ticks?.(tickCount ?? height / 80);\n\n  const { type, showGrid, color: axisColor } = y2Axis;\n\n  useEffect(() => {\n    const axis = axisRight(y2Scale).tickSizeOuter(0);\n\n    const grid = axisRight(y2Scale)\n      .tickFormat((_) => '')\n      .tickSize(showGrid ? -innerWidth : 0)\n      .tickSizeOuter(0);\n\n    if (tickValues && ticks) {\n      const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];\n      axis.tickValues(finalTicks);\n    } else {\n      axis.tickValues(ticks);\n      grid.tickValues(ticks);\n    }\n\n    if (tickFormat) {\n      if (typeof tickFormat === 'string') {\n        const formatGenerator = getFormatGenerator(type ?? 'linear');\n\n        axis.tickFormat((d) => formatGenerator(tickFormat)(d));\n      }\n      if (typeof tickFormat === 'function') {\n        axis.tickFormat(tickFormat);\n      }\n    }\n    if (ref?.current && gridRef?.current) {\n      select(gridRef.current).call(grid);\n      const axisNode = select(ref.current);\n      axisNode.call(axis);\n    }\n  }, [\n    innerHeight,\n    innerWidth,\n    overwriteTicks,\n    showGrid,\n    tickFormat,\n    tickRotation,\n    tickValues,\n    ticks,\n    type,\n    y2Axis,\n    y2Scale,\n  ]);\n\n  if (y2Axis.hideAxis) return null;\n\n  return (\n    <g transform={`translate(${innerWidth},0)`}>\n      <g mask={`url(#mask-${chartId})`}>\n        <StyledGrid ref={gridRef}></StyledGrid>\n      </g>\n      <g ref={setAxisRightRef}>\n        <StyledAxis axisColor={axisColor} ref={ref} tickColor={tickColor} className=\"axis-right\"></StyledAxis>\n      </g>\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2EnB,SAEI,KAFJ;AAzEJ,SAAgB,YAAY,WAAW,cAAc;AACrD,SAAS,QAAQ,iBAAiB;AAClC,SAAS,YAAY,kBAAkB;AACvC,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AAE5B,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,MAAM,OAAsB,IAAI;AACtC,QAAM,UAAU,OAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,OAAO,WAAW,YAAY,gBAAgB,cAAc,UAAU,IAAI,OAAO,QAAQ,CAAC;AAE9G,QAAM,QAAQ,QAAQ,QAAQ,aAAa,SAAS,EAAE;AAEtD,QAAM,EAAE,MAAM,UAAU,OAAO,UAAU,IAAI;AAE7C,YAAU,MAAM;AACd,UAAM,OAAO,UAAU,OAAO,EAAE,cAAc,CAAC;AAE/C,UAAM,OAAO,UAAU,OAAO,EAC3B,WAAW,CAAC,MAAM,EAAE,EACpB,SAAS,WAAW,CAAC,aAAa,CAAC,EACnC,cAAc,CAAC;AAElB,QAAI,cAAc,OAAO;AACvB,YAAM,aAAa,iBAAiB,aAAa,CAAC,GAAG,OAAO,GAAG,UAAU;AACzE,WAAK,WAAW,UAAU;AAAA,IAC5B,OAAO;AACL,WAAK,WAAW,KAAK;AACrB,WAAK,WAAW,KAAK;AAAA,IACvB;AAEA,QAAI,YAAY;AACd,UAAI,OAAO,eAAe,UAAU;AAClC,cAAM,kBAAkB,mBAAmB,QAAQ,QAAQ;AAE3D,aAAK,WAAW,CAAC,MAAM,gBAAgB,UAAU,EAAE,CAAC,CAAC;AAAA,MACvD;AACA,UAAI,OAAO,eAAe,YAAY;AACpC,aAAK,WAAW,UAAU;AAAA,MAC5B;AAAA,IACF;AACA,QAAI,KAAK,WAAW,SAAS,SAAS;AACpC,aAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,YAAM,WAAW,OAAO,IAAI,OAAO;AACnC,eAAS,KAAK,IAAI;AAAA,IACpB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,OAAO;AAAU,WAAO;AAE5B,SACE,qBAAC,OAAE,WAAW,aAAa,iBACzB;AAAA,wBAAC,OAAE,MAAM,aAAa,YACpB,8BAAC,cAAW,KAAK,SAAS,GAC5B;AAAA,IACA,oBAAC,OAAE,KAAK,iBACN,8BAAC,cAAW,WAAsB,KAAU,WAAsB,WAAU,cAAa,GAC3F;AAAA,KACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { type CSSProperties, useCallback, useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport type { DSChartT } from '../../react-desc-prop-types';\nimport { Axis, type TickRenderPropsT, type GridRenderPropsT } from './Axis';\nimport { Tick } from './Tick';\nimport { GridLine } from './GridLine';\nimport { COLOR_PALLET } from '../../helpers/colorPallet';\n\nexport const AxisRight = React.memo(() => {\n  const {\n    props: { y2Axis },\n    innerHeight,\n    y2Scale,\n    innerWidth,\n    setAxisRightRef,\n  } = useContext(ChartContext);\n\n  const { tickRotation } = y2Axis?.tick || ({} as DSChartT.AxisTickT);\n  const { showGrid } = y2Axis;\n  const textProps = useMemo(() => {\n    const commomProps = { fill: COLOR_PALLET[y2Axis?.tick?.color as keyof typeof COLOR_PALLET] || y2Axis?.tick?.color };\n\n    if (!tickRotation) return { ...commomProps, x: 10, dy: '0.32em' };\n    return {\n      ...commomProps,\n      dx: 8 * Math.sin(Math.PI * (tickRotation / 180)),\n      dy: '.71em',\n      y: 11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1),\n      transform: `rotate(${tickRotation})`,\n    };\n  }, [tickRotation, y2Axis?.tick?.color]);\n\n  const style: CSSProperties = useMemo(() => {\n    if (!tickRotation)\n      return {\n        textAnchor: 'start',\n      };\n    return { textAnchor: tickRotation > 0 ? 'start' : 'end' };\n  }, [tickRotation]);\n\n  const GridRenderer = useCallback(\n    (props: GridRenderPropsT) => {\n      if (!showGrid) return null;\n      const { position, ...rest } = props;\n      const gridLineCoords = {\n        x1: 0,\n        x2: innerWidth,\n        y1: position,\n        y2: position,\n      };\n      return <GridLine {...gridLineCoords} {...rest} />;\n    },\n    [innerWidth, showGrid],\n  );\n\n  const TickRenderer = useCallback(\n    (props: TickRenderPropsT) => {\n      const { position, tickValue, ...rest } = props;\n      const tickLineCoords = {\n        x2: 5,\n        stroke: COLOR_PALLET[y2Axis?.tick?.color as keyof typeof COLOR_PALLET] || y2Axis?.tick?.color,\n      };\n      return (\n        <Tick\n          {...tickLineCoords}\n          yTranslate={position}\n          xTranslate={innerWidth}\n          textProps={textProps}\n          textStyle={style}\n          tickValue={y2Scale.getTickFormatted(tickValue)}\n          {...rest}\n        />\n      );\n    },\n    [innerWidth, style, textProps, y2Axis?.tick?.color, y2Scale],\n  );\n\n  const axisColor = useMemo(\n    () => COLOR_PALLET[y2Axis.color as keyof typeof COLOR_PALLET] || y2Axis.color,\n    [y2Axis.color],\n  );\n\n  return useMemo(() => {\n    if (y2Axis?.hideAxis) return null;\n    const lineCoords = {\n      x1: innerWidth,\n      x2: innerWidth,\n      y1: 0,\n      y2: innerHeight,\n    };\n\n    return (\n      <Axis\n        lineCoords={lineCoords}\n        scale={y2Scale}\n        innerRef={setAxisRightRef}\n        dimension={innerHeight}\n        GridRenderer={GridRenderer}\n        TickRenderer={TickRenderer}\n        color={axisColor}\n      />\n    );\n  }, [GridRenderer, TickRenderer, axisColor, innerHeight, innerWidth, setAxisRightRef, y2Axis?.hideAxis, y2Scale]);\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoDV;AAlDb,OAAOA,UAA6B,aAAa,YAAY,eAAe;AAC5E,SAAS,oBAAoB;AAE7B,SAAS,YAA0D;AACnE,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAEtB,MAAM,YAAYA,OAAM,KAAK,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,EAAE,aAAa,IAAI,QAAQ,QAAS,CAAC;AAC3C,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,cAAc,EAAE,MAAM,aAAa,QAAQ,MAAM,UAAuC,QAAQ,MAAM,MAAM;AAElH,QAAI,CAAC;AAAc,aAAO,EAAE,GAAG,aAAa,GAAG,IAAI,IAAI,SAAS;AAChE,WAAO;AAAA,MACL,GAAG;AAAA,MACH,IAAI,IAAI,KAAK,IAAI,KAAK,MAAM,eAAe,IAAI;AAAA,MAC/C,IAAI;AAAA,MACJ,GAAG,OAAO,OAAO,eAAe,OAAO,eAAe,IAAI,IAAI;AAAA,MAC9D,WAAW,UAAU;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,cAAc,QAAQ,MAAM,KAAK,CAAC;AAEtC,QAAM,QAAuB,QAAQ,MAAM;AACzC,QAAI,CAAC;AACH,aAAO;AAAA,QACL,YAAY;AAAA,MACd;AACF,WAAO,EAAE,YAAY,eAAe,IAAI,UAAU,MAAM;AAAA,EAC1D,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,eAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,UAAI,CAAC;AAAU,eAAO;AACtB,YAAM,EAAE,aAAa,KAAK,IAAI;AAC9B,YAAM,iBAAiB;AAAA,QACrB,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AACA,aAAO,oBAAC,YAAU,GAAG,gBAAiB,GAAG,MAAM;AAAA,IACjD;AAAA,IACA,CAAC,YAAY,QAAQ;AAAA,EACvB;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,YAAM,EAAE,UAAU,cAAc,KAAK,IAAI;AACzC,YAAM,iBAAiB;AAAA,QACrB,IAAI;AAAA,QACJ,QAAQ,aAAa,QAAQ,MAAM,UAAuC,QAAQ,MAAM;AAAA,MAC1F;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ;AAAA,UACA,WAAW;AAAA,UACX,WAAW,QAAQ,iBAAiB,SAAS;AAAA,UAC5C,GAAG;AAAA;AAAA,MACN;AAAA,IAEJ;AAAA,IACA,CAAC,YAAY,OAAO,WAAW,QAAQ,MAAM,OAAO,OAAO;AAAA,EAC7D;AAEA,QAAM,YAAY;AAAA,IAChB,MAAM,aAAa,OAAO,UAAuC,OAAO;AAAA,IACxE,CAAC,OAAO,KAAK;AAAA,EACf;AAEA,SAAO,QAAQ,MAAM;AACnB,QAAI,QAAQ;AAAU,aAAO;AAC7B,UAAM,aAAa;AAAA,MACjB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,OAAO;AAAA;AAAA,IACT;AAAA,EAEJ,GAAG,CAAC,cAAc,cAAc,WAAW,aAAa,YAAY,iBAAiB,QAAQ,UAAU,OAAO,CAAC;AACjH,CAAC;",
+  "names": ["React"]
 }

package/dist/esm/graphs/Chart/parts/Axis/GridLine.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import React2 from "react";
+const GridLine = React2.memo(({ x1 = 0, y1 = 0, x2 = 0, y2 = 0 }) => /* @__PURE__ */ jsx("line", { x1, x2, y1, y2, stroke: "black", style: { opacity: 0.2 } }));
+export {
+  GridLine
+};
+//# sourceMappingURL=GridLine.js.map

package/dist/esm/graphs/Chart/parts/Axis/GridLine.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Axis/GridLine.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\n\ninterface GridLineT {\n  x1?: number;\n  y1?: number;\n  x2?: number;\n  y2?: number;\n}\nexport const GridLine: React.ComponentType<GridLineT> = React.memo(({ x1 = 0, y1 = 0, x2 = 0, y2 = 0 }) => (\n  <line x1={x1} x2={x2} y1={y1} y2={y2} stroke=\"black\" style={{ opacity: 0.2 }} />\n));\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACSrB;AATF,OAAOA,YAAW;AAQX,MAAM,WAA2CA,OAAM,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,EAAE,MACnG,oBAAC,UAAK,IAAQ,IAAQ,IAAQ,IAAQ,QAAO,SAAQ,OAAO,EAAE,SAAS,IAAI,GAAG,CAC/E;",
+  "names": ["React"]
+}

package/dist/esm/graphs/Chart/parts/Axis/Tick.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+const Tick = React2.memo(
+  ({ tickValue, stroke, textProps, xTranslate = 0, yTranslate = 0, textStyle, ...rest }) => /* @__PURE__ */ jsxs("g", { transform: `translate(${xTranslate},${yTranslate})`, children: [
+    /* @__PURE__ */ jsx("line", { ...rest, stroke: stroke || "black" }),
+    /* @__PURE__ */ jsx("text", { fill: "black", ...textProps, style: textStyle, children: tickValue.toString() })
+  ] })
+);
+export {
+  Tick
+};
+//# sourceMappingURL=Tick.js.map

package/dist/esm/graphs/Chart/parts/Axis/Tick.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Axis/Tick.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { type SVGAttributes, type CSSProperties } from 'react';\n\nexport interface TickT {\n  xTranslate?: number;\n  yTranslate?: number;\n  x1?: number;\n  y1?: number;\n  x2?: number;\n  y2?: number;\n  size?: number;\n  stroke?: string;\n  tickValue: string | number | Date;\n  textProps: Partial<SVGAttributes<SVGTextElement>>;\n  textStyle: CSSProperties;\n}\nexport const Tick: React.ComponentType<TickT> = React.memo(\n  ({ tickValue, stroke, textProps, xTranslate = 0, yTranslate = 0, textStyle, ...rest }) => (\n    <g transform={`translate(${xTranslate},${yTranslate})`}>\n      <line {...rest} stroke={stroke || 'black'} />\n      <text fill=\"black\" {...textProps} style={textStyle}>\n        {tickValue.toString()}\n      </text>\n    </g>\n  ),\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiBnB,SACE,KADF;AAjBJ,OAAOA,YAAuD;AAevD,MAAM,OAAmCA,OAAM;AAAA,EACpD,CAAC,EAAE,WAAW,QAAQ,WAAW,aAAa,GAAG,aAAa,GAAG,cAAc,KAAK,MAClF,qBAAC,OAAE,WAAW,aAAa,cAAc,eACvC;AAAA,wBAAC,UAAM,GAAG,MAAM,QAAQ,UAAU,SAAS;AAAA,IAC3C,oBAAC,UAAK,MAAK,SAAS,GAAG,WAAW,OAAO,WACtC,oBAAU,SAAS,GACtB;AAAA,KACF;AAEJ;",
+  "names": ["React"]
+}

package/dist/esm/graphs/Chart/parts/ChartContainer.js

@@ -5,7 +5,7 @@ import { StyledSVGWrapper } from "../styles";
 import { ChartContext } from "../ChartContext";
 import { useKeyboardNavigation } from "../config/useKeyboardNavigation";
 import { Legend } from "./Legend/Legend";
-import { Label } from "./Labels/Label";
+import { Labels } from "./Labels";
 import { BlurMask } from "./Scroller/BlurMask";
 import { ClipPaths } from "./ClipPaths";
 import { ScrollableContainerX } from "./Scroller/ScrollableContainerX";
@@ -163,7 +163,7 @@ const ChartContainer = () => {
           /* @__PURE__ */ jsxs("g", { children: [
             /* @__PURE__ */ jsx(Controllers, {}),
             /* @__PURE__ */ jsx(Legend, {}),
-            /* @__PURE__ */ jsx(Label, {})
+            /* @__PURE__ */ jsx(Labels, {})
           ] }),
           /* @__PURE__ */ jsx("g", { className: "container", transform: `translate(${internalMargin.left},${internalMargin.top})`, children: render })
         ] })

package/dist/esm/graphs/Chart/parts/ChartContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/ChartContainer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback, useEffect } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Label } from './Labels/Label';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './Axis/AxisBottom';\nimport { AxisRight } from './Axis/AxisRight';\nimport { AxisLeft } from './Axis/AxisLeft';\nimport { SeriesFactory } from './SeriesFactory';\nimport { Scrapper } from './Scrapper/Scrapper';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper';\nimport { Controllers } from './Scroller/Controllers';\nexport const ChartContainer = () => {\n  const {\n    props: { y2Axis, yScroll, xScroll, scrapper, xAxis, width: userWidth },\n    activePoint,\n    internalMargin,\n    setScrapperPosY,\n    setScrapperPosX,\n    setContainerRef,\n    svgRef,\n    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    innerHeight,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    lastPosition,\n    setIsScrollbarVisible,\n    currentData,\n    setStartPosition,\n    width,\n    height,\n  } = useContext(ChartContext);\n\n  // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  // const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n  const { onInputKeyDown, handleOnKeyUp, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  const onMouseEnterHandler = useCallback(() => {\n    setIsScrollbarVisible(true);\n    setActivePoint(null);\n  }, [setActivePoint, setIsScrollbarVisible]);\n  const onMouseLeaveHandler = useCallback(() => {\n    setScrapperPosY('');\n    setScrapperPosX('');\n    setIsScrollbarVisible(false);\n    setIsGrabbed(false);\n  }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n  const handleOnTouchStart: React.TouchEventHandler = useCallback(\n    (e) => {\n      e.stopPropagation();\n      setScrapperPosX('');\n      setIsGrabbed(true);\n      setStartPosition(e.touches[0].clientX);\n      e.preventDefault();\n    },\n    [setIsGrabbed, setScrapperPosX, setStartPosition],\n  );\n  const handleOnTouchEnd = useCallback(() => {\n    lastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [setIsGrabbed, xScrollbarPosition, lastPosition]);\n  const handleMouseMove: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isGrabbed) return;\n      e.preventDefault();\n      const clientX = e.clientX ?? e.touches[0].clientX;\n      const clientY = e.clientY ?? e.touches[0].clientY;\n\n      setActivePoint(null);\n      if (xScroll) {\n        const newPosition = lastPosition?.current + clientX - startPosition;\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerWidth - innerWidth / containerRatio)\n          setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n      if (yScroll) {\n        const newPosition = lastPosition?.current + clientY - startPosition;\n\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerHeight - innerHeight / containerRatio)\n          setXScrollbarPosition(innerHeight - innerHeight / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n    },\n    [\n      isGrabbed,\n      setActivePoint,\n      xScroll,\n      yScroll,\n      lastPosition,\n      startPosition,\n      setXScrollbarPosition,\n      innerWidth,\n      containerRatio,\n      innerHeight,\n    ],\n  );\n  const handleMouseUp = useCallback(() => {\n    lastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [lastPosition, setIsGrabbed, xScrollbarPosition]);\n\n  // const key = useMemo(\n  //   () => `${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom}`,\n  //   [internalMargin, width],\n  // );\n\n  const render = useMemo(() => {\n    if (currentData.length === 0) return null;\n    if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisLeft />\n          <ScrollableContainerX />\n        </>\n      );\n    }\n    if (yScroll) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisBottom />\n          <ScrollableContainerY />\n        </>\n      );\n    }\n    return (\n      <>\n        {y2Axis ? <AxisRight /> : null}\n        <AxisLeft />\n        <AxisBottom />\n        <SeriesFactory />\n        {scrapper?.type === 'horizontal' ? <Scrapper /> : null}\n        {scrapper?.type === 'vertical' ? <VerticalScrapper /> : null}\n      </>\n    );\n  }, [currentData.length, scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, y2Axis, yScroll]);\n  return (\n    <StyledSVGWrapper\n      ref={setContainerRef}\n      onKeyDown={onInputKeyDown}\n      onKeyUp={handleOnKeyUp}\n      tabIndex={activePoint ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      onTouchMove={handleMouseMove}\n      onTouchStart={handleOnTouchStart}\n      onTouchEnd={handleOnTouchEnd}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      onMouseMove={handleMouseMove}\n      onMouseUp={handleMouseUp}\n      onMouseDown={(e) => e.preventDefault()}\n      isGrabbed={isGrabbed}\n      style={{ width: userWidth, height }}\n    >\n      {width !== 0 ? (\n        <svg ref={svgRef} width={width} height={height}>\n          {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n          <ClipPaths />\n          <BlurMask />\n          <g>\n            <g>\n              <Controllers />\n              <Legend />\n              <Label />\n            </g>\n            <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n              {render}\n              {/* <ActivePoint/> @todo */}\n            </g>\n          </g>\n        </svg>\n      ) : null}\n    </StyledSVGWrapper>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Labels } from './Labels';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './Axis/AxisBottom';\nimport { AxisRight } from './Axis/AxisRight';\nimport { AxisLeft } from './Axis/AxisLeft';\nimport { SeriesFactory } from './SeriesFactory';\nimport { Scrapper } from './Scrapper/Scrapper';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper';\nimport { Controllers } from './Scroller/Controllers';\nexport const ChartContainer = () => {\n  const {\n    props: { y2Axis, yScroll, xScroll, scrapper, xAxis, width: userWidth },\n    activePoint,\n    internalMargin,\n    setScrapperPosY,\n    setScrapperPosX,\n    setContainerRef,\n    svgRef,\n    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    innerHeight,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    lastPosition,\n    setIsScrollbarVisible,\n    currentData,\n    setStartPosition,\n    width,\n    height,\n  } = useContext(ChartContext);\n\n  // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  // const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n  const { onInputKeyDown, handleOnKeyUp, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  const onMouseEnterHandler = useCallback(() => {\n    setIsScrollbarVisible(true);\n    setActivePoint(null);\n  }, [setActivePoint, setIsScrollbarVisible]);\n  const onMouseLeaveHandler = useCallback(() => {\n    setScrapperPosY('');\n    setScrapperPosX('');\n    setIsScrollbarVisible(false);\n    setIsGrabbed(false);\n  }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n  const handleOnTouchStart: React.TouchEventHandler = useCallback(\n    (e) => {\n      e.stopPropagation();\n      setScrapperPosX('');\n      setIsGrabbed(true);\n      setStartPosition(e.touches[0].clientX);\n      e.preventDefault();\n    },\n    [setIsGrabbed, setScrapperPosX, setStartPosition],\n  );\n  const handleOnTouchEnd = useCallback(() => {\n    lastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [setIsGrabbed, xScrollbarPosition, lastPosition]);\n  const handleMouseMove: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isGrabbed) return;\n      e.preventDefault();\n      const clientX = e.clientX ?? e.touches[0].clientX;\n      const clientY = e.clientY ?? e.touches[0].clientY;\n\n      setActivePoint(null);\n      if (xScroll) {\n        const newPosition = lastPosition?.current + clientX - startPosition;\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerWidth - innerWidth / containerRatio)\n          setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n      if (yScroll) {\n        const newPosition = lastPosition?.current + clientY - startPosition;\n\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerHeight - innerHeight / containerRatio)\n          setXScrollbarPosition(innerHeight - innerHeight / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n    },\n    [\n      isGrabbed,\n      setActivePoint,\n      xScroll,\n      yScroll,\n      lastPosition,\n      startPosition,\n      setXScrollbarPosition,\n      innerWidth,\n      containerRatio,\n      innerHeight,\n    ],\n  );\n  const handleMouseUp = useCallback(() => {\n    lastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [lastPosition, setIsGrabbed, xScrollbarPosition]);\n\n  const render = useMemo(() => {\n    if (currentData.length === 0) return null;\n    if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisLeft />\n          <ScrollableContainerX />\n        </>\n      );\n    }\n    if (yScroll) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisBottom />\n          <ScrollableContainerY />\n        </>\n      );\n    }\n    return (\n      <>\n        {y2Axis ? <AxisRight /> : null}\n        <AxisLeft />\n        <AxisBottom />\n        <SeriesFactory />\n        {scrapper?.type === 'horizontal' ? <Scrapper /> : null}\n        {scrapper?.type === 'vertical' ? <VerticalScrapper /> : null}\n      </>\n    );\n  }, [currentData.length, scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, y2Axis, yScroll]);\n  return (\n    <StyledSVGWrapper\n      ref={setContainerRef}\n      onKeyDown={onInputKeyDown}\n      onKeyUp={handleOnKeyUp}\n      tabIndex={activePoint ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      onTouchMove={handleMouseMove}\n      onTouchStart={handleOnTouchStart}\n      onTouchEnd={handleOnTouchEnd}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      onMouseMove={handleMouseMove}\n      onMouseUp={handleMouseUp}\n      onMouseDown={(e) => e.preventDefault()}\n      isGrabbed={isGrabbed}\n      style={{ width: userWidth, height }}\n    >\n      {width !== 0 ? (\n        <svg ref={svgRef} width={width} height={height}>\n          {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n          <ClipPaths />\n          <BlurMask />\n          <g>\n            <g>\n              <Controllers />\n              <Legend />\n              <Labels />\n            </g>\n            <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n              {render}\n              {/* <ActivePoint/> @todo */}\n            </g>\n          </g>\n        </svg>\n      ) : null}\n    </StyledSVGWrapper>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/graphs/Chart/parts/Labels/Label.js

@@ -1,23 +1,8 @@
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
-import { ChartContext } from "../../ChartContext";
-import { RightLabel } from "./RightLabel";
-import { LeftLabel } from "./LeftLabel";
-import { BottomLabel } from "./BottomLabel";
-const Label = () => {
-  const {
-    props: { xAxis, yAxis, y2Axis }
-  } = useContext(ChartContext);
-  return useMemo(
-    () => /* @__PURE__ */ jsxs("g", { children: [
-      y2Axis?.label ? /* @__PURE__ */ jsx(RightLabel, {}) : "",
-      yAxis?.label ? /* @__PURE__ */ jsx(LeftLabel, {}) : "",
-      xAxis?.label ? /* @__PURE__ */ jsx(BottomLabel, {}) : ""
-    ] }),
-    [xAxis?.label, y2Axis?.label, yAxis?.label]
-  );
-};
+import { jsx } from "react/jsx-runtime";
+import React2 from "react";
+import { StyledAxisLabel } from "../../styles";
+const Label = React2.memo(({ innerRef, x, y, label, rotateDegrees = 0 }) => /* @__PURE__ */ jsx("g", { ref: innerRef, children: /* @__PURE__ */ jsx("g", { transform: `translate(${x},${y}) rotate(${rotateDegrees})`, children: /* @__PURE__ */ jsx(StyledAxisLabel, { className: "axis-label", textAnchor: "middle", children: label }) }) }));
 export {
   Label
 };

package/dist/esm/graphs/Chart/parts/Labels/Label.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Labels/Label.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\n\nimport { ChartContext } from '../../ChartContext';\nimport { RightLabel } from './RightLabel';\nimport { LeftLabel } from './LeftLabel';\nimport { BottomLabel } from './BottomLabel';\n\nexport const Label = () => {\n  const {\n    props: { xAxis, yAxis, y2Axis },\n  } = useContext(ChartContext);\n\n  return useMemo(\n    () => (\n      <g>\n        {y2Axis?.label ? <RightLabel /> : ''}\n        {yAxis?.label ? <LeftLabel /> : ''}\n        {xAxis?.label ? <BottomLabel /> : ''}\n      </g>\n    ),\n    [xAxis?.label, y2Axis?.label, yAxis?.label],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACcjB,SACmB,KADnB;AAdN,SAAgB,YAAY,eAAe;AAE3C,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAErB,MAAM,QAAQ,MAAM;AACzB,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO,OAAO;AAAA,EAChC,IAAI,WAAW,YAAY;AAE3B,SAAO;AAAA,IACL,MACE,qBAAC,OACE;AAAA,cAAQ,QAAQ,oBAAC,cAAW,IAAK;AAAA,MACjC,OAAO,QAAQ,oBAAC,aAAU,IAAK;AAAA,MAC/B,OAAO,QAAQ,oBAAC,eAAY,IAAK;AAAA,OACpC;AAAA,IAEF,CAAC,OAAO,OAAO,QAAQ,OAAO,OAAO,KAAK;AAAA,EAC5C;AACF;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { SetStateAction, Dispatch } from 'react';\nimport { StyledAxisLabel } from '../../styles';\n\nexport interface LabelT {\n  x: number;\n  y: number;\n  rotateDegrees?: number;\n  label: string;\n  innerRef: Dispatch<SetStateAction<SVGGElement | null>>;\n}\n\nexport const Label: React.ComponentType<LabelT> = React.memo(({ innerRef, x, y, label, rotateDegrees = 0 }) => (\n  <g ref={innerRef}>\n    <g transform={`translate(${x},${y}) rotate(${rotateDegrees})`}>\n      <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\">\n        {label}\n      </StyledAxisLabel>\n    </g>\n  </g>\n));\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACejB;AAfN,OAAOA,YAAW;AAElB,SAAS,uBAAuB;AAUzB,MAAM,QAAqCA,OAAM,KAAK,CAAC,EAAE,UAAU,GAAG,GAAG,OAAO,gBAAgB,EAAE,MACvG,oBAAC,OAAE,KAAK,UACN,8BAAC,OAAE,WAAW,aAAa,KAAK,aAAa,kBAC3C,8BAAC,mBAAgB,WAAU,cAAa,YAAW,UAChD,iBACH,GACF,GACF,CACD;",
+  "names": ["React"]
 }

package/dist/esm/graphs/Chart/parts/Labels/index.js

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { ChartContext } from "../../ChartContext";
+import { Label } from "./Label";
+const Labels = () => {
+  const {
+    setBottomLabel,
+    setLeftLabel,
+    setRightLabel,
+    internalMargin,
+    innerHeight,
+    innerWidth,
+    leftLegendWidth,
+    leftLabelWidth,
+    axisBottomHeight,
+    axisRightWidth,
+    props: { xAxis, y2Axis, yAxis }
+  } = useContext(ChartContext);
+  const { label: xLabel } = xAxis || {};
+  const { label: yLabel } = yAxis || {};
+  const { label: y2Label } = y2Axis || {};
+  return useMemo(
+    () => /* @__PURE__ */ jsxs("g", { className: "labels", children: [
+      y2Label ? /* @__PURE__ */ jsx(
+        Label,
+        {
+          innerRef: setRightLabel,
+          x: innerWidth + internalMargin.left + axisRightWidth,
+          y: innerHeight / 2 + internalMargin.top,
+          label: y2Label,
+          rotateDegrees: 90
+        }
+      ) : null,
+      yLabel ? /* @__PURE__ */ jsx(
+        Label,
+        {
+          innerRef: setLeftLabel,
+          x: leftLegendWidth + leftLabelWidth,
+          y: innerHeight / 2 + internalMargin.top,
+          label: yLabel,
+          rotateDegrees: -90
+        }
+      ) : null,
+      xLabel ? /* @__PURE__ */ jsx(
+        Label,
+        {
+          innerRef: setBottomLabel,
+          x: innerWidth / 2 + internalMargin.left,
+          y: innerHeight + axisBottomHeight + internalMargin.top,
+          label: xLabel
+        }
+      ) : null
+    ] }),
+    [
+      axisBottomHeight,
+      axisRightWidth,
+      innerHeight,
+      innerWidth,
+      internalMargin.left,
+      internalMargin.top,
+      leftLabelWidth,
+      leftLegendWidth,
+      setBottomLabel,
+      setLeftLabel,
+      setRightLabel,
+      xLabel,
+      y2Label,
+      yLabel
+    ]
+  );
+};
+export {
+  Labels
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/graphs/Chart/parts/Labels/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Labels/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { Label } from './Label';\n\nexport const Labels = () => {\n  const {\n    setBottomLabel,\n    setLeftLabel,\n    setRightLabel,\n    internalMargin,\n    innerHeight,\n    innerWidth,\n    leftLegendWidth,\n    leftLabelWidth,\n    axisBottomHeight,\n    axisRightWidth,\n    props: { xAxis, y2Axis, yAxis },\n  } = useContext(ChartContext);\n\n  const { label: xLabel } = xAxis || {};\n  const { label: yLabel } = yAxis || {};\n  const { label: y2Label } = y2Axis || {};\n\n  return useMemo(\n    () => (\n      <g className=\"labels\">\n        {y2Label ? (\n          <Label\n            innerRef={setRightLabel}\n            x={innerWidth + internalMargin.left + axisRightWidth}\n            y={innerHeight / 2 + internalMargin.top}\n            label={y2Label}\n            rotateDegrees={90}\n          />\n        ) : null}\n        {yLabel ? (\n          <Label\n            innerRef={setLeftLabel}\n            x={leftLegendWidth + leftLabelWidth}\n            y={innerHeight / 2 + internalMargin.top}\n            label={yLabel}\n            rotateDegrees={-90}\n          />\n        ) : null}\n        {xLabel ? (\n          <Label\n            innerRef={setBottomLabel}\n            x={innerWidth / 2 + internalMargin.left}\n            y={innerHeight + axisBottomHeight + internalMargin.top}\n            label={xLabel}\n          />\n        ) : null}\n      </g>\n    ),\n    [\n      axisBottomHeight,\n      axisRightWidth,\n      innerHeight,\n      innerWidth,\n      internalMargin.left,\n      internalMargin.top,\n      leftLabelWidth,\n      leftLegendWidth,\n      setBottomLabel,\n      setLeftLabel,\n      setRightLabel,\n      xLabel,\n      y2Label,\n      yLabel,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyBjB,SAEI,KAFJ;AAzBN,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AAEf,MAAM,SAAS,MAAM;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,QAAQ,MAAM;AAAA,EAChC,IAAI,WAAW,YAAY;AAE3B,QAAM,EAAE,OAAO,OAAO,IAAI,SAAS,CAAC;AACpC,QAAM,EAAE,OAAO,OAAO,IAAI,SAAS,CAAC;AACpC,QAAM,EAAE,OAAO,QAAQ,IAAI,UAAU,CAAC;AAEtC,SAAO;AAAA,IACL,MACE,qBAAC,OAAE,WAAU,UACV;AAAA,gBACC;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV,GAAG,aAAa,eAAe,OAAO;AAAA,UACtC,GAAG,cAAc,IAAI,eAAe;AAAA,UACpC,OAAO;AAAA,UACP,eAAe;AAAA;AAAA,MACjB,IACE;AAAA,MACH,SACC;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV,GAAG,kBAAkB;AAAA,UACrB,GAAG,cAAc,IAAI,eAAe;AAAA,UACpC,OAAO;AAAA,UACP,eAAe;AAAA;AAAA,MACjB,IACE;AAAA,MACH,SACC;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV,GAAG,aAAa,IAAI,eAAe;AAAA,UACnC,GAAG,cAAc,mBAAmB,eAAe;AAAA,UACnD,OAAO;AAAA;AAAA,MACT,IACE;AAAA,OACN;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/graphs/Chart/parts/Scrapper/Scrapper.js

@@ -17,16 +17,16 @@ const Scrapper = () => {
   const getPosition = useCallback(
     (datum, scale) => {
       if (isHorizontal) {
-        return xScale(getXValue(datum));
+        return xScale.get(getXValue(datum));
       }
       if (scale === "y" || !scale) {
-        return yScale(getYValue(datum));
+        return yScale.get(getYValue(datum));
       }
-      return y2Scale(getYValue(datum));
+      return y2Scale.get(getYValue(datum));
     },
     [getXValue, getYValue, isHorizontal, xScale, y2Scale, yScale]
   );
-  const isBandAxis = !!yScale.bandwidth;
+  const isBandAxis = yScale.type === "BAND";
   const uniqueData = useMemo(() => {
     let valueToPositionPerSeries;
     if (isBandAxis) {
@@ -35,7 +35,7 @@ const Scrapper = () => {
           const x = getXValue(datum);
           const y = getYValue(datum);
           return {
-            position: yScale(y),
+            position: yScale.get(y),
             name: serie.name,
             xValue: x,
             yValue: y

package/dist/esm/graphs/Chart/parts/Scrapper/Scrapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scrapper/Scrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { ScrapperLine } from './ScrapperLine';\nexport const Scrapper = () => {\n  const {\n    yScale,\n    y2Scale,\n    xScale,\n    getXValue,\n    getYValue,\n    isHorizontal,\n    getBandwidth,\n    currentData: data,\n  } = useContext(ChartContext);\n\n  const getPosition = useCallback(\n    (datum, scale) => {\n      if (isHorizontal) {\n        return xScale(getXValue(datum));\n      }\n      if (scale === 'y' || !scale) {\n        return yScale(getYValue(datum));\n      }\n      return y2Scale(getYValue(datum));\n    },\n    [getXValue, getYValue, isHorizontal, xScale, y2Scale, yScale],\n  );\n  const isBandAxis = !!yScale.bandwidth;\n\n  const uniqueData = useMemo(() => {\n    let valueToPositionPerSeries;\n\n    if (isBandAxis) {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data.map((datum) => {\n            const x = getXValue(datum);\n            const y = getYValue(datum);\n            return {\n              position: yScale(y),\n              name: serie.name,\n              xValue: x,\n              yValue: y,\n            };\n          }),\n        )\n        .flat(1);\n    } else {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data.map((datum, i) => ({\n            position: getPosition(datum, serie.scale),\n            name: serie.name,\n            xValue: getXValue(datum),\n            yValue: getYValue(datum),\n          })),\n        )\n        .flat(1);\n    }\n    const positionUniqueData = {};\n\n    valueToPositionPerSeries.forEach((set) => {\n      if (positionUniqueData[[set.position]]) {\n        positionUniqueData[[set.position]] = [...positionUniqueData[[set.position]], { ...set }];\n      } else {\n        positionUniqueData[[set.position]] = [{ ...set }];\n      }\n    });\n\n    return positionUniqueData;\n  }, [data, getXValue, getYValue, y2Scale, yScale]);\n\n  return (\n    <g>\n      {Object.keys(uniqueData).map((key) => {\n        const yPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);\n        const datum = uniqueData[key];\n        return <ScrapperLine key={key} yPosition={yPosition} datum={datum} />;\n      })}\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC6ER;AA7Ef,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AACtB,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,EACf,IAAI,WAAW,YAAY;AAE3B,QAAM,cAAc;AAAA,IAClB,CAAC,OAAO,UAAU;AAChB,UAAI,cAAc;AAChB,eAAO,OAAO,UAAU,KAAK,CAAC;AAAA,MAChC;AACA,UAAI,UAAU,OAAO,CAAC,OAAO;AAC3B,eAAO,OAAO,UAAU,KAAK,CAAC;AAAA,MAChC;AACA,aAAO,QAAQ,UAAU,KAAK,CAAC;AAAA,IACjC;AAAA,IACA,CAAC,WAAW,WAAW,cAAc,QAAQ,SAAS,MAAM;AAAA,EAC9D;AACA,QAAM,aAAa,CAAC,CAAC,OAAO;AAE5B,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI;AAEJ,QAAI,YAAY;AACd,iCAA2B,KACxB;AAAA,QAAI,CAAC,UACJ,MAAM,KAAK,IAAI,CAAC,UAAU;AACxB,gBAAM,IAAI,UAAU,KAAK;AACzB,gBAAM,IAAI,UAAU,KAAK;AACzB,iBAAO;AAAA,YACL,UAAU,OAAO,CAAC;AAAA,YAClB,MAAM,MAAM;AAAA,YACZ,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,QACF,CAAC;AAAA,MACH,EACC,KAAK,CAAC;AAAA,IACX,OAAO;AACL,iCAA2B,KACxB;AAAA,QAAI,CAAC,UACJ,MAAM,KAAK,IAAI,CAAC,OAAO,OAAO;AAAA,UAC5B,UAAU,YAAY,OAAO,MAAM,KAAK;AAAA,UACxC,MAAM,MAAM;AAAA,UACZ,QAAQ,UAAU,KAAK;AAAA,UACvB,QAAQ,UAAU,KAAK;AAAA,QACzB,EAAE;AAAA,MACJ,EACC,KAAK,CAAC;AAAA,IACX;AACA,UAAM,qBAAqB,CAAC;AAE5B,6BAAyB,QAAQ,CAAC,QAAQ;AACxC,UAAI,mBAAmB,CAAC,IAAI,QAAQ,IAAI;AACtC,2BAAmB,CAAC,IAAI,QAAQ,KAAK,CAAC,GAAG,mBAAmB,CAAC,IAAI,QAAQ,IAAI,EAAE,GAAG,IAAI,CAAC;AAAA,MACzF,OAAO;AACL,2BAAmB,CAAC,IAAI,QAAQ,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC;AAAA,MAClD;AAAA,IACF,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,WAAW,WAAW,SAAS,MAAM,CAAC;AAEhD,SACE,oBAAC,OACE,iBAAO,KAAK,UAAU,EAAE,IAAI,CAAC,QAAQ;AACpC,UAAM,YAAY,WAAW,GAAG,KAAK,aAAa,aAAa,IAAI,IAAI;AACvE,UAAM,QAAQ,WAAW;AACzB,WAAO,oBAAC,gBAAuB,WAAsB,SAA3B,GAAyC;AAAA,EACrE,CAAC,GACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { ScrapperLine } from './ScrapperLine';\nexport const Scrapper = () => {\n  const {\n    yScale,\n    y2Scale,\n    xScale,\n    getXValue,\n    getYValue,\n    isHorizontal,\n    getBandwidth,\n    currentData: data,\n  } = useContext(ChartContext);\n\n  const getPosition = useCallback(\n    (datum, scale) => {\n      if (isHorizontal) {\n        return xScale.get(getXValue(datum));\n      }\n      if (scale === 'y' || !scale) {\n        return yScale.get(getYValue(datum));\n      }\n      return y2Scale.get(getYValue(datum));\n    },\n    [getXValue, getYValue, isHorizontal, xScale, y2Scale, yScale],\n  );\n  const isBandAxis = yScale.type === 'BAND';\n\n  const uniqueData = useMemo(() => {\n    let valueToPositionPerSeries;\n\n    if (isBandAxis) {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data.map((datum) => {\n            const x = getXValue(datum);\n            const y = getYValue(datum);\n            return {\n              position: yScale.get(y),\n              name: serie.name,\n              xValue: x,\n              yValue: y,\n            };\n          }),\n        )\n        .flat(1);\n    } else {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data.map((datum, i) => ({\n            position: getPosition(datum, serie.scale),\n            name: serie.name,\n            xValue: getXValue(datum),\n            yValue: getYValue(datum),\n          })),\n        )\n        .flat(1);\n    }\n    const positionUniqueData = {};\n\n    valueToPositionPerSeries.forEach((set) => {\n      if (positionUniqueData[[set.position]]) {\n        positionUniqueData[[set.position]] = [...positionUniqueData[[set.position]], { ...set }];\n      } else {\n        positionUniqueData[[set.position]] = [{ ...set }];\n      }\n    });\n\n    return positionUniqueData;\n  }, [data, getXValue, getYValue, y2Scale, yScale]);\n\n  return (\n    <g>\n      {Object.keys(uniqueData).map((key) => {\n        const yPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);\n        const datum = uniqueData[key];\n        return <ScrapperLine key={key} yPosition={yPosition} datum={datum} />;\n      })}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6ER;AA7Ef,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AACtB,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,EACf,IAAI,WAAW,YAAY;AAE3B,QAAM,cAAc;AAAA,IAClB,CAAC,OAAO,UAAU;AAChB,UAAI,cAAc;AAChB,eAAO,OAAO,IAAI,UAAU,KAAK,CAAC;AAAA,MACpC;AACA,UAAI,UAAU,OAAO,CAAC,OAAO;AAC3B,eAAO,OAAO,IAAI,UAAU,KAAK,CAAC;AAAA,MACpC;AACA,aAAO,QAAQ,IAAI,UAAU,KAAK,CAAC;AAAA,IACrC;AAAA,IACA,CAAC,WAAW,WAAW,cAAc,QAAQ,SAAS,MAAM;AAAA,EAC9D;AACA,QAAM,aAAa,OAAO,SAAS;AAEnC,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI;AAEJ,QAAI,YAAY;AACd,iCAA2B,KACxB;AAAA,QAAI,CAAC,UACJ,MAAM,KAAK,IAAI,CAAC,UAAU;AACxB,gBAAM,IAAI,UAAU,KAAK;AACzB,gBAAM,IAAI,UAAU,KAAK;AACzB,iBAAO;AAAA,YACL,UAAU,OAAO,IAAI,CAAC;AAAA,YACtB,MAAM,MAAM;AAAA,YACZ,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,QACF,CAAC;AAAA,MACH,EACC,KAAK,CAAC;AAAA,IACX,OAAO;AACL,iCAA2B,KACxB;AAAA,QAAI,CAAC,UACJ,MAAM,KAAK,IAAI,CAAC,OAAO,OAAO;AAAA,UAC5B,UAAU,YAAY,OAAO,MAAM,KAAK;AAAA,UACxC,MAAM,MAAM;AAAA,UACZ,QAAQ,UAAU,KAAK;AAAA,UACvB,QAAQ,UAAU,KAAK;AAAA,QACzB,EAAE;AAAA,MACJ,EACC,KAAK,CAAC;AAAA,IACX;AACA,UAAM,qBAAqB,CAAC;AAE5B,6BAAyB,QAAQ,CAAC,QAAQ;AACxC,UAAI,mBAAmB,CAAC,IAAI,QAAQ,IAAI;AACtC,2BAAmB,CAAC,IAAI,QAAQ,KAAK,CAAC,GAAG,mBAAmB,CAAC,IAAI,QAAQ,IAAI,EAAE,GAAG,IAAI,CAAC;AAAA,MACzF,OAAO;AACL,2BAAmB,CAAC,IAAI,QAAQ,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC;AAAA,MAClD;AAAA,IACF,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,WAAW,WAAW,SAAS,MAAM,CAAC;AAEhD,SACE,oBAAC,OACE,iBAAO,KAAK,UAAU,EAAE,IAAI,CAAC,QAAQ;AACpC,UAAM,YAAY,WAAW,GAAG,KAAK,aAAa,aAAa,IAAI,IAAI;AACvE,UAAM,QAAQ,WAAW;AACzB,WAAO,oBAAC,gBAAuB,WAAsB,SAA3B,GAAyC;AAAA,EACrE,CAAC,GACH;AAEJ;",
   "names": []
 }

package/dist/esm/graphs/Chart/parts/Scrapper/ScrapperLine.js

@@ -22,7 +22,7 @@ const ScrapperLine = ({ yPosition, datum }) => {
       setScrapperPosY(yPosition);
     setActivePoint(null);
   }, [isGrabbed, setScrapperPosY, setActivePoint, yPosition]);
-  const strokeDetectorWidth = yScale.bandwidth ? yScale.bandwidth() : "4px";
+  const strokeDetectorWidth = yScale.type === "BAND" ? yScale.getBandwidth() : "4px";
   return /* @__PURE__ */ jsxs("g", { children: [
     scrapperPosY === yPosition ? /* @__PURE__ */ jsxs("g", { children: [
       TooltipRenderer ? /* @__PURE__ */ jsx("foreignObject", { children: /* @__PURE__ */ jsxs(

package/dist/esm/graphs/Chart/parts/Scrapper/ScrapperLine.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scrapper/ScrapperLine.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles';\n\nexport const ScrapperLine = ({ yPosition, datum }) => {\n  const {\n    scrapperPosY,\n    setScrapperPosY,\n    innerWidth,\n    yScale,\n    setActivePoint,\n    isGrabbed,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosY(yPosition);\n    setActivePoint(null);\n  }, [isGrabbed, setScrapperPosY, setActivePoint, yPosition]);\n\n  const strokeDetectorWidth = yScale.bandwidth ? yScale.bandwidth() : '4px';\n\n  return (\n    <g>\n      {scrapperPosY === yPosition ? (\n        <g>\n          {TooltipRenderer ? (\n            <foreignObject>\n              <DSPopperJS\n                withoutAnimation\n                withoutArrow\n                customOffset={[0, 5]}\n                referenceElement={referenceElement}\n                showPopover\n                zIndex={theme.zIndex.tooltip}\n                // placementOrderPreference=\"\"\n                startPlacementPreference={scrapper.tooltipPreference}\n              >\n                <StyledMouseOverDetectionBox />\n                <StyledTooltipContainer>\n                  <TooltipRenderer data={datum} />\n                </StyledTooltipContainer>\n              </DSPopperJS>\n            </foreignObject>\n          ) : null}\n          <line\n            ref={setReferenceElement}\n            x1={innerWidth}\n            strokeWidth=\"2px\"\n            stroke=\"transparent\"\n            y1={yPosition}\n            x2={innerWidth}\n            y2={yPosition}\n          />\n          <line\n            // ref={setReferenceElement}\n            x1={0}\n            strokeWidth=\"2px\"\n            stroke=\"grey\"\n            strokeDasharray={(4, 4)}\n            y1={yPosition}\n            x2={innerWidth}\n            y2={yPosition}\n          />\n        </g>\n      ) : null}\n      <line\n        onMouseEnter={handleOnMouseEnter}\n        x1={0}\n        strokeWidth={strokeDetectorWidth}\n        stroke=\"transparent\"\n        y1={yPosition}\n        x2={innerWidth}\n        y2={yPosition}\n      />\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgCT,SAUE,KAVF;AAhCd,SAAgB,YAAY,aAAa,gBAAgB;AACzD,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AAE7D,MAAM,eAAe,CAAC,EAAE,WAAW,MAAM,MAAM;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,IAAI,WAAW,YAAY;AAC3B,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAgD;AAEhG,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,CAAC;AAAW,sBAAgB,SAAS;AACzC,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,WAAW,iBAAiB,gBAAgB,SAAS,CAAC;AAE1D,QAAM,sBAAsB,OAAO,YAAY,OAAO,UAAU,IAAI;AAEpE,SACE,qBAAC,OACE;AAAA,qBAAiB,YAChB,qBAAC,OACE;AAAA,wBACC,oBAAC,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,kBAAgB;AAAA,UAChB,cAAY;AAAA,UACZ,cAAc,CAAC,GAAG,CAAC;AAAA,UACnB;AAAA,UACA,aAAW;AAAA,UACX,QAAQ,MAAM,OAAO;AAAA,UAErB,0BAA0B,SAAS;AAAA,UAEnC;AAAA,gCAAC,+BAA4B;AAAA,YAC7B,oBAAC,0BACC,8BAAC,mBAAgB,MAAM,OAAO,GAChC;AAAA;AAAA;AAAA,MACF,GACF,IACE;AAAA,MACJ;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,aAAY;AAAA,UACZ,QAAO;AAAA,UACP,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA;AAAA,MACN;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UAEC,IAAI;AAAA,UACJ,aAAY;AAAA,UACZ,QAAO;AAAA,UACP,kBAAkB,GAAG;AAAA,UACrB,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA;AAAA,MACN;AAAA,OACF,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC,cAAc;AAAA,QACd,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,QAAO;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA;AAAA,IACN;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles';\n\nexport const ScrapperLine = ({ yPosition, datum }) => {\n  const {\n    scrapperPosY,\n    setScrapperPosY,\n    innerWidth,\n    yScale,\n    setActivePoint,\n    isGrabbed,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosY(yPosition);\n    setActivePoint(null);\n  }, [isGrabbed, setScrapperPosY, setActivePoint, yPosition]);\n\n  const strokeDetectorWidth = yScale.type === 'BAND' ? yScale.getBandwidth() : '4px';\n\n  return (\n    <g>\n      {scrapperPosY === yPosition ? (\n        <g>\n          {TooltipRenderer ? (\n            <foreignObject>\n              <DSPopperJS\n                withoutAnimation\n                withoutArrow\n                customOffset={[0, 5]}\n                referenceElement={referenceElement}\n                showPopover\n                zIndex={theme.zIndex.tooltip}\n                // placementOrderPreference=\"\"\n                startPlacementPreference={scrapper.tooltipPreference}\n              >\n                <StyledMouseOverDetectionBox />\n                <StyledTooltipContainer>\n                  <TooltipRenderer data={datum} />\n                </StyledTooltipContainer>\n              </DSPopperJS>\n            </foreignObject>\n          ) : null}\n          <line\n            ref={setReferenceElement}\n            x1={innerWidth}\n            strokeWidth=\"2px\"\n            stroke=\"transparent\"\n            y1={yPosition}\n            x2={innerWidth}\n            y2={yPosition}\n          />\n          <line\n            // ref={setReferenceElement}\n            x1={0}\n            strokeWidth=\"2px\"\n            stroke=\"grey\"\n            strokeDasharray={(4, 4)}\n            y1={yPosition}\n            x2={innerWidth}\n            y2={yPosition}\n          />\n        </g>\n      ) : null}\n      <line\n        onMouseEnter={handleOnMouseEnter}\n        x1={0}\n        strokeWidth={strokeDetectorWidth}\n        stroke=\"transparent\"\n        y1={yPosition}\n        x2={innerWidth}\n        y2={yPosition}\n      />\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgCT,SAUE,KAVF;AAhCd,SAAgB,YAAY,aAAa,gBAAgB;AACzD,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AAE7D,MAAM,eAAe,CAAC,EAAE,WAAW,MAAM,MAAM;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,IAAI,WAAW,YAAY;AAC3B,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAgD;AAEhG,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,CAAC;AAAW,sBAAgB,SAAS;AACzC,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,WAAW,iBAAiB,gBAAgB,SAAS,CAAC;AAE1D,QAAM,sBAAsB,OAAO,SAAS,SAAS,OAAO,aAAa,IAAI;AAE7E,SACE,qBAAC,OACE;AAAA,qBAAiB,YAChB,qBAAC,OACE;AAAA,wBACC,oBAAC,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,kBAAgB;AAAA,UAChB,cAAY;AAAA,UACZ,cAAc,CAAC,GAAG,CAAC;AAAA,UACnB;AAAA,UACA,aAAW;AAAA,UACX,QAAQ,MAAM,OAAO;AAAA,UAErB,0BAA0B,SAAS;AAAA,UAEnC;AAAA,gCAAC,+BAA4B;AAAA,YAC7B,oBAAC,0BACC,8BAAC,mBAAgB,MAAM,OAAO,GAChC;AAAA;AAAA;AAAA,MACF,GACF,IACE;AAAA,MACJ;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,aAAY;AAAA,UACZ,QAAO;AAAA,UACP,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA;AAAA,MACN;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UAEC,IAAI;AAAA,UACJ,aAAY;AAAA,UACZ,QAAO;AAAA,UACP,kBAAkB,GAAG;AAAA,UACrB,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA;AAAA,MACN;AAAA,OACF,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC,cAAc;AAAA,QACd,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,QAAO;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA;AAAA,IACN;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js

@@ -25,7 +25,7 @@ const VerticalScrapperLine = React2.memo(({ rectDetector, xPosition, data }) =>
     setActivePoint(null);
   }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);
   return useMemo(
-    () => /* @__PURE__ */ jsxs("g", { transform: `translate(${xScale.bandwidth ? xScale.bandwidth() / 2 : 0}, 0)`, children: [
+    () => /* @__PURE__ */ jsxs("g", { transform: `translate(${xScale.type === "BAND" ? xScale.getBandwidth() / 2 : 0}, 0)`, children: [
       isActive && !isGrabbed ? /* @__PURE__ */ jsxs("g", { children: [
         TooltipRenderer ? /* @__PURE__ */ jsx("foreignObject", { children: /* @__PURE__ */ jsxs(
           DSPopperJS,
@@ -61,10 +61,10 @@ const VerticalScrapperLine = React2.memo(({ rectDetector, xPosition, data }) =>
         "rect",
         {
           onMouseOver: handleOnMouseEnter,
-          x: xScale.bandwidth ? xPosition - xScale.bandwidth() / 2 : xPosition - rectDetector?.left,
+          x: xScale.type === "BAND" ? xPosition - xScale.getBandwidth() / 2 : xPosition - rectDetector?.left,
           fill: "transparent",
           y: 0,
-          width: xScale.bandwidth?.() ?? rectDetector?.right + rectDetector?.left,
+          width: xScale.type === "BAND" ? xScale.getBandwidth() : rectDetector?.right + rectDetector?.left,
           height: innerHeight
         }
       )

package/dist/esm/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scrapper/VerticalScrapperLine.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useState, useMemo } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles';\n\nexport const VerticalScrapperLine = React.memo(({ rectDetector, xPosition, data }) => {\n  const {\n    scrapperPosX,\n    setScrapperPosX,\n    isGrabbed,\n    xScale,\n    yScale,\n    setActivePoint,\n    innerHeight,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n  const isActive = scrapperPosX === xPosition;\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosX(xPosition);\n    setActivePoint(null);\n  }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);\n\n  // const strokeDetectorWidth = xScale.bandwidth ? xScale.bandwidth() : lineWidth;\n  return useMemo(\n    () => (\n      <g transform={`translate(${xScale.bandwidth ? xScale.bandwidth() / 2 : 0}, 0)`}>\n        {isActive && !isGrabbed ? (\n          <g>\n            {TooltipRenderer ? (\n              <foreignObject>\n                <DSPopperJS\n                  withoutAnimation\n                  withoutArrow\n                  customOffset={[0, 5]}\n                  referenceElement={referenceElement}\n                  showPopover\n                  zIndex={theme.zIndex.tooltip}\n                  startPlacementPreference={scrapper.tooltipPreference}\n                >\n                  <StyledMouseOverDetectionBox />\n                  <StyledTooltipContainer>\n                    <TooltipRenderer data={data} />\n                  </StyledTooltipContainer>\n                </DSPopperJS>\n              </foreignObject>\n            ) : null}\n            <line\n              ref={setReferenceElement}\n              x1={xPosition}\n              strokeWidth=\"2px\"\n              stroke={scrapper.color}\n              y1={0}\n              x2={xPosition}\n              y2={innerHeight}\n              strokeDasharray={(4, 4)}\n            />\n          </g>\n        ) : null}\n        <rect\n          onMouseOver={handleOnMouseEnter}\n          x={xScale.bandwidth ? xPosition - xScale.bandwidth() / 2 : xPosition - rectDetector?.left}\n          fill=\"transparent\"\n          y={0}\n          width={xScale.bandwidth?.() ?? rectDetector?.right + rectDetector?.left}\n          height={innerHeight}\n        />\n      </g>\n    ),\n    [\n      xScale,\n      isActive,\n      isGrabbed,\n      TooltipRenderer,\n      referenceElement,\n      theme.zIndex.tooltip,\n      scrapper.tooltipPreference,\n      scrapper.color,\n      data,\n      xPosition,\n      innerHeight,\n      handleOnMouseEnter,\n      rectDetector?.left,\n      rectDetector?.right,\n    ],\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiCP,SASE,KATF;AAjChB,OAAOA,UAAS,YAAY,aAAa,UAAU,eAAe;AAClE,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AAE7D,MAAM,uBAAuBA,OAAM,KAAK,CAAC,EAAE,cAAc,WAAW,KAAK,MAAM;AACpF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,IAAI,WAAW,YAAY;AAC3B,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAgD;AAChG,QAAM,WAAW,iBAAiB;AAClC,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,CAAC;AAAW,sBAAgB,SAAS;AACzC,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,WAAW,gBAAgB,iBAAiB,SAAS,CAAC;AAG1D,SAAO;AAAA,IACL,MACE,qBAAC,OAAE,WAAW,aAAa,OAAO,YAAY,OAAO,UAAU,IAAI,IAAI,SACpE;AAAA,kBAAY,CAAC,YACZ,qBAAC,OACE;AAAA,0BACC,oBAAC,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,kBAAgB;AAAA,YAChB,cAAY;AAAA,YACZ,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB;AAAA,YACA,aAAW;AAAA,YACX,QAAQ,MAAM,OAAO;AAAA,YACrB,0BAA0B,SAAS;AAAA,YAEnC;AAAA,kCAAC,+BAA4B;AAAA,cAC7B,oBAAC,0BACC,8BAAC,mBAAgB,MAAY,GAC/B;AAAA;AAAA;AAAA,QACF,GACF,IACE;AAAA,QACJ;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,aAAY;AAAA,YACZ,QAAQ,SAAS;AAAA,YACjB,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,kBAAkB,GAAG;AAAA;AAAA,QACvB;AAAA,SACF,IACE;AAAA,MACJ;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,GAAG,OAAO,YAAY,YAAY,OAAO,UAAU,IAAI,IAAI,YAAY,cAAc;AAAA,UACrF,MAAK;AAAA,UACL,GAAG;AAAA,UACH,OAAO,OAAO,YAAY,KAAK,cAAc,QAAQ,cAAc;AAAA,UACnE,QAAQ;AAAA;AAAA,MACV;AAAA,OACF;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,OAAO;AAAA,MACb,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,cAAc;AAAA,IAChB;AAAA,EACF;AACF,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useState, useMemo } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles';\n\nexport const VerticalScrapperLine = React.memo(({ rectDetector, xPosition, data }) => {\n  const {\n    scrapperPosX,\n    setScrapperPosX,\n    isGrabbed,\n    xScale,\n    yScale,\n    setActivePoint,\n    innerHeight,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n  const isActive = scrapperPosX === xPosition;\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosX(xPosition);\n    setActivePoint(null);\n  }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);\n\n  // const strokeDetectorWidth = xScale.type === 'BAND' ? xScale.getBandwidth() : lineWidth;\n  return useMemo(\n    () => (\n      <g transform={`translate(${xScale.type === 'BAND' ? xScale.getBandwidth() / 2 : 0}, 0)`}>\n        {isActive && !isGrabbed ? (\n          <g>\n            {TooltipRenderer ? (\n              <foreignObject>\n                <DSPopperJS\n                  withoutAnimation\n                  withoutArrow\n                  customOffset={[0, 5]}\n                  referenceElement={referenceElement}\n                  showPopover\n                  zIndex={theme.zIndex.tooltip}\n                  startPlacementPreference={scrapper.tooltipPreference}\n                >\n                  <StyledMouseOverDetectionBox />\n                  <StyledTooltipContainer>\n                    <TooltipRenderer data={data} />\n                  </StyledTooltipContainer>\n                </DSPopperJS>\n              </foreignObject>\n            ) : null}\n            <line\n              ref={setReferenceElement}\n              x1={xPosition}\n              strokeWidth=\"2px\"\n              stroke={scrapper.color}\n              y1={0}\n              x2={xPosition}\n              y2={innerHeight}\n              strokeDasharray={(4, 4)}\n            />\n          </g>\n        ) : null}\n        <rect\n          onMouseOver={handleOnMouseEnter}\n          x={xScale.type === 'BAND' ? xPosition - xScale.getBandwidth() / 2 : xPosition - rectDetector?.left}\n          fill=\"transparent\"\n          y={0}\n          width={xScale.type === 'BAND' ? xScale.getBandwidth() : rectDetector?.right + rectDetector?.left}\n          height={innerHeight}\n        />\n      </g>\n    ),\n    [\n      xScale,\n      isActive,\n      isGrabbed,\n      TooltipRenderer,\n      referenceElement,\n      theme.zIndex.tooltip,\n      scrapper.tooltipPreference,\n      scrapper.color,\n      data,\n      xPosition,\n      innerHeight,\n      handleOnMouseEnter,\n      rectDetector?.left,\n      rectDetector?.right,\n    ],\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiCP,SASE,KATF;AAjChB,OAAOA,UAAS,YAAY,aAAa,UAAU,eAAe;AAClE,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AAE7D,MAAM,uBAAuBA,OAAM,KAAK,CAAC,EAAE,cAAc,WAAW,KAAK,MAAM;AACpF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,IAAI,WAAW,YAAY;AAC3B,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAgD;AAChG,QAAM,WAAW,iBAAiB;AAClC,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,CAAC;AAAW,sBAAgB,SAAS;AACzC,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,WAAW,gBAAgB,iBAAiB,SAAS,CAAC;AAG1D,SAAO;AAAA,IACL,MACE,qBAAC,OAAE,WAAW,aAAa,OAAO,SAAS,SAAS,OAAO,aAAa,IAAI,IAAI,SAC7E;AAAA,kBAAY,CAAC,YACZ,qBAAC,OACE;AAAA,0BACC,oBAAC,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,kBAAgB;AAAA,YAChB,cAAY;AAAA,YACZ,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB;AAAA,YACA,aAAW;AAAA,YACX,QAAQ,MAAM,OAAO;AAAA,YACrB,0BAA0B,SAAS;AAAA,YAEnC;AAAA,kCAAC,+BAA4B;AAAA,cAC7B,oBAAC,0BACC,8BAAC,mBAAgB,MAAY,GAC/B;AAAA;AAAA;AAAA,QACF,GACF,IACE;AAAA,QACJ;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,aAAY;AAAA,YACZ,QAAQ,SAAS;AAAA,YACjB,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,kBAAkB,GAAG;AAAA;AAAA,QACvB;AAAA,SACF,IACE;AAAA,MACJ;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,GAAG,OAAO,SAAS,SAAS,YAAY,OAAO,aAAa,IAAI,IAAI,YAAY,cAAc;AAAA,UAC9F,MAAK;AAAA,UACL,GAAG;AAAA,UACH,OAAO,OAAO,SAAS,SAAS,OAAO,aAAa,IAAI,cAAc,QAAQ,cAAc;AAAA,UAC5F,QAAQ;AAAA;AAAA,MACV;AAAA,OACF;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,OAAO;AAAA,MACb,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,cAAc;AAAA,IAChB;AAAA,EACF;AACF,CAAC;",
   "names": ["React"]
 }

package/dist/esm/graphs/Chart/parts/Scroller/Controllers.js

@@ -47,7 +47,7 @@ const Controllers = () => {
     },
     [containerRef, lastPosition, setContainerRatio, setXScrollbarPosition]
   );
-  if (xScale.bandwidth || yScale.bandwidth)
+  if (xScale.type === "BAND" || yScale.type === "BAND")
     return null;
   if (!xScroll)
     return null;

package/dist/esm/graphs/Chart/parts/Scroller/Controllers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scroller/Controllers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext';\nimport { TOOLBAR } from '../../../constants';\n\nconst StyledResetter = styled('g')<{ isDisabled: 'boolean' }>`\n  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};\n  opacity: ${({ isDisabled }) => (isDisabled ? '0.4' : '1')};\n  &focus {\n    outline: 2px solid blue;\n  }\n`;\nexport const Controllers = () => {\n  const {\n    props: { xScroll },\n    width,\n    internalMargin,\n    xScale,\n    yScale,\n    containerRef,\n    containerRatio,\n    setContainerRatio,\n    lastPosition,\n    setToolbarRef,\n    setXScrollbarPosition,\n  } = useContext(ChartContext);\n\n  const isDisabled = useMemo(() => containerRatio === 1, [containerRatio]);\n  const handleOnClick = useCallback(() => {\n    setContainerRatio(1);\n    setXScrollbarPosition(0);\n    lastPosition.current = 0;\n  }, [lastPosition, setContainerRatio, setXScrollbarPosition]);\n\n  const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      e.stopPropagation();\n      if (['Space', 'Enter'].includes(e.code)) {\n        setContainerRatio(1);\n        setXScrollbarPosition(0);\n        lastPosition.current = 0;\n        containerRef?.focus();\n      }\n\n      if (e.code === 'Tab' && e.shiftKey) {\n        e.preventDefault();\n        containerRef?.focus();\n      }\n    },\n    [containerRef, lastPosition, setContainerRatio, setXScrollbarPosition],\n  );\n\n  // if is a bar chart we dont give controls\n  if (xScale.bandwidth || yScale.bandwidth) return null;\n\n  if (!xScroll) return null;\n  return (\n    <StyledResetter\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      transform={`translate(${width - TOOLBAR.RESET.WIDTH * 2},${internalMargin.top / 2 - TOOLBAR.RESET.HEIGHT / 2})`}\n      strokeLinecap=\"round\"\n      isDisabled={isDisabled}\n      ref={setToolbarRef}\n      role=\"button\"\n      aria-label=\"Reset zoom in chart\"\n      tabIndex={isDisabled ? -1 : 0}\n    >\n      <path\n        d=\"M 2.875 7.75 A 5.625 5.625 0 1 1 4.5225 11.7275 L 8.2725 10.7275 L 6.5225 14.9775 L 4.5225 11.7275\n        M 0 0 H 17 V 17 H 0 V 0 \"\n        fill=\"#ffffff\"\n        stroke=\"#000000\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"1\"\n      ></path>\n    </StyledResetter>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsEjB;AApEN,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AAExB,MAAM,iBAAiB,OAAO,GAAG;AAAA,YACrB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA,aACjD,CAAC,EAAE,WAAW,MAAO,aAAa,QAAQ;AAAA;AAAA;AAAA;AAAA;AAKhD,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,aAAa,QAAQ,MAAM,mBAAmB,GAAG,CAAC,cAAc,CAAC;AACvE,QAAM,gBAAgB,YAAY,MAAM;AACtC,sBAAkB,CAAC;AACnB,0BAAsB,CAAC;AACvB,iBAAa,UAAU;AAAA,EACzB,GAAG,CAAC,cAAc,mBAAmB,qBAAqB,CAAC;AAE3D,QAAM,kBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,QAAE,gBAAgB;AAClB,UAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,0BAAkB,CAAC;AACnB,8BAAsB,CAAC;AACvB,qBAAa,UAAU;AACvB,sBAAc,MAAM;AAAA,MACtB;AAEA,UAAI,EAAE,SAAS,SAAS,EAAE,UAAU;AAClC,UAAE,eAAe;AACjB,sBAAc,MAAM;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,cAAc,mBAAmB,qBAAqB;AAAA,EACvE;AAGA,MAAI,OAAO,aAAa,OAAO;AAAW,WAAO;AAEjD,MAAI,CAAC;AAAS,WAAO;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW,aAAa,QAAQ,QAAQ,MAAM,QAAQ,KAAK,eAAe,MAAM,IAAI,QAAQ,MAAM,SAAS;AAAA,MAC3G,eAAc;AAAA,MACd;AAAA,MACA,KAAK;AAAA,MACL,MAAK;AAAA,MACL,cAAW;AAAA,MACX,UAAU,aAAa,KAAK;AAAA,MAE5B;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UAEF,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,aAAY;AAAA;AAAA,MACb;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext';\nimport { TOOLBAR } from '../../../constants';\n\nconst StyledResetter = styled('g')<{ isDisabled: 'boolean' }>`\n  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};\n  opacity: ${({ isDisabled }) => (isDisabled ? '0.4' : '1')};\n  &focus {\n    outline: 2px solid blue;\n  }\n`;\nexport const Controllers = () => {\n  const {\n    props: { xScroll },\n    width,\n    internalMargin,\n    xScale,\n    yScale,\n    containerRef,\n    containerRatio,\n    setContainerRatio,\n    lastPosition,\n    setToolbarRef,\n    setXScrollbarPosition,\n  } = useContext(ChartContext);\n\n  const isDisabled = useMemo(() => containerRatio === 1, [containerRatio]);\n  const handleOnClick = useCallback(() => {\n    setContainerRatio(1);\n    setXScrollbarPosition(0);\n    lastPosition.current = 0;\n  }, [lastPosition, setContainerRatio, setXScrollbarPosition]);\n\n  const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      e.stopPropagation();\n      if (['Space', 'Enter'].includes(e.code)) {\n        setContainerRatio(1);\n        setXScrollbarPosition(0);\n        lastPosition.current = 0;\n        containerRef?.focus();\n      }\n\n      if (e.code === 'Tab' && e.shiftKey) {\n        e.preventDefault();\n        containerRef?.focus();\n      }\n    },\n    [containerRef, lastPosition, setContainerRatio, setXScrollbarPosition],\n  );\n\n  // if is a bar chart we dont give controls\n  if (xScale.type === 'BAND' || yScale.type === 'BAND') return null;\n\n  if (!xScroll) return null;\n  return (\n    <StyledResetter\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      transform={`translate(${width - TOOLBAR.RESET.WIDTH * 2},${internalMargin.top / 2 - TOOLBAR.RESET.HEIGHT / 2})`}\n      strokeLinecap=\"round\"\n      isDisabled={isDisabled}\n      ref={setToolbarRef}\n      role=\"button\"\n      aria-label=\"Reset zoom in chart\"\n      tabIndex={isDisabled ? -1 : 0}\n    >\n      <path\n        d=\"M 2.875 7.75 A 5.625 5.625 0 1 1 4.5225 11.7275 L 8.2725 10.7275 L 6.5225 14.9775 L 4.5225 11.7275\n        M 0 0 H 17 V 17 H 0 V 0 \"\n        fill=\"#ffffff\"\n        stroke=\"#000000\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"1\"\n      ></path>\n    </StyledResetter>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsEjB;AApEN,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AAExB,MAAM,iBAAiB,OAAO,GAAG;AAAA,YACrB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA,aACjD,CAAC,EAAE,WAAW,MAAO,aAAa,QAAQ;AAAA;AAAA;AAAA;AAAA;AAKhD,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,aAAa,QAAQ,MAAM,mBAAmB,GAAG,CAAC,cAAc,CAAC;AACvE,QAAM,gBAAgB,YAAY,MAAM;AACtC,sBAAkB,CAAC;AACnB,0BAAsB,CAAC;AACvB,iBAAa,UAAU;AAAA,EACzB,GAAG,CAAC,cAAc,mBAAmB,qBAAqB,CAAC;AAE3D,QAAM,kBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,QAAE,gBAAgB;AAClB,UAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,0BAAkB,CAAC;AACnB,8BAAsB,CAAC;AACvB,qBAAa,UAAU;AACvB,sBAAc,MAAM;AAAA,MACtB;AAEA,UAAI,EAAE,SAAS,SAAS,EAAE,UAAU;AAClC,UAAE,eAAe;AACjB,sBAAc,MAAM;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,cAAc,mBAAmB,qBAAqB;AAAA,EACvE;AAGA,MAAI,OAAO,SAAS,UAAU,OAAO,SAAS;AAAQ,WAAO;AAE7D,MAAI,CAAC;AAAS,WAAO;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW,aAAa,QAAQ,QAAQ,MAAM,QAAQ,KAAK,eAAe,MAAM,IAAI,QAAQ,MAAM,SAAS;AAAA,MAC3G,eAAc;AAAA,MACd;AAAA,MACA,KAAK;AAAA,MACL,MAAK;AAAA,MACL,cAAW;AAAA,MACX,UAAU,aAAa,KAAK;AAAA,MAE5B;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UAEF,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,aAAY;AAAA;AAAA,MACb;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

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

@@ -30,8 +30,8 @@ const ScrollableContainerX = () => {
     setMovingPosition
   } = useContext(ChartContext);
   const getRealClientX = useCallback(
-    (clientX) => clientX - internalMargin.left - containerRef.getBoundingClientRect().left,
-    [internalMargin.left]
+    (clientX) => clientX - internalMargin.left - (containerRef?.getBoundingClientRect().left || 0),
+    [containerRef, internalMargin.left]
   );
   const Scrappers = useMemo(() => {
     if (scrapper?.type === "horizontal")
@@ -42,20 +42,20 @@ const ScrollableContainerX = () => {
   }, [scrapper?.type]);
   const handleOnMouseDown = useCallback(
     ({ clientX }) => {
-      if (!isGrabbed && !xScale.bandwidth) {
+      if (!isGrabbed && xScale.type !== "BAND") {
         setIsZooming(true);
         setZoomStartingPosition(getRealClientX(clientX));
         setMovingPosition(0);
       }
     },
-    [isGrabbed, xScale]
+    [getRealClientX, isGrabbed, setIsZooming, setMovingPosition, setZoomStartingPosition, xScale.type]
   );
   const handleOnMouseMove = useCallback(
     ({ clientX }) => {
       if (isZooming)
         setMovingPosition(getRealClientX(clientX));
     },
-    [isZooming]
+    [getRealClientX, isZooming, setMovingPosition]
   );
   const handleOnMouseUp = useCallback(
     (e) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scroller/ScrollableContainerX.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, 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';\nexport const ScrollableContainerX = () => {\n  const {\n    props: { scrapper },\n    xScrollbarPosition,\n    xScale,\n    containerRatio,\n    innerWidth,\n    isGrabbed,\n    containerRef,\n    setXScrollbarPosition,\n    setContainerRatio,\n    lastPosition,\n    innerHeight,\n    internalMargin,\n    chartId,\n    isZooming,\n    setIsZooming,\n    zoomStartingPosition,\n    setZoomStartingPosition,\n    movingPosition,\n    setMovingPosition,\n  } = useContext(ChartContext);\n\n  const getRealClientX = useCallback(\n    (clientX: number) => clientX - internalMargin.left - containerRef.getBoundingClientRect().left,\n    [internalMargin.left],\n  );\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  //mouse\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    ({ clientX }) => {\n      if (!isGrabbed && !xScale.bandwidth) {\n        setIsZooming(true);\n        setZoomStartingPosition(getRealClientX(clientX));\n        setMovingPosition(0);\n      }\n    },\n    [isGrabbed, xScale],\n  );\n\n  const handleOnMouseMove: React.MouseEventHandler = useCallback(\n    ({ clientX }) => {\n      if (isZooming) setMovingPosition(getRealClientX(clientX));\n    },\n    [isZooming],\n  );\n  const handleOnMouseUp: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isZooming) return;\n      setIsZooming(false);\n      setMovingPosition(0);\n      const endingPosition = getRealClientX(e.clientX);\n\n      const diff = Math.abs(zoomStartingPosition - 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        (zoomStartingPosition > endingPosition ? endingPosition : zoomStartingPosition) / 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      isZooming,\n      setIsZooming,\n      setMovingPosition,\n      getRealClientX,\n      zoomStartingPosition,\n      innerWidth,\n      containerRatio,\n      lastPosition,\n      setXScrollbarPosition,\n      setContainerRatio,\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          <AxisBottom />\n          <SeriesFactory />\n          {Scrappers}\n        </g>\n        {isZooming && movingPosition !== 0 ? (\n          <rect\n            x={movingPosition < zoomStartingPosition ? movingPosition : zoomStartingPosition}\n            width={Math.abs(movingPosition - zoomStartingPosition)}\n            height={innerHeight}\n            fill=\"orange\"\n            style={{ opacity: 0.2 }}\n          />\n        ) : null}\n      </g>\n      <ScrollBarX />\n    </g>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, 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';\nexport const ScrollableContainerX = () => {\n  const {\n    props: { scrapper },\n    xScrollbarPosition,\n    xScale,\n    containerRatio,\n    innerWidth,\n    isGrabbed,\n    containerRef,\n    setXScrollbarPosition,\n    setContainerRatio,\n    lastPosition,\n    innerHeight,\n    internalMargin,\n    chartId,\n    isZooming,\n    setIsZooming,\n    zoomStartingPosition,\n    setZoomStartingPosition,\n    movingPosition,\n    setMovingPosition,\n  } = useContext(ChartContext);\n\n  const getRealClientX = useCallback(\n    (clientX: number) => clientX - internalMargin.left - (containerRef?.getBoundingClientRect().left || 0),\n    [containerRef, internalMargin.left],\n  );\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 handleOnMouseDown: React.MouseEventHandler = useCallback(\n    ({ clientX }) => {\n      if (!isGrabbed && xScale.type !== 'BAND') {\n        setIsZooming(true);\n        setZoomStartingPosition(getRealClientX(clientX));\n        setMovingPosition(0);\n      }\n    },\n    [getRealClientX, isGrabbed, setIsZooming, setMovingPosition, setZoomStartingPosition, xScale.type],\n  );\n\n  const handleOnMouseMove: React.MouseEventHandler = useCallback(\n    ({ clientX }) => {\n      if (isZooming) setMovingPosition(getRealClientX(clientX));\n    },\n    [getRealClientX, isZooming, setMovingPosition],\n  );\n  const handleOnMouseUp: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isZooming) return;\n      setIsZooming(false);\n      setMovingPosition(0);\n      const endingPosition = getRealClientX(e.clientX);\n\n      const diff = Math.abs(zoomStartingPosition - 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        (zoomStartingPosition > endingPosition ? endingPosition : zoomStartingPosition) / 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      isZooming,\n      setIsZooming,\n      setMovingPosition,\n      getRealClientX,\n      zoomStartingPosition,\n      innerWidth,\n      containerRatio,\n      lastPosition,\n      setXScrollbarPosition,\n      setContainerRatio,\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          <AxisBottom />\n          <SeriesFactory />\n          {Scrappers}\n        </g>\n        {isZooming && movingPosition !== 0 ? (\n          <rect\n            x={movingPosition < zoomStartingPosition ? movingPosition : zoomStartingPosition}\n            width={Math.abs(movingPosition - zoomStartingPosition)}\n            height={innerHeight}\n            fill=\"orange\"\n            style={{ opacity: 0.2 }}\n          />\n        ) : null}\n      </g>\n      <ScrollBarX />\n    </g>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -14,7 +14,7 @@ const TrendHighlight = ({ currentDatum }) => {
   return /* @__PURE__ */ jsx(
     "line",
     {
-      strokeWidth: "2",
+      strokeWidth: "4",
       stroke: yPreviousPosition > yCurrentPosition ? "green" : "red",
       x1: xPreviousPosition,
       x2: xCurrentPosition,