@coinbase/cds-mobile-visualization 3.3.0 → 3.4.0-beta.10

package/esm/chart/axis/YAxis.js

@@ -0,0 +1,177 @@
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width"];
+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 { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Group, vec } from '@shopify/react-native-skia';
+import { useCartesianChartContext } from '../ChartProvider';
+import { DottedLine } from '../line/DottedLine';
+import { ReferenceLine } from '../line/ReferenceLine';
+import { SolidLine } from '../line/SolidLine';
+import { ChartText } from '../text/ChartText';
+import { ChartTextGroup } from '../text/ChartTextGroup';
+import { getAxisTicksData, isCategoricalScale, lineToPath } from '../utils';
+import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AXIS_WIDTH = 44;
+const LABEL_SIZE = 20;
+export const YAxis = /*#__PURE__*/memo(_ref => {
+  let {
+      axisId,
+      position = 'right',
+      showGrid,
+      requestedTickCount = 5,
+      ticks,
+      tickLabelFormatter,
+      TickLabelComponent = DefaultAxisTickLabel,
+      GridLineComponent = DottedLine,
+      LineComponent = SolidLine,
+      TickMarkLineComponent = SolidLine,
+      tickMarkLabelGap = 8,
+      minTickLabelGap = 0,
+      showTickMarks,
+      showLine,
+      tickMarkSize = 4,
+      tickInterval,
+      label,
+      labelGap = 4,
+      width = label ? AXIS_WIDTH + LABEL_SIZE : AXIS_WIDTH
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const registrationId = useId();
+  const {
+    animate,
+    getYScale,
+    getYAxis,
+    registerAxis,
+    unregisterAxis,
+    getAxisBounds
+  } = useCartesianChartContext();
+  const yScale = getYScale(axisId);
+  const yAxis = getYAxis(axisId);
+  const axisBounds = getAxisBounds(registrationId);
+
+  // Note: gridOpacity not currently used in Skia version
+  // const gridOpacity = useSharedValue(1);
+
+  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 ? 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 ? void 0 : tickLabelFormatter(value)) != null ? _tickLabelFormatter : value;
+  }, [yAxis == null ? 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 ? 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 : 5,
+      categories,
+      possibleTickValues: axisData && Array.isArray(axisData) && typeof axisData[0] === 'number' ? axisData : undefined,
+      tickInterval: tickInterval
+    });
+  }, [ticks, yScale, requestedTickCount, tickInterval, yAxis == null ? 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: String(formatTick(tick.tick)),
+        chartTextProps: {
+          color: theme.color.fgMuted,
+          verticalAlignment: 'middle',
+          horizontalAlignment: position === 'left' ? 'right' : 'left'
+        }
+      };
+    });
+  }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, theme.color.fgMuted]);
+  if (!yScale || !axisBounds) return;
+  const labelX = position === 'left' ? axisBounds.x + LABEL_SIZE / 2 : axisBounds.x + axisBounds.width - LABEL_SIZE / 2;
+  const labelY = axisBounds.y + axisBounds.height / 2;
+  return /*#__PURE__*/_jsxs(Group, {
+    children: [showGrid && /*#__PURE__*/_jsx(Group, {
+      children: ticksData.map((tick, index) => {
+        const horizontalLine = /*#__PURE__*/_jsx(ReferenceLine, {
+          LineComponent: GridLineComponent,
+          dataY: tick.tick,
+          yAxisId: axisId
+        });
+        return /*#__PURE__*/_jsx(Group, {
+          children: horizontalLine
+        }, "grid-" + tick.tick + "-" + index);
+      })
+    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
+      prioritizeEndLabels: true,
+      LabelComponent: TickLabelComponent,
+      labels: chartTextData,
+      minGap: minTickLabelGap
+    }), axisBounds && showTickMarks && /*#__PURE__*/_jsx(Group, {
+      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(TickMarkLineComponent, {
+          animate: false,
+          clipPath: null,
+          d: lineToPath(tickX, tick.position, tickX2, tick.position),
+          stroke: theme.color.fg,
+          strokeCap: "square",
+          strokeWidth: 1
+        }, "tick-mark-" + tick.tick + "-" + index);
+      })
+    }), showLine && /*#__PURE__*/_jsx(LineComponent, {
+      animate: false,
+      clipPath: null,
+      d: lineToPath(position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x, axisBounds.y, position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x, axisBounds.y + axisBounds.height),
+      stroke: theme.color.fg,
+      strokeCap: "square",
+      strokeWidth: 1
+    }), label && /*#__PURE__*/_jsx(Group, {
+      origin: vec(labelX, labelY),
+      transform: [{
+        rotate: position === 'left' ? -Math.PI / 2 : Math.PI / 2
+      }],
+      children: /*#__PURE__*/_jsx(ChartText, {
+        horizontalAlignment: "center",
+        verticalAlignment: "middle",
+        x: labelX,
+        y: labelY,
+        children: label
+      })
+    })]
+  });
+});

package/esm/chart/axis/__stories__/Axis.stories.js

@@ -0,0 +1,276 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { memo, useCallback, useMemo } from 'react';
+import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { CartesianChart } from '../../CartesianChart';
+import { LineChart, SolidLine } from '../../line';
+import { Line } from '../../line/Line';
+import { Scrubber } from '../../scrubber/Scrubber';
+import { XAxis, YAxis } from '..';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultChartHeight = 250;
+const ThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
+  strokeWidth: 1
+})));
+const Simple = () => {
+  const data = [{
+    name: 'Page A',
+    uv: 4000,
+    pv: 2400,
+    amt: 2400
+  }, {
+    name: 'Page B',
+    uv: 3000,
+    pv: 1398,
+    amt: 2210
+  }, {
+    name: 'Page C',
+    uv: 2000,
+    pv: 9800,
+    amt: 2290
+  }, {
+    name: 'Page D',
+    uv: 2780,
+    pv: 3908,
+    amt: 2000
+  }, {
+    name: 'Page E',
+    uv: 1890,
+    pv: 4800,
+    amt: 2181
+  }, {
+    name: 'Page F',
+    uv: 2390,
+    pv: 3800,
+    amt: 2500
+  }, {
+    name: 'Page G',
+    uv: 3490,
+    pv: 4300,
+    amt: 2100
+  }];
+  const pageViews = data.map(d => d.pv);
+  const pageNames = data.map(d => d.name);
+  const pageUniqueVisitors = data.map(d => d.uv);
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showXAxis: true,
+    showYAxis: true,
+    height: defaultChartHeight,
+    inset: 32,
+    series: [{
+      id: 'pageViews',
+      data: pageViews,
+      label: 'Page Views',
+      color: '#8884d8',
+      curve: 'monotone'
+    }, {
+      id: 'uniqueVisitors',
+      data: pageUniqueVisitors,
+      label: 'Unique Visitors',
+      color: '#82ca9d',
+      curve: 'monotone'
+    }],
+    xAxis: {
+      data: pageNames,
+      showLine: true,
+      showGrid: true,
+      showTickMarks: true,
+      GridLineComponent: ThinSolidLine,
+      position: 'bottom',
+      requestedTickCount: 5
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      },
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      GridLineComponent: ThinSolidLine,
+      position: 'left',
+      requestedTickCount: 5
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {})
+  });
+};
+const TimeOfDayAxesExample = () => {
+  const theme = useTheme();
+  const lineA = [5, 5, 10, 90, 85, 70, 30, 25, 25];
+  const lineB = [90, 85, 70, 25, 23, 40, 45, 40, 50];
+  const timeData = useMemo(() => [new Date(2023, 7, 31), new Date(2023, 7, 31, 12), new Date(2023, 8, 1), new Date(2023, 8, 1, 12), new Date(2023, 8, 2), new Date(2023, 8, 2, 12), new Date(2023, 8, 3), new Date(2023, 8, 3, 12), new Date(2023, 8, 4)].map(d => d.getTime()), []);
+  const dateFormatter = useCallback(index => {
+    return new Date(timeData[index]).toLocaleDateString('en-US', {
+      month: '2-digit',
+      day: '2-digit'
+    });
+  }, [timeData]);
+  const timeOfDayFormatter = useCallback(index => {
+    return new Date(timeData[index]).toLocaleTimeString('en-US', {
+      hour: '2-digit'
+    });
+  }, [timeData]);
+  const timeOfDayTicks = useMemo(() => {
+    return timeData.map((d, index) => index);
+  }, [timeData]);
+  const dateTicks = useMemo(() => {
+    return timeData.map((d, index) => index).filter(d => d % 2 === 0);
+  }, [timeData]);
+  return /*#__PURE__*/_jsxs(LineChart, {
+    enableScrubbing: true,
+    height: defaultChartHeight,
+    series: [{
+      id: 'lineA',
+      data: lineA,
+      color: theme.color.accentBoldBlue
+    }, {
+      id: 'lineB',
+      data: lineB,
+      color: theme.color.accentBoldGreen
+    }],
+    yAxis: {
+      domain: {
+        min: 0,
+        max: 100
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      position: "top",
+      tickLabelFormatter: dateFormatter,
+      ticks: dateTicks
+    }), /*#__PURE__*/_jsx(XAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      tickLabelFormatter: timeOfDayFormatter,
+      ticks: timeOfDayTicks
+    }), /*#__PURE__*/_jsx(Scrubber, {})]
+  });
+};
+const MultipleYAxesExample = () => /*#__PURE__*/_jsxs(CartesianChart, {
+  enableScrubbing: true,
+  height: defaultChartHeight,
+  series: [{
+    id: 'linear',
+    yAxisId: 'linearAxis',
+    data: [1, 10, 30, 50, 70, 90, 100],
+    label: 'linear'
+  }, {
+    id: 'log',
+    yAxisId: 'logAxis',
+    data: [1, 10, 30, 50, 70, 90, 100],
+    label: 'log'
+  }],
+  xAxis: {
+    data: [1, 10, 30, 50, 70, 90, 100]
+  },
+  yAxis: [{
+    id: 'linearAxis',
+    scaleType: 'linear'
+  }, {
+    id: 'logAxis',
+    scaleType: 'log'
+  }],
+  children: [/*#__PURE__*/_jsx(XAxis, {
+    showLine: true,
+    showTickMarks: true
+  }), /*#__PURE__*/_jsx(YAxis, {
+    showLine: true,
+    showTickMarks: true,
+    axisId: "logAxis",
+    position: "left"
+  }), /*#__PURE__*/_jsx(YAxis, {
+    showLine: true,
+    showTickMarks: true,
+    axisId: "linearAxis",
+    position: "left"
+  }), /*#__PURE__*/_jsx(Line, {
+    curve: "natural",
+    seriesId: "linear"
+  }), /*#__PURE__*/_jsx(Line, {
+    curve: "natural",
+    seriesId: "log"
+  }), /*#__PURE__*/_jsx(Scrubber, {})]
+});
+const DomainLimitType = _ref => {
+  let {
+    limit
+  } = _ref;
+  const exponentialData = [1, 2, 4, 8, 15, 30, 65, 140, 280, 580, 1200, 2400, 4800, 9500, 19000, 38000, 75000, 150000];
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    height: defaultChartHeight,
+    series: [{
+      id: 'growthLinear',
+      data: exponentialData,
+      color: '#10b981',
+      yAxisId: 'linear'
+    }, {
+      id: 'growthExponential',
+      data: exponentialData,
+      color: '#10b981',
+      yAxisId: 'exponential'
+    }],
+    yAxis: [{
+      id: 'linear',
+      scaleType: 'linear',
+      domainLimit: limit
+    }, {
+      id: 'exponential',
+      scaleType: 'log',
+      domainLimit: limit
+    }],
+    children: [/*#__PURE__*/_jsx(Line, {
+      showArea: true,
+      curve: "natural",
+      seriesId: "growthLinear"
+    }), /*#__PURE__*/_jsx(Line, {
+      showArea: true,
+      curve: "natural",
+      seriesId: "growthExponential"
+    }), /*#__PURE__*/_jsx(XAxis, {
+      showLine: true
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      axisId: "exponential",
+      position: "left",
+      requestedTickCount: 6,
+      tickLabelFormatter: value => value.toLocaleString(),
+      width: 70
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      axisId: "linear",
+      tickLabelFormatter: value => value.toLocaleString(),
+      width: 70
+    }), /*#__PURE__*/_jsx(Scrubber, {})]
+  });
+};
+const AxisStories = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Basic",
+      children: /*#__PURE__*/_jsx(Simple, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Time of Day",
+      children: /*#__PURE__*/_jsx(TimeOfDayAxesExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Multiple Axes on Same Side",
+      children: /*#__PURE__*/_jsx(MultipleYAxesExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Strict Domain Limit",
+      children: /*#__PURE__*/_jsx(DomainLimitType, {
+        limit: "strict"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Nice Domain Limit",
+      children: /*#__PURE__*/_jsx(DomainLimitType, {
+        limit: "nice"
+      })
+    })]
+  });
+};
+export default AxisStories;

package/esm/chart/axis/index.js

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

package/esm/chart/bar/Bar.js

@@ -0,0 +1,69 @@
+import React, { memo, useMemo } from 'react';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { getBarPath } from '../utils';
+import { DefaultBar } from './DefaultBar';
+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 static 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,
+    fillOpacity = 1,
+    stroke,
+    strokeWidth,
+    borderRadius = 4,
+    roundTop = true,
+    roundBottom = true,
+    transition
+  } = _ref;
+  const theme = useTheme();
+
+  // Use theme color as default if no fill is provided
+  const effectiveFill = fill != null ? fill : theme.color.fgPrimary;
+  const borderRadiusPixels = useMemo(() => borderRadius != null ? borderRadius : 0, [borderRadius]);
+  const barPath = useMemo(() => {
+    return getBarPath(x, y, width, height, borderRadiusPixels, roundTop, roundBottom);
+  }, [x, y, width, height, borderRadiusPixels, roundTop, roundBottom]);
+  const effectiveOriginY = originY != null ? originY : y + height;
+  if (!barPath) {
+    return null;
+  }
+
+  // Always use the BarComponent for rendering
+  return /*#__PURE__*/_jsx(BarComponent, {
+    borderRadius: borderRadius,
+    d: barPath,
+    dataX: dataX,
+    dataY: dataY,
+    fill: effectiveFill,
+    fillOpacity: fillOpacity,
+    height: height,
+    originY: effectiveOriginY,
+    roundBottom: roundBottom,
+    roundTop: roundTop,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    transition: transition,
+    width: width,
+    x: x,
+    y: y
+  });
+});

package/esm/chart/bar/BarChart.js

@@ -0,0 +1,125 @@
+const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize", "transition"],
+  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
+  _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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,
+      children,
+      barPadding,
+      BarComponent,
+      fillOpacity,
+      stroke,
+      strokeWidth,
+      borderRadius,
+      roundBaseline,
+      BarStackComponent,
+      stackGap,
+      barMinSize,
+      stackMinSize,
+      transition
+    } = _ref,
+    chartProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
+  const transformedSeries = useMemo(() => {
+    if (!stacked || !series) return series;
+    return series.map(s => {
+      var _s$stackId;
+      return _extends({}, s, {
+        stackId: (_s$stackId = s.stackId) != null ? _s$stackId : defaultStackId
+      });
+    });
+  }, [series, stacked]);
+
+  // Unlike other charts with custom props per series, we do not need to pick out
+  // the props from each series that shouldn't be passed to CartesianChart
+  const seriesToRender = transformedSeries != null ? transformedSeries : series;
+  const seriesIds = seriesToRender == null ? void 0 : seriesToRender.map(s => s.id);
+
+  // 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 = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const _ref3 = yAxis || {},
+    {
+      scaleType: yScaleType,
+      data: yData,
+      categoryPadding: yCategoryPadding,
+      domain: yDomain,
+      domainLimit: yDomainLimit,
+      range: yRange,
+      id: yAxisId
+    } = _ref3,
+    yAxisVisualProps = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  const xAxisConfig = {
+    scaleType: xScaleType != null ? 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 ? 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 : _extends({
+      min: 0
+    }, yDomain),
+    domainLimit: yDomainLimit,
+    range: yRange
+  };
+  return /*#__PURE__*/_jsxs(CartesianChart, _extends({}, chartProps, {
+    ref: ref,
+    inset: calculatedInset,
+    series: seriesToRender,
+    xAxis: xAxisConfig,
+    yAxis: yAxisConfig,
+    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _extends({}, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _extends({
+      axisId: yAxisId
+    }, yAxisVisualProps)), /*#__PURE__*/_jsx(BarPlot, {
+      BarComponent: BarComponent,
+      BarStackComponent: BarStackComponent,
+      barMinSize: barMinSize,
+      barPadding: barPadding,
+      borderRadius: borderRadius,
+      fillOpacity: fillOpacity,
+      roundBaseline: roundBaseline,
+      seriesIds: seriesIds,
+      stackGap: stackGap,
+      stackMinSize: stackMinSize,
+      stroke: stroke,
+      strokeWidth: strokeWidth,
+      transition: transition
+    }), children]
+  }));
+}));