chore: update dependencies and fix new lint/compiler issues

Author: Michael Mrowetz

Diff for: package.json

@@ -33,28 +33,28 @@
   "types": "./index.d.ts",
   "license": "MIT",
   "devDependencies": {
-    "conventional-changelog": "^1.1.3",
-    "grunt": "^1.0.1",
+    "conventional-changelog": "^1.1.15",
+    "grunt": "^1.0.2",
     "grunt-banner": "^0.6.0",
-    "grunt-browserify": "^5.0.0",
+    "grunt-browserify": "^5.2.0",
     "grunt-bump": "^0.8.0",
     "grunt-contrib-clean": "^1.1.0",
     "grunt-contrib-concat": "^1.0.1",
     "grunt-contrib-copy": "^1.0.0",
-    "grunt-contrib-uglify": "^3.0.1",
+    "grunt-contrib-uglify": "^3.3.0",
     "grunt-contrib-watch": "^1.0.0",
     "grunt-gh-pages": "^2.0.0",
-    "grunt-run": "^0.7.0",
+    "grunt-run": "^0.8.0",
     "grunt-tslint": "^5.0.1",
     "live-server": "^1.2.0",
     "load-grunt-config": "^0.19.2",
-    "tsify": "^3.0.1",
-    "tslint": "~5.4",
-    "tslint-eslint-rules": "^4.1.1",
-    "typescript": "~2.3",
+    "tsify": "^3.0.4",
+    "tslint": "~5.9.1",
+    "tslint-eslint-rules": "^5.0.0",
+    "typescript": "~2.7.2",
     "whatwg-fetch": "^2.0.3"
   },
   "dependencies": {
-    "@types/har-format": "^1.2.1"
+    "@types/har-format": "^1.2.2"
   }
 }

Diff for: src/ts/main.ts

@@ -68,7 +68,7 @@ function PerfCascade(waterfallDocsData: WaterfallDocs, chartOptions: Partial<Cha
  * @returns {SVGSVGElement} - Chart SVG Element
  */
 export function fromHar(harData: Har, options: ChartOptions = {}): SVGSVGElement {
-  const harTransformerOptions: HarTransformerOptions = {
+  const harTransformerOptions = {
     ...defaultHarTransformerOptions,
     ...options,
   };

Diff for: src/ts/transformers/har.ts

@@ -242,9 +242,9 @@ const buildDetailTimingBlocks = (startRelative: number, harEntry: Entry): Waterf
     // special case for 'connect' && 'ssl' since they share time
     // http://www.softwareishard.com/blog/har-12-spec/#timings
     if (key === "connect" && t["ssl"] && t["ssl"] !== -1) {
-      const sslStart = parseInt(harEntry[`_ssl_start`], 10) || time.start;
-      const sslEnd = parseInt(harEntry[`_ssl_end`], 10) || time.start + t.ssl;
-      const connectStart = (!!parseInt(harEntry[`_ssl_start`], 10)) ? time.start : sslEnd;
+      const sslStart = parseInt(harEntry[`_ssl_start`].toString(), 10) || time.start;
+      const sslEnd = parseInt(harEntry[`_ssl_end`].toString(), 10) || time.start + t.ssl;
+      const connectStart = (!!parseInt(harEntry[`_ssl_start`].toString(), 10)) ? time.start : sslEnd;
       return collect
         .concat([createWaterfallEntryTiming("ssl", Math.round(sslStart), Math.round(sslEnd))])
         .concat([createWaterfallEntryTiming(key, Math.round(connectStart), Math.round(time.end))]);

Diff for: src/ts/waterfall/sub-components/svg-general-components.ts

@@ -24,11 +24,12 @@ const appendSecond = (context: Context, timeHolder: SVGGElement,
   /** just used if `addLabel` is `true` - for full seconds */
   let lineLabel;
   let lineClass = "sub-second-line";
+  let x: string;
 
   if (addLabel) {
     const showTextBefore = (sec > secsTotal - 0.2);
     lineClass = "second-line";
-    let x = roundNumber(secPerc * sec) + 0.5 + "%";
+    x = roundNumber(secPerc * sec) + 0.5 + "%";
     const css = {};
     if (showTextBefore) {
       x = roundNumber(secPerc * sec) - 0.5 + "%";
@@ -37,7 +38,7 @@ const appendSecond = (context: Context, timeHolder: SVGGElement,
     lineLabel = svg.newTextEl(sec + "s", { x, y: diagramHeight }, css);
   }
 
-  const x = roundNumber(secPerc * sec) + "%";
+  x = roundNumber(secPerc * sec) + "%";
   const lineEl = svg.newLine({
     x1: x,
     x2: x,

Diff for: src/ts/waterfall/svg-chart.ts

@@ -10,9 +10,9 @@ import OverlayManager from "./details-overlay/overlay-manager";
 import { PubSub } from "./details-overlay/pub-sub";
 import * as row from "./row/svg-row";
 import { makeTooltip } from "./row/svg-tooltip";
-import * as alignmentHelper from "./sub-components/svg-alignment-helper";
-import * as generalComponents from "./sub-components/svg-general-components";
-import * as marks from "./sub-components/svg-marks";
+import * as svgAlignmentHelper from "./sub-components/svg-alignment-helper";
+import * as svgGeneralComponents from "./sub-components/svg-general-components";
+import * as svgMarks from "./sub-components/svg-marks";
 
 /**
  * Get a string that's as wide, or wider than any number from 0-n.
@@ -107,16 +107,16 @@ export function createWaterfallSvg(data: WaterfallData, options: ChartRenderOpti
   let mouseListeners: HoverEvtListeners;
   if (options.showAlignmentHelpers) {
     hoverOverlayHolder = svg.newG("hover-overlays");
-    const hoverEl = alignmentHelper.createAlignmentLines(context.diagramHeight);
+    const hoverEl = svgAlignmentHelper.createAlignmentLines(context.diagramHeight);
     hoverOverlayHolder.appendChild(hoverEl.startline);
     hoverOverlayHolder.appendChild(hoverEl.endline);
-    mouseListeners = alignmentHelper.makeHoverEvtListeners(hoverEl);
+    mouseListeners = svgAlignmentHelper.makeHoverEvtListeners(hoverEl);
   }
 
   // Start appending SVG elements to the holder element (timeLineHolder)
 
-  scaleAndMarksHolder.appendChild(generalComponents.createTimeScale(context, data.durationMs));
-  scaleAndMarksHolder.appendChild(marks.createMarks(context, data.marks));
+  scaleAndMarksHolder.appendChild(svgGeneralComponents.createTimeScale(context, data.durationMs));
+  scaleAndMarksHolder.appendChild(svgMarks.createMarks(context, data.marks));
 
   // This assumes all icons (mime and indicators) have the same width
   const perIconWidth = entriesToShow[0].responseDetails.icon.width;