Developing Grafana Worldmap NG

[Andreas]

Hide zoom control and attribution label

Problem

Both control elements (zoom control and attribution) cover too much space on small maps.

Thoughts

• Either we should be able resize the controls or hide them altogether.
• Alternatively, they could be displayed outside of the map in a separate footer area or even at an arbitrary out-of-band location.

Solution

We added the showZoomControl and showAttribution options to accommodate for that. Both default to true so they don’t change the default behavior. When set to false ,

small map widgets look more pleasant to us.

Before / After

Appendix: At runtime

// Hide zoom control and attribution.
$('.leaflet-control-zoom').hide();
$('.leaflet-control-attribution').hide();

[Andreas]

Out-of-band display of map legend

Problem

The legend sometimes covers too much room on small maps.

Thoughts

So let’s just display it elsewhere on the dashboard, right?

Solution

Let’s define a Text-Box which should act as a container element.

In the panel settings, the output can be redirected to another DOM element by specifying a jQuery element-selector expression.

Before / After

[wtf]

@Andreas

We added the autoWidthLabels option to accommodate for that which defaults to true so it doesn’t change the default behavior. When set to false ,

the popup layout looks more pleasant.

Cool! Can you please spend a <center>-tag, too? For the pleasantness!

[wtf]

@Andreas

Hide attribution label

Thoughts

In order to not encourage copyright-infringements, I suggest a read-only multi-line text-field with the correct attribution (probably prefixed with the panel’s title) in Hypertext (or Markdown), introduced with the words “In order to respect the copyright of many cool people, you should now add this attribution-text somewhere else on the dashboard:”, suddenly appearing after unchecking the “show attribution”-box.

.oO( or shall it automagically create a text-field panel with the attribution-text/html, like within the new legend-option? )

[Andreas]

Out-of-band attribution for Grafana Map Panel and beyond

@wtf

Thoughts

In order to not encourage copyright-infringements, I suggest a read-only multi-line text-field with the correct attribution (probably prefixed with the panel’s title) in Hypertext (or Markdown), introduced with the words “In order to respect the copyright of many cool people, you should now add this attribution-text somewhere else on the dashboard:”, suddenly appearing after unchecking the “show attribution”-box.

.oO( or shall it automagically create a text-field panel with the attribution-text/html, like within the new legend-option? )

I second that. We will see how this would be implemented exactly, thanks for sharing your thoughts.

[Andreas]

Labels barely visible on Grafana light theme

Problem

When using the Grafana light theme, popover labels are barely visible.

Labels barely visible on grafana light theme

Solution

dtheb supplied a fix for that the other day. Thanks!

fixed light theme labels text color #169

Before

After

[Andreas]

Clickthrough links

Introduction

@Andreas

Ideensammlung Worldmap Panel

• Click-through/drill-down über Links in sticky label popups.

@wtf

Pluseinself! Da muss das Hover-Tooltip wohl ne Sekunde stehenbleiben, innerhalb der mensch die Chance bekommt den Maus-Fokus auf des Tooltip zu schieben auf dass es ab dann solange stehen bleibt wie der Mausfokus drauf ist (oder eben dann auch noch ne Sekunde länger)</laut denk>

[edit: direkt auch auf den Punkt klicken und damit den Link[tm] aufzurufen wär natürlich auch schon knorke!]

Sticky labels

@wtf

Da muss das Hover-Tooltip wohl ne Sekunde stehenbleiben

Daniel Lee already added the feature "stickyLabels": true for this. Thanks!

• javascript - Grafana Worldmap Panel event handler - Stack Overflow
• Sticky labels option. Fixes #27 · grafana/worldmap-panel@6ac68ef · GitHub

Research

We know this feature is well-requested already.

• Feature Request: Adding link to time series dashboard when selecting a single map point... · Issue #62 · grafana/worldmap-panel · GitHub
• Add a feature of addLink in worldMap · Issue #121 · grafana/worldmap-panel · GitHub
• Datapoints returning with Nan · Issue #81 · grafana/worldmap-panel · GitHub

Solutions

@James Nicholls

This is a simple implementation of a panel option being used to navigate to a new URL on click. Instances of $country in the clickthrough URL will be replaced with the selected country. In fact this should work regardless of location data type, so perhaps “country” is not the most appropriate keyword.

– Add Clickthrough URL option for country circles by ryft · Pull Request #129 · grafana/worldmap-panel · GitHub

@Leonhard Haas

I was missing the functionality of having a link for each of the generated circles based on the datasource-entries. A textbox is now added, which can be used to specify the columnname (on table data) containing the link.

– Adds clickthrough links mappable from data for circles by leonhardhaas · Pull Request #190 · grafana/worldmap-panel · GitHub

Implementation

Screens

Variant 1: Assign URL from panel settings.

Variant 2: Assign URL from database field.

Description

There are two ways of attaching clickthrough-links to circles. Either assign the URL through the corresponding “Clickthrough URL” editor option or take the URL from a database field of the respective data point by using the “Link field” option. By running the outcome through Grafana’s variable interpolation machinery, both dashboard and data point variables will get interpolated at runtime into the strings typed in there as you can see from the first screenshot above.

All dashboard variables will get interpolated 1:1 while values coming from a data point will get prefixed by "__field_" to be able to tell them apart and avoid collisions.

Using the “Clickthrough Window” setting, the panel operator is able to control the designated target browsing context (formerly called “frame”), which is either a named window or one of the well known literal strings “_blank”, “_self”, “_parent” or “_top” with their respective semantics listed below. Using the named window variant, it is easily possible to support dual- and multiscreen-scenarios by just arranging multiple browser windows on different screens.

Currently, the clickthrough-links are attached to the respective circle. Injecting and attaching links into the popover label (see “Sticky labels”) is reserved for some future iteration on that.

Value	Description
_self	Open the link in the current frame. This is the default behavior.
_blank	Open the linked document in a new tab or window, depending on browser configuration.
_parent	Open the link in the parent frame, otherwise resorting to _self.
_top	Open the link in the top-level frame, otherwise resorting to _self.
frame name	Open the link in the named frame.

– https://wiki.selfhtml.org/wiki/Referenz:HTML/Attribute/target (sic!)

Details

This is a simple implementation of a panel option being used to navigate to a new URL on click.

– https://github.com/hiveeyes/grafana-worldmap-panel/commit/09432e8672d94658273d56856d94e892467f183d

This adds the possibility to obtain the clickthrough-link from the database through the linkField editor option.

– Adds clickthrough links mappable from data for circles · panodata/panodata-map-panel@129dd98 · GitHub

Add basic variable interpolation based on keys from dataPoint.
Saying that, all metric values have been added to the dataPoint
beforehand by prefixing them with __field_ to allow for setting
things like clickthroughURL: /url/to/$__field_station_id if
there’s a field called station_id in the current datapoint.

– Combine both clickthrough link implementations #129 and #190 · panodata/panodata-map-panel@7a2e825 · GitHub

Use the regular Grafana templating mechanism for interpolating variables into clickthrough links, thus interpolating dashboard and dataPoint variables now.

– Use the regular Grafana templating mechanism for interpolating variables · panodata/panodata-map-panel@df86b0d · GitHub

Acknowledgements

Shoutouts to James Nicholls and Leonhard Haas for sharing the contributions referenced above through #129 and #190. Thanks!

[Andreas]

Variable interpolation all the way down

Apply Grafana-style variable interpolation to all panel settings.

This outlines various details about how the functionality for interpolating values into panel settings has been improved through variables originating from different kinds of sources.

As of now, the interpolation machinery honors the well known Grafana dashboard variables as well as request parameters (prefixed by "request_") and data point fields (prefixed by "__field_").

1. Pull variables from dashboard variables

This enables the interpolation of dashboard variables into each of the panel control settings (source, commit).

Example

An example would be to have a variable called “countrycode” which gets populated by a database query defined by an SQL statement.

SELECT
  country_code AS __value,
  country_name AS __text
FROM
  stations
ORDER BY
  country_code

Then, assigning a value like that to the JSON endpoint URL panel control setting, the machinery would interpolate the selected value assigned to the $countrycode variable appropriately.

2. Pull variables from data point fields

Add basic variable interpolation based on keys from dataPoint. Saying that, all metric values have been added to the data point beforehand by prefixing them with "__field_" (source).

Example

If there’s a field called station_id in the current data point, using this inside a panel control option is easy by addressing it with $__field_station_id.

3. Pull variables from URL request parameters

All request parameters from the request URL are now available in the variable interpolation dictionary, prefixed by "request_". This enables using request variables in all panel control options (source, commit).

Example

So, when invoking the dashboard with query parameters like

you would be able to use these variables from inside panel control options by assigning them appropriately.

4. Override panel control options with URL request parameters

By using request parameters prefixed with “panel-”, it is possible to override the panel control options at runtime (source, commit).

Examples

# Disable zoom control.
https://daq.example.org/d/D1Fx12kWk/magic-dashboard?panel-showZoomControl=false 

# Add clickthrough-link, interpolating the geohash value.
?panel-clickthroughUrl=/path/to/?geohash=$__field_geohash

# Crazyness:
# Interpolate a custom request variable into
# the `clickthroughUrl` setting at runtime.
https://daq.example.org/d/D1Fx12kWk/magic-dashboard?panel-clickthroughUrl=/path/to/?foobar=$request_foobar&foobar=hello

[Andreas]

Add map centering to “First geohash”

Improvement

We already support the last geohash center, it might be useful to also center on the first geohash received (commit).

Acknowlegements

Thanks for sharing that through #156, Fabien Pomerol.

[Andreas]

Add control options "mapFitData" and "mapZoomByRadius"

Both editor options provide a more convenient way to determine the viewport (center and zoom level) of the map view. Both features are using Leaflet’s getBoundsZoom() method, which

returns the maximum zoom level on which the given bounds fit to the map view in its entirety.

As the computation of "mapFitData" is based on the real data which actually covers a certain boundary, this should mostly do what I mean.

Fit to data

Enabling this option will choose an optimal center and zoom level for covering the displayed data (source).

Zoom radius (km)

This will use a bounding box of a respective circle with the designated radius around the chosen center for determining the viewport (source).

Reference

– Add control options `mapFitData` and `mapZoomByRadius`. · panodata/panodata-map-panel@ebec3f6 · GitHub

[Andreas]

Problem with “Missing geohash value”

TLDR;

One of our data feeds suddenly started yielding empty "geohash" values into the database. The Worldmap Panel was not amused about it.

Problem

@Andreas

LDI dashboards melden “Missing geohash value”.

Reason

@Andreas

In der Tat.

$ influx -database luftdaten_info -precision rfc3339
> select time, station_id, geohash, temperature, humidity, P1, P2 from ldi_readings where geohash = '' order by time desc limit 10

time                           station_id geohash temperature humidity P1              P2
----                           ---------- ------- ----------- -------- --              --
2019-05-02T00:20:31Z           12977              9.4         84.3
2019-05-02T00:20:30Z           12977                                   91.8            48.9
2019-05-02T00:18:03Z           12977              9.3         85.1

Proposal

The Worldmap Panel should be able to compensate for that by operating it with an appropriate control option.

---

Solution: New options for ignoring empty or invalid geohash values

Complementing the options to ignore empty and zero metric values, the options to “Ignore empty geohash values” and “Ignore invalid geohash values” optionally should do what they promise (source, commit).

[Andreas]

Improve Kiosk-mode display

Add ignoreEscapeKey option.

While this amends the global behaviour of Grafana and should probably be implemented elsewhere, it helps us now to prevent the user to leave the Kiosk mode.

– https://github.com/hiveeyes/grafana-worldmap-panel/commit/eea48c41d5fd338f841ba29e3d031004ab61671d

Add hideTimepickerNavigation option.

This also amends global behaviour so it should be implemented elsewhere. However, it helps us now to improve Kiosk mode displays.

– https://github.com/hiveeyes/grafana-worldmap-panel/commit/e379a8b0de93bbc3a3aca4cbe8d9119c6b37f774

[Andreas]

Disable strokes or adjust stroke width

Request

@wtf

Strichstärke der Kreise einstellen können (zw. 0 und ~5px, bitte auf jeden Fall die 0 möglich machen), siehe bspw. (tagsüber ;) die Sonnenschein-Karte .

@Andreas

Auch nachts, ja?

---

Disable strokes

Before / After

The default is “strokes enabled” with a stroke width of 3 pixels (left side). After disabling strokes, the circles display without borders (right side).

---

Adjust stroke width

Pen Liner borders.

[Andreas]

Adjust attribution text

These settings control which alternative text is displayed in the attribution area of the Leaflet map widget (commit).

[Andreas]

Full changelog

v0.3.0-dev

• Add new mapping options table+json and table+jsonp to retrieve
  location information from JSON endpoint, even for table data.
  The lookup key is the value obtained from the database field
  designated by tableQueryOptions.labelLocationKeyField.
• Add autoPanLabels and autoWidthLabels to visual option settings.
• Add zoomControl and attributionControl to visual option settings.
• Optionally display legend in different DOM element.
• Increase form field width for JSON endpoint url settings.
• Fix conditional table options display in settings editor.
• Add showTableOptions() conditional for signalling any type of table source.
• Add software tests covering new control options
  • locationData: "table+json"
  • showZoomControl: false
  • showAttribution: false
  • legendContainerSelector
• Add Makefile for macOS/Homebrew.
• Fix popover labels text color for light theme (#169).
  Thanks, @dtheb.
• Add clickthrough option for circles, use fixed url (#129).
  Thanks, @ryft.
• Add clickthrough option for circles, use urls from data (#190).
  Thanks, @leonhardhaas.
• Combine both clickthrough link implementations #129 and #190,
  add basic variable interpolation based on keys from dataPoint.
• Introduce the regular Grafana templating mechanism for interpolating variables
  into clickthrough links. As we are now interpolating dashboard and dataPoint
  variables, the latter one will get prefixed with __field_ to avoid collisions.
• Apply Grafana-style variable interpolation to all panel settings.
• Add query parameters into the interpolation dictionary, prefixed by request_.
• Use request parameters prefixed with “panel-” to optionally override the
  respective control options.
• Improve map center control handling.
• Improve clickthroughUrl interpolation.
• Add control option clickthroughOptions.windowName to open clickthrough target in designated window.
• Improve centering on Last Geohash.
• Add support for First Geohash centering (#156).
  Thanks, @fabienpomerol.
• Add control options mapFitData and mapZoomByRadius.
• Repaint user interface.
• Refactor machinery and user interface.
• Add options ignoreEmptyGeohashValues and ignoreInvalidGeohashValues.
• Add ignoreEscapeKey option.
• Add hideTimepickerNavigation option.
• Add circleOptions.strokeEnabled and circleOptions.strokeWeight.
• Add options customAttribution and customAttributionText.

– grafana-worldmap-panel/CHANGELOG.md at develop · hiveeyes/grafana-worldmap-panel · GitHub

[Andreas]

Editor view improvements

Last but not least, the editor view layout has been adjusted to account for the growing number of settings. While being at it, some controls and their mechanics have been improved.

About

Start repainting the user interface (commit)

The number of features and the corresponding editor options already made learning and operating this panel slightly cumbersome. This humbly tries to bring in some fresh air to the user interface in order to improve this situation and make things more clear to the operator.

Refactor machinery and user interface (commit)

This turned out to be a major refactoring and improves the plugin across the board. The editor user interface now is way more clear about what it is aiming at and its interactivity got improved to support the operator while tuning its knobs.

Screens

Location source, data format and mapping

Visual options

Details

Data format and mapping flavor

Map viewport defaults (center, zoom level)

[Andreas]

Verbose notifications about warnings and errors

The internal machinery now yields verbose warnings and error messages into the user interface.

About

Refactor machinery and user interface (commit)

Along the lines, appropriate exception and error handling has been introduced to signal error conditions and warnings to the user which helps tremendously when configuring and operating this plugin.

Screens

These are pairs of “invalid setting” <=> “user warning” each. It should give you an idea what this is all about.

Wrong data format selected

Parameters missing

Wrong field names

Failed JSON responses

Multiple error domains

As misconfiguration might have happened at different places and advanced processing sequences might emit notifications at different steps, there might even be multiple error messages originating at different parts of the plugin – let’s call them “application domains” or “subsystems”. Both of the examples below demonstrate this well where one message is originating at the “data domain” and the other one at the “location domain” of the Grafana Worldmap Panel.

Being implemented through a generic ErrorManager, the general idea and main part of this humble notification subsystem might be considered to be used for other plugins as well.

Outlook

Currently, we are using the designated tooltip drop in the upper left panel corner as this is the place Grafana users are accustomed to. However, this might change in the future to display some of this information in the editor view only as some details might have to be hidden from the average user while still being visible to the panel operator.

[wtf]

@Andreas

Fit to data

Enabling this option will choose an optimal center and zoom level for covering the displayed data (source).

Hey, great stuff! But … sorry … feature request!

I’d like to define a “max zoom-level” when “fit to data” is enabled. Background: We are drawing two “selected stations from different networks” side-by-side. These might be some blocks away, the default max. zoom-level won’t help for orientation.

[Andreas]

@wtf

I’d like to define a “max zoom-level” when “fit to data” is enabled.

Thanks for writing in and reporting this. We have been able to fix this through https://github.com/panodata/grafana-map-panel/issues/2. Have fun!

[Andreas]

Quo vadis

We wanted to let you know that the development of the improved Grafana Map Panel already has moved on to the Panodata Initiative. You might enjoy reading about all new features and improvements on its new canonical documentation page.

Grafana Map Panel

Setup

Installing the most recent version of the Grafana Map Panel is easy as we are now building and publishing installation packages. Instructions are outlined within the documentation section Setup Grafana Map Panel.

Outlook

We will be happy to receive further contributions from the community and would like to encourage you to send pull requests to this repository we are trying to maintain steadily. We will also be happy to see you join the discussion about Developing Grafana Map Panel or just follow the development process.