path: root/src/App.js

import 'typeface-roboto';
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';
import { DateRangePicker, DayPickerRangeController } from 'react-dates';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import orange from '@material-ui/core/colors/orange';
import cyan from '@material-ui/core/colors/cyan';
import deepOrange from '@material-ui/core/colors/deepOrange';
import CssBaseline from '@material-ui/core/CssBaseline';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TablePagination from '@material-ui/core/TablePagination';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup';
import Grid from '@material-ui/core/Grid';
import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
import { PieChart, Pie, Cell, Tooltip } from 'recharts';

const default_chart_data = [{name: 'Work', value: 10, color: cyan[300]},
                            {name: 'Wasted', value: 10, color: cyan[300]}];

const gapi_base = 'https://www.googleapis.com/calendar/v3';

const theme = createMuiTheme({
    palette: {
        primary: {
            light: orange[300],
            main: orange[500],
            dark: orange[700],
            contrastText: "#fff"
        }
    }
});

/* eslint-disable no-undef */

function to_params(dict) {
    return Object.entries(dict).map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join('&');
}

function getAuthToken() {
    return new Promise(resolver =>
        chrome.identity.getAuthToken(
            {interactive: true}, token => resolver(token)));
}

function getCalendars(token) {
    return fetch(gapi_base + '/users/me/calendarList?' + to_params({access_token: token}),
            { method: 'GET', async: true })
        .then(response => response.json())
        .then(data => data.items);
}

function genEventsGetter(calId, timeMin, timeMax) {
    return token => fetch(gapi_base + '/calendars/' + calId + '/events?' + to_params({
        access_token: token,
        timeMin,
        timeMax
    }), { method: 'GET', async: true })
        .then(response => response.json())
        .then(data => data.items);
}

function getColors(token) {
    return fetch(gapi_base + '/colors?' + to_params({access_token: token}), { method: 'GET', async: true })
        .then(response => response.json());
}

function filterPatterns(patterns, calName) {
    return patterns.filter(p => {
        let re = new RegExp(p.cal);
        return re.test(calName);
    });
}

const styles = theme => ({
    root: {
        display: 'flex',
        height: '100vh',
    },
    icon: {
        margin: theme.spacing.unit * 2,
    },
    appBar: {
        zIndex: theme.zIndex.drawer + 1,
        transition: theme.transitions.create(['width', 'margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
    },
    title: {
        flexGrow: 1,
    },
    sectionTitle: {
        flex: '0 0 auto'
    },
    appBarSpacer: theme.mixins.toolbar,
    content: {
        flexGrow: 1,
        padding: theme.spacing.unit * 3,
        overflow: 'auto',
    },
    buttonSpacer: {
        marginBottom: theme.spacing.unit * 4,
    },
    patternTable: {
        overflowX: 'auto'
    },
    pieChart: {
        margin: '0 auto'
    },
    fab: {
        margin: theme.spacing.unit,
    }
});

function customizedLabel(props) {
    const {cx, cy, x, y, stroke, fill, name, value} = props;
    let anchor = "middle";
    const EPS = 2;
    let dx = 0;
    let dy = 0;
    if (x < cx - EPS) {
        dx = -5;
        anchor = "end"
    } else if (x > cx + EPS) {
        dx = 5;
        anchor = "start";
    }

    if (y < cy - EPS) {
        dy = -5;
    } else if (y > cy + EPS) {
        dy = 10;
    }

    return (<text x={x} y={y} dx={dx} dy={dy} fill={fill} textAnchor={anchor}>{`${name}`}</text>);
}

function ChromiclePieChart(props) {
    return (
    <Grid container spacing={0}>
      <Grid item xs={12} lg={6}>
        <PieChart width={400} height={300} className={props.classes.pieChart}>
          <Pie data={props.patternGraphData}
               cx={200}
               cy={150}
               outerRadius={60}
               fill={deepOrange[300]}
               label={customizedLabel}/>
          <Tooltip formatter={(value) => `${value.toFixed(2)} hr`}/>
        </PieChart>
      </Grid>
      <Grid item xs={12} lg={6}>
        <PieChart width={400} height={300} className={props.classes.pieChart}>
          <Pie data={props.calendarGraphData}
               cx={200}
               cy={150}
               innerRadius={40}
               outerRadius={70}
               fill={cyan[300]}
               label={customizedLabel}>
            {props.calendarGraphData.map(d => <Cell fill={d.color}/>)}
          </Pie>
          <Tooltip formatter={(value) => `${value.toFixed(2)} hr`}/>
        </PieChart>
      </Grid>
    </Grid>);
}

ChromiclePieChart.propTypes = {
    patternGraphData: PropTypes.object.isRequired,
    patterncalendarData: PropTypes.object.isRequired,
};

class Dashboard extends React.Component {
    state = {
        open: true,
        patterns: [],
        page: 0,
        rowsPerPage: 5,
        timeRange: null,
        token: getAuthToken(),
        patternGraphData: default_chart_data,
        calendarGraphData: default_chart_data,
        activePattern: null
    };

    cached = {
        calendars: {}
    };

    static patternHead = [
        {label: "Name", field: "name"},
        {label: "Calendar", field: "cal"},
        {label: &q