@coinbase/cds-web-visualization 3.3.0 → 3.4.0-beta.1

package/esm/chart/axis/YAxis.js

@@ -0,0 +1,183 @@
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "style", "className", "styles", "classNames", "GridLineComponent", "tickMarkLabelGap", "width", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useCallback, useEffect, useId, useMemo } from 'react';
+import { cx } from '@coinbase/cds-web';
+import { AnimatePresence, m as motion } from 'framer-motion';
+import { useCartesianChartContext } from '../ChartProvider';
+import { DottedLine } from '../line/DottedLine';
+import { ReferenceLine } from '../line/ReferenceLine';
+import { SmartChartTextGroup } from '../text/SmartChartTextGroup';
+import { getAxisTicksData, isCategoricalScale } from '../utils';
+import { axisLineStyles, axisTickLabelsInitialAnimationVariants, axisTickMarkStyles, axisUpdateAnimationVariants } from './Axis';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const axisTickMarkCss = "cds-axisTickMarkCss-au2toz5";
+const axisLineCss = "cds-axisLineCss-akmofp5";
+export const YAxis = /*#__PURE__*/memo(_ref => {
+  let {
+      axisId,
+      position = 'right',
+      showGrid,
+      requestedTickCount,
+      ticks,
+      tickLabelFormatter,
+      style,
+      className,
+      styles,
+      classNames,
+      GridLineComponent = DottedLine,
+      tickMarkLabelGap = 8,
+      width = 44,
+      minTickLabelGap = 0,
+      showTickMarks,
+      showLine,
+      tickMarkSize = 4,
+      tickInterval
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const registrationId = useId();
+  const {
+    animate,
+    getYScale,
+    getYAxis,
+    registerAxis,
+    unregisterAxis,
+    getAxisBounds
+  } = useCartesianChartContext();
+  const yScale = getYScale(axisId);
+  const yAxis = getYAxis(axisId);
+  const axisBounds = getAxisBounds(registrationId);
+  useEffect(() => {
+    registerAxis(registrationId, position, width);
+    return () => unregisterAxis(registrationId);
+  }, [registrationId, registerAxis, unregisterAxis, position, width]);
+  const formatTick = useCallback(value => {
+    var _tickLabelFormatter;
+    // If we have string labels and no custom formatter, use the labels
+    const axisData = yAxis === null || yAxis === void 0 ? void 0 : yAxis.data;
+    const hasStringLabels = axisData && Array.isArray(axisData) && typeof axisData[0] === 'string';
+    if (hasStringLabels && !tickLabelFormatter && axisData[value] !== undefined) {
+      // Use the string label from the data array
+      return axisData[value];
+    }
+
+    // Otherwise use the formatter (if provided) or the value itself
+    return (_tickLabelFormatter = tickLabelFormatter === null || tickLabelFormatter === void 0 ? void 0 : tickLabelFormatter(value)) !== null && _tickLabelFormatter !== void 0 ? _tickLabelFormatter : value;
+  }, [yAxis === null || yAxis === void 0 ? void 0 : yAxis.data, tickLabelFormatter]);
+
+  // Use D3 to get the ticks data
+  // Result contains each tick value and its axis position
+  const ticksData = useMemo(() => {
+    if (!yScale) return [];
+
+    // Check if we have string labels
+    const axisData = yAxis === null || yAxis === void 0 ? void 0 : yAxis.data;
+    const hasStringLabels = axisData && Array.isArray(axisData) && typeof axisData[0] === 'string';
+
+    // For band scales, we need categories
+    let categories;
+    if (hasStringLabels) {
+      categories = axisData;
+    } else if (isCategoricalScale(yScale)) {
+      // For band scales without explicit string data, generate numeric categories
+      // based on the domain of the scale
+      const domain = yScale.domain();
+      categories = domain.map(String);
+    }
+
+    // For numeric data or no explicit data, use default tick generation
+    return getAxisTicksData({
+      scaleFunction: yScale,
+      ticks,
+      requestedTickCount: tickInterval !== undefined ? undefined : requestedTickCount !== null && requestedTickCount !== void 0 ? requestedTickCount : 5,
+      categories,
+      tickInterval: tickInterval
+    });
+  }, [ticks, yScale, requestedTickCount, tickInterval, yAxis === null || yAxis === void 0 ? void 0 : yAxis.data]);
+  const chartTextData = useMemo(() => {
+    if (!axisBounds) return null;
+    return ticksData.map(tick => {
+      const tickOffset = tickMarkLabelGap + (showTickMarks ? tickMarkSize : 0);
+      const labelX = position === 'left' ? axisBounds.x + axisBounds.width - tickOffset : axisBounds.x + tickOffset;
+      return {
+        x: labelX,
+        y: tick.position,
+        label: formatTick(tick.tick),
+        chartTextProps: {
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.tickLabel,
+          color: 'var(--color-fgMuted)',
+          verticalAlignment: 'middle',
+          style: styles === null || styles === void 0 ? void 0 : styles.tickLabel,
+          horizontalAlignment: position === 'left' ? 'right' : 'left'
+        }
+      };
+    });
+  }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, classNames === null || classNames === void 0 ? void 0 : classNames.tickLabel, styles === null || styles === void 0 ? void 0 : styles.tickLabel]);
+  if (!yScale) return;
+  return /*#__PURE__*/_jsxs("g", _objectSpread(_objectSpread({
+    className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    "data-axis": "y",
+    "data-position": position,
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
+  }, props), {}, {
+    children: [showGrid && /*#__PURE__*/_jsx(AnimatePresence, {
+      initial: false,
+      children: ticksData.map((tick, index) => {
+        const horizontalLine = /*#__PURE__*/_jsx(ReferenceLine, {
+          LineComponent: GridLineComponent,
+          dataY: tick.tick,
+          yAxisId: axisId
+        });
+        return animate ? /*#__PURE__*/_jsx(motion.g, {
+          animate: "animate",
+          exit: "exit",
+          initial: "initial",
+          variants: axisUpdateAnimationVariants,
+          children: horizontalLine
+        }, "grid-".concat(tick.tick, "-").concat(index)) : /*#__PURE__*/_jsx("g", {
+          children: horizontalLine
+        }, "grid-".concat(tick.tick, "-").concat(index));
+      })
+    }), chartTextData && /*#__PURE__*/_jsx(AnimatePresence, {
+      children: /*#__PURE__*/_jsx(motion.g, {
+        animate: "animate",
+        exit: "exit",
+        initial: "initial",
+        variants: animate ? axisTickLabelsInitialAnimationVariants : undefined,
+        children: /*#__PURE__*/_jsx(SmartChartTextGroup, {
+          prioritizeEndLabels: true,
+          labels: chartTextData,
+          minGap: minTickLabelGap
+        })
+      })
+    }), axisBounds && showTickMarks && /*#__PURE__*/_jsx("g", {
+      "data-testid": "tick-marks",
+      children: ticksData.map((tick, index) => {
+        const tickX = position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x;
+        const tickMarkSizePixels = tickMarkSize;
+        const tickX2 = position === 'left' ? axisBounds.x + axisBounds.width - tickMarkSizePixels : axisBounds.x + tickMarkSizePixels;
+        return /*#__PURE__*/_jsx("line", {
+          className: cx(axisTickMarkCss, classNames === null || classNames === void 0 ? void 0 : classNames.tickMark),
+          style: styles === null || styles === void 0 ? void 0 : styles.tickMark,
+          x1: tickX,
+          x2: tickX2,
+          y1: tick.position,
+          y2: tick.position
+        }, "tick-mark-".concat(tick.tick, "-").concat(index));
+      })
+    }), axisBounds && showLine && /*#__PURE__*/_jsx("line", {
+      className: cx(axisLineCss, classNames === null || classNames === void 0 ? void 0 : classNames.line),
+      style: styles === null || styles === void 0 ? void 0 : styles.line,
+      x1: position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x,
+      x2: position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x,
+      y1: axisBounds.y,
+      y2: axisBounds.y + axisBounds.height
+    })]
+  }));
+});
+import "./YAxis.css";

package/esm/chart/axis/index.js

@@ -0,0 +1,5 @@
+// codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
+export * from './Axis';
+export * from './XAxis';
+export * from './YAxis';
+// codegen:end

package/esm/chart/bar/Bar.js

@@ -0,0 +1,59 @@
+import React, { memo, useMemo } from 'react';
+import { getBarPath } from '../utils';
+import { DefaultBar } from './';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Simple bar component that renders a single bar at the specified position.
+ *
+ * This component is intentionally kept simple - it just renders a bar at the given
+ * x, y, width, height coordinates. Complex positioning logic (like handling stacks,
+ * groups, gaps, etc.) should be handled by parent components like BarChart or BarStack.
+ *
+ * @example
+ * ```tsx
+ * <Bar x={10} y={20} width={50} height={100} fill="blue" />
+ * ```
+ */
+export const Bar = /*#__PURE__*/memo(_ref => {
+  let {
+    x,
+    y,
+    width,
+    height,
+    originY,
+    dataX,
+    dataY,
+    BarComponent = DefaultBar,
+    fill = 'var(--color-fgPrimary)',
+    fillOpacity = 1,
+    stroke,
+    strokeWidth,
+    borderRadius = 4,
+    roundTop = true,
+    roundBottom = true
+  } = _ref;
+  const barPath = useMemo(() => {
+    return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom);
+  }, [x, y, width, height, borderRadius, roundTop, roundBottom]);
+  const effectiveOriginY = originY !== null && originY !== void 0 ? originY : y + height;
+  if (!barPath) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(BarComponent, {
+    borderRadius: borderRadius,
+    d: barPath,
+    dataX: dataX,
+    dataY: dataY,
+    fill: fill,
+    fillOpacity: fillOpacity,
+    height: height,
+    originY: effectiveOriginY,
+    roundBottom: roundBottom,
+    roundTop: roundTop,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    width: width,
+    x: x,
+    y: y
+  });
+});

package/esm/chart/bar/BarChart.js

@@ -0,0 +1,147 @@
+const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize"],
+  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
+  _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { forwardRef, memo, useMemo } from 'react';
+import { XAxis, YAxis } from '../axis';
+import { CartesianChart } from '../CartesianChart';
+import { defaultChartInset, defaultStackId, getChartInset } from '../utils';
+import { BarPlot } from './BarPlot';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      series,
+      stacked,
+      showXAxis,
+      showYAxis,
+      xAxis,
+      yAxis,
+      inset: userInset,
+      children,
+      barPadding,
+      BarComponent,
+      fillOpacity,
+      stroke,
+      strokeWidth,
+      borderRadius,
+      roundBaseline,
+      BarStackComponent,
+      stackGap,
+      barMinSize,
+      stackMinSize
+    } = _ref,
+    chartProps = _objectWithoutProperties(_ref, _excluded);
+  const calculatedInset = useMemo(() => getChartInset(userInset, defaultChartInset), [userInset]);
+
+  // Convert BarSeries to Series for Chart context
+  const chartSeries = useMemo(() => {
+    return series === null || series === void 0 ? void 0 : series.map(s => ({
+      id: s.id,
+      data: s.data,
+      label: s.label,
+      color: s.color,
+      yAxisId: s.yAxisId,
+      stackId: s.stackId
+    }));
+  }, [series]);
+  const transformedSeries = useMemo(() => {
+    if (!stacked || !chartSeries) return chartSeries;
+    return chartSeries.map(s => {
+      var _s$stackId;
+      return _objectSpread(_objectSpread({}, s), {}, {
+        stackId: (_s$stackId = s.stackId) !== null && _s$stackId !== void 0 ? _s$stackId : defaultStackId
+      });
+    });
+  }, [chartSeries, stacked]);
+  const seriesToRender = transformedSeries !== null && transformedSeries !== void 0 ? transformedSeries : chartSeries;
+
+  // Keep the original series with bar-specific props for BarPlot
+  const barSeriesToRender = useMemo(() => {
+    if (!stacked || !series) return series;
+    return series.map(s => {
+      var _s$stackId2;
+      return _objectSpread(_objectSpread({}, s), {}, {
+        stackId: (_s$stackId2 = s.stackId) !== null && _s$stackId2 !== void 0 ? _s$stackId2 : defaultStackId
+      });
+    });
+  }, [series, stacked]);
+
+  // Split axis props into config props for Chart and visual props for axis components
+  const _ref2 = xAxis || {},
+    {
+      scaleType: xScaleType,
+      data: xData,
+      categoryPadding: xCategoryPadding,
+      domain: xDomain,
+      domainLimit: xDomainLimit,
+      range: xRange
+    } = _ref2,
+    xAxisVisualProps = _objectWithoutProperties(_ref2, _excluded2);
+  const _ref3 = yAxis || {},
+    {
+      scaleType: yScaleType,
+      data: yData,
+      categoryPadding: yCategoryPadding,
+      domain: yDomain,
+      domainLimit: yDomainLimit,
+      range: yRange,
+      id: yAxisId
+    } = _ref3,
+    yAxisVisualProps = _objectWithoutProperties(_ref3, _excluded3);
+  const xAxisConfig = {
+    scaleType: xScaleType !== null && xScaleType !== void 0 ? xScaleType : 'band',
+    data: xData,
+    categoryPadding: xCategoryPadding,
+    domain: xDomain,
+    domainLimit: xDomainLimit,
+    range: xRange
+  };
+  const hasNegativeValues = useMemo(() => {
+    if (!series) return false;
+    return series.some(s => {
+      var _s$data;
+      return (_s$data = s.data) === null || _s$data === void 0 ? void 0 : _s$data.some(value => typeof value === 'number' && value < 0 || Array.isArray(value) && value.some(v => typeof v === 'number' && v < 0));
+    });
+  }, [series]);
+
+  // Set default min domain to 0 for area chart, but only if there are no negative values
+  const yAxisConfig = {
+    scaleType: yScaleType,
+    data: yData,
+    categoryPadding: yCategoryPadding,
+    domain: hasNegativeValues ? yDomain : _objectSpread({
+      min: 0
+    }, yDomain),
+    domainLimit: yDomainLimit,
+    range: yRange
+  };
+  return /*#__PURE__*/_jsxs(CartesianChart, _objectSpread(_objectSpread({}, chartProps), {}, {
+    ref: ref,
+    inset: calculatedInset,
+    series: seriesToRender,
+    xAxis: xAxisConfig,
+    yAxis: yAxisConfig,
+    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _objectSpread({}, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _objectSpread({
+      axisId: yAxisId
+    }, yAxisVisualProps)), /*#__PURE__*/_jsx(BarPlot, {
+      BarComponent: BarComponent,
+      BarStackComponent: BarStackComponent,
+      barMinSize: barMinSize,
+      barPadding: barPadding,
+      borderRadius: borderRadius,
+      fillOpacity: fillOpacity,
+      roundBaseline: roundBaseline,
+      seriesIds: barSeriesToRender === null || barSeriesToRender === void 0 ? void 0 : barSeriesToRender.map(s => s.id),
+      stackGap: stackGap,
+      stackMinSize: stackMinSize,
+      stroke: stroke,
+      strokeWidth: strokeWidth
+    }), children]
+  }));
+}));

package/esm/chart/bar/BarPlot.js

@@ -0,0 +1,96 @@
+import { memo, useId, useMemo } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { defaultAxisId } from '../utils';
+import { BarStackGroup } from './BarStackGroup';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BarPlot component that handles multiple series with proper stacking coordination.
+ * Groups series by stack ID + y-axis ID combination and renders BarStackGroup for each group.
+ * This allows series with different y-axes to be rendered side by side while preventing
+ * cross-axis stacking (e.g., comparing $1M vs $1B companies on different scales).
+ */
+export const BarPlot = /*#__PURE__*/memo(_ref => {
+  let {
+    seriesIds,
+    barPadding = 0.1,
+    BarComponent: defaultBarComponent,
+    fillOpacity: defaultFillOpacity,
+    stroke: defaultStroke,
+    strokeWidth: defaultStrokeWidth,
+    borderRadius: defaultBorderRadius,
+    roundBaseline,
+    BarStackComponent,
+    stackGap,
+    barMinSize,
+    stackMinSize
+  } = _ref;
+  const {
+    series: allSeries,
+    drawingArea
+  } = useCartesianChartContext();
+  const clipPathId = useId();
+  const targetSeries = useMemo(() => {
+    // Then filter by seriesIds if provided
+    if (seriesIds !== undefined) {
+      return allSeries.filter(s => seriesIds.includes(s.id));
+    }
+    return allSeries;
+  }, [allSeries, seriesIds]);
+  const stackGroups = useMemo(() => {
+    const groups = new Map();
+
+    // Group series into stacks based on stackId + yAxisId combination
+    targetSeries.forEach(series => {
+      var _series$yAxisId;
+      const yAxisId = (_series$yAxisId = series.yAxisId) !== null && _series$yAxisId !== void 0 ? _series$yAxisId : defaultAxisId;
+      const stackId = series.stackId || "individual-".concat(series.id);
+      const stackKey = "".concat(stackId, ":").concat(yAxisId);
+      if (!groups.has(stackKey)) {
+        groups.set(stackKey, {
+          stackId: stackKey,
+          series: [],
+          yAxisId: series.yAxisId
+        });
+      }
+      const group = groups.get(stackKey);
+      group.series.push(series);
+    });
+    return Array.from(groups.values());
+  }, [targetSeries]);
+  if (!drawingArea) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsx("clipPath", {
+        id: clipPathId,
+        children: /*#__PURE__*/_jsx("rect", {
+          height: drawingArea.height,
+          width: drawingArea.width,
+          x: drawingArea.x,
+          y: drawingArea.y
+        })
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      clipPath: "url(#".concat(clipPathId, ")"),
+      "data-testid": "whoa",
+      children: stackGroups.map((group, stackIndex) => /*#__PURE__*/_jsx(BarStackGroup, {
+        BarComponent: defaultBarComponent,
+        BarStackComponent: BarStackComponent,
+        barMinSize: barMinSize,
+        barPadding: barPadding,
+        borderRadius: defaultBorderRadius,
+        fillOpacity: defaultFillOpacity,
+        roundBaseline: roundBaseline,
+        series: group.series,
+        stackGap: stackGap,
+        stackIndex: stackIndex,
+        stackMinSize: stackMinSize,
+        stroke: defaultStroke,
+        strokeWidth: defaultStrokeWidth,
+        totalStacks: stackGroups.length,
+        yAxisId: group.yAxisId
+      }, group.stackId))
+    })]
+  });
+});