@elliemae/ds-dataviz 3.50.1-next.8 → 3.51.0-beta.1

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/parts/ChartContainer.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledSVGWrapper } from '../styles.js';\nimport { ChartContext } from '../ChartContext.js';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation.js';\nimport { Legend } from './Legend/Legend.js';\nimport { Labels } from './Labels/index.js';\nimport { BlurMask } from './Scroller/BlurMask.js';\nimport { ClipPaths } from './ClipPaths.js';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX.js';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY.js';\nimport { AxisBottom } from './Axis/AxisBottom.js';\nimport { AxisRight } from './Axis/AxisRight.js';\nimport { AxisLeft } from './Axis/AxisLeft.js';\nimport { SeriesFactory } from './SeriesFactory.js';\nimport { Scrapper } from './Scrapper/Scrapper.js';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper.js';\nimport { Controllers } from './Scroller/Controllers.js';\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    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    innerHeight,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    lastScrollbarPosition,\n    setIsScrollbarVisible,\n    currentData,\n    width,\n    height,\n  } = useContext(ChartContext);\n\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(-1);\n    setScrapperPosX(-1);\n    setIsScrollbarVisible(false);\n    setIsGrabbed(false);\n  }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n  const handleMouseMove: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isGrabbed) return;\n      e.preventDefault();\n      const clientX = e.clientX;\n      const clientY = e.clientY;\n\n      setActivePoint(null);\n      if (xScroll) {\n        const newPosition = lastScrollbarPosition?.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 = lastScrollbarPosition?.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      lastScrollbarPosition,\n      startPosition,\n      setXScrollbarPosition,\n      innerWidth,\n      containerRatio,\n      innerHeight,\n    ],\n  );\n  const handleMouseUp = useCallback(() => {\n    lastScrollbarPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [lastScrollbarPosition, setIsGrabbed, xScrollbarPosition]);\n\n  const render = useMemo(() => {\n    if (currentData.length === 0) return null;\n    if (xScroll) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisLeft />\n          <ScrollableContainerX />\n        </>\n      );\n    } else 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      innerRef={setContainerRef}\n      onKeyDown={onInputKeyDown}\n      onKeyUp={handleOnKeyUp}\n      tabIndex={activePoint ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\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 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useCallback, useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext.js';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation.js';\nimport { StyledSVGWrapper } from '../styles.js';\nimport { AxisBottom } from './Axis/AxisBottom.js';\nimport { AxisLeft } from './Axis/AxisLeft.js';\nimport { AxisRight } from './Axis/AxisRight.js';\nimport { ClipPaths } from './ClipPaths.js';\nimport { Labels } from './Labels/index.js';\nimport { Legend } from './Legend/Legend.js';\nimport { Scrapper } from './Scrapper/Scrapper.js';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper.js';\nimport { BlurMask } from './Scroller/BlurMask.js';\nimport { Controllers } from './Scroller/Controllers.js';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX.js';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY.js';\nimport { SeriesFactory } from './SeriesFactory.js';\nexport const ChartContainer = () => {\n  const {\n    props: { y2Axis, yScroll, xScroll, scrapper, width: userWidth },\n    activePoint,\n    internalMargin,\n    setScrapperPosY,\n    setScrapperPosX,\n    setContainerRef,\n    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    innerHeight,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    lastScrollbarPosition,\n    setIsScrollbarVisible,\n    currentData,\n    width,\n    height,\n  } = useContext(ChartContext);\n\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(-1);\n    setScrapperPosX(-1);\n    setIsScrollbarVisible(false);\n    setIsGrabbed(false);\n  }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n  const handleMouseMove: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isGrabbed) return;\n      e.preventDefault();\n      const { clientX } = e;\n      const { clientY } = e;\n\n      setActivePoint(null);\n      if (xScroll) {\n        const newPosition = lastScrollbarPosition.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 = lastScrollbarPosition.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      lastScrollbarPosition,\n      startPosition,\n      setXScrollbarPosition,\n      innerWidth,\n      containerRatio,\n      innerHeight,\n    ],\n  );\n  const handleMouseUp = useCallback(() => {\n    lastScrollbarPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [lastScrollbarPosition, setIsGrabbed, xScrollbarPosition]);\n\n  const render = useMemo(() => {\n    if (currentData.length === 0) return null;\n    if (xScroll) {\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, xScroll, y2Axis, yScroll]);\n  return (\n    <StyledSVGWrapper\n      innerRef={setContainerRef}\n      onKeyDown={onInputKeyDown}\n      onKeyUp={handleOnKeyUp}\n      tabIndex={activePoint ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/Legend/RightLegend.js

@@ -58,7 +58,7 @@ const RightLegend = () => {
       transform: `translate(${innerWidth + internalMargin.left + axisRightWidth + rightLabelWidth},${yTransform})`,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "20", height: 1, fill: "transparent" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: `translate(0,0)`, children: series.map((serie, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { className: "tick", transform: `translate(30,${i * 30})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendItem.LegendItem, { domainValue: serie.name }) }, serie.name)) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(0,0)", children: series.map((serie, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { className: "tick", transform: `translate(30,${i * 30})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendItem.LegendItem, { domainValue: serie.name }) }, serie.name)) })
       ]
     }
   );

package/dist/cjs/graphs/Chart/parts/Legend/RightLegend.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Legend/RightLegend.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useState, useEffect } from 'react';\nimport { ChartContext } from '../../ChartContext.js';\nimport { LegendItem } from './LegendItem.js';\n\nexport const RightLegend = () => {\n  const {\n    innerWidth,\n    innerHeight,\n    rightLabelWidth,\n    axisRightWidth,\n    internalMargin,\n    rightLegendHeight,\n    setRightLegend,\n    originalSeries: series,\n  } = useContext(ChartContext);\n\n  const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);\n\n  useEffect(() => {\n    setYTransform(innerHeight / 2 + internalMargin.top - rightLegendHeight / 2);\n  }, [innerHeight, internalMargin.top, rightLegendHeight]);\n\n  return (\n    <g\n      ref={setRightLegend}\n      transform={`translate(${innerWidth + internalMargin.left + axisRightWidth + rightLabelWidth},${yTransform})`}\n    >\n      <rect width=\"20\" height={1} fill=\"transparent\" />\n      <g transform={`translate(0,0)`}>\n        {series.map((serie, i) => (\n          <g className=\"tick\" transform={`translate(30,${i * 30})`} key={serie.name}>\n            <LegendItem domainValue={serie.name} />\n          </g>\n        ))}\n      </g>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBnB;AAvBJ,mBAAuD;AACvD,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,cAAc,IAAI,eAAe,GAAG;AAEjF,8BAAU,MAAM;AACd,kBAAc,cAAc,IAAI,eAAe,MAAM,oBAAoB,CAAC;AAAA,EAC5E,GAAG,CAAC,aAAa,eAAe,KAAK,iBAAiB,CAAC;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,aAAa,aAAa,eAAe,OAAO,iBAAiB,eAAe,IAAI,UAAU;AAAA,MAEzG;AAAA,oDAAC,UAAK,OAAM,MAAK,QAAQ,GAAG,MAAK,eAAc;AAAA,QAC/C,4CAAC,OAAE,WAAW,kBACX,iBAAO,IAAI,CAAC,OAAO,MAClB,4CAAC,OAAE,WAAU,QAAO,WAAW,gBAAgB,IAAI,EAAE,KACnD,sDAAC,gCAAW,aAAa,MAAM,MAAM,KADwB,MAAM,IAErE,CACD,GACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useState, useEffect } from 'react';\nimport { ChartContext } from '../../ChartContext.js';\nimport { LegendItem } from './LegendItem.js';\n\nexport const RightLegend = () => {\n  const {\n    innerWidth,\n    innerHeight,\n    rightLabelWidth,\n    axisRightWidth,\n    internalMargin,\n    rightLegendHeight,\n    setRightLegend,\n    originalSeries: series,\n  } = useContext(ChartContext);\n\n  const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);\n\n  useEffect(() => {\n    setYTransform(innerHeight / 2 + internalMargin.top - rightLegendHeight / 2);\n  }, [innerHeight, internalMargin.top, rightLegendHeight]);\n\n  return (\n    <g\n      ref={setRightLegend}\n      transform={`translate(${innerWidth + internalMargin.left + axisRightWidth + rightLabelWidth},${yTransform})`}\n    >\n      <rect width=\"20\" height={1} fill=\"transparent\" />\n      <g transform=\"translate(0,0)\">\n        {series.map((serie, i) => (\n          <g className=\"tick\" transform={`translate(30,${i * 30})`} key={serie.name}>\n            <LegendItem domainValue={serie.name} />\n          </g>\n        ))}\n      </g>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBnB;AAvBJ,mBAAuD;AACvD,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,cAAc,IAAI,eAAe,GAAG;AAEjF,8BAAU,MAAM;AACd,kBAAc,cAAc,IAAI,eAAe,MAAM,oBAAoB,CAAC;AAAA,EAC5E,GAAG,CAAC,aAAa,eAAe,KAAK,iBAAiB,CAAC;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,aAAa,aAAa,eAAe,OAAO,iBAAiB,eAAe,IAAI,UAAU;AAAA,MAEzG;AAAA,oDAAC,UAAK,OAAM,MAAK,QAAQ,GAAG,MAAK,eAAc;AAAA,QAC/C,4CAAC,OAAE,WAAU,kBACV,iBAAO,IAAI,CAAC,OAAO,MAClB,4CAAC,OAAE,WAAU,QAAO,WAAW,gBAAgB,IAAI,EAAE,KACnD,sDAAC,gCAAW,aAAa,MAAM,MAAM,KADwB,MAAM,IAErE,CACD,GACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Scrapper/ScrapperLine.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useCallback, useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext.js';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles.js';\nimport type { DSChartT } from '../../react-desc-prop-types.js';\ninterface ScrapperLineProps {\n  yPosition: number;\n  datum: DSChartT.ScrapperDatum[];\n}\n\nexport const ScrapperLine: React.ComponentType<ScrapperLineProps> = ({ 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<HTMLOrSVGElement | null>(null);\n\n  const yPositionString = yPosition;\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosY(yPositionString);\n    setActivePoint(null);\n  }, [isGrabbed, setScrapperPosY, setActivePoint, yPositionString]);\n\n  const strokeDetectorWidth = yScale?.type === 'BAND' ? yScale?.getBandwidth() : '4px';\n\n  return (\n    <g>\n      {scrapperPosY === yPositionString ? (\n        <g>\n          {TooltipRenderer ? (\n            <foreignObject>\n              <DSPopperJS\n                withoutAnimation\n                withoutArrow\n                customOffset={[0, 5]}\n                referenceElement={referenceElement as HTMLElement}\n                showPopover\n                zIndex={theme.zIndex.tooltip}\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            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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCT;AAtCd,mBAAyD;AACzD,yBAA2B;AAC3B,uBAA6B;AAC7B,0BAA6B;AAC7B,oBAAoE;AAO7D,MAAM,eAAuD,CAAC,EAAE,WAAW,MAAM,MAAM;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,QAAI,yBAAW,gCAAY;AAC3B,QAAM,YAAQ,yBAAW,6BAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAkC,IAAI;AAEtF,QAAM,kBAAkB;AACxB,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,CAAC,UAAW,iBAAgB,eAAe;AAC/C,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,WAAW,iBAAiB,gBAAgB,eAAe,CAAC;AAEhE,QAAM,sBAAsB,QAAQ,SAAS,SAAS,QAAQ,aAAa,IAAI;AAE/E,SACE,6CAAC,OACE;AAAA,qBAAiB,kBAChB,6CAAC,OACE;AAAA,wBACC,4CAAC,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,UACrB,0BAA0B,UAAU;AAAA,UAEpC;AAAA,wDAAC,6CAA4B;AAAA,YAC7B,4CAAC,wCACC,sDAAC,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,UACC,IAAI;AAAA,UACJ,aAAY;AAAA,UACZ,QAAO;AAAA,UACP,iBAAiB;AAAA,UACjB,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 React, { useContext, useCallback, useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext.js';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles.js';\nimport type { DSChartT } from '../../react-desc-prop-types.js';\ninterface ScrapperLineProps {\n  yPosition: number;\n  datum: DSChartT.ScrapperDatum[];\n}\n\nexport const ScrapperLine: React.ComponentType<ScrapperLineProps> = ({ 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<HTMLOrSVGElement | null>(null);\n\n  const yPositionString = yPosition;\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosY(yPositionString);\n    setActivePoint(null);\n  }, [isGrabbed, setScrapperPosY, setActivePoint, yPositionString]);\n\n  const strokeDetectorWidth = yScale?.type === 'BAND' ? yScale?.getBandwidth() : '4px';\n\n  return (\n    <g>\n      {scrapperPosY === yPositionString ? (\n        <g>\n          {TooltipRenderer ? (\n            <foreignObject>\n              <DSPopperJS\n                withoutAnimation\n                withoutArrow\n                customOffset={[0, 5]}\n                referenceElement={referenceElement as HTMLElement}\n                showPopover\n                zIndex={theme.zIndex.tooltip}\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            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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCT;AAtCd,mBAAyD;AACzD,yBAA2B;AAC3B,uBAA6B;AAC7B,0BAA6B;AAC7B,oBAAoE;AAO7D,MAAM,eAAuD,CAAC,EAAE,WAAW,MAAM,MAAM;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,QAAI,yBAAW,gCAAY;AAC3B,QAAM,YAAQ,yBAAW,6BAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAkC,IAAI;AAEtF,QAAM,kBAAkB;AACxB,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,CAAC,UAAW,iBAAgB,eAAe;AAC/C,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,WAAW,iBAAiB,gBAAgB,eAAe,CAAC;AAEhE,QAAM,sBAAsB,QAAQ,SAAS,SAAS,QAAQ,aAAa,IAAI;AAE/E,SACE,6CAAC,OACE;AAAA,qBAAiB,kBAChB,6CAAC,OACE;AAAA,wBACC,4CAAC,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,UACrB,0BAA0B,UAAU;AAAA,UAEpC;AAAA,wDAAC,6CAA4B;AAAA,YAC7B,4CAAC,wCACC,sDAAC,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,UACC,IAAI;AAAA,UACJ,aAAY;AAAA,UACZ,QAAO;AAAA,UACP,iBAAgB;AAAA,UAChB,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/cjs/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js

@@ -58,7 +58,8 @@ const VerticalScrapperLine = import_react.default.memo(
       if (!isGrabbed) setScrapperPosX(xPosition);
       setActivePoint(null);
     }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(${xScale?.type === "BAND" ? xScale?.getBandwidth() / 2 : 0}, 0)`, children: [
+    const nonNullXscale = xScale ?? { type: "notBANDAndEverythingElseIsCurrentlyTreatedTheSame" };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(${nonNullXscale.type === "BAND" ? nonNullXscale.getBandwidth() / 2 : 0}, 0)`, children: [
       isActive && !isGrabbed ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
         TooltipRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("foreignObject", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           import_ds_popperjs.DSPopperJS,
@@ -94,10 +95,10 @@ const VerticalScrapperLine = import_react.default.memo(
         "rect",
         {
           onMouseOver: handleOnMouseEnter,
-          x: xScale?.type === "BAND" ? xPosition - xScale?.getBandwidth() / 2 : xPosition - (rectDetector?.left ?? 0),
+          x: nonNullXscale.type === "BAND" ? xPosition - nonNullXscale.getBandwidth() / 2 : xPosition - (rectDetector?.left ?? 0),
           fill: "transparent",
           y: 0,
-          width: xScale?.type === "BAND" ? xScale?.getBandwidth() : (rectDetector?.right ?? 0) + (rectDetector?.left ?? 0),
+          width: nonNullXscale.type === "BAND" ? nonNullXscale.getBandwidth() : (rectDetector?.right ?? 0) + (rectDetector?.left ?? 0),
           height: innerHeight
         }
       )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Scrapper/VerticalScrapperLine.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useCallback, useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles.js';\nimport type { DSChartT } from '../../react-desc-prop-types.js';\nimport type { ScaleT } from '../../scales/index.js';\ninterface VerticalScrapperLineProps {\n  rectDetector?: { left: number; right: number };\n  xPosition: number;\n  data: DSChartT.ScrapperDatum[];\n  scrapperPosX: number;\n  setScrapperPosX: (x: number) => void;\n  isGrabbed: boolean;\n  xScale: ScaleT | null;\n  setActivePoint: React.Dispatch<React.SetStateAction<DSChartT.InternalDatum | null>>;\n  innerHeight: number;\n  TooltipRenderer?:\n    | React.ComponentType<{\n        data: {\n          name: string;\n          xValue: string | number | Date | null;\n          yValue: string | number | Date | null;\n          datum: DSChartT.InternalDatum;\n        }[];\n      }>\n    | undefined;\n  scrapper: DSChartT.ScrapperT;\n}\n\nexport const VerticalScrapperLine: React.ComponentType<VerticalScrapperLineProps> = React.memo(\n  ({\n    rectDetector,\n    xPosition,\n    data,\n    scrapperPosX,\n    setScrapperPosX,\n    isGrabbed,\n    xScale,\n    setActivePoint,\n    innerHeight,\n    TooltipRenderer,\n    scrapper,\n  }) => {\n    const theme = useContext(ThemeContext);\n    const [referenceElement, setReferenceElement] = useState<HTMLOrSVGElement | null>();\n    const isActive = scrapperPosX === xPosition;\n    const handleOnMouseEnter = useCallback(() => {\n      if (!isGrabbed) setScrapperPosX(xPosition);\n      setActivePoint(null);\n    }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);\n    return (\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 as HTMLElement}\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 ?? 0)}\n          fill=\"transparent\"\n          y={0}\n          width={\n            xScale?.type === 'BAND' ? xScale?.getBandwidth() : (rectDetector?.right ?? 0) + (rectDetector?.left ?? 0)\n          }\n          height={innerHeight}\n        />\n      </g>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwDP;AAxDhB,mBAAyD;AACzD,yBAA2B;AAC3B,uBAA6B;AAC7B,oBAAoE;AA0B7D,MAAM,uBAAuE,aAAAA,QAAM;AAAA,EACxF,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,YAAQ,yBAAW,6BAAY;AACrC,UAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAkC;AAClF,UAAM,WAAW,iBAAiB;AAClC,UAAM,yBAAqB,0BAAY,MAAM;AAC3C,UAAI,CAAC,UAAW,iBAAgB,SAAS;AACzC,qBAAe,IAAI;AAAA,IACrB,GAAG,CAAC,WAAW,gBAAgB,iBAAiB,SAAS,CAAC;AAC1D,WACE,6CAAC,OAAE,WAAW,aAAa,QAAQ,SAAS,SAAS,QAAQ,aAAa,IAAI,IAAI,CAAC,QAChF;AAAA,kBAAY,CAAC,YACZ,6CAAC,OACE;AAAA,0BACC,4CAAC,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,0DAAC,6CAA4B;AAAA,cAC7B,4CAAC,wCACC,sDAAC,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,iBAAiB;AAAA;AAAA,QACnB;AAAA,SACF,IACE;AAAA,MACJ;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,GAAG,QAAQ,SAAS,SAAS,YAAY,QAAQ,aAAa,IAAI,IAAI,aAAa,cAAc,QAAQ;AAAA,UACzG,MAAK;AAAA,UACL,GAAG;AAAA,UACH,OACE,QAAQ,SAAS,SAAS,QAAQ,aAAa,KAAK,cAAc,SAAS,MAAM,cAAc,QAAQ;AAAA,UAEzG,QAAQ;AAAA;AAAA,MACV;AAAA,OACF;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useCallback, useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles.js';\nimport type { DSChartT } from '../../react-desc-prop-types.js';\nimport type { ScaleT } from '../../scales/index.js';\ninterface VerticalScrapperLineProps {\n  rectDetector?: { left: number; right: number };\n  xPosition: number;\n  data: DSChartT.ScrapperDatum[];\n  scrapperPosX: number;\n  setScrapperPosX: (x: number) => void;\n  isGrabbed: boolean;\n  xScale: ScaleT | null;\n  setActivePoint: React.Dispatch<React.SetStateAction<DSChartT.InternalDatum | null>>;\n  innerHeight: number;\n  TooltipRenderer?:\n    | React.ComponentType<{\n        data: {\n          name: string;\n          xValue: string | number | Date | null;\n          yValue: string | number | Date | null;\n          datum: DSChartT.InternalDatum;\n        }[];\n      }>\n    | undefined;\n  scrapper: DSChartT.ScrapperT;\n}\n\nexport const VerticalScrapperLine: React.ComponentType<VerticalScrapperLineProps> = React.memo(\n  ({\n    rectDetector,\n    xPosition,\n    data,\n    scrapperPosX,\n    setScrapperPosX,\n    isGrabbed,\n    xScale,\n    setActivePoint,\n    innerHeight,\n    TooltipRenderer,\n    scrapper,\n  }) => {\n    const theme = useContext(ThemeContext);\n    const [referenceElement, setReferenceElement] = useState<HTMLOrSVGElement | null>();\n    const isActive = scrapperPosX === xPosition;\n    const handleOnMouseEnter = useCallback(() => {\n      if (!isGrabbed) setScrapperPosX(xPosition);\n      setActivePoint(null);\n    }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);\n    // the code was abusing `xScale?.` even in place where it could lead to NaN\n    // I am not sure what the `?.` was solving but xScale typescript says | null\n    //   this line is a monkeypatch to avoid the NaN but it charts should be properly revisited to use typesafe code and algorithms\n    const nonNullXscale = xScale ?? { type: 'notBANDAndEverythingElseIsCurrentlyTreatedTheSame' };\n    return (\n      <g transform={`translate(${nonNullXscale.type === 'BAND' ? nonNullXscale.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 as HTMLElement}\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={\n            nonNullXscale.type === 'BAND'\n              ? xPosition - nonNullXscale.getBandwidth() / 2\n              : xPosition - (rectDetector?.left ?? 0)\n          }\n          fill=\"transparent\"\n          y={0}\n          width={\n            nonNullXscale.type === 'BAND'\n              ? nonNullXscale.getBandwidth()\n              : (rectDetector?.right ?? 0) + (rectDetector?.left ?? 0)\n          }\n          height={innerHeight}\n        />\n      </g>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6DP;AA5DhB,mBAAyD;AACzD,yBAA2B;AAC3B,uBAA6B;AAC7B,oBAAoE;AA0B7D,MAAM,uBAAuE,aAAAA,QAAM;AAAA,EACxF,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,YAAQ,yBAAW,6BAAY;AACrC,UAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAkC;AAClF,UAAM,WAAW,iBAAiB;AAClC,UAAM,yBAAqB,0BAAY,MAAM;AAC3C,UAAI,CAAC,UAAW,iBAAgB,SAAS;AACzC,qBAAe,IAAI;AAAA,IACrB,GAAG,CAAC,WAAW,gBAAgB,iBAAiB,SAAS,CAAC;AAI1D,UAAM,gBAAgB,UAAU,EAAE,MAAM,oDAAoD;AAC5F,WACE,6CAAC,OAAE,WAAW,aAAa,cAAc,SAAS,SAAS,cAAc,aAAa,IAAI,IAAI,CAAC,QAC5F;AAAA,kBAAY,CAAC,YACZ,6CAAC,OACE;AAAA,0BACC,4CAAC,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,0DAAC,6CAA4B;AAAA,cAC7B,4CAAC,wCACC,sDAAC,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,iBAAgB;AAAA;AAAA,QAClB;AAAA,SACF,IACE;AAAA,MACJ;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,GACE,cAAc,SAAS,SACnB,YAAY,cAAc,aAAa,IAAI,IAC3C,aAAa,cAAc,QAAQ;AAAA,UAEzC,MAAK;AAAA,UACL,GAAG;AAAA,UACH,OACE,cAAc,SAAS,SACnB,cAAc,aAAa,KAC1B,cAAc,SAAS,MAAM,cAAc,QAAQ;AAAA,UAE1D,QAAQ;AAAA;AAAA,MACV;AAAA,OACF;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -96,7 +96,7 @@ const ScrollableContainerX = () => {
       const diff = Math.abs(zoomStartingPosition - endingPosition);
       if (diff <= 0) return;
       const newRatio = innerWidth / (innerWidth * containerRatio / diff) < 40 ? innerWidth / 40 : innerWidth * containerRatio / diff;
-      const newPosition = lastScrollbarPosition?.current + (zoomStartingPosition > endingPosition ? endingPosition : zoomStartingPosition) / containerRatio;
+      const newPosition = lastScrollbarPosition.current + (zoomStartingPosition > endingPosition ? endingPosition : zoomStartingPosition) / containerRatio;
       if (newPosition > innerWidth - innerWidth / newRatio) setXScrollbarPosition(innerWidth - innerWidth / newRatio);
       else setXScrollbarPosition(newPosition);
       setContainerRatio(newRatio);

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, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext.js';\nimport { AxisBottom } from '../Axis/AxisBottom.js';\nimport { SeriesFactory } from '../SeriesFactory.js';\nimport { ScrollBarX } from './ScrollBarX.js';\nimport { Scrapper } from '../Scrapper/Scrapper.js';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper.js';\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    lastScrollbarPosition,\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 && scrapper?.type === 'horizontal') return <Scrapper />;\n    if (scrapper && scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper]);\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        lastScrollbarPosition?.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      lastScrollbarPosition.current = newPosition;\n      e.stopPropagation();\n    },\n    [\n      isZooming,\n      setIsZooming,\n      setMovingPosition,\n      getRealClientX,\n      zoomStartingPosition,\n      innerWidth,\n      containerRatio,\n      lastScrollbarPosition,\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext.js';\nimport { AxisBottom } from '../Axis/AxisBottom.js';\nimport { SeriesFactory } from '../SeriesFactory.js';\nimport { ScrollBarX } from './ScrollBarX.js';\nimport { Scrapper } from '../Scrapper/Scrapper.js';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper.js';\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    lastScrollbarPosition,\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 && scrapper?.type === 'horizontal') return <Scrapper />;\n    if (scrapper && scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper]);\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        lastScrollbarPosition.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      lastScrollbarPosition.current = newPosition;\n      e.stopPropagation();\n    },\n    [\n      isZooming,\n      setIsZooming,\n      setMovingPosition,\n      getRealClientX,\n      zoomStartingPosition,\n      innerWidth,\n      containerRatio,\n      lastScrollbarPosition,\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -49,7 +49,7 @@ const ScrollableContainerY = () => {
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const Scrappers = (0, import_react.useMemo)(() => {
     if (scrapper?.type === "horizontal") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Scrapper.Scrapper, {});
-    else if (scrapper?.type === "vertical") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VerticalScrapper.VerticalScrapper, {});
+    if (scrapper?.type === "vertical") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VerticalScrapper.VerticalScrapper, {});
     return null;
   }, [scrapper?.type]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: "scrollable-container-y", children: [

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.js';\nimport { SeriesFactory } from '../SeriesFactory.js';\nimport { ScrollBarY } from './ScrollBarY.js';\nimport { Scrapper } from '../Scrapper/Scrapper.js';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper.js';\nimport { AxisLeft } from '../Axis/AxisLeft.js';\nexport const ScrollableContainerY = () => {\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    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    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkByB;AAhBhD,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,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS,aAAc,QAAO,4CAAC,4BAAS;AAAA,aAC7C,UAAU,SAAS,WAAY,QAAO,4CAAC,4CAAiB;AACjE,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE,6CAAC,OAAE,WAAU,0BACX;AAAA,gDAAC,OAAE,MAAM,eAAe,OAAO,KAC7B,uDAAC,OAAE,WAAW,eAAe,CAAC,qBAAqB,cAAc,KAC/D;AAAA,kDAAC,sCAAc;AAAA,MACd;AAAA,MACD,4CAAC,4BAAS;AAAA,OACZ,GACF;AAAA,IACA,4CAAC,gCAAW;AAAA,KACd;AAEJ;",
+  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext.js';\nimport { SeriesFactory } from '../SeriesFactory.js';\nimport { ScrollBarY } from './ScrollBarY.js';\nimport { Scrapper } from '../Scrapper/Scrapper.js';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper.js';\nimport { AxisLeft } from '../Axis/AxisLeft.js';\nexport const ScrollableContainerY = () => {\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-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    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkByB;AAhBhD,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,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS,aAAc,QAAO,4CAAC,4BAAS;AACtD,QAAI,UAAU,SAAS,WAAY,QAAO,4CAAC,4CAAiB;AAC5D,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE,6CAAC,OAAE,WAAU,0BACX;AAAA,gDAAC,OAAE,MAAM,eAAe,OAAO,KAC7B,uDAAC,OAAE,WAAW,eAAe,CAAC,qBAAqB,cAAc,KAC/D;AAAA,kDAAC,sCAAc;AAAA,MACd;AAAA,MACD,4CAAC,4BAAS;AAAA,OACZ,GACF;AAAA,IACA,4CAAC,gCAAW;AAAA,KACd;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/scales/index.js

@@ -59,6 +59,8 @@ const getInterval = (interval) => {
   }
 };
 class Scale {
+  scale;
+  type;
   constructor(scale) {
     this.type = "";
     this.scale = scale;
@@ -68,6 +70,9 @@ class Scale {
   }
 }
 class BandScale extends Scale {
+  type;
+  scale;
+  axisProps;
   constructor(scale, axisProps) {
     super(scale);
     this.scale = scale;
@@ -96,6 +101,9 @@ class BandScale extends Scale {
   }
 }
 class LinearScale extends Scale {
+  type;
+  scale;
+  axisProps;
   constructor(scale, axisProps) {
     super(scale);
     this.scale = scale;
@@ -135,6 +143,9 @@ class LinearScale extends Scale {
   }
 }
 class LogScale extends LinearScale {
+  type;
+  scale;
+  axisProps;
   constructor(scale, axisProps) {
     super(scale, axisProps);
     this.scale = scale;
@@ -153,6 +164,9 @@ class LogScale extends LinearScale {
   }
 }
 class TimeLinearScale extends Scale {
+  type;
+  scale;
+  axisProps;
   constructor(scale, axisProps) {
     super(scale);
     this.scale = scale;

package/dist/cjs/graphs/Chart/scales/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/scales/index.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { ScaleBand, ScaleLinear, ScaleLogarithmic, ScaleTime } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types.js';\nimport { timeFormat, format, utcDay, utcMonth, utcWeek, utcYear } from 'd3';\n\nexport const AXIS_TYPE = {\n  BAND: 'BAND',\n  LINEAR: 'LINEAR',\n  DATETIME: 'DATETIME',\n  LOG: 'LOG',\n} as const;\n\nconst getInterval = (interval?: string) => {\n  switch (interval) {\n    case 'DAY':\n      return utcDay;\n    case 'MONTH':\n      return utcMonth;\n    case 'WEEK':\n      return utcWeek;\n    case 'YEAR':\n      return utcYear;\n    default:\n      return null;\n  }\n};\n\nexport class Scale {\n  scale: ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;\n\n  type: string;\n\n  constructor(scale: ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>) {\n    this.type = '';\n    this.scale = scale;\n  }\n\n  getBandwidth() {\n    return 0;\n  }\n}\nexport class BandScale extends Scale {\n  type: keyof typeof AXIS_TYPE;\n\n  scale: ScaleBand<string>;\n\n  axisProps: DSChartT.AxisT;\n\n  constructor(scale: ScaleBand<string>, axisProps: DSChartT.AxisT) {\n    super(scale);\n    this.scale = scale;\n    this.type = 'BAND';\n    this.axisProps = axisProps;\n  }\n\n  get(value: string) {\n    if (typeof value !== 'string') return 0;\n    return this.scale(value);\n  }\n\n  getTicks() {\n    return this.scale.domain();\n  }\n\n  getTickFormatted(t: number | string | Date) {\n    if (typeof t !== 'string') return t;\n    if (typeof this.axisProps?.tick?.tickFormat === 'function') {\n      return this.axisProps?.tick?.tickFormat(t);\n    }\n    return t;\n  }\n\n  getTicksScaled() {\n    return this.scale.domain().map((d) => (this.get(d) ?? 0) + this.getBandwidth() / 2);\n  }\n\n  getBandwidth() {\n    return this.scale.bandwidth();\n  }\n}\n\nexport class LinearScale extends Scale {\n  type: keyof typeof AXIS_TYPE;\n\n  scale: ScaleLinear<number, number, never>;\n\n  axisProps: DSChartT.AxisT;\n\n  constructor(scale: ScaleLinear<number, number, never>, axisProps: DSChartT.AxisT) {\n    super(scale);\n    this.scale = scale;\n    this.type = 'LINEAR';\n    this.axisProps = axisProps;\n  }\n\n  get(value: number) {\n    if (typeof value !== 'number') return 0;\n    return this.scale(value);\n  }\n\n  getTickFormatted(t: number | string | Date) {\n    if (typeof t !== 'number') return t.toString();\n    if (typeof this.axisProps?.tick?.tickFormat === 'function') {\n      return this.axisProps?.tick?.tickFormat(t);\n    }\n    if (typeof this.axisProps?.tick?.tickFormat === 'string') {\n      return format(this.axisProps?.tick?.tickFormat)(t);\n    }\n    return t.toString();\n  }\n\n  getTicks(dimension: number) {\n    const ticks = this.scale.ticks?.(this.axisProps?.tick?.tickCount ?? Math.ceil(dimension / 80));\n    if (this.axisProps?.tick?.tickValues) {\n      if (this.axisProps?.tick?.overwriteTicks) return this.axisProps?.tick?.tickValues;\n      this.axisProps?.tick?.tickValues.forEach((t) => {\n        if (typeof t !== 'number') return;\n        const isTickAlreadyPresent = ticks.find((tick) => tick === t);\n        if (isTickAlreadyPresent) return;\n        ticks.push(t);\n      });\n    }\n    return ticks;\n  }\n\n  getTicksScaled(dimension: number) {\n    const ticks = this.getTicks(dimension);\n    return ticks.map((t) => (typeof t === 'number' ? this.get(t) : 0));\n  }\n}\n\nexport class LogScale extends LinearScale {\n  type: keyof typeof AXIS_TYPE;\n\n  scale: ScaleLogarithmic<number, number, never>;\n\n  axisProps: DSChartT.AxisT;\n\n  constructor(scale: ScaleLogarithmic<number, number, never>, axisProps: DSChartT.AxisT) {\n    super(scale, axisProps);\n    this.scale = scale;\n    this.type = 'LOG';\n    this.axisProps = axisProps;\n  }\n\n  getTickFormatted(t: number | string | Date) {\n    if (typeof t !== 'number') return t.toString();\n    if (typeof this.axisProps?.tick?.tickFormat === 'function') {\n      return this.axisProps?.tick?.tickFormat(t);\n    }\n    if (typeof this.axisProps?.tick?.tickFormat === 'string') {\n      return format(this.axisProps?.tick?.tickFormat)(t);\n    }\n    return format('~s')(t);\n  }\n}\n\nexport class TimeLinearScale extends Scale {\n  type: keyof typeof AXIS_TYPE;\n\n  scale: ScaleTime<number, number, never>;\n\n  axisProps: DSChartT.AxisT;\n\n  constructor(scale: ScaleTime<number, number, never>, axisProps: DSChartT.AxisT) {\n    super(scale);\n    this.scale = scale;\n    this.type = 'DATETIME';\n    this.axisProps = axisProps;\n  }\n\n  get(value: Date) {\n    if (typeof value !== 'object') return 0;\n    return this.scale(value);\n  }\n\n  getTickFormatted(t: number | string | Date) {\n    if (typeof t !== 'object') return t.toString();\n    if (typeof this.axisProps?.tick?.tickFormat === 'function') {\n      return this.axisProps?.tick?.tickFormat(t);\n    }\n    if (typeof this.axisProps?.tick?.tickFormat === 'string') {\n      return timeFormat(this.axisProps?.tick?.tickFormat)(t);\n    }\n    return t.toString();\n  }\n\n  getTicks(dimension: number, intervalType?: string) {\n    const interval = getInterval(intervalType);\n    const finalTickConfig = interval || (this.axisProps?.tick?.tickCount ?? Math.ceil(dimension / 80));\n    const ticks = this.scale.ticks?.(finalTickConfig as number);\n    const ticksValues = this.axisProps?.tick?.tickValues;\n    if (ticksValues) {\n      if (this.axisProps?.tick?.overwriteTicks) return ticksValues;\n      const newTicks = [] as Date[];\n      ticks.forEach((t) => {\n        if (typeof t !== 'object') return;\n        const exists = ticksValues.some(\n          (tickValue) => typeof tickValue === 'object' && tickValue.getTime() === t.getTime(),\n        );\n        if (!exists) newTicks.push(t);\n      });\n      return [...newTicks, ...ticksValues];\n    }\n    return ticks;\n  }\n\n  getTicksScaled(dimension: number, intervalType?: string) {\n    const ticks = this.getTicks(dimension, intervalType);\n    return ticks.map((t) => (typeof t === 'object' ? this.get(t) : 0));\n  }\n}\n\nexport type ScaleT = BandScale | LinearScale | TimeLinearScale;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-classes-per-file */\n/* eslint-disable max-lines */\nimport type { ScaleBand, ScaleLinear, ScaleLogarithmic, ScaleTime } from 'd3';\nimport { timeFormat, format, utcDay, utcMonth, utcWeek, utcYear } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types.js';\n\nexport const AXIS_TYPE = {\n  BAND: 'BAND',\n  LINEAR: 'LINEAR',\n  DATETIME: 'DATETIME',\n  LOG: 'LOG',\n} as const;\n\nconst getInterval = (interval?: string) => {\n  switch (interval) {\n    case 'DAY':\n      return utcDay;\n    case 'MONTH':\n      return utcMonth;\n    case 'WEEK':\n      return utcWeek;\n    case 'YEAR':\n      return utcYear;\n    default:\n      return null;\n  }\n};\n\nexport class Scale {\n  scale: ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;\n\n  type: string;\n\n  constructor(scale: ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>) {\n    this.type = '';\n    this.scale = scale;\n  }\n\n  getBandwidth() {\n    return 0;\n  }\n}\nexport class BandScale extends Scale {\n  type: keyof typeof AXIS_TYPE;\n\n  scale: ScaleBand<string>;\n\n  axisProps: DSChartT.AxisT;\n\n  constructor(scale: ScaleBand<string>, axisProps: DSChartT.AxisT) {\n    super(scale);\n    this.scale = scale;\n    this.type = 'BAND';\n    this.axisProps = axisProps;\n  }\n\n  get(value: string) {\n    if (typeof value !== 'string') return 0;\n    return this.scale(value);\n  }\n\n  getTicks() {\n    return this.scale.domain();\n  }\n\n  getTickFormatted(t: number | string | Date) {\n    if (typeof t !== 'string') return t;\n    if (typeof this.axisProps?.tick?.tickFormat === 'function') {\n      return this.axisProps?.tick?.tickFormat(t);\n    }\n    return t;\n  }\n\n  getTicksScaled() {\n    return this.scale.domain().map((d) => (this.get(d) ?? 0) + this.getBandwidth() / 2);\n  }\n\n  getBandwidth() {\n    return this.scale.bandwidth();\n  }\n}\n\nexport class LinearScale extends Scale {\n  type: keyof typeof AXIS_TYPE;\n\n  scale: ScaleLinear<number, number, never>;\n\n  axisProps: DSChartT.AxisT;\n\n  constructor(scale: ScaleLinear<number, number, never>, axisProps: DSChartT.AxisT) {\n    super(scale);\n    this.scale = scale;\n    this.type = 'LINEAR';\n    this.axisProps = axisProps;\n  }\n\n  get(value: number) {\n    if (typeof value !== 'number') return 0;\n    return this.scale(value);\n  }\n\n  getTickFormatted(t: number | string | Date) {\n    if (typeof t !== 'number') return t.toString();\n    if (typeof this.axisProps?.tick?.tickFormat === 'function') {\n      return this.axisProps?.tick?.tickFormat(t);\n    }\n    if (typeof this.axisProps?.tick?.tickFormat === 'string') {\n      return format(this.axisProps?.tick?.tickFormat)(t);\n    }\n    return t.toString();\n  }\n\n  getTicks(dimension: number) {\n    const ticks = this.scale.ticks?.(this.axisProps?.tick?.tickCount ?? Math.ceil(dimension / 80));\n    if (this.axisProps?.tick?.tickValues) {\n      if (this.axisProps?.tick?.overwriteTicks) return this.axisProps?.tick?.tickValues;\n      this.axisProps?.tick?.tickValues.forEach((t) => {\n        if (typeof t !== 'number') return;\n        const isTickAlreadyPresent = ticks.find((tick) => tick === t);\n        if (isTickAlreadyPresent) return;\n        ticks.push(t);\n      });\n    }\n    return ticks;\n  }\n\n  getTicksScaled(dimension: number) {\n    const ticks = this.getTicks(dimension);\n    return ticks.map((t) => (typeof t === 'number' ? this.get(t) : 0));\n  }\n}\n\nexport class LogScale extends LinearScale {\n  type: keyof typeof AXIS_TYPE;\n\n  scale: ScaleLogarithmic<number, number, never>;\n\n  axisProps: DSChartT.AxisT;\n\n  constructor(scale: ScaleLogarithmic<number, number, never>, axisProps: DSChartT.AxisT) {\n    super(scale, axisProps);\n    this.scale = scale;\n    this.type = 'LOG';\n    this.axisProps = axisProps;\n  }\n\n  getTickFormatted(t: number | string | Date) {\n    if (typeof t !== 'number') return t.toString();\n    if (typeof this.axisProps?.tick?.tickFormat === 'function') {\n      return this.axisProps?.tick?.tickFormat(t);\n    }\n    if (typeof this.axisProps?.tick?.tickFormat === 'string') {\n      return format(this.axisProps?.tick?.tickFormat)(t);\n    }\n    return format('~s')(t);\n  }\n}\n\nexport class TimeLinearScale extends Scale {\n  type: keyof typeof AXIS_TYPE;\n\n  scale: ScaleTime<number, number, never>;\n\n  axisProps: DSChartT.AxisT;\n\n  constructor(scale: ScaleTime<number, number, never>, axisProps: DSChartT.AxisT) {\n    super(scale);\n    this.scale = scale;\n    this.type = 'DATETIME';\n    this.axisProps = axisProps;\n  }\n\n  get(value: Date) {\n    if (typeof value !== 'object') return 0;\n    return this.scale(value);\n  }\n\n  getTickFormatted(t: number | string | Date) {\n    if (typeof t !== 'object') return t.toString();\n    if (typeof this.axisProps?.tick?.tickFormat === 'function') {\n      return this.axisProps?.tick?.tickFormat(t);\n    }\n    if (typeof this.axisProps?.tick?.tickFormat === 'string') {\n      return timeFormat(this.axisProps?.tick?.tickFormat)(t);\n    }\n    return t.toString();\n  }\n\n  getTicks(dimension: number, intervalType?: string) {\n    const interval = getInterval(intervalType);\n    const finalTickConfig = interval || (this.axisProps?.tick?.tickCount ?? Math.ceil(dimension / 80));\n    const ticks = this.scale.ticks?.(finalTickConfig as number);\n    const ticksValues = this.axisProps?.tick?.tickValues;\n    if (ticksValues) {\n      if (this.axisProps?.tick?.overwriteTicks) return ticksValues;\n      const newTicks = [] as Date[];\n      ticks.forEach((t) => {\n        if (typeof t !== 'object') return;\n        const exists = ticksValues.some(\n          (tickValue) => typeof tickValue === 'object' && tickValue.getTime() === t.getTime(),\n        );\n        if (!exists) newTicks.push(t);\n      });\n      return [...newTicks, ...ticksValues];\n    }\n    return ticks;\n  }\n\n  getTicksScaled(dimension: number, intervalType?: string) {\n    const ticks = this.getTicks(dimension, intervalType);\n    return ticks.map((t) => (typeof t === 'object' ? this.get(t) : 0));\n  }\n}\n\nexport type ScaleT = BandScale | LinearScale | TimeLinearScale;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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, useMemo } from 'react';\nimport { Rect } from './Rect.js';\nimport { ChartContext } from '../ChartContext.js';\nimport { getStackedData, getStackedIndex } from '../helpers/index.js';\nimport type { DSChartT } from '../react-desc-prop-types.js';\n\nexport const HorizontalStackedBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const {\n    props: { groups },\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getXScaleValue,\n    getYValue,\n  } = useContext(ChartContext);\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n\n  return useMemo(\n    () => (\n      <g>\n        {serie.data.map((bar, i) => {\n          const sequence = serieWithStackedValues ? serieWithStackedValues[bar.position] : [0, 0];\n          const sequence0 = getXScaleValue(sequence[0]);\n          const sequence1 = getXScaleValue(sequence[1]);\n          const isFloorStack = sequence[0] === 0;\n          const xValue = sequence[1] - sequence[0];\n          const yValue = getYValue(serie.data[i]) as number;\n\n          const width = sequence1 - sequence0 - (!isFloorStack ? 2 : 0);\n\n          const height = subGroupScale?.bandwidth() ?? 0;\n          const transformX = sequence0 + (!isFloorStack ? 2 : 0);\n          const transformY =\n            (subGroupScale ? subGroupScale(`stacked-data-${stackIndex}`) ?? 0 : 0) +\n            (yScale?.get(yValue as never) ?? 0);\n          return (\n            <g key={serie.data[i]?.key} clipPath={`url(#rect-focus-ring-${chartId})`}>\n              <g fill={colorScale(serie.name) as string} 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      chartId,\n      colorScale,\n      getXScaleValue,\n      getYValue,\n      serie.data,\n      serie.name,\n      serieWithStackedValues,\n      stackIndex,\n      subGroupScale,\n      yScale,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CP;AAzChB,mBAA2C;AAC3C,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;AAErD,aAAO;AAAA,IACL,MACE,4CAAC,OACE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,WAAW,yBAAyB,uBAAuB,IAAI,QAAQ,IAAI,CAAC,GAAG,CAAC;AACtF,YAAM,YAAY,eAAe,SAAS,CAAC,CAAC;AAC5C,YAAM,YAAY,eAAe,SAAS,CAAC,CAAC;AAC5C,YAAM,eAAe,SAAS,CAAC,MAAM;AACrC,YAAM,SAAS,SAAS,CAAC,IAAI,SAAS,CAAC;AACvC,YAAM,SAAS,UAAU,MAAM,KAAK,CAAC,CAAC;AAEtC,YAAM,QAAQ,YAAY,aAAa,CAAC,eAAe,IAAI;AAE3D,YAAM,SAAS,eAAe,UAAU,KAAK;AAC7C,YAAM,aAAa,aAAa,CAAC,eAAe,IAAI;AACpD,YAAM,cACH,gBAAgB,cAAc,gBAAgB,UAAU,EAAE,KAAK,IAAI,MACnE,QAAQ,IAAI,MAAe,KAAK;AACnC,aACE,4CAAC,OAA2B,UAAU,wBAAwB,OAAO,KACnE,sDAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAAa,WAAW,gBAAgB,UAAU,KAC9E;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,GAAG;AAAA,UACH;AAAA,UACA;AAAA,UACA,IAAI,MAAM,KAAK,CAAC,GAAG;AAAA,UACnB,MAAM,MAAM;AAAA,UACZ,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA,MACrB,GACF,KAZM,MAAM,KAAK,CAAC,GAAG,GAavB;AAAA,IAEJ,CAAC,GACH;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport { Rect } from './Rect.js';\nimport { ChartContext } from '../ChartContext.js';\nimport { getStackedData, getStackedIndex } from '../helpers/index.js';\nimport type { DSChartT } from '../react-desc-prop-types.js';\n\nexport const HorizontalStackedBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const {\n    props: { groups },\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getXScaleValue,\n    getYValue,\n  } = useContext(ChartContext);\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n\n  return useMemo(\n    () => (\n      <g>\n        {serie.data.map((bar, i) => {\n          const sequence = serieWithStackedValues ? serieWithStackedValues[bar.position] : [0, 0];\n          const sequence0 = getXScaleValue(sequence[0]);\n          const sequence1 = getXScaleValue(sequence[1]);\n          const isFloorStack = sequence[0] === 0;\n          const xValue = sequence[1] - sequence[0];\n          const yValue = getYValue(serie.data[i]) as number;\n\n          const width = sequence1 - sequence0 - (!isFloorStack ? 2 : 0);\n\n          const height = subGroupScale?.bandwidth() ?? 0;\n          const transformX = sequence0 + (!isFloorStack ? 2 : 0);\n          const transformY =\n            (subGroupScale ? (subGroupScale(`stacked-data-${stackIndex}`) ?? 0) : 0) +\n            (yScale?.get(yValue as never) ?? 0);\n          return (\n            <g key={serie.data[i]?.key} clipPath={`url(#rect-focus-ring-${chartId})`}>\n              <g fill={colorScale(serie.name) as string} 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      chartId,\n      colorScale,\n      getXScaleValue,\n      getYValue,\n      serie.data,\n      serie.name,\n      serieWithStackedValues,\n      stackIndex,\n      subGroupScale,\n      yScale,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CP;AAzChB,mBAA2C;AAC3C,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;AAErD,aAAO;AAAA,IACL,MACE,4CAAC,OACE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,WAAW,yBAAyB,uBAAuB,IAAI,QAAQ,IAAI,CAAC,GAAG,CAAC;AACtF,YAAM,YAAY,eAAe,SAAS,CAAC,CAAC;AAC5C,YAAM,YAAY,eAAe,SAAS,CAAC,CAAC;AAC5C,YAAM,eAAe,SAAS,CAAC,MAAM;AACrC,YAAM,SAAS,SAAS,CAAC,IAAI,SAAS,CAAC;AACvC,YAAM,SAAS,UAAU,MAAM,KAAK,CAAC,CAAC;AAEtC,YAAM,QAAQ,YAAY,aAAa,CAAC,eAAe,IAAI;AAE3D,YAAM,SAAS,eAAe,UAAU,KAAK;AAC7C,YAAM,aAAa,aAAa,CAAC,eAAe,IAAI;AACpD,YAAM,cACH,gBAAiB,cAAc,gBAAgB,UAAU,EAAE,KAAK,IAAK,MACrE,QAAQ,IAAI,MAAe,KAAK;AACnC,aACE,4CAAC,OAA2B,UAAU,wBAAwB,OAAO,KACnE,sDAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAAa,WAAW,gBAAgB,UAAU,KAC9E;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,GAAG;AAAA,UACH;AAAA,UACA;AAAA,UACA,IAAI,MAAM,KAAK,CAAC,GAAG;AAAA,UACnB,MAAM,MAAM;AAAA,UACZ,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA,MACrB,GACF,KAZM,MAAM,KAAK,CAAC,GAAG,GAavB;AAAA,IAEJ,CAAC,GACH;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/StackedBar.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Rect } from './Rect.js';\nimport { ChartContext } from '../ChartContext.js';\nimport { getStackedData, getStackedIndex } from '../helpers/index.js';\nimport type { DSChartT } from '../react-desc-prop-types.js';\n\nexport const StackedBar: React.ComponentType<DSChartT.SerieComponentT> = ({ serie }) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getXValue,\n    getXScaleValue,\n  } = useContext(ChartContext);\n\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g clipPath={`url(#rect-focus-ring-${chartId})`}>\n      {serie.data.map((bar, i) => {\n        const sequence = serieWithStackedValues ? serieWithStackedValues[bar.position] : [0, 0];\n\n        const isFloorStack = sequence[0] === 0;\n\n        const xValue = getXValue(bar) as number;\n        const xScaleValue = getXScaleValue(bar) ?? 0;\n        const yValue = sequence[1] - sequence[0];\n        const width = subGroupScale?.bandwidth() ?? 0;\n        const height =\n          (yScale?.get(sequence[0] as never) ?? 0) - (yScale?.get(sequence[1] as never) ?? 0) - (!isFloorStack ? 1 : 0);\n        const transformY = (yScale?.get(sequence[1] as never) ?? 0) + (sequence[0] < 0 ? 2 : 0);\n\n        const transformX =\n          xScale?.type !== 'BAND'\n            ? xScaleValue - width / 2\n            : xScaleValue + (subGroupScale ? subGroupScale(`stacked-data-${stackIndex}`) ?? 0 : 0);\n        return (\n          <g key={serie.data[i].key} fill={colorScale(serie.name) as string} transform={`translate(${transformX},0)`}>\n            <Rect\n              width={width}\n              height={height}\n              xValue={xValue}\n              yValue={yValue}\n              y={transformY}\n              id={serie.data[i].key}\n              name={serie.name}\n              datum={bar}\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;AD2CX;AA1CZ,mBAAkC;AAClC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAGzC,MAAM,aAA4D,CAAC,EAAE,MAAM,MAAM;AACtF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAM,iBAAa,gCAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,4CAAC,OAAE,UAAU,wBAAwB,OAAO,KACzC,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,UAAM,WAAW,yBAAyB,uBAAuB,IAAI,QAAQ,IAAI,CAAC,GAAG,CAAC;AAEtF,UAAM,eAAe,SAAS,CAAC,MAAM;AAErC,UAAM,SAAS,UAAU,GAAG;AAC5B,UAAM,cAAc,eAAe,GAAG,KAAK;AAC3C,UAAM,SAAS,SAAS,CAAC,IAAI,SAAS,CAAC;AACvC,UAAM,QAAQ,eAAe,UAAU,KAAK;AAC5C,UAAM,UACH,QAAQ,IAAI,SAAS,CAAC,CAAU,KAAK,MAAM,QAAQ,IAAI,SAAS,CAAC,CAAU,KAAK,MAAM,CAAC,eAAe,IAAI;AAC7G,UAAM,cAAc,QAAQ,IAAI,SAAS,CAAC,CAAU,KAAK,MAAM,SAAS,CAAC,IAAI,IAAI,IAAI;AAErF,UAAM,aACJ,QAAQ,SAAS,SACb,cAAc,QAAQ,IACtB,eAAe,gBAAgB,cAAc,gBAAgB,UAAU,EAAE,KAAK,IAAI;AACxF,WACE,4CAAC,OAA0B,MAAM,WAAW,MAAM,IAAI,GAAa,WAAW,aAAa,UAAU,OACnG;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,QACH,IAAI,MAAM,KAAK,CAAC,EAAE;AAAA,QAClB,MAAM,MAAM;AAAA,QACZ,OAAO;AAAA;AAAA,IACT,KAVM,MAAM,KAAK,CAAC,EAAE,GAWtB;AAAA,EAEJ,CAAC,GACH;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Rect } from './Rect.js';\nimport { ChartContext } from '../ChartContext.js';\nimport { getStackedData, getStackedIndex } from '../helpers/index.js';\nimport type { DSChartT } from '../react-desc-prop-types.js';\n\nexport const StackedBar: React.ComponentType<DSChartT.SerieComponentT> = ({ serie }) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getXValue,\n    getXScaleValue,\n  } = useContext(ChartContext);\n\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g clipPath={`url(#rect-focus-ring-${chartId})`}>\n      {serie.data.map((bar, i) => {\n        const sequence = serieWithStackedValues ? serieWithStackedValues[bar.position] : [0, 0];\n\n        const isFloorStack = sequence[0] === 0;\n\n        const xValue = getXValue(bar) as number;\n        const xScaleValue = getXScaleValue(bar) ?? 0;\n        const yValue = sequence[1] - sequence[0];\n        const width = subGroupScale?.bandwidth() ?? 0;\n        const height =\n          (yScale?.get(sequence[0] as never) ?? 0) - (yScale?.get(sequence[1] as never) ?? 0) - (!isFloorStack ? 1 : 0);\n        const transformY = (yScale?.get(sequence[1] as never) ?? 0) + (sequence[0] < 0 ? 2 : 0);\n\n        const transformX =\n          xScale?.type !== 'BAND'\n            ? xScaleValue - width / 2\n            : xScaleValue + (subGroupScale ? (subGroupScale(`stacked-data-${stackIndex}`) ?? 0) : 0);\n        return (\n          <g key={serie.data[i].key} fill={colorScale(serie.name) as string} transform={`translate(${transformX},0)`}>\n            <Rect\n              width={width}\n              height={height}\n              xValue={xValue}\n              yValue={yValue}\n              y={transformY}\n              id={serie.data[i].key}\n              name={serie.name}\n              datum={bar}\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;AD2CX;AA1CZ,mBAAkC;AAClC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAGzC,MAAM,aAA4D,CAAC,EAAE,MAAM,MAAM;AACtF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAM,iBAAa,gCAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,4CAAC,OAAE,UAAU,wBAAwB,OAAO,KACzC,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,UAAM,WAAW,yBAAyB,uBAAuB,IAAI,QAAQ,IAAI,CAAC,GAAG,CAAC;AAEtF,UAAM,eAAe,SAAS,CAAC,MAAM;AAErC,UAAM,SAAS,UAAU,GAAG;AAC5B,UAAM,cAAc,eAAe,GAAG,KAAK;AAC3C,UAAM,SAAS,SAAS,CAAC,IAAI,SAAS,CAAC;AACvC,UAAM,QAAQ,eAAe,UAAU,KAAK;AAC5C,UAAM,UACH,QAAQ,IAAI,SAAS,CAAC,CAAU,KAAK,MAAM,QAAQ,IAAI,SAAS,CAAC,CAAU,KAAK,MAAM,CAAC,eAAe,IAAI;AAC7G,UAAM,cAAc,QAAQ,IAAI,SAAS,CAAC,CAAU,KAAK,MAAM,SAAS,CAAC,IAAI,IAAI,IAAI;AAErF,UAAM,aACJ,QAAQ,SAAS,SACb,cAAc,QAAQ,IACtB,eAAe,gBAAiB,cAAc,gBAAgB,UAAU,EAAE,KAAK,IAAK;AAC1F,WACE,4CAAC,OAA0B,MAAM,WAAW,MAAM,IAAI,GAAa,WAAW,aAAa,UAAU,OACnG;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,QACH,IAAI,MAAM,KAAK,CAAC,EAAE;AAAA,QAClB,MAAM,MAAM;AAAA,QACZ,OAAO;AAAA;AAAA,IACT,KAVM,MAAM,KAAK,CAAC,EAAE,GAWtB;AAAA,EAEJ,CAAC,GACH;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/styles.js

@@ -76,10 +76,11 @@ const StyledGrid = (0, import_ds_system.styled)("g")`
     opacity: 0.2;
   }
 `;
-const StyleFocusableRegion = (0, import_ds_system.styled)("div")`
-  width: ${({ s }) => s !== null && s !== void 0 ? s * 2 : "1"}px;
-  height: ${({ s }) => s !== null && s !== void 0 ? s * 2 : "1"}px;
-  :focus {
+const StyleFocusableRegion = import_ds_system.styled.div`
+  width: ${({ size = 1 }) => size * 2}px;
+  height: ${({ size = 1 }) => size * 2}px;
+  outline: none;
+  &:focus {
     outline: none;
   }
 `;

package/dist/cjs/graphs/Chart/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/graphs/Chart/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\ninterface StyledAxisT {\n  axisColor: string;\n}\nexport const StyledSVGWrapper = styled.div<{ isGrabbed: boolean }>`\n  rect:focus,\n  rect:focus-visible,\n  circle:focus,\n  circle:focus-visible {\n    outline: none;\n  }\n\n  :focus,\n  :focus-visible {\n    outline: none;\n  }\n\n  cursor: ${({ isGrabbed }) => (isGrabbed ? 'grabbing' : 'default')};\n\n  text {\n    font-size: 1rem;\n  }\n\n  min-width: 300px;\n`;\n\nexport const StyledAxis = styled('line')<StyledAxisT>`\n  stroke-width: 2px;\n  stroke: ${({ theme }) => theme.colors.neutral['700']};\n  ${({ axisColor }) => (axisColor ? `stroke: ${axisColor}` : '')}\n`;\n\nexport const StyledAxisLabel = styled('text')`\n  font-size: 1rem;\n  font-weight: 600;\n`;\n\nexport const StyledGrid = styled('g')`\n  line {\n    opacity: 0.2;\n  }\n`;\n\nexport const StyleFocusableRegion = styled('div')<{ s?: number }>`\n  width: ${({ s }) => (s !== null && s !== undefined ? s * 2 : '1')}px;\n  height: ${({ s }) => (s !== null && s !== undefined ? s * 2 : '1')}px;\n  :focus {\n    outline: none;\n  }\n`;\n\nexport const StyledLine = styled('path')`\n  fill: none;\n  stroke-width: 3;\n  stroke-linejoin: round;\n`;\nexport const StyledArea = styled('path')`\n  stroke-width: 3;\n  stroke-linejoin: round;\n  opacity: 0.2;\n`;\n\nexport const StyledTooltipContainer = styled.div`\n  max-width: 350px;\n  background-color: white;\n`;\n\nexport const StyledMouseOverDetectionBox = styled.div`\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  width: calc(100% + 30px);\n  height: calc(100% + 30px);\n  z-index: -1;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAKhB,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAa3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS5D,MAAM,iBAAa,yBAAO,MAAM;AAAA;AAAA,YAE3B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,IAClD,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,SAAS,KAAK,EAAG;AAAA;AAGzD,MAAM,sBAAkB,yBAAO,MAAM;AAAA;AAAA;AAAA;AAKrC,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAM,2BAAuB,yBAAO,KAAK;AAAA,WACrC,CAAC,EAAE,EAAE,MAAO,MAAM,QAAQ,MAAM,SAAY,IAAI,IAAI,GAAI;AAAA,YACvD,CAAC,EAAE,EAAE,MAAO,MAAM,QAAQ,MAAM,SAAY,IAAI,IAAI,GAAI;AAAA;AAAA;AAAA;AAAA;AAM7D,MAAM,iBAAa,yBAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAKhC,MAAM,iBAAa,yBAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMhC,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAAA;AAKtC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\ninterface StyledAxisT {\n  axisColor: string;\n}\nexport const StyledSVGWrapper = styled.div<{ isGrabbed: boolean }>`\n  rect:focus,\n  rect:focus-visible,\n  circle:focus,\n  circle:focus-visible {\n    outline: none;\n  }\n\n  :focus,\n  :focus-visible {\n    outline: none;\n  }\n\n  cursor: ${({ isGrabbed }) => (isGrabbed ? 'grabbing' : 'default')};\n\n  text {\n    font-size: 1rem;\n  }\n\n  min-width: 300px;\n`;\n\nexport const StyledAxis = styled('line')<StyledAxisT>`\n  stroke-width: 2px;\n  stroke: ${({ theme }) => theme.colors.neutral['700']};\n  ${({ axisColor }) => (axisColor ? `stroke: ${axisColor}` : '')}\n`;\n\nexport const StyledAxisLabel = styled('text')`\n  font-size: 1rem;\n  font-weight: 600;\n`;\n\nexport const StyledGrid = styled('g')`\n  line {\n    opacity: 0.2;\n  }\n`;\n\nexport const StyleFocusableRegion = styled.div<{ size?: number }>`\n  width: ${({ size = 1 }) => size * 2}px;\n  height: ${({ size = 1 }) => size * 2}px;\n  outline: none;\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const StyledLine = styled('path')`\n  fill: none;\n  stroke-width: 3;\n  stroke-linejoin: round;\n`;\nexport const StyledArea = styled('path')`\n  stroke-width: 3;\n  stroke-linejoin: round;\n  opacity: 0.2;\n`;\n\nexport const StyledTooltipContainer = styled.div`\n  max-width: 350px;\n  background-color: white;\n`;\n\nexport const StyledMouseOverDetectionBox = styled.div`\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  width: calc(100% + 30px);\n  height: calc(100% + 30px);\n  z-index: -1;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAKhB,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAa3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS5D,MAAM,iBAAa,yBAAO,MAAM;AAAA;AAAA,YAE3B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,IAClD,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,SAAS,KAAK,EAAG;AAAA;AAGzD,MAAM,sBAAkB,yBAAO,MAAM;AAAA;AAAA;AAAA;AAKrC,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAM,uBAAuB,wBAAO;AAAA,WAChC,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAAA,YACzB,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/B,MAAM,iBAAa,yBAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAKhC,MAAM,iBAAa,yBAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMhC,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAAA;AAKtC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/graphs/Chart/SingleStackedBar/SingleStackedBar.js

@@ -1,20 +1,20 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React2, { useCallback, useMemo, useState } from "react";
 import { Grid } from "@elliemae/ds-grid";
+import { DSPopperJS } from "@elliemae/ds-popperjs";
 import {
+  describe,
   useGetGlobalAttributes,
   useGetXstyledProps,
   useMemoMergePropsWithDefault,
-  useValidateTypescriptPropTypes,
-  describe
+  useValidateTypescriptPropTypes
 } from "@elliemae/ds-props-helpers";
-import { DSPopperJS } from "@elliemae/ds-popperjs";
 import { mergeRefs } from "@elliemae/ds-system";
-import { COLOR_PALLET } from "../../../index.js";
-import { defaultProps, DSSingleStackedBarPropTypes } from "./react-desc-prop-types.js";
-import { StyledBar, StyledMouseOverDetectionBox, StyledTooltipContainer, Wrapper } from "./styles.js";
+import React2, { useCallback, useMemo, useState } from "react";
+import { COLOR_PALLET } from "../helpers/colorPallet.js";
 import { DSSingleStackedBarName } from "./exported-related/index.js";
+import { DSSingleStackedBarPropTypes, defaultProps } from "./react-desc-prop-types.js";
+import { StyledBar, StyledMouseOverDetectionBox, StyledTooltipContainer, Wrapper } from "./styles.js";
 const Bar = React2.memo((props) => {
   const [referenceElement, setReferenceElement] = useState(null);
   const [isHover, setIsHover] = useState(false);

package/dist/esm/graphs/Chart/SingleStackedBar/SingleStackedBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/SingleStackedBar/SingleStackedBar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useCallback, useMemo, useState, type WeakValidationMap } from 'react';\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { Grid } from '@elliemae/ds-grid';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  describe,\n} from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { COLOR_PALLET } from '../../../index.js';\nimport { type DSSingleStackedBarT, defaultProps, DSSingleStackedBarPropTypes } from './react-desc-prop-types.js';\nimport { StyledBar, StyledMouseOverDetectionBox, StyledTooltipContainer, Wrapper } from './styles.js';\nimport { DSSingleStackedBarName } from './exported-related/index.js';\nconst Bar = React.memo((props: DSSingleStackedBarT.BarT) => {\n  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);\n  const [isHover, setIsHover] = useState(false);\n  const { height, TooltipRenderer, datum, tabIndex, isFocused, borderRadius, bg } = props;\n  const handleRefCallback = useCallback(\n    (_ref: HTMLDivElement | null) => {\n      if (isFocused) {\n        _ref?.focus();\n      }\n    },\n    [isFocused],\n  );\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHover(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHover(false);\n  }, []);\n  return (\n    <div>\n      {(isFocused || isHover) && TooltipRenderer ? (\n        <DSPopperJS referenceElement={referenceElement} showPopover>\n          <StyledMouseOverDetectionBox />\n          <StyledTooltipContainer>\n            <TooltipRenderer datum={datum} />\n          </StyledTooltipContainer>\n        </DSPopperJS>\n      ) : null}\n      <StyledBar\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        bg={bg}\n        height={height}\n        borderRadius={borderRadius}\n        innerRef={mergeRefs(handleRefCallback, setReferenceElement)}\n        tabIndex={tabIndex}\n        role=\"img\"\n        // until uziel work is merged we keep this default value\n        aria-label={`${datum.name} value: ${datum.data}`}\n      />\n    </div>\n  );\n});\n\nconst DSSingleStackedBar: React.ComponentType<DSSingleStackedBarT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSSingleStackedBarT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSSingleStackedBarPropTypes, 'DSSingleStackedBar');\n\n  const globalAttributes = useGetGlobalAttributes<DSSingleStackedBarT.InternalProps, HTMLDivElement, DSGridT.Props>(\n    propsWithDefaults,\n  );\n\n  const xstyledProps = useGetXstyledProps(propsWithDefaults);\n\n  const { data, LegendRenderer, gutter, height } = propsWithDefaults;\n  const [keyBarFocused, setKeyBarFocused] = useState<number>(0);\n  const [isChartFocused, setIsChartFocused] = useState(false);\n\n  const total = useMemo(() => data.map((datum) => datum.data).reduce((acc, curr) => acc + curr, 0), [data]);\n  const cols = useMemo(() => data.map((datum) => `${Math.ceil(datum.data * 100) / total}%`), [data, total]);\n  const rows = useMemo(\n    () => (LegendRenderer !== undefined ? [`${height}px`, 'auto'] : [`${height}px`]),\n    [LegendRenderer, height],\n  );\n  const barNames = useMemo(() => data.map((datum) => datum.name), [data]);\n  const getBorderRadius = useCallback(\n    (index: number) => {\n      if (index === 0) return '50px 0 0 50px';\n      if (index === data.length - 1) return '0 50px 50px 0';\n      return undefined;\n    },\n    [data.length],\n  );\n\n  const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      if (e.code === 'ArrowRight') {\n        if (barNames[keyBarFocused + 1]) {\n          setKeyBarFocused(keyBarFocused + 1);\n        } else {\n          setKeyBarFocused(0);\n        }\n      }\n      if (e.code === 'ArrowLeft') {\n        if (barNames[keyBarFocused - 1]) {\n          setKeyBarFocused(keyBarFocused - 1);\n        } else {\n          setKeyBarFocused(barNames.length - 1);\n        }\n      }\n    },\n    [keyBarFocused, barNames],\n  );\n\n  return (\n    <Wrapper\n      cols={cols}\n      gutter={gutter}\n      role=\"region\"\n      onKeyDown={handleOnKeyDown}\n      tabIndex={-1}\n      onFocus={() => setIsChartFocused(true)}\n      onBlur={(e) => e.currentTarget !== e.target && setIsChartFocused(false)}\n      {...xstyledProps}\n      {...globalAttributes}\n    >\n      {data.map((datum, i) => (\n        <Grid rows={rows}>\n          <Bar\n            key={datum.name}\n            datum={datum}\n            isFocused={barNames[keyBarFocused] === datum.name && isChartFocused}\n            borderRadius={getBorderRadius(i)}\n            bg={COLOR_PALLET[datum.color as keyof typeof COLOR_PALLET] ?? datum.color}\n            tabIndex={i === keyBarFocused ? 0 : -1}\n            {...props}\n          />\n          {LegendRenderer !== undefined ? <LegendRenderer key={`${datum.name}-legend`} datum={datum} /> : null}\n        </Grid>\n      ))}\n    </Wrapper>\n  );\n};\n\nDSSingleStackedBar.displayName = DSSingleStackedBarName;\nconst DSSingleStackedBarWithSchema = describe(DSSingleStackedBar);\nDSSingleStackedBarWithSchema.propTypes =\n  DSSingleStackedBarPropTypes as unknown as WeakValidationMap<DSSingleStackedBarT.Props>;\n\nexport { DSSingleStackedBarWithSchema, DSSingleStackedBar };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useMemo, useState, type WeakValidationMap } from 'react';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { DSSingleStackedBarName } from './exported-related/index.js';\nimport { DSSingleStackedBarPropTypes, defaultProps, type DSSingleStackedBarT } from './react-desc-prop-types.js';\nimport { StyledBar, StyledMouseOverDetectionBox, StyledTooltipContainer, Wrapper } from './styles.js';\nconst Bar = React.memo((props: DSSingleStackedBarT.BarT) => {\n  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);\n  const [isHover, setIsHover] = useState(false);\n  const { height, TooltipRenderer, datum, tabIndex, isFocused, borderRadius, bg } = props;\n  const handleRefCallback = useCallback(\n    (_ref: HTMLDivElement | null) => {\n      if (isFocused) {\n        _ref?.focus();\n      }\n    },\n    [isFocused],\n  );\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHover(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHover(false);\n  }, []);\n  return (\n    <div>\n      {(isFocused || isHover) && TooltipRenderer ? (\n        <DSPopperJS referenceElement={referenceElement} showPopover>\n          <StyledMouseOverDetectionBox />\n          <StyledTooltipContainer>\n            <TooltipRenderer datum={datum} />\n          </StyledTooltipContainer>\n        </DSPopperJS>\n      ) : null}\n      <StyledBar\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        bg={bg}\n        height={height}\n        borderRadius={borderRadius}\n        innerRef={mergeRefs(handleRefCallback, setReferenceElement)}\n        tabIndex={tabIndex}\n        role=\"img\"\n        // until uziel work is merged we keep this default value\n        aria-label={`${datum.name} value: ${datum.data}`}\n      />\n    </div>\n  );\n});\n\nconst DSSingleStackedBar: React.ComponentType<DSSingleStackedBarT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSSingleStackedBarT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSSingleStackedBarPropTypes, 'DSSingleStackedBar');\n\n  const globalAttributes = useGetGlobalAttributes<DSSingleStackedBarT.InternalProps, HTMLDivElement, DSGridT.Props>(\n    propsWithDefaults,\n  );\n\n  const xstyledProps = useGetXstyledProps(propsWithDefaults);\n\n  const { data, LegendRenderer, gutter, height } = propsWithDefaults;\n  const [keyBarFocused, setKeyBarFocused] = useState<number>(0);\n  const [isChartFocused, setIsChartFocused] = useState(false);\n\n  const total = useMemo(() => data.map((datum) => datum.data).reduce((acc, curr) => acc + curr, 0), [data]);\n  const cols = useMemo(() => data.map((datum) => `${Math.ceil(datum.data * 100) / total}%`), [data, total]);\n  const rows = useMemo(\n    () => (LegendRenderer !== undefined ? [`${height}px`, 'auto'] : [`${height}px`]),\n    [LegendRenderer, height],\n  );\n  const barNames = useMemo(() => data.map((datum) => datum.name), [data]);\n  const getBorderRadius = useCallback(\n    (index: number) => {\n      if (index === 0) return '50px 0 0 50px';\n      if (index === data.length - 1) return '0 50px 50px 0';\n      return undefined;\n    },\n    [data.length],\n  );\n\n  const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      if (e.code === 'ArrowRight') {\n        if (barNames[keyBarFocused + 1]) {\n          setKeyBarFocused(keyBarFocused + 1);\n        } else {\n          setKeyBarFocused(0);\n        }\n      }\n      if (e.code === 'ArrowLeft') {\n        if (barNames[keyBarFocused - 1]) {\n          setKeyBarFocused(keyBarFocused - 1);\n        } else {\n          setKeyBarFocused(barNames.length - 1);\n        }\n      }\n    },\n    [keyBarFocused, barNames],\n  );\n\n  return (\n    <Wrapper\n      cols={cols}\n      gutter={gutter}\n      role=\"region\"\n      onKeyDown={handleOnKeyDown}\n      tabIndex={-1}\n      onFocus={() => setIsChartFocused(true)}\n      onBlur={(e) => e.currentTarget !== e.target && setIsChartFocused(false)}\n      {...xstyledProps}\n      {...globalAttributes}\n    >\n      {data.map((datum, i) => (\n        <Grid rows={rows}>\n          <Bar\n            key={datum.name}\n            datum={datum}\n            isFocused={barNames[keyBarFocused] === datum.name && isChartFocused}\n            borderRadius={getBorderRadius(i)}\n            bg={COLOR_PALLET[datum.color as keyof typeof COLOR_PALLET] ?? datum.color}\n            tabIndex={i === keyBarFocused ? 0 : -1}\n            {...props}\n          />\n          {LegendRenderer !== undefined ? <LegendRenderer key={`${datum.name}-legend`} datum={datum} /> : null}\n        </Grid>\n      ))}\n    </Wrapper>\n  );\n};\n\nDSSingleStackedBar.displayName = DSSingleStackedBarName;\nconst DSSingleStackedBarWithSchema = describe(DSSingleStackedBar);\nDSSingleStackedBarWithSchema.propTypes =\n  DSSingleStackedBarPropTypes as unknown as WeakValidationMap<DSSingleStackedBarT.Props>;\n\nexport { DSSingleStackedBar, DSSingleStackedBarWithSchema };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/graphs/Chart/SingleStackedBar/index.js

@@ -1,4 +1,4 @@
 import * as React from "react";
-export * from "../SingleStackedBar/SingleStackedBar.js";
-export * from "../SingleStackedBar/exported-related/index.js";
+export * from "./SingleStackedBar.js";
+export * from "./exported-related/index.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/graphs/Chart/SingleStackedBar/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/SingleStackedBar/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from '../SingleStackedBar/SingleStackedBar.js';\nexport { type DSSingleStackedBarT } from '../SingleStackedBar/react-desc-prop-types.js';\nexport * from '../SingleStackedBar/exported-related/index.js';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './SingleStackedBar.js';\nexport { type DSSingleStackedBarT } from './react-desc-prop-types.js';\nexport * from './exported-related/index.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AAEd,cAAc;",
   "names": []
 }

package/dist/esm/graphs/Chart/config/useChart.js

@@ -2,12 +2,12 @@ import * as React from "react";
 import { useMemo, useState, useEffect, useRef } from "react";
 import { uid } from "uid";
 import { debounce } from "lodash";
+import ResizeObserver from "resize-observer-polyfill";
 import { defaultProps } from "../react-desc-prop-types.js";
 import { useScales } from "./useScales.js";
 import { stackData } from "../helpers/index.js";
 import { useInternalMargins } from "./useInternalMargins.js";
 import { useGetters } from "./useGetters.js";
-import ResizeObserver from "resize-observer-polyfill";
 import { useValidateProps } from "./useValidateProps.js";
 import { COLOR_PALLET } from "../helpers/colorPallet.js";
 const useResizeObserver = (ref) => {
@@ -27,6 +27,8 @@ const useResizeObserver = (ref) => {
         resizeObserver.unobserve(observeTarget);
       };
     }
+    return () => {
+    };
   }, [ref]);
   return dimensions;
 };