Ameasurejs-timeline NPM

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);
});

@infinitebrahmanuniverse/nolb-ame @everything-registry/sub-chunk-1125 @zalastax/nolb-ame

1.2.1

7 years ago