From 53b9cbee72733cc995aa3fea601c9fe6ec9f962d Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Thu, 23 Jun 2016 17:21:18 +0800
Subject: [PATCH] added hightcharts and added some api for sonar

---
 .../quality_analysis_controller.rb            |   2 +-
 .../quality_analysis/_hightchars.html.erb     | 376 ++++++++++++++++++
 app/views/quality_analysis/_show.html.erb     | 174 ++------
 3 files changed, 411 insertions(+), 141 deletions(-)
 create mode 100644 app/views/quality_analysis/_hightchars.html.erb

diff --git a/app/controllers/quality_analysis_controller.rb b/app/controllers/quality_analysis_controller.rb
index fd000aa72..58ae02add 100644
--- a/app/controllers/quality_analysis_controller.rb
+++ b/app/controllers/quality_analysis_controller.rb
@@ -60,7 +60,7 @@ class QualityAnalysisController < ApplicationController
     else
       @name_flag = false
       resource_id = params[:resource_id]
-      complexity_date = open("http://123.59.135.93:8891/api/resources/index?resource=139&depth=0&metrics=complexity,function_complexity,class_complexity,file_complexity,lines,file_line,files,functions,classes,directories").read
+      complexity_date = open("http://123.59.135.93:8891/api/resources/index?resource=139&depth=0&metrics=sqale_rating,function_complexity,duplicated_lines_density,comment_lines_density,sqale_index,lines,file_line,files,functions,classes,directories").read
       @complexity =JSON.parse(complexity_date).first
     end
   end
diff --git a/app/views/quality_analysis/_hightchars.html.erb b/app/views/quality_analysis/_hightchars.html.erb
new file mode 100644
index 000000000..5acb0e20f
--- /dev/null
+++ b/app/views/quality_analysis/_hightchars.html.erb
@@ -0,0 +1,376 @@
+<script>
+    $(function () {
+        $('#container_complex').highcharts({
+
+                    chart: {
+                        type: 'gauge',
+                        plotBackgroundColor: null,
+                        plotBackgroundImage: null,
+                        plotBorderWidth: 0,
+                        plotShadow: false
+                    },
+                    title: false,
+                    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: 1000,
+                        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: 'km/h'
+//                        },
+                        plotBands: [{
+                            from: 0,
+                            to: 500,
+                            color: '#55BF3B' // green
+                        }, {
+                            from: 500,
+                            to: 800,
+                            color: '#DDDF0D' // yellow
+                        }, {
+                            from: 800,
+                            to: 1000,
+                            color: '#DF5353' // red
+                        }]
+                    },
+
+//                  delete hightcharts.com
+                    credits:{
+                        enabled: false
+                    },
+                    series: [{
+                        name: 'Fuction Complexity',
+                        data: [<%= @complexity["msr"][5]["frmt_val"] %>]
+//                        tooltip: {
+//                            valueSuffix: ' km/h'
+//                        }
+                    }]
+
+                },
+                // Add some life
+                function (chart) {
+                    if (!chart.renderer.forExport) {
+                        setInterval(function () {
+                            var point = chart.series[0].points[0],
+                                    newVal,
+                                    inc = Math.round((Math.random() - 0.5) * 20);
+
+                            newVal = point.y + inc;
+                            if (newVal < 0 || newVal > 200) {
+                                newVal = point.y - inc;
+                            }
+
+                            point.update(newVal);
+
+                        }, 3000);
+                    }
+                });
+    });
+
+//    quality
+    $(function () {
+        $('#container_quality').highcharts({
+
+                    chart: {
+                        type: 'gauge',
+                        plotBackgroundColor: null,
+                        plotBackgroundImage: null,
+                        plotBorderWidth: 0,
+                        plotShadow: false
+                    },
+                    title: false,
+                    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%'
+                        }]
+                    },
+
+                    xAxis: {
+                        title: {
+                            text: '复杂度',
+                            x: -23, //center设置标题的位置
+                            y: 6
+                        },
+                        style:{
+                            fontSize: '18px'
+                        }
+                    },
+
+                    // 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: 'km/h'
+//                        },
+                        plotBands: [{
+                            from: 0,
+                            to: 5,
+                            color: '#55BF3B' // green
+                        }, {
+                            from: 6,
+                            to: 10,
+                            color: '#adde18' // yellow
+                        }, {
+                            from: 11,
+                            to: 20,
+                            color: '#DDDF0D' // red
+                        }, {
+                            from: 21,
+                            to: 50,
+                            color: '#df8538' // yellow
+                        }, {
+                            from: 51,
+                            to: 100,
+                            color: '#DF5353' // yellow
+                        }]
+                    },
+
+//                  delete hightcharts.com
+                    credits:{
+                        enabled: false
+                    },
+                    series: [{
+                        name: 'SQALE Rating',
+                        data: [<%= @complexity["msr"][5]["frmt_val"] %>]
+//                        tooltip: {
+//                            valueSuffix: ' km/h'
+//                        }
+                    }]
+
+                },
+                // Add some life
+                function (chart) {
+                    if (!chart.renderer.forExport) {
+                        setInterval(function () {
+                            var point = chart.series[0].points[0],
+                                    newVal,
+                                    inc = Math.round((Math.random() - 0.5) * 20);
+
+                            newVal = point.y + inc;
+                            if (newVal < 0 || newVal > 200) {
+                                newVal = point.y - inc;
+                            }
+
+                            point.update(newVal);
+
+                        }, 3000);
+                    }
+                });
+    });
+
+    //    quality
+    $(function () {
+        $('#container_quality').highcharts({
+
+                    chart: {
+                        type: 'gauge',
+                        plotBackgroundColor: null,
+                        plotBackgroundImage: null,
+                        plotBorderWidth: 0,
+                        plotShadow: false
+                    },
+                    title: false,
+                    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%'
+                        }]
+                    },
+
+                    xAxis: {
+                        style:{
+                            fontSize: '18px'
+                        }
+                    },
+
+                    // 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: 'km/h'
+//                        },
+                        plotBands: [{
+                            from: 0,
+                            to: 5,
+                            color: '#55BF3B' // green
+                        }, {
+                            from: 6,
+                            to: 10,
+                            color: '#adde18' // yellow
+                        }, {
+                            from: 11,
+                            to: 20,
+                            color: '#DDDF0D' // red
+                        }, {
+                            from: 21,
+                            to: 50,
+                            color: '#df8538' // yellow
+                        }, {
+                            from: 51,
+                            to: 100,
+                            color: '#DF5353' // yellow
+                        }]
+                    },
+
+//                  delete hightcharts.com
+                    credits:{
+                        enabled: false
+                    },
+                    series: [{
+                        name: 'duplicated_lines_density',
+                        data: [<%= @complexity["msr"][5]["frmt_val"] %>]
+//                        tooltip: {
+//                            valueSuffix: ' km/h'
+//                        }
+                    }]
+
+                },
+                // Add some life
+                function (chart) {
+                    if (!chart.renderer.forExport) {
+                        setInterval(function () {
+                            var point = chart.series[0].points[0],
+                                    newVal,
+                                    inc = Math.round((Math.random() - 0.5) * 20);
+
+                            newVal = point.y + inc;
+                            if (newVal < 0 || newVal > 200) {
+                                newVal = point.y - inc;
+                            }
+
+                            point.update(newVal);
+
+                        }, 3000);
+                    }
+                });
+    });
+
+</script>
\ No newline at end of file
diff --git a/app/views/quality_analysis/_show.html.erb b/app/views/quality_analysis/_show.html.erb
index cf81680b0..674507c4c 100644
--- a/app/views/quality_analysis/_show.html.erb
+++ b/app/views/quality_analysis/_show.html.erb
@@ -1,132 +1,19 @@
 <p> lines: <%= @complexity["msr"][0]["frmt_val"] %></p>
+<p> classes: <%= @complexity["msr"][1]["frmt_val"] %></p>
 <p> files: <%= @complexity["msr"][2]["frmt_val"] %></p>
 <p> directories: <%= @complexity["msr"][3]["frmt_val"] %></p>
-<p> classes: <%= @complexity["msr"][1]["frmt_val"] %></p>
 <p> function: <%= @complexity["msr"][4]["frmt_val"] %></p>
-<p> total Complexity: <%= @complexity["msr"][5]["frmt_val"] %></p>
-<p>file_complexity: <%=  @complexity["msr"][6]["frmt_val"] %></p>
-<p>class_complexity: <%=  @complexity["msr"][7]["frmt_val"] %></p>
-<p>function_complexity: <%=  @complexity["msr"][8]["frmt_val"] %></p>
+<p> comment_lines_density: <%= @complexity["msr"][5]["frmt_val"] %></p>
+<p> function_complexity: <%= @complexity["msr"][6]["frmt_val"] %></p>
+<p> duplicated_lines_density: <%= @complexity["msr"][7]["frmt_val"] %></p>
+<p> sqale_index: <%= @complexity["msr"][8]["frmt_val"] %></p>
+<p> sqale_rating: <%= @complexity["msr"][9]["frmt_val"] %></p>
+
+<%dd %>
+
+
 <%= javascript_include_tag 'highcharts','highcharts-more' %>
-<script>
-    $(function () {
-        $('#container_complex').highcharts({
-
-                    chart: {
-                        type: 'gauge',
-                        plotBackgroundColor: null,
-                        plotBackgroundImage: null,
-                        plotBorderWidth: 0,
-                        plotShadow: false
-                    },
-//
-//                    title: {
-//                        text: '复杂度'
-//                    },
-
-                    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: 200,
-
-                        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: 'km/h'
-                        },
-                        plotBands: [{
-                            from: 0,
-                            to: 120,
-                            color: '#55BF3B' // green
-                        }, {
-                            from: 120,
-                            to: 160,
-                            color: '#DDDF0D' // yellow
-                        }, {
-                            from: 160,
-                            to: 200,
-                            color: '#DF5353' // red
-                        }]
-                    },
-
-                    series: [{
-                        name: 'Speed',
-                        data: [80],
-                        tooltip: {
-                            valueSuffix: ' km/h'
-                        }
-                    }]
-
-                },
-                // Add some life
-                function (chart) {
-                    if (!chart.renderer.forExport) {
-                        setInterval(function () {
-                            var point = chart.series[0].points[0],
-                                    newVal,
-                                    inc = Math.round((Math.random() - 0.5) * 20);
-
-                            newVal = point.y + inc;
-                            if (newVal < 0 || newVal > 200) {
-                                newVal = point.y - inc;
-                            }
-
-                            point.update(newVal);
-
-                        }, 3000);
-                    }
-                });
-    });
-</script>
-
-
-
+  <%= render :partial => "hightchars" %>
   <div class="project_r_h">
     <h2 class="project_h2" style="width:180px;">SonarQube质量分析</h2>
   </div>
@@ -134,23 +21,30 @@
   <div class="cl"></div>
   <div class="tac f20 fb mt35 mb30">项目代码质量分析报告</div>
   <div class="analysis-tag-wrap f16"> <span class="analysis-tag fl mr15"></span> <span class="fb fl">概要信息</span></div>
-  <div class="analysis-block mt10 mb40 flex f14">
-    <div class="analysis-genral"><img src="images/homepageImage.jpg" width="90" class="image-cir" />
-      <p class="fontGrey3 mt15">质量等级</p>
-      <p class="fontBlue2 pr">A<span class="f8 c_white analysis-genral-icon b_green2 borderRadius">正常</span></p>
+  <div class="analysis-block mt10 mb40 f14">
+    <div class="flex">
+      <div class="analysis-genral">
+        <p id="container_quality" style="max-width:260px;min-height:260px;width:260px; margin:0 auto;"></p>
+        <p class="fontGrey3">质量等级</p>
+        <p class="fontBlue2 pr">A<span class="f8 c_white analysis-genral-icon b_green2 borderRadius">正常</span></p>
+      </div>
+      <div class="analysis-genral" >
+        <p id="container_complex" style="max-width:260px;min-height:260px;width:260px; margin:0 auto;"></p>
+        <p class="fontGrey3">复杂度</p>
+        <p class="fontBlue2 pr">44<span class="f8 c_white analysis-genral-icon b_green2 borderRadius">正常</span></p>
+      </div>
     </div>
-    <div class="analysis-genral" >
-      <p id="container_complex">复杂度</p>
-      <p class="fontGrey3 mt15">复杂度</p>
-      <p class="fontBlue2 pr">44<span class="f8 c_white analysis-genral-icon b_green2 borderRadius">正常</span></p>
-    </div>
-    <div class="analysis-genral"><img src="images/homepageImage.jpg" width="90" class="image-cir" />
-      <p class="fontGrey3 mt15">重复</p>
-      <p class="fontBlue2 pr">44%<span class="f8 c_white analysis-genral-icon b_green2 borderRadius">正常</span></p>
-    </div>
-    <div class="analysis-genral"><img src="images/homepageImage.jpg" width="90" class="image-cir" />
-      <p class="fontGrey3 mt15">注释率</p>
-      <p class="fontBlue2 pr">12%<span class="f8 c_white analysis-genral-icon b_red borderRadius">偏低</span></p>
+    <div class="flex">
+      <div class="analysis-genral">
+        <p id="container_repeat" style="max-width:260px;min-height:260px;width:260px; margin:0 auto;"></p>
+        <p class="fontGrey3 mt15">重复</p>
+        <p class="fontBlue2 pr">44%<span class="f8 c_white analysis-genral-icon b_green2 borderRadius">正常</span></p>
+      </div>
+      <div class="analysis-genral">
+        <p id="container_zhushi" style="max-width:260px;min-height:260px;width:260px; margin:0 auto;"></p>
+        <p class="fontGrey3">注释率</p>
+        <p class="fontBlue2 pr">12%<span class="f8 c_white analysis-genral-icon b_red borderRadius">偏低</span></p>
+      </div>
     </div>
   </div>
   <div class="analysis-tag-wrap f16"> <span class="analysis-tag fl mr15"></span> <span class="fb fl mr10">质量等级</span><span class="mr10 fontGrey2"><span class="c_red f18" style="margin-top:-5px; display:inline-block;">2</span>/5分</span><span class="fontGrey2">可定性评价为：<span class="c_red">质量中等</span></span></div>