@elliemae/ds-dataviz 3.13.0-next.3 → 3.13.0

package/dist/cjs/graphs/Chart/parts/Legend/LegendItem.js

@@ -46,10 +46,11 @@ const LegendItem = ({ domainValue }) => {
     colorScale,
     setHiddenSeries,
     hiddenSeries,
-    props: { series, types }
+    originalSeries: series,
+    props: { types }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const serieData = series.find((serie) => serie.name === domainValue);
-  const LegendIcon = LegendItemsMap[serieData.pointStyle] ?? (serieData.type === "line" || types === "scatter" ? LegendItemCircle : LegendItemSquare);
+  const LegendIcon = LegendItemsMap[serieData?.pointStyle] ?? (serieData?.type === "line" || types === "scatter" ? LegendItemCircle : LegendItemSquare);
   const handleOnClick = (0, import_react.useCallback)(() => {
     setHiddenSeries((prev) => {
       if (prev.includes(domainValue))
@@ -68,19 +69,12 @@ const LegendItem = ({ domainValue }) => {
         style: hiddenSeries.includes(domainValue) ? { opacity: 0.2, cursor: "pointer" } : { cursor: "pointer" },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LegendIcon, { fill: colorScale(domainValue) }),
-          serieData.type === "line" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            LegendItemLine,
-            {
-              stroke: colorScale(domainValue),
-              strokeDasharray: import_constants.LINE.DASH_STYLE_VALUES[serieData.dashStyle]
-            }
-          ) : null,
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: 24, dy: ".32em", fontWeight: "600", children: domainValue })
         ]
       },
       domainValue
     ),
-    [LegendIcon, colorScale, domainValue, handleOnClick, hiddenSeries, serieData.dashStyle, serieData.type]
+    [LegendIcon, colorScale, domainValue, handleOnClick, hiddenSeries]
   );
 };
 //# sourceMappingURL=LegendItem.js.map

package/dist/cjs/graphs/Chart/parts/Legend/LegendItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Legend/LegendItem.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { LINE } from '../../../constants';\nimport { ChartContext } from '../../ChartContext';\n\nconst LegendItemLine = (props) => <line x1={-18} x2={18} y1={0} y2={0} {...props} strokeWidth={2} />;\nconst LegendItemCircle = (props) => <circle r={6} {...props} />;\nconst LegendItemSquare = (props) => <rect x={-6} y={-6} width={12} height={12} {...props} />;\nconst LegendItemDiamond = (props) => (\n  <g transform=\"rotate(45)\">\n    <rect x={-6} y={-6} width={12} height={12} {...props} />\n  </g>\n);\n\nconst LegendItemsMap = {\n  [LINE.POINT_STYLE.CIRCLE]: LegendItemCircle,\n  [LINE.POINT_STYLE.SQUARE]: LegendItemSquare,\n  [LINE.POINT_STYLE.DIAMOND]: LegendItemDiamond,\n};\n\nexport const LegendItem = ({ domainValue }) => {\n  const {\n    colorScale,\n    setHiddenSeries,\n    hiddenSeries,\n    props: { series, types },\n  } = useContext(ChartContext);\n\n  const serieData = series.find((serie) => serie.name === domainValue);\n  const LegendIcon =\n    LegendItemsMap[serieData.pointStyle] ??\n    (serieData.type === 'line' || types === 'scatter' ? LegendItemCircle : LegendItemSquare);\n\n  const handleOnClick = useCallback(() => {\n    setHiddenSeries((prev) => {\n      if (prev.includes(domainValue)) return prev.filter((serie) => serie !== domainValue);\n      if (prev.length + 1 !== series.length) return [...prev, domainValue];\n      return prev;\n    });\n  }, [domainValue, series.length, setHiddenSeries]);\n\n  return useMemo(\n    () => (\n      <g\n        onClick={handleOnClick}\n        key={domainValue}\n        className=\"cell\"\n        style={hiddenSeries.includes(domainValue) ? { opacity: 0.2, cursor: 'pointer' } : { cursor: 'pointer' }}\n      >\n        <LegendIcon fill={colorScale(domainValue)} />\n        {serieData.type === 'line' ? (\n          <LegendItemLine\n            stroke={colorScale(domainValue)}\n            strokeDasharray={LINE.DASH_STYLE_VALUES[serieData.dashStyle]}\n          />\n        ) : null}\n        <text x={24} dy=\".32em\" fontWeight=\"600\">\n          {domainValue}\n        </text>\n      </g>\n    ),\n\n    [LegendIcon, colorScale, domainValue, handleOnClick, hiddenSeries, serieData.dashStyle, serieData.type],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIW;AAJlC,mBAAwD;AACxD,uBAAqB;AACrB,0BAA6B;AAE7B,MAAM,iBAAiB,CAAC,UAAU,4CAAC,UAAK,IAAI,KAAK,IAAI,IAAI,IAAI,GAAG,IAAI,GAAI,GAAG,OAAO,aAAa,GAAG;AAClG,MAAM,mBAAmB,CAAC,UAAU,4CAAC,YAAO,GAAG,GAAI,GAAG,OAAO;AAC7D,MAAM,mBAAmB,CAAC,UAAU,4CAAC,UAAK,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,IAAK,GAAG,OAAO;AAC1F,MAAM,oBAAoB,CAAC,UACzB,4CAAC,OAAE,WAAU,cACX,sDAAC,UAAK,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,IAAK,GAAG,OAAO,GACxD;AAGF,MAAM,iBAAiB;AAAA,EACrB,CAAC,sBAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,sBAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,sBAAK,YAAY,UAAU;AAC9B;AAEO,MAAM,aAAa,CAAC,EAAE,YAAY,MAAM;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,QAAQ,MAAM;AAAA,EACzB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,YAAY,OAAO,KAAK,CAAC,UAAU,MAAM,SAAS,WAAW;AACnE,QAAM,aACJ,eAAe,UAAU,gBACxB,UAAU,SAAS,UAAU,UAAU,YAAY,mBAAmB;AAEzE,QAAM,oBAAgB,0BAAY,MAAM;AACtC,oBAAgB,CAAC,SAAS;AACxB,UAAI,KAAK,SAAS,WAAW;AAAG,eAAO,KAAK,OAAO,CAAC,UAAU,UAAU,WAAW;AACnF,UAAI,KAAK,SAAS,MAAM,OAAO;AAAQ,eAAO,CAAC,GAAG,MAAM,WAAW;AACnE,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,OAAO,QAAQ,eAAe,CAAC;AAEhD,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QAET,WAAU;AAAA,QACV,OAAO,aAAa,SAAS,WAAW,IAAI,EAAE,SAAS,KAAK,QAAQ,UAAU,IAAI,EAAE,QAAQ,UAAU;AAAA,QAEtG;AAAA,sDAAC,cAAW,MAAM,WAAW,WAAW,GAAG;AAAA,UAC1C,UAAU,SAAS,SAClB;AAAA,YAAC;AAAA;AAAA,cACC,QAAQ,WAAW,WAAW;AAAA,cAC9B,iBAAiB,sBAAK,kBAAkB,UAAU;AAAA;AAAA,UACpD,IACE;AAAA,UACJ,4CAAC,UAAK,GAAG,IAAI,IAAG,SAAQ,YAAW,OAChC,uBACH;AAAA;AAAA;AAAA,MAbK;AAAA,IAcP;AAAA,IAGF,CAAC,YAAY,YAAY,aAAa,eAAe,cAAc,UAAU,WAAW,UAAU,IAAI;AAAA,EACxG;AACF;",
+  "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { LINE } from '../../../constants';\nimport { ChartContext } from '../../ChartContext';\n\nconst LegendItemLine = (props) => <line x1={-18} x2={18} y1={0} y2={0} {...props} strokeWidth={2} />;\nconst LegendItemCircle = (props) => <circle r={6} {...props} />;\nconst LegendItemSquare = (props) => <rect x={-6} y={-6} width={12} height={12} {...props} />;\nconst LegendItemDiamond = (props) => (\n  <g transform=\"rotate(45)\">\n    <rect x={-6} y={-6} width={12} height={12} {...props} />\n  </g>\n);\n\nconst LegendItemsMap = {\n  [LINE.POINT_STYLE.CIRCLE]: LegendItemCircle,\n  [LINE.POINT_STYLE.SQUARE]: LegendItemSquare,\n  [LINE.POINT_STYLE.DIAMOND]: LegendItemDiamond,\n};\n\nexport const LegendItem = ({ domainValue }) => {\n  const {\n    colorScale,\n    setHiddenSeries,\n    hiddenSeries,\n    originalSeries: series,\n    props: { types },\n  } = useContext(ChartContext);\n\n  const serieData = series.find((serie) => serie.name === domainValue);\n  const LegendIcon =\n    LegendItemsMap[serieData?.pointStyle] ??\n    (serieData?.type === 'line' || types === 'scatter' ? LegendItemCircle : LegendItemSquare);\n\n  const handleOnClick = useCallback(() => {\n    setHiddenSeries((prev) => {\n      if (prev.includes(domainValue)) return prev.filter((serie) => serie !== domainValue);\n      if (prev.length + 1 !== series.length) return [...prev, domainValue];\n      return prev;\n    });\n  }, [domainValue, series.length, setHiddenSeries]);\n\n  return useMemo(\n    () => (\n      <g\n        onClick={handleOnClick}\n        key={domainValue}\n        className=\"cell\"\n        style={hiddenSeries.includes(domainValue) ? { opacity: 0.2, cursor: 'pointer' } : { cursor: 'pointer' }}\n      >\n        <LegendIcon fill={colorScale(domainValue)} />\n        <text x={24} dy=\".32em\" fontWeight=\"600\">\n          {domainValue}\n        </text>\n      </g>\n    ),\n\n    [LegendIcon, colorScale, domainValue, handleOnClick, hiddenSeries],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIW;AAJlC,mBAAwD;AACxD,uBAAqB;AACrB,0BAA6B;AAE7B,MAAM,iBAAiB,CAAC,UAAU,4CAAC,UAAK,IAAI,KAAK,IAAI,IAAI,IAAI,GAAG,IAAI,GAAI,GAAG,OAAO,aAAa,GAAG;AAClG,MAAM,mBAAmB,CAAC,UAAU,4CAAC,YAAO,GAAG,GAAI,GAAG,OAAO;AAC7D,MAAM,mBAAmB,CAAC,UAAU,4CAAC,UAAK,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,IAAK,GAAG,OAAO;AAC1F,MAAM,oBAAoB,CAAC,UACzB,4CAAC,OAAE,WAAU,cACX,sDAAC,UAAK,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,IAAK,GAAG,OAAO,GACxD;AAGF,MAAM,iBAAiB;AAAA,EACrB,CAAC,sBAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,sBAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,sBAAK,YAAY,UAAU;AAC9B;AAEO,MAAM,aAAa,CAAC,EAAE,YAAY,MAAM;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAO,EAAE,MAAM;AAAA,EACjB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,YAAY,OAAO,KAAK,CAAC,UAAU,MAAM,SAAS,WAAW;AACnE,QAAM,aACJ,eAAe,WAAW,gBACzB,WAAW,SAAS,UAAU,UAAU,YAAY,mBAAmB;AAE1E,QAAM,oBAAgB,0BAAY,MAAM;AACtC,oBAAgB,CAAC,SAAS;AACxB,UAAI,KAAK,SAAS,WAAW;AAAG,eAAO,KAAK,OAAO,CAAC,UAAU,UAAU,WAAW;AACnF,UAAI,KAAK,SAAS,MAAM,OAAO;AAAQ,eAAO,CAAC,GAAG,MAAM,WAAW;AACnE,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,OAAO,QAAQ,eAAe,CAAC;AAEhD,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QAET,WAAU;AAAA,QACV,OAAO,aAAa,SAAS,WAAW,IAAI,EAAE,SAAS,KAAK,QAAQ,UAAU,IAAI,EAAE,QAAQ,UAAU;AAAA,QAEtG;AAAA,sDAAC,cAAW,MAAM,WAAW,WAAW,GAAG;AAAA,UAC3C,4CAAC,UAAK,GAAG,IAAI,IAAG,SAAQ,YAAW,OAChC,uBACH;AAAA;AAAA;AAAA,MAPK;AAAA,IAQP;AAAA,IAGF,CAAC,YAAY,YAAY,aAAa,eAAe,YAAY;AAAA,EACnE;AACF;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/Legend/RightLegend.js

@@ -34,23 +34,19 @@ var import_ChartContext = require("../../ChartContext");
 var import_LegendItem = require("./LegendItem");
 const RightLegend = () => {
   const {
-    colorScale,
     innerWidth,
     innerHeight,
     rightLabelWidth,
-    rightLegend,
     axisRightWidth,
     internalMargin,
+    rightLegendHeight,
     setRightLegend,
-    props: { series }
+    originalSeries: series
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const [yTransform, setYTransform] = (0, import_react.useState)(innerHeight / 2 + internalMargin.top);
-  (0, import_react.useLayoutEffect)(() => {
-    if (rightLegend) {
-      const bounds = rightLegend.getBoundingClientRect();
-      setYTransform((prev) => prev - bounds.height / 2);
-    }
-  }, [rightLegend]);
+  (0, import_react.useEffect)(() => {
+    setYTransform(innerHeight / 2 + internalMargin.top - rightLegendHeight / 2);
+  }, [innerHeight, internalMargin.top, rightLegendHeight]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "g",
     {

package/dist/cjs/graphs/Chart/parts/Legend/RightLegend.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Legend/RightLegend.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useState, useLayoutEffect } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const RightLegend = () => {\n  const {\n    colorScale,\n    innerWidth,\n    innerHeight,\n    rightLabelWidth,\n    rightLegend,\n    axisRightWidth,\n    internalMargin,\n    setRightLegend,\n    props: { series },\n  } = useContext(ChartContext);\n\n  const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);\n\n  useLayoutEffect(() => {\n    if (rightLegend) {\n      const bounds = rightLegend.getBoundingClientRect();\n      setYTransform((prev) => prev - bounds.height / 2);\n    }\n  }, [rightLegend]);\n\n  return (\n    <g\n      ref={setRightLegend}\n      transform={`translate(${innerWidth + internalMargin.left + axisRightWidth + rightLabelWidth},${yTransform})`}\n    >\n      <rect width=\"20\" height={1} fill=\"transparent\" />\n      <g transform={`translate(0,0)`}>\n        {series.map((serie, i) => (\n          <g className=\"tick\" transform={`translate(30,${i * 30})`} key={serie.name}>\n            <LegendItem domainValue={serie.name} />\n          </g>\n        ))}\n      </g>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BnB;AA3BJ,mBAA6D;AAC7D,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO;AAAA,EAClB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,cAAc,IAAI,eAAe,GAAG;AAEjF,oCAAgB,MAAM;AACpB,QAAI,aAAa;AACf,YAAM,SAAS,YAAY,sBAAsB;AACjD,oBAAc,CAAC,SAAS,OAAO,OAAO,SAAS,CAAC;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,aAAa,aAAa,eAAe,OAAO,iBAAiB,mBAAmB;AAAA,MAE/F;AAAA,oDAAC,UAAK,OAAM,MAAK,QAAQ,GAAG,MAAK,eAAc;AAAA,QAC/C,4CAAC,OAAE,WAAW,kBACX,iBAAO,IAAI,CAAC,OAAO,MAClB,4CAAC,OAAE,WAAU,QAAO,WAAW,gBAAgB,IAAI,OACjD,sDAAC,gCAAW,aAAa,MAAM,MAAM,KADwB,MAAM,IAErE,CACD,GACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useState, useEffect } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const RightLegend = () => {\n  const {\n    innerWidth,\n    innerHeight,\n    rightLabelWidth,\n    axisRightWidth,\n    internalMargin,\n    rightLegendHeight,\n    setRightLegend,\n    originalSeries: series,\n  } = useContext(ChartContext);\n\n  const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);\n\n  useEffect(() => {\n    setYTransform(innerHeight / 2 + internalMargin.top - rightLegendHeight / 2);\n  }, [innerHeight, internalMargin.top, rightLegendHeight]);\n\n  return (\n    <g\n      ref={setRightLegend}\n      transform={`translate(${innerWidth + internalMargin.left + axisRightWidth + rightLabelWidth},${yTransform})`}\n    >\n      <rect width=\"20\" height={1} fill=\"transparent\" />\n      <g transform={`translate(0,0)`}>\n        {series.map((serie, i) => (\n          <g className=\"tick\" transform={`translate(30,${i * 30})`} key={serie.name}>\n            <LegendItem domainValue={serie.name} />\n          </g>\n        ))}\n      </g>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBnB;AAvBJ,mBAAuD;AACvD,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,cAAc,IAAI,eAAe,GAAG;AAEjF,8BAAU,MAAM;AACd,kBAAc,cAAc,IAAI,eAAe,MAAM,oBAAoB,CAAC;AAAA,EAC5E,GAAG,CAAC,aAAa,eAAe,KAAK,iBAAiB,CAAC;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,aAAa,aAAa,eAAe,OAAO,iBAAiB,mBAAmB;AAAA,MAE/F;AAAA,oDAAC,UAAK,OAAM,MAAK,QAAQ,GAAG,MAAK,eAAc;AAAA,QAC/C,4CAAC,OAAE,WAAW,kBACX,iBAAO,IAAI,CAAC,OAAO,MAClB,4CAAC,OAAE,WAAU,QAAO,WAAW,gBAAgB,IAAI,OACjD,sDAAC,gCAAW,aAAa,MAAM,MAAM,KADwB,MAAM,IAErE,CACD,GACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/Legend/TopLegend.js

@@ -34,42 +34,45 @@ var import_d3 = require("d3");
 var import_ChartContext = require("../../ChartContext");
 var import_LegendItem = require("./LegendItem");
 const TopLegend = () => {
-  const { colorScale, internalMargin, innerWidth, setTopLegend, toolbarHeight } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const {
+    colorScale,
+    currentData,
+    topLegendHeight,
+    internalMargin,
+    innerWidth,
+    setTopLegend,
+    width: graphWidth
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const ref = (0, import_react.useRef)(null);
-  const firstRender = (0, import_react.useRef)(true);
   const [xTransform, setXTransform] = (0, import_react.useState)(innerWidth / 2 + internalMargin.left);
-  (0, import_react.useLayoutEffect)(() => {
-    if (ref.current && firstRender.current) {
+  (0, import_react.useEffect)(() => {
+    if (ref.current) {
       const cells = (0, import_d3.select)(ref.current).selectAll(".cell");
       const padding = 30;
       let offset = 0;
       let verticalOffset = 0;
-      cells.each((d, i) => {
+      currentData.forEach((_, i) => {
         if (cells._groups[0][i - 1]) {
           const lastCell = (0, import_d3.select)(cells._groups[0][i - 1]);
           const d3sel = (0, import_d3.select)(cells._groups[0][i]);
-          const { width } = lastCell.node().getBBox();
-          if (offset + width + padding > innerWidth - innerWidth / 3) {
+          const { width: currentCellWidth } = d3sel.node().getBBox();
+          const { width: lastCellWidth } = lastCell.node().getBBox();
+          if (offset + lastCellWidth + padding + currentCellWidth + 10 > graphWidth) {
             offset = 0;
             verticalOffset += 20;
           } else {
-            offset += width + padding;
+            offset += lastCellWidth + padding;
           }
           d3sel.attr("transform", `translate(${offset}, ${verticalOffset})`);
         }
       });
       const bounds = ref.current.getBoundingClientRect();
-      setXTransform((prev) => prev - bounds.width / 2);
-      firstRender.current = false;
+      setXTransform(innerWidth / 2 + internalMargin.left - bounds.width / 2);
     }
-  }, [innerWidth]);
-  const render = (0, import_react.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { ref, transform: `translate(${xTransform},${toolbarHeight + 30})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { ref: setTopLegend, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { height: 40, width: 1, fill: "transparent" }),
-      colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendItem.LegendItem, { domainValue }, domainValue))
-    ] }) }),
-    [colorScale, setTopLegend, xTransform, toolbarHeight]
+  }, [currentData, graphWidth, innerWidth, internalMargin.left]);
+  return (0, import_react.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { ref, transform: `translate(${xTransform},10)`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { ref: setTopLegend, children: colorScale.domain().map((domainValue) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendItem.LegendItem, { domainValue }, domainValue)) }) }),
+    [xTransform, setTopLegend, colorScale]
   );
-  return render;
 };
 //# sourceMappingURL=TopLegend.js.map

package/dist/cjs/graphs/Chart/parts/Legend/TopLegend.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Legend/TopLegend.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useLayoutEffect, useRef, useState } from 'react';\n\nimport { selectAll, select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const TopLegend = () => {\n  const { colorScale, internalMargin, innerWidth, setTopLegend, toolbarHeight } = useContext(ChartContext);\n\n  const ref = useRef(null);\n  const firstRender = useRef(true);\n\n  const [xTransform, setXTransform] = useState(innerWidth / 2 + internalMargin.left);\n\n  useLayoutEffect(() => {\n    if (ref.current && firstRender.current) {\n      const cells = select(ref.current).selectAll('.cell');\n      const padding = 30;\n      let offset = 0;\n      let verticalOffset = 0;\n\n      cells.each((d, i) => {\n        if (cells._groups[0][i - 1]) {\n          const lastCell = select(cells._groups[0][i - 1]);\n          const d3sel = select(cells._groups[0][i]);\n\n          const { width } = lastCell.node().getBBox();\n          if (offset + width + padding > innerWidth - innerWidth / 3) {\n            offset = 0;\n            verticalOffset += 20;\n          } else {\n            offset += width + padding;\n          }\n\n          d3sel.attr('transform', `translate(${offset}, ${verticalOffset})`);\n        }\n      });\n      const bounds = ref.current.getBoundingClientRect();\n      setXTransform((prev) => prev - bounds.width / 2);\n      firstRender.current = false;\n    }\n  }, [innerWidth]);\n  const render = useMemo(\n    () => (\n      <g ref={ref} transform={`translate(${xTransform},${toolbarHeight + 30})`}>\n        <g ref={setTopLegend}>\n          <rect height={40} width={1} fill=\"transparent\" />\n          {colorScale.domain().map((domainValue, i) => (\n            <LegendItem key={domainValue} domainValue={domainValue} />\n          ))}\n        </g>\n      </g>\n    ),\n\n    [colorScale, setTopLegend, xTransform, toolbarHeight],\n  );\n\n  return render;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6Cf;AA7CR,mBAA8E;AAE9E,gBAAkC;AAClC,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,YAAY,gBAAgB,YAAY,cAAc,cAAc,QAAI,yBAAW,gCAAY;AAEvG,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,kBAAc,qBAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,aAAa,IAAI,eAAe,IAAI;AAEjF,oCAAgB,MAAM;AACpB,QAAI,IAAI,WAAW,YAAY,SAAS;AACtC,YAAM,YAAQ,kBAAO,IAAI,OAAO,EAAE,UAAU,OAAO;AACnD,YAAM,UAAU;AAChB,UAAI,SAAS;AACb,UAAI,iBAAiB;AAErB,YAAM,KAAK,CAAC,GAAG,MAAM;AACnB,YAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,gBAAM,eAAW,kBAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,gBAAM,YAAQ,kBAAO,MAAM,QAAQ,GAAG,EAAE;AAExC,gBAAM,EAAE,MAAM,IAAI,SAAS,KAAK,EAAE,QAAQ;AAC1C,cAAI,SAAS,QAAQ,UAAU,aAAa,aAAa,GAAG;AAC1D,qBAAS;AACT,8BAAkB;AAAA,UACpB,OAAO;AACL,sBAAU,QAAQ;AAAA,UACpB;AAEA,gBAAM,KAAK,aAAa,aAAa,WAAW,iBAAiB;AAAA,QACnE;AAAA,MACF,CAAC;AACD,YAAM,SAAS,IAAI,QAAQ,sBAAsB;AACjD,oBAAc,CAAC,SAAS,OAAO,OAAO,QAAQ,CAAC;AAC/C,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AACf,QAAM,aAAS;AAAA,IACb,MACE,4CAAC,OAAE,KAAU,WAAW,aAAa,cAAc,gBAAgB,OACjE,uDAAC,OAAE,KAAK,cACN;AAAA,kDAAC,UAAK,QAAQ,IAAI,OAAO,GAAG,MAAK,eAAc;AAAA,MAC9C,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,4CAAC,gCAA6B,eAAb,WAAuC,CACzD;AAAA,OACH,GACF;AAAA,IAGF,CAAC,YAAY,cAAc,YAAY,aAAa;AAAA,EACtD;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import React, { useContext, useMemo, useEffect, useRef, useState } from 'react';\n\nimport { select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const TopLegend = () => {\n  const {\n    colorScale,\n    currentData,\n    topLegendHeight,\n    internalMargin,\n    innerWidth,\n    setTopLegend,\n    width: graphWidth,\n  } = useContext(ChartContext);\n\n  const ref = useRef<SVGGElement>(null);\n\n  const [xTransform, setXTransform] = useState(innerWidth / 2 + internalMargin.left);\n\n  useEffect(() => {\n    if (ref.current) {\n      const cells = select(ref.current).selectAll('.cell');\n      const padding = 30;\n      let offset = 0;\n      let verticalOffset = 0;\n\n      currentData.forEach((_, i) => {\n        if (cells._groups[0][i - 1]) {\n          const lastCell = select(cells._groups[0][i - 1]);\n          const d3sel = select(cells._groups[0][i]);\n          const { width: currentCellWidth } = d3sel.node().getBBox();\n\n          const { width: lastCellWidth } = lastCell.node().getBBox();\n\n          if (offset + lastCellWidth + padding + currentCellWidth + 10 > graphWidth) {\n            offset = 0;\n            verticalOffset += 20;\n          } else {\n            offset += lastCellWidth + padding;\n          }\n\n          d3sel.attr('transform', `translate(${offset}, ${verticalOffset})`);\n        }\n      });\n      const bounds = ref.current.getBoundingClientRect();\n      setXTransform(innerWidth / 2 + internalMargin.left - bounds.width / 2);\n    }\n  }, [currentData, graphWidth, innerWidth, internalMargin.left]);\n  return useMemo(\n    () => (\n      <g ref={ref} transform={`translate(${xTransform},10)`}>\n        <g ref={setTopLegend}>\n          {colorScale.domain().map((domainValue) => (\n            <LegendItem key={domainValue} domainValue={domainValue} />\n          ))}\n        </g>\n      </g>\n    ),\n\n    [xTransform, setTopLegend, colorScale],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuDX;AAvDZ,mBAAwE;AAExE,gBAAuB;AACvB,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAM,qBAAoB,IAAI;AAEpC,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,aAAa,IAAI,eAAe,IAAI;AAEjF,8BAAU,MAAM;AACd,QAAI,IAAI,SAAS;AACf,YAAM,YAAQ,kBAAO,IAAI,OAAO,EAAE,UAAU,OAAO;AACnD,YAAM,UAAU;AAChB,UAAI,SAAS;AACb,UAAI,iBAAiB;AAErB,kBAAY,QAAQ,CAAC,GAAG,MAAM;AAC5B,YAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,gBAAM,eAAW,kBAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,gBAAM,YAAQ,kBAAO,MAAM,QAAQ,GAAG,EAAE;AACxC,gBAAM,EAAE,OAAO,iBAAiB,IAAI,MAAM,KAAK,EAAE,QAAQ;AAEzD,gBAAM,EAAE,OAAO,cAAc,IAAI,SAAS,KAAK,EAAE,QAAQ;AAEzD,cAAI,SAAS,gBAAgB,UAAU,mBAAmB,KAAK,YAAY;AACzE,qBAAS;AACT,8BAAkB;AAAA,UACpB,OAAO;AACL,sBAAU,gBAAgB;AAAA,UAC5B;AAEA,gBAAM,KAAK,aAAa,aAAa,WAAW,iBAAiB;AAAA,QACnE;AAAA,MACF,CAAC;AACD,YAAM,SAAS,IAAI,QAAQ,sBAAsB;AACjD,oBAAc,aAAa,IAAI,eAAe,OAAO,OAAO,QAAQ,CAAC;AAAA,IACvE;AAAA,EACF,GAAG,CAAC,aAAa,YAAY,YAAY,eAAe,IAAI,CAAC;AAC7D,aAAO;AAAA,IACL,MACE,4CAAC,OAAE,KAAU,WAAW,aAAa,kBACnC,sDAAC,OAAE,KAAK,cACL,qBAAW,OAAO,EAAE,IAAI,CAAC,gBACxB,4CAAC,gCAA6B,eAAb,WAAuC,CACzD,GACH,GACF;AAAA,IAGF,CAAC,YAAY,cAAc,UAAU;AAAA,EACvC;AACF;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/Scroller/Controllers.js

@@ -30,51 +30,74 @@ module.exports = __toCommonJS(Controllers_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_ds_system = require("@elliemae/ds-system");
 var import_ChartContext = require("../../ChartContext");
+var import_constants = require("../../../constants");
+const StyledResetter = (0, import_ds_system.styled)("g")`
+  cursor: ${({ isDisabled }) => isDisabled ? "not-allowed" : "pointer"};
+  opacity: ${({ isDisabled }) => isDisabled ? "0.4" : "1"};
+  &focus {
+    outline: 2px solid blue;
+  }
+`;
 const Controllers = () => {
   const {
     props: { xScroll },
     width,
+    internalMargin,
     xScale,
     yScale,
+    containerRef,
     containerRatio,
     setContainerRatio,
     lastPosition,
     setToolbarRef,
     setXScrollbarPosition
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const isDisabled = (0, import_react.useMemo)(() => containerRatio === 1, [containerRatio]);
   const handleOnClick = (0, import_react.useCallback)(() => {
     setContainerRatio(1);
     setXScrollbarPosition(0);
     lastPosition.current = 0;
   }, [lastPosition, setContainerRatio, setXScrollbarPosition]);
+  const handleOnKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      if (e.code === "Space") {
+        setContainerRatio(1);
+        setXScrollbarPosition(0);
+        lastPosition.current = 0;
+        containerRef.focus();
+      }
+    },
+    [containerRef, lastPosition, setContainerRatio, setXScrollbarPosition]
+  );
   if (xScale.bandwidth || yScale.bandwidth)
     return null;
   if (!xScroll)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "g",
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledResetter,
     {
       onClick: handleOnClick,
-      transform: `translate(${width - 17 * 2},4) scale(1.5,1.5)`,
+      onKeyDown: handleOnKeyDown,
+      onBlur: (e) => e.stopPropagation(),
+      transform: `translate(${width - import_constants.TOOLBAR.RESET.WIDTH * 2},${internalMargin.top / 2 - import_constants.TOOLBAR.RESET.HEIGHT / 2})`,
       strokeLinecap: "round",
-      opacity: "",
-      strokeOpacity: "1",
-      style: { cursor: "pointer", opacity: containerRatio > 1 ? 1 : 0.5 },
+      isDisabled,
       ref: setToolbarRef,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "17", height: "17", fill: "white", stroke: "#c0c0c0", strokeWidth: "1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
-          {
-            d: "M 2.875 7.75 A 5.625 5.625 0 1 1 4.5225 11.7275 L 8.2725 10.7275 L 6.5225 14.9775 L 4.5225 11.7275",
-            fill: "#ffffff",
-            stroke: "#c2c2c2",
-            strokeLinecap: "round",
-            strokeWidth: "1"
-          }
-        )
-      ]
+      role: "button",
+      tabIndex: isDisabled ? -1 : 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          d: "M 2.875 7.75 A 5.625 5.625 0 1 1 4.5225 11.7275 L 8.2725 10.7275 L 6.5225 14.9775 L 4.5225 11.7275\n        M 0 0 H 17 V 17 H 0 V 0 ",
+          fill: "#ffffff",
+          stroke: "#000000",
+          strokeLinecap: "round",
+          strokeWidth: "1"
+        }
+      )
     }
   );
 };

package/dist/cjs/graphs/Chart/parts/Scroller/Controllers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Scroller/Controllers.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const Controllers = () => {\n  const {\n    props: { xScroll },\n    width,\n    xScale,\n    yScale,\n    containerRatio,\n    setContainerRatio,\n    lastPosition,\n    setToolbarRef,\n    setXScrollbarPosition,\n  } = useContext(ChartContext);\n\n  const handleOnClick = useCallback(() => {\n    setContainerRatio(1);\n    setXScrollbarPosition(0);\n    lastPosition.current = 0;\n  }, [lastPosition, setContainerRatio, setXScrollbarPosition]);\n\n  // if is a bar chart we dont give controls\n  if (xScale.bandwidth || yScale.bandwidth) return null;\n\n  if (!xScroll) return null;\n  return (\n    <g\n      onClick={handleOnClick}\n      transform={`translate(${width - 17 * 2},4) scale(1.5,1.5)`}\n      strokeLinecap=\"round\"\n      opacity=\"\"\n      strokeOpacity=\"1\"\n      style={{ cursor: 'pointer', opacity: containerRatio > 1 ? 1 : 0.5 }}\n      ref={setToolbarRef}\n    >\n      <rect width=\"17\" height=\"17\" fill=\"white\" stroke=\"#c0c0c0\" strokeWidth=\"1\"></rect>\n      <path\n        d=\"M 2.875 7.75 A 5.625 5.625 0 1 1 4.5225 11.7275 L 8.2725 10.7275 L 6.5225 14.9775 L 4.5225 11.7275\"\n        fill=\"#ffffff\"\n        stroke=\"#c2c2c2\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"1\"\n      ></path>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6BnB;AA3BJ,mBAA+C;AAC/C,0BAA6B;AAEtB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,oBAAgB,0BAAY,MAAM;AACtC,sBAAkB,CAAC;AACnB,0BAAsB,CAAC;AACvB,iBAAa,UAAU;AAAA,EACzB,GAAG,CAAC,cAAc,mBAAmB,qBAAqB,CAAC;AAG3D,MAAI,OAAO,aAAa,OAAO;AAAW,WAAO;AAEjD,MAAI,CAAC;AAAS,WAAO;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW,aAAa,QAAQ,KAAK;AAAA,MACrC,eAAc;AAAA,MACd,SAAQ;AAAA,MACR,eAAc;AAAA,MACd,OAAO,EAAE,QAAQ,WAAW,SAAS,iBAAiB,IAAI,IAAI,IAAI;AAAA,MAClE,KAAK;AAAA,MAEL;AAAA,oDAAC,UAAK,OAAM,MAAK,QAAO,MAAK,MAAK,SAAQ,QAAO,WAAU,aAAY,KAAI;AAAA,QAC3E;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA,YACL,QAAO;AAAA,YACP,eAAc;AAAA,YACd,aAAY;AAAA;AAAA,QACb;AAAA;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext';\nimport { TOOLBAR } from '../../../constants';\n\nconst StyledResetter = styled('g')<{ isDisabled: 'boolean' }>`\n  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};\n  opacity: ${({ isDisabled }) => (isDisabled ? '0.4' : '1')};\n  &focus {\n    outline: 2px solid blue;\n  }\n`;\nexport const Controllers = () => {\n  const {\n    props: { xScroll },\n    width,\n    internalMargin,\n    xScale,\n    yScale,\n    containerRef,\n    containerRatio,\n    setContainerRatio,\n    lastPosition,\n    setToolbarRef,\n    setXScrollbarPosition,\n  } = useContext(ChartContext);\n\n  const isDisabled = useMemo(() => containerRatio === 1, [containerRatio]);\n  const handleOnClick = useCallback(() => {\n    setContainerRatio(1);\n    setXScrollbarPosition(0);\n    lastPosition.current = 0;\n  }, [lastPosition, setContainerRatio, setXScrollbarPosition]);\n\n  const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      e.stopPropagation();\n      if (e.code === 'Space') {\n        setContainerRatio(1);\n        setXScrollbarPosition(0);\n        lastPosition.current = 0;\n        containerRef.focus();\n      }\n    },\n    [containerRef, lastPosition, setContainerRatio, setXScrollbarPosition],\n  );\n  // if is a bar chart we dont give controls\n  if (xScale.bandwidth || yScale.bandwidth) return null;\n\n  if (!xScroll) return null;\n  return (\n    <StyledResetter\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      onBlur={(e) => e.stopPropagation()}\n      transform={`translate(${width - TOOLBAR.RESET.WIDTH * 2},${internalMargin.top / 2 - TOOLBAR.RESET.HEIGHT / 2})`}\n      strokeLinecap=\"round\"\n      isDisabled={isDisabled}\n      ref={setToolbarRef}\n      role=\"button\"\n      tabIndex={isDisabled ? -1 : 0}\n    >\n      <path\n        d=\"M 2.875 7.75 A 5.625 5.625 0 1 1 4.5225 11.7275 L 8.2725 10.7275 L 6.5225 14.9775 L 4.5225 11.7275\n        M 0 0 H 17 V 17 H 0 V 0 \"\n        fill=\"#ffffff\"\n        stroke=\"#000000\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"1\"\n      ></path>\n    </StyledResetter>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgEjB;AA9DN,mBAAwD;AACxD,uBAAuB;AACvB,0BAA6B;AAC7B,uBAAwB;AAExB,MAAM,qBAAiB,yBAAO,GAAG;AAAA,YACrB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA,aACjD,CAAC,EAAE,WAAW,MAAO,aAAa,QAAQ;AAAA;AAAA;AAAA;AAAA;AAKhD,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;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,iBAAa,sBAAQ,MAAM,mBAAmB,GAAG,CAAC,cAAc,CAAC;AACvE,QAAM,oBAAgB,0BAAY,MAAM;AACtC,sBAAkB,CAAC;AACnB,0BAAsB,CAAC;AACvB,iBAAa,UAAU;AAAA,EACzB,GAAG,CAAC,cAAc,mBAAmB,qBAAqB,CAAC;AAE3D,QAAM,sBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,QAAE,gBAAgB;AAClB,UAAI,EAAE,SAAS,SAAS;AACtB,0BAAkB,CAAC;AACnB,8BAAsB,CAAC;AACvB,qBAAa,UAAU;AACvB,qBAAa,MAAM;AAAA,MACrB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,cAAc,mBAAmB,qBAAqB;AAAA,EACvE;AAEA,MAAI,OAAO,aAAa,OAAO;AAAW,WAAO;AAEjD,MAAI,CAAC;AAAS,WAAO;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ,CAAC,MAAM,EAAE,gBAAgB;AAAA,MACjC,WAAW,aAAa,QAAQ,yBAAQ,MAAM,QAAQ,KAAK,eAAe,MAAM,IAAI,yBAAQ,MAAM,SAAS;AAAA,MAC3G,eAAc;AAAA,MACd;AAAA,MACA,KAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAU,aAAa,KAAK;AAAA,MAE5B;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UAEF,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,aAAY;AAAA;AAAA,MACb;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

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

@@ -44,13 +44,24 @@ const ScrollableContainerX = () => {
     containerRatio,
     innerWidth,
     isGrabbed,
+    containerRef,
     setXScrollbarPosition,
     setContainerRatio,
     lastPosition,
     innerHeight,
     internalMargin,
-    chartId
+    chartId,
+    isZooming,
+    setIsZooming,
+    zoomStartingPosition,
+    setZoomStartingPosition,
+    movingPosition,
+    setMovingPosition
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const getRealClientX = (0, import_react.useCallback)(
+    (clientX) => clientX - internalMargin.left - containerRef.getBoundingClientRect().left,
+    [internalMargin.left]
+  );
   const Scrappers = (0, import_react.useMemo)(() => {
     if (scrapper?.type === "horizontal")
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Scrapper.Scrapper, {});
@@ -58,14 +69,11 @@ const ScrollableContainerX = () => {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VerticalScrapper.VerticalScrapper, {});
     return null;
   }, [scrapper?.type]);
-  const [isZooming, setIsZooming] = (0, import_react.useState)(false);
-  const [startingPosition, setStartingPosition] = (0, import_react.useState)(0);
-  const [movingPosition, setMovingPosition] = (0, import_react.useState)(0);
   const handleOnMouseDown = (0, import_react.useCallback)(
-    (e) => {
+    ({ clientX }) => {
       if (!isGrabbed && !xScale.bandwidth) {
         setIsZooming(true);
-        setStartingPosition(e.clientX);
+        setZoomStartingPosition(getRealClientX(clientX));
         setMovingPosition(0);
       }
     },
@@ -74,22 +82,22 @@ const ScrollableContainerX = () => {
   const handleOnMouseMove = (0, import_react.useCallback)(
     ({ clientX }) => {
       if (isZooming)
-        setMovingPosition(clientX);
+        setMovingPosition(getRealClientX(clientX));
     },
     [isZooming]
   );
   const handleOnMouseUp = (0, import_react.useCallback)(
     (e) => {
-      const bounds = e.currentTarget.closest("div").getBoundingClientRect();
       if (!isZooming)
         return;
       setIsZooming(false);
-      const endingPosition = e.clientX;
-      const diff = Math.abs(startingPosition - endingPosition);
+      setMovingPosition(0);
+      const endingPosition = getRealClientX(e.clientX);
+      const diff = Math.abs(zoomStartingPosition - endingPosition);
       if (diff <= 0)
         return;
       const newRatio = innerWidth / (innerWidth * containerRatio / diff) < 40 ? innerWidth / 40 : innerWidth * containerRatio / diff;
-      const newPosition = lastPosition?.current + ((startingPosition > endingPosition ? endingPosition : startingPosition) - bounds.left - internalMargin.left) / containerRatio;
+      const newPosition = lastPosition?.current + (zoomStartingPosition > endingPosition ? endingPosition : zoomStartingPosition) / containerRatio;
       if (newPosition > innerWidth - innerWidth / newRatio)
         setXScrollbarPosition(innerWidth - innerWidth / newRatio);
       else
@@ -99,14 +107,16 @@ const ScrollableContainerX = () => {
       e.stopPropagation();
     },
     [
-      containerRatio,
-      innerWidth,
       isZooming,
-      internalMargin,
+      setIsZooming,
+      setMovingPosition,
+      getRealClientX,
+      zoomStartingPosition,
+      innerWidth,
+      containerRatio,
       lastPosition,
-      setContainerRatio,
       setXScrollbarPosition,
-      startingPosition
+      setContainerRatio
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -126,8 +136,8 @@ const ScrollableContainerX = () => {
           isZooming && movingPosition !== 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "rect",
             {
-              x: (movingPosition < startingPosition ? movingPosition : startingPosition) - internalMargin.left,
-              width: Math.abs(movingPosition - startingPosition),
+              x: movingPosition < zoomStartingPosition ? movingPosition : zoomStartingPosition,
+              width: Math.abs(movingPosition - zoomStartingPosition),
               height: innerHeight,
               fill: "orange",
               style: { opacity: 0.2 }

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

@@ -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, useState, useCallback, 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    xScale,\n    containerRatio,\n    innerWidth,\n    isGrabbed,\n    setXScrollbarPosition,\n    setContainerRatio,\n    lastPosition,\n    innerHeight,\n    internalMargin,\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  const [isZooming, setIsZooming] = useState(false);\n  const [startingPosition, setStartingPosition] = useState(0);\n  const [movingPosition, setMovingPosition] = useState(0);\n\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isGrabbed && !xScale.bandwidth) {\n        setIsZooming(true);\n        setStartingPosition(e.clientX);\n        setMovingPosition(0);\n      }\n    },\n    [isGrabbed, xScale],\n  );\n  const handleOnMouseMove: React.MouseEventHandler = useCallback(\n    ({ clientX }) => {\n      if (isZooming) setMovingPosition(clientX);\n    },\n    [isZooming],\n  );\n  const handleOnMouseUp: React.MouseEventHandler = useCallback(\n    (e) => {\n      const bounds = e.currentTarget.closest('div').getBoundingClientRect();\n      if (!isZooming) return;\n      setIsZooming(false);\n      const endingPosition = e.clientX;\n\n      const diff = Math.abs(startingPosition - endingPosition);\n      if (diff <= 0) return;\n      const newRatio =\n        innerWidth / ((innerWidth * containerRatio) / diff) < 40\n          ? innerWidth / 40\n          : (innerWidth * containerRatio) / diff;\n      const newPosition =\n        lastPosition?.current +\n        ((startingPosition > endingPosition ? endingPosition : startingPosition) - bounds.left - internalMargin.left) /\n          containerRatio;\n\n      // if (newPosition < 0) setXScrollbarPosition(0);\n      // if is bigger thant innerwidth possible we force the end\n      if (newPosition > innerWidth - innerWidth / newRatio) setXScrollbarPosition(innerWidth - innerWidth / newRatio);\n      else setXScrollbarPosition(newPosition);\n\n      setContainerRatio(newRatio);\n      lastPosition.current = newPosition;\n      e.stopPropagation();\n    },\n    [\n      containerRatio,\n      innerWidth,\n      isZooming,\n      internalMargin,\n      lastPosition,\n      setContainerRatio,\n      setXScrollbarPosition,\n      startingPosition,\n    ],\n  );\n  return (\n    <g\n      className=\"scrollable-container-x\"\n      onMouseDown={handleOnMouseDown}\n      onMouseMove={handleOnMouseMove}\n      onMouseUp={handleOnMouseUp}\n    >\n      <g mask={`url(#mask-${chartId})`}>\n        <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n          <AxisBottom />\n          <SeriesFactory />\n          {Scrappers}\n        </g>\n        {isZooming && movingPosition !== 0 ? (\n          <rect\n            x={(movingPosition < startingPosition ? movingPosition : startingPosition) - internalMargin.left}\n            width={Math.abs(movingPosition - startingPosition)}\n            height={innerHeight}\n            fill=\"orange\"\n            style={{ opacity: 0.2 }}\n          />\n        ) : null}\n      </g>\n      <ScrollBarX />\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback, 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    xScale,\n    containerRatio,\n    innerWidth,\n    isGrabbed,\n    containerRef,\n    setXScrollbarPosition,\n    setContainerRatio,\n    lastPosition,\n    innerHeight,\n    internalMargin,\n    chartId,\n    isZooming,\n    setIsZooming,\n    zoomStartingPosition,\n    setZoomStartingPosition,\n    movingPosition,\n    setMovingPosition,\n  } = useContext(ChartContext);\n\n  const getRealClientX = useCallback(\n    (clientX: number) => clientX - internalMargin.left - containerRef.getBoundingClientRect().left,\n    [internalMargin.left],\n  );\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  //mouse\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    ({ clientX }) => {\n      if (!isGrabbed && !xScale.bandwidth) {\n        setIsZooming(true);\n        setZoomStartingPosition(getRealClientX(clientX));\n        setMovingPosition(0);\n      }\n    },\n    [isGrabbed, xScale],\n  );\n\n  const handleOnMouseMove: React.MouseEventHandler = useCallback(\n    ({ clientX }) => {\n      if (isZooming) setMovingPosition(getRealClientX(clientX));\n    },\n    [isZooming],\n  );\n  const handleOnMouseUp: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isZooming) return;\n      setIsZooming(false);\n      setMovingPosition(0);\n      const endingPosition = getRealClientX(e.clientX);\n\n      const diff = Math.abs(zoomStartingPosition - endingPosition);\n      if (diff <= 0) return;\n      const newRatio =\n        innerWidth / ((innerWidth * containerRatio) / diff) < 40\n          ? innerWidth / 40\n          : (innerWidth * containerRatio) / diff;\n      const newPosition =\n        lastPosition?.current +\n        (zoomStartingPosition > endingPosition ? endingPosition : zoomStartingPosition) / containerRatio;\n\n      // if (newPosition < 0) setXScrollbarPosition(0);\n      // if is bigger thant innerwidth possible we force the end\n      if (newPosition > innerWidth - innerWidth / newRatio) setXScrollbarPosition(innerWidth - innerWidth / newRatio);\n      else setXScrollbarPosition(newPosition);\n\n      setContainerRatio(newRatio);\n      lastPosition.current = newPosition;\n      e.stopPropagation();\n    },\n    [\n      isZooming,\n      setIsZooming,\n      setMovingPosition,\n      getRealClientX,\n      zoomStartingPosition,\n      innerWidth,\n      containerRatio,\n      lastPosition,\n      setXScrollbarPosition,\n      setContainerRatio,\n    ],\n  );\n  return (\n    <g\n      className=\"scrollable-container-x\"\n      onMouseDown={handleOnMouseDown}\n      onMouseMove={handleOnMouseMove}\n      onMouseUp={handleOnMouseUp}\n    >\n      <g mask={`url(#mask-${chartId})`}>\n        <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n          <AxisBottom />\n          <SeriesFactory />\n          {Scrappers}\n        </g>\n        {isZooming && movingPosition !== 0 ? (\n          <rect\n            x={movingPosition < zoomStartingPosition ? movingPosition : zoomStartingPosition}\n            width={Math.abs(movingPosition - zoomStartingPosition)}\n            height={innerHeight}\n            fill=\"orange\"\n            style={{ opacity: 0.2 }}\n          />\n        ) : null}\n      </g>\n      <ScrollBarX />\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -30,7 +30,20 @@ __export(react_desc_prop_types_exports, {
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_utilities = require("@elliemae/ds-utilities");
-const defaultProps = {};
+const defaultProps = {
+  series: [
+    {
+      name: "1",
+      data: [0],
+      color: "grey-100",
+      type: "bar"
+    }
+  ],
+  xAxis: {
+    cols: ["0"]
+  },
+  yAxis: {}
+};
 const propTypes = {
   ...import_ds_utilities.globalAttributesPropTypes,
   height: import_ds_utilities.PropTypes.number.isRequired.description("height").defaultValue(""),

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

@@ -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';\nimport type { 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    withTrendHighlight: boolean;\n    TooltipRenderer: () => JSX.Element;\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;AA2G9C,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 type { 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    withTrendHighlight: boolean;\n    TooltipRenderer: () => JSX.Element;\n    height: number;\n    width: number;\n  }\n\n  export interface DefaultProps {\n    yAxis: AxisT;\n    xAxis: AxisT;\n    series: SeriesT[];\n  }\n\n  export interface RequiredProps {}\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  series: [\n    {\n      name: '1',\n      data: [0],\n      color: 'grey-100',\n      type: 'bar',\n    },\n  ],\n  xAxis: {\n    cols: ['0'],\n  },\n  yAxis: {},\n};\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;AA2G9C,MAAM,eAAsC;AAAA,EACjD,QAAQ;AAAA,IACN;AAAA,MACE,MAAM;AAAA,MACN,MAAM,CAAC,CAAC;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,MAAM,CAAC,GAAG;AAAA,EACZ;AAAA,EACA,OAAO,CAAC;AACV;AAEO,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/Bars.js

@@ -34,7 +34,6 @@ var import_Rect = require("./Rect");
 var import_ChartContext = require("../ChartContext");
 const Bars = ({ serie }) => {
   const {
-    props: { yAxis, TooltipRenderer },
     innerHeight,
     xScale,
     yScale,
@@ -43,6 +42,7 @@ const Bars = ({ serie }) => {
     colorScale,
     getXValue,
     getYValue,
+    isHorizontal,
     chartId
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
@@ -53,7 +53,7 @@ const Bars = ({ serie }) => {
     const y = getYValue(bar);
     const width = subGroupScale?.bandwidth();
     const height = y > 0 ? positiveSize - finalYScale(y) : finalYScale(y) - finalYScale(0);
-    const transformX = subGroupScale(serie.name) + xScale(x);
+    const transformX = isHorizontal ? 0 : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? width / 2 * subGroupScale.domain().length : 0);
     const transformY = y > 0 ? finalYScale(0) - height : finalYScale(0);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: `${serie.name}-rects`, 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 { 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              datum={bar}\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;AD8CX;AA7CZ,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,OAAE,MAAM,WAAW,MAAM,IAAI,GAAG,UAAU,wBAAwB,YAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,UAAM,IAAI,UAAU,GAAG;AACvB,UAAM,IAAI,UAAU,GAAG;AAEvB,UAAM,QAAQ,eAAe,UAAU;AACvC,UAAM,SAAS,IAAI,IAAI,eAAe,YAAY,CAAC,IAAI,YAAY,CAAC,IAAI,YAAY,CAAC;AAErF,UAAM,aAAa,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC;AAQvD,UAAM,aAAa,IAAI,IAAI,YAAY,CAAC,IAAI,SAAS,YAAY,CAAC;AAElE,WACE,4CAAC,OAAE,IAAI,GAAG,MAAM,cAA4B,WAAW,aAAa,iBAClE;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,KAXiC,IAAI,GAsBvC;AAAA,EAEJ,CAAC,GACH;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\n\nexport const Bars = ({ serie }) => {\n  const {\n    innerHeight,\n    xScale,\n    yScale,\n    y2Scale,\n    subGroupScale,\n    colorScale,\n    getXValue,\n    getYValue,\n    isHorizontal,\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              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;AD4CX;AA3CZ,mBAAkC;AAClC,kBAAqB;AACrB,0BAA6B;AAEtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM;AAAA,IACJ;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,cAAc,YAAY,CAAC;AAChD,QAAM,eAAe,cAAc;AAEnC,SACE,4CAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAAG,UAAU,wBAAwB,YAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,UAAM,IAAI,UAAU,GAAG;AACvB,UAAM,IAAI,UAAU,GAAG;AAEvB,UAAM,QAAQ,eAAe,UAAU;AACvC,UAAM,SAAS,IAAI,IAAI,eAAe,YAAY,CAAC,IAAI,YAAY,CAAC,IAAI,YAAY,CAAC;AAMrF,UAAM,aAAa,eACf,IACA,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC,KAAK,IAAI,MAAM,IAAK,QAAQ,IAAK,cAAc,OAAO,EAAE,SAAS;AAEzG,UAAM,aAAa,IAAI,IAAI,YAAY,CAAC,IAAI,SAAS,YAAY,CAAC;AAElE,WACE,4CAAC,OAAE,IAAI,GAAG,MAAM,cAA4B,WAAW,aAAa,iBAClE;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,KAXiC,IAAI,GAYvC;AAAA,EAEJ,CAAC,GACH;AAEJ;",
   "names": []
 }

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

@@ -136,8 +136,7 @@ const Point = ({ x, y, xValue, yValue, name, pointStyle, pointRadius, id, opacit
               id,
               width: (pointRadius ?? 3) * 4,
               height: (pointRadius ?? 3) * 4,
-              pointRadius,
-              style: { transform: `translate(-${pointRadius}px, -${pointRadius}px)` },
+              style: { transform: `translate(-${pointRadius ?? 3}px, -${pointRadius ?? 3}px)` },
               content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, { data: [{ name, yValue, xValue }] })
             }
           ) : null