#207 - fix typo in leftColumnWidth & add depreciation warning

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. |

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");

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

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 */

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);

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",

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 */