@coinbase/cds-mobile 9.13.0 → 9.15.0

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

@@ -1,55 +1,58 @@
 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 { memo, useCallback, useMemo, useState } from 'react';
+import { IconButton } from '../../../../buttons';
 import { Example, ExampleScreen } from '../../../../examples/ExampleScreen';
 import { useTheme } from '../../../../hooks/useTheme';
+import { HStack, VStack } from '../../../../layout';
+import { Text } from '../../../../typography';
 import { BarPlot } from '../../bar';
 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";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const defaultChartHeight = 250;
 const ThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
   strokeWidth: 1
 })));
+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 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);
@@ -457,80 +460,180 @@ const LineChartOnBandScale = _ref2 => {
     })]
   });
 };
-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"
-      })
-    }), /*#__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",
+const tickLabelOverflowModes = ['reposition', 'fade', 'visible'];
+const ordinalLabels = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th'];
+const overflowSeriesData = [10, 22, 29, 45, 98, 45, 22];
+const TickLabelOverflowYAxes = () => {
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 320,
+    series: [{
+      id: 'line1',
+      data: overflowSeriesData
+    }],
+    yAxis: {
+      domain: {
+        min: 0
+      }
+    },
+    inset: 0,
+    children: [tickLabelOverflowModes.map(tickLabelOverflow => /*#__PURE__*/_jsx(YAxis, {
+      position: "left",
+      tickLabelOverflow: tickLabelOverflow,
+      width: 30
+    }, "left-" + tickLabelOverflow)), tickLabelOverflowModes.map(tickLabelOverflow => /*#__PURE__*/_jsx(YAxis, {
+      position: "right",
+      tickLabelOverflow: tickLabelOverflow,
+      width: 30
+    }, "right-" + tickLabelOverflow)), /*#__PURE__*/_jsx(Line, {
+      seriesId: "line1"
+    })]
+  });
+};
+const TickLabelOverflowXAxes = () => {
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 420,
+    series: [{
+      id: 'line1',
+      data: overflowSeriesData
+    }],
+    xAxis: {
+      data: ordinalLabels
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      }
+    },
+    inset: 0,
+    children: [tickLabelOverflowModes.map(tickLabelOverflow => /*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: tickLabelOverflow,
+      position: "bottom",
+      tickLabelOverflow: tickLabelOverflow
+    }, "bottom-" + tickLabelOverflow)), tickLabelOverflowModes.map(tickLabelOverflow => /*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: tickLabelOverflow,
+      position: "top",
+      tickLabelOverflow: tickLabelOverflow
+    }, "top-" + tickLabelOverflow)), /*#__PURE__*/_jsx(Line, {
+      seriesId: "line1"
+    })]
+  });
+};
+const TickLabelOverflowAllSides = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 250,
+    series: [{
+      id: 'line1',
+      data: overflowSeriesData,
+      color: theme.color.accentBoldBlue
+    }],
+    xAxis: {
+      data: ordinalLabels
+    },
+    yAxis: {
+      domain: {
+        min: 0,
+        max: 100
+      }
+    },
+    inset: 0,
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Fade",
+      position: "bottom",
+      tickLabelOverflow: "fade"
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Visible",
+      position: "left",
+      tickLabelOverflow: "visible"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "line1"
+    })]
+  });
+};
+function ExampleNavigator() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const examples = useMemo(() => [{
+    title: 'Basic',
+    component: /*#__PURE__*/_jsx(Simple, {})
+  }, {
+    title: 'Time of Day',
+    component: /*#__PURE__*/_jsx(TimeOfDayAxesExample, {})
+  }, {
+    title: 'Multiple Axes on Same Side',
+    component: /*#__PURE__*/_jsx(MultipleYAxesExample, {})
+  }, {
+    title: 'Strict Domain Limit',
+    component: /*#__PURE__*/_jsx(DomainLimitType, {
+      limit: "strict"
+    })
+  }, {
+    title: 'Nice Domain Limit',
+    component: /*#__PURE__*/_jsx(DomainLimitType, {
+      limit: "nice"
+    })
+  }, {
+    title: 'Band Axis Grid Alignment',
+    component: /*#__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, {})]
+    })
+  }, {
+    title: 'Band Scale - Tick Filtering',
+    component: /*#__PURE__*/_jsx(BandScaleTickFiltering, {})
+  }, {
+    title: 'Band Scale - Explicit Ticks',
+    component: /*#__PURE__*/_jsx(BandScaleExplicitTicks, {})
+  }, {
+    title: 'Line Chart on Band Scale - Grid Positions',
+    component: /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(LineChartOnBandScale, {
         bandGridLinePlacement: "edges"
       }), /*#__PURE__*/_jsx(LineChartOnBandScale, {
@@ -540,13 +643,65 @@ const AxisStories = () => {
       }), /*#__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, {})
-    })]
+    })
+  }, {
+    title: 'Axes on All Sides',
+    component: /*#__PURE__*/_jsx(AxesOnAllSides, {})
+  }, {
+    title: 'Custom Tick Mark Sizes',
+    component: /*#__PURE__*/_jsx(CustomTickMarkSizes, {})
+  }, {
+    title: 'Y Axis Label Repositioning',
+    component: /*#__PURE__*/_jsx(TickLabelOverflowYAxes, {})
+  }, {
+    title: 'X Axis Label Repositioning',
+    component: /*#__PURE__*/_jsx(TickLabelOverflowXAxes, {})
+  }, {
+    title: 'Ineffective Repositioning',
+    component: /*#__PURE__*/_jsx(TickLabelOverflowAllSides, {})
+  }], []);
+  const currentExample = examples[currentIndex];
+  const handlePrevious = useCallback(() => {
+    setCurrentIndex(prev => (prev - 1 + examples.length) % examples.length);
+  }, [examples.length]);
+  const handleNext = useCallback(() => {
+    setCurrentIndex(prev => (prev + 1) % examples.length);
+  }, [examples.length]);
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    paddingX: 0,
+    children: /*#__PURE__*/_jsxs(VStack, {
+      gap: 4,
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: 2,
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          accessibilityHint: "Navigate to previous example",
+          accessibilityLabel: "Previous",
+          name: "arrowLeft",
+          onPress: handlePrevious,
+          variant: "secondary"
+        }), /*#__PURE__*/_jsxs(VStack, {
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "title3",
+            children: currentExample.title
+          }), /*#__PURE__*/_jsxs(Text, {
+            color: "fgMuted",
+            font: "label1",
+            children: [currentIndex + 1, " / ", examples.length]
+          })]
+        }), /*#__PURE__*/_jsx(IconButton, {
+          accessibilityHint: "Navigate to next example",
+          accessibilityLabel: "Next",
+          name: "arrowRight",
+          onPress: handleNext,
+          variant: "secondary"
+        })]
+      }), /*#__PURE__*/_jsx(Example, {
+        children: currentExample.component
+      })]
+    })
   });
-};
-export default AxisStories;
+}
+export default ExampleNavigator;

package/esm/visualizations/chart/axis/index.js

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

package/esm/visualizations/chart/scrubber/DefaultScrubberBeaconLabel.js

@@ -29,13 +29,13 @@ export const DefaultScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
     chartTextProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
   return /*#__PURE__*/_jsx(ChartText, _extends({
-    disableRepositioning: true,
     background: background != null ? background : theme.color.bg,
     borderRadius: borderRadius,
     color: color != null ? color : theme.color.fgPrimary,
     elevated: elevated,
     font: font,
     inset: inset,
+    repositionAxes: "none",
     verticalAlignment: verticalAlignment
   }, chartTextProps, {
     children: label

package/esm/visualizations/chart/text/ChartText.js

@@ -34,6 +34,11 @@ const getFontWeight = (theme, font) => {
  * Vertical alignment options for chart text.
  */
 
+/**
+ * Which axes ChartText may nudge labels along to stay in bounds.
+ * @default 'both'
+ */
+
 export const ChartText = /*#__PURE__*/memo(_ref => {
   var _elevationShadow$shad, _elevationShadow$shad2, _elevationShadow$shad3, _elevationShadow$shad4, _elevationShadow$shad5, _elevationShadow$shad6, _elevationShadow$shad7;
   let {
@@ -46,6 +51,7 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
     verticalAlignment = 'middle',
     paragraphAlignment = TextAlign.Left,
     disableRepositioning = false,
+    repositionAxes = disableRepositioning ? 'none' : 'both',
     bounds,
     color,
     background: backgroundProp,
@@ -183,12 +189,8 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
     height: chartHeight
   }), [chartWidth, chartHeight]);
   const overflowAmount = useDerivedValue(() => {
-    if (disableRepositioning) {
-      return {
-        x: 0,
-        y: 0
-      };
-    }
+    const repositionX = repositionAxes === 'both' || repositionAxes === 'x';
+    const repositionY = repositionAxes === 'both' || repositionAxes === 'y';
     const parentBounds = bounds != null ? bounds : fullChartBounds;
     if (!parentBounds || parentBounds.width <= 0 || parentBounds.height <= 0) {
       return {
@@ -198,25 +200,25 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
     }
     let offsetX = 0;
     let offsetY = 0;
-
-    // X-axis overflow
-    if (backgroundRect.value.x < parentBounds.x) {
-      offsetX = parentBounds.x - backgroundRect.value.x;
-    } else if (backgroundRect.value.x + backgroundRect.value.width > parentBounds.x + parentBounds.width) {
-      offsetX = parentBounds.x + parentBounds.width - (backgroundRect.value.x + backgroundRect.value.width);
+    if (repositionX) {
+      if (backgroundRect.value.x < parentBounds.x) {
+        offsetX = parentBounds.x - backgroundRect.value.x;
+      } else if (backgroundRect.value.x + backgroundRect.value.width > parentBounds.x + parentBounds.width) {
+        offsetX = parentBounds.x + parentBounds.width - (backgroundRect.value.x + backgroundRect.value.width);
+      }
     }
-
-    // Y-axis overflow
-    if (backgroundRect.value.y < parentBounds.y) {
-      offsetY = parentBounds.y - backgroundRect.value.y;
-    } else if (backgroundRect.value.y + backgroundRect.value.height > parentBounds.y + parentBounds.height) {
-      offsetY = parentBounds.y + parentBounds.height - (backgroundRect.value.y + backgroundRect.value.height);
+    if (repositionY) {
+      if (backgroundRect.value.y < parentBounds.y) {
+        offsetY = parentBounds.y - backgroundRect.value.y;
+      } else if (backgroundRect.value.y + backgroundRect.value.height > parentBounds.y + parentBounds.height) {
+        offsetY = parentBounds.y + parentBounds.height - (backgroundRect.value.y + backgroundRect.value.height);
+      }
     }
     return {
       x: offsetX,
       y: offsetY
     };
-  }, [backgroundRect, fullChartBounds, bounds, disableRepositioning]);
+  }, [backgroundRect, fullChartBounds, bounds, repositionAxes]);
 
   // Final adjusted positions
   const backgroundRectWithOffset = useDerivedValue(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.13.0",
+  "version": "9.15.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -218,7 +218,7 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.13.0",
+    "@coinbase/cds-common": "^9.15.0",
     "@coinbase/cds-icons": "^5.21.0",
     "@coinbase/cds-illustrations": "^4.47.0",
     "@coinbase/cds-lottie-files": "^3.3.4",