trc-client-core/src/report/TriangleChart.jsx

The core of the TRC Client

import React from 'react';
var SVG_ARRAY = [
    "230.7,0.5 172.9,100.5 288.4,100.5 ",
    "115.5,200.5 345.8,200.5 288.1,100.5 173.2,100.5 ",
    "57.7,300.5 403.6,300.5 345.8,200.5 115.5,200.5 ",
    "0,400.5 461.3,400.5 403.6,300.5 57.7,300.5 "
];

var TriangleChart = React.createClass({
    displayName: 'TriangleChart',
    getInitialState() {
        return {
            width: 0  
        };
    },
    render() {
        return (
            <div>
                <svg viewBox="0 0 461.3 399.5">                
                    {this.props.data.map(this.renderSegment)}
                </svg>
            </div>
        );
    },
    renderSegment(data, key) {
        var yOffset = (key === 0) ? '.6em' : '.25em';
        return <g key={data.key}>
            <polygon fill={data.backgroundColor} points={SVG_ARRAY[key]}/>
            <text 
                textAnchor="middle" 
                dominantBaseline="middle" 
                x="230.65" 
                y={(key * 100) + 60}
                dy={yOffset}
                style={{
                    fill: 'white',
                    fontSize: '2em'
                }}
                >{data.value}</text>
        </g>;
    }
});

module.exports = TriangleChart;