@diagrammo/dgmo 0.2.21 → 0.2.22

package/dist/index.cjs

@@ -3977,16 +3977,15 @@ function buildFunnelOption(parsed, textColor, colors, titleConfig, tooltipTheme)
         const val = p.value;
         const prev = prevValueMap.get(p.name) ?? val;
         const isFirst = p.dataIndex === 0;
-        let html = `<strong>${p.name}</strong>: ${val}`;
-        if (!isFirst) {
-          const stepDrop = ((1 - val / prev) * 100).toFixed(1);
-          html += `<br/>Step drop-off: ${stepDrop}%`;
-        }
-        if (!isFirst && topValue > 0) {
+        if (isFirst) return "";
+        const parts = [];
+        const stepDrop = ((1 - val / prev) * 100).toFixed(1);
+        parts.push(`Step drop-off: ${stepDrop}%`);
+        if (topValue > 0) {
           const totalDrop = ((1 - val / topValue) * 100).toFixed(1);
-          html += `<br/>Overall drop-off: ${totalDrop}%`;
+          parts.push(`Overall drop-off: ${totalDrop}%`);
         }
-        return html;
+        return parts.join("<br/>");
       }
     },
     series: [
@@ -5331,20 +5330,29 @@ function computeLegendGroups(tagGroups, _showEyeIcons) {
   const groups = [];
   for (const group of tagGroups) {
     if (group.entries.length === 0) continue;
-    const pillWidth = group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+    const pillLabel = group.alias ? `${group.name} (${group.alias})` : group.name;
+    const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+    const minPillWidth = group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+    const isDefaultValue = group.defaultValue?.toLowerCase();
     let entriesWidth = 0;
     for (const entry of group.entries) {
-      entriesWidth += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + entry.value.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+      const entryLabel = isDefaultValue === entry.value.toLowerCase() ? `${entry.value} (default)` : entry.value;
+      entriesWidth += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + entryLabel.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
     }
     const capsuleWidth = LEGEND_CAPSULE_PAD * 2 + pillWidth + 4 + entriesWidth;
     groups.push({
       name: group.name,
-      entries: group.entries.map((e) => ({ value: e.value, color: e.color })),
+      alias: group.alias,
+      entries: group.entries.map((e) => ({
+        value: e.value,
+        color: e.color,
+        isDefault: group.defaultValue?.toLowerCase() === e.value.toLowerCase() || void 0
+      })),
       x: 0,
       y: 0,
       width: capsuleWidth,
       height: LEGEND_HEIGHT,
-      minifiedWidth: pillWidth,
+      minifiedWidth: minPillWidth,
       minifiedHeight: LEGEND_HEIGHT
     });
   }
@@ -5377,19 +5385,21 @@ function layoutOrg(parsed, hiddenCounts, activeTagGroup, hiddenAttributes) {
     if (legendGroups2.length === 0) {
       return { nodes: [], edges: [], containers: [], legend: [], width: 0, height: 0 };
     }
-    let cx = MARGIN;
+    let cy = MARGIN;
+    let maxWidth2 = 0;
     for (const g of legendGroups2) {
-      g.x = cx;
-      g.y = MARGIN;
-      cx += g.minifiedWidth + LEGEND_GROUP_GAP;
+      g.x = MARGIN;
+      g.y = cy;
+      cy += LEGEND_HEIGHT + LEGEND_GROUP_GAP;
+      if (g.width > maxWidth2) maxWidth2 = g.width;
     }
     return {
       nodes: [],
       edges: [],
       containers: [],
       legend: legendGroups2,
-      width: cx - LEGEND_GROUP_GAP + MARGIN,
-      height: LEGEND_HEIGHT + MARGIN * 2
+      width: maxWidth2 + MARGIN * 2,
+      height: cy - LEGEND_GROUP_GAP + MARGIN
     };
   }
   injectDefaultMetadata(parsed.roots, parsed.tagGroups);
@@ -5898,7 +5908,7 @@ function layoutOrg(parsed, hiddenCounts, activeTagGroup, hiddenAttributes) {
   const legendGroups = computeLegendGroups(parsed.tagGroups, showEyeIcons);
   let finalWidth = totalWidth;
   let finalHeight = totalHeight;
-  const legendPosition = parsed.options?.["legend-position"] ?? "bottom";
+  const legendPosition = parsed.options?.["legend-position"] ?? "top";
   const visibleGroups = activeTagGroup != null ? legendGroups.filter((g) => g.name.toLowerCase() === activeTagGroup.toLowerCase()) : legendGroups;
   const effectiveW = (g) => activeTagGroup != null ? g.width : g.minifiedWidth;
   const effectiveH = (g) => activeTagGroup != null ? g.height : g.minifiedHeight;
@@ -5926,22 +5936,23 @@ function layoutOrg(parsed, hiddenCounts, activeTagGroup, hiddenAttributes) {
       }
       finalHeight = totalHeight + LEGEND_GAP + LEGEND_HEIGHT;
     } else {
+      const legendShift = LEGEND_HEIGHT + LEGEND_GROUP_GAP;
+      for (const n of layoutNodes) n.y += legendShift;
+      for (const c of containers) c.y += legendShift;
+      for (const e of layoutEdges) {
+        for (const p of e.points) p.y += legendShift;
+      }
       const totalGroupsWidth = visibleGroups.reduce((s, g) => s + effectiveW(g), 0) + (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
-      const legendStartX = totalWidth - MARGIN + LEGEND_GAP;
-      const legendY = MARGIN;
-      let cx = legendStartX;
+      let cx = MARGIN;
       for (const g of visibleGroups) {
         g.x = cx;
-        g.y = legendY;
+        g.y = MARGIN;
         cx += effectiveW(g) + LEGEND_GROUP_GAP;
       }
-      const legendRight = legendStartX + totalGroupsWidth + MARGIN;
-      if (legendRight > finalWidth) {
-        finalWidth = legendRight;
-      }
-      const legendBottom = legendY + LEGEND_HEIGHT + MARGIN;
-      if (legendBottom > finalHeight) {
-        finalHeight = legendBottom;
+      finalHeight += legendShift;
+      const neededWidth = totalGroupsWidth + MARGIN * 2;
+      if (neededWidth > finalWidth) {
+        finalWidth = neededWidth;
       }
     }
   }
@@ -6217,12 +6228,14 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
       nodeG.append("rect").attr("x", COLLAPSE_BAR_INSET).attr("y", node.height - COLLAPSE_BAR_HEIGHT).attr("width", node.width - COLLAPSE_BAR_INSET * 2).attr("height", COLLAPSE_BAR_HEIGHT).attr("fill", nodeStroke(palette, colorOff ? void 0 : node.color)).attr("clip-path", `url(#${clipId})`).attr("class", "org-collapse-bar");
     }
   }
-  if (!exportDims || layout.nodes.length === 0) for (const group of layout.legend) {
-    const isActive = activeTagGroup != null && group.name.toLowerCase() === activeTagGroup.toLowerCase();
-    if (activeTagGroup != null && !isActive) continue;
-    const groupBg = mix(palette.surface, palette.bg, isDark ? 35 : 20);
-    const pillWidth = group.name.length * LEGEND_PILL_FONT_W2 + LEGEND_PILL_PAD2;
-    const gEl = contentG.append("g").attr("transform", `translate(${group.x}, ${group.y})`).attr("class", "org-legend-group").attr("data-legend-group", group.name.toLowerCase()).style("cursor", "pointer");
+  const legendOnly = layout.nodes.length === 0;
+  if (!exportDims || legendOnly) for (const group of layout.legend) {
+    const isActive = legendOnly || activeTagGroup != null && group.name.toLowerCase() === activeTagGroup.toLowerCase();
+    if (!legendOnly && activeTagGroup != null && !isActive) continue;
+    const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
+    const pillLabel = isActive && group.alias ? `${group.name} (${group.alias})` : group.name;
+    const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W2 + LEGEND_PILL_PAD2;
+    const gEl = contentG.append("g").attr("transform", `translate(${group.x}, ${group.y})`).attr("class", "org-legend-group").attr("data-legend-group", group.name.toLowerCase()).style("cursor", legendOnly ? "default" : "pointer");
     if (isActive) {
       gEl.append("rect").attr("width", group.width).attr("height", LEGEND_HEIGHT2).attr("rx", LEGEND_HEIGHT2 / 2).attr("fill", groupBg);
     }
@@ -6233,14 +6246,15 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
     if (isActive) {
       gEl.append("rect").attr("x", pillX).attr("y", pillY).attr("width", pillWidth).attr("height", pillH).attr("rx", pillH / 2).attr("fill", "none").attr("stroke", mix(palette.textMuted, palette.bg, 50)).attr("stroke-width", 0.75);
     }
-    gEl.append("text").attr("x", pillX + pillWidth / 2).attr("y", LEGEND_HEIGHT2 / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", "500").attr("fill", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(group.name);
+    gEl.append("text").attr("x", pillX + pillWidth / 2).attr("y", LEGEND_HEIGHT2 / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", "500").attr("fill", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(pillLabel);
     if (isActive) {
       let entryX = pillX + pillWidth + 4;
       for (const entry of group.entries) {
         gEl.append("circle").attr("cx", entryX + LEGEND_DOT_R2).attr("cy", LEGEND_HEIGHT2 / 2).attr("r", LEGEND_DOT_R2).attr("fill", entry.color);
         const textX = entryX + LEGEND_DOT_R2 * 2 + LEGEND_ENTRY_DOT_GAP2;
-        gEl.append("text").attr("x", textX).attr("y", LEGEND_HEIGHT2 / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).text(entry.value);
-        entryX = textX + entry.value.length * LEGEND_ENTRY_FONT_W2 + LEGEND_ENTRY_TRAIL2;
+        const entryLabel = entry.isDefault ? `${entry.value} (default)` : entry.value;
+        gEl.append("text").attr("x", textX).attr("y", LEGEND_HEIGHT2 / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).text(entryLabel);
+        entryX = textX + entryLabel.length * LEGEND_ENTRY_FONT_W2 + LEGEND_ENTRY_TRAIL2;
       }
     }
   }
@@ -6554,7 +6568,7 @@ function renderKanban(container, parsed, palette, isDark, _onNavigateToLine, exp
     const legendY = DIAGRAM_PADDING2;
     const titleTextWidth = parsed.title ? parsed.title.length * TITLE_FONT_SIZE2 * 0.6 + 16 : 0;
     let legendX = DIAGRAM_PADDING2 + titleTextWidth;
-    const groupBg = mix2(palette.surface, palette.bg, isDark ? 35 : 20);
+    const groupBg = isDark ? mix2(palette.surface, palette.bg, 50) : mix2(palette.surface, palette.bg, 30);
     const capsulePad = 4;
     for (const group of parsed.tagGroups) {
       const isActive = activeTagGroup?.toLowerCase() === group.name.toLowerCase();