JSFiddle - React, Tailwind, and code Playground

by whitewolf

HTML

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Sonar Project language status</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" media="all"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->    
    <script type="text/javascript" src="http://www.amcharts.com/lib/amcharts.js"></script>
    <script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
</head>
<body>
<div id="wrap" class="clearfix" ng-controller="report" ng-init="init();">
    <header>
        <div class="row-fluid">
            <h1 style="color: #007067; float: left; padding: 10px;">Sonar Project language status</h1>
        </div>
        <hr/>
    </header>

    <section class="section">
        <h2>Projects list</h2>
        <table class="table table-hover">
            <caption><h3>All Projects From Sonar</h3></caption>
            <thead style="font-weight: bold;">
            <tr>
                <td style="width: 70%;" ng-click="sort('name');">Project name <span><i class="icon-arrow-up" ng-show="sortCondition.key=='name' && 

sortCondition.sort.name"></i><i class="icon-arrow-down" ng-show="sortCondition.key=='name' && !sortCondition.sort.name"></i></span></td>
                <td ng-click="sort('lang');">Project Language <span><i class="icon-arrow-up" ng-show="sortCondition.key=='lang' && sortCondition.sort.lang"></i><i 

class="icon-arrow-down" ng-show="sortCondition.key=='lang' && !sortCondition.sort.lang"></i></span></td>
            </tr>
            </thead>
       ...

CSS

.menu {
    font-family: "Trebuchet Ms", arial, verdana, sans-serif;
}

#wrap {
    width: 960px;
    background: #fff;
    margin: 30px auto 30px auto;
    padding: 0;
    border: 1px solid #ccc;
}

#footer {
    text-align: center;
    padding: 20px;
    margin: 0;
    background: #efefef;
    border-top: 1px solid #ccc;
    color: #999;
    font-size: 0.8em;
    text-shadow: 0px 1px 1px #fff;
    position: relative;
    top: 0;
    left: 0;
}

.section {
    margin: auto;
    padding: 20px;

}

JavaScript

var app = angular.module('app', [])
    .value("$host", "http://nemo.sonarsource.org")
    .factory("$requestUrl", function ($host) {
        return  $host + "/api/resources";
    })
    .factory("$dynamicColor", function ($host) {
        var r = 10;
        var g = 10;
        var b = 0;
        return {
            getColor:function () {
                b = b + 200;
                r += 100;
                g += 400;
                return "#" + ((r + 256 * g + 65536 * b).toString(16));
            },
            reset:function () {
                r = 10;
                g = 10;
                b = 0;
            }
        };
    })
    .directive('chartData', function () {
        var drawChart = function (elementId, data) {
            var chart = new AmCharts.AmPieChart();
            // chart.startRadius = 10;
            chart.dataProvider = data;
            chart.titleField = "name";
            chart.valueField = "percentage";
            chart.colorField = "color";
            chart.labelsEnabled = false;
            chart.pullOutRadius = 0;
            chart.depth3D = 20;
            chart.angle = 45;
            var 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) {
                scope.already.push(function () {
                    var data = scope.$eval(attr.chartData);
                    drawChart(element[0].id, data);
                });
            }
        }
    });

var report = function ($scope, $window, $http, $requestUrl, $dynamicColor) {
    $scope.already = [];
    $window.angularJsonpCallBack = function (data) {
        this.data = data;
        var getObjectByKey = function (msr, key) {
            for (var d in msr) {
                if (msr[d].key == key) {
                   ...