Here we go...

.eslintignore

@@ -0,0 +1 @@
+dist/*

.eslintrc

@@ -0,0 +1,45 @@
+{
+  "root": true,
+  "extends": "airbnb/base",
+  "env": {
+    "browser": true
+  },
+  "parser": "babel-eslint",
+  "ecmaVersion": 6,
+  "rules": {
+    "array-bracket-spacing": 0,
+    "arrow-body-style": 0,
+    "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
+    "computed-property-spacing": 0,
+    "consistent-return": 0,
+    "id-length": [2, {"min": 2, "max": 30, "properties": "never", "exceptions": ["_", "t", "a", "b"]}],
+    "import/default": 0,
+    "import/named": 0,
+    "import/namespace": 0,
+    "import/no-duplicates": 0,
+    "import/no-named-as-default": 2,
+    "import/no-unresolved": 0,
+    "indent": [2, 2, {"SwitchCase": 1}],
+    "max-len": [0, 120, 2],
+    "no-alert": 0,
+    "no-console": 0,
+    "no-param-reassign": [2, {"props": false}],
+    "no-use-before-define": 0, // disabled until https://github.com/babel/babel-eslint/issues/249 is fixed
+    "object-curly-spacing": 0,
+    "object-shorthand": 0,
+    "prefer-arrow-callback": 0,
+    "prefer-template": 0,
+    "quote-props": [2, "consistent"]
+  },
+  "plugins": [
+    "import"
+  ],
+  "settings": {
+    "import/parser": "babel-eslint",
+    "import/resolve": {
+      "moduleDirectory": ["node_modules", "src"]
+    }
+  },
+  "globals": {
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+npm-debug.log

.jshintrc

@@ -0,0 +1,38 @@
+{
+  "browser": true,
+  "esnext": true,
+
+  "bitwise":false,
+  "curly": true,
+  "eqnull": true,
+  "strict": true,
+  "devel": true,
+  "eqeqeq": true,
+  "forin": false,
+  "immed": true,
+  "supernew": true,
+  "expr": true,
+  "indent": 2,
+  "latedef": false,
+  "newcap": true,
+  "noarg": true,
+  "noempty": true,
+  "undef": true,
+  "boss": true,
+  "trailing": true,
+  "laxbreak": true,
+  "laxcomma": true,
+  "sub": true,
+  "unused": true,
+  "maxdepth": 6,
+  "maxlen": 140,
+
+  "globals": {
+    "System": true,
+    "Promise": true,
+    "define": true,
+    "require": true,
+    "Chromath": false,
+    "setImmediate": true
+  }
+}

Gruntfile.js

@@ -0,0 +1,59 @@
+module.exports = (grunt) => {
+  require('load-grunt-tasks')(grunt);
+
+  grunt.loadNpmTasks('grunt-execute');
+  grunt.loadNpmTasks('grunt-contrib-clean');
+
+  grunt.initConfig({
+
+    clean: ['dist'],
+
+    copy: {
+      src_to_dist: {
+        cwd: 'src',
+        expand: true,
+        src: ['**/*', '!**/*.js', '!**/*.scss', '!img/**/*'],
+        dest: 'dist'
+      },
+      pluginDef: {
+        expand: true,
+        src: ['plugin.json', 'README.md'],
+        dest: 'dist',
+      },
+      img_to_dist: {
+        cwd: 'src',
+        expand: true,
+        src: ['img/**/*'],
+        dest: 'dist'
+      },
+    },
+
+    watch: {
+      rebuild_all: {
+        files: ['src/**/*', 'plugin.json'],
+        tasks: ['default'],
+        options: {spawn: false}
+      },
+    },
+
+    babel: {
+      options: {
+        sourceMap: true,
+        presets: ['es2015'],
+        plugins: ['transform-es2015-modules-systemjs', 'transform-es2015-for-of'],
+      },
+      dist: {
+        files: [{
+          cwd: 'src',
+          expand: true,
+          src: ['*.js'],
+          dest: 'dist',
+          ext: '.js'
+        }]
+      },
+    },
+
+  });
+
+  grunt.registerTask('default', ['clean', 'copy:src_to_dist', 'copy:pluginDef', 'copy:img_to_dist', 'babel']);
+};

LICENSE

@@ -0,0 +1,22 @@
+
+The MIT License
+
+Copyright (c) 2018 Mirko Buholzer, Inc. http://buholzer.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,14 @@
+## Trend Panel Plugin for Grafana
+
+The Trend Panel can show the current value of a metric and compare it to a previous time. It will also show the trend in percent and the difference of the two values.
+
+This plugin is work in progress, use it at your own risk.
+
+#### Changelog
+
+##### v0.0.1
+
+- Initial commit
+
+## Attribution
+- Trend icon by ✦ Shmidt Sergey ✦ from the Noun Project

dist/README.md

@@ -0,0 +1,14 @@
+## Trend Panel Plugin for Grafana
+
+The Trend Panel can show the current value of a metric and compare it to a previous time. It will also show the trend in percent and the difference of the two values.
+
+This plugin is work in progress, use it at your own risk.
+
+#### Changelog
+
+##### v0.0.1
+
+- Initial commit
+
+## Attribution
+- Trend icon by ✦ Shmidt Sergey ✦ from the Noun Project

dist/css/trend-panel.css

@@ -0,0 +1,46 @@
+.trend-panel {
+  display: table;
+  width: 100%;
+  height: 100%;
+}
+
+.trend-panel-value-container {
+  display: table-row;
+  vertical-align: middle;
+  text-align: center;
+  z-index: 1;
+  font-size: 3em;
+  font-weight: bold;
+}
+
+.trend-panel-trend-container {
+  display: table-row;
+  vertical-align: middle;
+  text-align: center;
+  z-index: 1;
+  font-size: 3em;
+  font-weight: bold;
+}
+
+.trend-panel-prefix {
+  color: #aaaaaa;
+}
+
+.trend-panel-postfix {
+  color: #aaaaaa;
+}
+
+.trend-panel-trend-container .trend-panel-sign {
+  padding-right: 5px;
+}
+
+.trend-panel-trend-container .trend-panel-unit {
+  padding-left: 5px;
+}
+
+.trend-panel-trend-container .trend-panel-diff {
+}
+
+.trend-panel-prefix {
+  padding-right: 20px;
+}

dist/editor.html

@@ -0,0 +1,97 @@
+<div class="editor-row">
+
+	<div class="section gf-form-group">
+		<h5 class="section-heading">Value</h5>
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label width-6">Stat</label>
+        <div class="gf-form-select-wrapper width-12">
+          <select class="gf-form-input" ng-model="ctrl.panel.valueName" ng-options="f.value as f.text for f in ctrl.valueNameOptions" ng-change="ctrl.refresh()"></select>
+        </div>
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label width-6">Font size</label>
+        <div class="gf-form-select-wrapper">
+          <select class="gf-form-input" ng-model="ctrl.panel.valueFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
+        </div>
+      </div>
+    </div>
+
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label width-6">Prefix</label>
+        <input type="text" class="gf-form-input width-12" ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
+        <label class="gf-form-label width-6">Font size</label>
+        <div class="gf-form-select-wrapper">
+          <select class="gf-form-input" ng-model="ctrl.panel.prefixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
+        </div>
+      </div>
+    </div>
+
+    <div class="gf-form">
+      <label class="gf-form-label width-6">Postfix</label>
+      <input type="text" class="gf-form-input width-12" ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
+      <label class="gf-form-label width-6">Font size</label>
+      <div class="gf-form-select-wrapper">
+        <select class="input-small gf-form-input" ng-model="ctrl.panel.postfixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
+      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-6">Unit</label>
+      <div class="gf-form-dropdown-typeahead width-18" ng-model="ctrl.panel.format" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)"></div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-6">Decimals</label>
+      <input type="number" class="gf-form-input width-18" placeholder="auto" data-placement="right" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" ng-model="ctrl.panel.decimals" ng-change="ctrl.refresh()" ng-model-onblur>
+    </div>
+	</div>
+
+	<div class="section gf-form-group">
+    <h5 class="section-heading">Trend</h5>
+    <div class="gf-form">
+      <label class="gf-form-label width-6">Font size</label>
+      <div class="gf-form-select-wrapper">
+        <select class="input-small gf-form-input" ng-model="ctrl.panel.trend.valueFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
+      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-6">Unit size</label>
+      <div class="gf-form-select-wrapper">
+        <select class="input-small gf-form-input" ng-model="ctrl.panel.trend.unitFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
+      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-6">Sign size</label>
+      <div class="gf-form-select-wrapper">
+        <select class="input-small gf-form-input" ng-model="ctrl.panel.trend.signFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
+      </div>
+    </div>
+    <div class="gf-form">
+    	<label class="gf-form-label width-8">Show diff</label>
+      <gf-form-switch class="gf-form" label-class="width-8" checked="ctrl.panel.trend.showDiff" on-change="ctrl.render()"></gf-form-switch>
+    </div>    
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Trend Colors</label>
+      <span class="gf-form-label" ng-repeat="color in ctrl.panel.trend.colors track by $index">
+        <color-picker color="color" onChange="ctrl.onTrendColorChange($index)"></color-picker>
+      </span>
+    </div>
+  </div>
+
+	<div class="section gf-form-group">
+    <h5 class="section-heading">Coloring</h5>
+    <div class="gf-form">
+			<label class="gf-form-label width-9">Bg Color</label>
+			<span class="max-width-10">
+				<spectrum-picker class="gf-form-input" ng-model="ctrl.panel.bgColor" ng-change="ctrl.render()" ></spectrum-picker>
+			</span>
+		</div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Trend Colors</label>
+      <span class="gf-form-label" ng-repeat="color in ctrl.panel.trend.colors track by $index">
+        <color-picker color="color" onChange="ctrl.onTrendColorChange($index)"></color-picker>
+      </span>
+    </div>
+  </div>
+
+</div>

dist/module.html

@@ -0,0 +1,13 @@
+<div class="trend-panel ng-scope">
+	<div class="trend-panel-value-container">
+		<span class="trend-panel-prefix" style="font-size:50%"></span>
+		<span class="trend-panel-value" style="font-size:80%"></span>
+		<span class="trend-panel-postfix" style="font-size:50%"></span>
+	</div>
+	<div class="trend-panel-trend-container">
+		<span class="trend-panel-sign"></span>
+		<span class="trend-panel-trend-value"></span>
+		<span class="trend-panel-unit"></span>
+		<span class="trend-panel-diff"></span>
+	</div>
+</div>