Skip to content

Commit

Permalink
Gauge visualization can no longer be clicked to filter on values sinc…
Browse files Browse the repository at this point in the history 
…e Kibana 7.10.0 (#84768)

* Gauge visualization can no longer be clicked to filter on values since Kibana 7.10.0

Closes #84191

* Add functional test to  filtering on gauge
  • Loading branch information
@DianaDerevyankina
DianaDerevyankina committed Dec 15, 2020
1 parent 818246e commit ffe29f7
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 46 deletions.
3 changes: 2 additions & 1 deletion src/plugins/vis_type_vislib/public/gauge.ts
View file
Expand Up @@ -25,7 +25,7 @@ import { GaugeOptions } from './components/options';
import { getGaugeCollections, Alignments, GaugeTypes } from './utils/collections';
import { ColorModes, ColorSchemas, ColorSchemaParams, Labels, Style } from '../../charts/public';
import { toExpressionAst } from './to_ast';
import { BaseVisTypeOptions } from '../../visualizations/public';
import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../visualizations/public';
import { BasicVislibParams } from './types';

export interface Gauge extends ColorSchemaParams {
Expand Down Expand Up @@ -63,6 +63,7 @@ export const gaugeVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
description: i18n.translate('visTypeVislib.gauge.gaugeDescription', {
defaultMessage: 'Show the status of a metric.',
}),
getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter],
toExpressionAst,
visConfig: {
defaults: {
Expand Down
5 changes: 4 additions & 1 deletion src/plugins/vis_type_vislib/public/vislib/visualizations/gauge_chart.js
View file
Expand Up @@ -31,7 +31,10 @@ export class GaugeChart extends Chart {
addEvents(element) {
const events = this.events;

return element.call(events.addHoverEvent()).call(events.addMouseoutEvent());
return element
.call(events.addHoverEvent())
.call(events.addMouseoutEvent())
.call(events.addClickEvent());
}

/**
Expand Down
4 changes: 3 additions & 1 deletion src/plugins/vis_type_vislib/public/vislib/visualizations/gauges/meter.js
View file
Expand Up @@ -344,7 +344,9 @@ export class MeterGauge {
const transformX = width / 2;
const transformY = height / 2 > maxRadius ? height / 2 : maxRadius;

svg.attr('transform', `translate(${transformX}, ${transformY})`);
svg
.attr('transform', `translate(${transformX}, ${transformY})`)
.attr('data-test-subj', `visGauge__meter--${data.label}`);

return series;
}
Expand Down
100 changes: 57 additions & 43 deletions test/functional/apps/visualize/_gauge_chart.js
View file
Expand Up @@ -23,6 +23,7 @@ export default function ({ getService, getPageObjects }) {
const log = getService('log');
const retry = getService('retry');
const inspector = getService('inspector');
const filterBar = getService('filterBar');
const testSubjects = getService('testSubjects');
const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'timePicker']);

Expand Down Expand Up @@ -52,50 +53,7 @@ export default function ({ getService, getPageObjects }) {
});
});

it('should show Split Gauges', async function () {
log.debug('Bucket = Split Group');
await PageObjects.visEditor.clickBucket('Split group');
log.debug('Aggregation = Terms');
await PageObjects.visEditor.selectAggregation('Terms');
log.debug('Field = machine.os.raw');
await PageObjects.visEditor.selectField('machine.os.raw');
log.debug('Size = 4');
await PageObjects.visEditor.setSize('4');
await PageObjects.visEditor.clickGo();

await retry.try(async () => {
expect(await PageObjects.visChart.getGaugeValue()).to.eql([
'2,904',
'win 8',
'2,858',
'win xp',
'2,814',
'win 7',
'2,784',
'ios',
]);
});
});

it('should show correct values for fields with fieldFormatters', async function () {
const expectedTexts = ['2,904', 'win 8: Count', '0B', 'win 8: Min bytes'];

await PageObjects.visEditor.selectAggregation('Terms');
await PageObjects.visEditor.selectField('machine.os.raw');
await PageObjects.visEditor.setSize('1');
await PageObjects.visEditor.clickBucket('Metric', 'metrics');
await PageObjects.visEditor.selectAggregation('Min', 'metrics');
await PageObjects.visEditor.selectField('bytes', 'metrics');
await PageObjects.visEditor.clickGo();

await retry.try(async function tryingForTime() {
const metricValue = await PageObjects.visChart.getGaugeValue();
expect(expectedTexts).to.eql(metricValue);
});
});

it('should format the metric correctly in percentage mode', async function () {
await initGaugeVis();
await PageObjects.visEditor.clickMetricEditor();
await PageObjects.visEditor.selectAggregation('Average', 'metrics');
await PageObjects.visEditor.selectField('bytes', 'metrics');
Expand All @@ -111,5 +69,61 @@ export default function ({ getService, getPageObjects }) {
expect(expectedTexts).to.eql(metricValue);
});
});

describe('Split Gauges', () => {
before(async () => {
await initGaugeVis();
log.debug('Bucket = Split Group');
await PageObjects.visEditor.clickBucket('Split group');
log.debug('Aggregation = Terms');
await PageObjects.visEditor.selectAggregation('Terms');
log.debug('Field = machine.os.raw');
await PageObjects.visEditor.selectField('machine.os.raw');
log.debug('Size = 4');
await PageObjects.visEditor.setSize('4');
await PageObjects.visEditor.clickGo();
});

it('should show Split Gauges', async () => {
await retry.try(async () => {
expect(await PageObjects.visChart.getGaugeValue()).to.eql([
'2,904',
'win 8',
'2,858',
'win xp',
'2,814',
'win 7',
'2,784',
'ios',
]);
});
});

it('should add machine.os.raw:win 8 filter by click on the first Gauge', async () => {
await PageObjects.visChart.clickOnGaugeByLabel('win 8');
const hasFilter = await filterBar.hasFilter('machine.os.raw', 'win 8');

expect(hasFilter).to.eql(true);
});

it('should show correct values for fields with fieldFormatters', async () => {
const expectedTexts = ['2,904', 'win 8: Count', '0B', 'win 8: Min bytes'];

await PageObjects.visEditor.selectAggregation('Terms');
await PageObjects.visEditor.selectField('machine.os.raw');
await PageObjects.visEditor.setSize('1');
await PageObjects.visEditor.clickBucket('Metric', 'metrics');
await PageObjects.visEditor.selectAggregation('Min', 'metrics');
await PageObjects.visEditor.selectField('bytes', 'metrics');
await PageObjects.visEditor.clickGo();

await retry.try(async function tryingForTime() {
const metricValue = await PageObjects.visChart.getGaugeValue();
expect(expectedTexts).to.eql(metricValue);
});
});

afterEach(async () => await filterBar.removeAllFilters());
});
});
}
11 changes: 11 additions & 0 deletions test/functional/page_objects/visualize_chart_page.ts
View file
Expand Up @@ -400,6 +400,17 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
return values.filter((item) => item.length > 0);
}

public async clickOnGaugeByLabel(label: string) {
const gauge = await testSubjects.find(`visGauge__meter--${label}`);
const gaugeSize = await gauge.getSize();
const gaugeHeight = gaugeSize.height;
// To click at Gauge arc instead of the center of SVG element
// the offset for a click is calculated as half arc height without 1 pixel
const yOffset = 1 - Math.floor(gaugeHeight / 2);

await gauge.clickMouseButton({ xOffset: 0, yOffset });
}

public async getRightValueAxes() {
const axes = await find.allByCssSelector('.visAxis__column--right g.axis');
return axes.length;
Expand Down

0 comments on commit ffe29f7

Please sign in to comment.