added visualization chart for performance history
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
class PerformanceController < ApplicationController
|
||||
|
||||
def index
|
||||
@user = current_user
|
||||
@perf = current_user.performance
|
||||
end
|
||||
|
||||
end
|
||||
|
||||
+1
-1
@@ -13,7 +13,7 @@ class User < ActiveRecord::Base
|
||||
has_one :retirement, :foreign_key => :user_id, :primary_key => :user_id
|
||||
has_one :paid_time_off, :foreign_key => :user_id, :primary_key => :user_id
|
||||
has_one :work_info, :foreign_key => :user_id, :primary_key => :user_id
|
||||
has_one :performance, :foreign_key => :user_id, :primary_key => :user_id
|
||||
has_many :performance, :foreign_key => :user_id, :primary_key => :user_id
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="icon">
|
||||
<span class="fs1" aria-hidden="true" data-icon=""></span>
|
||||
<span class="fs1" aria-hidden="true" data-icon=""></span>
|
||||
</div>
|
||||
Benefit Forms
|
||||
</a>
|
||||
|
||||
@@ -118,10 +118,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Google Visualization JS -->
|
||||
<script type="text/javascript" src="https://www.google.com/jsapi">
|
||||
</script>
|
||||
|
||||
<%= javascript_include_tag "fullcalendar.js" %>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
<div class="dashboard-wrapper">
|
||||
<div class="main-container">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div class="widget">
|
||||
<div class="widget-header">
|
||||
<div class="title">
|
||||
<span class="fs1" aria-hidden="true" data-icon=""></span> Performance History Visualization
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-body">
|
||||
<div id="line_chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div class="widget">
|
||||
<div class="widget-header">
|
||||
<div class="title">
|
||||
<span class="fs1" aria-hidden="true" data-icon=""></span> Performance History
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-body">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:16%">Reviewer</th>
|
||||
<th style="width:16%">Date</th>
|
||||
<th style="width:16%">Score</th>
|
||||
<th style="width:16%">Comments</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% @perf.each do |p| %>
|
||||
<tr>
|
||||
<td><%= p.reviewer %></td>
|
||||
<td><%= p.date_submitted %></td>
|
||||
<td><%= p.score %></td>
|
||||
<td><%= p.comments %></td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
google.load("visualization", "1", {
|
||||
packages: ["corechart"]
|
||||
});
|
||||
|
||||
function drawChart2() {
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Year', 'Score'],
|
||||
<% @perf.each do |p| %>
|
||||
[ <%= "#{p.date_submitted}".inspect.html_safe %>, <%= p.score %> ],
|
||||
<% end %>
|
||||
]);
|
||||
|
||||
var options = {
|
||||
min: 1,
|
||||
max: 5,
|
||||
width: 'auto',
|
||||
height: '160',
|
||||
backgroundColor: 'transparent',
|
||||
colors: ['#e26666', '#579da9', '#1e825e', '#b5799e', '#dba26b'],
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
color: '#666666',
|
||||
fontSize: 11
|
||||
},
|
||||
showColorCode: true
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: 'black',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
chartArea: {
|
||||
left: 100,
|
||||
top: 10
|
||||
},
|
||||
focusTarget: 'category',
|
||||
hAxis: {
|
||||
textStyle: {
|
||||
color: 'black',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
textStyle: {
|
||||
color: 'black',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
pointSize: 8,
|
||||
chartArea: {
|
||||
left: 60,
|
||||
top: 10,
|
||||
height: '80%'
|
||||
},
|
||||
lineWidth: 2,
|
||||
};
|
||||
|
||||
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
|
||||
chart.draw(data, options);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
drawChart2()
|
||||
});
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user