pict-section-activitygraph 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pict-section-activitygraph",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Pict section that renders a stacked-bar activity timeline: one bar per period, stacked by type or actor, across parallel domains. Themed SVG, no chart dependency.",
   "main": "source/Pict-Section-ActivityGraph.js",
   "scripts": {

package/source/Pict-ActivityGraph-Renderer.js

@@ -140,9 +140,15 @@ function buildSVG(pModel)
 	}
 
 	let tmpChartTop = TOP + LEGEND_H;
-	let tmpHeight = tmpChartTop + tmpPeriodOrder.length * ROW_H + 20;
+	const GROUP_H = 22;         // a super-group (quarter/year) gets its own header band, so its label
+	                           // never shares a line with the per-row date labels.
+	// Count the super-group bands up front so the SVG height accounts for them.
+	let tmpGroupCount = 0;
+	let tmpScanGroup = null;
+	tmpPeriodOrder.forEach((pRow) => { let tmpG = _superGroup(pRow.PeriodStart, tmpPeriod); if (tmpG && tmpG !== tmpScanGroup) { tmpGroupCount += 1; tmpScanGroup = tmpG; } });
+	let tmpHeight = tmpChartTop + tmpPeriodOrder.length * ROW_H + tmpGroupCount * GROUP_H + 20;
 	let tmpSVG = [];
-	tmpSVG.push('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + WIDTH + ' ' + tmpHeight + '" width="100%" role="img" aria-label="System activity, one bar per ' + _esc(tmpPeriod) + ' stacked by ' + _esc(tmpStackBy) + '" font-family="-apple-system, Segoe UI, Roboto, sans-serif">');
+	tmpSVG.push('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + WIDTH + ' ' + tmpHeight + '" width="100%" role="img" aria-label="System activity, one bar per ' + _esc(tmpPeriod) + ' stacked by ' + _esc(tmpStackBy) + ', each column scaled 0 to ' + tmpMaxTotal + '" font-family="-apple-system, Segoe UI, Roboto, sans-serif">');
 
 	// legend
 	let tmpLegendX = PAD_L;
@@ -154,25 +160,29 @@ function buildSVG(pModel)
 		tmpLegendX += 20 + _esc(pKey).length * 7.2 + 14;
 	});
 
-	// column headers (accent-colored text + underline, never text on a fill)
+	// column headers: accent-colored title (left) + the axis scale (right). Both columns share one global
+	// max, so labeling each track's full-width value with the same number makes the shared, comparable
+	// 0-to-max scale explicit -- a track that fills the whole width equals that max.
 	tmpColumns.forEach((pCol, pIndex) =>
 	{
 		let tmpX = tmpColX[pIndex];
 		tmpSVG.push('<text x="' + tmpX + '" y="' + (tmpChartTop - 8) + '" font-size="13" font-weight="600" fill="' + (pCol.Accent || _C.text) + '">' + _esc(pCol.Title || pCol.Key) + '</text>');
 		tmpSVG.push('<rect x="' + tmpX + '" y="' + (tmpChartTop - 4) + '" width="' + Math.max(40, tmpColWidth * 0.4) + '" height="2" fill="' + (pCol.Accent || _C.border) + '"/>');
+		tmpSVG.push('<text x="' + (tmpX + tmpBarMax).toFixed(1) + '" y="' + (tmpChartTop - 8) + '" text-anchor="end" font-size="10" fill="' + _C.muted + '">0 to ' + tmpMaxTotal + '</text>');
 	});
 
-	// rows
+	// rows (running y, so a super-group header band pushes the rows below it down instead of overlapping)
 	let tmpPrevGroup = null;
-	tmpPeriodOrder.forEach((pPeriodRow, pRowIndex) =>
+	let tmpY = tmpChartTop;
+	tmpPeriodOrder.forEach((pPeriodRow) =>
 	{
-		let tmpY = tmpChartTop + pRowIndex * ROW_H;
 		let tmpGroup = _superGroup(pPeriodRow.PeriodStart, tmpPeriod);
 		if (tmpGroup && tmpGroup !== tmpPrevGroup)
 		{
-			// super-group separator across the full width + label in the gutter
-			tmpSVG.push('<line x1="0" y1="' + (tmpY - 2) + '" x2="' + (WIDTH - PAD_R) + '" y2="' + (tmpY - 2) + '" stroke="' + _C.border + '" stroke-width="1"/>');
-			tmpSVG.push('<text x="0" y="' + (tmpY + 11) + '" font-size="10" font-weight="600" fill="' + _C.muted + '">' + _esc(tmpGroup) + '</text>');
+			// A band of its own: a boundary line, then the group label on its own line above the rows.
+			tmpSVG.push('<line x1="0" y1="' + (tmpY + 7) + '" x2="' + (WIDTH - PAD_R) + '" y2="' + (tmpY + 7) + '" stroke="' + _C.border + '" stroke-width="1"/>');
+			tmpSVG.push('<text x="0" y="' + (tmpY + 19) + '" font-size="11" font-weight="600" fill="' + _C.muted + '">' + _esc(tmpGroup) + '</text>');
+			tmpY += GROUP_H;
 			tmpPrevGroup = tmpGroup;
 		}
 		// period label
@@ -198,6 +208,7 @@ function buildSVG(pModel)
 				tmpSVG.push('<text x="' + (tmpX + 6).toFixed(1) + '" y="' + (tmpY + BAR_H) + '" font-size="11" font-weight="600" fill="' + _C.text + '">' + tmpCell.Total + '</text>');
 			}
 		});
+		tmpY += ROW_H;
 	});
 
 	tmpSVG.push('</svg>');