Skip to content

Commit

Permalink
[6.4] Fix hidden ticks when using log scale (#21507) | Skip scale tic…
Browse files Browse the repository at this point in the history 
…k tests because of possible flakyness (#21641) (#21647)

* Fix hidden ticks when using log scale (#21507)

* 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

* Skip scale tick tests because of possible flakyness (#21641)
  • Loading branch information
@markov00
markov00 authored Aug 3, 2018
1 parent 2d4a54e commit 08f1cfb
Show file tree
Hide file tree
Showing 6 changed files with 259 additions and 6 deletions.
11 changes: 10 additions & 1 deletion src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
>
<div class="kuiSideBarCollapsibleTitle">
<div
data-test-subj="toggleYAxisOptions-{{axis.id}}"
class="kuiSideBarCollapsibleTitle__label"
ng-click="isValueAxisOpen = !isValueAxisOpen"
kbn-accessible-click
Expand Down Expand Up @@ -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"
Expand All @@ -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
Expand Down Expand Up @@ -166,7 +169,13 @@ <h6 class="kuiSideBarFormSectionTitle">
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>

Expand Down
2 changes: 1 addition & 1 deletion src/ui/public/vislib/lib/axis/axis_labels.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
80 changes: 78 additions & 2 deletions test/functional/apps/visualize/_area_chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 + '/?&=%';
Expand Down Expand Up @@ -153,5 +155,79 @@ export default function ({ getService, getPageObjects }) {
const sideEditorExists = await PageObjects.visualize.getSideEditorExists();
expect(sideEditorExists).to.be(false);
});

describe.skip('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 changes: 78 additions & 2 deletions test/functional/apps/visualize/_line_chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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();
Expand Down Expand Up @@ -120,5 +122,79 @@ export default function ({ getService, getPageObjects }) {
await PageObjects.visualize.loadSavedVisualization(vizName1);
await PageObjects.visualize.waitForVisualization();
});

describe.skip('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 changes: 74 additions & 0 deletions test/functional/apps/visualize/_vertical_bar_chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,80 @@ export default function ({ getService, getPageObjects }) {
expect(data).to.eql(expectedChartData);
});

describe.skip('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);

Expand Down
18 changes: 18 additions & 0 deletions test/functional/page_objects/visualize_page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -689,11 +689,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');
}
Expand Down

0 comments on commit 08f1cfb

Please sign in to comment.