fix: max min point normalization for multiline

Fixed a bug where union min/max of the series were not being used to draw the lines on the multiline charts. This made it so that all input points were touching the top and bottom of the graph, even though the series' y-values did not match. Now, we introduced a global minY/maxY value to interpolate all lines against.

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(() => {