Init Timeline

Author: Yadro

package.json

@@ -210,7 +210,6 @@
     "jest": "^27.0.6",
     "lint-staged": "^10.2.11",
     "mini-css-extract-plugin": "^1.3.1",
-    "node-sass": "^5.0.0",
     "opencollective-postinstall": "^2.0.3",
     "prettier": "^2.0.5",
     "react-refresh": "^0.9.0",
@@ -248,6 +247,7 @@
     "moment": "2.29.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-google-charts": "4.0.0",
     "react-hook-media-query": "^1.0.5",
     "react-jss": "^10.6.0",
     "react-router-dom": "^5.2.0",

src/components/Header.tsx

@@ -28,6 +28,9 @@ function Header() {
       <HeaderLink>
         <Link to="/dashboard">Dashboard</Link>
       </HeaderLink>
+      <HeaderLink>
+        <Link to="/timeline">TL</Link>
+      </HeaderLink>
       <span className={style.flex1}>{isBigScreen && <ProgressBar />}</span>
       <TaskControl />
       <Profile />

src/screens/Main.tsx

@@ -4,7 +4,8 @@ import { Layout } from 'antd';
 
 import ProjectsScreen from './projects/ProjectsScreen';
 import HoursScreen from './hours/HoursScreen';
-import Dashboard from './dashboard/Dashboard';
+import DashboardScreen from './dashboard/Dashboard';
+import TimelineScreen from './timeline/TimelineScreen';
 import GaService from '../services/gaService/GaService';
 import Header from '../components/Header';
 
@@ -25,7 +26,8 @@ const Main = () => {
       <Switch>
         <Route path="/hours" component={HoursScreen} />
         <Route path="/projects" component={ProjectsScreen} />
-        <Route path="/dashboard" component={Dashboard} />
+        <Route path="/dashboard" component={DashboardScreen} />
+        <Route path="/timeline" component={TimelineScreen} />
         <Redirect from="*" to="/projects" />
       </Switch>
     </Layout>

src/screens/hours/HoursScreen.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { Layout, Space } from 'antd';
 import { observer } from 'mobx-react';
+import { createUseStyles } from 'react-jss';
 
 import rootStore from '../../modules/RootStore';
 import HoursCard from './components/HoursCard/HoursCard';
@@ -10,7 +11,6 @@ import TimeRangeModal from '../../components/TimeRangeModal/TimeRangeModal';
 import TaskTimeItemModel from '../../modules/tasks/models/TaskTimeItemModel';
 import { Undefined } from '../../types/CommonTypes';
 import TotalHours from './components/TotalHours/TotalHours';
-import { createUseStyles } from 'react-jss';
 import { mapCurrentNext } from '../../helpers/ArrayHelper';
 import { ITimeRangeModel } from '../../modules/tasks/models/TaskModel';
 import { msToTime } from '../../helpers/DateTime';

src/screens/timeline/TimelineScreen.tsx

@@ -0,0 +1,48 @@
+import React, { FC, memo, useMemo } from 'react';
+import { Chart } from 'react-google-charts';
+import { createUseStyles } from 'react-jss';
+
+import rootStore from '../../modules/RootStore';
+import { getTimeItems } from '../../helpers/TaskHelper';
+
+const { tasksStore } = rootStore;
+
+const columns = [
+  { type: 'string', id: 'Task' },
+  { type: 'date', id: 'Start' },
+  { type: 'date', id: 'End' },
+];
+
+const nowDate = new Date();
+
+const Timeline: FC = () => {
+  const classes = useStyles();
+
+  const tasks = useMemo(() => tasksStore.getTasksByDate(nowDate), []);
+  const filteredTimeItems = useMemo(() => getTimeItems(tasks, nowDate), [
+    tasks,
+  ]);
+
+  const data = useMemo(() => {
+    const items = filteredTimeItems.map(({ task, time }) => [
+      task.title,
+      time.start,
+      time.end || new Date(),
+    ]);
+    return [columns, ...items];
+  }, [filteredTimeItems]);
+
+  return (
+    <div className={classes.main}>
+      <Chart chartType="Timeline" data={data} height="100%" />;
+    </div>
+  );
+};
+
+export default memo(Timeline);
+
+const useStyles = createUseStyles({
+  main: {
+    padding: 10,
+  },
+});