pict-section-activitygraph 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pict-section-activitygraph",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "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,7 +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'),
+ *     LegendPosition ('top-left'|'top-right'|'bottom-left'|'bottom-right'|'none', default 'bottom-right'), Title (chart title; '' omits it, default 'System Activity'),
  *     Columns: [ { Key, Title, Accent } ], Buckets: [ { PeriodStart, PeriodKey, Domain, ActivityType, ActorKind, EventCount, Volume } ] }
  */
 function buildSVG(pModel)
@@ -86,6 +86,8 @@ function buildSVG(pModel)
 	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';
+	// Title text; pass an empty string to omit it (e.g. when the host page already has its own heading).
+	let tmpTitle = (typeof tmpModel.Title === 'string') ? tmpModel.Title : 'System Activity';
 
 	// --- geometry ---
 	const WIDTH = 940;
@@ -148,7 +150,9 @@ function buildSVG(pModel)
 	let tmpLegendRight = tmpLegendPosition.indexOf('right') >= 0;
 	let tmpShowLegend = (tmpLegendPosition !== 'none') && (tmpStackKeys.length > 0);
 
-	let tmpChartTop = TOP + ((tmpShowLegend && tmpLegendTop) ? LEGEND_H : 10);
+	// Without a title, reclaim its band so the chart starts higher.
+	let tmpTop = tmpTitle ? TOP : (TOP - 22);
+	let tmpChartTop = tmpTop + ((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.
@@ -160,8 +164,11 @@ function buildSVG(pModel)
 	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">');
 
-	// title (always top-left)
-	tmpSVG.push('<text x="0" y="' + (TOP - 22) + '" font-size="15" font-weight="600" fill="' + _C.text + '">System Activity</text>');
+	// title (top-left; omitted when Title is an empty string)
+	if (tmpTitle)
+	{
+		tmpSVG.push('<text x="0" y="' + (tmpTop - 22) + '" font-size="15" font-weight="600" fill="' + _C.text + '">' + _esc(tmpTitle) + '</text>');
+	}
 
 	// 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.
@@ -170,8 +177,8 @@ function buildSVG(pModel)
 		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);
+		let tmpSwatchY = tmpLegendTop ? (tmpTop - 4) : (tmpBodyBottom + 14);
+		let tmpTextY = tmpLegendTop ? (tmpTop + 5) : (tmpBodyBottom + 23);
 		tmpItems.forEach((pItem) =>
 		{
 			tmpSVG.push('<rect x="' + tmpLX.toFixed(1) + '" y="' + tmpSwatchY + '" width="11" height="11" rx="2" fill="' + pItem.Color + '"/>');

package/source/views/PictView-ActivityGraph.js

@@ -26,6 +26,7 @@ const _DEFAULTS =
 	StackBy: 'ActivityType',
 	Measure: 'EventCount',
 	LegendPosition: 'bottom-right',
+	Title: 'System Activity',
 	Columns: [
 		{ Key: 'WorkItems', Title: 'Work Items', Accent: '#e0891e' },
 		{ Key: 'Knowledge', Title: 'Knowledge', Accent: '#3f7fd0' }
@@ -73,6 +74,7 @@ class PictViewActivityGraph extends libPictView
 			StackBy: tmpConfig.StackBy || _DEFAULTS.StackBy,
 			Measure: tmpConfig.Measure || _DEFAULTS.Measure,
 			LegendPosition: tmpConfig.LegendPosition || _DEFAULTS.LegendPosition,
+			Title: (typeof tmpConfig.Title === 'string') ? tmpConfig.Title : _DEFAULTS.Title,
 			Columns: Array.isArray(tmpConfig.Columns) ? tmpConfig.Columns : _DEFAULTS.Columns,
 			Buckets: []
 		};
@@ -149,6 +151,7 @@ class PictViewActivityGraph extends libPictView
 				StackBy: this._State.StackBy,
 				Measure: this._State.Measure,
 				LegendPosition: this._State.LegendPosition,
+				Title: this._State.Title,
 				Columns: this._State.Columns,
 				Buckets: this._State.Buckets
 			});