diff --git a/client/src/components/CentralChartMenu/Index.tsx b/client/src/components/CentralChartMenu/Index.tsx index 4eaaa3f5..551e35f2 100644 --- a/client/src/components/CentralChartMenu/Index.tsx +++ b/client/src/components/CentralChartMenu/Index.tsx @@ -2,7 +2,7 @@ import { styled } from "styled-components"; import ExpandScreenBtn from "./ExpandScreenBtn"; import StockOverview from "./StockOverview"; import StockOrderBtn from "./StockOrderBtn"; -import CompareChartBtn from "./CompareChartBtn"; +// import CompareChartBtn from "./CompareChartBtn"; const UpperMenuBar = () => { return ( @@ -15,9 +15,9 @@ const UpperMenuBar = () => { -
+ {/*
-
+
*/} ); }; diff --git a/client/src/hooks/useGetStockChart.ts b/client/src/hooks/useGetStockChart.ts index 27385701..eb567b60 100644 --- a/client/src/hooks/useGetStockChart.ts +++ b/client/src/hooks/useGetStockChart.ts @@ -1,6 +1,13 @@ import { useState, useEffect } from "react"; import useGetStockData from "./useGetStockData"; +// 색상 +const upColor = "rgba(198, 6, 6, 0.37)"; +const downColor = "rgba(59, 119, 247, 0.51)"; +const volumColor = "rgba(57, 118, 249, 0.56)"; +const pointerColor = "#cc3c3a"; +const indexColor = "#4479c2"; + const useGetStockChart = (companyId: number) => { const { stockPrice } = useGetStockData(companyId); const [chartData, setChartData] = useState([]); @@ -44,10 +51,6 @@ const useGetStockChart = (companyId: number) => { }; }; - // 색상 - const upColor = "#e22926"; - const downColor = "#2679ed"; - const organizedChartData = organizeData(chartData); const options = { @@ -71,10 +74,11 @@ const useGetStockChart = (companyId: number) => { }, ], label: { - backgroundColor: "#777", + color: pointerColor, + backgroundColor: "transparent", }, }, - toolbox: null, + toolbox: { show: false }, brush: { xAxisIndex: "all", brushLink: "all", @@ -123,16 +127,17 @@ const useGetStockChart = (companyId: number) => { axisLine: { onZero: false, lineStyle: { - color: "#2f4f4f", + color: "black", width: 1, type: "solid", }, }, - splitLine: { show: false }, + splitLine: { show: false, interval: 100 }, axisLabel: { show: false }, axisTick: { show: false }, min: "dataMin", max: "dataMax", + gridIndex: 0, axisPointer: { z: 100, }, @@ -145,7 +150,7 @@ const useGetStockChart = (companyId: number) => { axisLine: { onZero: false, lineStyle: { - color: "#2f4f4f", + color: "black", width: 1, type: "solid", }, @@ -156,7 +161,8 @@ const useGetStockChart = (companyId: number) => { show: true, interval: Math.ceil(organizedChartData.time.length / 13), showMinLabel: false, // 왼쪽 끝단 텍스트 숨김 - showMaxLabel: false, // + showMaxLabel: false, + color: "black", }, min: "dataMin", max: "dataMax", @@ -168,41 +174,51 @@ const useGetStockChart = (companyId: number) => { { scale: true, splitArea: { + show: true, + }, + splitLine: { show: false, }, position: "right", axisLabel: { - fontSize: "0.63rem", - color: "#2f4f4f", - fontWeight: "650", + fontSize: "12px", + color: indexColor, + fontWeight: "500", showMinLabel: false, // 왼쪽 끝단 텍스트 숨김 - showMaxLabel: false, // + showMaxLabel: false, + inside: true, + padding: 10, }, axisLine: { show: true, lineStyle: { - color: "#2f4f4f", + color: "black", width: 1, type: "solid", }, }, + gridIndex: 0, }, { scale: true, position: "right", gridIndex: 1, splitNumber: 2, - axisLabel: { show: false }, + axisLabel: { show: true, inside: true, color: indexColor, padding: 10, showMinLabel: false, showMaxLabel: false, fontWeight: "500" }, axisTick: { show: false }, splitLine: { show: false }, + splitArea: { + show: true, + }, axisLine: { show: true, lineStyle: { - color: "#2f4f4f", + color: "black", width: 1, type: "solid", }, }, + offset: 0, // 두 번째 y축을 오른쪽으로 이동하여 겹치지 않게 함 }, ], dataZoom: [ @@ -224,13 +240,17 @@ const useGetStockChart = (companyId: number) => { borderColor: undefined, borderColor0: undefined, }, + yAxisIndex: 0, }, { name: "Volume", type: "bar", xAxisIndex: 1, - yAxisIndex: 1, data: organizedChartData.volumes, + yAxisIndex: 1, + itemStyle: { + color: volumColor, // 원하는 색상으로 설정 + }, }, ], };