Replace instances of 'getTextWidth' with 'measureText' (#290)

Co-authored-by: Eli Zibin <1131641+zibs@users.noreply.github.com>
FormidableLabs · Jun 5, 2024 · 4cebc5f · 4cebc5f
1 parent 2b22f91
commit 4cebc5f
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/.changeset/serious-yaks-visit.md b/.changeset/serious-yaks-visit.md
@@ -0,0 +1,6 @@
+---
+"example": patch
+"victory-native": patch
+---
+
+Replace getTextWidth with measureText
diff --git a/example/app/stock-price.tsx b/example/app/stock-price.tsx
@@ -380,7 +380,7 @@ const ActiveValueIndicator = ({
     () => "$" + activeValue.value.toFixed(2),
   );
   const activeValueWidth = useDerivedValue(
-    () => font?.getTextWidth(activeValueDisplay.value) || 0,
+    () => font?.measureText(activeValueDisplay.value).width || 0,
   );
   const activeValueX = useDerivedValue(
     () => xPosition.value - activeValueWidth.value / 2,

diff --git a/lib/src/cartesian/components/CartesianAxis.tsx b/lib/src/cartesian/components/CartesianAxis.tsx
@@ -125,7 +125,7 @@ export const CartesianAxis = <
     : yScale.ticks(yTicks);
   const yAxisNodes = yTicksNormalized.map((tick) => {
     const contentY = formatYLabel(tick as never);
-    const labelWidth = font?.getTextWidth?.(contentY) ?? 0;
+    const labelWidth = font?.measureText?.(contentY).width ?? 0;
     const labelY = yScale(tick) + fontSize / 3;
     const labelX = (() => {
       // left, outset
@@ -178,7 +178,7 @@ export const CartesianAxis = <
   const xAxisNodes = xTicksNormalized.map((tick) => {
     const val = isNumericalData ? tick : ix[tick];
     const contentX = formatXLabel(val as never);
-    const labelWidth = font?.getTextWidth?.(contentX) ?? 0;
+    const labelWidth = font?.measureText?.(contentX).width ?? 0;
     const labelX = xScale(tick) - (labelWidth ?? 0) / 2;
     const canFitLabelContent =
       yAxisPosition === "left" ? labelX + labelWidth < x2r : x1r < labelX;

diff --git a/lib/src/cartesian/utils/transformInputData.ts b/lib/src/cartesian/utils/transformInputData.ts
@@ -183,7 +183,7 @@ export const transformInputData = <
   // Else, we find min / max of y values across all yKeys, and use that for y range instead.
   const ixMin = asNumber(domain?.x?.[0] ?? tickDomainsX?.[0] ?? ixNum.at(0)),
     ixMax = asNumber(domain?.x?.[1] ?? tickDomainsX?.[1] ?? ixNum.at(-1));
-  const topYLabelWidth = axisOptions?.font?.getTextWidth(topYLabel) ?? 0;
+  const topYLabelWidth = axisOptions?.font?.measureText(topYLabel).width ?? 0;
   // Determine our x-output range based on yAxis/label options
   const oRange: [number, number] = (() => {
     const yTickCount =