Add dashboard

widgets/timeline/timeline.coffee

@@ -0,0 +1,25 @@
+class Dashing.Timeline extends Dashing.Widget
+  ready: ->
+    @renderTimeline(@get('events'))
+
+  onData: (data) ->
+    # Handle incoming data
+    # You can access the html node of this widget with `@node` E8F770 616161
+    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
+    if data.events
+        @renderTimeline(data.events)
+
+  renderTimeline: (events) ->
+    # Margins: zero if not set or the same as the opposite margin
+    # (you likely want this to keep the chart centered within the widget)
+    left = @get('leftMargin') || 0
+    right = @get('rightMargin') || left
+    top = @get('topMargin') || 10
+    bottom = @get('bottomMargin') || top
+
+    container = $(@node).parent()
+    # Gross hacks. Let's fix this.
+    width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1) - left - right
+    height = (Dashing.widget_base_dimensions[1] * container.data("sizey")) - ($(@node).find("h1").outerHeight() + 12) - top - bottom
+    id = "." + @get('id')
+    TimeKnots.draw(id, events, {horizontalLayout: false, color: "#222222", height: height, width: width, showLabels: true, labelFormat:"%H:%M"});

widgets/timeline/timeline.html

@@ -0,0 +1,3 @@
+<h1 data-bind="title"></h1>
+
+<div class="timeline"></div>

widgets/timeline/timeline.scss

@@ -0,0 +1,34 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #4b4b4b;
+
+$title-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.7);
+
+// ----------------------------------------------------------------------------
+// Widget-text styles
+// ----------------------------------------------------------------------------
+.widget-timeline {
+
+  background-color: $background-color;
+  padding-bottom: 70px;
+
+  .title {
+    color: $title-color;
+  }
+
+  .more-info {
+    color: $moreinfo-color;
+  }
+
+  .event-description {
+	fill: white;
+	font-size: 14px;
+  }
+
+  .event-description-date {
+	fill: white;
+	font-size: 12px;
+  }
+}