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
This commit is contained in:
parent
e92240a9c6
commit
6aaddb9488
|
@ -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>
|
||||
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue