@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

package/esm/chart/utils/path.js

@@ -1,304 +0,0 @@
-import { area as d3Area, curveBumpX, curveBumpY, curveCatmullRom, curveLinear, curveLinearClosed, curveMonotoneX, curveMonotoneY, curveNatural, curveStep, curveStepAfter, curveStepBefore, line as d3Line } from 'd3-shape';
-import { getPointOnScale, projectPoints } from './point';
-import { isCategoricalScale } from './scale';
-/**
- * Default enter transition for path-based components (Line, Area).
- * `{ type: 'timing', duration: 500 }`
- */
-export const defaultPathEnterTransition = {
-  type: 'timing',
-  duration: 500
-};
-/**
- * Get the d3 curve function for a path.
- * See https://d3js.org/d3-shape/curve
- * @param curve - The curve type. Defaults to 'linear'.
- * @param layout - The chart layout. Defaults to 'vertical'.
- * @returns The d3 curve function.
- */
-export const getPathCurveFunction = function (curve, layout) {
-  if (curve === void 0) {
-    curve = 'linear';
-  }
-  if (layout === void 0) {
-    layout = 'vertical';
-  }
-  switch (curve) {
-    case 'catmullRom':
-      return curveCatmullRom;
-    case 'monotone':
-      // For vertical layout, X is the independent axis (category/index), so use MonotoneX.
-      // For horizontal layout, Y is the independent axis (category/index), so use MonotoneY.
-      return layout !== 'horizontal' ? curveMonotoneX : curveMonotoneY;
-    case 'natural':
-      return curveNatural;
-    case 'step':
-      return curveStep;
-    case 'stepBefore':
-      return curveStepBefore;
-    case 'stepAfter':
-      return curveStepAfter;
-    case 'bump':
-      // For vertical layout, X is the independent axis (category/index), so use BumpX.
-      // For horizontal layout, Y is the independent axis (category/index), so use BumpY.
-      return layout !== 'horizontal' ? curveBumpX : curveBumpY;
-    case 'linearClosed':
-      return curveLinearClosed;
-    case 'linear':
-    default:
-      return curveLinear;
-  }
-};
-
-/**
- * Generates an SVG line path string from data using chart scale functions.
- *
- * @example
- * ```typescript
- * const chartScale = getChartScale({ chartRect, domain, range, xScale, yScale });
- * const path = getLinePath({ data: [1, 2, 3], chartScale, curve: 'linear' });
- * ```
- */
-export const getLinePath = _ref => {
-  var _pathGenerator;
-  let {
-    data,
-    curve = 'bump',
-    xScale,
-    yScale,
-    xData,
-    yData,
-    connectNulls = false,
-    layout = 'vertical'
-  } = _ref;
-  if (data.length === 0) {
-    return '';
-  }
-  const curveFunction = getPathCurveFunction(curve, layout);
-  const dataPoints = projectPoints({
-    data,
-    xScale,
-    yScale,
-    xData,
-    yData,
-    layout
-  });
-
-  // When connectNulls is true, filter out null values before rendering
-  // When false, use defined() to create gaps in the line
-  const filteredPoints = connectNulls ? dataPoints.filter(d => d !== null) : dataPoints;
-  const pathGenerator = d3Line().x(d => d.x).y(d => d.y).curve(curveFunction).defined(d => connectNulls || d !== null);
-  return (_pathGenerator = pathGenerator(filteredPoints)) != null ? _pathGenerator : '';
-};
-
-/**
- * Generates an SVG area path string from data using chart scale functions.
- * Supports both single values (area from baseline to value) and tuples ([baseline, value]).
- *
- * @example
- * ```typescript
- * // Single values - area from baseline to value
- * const area = getAreaPath({
- *   data: [1, 2, 3],
- *   xScale,
- *   yScale,
- * });
- *
- * // Range values - area from low to high
- * const rangeArea = getAreaPath({
- *   data: [[0, 3], [2, 4], [1, 5]],
- *   xScale,
- *   yScale,
- *   curve: 'monotone'
- * });
- * ```
- */
-export const getAreaPath = _ref2 => {
-  let {
-    data,
-    curve = 'bump',
-    xScale,
-    yScale,
-    xData,
-    yData,
-    connectNulls = false,
-    layout = 'vertical'
-  } = _ref2;
-  if (data.length === 0) {
-    return '';
-  }
-  const curveFunction = getPathCurveFunction(curve, layout);
-  const categoryAxisIsX = layout !== 'horizontal';
-
-  // Determine baseline from the value scale.
-  const valueScale = categoryAxisIsX ? yScale : xScale;
-  const domain = valueScale.domain();
-  const min = Math.min(...domain);
-  const normalizedData = data.map((item, index) => {
-    if (item === null) {
-      return null;
-    }
-    if (Array.isArray(item)) {
-      if (item.length >= 2 && typeof item[0] === 'number' && typeof item[1] === 'number') {
-        return [item[0], item[1]];
-      }
-      return null;
-    }
-    if (typeof item === 'number') {
-      return [min, item];
-    }
-    return null;
-  });
-  const dataPoints = normalizedData.map((range, index) => {
-    if (range === null) {
-      return {
-        x: 0,
-        y: 0,
-        low: null,
-        high: null,
-        isValid: false
-      };
-    }
-
-    // Determine the position along the independent (index/category) axis.
-    let indexValue = index;
-    const indexScale = categoryAxisIsX ? xScale : yScale;
-    const indexData = categoryAxisIsX ? xData : yData;
-    if (!isCategoricalScale(indexScale) && indexData && indexData[index] !== undefined) {
-      indexValue = indexData[index];
-    }
-    const position = getPointOnScale(indexValue, indexScale);
-    const low = getPointOnScale(range[0], valueScale);
-    const high = getPointOnScale(range[1], valueScale);
-    return {
-      x: categoryAxisIsX ? position : 0,
-      y: !categoryAxisIsX ? position : 0,
-      low,
-      high,
-      isValid: true
-    };
-  });
-
-  // When connectNulls is true, filter out invalid points before rendering
-  // When false, use defined() to create gaps in the area
-  const filteredPoints = connectNulls ? dataPoints.filter(d => d.isValid) : dataPoints;
-  const areaGenerator = d3Area();
-  if (categoryAxisIsX) {
-    areaGenerator.x(d => d.x).y0(d => {
-      var _d$low;
-      return (_d$low = d.low) != null ? _d$low : 0;
-    }).y1(d => {
-      var _d$high;
-      return (_d$high = d.high) != null ? _d$high : 0;
-    });
-  } else {
-    areaGenerator.y(d => d.y).x0(d => {
-      var _d$low2;
-      return (_d$low2 = d.low) != null ? _d$low2 : 0;
-    }).x1(d => {
-      var _d$high2;
-      return (_d$high2 = d.high) != null ? _d$high2 : 0;
-    });
-  }
-  areaGenerator.curve(curveFunction).defined(d => connectNulls || d.isValid && d.low != null && d.high != null);
-  const result = areaGenerator(filteredPoints);
-  return result != null ? result : '';
-};
-
-/**
- * Converts line coordinates to an SVG path string.
- * Useful for rendering axis lines and tick marks.
- *
- * @example
- * ```typescript
- * const path = lineToPath(0, 0, 100, 100);
- * // Returns: "M 0 0 L 100 100"
- * ```
- */
-export const lineToPath = (x1, y1, x2, y2) => {
-  return "M " + x1 + " " + y1 + " L " + x2 + " " + y2;
-};
-
-/**
- * Creates an SVG path string for a rectangle with selective corner rounding.
- * Useful for creating bars in charts with optional rounded corners.
- *
- * @example
- * ```typescript
- * // Simple rectangle bar
- * const barPath = getBarPath(10, 20, 50, 100, 0, false, false);
- *
- * // Bar with rounded top corners
- * const roundedPath = getBarPath(10, 20, 50, 100, 8, true, false);
- * ```
- */
-export const getBarPath = function (x, y, width, height, radius, roundTop, roundBottom, layout) {
-  if (layout === void 0) {
-    layout = 'vertical';
-  }
-  const isVerticalLayout = layout === 'vertical';
-  const roundBothSides = roundTop && roundBottom;
-  const r = Math.min(radius, width / 2, roundBothSides ? height / 2 : height);
-  const rTL = isVerticalLayout ? roundTop ? r : 0 : roundBottom ? r : 0;
-  const rTR = isVerticalLayout ? roundTop ? r : 0 : roundTop ? r : 0;
-  const rBR = isVerticalLayout ? roundBottom ? r : 0 : roundTop ? r : 0;
-  const rBL = isVerticalLayout ? roundBottom ? r : 0 : roundBottom ? r : 0;
-
-  // Build path with selective rounding
-  let path = "M " + (x + rTL) + " " + y;
-  path += " L " + (x + width - rTR) + " " + y;
-  path += " A " + rTR + " " + rTR + " 0 0 1 " + (x + width) + " " + (y + rTR);
-  path += " L " + (x + width) + " " + (y + height - rBR);
-  path += " A " + rBR + " " + rBR + " 0 0 1 " + (x + width - rBR) + " " + (y + height);
-  path += " L " + (x + rBL) + " " + (y + height);
-  path += " A " + rBL + " " + rBL + " 0 0 1 " + x + " " + (y + height - rBL);
-  path += " L " + x + " " + (y + rTL);
-  path += " A " + rTL + " " + rTL + " 0 0 1 " + (x + rTL) + " " + y;
-  path += ' Z';
-  return path;
-};
-
-/**
- * Generates an SVG path string with circles arranged in a dotted pattern within a bounding area.
- * Creates circles at regular intervals based on the pattern size and dot size parameters.
- *
- * @param bounds - The bounding rectangle to fill with dots
- * @param patternSize - Size of the pattern unit (spacing between dots)
- * @param dotSize - Radius of each dot
- * @returns SVG path string containing all the circles
- *
- * @example
- * ```typescript
- * const dotsPath = getDottedAreaPath(
- *   { x: 0, y: 0, width: 100, height: 50 },
- *   8, // 8px spacing
- *   2  // 2px radius dots
- * );
- * ```
- */
-export const getDottedAreaPath = (bounds, patternSize, dotSize) => {
-  if (bounds.width <= 0 || bounds.height <= 0 || patternSize <= 0 || dotSize <= 0) {
-    return '';
-  }
-  let path = '';
-
-  // Calculate the number of dots that fit in each dimension
-  const dotsX = Math.ceil(bounds.width / patternSize);
-  const dotsY = Math.ceil(bounds.height / patternSize);
-
-  // Generate circles in a grid pattern
-  for (let row = 0; row < dotsY; row++) {
-    for (let col = 0; col < dotsX; col++) {
-      const centerX = bounds.x + col * patternSize + patternSize / 2;
-      const centerY = bounds.y + row * patternSize + patternSize / 2;
-
-      // Only draw dots that are within the bounds
-      if (centerX >= bounds.x && centerX <= bounds.x + bounds.width && centerY >= bounds.y && centerY <= bounds.y + bounds.height) {
-        // Create circle using SVG arc commands
-        // M cx,cy-r a r,r 0 1,0 0,2r a r,r 0 1,0 0,-2r
-        path += "M " + centerX + "," + (centerY - dotSize) + " a " + dotSize + "," + dotSize + " 0 1,0 0," + dotSize * 2 + " a " + dotSize + "," + dotSize + " 0 1,0 0," + -dotSize * 2 + " ";
-      }
-    }
-  }
-  return path.trim();
-};

package/esm/chart/utils/point.js

@@ -1,282 +0,0 @@
-import { applyBandScale, applySerializableScale, isCategoricalScale, isLogScale } from './scale';
-
-/**
- * Position a label should be placed relative to the point
- *
- * @example
- * 'top' would have the label be located above the point itself,
- * and thus the vertical alignment of that text would be bottom.
- */
-
-/**
- * Get a point from a data value and a 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 = function (dataValue, scale, anchor) {
-  var _scale;
-  if (anchor === void 0) {
-    anchor = 'middle';
-  }
-  if (isCategoricalScale(scale)) {
-    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
-  let adjustedValue = dataValue;
-  if (isLogScale(scale) && dataValue <= 0) {
-    adjustedValue = 0.001; // Use a small positive value for log scales
-  }
-  return (_scale = scale(adjustedValue)) != null ? _scale : 0;
-};
-
-/**
- * Get a point from a data value and a serializable scale (worklet-compatible).
- *
- * @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, anchor) {
-  'worklet';
-
-  // Handle band scales with the specified position
-  if (anchor === void 0) {
-    anchor = 'middle';
-  }
-  if (scale.type === 'band') {
-    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
-  if (scale.type === 'log' && dataValue <= 0) {
-    dataValue = 0.001; // Use a small positive value for log scales
-  }
-  return applySerializableScale(dataValue, scale);
-}
-
-/**
- * Projects a single data point to pixel coordinates using serializable scales.
- * This is the worklet-compatible version for use in react-native-reanimated.
- */
-export function projectPointWithSerializableScale(_ref) {
-  'worklet';
-
-  let {
-    x,
-    y,
-    xScale,
-    yScale
-  } = _ref;
-  return {
-    x: getPointOnSerializableScale(x, xScale),
-    y: getPointOnSerializableScale(y, yScale)
-  };
-}
-
-/**
- * Projects a data point to pixel coordinates using the chart scale.
- * Automatically handles log scale transformations for zero/negative values.
- *
- * @example
- * ```typescript
- * const chartScale = getChartScale({ chartRect, domain, range, xScale, yScale });
- * const pixelCoord = projectPoint({ x: 5, y: 10, chartScale });
- * ```
- * @example
- * ```typescript
- * const chartScale = getChartScale({ chartRect, domain, range, xScale, yScale });
- * const pixelCoord = projectPoint({ x: 2, y: 10, chartScale, xData: ['Jan', 'Feb', 'Mar'] });
- * ```
- */
-export const projectPoint = _ref2 => {
-  let {
-    x,
-    y,
-    xScale,
-    yScale
-  } = _ref2;
-  return {
-    x: getPointOnScale(x, xScale),
-    y: getPointOnScale(y, yScale)
-  };
-};
-
-/**
- * Projects multiple data points to pixel coordinates using chart scale functions.
- * Handles both numeric and band scales automatically.
- *
- * @example
- * ```typescript
- * const chartScale = getChartScale({ chartRect, domain, range, xScale, yScale });
- * const pixelPoints = projectPoints({ data, chartScale });
- * // For mixed scales
- * const pixelPoints = projectPoints({ data, chartScale, xData: ['Jan', 'Feb', 'Mar'] });
- * ```
- */
-export const projectPoints = _ref3 => {
-  let {
-    data,
-    xScale,
-    yScale,
-    xData,
-    yData,
-    layout = 'vertical'
-  } = _ref3;
-  if (data.length === 0) {
-    return [];
-  }
-  return data.map((value, index) => {
-    if (value === null) {
-      return null;
-    }
-    if (typeof value === 'object' && 'x' in value && 'y' in value) {
-      return projectPoint({
-        x: value.x,
-        y: value.y,
-        xScale,
-        yScale
-      });
-    }
-
-    // Determine values/scales based on role (index vs value) and layout.
-    const categoryAxisIsX = layout !== 'horizontal';
-    const indexScale = categoryAxisIsX ? xScale : yScale;
-    const indexData = categoryAxisIsX ? xData : yData;
-
-    // 1. Calculate position along the index axis (categorical or numeric domain).
-    let indexValue = index;
-    if (!isCategoricalScale(indexScale)) {
-      if (indexData && Array.isArray(indexData) && indexData.length > 0) {
-        if (typeof indexData[0] === 'number') {
-          var _indexData$index;
-          indexValue = (_indexData$index = indexData[index]) != null ? _indexData$index : index;
-        }
-      }
-    }
-
-    // 2. Calculate position along the value axis (measured magnitude).
-    const valueAsNumber = value;
-
-    // 3. Project final coordinates based on layout.
-    if (categoryAxisIsX) {
-      return projectPoint({
-        x: indexValue,
-        y: valueAsNumber,
-        xScale,
-        yScale
-      });
-    }
-    return projectPoint({
-      x: valueAsNumber,
-      y: indexValue,
-      xScale,
-      yScale
-    });
-  });
-};
-
-/**
- * Determines text alignment based on label position.
- * For example, a 'top' position needs the text aligned to the 'bottom' so it appears above the point.
- */
-export const getAlignmentFromPosition = position => {
-  let horizontalAlignment = 'center';
-  let verticalAlignment = 'middle';
-  switch (position) {
-    case 'top':
-      verticalAlignment = 'bottom';
-      break;
-    case 'bottom':
-      verticalAlignment = 'top';
-      break;
-    case 'left':
-      horizontalAlignment = 'right';
-      break;
-    case 'right':
-      horizontalAlignment = 'left';
-      break;
-    case 'center':
-    default:
-      horizontalAlignment = 'center';
-      verticalAlignment = 'middle';
-      break;
-  }
-  return {
-    horizontalAlignment,
-    verticalAlignment
-  };
-};
-
-/**
- * Calculates the final label coordinates by applying offset based on position.
- */
-export const getLabelCoordinates = (x, y, position, offset) => {
-  let dx = 0;
-  let dy = 0;
-  switch (position) {
-    case 'top':
-      dy = -offset;
-      break;
-    case 'bottom':
-      dy = offset;
-      break;
-    case 'left':
-      dx = -offset;
-      break;
-    case 'right':
-      dx = offset;
-      break;
-    case 'center':
-    default:
-      break;
-  }
-  return {
-    x: x + dx,
-    y: y + dy
-  };
-};