@elliemae/ds-dataviz 3.13.0-next.3 → 3.13.0

package/dist/cjs/graphs/Chart/config/useScales.js

@@ -32,8 +32,16 @@ var import_react = require("react");
 var import_d3 = require("d3");
 var import_helpers = require("../helpers");
 var import_colorPallet = require("../helpers/colorPallet");
-const useScales = ({ props, innerHeight, innerWidth, stackedData, currentData, containerRatio }) => {
-  const { series, xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll } = props;
+const useScales = ({
+  props,
+  originalSeries: series,
+  innerHeight,
+  innerWidth,
+  stackedData,
+  currentData,
+  containerRatio
+}) => {
+  const { 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);
@@ -46,6 +54,8 @@ const useScales = ({ props, innerHeight, innerWidth, stackedData, currentData, c
       const begin = axis?.beginAtZero ? 0 : axis.min ?? void 0;
       const end = axis.max ?? void 0;
       const data = currentData.filter((serie) => {
+        if (axisString === "x")
+          return true;
         if (serie.scale === axisString) {
           return true;
         }
@@ -139,12 +149,18 @@ const useScales = ({ props, innerHeight, innerWidth, stackedData, currentData, c
     () => (0, import_d3.scaleOrdinal)().domain(series.map((d) => d.name)).range(series.map((d) => import_colorPallet.COLOR_PALLET[d.color] ?? d.color)).unknown("red"),
     [series]
   );
-  const subgroupsWithBars = (0, import_react.useMemo)(
-    () => currentData.filter(
+  const subgroupsWithBars = (0, import_react.useMemo)(() => {
+    const data = currentData.filter(
       (serie) => serie.type === "bar" && !(stackedSeries?.length && (0, import_helpers.getStackedIndex)(stackedSeries, serie.name) > -1)
-    ).map((serie) => serie.name),
-    [currentData, stackedSeries]
-  );
+    ).map((serie) => serie.name);
+    if (stackedSeries?.length) {
+      stackedSeries.forEach((stackedGroup, i) => {
+        if (stackedGroup.length > 0)
+          data.push(`stacked-data-${i}`);
+      });
+    }
+    return data;
+  }, [currentData, stackedSeries]);
   const getBandwidth = (0, import_react.useCallback)(() => {
     if ((xAxis.type === void 0 || xAxis.type === "band") && yAxis.type !== "band") {
       return xScale.bandwidth();
@@ -152,11 +168,8 @@ const useScales = ({ props, innerHeight, innerWidth, stackedData, currentData, c
     if (yAxis.type === "band") {
       return yScale.bandwidth();
     }
-    return innerWidth / xScale.ticks().length / 2;
-  }, [innerWidth, xAxis.type, xScale, yAxis.type, yScale]);
-  if (stackedSeries?.length) {
-    stackedSeries.forEach((_, i) => subgroupsWithBars.push(`stacked-data-${i}`));
-  }
+    return Math.max(3, containerRatio);
+  }, [xAxis.type, xScale, yAxis.type, yScale, containerRatio]);
   const subGroupScale = (0, import_react.useMemo)(
     () => getBandwidth() ? (0, import_d3.scaleBand)().domain(subgroupsWithBars).range([0, getBandwidth() ?? 0]).paddingInner(0.55).padding(0.2).paddingOuter(0.01) : null,
     [getBandwidth, subgroupsWithBars]

package/dist/cjs/graphs/Chart/config/useScales.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/config/useScales.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useCallback } from 'react';\nimport type { ScaleLinear, Series, ScaleBand } from 'd3';\nimport { max, min, scaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog } from 'd3';\nimport type { 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 : axis.min ?? undefined;\n      const end = axis.max ?? 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' || typeof begin === 'object') 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' || typeof begin === 'object') aux.push(begin);\n        if (typeof end === 'number' || typeof end === 'object') aux.push(end);\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  // d3 scale functions\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  // dataviz scales\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useCallback } from 'react';\nimport type { Series, ScaleBand } from 'd3';\nimport { max, min, scaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\nimport { getStackedIndex } from '../helpers';\nimport { COLOR_PALLET } from '../helpers/colorPallet';\ninterface UseScales {\n  propsWithDefaults: 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 = ({\n  props,\n  originalSeries: series,\n  innerHeight,\n  innerWidth,\n  stackedData,\n  currentData,\n  containerRatio,\n}: UseScales) => {\n  const { 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 : axis.min ?? undefined;\n      const end = axis.max ?? undefined;\n      const data = currentData\n        .filter((serie) => {\n          // x axis does not have x2 yet so we return always all their data\n          if (axisString === 'x') return true;\n\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' || typeof begin === 'object') 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' || typeof begin === 'object') aux.push(begin);\n        if (typeof end === 'number' || typeof end === 'object') aux.push(end);\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  // d3 scale functions\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  // dataviz scales\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    const data = currentData\n      .filter(\n        (serie) => serie.type === 'bar' && !(stackedSeries?.length && getStackedIndex(stackedSeries, serie.name) > -1),\n      )\n      .map((serie) => serie.name);\n\n    if (stackedSeries?.length) {\n      stackedSeries.forEach((stackedGroup, i) => {\n        if (stackedGroup.length > 0) data.push(`stacked-data-${i}`);\n      });\n    }\n    return data;\n  }, [currentData, stackedSeries]);\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 Math.max(3, containerRatio);\n  }, [xAxis.type, xScale, yAxis.type, yScale, containerRatio]);\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/graphs/Chart/config/useValidateProps.js

@@ -0,0 +1,37 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useValidateProps_exports = {};
+__export(useValidateProps_exports, {
+  useValidateProps: () => useValidateProps
+});
+module.exports = __toCommonJS(useValidateProps_exports);
+var React = __toESM(require("react"));
+const useValidateProps = (props, propTypes) => {
+  const componentName = "Chart";
+  if (props.series.length === 0 || !props.series) {
+    throw new Error(`${componentName}:: series is required or cannot be an empty array`);
+  }
+};
+//# sourceMappingURL=useValidateProps.js.map

package/dist/cjs/graphs/Chart/config/useValidateProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/graphs/Chart/config/useValidateProps.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\n\nimport type { DSChartT } from '../react-desc-prop-types';\nexport const useValidateProps = (props: DSChartT.Props, propTypes: WeakValidationMap<unknown>): void => {\n  const componentName = 'Chart';\n\n  if (props.series.length === 0 || !props.series) {\n    throw new Error(`${componentName}:: series is required or cannot be an empty array`);\n  }\n  // todo use generic useValidateTypescriptPropTypes for the rest of the props\n  // useValidateTypescriptPropTypes(props, propTypes);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIhB,MAAM,mBAAmB,CAAC,OAAuB,cAAgD;AACtG,QAAM,gBAAgB;AAEtB,MAAI,MAAM,OAAO,WAAW,KAAK,CAAC,MAAM,QAAQ;AAC9C,UAAM,IAAI,MAAM,GAAG,gEAAgE;AAAA,EACrF;AAGF;",
+  "names": []
+}

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

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

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

@@ -48,7 +48,7 @@ var import_VerticalScrapper = require("./Scrapper/VerticalScrapper");
 var import_Controllers = require("./Scroller/Controllers");
 const ChartContainer = () => {
   const {
-    props: { yAxis, y2Axis, xScroll, scrapper, xAxis, width: userWidth },
+    props: { yAxis, y2Axis, yScroll, xScroll, scrapper, xAxis, width: userWidth },
     containerRef,
     activePoint,
     internalMargin,
@@ -68,13 +68,14 @@ const ChartContainer = () => {
     lastPosition,
     setIsScrollbarVisible,
     currentData,
+    setStartPosition,
     width,
     height
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
-  const { onInputKeyDown, handleOnBlur, handleOnFocus } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
+  const { onInputKeyDown, handleOnKeyUp, handleOnBlur, handleOnFocus } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
   const onMouseEnterHandler = (0, import_react.useCallback)(() => {
     setIsScrollbarVisible(true);
+    setActivePoint(null);
   }, [setIsScrollbarVisible]);
   const onMouseLeaveHandler = (0, import_react.useCallback)(() => {
     setScrapperPosY("");
@@ -82,13 +83,30 @@ const ChartContainer = () => {
     setIsScrollbarVisible(false);
     setIsGrabbed(false);
   }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);
+  const handleOnTouchStart = (0, import_react.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      setScrapperPosX("");
+      setIsGrabbed(true);
+      setStartPosition(e.touches[0].clientX);
+      e.preventDefault();
+    },
+    [setIsGrabbed]
+  );
+  const handleOnTouchEnd = (0, import_react.useCallback)(() => {
+    lastPosition.current = xScrollbarPosition;
+    setIsGrabbed(false);
+  }, [setIsGrabbed, xScrollbarPosition, lastPosition]);
   const handleMouseMove = (0, import_react.useCallback)(
     (e) => {
       if (!isGrabbed)
         return;
+      e.preventDefault();
+      const clientX = e.clientX ?? e.touches[0].clientX;
+      const clientY = e.clientY ?? e.touches[0].clientY;
       setActivePoint(null);
       if (xScroll) {
-        const newPosition = lastPosition?.current + e.clientX - startPosition;
+        const newPosition = lastPosition?.current + clientX - startPosition;
         if (newPosition < 0)
           setXScrollbarPosition(0);
         else if (newPosition > innerWidth - innerWidth / containerRatio)
@@ -97,7 +115,7 @@ const ChartContainer = () => {
           setXScrollbarPosition(newPosition);
       }
       if (yScroll) {
-        const newPosition = lastPosition?.current + e.clientY - startPosition;
+        const newPosition = lastPosition?.current + clientY - startPosition;
         if (newPosition < 0)
           setXScrollbarPosition(0);
         else if (newPosition > innerHeight - innerHeight / containerRatio)
@@ -123,10 +141,6 @@ const ChartContainer = () => {
     lastPosition.current = xScrollbarPosition;
     setIsGrabbed(false);
   }, [lastPosition, setIsGrabbed, xScrollbarPosition]);
-  const key = (0, import_react.useMemo)(
-    () => `${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom}`,
-    [internalMargin, width]
-  );
   const render = (0, import_react.useMemo)(() => {
     if (currentData.length === 0)
       return null;
@@ -158,10 +172,14 @@ const ChartContainer = () => {
     {
       ref: setContainerRef,
       onKeyDown: onInputKeyDown,
+      onKeyUp: handleOnKeyUp,
       "aria-hidden": "true",
       tabIndex: activePoint ? -1 : 0,
       onBlur: handleOnBlur,
       onFocus: handleOnFocus,
+      onTouchMove: handleMouseMove,
+      onTouchStart: handleOnTouchStart,
+      onTouchEnd: handleOnTouchEnd,
       onMouseEnter: onMouseEnterHandler,
       onMouseLeave: onMouseLeaveHandler,
       onMouseMove: handleMouseMove,
@@ -179,7 +197,7 @@ const ChartContainer = () => {
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Label.Label, {})
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { className: "container", transform: `translate(${internalMargin.left},${internalMargin.top})`, children: render })
-        ] }, key)
+        ] })
       ] }) : null
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/parts/ChartContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useCallback, useEffect } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Label } from './Labels/Label';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './Axis/AxisBottom';\nimport { AxisRight } from './Axis/AxisRight';\nimport { AxisLeft } from './Axis/AxisLeft';\nimport { SeriesFactory } from './SeriesFactory';\nimport { Scrapper } from './Scrapper/Scrapper';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper';\nimport { Controllers } from './Scroller/Controllers';\nexport const ChartContainer = () => {\n  const {\n    props: { yAxis, y2Axis, xScroll, scrapper, xAxis, width: userWidth },\n    containerRef,\n    activePoint,\n    internalMargin,\n    setScrapperPosY,\n    setScrapperPosX,\n    setContainerRef,\n    svgRef,\n    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    innerHeight,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    lastPosition,\n    setIsScrollbarVisible,\n    currentData,\n    width,\n    height,\n  } = useContext(ChartContext);\n\n  // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  const onMouseEnterHandler = useCallback(() => {\n    setIsScrollbarVisible(true);\n  }, [setIsScrollbarVisible]);\n  const onMouseLeaveHandler = useCallback(() => {\n    setScrapperPosY('');\n    setScrapperPosX('');\n    setIsScrollbarVisible(false);\n    setIsGrabbed(false);\n  }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n  const handleMouseMove: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isGrabbed) return;\n      setActivePoint(null);\n      if (xScroll) {\n        const newPosition = lastPosition?.current + e.clientX - startPosition;\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerWidth - innerWidth / containerRatio)\n          setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n      if (yScroll) {\n        const newPosition = lastPosition?.current + e.clientY - startPosition;\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerHeight - innerHeight / containerRatio)\n          setXScrollbarPosition(innerHeight - innerHeight / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n    },\n    [\n      isGrabbed,\n      setActivePoint,\n      xScroll,\n      yScroll,\n      lastPosition,\n      startPosition,\n      setXScrollbarPosition,\n      innerWidth,\n      containerRatio,\n      innerHeight,\n    ],\n  );\n  const handleMouseUp = useCallback(() => {\n    lastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [lastPosition, setIsGrabbed, xScrollbarPosition]);\n\n  const key = useMemo(\n    () => `${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom}`,\n    [internalMargin, width],\n  );\n\n  const render = useMemo(() => {\n    if (currentData.length === 0) return null;\n    if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisLeft />\n          <ScrollableContainerX />\n        </>\n      );\n    }\n    if (yScroll) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisBottom />\n          <ScrollableContainerY />\n        </>\n      );\n    }\n    return (\n      <>\n        {y2Axis ? <AxisRight /> : null}\n        <AxisLeft />\n        <AxisBottom />\n        <SeriesFactory />\n        {scrapper?.type === 'horizontal' ? <Scrapper /> : null}\n        {scrapper?.type === 'vertical' ? <VerticalScrapper /> : null}\n      </>\n    );\n  }, [currentData.length, scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, y2Axis, yScroll]);\n  return (\n    <StyledSVGWrapper\n      ref={setContainerRef}\n      onKeyDown={onInputKeyDown}\n      aria-hidden=\"true\"\n      tabIndex={activePoint ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      onMouseMove={handleMouseMove}\n      onMouseUp={handleMouseUp}\n      onMouseDown={(e) => e.preventDefault()}\n      isGrabbed={isGrabbed}\n      style={{ width: userWidth, height }}\n    >\n      {width !== 0 ? (\n        <svg ref={svgRef} width={width} height={height}>\n          {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n          <ClipPaths />\n          <BlurMask />\n          <g key={key}>\n            <g>\n              <Controllers />\n              <Legend />\n              <Label />\n            </g>\n            <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n              {render}\n              {/* <ActivePoint/> @todo */}\n            </g>\n          </g>\n        </svg>\n      ) : null}\n    </StyledSVGWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useContext, useMemo, useCallback, useEffect } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Label } from './Labels/Label';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './Axis/AxisBottom';\nimport { AxisRight } from './Axis/AxisRight';\nimport { AxisLeft } from './Axis/AxisLeft';\nimport { SeriesFactory } from './SeriesFactory';\nimport { Scrapper } from './Scrapper/Scrapper';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper';\nimport { Controllers } from './Scroller/Controllers';\nexport const ChartContainer = () => {\n  const {\n    props: { yAxis, y2Axis, yScroll, xScroll, scrapper, xAxis, width: userWidth },\n    containerRef,\n    activePoint,\n    internalMargin,\n    setScrapperPosY,\n    setScrapperPosX,\n    setContainerRef,\n    svgRef,\n    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    innerHeight,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    lastPosition,\n    setIsScrollbarVisible,\n    currentData,\n    setStartPosition,\n    width,\n    height,\n  } = useContext(ChartContext);\n\n  // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  // const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n  const { onInputKeyDown, handleOnKeyUp, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  const onMouseEnterHandler = useCallback(() => {\n    setIsScrollbarVisible(true);\n    setActivePoint(null);\n  }, [setIsScrollbarVisible]);\n  const onMouseLeaveHandler = useCallback(() => {\n    setScrapperPosY('');\n    setScrapperPosX('');\n    setIsScrollbarVisible(false);\n    setIsGrabbed(false);\n  }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n  const handleOnTouchStart: React.TouchEventHandler = useCallback(\n    (e) => {\n      e.stopPropagation();\n      setScrapperPosX('');\n      setIsGrabbed(true);\n      setStartPosition(e.touches[0].clientX);\n      e.preventDefault();\n    },\n    [setIsGrabbed],\n  );\n  const handleOnTouchEnd = useCallback(() => {\n    lastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [setIsGrabbed, xScrollbarPosition, lastPosition]);\n  const handleMouseMove: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isGrabbed) return;\n      e.preventDefault();\n      const clientX = e.clientX ?? e.touches[0].clientX;\n      const clientY = e.clientY ?? e.touches[0].clientY;\n\n      setActivePoint(null);\n      if (xScroll) {\n        const newPosition = lastPosition?.current + clientX - startPosition;\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerWidth - innerWidth / containerRatio)\n          setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n      if (yScroll) {\n        const newPosition = lastPosition?.current + clientY - startPosition;\n\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerHeight - innerHeight / containerRatio)\n          setXScrollbarPosition(innerHeight - innerHeight / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n    },\n    [\n      isGrabbed,\n      setActivePoint,\n      xScroll,\n      yScroll,\n      lastPosition,\n      startPosition,\n      setXScrollbarPosition,\n      innerWidth,\n      containerRatio,\n      innerHeight,\n    ],\n  );\n  const handleMouseUp = useCallback(() => {\n    lastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [lastPosition, setIsGrabbed, xScrollbarPosition]);\n\n  // const key = useMemo(\n  //   () => `${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom}`,\n  //   [internalMargin, width],\n  // );\n\n  const render = useMemo(() => {\n    if (currentData.length === 0) return null;\n    if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisLeft />\n          <ScrollableContainerX />\n        </>\n      );\n    }\n    if (yScroll) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisBottom />\n          <ScrollableContainerY />\n        </>\n      );\n    }\n    return (\n      <>\n        {y2Axis ? <AxisRight /> : null}\n        <AxisLeft />\n        <AxisBottom />\n        <SeriesFactory />\n        {scrapper?.type === 'horizontal' ? <Scrapper /> : null}\n        {scrapper?.type === 'vertical' ? <VerticalScrapper /> : null}\n      </>\n    );\n  }, [currentData.length, scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, y2Axis, yScroll]);\n  return (\n    <StyledSVGWrapper\n      ref={setContainerRef}\n      onKeyDown={onInputKeyDown}\n      onKeyUp={handleOnKeyUp}\n      aria-hidden=\"true\"\n      tabIndex={activePoint ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      onTouchMove={handleMouseMove}\n      onTouchStart={handleOnTouchStart}\n      onTouchEnd={handleOnTouchEnd}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      onMouseMove={handleMouseMove}\n      onMouseUp={handleMouseUp}\n      onMouseDown={(e) => e.preventDefault()}\n      isGrabbed={isGrabbed}\n      style={{ width: userWidth, height }}\n    >\n      {width !== 0 ? (\n        <svg ref={svgRef} width={width} height={height}>\n          {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n          <ClipPaths />\n          <BlurMask />\n          <g>\n            <g>\n              <Controllers />\n              <Legend />\n              <Label />\n            </g>\n            <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n              {render}\n              {/* <ActivePoint/> @todo */}\n            </g>\n          </g>\n        </svg>\n      ) : null}\n    </StyledSVGWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/Labels/LeftLabel.js

@@ -38,15 +38,15 @@ const LeftLabel = () => {
     internalMargin,
     setLeftLabel,
     leftLegendWidth,
+    leftLabelWidth,
     props: { yAxis }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { ref: setLeftLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "g",
     {
-      ref: setLeftLabel,
-      transform: `translate(${leftLegendWidth > 0 ? leftLegendWidth + 8 : 0},${innerHeight / 2 + internalMargin.top}) rotate(-90)`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxisLabel, { className: "axis-label", textAnchor: "middle", dy: 15, children: yAxis?.label })
+      transform: `translate(${leftLegendWidth + leftLabelWidth},${innerHeight / 2 + internalMargin.top}) rotate(-90)`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxisLabel, { className: "axis-label", textAnchor: "middle", children: yAxis?.label })
     }
-  );
+  ) });
 };
 //# sourceMappingURL=LeftLabel.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Labels/LeftLabel.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const LeftLabel = () => {\n  const {\n    innerHeight,\n    internalMargin,\n    setLeftLabel,\n    leftLegendWidth,\n    props: { yAxis },\n  } = useContext(ChartContext);\n\n  return (\n    <g\n      ref={setLeftLabel}\n      transform={`translate(${leftLegendWidth > 0 ? leftLegendWidth + 8 : 0},${\n        innerHeight / 2 + internalMargin.top\n      }) rotate(-90)`}\n    >\n      {/* <rect height=\"30\" width=\"1\" fill=\"transparent\" /> */}\n      <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\" dy={15}>\n        {yAxis?.label}\n      </StyledAxisLabel>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBjB;AArBN,mBAAkC;AAClC,0BAA6B;AAC7B,oBAAgC;AAEzB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,QAAI,yBAAW,gCAAY;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,aAAa,kBAAkB,IAAI,kBAAkB,IAAI,KAClE,cAAc,IAAI,eAAe;AAAA,MAInC,sDAAC,iCAAgB,WAAU,cAAa,YAAW,UAAS,IAAI,IAC7D,iBAAO,OACV;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const LeftLabel = () => {\n  const {\n    innerHeight,\n    internalMargin,\n    setLeftLabel,\n    leftLegendWidth,\n    leftLabelWidth,\n    props: { yAxis },\n  } = useContext(ChartContext);\n\n  return (\n    <g ref={setLeftLabel}>\n      <g\n        transform={`translate(${leftLegendWidth + leftLabelWidth},${innerHeight / 2 + internalMargin.top}) rotate(-90)`}\n      >\n        <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\">\n          {yAxis?.label}\n        </StyledAxisLabel>\n      </g>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBf;AAnBR,mBAAkC;AAClC,0BAA6B;AAC7B,oBAAgC;AAEzB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,QAAI,yBAAW,gCAAY;AAE3B,SACE,4CAAC,OAAE,KAAK,cACN;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,aAAa,kBAAkB,kBAAkB,cAAc,IAAI,eAAe;AAAA,MAE7F,sDAAC,iCAAgB,WAAU,cAAa,YAAW,UAChD,iBAAO,OACV;AAAA;AAAA,EACF,GACF;AAEJ;",
   "names": []
 }

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

@@ -34,56 +34,56 @@ var import_d3 = require("d3");
 var import_ChartContext = require("../../ChartContext");
 var import_LegendItem = require("./LegendItem");
 const BottomLegend = () => {
-  const { colorScale, axisBottomHeight, innerWidth, innerHeight, bottomLabelHeight, internalMargin, setBottomLegend } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  const ref = (0, import_react.useRef)(null);
-  const firstRender = (0, import_react.useRef)(true);
-  const [xTransform, setXTransform] = (0, import_react.useState)(innerWidth / 2);
-  (0, import_react.useLayoutEffect)(() => {
-    if (ref.current) {
-      const cells = (0, import_d3.select)(ref.current).selectAll(".cell");
-      const padding = 30;
-      let offset = 0;
-      let verticalOffset = 0;
-      cells.each((d, i) => {
-        if (cells._groups[0][i - 1]) {
-          const lastCell = (0, import_d3.select)(cells._groups[0][i - 1]);
-          const d3sel = (0, import_d3.select)(cells._groups[0][i]);
-          const { width } = lastCell.node().getBBox();
-          if (offset + width + padding > innerWidth - innerWidth / 3) {
-            offset = 0;
-            verticalOffset += 20;
-          } else {
-            offset += width + padding;
-          }
-          d3sel.attr("transform", `translate(${offset}, ${verticalOffset})`);
+  const {
+    colorScale,
+    bottomLegendWidth,
+    bottomLegend,
+    axisBottomHeight,
+    axisLeftWidth,
+    innerWidth,
+    innerHeight,
+    bottomLabelHeight,
+    internalMargin,
+    currentData,
+    width: graphWidth,
+    setBottomLegend
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const [xTransform, setXTransform] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    if (!bottomLegend)
+      return;
+    const cells = (0, import_d3.select)(bottomLegend).selectAll(".cell");
+    const padding = 25;
+    let offset = 0;
+    let verticalOffset = 0;
+    currentData.forEach((_, i) => {
+      if (cells._groups[0][i - 1]) {
+        const lastCell = (0, import_d3.select)(cells._groups[0][i - 1]);
+        const d3sel = (0, import_d3.select)(cells._groups[0][i]);
+        const { width: currentCellWidth } = d3sel.node().getBBox();
+        const { width: lastCellWidth } = lastCell.node().getBBox();
+        if (offset + lastCellWidth + padding + currentCellWidth + 10 > graphWidth) {
+          offset = 0;
+          verticalOffset += 20;
+        } else {
+          offset += lastCellWidth + padding;
         }
-      });
-      const bounds = ref.current.getBoundingClientRect();
-      setXTransform((prev) => prev - bounds.width / 2);
-      firstRender.current = false;
-    }
-  }, [innerWidth]);
-  const margin = (0, import_react.useMemo)(() => {
-    let counter = 0;
-    if (bottomLabelHeight > 0) {
-      counter += bottomLabelHeight;
-    }
-    if (axisBottomHeight > 0) {
-      counter += axisBottomHeight;
-    }
-    return counter;
-  }, [axisBottomHeight, bottomLabelHeight]);
+        d3sel.attr("transform", `translate(${offset}, ${verticalOffset})`);
+      }
+    });
+    setXTransform(innerWidth / 2 + internalMargin.left - bottomLegendWidth / 2);
+  }, [bottomLegend, currentData, bottomLegendWidth, axisLeftWidth, innerWidth, internalMargin.left, graphWidth]);
   return (0, import_react.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { ref: setBottomLegend, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "g",
       {
-        ref,
-        transform: `translate(${xTransform + internalMargin.left}, ${innerHeight + internalMargin.top + margin})`,
+        ref: setBottomLegend,
+        transform: `translate(${xTransform}, ${innerHeight + bottomLabelHeight + axisBottomHeight + internalMargin.top})`,
         className: "bottom-legend",
         children: colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendItem.LegendItem, { domainValue }, domainValue))
       }
-    ) }),
-    [colorScale, innerHeight, internalMargin.left, internalMargin.top, margin, setBottomLegend, xTransform]
+    ),
+    [axisBottomHeight, bottomLabelHeight, colorScale, innerHeight, internalMargin.top, setBottomLegend, xTransform]
   );
 };
 //# sourceMappingURL=BottomLegend.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Legend/BottomLegend.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useLayoutEffect, useRef, useState } from 'react';\nimport { select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const BottomLegend = () => {\n  const { colorScale, axisBottomHeight, innerWidth, innerHeight, bottomLabelHeight, internalMargin, setBottomLegend } =\n    useContext(ChartContext);\n\n  const ref = useRef<SVGGElement>(null);\n  const firstRender = useRef(true);\n\n  const [xTransform, setXTransform] = useState(innerWidth / 2);\n  useLayoutEffect(() => {\n    if (ref.current) {\n      const cells = select(ref.current).selectAll('.cell');\n      const padding = 30;\n      let offset = 0;\n      let verticalOffset = 0;\n\n      cells.each((d, i) => {\n        if (cells._groups[0][i - 1]) {\n          const lastCell = select(cells._groups[0][i - 1]);\n          const d3sel = select(cells._groups[0][i]);\n\n          const { width } = lastCell.node().getBBox();\n          if (offset + width + padding > innerWidth - innerWidth / 3) {\n            offset = 0;\n            verticalOffset += 20;\n          } else {\n            offset += width + padding;\n          }\n\n          d3sel.attr('transform', `translate(${offset}, ${verticalOffset})`);\n        }\n      });\n      const bounds = ref.current.getBoundingClientRect();\n      setXTransform((prev) => prev - bounds.width / 2);\n      firstRender.current = false;\n    }\n  }, [innerWidth]);\n\n  const margin = useMemo(() => {\n    let counter = 0;\n    if (bottomLabelHeight > 0) {\n      counter += bottomLabelHeight;\n    }\n    if (axisBottomHeight > 0) {\n      counter += axisBottomHeight;\n    }\n    return counter;\n  }, [axisBottomHeight, bottomLabelHeight]);\n\n  return useMemo(\n    () => (\n      <g ref={setBottomLegend}>\n        <g\n          ref={ref}\n          transform={`translate(${xTransform + internalMargin.left}, ${innerHeight + internalMargin.top + margin})`}\n          className=\"bottom-legend\"\n        >\n          {colorScale.domain().map((domainValue, i) => (\n            <LegendItem domainValue={domainValue} key={domainValue} />\n          ))}\n        </g>\n      </g>\n    ),\n\n    [colorScale, innerHeight, internalMargin.left, internalMargin.top, margin, setBottomLegend, xTransform],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8DX;AA9DZ,mBAA8E;AAC9E,gBAAuB;AACvB,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,eAAe,MAAM;AAChC,QAAM,EAAE,YAAY,kBAAkB,YAAY,aAAa,mBAAmB,gBAAgB,gBAAgB,QAChH,yBAAW,gCAAY;AAEzB,QAAM,UAAM,qBAAoB,IAAI;AACpC,QAAM,kBAAc,qBAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,aAAa,CAAC;AAC3D,oCAAgB,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,YAAM,YAAQ,kBAAO,IAAI,OAAO,EAAE,UAAU,OAAO;AACnD,YAAM,UAAU;AAChB,UAAI,SAAS;AACb,UAAI,iBAAiB;AAErB,YAAM,KAAK,CAAC,GAAG,MAAM;AACnB,YAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,gBAAM,eAAW,kBAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,gBAAM,YAAQ,kBAAO,MAAM,QAAQ,GAAG,EAAE;AAExC,gBAAM,EAAE,MAAM,IAAI,SAAS,KAAK,EAAE,QAAQ;AAC1C,cAAI,SAAS,QAAQ,UAAU,aAAa,aAAa,GAAG;AAC1D,qBAAS;AACT,8BAAkB;AAAA,UACpB,OAAO;AACL,sBAAU,QAAQ;AAAA,UACpB;AAEA,gBAAM,KAAK,aAAa,aAAa,WAAW,iBAAiB;AAAA,QACnE;AAAA,MACF,CAAC;AACD,YAAM,SAAS,IAAI,QAAQ,sBAAsB;AACjD,oBAAc,CAAC,SAAS,OAAO,OAAO,QAAQ,CAAC;AAC/C,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,aAAS,sBAAQ,MAAM;AAC3B,QAAI,UAAU;AACd,QAAI,oBAAoB,GAAG;AACzB,iBAAW;AAAA,IACb;AACA,QAAI,mBAAmB,GAAG;AACxB,iBAAW;AAAA,IACb;AACA,WAAO;AAAA,EACT,GAAG,CAAC,kBAAkB,iBAAiB,CAAC;AAExC,aAAO;AAAA,IACL,MACE,4CAAC,OAAE,KAAK,iBACN;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,aAAa,aAAa,eAAe,SAAS,cAAc,eAAe,MAAM;AAAA,QAChG,WAAU;AAAA,QAET,qBAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,4CAAC,gCAAW,eAA+B,WAAa,CACzD;AAAA;AAAA,IACH,GACF;AAAA,IAGF,CAAC,YAAY,aAAa,eAAe,MAAM,eAAe,KAAK,QAAQ,iBAAiB,UAAU;AAAA,EACxG;AACF;",
+  "sourcesContent": ["import React, { useContext, useMemo, useEffect, useState } from 'react';\nimport { select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const BottomLegend = () => {\n  const {\n    colorScale,\n    bottomLegendWidth,\n    bottomLegend,\n    axisBottomHeight,\n    axisLeftWidth,\n    innerWidth,\n    innerHeight,\n    bottomLabelHeight,\n    internalMargin,\n    currentData,\n    width: graphWidth,\n    setBottomLegend,\n  } = useContext(ChartContext);\n\n  const [xTransform, setXTransform] = useState(0);\n\n  useEffect(() => {\n    if (!bottomLegend) return;\n    const cells = select(bottomLegend).selectAll('.cell');\n    const padding = 25;\n    let offset = 0;\n    let verticalOffset = 0;\n\n    currentData.forEach((_, i) => {\n      if (cells._groups[0][i - 1]) {\n        const lastCell = select(cells._groups[0][i - 1]);\n        const d3sel = select(cells._groups[0][i]);\n        const { width: currentCellWidth } = d3sel.node().getBBox();\n\n        const { width: lastCellWidth } = lastCell.node().getBBox();\n\n        if (offset + lastCellWidth + padding + currentCellWidth + 10 > graphWidth) {\n          offset = 0;\n          verticalOffset += 20;\n        } else {\n          offset += lastCellWidth + padding;\n        }\n\n        d3sel.attr('transform', `translate(${offset}, ${verticalOffset})`);\n      }\n    });\n\n    setXTransform(innerWidth / 2 + internalMargin.left - bottomLegendWidth / 2);\n  }, [bottomLegend, currentData, bottomLegendWidth, axisLeftWidth, innerWidth, internalMargin.left, graphWidth]);\n\n  return useMemo(\n    () => (\n      <g\n        ref={setBottomLegend}\n        transform={`translate(${xTransform}, ${\n          innerHeight + bottomLabelHeight + axisBottomHeight + internalMargin.top\n        })`}\n        className=\"bottom-legend\"\n      >\n        {colorScale.domain().map((domainValue, i) => (\n          <LegendItem domainValue={domainValue} key={domainValue} />\n        ))}\n      </g>\n    ),\n\n    [axisBottomHeight, bottomLabelHeight, colorScale, innerHeight, internalMargin.top, setBottomLegend, xTransform],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8Db;AA9DV,mBAAgE;AAChE,gBAAuB;AACvB,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,eAAe,MAAM;AAChC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,CAAC;AAE9C,8BAAU,MAAM;AACd,QAAI,CAAC;AAAc;AACnB,UAAM,YAAQ,kBAAO,YAAY,EAAE,UAAU,OAAO;AACpD,UAAM,UAAU;AAChB,QAAI,SAAS;AACb,QAAI,iBAAiB;AAErB,gBAAY,QAAQ,CAAC,GAAG,MAAM;AAC5B,UAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,cAAM,eAAW,kBAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,cAAM,YAAQ,kBAAO,MAAM,QAAQ,GAAG,EAAE;AACxC,cAAM,EAAE,OAAO,iBAAiB,IAAI,MAAM,KAAK,EAAE,QAAQ;AAEzD,cAAM,EAAE,OAAO,cAAc,IAAI,SAAS,KAAK,EAAE,QAAQ;AAEzD,YAAI,SAAS,gBAAgB,UAAU,mBAAmB,KAAK,YAAY;AACzE,mBAAS;AACT,4BAAkB;AAAA,QACpB,OAAO;AACL,oBAAU,gBAAgB;AAAA,QAC5B;AAEA,cAAM,KAAK,aAAa,aAAa,WAAW,iBAAiB;AAAA,MACnE;AAAA,IACF,CAAC;AAED,kBAAc,aAAa,IAAI,eAAe,OAAO,oBAAoB,CAAC;AAAA,EAC5E,GAAG,CAAC,cAAc,aAAa,mBAAmB,eAAe,YAAY,eAAe,MAAM,UAAU,CAAC;AAE7G,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,aAAa,eACtB,cAAc,oBAAoB,mBAAmB,eAAe;AAAA,QAEtE,WAAU;AAAA,QAET,qBAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,4CAAC,gCAAW,eAA+B,WAAa,CACzD;AAAA;AAAA,IACH;AAAA,IAGF,CAAC,kBAAkB,mBAAmB,YAAY,aAAa,eAAe,KAAK,iBAAiB,UAAU;AAAA,EAChH;AACF;",
   "names": []
 }

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

@@ -33,14 +33,18 @@ var import_react = require("react");
 var import_ChartContext = require("../../ChartContext");
 var import_LegendItem = require("./LegendItem");
 const LeftLegend = () => {
-  const { colorScale, innerHeight, internalMargin, leftLegend, setLeftLegend } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const {
+    originalSeries: series,
+    leftLegendHeight,
+    innerHeight,
+    internalMargin,
+    leftLegend,
+    setLeftLegend
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const [yTransform, setYTransform] = (0, import_react.useState)(innerHeight / 2 + internalMargin.top);
-  (0, import_react.useLayoutEffect)(() => {
-    if (leftLegend) {
-      const bounds = leftLegend.getBoundingClientRect();
-      setYTransform((prev) => prev - bounds.height / 2);
-    }
-  }, [leftLegend]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: `translate(8,${yTransform})`, ref: setLeftLegend, children: colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { className: "tick", transform: `translate(0,${i * 30})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendItem.LegendItem, { domainValue }) }, domainValue)) });
+  (0, import_react.useEffect)(() => {
+    setYTransform(innerHeight / 2 + internalMargin.top - leftLegendHeight / 2);
+  }, [innerHeight, internalMargin.top, leftLegend, leftLegendHeight]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: `translate(8,${yTransform})`, ref: setLeftLegend, children: series.map((serie, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { className: "tick", transform: `translate(0,${i * 30})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendItem.LegendItem, { domainValue: serie.name }, serie.name) }, serie.name)) });
 };
 //# sourceMappingURL=LeftLegend.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Legend/LeftLegend.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useState, useLayoutEffect } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const LeftLegend = () => {\n  const { colorScale, innerHeight, internalMargin, leftLegend, setLeftLegend } = useContext(ChartContext);\n\n  const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);\n\n  useLayoutEffect(() => {\n    if (leftLegend) {\n      const bounds = leftLegend.getBoundingClientRect();\n      setYTransform((prev) => prev - bounds.height / 2);\n    }\n  }, [leftLegend]);\n\n  return (\n    <g transform={`translate(8,${yTransform})`} ref={setLeftLegend}>\n      {colorScale.domain().map((domainValue, i) => (\n        <g key={domainValue} className=\"tick\" transform={`translate(0,${i * 30})`}>\n          <LegendItem domainValue={domainValue} />\n        </g>\n      ))}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBb;AApBV,mBAA6D;AAC7D,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,YAAY,aAAa,gBAAgB,YAAY,cAAc,QAAI,yBAAW,gCAAY;AAEtG,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,cAAc,IAAI,eAAe,GAAG;AAEjF,oCAAgB,MAAM;AACpB,QAAI,YAAY;AACd,YAAM,SAAS,WAAW,sBAAsB;AAChD,oBAAc,CAAC,SAAS,OAAO,OAAO,SAAS,CAAC;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SACE,4CAAC,OAAE,WAAW,eAAe,eAAe,KAAK,eAC9C,qBAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,4CAAC,OAAoB,WAAU,QAAO,WAAW,eAAe,IAAI,OAClE,sDAAC,gCAAW,aAA0B,KADhC,WAER,CACD,GACH;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useState, useEffect } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const LeftLegend = () => {\n  const {\n    originalSeries: series,\n    leftLegendHeight,\n    innerHeight,\n    internalMargin,\n    leftLegend,\n    setLeftLegend,\n  } = useContext(ChartContext);\n\n  const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);\n  useEffect(() => {\n    setYTransform(innerHeight / 2 + internalMargin.top - leftLegendHeight / 2);\n  }, [innerHeight, internalMargin.top, leftLegend, leftLegendHeight]);\n\n  return (\n    <g transform={`translate(8,${yTransform})`} ref={setLeftLegend}>\n      {series.map((serie, i) => (\n        <g className=\"tick\" transform={`translate(0,${i * 30})`} key={serie.name}>\n          <LegendItem key={serie.name} domainValue={serie.name} />\n        </g>\n      ))}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBb;AAvBV,mBAAuD;AACvD,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,aAAa,MAAM;AAC9B,QAAM;AAAA,IACJ,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,cAAc,IAAI,eAAe,GAAG;AACjF,8BAAU,MAAM;AACd,kBAAc,cAAc,IAAI,eAAe,MAAM,mBAAmB,CAAC;AAAA,EAC3E,GAAG,CAAC,aAAa,eAAe,KAAK,YAAY,gBAAgB,CAAC;AAElE,SACE,4CAAC,OAAE,WAAW,eAAe,eAAe,KAAK,eAC9C,iBAAO,IAAI,CAAC,OAAO,MAClB,4CAAC,OAAE,WAAU,QAAO,WAAW,eAAe,IAAI,OAChD,sDAAC,gCAA4B,aAAa,MAAM,QAA/B,MAAM,IAA+B,KADM,MAAM,IAEpE,CACD,GACH;AAEJ;",
   "names": []
 }