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

The core of the TRC Client

import React from 'react';
import Reflux from 'reflux';
import StoreMixin from 'reflux-immutable/StoreMixin';
import {Block} from 'jsxstyle';
import {State, History} from 'react-router';

import DMTReportStore from 'trc-client-core/src/report/DMTReportStore';
import ReportActions from 'trc-client-core/src/report/ReportActions';
import Loader from 'trc-client-core/src/components/Loader';

import Column from 'bd-peanut/components/Column';
import Color from 'trc-client-core/src/components/Color';
import COLORS from 'trc-client-core/src/constants/Color';
import ColumnDataTable from 'trc-client-core/src/components/ColumnDataTable';
import PrintChartView from 'trc-client-core/src/report/PrintChartView';
import RegionActionSelect from 'trc-client-core/src/report/RegionActionSelect';

import Icon from 'trc-client-core/src/components/Icon.jsx';
import ModalManager from '../Modal/ModalManager';
import DMTReportDetailsView from 'trc-client-core/src/report/DMTReportDetailsView';

var DMTReportView = React.createClass({
    displayName: 'DMTReportView',
    mixins: [
        Reflux.listenTo(DMTReportStore, 'onStoreChange'),
        StoreMixin,
        State, 
        History
    ],
    getStoreState() {
        this.history.replaceState(null, '/report/dmt_overview', {regionCode: DMTReportStore.get('region')});
        return {
            report: DMTReportStore.get('dmtReport')
        };
    },
    componentWillMount() {
        ReportActions.fetchDmtData();  
    },
    onShowLegend() {
        ModalManager.showModal(DMTReportDetailsView);
    },
    render() {        
        return (
            <div>
                <h1>DMT Overview <Icon name="circleinfo" onClick={this.onShowLegend}></Icon></h1>
                <Block width="40%" marginTop="16"><RegionActionSelect /></Block>
                {this.renderChart()}
            </div>  
        );
    },
    renderChart() {        
        if(!this.state.report) {
            return <Loader></Loader>;
        }

        var data = this.state.report;
        var DTColor = Color(COLORS.TOYOTA.TECHNICAL.DT);
        var colors = [DTColor.hexString(), DTColor.lighten(0.5).hexString(), '#aaa', '#e6e6e6'];

        return (
            <div className="Chart Chart-stacked">
                <Column 
                    modifier="tight stacked" 
                    data={data.get('total').toJS()}
                    yAxisMax={data.get('chartMax')}
                    colors={[colors[3]]}
                    yAxisLabel={'Number of Staff'}
                />
                <Column 
                    modifier="tight stacked"
                    type="stacked"
                    data={data.get('achieved').toJS()} 
                    legend={['Certified', 'Eligible', 'Benchmark', 'Total']} 
                    colors={colors}
                    yAxisMax={data.get('chartMax')}
                    displayAxis={false}
                />
                <Column 
                    modifier="tight line"
                    data={data.get('benchmark').toJS()} 
                    colors={[colors[2]]}
                    yAxisMax={data.get('chartMax')}
                    displayAxis={false}
                />
                <ColumnDataTable headers={['Certified', 'Eligible', 'Total', 'Benchmark', 'Gap']} data={data.get('table').toJS()}/>

                <PrintChartView href={this.renderLink()}></PrintChartView>
            </div>
        );
    },
    renderLink() {
        return `/api/report/DMT${(this.props.location.query.regionCode === 'ALL_REGIONS') ? 'National' : 'CertReport'}/csv`;
    }
});

module.exports = DMTReportView;