From 97ac81aa9ccfacecb42b517ebb6c6cb7d1bc7264 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 27 Jan 2016 19:07:39 -0500 Subject: [PATCH] feat(panels): upgradede singlestat panel --- pkg/api/frontendsettings.go | 1 + public/app/features/panel/panel_editor_tab.ts | 1 + .../plugins/panel/singlestat/controller.ts | 397 +++++++++--------- .../app/plugins/panel/singlestat/editor.html | 68 +-- .../app/plugins/panel/singlestat/module.html | 8 +- public/app/plugins/panel/singlestat/module.ts | 362 ++++++++-------- 6 files changed, 421 insertions(+), 416 deletions(-) diff --git a/pkg/api/frontendsettings.go b/pkg/api/frontendsettings.go index 256ff15e881..0759f1e83b8 100644 --- a/pkg/api/frontendsettings.go +++ b/pkg/api/frontendsettings.go @@ -123,6 +123,7 @@ func getFrontendSettingsMap(c *middleware.Context) (map[string]interface{}, erro panels[panel.Id] = map[string]interface{}{ "module": panel.Module, "name": panel.Name, + "id": panel.Id, "info": panel.Info, } } diff --git a/public/app/features/panel/panel_editor_tab.ts b/public/app/features/panel/panel_editor_tab.ts index f6c11306678..ae896d1c0ae 100644 --- a/public/app/features/panel/panel_editor_tab.ts +++ b/public/app/features/panel/panel_editor_tab.ts @@ -16,6 +16,7 @@ function panelEditorTab(dynamicDirectiveSrv) { directive: scope => { var pluginId = scope.ctrl.pluginId; var tabIndex = scope.index; + console.log('tab plugnId:', pluginId); return Promise.resolve({ name: `panel-editor-tab-${pluginId}${tabIndex}`, diff --git a/public/app/plugins/panel/singlestat/controller.ts b/public/app/plugins/panel/singlestat/controller.ts index 4b55a4568be..f47e7f12d93 100644 --- a/public/app/plugins/panel/singlestat/controller.ts +++ b/public/app/plugins/panel/singlestat/controller.ts @@ -3,240 +3,233 @@ import angular from 'angular'; import _ from 'lodash'; import kbn from 'app/core/utils/kbn'; -import PanelMeta from 'app/features/panel/panel_meta2'; import TimeSeries from '../../../core/time_series2'; +import {MetricsPanelCtrl} from '../../../features/panel/panel'; -export class SingleStatCtrl { +// Set and populate defaults +var panelDefaults = { + links: [], + datasource: null, + maxDataPoints: 100, + interval: null, + targets: [{}], + cacheTimeout: null, + format: 'none', + prefix: '', + postfix: '', + nullText: null, + valueMaps: [ + { value: 'null', op: '=', text: 'N/A' } + ], + nullPointMode: 'connected', + valueName: 'avg', + prefixFontSize: '50%', + valueFontSize: '80%', + postfixFontSize: '50%', + thresholds: '', + colorBackground: false, + colorValue: false, + colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"], + sparkline: { + show: false, + full: false, + lineColor: 'rgb(31, 120, 193)', + fillColor: 'rgba(31, 118, 189, 0.18)', + } +}; + +export class SingleStatCtrl extends MetricsPanelCtrl { + series: any[]; + data: any[]; + fontSizes: any[]; + unitFormats: any[]; /** @ngInject */ - constructor($scope, panelSrv, panelHelper) { - $scope.panelMeta = new PanelMeta({ - panelName: 'Singlestat', - editIcon: "fa fa-dashboard", - fullscreen: true, - metricsEditor: true + constructor($scope, $injector) { + super($scope, $injector); + _.defaults(this.panel, panelDefaults); + } + + + initEditMode() { + this.icon = "fa fa-dashboard"; + this.fontSizes = ['20%', '30%','50%','70%','80%','100%', '110%', '120%', '150%', '170%', '200%']; + + this.addEditorTab('Options', 'app/plugins/panel/singlestat/editor.html'); + this.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html'); + + this.unitFormats = kbn.getUnitFormats(); + } + + setUnitFormat(subItem) { + this.panel.format = subItem.value; + this.render(); + } + + refreshData(datasource) { + return this.issueQueries(datasource) + .then(this.dataHandler.bind(this)) + .catch(err => { + this.series = []; + this.render(); + throw err; + }); + } + + loadSnapshot(snapshotData) { + this.updateTimeRange(); + this.dataHandler(snapshotData); + } + + dataHandler(results) { + this.series = _.map(results.data, this.seriesHandler.bind(this)); + this.render(); + } + + seriesHandler(seriesData) { + var series = new TimeSeries({ + datapoints: seriesData.datapoints, + alias: seriesData.target, }); - $scope.fontSizes = ['20%', '30%','50%','70%','80%','100%', '110%', '120%', '150%', '170%', '200%']; + series.flotpairs = series.getFlotPairs(this.panel.nullPointMode); + return series; + } - $scope.panelMeta.addEditorTab('Options', 'app/plugins/panel/singlestat/editor.html'); - $scope.panelMeta.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html'); + setColoring(options) { + if (options.background) { + this.panel.colorValue = false; + this.panel.colors = ['rgba(71, 212, 59, 0.4)', 'rgba(245, 150, 40, 0.73)', 'rgba(225, 40, 40, 0.59)']; + } else { + this.panel.colorBackground = false; + this.panel.colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)']; + } + this.render(); + } - // Set and populate defaults - var _d = { - links: [], - datasource: null, - maxDataPoints: 100, - interval: null, - targets: [{}], - cacheTimeout: null, - format: 'none', - prefix: '', - postfix: '', - nullText: null, - valueMaps: [ - { value: 'null', op: '=', text: 'N/A' } - ], - nullPointMode: 'connected', - valueName: 'avg', - prefixFontSize: '50%', - valueFontSize: '80%', - postfixFontSize: '50%', - thresholds: '', - colorBackground: false, - colorValue: false, - colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"], - sparkline: { - show: false, - full: false, - lineColor: 'rgb(31, 120, 193)', - fillColor: 'rgba(31, 118, 189, 0.18)', + invertColorOrder() { + var tmp = this.panel.colors[0]; + this.panel.colors[0] = this.panel.colors[2]; + this.panel.colors[2] = tmp; + this.render(); + } + + getDecimalsForValue(value) { + if (_.isNumber(this.panel.decimals)) { + return {decimals: this.panel.decimals, scaledDecimals: null}; + } + + var delta = value / 2; + var dec = -Math.floor(Math.log(delta) / Math.LN10); + + var magn = Math.pow(10, -dec), + norm = delta / magn, // norm is between 1.0 and 10.0 + size; + + if (norm < 1.5) { + size = 1; + } else if (norm < 3) { + size = 2; + // special case for 2.5, requires an extra decimal + if (norm > 2.25) { + size = 2.5; + ++dec; } - }; + } else if (norm < 7.5) { + size = 5; + } else { + size = 10; + } - _.defaults($scope.panel, _d); + size *= magn; - $scope.unitFormats = kbn.getUnitFormats(); + // reduce starting decimals if not needed + if (Math.floor(value) === value) { dec = 0; } - $scope.setUnitFormat = function(subItem) { - $scope.panel.format = subItem.value; - $scope.render(); - }; + var result: any = {}; + result.decimals = Math.max(0, dec); + result.scaledDecimals = result.decimals - Math.floor(Math.log(size) / Math.LN10) + 2; - $scope.init = function() { - panelSrv.init($scope); - }; + return result; + } - $scope.refreshData = function(datasource) { - panelHelper.updateTimeRange($scope); + render() { + var data: any = {}; + this.setValues(data); - return panelHelper.issueMetricQuery($scope, datasource) - .then($scope.dataHandler, function(err) { - $scope.series = []; - $scope.render(); - throw err; - }); - }; + data.thresholds = this.panel.thresholds.split(',').map(function(strVale) { + return Number(strVale.trim()); + }); - $scope.loadSnapshot = function(snapshotData) { - panelHelper.updateTimeRange($scope); - $scope.dataHandler(snapshotData); - }; + data.colorMap = this.panel.colors; - $scope.dataHandler = function(results) { - $scope.series = _.map(results.data, $scope.seriesHandler); - $scope.render(); - }; + this.data = data; + this.broadcastRender(); + } - $scope.seriesHandler = function(seriesData) { - var series = new TimeSeries({ - datapoints: seriesData.datapoints, - alias: seriesData.target, - }); + setValues(data) { + data.flotpairs = []; - series.flotpairs = series.getFlotPairs($scope.panel.nullPointMode); + if (this.series.length > 1) { + this.inspector.error = new Error(); + this.inspector.error.message = 'Multiple Series Error'; + this.inspector.error.data = 'Metric query returns ' + this.series.length + + ' series. Single Stat Panel expects a single series.\n\nResponse:\n'+JSON.stringify(this.series); + throw this.inspector.error; + } - return series; - }; + if (this.series && this.series.length > 0) { + var lastPoint = _.last(this.series[0].datapoints); + var lastValue = _.isArray(lastPoint) ? lastPoint[0] : null; - $scope.setColoring = function(options) { - if (options.background) { - $scope.panel.colorValue = false; - $scope.panel.colors = ['rgba(71, 212, 59, 0.4)', 'rgba(245, 150, 40, 0.73)', 'rgba(225, 40, 40, 0.59)']; + if (_.isString(lastValue)) { + data.value = 0; + data.valueFormated = lastValue; + data.valueRounded = 0; } else { - $scope.panel.colorBackground = false; - $scope.panel.colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)']; + data.value = this.series[0].stats[this.panel.valueName]; + data.flotpairs = this.series[0].flotpairs; + + var decimalInfo = this.getDecimalsForValue(data.value); + var formatFunc = kbn.valueFormats[this.panel.format]; + data.valueFormated = formatFunc(data.value, decimalInfo.decimals, decimalInfo.scaledDecimals); + data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals); } - $scope.render(); - }; + } - $scope.invertColorOrder = function() { - var tmp = $scope.panel.colors[0]; - $scope.panel.colors[0] = $scope.panel.colors[2]; - $scope.panel.colors[2] = tmp; - $scope.render(); - }; - - $scope.getDecimalsForValue = function(value) { - if (_.isNumber($scope.panel.decimals)) { - return { decimals: $scope.panel.decimals, scaledDecimals: null }; - } - - var delta = value / 2; - var dec = -Math.floor(Math.log(delta) / Math.LN10); - - var magn = Math.pow(10, -dec), - norm = delta / magn, // norm is between 1.0 and 10.0 - size; - - if (norm < 1.5) { - size = 1; - } else if (norm < 3) { - size = 2; - // special case for 2.5, requires an extra decimal - if (norm > 2.25) { - size = 2.5; - ++dec; - } - } else if (norm < 7.5) { - size = 5; - } else { - size = 10; - } - - size *= magn; - - // reduce starting decimals if not needed - if (Math.floor(value) === value) { dec = 0; } - - var result: any = {}; - result.decimals = Math.max(0, dec); - result.scaledDecimals = result.decimals - Math.floor(Math.log(size) / Math.LN10) + 2; - - return result; - }; - - $scope.render = function() { - var data: any = {}; - - $scope.setValues(data); - - data.thresholds = $scope.panel.thresholds.split(',').map(function(strVale) { - return Number(strVale.trim()); - }); - - data.colorMap = $scope.panel.colors; - - $scope.data = data; - $scope.$broadcast('render'); - }; - - $scope.setValues = function(data) { - data.flotpairs = []; - - if ($scope.series.length > 1) { - $scope.inspector.error = new Error(); - $scope.inspector.error.message = 'Multiple Series Error'; - $scope.inspector.error.data = 'Metric query returns ' + $scope.series.length + - ' series. Single Stat Panel expects a single series.\n\nResponse:\n'+JSON.stringify($scope.series); - throw $scope.inspector.error; - } - - if ($scope.series && $scope.series.length > 0) { - var lastPoint = _.last($scope.series[0].datapoints); - var lastValue = _.isArray(lastPoint) ? lastPoint[0] : null; - - if (_.isString(lastValue)) { - data.value = 0; - data.valueFormated = lastValue; - data.valueRounded = 0; - } else { - data.value = $scope.series[0].stats[$scope.panel.valueName]; - data.flotpairs = $scope.series[0].flotpairs; - - var decimalInfo = $scope.getDecimalsForValue(data.value); - var formatFunc = kbn.valueFormats[$scope.panel.format]; - data.valueFormated = formatFunc(data.value, decimalInfo.decimals, decimalInfo.scaledDecimals); - data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals); - } - } - - // check value to text mappings - for (var i = 0; i < $scope.panel.valueMaps.length; i++) { - var map = $scope.panel.valueMaps[i]; - // special null case - if (map.value === 'null') { - if (data.value === null || data.value === void 0) { - data.valueFormated = map.text; - return; - } - continue; - } - - // value/number to text mapping - var value = parseFloat(map.value); - if (value === data.value) { + // check value to text mappings + for (var i = 0; i < this.panel.valueMaps.length; i++) { + var map = this.panel.valueMaps[i]; + // special null case + if (map.value === 'null') { + if (data.value === null || data.value === void 0) { data.valueFormated = map.text; return; } + continue; } - if (data.value === null || data.value === void 0) { - data.valueFormated = "no value"; + // value/number to text mapping + var value = parseFloat(map.value); + if (value === data.value) { + data.valueFormated = map.text; + return; } - }; + } - $scope.removeValueMap = function(map) { - var index = _.indexOf($scope.panel.valueMaps, map); - $scope.panel.valueMaps.splice(index, 1); - $scope.render(); - }; + if (data.value === null || data.value === void 0) { + data.valueFormated = "no value"; + } + }; - $scope.addValueMap = function() { - $scope.panel.valueMaps.push({value: '', op: '=', text: '' }); - }; - - $scope.init(); + removeValueMap(map) { + var index = _.indexOf(this.panel.valueMaps, map); + this.panel.valueMaps.splice(index, 1); + this.render(); + }; + addValueMap() { + this.panel.valueMaps.push({value: '', op: '=', text: '' }); } } + diff --git a/public/app/plugins/panel/singlestat/editor.html b/public/app/plugins/panel/singlestat/editor.html index 76c264e7b3a..bf3227f7582 100644 --- a/public/app/plugins/panel/singlestat/editor.html +++ b/public/app/plugins/panel/singlestat/editor.html @@ -10,20 +10,20 @@
  • + ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
  • Value
  • - +
  • Postfix
  • + ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
    • @@ -37,19 +37,19 @@ Prefix
  • - +
  • Value
  • - +
  • Postfix
  • - +
    • @@ -60,16 +60,16 @@ Unit
  • + ng-model="ctrl.panel.format" + dropdown-typeahead="ctrl.unitFormats" + dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)">
  • Decimals
  • + ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur>
    • @@ -86,32 +86,32 @@
  • Background  - - + +
  • Value  - - + +
  • ThresholdsDefine two threshold values<br /> 50,80 will produce: <50 = Green, 50:80 = Yellow, >80 = Red
  • - +
  • Colors
  • - - - + + +
  • - invert order + invert order
    • @@ -128,27 +128,27 @@
  • Show  - - + +
  • Background mode  - - + +
  • Line Color
  • - +
  • Fill Color
  • - +
    • @@ -163,21 +163,21 @@
  • Value to text mapping
    • -
  • - +
  • +
  • - +
  • - +
  • - +
    • diff --git a/public/app/plugins/panel/singlestat/module.html b/public/app/plugins/panel/singlestat/module.html index 748915e6329..599e8724159 100644 --- a/public/app/plugins/panel/singlestat/module.html +++ b/public/app/plugins/panel/singlestat/module.html @@ -1,4 +1,4 @@ - -
    -
    -     +
    + +
    +
    diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index 0a171207bcf..b974a9c117d 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/public/app/plugins/panel/singlestat/module.ts @@ -2,221 +2,226 @@ import _ from 'lodash'; import $ from 'jquery'; -import angular from 'angular'; +import 'jquery.flot'; import {SingleStatCtrl} from './controller'; +import {PanelDirective} from '../../../features/panel/panel'; -angular.module('grafana.directives').directive('singleStatPanel', singleStatPanel); -function singleStatPanel($location, linkSrv, $timeout, templateSrv) { - 'use strict'; - return { - controller: SingleStatCtrl, - templateUrl: 'app/plugins/panel/singlestat/module.html', - link: function(scope, elem) { - var data, panel, linkInfo, $panelContainer; - var firstRender = true; +class SingleStatPanel extends PanelDirective { + templateUrl = 'app/plugins/panel/singlestat/module.html'; + controller = SingleStatCtrl; - scope.$on('render', function() { - if (firstRender) { - var inner = elem.find('.singlestat-panel'); - if (inner.length) { - elem = inner; - $panelContainer = elem.parents('.panel-container'); - firstRender = false; - hookupDrilldownLinkTooltip(); - } - } + /** @ngInject */ + constructor(private $location, private linkSrv, private $timeout, private templateSrv) { + super(); + } - render(); - scope.panelRenderingComplete(); - }); + link(scope, elem, attrs, ctrl) { + var $location = this.$location; + var linkSrv = this.linkSrv; + var $timeout = this.$timeout; + var panel = ctrl.panel; + var templateSrv = this.templateSrv; + var data, linkInfo, $panelContainer; + var firstRender = true; - function setElementHeight() { - try { - var height = scope.height || panel.height || scope.row.height; - if (_.isString(height)) { - height = parseInt(height.replace('px', ''), 10); - } - - height -= 5; // padding - height -= panel.title ? 24 : 9; // subtract panel title bar - - elem.css('height', height + 'px'); - - return true; - } catch (e) { // IE throws errors sometimes - return false; + scope.$on('render', function() { + if (firstRender) { + var inner = elem.find('.singlestat-panel'); + if (inner.length) { + elem = inner; + $panelContainer = elem.parents('.panel-container'); + firstRender = false; + hookupDrilldownLinkTooltip(); } } - function applyColoringThresholds(value, valueString) { - if (!panel.colorValue) { - return valueString; + render(); + ctrl.renderingCompleted(); + }); + + function setElementHeight() { + try { + var height = scope.height || panel.height || ctrl.row.height; + if (_.isString(height)) { + height = parseInt(height.replace('px', ''), 10); } - var color = getColorForValue(data, value); - if (color) { - return ''+ valueString + ''; - } + height -= 5; // padding + height -= panel.title ? 24 : 9; // subtract panel title bar + elem.css('height', height + 'px'); + + return true; + } catch (e) { // IE throws errors sometimes + return false; + } + } + + function applyColoringThresholds(value, valueString) { + if (!panel.colorValue) { return valueString; } - function getSpan(className, fontSize, value) { - value = templateSrv.replace(value); - return '' + - value + ''; + var color = getColorForValue(data, value); + if (color) { + return ''+ valueString + ''; } - function getBigValueHtml() { - var body = '
    '; + return valueString; + } - if (panel.prefix) { body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, scope.panel.prefix); } + function getSpan(className, fontSize, value) { + value = templateSrv.replace(value); + return '' + + value + ''; + } - var value = applyColoringThresholds(data.valueRounded, data.valueFormated); - body += getSpan('singlestat-panel-value', panel.valueFontSize, value); + function getBigValueHtml() { + var body = '
    '; - if (panel.postfix) { body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.postfix); } + if (panel.prefix) { body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, panel.prefix); } - body += '
    '; + var value = applyColoringThresholds(data.valueRounded, data.valueFormated); + body += getSpan('singlestat-panel-value', panel.valueFontSize, value); - return body; + if (panel.postfix) { body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.postfix); } + + body += '
    '; + + return body; + } + + function addSparkline() { + var width = elem.width() + 20; + var height = elem.height() || 100; + + var plotCanvas = $('
    '); + var plotCss: any = {}; + plotCss.position = 'absolute'; + + if (panel.sparkline.full) { + plotCss.bottom = '5px'; + plotCss.left = '-5px'; + plotCss.width = (width - 10) + 'px'; + var dynamicHeightMargin = height <= 100 ? 5 : (Math.round((height/100)) * 15) + 5; + plotCss.height = (height - dynamicHeightMargin) + 'px'; + } else { + plotCss.bottom = "0px"; + plotCss.left = "-5px"; + plotCss.width = (width - 10) + 'px'; + plotCss.height = Math.floor(height * 0.25) + "px"; } - function addSparkline() { - var panel = scope.panel; - var width = elem.width() + 20; - var height = elem.height() || 100; + plotCanvas.css(plotCss); - var plotCanvas = $('
    '); - var plotCss: any = {}; - plotCss.position = 'absolute'; - - if (panel.sparkline.full) { - plotCss.bottom = '5px'; - plotCss.left = '-5px'; - plotCss.width = (width - 10) + 'px'; - var dynamicHeightMargin = height <= 100 ? 5 : (Math.round((height/100)) * 15) + 5; - plotCss.height = (height - dynamicHeightMargin) + 'px'; - } else { - plotCss.bottom = "0px"; - plotCss.left = "-5px"; - plotCss.width = (width - 10) + 'px'; - plotCss.height = Math.floor(height * 0.25) + "px"; - } - - plotCanvas.css(plotCss); - - var options = { - legend: { show: false }, - series: { - lines: { - show: true, - fill: 1, - lineWidth: 1, - fillColor: panel.sparkline.fillColor, - }, + var options = { + legend: { show: false }, + series: { + lines: { + show: true, + fill: 1, + lineWidth: 1, + fillColor: panel.sparkline.fillColor, }, - yaxes: { show: false }, - xaxis: { - show: false, - mode: "time", - min: scope.range.from.valueOf(), - max: scope.range.to.valueOf(), - }, - grid: { hoverable: false, show: false }, - }; + }, + yaxes: { show: false }, + xaxis: { + show: false, + mode: "time", + min: ctrl.range.from.valueOf(), + max: ctrl.range.to.valueOf(), + }, + grid: { hoverable: false, show: false }, + }; - elem.append(plotCanvas); + elem.append(plotCanvas); - var plotSeries = { - data: data.flotpairs, - color: panel.sparkline.lineColor - }; + var plotSeries = { + data: data.flotpairs, + color: panel.sparkline.lineColor + }; - $.plot(plotCanvas, [plotSeries], options); - } + $.plot(plotCanvas, [plotSeries], options); + } - function render() { - if (!scope.data) { return; } + function render() { + if (!ctrl.data) { return; } - data = scope.data; - panel = scope.panel; + data = ctrl.data; + setElementHeight(); - setElementHeight(); + var body = getBigValueHtml(); - var body = getBigValueHtml(); - - if (panel.colorBackground && !isNaN(data.valueRounded)) { - var color = getColorForValue(data, data.valueRounded); - if (color) { - $panelContainer.css('background-color', color); - if (scope.fullscreen) { - elem.css('background-color', color); - } else { - elem.css('background-color', ''); - } - } - } else { - $panelContainer.css('background-color', ''); - elem.css('background-color', ''); - } - - elem.html(body); - - if (panel.sparkline.show) { - addSparkline(); - } - - elem.toggleClass('pointer', panel.links.length > 0); - - if (panel.links.length > 0) { - linkInfo = linkSrv.getPanelLinkAnchorInfo(panel.links[0], scope.panel.scopedVars); - } else { - linkInfo = null; - } - } - - function hookupDrilldownLinkTooltip() { - // drilldown link tooltip - var drilldownTooltip = $('
    hello
    "'); - - elem.mouseleave(function() { - if (panel.links.length === 0) { return;} - drilldownTooltip.detach(); - }); - - elem.click(function(evt) { - if (!linkInfo) { return; } - // ignore title clicks in title - if ($(evt).parents('.panel-header').length > 0) { return; } - - if (linkInfo.target === '_blank') { - var redirectWindow = window.open(linkInfo.href, '_blank'); - redirectWindow.location; - return; - } - - if (linkInfo.href.indexOf('http') === 0) { - window.location.href = linkInfo.href; + if (panel.colorBackground && !isNaN(data.valueRounded)) { + var color = getColorForValue(data, data.valueRounded); + if (color) { + $panelContainer.css('background-color', color); + if (scope.fullscreen) { + elem.css('background-color', color); } else { - $timeout(function() { - $location.url(linkInfo.href); - }); + elem.css('background-color', ''); } + } + } else { + $panelContainer.css('background-color', ''); + elem.css('background-color', ''); + } - drilldownTooltip.detach(); - }); + elem.html(body); - elem.mousemove(function(e) { - if (!linkInfo) { return;} + if (panel.sparkline.show) { + addSparkline(); + } - drilldownTooltip.text('click to go to: ' + linkInfo.title); - drilldownTooltip.place_tt(e.pageX+20, e.pageY-15); - }); + elem.toggleClass('pointer', panel.links.length > 0); + + if (panel.links.length > 0) { + linkInfo = linkSrv.getPanelLinkAnchorInfo(panel.links[0], panel.scopedVars); + } else { + linkInfo = null; } } - }; + + function hookupDrilldownLinkTooltip() { + // drilldown link tooltip + var drilldownTooltip = $('
    hello
    "'); + + elem.mouseleave(function() { + if (panel.links.length === 0) { return;} + drilldownTooltip.detach(); + }); + + elem.click(function(evt) { + if (!linkInfo) { return; } + // ignore title clicks in title + if ($(evt).parents('.panel-header').length > 0) { return; } + + if (linkInfo.target === '_blank') { + var redirectWindow = window.open(linkInfo.href, '_blank'); + redirectWindow.location; + return; + } + + if (linkInfo.href.indexOf('http') === 0) { + window.location.href = linkInfo.href; + } else { + $timeout(function() { + $location.url(linkInfo.href); + }); + } + + drilldownTooltip.detach(); + }); + + elem.mousemove(function(e) { + if (!linkInfo) { return;} + + drilldownTooltip.text('click to go to: ' + linkInfo.title); + drilldownTooltip.place_tt(e.pageX+20, e.pageY-15); + }); + } + } } function getColorForValue(data, value) { @@ -226,7 +231,12 @@ function getColorForValue(data, value) { } } + console.log('first'); return _.first(data.colorMap); } -export {singleStatPanel as panel, getColorForValue}; +export { + SingleStatPanel, + SingleStatPanel as Panel, + getColorForValue +};