#18 add grafana 7 compatibility (#24)

* Add Grafana 7 compatibility * Update license in package.json * Update README.md Co-authored-by: Alexandre Alapetite <[email protected]> * Add dist, update gitignore * Fix map not updating on panel resize Co-authored-by: Alexandre Alapetite <[email protected]>
alexandrainst · Oct 20, 2020 · 8fd2758 · 8fd2758
1 parent 6ab1d2b
commit 8fd2758
Show file tree

Hide file tree

Showing 52 changed files with 41,839 additions and 8,435 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,32 +1,29 @@
 # Logs
 logs
 *.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+node_modules/
 
 # Runtime data
 pids
 *.pid
 *.seed
+*.pid.lock
 
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
 
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+artifacts/
+work/
+ci/
+e2e-results/
 
-# Dependency directory
-node_modules
-
-#Webstorm metadata
+# Editors
 .idea
-
-# Mac files
-.DS_Store
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  ...require('@grafana/toolkit/src/config/prettier.plugin.config.json'),
+};
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,7 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+
+## v2.0.0
+
+Initial Release
diff --git a/LICENSE b/LICENSE
@@ -18,4 +18,4 @@ 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.
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,173 +1,119 @@
-# Trackmap Panel for Grafana
-
-[![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)
-[![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg)](https://github.com/RichardLitt/standard-readme)
-
-> Map plugin to visualize timeseries data from geo:json or NGSIv2 sources as either a Ant-path, Hexbin, or Heatmap.
-
-## Usage
-
-### Queries
-> It's important for the plugin to work, that the `Format as` is set to `Table`.
-
-To use the plugin the data needs to be formatted as a table which either contains simple `lat` and `lon`, or as `location` in NGSIv2 format. Here is a example of how the data from the query should look like using `location`:
-```javascript
-[
-  {
-    "columns": [
-      {
-        "text": "location"
-      }
-    ],
-    "rows": [
-      [
-        {
-          "type": "geo:json",
-          "value": {
-            "type": "Point",
-            "coordinates": [56.171884, 10.189101]
-          }
-        }
-      ],
-      [
-        {
-          "type": "geo:json",
-          "value": {
-            "type": "Point",
-            "coordinates": [56.18803, 10.16773]
-          }
-        }
-      ]
-    ],
-    "type": "table"
-  }
-]
-```
+# Track Map - Grafana Panel Plugin
+A map plugin to visualise coordinates as markers, hexbin, ant path, or heatmap.
 
-A example of a query for location against a CrateDB/PostgreSQL:
-```sql
-SELECT time_index, location
-FROM table_name
-WHERE $__timeFilter(time_index)
-ORDER BY time_index
-```
+## Earlier versions
+This is a new version of the Track Map plugin - now built with React, which works with Grafana 7+.
 
-And a example query for lat and lon against a CrateDB/PostgreSQL:
-```sql
-SELECT time_index, latitude as lat, longitude as lon
-FROM table_name
-WHERE $__timeFilter(time_index)
-ORDER BY time_index
-```
+Note that this plugin is [not backwards compatible](https://grafana.com/docs/grafana/latest/developers/plugins/migration-guide/#compatibility-between-grafana-versions) with the old Grafana 6 versions.
 
-To only get specific entities from the database a query could look like this:
-```sql
-SELECT location, time_index
-FROM table_name
-WHERE $__timeFilter(time_index)
-AND (entity_id = 'vehicle:WasteManagement:id1' OR entity_id = 'vehicle:WasteManagement:id2')
-ORDER BY time_index
-```
+For Grafana 6 and older, please use our [1.x branch](https://github.com/alexandrainst/alexandra-trackmap-panel/releases/tag/1.2.4) instead.
 
-### Settings
-You can change the starting zoom and center of the map, as well as the maximum zoom under the map options:
+## How to use
 
-![map](https://github.com/alexandrainst/alexandra-trackmap-panel/raw/master/images/map_settings.png)
+### Query
+The query in Grafana must be formatted as `Table` and contain the fields `latitude` and `longitude` or just `lat` and `lon`. To add intensity to the heatmap (instead of using only coordinates), the `intensity` field should be added.
 
-There is a options to enable the use of the maps min and max coordinates.
-This adds `$maxLat`, `$minLat`, `$maxLon` and `$minLon` as variables in the dashboard, with the maps bounding box.
-Which can then be used in the query, as an example for CrateDB/PostgreSQL:
+Data query example (TimescaleDB with PostGIS):
 
-```sql
-SELECT time_index, latitude as lat, longitude as lon
-FROM table_name
-WHERE $__timeFilter(time_index)
-AND latitude >= $minLat
-AND latitude <= $maxLat
-AND longitude >= $minLon
-AND longitude <= $maxLon
-ORDER BY time_index
+```SQL
+SELECT
+avg("lat") as "latitude",  
+avg("long") as "longitude",  
+max("rssi") as "intensity",  
+clusters
+FROM (SELECT lat,
+long,
+geo,
+rssi,
+ST_ClusterKMeans(geo, 100) over() as clusters
+FROM table_name) table_name_clustered
+GROUP BY clusters
+ORDER BY clusters;
 ```
 
-To use this with NGSIv2 data, is a bit more complex, an example for CrateDB/PostgreSQL:
-```sql
-SELECT coordinates[1] as lat, coordinates[2] as lon, time_index
-FROM (
-  SELECT location['value']['coordinates'] as coordinates, time_index
-  FROM table_name
-  WHERE $__timeFilter(time_index)
-) AS alias
-WHERE coordinates[1] >= $minLat
-AND coordinates[1] <= $maxLat
-AND coordinates[2] >= $minLon
-AND coordinates[2] <= $maxLon
-ORDER BY 3
-```
+### Configuration
+The panel has general configuration options as well as options specific to each visualisation type. 
 
-An option for the map to update the data after moving/zooming, is available when using the maps min and max coordinates. Do note that enabling this might make it spam your database, and can queue op request to it.
+Map center and zoom can be changed with the `Map center latitude`, `Map center longitude` and `Zoom` properties.
 
-There are three visualization options to choose from, Hexbin, Heatmap and Antpath.
+To update query variables when the map bounds are updated turn on `Use map bounds in query`. See section "Updating query based on map bounds" below.
 
-#### Hexbin
-![hexbin](https://github.com/alexandrainst/alexandra-trackmap-panel/raw/master/images/hexbin.png)
+Switch between views (Markers, Ant Path, Hexbin, Heatmap) by selecting a `Visualisation type` .
 
-The hexbin have 2 options.
-- `Color range` which lets you set the colors of the hexbin based on there value (number of datapoints with the hexbin), with the left color being the lowest count, and the right color being the highest count.
-- And `Radius range` with the first field being the initial size of the hexbin changing to the size of the second field.
+#### Markers
+- `Size`: The size of the markers
 
+![markers_options](img/markers.png)
 
-![hexbin_settings](https://github.com/alexandrainst/alexandra-trackmap-panel/raw/master/images/hexbin_settings.png)
+#### Ant Path
+- `Delay`: The delay of the animation
+- `Weight`: The width of the path
+- `Color`: The color of the path
+- `Pulse color`: The color of the pulse running along the path
+- `Paused`: Pause/start the animation
+- `Reverse`: Reverse the animation direction
 
-#### Heatmap
-![heatmap](https://github.com/alexandrainst/alexandra-trackmap-panel/raw/master/images/heatmap.png)
+![ant_path_options](img/antpath.png)
 
-There are no settings available for Heatmap
+#### Hexbin
+- `Opacity`: The opacity of the hexagons
+- `Color range from (hex)`: Color ranges from this value
+- `Color range to (hex)`: Color ranges to this value
+- `Radius range from`: Min radius
+- `Radius range to`: Max radius
 
-#### Antpath
-![antpath](https://github.com/alexandrainst/alexandra-trackmap-panel/raw/master/images/antpath.png)
+![hexbin_options](img/hexbin.png)
 
-The antpath have the following options available:
-- `Delay`: The delay of the animation flux
-- `Dash array`: The size of the animated dashes
-- `Weight`: The weight of the path
-- `Color`: The color of the path
-- `Pulse color`: Adds a color to the dashed flux
-- `Paused`: Toggle stop/start of the animation
-- `Reverse`: Reverses the animation flow
+#### Heatmap
+- `Fit bounds on load`: Fit the heatmap inside the map bounds on load
+- `Fit bounds on update`: Fit the heatmap inside the map bounds on update
 
-![antpath_settings](https://github.com/alexandrainst/alexandra-trackmap-panel/raw/master/images/antpath_settings.png)
+![heatmap_options](img/heatmap.png)
 
-## Build
-To build the plugin, you need either `yarn` or `npm`.
+### Updating query based on map bounds
+To update the query dynamically based on the map bounds turn on `Use map bounds in query`. To use this you must manually add four variables to the dashboard (via settings in the top right corner). Add four variables of type `constant` with names `minLat`, `minLon`, `maxLat`, and `maxLon`. The values can be anything, e.g. 1, 2, 3, 4 - they will be overwritten by the plugin. Remember to save the dashboard. The variables can then be used in a query. Here is an example that limits the query to the bounds of the map:
 
-First you need to install the dependencies by running:
-```
-npm install
+```SQL
+SELECT
+  avg("lat") as "latitude",
+  avg("long") as "longitude",
+  max("rssi") as "intensity"
+FROM (
+  SELECT sys_time, lat, long, geo, rssi, ST_ClusterKMeans(geo, 15) over() as clusters from table_name
+  Where lat >= $minLat
+    AND lat <= $maxLat
+    AND long >= $minLon
+    AND long <= $maxLon
+) table_name_clustered
+GROUP BY clusters
 ```
-After the dependencies are installed, you can build the plugin by running the following command:
+
+## Getting started
+To use the plugin you need either `npm` or `yarn`.
+
+1. Install dependencies
+```BASH
+yarn install
 ```
-npm run build
+2. Build plugin in development mode or run in watch mode
+```BASH
+yarn dev
 ```
-You can also run the code in development with the following command:
+or
+```BASH
+yarn watch
 ```
-npm run dev
+3. Build plugin in production mode
+```BASH
+yarn build
 ```
 
-## Install
-If you are running grafana locally, you can clone or download the repository directly into the plugin directory of grafana, and then reset the grafana-server, and the plugin should be automatically detected.
+## Installation
+If you are running Grafana locally, you can clone or download the repository directly into the plugin directory, reset the Grafana server, and the plugin should get detected automatically.
 
-Or if you are using docker, a guide can be found [here](https://grafana.com/docs/installation/docker/#installing-plugins-from-other-sources).
+If you are using Docker, a guide can be found here https://grafana.com/docs/grafana/latest/installation/docker/#installing-plugins-from-other-sources
 
-There are more ways to install plugins for grafana, which can be found on their website.
-
-## Contributing
-
-A guide on how to contribute can be found [here](https://docs.synchronicity-iot.eu/docs/contributing/contribution)
-
-## Acknowledgements
-
-This plugin was developed as part of the the [SynchroniCity Project](https://synchronicity-iot.eu/) by The Alexandra Institute. The SynchroniCity project has received funding from the European Union’s Horizon 2020 research and innovation programme under grant agreement No 732240
+For more information on Grafana plugins look here https://grafana.com/docs/grafana/latest/plugins/
 
 ## License
-
 [MIT © Alexandra Institute.](./LICENSE)
diff --git a/appveyor.yml b/appveyor.yml
@@ -0,0 +1,26 @@
+# Test against the latest version of this Node.js version
+environment:
+  nodejs_version: "12"
+
+# Local NPM Modules
+cache:
+  - node_modules
+
+# Install scripts. (runs after repo cloning)
+install:
+  # Get the latest stable version of Node.js or io.js
+  - ps: Install-Product node $env:nodejs_version
+  # install modules
+  - npm install -g yarn --quiet
+  - yarn install --pure-lockfile
+
+# Post-install test scripts.
+test_script:
+  # Output useful info for debugging.
+  - node --version
+  - npm --version
+
+# Run the build
+build_script:
+  - yarn dev   # This will also run prettier!
+  - yarn build # make sure both scripts work
diff --git a/dist/LICENSE b/dist/LICENSE
@@ -18,4 +18,4 @@ 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.
+SOFTWARE.