Dashboard with Google Chart

Gemfile

@@ -71,8 +71,7 @@ gem 'redis-search'
 gem 'syslog-logger'
 gem "recaptcha", :require => "recaptcha/rails"
 
-gem 'puma'
+gem "chartkick"
-gem 'request-log-analyzer'
 gem 'usagewatch'
 
 # Gems used only for assets and not required

app/helpers/application_helper.rb

@@ -1,5 +1,5 @@
 module ApplicationHelper
-
+  Time.zone = ActiveSupport::TimeZone[+8.hours]
   FLASH_NOTICE_KEYS = [:error, :notice, :warning]
 
 
@@ -223,25 +223,49 @@ module ApplicationHelper
   end
 
   def display_visitors(options={})
-    Impression.where(options).and(:referrer.ne => nil).distinct(:session_hash).count
+    Impression.where(options).count
   end
 
   def display_visitors_today
-    display_visitors(created_at: {'$gte' => Date.today.beginning_of_day, '$lte' => Date.today.end_of_day})
+    display_visitors(created_at: {'$gte' => Time.now.beginning_of_day, '$lte' => Time.now})
   end
 
   def display_visitors_this_week
-    display_visitors(created_at: {'$gte' => Date.today.beginning_of_week, '$lte' => Date.today.end_of_week})
+    display_visitors(created_at: {'$gte' => Time.now-7.days, '$lte' => Time.now})
   end
 
   def display_visitors_this_month
-    display_visitors(created_at: {'$gte' => Date.today.beginning_of_month, '$lte' => Date.today.end_of_month})
+    display_visitors(created_at: {'$gte' => Time.now-30.days, '$lte' => Time.now})
   end
 
   def display_visitors_this_year
-    display_visitors(created_at: {'$gte' => Date.today.beginning_of_year, '$lte' => Date.today.end_of_year})
+    display_visitors(created_at: {'$gte' => Time.now-365.days, '$lte' => Time.now})
   end
 
+  def get_month_traffic
+    result = []
+    (0..30).each do |i|
+      visits = Impression.where( created_at: {
+        '$gte' => Time.now.beginning_of_day-i.days, 
+        '$lte' => Time.now.end_of_day-i.days}
+        ).count
+      result.push([ Time.now.beginning_of_day-i.days, visits])
+    end
+    [:name=> t(:visitors_count),:data=>result]
+  end
+
+  # def get_today_traffic
+  #   result = []
+  #   (0..30).each do |i|
+  #     the_day = i.day.ago
+  #     visits = Impression.where( created_at: {'$gte' => the_day.beginning_of_day, '$lte' => the_day.end_of_day}).count
+  #     # result.push([ the_day.to_time.to_i, visits])
+  #     result.push([ the_day.strftime("%m %d"), visits])
+  #     # result.push({'x'=> i, 'y'=> visits})
+  #   end
+  #   result
+  # end
+
   def display_date_time(object)
     object.strftime("%Y-%m-%d %H:%M")
   end

app/views/admin/dashboards/_server_loading.erb

@@ -2,399 +2,45 @@
     <h2>
         <i class="icons-book-2"></i>
         <span class="break"></span>
-        Server Loading
+        <%= t(:server_usage) %>
     </h2>
 </div>
 <div class="box-content" style='overflow: hidden;'>
-    <div id="cpu_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></div>
+    <span id="cpu_usage" style="display:inline-block;margin: 0 auto"></span>
-    <div id="mem_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></div>
+    <span id="mem_usage" style="display:inline-block;margin: 0 auto"></span>
-    <div id="disk_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></div>
+    <span id="disk_usage" style="display:inline-block;margin: 0 auto"></span>
 </div>
 <script type="text/javascript">
+google.load('visualization', '1', {packages:['gauge']});
+
+var UsageTpye = {'CPU':{'fn':'get_cpu_usage','chart':null,'id':'cpu_usage','interval':2000},
+                                'Mem':{'fn':'get_mem_usage','chart':null,'id':'mem_usage','interval':5000},
+                                'Disk':{'fn':'get_disk_usage','chart':null,'id':'disk_usage','interval':30000}};
+
 $(function () {
-    get_cpu_usage();
+    $.each(UsageTpye,function(type,option){
-    get_mem_usage();
+        option['chart'] = new google.visualization.Gauge(document.getElementById(option['id']));
-    get_disk_usage();
+        update_usage(type,option);
+
+        setInterval(function() { update_usage(type,option); }, option['interval']);
+    });
 });
 
-function get_cpu_usage(){
+function update_usage(type,option){
-    $('#cpu_usage').highcharts({
+    $.get('/admin/dashboards/'+option['fn'],function(usage){
-      chart: {
+        var data = google.visualization.arrayToDataTable([
-            type: 'gauge',
+          ['Label', 'Value'],
-            plotBackgroundColor: null,
+          [type, parseInt(usage)]
-            plotBackgroundImage: null,
+        ]);
-            plotBorderWidth: 0,
-            plotShadow: false
-        },
 
-        title: {
+        var options = {
-            text: 'CPU Usage'
+          width: 400, height: 180,
-        },
+          redFrom: 80, redTo: 100,
+          yellowFrom:60, yellowTo: 80,
+          minorTicks: 5
+        };
         
-        pane: {
+        option['chart'].draw(data, options);
-            startAngle: -150,
-            endAngle: 150,
-            background: [{
-                backgroundColor: {
-                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                    stops: [
-                        [0, '#FFF'],
-                        [1, '#333']
-                    ]
-                },
-                borderWidth: 0,
-                outerRadius: '109%'
-            }, {
-                backgroundColor: {
-                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                    stops: [
-                        [0, '#333'],
-                        [1, '#FFF']
-                    ]
-                },
-                borderWidth: 1,
-                outerRadius: '107%'
-            }, {
-                // default background
-            }, {
-                backgroundColor: '#DDD',
-                borderWidth: 0,
-                outerRadius: '105%',
-                innerRadius: '103%'
-            }]
-        },
-           
-        // the value axis
-        yAxis: {
-            min: 0,
-            max: 100,
-            
-            minorTickInterval: 'auto',
-            minorTickWidth: 1,
-            minorTickLength: 10,
-            minorTickPosition: 'inside',
-            minorTickColor: '#666',
-    
-            tickPixelInterval: 30,
-            tickWidth: 2,
-            tickPosition: 'inside',
-            tickLength: 10,
-            tickColor: '#666',
-            labels: {
-                step: 2,
-                rotation: 'auto'
-            },
-            title: {
-                text: ''
-            },
-            plotBands: [{
-                from: 0,
-                to: 60,
-                color: '#55BF3B' // green
-            }, {
-                from: 60,
-                to: 80,
-                color: '#DDDF0D' // yellow
-            }, {
-                from: 80,
-                to: 100,
-                color: '#DF5353' // red
-            }]        
-        },
-    
-        series: [{
-            name: 'CPU Usage',
-            data: [0],
-            dataLabels: {
-                formatter: function () {
-                    var usage = this.y;
-                    return '<span style="color:#339">'+ usage + ' %</span><br/>';
-                },
-                backgroundColor: {
-                    linearGradient: {
-                        x1: 0,
-                        y1: 0,
-                        x2: 0,
-                        y2: 1
-                    },
-                    stops: [
-                        [0, '#DDD'],
-                        [1, '#FFF']
-                    ]
-                }
-            },
-            tooltip: {
-                valueSuffix: ' %'
-            }
-        }]
-    },
-    function(chart) {
-        update_cpu_usage(chart);
-        setInterval(function() {
-          update_cpu_usage(chart);
-        }, 2000);
-    });
-}
-
-function update_cpu_usage(chart){
-    $.get('/admin/dashboards/get_cpu_usage',function(usage){
-            var point = chart.series[0].points[0],
-            newVal = Math.round(usage);
-            point.update(newVal);
-    });
-}
-
-function get_mem_usage(){
-    $('#mem_usage').highcharts({
-      chart: {
-            type: 'gauge',
-            plotBackgroundColor: null,
-            plotBackgroundImage: null,
-            plotBorderWidth: 0,
-            plotShadow: false
-        },
-        
-        title: {
-            text: 'Memory Usage'
-        },
-        
-        pane: {
-            startAngle: -150,
-            endAngle: 150,
-            background: [{
-                backgroundColor: {
-                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                    stops: [
-                        [0, '#FFF'],
-                        [1, '#333']
-                    ]
-                },
-                borderWidth: 0,
-                outerRadius: '109%'
-            }, {
-                backgroundColor: {
-                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                    stops: [
-                        [0, '#333'],
-                        [1, '#FFF']
-                    ]
-                },
-                borderWidth: 1,
-                outerRadius: '107%'
-            }, {
-                // default background
-            }, {
-                backgroundColor: '#DDD',
-                borderWidth: 0,
-                outerRadius: '105%',
-                innerRadius: '103%'
-            }]
-        },
-           
-        // the value axis
-        yAxis: {
-            min: 0,
-            max: 100,
-            
-            minorTickInterval: 'auto',
-            minorTickWidth: 1,
-            minorTickLength: 10,
-            minorTickPosition: 'inside',
-            minorTickColor: '#666',
-    
-            tickPixelInterval: 30,
-            tickWidth: 2,
-            tickPosition: 'inside',
-            tickLength: 10,
-            tickColor: '#666',
-            labels: {
-                step: 2,
-                rotation: 'auto'
-            },
-            title: {
-                text: ''
-            },
-            plotBands: [{
-                from: 0,
-                to: 60,
-                color: '#55BF3B' // green
-            }, {
-                from: 60,
-                to: 80,
-                color: '#DDDF0D' // yellow
-            }, {
-                from: 80,
-                to: 100,
-                color: '#DF5353' // red
-            }]        
-        },
-    
-        series: [{
-            name: 'Memory Usage',
-            data: [0],
-            dataLabels: {
-                formatter: function () {
-                    var usage = this.y;
-                    return '<span style="color:#339">'+ usage + ' %</span><br/>';
-                },
-                backgroundColor: {
-                    linearGradient: {
-                        x1: 0,
-                        y1: 0,
-                        x2: 0,
-                        y2: 1
-                    },
-                    stops: [
-                        [0, '#DDD'],
-                        [1, '#FFF']
-                    ]
-                }
-            },
-            tooltip: {
-                valueSuffix: ' %'
-            }
-        }]
-    },
-    function(chart) {
-        update_mem_usage(chart)
-        setInterval(function() {
-            update_mem_usage(chart);  
-        }, 5000);
-    });
-}
-
-function update_mem_usage(chart){
-    $.get('/admin/dashboards/get_mem_usage',function(usage){
-            var point = chart.series[0].points[0],
-            newVal = Math.round(usage);
-            point.update(newVal);
-    });
-}
-
-function get_disk_usage(){
-    $('#disk_usage').highcharts({
-      chart: {
-            type: 'gauge',
-            plotBackgroundColor: null,
-            plotBackgroundImage: null,
-            plotBorderWidth: 0,
-            plotShadow: false
-        },
-        
-        title: {
-            text: 'Disk Usage'
-        },
-        
-        pane: {
-            startAngle: -150,
-            endAngle: 150,
-            background: [{
-                backgroundColor: {
-                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                    stops: [
-                        [0, '#FFF'],
-                        [1, '#333']
-                    ]
-                },
-                borderWidth: 0,
-                outerRadius: '109%'
-            }, {
-                backgroundColor: {
-                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                    stops: [
-                        [0, '#333'],
-                        [1, '#FFF']
-                    ]
-                },
-                borderWidth: 1,
-                outerRadius: '107%'
-            }, {
-                // default background
-            }, {
-                backgroundColor: '#DDD',
-                borderWidth: 0,
-                outerRadius: '105%',
-                innerRadius: '103%'
-            }]
-        },
-           
-        // the value axis
-        yAxis: {
-            min: 0,
-            max: 100,
-            
-            minorTickInterval: 'auto',
-            minorTickWidth: 1,
-            minorTickLength: 10,
-            minorTickPosition: 'inside',
-            minorTickColor: '#666',
-    
-            tickPixelInterval: 30,
-            tickWidth: 2,
-            tickPosition: 'inside',
-            tickLength: 10,
-            tickColor: '#666',
-            labels: {
-                step: 2,
-                rotation: 'auto'
-            },
-            title: {
-                text: ''
-            },
-            plotBands: [{
-                from: 0,
-                to: 60,
-                color: '#55BF3B' // green
-            }, {
-                from: 60,
-                to: 80,
-                color: '#DDDF0D' // yellow
-            }, {
-                from: 80,
-                to: 100,
-                color: '#DF5353' // red
-            }]        
-        },
-    
-        series: [{
-            name: 'Disk Usage',
-            data: [0],
-            dataLabels: {
-                formatter: function () {
-                    var usage = this.y;
-                    return '<span style="color:#339">'+ usage + ' %</span><br/>';
-                },
-                backgroundColor: {
-                    linearGradient: {
-                        x1: 0,
-                        y1: 0,
-                        x2: 0,
-                        y2: 1
-                    },
-                    stops: [
-                        [0, '#DDD'],
-                        [1, '#FFF']
-                    ]
-                }
-            },
-            tooltip: {
-                valueSuffix: ' %'
-            }
-        }]
-    },
-    function(chart) {
-        update_disk_usage(chart);
-        setInterval(function() {
-            update_disk_usage(chart);  
-        }, 60000);
-    });
-}
-
-function update_disk_usage(chart){
-    $.get('/admin/dashboards/get_disk_usage',function(usage){
-            var point = chart.series[0].points[0],
-            newVal = Math.round(usage);
-            point.update(newVal);
     });
 }
 </script>

app/views/admin/dashboards/_traffic_loading.erb

@@ -2,61 +2,33 @@
     <h2>
         <i class="icons-book-2"></i>
         <span class="break"></span>
-        Traffic Loading
+        <%= t(:monthly_traffic)%>
     </h2>
 </div>
 <div class="box-content">
-<div id="month_traffic" style="min-width: 310px; height: 230px; margin: 0 auto"></div>
+    <div id="month_traffic" style="min-width: 310px; margin: 0 auto">
+        <%= line_chart  get_month_traffic, :height => "200px", :name => 'Visit',
+                    :library => {
+                        legend: 'none',
+                        chartArea:{ width: '95%', left: 50, right: 0},
+                        hAxis:{format:'MMM-d',gridlines:{color: '#CCC', count: 31}},
+                        vAxis:{minValue:-100,viewWindowMode: 'maximized'}
+                     } %>
+    </div>
 </div>
 <script type="text/javascript">
-$(function () {
+    renderLineChart = function (element, series, opts) {
-    $.getJSON('/admin/dashboards/get_month_traffic', function (data) {
+      waitForLoaded(function () {
-            // console.log(data);
+        var options = jsOptions(series, opts);
-            dates = [];
+        var data = createDataTable(series, "datetime");
-            visits = [];
+        var formatter = new google.visualization.DateFormat({ 
-            $.each(data,function(key,value){
+             pattern: options.pattern 
-                // console.log(value);
+        }); 
-                $.each(value,function(date,visit){
+        formatter.format(data, 0);
-                     dates.push(date);
+        var chart = new google.visualization.LineChart(element);
-                     visits.push(visit);
+        resize(function () {
+          chart.draw(data, options);
         });
       });
-            
+    };
-            $('#month_traffic').highcharts({
-                chart: {
-                    type: 'spline'
-                },
-                title: {
-                    text: 'Monthly Traffic',
-                    x: 0 //center
-                },
-                xAxis: {
-                    categories: dates
-                },
-                yAxis: {
-                    title: {
-                        text: 'Number of visits'
-                    },
-                    plotLines: [{
-                        value: 0,
-                        width: 1,
-                        color: '#808080'
-                    }]
-                },
-                tooltip: {
-                    valueSuffix: ''
-                },
-                legend: {
-                    layout: 'vertical',
-                    align: 'right',
-                    verticalAlign: 'middle',
-                    borderWidth: 0
-                },
-                series: [{
-                    name: 'Visits',
-                    data: visits
-                }]
-            });
-    });
-});
 </script>

app/views/admin/dashboards/index.html.erb

@@ -1,20 +1,15 @@
-<script src="http://code.highcharts.com/highcharts.js"></script>
+<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
-<script src="http://code.highcharts.com/highcharts-more.js"></script>
-<script src="http://code.highcharts.com/modules/exporting.js"></script>
-
-<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
-<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
-<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />
-
 <section id="main-wrap">
   <div class="wrap-inner initial">
   <div class="row-fluid">
+      <% if is_admin? %>
       <div class="box span6">
         <div id='server_loading'>
           <%= render 'server_loading' %>
         </div>
       </div>
-      <div class="box span4">
+      <% end %>
+      <div class="box span6">  
         <div id='traffic'>
           <%= render 'traffic' %>
         </div>

config/locales/en.yml

@@ -289,6 +289,7 @@ en:
   menu_enabled_for: Menu enabled for
   module: Module
   module_authorization: Module Authorization
+  monthly_traffic: Monthly Traffic
   more_plus: more+
   most_visited_page: Most Visited Page
   multilingual: Multilingual
@@ -377,6 +378,7 @@ en:
   search_: Search
   search_google: Search Google
   setup_member: Member setup
+  server_usage: Server Usage
   show: Show
   show_mode:
     index: Index
@@ -516,6 +518,7 @@ en:
   vertical: Vertical
   view: View
   view_count: View count
+  visitors_count: Visits
   visitors_this_month: This month's visitors
   visitors_this_week: This week's visitors
   visitors_this_year: This year's visitors

config/locales/zh_tw.yml

@@ -290,6 +290,7 @@ zh_tw:
   menu_enabled_for: 選單啟用
   module: 模組
   module_authorization: 模組授權
+  monthly_traffic: 本月流量
   more_plus: 更多+
   most_visited_page: 最多瀏覽頁面
   multilingual: 多語系
@@ -378,6 +379,7 @@ zh_tw:
   search_: 搜尋
   search_google: 搜尋Google
   setup_member: 會員設定
+  server_usage: 主機負載
   show: 顯示
   show_mode:
     index: 檢索
@@ -517,6 +519,7 @@ zh_tw:
   vertical: 垂直的
   view: 檢視
   view_count: 查看次數
+  visitors_count: 造訪人次
   visitors_this_month: 本月造訪人次
   visitors_this_week: 本星期造訪人次
   visitors_this_year: 今年造訪人次