Name: ember-timetree
Owner: Crowdstrike
Description: Visualize hierarchical timeline data. Built with Ember.js and D3.js
Created: 2013-04-18 21:50:38.0
Updated: 2017-12-18 09:21:36.0
Pushed: 2017-05-22 02:22:28.0
Homepage: http://crowdstrike.github.io/ember-timetree
Size: 798
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Visualize hierarchical timeline data. Built with Ember.js and D3.js.
Peep the demo.
r install:addon ember-timetree
me-tree content=yourTimetreeArray}}
where YourTimetreeArray is an array of objects representing the rows of
the timetree.
Each row object is a plain JavaScript object defining at least a display name, a start time, and an end time. Here is the full set of fields.
REQUIRED FIELDS */
bel: "Name",
art: 12345, // Milliseconds since the UTC epoch.
d: 67890,
OPTIONAL FIELDS */
rent: 3, // Index of this row's hierarchical parent in the array.
: "123456L", // Id for determining uniqueness; defaults to index in the array.
assName: "info", // CSS class name for this row's labels and bars.
ntent: {}, // Arbitrary content to bind when the user selects (clicks on) a
// row. Useful if you want to do exact identity comparison to the
// selection. If empty, selecting a row binds `content` to the
// row object itself (which ember-timetree may have transformed,
// so don't count on it being identical to your original input).
ctions: [{ start: 12345, end: 23456, className: "active" }, // Start/stop this row's timeline multiple times.
{ start: 23456, end: 67890, className: "inactive" }] // Each section can have its own, optional CSS class name.
// Note the row object's overall start/end fields must
// still be specified above, as its bar will still be drawn.
To bind to the currently selected row of the timetree, set the time-tree's
selection attribute. Upon the user selecting a row, the binding will contain
the selected row's content field, or the row object itself if content is
empty.
ember-timetree won't transform the content field but it may transform the row
object, so don't count on the latter being identical to your original input.
If you set the resizeOnCollapse attribute to true, the height of the tree
will resize when collapsing a node. This is nice when you have really long tree
and you do not want white space when a node is collapsed.
Want to zoom and drag to focus anywhere on your timeline? After the main view,
add a {{time-tree-brush}}, and link the two via the range and brushRange
attributes, respectively.
me-tree content=yourTimetreeArray range=yourRange}}
me-tree-brush content=yourTimetreeArray brushRange=yourRange}}
Many methods on time-tree can be extended. For example, to override the
built-in date/time format:
rt Ember from 'ember';
rt TimeTreeComponent from 'ember-timetree/components/time-tree';
t MyTimeTreeComponent = TimeTreeComponent.extend({
meFormat: Ember.computed(function() {
/* global d3 */
return d3.time.format.utc("your D3 date format here");
.property()
rt default MyTimeTreeComponent;
h: 750,
eight: 15,
pacing: 10,
lsWidth: 200,
Height: 20,
Position: 'bottom',
ntSize: 20,
lAlign: 'left',
entMargin: null, // e.g. { top: 0, left: 0, bottom: 0, right: 0 },
apsable: true, // can collapse hierarchy items?
zeOnCollapse: false, // resize the height of the tree when collapsing a node
bbable: true, // draw the scrubber (on hover)?
ctable: true, // can select rows (on click)?
hable: false, // can drag-click and drag to zoom?
Labels: true,
Links: true,
ent: null, // bind this to the array of row objects
ction: null, // bind this to the selected row
hRange: null, // bind this to a TimetreeBrushView
View-source on the demo page to get more ideas how to tweak ember-timetree to your liking.
git clone this repositorynpm installbower installember serverember testember test --serverember buildFor more information on using ember-cli, visit http://www.ember-cli.com/.
