Skip to content

Commit

Permalink
cleanup pie legacy
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbondyra
mbondyra committed Oct 30, 2024
1 parent 104525e commit 94bc4b0
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 143 deletions.
3 changes: 1 addition & 2 deletions test/functional/apps/visualize/group3/_pie_chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
});

it('should show 10 slices in pie chart', async function () {
await pieChart.expectPieSliceCount(10, isNewChartsLibraryEnabled);
await pieChart.expectPieSliceCount(10);
});

it('should show correct data', async function () {
Expand Down Expand Up @@ -314,7 +314,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
);
await timePicker.setAbsoluteRange(emptyFromTime, emptyToTime);
await visChart.waitForVisualization();
await visChart.expectError();
});
});
describe('multi series slice', () => {
Expand Down
2 changes: 1 addition & 1 deletion test/functional/apps/visualize/replaced_vislib_chart_types/_vertical_bar_chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
});

it('should correctly filter by legend', async () => {
await visChart.filterLegend('200', true);
await visChart.filterLegend('200');
await visChart.waitForVisualization();
const legendEntries = await visChart.getLegendEntriesXYCharts(xyChartSelector);
const expectedEntries = ['200'];
Expand Down
51 changes: 16 additions & 35 deletions test/functional/page_objects/visualize_chart_page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,20 +153,17 @@ export class VisualizeChartPageObject extends FtrService {
return values.sort((a, b) => a.x - b.x).map(({ y }) => y);
}

private async toggleLegend(force = false) {
const isVisTypePieChart = await this.isNewLibraryChart(partitionVisChartSelector);
const legendSelector = force || isVisTypePieChart ? '.echLegend' : '.visLegend';

private async toggleLegend() {
await this.retry.try(async () => {
const isVisible = await this.find.existsByCssSelector(legendSelector);
const isVisible = await this.find.existsByCssSelector('.echLegend');
if (!isVisible) {
await this.testSubjects.click('vislibToggleLegend');
}
});
}

public async filterLegend(name: string, force = false) {
await this.toggleLegend(force);
public async filterLegend(name: string) {
await this.toggleLegend();
await this.testSubjects.click(`legend-${name}`);
// wait for a short amount of time for popover to stabilize as there is no good way to check for that
await this.common.sleep(250);
Expand All @@ -189,23 +186,13 @@ export class VisualizeChartPageObject extends FtrService {
}

public async doesSelectedLegendColorExistForPie(matchingColor: string) {
if (await this.isNewLibraryChart(partitionVisChartSelector)) {
const hexMatchingColor = chroma(matchingColor).hex().toUpperCase();
const slices =
(await this.getEsChartDebugState(partitionVisChartSelector))?.partition?.[0]?.partitions ??
[];
return slices.some(({ color }) => {
return hexMatchingColor === chroma(color).hex().toUpperCase();
});
}

return await this.testSubjects.exists(`legendSelectedColor-${matchingColor}`);
}

public async expectError() {
if (!this.isNewLibraryChart(partitionVisChartSelector)) {
await this.testSubjects.existOrFail('vislibVisualizeError');
}
const hexMatchingColor = chroma(matchingColor).hex().toUpperCase();
const slices =
(await this.getEsChartDebugState(partitionVisChartSelector))?.partition?.[0]?.partitions ??
[];
return slices.some(({ color }) => {
return hexMatchingColor === chroma(color).hex().toUpperCase();
});
}

public async getVisualizationRenderingCount() {
Expand Down Expand Up @@ -305,17 +292,11 @@ export class VisualizeChartPageObject extends FtrService {
public async openLegendOptionColorsForPie(name: string, chartSelector: string) {
await this.waitForVisualizationRenderingStabilized();
await this.retry.try(async () => {
if (await this.isNewLibraryChart(partitionVisChartSelector)) {
const chart = await this.find.byCssSelector(chartSelector);
const legendItemColor = await chart.findByCssSelector(
`[data-ech-series-name="${name}"] .echLegendItem__color`
);
await legendItemColor.click();
} else {
// This click has been flaky in opening the legend, hence the this.retry. See
// https://github.com/elastic/kibana/issues/17468
await this.testSubjects.click(`legend-${name}`);
}
const chart = await this.find.byCssSelector(chartSelector);
const legendItemColor = await chart.findByCssSelector(
`[data-ech-series-name="${name}"] .echLegendItem__color`
);
await legendItemColor.click();

await this.waitForVisualizationRenderingStabilized();
// arbitrary color chosen, any available would do
Expand Down
158 changes: 53 additions & 105 deletions test/functional/services/visualizations/pie_chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
*/

import expect from '@kbn/expect';
import { isNil } from 'lodash';
import { DebugState } from '@elastic/charts';
import { FtrService } from '../../ftr_provider_context';

Expand All @@ -30,36 +29,24 @@ export class PieChartService extends FtrService {

async clickOnPieSlice(name?: string) {
this.log.debug(`PieChart.clickOnPieSlice(${name})`);
if (await this.visChart.isNewLibraryChart(partitionVisChartSelector)) {
const slices = this.getSlices(
await this.visChart.getEsChartDebugState(partitionVisChartSelector)
);
let sliceLabel = name || slices[0].name;
if (name === 'Other') {
sliceLabel = '__other__';
}
const pieSlice = slices.find((slice) => String(slice.name) === sliceLabel);
const pie = await this.testSubjects.find(partitionVisChartSelector);
if (pieSlice) {
const pieSize = await pie.getSize();
const pieHeight = pieSize.height;
const pieWidth = pieSize.width;
await pie.clickMouseButton({
xOffset: pieSlice.coords[0] - Math.floor(pieWidth / 2),
yOffset: pieSlice.coords[1] - Math.floor(pieHeight / 2),
});
}
} else {
if (name) {
await this.testSubjects.click(`pieSlice-${name.split(' ').join('-')}`);
} else {
// If no pie slice has been provided, find the first one available.
await this.retry.try(async () => {
const slices = await this.find.allByCssSelector('svg > g > g.arcs > path.slice');
this.log.debug('Slices found:' + slices.length);
return slices[0].click();
});
}

const slices = this.getSlices(
await this.visChart.getEsChartDebugState(partitionVisChartSelector)
);
let sliceLabel = name || slices[0].name;
if (name === 'Other') {
sliceLabel = '__other__';
}
const pieSlice = slices.find((slice) => String(slice.name) === sliceLabel);
const pie = await this.testSubjects.find(partitionVisChartSelector);
if (pieSlice) {
const pieSize = await pie.getSize();
const pieHeight = pieSize.height;
const pieWidth = pieSize.width;
await pie.clickMouseButton({
xOffset: pieSlice.coords[0] - Math.floor(pieWidth / 2),
yOffset: pieSlice.coords[1] - Math.floor(pieHeight / 2),
});
}
}

Expand Down Expand Up @@ -100,12 +87,8 @@ export class PieChartService extends FtrService {

async getPieSliceStyle(name: string) {
this.log.debug(`VisualizePage.getPieSliceStyle(${name})`);
if (await this.visChart.isNewLibraryChart(partitionVisChartSelector)) {
const selectedSlice = await this.getSelectedSlice(name);
return selectedSlice[0]?.color;
}
const pieSlice = await this.getPieSlice(name);
return await pieSlice.getAttribute('style');
const selectedSlice = await this.getSelectedSlice(name);
return selectedSlice[0]?.color;
}

async getAllPieSlicesColors() {
Expand All @@ -121,27 +104,8 @@ export class PieChartService extends FtrService {

async getAllPieSliceColor(name: string) {
this.log.debug(`VisualizePage.getAllPieSliceColor(${name})`);
if (await this.visChart.isNewLibraryChart(partitionVisChartSelector)) {
const selectedSlice = await this.getSelectedSlice(name);
return selectedSlice.map((slice) => slice.color);
}
const pieSlices = await this.getAllPieSlices(name);
const slicesStyles = await Promise.all(
pieSlices.map(async (pieSlice) => (await pieSlice.getAttribute('style')) ?? '')
);
return slicesStyles
.map(
(styles) =>
styles.split(';').reduce<Record<string, string>>((styleAsObj, style) => {
const stylePair = style.split(':');
if (stylePair.length !== 2) {
return styleAsObj;
}
styleAsObj[stylePair[0].trim()] = stylePair[1].trim();
return styleAsObj;
}, {}).fill // in vislib the color is available on the `fill` style prop
)
.filter((d) => !isNil(d));
const selectedSlice = await this.getSelectedSlice(name);
return selectedSlice.map((slice) => slice.color);
}

async getPieChartData() {
Expand All @@ -155,57 +119,41 @@ export class PieChartService extends FtrService {
await this.inspector.expectTableData(expectedTableData);
}

async getPieChartLabels(isNewLibrary: boolean = true) {
if (isNewLibrary) {
const slices = this.getSlices(
await this.visChart.getEsChartDebugState(partitionVisChartSelector)
);
return slices.map((slice) => {
if (slice.name === '__missing__') {
return 'Missing';
} else if (slice.name === '__other__') {
return 'Other';
} else if (typeof slice.name === 'number') {
// debugState of escharts returns the numbers without comma
const val = slice.name as number;
return val.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',');
} else {
return slice.name;
}
});
}
const chartTypes = await this.find.allByCssSelector('path.slice', this.defaultFindTimeout * 2);
return await Promise.all(
chartTypes.map(async (chart) => await chart.getAttribute('data-label'))
async getPieChartLabels() {
const slices = this.getSlices(
await this.visChart.getEsChartDebugState(partitionVisChartSelector)
);
return slices.map((slice) => {
if (slice.name === '__missing__') {
return 'Missing';
} else if (slice.name === '__other__') {
return 'Other';
} else if (typeof slice.name === 'number') {
// debugState of escharts returns the numbers without comma
const val = slice.name as number;
return val.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',');
} else {
return slice.name;
}
});
}

async getPieChartValues(isNewLibrary: boolean = true) {
async getPieChartValues() {
this.log.debug('PieChart.getPieChartValues');
if (isNewLibrary) {
const slices = this.getSlices(
await this.visChart.getEsChartDebugState(partitionVisChartSelector)
);
return slices.map((slice) => {
return slice.value;
});
}
const chartTypes = await this.find.allByCssSelector('path.slice', this.defaultFindTimeout * 2);
return await Promise.all(
chartTypes.map(async (chart) => await chart.getAttribute('data-value'))
const slices = this.getSlices(
await this.visChart.getEsChartDebugState(partitionVisChartSelector)
);
return slices.map((slice) => {
return slice.value;
});
}

async getPieSliceCount(isNewLibrary: boolean = true) {
async getPieSliceCount() {
this.log.debug('PieChart.getPieSliceCount');
if (isNewLibrary) {
const slices = this.getSlices(
await this.visChart.getEsChartDebugState(partitionVisChartSelector)
);
return slices?.length;
}
const slices = await this.find.allByCssSelector('svg > g > g.arcs > path.slice');
return slices.length;
const slices = this.getSlices(
await this.visChart.getEsChartDebugState(partitionVisChartSelector)
);
return slices?.length;
}

async getSliceCountForAllPies() {
Expand Down Expand Up @@ -234,10 +182,10 @@ export class PieChartService extends FtrService {
expect(slices.length).to.be(expectedCount);
}

async expectPieSliceCount(expectedCount: number, isNewLibrary: boolean = true) {
async expectPieSliceCount(expectedCount: number) {
this.log.debug(`PieChart.expectPieSliceCount(${expectedCount})`);
await this.retry.try(async () => {
const slicesCount = await this.getPieSliceCount(isNewLibrary);
const slicesCount = await this.getPieSliceCount();
expect(slicesCount).to.be(expectedCount);
});
}
Expand All @@ -254,10 +202,10 @@ export class PieChartService extends FtrService {
expect(noResult).to.be(true);
}

async expectPieChartLabels(expectedLabels: string[], isNewLibrary: boolean = true) {
async expectPieChartLabels(expectedLabels: string[]) {
this.log.debug(`PieChart.expectPieChartLabels(${expectedLabels.join(',')})`);
await this.retry.try(async () => {
const pieData = await this.getPieChartLabels(isNewLibrary);
const pieData = await this.getPieChartLabels();
expect(pieData.sort()).to.eql(expectedLabels);
});
}
Expand Down

0 comments on commit 94bc4b0

Please sign in to comment.