feat: Sankey vis v0 #107

src/renderer/components/Analyser/Analyser.tsx

@@ -7,22 +7,28 @@ import { workers } from '../../workers';
 import { Bar } from '../Visualization/Bar';
 import { GridCalendar } from '../Visualization/GridCalendar';
 import { createRecord } from '../../../../test/utils';
-import { PomodoroDot } from '../Visualization/PomodoroDot';
-import { TimeBadge } from '../Kanban/Card/Badge';
-import { Pin } from '../Visualization/Pin';
+import { PomodoroSankey } from '../Visualization/PomodoroSankey';
+import { EfficiencyAnalyser } from '../../../efficiency/efficiency';
+import dbs from '../../dbs';
+import { fatScrollBar, tabMaxHeight } from '../../style/scrollbar';
+import { PomodoroRecord } from '../../monitor/type';
 
 const Container = styled.div`
     position: relative;
     max-width: 800px;
     margin: 0 auto;
     padding: 2em;
+    overflow: auto;
+    ${tabMaxHeight}
+    ${fatScrollBar}
 `;
 
 interface Props extends RootState, HistoryActionCreatorTypes {}
 export const Analyser: React.FC<Props> = (props: Props) => {
     const [acc, setAcc] = useState<undefined | number>(undefined);
     const [isTraining, setIsTraining] = useState(false);
     const [progress, setProgress] = useState(0);
+    const [record, setRecord] = useState(createRecord('aha', 10, []));
     const worker = workers.knn;
     const onTrain = async () => {
         if (isTraining) {
@@ -67,8 +73,18 @@ export const Analyser: React.FC<Props> = (props: Props) => {
     r.startTime = 5004;
     r.efficiency = 0.4;
 
-    const [pin, setPin] = useState(false);
-
+    // @ts-ignore
+    React.useEffect(() => {
+        dbs.sessionDB.find({}, (err: Error, doc?: PomodoroRecord[]) => {
+            if (err || !doc) {
+                console.error(err);
+                return;
+            }
+            console.log(doc);
+            doc.sort((a, b) => a.startTime - b.startTime);
+            setRecord(doc[doc.length - 1]);
+        });
+    }, []);
     return (
         <Container>
             <Row gutter={16} style={{ marginBottom: 10 }}>
@@ -91,6 +107,15 @@ export const Analyser: React.FC<Props> = (props: Props) => {
             <div style={{ height: 50, width: 280 }}>
                 <Bar values={[5, 10, 100, 20, 30]} names={['123', '123', '22', '22', '123']} />
             </div>
+            {record ? (
+                <PomodoroSankey
+                    record={record}
+                    efficiencyAnalyser={new EfficiencyAnalyser(props.timer.distractingList)}
+                    showSwitch={true}
+                />
+            ) : (
+                undefined
+            )}
         </Container>
     );
 };

src/renderer/components/Timer/action.ts

@@ -68,6 +68,10 @@ export const defaultState: TimerState = {
     currentTab: 'timer'
 };
 
+if (process.env.NODE_ENV === 'development') {
+    defaultState.currentTab = 'analyser';
+}
+
 export const startTimer = createActionCreator('[Timer]START_TIMER');
 export const stopTimer = createActionCreator('[Timer]STOP_TIMER');
 export const continueTimer = createActionCreator('[Timer]CONTINUE_TIMER');

src/renderer/components/Visualization/ColorEncoder.ts

@@ -0,0 +1,41 @@
+export class ColorEncoder {
+    baseString = '0123456789abcdef';
+
+    encodeNum(n: number): string {
+        return this.baseString[Math.floor(n / 16)] + this.baseString[Math.floor(n % 16)];
+    }
+
+    encodeColor(r: number, g: number, b: number): string {
+        return this.encodeNum(r) + this.encodeNum(g) + this.encodeNum(b);
+    }
+
+    decodeColor(rgb: string) {
+        return [
+            this.decodeNum(rgb.substring(0, 2)),
+            this.decodeNum(rgb.substring(2, 4)),
+            this.decodeNum(rgb.substring(4, 6))
+        ];
+    }
+
+    decodeNum(n: string) {
+        return this.baseString.indexOf(n[0]) * 16 + this.baseString.indexOf(n[1]);
+    }
+
+    randomColor() {
+        return [
+            Math.floor(Math.random() * 256),
+            Math.floor(Math.random() * 256),
+            Math.floor(Math.random() * 256)
+        ];
+    }
+
+    getAColor() {
+        let color = this.randomColor();
+        let sum = color.reduce((l, v) => l + v, 0);
+        while (sum < 60 || sum > 240 * 3) {
+            color = this.randomColor();
+            sum = color.reduce((l, v) => l + v, 0);
+        }
+        return '#' + this.encodeColor(color[0], color[1], color[2]);
+    }
+}