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

Fix hidden ticks when using log scale (#21507)

Browse source 
* Add support for vertical axis

The vertical axis scale has an inverted range (max, min) and we need to compute the absolute scale width instead.

* Add functional test for Y axis scale type  switching

* Remove unnecessary waitUntilLoadingHasFinished
This commit is contained in:
Marco Vettorello 2018-08-02 16:13:02 +02:00 committed by GitHub
parent e92240a9c6
commit 6aaddb9488
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 259 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,6 +21,7 @@
>
<div class="kuiSideBarCollapsibleTitle">
<div
data-test-subj="toggleYAxisOptions-{{axis.id}}"
class="kuiSideBarCollapsibleTitle__label"
ng-click="isValueAxisOpen = !isValueAxisOpen"
kbn-accessible-click
@ -112,6 +113,7 @@
</label>
<div class="kuiSideBarFormRow__control">
<select
data-test-subj="scaleSelectYAxis-{{axis.id}}"
id="{{ 'valueAxisScaleType' + $index }}"
class="kuiSelect kuiSideBarSelect"
ng-model="axis.scale.type"
@ -124,6 +126,7 @@
<!-- Advanced options -->
<div class="kuiSideBarSection">
<a
data-test-subj="toggleYAxisAdvancedOptions-{{axis.id}}"
class="kuiSideBarOptionsLink"
ng-click="isValueAxisAdvancedOptionsOpen = !isValueAxisAdvancedOptionsOpen"
kbn-accessible-click
@ -166,7 +169,13 @@
Filter Labels
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="{{ 'valueAxisFilterLabels' + $index }}" type="checkbox" ng-model="axis.labels.filter">
<input
data-test-subj="yAxisFilterLabelsCheckbox-{{axis.id}}"
class="kuiCheckBox"
id="{{ 'valueAxisFilterLabels' + $index }}"
type="checkbox"
ng-model="axis.labels.filter"
>
</div>
</div>

2
src/ui/public/vislib/lib/axis/axis_labels.js
View file

@ -100,7 +100,7 @@ export function VislibAxisLabelsProvider() {
const el = $(config.get('rootEl')).find(config.get('elSelector'));
const maxSize = config.isHorizontal() ? el.width() : el.height();
const scaleRange = self.axisScale.scale.range();
const scaleWidth = scaleRange[scaleRange.length - 1] - scaleRange[0];
const scaleWidth = Math.abs(scaleRange[scaleRange.length - 1] - scaleRange[0]);
const scaleStartPad = .5 * (maxSize - scaleWidth);
selection.selectAll('.tick text')

80
test/functional/apps/visualize/_area_chart.js
View file

@ -28,7 +28,7 @@ export default function ({ getService, getPageObjects }) {
describe('area charts', function indexPatternCreation() {
const vizName1 = 'Visualization AreaChart Name Test';
before(async function () {
const initAreaChart = async () => {
const fromTime = '2015-09-19 06:31:44.000';
const toTime = '2015-09-23 18:31:44.000';
@ -52,7 +52,9 @@ export default function ({ getService, getPageObjects }) {
log.debug('intervalValue = ' + intervalValue);
expect(intervalValue).to.be('Auto');
return PageObjects.visualize.clickGo();
});
};
before(initAreaChart);
it('should save and load with special characters', async function () {
const vizNamewithSpecialChars = vizName1 + '/?&=%';
@ -153,5 +155,79 @@ export default function ({ getService, getPageObjects }) {
const sideEditorExists = await PageObjects.visualize.getSideEditorExists();
expect(sideEditorExists).to.be(false);
});
describe('switch between Y axis scale types', () => {
before(initAreaChart);
const axisId = 'ValueAxis-1';
it('should show ticks on selecting log scale', async () => {
await PageObjects.visualize.clickMetricsAndAxes();
await PageObjects.visualize.clickYAxisOptions(axisId);
await PageObjects.visualize.selectYAxisScaleType(axisId, 'log');
await PageObjects.visualize.clickYAxisAdvancedOptions(axisId);
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
const expectedLabels = [
'2', '3', '5', '7', '10', '20', '30', '50', '70', '100', '200',
'300', '500', '700', '1,000', '2,000', '3,000', '5,000', '7,000',
];
expect(labels).to.eql(expectedLabels);
});
it('should show filtered ticks on selecting log scale', async () => {
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
const expectedLabels = [
'2', '3', '5', '7', '10', '20', '30', '50', '70', '100', '200',
'300', '500', '700', '1,000', '2,000', '3,000', '5,000', '7,000',
];
expect(labels).to.eql(expectedLabels);
});
it('should show ticks on selecting square root scale', async () => {
await PageObjects.visualize.selectYAxisScaleType(axisId, 'square root');
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
const expectedLabels = [
'0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600',
];
expect(labels).to.eql(expectedLabels);
});
it('should show filtered ticks on selecting square root scale', async () => {
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
const expectedLabels = [
'200', '400', '600', '800', '1,000', '1,200', '1,400',
];
expect(labels).to.eql(expectedLabels);
});
it('should show ticks on selecting linear scale', async () => {
await PageObjects.visualize.selectYAxisScaleType(axisId, 'linear');
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
log.debug(labels);
const expectedLabels = [
'0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600',
];
expect(labels).to.eql(expectedLabels);
});
it('should show filtered ticks on selecting linear scale', async () => {
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
const expectedLabels = [
'200', '400', '600', '800', '1,000', '1,200', '1,400',
];
expect(labels).to.eql(expectedLabels);
});
});
});
}

80
test/functional/apps/visualize/_line_chart.js
View file

@ -27,7 +27,7 @@ export default function ({ getService, getPageObjects }) {
describe('line charts', function () {
const vizName1 = 'Visualization LineChart';
before(async function () {
const initLineChart = async function () {
const fromTime = '2015-09-19 06:31:44.000';
const toTime = '2015-09-23 18:31:44.000';
@ -47,7 +47,9 @@ export default function ({ getService, getPageObjects }) {
log.debug('switch from Rows to Columns');
await PageObjects.visualize.clickColumns();
await PageObjects.visualize.clickGo();
});
};
before(initLineChart);
afterEach(async () => {
await PageObjects.visualize.closeInspector();
@ -120,5 +122,79 @@ export default function ({ getService, getPageObjects }) {
await PageObjects.visualize.loadSavedVisualization(vizName1);
await PageObjects.visualize.waitForVisualization();
});
describe('switch between Y axis scale types', () => {
before(initLineChart);
const axisId = 'ValueAxis-1';
it('should show ticks on selecting log scale', async () => {
await PageObjects.visualize.clickMetricsAndAxes();
await PageObjects.visualize.clickYAxisOptions(axisId);
await PageObjects.visualize.selectYAxisScaleType(axisId, 'log');
await PageObjects.visualize.clickYAxisAdvancedOptions(axisId);
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
const expectedLabels = [
'2', '3', '5', '7', '10', '20', '30', '50', '70', '100', '200',
'300', '500', '700', '1,000', '2,000', '3,000', '5,000', '7,000',
];
expect(labels).to.eql(expectedLabels);
});
it('should show filtered ticks on selecting log scale', async () => {
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
const expectedLabels = [
'2', '3', '5', '7', '10', '20', '30', '50', '70', '100', '200',
'300', '500', '700', '1,000', '2,000', '3,000', '5,000', '7,000',
];
expect(labels).to.eql(expectedLabels);
});
it('should show ticks on selecting square root scale', async () => {
await PageObjects.visualize.selectYAxisScaleType(axisId, 'square root');
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
const expectedLabels = [
'0', '2,000', '4,000', '6,000', '8,000', '10,000',
];
expect(labels).to.eql(expectedLabels);
});
it('should show filtered ticks on selecting square root scale', async () => {
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
const expectedLabels = [
'2,000', '4,000', '6,000', '8,000',
];
expect(labels).to.eql(expectedLabels);
});
it('should show ticks on selecting linear scale', async () => {
await PageObjects.visualize.selectYAxisScaleType(axisId, 'linear');
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
log.debug(labels);
const expectedLabels = [
'0', '2,000', '4,000', '6,000', '8,000', '10,000',
];
expect(labels).to.eql(expectedLabels);
});
it('should show filtered ticks on selecting linear scale', async () => {
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
const expectedLabels = [
'2,000', '4,000', '6,000', '8,000',
];
expect(labels).to.eql(expectedLabels);
});
});
});
}

74
test/functional/apps/visualize/_vertical_bar_chart.js
View file

@ -115,6 +115,80 @@ export default function ({ getService, getPageObjects }) {
expect(data).to.eql(expectedChartData);
});
describe('switch between Y axis scale types', () => {
before(initBarChart);
const axisId = 'ValueAxis-1';
it('should show ticks on selecting log scale', async () => {
await PageObjects.visualize.clickMetricsAndAxes();
await PageObjects.visualize.clickYAxisOptions(axisId);
await PageObjects.visualize.selectYAxisScaleType(axisId, 'log');
await PageObjects.visualize.clickYAxisAdvancedOptions(axisId);
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
const expectedLabels = [
'2', '3', '5', '7', '10', '20', '30', '50', '70', '100', '200',
'300', '500', '700', '1,000', '2,000', '3,000', '5,000', '7,000',
];
expect(labels).to.eql(expectedLabels);
});
it('should show filtered ticks on selecting log scale', async () => {
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
const expectedLabels = [
'2', '3', '5', '7', '10', '20', '30', '50', '70', '100', '200',
'300', '500', '700', '1,000', '2,000', '3,000', '5,000', '7,000',
];
expect(labels).to.eql(expectedLabels);
});
it('should show ticks on selecting square root scale', async () => {
await PageObjects.visualize.selectYAxisScaleType(axisId, 'square root');
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
const expectedLabels = [
'0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600',
];
expect(labels).to.eql(expectedLabels);
});
it('should show filtered ticks on selecting square root scale', async () => {
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
const expectedLabels = [
'200', '400', '600', '800', '1,000', '1,200', '1,400',
];
expect(labels).to.eql(expectedLabels);
});
it('should show ticks on selecting linear scale', async () => {
await PageObjects.visualize.selectYAxisScaleType(axisId, 'linear');
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
log.debug(labels);
const expectedLabels = [
'0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600',
];
expect(labels).to.eql(expectedLabels);
});
it('should show filtered ticks on selecting linear scale', async () => {
await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
await PageObjects.visualize.clickGo();
const labels = await PageObjects.visualize.getYAxisLabels();
const expectedLabels = [
'200', '400', '600', '800', '1,000', '1,200', '1,400',
];
expect(labels).to.eql(expectedLabels);
});
});
describe('vertical bar with split series', function () {
before(initBarChart);

18
test/functional/page_objects/visualize_page.js
View file

@ -599,11 +599,29 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
await testSubjects.click('visEditorTabadvanced');
}
async clickYAxisOptions(axisId) {
await testSubjects.click(`toggleYAxisOptions-${axisId}`);
}
async clickYAxisAdvancedOptions(axisId) {
await testSubjects.click(`toggleYAxisAdvancedOptions-${axisId}`);
}
async changeYAxisFilterLabelsCheckbox(axisId, enabled) {
const selector = `yAxisFilterLabelsCheckbox-${axisId}`;
enabled ? await this.checkCheckbox(selector) : await this.uncheckCheckbox(selector);
}
async selectChartMode(mode) {
const selector = await find.byCssSelector(`#seriesMode0 > option[label="${mode}"]`);
await selector.click();
}
async selectYAxisScaleType(axisId, scaleType) {
const selectElement = await testSubjects.find(`scaleSelectYAxis-${axisId}`);
const selector = await selectElement.findByCssSelector(`option[label="${scaleType}"]`);
await selector.click();
}
async clickData() {
await testSubjects.click('visualizeEditDataLink');
}