Add bar chart plotting and creating traces from data

README.md

@@ -15,10 +15,24 @@ Works with grafana 4, 5, and 6
 ![Screenshot of scatter plot](https://raw.githubusercontent.com/NatelEnergy/grafana-plotly-panel/master/src/img/screenshot-multiple-trace.png)
 ![Screenshot of 3d scatter plot](https://raw.githubusercontent.com/NatelEnergy/grafana-plotly-panel/master/src/img/screenshot-scatter-3d.png)
 ![Screenshot of the options screen](https://raw.githubusercontent.com/NatelEnergy/grafana-plotly-panel/master/src/img/screenshot-options-new.png)
+![Screenshot of horizontal bar chart](https://raw.githubusercontent.com/NatelEnergy/grafana-plotly-panel/master/src/img/screenshot-hbar-single-trace.png)
+![Screenshot of horizontal bar chart](https://raw.githubusercontent.com/NatelEnergy/grafana-plotly-panel/master/src/img/screenshot-hbar-multi-trace.png)
+![Screenshot of stacked vertical bar chart](https://raw.githubusercontent.com/NatelEnergy/grafana-plotly-panel/master/src/img/screenshot-vbar-stacked-auto-trace.png)
+
+### Auto-trace
+
+Sometimes the number and identity of the traces on a plot varies depending
+on a property of the data being plotted. Auto-trace mode allows traces
+to be constructed from the query result. The query must return exactly
+3 columns. The column contents must be:
+
+1. The trace name. This must be a string.
+1. An X value for the named trace.
+1. The corresponding Y value.
 
 ### Building
 
-To complie, run:
+To compile, run:
 
 ```
 npm install -g yarn

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "natel-plotly-panel",
+  "name": "sinodun-natel-plotly-panel",
   "version": "0.0.7-dev",
   "description": "Plot.ly Panel Plugin for Grafana",
   "scripts": {

src/SeriesWrapper.ts

@@ -126,7 +126,7 @@ export class SeriesWrapperTable extends SeriesWrapper {
 
     const col = table.columns[index];
     if (!col) {
-      throw new Error('Unkonwn Column: ' + index);
+      throw new Error('Unknown Column: ' + index);
     }
 
     this.name = col.text;

src/libLoader.ts

@@ -10,14 +10,14 @@ export function loadPlotly(cfg: any): Promise<any> {
     return Promise.resolve(loaded);
   }
 
-  const needsFull = cfg.settings.type !== 'scatter';
-  let url = 'public/plugins/natel-plotly-panel/lib/plotly-cartesian.min.js';
+  const needsFull = cfg.settings.type === 'scatter3d';
+  let url = 'public/plugins/sinodun-natel-plotly-panel/lib/plotly-cartesian.min.js';
   if (cfg.loadFromCDN) {
     url = needsFull
       ? 'https://cdn.plot.ly/plotly-latest.min.js'
       : 'https://cdn.plot.ly/plotly-cartesian-latest.min.js';
   } else if (needsFull) {
-    url = 'public/plugins/natel-plotly-panel/lib/plotly.min.js';
+    url = 'public/plugins/sinodun-natel-plotly-panel/lib/plotly.min.js';
   }
   return new Promise((resolve, reject) => {
     $script(url, resolve);
@@ -40,7 +40,7 @@ export function loadIfNecessary(cfg: any): Promise<any> {
     return loadPlotly(cfg);
   }
 
-  const needsFull = cfg.settings.type !== 'scatter';
+  const needsFull = cfg.settings.type === 'scatter3d';
   if (needsFull && !isFull) {
     console.log('Switching to the full plotly library');
     loaded = null;