开源:Angularjs示例--Sonar中项目使用语言分布图(CoffeeScript版)

  1. 云栖社区>
  2. 博客>
  3. 正文

开源:Angularjs示例--Sonar中项目使用语言分布图(CoffeeScript版)

ghost丶桃子 2016-05-23 17:02:04 浏览937
展开阅读全文

       关于SonarLanguage是什么东东,这里就不在描述了,如果你对它感兴趣的话,请移步到上篇随笔开源:Angularjs示例--Sonar中项目使用语言分布图。这里是最近学习CoffeeScript的练习版。

     CoffeeScript是一门简洁的,构架于JavaScript之上的预处理器语言,可以静态编译成JavaScript,语法主要受ruby和python影响,目前已经为众多rails和node项目采用。CoffeeScript不是JavaScript的超集,也不是完全替代品。CoffeeScript有点在于:

  1. 更少,更紧凑,和更清晰的代码
  2. 通过规避和改变对JavaScript中不良部分的使用,只留下精华,让代码减少出错率,更容易维护
  3. 在很多常用模式的实现上采用了JavaScript中的最佳实践
  4. CoffeeScript生成的JavaScript代码都可以完全通过JSLint的检测

   多的也不想说那么多了,这里主要是个简介,CoffeeScript的练笔示例。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
app = angular.module('app', [])
 
    .value("$host""http://nemo.sonarsource.org")
 
    .factory("$requestUrl", ($host) -> "#{$host}/api/resources")
 
    .factory("$dynamicColor", ($host) ->
 
        [r,g,b] = [10,10,0]
 
        {
 
          getColor: ->
 
               [r,g,b] = [(r+100), (g+400), (b + 200)]
 
               "##{(r + 256 * g + 65536 * b).toString 16 }"
 
          ,
 
          reset: ->
 
               [r,g,b] = [10,10,0]
 
        };
 
    ).directive('chartData', ->
 
            drawChart = (elementId, data) ->
 
               chart = new AmCharts.AmPieChart()
 
               chart.dataProvider = data
 
               chart.titleField = "name"
 
               chart.valueField = "percentage"
 
               chart.colorField = "color"
 
               chart.labelsEnabled = false
 
               chart.pullOutRadius = 0
 
               chart.depth3D = 20
 
               chart.angle = 45
 
               legend = new AmCharts.AmLegend()
 
               legend.makerType = "square"
 
               legend.align = "center"
 
               chart.addLegend legend
 
 
 
 
               chart.write elementId
 
               chart;
 
 
 
 
            (scope, element, attr) ->
 
                
 
                  scope.already.push( ->
 
                     data = scope.$eval(attr.chartData);
 
                     drawChart(element[0].id, data);
 
                  if element[0].id
 
    )
 
 
 
 
report = ($scope, $window, $http, $requestUrl, $dynamicColor) ->
 
    $scope.already = []
 
    $window.angularJsonpCallBack = (data) ->
 
         @data = data
 
         getObjectByKey = (msr , key) ->
 
            for in msr when m.key == key
 
          
 
         $scope.gridSource = $scope.projects = data
 
 
 
 
         ready = (queues) -> angular.forEach(queues, (q) -> q() )
 
         ready $scope.already
 
 
 
 
    $scope.getLanguageChartData = ->
 
         data = _.groupBy $scope.projects , (project) -> project.lang
 
         $dynamicColor.reset()
 
         chartData = _.map(data, (array, key) ->
 
                      "name":key
 
                      "percentage":array.length,
 
                      "color":$dynamicColor.getColor())
 
 
 
 
         _.sortBy(chartData, (num) -> num.percentage )
 
   
 
    $scope.search = ->
 
        source = []
 
        if not this.searchName
 
            source = @projects
 
        else
 
            source = _.filter @projects, (p) ->
 
                       p.name.toLowerCase().indexOf $scope.searchName.toLowerCase() != -1
 
        
 
        source = _.sortBy(source, (p) -> p[$scope.sortCondition.key].toLowerCase()) if @sortCondition and @sortCondition.key
 
           
 
        source.reverse() if @sortCondition.sort and not @sortCondition.sort[$scope.sortCondition.key]
 
         
 
        @gridSource = source
 
 
 
 
    $scope.sort = (name) ->
 
        @sortCondition ?= {}
 
        @sortCondition.sort ?= {}
 
        @sortCondition.key = name
 
        @sortCondition.sort[name] = not @sortCondition.sort[name]
 
        @search();
 
 
 
 
    $scope.init = ->
 
        $http.jsonp "#{$requestUrl}?callback=angularJsonpCallBack"
 
  
 
app.controller "report", report

  

最终编译的JavaScript为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
var app, report;
 
app = angular.module('app', []).value("$host""http://nemo.sonarsource.org").factory("$requestUrl"function($host) {
  return "" + $host + "/api/resources";
}).factory("$dynamicColor"function($host) {
  var b, g, r, _ref;
  _ref = [10, 10, 0], r = _ref[0], g = _ref[1], b = _ref[2];
  return {
    getColor: function() {
      var _ref1;
      _ref1 = [r + 100, g + 400, b + 200], r = _ref1[0], g = _ref1[1], b = _ref1[2];
      return "#" + ((r + 256 * g + 65536 * b).toString(16));
    },
    reset: function() {
      var _ref1;
      return _ref1 = [10, 10, 0], r = _ref1[0], g = _ref1[1], b = _ref1[2], _ref1;
    }
  };
}).directive('chartData'function() {
  var drawChart;
  drawChart = function(elementId, data) {
    var chart, legend;
    chart = new AmCharts.AmPieChart();
    chart.dataProvider = data;
    chart.titleField = "name";
    chart.valueField = "percentage";
    chart.colorField = "color";
    chart.labelsEnabled = false;
    chart.pullOutRadius = 0;
    chart.depth3D = 20;
    chart.angle = 45;
    legend = new AmCharts.AmLegend();
    legend.makerType = "square";
    legend.align = "center";
    chart.addLegend(legend);
    chart.write(elementId);
    return chart;
  };
  return function(scope, element, attr) {
    if (element[0].id) {
      return scope.already.push(function() {
        var data;
        data = scope.$eval(attr.chartData);
        return drawChart(element[0].id, data);
      });
    }
  };
});
 
report = function($scope, $window, $http, $requestUrl, $dynamicColor) {
  $scope.already = [];
  $window.angularJsonpCallBack = function(data) {
    var getObjectByKey, ready;
    this.data = data;
    getObjectByKey = function(msr, key) {
      var m, _i, _len, _results;
      _results = [];
      for (_i = 0, _len = msr.length; _i < _len; _i++) {
        m = msr[_i];
        if (m.key === key) {
          _results.push(m);
        }
      }
      return _results;
    };
    $scope.gridSource = $scope.projects = data;
    ready = function(queues) {
      return angular.forEach(queues, function(q) {
        return q();
      });
    };
    return ready($scope.already);
  };
  $scope.getLanguageChartData = function() {
    var chartData, data;
    data = _.groupBy($scope.projects, function(project) {
      return project.lang;
    });
    $dynamicColor.reset();
    chartData = _.map(data, function(array, key) {
      return {
        "name": key,
        "percentage": array.length,
        "color": $dynamicColor.getColor()
      };
    });
    return _.sortBy(chartData, function(num) {
      return num.percentage;
    });
  };
  $scope.search = function() {
    var source;
    source = [];
    if (!this.searchName) {
      source = this.projects;
    else {
      source = _.filter(this.projects, function(p) {
        return p.name.toLowerCase().indexOf($scope.searchName.toLowerCase() !== -1);
      });
    }
    if (this.sortCondition && this.sortCondition.key) {
      source = _.sortBy(source, function(p) {
        return p[$scope.sortCondition.key].toLowerCase();
      });
    }
    if (this.sortCondition.sort && !this.sortCondition.sort[$scope.sortCondition.key]) {
      source.reverse();
    }
    return this.gridSource = source;
  };
  $scope.sort = function(name) {
    var _base, _ref, _ref1;
    if ((_ref = this.sortCondition) == null) {
      this.sortCondition = {};
    }
    if ((_ref1 = (_base = this.sortCondition).sort) == null) {
      _base.sort = {};
    }
    this.sortCondition.key = name;
    this.sortCondition.sort[name] = !this.sortCondition.sort[name];
    return this.search();
  };
  return $scope.init = function() {
    return $http.jsonp("" + $requestUrl + "?callback=angularJsonpCallBack");
  };
};
 
app.controller("report", report);

  

就这么多了,关于CoffeeScript请参考

  1. CoffeeScript
  2. CoffeeScript详解
  3. CoffeeScript: The beautiful way to write JavaScript
  4. 当jQuery遭遇CoffeeScript——妙不可言

本人也会在随后的随笔中继续更新CoffeeScript,请持续关注。


作者:破  狼 
出处:http://www.cnblogs.com/whitewolf/ 
本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-个人独立博客博客园--破狼51CTO--破狼。http://www.cnblogs.com/whitewolf/archive/2012/12/20/2827141.html


网友评论

登录后评论
0/500
评论
ghost丶桃子
+ 关注