Browse Source

图表的一些简单修复。

skyfffire 17 hours ago
parent
commit
c9d7611ae2
1 changed files with 25 additions and 81 deletions
  1. 25 81
      src/leadlag/templates/dashboard.html

+ 25 - 81
src/leadlag/templates/dashboard.html

@@ -311,12 +311,12 @@
         </div>
         </div>
 
 
         <div class="chart-container">
         <div class="chart-container">
-            <h2>📈 价格走势图</h2>
+            <h2>📈 价格观测图</h2>
             <div class="chart-wrapper" id="priceChart"></div>
             <div class="chart-wrapper" id="priceChart"></div>
         </div>
         </div>
 
 
         <div class="chart-container">
         <div class="chart-container">
-            <h2>📊 价差走势图 (BPS)</h2>
+            <h2 id="bpsChartTitle">📊 价差走势图 (BPS)</h2>
             <div class="chart-wrapper" id="bpsChart"></div>
             <div class="chart-wrapper" id="bpsChart"></div>
         </div>
         </div>
 
 
@@ -772,6 +772,14 @@
             console.log('📊 displayBpsChart 被调用, 数据点数:', data.length);
             console.log('📊 displayBpsChart 被调用, 数据点数:', data.length);
             console.log('   tradingEventsData:', tradingEventsData?.length);
             console.log('   tradingEventsData:', tradingEventsData?.length);
 
 
+            // 更新BPS图表标题,添加交易对名字
+            const symbol = document.getElementById('symbolFilter').value.trim();
+            const symbolDisplay = symbol ? ` - ${symbol}` : '';
+            const bpsChartTitle = document.getElementById('bpsChartTitle');
+            if (bpsChartTitle) {
+                bpsChartTitle.innerHTML = `📊 价差走势图 (BPS)${symbolDisplay}`;
+            }
+
             const container = document.getElementById('bpsChart');
             const container = document.getElementById('bpsChart');
 
 
             // 销毁旧图表实例
             // 销毁旧图表实例
@@ -788,64 +796,9 @@
             const askBps = data.map(d => [d.timestamp * 1000, d.ask_bps]);
             const askBps = data.map(d => [d.timestamp * 1000, d.ask_bps]);
             const bidBps = data.map(d => [d.timestamp * 1000, d.bid_bps]);
             const bidBps = data.map(d => [d.timestamp * 1000, d.bid_bps]);
 
 
-            // 准备事件标记数据
+            // 准备事件标记数据 - BPS图表不显示标记
             const bpsMarkPoints = [];
             const bpsMarkPoints = [];
 
 
-            if (tradingEventsData && tradingEventsData.length > 0) {
-                console.log('   准备添加', tradingEventsData.length, '个事件标记到BPS图表');
-                tradingEventsData.forEach(event => {
-                    const timestamp = event.timestamp * 1000;
-                    const eventType = event.event_type;
-
-                    let color, symbol, symbolSize, label, symbolRotate = 0;
-
-                    // 根据 event_type 确定方向
-                    // open_long 和 close_short 是买入(向上箭头)
-                    // open_short 和 close_long 是卖出(向下箭头)
-                    if (eventType === 'open_long' || eventType === 'close_short') {
-                        symbol = 'arrow';
-                        symbolSize = 10;
-                        symbolRotate = 0;
-                        color = '#28a745';
-                        label = eventType === 'open_long' ? '开多' : '平空';
-                    } else if (eventType === 'open_short' || eventType === 'close_long') {
-                        symbol = 'arrow';
-                        symbolSize = 10;
-                        symbolRotate = 180;
-                        color = '#dc3545';
-                        label = eventType === 'open_short' ? '开空' : '平多';
-                    } else {
-                        color = '#6c757d';
-                        symbol = 'circle';
-                        symbolSize = 8;
-                        label = '其他';
-                    }
-
-                    const bpsValue = event.ask_bps || event.bid_bps || 0;
-                    bpsMarkPoints.push({
-                        coord: [timestamp, bpsValue],
-                        value: label,
-                        symbol: symbol,
-                        symbolSize: symbolSize,
-                        symbolRotate: symbolRotate,
-                        itemStyle: {
-                            color: color,
-                            borderColor: '#fff',
-                            borderWidth: 2
-                        },
-                        label: {
-                            show: true,
-                            position: 'top',
-                            formatter: label,
-                            fontSize: 10,
-                            color: color,
-                            fontWeight: 'bold'
-                        },
-                        eventData: event
-                    });
-                });
-            }
-
             const option = {
             const option = {
                 title: {
                 title: {
                     text: '',
                     text: '',
@@ -971,18 +924,6 @@
             };
             };
 
 
             bpsChart.setOption(option);
             bpsChart.setOption(option);
-
-            // 添加点击事件监听
-            if (bpsMarkPoints.length > 0) {
-                console.log('   添加BPS图表点击事件监听');
-                bpsChart.off('click');
-                bpsChart.on('click', function(params) {
-                    console.log('   BPS图表被点击:', params);
-                    if (params.componentType === 'markPoint' && params.data.eventData) {
-                        showEventDetails(params.data.eventData);
-                    }
-                });
-            }
         }
         }
 
 
         // 同步两个图表的缩放
         // 同步两个图表的缩放
@@ -1687,43 +1628,46 @@
         // 更新时间范围显示
         // 更新时间范围显示
         function updateTimeRangeDisplay() {
         function updateTimeRangeDisplay() {
             if (!selectedTimeRange) return;
             if (!selectedTimeRange) return;
-            
+
             const startTime = new Date(selectedTimeRange.start * 1000);
             const startTime = new Date(selectedTimeRange.start * 1000);
             const endTime = new Date(selectedTimeRange.end * 1000);
             const endTime = new Date(selectedTimeRange.end * 1000);
-            
+            const symbol = document.getElementById('symbolFilter').value.trim();
+            const symbolDisplay = symbol ? ` - ${symbol}` : '';
+
             // 在图表标题中显示当前查看的时间范围
             // 在图表标题中显示当前查看的时间范围
             const priceChartTitle = document.querySelector('.chart-container h2');
             const priceChartTitle = document.querySelector('.chart-container h2');
             if (priceChartTitle) {
             if (priceChartTitle) {
                 priceChartTitle.innerHTML = `📈 价格走势图 <small style="color: #666; font-size: 0.7em;">(${startTime.toLocaleTimeString()} - ${endTime.toLocaleTimeString()})</small>`;
                 priceChartTitle.innerHTML = `📈 价格走势图 <small style="color: #666; font-size: 0.7em;">(${startTime.toLocaleTimeString()} - ${endTime.toLocaleTimeString()})</small>`;
             }
             }
-            
-            const bpsChartTitle = document.querySelectorAll('.chart-container h2')[1];
+
+            const bpsChartTitle = document.getElementById('bpsChartTitle');
             if (bpsChartTitle) {
             if (bpsChartTitle) {
-                bpsChartTitle.innerHTML = `📊 价差走势图 (BPS) <small style="color: #666; font-size: 0.7em;">(${startTime.toLocaleTimeString()} - ${endTime.toLocaleTimeString()})</small>`;
+                bpsChartTitle.innerHTML = `📊 价差走势图 (BPS)${symbolDisplay} <small style="color: #666; font-size: 0.7em;">(${startTime.toLocaleTimeString()} - ${endTime.toLocaleTimeString()})</small>`;
             }
             }
         }
         }
         
         
         // 重置到原始视图
         // 重置到原始视图
         function resetToOriginalView() {
         function resetToOriginalView() {
             selectedTimeRange = null;
             selectedTimeRange = null;
-            
+
             // 移除所有选择区域
             // 移除所有选择区域
             document.querySelectorAll('.thumbnail-selection').forEach(el => el.remove());
             document.querySelectorAll('.thumbnail-selection').forEach(el => el.remove());
-            
+
             // 重新加载当前时间范围的数据
             // 重新加载当前时间范围的数据
             const timeRange = document.getElementById('timeRange').value;
             const timeRange = document.getElementById('timeRange').value;
             const symbol = document.getElementById('symbolFilter').value.trim();
             const symbol = document.getElementById('symbolFilter').value.trim();
             loadPriceData(timeRange, symbol);
             loadPriceData(timeRange, symbol);
-            
+
             // 重置图表标题
             // 重置图表标题
             const priceChartTitle = document.querySelector('.chart-container h2');
             const priceChartTitle = document.querySelector('.chart-container h2');
             if (priceChartTitle) {
             if (priceChartTitle) {
                 priceChartTitle.innerHTML = '📈 价格走势图';
                 priceChartTitle.innerHTML = '📈 价格走势图';
             }
             }
-            
-            const bpsChartTitle = document.querySelectorAll('.chart-container h2')[1];
+
+            const symbolDisplay = symbol ? ` - ${symbol}` : '';
+            const bpsChartTitle = document.getElementById('bpsChartTitle');
             if (bpsChartTitle) {
             if (bpsChartTitle) {
-                bpsChartTitle.innerHTML = '📊 价差走势图 (BPS)';
+                bpsChartTitle.innerHTML = `📊 价差走势图 (BPS)${symbolDisplay}`;
             }
             }
         }
         }