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

chart kinda done

Browse source
This commit is contained in:
Boki 2025-07-02 20:10:56 -04:00
parent 1b9010ebf4
commit 62706cdb42
2 changed files with 49 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -169,9 +169,20 @@ export function ChartPage() {
}; };
const handleToggleIndicatorVisibility = (id: string) => { const handleToggleIndicatorVisibility = (id: string) => {
setActiveIndicators(prev => prev.map(i => setActiveIndicators(prev => {
i.id === id ? { ...i, visible: !i.visible } : i const updated = prev.map(i =>
)); i.id === id ? { ...i, visible: !i.visible } : i
);
// Force chart update by also updating config
if (id === 'VOLUME') {
const volumeIndicator = updated.find(i => i.id === 'VOLUME');
setConfig(prevConfig => ({
...prevConfig,
showVolume: volumeIndicator?.visible ?? true
}));
}
return updated;
});
}; };
const handleIndicatorSettings = (id: string) => { const handleIndicatorSettings = (id: string) => {

69
apps/stock/web-app/src/features/charts/components/SymbolChart.tsx
View file

@ -102,8 +102,8 @@ export function SymbolChart({
chartRef.current = chart; chartRef.current = chart;
// Clear previous indicator series references // Create a new map for this chart instance
indicatorSeriesRef.current.clear(); indicatorSeriesRef.current = new Map();
// Create main series based on chart type // Create main series based on chart type
if (chartConfig.chartType === 'candlestick') { if (chartConfig.chartType === 'candlestick') {
@ -134,14 +134,18 @@ export function SymbolChart({
}); });
} }
// Create volume series if enabled // Create volume series if data has volume
if (chartConfig.showVolume && data.some(d => d.volume)) { if (data.some(d => d.volume)) {
const volumeIndicator = activeIndicators.find(i => i.id === 'VOLUME');
const volumeVisible = volumeIndicator ? volumeIndicator.visible : chartConfig.showVolume;
volumeSeriesRef.current = chart.addHistogramSeries({ volumeSeriesRef.current = chart.addHistogramSeries({
color: '#3b82f680', color: '#3b82f680',
priceFormat: { priceFormat: {
type: 'volume', type: 'volume',
}, },
priceScaleId: 'volume', priceScaleId: 'volume',
visible: volumeVisible,
}); });
volumeSeriesRef.current.priceScale().applyOptions({ volumeSeriesRef.current.priceScale().applyOptions({
scaleMargins: { scaleMargins: {
@ -311,6 +315,7 @@ export function SymbolChart({
// Cleanup // Cleanup
return () => { return () => {
window.removeEventListener('resize', handleResize); window.removeEventListener('resize', handleResize);
setChartInitialized(false);
if (chart) { if (chart) {
chart.remove(); chart.remove();
} }
@ -348,42 +353,38 @@ export function SymbolChart({
// Handle indicator visibility changes without recreating chart // Handle indicator visibility changes without recreating chart
useEffect(() => { useEffect(() => {
if (!chartRef.current) return; if (!chartRef.current || !chartInitialized) return;
// Small delay to ensure chart is fully initialized // Update volume visibility
const timeoutId = setTimeout(() => { if (volumeSeriesRef.current) {
// Update volume visibility const volumeIndicator = activeIndicators.find(i => i.id === 'VOLUME');
if (volumeSeriesRef.current) { const volumeVisible = volumeIndicator ? volumeIndicator.visible : chartConfig.showVolume;
const volumeVisible = chartConfig.showVolume; volumeSeriesRef.current.applyOptions({
volumeSeriesRef.current.applyOptions({ visible: volumeVisible,
visible: volumeVisible, });
}); }
}
// Update indicator visibility // Update indicator visibility
activeIndicators.forEach(indicator => { activeIndicators.forEach(indicator => {
if (indicator.id === 'VOLUME') return; // Skip volume, handled above if (indicator.id === 'VOLUME') return; // Skip volume, handled above
// For indicators with multiple series (like Bollinger Bands) // For indicators with multiple series (like Bollinger Bands)
if (indicator.id === 'BB') { if (indicator.id === 'BB') {
['BB_upper', 'BB_middle', 'BB_lower'].forEach(seriesId => { ['BB_upper', 'BB_middle', 'BB_lower'].forEach(seriesId => {
const series = indicatorSeriesRef.current.get(seriesId); const series = indicatorSeriesRef.current.get(seriesId);
if (series) {
series.applyOptions({ visible: indicator.visible });
}
});
} else {
// For single series indicators
const series = indicatorSeriesRef.current.get(indicator.id);
if (series) { if (series) {
series.applyOptions({ visible: indicator.visible }); series.applyOptions({ visible: indicator.visible });
} }
});
} else {
// For single series indicators
const series = indicatorSeriesRef.current.get(indicator.id);
if (series) {
series.applyOptions({ visible: indicator.visible });
} }
}); }
}, 100); });
}, [chartConfig.showVolume, visibilityKey, chartInitialized]);
return () => clearTimeout(timeoutId);
}, [chartConfig.showVolume, visibilityKey]);
// Prepare indicator info for overlay - include all indicators // Prepare indicator info for overlay - include all indicators
const indicatorInfo = activeIndicators.map(indicator => ({ const indicatorInfo = activeIndicators.map(indicator => ({