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

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

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

Files changed (157) hide show

package/dist/cjs/graphs/Chart/parts/Scroller/ScrollBarY.js ADDED Viewed

@@ -0,0 +1,114 @@
+"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 ScrollBarY_exports = {};
+__export(ScrollBarY_exports, {
+  ScrollBarY: () => ScrollBarY
+});
+module.exports = __toCommonJS(ScrollBarY_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ChartContext = require("../../ChartContext");
+const ScrollBarY = () => {
+  const {
+    setIsGrabbed,
+    setStartPosition,
+    innerWidth,
+    xScrollbarPosition,
+    activePoint,
+    setXScrollbarPosition,
+    innerHeight,
+    isGrabbed,
+    containerRatio,
+    setScrapperPosX,
+    setScrapperPosY,
+    isScrollbarVisible,
+    oldLastPosition
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const barHeight = (0, import_react.useMemo)(() => parseInt(innerHeight / containerRatio, 10), [containerRatio, innerHeight]);
+  const handleMouseDown = (0, import_react.useCallback)(
+    (e) => {
+      setScrapperPosX("");
+      setScrapperPosY("");
+      setIsGrabbed(true);
+      setStartPosition(e.clientY);
+      e.preventDefault();
+    },
+    [setIsGrabbed, setScrapperPosY, setScrapperPosX, setStartPosition]
+  );
+  const handleMouseEnter = (0, import_react.useCallback)(
+    (e) => {
+      setScrapperPosX("");
+    },
+    [setScrapperPosX]
+  );
+  const handleClickFullBar = (0, import_react.useCallback)(
+    (e) => {
+      let newPosition = 0;
+      const bar = e.target;
+      const bounds = bar.getBoundingClientRect();
+      const top = e.clientY - bounds.top;
+      if (top + barHeight / 2 > innerHeight) {
+        newPosition = innerHeight - barHeight;
+      } else if (top - barHeight / 2 > 0) {
+        newPosition = top - barHeight / 2;
+      }
+      setXScrollbarPosition(newPosition);
+      oldLastPosition.current = newPosition;
+      e.preventDefault();
+    },
+    [barHeight, innerHeight, oldLastPosition, setXScrollbarPosition]
+  );
+  const isBarVisible = (0, import_react.useMemo)(
+    () => (isScrollbarVisible || activePoint) && containerRatio > 1,
+    [activePoint, containerRatio, isScrollbarVisible]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+    className: "scrollbary",
+    transform: "translate(-6,0)",
+    style: { visibility: isBarVisible ? "visible" : "hidden" },
+    onMouseEnter: handleMouseEnter,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+        style: { cursor: "pointer" },
+        width: "6",
+        height: innerHeight,
+        fill: "#ebecf0c5",
+        onClick: handleClickFullBar
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+        transform: `translate(0,${xScrollbarPosition})`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+          style: { cursor: isGrabbed ? "grabbing" : "grab" },
+          width: "6",
+          height: barHeight,
+          fill: "grey",
+          onMouseDown: handleMouseDown
+        })
+      })
+    ]
+  });
+};
+//# sourceMappingURL=ScrollBarY.js.map

package/dist/cjs/graphs/Chart/parts/Scroller/ScrollBarY.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/graphs/Chart/parts/Scroller/ScrollBarY.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const ScrollBarY = () => {\n  const {\n    setIsGrabbed,\n    setStartPosition,\n    innerWidth,\n    xScrollbarPosition,\n    activePoint,\n    setXScrollbarPosition,\n    innerHeight,\n    isGrabbed,\n    containerRatio,\n    setScrapperPosX,\n    setScrapperPosY,\n    isScrollbarVisible,\n    oldLastPosition,\n  } = useContext(ChartContext);\n\n  const barHeight = useMemo(() => parseInt(innerHeight / containerRatio, 10), [containerRatio, innerHeight]);\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      setScrapperPosX('');\n      setScrapperPosY('');\n      setIsGrabbed(true);\n      setStartPosition(e.clientY);\n      e.preventDefault();\n    },\n    [setIsGrabbed, setScrapperPosY, setScrapperPosX, setStartPosition],\n  );\n\n  const handleMouseEnter = useCallback(\n    (e: React.MouseEvent) => {\n      setScrapperPosX('');\n    },\n    [setScrapperPosX],\n  );\n\n  const handleClickFullBar = useCallback(\n    (e: React.MouseEvent) => {\n      let newPosition = 0;\n      const bar = e.target;\n      const bounds = bar.getBoundingClientRect();\n      const top = e.clientY - bounds.top;\n      if (top + barHeight / 2 > innerHeight) {\n        newPosition = innerHeight - barHeight;\n      } else if (top - barHeight / 2 > 0) {\n        newPosition = top - barHeight / 2;\n      }\n\n      setXScrollbarPosition(newPosition);\n      oldLastPosition.current = newPosition;\n      e.preventDefault();\n    },\n    [barHeight, innerHeight, oldLastPosition, setXScrollbarPosition],\n  );\n\n  const isBarVisible = useMemo(\n    () => (isScrollbarVisible || activePoint) && containerRatio > 1,\n    [activePoint, containerRatio, isScrollbarVisible],\n  );\n\n  return (\n    <g\n      className=\"scrollbary\"\n      transform=\"translate(-6,0)\"\n      style={{ visibility: isBarVisible ? 'visible' : 'hidden' }}\n      onMouseEnter={handleMouseEnter}\n    >\n      <rect\n        style={{ cursor: 'pointer' }}\n        width=\"6\"\n        height={innerHeight}\n        fill=\"#ebecf0c5\"\n        onClick={handleClickFullBar}\n      />\n      <g transform={`translate(0,${xScrollbarPosition})`}>\n        <rect\n          style={{ cursor: isGrabbed ? 'grabbing' : 'grab' }}\n          width=\"6\"\n          height={barHeight}\n          fill=\"grey\"\n          onMouseDown={handleMouseDown}\n        />\n      </g>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAAwD;AACxD,0BAA6B;AAEtB,MAAM,aAAa,MAAM;AAC9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,gBAAY,sBAAQ,MAAM,SAAS,cAAc,gBAAgB,EAAE,GAAG,CAAC,gBAAgB,WAAW,CAAC;AAEzG,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAwB;AACvB,sBAAgB,EAAE;AAClB,sBAAgB,EAAE;AAClB,mBAAa,IAAI;AACjB,uBAAiB,EAAE,OAAO;AAC1B,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,cAAc,iBAAiB,iBAAiB,gBAAgB;AAAA,EACnE;AAEA,QAAM,uBAAmB;AAAA,IACvB,CAAC,MAAwB;AACvB,sBAAgB,EAAE;AAAA,IACpB;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,MAAwB;AACvB,UAAI,cAAc;AAClB,YAAM,MAAM,EAAE;AACd,YAAM,SAAS,IAAI,sBAAsB;AACzC,YAAM,MAAM,EAAE,UAAU,OAAO;AAC/B,UAAI,MAAM,YAAY,IAAI,aAAa;AACrC,sBAAc,cAAc;AAAA,MAC9B,WAAW,MAAM,YAAY,IAAI,GAAG;AAClC,sBAAc,MAAM,YAAY;AAAA,MAClC;AAEA,4BAAsB,WAAW;AACjC,sBAAgB,UAAU;AAC1B,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,WAAW,aAAa,iBAAiB,qBAAqB;AAAA,EACjE;AAEA,QAAM,mBAAe;AAAA,IACnB,OAAO,sBAAsB,gBAAgB,iBAAiB;AAAA,IAC9D,CAAC,aAAa,gBAAgB,kBAAkB;AAAA,EAClD;AAEA,SACE,6CAAC;AAAA,IACC,WAAU;AAAA,IACV,WAAU;AAAA,IACV,OAAO,EAAE,YAAY,eAAe,YAAY,SAAS;AAAA,IACzD,cAAc;AAAA,IAEd;AAAA,kDAAC;AAAA,QACC,OAAO,EAAE,QAAQ,UAAU;AAAA,QAC3B,OAAM;AAAA,QACN,QAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS;AAAA,OACX;AAAA,MACA,4CAAC;AAAA,QAAE,WAAW,eAAe;AAAA,QAC3B,sDAAC;AAAA,UACC,OAAO,EAAE,QAAQ,YAAY,aAAa,OAAO;AAAA,UACjD,OAAM;AAAA,UACN,QAAQ;AAAA,UACR,MAAK;AAAA,UACL,aAAa;AAAA,SACf;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
+  "names": []
+}

package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerX.js CHANGED Viewed

@@ -38,48 +38,33 @@ var import_Scrapper = require("../Scrapper/Scrapper");
 var import_VerticalScrapper = require("../Scrapper/VerticalScrapper");
 const ScrollableContainerX = () => {
   const {
-    props: { scrapper, height },
+    props: { scrapper },
     xScrollbarPosition,
     containerRatio,
-    innerHeight,
-    innerWidth
+    chartId
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const Scrappers = (0, import_react.useMemo)(() => {
     if (scrapper?.type === "horizontal")
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Scrapper.Scrapper, {});
-    else if (scrapper?.type === "vertical")
+    if (scrapper?.type === "vertical")
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VerticalScrapper.VerticalScrapper, {});
     return null;
   }, [scrapper?.type]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
     className: "scrollable-container-x",
-    clipPath: "url(#myClip)",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-        transform: `translate(${-xScrollbarPosition * containerRatio},0)`,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisBottom.AxisBottom, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesFactory.SeriesFactory, {}),
-          Scrappers
-        ]
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollBarX.ScrollBarX, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", {
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", {
-          id: "myClip",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-            d: `M 0 -10
-            H ${innerWidth}
-            V ${innerHeight + 2}
-            L ${innerWidth + 10}  ${innerHeight + 2}
-            L ${innerWidth + 10}  ${height}
-            L -10 ${height}
-            L -10 ${innerHeight}
-            L 0 ${innerHeight}
-            L 0 -10`
-          })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+        mask: `url(#mask-${chartId})`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+          transform: `translate(${-xScrollbarPosition * containerRatio},0)`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesFactory.SeriesFactory, {}),
+            Scrappers,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisBottom.AxisBottom, {})
+          ]
         })
-      })
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollBarX.ScrollBarX, {})
     ]
   });
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Scroller/ScrollableContainerX.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { AxisBottom } from '../Axis/AxisBottom';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarX } from './ScrollBarX';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nexport const ScrollableContainerX = () => {\n  const {\n    props: { scrapper, height },\n    xScrollbarPosition,\n    containerRatio,\n    innerHeight,\n    innerWidth,\n  } = useContext(ChartContext);\n\n  const Scrappers = useMemo(() => {\n    if (scrapper?.type === 'horizontal') return <Scrapper />;\n    else if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper?.type]);\n\n  return (\n    <g className=\"scrollable-container-x\" clipPath=\"url(#myClip)\">\n      <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n        <AxisBottom />\n        <SeriesFactory />\n        {Scrappers}\n      </g>\n      <ScrollBarX />\n\n      <defs>\n        <clipPath id=\"myClip\">\n          <path\n            d={`M 0 -10 \n            H ${innerWidth} \n            V ${innerHeight + 2} \n            L ${innerWidth + 10}  ${innerHeight + 2} \n            L ${innerWidth + 10}  ${height} \n            L -10 ${height} \n            L -10 ${innerHeight}  \n            L 0 ${innerHeight}  \n            L 0 -10`}\n          />\n        </clipPath>\n      </defs>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAA2C;AAC3C,0BAA6B;AAC7B,wBAA2B;AAC3B,2BAA8B;AAC9B,wBAA2B;AAC3B,sBAAyB;AACzB,8BAAiC;AAC1B,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,OAAO;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,4CAAC,4BAAS;AAAA,aAC7C,UAAU,SAAS;AAAY,aAAO,4CAAC,4CAAiB;AACjE,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE,6CAAC;AAAA,IAAE,WAAU;AAAA,IAAyB,UAAS;AAAA,IAC7C;AAAA,mDAAC;AAAA,QAAE,WAAW,aAAa,CAAC,qBAAqB;AAAA,QAC/C;AAAA,sDAAC,gCAAW;AAAA,UACZ,4CAAC,sCAAc;AAAA,UACd;AAAA;AAAA,OACH;AAAA,MACA,4CAAC,gCAAW;AAAA,MAEZ,4CAAC;AAAA,QACC,sDAAC;AAAA,UAAS,IAAG;AAAA,UACX,sDAAC;AAAA,YACC,GAAG;AAAA,gBACC;AAAA,gBACA,cAAc;AAAA,gBACd,aAAa,OAAO,cAAc;AAAA,gBAClC,aAAa,OAAO;AAAA,oBAChB;AAAA,oBACA;AAAA,kBACF;AAAA;AAAA,WAER;AAAA,SACF;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { AxisBottom } from '../Axis/AxisBottom';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarX } from './ScrollBarX';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nexport const ScrollableContainerX = () => {\n  const {\n    props: { scrapper },\n    xScrollbarPosition,\n    containerRatio,\n    chartId,\n  } = useContext(ChartContext);\n\n  const Scrappers = useMemo(() => {\n    if (scrapper?.type === 'horizontal') return <Scrapper />;\n    if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper?.type]);\n\n  return (\n    <g className=\"scrollable-container-x\">\n      <g mask={`url(#mask-${chartId})`}>\n        <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n          <SeriesFactory />\n          {Scrappers}\n          <AxisBottom />\n        </g>\n      </g>\n      <ScrollBarX />\n      {/* <defs>\n        <clipPath id={`scroll-clip-x-${chartId}`}>\n          <path\n            d={`M 0 -10 \n            H ${innerWidth} \n            V ${innerHeight + 2} \n            L ${innerWidth + 10}  ${innerHeight + 2} \n            L ${innerWidth + 10}  ${height} \n            L -10 ${height} \n            L -10 ${innerHeight}  \n            L 0 ${innerHeight}  \n            L 0 -10`}\n          />\n        </clipPath>\n      </defs> */}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAA2C;AAC3C,0BAA6B;AAC7B,wBAA2B;AAC3B,2BAA8B;AAC9B,wBAA2B;AAC3B,sBAAyB;AACzB,8BAAiC;AAC1B,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,4CAAC,4BAAS;AACtD,QAAI,UAAU,SAAS;AAAY,aAAO,4CAAC,4CAAiB;AAC5D,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE,6CAAC;AAAA,IAAE,WAAU;AAAA,IACX;AAAA,kDAAC;AAAA,QAAE,MAAM,aAAa;AAAA,QACpB,uDAAC;AAAA,UAAE,WAAW,aAAa,CAAC,qBAAqB;AAAA,UAC/C;AAAA,wDAAC,sCAAc;AAAA,YACd;AAAA,YACD,4CAAC,gCAAW;AAAA;AAAA,SACd;AAAA,OACF;AAAA,MACA,4CAAC,gCAAW;AAAA;AAAA,GAgBd;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerY.js ADDED Viewed

@@ -0,0 +1,84 @@
+"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 ScrollableContainerY_exports = {};
+__export(ScrollableContainerY_exports, {
+  ScrollableContainerY: () => ScrollableContainerY
+});
+module.exports = __toCommonJS(ScrollableContainerY_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ChartContext = require("../../ChartContext");
+var import_SeriesFactory = require("../SeriesFactory");
+var import_ScrollBarY = require("./ScrollBarY");
+var import_Scrapper = require("../Scrapper/Scrapper");
+var import_VerticalScrapper = require("../Scrapper/VerticalScrapper");
+var import_AxisLeft = require("../Axis/AxisLeft");
+const ScrollableContainerY = () => {
+  const {
+    props: { scrapper, height, width },
+    xScrollbarPosition,
+    containerRatio,
+    innerHeight,
+    innerWidth,
+    internalMargin,
+    chartId
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const Scrappers = (0, import_react.useMemo)(() => {
+    if (scrapper?.type === "horizontal")
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Scrapper.Scrapper, {});
+    else if (scrapper?.type === "vertical")
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VerticalScrapper.VerticalScrapper, {});
+    return null;
+  }, [scrapper?.type]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+    className: "scrollable-container-x",
+    clipPath: `url(#scroll-clip-y-${chartId})`,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+        transform: `translate(0,${-xScrollbarPosition * containerRatio})`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AxisLeft.AxisLeft, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesFactory.SeriesFactory, {}),
+          Scrappers
+        ]
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollBarY.ScrollBarY, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", {
+          id: `scroll-clip-y-${chartId}`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+            d: `M ${-internalMargin.left} 0
+            H ${width}
+            V ${innerHeight - 1}
+            L ${-internalMargin.left} ${innerHeight - 1}
+            L ${-internalMargin.left}  0`
+          })
+        })
+      })
+    ]
+  });
+};
+//# sourceMappingURL=ScrollableContainerY.js.map

package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerY.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/graphs/Chart/parts/Scroller/ScrollableContainerY.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarY } from './ScrollBarY';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nimport { AxisLeft } from '../Axis/AxisLeft';\nexport const ScrollableContainerY = () => {\n  const {\n    props: { scrapper, height, width },\n    xScrollbarPosition,\n    containerRatio,\n    innerHeight,\n    innerWidth,\n    internalMargin,\n    chartId,\n  } = useContext(ChartContext);\n\n  const Scrappers = useMemo(() => {\n    if (scrapper?.type === 'horizontal') return <Scrapper />;\n    else if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper?.type]);\n\n  return (\n    <g className=\"scrollable-container-x\" clipPath={`url(#scroll-clip-y-${chartId})`}>\n      <g transform={`translate(0,${-xScrollbarPosition * containerRatio})`}>\n        <AxisLeft />\n        <SeriesFactory />\n        {Scrappers}\n      </g>\n      <ScrollBarY />\n\n      <defs>\n        <clipPath id={`scroll-clip-y-${chartId}`}>\n          <path\n            d={`M ${-internalMargin.left} 0 \n            H ${width} \n            V ${innerHeight - 1} \n            L ${-internalMargin.left} ${innerHeight - 1}\n            L ${-internalMargin.left}  0`}\n          />\n        </clipPath>\n      </defs>\n    </g>\n  );\n};\n\n// L ${innerWidth + 10}  ${innerHeight + 2}\n// L ${innerWidth + 10}  ${height}\n// L -10 ${height}\n// L -10 ${innerHeight}\n// L 0 ${innerHeight}\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAA2C;AAC3C,0BAA6B;AAC7B,2BAA8B;AAC9B,wBAA2B;AAC3B,sBAAyB;AACzB,8BAAiC;AACjC,sBAAyB;AAClB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,QAAQ,MAAM;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,4CAAC,4BAAS;AAAA,aAC7C,UAAU,SAAS;AAAY,aAAO,4CAAC,4CAAiB;AACjE,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE,6CAAC;AAAA,IAAE,WAAU;AAAA,IAAyB,UAAU,sBAAsB;AAAA,IACpE;AAAA,mDAAC;AAAA,QAAE,WAAW,eAAe,CAAC,qBAAqB;AAAA,QACjD;AAAA,sDAAC,4BAAS;AAAA,UACV,4CAAC,sCAAc;AAAA,UACd;AAAA;AAAA,OACH;AAAA,MACA,4CAAC,gCAAW;AAAA,MAEZ,4CAAC;AAAA,QACC,sDAAC;AAAA,UAAS,IAAI,iBAAiB;AAAA,UAC7B,sDAAC;AAAA,YACC,GAAG,KAAK,CAAC,eAAe;AAAA,gBACpB;AAAA,gBACA,cAAc;AAAA,gBACd,CAAC,eAAe,QAAQ,cAAc;AAAA,gBACtC,CAAC,eAAe;AAAA,WACtB;AAAA,SACF;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
+  "names": []
+}

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

@@ -36,13 +36,8 @@ var import_helpers = require("../helpers");
 var import_useVirtualizedSeries = require("../helpers/useVirtualizedSeries");
 const SeriesFactory = () => {
   const {
-    props: { xAxis, groups, types },
-    xScrollbarPosition,
-    innerWidth,
-    xScale,
-    containerRatio,
-    isHorizontal,
-    currentData: data
+    props: { groups, types },
+    isHorizontal
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const virtualizedSeries = (0, import_useVirtualizedSeries.useVirtualizedSeries)();
   return (0, import_react.useMemo)(
@@ -88,10 +83,10 @@ const SeriesFactory = () => {
             ...serieProps
           });
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+        return null;
       })
     }),
-    [containerRatio, data, groups, innerWidth, isHorizontal, types, xAxis.cols, xScale, xScrollbarPosition]
+    [groups, isHorizontal, types, virtualizedSeries]
   );
 };
 //# sourceMappingURL=SeriesFactory.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/parts/SeriesFactory.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { Line, Points, Bars, StackedBar, Area, HorizontalBars, HorizontalStackedBars } from '../series';\nimport { getStackedIndex } from '../helpers';\nimport { useVirtualizedSeries } from '../helpers/useVirtualizedSeries';\n\nexport const SeriesFactory = () => {\n  const {\n    props: { xAxis, groups, types },\n    xScrollbarPosition,\n    innerWidth,\n    xScale,\n    containerRatio,\n    isHorizontal,\n    currentData: data,\n  } = useContext(ChartContext);\n\n  const virtualizedSeries = useVirtualizedSeries();\n\n  return useMemo(\n    () => (\n      <g className=\"content\">\n        {\n          virtualizedSeries.map((serie) => {\n            const serieProps = {\n              key: serie.key,\n              serie,\n            };\n            if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1 && isHorizontal) {\n              return <HorizontalStackedBars {...serieProps} />;\n            }\n            if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1) {\n              return <StackedBar {...serieProps} />;\n            }\n            if (serie.type === 'bar' && isHorizontal) {\n              return <HorizontalBars {...serieProps} />;\n            }\n            if (serie.type === 'bar') {\n              return <Bars {...serieProps} />;\n            }\n            if ((types === 'scatter' && !serie.type) || serie.type === 'point') {\n              return <Points {...serieProps} />;\n            }\n            if (serie.type === 'line') {\n              return <Line {...serieProps} />;\n            }\n            if (serie.type === 'area') {\n              return <Area {...serieProps} />;\n            }\n            return <></>;\n          }) as JSX.Element[]\n        }\n      </g>\n    ),\n    [containerRatio, data, groups, innerWidth, isHorizontal, types, xAxis.cols, xScale, xScrollbarPosition],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAGA,mBAA2C;AAC3C,0BAA6B;AAC7B,oBAA4F;AAC5F,qBAAgC;AAChC,kCAAqC;AAE9B,MAAM,gBAAgB,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,QAAQ,MAAM;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,EACf,QAAI,yBAAW,gCAAY;AAE3B,QAAM,wBAAoB,kDAAqB;AAE/C,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,WAAU;AAAA,MAET,4BAAkB,IAAI,CAAC,UAAU;AAC/B,cAAM,aAAa;AAAA,UACjB,KAAK,MAAM;AAAA,UACX;AAAA,QACF;AACA,YAAI,MAAM,SAAS,SAAS,cAAU,gCAAgB,QAAQ,MAAM,IAAI,IAAI,MAAM,cAAc;AAC9F,iBAAO,4CAAC;AAAA,YAAuB,GAAG;AAAA,WAAY;AAAA,QAChD;AACA,YAAI,MAAM,SAAS,SAAS,cAAU,gCAAgB,QAAQ,MAAM,IAAI,IAAI,IAAI;AAC9E,iBAAO,4CAAC;AAAA,YAAY,GAAG;AAAA,WAAY;AAAA,QACrC;AACA,YAAI,MAAM,SAAS,SAAS,cAAc;AACxC,iBAAO,4CAAC;AAAA,YAAgB,GAAG;AAAA,WAAY;AAAA,QACzC;AACA,YAAI,MAAM,SAAS,OAAO;AACxB,iBAAO,4CAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,YAAK,UAAU,aAAa,CAAC,MAAM,QAAS,MAAM,SAAS,SAAS;AAClE,iBAAO,4CAAC;AAAA,YAAQ,GAAG;AAAA,WAAY;AAAA,QACjC;AACA,YAAI,MAAM,SAAS,QAAQ;AACzB,iBAAO,4CAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,YAAI,MAAM,SAAS,QAAQ;AACzB,iBAAO,4CAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,eAAO,2EAAE;AAAA,MACX,CAAC;AAAA,KAEL;AAAA,IAEF,CAAC,gBAAgB,MAAM,QAAQ,YAAY,cAAc,OAAO,MAAM,MAAM,QAAQ,kBAAkB;AAAA,EACxG;AACF;",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { Line, Points, Bars, StackedBar, Area, HorizontalBars, HorizontalStackedBars } from '../series';\nimport { getStackedIndex } from '../helpers';\nimport { useVirtualizedSeries } from '../helpers/useVirtualizedSeries';\n\nexport const SeriesFactory = () => {\n  const {\n    props: { groups, types },\n    isHorizontal,\n  } = useContext(ChartContext);\n\n  const virtualizedSeries = useVirtualizedSeries();\n  return useMemo(\n    () => (\n      <g className=\"content\">\n        {/* <g className=\"content\"> */}\n        {virtualizedSeries.map((serie) => {\n          const serieProps = {\n            key: serie.key,\n            serie,\n          };\n          if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1 && isHorizontal) {\n            return <HorizontalStackedBars {...serieProps} />;\n          }\n          if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1) {\n            return <StackedBar {...serieProps} />;\n          }\n          if (serie.type === 'bar' && isHorizontal) {\n            return <HorizontalBars {...serieProps} />;\n          }\n          if (serie.type === 'bar') {\n            return <Bars {...serieProps} />;\n          }\n          if ((types === 'scatter' && !serie.type) || serie.type === 'point') {\n            return <Points {...serieProps} />;\n          }\n          if (serie.type === 'line') {\n            return <Line {...serieProps} />;\n          }\n          if (serie.type === 'area') {\n            return <Area {...serieProps} />;\n          }\n          return null;\n        })}\n      </g>\n    ),\n    [groups, isHorizontal, types, virtualizedSeries],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAGA,mBAA2C;AAC3C,0BAA6B;AAC7B,oBAA4F;AAC5F,qBAAgC;AAChC,kCAAqC;AAE9B,MAAM,gBAAgB,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,MAAM;AAAA,IACvB;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,wBAAoB,kDAAqB;AAC/C,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,WAAU;AAAA,MAEV,4BAAkB,IAAI,CAAC,UAAU;AAChC,cAAM,aAAa;AAAA,UACjB,KAAK,MAAM;AAAA,UACX;AAAA,QACF;AACA,YAAI,MAAM,SAAS,SAAS,cAAU,gCAAgB,QAAQ,MAAM,IAAI,IAAI,MAAM,cAAc;AAC9F,iBAAO,4CAAC;AAAA,YAAuB,GAAG;AAAA,WAAY;AAAA,QAChD;AACA,YAAI,MAAM,SAAS,SAAS,cAAU,gCAAgB,QAAQ,MAAM,IAAI,IAAI,IAAI;AAC9E,iBAAO,4CAAC;AAAA,YAAY,GAAG;AAAA,WAAY;AAAA,QACrC;AACA,YAAI,MAAM,SAAS,SAAS,cAAc;AACxC,iBAAO,4CAAC;AAAA,YAAgB,GAAG;AAAA,WAAY;AAAA,QACzC;AACA,YAAI,MAAM,SAAS,OAAO;AACxB,iBAAO,4CAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,YAAK,UAAU,aAAa,CAAC,MAAM,QAAS,MAAM,SAAS,SAAS;AAClE,iBAAO,4CAAC;AAAA,YAAQ,GAAG;AAAA,WAAY;AAAA,QACjC;AACA,YAAI,MAAM,SAAS,QAAQ;AACzB,iBAAO,4CAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,YAAI,MAAM,SAAS,QAAQ;AACzB,iBAAO,4CAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,eAAO;AAAA,MACT,CAAC;AAAA,KACH;AAAA,IAEF,CAAC,QAAQ,cAAc,OAAO,iBAAiB;AAAA,EACjD;AACF;",
   "names": []
 }

package/dist/cjs/graphs/Chart/react-desc-prop-types.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/graphs/Chart/react-desc-prop-types.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSChartT {\n  export type SerieTypeT = 'line' | 'bar' | 'stackedBar' | 'spline';\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export interface SeriesT {\n    name: string;\n    data: Array<number | null | { x: number; y: number }>;\n    type: SerieTypeT;\n    scale?: string;\n    color: string;\n    // line\n    dashStyle: string;\n    pointRadius: number;\n  }\n\n  export interface AxisT {\n    showGrid: boolean;\n    color: string;\n    type: AxisTypeT;\n    cols?: number[] | string[] | Date[];\n    domainPadding: number;\n    hideAxis: boolean;\n    beginAtZero?: boolean;\n    tickValues: number[] | string[] | Date[];\n    tickFormat: () => void | string;\n    tickCount: number;\n    overwriteTicks: boolean;\n  }\n\n  export interface InternalData {\n    key: string;\n    group: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string;\n    color: string;\n    values: {\n      key: string;\n      value: number;\n      position: number;\n      serie: string;\n    }[];\n  }\n\n  export interface OptionalProps {\n    y2Axis?: AxisT;\n    groups?: string[][];\n    types?: 'scatter';\n  }\n\n  export interface DefaultProps {}\n\n  export interface RequiredProps {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    yAxis: AxisT;\n    xAxis: AxisT;\n  }\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  height: PropTypes.number.isRequired.description('height').defaultValue(''),\n  width: PropTypes.number.isRequired.description('height').defaultValue(''),\n  margin: PropTypes.shape({\n    top: PropTypes.number,\n    bottom: PropTypes.number,\n    left: PropTypes.number,\n    right: PropTypes.number,\n  })\n    .isRequired.description('margin')\n    .defaultValue(''),\n  series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAqD;AAgE9C,MAAM,eAAsC,CAAC;AAE7C,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,8BAAU,MAAM;AAAA,IACtB,KAAK,8BAAU;AAAA,IACf,QAAQ,8BAAU;AAAA,IAClB,MAAM,8BAAU;AAAA,IAChB,OAAO,8BAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,8BAAU,QAAQ,8BAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
+  "sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\nimport { Series, ScaleLinear, ScaleBand } from 'd3';\nexport declare namespace DSChartT {\n  export type SerieTypeT = 'line' | 'bar' | 'area' | 'point';\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export type LinearScale = ScaleLinear<number, number, never>;\n  export type BandScale = ScaleBand<string>;\n\n  export type Scales = LinearScale | BandScale;\n  export interface SeriesT {\n    name: string;\n    data: Array<number | null | { x: number; y: number }>;\n    type: SerieTypeT;\n    scale?: string;\n    color?: string;\n    // line\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export interface ScrapperT {\n    type: 'horizontal' | 'vertical';\n    color: string;\n    tooltipPreference: string;\n  }\n\n  export interface SerieComponentT {\n    serie: InternalSerie;\n  }\n\n  export interface AxisTickT {\n    tickValues: number[] | Date[];\n    tickFormat: () => void | string;\n    tickCount: number;\n    tickRotation: number;\n    overwriteTicks: boolean;\n    color: string;\n  }\n\n  export interface AxisT {\n    showGrid: boolean;\n    color: string;\n    label: string;\n    type: AxisTypeT;\n    cols?: string[];\n    domainPadding: number;\n    hideAxis: boolean;\n    beginAtZero?: boolean;\n    advanced: {\n      pointSpacing: {\n        type: 'string';\n        value: number;\n      };\n    };\n    tick: AxisTickT;\n  }\n\n  export interface InternalDatum {\n    key: string;\n    value: number | { x: number; y: number };\n    position: number;\n    serie: string;\n  }\n\n  export interface InternalSerie {\n    key: string;\n    data: InternalDatum[];\n    name: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string | undefined;\n    color?: string;\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export type InternalData = InternalSerie[];\n\n  export interface OptionalProps {\n    y2Axis?: AxisT;\n    groups?: string[][];\n    types?: 'scatter';\n    scrapper: ScrapperT;\n  }\n\n  export interface DefaultProps {}\n\n  export interface RequiredProps {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    yAxis: AxisT;\n    xAxis: AxisT;\n  }\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n\n  export type StackedSeriesByGroupT = Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  height: PropTypes.number.isRequired.description('height').defaultValue(''),\n  width: PropTypes.number.isRequired.description('height').defaultValue(''),\n  margin: PropTypes.shape({\n    top: PropTypes.number,\n    bottom: PropTypes.number,\n    left: PropTypes.number,\n    right: PropTypes.number,\n  })\n    .isRequired.description('margin')\n    .defaultValue(''),\n  series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAqD;AAyG9C,MAAM,eAAsC,CAAC;AAE7C,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,8BAAU,MAAM;AAAA,IACtB,KAAK,8BAAU;AAAA,IACf,QAAQ,8BAAU;AAAA,IAClB,MAAM,8BAAU;AAAA,IAChB,OAAO,8BAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,8BAAU,QAAQ,8BAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
   "names": []
 }

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

@@ -58,7 +58,7 @@ const Area = ({ serie }) => {
     if (serieWithStackedValues) {
       return (0, import_d3.area)().x((_, i) => {
         return xScale(typeof serie.data[i]?.value === "number" ? xAxis.cols[i] : serie.data[i]?.value?.x);
-      }).y0(([y1]) => finalYScale(y1)).y1(([, y2]) => finalYScale(y2)).curve(curveStyle)(serieWithStackedValues);
+      }).y0(([y1, y2]) => finalYScale(y2)).y1(([y1, y2]) => finalYScale(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);
   }, [stackedData, serie, innerHeight, finalYScale, xScale, xAxis?.cols]);
@@ -75,8 +75,6 @@ const Area = ({ serie }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
       transform: `translate(${xTranslate}, 0)`,
-      onMouseEnter: () => setActiveSerie(serie.key),
-      onMouseLeave: () => setActiveSerie(""),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Points.Points, {
           serie

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

@@ -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    setActiveSerie,\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) => {\n          return xScale(typeof serie.data[i]?.value === 'number' ? xAxis.cols[i] : serie.data[i]?.value?.x);\n        })\n        .y0(([y1]) => finalYScale(y1))\n        .y1(([, y2]) => finalYScale(y2))\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) => {\n            return xScale(typeof serie.data[i]?.value === 'number' ? xAxis.cols[i] : serie.data[i]?.value?.x);\n          })\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\n        transform={`translate(${xTranslate}, 0)`}\n        onMouseEnter={() => setActiveSerie(serie.key)}\n        onMouseLeave={() => setActiveSerie('')}\n      >\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": "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",
+  "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    setActiveSerie,\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) => {\n          return xScale(typeof serie.data[i]?.value === 'number' ? xAxis.cols[i] : serie.data[i]?.value?.x);\n        })\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) => {\n            return xScale(typeof serie.data[i]?.value === 'number' ? xAxis.cols[i] : serie.data[i]?.value?.x);\n          })\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": "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",
   "names": []
 }

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

@@ -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, useMemo } from 'react';\nimport { ScaleBand } from 'd3';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\nimport { FocusableRegion } from '../parts/FocusableRegion';\ninterface BarsT {\n  serie: DSChartT.InternalData;\n}\nexport const Bars = ({ serie }: BarsT) => {\n  const {\n    props: { yAxis, TooltipRenderer },\n    innerHeight,\n    xScale,\n    yScale,\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 = innerHeight - finalYScale(0);\n  const positiveSize = innerHeight - negativeSize;\n\n  return (\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\n        const width = subGroupScale?.bandwidth();\n        const height = y > 0 ? positiveSize - finalYScale(y) : finalYScale(y) - finalYScale(0);\n\n        const transformX = subGroupScale(serie.name) + xScale(x);\n\n        // @todo find a way to create bars with linear\n        //       scale here is something but conflict with bars like {x: 'Monday', y: 10}\n        // const transformX = isHorizontal\n        //   ? 0\n        //   : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0);\n\n        const transformY = y > 0 ? finalYScale(0) - height : finalYScale(0);\n\n        return (\n          <g id={`${serie.name}-rects`} 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            />\n            {/* {TooltipRenderer && (\n              <FocusableRegion\n                transform={`scale(1,-1) translate(0,${-height})`}\n                y={-transformY}\n                id={bar.key}\n                width={width}\n                height={height}\n                content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n              />\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;ADAvB;AACA,mBAA2C;AAE3C,kBAAqB;AACrB,0BAA6B;AAMtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAa;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,gBAAgB;AAAA,IAChC;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,cAAc,YAAY,CAAC;AAChD,QAAM,eAAe,cAAc;AAEnC,SACE,4CAAC;AAAA,IAAE,MAAM,WAAW,MAAM,IAAI;AAAA,IAAG,UAAU,wBAAwB;AAAA,IAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,IAAI,UAAU,GAAG;AACvB,YAAM,IAAI,UAAU,GAAG;AAEvB,YAAM,QAAQ,eAAe,UAAU;AACvC,YAAM,SAAS,IAAI,IAAI,eAAe,YAAY,CAAC,IAAI,YAAY,CAAC,IAAI,YAAY,CAAC;AAErF,YAAM,aAAa,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC;AAQvD,YAAM,aAAa,IAAI,IAAI,YAAY,CAAC,IAAI,SAAS,YAAY,CAAC;AAElE,aACE,4CAAC;AAAA,QAAE,IAAI,GAAG,MAAM;AAAA,QAA4B,WAAW,aAAa;AAAA,QAClE,sDAAC;AAAA,UACC,MAAM,MAAM;AAAA,UACZ,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR;AAAA,UACA;AAAA,UACA,IAAI,IAAI;AAAA,UACR,GAAG;AAAA,UACH,YAAY,IAAI;AAAA,SAClB;AAAA,SAViC,IAAI,GAqBvC;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { ScaleBand } from 'd3';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\n\nexport const Bars = ({ serie }) => {\n  const {\n    props: { yAxis, TooltipRenderer },\n    innerHeight,\n    xScale,\n    yScale,\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 = innerHeight - finalYScale(0);\n  const positiveSize = innerHeight - negativeSize;\n\n  return (\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\n        const width = subGroupScale?.bandwidth();\n        const height = y > 0 ? positiveSize - finalYScale(y) : finalYScale(y) - finalYScale(0);\n\n        const transformX = subGroupScale(serie.name) + xScale(x);\n\n        // @todo find a way to create bars with linear\n        //       scale here is something but conflict with bars like {x: 'Monday', y: 10}\n        // const transformX = isHorizontal\n        //   ? 0\n        //   : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0);\n\n        const transformY = y > 0 ? finalYScale(0) - height : finalYScale(0);\n\n        return (\n          <g id={`${serie.name}-rects`} 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            />\n            {/* {TooltipRenderer && (\n              <FocusableRegion\n                transform={`scale(1,-1) translate(0,${-height})`}\n                y={-transformY}\n                id={bar.key}\n                width={width}\n                height={height}\n                content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n              />\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;ADAvB;AACA,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAGtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,gBAAgB;AAAA,IAChC;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,cAAc,YAAY,CAAC;AAChD,QAAM,eAAe,cAAc;AAEnC,SACE,4CAAC;AAAA,IAAE,MAAM,WAAW,MAAM,IAAI;AAAA,IAAG,UAAU,wBAAwB;AAAA,IAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,IAAI,UAAU,GAAG;AACvB,YAAM,IAAI,UAAU,GAAG;AAEvB,YAAM,QAAQ,eAAe,UAAU;AACvC,YAAM,SAAS,IAAI,IAAI,eAAe,YAAY,CAAC,IAAI,YAAY,CAAC,IAAI,YAAY,CAAC;AAErF,YAAM,aAAa,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC;AAQvD,YAAM,aAAa,IAAI,IAAI,YAAY,CAAC,IAAI,SAAS,YAAY,CAAC;AAElE,aACE,4CAAC;AAAA,QAAE,IAAI,GAAG,MAAM;AAAA,QAA4B,WAAW,aAAa;AAAA,QAClE,sDAAC;AAAA,UACC,MAAM,MAAM;AAAA,UACZ,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR;AAAA,UACA;AAAA,UACA,IAAI,IAAI;AAAA,UACR,GAAG;AAAA,UACH,YAAY,IAAI;AAAA,SAClB;AAAA,SAViC,IAAI,GAqBvC;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }

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

@@ -33,17 +33,7 @@ var import_react = require("react");
 var import_Rect = require("./Rect");
 var import_ChartContext = require("../ChartContext");
 const HorizontalBars = ({ serie }) => {
-  const {
-    props: { yAxis },
-    xScale,
-    yScale,
-    y2Scale,
-    subGroupScale,
-    colorScale,
-    getXValue,
-    getYValue,
-    chartId
-  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
   return (0, import_react.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
@@ -54,10 +44,11 @@ const HorizontalBars = ({ serie }) => {
         const y = getYValue(bar);
         const width = xScale(x);
         const height = subGroupScale?.bandwidth();
-        const transformY = subGroupScale(serie.name) + finalYScale(yAxis?.cols?.[i] ?? i);
+        const transformY = subGroupScale(serie.name) + finalYScale(y);
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
           transform: `translate(0,${transformY})`,
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Rect.Rect, {
+            name: serie.name,
             width,
             height,
             id: bar.key,
@@ -68,18 +59,7 @@ const HorizontalBars = ({ serie }) => {
         }, bar.key);
       })
     }),
-    [
-      chartId,
-      colorScale,
-      finalYScale,
-      getXValue,
-      getYValue,
-      serie.data,
-      serie.name,
-      subGroupScale,
-      xScale,
-      yAxis?.cols
-    ]
+    [chartId, colorScale, finalYScale, getXValue, getYValue, serie.data, serie.name, subGroupScale, xScale]
   );
 };
 //# sourceMappingURL=HorizontalBars.js.map

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

@@ -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 { DSChartT } from '../react-desc-prop-types';\ninterface BarsT {\n  serie: DSChartT.InternalData;\n}\nexport const HorizontalBars = ({ serie }: BarsT) => {\n  const {\n    props: { yAxis },\n    xScale,\n    yScale,\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  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\n          const width = xScale(x);\n          const height = subGroupScale?.bandwidth();\n\n          const transformY = subGroupScale(serie.name) + finalYScale(yAxis?.cols?.[i] ?? i);\n\n          return (\n            <g key={bar.key} transform={`translate(0,${transformY})`}>\n              <Rect width={width} height={height} id={bar.key} x={0} xValue={x} yValue={y} />\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [\n      chartId,\n      colorScale,\n      finalYScale,\n      getXValue,\n      getYValue,\n      serie.data,\n      serie.name,\n      subGroupScale,\n      xScale,\n      yAxis?.cols,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA2C;AAC3C,kBAAqB;AACrB,0BAA6B;AAKtB,MAAM,iBAAiB,CAAC,EAAE,MAAM,MAAa;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;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,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,MAAM,WAAW,MAAM,IAAI;AAAA,MAAG,UAAU,wBAAwB;AAAA,MAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,cAAM,IAAI,UAAU,GAAG;AACvB,cAAM,IAAI,UAAU,GAAG;AAEvB,cAAM,QAAQ,OAAO,CAAC;AACtB,cAAM,SAAS,eAAe,UAAU;AAExC,cAAM,aAAa,cAAc,MAAM,IAAI,IAAI,YAAY,OAAO,OAAO,MAAM,CAAC;AAEhF,eACE,4CAAC;AAAA,UAAgB,WAAW,eAAe;AAAA,UACzC,sDAAC;AAAA,YAAK;AAAA,YAAc;AAAA,YAAgB,IAAI,IAAI;AAAA,YAAK,GAAG;AAAA,YAAG,QAAQ;AAAA,YAAG,QAAQ;AAAA,WAAG;AAAA,WADvE,IAAI,GAEZ;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } =\n    useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\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\n          const width = xScale(x);\n          const height = subGroupScale?.bandwidth();\n\n          const transformY = subGroupScale(serie.name) + finalYScale(y);\n\n          return (\n            <g key={bar.key} transform={`translate(0,${transformY})`}>\n              <Rect name={serie.name} width={width} height={height} id={bar.key} x={0} xValue={x} yValue={y} />\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [chartId, colorScale, finalYScale, getXValue, getYValue, serie.data, serie.name, subGroupScale, xScale],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA2C;AAC3C,kBAAqB;AACrB,0BAA6B;AAGtB,MAAM,iBAAiB,CAAC,EAAE,MAAM,MAAgC;AACrE,QAAM,EAAE,QAAQ,QAAQ,SAAS,eAAe,YAAY,WAAW,WAAW,QAAQ,QACxF,yBAAW,gCAAY;AACzB,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,MAAM,WAAW,MAAM,IAAI;AAAA,MAAG,UAAU,wBAAwB;AAAA,MAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,cAAM,IAAI,UAAU,GAAG;AACvB,cAAM,IAAI,UAAU,GAAG;AAEvB,cAAM,QAAQ,OAAO,CAAC;AACtB,cAAM,SAAS,eAAe,UAAU;AAExC,cAAM,aAAa,cAAc,MAAM,IAAI,IAAI,YAAY,CAAC;AAE5D,eACE,4CAAC;AAAA,UAAgB,WAAW,eAAe;AAAA,UACzC,sDAAC;AAAA,YAAK,MAAM,MAAM;AAAA,YAAM;AAAA,YAAc;AAAA,YAAgB,IAAI,IAAI;AAAA,YAAK,GAAG;AAAA,YAAG,QAAQ;AAAA,YAAG,QAAQ;AAAA,WAAG;AAAA,WADzF,IAAI,GAEZ;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IAEF,CAAC,SAAS,YAAY,aAAa,WAAW,WAAW,MAAM,MAAM,MAAM,MAAM,eAAe,MAAM;AAAA,EACxG;AACF;",
   "names": []
 }

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

@@ -35,7 +35,7 @@ var import_ChartContext = require("../ChartContext");
 var import_helpers = require("../helpers");
 const HorizontalStackedBars = ({ serie }) => {
   const {
-    props: { yAxis, groups },
+    props: { groups },
     xScale,
     yScale,
     stackedData,
@@ -54,7 +54,7 @@ const HorizontalStackedBars = ({ serie }) => {
       const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 1 : 0);
       const height = subGroupScale?.bandwidth();
       const transformX = xScale(sequence[0]) + (!isFloorStack ? 1 : 0);
-      const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yAxis?.cols?.[i]);
+      const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yValue);
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
         clipPath: `url(#rect-focus-ring-${chartId})`,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {

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

@@ -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';\n\nexport const HorizontalStackedBars = ({ serie }) => {\n  const {\n    props: { yAxis, groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getYValue,\n  } = useContext(ChartContext);\n\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 ? 1 : 0);\n\n        const height = subGroupScale?.bandwidth();\n\n        const transformX = xScale(sequence[0]) + (!isFloorStack ? 1 : 0);\n        const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yAxis?.cols?.[i]);\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              />\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;ADAvB;AACA,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAEzC,MAAM,wBAAwB,CAAC,EAAE,MAAM,MAAM;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO;AAAA,IACvB;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;AAAA,IACE,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,YAAM,eAAe,SAAS,OAAO;AACrC,YAAM,SAAS,SAAS,KAAK,SAAS;AACtC,YAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AAEtC,YAAM,QAAQ,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAE/E,YAAM,SAAS,eAAe,UAAU;AAExC,YAAM,aAAa,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAC9D,YAAM,aAAa,cAAc,gBAAgB,YAAY,IAAI,OAAO,OAAO,OAAO,EAAE;AAExF,aACE,4CAAC;AAAA,QAA0B,UAAU,wBAAwB;AAAA,QAC3D,sDAAC;AAAA,UAAE,MAAM,WAAW,MAAM,IAAI;AAAA,UAAG,WAAW,gBAAgB;AAAA,UAC1D,sDAAC;AAAA,YACC;AAAA,YACA;AAAA,YACA,GAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA,IAAI,MAAM,KAAK,GAAG;AAAA,YAClB,MAAM,MAAM;AAAA,WACd;AAAA,SACF;AAAA,SAXM,MAAM,KAAK,GAAG,GAYtB;AAAA,IAEJ,CAAC;AAAA,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 { 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 ? 1 : 0);\n\n        const height = subGroupScale?.bandwidth();\n\n        const transformX = xScale(sequence[0]) + (!isFloorStack ? 1 : 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              />\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;ADAvB;AACA,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;AAAA,IACE,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,YAAM,eAAe,SAAS,OAAO;AACrC,YAAM,SAAS,SAAS,KAAK,SAAS;AACtC,YAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AAEtC,YAAM,QAAQ,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAE/E,YAAM,SAAS,eAAe,UAAU;AAExC,YAAM,aAAa,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAC9D,YAAM,aAAa,cAAc,gBAAgB,YAAY,IAAI,OAAO,MAAM;AAE9E,aACE,4CAAC;AAAA,QAA0B,UAAU,wBAAwB;AAAA,QAC3D,sDAAC;AAAA,UAAE,MAAM,WAAW,MAAM,IAAI;AAAA,UAAG,WAAW,gBAAgB;AAAA,UAC1D,sDAAC;AAAA,YACC;AAAA,YACA;AAAA,YACA,GAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA,IAAI,MAAM,KAAK,GAAG;AAAA,YAClB,MAAM,MAAM;AAAA,WACd;AAAA,SACF;AAAA,SAXM,MAAM,KAAK,GAAG,GAYtB;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }

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

@@ -48,9 +48,10 @@ const StackedBar = ({ serie }) => {
   const stackIndex = (0, import_helpers.getStackedIndex)(groups, serie.name);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
     clipPath: `url(#rect-focus-ring-${chartId})`,
-    children: serieWithStackedValues.map((sequence, i) => {
+    children: serie.data.map((bar, i) => {
+      const sequence = serieWithStackedValues[bar.position];
       const isFloorStack = sequence[0] === 0;
-      const xValue = getXValue(serie.data[i]);
+      const xValue = getXValue(bar);
       const yValue = sequence[0] - sequence[1];
       const width = subGroupScale?.bandwidth();
       const height = yScale(sequence[0]) - yScale(sequence[1]) - (!isFloorStack ? 1 : 0);