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

package/esm/chart/scrubber/ScrubberProvider.js

@@ -1,10 +1,11 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Platform } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import { runOnJS } from 'react-native-reanimated';
+import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
 import { Haptics } from '@coinbase/cds-mobile/utils/haptics';
 import { useCartesianChartContext } from '../ChartProvider';
-import { isCategoricalScale, ScrubberContext } from '../utils';
+import { invertSerializableScale, ScrubberContext } from '../utils';
+import { getPointOnSerializableScale } from '../utils/point';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A component which encapsulates the ScrubberContext.
@@ -22,25 +23,25 @@ export const ScrubberProvider = _ref => {
     throw new Error('ScrubberProvider must be used within a ChartContext');
   }
   const {
-    getXScale,
-    getXAxis,
-    series
+    getXSerializableScale,
+    getXAxis
   } = chartContext;
-  const [scrubberPosition, setScrubberPosition] = useState(undefined);
+  const scrubberPosition = useSharedValue(undefined);
+  const xAxis = useMemo(() => getXAxis(), [getXAxis]);
+  const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
   const getDataIndexFromX = useCallback(touchX => {
-    const xScale = getXScale();
-    const xAxis = getXAxis();
+    'worklet';
+
     if (!xScale || !xAxis) return 0;
-    if (isCategoricalScale(xScale)) {
-      var _ref2, _xScale$domain, _xScale$bandwidth;
-      const categories = (_ref2 = (_xScale$domain = xScale.domain == null ? void 0 : xScale.domain()) != null ? _xScale$domain : xAxis.data) != null ? _ref2 : [];
-      const bandwidth = (_xScale$bandwidth = xScale.bandwidth == null ? void 0 : xScale.bandwidth()) != null ? _xScale$bandwidth : 0;
+    if (xScale.type === 'band') {
+      const [domainMin, domainMax] = xScale.domain;
+      const categoryCount = domainMax - domainMin + 1;
       let closestIndex = 0;
       let closestDistance = Infinity;
-      for (let i = 0; i < categories.length; i++) {
-        const xPos = xScale(i);
+      for (let i = 0; i < categoryCount; i++) {
+        const xPos = getPointOnSerializableScale(i, xScale);
         if (xPos !== undefined) {
-          const distance = Math.abs(touchX - (xPos + bandwidth / 2));
+          const distance = Math.abs(touchX - xPos);
           if (distance < closestDistance) {
             closestDistance = distance;
             closestIndex = i;
@@ -58,7 +59,7 @@ export const ScrubberProvider = _ref => {
         let closestDistance = Infinity;
         for (let i = 0; i < numericData.length; i++) {
           const xValue = numericData[i];
-          const xPos = xScale(xValue);
+          const xPos = getPointOnSerializableScale(xValue, xScale);
           if (xPos !== undefined) {
             const distance = Math.abs(touchX - xPos);
             if (distance < closestDistance) {
@@ -70,62 +71,53 @@ export const ScrubberProvider = _ref => {
         return closestIndex;
       } else {
         var _domain$min, _domain$max;
-        const xValue = xScale.invert(touchX);
+        const xValue = invertSerializableScale(touchX, xScale);
         const dataIndex = Math.round(xValue);
         const domain = xAxis.domain;
         return Math.max((_domain$min = domain.min) != null ? _domain$min : 0, Math.min(dataIndex, (_domain$max = domain.max) != null ? _domain$max : 0));
       }
     }
-  }, [getXScale, getXAxis]);
-  const handlePositionUpdate = useCallback(x => {
-    if (!enableScrubbing || !series || series.length === 0) return;
-    const dataIndex = getDataIndexFromX(x);
-    if (dataIndex !== scrubberPosition) {
-      setScrubberPosition(dataIndex);
-      onScrubberPositionChange == null || onScrubberPositionChange(dataIndex);
-    }
-  }, [enableScrubbing, series, getDataIndexFromX, scrubberPosition, onScrubberPositionChange]);
-  const handleInteractionEnd = useCallback(() => {
-    if (!enableScrubbing) return;
-    setScrubberPosition(undefined);
-    onScrubberPositionChange == null || onScrubberPositionChange(undefined);
-  }, [enableScrubbing, onScrubberPositionChange]);
-
-  // Gesture handler callbacks
-  const handleOnStartJsThread = useCallback(() => {
+  }, [xAxis, xScale]);
+  const handleStartEndHaptics = useCallback(() => {
     void Haptics.lightImpact();
-    // Could add onScrubStart callback here if needed
   }, []);
-  const handleOnEndOrCancelledJsThread = useCallback(() => {
-    handleInteractionEnd();
-  }, [handleInteractionEnd]);
-  const handleOnUpdateJsThread = useCallback(x => {
-    handlePositionUpdate(x);
-  }, [handlePositionUpdate]);
-  const handleOnEndJsThread = useCallback(() => {
-    void Haptics.lightImpact();
-    handleOnEndOrCancelledJsThread();
-  }, [handleOnEndOrCancelledJsThread]);
+  useAnimatedReaction(() => scrubberPosition.value, (currentValue, previousValue) => {
+    // Confirm changes here and inside of our gesture handler before calling JS thread
+    // To prevent any rerenders
+    if (onScrubberPositionChange !== undefined && currentValue !== previousValue) {
+      runOnJS(onScrubberPositionChange)(currentValue);
+    }
+  }, [onScrubberPositionChange]);
 
   // Create the long press pan gesture
   const longPressGesture = useMemo(() => Gesture.Pan().activateAfterLongPress(110).shouldCancelWhenOutside(!allowOverflowGestures).onStart(function onStart(event) {
-    runOnJS(handleOnStartJsThread)();
+    runOnJS(handleStartEndHaptics)();
 
     // Android does not trigger onUpdate when the gesture starts. This achieves consistent behavior across both iOS and Android
     if (Platform.OS === 'android') {
-      runOnJS(handleOnUpdateJsThread)(event.x);
+      const newScrubberPosition = getDataIndexFromX(event.x);
+      if (newScrubberPosition !== scrubberPosition.value) {
+        scrubberPosition.value = newScrubberPosition;
+      }
     }
   }).onUpdate(function onUpdate(event) {
-    runOnJS(handleOnUpdateJsThread)(event.x);
+    const newScrubberPosition = getDataIndexFromX(event.x);
+    if (newScrubberPosition !== scrubberPosition.value) {
+      scrubberPosition.value = newScrubberPosition;
+    }
   }).onEnd(function onEnd() {
-    runOnJS(handleOnEndJsThread)();
+    if (enableScrubbing) {
+      runOnJS(handleStartEndHaptics)();
+      scrubberPosition.value = undefined;
+    }
   }).onTouchesCancelled(function onTouchesCancelled() {
-    runOnJS(handleOnEndOrCancelledJsThread)();
-  }), [allowOverflowGestures, handleOnStartJsThread, handleOnUpdateJsThread, handleOnEndJsThread, handleOnEndOrCancelledJsThread]);
+    if (enableScrubbing) {
+      scrubberPosition.value = undefined;
+    }
+  }), [allowOverflowGestures, handleStartEndHaptics, getDataIndexFromX, scrubberPosition, enableScrubbing]);
   const contextValue = useMemo(() => ({
     enableScrubbing: !!enableScrubbing,
-    scrubberPosition,
-    onScrubberPositionChange: setScrubberPosition
+    scrubberPosition
   }), [enableScrubbing, scrubberPosition]);
   const content = /*#__PURE__*/_jsx(ScrubberContext.Provider, {
     value: contextValue,

package/esm/chart/scrubber/index.js

@@ -1,2 +1,4 @@
-// Only export Scrubber component
+export * from './DefaultScrubberBeacon';
+export * from './DefaultScrubberBeaconLabel';
+export * from './DefaultScrubberLabel';
 export * from './Scrubber';

package/esm/chart/text/ChartText.js

@@ -1,11 +1,28 @@
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { G, Rect as SvgRect, Text } from 'react-native-svg';
+import { memo, useMemo } from 'react';
+import { runOnJS, useAnimatedReaction, useDerivedValue } from 'react-native-reanimated';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { FontSlant, FontWeight, Group, Paint, Paragraph, RoundedRect, Shadow, Skia, TextAlign } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
-import { getChartInset } from '../utils';
+import { getChartInset, getColorWithOpacity, unwrapAnimatedValue } from '../utils';
+
+/**
+ * Converts a fontWeight from Theme to a Skia FontWeight
+ * @note this only works when the fontWeight is a valid number (ie not 'bold')
+ * @param theme - The theme to use
+ * @param font - The font to use
+ * @returns The FontWeight or undefined if the fontWeight is not a valid number
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getFontWeight = (theme, font) => {
+  const themeFontWeight = theme.fontWeight[font];
+  const numericWeight = typeof themeFontWeight === 'string' ? Number(themeFontWeight) : themeFontWeight;
+  const validFontWeights = Object.values(FontWeight).filter(value => typeof value === 'number');
+  return numericWeight !== undefined && validFontWeights.includes(numericWeight) ? numericWeight : undefined;
+};
 
 /**
  * The supported content types for ChartText.
+ * Pass a string for simple text, or a SkParagraph for advanced rich text formatting.
  */
 
 /**
@@ -15,137 +32,156 @@ import { getChartInset } from '../utils';
 /**
  * Vertical alignment options for chart text.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Maps horizontal alignment to SVG textAnchor.
- * This abstraction allows us to provide a consistent alignment API across web and mobile platforms,
- * hiding the platform-specific SVG property differences.
- */
-const getTextAnchor = alignment => {
-  switch (alignment) {
-    case 'left':
-      return 'start';
-    case 'center':
-      return 'middle';
-    case 'right':
-      return 'end';
-  }
-};
 
-/**
- * Maps vertical alignment to SVG alignmentBaseline.
- * This abstraction allows us to provide a consistent alignment API across web and mobile platforms,
- * hiding the platform-specific SVG property differences.
- */
-const getAlignmentBaseline = alignment => {
-  switch (alignment) {
-    case 'top':
-      return 'hanging';
-    case 'middle':
-      return 'central';
-    case 'bottom':
-      return 'ideographic';
-  }
-};
-const ChartTextVisible = /*#__PURE__*/memo(_ref => {
-  let {
-    children,
-    background,
-    textAnchor,
-    alignmentBaseline,
-    fontSize,
-    fontWeight,
-    fill,
-    borderRadius,
-    inset: insetInput,
-    textDimensions,
-    dx,
-    dy
-  } = _ref;
-  const theme = useTheme();
-  const inset = useMemo(() => getChartInset(insetInput), [insetInput]);
-  const rectHeight = useMemo(() => textDimensions.height + inset.top + inset.bottom, [textDimensions, inset]);
-  const rectWidth = useMemo(() => textDimensions.width + inset.left + inset.right, [textDimensions, inset]);
-  return /*#__PURE__*/_jsxs(G, {
-    children: [background !== 'transparent' && /*#__PURE__*/_jsx(SvgRect, {
-      fill: background,
-      height: rectHeight,
-      rx: borderRadius,
-      ry: borderRadius,
-      width: rectWidth,
-      x: textDimensions.x - inset.left,
-      y: textDimensions.y - inset.top
-    }), /*#__PURE__*/_jsx(Text, {
-      alignmentBaseline: alignmentBaseline,
-      dx: dx,
-      dy: dy,
-      fill: fill != null ? fill : theme.color.fgMuted,
-      fontSize: fontSize,
-      fontWeight: fontWeight,
-      textAnchor: textAnchor,
-      children: children
-    })]
-  });
-});
-export const ChartText = /*#__PURE__*/memo(_ref2 => {
+export const ChartText = /*#__PURE__*/memo(_ref => {
+  var _elevationShadow$shad, _elevationShadow$shad2, _elevationShadow$shad3, _elevationShadow$shad4, _elevationShadow$shad5, _elevationShadow$shad6, _elevationShadow$shad7;
   let {
     children,
     x,
     y,
+    dx = 0,
+    dy = 0,
     horizontalAlignment = 'center',
     verticalAlignment = 'middle',
-    dx,
-    dy,
+    paragraphAlignment = TextAlign.Left,
     disableRepositioning = false,
     bounds,
-    testID,
-    fontSize = 12,
-    fontWeight,
     color,
-    background = 'transparent',
-    borderRadius,
+    background: backgroundProp,
+    borderRadius = 4,
     inset: insetInput,
     onDimensionsChange,
-    opacity = 1
-  } = _ref2;
+    opacity = 1,
+    fontFamilies,
+    font = 'label2',
+    fontSize,
+    fontWeight,
+    fontStyle: fontStyleProp = FontSlant.Upright,
+    elevated
+  } = _ref;
+  const theme = useTheme();
   const {
     width: chartWidth,
-    height: chartHeight
+    height: chartHeight,
+    fontFamilies: contextFontFamilies,
+    fontProvider
   } = useCartesianChartContext();
-  const textAnchor = useMemo(() => getTextAnchor(horizontalAlignment), [horizontalAlignment]);
-  const alignmentBaseline = useMemo(() => getAlignmentBaseline(verticalAlignment), [verticalAlignment]);
-  const fullChartBounds = useMemo(() => ({
-    x: 0,
-    y: 0,
-    width: chartWidth,
-    height: chartHeight
-  }), [chartWidth, chartHeight]);
-  const [textSize, setTextSize] = useState(null);
-  const textBBox = useMemo(() => {
-    if (!textSize) {
-      return null;
+  const inset = useMemo(() => getChartInset(insetInput), [insetInput]);
+  const background = backgroundProp != null ? backgroundProp : elevated ? theme.color.bgElevation1 : 'transparent';
+  const defaultParagraphStyle = useMemo(() => {
+    var _ref2;
+    return {
+      fontFamilies: (_ref2 = fontFamilies != null ? fontFamilies : contextFontFamilies) != null ? _ref2 : [],
+      fontSize: fontSize != null ? fontSize : theme.fontSize[font],
+      fontStyle: {
+        weight: fontWeight != null ? fontWeight : getFontWeight(theme, font),
+        slant: fontStyleProp
+      },
+      color: Skia.Color(color != null ? color : theme.color.fgMuted)
+    };
+  }, [fontFamilies, contextFontFamilies, fontSize, theme, font, fontWeight, fontStyleProp, color]);
+  const paragraph = useDerivedValue(() => {
+    const childrenValue = unwrapAnimatedValue(children);
+    if (typeof childrenValue !== 'string') {
+      return childrenValue;
     }
+    const builder = Skia.ParagraphBuilder.Make({
+      textAlign: TextAlign.Left
+    }, fontProvider);
+    builder.pushStyle(defaultParagraphStyle);
+    builder.addText(childrenValue);
+    builder.pop();
+    const para = builder.build();
+    para.layout(chartWidth);
+    return para;
+  }, [children, fontProvider, defaultParagraphStyle, chartWidth]);
+  const textDimensions = useDerivedValue(() => {
+    const unwrappedParagraph = paragraph.value;
+    if (!unwrappedParagraph) return {
+      width: 0,
+      height: 0
+    };
     return {
-      x: x + textSize.x,
-      y: y + textSize.y,
-      width: textSize.width,
-      height: textSize.height
+      width: unwrappedParagraph.getLongestLine(),
+      height: unwrappedParagraph.getHeight()
     };
-  }, [x, y, textSize]);
-  const isDimensionsReady = disableRepositioning || textBBox !== null;
-  const backgroundRectDimensions = useMemo(() => {
-    if (!textBBox) {
-      return null;
+  }, [paragraph]);
+  const backgroundRectSize = useDerivedValue(() => ({
+    width: textDimensions.value.width + inset.left + inset.right,
+    height: textDimensions.value.height + inset.top + inset.bottom
+  }), [textDimensions, inset]);
+
+  // Calculate background rect position based on alignment
+  const backgroundRect = useDerivedValue(() => {
+    const horAlignment = unwrapAnimatedValue(horizontalAlignment);
+    const verAlignment = unwrapAnimatedValue(verticalAlignment);
+    // By default the value is top left
+    let rectX = unwrapAnimatedValue(x);
+    let rectY = unwrapAnimatedValue(y);
+    const rectSize = backgroundRectSize.value;
+
+    // Adjust for horizontal alignment
+    switch (horAlignment) {
+      case 'center':
+        rectX = rectX - rectSize.width / 2;
+        break;
+      case 'right':
+        rectX = rectX - rectSize.width;
+        break;
+    }
+
+    // Adjust for vertical alignment
+    switch (verAlignment) {
+      case 'middle':
+        rectY = rectY - rectSize.height / 2;
+        break;
+      case 'bottom':
+        rectY = rectY - rectSize.height;
+        break;
     }
-    const inset = getChartInset(insetInput);
     return {
-      x: textBBox.x - inset.left,
-      y: textBBox.y - inset.top,
-      width: textBBox.width + inset.left + inset.right,
-      height: textBBox.height + inset.top + inset.bottom
+      x: rectX,
+      y: rectY,
+      width: rectSize.width,
+      height: rectSize.height
     };
-  }, [textBBox, insetInput]);
-  const overflowAmount = useMemo(() => {
+  }, [x, y, backgroundRectSize, horizontalAlignment, verticalAlignment]);
+
+  // Paragraph uses top-left positioning
+  const textPosition = useDerivedValue(() => {
+    const textDims = textDimensions.value;
+
+    // Calculate horizontal offset based on paragraph alignment
+    let horizontalOffset = 0;
+    switch (paragraphAlignment) {
+      case TextAlign.Center:
+        horizontalOffset = -textDims.width / 2;
+        break;
+      case TextAlign.Right:
+      case TextAlign.End:
+        horizontalOffset = -textDims.width;
+        break;
+      default:
+        // Left-aligned text needs no offset
+        horizontalOffset = 0;
+        break;
+    }
+    return {
+      x: backgroundRect.value.x + inset.left + horizontalOffset,
+      y: backgroundRect.value.y + inset.top,
+      width: textDims.width,
+      height: textDims.height
+    };
+  }, [backgroundRect, textDimensions, inset, paragraphAlignment]);
+
+  // Calculate overflow and repositioning
+  const fullChartBounds = useMemo(() => ({
+    x: 0,
+    y: 0,
+    width: chartWidth,
+    height: chartHeight
+  }), [chartWidth, chartHeight]);
+  const overflowAmount = useDerivedValue(() => {
     if (disableRepositioning) {
       return {
         x: 0,
@@ -153,85 +189,117 @@ export const ChartText = /*#__PURE__*/memo(_ref2 => {
       };
     }
     const parentBounds = bounds != null ? bounds : fullChartBounds;
-    if (!backgroundRectDimensions || !parentBounds || parentBounds.width <= 0 || parentBounds.height <= 0) {
+    if (!parentBounds || parentBounds.width <= 0 || parentBounds.height <= 0) {
       return {
         x: 0,
         y: 0
       };
     }
-    let x = 0;
-    let y = 0;
+    let offsetX = 0;
+    let offsetY = 0;
 
     // X-axis overflow
-    if (backgroundRectDimensions.x < parentBounds.x) {
-      x = parentBounds.x - backgroundRectDimensions.x; // positive = shift right
-    } else if (backgroundRectDimensions.x + backgroundRectDimensions.width > parentBounds.x + parentBounds.width) {
-      x = parentBounds.x + parentBounds.width - (backgroundRectDimensions.x + backgroundRectDimensions.width); // negative = shift left
+    if (backgroundRect.value.x < parentBounds.x) {
+      offsetX = parentBounds.x - backgroundRect.value.x;
+    } else if (backgroundRect.value.x + backgroundRect.value.width > parentBounds.x + parentBounds.width) {
+      offsetX = parentBounds.x + parentBounds.width - (backgroundRect.value.x + backgroundRect.value.width);
     }
 
     // Y-axis overflow
-    if (backgroundRectDimensions.y < parentBounds.y) {
-      y = parentBounds.y - backgroundRectDimensions.y; // positive = shift down
-    } else if (backgroundRectDimensions.y + backgroundRectDimensions.height > parentBounds.y + parentBounds.height) {
-      y = parentBounds.y + parentBounds.height - (backgroundRectDimensions.y + backgroundRectDimensions.height); // negative = shift up
+    if (backgroundRect.value.y < parentBounds.y) {
+      offsetY = parentBounds.y - backgroundRect.value.y;
+    } else if (backgroundRect.value.y + backgroundRect.value.height > parentBounds.y + parentBounds.height) {
+      offsetY = parentBounds.y + parentBounds.height - (backgroundRect.value.y + backgroundRect.value.height);
     }
     return {
-      x,
-      y
+      x: offsetX,
+      y: offsetY
     };
-  }, [backgroundRectDimensions, fullChartBounds, bounds, disableRepositioning]);
-  const reportedRect = useMemo(() => {
-    if (!backgroundRectDimensions) return null;
+  }, [backgroundRect, fullChartBounds, bounds, disableRepositioning]);
+
+  // Final adjusted positions
+  const backgroundRectWithOffset = useDerivedValue(() => {
+    const offsetX = unwrapAnimatedValue(dx);
+    const offsetY = unwrapAnimatedValue(dy);
     return {
-      x: backgroundRectDimensions.x + overflowAmount.x,
-      y: backgroundRectDimensions.y + overflowAmount.y,
-      width: backgroundRectDimensions.width,
-      height: backgroundRectDimensions.height
+      x: backgroundRect.value.x + overflowAmount.value.x + offsetX,
+      y: backgroundRect.value.y + overflowAmount.value.y + offsetY,
+      width: backgroundRect.value.width,
+      height: backgroundRect.value.height
     };
-  }, [backgroundRectDimensions, overflowAmount.x, overflowAmount.y]);
-  useEffect(() => {
-    if (onDimensionsChange && reportedRect !== null) {
-      onDimensionsChange(reportedRect);
+  }, [backgroundRect, overflowAmount, dx, dy]);
+  const textWithOffsetX = useDerivedValue(() => textPosition.value.x + overflowAmount.value.x + unwrapAnimatedValue(dx), [textPosition, overflowAmount, dx]);
+  const textWithOffsetY = useDerivedValue(() => textPosition.value.y + overflowAmount.value.y + unwrapAnimatedValue(dy), [textPosition, overflowAmount, dy]);
+  useAnimatedReaction(() => backgroundRectWithOffset.value, (rect, previous) => {
+    if (onDimensionsChange && rect !== previous) {
+      runOnJS(onDimensionsChange)(rect);
     }
-  }, [reportedRect, onDimensionsChange]);
-  const onLayout = useCallback(event => {
-    if (event.nativeEvent.layout.width > 0 && event.nativeEvent.layout.height > 0) {
-      setTextSize(event.nativeEvent.layout);
+  }, [onDimensionsChange]);
+
+  // Show group if we are ready
+  const groupOpacity = useDerivedValue(() => {
+    const textSize = textDimensions.value;
+    const hasValidContent = paragraph.value && textSize.width > 0 && textSize.height > 0;
+    return hasValidContent ? unwrapAnimatedValue(opacity) : 0;
+  }, [paragraph, textDimensions, opacity]);
+  const backgroundRectHeight = useDerivedValue(() => backgroundRectWithOffset.value.height, [backgroundRectWithOffset]);
+  const backgroundRectWidth = useDerivedValue(() => backgroundRectWithOffset.value.width, [backgroundRectWithOffset]);
+  const backgroundRectX = useDerivedValue(() => backgroundRectWithOffset.value.x, [backgroundRectWithOffset]);
+  const backgroundRectY = useDerivedValue(() => backgroundRectWithOffset.value.y, [backgroundRectWithOffset]);
+  const elevationShadow = elevated ? theme.shadow.elevation1 : undefined;
+
+  // Calculate the paragraph's internal x offset from line metrics based on text alignment
+  const paragraphTransform = useDerivedValue(() => {
+    if (!paragraph.value || !paragraphAlignment) return [];
+    const rects = paragraph.value.getLineMetrics();
+    if (rects.length === 0) return [];
+    let minOffset;
+    switch (paragraphAlignment) {
+      case TextAlign.Center:
+        // For center-aligned text, account for half the width
+        minOffset = Math.min(...rects.map(rect => rect.x - rect.width / 2));
+        break;
+      case TextAlign.Right:
+      case TextAlign.End:
+        // For right-aligned text, account for the full width
+        minOffset = Math.min(...rects.map(rect => rect.x - rect.width));
+        break;
+      default:
+        // For left-aligned text, use the x position directly
+        minOffset = Math.min(...rects.map(rect => rect.x));
+        break;
     }
-  }, []);
-  return /*#__PURE__*/_jsxs(G, {
-    opacity: isDimensionsReady ? opacity : 0,
-    children: [textSize && /*#__PURE__*/_jsx(G, {
-      transform: [{
-        translateX: x + overflowAmount.x
-      }, {
-        translateY: y + overflowAmount.y
-      }],
-      children: /*#__PURE__*/_jsx(ChartTextVisible, {
-        alignmentBaseline: alignmentBaseline,
-        background: background,
-        borderRadius: borderRadius,
-        dx: dx,
-        dy: dy,
-        fill: color,
-        fontSize: fontSize,
-        fontWeight: fontWeight,
-        inset: insetInput,
-        textAnchor: textAnchor,
-        textDimensions: textSize,
-        children: children
+    return [{
+      translateX: -minOffset
+    }];
+  }, [paragraph, paragraphAlignment]);
+
+  // Opacity on a group doesn't impact the paragraph so we need to apply it to Group
+  return /*#__PURE__*/_jsxs(Group, {
+    layer: /*#__PURE__*/_jsx(Paint, {
+      opacity: groupOpacity
+    }),
+    children: [background !== 'transparent' && /*#__PURE__*/_jsx(RoundedRect, {
+      color: background,
+      height: backgroundRectHeight,
+      r: borderRadius,
+      width: backgroundRectWidth,
+      x: backgroundRectX,
+      y: backgroundRectY,
+      children: elevationShadow && /*#__PURE__*/_jsx(Shadow, {
+        blur: Number((_elevationShadow$shad = elevationShadow.shadowRadius) != null ? _elevationShadow$shad : 0),
+        color: getColorWithOpacity(String((_elevationShadow$shad2 = elevationShadow.shadowColor) != null ? _elevationShadow$shad2 : '#000000'), Number((_elevationShadow$shad3 = elevationShadow.shadowOpacity) != null ? _elevationShadow$shad3 : 1)),
+        dx: Number((_elevationShadow$shad4 = (_elevationShadow$shad5 = elevationShadow.shadowOffset) == null ? void 0 : _elevationShadow$shad5.width) != null ? _elevationShadow$shad4 : 0),
+        dy: Number((_elevationShadow$shad6 = (_elevationShadow$shad7 = elevationShadow.shadowOffset) == null ? void 0 : _elevationShadow$shad7.height) != null ? _elevationShadow$shad6 : 0)
+      })
+    }), /*#__PURE__*/_jsx(Group, {
+      transform: paragraphTransform,
+      children: /*#__PURE__*/_jsx(Paragraph, {
+        paragraph: paragraph,
+        width: chartWidth,
+        x: textWithOffsetX,
+        y: textWithOffsetY
       })
-    }), /*#__PURE__*/_jsx(Text, {
-      alignmentBaseline: alignmentBaseline,
-      dx: dx,
-      dy: dy,
-      fill: "transparent",
-      fontSize: fontSize,
-      fontWeight: fontWeight,
-      onLayout: onLayout,
-      opacity: 0,
-      textAnchor: textAnchor,
-      children: children
     })]
   });
 });