diff --git a/app/models/paid_time_off.rb b/app/models/paid_time_off.rb index e4e4dd0..f2bdcdd 100644 --- a/app/models/paid_time_off.rb +++ b/app/models/paid_time_off.rb @@ -7,7 +7,7 @@ class PaidTimeOff < ActiveRecord::Base self.sick_days_earned - self.sick_days_taken end - def pto_days_reamining + def pto_days_remaining self.pto_earned - self.pto_taken end diff --git a/app/views/paid_time_off/index.html.erb b/app/views/paid_time_off/index.html.erb index e937cff..371c116 100644 --- a/app/views/paid_time_off/index.html.erb +++ b/app/views/paid_time_off/index.html.erb @@ -42,7 +42,21 @@
-
+
+
+ + + +
+
+
+
+
+ Paid Time Off +
+
+
+
@@ -63,14 +77,15 @@ $('.date_picker').daterangepicker({ }); $(document).ready(function () { - drawChart3() + drawChart1() + drawChart2() }); google.load("visualization", "1", { packages: ["corechart"] }); -function drawChart3() { +function drawChart1() { var data = google.visualization.arrayToDataTable([ ['Current Date', 'Days Earned', 'Days Taken', 'Days Remaining'], [ <%= "As of today: #{Date.today}".inspect.html_safe %>, <%= @pto.sick_days_earned %>, <%= @pto.sick_days_taken %>, <%= @pto.sick_days_remaining %> ], ]); @@ -100,7 +115,41 @@ function drawChart3() { }, }; - var chart = new google.visualization.ColumnChart(document.getElementById('column_chart')); + var chart = new google.visualization.ColumnChart(document.getElementById('column_chart_1')); + chart.draw(data, options); + } + +function drawChart2() { + var data = google.visualization.arrayToDataTable([ + ['Current Date', 'Days Earned', 'Days Taken', 'Days Remaining'], + [ <%= "As of today: #{Date.today}".inspect.html_safe %>, <%= @pto.pto_earned %>, <%= @pto.pto_taken %>, <%= @pto.pto_days_remaining %> ], ]); + + var options = { + width: 'auto', + height: '160', + backgroundColor: 'transparent', + colors: ['#579da9', '#e26666', '#1e825e'], + tooltip: { + textStyle: { + color: '#666666', + fontSize: 11 + }, + showColorCode: true + }, + legend: { + textStyle: { + color: 'black', + fontSize: 12 + } + }, + chartArea: { + left: 60, + top: 10, + height: '80%' + }, + }; + + var chart = new google.visualization.ColumnChart(document.getElementById('column_chart_2')); chart.draw(data, options); }