[Add] 거래량 차트 로직 일부 구현

- 중앙 차트관련 거래랑 표시 로직 일부 구현

Issues #14

client/src/hooks/useGetStockChart.ts

@@ -11,89 +11,159 @@ const useGetStockChart = (companyId: number) => {
     }
   }, [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;
+  // 🔴 테스트
+  const organizeData = (rawData: StockProps[]) => {
+    const time = [];
+    const values = [];
+    const volumes = [];
 
-    return [priceTime, openPrice, closePrice, lowestPrice, highestPrice, volume];
-  });
+    for (let i = 0; i < rawData.length; i++) {
+      // 날짜
+      const date = new Date(rawData[i].stockTradeTime);
+      const priceTime = `${date.getHours()}시 ${date.getMinutes()}분`;
+      time.push(priceTime);
 
-  // 옵션 설정
-  const upColor = "#ec0000";
-  const upBorderColor = "#8A0000";
-  const downColor = "#00da3c";
-  const downBorderColor = "#008F28";
+      // 주가
+      const openPrice = rawData[i].stck_oprc;
+      const closePrice = rawData[i].stck_prpr;
+      const lowestPrice = rawData[i].stck_lwpr;
+      const highestPrice = rawData[i].stck_hgpr;
+      values.push([openPrice, highestPrice, lowestPrice, closePrice]);
+
+      // 거래량
+      const volume = rawData[i].cntg_vol;
+      const priceChange = openPrice < closePrice ? 1 : -1;
+      volumes.push([i, volume, priceChange]);
+    }
+    return {
+      time: time,
+      values: values,
+      volumes: volumes,
+    };
+  };
+
+  const organizedChartData = organizeData(chartData);
+
+  // 색상 옵션
+
+  const upColor = "#e22926";
+  const downColor = "#2679ed";
 
   const options = {
-    dataset: {
-      source: chartDataSource,
-    },
+    animation: false,
     tooltip: {
       trigger: "axis",
       axisPointer: {
-        type: "line",
+        type: "cross",
+      },
+      borderWidth: 1,
+      borderColor: "#ccc",
+      padding: 10,
+      textStyle: {
+        color: "#000",
+      },
+      // position: function (pos, params, el, elRect, size) {
+      //   const obj = {
+      //     top: 10
+      //   };
+      //   obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
+      //   return obj;
+      // }
+      // extraCssText: 'width: 170px'
+    },
+    axisPointer: {
+      link: [
+        {
+          xAxisIndex: "all",
+        },
+      ],
+      label: {
+        backgroundColor: "#777",
       },
     },
     toolbox: {
       feature: {
         dataZoom: {
           yAxisIndex: false,
         },
+        brush: {
+          type: ["lineX", "clear"],
+        },
       },
     },
+    brush: {
+      xAxisIndex: "all",
+      brushLink: "all",
+      outOfBrush: {
+        colorAlpha: 0.1,
+      },
+    },
+    visualMap: {
+      show: false,
+      seriesIndex: 5,
+      dimension: 2,
+      pieces: [
+        {
+          value: 1,
+          color: downColor,
+        },
+        {
+          value: -1,
+          color: upColor,
+        },
+      ],
+    },
     grid: [
       {
         left: "10%",
-        right: "10%",
-        bottom: 200,
+        right: "8%",
+        height: "50%",
       },
       {
         left: "10%",
-        right: "10%",
-        height: 80,
-        bottom: 80,
+        right: "8%",
+        top: "63%",
+        height: "16%",
       },
     ],
     xAxis: [
       {
         type: "category",
+        data: organizedChartData.time,
         boundaryGap: false,
-        // inverse: true,
         axisLine: { onZero: false },
         splitLine: { show: false },
         min: "dataMin",
         max: "dataMax",
+        axisPointer: {
+          z: 100,
+        },
       },
       {
         type: "category",
         gridIndex: 1,
+        data: organizedChartData.time,
         boundaryGap: false,
         axisLine: { onZero: false },
         axisTick: { show: false },
         splitLine: { show: false },
         axisLabel: { show: false },
-        min: 0,
+        min: "dataMin",
         max: "dataMax",
       },
     ],
     yAxis: [
       {
         scale: true,
         splitArea: {
-          show: true,
+          show: false,
         },
       },
       {
         scale: true,
         gridIndex: 1,
         splitNumber: 2,
-        axisLabel: { show: false },
+        axisLabel: { show: true },
         axisLine: { show: false },
         axisTick: { show: false },
         splitLine: { show: false },
@@ -102,53 +172,45 @@ const useGetStockChart = (companyId: number) => {
     dataZoom: [
       {
         type: "inside",
-        // xAxisIndex: [0, 1],
-        start: 10,
+        xAxisIndex: [0, 1],
+        start: 40,
+        end: 100,
+      },
+      {
+        show: false,
+        xAxisIndex: [0, 1],
+        type: "slider",
+        top: "85%",
+        start: 40,
         end: 100,
       },
     ],
-    visualMap: {
-      show: false,
-      seriesIndex: 1,
-      dimension: 6,
-      pieces: [
-        {
-          value: 1,
-          color: upColor,
-        },
-        {
-          value: -1,
-          color: downColor,
-        },
-      ],
-    },
     series: [
       {
+        name: "Dow-Jones index",
         type: "candlestick",
+        data: organizedChartData.values,
         itemStyle: {
           color: upColor,
           color0: downColor,
-          borderColor: upBorderColor,
-          borderColor0: downBorderColor,
-        },
-        encode: {
-          x: 0,
-          y: [1, 4, 3, 2],
+          borderColor: undefined,
+          borderColor0: undefined,
         },
       },
+      // {
+      //   name: 'MA5',
+      //   type: 'line',
+      //   data: calculateMA(5, data),
+      //   smooth: true,
+      //   lineStyle: {
+      //     opacity: 0.5
+      //   }
       {
-        name: "Volumn",
+        name: "Volume",
         type: "bar",
         xAxisIndex: 1,
         yAxisIndex: 1,
-        itemStyle: {
-          color: "#7fbe9e",
-        },
-        large: true,
-        encode: {
-          x: 0,
-          y: 5,
-        },
+        data: organizedChartData.volumes,
       },
     ],
   };
@@ -165,19 +227,6 @@ const useGetStockChart = (companyId: number) => {
 
 export default useGetStockChart;
 
-// y축 눈금 옵션 설정하는 함수
-// const calculateYAxisOptions = (data: StockProps[]) => {
-//   const stockPrice = data.map((stock) => parseFloat(stock.stck_prpr));
-
-//   const maxPrice = Math.max(...stockPrice);
-//   const minPrice = Math.min(...stockPrice);
-
-//   const interval = Math.ceil((maxPrice - minPrice) / 10);
-//   const min = Math.floor(minPrice - interval * 5);
-
-//   return { interval, min };
-// };
-
 interface StockProps {
   stockMinId: number;
   companyId: number;