refactor: migrate timeline.js to typescript (#680)

* refactor: migrate timeline.js to typescript

* refactor: migrate timeline-simple.js to typescript

* refactor: migrate periodusage.js to typescript

* refactor: add an interface for chart data

makes it more typesafe

---------

Co-authored-by: Brayo <vukubrian@gmail.com>

Author: nerumo

src/util/color.ts

@@ -109,7 +109,7 @@ function fallbackColor(str: string): string {
   }
 }
 
-export function getTitleAttr(bucket: IBucket, e: IEvent) {
+export function getTitleAttr(bucket: { type?: string }, e: IEvent) {
   if (bucket.type == 'currentwindow') {
     return e.data.app;
   } else if (bucket.type == 'web.tab.current') {

src/visualizations/PeriodUsage.vue

@@ -17,7 +17,7 @@ svg {
 // NOTE: This is just a Vue.js component wrapper for periodusage.js
 //       Code should generally go in the framework-independent file.
 
-import periodusage from './periodusage.js';
+import periodusage from './periodusage';
 
 export default {
   name: 'aw-periodusage',

src/visualizations/TimelineInspect.vue

@@ -10,10 +10,10 @@ svg {
 </style>
 
 <script lang="ts">
-// NOTE: This is just a Vue.js component wrapper for timeline.js
+// NOTE: This is just a Vue.js component wrapper for timeline.ts
 //       Code should generally go in the framework-independent file.
 
-import timeline from './timeline.js';
+import timeline from './timeline';
 
 export default {
   name: 'aw-timeline',

src/visualizations/TimelineSimple.vue

@@ -13,7 +13,7 @@ svg {
 // NOTE: This is just a Vue.js component wrapper for timeline-simple.js
 //       Code should generally go in the framework-independent file.
 
-import timeline_simple from './timeline-simple.js';
+import timeline_simple from './timeline-simple';
 
 export default {
   name: 'aw-timeline',

src/visualizations/VisTimeline.vue

@@ -40,12 +40,24 @@ import Color from 'color';
 import { buildTooltip } from '../util/tooltip.js';
 import { getCategoryColorFromEvent, getTitleAttr } from '../util/color';
 import { getSwimlane } from '../util/swimlane.js';
+import { IEvent } from '../util/interfaces';
 
 import { Timeline } from 'vis-timeline/esnext';
 import 'vis-timeline/styles/vis-timeline-graph2d.css';
 import EventEditor from '~/components/EventEditor.vue';
 
 let isAlertWarningShown = false;
+
+interface IChartDataItem {
+  bucketId: string;
+  title: string;
+  tooltip: string;
+  start: Date;
+  end: Date;
+  color: string;
+  event: IEvent;
+  swimlane: string;
+}
 export default {
   components: {
     EventEditor,
@@ -99,8 +111,8 @@ export default {
         return [];
       }
     },
-    chartData() {
-      const data = [];
+    chartData(): IChartDataItem[] {
+      const data: IChartDataItem[] = [];
       _.each(this.bucketsFromEither, bucket => {
         if (bucket.events === undefined) {
           return;
@@ -114,17 +126,16 @@ export default {
         }
         events.sort((a, b) => a.timestamp.valueOf() - b.timestamp.valueOf());
         _.each(events, e => {
-          const color = getCategoryColorFromEvent(bucket, e);
-          data.push([
-            bucket.id,
-            getTitleAttr(bucket, e),
-            buildTooltip(bucket, e),
-            new Date(e.timestamp),
-            new Date(moment(e.timestamp).add(e.duration, 'seconds').valueOf()),
-            color,
-            getSwimlane(bucket, color, this.swimlane, e),
-            e,
-          ]);
+          data.push({
+            bucketId: bucket.id,
+            title: getTitleAttr(bucket, e),
+            tooltip: buildTooltip(bucket, e),
+            start: new Date(e.timestamp),
+            end: new Date(moment(e.timestamp).add(e.duration, 'seconds').valueOf()),
+            color: getCategoryColorFromEvent(bucket, e),
+            event: e,
+            swimlane: getSwimlane(bucket, e.color, this.swimlane, e),
+          });
         });
       });
       return data;
@@ -170,7 +181,7 @@ export default {
       if (properties.items.length == 0) {
         return;
       } else if (properties.items.length == 1) {
-        const event = this.chartData[properties.items[0]][7];
+        const event = this.chartData[properties.items[0]].event;
         const groupId = this.items[properties.items[0]].group;
         const bucketId = _.find(this.groups, g => g.id == groupId).content;
 
@@ -221,18 +232,18 @@ export default {
       });
 
       // Build items
-      const items = _.map(this.chartData, (row, i) => {
-        const bgColor = row[5];
+      const items = _.map(this.chartData, (item, i) => {
+        const bgColor = item.color;
         const borderColor = Color(bgColor).darken(0.3);
         return {
           id: String(i),
-          group: row[0],
-          content: row[1],
-          title: row[2],
-          start: moment(row[3]),
-          end: moment(row[4]),
+          group: item.bucketId,
+          content: item.title,
+          title: item.tooltip,
+          start: moment(item.start),
+          end: moment(item.end),
           style: `background-color: ${bgColor}; border-color: ${borderColor}`,
-          subgroup: row[6],
+          subgroup: item.swimlane,
         };
       });
 

src/visualizations/periodusage.js src/visualizations/periodusage.tssrc/visualizations/periodusage.js renamed to src/visualizations/periodusage.ts

@@ -4,12 +4,12 @@ import moment from 'moment';
 
 import { seconds_to_duration, get_hour_offset } from '../util/time.ts';
 
-function create(svg_elem) {
+function create(svg_elem: SVGElement) {
   // Clear element
   svg_elem.innerHTML = '';
 }
 
-function set_status(svg_elem, msg) {
+function set_status(svg_elem: SVGElement, msg: string) {
   // Select svg canvas
   svg_elem.innerHTML = '';
   const svg = d3.select(svg_elem);
@@ -29,7 +29,7 @@ const diagramcolor = '#aaa';
 const diagramcolor_selected = '#fc5';
 const diagramcolor_focused = '#adf';
 
-function update(svg_elem, usage_arr, onPeriodClicked) {
+function update(svg_elem: SVGElement, usage_arr, onPeriodClicked) {
   const dateformat = 'YYYY-MM-DD';
 
   // No apps, sets status to "No data"
@@ -56,15 +56,15 @@ function update(svg_elem, usage_arr, onPeriodClicked) {
   const width = 100 / usage_arr.length - padding;
   const center_elem = Math.floor(usage_arr.length / 2);
 
-  _.each(usage_arr, (events, i) => {
+  _.each(usage_arr, (events, i: number) => {
     const usage_time = get_usage_time(events);
     const height = 85 * (usage_time / longest_usage);
     let date = '';
     if (events.length > 0) {
       // slice off so it's only the day
       date = moment(events[0].timestamp).subtract(get_hour_offset(), 'hours').format(dateformat);
     }
-    const color = i == center_elem ? diagramcolor_selected : diagramcolor;
+    const color = i === center_elem ? diagramcolor_selected : diagramcolor;
     const offset = 50;
 
     const x = i * padding + i * width + 0.25 * width;
@@ -95,7 +95,7 @@ function update(svg_elem, usage_arr, onPeriodClicked) {
       .attr('ry', 3)
       .attr(
         'style',
-        i == center_elem ? 'stroke: black; stroke-width: 1;' : 'stroke: #222; stroke-width: 1;'
+        i === center_elem ? 'stroke: black; stroke-width: 1;' : 'stroke: #222; stroke-width: 1;'
       )
       .attr('width', width + '%')
       .attr('height', height + offset + '%')

src/visualizations/timeline-simple.js src/visualizations/timeline-simple.tssrc/visualizations/timeline-simple.js renamed to src/visualizations/timeline-simple.ts

@@ -31,7 +31,7 @@ function set_status(svg_el, text) {
     .attr('fill', 'black');
 }
 
-function update(svg_el, events, event_type) {
+function update(svg_el, events, event_type: string) {
   const timeline = d3.select(svg_el);
   timeline.selectAll('*').remove();
 

src/visualizations/timeline.js src/visualizations/timeline.tssrc/visualizations/timeline.js renamed to src/visualizations/timeline.ts

@@ -1,26 +1,24 @@
-'use strict';
-
 /*
  * Creates a colored timeline where you can hover for more info.
  */
 
-const d3 = require('d3');
-const Color = require('color');
-const _ = require('lodash');
-const moment = require('moment');
+import * as d3 from 'd3';
+import Color from 'color';
+import _ from 'lodash';
+import moment from 'moment';
 
 import { getColorFromString } from '../util/color';
-
 import { seconds_to_duration } from '../util/time';
+import { IEvent } from '../util/interfaces';
 
-function show_info(container, elem_id) {
-  const title_event_box = container.querySelector('#' + elem_id);
-  const titleinfo = container.querySelector('.titleinfo-container');
+function show_info(container: HTMLElement, elem_id: string): void {
+  const title_event_box = container.querySelector('#' + elem_id) as HTMLElement;
+  const titleinfo = container.querySelector('.titleinfo-container') as HTMLElement;
   titleinfo.innerHTML = title_event_box.innerHTML;
-  titleinfo.style.height = title_event_box.getAttribute('height');
+  titleinfo.style.height = title_event_box.getAttribute('height') || '';
 }
 
-function create(container) {
+function create(container: HTMLElement): void {
   // Clear element
   container.innerHTML = '';
 
@@ -32,7 +30,7 @@ function create(container) {
     .attr('width', '100%');
 
   // Hidden svg image that stores all titleinfo for each timeperiod
-  d3.select(container).append('div').attr('class', 'titleinfo-list').attr('display', 'none');
+  d3.select(container).append('div').attr('class', 'titleinfo-list').style('display', 'none');
 
   // Container for titleinfo that has a fixed size and a overflow scroll
   const titleinfo_container = document.createElement('div');
@@ -44,14 +42,14 @@ function create(container) {
   // Titleinfo box that changes content depending on what was timeperiod was last recently hovered on
   d3.select(titleinfo_container)
     .append('div')
-    .attr('width', '100%')
+    .style('width', '100%')
     .attr('class', 'titleinfo-container');
 }
 
-function set_status(container, text) {
-  const timeline_elem = container.querySelector('.apptimeline');
-  const titleinfo_list_elem = container.querySelector('.titleinfo-list');
-  const titleinfo_container_elem = container.querySelector('.titleinfo-container');
+function set_status(container: HTMLElement, text: string): void {
+  const timeline_elem = container.querySelector('.apptimeline') as HTMLElement;
+  const titleinfo_list_elem = container.querySelector('.titleinfo-list') as HTMLElement;
+  const titleinfo_container_elem = container.querySelector('.titleinfo-container') as HTMLElement;
 
   const timeline = d3.select(timeline_elem);
   timeline_elem.innerHTML = '';
@@ -68,14 +66,20 @@ function set_status(container, text) {
     .attr('fill', 'black');
 }
 
-function update(container, events, showAFK, chunkfunc, eventfunc) {
+function update(
+  container: HTMLElement,
+  events: IEvent[],
+  showAFK: boolean,
+  chunkfunc: (event: IEvent) => string,
+  eventfunc: (subevent: IEvent) => string
+): HTMLElement {
   const timeline = d3.select(container.querySelector('.apptimeline')).html(null);
   const titleinfo_list = d3.select(container.querySelector('.titleinfo-list')).html(null);
   d3.select(container.querySelector('.titleinfo-container')).html(null);
 
   if (events.length <= 0) {
     set_status(container, 'No data');
-    return;
+    return container;
   }
 
   const firstEvent = events[0];
@@ -92,12 +96,12 @@ function update(container, events, showAFK, chunkfunc, eventfunc) {
   _.each(events, function (e, i) {
     // Timeline rect
 
-    let eventX, eventWidth;
+    let eventX: string | number, eventWidth: number;
     if (showAFK) {
       const eventBegin = moment(e.timestamp);
       eventX = eventBegin.diff(timeStart, 'seconds', true) / secSinceStart;
       eventX = eventX * 100 + '%';
-      eventWidth = (e.duration / secSinceStart) * 100 + '%';
+      eventWidth = (e.duration / secSinceStart) * 100;
     } else {
       eventX = curr_x;
       eventWidth = (e.duration / totalDuration) * 100;
@@ -112,7 +116,7 @@ function update(container, events, showAFK, chunkfunc, eventfunc) {
       .append('rect')
       .attr('x', eventX)
       .attr('y', 0)
-      .attr('width', eventWidth)
+      .attr('width', eventWidth + '%')
       .attr('height', 10)
       .style('fill', appcolor)
       .on('mouseover', () => {
@@ -141,7 +145,7 @@ function update(container, events, showAFK, chunkfunc, eventfunc) {
 
     // Titleinfo
     const infolist = infobox.append('table');
-    _.each(e.data.subevents, function (t) {
+    _.each(e.data.subevents, function (t: IEvent) {
       const inforow = infolist.append('tr');
       // Clocktime
       const clocktime = moment(t.timestamp).format('HH:mm:ss');
@@ -160,7 +164,7 @@ function update(container, events, showAFK, chunkfunc, eventfunc) {
 }
 
 export default {
-  create: create,
-  update: update,
-  set_status: set_status,
+  create,
+  update,
+  set_status,
 };