Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support Math for thresholds and min/max #30

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Support Math for thresholds and min/max #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .tscache/build/hashes/singlestat-math_ctrl.ts-15c3b5767e881ffc4090fdf4f2203583
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
2331f87401b93b1fae6f05da03acebd2
95c56b11507158e9c6d584e627d7e798
10 changes: 5 additions & 5 deletions dist/editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ <h5 class="section-heading">Coloring</h5>

<div class="gf-form" ng-repeat="threshold in ctrl.panel.thresholds">
<label class="gf-form-label width-10">Threshold {{$index + 1}}</label>
<input type="number" class="input-small gf-form-input width-8" ng-model="threshold.value" ng-blur="ctrl.sortMyThreshes(ctrl)"/>
<input type="text" class="input-small gf-form-input width-8" ng-model="threshold.value" ng-blur="ctrl.sortMyThreshes(ctrl)"/>
<label class="gf-form-label">
<spectrum-picker ng-model="threshold.color" ng-change="ctrl.render()"/>
</label>
Expand All @@ -90,15 +90,15 @@ <h5 class="section-heading">Coloring</h5>
</label>
</div>

<!-- <div class="gf-form">
<div class="gf-form">
<label class="gf-form-label">
<tip>Sorts thresholds</tip>
Sort
</a>
</label>
<select class="gf-form-input width-10" ng-model="ctrl.panel.sortOrder" ng-options="s.value as s.text for s in ctrl.panel.sortOrderOptions" ng-change="ctrl.sortMyThreshes(ctrl)"></select>
</div>
</div> -->
</div>

<div class="section gf-form-group">
<h5 class="section-heading">Query Math</h5>
Expand Down Expand Up @@ -138,15 +138,15 @@ <h5 class="section-heading">Gauge</h5>
<div ng-if="ctrl.panel.gauge.show">
<div class="gf-form">
<label class="gf-form-label width-10">Min</label>
<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>
<input type="text" 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">
&nbsp; <i class="fa fa-warning"></i>
Min value is bigger than max.
</label>
</div>
<div class="gf-form">
<label class="gf-form-label width-10">Max</label>
<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>
<input type="text" class="gf-form-input width-6" placeholder="100" data-placement="right" ng-model="ctrl.panel.gauge.maxValue" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<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>
Expand Down
4 changes: 4 additions & 0 deletions dist/singlestat-math_ctrl.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,10 @@ declare class SingleStatMathCtrl extends MetricsPanelCtrl {
onSparklineColorChange(newColor: any): void;
onSparklineFillChange(newColor: any): void;
getDecimalsForValue(value: any): any;
_doMath(mathFunction: any, data: any): void;
_calcDisplayValue(val: any): any;
_updateThresholdValues(): void;
_updateMinMaxValues(): void;
setValues(data: any): void;
setValueMapping(data: any): void;
removeValueMap(map: any): void;
Expand Down
85 changes: 63 additions & 22 deletions dist/singlestat-math_ctrl.js
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions src/editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ <h5 class="section-heading">Coloring</h5>

<div class="gf-form" ng-repeat="threshold in ctrl.panel.thresholds">
<label class="gf-form-label width-10">Threshold {{$index + 1}}</label>
<input type="number" class="input-small gf-form-input width-8" ng-model="threshold.value" ng-blur="ctrl.sortMyThreshes(ctrl)"/>
<input type="text" class="input-small gf-form-input width-8" ng-model="threshold.value" ng-blur="ctrl.sortMyThreshes(ctrl)"/>
<label class="gf-form-label">
<spectrum-picker ng-model="threshold.color" ng-change="ctrl.render()"/>
</label>
Expand All @@ -90,15 +90,15 @@ <h5 class="section-heading">Coloring</h5>
</label>
</div>

<!-- <div class="gf-form">
<div class="gf-form">
<label class="gf-form-label">
<tip>Sorts thresholds</tip>
Sort
</a>
</label>
<select class="gf-form-input width-10" ng-model="ctrl.panel.sortOrder" ng-options="s.value as s.text for s in ctrl.panel.sortOrderOptions" ng-change="ctrl.sortMyThreshes(ctrl)"></select>
</div>
</div> -->
</div>

<div class="section gf-form-group">
<h5 class="section-heading">Query Math</h5>
Expand Down Expand Up @@ -138,15 +138,15 @@ <h5 class="section-heading">Gauge</h5>
<div ng-if="ctrl.panel.gauge.show">
<div class="gf-form">
<label class="gf-form-label width-10">Min</label>
<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>
<input type="text" 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">
&nbsp; <i class="fa fa-warning"></i>
Min value is bigger than max.
</label>
</div>
<div class="gf-form">
<label class="gf-form-label width-10">Max</label>
<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>
<input type="text" class="gf-form-input width-6" placeholder="100" data-placement="right" ng-model="ctrl.panel.gauge.maxValue" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<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>
Expand Down
131 changes: 89 additions & 42 deletions src/singlestat-math_ctrl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,8 @@ class SingleStatMathCtrl extends MetricsPanelCtrl {
thresholdLabels: false,
},
sortOrderOptions: [
{ value: 'asc', text: 'Ascending'},
{ value: 'desc', text: 'Descending'},
{ value: 'asc', text: 'Ascending' },
{ value: 'desc', text: 'Descending' },
],
tableColumn: '',
};
Expand Down Expand Up @@ -153,10 +153,11 @@ class SingleStatMathCtrl extends MetricsPanelCtrl {
}

sortMyThreshes(control) {
if(this.panel.sortOrder === 'asc') {
control.panel.thresholds = _.orderBy(control.panel.thresholds, ["value"], ["asc"]);
this._updateThresholdValues();
if (this.panel.sortOrder === 'asc') {
control.panel.thresholds = _.orderBy(control.panel.thresholds, ["displayvalue"], ["asc"]);
} else if (this.panel.sortOrder === 'desc') {
control.panel.thresholds = _.orderBy(control.panel.thresholds, ["value"], ["desc"]);
control.panel.thresholds = _.orderBy(control.panel.thresholds, ["displayvalue"], ["desc"]);
}
this.$scope.ctrl.refresh();
}
Expand All @@ -176,7 +177,7 @@ class SingleStatMathCtrl extends MetricsPanelCtrl {
}

onEditorAddThreshold() {
this.panel.thresholds.push({color: this.panel.defaultColor})
this.panel.thresholds.push({ color: this.panel.defaultColor })
this.render();
}

Expand Down Expand Up @@ -327,6 +328,59 @@ class SingleStatMathCtrl extends MetricsPanelCtrl {
return result;
}

_doMath(mathFunction, data) {
this.series.forEach(element => {
mathFunction = mathFunction.replace(new RegExp(element.alias, 'gi'), String(element.stats[this.panel.valueName]));
});
try {
mathFunction = mathFunction.replace(new RegExp('[A-Za-z]+', 'gi'), String(0));
data.value = math.eval(mathFunction);
data.flotpairs = this.series[0].flotpairs;
} catch (e) {
//Error evaluating function. Defaulting to zero.
data.value = 0;
data.flotpairs = [0, 0];
}
}

_calcDisplayValue(val) {
var haschars = new RegExp('[a-z]+', 'gi');
if (haschars.test(val)) {
var datatmp = { 'value': 0 };
this._doMath(val, datatmp);
return datatmp.value;
}
else {
return val;
}
}

_updateThresholdValues() {
// Set the display value on any thresholds that may need to run math function
for (var i = 0; i < this.panel.thresholds.length; i++) {
var dispval = this._calcDisplayValue(this.panel.thresholds[i].value);
if (dispval > this.panel.gauge.maxDisplayValue) {
dispval = this.panel.gauge.maxDisplayValue;
}
this.panel.thresholds[i].displayvalue = dispval;
}
}

_updateMinMaxValues() {
// Set the display value on any Max or Min that may need to run math function
// If value is undefined, use defaults until value set
if (this.panel.gauge.minValue != undefined) {
this.panel.gauge.minDisplayValue = this._calcDisplayValue(this.panel.gauge.minValue);
} else {
this.panel.gauge.minDisplayValue = 0;
}
if (this.panel.gauge.maxValue != undefined) {
this.panel.gauge.maxDisplayValue = this._calcDisplayValue(this.panel.gauge.maxValue);
} else {
this.panel.gauge.maxDisplayValue = 100;
}
}

setValues(data) {
data.flotpairs = [];

Expand All @@ -353,22 +407,10 @@ class SingleStatMathCtrl extends MetricsPanelCtrl {
data.valueRounded = data.value;
data.valueFormatted = formatFunc(data.value, 0, 0);
} else {
if (this.panel.math.length){
var mathFunction = this.panel.math;
this.series.forEach(element => {
mathFunction = mathFunction.replace(new RegExp(element.alias, 'gi'), String(element.stats[this.panel.valueName]));
});
try {
mathFunction = mathFunction.replace(new RegExp('[A-za-z]+', 'gi'), String(0));
data.value = math.eval(mathFunction);
data.flotpairs = this.series[0].flotpairs;
} catch (e) {
//Error evaluating function. Defaulting to zero.
data.value = 0;
data.flotpairs = [0,0];
}
if (this.panel.math.length) {
this._doMath(this.panel.math, data);
}
else{
else {
data.value = this.series[0].stats[this.panel.valueName];
data.flotpairs = this.series[0].flotpairs;
}
Expand All @@ -378,9 +420,14 @@ class SingleStatMathCtrl extends MetricsPanelCtrl {
data.valueFormatted = formatFunc(data.value, decimalInfo.decimals, decimalInfo.scaledDecimals);
data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals);
}
this._updateMinMaxValues();

if (this.panel.gauge.show) {
this._updateThresholdValues();
}

// Add $__name variable for using in prefix or postfix
if(this.series && this.series.length > 0){
if (this.series && this.series.length > 0) {
data.scopedVars = _.extend({}, this.panel.scopedVars);
data.scopedVars['__name'] = { value: this.series[0].label };
}
Expand Down Expand Up @@ -558,7 +605,7 @@ class SingleStatMathCtrl extends MetricsPanelCtrl {
var dimension = Math.min(width, height * 1.3);

ctrl.invalidGaugeRange = false;
if (panel.gauge.minValue > panel.gauge.maxValue) {
if (panel.gauge.minDisplayValue > panel.gauge.maxDisplayValue) {
ctrl.invalidGaugeRange = true;
return;
}
Expand All @@ -577,12 +624,12 @@ class SingleStatMathCtrl extends MetricsPanelCtrl {
var thresholds = [];
for (var i = 0; i < panel.thresholds.length; i++) {
thresholds.push({
value: panel.thresholds[i].value,
value: panel.thresholds[i].displayvalue,
color: panel.thresholds[i].color,
});
}
thresholds.push({
value: panel.gauge.maxValue,
value: panel.gauge.maxDisplayValue,
color: panel.thresholds[panel.thresholds.length - 1],
});

Expand All @@ -600,8 +647,8 @@ class SingleStatMathCtrl extends MetricsPanelCtrl {
series: {
gauges: {
gauge: {
min: panel.gauge.minValue,
max: panel.gauge.maxValue,
min: panel.gauge.minDisplayValue,
max: panel.gauge.maxDisplayValue,
background: { color: bgColor },
border: { color: null },
shadow: { show: false },
Expand All @@ -623,7 +670,7 @@ class SingleStatMathCtrl extends MetricsPanelCtrl {
},
value: {
color: panel.colorValue ? getColorForValue(panel.thresholds, data.valueRounded) : null,
formatter: function() {
formatter: function () {
return getValueText();
},
font: {
Expand Down Expand Up @@ -781,20 +828,20 @@ class SingleStatMathCtrl extends MetricsPanelCtrl {
// drilldown link tooltip

if (ctrl.panel.description) {
var drilldownTooltip = $('<div id="tooltip" class="" style="background:white;margin:auto;color:black;width:200px;box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);"><h6 style="color:black;">'
+ ctrl.panel.title + '</h6>' + ctrl.panel.description + '</div>"');
var drilldownTooltip = $('<div id="tooltip" class="" style="background:white;margin:auto;color:black;width:200px;box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);"><h6 style="color:black;">'
+ ctrl.panel.title + '</h6>' + ctrl.panel.description + '</div>"');
} else {
var drilldownTooltip = $('<div id="tooltip" class="" style="background:white;margin:auto;color:black;width:200px;box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);"><h6 style="color:black;">'
+ ctrl.panel.title + '</h6>No Description</div>"');
var drilldownTooltip = $('<div id="tooltip" class="" style="background:white;margin:auto;color:black;width:200px;box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);"><h6 style="color:black;">'
+ ctrl.panel.title + '</h6>No Description</div>"');
}

elem.mouseleave(function() {
$timeout(function() {
elem.mouseleave(function () {
$timeout(function () {
drilldownTooltip.detach();
});
});

elem.click(function(evt) {
elem.click(function (evt) {
if (!linkInfo) {
return;
}
Expand All @@ -811,15 +858,15 @@ class SingleStatMathCtrl extends MetricsPanelCtrl {
if (linkInfo.href.indexOf('http') === 0) {
window.location.href = linkInfo.href;
} else {
$timeout(function() {
$timeout(function () {
$location.url(linkInfo.href);
});
}

drilldownTooltip.detach();
});

elem.mousemove(function(e) {
elem.mousemove(function (e) {
if (!ctrl.panel.tooltip.show) {
return;
}
Expand All @@ -833,7 +880,7 @@ class SingleStatMathCtrl extends MetricsPanelCtrl {

hookupDrilldownLinkTooltip();

this.events.on('render', function() {
this.events.on('render', function () {
render();
ctrl.renderingCompleted();
});
Expand All @@ -848,12 +895,12 @@ function getColorForValue(thresholds, value) {
for (let i = thresholds.length - 1; i >= 0; i--) {
let aThreshold = thresholds[i];
color = aThreshold.color;
if (value >= aThreshold.value) {
return aThreshold.color;
}
if (value >= aThreshold.value) {
return aThreshold.color;
}
}
return color;
}

export {SingleStatMathCtrl, SingleStatMathCtrl as PanelCtrl, getColorForValue}
export { SingleStatMathCtrl, SingleStatMathCtrl as PanelCtrl, getColorForValue }
// export { SingleStatCtrl, SingleStatCtrl as PanelCtrl, getColorForValue };