169 lines
9.4 KiB
JavaScript
169 lines
9.4 KiB
JavaScript
/**
|
|
* SVG 图表渲染模块。
|
|
* 所有图表都返回字符串，由视图层直接写入 chart-box；交互点通过 data-enterprise/data-project 交给事件代理处理。
|
|
*/
|
|
function renderGroupedRateChart(list, mode, options = {}) {
|
|
const width = Math.max(1180, list.length * 88 + 120);
|
|
const height = options.height || 350;
|
|
const margin = { top: 20, right: 30, bottom: height < 240 ? 58 : 98, left: 54 };
|
|
const chartHeight = height - margin.top - margin.bottom;
|
|
const chartWidth = width - margin.left - margin.right;
|
|
const groupWidth = chartWidth / Math.max(list.length, 1);
|
|
const barWidth = Math.min(height < 240 ? 12 : 16, groupWidth / 5);
|
|
const series = [
|
|
{ key: "onlineRate", label: "上线", color: COLORS.online },
|
|
{ key: "usageRate", label: "使用", color: COLORS.usage },
|
|
{ key: "accuracyRate", label: "准确", color: COLORS.accuracy }
|
|
];
|
|
const grid = [0, 25, 50, 75, 100].map((tick) => {
|
|
const y = margin.top + chartHeight - (tick / 100) * chartHeight;
|
|
return `<line class="grid-line" x1="${margin.left}" y1="${y}" x2="${width - margin.right}" y2="${y}"></line><text class="axis-label" x="${margin.left - 10}" y="${y + 4}" text-anchor="end">${tick}%</text>`;
|
|
}).join("");
|
|
|
|
const bars = list.map((enterprise, index) => {
|
|
const stats = enterprise.stats[state.dimension];
|
|
const center = margin.left + groupWidth * index + groupWidth / 2;
|
|
const label = enterprise.name;
|
|
const rects = series.map((item, seriesIndex) => {
|
|
const value = stats[item.key];
|
|
const barHeight = (value / 100) * chartHeight;
|
|
const x = center - barWidth * 1.8 + seriesIndex * barWidth * 1.8;
|
|
const y = margin.top + chartHeight - barHeight;
|
|
return `
|
|
<rect class="chart-click" data-enterprise="${enterprise.name}" x="${x}" y="${y}" width="${barWidth}" height="${barHeight}" rx="5" fill="${item.color}" opacity="0.92"></rect>
|
|
<text class="bar-label" x="${x + barWidth / 2}" y="${Math.max(y - 7, 14)}" text-anchor="middle">${Math.round(value)}</text>
|
|
`;
|
|
}).join("");
|
|
return `
|
|
${rects}
|
|
<text class="axis-label chart-click" data-enterprise="${enterprise.name}" x="${center}" y="${height - 20}" transform="rotate(-28 ${center} ${height - 20})" text-anchor="end">${label}</text>
|
|
`;
|
|
}).join("");
|
|
|
|
return `
|
|
<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img" aria-label="${mode === "enterprise" ? "企业三率对比图" : "三率对比图"}">
|
|
${grid}
|
|
<line class="axis" x1="${margin.left}" y1="${margin.top + chartHeight}" x2="${width - margin.right}" y2="${margin.top + chartHeight}"></line>
|
|
${bars}
|
|
</svg>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* 项目使用率/准确率柱状图。
|
|
* 柱子用于进入项目明细，底部圆点表达项目是否已上线，便于在企业层同时查看使用和上线状态。
|
|
*/
|
|
function renderProjectRateChart(projects, options = {}) {
|
|
const width = Math.max(1100, projects.length * 126 + 120);
|
|
const height = options.height || 350;
|
|
const margin = { top: 20, right: 30, bottom: height < 260 ? 66 : 98, left: 54 };
|
|
const chartHeight = height - margin.top - margin.bottom;
|
|
const chartWidth = width - margin.left - margin.right;
|
|
const groupWidth = chartWidth / Math.max(projects.length, 1);
|
|
const barWidth = Math.min(20, groupWidth / 4);
|
|
const series = [
|
|
{ key: "usageRate", color: COLORS.usage },
|
|
{ key: "accuracyRate", color: COLORS.accuracy }
|
|
];
|
|
const grid = [0, 25, 50, 75, 100].map((tick) => {
|
|
const y = margin.top + chartHeight - (tick / 100) * chartHeight;
|
|
return `<line class="grid-line" x1="${margin.left}" y1="${y}" x2="${width - margin.right}" y2="${y}"></line><text class="axis-label" x="${margin.left - 10}" y="${y + 4}" text-anchor="end">${tick}%</text>`;
|
|
}).join("");
|
|
|
|
const bars = projects.map((project, index) => {
|
|
const center = margin.left + groupWidth * index + groupWidth / 2;
|
|
const shortName = project.name.replace(project.unit, "").replace("项目", "");
|
|
const rects = series.map((item, seriesIndex) => {
|
|
const value = project[item.key];
|
|
const barHeight = (value / 100) * chartHeight;
|
|
const x = center - barWidth * 1.05 + seriesIndex * barWidth * 2.1;
|
|
const y = margin.top + chartHeight - barHeight;
|
|
return `
|
|
<rect class="chart-click" data-project="${project.id}" data-project-unit-id="${escapeHtmlAttr(project.unitId || "")}" x="${x}" y="${y}" width="${barWidth}" height="${barHeight}" rx="5" fill="${item.color}" opacity="0.92"></rect>
|
|
<text class="bar-label" x="${x + barWidth / 2}" y="${Math.max(y - 7, 14)}" text-anchor="middle">${Math.round(value)}</text>
|
|
`;
|
|
}).join("");
|
|
const statusY = height - (height < 260 ? 48 : 78);
|
|
const statusColor = project.created ? COLORS.cyan : COLORS.warning;
|
|
const statusText = project.created ? "已上线" : "未上线";
|
|
return `
|
|
${rects}
|
|
<circle class="chart-click" data-project="${project.id}" data-project-unit-id="${escapeHtmlAttr(project.unitId || "")}" cx="${center - 18}" cy="${statusY}" r="5" fill="${statusColor}"></circle>
|
|
<text class="axis-label chart-click" data-project="${project.id}" data-project-unit-id="${escapeHtmlAttr(project.unitId || "")}" x="${center - 8}" y="${statusY + 4}" text-anchor="start">${statusText}</text>
|
|
<text class="axis-label chart-click" data-project="${project.id}" data-project-unit-id="${escapeHtmlAttr(project.unitId || "")}" x="${center}" y="${height - 24}" transform="rotate(-30 ${center} ${height - 24})" text-anchor="end">${shortName}</text>
|
|
`;
|
|
}).join("");
|
|
|
|
return `
|
|
<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img" aria-label="项目使用率与准确率对比图">
|
|
${grid}
|
|
<line class="axis" x1="${margin.left}" y1="${margin.top + chartHeight}" x2="${width - margin.right}" y2="${margin.top + chartHeight}"></line>
|
|
${bars}
|
|
</svg>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* 集团三率趋势图。
|
|
* 先把企业趋势压成集团趋势，再复用通用折线图渲染方法。
|
|
*/
|
|
function renderGroupTrendChart(list) {
|
|
const trendCurve = projectMasterDataState.trendCurve;
|
|
if (trendCurve && Array.isArray(trendCurve.Date) && trendCurve.Date.length) {
|
|
return renderTrendChart({
|
|
date: trendCurve.Date,
|
|
online: trendCurve.OnlineRate || [],
|
|
usage: trendCurve.UsageRate || [],
|
|
accuracy: trendCurve.AccuracyRate || []
|
|
}, 1840, 112);
|
|
}
|
|
return '<div class="empty-state compact-empty">暂无趋势数据</div>';
|
|
}
|
|
|
|
/**
|
|
* 通用三率折线图。
|
|
* data 需要包含 online/usage/accuracy 三组七日数组，适用于集团趋势和企业趋势。
|
|
*/
|
|
function renderTrendChart(data, width = 720, height = 250) {
|
|
const margin = { top: 14, right: 28, bottom: 28, left: 46 };
|
|
const chartWidth = width - margin.left - margin.right;
|
|
const chartHeight = height - margin.top - margin.bottom;
|
|
const dates = data.date || ["06-26", "06-27", "06-28", "06-29", "06-30", "07-01", "07-02"];
|
|
const series = [
|
|
{ key: "online", label: "上线", color: COLORS.online },
|
|
{ key: "usage", label: "使用", color: COLORS.usage },
|
|
{ key: "accuracy", label: "准确", color: COLORS.accuracy }
|
|
];
|
|
const grid = [0, 25, 50, 75, 100].map((tick) => {
|
|
const y = margin.top + chartHeight - (tick / 100) * chartHeight;
|
|
return `<line class="grid-line" x1="${margin.left}" y1="${y}" x2="${width - margin.right}" y2="${y}"></line><text class="axis-label" x="${margin.left - 8}" y="${y + 4}" text-anchor="end">${tick}%</text>`;
|
|
}).join("");
|
|
const lines = series.map((item) => {
|
|
const values = data[item.key] || [];
|
|
const points = values.map((value, index) => {
|
|
const x = margin.left + (chartWidth / (values.length - 1)) * index;
|
|
const y = margin.top + chartHeight - (value / 100) * chartHeight;
|
|
return `${x},${y}`;
|
|
}).join(" ");
|
|
const circles = values.map((value, index) => {
|
|
const x = margin.left + (chartWidth / (values.length - 1)) * index;
|
|
const y = margin.top + chartHeight - (value / 100) * chartHeight;
|
|
return `<circle cx="${x}" cy="${y}" r="4" fill="${item.color}"></circle>`;
|
|
}).join("");
|
|
return `<polyline points="${points}" fill="none" stroke="${item.color}" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></polyline>${circles}`;
|
|
}).join("");
|
|
const labels = dates.map((date, index) => {
|
|
const x = margin.left + (chartWidth / (dates.length - 1)) * index;
|
|
return `<text class="axis-label" x="${x}" y="${height - 10}" text-anchor="middle">${date}</text>`;
|
|
}).join("");
|
|
|
|
return `
|
|
<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img" aria-label="三率趋势曲线">
|
|
${grid}
|
|
<line class="axis" x1="${margin.left}" y1="${margin.top + chartHeight}" x2="${width - margin.right}" y2="${margin.top + chartHeight}"></line>
|
|
${lines}
|
|
${labels}
|
|
</svg>
|
|
`;
|
|
}
|