aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rwxr-xr-xsrc/App.js48
-rw-r--r--src/Logo.js34
-rw-r--r--src/cr.svg25
3 files changed, 93 insertions, 14 deletions
diff --git a/src/App.js b/src/App.js
index f0023f1..a8acbc8 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,9 @@
+import React from 'react';
+import PropTypes from 'prop-types';
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';
@@ -28,7 +28,10 @@ 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 AddCircleIcon from '@material-ui/icons/AddCircle';
+import IconButton from '@material-ui/core/IconButton';
import { PieChart, Pie, Cell, Tooltip } from 'recharts';
+import Logo from './Logo';
const default_chart_data = [{name: 'Work', value: 10, color: cyan[300]},
{name: 'Wasted', value: 10, color: cyan[300]}];
@@ -92,9 +95,6 @@ const styles = theme => ({
display: 'flex',
height: '100vh',
},
- icon: {
- margin: theme.spacing.unit * 2,
- },
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
@@ -117,11 +117,15 @@ const styles = theme => ({
buttonSpacer: {
marginBottom: theme.spacing.unit * 4,
},
+ patternTableWrapper: {
+ overflowX: 'auto',
+ overflowY: 'hidden'
+ },
patternTable: {
- overflowX: 'auto'
+ minWidth: 600
},
pieChart: {
- margin: '0 auto'
+ margin: '0 auto',
},
fab: {
margin: theme.spacing.unit,
@@ -155,21 +159,24 @@ function ChromiclePieChart(props) {
return (
<Grid container spacing={0}>
<Grid item xs={12} lg={6}>
- <PieChart width={400} height={300} className={props.classes.pieChart}>
+ <div className={props.classes.patternTableWrapper}>
+ <PieChart width={400} height={250} className={props.classes.pieChart}>
<Pie data={props.patternGraphData}
cx={200}
- cy={150}
+ cy={125}
outerRadius={60}
fill={deepOrange[300]}
label={customizedLabel}/>
<Tooltip formatter={(value) => `${value.toFixed(2)} hr`}/>
</PieChart>
+ </div>
</Grid>
<Grid item xs={12} lg={6}>
- <PieChart width={400} height={300} className={props.classes.pieChart}>
+ <div className={props.classes.patternTableWrapper}>
+ <PieChart width={400} height={250} className={props.classes.pieChart}>
<Pie data={props.calendarGraphData}
cx={200}
- cy={150}
+ cy={125}
innerRadius={40}
outerRadius={70}
fill={cyan[300]}
@@ -178,6 +185,7 @@ function ChromiclePieChart(props) {
</Pie>
<Tooltip formatter={(value) => `${value.toFixed(2)} hr`}/>
</PieChart>
+ </div>
</Grid>
</Grid>);
}
@@ -231,6 +239,14 @@ class Dashboard extends React.Component {
this.setState({ patterns });
};
+ newPattern = () => {
+ let patterns = [{name: '', cal: '', event: '', idx: 0 },
+ ...this.state.patterns];
+ for (let i = 1; i < patterns.length; i++)
+ patterns[i].idx = i;
+ this.setState({ patterns });
+ };
+
analyze = () => {
if (!(this.state.startDate && this.state.endDate)) {
alert("Please choose a valid time range.");
@@ -319,7 +335,7 @@ class Dashboard extends React.Component {
className={classes.appBar}>
<Toolbar disableGutters={!this.state.open} className={classes.toolbar}>
<Typography component="h1" variant="h6" color="inherit" noWrap className={classes.title}>
- Chromicle
+ <Logo style={{width: '2em', verticalAlign: 'bottom', marginRight: '0.2em'}}/>Chromicle
</Typography>
</Toolbar>
</AppBar>
@@ -332,8 +348,12 @@ class Dashboard extends React.Component {
<FormGroup>
<Typography variant="h6" component="h1" gutterBottom>
Event Patterns
+ <IconButton
+ style={{marginBottom: '0.12em', marginLeft: '0.5em'}}
+ onClick={() => this.newPattern()}><AddCircleIcon /></IconButton>
</Typography>
- <Table>
+ <div className={classes.patternTableWrapper}>
+ <Table className={classes.patternTable}>
<TableHead>
<TableRow>{Dashboard.patternHead.map(s => (<TableCell>{s.label}</TableCell>))}</TableRow>
</TableHead>
@@ -352,7 +372,6 @@ class Dashboard extends React.Component {
{ position: 'absolute', right: 0, height: 48 }) ||
{ display: 'none' }}>
<DeleteOutlinedIcon
- className={classes.icon}
style={{ height: '100%', cursor: 'pointer' }}
onClick={() => this.removePattern(p.idx)} />
</span>
@@ -363,6 +382,7 @@ class Dashboard extends React.Component {
</TableRow>)}
</TableBody>
</Table>
+ </div>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
diff --git a/src/Logo.js b/src/Logo.js
new file mode 100644
index 0000000..a4036a9
--- /dev/null
+++ b/src/Logo.js
@@ -0,0 +1,34 @@
+import React from 'react';
+export default (props) =>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 98.905998 93.557997"
+ version="1.1"
+ style={props.style}>
+ <g id="g13"
+ transform="translate(-153.533,-203.047)">
+ <g id="g29">
+ <g
+ id="g27">
+ <polygon
+ id="polygon7"
+ points="252.439,241.924 234.556,288.703 185.103,296.605 153.533,257.728 171.416,210.949 220.869,203.047 "
+ style={{fill: '#ff8000'}} />
+ <g
+ id="g11"
+ transform="translate(167.24355,224.20734)">
+ <text
+ id="text9"
+ style={{fontStyle:'normal',
+ fontVariant:'normal',
+ fontWeight:'normal',
+ fontStretch:'normal',
+ fontSize:75,
+ fontFamily:'TypoPRO Fantasque Sans Mono',
+ fill:'#ffeade'}}
+ transform="translate(0.586,49.072)">Cr</text>
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
diff --git a/src/cr.svg b/src/cr.svg
new file mode 100644
index 0000000..b2df947
--- /dev/null
+++ b/src/cr.svg
@@ -0,0 +1,25 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 98.905998 93.557997"
+ version="1.1">
+ <g id="g13"
+ transform="translate(-153.533,-203.047)">
+ <g id="g29">
+ <g
+ id="g27">
+ <polygon
+ id="polygon7"
+ points="252.439,241.924 234.556,288.703 185.103,296.605 153.533,257.728 171.416,210.949 220.869,203.047 "
+ style="fill:#ff8000" />
+ <g
+ id="g11"
+ transform="translate(167.24355,224.20734)">
+ <text
+ id="text9"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:75px;font-family:'Fantasque Sans Mono';fill:#ffeade;"
+ transform="translate(0.586,49.072)">Cr</text>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
Powered by cgit, Themed by Ted Yin.