/*
* @Author: your name
* @Date: 2025-04-14 11:15:35
* @LastEditTime: 2025-05-21 15:10:19
* @LastEditors: bogon
* @Description: In User Settings Edit
* @FilePath: /performance-test/downLoadServer/src/server/utils/chartsCom/HeatmapCharts.js
*/
import puppeteer from "puppeteer";
import fs from "fs-extra";
import path from "path";
import FormData from "form-data";
import { colorSchemes } from "../colors.js";
import axios from "axios";
export const generateHeatmapChart = async (data, bucketName, objectName) => {
try {
console.log("开始生成热力图...");
console.log("数据:", data);
// 创建临时目录
const tempDir = path.join(process.cwd(), "images");
await fs.ensureDir(tempDir);
const tempFilePath = path.join(
tempDir,
`temp_heatmap_chart_${Date.now()}.jpeg`
);
// 获取 plotly.js 的绝对路径
const plotlyPath = path.join(
process.cwd(),
"src",
"public",
"js",
"plotly-3.0.1.min.js"
);
const plotlyContent = await fs.readFile(plotlyPath, "utf-8");
// 创建浏览器实例
const browser = await puppeteer.launch({
headless: "new",
executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
args: ["--no-sandbox", "--disable-setuid-sandbox"],
});
try {
const page = await browser.newPage();
// 准备图表数据
const chartDataset = data.data[0];
const trace = {
type: "heatmap",
x: chartDataset.xData,
y: chartDataset.yData,
z: chartDataset.ZData,
zmin: 0, // 最小值
zmax: 100, // 最大值
colorscale: [
[0, "#E1ECC5"], // 0% - 50%
[0.5, "#E1ECC5"], // 50%
[0.5, "#9BC8C1"], // 50% - 85%
[0.85, "#9BC8C1"], // 85%
[0.85, "#5783B3"], // 85% - 100%
[1, "#5783B3"], // 100%
],
text: chartDataset.ZData.map((row) =>
row.map((value) => value.toString())
),
hoverinfo: "text", // Hover时显示文本
showscale: true, // 显示颜色条
texttemplate: "%{text}", // 在热图块上显示z值
xgap: 2, // 设置水平方向格子之间的间距
ygap: 2, // 设置垂直方向格子之间的间距
};
// 准备布局配置
const layout = {
showlegend: false,
autosize: true,
title: {
text: chartDataset.title,
font: {
size: 16,
weight: "bold",
},
},
xaxis: {
title: data.xaixs || "X轴",
tickvals: chartDataset.xData,
ticktext: chartDataset.xData,
tickmode: "array",
tickfont: {
size: 12,
},
},
yaxis: {
title: data.yaixs || "Y轴",
tickvals: chartDataset.yData,
ticktext: chartDataset.yData,
tickmode: "array",
tickfont: {
size: 12,
},
},
plot_bgcolor: "white",
gridcolor: "#d3d3d3", // 设置网格线颜色
};
// 准备 HTML 内容
const htmlContent = `
热力图
`;
// 设置页面内容
await page.setContent(htmlContent, {
waitUntil: "networkidle0",
});
// 等待图表渲染完成，延长超时时间
await page.waitForFunction(() => window.chartRendered === true, {
timeout: 120000, // 延长到 120 秒
});
// 截图并保存到临时文件
const chartElement = await page.$("#chart");
await chartElement.screenshot({
path: tempFilePath,
type: "jpeg",
});
// 上传图片到服务器
const formData = new FormData();
formData.append("file", fs.createReadStream(tempFilePath));
// const response = await axios.post(
// "http://10.10.10.11:8080/upload",
// formData,
// {
// headers: {
// ...formData.getHeaders(),
// },
// }
// );
// 返回图片URL
// return response.data.data;
// return formData;
// 发送上传请求
const response = await axios.post(
`${process.env.API_BASE_URL}/examples/upload`,
{ filePath: tempFilePath, bucketName, objectName }
);
return response?.data?.url;
} catch (error) {
console.error("生成热力图失败:", error);
throw error;
} finally {
await browser.close();
}
} catch (error) {
console.error("生成热力图失败:", error);
throw error;
}
};