diff options
Diffstat (limited to 'templates/project/widgets/graph')
-rw-r--r-- | templates/project/widgets/graph/graph.coffee | 14 | ||||
-rw-r--r-- | templates/project/widgets/graph/graph.html | 4 | ||||
-rw-r--r-- | templates/project/widgets/graph/graph.scss | 36 |
3 files changed, 39 insertions, 15 deletions
diff --git a/templates/project/widgets/graph/graph.coffee b/templates/project/widgets/graph/graph.coffee index 8b56a87..9b2eeec 100644 --- a/templates/project/widgets/graph/graph.coffee +++ b/templates/project/widgets/graph/graph.coffee @@ -1,22 +1,32 @@ class Dashing.Graph extends Dashing.Widget @accessor 'current', -> + return @get('displayedValue') if @get('displayedValue') points = @get('points') if points points[points.length - 1].y ready: -> + 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) + height = (Dashing.widget_base_dimensions[1] * container.data("sizey")) @graph = new Rickshaw.Graph( element: @node - width: $(@node).parent().width() + width: width + height: height series: [ { color: "#fff", - data: [{ x: 0, y: 0}] + data: [{x:0, y:0}] } ] ) + + @graph.series[0].data = @get('points') if @get('points') + x_axis = new Rickshaw.Graph.Axis.Time(graph: @graph) + y_axis = new Rickshaw.Graph.Axis.Y(graph: @graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT) @graph.render() onData: (data) -> diff --git a/templates/project/widgets/graph/graph.html b/templates/project/widgets/graph/graph.html index 8680efb..d1794db 100644 --- a/templates/project/widgets/graph/graph.html +++ b/templates/project/widgets/graph/graph.html @@ -1,5 +1,5 @@ <h1 class="title" data-bind="title"></h1> -<h2 class="value" data-bind="current | prettyNumber"></h2> +<h2 class="value" data-bind="current | prettyNumber | prepend prefix"></h2> -<p class="text-moreinfo" data-bind="moreinfo"></p>
\ No newline at end of file +<p class="more-info" data-bind="moreinfo"></p>
\ No newline at end of file diff --git a/templates/project/widgets/graph/graph.scss b/templates/project/widgets/graph/graph.scss index f2a1e21..71cd4d4 100644 --- a/templates/project/widgets/graph/graph.scss +++ b/templates/project/widgets/graph/graph.scss @@ -1,13 +1,12 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- -$background-color: #2e864f; -$value-color: #fff; +$background-color: #dc5945; -$title-color: lighten($background-color, 75%); -$moreinfo-color: lighten($background-color, 45%); +$title-color: rgba(255, 255, 255, 0.7); +$moreinfo-color: rgba(255, 255, 255, 0.3); +$tick-color: rgba(0, 0, 0, 0.4); -$graph_color: lighten($background-color, 75%); // ---------------------------------------------------------------------------- // Widget-graph styles @@ -17,14 +16,13 @@ $graph_color: lighten($background-color, 75%); background-color: $background-color; position: relative; + svg { - color: $graph_color; + position: absolute; opacity: 0.4; fill-opacity: 0.4; - position: absolute; - bottom: 0; - left: 0; - right: 0; + left: 0px; + top: 0px; } .title, .value { @@ -36,7 +34,7 @@ $graph_color: lighten($background-color, 75%); color: $title-color; } - .text-moreinfo { + .more-info { color: $moreinfo-color; font-weight: 600; font-size: 20px; @@ -46,6 +44,22 @@ $graph_color: lighten($background-color, 75%); .x_tick { position: absolute; bottom: 0; + .title { + font-size: 20px; + color: $tick-color; + opacity: 0.5; + padding-bottom: 3px; + } + } + + .y_ticks { + font-size: 20px; + fill: $tick-color; + fill-opacity: 1; + } + + .domain { + display: none; } }
\ No newline at end of file |