[7.6] Fix missing labels on certain axes and label filter configurations (#47563)

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/select.tsx

@@ -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>
   );

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

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

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

@@ -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}

src/legacy/ui/public/vislib/lib/axis/axis_labels.js

@@ -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;
-
-        if (startPos + halfSize < myPos && maxSize > myPos + halfSize) {
-          startPos = myPos + halfSize;
-          return this.textContent;
-        } else {
+          (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;
+
+        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;
         }
       });
     };

test/functional/apps/visualize/_area_chart.js

@@ -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();

test/functional/apps/visualize/_line_chart.js

@@ -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();