boki/stock-bot
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

finished initial symbols pages

Browse source
This commit is contained in:
Boki 2025-07-02 20:53:26 -04:00
parent 62706cdb42
commit 4e4a048988
13 changed files with 688 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

25
apps/stock/web-app/src/features/charts/ChartPage.tsx
View file

@ -42,9 +42,14 @@ function generateMockData(days: number = 365): CandlestickData[] {
return data;
}
export function ChartPage() {
interface ChartPageProps {
symbol?: string;
showHeader?: boolean;
}
export function ChartPage({ symbol = 'AAPL', showHeader = true }: ChartPageProps = {}) {
const [config, setConfig] = useState<ChartConfig>({
symbol: 'AAPL',
symbol,
interval: '1d',
chartType: 'candlestick',
showVolume: true,
@ -201,14 +206,16 @@ export function ChartPage() {
return (
<div className="flex flex-col h-full">
<div className="flex-shrink-0">
<h1 className="text-lg font-bold text-text-primary mb-2 px-8 pt-4">Market Charts</h1>
<p className="text-text-secondary mb-4 text-sm px-8">
Real-time market data and advanced charting powered by TradingView.
</p>
</div>
{showHeader && (
<div className="flex-shrink-0">
<h1 className="text-lg font-bold text-text-primary mb-2 px-8 pt-4">Market Charts</h1>
<p className="text-text-secondary mb-4 text-sm px-8">
Real-time market data and advanced charting powered by TradingView.
</p>
</div>
)}
<div className="flex-1 flex bg-surface-secondary rounded-lg border border-border mx-8 mb-8 overflow-hidden">
<div className={`flex-1 flex bg-surface-secondary ${showHeader ? 'rounded-lg border border-border mx-8 mb-8' : ''} overflow-hidden`}>
{/* Left Sidebar - Indicator List */}
{showSidebar && (
<IndicatorList

28
apps/stock/web-app/src/features/charts/components/ChartToolbar.tsx
View file

@ -27,19 +27,8 @@ const chartTypes: { value: ChartType; label: string; icon?: typeof ChartBarIcon
export function ChartToolbar({ config, onConfigChange }: ChartToolbarProps) {
return (
<div className="flex items-center justify-between gap-4 p-4 bg-surface-secondary border-b border-border">
<div className="flex items-center gap-4">
{/* Symbol Input */}
<div className="flex items-center gap-2">
<input
type="text"
value={config.symbol}
onChange={(e) => onConfigChange({ symbol: e.target.value.toUpperCase() })}
placeholder="Symbol"
className="px-3 py-1.5 bg-background border border-border rounded-md text-sm font-medium text-text-primary focus:outline-none focus:ring-1 focus:ring-primary-500 w-24"
/>
</div>
<div className="flex items-center justify-between gap-2 bg-surface-secondary border-b border-border">
<div className="flex items-center gap-2">
{/* Interval Selector */}
<div className="flex items-center gap-1 bg-background rounded-md border border-border p-0.5">
{intervals.map(({ value, label }) => (
@ -76,19 +65,6 @@ export function ChartToolbar({ config, onConfigChange }: ChartToolbarProps) {
</div>
<div className="flex items-center gap-2">
{/* Volume Toggle */}
<button
onClick={() => onConfigChange({ showVolume: !config.showVolume })}
className={`px-3 py-1.5 text-xs font-medium rounded-md border transition-colors ${
config.showVolume
? 'bg-primary-500 text-white border-primary-500'
: 'bg-background text-text-secondary border-border hover:text-text-primary hover:border-primary-500/50'
}`}
>
Volume
</button>
{/* Theme Toggle */}
<button
onClick={() => onConfigChange({ theme: config.theme === 'dark' ? 'light' : 'dark' })}