From 4b4a0b57f6f0f48406cd91bfd0b1b0afd12ecf8d Mon Sep 17 00:00:00 2001 From: novice1993 Date: Tue, 3 Oct 2023 12:27:32 +0900 Subject: [PATCH] =?UTF-8?q?[Feat]=20=EB=B9=84=EA=B5=90=EC=B0=A8=ED=8A=B8?= =?UTF-8?q?=20=EC=A0=9C=EA=B1=B0=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 비교차트 제거 기능 추가 Issues #122 --- .../CentralChart/CompareChartBtn.tsx | 3 +- .../components/CentralChart/CompareList.tsx | 12 +++- client/src/components/CentralChart/Index.tsx | 1 + client/src/hooks/useGetStockChart.tsx | 64 ++++++++++--------- 4 files changed, 46 insertions(+), 34 deletions(-) diff --git a/client/src/components/CentralChart/CompareChartBtn.tsx b/client/src/components/CentralChart/CompareChartBtn.tsx index 328ba75..3dfca71 100644 --- a/client/src/components/CentralChart/CompareChartBtn.tsx +++ b/client/src/components/CentralChart/CompareChartBtn.tsx @@ -32,6 +32,7 @@ const CompareChartBtn = () => { {companyList?.map(({ korName, companyId }) => { return ; })} + )} @@ -96,7 +97,7 @@ const StockList = styled.div` line-height: 147%; width: 92px; - height: 260px; + height: 280px; padding: 5px; border-radius: 0.4rem; z-index: 2; diff --git a/client/src/components/CentralChart/CompareList.tsx b/client/src/components/CentralChart/CompareList.tsx index c1c1c01..751a9e8 100644 --- a/client/src/components/CentralChart/CompareList.tsx +++ b/client/src/components/CentralChart/CompareList.tsx @@ -15,16 +15,22 @@ const CompareList = (props: OwnProps) => { } }; - return {corpName}; + return ( + + {corpName} + + ); }; export default CompareList; interface OwnProps { corpName: string; - compareCompanyId: number; + compareCompanyId: number | null; } -const Contianer = styled.div` +const Contianer = styled.div<{ corpName: string }>` + color: ${(props) => props.corpName === "비교차트 제거" && "#19488a"}; + &:hover { color: #19488a; transition: color 0.3s ease; diff --git a/client/src/components/CentralChart/Index.tsx b/client/src/components/CentralChart/Index.tsx index 212f977..16780f0 100644 --- a/client/src/components/CentralChart/Index.tsx +++ b/client/src/components/CentralChart/Index.tsx @@ -51,6 +51,7 @@ const Container = styled.div` const LoadingContainer = styled.div` width: 100%; + min-width: 630px; height: 100%; display: flex; justify-content: center; diff --git a/client/src/hooks/useGetStockChart.tsx b/client/src/hooks/useGetStockChart.tsx index c59450e..4087fac 100644 --- a/client/src/hooks/useGetStockChart.tsx +++ b/client/src/hooks/useGetStockChart.tsx @@ -5,6 +5,8 @@ import useGetStockInfo from "./useGetStockInfo"; import { StateProps } from "../models/stateProps"; import axios from "axios"; +const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/companies/charts/"; + const upColor = "rgba(198, 6, 6, 0.37)"; const downColor = "rgba(59, 119, 247, 0.51)"; const volumColor = "rgba(57, 118, 249, 0.56)"; @@ -12,6 +14,14 @@ const pointerColor = "#cc3c3a"; const indexColor = "#4479c2"; const averageLineMinute = 10; +const openPriceText = "• 시가"; +const closePriceText = "• 종가"; +const highPriceText = "• 고가"; +const lowPriceText = "• 저가"; +const volumeText = "• 거래량"; +const priceUnit = " 원"; +const volumeUnit = " 주"; + const useGetStockChart = (companyId: number) => { const { stockPrice } = useGetStockData(companyId); const { stockInfo } = useGetStockInfo(companyId); @@ -24,34 +34,19 @@ const useGetStockChart = (companyId: number) => { const compareId = useSelector((state: StateProps) => state.compareChart); const { stockInfo: compareInfo } = useGetStockInfo(compareId); - const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/companies/charts/"; - const averageDay = 10; - const getCompareChart = async (compareId: number, compareName: string) => { const response = await axios.get(`${url}${compareId}`); const data = await response.data; const compareChartData = organizeData(data); - const compareMovingAvgData = calculateMovingAvgLine(averageDay, compareChartData); - const compareMovingAvgChart = { - name: `${compareName}`, - type: "line", - data: compareMovingAvgData, - smooth: true, - lineStyle: { - opacity: 0.5, - color: "#738f8fc7", - }, - yAxisIndex: 2, - }; - - setCompare(compareMovingAvgChart); + const compareMovingAvgData = calculateMovingAvgLine(averageLineMinute, compareChartData); + const compareData = setComparedMovingAvgChart(`${compareName}`, compareMovingAvgData); + setCompare(compareData); }; useEffect(() => { if (compareInfo && compareId !== null) { const compareStockName = compareInfo.korName; - console.log(compareStockName); setCompareName(compareStockName); } }, [compareInfo]); @@ -61,8 +56,9 @@ const useGetStockChart = (companyId: number) => { getCompareChart(compareId, compareName); } - if (companyId === null) { - setCompare(undefined); + if (compareId === null) { + const deleteCompareChart = setComparedMovingAvgChart("비교취소", []); + setCompare(deleteCompareChart); } }, [compareId, compareName]); @@ -92,14 +88,6 @@ const useGetStockChart = (companyId: number) => { formatter: (params: any) => { const dataIndex = params[0]?.dataIndex || 0; - const openPriceText = "• 시가"; - const closePriceText = "• 종가"; - const highPriceText = "• 고가"; - const lowPriceText = "• 저가"; - const volumeText = "• 거래량"; - const priceUnit = " 원"; - const volumeUnit = " 주"; - const date = organizedChartData.tooltipTitle[dataIndex]; const name = `📈 ${corpName}`; const dataPoint = organizedChartData.values[dataIndex]; @@ -446,7 +434,7 @@ const organizeData = (rawData: StockProps[]) => { }; // 2) 이동 평균선 데이터 계산 -function calculateMovingAvgLine(minuteCount: number, data: OrganizedChartProps) { +const calculateMovingAvgLine = (minuteCount: number, data: OrganizedChartProps) => { const result = []; const length = data.values.length; @@ -463,4 +451,20 @@ function calculateMovingAvgLine(minuteCount: number, data: OrganizedChartProps) result.push(+(sum / minuteCount).toFixed(3)); } return result; -} +}; + +const setComparedMovingAvgChart = (compareName: string, compareChartData: (string | number)[]) => { + const compareMovingAvgChart = { + name: `${compareName}`, + type: "line", + data: compareChartData, + smooth: true, + lineStyle: { + opacity: 0.5, + color: "#738f8fc7", + }, + yAxisIndex: 2, + }; + + return compareMovingAvgChart; +};