3.14.1

summary page fixes
MayGo · May 25, 2020 · 2fa85b2 · 2fa85b2
1 parent 9103ea7
commit 2fa85b2
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 31 deletions.
diff --git 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<any>({});
 
 export const SummaryProvider = ({ children }) => {
     const [isLoading, setIsLoading] = useState<any>(false);
     const [selectedDate, setSelectedDate] = useState<any>(moment());
-    const [selectedMode, setSelectedMode] = useState<any>('month');
+    const [selectedMode, setSelectedMode] = useState<any>(MODE_MONTH);
 
     const [logSummary, setLogSummary] = useState<any>([]);
     const [onlineSummary, setOnlineSummary] = useState<any>([]);
@@ -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
@@ -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
@@ -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 = () => (
     <VictoryTooltip
         style={chartTheme.tooltip.style}
@@ -38,7 +39,7 @@ export const LineChart = () => {
             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
             />
-            <VictoryAxis orientation="left" name="time-axis" tickFormat={formatToDay} />
+            <VictoryAxis
+                orientation="left"
+                name="time-axis"
+                tickFormat={formatToDay}
+                tickCount={31}
+            />
             <VictoryBar
                 y={d => 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
@@ -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
@@ -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 (
                 <TaskList>
                     {listData.map(item => (

diff --git 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
@@ -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
@@ -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 (
         <MainLayout location={location}>
             <SummaryProvider>
                 <SummaryCalendar />
-                <LineChart />
+                <LineChartBox>
+                    <LineChart />
+                </LineChartBox>
             </SummaryProvider>
         </MainLayout>
     );

diff --git 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
@@ -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
@@ -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 <[email protected]>",
     "license": "GPL-2.0",