Install instructions updated & typo fixes

README.md

@@ -1,8 +1,8 @@
 # Boom Table Panel for Grafana
 
-![Build](https://github.com/yesoreyeram/yesoreyeram-boomtable-panel/workflows/Test%20&%20Build/badge.svg)
+[![Build](https://github.com/yesoreyeram/yesoreyeram-boomtable-panel/workflows/Test%20&%20Build/badge.svg)](https://github.com/yesoreyeram/yesoreyeram-boomtable-panel/actions?query=workflow%3A%22Build+%26+Publish%22)
+[![Release](https://github.com/yesoreyeram/yesoreyeram-boomtable-panel/workflows/Release/badge.svg)](https://github.com/yesoreyeram/yesoreyeram-boomtable-panel/actions?query=workflow%3ARelease)
 
-![Release](https://github.com/yesoreyeram/yesoreyeram-boomtable-panel/workflows/Release/badge.svg)
 
 Boom Table Panel for Grafana. Table/MultiStat plugin with multiple columns for Graphite, InfluxDB, Prometheus, Azure Monitor.
 
@@ -25,6 +25,7 @@ Features :
 * Row/Column name based on multiple graphite/InfluxDB/Prometheus columns
 * Filter metrics
 * Debug UI to test patterns
+* Signed and published at [grafana.com/plugins](https://grafana.com/grafana/plugins/yesoreyeram-boomtable-panel)
 
 Supported / Tested Data Sources :
 --------------------------------
@@ -101,7 +102,7 @@ patterns and matching metrics
 Row and Column name guidelines
 ------------------------------
 
-Row and Col names are derived from series name. If n is wrapped by "_", then that will be replaced by n-th column in graphite/influxdb/prometheus metric (seperated by delimiter). Refer below examples and screenshots to get more idea. Or use debug mode to try. (n starts from index 0)
+Row and Col names are derived from series name. If n is wrapped by "_", then that will be replaced by n-th column in graphite/influxdb/prometheus metric (separated by delimiter). Refer below examples and screenshots to get more idea. Or use debug mode to try. (n starts from index 0)
 
 Sample graphite series / Influx / Prometheus Metrics
 
@@ -119,13 +120,13 @@ Pattern & Output
     _1_ _1_                     --> server server
     _4_ __5_                    --> cpu _usage
 
-**Note** : If you prefer to change the wrapper from "_" to somthing like "~" or "__", you can do it through the option "Row / Column indentification wrapper" in options tab.
+**Note** : If you prefer to change the wrapper from "_" to something like "~" or "__", you can do it through the option "Row / Column identification wrapper" in options tab.
 
 
 Thresholds 
 ----------
 
-Thresholds are numbers seperated by comma. There can be multiple thresholds.
+Thresholds are numbers separated by comma. There can be multiple thresholds.
 
 Example:
 
@@ -135,7 +136,7 @@ Example:
 Time based thresholds
 ---------------------
 
-Thresholds can be overriden, based on day and time of the browser.
+Thresholds can be overridden, based on day and time of the browser.
 
 Multiple time based threshold rules can be set for any given pattern. If multiple rule matches, last rule wins. If no rule matches, default thresholds will be applicable. Example given below. 
 
@@ -147,22 +148,22 @@ Following notations should be followed when added time based threshold rule
 
 **To**   : in HHMM format examples: 0000 2400 1330 1250
 
-**On**   : Days seperated by comma. Order doesnt matter. Examples; "Sat,Sun", "Mon,Sun,Tue"
+**On**   : Days separated by comma. Order doesn't matter. Examples; "Sat,Sun", "Mon,Sun,Tue"
 
 **Threshold** : Same format as default threshold
 
 ![Time based thresholds](https://raw.githubusercontent.com/yesoreyeram/yesoreyeram-boomtable-panel/master/dist/src/img/time-based-thresholds.png)
 
-**WARNING**: "From" and "To" fields will be compared against timestamp of last data received from server. If the last data point is not availble, then browser time will be considered.
+**WARNING**: "From" and "To" fields will be compared against timestamp of last data received from server. If the last data point is not available, then browser time will be considered.
 
-**TIPS** : If your threshold time rage ranges between two day, (example: 2300 of saturday to 0230 of sunday), then split the rule into two each for saturdary and sunday.
+**TIPS** : If your threshold time rage ranges between two day, (example: 2300 of saturday to 0230 of sunday), then split the rule into two each for saturday and sunday.
 
 **NOTE** : If you specify n number threshold levels in default pattern (ex: 20,30),then time based thresholds should also follow same number of levels.
 
 Background color based on thresholds
 ------------------------------------
 
-Works the same way as single stat panel. Background color is a list of colors seperated by pipe symbol. Colors can be named or hexadecimal colors or rgb or rgba. Number of colors should be greater than the number of thresholds.
+Works the same way as single stat panel. Background color is a list of colors separated by pipe symbol. Colors can be named or hexadecimal colors or rgb or rgba. Number of colors should be greater than the number of thresholds.
 
 Example of color patterns:
 
@@ -194,19 +195,19 @@ Example of matching patterns:
 Background color overrides
 --------------------------
 
-Background colors can be overriden for specific values by using the pattern option `Enable BG Color overrides for specific value?`. Override values should be specified in the `BG Color Overrides` in the following format. If multiple matches found, first one will win.
+Background colors can be overridden for specific values by using the pattern option `Enable BG Color overrides for specific value?`. Override values should be specified in the `BG Color Overrides` in the following format. If multiple matches found, first one will win.
 
     0->Red
     13->Red|8->Green
 
-Value and colors are seperated by `->`. Multiple combination of values can be given seperated by `|`. 
+Value and colors are separated by `->`. Multiple combination of values can be given separated by `|`. 
 
 If background colors based on thresholds also specified along with this, this will be override the threshold based pattern.
 
 Value transformation based on thresholds
 ----------------------------------------
 
-Logic is same as background color. But the value to be displayed can be altered here. Display value will be replaced with the value provided. Values are seperated by pipe. if the value is wrapped with _, then it will represent the actual value. 
+Logic is same as background color. But the value to be displayed can be altered here. Display value will be replaced with the value provided. Values are separated by pipe. if the value is wrapped with _, then it will represent the actual value. 
 
 `_value_` will be replaced by actual value with format and decimals
 
@@ -248,18 +249,18 @@ Sample value transformation: (Assume your metrics results, 95 and it is percenta
     _value_                 -->     95%
     GOOD (_value_)          -->     GOOD (95%)
     HOT (_value_ > threshold of 80%)     -->     HOT (95% > threshold of 80%)
-    Contact helpdesk        -->     Contact helpdesk
+    Contact help desk        -->     Contact help desk
 
 
 Transform value overrides
 --------------------------
 
-Transform values can be overriden for specific values by using the pattern option `Enable value transform overrides?`. Override values should be specified in the `Value transform Overrides` in the following format. If multiple matches found, first one will win.
+Transform values can be overridden for specific values by using the pattern option `Enable value transform overrides?`. Override values should be specified in the `Value transform Overrides` in the following format. If multiple matches found, first one will win.
 
     13->Evil
     12->good|37.50->_fa-circle_|99->Oh no...
 
-Value and transform values are seperated by `->`. Multiple combination of values can be given seperated by `|`. 
+Value and transform values are separated by `->`. Multiple combination of values can be given separated by `|`. 
 
 If transform values based on thresholds also specified along with this, this will be override the threshold based pattern.
 
@@ -286,7 +287,7 @@ First row link can have token `_row_name_` . Any other tokens will be ignored. I
 
 ![image](https://user-images.githubusercontent.com/153843/61057603-8a0a0580-a3ed-11e9-9572-bd76edb0b685.png)
 
-Example : `http://google.com?q=_row_name_` will be replaced as `http://google.com?q=app_0` if the first columnn name is `app_0`
+Example : `http://google.com?q=_row_name_` will be replaced as `http://google.com?q=app_0` if the first column name is `app_0`
 
 Refer issue [#85](https://github.com/yesoreyeram/yesoreyeram-boomtable-panel/issues/85) for more details
 
@@ -319,17 +320,17 @@ If your row name / col name / transform metrics contains strings that starts wit
 
 ` _fa-apple,,5_ `           ->  APPLE icon in default color repeated 5 times
 
-` _fa-square,red,3,gray,10_ ` -> 3 RED Square iconds and then 7 gray square icons  ( only from version 1.3.0, fill icons considered )
+` _fa-square,red,3,gray,10_ ` -> 3 RED Square icons and then 7 gray square icons  ( only from version 1.3.0, fill icons considered )
 
-` _fa-square,red,76/10,gray,10_ ` -> 8 RED Square iconds and then 2 gray square icons  ( only from version 1.3.0, math expressions are considered )
+` _fa-square,red,76/10,gray,10_ ` -> 8 RED Square icons and then 2 gray square icons  ( only from version 1.3.0, math expressions are considered )
 
-` _fa-square,red,34/10,gray,10_ ` -> 3 RED Square iconds and then 7 gray square icons  ( only from version 1.3.0, math expressions are considered )
+` _fa-square,red,34/10,gray,10_ ` -> 3 RED Square icons and then 7 gray square icons  ( only from version 1.3.0, math expressions are considered )
 
 In summary, the format of the font awesome token should be in the following format
 
 * this token should be surrounded by one or more empty spaces. 
 * this should start with `_fa-` and ends with `_`
-* should be comma seperated
+* should be comma separated
 * index 0 is fa-iconname where iconname can be any valid font awesome icon
 * index 1 should be color of the icon. If empty default text color / threshold text color will be considered
 * index 2 should be repeat count ( can be simple one level math expression )
@@ -347,7 +348,7 @@ In summary, the format of the font awesome token should be in the following form
     * 23min12 ---- valid and will yield 12
     * 3.36max2 ---- valid and will yield 3
 
-**Example implementations of icons in metrics:** (Unlimited possibilites like heatmap)
+**Example implementations of icons in metrics:** (Unlimited possibilities like heat map)
 
 ![Font Awesome Icons support](https://raw.githubusercontent.com/yesoreyeram/yesoreyeram-boomtable-panel/master/dist/src/img/font-awesome-examples.png)
 
@@ -358,7 +359,7 @@ In summary, the format of the font awesome token should be in the following form
     * Thresholds : `10,20,30,40,50,60,70,80,90`
     * Transform Values : `_fa-square,green,1_ _fa-square,gray,9_|_fa-square,green,2_ _fa-square,gray,8_|_fa-square,green,3_ _fa-square,gray,7_|_fa-square,green,4_ _fa-square,gray,6_|_fa-square,yellow,5_ _fa-square,gray,5_|_fa-square,yellow,6_ _fa-square,gray,4_|_fa-square,yellow,7_ _fa-square,gray,3_|_fa-square,red,8_ _fa-square,gray,2_|_fa-square,red,9_ _fa-square,gray,1_|_fa-square,red,10_ _fa-square,gray,0_`
 * Payment Gateway Status Indicator
-    * Similar threhold setup. (Note : In the example shown in the above picture each series represented by their own patterns.)
+    * Similar threshold setup. (Note : In the example shown in the above picture each series represented by their own patterns.)
     * Hide first column and headers
 * Heatmap
     * Similar threshold setup
@@ -408,22 +409,22 @@ Same as other time series data sources. You need to properly format your legend
 Prometheus & InfluxDB Guidelines
 ---------------------
 
-Though this plugin was initially designed to support graphite, It is also capable of handling timeseries database like Prometheus & InfluxDB. In order to achieve this, you need to **alias** your timeseries/Prometheus/Infludb metrics to proper delimited format. Following screenshot explains plugin usage with Prometheus/InfluxDB where the metrics are aliased with pipe delimiter. This can be any delimiter like space, dot, etc.#
+Though this plugin was initially designed to support graphite, It is also capable of handling timeseries database like Prometheus & InfluxDB. In order to achieve this, you need to **alias** your timeseries/Prometheus/Influxdb metrics to proper delimited format. Following screenshot explains plugin usage with Prometheus/InfluxDB where the metrics are aliased with pipe delimiter. This can be any delimiter like space, dot, etc.#
 
 ![Prometheus Usage](https://raw.githubusercontent.com/yesoreyeram/yesoreyeram-boomtable-panel/master/dist/src/img/prometheus-usage.png)
 
 ![InfluxDB Usage](https://raw.githubusercontent.com/yesoreyeram/yesoreyeram-boomtable-panel/master/dist/src/img/influx-usage.png)
 
-Optionally, you can experiement with the new tags feature instead of **alias** . (Not for production use)
+Optionally, you can experiment with the new tags feature instead of **alias** . (Not for production use)
 
 Tag delimiter for influxdb and prometheus   ( Experimental Feature )
 ====================================================================
 
 **WARNING** :  This may have bugs. Not suitable for production.
 
-To use , tags from your series use `tag` as a delimiter as shown below. Then in the row / column, you can specify the tags surronded by double curly braces as shown below. Metric can be referred by {{metric_name}}}.
+To use , tags from your series use `tag` as a delimiter as shown below. Then in the row / column, you can specify the tags surrounded by double curly braces as shown below. Metric can be referred by {{metric_name}}}.
 
-Rowname, Colname, Links, Tooltips and display template can also have this tag tokens.
+Row name, Column name, Links, Tooltips and display template can also have this tag tokens.
 
 # Influx DB
 
@@ -437,3 +438,54 @@ Rowname, Colname, Links, Tooltips and display template can also have this tag to
 ![image](https://user-images.githubusercontent.com/153843/61379602-c206c200-a89f-11e9-8dfb-462e5f28965b.png)
 ![image](https://user-images.githubusercontent.com/153843/61379630-cf23b100-a89f-11e9-9677-bfa05c05d7ea.png)
 ![image](https://user-images.githubusercontent.com/153843/61379652-db0f7300-a89f-11e9-8cef-254e8f1a8b7a.png)
+
+
+## Installation
+
+There are multiple ways to install this plugin into your grafana instance
+
+### Download and extract zip file
+
+Download the latest zip file from [github](https://github.com/yesoreyeram/yesoreyeram-boomtable-panel/releases) and extract into your grafana plugin folder. Then restart Grafana.
+
+### Using grafana-cli
+
+If you are using grafana-cli, execute the following command to install the plugin
+
+```sh
+grafana-cli plugins install yesoreyeram-boomtable-panel
+```
+or
+
+```sh
+grafana-cli --pluginUrl <ZIP_FILE_URL> plugins install yesoreyeram-boomtable-panel
+```
+
+Example:
+
+```sh
+grafana-cli --pluginUrl https://github.com/yesoreyeram/yesoreyeram-boomtable-panel/releases/download/v1.5.0-alpha.2/yesoreyeram-boomtable-panel-1.5.0-alpha.2.zip plugins install yesoreyeram-boomtable-panel
+```
+
+### Using helm chart
+
+If you use helm chart to provision grafana, use the following config to install the plugin
+
+```yml
+plugins:
+  - yesoreyeram-boomtable-panel
+```
+
+or if you need specific version, then use the following
+
+```yml
+plugins:
+  - <ZIP_FILE_URL>;yesoreyeram-boomtable-panel
+```
+
+Example:
+
+```yml
+plugins:
+  - https://github.com/yesoreyeram/yesoreyeram-boomtable-panel/releases/download/v1.5.0-alpha.2/yesoreyeram-boomtable-panel-1.5.0-alpha.2.zip;yesoreyeram-boomtable-panel
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yesoreyeram-boomtable-panel",
-  "version": "1.5.0-alpha.2",
+  "version": "1.5.0-alpha.3",
   "description": "Boom table panel for Graphite, InfluxDB, Prometheus",
   "main": "dist/module.js",
   "scripts": {

src/app/boom/BoomOutput.ts

@@ -21,7 +21,7 @@ export class BoomOutput {
   }
 }
 BoomOutput.prototype.getDataAsHTML = function(data: IBoomTable, sorting_props): IBoomHTML {
-  let getLinkifiedColumn = function(rowName: string, first_column_link: string, raw_rowName: string): string {
+  let getColumnAsLink = function(rowName: string, first_column_link: string, raw_rowName: string): string {
     if (first_column_link !== '#') {
       first_column_link = first_column_link.replace(new RegExp('_row_name_', 'g'), getActualNameWithoutTokens(raw_rowName).trim());
       rowName = `<a href="${first_column_link}" target="_blank">${rowName}</a>`;
@@ -58,7 +58,7 @@ BoomOutput.prototype.getDataAsHTML = function(data: IBoomTable, sorting_props):
         let raw_rowName = _.first(o.map(item => item.row_name_raw));
         output.body += `
                     <td style="padding:4px;text-align:${this.text_alignment_firstcolumn}">
-                        ${getLinkifiedColumn(_.first(o.map(item => item.row_name)), String(this.first_column_link), raw_rowName)}
+                        ${getColumnAsLink(_.first(o.map(item => item.row_name)), String(this.first_column_link), raw_rowName)}
                     </td>`;
       }
       _.each(o, item => {
@@ -85,8 +85,8 @@ BoomOutput.prototype.getDataAsHTML = function(data: IBoomTable, sorting_props):
   return output;
 };
 BoomOutput.prototype.getDataAsDebugHTML = function(data: IBoomSeries[]): string {
-  let debugdata = ``;
-  debugdata = _.map(data, d => {
+  let debugData = ``;
+  debugData = _.map(data, d => {
     return `
         <tr>
             <td style="padding:4px;text-align:left;width:30%; title="Series Name" >${d.seriesName}</td>
@@ -102,5 +102,5 @@ BoomOutput.prototype.getDataAsDebugHTML = function(data: IBoomSeries[]): string
         </tr>
         `;
   }).join(``);
-  return debugdata;
+  return debugData;
 };