@elliemae/ds-dataviz 3.18.0-next.0 → 3.18.0-next.2

package/dist/cjs/graphs/Chart/ChartContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/graphs/Chart/ChartContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport { createContext, createRef } from 'react';\nimport type { ScaleBand, ScaleOrdinal } from 'd3';\nimport { scaleLinear, scaleBand, scaleOrdinal } from 'd3';\nimport type { DSChartT } from './react-desc-prop-types.js';\nimport { defaultProps } from './react-desc-prop-types.js';\nimport type { ScaleT } from './scales/index.js';\ninterface ContextT {\n  props: DSChartT.Props;\n  originalSeries: DSChartT.SeriesT;\n  currentData: DSChartT.InternalData;\n  xScale: ScaleT;\n  yScale: ScaleT;\n  y2Scale: ScaleT;\n  innerHeight: number;\n  innerWidth: number;\n  activePoint: DSChartT.InternalDatum | null;\n  containerRef: HTMLDivElement | null;\n  setContainerRef: React.Dispatch<React.SetStateAction<SVGElement | null>>;\n  groups: string[];\n  subGroupScale?: ScaleBand<string> | null;\n  colorScale: ScaleOrdinal<string, unknown, string>;\n  axisLeftRef: SVGGElement | null;\n  scrapperPosY: string;\n  scrapperPosX: string;\n  xScrollbarPosition: number;\n  isGrabbed: boolean;\n  startPosition: number;\n  isScrollbarVisible: boolean;\n  lastPosition: React.MutableRefObject<number>;\n  containerRatio: number;\n  internalMargin: {\n    bottom: number;\n    top: number;\n    right: number;\n    left: number;\n  };\n  toolbarHeight: number;\n  leftLegendHeight: number;\n  rightLegendHeight: number;\n  leftLabelHeight: number;\n  leftLegendWidth: number;\n  leftLabelWidth: number;\n  leftLegend: SVGGElement;\n  bottomLegend: SVGGElement;\n  rightLegend: SVGGElement;\n  axisBottomHeight: number;\n  bottomLabelHeight: number;\n  rightLabelWidth: number;\n  axisRightWidth: number;\n  isHorizontal: boolean;\n  leftLabel: SVGGElement;\n  chartId: string;\n  hiddenSeries: string[];\n  stackedData: DSChartT.StackedSeriesByGroupT;\n  width: number;\n  height: number;\n  isZooming: boolean;\n  zoomStartingPosition: number;\n  movingPosition: number;\n  setActivePoint: React.Dispatch<React.SetStateAction<DSChartT.InternalDatum | null>>;\n  setLeftAxisRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getBandwidth: () => number;\n  setScrapperPosY: React.Dispatch<React.SetStateAction<string>>;\n  setScrapperPosX: React.Dispatch<React.SetStateAction<string>>;\n  setXScrollbarPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsGrabbed: React.Dispatch<React.SetStateAction<boolean>>;\n  setStartPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsScrollbarVisible: React.Dispatch<React.SetStateAction<boolean>>;\n  setAxisLeftRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setTopLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisBottomRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisRightRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getXValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  getYValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  getXValueFormatted: (datum: DSChartT.InternalDatum) => string;\n  getYValueFormatted: (datum: DSChartT.InternalDatum) => string;\n  setHiddenSeries: React.Dispatch<React.SetStateAction<string[]>>;\n  getXScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n  getYScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n  setContainerRatio: React.Dispatch<React.SetStateAction<number>>;\n  setToolbarRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setMovingPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsZooming: React.Dispatch<React.SetStateAction<boolean>>;\n  setZoomStartingPosition: React.Dispatch<React.SetStateAction<number>>;\n}\nconst defaultContext: ContextT = {\n  props: defaultProps,\n  xScale: scaleBand(),\n  yScale: scaleLinear(),\n  innerHeight: 0,\n  innerWidth: 0,\n  activePoint: null,\n  setActivePoint: () => {},\n  scrapperPosY: '',\n  setScrapperPosY: () => {},\n  containerRef: createRef<HTMLDivElement>(),\n  groups: [],\n  colorScale: scaleOrdinal(),\n  setLeftAxisRef: () => {},\n};\nexport const ChartContext = createContext(defaultContext);\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import type React from 'react';\nimport { createContext, createRef } from 'react';\nimport type { ScaleBand, ScaleOrdinal } from 'd3';\nimport { scaleLinear, scaleBand, scaleOrdinal } from 'd3';\nimport type { DSChartT } from './react-desc-prop-types.js';\nimport { defaultProps } from './react-desc-prop-types.js';\nimport type { ScaleT } from './scales/index.js';\ninterface ContextT {\n  props: DSChartT.Props;\n  originalSeries: DSChartT.SeriesT;\n  currentData: DSChartT.InternalData;\n  xScale: ScaleT;\n  yScale: ScaleT;\n  y2Scale: ScaleT;\n  innerHeight: number;\n  innerWidth: number;\n  activePoint: DSChartT.InternalDatum | null;\n  containerRef: HTMLDivElement | null;\n  setContainerRef: React.Dispatch<React.SetStateAction<SVGElement | null>>;\n  groups: string[];\n  subGroupScale?: ScaleBand<string> | null;\n  colorScale: ScaleOrdinal<string, unknown, string>;\n  axisLeftRef: SVGGElement | null;\n  scrapperPosY: string;\n  scrapperPosX: string;\n  xScrollbarPosition: number;\n  isGrabbed: boolean;\n  startPosition: number;\n  isScrollbarVisible: boolean;\n  lastScrollbarPosition: React.MutableRefObject<number>;\n  containerRatio: number;\n  internalMargin: {\n    bottom: number;\n    top: number;\n    right: number;\n    left: number;\n  };\n  toolbarHeight: number;\n  leftLegendHeight: number;\n  rightLegendHeight: number;\n  leftLabelHeight: number;\n  leftLegendWidth: number;\n  leftLabelWidth: number;\n  leftLegend: SVGGElement;\n  bottomLegend: SVGGElement;\n  rightLegend: SVGGElement;\n  axisBottomHeight: number;\n  bottomLabelHeight: number;\n  rightLabelWidth: number;\n  axisRightWidth: number;\n  isHorizontal: boolean;\n  leftLabel: SVGGElement;\n  chartId: string;\n  hiddenSeries: string[];\n  stackedData: DSChartT.StackedSeriesByGroupT;\n  width: number;\n  height: number;\n  isZooming: boolean;\n  zoomStartingPosition: number;\n  movingPosition: number;\n  setActivePoint: React.Dispatch<React.SetStateAction<DSChartT.InternalDatum | null>>;\n  setLeftAxisRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getBandwidth: () => number;\n  setScrapperPosY: React.Dispatch<React.SetStateAction<string>>;\n  setScrapperPosX: React.Dispatch<React.SetStateAction<string>>;\n  setXScrollbarPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsGrabbed: React.Dispatch<React.SetStateAction<boolean>>;\n  setStartPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsScrollbarVisible: React.Dispatch<React.SetStateAction<boolean>>;\n  setAxisLeftRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setTopLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisBottomRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisRightRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getXValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  getYValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  getXValueFormatted: (datum: DSChartT.InternalDatum) => string;\n  getYValueFormatted: (datum: DSChartT.InternalDatum) => string;\n  setHiddenSeries: React.Dispatch<React.SetStateAction<string[]>>;\n  getXScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n  getYScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n  setContainerRatio: React.Dispatch<React.SetStateAction<number>>;\n  setToolbarRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setMovingPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsZooming: React.Dispatch<React.SetStateAction<boolean>>;\n  setZoomStartingPosition: React.Dispatch<React.SetStateAction<number>>;\n}\nconst defaultContext: ContextT = {\n  props: defaultProps,\n  xScale: scaleBand(),\n  yScale: scaleLinear(),\n  innerHeight: 0,\n  innerWidth: 0,\n  activePoint: null,\n  setActivePoint: () => {},\n  scrapperPosY: '',\n  setScrapperPosY: () => {},\n  containerRef: createRef<HTMLDivElement>(),\n  groups: [],\n  colorScale: scaleOrdinal(),\n  setLeftAxisRef: () => {},\n};\nexport const ChartContext = createContext(defaultContext);\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAyC;AAEzC,gBAAqD;AAErD,mCAA6B;AAuF7B,MAAM,iBAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,YAAQ,qBAAU;AAAA,EAClB,YAAQ,uBAAY;AAAA,EACpB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,cAAc;AAAA,EACd,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,kBAAc,wBAA0B;AAAA,EACxC,QAAQ,CAAC;AAAA,EACT,gBAAY,wBAAa;AAAA,EACzB,gBAAgB,MAAM;AAAA,EAAC;AACzB;AACO,MAAM,mBAAe,4BAAc,cAAc;",
   "names": []
 }

package/dist/cjs/graphs/Chart/SingleStackedBar/SingleStackedBar.js

@@ -0,0 +1,163 @@
+"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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SingleStackedBar_exports = {};
+__export(SingleStackedBar_exports, {
+  DSSingleStackedBar: () => DSSingleStackedBar,
+  DSSingleStackedBarWithSchema: () => DSSingleStackedBarWithSchema
+});
+module.exports = __toCommonJS(SingleStackedBar_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_lodash = require("lodash");
+var import_ds_popperjs = require("@elliemae/ds-popperjs");
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import__ = require("../../../index.js");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_styles = require("./styles.js");
+var import_exported_related = require("./exported-related/index.js");
+const Bar = import_react.default.memo((props) => {
+  const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
+  const [isHover, setIsHover] = (0, import_react.useState)(false);
+  const { height, TooltipRenderer, datum, tabIndex, isFocused, borderRadius, bg } = props;
+  const handleRefCallback = (0, import_react.useCallback)(
+    (_ref) => {
+      if (isFocused) {
+        _ref?.focus();
+      }
+    },
+    [isFocused]
+  );
+  const handleMouseEnter = (0, import_react.useCallback)(() => {
+    setIsHover(true);
+  }, []);
+  const handleMouseLeave = (0, import_react.useCallback)(() => {
+    setIsHover(false);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    (isFocused || isHover) && TooltipRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_popperjs.DSPopperJS, { referenceElement, showPopover: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMouseOverDetectionBox, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTooltipContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, { datum }) })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_styles.StyledBar,
+      {
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        bg,
+        height,
+        borderRadius,
+        ref: (0, import_ds_utilities.mergeRefs)(handleRefCallback, setReferenceElement),
+        tabIndex,
+        role: "img",
+        "aria-label": `${datum.name} value: ${datum.data}`
+      }
+    )
+  ] });
+});
+const DSSingleStackedBar = (props) => {
+  const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.DSSingleStackedBarPropTypes, "DSSingleStackedBar");
+  const globalAttributes = (0, import_lodash.omit)((0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefaults), ["data", "cols", "rows", "wrap"]);
+  const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefaults);
+  const { data, LegendRenderer, gutter, height } = propsWithDefaults;
+  const [keyBarFocused, setKeyBarFocused] = (0, import_react.useState)(0);
+  const [isChartFocused, setIsChartFocused] = (0, import_react.useState)(false);
+  const total = (0, import_react.useMemo)(() => data.map((datum) => datum.data).reduce((acc, curr) => acc + curr, 0), [data]);
+  const cols = (0, import_react.useMemo)(() => data.map((datum) => `${Math.ceil(datum.data * 100) / total}%`), [data, total]);
+  const rows = (0, import_react.useMemo)(
+    () => LegendRenderer !== void 0 ? [`${height}px`, "auto"] : [`${height}px`],
+    [LegendRenderer, height]
+  );
+  const barNames = (0, import_react.useMemo)(() => data.map((datum) => datum.name), [data]);
+  const getBorderRadius = (0, import_react.useCallback)(
+    (index) => {
+      if (index === 0)
+        return "50px 0 0 50px";
+      if (index === data.length - 1)
+        return "0 50px 50px 0";
+      return void 0;
+    },
+    [data.length]
+  );
+  const handleOnKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (e.code === "ArrowRight") {
+        if (barNames[keyBarFocused + 1]) {
+          setKeyBarFocused(keyBarFocused + 1);
+        } else {
+          setKeyBarFocused(0);
+        }
+      }
+      if (e.code === "ArrowLeft") {
+        if (barNames[keyBarFocused - 1]) {
+          setKeyBarFocused(keyBarFocused - 1);
+        } else {
+          setKeyBarFocused(barNames.length - 1);
+        }
+      }
+    },
+    [keyBarFocused, barNames]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styles.Wrapper,
+    {
+      cols,
+      gutter,
+      role: "region",
+      onKeyDown: handleOnKeyDown,
+      tabIndex: -1,
+      onFocus: () => setIsChartFocused(true),
+      onBlur: (e) => e.currentTarget !== e.target && setIsChartFocused(false),
+      ...xstyledProps,
+      ...globalAttributes,
+      children: data.map((datum, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { rows, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Bar,
+          {
+            datum,
+            isFocused: barNames[keyBarFocused] === datum.name && isChartFocused,
+            borderRadius: getBorderRadius(i),
+            bg: import__.COLOR_PALLET[datum.color] || datum.color,
+            tabIndex: i === keyBarFocused ? 0 : -1,
+            ...props
+          },
+          datum.name
+        ),
+        LegendRenderer !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LegendRenderer, { datum }, `${datum.name}-legend`) : null
+      ] }))
+    }
+  );
+};
+DSSingleStackedBar.displayName = import_exported_related.DSSingleStackedBarName;
+const DSSingleStackedBarWithSchema = (0, import_ds_props_helpers.describe)(DSSingleStackedBar);
+DSSingleStackedBarWithSchema.propTypes = import_react_desc_prop_types.DSSingleStackedBarPropTypes;
+//# sourceMappingURL=SingleStackedBar.js.map

package/dist/cjs/graphs/Chart/SingleStackedBar/SingleStackedBar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/graphs/Chart/SingleStackedBar/SingleStackedBar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useCallback, useMemo, useState, type WeakValidationMap } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  describe,\n} from '@elliemae/ds-props-helpers';\nimport { omit } from 'lodash';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { COLOR_PALLET } from '../../../index.js';\nimport { type DSSingleStackedBarT, defaultProps, DSSingleStackedBarPropTypes } from './react-desc-prop-types.js';\nimport { StyledBar, StyledMouseOverDetectionBox, StyledTooltipContainer, Wrapper } from './styles.js';\nimport { DSSingleStackedBarName } from './exported-related/index.js';\nconst Bar = React.memo((props: DSSingleStackedBarT.BarT) => {\n  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);\n  const [isHover, setIsHover] = useState(false);\n  const { height, TooltipRenderer, datum, tabIndex, isFocused, borderRadius, bg } = props;\n  const handleRefCallback = useCallback(\n    (_ref: HTMLDivElement | null) => {\n      if (isFocused) {\n        _ref?.focus();\n      }\n    },\n    [isFocused],\n  );\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHover(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHover(false);\n  }, []);\n  return (\n    <div>\n      {(isFocused || isHover) && TooltipRenderer ? (\n        <DSPopperJS referenceElement={referenceElement} showPopover>\n          <StyledMouseOverDetectionBox />\n          <StyledTooltipContainer>\n            <TooltipRenderer datum={datum} />\n          </StyledTooltipContainer>\n        </DSPopperJS>\n      ) : null}\n      <StyledBar\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        bg={bg}\n        height={height}\n        borderRadius={borderRadius}\n        ref={mergeRefs(handleRefCallback, setReferenceElement)}\n        tabIndex={tabIndex}\n        role=\"img\"\n        // until uziel work is merged we keep this default value\n        aria-label={`${datum.name} value: ${datum.data}`}\n      />\n    </div>\n  );\n});\n\nconst DSSingleStackedBar: React.ComponentType<DSSingleStackedBarT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSSingleStackedBarT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSSingleStackedBarPropTypes, 'DSSingleStackedBar');\n\n  const globalAttributes = omit(useGetGlobalAttributes(propsWithDefaults), ['data', 'cols', 'rows', 'wrap']);\n\n  const xstyledProps = useGetXstyledProps(propsWithDefaults);\n\n  const { data, LegendRenderer, gutter, height } = propsWithDefaults;\n  const [keyBarFocused, setKeyBarFocused] = useState<number>(0);\n  const [isChartFocused, setIsChartFocused] = useState(false);\n\n  const total = useMemo(() => data.map((datum) => datum.data).reduce((acc, curr) => acc + curr, 0), [data]);\n  const cols = useMemo(() => data.map((datum) => `${Math.ceil(datum.data * 100) / total}%`), [data, total]);\n  const rows = useMemo(\n    () => (LegendRenderer !== undefined ? [`${height}px`, 'auto'] : [`${height}px`]),\n    [LegendRenderer, height],\n  );\n  const barNames = useMemo(() => data.map((datum) => datum.name), [data]);\n  const getBorderRadius = useCallback(\n    (index: number) => {\n      if (index === 0) return '50px 0 0 50px';\n      if (index === data.length - 1) return '0 50px 50px 0';\n      return undefined;\n    },\n    [data.length],\n  );\n\n  const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      if (e.code === 'ArrowRight') {\n        if (barNames[keyBarFocused + 1]) {\n          setKeyBarFocused(keyBarFocused + 1);\n        } else {\n          setKeyBarFocused(0);\n        }\n      }\n      if (e.code === 'ArrowLeft') {\n        if (barNames[keyBarFocused - 1]) {\n          setKeyBarFocused(keyBarFocused - 1);\n        } else {\n          setKeyBarFocused(barNames.length - 1);\n        }\n      }\n    },\n    [keyBarFocused, barNames],\n  );\n\n  return (\n    <Wrapper\n      cols={cols}\n      gutter={gutter}\n      role=\"region\"\n      onKeyDown={handleOnKeyDown}\n      tabIndex={-1}\n      onFocus={() => setIsChartFocused(true)}\n      onBlur={(e) => e.currentTarget !== e.target && setIsChartFocused(false)}\n      {...xstyledProps}\n      {...globalAttributes}\n    >\n      {data.map((datum, i) => (\n        <Grid rows={rows}>\n          <Bar\n            key={datum.name}\n            datum={datum}\n            isFocused={barNames[keyBarFocused] === datum.name && isChartFocused}\n            borderRadius={getBorderRadius(i)}\n            bg={COLOR_PALLET[datum.color] || datum.color}\n            tabIndex={i === keyBarFocused ? 0 : -1}\n            {...props}\n          />\n          {LegendRenderer !== undefined ? <LegendRenderer key={`${datum.name}-legend`} datum={datum} /> : null}\n        </Grid>\n      ))}\n    </Wrapper>\n  );\n};\n\nDSSingleStackedBar.displayName = DSSingleStackedBarName;\nconst DSSingleStackedBarWithSchema = describe(DSSingleStackedBar);\nDSSingleStackedBarWithSchema.propTypes =\n  DSSingleStackedBarPropTypes as unknown as WeakValidationMap<DSSingleStackedBarT.Props>;\n\nexport { DSSingleStackedBarWithSchema, DSSingleStackedBar };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/cjs/graphs/Chart/SingleStackedBar/exported-related/data-test-ids.js

@@ -0,0 +1,38 @@
+"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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var data_test_ids_exports = {};
+__export(data_test_ids_exports, {
+  DSSingeStackedDataTestIds: () => DSSingeStackedDataTestIds
+});
+module.exports = __toCommonJS(data_test_ids_exports);
+var React = __toESM(require("react"));
+const DSSingeStackedDataTestIds = {
+  WRAPPER: "ds-single-stacked-bar-wrapper"
+};
+//# sourceMappingURL=data-test-ids.js.map

package/dist/cjs/graphs/Chart/SingleStackedBar/exported-related/data-test-ids.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/graphs/Chart/SingleStackedBar/exported-related/data-test-ids.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const DSSingeStackedDataTestIds = {\n  WRAPPER: 'ds-single-stacked-bar-wrapper',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,4BAA4B;AAAA,EACvC,SAAS;AACX;",
+  "names": []
+}

package/dist/cjs/graphs/Chart/SingleStackedBar/exported-related/index.js

@@ -0,0 +1,31 @@
+"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 __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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var exported_related_exports = {};
+module.exports = __toCommonJS(exported_related_exports);
+var React = __toESM(require("react"));
+__reExport(exported_related_exports, require("./data-test-ids.js"), module.exports);
+__reExport(exported_related_exports, require("./theming.js"), module.exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/graphs/Chart/SingleStackedBar/exported-related/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/graphs/Chart/SingleStackedBar/exported-related/index.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './data-test-ids.js';\nexport * from './theming.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAAc,+BAAd;AACA,qCAAc,yBADd;",
+  "names": []
+}

package/dist/cjs/graphs/Chart/SingleStackedBar/exported-related/theming.js

@@ -0,0 +1,40 @@
+"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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var theming_exports = {};
+__export(theming_exports, {
+  DSSingleStackedBarName: () => DSSingleStackedBarName,
+  DSSingleStackedBarSlots: () => DSSingleStackedBarSlots
+});
+module.exports = __toCommonJS(theming_exports);
+var React = __toESM(require("react"));
+const DSSingleStackedBarName = "DSSingleStackedBar";
+const DSSingleStackedBarSlots = {
+  WRAPPER: "root"
+};
+//# sourceMappingURL=theming.js.map

package/dist/cjs/graphs/Chart/SingleStackedBar/exported-related/theming.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/graphs/Chart/SingleStackedBar/exported-related/theming.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const DSSingleStackedBarName = 'DSSingleStackedBar';\n\nexport const DSSingleStackedBarSlots = {\n  WRAPPER: 'root',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,yBAAyB;AAE/B,MAAM,0BAA0B;AAAA,EACrC,SAAS;AACX;",
+  "names": []
+}

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

@@ -0,0 +1,31 @@
+"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 __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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SingleStackedBar_exports = {};
+module.exports = __toCommonJS(SingleStackedBar_exports);
+var React = __toESM(require("react"));
+__reExport(SingleStackedBar_exports, require("../SingleStackedBar/SingleStackedBar.js"), module.exports);
+__reExport(SingleStackedBar_exports, require("../SingleStackedBar/exported-related/index.js"), module.exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/graphs/Chart/SingleStackedBar/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from '../SingleStackedBar/SingleStackedBar.js';\nexport * from '../SingleStackedBar/exported-related/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAAc,oDAAd;AACA,qCAAc,0DADd;",
+  "names": []
+}

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

@@ -0,0 +1,51 @@
+"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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  DSSingleStackedBarPropTypes: () => DSSingleStackedBarPropTypes,
+  defaultProps: () => defaultProps
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+const defaultProps = {
+  gutter: "xxxs"
+};
+const DSSingleStackedBarPropTypes = {
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
+  height: import_ds_props_helpers.PropTypes.string.description("Height of the bar").isRequired,
+  gutter: import_ds_props_helpers.PropTypes.string.description("Gap between the bars").defaultValue("xxxs"),
+  TooltipRenderer: import_ds_props_helpers.PropTypes.func.description("Callback function that returns a custom renderer for the tooltip"),
+  LegendRenderer: import_ds_props_helpers.PropTypes.func.description("Callback function that returns a custom renderer for the legend"),
+  data: import_ds_props_helpers.PropTypes.arrayOf(
+    import_ds_props_helpers.PropTypes.shape({ name: import_ds_props_helpers.PropTypes.string, data: import_ds_props_helpers.PropTypes.number, color: import_ds_props_helpers.PropTypes.string })
+  ).description("Array of the series which represent the chart")
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/graphs/Chart/SingleStackedBar/react-desc-prop-types.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-utilities';\nimport { type BackgroundProps, type BorderProps } from '@elliemae/ds-system';\nimport { type COLOR_PALLET } from '../../../index.js';\n\nexport declare namespace DSSingleStackedBarT {\n  export type DatumT = {\n    name: string;\n    data: number;\n    color: keyof typeof COLOR_PALLET;\n  };\n  export type SingleStackedBarDatumT = DatumT[];\n  export interface SingleStackedBarT {\n    data: SingleStackedBarDatumT;\n    TooltipRenderer?: (props: { datum: DatumT }) => JSX.Element;\n    LegendRenderer?: (props: { datum: DatumT }) => JSX.Element;\n    height: string | number;\n    gutter?: string | number;\n  }\n\n  export interface BarT extends SingleStackedBarT {\n    isFocused: boolean;\n    borderRadius?: BorderProps['borderRadius'];\n    bg: BackgroundProps['bg'];\n    tabIndex?: 0 | -1;\n    datum: DatumT;\n  }\n\n  export interface RequiredProps {\n    height: string | number;\n    data: DatumT[];\n  }\n\n  export interface DefaultProps {\n    gutter: string;\n  }\n\n  export interface OptionalProps {\n    TooltipRenderer?: (props: { datum: DatumT }) => JSX.Element;\n    LegendRenderer?: (props: { datum: DatumT }) => JSX.Element;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSSingleStackedBarT.DefaultProps = {\n  gutter: 'xxxs',\n};\n\nexport const DSSingleStackedBarPropTypes: DSPropTypesSchema<DSSingleStackedBarT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  height: PropTypes.string.description('Height of the bar').isRequired,\n  gutter: PropTypes.string.description('Gap between the bars').defaultValue('xxxs'),\n  TooltipRenderer: PropTypes.func.description('Callback function that returns a custom renderer for the tooltip'),\n  LegendRenderer: PropTypes.func.description('Callback function that returns a custom renderer for the legend'),\n  data: PropTypes.arrayOf(\n    PropTypes.shape({ name: PropTypes.string, data: PropTypes.number, color: PropTypes.string }),\n  ).description('Array of the series which represent the chart'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAuE;AAyDhE,MAAM,eAAiD;AAAA,EAC5D,QAAQ;AACV;AAEO,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,QAAQ,kCAAU,OAAO,YAAY,mBAAmB,EAAE;AAAA,EAC1D,QAAQ,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAChF,iBAAiB,kCAAU,KAAK,YAAY,kEAAkE;AAAA,EAC9G,gBAAgB,kCAAU,KAAK,YAAY,iEAAiE;AAAA,EAC5G,MAAM,kCAAU;AAAA,IACd,kCAAU,MAAM,EAAE,MAAM,kCAAU,QAAQ,MAAM,kCAAU,QAAQ,OAAO,kCAAU,OAAO,CAAC;AAAA,EAC7F,EAAE,YAAY,+CAA+C;AAC/D;",
+  "names": []
+}

package/dist/cjs/graphs/Chart/SingleStackedBar/styles.js

@@ -0,0 +1,64 @@
+"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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styles_exports = {};
+__export(styles_exports, {
+  StyledBar: () => StyledBar,
+  StyledMouseOverDetectionBox: () => StyledMouseOverDetectionBox,
+  StyledTooltipContainer: () => StyledTooltipContainer,
+  Wrapper: () => Wrapper
+});
+module.exports = __toCommonJS(styles_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_exported_related = require("./exported-related/index.js");
+const focusRing = import_ds_system.css`
+  outline: 2px solid brand-700;
+  outline-offset: 2px;
+`;
+const StyledBar = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  &:focus,
+  :focus-visible {
+    ${focusRing}
+  }
+`;
+const Wrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_exported_related.DSSingleStackedBarName, slot: import_exported_related.DSSingleStackedBarSlots.WRAPPER })``;
+const StyledTooltipContainer = import_ds_system.styled.div`
+  max-width: 350px;
+  background-color: white;
+`;
+const StyledMouseOverDetectionBox = import_ds_system.styled.div`
+  position: absolute;
+  top: -15px;
+  right: -15px;
+  width: calc(100% + 30px);
+  height: calc(100% + 30px);
+  z-index: -1;
+`;
+//# sourceMappingURL=styles.js.map

package/dist/cjs/graphs/Chart/SingleStackedBar/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/graphs/Chart/SingleStackedBar/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSSingleStackedBarSlots, DSSingleStackedBarName } from './exported-related/index.js';\nconst focusRing = css`\n  outline: 2px solid brand-700;\n  outline-offset: 2px;\n`;\nexport const StyledBar = styled(Grid)`\n  &:focus,\n  :focus-visible {\n    ${focusRing}\n  }\n`;\n\nexport const Wrapper = styled(Grid, { name: DSSingleStackedBarName, slot: DSSingleStackedBarSlots.WRAPPER })``;\n\nexport const StyledTooltipContainer = styled.div`\n  max-width: 350px;\n  background-color: white;\n`;\n\nexport const StyledMouseOverDetectionBox = styled.div`\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  width: calc(100% + 30px);\n  height: calc(100% + 30px);\n  z-index: -1;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,qBAAqB;AACrB,8BAAgE;AAChE,MAAM,YAAY;AAAA;AAAA;AAAA;AAIX,MAAM,gBAAY,yBAAO,mBAAI;AAAA;AAAA;AAAA,MAG9B;AAAA;AAAA;AAIC,MAAM,cAAU,yBAAO,qBAAM,EAAE,MAAM,gDAAwB,MAAM,gDAAwB,QAAQ,CAAC;AAEpG,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAAA;AAKtC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/graphs/Chart/config/useChart.js

@@ -65,6 +65,7 @@ const useResizeObserver = (ref) => {
 const useChart = (props) => {
   (0, import_useValidateProps.useValidateProps)(props, import_react_desc_prop_types.propTypes);
   const { series, yAxis, xAxis, width: userWidth, height: userHeight, groups: groupsStacked } = props;
+  const userRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;
   const originalSeries = (0, import_react.useMemo)(() => {
     if (series.length === 0) {
       return import_react_desc_prop_types.defaultProps.series;
@@ -87,10 +88,8 @@ const useChart = (props) => {
   const [scrapperPosX, setScrapperPosX] = (0, import_react.useState)("");
   const [xScrollbarPosition, setXScrollbarPosition] = (0, import_react.useState)(0);
   const [isScrollbarVisible, setIsScrollbarVisible] = (0, import_react.useState)(false);
-  const [containerRatio, setContainerRatio] = (0, import_react.useState)(
-    props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1
-  );
-  const lastPosition = (0, import_react.useRef)(0);
+  const [containerRatio, setContainerRatio] = (0, import_react.useState)(userRatio);
+  const lastScrollbarPosition = (0, import_react.useRef)(0);
   const [axisLeftRef, setAxisLeftRef] = (0, import_react.useState)(null);
   const [axisBottomRef, setAxisBottomRef] = (0, import_react.useState)(null);
   const [axisRightRef, setAxisRightRef] = (0, import_react.useState)(null);
@@ -102,6 +101,13 @@ const useChart = (props) => {
   const [leftLabel, setLeftLabel] = (0, import_react.useState)(null);
   const [bottomLabel, setBottomLabel] = (0, import_react.useState)(null);
   const [toolbarRef, setToolbarRef] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    lastScrollbarPosition.current = 0;
+    setXScrollbarPosition(0);
+  }, [dimensionWidth]);
+  (0, import_react.useEffect)(() => {
+    setContainerRatio(userRatio);
+  }, [userRatio]);
   const {
     toolbarHeight,
     axisBottomHeight,
@@ -230,7 +236,7 @@ const useChart = (props) => {
       setStartPosition,
       isScrollbarVisible,
       setIsScrollbarVisible,
-      lastPosition,
+      lastScrollbarPosition,
       containerRatio,
       internalMargin,
       axisLeftRef,