diff --git a/client/src/SummaryContext.tsx b/client/src/SummaryContext.tsx index 40acc866..7f9b88c8 100644 --- a/client/src/SummaryContext.tsx +++ b/client/src/SummaryContext.tsx @@ -7,13 +7,14 @@ import { summariseTimeOnline, } from './components/SummaryCalendar/SummaryCalendar.util'; import { Logger } from './logger'; +import { MODE_MONTH } from './SummaryContext.util'; export const SummaryContext = createContext({}); export const SummaryProvider = ({ children }) => { const [isLoading, setIsLoading] = useState(false); const [selectedDate, setSelectedDate] = useState(moment()); - const [selectedMode, setSelectedMode] = useState('month'); + const [selectedMode, setSelectedMode] = useState(MODE_MONTH); const [logSummary, setLogSummary] = useState([]); const [onlineSummary, setOnlineSummary] = useState([]); @@ -22,16 +23,20 @@ export const SummaryProvider = ({ children }) => { const loadData = useCallback(async () => { setIsLoading(true); try { + // TODO, query month +1 day for sleep time const beginDate = moment(selectedDate).startOf(selectedMode); const endDate = moment(selectedDate).endOf(selectedMode); + if (selectedMode === MODE_MONTH) { + endDate.add(1, 'day'); + } const { statusItems, logItems } = await findAllDayItemsForEveryTrack( beginDate, endDate, ); setLogSummary(summariseLog(logItems, selectedMode)); setOnlineSummary(summariseOnline(statusItems, selectedMode)); - setOnlineTimesSummary(summariseTimeOnline(statusItems, selectedMode)); + setOnlineTimesSummary(summariseTimeOnline(statusItems, selectedMode, beginDate)); } catch (e) { Logger.error('Errod loading summary data.', e); } finally { diff --git a/client/src/SummaryContext.util.ts b/client/src/SummaryContext.util.ts new file mode 100644 index 00000000..389df336 --- /dev/null +++ b/client/src/SummaryContext.util.ts @@ -0,0 +1,3 @@ +export const MODE_MONTH = 'month'; +export const DAY_MONTH_FORMAT = 'MM-DD'; +export const MONTH_FORMAT = 'MM'; diff --git a/client/src/components/LineCharts/LineChart.tsx b/client/src/components/LineCharts/LineChart.tsx index 172fc93e..afdec76e 100644 --- a/client/src/components/LineCharts/LineChart.tsx +++ b/client/src/components/LineCharts/LineChart.tsx @@ -16,7 +16,8 @@ import { diffAndFormatShort } from '../../utils'; const scale = { x: 'time', y: 'time' }; const padding = { left: 50, top: 0, bottom: 20, right: 10 }; -const domainPadding = { y: 10, x: 10 }; +const domainPadding = { y: 10, x: 20 }; + const labelComponent = () => ( { theme={chartTheme} scale={scale} width={chartWidth} - height={500} + height={800} domainPadding={domainPadding} padding={padding} horizontal @@ -49,12 +50,17 @@ export const LineChart = () => { tickFormat={formatToTimeEveryOther} dependentAxis /> - + toTimeDuration(convertDate(d.beginDate), convertDate(d.beginDate))} y0={d => toTimeDuration(convertDate(d.beginDate), convertDate(d.endDate))} x={d => convertDate(d.beginDate).startOf('day')} - barWidth={10} + barWidth={20} data={onlineTimesValues} labelComponent={labelComponent()} labels={({ datum }) => diff --git a/client/src/components/LineCharts/LineCharts.styles.ts b/client/src/components/LineCharts/LineCharts.styles.ts index 0b4f57d5..5a873eaa 100644 --- a/client/src/components/LineCharts/LineCharts.styles.ts +++ b/client/src/components/LineCharts/LineCharts.styles.ts @@ -1,6 +1,9 @@ import styled from 'styled-components'; +import { Box } from '@rebass/grid'; -export const Heading = styled.h3` - text-align: center; - color: rgba(0, 0, 0, 0.65); +export const LineChartBox = styled(Box).attrs({ m: 2, p: 2 })` + border-top: 1px solid white; + + background: white; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); `; diff --git a/client/src/components/SummaryCalendar/SummaryCalendar.tsx b/client/src/components/SummaryCalendar/SummaryCalendar.tsx index 933c15e4..fbcff3c1 100644 --- a/client/src/components/SummaryCalendar/SummaryCalendar.tsx +++ b/client/src/components/SummaryCalendar/SummaryCalendar.tsx @@ -13,6 +13,7 @@ import { convertDate, TIME_FORMAT_SHORT } from '../../constants'; import { formatDuration } from './SummaryCalendar.util'; import classNames from 'classnames'; import padStart from 'lodash/padStart'; +import { DAY_MONTH_FORMAT } from '../../SummaryContext.util'; moment.locale('et'); @@ -75,7 +76,7 @@ export const SummaryCalendar = () => { const dateCellRender = value => { if (value.month() === selectedDate.month()) { - const listData = getListData(value.date()); + const listData = getListData(value.format(DAY_MONTH_FORMAT)); return ( {listData.map(item => ( diff --git a/client/src/components/SummaryCalendar/SummaryCalendar.util.test.ts b/client/src/components/SummaryCalendar/SummaryCalendar.util.test.ts index d7ae849b..0fd9ad08 100644 --- a/client/src/components/SummaryCalendar/SummaryCalendar.util.test.ts +++ b/client/src/components/SummaryCalendar/SummaryCalendar.util.test.ts @@ -4,12 +4,12 @@ import moment from 'moment'; describe('summariseTimeOnline', () => { it('parses online items', () => { - const actual = summariseTimeOnline(TEST_INPUT, 'month'); + const actual = summariseTimeOnline(TEST_INPUT, 'month', moment(1589311528755)); const result = { - '12': { beginDate: 1589311528755, endDate: 1589312113568, online: 358396 }, - '14': { beginDate: 1589480558049, endDate: 1589483666850, online: 2707998 }, - '24': { beginDate: 1590354279611, endDate: 1590357497348, online: 3085853 }, - '25': { beginDate: 1590375522178, endDate: 1590388476539, online: 1527164 }, + '05-12': { beginDate: 1589311528755, endDate: 1589312113568, online: 358396 }, + '05-14': { beginDate: 1589480558049, endDate: 1589483666850, online: 2707998 }, + '05-24': { beginDate: 1590354279611, endDate: 1590357497348, online: 3085853 }, + '05-25': { beginDate: 1590375522178, endDate: 1590388476539, online: 1527164 }, }; expect(actual).toEqual(result); @@ -23,9 +23,9 @@ describe('summariseTimeOnline', () => { endDate: moment('2020-04-10 03:30').valueOf(), }, ]; - const actual = summariseTimeOnline(input, 'month'); + const actual = summariseTimeOnline(input, 'month', moment('2020-04-10 04:30')); const result = { - '9': { + '04-09': { beginDate: moment('2020-04-10 02:30').valueOf(), endDate: moment('2020-04-10 03:30').valueOf(), online: 3600000, @@ -43,9 +43,9 @@ describe('summariseTimeOnline', () => { endDate: moment('2020-04-10 05:30').valueOf(), }, ]; - const actual = summariseTimeOnline(input, 'month'); + const actual = summariseTimeOnline(input, 'month', moment('2020-04-10 04:30')); const result = { - '10': { + '04-10': { beginDate: moment('2020-04-10 04:30').valueOf(), endDate: moment('2020-04-10 05:30').valueOf(), online: 3600000, @@ -78,9 +78,9 @@ describe('summariseTimeOnline', () => { endDate: moment('2020-04-11 03:30').valueOf(), }, ]; - const actual = summariseTimeOnline(input, 'month'); + const actual = summariseTimeOnline(input, 'month', moment('2020-04-10 04:30')); const result = { - '10': { + '04-10': { beginDate: moment('2020-04-10 04:30').valueOf(), endDate: moment('2020-04-11 03:30').valueOf(), online: 28800000, diff --git a/client/src/components/SummaryCalendar/SummaryCalendar.util.ts b/client/src/components/SummaryCalendar/SummaryCalendar.util.ts index b027d3eb..3775d7b1 100644 --- a/client/src/components/SummaryCalendar/SummaryCalendar.util.ts +++ b/client/src/components/SummaryCalendar/SummaryCalendar.util.ts @@ -7,21 +7,23 @@ import { DURATION_SETTINGS, } from '../../constants'; import moment from 'moment'; +import { DAY_MONTH_FORMAT, MODE_MONTH } from '../../SummaryContext.util'; export const formatDuration = dur => moment.duration(dur).format(DURATION_FORMAT, DURATION_SETTINGS); export const groupByField = mode => item => - mode === 'month' ? convertDate(item.beginDate).date() : convertDate(item.beginDate).month(); + mode === MODE_MONTH + ? convertDate(item.beginDate).format(DAY_MONTH_FORMAT) + : convertDate(item.beginDate).month(); export const groupByActualDay = item => { const date = convertDate(item.beginDate); - const day = date.date(); if (date.format(TIME_FORMAT) < BREAKPOINT_TIME) { - return day === 1 ? day : day - 1; + return date.subtract(1, 'day').format(DAY_MONTH_FORMAT); } - return day; + return date.format(DAY_MONTH_FORMAT); }; export const summariseLog = (items, mode) => { @@ -48,10 +50,13 @@ export const summariseOnline = (items, mode) => { return data; }; -export const summariseTimeOnline = (items, mode) => { +export const summariseTimeOnline = (items, mode, beginDate) => { if (mode === 'year') { return []; } + // We are taking sleep time from next months first day, but going to remove it from end result + const currentMonth = beginDate.month(); + const data = _(items) .filter(item => item.app === 'ONLINE') .groupBy(groupByActualDay) @@ -64,8 +69,14 @@ export const summariseTimeOnline = (items, mode) => { }) .reduce((result, currentValue) => { const key = groupByActualDay(currentValue); - result[key] = currentValue; + + const month = moment(key, DAY_MONTH_FORMAT).month(); + + if (currentMonth === month) { + result[key] = currentValue; + } return result; }, {}); + return data; }; diff --git a/client/src/routes/SummaryPage.tsx b/client/src/routes/SummaryPage.tsx index 7696cfd1..f3621ae9 100644 --- a/client/src/routes/SummaryPage.tsx +++ b/client/src/routes/SummaryPage.tsx @@ -3,13 +3,16 @@ import { MainLayout } from '../components/MainLayout/MainLayout'; import { SummaryCalendar } from '../components/SummaryCalendar/SummaryCalendar'; import { SummaryProvider } from '../SummaryContext'; import { LineChart } from '../components/LineCharts/LineChart'; +import { LineChartBox } from '../components/LineCharts/LineCharts.styles'; export function SummaryPage({ location }: any) { return ( - + + + ); diff --git a/electron/app/config.ts b/electron/app/config.ts index 865f957c..bdd82a12 100755 --- a/electron/app/config.ts +++ b/electron/app/config.ts @@ -9,7 +9,7 @@ let root = path.join(__dirname, '..'); let client = isDevelopment ? path.join(root, '..', 'client', 'build') : path.join(root, 'dist'); // Load real data even when in development -let useRealDataInDev = false; +let useRealDataInDev = true; let userDir = isDevelopment && useRealDataInDev ? `/Users/${OS.userInfo().username}/Library/Application Support/Tockler` diff --git a/electron/app/window-manager.ts b/electron/app/window-manager.ts index 973d5b2f..fa939d93 100644 --- a/electron/app/window-manager.ts +++ b/electron/app/window-manager.ts @@ -59,7 +59,7 @@ export default class WindowManager { this.mainWindow.maximize(); } - const url = config.isDev ? 'http://localhost:3000' : `file://${__dirname}/index.html`; + const url = config.isDev ? 'http://127.0.0.1:3000' : `file://${__dirname}/index.html`; this.mainWindow.loadURL(url); diff --git a/electron/package.json b/electron/package.json index a56fe058..1ed81c10 100644 --- a/electron/package.json +++ b/electron/package.json @@ -1,6 +1,6 @@ { "name": "tockler", - "version": "3.14.0", + "version": "3.14.1", "description": "Automatically track applications usage and working time", "author": "Maigo Erit ", "license": "GPL-2.0",