From 8a2e605c6f04995d8b7028a0ef1577c620dbd0c6 Mon Sep 17 00:00:00 2001
From: Michael Mrowetz <me@michaelmrowetz.com>
Date: Sat, 31 Mar 2018 11:28:22 +0200
Subject: [PATCH] #207 - fix typo in leftColumnWidth & add depreciation warning

---
 README.md                           | 6 +++---
 package-lock.json                   | 2 +-
 src/ts/helpers/parse.ts             | 2 +-
 src/ts/main.ts                      | 8 +++++++-
 src/ts/typing/options.ts            | 2 +-
 src/ts/waterfall/row/svg-row.ts     | 8 ++++----
 src/ts/waterfall/row/svg-tooltip.ts | 2 +-
 src/ts/waterfall/svg-chart.ts       | 4 ++--
 8 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index b868e7a1..f1790acf 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # PerfCascade
 Responsive, SVG based [HAR](http://www.softwareishard.com/blog/har-12-spec/) waterfall viewer .
 
-[![npm version](https://img.shields.io/npm/v/perf-cascade.svg?style=flat-square)](https://www.npmjs.com/package/perf-cascade) 
+[![npm version](https://img.shields.io/npm/v/perf-cascade.svg?style=flat-square)](https://www.npmjs.com/package/perf-cascade)
 [![npm downloads](https://img.shields.io/npm/dt/perf-cascade.svg?style=flat-square)](https://www.npmjs.com/package/perf-cascade)
 [![Build status][travis-image]][travis-url]
 
@@ -43,7 +43,7 @@ Or with options:
 /** override selected options for PerfCascade (all have defaults) */
 var options = {
   showIndicatorIcons: false, //default: true
-  leftColumnWith: 30 //default: 25
+  leftColumnWidth: 30 //default: 25
 }
 
 var perfCascadeSvg =  perfCascade.fromHar(harData, options)
@@ -72,7 +72,7 @@ see [options.d.ts](https://github.com/micmro/PerfCascade/blob/master/src/ts/typi
 | `showAlignmentHelpers` | `boolean` | `true` | Show verticale lines to easier spot potential dependencies/blocking between requests |
 | `showMimeTypeIcon` | `boolean` | `true` |  Show mime type icon on the left |
 | `showIndicatorIcons` | `boolean` | `true` |  Show warning icons for potential issues on the left |
-| `leftColumnWith` | `number` | `25` | Relative width of the info column on the left (in percent) |
+| `leftColumnWidth` | `number` | `25` | Relative width of the info column on the left (in percent) |
 | `pageSelector` | `HTMLSelectElement` | `undefined` | DOM `<select>` element to use to select a run if the HAR contains multiple runs. |
 | `selectedPage` | `number` | `0` | Zero-based index of the page to initially render.<br/>If `selectedPage` is larger than the number of pages the last page will be selected. |
 | `legendHolder` | `HTMLElement`<br/>(DOM element) | `undefined` <br/>(not shown) | If set a legend explaining the waterfall colours is rendered in the `legendHolder` DOM element. |
diff --git a/package-lock.json b/package-lock.json
index 09e4b9e8..de38f2c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "perf-cascade",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/ts/helpers/parse.ts b/src/ts/helpers/parse.ts
index d25f9573..764a9e29 100644
--- a/src/ts/helpers/parse.ts
+++ b/src/ts/helpers/parse.ts
@@ -201,7 +201,7 @@ export function validateOptions(options: ChartRenderOption): ChartRenderOption {
     options[name] = !!options[name];
   };
 
-  validateInt("leftColumnWith");
+  validateInt("leftColumnWidth");
   validateInt("rowHeight");
   validateInt("selectedPage");
   ensureBoolean("showAlignmentHelpers");
diff --git a/src/ts/main.ts b/src/ts/main.ts
index 2d293af1..d04c01f4 100755
--- a/src/ts/main.ts
+++ b/src/ts/main.ts
@@ -9,7 +9,7 @@ import { createWaterfallSvg } from "./waterfall/svg-chart";
 
 /** default options to use if not set in `options` parameter */
 const defaultChartOptions: Readonly<ChartOptions> = {
-  leftColumnWith: 25,
+  leftColumnWidth: 25,
   legendHolder: undefined,
   onParsed: undefined,
   pageSelector: undefined,
@@ -35,6 +35,12 @@ export function makeLegend(): HTMLUListElement {
 }
 
 function PerfCascade(waterfallDocsData: WaterfallDocs, chartOptions: Partial<ChartRenderOption> = {}): SVGSVGElement {
+  if (chartOptions["leftColumnWith"] !== undefined) {
+    // tslint:disable-next-line: no-console
+    console.warn("Depreciation Warning: The option 'leftColumnWith' has been fixed to 'leftColumnWidth', " +
+      "please update your code as this will get deprecated in the future");
+    chartOptions.leftColumnWidth = chartOptions["leftColumnWith"];
+  }
   const options: ChartRenderOption = validateOptions({ ...defaultChartOptions, ...chartOptions } as ChartRenderOption);
 
   // setup paging helper
diff --git a/src/ts/typing/options.ts b/src/ts/typing/options.ts
index c56670cb..f95a944d 100644
--- a/src/ts/typing/options.ts
+++ b/src/ts/typing/options.ts
@@ -10,7 +10,7 @@ export interface ChartRenderOption {
   /** Show warning icons for potential issues on the left */
   showIndicatorIcons: boolean;
   /** Relative width of the info column on the left (in percent) */
-  leftColumnWith: number;
+  leftColumnWidth: number;
   /** Select element to use for paging (if not set no Selector is rendered)   */
   pageSelector: HTMLSelectElement;
   /** Zero-based index of the pre-selected page */
diff --git a/src/ts/waterfall/row/svg-row.ts b/src/ts/waterfall/row/svg-row.ts
index c6f071fc..f078ee75 100644
--- a/src/ts/waterfall/row/svg-row.ts
+++ b/src/ts/waterfall/row/svg-row.ts
@@ -34,17 +34,17 @@ export function createRow(context: Context, index: number,
 
   const y = rectData.y;
   const rowHeight = rectData.height;
-  const leftColumnWith = context.options.leftColumnWith;
+  const leftColumnWidth = context.options.leftColumnWidth;
   const rowItem = svg.newA(entry.responseDetails.rowClass || "" as never);
   rowItem.setAttribute("tabindex", "0");
   rowItem.setAttribute("xlink:href", "javascript:void(0)");
   const leftFixedHolder = svg.newSvg("left-fixed-holder", {
-    width: `${leftColumnWith}%`,
+    width: `${leftColumnWidth}%`,
     x: "0",
   });
   const flexScaleHolder = svg.newSvg("flex-scale-waterfall", {
-    width: `${100 - leftColumnWith}%`,
-    x: `${leftColumnWith}%`,
+    width: `${100 - leftColumnWidth}%`,
+    x: `${leftColumnWidth}%`,
   });
 
   const rect = rowSubComponents.createRect(rectData, entry.segments, entry.total);
diff --git a/src/ts/waterfall/row/svg-tooltip.ts b/src/ts/waterfall/row/svg-tooltip.ts
index 07cbcd42..3ae2a5bc 100644
--- a/src/ts/waterfall/row/svg-tooltip.ts
+++ b/src/ts/waterfall/row/svg-tooltip.ts
@@ -94,7 +94,7 @@ export const onHoverOutShowTooltip = (base: SVGRectElement) => {
  * @param {ChartOptions} options - Chart config/customization options
  */
 export const makeTooltip = (options: ChartRenderOption) => {
-  const leftColOffsetPerc = options.leftColumnWith;
+  const leftColOffsetPerc = options.leftColumnWidth;
   const holder = svg.newSvg("tooltip-holder", {
     width: "100%",
     x: "0",
diff --git a/src/ts/waterfall/svg-chart.ts b/src/ts/waterfall/svg-chart.ts
index c04d0e9d..72d9cc82 100644
--- a/src/ts/waterfall/svg-chart.ts
+++ b/src/ts/waterfall/svg-chart.ts
@@ -98,8 +98,8 @@ export function createWaterfallSvg(data: WaterfallData, options: ChartRenderOpti
 
   /** Holder for scale, event and marks */
   const scaleAndMarksHolder = svg.newSvg("scale-and-marks-holder", {
-    width: `${100 - options.leftColumnWith}%`,
-    x: `${options.leftColumnWith}%`,
+    width: `${100 - options.leftColumnWidth}%`,
+    x: `${options.leftColumnWidth}%`,
   });
 
   /** Holder for on-hover vertical comparison bars */