@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

package/esm/chart/axis/XAxis.js

@@ -1,256 +0,0 @@
-const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height", "bandGridLinePlacement", "bandTickMarkPlacement"];
-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, useCallback, useEffect, useId, useMemo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Group } from '@shopify/react-native-skia';
-import { useCartesianChartContext } from '../ChartProvider';
-import { DottedLine } from '../line/DottedLine';
-import { SolidLine } from '../line/SolidLine';
-import { ChartText } from '../text/ChartText';
-import { ChartTextGroup } from '../text/ChartTextGroup';
-import { getAxisTicksData, getPointOnScale, isCategoricalScale, lineToPath, toPointAnchor } from '../utils';
-import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AXIS_HEIGHT = 32;
-const LABEL_SIZE = 20;
-export const XAxis = /*#__PURE__*/memo(_ref => {
-  let {
-      axisId,
-      position = 'bottom',
-      showGrid,
-      requestedTickCount,
-      ticks,
-      tickLabelFormatter,
-      TickLabelComponent = DefaultAxisTickLabel,
-      GridLineComponent = DottedLine,
-      LineComponent = SolidLine,
-      TickMarkLineComponent = SolidLine,
-      tickMarkLabelGap = 2,
-      minTickLabelGap = 4,
-      showTickMarks,
-      showLine,
-      tickMarkSize = 4,
-      tickInterval = 32,
-      tickMinStep = 1,
-      tickMaxStep,
-      label,
-      labelGap = 4,
-      height = label ? AXIS_HEIGHT + LABEL_SIZE : AXIS_HEIGHT,
-      bandGridLinePlacement = 'edges',
-      bandTickMarkPlacement = 'middle'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const theme = useTheme();
-  const registrationId = useId();
-  const {
-    animate,
-    drawingArea,
-    layout,
-    getXScale,
-    getXAxis,
-    registerAxis,
-    unregisterAxis,
-    getAxisBounds
-  } = useCartesianChartContext();
-  const xScale = getXScale(axisId);
-  const xAxis = getXAxis(axisId);
-  const axisBounds = getAxisBounds(registrationId);
-  useEffect(() => {
-    registerAxis(registrationId, position, height);
-    return () => unregisterAxis(registrationId);
-  }, [registrationId, registerAxis, unregisterAxis, position, height]);
-  const formatTick = useCallback(value => {
-    var _tickLabelFormatter;
-    // If we have string labels and no custom formatter, use the labels
-    const axisData = xAxis == null ? void 0 : xAxis.data;
-    const hasStringLabels = axisData && Array.isArray(axisData) && typeof axisData[0] === 'string';
-    if (hasStringLabels && !tickLabelFormatter && axisData[value] !== undefined) {
-      return axisData[value];
-    }
-
-    // Otherwise passes raw index to formatter
-    return (_tickLabelFormatter = tickLabelFormatter == null ? void 0 : tickLabelFormatter(value)) != null ? _tickLabelFormatter : value;
-  }, [xAxis == null ? void 0 : xAxis.data, tickLabelFormatter]);
-  const ticksData = useMemo(() => {
-    if (!xScale) return [];
-
-    // Check if we have string labels
-    const axisData = xAxis == null ? void 0 : xAxis.data;
-    const hasStringLabels = axisData && Array.isArray(axisData) && typeof axisData[0] === 'string';
-
-    // For band scales, we need categories
-    let categories;
-    if (hasStringLabels) {
-      categories = axisData;
-    } else if (isCategoricalScale(xScale)) {
-      // For band scales without explicit string data, generate numeric categories
-      // based on the domain of the scale
-      const domain = xScale.domain();
-      categories = domain.map(String);
-    }
-    return getAxisTicksData({
-      scaleFunction: xScale,
-      ticks,
-      requestedTickCount: requestedTickCount != null ? requestedTickCount : layout === 'horizontal' ? 5 : undefined,
-      categories,
-      possibleTickValues: axisData && Array.isArray(axisData) && typeof axisData[0] === 'string' ? Array.from({
-        length: axisData.length
-      }, (_, i) => i) : undefined,
-      tickInterval: tickInterval,
-      options: {
-        minStep: tickMinStep,
-        maxStep: tickMaxStep
-      }
-    });
-  }, [ticks, xScale, requestedTickCount, tickInterval, tickMinStep, tickMaxStep, xAxis == null ? void 0 : xAxis.data, layout]);
-  const isBandScale = useMemo(() => {
-    if (!xScale) return false;
-    return isCategoricalScale(xScale);
-  }, [xScale]);
-
-  // Compute grid line positions (including bounds closing line for band scales)
-  const gridLinePositions = useMemo(() => {
-    if (!xScale) return [];
-    return ticksData.flatMap((tick, index) => {
-      if (!isBandScale) {
-        return [{
-          x: tick.position,
-          key: "grid-" + tick.tick + "-" + index
-        }];
-      }
-      const bandScale = xScale;
-      const isLastTick = index === ticksData.length - 1;
-      const isEdges = bandGridLinePlacement === 'edges';
-      const startX = getPointOnScale(tick.tick, bandScale, toPointAnchor(bandGridLinePlacement));
-      const positions = [{
-        x: startX,
-        key: "grid-" + tick.tick + "-" + index
-      }];
-
-      // For edges on last tick, add the closing line at stepEnd
-      if (isLastTick && isEdges) {
-        const endX = getPointOnScale(tick.tick, bandScale, 'stepEnd');
-        positions.push({
-          x: endX,
-          key: "grid-" + tick.tick + "-" + index + "-end"
-        });
-      }
-      return positions;
-    });
-  }, [ticksData, xScale, isBandScale, bandGridLinePlacement]);
-
-  // Compute tick mark positions (including bounds closing tick for band scales)
-  const tickMarkPositions = useMemo(() => {
-    if (!xScale) return [];
-    return ticksData.flatMap((tick, index) => {
-      if (!isBandScale) {
-        return [{
-          x: tick.position,
-          key: "tick-mark-" + tick.tick + "-" + index
-        }];
-      }
-      const bandScale = xScale;
-      const isLastTick = index === ticksData.length - 1;
-      const isEdges = bandTickMarkPlacement === 'edges';
-      const startX = getPointOnScale(tick.tick, bandScale, toPointAnchor(bandTickMarkPlacement));
-      const positions = [{
-        x: startX,
-        key: "tick-mark-" + tick.tick + "-" + index
-      }];
-
-      // For edges on last tick, add the closing tick mark at stepEnd
-      if (isLastTick && isEdges) {
-        const endX = getPointOnScale(tick.tick, bandScale, 'stepEnd');
-        positions.push({
-          x: endX,
-          key: "tick-mark-" + tick.tick + "-" + index + "-end"
-        });
-      }
-      return positions;
-    });
-  }, [ticksData, xScale, isBandScale, bandTickMarkPlacement]);
-  const chartTextData = useMemo(() => {
-    if (!axisBounds) return null;
-    return ticksData.map(tick => {
-      const tickOffset = tickMarkLabelGap + (showTickMarks ? tickMarkSize : 0);
-
-      // Use AXIS_HEIGHT for centering, not full axisBounds.height
-      // This ensures tick labels are centered in the axis area, not including label space
-      const availableSpace = AXIS_HEIGHT - tickOffset;
-      const labelOffset = availableSpace / 2;
-      const labelY = position === 'top' ? axisBounds.y + axisBounds.height - tickOffset - labelOffset : axisBounds.y + labelOffset + tickOffset;
-      return {
-        x: tick.position,
-        y: labelY,
-        label: String(formatTick(tick.tick)),
-        chartTextProps: {
-          color: theme.color.fgMuted,
-          verticalAlignment: 'middle',
-          horizontalAlignment: 'center'
-        }
-      };
-    });
-  }, [axisBounds, ticksData, theme.color.fgMuted, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick]);
-  if (!xScale || !axisBounds) return;
-  const labelX = axisBounds.x + axisBounds.width / 2;
-  const labelY = position === 'bottom' ? axisBounds.y + axisBounds.height - LABEL_SIZE / 2 : axisBounds.y + LABEL_SIZE / 2;
-
-  // Pre-compute tick mark Y coordinates
-  const tickYTop = axisBounds.y;
-  const tickYBottom = axisBounds.y + axisBounds.height;
-  const tickYStart = position === 'bottom' ? tickYTop : tickYBottom;
-  const tickYEnd = position === 'bottom' ? tickYTop + tickMarkSize : tickYBottom - tickMarkSize;
-
-  // Note: Unlike web, mobile renders grid lines and tick marks immediately without fade animation.
-  // This is because Skia can measure text dimensions synchronously, so there's no need to hide
-  // elements while waiting for measurements (web uses async ResizeObserver).
-  return /*#__PURE__*/_jsxs(Group, {
-    children: [showGrid && /*#__PURE__*/_jsx(Group, {
-      children: gridLinePositions.map(_ref2 => {
-        let {
-          x,
-          key
-        } = _ref2;
-        return /*#__PURE__*/_jsx(GridLineComponent, {
-          animate: false,
-          clipPath: null,
-          d: lineToPath(x, drawingArea.y, x, drawingArea.y + drawingArea.height),
-          stroke: theme.color.bgLine
-        }, key);
-      })
-    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
-      prioritizeEndLabels: true,
-      LabelComponent: TickLabelComponent,
-      labels: chartTextData,
-      minGap: minTickLabelGap
-    }), axisBounds && showTickMarks && /*#__PURE__*/_jsx(Group, {
-      children: tickMarkPositions.map(_ref3 => {
-        let {
-          x,
-          key
-        } = _ref3;
-        return /*#__PURE__*/_jsx(TickMarkLineComponent, {
-          animate: false,
-          clipPath: null,
-          d: lineToPath(x, tickYStart, x, tickYEnd),
-          stroke: theme.color.fg,
-          strokeCap: "square",
-          strokeWidth: 1
-        }, key);
-      })
-    }), showLine && /*#__PURE__*/_jsx(LineComponent, {
-      animate: false,
-      clipPath: null,
-      d: lineToPath(axisBounds.x, position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height, axisBounds.x + axisBounds.width, position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height),
-      stroke: theme.color.fg,
-      strokeCap: "square",
-      strokeWidth: 1
-    }), label && /*#__PURE__*/_jsx(ChartText, {
-      horizontalAlignment: "center",
-      verticalAlignment: "middle",
-      x: labelX,
-      y: labelY,
-      children: label
-    })]
-  });
-});

package/esm/chart/axis/YAxis.js

@@ -1,255 +0,0 @@
-const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width", "bandGridLinePlacement", "bandTickMarkPlacement"];
-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, useCallback, useEffect, useId, useMemo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Group, vec } from '@shopify/react-native-skia';
-import { useCartesianChartContext } from '../ChartProvider';
-import { DottedLine } from '../line/DottedLine';
-import { SolidLine } from '../line/SolidLine';
-import { ChartText } from '../text/ChartText';
-import { ChartTextGroup } from '../text/ChartTextGroup';
-import { getAxisTicksData, getPointOnScale, isCategoricalScale, lineToPath, toPointAnchor } from '../utils';
-import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AXIS_WIDTH = 44;
-const LABEL_SIZE = 20;
-export const YAxis = /*#__PURE__*/memo(_ref => {
-  let {
-      axisId,
-      position = 'right',
-      showGrid,
-      requestedTickCount,
-      ticks,
-      tickLabelFormatter,
-      TickLabelComponent = DefaultAxisTickLabel,
-      GridLineComponent = DottedLine,
-      LineComponent = SolidLine,
-      TickMarkLineComponent = SolidLine,
-      tickMarkLabelGap = 8,
-      minTickLabelGap = 0,
-      showTickMarks,
-      showLine,
-      tickMarkSize = 4,
-      tickInterval,
-      label,
-      labelGap = 4,
-      width = label ? AXIS_WIDTH + LABEL_SIZE : AXIS_WIDTH,
-      bandGridLinePlacement = 'edges',
-      bandTickMarkPlacement = 'middle'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const theme = useTheme();
-  const registrationId = useId();
-  const {
-    animate,
-    drawingArea,
-    layout,
-    getYScale,
-    getYAxis,
-    registerAxis,
-    unregisterAxis,
-    getAxisBounds
-  } = useCartesianChartContext();
-  const yScale = getYScale(axisId);
-  const yAxis = getYAxis(axisId);
-  const axisBounds = getAxisBounds(registrationId);
-  useEffect(() => {
-    registerAxis(registrationId, position, width);
-    return () => unregisterAxis(registrationId);
-  }, [registrationId, registerAxis, unregisterAxis, position, width]);
-  const formatTick = useCallback(value => {
-    var _tickLabelFormatter;
-    // If we have string labels and no custom formatter, use the labels
-    const axisData = yAxis == null ? void 0 : yAxis.data;
-    const hasStringLabels = axisData && Array.isArray(axisData) && typeof axisData[0] === 'string';
-    if (hasStringLabels && !tickLabelFormatter && axisData[value] !== undefined) {
-      // Use the string label from the data array
-      return axisData[value];
-    }
-
-    // Otherwise use the formatter (if provided) or the value itself
-    return (_tickLabelFormatter = tickLabelFormatter == null ? void 0 : tickLabelFormatter(value)) != null ? _tickLabelFormatter : value;
-  }, [yAxis == null ? void 0 : yAxis.data, tickLabelFormatter]);
-
-  // Use D3 to get the ticks data
-  // Result contains each tick value and its axis position
-  const ticksData = useMemo(() => {
-    if (!yScale) return [];
-
-    // Check if we have string labels
-    const axisData = yAxis == null ? void 0 : yAxis.data;
-    const hasStringLabels = axisData && Array.isArray(axisData) && typeof axisData[0] === 'string';
-
-    // For band scales, we need categories
-    let categories;
-    if (hasStringLabels) {
-      categories = axisData;
-    } else if (isCategoricalScale(yScale)) {
-      // For band scales without explicit string data, generate numeric categories
-      // based on the domain of the scale
-      const domain = yScale.domain();
-      categories = domain.map(String);
-    }
-
-    // For numeric data or no explicit data, use default tick generation
-    return getAxisTicksData({
-      scaleFunction: yScale,
-      ticks,
-      requestedTickCount: tickInterval !== undefined ? undefined : requestedTickCount != null ? requestedTickCount : layout === 'horizontal' ? undefined : 5,
-      categories,
-      possibleTickValues: axisData && Array.isArray(axisData) && typeof axisData[0] === 'number' ? axisData : undefined,
-      tickInterval: tickInterval
-    });
-  }, [ticks, yScale, requestedTickCount, tickInterval, yAxis == null ? void 0 : yAxis.data, layout]);
-  const isBandScale = useMemo(() => {
-    if (!yScale) return false;
-    return isCategoricalScale(yScale);
-  }, [yScale]);
-
-  // Compute grid line positions (including bounds closing line for band scales)
-  const gridLinePositions = useMemo(() => {
-    if (!yScale) return [];
-    return ticksData.flatMap((tick, index) => {
-      if (!isBandScale) {
-        return [{
-          y: tick.position,
-          key: "grid-" + tick.tick + "-" + index
-        }];
-      }
-      const bandScale = yScale;
-      const isLastTick = index === ticksData.length - 1;
-      const isEdges = bandGridLinePlacement === 'edges';
-      const startY = getPointOnScale(tick.tick, bandScale, toPointAnchor(bandGridLinePlacement));
-      const positions = [{
-        y: startY,
-        key: "grid-" + tick.tick + "-" + index
-      }];
-
-      // For edges on last tick, add the closing line at stepEnd
-      if (isLastTick && isEdges) {
-        const endY = getPointOnScale(tick.tick, bandScale, 'stepEnd');
-        positions.push({
-          y: endY,
-          key: "grid-" + tick.tick + "-" + index + "-end"
-        });
-      }
-      return positions;
-    });
-  }, [ticksData, yScale, isBandScale, bandGridLinePlacement]);
-
-  // Compute tick mark positions (including bounds closing tick for band scales)
-  const tickMarkPositions = useMemo(() => {
-    if (!yScale) return [];
-    return ticksData.flatMap((tick, index) => {
-      if (!isBandScale) {
-        return [{
-          y: tick.position,
-          key: "tick-mark-" + tick.tick + "-" + index
-        }];
-      }
-      const bandScale = yScale;
-      const isLastTick = index === ticksData.length - 1;
-      const isEdges = bandTickMarkPlacement === 'edges';
-      const startY = getPointOnScale(tick.tick, bandScale, toPointAnchor(bandTickMarkPlacement));
-      const positions = [{
-        y: startY,
-        key: "tick-mark-" + tick.tick + "-" + index
-      }];
-
-      // For edges on last tick, add the closing tick mark at stepEnd
-      if (isLastTick && isEdges) {
-        const endY = getPointOnScale(tick.tick, bandScale, 'stepEnd');
-        positions.push({
-          y: endY,
-          key: "tick-mark-" + tick.tick + "-" + index + "-end"
-        });
-      }
-      return positions;
-    });
-  }, [ticksData, yScale, isBandScale, bandTickMarkPlacement]);
-  const chartTextData = useMemo(() => {
-    if (!axisBounds) return null;
-    return ticksData.map(tick => {
-      const tickOffset = tickMarkLabelGap + (showTickMarks ? tickMarkSize : 0);
-      const labelX = position === 'left' ? axisBounds.x + axisBounds.width - tickOffset : axisBounds.x + tickOffset;
-      return {
-        x: labelX,
-        y: tick.position,
-        label: String(formatTick(tick.tick)),
-        chartTextProps: {
-          color: theme.color.fgMuted,
-          verticalAlignment: 'middle',
-          horizontalAlignment: position === 'left' ? 'right' : 'left'
-        }
-      };
-    });
-  }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, theme.color.fgMuted]);
-  if (!yScale || !axisBounds) return;
-  const labelX = position === 'left' ? axisBounds.x + LABEL_SIZE / 2 : axisBounds.x + axisBounds.width - LABEL_SIZE / 2;
-  const labelY = axisBounds.y + axisBounds.height / 2;
-
-  // Pre-compute tick mark X coordinates
-  const tickXLeft = axisBounds.x;
-  const tickXRight = axisBounds.x + axisBounds.width;
-  const tickXStart = position === 'left' ? tickXRight : tickXLeft;
-  const tickXEnd = position === 'left' ? tickXRight - tickMarkSize : tickXLeft + tickMarkSize;
-
-  // Note: Unlike web, mobile renders grid lines and tick marks immediately without fade animation.
-  // This is because Skia can measure text dimensions synchronously, so there's no need to hide
-  // elements while waiting for measurements (web uses async ResizeObserver).
-  return /*#__PURE__*/_jsxs(Group, {
-    children: [showGrid && /*#__PURE__*/_jsx(Group, {
-      children: gridLinePositions.map(_ref2 => {
-        let {
-          y,
-          key
-        } = _ref2;
-        return /*#__PURE__*/_jsx(GridLineComponent, {
-          animate: false,
-          clipPath: null,
-          d: lineToPath(drawingArea.x, y, drawingArea.x + drawingArea.width, y),
-          stroke: theme.color.bgLine
-        }, key);
-      })
-    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
-      prioritizeEndLabels: true,
-      LabelComponent: TickLabelComponent,
-      labels: chartTextData,
-      minGap: minTickLabelGap
-    }), axisBounds && showTickMarks && /*#__PURE__*/_jsx(Group, {
-      children: tickMarkPositions.map(_ref3 => {
-        let {
-          y,
-          key
-        } = _ref3;
-        return /*#__PURE__*/_jsx(TickMarkLineComponent, {
-          animate: false,
-          clipPath: null,
-          d: lineToPath(tickXStart, y, tickXEnd, y),
-          stroke: theme.color.fg,
-          strokeCap: "square",
-          strokeWidth: 1
-        }, key);
-      })
-    }), showLine && /*#__PURE__*/_jsx(LineComponent, {
-      animate: false,
-      clipPath: null,
-      d: lineToPath(position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x, axisBounds.y, position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x, axisBounds.y + axisBounds.height),
-      stroke: theme.color.fg,
-      strokeCap: "square",
-      strokeWidth: 1
-    }), label && /*#__PURE__*/_jsx(Group, {
-      origin: vec(labelX, labelY),
-      transform: [{
-        rotate: position === 'left' ? -Math.PI / 2 : Math.PI / 2
-      }],
-      children: /*#__PURE__*/_jsx(ChartText, {
-        horizontalAlignment: "center",
-        verticalAlignment: "middle",
-        x: labelX,
-        y: labelY,
-        children: label
-      })
-    })]
-  });
-});