Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type38_radial_area_chart/radial_area_chart_grid_01.js

@@ -0,0 +1,220 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Radial Area Chart",
+    "chart_name": "radial_area_chart_grid_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 12], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 内联utils函数
+    const measureTextWidth = (text, fontSize) => {
+        return chartUtils.text.measure(null, text, { fontSize: fontSize }).width;
+    };
+
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 50, right: 50, bottom: 50, left: 50 };
+    
+    // 创建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");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    const radius = Math.min(chartWidth, chartHeight) / 2;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${width/2}, ${height/2})`);
+    
+    // 获取唯一类别和主色调
+    const categories = [...new Set(chartData.map(d => d[categoryField]))];
+    const mainColor = colorResolver.other("primary", { fallback: "#1f77b4" }).value;
+    
+    // 创建比例尺
+    const angleScale = d3.scalePoint()
+        .domain(categories)
+        .range([0, 2 * Math.PI - (2 * Math.PI / categories.length)]);
+    
+    const allValues = chartData.map(d => +d[valueField]);
+    const radiusScale = d3.scaleLinear()
+        .domain([Math.min(0, d3.min(allValues)), d3.max(allValues) * 1.2])
+        .range([0, radius])
+        .nice();
+    
+    // 绘制网格线
+    const ticks = radiusScale.ticks(5);
+    
+    // 绘制同心圆网格
+    g.selectAll(".gridline")
+        .data(ticks)
+        .enter()
+        .append("circle")
+        .attr("class", "gridline")
+        .attr("cx", 0)
+        .attr("cy", 0)
+        .attr("r", d => radiusScale(d))
+        .attr("fill", "none")
+        .attr("stroke", "#bbb")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "4,4");
+    
+    // 绘制径向轴线
+    g.selectAll(".axis")
+        .data(categories)
+        .enter()
+        .append("line")
+        .attr("class", "axis")
+        .attr("x1", 0)
+        .attr("y1", 0)
+        .attr("x2", d => radius * Math.cos(angleScale(d) - Math.PI/2))
+        .attr("y2", d => radius * Math.sin(angleScale(d) - Math.PI/2))
+        .attr("stroke", "#bbb")
+        .attr("stroke-width", 1);
+    
+    // 添加类别标签
+    g.selectAll(".label")
+        .data(categories)
+        .enter()
+        .append("text")
+        .attr("class", "label")
+        .attr("x", d => (radius + 20) * Math.cos(angleScale(d) - Math.PI/2))
+        .attr("y", d => (radius + 20) * Math.sin(angleScale(d) - Math.PI/2))
+        .attr("text-anchor", d => {
+            const angle = angleScale(d);
+            if (Math.abs(angle) < 0.1 || Math.abs(angle - Math.PI) < 0.1) return "middle";
+            return angle > Math.PI ? "end" : "start";
+        })
+        .attr("dominant-baseline", d => {
+            const angle = angleScale(d);
+            if (Math.abs(angle) < 0.1 || Math.abs(angle - Math.PI) < 0.1) return "middle";
+            return angle < Math.PI ? "hanging" : "auto";
+        })
+        .attr("fill", "#333")
+        .attr("font-size", "16px")
+        .attr("font-weight", "bold")
+        .text(d => d);
+    
+    // 添加刻度值标签
+    g.selectAll(".value")
+        .data(ticks)
+        .enter()
+        .append("text")
+        .attr("class", "value")
+        .attr("x", 5)
+        .attr("y", d => -radiusScale(d))
+        .attr("text-anchor", "start")
+        .attr("font-size", "14px")
+        .attr("fill", "#666")
+        .text(d => d);
+    
+    // 创建���达路径
+    const points = categories.map(cat => {
+        const point = chartData.find(item => item[categoryField] === cat);
+        if (point) {
+            const angle = angleScale(cat) - Math.PI/2;
+            const distance = radiusScale(+point[valueField]);
+            return [distance * Math.cos(angle), distance * Math.sin(angle)];
+        }
+        return [0, 0];
+    });
+    
+    // 绘制雷达面积
+    g.append("path")
+        .attr("class", "mark")
+        .attr("d", d3.line()(points) + "Z")
+        .attr("fill", mainColor)
+        .attr("fill-opacity", 0.2)
+        .attr("stroke", mainColor)
+        .attr("stroke-width", 6)
+        .attr("stroke-linejoin", "miter");
+    
+    // 绘制数据点和数值标签
+    categories.forEach((cat, index) => {
+        const point = chartData.find(item => item[categoryField] === cat);
+        if (point) {
+            const angle = angleScale(cat) - Math.PI/2;
+            const distance = radiusScale(+point[valueField]);
+            const x = distance * Math.cos(angle);
+            const y = distance * Math.sin(angle);
+            
+            // 数据点
+            g.append("circle")
+                .attr("class", "mark")
+                .attr("cx", x)
+                .attr("cy", y)
+                .attr("r", 6)
+                .attr("fill", mainColor)
+                .attr("stroke", "#fff")
+                .attr("stroke-width", 3);
+
+            // 数值标签
+            const labelText = chartUtils.format.number(point[valueField]).text;
+            const textWidth = measureTextWidth(labelText, 14);
+            const textX = index === 0 ? (distance + 30) * Math.cos(angle) - 20 : (distance + 30) * Math.cos(angle);
+            const textY = index === 0 ? (distance + 15) * Math.sin(angle) : (distance + 30) * Math.sin(angle);
+
+            // 标签背景
+            g.append("rect")
+                .attr("class", "background")
+                .attr("x", textX - textWidth/2 - 4)
+                .attr("y", textY - 8)
+                .attr("width", textWidth + 8)
+                .attr("height", 16)
+                .attr("fill", mainColor)
+                .attr("rx", 3);
+
+            // 标签文字
+            g.append("text")
+                .attr("class", "value")
+                .attr("x", textX)
+                .attr("y", textY)
+                .attr("text-anchor", "middle") 
+                .attr("dominant-baseline", "middle")
+                .attr("font-size", "14px")
+                .attr("fill", "#fff")
+                .text(labelText);
+        }
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/type38_radial_area_chart/radial_area_plain_chart_01.js

@@ -0,0 +1,387 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Radial Area Chart",
+    "chart_name": "radial_area_plain_chart_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 12], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const sourceData = jsonData.data?.data || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors || {};
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsFormatSample = chartUtils.format.autoText;
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+
+    d3.select(containerSelector).html("");
+
+    const categoryField = chartUtils.schema.column(dataColumns, 0).raw?.name;
+    const valueField = chartUtils.schema.column(dataColumns, 1).raw?.name;
+    const categoryType = chartUtils.schema.column(dataColumns, 0).raw?.data_type || "categorical";
+    const categoryUnit = (chartUtils.schema.column(dataColumns, 0).raw?.unit || "").trim();
+    const valueUnit = (chartUtils.schema.column(dataColumns, 1).raw?.unit || "").trim();
+    const width = variables.width || 600;
+    const height = variables.height || 600;
+
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const titleFont = typography.title?.font_family || fontFamily;
+    const textColor = sourceColors.text_color || "#1f2937";
+    const mutedText = "#6b7280";
+    const gridColor = "#d8e2ea";
+    const mainColor = sourceColors.other?.primary || "#2563eb";
+
+    const readableName = value => String(value || "")
+        .replace(/_/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim();
+
+    const categoryLabel = readableName(chartUtils.schema.column(dataColumns, 0).raw?.label || chartUtils.schema.column(dataColumns, 0).raw?.name || categoryField);
+    const valueLabel = readableName(chartUtils.schema.column(dataColumns, 1).raw?.label || chartUtils.schema.column(dataColumns, 1).raw?.name || valueField);
+
+    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")
+        .attr("class", "radial-area-chart-root");
+
+    if (!categoryField || !valueField) {
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text("Missing radial area fields");
+        return svg.node();
+    }
+
+    const parseTemporal = value => {
+        if (value instanceof Date) return value;
+        const numeric = Number(value);
+        if (Number.isFinite(numeric) && String(value).trim().length <= 4) {
+            return new Date(numeric, 0, 1);
+        }
+        const parsed = new Date(value);
+        return Number.isNaN(parsed.getTime()) ? null : parsed;
+    };
+
+    const compactNumber = value => {
+        const abs = Math.abs(value);
+        const spec = abs >= 100 ? ".0f" : abs >= 10 ? ".1f" : ".2f";
+        if (abs >= 1000000000) return `${d3.format(spec)(value / 1000000000)}B`;
+        if (abs >= 1000000) return `${d3.format(spec)(value / 1000000)}M`;
+        if (abs >= 1000) return `${d3.format(spec)(value / 1000)}K`;
+        return d3.format(spec)(value).replace(/\.0$/, "");
+    };
+
+    const formatLocalValue = value => {
+        const formatted = compactNumber(value);
+        const currencyWithSuffix = valueUnit.match(/^([£$€¥])\s*([A-Za-z]+)$/);
+        if (valueUnit === "%") return `${formatted}%`;
+        if (currencyWithSuffix) return `${currencyWithSuffix[1]}${formatted}${currencyWithSuffix[2]}`;
+        if (/^[£$€¥]$/.test(valueUnit)) return `${valueUnit}${formatted}`;
+        if (valueUnit) return `${formatted} ${valueUnit}`;
+        return formatted;
+    };
+
+    const categoryMap = new Map();
+    sourceData.forEach(d => {
+        const category = String(d[categoryField]);
+        const value = Number(d[valueField]);
+        if (!category || !Number.isFinite(value) || value < 0) return;
+        if (!categoryMap.has(category)) {
+            categoryMap.set(category, { rawCategory: d[categoryField], values: [] });
+        }
+        categoryMap.get(category).values.push(value);
+    });
+    const grouped = Array.from(categoryMap.entries()).map(([category, entry]) => {
+        const value = d3.mean(entry.values);
+        return {
+            category,
+            rawCategory: entry.rawCategory,
+            value
+        };
+    });
+
+    if (grouped.length < 3) {
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text("Not enough data");
+        return svg.node();
+    }
+
+    let chartData = grouped.slice();
+    if (categoryType === "temporal") {
+        chartData.sort((a, b) => {
+            const aDate = parseTemporal(a.rawCategory);
+            const bDate = parseTemporal(b.rawCategory);
+            return d3.ascending(aDate ? +aDate : Number(a.rawCategory), bDate ? +bDate : Number(b.rawCategory));
+        });
+    } else {
+        chartData.sort((a, b) => d3.descending(a.value, b.value) || d3.ascending(a.category, b.category));
+    }
+
+    const maxLabelLength = d3.max(chartData, d => d.category.length) || 0;
+    const needsKey = categoryType !== "temporal" && (maxLabelLength > 12 || chartData.length > 10);
+    chartData.forEach((d, index) => {
+        d.displayLabel = needsKey ? `R${index + 1}` : d.category;
+    });
+
+    const margin = {
+        top: 48,
+        right: needsKey ? 168 : 44,
+        bottom: 56,
+        left: 44
+    };
+    const plotWidth = width - margin.left - margin.right;
+    const plotHeight = height - margin.top - margin.bottom;
+    const radius = Math.max(80, Math.min(plotWidth, plotHeight) / 2 - 26);
+    const centerX = margin.left + plotWidth / 2;
+    const centerY = margin.top + plotHeight / 2 + 10;
+
+    const maxValue = d3.max(chartData, d => d.value) || 1;
+    const radiusScale = d3.scaleLinear()
+        .domain([0, maxValue])
+        .range([0, radius])
+        .nice(4);
+    const radiusTicks = radiusScale.ticks(4).filter(tick => tick > 0);
+    const maxTick = d3.max(radiusTicks) || maxValue;
+    radiusScale.domain([0, maxTick]);
+
+    const angleStep = (2 * Math.PI) / chartData.length;
+    const angleForIndex = index => index * angleStep - Math.PI / 2;
+
+    const pointFor = (d, index, distance = radiusScale(d.value)) => {
+        const angle = angleForIndex(index);
+        return {
+            x: distance * Math.cos(angle),
+            y: distance * Math.sin(angle),
+            angle
+        };
+    };
+
+    const pathPoints = chartData.map((d, index) => {
+        const point = pointFor(d, index);
+        return [point.x, point.y];
+    });
+
+    const g = svg.append("g")
+        .attr("class", "radial-area-plot")
+        .attr("data-tag", "chart")
+        .attr("transform", `translate(${centerX}, ${centerY})`);
+
+    radiusTicks.forEach(tick => {
+        g.append("circle")
+            .attr("class", "radial-grid-ring")
+            .attr("r", radiusScale(tick))
+            .attr("fill", "none")
+            .attr("stroke", gridColor)
+            .attr("stroke-width", 1);
+
+        g.append("text")
+            .attr("class", "radial-grid-label")
+            .attr("x", 6)
+            .attr("y", -radiusScale(tick) - 3)
+            .attr("fill", mutedText)
+            .style("font-family", fontFamily)
+            .style("font-size", "10px")
+            .text(formatLocalValue(tick));
+    });
+
+    chartData.forEach((d, index) => {
+        const outer = pointFor(d, index, radius);
+        const labelDistance = radius + 15;
+        const labelPoint = pointFor(d, index, labelDistance);
+        const cos = Math.cos(outer.angle);
+        const sin = Math.sin(outer.angle);
+
+        g.append("line")
+            .attr("class", "radial-axis-line")
+            .attr("x1", 0)
+            .attr("y1", 0)
+            .attr("x2", outer.x)
+            .attr("y2", outer.y)
+            .attr("stroke", "#cbd5df")
+            .attr("stroke-width", 1);
+
+        g.append("text")
+            .attr("class", "category-label")
+            .attr("x", labelPoint.x)
+            .attr("y", labelPoint.y)
+            .attr("text-anchor", Math.abs(cos) < 0.25 ? "middle" : (cos > 0 ? "start" : "end"))
+            .attr("dominant-baseline", Math.abs(sin) < 0.25 ? "middle" : (sin > 0 ? "hanging" : "auto"))
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", needsKey ? "10px" : "11px")
+            .style("font-weight", "700")
+            .text(d.displayLabel);
+    });
+
+    g.append("path")
+        .attr("class", "radial-area-path")
+        .attr("data-tag", "mark")
+        .attr("d", d3.line().curve(d3.curveLinearClosed)(pathPoints))
+        .attr("fill", mainColor)
+        .attr("fill-opacity", 0.22)
+        .attr("stroke", mainColor)
+        .attr("stroke-width", 3)
+        .attr("stroke-linejoin", "round");
+
+    chartData.forEach((d, index) => {
+        const point = pointFor(d, index);
+        g.append("circle")
+            .attr("class", "radial-area-point")
+            .attr("data-tag", "mark")
+            .attr("cx", point.x)
+            .attr("cy", point.y)
+            .attr("r", 4.2)
+            .attr("fill", mainColor)
+            .attr("stroke", "#ffffff")
+            .attr("stroke-width", 2);
+    });
+
+    let maxIndex = 0;
+    let minIndex = 0;
+    chartData.forEach((d, index) => {
+        if (d.value > chartData[maxIndex].value) maxIndex = index;
+        if (d.value < chartData[minIndex].value) minIndex = index;
+    });
+    const extrema = new Set([maxIndex, minIndex]);
+    chartData.forEach((d, index) => {
+        if (!extrema.has(index)) return;
+        const point = pointFor(d, index, radiusScale(d.value) + 18);
+        const label = formatLocalValue(d.value);
+        const labelWidth = Math.max(34, label.length * 6.2);
+
+        g.append("rect")
+            .attr("class", "extreme-value-background")
+            .attr("x", point.x - labelWidth / 2 - 4)
+            .attr("y", point.y - 9)
+            .attr("width", labelWidth + 8)
+            .attr("height", 18)
+            .attr("rx", 4)
+            .attr("fill", "#ffffff")
+            .attr("stroke", mainColor)
+            .attr("stroke-width", 1);
+
+        g.append("text")
+            .attr("class", "value-label")
+            .attr("x", point.x)
+            .attr("y", point.y + 1)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", mainColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "10px")
+            .style("font-weight", "700")
+            .text(label);
+    });
+
+    g.append("text")
+        .attr("class", "radial-axis-title")
+        .attr("x", 0)
+        .attr("y", radius + 42)
+        .attr("text-anchor", "middle")
+        .attr("fill", mutedText)
+        .style("font-family", titleFont)
+        .style("font-size", "11px")
+        .text(valueUnit ? `${valueLabel} (${valueUnit})` : valueLabel);
+
+    if (categoryType === "temporal") {
+        const first = chartData[0]?.category;
+        const last = chartData[chartData.length - 1]?.category;
+        g.append("text")
+            .attr("class", "category-context-label")
+            .attr("x", 0)
+            .attr("y", -radius - 28)
+            .attr("text-anchor", "middle")
+            .attr("fill", mutedText)
+            .style("font-family", fontFamily)
+            .style("font-size", "10px")
+            .text(`${categoryLabel}${categoryUnit ? ` (${categoryUnit})` : ""}: ${first}-${last}`);
+    }
+
+    if (needsKey) {
+        const key = svg.append("g")
+            .attr("class", "category-key")
+            .attr("transform", `translate(${width - margin.right + 16}, ${margin.top + 10})`);
+
+        key.append("text")
+            .attr("class", "category-key-title")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("fill", textColor)
+            .style("font-family", titleFont)
+            .style("font-size", "11px")
+            .style("font-weight", "700")
+            .text(categoryLabel);
+
+        chartData.forEach((d, index) => {
+            const row = key.append("g")
+                .attr("class", "category-key-row")
+                .attr("transform", `translate(0, ${18 + index * 18})`);
+            const label = d.category.length > 21 ? `${d.category.slice(0, 20)}...` : d.category;
+
+            row.append("text")
+                .attr("class", "category-key-label")
+                .attr("x", 0)
+                .attr("y", 0)
+                .attr("fill", textColor)
+                .style("font-family", fontFamily)
+                .style("font-size", "9.5px")
+                .text(`${d.displayLabel} ${label}`);
+        });
+    }
+
+    return svg.node();
+}