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

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

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

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

@ -18,7 +18,7 @@ export const PriceChart = ({ data, currentPrice }: PriceChartProps) => {
// Determine if price is trending up or down
const firstPrice = data[0]?.price || currentPrice;
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
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 }}>
<XAxis
dataKey="time"
tick={{ fontSize: 10, fill: '#666' }}
tick={{ fontSize: 10, fill: 'var(--bl-text-quiet)' }}
tickLine={false}
axisLine={false}
hide
@ -49,12 +49,13 @@ export const PriceChart = ({ data, currentPrice }: PriceChartProps) => {
/>
<Tooltip
contentStyle={{
backgroundColor: 'rgba(30, 30, 46, 0.95)',
border: '1px solid rgba(255, 255, 255, 0.1)',
backgroundColor: 'color-mix(in oklab, var(--bl-surface-overlay) 95%, var(--card-elevated))',
border: '1px solid var(--bl-border-subtle)',
borderRadius: '8px',
fontSize: '12px'
fontSize: '12px',
color: 'var(--foreground)',
}}
labelStyle={{ color: '#888' }}
labelStyle={{ color: 'var(--bl-text-faint)' }}
itemStyle={{ color: lineColor }}
/>
<Line