@elliemae/ds-dataviz 3.15.0-rc.2 → 3.15.0-rc.4

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

@@ -83,9 +83,9 @@ const stackData = (groupsStacked, series) => {
   return allSeriesStackedByGroups;
 };
 const getFormatGenerator = (type) => {
-  if (type === "time")
+  if (type === "DATETIME")
     return import_d3.timeFormat;
-  if (type === "linear")
+  if (type === "LINEAR")
     return import_d3.format;
   return null;
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/helpers/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { stack, timeFormat, stackOffsetDiverging, format, Series } from 'd3';\nimport type { 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// this function check if the series that are stacked share the same scale.\n// return the scale or false if they dont share it\n\n// si serie.scale === undefined ... la scala es Y\n\nconst checkSharedScale = (series: DSChartT.SeriesT[]) => {\n  const scales = series\n    .map((serie) => serie.scale ?? 'y')\n    .filter((value, index, self) => self.indexOf(value) === index);\n  if (scales.length > 1) {\n    return false;\n  }\n  return scales[0];\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  const scalesStackedDataMap: string[] = [];\n  if (!groupsStacked) return [];\n  groupsStacked?.forEach((g) => {\n    const seriesFilteredByStackGroup = series.filter((serie) => g.includes(serie.name));\n    const sharedScale = checkSharedScale(seriesFilteredByStackGroup);\n    if (!sharedScale) return;\n    scalesStackedDataMap.push(sharedScale);\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  allSeriesStackedByGroups.forEach((g, i) => (g.scale = scalesStackedDataMap[i]));\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;AAOA,MAAM,mBAAmB,CAAC,WAA+B;AACvD,QAAM,SAAS,OACZ,IAAI,CAAC,UAAU,MAAM,SAAS,GAAG,EACjC,OAAO,CAAC,OAAO,OAAO,SAAS,KAAK,QAAQ,KAAK,MAAM,KAAK;AAC/D,MAAI,OAAO,SAAS,GAAG;AACrB,WAAO;AAAA,EACT;AACA,SAAO,OAAO;AAChB;AAGO,MAAM,YAAY,CAAC,eAAuC,WAAkC;AACjG,QAAM,2BAA2D,CAAC;AAClE,QAAM,uBAAiC,CAAC;AACxC,MAAI,CAAC;AAAe,WAAO,CAAC;AAC5B,iBAAe,QAAQ,CAAC,MAAM;AAC5B,UAAM,6BAA6B,OAAO,OAAO,CAAC,UAAU,EAAE,SAAS,MAAM,IAAI,CAAC;AAClF,UAAM,cAAc,iBAAiB,0BAA0B;AAC/D,QAAI,CAAC;AAAa;AAClB,yBAAqB,KAAK,WAAW;AACrC,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,2BAAyB,QAAQ,CAAC,GAAG,MAAO,EAAE,QAAQ,qBAAqB,EAAG;AAC9E,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 type { 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// this function check if the series that are stacked share the same scale.\n// return the scale or false if they dont share it\n\n// si serie.scale === undefined ... la scala es Y\n\nconst checkSharedScale = (series: DSChartT.SeriesT[]) => {\n  const scales = series\n    .map((serie) => serie.scale ?? 'y')\n    .filter((value, index, self) => self.indexOf(value) === index);\n  if (scales.length > 1) {\n    return false;\n  }\n  return scales[0];\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  const scalesStackedDataMap: string[] = [];\n  if (!groupsStacked) return [];\n  groupsStacked?.forEach((g) => {\n    const seriesFilteredByStackGroup = series.filter((serie) => g.includes(serie.name));\n    const sharedScale = checkSharedScale(seriesFilteredByStackGroup);\n    if (!sharedScale) return;\n    scalesStackedDataMap.push(sharedScale);\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  allSeriesStackedByGroups.forEach((g, i) => (g.scale = scalesStackedDataMap[i]));\n  return allSeriesStackedByGroups;\n};\n\nexport const getFormatGenerator = (type: string) => {\n  if (type === 'DATETIME') 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;AAOA,MAAM,mBAAmB,CAAC,WAA+B;AACvD,QAAM,SAAS,OACZ,IAAI,CAAC,UAAU,MAAM,SAAS,GAAG,EACjC,OAAO,CAAC,OAAO,OAAO,SAAS,KAAK,QAAQ,KAAK,MAAM,KAAK;AAC/D,MAAI,OAAO,SAAS,GAAG;AACrB,WAAO;AAAA,EACT;AACA,SAAO,OAAO;AAChB;AAGO,MAAM,YAAY,CAAC,eAAuC,WAAkC;AACjG,QAAM,2BAA2D,CAAC;AAClE,QAAM,uBAAiC,CAAC;AACxC,MAAI,CAAC;AAAe,WAAO,CAAC;AAC5B,iBAAe,QAAQ,CAAC,MAAM;AAC5B,UAAM,6BAA6B,OAAO,OAAO,CAAC,UAAU,EAAE,SAAS,MAAM,IAAI,CAAC;AAClF,UAAM,cAAc,iBAAiB,0BAA0B;AAC/D,QAAI,CAAC;AAAa;AAClB,yBAAqB,KAAK,WAAW;AACrC,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,2BAAyB,QAAQ,CAAC,GAAG,MAAO,EAAE,QAAQ,qBAAqB,EAAG;AAC9E,SAAO;AACT;AAEO,MAAM,qBAAqB,CAAC,SAAiB;AAClD,MAAI,SAAS;AAAY,WAAO;AAChC,MAAI,SAAS;AAAU,WAAO;AAC9B,SAAO;AACT;",
   "names": []
 }

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

@@ -51,19 +51,19 @@ const useUniqueData = () => {
     }
     return 0;
   }
-  const isBandAxis = !!xScale.bandwidth;
+  const isBandAxis = xScale.type === "BAND";
   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);
+          const xScaleValue = xScale.get(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),
+            position: xScale.get(x),
             name: serie.name,
             xValue: x,
             yValue: y,
@@ -75,10 +75,10 @@ const useUniqueData = () => {
     } else {
       valueToPositionPerSeries = data.map(
         (serie) => serie.data.filter((datum) => {
-          const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);
+          const xScaleValue = xScale.get(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),
+          position: xScale.get(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,

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

@@ -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                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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",
+  "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.type === 'BAND';\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.get(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.get(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.get(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.get(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/helpers/useVirtualizedSeries.js

@@ -47,11 +47,11 @@ const useVirtualizedSeries = () => {
   const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
   return (0, import_react.useMemo)(() => {
     if (xScroll) {
-      const offset = xScale.bandwidth?.() || 20;
+      const offset = xScale.getBandwidth() || 20;
       return data.map((serie) => ({
         ...serie,
         data: serie.data.filter((datum) => {
-          const xScaleValue = xScale(getXValue(datum));
+          const xScaleValue = xScale.get(getXValue(datum));
           return xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) - innerWidth && xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth * 2;
         })
       }));
@@ -60,8 +60,8 @@ const useVirtualizedSeries = () => {
       return data.map((serie) => ({
         ...serie,
         data: serie.data.filter((datum) => {
-          const yScaleValue = yScale(getYValue(datum));
-          const offset = yScale.bandwidth?.() ?? 20;
+          const yScaleValue = yScale.get(getYValue(datum));
+          const offset = yScale.getBandwidth() ?? 20;
           return yScaleValue > xScrollbarPosition * (containerRatio ?? 1) - offset && yScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerHeight;
         })
       }));

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

@@ -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    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;",
+  "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.getBandwidth() || 20;\n      return data.map((serie) => ({\n        ...serie,\n        data: serie.data.filter((datum) => {\n          const xScaleValue = xScale.get(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.get(getYValue(datum));\n          const offset = yScale.getBandwidth() ?? 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,aAAa,KAAK;AACxC,aAAO,KAAK,IAAI,CAAC,WAAW;AAAA,QAC1B,GAAG;AAAA,QACH,MAAM,MAAM,KAAK,OAAO,CAAC,UAAU;AACjC,gBAAM,cAAc,OAAO,IAAI,UAAU,KAAK,CAAC;AAC/C,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,IAAI,UAAU,KAAK,CAAC;AAC/C,gBAAM,SAAS,OAAO,aAAa,KAAK;AACxC,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/Axis.js

@@ -0,0 +1,47 @@
+"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 Axis_exports = {};
+__export(Axis_exports, {
+  Axis: () => Axis
+});
+module.exports = __toCommonJS(Axis_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_styles = require("../../styles");
+const Axis = import_react.default.memo((props) => {
+  const { dimension, color, GridRenderer, TickRenderer, lineCoords, scale, innerRef } = props;
+  const ticks = scale.getTicks(dimension);
+  const ticksScaled = scale?.getTicksScaled(dimension);
+  const { x1, x2, y1, y2 } = lineCoords;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: "axis", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { ref: innerRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxis, { className: "domain", x1, x2, y1, y2, axisColor: color }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { className: "ticks", children: ticks.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TickRenderer, { position: ticksScaled[i], tickValue: t }, ticksScaled[i])) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { className: "grid", children: ticks.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridRenderer, { position: ticksScaled[i], tickValue: t }, ticksScaled[i])) })
+  ] });
+});
+//# sourceMappingURL=Axis.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/graphs/Chart/parts/Axis/Axis.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport type { ScaleT } from '../../scales';\nimport { StyledAxis } from '../../styles';\nexport interface TickRenderPropsT {\n  position: number;\n  tickValue: string | number | Date;\n}\nexport interface GridRenderPropsT {\n  position: number;\n  tickValue?: string | number | Date;\n}\n\ninterface AxisT<S extends ScaleT> {\n  lineCoords: {\n    x1: number;\n    x2: number;\n    y1: number;\n    y2: number;\n  };\n  innerRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  scale: S;\n  dimension: number;\n  TickRenderer: (props: TickRenderPropsT) => JSX.Element;\n  GridRenderer: (props: GridRenderPropsT) => JSX.Element | null;\n  color: string;\n}\n\nexport const Axis = React.memo(<S extends ScaleT>(props: AxisT<S>) => {\n  const { dimension, color, GridRenderer, TickRenderer, lineCoords, scale, innerRef } = props;\n\n  const ticks = scale.getTicks(dimension);\n\n  const ticksScaled = scale?.getTicksScaled(dimension);\n\n  const { x1, x2, y1, y2 } = lineCoords;\n\n  return (\n    <g className=\"axis\">\n      <g ref={innerRef}>\n        <StyledAxis className=\"domain\" x1={x1} x2={x2} y1={y1} y2={y2} axisColor={color} />\n        <g className=\"ticks\">\n          {ticks.map((t, i) => (\n            <TickRenderer key={ticksScaled[i]} position={ticksScaled[i]} tickValue={t} />\n          ))}\n        </g>\n      </g>\n      <g className=\"grid\">\n        {ticks.map((t, i) => (\n          <GridRenderer key={ticksScaled[i]} position={ticksScaled[i]} tickValue={t} />\n        ))}\n      </g>\n    </g>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCjB;AAtCN,mBAAkB;AAElB,oBAA2B;AAyBpB,MAAM,OAAO,aAAAA,QAAM,KAAK,CAAmB,UAAoB;AACpE,QAAM,EAAE,WAAW,OAAO,cAAc,cAAc,YAAY,OAAO,SAAS,IAAI;AAEtF,QAAM,QAAQ,MAAM,SAAS,SAAS;AAEtC,QAAM,cAAc,OAAO,eAAe,SAAS;AAEnD,QAAM,EAAE,IAAI,IAAI,IAAI,GAAG,IAAI;AAE3B,SACE,6CAAC,OAAE,WAAU,QACX;AAAA,iDAAC,OAAE,KAAK,UACN;AAAA,kDAAC,4BAAW,WAAU,UAAS,IAAQ,IAAQ,IAAQ,IAAQ,WAAW,OAAO;AAAA,MACjF,4CAAC,OAAE,WAAU,SACV,gBAAM,IAAI,CAAC,GAAG,MACb,4CAAC,gBAAkC,UAAU,YAAY,IAAI,WAAW,KAArD,YAAY,EAA4C,CAC5E,GACH;AAAA,OACF;AAAA,IACA,4CAAC,OAAE,WAAU,QACV,gBAAM,IAAI,CAAC,GAAG,MACb,4CAAC,gBAAkC,UAAU,YAAY,IAAI,WAAW,KAArD,YAAY,EAA4C,CAC5E,GACH;AAAA,KACF;AAEJ,CAAC;",
+  "names": ["React"]
+}

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

@@ -30,92 +30,109 @@ module.exports = __toCommonJS(AxisBottom_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-var import_d3 = require("d3");
-var import_styles = require("../../styles");
 var import_ChartContext = require("../../ChartContext");
-var import_useUniqueData = require("../../helpers/useUniqueData");
-var import_helpers = require("../../helpers");
+var import_Axis = require("./Axis");
+var import_Tick = require("./Tick");
+var import_GridLine = require("./GridLine");
+var import_colorPallet = require("../../helpers/colorPallet");
 const AxisBottom = import_react.default.memo(() => {
   const {
     props: { xAxis },
     innerHeight,
     xScale,
+    yScale,
     innerWidth,
     containerRatio,
-    internalMargin,
-    isHorizontal,
     setAxisBottomRef
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  const axisRef = (0, import_react.useRef)(null);
-  const gridRef = (0, import_react.useRef)(null);
-  const { tickValues, tickFormat, overwriteTicks, color, tickRotation, tickCount } = xAxis.tick || {};
-  const ticksScales = ["linear", "time", "log"];
-  const uniqueData = (0, import_useUniqueData.useUniqueData)();
-  (0, import_react.useEffect)(() => {
-    const grid = (0, import_d3.axisBottom)(xScale).tickSize(-innerHeight).tickFormat("").tickSizeOuter(0);
-    const axis = (0, import_d3.axisBottom)(xScale).tickSizeOuter(0);
-    if (ticksScales.includes(xAxis.type)) {
-      const ticksNum = (() => {
-        if (tickCount)
-          return tickCount;
-        if (containerRatio > 1) {
-          return innerWidth / 80 * containerRatio;
+  const { tickRotation } = xAxis.tick || {};
+  const { showGrid } = xAxis;
+  const textProps = (0, import_react.useMemo)(() => {
+    const commomProps = { fill: import_colorPallet.COLOR_PALLET[xAxis?.tick?.color] || xAxis?.tick?.color };
+    if (!tickRotation)
+      return { ...commomProps, y: 17 };
+    return {
+      ...commomProps,
+      dx: 8 * Math.sin(Math.PI * (tickRotation / 180)),
+      dy: ".71em",
+      y: Math.ceil(11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1)),
+      transform: `rotate(${tickRotation})`
+    };
+  }, [tickRotation, xAxis?.tick?.color]);
+  const style = (0, import_react.useMemo)(() => {
+    if (!tickRotation)
+      return { textAnchor: "middle" };
+    return { textAnchor: tickRotation > 0 ? "start" : "end" };
+  }, [tickRotation]);
+  const GridRenderer = (0, import_react.useCallback)(
+    (props) => {
+      if (!showGrid)
+        return null;
+      const { position, ...rest } = props;
+      const gridLineCoords = {
+        x1: position,
+        x2: position,
+        y1: 0,
+        y2: innerHeight
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GridLine.GridLine, { ...gridLineCoords, ...rest });
+    },
+    [innerHeight, showGrid]
+  );
+  const TickRenderer = (0, import_react.useCallback)(
+    (props) => {
+      const { position, tickValue, ...rest } = props;
+      const tickLineCoords = {
+        y2: 5,
+        stroke: import_colorPallet.COLOR_PALLET[xAxis?.tick?.color] || xAxis?.tick?.color
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Tick.Tick,
+        {
+          ...tickLineCoords,
+          tickValue: xScale.getTickFormatted(tickValue),
+          xTranslate: position,
+          yTranslate: innerHeight,
+          textProps,
+          textStyle: style,
+          ...rest
         }
-        return innerWidth / 80;
-      })();
-      const ticks = xScale.ticks?.(ticksNum);
-      if (containerRatio > 1 && uniqueData.length < 10 && !isHorizontal) {
-        const ticksName = uniqueData.map((u) => u.xValue);
-        axis.tickValues(ticksName);
-        grid.tickValues(ticksName);
-      } else if (tickValues && ticks) {
-        const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];
-        axis.tickValues(finalTicks);
-      } else {
-        axis.tickValues(ticks);
-        grid.tickValues(ticks);
+      );
+    },
+    [xAxis?.tick?.color, xScale, innerHeight, textProps, style]
+  );
+  const axisColor = (0, import_react.useMemo)(() => import_colorPallet.COLOR_PALLET[xAxis.color] || xAxis.color, [xAxis.color]);
+  return (0, import_react.useMemo)(() => {
+    if (xAxis.hideAxis)
+      return null;
+    const lineCoords = {
+      x1: 0,
+      x2: innerWidth * containerRatio,
+      y1: innerHeight,
+      y2: innerHeight
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Axis.Axis,
+      {
+        lineCoords,
+        scale: xScale,
+        innerRef: setAxisBottomRef,
+        dimension: innerWidth * containerRatio,
+        TickRenderer,
+        GridRenderer,
+        color: axisColor
       }
-    }
-    if (tickFormat) {
-      if (typeof tickFormat === "string") {
-        const formatGenerator = (0, import_helpers.getFormatGenerator)(xAxis.type ?? "linear");
-        axis.tickFormat((d) => formatGenerator(tickFormat)(d));
-      }
-      if (typeof tickFormat === "function") {
-        axis.tickFormat(tickFormat);
-      }
-    }
-    if (axisRef?.current && gridRef?.current) {
-      if (xAxis?.showGrid)
-        (0, import_d3.select)(gridRef.current).call(grid);
-      const axisNode = (0, import_d3.select)(axisRef.current);
-      axisNode.call(axis);
-      if (tickRotation)
-        axisNode.selectAll("text").style("text-anchor", tickRotation > 0 ? "start" : "end").attr("dx", 8 * Math.sin(Math.PI * (tickRotation / 180))).attr("dy", ".71em").attr("y", 11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1)).attr("transform", `rotate(${tickRotation})`);
-    }
+    );
   }, [
-    innerHeight,
-    overwriteTicks,
-    xAxis?.showGrid,
-    tickFormat,
-    tickValues,
-    xScale,
-    tickRotation,
-    xAxis.type,
-    ticksScales,
-    tickCount,
+    GridRenderer,
+    TickRenderer,
     containerRatio,
+    axisColor,
+    innerHeight,
     innerWidth,
-    uniqueData.length,
-    uniqueData,
-    internalMargin.left,
-    isHorizontal
+    setAxisBottomRef,
+    xAxis.hideAxis,
+    xScale
   ]);
-  if (xAxis.hideAxis)
-    return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(0,${innerHeight})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { ref: setAxisBottomRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxis, { axisColor: xAxis.color, tickColor: color, ref: axisRef }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledGrid, { ref: gridRef })
-  ] });
 });
 //# sourceMappingURL=AxisBottom.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Axis/AxisBottom.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport type { ScaleLinear, ScaleTime } from 'd3';\nimport { select, axisBottom } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport type { DSChartT } from '../../react-desc-prop-types';\nimport { useUniqueData } from '../../helpers/useUniqueData';\nimport { getFormatGenerator } from '../../helpers';\n\nexport const AxisBottom = React.memo(() => {\n  const {\n    props: { xAxis },\n    innerHeight,\n    xScale,\n    innerWidth,\n    containerRatio,\n    internalMargin,\n    isHorizontal,\n    setAxisBottomRef,\n  } = useContext(ChartContext);\n\n  const axisRef = useRef<SVGSVGElement>(null);\n  const gridRef = useRef<SVGSVGElement>(null);\n  const { tickValues, tickFormat, overwriteTicks, color, tickRotation, tickCount } =\n    xAxis.tick || ({} as DSChartT.AxisTickT);\n\n  const ticksScales = ['linear', 'time', 'log'];\n  // const ticks = xScale.ticks?.(tickCount ?? width / 100);\n\n  const uniqueData = useUniqueData();\n  useEffect(() => {\n    const grid = axisBottom(xScale as ScaleLinear<number, number>)\n      .tickSize(-innerHeight)\n      .tickFormat('')\n      .tickSizeOuter(0);\n\n    const axis = axisBottom(xScale as ScaleLinear<number, number>).tickSizeOuter(0);\n\n    if (ticksScales.includes(xAxis.type)) {\n      const ticksNum = (() => {\n        if (tickCount) return tickCount;\n        if (containerRatio > 1) {\n          return (innerWidth / 80) * containerRatio;\n        }\n        return innerWidth / 80;\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\n    if (tickFormat) {\n      if (typeof tickFormat === 'string') {\n        const formatGenerator = getFormatGenerator(xAxis.type ?? 'linear');\n        axis.tickFormat((d) => formatGenerator(tickFormat)(d));\n      }\n      if (typeof tickFormat === 'function') {\n        axis.tickFormat(tickFormat);\n      }\n    }\n\n    if (axisRef?.current && gridRef?.current) {\n      if (xAxis?.showGrid) select(gridRef.current).call(grid);\n      const axisNode = select(axisRef.current);\n      axisNode.call(axis);\n\n      // // need to remove the first tick when live under the domain line\n      // const firstTick = axisNode.select('.tick').node() as SVGGElement; // select all the text elements\n      // if (firstTick?.getBoundingClientRect().left < internalMargin.left + 10 && !xScale.bandwidth) {\n      //   firstTick.remove();\n      // }\n      if (tickRotation)\n        axisNode\n          .selectAll('text')\n          .style('text-anchor', tickRotation > 0 ? 'start' : 'end')\n          .attr('dx', 8 * Math.sin(Math.PI * (tickRotation / 180)))\n          .attr('dy', '.71em')\n          .attr('y', 11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1))\n          .attr('transform', `rotate(${tickRotation})`);\n    }\n  }, [\n    innerHeight,\n    overwriteTicks,\n    xAxis?.showGrid,\n    tickFormat,\n    tickValues,\n    xScale,\n    tickRotation,\n    xAxis.type,\n    ticksScales,\n    tickCount,\n    containerRatio,\n    innerWidth,\n    uniqueData.length,\n    uniqueData,\n    internalMargin.left,\n    isHorizontal,\n  ]);\n  if (xAxis.hideAxis) return null;\n  return (\n    <g transform={`translate(0,${innerHeight})`}>\n      <g ref={setAxisBottomRef}>\n        <StyledAxis axisColor={xAxis.color} tickColor={color} ref={axisRef}></StyledAxis>\n      </g>\n      <StyledGrid ref={gridRef}></StyledGrid>\n    </g>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport type { CSSProperties } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport type { DSChartT } from '../../react-desc-prop-types';\nimport { Axis, type GridRenderPropsT, type TickRenderPropsT } from './Axis';\nimport { Tick } from './Tick';\nimport { GridLine } from './GridLine';\nimport { COLOR_PALLET } from '../../helpers/colorPallet';\n\nexport const AxisBottom = React.memo(() => {\n  const {\n    props: { xAxis },\n    innerHeight,\n    xScale,\n    yScale,\n    innerWidth,\n    containerRatio,\n    setAxisBottomRef,\n  } = useContext(ChartContext);\n\n  const { tickRotation } = xAxis.tick || ({} as DSChartT.AxisTickT);\n  const { showGrid } = xAxis;\n\n  const textProps = useMemo(() => {\n    const commomProps = { fill: COLOR_PALLET[xAxis?.tick?.color as keyof typeof COLOR_PALLET] || xAxis?.tick?.color };\n    if (!tickRotation) return { ...commomProps, y: 17 };\n    return {\n      ...commomProps,\n      dx: 8 * Math.sin(Math.PI * (tickRotation / 180)),\n      dy: '.71em',\n      y: Math.ceil(11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1)),\n      transform: `rotate(${tickRotation})`,\n    };\n  }, [tickRotation, xAxis?.tick?.color]);\n\n  const style: CSSProperties = useMemo(() => {\n    if (!tickRotation) return { textAnchor: 'middle' };\n    return { textAnchor: tickRotation > 0 ? 'start' : 'end' };\n  }, [tickRotation]);\n\n  const GridRenderer = useCallback(\n    (props: GridRenderPropsT) => {\n      if (!showGrid) return null;\n\n      const { position, ...rest } = props;\n      const gridLineCoords = {\n        x1: position,\n        x2: position,\n        y1: 0,\n        y2: innerHeight,\n      };\n      return <GridLine {...gridLineCoords} {...rest} />;\n    },\n    [innerHeight, showGrid],\n  );\n\n  const TickRenderer = useCallback(\n    (props: TickRenderPropsT) => {\n      const { position, tickValue, ...rest } = props;\n      const tickLineCoords = {\n        y2: 5,\n        stroke: COLOR_PALLET[xAxis?.tick?.color as keyof typeof COLOR_PALLET] || xAxis?.tick?.color,\n      };\n      return (\n        <Tick\n          {...tickLineCoords}\n          tickValue={xScale.getTickFormatted(tickValue)}\n          xTranslate={position}\n          yTranslate={innerHeight}\n          textProps={textProps}\n          textStyle={style}\n          {...rest}\n        />\n      );\n    },\n    [xAxis?.tick?.color, xScale, innerHeight, textProps, style],\n  );\n\n  const axisColor = useMemo(() => COLOR_PALLET[xAxis.color as keyof typeof COLOR_PALLET] || xAxis.color, [xAxis.color]);\n\n  return useMemo(() => {\n    if (xAxis.hideAxis) return null;\n    const lineCoords = {\n      x1: 0,\n      x2: innerWidth * containerRatio,\n      y1: innerHeight,\n      y2: innerHeight,\n    };\n\n    return (\n      <Axis\n        lineCoords={lineCoords}\n        scale={xScale}\n        innerRef={setAxisBottomRef}\n        dimension={innerWidth * containerRatio}\n        TickRenderer={TickRenderer}\n        GridRenderer={GridRenderer}\n        color={axisColor}\n      />\n    );\n  }, [\n    GridRenderer,\n    TickRenderer,\n    containerRatio,\n    axisColor,\n    innerHeight,\n    innerWidth,\n    setAxisBottomRef,\n    xAxis.hideAxis,\n    xScale,\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

@@ -29,70 +29,100 @@ __export(AxisLeft_exports, {
 module.exports = __toCommonJS(AxisLeft_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_d3 = require("d3");
-var import_styles = require("../../styles");
+var import_react = __toESM(require("react"));
 var import_ChartContext = require("../../ChartContext");
-var import_helpers = require("../../helpers");
-const AxisLeft = () => {
+var import_Axis = require("./Axis");
+var import_Tick = require("./Tick");
+var import_GridLine = require("./GridLine");
+var import_colorPallet = require("../../helpers/colorPallet");
+const AxisLeft = import_react.default.memo(() => {
   const {
     props: { yAxis },
     innerHeight,
-    innerWidth,
-    yScale,
-    chartId,
     height,
+    yScale,
+    innerWidth,
     setAxisLeftRef
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  const ref = (0, import_react.useRef)(null);
-  const gridRef = (0, import_react.useRef)(null);
-  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)(() => {
-    const axis = (0, import_d3.axisLeft)(yScale).tickSizeOuter(0);
-    const grid = (0, import_d3.axisLeft)(yScale).tickFormat((_) => "").tickSize(showGrid ? -innerWidth : 0).tickSizeOuter(0);
-    if (tickValues && ticks) {
-      const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];
-      axis.tickValues(finalTicks);
-    } else {
-      axis.tickValues(ticks);
-      grid.tickValues(ticks);
-    }
-    if (tickFormat) {
-      if (typeof tickFormat === "string") {
-        const formatGenerator = (0, import_helpers.getFormatGenerator)(type ?? "linear");
-        axis.tickFormat((d) => formatGenerator(tickFormat)(d));
-      }
-      if (typeof tickFormat === "function") {
-        axis.tickFormat(tickFormat);
+  const { tickRotation } = yAxis.tick || {};
+  const { showGrid } = yAxis;
+  const textProps = (0, import_react.useMemo)(() => {
+    const commomProps = { fill: import_colorPallet.COLOR_PALLET[yAxis?.tick?.color] || yAxis?.tick?.color };
+    if (!tickRotation)
+      return { ...commomProps, x: -10, dy: "0.32em" };
+    return {
+      ...commomProps,
+      dy: ".30em",
+      dx: "-.10em",
+      x: Math.trunc(-(11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1))),
+      transform: `rotate(${tickRotation})`
+    };
+  }, [tickRotation, yAxis?.tick?.color]);
+  const style = (0, import_react.useMemo)(
+    () => ({
+      textAnchor: "end"
+    }),
+    []
+  );
+  const GridRenderer = (0, import_react.useCallback)(
+    (props) => {
+      if (!showGrid)
+        return null;
+      const { position, ...rest } = props;
+      const gridLineCoords = {
+        x1: 0,
+        x2: innerWidth,
+        y1: position,
+        y2: position
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GridLine.GridLine, { ...gridLineCoords, ...rest });
+    },
+    [showGrid, innerWidth]
+  );
+  const TickRenderer = (0, import_react.useCallback)(
+    (props) => {
+      const { position, tickValue, ...rest } = props;
+      const tickLineCoords = {
+        x2: -5,
+        stroke: import_colorPallet.COLOR_PALLET[yAxis?.tick?.color] || yAxis?.tick?.color
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Tick.Tick,
+        {
+          ...tickLineCoords,
+          xTranslate: 0,
+          yTranslate: position,
+          textProps,
+          textStyle: style,
+          tickValue: yScale.getTickFormatted(tickValue),
+          ...rest
+        }
+      );
+    },
+    [style, textProps, yAxis?.tick?.color, yScale]
+  );
+  const axisColor = (0, import_react.useMemo)(() => import_colorPallet.COLOR_PALLET[yAxis.color] || yAxis.color, [yAxis.color]);
+  return (0, import_react.useMemo)(() => {
+    if (yAxis.hideAxis)
+      return null;
+    const lineCoords = {
+      x1: 0,
+      x2: 0,
+      y1: 0,
+      y2: innerHeight
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Axis.Axis,
+      {
+        lineCoords,
+        scale: yScale,
+        innerRef: setAxisLeftRef,
+        dimension: height,
+        GridRenderer,
+        TickRenderer,
+        color: axisColor
       }
-    }
-    if (ref?.current && gridRef?.current) {
-      (0, import_d3.select)(gridRef.current).call(grid);
-      const axisNode = (0, import_d3.select)(ref.current);
-      axisNode.call(axis);
-      if (tickRotation)
-        axisNode.selectAll("text").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", ".15em").attr("transform", `rotate(-${tickRotation})`);
-    }
-  }, [
-    innerHeight,
-    innerWidth,
-    overwriteTicks,
-    showGrid,
-    tickFormat,
-    tickRotation,
-    tickValues,
-    ticks,
-    type,
-    yAxis,
-    yScale
-  ]);
-  if (yAxis.hideAxis)
-    return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { mask: `url(#mask-${chartId})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledGrid, { ref: gridRef }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { ref: setAxisLeftRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxis, { axisColor, ref, tickColor, className: "axis-left" }) })
-  ] });
-};
+    );
+  }, [GridRenderer, TickRenderer, axisColor, height, innerHeight, setAxisLeftRef, yAxis.hideAxis, yScale]);
+});
 //# sourceMappingURL=AxisLeft.js.map