Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type16_dot_chart/dot_plain_chart_01.js

@@ -0,0 +1,462 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Dot Chart",
+    "chart_name": "dot_plain_chart_01",
+    "chart_for": "comparison",
+    "is_composite": false,
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[2, 20], [0, "inf"], [2, 5]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "hierarchy": ["group"],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["shadow", "radius_corner", "gradient", "stroke", "spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+// 散点图实现 - 使用D3.js
+function makeChart(containerSelector, data) {
+    // ---------- 1. 数据与配置 ----------
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        label: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "normal" }
+    };
+    const colors = jsonData.colors || { text_color: "#333333" };
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const images = jsonData.images || { field: {}, other: {} };
+    const dataColumns = chartUtils.schema.columns(jsonData);
+
+    // 清空容器 & 创建文本测量上下文
+    d3.select(containerSelector).html("");
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    function measureTextWidth(text, fontFamily, fontSize, fontWeight) {
+        context.font = `${fontWeight || 'normal'} ${fontSize || '12px'} ${fontFamily || 'Arial'}`;
+        return chartUtils.text.contextWidth(context, text);
+    }
+    
+    // 添加文本自动换行辅助函数
+    function wrapText(text, maxWidth, fontFamily, fontSize, fontWeight) {
+        if (!text) return [];
+        
+        const words = text.toString().split(/\s+/).filter(d => d.length > 0);
+        if (words.length === 0) return [];
+        
+        const lines = [];
+        let currentLine = words[0];
+        
+        for (let i = 1; i < words.length; i++) {
+            const word = words[i];
+            const width = measureTextWidth(currentLine + " " + word, fontFamily, fontSize, fontWeight);
+            
+            if (width < maxWidth) {
+                currentLine += " " + word;
+            } else {
+                lines.push(currentLine);
+                currentLine = word;
+            }
+        }
+        
+        lines.push(currentLine);
+        return lines;
+    }
+    
+    // 如果只有一个单词但超长，进行单词拆分
+    function breakLongWord(word, maxWidth, fontFamily, fontSize, fontWeight) {
+        if (!word) return [];
+        
+        const characters = word.split('');
+        const lines = [];
+        let currentLine = '';
+        
+        for (let char of characters) {
+            const testLine = currentLine + char;
+            const width = measureTextWidth(testLine, fontFamily, fontSize, fontWeight);
+            
+            if (width < maxWidth) {
+                currentLine = testLine;
+            } else {
+                if (currentLine) {
+                    lines.push(currentLine);
+                    currentLine = char;
+                } else {
+                    // 如果单个字符就超宽，强制添加
+                    lines.push(char);
+                    currentLine = '';
+                }
+            }
+        }
+        
+        if (currentLine) {
+            lines.push(currentLine);
+        }
+        
+        return lines;
+    }
+    
+    // ---------- 2. 尺寸与边距 ----------
+    const width = variables.width || 600;
+    const height = variables.height || 500;
+    // 初始边距，后续动态调整
+    let margin = { top: 75, right: 20, bottom: 70, left: 20 };
+
+    // ---------- 3. 字段提取 ----------
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key; // Y轴类别字段
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;     // X轴数值字段
+    const groupField = chartUtils.schema.channel(jsonData, "group").key;   // 分组字段
+
+    // ---------- 4. 数据处理 ----------
+    const dimensions = [...new Set(chartData.map(d => d[dimensionField]))]; // Y轴唯一类别
+    const groups = [...new Set(chartData.map(d => d[groupField]))];       // 唯一分组
+
+    // ---------- 5. 动态计算边距与内部尺寸 ----------
+
+    // --- 5a: 计算X轴需求 ---
+    const maxValue = d3.max(chartData, d => +d[valueField]) || 0;
+    const tempXScale = d3.scaleLinear().domain([0, maxValue]).nice(); // 用于计算刻度的临时比例尺
+    const xAxisTicks = tempXScale.ticks(5);
+    const xAxisTickFormat = tempXScale.tickFormat(5);
+
+    // 计算X轴标签所需高度 -> 更新下边距
+    let maxXAxisLabelHeight = 0;
+    if (xAxisTicks.length > 0) {
+        const labelFontSize = typography.label.font_size || '12px';
+        maxXAxisLabelHeight = parseFloat(labelFontSize) * 1.2; // 基于字体大小估算
+    }
+    const xAxisPadding = 15;
+    margin.bottom = Math.max(margin.bottom, maxXAxisLabelHeight + xAxisPadding);
+
+    // 计算X轴标签最大宽度 -> 更新右边距
+    let maxXAxisLabelWidth = 0;
+    if (xAxisTicks.length > 0) {
+        const fontFamily = typography.label.font_family || 'Arial';
+        const fontSize = typography.label.font_size || '12px';
+        const fontWeight = typography.label.font_weight || 'normal';
+        xAxisTicks.forEach(tick => {
+            const formattedTickText = chartUtils.format.autoText(+(tick));
+            const textWidth = measureTextWidth(formattedTickText, fontFamily, fontSize, fontWeight);
+            maxXAxisLabelWidth = Math.max(maxXAxisLabelWidth, textWidth);
+        });
+    }
+    // 调整右边距防止标签溢出
+    margin.right = Math.max(margin.right, (maxXAxisLabelWidth / 2) + 10);
+
+
+    // --- 5b: 估算Y轴需求 -> 更新左边距 ---
+    const iconPadding = 5;
+    let maxYAxisLabelWidth = 0;
+
+    // 估算图标尺寸 (基于预估的条带宽度)
+    let preliminaryInnerHeight = height - margin.top - margin.bottom;
+    let preliminaryYScale = d3.scaleBand().domain(dimensions).range([0, preliminaryInnerHeight]).padding(0.1);
+    let estIconHeight = preliminaryYScale.bandwidth() > 0 ? preliminaryYScale.bandwidth() * 0.6 : 20;
+    let estIconWidth = estIconHeight * 1.33; // 假设4:3宽高比
+
+    // 计算Y轴标签+图标所需宽度
+    const maxYAxisLabelSpace = width * 0.25; // 最大允许Y轴标签宽度（占图表宽度的25%）
+    const minFontSize = 8; // 最小字体大小
+    const baseFontSize = parseFloat(typography.label.font_size || '12px');
+    const fontFamily = typography.label.font_family || 'Arial';
+    const fontWeight = typography.label.font_weight || 'normal';
+    
+    const yLabelsInfo = {}; // 存储标签相关信息
+
+    dimensions.forEach(dim => {
+        // 移除图标相关代码
+        const iconSpace = 0; // 不再考虑图标空间
+        const labelWidth = measureTextWidth(dim, fontFamily, `${baseFontSize}px`, fontWeight);
+        
+        // 如果标签超长需要适配
+        if (labelWidth > (maxYAxisLabelSpace - iconSpace)) {
+            // 计算需要的缩放因子
+            const scaleFactor = Math.max(0.7, (maxYAxisLabelSpace - iconSpace) / labelWidth);
+            const adjustedFontSize = Math.max(minFontSize, baseFontSize * scaleFactor);
+            
+            // 检查是否需要换行
+            if (adjustedFontSize < baseFontSize * 0.8) {
+                // 计算单行最大宽度
+                const maxLineWidth = maxYAxisLabelSpace - iconSpace;
+                
+                // 尝试按空格换行
+                let textLines = wrapText(dim, maxLineWidth, fontFamily, `${adjustedFontSize}px`, fontWeight);
+                
+                // 如果是单个长词，尝试字符分割
+                if (textLines.length === 1 && measureTextWidth(textLines[0], fontFamily, `${adjustedFontSize}px`, fontWeight) > maxLineWidth) {
+                    textLines = breakLongWord(dim, maxLineWidth, fontFamily, `${adjustedFontSize}px`, fontWeight);
+                }
+                
+                yLabelsInfo[dim] = {
+                    fontSize: adjustedFontSize,
+                    lines: textLines,
+                    needsWrap: true
+                };
+                
+                // 计算包含所有行的宽度
+                let maxTextLineWidth = 0;
+                textLines.forEach(line => {
+                    const lineWidth = measureTextWidth(line, fontFamily, `${adjustedFontSize}px`, fontWeight);
+                    maxTextLineWidth = Math.max(maxTextLineWidth, lineWidth);
+                });
+                
+                const requiredWidth = iconSpace + maxTextLineWidth;
+                maxYAxisLabelWidth = Math.max(maxYAxisLabelWidth, requiredWidth);
+            } else {
+                // 只需缩小字体，不需换行
+                yLabelsInfo[dim] = {
+                    fontSize: adjustedFontSize,
+                    lines: [dim],
+                    needsWrap: false
+                };
+                
+                const requiredWidth = iconSpace + measureTextWidth(dim, fontFamily, `${adjustedFontSize}px`, fontWeight);
+                maxYAxisLabelWidth = Math.max(maxYAxisLabelWidth, requiredWidth);
+            }
+        } else {
+            // 标签长度正常
+            yLabelsInfo[dim] = {
+                fontSize: baseFontSize,
+                lines: [dim],
+                needsWrap: false
+            };
+            
+            const requiredWidth = iconSpace + labelWidth;
+            maxYAxisLabelWidth = Math.max(maxYAxisLabelWidth, requiredWidth);
+        }
+    });
+
+    const yAxisPadding = 20;
+    // 减少左边距30像素
+    margin.left = Math.max(margin.left, maxYAxisLabelWidth + yAxisPadding) - 30;
+
+    // --- 5c: 最终确定内部尺寸 ---
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    // ---------- 6. 比例尺 ----------
+    const yScale = d3.scaleBand()
+        .domain(dimensions)
+        .range([0, innerHeight])
+        .padding(0.1); // Y轴类别比例尺
+
+    const xScale = d3.scaleLinear()
+        .domain(tempXScale.domain()) // 复用优化后的域
+        .range([0, innerWidth]); // X轴数值比例尺
+
+    const colorScale = colorResolver.scale(groups, { palette: "category10" }); // 分组颜色比例尺
+
+    // 点的半径，基于Y轴条带高度，有上下限
+    const pointRadius = Math.max(3, Math.min(yScale.bandwidth() * 0.25, 10));
+
+    // ---------- 7. SVG 容器与主分组 ----------
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`) // 实现响应式缩放
+        .attr("style", `max-width: 100%; height: auto;`)
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink"); // 用于xlink:href
+
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`); // 主绘图区
+
+    // ---------- 8. 绘制坐标轴与网格线 ----------
+
+    // X轴 (仅标签)
+    const xAxis = d3.axisBottom(xScale)
+        .ticks(5)
+        .tickFormat(d => chartUtils.format.autoText(+(d)))
+        .tickSizeOuter(0);
+
+    g.append("g")
+        .attr("class", "x-axis")
+        .attr("transform", `translate(0, ${innerHeight})`)
+        .call(xAxis)
+        .call(g => g.select(".domain").remove()) // 移除轴线
+        .call(g => g.selectAll(".tick line").remove()) // 移除刻度线
+        .call(g => g.selectAll(".tick text")
+            .style("font-family", typography.label.font_family)
+            .style("font-size", typography.label.font_size)
+            .style("fill", colorResolver.text({ fallback: "#333" }).value));
+
+    // 添加X轴标题
+    g.append("text")
+        .attr("class", "x-axis-title")
+        .attr("x", innerWidth / 2)
+        .attr("y", innerHeight + margin.bottom / 2 + 5)
+        .attr("text-anchor", "middle")
+        .style("font-family", typography.label.font_family)
+        .style("font-size", typography.label.font_size)
+        .style("font-weight", "bold")
+        .style("fill", colorResolver.text({ fallback: "#333" }).value)
+        .text(valueField); // 使用Y变量名称作为标题
+
+    // --- 绘制垂直网格线 (手动) ---
+    const gridPadding = 5; // 网格线上下延伸距离
+    const yTopGrid = dimensions.length > 0 ? yScale(dimensions[0]) + yScale.bandwidth() / 2 : 0; // 最上方水平网格线Y
+    const yBottomGrid = dimensions.length > 0 ? yScale(dimensions[dimensions.length - 1]) + yScale.bandwidth() / 2 : innerHeight; // 最下方水平网格线Y
+
+    const xTickValues = xScale.ticks(5); // 获取刻度值
+
+    g.append("g")
+        .attr("class", "grid vertical-grid")
+        .selectAll("line")
+        .data(xTickValues)
+        .enter()
+        .append("line")
+        .attr("x1", d => xScale(d))
+        .attr("x2", d => xScale(d))
+        .attr("y1", yTopGrid - gridPadding) // 起点Y
+        .attr("y2", yBottomGrid + gridPadding) // 终点Y
+        .attr("stroke", "#aaaaaa")
+        .attr("stroke-opacity", 0.7);
+
+
+    // 水平网格线 (每个Y类别条带中心)
+    g.append("g")
+        .attr("class", "grid horizontal-grid")
+        .selectAll("line")
+        .data(dimensions)
+        .enter()
+        .append("line")
+        .attr("x1", 0)
+        .attr("x2", innerWidth)
+        .attr("y1", d => yScale(d) + yScale.bandwidth() / 2) // Y坐标在条带中心
+        .attr("y2", d => yScale(d) + yScale.bandwidth() / 2)
+        .attr("stroke", "#aaaaaa")
+        .attr("stroke-opacity", 0.7);
+
+    // ---------- 9. 绘制Y轴标签与图标 ----------
+    const yAxisGroup = g.append("g").attr("class", "y-axis-labels");
+
+    dimensions.forEach(dim => {
+        const yPos = yScale(dim) + yScale.bandwidth() / 2; // 类别条带中心Y
+        const labelInfo = yLabelsInfo[dim];
+        const lineCount = labelInfo.lines.length;
+        const lineHeight = parseFloat(labelInfo.fontSize) * 1.2; // 行高
+        const totalTextHeight = lineHeight * lineCount;
+        
+        // 标签X位置 (不考虑图标)
+        const labelX = -5;
+
+        // 处理多行文本或单行文本
+        if (labelInfo.needsWrap && lineCount > 1) {
+            const labelGroup = yAxisGroup.append("g")
+                .attr("class", "y-axis-label-group");
+                
+            // 计算多行文本的起始Y位置（居中对齐）
+            const startY = yPos - (totalTextHeight / 2) + (lineHeight / 2);
+            
+            labelInfo.lines.forEach((line, i) => {
+                labelGroup.append("text")
+                    .attr("x", labelX)
+                    .attr("y", startY + (i * lineHeight))
+                    .attr("text-anchor", "end") // 右对齐
+                    .style("font-family", typography.label.font_family)
+                    .style("font-size", `${labelInfo.fontSize}px`)
+                    .style("font-weight", typography.label.font_weight)
+                    .style("fill", colorResolver.text({ fallback: "#333" }).value)
+                    .text(line);
+            });
+        } else {
+            // 单行文本
+            yAxisGroup.append("text")
+                .attr("x", labelX)
+                .attr("y", yPos)
+                .attr("dy", "0.35em") // 垂直微调居中
+                .attr("text-anchor", "end") // 右对齐
+                .style("font-family", typography.label.font_family)
+                .style("font-size", `${labelInfo.fontSize}px`)
+                .style("font-weight", typography.label.font_weight)
+                .style("fill", colorResolver.text({ fallback: "#333" }).value)
+                .text(dim);
+        }
+    });
+
+    // ---------- 10. 绘制数据点 ----------
+    g.append("g")
+        .attr("class", "scatter-points")
+        .selectAll("circle")
+        .data(chartData)
+        .enter()
+        .append("circle")
+        .attr("cx", d => xScale(+d[valueField]))
+        .attr("cy", d => yScale(d[dimensionField]) + yScale.bandwidth() / 2) // Y坐标在条带中心
+        .attr("r", pointRadius)
+        .attr("fill", d => colorScale(d[groupField]));
+
+    // ---------- 11. 绘制图例 ----------
+    const initialLegendFontSize = parseFloat(typography.label?.font_size || 12);
+    const legendFontWeight = typography.label?.font_weight || "normal";
+    const legendFontFamily = typography.label?.font_family || "Arial";
+    const legendColor = colorResolver.text({ fallback: "#333333" }).value;
+    const legendItemPadding = 5; // 标记与文本间距
+    const legendColumnPadding = 20; // 图例项间距，增加了间距
+    const legendMinimumFontSize = 9; // 最小图例字体大小
+    const legendRowPadding = 15; // 图例行间距，增加以防止行间重叠
+    
+    // 图例标题设置
+    const legendTitle = groupField; // 使用分组字段名作为图例标题
+    const legendTitleFontSize = initialLegendFontSize;
+    const legendTitleFontWeight = "bold"; // 标题加粗
+
+    if (groups.length > 0) {
+        const legendFontSize = parseFloat(typography.label?.font_size || 12);
+        const legendFontWeight = typography.label?.font_weight || "normal";
+        const legendFontFamily = typography.label?.font_family || "Arial";
+        const legendColor = colorResolver.text({ fallback: "#333333" }).value;
+        const baseWidth = (typeof chartWidth === "number" ? chartWidth : innerWidth);
+        const legendWidth = baseWidth * 0.9;
+        const legendCenterX = margin.left + baseWidth / 2;
+        const legendY = margin.top / 2;
+
+        if (typeof groupField === "string" && groupField.length > 0) {
+            svg.append("text")
+                .attr("class", "legend-title")
+                .attr("x", legendCenterX)
+                .attr("y", legendY - (legendFontSize + 6))
+                .attr("text-anchor", "middle")
+                .style("font-family", legendFontFamily)
+                .style("font-size", `${legendFontSize + 1}px`)
+                .style("font-weight", "bold")
+                .style("fill", legendColor)
+                .text(groupField);
+        }
+
+        chartUtils.legend.centered(svg, groups, {
+            colorScale,
+            colorResolver,
+            colors,
+        }, legendCenterX, legendY, {
+            markerShape: "circle",
+            markerSize: pointRadius * 2,
+            labelGap: 5,
+            itemGap: 20,
+            rowGap: 15,
+            maxWidth: legendWidth,
+            fitToWidth: true,
+            minFontSize: 9,
+            fontSize: legendFontSize,
+            fontFamily: legendFontFamily,
+            fontWeight: legendFontWeight,
+            textColor: legendColor,
+        });
+    }
+
+    // ---------- 12. 返回 SVG 节点 ----------
+    return svg.node();
+}