JSFiddle - React, Tailwind, and code Playground

by nachiket

HTML

<script src="http://dl.dropbox.com/u/1414257/lib/raphael-min.js"></script>
<table id='containerTable'>
    <tr>
        <td>
            <div id="profileList">
                <div class='item' data='{name:"Harry Singh",circle:40,progress:45, bars:[22,21,19]}'>
                    <a href='javascript:;'><img src='http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50'/></a>
                </div>
                <div class='item' data='{name:"John Smith",circle:36,progress:27, bars:[38,20,43]}'>
                    <a href='javascript:;'><img src='http://www.gravatar.com/avatar/c5c64af9b7505777b53e05857616d39f'/></a>
                </div>
                <div class='item' data='{name:"Peter Jones",circle:61,progress:54, bars:[52,12,34]}'>
                    <a href='javascript:;'><img src='http://www.gravatar.com/avatar/3751204a1a48ba86eb6bb83a96640318'/></a>
                </div>
                <div class='item' data='{name:"Shelly Walters",circle:52,progress:85, bars:[21,34,56]}'>
                    <a href='javascript:;'><img src='http://www.gravatar.com/avatar/c6f539874bcd98210c786b4314488753'/></a>
                </div>
            </div>
        </td>
        <td>
            <div id="widgetContainer">
                <div id="userName">
                </div>
                <div id="roundDial">
                </div>
                <div id="dialValueContainer">
                    <div id="leftDialValue" class="dialValue">
                    </div>
                    <div id="rightDialValue" class="dialValue">
                    </div>
                </div>
                <div class='clearer'>&nbsp;</div>
                <div id='progressBarContainer'>
                    <div id='progressBar'></div>
                    <div id='progressBarValue'></div>
                </div>
                <div class='clearer'>&nbsp;</div>
                <div id='chartContainer'>
                    <div class='chartBoxContainer'>
                 ...

CSS

body {
    font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #666;
}
.clearer {
    clear:both;
}
#containerTable td{
    vertical-align: top;
}

#profileList {
    width:200px;
    height:300px;
}
.item:hover {
    opacity:0.6;
}
.item {
    width:80px;
    height:80px;
    float:left;
    margin:5px;
    border:5px solid #ccc;
}

#widgetContainer {
    width: 300px;
    margin-left: 35px;
}
#roundDial {
    margin:auto;
    width:200px;
}
#dialValueContainer {
    margin-top:-134px;
    font: 30px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#leftDialValue{
    float: left;   
}

#rightDialValue{
    float: right;   
}

#userName {
    text-align: center;
    font: 42px "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #999;
    height: 35px;
}
/*-----------------------*/
#progressBarContainer {
    margin: 126px auto 0 auto;
    width: 300px;
    height:40px;
}
#progressBarValue{
    text-align: center;
    font: 20px "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #666;
}

#box      { border:1px solid #F38630; width:300px; height:20px; }
#perc      { 
    background: #f38630; /* Old browsers */
    background: -moz-linear-gradient(left, #f38630 0%, #f9d552 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f38630), color-stop(100%,#f9d552)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #f38630 0%,#f9d552 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #f38630 0%,#f9d552 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(left, #f38630 0%,#f9d552 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38630', endColorstr='#f9d552',GradientType=1 ); /* IE6-9 */
    background: linear-gradient(left, #f38630 0%,#f9d552 100%); /* W3C */
    height:20px; 
}

#chartContainer {
    width: 300px;
    margin: 0 auto;
}
.chartBoxContainer {
    float:left; margin-left: 27px; 
    font:22px ...

JavaScript

var TextChanger = new Class({
    Extends: Fx,
    //Implements: Options,
    options: {
        suffix: '',
        transition:'expo:out'
    },
    initialize: function(elemId, options) {
        this.elemId = elemId;
        this.element = $(elemId);
        this.setOptions(options);
        this.value = 0;
    },
    set: function(value) {
        this.element.set('text', value.round() + this.options.suffix);
        return this;
    },
    setValue: function(value) {
        this.value = value;
    },
    changeTo: function(value) {
        this.start(this.value, value.toInt());
        this.setValue(value);
    }

});
var ValueWidget = new Class({
    initialize: function(elemId, width, height) {
        this.elemId = elemId;
        this.width = width;
        this.height = height;
        this.r = Raphael(elemId, width, height);
    }
});

var DialWidget = new Class({
    Extends: ValueWidget,
    Implements: Options,
    options: {
        leftColor: "#E0E4CC",
        rightColor: "#69D2E7",
        total: 100,
        radius: 60
    },
    initialize: function(elemId, width, height, options) {
        this.parent(elemId, width, height);
        this.setOptions(options);
        this.radius = this.options.radius;
        this.addCustomAttr();

        var param = {
            stroke: "#fff",
            "stroke-width": 30
        };
        this.drawMarks();
        this.hand = this.r.path().attr(param).attr({
            arc: [0, this.options.total, this.options.radius]
        });
    },
    addCustomAttr: function() {
        // Custom Attribute
        var widthByTwo = this.width / 2;
        var heightByTwo = this.height / 2;
        this.r.customAttributes.arc = function(value, total, R) {
            var alpha = 360 / total * value,
                a = (90 - alpha) * Math.PI / 180,
                x = widthByTwo + R * Math.cos(a),
                y = heightByTwo - R * Math.sin(a),
                //color = "hsb(".concat(Math.round(R) / 200, ",",...