improve interface; add logo

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>