maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge pull request #1599 from w33ble/vis-spy-full

Browse source 
Vis spy full screen toggle fixes
This commit is contained in:
Joe Fleming 2014-10-09 17:51:06 -07:00
parent 658aab47d1 42d5c66475
commit 068ccda93f
5 changed files with 61 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/kibana/components/visualize/spy/_spy.html
View file

@ -14,7 +14,7 @@
</a>
</div>
<div class="button-group">
<a ng-click="toggleFullPage()">
<a ng-if="!fullScreenSpy" ng-click="toggleFullPage()">
<i ng-if="!spyMode.fill" class="fa fa-expand"></i>
<i ng-if="spyMode.fill" class="fa fa-compress"></i>
</a>

8
src/kibana/components/visualize/spy/_table.js
View file

@ -14,11 +14,9 @@ define(function (require) {
var perPageDefault = 10;
var perPageExtended = 20;
// TODO: finish this - the list should get longer in full screen mode
// $scope.$parent.$watch('spyMode.fill', function (fill) {
// $scope.perPage = (fill) ? perPageExtended : perPageDefault;
// });
$scope.perPage = perPageDefault;
$scope.$parent.$watch('spyMode.fill', function (fill) {
$scope.perPage = (fill) ? perPageExtended : perPageDefault;
});
$scope.sort = null;
$scope.csv = {

6
src/kibana/components/visualize/spy/spy.js
View file

@ -22,14 +22,12 @@ define(function (require) {
$scope.modes = modes;
$scope.toggleDisplay = function () {
$scope.showPageToggle = !$scope.fullScreenSpy;
$scope.setSpyMode($scope.spyMode ? null : defaultMode);
};
$scope.toggleFullPage = function () {
fullPageSpy = $scope.spyMode.fill = !fullPageSpy;
// tell any listeners spyMode changed
$scope.$emit('change:spyMode', $scope.spyMode);
};
$scope.setSpyMode = function (newMode) {
@ -71,8 +69,6 @@ define(function (require) {
// wrapped in fn to enable early return
set();
if (change) $scope.$emit('change:spyMode', current);
};
}
};

34
src/kibana/components/visualize/visualize.js
View file

@ -24,28 +24,25 @@ define(function (require) {
template: require('text!components/visualize/visualize.html'),
link: function ($scope, $el, attr) {
var chart; // set in "vis" watcher
var $visualize = $el.find('.visualize-chart');
var $visChart = $el.find('.visualize-chart');
var $spy = $el.find('visualize-spy');
var minVisChartHeight = 180;
$scope.spyMode = false;
$scope.onlyShowSpy = false;
$scope.fullScreenSpy = false;
var applyClassNames = function () {
var fullSpy = ($scope.spyMode && ($scope.spyMode.fill || $scope.fullScreenSpy));
// external
$el.toggleClass('only-visualization', !$scope.spyMode);
$el.toggleClass('visualization-and-spy', $scope.spyMode && !$scope.onlyShowSpy);
$el.toggleClass('only-spy', Boolean($scope.onlyShowSpy));
$spy.toggleClass('only', Boolean($scope.onlyShowSpy));
$el.toggleClass('visualization-and-spy', $scope.spyMode && !fullSpy);
$el.toggleClass('only-spy', Boolean(fullSpy));
$spy.toggleClass('only', Boolean(fullSpy));
// internal
$visualize.toggleClass('spy-visible', Boolean($scope.spyMode));
$visualize.toggleClass('spy-only', Boolean($scope.onlyShowSpy));
};
var calcResponsiveStuff = function () {
$scope.onlyShowSpy = $scope.spyMode && ($scope.spyMode.fill || $el.height() < 550);
applyClassNames();
$visChart.toggleClass('spy-visible', Boolean($scope.spyMode));
$visChart.toggleClass('spy-only', Boolean(fullSpy));
};
// we need to wait for come watchers to fire at least once
@ -69,8 +66,13 @@ define(function (require) {
};
}());
$scope.$on('change:spyMode', function (event, spyMode) {
calcResponsiveStuff();
$scope.$watchCollection('spyMode', function (spyMode, oldSpyMode) {
$scope.spyMode = spyMode;
// if the spy has been opened, check chart height
if (spyMode && !oldSpyMode) {
$scope.fullScreenSpy = $visChart.height() < minVisChartHeight;
}
applyClassNames();
});
$scope.$watch('vis', prereq(function (vis, prevVis) {
@ -91,7 +93,7 @@ define(function (require) {
vis.vislibParams
);
chart = new visLib.Vis($visualize[0], vislibParams);
chart = new visLib.Vis($visChart[0], vislibParams);
_.each(vis.listeners, function (listener, event) {
chart.on(event, listener);

71
src/kibana/directives/paginate.js
View file

@ -15,45 +15,18 @@ define(function (require) {
$scope.paginate = {};
// pagination controls
// watchers on attributes
$scope.$watchCollection(attrs.list, function (list) {
$scope.list = list;
renderList();
});
$scope.$watch(attrs.perPage, function (perPage) {
$scope.paginate.perPage = perPage || perPageDefault;
});
$scope.$watch('paginate.perPage', renderList);
var getOtherWidth = $parse(attrs.otherWidth);
$scope.$watchCollection(attrs.list, function (list) {
$scope.pages = [];
if (!list) return;
var perPage = $scope.paginate.perPage;
var count = Math.ceil(list.length / perPage);
_.times(count, function (i) {
var start = perPage * i;
var page = list.slice(start, start + perPage);
page.number = i + 1;
page.i = i;
page.count = count;
page.first = page.number === 1;
page.last = page.number === count;
page.prev = $scope.pages[i - 1];
if (page.prev) page.prev.next = page;
$scope.pages.push(page);
});
// set the new page, or restore the previous page number
if ($scope.page && $scope.page.i < $scope.pages.length) {
$scope.page = $scope.pages[$scope.page.i];
} else {
$scope.page = $scope.pages[0];
}
});
$scope.$watch('page', function (newPage, oldPage) {
if (!newPage) {
delete $scope.otherPages;
@ -96,6 +69,38 @@ define(function (require) {
$scope.page = $scope.pages[number - 1] || $scope.pages[0];
}
};
function renderList() {
$scope.pages = [];
if (!$scope.list) return;
var perPage = $scope.paginate.perPage;
var count = Math.ceil($scope.list.length / perPage);
_.times(count, function (i) {
var start = perPage * i;
var page = $scope.list.slice(start, start + perPage);
page.number = i + 1;
page.i = i;
page.count = count;
page.first = page.number === 1;
page.last = page.number === count;
page.prev = $scope.pages[i - 1];
if (page.prev) page.prev.next = page;
$scope.pages.push(page);
});
// set the new page, or restore the previous page number
if ($scope.page && $scope.page.i < $scope.pages.length) {
$scope.page = $scope.pages[$scope.page.i];
} else {
$scope.page = $scope.pages[0];
}
}
}
};
});