github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

Fix missing labels on certain axes and label filter configurations (#47563) (#55565)

Browse source
This commit is contained in:
Joe Reuter 2020-01-22 18:14:40 +01:00 • committed by GitHub
parent 9153abef4e
commit 475acf083f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 564 additions and 494 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/select.tsx
View file

@ -30,6 +30,7 @@ interface SelectOptionProps<ParamName extends string, ValidParamValues extends s
paramName: ParamName;
value?: ValidParamValues;
setValue: (paramName: ParamName, value: ValidParamValues) => void;
'data-test-subj'?: string;
}
const emptyValue = { text: '', value: 'EMPTY_VALUE', disabled: true, hidden: true };
@ -44,6 +45,7 @@ function SelectOption<ParamName extends string, ValidParamValues extends string
paramName,
value,
setValue,
'data-test-subj': dataTestSubj,
}: SelectOptionProps<ParamName, ValidParamValues>) {
const availableOptions = useMemo(() => [emptyValue, ...options], [options]);
@ -63,6 +65,7 @@ function SelectOption<ParamName extends string, ValidParamValues extends string
value={value === undefined ? emptyValue.value : value}
onChange={ev => setValue(paramName, ev.target.value as ValidParamValues)}
fullWidth={true}
data-test-subj={dataTestSubj}
/>
</EuiFormRow>
);

1
src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap generated
View file

@ -19,6 +19,7 @@ exports[`CategoryAxisPanel component should init with the default set of props 1
size="s"
/>
<SelectOption
data-test-subj="categoryAxisPosition"
label="Position"
options={
Array [

1
src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap generated
View file

@ -85,6 +85,7 @@ exports[`ValueAxisOptions component should init with the default set of props 1`
margin="m"
/>
<SwitchOption
data-test-subj="valueAxisShow-ValueAxis-1"
label="Show axis lines and labels"
paramName="show"
setValue={[Function]}

1
src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/category_axis_panel.tsx
View file

@ -76,6 +76,7 @@ function CategoryAxisPanel(props: CategoryAxisPanelProps) {
paramName="position"
value={axis.position}
setValue={setPosition}
data-test-subj="categoryAxisPosition"
/>
<SwitchOption

1
src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axis_options.tsx
View file

@ -156,6 +156,7 @@ function ValueAxisOptions(props: ValueAxisOptionsParams) {
label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.valueAxes.showLabel', {
defaultMessage: 'Show axis lines and labels',
})}
data-test-subj={`valueAxisShow-${axis.id}`}
paramName="show"
value={axis.show}
setValue={setValueAxis}

37
src/legacy/ui/public/vislib/lib/axis/axis_labels.js
View file

@ -92,32 +92,43 @@ export class AxisLabels {
filterAxisLabels() {
const self = this;
const config = this.axisConfig;
let startPos = 0;
const padding = 1.1;
let lastTickStartEdge = Number.POSITIVE_INFINITY;
let lastTickEndEdge = Number.NEGATIVE_INFINITY;
return function(selection) {
if (!config.get('labels.filter')) return;
const el = $(config.get('rootEl')).find(config.get('elSelector'));
const maxSize = config.isHorizontal() ? el.width() : el.height();
const upperBound = config.isHorizontal() ? el.width() : el.height();
const lowerBound = 0;
const scaleRange = self.axisScale.scale.range();
const scaleWidth = Math.abs(scaleRange[scaleRange.length - 1] - scaleRange[0]);
const scaleStartPad = 0.5 * (maxSize - scaleWidth);
const scaleStartPad = 0.5 * (upperBound - scaleWidth);
selection.selectAll('.tick text').text(function(d) {
const par = d3.select(this.parentNode).node();
const myPos =
const parentNode = d3.select(this.parentNode).node();
const currentTickCenter =
scaleStartPad +
(config.isHorizontal() ? self.axisScale.scale(d) : maxSize - self.axisScale.scale(d));
const mySize =
(config.isHorizontal() ? par.getBBox().width : par.getBBox().height) * padding;
const halfSize = mySize / 2;
(config.isHorizontal() ? self.axisScale.scale(d) : upperBound - self.axisScale.scale(d));
const currentTickSize =
(config.isHorizontal() ? parentNode.getBBox().width : parentNode.getBBox().height) *
padding;
const currentTickHalfSize = currentTickSize / 2;
const currentTickStartEdge = currentTickCenter - currentTickHalfSize;
const currentTickEndEdge = currentTickCenter + currentTickHalfSize;
if (startPos + halfSize < myPos && maxSize > myPos + halfSize) {
startPos = myPos + halfSize;
return this.textContent;
} else {
const outsideUpperBound = currentTickEndEdge > upperBound;
const outsideLowerBound = currentTickStartEdge < lowerBound;
const overlapsLastTick =
currentTickEndEdge >= lastTickStartEdge && currentTickStartEdge <= lastTickEndEdge;
if (outsideUpperBound || outsideLowerBound || overlapsLastTick) {
d3.select(this.parentNode).remove();
} else {
lastTickStartEdge = currentTickCenter - currentTickHalfSize;
lastTickEndEdge = currentTickCenter + currentTickHalfSize;
return this.textContent;
}
});
};

1
test/functional/apps/visualize/_area_chart.js
View file

@ -295,7 +295,6 @@ export default function({ getService, getPageObjects }) {
await PageObjects.visEditor.clickMetricsAndAxes();
await PageObjects.visEditor.clickYAxisOptions(axisId);
await PageObjects.visEditor.selectYAxisScaleType(axisId, 'log');
await PageObjects.visEditor.clickYAxisAdvancedOptions(axisId);
await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
await PageObjects.visEditor.clickGo();
const labels = await PageObjects.visChart.getYAxisLabels();

1
test/functional/apps/visualize/_line_chart.js
View file

@ -189,7 +189,6 @@ export default function({ getService, getPageObjects }) {
await PageObjects.visEditor.clickMetricsAndAxes();
await PageObjects.visEditor.clickYAxisOptions(axisId);
await PageObjects.visEditor.selectYAxisScaleType(axisId, 'log');
await PageObjects.visEditor.clickYAxisAdvancedOptions(axisId);
await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
await PageObjects.visEditor.clickGo();
const labels = await PageObjects.visChart.getYAxisLabels();

984
test/functional/apps/visualize/_vertical_bar_chart.js
View file

File diff suppressed because it is too large Load diff

1
test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js
View file

@ -136,7 +136,6 @@ export default function({ getService, getPageObjects }) {
await PageObjects.visEditor.clickMetricsAndAxes();
await PageObjects.visEditor.clickYAxisOptions(axisId);
await PageObjects.visEditor.selectYAxisScaleType(axisId, 'log');
await PageObjects.visEditor.clickYAxisAdvancedOptions(axisId);
await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
await PageObjects.visEditor.clickGo();
const labels = await PageObjects.visChart.getYAxisLabels();

27
test/functional/page_objects/visualize_editor_page.ts
View file

@ -358,13 +358,22 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
await testSubjects.click(`toggleYAxisOptions-${axisId}`);
}
public async clickYAxisAdvancedOptions(axisId: string) {
await testSubjects.click(`toggleYAxisAdvancedOptions-${axisId}`);
public async changeYAxisShowCheckbox(axisId: string, enabled: boolean) {
const selector = `valueAxisShow-${axisId}`;
const button = await testSubjects.find(selector);
const isEnabled = (await button.getAttribute('aria-checked')) === 'true';
if (enabled !== isEnabled) {
await button.click();
}
}
public async changeYAxisFilterLabelsCheckbox(axisId: string, enabled: boolean) {
const selector = `yAxisFilterLabelsCheckbox-${axisId}`;
await testSubjects.setCheckbox(selector, enabled ? 'check' : 'uncheck');
const button = await testSubjects.find(selector);
const isEnabled = (await button.getAttribute('aria-checked')) === 'true';
if (enabled !== isEnabled) {
await button.click();
}
}
public async setSize(newValue: string, aggId: string) {
@ -380,11 +389,19 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
}
public async selectYAxisScaleType(axisId: string, scaleType: string) {
const selectElement = await testSubjects.find(`scaleSelectYAxis-${axisId}`);
const selector = await selectElement.findByCssSelector(`option[value="${scaleType}"]`);
const selector = await find.byCssSelector(
`#scaleSelectYAxis-${axisId} > option[value="${scaleType}"]`
);
await selector.click();
}
public async selectXAxisPosition(position: string) {
const option = await (await testSubjects.find('categoryAxisPosition')).findByCssSelector(
`option[value="${position}"]`
);
await option.click();
}
public async selectYAxisMode(mode: string) {
const selector = await find.byCssSelector(`#valueAxisMode0 > option[value="${mode}"]`);
await selector.click();