fixing based on review

This commit is contained in:
ppisljar 2016-12-16 14:49:25 +01:00
parent 7d8718beab
commit d55b440174
8 changed files with 42 additions and 5667 deletions

View file

@ -31,7 +31,7 @@
<select
id="axisScale"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.valueAxes[0].scale.type"
ng-model="valueAxis.scale.type"
ng-options="mode for mode in vis.type.params.scales"
></select>
</div>
@ -42,11 +42,11 @@
Scale to Data Bounds
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="defaultYExtents" type="checkbox" ng-model="vis.params.valueAxes[0].scale.defaultYExtents">
<input class="kuiCheckBox" id="defaultYExtents" type="checkbox" ng-model="valueAxis.scale.defaultYExtents">
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="kuiSideBarFormRow" ng-if="!vis.params.setColorRange">
<label class="kuiSideBarFormRow__label" for="percentageMode">
Percentage Mode
</label>
@ -159,13 +159,13 @@
<div class="kuiSideBarCollapsibleTitle">
<div
class="kuiSideBarCollapsibleTitle__label"
ng-click="vis.params.valueAxes[0].labels.show = !vis.params.valueAxes[0].labels.show"
ng-click="valueAxis.labels.show = !valueAxis.labels.show"
>
<span
aria-hidden="true"
ng-class="{
'fa-caret-down': vis.params.valueAxes[0].labels.show,
'fa-caret-right': !vis.params.valueAxes[0].labels.show
'fa-caret-down': valueAxis.labels.show,
'fa-caret-right': !valueAxis.labels.show
}"
class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
@ -174,19 +174,32 @@
</span>
</div>
<input aria-label="enable"
ng-model="vis.params.valueAxes[0].labels.show"
ng-model="valueAxis.labels.show"
type="checkbox"
class="kuiSideBarSectionTitle__action"
>
</div>
<div ng-if="vis.params.valueAxes[0].labels.show" class="kuiSideBarCollapsibleSection">
<div ng-if="valueAxis.labels.show" class="kuiSideBarCollapsibleSection">
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="rotateLabels">
Rotate
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="rotateLabels" type="checkbox" ng-model="options.labels">
<input class="kuiCheckBox" id="rotateLabels" type="checkbox" ng-model="options.rotateLabels">
</div>
</div>
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="labelColor">
Color
</label>
<div class="kuiSideBarFormRow__control">
<input
id="labelColor"
class="kuiInput kuiSideBarInput"
ng-model="valueAxis.labels.color"
>
</div>
</div>
</div>

View file

@ -3,7 +3,7 @@ import heatmapOptionsTemplate from 'plugins/kbn_vislib_vis_types/controls/heatma
import _ from 'lodash';
const module = uiModules.get('kibana');
module.directive('heatmapOptions', function ($parse, $compile, getAppState) {
module.directive('heatmapOptions', function () {
return {
restrict: 'E',
template: heatmapOptionsTemplate,
@ -12,10 +12,12 @@ module.directive('heatmapOptions', function ($parse, $compile, getAppState) {
$scope.isColorRangeOpen = true;
$scope.customColors = false;
$scope.options = {
labels: false
rotateLabels: false
};
$scope.$watch('options.labels', rotate => {
$scope.valueAxis = $scope.vis.params.valueAxes[0];
$scope.$watch('options.rotateLabels', rotate => {
$scope.vis.params.valueAxes[0].labels.rotate = rotate ? 270 : 0;
});
@ -33,12 +35,10 @@ module.directive('heatmapOptions', function ($parse, $compile, getAppState) {
const previousRange = _.last($scope.vis.params.colorsRange);
const from = previousRange ? previousRange.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) {

View file

@ -1,7 +1,7 @@
<div class="kuiSideBarSection">
<div class="kuiSideBarSectionTitle">
<div class="kuiSideBarSectionTitle__text">
Global Settings
Basic Settings
</div>
</div>

View file

@ -1,6 +1,7 @@
import VislibVisTypeVislibVisTypeProvider from 'ui/vislib_vis_type/vislib_vis_type';
import VisSchemasProvider from 'ui/vis/schemas';
import heatmapTemplate from 'plugins/kbn_vislib_vis_types/editors/heatmap.html';
import heatmapColors from 'ui/vislib/components/color/colormaps';
export default function HeatmapVisType(Private) {
const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider);
@ -25,7 +26,6 @@ export default function HeatmapVisType(Private) {
colorsRange: [],
invertColors: false,
percentageMode: false,
cellLabels: false,
valueAxes: [{
show: false,
id: 'ValueAxis-1',
@ -54,8 +54,7 @@ export default function HeatmapVisType(Private) {
text: 'bottom',
}],
scales: ['linear', 'log', 'square root'],
colorSchemas: ['Blues', 'Greens', 'Greys', 'Reds', 'YlOrRd', 'autumn', 'bone',
'hot', 'coolwarm', 'Spectral', 'gist_earth', 'terrain', 'gnuplot', 'jet'],
colorSchemas: Object.keys(heatmapColors),
editor: heatmapTemplate
},
schemas: new Schemas([

View file

@ -15,7 +15,6 @@ uiModules
controllerAs: 'sidebar',
controller: function ($scope) {
$scope.$bind('vis', 'editableVis');
$scope.$bind('uiState', 'uiState');
$scope.$watch('vis.type', (visType) => {
if (visType) {

File diff suppressed because it is too large Load diff

View file

@ -150,7 +150,7 @@ export default function HeatmapChartFactory(Private) {
val = colorsNumber - 1;
} else {
val = (d.y - min) / (max - min); /* get val from 0 - 1 */
val = Math.floor(val * (colorsNumber - 1));
val = Math.round(val * (colorsNumber - 1));
}
}
return val;
@ -182,7 +182,7 @@ export default function HeatmapChartFactory(Private) {
.attr('height', squareHeight)
.attr('data-label', label)
.attr('fill', z)
.attr('style', 'opacity: 1; cursor: pointer; stroke: black; stroke-width: 0.3px')
.attr('style', 'cursor: pointer; stroke: black; stroke-width: 0.1px')
.style('display', d => {
return d.hide ? 'none' : 'initial';
});
@ -215,6 +215,7 @@ export default function HeatmapChartFactory(Private) {
})
.style('dominant-baseline', 'central')
.style('text-anchor', 'middle')
.style('stroke', zAxisConfig.get('labels.color'))
.attr('x', function (d) {
const center = x(d) + squareWidth / 2;
return center;

View file

@ -24,8 +24,6 @@ uiModules.get('kibana')
refresh();
});
$scope.uiState.on('change', refresh);
$scope.$watch('renderbot.vislibParams', () => {
refresh();
});
@ -58,6 +56,7 @@ uiModules.get('kibana')
$scope.uiState.setSilent('vis.colors', null);
$scope.uiState.set('vis.colors', colors);
$scope.uiState.emit('colorChanged');
refresh();
};
$scope.toggleLegend = function () {
@ -106,6 +105,10 @@ uiModules.get('kibana')
function refresh() {
if (!$scope.renderbot) return;
const vislibVis = $scope.renderbot.vislibVis;
if (!vislibVis.visConfig) {
$scope.labels = [{ label: 'loading ...' }];
return $timeout(refresh, 100);
} // make sure vislib is defined at this point
if ($scope.uiState.get('vis.legendOpen') == null && $scope.vis.params.addLegend != null) {
$scope.open = $scope.vis.params.addLegend;
@ -114,10 +117,9 @@ uiModules.get('kibana')
if (vislibVis.visConfigArgs.type === 'heatmap') {
const labels = vislibVis.getLegendLabels();
if (labels) {
$scope.labels = _.map(labels, label => { return { label: label }; });
} else {
$scope.labels = [{ label: 'loading ...' }];
$timeout(refresh, 100);
$scope.labels = _.map(labels, label => {
return {label: label};
});
}
} else {
$scope.labels = getLabels($scope.data, vislibVis.visConfigArgs.type);