Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type23_span_chart/span_plain_chart_01.js

@@ -0,0 +1,246 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Span Chart",
+    "chart_name": "span_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, 2]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": ["primary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 使用D3.js实现水平span图表
+function makeChart(containerSelector, data) {
+    // ---------- 1. 数据准备 ----------
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        title: { font_family: "Arial", font_size: "18px", font_weight: "bold" },
+        label: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        description: { font_family: "Arial", font_size: "14px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "normal" }
+    };
+    const colors = jsonData.colors_dark || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    
+    d3.select(containerSelector).html("");
+    
+    // ---------- 2. 尺寸和布局设置 ----------
+    const width = variables.width || 800;
+    const height = variables.height || 600;
+    const margin = { top: 90, right: 80, bottom: 60, left: 120 };
+    
+    // ---------- 3. 提取字段信息 ----------
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    const groupField = chartUtils.schema.channel(jsonData, "group").key;
+    
+    // 数值格式化函数
+    
+    // ---------- 4. 数据处理 ----------
+    const dimensions = [...new Set(chartData.map(d => d[dimensionField]))];
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // Sparse dimensions are valid; dimensions with fewer than two points are skipped below.
+    
+    // ---------- 5. 计算内部绘图区域 ----------
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    
+    // ---------- 6. 创建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;");
+
+    const defs = svg.append("defs");
+
+    // 创建背景渐变
+    const bgGradient = defs.append("linearGradient")
+        .attr("id", "background-gradient")
+        .attr("x1", "0%").attr("y1", "0%")
+        .attr("x2", "100%").attr("y2", "100%");
+    
+    bgGradient.append("stop").attr("offset", "0%").attr("stop-color", "#4a0032");
+    bgGradient.append("stop").attr("offset", "100%").attr("stop-color", "#1c3b6e");
+
+    // 添加背景
+    svg.append("rect")
+        .attr("width", width).attr("height", height)
+        .attr("class", "background")
+        .attr("fill", "url(#background-gradient)");
+    
+    // ---------- 7. 创建比例尺 ----------
+    const yScale = d3.scaleBand()
+        .domain(dimensions)
+        .range([0, innerHeight])
+        .padding(0.2);
+
+    const minValue = d3.min(chartData, d => +d[valueField]);
+    const maxValue = d3.max(chartData, d => +d[valueField]);
+    const xScale = d3.scaleLinear()
+        .domain([Math.min(minValue, 0) * 1.15, maxValue * 1.1])
+        .range([0, innerWidth]);
+    
+    // 颜色比例尺
+    const colorScale = d3.scaleOrdinal()
+        .domain(groups)
+        .range(groups.map((group, i) => {
+            if (colorResolver.field(group, 0, { fallbackKey: "primary" }).value) return colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+            return i === 0 ? "#1d3c6f" : "#6fa0d8";
+        }));
+    chartUtils.legend.centered(svg, groups, {
+        colorScale,
+        colorResolver,
+        colors,
+    }, width / 2, margin.top - 25, {
+        markerShape: "circle",
+        markerSize: 15,
+        labelGap: 5,
+        itemGap: 20,
+        fontSize: typography.label.font_size,
+        fontFamily: typography.label.font_family,
+        fontWeight: typography.label.font_weight,
+        textColor: "#ffffff",
+        markerRadius: variables.has_rounded_corners ? 2 : 0,
+    });
+    
+    // ---------- 9. 创建主图表组 ----------
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // ---------- 10. 添加网格线 ----------
+    const xTicks = xScale.ticks(8);
+    
+    g.selectAll(".gridline")
+        .data(xTicks)
+        .enter().append("line")
+        .attr("class", "gridline")
+        .attr("x1", d => xScale(d)).attr("y1", 0)
+        .attr("x2", d => xScale(d)).attr("y2", innerHeight)
+        .attr("stroke", "rgba(255, 255, 255, 0.15)")
+        .attr("stroke-width", 1);
+    
+    // 添加X轴刻度值
+    g.selectAll(".value")
+        .data(xTicks)
+        .enter().append("text")
+        .attr("class", "value")
+        .attr("x", d => xScale(d))
+        .attr("y", innerHeight + 20)
+        .attr("text-anchor", "middle")
+        .style("font-family", "Arial")
+        .style("font-size", "12px")
+        .style("fill", "white")
+        .text(d => chartUtils.format.scaledText(d));
+    
+    // ---------- 11. 绘制条形和标记 ----------
+    dimensions.forEach(dimension => {
+        const dimensionData = chartData.filter(d => d[dimensionField] === dimension);
+        
+        if (dimensionData.length > 0) {
+            const barHeight = yScale.bandwidth();
+            const labelY = yScale(dimension) + barHeight / 2;
+            
+            // 添加维度标签
+            g.append("text")
+                .attr("x", -5).attr("y", labelY).attr("dy", "0.35em")
+                .attr("text-anchor", "end")
+                .attr("class", "label")
+                .style("font-family", typography.label.font_family)
+                .style("font-size", typography.label.font_size)
+                .style("fill", "#ffffff")
+                .text(dimension);
+            
+            // 处理数据点
+            const pointData = groups.map(group => {
+                const dataPoint = dimensionData.find(d => d[groupField] === group);
+                if (dataPoint) {
+                    return {
+                        group: group,
+                        value: +dataPoint[valueField],
+                        x: xScale(+dataPoint[valueField]),
+                        y: yScale(dimension)
+                    };
+                }
+                return null;
+            }).filter(d => d !== null);
+            
+            pointData.sort((a, b) => a.value - b.value);
+            
+            // 绘制条形和数据点
+            if (pointData.length >= 2) {
+                const startPoint = pointData[0];
+                const endPoint = pointData[1];
+                
+                // 绘制条形
+                g.append("rect")
+                    .attr("x", startPoint.x)
+                    .attr("y", startPoint.y + barHeight * 0.25)
+                    .attr("width", endPoint.x - startPoint.x)
+                    .attr("height", barHeight * 0.5)
+                    .attr("class", "mark")
+                    .attr("fill", colorResolver.other("primary", { fallback: "#6fa0d8" }).value);
+                
+                // 添加数据点圆圈
+                pointData.forEach(point => {
+                    g.append("circle")
+                        .attr("cx", point.x)
+                        .attr("cy", point.y + barHeight / 2)
+                        .attr("r", 6)
+                        .attr("class", "mark")
+                        .attr("fill", colorScale(point.group))
+                        .attr("stroke", "white")
+                        .attr("stroke-width", 2);
+                });
+                
+                // 左边数值标签
+                g.append("text")
+                    .attr("x", startPoint.x - 8)
+                    .attr("y", startPoint.y + barHeight / 2)
+                    .attr("dy", "0.35em")
+                    .attr("text-anchor", "end")
+                    .attr("class", "value")
+                    .style("font-family", typography.annotation.font_family)
+                    .style("font-size", `${Math.min(16, Math.max(barHeight * 0.4, 12))}px`)
+                    .style("font-weight", "bold")
+                    .style("fill", colorResolver.text({ fallback: "#ffffff" }).value)
+                    .text(chartUtils.format.scaledText(startPoint.value));
+                
+                // 右边数值标签
+                g.append("text")
+                    .attr("x", endPoint.x + 8)
+                    .attr("y", endPoint.y + barHeight / 2)
+                    .attr("dy", "0.35em")
+                    .attr("text-anchor", "start")
+                    .attr("class", "value")
+                    .style("font-family", typography.annotation.font_family)
+                    .style("font-size", `${Math.min(16, Math.max(barHeight * 0.4, 12))}px`)
+                    .style("font-weight", "bold")
+                    .style("fill", colorResolver.text({ fallback: "#ffffff" }).value)
+                    .text(chartUtils.format.scaledText(endPoint.value));
+            }
+        }
+    });
+    
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type23_span_chart/span_plain_chart_02.js

@@ -0,0 +1,318 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Span Chart",
+    "chart_name": "span_plain_chart_02",
+    "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, 2]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": ["primary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 使用D3.js实现垂直span图表
+function makeChart(containerSelector, data) {
+    // ---------- 1. 数据准备 ----------
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        title: { font_family: "Arial", font_size: "18px", font_weight: "bold" },
+        label: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        description: { font_family: "Arial", font_size: "14px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "normal" }
+    };
+    const colors = jsonData.colors_dark || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    
+    d3.select(containerSelector).html("");
+    
+    // ---------- 2. 尺寸和布局设置 ----------
+    const width = variables.width || 800;
+    const height = variables.height || 600;
+    const margin = { top: 90, right: 60, bottom: 80, left: 60 };
+    
+    // ---------- 3. 提取字段信息 ----------
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    const groupField = chartUtils.schema.channel(jsonData, "group").key;
+    
+    // 数值格式化函数
+    
+    // ---------- 4. 数据处理 ----------
+    const dimensions = [...new Set(chartData.map(d => d[dimensionField]))];
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // Sparse dimensions are valid; dimensions with fewer than two points are skipped below.
+    
+    // ---------- 5. 计算内部绘图区域 ----------
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    
+    // ---------- 6. 创建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;");
+
+    const defs = svg.append("defs");
+
+    // 创建背景渐变
+    const bgGradient = defs.append("linearGradient")
+        .attr("id", "background-gradient")
+        .attr("x1", "0%").attr("y1", "0%")
+        .attr("x2", "100%").attr("y2", "100%");
+    
+    bgGradient.append("stop").attr("offset", "0%").attr("stop-color", "#4a0032");
+    bgGradient.append("stop").attr("offset", "100%").attr("stop-color", "#1c3b6e");
+
+    // 添加背景
+    svg.append("rect")
+        .attr("width", width).attr("height", height)
+        .attr("class", "background")
+        .attr("fill", "url(#background-gradient)");
+    
+    // ---------- 7. 创建比例尺 ----------
+    const xScale = d3.scaleBand()
+        .domain(dimensions)
+        .range([0, innerWidth])
+        .padding(0.2);
+
+    const minValue = d3.min(chartData, d => +d[valueField]);
+    const maxValue = d3.max(chartData, d => +d[valueField]);
+    const yScale = d3.scaleLinear()
+        .domain([Math.min(minValue, 0) * 1.15, maxValue * 1.1])
+        .range([innerHeight, 0]);
+    
+    // 颜色比例尺
+    const colorScale = d3.scaleOrdinal()
+        .domain(groups)
+        .range(groups.map((group, i) => {
+            if (colorResolver.field(group, 0, { fallbackKey: "primary" }).value) return colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+            return i === 0 ? "#1d3c6f" : "#6fa0d8";
+        }));
+    chartUtils.legend.centered(svg, groups, {
+        colorScale,
+        colorResolver,
+        colors,
+    }, width / 2, margin.top - 25, {
+        markerShape: "circle",
+        markerSize: 15,
+        labelGap: 5,
+        itemGap: 20,
+        fontSize: typography.label.font_size,
+        fontFamily: typography.label.font_family,
+        fontWeight: typography.label.font_weight,
+        textColor: "#ffffff",
+        markerRadius: variables.has_rounded_corners ? 2 : 0,
+    });
+    
+    // ---------- 9. 创建主图表组 ----------
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // ---------- 10. 添加网格线 ----------
+    const yTicks = yScale.ticks(8);
+    
+    g.selectAll(".gridline")
+        .data(yTicks)
+        .enter().append("line")
+        .attr("class", "gridline")
+        .attr("x1", 0).attr("y1", d => yScale(d))
+        .attr("x2", innerWidth).attr("y2", d => yScale(d))
+        .attr("stroke", "rgba(255, 255, 255, 0.15)")
+        .attr("stroke-width", 1);
+    
+    // 添加Y轴刻度值
+    g.selectAll(".value")
+        .data(yTicks)
+        .enter().append("text")
+        .attr("class", "value")
+        .attr("x", -10)
+        .attr("y", d => yScale(d))
+        .attr("text-anchor", "end")
+        .attr("dy", "0.35em")
+        .style("font-family", "Arial")
+        .style("font-size", "12px")
+        .style("fill", "white")
+        .text(d => chartUtils.format.scaledText(d));
+    
+    // ---------- 11. 绘制条形和标记 ----------
+    // 计算适合的字体大小
+    const calculateFontSize = (text, maxWidth, baseFontSize) => {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        let fontSize = baseFontSize;
+        
+        do {
+            ctx.font = `${typography.label.font_weight} ${fontSize}px ${typography.label.font_family}`;
+            if (chartUtils.text.contextWidth(ctx, text) <= maxWidth) break;
+            fontSize -= 0.5;
+        } while (fontSize > 10);
+        
+        return fontSize;
+    };
+
+    // 文本自动换行函数 - 顶行对齐
+    const wrapText = (textElement, str, maxWidth) => {
+        const words = str.split(/\s+/).reverse();
+        const lines = [];
+        let currentLine = [];
+        let word;
+        
+        textElement.text(null);
+        
+        if (words.length > 1) {
+            while (word = words.pop()) {
+                currentLine.push(word);
+                const testWidth = chartUtils.text.measure(null, currentLine.join(" "), {
+                    fontFamily: textElement.style("font-family"),
+                    fontSize: parseFloat(textElement.style("font-size")),
+                    fontWeight: textElement.style("font-weight")
+                }).width;
+                if (testWidth > maxWidth && currentLine.length > 1) {
+                    currentLine.pop();
+                    lines.push(currentLine.join(" "));
+                    currentLine = [word];
+                }
+            }
+            if (currentLine.length > 0) lines.push(currentLine.join(" "));
+        } else {
+            lines.push(str);
+        }
+        
+        // 顶行对齐：第一行在原始Y位置
+        const lineHeight = 1.1;
+        
+        lines.forEach((line, i) => {
+            textElement.append("tspan")
+                .attr("x", textElement.attr("x"))
+                .attr("dy", (i === 0 ? 0 : lineHeight) + "em")
+                .text(line);
+        });
+    };
+
+    // 预计算统一字体大小
+    const baseFontSize = parseInt(typography.label.font_size) || 12;
+    const longestDimension = dimensions.reduce((a, b) => 
+        a.toString().length > b.toString().length ? a : b, "").toString();
+    const maxLabelWidth = xScale.bandwidth() * 0.8;
+    const uniformFontSize = calculateFontSize(longestDimension, maxLabelWidth, baseFontSize);
+
+    dimensions.forEach(dimension => {
+        const dimensionData = chartData.filter(d => d[dimensionField] === dimension);
+        
+        if (dimensionData.length > 0) {
+            const barWidth = xScale.bandwidth();
+            const labelX = xScale(dimension) + barWidth / 2;
+            
+            // 添加维度标签 - 使用统一字体大小和换行
+            const labelText = g.append("text")
+                .attr("x", labelX).attr("y", innerHeight + 25)
+                .attr("text-anchor", "middle")
+                .attr("class", "label")
+                .style("font-family", typography.label.font_family)
+                .style("font-size", `${uniformFontSize}px`)
+                .style("font-weight", typography.label.font_weight)
+                .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+                .text(dimension);
+            
+            // 检查是否需要换行
+            if (chartUtils.text.measure(g, dimension, {
+                fontFamily: typography.label.font_family,
+                fontSize: uniformFontSize,
+                fontWeight: typography.label.font_weight
+            }).width > maxLabelWidth) {
+                wrapText(labelText, dimension.toString(), maxLabelWidth);
+            }
+            
+            // 处理数据点
+            const pointData = groups.map(group => {
+                const dataPoint = dimensionData.find(d => d[groupField] === group);
+                if (dataPoint) {
+                    return {
+                        group: group,
+                        value: +dataPoint[valueField],
+                        x: xScale(dimension),
+                        y: yScale(+dataPoint[valueField])
+                    };
+                }
+                return null;
+            }).filter(d => d !== null);
+            
+            pointData.sort((a, b) => a.value - b.value);
+            
+            // 绘制条形和数据点
+            if (pointData.length >= 2) {
+                const startPoint = pointData[0];
+                const endPoint = pointData[1];
+                
+                // 绘制条形
+                g.append("rect")
+                    .attr("x", startPoint.x + barWidth * 0.25)
+                    .attr("y", endPoint.y)
+                    .attr("width", barWidth * 0.5)
+                    .attr("height", startPoint.y - endPoint.y)
+                    .attr("class", "mark")
+                    .attr("fill", colorResolver.other("primary", { fallback: "#6fa0d8" }).value);
+                
+                // 添加数据点圆圈
+                pointData.forEach(point => {
+                    g.append("circle")
+                        .attr("cx", point.x + barWidth / 2)
+                        .attr("cy", point.y)
+                        .attr("r", 6)
+                        .attr("class", "mark")
+                        .attr("fill", colorScale(point.group))
+                        .attr("stroke", "white")
+                        .attr("stroke-width", 2);
+                });
+                
+                // 下方数值标签
+                g.append("text")
+                    .attr("x", startPoint.x + barWidth / 2)
+                    .attr("y", startPoint.y + 8)
+                    .attr("dy", "0.7em")
+                    .attr("text-anchor", "middle")
+                    .attr("class", "value")
+                    .style("font-family", typography.annotation.font_family)
+                    .style("font-size", `${Math.min(16, Math.max(barWidth * 0.4, 12))}px`)
+                    .style("font-weight", "bold")
+                    .style("fill", colorResolver.text({ fallback: "#ffffff" }).value)
+                    .text(chartUtils.format.scaledText(startPoint.value));
+                
+                // 上方数值标签
+                g.append("text")
+                    .attr("x", endPoint.x + barWidth / 2)
+                    .attr("y", endPoint.y - 8)
+                    .attr("dy", "-0.2em")
+                    .attr("text-anchor", "middle")
+                    .attr("class", "value")
+                    .style("font-family", typography.annotation.font_family)
+                    .style("font-size", `${Math.min(16, Math.max(barWidth * 0.4, 12))}px`)
+                    .style("font-weight", "bold")
+                    .style("fill", colorResolver.text({ fallback: "#ffffff" }).value)
+                    .text(chartUtils.format.scaledText(endPoint.value));
+            }
+        }
+    });
+    
+    return svg.node();
+}