now we have a working panel that shows fake data

Gruntfile.js

@@ -6,120 +6,131 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-clean');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-string-replace');
-  grunt.loadNpmTasks("grunt-tslint");
+  grunt.loadNpmTasks('grunt-tslint');
 
   grunt.initConfig({
     clean: ['dist', 'src/lib'],
 
     copy: {
-
       libs: {
         cwd: 'node_modules/plotly.js/dist',
         expand: true,
         src: ['plotly.min.js'],
-        dest: 'src/lib'
+        dest: 'src/lib',
       },
       dist_js: {
         expand: true,
         cwd: 'src',
-        src: ['**/*.ts', '**/*.d.ts', 'lib/*'],
-        dest: 'dist'
+        src: ['**/*.ts', '**/*.d.ts', 'lib/*', 'percentile.js'],
+        dest: 'dist',
       },
       dist_html: {
         expand: true,
         flatten: true,
-        cwd: 'src/partials',
+        cwd: 'src/templates',
         src: ['*.html'],
-        dest: 'dist/partials/'
+        dest: 'dist/templates/',
       },
       dist_css: {
         expand: true,
         flatten: true,
         cwd: 'src/css',
         src: ['*.css'],
-        dest: 'dist/css/'
+        dest: 'dist/css/',
       },
       dist_img: {
         expand: true,
         flatten: true,
         cwd: 'src/img',
         src: ['*.*'],
-        dest: 'dist/img/'
+        dest: 'dist/img/',
       },
       dist_statics: {
         expand: true,
         flatten: true,
         src: ['src/plugin.json', 'LICENSE', 'README.md'],
-        dest: 'dist/'
-      }
+        dest: 'dist/',
+      },
     },
 
     ts: {
       build: {
         src: ['src/**/*.ts', '!**/*.d.ts', '!**/*.min.js'],
         outDir: 'dist',
         options: {
-          rootDir: "src",
+          rootDir: 'src',
           verbose: true,
 
-          "target": "ES5",
-          "module": "system",
-          "sourceMap": true,
-          "declaration": true,
-          "emitDecoratorMetadata": true,
-          "experimentalDecorators": true,
-          "noImplicitAny": false,
-          "strictNullChecks": false,
-          "skipLibCheck": true
-        }
-      }
+          target: 'ES5',
+          module: 'system',
+          sourceMap: true,
+          declaration: true,
+          emitDecoratorMetadata: true,
+          experimentalDecorators: true,
+          noImplicitAny: false,
+          strictNullChecks: false,
+          skipLibCheck: true,
+        },
+      },
     },
 
     // NOT WORKING!
     // this does: node_modules/tslint/bin/tslint -c tslint.json --fix 'src/**/*.ts'
     tslint: {
       options: {
         // can be a configuration object or a filepath to tslint.json
-        configuration: "tslint.json",
+        configuration: 'tslint.json',
         // If set to true, tslint errors will be reported, but not fail the task
         // If set to false, tslint errors will be reported, and the task will fail
         force: false,
-        fix: false
+        fix: false,
       },
       default: {
         files: {
           src: ['src/**/*.ts', '!**/*.d.ts'],
-        }
-      }
+        },
+      },
     },
 
     'string-replace': {
       dist: {
-        files: [{
-          cwd: 'src',
-          expand: true,
-          src: ["**/plugin.json"],
-          dest: 'dist'
-        }],
+        files: [
+          {
+            cwd: 'src',
+            expand: true,
+            src: ['**/plugin.json'],
+            dest: 'dist',
+          },
+        ],
         options: {
-          replacements: [{
-            pattern: '%VERSION%',
-            replacement: pkgJson.version
-          },{
-            pattern: '%TODAY%',
-            replacement: '<%= grunt.template.today("yyyy-mm-dd") %>'
-          }]
-        }
-      }
+          replacements: [
+            {
+              pattern: '%VERSION%',
+              replacement: pkgJson.version,
+            },
+            {
+              pattern: '%TODAY%',
+              replacement: '<%= grunt.template.today("yyyy-mm-dd") %>',
+            },
+          ],
+        },
+      },
     },
 
     watch: {
-      files: ['src/**/*.ts', 'src/**/*.html', 'src/**/*.css', 'src/img/*.*', 'src/plugin.json', 'README.md'],
+      files: [
+        'src/**/*.ts',
+        'src/**/*.html',
+        'src/**/*.css',
+        'src/img/*.*',
+        'src/plugin.json',
+        'README.md',
+      ],
       tasks: ['default'],
       options: {
         debounceDelay: 250,
       },
-    }
+    },
   });
 
   grunt.registerTask('default', [
@@ -131,6 +142,6 @@ module.exports = function(grunt) {
     'copy:dist_css',
     'copy:dist_img',
     'copy:dist_statics',
-    'string-replace'
+    'string-replace',
   ]);
 };

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "natel-plotly-panel",
-  "version": "0.0.5",
-  "description": "Plot.ly Panel Plugin for Grafana",
+  "name": "windrose-panel",
+  "version": "0.0.1",
+  "description": "Wind Rose Plugin for Grafana",
   "scripts": {
     "build": "grunt",
     "test": "./node_modules/karma/bin/karma start",
@@ -13,7 +13,7 @@
   "keywords": ["plotly", "scatter", "grafana", "plugin", "panel"],
   "repository": {
     "type": "git",
-    "url": "https://github.com/NatelEnergy/grafana-plotly-panel.git"
+    "url": ""
   },
   "prettier": {
     "singleQuote": true,
@@ -26,6 +26,7 @@
   "dependencies": {
     "lodash": "^4.17.4",
     "moment": "^2.18.1",
+    "percentile": "^1.2.0",
     "plotly.js": "^1.35",
     "q": "^1.5.0",
     "systemjs": "^0.19.47"

src/module.ts

@@ -9,8 +9,46 @@ import $ from 'jquery';
 
 import * as Plotly from './lib/plotly.min';
 
+var windRoseTestLayout = {
+  radialaxis: {ticksuffix: '%'},
+};
+
+var windRoseTestData = [
+  {
+    r: [77.5, 72.5, 70.0, 45.0, 22.5, 42.5, 40.0, 62.5],
+    t: ['North', 'N-E', 'East', 'S-E', 'South', 'S-W', 'West', 'N-W'],
+    name: '11-14 m/s',
+    marker: {color: 'rgb(106,81,163)'},
+    type: 'area',
+  },
+
+  {
+    r: [57.5, 50.0, 45.0, 35.0, 20.0, 22.5, 37.5, 55.0],
+    t: ['North', 'N-E', 'East', 'S-E', 'South', 'S-W', 'West', 'N-W'],
+    name: '8-11 m/s',
+    marker: {color: 'rgb(158,154,200)'},
+    type: 'area',
+  },
+
+  {
+    r: [40.0, 30.0, 30.0, 35.0, 7.5, 7.5, 32.5, 40.0],
+    t: ['North', 'N-E', 'East', 'S-E', 'South', 'S-W', 'West', 'N-W'],
+    name: '5-8 m/s',
+    marker: {color: 'rgb(203,201,226)'},
+    type: 'area',
+  },
+
+  {
+    r: [20.0, 7.5, 15.0, 22.5, 2.5, 2.5, 12.5, 22.5],
+    t: ['North', 'N-E', 'East', 'S-E', 'South', 'S-W', 'West', 'N-W'],
+    name: '< 5 m/s',
+    marker: {color: 'rgb(242,240,247)'},
+    type: 'area',
+  },
+];
+
 class PlotlyPanelCtrl extends MetricsPanelCtrl {
-  static templateUrl = 'partials/module.html';
+  static templateUrl = 'templates/module.html';
 
   sizeChanged: boolean;
   initalized: boolean;
@@ -190,7 +228,7 @@ class PlotlyPanelCtrl extends MetricsPanelCtrl {
   onInitEditMode() {
     this.addEditorTab(
       'Display',
-      'public/plugins/natel-plotly-panel/partials/tab_display.html',
+      'public/plugins/fatcloud-windrose-panel/templates/tab_display.html',
       2
     );
     //  this.editorTabIndex = 1;
@@ -286,6 +324,10 @@ class PlotlyPanelCtrl extends MetricsPanelCtrl {
         this.layout.yaxis.title = old.yaxis.title;
       }
 
+      if (this.panel.pconfig.settings.type == 'windrose') {
+        this.layout.radialaxis = {ticksuffix: '%'};
+        data = windRoseTestData;
+      }
       Plotly.newPlot(this.graph, data, this.layout, options);
 
       this.graph.on('plotly_click', data => {