Merge pull request #13 from ricale/feature/c04

[C04] 라인차트 특정 아이템 선택 기능 구현

Author: ricale

src/navigation/RootNavigation.tsx

@@ -3,10 +3,11 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import C01LineChartScreen from 'screens/C01LineChartScreen';
 import C02LineChartWithOptionsScreen from 'screens/C02LineChartWithOptionsScreen';
+import C03LineChartWithLegendScreen from 'screens/C03LineChartWithLegendScreen';
+import C04SelectableLineChartScreen from 'screens/C04SelectableLineChartScreen';
 import HomeScreen from 'screens/HomeScreen';
 
 import { RootStackParamsList } from './types';
-import C03LineChartWithLegendScreen from 'screens/C03LineChartWithLegendScreen';
 
 const Stack = createNativeStackNavigator<RootStackParamsList>();
 
@@ -30,6 +31,11 @@ function RootNavigation() {
           component={C03LineChartWithLegendScreen}
           options={{ animation: 'none' }}
         />
+        <Stack.Screen
+          name="C04SelectableLineChart"
+          component={C04SelectableLineChartScreen}
+          options={{ animation: 'none' }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );

src/navigation/types.ts

@@ -2,5 +2,6 @@ export type RootStackParamsList = {
   C01LineChart: undefined;
   C02LineChartWithOptions: undefined;
   C03LineChartWithLegend: undefined;
+  C04SelectableLineChart: undefined;
   Home: undefined;
 };

src/screens/C04SelectableLineChartScreen/comps/LineChart/Legend/getContainerStyle.ts

@@ -0,0 +1,41 @@
+import { ViewProps } from 'react-native';
+import { LegendOptions } from '../types';
+
+const getContainerStyle = ({
+  position,
+  direction,
+  align,
+  width,
+  height,
+}: LegendOptions): ViewProps['style'] => {
+  if (position === 'right' || position === 'left') {
+    return {
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: align ?? 'flex-start',
+      width,
+    };
+  }
+
+  if (direction === 'column') {
+    return {
+      flexDirection: 'column',
+      justifyContent: height ? 'flex-start' : 'center',
+      alignItems: align ?? 'center',
+      flexWrap: height ? 'wrap' : undefined,
+      width: width ?? '100%',
+      height,
+    };
+  }
+
+  return {
+    flexDirection: 'row',
+    justifyContent: align ?? 'center',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    width: width ?? '100%',
+    height,
+  };
+};
+
+export default getContainerStyle;

src/screens/C04SelectableLineChartScreen/comps/LineChart/Legend/index.tsx

@@ -0,0 +1,111 @@
+import { StyleSheet, View } from 'react-native';
+
+import Text from 'components/Text';
+
+import Pressable from '../../Pressable';
+import { LegendOptions, LinesOptions, TimeSeries } from '../types';
+import { DEFAULT_COLORS } from '../constants';
+import getContainerStyle from './getContainerStyle';
+
+const NOT_VISIBLE_COLOR = 'gainsboro';
+
+type LegendProps = LegendOptions & {
+  series: TimeSeries[];
+  linesOptions?: LinesOptions;
+  onPressItem?: (sr: TimeSeries, idx: number) => void;
+};
+function Legend({
+  series,
+  linesOptions,
+  onPressItem,
+
+  enabled = true,
+
+  position,
+  direction = 'row',
+  align,
+
+  width,
+  height,
+
+  itemGap = 4,
+  itemNotVisibleColor = NOT_VISIBLE_COLOR,
+
+  itemPadding,
+  itemPaddingTop,
+  itemPaddingLeft,
+  itemPaddingRight,
+  itemPaddingBottom,
+
+  itemRectWidth = 12,
+  itemRectHeight = 12,
+  itemRectBorderRadius = 2,
+
+  itemLabelSize,
+  itemLabelFont,
+  itemLabelWeight,
+  itemLabelColor,
+  itemLabelFormatter,
+}: LegendProps) {
+  const colors = linesOptions?.colors ?? DEFAULT_COLORS;
+
+  if (!enabled) {
+    return null;
+  }
+  return (
+    <View
+      style={getContainerStyle({ position, direction, align, width, height })}
+    >
+      {series.map((sr, i) => (
+        <Pressable
+          key={i}
+          style={[
+            styles.item,
+            {
+              paddingTop: itemPaddingTop ?? itemPadding ?? 2,
+              paddingLeft: itemPaddingLeft ?? itemPadding ?? 8,
+              paddingRight: itemPaddingRight ?? itemPadding ?? 8,
+              paddingBottom: itemPaddingBottom ?? itemPadding ?? 2,
+            },
+          ]}
+          onPress={() => onPressItem?.(sr, i)}
+        >
+          <View
+            style={{
+              width: itemRectWidth,
+              height: itemRectHeight,
+              marginRight: itemGap,
+              borderRadius: itemRectBorderRadius,
+              backgroundColor: !sr.visible
+                ? itemNotVisibleColor
+                : sr.color ?? colors[i % colors.length],
+            }}
+          />
+          <Text
+            style={{
+              fontSize: itemLabelSize,
+              fontFamily: itemLabelFont,
+              fontWeight: itemLabelWeight,
+              ...(!sr.visible
+                ? { color: itemNotVisibleColor }
+                : itemLabelColor
+                ? { color: itemLabelColor }
+                : {}),
+            }}
+          >
+            {itemLabelFormatter?.(sr, i) ?? sr.name ?? `시리즈 ${i + 1}`}
+          </Text>
+        </Pressable>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+export default Legend;

src/screens/C04SelectableLineChartScreen/comps/LineChart/LineChartBody/Lines.tsx

@@ -0,0 +1,35 @@
+import { Line as D3Line } from 'd3';
+import { G, Path } from 'react-native-svg';
+
+import { LinesOptions, TimeSeries } from '../types';
+import { DEFAULT_COLORS } from '../constants';
+
+type LinesProps = LinesOptions & {
+  series: TimeSeries[];
+  lineFunc: D3Line<TimeSeries['data'][0]>;
+};
+function Lines({
+  series,
+  lineFunc,
+  colors = DEFAULT_COLORS,
+  lineWidth = 1,
+}: LinesProps) {
+  return (
+    <G>
+      {series.map((sr, i) =>
+        !sr.visible ? null : (
+          <Path
+            key={i}
+            d={lineFunc(sr.data) ?? undefined}
+            stroke={sr.color ?? colors[i % colors.length]}
+            strokeLinecap="round"
+            fill="transparent"
+            strokeWidth={sr.lineWidth ?? lineWidth}
+          />
+        )
+      )}
+    </G>
+  );
+}
+
+export default Lines;

src/screens/C04SelectableLineChartScreen/comps/LineChart/LineChartBody/Selection/Dots.tsx

@@ -0,0 +1,52 @@
+import { Circle, G } from 'react-native-svg';
+import { ScaleLinear, ScaleTime } from 'd3';
+import getColorWithAlpha from 'utils/getColorWithAlpha';
+import { SelectedItem, SelectionOptions } from '../../types';
+
+type DotsProps = SelectionOptions['dot'] & {
+  items: SelectedItem[];
+  xScale: ScaleTime<number, number, never>;
+  yScale: ScaleLinear<number, number, never>;
+  colors: string[];
+};
+function Dots({
+  items,
+  xScale,
+  yScale,
+  colors,
+
+  enabled = true,
+  color = seriesColor => seriesColor,
+  radius = 2,
+  borderColor = seriesColor => getColorWithAlpha(seriesColor, 0.5),
+  borderWidth = 3,
+}: DotsProps) {
+  if (!enabled) {
+    return null;
+  }
+  return (
+    <G>
+      {items.map(item => (
+        <Circle
+          key={item.seriesIndex}
+          x={xScale(item.date)}
+          y={yScale(item.value)}
+          r={radius}
+          fill={
+            typeof color === 'function'
+              ? color(colors[item.seriesIndex % colors.length])
+              : color
+          }
+          stroke={
+            typeof borderColor === 'function'
+              ? borderColor(colors[item.seriesIndex % colors.length])
+              : borderColor
+          }
+          strokeWidth={borderWidth}
+        />
+      ))}
+    </G>
+  );
+}
+
+export default Dots;