pict-section-activitygraph 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pict-section-activitygraph",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "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

@@ -73,6 +73,7 @@ function _colorFor(pStackBy, pKey, pIndex)
 /**
  * pModel:
  *   { Period, StackBy ('ActivityType'|'ActorKind'), Measure ('EventCount'|'Volume'),
+ *     LegendPosition ('top-left'|'top-right'|'bottom-left'|'bottom-right'|'none', default 'bottom-right'),
  *     Columns: [ { Key, Title, Accent } ], Buckets: [ { PeriodStart, PeriodKey, Domain, ActivityType, ActorKind, EventCount, Volume } ] }
  */
 function buildSVG(pModel)
@@ -83,6 +84,8 @@ function buildSVG(pModel)
 	let tmpMeasure = (tmpModel.Measure === 'Volume') ? 'Volume' : 'EventCount';
 	let tmpColumns = Array.isArray(tmpModel.Columns) && tmpModel.Columns.length ? tmpModel.Columns : [{ Key: 'WorkItems', Title: 'Work Items', Accent: '#e0891e' }, { Key: 'Knowledge', Title: 'Knowledge', Accent: '#3f7fd0' }];
 	let tmpBuckets = Array.isArray(tmpModel.Buckets) ? tmpModel.Buckets : [];
+	let tmpLegendOptions = { 'top-left': 1, 'top-right': 1, 'bottom-left': 1, 'bottom-right': 1, 'none': 1 };
+	let tmpLegendPosition = tmpLegendOptions[tmpModel.LegendPosition] ? tmpModel.LegendPosition : 'bottom-right';
 
 	// --- geometry ---
 	const WIDTH = 940;
@@ -139,26 +142,43 @@ function buildSVG(pModel)
 			+ '<text x="' + (WIDTH / 2) + '" y="' + (tmpH / 2) + '" text-anchor="middle" font-family="sans-serif" font-size="14" fill="' + _C.muted + '">No activity in this range yet.</text></svg>';
 	}
 
-	let tmpChartTop = TOP + LEGEND_H;
+	// Legend placement is configurable (default bottom-right, out of the title's way). When it is not at
+	// the top, the chart body starts higher and grows a band at the bottom to hold it.
+	let tmpLegendTop = tmpLegendPosition.indexOf('top') === 0;
+	let tmpLegendRight = tmpLegendPosition.indexOf('right') >= 0;
+	let tmpShowLegend = (tmpLegendPosition !== 'none') && (tmpStackKeys.length > 0);
+
+	let tmpChartTop = TOP + ((tmpShowLegend && tmpLegendTop) ? LEGEND_H : 10);
 	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 tmpBodyBottom = tmpChartTop + tmpPeriodOrder.length * ROW_H + tmpGroupCount * GROUP_H;
+	let tmpHeight = tmpBodyBottom + ((tmpShowLegend && !tmpLegendTop) ? LEGEND_H : 0) + 16;
 	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) + ', each column scaled 0 to ' + tmpMaxTotal + '" font-family="-apple-system, Segoe UI, Roboto, sans-serif">');
 
-	// legend
-	let tmpLegendX = PAD_L;
+	// title (always top-left)
 	tmpSVG.push('<text x="0" y="' + (TOP - 22) + '" font-size="15" font-weight="600" fill="' + _C.text + '">System Activity</text>');
-	tmpStackKeys.forEach((pKey) =>
+
+	// legend: a swatch + label per stack key, placed per LegendPosition. The total width is measured
+	// first so a right-aligned legend ends flush with the chart's right edge.
+	if (tmpShowLegend)
 	{
-		tmpSVG.push('<rect x="' + tmpLegendX + '" y="' + (TOP - 4) + '" width="11" height="11" rx="2" fill="' + tmpColorByKey[pKey] + '"/>');
-		tmpSVG.push('<text x="' + (tmpLegendX + 16) + '" y="' + (TOP + 5) + '" font-size="12" fill="' + _C.muted + '">' + _esc(pKey) + '</text>');
-		tmpLegendX += 20 + _esc(pKey).length * 7.2 + 14;
-	});
+		let tmpItems = tmpStackKeys.map((pKey) => ({ Key: pKey, Color: tmpColorByKey[pKey], W: 16 + _esc(pKey).length * 6.8 }));
+		let tmpTotalW = tmpItems.reduce((pSum, pItem) => pSum + pItem.W + 16, 0) - 16;
+		let tmpLX = tmpLegendRight ? (WIDTH - PAD_R - tmpTotalW) : PAD_L;
+		let tmpSwatchY = tmpLegendTop ? (TOP - 4) : (tmpBodyBottom + 14);
+		let tmpTextY = tmpLegendTop ? (TOP + 5) : (tmpBodyBottom + 23);
+		tmpItems.forEach((pItem) =>
+		{
+			tmpSVG.push('<rect x="' + tmpLX.toFixed(1) + '" y="' + tmpSwatchY + '" width="11" height="11" rx="2" fill="' + pItem.Color + '"/>');
+			tmpSVG.push('<text x="' + (tmpLX + 16).toFixed(1) + '" y="' + tmpTextY + '" font-size="12" fill="' + _C.muted + '">' + _esc(pItem.Key) + '</text>');
+			tmpLX += pItem.W + 16;
+		});
+	}
 
 	// 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

package/source/views/PictView-ActivityGraph.js

@@ -25,6 +25,7 @@ const _DEFAULTS =
 	Periods: ['Day', 'Week', 'Month', 'Quarter', 'Year'],
 	StackBy: 'ActivityType',
 	Measure: 'EventCount',
+	LegendPosition: 'bottom-right',
 	Columns: [
 		{ Key: 'WorkItems', Title: 'Work Items', Accent: '#e0891e' },
 		{ Key: 'Knowledge', Title: 'Knowledge', Accent: '#3f7fd0' }
@@ -71,6 +72,7 @@ class PictViewActivityGraph extends libPictView
 			Periods: Array.isArray(tmpConfig.Periods) ? tmpConfig.Periods : _DEFAULTS.Periods,
 			StackBy: tmpConfig.StackBy || _DEFAULTS.StackBy,
 			Measure: tmpConfig.Measure || _DEFAULTS.Measure,
+			LegendPosition: tmpConfig.LegendPosition || _DEFAULTS.LegendPosition,
 			Columns: Array.isArray(tmpConfig.Columns) ? tmpConfig.Columns : _DEFAULTS.Columns,
 			Buckets: []
 		};
@@ -146,6 +148,7 @@ class PictViewActivityGraph extends libPictView
 				Period: this._State.Period,
 				StackBy: this._State.StackBy,
 				Measure: this._State.Measure,
+				LegendPosition: this._State.LegendPosition,
 				Columns: this._State.Columns,
 				Buckets: this._State.Buckets
 			});