Skip to content

Commit

Permalink
Merge pull request #158 from boostcampwm-2024/feature/connect/detail/…
Browse files Browse the repository at this point in the history 
…trade-#61

[FE] 차트 관련 코드 리펙토링 & X축, Y축 라벨 작업 & 격자 생성 & SSE 연동
  • Loading branch information
@dongree
dongree authored Nov 19, 2024
2 parents c704823 + 14acbac commit 05c7d27
Show file tree
Hide file tree
Showing 18 changed files with 649 additions and 437 deletions.
6 changes: 2 additions & 4 deletions FE/src/components/Search/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,10 @@ export default function SearchModal() {
<>
<Overlay onClick={() => toggleSearchModal()} />
<section
className={`${searchInput.length ? 'h-[520px]' : 'h-[160px]'} fixed left-1/2 top-3 w-[640px] -translate-x-1/2 rounded-2xl bg-white shadow-xl`}
className={`${searchInput.length ? 'h-[520px]' : 'h-[160px]'} fixed left-1/2 top-3 z-20 w-[640px] -translate-x-1/2 rounded-2xl bg-white shadow-xl`}
>
<div
className={
'absolute left-0 right-0 top-0 z-10 rounded-t-2xl bg-white p-3'
}
className={'absolute left-0 right-0 top-0 rounded-t-2xl bg-white p-3'}
>
<SearchInput value={searchInput} onChange={setSearchInput} />
</div>
Expand Down
2 changes: 1 addition & 1 deletion FE/src/components/StockIndex/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
} from 'components/TopFive/type';
import { useEffect, useRef, useState } from 'react';
import { socket } from 'utils/socket.ts';
import { drawChart } from 'utils/chart';
import { drawChart } from 'utils/chart/drawChart.ts';

// const X_LENGTH = 79;

Expand Down
176 changes: 99 additions & 77 deletions FE/src/components/StocksDetail/Chart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { useEffect, useRef, useState } from 'react';
import { TiemCategory } from 'types';
import {
drawBarChart,
drawCandleChart,
drawLineChart,
drawLowerYLabel,
drawUpperYLabel,
} from 'utils/chart';
import { Padding, TiemCategory } from 'types';
import { useQuery } from '@tanstack/react-query';
import { getStocksChartDataByCode } from 'service/stocks';
import { drawLineChart } from '../../utils/chart/drawLineChart.ts';
import { drawCandleChart } from '../../utils/chart/drawCandleChart.ts';
import { drawBarChart } from '../../utils/chart/drawBarChart.ts';
import { drawXAxis } from '../../utils/chart/drawXAxis.ts';
import { drawUpperYAxis } from '../../utils/chart/drawUpperYAxis.ts';
import { drawLowerYAxis } from '../../utils/chart/drawLowerYAxis.ts';
import { useDimensionsHook } from './useDimensionsHook.ts';

const categories: { label: string; value: TiemCategory }[] = [
{ label: '일', value: 'D' },
Expand All @@ -17,6 +17,21 @@ const categories: { label: string; value: TiemCategory }[] = [
{ label: '년', value: 'Y' },
];

const padding: Padding = {
top: 20,
right: 80,
bottom: 10,
left: 20,
};

const CHART_SIZE_CONFIG = {
upperHeight: 0.5,
lowerHeight: 0.4,
chartWidth: 0.92,
yAxisWidth: 0.08,
xAxisHeight: 0.1,
};

type StocksDeatailChartProps = {
code: string;
};
Expand All @@ -36,6 +51,8 @@ export default function Chart({ code }: StocksDeatailChartProps) {
() => getStocksChartDataByCode(code, timeCategory),
);

const dimension = useDimensionsHook(containerRef);

useEffect(() => {
if (isLoading || !data) return;

Expand All @@ -44,76 +61,71 @@ export default function Chart({ code }: StocksDeatailChartProps) {
const lowerChartCanvas = lowerChartCanvasRef.current;
const upperChartYCanvas = upperChartY.current;
const lowerChartYCanvas = lowerChartY.current;
const chartXCanvas = chartX.current;

if (
!parent ||
!upperChartCanvas ||
!lowerChartCanvas ||
!upperChartYCanvas ||
!lowerChartYCanvas
!lowerChartYCanvas ||
!chartXCanvas
)
return;

const displayWidth = parent.clientWidth;
const displayHeight = parent.clientHeight;

const upperHeight = displayHeight * 0.5;
const lowerHeight = displayHeight * 0.3;
const chartWidth = displayWidth * 0.9;
const yAxisWidth = displayWidth * 0.1;

// 차트 영역 설정
upperChartCanvas.width = chartWidth * 2;
upperChartCanvas.height = upperHeight * 2;
upperChartCanvas.style.width = `${chartWidth}px`;
upperChartCanvas.style.height = `${upperHeight}px`;

upperChartYCanvas.width = yAxisWidth * 2;
upperChartYCanvas.height = upperHeight * 2;
upperChartYCanvas.style.width = `${yAxisWidth}px`;
upperChartYCanvas.style.height = `${upperHeight}px`;

lowerChartCanvas.width = chartWidth * 2;
lowerChartCanvas.height = lowerHeight * 2;
lowerChartCanvas.style.width = `${chartWidth}px`;
lowerChartCanvas.style.height = `${lowerHeight}px`;

lowerChartYCanvas.width = yAxisWidth * 2;
lowerChartYCanvas.height = lowerHeight * 2;
lowerChartYCanvas.style.width = `${yAxisWidth}px`;
lowerChartYCanvas.style.height = `${lowerHeight}px`;
upperChartCanvas.width = dimension.width * CHART_SIZE_CONFIG.chartWidth * 2;
upperChartCanvas.height =
dimension.height * CHART_SIZE_CONFIG.upperHeight * 2;
upperChartCanvas.style.width = `${dimension.width * CHART_SIZE_CONFIG.chartWidth}px`;
upperChartCanvas.style.height = `${dimension.height * CHART_SIZE_CONFIG.upperHeight}px`;

upperChartYCanvas.width =
dimension.width * CHART_SIZE_CONFIG.yAxisWidth * 2;
upperChartYCanvas.height =
dimension.height * CHART_SIZE_CONFIG.upperHeight * 2;
upperChartYCanvas.style.width = `${dimension.width * CHART_SIZE_CONFIG.yAxisWidth}px`;
upperChartYCanvas.style.height = `${dimension.height * CHART_SIZE_CONFIG.upperHeight}px`;

lowerChartCanvas.width = dimension.width * CHART_SIZE_CONFIG.chartWidth * 2;
lowerChartCanvas.height =
dimension.height * CHART_SIZE_CONFIG.lowerHeight * 2;
lowerChartCanvas.style.width = `${dimension.width * CHART_SIZE_CONFIG.chartWidth}px`;
lowerChartCanvas.style.height = `${dimension.height * CHART_SIZE_CONFIG.lowerHeight}px`;

lowerChartYCanvas.width =
dimension.width * CHART_SIZE_CONFIG.yAxisWidth * 2;
lowerChartYCanvas.height =
dimension.height * CHART_SIZE_CONFIG.lowerHeight * 2;
lowerChartYCanvas.style.width = `${dimension.width * CHART_SIZE_CONFIG.yAxisWidth}px`;
lowerChartYCanvas.style.height = `${dimension.height * CHART_SIZE_CONFIG.lowerHeight}px`;

chartXCanvas.width = dimension.width * CHART_SIZE_CONFIG.chartWidth * 2;
chartXCanvas.height = dimension.height * CHART_SIZE_CONFIG.xAxisHeight * 2;
chartXCanvas.style.width = `${dimension.width * CHART_SIZE_CONFIG.chartWidth}px`;
chartXCanvas.style.height = `${dimension.height * CHART_SIZE_CONFIG.xAxisHeight}px`;

const UpperChartCtx = upperChartCanvas.getContext('2d');
const LowerChartCtx = lowerChartCanvas.getContext('2d');
const UpperYCtx = upperChartYCanvas.getContext('2d');
const LowerYCtx = lowerChartYCanvas.getContext('2d');
const ChartXCtx = chartXCanvas.getContext('2d');

if (!UpperChartCtx || !LowerChartCtx || !UpperYCtx || !LowerYCtx) return;

const padding = {
top: 20,
right: 60,
bottom: 10,
left: 20,
};

const upperChartWidth =
upperChartCanvas.width - padding.left - padding.right;
const upperChartHeight =
upperChartCanvas.height - padding.top - padding.bottom;
const lowerChartWidth =
lowerChartCanvas.width - padding.left - padding.right;
const lowerChartHeight = lowerChartCanvas.height;

const arr = data.map((e) => +e.stck_oprc);
if (
!UpperChartCtx ||
!LowerChartCtx ||
!UpperYCtx ||
!LowerYCtx ||
!ChartXCtx
)
return;

drawLineChart(
UpperChartCtx,
arr,
data,
0,
0,
upperChartWidth,
upperChartHeight,
upperChartCanvas.width - padding.left - padding.right,
upperChartCanvas.height - padding.top - padding.bottom,
padding,
0.1,
);
Expand All @@ -123,8 +135,8 @@ export default function Chart({ code }: StocksDeatailChartProps) {
data,
0,
0,
upperChartWidth,
upperChartHeight,
upperChartCanvas.width - padding.left - padding.right,
upperChartCanvas.height - padding.top - padding.bottom,
padding,
0.1,
);
Expand All @@ -133,14 +145,12 @@ export default function Chart({ code }: StocksDeatailChartProps) {
drawBarChart(
LowerChartCtx,
data,
0,
0,
lowerChartWidth,
lowerChartHeight - padding.bottom,
lowerChartCanvas.width - padding.left - padding.right,
lowerChartCanvas.height - padding.top - padding.bottom,
padding,
);

drawUpperYLabel(
drawUpperYAxis(
UpperYCtx,
data,
upperChartYCanvas.width - padding.left - padding.right,
Expand All @@ -149,17 +159,26 @@ export default function Chart({ code }: StocksDeatailChartProps) {
0.1,
);

drawLowerYLabel(
drawLowerYAxis(
LowerYCtx,
data,
lowerChartYCanvas.width - padding.left - padding.right,
lowerChartYCanvas.height - padding.top - padding.bottom,
padding,
);

drawXAxis(
ChartXCtx,
data,
chartXCanvas.width - padding.left - padding.right,
chartXCanvas.height,
padding,
);
}, [timeCategory, data, isLoading]);

Check warning on line 177 in FE/src/components/StocksDetail/Chart.tsx

View workflow job for this annotation

GitHub Actions / FE-test-and-build 

React Hook useEffect has missing dependencies: 'dimension.height' and 'dimension.width'. Either include them or remove the dependency array

return (
<div className='flex h-[260px] flex-1 flex-col items-center rounded-lg bg-juga-grayscale-50 p-3'>
<div className='flex w-full items-center justify-between'>
<div className='box-border flex h-[260px] flex-col items-center rounded-lg bg-white p-3'>
<div className='flex h-fit w-full items-center justify-between'>
<p className='font-semibold'>차트</p>
<nav className='flex gap-4 text-sm'>
{categories.map(({ label, value }) => (
Expand All @@ -173,20 +192,23 @@ export default function Chart({ code }: StocksDeatailChartProps) {
))}
</nav>
</div>
<div ref={containerRef} className='mt-2 flex h-full w-full flex-col'>
<div ref={containerRef} className='mt-2 flex h-[200px] w-full flex-col'>
{/* Upper 차트 영역 */}
<div className='flex h-1/2 w-full flex-row items-center'>
<canvas ref={upperChartCanvasRef} className='h-full w-[90%]' />
<canvas ref={upperChartY} className='h-full w-[10%]' />
<div className='flex flex-row'>
<canvas ref={upperChartCanvasRef} />
<canvas ref={upperChartY} />
</div>
<div className='group flex h-[1px] w-full cursor-row-resize items-center justify-center bg-juga-grayscale-100'>
<div className='z-[6] h-2 w-full hover:bg-juga-grayscale-100/50'></div>
</div>
{/* Lower 차트 영역 */}
<div className='flex h-[30%] w-full flex-row'>
<canvas ref={lowerChartCanvasRef} className='h-full w-[90%]' />
<canvas ref={lowerChartY} className='h-full w-[10%]' />
<div className='flex flex-row'>
<canvas ref={lowerChartCanvasRef} />
<canvas ref={lowerChartY} />
</div>
{/* X축 영역 */}
<div className='flex h-[32px] w-[90%] flex-row'>
<canvas ref={chartX} className='h-full w-full' />
<div className='flex flex-row'>
<canvas ref={chartX} />
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 05c7d27

Please sign in to comment.