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

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.11",
   "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",