IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into table-col-alias

Browse Source
This commit is contained in:
Dan Cech
2017-05-05 12:41:35 -04:00
parent 29653d2bec 43c6f74904
commit 0f24b45c1a
57 changed files with 1370 additions and 873 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/core/services/segment_srv.js
View File

@@ -13,6 +13,7 @@ function (angular, _, coreModule) {
if (options === '*' || options.value === '*') {
this.value = '*';
this.html = $sce.trustAsHtml('<i class="fa fa-asterisk"><i>');
this.type = options.type;
this.expandable = true;
return;
}

23
public/app/features/annotations/partials/editor.html
View File

@@ -18,6 +18,12 @@
<li class="gf-tabs-item" ng-show="ctrl.mode === 'new'">
<span class="active gf-tabs-link">New Query</span>
</li>
<li class="gf-tabs-item" >
<a class="gf-tabs-link" ng-click="ctrl.mode = 'help';" ng-class="{active: ctrl.mode === 'help'}">
Help
</a>
</li>
</ul>
<button class="tabbed-view-close-btn" ng-click="dismiss();">
@@ -26,9 +32,24 @@
</div>
<div class="tabbed-view-body">
<div ng-show="ctrl.mode === 'help'">
<div class="grafana-info-box col-lg-8">
<h5>What are Annotations?</h5>
<p>
Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons
on all graph panels. When you hover over an annotation icon you can get title, tags, and text information for the event.
In the <i>Queries</i> tab you can add queries that return annotation events.
<br>
<br>
Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/annotations/">Annotations documentation</a> for more information.
</p>
</div>
</div>
<div class="editor-row row" ng-if="ctrl.mode === 'list'">
<div ng-if="ctrl.annotations.length === 0">
<em>No annotations defined</em>
<em>No annotation queries defined</em>
</div>
<table class="grafana-options-table">
<tr ng-repeat="annotation in ctrl.annotations">

17
public/app/features/styleguide/styleguide.html
View File

@@ -9,10 +9,6 @@
<i class="fa fa-random"></i>
Switch theme
</a>
<a class="btn btn-inverse" ng-click="ctrl.switchTheme()">
<i class="fa fa-refresh"></i>
Reload
</a>
<div class="page-header-tabs">
<ul class="gf-tabs">
@@ -43,6 +39,19 @@
</div>
</div>
<div class="tab-pane style-guide-icon-list" ng-if="ctrl.page.icons">
<div class="row">
<div ng-repeat="icon in ctrl.icons" class="col-md-2 col-sm-3 col-xs-4">
<i class="icon-gf icon-gf-{{icon}}" bs-tooltip="'icon-gf icon-gf-{{icon}}'"></i>
</div>
</div>
</div>
<div class="tab-pane style-guide-plugin-authoring" ng-if="ctrl.page.plugins">
<p>From grafana 3.0 it's very easy to develop your own plugins and share them with other grafana users.</p>
<p>More information about plugin development can be found at <a href="http://docs.grafana.org/plugins/developing/development/" target="_blank">docs.grafana.org</a></p>
</div>
<div class="tab-pane" ng-if="ctrl.page.forms">
forms
</div>

23
public/app/features/styleguide/styleguide.ts
View File

@@ -9,11 +9,12 @@ class StyleGuideCtrl {
buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger'];
buttonSizes = ['btn-small', '', 'btn-large'];
buttonVariants = ['-', '-outline-'];
icons: any = [];
page: any;
pages = ['colors', 'buttons'];
pages = ['colors', 'buttons', 'icons', 'plugins'];
/** @ngInject **/
constructor(private $http, private $routeParams, private $location) {
constructor(private $http, private $routeParams, private $location, private backendSrv) {
this.theme = config.bootData.user.lightTheme ? 'light': 'dark';
this.page = {};
@@ -26,6 +27,10 @@ class StyleGuideCtrl {
if (this.page.colors) {
this.loadColors();
}
if (this.page.icons) {
this.loadIcons();
}
}
loadColors() {
@@ -36,10 +41,20 @@ class StyleGuideCtrl {
});
}
loadIcons() {
this.$http.get('public/sass/icons.json').then(res => {
this.icons = res.data;
});
}
switchTheme() {
this.$routeParams.theme = this.theme === 'dark' ? 'light' : 'dark';
this.$location.search(this.$routeParams);
setTimeout(() => {
var cmd = {
theme: this.$routeParams.theme
};
this.backendSrv.put('/api/user/preferences', cmd).then(() => {
window.location.href = window.location.href;
});
}

22
public/app/features/templating/partials/editor.html
View File

@@ -17,6 +17,11 @@
</li>
<li class="gf-tabs-item" ng-show="mode === 'new'">
<span class="active gf-tabs-link">New</span>
</li>
<li class="gf-tabs-item" >
<a class="gf-tabs-link" ng-click="mode = 'help';" ng-class="{active: mode === 'help'}">
Help
</a>
</li>
</ul>
@@ -30,7 +35,8 @@
<div ng-if="mode === 'list'">
<div ng-if="variables.length === 0">
<em>No template variables defined</em>
</div>
<br /> <br />
</div>
<table class="grafana-options-table">
<tr ng-repeat="variable in variables">
<td style="width: 1%">
@@ -64,6 +70,20 @@
</table>
</div>
<div ng-show="mode === 'help'">
<div class="grafana-info-box col-lg-8">
<h5>What does templating do?</h5>
<p>Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application
and sensor name in you metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of
the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.
<br>
<br>
Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/templating/">Templating documentation</a> for more information.
</p>
</div>
</div>
<div class="gf-form" ng-show="mode === 'list'">
<div class="gf-form-button-row">
<a type="button" class="btn gf-form-button btn-success" ng-click="mode = 'new';"><i class="fa fa-plus" ></i>&nbsp;&nbsp;New</a>

1
public/app/partials/metrics.html
View File

@@ -17,3 +17,4 @@
</rebuild-on-change>
</div>
<div class="clearfix"></div>

4
public/app/plugins/datasource/cloudwatch/partials/config.html
View File

@@ -15,14 +15,14 @@
</div>
<div class="gf-form" ng-show='ctrl.current.jsonData.authType == "keys"'>
<label class="gf-form-label width-13">Access key </label>
<label class="gf-form-label width-13">Access key ID </label>
<label class="gf-form-label width-13" ng-show="ctrl.accessKeyExist">Configured</label>
<a class="btn btn-secondary gf-form-btn" type="submit" ng-click="ctrl.resetAccessKey()" ng-show="ctrl.accessKeyExist">Reset</a>
<input type="text" class="gf-form-input max-width-18" ng-hide="ctrl.accessKeyExist" ng-model='ctrl.current.secureJsonData.accessKey'></input>
</div>
<div class="gf-form" ng-show='ctrl.current.jsonData.authType == "keys"'>
<label class="gf-form-label width-13">Secret key</label>
<label class="gf-form-label width-13">Secret access key</label>
<label class="gf-form-label width-13" ng-show="ctrl.secretKeyExist">Configured</label>
<a class="btn btn-secondary gf-form-btn" type="submit" ng-click="ctrl.resetSecretKey()" ng-show="ctrl.secretKeyExist">Reset</a>
<input type="text" class="gf-form-input max-width-18" ng-hide="ctrl.secretKeyExist" ng-model='ctrl.current.secureJsonData.secretKey'></input>

20
public/app/plugins/datasource/prometheus/partials/query.editor.html
View File

@@ -13,9 +13,10 @@
ng-model-onblur ng-change="ctrl.refreshMetricData()">
</input>
</div>
<div class="gf-form">
<label class="gf-form-label">Min step</label>
<input type="text" class="gf-form-input max-width-5" ng-model="ctrl.target.interval"
<label class="gf-form-label width-6">Min step</label>
<input type="text" class="gf-form-input width-8" ng-model="ctrl.target.interval"
data-placement="right"
spellcheck='false'
placeholder="{{ctrl.panelCtrl.interval}}"
@@ -26,6 +27,7 @@
Leave blank for auto handling based on time range and panel width
</info-popover>
</div>
<div class="gf-form">
<label class="gf-form-label">Resolution</label>
<div class="gf-form-select-wrapper max-width-15">
@@ -36,14 +38,20 @@
</div>
</div>
<div class="gf-form max-width-22">
<label class="gf-form-label">Metric lookup</label>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-26">
<label class="gf-form-label width-8">Metric lookup</label>
<input type="text" class="gf-form-input" ng-model="ctrl.target.metric" spellcheck='false' bs-typeahead="ctrl.suggestMetrics" placeholder="metric name" data-min-length=0 data-items=100>
</div>
<div class="gf-form">
<label class="gf-form-label">Format as</label>
<div class="gf-form-select-wrapper">
<label class="gf-form-label width-6">Format as</label>
<div class="gf-form-select-wrapper width-8">
<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.format" ng-options="f.value as f.text for f in ctrl.formats" ng-change="ctrl.refresh()"></select>
</div>
<label class="gf-form-label">

108
public/app/plugins/panel/alertlist/img/icn-singlestat-panel.svg
View File

@@ -1,33 +1,75 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="32.3342" y1="95.7019" x2="32.3342" y2="5.2695">
<stop offset="0" style="stop-color:#FFDE17"/>
<stop offset="0.0803" style="stop-color:#FFD210"/>
<stop offset="0.1774" style="stop-color:#FEC90D"/>
<stop offset="0.2809" style="stop-color:#FDC70C"/>
<stop offset="0.6685" style="stop-color:#F3903F"/>
<stop offset="0.8876" style="stop-color:#ED683C"/>
<stop offset="1" style="stop-color:#E93E3A"/>
</linearGradient>
<path style="fill:url(#SVGID_1_);" d="M48.173,57.757V39.825c0-1.302,1.055-2.357,2.357-2.357h9.691
c0.897,0,1.346-1.084,0.712-1.718L34.112,0.737c-0.982-0.982-2.574-0.982-3.556,0L3.735,35.75
c-0.634,0.634-0.185,1.718,0.712,1.718h9.691c1.302,0,2.357,1.055,2.357,2.357v17.932c0,0.958,0.776,1.734,1.734,1.734h28.21
C47.397,59.491,48.173,58.715,48.173,57.757z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="67.6658" y1="94.1706" x2="67.6658" y2="3.7383">
<stop offset="0" style="stop-color:#FFDE17"/>
<stop offset="0.0803" style="stop-color:#FFD210"/>
<stop offset="0.1774" style="stop-color:#FEC90D"/>
<stop offset="0.2809" style="stop-color:#FDC70C"/>
<stop offset="0.6685" style="stop-color:#F3903F"/>
<stop offset="0.8876" style="stop-color:#ED683C"/>
<stop offset="1" style="stop-color:#E93E3A"/>
</linearGradient>
<path style="fill:url(#SVGID_2_);" d="M95.553,62.532h-9.691c-1.302,0-2.357-1.055-2.357-2.357V42.243
c0-0.958-0.776-1.734-1.734-1.734h-28.21c-0.958,0-1.734,0.776-1.734,1.734v17.932c0,1.302-1.055,2.357-2.357,2.357h-9.691
c-0.897,0-1.346,1.084-0.712,1.718l26.821,35.013c0.982,0.982,2.574,0.982,3.556,0L96.265,64.25
C96.898,63.616,96.45,62.532,95.553,62.532z"/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path fill="#1F1F1F" d="M18.2,4.2c-1.5,0-2.9,0.6-3.9,1.6l-0.5,0.5l-0.5-0.5c-1-1.1-2.4-1.6-3.9-1.6S6.6,4.8,5.5,5.8
c-1,1-1.6,2.4-1.6,3.9s0.6,2.9,1.6,3.9l8.3,8.3l8.3-8.3c1-1,1.6-2.4,1.6-3.9s-0.6-2.9-1.6-3.9C21.1,4.8,19.7,4.2,18.2,4.2z
M21,12.5l-7.2,7.2l-7.1-7.1c-0.7-0.7-1.1-1.7-1.1-2.8c0-1,0.4-2,1.1-2.8c0.7-0.7,1.7-1.1,2.8-1.1c1,0,2,0.4,2.8,1.1l0.5,0.5
l0.6,0.6l0.6,0.6l0.6-0.6L15,7.5L15.5,7c0.7-0.7,1.7-1.1,2.8-1.1c1,0,2,0.4,2.8,1.1c0.7,0.7,1.1,1.7,1.1,2.8
C22.1,10.8,21.7,11.8,21,12.5z"/>
<path fill="#1F1F1F" d="M18.2,77.3c-1.5,0-2.9,0.6-3.9,1.6l-0.5,0.5L13.4,79c-1-1.1-2.4-1.6-3.9-1.6S6.6,77.9,5.5,79
c-1,1-1.6,2.4-1.6,3.9s0.6,2.9,1.6,3.9l8.3,8.3l8.3-8.3c1-1,1.6-2.4,1.6-3.9S23.2,80,22.1,79C21.1,77.9,19.7,77.3,18.2,77.3z
M21,85.6l-7.2,7.2l-7.1-7.1c-0.7-0.7-1.1-1.7-1.1-2.8c0-1,0.4-2,1.1-2.8C7.4,79.4,8.4,79,9.4,79c1,0,2,0.4,2.8,1.1l0.5,0.5
l0.6,0.6l0.6,0.6l0.6-0.6l0.6-0.6l0.5-0.5c0.7-0.7,1.7-1.1,2.8-1.1c1,0,2,0.4,2.8,1.1c0.7,0.7,1.1,1.7,1.1,2.8
C22.1,83.9,21.7,84.9,21,85.6z"/>
<path fill="#1F1F1F" d="M0,0v100h100V0H0z M22.7,87.4l-8.9,8.9l-8.9-8.9C3.7,86.2,3,84.6,3,82.9s0.7-3.3,1.9-4.5
c1.2-1.2,2.8-1.9,4.5-1.9c1.6,0,3.2,0.6,4.4,1.7c1.2-1.1,2.7-1.7,4.4-1.7c1.7,0,3.3,0.7,4.5,1.9c1.2,1.2,1.9,2.8,1.9,4.5
S23.9,86.2,22.7,87.4z M22.7,63l-8.9,8.9L4.9,63C3.7,61.8,3,60.2,3,58.5c0-1.7,0.7-3.3,1.9-4.5c1.2-1.2,2.8-1.9,4.5-1.9
c1.1,0,2.1,0.3,3,0.7l0,0.1l0,0l-1.3,6.6l0,0l0,0.1l2.3-0.1l-0.6,6.1l0-0.1l0,0l3.4-8.3l-2,0.3l1.2-3.7l0-0.1l0,0l0.3-1.1
c0.8-0.3,1.6-0.5,2.4-0.5c1.7,0,3.3,0.7,4.5,1.9c1.2,1.2,1.9,2.8,1.9,4.5C24.6,60.2,23.9,61.8,22.7,63z M22.7,38.7l-8.9,8.9
l-8.9-8.9C3.7,37.5,3,35.9,3,34.1s0.7-3.3,1.9-4.5c1.2-1.2,2.8-1.9,4.5-1.9c1.1,0,2.1,0.3,3,0.7l0,0.1l0,0l-1.3,6.6l0,0l0,0.1
l2.3-0.1l-0.6,6.1l0-0.1l0,0l3.4-8.3l-2,0.3l1.2-3.7l0-0.1l0,0l0.3-1.1c0.8-0.3,1.6-0.5,2.4-0.5c1.7,0,3.3,0.7,4.5,1.9
c1.2,1.2,1.9,2.8,1.9,4.5S23.9,37.5,22.7,38.7z M22.7,14.3l-8.9,8.9l-8.9-8.9C3.7,13.1,3,11.5,3,9.8s0.7-3.3,1.9-4.5
c1.2-1.2,2.8-1.9,4.5-1.9c1.6,0,3.2,0.6,4.4,1.7C15,4,16.6,3.4,18.2,3.4c1.7,0,3.3,0.7,4.5,1.9c1.2,1.2,1.9,2.8,1.9,4.5
S23.9,13.1,22.7,14.3z M96.6,94.4c0,1-0.8,1.8-1.8,1.8H33.4c-1,0-1.8-0.8-1.8-1.8V78.6c0-1,0.8-1.8,1.8-1.8h61.4
c1,0,1.8,0.8,1.8,1.8V94.4z M96.6,69.9c0,1-0.8,1.8-1.8,1.8H33.4c-1,0-1.8-0.8-1.8-1.8V54.1c0-1,0.8-1.8,1.8-1.8h61.4
c1,0,1.8,0.8,1.8,1.8V69.9z M96.6,45.4c0,1-0.8,1.8-1.8,1.8H33.4c-1,0-1.8-0.8-1.8-1.8V29.6c0-1,0.8-1.8,1.8-1.8h61.4
c1,0,1.8,0.8,1.8,1.8V45.4z M96.6,20.9c0,1-0.8,1.8-1.8,1.8H33.4c-1,0-1.8-0.8-1.8-1.8V5.1c0-1,0.8-1.8,1.8-1.8h61.4
c1,0,1.8,0.8,1.8,1.8V20.9z"/>
<path fill="#1F1F1F" d="M18.2,53c-0.5,0-1,0.1-1.4,0.2l-0.7,2.1c0.6-0.4,1.3-0.6,2.1-0.6c1,0,2,0.4,2.8,1.1
c0.7,0.7,1.1,1.7,1.1,2.8c0,1-0.4,2-1.1,2.8l-7.2,7.2l-7.1-7.1c-0.7-0.7-1.1-1.7-1.1-2.8c0-1,0.4-2,1.1-2.8
c0.7-0.7,1.7-1.1,2.8-1.1c0.5,0,1,0.1,1.5,0.3l0.3-1.6c-0.6-0.2-1.2-0.3-1.8-0.3c-1.5,0-2.9,0.6-3.9,1.6c-1,1-1.6,2.4-1.6,3.9
c0,1.5,0.6,2.9,1.6,3.9l8.3,8.3l8.3-8.3c1-1,1.6-2.4,1.6-3.9c0-1.5-0.6-2.9-1.6-3.9C21.1,53.5,19.7,53,18.2,53z"/>
<path fill="#1F1F1F" d="M18.2,28.6c-0.5,0-1,0.1-1.4,0.2l-0.7,2.1c0.6-0.4,1.3-0.6,2.1-0.6c1,0,2,0.4,2.8,1.1
c0.7,0.7,1.1,1.7,1.1,2.8c0,1-0.4,2-1.1,2.8l-7.2,7.2l-7.1-7.1c-0.7-0.7-1.1-1.7-1.1-2.8c0-1,0.4-2,1.1-2.8
c0.7-0.7,1.7-1.1,2.8-1.1c0.5,0,1,0.1,1.5,0.3l0.3-1.6c-0.6-0.2-1.2-0.3-1.8-0.3c-1.5,0-2.9,0.6-3.9,1.6c-1,1-1.6,2.4-1.6,3.9
s0.6,2.9,1.6,3.9l8.3,8.3l8.3-8.3c1-1,1.6-2.4,1.6-3.9s-0.6-2.9-1.6-3.9C21.1,29.2,19.7,28.6,18.2,28.6z"/>
<path fill="#898989" d="M94.7,3.3H33.4c-1,0-1.8,0.8-1.8,1.8v15.8c0,1,0.8,1.8,1.8,1.8h61.4c1,0,1.8-0.8,1.8-1.8V5.1
C96.6,4.1,95.7,3.3,94.7,3.3z"/>
<path fill="#898989" d="M94.7,27.8H33.4c-1,0-1.8,0.8-1.8,1.8v15.8c0,1,0.8,1.8,1.8,1.8h61.4c1,0,1.8-0.8,1.8-1.8V29.6
C96.6,28.6,95.7,27.8,94.7,27.8z"/>
<path fill="#898989" d="M94.7,52.3H33.4c-1,0-1.8,0.8-1.8,1.8v15.8c0,1,0.8,1.8,1.8,1.8h61.4c1,0,1.8-0.8,1.8-1.8V54.1
C96.6,53.1,95.7,52.3,94.7,52.3z"/>
<path fill="#898989" d="M94.7,76.8H33.4c-1,0-1.8,0.8-1.8,1.8v15.8c0,1,0.8,1.8,1.8,1.8h61.4c1,0,1.8-0.8,1.8-1.8V78.6
C96.6,77.6,95.7,76.8,94.7,76.8z"/>
<path fill="#04A64D" d="M18.2,3.4c-1.6,0-3.2,0.6-4.4,1.7C12.6,4,11.1,3.4,9.4,3.4c-1.7,0-3.3,0.7-4.5,1.9C3.7,6.5,3,8.1,3,9.8
s0.7,3.3,1.9,4.5l8.9,8.9l8.9-8.9c1.2-1.2,1.9-2.8,1.9-4.5s-0.7-3.3-1.9-4.5C21.5,4.1,19.9,3.4,18.2,3.4z M22.1,13.7L13.8,22
l-8.3-8.3c-1-1-1.6-2.4-1.6-3.9s0.6-2.9,1.6-3.9c1-1,2.4-1.6,3.9-1.6s2.9,0.6,3.9,1.6l0.5,0.5l0.5-0.5c1-1,2.4-1.6,3.9-1.6
c1.5,0,2.9,0.6,3.9,1.6c1,1,1.6,2.4,1.6,3.9S23.2,12.7,22.1,13.7z"/>
<path fill="#04A64D" d="M18.2,5.9c-1,0-2,0.4-2.8,1.1L15,7.5l-0.6,0.6l-0.6,0.6l-0.6-0.6l-0.6-0.6L12.2,7c-0.7-0.7-1.7-1.1-2.8-1.1
c-1,0-2,0.4-2.8,1.1C5.9,7.8,5.5,8.7,5.5,9.8c0,1,0.4,2,1.1,2.8l7.1,7.1l7.2-7.2c0.7-0.7,1.1-1.7,1.1-2.8c0-1-0.4-2-1.1-2.8
C20.2,6.3,19.3,5.9,18.2,5.9z"/>
<path fill="#04A64D" d="M18.2,76.5c-1.6,0-3.2,0.6-4.4,1.7c-1.2-1.1-2.7-1.7-4.4-1.7c-1.7,0-3.3,0.7-4.5,1.9
C3.7,79.6,3,81.2,3,82.9s0.7,3.3,1.9,4.5l8.9,8.9l8.9-8.9c1.2-1.2,1.9-2.8,1.9-4.5s-0.7-3.3-1.9-4.5C21.5,77.2,19.9,76.5,18.2,76.5
z M22.1,86.8l-8.3,8.3l-8.3-8.3c-1-1-1.6-2.4-1.6-3.9S4.5,80,5.5,79c1-1,2.4-1.6,3.9-1.6s2.9,0.6,3.9,1.6l0.5,0.5l0.5-0.5
c1-1,2.4-1.6,3.9-1.6c1.5,0,2.9,0.6,3.9,1.6c1,1,1.6,2.4,1.6,3.9S23.2,85.8,22.1,86.8z"/>
<path fill="#04A64D" d="M18.2,79c-1,0-2,0.4-2.8,1.1L15,80.6l-0.6,0.6l-0.6,0.6l-0.6-0.6l-0.6-0.6l-0.5-0.5
c-0.7-0.7-1.7-1.1-2.8-1.1c-1,0-2,0.4-2.8,1.1c-0.7,0.7-1.1,1.7-1.1,2.8c0,1,0.4,2,1.1,2.8l7.1,7.1l7.2-7.2
c0.7-0.7,1.1-1.7,1.1-2.8c0-1-0.4-2-1.1-2.8C20.2,79.4,19.3,79,18.2,79z"/>
<path fill="#EB242A" d="M18.2,27.8c-0.8,0-1.7,0.2-2.4,0.5l-0.3,1.1l0,0l0,0.1l-1.2,3.7l2-0.3l-3.4,8.3l0,0l0,0.1l0.6-6.1l-2.3,0.1
l0-0.1l0,0l1.3-6.6l0,0l0-0.1c-0.9-0.5-1.9-0.7-3-0.7c-1.7,0-3.3,0.7-4.5,1.9C3.7,30.8,3,32.4,3,34.1s0.7,3.3,1.9,4.5l8.9,8.9
l8.9-8.9c1.2-1.2,1.9-2.8,1.9-4.5s-0.7-3.3-1.9-4.5C21.5,28.4,19.9,27.8,18.2,27.8z M22.1,38.1l-8.3,8.3l-8.3-8.3
c-1-1-1.6-2.4-1.6-3.9s0.6-2.9,1.6-3.9c1-1,2.4-1.6,3.9-1.6c0.6,0,1.2,0.1,1.8,0.3l-0.3,1.6c-0.5-0.2-1-0.3-1.5-0.3
c-1,0-2,0.4-2.8,1.1c-0.7,0.7-1.1,1.7-1.1,2.8c0,1,0.4,2,1.1,2.8l7.1,7.1l7.2-7.2c0.7-0.7,1.1-1.7,1.1-2.8c0-1-0.4-2-1.1-2.8
c-0.7-0.7-1.7-1.1-2.8-1.1c-0.8,0-1.5,0.2-2.1,0.6l0.7-2.1c0.5-0.1,0.9-0.2,1.4-0.2c1.5,0,2.9,0.6,3.9,1.6c1,1,1.6,2.4,1.6,3.9
S23.2,37,22.1,38.1z"/>
<path fill="#EB242A" d="M18.2,52.1c-0.8,0-1.7,0.2-2.4,0.5l-0.3,1.1l0,0l0,0.1l-1.2,3.7l2-0.3l-3.4,8.3l0,0l0,0.1l0.6-6.1l-2.3,0.1
l0-0.1l0,0l1.3-6.6l0,0l0-0.1c-0.9-0.5-1.9-0.7-3-0.7c-1.7,0-3.3,0.7-4.5,1.9C3.7,55.2,3,56.8,3,58.5c0,1.7,0.7,3.3,1.9,4.5
l8.9,8.9l8.9-8.9c1.2-1.2,1.9-2.8,1.9-4.5c0-1.7-0.7-3.3-1.9-4.5C21.5,52.8,19.9,52.1,18.2,52.1z M22.1,62.4l-8.3,8.3l-8.3-8.3
c-1-1-1.6-2.4-1.6-3.9c0-1.5,0.6-2.9,1.6-3.9c1-1,2.4-1.6,3.9-1.6c0.6,0,1.2,0.1,1.8,0.3l-0.3,1.6c-0.5-0.2-1-0.3-1.5-0.3
c-1,0-2,0.4-2.8,1.1c-0.7,0.7-1.1,1.7-1.1,2.8c0,1,0.4,2,1.1,2.8l7.1,7.1l7.2-7.2c0.7-0.7,1.1-1.7,1.1-2.8c0-1-0.4-2-1.1-2.8
c-0.7-0.7-1.7-1.1-2.8-1.1c-0.8,0-1.5,0.2-2.1,0.6l0.7-2.1c0.5-0.1,0.9-0.2,1.4-0.2c1.5,0,2.9,0.6,3.9,1.6c1,1,1.6,2.4,1.6,3.9
C23.8,60,23.2,61.4,22.1,62.4z"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

5
public/app/plugins/panel/heatmap/axes_editor.ts
View File

@@ -10,11 +10,10 @@ export class AxesEditorCtrl {
dataFormats: any;
/** @ngInject */
constructor($scope) {
constructor($scope, uiSegmentSrv) {
$scope.editor = this;
this.panelCtrl = $scope.ctrl;
this.panel = this.panelCtrl.panel;
this.unitFormats = kbn.getUnitFormats();
this.logScales = {
@@ -27,7 +26,7 @@ export class AxesEditorCtrl {
this.dataFormats = {
'Time series': 'timeseries',
'Time series Pre-bucketed': 'tsbuckets'
'Time series buckets': 'tsbuckets'
};
}

11
public/app/plugins/panel/heatmap/heatmap_ctrl.ts
View File

@@ -25,15 +25,10 @@ let panelDefaults = {
colorScale: 'sqrt',
exponent: 0.5,
colorScheme: 'interpolateOranges',
fillBackground: false
},
dataFormat: 'timeseries',
xBucketSize: null,
xBucketNumber: null,
yBucketSize: null,
yBucketNumber: null,
xAxis: {
show: true
show: true,
},
yAxis: {
show: true,
@@ -45,6 +40,10 @@ let panelDefaults = {
max: null,
removeZeroValues: false
},
xBucketSize: null,
xBucketNumber: null,
yBucketSize: null,
yBucketNumber: null,
tooltip: {
show: true,
seriesStat: false,

2
public/app/plugins/panel/heatmap/heatmap_tooltip.ts
View File

@@ -87,7 +87,7 @@ export class HeatmapTooltip {
let tooltipHtml = `<div class="graph-tooltip-time">${time}</div>
<div class="heatmap-histogram"></div>`;
if (yData) {
if (yData && yData.bounds) {
boundBottom = valueFormatter(yData.bounds.bottom);
boundTop = valueFormatter(yData.bounds.top);
valuesNumber = yData.values.length;

283
public/app/plugins/panel/heatmap/img/icn-heatmap-panel.svg
View File

@@ -1,195 +1,88 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
width="100px"
height="100px"
viewBox="0 0 100 100"
style="enable-background:new 0 0 100 100;"
xml:space="preserve"
sodipodi:docname="icn-heatmap-panel.svg"
inkscape:version="0.92.1 unknown"><metadata
id="metadata108"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs106" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="2491"
inkscape:window-height="1410"
id="namedview104"
showgrid="false"
inkscape:zoom="9.44"
inkscape:cx="37.431994"
inkscape:cy="46.396264"
inkscape:window-x="69"
inkscape:window-y="30"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><rect
x="-0.017525015"
y="33.438038"
style="opacity:0.35714285;fill:#decd87;fill-opacity:1;stroke-width:0.70710677"
width="15.8115"
height="15.049"
id="rect69" /><path
style="opacity:0.42857145;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 16.874036,24.263391 v -7.46822 h 7.891949 7.891949 v 7.46822 7.46822 h -7.891949 -7.891949 z"
id="path4883"
inkscape:connector-curvature="0" /><path
style="opacity:0.79365079;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 33.69883,24.337252 v -7.46822 h 7.891949 7.891949 v 7.46822 7.46822 H 41.590779 33.69883 Z"
id="path4885"
inkscape:connector-curvature="0" /><path
style="opacity:0.80952382;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 50.523624,24.337251 v -7.46822 h 7.891949 7.89195 v 7.46822 7.46822 h -7.89195 -7.891949 z"
id="path4887"
inkscape:connector-curvature="0" /><path
style="opacity:0.43650794;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 67.348418,24.167764 v -7.46822 h 7.891949 7.891949 v 7.46822 7.46822 h -7.891949 -7.891949 z"
id="path4889"
inkscape:connector-curvature="0" /><path
style="opacity:0.24603176;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 84.173218,24.279957 v -7.46822 h 7.891947 7.891956 v 7.46822 7.46822 h -7.891956 -7.891947 z"
id="path4891"
inkscape:connector-curvature="0" /><path
style="opacity:0.38158725;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 84.226177,40.968612 v -7.46822 h 7.891949 7.891954 v 7.46822 7.468221 h -7.891954 -7.891949 z"
id="path4893"
inkscape:connector-curvature="0" /><path
style="opacity:0.75396824;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 67.377433,40.884464 v -7.46822 h 7.891949 7.891949 v 7.46822 7.468221 h -7.891949 -7.891949 z"
id="path4895"
inkscape:connector-curvature="0" /><path
style="opacity:0.94444442;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 50.528693,41.011582 v -7.46822 h 7.891949 7.89195 v 7.46822 7.468221 h -7.89195 -7.891949 z"
id="path4897"
inkscape:connector-curvature="0" /><path
style="opacity:0.53174606;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 33.679956,41.011587 v -7.46822 h 7.891949 7.891949 v 7.46822 7.468221 h -7.891949 -7.891949 z"
id="path4899"
inkscape:connector-curvature="0" /><path
style="opacity:0.64285715;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 16.831216,40.956187 v -7.46822 h 7.891949 7.891949 v 7.46822 7.468221 h -7.891949 -7.891949 z"
id="path4901"
inkscape:connector-curvature="0" /><path
style="opacity:0.58730158;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 0.04924114,57.615687 v -7.46822 H 7.8882241 15.727207 v 7.46822 7.468221 H 7.8882241 0.04924114 Z"
id="path4905"
inkscape:connector-curvature="0" /><path
style="opacity:0.43650794;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 16.884627,57.648974 v -7.46822 h 7.838984 7.838983 v 7.46822 7.468221 h -7.838983 -7.838984 z"
id="path4907"
inkscape:connector-curvature="0" /><path
style="opacity:1;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 67.390785,57.601163 v -7.46822 h 7.891949 7.891949 v 7.46822 7.468221 h -7.891949 -7.891949 z"
id="path4913"
inkscape:connector-curvature="0" /><path
style="opacity:0.29365079;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 84.226177,57.657262 v -7.46822 h 7.891947 7.891946 v 7.46822 7.468221 h -7.891946 -7.891947 z"
id="path4915"
inkscape:connector-curvature="0" /><path
style="opacity:0.73015873;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 84.226177,74.345913 v -7.46822 h 7.891948 7.891955 v 7.46822 7.468221 h -7.891955 -7.891948 z"
id="path4917"
inkscape:connector-curvature="0" /><path
style="opacity:0.58730158;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 67.380199,74.317863 v -7.46822 h 7.891949 7.891949 v 7.46822 7.468221 h -7.891949 -7.891949 z"
id="path4919"
inkscape:connector-curvature="0" /><path
style="opacity:0.66666667;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 50.534214,74.360232 v -7.46822 h 7.891949 7.89195 v 7.46822 7.468221 h -7.89195 -7.891949 z"
id="path4921"
inkscape:connector-curvature="0" /><path
style="opacity:0.84920636;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 33.688232,74.360242 v -7.46822 h 7.891949 7.891949 v 7.46822 7.468221 h -7.891949 -7.891949 z"
id="path4923"
inkscape:connector-curvature="0" /><path
style="opacity:0.70634921;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 16.842256,74.341769 v -7.46822 h 7.891949 7.891949 v 7.46822 7.468221 h -7.891949 -7.891949 z"
id="path4925"
inkscape:connector-curvature="0" /><path
style="opacity:0.43650794;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="M -0.00372516,74.325127 V 66.856906 H 7.8882239 15.780174 v 7.468221 7.46822 H 7.8882239 -0.00372516 Z"
id="path4927"
inkscape:connector-curvature="0" /><path
style="opacity:0.13492061;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="M 0.04924124,91.034564 V 83.566343 H 7.8882241 15.727207 v 7.468221 7.468221 H 7.8882241 0.04924114 Z"
id="path4929"
inkscape:connector-curvature="0" /><path
style="opacity:0.26190479;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="M 16.88187,91.034561 V 83.56634 h 7.838983 7.838984 v 7.468221 7.468224 h -7.838983 -7.838983 z"
id="path4931"
inkscape:connector-curvature="0" /><path
style="opacity:0.58730158;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 33.714496,91.034569 v -7.468221 h 7.891949 7.891949 v 7.468221 7.468216 h -7.891949 -7.891949 z"
id="path4933"
inkscape:connector-curvature="0" /><path
style="opacity:0.30158727;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="M 50.547126,91.034561 V 83.56634 h 7.891949 7.89195 v 7.468221 7.468224 h -7.89195 -7.891949 z"
id="path4935"
inkscape:connector-curvature="0" /><path
style="opacity:0.15873018;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 67.379756,91.034564 v -7.468221 h 7.891949 7.891949 v 7.468221 7.468221 h -7.891949 -7.891949 z"
id="path4937"
inkscape:connector-curvature="0" /><path
style="opacity:0.11904764;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 84.212376,91.034568 v -7.468221 h 7.891952 7.89195 v 7.468221 7.468217 h -7.89195 -7.891952 z"
id="path4939"
inkscape:connector-curvature="0" /><path
style="opacity:0.89682539;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 50.555398,57.68591 v -7.46822 h 7.838983 7.838983 v 7.46822 7.468221 h -7.838983 -7.838983 z"
id="path4941"
inkscape:connector-curvature="0" /><path
style="opacity:1;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 33.720011,57.685908 v -7.46822 h 7.838983 7.838983 v 7.46822 7.468221 h -7.838983 -7.838983 z"
id="path4943"
inkscape:connector-curvature="0" /><path
style="opacity:0.16666667;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="M 0.04924152,24.249783 V 16.728597 H 7.8882245 15.727207 v 7.521186 7.521186 H 7.8882245 0.04924152 Z"
id="path4976"
inkscape:connector-curvature="0" /><rect
x="16.900255"
y="0.10238234"
style="opacity:0.43650794;fill:#decd87;fill-opacity:1;stroke-width:0.70710677"
width="15.8115"
height="15.049"
id="rect69-5-7-3" /><rect
x="84.304306"
y="0.12308588"
style="opacity:0.11904764;fill:#decd87;fill-opacity:1;stroke-width:0.70710677"
width="15.8115"
height="15.049"
id="rect69-5-2-2-6" /><path
style="opacity:0.3174603;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="M 33.751268,7.6629239 V 0.19470386 h 7.891949 7.891949 V 7.6629239 15.131142 h -7.891949 -7.891949 z"
id="path4885-1"
inkscape:connector-curvature="0" /><path
style="opacity:0.43650794;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="M 50.602281,7.6629315 V 0.19471149 h 7.891949 7.891951 V 7.6629315 15.13115 H 58.49423 50.602281 Z"
id="path4887-2"
inkscape:connector-curvature="0" /><path
style="opacity:0.73015873;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="m 67.453295,7.4510673 v -7.4682202 h 7.89195 7.89195 v 7.4682202 7.4682177 h -7.89195 -7.89195 z"
id="path4889-9"
inkscape:connector-curvature="0" /><path
style="opacity:0.15873018;fill:#decd87;fill-opacity:1;stroke-width:0.10593221"
d="M -0.02566414,7.5403525 V 0.0191665 H 7.8133188 15.652302 v 7.521186 7.5211835 H 7.8133188 -0.02566414 Z"
id="path4976-3"
inkscape:connector-curvature="0" /></svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path d="M-0.2-0.2v100.4h100.4V-0.2H-0.2z M13.7,1.4H24v10H13.7V1.4z M13.7,13.9H24v10H13.7V13.9z M13.7,26.3H24v10H13.7V26.3z
M13.7,38.8H24v10H13.7V38.8z M11.7,98.5H1.3v-10h10.4V98.5z M11.7,86.1H1.3v-10h10.4V86.1z M11.7,73.6H1.3v-10h10.4V73.6z
M11.7,61.2H1.3v-10h10.4V61.2z M11.7,48.8H1.3v-10h10.4V48.8z M11.7,36.3H1.3v-10h10.4V36.3z M11.7,23.9H1.3v-10h10.4V23.9z
M11.7,11.4H1.3v-10h10.4V11.4z M24,98.5H13.7v-10H24V98.5z M24,86.1H13.7v-10H24V86.1z M24,73.6H13.7v-10H24V73.6z M24.1,61.2
H13.8v-10h10.4V61.2z M36.5,98.5H26.1v-10h10.4V98.5z M36.5,86.1H26.1v-10h10.4V86.1z M36.5,73.6H26.1v-10h10.4V73.6z M36.5,61.2
H26.1v-10h10.4V61.2z M36.5,48.8H26.1v-10h10.4V48.8z M36.5,36.3H26.1v-10h10.4V36.3z M36.5,23.9H26.1v-10h10.4V23.9z M36.5,11.4
H26.1v-10h10.4V11.4z M48.9,98.5H38.5v-10h10.4V98.5z M48.9,86.1H38.5v-10h10.4V86.1z M48.9,73.6H38.5v-10h10.4V73.6z M48.9,61.2
H38.5v-10h10.4V61.2z M48.9,48.8H38.5v-10h10.4V48.8z M48.9,36.3H38.5v-10h10.4V36.3z M48.9,23.9H38.5v-10h10.4V23.9z M48.9,11.4
H38.5v-10h10.4V11.4z M50.9,26.3h10.4v10H50.9V26.3z M51,63.6h10.4v10H51V63.6z M61.3,98.5H51v-10h10.4V98.5z M61.3,86.1H51v-10
h10.4V86.1z M61.3,61.2H51v-10h10.4V61.2z M61.3,48.8H51v-10h10.4V48.8z M61.3,23.9H51v-10h10.4V23.9z M61.3,11.4H51v-10h10.4V11.4
z M73.8,98.5H63.4v-10h10.4V98.5z M73.8,86.1H63.4v-10h10.4V86.1z M73.8,73.6H63.4v-10h10.4V73.6z M73.8,61.2H63.4v-10h10.4V61.2z
M73.8,48.8H63.4v-10h10.4V48.8z M73.8,36.3H63.4v-10h10.4V36.3z M73.8,23.9H63.4v-10h10.4V23.9z M73.8,11.4H63.4v-10h10.4V11.4z
M86.2,98.5H75.8v-10h10.4V98.5z M86.2,86.1H75.8v-10h10.4V86.1z M86.2,73.6H75.8v-10h10.4V73.6z M86.2,61.2H75.8v-10h10.4V61.2z
M86.2,48.8H75.8v-10h10.4V48.8z M86.2,36.3H75.8v-10h10.4V36.3z M86.2,23.9H75.8v-10h10.4V23.9z M86.2,11.4H75.8v-10h10.4V11.4z
M98.6,98.5H88.3v-10h10.4V98.5z M98.6,86.1H88.3v-10h10.4V86.1z M98.6,73.6H88.3v-10h10.4V73.6z M98.6,61.2H88.3v-10h10.4V61.2z
M98.6,48.8H88.3v-10h10.4V48.8z M98.6,36.3H88.3v-10h10.4V36.3z M98.6,23.9H88.3v-10h10.4V23.9z M98.6,11.4H88.3v-10h10.4V11.4z"
/>
<rect x="26.1" y="1.4" fill="#0062A7" width="10.4" height="10"/>
<rect x="26.1" y="13.9" fill="#1A83BD" width="10.4" height="10"/>
<rect x="26.1" y="26.3" fill="#B2DBB9" width="10.4" height="10"/>
<rect x="26.1" y="38.8" fill="#B2DBB9" width="10.4" height="10"/>
<rect x="26.1" y="88.5" fill="#0062A7" width="10.4" height="10"/>
<rect x="26.1" y="51.2" fill="#E3F1DC" width="10.4" height="10"/>
<rect x="13.8" y="51.2" fill="#E3F1DC" width="10.4" height="10"/>
<rect x="26.1" y="63.6" fill="#60C0CB" width="10.4" height="10"/>
<rect x="26.1" y="76.1" fill="#1A83BD" width="10.4" height="10"/>
<rect x="1.3" y="1.4" fill="#1A83BD" width="10.4" height="10"/>
<rect x="1.3" y="13.9" fill="#39A4CB" width="10.4" height="10"/>
<rect x="1.3" y="26.3" fill="#39A4CB" width="10.4" height="10"/>
<rect x="1.3" y="38.8" fill="#60C0CB" width="10.4" height="10"/>
<rect x="1.3" y="88.5" fill="#0062A7" width="10.4" height="10"/>
<rect x="1.3" y="51.2" fill="#8CD0BC" width="10.4" height="10"/>
<rect x="1.3" y="63.6" fill="#0062A7" width="10.4" height="10"/>
<rect x="1.3" y="76.1" fill="#1A83BD" width="10.4" height="10"/>
<rect x="13.7" y="1.4" fill="#1A83BD" width="10.4" height="10"/>
<rect x="13.7" y="13.9" fill="#1A83BD" width="10.4" height="10"/>
<rect x="13.7" y="26.3" fill="#39A4CB" width="10.4" height="10"/>
<rect x="13.7" y="38.8" fill="#60C0CB" width="10.4" height="10"/>
<rect x="13.7" y="88.5" fill="#1A83BD" width="10.4" height="10"/>
<rect x="13.7" y="63.6" fill="#60C0CB" width="10.4" height="10"/>
<rect x="13.7" y="76.1" fill="#60C0CB" width="10.4" height="10"/>
<rect x="38.5" y="1.4" fill="#1A83BD" width="10.4" height="10"/>
<rect x="38.5" y="13.9" fill="#60C0CB" width="10.4" height="10"/>
<rect x="38.5" y="26.3" fill="#8CD0BC" width="10.4" height="10"/>
<rect x="38.5" y="38.8" fill="#8CD0BC" width="10.4" height="10"/>
<rect x="38.5" y="88.5" fill="#0062A7" width="10.4" height="10"/>
<rect x="38.5" y="51.2" fill="#B2DBB9" width="10.4" height="10"/>
<rect x="38.5" y="63.6" fill="#8CD0BC" width="10.4" height="10"/>
<rect x="38.5" y="76.1" fill="#0062A7" width="10.4" height="10"/>
<rect x="51" y="1.4" fill="#0062A7" width="10.4" height="10"/>
<rect x="51" y="13.9" fill="#39A4CB" width="10.4" height="10"/>
<rect x="51" y="38.8" fill="#8CD0BC" width="10.4" height="10"/>
<rect x="51" y="88.5" fill="#1A83BD" width="10.4" height="10"/>
<rect x="51" y="51.2" fill="#E3F1DC" width="10.4" height="10"/>
<rect x="51" y="76.1" fill="#8CD0BC" width="10.4" height="10"/>
<rect x="63.4" y="1.4" fill="#0062A7" width="10.4" height="10"/>
<rect x="63.4" y="13.9" fill="#39A4CB" width="10.4" height="10"/>
<rect x="63.4" y="26.3" fill="#60C0CB" width="10.4" height="10"/>
<rect x="50.9" y="26.3" fill="#60C0CB" width="10.4" height="10"/>
<rect x="63.4" y="38.8" fill="#B2DBB9" width="10.4" height="10"/>
<rect x="63.4" y="88.5" fill="#0062A7" width="10.4" height="10"/>
<rect x="63.4" y="51.2" fill="#E3F1DC" width="10.4" height="10"/>
<rect x="63.4" y="63.6" fill="#39A4CB" width="10.4" height="10"/>
<rect x="63.4" y="76.1" fill="#39A4CB" width="10.4" height="10"/>
<rect x="75.8" y="1.4" fill="#1A83BD" width="10.4" height="10"/>
<rect x="75.8" y="13.9" fill="#39A4CB" width="10.4" height="10"/>
<rect x="75.8" y="26.3" fill="#60C0CB" width="10.4" height="10"/>
<rect x="75.8" y="38.8" fill="#8CD0BC" width="10.4" height="10"/>
<rect x="75.8" y="88.5" fill="#0062A7" width="10.4" height="10"/>
<rect x="75.8" y="51.2" fill="#E3F1DC" width="10.4" height="10"/>
<rect x="51" y="63.6" fill="#8CD0BC" width="10.4" height="10"/>
<rect x="75.8" y="63.6" fill="#60C0CB" width="10.4" height="10"/>
<rect x="75.8" y="76.1" fill="#1A83BD" width="10.4" height="10"/>
<rect x="88.3" y="13.9" fill="#39A4CB" width="10.4" height="10"/>
<rect x="88.3" y="26.3" fill="#39A4CB" width="10.4" height="10"/>
<rect x="88.3" y="38.8" fill="#1A83BD" width="10.4" height="10"/>
<rect x="88.3" y="88.5" fill="#1A83BD" width="10.4" height="10"/>
<rect x="88.3" y="51.2" fill="#8CD0BC" width="10.4" height="10"/>
<rect x="88.3" y="63.6" fill="#1A83BD" width="10.4" height="10"/>
<rect x="88.3" y="76.1" fill="#0062A7" width="10.4" height="10"/>
<rect x="88.3" y="1.4" fill="#0062A7" width="10.4" height="10"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

1
public/app/plugins/panel/heatmap/module.html
View File

@@ -7,6 +7,5 @@
<div class="heatmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
</div>
<!-- <div class="graph-legend-wrapper" ng-if="ctrl.panel.legend.show" heatmap-legend></div> -->
</div>
<div class="clearfix"></div>

130
public/app/plugins/panel/heatmap/partials/axes_editor.html
View File

@@ -1,95 +1,91 @@
<div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Y Axis</h5>
<gf-form-switch class="gf-form" label-class="width-5"
label="Show"
checked="ctrl.panel.yAxis.show" on-change="ctrl.render()">
</gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-5">Unit</label>
<div class="gf-form-dropdown-typeahead max-width-15"
ng-model="ctrl.panel.yAxis.format"
dropdown-typeahead2="editor.unitFormats"
dropdown-typeahead-on-select="editor.setUnitFormat($subItem)">
<label class="gf-form-label width-6">Unit</label>
<div class="gf-form-dropdown-typeahead max-width-10"
ng-model="ctrl.panel.yAxis.format"
dropdown-typeahead2="editor.unitFormats"
dropdown-typeahead-on-select="editor.setUnitFormat($subItem)">
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-5">Scale</label>
<div class="gf-form-select-wrapper max-width-15">
<label class="gf-form-label width-6">Scale</label>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input" ng-model="ctrl.panel.yAxis.logBase" ng-options="v as k for (k, v) in editor.logScales" ng-change="ctrl.refresh()"></select>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-10">
<label class="gf-form-label width-5">Y-Min</label>
<input type="text" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.min" ng-change="ctrl.render()" ng-model-onblur>
</div>
<div class="gf-form max-width-10">
<label class="gf-form-label width-5">Y-Max</label>
<input type="text" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.max" ng-change="ctrl.render()" ng-model-onblur>
</div>
<div class="gf-form">
<label class="gf-form-label width-6">Y-Min</label>
<input type="text" class="gf-form-input width-10" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.min" ng-change="ctrl.render()" ng-model-onblur>
</div>
<div class="gf-form">
<label class="gf-form-label width-10">Decimals</label>
<input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right"
bs-tooltip="'Override automatic decimal precision for axis.'"
ng-model="ctrl.panel.yAxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
<label class="gf-form-label width-6">Y-Max</label>
<input type="text" class="gf-form-input width-10" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.max" ng-change="ctrl.render()" ng-model-onblur>
</div>
<div class="gf-form">
<label class="gf-form-label width-6">Decimals</label>
<input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right"
bs-tooltip="'Override automatic decimal precision for axis.'"
ng-model="ctrl.panel.yAxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
</div>
</div>
<div class="section gf-form-group" ng-if="ctrl.panel.dataFormat == 'timeseries'">
<h5 class="section-heading">Buckets</h5>
<div ng-show="ctrl.panel.yAxis.logBase === 1">
<div class="gf-form">
<label class="gf-form-label width-10">Buckets</label>
<input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right"
bs-tooltip="'Number of buckets for Y axis.'"
ng-model="ctrl.panel.yBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label">Y Axis</label>
<label class="gf-form-label">Buckets</label>
<input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right"
bs-tooltip="'Number of buckets for Y axis.'"
ng-model="ctrl.panel.yBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<div class="gf-form">
<label class="gf-form-label">Size</label>
<input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right"
bs-tooltip="'Size of bucket. Has priority over Buckets option.'"
ng-model="ctrl.panel.yBucketSize" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-10">Bucket Size</label>
<input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right"
bs-tooltip="'Size of bucket. Has priority over Buckets option.'"
ng-model="ctrl.panel.yBucketSize" ng-change="ctrl.refresh()" ng-model-onblur>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label">X Axis</label>
<label class="gf-form-label">Buckets</label>
<input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right"
bs-tooltip="'Number of buckets for Y axis.'"
ng-model="ctrl.panel.yBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<div class="gf-form">
<label class="gf-form-label">Size</label>
<input type="text" class="gf-form-input width-5" placeholder="auto" data-placement="right"
bs-tooltip="'Size of bucket. Number or interval (10s, 5m, 1h, etc). Supported intervals: ms, s, m, h, d, w, M, y. Has priority over Buckets option.'"
ng-model="ctrl.panel.xBucketSize" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
</div>
</div>
<div ng-show="ctrl.panel.yAxis.logBase !== 1">
<div class="gf-form">
<label class="gf-form-label width-10">Split Buckets</label>
<input type="number" class="gf-form-input width-10" placeholder="1" data-placement="right"
bs-tooltip="'For log scales only. By default Y values is splitted by integer powers of log base (1, 2, 4, 8, 16, ... for log2). This option allows to split each default bucket into specified number of buckets.'"
ng-model="ctrl.panel.yAxis.splitFactor" ng-change="ctrl.refresh()" ng-model-onblur>
<label class="gf-form-label width-7">Split Factor</label>
<input type="number"
class="gf-form-input width-3"
placeholder="1"
data-placement="right"
bs-tooltip="'For log scales only. By default Y values is splitted by integer powers of log base (1, 2, 4, 8, 16, ... for log2). This option allows to split each default bucket into specified number of buckets.'"
ng-model="ctrl.panel.yAxis.splitFactor" ng-change="ctrl.refresh()" ng-model-onblur>
</input>
</div>
<gf-form-switch class="gf-form" label-class="width-10"
label="Remove zero values"
checked="ctrl.panel.yAxis.removeZeroValues" on-change="ctrl.render()">
</gf-form-switch>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">X Axis</h5>
<gf-form-switch class="gf-form" label-class="width-8"
label="Show"
checked="ctrl.panel.xAxis.show" on-change="ctrl.render()">
</gf-form-switch>
<h5 class="section-heading">Data format</h5>
<div class="gf-form">
<label class="gf-form-label width-8">Buckets</label>
<input type="number" class="gf-form-input width-8" placeholder="auto" data-placement="right"
bs-tooltip="'Number of buckets for X axis.'"
ng-model="ctrl.panel.xBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Bucket Size</label>
<input type="text" class="gf-form-input width-8" placeholder="auto" data-placement="right"
bs-tooltip="'Size of bucket. Number or interval (10s, 5m, 1h, etc). Supported intervals: ms, s, m, h, d, w, M, y. Has priority over Buckets option.'"
ng-model="ctrl.panel.xBucketSize" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Data format</h5>
<div class="gf-form">
<label class="gf-form-label width-5">Format</label>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="ctrl.panel.dataFormat" ng-options="v as k for (k, v) in editor.dataFormats" ng-change="ctrl.render()"></select>
<label class="gf-form-label width-5">Format</label>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="ctrl.panel.dataFormat" ng-options="v as k for (k, v) in editor.dataFormats" ng-change="ctrl.render()"></select>
</div>
</div>
</div>
</div>
</div>

26
public/app/plugins/panel/heatmap/partials/display_editor.html
View File

@@ -2,51 +2,49 @@
<div class="section gf-form-group">
<h5 class="section-heading">Colors</h5>
<div class="gf-form">
<label class="gf-form-label width-7">Mode</label>
<div class="gf-form-select-wrapper width-12">
<label class="gf-form-label width-9">Mode</label>
<div class="gf-form-select-wrapper width-8">
<select class="input-small gf-form-input" ng-model="ctrl.panel.color.mode" ng-options="s for s in ctrl.colorModes" ng-change="ctrl.render()"></select>
</div>
</div>
<div ng-show="ctrl.panel.color.mode === 'opacity'">
<div class="gf-form">
<label class="gf-form-label width-7">Color</label>
<label class="gf-form-label width-9">Color</label>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.color.cardColor" ng-change="ctrl.render()" ></spectrum-picker>
</span>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">Scale</label>
<label class="gf-form-label width-9">Scale</label>
<div class="gf-form-select-wrapper width-8">
<select class="input-small gf-form-input" ng-model="ctrl.panel.color.colorScale" ng-options="s for s in ctrl.opacityScales" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form" ng-if="ctrl.panel.color.colorScale === 'sqrt'">
<label class="gf-form-label width-7">Exponent</label>
<label class="gf-form-label width-9">Exponent</label>
<input type="number" class="gf-form-input width-8" placeholder="auto" data-placement="right" bs-tooltip="''" ng-model="ctrl.panel.color.exponent" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<div class="gf-form">
<svg id="heatmap-opacity-legend" width="22.7em" height="2em"></svg>
<svg id="heatmap-opacity-legend" width="19em" height="2em"></svg>
</div>
</div>
<div ng-show="ctrl.panel.color.mode === 'spectrum'">
<div class="gf-form">
<label class="gf-form-label width-7">Scheme</label>
<div class="gf-form-select-wrapper width-12">
<label class="gf-form-label width-9">Scheme</label>
<div class="gf-form-select-wrapper width-8">
<select class="input-small gf-form-input" ng-model="ctrl.panel.color.colorScheme" ng-options="s.value as s.name for s in ctrl.colorSchemes" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form">
<svg id="heatmap-color-legend" width="22.7em" height="2em"></svg>
<svg id="heatmap-color-legend" width="19em" height="2em"></svg>
</div>
<gf-form-switch class="gf-form" label-class="width-9" label="Fill background" checked="ctrl.panel.color.fillBackground" on-change="ctrl.render()">
</gf-form-switch>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Cards</h5>
<h5 class="section-heading">Buckets</h5>
<div class="gf-form">
<label class="gf-form-label width-8">Space</label>
<input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-model="ctrl.panel.cards.cardPadding" ng-change="ctrl.refresh()" ng-model-onblur>
@@ -64,10 +62,6 @@
checked="ctrl.panel.tooltip.show" on-change="ctrl.render()">
</gf-form-switch>
<div ng-if="ctrl.panel.tooltip.show">
<gf-form-switch class="gf-form" label-class="width-8"
label="Highlight cards"
checked="ctrl.panel.highlightCards" on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form" label-class="width-8"
label="Series stats"
checked="ctrl.panel.tooltip.seriesStat" on-change="ctrl.render()">

169
public/app/plugins/panel/heatmap/rendering.ts
View File

@@ -376,10 +376,6 @@ export default function link(scope, elem, attrs, ctrl) {
setOpacityScale(max_value);
setCardSize();
if (panel.color.fillBackground && panel.color.mode === 'spectrum') {
fillBackground(heatmap, colorScale(0));
}
let cards = heatmap.selectAll(".heatmap-card").data(cardsData);
cards.append("title");
cards = cards.enter().append("rect")
@@ -407,24 +403,20 @@ export default function link(scope, elem, attrs, ctrl) {
}
function highlightCard(event) {
if (panel.highlightCards) {
let color = d3.select(event.target).style("fill");
let highlightColor = d3.color(color).darker(2);
let strokeColor = d3.color(color).brighter(4);
let current_card = d3.select(event.target);
tooltip.originalFillColor = color;
current_card.style("fill", highlightColor)
.style("stroke", strokeColor)
.style("stroke-width", 1);
}
let color = d3.select(event.target).style("fill");
let highlightColor = d3.color(color).darker(2);
let strokeColor = d3.color(color).brighter(4);
let current_card = d3.select(event.target);
tooltip.originalFillColor = color;
current_card.style("fill", highlightColor)
.style("stroke", strokeColor)
.style("stroke-width", 1);
}
function resetCardHighLight(event) {
if (panel.highlightCards) {
d3.select(event.target).style("fill", tooltip.originalFillColor)
.style("stroke", tooltip.originalFillColor)
.style("stroke-width", 0);
}
d3.select(event.target).style("fill", tooltip.originalFillColor)
.style("stroke", tooltip.originalFillColor)
.style("stroke-width", 0);
}
function getColorScale(maxValue) {
@@ -442,12 +434,12 @@ export default function link(scope, elem, attrs, ctrl) {
function setOpacityScale(max_value) {
if (panel.color.colorScale === 'linear') {
opacityScale = d3.scaleLinear()
.domain([0, max_value])
.range([0, 1]);
.domain([0, max_value])
.range([0, 1]);
} else if (panel.color.colorScale === 'sqrt') {
opacityScale = d3.scalePow().exponent(panel.color.exponent)
.domain([0, max_value])
.range([0, 1]);
.domain([0, max_value])
.range([0, 1]);
}
}
@@ -549,15 +541,6 @@ export default function link(scope, elem, attrs, ctrl) {
}
}
function fillBackground(heatmap, color) {
heatmap.insert("rect", "g")
.attr("x", yAxisWidth)
.attr("y", margin.top)
.attr("width", chartWidth)
.attr("height", chartHeight)
.attr("fill", color);
}
/////////////////////////////
// Selection and crosshair //
/////////////////////////////
@@ -570,12 +553,12 @@ export default function link(scope, elem, attrs, ctrl) {
if (ctrl.dashboard.graphTooltip === 2) {
tooltip.show(event.pos, data);
}
});
}, scope);
appEvents.on('graph-hover-clear', () => {
clearCrosshair();
tooltip.destroy();
});
}, scope);
function onMouseDown(event) {
selection.active = true;
@@ -584,6 +567,7 @@ export default function link(scope, elem, attrs, ctrl) {
mouseUpHandler = function() {
onMouseUp();
};
$(document).one("mouseup", mouseUpHandler);
}
@@ -660,11 +644,11 @@ export default function link(scope, elem, attrs, ctrl) {
if (selectionWidth > MIN_SELECTION_WIDTH) {
heatmap.append("rect")
.attr("class", "heatmap-selection")
.attr("x", selectionX)
.attr("width", selectionWidth)
.attr("y", chartTop)
.attr("height", chartHeight);
.attr("class", "heatmap-selection")
.attr("x", selectionX)
.attr("width", selectionWidth)
.attr("y", chartTop)
.attr("height", chartHeight);
}
}
}
@@ -687,14 +671,14 @@ export default function link(scope, elem, attrs, ctrl) {
posX = Math.min(posX, chartWidth + yAxisWidth);
heatmap.append("g")
.attr("class", "heatmap-crosshair")
.attr("transform", "translate(" + posX + ",0)")
.append("line")
.attr("x1", 1)
.attr("y1", chartTop)
.attr("x2", 1)
.attr("y2", chartBottom)
.attr("stroke-width", 1);
.attr("class", "heatmap-crosshair")
.attr("transform", "translate(" + posX + ",0)")
.append("line")
.attr("x1", 1)
.attr("y1", chartTop)
.attr("x2", 1)
.attr("y2", chartBottom)
.attr("stroke-width", 1);
}
}
@@ -725,14 +709,14 @@ export default function link(scope, elem, attrs, ctrl) {
var legendRects = legend.selectAll(".heatmap-color-legend-rect").data(valuesRange);
legendRects.enter().append("rect")
.attr("x", d => d)
.attr("y", 0)
.attr("width", rangeStep + 1) // Overlap rectangles to prevent gaps
.attr("height", legendHeight)
.attr("stroke-width", 0)
.attr("fill", d => {
return legendColorScale(d);
});
.attr("x", d => d)
.attr("y", 0)
.attr("width", rangeStep + 1) // Overlap rectangles to prevent gaps
.attr("height", legendHeight)
.attr("stroke-width", 0)
.attr("fill", d => {
return legendColorScale(d);
});
}
function drawOpacityLegend() {
@@ -745,12 +729,12 @@ export default function link(scope, elem, attrs, ctrl) {
let legendOpacityScale;
if (panel.color.colorScale === 'linear') {
legendOpacityScale = d3.scaleLinear()
.domain([0, legendWidth])
.range([0, 1]);
.domain([0, legendWidth])
.range([0, 1]);
} else if (panel.color.colorScale === 'sqrt') {
legendOpacityScale = d3.scalePow().exponent(panel.color.exponent)
.domain([0, legendWidth])
.range([0, 1]);
.domain([0, legendWidth])
.range([0, 1]);
}
let rangeStep = 1;
@@ -758,15 +742,15 @@ export default function link(scope, elem, attrs, ctrl) {
var legendRects = legend.selectAll(".heatmap-opacity-legend-rect").data(valuesRange);
legendRects.enter().append("rect")
.attr("x", d => d)
.attr("y", 0)
.attr("width", rangeStep)
.attr("height", legendHeight)
.attr("stroke-width", 0)
.attr("fill", panel.color.cardColor)
.style("opacity", d => {
return legendOpacityScale(d);
});
.attr("x", d => d)
.attr("y", 0)
.attr("width", rangeStep)
.attr("height", legendHeight)
.attr("stroke-width", 0)
.attr("fill", panel.color.cardColor)
.style("opacity", d => {
return legendOpacityScale(d);
});
}
function render() {
@@ -774,34 +758,26 @@ export default function link(scope, elem, attrs, ctrl) {
panel = ctrl.panel;
timeRange = ctrl.range;
if (setElementHeight()) {
if (data) {
// Draw default axes and return if no data
if (_.isEmpty(data.buckets)) {
addHeatmapCanvas();
addAxes();
return;
}
addHeatmap();
scope.yScale = yScale;
scope.xScale = xScale;
scope.yAxisWidth = yAxisWidth;
scope.xAxisHeight = xAxisHeight;
scope.chartHeight = chartHeight;
scope.chartWidth = chartWidth;
scope.chartTop = chartTop;
// Register selection listeners
$heatmap.on("mousedown", onMouseDown);
$heatmap.on("mousemove", onMouseMove);
$heatmap.on("mouseleave", onMouseLeave);
} else {
return;
}
if (!setElementHeight() || !data) {
return;
}
// Draw default axes and return if no data
if (_.isEmpty(data.buckets)) {
addHeatmapCanvas();
addAxes();
return;
}
addHeatmap();
scope.yScale = yScale;
scope.xScale = xScale;
scope.yAxisWidth = yAxisWidth;
scope.xAxisHeight = xAxisHeight;
scope.chartHeight = chartHeight;
scope.chartWidth = chartWidth;
scope.chartTop = chartTop;
// Draw only if color editor is opened
if (!d3.select("#heatmap-color-legend").empty()) {
drawColorLegend();
@@ -810,6 +786,11 @@ export default function link(scope, elem, attrs, ctrl) {
drawOpacityLegend();
}
}
// Register selection listeners
$heatmap.on("mousedown", onMouseDown);
$heatmap.on("mousemove", onMouseMove);
$heatmap.on("mouseleave", onMouseLeave);
}
function grafanaTimeFormat(ticks, min, max) {