Spaces:

Ray1ee01
/

ChartPipeline

Sleeping

File size: 7,950 Bytes

216c0a4

// Legacy global helpers kept for old D3 templates during migration.
// 解析日期
var parseDate = d => {
    if (d instanceof Date) return d;
    if (typeof d === 'number') return new Date(d, 0, 1);
    if (typeof d === 'string') {
        const parts = d.split('-');
        
        // YYYY-MM-DD 格式
        if (parts.length === 3) {
            const year = parseInt(parts[0]);
            const month = parseInt(parts[1]) - 1;
            const day = parseInt(parts[2]);
            return new Date(year, month, day);
        }
        
        // YYYY-MM 格式
        if (parts.length === 2) {
            const year = parseInt(parts[0]);
            const month = parseInt(parts[1]) - 1;
            return new Date(year, month, 1);
        }
        
        // YYYY 格式
        if (parts.length === 1 && /^\d{4}$/.test(parts[0])) {
            const year = parseInt(parts[0]);
            return new Date(year, 0, 1);
        }
    }
    return new Date();
};

// 创建智能日期比例尺和刻度
var createXAxisScaleAndTicks = (data, xField, rangeStart = 0, rangeEnd = 100, padding = 0.05) => {
    // 解析所有日期
    const dates = data.map(d => parseDate(d[xField]));
    const xExtent = d3.extent(dates);
    const xRange = xExtent[1] - xExtent[0];
    const xPadding = xRange * padding;
    
    // 创建比例尺
    const xScale = d3.scaleTime()
        .domain([
            new Date(xExtent[0].getTime() - xPadding),
            new Date(xExtent[1].getTime() + xPadding)
        ])
        .range([rangeStart, rangeEnd]);
    
    // 计算日期跨度（毫秒）
    const timeSpan = xExtent[1] - xExtent[0];
    const daySpan = timeSpan / (1000 * 60 * 60 * 24);
    const monthSpan = daySpan / 30;
    const yearSpan = daySpan / 365;
    
    // 根据跨度选择合适的时间间隔
    let timeInterval;
    let formatFunction;
    
    if (yearSpan > 35) {
        // 超过35年，每10年一个刻度
        timeInterval = d3.timeYear.every(10);
        formatFunction = d => d3.timeFormat("%Y")(d);
    } else if (yearSpan > 15) {
        // 超过15年，每5年一个刻度
        timeInterval = d3.timeYear.every(5);
        formatFunction = d => d3.timeFormat("%Y")(d);
    } else if (yearSpan > 7) {
        // 超过7年，每2年一个刻度  
        timeInterval = d3.timeYear.every(2);
        formatFunction = d => d3.timeFormat("%Y")(d);
    } else if (yearSpan > 2) {
        // 2-7年，每年一个刻度
        timeInterval = d3.timeYear.every(1);
        formatFunction = d => d3.timeFormat("%Y")(d);
    } else if (yearSpan > 1) {
        // 1-2年，每季度一个刻度
        timeInterval = d3.timeMonth.every(3);
        formatFunction = d => {
            const month = d.getMonth();
            const quarter = Math.floor(month / 3) + 1;
            return `${d.getFullYear().toString().slice(-2)}Q${quarter}`;
        };
    } else if (monthSpan > 6) {
        // 6个月-1年，每月一个刻度
        timeInterval = d3.timeMonth.every(1);
        formatFunction = d => d3.timeFormat("%m %Y")(d);
    } else if (monthSpan > 2) {
        // 2-6个月，每周一个刻度
        timeInterval = d3.timeWeek.every(1);
        formatFunction = d => d3.timeFormat("%d %m")(d);
    } else {
        // 少于2个月，每天一个刻度或每几天一个刻度
        const dayInterval = Math.max(1, Math.ceil(daySpan / 10));
        timeInterval = d3.timeDay.every(dayInterval);
        formatFunction = d => d3.timeFormat("%d %m")(d);
    }
    
    // 生成刻度
    const xTicks = xScale.ticks(timeInterval);
    
    // 确保包含最后一个日期
    if (xTicks.length > 0 && xTicks[xTicks.length - 1] < xExtent[1]) {
        if (xTicks.length > 7) {
            xTicks.pop(); // 先移除当前最后一个刻度
        }
        xTicks.push(xExtent[1]); // 添加数据的最后一个日期作为刻度
    }
    
    return {
        xScale: xScale,
        xTicks: xTicks,
        xFormat: formatFunction,
        timeSpan: {
            days: daySpan,
            months: monthSpan,
            years: yearSpan
        }
    };
};


var createNumericalFormatter = (data, yField) => {
    const yExtent = d3.extent(data, d => d[yField]);
    const yRange = yExtent[1] - yExtent[0];
    const yPadding = yRange * 0.05;

    if (yRange > 1000000000) {
        return d => d3.format(".2f")(d / 1000000000) + "B";
    } else if (yRange > 1000000) {
        return d => d3.format(".2f")(d / 1000000) + "M";
    } else if (yRange > 1000) {
        return d => d3.format(".2f")(d / 1000) + "K";
    } else {
        return d => d3.format(".2f")(d);
    }
}



/**
 * 根据数据点数量计算需要显示标签的点的索引
 * @param {number} n - 数据点总数
 * @returns {number[]} - 需要显示标签的点的索引数组
 */
var sampleLabels = (n) => {
    // 少于10个点时显示所有标签
    if (n <= 10) {
        return Array.from({length: n}, (_, i) => i);
    }
    
    // 超过10个点时每隔 n/10 个点显示一个标签
    const step = Math.ceil(n / 10);
    const result = [];
    
    // 从0开始,每隔step个点取一个索引
    for (let i = 0; i < n; i += step) {
        result.push(i);
    }
    
    // 确保包含最后一个点
    if (result[result.length - 1] !== n - 1) {
        result.push(n - 1);
    }
    
    return result;
};


var temporalFilter = (data, field) => {
    // 把data中不是temporal的点删除
    return data.filter(d => {
        try {
            parseDate(d[field]);
            return true;
        } catch (e) {
            return false;
        }
    });
}


/**
 * 计算文本在指定字体大小下的实际渲染宽度
 * @param {string} text - 要测量的文本
 * @param {number} fontSize - 字体大小(px)
 * @returns {number} - 文本宽度(px)
 */
var getTextWidth = (text, fontSize) => {
    return chartUtils.text.measure(null, text, { fontSize }).width;
};

/**
 * 智能排版图例，将多个图例元素自动排布成多行
 * @param {Object} g - D3 选择的 SVG 组元素，用于放置图例
 * @param {Array} groups - 组名数组
 * @param {Object} colors - 颜色对象，包含 field 属性
 * @param {Object} options - 配置选项
 * @param {number} options.maxWidth - 每行最大宽度
 * @param {number} options.x - 图例起始 x 坐标
 * @param {number} options.y - 图例起始 y 坐标
 * @param {number} options.itemHeight - 每个图例项的高度
 * @param {number} options.itemSpacing - 图例项之间的水平间距
 * @param {number} options.rowSpacing - 行之间的垂直间距
 * @param {number} options.symbolSize - 图例符号大小
 * @param {string} options.textColor - 文本颜色
 * @param {number} options.fontSize - 字体大小
 * @param {string} options.fontWeight - 字体粗细
 * @param {string} options.align - 对齐方式：'left', 'center', 'right'
 * @param {string} options.shape - 图例形状：'circle', 'rect', 'line'
 * @returns {Object} 包含图例尺寸信息的对象 {width, height}
 */
var layoutLegend = (g, groups, colors, options = {}) => {
    const legendOptions = { ...options };
    if (options.symbolSize != null) legendOptions.markerSize = options.symbolSize;
    if (options.shape != null) legendOptions.markerShape = options.shape;
    if (options.itemSpacing != null) legendOptions.itemGap = options.itemSpacing;
    if (options.rowSpacing != null) legendOptions.rowGap = options.rowSpacing;
    return chartUtils.legend.draw(g, groups, colors, legendOptions);
};

var formatValue = (value) => {
    if (value >= 1000000000) {
        return d3.format("~g")(value / 1000000000) + "B";
    } else if (value >= 1000000) {
        return d3.format("~g")(value / 1000000) + "M";
    } else if (value >= 1000) {
        return d3.format("~g")(value / 1000) + "K";
    } else {
        console.log("formatValue", value, d3.format("~g")(value));
        return d3.format("~g")(value);
    }
}