Parcourir la source

feat(仪表盘): 增强图表交互功能并添加详细工具提示

为图表添加交互模式和详细的工具提示配置,包括时间戳显示、数值格式化以及额外的价格信息展示。改进用户体验,使数据查看更加直观和便捷。
skyfffire il y a 1 semaine
Parent
commit
a5fa361695
1 fichiers modifiés avec 75 ajouts et 0 suppressions
  1. 75 0
      src/dashboard/static/index.html

+ 75 - 0
src/dashboard/static/index.html

@@ -498,6 +498,10 @@
                 options: {
                     responsive: true,
                     maintainAspectRatio: false,
+                    interaction: {
+                        mode: 'index',
+                        intersect: false,
+                    },
                     plugins: {
                         title: {
                             display: true,
@@ -505,6 +509,39 @@
                         },
                         legend: {
                             position: 'top'
+                        },
+                        tooltip: {
+                            mode: 'index',
+                            intersect: false,
+                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                            titleColor: 'white',
+                            bodyColor: 'white',
+                            borderColor: 'rgba(255, 255, 255, 0.2)',
+                            borderWidth: 1,
+                            cornerRadius: 8,
+                            displayColors: true,
+                            callbacks: {
+                                title: function(context) {
+                                    const dataIndex = context[0].dataIndex;
+                                    const timestamp = data[dataIndex].timestamp;
+                                    return new Date(timestamp).toLocaleString();
+                                },
+                                label: function(context) {
+                                    const value = context.parsed.y;
+                                    return `${context.dataset.label}: ${value ? value.toFixed(6) : '--'} USDT`;
+                                },
+                                afterBody: function(context) {
+                                    const dataIndex = context[0].dataIndex;
+                                    const item = data[dataIndex];
+                                    return [
+                                        '',
+                                        `标记价格差: ${item.mark_price_diff ? item.mark_price_diff.toFixed(6) : '--'} USDT`,
+                                        `价格差: ${item.price_diff ? item.price_diff.toFixed(6) : '--'} USDT`,
+                                        `标记价格差 (%): ${item.mark_price_diff_pct ? item.mark_price_diff_pct.toFixed(4) : '--'}%`,
+                                        `价格差 (%): ${item.price_diff_pct ? item.price_diff_pct.toFixed(4) : '--'}%`
+                                    ];
+                                }
+                            }
                         }
                     },
                     scales: {
@@ -579,6 +616,10 @@
                 options: {
                     responsive: true,
                     maintainAspectRatio: false,
+                    interaction: {
+                        mode: 'index',
+                        intersect: false,
+                    },
                     plugins: {
                         title: {
                             display: true,
@@ -586,6 +627,40 @@
                         },
                         legend: {
                             position: 'top'
+                        },
+                        tooltip: {
+                            mode: 'index',
+                            intersect: false,
+                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                            titleColor: 'white',
+                            bodyColor: 'white',
+                            borderColor: 'rgba(255, 255, 255, 0.2)',
+                            borderWidth: 1,
+                            cornerRadius: 8,
+                            displayColors: true,
+                            callbacks: {
+                                title: function(context) {
+                                    const dataIndex = context[0].dataIndex;
+                                    const timestamp = data[dataIndex].timestamp;
+                                    return new Date(timestamp).toLocaleString();
+                                },
+                                label: function(context) {
+                                    const value = context.parsed.y;
+                                    const unit = context.dataset.yAxisID === 'y1' ? '%' : 'USDT';
+                                    return `${context.dataset.label}: ${value ? value.toFixed(6) : '--'} ${unit}`;
+                                },
+                                afterBody: function(context) {
+                                    const dataIndex = context[0].dataIndex;
+                                    const item = data[dataIndex];
+                                    return [
+                                        '',
+                                        `Binance 标记价格: ${item.binance_mark_price ? item.binance_mark_price.toFixed(6) : '--'} USDT`,
+                                        `Lighter 标记价格: ${item.lighter_mark_price ? item.lighter_mark_price.toFixed(6) : '--'} USDT`,
+                                        `Binance 最新价格: ${item.binance_price ? item.binance_price.toFixed(6) : '--'} USDT`,
+                                        `Lighter 最新价格: ${item.lighter_price ? item.lighter_price.toFixed(6) : '--'} USDT`
+                                    ];
+                                }
+                            }
                         }
                     },
                     scales: {