npm - @elliemae/ds-dataviz - Versions diffs - 3.9.0 → 3.10.0-next.0 - Mend

@elliemae/ds-dataviz 3.9.0 → 3.10.0-next.0

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

Files changed (157) hide show

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

@@ -32,20 +32,18 @@ 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,
-  groups,
-  containerRatio
-}) => {
-  const { series, xAxis, yAxis, y2Axis, groups: stackedSeries, types } = props;
-  const rangeTo = innerWidth * (containerRatio ?? 1);
-  const getBandDomain = (0, import_react.useCallback)((axis) => axis.cols ?? [...series[0].data.keys()], [series]);
+const useScales = ({ props, innerHeight, innerWidth, stackedData, currentData, containerRatio }) => {
+  const { series, xAxis, yAxis, y2Axis, groups: stackedSeries } = props;
+  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;
+  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
+  const rangeToWidth = innerWidth * (xScroll ? containerRatio : 1);
+  const rangeToHeight = innerHeight * (yScroll ? containerRatio : 1);
+  const getBandDomain = (0, import_react.useCallback)(
+    (axis) => axis.cols ?? [...series[0].data.map((_, i) => i.toString())],
+    [series]
+  );
   const getLinearDomain = (0, import_react.useCallback)(
-    (axis, axisString, withStackData = true) => {
+    (axis, axisString) => {
       const begin = axis?.beginAtZero ? 0 : void 0;
       const data = currentData.filter((serie) => {
         if (serie.scale === axisString) {
@@ -60,23 +58,50 @@ const useScales = ({
           if (typeof datum.value === "number") {
             return datum.value;
           }
-          return datum.value[axisString];
+          return datum.value[axisString === "y2" ? "y" : axisString];
         })
       );
-      const stack = withStackData && [
-        (0, import_d3.min)(stackedData.flat(), (layer) => (0, import_d3.min)(layer, (sequence) => sequence[1])),
-        (0, import_d3.max)(stackedData.flat(), (layer) => (0, import_d3.max)(layer, (sequence) => sequence[1]))
-      ];
-      const minRange = (0, import_d3.min)([begin, (0, import_d3.min)(data.flat()), stack[0]]);
-      const maxRange = (0, import_d3.max)([begin, (0, import_d3.max)(data.flat()), stack[1]]);
-      const [leftPadding, rightPadding] = typeof axis.domainPadding === "number" ? [axis.domainPadding, axis.domainPadding] : axis.domainPadding ?? [0, 0];
-      if (axis.type === "time") {
-        return [minRange, maxRange];
+      const dataFlattened = data.flat();
+      const stackedDataFlatten = stackedData.flat();
+      const minStackedData = (0, import_d3.min)(stackedDataFlatten, (layer) => (0, import_d3.min)(layer, (sequence) => sequence[0]));
+      const maxStackedData = (0, import_d3.max)(stackedDataFlatten, (layer) => (0, import_d3.max)(layer, (sequence) => sequence[1]));
+      const minData = (0, import_d3.min)(dataFlattened);
+      const maxData = (0, import_d3.max)(dataFlattened);
+      const types = ["number", "object"];
+      const getMin = () => {
+        const aux = [];
+        if (typeof begin === "number")
+          aux.push(begin);
+        if (types.includes(typeof minData))
+          aux.push(minData);
+        if (typeof minStackedData === "number")
+          aux.push(minStackedData);
+        return (0, import_d3.min)(aux);
+      };
+      const getMax = () => {
+        const aux = [];
+        if (typeof begin === "number")
+          aux.push(begin);
+        if (types.includes(typeof maxData))
+          aux.push(maxData);
+        if (typeof maxStackedData === "number")
+          aux.push(maxStackedData);
+        return (0, import_d3.max)(aux);
+      };
+      const minRange = getMin();
+      const maxRange = getMax();
+      if (types.includes(typeof minRange) && types.includes(typeof maxRange)) {
+        if (typeof minRange === "number" && typeof maxRange === "number") {
+          const [leftPadding, rightPadding] = typeof axis.domainPadding === "number" ? [axis.domainPadding, axis.domainPadding] : axis.domainPadding ?? [0, 0];
+          return [
+            minRange - (maxRange - minRange) * (leftPadding ?? 0),
+            maxRange + (maxRange - minRange) * (rightPadding ?? 0)
+          ];
+        }
+        if (typeof minRange === "object" && typeof maxRange === "object")
+          return [minRange, maxRange];
       }
-      return [
-        minRange - (maxRange - minRange) * (leftPadding ?? 0),
-        maxRange + (maxRange - minRange) * (rightPadding ?? 0)
-      ];
+      return [];
     },
     [currentData, stackedData]
   );
@@ -86,31 +111,30 @@ const useScales = ({
   const getScaleLog = (domain, range) => (0, import_d3.scaleLog)().domain(domain).range(range);
   const xScale = (0, import_react.useMemo)(() => {
     if (xAxis?.type === "time")
-      return getScaleTime(getLinearDomain(xAxis, "x", false), [0, rangeTo]);
+      return getScaleTime(getLinearDomain(xAxis, "x"), [0, rangeToWidth]);
     if (xAxis?.type === "linear" || yAxis?.type === "band") {
-      const withStackData = yAxis?.type === "band";
-      return getScaleLinear(getLinearDomain(xAxis, "x", withStackData), [0, rangeTo], xAxis.padding);
+      return getScaleLinear(getLinearDomain(xAxis, "x"), [0, rangeToWidth]);
     }
-    return getScaleBand(getBandDomain(xAxis), [0, rangeTo], xAxis.padding);
-  }, [getBandDomain, getLinearDomain, rangeTo, xAxis, yAxis?.type]);
+    return getScaleBand(getBandDomain(xAxis), [0, rangeToWidth]);
+  }, [getBandDomain, getLinearDomain, rangeToWidth, xAxis, yAxis?.type]);
   const yScale = (0, import_react.useMemo)(() => {
     if (yAxis?.type === "band")
-      return getScaleBand(getBandDomain(yAxis), [innerHeight, 0], yAxis.padding);
+      return getScaleBand(getBandDomain(yAxis), [0, rangeToHeight]);
     if (yAxis?.type === "log")
-      return getScaleLog(getLinearDomain(yAxis, "y"), [innerHeight, 0]);
-    return getScaleLinear(getLinearDomain(yAxis, "y"), [innerHeight, 0]);
-  }, [getBandDomain, getLinearDomain, innerHeight, yAxis]);
+      return getScaleLog(getLinearDomain(yAxis, "y"), [rangeToHeight, 0]);
+    return getScaleLinear(getLinearDomain(yAxis, "y"), [rangeToHeight, 0]);
+  }, [getBandDomain, getLinearDomain, rangeToHeight, yAxis]);
   const y2Scale = (0, import_react.useMemo)(() => {
     if (!y2Axis)
       return null;
     if (y2Axis?.type === "band")
-      return getScaleBand(getBandDomain(y2Axis), [innerHeight, 0], y2Scale.padding);
+      return getScaleBand(getBandDomain(y2Axis), [0, innerHeight]);
     if (y2Axis?.type === "log")
       return getScaleLog(getLinearDomain(y2Axis, "y2"), [innerHeight, 0]);
     return getScaleLinear(getLinearDomain(y2Axis, "y2"), [innerHeight, 0]);
   }, [getBandDomain, getLinearDomain, innerHeight, y2Axis]);
   const colorScale = (0, import_react.useMemo)(
-    () => (0, import_d3.scaleOrdinal)().domain(series.map((d) => d.name)).range(series.map((d) => import_colorPallet.COLOR_PALLET[d.color] ?? d.color)),
+    () => (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)(
@@ -120,12 +144,14 @@ const useScales = ({
     [currentData, stackedSeries]
   );
   const getBandwidth = (0, import_react.useCallback)(() => {
-    if (xScale.bandwidth)
+    if ((xAxis.type === void 0 || xAxis.type === "band") && yAxis.type !== "band") {
       return xScale.bandwidth();
-    if (yScale.bandwidth)
+    }
+    if (yAxis.type === "band") {
       return yScale.bandwidth();
+    }
     return innerWidth / xScale.ticks().length / 2;
-  }, [innerWidth, xScale, yScale]);
+  }, [innerWidth, xAxis.type, xScale, yAxis.type, yScale]);
   if (stackedSeries?.length) {
     stackedSeries.forEach((_, i) => subgroupsWithBars.push(`stacked-data-${i}`));
   }

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 max-statements */\n/* eslint-disable indent */\nimport { useMemo, useCallback } from 'react';\nimport { max, min, 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: {\n    key: string;\n    group: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string;\n    color: string;\n    data: {\n      key: string;\n      value: number | { x: number; y: number };\n      position: number;\n    }[];\n  }[];\n  groups: string[];\n}\nexport const useScales = ({\n  props,\n  innerHeight,\n  innerWidth,\n  stackedData,\n  currentData,\n  groups,\n  containerRatio,\n}: UseScales) => {\n  const { series, xAxis, yAxis, y2Axis, groups: stackedSeries, types } = props;\n\n  const rangeTo = innerWidth * (containerRatio ?? 1);\n  const getBandDomain = useCallback((axis: DSChartT.AxisT) => axis.cols ?? [...series[0].data.keys()], [series]);\n\n  const getLinearDomain = useCallback(\n    (axis?: DSChartT.AxisT, axisString?: string, withStackData = true) => {\n      // const data2 = data ? extent(data) : [];\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(\n          (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                return datum.value[axisString];\n              }),\n\n          // ? serie.data.map((datum) => datum.value).flat()\n          // : serie.data.map((datum) => datum.value.map((coord) => coord[axisString]).flat()),\n        );\n\n      const stack = withStackData && [\n        min(stackedData.flat(), (layer) => min(layer, (sequence) => sequence[1])),\n        max(stackedData.flat(), (layer) => max(layer, (sequence) => sequence[1])),\n      ];\n      const minRange = min([begin, min(data.flat()), stack[0]]);\n      const maxRange = max([begin, max(data.flat()), stack[1]]);\n\n      // @TODO fix this\n      const [leftPadding, rightPadding] =\n        typeof axis.domainPadding === 'number'\n          ? [axis.domainPadding, axis.domainPadding]\n          : axis.domainPadding ?? [0, 0];\n\n      if (axis.type === 'time') {\n        // @todo padding for time series\n        return [minRange, maxRange];\n      }\n      return [\n        minRange - (maxRange - minRange) * (leftPadding ?? 0),\n        maxRange + (maxRange - minRange) * (rightPadding ?? 0),\n      ];\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', false), [0, rangeTo]);\n    if (xAxis?.type === 'linear' || yAxis?.type === 'band') {\n      // @TODO is this really a thing ?\n      const withStackData = yAxis?.type === 'band';\n      return getScaleLinear(getLinearDomain(xAxis, 'x', withStackData) as number[], [0, rangeTo], xAxis.padding);\n    }\n\n    return getScaleBand(getBandDomain(xAxis) as string[], [0, rangeTo], xAxis.padding);\n  }, [getBandDomain, getLinearDomain, rangeTo, xAxis, yAxis?.type]);\n\n  const yScale = useMemo(() => {\n    if (yAxis?.type === 'band') return getScaleBand(getBandDomain(yAxis), [innerHeight, 0], yAxis.padding);\n    if (yAxis?.type === 'log') return getScaleLog(getLinearDomain(yAxis, 'y'), [innerHeight, 0]);\n    return getScaleLinear(getLinearDomain(yAxis, 'y'), [innerHeight, 0]);\n  }, [getBandDomain, getLinearDomain, innerHeight, yAxis]);\n\n  const y2Scale = useMemo(() => {\n    if (!y2Axis) return null;\n    if (y2Axis?.type === 'band') return getScaleBand(getBandDomain(y2Axis), [innerHeight, 0], y2Scale.padding);\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] ?? d.color)),\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 ((xScale as ScaleBand<string>).bandwidth) return (xScale as ScaleBand<string>).bandwidth();\n    if ((yScale as ScaleBand<string>).bandwidth) return (yScale as ScaleBand<string>).bandwidth();\n    return innerWidth / xScale.ticks().length / 2;\n  }, [innerWidth, xScale, 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 } = 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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",
   "names": []
 }

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

@@ -30,7 +30,7 @@ module.exports = __toCommonJS(colorPallet_exports);
 var React = __toESM(require("react"));
 const COLOR_PALLET = {
   "blue-100": "#1E79C2",
-  "blue-200": "#1E79C2",
+  "blue-200": "#165A91",
   "blue-400": "#10426A",
   "magenta-100": "#CA3981",
   "magenta-200": "#832553",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/helpers/colorPallet.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const COLOR_PALLET = {\n  'blue-100': '#1E79C2',\n  'blue-200': '#1E79C2',\n  'blue-400': '#10426A',\n  'magenta-100': '#CA3981',\n  'magenta-200': '#832553',\n  'magenta-400': '#6E1F46',\n  'orange-100': '#B25119',\n  'orange-200': '#853C12',\n  'orange-400': '#612C0D',\n  'purple-100': '#8E49B2',\n  'purple-200': '#61327A',\n  'purple-400': '#4D2861',\n  'green-100': '#007A78',\n  'green-200': '#005B59',\n  'green-400': '#004241',\n  'grey-100': '#697489',\n  'grey-200': '#4E5666',\n  'grey-400': '#323842',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["export const COLOR_PALLET = {\n  'blue-100': '#1E79C2',\n  'blue-200': '#165A91',\n  'blue-400': '#10426A',\n  'magenta-100': '#CA3981',\n  'magenta-200': '#832553',\n  'magenta-400': '#6E1F46',\n  'orange-100': '#B25119',\n  'orange-200': '#853C12',\n  'orange-400': '#612C0D',\n  'purple-100': '#8E49B2',\n  'purple-200': '#61327A',\n  'purple-400': '#4D2861',\n  'green-100': '#007A78',\n  'green-200': '#005B59',\n  'green-400': '#004241',\n  'grey-100': '#697489',\n  'grey-200': '#4E5666',\n  'grey-400': '#323842',\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AACd;",
   "names": []
 }

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

@@ -59,10 +59,10 @@ const stackData = (groupsStacked, series) => {
     const stackedData = [];
     seriesFilteredByStackGroup.forEach((serie) => {
       serie.data.forEach((d, i) => {
-        if (typeof stackedData[i] === "object") {
-          stackedData[i][serie.name] = typeof d.value === "number" ? d.value : d.value.y;
-        }
-        stackedData[i] = { ...stackedData[i], [serie.name]: typeof d.value === "number" ? d.value : d.value.y };
+        stackedData[d.position] = {
+          ...stackedData[d.position],
+          [serie.name]: typeof d.value === "number" ? d.value : d.value?.y || 0
+        };
       });
     });
     allSeriesStackedByGroups.push((0, import_d3.stack)().keys(keys)(stackedData));

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 } 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) => {\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\nexport const stackData = (groupsStacked: string[][] | undefined, series: DSChartT.InternalData) => {\n  const allSeriesStackedByGroups = [];\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<{ [key: string]: number }> = [];\n    seriesFilteredByStackGroup.forEach((serie) => {\n      serie.data.forEach((d, i) => {\n        if (typeof stackedData[i] === 'object') {\n          stackedData[i][serie.name] = typeof d.value === 'number' ? d.value : d.value.y;\n        }\n        stackedData[i] = { ...stackedData[i], [serie.name]: typeof d.value === 'number' ? d.value : d.value.y };\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,gBAA0C;AAGnC,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,UAAU;AACpD,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;AAEO,MAAM,YAAY,CAAC,eAAuC,WAAkC;AACjG,QAAM,2BAA2B,CAAC;AAClC,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,cAAgD,CAAC;AACvD,+BAA2B,QAAQ,CAAC,UAAU;AAC5C,YAAM,KAAK,QAAQ,CAAC,GAAG,MAAM;AAC3B,YAAI,OAAO,YAAY,OAAO,UAAU;AACtC,sBAAY,GAAG,MAAM,QAAQ,OAAO,EAAE,UAAU,WAAW,EAAE,QAAQ,EAAE,MAAM;AAAA,QAC/E;AACA,oBAAY,KAAK,EAAE,GAAG,YAAY,IAAI,CAAC,MAAM,OAAO,OAAO,EAAE,UAAU,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE;AAAA,MACxG,CAAC;AAAA,IACH,CAAC;AAED,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, 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;",
   "names": []
 }

package/dist/cjs/graphs/Chart/helpers/useUniqueData.js ADDED Viewed

@@ -0,0 +1,124 @@
+"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 useUniqueData_exports = {};
+__export(useUniqueData_exports, {
+  useUniqueData: () => useUniqueData
+});
+module.exports = __toCommonJS(useUniqueData_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_ChartContext = require("../ChartContext");
+const useUniqueData = () => {
+  const {
+    props: { xAxis },
+    currentData: data,
+    xScale,
+    getBandwidth,
+    xScrollbarPosition,
+    containerRatio,
+    innerWidth,
+    getXValue,
+    getYValue
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  function compare(a, b) {
+    if (a.xPosition < b.xPosition) {
+      return -1;
+    }
+    if (a.xPosition > b.xPosition) {
+      return 1;
+    }
+    return 0;
+  }
+  const isBandAxis = !!xScale.bandwidth;
+  return (0, import_react.useMemo)(() => {
+    let valueToPositionPerSeries;
+    if (isBandAxis) {
+      valueToPositionPerSeries = data.map(
+        (serie) => serie.data.filter((datum) => {
+          const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);
+          return xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) && xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth;
+        }).map((datum) => {
+          const x = getXValue(datum);
+          const y = getYValue(datum);
+          return {
+            position: xScale(x),
+            name: serie.name,
+            xValue: x,
+            yValue: y
+          };
+        })
+      ).flat(1);
+    } else {
+      valueToPositionPerSeries = data.map(
+        (serie) => serie.data.filter((datum) => {
+          const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);
+          return xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) && xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth;
+        }).map((datum) => ({
+          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
+        }))
+      ).flat(1);
+    }
+    const postionUniqueData = {};
+    valueToPositionPerSeries.forEach((set) => {
+      if (postionUniqueData[[set.position]]) {
+        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];
+      } else {
+        postionUniqueData[[set.position]] = [{ ...set }];
+      }
+    });
+    const postionUniqueDataArray = Object.keys(postionUniqueData).map((key) => {
+      const xPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);
+      const datum = postionUniqueData[key];
+      return { xPosition, datum, xValue: datum[0].xValue };
+    });
+    if (isBandAxis) {
+      return postionUniqueDataArray;
+    }
+    return postionUniqueDataArray.sort(compare).map((line, i, array) => {
+      const prevPoint = parseFloat(array[i - 1]?.xPosition ?? 0);
+      const postPoint = parseFloat(array[i + 1]?.xPosition ?? 0);
+      const rectDetector = {
+        left: (line.xPosition - prevPoint) / 2,
+        right: Math.abs((postPoint === 0 ? 0 : postPoint - line.xPosition) / 2)
+      };
+      return { ...line, rectDetector };
+    });
+  }, [
+    isBandAxis,
+    data,
+    xScale,
+    xAxis.cols,
+    xScrollbarPosition,
+    containerRatio,
+    innerWidth,
+    getXValue,
+    getYValue,
+    getBandwidth
+  ]);
+};
+//# sourceMappingURL=useUniqueData.js.map

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

@@ -0,0 +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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",
+  "names": []
+}

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

@@ -36,18 +36,49 @@ const useVirtualizedSeries = () => {
     innerWidth,
     xScrollbarPosition,
     xScale,
+    yScale,
+    getYValue,
     getXValue,
-    currentData: data
+    innerHeight,
+    currentData: data,
+    props: { xAxis, yAxis }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  return (0, import_react.useMemo)(
-    () => containerRatio > 1 ? data.map((serie) => ({
-      ...serie,
-      data: serie.data.filter((datum) => {
-        const xScaleValue = xScale(getXValue(datum));
-        return xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 40 * containerRatio && xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 40 * containerRatio;
-      })
-    })) : data,
-    [containerRatio, data, getXValue, innerWidth, xScale, xScrollbarPosition]
-  );
+  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;
+  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
+  return (0, import_react.useMemo)(() => {
+    if (xScroll) {
+      const offset = xScale.bandwidth?.() || 20;
+      return data.map((serie) => ({
+        ...serie,
+        data: serie.data.filter((datum) => {
+          const xScaleValue = xScale(getXValue(datum));
+          return xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) - innerWidth && xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth * 2;
+        })
+      }));
+    }
+    if (yScroll) {
+      return data.map((serie) => ({
+        ...serie,
+        data: serie.data.filter((datum) => {
+          const yScaleValue = yScale(getYValue(datum));
+          const offset = yScale.bandwidth?.() ?? 20;
+          return yScaleValue > xScrollbarPosition * (containerRatio ?? 1) - offset && yScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerHeight;
+        })
+      }));
+    }
+    return data;
+  }, [
+    containerRatio,
+    data,
+    getXValue,
+    getYValue,
+    innerHeight,
+    innerWidth,
+    xScale,
+    xScroll,
+    xScrollbarPosition,
+    yScale,
+    yScroll
+  ]);
 };
 //# sourceMappingURL=useVirtualizedSeries.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/helpers/useVirtualizedSeries.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 useVirtualizedSeries = () => {\n  const {\n    containerRatio,\n    innerWidth,\n    xScrollbarPosition,\n    xScale,\n    getXValue,\n    currentData: data,\n  } = useContext(ChartContext);\n\n  return useMemo(\n    () =>\n      containerRatio > 1\n        ? data.map((serie) => ({\n            ...serie,\n            data: serie.data.filter((datum) => {\n              const xScaleValue = xScale(getXValue(datum));\n              return (\n                xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 40 * containerRatio &&\n                xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 40 * containerRatio\n              );\n            }),\n          }))\n        : data,\n    [containerRatio, data, getXValue, innerWidth, xScale, xScrollbarPosition],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAoC;AACpC,0BAA6B;AAEtB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,EACf,QAAI,yBAAW,gCAAY;AAE3B,aAAO;AAAA,IACL,MACE,iBAAiB,IACb,KAAK,IAAI,CAAC,WAAW;AAAA,MACnB,GAAG;AAAA,MACH,MAAM,MAAM,KAAK,OAAO,CAAC,UAAU;AACjC,cAAM,cAAc,OAAO,UAAU,KAAK,CAAC;AAC3C,eACE,cAAc,sBAAsB,kBAAkB,KAAK,KAAK,kBAChE,cAAc,sBAAsB,kBAAkB,KAAK,aAAa,KAAK;AAAA,MAEjF,CAAC;AAAA,IACH,EAAE,IACF;AAAA,IACN,CAAC,gBAAgB,MAAM,WAAW,YAAY,QAAQ,kBAAkB;AAAA,EAC1E;AACF;",
+  "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 useVirtualizedSeries = () => {\n  const {\n    containerRatio,\n    innerWidth,\n    xScrollbarPosition,\n    xScale,\n    yScale,\n    getYValue,\n    getXValue,\n    innerHeight,\n    currentData: data,\n    props: { xAxis, yAxis },\n  } = useContext(ChartContext);\n\n  // @TODO until we decide if we use this internal we know which axis this way\n\n  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n  return useMemo(() => {\n    if (xScroll) {\n      const offset = xScale.bandwidth?.() || 20;\n      return data.map((serie) => ({\n        ...serie,\n        data: serie.data.filter((datum) => {\n          const xScaleValue = xScale(getXValue(datum));\n          return (\n            xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) - innerWidth &&\n            xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth * 2\n          );\n        }),\n      }));\n    }\n    if (yScroll) {\n      return data.map((serie) => ({\n        ...serie,\n        data: serie.data.filter((datum) => {\n          const yScaleValue = yScale(getYValue(datum));\n          const offset = yScale.bandwidth?.() ?? 20;\n          return (\n            yScaleValue > xScrollbarPosition * (containerRatio ?? 1) - offset &&\n            yScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerHeight\n          );\n        }),\n      }));\n    }\n    return data;\n  }, [\n    containerRatio,\n    data,\n    getXValue,\n    getYValue,\n    innerHeight,\n    innerWidth,\n    xScale,\n    xScroll,\n    xScrollbarPosition,\n    yScale,\n    yScroll,\n  ]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAoC;AACpC,0BAA6B;AAEtB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,OAAO,EAAE,OAAO,MAAM;AAAA,EACxB,QAAI,yBAAW,gCAAY;AAI3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AACtD,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,aAAO,sBAAQ,MAAM;AACnB,QAAI,SAAS;AACX,YAAM,SAAS,OAAO,YAAY,KAAK;AACvC,aAAO,KAAK,IAAI,CAAC,WAAW;AAAA,QAC1B,GAAG;AAAA,QACH,MAAM,MAAM,KAAK,OAAO,CAAC,UAAU;AACjC,gBAAM,cAAc,OAAO,UAAU,KAAK,CAAC;AAC3C,iBACE,eAAe,sBAAsB,kBAAkB,KAAK,cAC5D,eAAe,sBAAsB,kBAAkB,KAAK,aAAa;AAAA,QAE7E,CAAC;AAAA,MACH,EAAE;AAAA,IACJ;AACA,QAAI,SAAS;AACX,aAAO,KAAK,IAAI,CAAC,WAAW;AAAA,QAC1B,GAAG;AAAA,QACH,MAAM,MAAM,KAAK,OAAO,CAAC,UAAU;AACjC,gBAAM,cAAc,OAAO,UAAU,KAAK,CAAC;AAC3C,gBAAM,SAAS,OAAO,YAAY,KAAK;AACvC,iBACE,cAAc,sBAAsB,kBAAkB,KAAK,UAC3D,cAAc,sBAAsB,kBAAkB,KAAK;AAAA,QAE/D,CAAC;AAAA,MACH,EAAE;AAAA,IACJ;AACA,WAAO;AAAA,EACT,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;AACH;",
   "names": []
 }

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

@@ -32,6 +32,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ChartContext = require("../../ChartContext");
 var import_ScrollableContainerX = require("../Scroller/ScrollableContainerX");
+var import_ScrollableContainerY = require("../Scroller/ScrollableContainerY");
 var import_AxisBottom = require("./AxisBottom");
 var import_AxisRight = require("./AxisRight");
 var import_AxisLeft = require("./AxisLeft");
@@ -41,9 +42,11 @@ var import_VerticalScrapper = require("../Scrapper/VerticalScrapper");
 const Axes = () => {
   const {
     containerRatio,
-    props: { scrapper }
+    props: { scrapper, xAxis, yAxis }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  if (containerRatio > 1) {
+  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;
+  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
+  if (xScroll) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisRight.AxisRight, {}),
@@ -52,6 +55,14 @@ const Axes = () => {
       ]
     });
   }
+  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, {}),

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, useMemo } from 'react';\n\nimport { ChartContext } from '../../ChartContext';\nimport { ScrollableContainerX } from '../Scroller/ScrollableContainerX';\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 },\n  } = useContext(ChartContext);\n\n  // @TODO we need to expand this component to calculate the vertical scrolling too\n\n  if (containerRatio > 1) {\n    return (\n      <>\n        <AxisRight />\n        <AxisLeft />\n        <ScrollableContainerX />\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,mBAA2C;AAE3C,0BAA6B;AAC7B,kCAAqC;AACrC,wBAA2B;AAC3B,uBAA0B;AAC1B,sBAAyB;AACzB,2BAA8B;AAC9B,sBAAyB;AACzB,8BAAiC;AAC1B,MAAM,OAAO,MAAM;AACxB,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,SAAS;AAAA,EACpB,QAAI,yBAAW,gCAAY;AAI3B,MAAI,iBAAiB,GAAG;AACtB,WACE;AAAA,MACE;AAAA,oDAAC,8BAAU;AAAA,QACX,4CAAC,4BAAS;AAAA,QACV,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    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;",
   "names": []
 }