[Add] 거래량 차트 추가 테스트 코드 추가

- 주가 차트 하단에 거래량 차트 렌더링 되도록 구현 중
- 관련하여 테스트 코드 추가

Issues #14

client/src/hooks/useGetStockChart.ts

@@ -4,90 +4,179 @@ import useGetStockData from "./useGetStockData";
 const useGetStockChart = (companyId: number) => {
   const { stockPrice } = useGetStockData(companyId);
   const [chartData, setChartData] = useState<StockProps[]>([]);
-  const [yAxisInterval, setYAxisInterval] = useState(0);
-  const [yAxisMinPrice, setYAxisMinPrice] = useState(0);
 
-  // 서버에서 차트 데이터 fetching -> 클라이언트 화면에 활용할 차트 데이터 + 차트 y축 수치 상태 변화
   useEffect(() => {
     if (stockPrice) {
       setChartData(stockPrice);
-      const { interval, min } = calculateYAxisOptions(stockPrice);
-      setYAxisInterval(interval);
-      setYAxisMinPrice(min);
     }
   }, [stockPrice]);
 
+  // 떼이터 가공
+  const chartDataSource = chartData.map((stock: StockProps) => {
+    const date = new Date(stock.stockTradeTime);
+    const priceTime = `${date.getHours()}시 ${date.getMinutes()}분`;
+    const openPrice = stock.stck_oprc;
+    const closePrice = stock.stck_prpr;
+    const lowestPrice = stock.stck_lwpr;
+    const highestPrice = stock.stck_hgpr;
+    const volume = stock.cntg_vol;
+
+    return [priceTime, openPrice, closePrice, lowestPrice, highestPrice, volume];
+  });
+
+  // 옵션 설정
+  const upColor = "#ec0000";
+  const upBorderColor = "#8A0000";
+  const downColor = "#00da3c";
+  const downBorderColor = "#008F28";
+
   const options = {
-    xAxis: {
-      type: "category",
-      data: chartData.map((stock: StockProps) => {
-        const date = new Date(stock.stockTradeTime);
-        const tradeTime = `${date.getHours()}시 ${date.getMinutes()}분`;
-        return tradeTime;
-      }),
+    dataset: {
+      source: chartDataSource,
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "line",
+      },
     },
+    toolbox: {
+      feature: {
+        dataZoom: {
+          yAxisIndex: false,
+        },
+      },
+    },
+    grid: [
+      {
+        left: "10%",
+        right: "10%",
+        bottom: 200,
+      },
+      {
+        left: "10%",
+        right: "10%",
+        height: 80,
+        bottom: 80,
+      },
+    ],
+    xAxis: [
+      {
+        type: "category",
+        boundaryGap: false,
+        // inverse: true,
+        axisLine: { onZero: false },
+        splitLine: { show: false },
+        min: "dataMin",
+        max: "dataMax",
+      },
+      {
+        type: "category",
+        gridIndex: 1,
+        boundaryGap: false,
+        axisLine: { onZero: false },
+        axisTick: { show: false },
+        splitLine: { show: false },
+        axisLabel: { show: false },
+        min: 0,
+        max: "dataMax",
+      },
+    ],
     yAxis: [
       {
-        type: "value",
-        position: "right",
-        interval: yAxisInterval,
-        min: yAxisMinPrice,
-        splitLine: {
-          show: false,
+        scale: true,
+        splitArea: {
+          show: true,
         },
       },
+      {
+        scale: true,
+        gridIndex: 1,
+        splitNumber: 2,
+        axisLabel: { show: false },
+        axisLine: { show: false },
+        axisTick: { show: false },
+        splitLine: { show: false },
+      },
     ],
     dataZoom: [
       {
         type: "inside",
+        // xAxisIndex: [0, 1],
+        start: 10,
+        end: 100,
       },
     ],
-    tooltip: {
-      trigger: "axis",
-      axisPointer: {
-        type: "cross",
-      },
+    visualMap: {
+      show: false,
+      seriesIndex: 1,
+      dimension: 6,
+      pieces: [
+        {
+          value: 1,
+          color: upColor,
+        },
+        {
+          value: -1,
+          color: downColor,
+        },
+      ],
     },
     series: [
       {
-        name: "주가",
         type: "candlestick",
-        data: chartData.map((stock: StockProps) => {
-          return [stock.stck_oprc, stock.stck_prpr, stock.stck_lwpr, stock.stck_hgpr];
-        }),
-        yAxisIndex: 0,
+        itemStyle: {
+          color: upColor,
+          color0: downColor,
+          borderColor: upBorderColor,
+          borderColor0: downBorderColor,
+        },
+        encode: {
+          x: 0,
+          y: [1, 4, 3, 2],
+        },
+      },
+      {
+        name: "Volumn",
+        type: "bar",
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        itemStyle: {
+          color: "#7fbe9e",
+        },
+        large: true,
+        encode: {
+          x: 0,
+          y: 5,
+        },
       },
     ],
-    grid: {
-      left: "3%",
-      right: "7%",
-      top: "3%",
-      bottom: "5%",
-    },
   };
 
+  // 스타일 설정
   const chartStyle = {
     width: "100%",
-    height: "100%",
+    height: "100% ",
   };
 
+  // 해당 값 리턴
   return { options, chartStyle };
 };
 
 export default useGetStockChart;
 
 // y축 눈금 옵션 설정하는 함수
-const calculateYAxisOptions = (data: StockProps[]) => {
-  const stockPrice = data.map((stock) => parseFloat(stock.stck_prpr));
+// const calculateYAxisOptions = (data: StockProps[]) => {
+//   const stockPrice = data.map((stock) => parseFloat(stock.stck_prpr));
 
-  const maxPrice = Math.max(...stockPrice);
-  const minPrice = Math.min(...stockPrice);
+//   const maxPrice = Math.max(...stockPrice);
+//   const minPrice = Math.min(...stockPrice);
 
-  const interval = Math.ceil((maxPrice - minPrice) / 10);
-  const min = Math.floor(minPrice - interval * 5);
+//   const interval = Math.ceil((maxPrice - minPrice) / 10);
+//   const min = Math.floor(minPrice - interval * 5);
 
-  return { interval, min };
-};
+//   return { interval, min };
+// };
 
 interface StockProps {
   stockMinId: number;
@@ -98,4 +187,5 @@ interface StockProps {
   stck_oprc: string;
   stck_hgpr: string;
   stck_lwpr: string;
+  cntg_vol: string;
 }