mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
* WIP - add shakespeare data for getting started guide * Refactor of getLineChartData, getBarChartData, getAreaChartData * Added changing extents and test * Fix opening axis options * Change precision from 8 to 7 * lower precision to 6 * Fix index pattern creation * update from review, remove comments, add others
This commit is contained in:
Lee Drengenberg
GitHub
parent
0d56e9a9dd
commit
9afc7511a9
12 changed files with 378 additions and 73 deletions
|
|
@ -115,7 +115,7 @@ plays makes the greatest demands on an individual actor by showing the maximum n
|
|||
|
||||
. Click *Add metrics* to add a Y-axis aggregation.
|
||||
. Choose the *Max* aggregation and select the *speech_number* field.
|
||||
. Click *Options* and change the *Bar Mode* to *grouped*.
|
||||
. Click *Options* and change the *Bar Mode* from *stacked* to *normal*.
|
||||
. Click *Apply changes* image:images/apply-changes-button.png[]. Your chart should now look like this:
|
||||
|
||||
image::images/tutorial-visualize-bar-3.png[]
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
kbn-scroll-bottom="limit = limit + 100"
|
||||
repeat="field in indexedFields | filter: { displayName: $select.search } | sortPrefixFirst:$select.search:'name' | limitTo: limit"
|
||||
>
|
||||
<div ng-bind-html="field.displayName | highlight: $select.search"></div>
|
||||
<div data-test-subj="{{field.displayName}}" ng-bind-html="field.displayName | highlight: $select.search"></div>
|
||||
</ui-select-choices>
|
||||
</ui-select>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
ng-hide="schema.deprecate"
|
||||
ng-repeat="schema in availableSchema"
|
||||
ng-click="add.submit(schema)"
|
||||
class="list-group-item list-group-menu-item">
|
||||
class="list-group-item list-group-menu-item"
|
||||
data-test-subj="{{schema.title}}">
|
||||
<i ng-show="schema.icon" ng-class="schema.icon"></i>
|
||||
{{schema.title}}
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
| sortPrefixFirst:$select.search:'title'"
|
||||
group-by="'subtype'"
|
||||
>
|
||||
<div ng-bind-html="agg.title | highlight: $select.search"></div>
|
||||
<div data-test-subj="{{agg.title}}" ng-bind-html="agg.title | highlight: $select.search"></div>
|
||||
</ui-select-choices>
|
||||
</ui-select>
|
||||
</div>
|
||||
|
|
|
|||
196
test/functional/apps/getting_started/_shakespeare.js
Normal file
196
test/functional/apps/getting_started/_shakespeare.js
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
import expect from 'expect.js';
|
||||
|
||||
export default function ({ getService, getPageObjects }) {
|
||||
const log = getService('log');
|
||||
const esArchiver = getService('esArchiver');
|
||||
const retry = getService('retry');
|
||||
const PageObjects = getPageObjects(['console', 'common', 'settings', 'visualize']);
|
||||
|
||||
// https://www.elastic.co/guide/en/kibana/current/tutorial-load-dataset.html
|
||||
|
||||
describe('Shakespeare', function describeIndexTests() {
|
||||
// index starts on the first "count" metric at 1
|
||||
// Each new metric or aggregation added to a visualization gets the next index.
|
||||
// So to modify a metric or aggregation tests need to keep track of the
|
||||
// order they are added.
|
||||
let aggIndex = 1;
|
||||
|
||||
before(async function () {
|
||||
log.debug('Load empty_kibana and Shakespeare Getting Started data\n'
|
||||
+ 'https://www.elastic.co/guide/en/kibana/current/tutorial-load-dataset.html');
|
||||
await esArchiver.load('empty_kibana');
|
||||
log.debug('Load shakespeare data');
|
||||
await esArchiver.loadIfNeeded('getting_started/shakespeare');
|
||||
});
|
||||
|
||||
it('should create shakespeare index pattern', async function () {
|
||||
log.debug('Create shakespeare index pattern');
|
||||
await PageObjects.settings.navigateTo();
|
||||
await PageObjects.settings.createIndexPattern('shakes', null);
|
||||
const indexPageHeading = await PageObjects.settings.getIndexPageHeading();
|
||||
const patternName = await indexPageHeading.getVisibleText();
|
||||
expect(patternName).to.be('shakes*');
|
||||
});
|
||||
|
||||
// https://www.elastic.co/guide/en/kibana/current/tutorial-visualizing.html
|
||||
/* 1. Click New and select Vertical bar chart.
|
||||
2. Select the shakes* index pattern. Since you haven’t defined any buckets
|
||||
yet, you’ll see a single big bar that shows the total count of documents that
|
||||
match the default wildcard query.
|
||||
*/
|
||||
it('should create initial vertical bar chart', async function () {
|
||||
log.debug('create shakespeare vertical bar chart');
|
||||
await PageObjects.common.navigateToUrl('visualize', 'new');
|
||||
await PageObjects.visualize.clickVerticalBarChart();
|
||||
await PageObjects.visualize.clickNewSearch('shakes*');
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
|
||||
const expectedChartValues = [111396];
|
||||
await retry.try(async () => {
|
||||
const data = await PageObjects.visualize.getBarChartData('Count');
|
||||
log.debug('data=' + data);
|
||||
log.debug('data.length=' + data.length);
|
||||
expect(data).to.eql(expectedChartValues);
|
||||
});
|
||||
});
|
||||
|
||||
/* 3. To show the number of speaking parts per play along the y-axis, you need
|
||||
to configure the Y-axis metric aggregation. A metric aggregation computes
|
||||
metrics based on values extracted from the search results. To get the
|
||||
number of speaking parts per play, select the Unique Count aggregation
|
||||
and choose speaker from the field list. You can also give the axis a
|
||||
custom label, Speaking Parts.
|
||||
*/
|
||||
it('should configure metric Unique Count Speaking Parts', async function () {
|
||||
log.debug('Metric = Unique Count, speaker, Speaking Parts');
|
||||
// this first change to the YAxis metric agg uses the default aggIndex of 1
|
||||
await PageObjects.visualize.selectYAxisAggregation('Unique Count', 'speaker', 'Speaking Parts');
|
||||
// then increment the aggIndex for the next one we create
|
||||
aggIndex = aggIndex + 1;
|
||||
await PageObjects.visualize.clickGo();
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
const expectedChartValues = [935];
|
||||
await retry.try(async () => {
|
||||
const data = await PageObjects.visualize.getBarChartData('Speaking Parts');
|
||||
log.debug('data=' + data);
|
||||
log.debug('data.length=' + data.length);
|
||||
expect(data).to.eql(expectedChartValues);
|
||||
});
|
||||
const title = await PageObjects.visualize.getYAxisTitle();
|
||||
expect(title).to.be('Speaking Parts');
|
||||
});
|
||||
|
||||
/* 4. To show the different plays long the x-axis, select the X-Axis buckets
|
||||
type, select Terms from the aggregation list, and choose play_name from the
|
||||
field list. To list them alphabetically, select Ascending order. You can
|
||||
also give the axis a custom label, Play Name.
|
||||
5. Click Apply changes images/apply-changes-button.png to view the results.
|
||||
*/
|
||||
it('should configure Terms aggregation on play_name', async function () {
|
||||
await PageObjects.visualize.clickBucket('X-Axis');
|
||||
log.debug('Aggregation = Terms');
|
||||
await PageObjects.visualize.selectAggregation('Terms');
|
||||
aggIndex = aggIndex + 1;
|
||||
log.debug('Field = play_name');
|
||||
await PageObjects.visualize.selectField('play_name');
|
||||
await PageObjects.visualize.clickGo();
|
||||
|
||||
const expectedChartValues = [ 71, 65, 62, 55, 55 ];
|
||||
await retry.try(async () => {
|
||||
const data = await PageObjects.visualize.getBarChartData('Speaking Parts');
|
||||
log.debug('data=' + data);
|
||||
log.debug('data.length=' + data.length);
|
||||
expect(data).to.eql(expectedChartValues);
|
||||
});
|
||||
|
||||
const labels = await PageObjects.visualize.getXAxisLabels();
|
||||
expect(labels).to.eql([ 'Richard III', 'Henry VI Part 2', 'Coriolanus',
|
||||
'Antony and Cleopatra', 'Timon of Athens' ]);
|
||||
});
|
||||
|
||||
|
||||
/* Now that you have a list of the smallest casts for Shakespeare plays, you
|
||||
might also be curious to see which of these plays makes the greatest demands
|
||||
on an individual actor by showing the maximum number of speeches for a
|
||||
given part.
|
||||
|
||||
1. Click Add metrics to add a Y-axis aggregation.
|
||||
2. Choose the Max aggregation and select the speech_number field.
|
||||
*/
|
||||
it('should configure Max aggregation metric on speech_number', async function () {
|
||||
await PageObjects.visualize.clickAddMetric();
|
||||
await PageObjects.visualize.clickBucket('Y-Axis');
|
||||
log.debug('Aggregation = Max');
|
||||
await PageObjects.visualize.selectYAxisAggregation('Max', 'speech_number', 'Max Speaking Parts', aggIndex);
|
||||
await PageObjects.visualize.clickGo();
|
||||
|
||||
const expectedChartValues = [ 71, 65, 62, 55, 55 ];
|
||||
const expectedChartValues2 = [177, 106, 153, 132, 162 ];
|
||||
await retry.try(async () => {
|
||||
const data = await PageObjects.visualize.getBarChartData('Speaking Parts');
|
||||
const data2 = await PageObjects.visualize.getBarChartData('Max Speaking Parts');
|
||||
log.debug('data=' + data);
|
||||
log.debug('data.length=' + data.length);
|
||||
log.debug('data2=' + data2);
|
||||
log.debug('data2.length=' + data2.length);
|
||||
expect(data).to.eql(expectedChartValues);
|
||||
expect(data2).to.eql(expectedChartValues2);
|
||||
});
|
||||
|
||||
const labels = await PageObjects.visualize.getXAxisLabels();
|
||||
expect(labels).to.eql([ 'Richard III', 'Henry VI Part 2', 'Coriolanus',
|
||||
'Antony and Cleopatra', 'Timon of Athens' ]);
|
||||
});
|
||||
|
||||
/* Continued from above.
|
||||
|
||||
3. Click Options and change the Bar Mode to grouped.
|
||||
4. Click Apply changes images/apply-changes-button.png. Your chart should now look like this:
|
||||
*/
|
||||
it('should configure change options to normal bars', async function () {
|
||||
await PageObjects.visualize.clickMetricsAndAxes();
|
||||
await PageObjects.visualize.selectChartMode('normal');
|
||||
await PageObjects.visualize.clickGo();
|
||||
|
||||
const expectedChartValues = [ 71, 65, 62, 55, 55 ];
|
||||
const expectedChartValues2 = [177, 106, 153, 132, 162 ];
|
||||
await retry.try(async () => {
|
||||
const data = await PageObjects.visualize.getBarChartData('Speaking Parts');
|
||||
const data2 = await PageObjects.visualize.getBarChartData('Max Speaking Parts');
|
||||
log.debug('data=' + data);
|
||||
log.debug('data.length=' + data.length);
|
||||
log.debug('data2=' + data2);
|
||||
log.debug('data2.length=' + data2.length);
|
||||
expect(data).to.eql(expectedChartValues);
|
||||
expect(data2).to.eql(expectedChartValues2);
|
||||
});
|
||||
});
|
||||
|
||||
/* Note how the Number of speaking parts Y-axis starts at zero, but the bars
|
||||
don’t begin to differentiate until 18. To make the differences stand out,
|
||||
starting the Y-axis at a value closer to the minimum, go to Options and
|
||||
select Scale Y-Axis to data bounds.
|
||||
|
||||
Save this chart with the name Bar Example.
|
||||
*/
|
||||
it('should change the Y-Axis extents', async function () {
|
||||
await PageObjects.visualize.setAxisExtents('50', '250');
|
||||
await PageObjects.visualize.clickGo();
|
||||
|
||||
// same values as previous test except scaled down by the 50 for Y-Axis min
|
||||
const expectedChartValues = [ 21, 15, 12, 5, 5 ];
|
||||
const expectedChartValues2 = [127, 56, 103, 82, 112 ];
|
||||
await retry.try(async () => {
|
||||
const data = await PageObjects.visualize.getBarChartData('Speaking Parts');
|
||||
const data2 = await PageObjects.visualize.getBarChartData('Max Speaking Parts');
|
||||
log.debug('data=' + data);
|
||||
log.debug('data.length=' + data.length);
|
||||
log.debug('data2=' + data2);
|
||||
log.debug('data2.length=' + data2.length);
|
||||
expect(data).to.eql(expectedChartValues);
|
||||
expect(data2).to.eql(expectedChartValues2);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
11
test/functional/apps/getting_started/index.js
Normal file
11
test/functional/apps/getting_started/index.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
export default function ({ getService, loadTestFile }) {
|
||||
const remote = getService('remote');
|
||||
|
||||
describe('Getting Started ', function () {
|
||||
before(async function () {
|
||||
await remote.setWindowSize(1200, 800);
|
||||
});
|
||||
// https://www.elastic.co/guide/en/kibana/current/tutorial-load-dataset.html
|
||||
loadTestFile(require.resolve('./_shakespeare'));
|
||||
});
|
||||
}
|
||||
|
|
@ -59,7 +59,7 @@ export default function ({ getService, getPageObjects }) {
|
|||
// sleep a bit before trying to get the chart data
|
||||
return PageObjects.common.sleep(3000)
|
||||
.then(function () {
|
||||
return PageObjects.visualize.getLineChartData('fill="#00a69b"')
|
||||
return PageObjects.visualize.getLineChartData()
|
||||
.then(function showData(data) {
|
||||
log.debug('data=' + data);
|
||||
const tolerance = 10; // the y-axis scale is 10000 so 10 is 0.1%
|
||||
|
|
@ -93,7 +93,7 @@ export default function ({ getService, getPageObjects }) {
|
|||
})
|
||||
.then(function () {
|
||||
return retry.try(function () {
|
||||
return PageObjects.visualize.getLineChartData('fill="#00a69b"')
|
||||
return PageObjects.visualize.getLineChartData()
|
||||
.then(function showData(data) {
|
||||
log.debug('data=' + data);
|
||||
const tolerance = 10; // the y-axis scale is 10000 so 10 is 0.1%
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@ export default function ({ getService, getPageObjects }) {
|
|||
const PageObjects = getPageObjects(['common', 'visualize', 'header', 'pointSeries']);
|
||||
const pointSeriesVis = PageObjects.pointSeries;
|
||||
|
||||
|
||||
describe('visualize app', function describeIndexTests() {
|
||||
describe('point series', function describeIndexTests() {
|
||||
before(function () {
|
||||
const fromTime = '2015-09-19 06:31:44.000';
|
||||
const toTime = '2015-09-23 18:31:44.000';
|
||||
|
|
@ -86,19 +85,20 @@ export default function ({ getService, getPageObjects }) {
|
|||
const expectedChartValues = [
|
||||
[ 37, 202, 740, 1437, 1371, 751, 188, 31, 42, 202, 683,
|
||||
1361, 1415, 707, 177, 27, 32, 175, 707, 1408, 1355, 726, 201, 29 ],
|
||||
[ 14018296036, 13284815935, 13198764883, 13093365683, 13067752146, 12976598848,
|
||||
13561826081, 14339648875, 14011021362, 12775336396, 13304506791, 12988890398,
|
||||
13143466970, 13244378772, 12154757448, 15907286281, 13757317120, 13022240959,
|
||||
12807319386, 13375732998, 13190755620, 12627508458, 12731510199, 13153337344 ],
|
||||
[ 14018300000, 13284800000, 13198800000, 13093400000, 13067800000,
|
||||
12976600000, 13561800000, 14339600000, 14011000000, 12775300000,
|
||||
13304500000, 12988900000, 13143500000, 13244400000, 12154800000,
|
||||
15907300000, 13757300000, 13022200000, 12807300000, 13375700000,
|
||||
13190800000, 12627500000, 12731500000, 13153300000 ],
|
||||
];
|
||||
|
||||
await retry.try(async () => {
|
||||
const data = await PageObjects.visualize.getLineChartData('fill="#00a69b"');
|
||||
const data = await PageObjects.visualize.getLineChartData('Count');
|
||||
log.debug('count data=' + data);
|
||||
log.debug('data.length=' + data.length);
|
||||
expect(data).to.eql(expectedChartValues[0]);
|
||||
|
||||
const avgMemoryData = await PageObjects.visualize.getLineChartData('fill="#57c17b"', 'ValueAxis-2');
|
||||
const avgMemoryData = await PageObjects.visualize.getLineChartData('Average machine.ram', 'ValueAxis-2');
|
||||
log.debug('average memory data=' + avgMemoryData);
|
||||
log.debug('data.length=' + avgMemoryData.length);
|
||||
expect(avgMemoryData).to.eql(expectedChartValues[1]);
|
||||
|
|
@ -121,9 +121,6 @@ export default function ({ getService, getPageObjects }) {
|
|||
.then(function () {
|
||||
return PageObjects.visualize.clickGo();
|
||||
})
|
||||
.then(function () {
|
||||
return PageObjects.common.sleep(2000);
|
||||
})
|
||||
.then(function checkSeriesTypes() {
|
||||
pointSeriesVis.getHistogramSeries().then(length => {
|
||||
expect(length).to.be(1);
|
||||
|
|
@ -142,9 +139,6 @@ export default function ({ getService, getPageObjects }) {
|
|||
.then(function () {
|
||||
return PageObjects.visualize.clickGo();
|
||||
})
|
||||
.then(function () {
|
||||
return PageObjects.common.sleep(2000);
|
||||
})
|
||||
.then(function () {
|
||||
return pointSeriesVis.getGridLines();
|
||||
})
|
||||
|
|
@ -165,9 +159,6 @@ export default function ({ getService, getPageObjects }) {
|
|||
.then(function () {
|
||||
return PageObjects.visualize.clickGo();
|
||||
})
|
||||
.then(function () {
|
||||
return PageObjects.common.sleep(5000);
|
||||
})
|
||||
.then(function () {
|
||||
return pointSeriesVis.getGridLines();
|
||||
})
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ export default async function ({ readConfigFile }) {
|
|||
return {
|
||||
testFiles: [
|
||||
require.resolve('./apps/console'),
|
||||
require.resolve('./apps/getting_started'),
|
||||
require.resolve('./apps/context'),
|
||||
require.resolve('./apps/dashboard'),
|
||||
require.resolve('./apps/discover'),
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"type": "index",
|
||||
"value": {
|
||||
"index": "shakespeare",
|
||||
"settings": {
|
||||
"index": {
|
||||
"number_of_shards": "5",
|
||||
"number_of_replicas": "1"
|
||||
}
|
||||
},
|
||||
"mappings": {
|
||||
"doc": {
|
||||
"properties": {
|
||||
"speaker": {"type": "keyword"},
|
||||
"play_name": {"type": "keyword"},
|
||||
"line_id": {"type": "integer"},
|
||||
"speech_number": {"type": "integer"}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -369,6 +369,76 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
|
|||
});
|
||||
}
|
||||
|
||||
async toggleOpenEditor(index) {
|
||||
// index, see selectYAxisAggregation
|
||||
const toggle = await find.byCssSelector(`button[aria-controls="visAggEditorParams${index}"]`);
|
||||
const toggleOpen = await toggle.getAttribute('aria-expanded');
|
||||
log.debug(`toggle ${index} expand = ${toggleOpen}`);
|
||||
if (toggleOpen === 'false') {
|
||||
log.debug(`toggle ${index} click()`);
|
||||
await toggle.click();
|
||||
}
|
||||
}
|
||||
|
||||
async selectYAxisAggregation(agg, field, label, index = 1) {
|
||||
// index starts on the first "count" metric at 1
|
||||
// Each new metric or aggregation added to a visualization gets the next index.
|
||||
// So to modify a metric or aggregation tests need to keep track of the
|
||||
// order they are added.
|
||||
await this.toggleOpenEditor(index);
|
||||
const aggSelect = await find
|
||||
.byCssSelector(`#visAggEditorParams${index} div [data-test-subj="visEditorAggSelect"] div span[aria-label="Select box activate"]`);
|
||||
// open agg selection list
|
||||
await aggSelect.click();
|
||||
// select our agg
|
||||
const aggItem = await find.byCssSelector(`[data-test-subj="${agg}"]`);
|
||||
await aggItem.click();
|
||||
const fieldSelect = await find
|
||||
.byCssSelector(`#visAggEditorParams${index} > [agg-param="agg.type.params[0]"] > div > div > div.ui-select-match.ng-scope > span`);
|
||||
// open field selection list
|
||||
await fieldSelect.click();
|
||||
// select our field
|
||||
await testSubjects.click(field);
|
||||
// enter custom label
|
||||
await this.setCustomLabel(label, index);
|
||||
}
|
||||
|
||||
async setCustomLabel(label, index = 1) {
|
||||
const customLabel = await find.byCssSelector(`#visEditorStringInput${index}customLabel`);
|
||||
customLabel.type(label);
|
||||
}
|
||||
|
||||
async setAxisExtents(min, max, axis = 'LeftAxis-1') {
|
||||
const axisOptions = await find.byCssSelector(`div[aria-label="Toggle ${axis} options"]`);
|
||||
const isOpen = await axisOptions.getAttribute('aria-expanded');
|
||||
if (isOpen === 'false') {
|
||||
log.debug(`click to open ${axis} options`);
|
||||
await axisOptions.click();
|
||||
}
|
||||
// it would be nice to get the correct axis by name like "LeftAxis-1"
|
||||
// instead of an incremented index, but this link isn't under the div above
|
||||
const advancedLink =
|
||||
await find.byCssSelector(`#axisOptionsValueAxis-1 .kuiSideBarOptionsLink .kuiSideBarOptionsLink__caret`);
|
||||
|
||||
const advancedLinkState = await advancedLink.getAttribute('class');
|
||||
if (advancedLinkState.includes('fa-caret-right')) {
|
||||
await advancedLink.session.moveMouseTo(advancedLink);
|
||||
log.debug('click advancedLink');
|
||||
await advancedLink.click();
|
||||
}
|
||||
const checkbox = await find.byCssSelector('input[ng-model="axis.scale.setYExtents"]');
|
||||
const checkboxState = await checkbox.getAttribute('class');
|
||||
if (checkboxState.includes('ng-empty')) {
|
||||
await checkbox.session.moveMouseTo(checkbox);
|
||||
await checkbox.click();
|
||||
}
|
||||
const maxField = await find.byCssSelector('[ng-model="axis.scale.max"]');
|
||||
await maxField.type(max);
|
||||
const minField = await find.byCssSelector('[ng-model="axis.scale.min"]');
|
||||
await minField.type(min);
|
||||
|
||||
}
|
||||
|
||||
async getField() {
|
||||
const field = await retry.try(
|
||||
async () => await find.byCssSelector('.ng-valid-required[name="field"] .ui-select-match-text'));
|
||||
|
|
@ -391,12 +461,12 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
|
|||
|
||||
async orderBy(fieldValue) {
|
||||
await find.clickByCssSelector(
|
||||
'select.form-control.ng-pristine.ng-valid.ng-untouched.ng-valid-required[ng-model="agg.params.orderBy"] ' +
|
||||
'option.ng-binding.ng-scope:contains("' + fieldValue + '")');
|
||||
'select.form-control.ng-pristine.ng-valid.ng-untouched.ng-valid-required[ng-model="agg.params.orderBy"]'
|
||||
+ `option.ng-binding.ng-scope:contains("${fieldValue}")`);
|
||||
}
|
||||
|
||||
async selectOrderBy(fieldValue) {
|
||||
await find.clickByCssSelector('select[name="orderBy"] > option[value="' + fieldValue + '"]');
|
||||
await find.clickByCssSelector(`select[name="orderBy"] > option[value="${fieldValue}"]`);
|
||||
}
|
||||
|
||||
async getInterval() {
|
||||
|
|
@ -450,6 +520,15 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
|
|||
await find.clickByPartialLinkText('Options');
|
||||
}
|
||||
|
||||
async clickMetricsAndAxes() {
|
||||
await testSubjects.click('visEditorTabadvanced');
|
||||
}
|
||||
|
||||
async selectChartMode(mode) {
|
||||
const selector = await find.byCssSelector(`#seriesMode0 > option[label="${mode}"]`);
|
||||
await selector.click();
|
||||
}
|
||||
|
||||
async clickData() {
|
||||
await testSubjects.click('visualizeEditDataLink');
|
||||
}
|
||||
|
|
@ -538,23 +617,15 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
|
|||
** This method gets the chart data and scales it based on chart height and label.
|
||||
** Returns an array of height values
|
||||
*/
|
||||
async getAreaChartData(aggregateName) {
|
||||
// 1). get the maximim chart Y-Axis marker value
|
||||
const maxChartYAxisElement = await retry.try(
|
||||
async () => await find.byCssSelector('div.y-axis-div-wrapper > div > svg > g > g:last-of-type'));
|
||||
|
||||
const yLabel = await maxChartYAxisElement.getVisibleText();
|
||||
// since we're going to use the y-axis 'last' (top) label as a number to
|
||||
// scale the chart pixel data, we need to clean out commas and % marks.
|
||||
const yAxisLabel = yLabel.replace(/(%|,)/g, '');
|
||||
log.debug('yAxisLabel = ' + yAxisLabel);
|
||||
async getAreaChartData(dataLabel, axis = 'ValueAxis-1') {
|
||||
const yAxisRatio = await this.getChartYAxisRatio(axis);
|
||||
|
||||
const rectangle = await find.byCssSelector('rect.background');
|
||||
const yAxisHeight = await rectangle.getAttribute('height');
|
||||
log.debug(`height --------- ${yAxisHeight}`);
|
||||
|
||||
const path = await retry.try(
|
||||
async () => await find.byCssSelector(`path[data-label="${aggregateName}"]`, defaultFindTimeout * 2));
|
||||
async () => await find.byCssSelector(`path[data-label="${dataLabel}"]`, defaultFindTimeout * 2));
|
||||
const data = await path.getAttribute('d');
|
||||
log.debug(data);
|
||||
// This area chart data starts with a 'M'ove to a x,y location, followed
|
||||
|
|
@ -563,37 +634,33 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
|
|||
// So git rid of the one 'M' and split the rest on the 'L's.
|
||||
const tempArray = data.replace('M', '').split('L');
|
||||
const chartSections = tempArray.length / 2;
|
||||
log.debug('chartSections = ' + chartSections + ' height = ' + yAxisHeight + ' yAxisLabel = ' + yAxisLabel);
|
||||
// log.debug('chartSections = ' + chartSections + ' height = ' + yAxisHeight + ' yAxisLabel = ' + yAxisLabel);
|
||||
const chartData = [];
|
||||
for (let i = 0; i < chartSections; i++) {
|
||||
chartData[i] = Math.round((yAxisHeight - tempArray[i].split(',')[1]) / yAxisHeight * yAxisLabel);
|
||||
chartData[i] = Math.round((yAxisHeight - tempArray[i].split(',')[1]) * yAxisRatio);
|
||||
log.debug('chartData[i] =' + chartData[i]);
|
||||
}
|
||||
return chartData;
|
||||
}
|
||||
|
||||
// The current test shows dots, not a line. This function gets the dots and normalizes their height.
|
||||
async getLineChartData(cssPart, axis = 'ValueAxis-1') {
|
||||
// 1). get the maximim chart Y-Axis marker value
|
||||
const maxYAxisMarker = await retry.try(
|
||||
async () => await find.byCssSelector(`div.y-axis-div-wrapper > div > svg > g.${axis} > g:last-of-type`));
|
||||
const yLabel = await maxYAxisMarker.getVisibleText();
|
||||
const yAxisLabel = yLabel.replace(/,/g, '');
|
||||
|
||||
async getLineChartData(dataLabel = 'Count', axis = 'ValueAxis-1') {
|
||||
// 1). get the range/pixel ratio
|
||||
const yAxisRatio = await this.getChartYAxisRatio(axis);
|
||||
// 2). find and save the y-axis pixel size (the chart height)
|
||||
const rectangle = await find.byCssSelector('clipPath rect');
|
||||
const theHeight = await rectangle.getAttribute('height');
|
||||
const yAxisHeight = theHeight;
|
||||
log.debug('theHeight = ' + theHeight);
|
||||
|
||||
const yAxisHeight = await rectangle.getAttribute('height');
|
||||
// 3). get the chart-wrapper elements
|
||||
const chartTypes = await retry.try(
|
||||
async () => await find.allByCssSelector(`.chart-wrapper circle[${cssPart}]`, defaultFindTimeout * 2));
|
||||
async () => await find
|
||||
.allByCssSelector(`.chart-wrapper circle[data-label="${dataLabel}"][fill-opacity="1"]`, defaultFindTimeout * 2));
|
||||
|
||||
// 5). for each chart element, find the green circle, then the cy position
|
||||
async function getChartType(chart) {
|
||||
const cy = await chart.getAttribute('cy');
|
||||
return Math.round((yAxisHeight - cy) / yAxisHeight * yAxisLabel);
|
||||
// the point_series_options test has data in the billions range and
|
||||
// getting 11 digits of precision with these calculations is very hard
|
||||
return Math.round(((yAxisHeight - cy) * yAxisRatio).toPrecision(6));
|
||||
}
|
||||
|
||||
// 4). pass the chartTypes to the getChartType function
|
||||
|
|
@ -602,34 +669,40 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
|
|||
}
|
||||
|
||||
// this is ALMOST identical to DiscoverPage.getBarChartData
|
||||
async getBarChartData() {
|
||||
// 1). get the maximim chart Y-Axis marker value
|
||||
const maxYAxisChartMarker = await retry.try(
|
||||
async () => await find.byCssSelector('div.y-axis-div-wrapper > div > svg > g > g:last-of-type'));
|
||||
|
||||
const yLabel = await maxYAxisChartMarker.getVisibleText();
|
||||
const yAxisLabel = yLabel.replace(',', '');
|
||||
log.debug('yAxisLabel = ' + yAxisLabel);
|
||||
|
||||
// 2). find and save the y-axis pixel size (the chart height)
|
||||
const chartAreaObj = await find.byCssSelector('rect.background');
|
||||
const yAxisHeight = await chartAreaObj.getAttribute('height');
|
||||
|
||||
async getBarChartData(dataLabel = 'Count', axis = 'ValueAxis-1') {
|
||||
// 1). get the range/pixel ratio
|
||||
const yAxisRatio = await this.getChartYAxisRatio(axis);
|
||||
// 3). get the chart-wrapper elements
|
||||
const chartTypes = await find.allByCssSelector('svg > g > g.series > rect');
|
||||
async function getChartType(chart) {
|
||||
const fillColor = await chart.getAttribute('fill');
|
||||
const chartTypes = await find.allByCssSelector(`svg > g > g.series > rect[data-label="${dataLabel}"]`);
|
||||
|
||||
// we're getting the default count color from defaults.js
|
||||
if (fillColor === '#00a69b') {
|
||||
const barHeight = await chart.getAttribute('height');
|
||||
return Math.round(barHeight / yAxisHeight * yAxisLabel);
|
||||
}
|
||||
async function getChartType(chart) {
|
||||
const barHeight = await chart.getAttribute('height');
|
||||
return Math.round(barHeight * yAxisRatio);
|
||||
}
|
||||
const getChartTypesPromises = chartTypes.map(getChartType);
|
||||
return await Promise.all(getChartTypesPromises);
|
||||
}
|
||||
|
||||
|
||||
// Returns value per pixel
|
||||
async getChartYAxisRatio(axis = 'ValueAxis-1') {
|
||||
// 1). get the maximim chart Y-Axis marker value and Y position
|
||||
const maxYAxisChartMarker = await retry.try(
|
||||
async () => await find.byCssSelector(`div.y-axis-div-wrapper > div > svg > g.${axis} > g:last-of-type.tick`)
|
||||
);
|
||||
const maxYLabel = (await maxYAxisChartMarker.getVisibleText()).replace(/,/g, '');
|
||||
const maxYLabelYPosition = (await maxYAxisChartMarker.getPosition()).y;
|
||||
log.debug(`maxYLabel = ${maxYLabel}, maxYLabelYPosition = ${maxYLabelYPosition}`);
|
||||
|
||||
// 2). get the minimum chart Y-Axis marker value and Y position
|
||||
const minYAxisChartMarker = await
|
||||
find.byCssSelector('div.y-axis-col.axis-wrapper-left > div > div > svg:nth-child(2) > g > g:nth-child(1).tick');
|
||||
const minYLabel = (await minYAxisChartMarker.getVisibleText()).replace(',', '');
|
||||
const minYLabelYPosition = (await minYAxisChartMarker.getPosition()).y;
|
||||
return ((maxYLabel - minYLabel) / (minYLabelYPosition - maxYLabelYPosition));
|
||||
}
|
||||
|
||||
|
||||
async getHeatmapData() {
|
||||
const chartTypes = await retry.try(
|
||||
async () => await find.allByCssSelector('svg > g > g.series rect', defaultFindTimeout * 2));
|
||||
|
|
@ -799,6 +872,16 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
|
|||
return await testSubjects.exists(`legendSelectedColor-${color}`);
|
||||
}
|
||||
|
||||
async getYAxisTitle() {
|
||||
const title = await find.byCssSelector('.y-axis-div .y-axis-title text');
|
||||
return await title.getVisibleText();
|
||||
}
|
||||
|
||||
async selectBucketType(type) {
|
||||
const bucketType = await find.byCssSelector(`[data-test-subj="${type}"]`);
|
||||
return await bucketType.click();
|
||||
}
|
||||
|
||||
async getPieSlice(name) {
|
||||
return await testSubjects.find(`pieSlice-${name.split(' ').join('-')}`);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue