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

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

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import { memo, useCallback, useMemo } from 'react';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { BarPlot } from '../../bar';
 import { CartesianChart } from '../../CartesianChart';
 import { LineChart, SolidLine } from '../../line';
 import { Line } from '../../line/Line';
@@ -118,7 +119,6 @@ const TimeOfDayAxesExample = () => {
   }, [timeData]);
   return /*#__PURE__*/_jsxs(LineChart, {
     enableScrubbing: true,
-    curve: "monotone",
     height: defaultChartHeight,
     series: [{
       id: 'lineA',
@@ -195,6 +195,105 @@ const MultipleYAxesExample = () => /*#__PURE__*/_jsxs(CartesianChart, {
     seriesId: "log"
   }), /*#__PURE__*/_jsx(Scrubber, {})]
 });
+const AxesOnAllSides = () => {
+  const theme = useTheme();
+  const data = [30, 45, 60, 80, 55, 40, 65];
+  const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: defaultChartHeight,
+    series: [{
+      id: 'data',
+      data,
+      color: theme.color.accentBoldBlue
+    }],
+    xAxis: {
+      data: labels
+    },
+    yAxis: {
+      domain: {
+        min: 0,
+        max: 100
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Bottom Axis",
+      position: "bottom",
+      ticks: labels.map((label, index) => index)
+    }), /*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Top Axis",
+      position: "top",
+      ticks: labels.map((label, index) => index)
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Left Axis",
+      position: "left"
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Right Axis",
+      position: "right"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "data"
+    })]
+  });
+};
+const CustomTickMarkSizes = () => {
+  const theme = useTheme();
+  const data = [25, 50, 75, 60, 45, 80, 35];
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 300,
+    series: [{
+      id: 'data',
+      data,
+      color: theme.color.accentBoldGreen
+    }],
+    xAxis: {
+      data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
+    },
+    yAxis: {
+      domain: {
+        min: 0,
+        max: 100
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "tickMarkSize=4 (default)",
+      tickMarkSize: 4
+    }), /*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      height: 60,
+      label: "tickMarkSize=8",
+      position: "top",
+      tickMarkSize: 8
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "tickMarkSize=16",
+      position: "left",
+      tickMarkSize: 16,
+      width: 76
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "tickMarkSize=24",
+      position: "right",
+      tickMarkSize: 24,
+      width: 84
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "monotone",
+      seriesId: "data"
+    })]
+  });
+};
 const DomainLimitType = _ref => {
   let {
     limit
@@ -250,6 +349,97 @@ const DomainLimitType = _ref => {
     }), /*#__PURE__*/_jsx(Scrubber, {})]
   });
 };
+
+// Band scale with tick filtering - show every other tick
+const BandScaleTickFiltering = () => /*#__PURE__*/_jsxs(CartesianChart, {
+  height: defaultChartHeight,
+  inset: 8,
+  series: [{
+    id: 'data',
+    data: [10, 22, 29, 45, 98, 45, 22, 35, 42, 18, 55, 67]
+  }],
+  xAxis: {
+    scaleType: 'band',
+    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+  },
+  yAxis: {
+    domain: {
+      min: 0
+    }
+  },
+  children: [/*#__PURE__*/_jsx(XAxis, {
+    showGrid: true,
+    showLine: true,
+    showTickMarks: true,
+    label: "ticks={(i) => i % 2 === 0}",
+    ticks: i => i % 2 === 0
+  }), /*#__PURE__*/_jsx(BarPlot, {})]
+});
+
+// Band scale with explicit ticks array
+const BandScaleExplicitTicks = () => /*#__PURE__*/_jsxs(CartesianChart, {
+  height: defaultChartHeight,
+  inset: 8,
+  series: [{
+    id: 'data',
+    data: [10, 22, 29, 45, 98, 45, 22]
+  }],
+  xAxis: {
+    scaleType: 'band',
+    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+  },
+  yAxis: {
+    domain: {
+      min: 0
+    }
+  },
+  children: [/*#__PURE__*/_jsx(XAxis, {
+    showGrid: true,
+    showLine: true,
+    showTickMarks: true,
+    label: "ticks={[0, 3, 6]} (first, middle, last)",
+    ticks: [0, 3, 6]
+  }), /*#__PURE__*/_jsx(BarPlot, {})]
+});
+
+// Line chart on band scale - comparing grid placements
+const LineChartOnBandScale = _ref2 => {
+  let {
+    bandGridLinePlacement
+  } = _ref2;
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 180,
+    inset: 8,
+    series: [{
+      id: 'line1',
+      data: [10, 22, 29, 45, 98, 45, 22],
+      color: theme.color.accentBoldBlue
+    }],
+    xAxis: {
+      scaleType: 'band',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      bandGridLinePlacement: bandGridLinePlacement,
+      bandTickMarkPlacement: bandGridLinePlacement,
+      label: "bandGridLinePlacement: " + bandGridLinePlacement
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      position: "left"
+    }), /*#__PURE__*/_jsx(Line, {
+      seriesId: "line1"
+    })]
+  });
+};
 const AxisStories = () => {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     children: [/*#__PURE__*/_jsx(Example, {
@@ -271,6 +461,74 @@ const AxisStories = () => {
       children: /*#__PURE__*/_jsx(DomainLimitType, {
         limit: "nice"
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Band Axis Grid Alignment",
+      children: /*#__PURE__*/_jsxs(CartesianChart, {
+        height: 350,
+        inset: 8,
+        series: [{
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22]
+        }],
+        xAxis: {
+          scaleType: 'band',
+          data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+        },
+        yAxis: {
+          domain: {
+            min: 0
+          }
+        },
+        children: [/*#__PURE__*/_jsx(XAxis, {
+          showGrid: true,
+          showLine: true,
+          showTickMarks: true,
+          label: "Default"
+        }), /*#__PURE__*/_jsx(XAxis, {
+          showLine: true,
+          showTickMarks: true,
+          bandTickMarkPlacement: "start",
+          label: "Start"
+        }), /*#__PURE__*/_jsx(XAxis, {
+          showLine: true,
+          showTickMarks: true,
+          bandTickMarkPlacement: "end",
+          label: "End"
+        }), /*#__PURE__*/_jsx(XAxis, {
+          showLine: true,
+          showTickMarks: true,
+          bandTickMarkPlacement: "middle",
+          label: "Middle"
+        }), /*#__PURE__*/_jsx(XAxis, {
+          showLine: true,
+          showTickMarks: true,
+          bandTickMarkPlacement: "edges",
+          label: "Edges"
+        }), /*#__PURE__*/_jsx(BarPlot, {})]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Band Scale - Tick Filtering",
+      children: /*#__PURE__*/_jsx(BandScaleTickFiltering, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Band Scale - Explicit Ticks",
+      children: /*#__PURE__*/_jsx(BandScaleExplicitTicks, {})
+    }), /*#__PURE__*/_jsxs(Example, {
+      title: "Line Chart on Band Scale - Grid Positions",
+      children: [/*#__PURE__*/_jsx(LineChartOnBandScale, {
+        bandGridLinePlacement: "edges"
+      }), /*#__PURE__*/_jsx(LineChartOnBandScale, {
+        bandGridLinePlacement: "start"
+      }), /*#__PURE__*/_jsx(LineChartOnBandScale, {
+        bandGridLinePlacement: "middle"
+      }), /*#__PURE__*/_jsx(LineChartOnBandScale, {
+        bandGridLinePlacement: "end"
+      })]
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Axes on All Sides",
+      children: /*#__PURE__*/_jsx(AxesOnAllSides, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Tick Mark Sizes",
+      children: /*#__PURE__*/_jsx(CustomTickMarkSizes, {})
     })]
   });
 };

package/esm/chart/axis/index.js

@@ -1,5 +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

@@ -24,6 +24,7 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     originY,
     dataX,
     dataY,
+    seriesId,
     BarComponent = DefaultBar,
     fill,
     fillOpacity = 1,
@@ -31,7 +32,9 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     strokeWidth,
     borderRadius = 4,
     roundTop = true,
-    roundBottom = true
+    roundBottom = true,
+    transitions,
+    transition
   } = _ref;
   const theme = useTheme();
 
@@ -58,8 +61,11 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     originY: effectiveOriginY,
     roundBottom: roundBottom,
     roundTop: roundTop,
+    seriesId: seriesId,
     stroke: stroke,
     strokeWidth: strokeWidth,
+    transition: transition,
+    transitions: transitions,
     width: width,
     x: x,
     y: y

package/esm/chart/bar/BarChart.js

@@ -1,4 +1,4 @@
-const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize"],
+const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize", "transitions", "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); }
@@ -8,11 +8,6 @@ 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 {
@@ -22,7 +17,7 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       showYAxis,
       xAxis,
       yAxis,
-      inset: userInset,
+      inset,
       children,
       barPadding,
       BarComponent,
@@ -34,44 +29,27 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       BarStackComponent,
       stackGap,
       barMinSize,
-      stackMinSize
+      stackMinSize,
+      transitions,
+      transition
     } = _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 calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
   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;
+      var _s$stackId;
       return _extends({}, s, {
-        stackId: (_s$stackId2 = s.stackId) != null ? _s$stackId2 : defaultStackId
+        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 || {},
     {
@@ -137,11 +115,13 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       borderRadius: borderRadius,
       fillOpacity: fillOpacity,
       roundBaseline: roundBaseline,
-      seriesIds: barSeriesToRender == null ? void 0 : barSeriesToRender.map(s => s.id),
+      seriesIds: seriesIds,
       stackGap: stackGap,
       stackMinSize: stackMinSize,
       stroke: stroke,
-      strokeWidth: strokeWidth
+      strokeWidth: strokeWidth,
+      transition: transition,
+      transitions: transitions
     }), children]
   }));
 }));

package/esm/chart/bar/BarPlot.js

@@ -1,9 +1,9 @@
 import { memo, useId, useMemo } from 'react';
-import { ClipPath, Defs, G, Rect } from 'react-native-svg';
+import { Group, Skia } from '@shopify/react-native-skia';
 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";
+import { jsx as _jsx } 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.
@@ -23,7 +23,9 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
     BarStackComponent,
     stackGap,
     barMinSize,
-    stackMinSize
+    stackMinSize,
+    transitions,
+    transition
   } = _ref;
   const {
     series: allSeries,
@@ -58,39 +60,45 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
     });
     return Array.from(groups.values());
   }, [targetSeries]);
-  if (!drawingArea) {
+
+  // Create clip path for the entire chart area (shared by all bars)
+  const clipPath = useMemo(() => {
+    if (!drawingArea) return null;
+    const clip = Skia.Path.Make();
+    clip.addRect({
+      x: drawingArea.x,
+      y: drawingArea.y,
+      width: drawingArea.width,
+      height: drawingArea.height
+    });
+    return clip;
+  }, [drawingArea]);
+  if (!clipPath) {
     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))
-    })]
+
+  // Note: Clipping is now handled here at the BarPlot level (one clip path for all bars!)
+  // This is much more efficient than creating a clip path for each individual bar
+  return /*#__PURE__*/_jsx(Group, {
+    clip: clipPath,
+    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,
+      transition: transition,
+      transitions: transitions,
+      yAxisId: group.yAxisId
+    }, group.stackId))
   });
 });