modules/chart_engine/static/lib/utils.js

// Initializes the shared chartUtils namespace used by all D3 templates.
(function (root) {
    const chartUtils = root.chartUtils || {};
    chartUtils.schema = chartUtils.schema || {};
    chartUtils.format = chartUtils.format || {};
    chartUtils.color = chartUtils.color || {};
    chartUtils.text = chartUtils.text || {};
    chartUtils.legend = chartUtils.legend || {};
    chartUtils.random = chartUtils.random || {};
    root.chartUtils = chartUtils;
})(globalThis);

// Deterministic pseudo-random helpers for stable D3 renders.
(function (root) {
    const chartUtils = root.chartUtils;
    const random = chartUtils.random;

    random.hashString = value => {
        let hash = 2166136261;
        const text = String(value == null ? "" : value);
        for (let i = 0; i < text.length; i++) {
            hash ^= text.charCodeAt(i);
            hash = Math.imul(hash, 16777619);
        }
        return hash >>> 0;
    };

    random.seed = (jsonData, salt = "") => {
        const data = jsonData && jsonData.data ? jsonData.data : {};
        const columns = Array.isArray(data.columns) ? data.columns : [];
        const rows = Array.isArray(data.data) ? data.data : [];
        return random.hashString([
            salt,
            jsonData && jsonData.name,
            jsonData && jsonData.chart_name,
            rows.length,
            JSON.stringify(columns.map(column => [
                column && column.name,
                column && column.role,
                column && column.data_type,
            ])),
        ].join("|"));
    };

    random.generator = (jsonDataOrSeed, salt = "") => {
        let state = typeof jsonDataOrSeed === "number"
            ? jsonDataOrSeed >>> 0
            : random.seed(jsonDataOrSeed, salt);
        return () => {
            state = (state + 0x6D2B79F5) >>> 0;
            let t = state;
            t = Math.imul(t ^ (t >>> 15), t | 1);
            t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
        };
    };

    random.value = (jsonData, salt = "") => random.generator(jsonData, salt)();

    random.id = (jsonData, salt = "") => random.seed(jsonData, salt).toString(36);
})(globalThis);

// Data schema and channel helpers.
(function (root) {
    const chartUtils = root.chartUtils;
    const schema = chartUtils.schema;

    schema.normalizeUnit = unit => {
        if (unit == null) return "";
        const text = String(unit).trim();
        const lower = text.toLowerCase();
        return ["", "none", "null", "nan", "undefined", "n/a", "na"].includes(lower) ? "" : text;
    };

    schema.columns = jsonData => {
        const columns = jsonData && jsonData.data && jsonData.data.columns;
        return Array.isArray(columns) ? columns : [];
    };

    const buildChannel = (column, role, index, fallbackKey) => {
        const key = column && column.name != null ? column.name : fallbackKey;
        const rawLabel = column
            ? (column.label || column.display_name || column.name || fallbackKey || "")
            : (fallbackKey || "");
        const unit = schema.normalizeUnit(column && column.unit);
        const description = column && column.description ? column.description : rawLabel;
        const displayName = column && column.display_name ? column.display_name : rawLabel;
        return {
            role: column && column.role != null ? column.role : role,
            index: index == null ? -1 : index,
            key: key || "",
            type: column && column.data_type ? column.data_type : "",
            unit,
            rawLabel,
            description,
            displayName,
            label: unit ? `${rawLabel} (${unit})` : rawLabel,
            raw: column || null,
        };
    };

    schema.channel = (jsonData, role, options = {}) => {
        const columns = schema.columns(jsonData);
        let index = columns.findIndex(column => column.role === role);
        if (index < 0 && options.fallbackIndex != null) {
            index = options.fallbackIndex;
        }
        const column = index >= 0 ? columns[index] : null;
        const fallbackKey = Object.prototype.hasOwnProperty.call(options, "fallbackKey")
            ? options.fallbackKey
            : role;
        return buildChannel(column, role, index, fallbackKey);
    };

    schema.channelByKey = (jsonData, key, options = {}) => {
        const columns = schema.columns(jsonData);
        let index = columns.findIndex(column => column.name === key);
        if (index < 0 && options.fallbackIndex != null) {
            index = options.fallbackIndex;
        }
        const column = index >= 0 ? columns[index] : null;
        const fallbackKey = Object.prototype.hasOwnProperty.call(options, "fallbackKey")
            ? options.fallbackKey
            : key;
        return buildChannel(column, options.role || (column && column.role) || "", index, fallbackKey);
    };

    schema.column = (columns, index, options = {}) => {
        const list = Array.isArray(columns) ? columns : [];
        const column = index >= 0 ? list[index] : null;
        return buildChannel(column, options.role || (column && column.role) || "", index, options.fallbackKey);
    };

    schema.columnField = (columns, index, fallbackKey = "", options = {}) => (
        schema.column(columns, index, { ...options, fallbackKey }).key
    );

    schema.field = (jsonData, index, fallbackKey = "", options = {}) => (
        schema.columnField(schema.columns(jsonData), index, fallbackKey, options)
    );

    schema.channels = (jsonData, spec) => {
        const result = {};
        Object.keys(spec || {}).forEach(role => {
            result[role] = schema.channel(jsonData, role, spec[role]);
        });
        return result;
    };

})(globalThis);

// Number, unit, percent, and date formatting helpers.
(function (root) {
    const chartUtils = root.chartUtils;
    const schema = chartUtils.schema;
    const format = chartUtils.format;

    const formatted = ({ text, valueText, unitText = "", scaleText = "", rawValue }) => ({
        text,
        valueText,
        unitText,
        scaleText,
        displayUnit: `${scaleText}${unitText}`,
        rawValue,
    });

    format.appendUnit = (valueText, unit, options = {}) => {
        const unitText = schema.normalizeUnit(unit);
        if (!unitText) return String(valueText);
        return options.spaceBeforeUnit ? `${valueText} ${unitText}` : `${valueText}${unitText}`;
    };

    format.number = (value, options = {}) => {
        const numericValue = +value;
        const unitText = schema.normalizeUnit(options.unit);
        if (!Number.isFinite(numericValue)) {
            const valueText = value == null ? "" : String(value);
            return formatted({
                text: format.appendUnit(valueText, unitText, options),
                valueText,
                unitText,
                rawValue: value,
            });
        }
        const formatter = options.format ? d3.format(options.format) : d3.format("~g");
        const valueText = formatter(numericValue);
        return formatted({
            text: format.appendUnit(valueText, unitText, options),
            valueText,
            unitText,
            rawValue: value,
        });
    };

    format.compactNumber = (value, options = {}) => {
        const numericValue = +value;
        const unitText = schema.normalizeUnit(options.unit);
        if (!Number.isFinite(numericValue)) return format.number(value, options);
        const absValue = Math.abs(numericValue);
        let scale = 1;
        let scaleText = "";
        if (absValue >= 1000000000) {
            scale = 1000000000;
            scaleText = "B";
        } else if (absValue >= 1000000) {
            scale = 1000000;
            scaleText = "M";
        } else if (absValue >= 1000) {
            scale = 1000;
            scaleText = "K";
        }
        const formatter = options.format ? d3.format(options.format) : d3.format("~g");
        const valueText = formatter(numericValue / scale);
        return formatted({
            text: format.appendUnit(`${valueText}${scaleText}`, unitText, options),
            valueText,
            unitText,
            scaleText,
            rawValue: value,
        });
    };

    format.auto = (value, options = {}) => format.compactNumber(value, options);
    format.autoText = (value, options = {}) => format.auto(value, options).text;

    format.scaledNumber = (value, options = {}) => {
        const numericValue = +value;
        const unitText = schema.normalizeUnit(options.unit);
        if (!Number.isFinite(numericValue)) return format.number(value, options);
        const thresholds = options.thresholds || [
            { value: 1000000000, suffix: "B", format: options.format || "~g" },
            { value: 1000000, suffix: "M", format: options.format || "~g" },
            { value: 1000, suffix: "K", format: options.format || "~g" },
        ];
        const compareValue = options.absoluteThreshold ? Math.abs(numericValue) : numericValue;
        const threshold = thresholds.find(item => compareValue >= item.value);
        const prefix = options.prefix || "";
        const suffix = options.suffix || "";
        if (threshold) {
            const formatter = d3.format(threshold.format || options.format || "~g");
            const valueText = formatter(numericValue / threshold.value);
            const scaleText = threshold.suffix || "";
            return formatted({
                text: format.appendUnit(`${prefix}${valueText}${scaleText}${suffix}`, unitText, options),
                valueText,
                unitText,
                scaleText,
                rawValue: value,
            });
        }
        const valueText = options.baseFormat === null
            ? String(value)
            : d3.format(options.baseFormat || options.format || "~g")(numericValue);
        return formatted({
            text: format.appendUnit(`${prefix}${valueText}${suffix}`, unitText, options),
            valueText,
            unitText,
            rawValue: value,
        });
    };

    format.scaledText = (value, options = {}) => format.scaledNumber(value, options).text;
    format.compactFixedText = (value, options = {}) => format.scaledText(value, {
        thresholds: [
            { value: 1000000000, suffix: "B", format: options.largeFormat || ".1f" },
            { value: 1000000, suffix: "M", format: options.largeFormat || ".1f" },
            { value: 1000, suffix: "K", format: options.thousandFormat || ".0f" },
        ],
        baseFormat: options.baseFormat === undefined ? ".0f" : options.baseFormat,
        ...options,
    });

    format.adaptiveNumber = (value, options = {}) => {
        const numericValue = +value;
        const unitText = schema.normalizeUnit(options.unit);
        if (!Number.isFinite(numericValue)) return format.number(value, options);
        const ranges = options.ranges || [];
        const compareValue = options.absoluteThreshold ? Math.abs(numericValue) : numericValue;
        const selected = ranges.find(item => compareValue >= item.min);
        const resolveFormat = formatOption => {
            const resolved = typeof formatOption === "function" ? formatOption(numericValue) : formatOption;
            return resolved === undefined ? "~g" : resolved;
        };
        const prefix = options.prefix || "";
        const suffix = options.suffix || "";
        if (selected) {
            const formatOption = resolveFormat(selected.format || options.format);
            const scaledValue = selected.divisor ? numericValue / selected.divisor : numericValue;
            const valueText = formatOption === null ? String(scaledValue) : d3.format(formatOption)(scaledValue);
            const scaleText = selected.suffix || "";
            return formatted({
                text: format.appendUnit(`${prefix}${valueText}${scaleText}${suffix}`, unitText, options),
                valueText,
                unitText,
                scaleText,
                rawValue: value,
            });
        }
        const baseFormat = resolveFormat(options.baseFormat);
        const valueText = baseFormat === null ? String(value) : d3.format(baseFormat)(numericValue);
        return formatted({
            text: format.appendUnit(`${prefix}${valueText}${suffix}`, unitText, options),
            valueText,
            unitText,
            rawValue: value,
        });
    };

    format.adaptiveText = (value, options = {}) => format.adaptiveNumber(value, options).text;

    format.fixed = (value, digits = 1, options = {}) => {
        const numericValue = +value;
        const unitText = schema.normalizeUnit(options.unit);
        const valueText = Number.isFinite(numericValue) ? numericValue.toFixed(digits) : String(value);
        return formatted({
            text: format.appendUnit(valueText, unitText, options),
            valueText,
            unitText,
            rawValue: value,
        });
    };

    format.integer = (value, options = {}) => format.number(value, { ...options, format: ".0f" });
    format.comma = (value, options = {}) => format.number(value, { ...options, format: "," });

    format.withUnit = (value, channel, options = {}) => {
        const unit = options.unit != null ? options.unit : channel && channel.unit;
        const opts = { compact: true, ...options, unit };
        return opts.compact ? format.compactNumber(value, opts) : format.number(value, opts);
    };

    format.signed = (value, channel, options = {}) => {
        const result = format.withUnit(value, channel, options);
        if (+value > 0) {
            return { ...result, text: `+${result.text}`, valueText: `+${result.valueText}` };
        }
        return result;
    };

    format.percent = (value, options = {}) => {
        const digits = options.digits == null ? 1 : options.digits;
        const numericValue = +value;
        const valueText = Number.isFinite(numericValue) ? numericValue.toFixed(digits) : String(value);
        return formatted({
            text: `${valueText}%`,
            valueText,
            unitText: "%",
            rawValue: value,
        });
    };

    format.percentage = (part, total, options = {}) => {
        const value = total ? (+part / +total) * 100 : 0;
        return format.percent(value, options);
    };

    format.parseDate = value => {
        if (value instanceof Date) return value;
        if (typeof value === "number") return new Date(value, 0, 1);
        if (typeof value === "string") {
            const parts = value.split("-");
            if (parts.length === 3) return new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]));
            if (parts.length === 2) return new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, 1);
            if (parts.length === 1 && /^\d{4}$/.test(parts[0])) return new Date(parseInt(parts[0]), 0, 1);
        }
        return new Date(value);
    };

    format.date = (value, options = {}) => {
        const date = format.parseDate(value);
        const output = options.output || "%Y";
        const valueText = d3.timeFormat(output)(date);
        return formatted({ text: valueText, valueText, rawValue: value });
    };

    format.timeTickFormat = (dates, options = {}) => {
        const parsedDates = dates.map(format.parseDate);
        const extent = d3.extent(parsedDates);
        const daySpan = (extent[1] - extent[0]) / (1000 * 60 * 60 * 24);
        const yearSpan = daySpan / 365;
        const monthSpan = daySpan / 30;
        if (yearSpan > 2) return d => d3.timeFormat("%Y")(d);
        if (yearSpan > 1) {
            return d => `${d.getFullYear().toString().slice(-2)}Q${Math.floor(d.getMonth() / 3) + 1}`;
        }
        if (monthSpan > 6) return d => d3.timeFormat("%m %Y")(d);
        return d => d3.timeFormat("%d %m")(d);
    };

    format.category = value => {
        const valueText = value == null ? "" : String(value);
        return formatted({ text: valueText, valueText, rawValue: value });
    };

    format.value = (value, channel, options = {}) => {
        if (channel && channel.type === "temporal") return format.date(value, options);
        if (channel && channel.type === "numerical") return format.withUnit(value, channel, options);
        return format.category(value, options);
    };

})(globalThis);

// Color normalization, palette, contrast, gradient, and resolver helpers.
(function (root) {
    const chartUtils = root.chartUtils;
    const color = chartUtils.color;

    const colorResult = ({ value, source, key = "", fallbackUsed = false }) => ({
        value,
        source,
        key,
        fallbackUsed,
    });

    const semanticColorDefaults = {
        primary: "#4682B4",
        secondary: "#5F9EA0",
        positive: "#2E7D32",
        negative: "#C62828",
        neutral: "#9CA3AF",
        text: "#333333",
        background: "#FFFFFF",
    };

    const colorPalettes = {
        category10: () => d3.schemeCategory10,
        tableau10: () => d3.schemeTableau10 || d3.schemeCategory10,
        accent: () => d3.schemeAccent,
        dark2: () => d3.schemeDark2,
        paired: () => d3.schemePaired,
        set2: () => d3.schemeSet2,
        set3: () => d3.schemeSet3,
    };

    color.normalize = (value, fallback = "") => {
        if (value == null) return fallback;
        const text = String(value).trim();
        const lower = text.toLowerCase();
        if (["", "none", "null", "nan", "undefined", "n/a", "na"].includes(lower)) return fallback;
        return text;
    };

    color.isValid = value => {
        const normalized = color.normalize(value);
        return !!normalized && !!d3.color(normalized);
    };

    color.palette = (index, options = {}) => {
        const customPalette = options.colors || options.paletteColors;
        const palette = Array.isArray(customPalette)
            ? customPalette
            : (colorPalettes[options.palette || "tableau10"] || colorPalettes.tableau10)();
        const fallback = options.fallback || semanticColorDefaults.primary;
        if (!palette || palette.length === 0) return fallback;
        return color.normalize(palette[Math.abs(index || 0) % palette.length], fallback);
    };

    color.paletteFor = (domain, options = {}) => {
        const values = Array.from(domain || []);
        return d3.scaleOrdinal()
            .domain(values)
            .range(values.map((_, index) => color.palette(index, options)));
    };

    color.luminance = value => {
        const parsed = d3.rgb(color.normalize(value, "#000000"));
        const channel = v => {
            const c = v / 255;
            return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
        };
        return 0.2126 * channel(parsed.r) + 0.7152 * channel(parsed.g) + 0.0722 * channel(parsed.b);
    };

    color.brightness = (value, options = {}) => {
        const parsed = d3.rgb(color.normalize(value, options.fallback || "#808080"));
        return (parsed.r * 0.299 + parsed.g * 0.587 + parsed.b * 0.114) / 255;
    };

    color.scaleRgb = (value, factor = 1, options = {}) => {
        const parsed = d3.rgb(color.normalize(value, options.fallback || "#000000"));
        const scaled = d3.rgb(parsed.r * factor, parsed.g * factor, parsed.b * factor);
        scaled.opacity = parsed.opacity;
        return scaled.toString();
    };

    color.thresholdText = (background, options = {}) => {
        const threshold = options.threshold == null ? 0.6 : options.threshold;
        const dark = options.dark || "#000000";
        const light = options.light || "#ffffff";
        return color.brightness(background, options) > threshold ? dark : light;
    };

    color.contrastRatio = (a, b) => {
        const l1 = color.luminance(a);
        const l2 = color.luminance(b);
        return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
    };

    color.textOn = (background, options = {}) => {
        const light = options.light || "#FFFFFF";
        const dark = options.dark || "#111827";
        return color.contrastRatio(dark, background) >= color.contrastRatio(light, background) ? dark : light;
    };

    color.ensureContrast = (foreground, background, options = {}) => {
        const minRatio = options.minRatio || 4.5;
        const normalized = color.normalize(foreground, options.fallback || semanticColorDefaults.text);
        if (color.contrastRatio(normalized, background) >= minRatio) return normalized;
        return color.textOn(background, options);
    };

    color.variant = (baseColor, options = {}) => {
        const base = d3.rgb(color.normalize(baseColor, options.fallback || semanticColorDefaults.primary));
        const mode = options.mode || "none";
        const amount = options.amount == null ? 0.5 : options.amount;
        let result = base;
        if (mode === "brighter") result = base.brighter(amount);
        if (mode === "darker") result = base.darker(amount);
        if (options.opacity != null) result.opacity = options.opacity;
        return result.toString();
    };

    color.stroke = (baseColor, options = {}) => color.variant(baseColor, {
        mode: options.mode || "darker",
        amount: options.amount == null ? 0.8 : options.amount,
        opacity: options.opacity,
        fallback: options.fallback,
    });

    color.gradient = (defs, id, baseColor, options = {}) => {
        const start = options.start || color.variant(baseColor, { mode: "brighter", amount: options.brighter == null ? 0.8 : options.brighter });
        const end = options.end || color.variant(baseColor, { mode: "darker", amount: options.darker == null ? 0.5 : options.darker });
        const gradient = defs.append("linearGradient")
            .attr("id", id)
            .attr("x1", options.x1 || "0%")
            .attr("y1", options.y1 || "0%")
            .attr("x2", options.x2 || "100%")
            .attr("y2", options.y2 || "0%");
        gradient.append("stop").attr("offset", options.startOffset || "0%").attr("stop-color", start);
        gradient.append("stop").attr("offset", options.endOffset || "100%").attr("stop-color", end);
        return colorResult({ value: `url(#${id})`, source: "gradient", key: id });
    };

    color.resolver = (jsonData, options = {}) => {
        const sourceColors = options.colors || (options.mode === "dark" && jsonData && jsonData.colors_dark ? jsonData.colors_dark : jsonData && jsonData.colors) || {};
        const otherColors = sourceColors.other || {};
        const fieldColors = sourceColors.field || {};
        const availableColors = Array.isArray(sourceColors.available_colors) ? sourceColors.available_colors : [];

        const resolver = {};

        resolver.other = (key, opts = {}) => {
            const value = color.normalize(otherColors[key]);
            if (value) return colorResult({ value, source: "other", key });
            const direct = color.normalize(sourceColors[key]);
            if (direct) return colorResult({ value: direct, source: "color", key });
            const availableIndex = opts.availableIndex == null ? opts.index : opts.availableIndex;
            const resolvedAvailableIndex = opts.cycle && availableColors.length > 0
                ? Math.abs(availableIndex || 0) % availableColors.length
                : availableIndex;
            const availableValue = opts.useAvailable === false || resolvedAvailableIndex == null
                ? ""
                : color.normalize(availableColors[resolvedAvailableIndex]);
            if (availableValue) {
                return colorResult({ value: availableValue, source: "available_colors", key, fallbackUsed: true });
            }
            const fallback = color.normalize(opts.fallback);
            if (fallback) return colorResult({ value: fallback, source: "fallback", key, fallbackUsed: true });
            if (semanticColorDefaults[key]) return colorResult({ value: semanticColorDefaults[key], source: "semantic_default", key, fallbackUsed: true });
            return colorResult({ value: color.palette(opts.index || 0, { ...options, ...opts }), source: "palette", key, fallbackUsed: true });
        };

        resolver.field = (value, index = 0, opts = {}) => {
            const direct = color.normalize(fieldColors[value]);
            if (direct) return colorResult({ value: direct, source: "field", key: value });
            const stringKey = value == null ? "" : String(value);
            const stringValue = color.normalize(fieldColors[stringKey]);
            if (stringValue) return colorResult({ value: stringValue, source: "field", key: stringKey });
            const fieldName = opts.fieldName || opts.fieldKey;
            const fieldMap = fieldName && sourceColors[fieldName] && typeof sourceColors[fieldName] === "object"
                ? sourceColors[fieldName]
                : null;
            if (fieldMap) {
                const fieldMapValue = color.normalize(fieldMap[value]) || color.normalize(fieldMap[stringKey]);
                if (fieldMapValue) return colorResult({ value: fieldMapValue, source: "field_map", key: stringKey });
            }
            if (opts.fallbackKey) {
                const semantic = resolver.other(opts.fallbackKey, { ...opts, index });
                if (semantic.value) return { ...semantic, key: value, fallbackUsed: true };
            }
            const fallback = color.normalize(opts.fallback);
            if (fallback) return colorResult({ value: fallback, source: "fallback", key: value, fallbackUsed: true });
            const availableIndex = opts.availableIndex == null ? index : opts.availableIndex;
            const resolvedAvailableIndex = opts.cycle && availableColors.length > 0
                ? Math.abs(availableIndex || 0) % availableColors.length
                : availableIndex;
            const availableValue = opts.useAvailable === false || resolvedAvailableIndex == null
                ? ""
                : color.normalize(availableColors[resolvedAvailableIndex]);
            if (availableValue) {
                return colorResult({ value: availableValue, source: "available_colors", key: value, fallbackUsed: true });
            }
            return colorResult({ value: color.palette(index, { ...options, ...opts }), source: "palette", key: value, fallbackUsed: true });
        };

        resolver.available = (index = 0, opts = {}) => {
            const resolvedIndex = opts.cycle && availableColors.length > 0
                ? Math.abs(index || 0) % availableColors.length
                : index;
            const key = String(index == null ? 0 : index);
            const availableValue = resolvedIndex == null ? "" : color.normalize(availableColors[resolvedIndex]);
            if (availableValue) return colorResult({ value: availableValue, source: "available_colors", key });
            const fallbackColors = Array.isArray(opts.fallbackColors) ? opts.fallbackColors : [];
            const fallbackIndex = opts.cycle && fallbackColors.length > 0
                ? Math.abs(index || 0) % fallbackColors.length
                : index;
            const fallbackColor = fallbackIndex == null ? "" : color.normalize(fallbackColors[fallbackIndex]);
            if (fallbackColor) return colorResult({ value: fallbackColor, source: "fallback_colors", key, fallbackUsed: true });
            const fallback = color.normalize(opts.fallback);
            if (fallback) return colorResult({ value: fallback, source: "fallback", key, fallbackUsed: true });
            if (opts.usePalette === false) {
                return colorResult({ value: "", source: "missing", key, fallbackUsed: true });
            }
            const paletteIndex = opts.index == null ? index : opts.index;
            return colorResult({
                value: color.palette(paletteIndex || 0, { ...options, ...opts }),
                source: "palette",
                key,
                fallbackUsed: true,
            });
        };

        resolver.availablePalette = (count, opts = {}) => {
            const explicitCount = Number.isFinite(Number(count)) ? Math.max(0, Math.floor(Number(count))) : null;
            const size = explicitCount == null ? availableColors.length : explicitCount;
            return d3.range(size).map(index => resolver.available(index, { ...opts, index }).value);
        };

        resolver.scale = (domain, opts = {}) => {
            const values = Array.from(domain || []);
            return d3.scaleOrdinal()
                .domain(values)
                .range(values.map((value, index) => resolver.field(value, index, opts).value));
        };

        resolver.text = (opts = {}) => {
            const explicit = color.normalize(sourceColors.text_color);
            if (explicit) return colorResult({ value: explicit, source: "text_color", key: "text" });
            const fallback = color.normalize(opts.fallback);
            if (fallback) return colorResult({ value: fallback, source: "fallback", key: "text", fallbackUsed: true });
            const bg = opts.background || resolver.background(opts).value;
            return colorResult({ value: color.textOn(bg, opts), source: "contrast", key: "text", fallbackUsed: true });
        };

        resolver.background = (opts = {}) => {
            const explicit = color.normalize(sourceColors.background_color);
            if (explicit) return colorResult({ value: explicit, source: "background_color", key: "background" });
            const direct = color.normalize(sourceColors.background);
            if (direct) return colorResult({ value: direct, source: "color", key: "background" });
            return colorResult({ value: opts.fallback || semanticColorDefaults.background, source: "semantic_default", key: "background", fallbackUsed: true });
        };

        resolver.variant = (baseColor, opts = {}) => color.variant(baseColor && baseColor.value ? baseColor.value : baseColor, opts);
        resolver.stroke = (baseColor, opts = {}) => color.stroke(baseColor && baseColor.value ? baseColor.value : baseColor, opts);
        resolver.textOn = (baseColor, opts = {}) => color.textOn(baseColor && baseColor.value ? baseColor.value : baseColor, opts);
        resolver.gradient = (defs, id, baseColor, opts = {}) => color.gradient(defs, id, baseColor && baseColor.value ? baseColor.value : baseColor, opts);

        return resolver;
    };

})(globalThis);

// Text sizing, measuring, and truncation helpers.
(function (root) {
    const chartUtils = root.chartUtils;
    const text = chartUtils.text;

    text.font = (options = {}) => {
        const fontWeight = options.fontWeight || options.weight || "normal";
        const fontSize = text.fontSize(options.fontSize || options.size || 12);
        const fontFamily = options.fontFamily || options.family || "Arial";
        return `${fontWeight} ${fontSize}px ${fontFamily}`;
    };

    text.fontSize = value => {
        if (typeof value === "number") return value;
        const parsed = parseFloat(value);
        return Number.isFinite(parsed) ? parsed : 12;
    };

    text.estimate = (value, options = {}) => {
        const valueText = value == null ? "" : String(value);
        const fontSize = text.fontSize(options.fontSize || options.size || 12);
        const factor = options.factor == null ? 0.6 : options.factor;
        return {
            width: valueText.length * fontSize * factor,
            height: fontSize * 1.2,
        };
    };

    text.measure = (context, value, options = {}) => {
        const valueText = value == null ? "" : String(value);
        const fontSize = text.fontSize(options.fontSize || options.size || 12);
        const fontFamily = options.fontFamily || options.family || null;
        const fontWeight = options.fontWeight || options.weight || "normal";
        if (context && typeof context.append === "function") {
            const node = context.append("text")
                .attr("visibility", "hidden")
                .attr("x", -9999)
                .attr("y", -9999)
                .style("font-size", `${fontSize}px`)
                .style("font-weight", fontWeight)
                .text(valueText);
            if (fontFamily) node.style("font-family", fontFamily);
            const element = node.node();
            const width = element.getComputedTextLength ? element.getComputedTextLength() : element.getBBox().width;
            const height = element.getBBox().height || fontSize * 1.2;
            node.remove();
            return { width, height };
        }
        if (typeof document !== "undefined") {
            const canvas = document.createElement("canvas");
            const ctx = canvas.getContext("2d");
            ctx.font = text.font({ fontSize, fontFamily, fontWeight });
            return {
                width: ctx.measureText(valueText).width,
                height: fontSize * 1.2,
            };
        }
        return text.estimate(valueText, options);
    };

    text.contextSize = (context, value, options = {}) => {
        const valueText = value == null ? "" : String(value);
        const fontSize = text.fontSize(options.fontSize || options.size || 12);
        if (context && typeof context.measureText === "function") {
            return {
                width: context.measureText(valueText).width,
                height: fontSize * 1.2,
            };
        }
        return text.measure(null, valueText, options);
    };

    text.contextWidth = (context, value, options = {}) => text.contextSize(context, value, options).width;

    text.nodeSize = (node, options = {}) => {
        if (!node) return { width: 0, height: 0 };
        const method = options.method || "auto";
        const canUseComputed = typeof node.getComputedTextLength === "function";
        const canUseBBox = typeof node.getBBox === "function";
        let bbox = null;
        let width = null;

        const readBBox = () => {
            if (!canUseBBox) return null;
            try {
                return node.getBBox();
            } catch (error) {
                return null;
            }
        };

        if ((method === "computed" || method === "auto") && canUseComputed) {
            try {
                width = node.getComputedTextLength();
            } catch (error) {
                width = null;
            }
        }

        if ((method === "bbox" || !Number.isFinite(width)) && canUseBBox) {
            bbox = readBBox();
            if (bbox && Number.isFinite(bbox.width)) {
                width = bbox.width;
            }
        }

        if (!Number.isFinite(width)) {
            width = text.estimate(node.textContent || "", options).width;
        }

        if (!bbox && canUseBBox) {
            bbox = readBBox();
        }

        const fallbackHeight = text.fontSize(options.fontSize || options.size || 12) * 1.2;
        const height = bbox && Number.isFinite(bbox.height) ? bbox.height : fallbackHeight;
        const x = bbox && Number.isFinite(bbox.x) ? bbox.x : 0;
        const y = bbox && Number.isFinite(bbox.y) ? bbox.y : 0;
        return { width, height, x, y };
    };

    text.nodeWidth = (node, options = {}) => text.nodeSize(node, options).width;

    text.truncate = (value, maxWidth, options = {}) => {
        const valueText = value == null ? "" : String(value);
        const ellipsis = options.ellipsis == null ? "..." : options.ellipsis;
        const measure = candidate => text.measure(options.context, candidate, options).width;
        if (measure(valueText) <= maxWidth) return valueText;
        if (maxWidth <= 0 || measure(ellipsis) > maxWidth) return "";
        let low = 0;
        let high = valueText.length;
        while (low < high) {
            const mid = Math.ceil((low + high) / 2);
            if (measure(valueText.slice(0, mid) + ellipsis) <= maxWidth) {
                low = mid;
            } else {
                high = mid - 1;
            }
        }
        return valueText.slice(0, low) + ellipsis;
    };

})(globalThis);

// Reusable legend layout and drawing helpers.
(function (root) {
    const chartUtils = root.chartUtils;
    const color = chartUtils.color;
    const text = chartUtils.text;
    const legend = chartUtils.legend;

    const normalizeLegendItems = (items, options = {}) => Array.from(items || []).map((item, index) => {
        const value = item && typeof item === "object" ? (item.value == null ? item.label : item.value) : item;
        const label = item && typeof item === "object" ? (item.label == null ? value : item.label) : item;
        let itemColor = item && typeof item === "object" ? item.color : null;
        if (!itemColor && typeof options.color === "function") itemColor = options.color(value, index);
        if (!itemColor && typeof options.colorScale === "function") itemColor = options.colorScale(value);
        if (!itemColor && options.colorResolver) itemColor = options.colorResolver.field(value, index, options).value;
        if (!itemColor && options.colors && options.colors.field && options.colors.field[value]) itemColor = options.colors.field[value];
        if (!itemColor) itemColor = color.palette(index, options);
        return {
            value,
            label: label == null ? "" : String(label),
            color: itemColor,
            index,
            raw: item,
        };
    });

    legend.resolveOptions = (colorsOrOptions = {}, maybeOptions) => (
        maybeOptions == null ? colorsOrOptions : { ...maybeOptions, colors: colorsOrOptions }
    );

    legend.layout = (items, colorsOrOptions = {}, maybeOptions) => {
        const options = legend.resolveOptions(colorsOrOptions, maybeOptions);
        const opts = {
            direction: "horizontal",
            maxWidth: Infinity,
            markerSize: 10,
            labelGap: 5,
            itemGap: 20,
            rowGap: 10,
            itemHeight: 20,
            itemPaddingEnd: 10,
            ...options,
        };
        if (opts.shape && !opts.markerShape) opts.markerShape = opts.shape;
        if (opts.symbolSize != null) opts.markerSize = opts.symbolSize;
        if (opts.itemSpacing != null) opts.itemGap = opts.itemSpacing;
        if (opts.rowSpacing != null) opts.rowGap = opts.rowSpacing;
        const normalized = normalizeLegendItems(items, opts);
        const buildLayout = fontSizeValue => {
            const measureOpts = { ...opts, fontSize: fontSizeValue };
            const rowItemHeight = opts.itemHeight || Math.max(opts.markerSize, text.fontSize(fontSizeValue) * 1.2);
            const placedItems = [];
            let cursorX = 0;
            let cursorY = 0;
            let currentRowHeight = rowItemHeight;
            let layoutWidth = 0;
            const markerWidth = opts.markerWidth || opts.markerSize;
            normalized.forEach(item => {
                const labelSize = text.measure(opts.context, item.label, measureOpts);
                const itemWidth = markerWidth + opts.labelGap + labelSize.width + opts.itemPaddingEnd;
                if (
                    opts.direction === "horizontal" &&
                    cursorX > 0 &&
                    cursorX + itemWidth > opts.maxWidth
                ) {
                    cursorX = 0;
                    cursorY += currentRowHeight + opts.rowGap;
                    currentRowHeight = rowItemHeight;
                }
                placedItems.push({ ...item, x: cursorX, y: cursorY, width: itemWidth, height: rowItemHeight });
                layoutWidth = Math.max(layoutWidth, cursorX + itemWidth);
                if (opts.direction === "vertical") {
                    cursorY += rowItemHeight + opts.rowGap;
                } else {
                    cursorX += itemWidth + opts.itemGap;
                }
            });
            const rowGroups = d3.group(placedItems, item => item.y);
            rowGroups.forEach(rowItems => {
                const rowWidth = Math.max(...rowItems.map(item => item.x + item.width));
                let offset = 0;
                if (Number.isFinite(opts.maxWidth) && opts.align === "center") offset = Math.max(0, (opts.maxWidth - rowWidth) / 2);
                if (Number.isFinite(opts.maxWidth) && opts.align === "right") offset = Math.max(0, opts.maxWidth - rowWidth);
                rowItems.forEach(item => {
                    item.x += offset;
                });
            });
            const layoutHeight = placedItems.length ? Math.max(...placedItems.map(item => item.y + item.height)) : 0;
            return { items: placedItems, width: layoutWidth, height: layoutHeight };
        };
        let fontSizeValue = text.fontSize(opts.fontSize || 12);
        let layout = buildLayout(fontSizeValue);
        if (opts.fitToWidth && Number.isFinite(opts.maxWidth)) {
            const minFontSize = opts.minFontSize || 8;
            const fontStep = opts.fontStep || 0.5;
            while (layout.width > opts.maxWidth && fontSizeValue > minFontSize) {
                fontSizeValue -= fontStep;
                layout = buildLayout(fontSizeValue);
            }
        }
        return { ...layout, fontSize: fontSizeValue };
    };

    legend.wrapItems = (items, options = {}) => {
        const opts = {
            direction: "horizontal",
            maxWidth: Infinity,
            itemGap: 20,
            rowGap: 10,
            itemHeight: 20,
            align: "left",
            ...options,
        };
        const source = Array.from(items || []);
        const placedItems = [];
        let cursorX = 0;
        let cursorY = 0;
        let currentRowHeight = opts.itemHeight;
        let layoutWidth = 0;
        source.forEach((item, index) => {
            const width = Number.isFinite(item.width) ? item.width : item.visualWidth || 0;
            const height = Number.isFinite(item.height) ? item.height : item.visualHeight || opts.itemHeight;
            if (
                opts.direction === "horizontal" &&
                cursorX > 0 &&
                Number.isFinite(opts.maxWidth) &&
                cursorX + width > opts.maxWidth
            ) {
                cursorX = 0;
                cursorY += currentRowHeight + opts.rowGap;
                currentRowHeight = opts.itemHeight;
            }
            placedItems.push({ ...item, index, x: cursorX, y: cursorY, width, height });
            layoutWidth = Math.max(layoutWidth, cursorX + width);
            currentRowHeight = Math.max(currentRowHeight, height);
            if (opts.direction === "vertical") {
                cursorY += height + opts.rowGap;
            } else {
                cursorX += width + opts.itemGap;
            }
        });
        const rows = Array.from(d3.group(placedItems, item => item.y).values()).map(rowItems => {
            const rowWidth = rowItems.length
                ? Math.max(...rowItems.map(item => item.x + item.width))
                : 0;
            let offset = 0;
            if (Number.isFinite(opts.maxWidth) && opts.align === "center") offset = Math.max(0, (opts.maxWidth - rowWidth) / 2);
            if (Number.isFinite(opts.maxWidth) && opts.align === "right") offset = Math.max(0, opts.maxWidth - rowWidth);
            rowItems.forEach(item => {
                item.x += offset;
            });
            return {
                items: rowItems,
                y: rowItems[0] ? rowItems[0].y : 0,
                width: rowWidth,
                height: rowItems.length ? Math.max(...rowItems.map(item => item.height)) : 0,
            };
        });
        const layoutHeight = placedItems.length
            ? Math.max(...placedItems.map(item => item.y + item.height))
            : 0;
        return { items: placedItems, rows, width: layoutWidth, height: layoutHeight };
    };

    legend.draw = (group, items, colorsOrOptions = {}, maybeOptions) => {
        const options = legend.resolveOptions(colorsOrOptions, maybeOptions);
        const opts = {
            x: 0,
            y: 0,
            markerShape: "circle",
            markerSize: 10,
            labelGap: 5,
            itemGap: 20,
            rowGap: 10,
            itemHeight: 20,
            itemPaddingEnd: 10,
            fontSize: 12,
            fontFamily: null,
            fontWeight: "normal",
            textColor: "#333333",
            markerClass: null,
            markerOpacity: null,
            textClass: null,
            className: "legend",
            ...options,
        };
        if (opts.shape && !opts.markerShape) opts.markerShape = opts.shape;
        if (opts.symbolSize != null) opts.markerSize = opts.symbolSize;
        if (opts.itemSpacing != null) opts.itemGap = opts.itemSpacing;
        if (opts.rowSpacing != null) opts.rowGap = opts.rowSpacing;
        const layout = legend.layout(items, { ...opts, context: group });
        const legendFontSize = text.fontSize(layout.fontSize != null ? layout.fontSize : opts.fontSize);
        const markerWidth = opts.markerWidth || opts.markerSize;
        const markerHeight = opts.markerHeight || opts.markerSize;
        const legendGroup = group.append("g")
            .attr("class", opts.className)
            .attr("transform", `translate(${opts.x}, ${opts.y})`);
        const itemGroups = legendGroup.selectAll("g.legend-item")
            .data(layout.items)
            .enter()
            .append("g")
            .attr("class", "legend-item")
            .attr("transform", d => `translate(${d.x}, ${d.y})`);
        if (opts.markerShape === "capsule") {
            itemGroups.append("rect")
                .attr("class", opts.markerClass)
                .attr("x", 0)
                .attr("y", d => (d.height - markerHeight) / 2)
                .attr("width", markerWidth)
                .attr("height", markerHeight)
                .attr("rx", markerHeight / 2)
                .attr("ry", markerHeight / 2)
                .attr("fill", d => d.color)
                .attr("fill-opacity", opts.markerOpacity == null ? null : opts.markerOpacity);
        } else if (opts.markerShape === "rect") {
            const rects = itemGroups.append("rect")
                .attr("class", opts.markerClass)
                .attr("x", 0)
                .attr("y", d => (d.height - markerHeight) / 2)
                .attr("width", markerWidth)
                .attr("height", markerHeight)
                .attr("fill", d => d.color)
                .attr("fill-opacity", opts.markerOpacity == null ? null : opts.markerOpacity);
            if (opts.markerRadius) {
                rects.attr("rx", opts.markerRadius).attr("ry", opts.markerRadius);
            }
        } else if (opts.markerShape === "line") {
            itemGroups.append("line")
                .attr("class", opts.markerClass)
                .attr("x1", 0)
                .attr("x2", opts.markerSize)
                .attr("y1", d => d.height / 2)
                .attr("y2", d => d.height / 2)
                .attr("stroke", d => d.color)
                .attr("stroke-width", opts.strokeWidth || 3)
                .attr("stroke-opacity", opts.markerOpacity == null ? null : opts.markerOpacity);
        } else if (opts.markerShape === "triangle") {
            const size = Math.min(markerWidth, markerHeight);
            itemGroups.append("path")
                .attr("class", opts.markerClass)
                .attr("d", `M 0 ${-size / 2} L ${size / 2} ${size / 2} L ${-size / 2} ${size / 2} Z`)
                .attr("transform", d => `translate(${markerWidth / 2}, ${d.height / 2})`)
                .attr("fill", d => d.color)
                .attr("fill-opacity", opts.markerOpacity == null ? null : opts.markerOpacity);
        } else {
            itemGroups.append("circle")
                .attr("class", opts.markerClass)
                .attr("cx", markerWidth / 2)
                .attr("cy", d => d.height / 2)
                .attr("r", markerWidth / 2)
                .attr("fill", d => d.color)
                .attr("fill-opacity", opts.markerOpacity == null ? null : opts.markerOpacity);
        }
        itemGroups.append("text")
            .attr("class", opts.textClass)
            .attr("x", markerWidth + opts.labelGap)
            .attr("y", d => d.height / 2)
            .attr("dominant-baseline", "middle")
            .attr("fill", opts.textColor)
            .style("font-size", `${legendFontSize}px`)
            .style("font-weight", opts.fontWeight)
            .text(d => d.label);
        if (opts.fontFamily) {
            itemGroups.selectAll("text").style("font-family", opts.fontFamily);
        }
        return { ...layout, group: legendGroup };
    };

    legend.centered = (parent, items, colorsOrOptions, centerX, y, maybeOptions) => {
        const options = legend.resolveOptions(colorsOrOptions, maybeOptions);
        const layout = legend.layout(items, { ...options, context: parent });
        return legend.draw(parent, items, options, { ...options, x: centerX - layout.width / 2, y });
    };

    legend.pair = (parent, entries, options = {}) => {
        const opts = {
            markerSize: 12,
            labelGap: 5,
            fontSize: 14,
            fontFamily: null,
            fontWeight: "bold",
            textColor: "#333333",
            className: "legend-pair",
            ...options,
        };
        const fontSize = text.fontSize(opts.fontSize);
        const group = parent.append("g").attr("class", opts.className);
        entries.forEach(entry => {
            const itemG = group.append("g");
            itemG.append("rect")
                .attr("x", entry.x)
                .attr("y", entry.y)
                .attr("width", opts.markerSize)
                .attr("height", opts.markerSize)
                .attr("fill", entry.color);
            const labelNode = itemG.append("text")
                .attr("x", entry.x + opts.markerSize + opts.labelGap)
                .attr("y", entry.y + opts.markerSize / 2)
                .attr("dy", "0.35em")
                .style("font-size", `${fontSize}px`)
                .style("font-weight", opts.fontWeight)
                .style("fill", opts.textColor)
                .text(entry.label);
            if (opts.fontFamily) labelNode.style("font-family", opts.fontFamily);
        });
        return { group };
    };

    legend.row = (parent, items, colorsOrOptions = {}, maybeOptions) => {
        const options = legend.resolveOptions(colorsOrOptions, maybeOptions);
        const opts = {
            x: 0,
            y: 0,
            markerShape: "rect",
            markerSize: 12,
            labelGap: 5,
            itemGap: 10,
            fontSize: 12,
            fontFamily: null,
            fontWeight: "normal",
            textColor: "#333333",
            maxWidth: Infinity,
            minFontSize: 8,
            fontStep: 0.5,
            className: "legend-row",
            ...options,
        };
        const normalized = normalizeLegendItems(items, opts);
        const rowGroup = parent.append("g")
            .attr("class", opts.className)
            .attr("transform", `translate(${opts.x}, ${opts.y})`);
        let fontSize = text.fontSize(opts.fontSize);
        const measureRow = size => {
            let x = 0;
            const widths = normalized.map(item => {
                const labelWidth = text.measure(rowGroup, item.label, { ...opts, fontSize: size }).width;
                const w = opts.markerSize + opts.labelGap + labelWidth;
                const startX = x;
                x += w + opts.itemGap;
                return { item, startX, width: w };
            });
            return { placements: widths, totalWidth: x > 0 ? x - opts.itemGap : 0 };
        };
        let row = measureRow(fontSize);
        while (row.totalWidth > opts.maxWidth && fontSize > opts.minFontSize) {
            fontSize -= opts.fontStep;
            row = measureRow(fontSize);
        }
        row.placements.forEach(({ item, startX }) => {
            const itemG = rowGroup.append("g").attr("transform", `translate(${startX}, 0)`);
            itemG.append("rect")
                .attr("width", opts.markerSize)
                .attr("height", opts.markerSize)
                .attr("fill", item.color);
            const labelNode = itemG.append("text")
                .attr("x", opts.markerSize + opts.labelGap)
                .attr("y", opts.markerSize / 2)
                .attr("dy", "0.35em")
                .style("font-size", `${fontSize}px`)
                .style("font-weight", opts.fontWeight)
                .style("fill", opts.textColor)
                .text(item.label);
            if (opts.fontFamily) labelNode.style("font-family", opts.fontFamily);
        });
        return { group: rowGroup, width: row.totalWidth, height: opts.markerSize, fontSize };
    };

    legend.layoutWithIcons = (items, colorsOrOptions = {}, maybeOptions) => {
        const options = legend.resolveOptions(colorsOrOptions, maybeOptions);
        const opts = {
            markerSize: 12,
            labelGap: 6,
            itemGap: 12,
            rowGap: 6,
            maxWidth: Infinity,
            align: "center",
            ...options,
        };
        const normalized = normalizeLegendItems(items, opts).map(item => {
            const raw = item.raw && typeof item.raw === "object" ? item.raw : {};
            const imageHref = raw.imageHref == null ? raw.image : raw.imageHref;
            const labelWidth = text.measure(opts.context, item.label, opts).width;
            const visualWidth = opts.markerSize + opts.labelGap + opts.markerSize + opts.labelGap + labelWidth;
            return { ...item, imageHref, visualWidth };
        });
        const lines = [];
        let currentLine = [];
        let currentWidth = 0;
        normalized.forEach(item => {
            const gap = currentLine.length ? opts.itemGap : 0;
            if (currentLine.length && currentWidth + gap + item.visualWidth > opts.maxWidth) {
                lines.push({ items: currentLine, totalVisualWidth: currentWidth });
                currentLine = [item];
                currentWidth = item.visualWidth;
            } else {
                currentWidth += gap + item.visualWidth;
                currentLine.push(item);
            }
        });
        if (currentLine.length) lines.push({ items: currentLine, totalVisualWidth: currentWidth });
        const itemHeight = Math.max(opts.markerSize, text.fontSize(opts.fontSize || 12));
        const height = lines.length ? lines.length * itemHeight + (lines.length - 1) * opts.rowGap : 0;
        return { lines, width: Math.max(...lines.map(line => line.totalVisualWidth), 0), height, itemHeight };
    };

    legend.drawWithIcons = (parent, items, colorsOrOptions = {}, maybeOptions) => {
        const options = legend.resolveOptions(colorsOrOptions, maybeOptions);
        const opts = {
            x: 0,
            y: 0,
            markerSize: 12,
            labelGap: 6,
            itemGap: 12,
            rowGap: 6,
            maxWidth: Infinity,
            align: "center",
            fontSize: 12,
            fontFamily: null,
            fontWeight: "normal",
            textColor: "#333333",
            className: "legend-icons",
            idPrefix: "clip-legend",
            ...options,
        };
        const layout = legend.layoutWithIcons(items, { ...opts, context: parent });
        const legendFontSize = text.fontSize(opts.fontSize);
        const container = parent.append("g")
            .attr("class", opts.className)
            .attr("transform", `translate(${opts.x}, ${opts.y})`);
        const defs = container.append("defs");
        let lineY = 0;
        layout.lines.forEach((line, lineIndex) => {
            let offset = 0;
            if (opts.align === "center" && Number.isFinite(opts.maxWidth)) {
                offset = Math.max(0, (opts.maxWidth - line.totalVisualWidth) / 2);
            }
            let drawX = offset;
            const lineCenterY = lineY + layout.itemHeight / 2;
            const radius = opts.markerSize / 2;
            line.items.forEach((item, itemIndex) => {
                const colorGroup = container.append("g")
                    .attr("transform", `translate(${drawX}, ${lineCenterY - radius})`);
                colorGroup.append("circle")
                    .attr("cx", radius)
                    .attr("cy", radius)
                    .attr("r", radius)
                    .attr("fill", item.color);
                const clipId = `${opts.idPrefix}-${lineIndex}-${itemIndex}`;
                defs.append("clipPath")
                    .attr("id", clipId)
                    .append("circle")
                    .attr("cx", radius)
                    .attr("cy", radius)
                    .attr("r", radius - 0.5);
                const iconGroup = container.append("g")
                    .attr("transform", `translate(${drawX + opts.markerSize + opts.labelGap}, ${lineCenterY - radius})`);
                iconGroup.append("circle")
                    .attr("cx", radius)
                    .attr("cy", radius)
                    .attr("r", radius)
                    .attr("fill", "none")
                    .attr("stroke", "#000000")
                    .attr("stroke-width", 0.2);
                if (item.imageHref) {
                    iconGroup.append("image")
                        .attr("x", 0)
                        .attr("y", 0)
                        .attr("width", opts.markerSize)
                        .attr("height", opts.markerSize)
                        .attr("xlink:href", item.imageHref)
                        .attr("clip-path", `url(#${clipId})`);
                } else {
                    iconGroup.append("circle")
                        .attr("cx", radius)
                        .attr("cy", radius)
                        .attr("r", radius - 0.5)
                        .attr("fill", "#ffffff");
                }
                const labelNode = container.append("text")
                    .attr("x", drawX + (opts.markerSize + opts.labelGap) * 2)
                    .attr("y", lineCenterY)
                    .attr("dominant-baseline", "middle")
                    .style("font-size", `${legendFontSize}px`)
                    .style("font-weight", opts.fontWeight)
                    .style("fill", opts.textColor)
                    .text(item.label);
                if (opts.fontFamily) labelNode.style("font-family", opts.fontFamily);
                drawX += item.visualWidth + opts.itemGap;
            });
            lineY += layout.itemHeight + opts.rowGap;
        });
        return { ...layout, group: container };
    };

    legend.sideDetailLayout = (context, items, options = {}) => {
        const opts = {
            markerRadius: 6,
            iconSizeRatio: 1.1,
            minIconSize: 10,
            rowPaddingRatio: 0.4,
            fontSize: 13,
            fontFamily: "Arial",
            fontWeight: "normal",
            valueGap: 10,
            labelGap: 10,
            markerToIconGap: 10,
            minItemHeight: 16,
            ...options,
        };
        const legendFontSize = text.fontSize(opts.fontSize);
        const normalized = normalizeLegendItems(items, opts).map(item => {
            const raw = item.raw && typeof item.raw === "object" ? item.raw : {};
            const valueLabel = raw.valueLabel == null ? "" : String(raw.valueLabel);
            const imageHref = raw.imageHref == null ? raw.image : raw.imageHref;
            const valueWidth = valueLabel ? text.measure(context, valueLabel, opts).width : 0;
            const labelWidth = text.measure(context, item.label, opts).width;
            return { ...item, valueLabel, imageHref, valueWidth, labelWidth };
        });
        const idealIconSize = Math.max(opts.minIconSize, legendFontSize * opts.iconSizeRatio);
        const idealItemHeight = Math.max(legendFontSize, idealIconSize) * (1 + opts.rowPaddingRatio);
        const availableHeight = opts.availableHeight == null ? Infinity : opts.availableHeight;
        const maxItemHeight = normalized.length > 0 ? availableHeight / normalized.length : idealItemHeight;
        const absoluteMinHeight = Math.max(opts.minItemHeight, legendFontSize + 4, opts.minIconSize + 4);
        let itemHeight = Math.max(absoluteMinHeight, Math.min(idealItemHeight, maxItemHeight));
        let iconSize = itemHeight < idealItemHeight
            ? Math.max(opts.minIconSize, itemHeight * (idealIconSize / idealItemHeight))
            : idealIconSize;
        if (!Number.isFinite(itemHeight)) itemHeight = idealItemHeight;
        if (!Number.isFinite(iconSize)) iconSize = idealIconSize;
        const maxValueWidth = normalized.length ? Math.max(...normalized.map(item => item.valueWidth), 0) : 0;
        const maxLabelWidth = normalized.length ? Math.max(...normalized.map(item => item.labelWidth), 0) : 0;
        const width = opts.markerRadius * 2
            + opts.markerToIconGap
            + iconSize
            + opts.valueGap
            + maxValueWidth
            + opts.labelGap
            + maxLabelWidth;
        const height = normalized.length * itemHeight;
        return {
            items: normalized,
            width,
            height,
            itemHeight,
            iconSize,
            markerRadius: opts.markerRadius,
            maxValueWidth,
        };
    };

    legend.sideDetail = (parent, items, colorsOrOptions = {}, maybeOptions) => {
        const options = legend.resolveOptions(colorsOrOptions, maybeOptions);
        const opts = {
            x: 0,
            y: 0,
            className: "legend-side-detail",
            fontSize: 13,
            fontFamily: "Arial",
            fontWeight: "normal",
            textColor: "#333333",
            valueColor: null,
            markerToIconGap: 10,
            valueGap: 10,
            labelGap: 10,
            markerRadius: 6,
            ...options,
        };
        const layout = legend.sideDetailLayout(parent, items, opts);
        const group = parent.append("g")
            .attr("class", opts.className)
            .attr("transform", `translate(${opts.x}, ${opts.y})`);
        layout.items.forEach((item, index) => {
            const y = index * layout.itemHeight;
            const centerY = y + layout.itemHeight / 2;
            const itemGroup = group.append("g")
                .attr("class", "legend-item")
                .attr("transform", "translate(0, 0)");
            itemGroup.append("circle")
                .attr("cx", layout.markerRadius)
                .attr("cy", centerY)
                .attr("r", layout.markerRadius)
                .attr("fill", item.color);
            const iconX = layout.markerRadius * 2 + opts.markerToIconGap;
            if (item.imageHref) {
                itemGroup.append("image")
                    .attr("x", iconX)
                    .attr("y", centerY - layout.iconSize / 2)
                    .attr("width", layout.iconSize)
                    .attr("height", layout.iconSize)
                    .attr("preserveAspectRatio", "xMidYMid meet")
                    .attr("xlink:href", item.imageHref);
            }
            const valueX = iconX + layout.iconSize + opts.valueGap + layout.maxValueWidth;
            if (item.valueLabel) {
                const valueNode = itemGroup.append("text")
                    .attr("x", valueX)
                    .attr("y", centerY)
                    .attr("text-anchor", "end")
                    .attr("dominant-baseline", "middle")
                    .style("font-size", `${text.fontSize(opts.fontSize)}px`)
                    .style("font-weight", opts.fontWeight)
                    .style("fill", opts.valueColor || opts.textColor)
                    .text(item.valueLabel);
                if (opts.fontFamily) valueNode.style("font-family", opts.fontFamily);
            }
            const labelNode = itemGroup.append("text")
                .attr("x", valueX + opts.labelGap)
                .attr("y", centerY)
                .attr("text-anchor", "start")
                .attr("dominant-baseline", "middle")
                .style("font-size", `${text.fontSize(opts.fontSize)}px`)
                .style("font-weight", opts.fontWeight)
                .style("fill", opts.textColor)
                .text(item.label);
            if (opts.fontFamily) labelNode.style("font-family", opts.fontFamily);
        });
        return { ...layout, group };
    };

    legend.strip = (parent, items, colorsOrOptions = {}, maybeOptions) => {
        const options = legend.resolveOptions(colorsOrOptions, maybeOptions);
        const opts = {
            x: 0,
            y: 0,
            width: 200,
            barHeight: 10,
            markerRadius: 3,
            labelGap: 10,
            maxFontSize: 14,
            minFontSize: 6,
            fontSize: null,
            fontFamily: "Arial",
            fontWeight: "normal",
            textColor: "#333333",
            className: "legend-strip",
            toUpperCase: false,
            trackFill: null,
            trackStroke: null,
            ...options,
        };
        const normalized = normalizeLegendItems(items, opts).map(item => ({
            ...item,
            label: opts.toUpperCase ? item.label.toUpperCase() : item.label,
        }));
        const group = parent.append("g")
            .attr("class", opts.className)
            .attr("transform", `translate(${opts.x}, ${opts.y})`);
        if (opts.trackFill || opts.trackStroke) {
            const track = group.append("rect")
                .attr("x", 0)
                .attr("y", 0)
                .attr("width", opts.width)
                .attr("height", opts.barHeight);
            if (opts.trackFill) track.attr("fill", opts.trackFill);
            if (opts.trackStroke) track.attr("stroke", opts.trackStroke).attr("stroke-width", 1);
            if (opts.markerRadius) track.attr("rx", opts.markerRadius).attr("ry", opts.markerRadius);
        }
        const itemWidth = normalized.length > 0 ? opts.width / normalized.length : opts.width;
        normalized.forEach((item, index) => {
            group.append("rect")
                .attr("x", index * itemWidth)
                .attr("y", 0)
                .attr("width", itemWidth)
                .attr("height", opts.barHeight)
                .attr("fill", item.color);
        });
        let resolvedFontSize = opts.fontSize == null ? opts.maxFontSize : text.fontSize(opts.fontSize);
        const measure = size => normalized.reduce((acc, item) => {
            const width = text.measure(group, item.label, { ...opts, fontSize: size }).width;
            return Math.max(acc, width);
        }, 0);
        while (measure(resolvedFontSize) > itemWidth * 0.9 && resolvedFontSize > opts.minFontSize) {
            resolvedFontSize -= 0.5;
        }
        normalized.forEach((item, index) => {
            const labelNode = group.append("text")
                .attr("x", index * itemWidth + itemWidth / 2)
                .attr("y", opts.barHeight + opts.labelGap)
                .attr("text-anchor", "middle")
                .style("font-size", `${resolvedFontSize}px`)
                .style("font-weight", opts.fontWeight)
                .style("fill", opts.textColor)
                .text(item.label);
            if (opts.fontFamily) labelNode.style("font-family", opts.fontFamily);
        });
        return { group, width: opts.width, height: opts.barHeight + opts.labelGap + resolvedFontSize, itemWidth, fontSize: resolvedFontSize };
    };

    legend.mixedCentered = (parent, entries, options = {}) => {
        const opts = {
            centerX: 0,
            y: 0,
            itemGap: 15,
            markerTextGap: 5,
            fontSize: 12,
            fontFamily: null,
            fontWeight: "normal",
            textColor: "#333333",
            className: "legend-mixed",
            ...options,
        };
        const legendFontSize = text.fontSize(opts.fontSize);
        const normalized = (entries || []).map(entry => {
            const markerShape = entry.markerShape || "rect";
            const markerSize = entry.markerSize == null ? 12 : entry.markerSize;
            const label = entry.label == null ? "" : String(entry.label);
            const markerWidth = markerShape === "circle" ? markerSize * 2 : markerSize;
            const labelWidth = text.measure(parent, label, {
                fontSize: legendFontSize,
                fontFamily: opts.fontFamily,
                fontWeight: opts.fontWeight,
            }).width;
            return {
                ...entry,
                markerShape,
                markerSize,
                markerWidth,
                label,
                itemWidth: markerWidth + opts.markerTextGap + labelWidth,
            };
        });
        const totalWidth = normalized.reduce((sum, item, index) => (
            sum + item.itemWidth + (index > 0 ? opts.itemGap : 0)
        ), 0);
        const startX = opts.centerX - totalWidth / 2;
        const group = parent.append("g")
            .attr("class", opts.className)
            .attr("transform", `translate(${startX}, ${opts.y})`);
        let cursorX = 0;
        normalized.forEach((item, index) => {
            if (index > 0) cursorX += opts.itemGap;
            if (item.markerShape === "circle") {
                group.append("circle")
                    .attr("cx", cursorX + item.markerSize)
                    .attr("cy", 0)
                    .attr("r", item.markerSize)
                    .attr("fill", item.color);
            } else {
                group.append("rect")
                    .attr("x", cursorX)
                    .attr("y", -item.markerSize / 2)
                    .attr("width", item.markerSize)
                    .attr("height", item.markerSize)
                    .attr("fill", item.color);
            }
            const textNode = group.append("text")
                .attr("x", cursorX + item.markerWidth + opts.markerTextGap)
                .attr("y", 0)
                .attr("dominant-baseline", "middle")
                .style("font-size", `${legendFontSize}px`)
                .style("font-weight", opts.fontWeight)
                .style("fill", opts.textColor)
                .text(item.label);
            if (opts.fontFamily) textNode.style("font-family", opts.fontFamily);
            cursorX += item.itemWidth;
        });
        return { group, width: totalWidth };
    };

    legend.mirrorPair = (parent, left, right, options = {}) => {
        const opts = {
            centerX: 0,
            y: 0,
            circleRadius: 10,
            circleTextGap: 10,
            centerMargin: 10,
            fontSize: 12,
            fontFamily: null,
            fontWeight: "bold",
            textColor: "#333333",
            className: "legend-mirror-pair",
            ...options,
        };
        const legendFontSize = text.fontSize(opts.fontSize);
        const group = parent.append("g")
            .attr("class", opts.className)
            .attr("transform", `translate(${opts.centerX}, ${opts.y})`);
        const leftTextWidth = text.measure(parent, left.label, {
            fontSize: legendFontSize,
            fontFamily: opts.fontFamily,
            fontWeight: opts.fontWeight,
        }).width;
        const leftTextRightEdge = -5 * opts.centerMargin;
        const leftTextLeftEdge = leftTextRightEdge - leftTextWidth;
        const leftCircleRightEdge = leftTextLeftEdge - opts.circleTextGap;
        const leftCircleCenter = leftCircleRightEdge - opts.circleRadius;
        const rightCircleLeftEdge = opts.centerMargin;
        const rightCircleCenter = rightCircleLeftEdge + opts.circleRadius;
        const rightTextLeftEdge = rightCircleCenter + opts.circleRadius + opts.circleTextGap;
        group.append("circle")
            .attr("cx", leftCircleCenter)
            .attr("cy", 0)
            .attr("r", opts.circleRadius)
            .attr("fill", left.color);
        const leftText = group.append("text")
            .attr("x", leftTextLeftEdge)
            .attr("y", 0)
            .attr("dy", "0.35em")
            .style("font-size", `${legendFontSize}px`)
            .style("font-weight", opts.fontWeight)
            .style("fill", opts.textColor)
            .text(left.label);
        if (opts.fontFamily) leftText.style("font-family", opts.fontFamily);
        group.append("circle")
            .attr("cx", rightCircleCenter)
            .attr("cy", 0)
            .attr("r", opts.circleRadius)
            .attr("fill", right.color);
        const rightText = group.append("text")
            .attr("x", rightTextLeftEdge)
            .attr("y", 0)
            .attr("dy", "0.35em")
            .style("font-size", `${legendFontSize}px`)
            .style("font-weight", opts.fontWeight)
            .style("fill", opts.textColor)
            .text(right.label);
        if (opts.fontFamily) rightText.style("font-family", opts.fontFamily);
        return { group };
    };

    legend.segmentsCentered = (parent, segments, options = {}) => {
        const opts = {
            centerX: 0,
            y: 0,
            itemGap: 5,
            sectionGap: 15,
            fontSize: 12,
            fontFamily: null,
            fontWeight: "normal",
            textColor: "#333333",
            className: "legend-segments",
            ...options,
        };
        const legendFontSize = text.fontSize(opts.fontSize);
        const normalized = (segments || []).map(segment => {
            if (segment.type === "text") {
                const label = segment.label == null ? "" : String(segment.label);
                const labelWidth = text.measure(parent, label, {
                    fontSize: legendFontSize,
                    fontFamily: opts.fontFamily,
                    fontWeight: opts.fontWeight,
                }).width;
                return { ...segment, width: labelWidth };
            }
            const size = segment.size == null ? 12 : segment.size;
            return { ...segment, width: size };
        });
        const totalWidth = normalized.reduce((sum, segment, index) => {
            const gap = index > 0
                ? (segment.type === "text" || normalized[index - 1].type === "text" ? opts.sectionGap : opts.itemGap)
                : 0;
            return sum + segment.width + gap;
        }, 0);
        const group = parent.append("g")
            .attr("class", opts.className)
            .attr("transform", `translate(${opts.centerX - totalWidth / 2}, ${opts.y})`);
        let cursorX = 0;
        normalized.forEach((segment, index) => {
            if (index > 0) {
                cursorX += (segment.type === "text" || normalized[index - 1].type === "text")
                    ? opts.sectionGap
                    : opts.itemGap;
            }
            if (segment.type === "text") {
                const textNode = group.append("text")
                    .attr("x", cursorX)
                    .attr("y", 0)
                    .attr("dominant-baseline", "middle")
                    .style("font-size", `${legendFontSize}px`)
                    .style("font-weight", opts.fontWeight)
                    .style("fill", opts.textColor)
                    .text(segment.label);
                if (opts.fontFamily) textNode.style("font-family", opts.fontFamily);
            } else if (segment.type === "circle") {
                const radius = segment.radius == null ? segment.size / 2 : segment.radius;
                group.append("circle")
                    .attr("cx", cursorX + radius)
                    .attr("cy", 0)
                    .attr("r", radius)
                    .attr("fill", segment.color);
            } else if (segment.type === "path") {
                const pathNode = group.append("path")
                    .attr("d", segment.d)
                    .attr("fill", segment.color);
                if (segment.transform) pathNode.attr("transform", segment.transform);
            } else {
                group.append("rect")
                    .attr("x", cursorX)
                    .attr("y", -segment.size / 2)
                    .attr("width", segment.size)
                    .attr("height", segment.size)
                    .attr("fill", segment.color);
            }
            cursorX += segment.width;
        });
        return { group, width: totalWidth };
    };

    legend.withGradientFills = (defs, groups, colorScale, colorResolver, options = {}) => {
        const opts = { idPrefix: "legend-grad", ...options };
        return (groups || []).map((group, index) => {
            const color = colorScale(group);
            const legendGradId = `${opts.idPrefix}-${index}`;
            const brighterColor = colorResolver.variant(color, { mode: "brighter", amount: 0.5 });
            const darkerColor = colorResolver.variant(color, { mode: "darker", amount: 0.2 });
            const legendGrad = defs.append("linearGradient")
                .attr("id", legendGradId)
                .attr("x1", "0%")
                .attr("y1", "0%")
                .attr("x2", "100%")
                .attr("y2", "100%");
            legendGrad.append("stop").attr("offset", "0%").attr("stop-color", brighterColor.toString());
            legendGrad.append("stop").attr("offset", "100%").attr("stop-color", darkerColor.toString());
            return { label: group, color: `url(#${legendGradId})` };
        });
    };

    legend.categoryValueRows = (parent, items, options = {}) => {
        const opts = {
            x: 0,
            y: 0,
            maxWidth: Infinity,
            markerSize: 15,
            labelGap: 6,
            itemGap: 10,
            rowHeight: 45,
            rowGap: 0,
            fontSize: 12,
            valueFontWeight: "bold",
            fontFamily: null,
            fontWeight: "normal",
            textColor: "#333333",
            markerRadius: 0,
            className: "legend-category-value",
            ...options,
        };
        const legendFontSize = text.fontSize(opts.fontSize);
        const normalized = (items || []).map((item, index) => {
            const label = item.label == null ? "" : String(item.label);
            const valueLabel = item.valueLabel == null ? "" : String(item.valueLabel);
            const labelWidth = text.measure(parent, label, {
                fontSize: legendFontSize,
                fontFamily: opts.fontFamily,
                fontWeight: opts.fontWeight,
            }).width;
            const valueWidth = text.measure(parent, valueLabel, {
                fontSize: legendFontSize,
                fontFamily: opts.fontFamily,
                fontWeight: opts.valueFontWeight,
            }).width;
            const contentWidth = opts.markerSize + opts.labelGap + Math.max(labelWidth, valueWidth);
            let color = item.color;
            if (!color && typeof opts.color === "function") color = opts.color(item.raw, index);
            if (!color && opts.colorResolver) color = opts.colorResolver.field(item.label, index, opts).value;
            return {
                ...item,
                label,
                valueLabel,
                color,
                width: contentWidth + opts.itemGap,
            };
        });
        const rows = [];
        let currentRow = [];
        let currentRowWidth = 0;
        normalized.forEach(item => {
            if (currentRow.length > 0 && currentRowWidth + item.width > opts.maxWidth) {
                rows.push({ items: currentRow, width: currentRowWidth - opts.itemGap });
                currentRow = [item];
                currentRowWidth = item.width;
            } else {
                currentRow.push(item);
                currentRowWidth += item.width;
            }
        });
        if (currentRow.length) rows.push({ items: currentRow, width: currentRowWidth - opts.itemGap });
        const group = parent.append("g")
            .attr("class", opts.className)
            .attr("transform", `translate(${opts.x}, ${opts.y})`);
        rows.forEach((row, rowIndex) => {
            const rowY = rowIndex * (opts.rowHeight + opts.rowGap);
            const startX = opts.maxWidth < Infinity ? Math.max(0, (opts.maxWidth - row.width) / 2) : 0;
            let cursorX = startX;
            row.items.forEach(item => {
                const itemG = group.append("g")
                    .attr("class", "legend-item")
                    .attr("transform", `translate(${cursorX}, ${rowY})`);
                const rect = itemG.append("rect")
                    .attr("width", opts.markerSize)
                    .attr("height", opts.markerSize)
                    .attr("fill", item.color);
                if (opts.markerRadius) rect.attr("rx", opts.markerRadius).attr("ry", opts.markerRadius);
                const labelNode = itemG.append("text")
                    .attr("x", opts.markerSize + opts.labelGap)
                    .attr("y", opts.markerSize / 2)
                    .attr("dy", "0.32em")
                    .style("font-size", `${legendFontSize}px`)
                    .style("font-weight", opts.fontWeight)
                    .style("fill", opts.textColor)
                    .text(item.label);
                if (opts.fontFamily) labelNode.style("font-family", opts.fontFamily);
                const valueNode = itemG.append("text")
                    .attr("x", opts.markerSize + opts.labelGap)
                    .attr("y", opts.markerSize * 1.7)
                    .attr("dy", "0.32em")
                    .style("font-size", `${legendFontSize}px`)
                    .style("font-weight", opts.valueFontWeight)
                    .style("fill", opts.textColor)
                    .text(item.valueLabel);
                if (opts.fontFamily) valueNode.style("font-family", opts.fontFamily);
                cursorX += item.width;
            });
        });
        const height = rows.length ? rows.length * opts.rowHeight + (rows.length - 1) * opts.rowGap : 0;
        return { group, height, rows };
    };

    legend.labeledStrip = (parent, items, options = {}) => {
        const opts = {
            y: 0,
            centerWidth: null,
            barHeight: 15,
            labelPaddingTop: 8,
            itemWidth: null,
            totalWidth: null,
            numberFontSize: 16,
            numberFontFamily: null,
            numberFontWeight: "bold",
            labelFontSize: 12,
            labelFontFamily: null,
            labelFontWeight: "normal",
            textColor: "#333333",
            numberColor: null,
            numberLeftPadding: 3,
            numberRightPadding: 5,
            showNumber: false,
            stroke: "#555",
            strokeWidth: 0.5,
            className: "legend-labeled-strip",
            wrapLabel: null,
            ...options,
        };
        const normalized = (items || []).map((item, index) => ({
            label: item.label == null ? String(item.value != null ? item.value : index) : String(item.label),
            fill: item.fill || item.color,
            number: item.number != null ? item.number : (opts.showNumber ? index + 1 : null),
        }));
        const count = normalized.length;
        const stripWidth = opts.totalWidth || (opts.itemWidth ? opts.itemWidth * count : opts.centerWidth);
        const itemWidth = opts.itemWidth || (count ? stripWidth / count : 0);
        const totalWidth = itemWidth * count;
        const startX = opts.centerWidth != null ? (opts.centerWidth - totalWidth) / 2 : 0;
        const group = parent.append("g")
            .attr("class", opts.className)
            .attr("transform", `translate(${startX}, ${opts.y})`);
        const numberColor = opts.numberColor || opts.textColor;
        const labelFontSize = text.fontSize(opts.labelFontSize);
        const numberFontSize = text.fontSize(opts.numberFontSize);
        const numberWidth = opts.showNumber
            ? text.measure(parent, "8", {
                fontSize: numberFontSize,
                fontFamily: opts.numberFontFamily,
                fontWeight: opts.numberFontWeight,
            }).width
            : 0;
        normalized.forEach((item, index) => {
            const x = index * itemWidth;
            const bar = group.append("rect")
                .attr("x", x)
                .attr("y", 0)
                .attr("width", itemWidth)
                .attr("height", opts.barHeight)
                .attr("fill", item.fill);
            if (opts.stroke) bar.attr("stroke", opts.stroke).attr("stroke-width", opts.strokeWidth);
            const labelY = opts.barHeight + opts.labelPaddingTop;
            const groupNameX = opts.showNumber
                ? x + opts.numberLeftPadding + numberWidth + opts.numberRightPadding
                : x + opts.numberLeftPadding;
            const labelAvailableWidth = Math.max(
                10,
                itemWidth - opts.numberLeftPadding - (opts.showNumber ? numberWidth + opts.numberRightPadding + opts.numberLeftPadding : opts.numberLeftPadding)
            );
            if (opts.showNumber) {
                const numberNode = group.append("text")
                    .attr("x", x + opts.numberLeftPadding)
                    .attr("y", labelY)
                    .attr("text-anchor", "start")
                    .attr("dominant-baseline", "hanging")
                    .style("font-size", `${numberFontSize}px`)
                    .style("font-weight", opts.numberFontWeight)
                    .style("fill", numberColor)
                    .text(item.number);
                if (opts.numberFontFamily) numberNode.style("font-family", opts.numberFontFamily);
            }
            const labelNode = group.append("text")
                .attr("x", groupNameX)
                .attr("y", labelY)
                .attr("dominant-baseline", "hanging")
                .style("font-size", `${labelFontSize}px`)
                .style("font-weight", opts.labelFontWeight)
                .style("fill", opts.textColor);
            if (opts.labelFontFamily) labelNode.style("font-family", opts.labelFontFamily);
            if (opts.wrapLabel) {
                opts.wrapLabel(labelNode, item.label, labelAvailableWidth);
            } else {
                labelNode.text(item.label);
            }
        });
        return { group, width: totalWidth, height: opts.barHeight + opts.labelPaddingTop + labelFontSize };
    };

    legend.inlineTags = (parent, items, colorsOrOptions = {}, maybeOptions) => {
        const options = legend.resolveOptions(colorsOrOptions, maybeOptions);
        const opts = {
            x: 0,
            y: 0,
            maxWidth: Infinity,
            itemHeight: 20,
            itemGap: 10,
            rowGap: 5,
            itemPadding: 10,
            fontSize: 12,
            fontFamily: null,
            fontWeight: "normal",
            textColor: "#333333",
            className: "legend-inline-tags",
            ...options,
        };
        const normalized = normalizeLegendItems(items, opts).map(item => {
            const labelWidth = text.measure(parent, item.label, {
                fontSize: opts.itemHeight,
                fontFamily: opts.fontFamily,
                fontWeight: opts.fontWeight,
            }).width;
            return { ...item, width: labelWidth + opts.itemPadding * 2 };
        });
        const group = parent.append("g")
            .attr("class", opts.className)
            .attr("transform", `translate(${opts.x}, ${opts.y})`);
        let currentX = 0;
        let currentY = 0;
        const rowHeight = opts.itemHeight + opts.rowGap;
        normalized.forEach((item, index) => {
            const gap = index > 0 && currentX > 0 ? opts.itemGap : 0;
            if (currentX > 0 && currentX + gap + item.width > opts.maxWidth) {
                currentX = 0;
                currentY += rowHeight;
            }
            if (currentX > 0) currentX += opts.itemGap;
            group.append("rect")
                .attr("x", currentX)
                .attr("y", currentY)
                .attr("width", item.width)
                .attr("height", opts.itemHeight)
                .attr("fill", item.color);
            const labelNode = group.append("text")
                .attr("x", currentX + item.width / 2)
                .attr("y", currentY + opts.itemHeight / 2)
                .attr("text-anchor", "middle")
                .attr("dominant-baseline", "middle")
                .style("font-size", `${text.fontSize(opts.fontSize)}px`)
                .style("font-weight", opts.fontWeight)
                .style("fill", opts.textColor)
                .text(item.label);
            if (opts.fontFamily) labelNode.style("font-family", opts.fontFamily);
            currentX += item.width;
        });
        return { group, height: currentY + opts.itemHeight };
    };

    legend.stepLineCentered = (parent, options = {}) => {
        const opts = {
            centerX: 0,
            y: 60,
            fieldName: "",
            areaColor: "#333333",
            upColor: "#469377",
            downColor: "#c63310",
            changeLabel: "% change",
            circleRadius: 8,
            fontSize: 14,
            textColor: "#333333",
            className: "legend-step-line",
            ...options,
        };
        const fieldNameWidth = text.measure(parent, opts.fieldName, { fontSize: opts.fontSize }).width;
        const triangleSize = 18;
        const triangleHeight = triangleSize * Math.sqrt(3) / 2;
        const triangleSpacing = -4;
        const triangleStartX = 30 + fieldNameWidth;
        const changeTextWidth = text.measure(parent, opts.changeLabel, { fontSize: opts.fontSize }).width;
        const downTriangleX = triangleStartX + triangleSize + triangleSpacing;
        const totalLegendWidth = downTriangleX + triangleSize / 2 + 10 + changeTextWidth;
        const group = parent.append("g")
            .attr("class", opts.className)
            .attr("transform", `translate(${opts.centerX - totalLegendWidth / 2}, ${opts.y})`);
        group.append("circle")
            .attr("cx", 0)
            .attr("cy", 0)
            .attr("r", opts.circleRadius)
            .attr("fill", opts.areaColor);
        group.append("text")
            .attr("x", 15)
            .attr("y", 0)
            .attr("dominant-baseline", "middle")
            .attr("fill", opts.textColor)
            .style("font-size", `${opts.fontSize}px`)
            .text(opts.fieldName);
        const upTop = [triangleStartX, -triangleHeight / 2];
        const upBottomLeft = [triangleStartX - triangleSize / 2, triangleHeight / 2];
        const upBottomRight = [triangleStartX + triangleSize / 2, triangleHeight / 2];
        group.append("path")
            .attr("d", `M ${upBottomLeft[0]},${upBottomLeft[1]} L ${upBottomRight[0]},${upBottomRight[1]} L ${upTop[0]},${upTop[1]} Z`)
            .attr("fill", opts.upColor);
        const downBottom = [downTriangleX, triangleHeight / 2];
        const downTopLeft = [downTriangleX - triangleSize / 2, -triangleHeight / 2];
        const downTopRight = [downTriangleX + triangleSize / 2, -triangleHeight / 2];
        group.append("path")
            .attr("d", `M ${downTopLeft[0]},${downTopLeft[1]} L ${downTopRight[0]},${downTopRight[1]} L ${downBottom[0]},${downBottom[1]} Z`)
            .attr("fill", opts.downColor);
        group.append("text")
            .attr("x", downTriangleX + triangleSize / 2 + 10)
            .attr("y", 0)
            .attr("dominant-baseline", "middle")
            .attr("fill", opts.textColor)
            .style("font-size", `${opts.fontSize}px`)
            .text(opts.changeLabel);
        return { group, width: totalLegendWidth };
    };

    legend.boxedVertical = (parent, items, colorsOrOptions = {}, maybeOptions) => {
        const options = legend.resolveOptions(colorsOrOptions, maybeOptions);
        const opts = {
            x: 0,
            y: 0,
            padding: 10,
            itemHeight: 20,
            markerSize: 15,
            labelGap: 5,
            fontSize: 12,
            fontFamily: null,
            fontWeight: "normal",
            textColor: "#333333",
            backgroundFill: "white",
            backgroundStroke: "#ccc",
            backgroundOpacity: 0.8,
            className: "legend-boxed-vertical",
            ...options,
        };
        const normalized = normalizeLegendItems(items, opts);
        const legendFontSize = text.fontSize(opts.fontSize);
        const maxTextWidth = normalized.length
            ? Math.max(...normalized.map(item => text.measure(parent, item.label, {
                fontSize: legendFontSize,
                fontFamily: opts.fontFamily,
                fontWeight: opts.fontWeight,
            }).width), 0)
            : 0;
        const boxWidth = maxTextWidth + opts.markerSize + opts.labelGap + opts.padding * 2;
        const boxHeight = normalized.length * opts.itemHeight + opts.padding * 2;
        const group = parent.append("g")
            .attr("class", opts.className)
            .attr("transform", `translate(${opts.x}, ${opts.y})`);
        group.append("rect")
            .attr("x", -opts.padding)
            .attr("y", -opts.padding)
            .attr("width", boxWidth + opts.padding * 2)
            .attr("height", boxHeight)
            .attr("fill", opts.backgroundFill)
            .attr("stroke", opts.backgroundStroke)
            .attr("opacity", opts.backgroundOpacity);
        normalized.forEach((item, index) => {
            const itemY = index * opts.itemHeight + opts.padding;
            const itemG = group.append("g").attr("transform", `translate(${opts.padding}, ${itemY})`);
            itemG.append("rect")
                .attr("width", opts.markerSize)
                .attr("height", opts.markerSize)
                .attr("fill", item.color);
            const labelNode = itemG.append("text")
                .attr("x", opts.markerSize + opts.labelGap)
                .attr("y", opts.markerSize / 2)
                .attr("dy", "0.35em")
                .style("font-size", `${legendFontSize}px`)
                .style("font-weight", opts.fontWeight)
                .style("fill", opts.textColor)
                .text(item.label);
            if (opts.fontFamily) labelNode.style("font-family", opts.fontFamily);
        });
        return { group, width: boxWidth + opts.padding * 2, height: boxHeight };
    };

    legend.semicircleRow = (parent, items, options = {}) => {
        const opts = {
            x: 0,
            y: 0,
            radius: 30,
            itemWidth: 120,
            centerY: 30,
            fontSize: 14,
            className: "legend-semicircle-row",
            ...options,
        };
        const group = parent.append("g")
            .attr("class", opts.className)
            .attr("transform", `translate(${opts.x}, ${opts.y})`);
        const semicircle = d3.arc()
            .innerRadius(0)
            .outerRadius(opts.radius)
            .startAngle(-Math.PI / 2)
            .endAngle(Math.PI / 2);
        (items || []).forEach((item, index) => {
            const itemG = group.append("g").attr("transform", `translate(${index * opts.itemWidth}, 0)`);
            itemG.append("path")
                .attr("d", semicircle)
                .attr("transform", `translate(${opts.radius}, ${opts.centerY})`)
                .attr("fill", item.color);
            itemG.append("text")
                .attr("x", opts.radius)
                .attr("y", -12)
                .attr("text-anchor", "middle")
                .attr("fill", item.color)
                .attr("font-weight", "bold")
                .style("font-size", `${opts.fontSize}px`)
                .text(item.label);
            if (item.imageHref) {
                const iconSize = opts.radius * 1.5;
                itemG.append("image")
                    .attr("x", opts.radius - iconSize / 2)
                    .attr("y", opts.centerY - iconSize / 2)
                    .attr("width", iconSize)
                    .attr("height", iconSize)
                    .attr("preserveAspectRatio", "xMidYMid meet")
                    .attr("xlink:href", item.imageHref);
            }
        });
        return { group, width: (items || []).length * opts.itemWidth };
    };

})(globalThis);

// Expose chartUtils as a global variable for legacy non-module templates.
var chartUtils = globalThis.chartUtils;

// 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);
    }
}