Refactor balance history graph to use dynamic width and daily granularity (#14106)

## Summary
This PR refactors the UserBalanceHistoryGraph component to dynamically
measure container width instead of accepting a fixed width prop, and
updates balance history queries to use daily granularity across both
mobile and web platforms.

## Key Changes
- **Dynamic Width Measurement**: Replaced the static `width` prop with
runtime layout measurement using `onLayout` callback on mobile, allowing
the graph to responsively adapt to its container
- **Layout State Management**: Added `containerWidth` state and
`handleLayout` callback to capture actual rendered dimensions before
chart rendering
- **Granularity Update**: Added `granularity: 'daily'` parameter to all
`useUserBalanceHistory` hook calls in both mobile and web
implementations
- **Tooltip Date Formatting**: Simplified `formatTooltipDate` function
to display date only (weekday short, month short, day) instead of
including time information
- **Prop Removal**: Removed `width` prop from `UserBalanceHistoryGraph`
and `AccountBalance` components, simplifying the component API
- **Render Guard**: Added early return to render empty Flex container
while waiting for layout measurement to complete

## Implementation Details
- Mobile implementation uses React Native's `LayoutChangeEvent` to
measure container width dynamically
- The chart only renders once `containerWidth > 0`, preventing layout
thrashing
- Web implementation maintains existing behavior while adopting the
daily granularity parameter
- All balance history queries now consistently use daily data
granularity for improved performance and consistency

https://claude.ai/code/session_01EP1m3UXR2bibGyXKUUUZqY

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: dylanjeffers

packages/mobile/src/components/account-balance/AccountBalance.tsx

@@ -11,7 +11,6 @@ import { Flex, Text, IconArrowRight, Paper, Box } from '@audius/harmony-native'
 import { UserBalanceHistoryGraph } from 'app/components/user-balance-history-graph'
 
 type AccountBalanceProps = {
-  width?: number
   height?: number
 }
 
@@ -28,16 +27,13 @@ const formatPercentage = (value: number): string => {
   return `${value.toFixed(2)}%`
 }
 
-export const AccountBalance = ({
-  width = 350,
-  height = 204
-}: AccountBalanceProps) => {
+export const AccountBalance = ({ height = 204 }: AccountBalanceProps) => {
   const { data: currentUserId } = useCurrentUserId()
   const {
     data: historyData,
     isLoading: isHistoryLoading,
     isError: isHistoryError
-  } = useUserBalanceHistory({ userId: currentUserId })
+  } = useUserBalanceHistory({ userId: currentUserId, granularity: 'daily' })
 
   const {
     totalBalance: currentBalance,
@@ -148,7 +144,7 @@ export const AccountBalance = ({
         </Flex>
       </Flex>
 
-      <UserBalanceHistoryGraph width={width} height={height} />
+      <UserBalanceHistoryGraph height={height} />
     </Paper>
   )
 }

packages/mobile/src/components/user-balance-history-graph/UserBalanceHistoryGraph.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import {
   useCurrentUserId,
@@ -7,7 +7,7 @@ import {
 } from '@audius/common/api'
 import { walletMessages } from '@audius/common/messages'
 import { convertHexToRGBA } from '@audius/common/utils'
-import { View } from 'react-native'
+import { type LayoutChangeEvent, View } from 'react-native'
 import { LineChart } from 'react-native-gifted-charts'
 import type { lineDataItem } from 'react-native-gifted-charts'
 
@@ -18,7 +18,6 @@ import { useNavigation } from 'app/hooks/useNavigation'
 const messages = walletMessages.balanceHistory
 
 type UserBalanceHistoryGraphProps = {
-  width?: number
   height?: number
 }
 
@@ -43,22 +42,25 @@ const formatShortCurrency = (value: number): string => {
 
 const formatTooltipDate = (timestamp: number): string => {
   const date = new Date(timestamp)
-  const weekday = date.toLocaleDateString('en-US', { weekday: 'long' })
-  const hour = date
-    .toLocaleTimeString('en-US', {
-      hour: 'numeric',
-      hour12: true
+  return date
+    .toLocaleDateString('en-US', {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric'
     })
-    .toLowerCase()
-  return `${weekday} ${hour}`.toUpperCase()
+    .toUpperCase()
 }
 
 export const UserBalanceHistoryGraph = ({
-  width = 350,
   height = 191
 }: UserBalanceHistoryGraphProps) => {
+  const [containerWidth, setContainerWidth] = useState(0)
   const { color, spacing } = useTheme()
   const navigation = useNavigation()
+
+  const handleLayout = useCallback((event: LayoutChangeEvent) => {
+    setContainerWidth(event.nativeEvent.layout.width)
+  }, [])
   useEffect(() => {
     navigation.setOptions({ fullScreenGestureEnabled: false })
     return () => {
@@ -73,7 +75,7 @@ export const UserBalanceHistoryGraph = ({
     data: historyDataFetched,
     isLoading: isHistoryLoading,
     isError: isHistoryError
-  } = useUserBalanceHistory({ userId: currentUserId })
+  } = useUserBalanceHistory({ userId: currentUserId, granularity: 'daily' })
 
   const {
     totalBalance: currentBalance,
@@ -179,6 +181,13 @@ export const UserBalanceHistoryGraph = ({
     return null
   }
 
+  // Wait for layout measurement before rendering the chart
+  if (containerWidth === 0) {
+    return (
+      <Flex pv='xs' onLayout={handleLayout} style={{ minHeight: height }} />
+    )
+  }
+
   const values = chartData.map((d) => d.value as number)
   // Safe to assert: we know chartData.length > 0 from check above
   const maxValue = Math.max(...values)
@@ -188,7 +197,7 @@ export const UserBalanceHistoryGraph = ({
   const chartHorizontalPadding = 48
   const chartInitialSpacing = 10
   const chartEndSpacing = 10
-  const chartWidth = Math.max(width - chartHorizontalPadding, 0)
+  const chartWidth = Math.max(containerWidth - chartHorizontalPadding, 0)
   const spacingBetweenPoints =
     chartData.length > 1
       ? Math.max(
@@ -206,7 +215,7 @@ export const UserBalanceHistoryGraph = ({
   }
 
   return (
-    <Flex pv='xs'>
+    <Flex pv='xs' onLayout={handleLayout}>
       <View>
         <LineChart
           data={chartData}

packages/web/src/components/account-balance/AccountBalance.tsx

@@ -129,7 +129,7 @@ const AccountBalanceContent = () => {
     data: historyData,
     isLoading: isHistoryLoading,
     isError: isHistoryError
-  } = useUserBalanceHistory({ userId: currentUserId })
+  } = useUserBalanceHistory({ userId: currentUserId, granularity: 'daily' })
 
   const {
     totalBalance: currentBalance,

packages/web/src/components/user-balance-history-graph/UserBalanceHistoryGraph.tsx

@@ -44,14 +44,11 @@ const formatDate = (timestamp: number): string => {
 
 const formatTooltipDate = (timestamp: number): string => {
   const date = new Date(timestamp)
-  const weekday = date.toLocaleDateString('en-US', { weekday: 'long' })
-  const hour = date
-    .toLocaleTimeString('en-US', {
-      hour: 'numeric',
-      hour12: true
-    })
-    .toLowerCase()
-  return `${weekday} ${hour}`
+  return date.toLocaleDateString('en-US', {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric'
+  })
 }
 
 const getChartData = (
@@ -232,7 +229,7 @@ export const UserBalanceHistoryGraph = () => {
     data: historyDataFetched,
     isLoading: isHistoryLoading,
     isError: isHistoryError
-  } = useUserBalanceHistory({ userId: currentUserId })
+  } = useUserBalanceHistory({ userId: currentUserId, granularity: 'daily' })
 
   const {
     totalBalance: currentBalance,