@elliemae/ds-dataviz 3.8.0 → 3.9.0-next.0

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, useMemo } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles';\n\nexport const VerticalScrapperLine = ({ lineWidth, xPosition, datum }) => {\n  const {\n    scrapperPosX,\n    setScrapperPosX,\n    isGrabbed,\n    xScale,\n    innerWidth,\n    innerHeight,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n  const isActive = scrapperPosX === xPosition;\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosX(xPosition);\n  }, [isGrabbed, setScrapperPosX, xPosition]);\n\n  const strokeDetectorWidth = xScale.bandwidth ? xScale.bandwidth() : lineWidth;\n\n  const render = useMemo(() => {\n    return (\n      <g>\n        {isActive && !isGrabbed ? (\n          <g>\n            {TooltipRenderer ? (\n              <foreignObject>\n                <DSPopperJS\n                  withoutAnimation\n                  withoutArrow\n                  customOffset={[0, 5]}\n                  referenceElement={referenceElement}\n                  showPopover\n                  zIndex={theme.zIndex.tooltip}\n                  startPlacementPreference={scrapper.tooltipPreference}\n                >\n                  <StyledMouseOverDetectionBox />\n                  <StyledTooltipContainer>\n                    <TooltipRenderer data={datum} />\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\n        <line\n          onMouseOver={handleOnMouseEnter}\n          // onMouseLeave={() => setScrapperPosY('')}\n          // id=\"horizontal-scrapper-zone\"\n          x1={xPosition}\n          strokeWidth={strokeDetectorWidth}\n          stroke=\"transparent\"\n          y1={0}\n          x2={xPosition}\n          y2={innerHeight}\n        />\n      </g>\n    );\n  }, [\n    isActive,\n    isGrabbed,\n    TooltipRenderer,\n    referenceElement,\n    theme.zIndex.tooltip,\n    scrapper.tooltipPreference,\n    scrapper.color,\n    datum,\n    xPosition,\n    innerHeight,\n    handleOnMouseEnter,\n    strokeDetectorWidth,\n  ]);\n  return render;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkE;AAClE,yBAA2B;AAC3B,uBAA6B;AAC7B,0BAA6B;AAC7B,oBAAoE;AAE7D,MAAM,uBAAuB,CAAC,EAAE,WAAW,WAAW,MAAM,MAAM;AACvE,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,uBAAgD;AAChG,QAAM,WAAW,iBAAiB;AAClC,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,CAAC;AAAW,sBAAgB,SAAS;AAAA,EAC3C,GAAG,CAAC,WAAW,iBAAiB,SAAS,CAAC;AAE1C,QAAM,sBAAsB,OAAO,YAAY,OAAO,UAAU,IAAI;AAEpE,QAAM,aAAS,sBAAQ,MAAM;AAC3B,WACE,6CAAC;AAAA,MACE;AAAA,oBAAY,CAAC,YACZ,6CAAC;AAAA,UACE;AAAA,8BACC,4CAAC;AAAA,cACC,uDAAC;AAAA,gBACC,kBAAgB;AAAA,gBAChB,cAAY;AAAA,gBACZ,cAAc,CAAC,GAAG,CAAC;AAAA,gBACnB;AAAA,gBACA,aAAW;AAAA,gBACX,QAAQ,MAAM,OAAO;AAAA,gBACrB,0BAA0B,SAAS;AAAA,gBAEnC;AAAA,8DAAC,6CAA4B;AAAA,kBAC7B,4CAAC;AAAA,oBACC,sDAAC;AAAA,sBAAgB,MAAM;AAAA,qBAAO;AAAA,mBAChC;AAAA;AAAA,eACF;AAAA,aACF,IACE;AAAA,YACJ,4CAAC;AAAA,cACC,KAAK;AAAA,cACL,IAAI;AAAA,cACJ,aAAY;AAAA,cACZ,QAAQ,SAAS;AAAA,cACjB,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,kBAAkB,GAAG;AAAA,aACvB;AAAA;AAAA,SACF,IACE;AAAA,QAEJ,4CAAC;AAAA,UACC,aAAa;AAAA,UAGb,IAAI;AAAA,UACJ,aAAa;AAAA,UACb,QAAO;AAAA,UACP,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA,SACN;AAAA;AAAA,KACF;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,OAAO;AAAA,IACb,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAO;AACT;",
+  "sourcesContent": ["import React, { useContext, useCallback, useState, useMemo } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles';\n\nexport const VerticalScrapperLine = ({ lineWidth, xPosition, datum }) => {\n  const {\n    scrapperPosX,\n    setScrapperPosX,\n    isGrabbed,\n    xScale,\n    innerWidth,\n    innerHeight,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n  const isActive = scrapperPosX === xPosition;\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosX(xPosition);\n  }, [isGrabbed, setScrapperPosX, xPosition]);\n\n  const strokeDetectorWidth = xScale.bandwidth ? xScale.bandwidth() : '4px';\n\n  const render = useMemo(\n    () => (\n      <g>\n        {isActive && !isGrabbed ? (\n          <g>\n            {TooltipRenderer ? (\n              <foreignObject>\n                <DSPopperJS\n                  withoutAnimation\n                  withoutArrow\n                  customOffset={[0, 5]}\n                  referenceElement={referenceElement}\n                  showPopover\n                  zIndex={theme.zIndex.tooltip}\n                  startPlacementPreference={scrapper.tooltipPreference}\n                >\n                  <StyledMouseOverDetectionBox />\n                  <StyledTooltipContainer>\n                    <TooltipRenderer data={datum} />\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\n        <line\n          onMouseOver={handleOnMouseEnter}\n          // onMouseLeave={() => setScrapperPosY('')}\n          // id=\"horizontal-scrapper-zone\"\n          x1={xPosition}\n          strokeWidth={strokeDetectorWidth}\n          stroke=\"transparent\"\n          y1={0}\n          x2={xPosition}\n          y2={innerHeight}\n        />\n      </g>\n    ),\n    [\n      isActive,\n      isGrabbed,\n      TooltipRenderer,\n      referenceElement,\n      theme.zIndex.tooltip,\n      scrapper.tooltipPreference,\n      scrapper.color,\n      datum,\n      xPosition,\n      innerHeight,\n      handleOnMouseEnter,\n      strokeDetectorWidth,\n    ],\n  );\n  return render;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkE;AAClE,yBAA2B;AAC3B,uBAA6B;AAC7B,0BAA6B;AAC7B,oBAAoE;AAE7D,MAAM,uBAAuB,CAAC,EAAE,WAAW,WAAW,MAAM,MAAM;AACvE,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,uBAAgD;AAChG,QAAM,WAAW,iBAAiB;AAClC,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,CAAC;AAAW,sBAAgB,SAAS;AAAA,EAC3C,GAAG,CAAC,WAAW,iBAAiB,SAAS,CAAC;AAE1C,QAAM,sBAAsB,OAAO,YAAY,OAAO,UAAU,IAAI;AAEpE,QAAM,aAAS;AAAA,IACb,MACE,6CAAC;AAAA,MACE;AAAA,oBAAY,CAAC,YACZ,6CAAC;AAAA,UACE;AAAA,8BACC,4CAAC;AAAA,cACC,uDAAC;AAAA,gBACC,kBAAgB;AAAA,gBAChB,cAAY;AAAA,gBACZ,cAAc,CAAC,GAAG,CAAC;AAAA,gBACnB;AAAA,gBACA,aAAW;AAAA,gBACX,QAAQ,MAAM,OAAO;AAAA,gBACrB,0BAA0B,SAAS;AAAA,gBAEnC;AAAA,8DAAC,6CAA4B;AAAA,kBAC7B,4CAAC;AAAA,oBACC,sDAAC;AAAA,sBAAgB,MAAM;AAAA,qBAAO;AAAA,mBAChC;AAAA;AAAA,eACF;AAAA,aACF,IACE;AAAA,YACJ,4CAAC;AAAA,cACC,KAAK;AAAA,cACL,IAAI;AAAA,cACJ,aAAY;AAAA,cACZ,QAAQ,SAAS;AAAA,cACjB,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,kBAAkB,GAAG;AAAA,aACvB;AAAA;AAAA,SACF,IACE;AAAA,QAEJ,4CAAC;AAAA,UACC,aAAa;AAAA,UAGb,IAAI;AAAA,UACJ,aAAa;AAAA,UACb,QAAO;AAAA,UACP,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA,SACN;AAAA;AAAA,KACF;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,OAAO;AAAA,MACb,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Scroller/ScrollBarX.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';\n\nexport const ScrollBarX = () => {\n  const {\n    setIsGrabbed,\n    setStartPosition,\n    innerWidth,\n    xScrollbarPosition,\n    activePoint,\n    setXScrollbarPosition,\n    innerHeight,\n    isGrabbed,\n    containerRatio,\n    setScrapperPosX,\n    isScrollbarVisible,\n    oldLastPosition,\n  } = useContext(ChartContext);\n\n  const barWidth = useMemo(() => parseInt(innerWidth / containerRatio, 10), [containerRatio, innerWidth]);\n\n  // const [endPosition, setEndPosition] = useState(0);\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      setScrapperPosX('');\n      setIsGrabbed(true);\n      setStartPosition(e.clientX);\n      e.preventDefault();\n    },\n    [setIsGrabbed, setScrapperPosX, setStartPosition],\n  );\n\n  const handleMouseEnter = useCallback(\n    (e: React.MouseEvent) => {\n      setScrapperPosX('');\n    },\n    [setScrapperPosX],\n  );\n\n  // const [endPosition, setEndPosition] = useState(0);\n  const handleClickFullBar = useCallback(\n    (e: React.MouseEvent) => {\n      let newPosition = 0;\n      const bar = e.target;\n      const bounds = bar.getBoundingClientRect();\n      const left = e.clientX - bounds.left;\n      if (left + barWidth / 2 > innerWidth) {\n        newPosition = innerWidth - barWidth;\n      } else if (left - barWidth / 2 > 0) {\n        newPosition = left - barWidth / 2;\n      }\n\n      setXScrollbarPosition(newPosition);\n      oldLastPosition.current = newPosition;\n      e.preventDefault();\n    },\n    [barWidth, innerWidth, oldLastPosition, setXScrollbarPosition],\n  );\n\n  const isBarVisible = useMemo(\n    () => (isScrollbarVisible || activePoint) && containerRatio > 1,\n    [activePoint, containerRatio, isScrollbarVisible],\n  );\n\n  return (\n    <g\n      className=\"scrollbarx\"\n      transform={`translate(0,${innerHeight})`}\n      style={{ visibility: isBarVisible ? 'visible' : 'hidden' }}\n      onMouseEnter={handleMouseEnter}\n    >\n      <rect style={{ cursor: 'pointer' }} width={innerWidth} height=\"6\" fill=\"#ebecf0c5\" onClick={handleClickFullBar} />\n      <g transform={`translate(${xScrollbarPosition},0)`}>\n        <rect\n          style={{ cursor: isGrabbed ? 'grabbing' : 'grab' }}\n          width={barWidth}\n          height=\"6\"\n          fill=\"grey\"\n          onMouseDown={handleMouseDown}\n        />\n      </g>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAAwD;AACxD,0BAA6B;AAEtB,MAAM,aAAa,MAAM;AAC9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,eAAW,sBAAQ,MAAM,SAAS,aAAa,gBAAgB,EAAE,GAAG,CAAC,gBAAgB,UAAU,CAAC;AAGtG,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAwB;AACvB,sBAAgB,EAAE;AAClB,mBAAa,IAAI;AACjB,uBAAiB,EAAE,OAAO;AAC1B,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,cAAc,iBAAiB,gBAAgB;AAAA,EAClD;AAEA,QAAM,uBAAmB;AAAA,IACvB,CAAC,MAAwB;AACvB,sBAAgB,EAAE;AAAA,IACpB;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AAGA,QAAM,yBAAqB;AAAA,IACzB,CAAC,MAAwB;AACvB,UAAI,cAAc;AAClB,YAAM,MAAM,EAAE;AACd,YAAM,SAAS,IAAI,sBAAsB;AACzC,YAAM,OAAO,EAAE,UAAU,OAAO;AAChC,UAAI,OAAO,WAAW,IAAI,YAAY;AACpC,sBAAc,aAAa;AAAA,MAC7B,WAAW,OAAO,WAAW,IAAI,GAAG;AAClC,sBAAc,OAAO,WAAW;AAAA,MAClC;AAEA,4BAAsB,WAAW;AACjC,sBAAgB,UAAU;AAC1B,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,UAAU,YAAY,iBAAiB,qBAAqB;AAAA,EAC/D;AAEA,QAAM,mBAAe;AAAA,IACnB,OAAO,sBAAsB,gBAAgB,iBAAiB;AAAA,IAC9D,CAAC,aAAa,gBAAgB,kBAAkB;AAAA,EAClD;AAEA,SACE,6CAAC;AAAA,IACC,WAAU;AAAA,IACV,WAAW,eAAe;AAAA,IAC1B,OAAO,EAAE,YAAY,eAAe,YAAY,SAAS;AAAA,IACzD,cAAc;AAAA,IAEd;AAAA,kDAAC;AAAA,QAAK,OAAO,EAAE,QAAQ,UAAU;AAAA,QAAG,OAAO;AAAA,QAAY,QAAO;AAAA,QAAI,MAAK;AAAA,QAAY,SAAS;AAAA,OAAoB;AAAA,MAChH,4CAAC;AAAA,QAAE,WAAW,aAAa;AAAA,QACzB,sDAAC;AAAA,UACC,OAAO,EAAE,QAAQ,YAAY,aAAa,OAAO;AAAA,UACjD,OAAO;AAAA,UACP,QAAO;AAAA,UACP,MAAK;AAAA,UACL,aAAa;AAAA,SACf;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const ScrollBarX = () => {\n  const {\n    setIsGrabbed,\n    setStartPosition,\n    innerWidth,\n    xScrollbarPosition,\n    activePoint,\n    setXScrollbarPosition,\n    innerHeight,\n    isGrabbed,\n    containerRatio,\n    setScrapperPosX,\n    isScrollbarVisible,\n    oldLastPosition,\n  } = useContext(ChartContext);\n\n  const barWidth = useMemo(() => parseInt(innerWidth / containerRatio, 10), [containerRatio, innerWidth]);\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      setScrapperPosX('');\n      setIsGrabbed(true);\n      setStartPosition(e.clientX);\n      e.preventDefault();\n    },\n    [setIsGrabbed, setScrapperPosX, setStartPosition],\n  );\n\n  const handleMouseEnter = useCallback(\n    (e: React.MouseEvent) => {\n      setScrapperPosX('');\n    },\n    [setScrapperPosX],\n  );\n\n  const handleClickFullBar = useCallback(\n    (e: React.MouseEvent) => {\n      let newPosition = 0;\n      const bar = e.target;\n      const bounds = bar.getBoundingClientRect();\n      const left = e.clientX - bounds.left;\n      if (left + barWidth / 2 > innerWidth) {\n        newPosition = innerWidth - barWidth;\n      } else if (left - barWidth / 2 > 0) {\n        newPosition = left - barWidth / 2;\n      }\n\n      setXScrollbarPosition(newPosition);\n      oldLastPosition.current = newPosition;\n      e.preventDefault();\n    },\n    [barWidth, innerWidth, oldLastPosition, setXScrollbarPosition],\n  );\n\n  const isBarVisible = useMemo(\n    () => (isScrollbarVisible || activePoint) && containerRatio > 1,\n    [activePoint, containerRatio, isScrollbarVisible],\n  );\n\n  return (\n    <g\n      className=\"scrollbarx\"\n      transform={`translate(0,${innerHeight})`}\n      style={{ visibility: isBarVisible ? 'visible' : 'hidden' }}\n      onMouseEnter={handleMouseEnter}\n    >\n      <rect style={{ cursor: 'pointer' }} width={innerWidth} height=\"6\" fill=\"#ebecf0c5\" onClick={handleClickFullBar} />\n      <g transform={`translate(${xScrollbarPosition},0)`}>\n        <rect\n          style={{ cursor: isGrabbed ? 'grabbing' : 'grab' }}\n          width={barWidth}\n          height=\"6\"\n          fill=\"grey\"\n          onMouseDown={handleMouseDown}\n        />\n      </g>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAAwD;AACxD,0BAA6B;AAEtB,MAAM,aAAa,MAAM;AAC9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,eAAW,sBAAQ,MAAM,SAAS,aAAa,gBAAgB,EAAE,GAAG,CAAC,gBAAgB,UAAU,CAAC;AAEtG,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAwB;AACvB,sBAAgB,EAAE;AAClB,mBAAa,IAAI;AACjB,uBAAiB,EAAE,OAAO;AAC1B,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,cAAc,iBAAiB,gBAAgB;AAAA,EAClD;AAEA,QAAM,uBAAmB;AAAA,IACvB,CAAC,MAAwB;AACvB,sBAAgB,EAAE;AAAA,IACpB;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,MAAwB;AACvB,UAAI,cAAc;AAClB,YAAM,MAAM,EAAE;AACd,YAAM,SAAS,IAAI,sBAAsB;AACzC,YAAM,OAAO,EAAE,UAAU,OAAO;AAChC,UAAI,OAAO,WAAW,IAAI,YAAY;AACpC,sBAAc,aAAa;AAAA,MAC7B,WAAW,OAAO,WAAW,IAAI,GAAG;AAClC,sBAAc,OAAO,WAAW;AAAA,MAClC;AAEA,4BAAsB,WAAW;AACjC,sBAAgB,UAAU;AAC1B,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,UAAU,YAAY,iBAAiB,qBAAqB;AAAA,EAC/D;AAEA,QAAM,mBAAe;AAAA,IACnB,OAAO,sBAAsB,gBAAgB,iBAAiB;AAAA,IAC9D,CAAC,aAAa,gBAAgB,kBAAkB;AAAA,EAClD;AAEA,SACE,6CAAC;AAAA,IACC,WAAU;AAAA,IACV,WAAW,eAAe;AAAA,IAC1B,OAAO,EAAE,YAAY,eAAe,YAAY,SAAS;AAAA,IACzD,cAAc;AAAA,IAEd;AAAA,kDAAC;AAAA,QAAK,OAAO,EAAE,QAAQ,UAAU;AAAA,QAAG,OAAO;AAAA,QAAY,QAAO;AAAA,QAAI,MAAK;AAAA,QAAY,SAAS;AAAA,OAAoB;AAAA,MAChH,4CAAC;AAAA,QAAE,WAAW,aAAa;AAAA,QACzB,sDAAC;AAAA,UACC,OAAO,EAAE,QAAQ,YAAY,aAAa,OAAO;AAAA,UACjD,OAAO;AAAA,UACP,QAAO;AAAA,UACP,MAAK;AAAA,UACL,aAAa;AAAA,SACf;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }

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

@@ -43,14 +43,14 @@ const SeriesFactory = () => {
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
     className: "content",
-    children: data.map((serie) => {
+    children: data.filter((serie) => !serie.isHidden).map((serie) => {
       const serieProps = {
         key: serie.key,
         serie: {
           ...serie,
           data: containerRatio > 1 ? serie.data.filter((datum) => {
             const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);
-            return xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 20 * containerRatio && xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 20 * containerRatio;
+            return xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 40 * containerRatio && xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 40 * containerRatio;
           }) : serie.data
         }
       };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/parts/SeriesFactory.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { Line, Points, Bars, StackedBar, Area } from '../series';\nimport { getStackedIndex } from '../helpers';\nimport { throttle } from 'lodash';\nexport const SeriesFactory = () => {\n  const {\n    props: { data, xAxis, groups, types },\n    xScrollbarPosition,\n    innerWidth,\n    xScale,\n    containerRatio,\n  } = useContext(ChartContext);\n\n  return (\n    <g className=\"content\">\n      {\n        data.map((serie) => {\n          const serieProps = {\n            key: serie.key,\n            // @todo fix this for both axis make a hook useVirtualize\n            serie: {\n              ...serie,\n              data:\n                containerRatio > 1\n                  ? serie.data.filter((datum) => {\n                      const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n                      return (\n                        xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 20 * containerRatio &&\n                        xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 20 * containerRatio\n                      );\n                    })\n                  : serie.data,\n            },\n          };\n          if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1) {\n            return <StackedBar {...serieProps} />;\n          }\n          if (serie.type === 'bar') {\n            return <Bars {...serieProps} />;\n          }\n          if ((types === 'scatter' && !serie.type) || serie.type === 'point') {\n            return <Points {...serieProps} />;\n          }\n          if (serie.type === 'line') {\n            return <Line {...serieProps} />;\n          }\n          if (serie.type === 'area') {\n            return <Area {...serieProps} />;\n          }\n          return <></>;\n        }) as JSX.Element[]\n      }\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAGA,mBAA2C;AAC3C,0BAA6B;AAC7B,oBAAqD;AACrD,qBAAgC;AAEzB,MAAM,gBAAgB,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,SACE,4CAAC;AAAA,IAAE,WAAU;AAAA,IAET,eAAK,IAAI,CAAC,UAAU;AAClB,YAAM,aAAa;AAAA,QACjB,KAAK,MAAM;AAAA,QAEX,OAAO;AAAA,UACL,GAAG;AAAA,UACH,MACE,iBAAiB,IACb,MAAM,KAAK,OAAO,CAAC,UAAU;AAC3B,kBAAM,cAAc,OAAO,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM,CAAC;AAClF,mBACE,cAAc,sBAAsB,kBAAkB,KAAK,KAAK,kBAChE,cAAc,sBAAsB,kBAAkB,KAAK,aAAa,KAAK;AAAA,UAEjF,CAAC,IACD,MAAM;AAAA,QACd;AAAA,MACF;AACA,UAAI,MAAM,SAAS,SAAS,cAAU,gCAAgB,QAAQ,MAAM,IAAI,IAAI,IAAI;AAC9E,eAAO,4CAAC;AAAA,UAAY,GAAG;AAAA,SAAY;AAAA,MACrC;AACA,UAAI,MAAM,SAAS,OAAO;AACxB,eAAO,4CAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,UAAK,UAAU,aAAa,CAAC,MAAM,QAAS,MAAM,SAAS,SAAS;AAClE,eAAO,4CAAC;AAAA,UAAQ,GAAG;AAAA,SAAY;AAAA,MACjC;AACA,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAO,4CAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAO,4CAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,aAAO,2EAAE;AAAA,IACX,CAAC;AAAA,GAEL;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { Line, Points, Bars, StackedBar, Area } from '../series';\nimport { getStackedIndex } from '../helpers';\nimport { throttle } from 'lodash';\nexport const SeriesFactory = () => {\n  const {\n    props: { data, xAxis, groups, types },\n    xScrollbarPosition,\n    innerWidth,\n    xScale,\n    containerRatio,\n  } = useContext(ChartContext);\n\n  return (\n    <g className=\"content\">\n      {\n        data\n          .filter((serie) => !serie.isHidden)\n          .map((serie) => {\n            const serieProps = {\n              key: serie.key,\n              // @todo fix this for both axis make a hook useVirtualize\n              serie: {\n                ...serie,\n                data:\n                  containerRatio > 1\n                    ? serie.data.filter((datum) => {\n                        const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n                        return (\n                          xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 40 * containerRatio &&\n                          xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 40 * containerRatio\n                        );\n                      })\n                    : serie.data,\n              },\n            };\n            if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1) {\n              return <StackedBar {...serieProps} />;\n            }\n            if (serie.type === 'bar') {\n              return <Bars {...serieProps} />;\n            }\n            if ((types === 'scatter' && !serie.type) || serie.type === 'point') {\n              return <Points {...serieProps} />;\n            }\n            if (serie.type === 'line') {\n              return <Line {...serieProps} />;\n            }\n            if (serie.type === 'area') {\n              return <Area {...serieProps} />;\n            }\n            return <></>;\n          }) as JSX.Element[]\n      }\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAGA,mBAA2C;AAC3C,0BAA6B;AAC7B,oBAAqD;AACrD,qBAAgC;AAEzB,MAAM,gBAAgB,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,SACE,4CAAC;AAAA,IAAE,WAAU;AAAA,IAET,eACG,OAAO,CAAC,UAAU,CAAC,MAAM,QAAQ,EACjC,IAAI,CAAC,UAAU;AACd,YAAM,aAAa;AAAA,QACjB,KAAK,MAAM;AAAA,QAEX,OAAO;AAAA,UACL,GAAG;AAAA,UACH,MACE,iBAAiB,IACb,MAAM,KAAK,OAAO,CAAC,UAAU;AAC3B,kBAAM,cAAc,OAAO,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM,CAAC;AAClF,mBACE,cAAc,sBAAsB,kBAAkB,KAAK,KAAK,kBAChE,cAAc,sBAAsB,kBAAkB,KAAK,aAAa,KAAK;AAAA,UAEjF,CAAC,IACD,MAAM;AAAA,QACd;AAAA,MACF;AACA,UAAI,MAAM,SAAS,SAAS,cAAU,gCAAgB,QAAQ,MAAM,IAAI,IAAI,IAAI;AAC9E,eAAO,4CAAC;AAAA,UAAY,GAAG;AAAA,SAAY;AAAA,MACrC;AACA,UAAI,MAAM,SAAS,OAAO;AACxB,eAAO,4CAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,UAAK,UAAU,aAAa,CAAC,MAAM,QAAS,MAAM,SAAS,SAAS;AAClE,eAAO,4CAAC;AAAA,UAAQ,GAAG;AAAA,SAAY;AAAA,MACjC;AACA,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAO,4CAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAO,4CAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,aAAO,2EAAE;AAAA,IACX,CAAC;AAAA,GAEP;AAEJ;",
   "names": []
 }

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

@@ -35,23 +35,27 @@ var import_ChartContext = require("../ChartContext");
 var import_FocusableRegion = require("../parts/FocusableRegion");
 const Bars = ({ serie }) => {
   const {
-    props: { xAxis, yAxis, TooltipRenderer },
+    props: { yAxis, TooltipRenderer },
     innerHeight,
     xScale,
     yScale,
+    y2Scale,
     subGroupScale,
-    colorScale
+    colorScale,
+    getXValue,
+    getYValue,
+    isHorizontal
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  const isHorizontal = !!yScale.bandwidth;
+  const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
     fill: colorScale(serie.name),
     children: serie.data.map((bar, i) => {
       const width = isHorizontal ? xScale(bar.value) : subGroupScale?.bandwidth();
-      const height = isHorizontal ? subGroupScale?.bandwidth() : innerHeight - yScale(bar.value.y ?? bar.value);
-      const x = !isHorizontal ? xAxis?.cols?.[i] ?? bar.value.x ?? i : bar.value.x ?? bar.value;
-      const y = !isHorizontal ? bar.value.y ?? bar.value : yAxis?.cols?.[i] ?? bar.value.x ?? i;
-      const transformX = isHorizontal ? 0 : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? width / 2 * subGroupScale.domain().length : 0);
-      const transformY = isHorizontal ? subGroupScale(serie.name) + yScale(yAxis?.cols?.[i] ?? i) : yScale(y);
+      const height = isHorizontal ? subGroupScale?.bandwidth() : innerHeight - finalYScale(bar.value.y ?? bar.value);
+      const x = getXValue(bar);
+      const y = getYValue(bar);
+      const transformX = isHorizontal ? 0 : subGroupScale(serie.name) + xScale(x);
+      const transformY = isHorizontal ? subGroupScale(serie.name) + finalYScale(yAxis?.cols?.[i] ?? i) : finalYScale(y);
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
         transform: `translate(${transformX},${transformY})`,
         children: [

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Bars.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { ScaleBand } from 'd3';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\nimport { FocusableRegion } from '../parts/FocusableRegion';\ninterface BarsT {\n  serie: DSChartT.InternalData;\n}\nexport const Bars = ({ serie }: BarsT) => {\n  const {\n    props: { xAxis, yAxis, TooltipRenderer },\n    innerHeight,\n    xScale,\n    yScale,\n    subGroupScale,\n    colorScale,\n  } = useContext(ChartContext);\n\n  const isHorizontal = !!(yScale as ScaleBand<string>).bandwidth;\n  return (\n    <g fill={colorScale(serie.name)}>\n      {serie.data.map((bar, i) => {\n        const width = isHorizontal ? xScale(bar.value) : subGroupScale?.bandwidth();\n        const height = isHorizontal ? subGroupScale?.bandwidth() : innerHeight - yScale(bar.value.y ?? bar.value);\n\n        const x = !isHorizontal ? xAxis?.cols?.[i] ?? bar.value.x ?? i : bar.value.x ?? bar.value;\n        const y = !isHorizontal ? bar.value.y ?? bar.value : yAxis?.cols?.[i] ?? bar.value.x ?? i;\n\n        const transformX = isHorizontal\n          ? 0\n          : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0);\n        const transformY = isHorizontal ? subGroupScale(serie.name) + yScale(yAxis?.cols?.[i] ?? i) : yScale(y);\n\n        return (\n          <g key={bar.key} transform={`translate(${transformX},${transformY})`}>\n            <Rect width={width} height={height} id={bar.key} />\n            {TooltipRenderer && (\n              <FocusableRegion\n                id={bar.key}\n                width={width}\n                height={height}\n                content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n              />\n            )}\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAE7B,6BAAgC;AAIzB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAa;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO,gBAAgB;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,eAAe,CAAC,CAAE,OAA6B;AACrD,SACE,4CAAC;AAAA,IAAE,MAAM,WAAW,MAAM,IAAI;AAAA,IAC3B,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,QAAQ,eAAe,OAAO,IAAI,KAAK,IAAI,eAAe,UAAU;AAC1E,YAAM,SAAS,eAAe,eAAe,UAAU,IAAI,cAAc,OAAO,IAAI,MAAM,KAAK,IAAI,KAAK;AAExG,YAAM,IAAI,CAAC,eAAe,OAAO,OAAO,MAAM,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,IAAI;AACpF,YAAM,IAAI,CAAC,eAAe,IAAI,MAAM,KAAK,IAAI,QAAQ,OAAO,OAAO,MAAM,IAAI,MAAM,KAAK;AAExF,YAAM,aAAa,eACf,IACA,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC,KAAK,IAAI,MAAM,IAAK,QAAQ,IAAK,cAAc,OAAO,EAAE,SAAS;AACzG,YAAM,aAAa,eAAe,cAAc,MAAM,IAAI,IAAI,OAAO,OAAO,OAAO,MAAM,CAAC,IAAI,OAAO,CAAC;AAEtG,aACE,6CAAC;AAAA,QAAgB,WAAW,aAAa,cAAc;AAAA,QACrD;AAAA,sDAAC;AAAA,YAAK;AAAA,YAAc;AAAA,YAAgB,IAAI,IAAI;AAAA,WAAK;AAAA,UAChD,mBACC,4CAAC;AAAA,YACC,IAAI,IAAI;AAAA,YACR;AAAA,YACA;AAAA,YACA,SAAS,4CAAC;AAAA,cAAgB,MAAM,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;AAAA,aAAG;AAAA,WAChF;AAAA;AAAA,SARI,IAAI,GAUZ;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { ScaleBand } from 'd3';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\nimport { FocusableRegion } from '../parts/FocusableRegion';\ninterface BarsT {\n  serie: DSChartT.InternalData;\n}\nexport const Bars = ({ serie }: BarsT) => {\n  const {\n    props: { yAxis, TooltipRenderer },\n    innerHeight,\n    xScale,\n    yScale,\n    y2Scale,\n    subGroupScale,\n    colorScale,\n    getXValue,\n    getYValue,\n    isHorizontal,\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  return (\n    <g fill={colorScale(serie.name)}>\n      {serie.data.map((bar, i) => {\n        const width = isHorizontal ? xScale(bar.value) : subGroupScale?.bandwidth();\n        const height = isHorizontal ? subGroupScale?.bandwidth() : innerHeight - finalYScale(bar.value.y ?? bar.value);\n\n        const x = getXValue(bar);\n        const y = getYValue(bar);\n\n        const transformX = isHorizontal ? 0 : subGroupScale(serie.name) + xScale(x);\n\n        // @todo find a way to create bars with linear\n        //       scale here is something but conflict with bars like {x: 'Monday', y: 10}\n        // const transformX = isHorizontal\n        //   ? 0\n        //   : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0);\n        const transformY = isHorizontal\n          ? subGroupScale(serie.name) + finalYScale(yAxis?.cols?.[i] ?? i)\n          : finalYScale(y);\n\n        return (\n          <g key={bar.key} transform={`translate(${transformX},${transformY})`}>\n            <Rect width={width} height={height} id={bar.key} />\n            {TooltipRenderer && (\n              <FocusableRegion\n                id={bar.key}\n                width={width}\n                height={height}\n                content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n              />\n            )}\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAE7B,6BAAgC;AAIzB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAa;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,gBAAgB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,SACE,4CAAC;AAAA,IAAE,MAAM,WAAW,MAAM,IAAI;AAAA,IAC3B,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,QAAQ,eAAe,OAAO,IAAI,KAAK,IAAI,eAAe,UAAU;AAC1E,YAAM,SAAS,eAAe,eAAe,UAAU,IAAI,cAAc,YAAY,IAAI,MAAM,KAAK,IAAI,KAAK;AAE7G,YAAM,IAAI,UAAU,GAAG;AACvB,YAAM,IAAI,UAAU,GAAG;AAEvB,YAAM,aAAa,eAAe,IAAI,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC;AAO1E,YAAM,aAAa,eACf,cAAc,MAAM,IAAI,IAAI,YAAY,OAAO,OAAO,MAAM,CAAC,IAC7D,YAAY,CAAC;AAEjB,aACE,6CAAC;AAAA,QAAgB,WAAW,aAAa,cAAc;AAAA,QACrD;AAAA,sDAAC;AAAA,YAAK;AAAA,YAAc;AAAA,YAAgB,IAAI,IAAI;AAAA,WAAK;AAAA,UAChD,mBACC,4CAAC;AAAA,YACC,IAAI,IAAI;AAAA,YACR;AAAA,YACA;AAAA,YACA,SAAS,4CAAC;AAAA,cAAgB,MAAM,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;AAAA,aAAG;AAAA,WAChF;AAAA;AAAA,SARI,IAAI,GAUZ;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }

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

@@ -40,7 +40,9 @@ const Line = ({ serie }) => {
     xScale,
     yScale,
     y2Scale,
-    colorScale
+    colorScale,
+    getXValue,
+    getYValue
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
   const lineTypeMap = {
@@ -48,8 +50,8 @@ const Line = ({ serie }) => {
     spline: import_d3.curveNatural
   };
   const lineD3 = (0, import_react.useMemo)(
-    () => (0, import_d3.line)().x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position)).y((d) => finalYScale(d.value.y ?? d.value)).curve(lineTypeMap[serie.type] ?? import_d3.curveLinear)(serie.data),
-    [lineTypeMap, serie.type, serie.data, xScale, xAxis?.cols, finalYScale]
+    () => (0, import_d3.line)().x((d) => xScale(getXValue(d))).y((d) => finalYScale(getYValue(d))).curve(lineTypeMap[serie.type] ?? import_d3.curveLinear)(serie.data),
+    [lineTypeMap, serie.type, serie.data, xScale, getXValue, finalYScale, getYValue]
   );
   const xTranslate = (xScale?.bandwidth?.() ?? 0) / 2;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Line.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useState } from 'react';\nimport { line, curveNatural, curveLinear } from 'd3';\nimport { StyledLine } from '../styles';\nimport { Points } from './Points';\nimport { ChartContext } from '../ChartContext';\n\nexport const Line = ({ serie }) => {\n  const {\n    props: { xAxis },\n    xScale,\n    yScale,\n    y2Scale,\n    colorScale,\n    // activeSerie,\n    // setActiveSerie,\n  } = useContext(ChartContext);\n\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n  const lineTypeMap = {\n    line: curveLinear,\n    spline: curveNatural,\n  };\n\n  const lineD3 = useMemo(\n    () =>\n      line()\n        .x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position))\n        .y((d) => finalYScale(d.value.y ?? d.value))\n        .curve(lineTypeMap[serie.type] ?? curveLinear)(serie.data),\n    [lineTypeMap, serie.type, serie.data, xScale, xAxis?.cols, finalYScale],\n  );\n\n  // we need to center the points and lines when\n  // using them in a band axis context\n  const xTranslate = (xScale?.bandwidth?.() ?? 0) / 2;\n\n  return (\n    <g\n      transform={`translate(${xTranslate}, 0)`}\n      // onMouseEnter={() => setActiveSerie(serie.key)}\n      // onMouseLeave={() => setActiveSerie('')}\n    >\n      <StyledLine d={lineD3} stroke={colorScale(serie.name)} />\n      <Points serie={serie} />\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAqD;AACrD,gBAAgD;AAChD,oBAA2B;AAC3B,oBAAuB;AACvB,0BAA6B;AAEtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAGF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AACrD,QAAM,cAAc;AAAA,IAClB,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAEA,QAAM,aAAS;AAAA,IACb,UACE,gBAAK,EACF,EAAE,CAAC,MAAM,OAAO,EAAE,MAAM,KAAK,OAAO,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EACrE,EAAE,CAAC,MAAM,YAAY,EAAE,MAAM,KAAK,EAAE,KAAK,CAAC,EAC1C,MAAM,YAAY,MAAM,SAAS,qBAAW,EAAE,MAAM,IAAI;AAAA,IAC7D,CAAC,aAAa,MAAM,MAAM,MAAM,MAAM,QAAQ,OAAO,MAAM,WAAW;AAAA,EACxE;AAIA,QAAM,cAAc,QAAQ,YAAY,KAAK,KAAK;AAElD,SACE,6CAAC;AAAA,IACC,WAAW,aAAa;AAAA,IAIxB;AAAA,kDAAC;AAAA,QAAW,GAAG;AAAA,QAAQ,QAAQ,WAAW,MAAM,IAAI;AAAA,OAAG;AAAA,MACvD,4CAAC;AAAA,QAAO;AAAA,OAAc;AAAA;AAAA,GACxB;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useMemo, useState } from 'react';\nimport { line, curveNatural, curveLinear } from 'd3';\nimport { StyledLine } from '../styles';\nimport { Points } from './Points';\nimport { ChartContext } from '../ChartContext';\n\nexport const Line = ({ serie }) => {\n  const {\n    props: { xAxis },\n    xScale,\n    yScale,\n    y2Scale,\n    colorScale,\n    getXValue,\n    getYValue,\n  } = useContext(ChartContext);\n\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n  const lineTypeMap = {\n    line: curveLinear,\n    spline: curveNatural,\n  };\n\n  const lineD3 = useMemo(\n    () =>\n      line()\n        .x((d) => xScale(getXValue(d)))\n        .y((d) => finalYScale(getYValue(d)))\n        .curve(lineTypeMap[serie.type] ?? curveLinear)(serie.data),\n    [lineTypeMap, serie.type, serie.data, xScale, getXValue, finalYScale, getYValue],\n  );\n\n  // we need to center the points and lines when\n  // using them in a band axis context\n  const xTranslate = (xScale?.bandwidth?.() ?? 0) / 2;\n\n  return (\n    <g\n      transform={`translate(${xTranslate}, 0)`}\n      // onMouseEnter={() => setActiveSerie(serie.key)}\n      // onMouseLeave={() => setActiveSerie('')}\n    >\n      <StyledLine d={lineD3} stroke={colorScale(serie.name)} />\n      <Points serie={serie} />\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAqD;AACrD,gBAAgD;AAChD,oBAA2B;AAC3B,oBAAuB;AACvB,0BAA6B;AAEtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AACrD,QAAM,cAAc;AAAA,IAClB,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAEA,QAAM,aAAS;AAAA,IACb,UACE,gBAAK,EACF,EAAE,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC,CAAC,EAC7B,EAAE,CAAC,MAAM,YAAY,UAAU,CAAC,CAAC,CAAC,EAClC,MAAM,YAAY,MAAM,SAAS,qBAAW,EAAE,MAAM,IAAI;AAAA,IAC7D,CAAC,aAAa,MAAM,MAAM,MAAM,MAAM,QAAQ,WAAW,aAAa,SAAS;AAAA,EACjF;AAIA,QAAM,cAAc,QAAQ,YAAY,KAAK,KAAK;AAElD,SACE,6CAAC;AAAA,IACC,WAAW,aAAa;AAAA,IAIxB;AAAA,kDAAC;AAAA,QAAW,GAAG;AAAA,QAAQ,QAAQ,WAAW,MAAM,IAAI;AAAA,OAAG;AAAA,MACvD,4CAAC;AAAA,QAAO;AAAA,OAAc;AAAA;AAAA,GACxB;AAEJ;",
   "names": []
 }

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

@@ -32,6 +32,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_Point = require("./Point");
 var import_ChartContext = require("../ChartContext");
+var import_helpers = require("../helpers");
 var import_FocusableRegion = require("../parts/FocusableRegion");
 const Points = ({ serie }) => {
   const {
@@ -39,6 +40,8 @@ const Points = ({ serie }) => {
     xScale,
     y2Scale,
     yScale,
+    getXValue,
+    getYValue,
     stackedData,
     props: { xAxis, data, TooltipRenderer, types }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
@@ -49,10 +52,12 @@ const Points = ({ serie }) => {
       fill: colorScale(serie.name),
       children: serie.data.map((point, i) => {
         const { pointRadius } = serie;
-        const x = point.value.x ?? xAxis?.cols?.[point.position];
-        const y = point.value.y ?? point.value;
+        const serieWithStackedValues = (0, import_helpers.getStackedData)(stackedData, serie);
+        const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;
+        const x = getXValue(point);
+        const y = getYValue(point);
         const xPosition = xScale(x);
-        const yPosition = finalYScale(y);
+        const yPosition = finalYScale(y + deltaY);
         return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
           transform: `translate(${xPosition},${yPosition})`,
           children: [
@@ -77,7 +82,7 @@ const Points = ({ serie }) => {
         }, `${point.key}-p`);
       })
     }),
-    [TooltipRenderer, colorScale, finalYScale, opacity, serie, xAxis?.cols, xScale]
+    [TooltipRenderer, colorScale, finalYScale, getXValue, opacity, serie, stackedData, xScale]
   );
   return render;
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Points.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Point } from './Point';\nimport { ChartContext } from '../ChartContext';\n// import { getStackedData } from '../helpers';\nimport { FocusableRegion } from '../parts/FocusableRegion';\n\nexport const Points = ({ serie }) => {\n  const {\n    colorScale,\n    xScale,\n    y2Scale,\n    yScale,\n    stackedData,\n    props: { xAxis, data, TooltipRenderer, types },\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const opacity = useMemo(() => (types === 'scatter' ? 0.8 : 1), [serie.type]);\n  const render = useMemo(\n    () => (\n      <g fill={colorScale(serie.name)}>\n        {serie.data.map((point, i) => {\n          const { pointRadius } = serie;\n          // const serieWithStackedValues = getStackedData(stackedData, serie);\n          // const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;\n          const x = point.value.x ?? xAxis?.cols?.[point.position];\n          const y = point.value.y ?? point.value;\n          const xPosition = xScale(x);\n          // const yPosition = finalYScale(y + deltaY);\n          const yPosition = finalYScale(y);\n\n          return (\n            <g\n              key={`${point.key}-p`}\n              transform={`translate(${xPosition},${yPosition})`}\n              // onMouseEnter={() => setActiveSerie(serie.key)}\n              // onMouseLeave={() => setActiveSerie('')}\n            >\n              <Point pointRadius={pointRadius} id={point.key} opacity={opacity} x={xPosition} y={yPosition} />\n              {TooltipRenderer && (\n                <FocusableRegion\n                  id={point.key}\n                  width={pointRadius * 2}\n                  height={pointRadius * 2}\n                  pointRadius={pointRadius}\n                  style={{ transform: `translate(-${pointRadius}px, -${pointRadius}px)` }}\n                  content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n                />\n              )}\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [TooltipRenderer, colorScale, finalYScale, opacity, serie, xAxis?.cols, xScale],\n  );\n  return render;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA2C;AAC3C,mBAAsB;AACtB,0BAA6B;AAE7B,6BAAgC;AAEzB,MAAM,SAAS,CAAC,EAAE,MAAM,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,MAAM,iBAAiB,MAAM;AAAA,EAC/C,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,cAAU,sBAAQ,MAAO,UAAU,YAAY,MAAM,GAAI,CAAC,MAAM,IAAI,CAAC;AAC3E,QAAM,aAAS;AAAA,IACb,MACE,4CAAC;AAAA,MAAE,MAAM,WAAW,MAAM,IAAI;AAAA,MAC3B,gBAAM,KAAK,IAAI,CAAC,OAAO,MAAM;AAC5B,cAAM,EAAE,YAAY,IAAI;AAGxB,cAAM,IAAI,MAAM,MAAM,KAAK,OAAO,OAAO,MAAM;AAC/C,cAAM,IAAI,MAAM,MAAM,KAAK,MAAM;AACjC,cAAM,YAAY,OAAO,CAAC;AAE1B,cAAM,YAAY,YAAY,CAAC;AAE/B,eACE,6CAAC;AAAA,UAEC,WAAW,aAAa,aAAa;AAAA,UAIrC;AAAA,wDAAC;AAAA,cAAM;AAAA,cAA0B,IAAI,MAAM;AAAA,cAAK;AAAA,cAAkB,GAAG;AAAA,cAAW,GAAG;AAAA,aAAW;AAAA,YAC7F,mBACC,4CAAC;AAAA,cACC,IAAI,MAAM;AAAA,cACV,OAAO,cAAc;AAAA,cACrB,QAAQ,cAAc;AAAA,cACtB;AAAA,cACA,OAAO,EAAE,WAAW,cAAc,mBAAmB,iBAAiB;AAAA,cACtE,SAAS,4CAAC;AAAA,gBAAgB,MAAM,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;AAAA,eAAG;AAAA,aAChF;AAAA;AAAA,WAdG,GAAG,MAAM,OAgBhB;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IAEF,CAAC,iBAAiB,YAAY,aAAa,SAAS,OAAO,OAAO,MAAM,MAAM;AAAA,EAChF;AACA,SAAO;AACT;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Point } from './Point';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData } from '../helpers';\nimport { FocusableRegion } from '../parts/FocusableRegion';\n\nexport const Points = ({ serie }) => {\n  const {\n    colorScale,\n    xScale,\n    y2Scale,\n    yScale,\n    getXValue,\n    getYValue,\n    stackedData,\n    props: { xAxis, data, TooltipRenderer, types },\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const opacity = useMemo(() => (types === 'scatter' ? 0.8 : 1), [serie.type]);\n  const render = useMemo(\n    () => (\n      <g fill={colorScale(serie.name)}>\n        {serie.data.map((point, i) => {\n          const { pointRadius } = serie;\n          // we need to recalculate the height  with stacked data if is an AREA STACKED ELEMENT\n          const serieWithStackedValues = getStackedData(stackedData, serie);\n          const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;\n          const x = getXValue(point);\n          const y = getYValue(point);\n          const xPosition = xScale(x);\n          const yPosition = finalYScale(y + deltaY);\n\n          return (\n            <g\n              key={`${point.key}-p`}\n              transform={`translate(${xPosition},${yPosition})`}\n              // onMouseEnter={() => setActiveSerie(serie.key)}\n              // onMouseLeave={() => setActiveSerie('')}\n            >\n              <Point pointRadius={pointRadius} id={point.key} opacity={opacity} x={xPosition} y={yPosition} />\n              {TooltipRenderer && (\n                <FocusableRegion\n                  id={point.key}\n                  width={pointRadius * 2}\n                  height={pointRadius * 2}\n                  pointRadius={pointRadius}\n                  style={{ transform: `translate(-${pointRadius}px, -${pointRadius}px)` }}\n                  content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n                />\n              )}\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [TooltipRenderer, colorScale, finalYScale, getXValue, opacity, serie, stackedData, xScale],\n  );\n  return render;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA2C;AAC3C,mBAAsB;AACtB,0BAA6B;AAC7B,qBAA+B;AAC/B,6BAAgC;AAEzB,MAAM,SAAS,CAAC,EAAE,MAAM,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,MAAM,iBAAiB,MAAM;AAAA,EAC/C,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,cAAU,sBAAQ,MAAO,UAAU,YAAY,MAAM,GAAI,CAAC,MAAM,IAAI,CAAC;AAC3E,QAAM,aAAS;AAAA,IACb,MACE,4CAAC;AAAA,MAAE,MAAM,WAAW,MAAM,IAAI;AAAA,MAC3B,gBAAM,KAAK,IAAI,CAAC,OAAO,MAAM;AAC5B,cAAM,EAAE,YAAY,IAAI;AAExB,cAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,cAAM,SAAS,yBAAyB,uBAAuB,GAAG,KAAK;AACvE,cAAM,IAAI,UAAU,KAAK;AACzB,cAAM,IAAI,UAAU,KAAK;AACzB,cAAM,YAAY,OAAO,CAAC;AAC1B,cAAM,YAAY,YAAY,IAAI,MAAM;AAExC,eACE,6CAAC;AAAA,UAEC,WAAW,aAAa,aAAa;AAAA,UAIrC;AAAA,wDAAC;AAAA,cAAM;AAAA,cAA0B,IAAI,MAAM;AAAA,cAAK;AAAA,cAAkB,GAAG;AAAA,cAAW,GAAG;AAAA,aAAW;AAAA,YAC7F,mBACC,4CAAC;AAAA,cACC,IAAI,MAAM;AAAA,cACV,OAAO,cAAc;AAAA,cACrB,QAAQ,cAAc;AAAA,cACtB;AAAA,cACA,OAAO,EAAE,WAAW,cAAc,mBAAmB,iBAAiB;AAAA,cACtE,SAAS,4CAAC;AAAA,gBAAgB,MAAM,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;AAAA,eAAG;AAAA,aAChF;AAAA;AAAA,WAdG,GAAG,MAAM,OAgBhB;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IAEF,CAAC,iBAAiB,YAAY,aAAa,WAAW,SAAS,OAAO,aAAa,MAAM;AAAA,EAC3F;AACA,SAAO;AACT;",
   "names": []
 }

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

@@ -28,5 +28,4 @@ __reExport(series_exports, require("./StackedBar"), module.exports);
 __reExport(series_exports, require("./Points"), module.exports);
 __reExport(series_exports, require("./Line"), module.exports);
 __reExport(series_exports, require("./Area"), module.exports);
-__reExport(series_exports, require("./Pie"), module.exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './Rect';\nexport * from './Bars';\nexport * from './StackedBar';\nexport * from './Points';\nexport * from './Line';\nexport * from './Area';\nexport * from './Pie';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,2BAAc,mBAAd;AACA,2BAAc,mBADd;AAEA,2BAAc,yBAFd;AAGA,2BAAc,qBAHd;AAIA,2BAAc,mBAJd;AAKA,2BAAc,mBALd;AAMA,2BAAc,kBANd;",
+  "sourcesContent": ["export * from './Rect';\nexport * from './Bars';\nexport * from './StackedBar';\nexport * from './Points';\nexport * from './Line';\nexport * from './Area';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,2BAAc,mBAAd;AACA,2BAAc,mBADd;AAEA,2BAAc,yBAFd;AAGA,2BAAc,qBAHd;AAIA,2BAAc,mBAJd;AAKA,2BAAc,mBALd;",
   "names": []
 }

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

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { useMemo, useState, useRef } from "react";
+import { useMemo, useState, useRef, useCallback } from "react";
 import { useScales } from "./useScales";
 import { stackData } from "../helpers";
 const useChart = (props) => {
-  const { series, yAxis, width, height, groups: groupsStacked } = props;
+  const { series, yAxis, xAxis, width, height, groups: groupsStacked } = props;
   const containerRef = useRef(null);
   const svgRef = useRef(null);
   const [isGrabbed, setIsGrabbed] = useState(false);
@@ -22,14 +22,28 @@ const useChart = (props) => {
   const [rightLegend, setRightLegend] = useState(null);
   const [topLegend, setTopLegend] = useState(null);
   const [bottomLegend, setBottomLegend] = useState(null);
+  const [rightLabel, setRightLabel] = useState(null);
+  const [leftLabel, setLeftLabel] = useState(null);
+  const [bottomLabel, setBottomLabel] = useState(null);
   const internalMargin = useMemo(
     () => ({
-      bottom: 10 + (axisBottomHeight?.getBoundingClientRect().height ?? 0) + (bottomLegend?.getBoundingClientRect().height ?? 0),
+      bottom: 10 + (axisBottomHeight?.getBoundingClientRect().height ?? 0) + (bottomLegend?.getBoundingClientRect().height ?? 0) + (bottomLabel?.getBoundingClientRect().height ?? 0),
       top: 10 + (topLegend?.getBoundingClientRect().height ?? 0),
-      right: 10 + (axisRightWidth?.getBoundingClientRect().width ?? 0) + (rightLegend?.getBoundingClientRect().width ?? 0),
-      left: 10 + (axisLeftWidth?.getBoundingClientRect().width ?? 0) + (leftLegend?.getBoundingClientRect().width ?? 0)
+      right: 10 + (rightLabel?.getBoundingClientRect().width ?? 0) + (axisRightWidth?.getBoundingClientRect().width ?? 0) + (rightLegend?.getBoundingClientRect().width ?? 0),
+      left: 10 + (axisLeftWidth?.getBoundingClientRect().width ?? 0) + (leftLabel?.getBoundingClientRect().width ?? 0) + (leftLegend?.getBoundingClientRect().width ?? 0)
     }),
-    [axisBottomHeight, axisLeftWidth, axisRightWidth, bottomLegend, leftLegend, rightLegend, topLegend]
+    [
+      axisBottomHeight,
+      axisLeftWidth,
+      axisRightWidth,
+      bottomLegend,
+      leftLabel,
+      leftLegend,
+      rightLabel,
+      rightLegend,
+      topLegend,
+      bottomLabel
+    ]
   );
   const innerWidth = useMemo(
     () => width - internalMargin.left - internalMargin.right,
@@ -39,10 +53,7 @@ const useChart = (props) => {
     () => height - internalMargin.top - internalMargin.bottom,
     [internalMargin.top, internalMargin.bottom, height]
   );
-  const groups = useMemo(() => series.map((serie) => serie.name), []);
-  const stackedData = useMemo(() => stackData(groupsStacked, series), [groupsStacked, series]);
-  const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? 1;
-  const currentData = useMemo(
+  const [currentData, setCurrentData] = useState(
     () => series.map((d, i) => ({
       ...d,
       originalData: d,
@@ -52,8 +63,14 @@ const useChart = (props) => {
         value,
         position: index
       }))
-    })),
-    [series]
+    }))
+  );
+  const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);
+  const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? 1;
+  const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);
+  const visibleGroups = useMemo(
+    () => currentData.filter((serie) => !serie.isHidden).map((serie) => serie.name),
+    [currentData]
   );
   const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({
     props,
@@ -64,12 +81,22 @@ const useChart = (props) => {
     currentData,
     containerRatio
   });
+  const isHorizontal = useMemo(() => !!yScale.bandwidth, [yScale]);
+  const getXValue = useCallback(
+    (datum) => !isHorizontal ? xAxis?.cols?.[datum.position] ?? datum.value.x ?? datum.position : datum.value.x ?? datum.value,
+    [isHorizontal, xAxis?.cols]
+  );
+  const getYValue = useCallback(
+    (datum) => !isHorizontal ? datum.value.y ?? datum.value : yAxis?.cols?.[datum.position] ?? datum.value.x ?? datum.position,
+    [isHorizontal, yAxis?.cols]
+  );
   return useMemo(
     () => ({
       props: { ...props, data: currentData },
       innerHeight,
       innerWidth,
       groups,
+      visibleGroups,
       colorScale,
       stackedData,
       subGroupScale,
@@ -103,10 +130,23 @@ const useChart = (props) => {
       setAxisLeftWidth,
       setLeftLegend,
       setRightLegend,
+      rightLegend,
       setTopLegend,
       setBottomLegend,
       setAxisBottomHeight,
-      setAxisRightWidth
+      axisBottomHeight,
+      setAxisRightWidth,
+      setRightLabel,
+      setBottomLabel,
+      bottomLabel,
+      rightLabel,
+      axisRightWidth,
+      getXValue,
+      getYValue,
+      isHorizontal,
+      setCurrentData,
+      setLeftLabel,
+      leftLabel
     }),
     [
       props,
@@ -114,6 +154,7 @@ const useChart = (props) => {
       innerHeight,
       innerWidth,
       groups,
+      visibleGroups,
       colorScale,
       stackedData,
       subGroupScale,
@@ -132,11 +173,15 @@ const useChart = (props) => {
       setIsGrabbed,
       startPosition,
       setStartPosition,
+      rightLabel,
+      rightLegend,
+      bottomLabel,
       isScrollbarVisible,
       setIsScrollbarVisible,
       oldLastPosition,
       containerRatio,
       internalMargin,
+      axisBottomHeight,
       axisLeftWidth,
       leftLegend,
       setAxisLeftWidth,
@@ -145,7 +190,16 @@ const useChart = (props) => {
       setTopLegend,
       setBottomLegend,
       setAxisBottomHeight,
-      setAxisRightWidth
+      setAxisRightWidth,
+      setRightLabel,
+      setBottomLabel,
+      getXValue,
+      getYValue,
+      isHorizontal,
+      setCurrentData,
+      axisRightWidth,
+      setLeftLabel,
+      leftLabel
     ]
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useChart.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useRef, useEffect } from 'react';\n\n// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSChartT } from '../react-desc-prop-types';\n// import { propTypes } from '../react-desc-prop-types';\nimport { useScales } from './useScales';\nimport { stackData } from '../helpers';\nexport const useChart = (props: DSChartT.Props) => {\n  // useValidateTypescriptPropTypes(props, propTypes);\n\n  const { series, yAxis, width, height, groups: groupsStacked } = props;\n\n  const containerRef = useRef(null);\n  const svgRef = useRef(null);\n\n  const [isGrabbed, setIsGrabbed] = useState(false);\n  const [startPosition, setStartPosition] = useState(0);\n\n  const [activePoint, setActivePoint] = useState('');\n  const [activeSerie, setActiveSerie] = useState('');\n  const [scrapperPosY, setScrapperPosY] = useState('');\n  const [scrapperPosX, setScrapperPosX] = useState('');\n  const [xScrollbarPosition, setXScrollbarPosition] = useState(0);\n  const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);\n  const oldLastPosition = useRef(0);\n\n  const [axisLeftWidth, setAxisLeftWidth] = useState(null);\n  const [axisBottomHeight, setAxisBottomHeight] = useState(null);\n  const [axisRightWidth, setAxisRightWidth] = useState(null);\n\n  const [leftLegend, setLeftLegend] = useState(null);\n  const [rightLegend, setRightLegend] = useState(null);\n  const [topLegend, setTopLegend] = useState(null);\n  const [bottomLegend, setBottomLegend] = useState(null);\n\n  // @todo create a useInternalMargin\n  const internalMargin = useMemo(\n    () => ({\n      bottom:\n        10 +\n        (axisBottomHeight?.getBoundingClientRect().height ?? 0) +\n        (bottomLegend?.getBoundingClientRect().height ?? 0),\n      top: 10 + (topLegend?.getBoundingClientRect().height ?? 0),\n      right:\n        10 + (axisRightWidth?.getBoundingClientRect().width ?? 0) + (rightLegend?.getBoundingClientRect().width ?? 0),\n      left: 10 + (axisLeftWidth?.getBoundingClientRect().width ?? 0) + (leftLegend?.getBoundingClientRect().width ?? 0),\n    }),\n    [axisBottomHeight, axisLeftWidth, axisRightWidth, bottomLegend, leftLegend, rightLegend, topLegend],\n  );\n  const innerWidth = useMemo(\n    () => width - internalMargin.left - internalMargin.right,\n    [internalMargin.left, internalMargin.right, width],\n  );\n  const innerHeight = useMemo(\n    () => height - internalMargin.top - internalMargin.bottom,\n    [internalMargin.top, internalMargin.bottom, height],\n  );\n  const groups = useMemo(() => series.map((serie) => serie.name), []);\n  const stackedData = useMemo(() => stackData(groupsStacked, series), [groupsStacked, series]);\n  // @TODO we need to create a logic to get this from both axis\n  const containerRatio = (props?.xAxis.advanced?.pointSpacing?.value as number) ?? 1;\n\n  const currentData = useMemo(\n    () =>\n      series.map((d, i) => ({\n        ...d,\n        originalData: d,\n        key: `${d.name}-${i}`,\n        data: d.data.map((value, index) => ({\n          key: `${d.name}-${i}-${index}`,\n          value,\n          position: index,\n        })),\n      })),\n    [series],\n  );\n\n  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({\n    props,\n    innerHeight,\n    innerWidth,\n    groups,\n    stackedData,\n    currentData,\n    containerRatio,\n  });\n\n  return useMemo(\n    () => ({\n      props: { ...props, data: currentData },\n      innerHeight,\n      innerWidth,\n      groups,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      svgRef,\n      xScale,\n      yScale,\n      y2Scale,\n      containerRef,\n      getBandwidth,\n      scrapperPosY,\n      setScrapperPosY,\n      scrapperPosX,\n      setScrapperPosX,\n      activePoint,\n      setActivePoint,\n      activeSerie,\n      setActiveSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      startPosition,\n      setStartPosition,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      oldLastPosition,\n      containerRatio,\n      internalMargin,\n      axisLeftWidth,\n      leftLegend,\n      setAxisLeftWidth,\n      setLeftLegend,\n      setRightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomHeight,\n      setAxisRightWidth,\n    }),\n    [\n      props,\n      currentData,\n      innerHeight,\n      innerWidth,\n      groups,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      scrapperPosX,\n      setScrapperPosX,\n      xScale,\n      yScale,\n      y2Scale,\n      getBandwidth,\n      scrapperPosY,\n      activePoint,\n      activeSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      startPosition,\n      setStartPosition,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      oldLastPosition,\n      containerRatio,\n      internalMargin,\n      axisLeftWidth,\n      leftLegend,\n      setAxisLeftWidth,\n      setLeftLegend,\n      setRightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomHeight,\n      setAxisRightWidth,\n    ],\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useRef, useEffect, useCallback } from 'react';\n\n// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSChartT } from '../react-desc-prop-types';\n// import { propTypes } from '../react-desc-prop-types';\nimport { useScales } from './useScales';\nimport { stackData } from '../helpers';\nexport const useChart = (props: DSChartT.Props) => {\n  // useValidateTypescriptPropTypes(props, propTypes);\n\n  const { series, yAxis, xAxis, width, height, groups: groupsStacked } = props;\n\n  const containerRef = useRef(null);\n  const svgRef = useRef(null);\n\n  const [isGrabbed, setIsGrabbed] = useState(false);\n  const [startPosition, setStartPosition] = useState(0);\n\n  const [activePoint, setActivePoint] = useState('');\n  const [activeSerie, setActiveSerie] = useState('');\n  const [scrapperPosY, setScrapperPosY] = useState('');\n  const [scrapperPosX, setScrapperPosX] = useState('');\n  const [xScrollbarPosition, setXScrollbarPosition] = useState(0);\n  const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);\n  const oldLastPosition = useRef(0);\n\n  const [axisLeftWidth, setAxisLeftWidth] = useState(null);\n  const [axisBottomHeight, setAxisBottomHeight] = useState(null);\n  const [axisRightWidth, setAxisRightWidth] = useState(null);\n\n  const [leftLegend, setLeftLegend] = useState(null);\n  const [rightLegend, setRightLegend] = useState(null);\n  const [topLegend, setTopLegend] = useState(null);\n  const [bottomLegend, setBottomLegend] = useState(null);\n\n  const [rightLabel, setRightLabel] = useState(null);\n  const [leftLabel, setLeftLabel] = useState(null);\n  const [bottomLabel, setBottomLabel] = useState(null);\n\n  // @todo create a useInternalMargin\n  const internalMargin = useMemo(\n    () => ({\n      bottom:\n        10 +\n        (axisBottomHeight?.getBoundingClientRect().height ?? 0) +\n        (bottomLegend?.getBoundingClientRect().height ?? 0) +\n        (bottomLabel?.getBoundingClientRect().height ?? 0),\n      top: 10 + (topLegend?.getBoundingClientRect().height ?? 0),\n      right:\n        10 +\n        (rightLabel?.getBoundingClientRect().width ?? 0) +\n        (axisRightWidth?.getBoundingClientRect().width ?? 0) +\n        (rightLegend?.getBoundingClientRect().width ?? 0),\n      left:\n        10 +\n        (axisLeftWidth?.getBoundingClientRect().width ?? 0) +\n        (leftLabel?.getBoundingClientRect().width ?? 0) +\n        (leftLegend?.getBoundingClientRect().width ?? 0),\n    }),\n\n    [\n      axisBottomHeight,\n      axisLeftWidth,\n      axisRightWidth,\n      bottomLegend,\n      leftLabel,\n      leftLegend,\n      rightLabel,\n      rightLegend,\n      topLegend,\n      bottomLabel,\n    ],\n  );\n  const innerWidth = useMemo(\n    () => width - internalMargin.left - internalMargin.right,\n    [internalMargin.left, internalMargin.right, width],\n  );\n  const innerHeight = useMemo(\n    () => height - internalMargin.top - internalMargin.bottom,\n    [internalMargin.top, internalMargin.bottom, height],\n  );\n\n  const [currentData, setCurrentData] = useState(() =>\n    series.map((d, i) => ({\n      ...d,\n      originalData: d,\n      key: `${d.name}-${i}`,\n      data: d.data.map((value, index) => ({\n        key: `${d.name}-${i}-${index}`,\n        value,\n        position: index,\n      })),\n    })),\n  );\n  const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);\n  // @TODO we need to create a logic to get this from both axis\n  const containerRatio = (props?.xAxis.advanced?.pointSpacing?.value as number) ?? 1;\n\n  const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);\n\n  const visibleGroups = useMemo(\n    () => currentData.filter((serie) => !serie.isHidden).map((serie) => serie.name),\n    [currentData],\n  );\n\n  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({\n    props,\n    innerHeight,\n    innerWidth,\n    groups,\n    stackedData,\n    currentData,\n    containerRatio,\n  });\n\n  const isHorizontal = useMemo(() => !!yScale.bandwidth, [yScale]);\n\n  const getXValue = useCallback(\n    (datum) =>\n      !isHorizontal ? xAxis?.cols?.[datum.position] ?? datum.value.x ?? datum.position : datum.value.x ?? datum.value,\n    [isHorizontal, xAxis?.cols],\n  );\n\n  const getYValue = useCallback(\n    (datum) =>\n      !isHorizontal ? datum.value.y ?? datum.value : yAxis?.cols?.[datum.position] ?? datum.value.x ?? datum.position,\n    [isHorizontal, yAxis?.cols],\n  );\n\n  return useMemo(\n    () => ({\n      props: { ...props, data: currentData },\n      innerHeight,\n      innerWidth,\n      //  @todo change this to series and visible series\n      groups,\n      visibleGroups,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      svgRef,\n      xScale,\n      yScale,\n      y2Scale,\n      containerRef,\n      getBandwidth,\n      scrapperPosY,\n      setScrapperPosY,\n      scrapperPosX,\n      setScrapperPosX,\n      activePoint,\n      setActivePoint,\n      activeSerie,\n      setActiveSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      startPosition,\n      setStartPosition,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      oldLastPosition,\n      containerRatio,\n      internalMargin,\n      axisLeftWidth,\n      leftLegend,\n      setAxisLeftWidth,\n      setLeftLegend,\n      setRightLegend,\n      rightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomHeight,\n      axisBottomHeight,\n      setAxisRightWidth,\n      setRightLabel,\n      setBottomLabel,\n      bottomLabel,\n      rightLabel,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      setCurrentData,\n      setLeftLabel,\n      leftLabel,\n    }),\n    [\n      props,\n      currentData,\n      innerHeight,\n      innerWidth,\n      groups,\n      visibleGroups,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      scrapperPosX,\n      setScrapperPosX,\n      xScale,\n      yScale,\n      y2Scale,\n      getBandwidth,\n      scrapperPosY,\n      activePoint,\n      activeSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      startPosition,\n      setStartPosition,\n      rightLabel,\n      rightLegend,\n      bottomLabel,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      oldLastPosition,\n      containerRatio,\n      internalMargin,\n      axisBottomHeight,\n      axisLeftWidth,\n      leftLegend,\n      setAxisLeftWidth,\n      setLeftLegend,\n      setRightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomHeight,\n      setAxisRightWidth,\n      setRightLabel,\n      setBottomLabel,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      setCurrentData,\n      axisRightWidth,\n      setLeftLabel,\n      leftLabel,\n    ],\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -13,7 +13,7 @@ const useKeyboardNavigation = () => {
     activePoint,
     setActivePoint,
     containerRef,
-    groups,
+    visibleGroups,
     yScale,
     xScale,
     setXScrollbarPosition,
@@ -22,7 +22,7 @@ const useKeyboardNavigation = () => {
     innerWidth,
     props: { data, xAxis }
   } = useContext(ChartContext);
-  const [currentFocusedDataset, setCurrentFocusedDataset] = useState(groups[0]);
+  const [currentFocusedDataset, setCurrentFocusedDataset] = useState(visibleGroups[0]);
   const currentGroup = useMemo(() => data.find((d) => d.name === currentFocusedDataset), [currentFocusedDataset, data]);
   const currentItemIndex = useMemo(
     () => currentGroup.data.findIndex((opt) => opt.key === activePoint),
@@ -54,11 +54,17 @@ const useKeyboardNavigation = () => {
       setActivePoint(currentGroup.data[newValue].key);
       if (containerRatio > 1) {
         const xValue = xScale(xAxis.cols[currentGroup.data[newValue].position]);
+        const barWidth = innerWidth / containerRatio;
         const total = innerWidth * containerRatio;
         if (total <= xValue) {
           setXScrollbarPosition((total - innerWidth) / containerRatio);
         } else if (xValue > xScrollbarPosition * containerRatio + innerWidth)
-          setXScrollbarPosition((prev) => prev + 10);
+          setXScrollbarPosition((prev) => {
+            const nextPosition = prev + (xValue / containerRatio - prev);
+            if (nextPosition + barWidth > innerWidth)
+              return innerWidth - barWidth;
+            return nextPosition;
+          });
         else if (xValue < xScrollbarPosition * containerRatio)
           setXScrollbarPosition(xValue / containerRatio);
       }
@@ -79,16 +85,16 @@ const useKeyboardNavigation = () => {
     (step) => {
       setCurrentFocusedDataset((prev) => {
         const nextGroup = findInCircularList(
-          groups,
-          groups.findIndex((item) => item === prev),
+          visibleGroups,
+          visibleGroups.findIndex((item) => item === prev),
           step
         );
-        const nextGroupData = data.find((d) => d.name === groups[nextGroup]);
+        const nextGroupData = data.find((d) => d.name === visibleGroups[nextGroup]);
         setActivePoint(nextGroupData.data[currentItemIndex].key);
-        return groups[nextGroup];
+        return visibleGroups[nextGroup];
       });
     },
-    [currentItemIndex, data, setActivePoint, groups]
+    [currentItemIndex, data, setActivePoint, visibleGroups]
   );
   const onInputKeyDown = useCallback(
     (e) => {