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/cjs/graphs/Chart/config/useScales.js.map CHANGED Viewed

@@ -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 { 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", "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 { 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAqC;AACrC,gBAAmH;AAEnH,qBAAgC;AAChC,yBAA6B;AAetB,MAAM,YAAY,CAAC,EAAE,OAAO,aAAa,YAAY,aAAa,aAAa,eAAe,MAAiB;AACpH,QAAM,EAAE,QAAQ,OAAO,OAAO,QAAQ,QAAQ,eAAe,QAAQ,IAAI;AAGzE,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,QAAM,eAAe,cAAc,UAAU,iBAAiB;AAC9D,QAAM,gBAAgB,eAAe,UAAU,iBAAiB;AAEhE,QAAM,oBAAgB;AAAA,IACpB,CAAC,SAAyB,KAAK,QAAQ,CAAC,GAAG,OAAO,GAAG,KAAK,IAAI,CAAC,GAAG,MAAM,EAAE,SAAS,CAAC,CAAC;AAAA,IACrF,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAsB,eAAiC;AAItD,YAAM,QAAQ,MAAM,cAAc,IAAI;AACtC,YAAM,OAAO,YACV,OAAO,CAAC,UAAU;AACjB,YAAI,MAAM,UAAU,YAAY;AAC9B,iBAAO;AAAA,QACT;AACA,YAAI,CAAC,MAAM,SAAS,CAAC,KAAK,GAAG,EAAE,SAAS,UAAU,GAAG;AACnD,iBAAO;AAAA,QACT;AACA,eAAO;AAAA,MACT,CAAC,EACA;AAAA,QAAI,CAAC,UACJ,MAAM,KACH,OAAO,CAAC,UAAU,MAAM,UAAU,IAAI,EACtC,IAAI,CAAC,UAAU;AACd,cAAI,OAAO,MAAM,UAAU,UAAU;AACnC,mBAAO,MAAM;AAAA,UACf;AAEA,iBAAO,MAAM,MAAM,eAAe,OAAO,MAAM;AAAA,QACjD,CAAC;AAAA,MACL;AACF,YAAM,gBAAgB,KAAK,KAAK;AAChC,YAAM,qBAAqB,YAAY,KAAK;AAC5C,YAAM,qBAAiB,eAAI,oBAAoB,CAAC,cAAU,eAAI,OAAO,CAAC,aAAa,SAAS,EAAE,CAAC;AAC/F,YAAM,qBAAiB,eAAI,oBAAoB,CAAC,cAAU,eAAI,OAAO,CAAC,aAAa,SAAS,EAAE,CAAC;AAC/F,YAAM,cAAU,eAAI,aAAa;AACjC,YAAM,cAAU,eAAI,aAAa;AACjC,YAAM,QAAQ,CAAC,UAAU,QAAQ;AAEjC,YAAM,SAAS,MAAM;AACnB,cAAM,MAAM,CAAC;AACb,YAAI,OAAO,UAAU;AAAU,cAAI,KAAK,KAAK;AAC7C,YAAI,MAAM,SAAS,OAAO,OAAO;AAAG,cAAI,KAAK,OAAO;AACpD,YAAI,OAAO,mBAAmB;AAAU,cAAI,KAAK,cAAc;AAC/D,mBAAO,eAAI,GAAG;AAAA,MAChB;AACA,YAAM,SAAS,MAAM;AACnB,cAAM,MAAM,CAAC;AACb,YAAI,OAAO,UAAU;AAAU,cAAI,KAAK,KAAK;AAC7C,YAAI,MAAM,SAAS,OAAO,OAAO;AAAG,cAAI,KAAK,OAAO;AACpD,YAAI,OAAO,mBAAmB;AAAU,cAAI,KAAK,cAAc;AAC/D,mBAAO,eAAI,GAAG;AAAA,MAChB;AACA,YAAM,WAAW,OAAO;AACxB,YAAM,WAAW,OAAO;AAExB,UAAI,MAAM,SAAS,OAAO,QAAQ,KAAK,MAAM,SAAS,OAAO,QAAQ,GAAG;AACtE,YAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UAAU;AAEhE,gBAAM,CAAC,aAAa,YAAY,IAC9B,OAAO,KAAK,kBAAkB,WAC1B,CAAC,KAAK,eAAe,KAAK,aAAa,IACvC,KAAK,iBAAiB,CAAC,GAAG,CAAC;AAEjC,iBAAO;AAAA,YACL,YAAY,WAAW,aAAa,eAAe;AAAA,YACnD,YAAY,WAAW,aAAa,gBAAgB;AAAA,UACtD;AAAA,QACF;AAEA,YAAI,OAAO,aAAa,YAAY,OAAO,aAAa;AAAU,iBAAO,CAAC,UAAU,QAAQ;AAAA,MAC9F;AACA,aAAO,CAAC;AAAA,IACV;AAAA,IACA,CAAC,aAAa,WAAW;AAAA,EAC3B;AAEA,QAAM,eAAe,CAAC,QAAgB,cAAoB,oBAAS,EAAE,OAAO,MAAM,EAAE,MAAM,KAAK;AAE/F,QAAM,eAAe,CAAC,QAAkB,OAAiB,UAAU,YACjE,qBAAU,EAAE,OAAO,MAAM,EAAE,MAAM,KAAK,EAAE,QAAQ,OAAO,EAAE,aAAa,IAAI;AAC5E,QAAM,iBAAiB,CAAC,QAAkB,cAAoB,uBAAY,EAAE,OAAO,MAAM,EAAE,MAAM,KAAK;AACtG,QAAM,cAAc,CAAC,QAAkB,cAAoB,oBAAS,EAAE,OAAO,MAAM,EAAE,MAAM,KAAK;AAEhG,QAAM,aAAS,sBAAQ,MAAM;AAC3B,QAAI,OAAO,SAAS;AAAQ,aAAO,aAAa,gBAAgB,OAAO,GAAG,GAAG,CAAC,GAAG,YAAY,CAAC;AAC9F,QAAI,OAAO,SAAS,YAAY,OAAO,SAAS,QAAQ;AACtD,aAAO,eAAe,gBAAgB,OAAO,GAAG,GAAG,CAAC,GAAG,YAAY,CAAC;AAAA,IACtE;AAEA,WAAO,aAAa,cAAc,KAAK,GAAG,CAAC,GAAG,YAAY,CAAC;AAAA,EAC7D,GAAG,CAAC,eAAe,iBAAiB,cAAc,OAAO,OAAO,IAAI,CAAC;AAErE,QAAM,aAAS,sBAAQ,MAAM;AAC3B,QAAI,OAAO,SAAS;AAAQ,aAAO,aAAa,cAAc,KAAK,GAAG,CAAC,GAAG,aAAa,CAAC;AACxF,QAAI,OAAO,SAAS;AAAO,aAAO,YAAY,gBAAgB,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,CAAC;AAC7F,WAAO,eAAe,gBAAgB,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,CAAC;AAAA,EACvE,GAAG,CAAC,eAAe,iBAAiB,eAAe,KAAK,CAAC;AAEzD,QAAM,cAAU,sBAAQ,MAAM;AAC5B,QAAI,CAAC;AAAQ,aAAO;AACpB,QAAI,QAAQ,SAAS;AAAQ,aAAO,aAAa,cAAc,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC;AACxF,QAAI,QAAQ,SAAS;AAAO,aAAO,YAAY,gBAAgB,QAAQ,IAAI,GAAG,CAAC,aAAa,CAAC,CAAC;AAC9F,WAAO,eAAe,gBAAgB,QAAQ,IAAI,GAAG,CAAC,aAAa,CAAC,CAAC;AAAA,EACvE,GAAG,CAAC,eAAe,iBAAiB,aAAa,MAAM,CAAC;AAExD,QAAM,iBAAa;AAAA,IACjB,UACE,wBAAa,EACV,OAAO,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,EAChC,MAAM,OAAO,IAAI,CAAC,MAAM,gCAAa,EAAE,UAAuC,EAAE,KAAK,CAAC,EACtF,QAAQ,KAAK;AAAA,IAClB,CAAC,MAAM;AAAA,EACT;AAGA,QAAM,wBAAoB;AAAA,IACxB,MACE,YACG;AAAA,MACC,CAAC,UACC,MAAM,SAAS,SAAS,EAAE,eAAe,cAAU,gCAAgB,eAAe,MAAM,IAAI,IAAI;AAAA,IACpG,EACC,IAAI,CAAC,UAAU,MAAM,IAAI;AAAA,IAC9B,CAAC,aAAa,aAAa;AAAA,EAC7B;AAEA,QAAM,mBAAe,0BAAY,MAAM;AACrC,SAAK,MAAM,SAAS,UAAa,MAAM,SAAS,WAAW,MAAM,SAAS,QAAQ;AAChF,aAAQ,OAA6B,UAAU;AAAA,IACjD;AACA,QAAI,MAAM,SAAS,QAAQ;AACzB,aAAQ,OAA6B,UAAU;AAAA,IACjD;AAEA,WAAO,aAAc,OAA8C,MAAM,EAAE,SAAS;AAAA,EACtF,GAAG,CAAC,YAAY,MAAM,MAAM,QAAQ,MAAM,MAAM,MAAM,CAAC;AAEvD,MAAI,eAAe,QAAQ;AACzB,kBAAc,QAAQ,CAAC,GAAG,MAAM,kBAAkB,KAAK,gBAAgB,GAAG,CAAC;AAAA,EAC7E;AAEA,QAAM,oBAAgB;AAAA,IACpB,MACE,aAAa,QACT,qBAAU,EACP,OAAO,iBAAiB,EACxB,MAAM,CAAC,GAAG,aAAa,KAAK,CAAC,CAAC,EAC9B,aAAa,IAAI,EACjB,QAAQ,GAAG,EACX,aAAa,IAAI,IACpB;AAAA,IACN,CAAC,cAAc,iBAAiB;AAAA,EAClC;AAEA,SAAO,EAAE,QAAQ,SAAS,QAAQ,eAAe,YAAY,aAAa;AAC5E;",
   "names": []
 }

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

@@ -65,7 +65,7 @@ const stackData = (groupsStacked, series) => {
         };
       });
     });
-    allSeriesStackedByGroups.push((0, import_d3.stack)().keys(keys)(stackedData));
+    allSeriesStackedByGroups.push((0, import_d3.stack)().offset(import_d3.stackOffsetDiverging).keys(keys)(stackedData));
   });
   return allSeriesStackedByGroups;
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/helpers/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gBAAkD;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,SAAK,iBAAM,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 { 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gBAAwE;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,SAAK,iBAAM,EAAE,OAAO,8BAAoB,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/cjs/graphs/Chart/helpers/useUniqueData.js CHANGED Viewed

@@ -66,7 +66,9 @@ const useUniqueData = () => {
             position: xScale(x),
             name: serie.name,
             xValue: x,
-            yValue: y
+            yValue: y,
+            key: datum.position,
+            datum
           };
         })
       ).flat(1);
@@ -79,7 +81,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);
     }
@@ -92,7 +96,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 };
     });
@@ -108,17 +112,6 @@ 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]);
 };
 //# sourceMappingURL=useUniqueData.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/helpers/useUniqueData.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -41,12 +41,10 @@ var import_Scrapper = require("../Scrapper/Scrapper");
 var import_VerticalScrapper = require("../Scrapper/VerticalScrapper");
 const Axes = () => {
   const {
-    containerRatio,
-    props: { scrapper, xAxis, yAxis }
+    props: { scrapper, xAxis, yAxis, xScroll }
   } = (0, import_react.useContext)(import_ChartContext.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisRight.AxisRight, {}),

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

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

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

@@ -42,6 +42,7 @@ const AxisBottom = import_react.default.memo(() => {
     innerWidth,
     containerRatio,
     internalMargin,
+    isHorizontal,
     setAxisBottomRef
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const axisRef = (0, import_react.useRef)(null);
@@ -62,7 +63,7 @@ const AxisBottom = import_react.default.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);
@@ -89,7 +90,7 @@ const AxisBottom = import_react.default.memo(() => {
       const axisNode = (0, import_d3.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)
@@ -110,7 +111,8 @@ const AxisBottom = import_react.default.memo(() => {
     innerWidth,
     uniqueData.length,
     uniqueData,
-    internalMargin.left
+    internalMargin.left,
+    isHorizontal
   ]);
   if (xAxis.hideAxis)
     return null;

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

@@ -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 { 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", "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 { 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -36,11 +36,12 @@ var import_ChartContext = require("../../ChartContext");
 var import_helpers = require("../../helpers");
 const AxisLeft = () => {
   const {
-    props: { yAxis, height },
+    props: { yAxis },
     innerHeight,
     innerWidth,
     yScale,
     chartId,
+    height,
     setAxisLeftRef
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const ref = (0, import_react.useRef)(null);
@@ -48,6 +49,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;
+  (0, import_react.useEffect)(() => {
+  });
   (0, import_react.useEffect)(() => {
     const axis = (0, import_d3.axisLeft)(yScale).tickSizeOuter(0);
     const grid = (0, import_d3.axisLeft)(yScale).tickFormat((_) => "").tickSize(showGrid ? -innerWidth : 0).tickSizeOuter(0);

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

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

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

@@ -37,15 +37,24 @@ var import_Legend = require("./Legend/Legend");
 var import_Label = require("./Labels/Label");
 var import_BlurMask = require("./Scroller/BlurMask");
 var import_ClipPaths = require("./ClipPaths");
-var import_Axes = require("./Axis/Axes");
+var import_ScrollableContainerX = require("./Scroller/ScrollableContainerX");
+var import_ScrollableContainerY = require("./Scroller/ScrollableContainerY");
+var import_AxisBottom = require("./Axis/AxisBottom");
+var import_AxisRight = require("./Axis/AxisRight");
+var import_AxisLeft = require("./Axis/AxisLeft");
+var import_SeriesFactory = require("./SeriesFactory");
+var import_Scrapper = require("./Scrapper/Scrapper");
+var import_VerticalScrapper = require("./Scrapper/VerticalScrapper");
+var import_Controllers = require("./Scroller/Controllers");
 const ChartContainer = () => {
   const {
-    props: { width, height, xAxis, yAxis },
+    props: { yAxis, xScroll, scrapper, xAxis },
     containerRef,
     activePoint,
     internalMargin,
     setScrapperPosY,
     setScrapperPosX,
+    setContainerRef,
     svgRef,
     isGrabbed,
     setIsGrabbed,
@@ -56,13 +65,12 @@ const ChartContainer = () => {
     setXScrollbarPosition,
     xScrollbarPosition,
     containerRatio,
-    oldLastPosition,
+    lastPosition,
     setIsScrollbarVisible,
-    chartId,
-    yScale,
+    width,
+    height,
     currentData
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;
   const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
   const { onInputKeyDown, handleOnBlur, handleOnFocus } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
   const onMouseEnterHandler = (0, import_react.useCallback)(() => {
@@ -80,7 +88,7 @@ const ChartContainer = () => {
         return;
       setActivePoint(null);
       if (xScroll) {
-        const newPosition = oldLastPosition?.current + e.clientX - startPosition;
+        const newPosition = lastPosition?.current + e.clientX - startPosition;
         if (newPosition < 0)
           setXScrollbarPosition(0);
         else if (newPosition > innerWidth - innerWidth / containerRatio)
@@ -89,7 +97,7 @@ const ChartContainer = () => {
           setXScrollbarPosition(newPosition);
       }
       if (yScroll) {
-        const newPosition = oldLastPosition?.current + e.clientY - startPosition;
+        const newPosition = lastPosition?.current + e.clientY - startPosition;
         if (newPosition < 0)
           setXScrollbarPosition(0);
         else if (newPosition > innerHeight - innerHeight / containerRatio)
@@ -103,7 +111,7 @@ const ChartContainer = () => {
       setActivePoint,
       xScroll,
       yScroll,
-      oldLastPosition,
+      lastPosition,
       startPosition,
       setXScrollbarPosition,
       innerWidth,
@@ -112,24 +120,46 @@ const ChartContainer = () => {
     ]
   );
   const handleMouseUp = (0, import_react.useCallback)(() => {
-    oldLastPosition.current = xScrollbarPosition;
+    lastPosition.current = xScrollbarPosition;
     setIsGrabbed(false);
-  }, [oldLastPosition, setIsGrabbed, xScrollbarPosition]);
+  }, [lastPosition, setIsGrabbed, xScrollbarPosition]);
   const key = (0, import_react.useMemo)(
-    () => `translate(${internalMargin.left},${internalMargin.top},${internalMargin.right})`,
-    [internalMargin]
+    () => `translate(${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom})`,
+    [internalMargin, width]
   );
-  (0, import_react.useEffect)(() => {
-    containerRef?.current?.addEventListener("mousemove", handleMouseMove);
-    const container = containerRef?.current;
-    return () => {
-      container?.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, [containerRef, handleMouseMove]);
   if (currentData.length === 0)
     return null;
+  const render = (0, import_react.useMemo)(() => {
+    if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisRight.AxisRight, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisLeft.AxisLeft, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollableContainerX.ScrollableContainerX, {})
+        ]
+      });
+    }
+    if (yScroll) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisBottom.AxisBottom, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollableContainerY.ScrollableContainerY, {})
+        ]
+      });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisRight.AxisRight, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisLeft.AxisLeft, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisBottom.AxisBottom, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesFactory.SeriesFactory, {}),
+        scrapper?.type === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Scrapper.Scrapper, {}) : null,
+        scrapper?.type === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VerticalScrapper.VerticalScrapper, {}) : null
+      ]
+    });
+  }, [scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, yScroll]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSVGWrapper, {
-    ref: containerRef,
+    ref: setContainerRef,
     onKeyDown: onInputKeyDown,
     "aria-hidden": "true",
     tabIndex: activePoint ? -1 : 0,
@@ -137,20 +167,22 @@ const ChartContainer = () => {
     onFocus: handleOnFocus,
     onMouseEnter: onMouseEnterHandler,
     onMouseLeave: onMouseLeaveHandler,
+    onMouseMove: handleMouseMove,
     onMouseUp: handleMouseUp,
     onMouseDown: (e) => e.preventDefault(),
     isGrabbed,
-    style: { width },
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+    children: width !== 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
       ref: svgRef,
       width,
       height,
       children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ClipPaths.ClipPaths, {}),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BlurMask.BlurMask, {}),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
               children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Controllers.Controllers, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Legend.Legend, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Label.Label, {})
               ]
@@ -158,13 +190,12 @@ const ChartContainer = () => {
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
               className: "container",
               transform: `translate(${internalMargin.left},${internalMargin.top})`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Axes.Axes, {})
+              children: render
             })
           ]
-        }, key),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ClipPaths.ClipPaths, {})
+        }, key)
       ]
-    })
+    }) : null
   });
 };
 //# sourceMappingURL=ChartContainer.js.map

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

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