diff --git a/README.md b/README.md index 2f9f6a4..1bbd68f 100644 --- a/README.md +++ b/README.md @@ -161,7 +161,7 @@ __Multiple values__ checkbox specifies how they should be displayed: ![Color mapping](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/multiple-values-error.png) -__Null values__ can be treated as empty buckets or displayed with the color of `0` value. +__Display nulls__ can be treated as empty buckets or displayed with the color of `0` value. ![Color mapping](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/null-as-empty.png) @@ -172,43 +172,39 @@ __Rounding__ may be used to round edges. ![Min width, spacing, rounding 2](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/min-width-spacing-rounding-02.png) +__Values index__ set to positive number to display only values from specified timeseries. + #### Display ![Display options](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/options-display.png) __Show legend__ checkbox toggles legend at the bottom of the panel. +__Rows sort__ can be used to sort labels on Y axis. Metrics — sort y labels as they are defined on Metrics tab. a→z and z→a sort labels descending or ascending in a [natural](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) order. + +#### Pagination + +![Pagination controls](src/img/pagination-graph.png) + +__Enable pagination__ toggles pagination controls on graph. + +__Rows per page__ a number of rows to display on graph. + +#### Tooltip + +![Tooltip in frozen state](src/img/tooltip-frozen.png) + __Show tooltip__ toggles tooltip display on mouse over buckets. -__Y axis sort__ can be used to sort labels on Y axis. Metrics — sort y labels as they are defined on Metrics tab. a→z and z→a sort labels descending or ascending in a [natural](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) order. +__Freeze on click__ toggles tooltip "freezing" on click. Frozen tooltip can be used to compare data with floating tooltip or to follow URLs. -#### Tooltip with external link -![Tooltip with external link](src/img/tooltip-url.png) +__Show items__ toggles display of additional items in tooltip. -A new tooltip that will appear when mouse click in a value showing one or more links to navigate. It can be configured in the options editor. Also it can be disabled to not appear. +__Items__ is a list of definitions to display URLs in tooltip. -#### Tooltip editor -![Tooltip options](src/img/tooltip-editor.png) +Each URL has a template, icon, label and formating options: lowercase and date format for variables. -__Show Extra Series Tooltip when clicking elements__ toggles tooltip with links display on mouse click. - -__Add new URL__ creates a new form to add a new link - -__Remove all URLs__ removes all the urls created before - -__Label__ name to show in the link instead of the URL - -__URL__ URL to navigate - -__Icon__ icon to show next to the url - -__Force lowercase__ forces the url to be lowercase even if it is written in capital letters - -__Extra Series Completer__ toggles extra series to write the URL - -__Extra Series Index__ fields index to use its value on URL using $series_extra. Use -1 to disable it - -__Extra Series Date Format__ date format to transform extra herlper when its type is Date +![Tooltip items editor](src/img/tooltip-editor.png) ## Development diff --git a/dist/README.md b/dist/README.md index 2f9f6a4..1bbd68f 100644 --- a/dist/README.md +++ b/dist/README.md @@ -161,7 +161,7 @@ __Multiple values__ checkbox specifies how they should be displayed: ![Color mapping](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/multiple-values-error.png) -__Null values__ can be treated as empty buckets or displayed with the color of `0` value. +__Display nulls__ can be treated as empty buckets or displayed with the color of `0` value. ![Color mapping](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/null-as-empty.png) @@ -172,43 +172,39 @@ __Rounding__ may be used to round edges. ![Min width, spacing, rounding 2](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/min-width-spacing-rounding-02.png) +__Values index__ set to positive number to display only values from specified timeseries. + #### Display ![Display options](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/options-display.png) __Show legend__ checkbox toggles legend at the bottom of the panel. +__Rows sort__ can be used to sort labels on Y axis. Metrics — sort y labels as they are defined on Metrics tab. a→z and z→a sort labels descending or ascending in a [natural](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) order. + +#### Pagination + +![Pagination controls](src/img/pagination-graph.png) + +__Enable pagination__ toggles pagination controls on graph. + +__Rows per page__ a number of rows to display on graph. + +#### Tooltip + +![Tooltip in frozen state](src/img/tooltip-frozen.png) + __Show tooltip__ toggles tooltip display on mouse over buckets. -__Y axis sort__ can be used to sort labels on Y axis. Metrics — sort y labels as they are defined on Metrics tab. a→z and z→a sort labels descending or ascending in a [natural](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) order. +__Freeze on click__ toggles tooltip "freezing" on click. Frozen tooltip can be used to compare data with floating tooltip or to follow URLs. -#### Tooltip with external link -![Tooltip with external link](src/img/tooltip-url.png) +__Show items__ toggles display of additional items in tooltip. -A new tooltip that will appear when mouse click in a value showing one or more links to navigate. It can be configured in the options editor. Also it can be disabled to not appear. +__Items__ is a list of definitions to display URLs in tooltip. -#### Tooltip editor -![Tooltip options](src/img/tooltip-editor.png) +Each URL has a template, icon, label and formating options: lowercase and date format for variables. -__Show Extra Series Tooltip when clicking elements__ toggles tooltip with links display on mouse click. - -__Add new URL__ creates a new form to add a new link - -__Remove all URLs__ removes all the urls created before - -__Label__ name to show in the link instead of the URL - -__URL__ URL to navigate - -__Icon__ icon to show next to the url - -__Force lowercase__ forces the url to be lowercase even if it is written in capital letters - -__Extra Series Completer__ toggles extra series to write the URL - -__Extra Series Index__ fields index to use its value on URL using $series_extra. Use -1 to disable it - -__Extra Series Date Format__ date format to transform extra herlper when its type is Date +![Tooltip items editor](src/img/tooltip-editor.png) ## Development diff --git a/dist/img/pagination-graph.png b/dist/img/pagination-graph.png new file mode 100644 index 0000000..1d8b91e Binary files /dev/null and b/dist/img/pagination-graph.png differ diff --git a/dist/img/tooltip-editor.png b/dist/img/tooltip-editor.png index 97a26d8..69113cc 100644 Binary files a/dist/img/tooltip-editor.png and b/dist/img/tooltip-editor.png differ diff --git a/dist/img/tooltip-frozen.png b/dist/img/tooltip-frozen.png new file mode 100644 index 0000000..ef6bd61 Binary files /dev/null and b/dist/img/tooltip-frozen.png differ diff --git a/dist/img/tooltip-url.png b/dist/img/tooltip-url.png deleted file mode 100644 index cb65c49..0000000 Binary files a/dist/img/tooltip-url.png and /dev/null differ diff --git a/dist/partials/tooltip_editor.html b/dist/partials/tooltip_editor.html index 350b136..1f2a958 100644 --- a/dist/partials/tooltip_editor.html +++ b/dist/partials/tooltip_editor.html @@ -38,17 +38,16 @@ Use special variables:
${__y_label} name of the time series (alias or legend in the query editor). -
- ${__bucket_range} refers to bucket range in the form of '&from=...&to=...'. -
- ${__graph_range} refers to graph range in the form of '&from=...&to=...'. + ${__url_time_range} refers to graph range in the form of 'from=...&to=...'.
${__value} refers to current bucket value or max value if multiple values mode is on.
${__value_N} refers to Nth value in current bucket. Value indexes are started from 0. For instance, ${__value_1} refers to second value. +
+ ${__value_date} refers to __value formatted as date. + ${__value_N_date} refers to Nth value in current bucket formatted as date. diff --git a/src/img/pagination-graph.png b/src/img/pagination-graph.png new file mode 100644 index 0000000..1d8b91e Binary files /dev/null and b/src/img/pagination-graph.png differ diff --git a/src/img/tooltip-editor.png b/src/img/tooltip-editor.png index 97a26d8..69113cc 100644 Binary files a/src/img/tooltip-editor.png and b/src/img/tooltip-editor.png differ diff --git a/src/img/tooltip-frozen.png b/src/img/tooltip-frozen.png new file mode 100644 index 0000000..ef6bd61 Binary files /dev/null and b/src/img/tooltip-frozen.png differ diff --git a/src/img/tooltip-url.png b/src/img/tooltip-url.png deleted file mode 100644 index cb65c49..0000000 Binary files a/src/img/tooltip-url.png and /dev/null differ diff --git a/src/partials/tooltip_editor.html b/src/partials/tooltip_editor.html index 350b136..1f2a958 100644 --- a/src/partials/tooltip_editor.html +++ b/src/partials/tooltip_editor.html @@ -38,17 +38,16 @@ Use special variables:
${__y_label} name of the time series (alias or legend in the query editor). -
- ${__bucket_range} refers to bucket range in the form of '&from=...&to=...'. -
- ${__graph_range} refers to graph range in the form of '&from=...&to=...'. + ${__url_time_range} refers to graph range in the form of 'from=...&to=...'.
${__value} refers to current bucket value or max value if multiple values mode is on.
${__value_N} refers to Nth value in current bucket. Value indexes are started from 0. For instance, ${__value_1} refers to second value. +
+ ${__value_date} refers to __value formatted as date. + ${__value_N_date} refers to Nth value in current bucket formatted as date.