From ada045c99bb72667bf705397538839359819a8b4 Mon Sep 17 00:00:00 2001
From: Zixuan Chen <remch183@outlook.com>
Date: Thu, 5 Dec 2019 01:52:57 +0800
Subject: [PATCH] chore: try timeline vis upgrade to v0.2.2

---
 package.json                                  |  2 +-
 src/renderer/components/Analyser/Analyser.tsx |  6 +--
 .../Visualization/PomodoroSankey.tsx          |  3 +-
 .../components/Visualization/Timeline.tsx     | 44 +++++++++++++++++++
 src/renderer/monitor/sessionManager.ts        | 11 +++++
 5 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 src/renderer/components/Visualization/Timeline.tsx

diff --git a/package.json b/package.json
index bd6954a..c9c203a 100644
--- a/package.json
+++ b/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": {
diff --git a/src/renderer/components/Analyser/Analyser.tsx b/src/renderer/components/Analyser/Analyser.tsx
index 16cab1d..4ab5843 100644
--- a/src/renderer/components/Analyser/Analyser.tsx
+++ b/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
diff --git a/src/renderer/components/Visualization/PomodoroSankey.tsx b/src/renderer/components/Visualization/PomodoroSankey.tsx
index 6840435..98d5d2a 100644
--- a/src/renderer/components/Visualization/PomodoroSankey.tsx
+++ b/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'
             }}
         />
diff --git a/src/renderer/components/Visualization/Timeline.tsx b/src/renderer/components/Visualization/Timeline.tsx
new file mode 100644
index 0000000..2a13a56
--- /dev/null
+++ b/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>;
+};
diff --git a/src/renderer/monitor/sessionManager.ts b/src/renderer/monitor/sessionManager.ts
index 331c050..85d8b0c 100644
--- a/src/renderer/monitor/sessionManager.ts
+++ b/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;
+}