@coinbase/cds-mobile-visualization 3.4.0-beta.9 → 3.4.0

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
  */
@@ -16,7 +47,7 @@ export const defaultAxisScaleType = 'linear';
  */
 
 /**
- * Gets a D3 scale based on the axis configuration.
+ * Gets a D3 scale based on the cartesian axis configuration.
  * Handles both numeric (linear/log) and categorical (band) scales.
  *
  * For numeric scales, the domain limit controls whether bounds are "nice" (human-friendly)
@@ -26,19 +57,27 @@ export const defaultAxisScaleType = 'linear';
  * @returns The D3 scale function
  * @throws An Error if bounds are invalid
  */
-export const getAxisScale = _ref => {
+export const getCartesianAxisScale = _ref => {
   var _config$scaleType;
   let {
     config,
     type,
     range,
-    dataDomain
+    dataDomain,
+    layout = 'vertical'
   } = _ref;
   const scaleType = (_config$scaleType = config == null ? void 0 : config.scaleType) != null ? _config$scaleType : 'linear';
   let adjustedRange = range;
 
-  // Invert range for Y axis for SVG coordinate system
-  if (type === 'y') {
+  // Determine if this axis needs range inversion for SVG coordinate system.
+  // SVG Y coordinates increase downward, so we need to invert for value axes
+  // where we want higher values at the top.
+  //
+  // For vertical layout: Y axis is the value axis -> invert (higher values at top)
+  // For horizontal layout: Y axis is the category axis -> don't invert (first category at top is natural)
+  // X axis never needs inversion (left-to-right is natural for both layouts)
+  const shouldInvertRange = type === 'y' && layout !== 'horizontal';
+  if (shouldInvertRange) {
     adjustedRange = {
       min: adjustedRange.max,
       max: adjustedRange.min
@@ -52,7 +91,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({
@@ -90,6 +129,8 @@ export const getAxisConfig = function (type, axes, defaultId, defaultScaleType)
     defaultScaleType = defaultAxisScaleType;
   }
   const defaultDomainLimit = type === 'x' ? 'strict' : 'nice';
+  const axisName = type === 'x' ? 'x-axis' : 'y-axis';
+  const axisDocUrl = type === 'x' ? 'https://cds.coinbase.com/components/charts/XAxis' : 'https://cds.coinbase.com/components/charts/YAxis';
   if (!axes) {
     return [{
       id: defaultId,
@@ -106,16 +147,27 @@ 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 " + axisName + ", each must have a unique id. See " + axisDocUrl + ".");
+    }
+    if (axesLength > 1) {
+      const ids = axes.map(_ref3 => {
+        let {
+          id
+        } = _ref3;
+        return id;
+      }).filter(id => id !== undefined);
+      if (new Set(ids).size !== ids.length) {
+        throw new Error("When defining multiple " + axisName + ", each must have a unique id. See " + axisDocUrl + ".");
+      }
     }
-    return axes.map(_ref3 => {
+    return axes.map(_ref4 => {
       let {
           id
-        } = _ref3,
-        axis = _objectWithoutPropertiesLoose(_ref3, _excluded);
+        } = _ref4,
+        axis = _objectWithoutPropertiesLoose(_ref4, _excluded);
       return _extends({
         // defaults the axis id if only a single axis is provided
-        id: axesLength > 1 ? id != null ? id : defaultAxisId : id,
+        id: axesLength > 1 ? id != null ? id : defaultAxisId : id != null ? id : defaultId,
         scaleType: defaultScaleType,
         domainLimit: defaultDomainLimit
       }, axis);
@@ -137,10 +189,14 @@ export const getAxisConfig = function (type, axes, defaultId, defaultScaleType)
  * @param axisParam - The axis configuration
  * @param series - Array of series objects (for stacking support)
  * @param axisType - Whether this is an 'x' or 'y' axis
+ * @param layout - The chart layout orientation
  * @returns The calculated axis bounds
  */
-export const getAxisDomain = (axisParam, series, axisType) => {
+export const getCartesianAxisDomain = function (axisParam, series, axisType, layout) {
   var _finalDomain$min, _finalDomain$max;
+  if (layout === void 0) {
+    layout = 'vertical';
+  }
   let dataDomain = null;
   if (axisParam.data && Array.isArray(axisParam.data) && axisParam.data.length > 0) {
     const firstItem = axisParam.data[0];
@@ -162,7 +218,10 @@ export const getAxisDomain = (axisParam, series, axisType) => {
   }
 
   // Calculate domain from series data
-  const seriesDomain = axisType === 'x' ? getChartDomain(series) : getChartRange(series);
+  // In vertical layout: X is category (index), Y is value (value)
+  // In horizontal layout: Y is category (index), X is value (value)
+  const isCategoryAxis = layout !== 'horizontal' && axisType === 'x' || layout === 'horizontal' && axisType === 'y';
+  const seriesDomain = isCategoryAxis ? getChartDomain(series) : getChartRange(series);
 
   // If data sets the domain, use that instead of the series domain
   const preferredDataDomain = dataDomain != null ? dataDomain : seriesDomain;
@@ -456,7 +515,8 @@ const generateEvenlyDistributedTicks = (scale, tickInterval, possibleTickValues,
  * });
  * // Returns tick positions centered in each selected band
  */
-export const getAxisTicksData = _ref4 => {
+export const getAxisTicksData = _ref5 => {
+  var _options$anchor;
   let {
     ticks,
     scaleFunction,
@@ -465,54 +525,38 @@ export const getAxisTicksData = _ref4 => {
     possibleTickValues,
     tickInterval,
     options
-  } = _ref4;
+  } = _ref5;
+  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