feat: add GeagueChart

Author: bufgix

App.tsx

@@ -1,6 +1,6 @@
 import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { RootStackNavigation } from "./src/navigation";
 import { NavigationContainer } from "@react-navigation/native";
+import { RootStackNavigation } from "./src/navigation";
 
 export default function App() {
   return (

bun.lockb

@@ -6,7 +6,10 @@
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "lint": "eslint . --ext .ts,.tsx --fix",
+    "tscheck": "tsc --noEmit",
+    "lint:control": "yarn tscheck && yarn lint"
   },
   "dependencies": {
     "@react-native-masked-view/masked-view": "0.2.9",
@@ -29,8 +32,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@papyonlab/eslint-config": "^1.0.1",
+    "@papyonlab/tsconfig": "^1.0.0",
     "@types/react": "~18.2.14",
     "typescript": "^5.1.3"
   },
-  "private": true
+  "private": false,
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@papyonlab/eslint-config/base"
+    ]
+  }
 }

package.json

@@ -2,8 +2,8 @@ import { StatusBar } from "expo-status-bar";
 import { StyleSheet, Text, TouchableOpacity } from "react-native";
 
 import { ScrollView } from "react-native-gesture-handler";
-import { useAppNavigation } from "./utils/useNavigation";
 import { SafeAreaView } from "react-native-safe-area-context";
+import { useAppNavigation } from "./utils/useNavigation";
 import { ComponentScreenList } from "./constants";
 
 export function ComoponentList() {
@@ -14,6 +14,7 @@ export function ComoponentList() {
       <ScrollView>
         {Object.keys(ComponentScreenList).map((name) => (
           <TouchableOpacity
+            accessibilityRole="button"
             key={name}
             style={styles.item}
             onPress={() => navgation.navigate(name as any)}

src/ComponentList.tsx

@@ -41,7 +41,7 @@ const polarToCartesian = (
   centerX: number,
   centerY: number,
   radius: number,
-  angleInDegrees: number
+  angleInDegrees: number,
 ) => {
   "worklet";
   const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
@@ -53,7 +53,7 @@ const polarToCartesian = (
 
 const moveNearestCirclePoint = (
   featureDot: { x: number; y: number; size: number },
-  circle: { x: number; y: number; size: number }
+  circle: { x: number; y: number; size: number },
 ) => {
   "worklet";
   const radius = featureDot.size + circle.size;
@@ -64,7 +64,7 @@ const moveNearestCirclePoint = (
     radius,
     (Math.atan2(circle.y - featureDot.y, circle.x - featureDot.x) * 180) /
       Math.PI +
-      90
+      90,
   );
 
   return pos;
@@ -156,7 +156,7 @@ function FeatureDot({
       SCREEN_WIDTH / 2,
       SCREEN_WIDTH / 2,
       dot.value.distance,
-      rotation
+      rotation,
     );
 
     return pos;
@@ -237,13 +237,13 @@ function Dot({
         SCREEN_WIDTH / 2,
         SCREEN_WIDTH / 2,
         featureDot.value.distance,
-        featureDot.value.angle + progress.value
+        featureDot.value.angle + progress.value,
       );
       const dotPos = polarToCartesian(
         SCREEN_WIDTH / 2,
         SCREEN_WIDTH / 2,
         distance - size,
-        angle
+        angle,
       );
 
       const pos = moveNearestCirclePoint(
@@ -256,21 +256,21 @@ function Dot({
           x: dotPos.x,
           y: dotPos.y,
           size: size,
-        }
+        },
       );
 
       return {
         x: interpolate(
           featureScaleMultiplier.value,
           [0, 1],
           [dotPos.x, pos.x],
-          Extrapolate.CLAMP
+          Extrapolate.CLAMP,
         ),
         y: interpolate(
           featureScaleMultiplier.value,
           [0, 1],
           [dotPos.y, pos.y],
-          Extrapolate.CLAMP
+          Extrapolate.CLAMP,
         ),
         size: interpolate(featureScaleMultiplier.value, [1, 0], [5, size]),
       };
@@ -279,7 +279,7 @@ function Dot({
         SCREEN_WIDTH / 2,
         SCREEN_WIDTH / 2,
         distance - size,
-        angle
+        angle,
       );
 
       return {
@@ -317,7 +317,7 @@ export function AppleLoading() {
   useEffect(() => {
     t.value = withRepeat(
       withTiming(360, { duration: 12000, easing: Easing.linear }),
-      -1
+      -1,
     );
     featureScaleMultiplier.value = withRepeat(
       withSequence(
@@ -326,17 +326,17 @@ export function AppleLoading() {
           withSpring(1, {
             damping: 50,
             stiffness: 100,
-          })
+          }),
         ),
         withDelay(
           1000,
           withSpring(0, { damping: 50, stiffness: 100 }, () => {
             featureIndex.value = (featureIndex.value + 4) % LAYERS[0].dotCount;
             runOnJS(setImage)(APPS[featureIndex.value % APPS.length]);
-          })
-        )
+          }),
+        ),
       ),
-      -1
+      -1,
     );
   }, []);
 

src/components/AppleLoading/AppleLoading.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useImperativeHandle } from "react";
+import { Dimensions, StyleSheet, View } from "react-native";
+import { Path, Svg } from "react-native-svg";
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withTiming,
+} from "react-native-reanimated";
+import { Neddle, NEDDLE_SIZE } from "./Neddle";
+
+import { polarToCartesian, segmentPath } from "./math";
+
+export const SIZE = Dimensions.get("window").width;
+const GAP = 10;
+const RADIUS = SIZE / 2 - GAP;
+const STROKE_WIDTH = 60;
+
+type GaugeItem = {
+  color: string;
+  value: number;
+};
+
+type Props = {
+  values: GaugeItem[];
+  value: number;
+};
+
+export type GaugeChartHandle = {
+  reRunAnimation: () => void;
+};
+
+export const GaugeChart = React.forwardRef<GaugeChartHandle, Props>(
+  ({ values, value }, ref) => {
+    const total = values.reduce((acc, item) => acc + item.value, 0);
+    const animatedDegree = useSharedValue(-90);
+
+    useImperativeHandle(ref, () => ({
+      reRunAnimation: () => {
+        animatedDegree.value = withSequence(
+          withTiming(-90, { duration: 0 }),
+          withTiming(((value / total) * 180 - 90) % 360, {
+            duration: 1000,
+          }),
+        );
+      },
+    }));
+
+    useEffect(() => {
+      animatedDegree.value = withTiming(((value / total) * 180 - 90) % 360, {
+        duration: 1000,
+      });
+    }, [animatedDegree, total, value]);
+
+    const segment = (n: number) => {
+      const center = SIZE / 2;
+      const degree = (values[n].value / total) * 180;
+
+      const start =
+        n === 0
+          ? 0
+          : values
+              .slice(0, n)
+              .reduce((acc, item) => acc + (item.value / total) * 180, 0);
+      const end = start + degree;
+
+      const path = segmentPath(
+        center,
+        center,
+        RADIUS,
+        RADIUS - STROKE_WIDTH,
+        start,
+        end,
+      );
+
+      const fill = values[n].color;
+      return <Path key={n} d={path} fill={fill} />;
+    };
+
+    const animatedNeddleStyle = useAnimatedStyle(() => {
+      const center = SIZE / 2;
+      // needle rotation degree
+      const [x, y] = polarToCartesian(
+        center,
+        center,
+        RADIUS - STROKE_WIDTH / 2 - 30,
+        animatedDegree.value,
+      );
+
+      return {
+        transform: [
+          { translateX: x - NEDDLE_SIZE / 2 },
+          { translateY: y - NEDDLE_SIZE / 2 },
+          {
+            rotate: `${animatedDegree.value}deg`,
+          },
+        ],
+      };
+    });
+
+    return (
+      <View style={styles.container}>
+        <Svg width={SIZE} height={SIZE / 2}>
+          {values.map((item, i) => segment(i))}
+          <Neddle
+            style={[
+              { width: NEDDLE_SIZE, height: NEDDLE_SIZE },
+              animatedNeddleStyle,
+            ]}
+          />
+        </Svg>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    position: "relative",
+  },
+});

src/components/GaugeChart/GaugeChart.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import Svg, { SvgProps, Path } from "react-native-svg";
+import { ViewProps } from "react-native";
+import Animated, { AnimateProps } from "react-native-reanimated";
+
+type Props = {
+  svgProps?: SvgProps;
+} & AnimateProps<ViewProps>;
+
+const NEDDLE_SIZE = 34;
+
+const Neddle = ({ svgProps, ...rest }: Props) => (
+  <Animated.View {...rest}>
+    <Svg width={NEDDLE_SIZE} height={NEDDLE_SIZE} fill="none" {...svgProps}>
+      <Path
+        d="M17.898 2.094 32.007 30.81a1 1 0 0 1-.898 1.441H2.891a1 1 0 0 1-.898-1.441l14.11-28.715a1 1 0 0 1 1.794 0Z"
+        fill="#003441"
+        stroke="#fff"
+        strokeWidth={2.5}
+      />
+    </Svg>
+  </Animated.View>
+);
+
+export { Neddle, NEDDLE_SIZE };

src/components/GaugeChart/Neddle.tsx

@@ -0,0 +1,72 @@
+export const angelToRadian = (angleInDegrees: number) => {
+  "worklet";
+  return ((angleInDegrees - 90) * Math.PI) / 180;
+};
+
+export const polarToCartesian = (
+  centerX: number,
+  centerY: number,
+  radius: number,
+  angleInDegrees: number,
+) => {
+  "worklet";
+  const angleInRadians = angelToRadian(angleInDegrees);
+
+  return [
+    centerX + radius * Math.cos(angleInRadians),
+    centerY + radius * Math.sin(angleInRadians),
+  ];
+};
+
+export const segmentPath = (
+  x: number,
+  y: number,
+  r0: number,
+  r1: number,
+  d0: number,
+  d1: number,
+) => {
+  const arc = Math.abs(d0 - d1) > 180 ? 1 : 0;
+  const point = (radius: number, degree: number) =>
+    polarToCartesian(x, y, radius, degree)
+      .map((n) => n.toPrecision(5))
+      .join(",");
+
+  const start = -90 + d0;
+  const end = -90 + d1;
+
+  return [
+    `M${point(r0, start)}`,
+    `A${r0},${r0},0,${arc},1,${point(r0, end)}`,
+    `L${point(r1, end)}`,
+    `A${r1},${r1},0,${arc},0,${point(r1, start)}`,
+    "Z",
+  ].join("");
+};
+
+export const circlePath = (
+  x: number,
+  y: number,
+  radius: number,
+  startAngle: number,
+  endAngle: number,
+) => {
+  "worklet";
+  const [startX, startY] = polarToCartesian(x, y, radius, endAngle * 0.9999);
+  const [endX, endY] = polarToCartesian(x, y, radius, startAngle);
+  const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+  const d = [
+    "M",
+    startX,
+    startY,
+    "A",
+    radius,
+    radius,
+    0,
+    largeArcFlag,
+    0,
+    endX,
+    endY,
+  ];
+  return d.join(" ");
+};