Skip to content

N
nexpie-grafana-theme
Commit 20fad92a by Torkel Ödegaard Committed by GitHub
Options

Singlestat: Fixed unit not showing and switched to new unit picker (#20892)

parent 87485e24
Showing with 19 additions and 18 deletions
packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
...@@ -11,7 +11,7 @@ interface Props { ...@@ -11,7 +11,7 @@ interface Props {
} }
function formatCreateLabel(input: string) { function formatCreateLabel(input: string) {
return `Unit suffix: ${input}`; return `Custom unit: ${input}`;
} }
export class UnitPicker extends PureComponent<Props> { export class UnitPicker extends PureComponent<Props> {
......
public/app/plugins/panel/graph/axes_editor.ts
import { getValueFormats } from '@grafana/data';
import { GraphCtrl } from './module'; import { GraphCtrl } from './module';
export class AxesEditorCtrl { export class AxesEditorCtrl {
panel: any; panel: any;
panelCtrl: GraphCtrl; panelCtrl: GraphCtrl;
unitFormats: any;
logScales: any; logScales: any;
xAxisModes: any; xAxisModes: any;
xAxisStatOptions: any; xAxisStatOptions: any;
...@@ -16,8 +14,6 @@ export class AxesEditorCtrl { ...@@ -16,8 +14,6 @@ export class AxesEditorCtrl {
this.panel = this.panelCtrl.panel; this.panel = this.panelCtrl.panel;
this.$scope.ctrl = this; this.$scope.ctrl = this;
this.unitFormats = getValueFormats();
this.logScales = { this.logScales = {
linear: 1, linear: 1,
'log (base 2)': 2, 'log (base 2)': 2,
......
public/app/plugins/panel/singlestat/editor.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<p> <p>
Gauge visualizations within the Singlestat panel are deprecated. Please Gauge visualizations within the Singlestat panel are deprecated. Please
migrate this panel to use the Gauge panel migrate this panel to use the Gauge panel
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button class="btn btn-primary" ng-click="ctrl.migrateToGaugePanel(true)"> <button class="btn btn-primary" ng-click="ctrl.migrateToGaugePanel(true)">
Migrate to Gauge Panel Migrate to Gauge Panel
...@@ -14,9 +14,9 @@ ...@@ -14,9 +14,9 @@
Show as single stat Show as single stat
</button> </button>
</div> </div>
<br/> <br/>
<div ng-if="ctrl.panel.sparkline.show"> <div ng-if="ctrl.panel.sparkline.show">
<b>NOTE:</b> Sparklines are not supported in the gauge panel <b>NOTE:</b> Sparklines are not supported in the gauge panel
</div> </div>
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
</div> </div>
</p> </p>
</div> </div>
<div class="section gf-form-group"> <div class="section gf-form-group">
<h5 class="section-heading">Value</h5> <h5 class="section-heading">Value</h5>
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-6">Unit</label> <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>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-6">Decimals</label> <label class="gf-form-label width-6">Decimals</label>
......
public/app/plugins/panel/singlestat/module.ts
...@@ -21,12 +21,12 @@ import { ...@@ -21,12 +21,12 @@ import {
getDisplayProcessor, getDisplayProcessor,
getColorFromHexRgbOrName, getColorFromHexRgbOrName,
PanelEvents, PanelEvents,
formattedValueToString,
} from '@grafana/data'; } from '@grafana/data';
import { convertOldAngularValueMapping } from '@grafana/ui'; import { convertOldAngularValueMapping } from '@grafana/ui';
import { CoreEvents } from 'app/types'; import { CoreEvents } from 'app/types';
import kbn from 'app/core/utils/kbn';
import config from 'app/core/config'; import config from 'app/core/config';
import { MetricsPanelCtrl } from 'app/plugins/sdk'; import { MetricsPanelCtrl } from 'app/plugins/sdk';
import { LinkSrv } from 'app/features/panel/panellinks/link_srv'; import { LinkSrv } from 'app/features/panel/panellinks/link_srv';
...@@ -52,7 +52,6 @@ class SingleStatCtrl extends MetricsPanelCtrl { ...@@ -52,7 +52,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
data: Partial<ShowData> = {}; data: Partial<ShowData> = {};
fontSizes: any[]; fontSizes: any[];
unitFormats: any[];
fieldNames: string[] = []; fieldNames: string[] = [];
invalidGaugeRange: boolean; invalidGaugeRange: boolean;
...@@ -137,7 +136,6 @@ class SingleStatCtrl extends MetricsPanelCtrl { ...@@ -137,7 +136,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
this.fontSizes = ['20%', '30%', '50%', '70%', '80%', '100%', '110%', '120%', '150%', '170%', '200%']; 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('Options', 'public/app/plugins/panel/singlestat/editor.html', 2);
this.addEditorTab('Value Mappings', 'public/app/plugins/panel/singlestat/mappings.html', 3); this.addEditorTab('Value Mappings', 'public/app/plugins/panel/singlestat/mappings.html', 3);
this.unitFormats = kbn.getUnitFormats();
} }
migrateToGaugePanel(migrate: boolean) { migrateToGaugePanel(migrate: boolean) {
...@@ -149,9 +147,11 @@ class SingleStatCtrl extends MetricsPanelCtrl { ...@@ -149,9 +147,11 @@ class SingleStatCtrl extends MetricsPanelCtrl {
} }
} }
setUnitFormat(subItem: { value: any }) { setUnitFormat() {
this.panel.format = subItem.value; return (unit: string) => {
this.refresh(); this.panel.format = unit;
this.refresh();
};
} }
onSnapshotLoad(dataList: LegacyResponseData[]) { onSnapshotLoad(dataList: LegacyResponseData[]) {
...@@ -371,7 +371,12 @@ class SingleStatCtrl extends MetricsPanelCtrl { ...@@ -371,7 +371,12 @@ class SingleStatCtrl extends MetricsPanelCtrl {
body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, panel.colorPrefix, panel.prefix); 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) { if (panel.postfix) {
body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.colorPostfix, panel.postfix); body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.colorPostfix, panel.postfix);
...@@ -385,7 +390,7 @@ class SingleStatCtrl extends MetricsPanelCtrl { ...@@ -385,7 +390,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
function getValueText() { function getValueText() {
const data: ShowData = ctrl.data; const data: ShowData = ctrl.data;
let result = panel.prefix ? templateSrv.replace(panel.prefix, data.scopedVars) : ''; 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) : ''; result += panel.postfix ? templateSrv.replace(panel.postfix, data.scopedVars) : '';
return result; return result;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment