Add chart view toggle: Both / Portfolio / 1-Year BTC
Tab bar above charts lets the user switch between showing both charts stacked, or either chart individually. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -19,6 +19,9 @@ const styles = {
|
|||||||
positive: { color: '#6bff8e' },
|
positive: { color: '#6bff8e' },
|
||||||
negative: { color: '#ff6b6b' },
|
negative: { color: '#ff6b6b' },
|
||||||
neutral: { color: '#f7931a' },
|
neutral: { color: '#f7931a' },
|
||||||
|
tabs: { display: 'flex', gap: '0.5rem', marginBottom: '1rem' },
|
||||||
|
tab: { padding: '0.45rem 1.1rem', borderRadius: '8px', border: '1px solid #444', background: 'none', color: '#888', cursor: 'pointer', fontSize: '0.9rem' },
|
||||||
|
tabActive: { padding: '0.45rem 1.1rem', borderRadius: '8px', border: '1px solid #f7931a', background: 'rgba(247,147,26,0.1)', color: '#f7931a', cursor: 'pointer', fontSize: '0.9rem', fontWeight: 700 },
|
||||||
};
|
};
|
||||||
|
|
||||||
function StatCard({ label, value, highlight }) {
|
function StatCard({ label, value, highlight }) {
|
||||||
@@ -34,6 +37,7 @@ export default function Dashboard() {
|
|||||||
const [stats, setStats] = useState(null);
|
const [stats, setStats] = useState(null);
|
||||||
const [purchases, setPurchases] = useState([]);
|
const [purchases, setPurchases] = useState([]);
|
||||||
const [history, setHistory] = useState(null);
|
const [history, setHistory] = useState(null);
|
||||||
|
const [chartView, setChartView] = useState('both'); // 'both' | 'portfolio' | 'history'
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const authHeaders = () => ({
|
const authHeaders = () => ({
|
||||||
@@ -95,8 +99,17 @@ export default function Dashboard() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<PortfolioChart purchases={purchases} stats={stats} />
|
<div style={styles.tabs}>
|
||||||
<BTCHistoryChart history={history} stats={stats} />
|
{[['both', 'Both'], ['portfolio', 'Portfolio'], ['history', '1-Year BTC']].map(([key, label]) => (
|
||||||
|
<button
|
||||||
|
key={key}
|
||||||
|
style={chartView === key ? styles.tabActive : styles.tab}
|
||||||
|
onClick={() => setChartView(key)}
|
||||||
|
>{label}</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{(chartView === 'both' || chartView === 'portfolio') && <PortfolioChart purchases={purchases} stats={stats} />}
|
||||||
|
{(chartView === 'both' || chartView === 'history') && <BTCHistoryChart history={history} stats={stats} />}
|
||||||
<AddPurchase onAdded={fetchData} />
|
<AddPurchase onAdded={fetchData} />
|
||||||
<PurchaseList purchases={purchases} onChanged={fetchData} />
|
<PurchaseList purchases={purchases} onChanged={fetchData} />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user