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

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

@@ -0,0 +1,277 @@
+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,
+    curve: "monotone",
+    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,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,67 @@
+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
+  } = _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,
+    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 _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';
+
+/**
+ * Series type specifically for bar charts - supports both single numbers and tuples,
+ * and allows individual customization of Bar props per series.
+ */
+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 = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const calculatedInset = useMemo(() => getChartInset(userInset, defaultChartInset), [userInset]);
+
+  // Convert BarSeries to Series for Chart context
+  const chartSeries = useMemo(() => {
+    return series == null ? 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 _extends({}, s, {
+        stackId: (_s$stackId = s.stackId) != null ? _s$stackId : defaultStackId
+      });
+    });
+  }, [chartSeries, stacked]);
+  const seriesToRender = transformedSeries != null ? 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 _extends({}, s, {
+        stackId: (_s$stackId2 = s.stackId) != null ? _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 = _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: barSeriesToRender == null ? 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 { ClipPath, Defs, G, Rect } from 'react-native-svg';
+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 : defaultAxisId;
+      const stackId = series.stackId || "individual-" + series.id;
+      const stackKey = stackId + ":" + 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(#" + clipPathId + ")",
+      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))
+    })]
+  });
+});