bytelyst/learning_ai_invt_trdg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): tokenize shared price chart surfaces

Browse Source
This commit is contained in:
root 2026-05-07 05:29:38 +00:00
parent eedac75644
commit 1b9efcaddd
2 changed files with 36 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
web/src/components/PriceChart.css
View File

@ -1,10 +1,10 @@
.price-chart { .price-chart {
margin: 16px 0; margin: 16px 0;
padding: 12px; padding: 12px;
background: rgba(255, 255, 255, 0.03); background: color-mix(in oklab, var(--foreground) 3%, transparent);
border-radius: 12px; border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid var(--bl-border-subtle);
} }
.chart-header { .chart-header {
display: flex; display: flex;
@ -13,9 +13,9 @@
margin-bottom: 8px; margin-bottom: 8px;
} }
.chart-label { .chart-label {
font-size: 12px; font-size: 12px;
color: #888; color: var(--bl-text-faint);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
font-weight: 600; font-weight: 600;
@ -26,19 +26,19 @@
font-weight: 700; font-weight: 700;
} }
.chart-change.positive { .chart-change.positive {
color: #00ff88; color: var(--bl-success);
} }
.chart-change.negative { .chart-change.negative {
color: #ff3366; color: var(--bl-danger);
} }
.price-chart-empty { .price-chart-empty {
height: 120px; height: 120px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #666; color: var(--bl-text-quiet);
font-size: 13px; font-size: 13px;
} }

23
web/src/components/PriceChart.tsx
View File

@ -6,7 +6,7 @@ interface PriceChartProps {
currentPrice: number; currentPrice: number;
} }
export const PriceChart = ({ data, currentPrice }: PriceChartProps) => { export const PriceChart = ({ data, currentPrice }: PriceChartProps) => {
if (!data || data.length === 0) { if (!data || data.length === 0) {
return ( return (
<div className="price-chart-empty"> <div className="price-chart-empty">
@ -18,7 +18,7 @@ export const PriceChart = ({ data, currentPrice }: PriceChartProps) => {
// Determine if price is trending up or down // Determine if price is trending up or down
const firstPrice = data[0]?.price || currentPrice; const firstPrice = data[0]?.price || currentPrice;
const priceChange = ((currentPrice - firstPrice) / firstPrice) * 100; const priceChange = ((currentPrice - firstPrice) / firstPrice) * 100;
const lineColor = priceChange >= 0 ? '#00ff88' : '#ff3366'; const lineColor = priceChange >= 0 ? 'var(--bl-success)' : 'var(--bl-danger)';
// Format data for chart // Format data for chart
const chartData = data.map(point => ({ const chartData = data.map(point => ({
@ -38,7 +38,7 @@ export const PriceChart = ({ data, currentPrice }: PriceChartProps) => {
<LineChart data={chartData} margin={{ top: 5, right: 5, bottom: 5, left: 5 }}> <LineChart data={chartData} margin={{ top: 5, right: 5, bottom: 5, left: 5 }}>
<XAxis <XAxis
dataKey="time" dataKey="time"
tick={{ fontSize: 10, fill: '#666' }} tick={{ fontSize: 10, fill: 'var(--bl-text-quiet)' }}
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
hide hide
@ -48,14 +48,15 @@ export const PriceChart = ({ data, currentPrice }: PriceChartProps) => {
hide hide
/> />
<Tooltip <Tooltip
contentStyle={{ contentStyle={{
backgroundColor: 'rgba(30, 30, 46, 0.95)', backgroundColor: 'color-mix(in oklab, var(--bl-surface-overlay) 95%, var(--card-elevated))',
border: '1px solid rgba(255, 255, 255, 0.1)', border: '1px solid var(--bl-border-subtle)',
borderRadius: '8px', borderRadius: '8px',
fontSize: '12px' fontSize: '12px',
}} color: 'var(--foreground)',
labelStyle={{ color: '#888' }} }}
itemStyle={{ color: lineColor }} labelStyle={{ color: 'var(--bl-text-faint)' }}
itemStyle={{ color: lineColor }}
/> />
<Line <Line
type="monotone" type="monotone"