diff --git a/package-lock.json b/package-lock.json index f5d4221..3a0d4b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -70,7 +70,6 @@ "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -3228,7 +3227,6 @@ "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.12.tgz", "integrity": "sha512-graRZspg7EoEaw0a8faiUASCyJrqjKPdqJ9EwuDRUF9mEYJ1YPczI9H+/agJ0mOJkPCJDk0lsz5QTrLZ/jQ2rg==", "license": "MIT", - "peer": true, "dependencies": { "@tanstack/query-core": "5.90.12" }, @@ -3339,7 +3337,6 @@ "integrity": "sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -3350,7 +3347,6 @@ "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -3430,7 +3426,6 @@ "integrity": "sha512-6/cmF2piao+f6wSxUsJLZjck7OQsYyRtcOZS02k7XINSNlz93v6emM8WutDQSXnroG2xwYlEVHJI+cPA7CPM3Q==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.50.0", "@typescript-eslint/types": "8.50.0", @@ -3678,7 +3673,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "devOptional": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -3938,7 +3932,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -4734,7 +4727,6 @@ "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -6952,7 +6944,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz", "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -6962,7 +6953,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz", "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -6982,7 +6972,6 @@ "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==", "license": "MIT", - "peer": true, "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" @@ -7083,8 +7072,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/redux-thunk": { "version": "3.1.0", @@ -7936,7 +7924,6 @@ "integrity": "sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==", "devOptional": true, "license": "BSD-2-Clause", - "peer": true, "dependencies": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.15.0", @@ -8111,7 +8098,6 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -8325,7 +8311,6 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz", "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==", "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", @@ -8717,7 +8702,6 @@ "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -8775,7 +8759,6 @@ "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==", "dev": true, "license": "MIT", - "peer": true, "bin": { "rollup": "dist/bin/rollup" }, @@ -9044,7 +9027,6 @@ "integrity": "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==", "dev": true, "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/src/mocks/filterData.ts b/src/mocks/filterData.ts index 2e8a112..0102e5e 100644 --- a/src/mocks/filterData.ts +++ b/src/mocks/filterData.ts @@ -6,17 +6,17 @@ export const filterData = [ }, { id: 2, - label: 'Subject1', - value: 'Subject1', + label: 'Bitcoin', + value: 'Bitcoin', }, { id: 3, - label: 'Subject2', - value: 'Subject2', + label: 'Ethereum', + value: 'Ethereum', }, { id: 4, - label: 'Subject3', - value: 'Subject3', + label: 'Solana', + value: 'Solana', }, ]; diff --git a/src/pages/home/components/Chart/Chart.tsx b/src/pages/home/components/Chart/Chart.tsx index 2a0f05f..2632749 100644 --- a/src/pages/home/components/Chart/Chart.tsx +++ b/src/pages/home/components/Chart/Chart.tsx @@ -1,9 +1,11 @@ +import Title from '../../../../components/Title/Title'; import ChartItem from './ChartItem'; function Chart() { return ( -
-
+
+ + <div className="w-full max-w-[39.8rem]"> <ChartItem /> </div> </div> diff --git a/src/pages/home/components/Chart/ChartGradients.tsx b/src/pages/home/components/Chart/ChartGradients.tsx new file mode 100644 index 0000000..80f7de6 --- /dev/null +++ b/src/pages/home/components/Chart/ChartGradients.tsx @@ -0,0 +1,28 @@ +const GRADIENT_CONFIGS = [ + { id: 'colorSub1', color: '#8979FF' }, + { id: 'colorSub2', color: '#FF928A' }, + { id: 'colorSub3', color: '#3CC3DF' }, +]; + +const ChartGradients = () => { + return ( + <defs> + {GRADIENT_CONFIGS.map((config) => ( + <linearGradient + key={config.id} + id={config.id} + x1="156.074" + y1="0" + x2="156.074" + y2="73.7162" + gradientUnits="userSpaceOnUse" + > + <stop stopColor={config.color} stopOpacity="0.2" /> + <stop offset="1" stopColor={config.color} stopOpacity="0.05" /> + </linearGradient> + ))} + </defs> + ); +}; + +export default ChartGradients; diff --git a/src/pages/home/components/Chart/ChartItem.tsx b/src/pages/home/components/Chart/ChartItem.tsx index ef76b0c..2e48cbd 100644 --- a/src/pages/home/components/Chart/ChartItem.tsx +++ b/src/pages/home/components/Chart/ChartItem.tsx @@ -1,4 +1,3 @@ -import { useState } from 'react'; import { AreaChart, Area, @@ -9,6 +8,8 @@ import { ResponsiveContainer, } from 'recharts'; import ChartSInfo from './ChartSInfo'; +import { useFilterStore } from '../../../../stores/filterStore'; +import ChartGradients from './ChartGradients'; interface ChartDataItem { name: string; @@ -32,7 +33,8 @@ const data: ChartDataItem[] = [ ]; function ChartItem() { - const [filter] = useState<StockType>('Bitcoin'); + const currentState = useFilterStore((state) => state.selectedFilter); + const filter = currentState as StockType; return ( <div className="flex items-center justify-center min-h-[16.8rem] bg-white rounded-xl"> @@ -43,20 +45,7 @@ function ChartItem() { data={data} margin={{ top: 25, right: 20, left: -30, bottom: -5 }} > - <defs> - <linearGradient id="colorSub1" x1="0" y1="0" x2="0" y2="1"> - <stop stopColor="#8979FF" stopOpacity="0.2" /> - <stop offset="1" stopColor="#8979FF" stopOpacity="0.05" /> - </linearGradient> - <linearGradient id="colorSub2" x1="0" y1="0" x2="0" y2="1"> - <stop stopColor="#FF928A" stopOpacity="0.2" /> - <stop offset="1" stopColor="#FF928A" stopOpacity="0.05" /> - </linearGradient> - <linearGradient id="colorSub3" x1="0" y1="0" x2="0" y2="1"> - <stop stopColor="#3CC3DF" stopOpacity="0.2" /> - <stop offset="1" stopColor="#3CC3DF" stopOpacity="0.05" /> - </linearGradient> - </defs> + <ChartGradients /> <CartesianGrid strokeDasharray="3 3" @@ -74,7 +63,10 @@ function ChartItem() { <YAxis domain={[-1, 1]} - ticks={[-1, 0, 1]} + ticks={[-1, -0.5, 0, 0.5, 1]} + tickFormatter={(value) => + [-1, 0, 1].includes(value) ? value : '' + } axisLine={false} tickLine={false} tick={{ fill: 'var(--color-black)', fontSize: 8 }} @@ -91,12 +83,17 @@ function ChartItem() { <Area type="monotone" dataKey="subject1" - stroke="#8884d8" + stroke="var(--color-chart-red)" strokeWidth={1} fillOpacity={1} - fill="url(#colorSub1)" + fill="url(#colorSub2)" baseValue={-1} - dot={{ r: 3, fill: '#fff', stroke: '#8884d8', strokeWidth: 1 }} + dot={{ + r: 3, + fill: 'var(--color-white)', + stroke: 'var(--color-chart-red)', + strokeWidth: 1, + }} /> )} @@ -104,12 +101,17 @@ function ChartItem() { <Area type="monotone" dataKey="subject2" - stroke="#ff7c7c" + stroke="var(--color-chart-purple)" strokeWidth={1} fillOpacity={1} - fill="url(#colorSub2)" + fill="url(#colorSub1)" baseValue={-1} - dot={{ r: 3, fill: '#fff', stroke: '#ff7c7c', strokeWidth: 1 }} + dot={{ + r: 3, + fill: 'var(--color-white)', + stroke: 'var(--color-chart-purple)', + strokeWidth: 1, + }} /> )} @@ -117,12 +119,17 @@ function ChartItem() { <Area type="monotone" dataKey="subject3" - stroke="#2dd4bf" + stroke="var(--color-chart-green)" strokeWidth={1} fillOpacity={1} fill="url(#colorSub3)" baseValue={-1} - dot={{ r: 3, fill: '#fff', stroke: '#2dd4bf', strokeWidth: 1 }} + dot={{ + r: 3, + fill: 'var(--color-white)', + stroke: 'var(--color-chart-green)', + strokeWidth: 1, + }} /> )} </AreaChart> diff --git a/src/pages/home/components/Chart/ChartSInfo.tsx b/src/pages/home/components/Chart/ChartSInfo.tsx index 68a9e91..ed26e05 100644 --- a/src/pages/home/components/Chart/ChartSInfo.tsx +++ b/src/pages/home/components/Chart/ChartSInfo.tsx @@ -4,7 +4,7 @@ import sol from '../../../../assets/chart/solana.png'; function ChartSInfo() { return ( - <div className="absolute flex w-full justify-center items-center gap-6"> + <div className="absolute flex w-full -top-2 justify-center items-center gap-6"> <div className="flex justify-center items-center gap-0.5"> <img src={bit} alt="bitcoin" className="w-5 h-5" /> <span>bitcoin</span> diff --git a/src/styles/theme.css b/src/styles/theme.css index 08a2efa..0a0916f 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -16,6 +16,11 @@ --color-red: #f84545; --color-red-light: #fff5f5; + /* chart color */ + --color-chart-red: #ff928a; + --color-chart-purple: #8979ff; + --color-chart-green: #3cc3df; + /* gray color */ --color-gray-100: #ccc; --color-gray-200: #9fa3a9;