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
};