fix: max min point normalization for multiline

Highlights:
- Before, we weren't considering a global min/max of all the points to
  interpolate all of the series against. Now, we will compute the global
  max/mins based on the points, and interpolate all the series against
  them.

Author: e-younan

example/ios/Podfile.lock

@@ -131,17 +131,17 @@ PODS:
     - libavif/core
   - libevent (2.1.12)
   - libvmaf (2.3.1)
-  - libwebp (1.3.2):
-    - libwebp/demux (= 1.3.2)
-    - libwebp/mux (= 1.3.2)
-    - libwebp/sharpyuv (= 1.3.2)
-    - libwebp/webp (= 1.3.2)
-  - libwebp/demux (1.3.2):
+  - libwebp (1.5.0):
+    - libwebp/demux (= 1.5.0)
+    - libwebp/mux (= 1.5.0)
+    - libwebp/sharpyuv (= 1.5.0)
+    - libwebp/webp (= 1.5.0)
+  - libwebp/demux (1.5.0):
     - libwebp/webp
-  - libwebp/mux (1.3.2):
+  - libwebp/mux (1.5.0):
     - libwebp/demux
-  - libwebp/sharpyuv (1.3.2)
-  - libwebp/webp (1.3.2):
+  - libwebp/sharpyuv (1.5.0)
+  - libwebp/webp (1.5.0):
     - libwebp/sharpyuv
   - RCT-Folly (2022.05.16.00):
     - boost
@@ -1490,7 +1490,7 @@ SPEC CHECKSUMS:
   libavif: 84bbb62fb232c3018d6f1bab79beea87e35de7b7
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   libvmaf: 27f523f1e63c694d14d534cd0fddd2fab0ae8711
-  libwebp: 1786c9f4ff8a279e4dac1e8f385004d5fc253009
+  libwebp: 02b23773aedb6ff1fd38cec7a77b81414c6842a8
   RCT-Folly: 7169b2b1c44399c76a47b5deaaba715eeeb476c0
   RCTRequired: ab7f915c15569f04a49669e573e6e319a53f9faa
   RCTTypeSafety: 63b97ced7b766865057e7154db0e81ce4ee6cf1e

src/components/MultiLineChart/InteractiveMultiLineChart.tsx

@@ -32,7 +32,7 @@ export const InteractiveMultiLineChart = <Data extends Record<string, [number, n
   ...viewProps
 }: MultiLineChartProps<Data, false>) => {
   const [layoutComputed, setLayoutComputed] = useState(false);
-  const { height, width, setCanvasSize } = useMultiLineChartContext();
+  const { height, width, minY, maxY, setCanvasSize } = useMultiLineChartContext();
 
   const gestures = useGestures({
     points,
@@ -73,6 +73,8 @@ export const InteractiveMultiLineChart = <Data extends Record<string, [number, n
                         ...c.props,
                         width,
                         height,
+                        minValue: minY,
+                        maxValue: maxY,
                       });
                     });
                   }
@@ -81,6 +83,8 @@ export const InteractiveMultiLineChart = <Data extends Record<string, [number, n
                     ...invokedChildren.props,
                     width,
                     height,
+                    minValue: minY,
+                    maxValue: maxY,
                   });
                 })()}
 

src/components/MultiLineChart/Line.tsx

@@ -16,6 +16,8 @@ interface LineProps extends Pick<PathProps, "children" | "color" | "strokeWidth"
   height?: number;
   strokeWidth?: number;
   curveType?: ComputePathProps["curveType"];
+  minValue?: number;
+  maxValue?: number;
 }
 
 export const Line: React.FC<LineProps> = ({
@@ -24,14 +26,24 @@ export const Line: React.FC<LineProps> = ({
   height = 0,
   strokeWidth = 2,
   curveType = "linear",
+  minValue,
+  maxValue,
   ...pathProps
 }) => {
   const data = useMemo(() => {
     return computeGraphData(points);
   }, [points]);
 
   const path = useMemo(() => {
-    return computePath({ ...data, width, height, cursorRadius: 0, curveType });
+    return computePath({
+      ...data,
+      width,
+      height,
+      cursorRadius: 0,
+      curveType,
+      minValue: minValue ?? data.minValue,
+      maxValue: maxValue ?? data.maxValue,
+    });
   }, [data, width, height, curveType]);
 
   return <Path style="stroke" strokeWidth={strokeWidth} color="gray" {...pathProps} path={path} />;

src/components/MultiLineChart/MultiLineChart.tsx

@@ -27,7 +27,7 @@ export const MultiLineChart = <
   ...props
 }: MultiLineChartProps<Data, Static>) => {
   return (
-    <MultiLineChartProvider>
+    <MultiLineChartProvider points={props.points}>
       {/* <StaticMultiLineChart {...props} /> */}
       {isStatic ? (
         <StaticMultiLineChart isStatic {...props} />

src/components/MultiLineChart/StaticMultiLineChart.tsx

@@ -13,7 +13,7 @@ export const StaticMultiLineChart = <Data extends Record<string, [number, number
   ...viewProps
 }: MultiLineChartProps<Data, true>) => {
   const [layoutComputed, setLayoutComputed] = useState(false);
-  const { height, width, setCanvasSize } = useMultiLineChartContext();
+  const { height, width, minY, maxY, setCanvasSize } = useMultiLineChartContext();
 
   const onLayout = useCallback((e: LayoutChangeEvent) => {
     // Batch the updates to avoid unnecessary re-renders
@@ -44,6 +44,8 @@ export const StaticMultiLineChart = <Data extends Record<string, [number, number
                       ...c.props,
                       width,
                       height,
+                      minValue: minY,
+                      maxValue: maxY,
                     });
                   });
                 }
@@ -52,6 +54,8 @@ export const StaticMultiLineChart = <Data extends Record<string, [number, number
                   ...invokedChildren.props,
                   width,
                   height,
+                  minValue: minY,
+                  maxValue: maxY,
                 });
               })()}
         </Canvas>

src/components/MultiLineChart/context.tsx

@@ -1,38 +1,43 @@
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
 import { LayoutRectangle } from "react-native";
 
 interface MultiLineChartContextState {
   width: number;
   height: number;
   setCanvasSize: React.Dispatch<React.SetStateAction<LayoutRectangle>>;
+  minY: number;
+  maxY: number;
 }
 
 export const MultiLineChartContext = createContext<MultiLineChartContextState | undefined>(
   undefined
 );
 
 interface MultiLineChartProviderProps {
+  points: Record<string, [number, number][]>;
   width?: number;
   height?: number;
 }
 
 export const MultiLineChartProvider: React.FC<
   React.PropsWithChildren<MultiLineChartProviderProps>
-> = ({ children }) => {
+> = ({ points, children }) => {
   const [canvasSize, setCanvasSize] = useState<LayoutRectangle>({
     height: 0,
     width: 0,
     x: 0,
     y: 0,
   });
 
+  const { minY, maxY } = useMemo(() => {
+    const minY = Math.min(...Object.values(points).map((p) => Math.min(...p.map(([, y]) => y))));
+    const maxY = Math.max(...Object.values(points).map((p) => Math.max(...p.map(([, y]) => y))));
+    return { minY, maxY };
+  }, [points]);
+
   return (
     <MultiLineChartContext.Provider
-      value={{
-        width: canvasSize.width,
-        height: canvasSize.height,
-        setCanvasSize,
-      }}
+      value={{ width: canvasSize.width, height: canvasSize.height, setCanvasSize, minY, maxY }}
     >
       {children}
     </MultiLineChartContext.Provider>

src/components/MultiLineChart/useGestures.tsx

@@ -105,7 +105,7 @@ export const useGestures = <Data extends Record<string, [number, number][]>>({
   onPanGestureChange,
   onPanGestureEnd,
 }: UseGestureProps<Data>) => {
-  const { width } = useMultiLineChartContext();
+  const { width, minY, maxY } = useMultiLineChartContext();
 
   const graphData = useMemo(() => {
     return Object.entries(points).reduce(
@@ -122,11 +122,18 @@ export const useGestures = <Data extends Record<string, [number, number][]>>({
     const pathKeys = Object.keys(graphData) as (keyof Data)[];
     for (const key of pathKeys) {
       const value = graphData[key];
-      results[key] = computePath({ ...value, height, width, curveType });
+      results[key] = computePath({
+        ...value,
+        height,
+        width,
+        curveType,
+        minValue: minY, // We use the shared minimum value here since the minimum is shared across all lines
+        maxValue: maxY, // We use the shared maximum value here since the maximum is shared across all lines
+      });
     }
 
     return results;
-  }, [graphData, height, width, curveType]);
+  }, [graphData, height, width, curveType, minY, maxY]);
 
   const paths = useSharedValue<Record<keyof Data, SkPath>>(pathsJS);
   useEffect(() => {