fix: adjust stat chart sizes

crossplatformkorea · Sep 27, 2024 · e0401fd · e0401fd
1 parent b22f762
commit e0401fd
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/components/uis/Scouter/StatsChart.tsx b/src/components/uis/Scouter/StatsChart.tsx
@@ -16,8 +16,9 @@ import SvgStatsWater from '../../svgs/SvgStatsWater';
 
 type Axis = {x: number; y: number};
 
-const Container = styled.View`
+const Container = styled.View<{width: number}>`
   padding: 32px;
+  width: ${({width}) => width} + 'px';
 
   justify-content: center;
   align-items: center;
@@ -229,7 +230,7 @@ const StatsChart = ({
   const posTree = convertPosition(centerPosition, tree, 'tree');
 
   return (
-    <Container style={{width: width + 72}}>
+    <Container width={width + 72}>
       <StatUnits centerPosition={centerPosition} onPressStat={onPressStat} />
       <StatsContainer>
         <ImageBackground

diff --git a/src/components/uis/Scouter/index.tsx b/src/components/uis/Scouter/index.tsx
@@ -30,6 +30,7 @@ const Scouter = ({
   >;
   style?: StyleProp<ViewStyle>;
 }): ReactElement => {
+  const [width, setWidth] = useState(0);
   const [selectedStat, setSelectedStat] = useState<StatType | null>(null);
   const [tierName, setTierName] = useState<ScoreType['tierName']>('Silver');
   const pluginStats = !githubLogin
@@ -68,8 +69,14 @@ const Scouter = ({
   };
 
   return (
-    <Container style={style}>
+    <Container
+      style={style}
+      onLayout={(e) => {
+        setWidth(e.nativeEvent.layout.width);
+      }}
+    >
       <StatsChart
+        width={width > 330 ? 330 : width - 64}
         selectedStat={selectedStat}
         onPressStat={onPressStat}
         statsScore={{