-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #63 from CheatSOL/feat/graphs
✨feat, 🎨design: 차트 컴포넌트 생성(일반 차트, 주식 차트 등)
- Loading branch information
Showing
21 changed files
with
732 additions
and
125 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| import React from "react"; | ||
| import { StyledInfoDetailDiv } from "./StockInfoDetail.style"; | ||
| const SeiseInfo = ({ details }) => ( | ||
| <StyledInfoDetailDiv> | ||
| <h3>시세정보</h3> | ||
| <div> | ||
| <p>시가</p> | ||
| <p>{details.openingPrice}</p> | ||
| </div> | ||
| <div> | ||
| <p>1년 최고</p> <p>{details.oneYearHigh}</p> | ||
| </div> | ||
| <div> | ||
| <p>1년 최저</p> <p>{details.oneYearLow}</p> | ||
| </div> | ||
| </StyledInfoDetailDiv> | ||
| ); | ||
|
|
||
| const StockInfo = ({ details }) => ( | ||
| <StyledInfoDetailDiv> | ||
| <h3>종목정보</h3> | ||
| <div> | ||
| <p>시총</p> <p>{details.marketcome}</p> | ||
| </div> | ||
| <div> | ||
| <p>거래량</p> <p>{details.tradingVolume}</p> | ||
| </div> | ||
| </StyledInfoDetailDiv> | ||
| ); | ||
|
|
||
| const InvestorTrade = ({ details }) => ( | ||
| <StyledInfoDetailDiv> | ||
| <h3>투자자별 매매동향 24.06.19</h3> | ||
| <div> | ||
| <p>외국인보유율</p> <p>{details.foreignOwnershipRate}</p> | ||
| </div> | ||
| <div> | ||
| <p>외국인매매율</p> | ||
| <p> {details.foreignTrade}</p> | ||
| </div> | ||
| <div> | ||
| <p>기관매매율</p> | ||
| <p>{details.institutionalTrade}</p> | ||
| </div> | ||
| </StyledInfoDetailDiv> | ||
| ); | ||
|
|
||
| const QuarterResult = ({ details }) => ( | ||
| <StyledInfoDetailDiv> | ||
| <h3>분기실적 2024.03.</h3> | ||
| <p>매출액: {details.revenue}</p> | ||
| <p>영업이익: {details.operatingIncome}</p> | ||
| <p>당기순이익: {details.netIncome}</p> | ||
| </StyledInfoDetailDiv> | ||
| ); | ||
|
|
||
| const StockDataComponent = ({ data }) => { | ||
| switch (data.section) { | ||
| case "시세정보": | ||
| return <SeiseInfo details={data.details} />; | ||
| case "종목정보": | ||
| return <StockInfo details={data.details} />; | ||
| case "투자자별 매매동향 24.06.19": | ||
| return <InvestorTrade details={data.details} />; | ||
| case "분기실적 2024.03.": | ||
| return <QuarterResult details={data.details} />; | ||
| default: | ||
| return <div>알 수 없는 데이터</div>; | ||
| } | ||
| }; | ||
|
|
||
| // Sample data based on your structure | ||
| const stockData = [ | ||
| { | ||
| section: "시세정보", | ||
| details: { | ||
| openingPrice: "678,000", | ||
| oneYearHigh: "718,000", | ||
| oneYearLow: "103,100", | ||
| }, | ||
| }, | ||
| { | ||
| section: "종목정보", | ||
| details: { marketcome: "4조 8,211억", tradingVolume: "193,195" }, | ||
| }, | ||
| { | ||
| section: "투자자별 매매동향 24.06.19", | ||
| details: { | ||
| foreignOwnershipRate: "12.90%", | ||
| foreignTrade: "-51,338", | ||
| institutionalTrade: "-12,688", | ||
| }, | ||
| }, | ||
| { | ||
| section: "분기실적 2024.03.", | ||
| details: { | ||
| revenue: "3,857억", | ||
| operatingIncome: "801억", | ||
| netIncome: "665억", | ||
| }, | ||
| }, | ||
| ]; | ||
|
|
||
| const StockInfoDetail = () => ( | ||
| <div style={{ display: "flex", flexDirection: "row", gap: "5px" }}> | ||
| {stockData.map((data, index) => ( | ||
| <StockDataComponent key={index} data={data} /> | ||
| ))} | ||
| </div> | ||
| ); | ||
|
|
||
| export default StockInfoDetail; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import styled from "styled-components"; | ||
|
|
||
| export const StyledInfoDetailDiv = styled.div` | ||
| width: 25%; | ||
| ascpect-ratio: 1/1; | ||
| background-color: lightgray; | ||
| border-radius: 10px; | ||
| color: black; | ||
| padding: 10px; | ||
| h3 { | ||
| font-size: 18px; | ||
| } | ||
| div { | ||
| display: flex; | ||
| flex-direction: row; | ||
| } | ||
| div p:first-child { | ||
| color: gray; | ||
| width: 30%; | ||
| } | ||
| span { | ||
| font-weight: normal; | ||
| color: gray; | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 20 additions & 15 deletions
35
src/components/common/keywordGraph/googleGraph/GoogleGraph.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,26 @@ | ||
| import React from "react"; | ||
| import React, { useEffect } from "react"; | ||
| import NormalGraph from "../../graphs/normalGraph/NormalGraph"; | ||
| export default function GoogleGraph() { | ||
| return ( | ||
| <div> | ||
| <span> | ||
| <strong>"불닭"</strong>이 이만큼 언급됐어요 | ||
| </span> | ||
|
|
||
| <div style={{ marginTop: "20px" }}> | ||
| <NormalGraph | ||
| data={[50, 30, 20, 10, 50]} | ||
| date={["24.06.01", "24.06.02", "24.06.03", "24.06.04", "24.06.05"]} | ||
| color={[66, 133, 244]} | ||
| lineSpeed={0.05} | ||
| barSpeed={0.05} | ||
| ></NormalGraph> | ||
| </div> | ||
| <div style={{ marginTop: "20px" }}> | ||
| <NormalGraph | ||
| data={[50, 30, 20, 10, 50, 50, 30, 20, 10, 50]} | ||
| date={[ | ||
| "24.06.01", | ||
| "24.06.02", | ||
| "24.06.03", | ||
| "24.06.04", | ||
| "24.06.05", | ||
| "24.06.01", | ||
| "24.06.02", | ||
| "24.06.03", | ||
| "24.06.04", | ||
| "24.06.05", | ||
| ]} | ||
| color={[66, 133, 244]} | ||
| lineSpeed={0.1} | ||
| barSpeed={0.1} | ||
| ></NormalGraph> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.