github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

improved range options

Browse source
This commit is contained in:
ppisljar 2016-12-09 21:31:15 +01:00
parent 2867c2d8c2
commit 4ce88b086a
6 changed files with 86 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html
View file

@ -55,7 +55,7 @@
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="kuiSideBarFormRow" ng-if="!vis.params.setColorRange">
<label class="kuiSideBarFormRow__label" for="colorsNumber">
Number of colors
</label>
@ -95,27 +95,66 @@
<div ng-if="vis.params.setColorRange" class="kuiSideBarCollapsibleSection">
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow" ng-repeat="color in vis.params.colorsRange track by $index">
<label class="kuiSideBarFormRow__label" for="{{ 'colorRange' + $index }}">
<div class="kuiSideBarFormRow__label__colorbox" ng-style="{ 'background-color': getColor($index) }"></div>
value over
</label>
<div class="kuiSideBarFormRow__control">
<input
id="{{ 'colorRange' + $index }}"
class="kuiInput kuiSideBarInput"
ng-model="color.value"
type="number"
ng-required="vis.params.setColorRange"
greater-than="{{getGreaterThan($index)}}"
>
</div>
<table class="vis-editor-agg-editor-ranges form-group" ng-show="vis.params.colorsRange.length">
<tr>
<th></th>
<th>
<label>From</label>
</th>
<th colspan="2">
<label>To</label>
</th>
</tr>
<tr ng-repeat="range in vis.params.colorsRange track by $index">
<td>
<div class="kuiSideBarFormRow__label__colorbox" ng-style="{ 'background-color': getColor($index) }" />
</td>
<td>
<input
ng-model="range.from"
type="number"
class="form-control"
name="range.from"
greater-than="{{getGreaterThan($index)}}"
step="any" />
</td>
<td>
<input
ng-model="range.to"
type="number"
class="form-control"
name="range.to"
greater-than="range.from"
step="any" />
</td>
<td>
<button
type="button"
ng-click="removeRange($index)"
class="btn btn-danger btn-xs">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
</table>
<div class="hintbox" ng-show="!vis.params.colorsRange.length">
<p>
<i class="fa fa-danger text-danger"></i>
<strong>Required:</strong> You must specify at least one range.
</p>
</div>
<div
ng-click="addRange()"
class="sidebar-item-button primary">
Add Range
</div>
<div class="text text-center text-info">Note: colors can be changed in the legend</div>
</div>
<div class="text text-center text-info">note: colors can be changed in the legend</div>
</div>
</div>
<div>
<div class="kuiSideBarCollapsibleTitle">
<div

32
src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.js
View file

@ -1,6 +1,6 @@
import uiModules from 'ui/modules';
import heatmapOptionsTemplate from 'plugins/kbn_vislib_vis_types/controls/heatmap_options.html';
import defaults from 'lodash';
import _ from 'lodash';
const module = uiModules.get('kibana');
module.directive('heatmapOptions', function ($parse, $compile, getAppState) {
@ -26,30 +26,28 @@ module.directive('heatmapOptions', function ($parse, $compile, getAppState) {
$scope.getGreaterThan = function (index) {
if (index === 0) return -1;
return $scope.vis.params.colorsRange[index - 1].value;
return $scope.vis.params.colorsRange[index - 1].to;
};
$scope.addRange = function () {
const from = $scope.vis.params.colorsRange.length ?
$scope.vis.params.colorsRange[$scope.vis.params.colorsRange.length - 1].to : 0;
$scope.vis.params.colorsRange.push({from: from, to: null});
$scope.vis.params.colorsNumber = $scope.vis.params.colorsRange.length;
};
$scope.removeRange = function (index) {
$scope.vis.params.colorsRange.splice(index, 1);
$scope.vis.params.colorsNumber = $scope.vis.params.colorsRange.length;
};
$scope.getColor = function (index) {
const defaultColors = this.uiState.get('vis.defaultColors');
const overwriteColors = this.uiState.get('vis.colors');
const colors = defaultColors ? defaults({}, overwriteColors, defaultColors) : overwriteColors;
const colors = defaultColors ? _.defaults({}, overwriteColors, defaultColors) : overwriteColors;
return colors ? Object.values(colors)[index] : 'transparent';
};
function fillColorsRange() {
for (let i = $scope.vis.params.colorsRange.length; i < $scope.vis.params.colorsNumber; i++) {
$scope.vis.params.colorsRange.push({ value: 0 });
}
$scope.vis.params.colorsRange.length = $scope.vis.params.colorsNumber;
}
fillColorsRange();
$scope.$watch('vis.params.colorsNumber', newVal => {
if (newVal) {
fillColorsRange();
}
});
$scope.uiState.on('colorChanged', () => {
$scope.customColors = true;
});

4
src/ui/public/styles/base.less
View file

@ -1219,8 +1219,8 @@ fieldset {
}
.kuiSideBarFormRow__label__colorbox {
width: 16px;
height: 16px;
width: 24px;
height: 24px;
display: inline-block;
margin-right: 10px;
border: 1px ridge lightgray;

10
src/ui/public/vislib/__tests__/visualizations/heatmap_chart.js
View file

@ -144,13 +144,13 @@ describe('Vislib Heatmap Chart Test Suite', function () {
vis.destroy();
generateVis({
setColorRange: true,
colorsRange: [{ value: 0}, { value: 200 }, { value: 400 }, { value: 500 }]
colorsRange: [{ from: 0, to: 200}, { from: 200, to: 400 }, { from: 400, to: 500 }, { from: 500, to: Infinity }]
});
const labels = vis.getLegendLabels();
expect(labels[0]).to.be('> 0');
expect(labels[1]).to.be('> 200');
expect(labels[2]).to.be('> 400');
expect(labels[3]).to.be('> 500');
expect(labels[0]).to.be('0 - 200');
expect(labels[1]).to.be('200 - 400');
expect(labels[2]).to.be('400 - 500');
expect(labels[3]).to.be('500 - Infinity');
});
});
});

3
src/ui/public/vislib/lib/types/point_series.js
View file

@ -159,9 +159,6 @@ export default function ColumnHandler(Private) {
},
labels: {
axisFormatter: val => val
},
title: {
text: data.get('yAxisLabel')
}
});
return defaults;

11
src/ui/public/vislib/visualizations/point_series/heatmap_chart.js
View file

@ -51,8 +51,9 @@ export default function HeatmapChartFactory(Private) {
let label;
if (cfg.get('setColorRange')) {
const greaterThan = colorsRange[i].value;
label = `> ${greaterThan}`;
const from = colorsRange[i].from;
const to = colorsRange[i].to;
label = `${from} - ${to}`;
} else {
let val = i / colorsNumber;
let nextVal = (i + 1) / colorsNumber;
@ -140,8 +141,10 @@ export default function HeatmapChartFactory(Private) {
function getColorBucket(d) {
let val = 0;
if (setColorRange && colorsRange.length) {
if (d.y < colorsRange[0].value) return -1;
while (val + 1 < colorsRange.length && d.y > colorsRange[val + 1].value) val++;
const bucket = _.find(colorsRange, range => {
return range.from <= d.y && range.to > d.y;
});
return bucket ? colorsRange.indexOf(bucket) : -1;
} else {
if (isNaN(min) || isNaN(max)) {
val = colorsNumber - 1;