diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/Chart.tsx | 112 | ||||
| -rw-r--r-- | src/background.ts | 5 | ||||
| -rw-r--r-- | src/gapi.ts | 4 | ||||
| -rw-r--r-- | src/graph.ts | 11 | ||||
| -rw-r--r-- | src/tab.tsx | 18 |
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. |