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

package/esm/chart/scrubber/index.js

@@ -1,2 +1,4 @@
-// Only export Scrubber component
+export * from './DefaultScrubberBeacon';
+export * from './DefaultScrubberBeaconLabel';
+export * from './DefaultScrubberLabel';
 export * from './Scrubber';

package/esm/chart/text/ChartText.js

@@ -1,11 +1,28 @@
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { G, Rect as SvgRect, Text } from 'react-native-svg';
+import { memo, useMemo } from 'react';
+import { runOnJS, useAnimatedReaction, useDerivedValue } from 'react-native-reanimated';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { FontSlant, FontWeight, Group, Paint, Paragraph, RoundedRect, Shadow, Skia, TextAlign } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
-import { getChartInset } from '../utils';
+import { getChartInset, getColorWithOpacity, unwrapAnimatedValue } from '../utils';
+
+/**
+ * Converts a fontWeight from Theme to a Skia FontWeight
+ * @note this only works when the fontWeight is a valid number (ie not 'bold')
+ * @param theme - The theme to use
+ * @param font - The font to use
+ * @returns The FontWeight or undefined if the fontWeight is not a valid number
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getFontWeight = (theme, font) => {
+  const themeFontWeight = theme.fontWeight[font];
+  const numericWeight = typeof themeFontWeight === 'string' ? Number(themeFontWeight) : themeFontWeight;
+  const validFontWeights = Object.values(FontWeight).filter(value => typeof value === 'number');
+  return numericWeight !== undefined && validFontWeights.includes(numericWeight) ? numericWeight : undefined;
+};
 
 /**
  * The supported content types for ChartText.
+ * Pass a string for simple text, or a SkParagraph for advanced rich text formatting.
  */
 
 /**
@@ -15,137 +32,156 @@ import { getChartInset } from '../utils';
 /**
  * Vertical alignment options for chart text.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Maps horizontal alignment to SVG textAnchor.
- * This abstraction allows us to provide a consistent alignment API across web and mobile platforms,
- * hiding the platform-specific SVG property differences.
- */
-const getTextAnchor = alignment => {
-  switch (alignment) {
-    case 'left':
-      return 'start';
-    case 'center':
-      return 'middle';
-    case 'right':
-      return 'end';
-  }
-};
 
-/**
- * Maps vertical alignment to SVG alignmentBaseline.
- * This abstraction allows us to provide a consistent alignment API across web and mobile platforms,
- * hiding the platform-specific SVG property differences.
- */
-const getAlignmentBaseline = alignment => {
-  switch (alignment) {
-    case 'top':
-      return 'hanging';
-    case 'middle':
-      return 'central';
-    case 'bottom':
-      return 'ideographic';
-  }
-};
-const ChartTextVisible = /*#__PURE__*/memo(_ref => {
-  let {
-    children,
-    background,
-    textAnchor,
-    alignmentBaseline,
-    fontSize,
-    fontWeight,
-    fill,
-    borderRadius,
-    inset: insetInput,
-    textDimensions,
-    dx,
-    dy
-  } = _ref;
-  const theme = useTheme();
-  const inset = useMemo(() => getChartInset(insetInput), [insetInput]);
-  const rectHeight = useMemo(() => textDimensions.height + inset.top + inset.bottom, [textDimensions, inset]);
-  const rectWidth = useMemo(() => textDimensions.width + inset.left + inset.right, [textDimensions, inset]);
-  return /*#__PURE__*/_jsxs(G, {
-    children: [background !== 'transparent' && /*#__PURE__*/_jsx(SvgRect, {
-      fill: background,
-      height: rectHeight,
-      rx: borderRadius,
-      ry: borderRadius,
-      width: rectWidth,
-      x: textDimensions.x - inset.left,
-      y: textDimensions.y - inset.top
-    }), /*#__PURE__*/_jsx(Text, {
-      alignmentBaseline: alignmentBaseline,
-      dx: dx,
-      dy: dy,
-      fill: fill != null ? fill : theme.color.fgMuted,
-      fontSize: fontSize,
-      fontWeight: fontWeight,
-      textAnchor: textAnchor,
-      children: children
-    })]
-  });
-});
-export const ChartText = /*#__PURE__*/memo(_ref2 => {
+export const ChartText = /*#__PURE__*/memo(_ref => {
+  var _elevationShadow$shad, _elevationShadow$shad2, _elevationShadow$shad3, _elevationShadow$shad4, _elevationShadow$shad5, _elevationShadow$shad6, _elevationShadow$shad7;
   let {
     children,
     x,
     y,
+    dx = 0,
+    dy = 0,
     horizontalAlignment = 'center',
     verticalAlignment = 'middle',
-    dx,
-    dy,
+    paragraphAlignment = TextAlign.Left,
     disableRepositioning = false,
     bounds,
-    testID,
-    fontSize = 12,
-    fontWeight,
     color,
-    background = 'transparent',
-    borderRadius,
+    background: backgroundProp,
+    borderRadius = 4,
     inset: insetInput,
     onDimensionsChange,
-    opacity = 1
-  } = _ref2;
+    opacity = 1,
+    fontFamilies,
+    font = 'label2',
+    fontSize,
+    fontWeight,
+    fontStyle: fontStyleProp = FontSlant.Upright,
+    elevated
+  } = _ref;
+  const theme = useTheme();
   const {
     width: chartWidth,
-    height: chartHeight
+    height: chartHeight,
+    fontFamilies: contextFontFamilies,
+    fontProvider
   } = useCartesianChartContext();
-  const textAnchor = useMemo(() => getTextAnchor(horizontalAlignment), [horizontalAlignment]);
-  const alignmentBaseline = useMemo(() => getAlignmentBaseline(verticalAlignment), [verticalAlignment]);
-  const fullChartBounds = useMemo(() => ({
-    x: 0,
-    y: 0,
-    width: chartWidth,
-    height: chartHeight
-  }), [chartWidth, chartHeight]);
-  const [textSize, setTextSize] = useState(null);
-  const textBBox = useMemo(() => {
-    if (!textSize) {
-      return null;
+  const inset = useMemo(() => getChartInset(insetInput), [insetInput]);
+  const background = backgroundProp != null ? backgroundProp : elevated ? theme.color.bgElevation1 : 'transparent';
+  const defaultParagraphStyle = useMemo(() => {
+    var _ref2;
+    return {
+      fontFamilies: (_ref2 = fontFamilies != null ? fontFamilies : contextFontFamilies) != null ? _ref2 : [],
+      fontSize: fontSize != null ? fontSize : theme.fontSize[font],
+      fontStyle: {
+        weight: fontWeight != null ? fontWeight : getFontWeight(theme, font),
+        slant: fontStyleProp
+      },
+      color: Skia.Color(color != null ? color : theme.color.fgMuted)
+    };
+  }, [fontFamilies, contextFontFamilies, fontSize, theme, font, fontWeight, fontStyleProp, color]);
+  const paragraph = useDerivedValue(() => {
+    const childrenValue = unwrapAnimatedValue(children);
+    if (typeof childrenValue !== 'string') {
+      return childrenValue;
     }
+    const builder = Skia.ParagraphBuilder.Make({
+      textAlign: TextAlign.Left
+    }, fontProvider);
+    builder.pushStyle(defaultParagraphStyle);
+    builder.addText(childrenValue);
+    builder.pop();
+    const para = builder.build();
+    para.layout(chartWidth);
+    return para;
+  }, [children, fontProvider, defaultParagraphStyle, chartWidth]);
+  const textDimensions = useDerivedValue(() => {
+    const unwrappedParagraph = paragraph.value;
+    if (!unwrappedParagraph) return {
+      width: 0,
+      height: 0
+    };
     return {
-      x: x + textSize.x,
-      y: y + textSize.y,
-      width: textSize.width,
-      height: textSize.height
+      width: unwrappedParagraph.getLongestLine(),
+      height: unwrappedParagraph.getHeight()
     };
-  }, [x, y, textSize]);
-  const isDimensionsReady = disableRepositioning || textBBox !== null;
-  const backgroundRectDimensions = useMemo(() => {
-    if (!textBBox) {
-      return null;
+  }, [paragraph]);
+  const backgroundRectSize = useDerivedValue(() => ({
+    width: textDimensions.value.width + inset.left + inset.right,
+    height: textDimensions.value.height + inset.top + inset.bottom
+  }), [textDimensions, inset]);
+
+  // Calculate background rect position based on alignment
+  const backgroundRect = useDerivedValue(() => {
+    const horAlignment = unwrapAnimatedValue(horizontalAlignment);
+    const verAlignment = unwrapAnimatedValue(verticalAlignment);
+    // By default the value is top left
+    let rectX = unwrapAnimatedValue(x);
+    let rectY = unwrapAnimatedValue(y);
+    const rectSize = backgroundRectSize.value;
+
+    // Adjust for horizontal alignment
+    switch (horAlignment) {
+      case 'center':
+        rectX = rectX - rectSize.width / 2;
+        break;
+      case 'right':
+        rectX = rectX - rectSize.width;
+        break;
+    }
+
+    // Adjust for vertical alignment
+    switch (verAlignment) {
+      case 'middle':
+        rectY = rectY - rectSize.height / 2;
+        break;
+      case 'bottom':
+        rectY = rectY - rectSize.height;
+        break;
     }
-    const inset = getChartInset(insetInput);
     return {
-      x: textBBox.x - inset.left,
-      y: textBBox.y - inset.top,
-      width: textBBox.width + inset.left + inset.right,
-      height: textBBox.height + inset.top + inset.bottom
+      x: rectX,
+      y: rectY,
+      width: rectSize.width,
+      height: rectSize.height
     };
-  }, [textBBox, insetInput]);
-  const overflowAmount = useMemo(() => {
+  }, [x, y, backgroundRectSize, horizontalAlignment, verticalAlignment]);
+
+  // Paragraph uses top-left positioning
+  const textPosition = useDerivedValue(() => {
+    const textDims = textDimensions.value;
+
+    // Calculate horizontal offset based on paragraph alignment
+    let horizontalOffset = 0;
+    switch (paragraphAlignment) {
+      case TextAlign.Center:
+        horizontalOffset = -textDims.width / 2;
+        break;
+      case TextAlign.Right:
+      case TextAlign.End:
+        horizontalOffset = -textDims.width;
+        break;
+      default:
+        // Left-aligned text needs no offset
+        horizontalOffset = 0;
+        break;
+    }
+    return {
+      x: backgroundRect.value.x + inset.left + horizontalOffset,
+      y: backgroundRect.value.y + inset.top,
+      width: textDims.width,
+      height: textDims.height
+    };
+  }, [backgroundRect, textDimensions, inset, paragraphAlignment]);
+
+  // Calculate overflow and repositioning
+  const fullChartBounds = useMemo(() => ({
+    x: 0,
+    y: 0,
+    width: chartWidth,
+    height: chartHeight
+  }), [chartWidth, chartHeight]);
+  const overflowAmount = useDerivedValue(() => {
     if (disableRepositioning) {
       return {
         x: 0,
@@ -153,85 +189,117 @@ export const ChartText = /*#__PURE__*/memo(_ref2 => {
       };
     }
     const parentBounds = bounds != null ? bounds : fullChartBounds;
-    if (!backgroundRectDimensions || !parentBounds || parentBounds.width <= 0 || parentBounds.height <= 0) {
+    if (!parentBounds || parentBounds.width <= 0 || parentBounds.height <= 0) {
       return {
         x: 0,
         y: 0
       };
     }
-    let x = 0;
-    let y = 0;
+    let offsetX = 0;
+    let offsetY = 0;
 
     // X-axis overflow
-    if (backgroundRectDimensions.x < parentBounds.x) {
-      x = parentBounds.x - backgroundRectDimensions.x; // positive = shift right
-    } else if (backgroundRectDimensions.x + backgroundRectDimensions.width > parentBounds.x + parentBounds.width) {
-      x = parentBounds.x + parentBounds.width - (backgroundRectDimensions.x + backgroundRectDimensions.width); // negative = shift left
+    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 (backgroundRectDimensions.y < parentBounds.y) {
-      y = parentBounds.y - backgroundRectDimensions.y; // positive = shift down
-    } else if (backgroundRectDimensions.y + backgroundRectDimensions.height > parentBounds.y + parentBounds.height) {
-      y = parentBounds.y + parentBounds.height - (backgroundRectDimensions.y + backgroundRectDimensions.height); // negative = shift up
+    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,
-      y
+      x: offsetX,
+      y: offsetY
     };
-  }, [backgroundRectDimensions, fullChartBounds, bounds, disableRepositioning]);
-  const reportedRect = useMemo(() => {
-    if (!backgroundRectDimensions) return null;
+  }, [backgroundRect, fullChartBounds, bounds, disableRepositioning]);
+
+  // Final adjusted positions
+  const backgroundRectWithOffset = useDerivedValue(() => {
+    const offsetX = unwrapAnimatedValue(dx);
+    const offsetY = unwrapAnimatedValue(dy);
     return {
-      x: backgroundRectDimensions.x + overflowAmount.x,
-      y: backgroundRectDimensions.y + overflowAmount.y,
-      width: backgroundRectDimensions.width,
-      height: backgroundRectDimensions.height
+      x: backgroundRect.value.x + overflowAmount.value.x + offsetX,
+      y: backgroundRect.value.y + overflowAmount.value.y + offsetY,
+      width: backgroundRect.value.width,
+      height: backgroundRect.value.height
     };
-  }, [backgroundRectDimensions, overflowAmount.x, overflowAmount.y]);
-  useEffect(() => {
-    if (onDimensionsChange && reportedRect !== null) {
-      onDimensionsChange(reportedRect);
+  }, [backgroundRect, overflowAmount, dx, dy]);
+  const textWithOffsetX = useDerivedValue(() => textPosition.value.x + overflowAmount.value.x + unwrapAnimatedValue(dx), [textPosition, overflowAmount, dx]);
+  const textWithOffsetY = useDerivedValue(() => textPosition.value.y + overflowAmount.value.y + unwrapAnimatedValue(dy), [textPosition, overflowAmount, dy]);
+  useAnimatedReaction(() => backgroundRectWithOffset.value, (rect, previous) => {
+    if (onDimensionsChange && rect !== previous) {
+      runOnJS(onDimensionsChange)(rect);
     }
-  }, [reportedRect, onDimensionsChange]);
-  const onLayout = useCallback(event => {
-    if (event.nativeEvent.layout.width > 0 && event.nativeEvent.layout.height > 0) {
-      setTextSize(event.nativeEvent.layout);
+  }, [onDimensionsChange]);
+
+  // Show group if we are ready
+  const groupOpacity = useDerivedValue(() => {
+    const textSize = textDimensions.value;
+    const hasValidContent = paragraph.value && textSize.width > 0 && textSize.height > 0;
+    return hasValidContent ? unwrapAnimatedValue(opacity) : 0;
+  }, [paragraph, textDimensions, opacity]);
+  const backgroundRectHeight = useDerivedValue(() => backgroundRectWithOffset.value.height, [backgroundRectWithOffset]);
+  const backgroundRectWidth = useDerivedValue(() => backgroundRectWithOffset.value.width, [backgroundRectWithOffset]);
+  const backgroundRectX = useDerivedValue(() => backgroundRectWithOffset.value.x, [backgroundRectWithOffset]);
+  const backgroundRectY = useDerivedValue(() => backgroundRectWithOffset.value.y, [backgroundRectWithOffset]);
+  const elevationShadow = elevated ? theme.shadow.elevation1 : undefined;
+
+  // Calculate the paragraph's internal x offset from line metrics based on text alignment
+  const paragraphTransform = useDerivedValue(() => {
+    if (!paragraph.value || !paragraphAlignment) return [];
+    const rects = paragraph.value.getLineMetrics();
+    if (rects.length === 0) return [];
+    let minOffset;
+    switch (paragraphAlignment) {
+      case TextAlign.Center:
+        // For center-aligned text, account for half the width
+        minOffset = Math.min(...rects.map(rect => rect.x - rect.width / 2));
+        break;
+      case TextAlign.Right:
+      case TextAlign.End:
+        // For right-aligned text, account for the full width
+        minOffset = Math.min(...rects.map(rect => rect.x - rect.width));
+        break;
+      default:
+        // For left-aligned text, use the x position directly
+        minOffset = Math.min(...rects.map(rect => rect.x));
+        break;
     }
-  }, []);
-  return /*#__PURE__*/_jsxs(G, {
-    opacity: isDimensionsReady ? opacity : 0,
-    children: [textSize && /*#__PURE__*/_jsx(G, {
-      transform: [{
-        translateX: x + overflowAmount.x
-      }, {
-        translateY: y + overflowAmount.y
-      }],
-      children: /*#__PURE__*/_jsx(ChartTextVisible, {
-        alignmentBaseline: alignmentBaseline,
-        background: background,
-        borderRadius: borderRadius,
-        dx: dx,
-        dy: dy,
-        fill: color,
-        fontSize: fontSize,
-        fontWeight: fontWeight,
-        inset: insetInput,
-        textAnchor: textAnchor,
-        textDimensions: textSize,
-        children: children
+    return [{
+      translateX: -minOffset
+    }];
+  }, [paragraph, paragraphAlignment]);
+
+  // Opacity on a group doesn't impact the paragraph so we need to apply it to Group
+  return /*#__PURE__*/_jsxs(Group, {
+    layer: /*#__PURE__*/_jsx(Paint, {
+      opacity: groupOpacity
+    }),
+    children: [background !== 'transparent' && /*#__PURE__*/_jsx(RoundedRect, {
+      color: background,
+      height: backgroundRectHeight,
+      r: borderRadius,
+      width: backgroundRectWidth,
+      x: backgroundRectX,
+      y: backgroundRectY,
+      children: elevationShadow && /*#__PURE__*/_jsx(Shadow, {
+        blur: Number((_elevationShadow$shad = elevationShadow.shadowRadius) != null ? _elevationShadow$shad : 0),
+        color: getColorWithOpacity(String((_elevationShadow$shad2 = elevationShadow.shadowColor) != null ? _elevationShadow$shad2 : '#000000'), Number((_elevationShadow$shad3 = elevationShadow.shadowOpacity) != null ? _elevationShadow$shad3 : 1)),
+        dx: Number((_elevationShadow$shad4 = (_elevationShadow$shad5 = elevationShadow.shadowOffset) == null ? void 0 : _elevationShadow$shad5.width) != null ? _elevationShadow$shad4 : 0),
+        dy: Number((_elevationShadow$shad6 = (_elevationShadow$shad7 = elevationShadow.shadowOffset) == null ? void 0 : _elevationShadow$shad7.height) != null ? _elevationShadow$shad6 : 0)
+      })
+    }), /*#__PURE__*/_jsx(Group, {
+      transform: paragraphTransform,
+      children: /*#__PURE__*/_jsx(Paragraph, {
+        paragraph: paragraph,
+        width: chartWidth,
+        x: textWithOffsetX,
+        y: textWithOffsetY
       })
-    }), /*#__PURE__*/_jsx(Text, {
-      alignmentBaseline: alignmentBaseline,
-      dx: dx,
-      dy: dy,
-      fill: "transparent",
-      fontSize: fontSize,
-      fontWeight: fontWeight,
-      onLayout: onLayout,
-      opacity: 0,
-      textAnchor: textAnchor,
-      children: children
     })]
   });
 });

package/esm/chart/text/{SmartChartTextGroup.js → ChartTextGroup.js}

@@ -2,7 +2,7 @@ const _excluded = ["onDimensionsChange"];
 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 { memo, useEffect, useMemo, useState } from 'react';
-import { G } from 'react-native-svg';
+import { Group } from '@shopify/react-native-skia';
 import { ChartText } from './ChartText';
 
 /**
@@ -32,12 +32,13 @@ const EPSILON_PX = 0.5;
  *
  * The component focuses solely on overlap prevention logic for better separation of concerns.
  */
-export const SmartChartTextGroup = /*#__PURE__*/memo(_ref => {
+export const ChartTextGroup = /*#__PURE__*/memo(_ref => {
   let {
     labels,
     minGap = 8,
     prioritizeEndLabels = true,
-    chartTextProps
+    chartTextProps,
+    LabelComponent = ChartText
   } = _ref;
   const [boundingBoxes, setBoundingBoxes] = useState(new Map());
   const _ref2 = chartTextProps != null ? chartTextProps : {},
@@ -193,11 +194,11 @@ export const SmartChartTextGroup = /*#__PURE__*/memo(_ref => {
     }
     return new Set(greedy);
   }, [isReady, boundingBoxes, minGap, prioritizeEndLabels, labelsWithKeys]);
-  return /*#__PURE__*/_jsx(G, {
+  return /*#__PURE__*/_jsx(Group, {
     children: labelsWithKeys.map(labelData => {
       const hasMeasurement = boundingBoxes.has(labelData.key);
       const isVisible = hasMeasurement && isReady && (visibleKeySet == null ? void 0 : visibleKeySet.has(labelData.key));
-      return /*#__PURE__*/_jsx(ChartText, _extends({
+      return /*#__PURE__*/_jsx(LabelComponent, _extends({
         opacity: isVisible ? 1 : 0,
         x: labelData.x,
         y: labelData.y

package/esm/chart/text/index.js

@@ -1,4 +1,4 @@
 // codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
 export * from './ChartText';
-export * from './SmartChartTextGroup';
+export * from './ChartTextGroup';
 // codegen:end

package/esm/chart/utils/axis.js

@@ -3,10 +3,41 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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 { useCallback, useMemo, useState } from 'react';
 import { getChartDomain, getChartRange, isValidBounds } from './chart';
+import { getPointOnScale } from './point';
 import { getCategoricalScale, getNumericScale, isCategoricalScale, isNumericScale } from './scale';
 export const defaultAxisId = 'DEFAULT_AXIS_ID';
 export const defaultAxisScaleType = 'linear';
 
+/**
+ * Position options for band scale axis elements (grid lines, tick marks, labels).
+ *
+ * - `'start'` - At the start of each step (before bar padding)
+ * - `'middle'` - At the center of each band
+ * - `'end'` - At the end of each step (after bar padding)
+ * - `'edges'` - At start of each tick, plus end for the last tick (encloses the chart)
+ *
+ * @note These properties only apply when using a band scale (`scaleType: 'band'`).
+ */
+
+/**
+ * Converts an AxisBandPlacement to the corresponding PointAnchor for use with getPointOnScale.
+ *
+ * @param placement - The axis placement value
+ * @returns The corresponding PointAnchor for scale calculations
+ */
+export const toPointAnchor = placement => {
+  switch (placement) {
+    case 'edges': // edges uses stepStart for each tick, stepEnd handled separately
+    case 'start':
+      return 'stepStart';
+    case 'end':
+      return 'stepEnd';
+    case 'middle':
+    default:
+      return 'middle';
+  }
+};
+
 /**
  * Axis configuration with computed bounds
  */
@@ -52,7 +83,7 @@ export const getAxisScale = _ref => {
       max: (_config$domain$max = config.domain.max) != null ? _config$domain$max : dataDomain.max
     };
   }
-  if (!isValidBounds(adjustedDomain)) throw new Error('Invalid domain bounds. See https://cds.coinbase.com/http://localhost:3000/components/graphs/XAxis/#domain');
+  if (!isValidBounds(adjustedDomain)) throw new Error('Invalid domain bounds. See https://cds.coinbase.com/components/charts/XAxis/#domain');
   if (scaleType === 'band') {
     var _config$categoryPaddi;
     return getCategoricalScale({
@@ -106,7 +137,7 @@ export const getAxisConfig = function (type, axes, defaultId, defaultScaleType)
       } = _ref2;
       return id === undefined;
     })) {
-      throw new Error('When defining multiple axes, each must have a unique id. See https://cds.coinbase.com/components/graphs/YAxis/#multiple-y-axes.');
+      throw new Error('When defining multiple axes, each must have a unique id. See https://cds.coinbase.com/components/charts/YAxis/#multiple-y-axes.');
     }
     return axes.map(_ref3 => {
       let {
@@ -457,6 +488,7 @@ const generateEvenlyDistributedTicks = (scale, tickInterval, possibleTickValues,
  * // Returns tick positions centered in each selected band
  */
 export const getAxisTicksData = _ref4 => {
+  var _options$anchor;
   let {
     ticks,
     scaleFunction,
@@ -466,53 +498,37 @@ export const getAxisTicksData = _ref4 => {
     tickInterval,
     options
   } = _ref4;
+  const anchor = (_options$anchor = options == null ? void 0 : options.anchor) != null ? _options$anchor : 'middle';
+
   // Handle band scales
   if (isCategoricalScale(scaleFunction)) {
+    const bandScale = scaleFunction;
+
     // If explicit ticks are provided as array, use them
     if (Array.isArray(ticks)) {
-      return ticks.filter(index => index >= 0 && index < categories.length).map(index => {
-        var _bandwidth;
-        // Band scales expect numeric indices, not category strings
-        const position = scaleFunction(index);
-        if (position === undefined) return null;
-        return {
-          tick: index,
-          position: position + ((_bandwidth = scaleFunction.bandwidth == null ? void 0 : scaleFunction.bandwidth()) != null ? _bandwidth : 0) / 2
-        };
-      }).filter(Boolean);
+      return ticks.filter(index => index >= 0 && index < categories.length).map(index => ({
+        tick: index,
+        position: getPointOnScale(index, bandScale, anchor)
+      }));
     }
 
     // If a tick function is provided, use it to filter
     if (typeof ticks === 'function') {
       return categories.map((category, index) => {
-        var _bandwidth2;
         if (!ticks(index)) return null;
-
-        // Band scales expect numeric indices, not category strings
-        const position = scaleFunction(index);
-        if (position === undefined) return null;
         return {
           tick: index,
-          position: position + ((_bandwidth2 = scaleFunction.bandwidth == null ? void 0 : scaleFunction.bandwidth()) != null ? _bandwidth2 : 0) / 2
+          position: getPointOnScale(index, bandScale, anchor)
         };
       }).filter(Boolean);
     }
-    if (typeof ticks === 'boolean' && !ticks) {
-      return [];
-    }
 
     // For band scales without explicit ticks, show all categories
     // requestedTickCount is ignored for categorical scales - use ticks parameter to control visibility
-    return categories.map((category, index) => {
-      var _bandwidth3;
-      // Band scales expect numeric indices, not category strings
-      const position = scaleFunction(index);
-      if (position === undefined) return null;
-      return {
-        tick: index,
-        position: position + ((_bandwidth3 = scaleFunction.bandwidth == null ? void 0 : scaleFunction.bandwidth()) != null ? _bandwidth3 : 0) / 2
-      };
-    }).filter(Boolean);
+    return categories.map((_, index) => ({
+      tick: index,
+      position: getPointOnScale(index, bandScale, anchor)
+    }));
   }
 
   // Handle numeric scales