From 513fc1e2faac736bcefe71aba64e74196524001d Mon Sep 17 00:00:00 2001 From: Determinant Date: Thu, 14 Feb 2019 13:38:33 -0500 Subject: ... --- package-lock.json | 60 +++++++++++++++++++++++++++++++++++++++ package.json | 3 ++ src/Analyze.tsx | 5 ++-- src/Chart.tsx | 33 +++++++++++++-------- src/Dashboard.tsx | 40 +++++++++++++++----------- src/Dialog.tsx | 8 ++++-- src/Logo.tsx | 2 +- src/Settings.tsx | 16 +++-------- src/background.ts | 85 +++++++++++++++++++++++++++---------------------------- src/duration.ts | 38 ++++++++++++++++++++++--- src/graph.ts | 25 ++++++++++------ src/popup.tsx | 26 +++++++++++------ 12 files changed, 232 insertions(+), 109 deletions(-) diff --git a/package-lock.json b/package-lock.json index 07cd034..a6407eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1001,6 +1001,19 @@ "@types/filesystem": "*" } }, + "@types/d3-path": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.8.tgz", + "integrity": "sha512-AZGHWslq/oApTAHu9+yH/Bnk63y9oFOMROtqPAtxl5uB6qm1x2lueWdVEjsjjV3Qc2+QfuzKIwIR5MvVBakfzA==" + }, + "@types/d3-shape": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.1.tgz", + "integrity": "sha512-usqdvUvPJ7AJNwpd2drOzRKs1ELie53p2m2GnPKr076/ADM579jVTJ5dPsoZ5E/CMNWk8lvPWYQSvilpp6jjwg==", + "requires": { + "@types/d3-path": "*" + } + }, "@types/filesystem": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/filesystem/-/filesystem-0.0.29.tgz", @@ -1014,6 +1027,11 @@ "resolved": "https://registry.npmjs.org/@types/filewriter/-/filewriter-0.0.28.tgz", "integrity": "sha1-wFTor02d11205jq8dviFFocU1LM=" }, + "@types/history": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.2.tgz", + "integrity": "sha512-ui3WwXmjTaY73fOQ3/m3nnajU/Orhi6cEu5rzX+BrAAJxa3eITXZ5ch9suPqtM03OWhAHhPSyBGCN4UKoxO20Q==" + }, "@types/jss": { "version": "9.5.7", "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.7.tgz", @@ -1063,6 +1081,33 @@ "moment": ">=2.17.1" } }, + "@types/react-dom": { + "version": "16.8.1", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.8.1.tgz", + "integrity": "sha512-Vyo4LqUvpjNC9RMXV6kXcsvW6U/WKOuHbz+mtY43Fu8AslHjQ5/Yx+sj0agGLkbnqOlQgyIgosewcxdjMirVXA==", + "requires": { + "@types/react": "*" + } + }, + "@types/react-router": { + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-4.4.4.tgz", + "integrity": "sha512-TZVfpT6nvUv/lbho/nRtckEtgkhspOQr3qxrnpXixwgQRKKyg5PvDfNKc8Uend/p/Pi70614VCmC0NPAKWF+0g==", + "requires": { + "@types/history": "*", + "@types/react": "*" + } + }, + "@types/react-router-dom": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-4.3.1.tgz", + "integrity": "sha512-GbztJAScOmQ/7RsQfO4cd55RuH1W4g6V1gDW3j4riLlt+8yxYLqqsiMzmyuXBLzdFmDtX/uU2Bpcm0cmudv44A==", + "requires": { + "@types/history": "*", + "@types/react": "*", + "@types/react-router": "*" + } + }, "@types/react-transition-group": { "version": "2.0.15", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.0.15.tgz", @@ -1071,6 +1116,21 @@ "@types/react": "*" } }, + "@types/recharts": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/@types/recharts/-/recharts-1.1.11.tgz", + "integrity": "sha512-BUu81jmTPhoxxrZKgtG2EqXGsgaR7eVURCV7DpenU8935RALA+vHFevNU80pAVvroJRh9r84X5OKF9zlkTUDww==", + "requires": { + "@types/d3-shape": "*", + "@types/react": "*", + "@types/recharts-scale": "*" + } + }, + "@types/recharts-scale": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@types/recharts-scale/-/recharts-scale-1.0.0.tgz", + "integrity": "sha512-HR/PrCcxYb2YHviTqH7CMdL1TUhUZLTUKzfrkMhxm1HTa5mg/QtP8XMiuSPz6dZ6wecazAOu8aYZ5DqkNlgHHQ==" + }, "@webassemblyjs/ast": { "version": "1.7.11", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.11.tgz", diff --git a/package.json b/package.json index 48bbd7a..f9bf42e 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,9 @@ "@types/material-ui": "^0.21.6", "@types/react": "^16.8.2", "@types/react-dates": "^17.1.5", + "@types/react-dom": "^16.8.1", + "@types/react-router-dom": "^4.3.1", + "@types/recharts": "^1.1.11", "lru-cache": "^5.1.1", "moment": "^2.24.0", "react": "^16.8.1", diff --git a/src/Analyze.tsx b/src/Analyze.tsx index e0e852d..8f55bd8 100644 --- a/src/Analyze.tsx +++ b/src/Analyze.tsx @@ -17,7 +17,8 @@ import IconButton from '@material-ui/core/IconButton'; import * as gapi from './gapi'; import { MsgType, MsgClient } from './msg'; import { Pattern, PatternEntry, PatternEntryFlat } from './pattern'; -import { AnalyzePieChart, getChartData } from './Chart'; +import { AnalyzePieChart } from './Chart'; +import { getGraphData } from './graph'; import PatternTable from './PatternTable'; import Snackbar from './Snackbar'; import AlertDialog from './Dialog'; @@ -127,7 +128,7 @@ class Analyze extends React.Component<{classes: {buttonSpacer: string}}> { } let start = this.state.startDate.startOf('day').toDate(); let end = this.state.endDate.startOf('day').toDate(); - getChartData(start, end, + getGraphData(start, end, this.state.patterns, this.state.calendars, this.getCalEvents).then(results => { diff --git a/src/Chart.tsx b/src/Chart.tsx index 3b541fa..c7b59c4 100644 --- a/src/Chart.tsx +++ b/src/Chart.tsx @@ -1,18 +1,21 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { Theme, withStyles } from '@material-ui/core/styles'; import Grid from '@material-ui/core/Grid'; import cyan from '@material-ui/core/colors/cyan'; import { PieChart, Pie, Cell, Tooltip } from 'recharts'; import { defaultChartColor } from './theme'; +import { PatternGraphData } from './graph'; -const styles = theme => ({ +const styles = (theme: Theme) => ({ pieChart: { margin: '0 auto', } }); -function customizedLabel(props) { +function customizedLabel(props: {cx: number, cy: number, + x: number, y: number, + fill: string, name: string}) { const {cx, cy, x, y, fill, name} = props; let anchor = "middle"; const EPS = 2; @@ -35,7 +38,12 @@ function customizedLabel(props) { return ({`${name}`}); } -function PatternPieChart(props) { +function PatternPieChart(props: { + classes: { + patternTableWrapper: string, + pieChart: string + }, + data: PatternGraphData[] }) { return (
@@ -50,7 +58,7 @@ function PatternPieChart(props) { label={customizedLabel}> {props.data.map((d, i) => )} - `${value.toFixed(2)} hr`}/> + `${value.toFixed(2)} hr`}/>
@@ -59,7 +67,13 @@ function PatternPieChart(props) { export const StyledPatternPieChart = withStyles(styles)(PatternPieChart); -function DoublePieChart(props) { +function DoublePieChart(props: { + classes: { + patternTableWrapper: string, + pieChart: string + }, + patternGraphData: PatternGraphData[], + calendarGraphData: PatternGraphData[] }) { return ( @@ -77,16 +91,11 @@ function DoublePieChart(props) { label={customizedLabel}> {props.calendarGraphData.map((d, i) => )} - `${value.toFixed(2)} hr`}/> + `${value.toFixed(2)} hr`}/> ); } -DoublePieChart.propTypes = { - patternGraphData: PropTypes.array.isRequired, - calendarGraphData: PropTypes.array.isRequired, -}; - export const AnalyzePieChart = withStyles(styles)(DoublePieChart); diff --git a/src/Dashboard.tsx b/src/Dashboard.tsx index 04ced46..10f727e 100644 --- a/src/Dashboard.tsx +++ b/src/Dashboard.tsx @@ -1,23 +1,23 @@ import React from 'react'; import PropTypes from 'prop-types'; import 'typeface-roboto'; -import { withStyles, MuiThemeProvider } from '@material-ui/core/styles'; +import { Theme, withStyles, MuiThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import Typography from '@material-ui/core/Typography'; import Paper from '@material-ui/core/Paper'; import Tabs from '@material-ui/core/Tabs'; -import Tab from '@material-ui/core/Tab'; +import Tab, { TabProps } from '@material-ui/core/Tab'; +import { LinkProps } from '@material-ui/core/Link'; import Grid from '@material-ui/core/Grid'; -import { HashRouter as Router, withRouter, Route, Link, Redirect, Switch } from "react-router-dom"; -import { hashHistory } from 'react-router'; +import { HashRouter as Router, RouteComponentProps, withRouter, Route, Link, Redirect, Switch } from "react-router-dom"; import Logo from './Logo'; import { theme } from './theme'; import Analyze from './Analyze'; import Settings from './Settings'; -const styles = theme => ({ +const styles = (theme: Theme) => ({ root: { display: 'flex', height: '100vh', @@ -44,8 +44,21 @@ const styles = theme => ({ } }); -class DashboardTabs extends React.Component { - handleChangeTab = (event, currentTab) => { +interface DashboardTabsProps extends RouteComponentProps { + classes: { + root: string, + appBar: string, + appBarSpacer: string, + toolbar: string, + title: string, + indicator: string, + content: string + }; +} + + +class DashboardTabs extends React.Component { + handleChangeTab = (event: React.SyntheticEvent<{}>, currentTab: any) => { this.props.history.push(currentTab); } render() { @@ -59,12 +72,12 @@ class DashboardTabs extends React.Component { Chromicle - - - + + @@ -80,13 +93,8 @@ class DashboardTabs extends React.Component { } } -DashboardTabs.propTypes = { - classes: PropTypes.object.isRequired, -}; - -class Dashboard extends React.Component { +class Dashboard extends React.Component<{}> { render() { - const { classes } = this.props; let Tabs = withRouter(withStyles(styles)(DashboardTabs)); return ( diff --git a/src/Dialog.tsx b/src/Dialog.tsx index 7e24176..df72144 100644 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -9,11 +9,15 @@ import Slide from '@material-ui/core/Slide'; // modified from https://material-ui.com/demos/dialogs/ -function Transition(props) { +function Transition(props: any) { return ; } -function AlertDialog(props) { +function AlertDialog(props: { + open: boolean, + handleClose: (r: boolean) => any, + title: string, + message: string}) { return ( +export default (props: {style: {[key: string]: string | number }}) => { let config = { - trackedPeriods: msg.data.trackedPeriods.map(p => { - return { - start: Duration.inflate(p.start), - end: Duration.inflate(p.end), - name: p.name - }; - }) + trackedPeriods: msg.data.trackedPeriods.map((p: TrackPeriodFlat) => ( + new TrackPeriod.inflate(p); + )) }; console.log(msg.data.trackedPeriods); this.setState({ config }); @@ -298,11 +294,7 @@ class Settings extends React.Component { updateTrackedPeriods = trackedPeriods => { this.msgClient.sendMsg({ type: MsgType.updateConfig, - data: { trackedPeriods: trackedPeriods.map(p => ({ - name: p.name, - start: p.start.deflate(), - end: p.end.deflate() - })) } + data: { trackedPeriods: trackedPeriods.map(p => p.deflate())) } }).then(() => this.setState({...this.state.config, trackedPeriods })); } diff --git a/src/background.ts b/src/background.ts index fbae2b6..6a3e3bc 100644 --- a/src/background.ts +++ b/src/background.ts @@ -1,20 +1,20 @@ import * as gapi from './gapi'; import { MsgType, Msg } from './msg'; -import { Duration, TrackPeriod } from './duration'; +import { Duration, TrackPeriod, TrackPeriodFlat } from './duration'; import moment from 'moment'; import { GraphData, getGraphData } from './graph'; -import { PatternEntry } from './pattern'; +import { PatternEntry, PatternEntryFlat } from './pattern'; let mainPatterns: PatternEntry[] = []; let analyzePatterns: PatternEntry[] = []; let calendars: {[id: string]: gapi.GCalendarMeta} = {}; let calData: {[id: string]: gapi.GCalendar} = {}; -let config: TrackPeriod[] = { +let config = { trackedPeriods: [ - {name: 'Today', start: Duration.days(1), end: Duration.days(0)}, - {name: 'Yesterday', start: Duration.days(2), end: Duration.days(1)}, - {name: 'This Week', start: Duration.weeks(1), end: Duration.weeks(0)}, - {name: 'This Month', start: Duration.months(1), end: Duration.months(0)}] + new TrackPeriod('Today', Duration.days(1), Duration.days(0)), + new TrackPeriod('Yesterday', Duration.days(2), Duration.days(1)), + new TrackPeriod('This Week', Duration.weeks(1), Duration.weeks(0)), + new TrackPeriod('This Month', Duration.months(1), Duration.months(0))] as TrackPeriod[] }; let mainGraphData: GraphData[] = []; let dirtyMetadata = false; @@ -31,15 +31,15 @@ function loadMetadata() { { console.log('metadata loaded'); config = { - trackedPeriods: items.config.trackedPeriods.map(p => ({ + trackedPeriods: items.config.trackedPeriods.map((p: TrackPeriod) => ({ name: p.name, start: Duration.inflate(p.start), end: Duration.inflate(p.end), })) }; calendars = items.calendars; - mainPatterns = items.mainPatterns.map(p => PatternEntry.inflate(p)); - analyzePatterns = items.analyzePatterns.map(p => PatternEntry.inflate(p)); + mainPatterns = items.mainPatterns.map((p: PatternEntryFlat) => PatternEntry.inflate(p)); + analyzePatterns = items.analyzePatterns.map((p: PatternEntryFlat) => PatternEntry.inflate(p)); } resolver(); })); @@ -63,15 +63,17 @@ function saveMetadata() { })); } -function getCalEvents(id, start, end) { +async function getCalEvents(id: string, start: Date, end: Date) { if (!calData.hasOwnProperty(id)) - calData[id] = new gapi.GCalendar(id, calendars[id].summary); - return calData[id].getEvents(new Date(start), new Date(end)) - .catch(e => { - console.log(`cannot load calendar ${id}`, e); - calendars[id].enabled = false; - return []; - }); + calData[id] = new gapi.GCalendar(id, calendars[id].name); + try { + let res = await calData[id].getEvents(new Date(start), new Date(end)); + return res; + } catch(err) { + console.log(`cannot load calendar ${id}`, err); + calendars[id].enabled = false; + return []; + } } function updateMainGraphData() { @@ -96,21 +98,15 @@ function updateMainGraphData() { let end = start.clone(); start.subtract(startD); end.subtract(endD); - pms.push(getChartData( - start.toDate(), - end.toDate(), - mainPatterns, - calendars, - (id, start,end) => getCalEvents(id, start, end).then(d => d.map(e => ({ - id: e.id, - start: e.start.getTime(), - end: e.end.getTime() - })))).then(results => { + pms.push(getGraphData( + start.toDate(), end.toDate(), mainPatterns, calendars, + getCalEvents + ).then(results => { mainGraphData[i] = { - name: p.name, - start: start.toDate(), - end: end.toDate(), - data: results.patternGraphData + name: p.name, + start: start.toDate(), + end: end.toDate(), + data: results.patternGraphData }; })); } @@ -131,12 +127,12 @@ loadMetadata().then(() => pollSync()); chrome.runtime.onConnect.addListener(function(port) { console.assert(port.name == 'main'); - port.onMessage.addListener(function(_msg) { - let msg = Msg.inflate(_msg); + port.onMessage.addListener(_msg => { + let msg = Msg.inflate(_msg); console.log(msg); - switch (msg.type) { + switch (msg.opt) { case MsgType.updatePatterns: { - let patterns = msg.data.patterns.map(p => PatternEntry.inflate(p)); + let patterns = msg.data.patterns.map((p: PatternEntryFlat) => PatternEntry.inflate(p)); if (msg.data.id == 'analyze') analyzePatterns = patterns; else @@ -166,13 +162,13 @@ chrome.runtime.onConnect.addListener(function(port) { { cals = Object.keys(calendars) .filter(id => calendars[id].enabled) - .reduce((res, id) => (res[id] = calendars[id], res), {}); + .reduce((res, id) => (res[id] = calendars[id], res), {} as {[id: string]: gapi.GCalendarMeta}); } port.postMessage(msg.genResp(cals)); break; } case MsgType.getCalEvents: { - getCalEvents(msg.data.id, msg.data.start, msg.data.end).then(data => { + getCalEvents(msg.data.id, new Date(msg.data.start), new Date(msg.data.end)).then(data => { console.log(data); let resp = msg.genResp(data.map(e => { return { @@ -187,7 +183,7 @@ chrome.runtime.onConnect.addListener(function(port) { break; } case MsgType.updateConfig: { - config.trackedPeriods = msg.data.trackedPeriods.map(p => ({ + config.trackedPeriods = msg.data.trackedPeriods.map((p: TrackPeriodFlat) => ({ name: p.name, start: Duration.inflate(p.start), end: Duration.inflate(p.end) @@ -197,13 +193,16 @@ chrome.runtime.onConnect.addListener(function(port) { break; } case MsgType.getConfig: { - let res = {}; - msg.data.forEach(prop => res[prop] = config[prop]); + let res: {[prop: string]: any} = {}; + msg.data.forEach((prop: string) => { + if (prop == 'trackedPeriods') + res.trackedPeriods = config.trackedPeriods.map(p => p.deflate()) + }); port.postMessage(msg.genResp(res)); break; } case MsgType.getGraphData: { - (msg.data.sync ? updateMainGraphData() : Promise.resolve()).then(() => ( + (msg.data.sync ? updateMainGraphData().then(() => {}) : Promise.resolve()).then(() => ( port.postMessage(msg.genResp(mainGraphData.map(d => ({ name: d.name, start: d.start.toISOString(), @@ -213,7 +212,7 @@ chrome.runtime.onConnect.addListener(function(port) { )); break; } - default: console.error("unknown msg type"); + default: console.error("unknown msg opt"); } }); }); diff --git a/src/duration.ts b/src/duration.ts index b42b53b..34ccb91 100644 --- a/src/duration.ts +++ b/src/duration.ts @@ -2,6 +2,11 @@ import moment from 'moment'; export type TimeUnit = moment.unitOfTime.DurationConstructor; +export type DurationFlat = { + value: number, + unit: string +}; + export class Duration { value: number; unit: TimeUnit; @@ -22,11 +27,36 @@ export class Duration { static months(n: number) { return new Duration(n, 'months'); } deflate() { return { value: this.value, unit: this.unit }; } - static inflate = (obj: { value: number, unit: TimeUnit }) => new Duration(obj.value, obj.unit); + static inflate = (obj: DurationFlat) => new Duration(obj.value, obj.unit as TimeUnit); } -export type TrackPeriod = { + +export type TrackPeriodFlat = { name: string, - start: Duration, - end: Duration + start: DurationFlat, + end: DurationFlat }; + +export class TrackPeriod { + name: string; + start: Duration; + end: Duration; + + constructor(name: string, start: Duration, end: Duration) { + this.name = name; + this.start = start; + this.end = end; + } + + deflate() { + return { + name: this.name, + start: this.start.deflate(), + end: this.end.deflate() + }; + } + + static inflate = (obj: TrackPeriodFlat) => ( + new TrackPeriod(obj.name, Duration.inflate(obj.start), Duration.inflate(obj.end)) + ); +} diff --git a/src/graph.ts b/src/graph.ts index 507b671..828e07f 100644 --- a/src/graph.ts +++ b/src/graph.ts @@ -1,3 +1,7 @@ +import { GCalendarEvent, GCalendarMeta } from './gapi'; +import { PatternEntry } from './pattern'; +import { defaultChartColor} from './theme'; + export type PatternGraphData = { name: string, value: number, @@ -8,10 +12,13 @@ export type GraphData = { name: string, start: Date, end: Date, - data: PatternGraphData + data: PatternGraphData[] }; -export function getGraphData(start, end, patterns, calendars, calEventsGetter) { +export function getGraphData( + start: Date, end: Date, + patterns: PatternEntry[], calendars: { [id: string]: GCalendarMeta }, + calEventsGetter: (id: string, start: Date, end: Date) => Promise) { if (start >= end) return Promise.resolve({ patternGraphData: [], calendarGraphData: [] }); let event_pms = []; for (let id in calendars) @@ -23,14 +30,16 @@ export function getGraphData(start, end, patterns, calendars, calEventsGetter) { .then(r => { return { id, events: r, filtered }; })); } return Promise.all(event_pms).then(all_events => { - let events = {}; - let patternsByCal = {}; - let results = {}; // pattern idx => time - let cal_results = {}; // cal id => time + let events: {[id: string]: GCalendarEvent[]} = {}; + let patternsByCal: {[id: string]: PatternEntry[]} = {}; + let results: {[idx: number]: number} = {}; + let cal_results: {[id: string]: number} = {}; + all_events.forEach(e => { events[e.id] = e.events; patternsByCal[e.id] = e.filtered; }); + for (let i = 0; i < patterns.length; i++) results[i] = 0; for (let id in calendars) { @@ -41,7 +50,7 @@ export function getGraphData(start, end, patterns, calendars, calEventsGetter) { if (!cal_results.hasOwnProperty(id)) { cal_results[id] = 0; } - let duration = (event.end - event.start) / 60000; + let duration = (event.end.getTime() - event.start.getTime()) / 60000; results[p.idx] += duration; cal_results[id] += duration; }); @@ -49,7 +58,7 @@ export function getGraphData(start, end, patterns, calendars, calEventsGetter) { } let patternGraphData = []; let calendarGraphData = []; - const filterMarginal = data => { + const filterMarginal = (data: PatternGraphData[]) => { let sum = 0; let majorParts = []; let minorSum = 0; diff --git a/src/popup.tsx b/src/popup.tsx index 5474476..ce9f891 100644 --- a/src/popup.tsx +++ b/src/popup.tsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { withStyles, MuiThemeProvider } from '@material-ui/core/styles'; +import { Theme, withStyles, MuiThemeProvider } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import RefreshIcon from '@material-ui/icons/Refresh'; @@ -12,6 +12,7 @@ import { PatternEntry } from './pattern'; import { Duration } from './duration'; import { MsgType, MsgClient } from './msg'; import { StyledPatternPieChart } from './Chart'; +import { GraphData } from './graph'; import Divider from '@material-ui/core/Divider'; import moment from 'moment'; @@ -19,7 +20,7 @@ function openOptions() { chrome.tabs.create({ url: "index.html" }); } -const styles = theme => ({ +const styles = (theme: Theme) => ({ content: { padding: theme.spacing.unit * 1, overflow: 'auto', @@ -34,24 +35,31 @@ const styles = theme => ({ }, }); -class Popup extends React.Component { +class Popup extends React.Component<{ + classes: { + content: string, + buttons: string, + buttonSpacer: string + } + }> { + msgClient: MsgClient; state = { - patternGraphData: [], + patternGraphData: [] as GraphData[], loading: false, }; - constructor(props) { + constructor(props: any) { super(props); this.msgClient = new MsgClient('main'); - this.loading = true; + this.state.loading = true; this.loadGraphData(false).then(() => this.setState({ loading: false })); } - loadGraphData(sync) { + loadGraphData(sync: boolean) { return this.msgClient.sendMsg({ - type: MsgType.getGraphData, + opt: MsgType.getGraphData, data: { sync } }).then(msg => { - this.setState({ patternGraphData: msg.data.map(d => ({ + this.setState({ patternGraphData: msg.data.map((d: GraphData) => ({ name: d.name, data: d.data, start: new Date(d.start), -- cgit v1.2.3