empact/app/scripts/charts.js

var Router = ReactRouter;

var BarChart = React.createClass({displayName: "BarChart",
    barHeight: 40,
    barMargin: 5,

    getInitialState: function() {
        return {points: [], max: 1};
    },

    componentDidMount: function() {
        $.get(this.props.api, function(res){
            var max = 1;
            res.map(function(el) {
                if (el.value > max) {
                    max = el.value
                }
            });
            this.setState({points: res, max: max});
        }.bind(this))
    },

    height: function() {
        if (this.state.points.length === 0) {
            return 0;
        } else {
            return this.y(this.state.points.length) - this.barMargin;
        }
    },

    y: function(i) {
        return i*(this.barHeight + this.barMargin);
    },

    render: function() {
        return (
            React.createElement("svg", {className: "barchart", width: "100%", height: this.height()}, 
                this.state.points.map(this.renderBar)
            )
        );
    },

    renderBar: function(point, i) {
        return (
            React.createElement(Bar, {key: point.item, point: point, i: i, link: this.props.link, 
                y: this.y(i), 
                width: point.value/this.state.max, 
                height: this.barHeight})
        );
    }
});

var Bar = React.createClass({displayName: "Bar",
    mixins: [Router.Navigation],
    handleClick: function(e) {
        this.transitionTo(this.props.link + this.props.point.item);
    },

    render: function() {
        var p = this.props.point
            w = this.props.width*500,
            label = p.item + ": " + p.value,
            tx = 10;
        if (label.length*15 > w) {
            tx = w + tx;
        }
        return (
            React.createElement("g", {onClick: this.handleClick}, 
                React.createElement("rect", {className: "bar", fill: Colors2[this.props.i], 
                    width: this.props.width*500, 
                    height: this.props.height, 
                    x: "0", y: this.props.y, rx: "2", ry: "2"}), 
                React.createElement("rect", {className: "label_underlay", x: tx-6, y: this.props.y+10, height: 20, width: label.length*10+5, rx: "3", ry: "3"}), 
                React.createElement("text", {className: "label", x: tx, y: this.props.y + 26}, label)
            )
        );
    }
});