npm - @elliemae/ds-dataviz - Versions diffs - 3.10.3 → 3.11.0-next.2 - Mend

@elliemae/ds-dataviz 3.10.3 → 3.11.0-next.2

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

package/dist/esm/graphs/Chart/config/useGetters.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useCallback, useMemo } from "react";
-const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale }) => {
+const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }) => {
   const getXValue = useCallback(
     (datum) => {
       if (!isHorizontal) {
@@ -46,12 +46,13 @@ const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale }) => {
   );
   const getYScaleValue = useCallback(
     (datum) => {
+      const finalYScale = datum?.scale === "y2" ? y2Scale : yScale;
       if (yAxis.type === "band") {
-        return yScale(getYValue(datum));
+        return finalYScale(getYValue(datum));
       }
-      return yScale(getYValue(datum));
+      return finalYScale(getYValue(datum));
     },
-    [getYValue, yAxis.type, yScale]
+    [getYValue, y2Scale, yAxis.type, yScale]
   );
   return useMemo(
     () => ({ getYValue, getXValue, getXScaleValue, getYScaleValue }),

package/dist/esm/graphs/Chart/config/useGetters.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useGetters.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useMemo } from 'react';\nimport { ScaleBand, ScaleLinear } from 'd3';\nimport { DSChartT } from '../react-desc-prop-types';\n\ninterface UseGettersT {\n  xAxis: DSChartT.AxisT;\n  yAxis: DSChartT.AxisT;\n  isHorizontal: boolean;\n  xScale: DSChartT.Scales;\n  yScale: DSChartT.Scales;\n}\nexport const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale }: UseGettersT) => {\n  const getXValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!isHorizontal) {\n        if (xAxis?.cols?.[datum.position]) {\n          return xAxis?.cols?.[datum.position];\n        }\n        if (typeof datum.value === 'object') return datum.value?.x;\n        return datum.position.toString();\n      }\n      if (typeof datum.value === 'number') {\n        return datum.value;\n      }\n      return datum.value?.x;\n    },\n    [isHorizontal, xAxis?.cols],\n  );\n\n  const getYValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!isHorizontal) {\n        if (typeof datum.value === 'number') {\n          return datum.value;\n        }\n        return datum.value?.y;\n      }\n      if (yAxis?.cols?.[datum.position]) {\n        return yAxis?.cols?.[datum.position];\n      }\n      if (typeof datum.value === 'object') return datum.value?.y;\n      return datum.position.toString();\n    },\n    [isHorizontal, yAxis?.cols],\n  );\n\n  const getXScaleValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (xAxis.type === 'linear') {\n        return (xScale as ScaleLinear<number, number, never>)(getXValue(datum) as number);\n      }\n      return (xScale as ScaleBand<string>)(getXValue(datum) as string);\n    },\n    [getXValue, xAxis.type, xScale],\n  );\n\n  const getYScaleValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (yAxis.type === 'band') {\n        return (yScale as ScaleBand<string>)(getYValue(datum) as string);\n      }\n      return (yScale as ScaleLinear<number, number, never>)(getYValue(datum) as number);\n    },\n    [getYValue, yAxis.type, yScale],\n  );\n\n  return useMemo(\n    () => ({ getYValue, getXValue, getXScaleValue, getYScaleValue }),\n    [getYValue, getXValue, getXScaleValue, getYScaleValue],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,eAAe;AAW9B,MAAM,aAAa,CAAC,EAAE,OAAO,cAAc,OAAO,QAAQ,OAAO,MAAmB;AACzF,QAAM,YAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,OAAO,MAAM,WAAW;AACjC,iBAAO,OAAO,OAAO,MAAM;AAAA,QAC7B;AACA,YAAI,OAAO,MAAM,UAAU;AAAU,iBAAO,MAAM,OAAO;AACzD,eAAO,MAAM,SAAS,SAAS;AAAA,MACjC;AACA,UAAI,OAAO,MAAM,UAAU,UAAU;AACnC,eAAO,MAAM;AAAA,MACf;AACA,aAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,YAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,MAAM,UAAU,UAAU;AACnC,iBAAO,MAAM;AAAA,QACf;AACA,eAAO,MAAM,OAAO;AAAA,MACtB;AACA,UAAI,OAAO,OAAO,MAAM,WAAW;AACjC,eAAO,OAAO,OAAO,MAAM;AAAA,MAC7B;AACA,UAAI,OAAO,MAAM,UAAU;AAAU,eAAO,MAAM,OAAO;AACzD,aAAO,MAAM,SAAS,SAAS;AAAA,IACjC;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,MAAM,SAAS,UAAU;AAC3B,eAAQ,OAA8C,UAAU,KAAK,CAAW;AAAA,MAClF;AACA,aAAQ,OAA6B,UAAU,KAAK,CAAW;AAAA,IACjE;AAAA,IACA,CAAC,WAAW,MAAM,MAAM,MAAM;AAAA,EAChC;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAQ,OAA6B,UAAU,KAAK,CAAW;AAAA,MACjE;AACA,aAAQ,OAA8C,UAAU,KAAK,CAAW;AAAA,IAClF;AAAA,IACA,CAAC,WAAW,MAAM,MAAM,MAAM;AAAA,EAChC;AAEA,SAAO;AAAA,IACL,OAAO,EAAE,WAAW,WAAW,gBAAgB,eAAe;AAAA,IAC9D,CAAC,WAAW,WAAW,gBAAgB,cAAc;AAAA,EACvD;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useMemo } from 'react';\nimport { ScaleBand, ScaleLinear } from 'd3';\nimport { DSChartT } from '../react-desc-prop-types';\n\ninterface UseGettersT {\n  xAxis: DSChartT.AxisT;\n  yAxis: DSChartT.AxisT;\n  isHorizontal: boolean;\n  xScale: DSChartT.Scales;\n  yScale: DSChartT.Scales;\n  y2Scale: DSChartT.Scales;\n}\nexport const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }: UseGettersT) => {\n  const getXValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!isHorizontal) {\n        if (xAxis?.cols?.[datum.position]) {\n          return xAxis?.cols?.[datum.position];\n        }\n        if (typeof datum.value === 'object') return datum.value?.x;\n        return datum.position.toString();\n      }\n      if (typeof datum.value === 'number') {\n        return datum.value;\n      }\n      return datum.value?.x;\n    },\n    [isHorizontal, xAxis?.cols],\n  );\n\n  const getYValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!isHorizontal) {\n        if (typeof datum.value === 'number') {\n          return datum.value;\n        }\n        return datum.value?.y;\n      }\n      if (yAxis?.cols?.[datum.position]) {\n        return yAxis?.cols?.[datum.position];\n      }\n      if (typeof datum.value === 'object') return datum.value?.y;\n      return datum.position.toString();\n    },\n    [isHorizontal, yAxis?.cols],\n  );\n\n  const getXScaleValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (xAxis.type === 'linear') {\n        return (xScale as ScaleLinear<number, number, never>)(getXValue(datum) as number);\n      }\n      return (xScale as ScaleBand<string>)(getXValue(datum) as string);\n    },\n    [getXValue, xAxis.type, xScale],\n  );\n\n  const getYScaleValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      const finalYScale = datum?.scale === 'y2' ? y2Scale : yScale;\n      if (yAxis.type === 'band') {\n        return (finalYScale as ScaleBand<string>)(getYValue(datum) as string);\n      }\n      return (finalYScale as ScaleLinear<number, number, never>)(getYValue(datum) as number);\n    },\n    [getYValue, y2Scale, yAxis.type, yScale],\n  );\n\n  return useMemo(\n    () => ({ getYValue, getXValue, getXScaleValue, getYScaleValue }),\n    [getYValue, getXValue, getXScaleValue, getYScaleValue],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,eAAe;AAY9B,MAAM,aAAa,CAAC,EAAE,OAAO,cAAc,OAAO,QAAQ,QAAQ,QAAQ,MAAmB;AAClG,QAAM,YAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,OAAO,MAAM,WAAW;AACjC,iBAAO,OAAO,OAAO,MAAM;AAAA,QAC7B;AACA,YAAI,OAAO,MAAM,UAAU;AAAU,iBAAO,MAAM,OAAO;AACzD,eAAO,MAAM,SAAS,SAAS;AAAA,MACjC;AACA,UAAI,OAAO,MAAM,UAAU,UAAU;AACnC,eAAO,MAAM;AAAA,MACf;AACA,aAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,YAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,MAAM,UAAU,UAAU;AACnC,iBAAO,MAAM;AAAA,QACf;AACA,eAAO,MAAM,OAAO;AAAA,MACtB;AACA,UAAI,OAAO,OAAO,MAAM,WAAW;AACjC,eAAO,OAAO,OAAO,MAAM;AAAA,MAC7B;AACA,UAAI,OAAO,MAAM,UAAU;AAAU,eAAO,MAAM,OAAO;AACzD,aAAO,MAAM,SAAS,SAAS;AAAA,IACjC;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,MAAM,SAAS,UAAU;AAC3B,eAAQ,OAA8C,UAAU,KAAK,CAAW;AAAA,MAClF;AACA,aAAQ,OAA6B,UAAU,KAAK,CAAW;AAAA,IACjE;AAAA,IACA,CAAC,WAAW,MAAM,MAAM,MAAM;AAAA,EAChC;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,YAAM,cAAc,OAAO,UAAU,OAAO,UAAU;AACtD,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAQ,YAAkC,UAAU,KAAK,CAAW;AAAA,MACtE;AACA,aAAQ,YAAmD,UAAU,KAAK,CAAW;AAAA,IACvF;AAAA,IACA,CAAC,WAAW,SAAS,MAAM,MAAM,MAAM;AAAA,EACzC;AAEA,SAAO;AAAA,IACL,OAAO,EAAE,WAAW,WAAW,gBAAgB,eAAe;AAAA,IAC9D,CAAC,WAAW,WAAW,gBAAgB,cAAc;AAAA,EACvD;AACF;",
   "names": []
 }

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

@@ -10,7 +10,8 @@ const useInternalMargins = ({
   topLegend,
   bottomLegend,
   rightLabel,
-  bottomLabel
+  bottomLabel,
+  toolbarRef
 }) => {
   const axisLeftWidth = useMemo(() => axisLeftRef?.getBoundingClientRect()?.width || 0, [axisLeftRef]);
   const axisBottomHeight = useMemo(() => axisBottomRef?.getBoundingClientRect()?.height || 0, [axisBottomRef]);
@@ -22,10 +23,11 @@ const useInternalMargins = ({
   const bottomLegendHeight = useMemo(() => bottomLegend?.getBoundingClientRect()?.height || 0, [bottomLegend]);
   const rightLegendWidth = useMemo(() => rightLegend?.getBoundingClientRect()?.width || 0, [rightLegend]);
   const leftLegendWidth = useMemo(() => leftLegend?.getBoundingClientRect()?.width || 0, [leftLegend]);
+  const toolbarHeight = useMemo(() => toolbarRef?.getBoundingClientRect()?.height || 0, [toolbarRef]);
   const internalMargin = useMemo(
     () => ({
       bottom: 10 + axisBottomHeight + bottomLegendHeight + bottomLabelHeight,
-      top: 10 + topLegendHeight,
+      top: 10 + topLegendHeight + toolbarHeight,
       right: 15 + rightLabelWidth + axisRightWidth + rightLegendWidth,
       left: 10 + axisLeftWidth + leftLabelWidth + leftLegendWidth
     }),
@@ -34,6 +36,7 @@ const useInternalMargins = ({
       bottomLegendHeight,
       bottomLabelHeight,
       topLegendHeight,
+      toolbarHeight,
       rightLabelWidth,
       axisRightWidth,
       rightLegendWidth,
@@ -54,10 +57,12 @@ const useInternalMargins = ({
       axisRightWidth,
       rightLegendWidth,
       axisLeftWidth,
-      leftLabelWidth
+      leftLabelWidth,
+      toolbarHeight
     }),
     [
       axisBottomHeight,
+      toolbarHeight,
       axisLeftWidth,
       axisRightWidth,
       bottomLabelHeight,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useInternalMargins.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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}\nexport const useInternalMargins = ({\n  axisLeftRef,\n  axisBottomRef,\n  axisRightRef,\n  leftLabel,\n  leftLegend,\n  rightLegend,\n  topLegend,\n  bottomLegend,\n  rightLabel,\n  bottomLabel,\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 internalMargin = useMemo(\n    () => ({\n      bottom: 10 + axisBottomHeight + bottomLegendHeight + bottomLabelHeight,\n      top: 10 + topLegendHeight,\n      right: 15 + rightLabelWidth + axisRightWidth + rightLegendWidth,\n      left: 10 + axisLeftWidth + leftLabelWidth + leftLegendWidth,\n    }),\n\n    [\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\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    }),\n    [\n      axisBottomHeight,\n      axisLeftWidth,\n      axisRightWidth,\n      bottomLabelHeight,\n      bottomLegendHeight,\n      internalMargin,\n      leftLabelWidth,\n      leftLegendWidth,\n      rightLabelWidth,\n      rightLegendWidth,\n      topLegendHeight,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,eAAe;AAcjB,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AAEzB,QAAM,gBAAgB,QAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACnG,QAAM,mBAAmB,QAAQ,MAAM,eAAe,sBAAsB,GAAG,UAAU,GAAG,CAAC,aAAa,CAAC;AAC3G,QAAM,iBAAiB,QAAQ,MAAM,cAAc,sBAAsB,GAAG,SAAS,GAAG,CAAC,YAAY,CAAC;AAGtG,QAAM,oBAAoB,QAAQ,MAAM,aAAa,sBAAsB,GAAG,UAAU,GAAG,CAAC,WAAW,CAAC;AACxG,QAAM,kBAAkB,QAAQ,MAAM,YAAY,sBAAsB,GAAG,SAAS,GAAG,CAAC,UAAU,CAAC;AACnG,QAAM,iBAAiB,QAAQ,MAAM,WAAW,sBAAsB,GAAG,SAAS,GAAG,CAAC,SAAS,CAAC;AAGhG,QAAM,kBAAkB,QAAQ,MAAM,WAAW,sBAAsB,GAAG,UAAU,GAAG,CAAC,SAAS,CAAC;AAClG,QAAM,qBAAqB,QAAQ,MAAM,cAAc,sBAAsB,GAAG,UAAU,GAAG,CAAC,YAAY,CAAC;AAC3G,QAAM,mBAAmB,QAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACtG,QAAM,kBAAkB,QAAQ,MAAM,YAAY,sBAAsB,GAAG,SAAS,GAAG,CAAC,UAAU,CAAC;AAEnG,QAAM,iBAAiB;AAAA,IACrB,OAAO;AAAA,MACL,QAAQ,KAAK,mBAAmB,qBAAqB;AAAA,MACrD,KAAK,KAAK;AAAA,MACV,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,IACF;AAAA,EACF;AAEA,SAAO;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,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,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,eAAe;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,gBAAgB,QAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACnG,QAAM,mBAAmB,QAAQ,MAAM,eAAe,sBAAsB,GAAG,UAAU,GAAG,CAAC,aAAa,CAAC;AAC3G,QAAM,iBAAiB,QAAQ,MAAM,cAAc,sBAAsB,GAAG,SAAS,GAAG,CAAC,YAAY,CAAC;AAGtG,QAAM,oBAAoB,QAAQ,MAAM,aAAa,sBAAsB,GAAG,UAAU,GAAG,CAAC,WAAW,CAAC;AACxG,QAAM,kBAAkB,QAAQ,MAAM,YAAY,sBAAsB,GAAG,SAAS,GAAG,CAAC,UAAU,CAAC;AACnG,QAAM,iBAAiB,QAAQ,MAAM,WAAW,sBAAsB,GAAG,SAAS,GAAG,CAAC,SAAS,CAAC;AAGhG,QAAM,kBAAkB,QAAQ,MAAM,WAAW,sBAAsB,GAAG,UAAU,GAAG,CAAC,SAAS,CAAC;AAClG,QAAM,qBAAqB,QAAQ,MAAM,cAAc,sBAAsB,GAAG,UAAU,GAAG,CAAC,YAAY,CAAC;AAC3G,QAAM,mBAAmB,QAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACtG,QAAM,kBAAkB,QAAQ,MAAM,YAAY,sBAAsB,GAAG,SAAS,GAAG,CAAC,UAAU,CAAC;AAEnG,QAAM,gBAAgB,QAAQ,MAAM,YAAY,sBAAsB,GAAG,UAAU,GAAG,CAAC,UAAU,CAAC;AAElG,QAAM,iBAAiB;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,SAAO;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/esm/graphs/Chart/config/useKeyboardNavigation.js CHANGED Viewed

@@ -39,7 +39,7 @@ const useKeyboardNavigation = () => {
   );
   const handleOnFocus = useCallback(
     (e) => {
-      if (containerRef?.current === e.target) {
+      if (containerRef === e.target) {
         setActivePoint(currentSerie?.data[0]);
         setXScrollbarPosition(0);
       }
@@ -48,7 +48,7 @@ const useKeyboardNavigation = () => {
   );
   const handleOnBlur = useCallback(() => {
     setTimeout(() => {
-      if (!containerRef?.current?.contains(document.activeElement) || containerRef?.current === document.activeElement) {
+      if (!containerRef.contains(document.activeElement) || containerRef === document.activeElement) {
         setActivePoint(null);
       }
     });

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

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

package/dist/esm/graphs/Chart/config/useScales.js CHANGED Viewed

@@ -4,8 +4,7 @@ import { max, min, scaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog } fr
 import { getStackedIndex } from "../helpers";
 import { COLOR_PALLET } from "../helpers/colorPallet";
 const useScales = ({ props, innerHeight, innerWidth, stackedData, currentData, containerRatio }) => {
-  const { series, xAxis, yAxis, y2Axis, groups: stackedSeries } = props;
-  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;
+  const { series, xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll } = props;
   const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
   const rangeToWidth = innerWidth * (xScroll ? containerRatio : 1);
   const rangeToHeight = innerHeight * (yScroll ? containerRatio : 1);

package/dist/esm/graphs/Chart/config/useScales.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useScales.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useCallback } from 'react';\nimport { max, min, scaleLinear, ScaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog, Series, ScaleBand } from 'd3';\nimport { DSChartT } from '../react-desc-prop-types';\nimport { getStackedIndex } from '../helpers';\nimport { COLOR_PALLET } from '../helpers/colorPallet';\ninterface UseScales {\n  props: DSChartT.Props;\n  innerHeight: number;\n  innerWidth: number;\n  stackedData: Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n  currentData: DSChartT.InternalData;\n  groups: string[];\n  containerRatio: number;\n}\nexport const useScales = ({ props, innerHeight, innerWidth, stackedData, currentData, containerRatio }: UseScales) => {\n  const { series, xAxis, yAxis, y2Axis, groups: stackedSeries } = props;\n\n  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n  const rangeToWidth = innerWidth * (xScroll ? containerRatio : 1);\n  const rangeToHeight = innerHeight * (yScroll ? containerRatio : 1);\n\n  const getBandDomain = useCallback(\n    (axis: DSChartT.AxisT) => axis.cols ?? [...series[0].data.map((_, i) => i.toString())],\n    [series],\n  );\n\n  const getLinearDomain = useCallback(\n    (axis: DSChartT.AxisT, axisString: 'x' | 'y' | 'y2') => {\n      // we are calculating the min and max between all the data\n      // including the stacked groups if exists\n\n      const begin = axis?.beginAtZero ? 0 : undefined;\n      const data = currentData\n        .filter((serie) => {\n          if (serie.scale === axisString) {\n            return true;\n          }\n          if (!serie.scale && ['y', 'x'].includes(axisString)) {\n            return true;\n          }\n          return false;\n        })\n        .map((serie) =>\n          serie.data\n            .filter((datum) => datum.value !== null)\n            .map((datum) => {\n              if (typeof datum.value === 'number') {\n                return datum.value;\n              }\n\n              return datum.value[axisString === 'y2' ? 'y' : axisString];\n            }),\n        );\n      const dataFlattened = data.flat();\n      const stackedDataFlatten = stackedData.flat();\n      const minStackedData = min(stackedDataFlatten, (layer) => min(layer, (sequence) => sequence[0]));\n      const maxStackedData = max(stackedDataFlatten, (layer) => max(layer, (sequence) => sequence[1]));\n      const minData = min(dataFlattened);\n      const maxData = max(dataFlattened);\n      const types = ['number', 'object'];\n\n      const getMin = () => {\n        const aux = [];\n        if (typeof begin === 'number') aux.push(begin);\n        if (types.includes(typeof minData)) aux.push(minData);\n        if (typeof minStackedData === 'number') aux.push(minStackedData);\n        return min(aux);\n      };\n      const getMax = () => {\n        const aux = [];\n        if (typeof begin === 'number') aux.push(begin);\n        if (types.includes(typeof maxData)) aux.push(maxData);\n        if (typeof maxStackedData === 'number') aux.push(maxStackedData);\n        return max(aux);\n      };\n      const minRange = getMin();\n      const maxRange = getMax();\n\n      if (types.includes(typeof minRange) && types.includes(typeof maxRange)) {\n        if (typeof minRange === 'number' && typeof maxRange === 'number') {\n          // @TODO fix this domain padding\n          const [leftPadding, rightPadding] =\n            typeof axis.domainPadding === 'number'\n              ? [axis.domainPadding, axis.domainPadding]\n              : axis.domainPadding ?? [0, 0];\n\n          return [\n            minRange - (maxRange - minRange) * (leftPadding ?? 0),\n            maxRange + (maxRange - minRange) * (rightPadding ?? 0),\n          ];\n        }\n        // timelinear case\n        if (typeof minRange === 'object' && typeof maxRange === 'object') return [minRange, maxRange];\n      }\n      return [];\n    },\n    [currentData, stackedData],\n  );\n\n  const getScaleTime = (domain: Date[], range: number[]) => scaleUtc().domain(domain).range(range);\n\n  const getScaleBand = (domain: string[], range: number[], padding = 0.2) =>\n    scaleBand().domain(domain).range(range).padding(padding).paddingOuter(0.05);\n  const getScaleLinear = (domain: number[], range: number[]) => scaleLinear().domain(domain).range(range);\n  const getScaleLog = (domain: number[], range: number[]) => scaleLog().domain(domain).range(range);\n\n  const xScale = useMemo(() => {\n    if (xAxis?.type === 'time') return getScaleTime(getLinearDomain(xAxis, 'x'), [0, rangeToWidth]);\n    if (xAxis?.type === 'linear' || yAxis?.type === 'band') {\n      return getScaleLinear(getLinearDomain(xAxis, 'x'), [0, rangeToWidth]);\n    }\n\n    return getScaleBand(getBandDomain(xAxis), [0, rangeToWidth]);\n  }, [getBandDomain, getLinearDomain, rangeToWidth, xAxis, yAxis?.type]);\n\n  const yScale = useMemo(() => {\n    if (yAxis?.type === 'band') return getScaleBand(getBandDomain(yAxis), [0, rangeToHeight]);\n    if (yAxis?.type === 'log') return getScaleLog(getLinearDomain(yAxis, 'y'), [rangeToHeight, 0]);\n    return getScaleLinear(getLinearDomain(yAxis, 'y'), [rangeToHeight, 0]);\n  }, [getBandDomain, getLinearDomain, rangeToHeight, yAxis]);\n\n  const y2Scale = useMemo(() => {\n    if (!y2Axis) return null;\n    if (y2Axis?.type === 'band') return getScaleBand(getBandDomain(y2Axis), [0, innerHeight]);\n    if (y2Axis?.type === 'log') return getScaleLog(getLinearDomain(y2Axis, 'y2'), [innerHeight, 0]);\n    return getScaleLinear(getLinearDomain(y2Axis, 'y2'), [innerHeight, 0]);\n  }, [getBandDomain, getLinearDomain, innerHeight, y2Axis]);\n\n  const colorScale = useMemo(\n    () =>\n      scaleOrdinal()\n        .domain(series.map((d) => d.name))\n        .range(series.map((d) => COLOR_PALLET[d.color as keyof typeof COLOR_PALLET] ?? d.color))\n        .unknown('red'),\n    [series],\n  );\n  // get only groups bars to calculate the subgroup scale\n\n  const subgroupsWithBars = useMemo(\n    () =>\n      currentData\n        .filter(\n          (serie) =>\n            serie.type === 'bar' && !(stackedSeries?.length && getStackedIndex(stackedSeries, serie.name) > -1),\n        )\n        .map((serie) => serie.name),\n    [currentData, stackedSeries],\n  );\n\n  const getBandwidth = useCallback(() => {\n    if ((xAxis.type === undefined || xAxis.type === 'band') && yAxis.type !== 'band') {\n      return (xScale as ScaleBand<string>).bandwidth();\n    }\n    if (yAxis.type === 'band') {\n      return (yScale as ScaleBand<string>).bandwidth();\n    }\n    // @todo explore this. is to create bars with a linear\n    return innerWidth / (xScale as ScaleLinear<number, number, never>).ticks().length / 2;\n  }, [innerWidth, xAxis.type, xScale, yAxis.type, yScale]);\n\n  if (stackedSeries?.length) {\n    stackedSeries.forEach((_, i) => subgroupsWithBars.push(`stacked-data-${i}`));\n  }\n\n  const subGroupScale = useMemo(\n    () =>\n      getBandwidth()\n        ? scaleBand()\n            .domain(subgroupsWithBars)\n            .range([0, getBandwidth() ?? 0])\n            .paddingInner(0.55)\n            .padding(0.2)\n            .paddingOuter(0.01)\n        : null,\n    [getBandwidth, subgroupsWithBars],\n  );\n\n  return { xScale, y2Scale, yScale, subGroupScale, colorScale, getBandwidth };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useCallback } from 'react';\nimport { max, min, scaleLinear, ScaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog, Series, ScaleBand } from 'd3';\nimport { DSChartT } from '../react-desc-prop-types';\nimport { getStackedIndex } from '../helpers';\nimport { COLOR_PALLET } from '../helpers/colorPallet';\ninterface UseScales {\n  props: DSChartT.Props;\n  innerHeight: number;\n  innerWidth: number;\n  stackedData: Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n  currentData: DSChartT.InternalData;\n  groups: string[];\n  containerRatio: number;\n}\nexport const useScales = ({ props, innerHeight, innerWidth, stackedData, currentData, containerRatio }: UseScales) => {\n  const { series, xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll } = props;\n\n  // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n  const rangeToWidth = innerWidth * (xScroll ? containerRatio : 1);\n  const rangeToHeight = innerHeight * (yScroll ? containerRatio : 1);\n\n  const getBandDomain = useCallback(\n    (axis: DSChartT.AxisT) => axis.cols ?? [...series[0].data.map((_, i) => i.toString())],\n    [series],\n  );\n\n  const getLinearDomain = useCallback(\n    (axis: DSChartT.AxisT, axisString: 'x' | 'y' | 'y2') => {\n      // we are calculating the min and max between all the data\n      // including the stacked groups if exists\n\n      const begin = axis?.beginAtZero ? 0 : undefined;\n      const data = currentData\n        .filter((serie) => {\n          if (serie.scale === axisString) {\n            return true;\n          }\n          if (!serie.scale && ['y', 'x'].includes(axisString)) {\n            return true;\n          }\n          return false;\n        })\n        .map((serie) =>\n          serie.data\n            .filter((datum) => datum.value !== null)\n            .map((datum) => {\n              if (typeof datum.value === 'number') {\n                return datum.value;\n              }\n\n              return datum.value[axisString === 'y2' ? 'y' : axisString];\n            }),\n        );\n      const dataFlattened = data.flat();\n      const stackedDataFlatten = stackedData.flat();\n      const minStackedData = min(stackedDataFlatten, (layer) => min(layer, (sequence) => sequence[0]));\n      const maxStackedData = max(stackedDataFlatten, (layer) => max(layer, (sequence) => sequence[1]));\n      const minData = min(dataFlattened);\n      const maxData = max(dataFlattened);\n      const types = ['number', 'object'];\n\n      const getMin = () => {\n        const aux = [];\n        if (typeof begin === 'number') aux.push(begin);\n        if (types.includes(typeof minData)) aux.push(minData);\n        if (typeof minStackedData === 'number') aux.push(minStackedData);\n        return min(aux);\n      };\n      const getMax = () => {\n        const aux = [];\n        if (typeof begin === 'number') aux.push(begin);\n        if (types.includes(typeof maxData)) aux.push(maxData);\n        if (typeof maxStackedData === 'number') aux.push(maxStackedData);\n        return max(aux);\n      };\n      const minRange = getMin();\n      const maxRange = getMax();\n\n      if (types.includes(typeof minRange) && types.includes(typeof maxRange)) {\n        if (typeof minRange === 'number' && typeof maxRange === 'number') {\n          // @TODO fix this domain padding\n          const [leftPadding, rightPadding] =\n            typeof axis.domainPadding === 'number'\n              ? [axis.domainPadding, axis.domainPadding]\n              : axis.domainPadding ?? [0, 0];\n\n          return [\n            minRange - (maxRange - minRange) * (leftPadding ?? 0),\n            maxRange + (maxRange - minRange) * (rightPadding ?? 0),\n          ];\n        }\n        // timelinear case\n        if (typeof minRange === 'object' && typeof maxRange === 'object') return [minRange, maxRange];\n      }\n      return [];\n    },\n    [currentData, stackedData],\n  );\n\n  const getScaleTime = (domain: Date[], range: number[]) => scaleUtc().domain(domain).range(range);\n\n  const getScaleBand = (domain: string[], range: number[], padding = 0.2) =>\n    scaleBand().domain(domain).range(range).padding(padding).paddingOuter(0.05);\n  const getScaleLinear = (domain: number[], range: number[]) => scaleLinear().domain(domain).range(range);\n  const getScaleLog = (domain: number[], range: number[]) => scaleLog().domain(domain).range(range);\n\n  const xScale = useMemo(() => {\n    if (xAxis?.type === 'time') return getScaleTime(getLinearDomain(xAxis, 'x'), [0, rangeToWidth]);\n    if (xAxis?.type === 'linear' || yAxis?.type === 'band') {\n      return getScaleLinear(getLinearDomain(xAxis, 'x'), [0, rangeToWidth]);\n    }\n\n    return getScaleBand(getBandDomain(xAxis), [0, rangeToWidth]);\n  }, [getBandDomain, getLinearDomain, rangeToWidth, xAxis, yAxis?.type]);\n\n  const yScale = useMemo(() => {\n    if (yAxis?.type === 'band') return getScaleBand(getBandDomain(yAxis), [0, rangeToHeight]);\n    if (yAxis?.type === 'log') return getScaleLog(getLinearDomain(yAxis, 'y'), [rangeToHeight, 0]);\n    return getScaleLinear(getLinearDomain(yAxis, 'y'), [rangeToHeight, 0]);\n  }, [getBandDomain, getLinearDomain, rangeToHeight, yAxis]);\n\n  const y2Scale = useMemo(() => {\n    if (!y2Axis) return null;\n    if (y2Axis?.type === 'band') return getScaleBand(getBandDomain(y2Axis), [0, innerHeight]);\n    if (y2Axis?.type === 'log') return getScaleLog(getLinearDomain(y2Axis, 'y2'), [innerHeight, 0]);\n    return getScaleLinear(getLinearDomain(y2Axis, 'y2'), [innerHeight, 0]);\n  }, [getBandDomain, getLinearDomain, innerHeight, y2Axis]);\n\n  const colorScale = useMemo(\n    () =>\n      scaleOrdinal()\n        .domain(series.map((d) => d.name))\n        .range(series.map((d) => COLOR_PALLET[d.color as keyof typeof COLOR_PALLET] ?? d.color))\n        .unknown('red'),\n    [series],\n  );\n  // get only groups bars to calculate the subgroup scale\n\n  const subgroupsWithBars = useMemo(\n    () =>\n      currentData\n        .filter(\n          (serie) =>\n            serie.type === 'bar' && !(stackedSeries?.length && getStackedIndex(stackedSeries, serie.name) > -1),\n        )\n        .map((serie) => serie.name),\n    [currentData, stackedSeries],\n  );\n\n  const getBandwidth = useCallback(() => {\n    if ((xAxis.type === undefined || xAxis.type === 'band') && yAxis.type !== 'band') {\n      return (xScale as ScaleBand<string>).bandwidth();\n    }\n    if (yAxis.type === 'band') {\n      return (yScale as ScaleBand<string>).bandwidth();\n    }\n    // @todo explore this. is to create bars with a linear\n    return innerWidth / (xScale as ScaleLinear<number, number, never>).ticks().length / 2;\n  }, [innerWidth, xAxis.type, xScale, yAxis.type, yScale]);\n\n  if (stackedSeries?.length) {\n    stackedSeries.forEach((_, i) => subgroupsWithBars.push(`stacked-data-${i}`));\n  }\n\n  const subGroupScale = useMemo(\n    () =>\n      getBandwidth()\n        ? scaleBand()\n            .domain(subgroupsWithBars)\n            .range([0, getBandwidth() ?? 0])\n            .paddingInner(0.55)\n            .padding(0.2)\n            .paddingOuter(0.01)\n        : null,\n    [getBandwidth, subgroupsWithBars],\n  );\n\n  return { xScale, y2Scale, yScale, subGroupScale, colorScale, getBandwidth };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/graphs/Chart/helpers/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { stack, timeFormat, format } from "d3";
+import { stack, timeFormat, stackOffsetDiverging, format } from "d3";
 const getStackedIndex = (groups, serie) => {
   for (let i = 0; i < groups.length; i += 1) {
     for (let j = 0; j < groups[i].length; j += 1) {
@@ -33,7 +33,7 @@ const stackData = (groupsStacked, series) => {
         };
       });
     });
-    allSeriesStackedByGroups.push(stack().keys(keys)(stackedData));
+    allSeriesStackedByGroups.push(stack().offset(stackOffsetDiverging).keys(keys)(stackedData));
   });
   return allSeriesStackedByGroups;
 };

package/dist/esm/graphs/Chart/helpers/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/helpers/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { stack, timeFormat, format, Series } from 'd3';\nimport { DSChartT } from '../react-desc-prop-types';\n\nexport const getStackedIndex = (groups: string[][], serie: string) => {\n  for (let i = 0; i < groups.length; i += 1) {\n    for (let j = 0; j < groups[i].length; j += 1) {\n      if (groups[i][j] === serie) return i;\n    }\n  }\n  return -1;\n};\n\nexport const getStackedData = (stackedData, serie: DSChartT.SeriesT) => {\n  for (let i = 0; i < stackedData?.length; i += 1) {\n    const data = stackedData[i].find((d) => d.key === serie.name);\n    if (data) return data;\n  }\n  return false;\n};\n\n// transform series grouped in stack into what d3 stack function need to read\nexport const stackData = (groupsStacked: string[][] | undefined, series: DSChartT.InternalData) => {\n  const allSeriesStackedByGroups: DSChartT.StackedSeriesByGroupT = [];\n  if (!groupsStacked) return [];\n  groupsStacked?.forEach((g) => {\n    const seriesFilteredByStackGroup = series.filter((serie) => g.includes(serie.name));\n    const keys = seriesFilteredByStackGroup.map((serie) => serie.name);\n    const stackedData: Array<{ [serieName: string]: number }> = [];\n    seriesFilteredByStackGroup.forEach((serie) => {\n      serie.data.forEach((d, i) => {\n        stackedData[d.position] = {\n          ...stackedData[d.position],\n          [serie.name]: typeof d.value === 'number' ? d.value : d.value?.y || 0,\n        };\n      });\n    });\n    allSeriesStackedByGroups.push(stack().keys(keys)(stackedData));\n  });\n  return allSeriesStackedByGroups;\n};\n\nexport const getFormatGenerator = (type: string) => {\n  if (type === 'time') return timeFormat;\n  if (type === 'linear') return format;\n  return null;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,OAAO,YAAY,cAAsB;AAG3C,MAAM,kBAAkB,CAAC,QAAoB,UAAkB;AACpE,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK,GAAG;AACzC,aAAS,IAAI,GAAG,IAAI,OAAO,GAAG,QAAQ,KAAK,GAAG;AAC5C,UAAI,OAAO,GAAG,OAAO;AAAO,eAAO;AAAA,IACrC;AAAA,EACF;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAAC,aAAa,UAA4B;AACtE,WAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,UAAM,OAAO,YAAY,GAAG,KAAK,CAAC,MAAM,EAAE,QAAQ,MAAM,IAAI;AAC5D,QAAI;AAAM,aAAO;AAAA,EACnB;AACA,SAAO;AACT;AAGO,MAAM,YAAY,CAAC,eAAuC,WAAkC;AACjG,QAAM,2BAA2D,CAAC;AAClE,MAAI,CAAC;AAAe,WAAO,CAAC;AAC5B,iBAAe,QAAQ,CAAC,MAAM;AAC5B,UAAM,6BAA6B,OAAO,OAAO,CAAC,UAAU,EAAE,SAAS,MAAM,IAAI,CAAC;AAClF,UAAM,OAAO,2BAA2B,IAAI,CAAC,UAAU,MAAM,IAAI;AACjE,UAAM,cAAsD,CAAC;AAC7D,+BAA2B,QAAQ,CAAC,UAAU;AAC5C,YAAM,KAAK,QAAQ,CAAC,GAAG,MAAM;AAC3B,oBAAY,EAAE,YAAY;AAAA,UACxB,GAAG,YAAY,EAAE;AAAA,UACjB,CAAC,MAAM,OAAO,OAAO,EAAE,UAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,KAAK;AAAA,QACtE;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AACD,6BAAyB,KAAK,MAAM,EAAE,KAAK,IAAI,EAAE,WAAW,CAAC;AAAA,EAC/D,CAAC;AACD,SAAO;AACT;AAEO,MAAM,qBAAqB,CAAC,SAAiB;AAClD,MAAI,SAAS;AAAQ,WAAO;AAC5B,MAAI,SAAS;AAAU,WAAO;AAC9B,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { stack, timeFormat, stackOffsetDiverging, format, Series } from 'd3';\nimport { DSChartT } from '../react-desc-prop-types';\n\nexport const getStackedIndex = (groups: string[][], serie: string) => {\n  for (let i = 0; i < groups.length; i += 1) {\n    for (let j = 0; j < groups[i].length; j += 1) {\n      if (groups[i][j] === serie) return i;\n    }\n  }\n  return -1;\n};\n\nexport const getStackedData = (stackedData, serie: DSChartT.SeriesT) => {\n  for (let i = 0; i < stackedData?.length; i += 1) {\n    const data = stackedData[i].find((d) => d.key === serie.name);\n    if (data) return data;\n  }\n  return false;\n};\n\n// transform series grouped in stack into what d3 stack function need to read\nexport const stackData = (groupsStacked: string[][] | undefined, series: DSChartT.InternalData) => {\n  const allSeriesStackedByGroups: DSChartT.StackedSeriesByGroupT = [];\n  if (!groupsStacked) return [];\n  groupsStacked?.forEach((g) => {\n    const seriesFilteredByStackGroup = series.filter((serie) => g.includes(serie.name));\n    const keys = seriesFilteredByStackGroup.map((serie) => serie.name);\n    const stackedData: Array<{ [serieName: string]: number }> = [];\n    seriesFilteredByStackGroup.forEach((serie) => {\n      serie.data.forEach((d, i) => {\n        stackedData[d.position] = {\n          ...stackedData[d.position],\n          [serie.name]: typeof d.value === 'number' ? d.value : d.value?.y || 0,\n        };\n      });\n    });\n    allSeriesStackedByGroups.push(stack().offset(stackOffsetDiverging).keys(keys)(stackedData));\n  });\n  return allSeriesStackedByGroups;\n};\n\nexport const getFormatGenerator = (type: string) => {\n  if (type === 'time') return timeFormat;\n  if (type === 'linear') return format;\n  return null;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,OAAO,YAAY,sBAAsB,cAAsB;AAGjE,MAAM,kBAAkB,CAAC,QAAoB,UAAkB;AACpE,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK,GAAG;AACzC,aAAS,IAAI,GAAG,IAAI,OAAO,GAAG,QAAQ,KAAK,GAAG;AAC5C,UAAI,OAAO,GAAG,OAAO;AAAO,eAAO;AAAA,IACrC;AAAA,EACF;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAAC,aAAa,UAA4B;AACtE,WAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,UAAM,OAAO,YAAY,GAAG,KAAK,CAAC,MAAM,EAAE,QAAQ,MAAM,IAAI;AAC5D,QAAI;AAAM,aAAO;AAAA,EACnB;AACA,SAAO;AACT;AAGO,MAAM,YAAY,CAAC,eAAuC,WAAkC;AACjG,QAAM,2BAA2D,CAAC;AAClE,MAAI,CAAC;AAAe,WAAO,CAAC;AAC5B,iBAAe,QAAQ,CAAC,MAAM;AAC5B,UAAM,6BAA6B,OAAO,OAAO,CAAC,UAAU,EAAE,SAAS,MAAM,IAAI,CAAC;AAClF,UAAM,OAAO,2BAA2B,IAAI,CAAC,UAAU,MAAM,IAAI;AACjE,UAAM,cAAsD,CAAC;AAC7D,+BAA2B,QAAQ,CAAC,UAAU;AAC5C,YAAM,KAAK,QAAQ,CAAC,GAAG,MAAM;AAC3B,oBAAY,EAAE,YAAY;AAAA,UACxB,GAAG,YAAY,EAAE;AAAA,UACjB,CAAC,MAAM,OAAO,OAAO,EAAE,UAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,KAAK;AAAA,QACtE;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AACD,6BAAyB,KAAK,MAAM,EAAE,OAAO,oBAAoB,EAAE,KAAK,IAAI,EAAE,WAAW,CAAC;AAAA,EAC5F,CAAC;AACD,SAAO;AACT;AAEO,MAAM,qBAAqB,CAAC,SAAiB;AAClD,MAAI,SAAS;AAAQ,WAAO;AAC5B,MAAI,SAAS;AAAU,WAAO;AAC9B,SAAO;AACT;",
   "names": []
 }

package/dist/esm/graphs/Chart/helpers/useUniqueData.js CHANGED Viewed

@@ -37,7 +37,9 @@ const useUniqueData = () => {
             position: xScale(x),
             name: serie.name,
             xValue: x,
-            yValue: y
+            yValue: y,
+            key: datum.position,
+            datum
           };
         })
       ).flat(1);
@@ -50,7 +52,9 @@ const useUniqueData = () => {
           position: xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x),
           name: serie.name,
           xValue: xAxis.cols ? xAxis.cols[datum.position] : datum.value.x,
-          yValue: typeof datum.value === "number" ? datum.value : datum.value.y
+          yValue: typeof datum.value === "number" ? datum.value : datum.value.y,
+          key: datum.position,
+          datum
         }))
       ).flat(1);
     }
@@ -63,7 +67,7 @@ const useUniqueData = () => {
       }
     });
     const postionUniqueDataArray = Object.keys(postionUniqueData).map((key) => {
-      const xPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);
+      const xPosition = parseFloat(key);
       const datum = postionUniqueData[key];
       return { xPosition, datum, xValue: datum[0].xValue };
     });
@@ -79,18 +83,7 @@ const useUniqueData = () => {
       };
       return { ...line, rectDetector };
     });
-  }, [
-    isBandAxis,
-    data,
-    xScale,
-    xAxis.cols,
-    xScrollbarPosition,
-    containerRatio,
-    innerWidth,
-    getXValue,
-    getYValue,
-    getBandwidth
-  ]);
+  }, [isBandAxis, data, xScale, xAxis.cols, xScrollbarPosition, containerRatio, innerWidth, getXValue, getYValue]);
 };
 export {
   useUniqueData

package/dist/esm/graphs/Chart/helpers/useUniqueData.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/helpers/useUniqueData.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\n\nexport const useUniqueData = () => {\n  const {\n    props: { xAxis },\n    currentData: data,\n    xScale,\n    getBandwidth,\n    xScrollbarPosition,\n    containerRatio,\n    innerWidth,\n    getXValue,\n    getYValue,\n  } = useContext(ChartContext);\n\n  function compare(a, b) {\n    if (a.xPosition < b.xPosition) {\n      return -1;\n    }\n    if (a.xPosition > b.xPosition) {\n      return 1;\n    }\n    return 0;\n  }\n\n  const isBandAxis = !!xScale.bandwidth;\n  return useMemo(() => {\n    let valueToPositionPerSeries;\n    if (isBandAxis) {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data\n            .filter((datum) => {\n              const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n              return (\n                xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) &&\n                xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth\n              );\n            })\n            .map((datum) => {\n              const x = getXValue(datum);\n              const y = getYValue(datum);\n              return {\n                position: xScale(x),\n                name: serie.name,\n                xValue: x,\n                yValue: y,\n              };\n            }),\n        )\n        .flat(1);\n    } else {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data\n            .filter((datum) => {\n              const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n              return (\n                xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) &&\n                xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth\n              );\n            })\n            .map((datum) => ({\n              position: xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x),\n              name: serie.name,\n              xValue: xAxis.cols ? xAxis.cols[datum.position] : datum.value.x,\n              yValue: typeof datum.value === 'number' ? datum.value : datum.value.y,\n            })),\n        )\n        .flat(1);\n    }\n    const postionUniqueData = {};\n\n    // grouping points by xAxis position\n    valueToPositionPerSeries.forEach((set) => {\n      if (postionUniqueData[[set.position]]) {\n        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];\n      } else {\n        postionUniqueData[[set.position]] = [{ ...set }];\n      }\n    });\n\n    const postionUniqueDataArray = Object.keys(postionUniqueData).map((key) => {\n      const xPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);\n      const datum = postionUniqueData[key];\n\n      return { xPosition, datum, xValue: datum[0].xValue };\n    });\n\n    if (isBandAxis) {\n      return postionUniqueDataArray;\n    }\n    return postionUniqueDataArray.sort(compare).map((line, i, array) => {\n      const prevPoint = parseFloat(array[i - 1]?.xPosition ?? 0);\n      const postPoint = parseFloat(array[i + 1]?.xPosition ?? 0);\n\n      const rectDetector = {\n        left: (line.xPosition - prevPoint) / 2,\n        right: Math.abs((postPoint === 0 ? 0 : postPoint - line.xPosition) / 2),\n      };\n\n      return { ...line, rectDetector };\n    });\n  }, [\n    isBandAxis,\n    data,\n    xScale,\n    xAxis.cols,\n    xScrollbarPosition,\n    containerRatio,\n    innerWidth,\n    getXValue,\n    getYValue,\n    getBandwidth,\n  ]);\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\n\nexport const useUniqueData = () => {\n  const {\n    props: { xAxis },\n    currentData: data,\n    xScale,\n    getBandwidth,\n    xScrollbarPosition,\n    containerRatio,\n    innerWidth,\n    getXValue,\n    getYValue,\n  } = useContext(ChartContext);\n\n  function compare(a, b) {\n    if (a.xPosition < b.xPosition) {\n      return -1;\n    }\n    if (a.xPosition > b.xPosition) {\n      return 1;\n    }\n    return 0;\n  }\n\n  const isBandAxis = !!xScale.bandwidth;\n  return useMemo(() => {\n    let valueToPositionPerSeries;\n    if (isBandAxis) {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data\n            .filter((datum) => {\n              const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n              return (\n                xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) &&\n                xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth\n              );\n            })\n            .map((datum) => {\n              const x = getXValue(datum);\n              const y = getYValue(datum);\n              return {\n                position: xScale(x),\n                name: serie.name,\n                xValue: x,\n                yValue: y,\n                key: datum.position,\n                datum,\n              };\n            }),\n        )\n        .flat(1);\n    } else {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data\n            .filter((datum) => {\n              const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n              return (\n                xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) &&\n                xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth\n              );\n            })\n            .map((datum) => ({\n              position: xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x),\n              name: serie.name,\n              xValue: xAxis.cols ? xAxis.cols[datum.position] : datum.value.x,\n              yValue: typeof datum.value === 'number' ? datum.value : datum.value.y,\n              key: datum.position,\n              datum,\n            })),\n        )\n        .flat(1);\n    }\n    const postionUniqueData = {};\n\n    // grouping points by xAxis position\n    valueToPositionPerSeries.forEach((set) => {\n      if (postionUniqueData[[set.position]]) {\n        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];\n      } else {\n        postionUniqueData[[set.position]] = [{ ...set }];\n      }\n    });\n\n    const postionUniqueDataArray = Object.keys(postionUniqueData).map((key) => {\n      const xPosition = parseFloat(key);\n      const datum = postionUniqueData[key];\n\n      return { xPosition, datum, xValue: datum[0].xValue };\n    });\n\n    if (isBandAxis) {\n      return postionUniqueDataArray;\n    }\n    return postionUniqueDataArray.sort(compare).map((line, i, array) => {\n      const prevPoint = parseFloat(array[i - 1]?.xPosition ?? 0);\n      const postPoint = parseFloat(array[i + 1]?.xPosition ?? 0);\n      const rectDetector = {\n        left: (line.xPosition - prevPoint) / 2,\n        right: Math.abs((postPoint === 0 ? 0 : postPoint - line.xPosition) / 2),\n      };\n\n      return { ...line, rectDetector };\n    });\n  }, [isBandAxis, data, xScale, xAxis.cols, xScrollbarPosition, containerRatio, innerWidth, getXValue, getYValue]);\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -12,12 +12,10 @@ import { Scrapper } from "../Scrapper/Scrapper";
 import { VerticalScrapper } from "../Scrapper/VerticalScrapper";
 const Axes = () => {
   const {
-    containerRatio,
-    props: { scrapper, xAxis, yAxis }
+    props: { scrapper, xAxis, yAxis, xScroll }
   } = useContext(ChartContext);
-  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;
   const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
-  if (xScroll) {
+  if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [
         /* @__PURE__ */ jsx(AxisRight, {}),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Axis/Axes.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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    containerRatio,\n    props: { scrapper, xAxis, yAxis },\n  } = useContext(ChartContext);\n\n  // @TODO until we decide if we use this internal we know which axis this way\n  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n  if (xScroll) {\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAElC,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AAErC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAC1B,MAAM,OAAO,MAAM;AACxB,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,OAAO,MAAM;AAAA,EAClC,IAAI,WAAW,YAAY;AAG3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AACtD,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,MAAI,SAAS;AACX,WACE;AAAA,MACE;AAAA,4BAAC,aAAU;AAAA,QACX,oBAAC,YAAS;AAAA,QACV,oBAAC,wBAAqB;AAAA;AAAA,KACxB;AAAA,EAEJ;AACA,MAAI,SAAS;AACX,WACE;AAAA,MACE;AAAA,4BAAC,cAAW;AAAA,QACZ,oBAAC,wBAAqB;AAAA;AAAA,KACxB;AAAA,EAEJ;AACA,SACE;AAAA,IACE;AAAA,0BAAC,aAAU;AAAA,MACX,oBAAC,YAAS;AAAA,MACV,oBAAC,cAAW;AAAA,MACZ,oBAAC,iBAAc;AAAA,MACd,UAAU,SAAS,eAAe,oBAAC,YAAS,IAAK;AAAA,MACjD,UAAU,SAAS,aAAa,oBAAC,oBAAiB,IAAK;AAAA;AAAA,GAC1D;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAElC,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AAErC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAC1B,MAAM,OAAO,MAAM;AACxB,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,OAAO,OAAO,QAAQ;AAAA,EAC3C,IAAI,WAAW,YAAY;AAE3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAGtD,MAAI,WAAW,MAAM,UAAU,cAAc,QAAQ,GAAG;AACtD,WACE;AAAA,MACE;AAAA,4BAAC,aAAU;AAAA,QACX,oBAAC,YAAS;AAAA,QACV,oBAAC,wBAAqB;AAAA;AAAA,KACxB;AAAA,EAEJ;AACA,MAAI,SAAS;AACX,WACE;AAAA,MACE;AAAA,4BAAC,cAAW;AAAA,QACZ,oBAAC,wBAAqB;AAAA;AAAA,KACxB;AAAA,EAEJ;AACA,SACE;AAAA,IACE;AAAA,0BAAC,aAAU;AAAA,MACX,oBAAC,YAAS;AAAA,MACV,oBAAC,cAAW;AAAA,MACZ,oBAAC,iBAAc;AAAA,MACd,UAAU,SAAS,eAAe,oBAAC,YAAS,IAAK;AAAA,MACjD,UAAU,SAAS,aAAa,oBAAC,oBAAiB,IAAK;AAAA;AAAA,GAC1D;AAEJ;",
   "names": []
 }

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

@@ -13,6 +13,7 @@ const AxisBottom = React2.memo(() => {
     innerWidth,
     containerRatio,
     internalMargin,
+    isHorizontal,
     setAxisBottomRef
   } = useContext(ChartContext);
   const axisRef = useRef(null);
@@ -33,7 +34,7 @@ const AxisBottom = React2.memo(() => {
         return innerWidth / 100;
       })();
       const ticks = xScale.ticks?.(ticksNum);
-      if (containerRatio > 1 && uniqueData.length < 10) {
+      if (containerRatio > 1 && uniqueData.length < 10 && !isHorizontal) {
         const ticksName = uniqueData.map((u) => u.xValue);
         axis.tickValues(ticksName);
         grid.tickValues(ticksName);
@@ -60,7 +61,7 @@ const AxisBottom = React2.memo(() => {
       const axisNode = select(axisRef.current);
       axisNode.call(axis);
       const firstTick = axisNode.select(".tick").node();
-      if (firstTick?.getBoundingClientRect().left < internalMargin.left + 10) {
+      if (firstTick?.getBoundingClientRect().left < internalMargin.left + 10 && !xScale.bandwidth) {
         firstTick.remove();
       }
       if (tickRotation)
@@ -81,7 +82,8 @@ const AxisBottom = React2.memo(() => {
     innerWidth,
     uniqueData.length,
     uniqueData,
-    internalMargin.left
+    internalMargin.left,
+    isHorizontal
   ]);
   if (xAxis.hideAxis)
     return null;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Axis/AxisBottom.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { select, 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';\n\nexport const AxisBottom = React.memo(() => {\n  const {\n    props: { xAxis },\n    innerHeight,\n    xScale,\n    innerWidth,\n    containerRatio,\n    internalMargin,\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      if (containerRatio > 1 && uniqueData.length < 10) {\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 = timeFormat(tickFormat);\n          axis.tickFormat((d) => formatGenerator(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) {\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  ]);\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\n      <StyledGrid ref={gridRef}></StyledGrid>\n    </g>\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { select, 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';\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 = timeFormat(tickFormat);\n          axis.tickFormat((d) => formatGenerator(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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,OAAOA,UAAS,YAAY,WAAW,cAAc;AACrD,SAAS,QAAQ,YAAY,kBAA0C;AACvE,SAAS,YAAY,kBAAkB;AACvC,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAEvB,MAAM,aAAaA,OAAM,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,IAAI,WAAW,YAAY;AAE3B,QAAM,UAAU,OAAsB,IAAI;AAC1C,QAAM,UAAU,OAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,YAAY,gBAAgB,OAAO,cAAc,UAAU,IAC7E,MAAM,QAAS,CAAC;AAElB,QAAM,cAAc,CAAC,UAAU,QAAQ,KAAK;AAG5C,QAAM,aAAa,cAAc;AACjC,YAAU,MAAM;AACd,UAAM,OAAO,WAAW,MAAqC,EAC1D,SAAS,CAAC,WAAW,EACrB,WAAW,EAAE,EACb,cAAc,CAAC;AAElB,UAAM,OAAO,WAAW,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,kBAAkB,WAAW,UAAU;AAC7C,eAAK,WAAW,CAAC,MAAM,gBAAgB,CAAC,CAAC;AAAA,QAC3C;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,eAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACtD,YAAM,WAAW,OAAO,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,qBAAC;AAAA,IAAE,WAAW,eAAe;AAAA,IAC3B;AAAA,0BAAC;AAAA,QAAE,KAAK;AAAA,QACN,8BAAC;AAAA,UAAW,WAAW,MAAM;AAAA,UAAO,WAAW;AAAA,UAAO,KAAK;AAAA,SAAS;AAAA,OACtE;AAAA,MACA,oBAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -7,11 +7,12 @@ import { ChartContext } from "../../ChartContext";
 import { getFormatGenerator } from "../../helpers";
 const AxisLeft = () => {
   const {
-    props: { yAxis, height },
+    props: { yAxis },
     innerHeight,
     innerWidth,
     yScale,
     chartId,
+    height,
     setAxisLeftRef
   } = useContext(ChartContext);
   const ref = useRef(null);
@@ -19,6 +20,8 @@ const AxisLeft = () => {
   const { tickValues, color: tickColor, tickFormat, overwriteTicks, tickRotation, tickCount } = yAxis.tick || {};
   const ticks = yScale.ticks?.(tickCount ?? height / 80);
   const { type, showGrid, color: axisColor } = yAxis;
+  useEffect(() => {
+  });
   useEffect(() => {
     const axis = axisLeft(yScale).tickSizeOuter(0);
     const grid = axisLeft(yScale).tickFormat((_) => "").tickSize(showGrid ? -innerWidth : 0).tickSizeOuter(0);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Axis/AxisLeft.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisLeft } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport { getFormatGenerator } from '../../helpers';\nexport const AxisLeft = () => {\n  const {\n    props: { yAxis, height },\n    innerHeight,\n    innerWidth,\n    yScale,\n    chartId,\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  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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,WAAW,cAAc;AACrD,SAAS,QAAQ,gBAAgB;AACjC,SAAS,YAAY,kBAAkB;AACvC,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AAC5B,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,MAAM,OAAsB,IAAI;AACtC,QAAM,UAAU,OAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,OAAO,WAAW,YAAY,gBAAgB,cAAc,UAAU,IAAI,MAAM,QAAQ,CAAC;AAE7G,QAAM,QAAQ,OAAO,QAAQ,aAAa,SAAS,EAAE;AAErD,QAAM,EAAE,MAAM,UAAU,OAAO,UAAU,IAAI;AAC7C,YAAU,MAAM;AACd,UAAM,OAAO,SAAS,MAAM,EAAE,cAAc,CAAC;AAE7C,UAAM,OAAO,SAAS,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,kBAAkB,mBAAmB,QAAQ,QAAQ;AAE3D,aAAK,WAAW,CAAC,MAAM,gBAAgB,UAAU,EAAE,CAAC,CAAC;AAAA,MACvD;AACA,UAAI,OAAO,eAAe,YAAY;AACpC,aAAK,WAAW,UAAU;AAAA,MAC5B;AAAA,IACF;AACA,QAAI,KAAK,WAAW,SAAS,SAAS;AACpC,aAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,YAAM,WAAW,OAAO,IAAI,OAAO;AACnC,eAAS,KAAK,IAAI;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,qBAAC;AAAA,IACC;AAAA,0BAAC;AAAA,QAAE,MAAM,aAAa;AAAA,QACpB,8BAAC;AAAA,UAAW,KAAK;AAAA,SAAS;AAAA,OAC5B;AAAA,MACA,oBAAC;AAAA,QAAE,KAAK;AAAA,QACN,8BAAC;AAAA,UAAW;AAAA,UAAsB;AAAA,UAAU;AAAA,UAAsB,WAAU;AAAA,SAAY;AAAA,OAC1F;AAAA;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { select, 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  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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,WAAW,cAAc;AACrD,SAAS,QAAQ,gBAAgB;AACjC,SAAS,YAAY,kBAAkB;AACvC,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;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,IAAI,WAAW,YAAY;AAE3B,QAAM,MAAM,OAAsB,IAAI;AACtC,QAAM,UAAU,OAAsB,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,YAAU,MAAM;AAAA,EAAC,CAAC;AAClB,YAAU,MAAM;AACd,UAAM,OAAO,SAAS,MAAM,EAAE,cAAc,CAAC;AAE7C,UAAM,OAAO,SAAS,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,kBAAkB,mBAAmB,QAAQ,QAAQ;AAE3D,aAAK,WAAW,CAAC,MAAM,gBAAgB,UAAU,EAAE,CAAC,CAAC;AAAA,MACvD;AACA,UAAI,OAAO,eAAe,YAAY;AACpC,aAAK,WAAW,UAAU;AAAA,MAC5B;AAAA,IACF;AACA,QAAI,KAAK,WAAW,SAAS,SAAS;AACpC,aAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,YAAM,WAAW,OAAO,IAAI,OAAO;AACnC,eAAS,KAAK,IAAI;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,qBAAC;AAAA,IACC;AAAA,0BAAC;AAAA,QAAE,MAAM,aAAa;AAAA,QACpB,8BAAC;AAAA,UAAW,KAAK;AAAA,SAAS;AAAA,OAC5B;AAAA,MACA,oBAAC;AAAA,QAAE,KAAK;AAAA,QACN,8BAAC;AAAA,UAAW;AAAA,UAAsB;AAAA,UAAU;AAAA,UAAsB,WAAU;AAAA,SAAY;AAAA,OAC1F;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }