From 7cb490b0fbb18c6d018604ef5cc00c72b80c206f Mon Sep 17 00:00:00 2001
From: novice1993 <novice1993@gmail.com>
Date: Sun, 17 Sep 2023 03:41:09 +0900
Subject: [PATCH] =?UTF-8?q?[Design]=20=EC=A3=BC=EA=B0=80=20=EB=B0=8F=20?=
=?UTF-8?q?=EA=B1=B0=EB=9E=98=EB=9F=89=20=EC=B0=A8=ED=8A=B8=20=EB=94=94?=
=?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=BB=A4=EC=8A=A4=ED=84=B0=EB=A7=88?=
=?UTF-8?q?=EC=9D=B4=EC=A7=95=20=EC=9D=BC=EB=B6=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 중앙 차트 (주가, 거래량) 관련 디자인 커스터마이징 일부 구현
- 이외 변경사항 : 미사용 컴포넌트 (비교차트 버튼 관련 컴포넌트) 제거
Issues #14
---
.../src/components/CentralChartMenu/Index.tsx | 6 +-
client/src/hooks/useGetStockChart.ts | 56 +++++++++++++------
2 files changed, 41 insertions(+), 21 deletions(-)
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 = () => {
<StockOrderBtn type="selling" />
<ExpandScreenBtn direction="right" />
</div>
- <div className="SecondLine">
+ {/* <div className="SecondLine">
<CompareChartBtn />
- </div>
+ </div> */}
</Container>
);
};
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<StockProps[]>([]);
@@ -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, // 원하는 색상으로 설정
+ },
},
],
};