mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Singlestat: Fixed unit not showing and switched to new unit picker (#20892)
This commit is contained in:
parent
87485e24a4
commit
20fad92a80
@ -11,7 +11,7 @@ interface Props {
|
||||
}
|
||||
|
||||
function formatCreateLabel(input: string) {
|
||||
return `Unit suffix: ${input}`;
|
||||
return `Custom unit: ${input}`;
|
||||
}
|
||||
|
||||
export class UnitPicker extends PureComponent<Props> {
|
||||
|
@ -1,10 +1,8 @@
|
||||
import { getValueFormats } from '@grafana/data';
|
||||
import { GraphCtrl } from './module';
|
||||
|
||||
export class AxesEditorCtrl {
|
||||
panel: any;
|
||||
panelCtrl: GraphCtrl;
|
||||
unitFormats: any;
|
||||
logScales: any;
|
||||
xAxisModes: any;
|
||||
xAxisStatOptions: any;
|
||||
@ -16,8 +14,6 @@ export class AxesEditorCtrl {
|
||||
this.panel = this.panelCtrl.panel;
|
||||
this.$scope.ctrl = this;
|
||||
|
||||
this.unitFormats = getValueFormats();
|
||||
|
||||
this.logScales = {
|
||||
linear: 1,
|
||||
'log (base 2)': 2,
|
||||
|
@ -5,7 +5,7 @@
|
||||
<p>
|
||||
Gauge visualizations within the Singlestat panel are deprecated. Please
|
||||
migrate this panel to use the Gauge panel
|
||||
|
||||
|
||||
<div class="gf-form-button-row">
|
||||
<button class="btn btn-primary" ng-click="ctrl.migrateToGaugePanel(true)">
|
||||
Migrate to Gauge Panel
|
||||
@ -14,9 +14,9 @@
|
||||
Show as single stat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
|
||||
<div ng-if="ctrl.panel.sparkline.show">
|
||||
<b>NOTE:</b> Sparklines are not supported in the gauge panel
|
||||
</div>
|
||||
@ -34,7 +34,7 @@
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Value</h5>
|
||||
@ -88,7 +88,7 @@
|
||||
</div>
|
||||
<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>
|
||||
<unit-picker onChange="ctrl.setUnitFormat()" value="ctrl.panel.format" width="18" />
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-6">Decimals</label>
|
||||
|
@ -21,12 +21,12 @@ import {
|
||||
getDisplayProcessor,
|
||||
getColorFromHexRgbOrName,
|
||||
PanelEvents,
|
||||
formattedValueToString,
|
||||
} from '@grafana/data';
|
||||
|
||||
import { convertOldAngularValueMapping } from '@grafana/ui';
|
||||
|
||||
import { CoreEvents } from 'app/types';
|
||||
import kbn from 'app/core/utils/kbn';
|
||||
import config from 'app/core/config';
|
||||
import { MetricsPanelCtrl } from 'app/plugins/sdk';
|
||||
import { LinkSrv } from 'app/features/panel/panellinks/link_srv';
|
||||
@ -52,7 +52,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
|
||||
data: Partial<ShowData> = {};
|
||||
|
||||
fontSizes: any[];
|
||||
unitFormats: any[];
|
||||
fieldNames: string[] = [];
|
||||
|
||||
invalidGaugeRange: boolean;
|
||||
@ -137,7 +136,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
|
||||
this.fontSizes = ['20%', '30%', '50%', '70%', '80%', '100%', '110%', '120%', '150%', '170%', '200%'];
|
||||
this.addEditorTab('Options', 'public/app/plugins/panel/singlestat/editor.html', 2);
|
||||
this.addEditorTab('Value Mappings', 'public/app/plugins/panel/singlestat/mappings.html', 3);
|
||||
this.unitFormats = kbn.getUnitFormats();
|
||||
}
|
||||
|
||||
migrateToGaugePanel(migrate: boolean) {
|
||||
@ -149,9 +147,11 @@ class SingleStatCtrl extends MetricsPanelCtrl {
|
||||
}
|
||||
}
|
||||
|
||||
setUnitFormat(subItem: { value: any }) {
|
||||
this.panel.format = subItem.value;
|
||||
this.refresh();
|
||||
setUnitFormat() {
|
||||
return (unit: string) => {
|
||||
this.panel.format = unit;
|
||||
this.refresh();
|
||||
};
|
||||
}
|
||||
|
||||
onSnapshotLoad(dataList: LegacyResponseData[]) {
|
||||
@ -371,7 +371,12 @@ class SingleStatCtrl extends MetricsPanelCtrl {
|
||||
body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, panel.colorPrefix, panel.prefix);
|
||||
}
|
||||
|
||||
body += getSpan('singlestat-panel-value', panel.valueFontSize, panel.colorValue, data.display.text);
|
||||
body += getSpan(
|
||||
'singlestat-panel-value',
|
||||
panel.valueFontSize,
|
||||
panel.colorValue,
|
||||
formattedValueToString(data.display)
|
||||
);
|
||||
|
||||
if (panel.postfix) {
|
||||
body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.colorPostfix, panel.postfix);
|
||||
@ -385,7 +390,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
|
||||
function getValueText() {
|
||||
const data: ShowData = ctrl.data;
|
||||
let result = panel.prefix ? templateSrv.replace(panel.prefix, data.scopedVars) : '';
|
||||
result += data.display.text;
|
||||
result += formattedValueToString(data.display);
|
||||
result += panel.postfix ? templateSrv.replace(panel.postfix, data.scopedVars) : '';
|
||||
|
||||
return result;
|
||||
|
Loading…
Reference in New Issue
Block a user