npm - @elliemae/ds-dataviz - Versions diffs - 3.12.0-rc.2 → 3.12.0-rc.4 - Mend

@elliemae/ds-dataviz 3.12.0-rc.2 → 3.12.0-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (153) hide show

package/dist/cjs/graphs/Chart/Chart.js CHANGED Viewed

@@ -34,9 +34,6 @@ var import_ChartContext = require("./ChartContext");
 var import_useChart = require("./config/useChart");
 const Chart = (props) => {
   const ctx = (0, import_useChart.useChart)(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartContext.ChartContext.Provider, {
-    value: ctx,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartContainer.ChartContainer, {})
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartContext.ChartContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartContainer.ChartContainer, {}) });
 };
 //# sourceMappingURL=Chart.js.map

package/dist/cjs/graphs/Chart/Chart.js.map CHANGED Viewed

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/graphs/Chart/Chart.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React from 'react';\nimport { ChartContainer } from './parts/ChartContainer';\nimport { ChartContext } from './ChartContext';\nimport { useChart } from './config/useChart';\nimport type { DSChartT } from './react-desc-prop-types';\nexport const Chart: React.ComponentType<DSChartT.Props> = (props) => {\n  const ctx = useChart(props);\n  return (\n    <ChartContext.Provider value={ctx}>\n      <ChartContainer />\n    </ChartContext.Provider>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADSjB;AARN,4BAA+B;AAC/B,0BAA6B;AAC7B,sBAAyB;AAElB,MAAM,QAA6C,CAAC,UAAU;AACnE,QAAM,UAAM,0BAAS,KAAK;AAC1B,SACE,4CAAC,iCAAa,UAAb;AAAA,IAAsB,OAAO;AAAA,IAC5B,sDAAC,wCAAe;AAAA,GAClB;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADSjB;AARN,4BAA+B;AAC/B,0BAA6B;AAC7B,sBAAyB;AAElB,MAAM,QAA6C,CAAC,UAAU;AACnE,QAAM,UAAM,0BAAS,KAAK;AAC1B,SACE,4CAAC,iCAAa,UAAb,EAAsB,OAAO,KAC5B,sDAAC,wCAAe,GAClB;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/config/useKeyboardNavigation.js CHANGED Viewed

@@ -31,7 +31,6 @@ module.exports = __toCommonJS(useKeyboardNavigation_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
 var import_ChartContext = require("../ChartContext");
-var import_constants = require("../../constants");
 const findInCircularList = (list, from, step = 1) => {
   for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
     if (list[i])
@@ -55,10 +54,10 @@ const useKeyboardNavigation = () => {
     getYScaleValue,
     groups,
     currentData: data,
-    props: { xAxis, yAxis }
+    props: { xAxis, yAxis, xScroll, yScroll }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;
-  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
+  const xScrollable = xAxis.advanced?.pointSpacing?.value > 1 || xScroll;
+  const yScrollable = yAxis.advanced?.pointSpacing?.value > 1 || yScroll;
   const currentSerie = (0, import_react.useMemo)(
     () => data.find((d) => d.name === activePoint?.serie) ?? data[0],
     [activePoint?.serie, data]
@@ -91,7 +90,7 @@ const useKeyboardNavigation = () => {
         step
       );
       setActivePoint(currentSerie?.data[newValue]);
-      if (xScroll) {
+      if (xScrollable) {
         const xValue = getXScaleValue(currentSerie?.data[newValue]);
         if (xValue === void 0)
           return;
@@ -107,9 +106,9 @@ const useKeyboardNavigation = () => {
             return nextPosition;
           });
         else if (xValue < xScrollbarPosition * containerRatio)
-          setXScrollbarPosition(xValue / containerRatio - import_constants.FOCUS_RING.STROKE_WIDTH);
+          setXScrollbarPosition(xValue / containerRatio);
       }
-      if (yScroll) {
+      if (yScrollable) {
         const yValue = getYScaleValue(currentSerie?.data[newValue]);
         if (yValue === void 0)
           return;
@@ -125,15 +124,15 @@ const useKeyboardNavigation = () => {
             return nextPosition;
           });
         else if (yValue < xScrollbarPosition * containerRatio)
-          setXScrollbarPosition(yValue / containerRatio - import_constants.FOCUS_RING.STROKE_WIDTH);
+          setXScrollbarPosition(yValue / containerRatio);
       }
     },
     [
       currentSerie?.data,
       currentActiveItemIndex,
       setActivePoint,
-      xScroll,
-      yScroll,
+      xScrollable,
+      yScrollable,
       getXScaleValue,
       innerWidth,
       containerRatio,

package/dist/cjs/graphs/Chart/config/useKeyboardNavigation.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/config/useKeyboardNavigation.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { FOCUS_RING } from '../../constants';\nexport const findInCircularList = (\n  list: string[],\n  from: number,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from > -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (list[i]) return i;\n  }\n  return from; // return same item\n};\n\nexport const useKeyboardNavigation = () => {\n  const {\n    activePoint,\n    setActivePoint,\n    containerRef,\n    yScale,\n    setXScrollbarPosition,\n    containerRatio,\n    xScrollbarPosition,\n    innerWidth,\n    innerHeight,\n    getYValue,\n    getXScaleValue,\n    getYScaleValue,\n    groups,\n    currentData: data,\n    props: { xAxis, yAxis },\n  } = useContext(ChartContext);\n\n  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n  const currentSerie = useMemo(\n    () => data.find((d) => d.name === activePoint?.serie) ?? data[0],\n    [activePoint?.serie, data],\n  );\n\n  const currentActiveItemIndex = useMemo(\n    () => currentSerie?.data.findIndex((opt) => opt.key === activePoint?.key),\n    [activePoint, currentSerie],\n  );\n\n  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      if (containerRef === e.target) {\n        setActivePoint(currentSerie?.data[0]);\n        setXScrollbarPosition(0);\n      }\n    },\n    [containerRef, currentSerie?.data, setActivePoint, setXScrollbarPosition],\n  );\n\n  const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n    setTimeout(() => {\n      if (!containerRef.contains(document.activeElement) || containerRef === document.activeElement) {\n        setActivePoint(null);\n      }\n    });\n  }, [containerRef, setActivePoint]);\n\n  const navigateSerie = useCallback(\n    (step: number) => {\n      const newValue = findInCircularList(\n        currentSerie?.data.map((d) => d.value.toString()),\n        currentActiveItemIndex,\n        step,\n      );\n      setActivePoint(currentSerie?.data[newValue]);\n      if (xScroll) {\n        const xValue = getXScaleValue(currentSerie?.data[newValue]);\n        if (xValue === undefined) return;\n        const barWidth = innerWidth / containerRatio;\n        const total = innerWidth * containerRatio;\n        if (total <= xValue) {\n          // to go from the first to last\n          setXScrollbarPosition((total - innerWidth) / containerRatio);\n        } else if (xValue > xScrollbarPosition * containerRatio + innerWidth)\n          // if is not visible we move the scroll to the next best position\n          setXScrollbarPosition((prev) => {\n            const nextPosition = prev + (xValue / containerRatio - prev);\n            if (nextPosition + barWidth > innerWidth) return innerWidth - barWidth;\n            return nextPosition;\n          });\n        // move backwards - 2 because focus ring in bars\n        else if (xValue < xScrollbarPosition * containerRatio)\n          setXScrollbarPosition(xValue / containerRatio - FOCUS_RING.STROKE_WIDTH);\n      }\n      if (yScroll) {\n        const yValue = getYScaleValue(currentSerie?.data[newValue]);\n        if (yValue === undefined) return;\n        const barWidth = innerHeight / containerRatio;\n        const total = innerHeight * containerRatio;\n        if (total <= yValue) {\n          // to go from the first to last\n          setXScrollbarPosition((total - innerHeight) / containerRatio);\n        } else if (yValue > xScrollbarPosition * containerRatio + innerHeight)\n          // if is not visible we move the scroll to the next best position\n          setXScrollbarPosition((prev) => {\n            const nextPosition = prev + (yValue / containerRatio - prev);\n            if (nextPosition + barWidth > innerHeight) return innerHeight - barWidth;\n            return nextPosition;\n          });\n        // move backwards - 2 because focus ring in bars\n        else if (yValue < xScrollbarPosition * containerRatio)\n          setXScrollbarPosition(yValue / containerRatio - FOCUS_RING.STROKE_WIDTH);\n      }\n    },\n    [\n      currentSerie?.data,\n      currentActiveItemIndex,\n      setActivePoint,\n      xScroll,\n      yScroll,\n      getXScaleValue,\n      innerWidth,\n      containerRatio,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      getYScaleValue,\n      innerHeight,\n    ],\n  );\n\n  const changeSerie = useCallback(\n    (step: number) => {\n      const nextSerie = data.find((d) => {\n        const nextSerieIndex = findInCircularList(\n          groups,\n          groups.findIndex((item) => item === currentSerie.name),\n          step,\n        );\n\n        return d.name === groups[nextSerieIndex];\n      });\n      setActivePoint(nextSerie?.data[currentActiveItemIndex] || nextSerie?.data?.[0] || null);\n    },\n    [data, setActivePoint, currentActiveItemIndex, groups, currentSerie.name],\n  );\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (e.code !== 'Tab') {\n        e.preventDefault();\n      }\n      if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n        if (yScale.bandwidth) changeSerie(e.code === 'ArrowLeft' ? -1 : 1);\n        else navigateSerie(e.code === 'ArrowLeft' ? -1 : 1);\n      }\n\n      if (['ArrowDown', 'ArrowUp'].includes(e.code)) {\n        if (yScale.bandwidth) navigateSerie(e.code === 'ArrowDown' ? 1 : -1);\n        else changeSerie(e.code === 'ArrowDown' ? -1 : 1);\n      }\n    },\n    [changeSerie, navigateSerie, yScale.bandwidth],\n  );\n\n  return useMemo(\n    () => ({ onInputKeyDown, handleOnBlur, handleOnFocus }),\n    [handleOnBlur, handleOnFocus, onInputKeyDown],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { FOCUS_RING } from '../../constants';\nexport const findInCircularList = (\n  list: string[],\n  from: number,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from > -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (list[i]) return i;\n  }\n  return from; // return same item\n};\n\nexport const useKeyboardNavigation = () => {\n  const {\n    activePoint,\n    setActivePoint,\n    containerRef,\n    yScale,\n    setXScrollbarPosition,\n    containerRatio,\n    xScrollbarPosition,\n    innerWidth,\n    innerHeight,\n    getYValue,\n    getXScaleValue,\n    getYScaleValue,\n    groups,\n    currentData: data,\n    props: { xAxis, yAxis, xScroll, yScroll },\n  } = useContext(ChartContext);\n\n  const xScrollable = xAxis.advanced?.pointSpacing?.value > 1 || xScroll;\n  const yScrollable = yAxis.advanced?.pointSpacing?.value > 1 || yScroll;\n\n  const currentSerie = useMemo(\n    () => data.find((d) => d.name === activePoint?.serie) ?? data[0],\n    [activePoint?.serie, data],\n  );\n\n  const currentActiveItemIndex = useMemo(\n    () => currentSerie?.data.findIndex((opt) => opt.key === activePoint?.key),\n    [activePoint, currentSerie],\n  );\n\n  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      if (containerRef === e.target) {\n        setActivePoint(currentSerie?.data[0]);\n        setXScrollbarPosition(0);\n      }\n    },\n    [containerRef, currentSerie?.data, setActivePoint, setXScrollbarPosition],\n  );\n\n  const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n    setTimeout(() => {\n      if (!containerRef.contains(document.activeElement) || containerRef === document.activeElement) {\n        setActivePoint(null);\n      }\n    });\n  }, [containerRef, setActivePoint]);\n\n  const navigateSerie = useCallback(\n    (step: number) => {\n      const newValue = findInCircularList(\n        currentSerie?.data.map((d) => d.value.toString()),\n        currentActiveItemIndex,\n        step,\n      );\n      setActivePoint(currentSerie?.data[newValue]);\n\n      if (xScrollable) {\n        const xValue = getXScaleValue(currentSerie?.data[newValue]);\n        if (xValue === undefined) return;\n        const barWidth = innerWidth / containerRatio;\n        const total = innerWidth * containerRatio;\n        if (total <= xValue) {\n          // to go from the first to last\n          setXScrollbarPosition((total - innerWidth) / containerRatio);\n        } else if (xValue > xScrollbarPosition * containerRatio + innerWidth)\n          // if is not visible we move the scroll to the next best position\n          setXScrollbarPosition((prev) => {\n            const nextPosition = prev + (xValue / containerRatio - prev);\n            if (nextPosition + barWidth > innerWidth) return innerWidth - barWidth;\n            return nextPosition;\n          });\n        // move backwards - 2 because focus ring in bars\n        else if (xValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(xValue / containerRatio);\n      }\n      if (yScrollable) {\n        const yValue = getYScaleValue(currentSerie?.data[newValue]);\n        if (yValue === undefined) return;\n        const barWidth = innerHeight / containerRatio;\n        const total = innerHeight * containerRatio;\n        if (total <= yValue) {\n          // to go from the first to last\n          setXScrollbarPosition((total - innerHeight) / containerRatio);\n        } else if (yValue > xScrollbarPosition * containerRatio + innerHeight)\n          // if is not visible we move the scroll to the next best position\n          setXScrollbarPosition((prev) => {\n            const nextPosition = prev + (yValue / containerRatio - prev);\n            if (nextPosition + barWidth > innerHeight) return innerHeight - barWidth;\n            return nextPosition;\n          });\n        // move backwards - 2 because focus ring in bars\n        else if (yValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(yValue / containerRatio);\n      }\n    },\n    [\n      currentSerie?.data,\n      currentActiveItemIndex,\n      setActivePoint,\n      xScrollable,\n      yScrollable,\n      getXScaleValue,\n      innerWidth,\n      containerRatio,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      getYScaleValue,\n      innerHeight,\n    ],\n  );\n\n  const changeSerie = useCallback(\n    (step: number) => {\n      const nextSerie = data.find((d) => {\n        const nextSerieIndex = findInCircularList(\n          groups,\n          groups.findIndex((item) => item === currentSerie.name),\n          step,\n        );\n\n        return d.name === groups[nextSerieIndex];\n      });\n      setActivePoint(nextSerie?.data[currentActiveItemIndex] || nextSerie?.data?.[0] || null);\n    },\n    [data, setActivePoint, currentActiveItemIndex, groups, currentSerie.name],\n  );\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (e.code !== 'Tab') {\n        e.preventDefault();\n      }\n      if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n        if (yScale.bandwidth) changeSerie(e.code === 'ArrowLeft' ? -1 : 1);\n        else navigateSerie(e.code === 'ArrowLeft' ? -1 : 1);\n      }\n\n      if (['ArrowDown', 'ArrowUp'].includes(e.code)) {\n        if (yScale.bandwidth) navigateSerie(e.code === 'ArrowDown' ? 1 : -1);\n        else changeSerie(e.code === 'ArrowDown' ? -1 : 1);\n      }\n    },\n    [changeSerie, navigateSerie, yScale.bandwidth],\n  );\n\n  return useMemo(\n    () => ({ onInputKeyDown, handleOnBlur, handleOnFocus }),\n    [handleOnBlur, handleOnFocus, onInputKeyDown],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/Axis/AxisBottom.js CHANGED Viewed

@@ -117,21 +117,9 @@ const AxisBottom = import_react.default.memo(() => {
   ]);
   if (xAxis.hideAxis)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-    transform: `translate(0,${innerHeight})`,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
-        ref: setAxisBottomRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxis, {
-          axisColor: xAxis.color,
-          tickColor: color,
-          ref: axisRef
-        })
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledGrid, {
-        ref: gridRef
-      })
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(0,${innerHeight})`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { ref: setAxisBottomRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxis, { axisColor: xAxis.color, tickColor: color, ref: axisRef }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledGrid, { ref: gridRef })
+  ] });
 });
 //# sourceMappingURL=AxisBottom.js.map

package/dist/cjs/graphs/Chart/parts/Axis/AxisBottom.js.map CHANGED Viewed

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Axis/AxisBottom.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport type { ScaleLinear, ScaleTime } from 'd3';\nimport { select, axisBottom, timeFormat } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport type { DSChartT } from '../../react-desc-prop-types';\nimport { useUniqueData } from '../../helpers/useUniqueData';\nimport { getFormatGenerator } from '../../helpers';\n\nexport const AxisBottom = React.memo(() => {\n  const {\n    props: { xAxis },\n    innerHeight,\n    xScale,\n    innerWidth,\n    containerRatio,\n    internalMargin,\n    isHorizontal,\n    setAxisBottomRef,\n  } = useContext(ChartContext);\n\n  const axisRef = useRef<SVGSVGElement>(null);\n  const gridRef = useRef<SVGSVGElement>(null);\n  const { tickValues, tickFormat, overwriteTicks, color, tickRotation, tickCount } =\n    xAxis.tick || ({} as DSChartT.AxisTickT);\n\n  const ticksScales = ['linear', 'time', 'log'];\n  // const ticks = xScale.ticks?.(tickCount ?? width / 100);\n\n  const uniqueData = useUniqueData();\n  useEffect(() => {\n    const grid = axisBottom(xScale as ScaleLinear<number, number>)\n      .tickSize(-innerHeight)\n      .tickFormat('')\n      .tickSizeOuter(0);\n\n    const axis = axisBottom(xScale as ScaleLinear<number, number>).tickSizeOuter(0);\n\n    if (ticksScales.includes(xAxis.type)) {\n      const ticksNum = (() => {\n        if (tickCount) return tickCount;\n        if (containerRatio > 1) {\n          return (innerWidth / 100) * containerRatio;\n        }\n        return innerWidth / 100;\n      })();\n      const ticks = (xScale as ScaleLinear<number, number> | ScaleTime<number, number, never>).ticks?.(ticksNum);\n\n      // we show the only the ticks values on the screen when zoomed enough\n      // @todo we need to improve this logic\n      if (containerRatio > 1 && uniqueData.length < 10 && !isHorizontal) {\n        const ticksName = uniqueData.map((u) => u.xValue);\n        axis.tickValues(ticksName);\n        grid.tickValues(ticksName);\n      } else if (tickValues && ticks) {\n        const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];\n        axis.tickValues(finalTicks);\n      } else {\n        axis.tickValues(ticks);\n        grid.tickValues(ticks);\n      }\n\n      if (tickFormat) {\n        if (typeof tickFormat === 'string') {\n          const formatGenerator = getFormatGenerator(xAxis.type ?? 'linear');\n          axis.tickFormat((d) => formatGenerator(tickFormat)(d));\n        }\n        if (typeof tickFormat === 'function') {\n          axis.tickFormat(tickFormat);\n        }\n      }\n    }\n\n    if (axisRef?.current && gridRef?.current) {\n      if (xAxis?.showGrid) select(gridRef.current).call(grid);\n      const axisNode = select(axisRef.current);\n      axisNode.call(axis);\n\n      // need to remove the first tick when live under the domain line\n      const firstTick = axisNode.select('.tick').node() as SVGGElement; // select all the text elements\n      if (firstTick?.getBoundingClientRect().left < internalMargin.left + 10 && !xScale.bandwidth) {\n        firstTick.remove();\n      }\n      if (tickRotation)\n        axisNode\n          .selectAll('text')\n          .style('text-anchor', tickRotation > 0 ? 'start' : 'end')\n          .attr('dx', 8 * Math.sin(Math.PI * (tickRotation / 180)))\n          .attr('dy', '.71em')\n          .attr('y', 11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1))\n          .attr('transform', `rotate(${tickRotation})`);\n    }\n  }, [\n    innerHeight,\n    overwriteTicks,\n    xAxis?.showGrid,\n    tickFormat,\n    tickValues,\n    xScale,\n    tickRotation,\n    xAxis.type,\n    ticksScales,\n    tickCount,\n    containerRatio,\n    innerWidth,\n    uniqueData.length,\n    uniqueData,\n    internalMargin.left,\n    isHorizontal,\n  ]);\n  if (xAxis.hideAxis) return null;\n  return (\n    <g transform={`translate(0,${innerHeight})`}>\n      <g ref={setAxisBottomRef}>\n        <StyledAxis axisColor={xAxis.color} tickColor={color} ref={axisRef}></StyledAxis>\n      </g>\n      <StyledGrid ref={gridRef}></StyledGrid>\n    </g>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/graphs/Chart/parts/Axis/AxisLeft.js CHANGED Viewed

@@ -90,24 +90,9 @@ const AxisLeft = () => {
   ]);
   if (yAxis.hideAxis)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
-        mask: `url(#mask-${chartId})`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledGrid, {
-          ref: gridRef
-        })
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
-        ref: setAxisLeftRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxis, {
-          axisColor,
-          ref,
-          tickColor,
-          className: "axis-left"
-        })
-      })
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { mask: `url(#mask-${chartId})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledGrid, { ref: gridRef }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { ref: setAxisLeftRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxis, { axisColor, ref, tickColor, className: "axis-left" }) })
+  ] });
 };
 //# sourceMappingURL=AxisLeft.js.map

package/dist/cjs/graphs/Chart/parts/Axis/AxisLeft.js.map CHANGED Viewed

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Axis/AxisLeft.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisLeft } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport { getFormatGenerator } from '../../helpers';\n\nexport const AxisLeft = () => {\n  const {\n    props: { yAxis },\n    innerHeight,\n    innerWidth,\n    yScale,\n    chartId,\n    height,\n    setAxisLeftRef,\n  } = useContext(ChartContext);\n\n  const ref = useRef<SVGSVGElement>(null);\n  const gridRef = useRef<SVGSVGElement>(null);\n  const { tickValues, color: tickColor, tickFormat, overwriteTicks, tickRotation, tickCount } = yAxis.tick || {};\n\n  const ticks = yScale.ticks?.(tickCount ?? height / 80);\n\n  const { type, showGrid, color: axisColor } = yAxis;\n\n  useEffect(() => {\n    const axis = axisLeft(yScale).tickSizeOuter(0);\n\n    const grid = axisLeft(yScale)\n      .tickFormat((_) => '')\n      .tickSize(showGrid ? -innerWidth : 0)\n      .tickSizeOuter(0);\n\n    if (tickValues && ticks) {\n      const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];\n      axis.tickValues(finalTicks);\n    } else {\n      axis.tickValues(ticks);\n      grid.tickValues(ticks);\n    }\n\n    if (tickFormat) {\n      if (typeof tickFormat === 'string') {\n        const formatGenerator = getFormatGenerator(type ?? 'linear');\n\n        axis.tickFormat((d) => formatGenerator(tickFormat)(d));\n      }\n      if (typeof tickFormat === 'function') {\n        axis.tickFormat(tickFormat);\n      }\n    }\n    if (ref?.current && gridRef?.current) {\n      select(gridRef.current).call(grid);\n      const axisNode = select(ref.current);\n      axisNode.call(axis);\n      if (tickRotation)\n        axisNode\n          .selectAll('text')\n          .style('text-anchor', 'end')\n          .attr('dx', '-.8em')\n          .attr('dy', '.15em')\n          .attr('transform', `rotate(-${tickRotation})`);\n    }\n  }, [\n    innerHeight,\n    innerWidth,\n    overwriteTicks,\n    showGrid,\n    tickFormat,\n    tickRotation,\n    tickValues,\n    ticks,\n    type,\n    yAxis,\n    yScale,\n  ]);\n\n  if (yAxis.hideAxis) return null;\n\n  return (\n    <g>\n      <g mask={`url(#mask-${chartId})`}>\n        <StyledGrid ref={gridRef}></StyledGrid>\n      </g>\n      <g ref={setAxisLeftRef}>\n        <StyledAxis axisColor={axisColor} ref={ref} tickColor={tickColor} className=\"axis-left\"></StyledAxis>\n      </g>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkFnB;AAhFJ,mBAAqD;AACrD,gBAAiC;AACjC,oBAAuC;AACvC,0BAA6B;AAC7B,qBAAmC;AAE5B,MAAM,WAAW,MAAM;AAC5B,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,UAAM,qBAAsB,IAAI;AACtC,QAAM,cAAU,qBAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,OAAO,WAAW,YAAY,gBAAgB,cAAc,UAAU,IAAI,MAAM,QAAQ,CAAC;AAE7G,QAAM,QAAQ,OAAO,QAAQ,aAAa,SAAS,EAAE;AAErD,QAAM,EAAE,MAAM,UAAU,OAAO,UAAU,IAAI;AAE7C,8BAAU,MAAM;AACd,UAAM,WAAO,oBAAS,MAAM,EAAE,cAAc,CAAC;AAE7C,UAAM,WAAO,oBAAS,MAAM,EACzB,WAAW,CAAC,MAAM,EAAE,EACpB,SAAS,WAAW,CAAC,aAAa,CAAC,EACnC,cAAc,CAAC;AAElB,QAAI,cAAc,OAAO;AACvB,YAAM,aAAa,iBAAiB,aAAa,CAAC,GAAG,OAAO,GAAG,UAAU;AACzE,WAAK,WAAW,UAAU;AAAA,IAC5B,OAAO;AACL,WAAK,WAAW,KAAK;AACrB,WAAK,WAAW,KAAK;AAAA,IACvB;AAEA,QAAI,YAAY;AACd,UAAI,OAAO,eAAe,UAAU;AAClC,cAAM,sBAAkB,mCAAmB,QAAQ,QAAQ;AAE3D,aAAK,WAAW,CAAC,MAAM,gBAAgB,UAAU,EAAE,CAAC,CAAC;AAAA,MACvD;AACA,UAAI,OAAO,eAAe,YAAY;AACpC,aAAK,WAAW,UAAU;AAAA,MAC5B;AAAA,IACF;AACA,QAAI,KAAK,WAAW,SAAS,SAAS;AACpC,4BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,YAAM,eAAW,kBAAO,IAAI,OAAO;AACnC,eAAS,KAAK,IAAI;AAClB,UAAI;AACF,iBACG,UAAU,MAAM,EAChB,MAAM,eAAe,KAAK,EAC1B,KAAK,MAAM,OAAO,EAClB,KAAK,MAAM,OAAO,EAClB,KAAK,aAAa,WAAW,eAAe;AAAA,IACnD;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,MAAM;AAAU,WAAO;AAE3B,SACE,6CAAC;AAAA,IACC;AAAA,kDAAC;AAAA,QAAE,MAAM,aAAa;AAAA,QACpB,sDAAC;AAAA,UAAW,KAAK;AAAA,SAAS;AAAA,OAC5B;AAAA,MACA,4CAAC;AAAA,QAAE,KAAK;AAAA,QACN,sDAAC;AAAA,UAAW;AAAA,UAAsB;AAAA,UAAU;AAAA,UAAsB,WAAU;AAAA,SAAY;AAAA,OAC1F;AAAA;AAAA,GACF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkFnB;AAhFJ,mBAAqD;AACrD,gBAAiC;AACjC,oBAAuC;AACvC,0BAA6B;AAC7B,qBAAmC;AAE5B,MAAM,WAAW,MAAM;AAC5B,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,UAAM,qBAAsB,IAAI;AACtC,QAAM,cAAU,qBAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,OAAO,WAAW,YAAY,gBAAgB,cAAc,UAAU,IAAI,MAAM,QAAQ,CAAC;AAE7G,QAAM,QAAQ,OAAO,QAAQ,aAAa,SAAS,EAAE;AAErD,QAAM,EAAE,MAAM,UAAU,OAAO,UAAU,IAAI;AAE7C,8BAAU,MAAM;AACd,UAAM,WAAO,oBAAS,MAAM,EAAE,cAAc,CAAC;AAE7C,UAAM,WAAO,oBAAS,MAAM,EACzB,WAAW,CAAC,MAAM,EAAE,EACpB,SAAS,WAAW,CAAC,aAAa,CAAC,EACnC,cAAc,CAAC;AAElB,QAAI,cAAc,OAAO;AACvB,YAAM,aAAa,iBAAiB,aAAa,CAAC,GAAG,OAAO,GAAG,UAAU;AACzE,WAAK,WAAW,UAAU;AAAA,IAC5B,OAAO;AACL,WAAK,WAAW,KAAK;AACrB,WAAK,WAAW,KAAK;AAAA,IACvB;AAEA,QAAI,YAAY;AACd,UAAI,OAAO,eAAe,UAAU;AAClC,cAAM,sBAAkB,mCAAmB,QAAQ,QAAQ;AAE3D,aAAK,WAAW,CAAC,MAAM,gBAAgB,UAAU,EAAE,CAAC,CAAC;AAAA,MACvD;AACA,UAAI,OAAO,eAAe,YAAY;AACpC,aAAK,WAAW,UAAU;AAAA,MAC5B;AAAA,IACF;AACA,QAAI,KAAK,WAAW,SAAS,SAAS;AACpC,4BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,YAAM,eAAW,kBAAO,IAAI,OAAO;AACnC,eAAS,KAAK,IAAI;AAClB,UAAI;AACF,iBACG,UAAU,MAAM,EAChB,MAAM,eAAe,KAAK,EAC1B,KAAK,MAAM,OAAO,EAClB,KAAK,MAAM,OAAO,EAClB,KAAK,aAAa,WAAW,eAAe;AAAA,IACnD;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,MAAM;AAAU,WAAO;AAE3B,SACE,6CAAC,OACC;AAAA,gDAAC,OAAE,MAAM,aAAa,YACpB,sDAAC,4BAAW,KAAK,SAAS,GAC5B;AAAA,IACA,4CAAC,OAAE,KAAK,gBACN,sDAAC,4BAAW,WAAsB,KAAU,WAAsB,WAAU,aAAY,GAC1F;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/Axis/AxisRight.js CHANGED Viewed

@@ -33,30 +33,64 @@ var import_react = require("react");
 var import_d3 = require("d3");
 var import_styles = require("../../styles");
 var import_ChartContext = require("../../ChartContext");
+var import_helpers = require("../../helpers");
 const AxisRight = () => {
   const {
     props: { y2Axis },
+    innerHeight,
     innerWidth,
     y2Scale,
+    chartId,
+    height,
     setAxisRightRef
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  const { color: tickColor } = y2Axis?.tick || {};
   const ref = (0, import_react.useRef)(null);
+  const gridRef = (0, import_react.useRef)(null);
+  const { tickValues, color: tickColor, tickFormat, overwriteTicks, tickRotation, tickCount } = y2Axis.tick || {};
+  const ticks = y2Scale.ticks?.(tickCount ?? height / 80);
+  const { type, showGrid, color: axisColor } = y2Axis;
   (0, import_react.useEffect)(() => {
     const axis = (0, import_d3.axisRight)(y2Scale).tickSizeOuter(0);
-    if (ref.current)
-      (0, import_d3.select)(ref.current).call(axis);
-  }, [innerWidth, y2Scale]);
-  if (!y2Axis)
+    const grid = (0, import_d3.axisRight)(y2Scale).tickFormat((_) => "").tickSize(showGrid ? -innerWidth : 0).tickSizeOuter(0);
+    if (tickValues && ticks) {
+      const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];
+      axis.tickValues(finalTicks);
+    } else {
+      axis.tickValues(ticks);
+      grid.tickValues(ticks);
+    }
+    if (tickFormat) {
+      if (typeof tickFormat === "string") {
+        const formatGenerator = (0, import_helpers.getFormatGenerator)(type ?? "linear");
+        axis.tickFormat((d) => formatGenerator(tickFormat)(d));
+      }
+      if (typeof tickFormat === "function") {
+        axis.tickFormat(tickFormat);
+      }
+    }
+    if (ref?.current && gridRef?.current) {
+      (0, import_d3.select)(gridRef.current).call(grid);
+      const axisNode = (0, import_d3.select)(ref.current);
+      axisNode.call(axis);
+    }
+  }, [
+    innerHeight,
+    innerWidth,
+    overwriteTicks,
+    showGrid,
+    tickFormat,
+    tickRotation,
+    tickValues,
+    ticks,
+    type,
+    y2Axis,
+    y2Scale
+  ]);
+  if (y2Axis.hideAxis)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
-    ref: setAxisRightRef,
-    transform: `translate(${innerWidth},0)`,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxis, {
-      axisColor: y2Axis?.color,
-      ref,
-      tickColor
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(${innerWidth},0)`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { mask: `url(#mask-${chartId})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledGrid, { ref: gridRef }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { ref: setAxisRightRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxis, { axisColor, ref, tickColor, className: "axis-right" }) })
+  ] });
 };
 //# sourceMappingURL=AxisRight.js.map

package/dist/cjs/graphs/Chart/parts/Axis/AxisRight.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Axis/AxisRight.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisRight } from 'd3';\nimport { StyledAxis } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nexport const AxisRight = () => {\n  const {\n    props: { y2Axis },\n    innerWidth,\n    y2Scale,\n    setAxisRightRef,\n  } = useContext(ChartContext);\n\n  const { color: tickColor } = y2Axis?.tick || {};\n  const ref = useRef<SVGGElement>(null);\n  useEffect(() => {\n    const axis = axisRight(y2Scale).tickSizeOuter(0);\n\n    if (ref.current) select(ref.current).call(axis);\n  }, [innerWidth, y2Scale]);\n  if (!y2Axis) return null;\n  return (\n    <g ref={setAxisRightRef} transform={`translate(${innerWidth},0)`}>\n      <StyledAxis axisColor={y2Axis?.color} ref={ref} tickColor={tickColor} />\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBjB;AAtBN,mBAAqD;AACrD,gBAAkC;AAClC,oBAA2B;AAC3B,0BAA6B;AACtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,EAAE,OAAO,UAAU,IAAI,QAAQ,QAAQ,CAAC;AAC9C,QAAM,UAAM,qBAAoB,IAAI;AACpC,8BAAU,MAAM;AACd,UAAM,WAAO,qBAAU,OAAO,EAAE,cAAc,CAAC;AAE/C,QAAI,IAAI;AAAS,4BAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAAA,EAChD,GAAG,CAAC,YAAY,OAAO,CAAC;AACxB,MAAI,CAAC;AAAQ,WAAO;AACpB,SACE,4CAAC;AAAA,IAAE,KAAK;AAAA,IAAiB,WAAW,aAAa;AAAA,IAC/C,sDAAC;AAAA,MAAW,WAAW,QAAQ;AAAA,MAAO;AAAA,MAAU;AAAA,KAAsB;AAAA,GACxE;AAEJ;",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisRight } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport { getFormatGenerator } from '../../helpers';\n\nexport const AxisRight = () => {\n  const {\n    props: { y2Axis },\n    innerHeight,\n    innerWidth,\n    y2Scale,\n    chartId,\n    height,\n    setAxisRightRef,\n  } = useContext(ChartContext);\n\n  const ref = useRef<SVGSVGElement>(null);\n  const gridRef = useRef<SVGSVGElement>(null);\n  const { tickValues, color: tickColor, tickFormat, overwriteTicks, tickRotation, tickCount } = y2Axis.tick || {};\n\n  const ticks = y2Scale.ticks?.(tickCount ?? height / 80);\n\n  const { type, showGrid, color: axisColor } = y2Axis;\n\n  useEffect(() => {\n    const axis = axisRight(y2Scale).tickSizeOuter(0);\n\n    const grid = axisRight(y2Scale)\n      .tickFormat((_) => '')\n      .tickSize(showGrid ? -innerWidth : 0)\n      .tickSizeOuter(0);\n\n    if (tickValues && ticks) {\n      const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];\n      axis.tickValues(finalTicks);\n    } else {\n      axis.tickValues(ticks);\n      grid.tickValues(ticks);\n    }\n\n    if (tickFormat) {\n      if (typeof tickFormat === 'string') {\n        const formatGenerator = getFormatGenerator(type ?? 'linear');\n\n        axis.tickFormat((d) => formatGenerator(tickFormat)(d));\n      }\n      if (typeof tickFormat === 'function') {\n        axis.tickFormat(tickFormat);\n      }\n    }\n    if (ref?.current && gridRef?.current) {\n      select(gridRef.current).call(grid);\n      const axisNode = select(ref.current);\n      axisNode.call(axis);\n    }\n  }, [\n    innerHeight,\n    innerWidth,\n    overwriteTicks,\n    showGrid,\n    tickFormat,\n    tickRotation,\n    tickValues,\n    ticks,\n    type,\n    y2Axis,\n    y2Scale,\n  ]);\n\n  if (y2Axis.hideAxis) return null;\n\n  return (\n    <g transform={`translate(${innerWidth},0)`}>\n      <g mask={`url(#mask-${chartId})`}>\n        <StyledGrid ref={gridRef}></StyledGrid>\n      </g>\n      <g ref={setAxisRightRef}>\n        <StyledAxis axisColor={axisColor} ref={ref} tickColor={tickColor} className=\"axis-right\"></StyledAxis>\n      </g>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2EnB;AAzEJ,mBAAqD;AACrD,gBAAkC;AAClC,oBAAuC;AACvC,0BAA6B;AAC7B,qBAAmC;AAE5B,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAM,qBAAsB,IAAI;AACtC,QAAM,cAAU,qBAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,OAAO,WAAW,YAAY,gBAAgB,cAAc,UAAU,IAAI,OAAO,QAAQ,CAAC;AAE9G,QAAM,QAAQ,QAAQ,QAAQ,aAAa,SAAS,EAAE;AAEtD,QAAM,EAAE,MAAM,UAAU,OAAO,UAAU,IAAI;AAE7C,8BAAU,MAAM;AACd,UAAM,WAAO,qBAAU,OAAO,EAAE,cAAc,CAAC;AAE/C,UAAM,WAAO,qBAAU,OAAO,EAC3B,WAAW,CAAC,MAAM,EAAE,EACpB,SAAS,WAAW,CAAC,aAAa,CAAC,EACnC,cAAc,CAAC;AAElB,QAAI,cAAc,OAAO;AACvB,YAAM,aAAa,iBAAiB,aAAa,CAAC,GAAG,OAAO,GAAG,UAAU;AACzE,WAAK,WAAW,UAAU;AAAA,IAC5B,OAAO;AACL,WAAK,WAAW,KAAK;AACrB,WAAK,WAAW,KAAK;AAAA,IACvB;AAEA,QAAI,YAAY;AACd,UAAI,OAAO,eAAe,UAAU;AAClC,cAAM,sBAAkB,mCAAmB,QAAQ,QAAQ;AAE3D,aAAK,WAAW,CAAC,MAAM,gBAAgB,UAAU,EAAE,CAAC,CAAC;AAAA,MACvD;AACA,UAAI,OAAO,eAAe,YAAY;AACpC,aAAK,WAAW,UAAU;AAAA,MAC5B;AAAA,IACF;AACA,QAAI,KAAK,WAAW,SAAS,SAAS;AACpC,4BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,YAAM,eAAW,kBAAO,IAAI,OAAO;AACnC,eAAS,KAAK,IAAI;AAAA,IACpB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,OAAO;AAAU,WAAO;AAE5B,SACE,6CAAC,OAAE,WAAW,aAAa,iBACzB;AAAA,gDAAC,OAAE,MAAM,aAAa,YACpB,sDAAC,4BAAW,KAAK,SAAS,GAC5B;AAAA,IACA,4CAAC,OAAE,KAAK,iBACN,sDAAC,4BAAW,WAAsB,KAAU,WAAsB,WAAU,cAAa,GAC3F;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/ChartContainer.js CHANGED Viewed

@@ -48,7 +48,7 @@ var import_VerticalScrapper = require("./Scrapper/VerticalScrapper");
 var import_Controllers = require("./Scroller/Controllers");
 const ChartContainer = () => {
   const {
-    props: { yAxis, xScroll, scrapper, xAxis, width: userWidth },
+    props: { yAxis, y2Axis, xScroll, scrapper, xAxis, width: userWidth },
     containerRef,
     activePoint,
     internalMargin,
@@ -127,76 +127,61 @@ const ChartContainer = () => {
     () => `${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom}`,
     [internalMargin, width]
   );
-  if (currentData.length === 0)
-    return null;
   const render = (0, import_react.useMemo)(() => {
+    if (currentData.length === 0)
+      return null;
     if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisRight.AxisRight, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisLeft.AxisLeft, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollableContainerX.ScrollableContainerX, {})
-        ]
-      });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        y2Axis ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisRight.AxisRight, {}) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisLeft.AxisLeft, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollableContainerX.ScrollableContainerX, {})
+      ] });
     }
     if (yScroll) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisBottom.AxisBottom, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollableContainerY.ScrollableContainerY, {})
-        ]
-      });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisRight.AxisRight, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisLeft.AxisLeft, {}),
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        y2Axis ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisRight.AxisRight, {}) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisBottom.AxisBottom, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesFactory.SeriesFactory, {}),
-        scrapper?.type === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Scrapper.Scrapper, {}) : null,
-        scrapper?.type === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VerticalScrapper.VerticalScrapper, {}) : null
-      ]
-    });
-  }, [scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, yScroll]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSVGWrapper, {
-    ref: setContainerRef,
-    onKeyDown: onInputKeyDown,
-    "aria-hidden": "true",
-    tabIndex: activePoint ? -1 : 0,
-    onBlur: handleOnBlur,
-    onFocus: handleOnFocus,
-    onMouseEnter: onMouseEnterHandler,
-    onMouseLeave: onMouseLeaveHandler,
-    onMouseMove: handleMouseMove,
-    onMouseUp: handleMouseUp,
-    onMouseDown: (e) => e.preventDefault(),
-    isGrabbed,
-    style: { width: userWidth, height },
-    children: width !== 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
-      ref: svgRef,
-      width,
-      height,
-      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollableContainerY.ScrollableContainerY, {})
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      y2Axis ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisRight.AxisRight, {}) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisLeft.AxisLeft, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisBottom.AxisBottom, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesFactory.SeriesFactory, {}),
+      scrapper?.type === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Scrapper.Scrapper, {}) : null,
+      scrapper?.type === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VerticalScrapper.VerticalScrapper, {}) : null
+    ] });
+  }, [currentData.length, scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, y2Axis, yScroll]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styles.StyledSVGWrapper,
+    {
+      ref: setContainerRef,
+      onKeyDown: onInputKeyDown,
+      "aria-hidden": "true",
+      tabIndex: activePoint ? -1 : 0,
+      onBlur: handleOnBlur,
+      onFocus: handleOnFocus,
+      onMouseEnter: onMouseEnterHandler,
+      onMouseLeave: onMouseLeaveHandler,
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      onMouseDown: (e) => e.preventDefault(),
+      isGrabbed,
+      style: { width: userWidth, height },
+      children: width !== 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ref: svgRef, width, height, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ClipPaths.ClipPaths, {}),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BlurMask.BlurMask, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Controllers.Controllers, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Legend.Legend, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Label.Label, {})
-              ]
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
-              className: "container",
-              transform: `translate(${internalMargin.left},${internalMargin.top})`,
-              children: render
-            })
-          ]
-        }, key)
-      ]
-    }) : null
-  });
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Controllers.Controllers, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Legend.Legend, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Label.Label, {})
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { className: "container", transform: `translate(${internalMargin.left},${internalMargin.top})`, children: render })
+        ] }, key)
+      ] }) : null
+    }
+  );
 };
 //# sourceMappingURL=ChartContainer.js.map

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

@@ -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, useEffect } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Label } from './Labels/Label';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './Axis/AxisBottom';\nimport { AxisRight } from './Axis/AxisRight';\nimport { AxisLeft } from './Axis/AxisLeft';\nimport { SeriesFactory } from './SeriesFactory';\nimport { Scrapper } from './Scrapper/Scrapper';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper';\nimport { Controllers } from './Scroller/Controllers';\nexport const ChartContainer = () => {\n  const {\n    props: { yAxis, xScroll, scrapper, xAxis, width: userWidth },\n    containerRef,\n    activePoint,\n    internalMargin,\n    setScrapperPosY,\n    setScrapperPosX,\n    setContainerRef,\n    svgRef,\n    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    innerHeight,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    lastPosition,\n    setIsScrollbarVisible,\n    currentData,\n    width,\n    height,\n  } = useContext(ChartContext);\n\n  // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  const onMouseEnterHandler = useCallback(() => {\n    setIsScrollbarVisible(true);\n  }, [setIsScrollbarVisible]);\n  const onMouseLeaveHandler = useCallback(() => {\n    setScrapperPosY('');\n    setScrapperPosX('');\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      setActivePoint(null);\n      if (xScroll) {\n        const newPosition = lastPosition?.current + e.clientX - startPosition;\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerWidth - innerWidth / containerRatio)\n          setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n      if (yScroll) {\n        const newPosition = lastPosition?.current + e.clientY - startPosition;\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerHeight - innerHeight / containerRatio)\n          setXScrollbarPosition(innerHeight - innerHeight / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n    },\n    [\n      isGrabbed,\n      setActivePoint,\n      xScroll,\n      yScroll,\n      lastPosition,\n      startPosition,\n      setXScrollbarPosition,\n      innerWidth,\n      containerRatio,\n      innerHeight,\n    ],\n  );\n  const handleMouseUp = useCallback(() => {\n    lastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [lastPosition, setIsGrabbed, xScrollbarPosition]);\n\n  const key = useMemo(\n    () => `${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom}`,\n    [internalMargin, width],\n  );\n\n  if (currentData.length === 0) return null;\n\n  const render = useMemo(() => {\n    if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {\n      return (\n        <>\n          <AxisRight />\n          <AxisLeft />\n          <ScrollableContainerX />\n        </>\n      );\n    }\n    if (yScroll) {\n      return (\n        <>\n          <AxisBottom />\n          <ScrollableContainerY />\n        </>\n      );\n    }\n    return (\n      <>\n        <AxisRight />\n        <AxisLeft />\n        <AxisBottom />\n        <SeriesFactory />\n        {scrapper?.type === 'horizontal' ? <Scrapper /> : null}\n        {scrapper?.type === 'vertical' ? <VerticalScrapper /> : null}\n      </>\n    );\n  }, [scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, yScroll]);\n  return (\n    <StyledSVGWrapper\n      ref={setContainerRef}\n      onKeyDown={onInputKeyDown}\n      aria-hidden=\"true\"\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 ref={svgRef} width={width} height={height}>\n          {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n          <ClipPaths />\n          <BlurMask />\n          <g key={key}>\n            <g>\n              <Controllers />\n              <Legend />\n              <Label />\n            </g>\n            <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n              {render}\n              {/* <ActivePoint/> @todo */}\n            </g>\n          </g>\n        </svg>\n      ) : null}\n    </StyledSVGWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useContext, useMemo, useCallback, useEffect } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Label } from './Labels/Label';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './Axis/AxisBottom';\nimport { AxisRight } from './Axis/AxisRight';\nimport { AxisLeft } from './Axis/AxisLeft';\nimport { SeriesFactory } from './SeriesFactory';\nimport { Scrapper } from './Scrapper/Scrapper';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper';\nimport { Controllers } from './Scroller/Controllers';\nexport const ChartContainer = () => {\n  const {\n    props: { yAxis, y2Axis, xScroll, scrapper, xAxis, width: userWidth },\n    containerRef,\n    activePoint,\n    internalMargin,\n    setScrapperPosY,\n    setScrapperPosX,\n    setContainerRef,\n    svgRef,\n    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    innerHeight,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    lastPosition,\n    setIsScrollbarVisible,\n    currentData,\n    width,\n    height,\n  } = useContext(ChartContext);\n\n  // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  const onMouseEnterHandler = useCallback(() => {\n    setIsScrollbarVisible(true);\n  }, [setIsScrollbarVisible]);\n  const onMouseLeaveHandler = useCallback(() => {\n    setScrapperPosY('');\n    setScrapperPosX('');\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      setActivePoint(null);\n      if (xScroll) {\n        const newPosition = lastPosition?.current + e.clientX - startPosition;\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerWidth - innerWidth / containerRatio)\n          setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n      if (yScroll) {\n        const newPosition = lastPosition?.current + e.clientY - startPosition;\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerHeight - innerHeight / containerRatio)\n          setXScrollbarPosition(innerHeight - innerHeight / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n    },\n    [\n      isGrabbed,\n      setActivePoint,\n      xScroll,\n      yScroll,\n      lastPosition,\n      startPosition,\n      setXScrollbarPosition,\n      innerWidth,\n      containerRatio,\n      innerHeight,\n    ],\n  );\n  const handleMouseUp = useCallback(() => {\n    lastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [lastPosition, setIsGrabbed, xScrollbarPosition]);\n\n  const key = useMemo(\n    () => `${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom}`,\n    [internalMargin, width],\n  );\n\n  const render = useMemo(() => {\n    if (currentData.length === 0) return null;\n    if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisLeft />\n          <ScrollableContainerX />\n        </>\n      );\n    }\n    if (yScroll) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisBottom />\n          <ScrollableContainerY />\n        </>\n      );\n    }\n    return (\n      <>\n        {y2Axis ? <AxisRight /> : null}\n        <AxisLeft />\n        <AxisBottom />\n        <SeriesFactory />\n        {scrapper?.type === 'horizontal' ? <Scrapper /> : null}\n        {scrapper?.type === 'vertical' ? <VerticalScrapper /> : null}\n      </>\n    );\n  }, [currentData.length, scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, y2Axis, yScroll]);\n  return (\n    <StyledSVGWrapper\n      ref={setContainerRef}\n      onKeyDown={onInputKeyDown}\n      aria-hidden=\"true\"\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 ref={svgRef} width={width} height={height}>\n          {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n          <ClipPaths />\n          <BlurMask />\n          <g key={key}>\n            <g>\n              <Controllers />\n              <Legend />\n              <Label />\n            </g>\n            <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n              {render}\n              {/* <ActivePoint/> @todo */}\n            </g>\n          </g>\n        </svg>\n      ) : null}\n    </StyledSVGWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyGf;AAzGR,mBAAmE;AACnE,oBAAiC;AAEjC,0BAA6B;AAC7B,mCAAsC;AACtC,oBAAuB;AACvB,mBAAsB;AACtB,sBAAyB;AACzB,uBAA0B;AAC1B,kCAAqC;AACrC,kCAAqC;AAErC,wBAA2B;AAC3B,uBAA0B;AAC1B,sBAAyB;AACzB,2BAA8B;AAC9B,sBAAyB;AACzB,8BAAiC;AACjC,yBAA4B;AACrB,MAAM,iBAAiB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,QAAQ,SAAS,UAAU,OAAO,OAAO,UAAU;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;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;AAG3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AACtD,QAAM,EAAE,gBAAgB,cAAc,cAAc,QAAI,oDAAsB;AAE9E,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,0BAAsB,IAAI;AAAA,EAC5B,GAAG,CAAC,qBAAqB,CAAC;AAC1B,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,oBAAgB,EAAE;AAClB,oBAAgB,EAAE;AAClB,0BAAsB,KAAK;AAC3B,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,cAAc,uBAAuB,iBAAiB,eAAe,CAAC;AAE1E,QAAM,sBAA2C;AAAA,IAC/C,CAAC,MAAM;AACL,UAAI,CAAC;AAAW;AAChB,qBAAe,IAAI;AACnB,UAAI,SAAS;AACX,cAAM,cAAc,cAAc,UAAU,EAAE,UAAU;AACxD,YAAI,cAAc;AAAG,gCAAsB,CAAC;AAAA,iBACnC,cAAc,aAAa,aAAa;AAC/C,gCAAsB,aAAa,aAAa,cAAc;AAAA;AAC3D,gCAAsB,WAAW;AAAA,MACxC;AACA,UAAI,SAAS;AACX,cAAM,cAAc,cAAc,UAAU,EAAE,UAAU;AACxD,YAAI,cAAc;AAAG,gCAAsB,CAAC;AAAA,iBACnC,cAAc,cAAc,cAAc;AACjD,gCAAsB,cAAc,cAAc,cAAc;AAAA;AAC7D,gCAAsB,WAAW;AAAA,MACxC;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,oBAAgB,0BAAY,MAAM;AACtC,iBAAa,UAAU;AACvB,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,cAAc,cAAc,kBAAkB,CAAC;AAEnD,QAAM,UAAM;AAAA,IACV,MAAM,GAAG,SAAS,eAAe,QAAQ,eAAe,OAAO,eAAe,SAAS,eAAe;AAAA,IACtG,CAAC,gBAAgB,KAAK;AAAA,EACxB;AAEA,QAAM,aAAS,sBAAQ,MAAM;AAC3B,QAAI,YAAY,WAAW;AAAG,aAAO;AACrC,QAAI,WAAW,MAAM,UAAU,cAAc,QAAQ,GAAG;AACtD,aACE,4EACG;AAAA,iBAAS,4CAAC,8BAAU,IAAK;AAAA,QAC1B,4CAAC,4BAAS;AAAA,QACV,4CAAC,oDAAqB;AAAA,SACxB;AAAA,IAEJ;AACA,QAAI,SAAS;AACX,aACE,4EACG;AAAA,iBAAS,4CAAC,8BAAU,IAAK;AAAA,QAC1B,4CAAC,gCAAW;AAAA,QACZ,4CAAC,oDAAqB;AAAA,SACxB;AAAA,IAEJ;AACA,WACE,4EACG;AAAA,eAAS,4CAAC,8BAAU,IAAK;AAAA,MAC1B,4CAAC,4BAAS;AAAA,MACV,4CAAC,gCAAW;AAAA,MACZ,4CAAC,sCAAc;AAAA,MACd,UAAU,SAAS,eAAe,4CAAC,4BAAS,IAAK;AAAA,MACjD,UAAU,SAAS,aAAa,4CAAC,4CAAiB,IAAK;AAAA,OAC1D;AAAA,EAEJ,GAAG,CAAC,YAAY,QAAQ,UAAU,MAAM,MAAM,UAAU,cAAc,OAAO,SAAS,QAAQ,OAAO,CAAC;AACtG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,MACX,eAAY;AAAA,MACZ,UAAU,cAAc,KAAK;AAAA,MAC7B,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,cAAc;AAAA,MACd,cAAc;AAAA,MACd,aAAa;AAAA,MACb,WAAW;AAAA,MACX,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,MACrC;AAAA,MACA,OAAO,EAAE,OAAO,WAAW,OAAO;AAAA,MAEjC,oBAAU,IACT,6CAAC,SAAI,KAAK,QAAQ,OAAc,QAE9B;AAAA,oDAAC,8BAAU;AAAA,QACX,4CAAC,4BAAS;AAAA,QACV,6CAAC,OACC;AAAA,uDAAC,OACC;AAAA,wDAAC,kCAAY;AAAA,YACb,4CAAC,wBAAO;AAAA,YACR,4CAAC,sBAAM;AAAA,aACT;AAAA,UACA,4CAAC,OAAE,WAAU,aAAY,WAAW,aAAa,eAAe,QAAQ,eAAe,QACpF,kBAEH;AAAA,aATM,GAUR;AAAA,SACF,IACE;AAAA;AAAA,EACN;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/ClipPaths.js CHANGED Viewed

@@ -41,21 +41,6 @@ const ClipPaths = () => {
     props: { xAxis, yAxis }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", {
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", {
-        id: `rect-focus-ring-${chartId}`,
-        children: yScroll ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
-          width: innerWidth + 4,
-          height: innerHeight * containerRatio,
-          x: -4
-        }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
-          width: (innerWidth + 4) * containerRatio,
-          height: innerHeight + 4,
-          y: -4
-        })
-      })
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: `rect-focus-ring-${chartId}`, children: yScroll ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: innerWidth + 4, height: innerHeight * containerRatio, x: -4 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: (innerWidth + 4) * containerRatio, height: innerHeight + 4, y: -4 }) }) }) });
 };
 //# sourceMappingURL=ClipPaths.js.map

package/dist/cjs/graphs/Chart/parts/ClipPaths.js.map CHANGED Viewed

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/parts/ClipPaths.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext } from 'react';\nimport { ChartContext } from '../ChartContext';\n\nexport const ClipPaths = () => {\n  const {\n    innerWidth,\n    containerRatio,\n    innerHeight,\n    chartId,\n    yScale,\n    props: { xAxis, yAxis },\n  } = useContext(ChartContext);\n\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n  return (\n    <>\n      <defs>\n        <clipPath id={`rect-focus-ring-${chartId}`}>\n          {yScroll ? (\n            <rect width={innerWidth + 4} height={innerHeight * containerRatio} x={-4} />\n          ) : (\n            <rect width={(innerWidth + 4) * containerRatio} height={innerHeight + 4} y={-4} />\n          )}\n        </clipPath>\n      </defs>\n      {/* \n      this can be useful when implementing animations\n      <defs>\n        <clipPath id={`rects-positive-${chartId}`}>\n          <rect width={innerWidth * containerRatio} height={yScale(0) + 8} y={-8} x={-10} />\n        </clipPath>\n      </defs>\n      {innerHeight - yScale(0) > 0 ? (\n        <defs>\n          <clipPath id={`rects-negative-${chartId}`}>\n            <rect width={innerWidth * containerRatio} height={innerHeight - yScale(0)} x={-10} y={yScale(0)} />\n          </clipPath>\n        </defs>\n      ) : null} */}\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAhBJ,mBAAkC;AAClC,0BAA6B;AAEtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,MAAM;AAAA,EACxB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,SACE;AAAA,IACE,sDAAC;AAAA,MACC,sDAAC;AAAA,QAAS,IAAI,mBAAmB;AAAA,QAC9B,oBACC,4CAAC;AAAA,UAAK,OAAO,aAAa;AAAA,UAAG,QAAQ,cAAc;AAAA,UAAgB,GAAG;AAAA,SAAI,IAE1E,4CAAC;AAAA,UAAK,QAAQ,aAAa,KAAK;AAAA,UAAgB,QAAQ,cAAc;AAAA,UAAG,GAAG;AAAA,SAAI;AAAA,OAEpF;AAAA,KACF;AAAA,GAeF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAhBJ,mBAAkC;AAClC,0BAA6B;AAEtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,MAAM;AAAA,EACxB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,SACE,2EACE,sDAAC,UACC,sDAAC,cAAS,IAAI,mBAAmB,WAC9B,oBACC,4CAAC,UAAK,OAAO,aAAa,GAAG,QAAQ,cAAc,gBAAgB,GAAG,IAAI,IAE1E,4CAAC,UAAK,QAAQ,aAAa,KAAK,gBAAgB,QAAQ,cAAc,GAAG,GAAG,IAAI,GAEpF,GACF,GAeF;AAEJ;",
   "names": []
 }