module.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. define([
  2. 'angular',
  3. 'app',
  4. 'lodash',
  5. 'components/timeSeries',
  6. 'kbn',
  7. 'components/panelmeta',
  8. 'services/panelSrv',
  9. './singleStatPanel',
  10. ],
  11. function (angular, app, _, TimeSeries, kbn, PanelMeta) {
  12. 'use strict';
  13. var module = angular.module('grafana.panels.singlestat');
  14. app.useModule(module);
  15. module.controller('SingleStatCtrl', function($scope, panelSrv, timeSrv) {
  16. $scope.panelMeta = new PanelMeta({
  17. description: 'Singlestat panel',
  18. titlePos: 'left',
  19. fullscreen: true,
  20. metricsEditor: true
  21. });
  22. $scope.panelMeta.addEditorTab('Options', 'app/panels/singlestat/editor.html');
  23. // Set and populate defaults
  24. var _d = {
  25. links: [],
  26. maxDataPoints: 100,
  27. interval: null,
  28. targets: [{}],
  29. cacheTimeout: null,
  30. format: 'none',
  31. prefix: '',
  32. postfix: '',
  33. valueName: 'avg',
  34. prefixFontSize: '50%',
  35. valueFontSize: '100%',
  36. postfixFontSize: '50%',
  37. thresholds: '',
  38. colorBackground: false,
  39. colorValue: false,
  40. colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"],
  41. sparkline: {
  42. show: false,
  43. full: false,
  44. lineColor: 'rgb(31, 120, 193)',
  45. fillColor: 'rgba(31, 118, 189, 0.18)',
  46. }
  47. };
  48. _.defaults($scope.panel, _d);
  49. $scope.init = function() {
  50. panelSrv.init($scope);
  51. $scope.$on('refresh', $scope.get_data);
  52. };
  53. $scope.updateTimeRange = function () {
  54. $scope.range = timeSrv.timeRange();
  55. $scope.rangeUnparsed = timeSrv.timeRange(false);
  56. $scope.resolution = $scope.panel.maxDataPoints;
  57. $scope.interval = kbn.calculateInterval($scope.range, $scope.resolution, $scope.panel.interval);
  58. };
  59. $scope.get_data = function() {
  60. $scope.updateTimeRange();
  61. var metricsQuery = {
  62. range: $scope.rangeUnparsed,
  63. interval: $scope.interval,
  64. targets: $scope.panel.targets,
  65. maxDataPoints: $scope.resolution,
  66. cacheTimeout: $scope.panel.cacheTimeout
  67. };
  68. return $scope.datasource.query(metricsQuery)
  69. .then($scope.dataHandler)
  70. .then(null, function(err) {
  71. console.log("err");
  72. $scope.panelMeta.loading = false;
  73. $scope.panelMeta.error = err.message || "Timeseries data request error";
  74. $scope.inspector.error = err;
  75. $scope.render();
  76. });
  77. };
  78. $scope.dataHandler = function(results) {
  79. $scope.panelMeta.loading = false;
  80. $scope.series = _.map(results.data, $scope.seriesHandler);
  81. $scope.render();
  82. };
  83. $scope.seriesHandler = function(seriesData) {
  84. var series = new TimeSeries({
  85. datapoints: seriesData.datapoints,
  86. alias: seriesData.target,
  87. });
  88. series.flotpairs = series.getFlotPairs('connected');
  89. return series;
  90. };
  91. $scope.setColoring = function(options) {
  92. if (options.background) {
  93. $scope.panel.colorValue = false;
  94. $scope.panel.colors = ['rgba(71, 212, 59, 0.4)', 'rgba(245, 150, 40, 0.73)', 'rgba(225, 40, 40, 0.59)'];
  95. }
  96. else {
  97. $scope.panel.colorBackground = false;
  98. $scope.panel.colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
  99. }
  100. $scope.render();
  101. };
  102. $scope.invertColorOrder = function() {
  103. var tmp = $scope.panel.colors[0];
  104. $scope.panel.colors[0] = $scope.panel.colors[2];
  105. $scope.panel.colors[2] = tmp;
  106. $scope.render();
  107. };
  108. $scope.getDecimalsForValue = function(value) {
  109. var opts = {};
  110. if (value === 0) {
  111. return { decimals: 0, scaledDecimals: 0 };
  112. }
  113. var delta = value / 2;
  114. var dec = -Math.floor(Math.log(delta) / Math.LN10);
  115. var magn = Math.pow(10, -dec),
  116. norm = delta / magn, // norm is between 1.0 and 10.0
  117. size;
  118. if (norm < 1.5) {
  119. size = 1;
  120. } else if (norm < 3) {
  121. size = 2;
  122. // special case for 2.5, requires an extra decimal
  123. if (norm > 2.25) {
  124. size = 2.5;
  125. ++dec;
  126. }
  127. } else if (norm < 7.5) {
  128. size = 5;
  129. } else {
  130. size = 10;
  131. }
  132. size *= magn;
  133. if (opts.minTickSize != null && size < opts.minTickSize) {
  134. size = opts.minTickSize;
  135. }
  136. var result = {};
  137. result.decimals = Math.max(0, dec);
  138. result.scaledDecimals = result.decimals - Math.floor(Math.log(size) / Math.LN11) + 2;
  139. return result;
  140. };
  141. $scope.render = function() {
  142. var data = {};
  143. if (!$scope.series || $scope.series.length === 0) {
  144. data.flotpairs = [];
  145. data.mainValue = Number.NaN;
  146. data.mainValueFormated = 'NaN';
  147. }
  148. else {
  149. var series = $scope.series[0];
  150. data.mainValue = series.stats[$scope.panel.valueName];
  151. var decimalInfo = $scope.getDecimalsForValue(data.mainValue);
  152. var formatFunc = kbn.valueFormats[$scope.panel.format];
  153. data.mainValueFormated = formatFunc(data.mainValue, decimalInfo.decimals, decimalInfo.scaledDecimals);
  154. data.flotpairs = series.flotpairs;
  155. }
  156. data.thresholds = $scope.panel.thresholds.split(',').map(function(strVale) {
  157. return Number(strVale.trim());
  158. });
  159. data.colorMap = $scope.panel.colors;
  160. $scope.data = data;
  161. $scope.$emit('render');
  162. };
  163. $scope.init();
  164. });
  165. });