669 lines
22 KiB
JavaScript
669 lines
22 KiB
JavaScript
// 确保 Chart.js 已加载
|
||
if (!window.Chart) {
|
||
const script = document.createElement('script');
|
||
script.src = '../chart.min.js';
|
||
document.head.appendChild(script);
|
||
}
|
||
|
||
class FloatingChartWindow extends HTMLElement {
|
||
// 添加静态计数器
|
||
static zIndexCounter = 1;
|
||
|
||
constructor() {
|
||
super();
|
||
this.attachShadow({ mode: 'open' });
|
||
|
||
// 初始化状态
|
||
this.position = { x: 100, y: 100 };
|
||
this.size = { width: 400, height: 300 };
|
||
this.isDragging = false;
|
||
this.dragOffset = { x: 0, y: 0 };
|
||
this.isResizing = false;
|
||
this.resizeStart = { x: 0, y: 0 };
|
||
this.isMinimized = false;
|
||
this.chartInstance = null;
|
||
this.zIndex = FloatingChartWindow.zIndexCounter++;
|
||
|
||
// 存储初始属性值
|
||
this._title = this.getAttribute('title') || '图表窗口';
|
||
this._initialPosition = this.getAttribute('initial-position') ?
|
||
JSON.parse(this.getAttribute('initial-position')) : { x: 100, y: 100 };
|
||
this._initialSize = this.getAttribute('initial-size') ?
|
||
JSON.parse(this.getAttribute('initial-size')) : { width: 400, height: 300 };
|
||
this._chartData = this.getAttribute('chart-data') ?
|
||
JSON.parse(this.getAttribute('chart-data')) : { labels: [], datasets: [] };
|
||
this._chartOptions = this.getAttribute('chart-options') ?
|
||
JSON.parse(this.getAttribute('chart-options')) : {};
|
||
|
||
// 绑定方法
|
||
this.handleMouseDown = this.handleMouseDown.bind(this);
|
||
this.handleMouseMove = this.handleMouseMove.bind(this);
|
||
this.handleMouseUp = this.handleMouseUp.bind(this);
|
||
this.handleResizeStart = this.handleResizeStart.bind(this);
|
||
this.handleResize = this.handleResize.bind(this);
|
||
this.handleResizeEnd = this.handleResizeEnd.bind(this);
|
||
this.handleMinimize = this.handleMinimize.bind(this);
|
||
this.handleClose = this.handleClose.bind(this);
|
||
}
|
||
|
||
static get observedAttributes() {
|
||
return ['title', 'initial-position', 'initial-size', 'chart-data', 'chart-options', 'z-index'];
|
||
}
|
||
|
||
connectedCallback() {
|
||
this.render();
|
||
this.initChart();
|
||
this.addEventListeners();
|
||
|
||
// 应用初始属性值
|
||
this.updateTitle(this._title);
|
||
this.position = this._initialPosition;
|
||
this.size = this._initialSize;
|
||
this.updatePosition();
|
||
this.updateSize();
|
||
this.updateChartData(this._chartData);
|
||
this.updateChartOptions(this._chartOptions);
|
||
this.updateZIndex(this.zIndex);
|
||
|
||
// 触发 connected 事件
|
||
this.dispatchEvent(new CustomEvent('connected'));
|
||
}
|
||
|
||
disconnectedCallback() {
|
||
this.removeEventListeners();
|
||
if (this.chartInstance) {
|
||
this.chartInstance.destroy();
|
||
}
|
||
}
|
||
|
||
attributeChangedCallback(name, oldValue, newValue) {
|
||
if (oldValue === newValue) return;
|
||
|
||
// 存储新的属性值
|
||
switch (name) {
|
||
case 'title':
|
||
this._title = newValue;
|
||
break;
|
||
case 'initial-position':
|
||
this._initialPosition = JSON.parse(newValue);
|
||
break;
|
||
case 'initial-size':
|
||
this._initialSize = JSON.parse(newValue);
|
||
break;
|
||
case 'chart-data':
|
||
this._chartData = JSON.parse(newValue);
|
||
break;
|
||
case 'chart-options':
|
||
this._chartOptions = JSON.parse(newValue);
|
||
break;
|
||
case 'z-index':
|
||
this.zIndex = parseInt(newValue);
|
||
break;
|
||
}
|
||
|
||
// 如果组件已经渲染，则更新相应的值
|
||
if (this.shadowRoot) {
|
||
switch (name) {
|
||
case 'title':
|
||
this.updateTitle(this._title);
|
||
break;
|
||
case 'initial-position':
|
||
this.position = this._initialPosition;
|
||
this.updatePosition();
|
||
break;
|
||
case 'initial-size':
|
||
this.size = this._initialSize;
|
||
this.updateSize();
|
||
break;
|
||
case 'chart-data':
|
||
this.updateChartData(this._chartData);
|
||
break;
|
||
case 'chart-options':
|
||
this.updateChartOptions(this._chartOptions);
|
||
break;
|
||
case 'z-index':
|
||
this.updateZIndex(this.zIndex);
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
render() {
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
.floating-window {
|
||
position: fixed;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.window-header {
|
||
background: #f5f5f5;
|
||
padding: 8px 12px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
cursor: move;
|
||
user-select: none;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.window-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #262626;
|
||
}
|
||
|
||
.window-controls {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.window-control-button {
|
||
width: 24px;
|
||
height: 24px;
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
color: #666;
|
||
border-radius: 4px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.window-control-button:hover {
|
||
background: rgba(0, 0, 0, 0.05);
|
||
color: #262626;
|
||
}
|
||
|
||
.window-control-button.close-button:hover {
|
||
background: #ff4d4f;
|
||
color: white;
|
||
}
|
||
|
||
.window-content {
|
||
flex: 1;
|
||
padding: 12px;
|
||
position: relative;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.chart-container {
|
||
flex: 1;
|
||
position: relative;
|
||
min-height: 0;
|
||
}
|
||
|
||
canvas {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
|
||
.resize-handle {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 10px;
|
||
height: 10px;
|
||
cursor: se-resize;
|
||
}
|
||
|
||
.resize-handle::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 2px;
|
||
bottom: 2px;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-right: 2px solid #ccc;
|
||
border-bottom: 2px solid #ccc;
|
||
}
|
||
`;
|
||
|
||
const template = document.createElement('template');
|
||
template.innerHTML = `
|
||
<div class="floating-window">
|
||
<div class="window-header">
|
||
<span class="window-title">${this.getAttribute('title') || '图表窗口'}</span>
|
||
<div class="window-controls">
|
||
<button class="window-control-button close-button">×</button>
|
||
</div>
|
||
</div>
|
||
<div class="window-content">
|
||
<div class="chart-container">
|
||
<canvas></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="resize-handle"></div>
|
||
</div>
|
||
`;
|
||
|
||
this.shadowRoot.appendChild(style);
|
||
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
||
|
||
// 更新位置和大小
|
||
this.updatePosition();
|
||
this.updateSize();
|
||
}
|
||
|
||
initChart() {
|
||
const canvas = this.shadowRoot.querySelector('canvas');
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
const chartData = JSON.parse(this.getAttribute('chart-data') || '{"labels":[],"datasets":[]}');
|
||
const chartOptions = JSON.parse(this.getAttribute('chart-options') || '{}');
|
||
|
||
// 基础配置
|
||
const baseOptions = {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
animation: false,
|
||
elements: {
|
||
point: {
|
||
radius: 0
|
||
},
|
||
line: {
|
||
tension: 0
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: false,
|
||
ticks: {
|
||
callback: function(value) {
|
||
// 如果数值的绝对值大于1000或小于0.1，使用科学计数法
|
||
if (Math.abs(value) > 1000 || (Math.abs(value) < 0.1 && value !== 0)) {
|
||
return value.toExponential(1);
|
||
}
|
||
// 否则使用普通数字，保留一位小数
|
||
return value.toFixed(1);
|
||
},
|
||
maxTicksLimit: 8 // 限制刻度数量
|
||
}
|
||
},
|
||
x: {
|
||
display: true,
|
||
ticks: {
|
||
callback: function(value) {
|
||
// 如果数值大于1000，使用科学计数法
|
||
if (value > 1000) {
|
||
return value.toExponential(1);
|
||
}
|
||
return value;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
plugins: {
|
||
legend: {
|
||
display: true,
|
||
position: 'top'
|
||
},
|
||
tooltip: {
|
||
enabled: true,
|
||
mode: 'index',
|
||
intersect: false,
|
||
callbacks: {
|
||
label: function(context) {
|
||
const value = context.raw;
|
||
// 始终使用普通数字格式，保留一位小数
|
||
return `${context.dataset.label}: ${value.toFixed(1)}`;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
// 深度合并配置
|
||
const finalOptions = {
|
||
...baseOptions,
|
||
scales: {
|
||
y: {
|
||
...baseOptions.scales.y,
|
||
...(chartOptions.scales?.y || {}),
|
||
ticks: {
|
||
...baseOptions.scales.y.ticks,
|
||
...(chartOptions.scales?.y?.ticks || {})
|
||
}
|
||
},
|
||
x: {
|
||
...baseOptions.scales.x,
|
||
...(chartOptions.scales?.x || {}),
|
||
ticks: {
|
||
...baseOptions.scales.x.ticks,
|
||
...(chartOptions.scales?.x?.ticks || {})
|
||
}
|
||
}
|
||
},
|
||
plugins: {
|
||
...baseOptions.plugins,
|
||
...(chartOptions.plugins || {}),
|
||
tooltip: {
|
||
...baseOptions.plugins.tooltip,
|
||
...(chartOptions.plugins?.tooltip || {}),
|
||
callbacks: {
|
||
...baseOptions.plugins.tooltip.callbacks,
|
||
...(chartOptions.plugins?.tooltip?.callbacks || {})
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
// 确保数据集配置正确
|
||
if (chartData.datasets && chartData.datasets.length > 0) {
|
||
chartData.datasets = chartData.datasets.map(dataset => ({
|
||
...dataset,
|
||
borderWidth: 2,
|
||
pointRadius: 0,
|
||
tension: 0
|
||
}));
|
||
}
|
||
|
||
this.chartInstance = new Chart(ctx, {
|
||
type: 'line',
|
||
data: chartData,
|
||
options: finalOptions
|
||
});
|
||
}
|
||
|
||
addEventListeners() {
|
||
const header = this.shadowRoot.querySelector('.window-header');
|
||
const closeButton = this.shadowRoot.querySelector('.close-button');
|
||
const resizeHandle = this.shadowRoot.querySelector('.resize-handle');
|
||
|
||
header.addEventListener('mousedown', this.handleMouseDown);
|
||
closeButton.addEventListener('click', this.handleClose);
|
||
resizeHandle.addEventListener('mousedown', this.handleResizeStart);
|
||
|
||
document.addEventListener('mousemove', this.handleMouseMove);
|
||
document.addEventListener('mouseup', this.handleMouseUp);
|
||
}
|
||
|
||
removeEventListeners() {
|
||
document.removeEventListener('mousemove', this.handleMouseMove);
|
||
document.removeEventListener('mouseup', this.handleMouseUp);
|
||
}
|
||
|
||
handleMouseDown(e) {
|
||
// 检查点击是否在标题栏或其子元素上
|
||
const header = this.shadowRoot.querySelector('.window-header');
|
||
if (header && (e.target === header || header.contains(e.target))) {
|
||
this.isDragging = true;
|
||
this.dragOffset = {
|
||
x: e.clientX - this.position.x,
|
||
y: e.clientY - this.position.y
|
||
};
|
||
// 点击标题栏时置顶
|
||
const window = this.shadowRoot.querySelector('.floating-window');
|
||
if (window) {
|
||
this.zIndex = FloatingChartWindow.zIndexCounter++;
|
||
window.style.zIndex = this.zIndex;
|
||
}
|
||
}
|
||
}
|
||
|
||
handleMouseMove(e) {
|
||
if (this.isDragging) {
|
||
// 限制拖动范围在当前页面区域
|
||
const minX = 300; // 左侧工具栏宽度
|
||
const minY = 100; // 顶部标签页栏高度
|
||
|
||
this.position = {
|
||
x: Math.max(minX, e.clientX - this.dragOffset.x),
|
||
y: Math.max(minY, e.clientY - this.dragOffset.y)
|
||
};
|
||
this.updatePosition();
|
||
} else if (this.isResizing) {
|
||
const deltaX = e.clientX - this.resizeStart.x;
|
||
const deltaY = e.clientY - this.resizeStart.y;
|
||
|
||
this.size = {
|
||
width: Math.max(300, this.size.width + deltaX),
|
||
height: Math.max(200, this.size.height + deltaY)
|
||
};
|
||
|
||
this.resizeStart = {
|
||
x: e.clientX,
|
||
y: e.clientY
|
||
};
|
||
|
||
this.updateSize();
|
||
}
|
||
}
|
||
|
||
handleMouseUp() {
|
||
this.isDragging = false;
|
||
this.isResizing = false;
|
||
}
|
||
|
||
handleResizeStart(e) {
|
||
this.isResizing = true;
|
||
this.resizeStart = {
|
||
x: e.clientX,
|
||
y: e.clientY
|
||
};
|
||
}
|
||
|
||
handleResize(e) {
|
||
if (this.isResizing) {
|
||
const deltaX = e.clientX - this.resizeStart.x;
|
||
const deltaY = e.clientY - this.resizeStart.y;
|
||
|
||
this.size = {
|
||
width: Math.max(300, this.size.width + deltaX),
|
||
height: Math.max(200, this.size.height + deltaY)
|
||
};
|
||
|
||
this.resizeStart = {
|
||
x: e.clientX,
|
||
y: e.clientY
|
||
};
|
||
|
||
this.updateSize();
|
||
|
||
// 更新图表大小
|
||
if (this.chartInstance) {
|
||
this.chartInstance.resize();
|
||
}
|
||
}
|
||
}
|
||
|
||
handleResizeEnd() {
|
||
this.isResizing = false;
|
||
}
|
||
|
||
handleMinimize() {
|
||
this.isMinimized = !this.isMinimized;
|
||
const content = this.shadowRoot.querySelector('.window-content');
|
||
const minimizeButton = this.shadowRoot.querySelector('.minimize-button');
|
||
|
||
if (this.isMinimized) {
|
||
content.classList.add('minimized');
|
||
minimizeButton.textContent = '□';
|
||
} else {
|
||
content.classList.remove('minimized');
|
||
minimizeButton.textContent = '−';
|
||
}
|
||
}
|
||
|
||
handleClose() {
|
||
this.dispatchEvent(new CustomEvent('close'));
|
||
this.remove();
|
||
}
|
||
|
||
updatePosition() {
|
||
const window = this.shadowRoot.querySelector('.floating-window');
|
||
window.style.left = `${this.position.x}px`;
|
||
window.style.top = `${this.position.y}px`;
|
||
}
|
||
|
||
updateSize() {
|
||
const window = this.shadowRoot.querySelector('.floating-window');
|
||
window.style.width = `${this.size.width}px`;
|
||
window.style.height = `${this.size.height}px`;
|
||
|
||
// 强制图表重新渲染
|
||
if (this.chartInstance) {
|
||
this.chartInstance.resize();
|
||
}
|
||
}
|
||
|
||
updateTitle(title) {
|
||
const titleElement = this.shadowRoot.querySelector('.window-title');
|
||
titleElement.textContent = title;
|
||
}
|
||
|
||
updateChartData(data) {
|
||
if (this.chartInstance) {
|
||
// 更新数据
|
||
this.chartInstance.data = data;
|
||
|
||
// 强制更新配置
|
||
const options = this.chartInstance.options;
|
||
options.scales.y.ticks.callback = function(value) {
|
||
if (Math.abs(value) > 1000 || (Math.abs(value) < 0.1 && value !== 0)) {
|
||
return value.toExponential(1);
|
||
}
|
||
return value.toFixed(1);
|
||
};
|
||
|
||
options.scales.x.ticks.callback = function(value) {
|
||
if (value > 1000) {
|
||
return value.toExponential(1);
|
||
}
|
||
return value;
|
||
};
|
||
|
||
options.plugins.tooltip.callbacks.label = function(context) {
|
||
const value = context.raw;
|
||
// 始终使用普通数字格式，保留一位小数
|
||
return `${context.dataset.label}: ${value.toFixed(1)}`;
|
||
};
|
||
|
||
// 计算所有数据点的范围
|
||
let min = Infinity;
|
||
let max = -Infinity;
|
||
|
||
data.datasets.forEach(dataset => {
|
||
if (dataset.data && dataset.data.length > 0) {
|
||
const datasetMin = Math.min(...dataset.data);
|
||
const datasetMax = Math.max(...dataset.data);
|
||
min = Math.min(min, datasetMin);
|
||
max = Math.max(max, datasetMax);
|
||
}
|
||
});
|
||
|
||
if (min !== Infinity && max !== -Infinity) {
|
||
const range = max - min;
|
||
// 如果所有数据都是0，使用固定范围
|
||
if (min === 0 && max === 0) {
|
||
options.scales.y.min = -1;
|
||
options.scales.y.max = 1;
|
||
}
|
||
// 如果范围很小，使用固定比例
|
||
else if (range < 1) {
|
||
options.scales.y.min = min - 0.5;
|
||
options.scales.y.max = max + 0.5;
|
||
} else {
|
||
// 如果范围较大，使用百分比
|
||
const margin = range * 0.2; // 使用20%的边距
|
||
options.scales.y.min = min - margin;
|
||
options.scales.y.max = max + margin;
|
||
}
|
||
}
|
||
|
||
// 更新图表
|
||
this.chartInstance.update('none');
|
||
}
|
||
}
|
||
|
||
updateChartOptions(options) {
|
||
if (this.chartInstance) {
|
||
Object.assign(this.chartInstance.options, options);
|
||
this.chartInstance.update('none');
|
||
}
|
||
}
|
||
|
||
updateZIndex(zIndex) {
|
||
const window = this.shadowRoot.querySelector('.floating-window');
|
||
if (window) {
|
||
window.style.zIndex = zIndex;
|
||
}
|
||
}
|
||
|
||
// 添加新方法：处理数据更新
|
||
handleDataUpdate(values, interfaceName) {
|
||
if (!this.chartInstance) return;
|
||
|
||
const chartData = this.chartInstance.data;
|
||
|
||
// 如果是第一次收到数据，创建数据集
|
||
if (chartData.datasets.length === 0) {
|
||
if (values.length > 1) {
|
||
// 创建多个数据集
|
||
chartData.datasets = values.map((_, index) => ({
|
||
label: `${interfaceName} (${index + 1})`,
|
||
data: [],
|
||
borderColor: this.getRandomColor(),
|
||
fill: false,
|
||
borderWidth: 2,
|
||
pointRadius: 0,
|
||
tension: 0
|
||
}));
|
||
} else {
|
||
// 创建单个数据集
|
||
chartData.datasets = [{
|
||
label: interfaceName,
|
||
data: [],
|
||
borderColor: this.getRandomColor(),
|
||
fill: false,
|
||
borderWidth: 2,
|
||
pointRadius: 0,
|
||
tension: 0
|
||
}];
|
||
}
|
||
}
|
||
|
||
// 添加新的数据点
|
||
chartData.labels.push(this.dataPointIndex.toString());
|
||
values.forEach((value, index) => {
|
||
if (index < chartData.datasets.length) {
|
||
chartData.datasets[index].data.push(value);
|
||
}
|
||
});
|
||
this.dataPointIndex++;
|
||
|
||
// 保持最近100个数据点
|
||
if (chartData.labels.length > 100) {
|
||
chartData.labels.shift();
|
||
chartData.datasets.forEach(dataset => {
|
||
dataset.data.shift();
|
||
});
|
||
}
|
||
|
||
// 更新图表
|
||
this.updateChartData(chartData);
|
||
}
|
||
|
||
// 添加新方法：获取随机颜色
|
||
getRandomColor() {
|
||
const letters = '0123456789ABCDEF';
|
||
let color = '#';
|
||
for (let i = 0; i < 6; i++) {
|
||
color += letters[Math.floor(Math.random() * 16)];
|
||
}
|
||
return color;
|
||
}
|
||
}
|
||
|
||
customElements.define('floating-chart-window', FloatingChartWindow);
|