IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

heatmap: add color scale options, issue #8539

Browse Source
This commit is contained in:
Alexander Zobnin 2017-07-31 14:03:03 +03:00
parent 5406481e7b
commit ef9dd014c7
2 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/app/plugins/panel/heatmap/partials/display_editor.html
View File

@ -43,6 +43,18 @@
</div> </div>
</div> </div>
<div class="section gf-form-group">
<h5 class="section-heading">Color scale</h5>
<div class="gf-form">
<label class="gf-form-label width-8">Min</label>
<input type="number" ng-model="ctrl.panel.color.min" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Max</label>
<input type="number" ng-model="ctrl.panel.color.max" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
</div>
<div class="section gf-form-group"> <div class="section gf-form-group">
<h5 class="section-heading">Buckets</h5> <h5 class="section-heading">Buckets</h5>
<div class="gf-form"> <div class="gf-form">

12
public/app/plugins/panel/heatmap/rendering.ts
View File

@ -385,9 +385,11 @@ export default function link(scope, elem, attrs, ctrl) {
} }
let cardsData = convertToCards(data.buckets); let cardsData = convertToCards(data.buckets);
let maxValue = d3.max(cardsData, card => card.count); let maxValueAuto = d3.max(cardsData, card => card.count);
let maxValue = panel.color.max || maxValueAuto;
let minValue = panel.color.min || 0;
colorScale = getColorScale(maxValue); colorScale = getColorScale(maxValue, minValue);
setOpacityScale(maxValue); setOpacityScale(maxValue);
setCardSize(); setCardSize();
@ -434,14 +436,14 @@ export default function link(scope, elem, attrs, ctrl) {
.style("stroke-width", 0); .style("stroke-width", 0);
} }
function getColorScale(maxValue) { function getColorScale(maxValue, minValue = 0) {
let colorScheme = _.find(ctrl.colorSchemes, {value: panel.color.colorScheme}); let colorScheme = _.find(ctrl.colorSchemes, {value: panel.color.colorScheme});
let colorInterpolator = d3[colorScheme.value]; let colorInterpolator = d3[colorScheme.value];
let colorScaleInverted = colorScheme.invert === 'always' || let colorScaleInverted = colorScheme.invert === 'always' ||
(colorScheme.invert === 'dark' && !contextSrv.user.lightTheme); (colorScheme.invert === 'dark' && !contextSrv.user.lightTheme);
let start = colorScaleInverted ? maxValue : 0; let start = colorScaleInverted ? maxValue : minValue;
let end = colorScaleInverted ? 0 : maxValue; let end = colorScaleInverted ? minValue : maxValue;
return d3.scaleSequential(colorInterpolator).domain([start, end]); return d3.scaleSequential(colorInterpolator).domain([start, end]);
} }