chore: try timeline vis upgrade to v0.2.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pomodoro-logger",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Pomodoro Logger -- When a time logger meets Pomodoro and Kanban board",
   "main": "./dist/main.js",
   "scripts": {

src/renderer/components/Analyser/Analyser.tsx

@@ -12,6 +12,7 @@ import { EfficiencyAnalyser } from '../../../efficiency/efficiency';
 import dbs from '../../dbs';
 import { fatScrollBar, tabMaxHeight } from '../../style/scrollbar';
 import { PomodoroRecord } from '../../monitor/type';
+import { PomodoroTimeline } from '../Visualization/Timeline';
 
 const Container = styled.div`
     position: relative;
@@ -108,10 +109,9 @@ export const Analyser: React.FC<Props> = (props: Props) => {
                 <Bar values={[5, 10, 100, 20, 30]} names={['123', '123', '22', '22', '123']} />
             </div>
             {record ? (
-                <PomodoroSankey
+                <PomodoroTimeline
                     record={record}
-                    efficiencyAnalyser={new EfficiencyAnalyser(props.timer.distractingList)}
-                    showSwitch={true}
+                    efficiencyAnalyser={new EfficiencyAnalyser([{ app: 'chrome' }])}
                 />
             ) : (
                 undefined

src/renderer/components/Visualization/PomodoroSankey.tsx

@@ -274,8 +274,7 @@ export const PomodoroSankey = (props: Props) => {
             option={option}
             style={{
                 width,
-                height: 'calc(100vh - 110px)',
-                maxHeight: '1000px',
+                height: '10000px',
                 minHeight: '300px'
             }}
         />

src/renderer/components/Visualization/Timeline.tsx

@@ -0,0 +1,44 @@
+import { Timeline } from 'antd';
+import * as React from 'react';
+import { PomodoroRecord } from '../../monitor/type';
+import { getIndexToTitleApp } from '../../monitor/sessionManager';
+import { EfficiencyAnalyser } from '../../../efficiency/efficiency';
+import { to2digits } from '../../utils';
+
+interface Props {
+    record: PomodoroRecord;
+    efficiencyAnalyser: EfficiencyAnalyser;
+}
+
+function formatTime(time: number) {
+    const date = new Date(time);
+    const hour = to2digits(date.getHours());
+    const m = to2digits(date.getMinutes());
+    const s = to2digits(date.getSeconds());
+    return `${hour}:${m}:${s}.${date.getMilliseconds()}`;
+}
+
+export const PomodoroTimeline = (props: Props) => {
+    const data: any[] = [];
+    let time = props.record.startTime;
+    const indexToTitle = getIndexToTitleApp(props.record);
+    for (let i = 0; i < props.record.stayTimeInSecond!.length; i += 1) {
+        const stay = props.record.stayTimeInSecond![i];
+        const index = props.record.switchActivities![i];
+        const [title, app] = indexToTitle[index];
+        const isDistracting = props.efficiencyAnalyser.getIsDistracting(app, title);
+        const sTime = formatTime(time);
+
+        data.push(
+            <Timeline.Item color={isDistracting ? 'red' : 'green'}>
+                <p>{app}</p>
+                <p>{title}</p>
+                <p>{sTime}</p>
+            </Timeline.Item>
+        );
+
+        time += stay;
+    }
+
+    return <Timeline>{data}</Timeline>;
+};

src/renderer/monitor/sessionManager.ts

@@ -165,3 +165,14 @@ export async function exportDBData() {
         settingDB
     };
 }
+
+export function getIndexToTitleApp(record: PomodoroRecord): [string, string][] {
+    const indexToTitle: [string, string][] = [];
+    for (const app in record.apps) {
+        for (const title in record.apps[app].titleSpentTime) {
+            indexToTitle[record.apps[app].titleSpentTime[title].index] = [title, app];
+        }
+    }
+
+    return indexToTitle;
+}