improve the UI

5 files changed, 80 insertions, 70 deletions

diff --git a/src/Chart.tsx b/src/Chart.tsx
index d70e4f0..170b5fa 100644
--- a/src/Chart.tsx
+++ b/src/Chart.tsx
@@ -2,7 +2,9 @@ import React from 'react';
 import { Theme, withStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import cyan from '@material-ui/core/colors/cyan';
-import { ResponsivePie } from '@nivo/pie';
+import { Doughnut } from 'react-chartjs-2';
+import 'chartjs-plugin-labels';
+import Color from 'color';
 import { defaultChartColor } from './theme';
 import { PatternGraphData } from './graph';
 
@@ -19,28 +21,22 @@ type PatternPieChartProps = {
     },
     height?: number | string,
     data: PatternGraphData[],
-    radialLabelsLinkStrokeWidth?: number,
-    radialLabelsLinkDiagonalLength?: number,
     borderWidth: number,
     labelFontSize : number,
-    marginTop: number,
-    marginBottom: number,
-    marginLeft: number,
-    marginRight: number,
-    padAngle: number
+    paddingTop: number,
+    paddingBottom: number,
+    paddingLeft: number,
+    paddingRight: number,
 };
 
 export class PatternPieChart extends React.Component<PatternPieChartProps> {
     public static defaultProps = {
-        radialLabelsLinkStrokeWidth: 1,
         borderWidth: 1,
-        radialLabelsLinkDiagonalLength: 16,
         labelFontSize: 12,
-        marginTop: 40,
-        marginBottom: 40,
-        marginLeft: 80,
-        marginRight: 80,
-        padAngle: 0.7
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
     };
     render() {
         let { height, data, labelFontSize } = this.props;
@@ -51,43 +47,55 @@ export class PatternPieChart extends React.Component<PatternPieChartProps> {
                 }
             }
         };
-    return (
-            <ResponsivePie
-            data={data.map(p => ({
-                id: p.name,
-                label: p.name,
-                value: p.value,
-                color: p.color ? p.color: defaultChartColor
-            }))}
-            margin={{
-                top: this.props.marginTop,
-                right: this.props.marginRight,
-                bottom: this.props.marginBottom,
-                left: this.props.marginLeft
-            }}
-            innerRadius={0.5}
-            padAngle={this.props.padAngle}
-            cornerRadius={3}
-            colorBy={d => d.color as string}
-            borderWidth={this.props.borderWidth}
-            borderColor="inherit:darker(0.2)"
-            radialLabelsSkipAngle={10}
-            radialLabelsTextXOffset={6}
-            radialLabelsTextColor="#333333"
-            radialLabelsLinkOffset={0}
-            radialLabelsLinkDiagonalLength={this.props.radialLabelsLinkDiagonalLength}
-            radialLabelsLinkHorizontalLength={24}
-            radialLabelsLinkStrokeWidth={this.props.radialLabelsLinkStrokeWidth}
-            radialLabelsLinkColor="inherit"
-            sliceLabel={(d) => `${d.value.toFixed(2)} hr`}
-            slicesLabelsSkipAngle={10}
-            slicesLabelsTextColor="#ffffff"
-            animate={true}
-            motionStiffness={90}
-            motionDamping={15}
-            theme={theme}
-            tooltipFormat={v => `${v.toFixed(2)} hr`} />
-    );
+        const colors = data.map(p => p.color ? p.color: defaultChartColor);
+        return (
+            <Doughnut data={(canvas: any) => {
+                return {
+                datasets: [{
+                    data: data.map(p => p.value),
+                    backgroundColor: colors,
+                    borderWidth: data.map(() => this.props.borderWidth),
+                    hoverBorderWidth: data.map(() => this.props.borderWidth),
+                    hoverBorderColor: colors.map(c => Color(c).darken(0.2).string())
+                }],
+                labels: data.map(p => p.name)
+                };
+            }} options={{
+                tooltips: {
+                    callbacks: {
+                        label: (item: any, data: any) => (
+                            `${data.labels[item.index]}: ` +
+                            `${data.datasets[item.datasetIndex].data[item.index].toFixed(2)} hr`
+                        )
+                    }
+                },
+                plugins: {
+                    labels: {
+                        render: (args: any) => `${args.value.toFixed(2)} hr`,
+                        fontColor: (data: any) => {
+                            var rgb = Color(data.dataset.backgroundColor[data.index]).rgb().object();
+                            var threshold = 140;
+                            var luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b;
+                            return luminance > threshold ? 'black' : 'white';
+                        },
+                        arc: false,
+                        overlap: false
+                    }
+                },
+                legend: {
+                    position: 'bottom'
+                },
+                layout: {
+                    padding: {
+                        left: this.props.paddingLeft,
+                        right: this.props.paddingRight,
+                        top: this.props.paddingTop,
+                        bottom: this.props.paddingBottom
+                    }
+                },
+                maintainAspectRatio: false,
+                responsive: true}} />
+        );
     }
 }
 
diff --git a/src/background.ts b/src/background.ts
index c42281d..84f1f43 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -371,5 +371,8 @@ chrome.tabs.onCreated.addListener(function(tab) {
 });
 
 chrome.runtime.onInstalled.addListener(async () => {
-    try { await auth.logout(); } catch (_) {}
+    try {
+        await auth.logout();
+        calData = {};
+    } catch (_) {}
 });
diff --git a/src/gapi.ts b/src/gapi.ts
index 4178426..116d873 100644
--- a/src/gapi.ts
+++ b/src/gapi.ts
@@ -56,7 +56,9 @@ export class Auth {
 
     async getAuthToken(): Promise<string> {
         let b = await this.loggedIn();
-        if (b) return _getAuthToken(false);
+        //if (b) return _getAuthToken(false);
+        // FIXME: Chrome OS dev has a bug
+        if (b) return _getAuthToken(true);
         else throw GApiError.notLoggedIn;
     }
 
diff --git a/src/graph.ts b/src/graph.ts
index 8b385a3..5c0ab7f 100644
--- a/src/graph.ts
+++ b/src/graph.ts
@@ -74,11 +74,12 @@ export async function getGraphData(
             if (ratio < 1e-2) minorSum += d.value;
             else majorParts.push(d);
         });
-        majorParts.push({
-            name: 'Other',
-            value: minorSum,
-            color: defaultChartColor,
-        });
+        if (minorSum > 0)
+            majorParts.push({
+                name: 'Other',
+                value: minorSum,
+                color: defaultChartColor,
+            });
         return majorParts;
     };
     for (let i = 0; i < patterns.length; i++) {
diff --git a/src/tab.tsx b/src/tab.tsx
index 8edd67e..86e7af3 100644
--- a/src/tab.tsx
+++ b/src/tab.tsx
@@ -112,22 +112,18 @@ class Tab extends React.Component<TabProps> {
                         data={d.data}
                         height={400}
                         borderWidth={2}
-                        marginTop={60} marginBottom={60}
-                        marginLeft={100} marginRight={100}
-                        radialLabelsLinkDiagonalLength={40}
-                        labelFontSize={14}
-                        padAngle={0.8} />
+                        paddingTop={20}
+                        paddingBottom={50}
+                        labelFontSize={14} />
                     </div>) ||
                     <div style={{
-                        marginLeft: 100,
-                        marginRight: 100,
-                        marginTop: 60,
+                        marginTop: 20,
                         marginBottom: 60,
                         textAlign: 'center'
                     }}>
                         <div style={{
                             position: 'relative',
-                            height: 250,
+                            height: 270,
                             display: 'inline-block'
                         }}>
                         <Donut style={{
@@ -135,8 +131,8 @@ class Tab extends React.Component<TabProps> {
                         }} />
                         <div style={{
                             position: 'absolute',
-                            top: -40,
-                            left: 55,
+                            bottom: -40,
+                            left: 60,
                         }}>
                             <Typography variant="subtitle1" align="center" color="textSecondary">
                                 No matching events.