fixup! Fit the SwipeChart into its parent

Author: swansontec

src/components/charts/SwipeChart.tsx

@@ -147,9 +147,6 @@ const SwipeChartComponent = (params: Props) => {
   const [queryFromTimeOffset, setQueryFromTimeOffset] = React.useState(UNIX_SECONDS_MONTH_OFFSET)
   const [isLoading, setIsLoading] = React.useState(false)
 
-  const chartWidth = React.useRef(0)
-  const chartHeight = React.useRef(0)
-
   const fiatSymbol = React.useMemo(() => getFiatSymbol(fiatCurrencyCode), [fiatCurrencyCode])
 
   // Min/Max Price Calcs
@@ -158,9 +155,7 @@ const SwipeChartComponent = (params: Props) => {
   const maxPrice = Math.max(...prices)
 
   const sMinPriceLabelX = useSharedValue(0)
-  const sMinPriceLabelY = useSharedValue(0)
   const sMaxPriceLabelX = useSharedValue(0)
-  const sMaxPriceLabelY = useSharedValue(0)
 
   const sMinPriceString = useSharedValue(``)
   const sMaxPriceString = useSharedValue(``)
@@ -175,7 +170,8 @@ const SwipeChartComponent = (params: Props) => {
   // we measure the parent and pass that width in.
   // The chart will freeze the whole app if the width is too narrow,
   // so start with the window width:
-  const [width, setWidth] = React.useState(Dimensions.get('window').width)
+  const [chartWidth, setChartWidth] = React.useState(Dimensions.get('window').width)
+  const chartHeight = theme.rem(CHART_HEIGHT_REM)
 
   // Fetch/cache chart data, set shared animation transition values
   useAsyncEffect(
@@ -301,14 +297,15 @@ const SwipeChartComponent = (params: Props) => {
 
   // A delayed fadein for the max/min labels, to ensure the labels don't get
   // rendered before the price line. Also hidden when gesture is active
+  const minPriceLabelY = Platform.OS === 'ios' ? chartHeight - theme.rem(2.5) : chartHeight - theme.rem(2.75)
   const aMinLabelStyle = useAnimatedStyle(() => ({
     left: sMinPriceLabelX.value,
-    top: sMinPriceLabelY.value,
+    top: minPriceLabelY,
     opacity: sMinMaxOpacity.value * (1 - sCursorOpacity.value)
   }))
   const aMaxLabelStyle = useAnimatedStyle(() => ({
     left: sMaxPriceLabelX.value,
-    top: sMaxPriceLabelY.value,
+    top: 0,
     opacity: sMinMaxOpacity.value * (1 - sCursorOpacity.value)
   }))
 
@@ -355,7 +352,7 @@ const SwipeChartComponent = (params: Props) => {
   // #region Handlers
 
   const handleLayout = useHandler((event: LayoutChangeEvent) => {
-    setWidth(event.nativeEvent.layout.width)
+    setChartWidth(event.nativeEvent.layout.width)
   })
 
   const handleGradient = useHandler((props: GradientProps) => {
@@ -367,16 +364,6 @@ const SwipeChartComponent = (params: Props) => {
     )
   })
 
-  /**
-   * Handle the layout event on the chart, set the min price label Y value.
-   */
-  const handleSetChartDimensions = useHandler((event: LayoutChangeEvent) => {
-    const { width, height } = event.nativeEvent.layout
-    chartWidth.current = width
-    chartHeight.current = height
-    sMinPriceLabelY.value = Platform.OS === 'ios' ? chartHeight.current - theme.rem(2.5) : chartHeight.current - theme.rem(2.75)
-  })
-
   /**
    * Handle the tap and hold gesture event on the chart.
    *
@@ -438,7 +425,7 @@ const SwipeChartComponent = (params: Props) => {
   const setMinMaxLabelsX = (xSharedVal: SharedValue<number>, priceDatapoint?: ChartDataPoint) => (layoutChangeEvent: LayoutChangeEvent) => {
     if (layoutChangeEvent != null && layoutChangeEvent.nativeEvent != null && minPriceDataPoint != null && chartData != null && priceDatapoint != null) {
       const xIndex = chartData.indexOf(priceDatapoint)
-      const xPosition = (chartWidth.current / (chartData.length - 1)) * xIndex
+      const xPosition = (chartWidth / (chartData.length - 1)) * xIndex
       const labelWidth = layoutChangeEvent.nativeEvent.layout.width
       const isRightJustified = xPosition > chartData.length / 2
 
@@ -550,16 +537,16 @@ const SwipeChartComponent = (params: Props) => {
 
       {/* Chart */}
       {chartData.length === 0 || isLoading ? (
-        <View style={styles.loader} onLayout={handleSetChartDimensions}>
+        <View style={styles.loader}>
           <FillLoader />
         </View>
       ) : (
         <View>
           <SlideAreaChart
             data={chartData}
             animated
-            height={theme.rem(11)}
-            width={width}
+            height={theme.rem(CHART_HEIGHT_REM)}
+            width={chartWidth}
             chartLineColor={theme.iconTappable}
             chartLineWidth={1.5}
             renderFillGradient={handleGradient}
@@ -617,6 +604,8 @@ const SwipeChartComponent = (params: Props) => {
   // #endregion Components
 }
 
+const CHART_HEIGHT_REM = 11
+
 const getStyles = cacheStyles((theme: Theme) => {
   return {
     baseChart: {
@@ -644,7 +633,7 @@ const getStyles = cacheStyles((theme: Theme) => {
     },
     loader: {
       marginTop: theme.rem(0),
-      height: theme.rem(11)
+      height: theme.rem(CHART_HEIGHT_REM)
     },
     label: {
       color: theme.primaryText,