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

       关于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) ->

 

            m for m 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

时间： 2024-09-03 05:58:00

开源：Angularjs示例--Sonar中项目使用语言分布图(CoffeeScript版)的相关文章

Angularjs示例：Sonar中项目使用语言分布图(CoffeeScript版)

关于SonarLanguage是什么东东,这里就不在描述了,如果你对它感兴趣的话,请移步到上篇随笔开源:Angularjs示例--Sonar中项目使用语言分布图.这里是最近学习CoffeeScript的练习版. CoffeeScript是一门简洁的,构架于JavaScript之上的预处理器语言,可以静态编译成JavaScript,语法主要受ruby和python影响,目前已经为众多rails和node项目采用.CoffeeScript不是JavaScript的超集,也不是完全替代品.Coffee

Angularjs示例：Sonar中项目使用语言分布图

在博客中介绍google的Angularjs 客户端PM模式框架很久了,今天发布一个关于AngularJs使用是简单示例SonarLanguage(示例位于Github:https://github.com/greengerong/SonarLanguage).本项目只是一个全为客户端的示例项目.项目的初始是我想看看在公司的项目中使用语言的分布比例,看看C#的份额,这一年一直坐着Java项目,却还是喜欢着C#,这只是个人问题,不存在语言之争.公司的项目在持续集成CI后都会传递build数据到So

CAS SSO 中设置默认语言为汉语(国际化)

CAS SSO 中设置默认语言为汉语(国际化)      1   闲来无聊学一下CAS单点登录的一个开源实现:但是觉得如果要用到自己项目中.页面是需要修改的.但首先设置了汉语,会对你的修改有很好的帮助.其实在我当前使用的版本中cas-server-4.0.0,注意我是自己下载源码(https://github.com/Jasig/cas)使用maven构建的.      2  参考资料:cas国际化      3  其实如果只是测试用完全不用那么麻烦,在你配置cas之后在首页你就能看到一大堆语言

分析jQuery Mobile中实现多语言的支持以及优缺点

随着移动技术的普及,基于 jQuery 并且针对移动平台的 JavaScript 框架 jQuery Mobile 应运而生.jQuery Mobile 不仅承袭了 jQuery 的诸多优点,更为移动平台定制了许多皮肤和开发部件,大大减轻了开发人员的工作量.随着 HTML5 技术的日渐完善,加上 JavaScript 技术本身具有的跨平台特性,jQuery Mobile 或者类似的框架必然拥有更加广泛的市场,这从 Adobe 放弃移动 Flash 和 Microsoft 边缘化 SilverLi

sonar源码分析-在linnx环境下shell触发sonar进行项目的原码分析出现异常，求解惑

问题描述 在linnx环境下shell触发sonar进行项目的原码分析出现异常,求解惑 在我已配置的环境中前几次进行触发sonar分析服务没有问题,但最近不知道是不是服务器停过电,服务以外终止运行了,现再启动后再次触发分析服务,就出现了异常,错位内容提示如下: [ERROR] [11:33:10.265] It looks like an analysis of 'talkyun tone v2.0.0-SNAPSHOT' is already running (started about a

什么是OpenStack 开源的云计算管理平台项目_OpenStack

OpenStack是一个由NASA(美国国家航空航天局)和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目. OpenStack是一个开源的云计算管理平台项目,由几个主要的组件组合起来完成具体工作.OpenStack支持几乎所有类型的云环境,项目目标是提供实施简单.可大规模扩展.丰富.标准统一的云计算管理平台.OpenStack通过各种互补的服务提供了基础设施即服务(IaaS)的解决方案,每个服务提供API以进行集成. OpenStack是一个旨在为公共及私

Codenomicon在全世界最大的开源加密服务 OpenSSL 中找到了一个严重漏洞

本月初,一家叫做Codenomicon的安全公司在全世界最大的开源加密服务 OpenSSL 中找到了一个严重漏洞,黑客利用此漏洞可盗走网站用于加密在线交易和 web 连接的密钥,受影响的服务器数量可能多达几十万,在圈子里造成了严重恐慌.幸好,Codenomicon在公布漏洞消息的同时也发布了补丁.不过比起亡羊补牢,更好的做法是防患于未然. 近日,包括Google.微软.Facebook在内的十二家科技巨头就发起了一个叫做 the Core Infrastructure Initiative的项目

在ASP中使用脚本语言

脚本语言介于HTML和Java,C++以及VisualBasic等编程语言之间.HTML通常用于格式化和链结文本.而编程语言通常用于向机器发出一系列复杂的指令.脚本语言介于两者之间但它的函数与编程语言更为相象一些.它与编程语言之间最大的区别是后者的语法和规则更为严格和复杂一些. 在服务器端使用脚本语言,需要在服务器端安装脚本引擎.脚本引擎是用于处理脚本的COM(组件对象模型)对象.ASP为脚本引擎提供主机环境并把.asp文件中的脚本交给脚本引擎处理.对于.asp文件中使用的每种脚本语言,都要将他

Eclipse中项目各资源目录的具体含义

Eclipse中项目各资源目录的具体含义见下图: 更多精彩内容:http://www.bianceng.cnhttp://www.bianceng.cn/Programming/Java/