npm - @elliemae/ds-dataviz - Versions diffs - 3.11.1-rc.0 → 3.12.0-next.0 - Mend

@elliemae/ds-dataviz 3.11.1-rc.0 → 3.12.0-next.0

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 (99) hide show

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;ADAvB;AACA,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;AAAA,IAAsB,OAAO;AAAA,IAC5B,sDAAC,wCAAe;AAAA,GAClB;AAEJ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/graphs/Chart/ChartContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createContext, createRef } from 'react';\nimport { ScaleLinear, ScaleBand, scaleLinear, scaleBand, scaleOrdinal, ScaleOrdinal } from 'd3';\nimport { defaultProps, DSChartT } from './react-desc-prop-types';\ninterface ContextT {\n  props: DSChartT.Props;\n  currentData: DSChartT.InternalData;\n  xScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  yScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  y2Scale: ScaleLinear<number, number, never>;\n  innerHeight: number;\n  innerWidth: number;\n  activePoint: DSChartT.InternalDatum | null;\n  containerRef: React.RefObject<HTMLDivElement>;\n  groups: string[];\n  subGroupScale?: ScaleBand<string> | null;\n  colorScale: ScaleOrdinal<string, unknown, string>;\n  axisLeftRef: SVGGElement | null;\n  scrapperPosY: string;\n  scrapperPosX: string;\n  xScrollbarPosition: number;\n  isGrabbed: boolean;\n  startPosition: number;\n  isScrollbarVisible: boolean;\n  lastPosition: React.MutableRefObject<number>;\n  containerRatio: number;\n  internalMargin: {\n    bottom: number;\n    top: number;\n    right: number;\n    left: number;\n  };\n  leftLegendWidth: number;\n  leftLegend: SVGGElement;\n  rightLegend: SVGGElement;\n  axisBottomHeight: number;\n  bottomLabelHeight: number;\n  rightLabelWidth: number;\n  axisRightWidth: number;\n  isHorizontal: boolean;\n  leftLabel: SVGGElement;\n  chartId: string;\n  hiddenSeries: string[];\n  stackedData: DSChartT.StackedSeriesByGroupT;\n  setActivePoint: React.Dispatch<React.SetStateAction<DSChartT.InternalDatum | null>>;\n  setLeftAxisRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getBandwidth: () => number;\n  setScrapperPosY: React.Dispatch<React.SetStateAction<string>>;\n  setScrapperPosX: React.Dispatch<React.SetStateAction<string>>;\n  setXScrollbarPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsGrabbed: React.Dispatch<React.SetStateAction<boolean>>;\n  setStartPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsScrollbarVisible: React.Dispatch<React.SetStateAction<boolean>>;\n  setAxisLeftRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setTopLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisBottomRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisRightRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getXValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  getYValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  setHiddenSeries: React.Dispatch<React.SetStateAction<string[]>>;\n  getXScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n  getYScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n}\nconst defaultContext: ContextT = {\n  props: defaultProps,\n  xScale: scaleBand(),\n  yScale: scaleLinear(),\n  innerHeight: 0,\n  innerWidth: 0,\n  activePoint: null,\n  setActivePoint: () => {},\n  scrapperPosY: '',\n  setScrapperPosY: () => {},\n  containerRef: createRef<HTMLDivElement>(),\n  groups: [],\n  colorScale: scaleOrdinal(),\n  setLeftAxisRef: () => {},\n};\nexport const ChartContext = createContext(defaultContext);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,gBAA2F;AAC3F,mCAAuC;AAkEvC,MAAM,iBAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,YAAQ,qBAAU;AAAA,EAClB,YAAQ,uBAAY;AAAA,EACpB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,cAAc;AAAA,EACd,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,kBAAc,wBAA0B;AAAA,EACxC,QAAQ,CAAC;AAAA,EACT,gBAAY,wBAAa;AAAA,EACzB,gBAAgB,MAAM;AAAA,EAAC;AACzB;AACO,MAAM,mBAAe,4BAAc,cAAc;",
+  "sourcesContent": ["import React, { createContext, createRef } from 'react';\nimport type { ScaleLinear, ScaleBand, ScaleOrdinal } from 'd3';\nimport { scaleLinear, scaleBand, scaleOrdinal } from 'd3';\nimport type { DSChartT } from './react-desc-prop-types';\nimport { defaultProps } from './react-desc-prop-types';\ninterface ContextT {\n  props: DSChartT.Props;\n  currentData: DSChartT.InternalData;\n  xScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  yScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  y2Scale: ScaleLinear<number, number, never>;\n  innerHeight: number;\n  innerWidth: number;\n  activePoint: DSChartT.InternalDatum | null;\n  containerRef: React.RefObject<HTMLDivElement>;\n  groups: string[];\n  subGroupScale?: ScaleBand<string> | null;\n  colorScale: ScaleOrdinal<string, unknown, string>;\n  axisLeftRef: SVGGElement | null;\n  scrapperPosY: string;\n  scrapperPosX: string;\n  xScrollbarPosition: number;\n  isGrabbed: boolean;\n  startPosition: number;\n  isScrollbarVisible: boolean;\n  lastPosition: React.MutableRefObject<number>;\n  containerRatio: number;\n  internalMargin: {\n    bottom: number;\n    top: number;\n    right: number;\n    left: number;\n  };\n  leftLegendWidth: number;\n  leftLegend: SVGGElement;\n  rightLegend: SVGGElement;\n  axisBottomHeight: number;\n  bottomLabelHeight: number;\n  rightLabelWidth: number;\n  axisRightWidth: number;\n  isHorizontal: boolean;\n  leftLabel: SVGGElement;\n  chartId: string;\n  hiddenSeries: string[];\n  stackedData: DSChartT.StackedSeriesByGroupT;\n  setActivePoint: React.Dispatch<React.SetStateAction<DSChartT.InternalDatum | null>>;\n  setLeftAxisRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getBandwidth: () => number;\n  setScrapperPosY: React.Dispatch<React.SetStateAction<string>>;\n  setScrapperPosX: React.Dispatch<React.SetStateAction<string>>;\n  setXScrollbarPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsGrabbed: React.Dispatch<React.SetStateAction<boolean>>;\n  setStartPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsScrollbarVisible: React.Dispatch<React.SetStateAction<boolean>>;\n  setAxisLeftRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setTopLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisBottomRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisRightRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getXValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  getYValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  setHiddenSeries: React.Dispatch<React.SetStateAction<string[]>>;\n  getXScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n  getYScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n}\nconst defaultContext: ContextT = {\n  props: defaultProps,\n  xScale: scaleBand(),\n  yScale: scaleLinear(),\n  innerHeight: 0,\n  innerWidth: 0,\n  activePoint: null,\n  setActivePoint: () => {},\n  scrapperPosY: '',\n  setScrapperPosY: () => {},\n  containerRef: createRef<HTMLDivElement>(),\n  groups: [],\n  colorScale: scaleOrdinal(),\n  setLeftAxisRef: () => {},\n};\nexport const ChartContext = createContext(defaultContext);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAgD;AAEhD,gBAAqD;AAErD,mCAA6B;AAkE7B,MAAM,iBAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,YAAQ,qBAAU;AAAA,EAClB,YAAQ,uBAAY;AAAA,EACpB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,cAAc;AAAA,EACd,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,kBAAc,wBAA0B;AAAA,EACxC,QAAQ,CAAC;AAAA,EACT,gBAAY,wBAAa;AAAA,EACzB,gBAAgB,MAAM;AAAA,EAAC;AACzB;AACO,MAAM,mBAAe,4BAAc,cAAc;",
   "names": []
 }

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

@@ -29,33 +29,30 @@ __export(useChart_exports, {
 module.exports = __toCommonJS(useChart_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_uuid = require("uuid");
+var import_uid = require("uid");
 var import_lodash = require("lodash");
 var import_useScales = require("./useScales");
 var import_helpers = require("../helpers");
 var import_useInternalMargins = require("./useInternalMargins");
 var import_useGetters = require("./useGetters");
+var import_resize_observer_polyfill = __toESM(require("resize-observer-polyfill"));
 const useResizeObserver = (ref) => {
   const [dimensions, setDimensions] = (0, import_react.useState)(null);
-  const firstRender = (0, import_react.useRef)(true);
   (0, import_react.useEffect)(() => {
-    const observeTarget = ref?.current || ref;
-    if (firstRender.current) {
-      firstRender.current = false;
+    if (ref) {
+      const observeTarget = ref;
+      const resizeObserver = new import_resize_observer_polyfill.default(
+        (0, import_lodash.debounce)((entries) => {
+          entries.forEach((entry) => {
+            setDimensions(entry.contentRect);
+          });
+        }, 200)
+      );
+      resizeObserver.observe(observeTarget);
       return () => {
+        resizeObserver.unobserve(observeTarget);
       };
     }
-    const resizeObserver = new ResizeObserver(
-      (0, import_lodash.debounce)((entries) => {
-        entries.forEach((entry) => {
-          setDimensions(entry.contentRect);
-        });
-      }, 200)
-    );
-    resizeObserver.observe(observeTarget);
-    return () => {
-      resizeObserver.unobserve(observeTarget);
-    };
   }, [ref]);
   return dimensions;
 };
@@ -63,7 +60,7 @@ const useChart = (props) => {
   const { series, yAxis, xAxis, width: userWidth, height: userHeight, groups: groupsStacked } = props;
   const [containerRef, setContainerRef] = (0, import_react.useState)(null);
   const svgRef = (0, import_react.useRef)(null);
-  const dimensions = useResizeObserver(containerRef?.parentElement);
+  const dimensions = useResizeObserver(containerRef);
   const width = (0, import_react.useMemo)(() => userWidth ?? dimensions?.width ?? 0, [dimensions, userWidth]);
   const height = (0, import_react.useMemo)(() => userHeight ?? 500, [userHeight]);
   const [isGrabbed, setIsGrabbed] = (0, import_react.useState)(false);
@@ -153,7 +150,7 @@ const useChart = (props) => {
     yScale,
     y2Scale
   });
-  const chartId = (0, import_react.useMemo)(() => (0, import_uuid.v4)(), []);
+  const chartId = (0, import_react.useMemo)(() => (0, import_uid.uid)(6), []);
   return (0, import_react.useMemo)(
     () => ({
       props,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/config/useChart.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useEffect, useRef } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { debounce } from 'lodash';\nimport { ScaleBand } from 'd3';\n// import { useResizeObserver } 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';\nimport { useInternalMargins } from './useInternalMargins';\nimport { useGetters } from './useGetters';\n\nconst useResizeObserver = (ref) => {\n  const [dimensions, setDimensions] = useState(null);\n  const firstRender = useRef(true);\n  useEffect(() => {\n    const observeTarget = ref?.current || ref;\n\n    if (firstRender.current) {\n      firstRender.current = false;\n      return () => {};\n    }\n    const resizeObserver = new ResizeObserver(\n      debounce((entries) => {\n        entries.forEach((entry) => {\n          setDimensions(entry.contentRect);\n        });\n      }, 200),\n    );\n    resizeObserver.observe(observeTarget);\n\n    return () => {\n      resizeObserver.unobserve(observeTarget);\n    };\n  }, [ref]);\n  return dimensions;\n};\n\nexport const useChart = (props: DSChartT.Props) => {\n  // useValidateTypescriptPropTypes(props, propTypes);\n\n  const { series, yAxis, xAxis, width: userWidth, height: userHeight, groups: groupsStacked } = props;\n\n  const [containerRef, setContainerRef] = useState<HTMLDivElement>(null);\n  const svgRef = useRef(null);\n\n  const dimensions = useResizeObserver(containerRef?.parentElement);\n  const width = useMemo(() => userWidth ?? dimensions?.width ?? 0, [dimensions, userWidth]);\n\n  const height = useMemo(() => userHeight ?? 500, [userHeight]);\n\n  // useResizeObserver(({ width: newWidth, height: newHeight }) => {\n  //   setResizeWidth(newWidth);\n  // }, containerRef?.parentElement);\n\n  const [isGrabbed, setIsGrabbed] = useState(false);\n  const [startPosition, setStartPosition] = useState(0);\n\n  const [activePoint, setActivePoint] = useState(null);\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 [containerRatio, setContainerRatio] = useState(\n    props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1,\n  );\n\n  const lastPosition = useRef(0);\n\n  const [axisLeftRef, setAxisLeftRef] = useState<SVGGElement | null>(null);\n  const [axisBottomRef, setAxisBottomRef] = useState<SVGGElement | null>(null);\n  const [axisRightRef, setAxisRightRef] = useState<SVGGElement | null>(null);\n\n  const [leftLegend, setLeftLegend] = useState<SVGGElement | null>(null);\n  const [rightLegend, setRightLegend] = useState<SVGGElement | null>(null);\n  const [topLegend, setTopLegend] = useState<SVGGElement | null>(null);\n  const [bottomLegend, setBottomLegend] = useState<SVGGElement | null>(null);\n\n  const [rightLabel, setRightLabel] = useState<SVGGElement | null>(null);\n  const [leftLabel, setLeftLabel] = useState<SVGGElement | null>(null);\n  const [bottomLabel, setBottomLabel] = useState<SVGGElement | null>(null);\n\n  const [toolbarRef, setToolbarRef] = useState<SVGGElement | null>(null);\n\n  const {\n    toolbarHeight,\n    axisBottomHeight,\n    axisRightWidth,\n    bottomLabelHeight,\n    internalMargin,\n    leftLegendWidth,\n    rightLabelWidth,\n  } = useInternalMargins({\n    axisLeftRef,\n    axisBottomRef,\n    axisRightRef,\n    leftLabel,\n    leftLegend,\n    rightLegend,\n    topLegend,\n    bottomLegend,\n    rightLabel,\n    bottomLabel,\n    toolbarRef,\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 [hiddenSeries, setHiddenSeries] = useState<string[]>([]);\n\n  const currentData = useMemo(\n    () =>\n      series\n        .filter((serie) => !hiddenSeries.includes(serie.name))\n        .map((d, i) => ({\n          ...d,\n          key: `${d.name}-${i}`,\n          data: d.data\n            .map((value, index) => ({\n              key: `${d.name}-${i}-${index}`,\n              value,\n              position: index,\n              serie: d.name,\n              scale: d.scale,\n            }))\n            .filter((datum) => datum.value !== null && datum.value !== undefined),\n        })),\n    [hiddenSeries, series],\n  );\n\n  const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);\n\n  // @TODO we need to create a logic to get this from both axis\n  // const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;\n\n  const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);\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 as ScaleBand<string>).bandwidth, [yScale]);\n\n  const { getXValue, getYValue, getXScaleValue, getYScaleValue } = useGetters({\n    xAxis,\n    yAxis,\n    isHorizontal,\n    xScale,\n    yScale,\n    y2Scale,\n  });\n  const chartId = useMemo(() => uuidv4(), []);\n\n  return useMemo(\n    () => ({\n      props,\n      innerHeight,\n      innerWidth,\n      groups,\n      currentData,\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      setContainerRef,\n      startPosition,\n      setStartPosition,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      lastPosition,\n      containerRatio,\n      internalMargin,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      setAxisLeftRef,\n      setLeftLegend,\n      setRightLegend,\n      rightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomRef,\n      axisBottomHeight,\n      setAxisRightRef,\n      setRightLabel,\n      setBottomLabel,\n      getXScaleValue,\n      getYScaleValue,\n      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      setHiddenSeries,\n      height,\n      width,\n      setContainerRatio,\n      toolbarHeight,\n      setToolbarRef,\n    }),\n    [\n      props,\n      innerHeight,\n      innerWidth,\n      groups,\n      currentData,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      xScale,\n      yScale,\n      y2Scale,\n      containerRef,\n      getBandwidth,\n      scrapperPosY,\n      scrapperPosX,\n      activePoint,\n      activeSerie,\n      xScrollbarPosition,\n      isGrabbed,\n      startPosition,\n      isScrollbarVisible,\n      containerRatio,\n      internalMargin,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      rightLegend,\n      axisBottomHeight,\n      getXScaleValue,\n      getYScaleValue,\n      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      height,\n      width,\n      setContainerRatio,\n      toolbarHeight,\n      setToolbarRef,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAqD;AACrD,kBAA6B;AAC7B,oBAAyB;AAKzB,uBAA0B;AAC1B,qBAA0B;AAC1B,gCAAmC;AACnC,wBAA2B;AAE3B,MAAM,oBAAoB,CAAC,QAAQ;AACjC,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,IAAI;AACjD,QAAM,kBAAc,qBAAO,IAAI;AAC/B,8BAAU,MAAM;AACd,UAAM,gBAAgB,KAAK,WAAW;AAEtC,QAAI,YAAY,SAAS;AACvB,kBAAY,UAAU;AACtB,aAAO,MAAM;AAAA,MAAC;AAAA,IAChB;AACA,UAAM,iBAAiB,IAAI;AAAA,UACzB,wBAAS,CAAC,YAAY;AACpB,gBAAQ,QAAQ,CAAC,UAAU;AACzB,wBAAc,MAAM,WAAW;AAAA,QACjC,CAAC;AAAA,MACH,GAAG,GAAG;AAAA,IACR;AACA,mBAAe,QAAQ,aAAa;AAEpC,WAAO,MAAM;AACX,qBAAe,UAAU,aAAa;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,SAAO;AACT;AAEO,MAAM,WAAW,CAAC,UAA0B;AAGjD,QAAM,EAAE,QAAQ,OAAO,OAAO,OAAO,WAAW,QAAQ,YAAY,QAAQ,cAAc,IAAI;AAE9F,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAyB,IAAI;AACrE,QAAM,aAAS,qBAAO,IAAI;AAE1B,QAAM,aAAa,kBAAkB,cAAc,aAAa;AAChE,QAAM,YAAQ,sBAAQ,MAAM,aAAa,YAAY,SAAS,GAAG,CAAC,YAAY,SAAS,CAAC;AAExF,QAAM,aAAS,sBAAQ,MAAM,cAAc,KAAK,CAAC,UAAU,CAAC;AAM5D,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,CAAC;AAEpD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,IAAI;AACnD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,EAAE;AACjD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,EAAE;AACnD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,EAAE;AACnD,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,CAAC;AAC9D,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,KAAK;AAClE,QAAM,CAAC,gBAAgB,iBAAiB,QAAI;AAAA,IAC1C,OAAO,MAAM,UAAU,cAAc,SAAS,OAAO,MAAM,UAAU,cAAc,SAAS;AAAA,EAC9F;AAEA,QAAM,mBAAe,qBAAO,CAAC;AAE7B,QAAM,CAAC,aAAa,cAAc,QAAI,uBAA6B,IAAI;AACvE,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAA6B,IAAI;AAC3E,QAAM,CAAC,cAAc,eAAe,QAAI,uBAA6B,IAAI;AAEzE,QAAM,CAAC,YAAY,aAAa,QAAI,uBAA6B,IAAI;AACrE,QAAM,CAAC,aAAa,cAAc,QAAI,uBAA6B,IAAI;AACvE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAA6B,IAAI;AACnE,QAAM,CAAC,cAAc,eAAe,QAAI,uBAA6B,IAAI;AAEzE,QAAM,CAAC,YAAY,aAAa,QAAI,uBAA6B,IAAI;AACrE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAA6B,IAAI;AACnE,QAAM,CAAC,aAAa,cAAc,QAAI,uBAA6B,IAAI;AAEvE,QAAM,CAAC,YAAY,aAAa,QAAI,uBAA6B,IAAI;AAErE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,8CAAmB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAa;AAAA,IACjB,MAAM,QAAQ,eAAe,OAAO,eAAe;AAAA,IACnD,CAAC,eAAe,MAAM,eAAe,OAAO,KAAK;AAAA,EACnD;AACA,QAAM,kBAAc;AAAA,IAClB,MAAM,SAAS,eAAe,MAAM,eAAe;AAAA,IACnD,CAAC,eAAe,KAAK,eAAe,QAAQ,MAAM;AAAA,EACpD;AAEA,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAmB,CAAC,CAAC;AAE7D,QAAM,kBAAc;AAAA,IAClB,MACE,OACG,OAAO,CAAC,UAAU,CAAC,aAAa,SAAS,MAAM,IAAI,CAAC,EACpD,IAAI,CAAC,GAAG,OAAO;AAAA,MACd,GAAG;AAAA,MACH,KAAK,GAAG,EAAE,QAAQ;AAAA,MAClB,MAAM,EAAE,KACL,IAAI,CAAC,OAAO,WAAW;AAAA,QACtB,KAAK,GAAG,EAAE,QAAQ,KAAK;AAAA,QACvB;AAAA,QACA,UAAU;AAAA,QACV,OAAO,EAAE;AAAA,QACT,OAAO,EAAE;AAAA,MACX,EAAE,EACD,OAAO,CAAC,UAAU,MAAM,UAAU,QAAQ,MAAM,UAAU,MAAS;AAAA,IACxE,EAAE;AAAA,IACN,CAAC,cAAc,MAAM;AAAA,EACvB;AAEA,QAAM,kBAAc,sBAAQ,UAAM,0BAAU,eAAe,WAAW,GAAG,CAAC,eAAe,WAAW,CAAC;AAKrG,QAAM,aAAS,sBAAQ,MAAM,YAAY,IAAI,CAAC,UAAU,MAAM,IAAI,GAAG,CAAC,WAAW,CAAC;AAElF,QAAM,EAAE,QAAQ,QAAQ,SAAS,eAAe,YAAY,aAAa,QAAI,4BAAU;AAAA,IACrF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,mBAAe,sBAAQ,MAAM,CAAC,CAAE,OAA6B,WAAW,CAAC,MAAM,CAAC;AAEtF,QAAM,EAAE,WAAW,WAAW,gBAAgB,eAAe,QAAI,8BAAW;AAAA,IAC1E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,cAAU,sBAAQ,UAAM,YAAAA,IAAO,GAAG,CAAC,CAAC;AAE1C,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;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,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
-  "names": ["uuidv4"]
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useEffect, useRef } from 'react';\nimport { uid } from 'uid';\nimport { debounce } from 'lodash';\nimport { ScaleBand } from 'd3';\n// import { useResizeObserver } 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';\nimport { useInternalMargins } from './useInternalMargins';\nimport { useGetters } from './useGetters';\nimport ResizeObserver from 'resize-observer-polyfill';\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\ntype DimensionT = ResizeObserverConstructorEntries[0]['contentRect'] | null;\n\nconst useResizeObserver = (ref: HTMLElement | null | undefined) => {\n  const [dimensions, setDimensions] = useState<DimensionT>(null);\n  useEffect(() => {\n    if (ref) {\n      const observeTarget = ref;\n      const resizeObserver = new ResizeObserver(\n        debounce((entries: ResizeObserverConstructorEntries) => {\n          entries.forEach((entry) => {\n            setDimensions(entry.contentRect);\n          });\n        }, 200),\n      );\n      resizeObserver.observe(observeTarget);\n\n      return () => {\n        resizeObserver.unobserve(observeTarget);\n      };\n    }\n  }, [ref]);\n  return dimensions;\n};\n\nexport const useChart = (props: DSChartT.Props) => {\n  // useValidateTypescriptPropTypes(props, propTypes);\n\n  const { series, yAxis, xAxis, width: userWidth, height: userHeight, groups: groupsStacked } = props;\n\n  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);\n  const svgRef = useRef(null);\n\n  const dimensions = useResizeObserver(containerRef);\n  const width = useMemo(() => userWidth ?? dimensions?.width ?? 0, [dimensions, userWidth]);\n\n  const height = useMemo(() => userHeight ?? 500, [userHeight]);\n\n  // useResizeObserver(({ width: newWidth, height: newHeight }) => {\n  //   setResizeWidth(newWidth);\n  // }, containerRef?.parentElement);\n\n  const [isGrabbed, setIsGrabbed] = useState(false);\n  const [startPosition, setStartPosition] = useState(0);\n\n  const [activePoint, setActivePoint] = useState(null);\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 [containerRatio, setContainerRatio] = useState(\n    props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1,\n  );\n\n  const lastPosition = useRef(0);\n\n  const [axisLeftRef, setAxisLeftRef] = useState<SVGGElement | null>(null);\n  const [axisBottomRef, setAxisBottomRef] = useState<SVGGElement | null>(null);\n  const [axisRightRef, setAxisRightRef] = useState<SVGGElement | null>(null);\n\n  const [leftLegend, setLeftLegend] = useState<SVGGElement | null>(null);\n  const [rightLegend, setRightLegend] = useState<SVGGElement | null>(null);\n  const [topLegend, setTopLegend] = useState<SVGGElement | null>(null);\n  const [bottomLegend, setBottomLegend] = useState<SVGGElement | null>(null);\n\n  const [rightLabel, setRightLabel] = useState<SVGGElement | null>(null);\n  const [leftLabel, setLeftLabel] = useState<SVGGElement | null>(null);\n  const [bottomLabel, setBottomLabel] = useState<SVGGElement | null>(null);\n\n  const [toolbarRef, setToolbarRef] = useState<SVGGElement | null>(null);\n\n  const {\n    toolbarHeight,\n    axisBottomHeight,\n    axisRightWidth,\n    bottomLabelHeight,\n    internalMargin,\n    leftLegendWidth,\n    rightLabelWidth,\n  } = useInternalMargins({\n    axisLeftRef,\n    axisBottomRef,\n    axisRightRef,\n    leftLabel,\n    leftLegend,\n    rightLegend,\n    topLegend,\n    bottomLegend,\n    rightLabel,\n    bottomLabel,\n    toolbarRef,\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 [hiddenSeries, setHiddenSeries] = useState<string[]>([]);\n\n  const currentData = useMemo(\n    () =>\n      series\n        .filter((serie) => !hiddenSeries.includes(serie.name))\n        .map((d, i) => ({\n          ...d,\n          key: `${d.name}-${i}`,\n          data: d.data\n            .map((value, index) => ({\n              key: `${d.name}-${i}-${index}`,\n              value,\n              position: index,\n              serie: d.name,\n              scale: d.scale,\n            }))\n            .filter((datum) => datum.value !== null && datum.value !== undefined), // basically converting from DSChartT.SeriesT to DSChartT.InternalData...\n        })) as DSChartT.InternalData,\n    [hiddenSeries, series],\n  );\n\n  const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);\n\n  // @TODO we need to create a logic to get this from both axis\n  // const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;\n\n  const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);\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 as ScaleBand<string>).bandwidth, [yScale]);\n\n  const { getXValue, getYValue, getXScaleValue, getYScaleValue } = useGetters({\n    xAxis,\n    yAxis,\n    isHorizontal,\n    xScale,\n    yScale,\n    y2Scale,\n  });\n  const chartId = useMemo(() => uid(6), []);\n\n  return useMemo(\n    () => ({\n      props,\n      innerHeight,\n      innerWidth,\n      groups,\n      currentData,\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      setContainerRef,\n      startPosition,\n      setStartPosition,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      lastPosition,\n      containerRatio,\n      internalMargin,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      setAxisLeftRef,\n      setLeftLegend,\n      setRightLegend,\n      rightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomRef,\n      axisBottomHeight,\n      setAxisRightRef,\n      setRightLabel,\n      setBottomLabel,\n      getXScaleValue,\n      getYScaleValue,\n      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      setHiddenSeries,\n      height,\n      width,\n      setContainerRatio,\n      toolbarHeight,\n      setToolbarRef,\n    }),\n    [\n      props,\n      innerHeight,\n      innerWidth,\n      groups,\n      currentData,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      xScale,\n      yScale,\n      y2Scale,\n      containerRef,\n      getBandwidth,\n      scrapperPosY,\n      scrapperPosX,\n      activePoint,\n      activeSerie,\n      xScrollbarPosition,\n      isGrabbed,\n      startPosition,\n      isScrollbarVisible,\n      containerRatio,\n      internalMargin,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      rightLegend,\n      axisBottomHeight,\n      getXScaleValue,\n      getYScaleValue,\n      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      height,\n      width,\n      setContainerRatio,\n      toolbarHeight,\n      setToolbarRef,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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CA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;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,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": ["ResizeObserver"]
 }

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

@@ -43,9 +43,15 @@ const useInternalMargins = ({
   toolbarRef
 }) => {
   const axisLeftWidth = (0, import_react.useMemo)(() => axisLeftRef?.getBoundingClientRect()?.width || 0, [axisLeftRef]);
-  const axisBottomHeight = (0, import_react.useMemo)(() => axisBottomRef?.getBoundingClientRect()?.height || 0, [axisBottomRef]);
+  const axisBottomHeight = (0, import_react.useMemo)(
+    () => axisBottomRef?.getBoundingClientRect()?.height ? axisBottomRef?.getBoundingClientRect()?.height + 20 : 0,
+    [axisBottomRef]
+  );
   const axisRightWidth = (0, import_react.useMemo)(() => axisRightRef?.getBoundingClientRect()?.width || 0, [axisRightRef]);
-  const bottomLabelHeight = (0, import_react.useMemo)(() => bottomLabel?.getBoundingClientRect()?.height || 0, [bottomLabel]);
+  const bottomLabelHeight = (0, import_react.useMemo)(
+    () => bottomLabel?.getBoundingClientRect()?.height ? bottomLabel?.getBoundingClientRect()?.height + 10 : 0,
+    [bottomLabel]
+  );
   const rightLabelWidth = (0, import_react.useMemo)(() => rightLabel?.getBoundingClientRect()?.width || 0, [rightLabel]);
   const leftLabelWidth = (0, import_react.useMemo)(() => leftLabel?.getBoundingClientRect()?.width || 0, [leftLabel]);
   const topLegendHeight = (0, import_react.useMemo)(() => topLegend?.getBoundingClientRect()?.height || 0, [topLegend]);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/config/useInternalMargins.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo } from 'react';\n\ninterface UseInternalMarginsT {\n  axisLeftRef: SVGGElement | null;\n  axisBottomRef: SVGGElement | null;\n  axisRightRef: SVGGElement | null;\n  leftLegend: SVGGElement | null;\n  leftLabel: SVGGElement | null;\n  rightLegend: SVGGElement | null;\n  topLegend: SVGGElement | null;\n  bottomLegend: SVGGElement | null;\n  rightLabel: SVGGElement | null;\n  bottomLabel: SVGGElement | null;\n  toolbarRef: SVGGElement | null;\n}\nexport const useInternalMargins = ({\n  axisLeftRef,\n  axisBottomRef,\n  axisRightRef,\n  leftLabel,\n  leftLegend,\n  rightLegend,\n  topLegend,\n  bottomLegend,\n  rightLabel,\n  bottomLabel,\n  toolbarRef,\n}: UseInternalMarginsT) => {\n  // Axis\n  const axisLeftWidth = useMemo(() => axisLeftRef?.getBoundingClientRect()?.width || 0, [axisLeftRef]);\n  const axisBottomHeight = useMemo(() => axisBottomRef?.getBoundingClientRect()?.height || 0, [axisBottomRef]);\n  const axisRightWidth = useMemo(() => axisRightRef?.getBoundingClientRect()?.width || 0, [axisRightRef]);\n\n  // Labels\n  const bottomLabelHeight = useMemo(() => bottomLabel?.getBoundingClientRect()?.height || 0, [bottomLabel]);\n  const rightLabelWidth = useMemo(() => rightLabel?.getBoundingClientRect()?.width || 0, [rightLabel]);\n  const leftLabelWidth = useMemo(() => leftLabel?.getBoundingClientRect()?.width || 0, [leftLabel]);\n\n  // Legends\n  const topLegendHeight = useMemo(() => topLegend?.getBoundingClientRect()?.height || 0, [topLegend]);\n  const bottomLegendHeight = useMemo(() => bottomLegend?.getBoundingClientRect()?.height || 0, [bottomLegend]);\n  const rightLegendWidth = useMemo(() => rightLegend?.getBoundingClientRect()?.width || 0, [rightLegend]);\n  const leftLegendWidth = useMemo(() => leftLegend?.getBoundingClientRect()?.width || 0, [leftLegend]);\n\n  const toolbarHeight = useMemo(() => toolbarRef?.getBoundingClientRect()?.height || 0, [toolbarRef]);\n\n  const internalMargin = useMemo(\n    () => ({\n      bottom: 10 + axisBottomHeight + bottomLegendHeight + bottomLabelHeight,\n      top: 10 + topLegendHeight + toolbarHeight,\n      right: 15 + rightLabelWidth + axisRightWidth + rightLegendWidth,\n      left: 10 + axisLeftWidth + leftLabelWidth + leftLegendWidth,\n    }),\n\n    [\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      toolbarHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      leftLegendWidth,\n    ],\n  );\n\n  return useMemo(\n    () => ({\n      internalMargin,\n      leftLegendWidth,\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      toolbarHeight,\n    }),\n    [\n      axisBottomHeight,\n      toolbarHeight,\n      axisLeftWidth,\n      axisRightWidth,\n      bottomLabelHeight,\n      bottomLegendHeight,\n      internalMargin,\n      leftLabelWidth,\n      leftLegendWidth,\n      rightLabelWidth,\n      rightLegendWidth,\n      topLegendHeight,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwB;AAejB,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AAEzB,QAAM,oBAAgB,sBAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACnG,QAAM,uBAAmB,sBAAQ,MAAM,eAAe,sBAAsB,GAAG,UAAU,GAAG,CAAC,aAAa,CAAC;AAC3G,QAAM,qBAAiB,sBAAQ,MAAM,cAAc,sBAAsB,GAAG,SAAS,GAAG,CAAC,YAAY,CAAC;AAGtG,QAAM,wBAAoB,sBAAQ,MAAM,aAAa,sBAAsB,GAAG,UAAU,GAAG,CAAC,WAAW,CAAC;AACxG,QAAM,sBAAkB,sBAAQ,MAAM,YAAY,sBAAsB,GAAG,SAAS,GAAG,CAAC,UAAU,CAAC;AACnG,QAAM,qBAAiB,sBAAQ,MAAM,WAAW,sBAAsB,GAAG,SAAS,GAAG,CAAC,SAAS,CAAC;AAGhG,QAAM,sBAAkB,sBAAQ,MAAM,WAAW,sBAAsB,GAAG,UAAU,GAAG,CAAC,SAAS,CAAC;AAClG,QAAM,yBAAqB,sBAAQ,MAAM,cAAc,sBAAsB,GAAG,UAAU,GAAG,CAAC,YAAY,CAAC;AAC3G,QAAM,uBAAmB,sBAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACtG,QAAM,sBAAkB,sBAAQ,MAAM,YAAY,sBAAsB,GAAG,SAAS,GAAG,CAAC,UAAU,CAAC;AAEnG,QAAM,oBAAgB,sBAAQ,MAAM,YAAY,sBAAsB,GAAG,UAAU,GAAG,CAAC,UAAU,CAAC;AAElG,QAAM,qBAAiB;AAAA,IACrB,OAAO;AAAA,MACL,QAAQ,KAAK,mBAAmB,qBAAqB;AAAA,MACrD,KAAK,KAAK,kBAAkB;AAAA,MAC5B,OAAO,KAAK,kBAAkB,iBAAiB;AAAA,MAC/C,MAAM,KAAK,gBAAgB,iBAAiB;AAAA,IAC9C;AAAA,IAEA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;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,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo } from 'react';\n\ninterface UseInternalMarginsT {\n  axisLeftRef: SVGGElement | null;\n  axisBottomRef: SVGGElement | null;\n  axisRightRef: SVGGElement | null;\n  leftLegend: SVGGElement | null;\n  leftLabel: SVGGElement | null;\n  rightLegend: SVGGElement | null;\n  topLegend: SVGGElement | null;\n  bottomLegend: SVGGElement | null;\n  rightLabel: SVGGElement | null;\n  bottomLabel: SVGGElement | null;\n  toolbarRef: SVGGElement | null;\n}\nexport const useInternalMargins = ({\n  axisLeftRef,\n  axisBottomRef,\n  axisRightRef,\n  leftLabel,\n  leftLegend,\n  rightLegend,\n  topLegend,\n  bottomLegend,\n  rightLabel,\n  bottomLabel,\n  toolbarRef,\n}: UseInternalMarginsT) => {\n  // Axis\n  const axisLeftWidth = useMemo(() => axisLeftRef?.getBoundingClientRect()?.width || 0, [axisLeftRef]);\n  const axisBottomHeight = useMemo(\n    () => (axisBottomRef?.getBoundingClientRect()?.height ? axisBottomRef?.getBoundingClientRect()?.height + 20 : 0),\n    [axisBottomRef],\n  );\n  const axisRightWidth = useMemo(() => axisRightRef?.getBoundingClientRect()?.width || 0, [axisRightRef]);\n\n  // Labels\n  const bottomLabelHeight = useMemo(\n    () => (bottomLabel?.getBoundingClientRect()?.height ? bottomLabel?.getBoundingClientRect()?.height + 10 : 0),\n    [bottomLabel],\n  );\n  const rightLabelWidth = useMemo(() => rightLabel?.getBoundingClientRect()?.width || 0, [rightLabel]);\n  const leftLabelWidth = useMemo(() => leftLabel?.getBoundingClientRect()?.width || 0, [leftLabel]);\n\n  // Legends\n  const topLegendHeight = useMemo(() => topLegend?.getBoundingClientRect()?.height || 0, [topLegend]);\n  const bottomLegendHeight = useMemo(() => bottomLegend?.getBoundingClientRect()?.height || 0, [bottomLegend]);\n  const rightLegendWidth = useMemo(() => rightLegend?.getBoundingClientRect()?.width || 0, [rightLegend]);\n  const leftLegendWidth = useMemo(() => leftLegend?.getBoundingClientRect()?.width || 0, [leftLegend]);\n\n  const toolbarHeight = useMemo(() => toolbarRef?.getBoundingClientRect()?.height || 0, [toolbarRef]);\n\n  const internalMargin = useMemo(\n    () => ({\n      bottom: 10 + axisBottomHeight + bottomLegendHeight + bottomLabelHeight,\n      top: 10 + topLegendHeight + toolbarHeight,\n      right: 15 + rightLabelWidth + axisRightWidth + rightLegendWidth,\n      left: 10 + axisLeftWidth + leftLabelWidth + leftLegendWidth,\n    }),\n\n    [\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      toolbarHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      leftLegendWidth,\n    ],\n  );\n\n  return useMemo(\n    () => ({\n      internalMargin,\n      leftLegendWidth,\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      toolbarHeight,\n    }),\n    [\n      axisBottomHeight,\n      toolbarHeight,\n      axisLeftWidth,\n      axisRightWidth,\n      bottomLabelHeight,\n      bottomLegendHeight,\n      internalMargin,\n      leftLabelWidth,\n      leftLegendWidth,\n      rightLabelWidth,\n      rightLegendWidth,\n      topLegendHeight,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwB;AAejB,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AAEzB,QAAM,oBAAgB,sBAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACnG,QAAM,uBAAmB;AAAA,IACvB,MAAO,eAAe,sBAAsB,GAAG,SAAS,eAAe,sBAAsB,GAAG,SAAS,KAAK;AAAA,IAC9G,CAAC,aAAa;AAAA,EAChB;AACA,QAAM,qBAAiB,sBAAQ,MAAM,cAAc,sBAAsB,GAAG,SAAS,GAAG,CAAC,YAAY,CAAC;AAGtG,QAAM,wBAAoB;AAAA,IACxB,MAAO,aAAa,sBAAsB,GAAG,SAAS,aAAa,sBAAsB,GAAG,SAAS,KAAK;AAAA,IAC1G,CAAC,WAAW;AAAA,EACd;AACA,QAAM,sBAAkB,sBAAQ,MAAM,YAAY,sBAAsB,GAAG,SAAS,GAAG,CAAC,UAAU,CAAC;AACnG,QAAM,qBAAiB,sBAAQ,MAAM,WAAW,sBAAsB,GAAG,SAAS,GAAG,CAAC,SAAS,CAAC;AAGhG,QAAM,sBAAkB,sBAAQ,MAAM,WAAW,sBAAsB,GAAG,UAAU,GAAG,CAAC,SAAS,CAAC;AAClG,QAAM,yBAAqB,sBAAQ,MAAM,cAAc,sBAAsB,GAAG,UAAU,GAAG,CAAC,YAAY,CAAC;AAC3G,QAAM,uBAAmB,sBAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACtG,QAAM,sBAAkB,sBAAQ,MAAM,YAAY,sBAAsB,GAAG,SAAS,GAAG,CAAC,UAAU,CAAC;AAEnG,QAAM,oBAAgB,sBAAQ,MAAM,YAAY,sBAAsB,GAAG,UAAU,GAAG,CAAC,UAAU,CAAC;AAElG,QAAM,qBAAiB;AAAA,IACrB,OAAO;AAAA,MACL,QAAQ,KAAK,mBAAmB,qBAAqB;AAAA,MACrD,KAAK,KAAK,kBAAkB;AAAA,MAC5B,OAAO,KAAK,kBAAkB,iBAAiB;AAAA,MAC/C,MAAM,KAAK,gBAAgB,iBAAiB;AAAA,IAC9C;AAAA,IAEA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;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,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Axis/Axes.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useContext } from 'react';\n\nimport { ChartContext } from '../../ChartContext';\nimport { ScrollableContainerX } from '../Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from '../Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './AxisBottom';\nimport { AxisRight } from './AxisRight';\nimport { AxisLeft } from './AxisLeft';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nexport const Axes = () => {\n  const {\n    props: { scrapper, xAxis, yAxis, xScroll },\n  } = useContext(ChartContext);\n\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n  // retrocompatibility we use the prop to\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};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAElC,0BAA6B;AAC7B,kCAAqC;AACrC,kCAAqC;AAErC,wBAA2B;AAC3B,uBAA0B;AAC1B,sBAAyB;AACzB,2BAA8B;AAC9B,sBAAyB;AACzB,8BAAiC;AAC1B,MAAM,OAAO,MAAM;AACxB,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,OAAO,OAAO,QAAQ;AAAA,EAC3C,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAGtD,MAAI,WAAW,MAAM,UAAU,cAAc,QAAQ,GAAG;AACtD,WACE;AAAA,MACE;AAAA,oDAAC,8BAAU;AAAA,QACX,4CAAC,4BAAS;AAAA,QACV,4CAAC,oDAAqB;AAAA;AAAA,KACxB;AAAA,EAEJ;AACA,MAAI,SAAS;AACX,WACE;AAAA,MACE;AAAA,oDAAC,gCAAW;AAAA,QACZ,4CAAC,oDAAqB;AAAA;AAAA,KACxB;AAAA,EAEJ;AACA,SACE;AAAA,IACE;AAAA,kDAAC,8BAAU;AAAA,MACX,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;AAAA,GAC1D;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBjB;AAtBN,mBAAkC;AAElC,0BAA6B;AAC7B,kCAAqC;AACrC,kCAAqC;AAErC,wBAA2B;AAC3B,uBAA0B;AAC1B,sBAAyB;AACzB,2BAA8B;AAC9B,sBAAyB;AACzB,8BAAiC;AAC1B,MAAM,OAAO,MAAM;AACxB,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,OAAO,OAAO,QAAQ;AAAA,EAC3C,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAGtD,MAAI,WAAW,MAAM,UAAU,cAAc,QAAQ,GAAG;AACtD,WACE;AAAA,MACE;AAAA,oDAAC,8BAAU;AAAA,QACX,4CAAC,4BAAS;AAAA,QACV,4CAAC,oDAAqB;AAAA;AAAA,KACxB;AAAA,EAEJ;AACA,MAAI,SAAS;AACX,WACE;AAAA,MACE;AAAA,oDAAC,gCAAW;AAAA,QACZ,4CAAC,oDAAqB;AAAA;AAAA,KACxB;AAAA,EAEJ;AACA,SACE;AAAA,IACE;AAAA,kDAAC,8BAAU;AAAA,MACX,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;AAAA,GAC1D;AAEJ;",
   "names": []
 }

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 { select, axisBottom, timeFormat, ScaleLinear, ScaleTime } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport { 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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiHnB;AA/GJ,mBAAqD;AACrD,gBAAuE;AACvE,oBAAuC;AACvC,0BAA6B;AAE7B,2BAA8B;AAC9B,qBAAmC;AAE5B,MAAM,aAAa,aAAAA,QAAM,KAAK,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,cAAU,qBAAsB,IAAI;AAC1C,QAAM,cAAU,qBAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,YAAY,gBAAgB,OAAO,cAAc,UAAU,IAC7E,MAAM,QAAS,CAAC;AAElB,QAAM,cAAc,CAAC,UAAU,QAAQ,KAAK;AAG5C,QAAM,iBAAa,oCAAc;AACjC,8BAAU,MAAM;AACd,UAAM,WAAO,sBAAW,MAAqC,EAC1D,SAAS,CAAC,WAAW,EACrB,WAAW,EAAE,EACb,cAAc,CAAC;AAElB,UAAM,WAAO,sBAAW,MAAqC,EAAE,cAAc,CAAC;AAE9E,QAAI,YAAY,SAAS,MAAM,IAAI,GAAG;AACpC,YAAM,YAAY,MAAM;AACtB,YAAI;AAAW,iBAAO;AACtB,YAAI,iBAAiB,GAAG;AACtB,iBAAQ,aAAa,MAAO;AAAA,QAC9B;AACA,eAAO,aAAa;AAAA,MACtB,GAAG;AACH,YAAM,QAAS,OAA0E,QAAQ,QAAQ;AAIzG,UAAI,iBAAiB,KAAK,WAAW,SAAS,MAAM,CAAC,cAAc;AACjE,cAAM,YAAY,WAAW,IAAI,CAAC,MAAM,EAAE,MAAM;AAChD,aAAK,WAAW,SAAS;AACzB,aAAK,WAAW,SAAS;AAAA,MAC3B,WAAW,cAAc,OAAO;AAC9B,cAAM,aAAa,iBAAiB,aAAa,CAAC,GAAG,OAAO,GAAG,UAAU;AACzE,aAAK,WAAW,UAAU;AAAA,MAC5B,OAAO;AACL,aAAK,WAAW,KAAK;AACrB,aAAK,WAAW,KAAK;AAAA,MACvB;AAEA,UAAI,YAAY;AACd,YAAI,OAAO,eAAe,UAAU;AAClC,gBAAM,sBAAkB,mCAAmB,MAAM,QAAQ,QAAQ;AACjE,eAAK,WAAW,CAAC,MAAM,gBAAgB,UAAU,EAAE,CAAC,CAAC;AAAA,QACvD;AACA,YAAI,OAAO,eAAe,YAAY;AACpC,eAAK,WAAW,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAEA,QAAI,SAAS,WAAW,SAAS,SAAS;AACxC,UAAI,OAAO;AAAU,8BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACtD,YAAM,eAAW,kBAAO,QAAQ,OAAO;AACvC,eAAS,KAAK,IAAI;AAGlB,YAAM,YAAY,SAAS,OAAO,OAAO,EAAE,KAAK;AAChD,UAAI,WAAW,sBAAsB,EAAE,OAAO,eAAe,OAAO,MAAM,CAAC,OAAO,WAAW;AAC3F,kBAAU,OAAO;AAAA,MACnB;AACA,UAAI;AACF,iBACG,UAAU,MAAM,EAChB,MAAM,eAAe,eAAe,IAAI,UAAU,KAAK,EACvD,KAAK,MAAM,IAAI,KAAK,IAAI,KAAK,MAAM,eAAe,IAAI,CAAC,EACvD,KAAK,MAAM,OAAO,EAClB,KAAK,KAAK,OAAO,OAAO,eAAe,OAAO,eAAe,IAAI,IAAI,GAAG,EACxE,KAAK,aAAa,UAAU,eAAe;AAAA,IAClD;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,IACf;AAAA,EACF,CAAC;AACD,MAAI,MAAM;AAAU,WAAO;AAC3B,SACE,6CAAC;AAAA,IAAE,WAAW,eAAe;AAAA,IAC3B;AAAA,kDAAC;AAAA,QAAE,KAAK;AAAA,QACN,sDAAC;AAAA,UAAW,WAAW,MAAM;AAAA,UAAO,WAAW;AAAA,UAAO,KAAK;AAAA,SAAS;AAAA,OACtE;AAAA,MACA,4CAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ,CAAC;",
   "names": ["React"]
 }

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;ADAvB;AAEA,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;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;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "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;ADAvB;AAAA,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;",
+  "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;",
   "names": []
 }

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

@@ -124,7 +124,7 @@ const ChartContainer = () => {
     setIsGrabbed(false);
   }, [lastPosition, setIsGrabbed, xScrollbarPosition]);
   const key = (0, import_react.useMemo)(
-    () => `translate(${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom})`,
+    () => `${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom}`,
     [internalMargin, width]
   );
   if (currentData.length === 0)
@@ -171,6 +171,7 @@ const ChartContainer = () => {
     onMouseUp: handleMouseUp,
     onMouseDown: (e) => e.preventDefault(),
     isGrabbed,
+    style: { width, height },
     children: width !== 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
       ref: svgRef,
       width,

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 },\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    width,\n    height,\n    currentData,\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    () =>\n      `translate(${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    >\n      {width !== 0 ? (\n        <svg ref={svgRef} width={width} height={height}>\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          {/* this clipaths for animations and focus ring.. need to give a deeper look */}\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, xScroll, scrapper, xAxis },\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    width,\n    height,\n    currentData,\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, height }}\n    >\n      {width !== 0 ? (\n        <svg ref={svgRef} width={width} height={height}>\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          {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n        </svg>\n      ) : null}\n    </StyledSVGWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/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 * 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;ADAvB;AAEA,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,OAAO,aAAa;AAAA,UAAgB,QAAQ,cAAc;AAAA,UAAG,GAAG;AAAA,SAAI;AAAA,OAE9E;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;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,OAAO,aAAa;AAAA,UAAgB,QAAQ,cAAc;AAAA,UAAG,GAAG;AAAA,SAAI;AAAA,OAE9E;AAAA,KACF;AAAA,GAeF;AAEJ;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/parts/FocusableRegion.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState, useContext, useMemo } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\n\nimport { StyledTooltipContainer, StyledMouseOverDetectionBox } from '../styles';\n\nexport const FocusableRegion: React.ComponentType<any> = (props) => {\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n  const theme = useContext(ThemeContext);\n\n  const { content, ...rest } = props;\n\n  return useMemo(\n    () => (\n      <foreignObject {...rest} ref={setReferenceElement}>\n        <div>\n          <DSPopperJS withoutAnimation referenceElement={referenceElement} showPopover zIndex={theme.zIndex.tooltip}>\n            <StyledMouseOverDetectionBox />\n            <StyledTooltipContainer aria-live=\"polite\" aria-atomic=\"false\" aria-relevant=\"additions text\">\n              {content}\n            </StyledTooltipContainer>\n          </DSPopperJS>\n        </div>\n      </foreignObject>\n    ),\n    [content, referenceElement, rest, theme.zIndex.tooltip],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAqD;AACrD,yBAA2B;AAC3B,uBAA6B;AAE7B,oBAAoE;AAE7D,MAAM,kBAA4C,CAAC,UAAU;AAClE,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAiC;AACjF,QAAM,YAAQ,yBAAW,6BAAY;AAErC,QAAM,EAAE,YAAY,KAAK,IAAI;AAE7B,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAe,GAAG;AAAA,MAAM,KAAK;AAAA,MAC5B,sDAAC;AAAA,QACC,uDAAC;AAAA,UAAW,kBAAgB;AAAA,UAAC;AAAA,UAAoC,aAAW;AAAA,UAAC,QAAQ,MAAM,OAAO;AAAA,UAChG;AAAA,wDAAC,6CAA4B;AAAA,YAC7B,4CAAC;AAAA,cAAuB,aAAU;AAAA,cAAS,eAAY;AAAA,cAAQ,iBAAc;AAAA,cAC1E;AAAA,aACH;AAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IAEF,CAAC,SAAS,kBAAkB,MAAM,MAAM,OAAO,OAAO;AAAA,EACxD;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBb;AAhBV,mBAAqD;AACrD,yBAA2B;AAC3B,uBAA6B;AAE7B,oBAAoE;AAE7D,MAAM,kBAA4C,CAAC,UAAU;AAClE,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAiC;AACjF,QAAM,YAAQ,yBAAW,6BAAY;AAErC,QAAM,EAAE,YAAY,KAAK,IAAI;AAE7B,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAe,GAAG;AAAA,MAAM,KAAK;AAAA,MAC5B,sDAAC;AAAA,QACC,uDAAC;AAAA,UAAW,kBAAgB;AAAA,UAAC;AAAA,UAAoC,aAAW;AAAA,UAAC,QAAQ,MAAM,OAAO;AAAA,UAChG;AAAA,wDAAC,6CAA4B;AAAA,YAC7B,4CAAC;AAAA,cAAuB,aAAU;AAAA,cAAS,eAAY;AAAA,cAAQ,iBAAc;AAAA,cAC1E;AAAA,aACH;AAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IAEF,CAAC,SAAS,kBAAkB,MAAM,MAAM,OAAO,OAAO;AAAA,EACxD;AACF;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/Labels/BottomLabel.js CHANGED Viewed

@@ -43,7 +43,7 @@ const BottomLabel = () => {
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
     ref: setBottomLabel,
-    transform: `translate(${innerWidth / 2 + internalMargin.left},${innerHeight + axisBottomHeight + internalMargin.top + 20})`,
+    transform: `translate(${innerWidth / 2 + internalMargin.left},${innerHeight + axisBottomHeight + internalMargin.top})`,
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxisLabel, {
       className: "axis-label",
       textAnchor: "middle",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Labels/BottomLabel.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const BottomLabel = () => {\n  const {\n    internalMargin,\n    setBottomLabel,\n    innerHeight,\n    innerWidth,\n    axisBottomHeight,\n    props: { xAxis },\n  } = useContext(ChartContext);\n\n  return (\n    <g\n      ref={setBottomLabel}\n      transform={`translate(${innerWidth / 2 + internalMargin.left},${\n        innerHeight + axisBottomHeight + internalMargin.top + 20\n      })`}\n    >\n      <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\">\n        {xAxis?.label}\n      </StyledAxisLabel>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAClC,0BAA6B;AAC7B,oBAAgC;AAEzB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,QAAI,yBAAW,gCAAY;AAE3B,SACE,4CAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,aAAa,IAAI,eAAe,QACtD,cAAc,mBAAmB,eAAe,MAAM;AAAA,IAGxD,sDAAC;AAAA,MAAgB,WAAU;AAAA,MAAa,YAAW;AAAA,MAChD,iBAAO;AAAA,KACV;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const BottomLabel = () => {\n  const {\n    internalMargin,\n    setBottomLabel,\n    innerHeight,\n    innerWidth,\n    axisBottomHeight,\n    props: { xAxis },\n  } = useContext(ChartContext);\n\n  return (\n    <g\n      ref={setBottomLabel}\n      transform={`translate(${innerWidth / 2 + internalMargin.left},${\n        innerHeight + axisBottomHeight + internalMargin.top\n      })`}\n    >\n      <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\">\n        {xAxis?.label}\n      </StyledAxisLabel>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBjB;AArBN,mBAAkC;AAClC,0BAA6B;AAC7B,oBAAgC;AAEzB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,QAAI,yBAAW,gCAAY;AAE3B,SACE,4CAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,aAAa,IAAI,eAAe,QACtD,cAAc,mBAAmB,eAAe;AAAA,IAGlD,sDAAC;AAAA,MAAgB,WAAU;AAAA,MAAa,YAAW;AAAA,MAChD,iBAAO;AAAA,KACV;AAAA,GACF;AAEJ;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Labels/Label.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useContext, useMemo } from 'react';\n\nimport { ChartContext } from '../../ChartContext';\nimport { RightLabel } from './RightLabel';\nimport { LeftLabel } from './LeftLabel';\nimport { BottomLabel } from './BottomLabel';\n\nexport const Label = () => {\n  const {\n    props: { xAxis, yAxis, y2Axis },\n  } = useContext(ChartContext);\n\n  return useMemo(\n    () => (\n      <g>\n        {y2Axis?.label ? <RightLabel /> : ''}\n        {yAxis?.label ? <LeftLabel /> : ''}\n        {xAxis?.label ? <BottomLabel /> : ''}\n      </g>\n    ),\n    [xAxis?.label, y2Axis?.label, yAxis?.label],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA2C;AAE3C,0BAA6B;AAC7B,wBAA2B;AAC3B,uBAA0B;AAC1B,yBAA4B;AAErB,MAAM,QAAQ,MAAM;AACzB,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO,OAAO;AAAA,EAChC,QAAI,yBAAW,gCAAY;AAE3B,aAAO;AAAA,IACL,MACE,6CAAC;AAAA,MACE;AAAA,gBAAQ,QAAQ,4CAAC,gCAAW,IAAK;AAAA,QACjC,OAAO,QAAQ,4CAAC,8BAAU,IAAK;AAAA,QAC/B,OAAO,QAAQ,4CAAC,kCAAY,IAAK;AAAA;AAAA,KACpC;AAAA,IAEF,CAAC,OAAO,OAAO,QAAQ,OAAO,OAAO,KAAK;AAAA,EAC5C;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAdN,mBAA2C;AAE3C,0BAA6B;AAC7B,wBAA2B;AAC3B,uBAA0B;AAC1B,yBAA4B;AAErB,MAAM,QAAQ,MAAM;AACzB,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO,OAAO;AAAA,EAChC,QAAI,yBAAW,gCAAY;AAE3B,aAAO;AAAA,IACL,MACE,6CAAC;AAAA,MACE;AAAA,gBAAQ,QAAQ,4CAAC,gCAAW,IAAK;AAAA,QACjC,OAAO,QAAQ,4CAAC,8BAAU,IAAK;AAAA,QAC/B,OAAO,QAAQ,4CAAC,kCAAY,IAAK;AAAA;AAAA,KACpC;AAAA,IAEF,CAAC,OAAO,OAAO,QAAQ,OAAO,OAAO,KAAK;AAAA,EAC5C;AACF;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Labels/LeftLabel.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const LeftLabel = () => {\n  const {\n    innerHeight,\n    internalMargin,\n    setLeftLabel,\n    leftLegendWidth,\n    props: { yAxis },\n  } = useContext(ChartContext);\n\n  return (\n    <g\n      ref={setLeftLabel}\n      transform={`translate(${leftLegendWidth > 0 ? leftLegendWidth + 8 : 0},${\n        innerHeight / 2 + internalMargin.top\n      }) rotate(-90)`}\n    >\n      {/* <rect height=\"30\" width=\"1\" fill=\"transparent\" /> */}\n      <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\" dy={15}>\n        {yAxis?.label}\n      </StyledAxisLabel>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA2C;AAC3C,0BAA6B;AAC7B,oBAAgC;AAEzB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,QAAI,yBAAW,gCAAY;AAE3B,SACE,4CAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,kBAAkB,IAAI,kBAAkB,IAAI,KAClE,cAAc,IAAI,eAAe;AAAA,IAInC,sDAAC;AAAA,MAAgB,WAAU;AAAA,MAAa,YAAW;AAAA,MAAS,IAAI;AAAA,MAC7D,iBAAO;AAAA,KACV;AAAA,GACF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBjB;AArBN,mBAA2C;AAC3C,0BAA6B;AAC7B,oBAAgC;AAEzB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,QAAI,yBAAW,gCAAY;AAE3B,SACE,4CAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,kBAAkB,IAAI,kBAAkB,IAAI,KAClE,cAAc,IAAI,eAAe;AAAA,IAInC,sDAAC;AAAA,MAAgB,WAAU;AAAA,MAAa,YAAW;AAAA,MAAS,IAAI;AAAA,MAC7D,iBAAO;AAAA,KACV;AAAA,GACF;AAEJ;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Labels/RightLabel.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useContext, useEffect, useRef, useState } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const RightLabel = () => {\n  const {\n    innerWidth,\n    innerHeight,\n    internalMargin,\n    axisRightWidth,\n    setRightLabel,\n    props: { y2Axis },\n  } = useContext(ChartContext);\n\n  return (\n    <g\n      ref={setRightLabel}\n      transform={`translate(${innerWidth + internalMargin.left + axisRightWidth},${\n        innerHeight / 2 + internalMargin.top\n      }) `}\n    >\n      <rect width=\"20\" height={1} fill=\"transparent\" />\n      <g transform=\" rotate(90)\">\n        <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\" dy=\"-15\">\n          {y2Axis?.label}\n        </StyledAxisLabel>\n      </g>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA+D;AAC/D,0BAA6B;AAC7B,oBAAgC;AAEzB,MAAM,aAAa,MAAM;AAC9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO;AAAA,EAClB,QAAI,yBAAW,gCAAY;AAE3B,SACE,6CAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,aAAa,eAAe,OAAO,kBACzD,cAAc,IAAI,eAAe;AAAA,IAGnC;AAAA,kDAAC;AAAA,QAAK,OAAM;AAAA,QAAK,QAAQ;AAAA,QAAG,MAAK;AAAA,OAAc;AAAA,MAC/C,4CAAC;AAAA,QAAE,WAAU;AAAA,QACX,sDAAC;AAAA,UAAgB,WAAU;AAAA,UAAa,YAAW;AAAA,UAAS,IAAG;AAAA,UAC5D,kBAAQ;AAAA,SACX;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADenB;AAfJ,mBAA+D;AAC/D,0BAA6B;AAC7B,oBAAgC;AAEzB,MAAM,aAAa,MAAM;AAC9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO;AAAA,EAClB,QAAI,yBAAW,gCAAY;AAE3B,SACE,6CAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,aAAa,eAAe,OAAO,kBACzD,cAAc,IAAI,eAAe;AAAA,IAGnC;AAAA,kDAAC;AAAA,QAAK,OAAM;AAAA,QAAK,QAAQ;AAAA,QAAG,MAAK;AAAA,OAAc;AAAA,MAC/C,4CAAC;AAAA,QAAE,WAAU;AAAA,QACX,sDAAC;AAAA,UAAgB,WAAU;AAAA,UAAa,YAAW;AAAA,UAAS,IAAG;AAAA,UAC5D,kBAAQ;AAAA,SACX;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/Legend/BottomLegend.js CHANGED Viewed

@@ -39,7 +39,7 @@ const BottomLegend = () => {
   const firstRender = (0, import_react.useRef)(true);
   const [xTransform, setXTransform] = (0, import_react.useState)(innerWidth / 2);
   (0, import_react.useLayoutEffect)(() => {
-    if (ref.current && firstRender.current) {
+    if (ref.current) {
       const cells = (0, import_d3.select)(ref.current).selectAll(".cell");
       const padding = 30;
       let offset = 0;
@@ -66,30 +66,23 @@ const BottomLegend = () => {
   const margin = (0, import_react.useMemo)(() => {
     let counter = 0;
     if (bottomLabelHeight > 0) {
-      counter += bottomLabelHeight + 20;
+      counter += bottomLabelHeight;
     }
     if (axisBottomHeight > 0) {
-      counter += axisBottomHeight + 15;
+      counter += axisBottomHeight;
     }
     return counter;
-  }, [bottomLabelHeight, axisBottomHeight]);
+  }, [axisBottomHeight, bottomLabelHeight]);
   return (0, import_react.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
       ref: setBottomLegend,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
         ref,
         transform: `translate(${xTransform + internalMargin.left}, ${innerHeight + internalMargin.top + margin})`,
         className: "bottom-legend",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
-            height: 30,
-            width: 1,
-            fill: "transparent"
-          }),
-          colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendItem.LegendItem, {
-            domainValue
-          }, domainValue))
-        ]
+        children: colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendItem.LegendItem, {
+          domainValue
+        }, domainValue))
       })
     }),
     [colorScale, innerHeight, internalMargin.left, internalMargin.top, margin, setBottomLegend, xTransform]

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Legend/BottomLegend.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useLayoutEffect, useRef, useState } from 'react';\nimport { select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const BottomLegend = () => {\n  const { colorScale, axisBottomHeight, innerWidth, innerHeight, bottomLabelHeight, internalMargin, setBottomLegend } =\n    useContext(ChartContext);\n\n  const ref = useRef<SVGGElement>(null);\n  const firstRender = useRef(true);\n\n  const [xTransform, setXTransform] = useState(innerWidth / 2);\n  useLayoutEffect(() => {\n    if (ref.current && firstRender.current) {\n      const cells = select(ref.current).selectAll('.cell');\n      const padding = 30;\n      let offset = 0;\n      let verticalOffset = 0;\n\n      cells.each((d, i) => {\n        if (cells._groups[0][i - 1]) {\n          const lastCell = select(cells._groups[0][i - 1]);\n          const d3sel = select(cells._groups[0][i]);\n\n          const { width } = lastCell.node().getBBox();\n          if (offset + width + padding > innerWidth - innerWidth / 3) {\n            offset = 0;\n            verticalOffset += 20;\n          } else {\n            offset += width + padding;\n          }\n\n          d3sel.attr('transform', `translate(${offset}, ${verticalOffset})`);\n        }\n      });\n      const bounds = ref.current.getBoundingClientRect();\n      setXTransform((prev) => prev - bounds.width / 2);\n      firstRender.current = false;\n    }\n  }, [innerWidth]);\n\n  const margin = useMemo(() => {\n    let counter = 0;\n    if (bottomLabelHeight > 0) {\n      counter += bottomLabelHeight + 20;\n    }\n    if (axisBottomHeight > 0) {\n      counter += axisBottomHeight + 15;\n    }\n    return counter;\n  }, [bottomLabelHeight, axisBottomHeight]);\n\n  return useMemo(\n    () => (\n      <g ref={setBottomLegend}>\n        <g\n          ref={ref}\n          transform={`translate(${xTransform + internalMargin.left}, ${innerHeight + internalMargin.top + margin})`}\n          className=\"bottom-legend\"\n        >\n          <rect height={30} width={1} fill=\"transparent\" />\n          {colorScale.domain().map((domainValue, i) => (\n            <LegendItem domainValue={domainValue} key={domainValue} />\n          ))}\n        </g>\n      </g>\n    ),\n\n    [colorScale, innerHeight, internalMargin.left, internalMargin.top, margin, setBottomLegend, xTransform],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA8E;AAC9E,gBAAuB;AACvB,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,eAAe,MAAM;AAChC,QAAM,EAAE,YAAY,kBAAkB,YAAY,aAAa,mBAAmB,gBAAgB,gBAAgB,QAChH,yBAAW,gCAAY;AAEzB,QAAM,UAAM,qBAAoB,IAAI;AACpC,QAAM,kBAAc,qBAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,aAAa,CAAC;AAC3D,oCAAgB,MAAM;AACpB,QAAI,IAAI,WAAW,YAAY,SAAS;AACtC,YAAM,YAAQ,kBAAO,IAAI,OAAO,EAAE,UAAU,OAAO;AACnD,YAAM,UAAU;AAChB,UAAI,SAAS;AACb,UAAI,iBAAiB;AAErB,YAAM,KAAK,CAAC,GAAG,MAAM;AACnB,YAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,gBAAM,eAAW,kBAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,gBAAM,YAAQ,kBAAO,MAAM,QAAQ,GAAG,EAAE;AAExC,gBAAM,EAAE,MAAM,IAAI,SAAS,KAAK,EAAE,QAAQ;AAC1C,cAAI,SAAS,QAAQ,UAAU,aAAa,aAAa,GAAG;AAC1D,qBAAS;AACT,8BAAkB;AAAA,UACpB,OAAO;AACL,sBAAU,QAAQ;AAAA,UACpB;AAEA,gBAAM,KAAK,aAAa,aAAa,WAAW,iBAAiB;AAAA,QACnE;AAAA,MACF,CAAC;AACD,YAAM,SAAS,IAAI,QAAQ,sBAAsB;AACjD,oBAAc,CAAC,SAAS,OAAO,OAAO,QAAQ,CAAC;AAC/C,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,aAAS,sBAAQ,MAAM;AAC3B,QAAI,UAAU;AACd,QAAI,oBAAoB,GAAG;AACzB,iBAAW,oBAAoB;AAAA,IACjC;AACA,QAAI,mBAAmB,GAAG;AACxB,iBAAW,mBAAmB;AAAA,IAChC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,gBAAgB,CAAC;AAExC,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,KAAK;AAAA,MACN,uDAAC;AAAA,QACC;AAAA,QACA,WAAW,aAAa,aAAa,eAAe,SAAS,cAAc,eAAe,MAAM;AAAA,QAChG,WAAU;AAAA,QAEV;AAAA,sDAAC;AAAA,YAAK,QAAQ;AAAA,YAAI,OAAO;AAAA,YAAG,MAAK;AAAA,WAAc;AAAA,UAC9C,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,4CAAC;AAAA,YAAW;AAAA,aAA+B,WAAa,CACzD;AAAA;AAAA,OACH;AAAA,KACF;AAAA,IAGF,CAAC,YAAY,aAAa,eAAe,MAAM,eAAe,KAAK,QAAQ,iBAAiB,UAAU;AAAA,EACxG;AACF;",
+  "sourcesContent": ["import React, { useContext, useMemo, useLayoutEffect, useRef, useState } from 'react';\nimport { select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const BottomLegend = () => {\n  const { colorScale, axisBottomHeight, innerWidth, innerHeight, bottomLabelHeight, internalMargin, setBottomLegend } =\n    useContext(ChartContext);\n\n  const ref = useRef<SVGGElement>(null);\n  const firstRender = useRef(true);\n\n  const [xTransform, setXTransform] = useState(innerWidth / 2);\n  useLayoutEffect(() => {\n    if (ref.current) {\n      const cells = select(ref.current).selectAll('.cell');\n      const padding = 30;\n      let offset = 0;\n      let verticalOffset = 0;\n\n      cells.each((d, i) => {\n        if (cells._groups[0][i - 1]) {\n          const lastCell = select(cells._groups[0][i - 1]);\n          const d3sel = select(cells._groups[0][i]);\n\n          const { width } = lastCell.node().getBBox();\n          if (offset + width + padding > innerWidth - innerWidth / 3) {\n            offset = 0;\n            verticalOffset += 20;\n          } else {\n            offset += width + padding;\n          }\n\n          d3sel.attr('transform', `translate(${offset}, ${verticalOffset})`);\n        }\n      });\n      const bounds = ref.current.getBoundingClientRect();\n      setXTransform((prev) => prev - bounds.width / 2);\n      firstRender.current = false;\n    }\n  }, [innerWidth]);\n\n  const margin = useMemo(() => {\n    let counter = 0;\n    if (bottomLabelHeight > 0) {\n      counter += bottomLabelHeight;\n    }\n    if (axisBottomHeight > 0) {\n      counter += axisBottomHeight;\n    }\n    return counter;\n  }, [axisBottomHeight, bottomLabelHeight]);\n\n  return useMemo(\n    () => (\n      <g ref={setBottomLegend}>\n        <g\n          ref={ref}\n          transform={`translate(${xTransform + internalMargin.left}, ${innerHeight + internalMargin.top + margin})`}\n          className=\"bottom-legend\"\n        >\n          {colorScale.domain().map((domainValue, i) => (\n            <LegendItem domainValue={domainValue} key={domainValue} />\n          ))}\n        </g>\n      </g>\n    ),\n\n    [colorScale, innerHeight, internalMargin.left, internalMargin.top, margin, setBottomLegend, xTransform],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8DX;AA9DZ,mBAA8E;AAC9E,gBAAuB;AACvB,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,eAAe,MAAM;AAChC,QAAM,EAAE,YAAY,kBAAkB,YAAY,aAAa,mBAAmB,gBAAgB,gBAAgB,QAChH,yBAAW,gCAAY;AAEzB,QAAM,UAAM,qBAAoB,IAAI;AACpC,QAAM,kBAAc,qBAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,aAAa,CAAC;AAC3D,oCAAgB,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,YAAM,YAAQ,kBAAO,IAAI,OAAO,EAAE,UAAU,OAAO;AACnD,YAAM,UAAU;AAChB,UAAI,SAAS;AACb,UAAI,iBAAiB;AAErB,YAAM,KAAK,CAAC,GAAG,MAAM;AACnB,YAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,gBAAM,eAAW,kBAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,gBAAM,YAAQ,kBAAO,MAAM,QAAQ,GAAG,EAAE;AAExC,gBAAM,EAAE,MAAM,IAAI,SAAS,KAAK,EAAE,QAAQ;AAC1C,cAAI,SAAS,QAAQ,UAAU,aAAa,aAAa,GAAG;AAC1D,qBAAS;AACT,8BAAkB;AAAA,UACpB,OAAO;AACL,sBAAU,QAAQ;AAAA,UACpB;AAEA,gBAAM,KAAK,aAAa,aAAa,WAAW,iBAAiB;AAAA,QACnE;AAAA,MACF,CAAC;AACD,YAAM,SAAS,IAAI,QAAQ,sBAAsB;AACjD,oBAAc,CAAC,SAAS,OAAO,OAAO,QAAQ,CAAC;AAC/C,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,aAAS,sBAAQ,MAAM;AAC3B,QAAI,UAAU;AACd,QAAI,oBAAoB,GAAG;AACzB,iBAAW;AAAA,IACb;AACA,QAAI,mBAAmB,GAAG;AACxB,iBAAW;AAAA,IACb;AACA,WAAO;AAAA,EACT,GAAG,CAAC,kBAAkB,iBAAiB,CAAC;AAExC,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,KAAK;AAAA,MACN,sDAAC;AAAA,QACC;AAAA,QACA,WAAW,aAAa,aAAa,eAAe,SAAS,cAAc,eAAe,MAAM;AAAA,QAChG,WAAU;AAAA,QAET,qBAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,4CAAC;AAAA,UAAW;AAAA,WAA+B,WAAa,CACzD;AAAA,OACH;AAAA,KACF;AAAA,IAGF,CAAC,YAAY,aAAa,eAAe,MAAM,eAAe,KAAK,QAAQ,iBAAiB,UAAU;AAAA,EACxG;AACF;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Legend/LeftLegend.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useContext, useState, useLayoutEffect } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const LeftLegend = () => {\n  const { colorScale, innerHeight, internalMargin, leftLegend, setLeftLegend } = useContext(ChartContext);\n\n  const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);\n\n  useLayoutEffect(() => {\n    if (leftLegend) {\n      const bounds = leftLegend.getBoundingClientRect();\n      setYTransform((prev) => prev - bounds.height / 2);\n    }\n  }, [leftLegend]);\n\n  return (\n    <g transform={`translate(8,${yTransform})`} ref={setLeftLegend}>\n      {colorScale.domain().map((domainValue, i) => (\n        <g key={domainValue} className=\"tick\" transform={`translate(0,${i * 30})`}>\n          <LegendItem domainValue={domainValue} />\n        </g>\n      ))}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA6D;AAC7D,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,YAAY,aAAa,gBAAgB,YAAY,cAAc,QAAI,yBAAW,gCAAY;AAEtG,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,cAAc,IAAI,eAAe,GAAG;AAEjF,oCAAgB,MAAM;AACpB,QAAI,YAAY;AACd,YAAM,SAAS,WAAW,sBAAsB;AAChD,oBAAc,CAAC,SAAS,OAAO,OAAO,SAAS,CAAC;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SACE,4CAAC;AAAA,IAAE,WAAW,eAAe;AAAA,IAAe,KAAK;AAAA,IAC9C,qBAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,4CAAC;AAAA,MAAoB,WAAU;AAAA,MAAO,WAAW,eAAe,IAAI;AAAA,MAClE,sDAAC;AAAA,QAAW;AAAA,OAA0B;AAAA,OADhC,WAER,CACD;AAAA,GACH;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBb;AApBV,mBAA6D;AAC7D,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,YAAY,aAAa,gBAAgB,YAAY,cAAc,QAAI,yBAAW,gCAAY;AAEtG,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,cAAc,IAAI,eAAe,GAAG;AAEjF,oCAAgB,MAAM;AACpB,QAAI,YAAY;AACd,YAAM,SAAS,WAAW,sBAAsB;AAChD,oBAAc,CAAC,SAAS,OAAO,OAAO,SAAS,CAAC;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SACE,4CAAC;AAAA,IAAE,WAAW,eAAe;AAAA,IAAe,KAAK;AAAA,IAC9C,qBAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,4CAAC;AAAA,MAAoB,WAAU;AAAA,MAAO,WAAW,eAAe,IAAI;AAAA,MAClE,sDAAC;AAAA,QAAW;AAAA,OAA0B;AAAA,OADhC,WAER,CACD;AAAA,GACH;AAEJ;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Legend/Legend.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useContext } from 'react';\nimport { RightLegend } from './RightLegend';\nimport { TopLegend } from './TopLegend';\nimport { ChartContext } from '../../ChartContext';\nimport { BottomLegend } from './BottomLegend';\nimport { LeftLegend } from './LeftLegend';\nexport const Legend = () => {\n  const {\n    props: { legend },\n    width,\n  } = useContext(ChartContext);\n  if (legend?.position === 'top' || (legend?.position === 'left' && width <= 400)) return <TopLegend />;\n  if (legend?.position === 'bottom' || (legend?.position === 'right' && width <= 400)) return <BottomLegend />;\n  if (legend?.position === 'right') return <RightLegend />;\n  if (legend?.position === 'left') return <LeftLegend />;\n  return null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAClC,yBAA4B;AAC5B,uBAA0B;AAC1B,0BAA6B;AAC7B,0BAA6B;AAC7B,wBAA2B;AACpB,MAAM,SAAS,MAAM;AAC1B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,MAAI,QAAQ,aAAa,SAAU,QAAQ,aAAa,UAAU,SAAS;AAAM,WAAO,4CAAC,8BAAU;AACnG,MAAI,QAAQ,aAAa,YAAa,QAAQ,aAAa,WAAW,SAAS;AAAM,WAAO,4CAAC,oCAAa;AAC1G,MAAI,QAAQ,aAAa;AAAS,WAAO,4CAAC,kCAAY;AACtD,MAAI,QAAQ,aAAa;AAAQ,WAAO,4CAAC,gCAAW;AACpD,SAAO;AACT;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWmE;AAX1F,mBAAkC;AAClC,yBAA4B;AAC5B,uBAA0B;AAC1B,0BAA6B;AAC7B,0BAA6B;AAC7B,wBAA2B;AACpB,MAAM,SAAS,MAAM;AAC1B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,MAAI,QAAQ,aAAa,SAAU,QAAQ,aAAa,UAAU,SAAS;AAAM,WAAO,4CAAC,8BAAU;AACnG,MAAI,QAAQ,aAAa,YAAa,QAAQ,aAAa,WAAW,SAAS;AAAM,WAAO,4CAAC,oCAAa;AAC1G,MAAI,QAAQ,aAAa;AAAS,WAAO,4CAAC,kCAAY;AACtD,MAAI,QAAQ,aAAa;AAAQ,WAAO,4CAAC,gCAAW;AACpD,SAAO;AACT;",
   "names": []
 }