Add: option to hide pivot table controls

This commit is contained in:
deecay 2017-02-20 15:09:48 +09:00
parent f9da6ddcdd
commit ac538c35e9
2 changed files with 62 additions and 33 deletions

View File

@ -2,6 +2,9 @@ import $ from 'jquery';
import 'pivottable';
import 'pivottable/dist/pivot.css';
import editorTemplate from './pivottable-editor.html';
function pivotTableRenderer() {
return {
restrict: 'E',
@ -12,48 +15,65 @@ function pivotTableRenderer() {
template: '',
replace: false,
link($scope, element) {
$scope.$watch('queryResult && queryResult.getData()', (data) => {
if (!data) {
return;
}
if ($scope.queryResult.getData() !== null) {
// We need to give the pivot table its own copy of the data, because it changes
// it which interferes with other visualizations.
data = $.extend(true, [], $scope.queryResult.getRawData());
const options = {
renderers: $.pivotUtilities.renderers,
onRefresh(config) {
const configCopy = Object.assign({}, config);
// delete some values which are functions
delete configCopy.aggregators;
delete configCopy.renderers;
delete configCopy.onRefresh;
// delete some bulky default values
delete configCopy.rendererOptions;
delete configCopy.localeStrings;
if ($scope.visualization) {
$scope.visualization.options = configCopy;
}
},
};
if ($scope.visualization) {
Object.assign(options, $scope.visualization.options);
function updatePivot() {
$scope.$watch('queryResult && queryResult.getData()', (data) => {
if (!data) {
return;
}
$(element).pivotUI(data, options, true);
}
});
if ($scope.queryResult.getData() !== null) {
// We need to give the pivot table its own copy of the data, because it changes
// it which interferes with other visualizations.
data = $.extend(true, [], $scope.queryResult.getRawData());
const options = {
renderers: $.pivotUtilities.renderers,
onRefresh(config) {
const configCopy = Object.assign({}, config);
// delete some values which are functions
delete configCopy.aggregators;
delete configCopy.renderers;
delete configCopy.onRefresh;
// delete some bulky default values
delete configCopy.rendererOptions;
delete configCopy.localeStrings;
if ($scope.visualization) {
$scope.visualization.options = configCopy;
}
},
};
if ($scope.visualization) {
Object.assign(options, $scope.visualization.options);
}
$(element).pivotUI(data, options, true);
if ($scope.visualization.options.controls.enabled) {
const controls = $('.pvtAxisContainer, .pvtRenderer, .pvtVals');
for (let i = 0; i < controls.length; i += 1) { controls[i].style.display = 'none'; }
}
}
});
}
$scope.$watch('queryResult && queryResult.getData()', updatePivot);
$scope.$watch('visualization.options.controls.enabled', updatePivot);
},
};
}
function pivotTableEditor() {
return {
restrict: 'E',
template: editorTemplate,
};
}
export default function (ngModule) {
ngModule.directive('pivotTableRenderer', pivotTableRenderer);
ngModule.directive('pivotTableEditor', pivotTableEditor);
ngModule.config((VisualizationProvider) => {
const editTemplate = '<div/>';
const editTemplate = '<pivot-table-editor></pivot-table-editor>';
const defaultOptions = {
};

View File

@ -0,0 +1,9 @@
<div class="form-horizontal">
<div class="form-group">
<div class="col-lg-6">
<input type="checkbox" ng-model="visualization.options.controls.enabled">
<i class="input-helper"></i> Hide Controls
<!--<input type="number" ng-model="visualization.options.height" class="form-control">-->
</div>
</div>
</div>