Skip to content

Commit

Permalink
vislib gauge chart (#10336)
Browse files Browse the repository at this point in the history 
* gauge chart

* adding ranges and color options

* adding green to red color pallete

* adding more options

* fixing based on tanya's review

* fixing label positions

* improving range settings

* percentage mode applies to legend

* hidding labels when too long

* updating based on ui rview

* rebasing on master

* adding unit tests

* adding selenium tests

* fixing tests

* adding metric gauge type

* removing metric vis

* adding metric and goal charts

* updating options

* fixing bugs

* fixing based on review from Thomas

* updating icons

* fixing tests

* updating based on last review

* hide some settings if only one range

* fixing tests

* removing unsupported aggs

* fixing defaults

* fixing options

* fixing error with inverse color schema

* adding spacing to info icon

* fixing some tiny issues
  • Loading branch information
@ppisljar
ppisljar authored May 31, 2017
1 parent fa4177d commit b53724b
Show file tree
Hide file tree
Showing 43 changed files with 1,964 additions and 512 deletions.
287 changes: 287 additions & 0 deletions src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,287 @@
<div>
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="gaugeType">
Gauge Type
</label>
<div class="kuiSideBarFormRow__control">
<select
id="gaugeType"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.gauge.gaugeType"
ng-options="mode for mode in vis.type.params.gaugeTypes"
></select>
</div>
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="percentageMode">
Percentage Mode
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="vis.params.gauge.percentageMode">
</div>
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="verticalSplit">
Vertical Split &nbsp;
<kbn-info
placement="right"
info="Shows gauges one under another">
</kbn-info>
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="verticalSplit" type="checkbox" ng-model="vis.params.gauge.verticalSplit">
</div>
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="showLabels">
Show Labels
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="vis.params.gauge.labels.show">
</div>
</div>

<div class="kuiSideBarFormRow" ng-show="vis.params.gauge.labels.show">
<label class="kuiSideBarFormRow__label" for="subText">
Sub Text
</label>
<div class="kuiSideBarFormRow__control">
<input
id="subText"
class="kuiInput kuiSideBarInput"
ng-model="vis.params.gauge.style.subText"
type="text"
>
</div>
</div>

<div
class="kuiSideBarFormRow"
ng-hide="vis.params.gauge.type === 'simple'"
ng-show="vis.params.gauge.colorsRange.length > 1"
>
<label class="kuiSideBarFormRow__label" for="extendRange">
Auto Extend Range &nbsp;
<kbn-info
placement="right"
info="Extends range to the maximum value in your data">
</kbn-info>
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="extendRange" type="checkbox" ng-model="vis.params.gauge.extendRange">
</div>
</div>

<div>
<div class="kuiSideBarCollapsibleTitle">
<div
class="kuiSideBarCollapsibleTitle__label"
ng-click="showColorRange = !showColorRange"
>
<span
aria-hidden="true"
ng-class="{ 'fa-caret-down': showColorRange, 'fa-caret-right': !showColorRange }"
class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span class="kuiSideBarCollapsibleTitle__text">
Ranges
</span>
</div>
</div>

<div ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
<div class="kuiSideBarSection">
<table class="vis-editor-agg-editor-ranges form-group" ng-show="vis.params.gauge.colorsRange.length">
<tr>
<th>
<label>From</label>
</th>
<th colspan="2">
<label>To</label>
</th>
</tr>

<tr ng-repeat="range in vis.params.gauge.colorsRange track by $index">
<td>
<input
ng-model="range.from"
type="number"
class="form-control"
name="range.from"
greater-or-equal-than="{{getGreaterThan($index)}}"
required
step="any" />
</td>
<td>
<input
ng-model="range.to"
type="number"
class="form-control"
name="range.to"
greater-or-equal-than="{{range.from}}"
required
step="any" />
</td>
<td>
<button
type="button"
ng-click="removeRange($index)"
ng-show="vis.params.gauge.colorsRange.length > 1"
class="kuiButton kuiButton--danger kuiButton--small">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
</table>

<div class="hintbox" ng-show="!vis.params.gauge.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="kuiButton kuiButton--primary kuiButton--fullWidth">
Add Range
</div>
<div class="text text-center text-info">Note: colors can be changed in the legend</div>
</div>
</div>
</div>
<div ng-show="vis.params.gauge.colorsRange.length > 1">
<div class="kuiSideBarCollapsibleTitle">
<div
class="kuiSideBarCollapsibleTitle__label"
ng-click="showColorOptions = !showColorOptions"
>
<span
aria-hidden="true"
ng-class="{
'fa-caret-down': showColorOptions,
'fa-caret-right': !showColorOptions
}"
class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span class="kuiSideBarCollapsibleTitle__text">
Color Options
</span>
</div>
</div>
<div ng-if="showColorOptions" class="kuiSideBarCollapsibleSection">
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="colorSchema">
Color Schema
</label>
<div class="kuiSideBarFormRow__control">
<select
id="colorSchema"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.gauge.colorSchema"
ng-options="mode for mode in vis.type.params.colorSchemas"
></select>
</div>
<div class="text-info text-center" ng-show="customColors" ng-click="resetColors()">reset colors</div>
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="invertColors">
Reverse Color Schema
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="vis.params.gauge.invertColors">
</div>
</div>
</div>
</div>
</div>





<div>
<div class="kuiSideBarCollapsibleTitle">
<div
class="kuiSideBarCollapsibleTitle__label"
ng-click="showStyle = !showStyle"
>
<span
aria-hidden="true"
ng-class="{
'fa-caret-down': showStyle,
'fa-caret-right': !showStyle
}"
class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span class="kuiSideBarCollapsibleTitle__text">
Style
</span>
</div>
</div>
<div ng-if="showStyle" class="kuiSideBarCollapsibleSection">

<div class="kuiSideBarSection">
<div ng-hide="vis.params.gauge.type === 'simple'">
<div class="kuiSideBarFormRow" ng-show="vis.params.gauge.colorsRange.length > 1">
<label class="kuiSideBarFormRow__label" for="labelColor">
Color Labels
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="labelColor" type="checkbox" ng-model="vis.params.gauge.style.labelColor">
</div>
</div>
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="showScale">
Show Scale
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showScale" type="checkbox" ng-model="vis.params.gauge.scale.show">
</div>
</div>
</div>
<div ng-show="vis.params.gauge.type === 'simple'">
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="gaugeColorMode">
Color
</label>
<div class="kuiSideBarFormRow__control">
<select
id="gaugeColorMode"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.gauge.gaugeColorMode"
ng-options="mode for mode in vis.type.params.gaugeColorMode"
></select>
</div>
</div>
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="backColor">
Back/Text Color
</label>
<div class="kuiSideBarFormRow__control">
<input
id="backTextColor"
class="kuiInput kuiSideBarInput"
ng-model="vis.params.gauge.style.bgFill"
>
</div>
</div>
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="showScale">
Font Size (<span ng-bind="vis.params.gauge.style.fontSize"></span>pt)
</label>
<div class="kuiSideBarFormRow__control">
<input type="range" ng-model="vis.params.gauge.style.fontSize" class="form-control" min="12" max="120" />
</div>
</div>
</div>

</div>
</div>
</div>
</div>
93 changes: 93 additions & 0 deletions src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import { uiModules } from 'ui/modules';
import gaugeOptionsTemplate from 'plugins/kbn_vislib_vis_types/controls/gauge_options.html';
import _ from 'lodash';
const module = uiModules.get('kibana');

module.directive('gaugeOptions', function () {
return {
restrict: 'E',
template: gaugeOptionsTemplate,
replace: true,
link: function ($scope) {

$scope.showColorRange = true;

$scope.$watch('vis.params.gauge.gaugeType', type => {
switch (type) {
case 'Arc':
$scope.vis.params.gauge.type = 'meter';
$scope.vis.params.gauge.minAngle = undefined;
$scope.vis.params.gauge.maxAngle = undefined;
break;
case 'Circle':
$scope.vis.params.gauge.type = 'meter';
$scope.vis.params.gauge.minAngle = 0;
$scope.vis.params.gauge.maxAngle = 2 * Math.PI;
break;
case 'Metric':
$scope.vis.params.gauge.type = 'simple';
}
});


const updateLegend = () => {
if (!$scope.vis.params.gauge.style.bgColor && !$scope.vis.params.gauge.style.labelColor) {
$scope.vis.params.addLegend = false;
} else {
$scope.vis.params.addLegend = true;
}
};

$scope.$watch('vis.params.gauge.gaugeColorMode', newValue => {
switch (newValue) {
case 'Labels':
$scope.vis.params.gauge.style.labelColor = true;
$scope.vis.params.gauge.style.bgColor = false;
break;
case 'Background':
$scope.vis.params.gauge.style.labelColor = false;
$scope.vis.params.gauge.style.bgColor = true;
break;
case 'None':
$scope.vis.params.gauge.style.labelColor = false;
$scope.vis.params.gauge.style.bgColor = false;
break;
}
updateLegend();
});

$scope.resetColors = function () {
$scope.uiState.set('vis.colors', null);
$scope.customColors = false;
};

$scope.getGreaterThan = function (index) {
if (index === 0) return 0;
return $scope.vis.params.gauge.colorsRange[index - 1].to;
};

$scope.addRange = function () {
const previousRange = _.last($scope.vis.params.gauge.colorsRange);
const from = previousRange ? previousRange.to : 0;
const to = previousRange ? from + (previousRange.to - previousRange.from) : 100;
$scope.vis.params.gauge.colorsRange.push({ from: from, to: to });
};

$scope.removeRange = function (index) {
$scope.vis.params.gauge.colorsRange.splice(index, 1);
};

$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;
return colors ? Object.values(colors)[index] : 'transparent';
};

$scope.uiState.on('colorChanged', () => {
$scope.customColors = true;
});

}
};
});
2 changes: 2 additions & 0 deletions src/core_plugins/kbn_vislib_vis_types/public/editors/gauge.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<!-- vis type specific options -->
<gauge-options></gauge-options>
Loading

0 comments on commit b53724b

Please sign in to comment.