@diagrammo/dgmo 0.2.21 → 0.2.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",

package/src/echarts.ts

@@ -1198,16 +1198,15 @@ function buildFunnelOption(
         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: string[] = [];
+        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: [

package/src/kanban/renderer.ts

@@ -267,7 +267,9 @@ export function renderKanban(
       ? parsed.title.length * TITLE_FONT_SIZE * 0.6 + 16
       : 0;
     let legendX = DIAGRAM_PADDING + titleTextWidth;
-    const groupBg = mix(palette.surface, palette.bg, isDark ? 35 : 20);
+    const groupBg = isDark
+      ? mix(palette.surface, palette.bg, 50)
+      : mix(palette.surface, palette.bg, 30);
     const capsulePad = 4;
 
     for (const group of parsed.tagGroups) {

package/src/org/layout.ts

@@ -52,10 +52,12 @@ export interface OrgContainerBounds {
 export interface OrgLegendEntry {
   value: string;
   color: string;
+  isDefault?: boolean;
 }
 
 export interface OrgLegendGroup {
   name: string;
+  alias?: string;
   entries: OrgLegendEntry[];
   x: number;
   y: number;
@@ -276,15 +278,23 @@ function computeLegendGroups(tagGroups: OrgTagGroup[], _showEyeIcons: boolean):
   for (const group of tagGroups) {
     if (group.entries.length === 0) continue;
 
-    const pillWidth = group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+    // Pill label includes alias if present (e.g., "Rank (r)")
+    const pillLabel = group.alias ? `${group.name} (${group.alias})` : group.name;
+    const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+    // Minified pill shows just the group name (no alias)
+    const minPillWidth = group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
 
     // Capsule: pad + pill + gap + entries + pad
+    const isDefaultValue = group.defaultValue?.toLowerCase();
     let entriesWidth = 0;
     for (const entry of group.entries) {
+      const entryLabel = isDefaultValue === entry.value.toLowerCase()
+        ? `${entry.value} (default)`
+        : entry.value;
       entriesWidth +=
         LEGEND_DOT_R * 2 +
         LEGEND_ENTRY_DOT_GAP +
-        entry.value.length * LEGEND_ENTRY_FONT_W +
+        entryLabel.length * LEGEND_ENTRY_FONT_W +
         LEGEND_ENTRY_TRAIL;
     }
     const capsuleWidth =
@@ -292,12 +302,17 @@ function computeLegendGroups(tagGroups: OrgTagGroup[], _showEyeIcons: boolean):
 
     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() || undefined,
+      })),
       x: 0,
       y: 0,
       width: capsuleWidth,
       height: LEGEND_HEIGHT,
-      minifiedWidth: pillWidth,
+      minifiedWidth: minPillWidth,
       minifiedHeight: LEGEND_HEIGHT,
     });
   }
@@ -348,20 +363,22 @@ export function layoutOrg(
       return { nodes: [], edges: [], containers: [], legend: [], width: 0, height: 0 };
     }
 
-    // Layout legend groups horizontally (all minified when no nodes)
-    let cx = MARGIN;
+    // Legend-only mode: stack groups vertically, all expanded
+    let cy = MARGIN;
+    let maxWidth = 0;
     for (const g of legendGroups) {
-      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 > maxWidth) maxWidth = g.width;
     }
     return {
       nodes: [],
       edges: [],
       containers: [],
       legend: legendGroups,
-      width: cx - LEGEND_GROUP_GAP + MARGIN,
-      height: LEGEND_HEIGHT + MARGIN * 2,
+      width: maxWidth + MARGIN * 2,
+      height: cy - LEGEND_GROUP_GAP + MARGIN,
     };
   }
 
@@ -1090,7 +1107,7 @@ export function layoutOrg(
   let finalWidth = totalWidth;
   let finalHeight = totalHeight;
 
-  const legendPosition = parsed.options?.['legend-position'] ?? 'bottom';
+  const legendPosition = parsed.options?.['legend-position'] ?? 'top';
 
   // When a tag group is active, only that group is laid out (full size).
   // When none is active, all groups are laid out minified.
@@ -1133,28 +1150,31 @@ export function layoutOrg(
 
       finalHeight = totalHeight + LEGEND_GAP + LEGEND_HEIGHT;
     } else {
-      // Top: horizontal row at top-right
+      // Top: horizontal row above chart content, left-aligned
+      const legendShift = LEGEND_HEIGHT + LEGEND_GROUP_GAP;
+
+      // Push all chart content down
+      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;
       }
     }
   }

package/src/org/renderer.ts

@@ -447,27 +447,34 @@ export function renderOrg(
 
   // Render legend — kanban-style pills.
   // Skip in export mode (unless legend-only chart).
+  // Legend-only (no nodes): all groups rendered as expanded capsules.
   // Active group: only that group rendered as capsule (pill + entries).
   // No active group: all groups rendered as standalone pills.
-  if (!exportDims || layout.nodes.length === 0) for (const group of layout.legend) {
+  const legendOnly = layout.nodes.length === 0;
+  if (!exportDims || legendOnly) for (const group of layout.legend) {
     const isActive =
-      activeTagGroup != null &&
-      group.name.toLowerCase() === activeTagGroup.toLowerCase();
+      legendOnly ||
+      (activeTagGroup != null &&
+        group.name.toLowerCase() === activeTagGroup.toLowerCase());
 
-    // When a group is active, skip all other groups entirely
-    if (activeTagGroup != null && !isActive) continue;
+    // When a group is active, skip all other groups entirely (not in legend-only mode)
+    if (!legendOnly && activeTagGroup != null && !isActive) continue;
 
-    const groupBg = mix(palette.surface, palette.bg, isDark ? 35 : 20);
+    const groupBg = isDark
+      ? mix(palette.surface, palette.bg, 50)
+      : mix(palette.surface, palette.bg, 30);
 
+    // Pill label: include alias when expanded (e.g., "Rank (r)")
+    const pillLabel = isActive && group.alias ? `${group.name} (${group.alias})` : group.name;
     const pillWidth =
-      group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+      pillLabel.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
 
     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');
+      .style('cursor', legendOnly ? 'default' : 'pointer');
 
     // Outer capsule background (active only)
     if (isActive) {
@@ -516,7 +523,7 @@ export function renderOrg(
       .attr('font-weight', '500')
       .attr('fill', isActive ? palette.text : palette.textMuted)
       .attr('text-anchor', 'middle')
-      .text(group.name);
+      .text(pillLabel);
 
     // Entries inside capsule (active only)
     if (isActive) {
@@ -530,15 +537,16 @@ export function renderOrg(
           .attr('fill', entry.color);
 
         const textX = entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
+        const entryLabel = entry.isDefault ? `${entry.value} (default)` : entry.value;
         gEl
           .append('text')
           .attr('x', textX)
           .attr('y', LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1)
           .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
           .attr('fill', palette.textMuted)
-          .text(entry.value);
+          .text(entryLabel);
 
-        entryX = textX + entry.value.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+        entryX = textX + entryLabel.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
       }
     }
   }