github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

Split editor state from saved state (#20323) (#20451)

Browse source
This commit is contained in:
Peter Pisljar 2018-07-04 18:53:53 +02:00 • committed by GitHub
parent b5fac1b9a6
commit 53d38799ac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
43 changed files with 370 additions and 286 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/core_plugins/input_control_vis/public/components/editor/controls_tab.js
View file

@ -55,65 +55,65 @@ export class ControlsTab extends Component {
}
setVisParam(paramName, paramValue) {
const params = _.cloneDeep(this.props.scope.vis.params);
const params = _.cloneDeep(this.props.editorState.params);
params[paramName] = paramValue;
this.props.stageEditorParams(params);
}
handleLabelChange = (controlIndex, evt) => {
const updatedControl = this.props.scope.vis.params.controls[controlIndex];
const updatedControl = this.props.editorState.params.controls[controlIndex];
updatedControl.label = evt.target.value;
this.setVisParam('controls', setControl(this.props.scope.vis.params.controls, controlIndex, updatedControl));
this.setVisParam('controls', setControl(this.props.editorState.params.controls, controlIndex, updatedControl));
}
handleIndexPatternChange = (controlIndex, indexPatternId) => {
const updatedControl = this.props.scope.vis.params.controls[controlIndex];
const updatedControl = this.props.editorState.params.controls[controlIndex];
updatedControl.indexPattern = indexPatternId;
updatedControl.fieldName = '';
this.setVisParam('controls', setControl(this.props.scope.vis.params.controls, controlIndex, updatedControl));
this.setVisParam('controls', setControl(this.props.editorState.params.controls, controlIndex, updatedControl));
}
handleFieldNameChange = (controlIndex, fieldName) => {
const updatedControl = this.props.scope.vis.params.controls[controlIndex];
const updatedControl = this.props.editorState.params.controls[controlIndex];
updatedControl.fieldName = fieldName;
this.setVisParam('controls', setControl(this.props.scope.vis.params.controls, controlIndex, updatedControl));
this.setVisParam('controls', setControl(this.props.editorState.params.controls, controlIndex, updatedControl));
}
handleCheckboxOptionChange = (controlIndex, optionName, evt) => {
const updatedControl = this.props.scope.vis.params.controls[controlIndex];
const updatedControl = this.props.editorState.params.controls[controlIndex];
updatedControl.options[optionName] = evt.target.checked;
this.setVisParam('controls', setControl(this.props.scope.vis.params.controls, controlIndex, updatedControl));
this.setVisParam('controls', setControl(this.props.editorState.params.controls, controlIndex, updatedControl));
}
handleNumberOptionChange = (controlIndex, optionName, evt) => {
const updatedControl = this.props.scope.vis.params.controls[controlIndex];
const updatedControl = this.props.editorState.params.controls[controlIndex];
updatedControl.options[optionName] = parseFloat(evt.target.value);
this.setVisParam('controls', setControl(this.props.scope.vis.params.controls, controlIndex, updatedControl));
this.setVisParam('controls', setControl(this.props.editorState.params.controls, controlIndex, updatedControl));
}
handleRemoveControl = (controlIndex) => {
this.setVisParam('controls', removeControl(this.props.scope.vis.params.controls, controlIndex));
this.setVisParam('controls', removeControl(this.props.editorState.params.controls, controlIndex));
}
moveControl = (controlIndex, direction) => {
this.setVisParam('controls', moveControl(this.props.scope.vis.params.controls, controlIndex, direction));
this.setVisParam('controls', moveControl(this.props.editorState.params.controls, controlIndex, direction));
}
handleAddControl = () => {
this.setVisParam('controls', addControl(this.props.scope.vis.params.controls, newControl(this.state.type)));
this.setVisParam('controls', addControl(this.props.editorState.params.controls, newControl(this.state.type)));
}
handleParentChange = (controlIndex, evt) => {
const updatedControl = this.props.scope.vis.params.controls[controlIndex];
const updatedControl = this.props.editorState.params.controls[controlIndex];
updatedControl.parent = evt.target.value;
this.setVisParam('controls', setControl(this.props.scope.vis.params.controls, controlIndex, updatedControl));
this.setVisParam('controls', setControl(this.props.editorState.params.controls, controlIndex, updatedControl));
}
renderControls() {
const lineageMap = getLineageMap(this.props.scope.vis.params.controls);
return this.props.scope.vis.params.controls.map((controlParams, controlIndex) => {
const lineageMap = getLineageMap(this.props.editorState.params.controls);
return this.props.editorState.params.controls.map((controlParams, controlIndex) => {
const parentCandidates = getParentCandidates(
this.props.scope.vis.params.controls,
this.props.editorState.params.controls,
controlParams.id,
lineageMap);
return (

9
src/core_plugins/input_control_vis/public/components/editor/controls_tab.test.js
View file

@ -49,6 +49,8 @@ const scopeMock = {
savedObjectsClient: savedObjectsClientMock,
indexPatterns: indexPatternsMock
},
},
editorState: {
params: {
'controls': [
{
@ -87,6 +89,7 @@ beforeEach(() => {
test('renders ControlsTab', () => {
const component = shallow(<ControlsTab
scope={scopeMock}
editorState={scopeMock.editorState}
stageEditorParams={stageEditorParams}
/>);
expect(component).toMatchSnapshot(); // eslint-disable-line
@ -95,6 +98,7 @@ test('renders ControlsTab', () => {
test('add control btn', () => {
const component = mount(<ControlsTab
scope={scopeMock}
editorState={scopeMock.editorState}
stageEditorParams={stageEditorParams}
/>);
findTestSubject(component, 'inputControlEditorAddBtn').simulate('click');
@ -104,12 +108,13 @@ test('add control btn', () => {
return false;
}
return true;
}, 'control not added to vis.params'));
}, 'control not added to editorState.params'));
});
test('remove control btn', () => {
const component = mount(<ControlsTab
scope={scopeMock}
editorState={scopeMock.editorState}
stageEditorParams={stageEditorParams}
/>);
findTestSubject(component, 'inputControlEditorRemoveControl0').simulate('click');
@ -134,6 +139,7 @@ test('remove control btn', () => {
test('move down control btn', () => {
const component = mount(<ControlsTab
scope={scopeMock}
editorState={scopeMock.editorState}
stageEditorParams={stageEditorParams}
/>);
findTestSubject(component, 'inputControlEditorMoveDownControl0').simulate('click');
@ -170,6 +176,7 @@ test('move down control btn', () => {
test('move up control btn', () => {
const component = mount(<ControlsTab
scope={scopeMock}
editorState={scopeMock.editorState}
stageEditorParams={stageEditorParams}
/>);
findTestSubject(component, 'inputControlEditorMoveUpControl1').simulate('click');

8
src/core_plugins/input_control_vis/public/components/editor/options_tab.js
View file

@ -30,7 +30,7 @@ import {
export class OptionsTab extends Component {
setVisParam = (paramName, paramValue) => {
const params = _.cloneDeep(this.props.scope.vis.params);
const params = _.cloneDeep(this.props.editorState.params);
params[paramName] = paramValue;
this.props.stageEditorParams(params);
}
@ -55,7 +55,7 @@ export class OptionsTab extends Component {
>
<EuiSwitch
label="Update Kibana filters on each change"
checked={this.props.scope.vis.params.updateFiltersOnChange}
checked={this.props.editorState.params.updateFiltersOnChange}
onChange={this.handleUpdateFiltersChange}
data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"
/>
@ -66,7 +66,7 @@ export class OptionsTab extends Component {
>
<EuiSwitch
label="Use time filter"
checked={this.props.scope.vis.params.useTimeFilter}
checked={this.props.editorState.params.useTimeFilter}
onChange={this.handleUseTimeFilter}
data-test-subj="inputControlEditorUseTimeFilterCheckbox"
/>
@ -77,7 +77,7 @@ export class OptionsTab extends Component {
>
<EuiSwitch
label="Pin filters to global state"
checked={this.props.scope.vis.params.pinFilters}
checked={this.props.editorState.params.pinFilters}
onChange={this.handlePinFilters}
data-test-subj="inputControlEditorPinFiltersCheckbox"
/>

6
src/core_plugins/input_control_vis/public/components/editor/options_tab.test.js
View file

@ -26,7 +26,7 @@ import {
} from './options_tab';
const scopeMock = {
vis: {
editorState: {
params: {
updateFiltersOnChange: false,
useTimeFilter: false
@ -42,6 +42,7 @@ beforeEach(() => {
test('renders OptionsTab', () => {
const component = shallow(<OptionsTab
scope={scopeMock}
editorState={scopeMock.editorState}
stageEditorParams={stageEditorParams}
/>);
expect(component).toMatchSnapshot(); // eslint-disable-line
@ -50,6 +51,7 @@ test('renders OptionsTab', () => {
test('updateFiltersOnChange', () => {
const component = mount(<OptionsTab
scope={scopeMock}
editorState={scopeMock.editorState}
stageEditorParams={stageEditorParams}
/>);
const checkbox = component.find('[data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"] input[type="checkbox"]');
@ -64,6 +66,7 @@ test('updateFiltersOnChange', () => {
test('useTimeFilter', () => {
const component = mount(<OptionsTab
scope={scopeMock}
editorState={scopeMock.editorState}
stageEditorParams={stageEditorParams}
/>);
const checkbox = component.find('[data-test-subj="inputControlEditorUseTimeFilterCheckbox"] input[type="checkbox"]');
@ -78,6 +81,7 @@ test('useTimeFilter', () => {
test('pinFilters', () => {
const component = mount(<OptionsTab
scope={scopeMock}
editorState={scopeMock.editorState}
stageEditorParams={stageEditorParams}
/>);
const checkbox = component.find('[data-test-subj="inputControlEditorPinFiltersCheckbox"] input[type="checkbox"]');

56
src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html
View file

@ -7,7 +7,7 @@
<select
id="gaugeType"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.gauge.gaugeType"
ng-model="editorState.params.gauge.gaugeType"
ng-options="mode for mode in collections.gaugeTypes"
></select>
</div>
@ -18,16 +18,16 @@
Percentage Mode
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="vis.params.gauge.percentageMode">
<input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="editorState.params.gauge.percentageMode">
</div>
</div>
<div class="kuiSideBarFormRow" ng-hide="vis.params.gauge.type === 'simple'">
<div class="kuiSideBarFormRow" ng-hide="editorState.params.gauge.type === 'simple'">
<label class="kuiSideBarFormRow__label" for="verticalSplit">
Vertical Split
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="verticalSplit" type="checkbox" ng-model="vis.params.gauge.verticalSplit">&nbsp;
<input class="kuiCheckBox" id="verticalSplit" type="checkbox" ng-model="editorState.params.gauge.verticalSplit">&nbsp;
<icon-tip
content="'Shows gauges one under another'"
position="'right'"
@ -41,7 +41,7 @@
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="displayWarnings" type="checkbox" ng-model="vis.params.isDisplayWarning">
<input class="kuiCheckBox" id="displayWarnings" type="checkbox" ng-model="editorState.params.isDisplayWarning">
&nbsp;
<icon-tip
content="'Turns on/off warnings. When turned on, a warning will be shown if not all labels could be displayed.'"
@ -55,7 +55,7 @@
Show Legend
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="addLegend" type="checkbox" ng-model="vis.params.addLegend">
<input class="kuiCheckBox" id="addLegend" type="checkbox" ng-model="editorState.params.addLegend">
</div>
</div>
@ -64,11 +64,11 @@
Show Labels
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="vis.params.gauge.labels.show">
<input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="editorState.params.gauge.labels.show">
</div>
</div>
<div class="kuiSideBarFormRow" ng-show="vis.params.gauge.labels.show">
<div class="kuiSideBarFormRow" ng-show="editorState.params.gauge.labels.show">
<label class="kuiSideBarFormRow__label" for="subText">
Sub Text
</label>
@ -76,7 +76,7 @@
<input
id="subText"
class="kuiInput kuiSideBarInput"
ng-model="vis.params.gauge.style.subText"
ng-model="editorState.params.gauge.style.subText"
type="text"
>
</div>
@ -84,14 +84,14 @@
<div
class="kuiSideBarFormRow"
ng-hide="vis.params.gauge.type === 'simple'"
ng-show="vis.params.gauge.colorsRange.length > 1"
ng-hide="editorState.params.gauge.type === 'simple'"
ng-show="editorState.params.gauge.colorsRange.length > 1"
>
<label class="kuiSideBarFormRow__label" for="extendRange">
Auto Extend Range
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="extendRange" type="checkbox" ng-model="vis.params.gauge.extendRange">
<input class="kuiCheckBox" id="extendRange" type="checkbox" ng-model="editorState.params.gauge.extendRange">
&nbsp;
<icon-tip
content="'Extends range to the maximum value in your data'"
@ -123,7 +123,7 @@
<div id="gaugeOptionsRanges" ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
<div class="kuiSideBarSection">
<table class="vis-editor-agg-editor-ranges form-group" ng-show="vis.params.gauge.colorsRange.length">
<table class="vis-editor-agg-editor-ranges form-group" ng-show="editorState.params.gauge.colorsRange.length">
<tr>
<th scope="col">
<label id="gaugeOptionsCustomRangeFrom">From</label>
@ -133,7 +133,7 @@
</th>
</tr>
<tr ng-repeat="range in vis.params.gauge.colorsRange track by $index">
<tr ng-repeat="range in editorState.params.gauge.colorsRange track by $index">
<td>
<input
aria-labelledby="gaugeOptionsCustomRangeFrom"
@ -160,7 +160,7 @@
<button
type="button"
ng-click="removeRange($index)"
ng-show="vis.params.gauge.colorsRange.length > 1"
ng-show="editorState.params.gauge.colorsRange.length > 1"
class="kuiButton kuiButton--danger kuiButton--small">
<i class="fa fa-times"></i>
</button>
@ -168,7 +168,7 @@
</tr>
</table>
<div class="hintbox" ng-show="!vis.params.gauge.colorsRange.length">
<div class="hintbox" ng-show="!editorState.params.gauge.colorsRange.length">
<p>
<i class="fa fa-danger text-danger"></i>
<strong>Required:</strong> You must specify at least one range.
@ -185,7 +185,7 @@
</div>
</div>
</div>
<div ng-show="vis.params.gauge.colorsRange.length > 1">
<div ng-show="editorState.params.gauge.colorsRange.length > 1">
<div class="kuiSideBarCollapsibleTitle">
<div
kbn-accessible-click
@ -218,7 +218,7 @@
<select
id="colorSchema"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.gauge.colorSchema"
ng-model="editorState.params.gauge.colorSchema"
ng-options="mode for mode in collections.colorSchemas"
></select>
</div>
@ -230,7 +230,7 @@
Reverse Color Schema
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="vis.params.gauge.invertColors">
<input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.gauge.invertColors">
</div>
</div>
</div>
@ -263,13 +263,13 @@
<div id="gaugeOptionsStyle" 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">
<div ng-hide="editorState.params.gauge.type === 'simple'">
<div class="kuiSideBarFormRow" ng-show="editorState.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">
<input class="kuiCheckBox" id="labelColor" type="checkbox" ng-model="editorState.params.gauge.style.labelColor">
</div>
</div>
<div class="kuiSideBarFormRow">
@ -277,11 +277,11 @@
Show Scale
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showScale" type="checkbox" ng-model="vis.params.gauge.scale.show">
<input class="kuiCheckBox" id="showScale" type="checkbox" ng-model="editorState.params.gauge.scale.show">
</div>
</div>
</div>
<div ng-show="vis.params.gauge.type === 'simple'">
<div ng-show="editorState.params.gauge.type === 'simple'">
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="gaugeColorMode">
Color
@ -290,7 +290,7 @@
<select
id="gaugeColorMode"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.gauge.gaugeColorMode"
ng-model="editorState.params.gauge.gaugeColorMode"
ng-options="mode for mode in collections.gaugeColorMode"
></select>
</div>
@ -303,16 +303,16 @@
<input
id="backTextColor"
class="kuiInput kuiSideBarInput"
ng-model="vis.params.gauge.style.bgFill"
ng-model="editorState.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)
Font Size (<span ng-bind="editorState.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" />
<input type="range" ng-model="editorState.params.gauge.style.fontSize" class="form-control" min="12" max="120" />
</div>
</div>
</div>

44
src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.js
View file

@ -31,45 +31,45 @@ module.directive('gaugeOptions', function () {
$scope.collections = $scope.vis.type.editorConfig.collections;
$scope.showColorRange = true;
$scope.$watch('vis.params.gauge.gaugeType', type => {
$scope.$watch('editorState.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;
$scope.editorState.params.gauge.type = 'meter';
$scope.editorState.params.gauge.minAngle = undefined;
$scope.editorState.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;
$scope.editorState.params.gauge.type = 'meter';
$scope.editorState.params.gauge.minAngle = 0;
$scope.editorState.params.gauge.maxAngle = 2 * Math.PI;
break;
case 'Metric':
$scope.vis.params.gauge.type = 'simple';
$scope.editorState.params.gauge.type = 'simple';
}
});
const updateLegend = () => {
if (!$scope.vis.params.gauge.style.bgColor && !$scope.vis.params.gauge.style.labelColor) {
$scope.vis.params.addLegend = false;
if (!$scope.editorState.params.gauge.style.bgColor && !$scope.editorState.params.gauge.style.labelColor) {
$scope.editorState.params.addLegend = false;
} else {
$scope.vis.params.addLegend = true;
$scope.editorState.params.addLegend = true;
}
};
$scope.$watch('vis.params.gauge.gaugeColorMode', newValue => {
$scope.$watch('editorState.params.gauge.gaugeColorMode', newValue => {
switch (newValue) {
case 'Labels':
$scope.vis.params.gauge.style.labelColor = true;
$scope.vis.params.gauge.style.bgColor = false;
$scope.editorState.params.gauge.style.labelColor = true;
$scope.editorState.params.gauge.style.bgColor = false;
break;
case 'Background':
$scope.vis.params.gauge.style.labelColor = false;
$scope.vis.params.gauge.style.bgColor = true;
$scope.editorState.params.gauge.style.labelColor = false;
$scope.editorState.params.gauge.style.bgColor = true;
break;
case 'None':
$scope.vis.params.gauge.style.labelColor = false;
$scope.vis.params.gauge.style.bgColor = false;
$scope.editorState.params.gauge.style.labelColor = false;
$scope.editorState.params.gauge.style.bgColor = false;
break;
}
updateLegend();
@ -82,18 +82,18 @@ module.directive('gaugeOptions', function () {
$scope.getGreaterThan = function (index) {
if (index === 0) return 0;
return $scope.vis.params.gauge.colorsRange[index - 1].to;
return $scope.editorState.params.gauge.colorsRange[index - 1].to;
};
$scope.addRange = function () {
const previousRange = _.last($scope.vis.params.gauge.colorsRange);
const previousRange = _.last($scope.editorState.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.editorState.params.gauge.colorsRange.push({ from: from, to: to });
};
$scope.removeRange = function (index) {
$scope.vis.params.gauge.colorsRange.splice(index, 1);
$scope.editorState.params.gauge.colorsRange.splice(index, 1);
};
$scope.getColor = function (index) {

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

@ -7,7 +7,7 @@
<select
id="colorSchema"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.colorSchema"
ng-model="editorState.params.colorSchema"
ng-options="mode for mode in collections.colorSchemas"
></select>
</div>
@ -26,7 +26,7 @@
Reverse Color Schema
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="vis.params.invertColors">
<input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.invertColors">
</div>
</div>
@ -38,7 +38,7 @@
<select
id="axisScale"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.valueAxes[0].scale.type"
ng-model="editorState.params.valueAxes[0].scale.type"
ng-options="mode for mode in collections.scales"
></select>
</div>
@ -49,20 +49,20 @@
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="editorState.params.valueAxes[0].scale.defaultYExtents">
</div>
</div>
<div class="kuiSideBarFormRow" ng-if="!vis.params.setColorRange">
<div class="kuiSideBarFormRow" ng-if="!editorState.params.setColorRange">
<label class="kuiSideBarFormRow__label" for="percentageMode">
Percentage Mode
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="vis.params.percentageMode">
<input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="editorState.params.percentageMode">
</div>
</div>
<div class="kuiSideBarFormRow" ng-if="!vis.params.setColorRange">
<div class="kuiSideBarFormRow" ng-if="!editorState.params.setColorRange">
<label class="kuiSideBarFormRow__label" for="colorsNumber">
Number of colors
</label>
@ -70,7 +70,7 @@
<input
id="colorsNumber"
class="kuiSideBarInput"
ng-model="vis.params.colorsNumber"
ng-model="editorState.params.colorsNumber"
type="number"
greater-than="1"
less-than="11"
@ -99,7 +99,7 @@
</div>
<input
aria-label="Enable custom ranges"
ng-model="vis.params.setColorRange"
ng-model="editorState.params.setColorRange"
type="checkbox"
class="kuiSideBarSectionTitle__action"
ng-click="toggleColorRangeSection(true)"
@ -109,12 +109,12 @@
<div
id="heatmapOptionsRanges"
ng-if="vis.params.setColorRange"
ng-if="editorState.params.setColorRange"
ng-show="showColorRange"
class="kuiSideBarCollapsibleSection"
>
<div class="kuiSideBarSection">
<table class="vis-editor-agg-editor-ranges form-group" ng-show="vis.params.colorsRange.length">
<table class="vis-editor-agg-editor-ranges form-group" ng-show="editorState.params.colorsRange.length">
<tr>
<th scope="col">
<label id="heatmapCustomRangeFrom">From</label>
@ -124,7 +124,7 @@
</th>
</tr>
<tr ng-repeat="range in vis.params.colorsRange track by $index">
<tr ng-repeat="range in editorState.params.colorsRange track by $index">
<td>
<input
aria-labelledby="heatmapCustomRangeFrom"
@ -157,7 +157,7 @@
</tr>
</table>
<div class="hintbox" ng-show="!vis.params.colorsRange.length">
<div class="hintbox" ng-show="!editorState.params.colorsRange.length">
<p>
<span class="kuiIcon fa-danger text-danger"></span>
<strong>Required:</strong> You must specify at least one range.
@ -198,14 +198,14 @@
</div>
<input
aria-label="Show labels"
ng-model="vis.params.valueAxes[0].labels.show"
ng-model="editorState.params.valueAxes[0].labels.show"
type="checkbox"
class="kuiSideBarSectionTitle__action"
>
</div>
<div
id="heatmapOptionsLabels"
ng-if="vis.params.valueAxes[0].labels.show"
ng-if="editorState.params.valueAxes[0].labels.show"
ng-show="showLabels"
class="kuiSideBarCollapsibleSection"
>
@ -224,11 +224,11 @@
Overwrite automatic color
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="overwriteColor" type="checkbox" ng-model="vis.params.valueAxes[0].labels.overwriteColor">
<input class="kuiCheckBox" id="overwriteColor" type="checkbox" ng-model="editorState.params.valueAxes[0].labels.overwriteColor">
</div>
</div>
<div class="kuiSideBarFormRow" ng-show="vis.params.valueAxes[0].labels.overwriteColor">
<div class="kuiSideBarFormRow" ng-show="editorState.params.valueAxes[0].labels.overwriteColor">
<label class="kuiSideBarFormRow__label" for="labelColor">
Color
</label>
@ -236,7 +236,7 @@
<input
id="labelColor"
class="kuiSideBarInput"
ng-model="vis.params.valueAxes[0].labels.color"
ng-model="editorState.params.valueAxes[0].labels.color"
>
</div>
</div>

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

@ -35,13 +35,13 @@ module.directive('heatmapOptions', function () {
$scope.showColorRange = false;
$scope.showLabels = false;
$scope.customColors = false;
$scope.valueAxis = $scope.vis.params.valueAxes[0];
$scope.valueAxis = $scope.editorState.params.valueAxes[0];
$scope.options = {
rotateLabels: $scope.valueAxis.labels.rotate === verticalRotation
};
$scope.$watch('options.rotateLabels', rotate => {
$scope.vis.params.valueAxes[0].labels.rotate = rotate ? verticalRotation : 0;
$scope.editorState.params.valueAxes[0].labels.rotate = rotate ? verticalRotation : 0;
});
$scope.resetColors = function () {
@ -51,31 +51,31 @@ module.directive('heatmapOptions', function () {
$scope.toggleColorRangeSection = function (checkbox = false) {
$scope.showColorRange = !$scope.showColorRange;
if (checkbox && !$scope.vis.params.setColorRange) $scope.showColorRange = false;
if (!checkbox && $scope.showColorRange && !$scope.vis.params.setColorRange) $scope.vis.params.setColorRange = true;
if (checkbox && !$scope.editorState.params.setColorRange) $scope.showColorRange = false;
if (!checkbox && $scope.showColorRange && !$scope.editorState.params.setColorRange) $scope.editorState.params.setColorRange = true;
};
$scope.toggleLabelSection = function (checkbox = false) {
$scope.showLabels = !$scope.showLabels;
if (checkbox && !$scope.valueAxis.labels.show) $scope.showLabels = false;
if ($scope.showLabels && !$scope.valueAxis.labels.show) {
$scope.vis.params.valueAxes[0].labels.show = true;
$scope.editorState.params.valueAxes[0].labels.show = true;
}
};
$scope.getGreaterThan = function (index) {
if (index === 0) return;
return $scope.vis.params.colorsRange[index - 1].to;
return $scope.editorState.params.colorsRange[index - 1].to;
};
$scope.addRange = function () {
const previousRange = _.last($scope.vis.params.colorsRange);
const previousRange = _.last($scope.editorState.params.colorsRange);
const from = previousRange ? previousRange.to : 0;
$scope.vis.params.colorsRange.push({ from: from, to: null });
$scope.editorState.params.colorsRange.push({ from: from, to: null });
};
$scope.removeRange = function (index) {
$scope.vis.params.colorsRange.splice(index, 1);
$scope.editorState.params.colorsRange.splice(index, 1);
};
$scope.getColor = function (index) {

2
src/core_plugins/kbn_vislib_vis_types/public/controls/line_interpolation_option.html
View file

@ -4,7 +4,7 @@
</label>
<select
class="form-control"
ng-model="vis.params.interpolate"
ng-model="editorState.params.interpolate"
ng-options="mode.value as mode.text for mode in vis.type.params.interpolationModes"
>
</select>

12
src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html
View file

@ -12,7 +12,7 @@
Show
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="categoryAxisShow" type="checkbox" ng-model="vis.params.categoryAxes[0].show">
<input class="kuiCheckBox" id="categoryAxisShow" type="checkbox" ng-model="editorState.params.categoryAxes[0].show">
</div>
</div>
@ -24,7 +24,7 @@
<select
id="categoryAxisPosition"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.categoryAxes[0].position"
ng-model="editorState.params.categoryAxes[0].position"
ng-options="mode for mode in vis.type.editorConfig.collections.positions"
></select>
</div>
@ -66,7 +66,7 @@
Show Labels
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="categoryAxisShowLabels" type="checkbox" ng-model="vis.params.categoryAxes[0].labels.show">
<input class="kuiCheckBox" id="categoryAxisShowLabels" type="checkbox" ng-model="editorState.params.categoryAxes[0].labels.show">
</div>
</div>
@ -75,7 +75,7 @@
Filter Labels
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="categoryAxisShowFilter" type="checkbox" ng-model="vis.params.categoryAxes[0].labels.filter">
<input class="kuiCheckBox" id="categoryAxisShowFilter" type="checkbox" ng-model="editorState.params.categoryAxes[0].labels.filter">
</div>
</div>
@ -87,7 +87,7 @@
<select
id="categoryAxisRotateLabels"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.categoryAxes[0].labels.rotate"
ng-model="editorState.params.categoryAxes[0].labels.rotate"
ng-options="mode.value as mode.name for mode in rotateOptions"
></select>
</div>
@ -102,7 +102,7 @@
id="categoryAxisTruncateLabels"
class="kuiInput kuiSideBarInput"
type="number"
ng-model="vis.params.categoryAxes[0].labels.truncate"
ng-model="editorState.params.categoryAxes[0].labels.truncate"
>
</div>
</div>

6
src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid.html
View file

@ -27,7 +27,7 @@
X-Axis Lines
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showCategoryLines" type="checkbox" ng-model="vis.params.grid.categoryLines">
<input class="kuiCheckBox" id="showCategoryLines" type="checkbox" ng-model="editorState.params.grid.categoryLines">
</div>
</div>
@ -39,8 +39,8 @@
<select
id="gridAxis"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.grid.valueAxis"
ng-options="axis.id as axis.name for axis in vis.params.valueAxes track by axis.id"
ng-model="editorState.params.grid.valueAxis"
ng-options="axis.id as axis.name for axis in editorState.params.valueAxes track by axis.id"
>
<option value="">Don't show</option>
</select>

4
src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html
View file

@ -6,7 +6,7 @@
</div>
<div
ng-repeat="chart in vis.params.seriesParams track by $index"
ng-repeat="chart in editorState.params.seriesParams track by $index"
class="kuiSideBarSection"
>
<div class="kuiSideBarCollapsibleTitle">
@ -73,7 +73,7 @@
ng-model="chart.valueAxis"
ng-change="changeValueAxis($index)"
>
<option ng-repeat="axis in vis.params.valueAxes track by axis.id" value="{{axis.id}}">{{axis.name}}</option>
<option ng-repeat="axis in editorState.params.valueAxes track by axis.id" value="{{axis.id}}">{{axis.name}}</option>
<option value="new">New Axis ...</option>
</select>
</div>

26
src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.js
View file

@ -42,26 +42,26 @@ module.directive('vislibSeries', function () {
id: id,
label: label
},
valueAxis: last ? last.valueAxis : $scope.vis.params.valueAxes[0].id
valueAxis: last ? last.valueAxis : $scope.editorState.params.valueAxes[0].id
};
}
$scope.series = $scope.vis.params.seriesParams;
$scope.series = $scope.editorState.params.seriesParams;
$scope.$watch(() => {
return $scope.vis.aggs.map(agg => {
return $scope.editorState.aggs.map(agg => {
return agg.makeLabel();
}).join();
}, () => {
const schemaTitle = $scope.vis.type.schemas.metrics[0].title;
const metrics = $scope.vis.aggs.filter(agg => {
const metrics = $scope.editorState.aggs.filter(agg => {
const isMetric = agg.type && agg.type.type === 'metrics';
return isMetric && agg.schema.title === schemaTitle;
});
// update labels for existing params or create new one
$scope.vis.params.seriesParams = metrics.map(agg => {
const params = $scope.vis.params.seriesParams.find(param => param.data.id === agg.id);
$scope.editorState.params.seriesParams = metrics.map(agg => {
const params = $scope.editorState.params.seriesParams.find(param => param.data.id === agg.id);
if (params) {
params.data.label = agg.makeLabel();
return params;
@ -73,22 +73,22 @@ module.directive('vislibSeries', function () {
});
$scope.$watch(() => {
return $scope.vis.params.seriesParams.map(series => series.type).join();
return $scope.editorState.params.seriesParams.map(series => series.type).join();
}, () => {
const types = _.uniq(_.map($scope.vis.params.seriesParams, 'type'));
const types = _.uniq(_.map($scope.editorState.params.seriesParams, 'type'));
$scope.vis.type.type = types.length === 1 ? types[0] : 'histogram';
});
$scope.$watch('vis.params.valueAxes.length', () => {
$scope.vis.params.seriesParams.forEach(series => {
if (!$scope.vis.params.valueAxes.find(axis => axis.id === series.valueAxis)) {
series.valueAxis = $scope.vis.params.valueAxes[0].id;
$scope.$watch('editorState.params.valueAxes.length', () => {
$scope.editorState.params.seriesParams.forEach(series => {
if (!$scope.editorState.params.valueAxes.find(axis => axis.id === series.valueAxis)) {
series.valueAxis = $scope.editorState.params.valueAxes[0].id;
}
});
});
$scope.changeValueAxis = (index) => {
const series = $scope.vis.params.seriesParams[index];
const series = $scope.editorState.params.seriesParams[index];
if (series.valueAxis === 'new') {
const axis = $scope.addValueAxis();
series.valueAxis = axis.id;

4
src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html
View file

@ -16,7 +16,7 @@
</div>
<div
ng-repeat="axis in vis.params.valueAxes track by axis.id"
ng-repeat="axis in editorState.params.valueAxes track by axis.id"
class="kuiSideBarSection"
>
<div class="kuiSideBarCollapsibleTitle">
@ -41,7 +41,7 @@
<div tooltip="{{getSeries(axis)}}">{{getSeriesShort(axis)}}</div>
<button
ng-hide="vis.params.valueAxes.length === 1"
ng-hide="editorState.params.valueAxes.length === 1"
aria-label="Remove Y axis"
ng-click="removeValueAxis(axis)"
tooltip="Remove Y axis"

30
src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.js
View file

@ -54,9 +54,9 @@ module.directive('vislibValueAxes', function () {
{ name: 'angled', value: 75 },
];
$scope.$watch('vis.params.categoryAxes[0].position', position => {
$scope.$watch('editorState.params.categoryAxes[0].position', position => {
isCategoryAxisHorizontal = ['top', 'bottom'].includes(position);
$scope.vis.params.valueAxes.forEach(axis => {
$scope.editorState.params.valueAxes.forEach(axis => {
const axisIsHorizontal = ['top', 'bottom'].includes(axis.position);
if (axisIsHorizontal === isCategoryAxisHorizontal) {
axis.position = mapPosition(axis.position);
@ -66,8 +66,8 @@ module.directive('vislibValueAxes', function () {
});
$scope.getSeries = function (axis) {
const isFirst = $scope.vis.params.valueAxes[0] === axis;
const series = $scope.vis.params.seriesParams.filter(series =>
const isFirst = $scope.editorState.params.valueAxes[0] === axis;
const series = $scope.editorState.params.seriesParams.filter(series =>
(series.valueAxis === axis.id || (isFirst && !series.valueAxis))
);
return series.map(series => series.data.label).join(', ');
@ -86,9 +86,9 @@ module.directive('vislibValueAxes', function () {
};
$scope.addValueAxis = function () {
const firstAxis = $scope.vis.params.valueAxes[0];
const firstAxis = $scope.editorState.params.valueAxes[0];
const newAxis = _.cloneDeep(firstAxis);
newAxis.id = 'ValueAxis-' + $scope.vis.params.valueAxes.reduce((value, axis) => {
newAxis.id = 'ValueAxis-' + $scope.editorState.params.valueAxes.reduce((value, axis) => {
if (axis.id.substr(0, 10) === 'ValueAxis-') {
const num = parseInt(axis.id.substr(10));
if (num >= value) value = num + 1;
@ -98,7 +98,7 @@ module.directive('vislibValueAxes', function () {
newAxis.position = mapPositionOpposite(firstAxis.position);
const axisName = _.capitalize(newAxis.position) + 'Axis-';
newAxis.name = axisName + $scope.vis.params.valueAxes.reduce((value, axis) => {
newAxis.name = axisName + $scope.editorState.params.valueAxes.reduce((value, axis) => {
if (axis.name.substr(0, axisName.length) === axisName) {
const num = parseInt(axis.name.substr(axisName.length));
if (num >= value) value = num + 1;
@ -106,13 +106,13 @@ module.directive('vislibValueAxes', function () {
return value;
}, 1);
$scope.vis.params.valueAxes.push(newAxis);
$scope.editorState.params.valueAxes.push(newAxis);
return newAxis;
};
$scope.removeValueAxis = function (axis) {
if ($scope.vis.params.valueAxes.length > 1) {
_.remove($scope.vis.params.valueAxes, function (valAxis) {
if ($scope.editorState.params.valueAxes.length > 1) {
_.remove($scope.editorState.params.valueAxes, function (valAxis) {
return valAxis.id === axis.id;
});
}
@ -127,7 +127,7 @@ module.directive('vislibValueAxes', function () {
$scope.updateAxisName = function (axis) {
const axisName = _.capitalize(axis.position) + 'Axis-';
axis.name = axisName + $scope.vis.params.valueAxes.reduce((value, axis) => {
axis.name = axisName + $scope.editorState.params.valueAxes.reduce((value, axis) => {
if (axis.name.substr(0, axisName.length) === axisName) {
const num = parseInt(axis.name.substr(axisName.length));
if (num >= value) value = num + 1;
@ -138,15 +138,15 @@ module.directive('vislibValueAxes', function () {
const lastAxisTitles = {};
$scope.updateAxisTitle = function () {
$scope.vis.params.valueAxes.forEach((axis, axisNumber) => {
$scope.editorState.params.valueAxes.forEach((axis, axisNumber) => {
let label = '';
const isFirst = axisNumber === 0;
const matchingSeries = [];
$scope.vis.params.seriesParams.forEach((series, i) => {
$scope.editorState.params.seriesParams.forEach((series, i) => {
const isMatchingSeries = (isFirst && !series.valueAxis) || (series.valueAxis === axis.id);
if (isMatchingSeries) {
let seriesNumber = 0;
$scope.vis.getAggConfig().forEach(agg => {
$scope.editorState.aggs.forEach(agg => {
if (agg.schema.name === 'metric') {
if (seriesNumber === i) matchingSeries.push(agg);
seriesNumber++;
@ -165,7 +165,7 @@ module.directive('vislibValueAxes', function () {
};
$scope.$watch(() => {
return $scope.vis.getAggConfig().map(agg => {
return $scope.editorState.aggs.map(agg => {
return agg.makeLabel();
}).join();
}, () => {

28
src/core_plugins/kbn_vislib_vis_types/public/controls/point_series_options.html
View file

@ -1,27 +1,27 @@
<div>
<div class="vis-option-item" ng-show="vis.hasSchemaAgg('segment', 'date_histogram')">
<label>
<input type="checkbox" ng-model="vis.params.addTimeMarker" ng-checked="vis.params.addTimeMarker">
<input type="checkbox" ng-model="editorState.params.addTimeMarker" ng-checked="editorState.params.addTimeMarker">
Current time marker
</label>
</div>
<div class="vis-option-item">
<label>
<input type="checkbox" ng-model="vis.params.setYExtents">
<input type="checkbox" ng-model="editorState.params.setYExtents">
Set Y-Axis Extents
</label>
<div ng-if="vis.params.setYExtents">
<div ng-if="editorState.params.setYExtents">
<label>
y-max
<input name="yMax"
class="form-control"
type="number"
step="0.1"
greater-than="{{vis.params.yAxis.min}}"
ng-model="vis.params.yAxis.max"
ng-required="vis.params.setYExtents">
greater-than="{{editorState.params.yAxis.min}}"
ng-model="editorState.params.yAxis.max"
ng-required="editorState.params.setYExtents">
</label>
<div ng-show="vis.params.yAxis.min >= vis.params.yAxis.max">
<div ng-show="editorState.params.yAxis.min >= editorState.params.yAxis.max">
<span class="text-danger">Max must be greater than min</span>
</div>
<label>
@ -30,24 +30,24 @@
class="form-control"
type="number"
step="0.1"
less-than="{{vis.params.yAxis.max}}"
greater-than="{{vis.params.scale === 'log' ? 0 : ''}}"
ng-model="vis.params.yAxis.min"
ng-required="vis.params.setYExtents">
less-than="{{editorState.params.yAxis.max}}"
greater-than="{{editorState.params.scale === 'log' ? 0 : ''}}"
ng-model="editorState.params.yAxis.min"
ng-required="editorState.params.setYExtents">
</label>
</div>
<div ng-show="vis.params.setYExtents && vis.params.scale === 'log' && vis.params.yAxis.min <= 0">
<div ng-show="editorState.params.setYExtents && editorState.params.scale === 'log' && editorState.params.yAxis.min <= 0">
<span class="text-danger">Min must exceed 0 when a log scale is selected</span>
</div>
<div class="vis-option-item">
<label>
<input type="checkbox" ng-model="vis.params.defaultYExtents" ng-disabled="vis.params.setYExtents">
<input type="checkbox" ng-model="editorState.params.defaultYExtents" ng-disabled="editorState.params.setYExtents">
Scale Y-Axis to Data Bounds
</label>
</div>
<div class="vis-option-item">
<label>
<input type="checkbox" ng-model="vis.params.orderBucketsBySum">
<input type="checkbox" ng-model="editorState.params.orderBucketsBySum">
Order buckets by descending sum
</label>
</div>

2
src/core_plugins/kbn_vislib_vis_types/public/controls/radius_ratio_option.html
View file

@ -6,5 +6,5 @@
position="'right'"
></icon-tip>
</label>
<input type="range" step="2" min="1" max="100" class="form-control" ng-model="vis.params.radiusRatio" />
<input type="range" step="2" min="1" max="100" class="form-control" ng-model="editorState.params.radiusRatio" />
</div>

4
src/core_plugins/kbn_vislib_vis_types/public/controls/vislib_basic_options.html
View file

@ -7,7 +7,7 @@
<select
id="visualizeBasicSettingsLegendPosition"
class="form-control"
ng-model="vis.params.legendPosition"
ng-model="editorState.params.legendPosition"
ng-options="position.value as position.text for position in vis.type.editorConfig.collections.legendPositions"
>
</select>
@ -19,7 +19,7 @@
Show Tooltip
</label>
<div class="kuiSideBarFormRow__control">
<input id="showTooltip" type="checkbox" ng-model="vis.params.addTooltip">
<input id="showTooltip" type="checkbox" ng-model="editorState.params.addTooltip">
</div>
</div>
</div>

26
src/core_plugins/kbn_vislib_vis_types/public/editors/__tests__/point_series.js
View file

@ -54,6 +54,10 @@ describe('point series editor', function () {
indexPattern = Private(FixturesStubbedLogstashIndexPatternProvider);
$parentScope = $rootScope;
$parentScope.vis = new Vis(indexPattern, makeConfig());
$parentScope.editorState = {
params: $parentScope.vis.params,
aggs: $parentScope.vis.aggs,
};
$parentScope.savedVis = {};
// share the scope
@ -78,15 +82,15 @@ describe('point series editor', function () {
});
it('should show correct series', function () {
expect($parentScope.vis.params.seriesParams.length).to.be(1);
expect($parentScope.vis.params.seriesParams[0].data.label).to.be('Count');
expect($parentScope.editorState.params.seriesParams.length).to.be(1);
expect($parentScope.editorState.params.seriesParams[0].data.label).to.be('Count');
});
it('should update series when new agg is added', function () {
const aggConfig = new AggConfig($parentScope.vis, { type: 'avg', schema: 'metric', params: { field: 'bytes' } });
$parentScope.vis.aggs.push(aggConfig);
$parentScope.$digest();
expect($parentScope.vis.params.seriesParams.length).to.be(2);
expect($parentScope.editorState.params.seriesParams.length).to.be(2);
});
it('should only allow left and right value axis position when category axis is horizontal', function () {
@ -97,9 +101,9 @@ describe('point series editor', function () {
});
it('should only allow top and bottom value axis position when category axis is vertical', function () {
$parentScope.vis.params.categoryAxes[0].position = 'left';
$parentScope.editorState.params.categoryAxes[0].position = 'left';
$parentScope.$digest();
expect($parentScope.vis.params.valueAxes[0].position).to.be('bottom');
expect($parentScope.editorState.params.valueAxes[0].position).to.be('bottom');
expect($parentScope.isPositionDisabled('top')).to.be(false);
expect($parentScope.isPositionDisabled('bottom')).to.be(false);
expect($parentScope.isPositionDisabled('left')).to.be(true);
@ -108,28 +112,28 @@ describe('point series editor', function () {
it('should add value axis', function () {
$parentScope.addValueAxis();
expect($parentScope.vis.params.valueAxes.length).to.be(2);
expect($parentScope.editorState.params.valueAxes.length).to.be(2);
});
it('should remove value axis', function () {
$parentScope.addValueAxis();
$parentScope.removeValueAxis({ id: 'ValueAxis-2' });
expect($parentScope.vis.params.valueAxes.length).to.be(1);
expect($parentScope.editorState.params.valueAxes.length).to.be(1);
});
it('should not allow to remove the last value axis', function () {
$parentScope.removeValueAxis({ id: 'ValueAxis-1' });
expect($parentScope.vis.params.valueAxes.length).to.be(1);
expect($parentScope.editorState.params.valueAxes.length).to.be(1);
});
it('should set the value axis title if its not set', function () {
$parentScope.updateAxisTitle();
expect($parentScope.vis.params.valueAxes[0].title.text).to.equal('Count');
expect($parentScope.editorState.params.valueAxes[0].title.text).to.equal('Count');
});
it('should not update the value axis title if custom title was set', function () {
$parentScope.vis.params.valueAxes[0].title.text = 'Custom Title';
$parentScope.editorState.params.valueAxes[0].title.text = 'Custom Title';
$parentScope.updateAxisTitle();
expect($parentScope.vis.params.valueAxes[0].title.text).to.equal('Custom Title');
expect($parentScope.editorState.params.valueAxes[0].title.text).to.equal('Custom Title');
});
});

10
src/core_plugins/kbn_vislib_vis_types/public/editors/heatmap.html
View file

@ -10,7 +10,7 @@
Show Tooltips
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="addTooltip" type="checkbox" ng-model="vis.params.addTooltip">
<input class="kuiCheckBox" id="addTooltip" type="checkbox" ng-model="editorState.params.addTooltip">
</div>
</div>
@ -19,11 +19,11 @@
Highlight
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="enableHover" type="checkbox" ng-model="vis.params.enableHover">
<input class="kuiCheckBox" id="enableHover" type="checkbox" ng-model="editorState.params.enableHover">
</div>
</div>
<div class="kuiSideBarFormRow" ng-show="vis.params.addLegend">
<div class="kuiSideBarFormRow" ng-show="editorState.params.addLegend">
<label class="kuiSideBarFormRow__label" for="legendPosition">
Legend Position
</label>
@ -31,7 +31,7 @@
<select
id="legendPosition"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.legendPosition"
ng-model="editorState.params.legendPosition"
ng-options="position.value as position.text for position in vis.type.editorConfig.collections.legendPositions"
></select>
</div>
@ -47,5 +47,5 @@
</div>
<heatmap-options></heatmap-options>
</div>

12
src/core_plugins/kbn_vislib_vis_types/public/editors/pie.html
View file

@ -12,8 +12,8 @@
</label>
<div class="kuiSideBarFormRow__control">
<input id="isDonut" name="isDonut" type="checkbox" value="{{isDonut}}"
ng-checked="vis.params.isDonut"
ng-model="vis.params.isDonut"
ng-checked="editorState.params.isDonut"
ng-model="editorState.params.isDonut"
>
</div>
</div>
@ -36,7 +36,7 @@
Show Labels
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="vis.params.labels.show">
<input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="editorState.params.labels.show">
</div>
</div>
@ -45,7 +45,7 @@
Show Top Level Only
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showLastLevel" type="checkbox" ng-model="vis.params.labels.last_level">
<input class="kuiCheckBox" id="showLastLevel" type="checkbox" ng-model="editorState.params.labels.last_level">
</div>
</div>
@ -54,7 +54,7 @@
Show Values
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showValues" type="checkbox" ng-model="vis.params.labels.values">
<input class="kuiCheckBox" id="showValues" type="checkbox" ng-model="editorState.params.labels.values">
</div>
</div>
@ -67,7 +67,7 @@
id="truncateLabels"
class="kuiInput kuiSideBarInput"
type="number"
ng-model="vis.params.labels.truncate"
ng-model="editorState.params.labels.truncate"
>
</div>
</div>

10
src/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html
View file

@ -15,7 +15,7 @@
<select
id="legendPosition"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.legendPosition"
ng-model="editorState.params.legendPosition"
ng-options="position for position in ['top', 'left', 'right', 'bottom']"
></select>
</div>
@ -26,7 +26,7 @@
Show Tooltip
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showCursor" type="checkbox" ng-model="vis.params.addTooltip">
<input class="kuiCheckBox" id="showCursor" type="checkbox" ng-model="editorState.params.addTooltip">
</div>
</div>
@ -36,8 +36,8 @@
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="currentTimeMarker" type="checkbox"
ng-model="vis.params.addTimeMarker"
ng-checked="vis.params.addTimeMarker"
ng-model="editorState.params.addTimeMarker"
ng-checked="editorState.params.addTimeMarker"
>
</div>
</div>
@ -47,7 +47,7 @@
Order Buckets by Sum
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="orderBuckets" type="checkbox" ng-model="vis.params.orderBucketsBySum">
<input class="kuiCheckBox" id="orderBuckets" type="checkbox" ng-model="editorState.params.orderBucketsBySum">
</div>
</div>

8
src/core_plugins/markdown_vis/public/markdown_vis_params.html
View file

@ -6,10 +6,10 @@
</div>
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="markdownVisFontSize">
Font Size (<span ng-bind="vis.params.fontSize"></span>pt)
Font Size (<span ng-bind="editorState.params.fontSize"></span>pt)
</label>
<div class="kuiSideBarFormRow__control">
<input id="markdownVisFontSize" type="range" ng-model="vis.params.fontSize" class="form-control" min="8" max="36" />
<input id="markdownVisFontSize" type="range" ng-model="editorState.params.fontSize" class="form-control" min="8" max="36" />
</div>
</div>
<div class="kuiSideBarFormRow">
@ -20,14 +20,14 @@
<input
id="markdownVisOpenLinksInNewTab"
type="checkbox"
ng-model="vis.params.openLinksInNewTab"
ng-model="editorState.params.openLinksInNewTab"
class="kuiCheckBox"
/>
</div>
</div>
<textarea
id="markdownVisInput"
ng-model="vis.params.markdown"
ng-model="editorState.params.markdown"
class="form-control"
rows="20"
data-test-subj="markdownTextarea"

30
src/core_plugins/metric_vis/public/metric_vis_params.html
View file

@ -5,7 +5,7 @@
Percentage Mode
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="vis.params.metric.percentageMode">
<input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="editorState.params.metric.percentageMode">
</div>
</div>
@ -14,7 +14,7 @@
Show Labels
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="vis.params.metric.labels.show">
<input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="editorState.params.metric.labels.show">
</div>
</div>
@ -41,7 +41,7 @@
<div id="metricOptionsRanges" ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
<div class="kuiSideBarSection">
<table class="vis-editor-agg-editor-ranges form-group" ng-show="vis.params.metric.colorsRange.length">
<table class="vis-editor-agg-editor-ranges form-group" ng-show="editorState.params.metric.colorsRange.length">
<tr>
<th>
<label id="metricOptionsCustomRangeFrom">From</label>
@ -51,7 +51,7 @@
</th>
</tr>
<tr ng-repeat="range in vis.params.metric.colorsRange track by $index">
<tr ng-repeat="range in editorState.params.metric.colorsRange track by $index">
<td>
<input
aria-labelledby="metricOptionsCustomRangeFrom"
@ -78,7 +78,7 @@
<button
type="button"
ng-click="removeRange($index)"
ng-show="vis.params.metric.colorsRange.length > 1"
ng-show="editorState.params.metric.colorsRange.length > 1"
class="kuiButton kuiButton--danger kuiButton--small">
<i class="fa fa-times"></i>
</button>
@ -86,7 +86,7 @@
</tr>
</table>
<div class="hintbox" ng-show="!vis.params.metric.colorsRange.length">
<div class="hintbox" ng-show="!editorState.params.metric.colorsRange.length">
<p>
<i class="fa fa-danger text-danger"></i>
<strong>Required:</strong> You must specify at least one range.
@ -101,7 +101,7 @@
</div>
</div>
</div>
<div ng-show="vis.params.metric.colorsRange.length > 1">
<div ng-show="editorState.params.metric.colorsRange.length > 1">
<div class="kuiSideBarCollapsibleTitle">
<div
kbn-accessible-click
@ -126,7 +126,7 @@
</div>
<div id="metricOptionsColors" ng-if="showColorOptions" class="kuiSideBarCollapsibleSection">
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow" ng-show="vis.params.metric.colorsRange.length > 1">
<div class="kuiSideBarFormRow" ng-show="editorState.params.metric.colorsRange.length > 1">
<label class="kuiSideBarFormRow__label" for="metricColorMode">
Use Color For
</label>
@ -134,12 +134,12 @@
<select
id="metricColorMode"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.metric.metricColorMode"
ng-model="editorState.params.metric.metricColorMode"
ng-options="mode for mode in collections.metricColorMode"
></select>
</div>
</div>
<div class="kuiSideBarFormRow" ng-show="vis.params.metric.metricColorMode !== 'None'">
<div class="kuiSideBarFormRow" ng-show="editorState.params.metric.metricColorMode !== 'None'">
<label class="kuiSideBarFormRow__label" for="colorSchema">
Color Schema
</label>
@ -147,19 +147,19 @@
<select
id="colorSchema"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.metric.colorSchema"
ng-model="editorState.params.metric.colorSchema"
ng-options="mode for mode in collections.colorSchemas"
></select>
</div>
<div class="text-info text-center" ng-show="customColors" ng-click="resetColors()">reset colors</div>
</div>
<div class="kuiSideBarFormRow" ng-show="vis.params.metric.metricColorMode !== 'None'">
<div class="kuiSideBarFormRow" ng-show="editorState.params.metric.metricColorMode !== 'None'">
<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.metric.invertColors">
<input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.metric.invertColors">
</div>
</div>
</div>
@ -195,10 +195,10 @@
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="metricFontSize">
Font Size (<span ng-bind="vis.params.metric.style.fontSize"></span>pt)
Font Size (<span ng-bind="editorState.params.metric.style.fontSize"></span>pt)
</label>
<div class="kuiSideBarFormRow__control">
<input id="metricFontSize" type="range" ng-model="vis.params.metric.style.fontSize" class="form-control" min="12" max="120" />
<input id="metricFontSize" type="range" ng-model="editorState.params.metric.style.fontSize" class="form-control" min="12" max="120" />
</div>
</div>
</div>

22
src/core_plugins/metric_vis/public/metric_vis_params.js
View file

@ -31,19 +31,19 @@ module.directive('metricVisParams', function () {
$scope.collections = $scope.vis.type.editorConfig.collections;
$scope.showColorRange = true;
$scope.$watch('vis.params.metric.metricColorMode', newValue => {
$scope.$watch('editorState.params.metric.metricColorMode', newValue => {
switch (newValue) {
case 'Labels':
$scope.vis.params.metric.style.labelColor = true;
$scope.vis.params.metric.style.bgColor = false;
$scope.editorState.params.metric.style.labelColor = true;
$scope.editorState.params.metric.style.bgColor = false;
break;
case 'Background':
$scope.vis.params.metric.style.labelColor = false;
$scope.vis.params.metric.style.bgColor = true;
$scope.editorState.params.metric.style.labelColor = false;
$scope.editorState.params.metric.style.bgColor = true;
break;
case 'None':
$scope.vis.params.metric.style.labelColor = false;
$scope.vis.params.metric.style.bgColor = false;
$scope.editorState.params.metric.style.labelColor = false;
$scope.editorState.params.metric.style.bgColor = false;
break;
}
});
@ -55,18 +55,18 @@ module.directive('metricVisParams', function () {
$scope.getGreaterThan = function (index) {
if (index === 0) return 0;
return $scope.vis.params.metric.colorsRange[index - 1].to;
return $scope.editorState.params.metric.colorsRange[index - 1].to;
};
$scope.addRange = function () {
const previousRange = _.last($scope.vis.params.metric.colorsRange);
const previousRange = _.last($scope.editorState.params.metric.colorsRange);
const from = previousRange ? previousRange.to : 0;
const to = previousRange ? from + (previousRange.to - previousRange.from) : 100;
$scope.vis.params.metric.colorsRange.push({ from: from, to: to });
$scope.editorState.params.metric.colorsRange.push({ from: from, to: to });
};
$scope.removeRange = function (index) {
$scope.vis.params.metric.colorsRange.splice(index, 1);
$scope.editorState.params.metric.colorsRange.splice(index, 1);
};
$scope.getColor = function (index) {

16
src/core_plugins/region_map/public/region_map_vis_params.html
View file

@ -14,7 +14,7 @@
<select
id="regionMap"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.selectedLayer"
ng-model="editorState.params.selectedLayer"
ng-options="layer.name for layer in collections.vectorLayers track by layer.layerId"
ng-change="onLayerChange()"
></select>
@ -28,8 +28,8 @@
<div class="kuiSideBarFormRow__control">
<select id="joinField"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.selectedJoinField"
ng-options="field.description for field in vis.params.selectedLayer.fields track by field.name"
ng-model="editorState.params.selectedJoinField"
ng-options="field.description for field in editorState.params.selectedLayer.fields track by field.name"
>
<option value=''>Select</option></select>
</div>
@ -40,7 +40,7 @@
</label>
<div class="kuiSideBarFormRow__control">
<input id="displayWarnings" type="checkbox" ng-model="vis.params.isDisplayWarning">
<input id="displayWarnings" type="checkbox" ng-model="editorState.params.isDisplayWarning">
&nbsp;
<icon-tip
content="'Turns on/off warnings. When turned on, warning will be shown for each term that cannot be matched to a shape in the vector layer based on the join field. When turned off, these warnings will be turned off.'"
@ -53,7 +53,7 @@
Show all shapes
</label>
<div class="kuiSideBarFormRow__control">
<input id="onlyShowMatchingShapes" type="checkbox" ng-model="vis.params.showAllShapes">
<input id="onlyShowMatchingShapes" type="checkbox" ng-model="editorState.params.showAllShapes">
&nbsp;
<icon-tip
content="'Turning this off only shows the shapes that were matched with a corresponding term'"
@ -77,7 +77,7 @@
<select
id="colorSchema"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.colorSchema"
ng-model="editorState.params.colorSchema"
ng-options="mode for mode in collections.colorSchemas"
></select>
</div>
@ -91,10 +91,10 @@
id="outlineWeight"
class="kuiInput kuiSideBarInput"
type="number"
ng-model="vis.params.outlineWeight"
ng-model="editorState.params.outlineWeight"
>
</div>
</div>
</div>
<wms-options options="vis.params.wms"></wms-options>
<wms-options options="editorState.params.wms"></wms-options>

10
src/core_plugins/region_map/public/region_map_vis_params.js
View file

@ -57,8 +57,8 @@ uiModules.get('kibana/region_map')
}
$scope.collections.vectorLayers = newVectorLayers;
if ($scope.collections.vectorLayers[0] && !$scope.vis.params.selectedLayer) {
$scope.vis.params.selectedLayer = $scope.collections.vectorLayers[0];
if ($scope.collections.vectorLayers[0] && !$scope.editorState.params.selectedLayer) {
$scope.editorState.params.selectedLayer = $scope.collections.vectorLayers[0];
onLayerChange();
}
@ -69,8 +69,8 @@ uiModules.get('kibana/region_map')
}, 0);
$scope.collections.vectorLayers = newVectorLayers;
if ($scope.collections.vectorLayers[0] && !$scope.vis.params.selectedLayer) {
$scope.vis.params.selectedLayer = $scope.collections.vectorLayers[0];
if ($scope.collections.vectorLayers[0] && !$scope.editorState.params.selectedLayer) {
$scope.editorState.params.selectedLayer = $scope.collections.vectorLayers[0];
onLayerChange();
}
@ -89,7 +89,7 @@ uiModules.get('kibana/region_map')
}
function onLayerChange() {
$scope.vis.params.selectedJoinField = $scope.vis.params.selectedLayer.fields[0];
$scope.editorState.params.selectedJoinField = $scope.editorState.params.selectedLayer.fields[0];
}
}

12
src/core_plugins/table_vis/public/table_vis_params.html
View file

@ -2,19 +2,19 @@
<div class="kuiSideBarSection">
<div class="form-group">
<label for="datatableVisualizationPerPage">Per Page</label>
<input type="number" ng-model="vis.params.perPage" class="form-control" id="datatableVisualizationPerPage">
<input type="number" ng-model="editorState.params.perPage" class="form-control" id="datatableVisualizationPerPage">
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="vis.params.showMetricsAtAllLevels">
<input type="checkbox" ng-model="editorState.params.showMetricsAtAllLevels">
Show metrics for every bucket/level
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="vis.params.showPartialRows">
<input type="checkbox" ng-model="editorState.params.showPartialRows">
Show partial rows
</label>
</div>
@ -28,16 +28,16 @@
<div class="checkbox">
<label>
<input type="checkbox" ng-model="vis.params.showTotal">
<input type="checkbox" ng-model="editorState.params.showTotal">
Show total
</label>
</div>
<div>
<label for="datatableVisualizationTotalFunction">Total function</label>
<select ng-disabled="!vis.params.showTotal"
<select ng-disabled="!editorState.params.showTotal"
class="form-control"
ng-model="vis.params.totalFunc"
ng-model="editorState.params.totalFunc"
ng-options="x for x in totalAggregations" id="datatableVisualizationTotalFunction">
</select>
</div>

6
src/core_plugins/table_vis/public/table_vis_params.js
View file

@ -29,12 +29,12 @@ uiModules.get('kibana/table_vis')
$scope.totalAggregations = ['sum', 'avg', 'min', 'max', 'count'];
$scope.$watchMulti([
'vis.params.showPartialRows',
'vis.params.showMetricsAtAllLevels'
'editorState.params.showPartialRows',
'editorState.params.showMetricsAtAllLevels'
], function () {
if (!$scope.vis) return;
const params = $scope.vis.params;
const params = $scope.editorState.params;
if (params.showPartialRows || params.showMetricsAtAllLevels) {
$scope.metricsAtAllLevels = true;
} else {

16
src/core_plugins/tagcloud/public/tag_cloud_vis_params.html
View file

@ -2,11 +2,11 @@
<div class="form-group">
<div class="form-group">
<label>Text Scale</label>
<select class="form-control" ng-model="vis.params.scale" ng-options="mode for mode in config.collections.scales"></select>
<select class="form-control" ng-model="editorState.params.scale" ng-options="mode for mode in config.collections.scales"></select>
</div>
<div class="form-group">
<label>Orientations</label>
<select class="form-control" ng-model="vis.params.orientation" ng-options="mode for mode in config.collections.orientations"></select>
<select class="form-control" ng-model="editorState.params.orientation" ng-options="mode for mode in config.collections.orientations"></select>
</div>
<div class="form-group">
<label>Font Size</label>
@ -16,9 +16,9 @@
<input
type="number"
min="1"
max="{{vis.params.maxFontSize}}"
max="{{editorState.params.maxFontSize}}"
class="kuiTextInput tag-cloud-fontsize-slider__input"
ng-model="vis.params.minFontSize"
ng-model="editorState.params.minFontSize"
aria-label="Minimum tag font size"
aria-describedby="tagCloudFontSliderMinUnit"
>
@ -27,10 +27,10 @@
<div class="kuiBarSection">
<input
type="number"
min="{{vis.params.minFontSize}}"
min="{{editorState.params.minFontSize}}"
max="100"
class="kuiTextInput tag-cloud-fontsize-slider__input"
ng-model="vis.params.maxFontSize"
ng-model="editorState.params.maxFontSize"
aria-label="Maximum tag font size"
aria-describedby="tagCloudFontSliderMaxUnit"
>
@ -40,8 +40,8 @@
</div>
<div>
<label>
<input type="checkbox" value="{{hideLabel}}" ng-model="vis.params.showLabel" name="showLabel"
ng-checked="vis.params.showLabel">
<input type="checkbox" value="{{hideLabel}}" ng-model="editorState.params.showLabel" name="showLabel"
ng-checked="editorState.params.showLabel">
Show Label
</label>
</div>

10
src/core_plugins/tagcloud/public/tag_cloud_vis_params.js
View file

@ -34,7 +34,7 @@ uiModules.get('kibana/table_vis')
const slider = sliderContainer.querySelector('.tag-cloud-fontsize-slider');
$scope.config = $scope.vis.type.editorConfig;
noUiSlider.create(slider, {
start: [$scope.vis.params.minFontSize, $scope.vis.params.maxFontSize],
start: [$scope.editorState.params.minFontSize, $scope.editorState.params.maxFontSize],
connect: true,
step: 1,
range: { 'min': 1, 'max': 100 },
@ -43,8 +43,8 @@ uiModules.get('kibana/table_vis')
slider.noUiSlider.on('slide', function () {
const fontSize = slider.noUiSlider.get();
$scope.$apply(() => {
$scope.vis.params.minFontSize = fontSize[0];
$scope.vis.params.maxFontSize = fontSize[1];
$scope.editorState.params.minFontSize = fontSize[0];
$scope.editorState.params.maxFontSize = fontSize[1];
});
});
@ -52,13 +52,13 @@ uiModules.get('kibana/table_vis')
* Whenever the params change (e.g. by hitting reset in the editor)
* set the uislider value to the new value.
*/
$scope.$watch('vis.params.minFontSize', (val) => {
$scope.$watch('editorState.params.minFontSize', (val) => {
val = parseInt(val);
if (slider.noUiSlider.get()[0] !== val) {
slider.noUiSlider.set([val, null]);
}
});
$scope.$watch('vis.params.maxFontSize', (val) => {
$scope.$watch('editorState.params.maxFontSize', (val) => {
val = parseInt(val);
if (slider.noUiSlider.get()[1] !== val) {
slider.noUiSlider.set([null, val]);

16
src/core_plugins/tile_map/public/editors/tile_map_vis_params.html
View file

@ -6,8 +6,8 @@
id="coordinateMapOptionsMapType"
name="agg"
class="form-control"
ng-model="vis.params.mapType"
ng-init="vis.params.mapType || vis.type.editorConfig.collections.mapTypes[0]"
ng-model="editorState.params.mapType"
ng-init="editorState.params.mapType || vis.type.editorConfig.collections.mapTypes[0]"
ng-options="mapType as mapType for mapType in vis.type.editorConfig.collections.mapTypes"
>
</select>
@ -22,13 +22,13 @@
<select
id="colorSchema"
class="kuiSelect kuiSideBarSelect"
ng-model="vis.params.colorSchema"
ng-model="editorState.params.colorSchema"
ng-options="mode for mode in vis.type.editorConfig.collections.colorSchemas"
></select>
</div>
</div>
<div ng-if="vis.params.mapType === 'Heatmap'" class="form-group">
<div ng-if="editorState.params.mapType === 'Heatmap'" class="form-group">
<div>
<label>
Cluster size
@ -36,7 +36,7 @@
<div class="vis-editor-agg-form-row">
<input
name="heatClusterSize"
ng-model="vis.params.heatClusterSize"
ng-model="editorState.params.heatClusterSize"
required
class="form-control"
type="range"
@ -45,7 +45,7 @@
step="0.1"
>
<div class="vis-editor-agg-form-value">
{{vis.params.heatClusterSize}}
{{editorState.params.heatClusterSize}}
</div>
</div>
</div>
@ -65,7 +65,7 @@
id="desaturateMapTiles"
name="isDesaturated"
ng-disabled="!vis.type.visConfig.canDesaturate"
ng-model="vis.params.isDesaturated"
ng-model="editorState.params.isDesaturated"
>
&nbsp;
<icon-tip
@ -76,4 +76,4 @@
</div>
</div>
<wms-options options="vis.params.wms"></wms-options>
<wms-options options="editorState.params.wms"></wms-options>

4
src/core_plugins/timelion/public/vis/timelion_vis_params.html
View file

@ -2,7 +2,7 @@
<div class="form-group">
<label for="timelionInterval">Interval</label>
<div class="form-group">
<timelion-interval model="vis.params.interval"></timelion-interval>
<timelion-interval model="editorState.params.interval"></timelion-interval>
</div>
</div>
@ -12,7 +12,7 @@
</div>
<timelion-expression-input
sheet="vis.params.expression"
sheet="editorState.params.expression"
rows="9"
></timelion-expression-input>
</div>

2
src/core_plugins/vega/public/vega_editor_template.html
View file

@ -13,7 +13,7 @@
mode: 'hjson'
}"
id="vegaAceEditor"
ng-model="vis.params.spec"
ng-model="editorState.params.spec"
data-test-subj="vega-editor"
></div>

2
src/ui/public/persisted_state/persisted_state.js
View file

@ -247,7 +247,7 @@ export class PersistedState {
// sanity check; verify that there are actually changes
if (_.isEqual(this._mergedState, this._defaultState)) this._changedState = {};
if (!silent && stateChanged) this.emit('change');
if (!silent && stateChanged) this.emit('change', key);
return this;
}

2
src/ui/public/vis/editors/default/agg.js
View file

@ -82,7 +82,7 @@ uiModules
};
$scope.remove = function (agg) {
const aggs = $scope.vis.aggs;
const aggs = $scope.state.aggs;
const index = aggs.indexOf(agg);
if (index === -1) {

5
src/ui/public/vis/editors/default/agg_add.js
View file

@ -37,11 +37,12 @@ uiModules
self.form = false;
const aggConfig = new AggConfig($scope.vis, {
schema: schema
schema: schema,
id: AggConfig.nextId($scope.state.aggs),
});
aggConfig.brandNew = true;
$scope.vis.aggs.push(aggConfig);
$scope.state.aggs.push(aggConfig);
};
}
};

6
src/ui/public/vis/editors/default/agg_group.js
View file

@ -36,7 +36,7 @@ uiModules
scope: true,
link: function ($scope, $el, attr) {
$scope.groupName = attr.groupName;
$scope.$bind('group', 'vis.aggs.bySchemaGroup["' + $scope.groupName + '"]');
$scope.$bind('group', 'state.aggs.bySchemaGroup["' + $scope.groupName + '"]');
$scope.$bind('schemas', 'vis.type.schemas["' + $scope.groupName + '"]');
$scope.$watchMulti([
@ -66,9 +66,9 @@ uiModules
function reorderFinished() {
//the aggs have been reordered in [group] and we need
//to apply that ordering to [vis.aggs]
const indexOffset = $scope.vis.aggs.indexOf($scope.group[0]);
const indexOffset = $scope.state.aggs.indexOf($scope.group[0]);
_.forEach($scope.group, (agg, index) => {
move($scope.vis.aggs, agg, indexOffset + index);
move($scope.state.aggs, agg, indexOffset + index);
});
}

57
src/ui/public/vis/editors/default/default.js
View file

@ -63,19 +63,23 @@ const defaultEditor = function ($rootScope, $compile) {
updateScope();
$scope.state = $scope.vis.copyCurrentState(true);
$scope.oldState = $scope.vis.getSerializableState($scope.state);
$scope.toggleSidebar = () => {
$scope.$broadcast('render');
};
this.el.one('renderComplete', resolve);
// track state of editable vis vs. "actual" vis
$scope.stageEditableVis = () => {
$scope.oldState = $scope.vis.getSerializableState($scope.state);
$scope.vis.setCurrentState($scope.state);
$scope.vis.updateState();
$scope.vis.dirty = false;
};
$scope.resetEditableVis = () => {
$scope.vis.resetState();
$scope.state = $scope.vis.copyCurrentState(true);
$scope.vis.dirty = false;
};
@ -109,10 +113,17 @@ const defaultEditor = function ($rootScope, $compile) {
}
};
$scope.$watch(function () {
return $scope.vis.getCurrentState(false);
let lockDirty = false;
$scope.$watch(() => {
return $scope.vis.getSerializableState($scope.state);
}, function (newState) {
$scope.vis.dirty = !angular.equals(newState, $scope.vis.getEnabledState());
// when visualization updates its `vis.params` we need to update the editor, but we should
// not set the dirty flag (as this change came from vis itself and is already applied)
if (lockDirty) {
lockDirty = false;
} else {
$scope.vis.dirty = !angular.equals(newState, $scope.oldState);
}
$scope.responseValueAggs = null;
try {
@ -126,6 +137,42 @@ const defaultEditor = function ($rootScope, $compile) {
catch (e) {} // eslint-disable-line no-empty
}, true);
// fires when visualization state changes, and we need to copy changes to editorState
$scope.$watch(() => {
return $scope.vis.getCurrentState(false);
}, (newState) => {
const updateEditorStateWithChanges = (newState, oldState, editorState) => {
for (const prop in newState) {
if (newState.hasOwnProperty(prop)) {
const newStateValue = newState[prop];
const oldStateValue = oldState[prop];
const editorStateValue = editorState[prop];
if (typeof newStateValue === 'object') {
if (editorStateValue) {
// Keep traversing.
return updateEditorStateWithChanges(newStateValue, oldStateValue, editorStateValue);
}
const newStateValueCopy = _.cloneDeep(newStateValue);
editorState[prop] = newStateValueCopy;
oldState[prop] = newStateValueCopy;
lockDirty = true;
return;
}
if (newStateValue !== oldStateValue) {
oldState[prop] = newStateValue;
editorState[prop] = newStateValue;
lockDirty = true;
}
}
}
};
updateEditorStateWithChanges(newState, $scope.oldState, $scope.state);
}, true);
// Load the default editor template, attach it to the DOM and compile it.
// It should be added to the DOM before compiling, to prevent some resize
// listener issues.

1
src/ui/public/vis/editors/default/sidebar.html
View file

@ -146,6 +146,7 @@
<div class="vis-editor-config" ng-repeat="tab in vis.type.editorConfig.optionTabs" ng-show="sidebar.section == tab.name">
<vis-editor-vis-options
editor-state="state"
vis="vis"
vis-data="visData"
ui-state="uiState"

9
src/ui/public/vis/editors/default/vis_options.js
View file

@ -40,19 +40,20 @@ uiModules
visData: '=',
uiState: '=',
editor: '=',
visualizeEditor: '='
visualizeEditor: '=',
editorState: '=',
},
link: function ($scope, $el) {
const $optionContainer = $el.find('[data-visualization-options]');
const reactOptionsComponent = typeof $scope.editor !== 'string';
const stageEditorParams = (params) => {
$scope.vis.params = _.cloneDeep(params);
$scope.editorState.params = _.cloneDeep(params);
$scope.$apply();
};
const renderReactComponent = () => {
const Component = $scope.editor;
render(<Component scope={$scope} stageEditorParams={stageEditorParams} />, $el[0]);
render(<Component scope={$scope} editorState={$scope.editorState} stageEditorParams={stageEditorParams} />, $el[0]);
};
// Bind the `editor` template with the scope.
if (reactOptionsComponent) {
@ -62,7 +63,7 @@ uiModules
$optionContainer.append($editor);
}
$scope.$watchGroup(['visData', 'visualizeEditor', 'vis.params'], () => {
$scope.$watchGroup(['visData', 'visualizeEditor', 'editorState.params'], () => {
if (reactOptionsComponent) {
renderReactComponent();
}

28
src/ui/public/vis/vis.js
View file

@ -185,7 +185,9 @@ export function VisProvider(Private, indexPatterns, getAppState) {
setState(state, updateCurrentState = true) {
this._state = _.cloneDeep(state);
if (updateCurrentState) this.resetState();
if (updateCurrentState) {
this.setCurrentState(this._state);
}
}
updateState() {
@ -193,10 +195,6 @@ export function VisProvider(Private, indexPatterns, getAppState) {
this.emit('update');
}
resetState() {
this.setCurrentState(this._state);
}
forceReload() {
this.emit('reload');
}
@ -205,7 +203,7 @@ export function VisProvider(Private, indexPatterns, getAppState) {
return {
title: this.title,
type: this.type.name,
params: this.params,
params: _.cloneDeep(this.params),
aggs: this.aggs
.map(agg => agg.toJSON())
.filter(agg => includeDisabled || agg.enabled)
@ -213,6 +211,24 @@ export function VisProvider(Private, indexPatterns, getAppState) {
};
}
getSerializableState(state) {
return {
title: state.title,
type: state.type,
params: _.cloneDeep(state.params),
aggs: state.aggs
.map(agg => agg.toJSON())
.filter(agg => agg.enabled)
.filter(Boolean)
};
}
copyCurrentState(includeDisabled = false) {
const state = this.getCurrentState(includeDisabled);
state.aggs = new AggConfigs(this, state.aggs);
return state;
}
getStateInternal(includeDisabled) {
return {
title: this._state.title,

3
test/functional/apps/dashboard/_dashboard_state.js
View file

@ -137,6 +137,9 @@ export default function ({ getService, getPageObjects }) {
await PageObjects.visualize.clickMapZoomIn();
await PageObjects.visualize.clickMapZoomIn();
await PageObjects.visualize.clickGo();
await PageObjects.header.waitUntilLoadingHasFinished();
await PageObjects.visualize.saveVisualization('Visualization TileMap');
await PageObjects.header.clickDashboard();