♻️Refactor: modularize chart gradients with a configuration array

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',
   },
 ];

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="flex items-center justify-center">
-      <div className="w-full max-w-[39.8rem] mx-6">
+    <div className="flex flex-col items-center justify-center">
+      <Title text={'Chart'} />
+      <div className="w-full max-w-[39.8rem]">
         <ChartItem />
       </div>
     </div>

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;

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,38 +83,53 @@ 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,
+                }}
               />
             )}
 
             {(filter === 'ALL' || filter === 'Ethereum') && (
               <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,
+                }}
               />
             )}
 
             {(filter === 'ALL' || filter === 'Solana') && (
               <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>

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>

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;