Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type15_lollipop_chart/lollipop_icon_chart_01.js

@@ -0,0 +1,379 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Lollipop Chart",
+    "chart_name": "lollipop_icon_chart_01",
+    "is_composite": false,
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[2, 30], [1, "inf"]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+
+// Reference-style ranked lollipop icon chart.
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        title: { font_family: "Arial", font_size: "18px", font_weight: "bold" },
+        label: { font_family: "Arial", font_size: "14px", font_weight: "bold" },
+        description: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "16px", font_weight: "bold" }
+    };
+    const colors = jsonData.colors || { text_color: "#333333" };
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const images = jsonData.images || { field: {}, other: {} };
+
+    d3.select(containerSelector).html("");
+
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key || "dimension";
+    const valueField = chartUtils.schema.channel(jsonData, "y").key || "value";
+    let valueUnit = "";
+    if (chartUtils.schema.channel(jsonData, "y").unit !== "none") {
+        valueUnit = chartUtils.schema.channel(jsonData, "y").unit;
+    }
+
+    const sortedData = [...chartData].sort((a, b) => +b[valueField] - +a[valueField]);
+    const rowCount = sortedData.length;
+    const width = Math.max(760, Math.round((variables.width || 600) * 1.28));
+    const rowStep = rowCount > 20 ? 42 : rowCount > 15 ? 48 : 54;
+    const height = Math.max(760, 168 + rowCount * rowStep);
+    const panel = {
+        x: 18,
+        y: 18,
+        width: width - 36,
+        height: height - 36,
+        radius: 18
+    };
+    const content = {
+        x: panel.x + 34,
+        y: panel.y + 76,
+        width: panel.width - 68,
+        height: panel.height - 128
+    };
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    const defs = svg.append("defs");
+    const panelGradient = defs.append("linearGradient")
+        .attr("id", "lollipop01-panel-gradient")
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "100%");
+    panelGradient.append("stop").attr("offset", "0%").attr("stop-color", "#FFFFFF");
+    panelGradient.append("stop").attr("offset", "100%").attr("stop-color", "#F1F8FF");
+
+    const barGradient = defs.append("linearGradient")
+        .attr("id", "lollipop01-bar-gradient")
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "0%");
+    barGradient.append("stop").attr("offset", "0%").attr("stop-color", "#0056AF");
+    barGradient.append("stop").attr("offset", "100%").attr("stop-color", "#2E88FF");
+
+    svg.append("rect")
+        .attr("class", "lollipop01-chart-panel")
+        .attr("data-role", "chart_panel")
+        .attr("x", panel.x)
+        .attr("y", panel.y)
+        .attr("width", panel.width)
+        .attr("height", panel.height)
+        .attr("rx", panel.radius)
+        .attr("fill", "url(#lollipop01-panel-gradient)")
+        .attr("stroke", "#D6E6F5")
+        .attr("stroke-width", 1.2);
+
+    const tabWidth = Math.min(360, Math.max(250, content.width * 0.42));
+    svg.append("rect")
+        .attr("class", "section-tab")
+        .attr("data-role", "chart_section_tab")
+        .attr("x", content.x)
+        .attr("y", panel.y + 30)
+        .attr("width", tabWidth)
+        .attr("height", 38)
+        .attr("rx", 4)
+        .attr("fill", "#073263");
+    svg.append("text")
+        .attr("class", "section-tab-label")
+        .attr("x", content.x + 18)
+        .attr("y", panel.y + 55)
+        .attr("font-family", "Arial, Helvetica, sans-serif")
+        .attr("font-size", 15)
+        .attr("font-weight", 800)
+        .attr("fill", "#FFFFFF")
+        .text(`${valueField.replace(/([a-z])([A-Z])/g, "$1 $2").toUpperCase()}${valueUnit ? ` (${valueUnit})` : ""}`);
+
+    const rankX = content.x + 20;
+    const labelX = content.x + 58;
+    const iconX = content.x + Math.min(250, Math.max(205, content.width * 0.25));
+    const barStart = iconX + 46;
+    const reservedSlot = {
+        x: content.x + content.width * 0.68,
+        y: content.y + content.height * 0.49,
+        width: content.width * 0.24,
+        height: content.height * 0.35
+    };
+    const barMaxEnd = content.x + content.width - 110;
+    const rowHeight = content.height / Math.max(1, rowCount);
+    const barHeight = Math.max(10, Math.min(20, rowHeight * 0.38));
+    const iconSize = Math.max(24, Math.min(34, rowHeight * 0.70));
+    const primaryColor = colorResolver.other("primary", { fallback: "#0B72D9" }).value;
+    const textColor = colorResolver.text({ fallback: "#0B1B3D" }).value || "#0B1B3D";
+
+    const xScale = d3.scaleLinear()
+        .domain([0, d3.max(sortedData, d => +d[valueField]) * 1.08])
+        .range([barStart, barMaxEnd]);
+
+    const tickValues = xScale.ticks(5);
+    tickValues.forEach(value => {
+        const x = xScale(value);
+        svg.append("line")
+            .attr("class", "gridline")
+            .attr("x1", x)
+            .attr("y1", content.y - 12)
+            .attr("x2", x)
+            .attr("y2", content.y + content.height + 14)
+            .attr("stroke", "#CFE0F1")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "3,4")
+            .attr("opacity", 0.72);
+    });
+
+    const artSlot = svg.append("g")
+        .attr("class", "reserved-asset-slot right-gallery-art-slot")
+        .attr("data-asset-slot", "right_gallery_art_slot")
+        .attr("data-reserved-slot", "right_gallery_art_slot")
+        .attr("data-slot-policy", "image2_asset")
+        .attr("data-anchor", "lower-right-chart-panel-safe-area")
+        .attr("data-collision-rule", "avoid value labels bars row labels and bottom axis")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true")
+        .attr("data-bbox", `${reservedSlot.x.toFixed(1)} ${reservedSlot.y.toFixed(1)} ${reservedSlot.width.toFixed(1)} ${reservedSlot.height.toFixed(1)}`)
+        .attr("opacity", 0.62);
+    artSlot.append("rect")
+        .attr("x", reservedSlot.x)
+        .attr("y", reservedSlot.y)
+        .attr("width", reservedSlot.width)
+        .attr("height", reservedSlot.height)
+        .attr("rx", 16)
+        .attr("fill", "#E8F3FF")
+        .attr("stroke", "#B8D7F3")
+        .attr("stroke-dasharray", "6,6");
+    artSlot.append("circle")
+        .attr("cx", reservedSlot.x + reservedSlot.width * 0.30)
+        .attr("cy", reservedSlot.y + reservedSlot.height * 0.34)
+        .attr("r", Math.min(reservedSlot.width, reservedSlot.height) * 0.12)
+        .attr("fill", "#2E88FF")
+        .attr("opacity", 0.22);
+    artSlot.append("rect")
+        .attr("x", reservedSlot.x + reservedSlot.width * 0.45)
+        .attr("y", reservedSlot.y + reservedSlot.height * 0.28)
+        .attr("width", reservedSlot.width * 0.24)
+        .attr("height", reservedSlot.height * 0.18)
+        .attr("rx", 5)
+        .attr("fill", "#0B72D9")
+        .attr("opacity", 0.16);
+
+    sortedData.forEach((d, i) => {
+        const dimension = d[dimensionField];
+        const value = +d[valueField];
+        const rowY = content.y + rowHeight * i + rowHeight / 2;
+        const barEnd = xScale(value);
+
+        svg.append("line")
+            .attr("class", "row-divider")
+            .attr("x1", content.x)
+            .attr("x2", content.x + content.width)
+            .attr("y1", rowY + rowHeight / 2 - 1)
+            .attr("y2", rowY + rowHeight / 2 - 1)
+            .attr("stroke", "#DCEAF7")
+            .attr("stroke-width", 1);
+
+        svg.append("circle")
+            .attr("class", "rank-circle")
+            .attr("data-role", "rank_marker")
+            .attr("data-category", dimension)
+            .attr("cx", rankX)
+            .attr("cy", rowY)
+            .attr("r", Math.max(14, Math.min(18, rowHeight * 0.34)))
+            .attr("fill", primaryColor);
+
+        svg.append("text")
+            .attr("class", "rank-label")
+            .attr("x", rankX)
+            .attr("y", rowY)
+            .attr("dy", "0.36em")
+            .attr("text-anchor", "middle")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-size", Math.max(11, Math.min(15, rowHeight * 0.28)))
+            .attr("font-weight", 800)
+            .attr("fill", "#FFFFFF")
+            .text(i + 1);
+
+        const label = String(dimension);
+        const labelFontSize = Math.max(13, Math.min(18, rowHeight * 0.34));
+        const availableLabelWidth = Math.max(70, iconX - iconSize / 2 - labelX - 10);
+        const estimatedLabelWidth = label.length * labelFontSize * 0.56;
+        const canCompressLabel = label.length <= 20 && estimatedLabelWidth <= availableLabelWidth * 1.30;
+        const maxChars = rowCount > 18 ? 12 : 16;
+        const displayLabel = canCompressLabel || label.length <= maxChars ? label : `${label.slice(0, maxChars - 1)}...`;
+        const labelText = svg.append("text")
+            .attr("class", "label")
+            .attr("data-role", "category_label")
+            .attr("data-category", dimension)
+            .attr("x", labelX)
+            .attr("y", rowY)
+            .attr("dy", "0.36em")
+            .attr("text-anchor", "start")
+            .attr("font-family", typography.label.font_family || "Arial, Helvetica, sans-serif")
+            .attr("font-size", labelFontSize)
+            .attr("font-weight", 650)
+            .attr("fill", textColor)
+            .text(displayLabel);
+        if (canCompressLabel && estimatedLabelWidth > availableLabelWidth) {
+            labelText
+                .attr("textLength", availableLabelWidth)
+                .attr("lengthAdjust", "spacingAndGlyphs");
+        }
+        labelText.append("title").text(label);
+
+        const iconGroup = svg.append("g")
+            .attr("class", "reserved-asset-slot category-icon-slot")
+            .attr("data-asset-slot", "category_icon_slot")
+            .attr("data-reserved-slot", "category_icon_slot")
+            .attr("data-slot-policy", "neutral_placeholder")
+            .attr("data-anchor", "row-centerline")
+            .attr("data-category", dimension)
+            .attr("data-collision-rule", "avoid category label and bar start")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true")
+            .attr("data-bbox", `${(iconX - iconSize / 2).toFixed(1)} ${(rowY - iconSize / 2).toFixed(1)} ${iconSize.toFixed(1)} ${iconSize.toFixed(1)}`);
+
+        iconGroup.append("rect")
+            .attr("x", iconX - iconSize / 2)
+            .attr("y", rowY - iconSize / 2)
+            .attr("width", iconSize)
+            .attr("height", iconSize)
+            .attr("rx", iconSize * 0.26)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", "#B9D2EC")
+            .attr("stroke-width", 1.1);
+
+        iconGroup.append("circle")
+            .attr("class", "category-icon-neutral-placeholder")
+            .attr("data-placeholder-role", "neutral_row_asset_slot_marker")
+            .attr("cx", iconX)
+            .attr("cy", rowY)
+            .attr("r", iconSize * 0.16)
+            .attr("fill", primaryColor)
+            .attr("opacity", 0.18);
+        iconGroup.append("line")
+            .attr("class", "category-icon-neutral-placeholder")
+            .attr("data-placeholder-role", "neutral_row_asset_slot_marker")
+            .attr("x1", iconX - iconSize * 0.16)
+            .attr("x2", iconX + iconSize * 0.16)
+            .attr("y1", rowY)
+            .attr("y2", rowY)
+            .attr("stroke", primaryColor)
+            .attr("stroke-width", 1.2)
+            .attr("stroke-linecap", "round")
+            .attr("opacity", 0.20);
+
+        svg.append("rect")
+            .attr("class", "mark lollipop-bar")
+            .attr("data-role", "lollipop_bar")
+            .attr("data-category", dimension)
+            .attr("data-value", value)
+            .attr("x", barStart)
+            .attr("y", rowY - barHeight / 2)
+            .attr("width", Math.max(2, barEnd - barStart))
+            .attr("height", barHeight)
+            .attr("rx", barHeight / 2)
+            .attr("fill", "url(#lollipop01-bar-gradient)");
+
+        const formattedValue = `${chartUtils.format.scaledText(value)}${valueUnit ? ` ${valueUnit}` : ''}`;
+        const valueX = Math.min(barEnd + 18, content.x + content.width - 18);
+        svg.append("text")
+            .attr("class", "value")
+            .attr("data-role", "endpoint_value_label")
+            .attr("data-category", dimension)
+            .attr("data-value", value)
+            .attr("x", valueX)
+            .attr("y", rowY)
+            .attr("dy", "0.35em")
+            .attr("text-anchor", "start")
+            .attr("font-family", typography.annotation.font_family || "Arial, Helvetica, sans-serif")
+            .attr("font-size", Math.max(12, Math.min(18, rowHeight * 0.32)))
+            .attr("font-weight", 800)
+            .attr("fill", "#0758B8")
+            .text(formattedValue);
+    });
+
+    const axisY = content.y + content.height + 34;
+    svg.append("line")
+        .attr("class", "axis-baseline")
+        .attr("x1", barStart)
+        .attr("x2", barMaxEnd)
+        .attr("y1", axisY)
+        .attr("y2", axisY)
+        .attr("stroke", "#B9CCE2")
+        .attr("stroke-width", 1.2);
+
+    tickValues.forEach(value => {
+        const x = xScale(value);
+        svg.append("line")
+            .attr("class", "axis-tick")
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", axisY)
+            .attr("y2", axisY + 8)
+            .attr("stroke", "#B9CCE2")
+            .attr("stroke-width", 1);
+        svg.append("text")
+            .attr("class", "axis-tick-label")
+            .attr("x", x)
+            .attr("y", axisY + 26)
+            .attr("text-anchor", "middle")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-size", 13)
+            .attr("fill", "#465A76")
+            .text(chartUtils.format.scaledText(value));
+    });
+
+    svg.append("text")
+        .attr("class", "axis-title")
+        .attr("x", (barStart + barMaxEnd) / 2)
+        .attr("y", axisY + 56)
+        .attr("text-anchor", "middle")
+        .attr("font-family", "Arial, Helvetica, sans-serif")
+        .attr("font-size", 14)
+        .attr("font-weight", 650)
+        .attr("fill", "#0758B8")
+        .text(`${valueField.replace(/([a-z])([A-Z])/g, "$1 $2")}${valueUnit ? ` (${valueUnit})` : ""}`);
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type15_lollipop_chart/lollipop_icon_chart_02.js

@@ -0,0 +1,600 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Lollipop Chart",
+    "chart_name": "lollipop_icon_chart_02",
+    "is_composite": false,
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[2, 12], [0, "inf"]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "overlay",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        title: { font_family: "Arial", font_size: "18px", font_weight: "bold" },
+        label: { font_family: "Arial", font_size: "14px", font_weight: "bold" },
+        description: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "16px", font_weight: "bold" }
+    };
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const images = jsonData.images || { field: {}, other: {} };
+
+    d3.select(containerSelector).html("");
+
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key || "dimension";
+    const valueField = chartUtils.schema.channel(jsonData, "y").key || "value";
+    let valueUnit = "";
+    if (chartUtils.schema.channel(jsonData, "y").unit !== "none") {
+        valueUnit = chartUtils.schema.channel(jsonData, "y").unit;
+    }
+
+    const temporalOrdering = getTemporalOrdering(chartData, dimensionField);
+    const sortedData = temporalOrdering.isTemporal
+        ? [...chartData].sort((a, b) => temporalOrdering.key(a[dimensionField]) - temporalOrdering.key(b[dimensionField]))
+        : [...chartData].sort((a, b) => +b[valueField] - +a[valueField]);
+    const rowCount = sortedData.length;
+    const width = Math.max(820, Math.round((variables.width || 600) * 1.42));
+    const height = Math.max(860, Math.round(width * 0.98));
+    const margin = { top: 74, right: 38, bottom: 126, left: 86 };
+    const plotWidth = width - margin.left - margin.right;
+    const plotHeight = height - margin.top - margin.bottom;
+    const baselineY = margin.top + plotHeight;
+    const primaryColor = "#214D2B";
+    const deepAccent = "#214D2B";
+    const forest = "#193C25";
+    const mutedText = "#45413C";
+    const gridColor = "#D9CEC1";
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("data-temporal-dimension", temporalOrdering.isTemporal ? "true" : "false")
+        .attr("data-temporal-order-rule", temporalOrdering.isTemporal ? temporalOrdering.rule : "not-temporal-ranked-by-value")
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    const defs = svg.append("defs");
+    const gradientId = "lollipop02-bar-gradient";
+    const barGradient = defs.append("linearGradient")
+        .attr("id", gradientId)
+        .attr("x1", "0%")
+        .attr("x2", "0%")
+        .attr("y1", "100%")
+        .attr("y2", "0%");
+    barGradient.append("stop").attr("offset", "0%").attr("stop-color", "#18361F");
+    barGradient.append("stop").attr("offset", "62%").attr("stop-color", primaryColor);
+    barGradient.append("stop").attr("offset", "100%").attr("stop-color", "#315F3A");
+
+    const shadow = defs.append("filter")
+        .attr("id", "lollipop02-soft-shadow")
+        .attr("x", "-20%")
+        .attr("y", "-20%")
+        .attr("width", "140%")
+        .attr("height", "140%");
+    shadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 1.5)
+        .attr("stdDeviation", 1.6)
+        .attr("flood-color", "#5A422C")
+        .attr("flood-opacity", 0.16);
+
+    svg.append("rect")
+        .attr("class", "lollipop02-chart-surface")
+        .attr("data-role", "chart_surface")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "transparent");
+
+    const maxValue = d3.max(sortedData, d => +d[valueField]) || 1;
+    const yScale = d3.scaleLinear()
+        .domain([0, maxValue * 1.20])
+        .nice()
+        .range([baselineY, margin.top]);
+
+    const xScale = d3.scaleBand()
+        .domain(sortedData.map(d => d[dimensionField]))
+        .range([margin.left, margin.left + plotWidth])
+        .padding(rowCount >= 11 ? 0.19 : 0.25);
+
+    const bandwidth = xScale.bandwidth();
+    const barWidth = Math.max(22, Math.min(44, bandwidth * 0.68));
+    const iconRadius = Math.max(16, Math.min(28, bandwidth * 0.42));
+    const valueFont = Math.max(15, Math.min(24, bandwidth * 0.38));
+    const labelFont = rowCount >= 11 ? 9.6 : 11;
+    const labelMaxWidth = bandwidth * 1.04;
+
+    const tickValues = yScale.ticks(5);
+    tickValues.forEach(value => {
+        const y = yScale(value);
+        svg.append("line")
+            .attr("class", "gridline")
+            .attr("data-role", "y_gridline")
+            .attr("x1", margin.left)
+            .attr("x2", margin.left + plotWidth)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", gridColor)
+            .attr("stroke-width", 1.2)
+            .attr("stroke-dasharray", "5,5")
+            .attr("opacity", 0.82);
+
+        svg.append("text")
+            .attr("class", "axis-tick-label")
+            .attr("data-role", "y_axis_tick")
+            .attr("x", margin.left - 18)
+            .attr("y", y)
+            .attr("dy", "0.35em")
+            .attr("text-anchor", "end")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-size", 16)
+            .attr("font-weight", 500)
+            .attr("fill", mutedText)
+            .text(chartUtils.format.scaledText(value));
+    });
+
+    svg.append("line")
+        .attr("class", "axis y-axis")
+        .attr("data-role", "left_y_axis")
+        .attr("x1", margin.left)
+        .attr("x2", margin.left)
+        .attr("y1", margin.top)
+        .attr("y2", baselineY)
+        .attr("stroke", "#B8AA9C")
+        .attr("stroke-width", 1.4);
+
+    svg.append("line")
+        .attr("class", "axis baseline")
+        .attr("data-role", "zero_baseline")
+        .attr("x1", margin.left)
+        .attr("x2", margin.left + plotWidth)
+        .attr("y1", baselineY)
+        .attr("y2", baselineY)
+        .attr("stroke", "#5B554E")
+        .attr("stroke-width", 1.4);
+
+    const measureLabel = displayFieldName(valueField, valueUnit).toUpperCase();
+    const pillPrimaryLabel = /incident|count/i.test(measureLabel)
+        ? "CONFLICT INCIDENTS"
+        : measureLabel;
+    const pillSecondaryLabel = valueUnit ? `(${valueUnit.toUpperCase()})` : (/incident|count/i.test(measureLabel) ? "(COUNT)" : "");
+    const pillFontSize = pillPrimaryLabel.length > 24 ? 13 : 15;
+    const pillSubFontSize = 13;
+    const pillIconSize = 42;
+    const maxPillWidth = Math.min(plotWidth * 0.56, width - margin.left - 54);
+    const pillTextWidth = Math.max(
+        pillPrimaryLabel.length * pillFontSize * 0.58,
+        pillSecondaryLabel.length * pillSubFontSize * 0.58
+    );
+    const pillWidth = Math.min(maxPillWidth, Math.max(210, pillIconSize + pillTextWidth + 52));
+    const pillHeight = pillSecondaryLabel ? 48 : 40;
+    const pillX = margin.left - 44;
+    const pillY = margin.top - 62;
+    svg.append("rect")
+        .attr("class", "incident-axis-pill")
+        .attr("data-role", "incident_axis_pill")
+        .attr("x", pillX)
+        .attr("y", pillY)
+        .attr("width", pillWidth)
+        .attr("height", pillHeight)
+        .attr("rx", 10)
+        .attr("fill", forest);
+
+    const pillIconCx = pillX + pillIconSize / 2 + 4;
+    const pillIconCy = pillY + pillHeight / 2;
+    const measureIconSlot = svg.append("g")
+        .attr("class", "reserved-asset-slot measure-pill-icon-slot")
+        .attr("data-asset-slot", "measure_pill_icon_slot")
+        .attr("data-reserved-slot", "measure_pill_icon_slot")
+        .attr("data-slot-policy", "image2_asset_or_neutral_placeholder")
+        .attr("data-asset-source-policy", "image2_asset_or_neutral_placeholder")
+        .attr("data-anchor", "measure-pill-left-center")
+        .attr("data-collision-rule", "stay inside measure pill and avoid measure text")
+        .attr("data-bbox", `${(pillIconCx - pillIconSize / 2).toFixed(1)} ${(pillIconCy - pillIconSize / 2).toFixed(1)} ${pillIconSize.toFixed(1)} ${pillIconSize.toFixed(1)}`)
+        .attr("data-bbox-policy", "circle centered in measure pill defines visible reserved bbox")
+        .attr("data-mask-policy", "downstream image2 may replace only inside the circular slot")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true");
+    measureIconSlot.append("circle")
+        .attr("cx", pillIconCx)
+        .attr("cy", pillIconCy)
+        .attr("r", pillIconSize / 2)
+        .attr("fill", "#F8F2E8")
+        .attr("stroke", forest)
+        .attr("stroke-width", 2);
+    measureIconSlot.append("circle")
+        .attr("cx", pillIconCx)
+        .attr("cy", pillIconCy)
+        .attr("r", pillIconSize * 0.17)
+        .attr("fill", forest)
+        .attr("opacity", 0.24);
+
+    const pillText = svg.append("text")
+        .attr("class", "incident-axis-pill-label")
+        .attr("x", pillX + pillIconSize + 18)
+        .attr("y", pillY + (pillSecondaryLabel ? 19 : 25))
+        .attr("text-anchor", "start")
+        .attr("font-family", "Arial, Helvetica, sans-serif")
+        .attr("font-size", pillFontSize)
+        .attr("font-weight", 800)
+        .attr("fill", "#FFFFFF");
+    pillText.append("tspan")
+        .attr("x", pillX + pillIconSize + 18)
+        .text(pillPrimaryLabel);
+    if (pillSecondaryLabel) {
+        pillText.append("tspan")
+            .attr("x", pillX + pillIconSize + 18)
+            .attr("dy", pillSubFontSize + 2)
+            .attr("font-size", pillSubFontSize)
+            .attr("font-weight", 700)
+            .text(pillSecondaryLabel);
+    }
+
+    const artSlot = {
+        x: margin.left + plotWidth * 0.51,
+        y: margin.top - 18,
+        width: plotWidth * 0.43,
+        height: plotHeight * 0.45
+    };
+    const hasPrimaryImage = Boolean(images.other && images.other.primary);
+    const artGroup = svg.append("g")
+        .attr("class", "reserved-asset-slot right-wildlife-art-slot")
+        .attr("data-asset-slot", "right_wildlife_art_slot")
+        .attr("data-reserved-slot", "right_wildlife_art_slot")
+        .attr("data-slot-policy", "input_asset_or_image2_asset")
+        .attr("data-asset-source-policy", "input_asset_or_image2_asset")
+        .attr("data-anchor", "upper-right-body-safe-area")
+        .attr("data-collision-rule", "avoid title subtitle y-axis endpoint values bars and category labels")
+        .attr("data-bbox", `${artSlot.x.toFixed(1)} ${artSlot.y.toFixed(1)} ${artSlot.width.toFixed(1)} ${artSlot.height.toFixed(1)}`)
+        .attr("data-bbox-policy", "rect x/y/width/height define the visible reserved bbox")
+        .attr("data-mask-policy", "downstream input/image2 asset may replace only inside this reserved slot")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true")
+        .attr("opacity", hasPrimaryImage ? 0.56 : 0.72);
+    artGroup.append("rect")
+        .attr("x", artSlot.x)
+        .attr("y", artSlot.y)
+        .attr("width", artSlot.width)
+        .attr("height", artSlot.height)
+        .attr("rx", 30)
+        .attr("fill", "#E6EBDD")
+        .attr("stroke", "#9AAE8B")
+        .attr("stroke-width", 2.2)
+        .attr("stroke-dasharray", "9,6");
+    artGroup.append("rect")
+        .attr("x", artSlot.x + artSlot.width * 0.07)
+        .attr("y", artSlot.y + artSlot.height * 0.10)
+        .attr("width", artSlot.width * 0.82)
+        .attr("height", artSlot.height * 0.70)
+        .attr("rx", 42)
+        .attr("fill", "#CAD6BE")
+        .attr("opacity", 0.46);
+    artGroup.append("rect")
+        .attr("x", artSlot.x + artSlot.width * 0.19)
+        .attr("y", artSlot.y + artSlot.height * 0.22)
+        .attr("width", artSlot.width * 0.58)
+        .attr("height", artSlot.height * 0.48)
+        .attr("rx", 36)
+        .attr("fill", "#9FB390")
+        .attr("opacity", 0.34);
+    const hatchCount = 9;
+    for (let h = 0; h < hatchCount; h += 1) {
+        const x0 = artSlot.x + artSlot.width * (0.06 + h * 0.105);
+        artGroup.append("line")
+            .attr("x1", x0)
+            .attr("y1", artSlot.y + artSlot.height * 0.84)
+            .attr("x2", x0 + artSlot.width * 0.16)
+            .attr("y2", artSlot.y + artSlot.height * 0.52)
+            .attr("stroke", "#607A5E")
+            .attr("stroke-width", 1.8)
+            .attr("opacity", 0.32);
+    }
+    artGroup.append("rect")
+        .attr("x", artSlot.x + artSlot.width * 0.12)
+        .attr("y", artSlot.y + artSlot.height * 0.78)
+        .attr("width", artSlot.width * 0.72)
+        .attr("height", artSlot.height * 0.08)
+        .attr("rx", 12)
+        .attr("fill", "#5C7656")
+        .attr("opacity", 0.22);
+
+    const targetSlotSize = Math.min(104, artSlot.width * 0.34);
+    const targetCx = artSlot.x + artSlot.width * 0.93;
+    const targetCy = artSlot.y + artSlot.height * 0.76;
+    const targetSlot = svg.append("g")
+        .attr("class", "reserved-asset-slot right-target-badge-slot")
+        .attr("data-asset-slot", "right_target_badge_slot")
+        .attr("data-reserved-slot", "right_target_badge_slot")
+        .attr("data-slot-policy", "image2_asset_or_neutral_placeholder")
+        .attr("data-asset-source-policy", "image2_asset_or_neutral_placeholder")
+        .attr("data-anchor", "right_wildlife_art_slot_lower_right")
+        .attr("data-collision-rule", "avoid endpoint values and bars")
+        .attr("data-bbox", `${(targetCx - targetSlotSize / 2).toFixed(1)} ${(targetCy - targetSlotSize / 2).toFixed(1)} ${targetSlotSize.toFixed(1)} ${targetSlotSize.toFixed(1)}`)
+        .attr("data-bbox-policy", "circle bbox defines visible reserved badge footprint")
+        .attr("data-mask-policy", "downstream image2 may replace only inside circular badge slot")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true")
+        .attr("opacity", 0.88);
+    targetSlot.append("circle")
+        .attr("cx", targetCx)
+        .attr("cy", targetCy)
+        .attr("r", targetSlotSize / 2)
+        .attr("fill", "#F8F2E8")
+        .attr("stroke", "#B94B43")
+        .attr("stroke-width", 5);
+    targetSlot.append("circle")
+        .attr("cx", targetCx)
+        .attr("cy", targetCy)
+        .attr("r", targetSlotSize * 0.34)
+        .attr("fill", "none")
+        .attr("stroke", "#B94B43")
+        .attr("stroke-width", 2.4)
+        .attr("stroke-dasharray", "5,6")
+        .attr("opacity", 0.76);
+    targetSlot.append("rect")
+        .attr("x", targetCx - targetSlotSize * 0.13)
+        .attr("y", targetCy - targetSlotSize * 0.13)
+        .attr("width", targetSlotSize * 0.26)
+        .attr("height", targetSlotSize * 0.26)
+        .attr("rx", 6)
+        .attr("fill", "#B94B43")
+        .attr("opacity", 0.42);
+
+    sortedData.forEach((d, i) => {
+        const dimension = d[dimensionField];
+        const value = +d[valueField];
+        const x = xScale(dimension) + bandwidth / 2;
+        const y = yScale(value);
+        const barTop = Math.min(y, baselineY - 2);
+
+        svg.append("rect")
+            .attr("class", "mark lollipop-bar")
+            .attr("data-role", "vertical_lollipop_bar")
+            .attr("data-category", dimension)
+            .attr("data-value", value)
+            .attr("x", x - barWidth / 2)
+            .attr("y", barTop)
+            .attr("width", barWidth)
+            .attr("height", Math.max(2, baselineY - barTop))
+            .attr("rx", 0)
+            .attr("data-endcap-shape", "flat-square-baseline-value-edge-capped-by-endpoint-badge")
+            .attr("fill", `url(#${gradientId})`)
+            .attr("filter", "url(#lollipop02-soft-shadow)");
+
+        const iconGroup = svg.append("g")
+            .attr("class", "reserved-asset-slot category-icon-slot endpoint-icon-badge")
+            .attr("data-asset-slot", "category_icon_slot")
+            .attr("data-reserved-slot", "category_icon_slot")
+            .attr("data-slot-policy", images.field && images.field[dimension] ? "input_asset" : "neutral_placeholder")
+            .attr("data-asset-source-policy", images.field && images.field[dimension] ? "input_asset" : "neutral_placeholder")
+            .attr("data-anchor", "bar-endpoint-centerline")
+            .attr("data-category", dimension)
+            .attr("data-collision-rule", "avoid neighboring endpoint badges and value labels")
+            .attr("data-bbox", `${(x - iconRadius).toFixed(1)} ${(y - iconRadius).toFixed(1)} ${(iconRadius * 2).toFixed(1)} ${(iconRadius * 2).toFixed(1)}`)
+            .attr("data-bbox-policy", "circle centered at bar endpoint defines visible reserved bbox")
+            .attr("data-mask-policy", "input/retrieved icon is clipped to endpoint circle")
+            .attr("data-no-embedded-raster", images.field && images.field[dimension] ? "input_asset_only" : "true")
+            .attr("data-no-copied-reference-art", "true");
+
+        const clipId = `lollipop02-icon-clip-${i}`;
+        defs.append("clipPath")
+            .attr("id", clipId)
+            .append("circle")
+            .attr("cx", x)
+            .attr("cy", y)
+            .attr("r", iconRadius * 0.74);
+
+        iconGroup.append("circle")
+            .attr("class", "endpoint-badge-bg")
+            .attr("cx", x)
+            .attr("cy", y)
+            .attr("r", iconRadius)
+            .attr("fill", "#FFFDF8")
+            .attr("stroke", forest)
+            .attr("stroke-width", 2)
+            .attr("filter", "url(#lollipop02-soft-shadow)");
+
+        if (images.field && images.field[dimension]) {
+            iconGroup.append("image")
+                .attr("class", "image")
+                .attr("data-type", "input_category_icon")
+                .attr("data-asset-source", "input_asset")
+                .attr("data-no-copied-reference-art", "true")
+                .attr("x", x - iconRadius * 0.72)
+                .attr("y", y - iconRadius * 0.72)
+                .attr("width", iconRadius * 1.44)
+                .attr("height", iconRadius * 1.44)
+                .attr("clip-path", `url(#${clipId})`)
+                .attr("preserveAspectRatio", "xMidYMid meet")
+                .attr("href", images.field[dimension])
+                .attr("xlink:href", images.field[dimension]);
+        } else {
+            iconGroup.append("circle")
+                .attr("cx", x)
+                .attr("cy", y)
+                .attr("r", iconRadius * 0.30)
+                .attr("fill", primaryColor)
+                .attr("opacity", 0.28);
+        }
+
+        const compactValue = chartUtils.format.scaledText(value);
+        const formattedValue = `${compactValue}${valueUnit ? ` ${valueUnit}` : ""}`;
+        const splitLongUnit = Boolean(valueUnit && String(valueUnit).length > 5);
+        const valueLabelFont = splitLongUnit ? Math.min(valueFont, 19) : valueFont;
+        const valueLabelMaxWidth = Math.min(Math.max(bandwidth * 1.18, barWidth * 2.1), 150);
+        const valueText = svg.append("text")
+            .attr("class", "value endpoint-value")
+            .attr("data-role", "endpoint_value_label")
+            .attr("data-category", dimension)
+            .attr("data-value", value)
+            .attr("data-label-layout", splitLongUnit ? "stacked-value-unit" : "single-line")
+            .attr("x", x)
+            .attr("y", y - iconRadius - (splitLongUnit ? 24 : 12))
+            .attr("text-anchor", "middle")
+            .attr("font-family", typography.annotation.font_family || "Arial, Helvetica, sans-serif")
+            .attr("font-size", valueLabelFont)
+            .attr("font-weight", 800)
+            .attr("fill", deepAccent);
+        if (splitLongUnit) {
+            valueText.append("tspan")
+                .attr("x", x)
+                .text(compactValue);
+            valueText.append("tspan")
+                .attr("x", x)
+                .attr("dy", 15)
+                .attr("font-size", Math.max(10, Math.min(13, valueLabelFont - 4)))
+                .attr("font-weight", 700)
+                .text(valueUnit);
+        } else {
+            const estimatedValueWidth = formattedValue.length * valueLabelFont * 0.58;
+            if (estimatedValueWidth > valueLabelMaxWidth) {
+                valueText
+                    .attr("textLength", valueLabelMaxWidth)
+                    .attr("lengthAdjust", "spacingAndGlyphs");
+            }
+            valueText.text(formattedValue);
+        }
+
+        const label = String(dimension);
+        const labelLines = wrapLabel(label, Math.max(7, Math.floor(bandwidth / 6.0)), 3);
+        const text = svg.append("text")
+            .attr("class", "label category-label")
+            .attr("data-role", "bottom_category_label")
+            .attr("data-category", dimension)
+            .attr("x", x)
+            .attr("y", baselineY + 27)
+            .attr("text-anchor", "middle")
+            .attr("font-family", typography.label.font_family || "Arial, Helvetica, sans-serif")
+            .attr("font-size", labelFont)
+            .attr("font-weight", 600)
+            .attr("fill", "#1F1F1F");
+        labelLines.forEach((line, lineIndex) => {
+            const estimatedWidth = line.length * labelFont * 0.56;
+            const fitAttrs = estimatedWidth > labelMaxWidth
+                ? { textLength: labelMaxWidth, lengthAdjust: "spacingAndGlyphs" }
+                : {};
+            const tspan = text.append("tspan")
+                .attr("x", x)
+                .attr("dy", lineIndex === 0 ? 0 : labelFont * 1.12)
+                .text(line);
+            Object.keys(fitAttrs).forEach(attr => tspan.attr(attr, fitAttrs[attr]));
+        });
+        text.append("title").text(label);
+    });
+
+    function displayFieldName(field, unit) {
+        const spaced = String(field || "Incidents").replace(/([a-z])([A-Z])/g, "$1 $2");
+        const normalized = /incident/i.test(spaced) ? "Incidents" : spaced;
+        return unit ? `${normalized} (${unit})` : normalized;
+    }
+
+    function getTemporalOrdering(rows, field) {
+        const values = rows.map(row => row[field]);
+        const fieldName = String(field || "").toLowerCase();
+        const hasTemporalName = /(year|date|month|quarter|season|timestamp|time|period|week|day)/.test(fieldName);
+        const parsed = values.map(value => temporalKey(value));
+        const parsedCount = parsed.filter(value => Number.isFinite(value)).length;
+        const isTemporal = hasTemporalName || (values.length > 0 && parsedCount === values.length);
+        return {
+            isTemporal,
+            rule: hasTemporalName ? "chronological-by-temporal-field-name" : "chronological-by-parseable-temporal-values",
+            key(value) {
+                const key = temporalKey(value);
+                return Number.isFinite(key) ? key : Number.MAX_SAFE_INTEGER;
+            }
+        };
+    }
+
+    function temporalKey(value) {
+        const raw = String(value == null ? "" : value).trim();
+        const lower = raw.toLowerCase();
+        const seasonOrder = {
+            spring: 1,
+            summer: 2,
+            autumn: 3,
+            fall: 3,
+            winter: 4
+        };
+        if (Object.prototype.hasOwnProperty.call(seasonOrder, lower)) {
+            return seasonOrder[lower];
+        }
+        const monthOrder = {
+            january: 1, jan: 1,
+            february: 2, feb: 2,
+            march: 3, mar: 3,
+            april: 4, apr: 4,
+            may: 5,
+            june: 6, jun: 6,
+            july: 7, jul: 7,
+            august: 8, aug: 8,
+            september: 9, sep: 9, sept: 9,
+            october: 10, oct: 10,
+            november: 11, nov: 11,
+            december: 12, dec: 12
+        };
+        if (Object.prototype.hasOwnProperty.call(monthOrder, lower)) {
+            return monthOrder[lower];
+        }
+        const quarterMatch = lower.match(/(?:q([1-4])|quarter\s*([1-4]))/);
+        if (quarterMatch) {
+            return +(quarterMatch[1] || quarterMatch[2]);
+        }
+        const yearMatch = lower.match(/\b(19|20)\d{2}\b/);
+        if (yearMatch && !Number.isNaN(+yearMatch[0])) {
+            return +yearMatch[0];
+        }
+        const parsedDate = Date.parse(raw);
+        if (!Number.isNaN(parsedDate) && /[-/,]|\b(jan|feb|mar|apr|may|jun|jul|aug|sep|sept|oct|nov|dec)/i.test(raw)) {
+            return parsedDate;
+        }
+        return Number.NaN;
+    }
+
+    function wrapLabel(label, maxChars, maxLines) {
+        const words = String(label)
+            .replace(/\//g, "/ ")
+            .replace(/\(/g, " (")
+            .replace(/\)/g, ") ")
+            .split(/\s+/)
+            .filter(Boolean);
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const candidate = current ? `${current} ${word}` : word;
+            if (candidate.length <= maxChars || !current) {
+                current = candidate;
+            } else {
+                lines.push(current);
+                current = word;
+            }
+        });
+        if (current) lines.push(current);
+        if (lines.length <= maxLines) return lines;
+        const kept = lines.slice(0, maxLines);
+        kept[maxLines - 1] = `${kept[maxLines - 1].slice(0, Math.max(3, maxChars - 1))}...`;
+        return kept;
+    }
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type15_lollipop_chart/lollipop_plain_chart_01.js

@@ -0,0 +1,633 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Lollipop Chart",
+    "chart_name": "lollipop_plain_chart_01",
+    "is_composite": false,
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical", "temporal"], ["numerical"]],
+    "required_fields_range": [[2, 24], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["opacity", "stroke"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const chartData = (jsonData.data && jsonData.data.data) || [];
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsFormatSample = chartUtils.format.autoText;
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        label: { font_family: "Arial", font_size: "12px", font_weight: "600" },
+        annotation: { font_family: "Arial", font_size: "11px", font_weight: "600" }
+    };
+    const sourceColors = jsonData.colors || {};
+    const colorOther = sourceColors.other || {};
+
+    d3.select(containerSelector).html("");
+
+    const width = Number(variables.width) || 600;
+    const baseHeight = Number(variables.height) || 600;
+    const height = Math.max(baseHeight, Math.max(chartData.length, 1) * 32 + 168);
+    const textColor = sourceColors.text_color || "#273044";
+    const primaryColor = colorOther.primary || "#f7941d";
+    const canvasColor = "none";
+    const panelColor = "none";
+    const inkColor = "#123724";
+    const mutedColor = "#69716d";
+    const deepGreen = "#083f1f";
+    const softGreen = "#edf4eb";
+    const gridColor = "#dfe2dc";
+    const trackColor = "#f3d8df";
+    const pinkStart = d3.interpolateRgb(primaryColor, "#de3f62")(0.72);
+    const pinkEnd = "#f4a7b5";
+    const labelTypography = typography.label || {};
+    const valueTypography = typography.annotation || labelTypography;
+    const labelFamily = labelTypography.font_family || "Arial";
+    const valueFamily = valueTypography.font_family || "Arial";
+    const labelWeight = labelTypography.font_weight || "600";
+    const valueWeight = valueTypography.font_weight || "600";
+    const baseLabelSize = parseFloat(labelTypography.font_size) || 12;
+    const baseValueSize = parseFloat(valueTypography.font_size) || 11;
+
+    function rgba(color, opacity) {
+        const c = d3.rgb(color);
+        return `rgba(${c.r}, ${c.g}, ${c.b}, ${opacity})`;
+    }
+
+    function humanizeField(name) {
+        return String(name || "")
+            .replace(/_/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    const xColumn = chartUtils.schema.channel(jsonData, "x", { fallbackIndex: 0 }).raw || {};
+    const yColumn = chartUtils.schema.channel(jsonData, "y", { fallbackIndex: 1 }).raw || {};
+    const xField = xColumn.name || "dimension";
+    const yField = yColumn.name || "value";
+    const xUnit = xColumn.unit && xColumn.unit !== "none" ? xColumn.unit : "";
+    const yUnit = yColumn.unit && yColumn.unit !== "none" ? yColumn.unit : "";
+
+    function parseTemporalSortValue(value) {
+        const text = String(value ?? "").trim();
+        const year = text.match(/^(-?\d{4})$/);
+        if (year) return Number(year[1]) * 10000;
+        const date = text.match(/^(-?\d{4})[-/.](\d{1,2})(?:[-/.](\d{1,2}))?$/);
+        if (date) return Number(date[1]) * 10000 + Number(date[2]) * 100 + Number(date[3] || 1);
+        const seasonOrder = { winter: 1, spring: 2, summer: 3, fall: 4, autumn: 4 };
+        let season = text.match(/^(winter|spring|summer|fall|autumn)\s+(-?\d{4})$/i);
+        if (season) return Number(season[2]) * 10 + seasonOrder[season[1].toLowerCase()];
+        season = text.match(/^(-?\d{4})\s+(winter|spring|summer|fall|autumn)$/i);
+        if (season) return Number(season[1]) * 10 + seasonOrder[season[2].toLowerCase()];
+        return NaN;
+    }
+
+    function formatNumber(value) {
+        const numericValue = Number(value);
+        if (!Number.isFinite(numericValue)) return String(value ?? "");
+        const absValue = Math.abs(numericValue);
+        if (absValue >= 1000000000) return `${d3.format(".3~g")(numericValue / 1000000000)}B`;
+        if (absValue >= 1000000) return `${d3.format(".3~g")(numericValue / 1000000)}M`;
+        if (absValue >= 1000) return `${d3.format(".3~g")(numericValue / 1000)}K`;
+        return d3.format(",.4~g")(numericValue);
+    }
+
+    function formatLocalValue(value, includeUnit = true) {
+        const formatted = formatNumber(value);
+        if (!includeUnit || !yUnit) return formatted;
+        const prefixMatch = String(yUnit).match(/^([$€£¥])(.+)?$/);
+        if (prefixMatch) return `${prefixMatch[1]}${formatted}${prefixMatch[2] || ""}`;
+        if (yUnit === "%") return `${formatted}%`;
+        return `${formatted} ${yUnit}`;
+    }
+
+    function formatDimension(row) {
+        const value = row[xField];
+        return xUnit ? `${value} ${xUnit}` : String(value ?? "");
+    }
+
+    function formatFieldName(name, fallback) {
+        const text = String(name || fallback || "Value")
+            .replace(/[_-]+/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+        return text || fallback || "Value";
+    }
+
+    const xLabel = formatFieldName(xColumn.label || xColumn.name, "Category");
+    const yLabel = formatFieldName(yColumn.label || yColumn.name, "Value");
+
+    const rows = chartData.map((d, index) => {
+        const label = formatDimension(d);
+        return {
+            ...d,
+            __index: index,
+            __label: label,
+            __key: `${label}__${index}`,
+            __value: Number(d[yField]),
+            __time: parseTemporalSortValue(d[xField])
+        };
+    }).filter(d => Number.isFinite(d.__value));
+
+    if (!rows.length) return;
+
+    const isTemporal = xColumn.data_type === "temporal" || rows.every(d => Number.isFinite(d.__time));
+    const sortedData = [...rows].sort((a, b) => {
+        if (isTemporal && Number.isFinite(a.__time) && Number.isFinite(b.__time)) {
+            return a.__time - b.__time;
+        }
+        const byValue = b.__value - a.__value;
+        if (byValue !== 0) return byValue;
+        return String(a.__label).localeCompare(String(b.__label));
+    });
+    const sortMode = isTemporal ? "temporal" : "value_desc";
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg");
+
+    const defs = svg.append("defs");
+    const cardShadow = defs.append("filter")
+        .attr("id", "lollipop_plain_01_card_shadow")
+        .attr("x", "-8%")
+        .attr("y", "-10%")
+        .attr("width", "116%")
+        .attr("height", "124%");
+    cardShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 2)
+        .attr("stdDeviation", 2.2)
+        .attr("flood-color", "#5b695f")
+        .attr("flood-opacity", 0.12);
+
+    const measure = svg.append("g").attr("visibility", "hidden");
+    function measureLabelText(text, fontSize, family, weight) {
+        const node = measure.append("text")
+            .style("font-family", family)
+            .style("font-size", `${fontSize}px`)
+            .style("font-weight", weight)
+            .text(text)
+            .node();
+        const bboxWidth = node ? node.textContent.length * 7 : 0;
+        const approximateWidth = String(text).length * fontSize * 0.55;
+        const measuredWidth = Math.max(bboxWidth || 0, approximateWidth);
+        measure.selectAll("text").remove();
+        return measuredWidth;
+    }
+
+    function breakLongWord(word, maxWidth, fontSize, family, weight) {
+        const lines = [];
+        let current = "";
+        for (const char of String(word)) {
+            const next = current + char;
+            if (current && measureLabelText(next, fontSize, family, weight) > maxWidth) {
+                lines.push(`${current}-`);
+                current = char;
+            } else {
+                current = next;
+            }
+        }
+        if (current) lines.push(current);
+        return lines.length ? lines : [String(word)];
+    }
+
+    function wrapText(text, maxWidth, fontSize, family, weight) {
+        const words = String(text || "").split(/\s+/).filter(Boolean);
+        if (!words.length) return [String(text || "")];
+        const lines = [];
+        let current = "";
+        for (const word of words) {
+            const candidate = current ? `${current} ${word}` : word;
+            if (measureLabelText(candidate, fontSize, family, weight) <= maxWidth) {
+                current = candidate;
+                continue;
+            }
+            if (current) lines.push(current);
+            if (measureLabelText(word, fontSize, family, weight) <= maxWidth) {
+                current = word;
+            } else {
+                const broken = breakLongWord(word, maxWidth, fontSize, family, weight);
+                lines.push(...broken.slice(0, -1));
+                current = broken[broken.length - 1];
+            }
+        }
+        if (current) lines.push(current);
+        return lines.length ? lines : [String(text || "")];
+    }
+
+    const n = sortedData.length;
+    const labelFontSize = Math.max(8.5, Math.min(baseLabelSize, n > 18 ? 8.8 : n > 12 ? 9.8 : 12));
+    const valueFontSize = Math.max(8.5, Math.min(baseValueSize, n > 18 ? 8.8 : n > 12 ? 9.6 : 11.2));
+    const longestLabelWidth = Math.max(
+        0,
+        ...sortedData.map(d => measureLabelText(d.__label, labelFontSize, labelFamily, labelWeight))
+    );
+    const valueLabels = sortedData.map(d => formatLocalValue(d.__value, true));
+    const maxValueWidth = Math.max(
+        44,
+        ...valueLabels.map(label => measureLabelText(label, valueFontSize, valueFamily, valueWeight))
+    );
+    const cardX = Math.max(22, Math.min(34, width * 0.055));
+    const cardY = 6;
+    const cardWidth = width - cardX * 2;
+    const cardHeight = height - cardY * 2;
+    const headerHeight = 10;
+    const footerHeight = 26;
+    const plotY = cardY + headerHeight + 10;
+    const plotBottom = cardY + cardHeight - footerHeight - 20;
+    const innerHeight = Math.max(180, plotBottom - plotY);
+    const iconSlotSize = Math.max(26, Math.min(54, innerHeight / Math.max(n, 1) * 0.56));
+    const iconColumnWidth = iconSlotSize + 20;
+    const leftMargin = Math.max(146, Math.min(Math.min(166, cardWidth * 0.31), longestLabelWidth + iconColumnWidth + 20));
+    const rightMargin = Math.max(58, Math.min(86, maxValueWidth + 28));
+    const plotX = cardX + leftMargin;
+    const innerWidth = Math.max(220, cardWidth - leftMargin - rightMargin);
+    const labelMaxWidth = Math.max(84, leftMargin - iconColumnWidth - 18);
+
+    const maxValue = Math.max(1, d3.max(sortedData, d => Math.max(0, d.__value)) || 1);
+    const xScale = d3.scaleLinear()
+        .domain([0, maxValue])
+        .nice(5)
+        .range([0, innerWidth]);
+    const yScale = d3.scaleBand()
+        .domain(sortedData.map(d => d.__key))
+        .range([0, innerHeight])
+        .paddingInner(n > 16 ? 0.18 : 0.26)
+        .paddingOuter(0.16);
+    const radius = Math.max(4.8, Math.min(9.5, yScale.bandwidth() * 0.32));
+    const stemWidth = Math.max(5.4, Math.min(10.5, yScale.bandwidth() * 0.31));
+
+    function fittedSize(text, maxWidth, startSize, minSize, family, weight) {
+        let fontSize = startSize;
+        while (fontSize > minSize && measureLabelText(text, fontSize, family, weight) > maxWidth) {
+            fontSize -= 0.5;
+        }
+        return fontSize;
+    }
+
+    function markColor(index) {
+        const t = n <= 1 ? 0.5 : index / (n - 1);
+        return d3.interpolateRgb(pinkStart, pinkEnd)(Math.min(0.9, t * 0.85));
+    }
+
+    svg.append("rect")
+        .attr("class", "chart-canvas")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", canvasColor)
+        .attr("opacity", 0);
+
+    svg.append("rect")
+        .attr("class", "chart-style-panel")
+        .attr("x", cardX)
+        .attr("y", cardY)
+        .attr("width", cardWidth)
+        .attr("height", cardHeight)
+        .attr("rx", 8)
+        .attr("ry", 8)
+        .attr("fill", panelColor)
+        .attr("stroke", "none")
+        .attr("stroke-width", 0)
+        .attr("filter", null)
+        .attr("opacity", 0);
+
+    const fieldText = yLabel.toUpperCase();
+
+    svg.append("rect")
+        .attr("class", "plot-soft-wash")
+        .attr("x", plotX - 16)
+        .attr("y", plotY - 10)
+        .attr("width", innerWidth + rightMargin - 2)
+        .attr("height", innerHeight + 34)
+        .attr("rx", 8)
+        .attr("ry", 8)
+        .attr("fill", "#fffefa")
+        .attr("opacity", 0);
+
+    svg.append("text")
+        .attr("class", "axis-title")
+        .attr("x", plotX + innerWidth + rightMargin - 18)
+        .attr("y", plotY - 18)
+        .attr("text-anchor", "end")
+        .style("font-family", valueFamily)
+        .style("font-size", `${Math.max(8.5, valueFontSize * 0.95)}px`)
+        .style("font-weight", "800")
+        .style("fill", "#d63355")
+        .text(yUnit && yUnit !== "$" && yUnit !== "%" ? `${fieldText} (${yUnit})` : fieldText);
+
+    const rowCentersAbs = sortedData.map(d => plotY + yScale(d.__key) + yScale.bandwidth() / 2);
+    let illustrationSlotWidth = Math.max(104, Math.min(cardWidth * 0.25, innerWidth * 0.48));
+    let illustrationSlotHeight = Math.max(86, Math.min(cardHeight * 0.24, innerHeight * 0.26));
+    const valueSafeRight = plotX + innerWidth + rightMargin - 10;
+    const illustrationSlotX = Math.max(
+        plotX + innerWidth * 0.70,
+        valueSafeRight - illustrationSlotWidth
+    );
+    let illustrationSlotY = plotY + innerHeight - illustrationSlotHeight - 88;
+    let illustrationSlotOpacity = 0.34;
+    let illustrationCollisionResult = "visible_lower_right_body_slot_clear_of_axis_and_endpoint_values";
+    if (n <= 4 && rowCentersAbs.length > 1) {
+        const candidateGaps = rowCentersAbs.slice(0, -1).map((center, index) => ({
+            top: center + 34,
+            bottom: rowCentersAbs[index + 1] - 34,
+            index
+        })).filter(gap => gap.bottom - gap.top >= Math.max(64, illustrationSlotHeight * 0.72));
+        if (candidateGaps.length) {
+            const gap = candidateGaps[candidateGaps.length - 1];
+            illustrationSlotHeight = Math.min(illustrationSlotHeight, gap.bottom - gap.top);
+            illustrationSlotY = gap.top + (gap.bottom - gap.top - illustrationSlotHeight) / 2;
+            illustrationSlotOpacity = 0.28;
+            illustrationCollisionResult = "visible_shrunk_between_sparse_row_centerlines_clear_of_labels";
+        }
+    }
+    const axisSafeTop = plotY + innerHeight - illustrationSlotHeight - 38;
+    if (illustrationSlotY > axisSafeTop) {
+        illustrationSlotY = axisSafeTop;
+    }
+    const rowGapHeight = yScale.step ? yScale.step() - yScale.bandwidth() : 0;
+    if (n > 8 && rowGapHeight < illustrationSlotHeight * 0.42) {
+        illustrationSlotOpacity = 0.11;
+        illustrationCollisionResult = "low_opacity_dense_rows_reserved_slot_kept_semantic_without_competing_with_marks";
+    }
+    const illustrationSlot = svg.append("g")
+        .attr("class", "reserved-asset-slot right-illustration-slot")
+        .attr("data-asset-slot", "right_illustration_slot")
+        .attr("data-reserved-slot", "right_illustration_slot")
+        .attr("data-slot-policy", "image2_asset_or_input_asset_or_neutral_placeholder")
+        .attr("data-slot-source-policy", "image2-generated-or-input-provided")
+        .attr("data-anchor", "lower-right-body-safe-area")
+        .attr("data-bbox", `${illustrationSlotX.toFixed(1)} ${illustrationSlotY.toFixed(1)} ${illustrationSlotWidth.toFixed(1)} ${illustrationSlotHeight.toFixed(1)}`)
+        .attr("data-mask", "rounded-abstract-placeholder")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true")
+        .attr("data-collision-rule", "lower-right body reserved slot stays outside label column and axis; use low opacity or sparse-row gap placement to avoid endpoint values stems axis ticks category labels title subtitle and right header callout")
+        .attr("data-collision-result", illustrationCollisionResult)
+        .attr("data-slot-owner", "chart_body")
+        .attr("transform", `translate(${illustrationSlotX}, ${illustrationSlotY})`)
+        .attr("opacity", illustrationSlotOpacity)
+        .style("pointer-events", "none");
+    illustrationSlot.append("rect")
+        .attr("class", "right-illustration-slot-mask")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", illustrationSlotWidth)
+        .attr("height", illustrationSlotHeight)
+        .attr("rx", Math.max(18, illustrationSlotWidth * 0.16))
+        .attr("ry", Math.max(18, illustrationSlotWidth * 0.16))
+        .attr("fill", rgba("#f5eadf", 0.50))
+        .attr("stroke", rgba(deepGreen, 0.16))
+        .attr("stroke-width", 1.1)
+        .attr("stroke-dasharray", "5,7");
+    illustrationSlot.append("ellipse")
+        .attr("cx", illustrationSlotWidth * 0.66)
+        .attr("cy", illustrationSlotHeight * 0.60)
+        .attr("rx", illustrationSlotWidth * 0.32)
+        .attr("ry", illustrationSlotHeight * 0.38)
+        .attr("fill", rgba("#7eae70", 0.18));
+    illustrationSlot.append("ellipse")
+        .attr("cx", illustrationSlotWidth * 0.34)
+        .attr("cy", illustrationSlotHeight * 0.50)
+        .attr("rx", illustrationSlotWidth * 0.28)
+        .attr("ry", illustrationSlotHeight * 0.44)
+        .attr("fill", rgba(pinkStart, 0.14));
+    illustrationSlot.append("path")
+        .attr("d", `M ${illustrationSlotWidth * 0.18} ${illustrationSlotHeight * 0.72} C ${illustrationSlotWidth * 0.38} ${illustrationSlotHeight * 0.42}, ${illustrationSlotWidth * 0.54} ${illustrationSlotHeight * 0.70}, ${illustrationSlotWidth * 0.82} ${illustrationSlotHeight * 0.28}`)
+        .attr("fill", "none")
+        .attr("stroke", rgba("#d63355", 0.26))
+        .attr("stroke-width", Math.max(6, illustrationSlotWidth * 0.045))
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round");
+    [[0.18, 0.18], [0.30, 0.18], [0.42, 0.18], [0.18, 0.30], [0.30, 0.30], [0.42, 0.30]].forEach(([cx, cy]) => {
+        illustrationSlot.append("circle")
+            .attr("cx", illustrationSlotWidth * cx)
+            .attr("cy", illustrationSlotHeight * cy)
+            .attr("r", Math.max(2.2, illustrationSlotWidth * 0.018))
+            .attr("fill", rgba(deepGreen, 0.22));
+    });
+
+    const g = svg.append("g")
+        .attr("class", "lollipop-plot")
+        .attr("data-count", sortedData.length)
+        .attr("data-sort-mode", sortMode)
+        .attr("data-max-value", maxValue)
+        .attr("transform", `translate(${plotX}, ${plotY})`);
+
+    const tickValues = xScale.ticks(Math.max(4, Math.min(6, Math.floor(innerWidth / 70)))).filter((value, index, array) => {
+        return index === 0 || Math.abs(value - array[index - 1]) > 1e-9;
+    });
+
+    tickValues.forEach(tick => {
+        const x = xScale(tick);
+        g.append("line")
+            .attr("class", "gridline")
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", 0)
+            .attr("y2", innerHeight)
+            .attr("stroke", tick === 0 ? rgba(mutedColor, 0.38) : rgba(gridColor, 0.96))
+            .attr("stroke-width", tick === 0 ? 1.2 : 1)
+            .attr("stroke-dasharray", tick === 0 ? null : "4,5");
+        g.append("text")
+            .attr("class", "axis-tick")
+            .attr("x", x)
+            .attr("y", innerHeight + 24)
+            .attr("text-anchor", "middle")
+            .style("font-family", valueFamily)
+            .style("font-size", `${Math.max(8, valueFontSize * 0.9)}px`)
+            .style("fill", rgba(mutedColor, 0.78))
+            .text(formatLocalValue(tick, false));
+    });
+
+    g.append("text")
+        .attr("class", "axis-title axis-title-bottom")
+        .attr("x", innerWidth / 2)
+        .attr("y", innerHeight + 45)
+        .attr("text-anchor", "middle")
+        .style("font-family", valueFamily)
+        .style("font-size", `${Math.max(9, valueFontSize * 0.95)}px`)
+        .style("font-weight", valueWeight)
+        .style("fill", rgba(mutedColor, 0.82))
+        .text(yUnit && yUnit !== "$" && yUnit !== "%" ? `${humanizeField(yField)} (${yUnit})` : humanizeField(yField));
+
+    sortedData.forEach((d, i) => {
+        const y = yScale(d.__key) + yScale.bandwidth() / 2;
+        const x = xScale(Math.max(0, d.__value));
+        const rowColor = markColor(i);
+        const valueLabel = valueLabels[i];
+        const directValueSize = Math.max(valueFontSize + 1.2, valueFontSize * 1.12);
+        const valueWidth = measureLabelText(valueLabel, directValueSize, valueFamily, "800") + 13;
+        const labelToRight = x + radius + 10 + valueWidth <= innerWidth + rightMargin - 12;
+        const valueX = labelToRight ? x + radius + 11 : Math.max(8, x - radius - 11);
+
+        g.append("line")
+            .attr("class", "stem-track")
+            .attr("data-label", d.__label)
+            .attr("data-value", d.__value)
+            .attr("data-index", i)
+            .attr("data-rank", i + 1)
+            .attr("data-sort-mode", sortMode)
+            .attr("x1", 0)
+            .attr("x2", innerWidth)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", trackColor)
+            .attr("stroke-width", Math.max(2, stemWidth * 0.72))
+            .attr("stroke-linecap", "round")
+            .attr("opacity", 0.14);
+
+        g.append("line")
+            .attr("class", "stem mark")
+            .attr("data-label", d.__label)
+            .attr("data-value", d.__value)
+            .attr("data-index", i)
+            .attr("data-rank", i + 1)
+            .attr("data-sort-mode", sortMode)
+            .attr("x1", 0)
+            .attr("x2", x)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", rowColor)
+            .attr("stroke-width", stemWidth)
+            .attr("stroke-linecap", "round")
+            .attr("opacity", variables.has_opacity ? 0.88 : 0.98);
+
+        g.append("circle")
+            .attr("class", "dot mark")
+            .attr("data-label", d.__label)
+            .attr("data-value", d.__value)
+            .attr("data-index", i)
+            .attr("data-rank", i + 1)
+            .attr("data-sort-mode", sortMode)
+            .attr("cx", x)
+            .attr("cy", y)
+            .attr("r", Math.max(3.5, radius * 0.72))
+            .attr("fill", rowColor)
+            .attr("stroke", "#ffffff")
+            .attr("stroke-width", variables.has_stroke ? 2 : 1.2);
+        g.append("text")
+            .attr("class", "value")
+            .attr("data-label", d.__label)
+            .attr("data-value", d.__value)
+            .attr("data-index", i)
+            .attr("data-rank", i + 1)
+            .attr("data-sort-mode", sortMode)
+            .attr("x", valueX)
+            .attr("y", y)
+            .attr("text-anchor", labelToRight ? "start" : "end")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", valueFamily)
+            .style("font-size", `${directValueSize}px`)
+            .style("font-weight", "800")
+            .style("fill", "#d63355")
+            .text(valueLabel);
+
+        const labelX = -labelMaxWidth - 8;
+        const iconX = labelX - iconSlotSize / 2 - 14;
+        const slot = g.append("g")
+            .attr("class", "reserved-asset-slot category-icon-slot")
+            .attr("data-asset-slot", "category_icon_slot")
+            .attr("data-reserved-slot", "category_icon_slot")
+            .attr("data-slot-policy", "input_asset_or_image2_asset_or_neutral_placeholder")
+            .attr("data-anchor", "row-centerline-left-of-category-label")
+            .attr("data-collision-rule", "rounded-square slot stays on row centerline; avoid category label stem title and axis")
+            .attr("data-mask", "rounded-square-initial-placeholder")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true")
+            .attr("data-label", d.__label)
+            .attr("data-value", d.__value)
+            .attr("data-bbox", `${(plotX + iconX - iconSlotSize / 2).toFixed(1)} ${(plotY + y - iconSlotSize / 2).toFixed(1)} ${iconSlotSize.toFixed(1)} ${iconSlotSize.toFixed(1)}`)
+            .attr("transform", `translate(${iconX}, ${y})`);
+        slot.append("rect")
+            .attr("x", -iconSlotSize / 2)
+            .attr("y", -iconSlotSize / 2)
+            .attr("width", iconSlotSize)
+            .attr("height", iconSlotSize)
+            .attr("rx", Math.max(7, iconSlotSize * 0.18))
+            .attr("ry", Math.max(7, iconSlotSize * 0.18))
+            .attr("fill", "#ffffff")
+            .attr("stroke", rgba(deepGreen, 0.16))
+            .attr("stroke-width", 1.1)
+            .attr("filter", "url(#lollipop_plain_01_card_shadow)");
+        slot.append("circle")
+            .attr("r", iconSlotSize * 0.27)
+            .attr("fill", rgba(rowColor, 0.13))
+            .attr("stroke", rgba(deepGreen, 0.20))
+            .attr("stroke-width", 0.8);
+        slot.append("text")
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", labelFamily)
+            .style("font-size", `${Math.max(8.2, iconSlotSize * 0.28)}px`)
+            .style("font-weight", "800")
+            .style("fill", rgba(deepGreen, 0.72))
+            .text(String(d.__label || "").trim().charAt(0).toUpperCase());
+
+        const labelWrapWidth = Math.max(labelMaxWidth, Math.min(126, leftMargin - iconColumnWidth + 22));
+        const labelLines = wrapText(d.__label, labelWrapWidth, labelFontSize, labelFamily, labelWeight).slice(0, 2);
+        const label = g.append("text")
+            .attr("class", "label")
+            .attr("data-label", d.__label)
+            .attr("data-value", d.__value)
+            .attr("data-index", i)
+            .attr("data-rank", i + 1)
+            .attr("data-sort-mode", sortMode)
+            .attr("x", labelX)
+            .attr("y", y - ((labelLines.length - 1) * labelFontSize * 0.55))
+            .attr("text-anchor", "start")
+            .style("font-family", labelFamily)
+            .style("font-size", `${labelFontSize}px`)
+            .style("font-weight", labelWeight)
+            .style("fill", inkColor);
+        labelLines.forEach((line, lineIndex) => {
+            label.append("tspan")
+                .attr("x", labelX)
+                .attr("dy", lineIndex === 0 ? 0 : `${labelFontSize * 1.1}px`)
+                .text(line);
+        });
+    });
+
+    measure.remove();
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type15_lollipop_chart/lollipop_plain_chart_02.js

@@ -0,0 +1,606 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "lollipop chart",
+    "chart_name": "lollipop_plain_chart_02",
+    "is_composite": false,
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical", "temporal"], ["numerical"]],
+    "required_fields_range": [[2, 12], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["opacity", "stroke"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const chartData = (jsonData.data && jsonData.data.data) || [];
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsFormatSample = chartUtils.format.autoText;
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        label: { font_family: "Arial", font_size: "12px", font_weight: "600" },
+        annotation: { font_family: "Arial", font_size: "11px", font_weight: "600" }
+    };
+    const sourceColors = jsonData.colors || {};
+    const colorOther = sourceColors.other || {};
+
+    d3.select(containerSelector).html("");
+
+    const width = Number(variables.width) || 600;
+    const baseHeight = Number(variables.height) || 600;
+    const height = Math.max(baseHeight, Math.max(chartData.length, 1) * 34 + 152);
+    const textColor = sourceColors.text_color || "#0b1e3d";
+    const primaryColor = colorOther.primary || "#009b98";
+    const canvasColor = "#ffffff";
+    const panelColor = "#ffffff";
+    const inkColor = "#061c3b";
+    const mutedColor = "#66758d";
+    const gridColor = "#d9e3e8";
+    const trackColor = "#d7edf0";
+    const tealDark = d3.interpolateRgb(primaryColor, "#008884")(0.55);
+    const tealMid = "#009d9a";
+    const tealLight = "#42d0c4";
+    const labelTypography = typography.label || {};
+    const valueTypography = typography.annotation || labelTypography;
+    const labelFamily = labelTypography.font_family || "Arial";
+    const valueFamily = valueTypography.font_family || "Arial";
+    const labelWeight = labelTypography.font_weight || "600";
+    const valueWeight = valueTypography.font_weight || "600";
+    const baseLabelSize = parseFloat(labelTypography.font_size) || 12;
+    const baseValueSize = parseFloat(valueTypography.font_size) || 11;
+
+    function rgba(color, opacity) {
+        const c = d3.rgb(color);
+        return `rgba(${c.r}, ${c.g}, ${c.b}, ${opacity})`;
+    }
+
+    const xColumn = chartUtils.schema.channel(jsonData, "x", { fallbackIndex: 0 }).raw || {};
+    const yColumn = chartUtils.schema.channel(jsonData, "y", { fallbackIndex: 1 }).raw || {};
+    const xField = xColumn.name || "dimension";
+    const yField = yColumn.name || "value";
+    const xUnit = xColumn.unit && xColumn.unit !== "none" ? xColumn.unit : "";
+    const yUnit = yColumn.unit && yColumn.unit !== "none" ? yColumn.unit : "";
+
+    function parseTemporalSortValue(value) {
+        const text = String(value ?? "").trim();
+        const year = text.match(/^(-?\d{4})$/);
+        if (year) return Number(year[1]) * 10000;
+        const date = text.match(/^(-?\d{4})[-/.](\d{1,2})(?:[-/.](\d{1,2}))?$/);
+        if (date) return Number(date[1]) * 10000 + Number(date[2]) * 100 + Number(date[3] || 1);
+        const seasonOrder = { winter: 1, spring: 2, summer: 3, fall: 4, autumn: 4 };
+        let season = text.match(/^(winter|spring|summer|fall|autumn)\s+(-?\d{4})$/i);
+        if (season) return Number(season[2]) * 10 + seasonOrder[season[1].toLowerCase()];
+        season = text.match(/^(-?\d{4})\s+(winter|spring|summer|fall|autumn)$/i);
+        if (season) return Number(season[1]) * 10 + seasonOrder[season[2].toLowerCase()];
+        return NaN;
+    }
+
+    function formatNumber(value) {
+        const numericValue = Number(value);
+        if (!Number.isFinite(numericValue)) return String(value ?? "");
+        const absValue = Math.abs(numericValue);
+        if (absValue >= 1000000000) return `${d3.format(".3~g")(numericValue / 1000000000)}B`;
+        if (absValue >= 1000000) return `${d3.format(".3~g")(numericValue / 1000000)}M`;
+        if (absValue >= 1000) return `${d3.format(".3~g")(numericValue / 1000)}K`;
+        return d3.format(",.4~g")(numericValue);
+    }
+
+    function formatLocalValue(value, includeUnit = true) {
+        const formatted = formatNumber(value);
+        if (!includeUnit || !yUnit) return formatted;
+        if (yUnit === "$") return `$${formatted}`;
+        if (yUnit === "%") return `${formatted}%`;
+        return `${formatted} ${yUnit}`;
+    }
+
+    function formatDimension(row) {
+        const value = row[xField];
+        return xUnit ? `${value} ${xUnit}` : String(value ?? "");
+    }
+
+    function formatFieldName(name, fallback) {
+        const text = String(name || fallback || "Value")
+            .replace(/[_-]+/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+        return text || fallback || "Value";
+    }
+
+    const xLabel = formatFieldName(xColumn.label || xColumn.name, "Category");
+    const yLabel = formatFieldName(yColumn.label || yColumn.name, "Value");
+
+    const rows = chartData.map((d, index) => ({
+        ...d,
+        __index: index,
+        __label: formatDimension(d),
+        __value: Number(d[yField])
+    })).filter(d => Number.isFinite(d.__value));
+
+    if (!rows.length) return;
+
+    const isTemporal = xColumn.data_type === "temporal" || (
+        rows.length > 0 && rows.every(d => Number.isFinite(parseTemporalSortValue(d[xField])))
+    );
+
+    const sortedData = [...rows].sort((a, b) => {
+        if (isTemporal) {
+            const aTime = parseTemporalSortValue(a[xField]);
+            const bTime = parseTemporalSortValue(b[xField]);
+            if (Number.isFinite(aTime) && Number.isFinite(bTime)) return aTime - bTime;
+        }
+        const byValue = b.__value - a.__value;
+        if (byValue !== 0) return byValue;
+        return String(a.__label).localeCompare(String(b.__label));
+    });
+    const sortMode = isTemporal ? "temporal" : "value_desc";
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg");
+
+    const defs = svg.append("defs");
+    const cardShadow = defs.append("filter")
+        .attr("id", "lollipop_plain_02_card_shadow")
+        .attr("x", "-8%")
+        .attr("y", "-10%")
+        .attr("width", "116%")
+        .attr("height", "124%");
+    cardShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 2)
+        .attr("stdDeviation", 2.2)
+        .attr("flood-color", "#6f7481")
+        .attr("flood-opacity", 0.13);
+
+    const measure = svg.append("g").attr("visibility", "hidden");
+    function measureLabelText(text, fontSize, family, weight) {
+        const node = measure.append("text")
+            .style("font-family", family)
+            .style("font-size", `${fontSize}px`)
+            .style("font-weight", weight)
+            .text(text)
+            .node();
+        const bboxWidth = node ? node.textContent.length * 7 : 0;
+        const approximateWidth = String(text).length * fontSize * 0.55;
+        const measuredWidth = Math.max(bboxWidth || 0, approximateWidth);
+        measure.selectAll("text").remove();
+        return measuredWidth;
+    }
+
+    function breakLongWord(word, maxWidth, fontSize, family, weight) {
+        const lines = [];
+        let current = "";
+        for (const char of String(word)) {
+            const next = current + char;
+            if (current && measureLabelText(next, fontSize, family, weight) > maxWidth) {
+                lines.push(`${current}-`);
+                current = char;
+            } else {
+                current = next;
+            }
+        }
+        if (current) lines.push(current);
+        return lines.length ? lines : [String(word)];
+    }
+
+    function wrapText(text, maxWidth, fontSize, family, weight) {
+        const words = String(text || "").split(/\s+/).filter(Boolean);
+        if (!words.length) return [String(text || "")];
+        const lines = [];
+        let current = "";
+        for (const word of words) {
+            const candidate = current ? `${current} ${word}` : word;
+            if (measureLabelText(candidate, fontSize, family, weight) <= maxWidth) {
+                current = candidate;
+                continue;
+            }
+            if (current) lines.push(current);
+            if (measureLabelText(word, fontSize, family, weight) <= maxWidth) {
+                current = word;
+            } else {
+                current = word;
+            }
+        }
+        if (current) lines.push(current);
+        return lines.length ? lines : [String(text || "")];
+    }
+
+    const n = sortedData.length;
+    const labelFontSize = Math.max(8.5, Math.min(baseLabelSize, n > 9 ? 10.3 : 11.6));
+    const valueFontSize = Math.max(8.5, Math.min(baseValueSize, n > 9 ? 9.8 : 11.2));
+    const longestLabelWidth = Math.max(
+        0,
+        ...sortedData.map(d => measureLabelText(d.__label, labelFontSize, labelFamily, labelWeight))
+    );
+    const valueLabels = sortedData.map(d => formatLocalValue(d.__value, yUnit === "$" || yUnit === "%"));
+    const maxValueWidth = Math.max(
+        44,
+        ...valueLabels.map(label => measureLabelText(label, valueFontSize, valueFamily, valueWeight))
+    );
+    const cardX = Math.max(14, Math.min(22, width * 0.035));
+    const cardY = 16;
+    const cardWidth = width - cardX * 2;
+    const cardHeight = height - cardY * 2;
+    const headerHeight = 66;
+    const footerHeight = 34;
+    const plotY = cardY + headerHeight + 16;
+    const plotBottom = cardY + cardHeight - footerHeight - 12;
+    const innerHeight = Math.max(170, plotBottom - plotY);
+    const comparisonWidth = width >= 540 && n >= 7 ? Math.min(238, Math.max(206, cardWidth * 0.39)) : 0;
+    const leftMargin = Math.max(154, Math.min(Math.min(190, cardWidth * 0.34), longestLabelWidth * 0.74 + 88));
+    const rightMargin = Math.max(44, Math.min(76, maxValueWidth + 22));
+    const plotX = cardX + leftMargin;
+    const innerWidth = Math.max(166, cardWidth - leftMargin - rightMargin - comparisonWidth);
+    const labelMaxWidth = Math.max(74, leftMargin - 88);
+
+    const maxValue = Math.max(1, d3.max(sortedData, d => Math.max(0, d.__value)) || 1);
+    const xScale = d3.scaleLinear()
+        .domain([0, maxValue])
+        .nice(5)
+        .range([0, innerWidth]);
+    const yScale = d3.scaleBand()
+        .domain(sortedData.map(d => d.__label))
+        .range([0, innerHeight])
+        .paddingInner(0.28)
+        .paddingOuter(0.18);
+    const stemWidth = Math.max(8, Math.min(16, yScale.bandwidth() * 0.48));
+    const radius = Math.max(4.2, stemWidth / 2);
+
+    function fittedSize(text, maxWidth, startSize, minSize, family, weight) {
+        let fontSize = startSize;
+        while (fontSize > minSize && measureLabelText(text, fontSize, family, weight) > maxWidth) {
+            fontSize -= 0.5;
+        }
+        return fontSize;
+    }
+
+    function markColor(index) {
+        const t = n <= 1 ? 0.5 : index / (n - 1);
+        return d3.interpolateRgb(tealDark, tealLight)(Math.min(0.85, t * 0.82));
+    }
+
+    function rightRoundedBarPath(x0, x1, cy, h) {
+        const width = Math.max(0.6, x1 - x0);
+        const r = Math.min(h * 0.22, Math.max(0, width * 0.5));
+        const top = cy - h / 2;
+        const bottom = cy + h / 2;
+        if (r <= 0.2) {
+            return `M${x0},${top} H${x1} V${bottom} H${x0} Z`;
+        }
+        return `M${x0},${top} H${x1 - r} Q${x1},${top} ${x1},${cy} Q${x1},${bottom} ${x1 - r},${bottom} H${x0} Z`;
+    }
+
+    svg.append("rect")
+        .attr("class", "chart-canvas")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", canvasColor);
+
+    svg.append("rect")
+        .attr("class", "chart-style-panel")
+        .attr("x", cardX)
+        .attr("y", cardY)
+        .attr("width", cardWidth)
+        .attr("height", cardHeight)
+        .attr("rx", 8)
+        .attr("ry", 8)
+        .attr("fill", panelColor)
+        .attr("stroke", "#e4f0f3")
+        .attr("stroke-width", 0.8)
+        .attr("filter", "url(#lollipop_plain_02_card_shadow)");
+
+    const headerPillX = cardX + 22;
+    const headerPillY = cardY + 20;
+    const headerPillText = `${yLabel}${yUnit ? ` (${yUnit})` : ""}`.toUpperCase();
+    const headerPillWidth = Math.min(cardWidth - 44, Math.max(188, measureLabelText(headerPillText, 13, labelFamily, "800") + 42));
+    const headerFontSize = fittedSize(headerPillText, headerPillWidth - 48, Math.max(10, Math.min(baseLabelSize, 13)), 8.5, labelFamily, "800");
+    svg.append("rect")
+        .attr("class", "field-pill")
+        .attr("x", headerPillX)
+        .attr("y", headerPillY)
+        .attr("width", headerPillWidth)
+        .attr("height", 26)
+        .attr("rx", 7)
+        .attr("ry", 7)
+        .attr("fill", tealMid)
+        .attr("stroke", "none");
+    svg.append("circle")
+        .attr("class", "field-pill-dot")
+        .attr("data-asset-slot", "metric-pill-icon")
+        .attr("data-asset-policy", "neutral-placeholder")
+        .attr("cx", headerPillX + 16)
+        .attr("cy", headerPillY + 13)
+        .attr("r", 5.2)
+        .attr("fill", "#ffffff")
+        .attr("opacity", 0.94);
+    svg.append("text")
+        .attr("class", "field-pill-label")
+        .attr("x", headerPillX + 29)
+        .attr("y", headerPillY + 13)
+        .attr("dominant-baseline", "middle")
+        .style("font-family", labelFamily)
+        .style("font-size", `${headerFontSize}px`)
+        .style("font-weight", "800")
+        .style("fill", "#ffffff")
+        .text(headerPillText);
+
+    if (comparisonWidth > 0) {
+        const cx = cardX + cardWidth - comparisonWidth / 2 - 4;
+        const cy = plotY + innerHeight * 0.50;
+        const cr = Math.min(136, comparisonWidth * 0.62, innerHeight * 0.38);
+        const comparison = svg.append("g")
+            .attr("class", "comparison-slot")
+            .attr("data-asset-slot", "comparison-art")
+            .attr("data-asset-policy", "image2-owned")
+            .attr("data-anchor", "right-floating")
+            .attr("data-collision", "avoid-row-values-and-axis")
+            .attr("data-bbox", `${cx - cr} ${cy - cr} ${cr * 2} ${cr * 2}`);
+
+        comparison.append("circle")
+            .attr("class", "comparison-circle")
+            .attr("cx", cx)
+            .attr("cy", cy)
+            .attr("r", cr)
+            .attr("fill", "#e9f8f8")
+            .attr("stroke", "#d6eeee")
+            .attr("stroke-width", 3)
+            .attr("opacity", 0.82);
+
+        const comparisonTitle = wrapText(`${yLabel} comparison`, cr * 1.08, 15, labelFamily, "800").slice(0, 2);
+        const titleStartY = cy - cr * 0.42;
+        comparisonTitle.forEach((line, idx) => {
+            comparison.append("text")
+                .attr("class", "comparison-title")
+                .attr("x", cx - cr * 0.48)
+                .attr("y", titleStartY + idx * 17)
+                .attr("text-anchor", "start")
+                .style("font-family", labelFamily)
+                .style("font-size", `${Math.max(14, Math.min(17, cr * 0.13))}px`)
+                .style("font-weight", "800")
+                .style("fill", inkColor)
+                .text(line.toUpperCase());
+        });
+
+        const grades = [
+            ["A", "#27a647"],
+            ["B", "#77bf2f"],
+            ["C", "#f3c21b"],
+            ["D", "#f58a1f"],
+            ["E", "#ef3d2f"]
+        ];
+        grades.forEach((grade, idx) => {
+            const rowY = cy - cr * 0.06 + idx * Math.max(23, cr * 0.19);
+            const rowX = cx - cr * 0.52;
+            const rowW = cr * 0.78;
+            const arrowW = cr * 0.15;
+            const rowH = Math.max(18, cr * 0.15);
+            comparison.append("path")
+                .attr("class", "comparison-grade-row")
+                .attr("d", `M${rowX},${rowY - rowH / 2} H${rowX + rowW} L${rowX + rowW + arrowW},${rowY} L${rowX + rowW},${rowY + rowH / 2} H${rowX} Z`)
+                .attr("fill", grade[1])
+                .attr("opacity", 0.92);
+            comparison.append("text")
+                .attr("class", "comparison-grade-label")
+                .attr("x", rowX + 13)
+                .attr("y", rowY + Math.max(5, rowH * 0.28))
+                .style("font-family", labelFamily)
+                .style("font-size", `${Math.max(18, Math.min(26, cr * 0.19))}px`)
+                .style("font-weight", "800")
+                .style("fill", "#ffffff")
+                .text(grade[0]);
+        });
+    }
+
+    const g = svg.append("g")
+        .attr("class", "lollipop-plot")
+        .attr("data-count", sortedData.length)
+        .attr("data-sort-mode", sortMode)
+        .attr("transform", `translate(${plotX}, ${plotY})`);
+
+    const tickValues = xScale.ticks(5).filter((value, index, array) => {
+        return index === 0 || Math.abs(value - array[index - 1]) > 1e-9;
+    });
+
+    tickValues.forEach(tick => {
+        const x = xScale(tick);
+        g.append("line")
+            .attr("class", "gridline")
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", 0)
+            .attr("y2", innerHeight)
+            .attr("stroke", tick === 0 ? rgba(mutedColor, 0.38) : rgba(gridColor, 0.96))
+            .attr("stroke-width", tick === 0 ? 1.3 : 1)
+            .attr("stroke-dasharray", tick === 0 ? null : "3,4");
+        g.append("text")
+            .attr("class", "axis-tick")
+            .attr("x", x)
+            .attr("y", innerHeight + 24)
+            .attr("text-anchor", "middle")
+            .style("font-family", valueFamily)
+            .style("font-size", `${Math.max(8.5, valueFontSize * 0.9)}px`)
+            .style("fill", rgba(mutedColor, 0.78))
+            .text(formatLocalValue(tick, false));
+    });
+
+    if (yUnit && yUnit !== "$" && yUnit !== "%") {
+        g.append("text")
+            .attr("class", "unit-label")
+            .attr("x", innerWidth)
+            .attr("y", innerHeight + 44)
+            .attr("text-anchor", "end")
+            .style("font-family", valueFamily)
+            .style("font-size", `${Math.max(9, valueFontSize * 0.9)}px`)
+            .style("fill", rgba(mutedColor, 0.76))
+            .text(yUnit);
+    }
+
+    sortedData.forEach((d, i) => {
+        const y = yScale(d.__label) + yScale.bandwidth() / 2;
+        const x = xScale(Math.max(0, d.__value));
+        const rowColor = markColor(i);
+        const valueLabel = valueLabels[i];
+        const valueWidth = measureLabelText(valueLabel, valueFontSize, valueFamily, valueWeight) + 14;
+        const valueX = Math.min(innerWidth + 10, x + radius + 9);
+        const iconX = -leftMargin + 26;
+        const labelX = -leftMargin + 56;
+        const iconSize = Math.max(18, Math.min(24, yScale.bandwidth() * 0.62));
+
+        const iconSlot = g.append("g")
+            .attr("class", "row-category-icon-slot")
+            .attr("data-asset-slot", "row-category-icon")
+            .attr("data-asset-policy", "neutral-placeholder")
+            .attr("data-anchor", "row-centerline")
+            .attr("data-collision", "avoid-label-and-stem")
+            .attr("data-label", d.__label)
+            .attr("data-value", d.__value)
+            .attr("data-index", i)
+            .attr("data-bbox", `${iconX - iconSize / 2} ${y - iconSize / 2} ${iconSize} ${iconSize}`);
+        iconSlot.append("rect")
+            .attr("class", "row-category-icon-box")
+            .attr("x", iconX - iconSize / 2)
+            .attr("y", y - iconSize / 2)
+            .attr("width", iconSize)
+            .attr("height", iconSize)
+            .attr("rx", 4)
+            .attr("ry", 4)
+            .attr("fill", tealMid)
+            .attr("opacity", 0.96);
+        iconSlot.append("rect")
+            .attr("class", "row-category-icon-placeholder")
+            .attr("x", iconX - iconSize * 0.23)
+            .attr("y", y + iconSize * 0.15)
+            .attr("width", iconSize * 0.46)
+            .attr("height", Math.max(2, iconSize * 0.10))
+            .attr("rx", 1)
+            .attr("fill", "#ffffff")
+            .attr("opacity", 0.68);
+        iconSlot.append("circle")
+            .attr("class", "row-category-icon-anchor-dot")
+            .attr("cx", iconX)
+            .attr("cy", y - iconSize * 0.12)
+            .attr("r", Math.max(2.2, iconSize * 0.13))
+            .attr("fill", "#ffffff")
+            .attr("opacity", 0.74);
+
+        g.append("line")
+            .attr("class", "stem-track")
+            .attr("data-label", d.__label)
+            .attr("data-value", d.__value)
+            .attr("data-index", i)
+            .attr("data-sort-mode", sortMode)
+            .attr("x1", 0)
+            .attr("x2", innerWidth)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", trackColor)
+            .attr("stroke-width", 1.4)
+            .attr("opacity", 0.18)
+            .attr("stroke-linecap", "butt");
+
+        g.append("path")
+            .attr("class", "stem mark")
+            .attr("data-label", d.__label)
+            .attr("data-value", d.__value)
+            .attr("data-index", i)
+            .attr("data-sort-mode", sortMode)
+            .attr("d", rightRoundedBarPath(0, x, y, stemWidth))
+            .attr("fill", rowColor)
+            .attr("stroke", "none")
+            .attr("opacity", variables.has_opacity ? 0.88 : 0.98);
+
+        g.append("rect")
+            .attr("class", "value-pill")
+            .attr("data-label", d.__label)
+            .attr("data-value", d.__value)
+            .attr("data-index", i)
+            .attr("x", valueX)
+            .attr("y", y - valueFontSize * 0.86)
+            .attr("width", valueWidth)
+            .attr("height", valueFontSize * 1.72)
+            .attr("rx", 4)
+            .attr("ry", 4)
+            .attr("fill", "none")
+            .attr("stroke", "none")
+            .attr("opacity", 0);
+        g.append("text")
+            .attr("class", "value")
+            .attr("data-label", d.__label)
+            .attr("data-value", d.__value)
+            .attr("data-index", i)
+            .attr("data-sort-mode", sortMode)
+            .attr("x", valueX)
+            .attr("y", y)
+            .attr("text-anchor", "start")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", valueFamily)
+            .style("font-size", `${Math.max(valueFontSize, 10.2)}px`)
+            .style("font-weight", "800")
+            .style("fill", tealMid)
+            .text(valueLabel);
+
+        const labelLines = wrapText(d.__label, labelMaxWidth, labelFontSize, labelFamily, labelWeight).slice(0, 2);
+        const label = g.append("text")
+            .attr("class", "label")
+            .attr("data-label", d.__label)
+            .attr("data-value", d.__value)
+            .attr("data-index", i)
+            .attr("data-sort-mode", sortMode)
+            .attr("x", labelX)
+            .attr("y", y - ((labelLines.length - 1) * labelFontSize * 0.55))
+            .attr("text-anchor", "start")
+            .style("font-family", labelFamily)
+            .style("font-size", `${labelFontSize}px`)
+            .style("font-weight", "700")
+            .style("fill", inkColor);
+        labelLines.forEach((line, lineIndex) => {
+            label.append("tspan")
+                .attr("x", labelX)
+                .attr("dy", lineIndex === 0 ? 0 : `${labelFontSize * 1.1}px`)
+                .text(line);
+        });
+    });
+
+    measure.remove();
+    return svg.node();
+}