#18 add grafana 7 compatibility

.gitignore

@@ -1,32 +1,30 @@
 # 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)
+dist/
+artifacts/
+work/
+ci/
+e2e-results/
 
-# Dependency directory
-node_modules
-
-#Webstorm metadata
+# Editors
 .idea
-
-# Mac files
-.DS_Store

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ...require('@grafana/toolkit/src/config/prettier.plugin.config.json'),
+};

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

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.

README.md

@@ -1,173 +1,117 @@
-# 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.
+
+## Earlier versions
+This is a new version of the Track Map plugin - now built with React, which works with Grafana 7+.
+
+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.
+
+## How to use
+
+### 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.
+
+Data query example (TimescaleDB with PostGIS):
+
+```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;
 ```
 
-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
-```
-
-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
-```
+### Configuration
+The panel has general configuration options as well as options specific to each visualisation type. 
 
-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
-```
+Map center and zoom can be changed with the `Map center latitude`, `Map center longitude` and `Zoom` properties.
 
-### Settings
-You can change the starting zoom and center of the map, as well as the maximum zoom under the map options:
+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.
 
-![map](https://github.com/alexandrainst/alexandra-trackmap-panel/raw/master/images/map_settings.png)
+Switch between views (Markers, Ant Path, Hexbin, Heatmap) by selecting a `Visualisation type` .
 
-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:
+#### Markers
+- `Size`: The size of the markers
 
-```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
-```
+![markers_options](img/markers.png)
 
-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
-```
-
-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.
+#### 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
 
-There are three visualization options to choose from, Hexbin, Heatmap and Antpath.
+![ant_path_options](img/antpath.png)
 
 #### Hexbin
-![hexbin](https://github.com/alexandrainst/alexandra-trackmap-panel/raw/master/images/hexbin.png)
-
-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.
-
+- `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
 
-![hexbin_settings](https://github.com/alexandrainst/alexandra-trackmap-panel/raw/master/images/hexbin_settings.png)
+![hexbin_options](img/hexbin.png)
 
 #### Heatmap
-![heatmap](https://github.com/alexandrainst/alexandra-trackmap-panel/raw/master/images/heatmap.png)
+- `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
 
-There are no settings available for Heatmap
+![heatmap_options](img/heatmap.png)
 
-#### Antpath
-![antpath](https://github.com/alexandrainst/alexandra-trackmap-panel/raw/master/images/antpath.png)
+### 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:
 
-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
-
-![antpath_settings](https://github.com/alexandrainst/alexandra-trackmap-panel/raw/master/images/antpath_settings.png)
+```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
+```
 
-## Build
-To build the plugin, you need either `yarn` or `npm`.
+## Getting started
+To use the plugin you need either `npm` or `yarn`.
 
-First you need to install the dependencies by running:
-```
-npm install
-```
-After the dependencies are installed, you can build the plugin by running the following command:
+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)
+[MIT © Alexandra Institute.](./LICENSE)

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

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.