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

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
  */
@@ -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

package/esm/chart/utils/point.js

@@ -1,4 +1,4 @@
-import { applySerializableScale, isCategoricalScale, isLogScale, isNumericScale } from './scale';
+import { applyBandScale, applySerializableScale, isCategoricalScale, isLogScale, isNumericScale } from './scale';
 
 /**
  * Position a label should be placed relative to the point
@@ -10,19 +10,38 @@ import { applySerializableScale, isCategoricalScale, isLogScale, isNumericScale
 
 /**
  * Get a point from a data value and a scale.
- * @note for categorical scales, the point will be centered within the band.
- * @note for log scales, zero and negative values are clamped to a small positive value.
- * @param data - the data value.
- * @param scale - the scale function.
- * @returns the pixel value (defaulting to 0 if data value is not defined in scale).
+ *
+ * @param dataValue - The data value to convert to a pixel position.
+ * @param scale - The scale function.
+ * @param anchor (@default 'middle') - For band scales, where to anchor the point within the band.
+ * @returns The pixel value (@default 0 if data value is not defined in scale).
  */
-export const getPointOnScale = (dataValue, scale) => {
-  var _scale2;
+export const getPointOnScale = function (dataValue, scale, anchor) {
+  var _scale;
+  if (anchor === void 0) {
+    anchor = 'middle';
+  }
   if (isCategoricalScale(scale)) {
-    var _scale, _scale$bandwidth;
-    const bandStart = (_scale = scale(dataValue)) != null ? _scale : 0;
-    const bandwidth = (_scale$bandwidth = scale.bandwidth()) != null ? _scale$bandwidth : 0;
-    return bandStart + bandwidth / 2;
+    var _bandScale$bandwidth, _bandScale$step;
+    const bandScale = scale;
+    const bandStart = bandScale(dataValue);
+    if (bandStart === undefined) return 0;
+    const bandwidth = (_bandScale$bandwidth = bandScale.bandwidth == null ? void 0 : bandScale.bandwidth()) != null ? _bandScale$bandwidth : 0;
+    const step = (_bandScale$step = bandScale.step == null ? void 0 : bandScale.step()) != null ? _bandScale$step : bandwidth;
+    const paddingOffset = (step - bandwidth) / 2;
+    const stepStart = bandStart - paddingOffset;
+    switch (anchor) {
+      case 'stepStart':
+        return stepStart;
+      case 'bandStart':
+        return bandStart;
+      case 'middle':
+        return bandStart + bandwidth / 2;
+      case 'bandEnd':
+        return bandStart + bandwidth;
+      case 'stepEnd':
+        return stepStart + step;
+    }
   }
 
   // For log scales, ensure the value is positive
@@ -30,23 +49,47 @@ export const getPointOnScale = (dataValue, scale) => {
   if (isLogScale(scale) && dataValue <= 0) {
     adjustedValue = 0.001; // Use a small positive value for log scales
   }
-  return (_scale2 = scale(adjustedValue)) != null ? _scale2 : 0;
+  return (_scale = scale(adjustedValue)) != null ? _scale : 0;
 };
 
 /**
  * Get a point from a data value and a serializable scale (worklet-compatible).
- * @note for categorical scales, the point will be centered within the band.
- * @note for log scales, zero and negative values are clamped to a small positive value.
- * @param dataValue - the data value.
- * @param scale - the serializable scale object.
- * @returns the pixel value (defaulting to 0 if data value is not defined in scale).
+ *
+ * @param dataValue - The data value to convert to a pixel position.
+ * @param scale - The serializable scale function.
+ * @param anchor (@default 'middle') - For band scales, where to anchor the point within the band.
+ * @returns The pixel value (@default 0 if data value is not defined in scale).
  */
-export function getPointOnSerializableScale(dataValue, scale) {
+export function getPointOnSerializableScale(dataValue, scale, anchor) {
   'worklet';
 
+  // Handle band scales with the specified position
+  if (anchor === void 0) {
+    anchor = 'middle';
+  }
   if (scale.type === 'band') {
-    const bandStart = applySerializableScale(dataValue, scale);
-    return bandStart + scale.bandwidth / 2;
+    const bandScale = scale;
+    const [domainMin, domainMax] = bandScale.domain;
+    const index = dataValue - domainMin;
+    const n = domainMax - domainMin + 1;
+    if (index < 0 || index >= n) {
+      return 0;
+    }
+    const bandStart = applyBandScale(dataValue, bandScale);
+    const paddingOffset = (bandScale.step - bandScale.bandwidth) / 2;
+    const stepStart = bandStart - paddingOffset;
+    switch (anchor) {
+      case 'stepStart':
+        return stepStart;
+      case 'bandStart':
+        return bandStart;
+      case 'middle':
+        return bandStart + bandScale.bandwidth / 2;
+      case 'bandEnd':
+        return bandStart + bandScale.bandwidth;
+      case 'stepEnd':
+        return stepStart + bandScale.step;
+    }
   }
 
   // For log scales, ensure the value is positive

package/esm/chart/utils/scale.js

@@ -53,10 +53,21 @@ export const getCategoricalScale = _ref2 => {
   const domainArray = Array.from({
     length: domain.max - domain.min + 1
   }, (_, i) => i);
-  const scale = scaleBand().domain(domainArray).range([range.min, range.max]).padding(padding);
+  const scale = scaleBand().domain(domainArray).range([range.min, range.max]).paddingInner(padding).paddingOuter(padding / 2);
   return scale;
 };
 
+/**
+ * Anchor position for points on a scale. Currently used only for band scales.
+ *
+ * For band scales, this determines where within the band to position a point:
+ * - `'stepStart'` - At the start of the step
+ * - `'bandStart'` - At the start of the band
+ * - `'middle'` - At the center of the band
+ * - `'bandEnd'` - At the end of the band
+ * - `'stepEnd'` - At the end of the step
+ */
+
 /**
  * Convert a D3 scale to a serializable scale configuration that can be used in worklets
  */
@@ -176,7 +187,7 @@ export function applyBandScale(value, scale) {
   if (index < 0 || index >= n) {
     return r0;
   }
-  const paddingOffset = step - scale.bandwidth;
+  const paddingOffset = (step - scale.bandwidth) / 2;
   const bandStart = r0 + step * index + paddingOffset;
   return bandStart;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.10",
+  "version": "3.4.0-beta.12",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
@@ -36,9 +36,9 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.35.1",
+    "@coinbase/cds-common": "^8.36.2",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.35.1",
+    "@coinbase/cds-mobile": "^8.36.2",
     "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "^1.12.4 || ^2.0.0",
     "react": "^18.3.1",
@@ -57,9 +57,9 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.35.1",
+    "@coinbase/cds-common": "^8.36.2",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.35.1",
+    "@coinbase/cds-mobile": "^8.36.2",
     "@coinbase/cds-utils": "^2.3.5",
     "@figma/code-connect": "^1.3.4",
     "@shopify/react-native-skia": "1.12.4",