🔧 fix: 차트 이동평균선 관련 오류 수정 #192

boostcampwm-2024 · Nov 27, 2024 · 7e33d69 · 7e33d69
1 parent 5928f9b
commit 7e33d69
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 17 deletions.
diff --git a/FE/src/types.ts b/FE/src/types.ts
@@ -39,7 +39,7 @@ export type StockChartUnit = {
   acml_vol: string;
   prdy_vrss_sign: string;
   mov_avg_5: string;
-  mov_avg_20: string;
+  mov_avg_20?: string;
 };
 
 export type MypageSectionType = 'account' | 'order' | 'info';

diff --git a/FE/src/utils/chart/drawCandleChart.ts b/FE/src/utils/chart/drawCandleChart.ts
@@ -13,14 +13,26 @@ export function drawCandleChart(
   const n = data.length;
 
   const values = data
-    .map((d) => [
-      +d.stck_hgpr,
-      +d.stck_lwpr,
-      +d.stck_clpr,
-      +d.stck_oprc,
-      Math.floor(+d.mov_avg_5),
-      Math.floor(+d.mov_avg_20),
-    ])
+    .map((d) => {
+      if (d.mov_avg_20) {
+        return [
+          +d.stck_hgpr,
+          +d.stck_lwpr,
+          +d.stck_clpr,
+          +d.stck_oprc,
+          Math.floor(+d.mov_avg_5),
+          Math.floor(+d.mov_avg_20),
+        ];
+      } else {
+        return [
+          +d.stck_hgpr,
+          +d.stck_lwpr,
+          +d.stck_clpr,
+          +d.stck_oprc,
+          Math.floor(+d.mov_avg_5),
+        ];
+      }
+    })
     .flat();
   const yMax = Math.round(Math.max(...values) * (1 + weight));
   const yMin = Math.round(Math.min(...values) * (1 - weight));

diff --git a/FE/src/utils/chart/drawLineChart.ts b/FE/src/utils/chart/drawLineChart.ts
@@ -19,14 +19,26 @@ export function drawLineChart(
   const gap = Math.floor(width / n);
 
   const values = data
-    .map((d) => [
-      +d.stck_hgpr,
-      +d.stck_lwpr,
-      +d.stck_clpr,
-      +d.stck_oprc,
-      Math.floor(+d.mov_avg_5),
-      Math.floor(+d.mov_avg_20),
-    ])
+    .map((d) => {
+      if (d.mov_avg_20) {
+        return [
+          +d.stck_hgpr,
+          +d.stck_lwpr,
+          +d.stck_clpr,
+          +d.stck_oprc,
+          Math.floor(+d.mov_avg_5),
+          Math.floor(+d.mov_avg_20),
+        ];
+      } else {
+        return [
+          +d.stck_hgpr,
+          +d.stck_lwpr,
+          +d.stck_clpr,
+          +d.stck_oprc,
+          Math.floor(+d.mov_avg_5),
+        ];
+      }
+    })
     .flat();
   const yMax = Math.round(Math.max(...values) * (1 + weight));
   const yMin = Math.round(Math.min(...values) * (1 - weight));
@@ -48,4 +60,25 @@ export function drawLineChart(
   ctx.strokeStyle = '#000';
   ctx.lineWidth = lineWidth;
   ctx.stroke();
+
+  ctx.beginPath();
+  data.forEach((e, i) => {
+    if (e.mov_avg_20) {
+      const cx = x + padding.left + (width * i) / (n - 1) + gap / 2;
+      const cy =
+        y +
+        padding.top +
+        height -
+        (height * (+e.mov_avg_20 - yMin)) / (yMax - yMin);
+
+      if (i === 0) {
+        ctx.moveTo(cx, cy);
+      } else {
+        ctx.lineTo(cx, cy);
+      }
+    }
+  });
+  ctx.strokeStyle = '#199123';
+  ctx.lineWidth = lineWidth;
+  ctx.stroke();
 }