Graphing testje

checkresults.js

import React from "react";
import CheckResult from "./checkresult";
import SuggestCheck from "./suggestcheck";
import Actions from "../actions";
import aggregatedRisk from "../aggregated_risk";
import d3 from 'd3';
import nv from 'nvd3';


class Graph extends React.Component {

    componentDidMount() {
        this.updateGraph(this.props);
    }
    componentWillReceiveProps(nextProps) {
        this.updateGraph(nextProps);
    }
    updateGraph(props) {
        nv.addGraph(() => {
            var chart = nv.models.lineChart()
                .useInteractiveGuideline(true)
                //.transitionDuration(350)
                .showLegend(true)
                .showXAxis(true)
                .showYAxis(true);


            chart.xAxis
                .axisLabel("Time");

            chart.yAxis
                .axisLabel("Fnuppels");

            d3.select(this.refs.svg.getDOMNode())
                .datum(props.graphData)
                .call(chart);

            nv.utils.windowResize(chart.update);

            return chart;
        });
    }

    render () {
        return (
            <svg style={{width: "100%", height: "100%"}} ref='svg'></svg>
        );
    }
}


class CheckResults extends React.Component {
    constructor(props) {
        super(props);

        this.secChecks = [
            "security.cacheleak",
            "security.magversion",
            "security.supee5344",
            "security.supee5994",
            "security.supee6285",
            "security.supee6482",
            "security.openmagmi",
            "security.opendev",
            "security.defaultadminurl",
            "security.outdatedserverversion",
            "security.openversioncontrol"
        ];

        this.renderResult = this.renderResult.bind(this);
        this.rescan = this.rescan.bind(this);
    }

    renderResult(check) {
        return <CheckResult check={check} data={this.props.site.results[check]} isScanning={this.props.site.isScanning} key={check} />;
    }

    rescan() {
        Actions.scanSite(this.props.site.url);
    }

    render() {
        var sec = this.secChecks.map(this.renderResult);

        var risk = this.props.site.isScanning ? "loading" : aggregatedRisk(this.props.site.results);

        return (
            <div>
                <section className="dashboard">
                    <div className="status">
                        <h4>Risk level: <span className={risk}><span className="spinner"></span>{risk === "loading" ? "" : risk}</span></h4>
                        <h4>for <b>{this.props.site.displaySite}</b></h4>
                    </div>
                    <div>
                        <ul className="actions">
                            {risk === "loading" ? null : <li><a onClick={this.rescan}><span className="icon-refresh">rescan</span></a></li>}
                        </ul>
                    </div>
                </section>

                <section className="scan-results">
                    <article>
                        <dl>
                            <dt>Chart!</dt>
                            <dd></dd>
                        </dl>
                        <div>
                            <Graph graphData={[{key: 'lin', values: [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 3}]}]}/>
                        </div>

                    </article>
                    {sec}
                    <SuggestCheck site={this.props.site.url} suggestUrl={this.props.urls.suggest} />
                </section>
            </div>
        );
    }
}
CheckResults.propTypes = {
    site: React.PropTypes.object.isRequired,
    urls: React.PropTypes.object.isRequired
};

export default CheckResults;