[C03] 라인차트 레전드 기능 구현

src/navigation/RootNavigation.tsx

@@ -6,6 +6,7 @@ import C02LineChartWithOptionsScreen from 'screens/C02LineChartWithOptionsScreen
 import HomeScreen from 'screens/HomeScreen';
 
 import { RootStackParamsList } from './types';
+import C03LineChartWithLegendScreen from 'screens/C03LineChartWithLegendScreen';
 
 const Stack = createNativeStackNavigator<RootStackParamsList>();
 
@@ -24,6 +25,11 @@ function RootNavigation() {
           component={C02LineChartWithOptionsScreen}
           options={{ animation: 'none' }}
         />
+        <Stack.Screen
+          name="C03LineChartWithLegend"
+          component={C03LineChartWithLegendScreen}
+          options={{ animation: 'none' }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );

src/navigation/types.ts

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

src/screens/C03LineChartWithLegendScreen/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/C03LineChartWithLegendScreen/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;
+  onClickItem?: (sr: TimeSeries, idx: number) => void;
+};
+function Legend({
+  series,
+  linesOptions,
+  onClickItem,
+
+  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={() => onClickItem?.(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/C03LineChartWithLegendScreen/comps/LineChart/LineChartBody/Lines.tsx

@@ -0,0 +1,33 @@
+import { G, Path } from 'react-native-svg';
+import { LinesOptions, TimeSeries } from '../types';
+import { DEFAULT_COLORS } from '../constants';
+
+type LinesProps = LinesOptions & {
+  series: TimeSeries[];
+  lineFunc: d3.Line<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/C03LineChartWithLegendScreen/comps/LineChart/LineChartBody/XAxis.tsx

@@ -0,0 +1,111 @@
+import * as d3 from 'd3';
+import { G, Line, Text } from 'react-native-svg';
+
+import dateFormat from 'utils/dateFormat';
+import PaneBoundary from 'utils/PaneBoundary';
+
+import { TimeAxisOptions } from '../types';
+
+const DEFAULT_TICK_LENGTH = 6;
+
+type XAxisProps = TimeAxisOptions & {
+  scale: d3.ScaleTime<number, number, never>;
+  paneBoundary: PaneBoundary;
+};
+function XAxis({
+  scale,
+  paneBoundary,
+  x = 0,
+  y = paneBoundary.y1,
+
+  enabled = true,
+
+  lineColor = 'black',
+  lineWidth = 1,
+
+  showTicks = true,
+  ticks: _ticks,
+
+  tickLength = DEFAULT_TICK_LENGTH,
+  tickWidth = 1,
+  tickColor = 'black',
+
+  tickLabelSize,
+  tickLabelFont,
+  tickLabelWeight,
+  tickLabelColor = 'black',
+  tickLabelFormatter = dateFormat,
+
+  showGridLines = false,
+  gridLineWidth = 1,
+  gridLineColor = 'lightgray',
+}: XAxisProps) {
+  const range = scale.range();
+  const ticks = !_ticks
+    ? scale.ticks()
+    : typeof _ticks === 'function'
+    ? _ticks(scale)
+    : _ticks;
+
+  if (!enabled) {
+    return null;
+  }
+  return (
+    <G>
+      <Line
+        x1={range[0] + x}
+        x2={range[1] + x}
+        y1={y}
+        y2={y}
+        stroke={lineColor}
+        strokeWidth={lineWidth}
+      />
+
+      {showTicks && (
+        <>
+          {ticks.map(tick => (
+            <Line
+              key={`${tick}`}
+              x1={scale(tick)}
+              x2={scale(tick)}
+              y1={y}
+              y2={y + tickLength}
+              stroke={tickColor}
+              strokeWidth={tickWidth}
+            />
+          ))}
+          {ticks.map(tick => (
+            <Text
+              key={`${tick}`}
+              x={scale(tick)}
+              y={y + tickLength + 2}
+              fill={tickLabelColor}
+              fontSize={tickLabelSize}
+              fontFamily={tickLabelFont}
+              fontWeight={tickLabelWeight}
+              textAnchor="middle"
+              alignmentBaseline="hanging"
+            >
+              {tickLabelFormatter(tick)}
+            </Text>
+          ))}
+        </>
+      )}
+
+      {showGridLines &&
+        ticks.map(tick => (
+          <Line
+            key={`${tick}`}
+            x1={scale(tick)}
+            x2={scale(tick)}
+            y1={paneBoundary.y1}
+            y2={paneBoundary.y2}
+            stroke={gridLineColor}
+            strokeWidth={gridLineWidth}
+          />
+        ))}
+    </G>
+  );
+}
+
+export default XAxis;