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:

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:

{ 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:

const libActivityGraph = require('pict-section-activitygraph');
const tmpSVG = libActivityGraph.Renderer.buildSVG({ Period: 'Week', Buckets: rows });

Test

npm test