pict-section-activitygraph 1.0.0

package/README.md

@@ -0,0 +1,72 @@
+# pict-section-activitygraph
+
+A Pict section that renders a stacked-bar activity timeline. Time runs top to
+bottom, one row per period; each domain you configure is a column of horizontal
+stacked bars (one bar per period, segmented by a stack dimension). Super-group
+separators mark quarter boundaries (for day, week, and month granularities) or
+year boundaries (for quarter). It is a hand-rolled themed SVG, so there is no
+chart-library dependency and it re-themes live from the host's theme tokens.
+
+Built for the Plansheet "System Activity" view: two columns (Work Items and
+Knowledge), one bar per week stacked by activity type, with a switcher for the
+granularity, the stack dimension, and the measure.
+
+## Install
+
+```
+npm install pict-section-activitygraph
+```
+
+## Use
+
+Register the view with a host Pict application and point it at a DOM slot:
+
+```javascript
+const libActivityGraph = require('pict-section-activitygraph');
+
+pict.addView('MyActivityGraph', Object.assign({}, libActivityGraph.default_configuration,
+    {
+        ActivityGraph:
+        {
+            Period: 'Week',
+            Columns:
+            [
+                { Key: 'WorkItems', Title: 'Work Items', Accent: '#e0891e' },
+                { Key: 'Knowledge', Title: 'Knowledge', Accent: '#3f7fd0' }
+            ],
+            // called when the user picks a new granularity, so the host can refetch that period
+            PeriodChangeHandler: (pPeriod, pView) => loadAndSetData(pPeriod, pView)
+        },
+        Renderables: [ { RenderableHash: 'Pict-ActivityGraph-Container', TemplateHash: 'Pict-ActivityGraph-Container', ContentDestinationAddress: '#My-Chart-Slot', RenderMethod: 'replace' } ]
+    }), libActivityGraph);
+
+pict.views.MyActivityGraph.render();
+pict.views.MyActivityGraph.setData({ Period: 'Week', Buckets: rows });
+```
+
+Each bucket in `Buckets` is one aggregated cell:
+
+```javascript
+{ PeriodStart: '2025-06-02', PeriodKey: '2025-W23', Domain: 'WorkItems',
+  ActivityType: 'Created', ActorKind: 'Human', EventCount: 3, Volume: 3 }
+```
+
+`Domain` matches a column `Key`. The stack dimension is `ActivityType` by
+default or `ActorKind` (via the Stack toggle, or `setStackBy('ActorKind')`); the
+measure is `EventCount` by default or `Volume` (`setMeasure('Volume')`).
+
+## Renderer
+
+The SVG builder is a pure function, exported for tests and headless
+rasterization:
+
+```javascript
+const libActivityGraph = require('pict-section-activitygraph');
+const tmpSVG = libActivityGraph.Renderer.buildSVG({ Period: 'Week', Buckets: rows });
+```
+
+## Test
+
+```
+npm test
+```

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "pict-section-activitygraph",
+  "version": "1.0.0",
+  "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": {
+    "start": "node source/Pict-Section-ActivityGraph.js",
+    "test": "npx quack test",
+    "tests": "npx quack test -g",
+    "coverage": "npx quack coverage",
+    "build": "npx quack build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fable-retold/pict-section-activitygraph.git"
+  },
+  "keywords": [
+    "pict",
+    "pict-section",
+    "chart",
+    "activity",
+    "timeline",
+    "stacked-bar"
+  ],
+  "author": "steven velozo <steven@velozo.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/fable-retold/pict-section-activitygraph/issues"
+  },
+  "homepage": "https://github.com/fable-retold/pict-section-activitygraph#readme",
+  "files": [
+    "source"
+  ],
+  "dependencies": {
+    "pict-view": "^1.0.68"
+  },
+  "devDependencies": {
+    "pict": "^1.0.392",
+    "quackage": "^1.3.0"
+  },
+  "mocha": {
+    "diff": true,
+    "extension": [
+      "js"
+    ],
+    "package": "./package.json",
+    "reporter": "spec",
+    "slow": "75",
+    "timeout": "5000",
+    "ui": "tdd",
+    "watch-files": [
+      "source/**/*.js",
+      "test/**/*.js"
+    ]
+  }
+}

package/source/Pict-ActivityGraph-CSS.js

@@ -0,0 +1,18 @@
+'use strict';
+
+// CSS for pict-section-activitygraph. Theme-token driven so it re-themes live. The active control button
+// pairs the brand fill with var(--theme-color-text-on-brand) rather than a hardcoded white, so it stays
+// readable in themes whose brand is light (e.g. High Contrast dark, where brand is yellow).
+module.exports = /*css*/`
+.pict-activitygraph { font-family: -apple-system, Segoe UI, Roboto, sans-serif; color: var(--theme-color-text-primary, #2b2d2f); }
+.pict-activitygraph .pag-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
+.pict-activitygraph .pag-group { display: inline-flex; align-items: center; gap: 4px; }
+.pict-activitygraph .pag-group-right { margin-left: auto; }
+.pict-activitygraph .pag-label { font-size: 11px; color: var(--theme-color-text-secondary, #6c6a60); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 2px 0 10px; }
+.pict-activitygraph .pag-btn { font: inherit; font-size: 12px; padding: 4px 11px; border-radius: 6px; cursor: pointer; border: 1px solid var(--theme-color-border-default, #d8dde6); background: var(--theme-color-background-panel, #ffffff); color: var(--theme-color-text-secondary, #5b6376); }
+.pict-activitygraph .pag-btn:hover { border-color: var(--theme-color-brand-primary, #3b6fd4); color: var(--theme-color-text-primary, #2c3140); }
+.pict-activitygraph .pag-btn-on, .pict-activitygraph .pag-btn-on:hover { background: var(--theme-color-brand-primary, #3b6fd4); color: var(--theme-color-text-on-brand, #ffffff); border-color: transparent; }
+.pict-activitygraph .pag-chart { width: 100%; overflow-x: auto; }
+.pict-activitygraph .pag-chart svg { display: block; max-width: 100%; height: auto; }
+.pict-activitygraph .pag-empty { color: var(--theme-color-text-secondary, #6c6a60); font-style: italic; font-size: 14px; padding: 32px 4px; }
+`;

package/source/Pict-ActivityGraph-Renderer.js

@@ -0,0 +1,207 @@
+'use strict';
+
+/**
+ * Pict-ActivityGraph-Renderer
+ * ---------------------------
+ * Pure data -> SVG string. No DOM, no pict, no side effects, so it is trivially testable and can be
+ * rasterized headlessly. The view calls buildSVG(pModel); a test or a screenshot tool can call it too.
+ *
+ * The layout follows the System Activity whiteboard: time runs top to bottom (one row per period), and
+ * each configured domain is a column of horizontal stacked bars (one bar per period, segmented by the
+ * StackBy dimension). A separator with a label marks each super-group boundary (quarter for day/week/
+ * month granularities, year for quarter). Colors: theme CSS vars (with hex fallbacks) drive text,
+ * gridlines and surfaces so it re-themes live in the browser; the stack segments use a fixed categorical
+ * palette. Counts are drawn as theme-colored text at the bar ends -- never on the colored fills -- so the
+ * label contrast never depends on the segment color (the text-on-brand lesson).
+ */
+
+// Categorical palettes. Solid mid hues chosen to read on both light and dark panels. AI = violet to
+// match the app's AI-actor convention.
+const _TYPE_COLORS =
+{
+	Created: '#2f9e6e',
+	Edited: '#3f7fd0',
+	StatusChange: '#d99a2b',
+	Completed: '#7a5cd0',
+	Commented: '#c85a9c'
+};
+const _ACTOR_COLORS =
+{
+	Human: '#3f7fd0',
+	AI: '#7a5cd0',
+	System: '#8a93a6'
+};
+const _FALLBACK_SEQUENCE = ['#2f9e6e', '#3f7fd0', '#d99a2b', '#7a5cd0', '#c85a9c', '#4bb3b3', '#b3617a', '#8a93a6'];
+
+// Theme tokens (var chain with a light-theme hex fallback). A headless rasterizer that does not resolve
+// var() still gets the fallback if the caller strips `var(--x, ` / `)` down to the hex.
+const _C =
+{
+	text: 'var(--theme-color-text-primary, #2b2d2f)',
+	muted: 'var(--theme-color-text-secondary, #6c6a60)',
+	border: 'var(--theme-color-border-default, #d8dde6)',
+	panel: 'var(--theme-color-background-panel, #ffffff)',
+	track: 'var(--theme-color-background-tertiary, #eef1f6)'
+};
+
+function _esc(pValue)
+{
+	return String(pValue == null ? '' : pValue).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+function _quarterOf(pDayString)
+{
+	let tmpMonth = parseInt(String(pDayString || '').slice(5, 7), 10) || 1;
+	return Math.floor((tmpMonth - 1) / 3) + 1;
+}
+
+// The super-group label a row belongs to, or null when the granularity needs no grouping band.
+function _superGroup(pDayString, pPeriod)
+{
+	let tmpYear = String(pDayString || '').slice(0, 4);
+	if (pPeriod === 'Day' || pPeriod === 'Week' || pPeriod === 'Month') { return tmpYear + '-Q' + _quarterOf(pDayString); }
+	if (pPeriod === 'Quarter') { return tmpYear; }
+	return null;
+}
+
+function _colorFor(pStackBy, pKey, pIndex)
+{
+	if (pStackBy === 'ActorKind') { return _ACTOR_COLORS[pKey] || _FALLBACK_SEQUENCE[pIndex % _FALLBACK_SEQUENCE.length]; }
+	return _TYPE_COLORS[pKey] || _FALLBACK_SEQUENCE[pIndex % _FALLBACK_SEQUENCE.length];
+}
+
+/**
+ * pModel:
+ *   { Period, StackBy ('ActivityType'|'ActorKind'), Measure ('EventCount'|'Volume'),
+ *     Columns: [ { Key, Title, Accent } ], Buckets: [ { PeriodStart, PeriodKey, Domain, ActivityType, ActorKind, EventCount, Volume } ] }
+ */
+function buildSVG(pModel)
+{
+	let tmpModel = pModel || {};
+	let tmpPeriod = tmpModel.Period || 'Week';
+	let tmpStackBy = (tmpModel.StackBy === 'ActorKind') ? 'ActorKind' : 'ActivityType';
+	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 : [];
+
+	// --- geometry ---
+	const WIDTH = 940;
+	const PAD_L = 104;          // period-label gutter
+	const PAD_R = 16;
+	const TOP = 46;             // title + column headers
+	const LEGEND_H = 30;
+	const ROW_H = 26;
+	const BAR_H = 15;
+	const COL_GAP = 26;
+	const COUNT_W = 40;         // room for the total label after a bar
+
+	// --- distinct, ordered periods (union across columns), sorted by PeriodStart ---
+	let tmpPeriodOrder = [];
+	let tmpPeriodSeen = {};
+	tmpBuckets.slice().sort((pA, pB) => String(pA.PeriodStart).localeCompare(String(pB.PeriodStart))).forEach((pB) =>
+	{
+		if (!tmpPeriodSeen[pB.PeriodKey]) { tmpPeriodSeen[pB.PeriodKey] = { PeriodKey: pB.PeriodKey, PeriodStart: pB.PeriodStart }; tmpPeriodOrder.push(tmpPeriodSeen[pB.PeriodKey]); }
+	});
+
+	// --- pivot: period -> column -> stackKey -> measure; plus totals + distinct stack keys ---
+	let tmpPivot = {};
+	let tmpStackKeys = [];
+	let tmpStackSeen = {};
+	let tmpMaxTotal = 0;
+	tmpBuckets.forEach((pB) =>
+	{
+		let tmpStackKey = String((tmpStackBy === 'ActorKind') ? (pB.ActorKind || 'System') : (pB.ActivityType || 'Other'));
+		if (!tmpStackSeen[tmpStackKey]) { tmpStackSeen[tmpStackKey] = true; tmpStackKeys.push(tmpStackKey); }
+		let tmpCell = tmpPivot[pB.PeriodKey] || (tmpPivot[pB.PeriodKey] = {});
+		let tmpColCell = tmpCell[pB.Domain] || (tmpCell[pB.Domain] = { Total: 0, Segments: {} });
+		let tmpValue = Number(pB[tmpMeasure]) || 0;
+		tmpColCell.Segments[tmpStackKey] = (tmpColCell.Segments[tmpStackKey] || 0) + tmpValue;
+		tmpColCell.Total += tmpValue;
+		if (tmpColCell.Total > tmpMaxTotal) { tmpMaxTotal = tmpColCell.Total; }
+	});
+	tmpStackKeys.sort();
+	if (tmpMaxTotal <= 0) { tmpMaxTotal = 1; }
+
+	let tmpColorByKey = {};
+	tmpStackKeys.forEach((pKey, pIndex) => { tmpColorByKey[pKey] = _colorFor(tmpStackBy, pKey, pIndex); });
+
+	// --- column x-geometry ---
+	let tmpChartWidth = WIDTH - PAD_L - PAD_R;
+	let tmpColWidth = (tmpChartWidth - COL_GAP * (tmpColumns.length - 1)) / tmpColumns.length;
+	let tmpBarMax = tmpColWidth - COUNT_W;
+	let tmpColX = tmpColumns.map((pCol, pIndex) => PAD_L + pIndex * (tmpColWidth + COL_GAP));
+
+	// --- empty state ---
+	if (!tmpPeriodOrder.length)
+	{
+		let tmpH = TOP + 80;
+		return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + WIDTH + ' ' + tmpH + '" width="100%" role="img" aria-label="Activity chart, no data">'
+			+ '<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;
+	let tmpHeight = tmpChartTop + tmpPeriodOrder.length * ROW_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">');
+
+	// legend
+	let tmpLegendX = PAD_L;
+	tmpSVG.push('<text x="0" y="' + (TOP - 22) + '" font-size="15" font-weight="600" fill="' + _C.text + '">System Activity</text>');
+	tmpStackKeys.forEach((pKey) =>
+	{
+		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;
+	});
+
+	// column headers (accent-colored text + underline, never text on a fill)
+	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) + '"/>');
+	});
+
+	// rows
+	let tmpPrevGroup = null;
+	tmpPeriodOrder.forEach((pPeriodRow, pRowIndex) =>
+	{
+		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>');
+			tmpPrevGroup = tmpGroup;
+		}
+		// period label
+		tmpSVG.push('<text x="' + (PAD_L - 12) + '" y="' + (tmpY + BAR_H) + '" text-anchor="end" font-size="11" fill="' + _C.muted + '">' + _esc(pPeriodRow.PeriodKey) + '</text>');
+
+		tmpColumns.forEach((pCol, pColIndex) =>
+		{
+			let tmpX0 = tmpColX[pColIndex];
+			// track
+			tmpSVG.push('<rect x="' + tmpX0 + '" y="' + (tmpY + 3) + '" width="' + tmpBarMax + '" height="' + BAR_H + '" rx="3" fill="' + _C.track + '"/>');
+			let tmpCell = (tmpPivot[pPeriodRow.PeriodKey] || {})[pCol.Key];
+			if (tmpCell && tmpCell.Total > 0)
+			{
+				let tmpX = tmpX0;
+				tmpStackKeys.forEach((pKey) =>
+				{
+					let tmpValue = tmpCell.Segments[pKey] || 0;
+					if (tmpValue <= 0) { return; }
+					let tmpW = (tmpValue / tmpMaxTotal) * tmpBarMax;
+					tmpSVG.push('<rect x="' + tmpX.toFixed(1) + '" y="' + (tmpY + 3) + '" width="' + tmpW.toFixed(1) + '" height="' + BAR_H + '" fill="' + tmpColorByKey[pKey] + '"><title>' + _esc(pCol.Title + ' ' + pKey + ': ' + tmpValue) + '</title></rect>');
+					tmpX += tmpW;
+				});
+				tmpSVG.push('<text x="' + (tmpX + 6).toFixed(1) + '" y="' + (tmpY + BAR_H) + '" font-size="11" font-weight="600" fill="' + _C.text + '">' + tmpCell.Total + '</text>');
+			}
+		});
+	});
+
+	tmpSVG.push('</svg>');
+	return tmpSVG.join('');
+}
+
+module.exports = { buildSVG: buildSVG, _superGroup: _superGroup, _TYPE_COLORS: _TYPE_COLORS, _ACTOR_COLORS: _ACTOR_COLORS };

package/source/Pict-Section-ActivityGraph.js

@@ -0,0 +1,19 @@
+'use strict';
+
+/**
+ * pict-section-activitygraph entry.
+ *
+ * The default export is the view class (with default_configuration hung off it, as every pict-section
+ * does), so a host registers it with:
+ *   pict.addView('MyActivityGraph', libActivityGraph.default_configuration, libActivityGraph);
+ * Override ActivityGraph.Columns / Period / PeriodChangeHandler and the Renderables[].ContentDestination
+ * Address in the config to place and wire an instance. The pure SVG renderer is exported as .Renderer for
+ * tests and headless rasterization.
+ */
+
+const libActivityGraphView = require('./views/PictView-ActivityGraph.js');
+
+module.exports = libActivityGraphView;
+module.exports.default_configuration = libActivityGraphView.default_configuration;
+module.exports.PictViewActivityGraph = libActivityGraphView;
+module.exports.Renderer = require('./Pict-ActivityGraph-Renderer.js');

package/source/views/PictView-ActivityGraph.js

@@ -0,0 +1,171 @@
+'use strict';
+
+const libPictView = require('pict-view');
+const libRenderer = require('../Pict-ActivityGraph-Renderer.js');
+const libCSS = require('../Pict-ActivityGraph-CSS.js');
+
+/**
+ * PictView-ActivityGraph
+ * ----------------------
+ * Renders a stacked-bar activity timeline (see Pict-ActivityGraph-Renderer for the SVG). The host feeds
+ * it buckets with setData(); the built-in controls switch the granularity (Day..Year), the stack
+ * dimension (by type / by actor), and the measure (count / volume). Granularity changes call the
+ * host-supplied PeriodChangeHandler so the host can refetch that period's rows; the stack + measure
+ * toggles just re-render the buckets already in hand (each bucket carries both dimensions).
+ *
+ * The chart SVG and the controls are computed content, so they are injected with ContentAssignment
+ * rather than expressed as data-bound templates -- the same shape the moodboard / histogram sections use
+ * for their bespoke visuals. Inline handlers reference this specific instance by its registered Hash, so
+ * several instances on one page stay independent.
+ */
+
+const _DEFAULTS =
+{
+	Period: 'Week',
+	Periods: ['Day', 'Week', 'Month', 'Quarter', 'Year'],
+	StackBy: 'ActivityType',
+	Measure: 'EventCount',
+	Columns: [
+		{ Key: 'WorkItems', Title: 'Work Items', Accent: '#e0891e' },
+		{ Key: 'Knowledge', Title: 'Knowledge', Accent: '#3f7fd0' }
+	]
+};
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: 'Pict-ActivityGraph',
+	DefaultRenderable: 'Pict-ActivityGraph-Container',
+	DefaultDestinationAddress: '#Pict-ActivityGraph-Container',
+	AutoRender: false,
+	CSS: libCSS,
+	CSSHash: 'Pict-Section-ActivityGraph-CSS',
+	ActivityGraph: _DEFAULTS,
+	Templates: [
+		{
+			Hash: 'Pict-ActivityGraph-Container',
+			Template: /*html*/`<div class="pict-activitygraph">
+	<div class="pag-controls" id="Pict-ActivityGraph-Controls"></div>
+	<div class="pag-chart" id="Pict-ActivityGraph-Chart"></div>
+</div>`
+		}
+	],
+	Renderables: [
+		{
+			RenderableHash: 'Pict-ActivityGraph-Container',
+			TemplateHash: 'Pict-ActivityGraph-Container',
+			DestinationAddress: '#Pict-ActivityGraph-Container',
+			RenderMethod: 'replace'
+		}
+	]
+};
+
+class PictViewActivityGraph extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+		let tmpConfig = (this.options && this.options.ActivityGraph) || {};
+		this._State =
+		{
+			Period: tmpConfig.Period || _DEFAULTS.Period,
+			Periods: Array.isArray(tmpConfig.Periods) ? tmpConfig.Periods : _DEFAULTS.Periods,
+			StackBy: tmpConfig.StackBy || _DEFAULTS.StackBy,
+			Measure: tmpConfig.Measure || _DEFAULTS.Measure,
+			Columns: Array.isArray(tmpConfig.Columns) ? tmpConfig.Columns : _DEFAULTS.Columns,
+			Buckets: []
+		};
+	}
+
+	// The hash a host reaches this instance by (addView name), for inline handlers. Falls back to the
+	// view identifier for a single-instance registration.
+	get _InstanceHash() { return this.Hash || _ViewConfiguration.ViewIdentifier; }
+
+	// Host API: hand the view a period's buckets. Optionally also set the period (when the host refetched
+	// for a new granularity).
+	setData(pPayload)
+	{
+		let tmpPayload = pPayload || {};
+		if (tmpPayload.Period) { this._State.Period = tmpPayload.Period; }
+		if (Array.isArray(tmpPayload.Columns)) { this._State.Columns = tmpPayload.Columns; }
+		this._State.Buckets = Array.isArray(tmpPayload.Buckets) ? tmpPayload.Buckets : (Array.isArray(tmpPayload.Rows) ? tmpPayload.Rows : []);
+		this.refresh();
+		return this;
+	}
+
+	setPeriod(pPeriod)
+	{
+		if (this._State.Periods.indexOf(pPeriod) < 0) { return; }
+		this._State.Period = pPeriod;
+		let tmpHandler = (this.options && this.options.ActivityGraph && this.options.ActivityGraph.PeriodChangeHandler);
+		if (typeof tmpHandler === 'function')
+		{
+			// Host refetches the new period's rows and calls setData(); reflect the active button now.
+			this._injectControls();
+			tmpHandler(pPeriod, this);
+			return;
+		}
+		this.refresh();
+	}
+
+	setStackBy(pStackBy)
+	{
+		this._State.StackBy = (pStackBy === 'ActorKind') ? 'ActorKind' : 'ActivityType';
+		this.refresh();
+	}
+
+	setMeasure(pMeasure)
+	{
+		this._State.Measure = (pMeasure === 'Volume') ? 'Volume' : 'EventCount';
+		this.refresh();
+	}
+
+	_button(pLabel, pActive, pMethod, pArg)
+	{
+		return '<button class="pag-btn' + (pActive ? ' pag-btn-on' : '') + '" onclick="_Pict.views[\'' + this._InstanceHash + '\'].' + pMethod + '(\'' + pArg + '\')">' + pLabel + '</button>';
+	}
+
+	_injectControls()
+	{
+		let tmpHTML = '<div class="pag-group">';
+		this._State.Periods.forEach((pPeriod) => { tmpHTML += this._button(pPeriod, this._State.Period === pPeriod, 'setPeriod', pPeriod); });
+		tmpHTML += '</div><div class="pag-group pag-group-right">'
+			+ '<span class="pag-label">Stack</span>'
+			+ this._button('Type', this._State.StackBy === 'ActivityType', 'setStackBy', 'ActivityType')
+			+ this._button('Actor', this._State.StackBy === 'ActorKind', 'setStackBy', 'ActorKind')
+			+ '<span class="pag-label">Measure</span>'
+			+ this._button('Count', this._State.Measure === 'EventCount', 'setMeasure', 'EventCount')
+			+ this._button('Volume', this._State.Measure === 'Volume', 'setMeasure', 'Volume')
+			+ '</div>';
+		this.pict.ContentAssignment.assignContent('#Pict-ActivityGraph-Controls', tmpHTML);
+	}
+
+	_injectChart()
+	{
+		let tmpSVG = libRenderer.buildSVG(
+			{
+				Period: this._State.Period,
+				StackBy: this._State.StackBy,
+				Measure: this._State.Measure,
+				Columns: this._State.Columns,
+				Buckets: this._State.Buckets
+			});
+		this.pict.ContentAssignment.assignContent('#Pict-ActivityGraph-Chart', tmpSVG);
+	}
+
+	refresh()
+	{
+		this._injectControls();
+		this._injectChart();
+		return this;
+	}
+
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		this.refresh();
+		this.pict.CSSMap.injectCSS();
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+}
+
+module.exports = PictViewActivityGraph;
+module.exports.default_configuration = _ViewConfiguration;