初始提交
This commit is contained in:
@@ -0,0 +1,180 @@
|
||||
/**
|
||||
* 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}" 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}" cx="${center - 18}" cy="${statusY}" r="5" fill="${statusColor}"></circle>
|
||||
<text class="axis-label chart-click" data-project="${project.id}" x="${center - 8}" y="${statusY + 4}" text-anchor="start">${statusText}</text>
|
||||
<text class="axis-label chart-click" data-project="${project.id}" 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 averageTrend(list, key) {
|
||||
const active = list.filter((enterprise) => enterprise.stats[state.dimension].projectCount > 0);
|
||||
return Array.from({ length: 7 }, (_, index) => {
|
||||
if (!active.length) return 0;
|
||||
const weighted = active.reduce((sum, enterprise) => {
|
||||
const projects = enterprise.stats[state.dimension].projectCount;
|
||||
return sum + enterprise.trend[key][index] * projects;
|
||||
}, 0);
|
||||
const total = active.reduce((sum, enterprise) => sum + enterprise.stats[state.dimension].projectCount, 0);
|
||||
return weighted / total;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 集团三率趋势图。
|
||||
* 先把企业趋势压成集团趋势，再复用通用折线图渲染方法。
|
||||
*/
|
||||
function renderGroupTrendChart(list) {
|
||||
return renderTrendChart({
|
||||
online: averageTrend(list, "online"),
|
||||
usage: averageTrend(list, "usage"),
|
||||
accuracy: averageTrend(list, "accuracy")
|
||||
}, 1840, 112);
|
||||
}
|
||||
|
||||
/**
|
||||
* 通用三率折线图。
|
||||
* 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 = ["04-21", "04-22", "04-23", "04-24", "04-25", "04-26", "04-27"];
|
||||
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>
|
||||
`;
|
||||
}
|
||||
Reference in New Issue
Block a user