A-Measure Timeline

A timeline service and screen for PM Engine results.

Getting Started

Install the timeline via npm.

npm install ameasurejs-timeline --registry http://nuget.ma.aptima.com/npm/AMeasureJSNPM

Add 'ameasure.timeline' module as dependency.

angular.module('orcid', ['ameasure.timeline'])

Include the vendor.js and timeline.js files in your index.

<script src="node_modules/ameasurejs-timeline/dist/vendor.js"></script>
<script src="node_modules/ameasurejs-timeline/dist/timeline.js"></script>

Setting Configuration Options

In your module's .run() function, include the 'timelineConfig' constant. Ex:

angular.module('orcid', ['ameasure.timeline'])
    .run(function(timelineConfig) {
        timelineConfig.autoUpdateTime = false;
    })

Available Options

|Name |Type |Description | |--------------|---------|-----------------------------------------------------------------------------| |autoUpdateTime|boolean|Automatically adjusts the time domain if a bar, line, tick extends beyond it.|

Creating the Timeline

Timeline

Construct the timeline object.

.controller('orcidCtrl', function ($scope, Timeline) {
    $scope.timeline = new Timeline();
})

Use the default timeline.

<timeline data="timeline"></timeline>

Or construct your own timeline with individual directives.

<timeline-zoom data="timeline"></timeline-zoom>
<timeline-phases data="timeline"></timeline-phases>
<timeline-row ng-repeat="row in timeline.rows" datarow="row" data="timeline"></timeline-row>

Listening to events

These are $rootScope events that are broadcasted based on interactions with the timeline.

|Name |Arguments |Description | |------------|------------------------|-----------------------------------------------------------------------------------| |rowHover |string name, Date time|Whenever a bar, line, or tick is hovered over in that row, it returns the name of the row and the time where the mouse is hovered over.| |commentClick|string text, Date time|This is broadcasted when a comment is clicked on. It returns any text associated and the time of the comment.|

Objects API

Timeline

Properties

|Name |Type |Description | |---------------|----------------|------------------------------------------------------------------------------------| |rows |TimelineRow[] |Array that stores all of the rows on the timeline. | |phases |Array |Array that stores all of the phases on the timeline. Can be a TimelineBar or a tick.| |comments |Array |Array that stores all of the comments on the timeline. | |timeService |TimeService |A service object that handles the timing (i.e. time domain, current time) | |adjustDomainCb |function |A callback related to adjusting the domain in time service that is saved to rows/bars to handle auto-adjustment of the time domain when data is added.|

Methods

|Function |Description | |---------------------------------------------------------------|----------------------------------------------------------------------| |addPhaseTick(Date startTime, string imageUrl) |Adds a phase tick to the phase row at the given time, display the given image.| |addPhaseBar(TimelineBar bar) |Adds a bar to the phase row. | |addComment(Date startTime[, string text]) |Adds a comment at the given time. Can be provided with comment text. | |addRow(string name) |Creates a TimelineRow with the given measure name and adds it to the timeline.| |createSubRow(string name) |Creates a TimelineRow with the given measure name and returns it. | |createLine(Date start, Date end[, string fill, string text]) |Creates a TimelineBar with the start and end time and returns it. | |createBar(Date start, Date end[, string fill, string text]) |Creates a TimelineBar with the start and end time and returns it. | |autoSetTimeDomain() |Will automatically generate the time domain with the start at the earliest piece of data, and end at the latest piece of data currently in the system.|

TimeService

Properties

|Name |Type |Description | |-------------------------|--------------|----------------------------------------------------------------------------------| |updateZoomDomainCallbacks|Array |Stores callbacks for zoom updates. | |updateTimeDomainCallbacks|Array |Stores callbacks for time domain updates. | |currentTimeCallbacks |Array |Stores callbacks for current time callbacks. | |currentTime |Date |Current time on the timeline. | |timeDomain |[Date, Date]|Time domain of the entire timeline. | |zoom |[Date, Date]|Domain of the zoomed in zone. | |sharedProperties |Object |Holds properties that are shared between timeline individual component directives.|

Methods

|Function |Description | |----------------------------------------|-------------------------------------------------------------------------------| |reset() |Zooms out and calls all redraw callbacks. | |createTimeScaleAndAxis(int rowWidth) |Creates the time scale (D3) and corresponding axis for the zoom based on the width (in pixels) of the timeline.| |updateZoomDomain(Date[] time) |Takes in a time domain (array of two Date objects) and updates the zoom domain.| |updateTimeDomain(Date start, Date end)|Takes a start and end time and updates the overall time domain of the timeline.| |updateCurrentTime(Date time) |Updates the current time marker to that time.

TimelineRow

Properties

|Name |Type |Description | |-------|-----------------|-----------------------------------------------| |name |string |Name of the row/measure. | |bars |TimelineBar[] |Array that stores all of the bars. | |ticks |Array |Array that stores all of the ticks in the row. | |lines |Array |Array that stores all of the lines in the row. | |subRows|TimelineRows[] |Array that stores any sub-rows/sub-measures. | |checked|Boolean |Flag that will hide/show the row. |

Methods

|Function |Description | |----------------------------------|-------------------------------------------------------------------------------------------------------------------------------| |addBar(TimelineBar bar) |Stores a TimelineBar in its array of bars. Autoupdates the time domain if configuration option is on. | |addLine(TimelineBar line) |Stores a TimelineBar in its array of lines. Autoupdates the time domain if configuration option is on. | |addRow(TimelineRow row) |Stores a TimelineRow in its array of sub-rows. | |addTick(Date time, string image)|Saves a tick which takes a Date and the url of the image to display. Autoupdates the time domain if configuration option is on.|

TimelineBar

Properties

|Name |Type |Description | |-------|-----------------|---------------------------------------------------------------------| |start |Date |Starting time of the bar | |end |Date |End time of the bar | |fill |string |The fill color of the bar. | |text |string |The text that is displayed inside the bar in the case of a phase bar.|

Methods

|Function |Description | |----------------------------------|-------------------------------------------------------------------| |addTime(int duration) |Stores a TimelineBar in its array of bars. Autoupdates the time domain if configuration option is on.|

Examples

Adding a row with a bar, line, and tick

$scope.timeline.addRow('Measure 1')
    .addBar($scope.timeline.createBar(new Date(2016, 8, 31, 10, 40), new Date(2016, 8, 31, 10, 50)))
    .addLine($scope.timeline.createLine(new Date(2016, 8, 31, 11), new Date(2016, 8, 31, 11, 15), 'red'))
    .addTick(new Date(2016, 8, 31, 11, 20), 'images/threatdestroyed.png');

Adding a sub-row with a bar to a row

row
    .addRow($scope.timeline.createSubRow('Sub measure 1')
        .addBar($scope.timeline.createBar(new Date(2016, 8, 31, 11), new Date(2016, 8, 31, 12), 'green')));

Listening to a rowHover event

$rootScope.$on('rowHover', function (e, args) {
    console.log(args.name, args.time);
});