escher/web/src/TimeGrid.js

import React from 'react';
import './TimeGrid.scss';

export default class TimeGrid extends React.Component {

    constructor(props) {
        super(props)

        this.state = null
    }

    componentDidMount() {
        fetch("/mock/histogram.json")
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        histogram: result
                    });
                },
                // Note: it's important to handle errors here
                // instead of a catch() block so that we don't swallow
                // exceptions from actual bugs in components.
                (error) => {
                    this.setState({
                        error
                    });
                }
            )
    }

    render() {

        if (this.state == null) {
            return <div id="timeGrid">Loading...</div>
        }

        const days = this.state.histogram.map(
            (day, index) => {
                return <TimeGridDay key={index} day={index + 1} date={day.date} counts={day.hours} />
            }
        );

        return (
            <div id="timeGrid">
                {days}
            </div>
        );
    }
}

const SHIFTS = [
    {
        "name": "zeta_shift",
        "display_name": "Zeta Shift"
    },
    {
        "name": "dawn_guard",
        "display_name": "Dawn Guard"
    },
    {
        "name": "alpha_flight",
        "display_name": "Alpha Flight"
    },
    {
        "name": "night_watch",
        "display_name": "Night Watch"
    },
]

function TimeGridDay(props) {
    const shifts = [0, 1, 2, 3].map(
        (shift) => {
            return (
                <TimeGridShift key={shift} shift={SHIFTS[shift].name} counts={props.counts.slice(shift * 6, (shift + 1) * 6)} />
            )
        }
    );

    return (
        <div className="day_histogram">
            <div className="info">
                <div className="day_number">Day {props.day}</div>
                <div className="day_date">{props.date}</div>
            </div>
            {shifts}
        </div>
    );
}

function TimeGridShift(props) {
    return (
        <div className={"shift_histogram " + props.shift}>
            {
                props.counts.map((count, i) => {
                    return <TimeGridBar key={i} shift={props.shift} count={count} />;
                })
            }
        </div>
    );
}

function TimeGridBar(props) {
    return (
        <div className={"histogram_bar " + props.shift} style={{ height: `${props.count * 10}%` }}></div>
    );
}

// export {TimeGrid};