Fullstack/iboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Fullstack:64c4a0324137a6d0600dac01d47b8aca1c6d5d6f
Branches Tags
Fullstack:master
Fullstack:android-1.0
..
compare: Fullstack:7d83069100c3d09a34f9c2053767eb4339e81ce6
Branches Tags
Fullstack:master
Fullstack:android-1.0

No commits in common. "64c4a0324137a6d0600dac01d47b8aca1c6d5d6f" and "7d83069100c3d09a34f9c2053767eb4339e81ce6" have entirely different histories.
64c4a03241 ... 7d83069100

4 changed files with 638 additions and 889 deletions
Show Stats Expand all files Collapse all files

1165
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -10,8 +10,7 @@
"dependencies": {
"next": "^14.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"recharts": "^3.8.1"
"react-dom": "^18.2.0"
},
"keywords": [],
"author": "",

227
pages/data.js
View File

@ -1,73 +1,8 @@
import { useState } from 'react'
import Head from 'next/head'
import Navbar from '../components/Navbar'
import Footer from '../components/Footer'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
const chinaBondData = [
{ month: '2024-01', oneYear: 1.85, fiveYear: 2.45, tenYear: 2.65 },
{ month: '2024-02', oneYear: 1.82, fiveYear: 2.42, tenYear: 2.62 },
{ month: '2024-03', oneYear: 1.78, fiveYear: 2.38, tenYear: 2.58 },
{ month: '2024-04', oneYear: 1.75, fiveYear: 2.35, tenYear: 2.55 },
{ month: '2024-05', oneYear: 1.72, fiveYear: 2.32, tenYear: 2.52 },
{ month: '2024-06', oneYear: 1.68, fiveYear: 2.28, tenYear: 2.48 },
{ month: '2024-07', oneYear: 1.65, fiveYear: 2.25, tenYear: 2.45 },
{ month: '2024-08', oneYear: 1.62, fiveYear: 2.22, tenYear: 2.42 },
{ month: '2024-09', oneYear: 1.58, fiveYear: 2.18, tenYear: 2.38 },
{ month: '2024-10', oneYear: 1.55, fiveYear: 2.15, tenYear: 2.35 },
{ month: '2024-11', oneYear: 1.52, fiveYear: 2.12, tenYear: 2.32 },
{ month: '2024-12', oneYear: 1.48, fiveYear: 2.08, tenYear: 2.28 }
]
const usBondData = [
{ month: '2024-01', oneYear: 4.85, fiveYear: 4.25, tenYear: 3.95 },
{ month: '2024-02', oneYear: 4.82, fiveYear: 4.22, tenYear: 3.92 },
{ month: '2024-03', oneYear: 4.78, fiveYear: 4.18, tenYear: 3.88 },
{ month: '2024-04', oneYear: 4.65, fiveYear: 4.05, tenYear: 3.75 },
{ month: '2024-05', oneYear: 4.55, fiveYear: 3.95, tenYear: 3.65 },
{ month: '2024-06', oneYear: 4.45, fiveYear: 3.85, tenYear: 3.55 },
{ month: '2024-07', oneYear: 4.35, fiveYear: 3.75, tenYear: 3.45 },
{ month: '2024-08', oneYear: 4.25, fiveYear: 3.65, tenYear: 3.35 },
{ month: '2024-09', oneYear: 4.15, fiveYear: 3.55, tenYear: 3.25 },
{ month: '2024-10', oneYear: 4.05, fiveYear: 3.45, tenYear: 3.15 },
{ month: '2024-11', oneYear: 3.95, fiveYear: 3.35, tenYear: 3.05 },
{ month: '2024-12', oneYear: 3.85, fiveYear: 3.25, tenYear: 2.95 }
]
const chinaLPRData = [
{ month: '2024-01', oneYear: 3.45, fiveYear: 3.95 },
{ month: '2024-02', oneYear: 3.45, fiveYear: 3.95 },
{ month: '2024-03', oneYear: 3.45, fiveYear: 3.95 },
{ month: '2024-04', oneYear: 3.40, fiveYear: 3.90 },
{ month: '2024-05', oneYear: 3.40, fiveYear: 3.90 },
{ month: '2024-06', oneYear: 3.40, fiveYear: 3.90 },
{ month: '2024-07', oneYear: 3.35, fiveYear: 3.85 },
{ month: '2024-08', oneYear: 3.35, fiveYear: 3.85 },
{ month: '2024-09', oneYear: 3.35, fiveYear: 3.85 },
{ month: '2024-10', oneYear: 3.30, fiveYear: 3.80 },
{ month: '2024-11', oneYear: 3.30, fiveYear: 3.80 },
{ month: '2024-12', oneYear: 3.30, fiveYear: 3.80 }
]
export default function Data() {
const [selectedIndicator, setSelectedIndicator] = useState('bond-china-treasury')
const indicators = [
{
group: '债券',
items: [
{ id: 'bond-china-treasury', name: '中国国债' },
{ id: 'bond-us-treasury', name: '美国国债' }
]
},
{
group: '贷款',
items: [
{ id: 'loan-china-lpr', name: '中国LPR' }
]
}
]
return (
<div className="container">
<Head>
@ -86,161 +21,25 @@ export default function Data() {
各种经济数据和图表
</p>
<div className="data-layout">
<div className="data-sidebar">
{indicators.map((group, groupIndex) => (
<div key={groupIndex} className="indicator-group">
<h3 className="group-title">{group.group}</h3>
<ul className="indicator-list">
{group.items.map((item) => (
<li
key={item.id}
className={`indicator-item ${selectedIndicator === item.id ? 'active' : ''}`}
onClick={() => setSelectedIndicator(item.id)}
>
{item.name}
</li>
))}
</ul>
</div>
))}
<div className="grid">
<div className="card">
<h2>GDP 数据</h2>
<p>国内生产总值及其增长趋势</p>
</div>
<div className="data-content">
{selectedIndicator === 'bond-china-treasury' && (
<div className="indicator-detail">
<h2 className="indicator-title">中国国债收益率走势</h2>
<p className="indicator-description">展示一年期、五年期、十年期国债收益率的变化趋势</p>
<div className="chart-container">
<ResponsiveContainer width="100%" height={500}>
<LineChart data={chinaBondData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="month" />
<YAxis domain={['dataMin - 0.2', 'dataMax + 0.2']} />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="oneYear" name="一年期" stroke="#8884d8" strokeWidth={2} activeDot={{ r: 8 }} />
<Line type="monotone" dataKey="fiveYear" name="五年期" stroke="#82ca9d" strokeWidth={2} />
<Line type="monotone" dataKey="tenYear" name="十年期" stroke="#ffc658" strokeWidth={2} />
</LineChart>
</ResponsiveContainer>
<div className="card">
<h2>通货膨胀</h2>
<p>消费者价格指数和通胀率</p>
</div>
<div className="data-table-container">
<h3 className="table-title">详细数据</h3>
<table className="data-table">
<thead>
<tr>
<th>月份</th>
<th>一年期(%)</th>
<th>五年期(%)</th>
<th>十年期(%)</th>
</tr>
</thead>
<tbody>
{chinaBondData.map((row, index) => (
<tr key={index}>
<td>{row.month}</td>
<td>{row.oneYear.toFixed(2)}</td>
<td>{row.fiveYear.toFixed(2)}</td>
<td>{row.tenYear.toFixed(2)}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
)}
{selectedIndicator === 'bond-us-treasury' && (
<div className="indicator-detail">
<h2 className="indicator-title">美国国债收益率走势</h2>
<p className="indicator-description">展示一年期、五年期、十年期国债收益率的变化趋势</p>
<div className="chart-container">
<ResponsiveContainer width="100%" height={500}>
<LineChart data={usBondData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="month" />
<YAxis domain={['dataMin - 0.2', 'dataMax + 0.2']} />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="oneYear" name="一年期" stroke="#ff7300" strokeWidth={2} activeDot={{ r: 8 }} />
<Line type="monotone" dataKey="fiveYear" name="五年期" stroke="#0088fe" strokeWidth={2} />
<Line type="monotone" dataKey="tenYear" name="十年期" stroke="#00C49F" strokeWidth={2} />
</LineChart>
</ResponsiveContainer>
<div className="card">
<h2>失业率</h2>
<p>劳动力市场数据和就业趋势</p>
</div>
<div className="data-table-container">
<h3 className="table-title">详细数据</h3>
<table className="data-table">
<thead>
<tr>
<th>月份</th>
<th>一年期(%)</th>
<th>五年期(%)</th>
<th>十年期(%)</th>
</tr>
</thead>
<tbody>
{usBondData.map((row, index) => (
<tr key={index}>
<td>{row.month}</td>
<td>{row.oneYear.toFixed(2)}</td>
<td>{row.fiveYear.toFixed(2)}</td>
<td>{row.tenYear.toFixed(2)}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
)}
{selectedIndicator === 'loan-china-lpr' && (
<div className="indicator-detail">
<h2 className="indicator-title">中国LPR走势</h2>
<p className="indicator-description">展示一年期和五年期贷款市场报价利率(LPR)的变化趋势</p>
<div className="chart-container">
<ResponsiveContainer width="100%" height={500}>
<LineChart data={chinaLPRData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="month" />
<YAxis domain={['dataMin - 0.2', 'dataMax + 0.2']} />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="oneYear" name="一年期LPR" stroke="#e6194b" strokeWidth={2} activeDot={{ r: 8 }} />
<Line type="monotone" dataKey="fiveYear" name="五年期LPR" stroke="#3cb44b" strokeWidth={2} />
</LineChart>
</ResponsiveContainer>
</div>
<div className="data-table-container">
<h3 className="table-title">详细数据</h3>
<table className="data-table">
<thead>
<tr>
<th>月份</th>
<th>一年期LPR(%)</th>
<th>五年期LPR(%)</th>
</tr>
</thead>
<tbody>
{chinaLPRData.map((row, index) => (
<tr key={index}>
<td>{row.month}</td>
<td>{row.oneYear.toFixed(2)}</td>
<td>{row.fiveYear.toFixed(2)}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
)}
<div className="card">
<h2>贸易数据</h2>
<p>进出口贸易和国际收支</p>
</div>
</div>
</main>

124
styles/globals.css
View File

@ -117,127 +117,3 @@ main {
max-width: 1200px;
margin: 0 auto;
}
/* Data page layout */
.data-layout {
display: flex;
gap: 2rem;
margin-top: 2rem;
}
.data-sidebar {
width: 250px;
flex-shrink: 0;
}
.data-content {
flex: 1;
min-width: 0;
}
.indicator-group {
margin-bottom: 1.5rem;
}
.group-title {
font-size: 1.1rem;
font-weight: 600;
color: #333;
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #ddd;
}
.indicator-list {
list-style: none;
padding: 0;
margin: 0;
}
.indicator-item {
padding: 0.75rem 1rem;
margin-bottom: 0.5rem;
background-color: white;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.indicator-item:hover {
background-color: #f0f0f0;
transform: translateX(4px);
}
.indicator-item.active {
background-color: #333;
color: white;
}
.indicator-detail {
background-color: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.indicator-title {
font-size: 1.8rem;
color: #333;
margin-bottom: 0.5rem;
}
.indicator-description {
color: #666;
margin-bottom: 2rem;
}
.chart-container {
margin-bottom: 3rem;
padding: 1rem;
background-color: #fafafa;
border-radius: 8px;
}
.data-table-container {
margin-top: 2rem;
}
.table-title {
font-size: 1.3rem;
color: #333;
margin-bottom: 1rem;
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
.data-table th,
.data-table td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid #eee;
}
.data-table th {
background-color: #f5f5f5;
font-weight: 600;
color: #333;
}
.data-table tbody tr:hover {
background-color: #f9f9f9;
}
@media (max-width: 900px) {
.data-layout {
flex-direction: column;
}
.data-sidebar {
width: 100%;
}
}