2014-10-15 17:29:47 -04:00
< div class = "editor-row" >
2016-09-21 10:56:17 +02:00
< div class = "section gf-form-group" >
< h5 class = "section-heading" > Value< / h5 >
2014-11-22 15:26:23 +01:00
2016-09-21 10:56:17 +02:00
< div class = "gf-form-inline" >
2017-04-21 16:11:49 +02:00
< div class = "gf-form" ng-show = "ctrl.dataType === 'timeseries'" >
2016-12-14 12:58:20 +01:00
< label class = "gf-form-label width-6" > Stat< / label >
2017-09-21 13:59:11 +02:00
< div class = "gf-form-select-wrapper width-12" >
2017-09-21 13:34:51 +02:00
< select class = "gf-form-input" ng-model = "ctrl.panel.valueName" ng-options = "f.value as f.text for f in ctrl.valueNameOptions" ng-change = "ctrl.refresh()" > < / select >
2016-09-21 10:56:17 +02:00
< / div >
2017-04-21 16:11:49 +02:00
< / div >
< div class = "gf-form" ng-show = "ctrl.dataType === 'table'" >
< label class = "gf-form-label width-6" > Column< / label >
2017-09-21 13:59:11 +02:00
< div class = "gf-form-select-wrapper width-12" >
2017-04-21 16:11:49 +02:00
< select class = "gf-form-input" ng-model = "ctrl.panel.tableColumn" ng-options = "f for f in ctrl.tableColumnOptions" ng-change = "ctrl.refresh()" > < / select >
< / div >
< / div >
< div class = "gf-form" >
2016-09-21 10:56:17 +02:00
< label class = "gf-form-label width-6" > Font size< / label >
< div class = "gf-form-select-wrapper" >
< select class = "gf-form-input" ng-model = "ctrl.panel.valueFontSize" ng-options = "f for f in ctrl.fontSizes" ng-change = "ctrl.render()" > < / select >
< / div >
< / div >
< / div >
2014-10-15 17:29:47 -04:00
2016-09-21 10:56:17 +02:00
< div class = "gf-form-inline" >
< div class = "gf-form" >
2016-12-14 12:58:20 +01:00
< label class = "gf-form-label width-6" > Prefix< / label >
2017-09-21 13:59:11 +02:00
< input type = "text" class = "gf-form-input width-12" ng-model = "ctrl.panel.prefix" ng-change = "ctrl.render()" ng-model-onblur >
2016-09-21 10:56:17 +02:00
< label class = "gf-form-label width-6" > Font size< / label >
< div class = "gf-form-select-wrapper" >
2018-01-25 03:27:25 -05:00
< select class = "gf-form-input" ng-model = "ctrl.panel.prefixFontSize" ng-options = "f for f in ctrl.fontSizes" ng-change = "ctrl.render()" ng-disabled = "ctrl.canChangeFontSize()" > < / select >
2016-09-21 10:56:17 +02:00
< / div >
< / div >
< / div >
2016-04-22 14:55:35 +02:00
2016-09-21 10:56:17 +02:00
< div class = "gf-form" >
2016-12-14 12:58:20 +01:00
< label class = "gf-form-label width-6" > Postfix< / label >
2017-09-21 13:59:11 +02:00
< input type = "text" class = "gf-form-input width-12" ng-model = "ctrl.panel.postfix" ng-change = "ctrl.render()" ng-model-onblur >
2016-09-21 10:56:17 +02:00
< label class = "gf-form-label width-6" > Font size< / label >
< div class = "gf-form-select-wrapper" >
2018-01-25 03:27:25 -05:00
< select class = "input-small gf-form-input" ng-model = "ctrl.panel.postfixFontSize" ng-options = "f for f in ctrl.fontSizes" ng-change = "ctrl.render()" ng-disabled = "ctrl.canChangeFontSize()" > < / select >
2016-09-21 10:56:17 +02:00
< / div >
< / div >
2017-10-24 10:45:46 +02:00
< div class = "gf-form" >
< label class = "gf-form-label width-6" > Unit< / label >
< div class = "gf-form-dropdown-typeahead width-18" ng-model = "ctrl.panel.format" dropdown-typeahead2 = "ctrl.unitFormats" dropdown-typeahead-on-select = "ctrl.setUnitFormat($subItem)" > < / div >
< / div >
< div class = "gf-form" >
< label class = "gf-form-label width-6" > Decimals< / label >
< input type = "number" class = "gf-form-input width-18" placeholder = "auto" data-placement = "right" bs-tooltip = "'Override automatic decimal precision for legend and tooltips'" ng-model = "ctrl.panel.decimals" ng-change = "ctrl.refresh()" ng-model-onblur >
< / div >
2016-09-21 10:56:17 +02:00
< / div >
< div class = "section gf-form-group" >
< h5 class = "section-heading" > Coloring< / h5 >
< div class = "gf-form-inline" >
< gf-form-switch class = "gf-form" label-class = "width-8" label = "Background" checked = "ctrl.panel.colorBackground" on-change = "ctrl.render()" > < / gf-form-switch >
< gf-form-switch class = "gf-form" label-class = "width-4" label = "Value" checked = "ctrl.panel.colorValue" on-change = "ctrl.render()" > < / gf-form-switch >
< / div >
< div class = "gf-form-inline" >
< div class = "gf-form max-width-21" >
< label class = "gf-form-label width-8" > Thresholds
2018-05-30 18:09:57 +02:00
< tip > Define two threshold values< br /> 50,80 will produce: value < 50 = Green, 50 < = value < 80 = Yellow, value > = 80 = Red< / tip >
2016-09-21 10:56:17 +02:00
< / label >
< input type = "text" class = "gf-form-input" ng-model = "ctrl.panel.thresholds" ng-blur = "ctrl.render()" placeholder = "50,80" > < / input >
< / div >
< / div >
< div class = "gf-form" >
< label class = "gf-form-label width-8" > Colors< / label >
2017-10-09 14:54:14 +03:00
< span class = "gf-form-label" ng-repeat = "color in ctrl.panel.colors track by $index" >
< color-picker color = "color" onChange = "ctrl.onColorChange($index)" > < / color-picker >
2016-09-21 10:56:17 +02:00
< / span >
< span class = "gf-form-label" >
< a ng-click = "ctrl.invertColorOrder()" >
Invert
< / a >
< / span >
< / div >
< / div >
< div class = "section gf-form-group" >
< h5 class = "section-heading" > Spark lines< / h5 >
< gf-form-switch class = "gf-form" label-class = "width-9" label = "Show" checked = "ctrl.panel.sparkline.show" on-change = "ctrl.render()" > < / gf-form-switch >
< div ng-if = "ctrl.panel.sparkline.show" >
2016-12-14 12:58:20 +01:00
< gf-form-switch class = "gf-form" label-class = "width-9" label = "Full height" checked = "ctrl.panel.sparkline.full" on-change = "ctrl.render()" > < / gf-form-switch >
2016-09-21 10:56:17 +02:00
< div class = "gf-form" >
< label class = "gf-form-label width-9" > Line Color< / label >
< span class = "gf-form-label" >
2017-10-09 14:54:14 +03:00
< color-picker color = "ctrl.panel.sparkline.lineColor" onChange = "ctrl.onSparklineColorChange" > < / color-picker >
2016-09-21 10:56:17 +02:00
< / span >
< / div >
< div class = "gf-form" >
< label class = "gf-form-label width-9" > Fill Color< / label >
< span class = "gf-form-label" >
2017-10-09 14:54:14 +03:00
< color-picker color = "ctrl.panel.sparkline.fillColor" onChange = "ctrl.onSparklineFillChange" > < / color-picker >
2016-09-21 10:56:17 +02:00
< / span >
< / div >
< / div >
< / div >
< div class = "section gf-form-group" >
< h5 class = "section-heading" > Gauge< / h5 >
2016-12-14 12:58:20 +01:00
< gf-form-switch class = "gf-form" label-class = "width-10" switch-class = "max-width-6" label = "Show" checked = "ctrl.panel.gauge.show" on-change = "ctrl.render()" > < / gf-form-switch >
2016-09-21 10:56:17 +02:00
< div ng-if = "ctrl.panel.gauge.show" >
< div class = "gf-form" >
2016-12-14 12:58:20 +01:00
< label class = "gf-form-label width-10" > Min< / label >
2016-09-21 10:56:17 +02:00
< input type = "number" class = "gf-form-input width-6" placeholder = "0" data-placement = "right" ng-model = "ctrl.panel.gauge.minValue" ng-change = "ctrl.refresh()" ng-model-onblur >
< label class = "gf-form-label alert-state-critical" ng-show = "ctrl.invalidGaugeRange" >
< i class = "fa fa-warning" > < / i >
Min value is bigger than max.
< / label >
< / div >
< div class = "gf-form" >
2016-12-14 12:58:20 +01:00
< label class = "gf-form-label width-10" > Max< / label >
2016-09-21 10:56:17 +02:00
< input type = "number" class = "gf-form-input width-6" placeholder = "0" data-placement = "right" ng-model = "ctrl.panel.gauge.maxValue" ng-change = "ctrl.refresh()" ng-model-onblur >
< / div >
2016-12-14 12:58:20 +01:00
< gf-form-switch class = "gf-form" label-class = "width-10" switch-class = "max-width-6" label = "Threshold labels" checked = "ctrl.panel.gauge.thresholdLabels" on-change = "ctrl.render()" > < / gf-form-switch >
< gf-form-switch class = "gf-form" label-class = "width-10" switch-class = "max-width-6" label = "Threshold markers" checked = "ctrl.panel.gauge.thresholdMarkers" on-change = "ctrl.render()" > < / gf-form-switch >
2016-09-21 10:56:17 +02:00
< / div >
< / div >
2014-10-19 19:36:59 -04:00
< / div >