@elliemae/ds-dataviz 3.14.4 → 3.14.7

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

@@ -0,0 +1,186 @@
+"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 scales_exports = {};
+__export(scales_exports, {
+  AXIS_TYPE: () => AXIS_TYPE,
+  BandScale: () => BandScale,
+  LinearScale: () => LinearScale,
+  LogScale: () => LogScale,
+  Scale: () => Scale,
+  TimeLinearScale: () => TimeLinearScale
+});
+module.exports = __toCommonJS(scales_exports);
+var React = __toESM(require("react"));
+var import_d3 = require("d3");
+const AXIS_TYPE = {
+  BAND: "BAND",
+  LINEAR: "LINEAR",
+  DATETIME: "DATETIME",
+  LOG: "LOG"
+};
+class Scale {
+  constructor(scale) {
+    this.type = "";
+    this.scale = scale;
+  }
+  getBandwidth() {
+    return 0;
+  }
+}
+class BandScale extends Scale {
+  constructor(scale, axisProps) {
+    super(scale);
+    this.scale = scale;
+    this.type = "BAND";
+    this.axisProps = axisProps;
+  }
+  get(value) {
+    return this.scale(value);
+  }
+  getTicks() {
+    return this.scale.domain();
+  }
+  getTickFormatted(t) {
+    if (typeof t !== "string")
+      return t;
+    if (typeof this.axisProps?.tick?.tickFormat === "function") {
+      return this.axisProps?.tick?.tickFormat(t);
+    }
+    return t;
+  }
+  getTicksScaled() {
+    return this.scale.domain().map((d) => (this.get(d) ?? 0) + this.getBandwidth() / 2);
+  }
+  getBandwidth() {
+    return this.scale.bandwidth();
+  }
+}
+class LinearScale extends Scale {
+  constructor(scale, axisProps) {
+    super(scale);
+    this.scale = scale;
+    this.type = "LINEAR";
+    this.axisProps = axisProps;
+  }
+  get(value) {
+    return this.scale(value);
+  }
+  getTickFormatted(t) {
+    if (typeof t !== "number")
+      return t.toString();
+    if (typeof this.axisProps?.tick?.tickFormat === "function") {
+      return this.axisProps?.tick?.tickFormat(t);
+    }
+    if (typeof this.axisProps?.tick?.tickFormat === "string") {
+      return (0, import_d3.format)(this.axisProps?.tick?.tickFormat)(t);
+    }
+    return t.toString();
+  }
+  getTicks(dimension) {
+    const ticks = this.scale.ticks?.(this.axisProps?.tick?.tickCount ?? Math.ceil(dimension / 80));
+    if (this.axisProps?.tick?.tickValues) {
+      if (this.axisProps?.tick?.overwriteTicks)
+        return this.axisProps?.tick?.tickValues;
+      this.axisProps?.tick?.tickValues.forEach((t) => {
+        if (typeof t !== "number")
+          return;
+        const isTickAlreadyPresent = ticks.find((tick) => tick === t);
+        if (isTickAlreadyPresent)
+          return;
+        ticks.push(t);
+      });
+    }
+    return ticks;
+  }
+  getTicksScaled(dimension) {
+    const ticks = this.getTicks(dimension);
+    return ticks.map((t) => typeof t === "number" ? this.get(t) : 0);
+  }
+}
+class LogScale extends LinearScale {
+  constructor(scale, axisProps) {
+    super(scale, axisProps);
+    this.scale = scale;
+    this.type = "LOG";
+    this.axisProps = axisProps;
+  }
+  getTickFormatted(t) {
+    if (typeof t !== "number")
+      return t.toString();
+    if (typeof this.axisProps?.tick?.tickFormat === "function") {
+      return this.axisProps?.tick?.tickFormat(t);
+    }
+    if (typeof this.axisProps?.tick?.tickFormat === "string") {
+      return (0, import_d3.format)(this.axisProps?.tick?.tickFormat)(t);
+    }
+    return (0, import_d3.format)("~s")(t);
+  }
+}
+class TimeLinearScale extends Scale {
+  constructor(scale, axisProps) {
+    super(scale);
+    this.scale = scale;
+    this.type = "DATETIME";
+    this.axisProps = axisProps;
+  }
+  get(value) {
+    return this.scale(value);
+  }
+  getTickFormatted(t) {
+    if (typeof t !== "object")
+      return t.toString();
+    if (typeof this.axisProps?.tick?.tickFormat === "function") {
+      return this.axisProps?.tick?.tickFormat(t);
+    }
+    if (typeof this.axisProps?.tick?.tickFormat === "string") {
+      return (0, import_d3.timeFormat)(this.axisProps?.tick?.tickFormat)(t);
+    }
+    return t.toString();
+  }
+  getTicks(dimension) {
+    const ticks = this.scale.ticks?.(this.axisProps?.tick?.tickCount ?? Math.ceil(dimension / 80));
+    if (this.axisProps?.tick?.tickValues) {
+      if (this.axisProps?.tick?.overwriteTicks)
+        return this.axisProps?.tick?.tickValues;
+      const newTicks = [];
+      ticks.forEach((t) => {
+        if (typeof t !== "object")
+          return;
+        const exists = this.axisProps?.tick?.tickValues.some(
+          (tickValue) => typeof tickValue === "object" && tickValue.getTime() === t.getTime()
+        );
+        if (!exists)
+          newTicks.push(t);
+      });
+      return [...newTicks, ...this.axisProps?.tick?.tickValues];
+    }
+    return ticks;
+  }
+  getTicksScaled(dimension) {
+    const ticks = this.getTicks(dimension);
+    return ticks.map((t) => typeof t === "object" ? this.get(t) : 0);
+  }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/graphs/Chart/scales/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { ScaleBand, ScaleLinear, ScaleLogarithmic, ScaleTime } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\nimport { timeFormat, format } from 'd3';\n\nexport const AXIS_TYPE = {\n  BAND: 'BAND',\n  LINEAR: 'LINEAR',\n  DATETIME: 'DATETIME',\n  LOG: 'LOG',\n} as const;\n\nexport class Scale {\n  scale: ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;\n\n  type: string;\n\n  constructor(scale: ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>) {\n    this.type = '';\n    this.scale = scale;\n  }\n\n  getBandwidth() {\n    return 0;\n  }\n}\nexport class BandScale extends Scale {\n  type: keyof typeof AXIS_TYPE;\n\n  scale: ScaleBand<string>;\n\n  axisProps: DSChartT.AxisT;\n\n  constructor(scale: ScaleBand<string>, axisProps: DSChartT.AxisT) {\n    super(scale);\n    this.scale = scale;\n    this.type = 'BAND';\n    this.axisProps = axisProps;\n  }\n\n  get(value: string) {\n    return this.scale(value);\n  }\n\n  getTicks() {\n    return this.scale.domain();\n  }\n\n  getTickFormatted(t: number | string | Date) {\n    if (typeof t !== 'string') return t;\n    if (typeof this.axisProps?.tick?.tickFormat === 'function') {\n      return this.axisProps?.tick?.tickFormat(t);\n    }\n    return t;\n  }\n\n  getTicksScaled() {\n    return this.scale.domain().map((d) => (this.get(d) ?? 0) + this.getBandwidth() / 2);\n  }\n\n  getBandwidth() {\n    return this.scale.bandwidth();\n  }\n}\n\nexport class LinearScale extends Scale {\n  type: keyof typeof AXIS_TYPE;\n\n  scale: ScaleLinear<number, number, never>;\n\n  axisProps: DSChartT.AxisT;\n\n  constructor(scale: ScaleLinear<number, number, never>, axisProps: DSChartT.AxisT) {\n    super(scale);\n    this.scale = scale;\n    this.type = 'LINEAR';\n    this.axisProps = axisProps;\n  }\n\n  get(value: number) {\n    return this.scale(value);\n  }\n\n  getTickFormatted(t: number | string | Date) {\n    if (typeof t !== 'number') return t.toString();\n    if (typeof this.axisProps?.tick?.tickFormat === 'function') {\n      return this.axisProps?.tick?.tickFormat(t);\n    }\n    if (typeof this.axisProps?.tick?.tickFormat === 'string') {\n      return format(this.axisProps?.tick?.tickFormat)(t);\n    }\n    return t.toString();\n  }\n\n  getTicks(dimension: number) {\n    const ticks = this.scale.ticks?.(this.axisProps?.tick?.tickCount ?? Math.ceil(dimension / 80));\n    if (this.axisProps?.tick?.tickValues) {\n      if (this.axisProps?.tick?.overwriteTicks) return this.axisProps?.tick?.tickValues;\n      this.axisProps?.tick?.tickValues.forEach((t) => {\n        if (typeof t !== 'number') return;\n        const isTickAlreadyPresent = ticks.find((tick) => tick === t);\n        if (isTickAlreadyPresent) return;\n        ticks.push(t);\n      });\n    }\n    return ticks;\n  }\n\n  getTicksScaled(dimension: number) {\n    const ticks = this.getTicks(dimension);\n    return ticks.map((t) => (typeof t === 'number' ? this.get(t) : 0));\n  }\n}\n\nexport class LogScale extends LinearScale {\n  type: keyof typeof AXIS_TYPE;\n\n  scale: ScaleLogarithmic<number, number, never>;\n\n  axisProps: DSChartT.AxisT;\n\n  constructor(scale: ScaleLogarithmic<number, number, never>, axisProps: DSChartT.AxisT) {\n    super(scale, axisProps);\n    this.scale = scale;\n    this.type = 'LOG';\n    this.axisProps = axisProps;\n  }\n\n  getTickFormatted(t: number | string | Date) {\n    if (typeof t !== 'number') return t.toString();\n    if (typeof this.axisProps?.tick?.tickFormat === 'function') {\n      return this.axisProps?.tick?.tickFormat(t);\n    }\n    if (typeof this.axisProps?.tick?.tickFormat === 'string') {\n      return format(this.axisProps?.tick?.tickFormat)(t);\n    }\n    return format('~s')(t);\n  }\n}\n\nexport class TimeLinearScale extends Scale {\n  type: keyof typeof AXIS_TYPE;\n\n  scale: ScaleTime<number, number, never>;\n\n  axisProps: DSChartT.AxisT;\n\n  constructor(scale: ScaleTime<number, number, never>, axisProps: DSChartT.AxisT) {\n    super(scale);\n    this.scale = scale;\n    this.type = 'DATETIME';\n    this.axisProps = axisProps;\n  }\n\n  get(value: Date) {\n    return this.scale(value);\n  }\n\n  getTickFormatted(t: number | string | Date) {\n    if (typeof t !== 'object') return t.toString();\n    if (typeof this.axisProps?.tick?.tickFormat === 'function') {\n      return this.axisProps?.tick?.tickFormat(t);\n    }\n    if (typeof this.axisProps?.tick?.tickFormat === 'string') {\n      return timeFormat(this.axisProps?.tick?.tickFormat)(t);\n    }\n    return t.toString();\n  }\n\n  getTicks(dimension: number) {\n    const ticks = this.scale.ticks?.(this.axisProps?.tick?.tickCount ?? Math.ceil(dimension / 80));\n    if (this.axisProps?.tick?.tickValues) {\n      if (this.axisProps?.tick?.overwriteTicks) return this.axisProps?.tick?.tickValues;\n      const newTicks = [] as Date[];\n      ticks.forEach((t) => {\n        if (typeof t !== 'object') return;\n        const exists = this.axisProps?.tick?.tickValues.some(\n          (tickValue) => typeof tickValue === 'object' && tickValue.getTime() === t.getTime(),\n        );\n        if (!exists) newTicks.push(t);\n      });\n      return [...newTicks, ...this.axisProps?.tick?.tickValues];\n    }\n    return ticks;\n  }\n\n  getTicksScaled(dimension: number) {\n    const ticks = this.getTicks(dimension);\n    return ticks.map((t) => (typeof t === 'object' ? this.get(t) : 0));\n  }\n}\n\nexport type ScaleT = BandScale | LinearScale | TimeLinearScale;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,gBAAmC;AAE5B,MAAM,YAAY;AAAA,EACvB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,KAAK;AACP;AAEO,MAAM,MAAM;AAAA,EAKjB,YAAY,OAAkG;AAC5G,SAAK,OAAO;AACZ,SAAK,QAAQ;AAAA,EACf;AAAA,EAEA,eAAe;AACb,WAAO;AAAA,EACT;AACF;AACO,MAAM,kBAAkB,MAAM;AAAA,EAOnC,YAAY,OAA0B,WAA2B;AAC/D,UAAM,KAAK;AACX,SAAK,QAAQ;AACb,SAAK,OAAO;AACZ,SAAK,YAAY;AAAA,EACnB;AAAA,EAEA,IAAI,OAAe;AACjB,WAAO,KAAK,MAAM,KAAK;AAAA,EACzB;AAAA,EAEA,WAAW;AACT,WAAO,KAAK,MAAM,OAAO;AAAA,EAC3B;AAAA,EAEA,iBAAiB,GAA2B;AAC1C,QAAI,OAAO,MAAM;AAAU,aAAO;AAClC,QAAI,OAAO,KAAK,WAAW,MAAM,eAAe,YAAY;AAC1D,aAAO,KAAK,WAAW,MAAM,WAAW,CAAC;AAAA,IAC3C;AACA,WAAO;AAAA,EACT;AAAA,EAEA,iBAAiB;AACf,WAAO,KAAK,MAAM,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,KAAK,KAAK,KAAK,aAAa,IAAI,CAAC;AAAA,EACpF;AAAA,EAEA,eAAe;AACb,WAAO,KAAK,MAAM,UAAU;AAAA,EAC9B;AACF;AAEO,MAAM,oBAAoB,MAAM;AAAA,EAOrC,YAAY,OAA2C,WAA2B;AAChF,UAAM,KAAK;AACX,SAAK,QAAQ;AACb,SAAK,OAAO;AACZ,SAAK,YAAY;AAAA,EACnB;AAAA,EAEA,IAAI,OAAe;AACjB,WAAO,KAAK,MAAM,KAAK;AAAA,EACzB;AAAA,EAEA,iBAAiB,GAA2B;AAC1C,QAAI,OAAO,MAAM;AAAU,aAAO,EAAE,SAAS;AAC7C,QAAI,OAAO,KAAK,WAAW,MAAM,eAAe,YAAY;AAC1D,aAAO,KAAK,WAAW,MAAM,WAAW,CAAC;AAAA,IAC3C;AACA,QAAI,OAAO,KAAK,WAAW,MAAM,eAAe,UAAU;AACxD,iBAAO,kBAAO,KAAK,WAAW,MAAM,UAAU,EAAE,CAAC;AAAA,IACnD;AACA,WAAO,EAAE,SAAS;AAAA,EACpB;AAAA,EAEA,SAAS,WAAmB;AAC1B,UAAM,QAAQ,KAAK,MAAM,QAAQ,KAAK,WAAW,MAAM,aAAa,KAAK,KAAK,YAAY,EAAE,CAAC;AAC7F,QAAI,KAAK,WAAW,MAAM,YAAY;AACpC,UAAI,KAAK,WAAW,MAAM;AAAgB,eAAO,KAAK,WAAW,MAAM;AACvE,WAAK,WAAW,MAAM,WAAW,QAAQ,CAAC,MAAM;AAC9C,YAAI,OAAO,MAAM;AAAU;AAC3B,cAAM,uBAAuB,MAAM,KAAK,CAAC,SAAS,SAAS,CAAC;AAC5D,YAAI;AAAsB;AAC1B,cAAM,KAAK,CAAC;AAAA,MACd,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT;AAAA,EAEA,eAAe,WAAmB;AAChC,UAAM,QAAQ,KAAK,SAAS,SAAS;AACrC,WAAO,MAAM,IAAI,CAAC,MAAO,OAAO,MAAM,WAAW,KAAK,IAAI,CAAC,IAAI,CAAE;AAAA,EACnE;AACF;AAEO,MAAM,iBAAiB,YAAY;AAAA,EAOxC,YAAY,OAAgD,WAA2B;AACrF,UAAM,OAAO,SAAS;AACtB,SAAK,QAAQ;AACb,SAAK,OAAO;AACZ,SAAK,YAAY;AAAA,EACnB;AAAA,EAEA,iBAAiB,GAA2B;AAC1C,QAAI,OAAO,MAAM;AAAU,aAAO,EAAE,SAAS;AAC7C,QAAI,OAAO,KAAK,WAAW,MAAM,eAAe,YAAY;AAC1D,aAAO,KAAK,WAAW,MAAM,WAAW,CAAC;AAAA,IAC3C;AACA,QAAI,OAAO,KAAK,WAAW,MAAM,eAAe,UAAU;AACxD,iBAAO,kBAAO,KAAK,WAAW,MAAM,UAAU,EAAE,CAAC;AAAA,IACnD;AACA,eAAO,kBAAO,IAAI,EAAE,CAAC;AAAA,EACvB;AACF;AAEO,MAAM,wBAAwB,MAAM;AAAA,EAOzC,YAAY,OAAyC,WAA2B;AAC9E,UAAM,KAAK;AACX,SAAK,QAAQ;AACb,SAAK,OAAO;AACZ,SAAK,YAAY;AAAA,EACnB;AAAA,EAEA,IAAI,OAAa;AACf,WAAO,KAAK,MAAM,KAAK;AAAA,EACzB;AAAA,EAEA,iBAAiB,GAA2B;AAC1C,QAAI,OAAO,MAAM;AAAU,aAAO,EAAE,SAAS;AAC7C,QAAI,OAAO,KAAK,WAAW,MAAM,eAAe,YAAY;AAC1D,aAAO,KAAK,WAAW,MAAM,WAAW,CAAC;AAAA,IAC3C;AACA,QAAI,OAAO,KAAK,WAAW,MAAM,eAAe,UAAU;AACxD,iBAAO,sBAAW,KAAK,WAAW,MAAM,UAAU,EAAE,CAAC;AAAA,IACvD;AACA,WAAO,EAAE,SAAS;AAAA,EACpB;AAAA,EAEA,SAAS,WAAmB;AAC1B,UAAM,QAAQ,KAAK,MAAM,QAAQ,KAAK,WAAW,MAAM,aAAa,KAAK,KAAK,YAAY,EAAE,CAAC;AAC7F,QAAI,KAAK,WAAW,MAAM,YAAY;AACpC,UAAI,KAAK,WAAW,MAAM;AAAgB,eAAO,KAAK,WAAW,MAAM;AACvE,YAAM,WAAW,CAAC;AAClB,YAAM,QAAQ,CAAC,MAAM;AACnB,YAAI,OAAO,MAAM;AAAU;AAC3B,cAAM,SAAS,KAAK,WAAW,MAAM,WAAW;AAAA,UAC9C,CAAC,cAAc,OAAO,cAAc,YAAY,UAAU,QAAQ,MAAM,EAAE,QAAQ;AAAA,QACpF;AACA,YAAI,CAAC;AAAQ,mBAAS,KAAK,CAAC;AAAA,MAC9B,CAAC;AACD,aAAO,CAAC,GAAG,UAAU,GAAG,KAAK,WAAW,MAAM,UAAU;AAAA,IAC1D;AACA,WAAO;AAAA,EACT;AAAA,EAEA,eAAe,WAAmB;AAChC,UAAM,QAAQ,KAAK,SAAS,SAAS;AACrC,WAAO,MAAM,IAAI,CAAC,MAAO,OAAO,MAAM,WAAW,KAAK,IAAI,CAAC,IAAI,CAAE;AAAA,EACnE;AACF;",
+  "names": []
+}

package/dist/cjs/graphs/Chart/series/Area.js

@@ -55,18 +55,18 @@ const Area = ({ serie }) => {
   const areaD3 = (0, import_react.useMemo)(() => {
     const serieWithStackedValues = (0, import_helpers.getStackedData)(stackedData, serie);
     if (serieWithStackedValues) {
-      return (0, import_d3.area)().x((_, i) => xScale(typeof serie.data[i]?.value === "number" ? xAxis.cols[i] : serie.data[i]?.value?.x)).y0(([y1, y2]) => finalYScale(y2)).y1(([y1, y2]) => finalYScale(y1)).curve(curveStyle)(serieWithStackedValues);
+      return (0, import_d3.area)().x((_, i) => xScale.get(typeof serie.data[i]?.value === "number" ? xAxis.cols[i] : serie.data[i]?.value?.x)).y0(([_, y2]) => finalYScale.get(y2)).y1(([y1]) => finalYScale.get(y1)).curve(curveStyle)(serieWithStackedValues);
     }
-    return (0, import_d3.area)().x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position)).y0(innerHeight).y1((d) => finalYScale(d.value.y ?? d.value)).curve(curveStyle)(serie.data);
+    return (0, import_d3.area)().x((d) => xScale.get(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position)).y0(innerHeight).y1((d) => finalYScale.get(d.value.y ?? d.value)).curve(curveStyle)(serie.data);
   }, [stackedData, serie, innerHeight, finalYScale, xScale, xAxis?.cols]);
   const lineD3 = (0, import_react.useMemo)(() => {
     const serieWithStackedValues = (0, import_helpers.getStackedData)(stackedData, serie);
     if (serieWithStackedValues) {
-      return (0, import_d3.line)().x((_, i) => xScale(typeof serie.data[i]?.value === "number" ? xAxis.cols[i] : serie.data[i]?.value?.x)).y(([, y2]) => finalYScale(y2)).curve(curveStyle)(serieWithStackedValues);
+      return (0, import_d3.line)().x((_, i) => xScale.get(typeof serie.data[i]?.value === "number" ? xAxis.cols[i] : serie.data[i]?.value?.x)).y(([, y2]) => finalYScale.get(y2)).curve(curveStyle)(serieWithStackedValues);
     }
-    return (0, import_d3.line)().x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position)).y((d) => finalYScale(d.value.y ?? d.value)).curve(curveStyle)(serie.data);
+    return (0, import_d3.line)().x((d) => xScale.get(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position)).y((d) => finalYScale.get(d.value.y ?? d.value)).curve(curveStyle)(serie.data);
   }, [stackedData, serie, curveStyle, xScale, xAxis.cols, finalYScale]);
-  const xTranslate = (xScale?.bandwidth?.() ?? 0) / 2;
+  const xTranslate = xScale.getBandwidth() / 2;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(${xTranslate}, 0)`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Points.Points, { serie }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: lineD3, fill: "none", strokeWidth: 2, stroke: colorScale(serie.name) }),

package/dist/cjs/graphs/Chart/series/Area.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Area.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { area, line } from 'd3';\nimport { StyledArea } from '../styles';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData } from '../helpers';\nimport { Points } from './Points';\nimport { LINE, curveStyleMap } from '../../constants';\n\nexport const Area = ({ serie }) => {\n  const {\n    props: { xAxis },\n    xScale,\n    yScale,\n    innerHeight,\n    y2Scale,\n    colorScale,\n    activeSerie,\n    stackedData,\n  } = useContext(ChartContext);\n\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const curveStyle = useMemo(\n    () => curveStyleMap[serie.curveStyle] ?? curveStyleMap[LINE.CURVE_STYLE.LINEAR],\n    [curveStyleMap, serie.curveStyle],\n  );\n  const areaD3 = useMemo(() => {\n    const serieWithStackedValues = getStackedData(stackedData, serie);\n    if (serieWithStackedValues) {\n      return area()\n        .x((_, i) => xScale(typeof serie.data[i]?.value === 'number' ? xAxis.cols[i] : serie.data[i]?.value?.x))\n        .y0(([y1, y2]) => finalYScale(y2))\n        .y1(([y1, y2]) => finalYScale(y1))\n        .curve(curveStyle)(serieWithStackedValues);\n    }\n    return area()\n      .x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position))\n      .y0(innerHeight)\n      .y1((d) => finalYScale(d.value.y ?? d.value))\n      .curve(curveStyle)(serie.data);\n  }, [stackedData, serie, innerHeight, finalYScale, xScale, xAxis?.cols]);\n\n  const lineD3 = useMemo(() => {\n    const serieWithStackedValues = getStackedData(stackedData, serie);\n    if (serieWithStackedValues) {\n      return (\n        line()\n          .x((_, i) => xScale(typeof serie.data[i]?.value === 'number' ? xAxis.cols[i] : serie.data[i]?.value?.x))\n          // .y0(([y1]) => finalYScale(y1))\n          .y(([, y2]) => finalYScale(y2))\n          .curve(curveStyle)(serieWithStackedValues)\n      );\n    }\n    return (\n      line()\n        .x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position))\n        // .y0(innerHeight)\n        .y((d) => finalYScale(d.value.y ?? d.value))\n        .curve(curveStyle)(serie.data)\n    );\n  }, [stackedData, serie, curveStyle, xScale, xAxis.cols, finalYScale]);\n\n  const xTranslate = (xScale?.bandwidth?.() ?? 0) / 2;\n\n  return (\n    <g>\n      <g transform={`translate(${xTranslate}, 0)`}>\n        <Points serie={serie} />\n        <path d={lineD3} fill=\"none\" strokeWidth={2} stroke={colorScale(serie.name)} />\n        <StyledArea d={areaD3} isActiveArea={activeSerie === serie.key} fill={colorScale(serie.name)} />\n      </g>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkEjB;AAlEN,mBAA2C;AAC3C,gBAA2B;AAC3B,oBAA2B;AAC3B,0BAA6B;AAC7B,qBAA+B;AAC/B,oBAAuB;AACvB,uBAAoC;AAE7B,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,iBAAa;AAAA,IACjB,MAAM,+BAAc,MAAM,eAAe,+BAAc,sBAAK,YAAY;AAAA,IACxE,CAAC,gCAAe,MAAM,UAAU;AAAA,EAClC;AACA,QAAM,aAAS,sBAAQ,MAAM;AAC3B,UAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAI,wBAAwB;AAC1B,iBAAO,gBAAK,EACT,EAAE,CAAC,GAAG,MAAM,OAAO,OAAO,MAAM,KAAK,IAAI,UAAU,WAAW,MAAM,KAAK,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC,CAAC,EACtG,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,YAAY,EAAE,CAAC,EAChC,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,YAAY,EAAE,CAAC,EAChC,MAAM,UAAU,EAAE,sBAAsB;AAAA,IAC7C;AACA,eAAO,gBAAK,EACT,EAAE,CAAC,MAAM,OAAO,EAAE,MAAM,KAAK,OAAO,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EACrE,GAAG,WAAW,EACd,GAAG,CAAC,MAAM,YAAY,EAAE,MAAM,KAAK,EAAE,KAAK,CAAC,EAC3C,MAAM,UAAU,EAAE,MAAM,IAAI;AAAA,EACjC,GAAG,CAAC,aAAa,OAAO,aAAa,aAAa,QAAQ,OAAO,IAAI,CAAC;AAEtE,QAAM,aAAS,sBAAQ,MAAM;AAC3B,UAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAI,wBAAwB;AAC1B,iBACE,gBAAK,EACF,EAAE,CAAC,GAAG,MAAM,OAAO,OAAO,MAAM,KAAK,IAAI,UAAU,WAAW,MAAM,KAAK,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC,CAAC,EAEtG,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,YAAY,EAAE,CAAC,EAC7B,MAAM,UAAU,EAAE,sBAAsB;AAAA,IAE/C;AACA,eACE,gBAAK,EACF,EAAE,CAAC,MAAM,OAAO,EAAE,MAAM,KAAK,OAAO,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EAErE,EAAE,CAAC,MAAM,YAAY,EAAE,MAAM,KAAK,EAAE,KAAK,CAAC,EAC1C,MAAM,UAAU,EAAE,MAAM,IAAI;AAAA,EAEnC,GAAG,CAAC,aAAa,OAAO,YAAY,QAAQ,MAAM,MAAM,WAAW,CAAC;AAEpE,QAAM,cAAc,QAAQ,YAAY,KAAK,KAAK;AAElD,SACE,4CAAC,OACC,uDAAC,OAAE,WAAW,aAAa,kBACzB;AAAA,gDAAC,wBAAO,OAAc;AAAA,IACtB,4CAAC,UAAK,GAAG,QAAQ,MAAK,QAAO,aAAa,GAAG,QAAQ,WAAW,MAAM,IAAI,GAAG;AAAA,IAC7E,4CAAC,4BAAW,GAAG,QAAQ,cAAc,gBAAgB,MAAM,KAAK,MAAM,WAAW,MAAM,IAAI,GAAG;AAAA,KAChG,GACF;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { area, line } from 'd3';\nimport { StyledArea } from '../styles';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData } from '../helpers';\nimport { Points } from './Points';\nimport { LINE, curveStyleMap } from '../../constants';\n\nexport const Area = ({ serie }) => {\n  const {\n    props: { xAxis },\n    xScale,\n    yScale,\n    innerHeight,\n    y2Scale,\n    colorScale,\n    activeSerie,\n    stackedData,\n  } = useContext(ChartContext);\n\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const curveStyle = useMemo(\n    () => curveStyleMap[serie.curveStyle] ?? curveStyleMap[LINE.CURVE_STYLE.LINEAR],\n    [curveStyleMap, serie.curveStyle],\n  );\n  const areaD3 = useMemo(() => {\n    const serieWithStackedValues = getStackedData(stackedData, serie);\n    if (serieWithStackedValues) {\n      return area()\n        .x((_, i) => xScale.get(typeof serie.data[i]?.value === 'number' ? xAxis.cols[i] : serie.data[i]?.value?.x))\n        .y0(([_, y2]) => finalYScale.get(y2))\n        .y1(([y1]) => finalYScale.get(y1))\n        .curve(curveStyle)(serieWithStackedValues);\n    }\n    return area()\n      .x((d) => xScale.get(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position))\n      .y0(innerHeight)\n      .y1((d) => finalYScale.get(d.value.y ?? d.value))\n      .curve(curveStyle)(serie.data);\n  }, [stackedData, serie, innerHeight, finalYScale, xScale, xAxis?.cols]);\n\n  const lineD3 = useMemo(() => {\n    const serieWithStackedValues = getStackedData(stackedData, serie);\n    if (serieWithStackedValues) {\n      return line()\n        .x((_, i) => xScale.get(typeof serie.data[i]?.value === 'number' ? xAxis.cols[i] : serie.data[i]?.value?.x))\n        .y(([, y2]) => finalYScale.get(y2))\n        .curve(curveStyle)(serieWithStackedValues);\n    }\n    return line()\n      .x((d) => xScale.get(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position))\n      .y((d) => finalYScale.get(d.value.y ?? d.value))\n      .curve(curveStyle)(serie.data);\n  }, [stackedData, serie, curveStyle, xScale, xAxis.cols, finalYScale]);\n\n  const xTranslate = xScale.getBandwidth() / 2;\n\n  return (\n    <g>\n      <g transform={`translate(${xTranslate}, 0)`}>\n        <Points serie={serie} />\n        <path d={lineD3} fill=\"none\" strokeWidth={2} stroke={colorScale(serie.name)} />\n        <StyledArea d={areaD3} isActiveArea={activeSerie === serie.key} fill={colorScale(serie.name)} />\n      </g>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4DjB;AA5DN,mBAA2C;AAC3C,gBAA2B;AAC3B,oBAA2B;AAC3B,0BAA6B;AAC7B,qBAA+B;AAC/B,oBAAuB;AACvB,uBAAoC;AAE7B,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,iBAAa;AAAA,IACjB,MAAM,+BAAc,MAAM,eAAe,+BAAc,sBAAK,YAAY;AAAA,IACxE,CAAC,gCAAe,MAAM,UAAU;AAAA,EAClC;AACA,QAAM,aAAS,sBAAQ,MAAM;AAC3B,UAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAI,wBAAwB;AAC1B,iBAAO,gBAAK,EACT,EAAE,CAAC,GAAG,MAAM,OAAO,IAAI,OAAO,MAAM,KAAK,IAAI,UAAU,WAAW,MAAM,KAAK,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC,CAAC,EAC1G,GAAG,CAAC,CAAC,GAAG,EAAE,MAAM,YAAY,IAAI,EAAE,CAAC,EACnC,GAAG,CAAC,CAAC,EAAE,MAAM,YAAY,IAAI,EAAE,CAAC,EAChC,MAAM,UAAU,EAAE,sBAAsB;AAAA,IAC7C;AACA,eAAO,gBAAK,EACT,EAAE,CAAC,MAAM,OAAO,IAAI,EAAE,MAAM,KAAK,OAAO,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EACzE,GAAG,WAAW,EACd,GAAG,CAAC,MAAM,YAAY,IAAI,EAAE,MAAM,KAAK,EAAE,KAAK,CAAC,EAC/C,MAAM,UAAU,EAAE,MAAM,IAAI;AAAA,EACjC,GAAG,CAAC,aAAa,OAAO,aAAa,aAAa,QAAQ,OAAO,IAAI,CAAC;AAEtE,QAAM,aAAS,sBAAQ,MAAM;AAC3B,UAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAI,wBAAwB;AAC1B,iBAAO,gBAAK,EACT,EAAE,CAAC,GAAG,MAAM,OAAO,IAAI,OAAO,MAAM,KAAK,IAAI,UAAU,WAAW,MAAM,KAAK,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC,CAAC,EAC1G,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,YAAY,IAAI,EAAE,CAAC,EACjC,MAAM,UAAU,EAAE,sBAAsB;AAAA,IAC7C;AACA,eAAO,gBAAK,EACT,EAAE,CAAC,MAAM,OAAO,IAAI,EAAE,MAAM,KAAK,OAAO,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EACzE,EAAE,CAAC,MAAM,YAAY,IAAI,EAAE,MAAM,KAAK,EAAE,KAAK,CAAC,EAC9C,MAAM,UAAU,EAAE,MAAM,IAAI;AAAA,EACjC,GAAG,CAAC,aAAa,OAAO,YAAY,QAAQ,MAAM,MAAM,WAAW,CAAC;AAEpE,QAAM,aAAa,OAAO,aAAa,IAAI;AAE3C,SACE,4CAAC,OACC,uDAAC,OAAE,WAAW,aAAa,kBACzB;AAAA,gDAAC,wBAAO,OAAc;AAAA,IACtB,4CAAC,UAAK,GAAG,QAAQ,MAAK,QAAO,aAAa,GAAG,QAAQ,WAAW,MAAM,IAAI,GAAG;AAAA,IAC7E,4CAAC,4BAAW,GAAG,QAAQ,cAAc,gBAAgB,MAAM,KAAK,MAAM,WAAW,MAAM,IAAI,GAAG;AAAA,KAChG,GACF;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/Bars.js

@@ -36,15 +36,18 @@ var import_A11yRegion = require("../parts/A11yRegion");
 const Bars = ({ serie }) => {
   const { innerHeight, xScale, yScale, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
-  const negativeSize = innerHeight - finalYScale(0);
+  const negativeSize = innerHeight - finalYScale.get(0);
   const positiveSize = innerHeight - negativeSize;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_A11yRegion.A11yRegion, { serieName: serie.name, clipPath: `url(#rect-focus-ring-${chartId})`, fill: colorScale(serie.name), children: serie.data.map((bar) => {
     const x = getXValue(bar);
     const y = getYValue(bar);
     const width = subGroupScale?.bandwidth();
-    const height = parseInt(y > 0 ? positiveSize - finalYScale(y) : finalYScale(y) - finalYScale(0), 10);
-    const transformX = !xScale.bandwidth ? xScale(x) - width / 2 : subGroupScale(serie.name) + xScale(x);
-    const transformY = y > 0 ? finalYScale(0) - height : finalYScale(0);
+    const height = parseInt(
+      y > 0 ? positiveSize - finalYScale.get(y) : finalYScale.get(y) - finalYScale.get(0),
+      10
+    );
+    const transformX = xScale.type !== "BAND" ? xScale.get(x) - width / 2 : subGroupScale(serie.name) + xScale.get(x);
+    const transformY = y > 0 ? finalYScale.get(0) - height : finalYScale.get(0);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: `${serie.name}-rects-${bar.key}`, transform: `translate(${transformX},0)`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Rect.Rect,
       {

package/dist/cjs/graphs/Chart/series/Bars.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Bars.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { A11yRegion } from '../parts/A11yRegion';\nexport const Bars = ({ serie }) => {\n  const { innerHeight, xScale, yScale, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } =\n    useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const negativeSize = innerHeight - finalYScale(0);\n  const positiveSize = innerHeight - negativeSize;\n\n  return (\n    <A11yRegion serieName={serie.name} clipPath={`url(#rect-focus-ring-${chartId})`} fill={colorScale(serie.name)}>\n      {serie.data.map((bar) => {\n        const x = getXValue(bar);\n        const y = getYValue(bar);\n\n        const width = subGroupScale?.bandwidth();\n        const height = parseInt(y > 0 ? positiveSize - finalYScale(y) : finalYScale(y) - finalYScale(0), 10);\n        const transformX = !xScale.bandwidth\n          ? xScale(x) - width / 2\n          : // ? subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0)\n            subGroupScale(serie.name) + xScale(x);\n\n        const transformY = y > 0 ? finalYScale(0) - height : finalYScale(0);\n\n        return (\n          <g id={`${serie.name}-rects-${bar.key}`} key={bar.key} transform={`translate(${transformX},0)`}>\n            <Rect\n              name={serie.name}\n              xValue={x}\n              yValue={y}\n              width={width}\n              height={height}\n              id={bar.key}\n              y={transformY}\n              isNegative={y < 0}\n              datum={bar}\n            />\n          </g>\n        );\n      })}\n    </A11yRegion>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BX;AA7BZ,mBAAkC;AAClC,kBAAqB;AACrB,0BAA6B;AAC7B,wBAA2B;AACpB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM,EAAE,aAAa,QAAQ,QAAQ,SAAS,eAAe,YAAY,WAAW,WAAW,QAAQ,QACrG,yBAAW,gCAAY;AACzB,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,cAAc,YAAY,CAAC;AAChD,QAAM,eAAe,cAAc;AAEnC,SACE,4CAAC,gCAAW,WAAW,MAAM,MAAM,UAAU,wBAAwB,YAAY,MAAM,WAAW,MAAM,IAAI,GACzG,gBAAM,KAAK,IAAI,CAAC,QAAQ;AACvB,UAAM,IAAI,UAAU,GAAG;AACvB,UAAM,IAAI,UAAU,GAAG;AAEvB,UAAM,QAAQ,eAAe,UAAU;AACvC,UAAM,SAAS,SAAS,IAAI,IAAI,eAAe,YAAY,CAAC,IAAI,YAAY,CAAC,IAAI,YAAY,CAAC,GAAG,EAAE;AACnG,UAAM,aAAa,CAAC,OAAO,YACvB,OAAO,CAAC,IAAI,QAAQ,IAEpB,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC;AAExC,UAAM,aAAa,IAAI,IAAI,YAAY,CAAC,IAAI,SAAS,YAAY,CAAC;AAElE,WACE,4CAAC,OAAE,IAAI,GAAG,MAAM,cAAc,IAAI,OAAqB,WAAW,aAAa,iBAC7E;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,IAAI,IAAI;AAAA,QACR,GAAG;AAAA,QACH,YAAY,IAAI;AAAA,QAChB,OAAO;AAAA;AAAA,IACT,KAX4C,IAAI,GAYlD;AAAA,EAEJ,CAAC,GACH;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { A11yRegion } from '../parts/A11yRegion';\nexport const Bars = ({ serie }) => {\n  const { innerHeight, xScale, yScale, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } =\n    useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const negativeSize = innerHeight - finalYScale.get(0);\n  const positiveSize = innerHeight - negativeSize;\n\n  return (\n    <A11yRegion serieName={serie.name} clipPath={`url(#rect-focus-ring-${chartId})`} fill={colorScale(serie.name)}>\n      {serie.data.map((bar) => {\n        const x = getXValue(bar);\n        const y = getYValue(bar);\n\n        const width = subGroupScale?.bandwidth();\n        const height = parseInt(\n          y > 0 ? positiveSize - finalYScale.get(y) : finalYScale.get(y) - finalYScale.get(0),\n          10,\n        );\n        const transformX =\n          xScale.type !== 'BAND'\n            ? xScale.get(x) - width / 2\n            : // ? subGroupScale(serie.name) + xScale.get(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0)\n              subGroupScale(serie.name) + xScale.get(x);\n\n        const transformY = y > 0 ? finalYScale.get(0) - height : finalYScale.get(0);\n\n        return (\n          <g id={`${serie.name}-rects-${bar.key}`} key={bar.key} transform={`translate(${transformX},0)`}>\n            <Rect\n              name={serie.name}\n              xValue={x}\n              yValue={y}\n              width={width}\n              height={height}\n              id={bar.key}\n              y={transformY}\n              isNegative={y < 0}\n              datum={bar}\n            />\n          </g>\n        );\n      })}\n    </A11yRegion>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCX;AAjCZ,mBAAkC;AAClC,kBAAqB;AACrB,0BAA6B;AAC7B,wBAA2B;AACpB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM,EAAE,aAAa,QAAQ,QAAQ,SAAS,eAAe,YAAY,WAAW,WAAW,QAAQ,QACrG,yBAAW,gCAAY;AACzB,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,cAAc,YAAY,IAAI,CAAC;AACpD,QAAM,eAAe,cAAc;AAEnC,SACE,4CAAC,gCAAW,WAAW,MAAM,MAAM,UAAU,wBAAwB,YAAY,MAAM,WAAW,MAAM,IAAI,GACzG,gBAAM,KAAK,IAAI,CAAC,QAAQ;AACvB,UAAM,IAAI,UAAU,GAAG;AACvB,UAAM,IAAI,UAAU,GAAG;AAEvB,UAAM,QAAQ,eAAe,UAAU;AACvC,UAAM,SAAS;AAAA,MACb,IAAI,IAAI,eAAe,YAAY,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC;AAAA,MAClF;AAAA,IACF;AACA,UAAM,aACJ,OAAO,SAAS,SACZ,OAAO,IAAI,CAAC,IAAI,QAAQ,IAExB,cAAc,MAAM,IAAI,IAAI,OAAO,IAAI,CAAC;AAE9C,UAAM,aAAa,IAAI,IAAI,YAAY,IAAI,CAAC,IAAI,SAAS,YAAY,IAAI,CAAC;AAE1E,WACE,4CAAC,OAAE,IAAI,GAAG,MAAM,cAAc,IAAI,OAAqB,WAAW,aAAa,iBAC7E;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,IAAI,IAAI;AAAA,QACR,GAAG;AAAA,QACH,YAAY,IAAI;AAAA,QAChB,OAAO;AAAA;AAAA,IACT,KAX4C,IAAI,GAYlD;AAAA,EAEJ,CAAC,GACH;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/HorizontalBars.js

@@ -48,17 +48,17 @@ const HorizontalBars = ({ serie }) => {
     chartId
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
-  const negativeSize = innerWidth - xScale(0);
+  const negativeSize = innerWidth - xScale.get(0);
   const positiveSize = innerWidth - negativeSize;
   return (0, import_react.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { fill: colorScale(serie.name), clipPath: `url(#rect-focus-ring-${chartId})`, children: serie.data.map((bar, i) => {
       const x = getXValue(bar);
       const y = getYValue(bar);
       const minX = beginAtZero ? 0 : xScale.invert(0);
-      const width = x < 0 ? positiveSize - xScale(x) : xScale(x) - xScale(minX);
+      const width = x < 0 ? positiveSize - xScale.get(x) : xScale.get(x) - xScale.get(minX);
       const height = subGroupScale?.bandwidth();
-      const transformX = x < 0 ? xScale(0) - width : xScale(minX);
-      const transformY = subGroupScale(serie.name) + finalYScale(y);
+      const transformX = x < 0 ? xScale.get(0) - width : xScale.get(minX);
+      const transformY = subGroupScale(serie.name) + finalYScale.get(y);
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: `translate(${transformX},${transformY})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Rect.Rect,
         {

package/dist/cjs/graphs/Chart/series/HorizontalBars.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/HorizontalBars.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport type { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const {\n    props: {\n      xAxis: { beginAtZero },\n    },\n    xScale,\n    yScale,\n    innerWidth,\n    y2Scale,\n    subGroupScale,\n    colorScale,\n    getXValue,\n    getYValue,\n    chartId,\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const negativeSize = innerWidth - xScale(0);\n  const positiveSize = innerWidth - negativeSize;\n\n  return useMemo(\n    () => (\n      <g fill={colorScale(serie.name)} clipPath={`url(#rect-focus-ring-${chartId})`}>\n        {serie.data.map((bar, i) => {\n          const x = getXValue(bar);\n          const y = getYValue(bar);\n          const minX = beginAtZero ? 0 : xScale.invert(0);\n          const width = x < 0 ? positiveSize - xScale(x) : xScale(x) - xScale(minX);\n          const height = subGroupScale?.bandwidth();\n          const transformX = x < 0 ? xScale(0) - width : xScale(minX);\n          const transformY = subGroupScale(serie.name) + finalYScale(y);\n\n          return (\n            <g key={bar.key} transform={`translate(${transformX},${transformY})`}>\n              <Rect\n                datum={bar}\n                name={serie.name}\n                width={width}\n                height={height}\n                id={bar.key}\n                x={0}\n                xValue={x}\n                yValue={y}\n              />\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [\n      beginAtZero,\n      chartId,\n      colorScale,\n      finalYScale,\n      getXValue,\n      getYValue,\n      positiveSize,\n      serie.data,\n      serie.name,\n      subGroupScale,\n      xScale,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwCT;AAvCd,mBAA2C;AAC3C,kBAAqB;AACrB,0BAA6B;AAGtB,MAAM,iBAAiB,CAAC,EAAE,MAAM,MAAgC;AACrE,QAAM;AAAA,IACJ,OAAO;AAAA,MACL,OAAO,EAAE,YAAY;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,aAAa,OAAO,CAAC;AAC1C,QAAM,eAAe,aAAa;AAElC,aAAO;AAAA,IACL,MACE,4CAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAAG,UAAU,wBAAwB,YAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,IAAI,UAAU,GAAG;AACvB,YAAM,IAAI,UAAU,GAAG;AACvB,YAAM,OAAO,cAAc,IAAI,OAAO,OAAO,CAAC;AAC9C,YAAM,QAAQ,IAAI,IAAI,eAAe,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,OAAO,IAAI;AACxE,YAAM,SAAS,eAAe,UAAU;AACxC,YAAM,aAAa,IAAI,IAAI,OAAO,CAAC,IAAI,QAAQ,OAAO,IAAI;AAC1D,YAAM,aAAa,cAAc,MAAM,IAAI,IAAI,YAAY,CAAC;AAE5D,aACE,4CAAC,OAAgB,WAAW,aAAa,cAAc,eACrD;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,MAAM,MAAM;AAAA,UACZ;AAAA,UACA;AAAA,UACA,IAAI,IAAI;AAAA,UACR,GAAG;AAAA,UACH,QAAQ;AAAA,UACR,QAAQ;AAAA;AAAA,MACV,KAVM,IAAI,GAWZ;AAAA,IAEJ,CAAC,GACH;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport type { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const {\n    props: {\n      xAxis: { beginAtZero },\n    },\n    xScale,\n    yScale,\n    innerWidth,\n    y2Scale,\n    subGroupScale,\n    colorScale,\n    getXValue,\n    getYValue,\n    chartId,\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const negativeSize = innerWidth - xScale.get(0);\n  const positiveSize = innerWidth - negativeSize;\n\n  return useMemo(\n    () => (\n      <g fill={colorScale(serie.name)} clipPath={`url(#rect-focus-ring-${chartId})`}>\n        {serie.data.map((bar, i) => {\n          const x = getXValue(bar);\n          const y = getYValue(bar);\n          const minX = beginAtZero ? 0 : xScale.invert(0);\n          const width = x < 0 ? positiveSize - xScale.get(x) : xScale.get(x) - xScale.get(minX);\n          const height = subGroupScale?.bandwidth();\n          const transformX = x < 0 ? xScale.get(0) - width : xScale.get(minX);\n          const transformY = subGroupScale(serie.name) + finalYScale.get(y);\n\n          return (\n            <g key={bar.key} transform={`translate(${transformX},${transformY})`}>\n              <Rect\n                datum={bar}\n                name={serie.name}\n                width={width}\n                height={height}\n                id={bar.key}\n                x={0}\n                xValue={x}\n                yValue={y}\n              />\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [\n      beginAtZero,\n      chartId,\n      colorScale,\n      finalYScale,\n      getXValue,\n      getYValue,\n      positiveSize,\n      serie.data,\n      serie.name,\n      subGroupScale,\n      xScale,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwCT;AAvCd,mBAA2C;AAC3C,kBAAqB;AACrB,0BAA6B;AAGtB,MAAM,iBAAiB,CAAC,EAAE,MAAM,MAAgC;AACrE,QAAM;AAAA,IACJ,OAAO;AAAA,MACL,OAAO,EAAE,YAAY;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,aAAa,OAAO,IAAI,CAAC;AAC9C,QAAM,eAAe,aAAa;AAElC,aAAO;AAAA,IACL,MACE,4CAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAAG,UAAU,wBAAwB,YAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,IAAI,UAAU,GAAG;AACvB,YAAM,IAAI,UAAU,GAAG;AACvB,YAAM,OAAO,cAAc,IAAI,OAAO,OAAO,CAAC;AAC9C,YAAM,QAAQ,IAAI,IAAI,eAAe,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI,IAAI;AACpF,YAAM,SAAS,eAAe,UAAU;AACxC,YAAM,aAAa,IAAI,IAAI,OAAO,IAAI,CAAC,IAAI,QAAQ,OAAO,IAAI,IAAI;AAClE,YAAM,aAAa,cAAc,MAAM,IAAI,IAAI,YAAY,IAAI,CAAC;AAEhE,aACE,4CAAC,OAAgB,WAAW,aAAa,cAAc,eACrD;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,MAAM,MAAM;AAAA,UACZ;AAAA,UACA;AAAA,UACA,IAAI,IAAI;AAAA,UACR,GAAG;AAAA,UACH,QAAQ;AAAA,UACR,QAAQ;AAAA;AAAA,MACV,KAVM,IAAI,GAWZ;AAAA,IAEJ,CAAC,GACH;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/HorizontalStackedBars.js

@@ -50,10 +50,10 @@ const HorizontalStackedBars = ({ serie }) => {
     const isFloorStack = sequence[0] === 0;
     const xValue = sequence[1] - sequence[0];
     const yValue = getYValue(serie.data[i]);
-    const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 2 : 0);
+    const width = xScale.get(sequence[1]) - xScale.get(sequence[0]) - (!isFloorStack ? 2 : 0);
     const height = subGroupScale?.bandwidth();
-    const transformX = xScale(sequence[0]) + (!isFloorStack ? 2 : 0);
-    const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yValue);
+    const transformX = xScale.get(sequence[0]) + (!isFloorStack ? 2 : 0);
+    const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale.get(yValue);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { clipPath: `url(#rect-focus-ring-${chartId})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { fill: colorScale(serie.name), transform: `translate(0, ${transformY})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Rect.Rect,
       {

package/dist/cjs/graphs/Chart/series/HorizontalStackedBars.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/HorizontalStackedBars.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\nimport type { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalStackedBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getYValue,\n  } = useContext(ChartContext);\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g>\n      {serieWithStackedValues.map((sequence, i) => {\n        const isFloorStack = sequence[0] === 0;\n        const xValue = sequence[1] - sequence[0];\n        const yValue = getYValue(serie.data[i]);\n\n        const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 2 : 0);\n\n        const height = subGroupScale?.bandwidth();\n\n        const transformX = xScale(sequence[0]) + (!isFloorStack ? 2 : 0);\n        const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yValue);\n\n        return (\n          <g key={serie.data[i].key} clipPath={`url(#rect-focus-ring-${chartId})`}>\n            <g fill={colorScale(serie.name)} transform={`translate(0, ${transformY})`}>\n              <Rect\n                width={width}\n                height={height}\n                x={transformX}\n                xValue={xValue}\n                yValue={yValue}\n                id={serie.data[i].key}\n                name={serie.name}\n                datum={serie.data[i]}\n              />\n            </g>\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCT;AArCd,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAGzC,MAAM,wBAAwB,CAAC,EAAE,MAAM,MAAgC;AAC5E,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,QAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAM,iBAAa,gCAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,4CAAC,OACE,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,UAAM,eAAe,SAAS,OAAO;AACrC,UAAM,SAAS,SAAS,KAAK,SAAS;AACtC,UAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AAEtC,UAAM,QAAQ,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAE/E,UAAM,SAAS,eAAe,UAAU;AAExC,UAAM,aAAa,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAC9D,UAAM,aAAa,cAAc,gBAAgB,YAAY,IAAI,OAAO,MAAM;AAE9E,WACE,4CAAC,OAA0B,UAAU,wBAAwB,YAC3D,sDAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAAG,WAAW,gBAAgB,eAC1D;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA,IAAI,MAAM,KAAK,GAAG;AAAA,QAClB,MAAM,MAAM;AAAA,QACZ,OAAO,MAAM,KAAK;AAAA;AAAA,IACpB,GACF,KAZM,MAAM,KAAK,GAAG,GAatB;AAAA,EAEJ,CAAC,GACH;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\nimport type { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalStackedBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getYValue,\n  } = useContext(ChartContext);\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g>\n      {serieWithStackedValues.map((sequence, i) => {\n        const isFloorStack = sequence[0] === 0;\n        const xValue = sequence[1] - sequence[0];\n        const yValue = getYValue(serie.data[i]);\n\n        const width = xScale.get(sequence[1]) - xScale.get(sequence[0]) - (!isFloorStack ? 2 : 0);\n\n        const height = subGroupScale?.bandwidth();\n\n        const transformX = xScale.get(sequence[0]) + (!isFloorStack ? 2 : 0);\n        const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale.get(yValue);\n\n        return (\n          <g key={serie.data[i].key} clipPath={`url(#rect-focus-ring-${chartId})`}>\n            <g fill={colorScale(serie.name)} transform={`translate(0, ${transformY})`}>\n              <Rect\n                width={width}\n                height={height}\n                x={transformX}\n                xValue={xValue}\n                yValue={yValue}\n                id={serie.data[i].key}\n                name={serie.name}\n                datum={serie.data[i]}\n              />\n            </g>\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCT;AArCd,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAGzC,MAAM,wBAAwB,CAAC,EAAE,MAAM,MAAgC;AAC5E,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,QAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAM,iBAAa,gCAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,4CAAC,OACE,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,UAAM,eAAe,SAAS,OAAO;AACrC,UAAM,SAAS,SAAS,KAAK,SAAS;AACtC,UAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AAEtC,UAAM,QAAQ,OAAO,IAAI,SAAS,EAAE,IAAI,OAAO,IAAI,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAEvF,UAAM,SAAS,eAAe,UAAU;AAExC,UAAM,aAAa,OAAO,IAAI,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAClE,UAAM,aAAa,cAAc,gBAAgB,YAAY,IAAI,OAAO,IAAI,MAAM;AAElF,WACE,4CAAC,OAA0B,UAAU,wBAAwB,YAC3D,sDAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAAG,WAAW,gBAAgB,eAC1D;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA,IAAI,MAAM,KAAK,GAAG;AAAA,QAClB,MAAM,MAAM;AAAA,QACZ,OAAO,MAAM,KAAK;AAAA;AAAA,IACpB,GACF,KAZM,MAAM,KAAK,GAAG,GAatB;AAAA,EAEJ,CAAC,GACH;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/Line.js

@@ -45,7 +45,7 @@ const Line = ({ serie }) => {
     [serie.curveStyle]
   );
   const lineD3 = (0, import_react.useMemo)(
-    () => (0, import_d3.line)().x((d) => xScale(getXValue(d))).y((d) => finalYScale(getYValue(d))).curve(curveStyle),
+    () => (0, import_d3.line)().x((d) => xScale.get(getXValue(d))).y((d) => finalYScale.get(getYValue(d))).curve(curveStyle),
     [curveStyle, finalYScale, getXValue, getYValue, xScale]
   );
   (0, import_react.useEffect)(() => {
@@ -57,7 +57,7 @@ const Line = ({ serie }) => {
     if (serie.dashStyle)
       path.attr("stroke-dasharray", import_constants.LINE.DASH_STYLE_VALUES[serie.dashStyle]);
   }, [colorScale, finalYScale, getXValue, getYValue, lineD3, serie, xScale]);
-  const xTranslate = (0, import_react.useMemo)(() => (xScale?.bandwidth?.() ?? 0) / 2, [xScale]);
+  const xTranslate = (0, import_react.useMemo)(() => (xScale?.getBandwidth?.() ?? 0) / 2, [xScale]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_A11yRegion.A11yRegion, { serieName: serie.name, transform: `translate(${xTranslate}, 0)`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { ref, "data-testid": import_DataTestIds.DataVizDataTestIds.LINE }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Points.Points, { serie })

package/dist/cjs/graphs/Chart/series/Line.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Line.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useEffect, useMemo, useRef } from 'react';\nimport { line, select } from 'd3';\nimport { Points } from './Points';\nimport { ChartContext } from '../ChartContext';\nimport { LINE, curveStyleMap } from '../../constants';\nimport { DataVizDataTestIds } from '../DataTestIds';\nimport { A11yRegion } from '../parts/A11yRegion';\nimport type { DSChartT } from '../react-desc-prop-types';\n\ninterface LineSerieT {\n  serie: DSChartT.InternalSerie;\n}\nexport const Line: React.ComponentType<LineSerieT> = ({ serie }) => {\n  const { xScale, yScale, y2Scale, colorScale, getXValue, getYValue } = useContext(ChartContext);\n\n  const ref = useRef<SVGGElement>(null);\n\n  const finalYScale = useMemo(() => (serie.scale === 'y2' ? y2Scale : yScale), [serie.scale, y2Scale, yScale]);\n\n  const curveStyle = useMemo(\n    () => curveStyleMap[serie.curveStyle] ?? curveStyleMap[LINE.CURVE_STYLE.LINEAR],\n    [serie.curveStyle],\n  );\n\n  const lineD3 = useMemo(\n    () =>\n      line()\n        .x((d) => xScale(getXValue(d)))\n        .y((d) => finalYScale(getYValue(d)))\n        .curve(curveStyle),\n    [curveStyle, finalYScale, getXValue, getYValue, xScale],\n  );\n\n  useEffect(() => {\n    if (!ref.current) return;\n\n    const groupContent = select(ref?.current);\n\n    groupContent.selectAll('*').remove();\n    const path = groupContent\n      .append('path')\n      .datum(serie.data)\n      .attr('fill', 'none')\n      .attr('stroke', colorScale(serie.name))\n      .attr('stroke-linejoin', 'round')\n      .attr('stroke-width', 2)\n      .attr('d', lineD3);\n\n    if (serie.dashStyle) path.attr('stroke-dasharray', LINE.DASH_STYLE_VALUES[serie.dashStyle]);\n  }, [colorScale, finalYScale, getXValue, getYValue, lineD3, serie, xScale]);\n\n  // we need to center the points and lines when\n  // using them in a band axis context\n  const xTranslate = useMemo(() => (xScale?.bandwidth?.() ?? 0) / 2, [xScale]);\n\n  return (\n    <A11yRegion serieName={serie.name} transform={`translate(${xTranslate}, 0)`}>\n      <g ref={ref} data-testid={DataVizDataTestIds.LINE} />\n      <Points serie={serie} />\n    </A11yRegion>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwDnB;AAxDJ,mBAA8D;AAC9D,gBAA6B;AAC7B,oBAAuB;AACvB,0BAA6B;AAC7B,uBAAoC;AACpC,yBAAmC;AACnC,wBAA2B;AAMpB,MAAM,OAAwC,CAAC,EAAE,MAAM,MAAM;AAClE,QAAM,EAAE,QAAQ,QAAQ,SAAS,YAAY,WAAW,UAAU,QAAI,yBAAW,gCAAY;AAE7F,QAAM,UAAM,qBAAoB,IAAI;AAEpC,QAAM,kBAAc,sBAAQ,MAAO,MAAM,UAAU,OAAO,UAAU,QAAS,CAAC,MAAM,OAAO,SAAS,MAAM,CAAC;AAE3G,QAAM,iBAAa;AAAA,IACjB,MAAM,+BAAc,MAAM,eAAe,+BAAc,sBAAK,YAAY;AAAA,IACxE,CAAC,MAAM,UAAU;AAAA,EACnB;AAEA,QAAM,aAAS;AAAA,IACb,UACE,gBAAK,EACF,EAAE,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC,CAAC,EAC7B,EAAE,CAAC,MAAM,YAAY,UAAU,CAAC,CAAC,CAAC,EAClC,MAAM,UAAU;AAAA,IACrB,CAAC,YAAY,aAAa,WAAW,WAAW,MAAM;AAAA,EACxD;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,IAAI;AAAS;AAElB,UAAM,mBAAe,kBAAO,KAAK,OAAO;AAExC,iBAAa,UAAU,GAAG,EAAE,OAAO;AACnC,UAAM,OAAO,aACV,OAAO,MAAM,EACb,MAAM,MAAM,IAAI,EAChB,KAAK,QAAQ,MAAM,EACnB,KAAK,UAAU,WAAW,MAAM,IAAI,CAAC,EACrC,KAAK,mBAAmB,OAAO,EAC/B,KAAK,gBAAgB,CAAC,EACtB,KAAK,KAAK,MAAM;AAEnB,QAAI,MAAM;AAAW,WAAK,KAAK,oBAAoB,sBAAK,kBAAkB,MAAM,UAAU;AAAA,EAC5F,GAAG,CAAC,YAAY,aAAa,WAAW,WAAW,QAAQ,OAAO,MAAM,CAAC;AAIzE,QAAM,iBAAa,sBAAQ,OAAO,QAAQ,YAAY,KAAK,KAAK,GAAG,CAAC,MAAM,CAAC;AAE3E,SACE,6CAAC,gCAAW,WAAW,MAAM,MAAM,WAAW,aAAa,kBACzD;AAAA,gDAAC,OAAE,KAAU,eAAa,sCAAmB,MAAM;AAAA,IACnD,4CAAC,wBAAO,OAAc;AAAA,KACxB;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useEffect, useMemo, useRef } from 'react';\nimport { line, select } from 'd3';\nimport { Points } from './Points';\nimport { ChartContext } from '../ChartContext';\nimport { LINE, curveStyleMap } from '../../constants';\nimport { DataVizDataTestIds } from '../DataTestIds';\nimport { A11yRegion } from '../parts/A11yRegion';\nimport type { DSChartT } from '../react-desc-prop-types';\n\ninterface LineSerieT {\n  serie: DSChartT.InternalSerie;\n}\nexport const Line: React.ComponentType<LineSerieT> = ({ serie }) => {\n  const { xScale, yScale, y2Scale, colorScale, getXValue, getYValue } = useContext(ChartContext);\n\n  const ref = useRef<SVGGElement>(null);\n\n  const finalYScale = useMemo(() => (serie.scale === 'y2' ? y2Scale : yScale), [serie.scale, y2Scale, yScale]);\n\n  const curveStyle = useMemo(\n    () => curveStyleMap[serie.curveStyle] ?? curveStyleMap[LINE.CURVE_STYLE.LINEAR],\n    [serie.curveStyle],\n  );\n\n  const lineD3 = useMemo(\n    () =>\n      line()\n        .x((d) => xScale.get(getXValue(d)))\n        .y((d) => finalYScale.get(getYValue(d)))\n        .curve(curveStyle),\n    [curveStyle, finalYScale, getXValue, getYValue, xScale],\n  );\n\n  useEffect(() => {\n    if (!ref.current) return;\n\n    const groupContent = select(ref?.current);\n\n    groupContent.selectAll('*').remove();\n    const path = groupContent\n      .append('path')\n      .datum(serie.data)\n      .attr('fill', 'none')\n      .attr('stroke', colorScale(serie.name))\n      .attr('stroke-linejoin', 'round')\n      .attr('stroke-width', 2)\n      .attr('d', lineD3);\n\n    if (serie.dashStyle) path.attr('stroke-dasharray', LINE.DASH_STYLE_VALUES[serie.dashStyle]);\n  }, [colorScale, finalYScale, getXValue, getYValue, lineD3, serie, xScale]);\n\n  // we need to center the points and lines when\n  // using them in a band axis context\n  const xTranslate = useMemo(() => (xScale?.getBandwidth?.() ?? 0) / 2, [xScale]);\n\n  return (\n    <A11yRegion serieName={serie.name} transform={`translate(${xTranslate}, 0)`}>\n      <g ref={ref} data-testid={DataVizDataTestIds.LINE} />\n      <Points serie={serie} />\n    </A11yRegion>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwDnB;AAxDJ,mBAA8D;AAC9D,gBAA6B;AAC7B,oBAAuB;AACvB,0BAA6B;AAC7B,uBAAoC;AACpC,yBAAmC;AACnC,wBAA2B;AAMpB,MAAM,OAAwC,CAAC,EAAE,MAAM,MAAM;AAClE,QAAM,EAAE,QAAQ,QAAQ,SAAS,YAAY,WAAW,UAAU,QAAI,yBAAW,gCAAY;AAE7F,QAAM,UAAM,qBAAoB,IAAI;AAEpC,QAAM,kBAAc,sBAAQ,MAAO,MAAM,UAAU,OAAO,UAAU,QAAS,CAAC,MAAM,OAAO,SAAS,MAAM,CAAC;AAE3G,QAAM,iBAAa;AAAA,IACjB,MAAM,+BAAc,MAAM,eAAe,+BAAc,sBAAK,YAAY;AAAA,IACxE,CAAC,MAAM,UAAU;AAAA,EACnB;AAEA,QAAM,aAAS;AAAA,IACb,UACE,gBAAK,EACF,EAAE,CAAC,MAAM,OAAO,IAAI,UAAU,CAAC,CAAC,CAAC,EACjC,EAAE,CAAC,MAAM,YAAY,IAAI,UAAU,CAAC,CAAC,CAAC,EACtC,MAAM,UAAU;AAAA,IACrB,CAAC,YAAY,aAAa,WAAW,WAAW,MAAM;AAAA,EACxD;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,IAAI;AAAS;AAElB,UAAM,mBAAe,kBAAO,KAAK,OAAO;AAExC,iBAAa,UAAU,GAAG,EAAE,OAAO;AACnC,UAAM,OAAO,aACV,OAAO,MAAM,EACb,MAAM,MAAM,IAAI,EAChB,KAAK,QAAQ,MAAM,EACnB,KAAK,UAAU,WAAW,MAAM,IAAI,CAAC,EACrC,KAAK,mBAAmB,OAAO,EAC/B,KAAK,gBAAgB,CAAC,EACtB,KAAK,KAAK,MAAM;AAEnB,QAAI,MAAM;AAAW,WAAK,KAAK,oBAAoB,sBAAK,kBAAkB,MAAM,UAAU;AAAA,EAC5F,GAAG,CAAC,YAAY,aAAa,WAAW,WAAW,QAAQ,OAAO,MAAM,CAAC;AAIzE,QAAM,iBAAa,sBAAQ,OAAO,QAAQ,eAAe,KAAK,KAAK,GAAG,CAAC,MAAM,CAAC;AAE9E,SACE,6CAAC,gCAAW,WAAW,MAAM,MAAM,WAAW,aAAa,kBACzD;AAAA,gDAAC,OAAE,KAAU,eAAa,sCAAmB,MAAM;AAAA,IACnD,4CAAC,wBAAO,OAAc;AAAA,KACxB;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/Points.js

@@ -53,8 +53,8 @@ const Points = ({ serie }) => {
       const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;
       const x = getXValue(point);
       const y = getYValue(point);
-      const xPosition = xScale(x);
-      const yPosition = finalYScale(y + deltaY);
+      const xPosition = xScale.get(x);
+      const yPosition = finalYScale.get(y + deltaY);
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Point.Point,
         {

package/dist/cjs/graphs/Chart/series/Points.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Points.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Point } from './Point';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData } from '../helpers';\n\nexport const Points = ({ serie }) => {\n  const {\n    colorScale,\n    xScale,\n    y2Scale,\n    yScale,\n    getXValue,\n    getYValue,\n    stackedData,\n    props: { types },\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const opacity = useMemo(() => (types === 'scatter' ? 0.8 : 1), [serie.type]);\n  return useMemo(\n    () => (\n      <g fill={colorScale(serie.name)}>\n        {serie.data.map((point, i) => {\n          const { pointRadius, pointStyle } = serie;\n          // we need to recalculate the height  with stacked data if is an AREA STACKED ELEMENT\n          const serieWithStackedValues = getStackedData(stackedData, serie);\n          const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;\n          const x = getXValue(point);\n          const y = getYValue(point);\n          const xPosition = xScale(x);\n          const yPosition = finalYScale(y + deltaY);\n\n          return (\n            <Point\n              pointRadius={pointRadius}\n              id={point.key}\n              opacity={opacity}\n              x={xPosition}\n              y={yPosition}\n              xValue={x}\n              yValue={y}\n              pointStyle={pointStyle}\n              name={serie.name}\n              datum={point}\n              key={`${point.key}-p`}\n            />\n          );\n        })}\n      </g>\n    ),\n    [colorScale, finalYScale, getXValue, getYValue, opacity, serie, stackedData, xScale],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCX;AAjCZ,mBAA2C;AAC3C,mBAAsB;AACtB,0BAA6B;AAC7B,qBAA+B;AAExB,MAAM,SAAS,CAAC,EAAE,MAAM,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,cAAU,sBAAQ,MAAO,UAAU,YAAY,MAAM,GAAI,CAAC,MAAM,IAAI,CAAC;AAC3E,aAAO;AAAA,IACL,MACE,4CAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAC3B,gBAAM,KAAK,IAAI,CAAC,OAAO,MAAM;AAC5B,YAAM,EAAE,aAAa,WAAW,IAAI;AAEpC,YAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,YAAM,SAAS,yBAAyB,uBAAuB,GAAG,KAAK;AACvE,YAAM,IAAI,UAAU,KAAK;AACzB,YAAM,IAAI,UAAU,KAAK;AACzB,YAAM,YAAY,OAAO,CAAC;AAC1B,YAAM,YAAY,YAAY,IAAI,MAAM;AAExC,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,IAAI,MAAM;AAAA,UACV;AAAA,UACA,GAAG;AAAA,UACH,GAAG;AAAA,UACH,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR;AAAA,UACA,MAAM,MAAM;AAAA,UACZ,OAAO;AAAA;AAAA,QACF,GAAG,MAAM;AAAA,MAChB;AAAA,IAEJ,CAAC,GACH;AAAA,IAEF,CAAC,YAAY,aAAa,WAAW,WAAW,SAAS,OAAO,aAAa,MAAM;AAAA,EACrF;AACF;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Point } from './Point';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData } from '../helpers';\n\nexport const Points = ({ serie }) => {\n  const {\n    colorScale,\n    xScale,\n    y2Scale,\n    yScale,\n    getXValue,\n    getYValue,\n    stackedData,\n    props: { types },\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const opacity = useMemo(() => (types === 'scatter' ? 0.8 : 1), [serie.type]);\n  return useMemo(\n    () => (\n      <g fill={colorScale(serie.name)}>\n        {serie.data.map((point, i) => {\n          const { pointRadius, pointStyle } = serie;\n          // we need to recalculate the height  with stacked data if is an AREA STACKED ELEMENT\n          const serieWithStackedValues = getStackedData(stackedData, serie);\n          const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;\n          const x = getXValue(point);\n          const y = getYValue(point);\n          const xPosition = xScale.get(x);\n          const yPosition = finalYScale.get(y + deltaY);\n\n          return (\n            <Point\n              pointRadius={pointRadius}\n              id={point.key}\n              opacity={opacity}\n              x={xPosition}\n              y={yPosition}\n              xValue={x}\n              yValue={y}\n              pointStyle={pointStyle}\n              name={serie.name}\n              datum={point}\n              key={`${point.key}-p`}\n            />\n          );\n        })}\n      </g>\n    ),\n    [colorScale, finalYScale, getXValue, getYValue, opacity, serie, stackedData, xScale],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCX;AAjCZ,mBAA2C;AAC3C,mBAAsB;AACtB,0BAA6B;AAC7B,qBAA+B;AAExB,MAAM,SAAS,CAAC,EAAE,MAAM,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,cAAU,sBAAQ,MAAO,UAAU,YAAY,MAAM,GAAI,CAAC,MAAM,IAAI,CAAC;AAC3E,aAAO;AAAA,IACL,MACE,4CAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAC3B,gBAAM,KAAK,IAAI,CAAC,OAAO,MAAM;AAC5B,YAAM,EAAE,aAAa,WAAW,IAAI;AAEpC,YAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,YAAM,SAAS,yBAAyB,uBAAuB,GAAG,KAAK;AACvE,YAAM,IAAI,UAAU,KAAK;AACzB,YAAM,IAAI,UAAU,KAAK;AACzB,YAAM,YAAY,OAAO,IAAI,CAAC;AAC9B,YAAM,YAAY,YAAY,IAAI,IAAI,MAAM;AAE5C,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,IAAI,MAAM;AAAA,UACV;AAAA,UACA,GAAG;AAAA,UACH,GAAG;AAAA,UACH,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR;AAAA,UACA,MAAM,MAAM;AAAA,UACZ,OAAO;AAAA;AAAA,QACF,GAAG,MAAM;AAAA,MAChB;AAAA,IAEJ,CAAC,GACH;AAAA,IAEF,CAAC,YAAY,aAAa,WAAW,WAAW,SAAS,OAAO,aAAa,MAAM;AAAA,EACrF;AACF;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/Rect.js

@@ -58,7 +58,7 @@ const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id,
     if (isHorizontal)
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("animate", { attributeName: "x", from: -innerWidth, to: x, dur: "0.4s", fill: "both" });
     if (isNegative)
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("animate", { attributeName: "y", from: yScale(0), to: -y, dur: "0.40s", fill: "both" });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("animate", { attributeName: "y", from: yScale.get(0), to: -y, dur: "0.40s", fill: "both" });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("animate", { attributeName: "y", from: -innerHeight - y, to: -y, dur: "0.40s", fill: "both" });
   }, [innerHeight, innerWidth, isGrabbed, isHorizontal, isNegative, x, y, yScale]);
   const clipPathSign = (0, import_react.useMemo)(() => {

package/dist/cjs/graphs/Chart/series/Rect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Rect.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo, useContext, useCallback } from 'react';\n\nimport { ChartContext } from '../ChartContext';\nimport { FOCUS_RING } from '../../constants';\nimport { FocusableRegion } from '../parts/FocusableRegion';\nimport { DataVizDataTestIds } from '../DataTestIds';\n\nexport const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id, xValue, yValue, datum }) => {\n  const {\n    activePoint,\n    isGrabbed,\n    chartId,\n    isHorizontal,\n    innerWidth,\n    yScale,\n    innerHeight,\n    setActivePoint,\n    getYValueFormatted,\n    getXValueFormatted,\n    props: { TooltipRenderer, scrapper, xAxis, yAxis, y2Axis },\n  } = useContext(ChartContext);\n  const finalYAxis = datum.scale === 'y2' ? y2Axis : yAxis;\n  const yValueFormatted = getYValueFormatted(datum);\n  const xValueFormatted = getXValueFormatted(datum);\n\n  const isFocused = activePoint?.key === id;\n  const animation = useMemo(() => {\n    if (isGrabbed) return null;\n    if (isHorizontal) return <animate attributeName=\"x\" from={-innerWidth} to={x} dur=\"0.4s\" fill=\"both\" />;\n    if (isNegative) return <animate attributeName=\"y\" from={yScale(0)} to={-y} dur=\"0.40s\" fill=\"both\" />;\n    return <animate attributeName=\"y\" from={-innerHeight - y} to={-y} dur=\"0.40s\" fill=\"both\" />;\n  }, [innerHeight, innerWidth, isGrabbed, isHorizontal, isNegative, x, y, yScale]);\n\n  const clipPathSign = useMemo(() => {\n    // @todo horizontal clip paths\n    if (isHorizontal) return '';\n    if (isNegative) return `url(#rects-negative-${chartId})`;\n    return `url(#rects-positive-${chartId})`;\n  }, [chartId, isHorizontal, isNegative]);\n\n  const transform = useMemo(() => {\n    if (isHorizontal) return ``;\n    return `scale(1,-1) translate(0,${-height})`;\n  }, [height, isHorizontal]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (!scrapper) setActivePoint(datum);\n  }, [datum, scrapper, setActivePoint]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (!scrapper) setActivePoint(null);\n  }, [scrapper, setActivePoint]);\n\n  return useMemo(\n    () => (\n      <g clipPath={clipPathSign}>\n        <g\n          id={isFocused ? `data-focused-${chartId}` : ''}\n          transform={transform}\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleOnMouseLeave}\n          data-testid={DataVizDataTestIds.BAR}\n        >\n          {isFocused ? (\n            <rect\n              x={(isHorizontal ? x : 0) - FOCUS_RING.STROKE_WIDTH}\n              y={(!isHorizontal ? -y : 0) - FOCUS_RING.STROKE_WIDTH}\n              width={width + FOCUS_RING.OFFSET}\n              height={height + FOCUS_RING.OFFSET}\n              fill=\"none\"\n              rx=\"1\"\n              ry=\"1\"\n              stroke={FOCUS_RING.COLOR}\n              strokeWidth={FOCUS_RING.STROKE_WIDTH}\n            ></rect>\n          ) : null}\n          <rect\n            width={width}\n            height={height}\n            y={-y}\n            x={x}\n            aria-label={`${datum.serie} ${xAxis.label || ''} ${xValueFormatted} ${\n              finalYAxis?.label || ''\n            } ${yValueFormatted}`}\n            role=\"img\"\n            tabIndex={-1}\n            ref={(_ref) => {\n              if (isFocused) {\n                _ref?.focus();\n              }\n            }}\n          >\n            {/* {animation} */}\n          </rect>\n          {activePoint?.key === id && TooltipRenderer ? (\n            <FocusableRegion\n              id={id}\n              y={y}\n              x={x}\n              width={width}\n              height={height}\n              transform={transform}\n              content={<TooltipRenderer data={[{ name, yValue, xValue }]} />}\n            />\n          ) : (\n            ''\n          )}\n        </g>\n      </g>\n    ),\n    [\n      clipPathSign,\n      isFocused,\n      chartId,\n      transform,\n      handleMouseEnter,\n      handleOnMouseLeave,\n      isHorizontal,\n      x,\n      y,\n      width,\n      height,\n      datum.serie,\n      xAxis.label,\n      xValueFormatted,\n      finalYAxis?.label,\n      yValueFormatted,\n      activePoint?.key,\n      id,\n      TooltipRenderer,\n      name,\n      yValue,\n      xValue,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useMemo, useContext, useCallback } from 'react';\n\nimport { ChartContext } from '../ChartContext';\nimport { FOCUS_RING } from '../../constants';\nimport { FocusableRegion } from '../parts/FocusableRegion';\nimport { DataVizDataTestIds } from '../DataTestIds';\n\nexport const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id, xValue, yValue, datum }) => {\n  const {\n    activePoint,\n    isGrabbed,\n    chartId,\n    isHorizontal,\n    innerWidth,\n    yScale,\n    innerHeight,\n    setActivePoint,\n    getYValueFormatted,\n    getXValueFormatted,\n    props: { TooltipRenderer, scrapper, xAxis, yAxis, y2Axis },\n  } = useContext(ChartContext);\n  const finalYAxis = datum.scale === 'y2' ? y2Axis : yAxis;\n  const yValueFormatted = getYValueFormatted(datum);\n  const xValueFormatted = getXValueFormatted(datum);\n\n  const isFocused = activePoint?.key === id;\n  const animation = useMemo(() => {\n    if (isGrabbed) return null;\n    if (isHorizontal) return <animate attributeName=\"x\" from={-innerWidth} to={x} dur=\"0.4s\" fill=\"both\" />;\n    if (isNegative) return <animate attributeName=\"y\" from={yScale.get(0)} to={-y} dur=\"0.40s\" fill=\"both\" />;\n    return <animate attributeName=\"y\" from={-innerHeight - y} to={-y} dur=\"0.40s\" fill=\"both\" />;\n  }, [innerHeight, innerWidth, isGrabbed, isHorizontal, isNegative, x, y, yScale]);\n\n  const clipPathSign = useMemo(() => {\n    // @todo horizontal clip paths\n    if (isHorizontal) return '';\n    if (isNegative) return `url(#rects-negative-${chartId})`;\n    return `url(#rects-positive-${chartId})`;\n  }, [chartId, isHorizontal, isNegative]);\n\n  const transform = useMemo(() => {\n    if (isHorizontal) return ``;\n    return `scale(1,-1) translate(0,${-height})`;\n  }, [height, isHorizontal]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (!scrapper) setActivePoint(datum);\n  }, [datum, scrapper, setActivePoint]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (!scrapper) setActivePoint(null);\n  }, [scrapper, setActivePoint]);\n\n  return useMemo(\n    () => (\n      <g clipPath={clipPathSign}>\n        <g\n          id={isFocused ? `data-focused-${chartId}` : ''}\n          transform={transform}\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleOnMouseLeave}\n          data-testid={DataVizDataTestIds.BAR}\n        >\n          {isFocused ? (\n            <rect\n              x={(isHorizontal ? x : 0) - FOCUS_RING.STROKE_WIDTH}\n              y={(!isHorizontal ? -y : 0) - FOCUS_RING.STROKE_WIDTH}\n              width={width + FOCUS_RING.OFFSET}\n              height={height + FOCUS_RING.OFFSET}\n              fill=\"none\"\n              rx=\"1\"\n              ry=\"1\"\n              stroke={FOCUS_RING.COLOR}\n              strokeWidth={FOCUS_RING.STROKE_WIDTH}\n            ></rect>\n          ) : null}\n          <rect\n            width={width}\n            height={height}\n            y={-y}\n            x={x}\n            aria-label={`${datum.serie} ${xAxis.label || ''} ${xValueFormatted} ${\n              finalYAxis?.label || ''\n            } ${yValueFormatted}`}\n            role=\"img\"\n            tabIndex={-1}\n            ref={(_ref) => {\n              if (isFocused) {\n                _ref?.focus();\n              }\n            }}\n          >\n            {/* {animation} */}\n          </rect>\n          {activePoint?.key === id && TooltipRenderer ? (\n            <FocusableRegion\n              id={id}\n              y={y}\n              x={x}\n              width={width}\n              height={height}\n              transform={transform}\n              content={<TooltipRenderer data={[{ name, yValue, xValue }]} />}\n            />\n          ) : (\n            ''\n          )}\n        </g>\n      </g>\n    ),\n    [\n      clipPathSign,\n      isFocused,\n      chartId,\n      transform,\n      handleMouseEnter,\n      handleOnMouseLeave,\n      isHorizontal,\n      x,\n      y,\n      width,\n      height,\n      datum.serie,\n      xAxis.label,\n      xValueFormatted,\n      finalYAxis?.label,\n      yValueFormatted,\n      activePoint?.key,\n      id,\n      TooltipRenderer,\n      name,\n      yValue,\n      xValue,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/StackedBar.js

@@ -52,9 +52,9 @@ const StackedBar = ({ serie }) => {
     const xValue = getXValue(bar);
     const yValue = sequence[1] - sequence[0];
     const width = subGroupScale?.bandwidth();
-    const height = yScale(sequence[0]) - yScale(sequence[1]) - (!isFloorStack ? 1 : 0);
-    const transformY = yScale(sequence[1]) + (sequence[0] < 0 ? 2 : 0);
-    const transformX = !xScale.bandwidth ? xScale(xValue) - width / 2 : xScale(xValue) + subGroupScale(`stacked-data-${stackIndex}`);
+    const height = yScale.get(sequence[0]) - yScale.get(sequence[1]) - (!isFloorStack ? 1 : 0);
+    const transformY = yScale.get(sequence[1]) + (sequence[0] < 0 ? 2 : 0);
+    const transformX = xScale.type !== "BAND" ? xScale.get(xValue) - width / 2 : xScale.get(xValue) + subGroupScale(`stacked-data-${stackIndex}`);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { fill: colorScale(serie.name), transform: `translate(${transformX},0)`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Rect.Rect,
       {

package/dist/cjs/graphs/Chart/series/StackedBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/StackedBar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\n\nexport const StackedBar = ({ serie }) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getXValue,\n  } = useContext(ChartContext);\n\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g clipPath={`url(#rect-focus-ring-${chartId})`}>\n      {serie.data.map((bar, i) => {\n        const sequence = serieWithStackedValues[bar.position];\n        const isFloorStack = sequence[0] === 0;\n\n        const xValue = getXValue(bar);\n\n        const yValue = sequence[1] - sequence[0];\n        const width = subGroupScale?.bandwidth();\n        const height = yScale(sequence[0]) - yScale(sequence[1]) - (!isFloorStack ? 1 : 0);\n        // const transformX = xScale(xValue) + subGroupScale(`stacked-data-${stackIndex}`);\n        const transformY = yScale(sequence[1]) + (sequence[0] < 0 ? 2 : 0);\n\n        const transformX = !xScale.bandwidth\n          ? xScale(xValue) - width / 2\n          : // ? subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0)\n            xScale(xValue) + subGroupScale(`stacked-data-${stackIndex}`);\n\n        return (\n          <g key={serie.data[i].key} fill={colorScale(serie.name)} transform={`translate(${transformX},0)`}>\n            <Rect\n              width={width}\n              height={height}\n              xValue={xValue}\n              yValue={yValue}\n              y={transformY}\n              id={serie.data[i].key}\n              name={serie.name}\n              datum={bar}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CX;AAzCZ,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAEzC,MAAM,aAAa,CAAC,EAAE,MAAM,MAAM;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAM,iBAAa,gCAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,4CAAC,OAAE,UAAU,wBAAwB,YAClC,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,UAAM,WAAW,uBAAuB,IAAI;AAC5C,UAAM,eAAe,SAAS,OAAO;AAErC,UAAM,SAAS,UAAU,GAAG;AAE5B,UAAM,SAAS,SAAS,KAAK,SAAS;AACtC,UAAM,QAAQ,eAAe,UAAU;AACvC,UAAM,SAAS,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAEhF,UAAM,aAAa,OAAO,SAAS,EAAE,KAAK,SAAS,KAAK,IAAI,IAAI;AAEhE,UAAM,aAAa,CAAC,OAAO,YACvB,OAAO,MAAM,IAAI,QAAQ,IAEzB,OAAO,MAAM,IAAI,cAAc,gBAAgB,YAAY;AAE/D,WACE,4CAAC,OAA0B,MAAM,WAAW,MAAM,IAAI,GAAG,WAAW,aAAa,iBAC/E;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,QACH,IAAI,MAAM,KAAK,GAAG;AAAA,QAClB,MAAM,MAAM;AAAA,QACZ,OAAO;AAAA;AAAA,IACT,KAVM,MAAM,KAAK,GAAG,GAWtB;AAAA,EAEJ,CAAC,GACH;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\n\nexport const StackedBar = ({ serie }) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getXValue,\n  } = useContext(ChartContext);\n\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g clipPath={`url(#rect-focus-ring-${chartId})`}>\n      {serie.data.map((bar, i) => {\n        const sequence = serieWithStackedValues[bar.position];\n        const isFloorStack = sequence[0] === 0;\n\n        const xValue = getXValue(bar);\n\n        const yValue = sequence[1] - sequence[0];\n        const width = subGroupScale?.bandwidth();\n        const height = yScale.get(sequence[0]) - yScale.get(sequence[1]) - (!isFloorStack ? 1 : 0);\n        // const transformX = xScale.get(xValue) + subGroupScale(`stacked-data-${stackIndex}`);\n        const transformY = yScale.get(sequence[1]) + (sequence[0] < 0 ? 2 : 0);\n\n        const transformX =\n          xScale.type !== 'BAND'\n            ? xScale.get(xValue) - width / 2\n            : // ? subGroupScale(serie.name) + xScale.get(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0)\n              xScale.get(xValue) + subGroupScale(`stacked-data-${stackIndex}`);\n\n        return (\n          <g key={serie.data[i].key} fill={colorScale(serie.name)} transform={`translate(${transformX},0)`}>\n            <Rect\n              width={width}\n              height={height}\n              xValue={xValue}\n              yValue={yValue}\n              y={transformY}\n              id={serie.data[i].key}\n              name={serie.name}\n              datum={bar}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CX;AA1CZ,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAEzC,MAAM,aAAa,CAAC,EAAE,MAAM,MAAM;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAM,iBAAa,gCAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,4CAAC,OAAE,UAAU,wBAAwB,YAClC,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,UAAM,WAAW,uBAAuB,IAAI;AAC5C,UAAM,eAAe,SAAS,OAAO;AAErC,UAAM,SAAS,UAAU,GAAG;AAE5B,UAAM,SAAS,SAAS,KAAK,SAAS;AACtC,UAAM,QAAQ,eAAe,UAAU;AACvC,UAAM,SAAS,OAAO,IAAI,SAAS,EAAE,IAAI,OAAO,IAAI,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAExF,UAAM,aAAa,OAAO,IAAI,SAAS,EAAE,KAAK,SAAS,KAAK,IAAI,IAAI;AAEpE,UAAM,aACJ,OAAO,SAAS,SACZ,OAAO,IAAI,MAAM,IAAI,QAAQ,IAE7B,OAAO,IAAI,MAAM,IAAI,cAAc,gBAAgB,YAAY;AAErE,WACE,4CAAC,OAA0B,MAAM,WAAW,MAAM,IAAI,GAAG,WAAW,aAAa,iBAC/E;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,QACH,IAAI,MAAM,KAAK,GAAG;AAAA,QAClB,MAAM,MAAM;AAAA,QACZ,OAAO;AAAA;AAAA,IACT,KAVM,MAAM,KAAK,GAAG,GAWtB;AAAA,EAEJ,CAAC,GACH;AAEJ;",
   "names": []
 }