Fixed graphic for Metric Results not displaying correctly

The graphic for Metric results previously did not have a set size. Changed it so that it fills the whole space available, and made it responsive to window resizing. That broke some particular cases of histories with few changes and number of points that wasn't very small. In addition, made the graphic display a single point instead of an unhelpful message.

Fixed graphic for Metric Results not displaying correctly
The graphic for Metric results previously did not have a set size. Changed it so that it fills the whole space available, and made it responsive to window resizing. That broke some particular cases of histories with few changes and number of points that wasn't very small. In addition, made the graphic display a single point instead of an unhelpful message.
Daniel
1 parent 48a6cd84
Showing 6 changed files with 34 additions and 16 deletions Show diff stats
app/assets/javascripts/module/graphic.js.coffee
app/assets/stylesheets/boilerplate/graphic.css
app/assets/stylesheets/module_results.css
app/views/modules/_metric_result.html.erb
app/views/modules/_metric_results.html.erb
app/views/modules/metric_history.js.erb
 class Module.Graphic
   constructor: (@container, @metric_name, @module_id) ->
-    $('tr#'+@container).slideToggle('slow')
-    this.load()
+    drawer = $('tr#'+@container)
+    if drawer.is(":hidden")
+      drawer.slideDown('slow')
+      this.load()
+    else
+      drawer.slideUp('slow')
   load: ->
     $.post '/modules/' + @module_id + '/metric_history',
@@ -11,7 +15,13 @@ class Module.Graphic
           }
   @display: (dates, values, container) ->
-    opts = {bezierCurve: false}
+    canvas = $('canvas#'+container).get(0)
+
+    opts = {
+      bezierCurve: false,
+      responsive: true,
+      maintainAspectRatio: false
+    }
     data = {
       labels : dates,
@@ -26,4 +36,8 @@ class Module.Graphic
       ]
     }
-    graphic = new Chart($('canvas#'+container).get(0).getContext("2d")).Line(data, opts)
+    if canvas.hasOwnProperty("chart") && canvas.chart != null
+      canvas.chart.destroy()
+      canvas.chart = null
+
+    canvas.chart = new Chart(canvas.getContext("2d")).Line(data, opts)
@@ -1,3 +0,0 @@
-div.graphic_container {
-  text-align: center;
-}
 \ No newline at end of file
@@ -0,0 +1,13 @@
+table.metric_results {
+    table-layout: fixed;
+}
+
+.metric_results div.graphic_container {
+    width: 100%;
+    max-height: 20em;
+}
+
+.metric_results div.graphic_container > canvas {
+    width: 100%;
+    height: 100%;
+}
 \ No newline at end of file
@@ -17,7 +17,6 @@
     <td colspan="4">
       <span id="loader_container<%= metric_result.id %>"><%= image_tag 'loader.gif' %> <%= t('loading_data') %></span>
       <canvas id="container<%= metric_result.id %>" class="graphic_container" style="display: none"></canvas>
-      <span id="container<%= metric_result.id %>" style="display: none"><%= t('only_point_printed_chart') %></span>
     </td>
   </tr>
 <% end %>
-<table class="table table-hover">
+<table class="table table-hover metric_results">
   <thead>
     <th><%= t('activemodel.attributes.metric_result.metric') %></th>
     <th><%= t('activemodel.attributes.metric_result.value') %></th>
@@ -10,11 +10,6 @@
   <% end %>
   $("#loader_<%= @container %>").hide();
-  if (dates.length > 1) {
-  	$("canvas#<%= @container %>").show();
-  	Module.Graphic.display(dates, values, '<%= @container %>');
-  }
-  else {
-  	$('span#<%= @container %>').show();
-  }
+  $("canvas#<%= @container %>").show();
+  Module.Graphic.display(dates, values, '<%= @container %>');
 <% end %>
 \ No newline at end of file
	@@ -1,3 +0,0 @@		@@ -1,3 +0,0 @@
1	-div.graphic_container {
2	- text-align: center;
3	-}
4	\ No newline at end of file	0	\ No newline at end of file
	@@ -0,0 +1,13 @@		@@ -0,0 +1,13 @@
		1	+table.metric_results {
		2	+ table-layout: fixed;
		3	+}
		4	+
		5	+.metric_results div.graphic_container {
		6	+ width: 100%;
		7	+ max-height: 20em;
		8	+}
		9	+
		10	+.metric_results div.graphic_container > canvas {
		11	+ width: 100%;
		12	+ height: 100%;
		13	+}
0	\ No newline at end of file	14	\ No newline at end of file
1	-<table class="table table-hover">	1	+<table class="table table-hover metric_results">
2	<thead>	2	<thead>
3	<th><%= t('activemodel.attributes.metric_result.metric') %></th>	3	<th><%= t('activemodel.attributes.metric_result.metric') %></th>
4	<th><%= t('activemodel.attributes.metric_result.value') %></th>	4	<th><%= t('activemodel.attributes.metric_result.value') %></th>