[Lens] Various fixes for Heatmap

packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.tsx

@@ -23,7 +23,7 @@ type ButtonRenderStyle = 'standard' | 'iconButton';
 interface ToolbarButtonCommonProps
   extends Pick<
     EuiButtonPropsForButton,
-    'onClick' | 'iconType' | 'size' | 'data-test-subj' | 'isDisabled'
+    'onClick' | 'iconType' | 'size' | 'data-test-subj' | 'isDisabled' | 'aria-label'
   > {
   /**
    * Render style of the toolbar button
@@ -162,7 +162,7 @@ const ToolbarIconButton = ({
     <EuiButtonIcon
       {...rest}
       disabled={isDisabled}
-      aria-label={label}
+      aria-label={label ?? rest['aria-label']}
       size={size}
       iconSize={size}
       css={cssProps}

src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx

@@ -379,6 +379,63 @@ describe('HeatmapComponent', function () {
     });
   });
 
+  it('should keep the minimum open end', () => {
+    const newData: Datatable = {
+      type: 'datatable',
+      rows: [{ 'col-0-1': -3 }],
+      columns: [{ id: 'col-0-1', name: 'Count', meta: { type: 'number' } }],
+    };
+    const newProps = {
+      ...wrapperProps,
+      data: newData,
+      args: {
+        ...wrapperProps.args,
+        palette: {
+          params: {
+            colors: ['#6092c0', '#a8bfda', '#ebeff5', '#ecb385', '#e7664c'],
+            stops: [1, 2, 3, 4, 5],
+            range: 'number',
+            gradient: true,
+            continuity: 'above',
+            rangeMin: -Infinity,
+            rangeMax: null,
+          },
+        },
+      },
+    } as unknown as HeatmapRenderProps;
+    const component = mountWithIntl(<HeatmapComponent {...newProps} />);
+    expect(component.find(Heatmap).prop('colorScale')).toEqual({
+      bands: [
+        {
+          start: -Infinity,
+          end: 1,
+          color: '#6092c0',
+        },
+        {
+          start: 1,
+          end: 2,
+          color: '#a8bfda',
+        },
+        {
+          start: 2,
+          end: 3,
+          color: '#ebeff5',
+        },
+        {
+          start: 3,
+          end: 4,
+          color: '#ecb385',
+        },
+        {
+          start: 4,
+          end: Infinity,
+          color: '#e7664c',
+        },
+      ],
+      type: 'bands',
+    });
+  });
+
   it('renders the axis titles', () => {
     const component = shallowWithIntl(<HeatmapComponent {...wrapperProps} />);
     expect(component.find(Heatmap).prop('xAxisTitle')).toEqual('Dest');

src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx

@@ -97,11 +97,7 @@ function shiftAndNormalizeStops(
       if (params.range === 'percent') {
         result = min + ((max - min) * value) / 100;
       }
-      // a division by zero safeguard
-      if (!Number.isFinite(result)) {
-        return 1;
-      }
-      return Number(result.toFixed(2));
+      return result;
     }
   );
 }
@@ -515,11 +511,9 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
       let overwriteArrayIdx;
 
       if (endValue === Number.POSITIVE_INFINITY) {
-        overwriteArrayIdx = `≥ ${metricFormatter.convert(startValue)}`;
+        overwriteArrayIdx = `≥ ${valueFormatter(startValue)}`;
       } else {
-        overwriteArrayIdx = `${metricFormatter.convert(start)} - ${metricFormatter.convert(
-          endValue
-        )}`;
+        overwriteArrayIdx = `${valueFormatter(start)} - ${valueFormatter(endValue)}`;
       }
 
       const overwriteColor = overwriteColors?.[overwriteArrayIdx];

x-pack/test/functional/apps/lens/group4/chart_data.ts

@@ -52,19 +52,19 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       { name: '__other__', value: 5722.77 },
     ];
 
-    function assertMatchesExpectedData(state: DebugState) {
+    function assertMatchesExpectedData(state: DebugState | undefined) {
       expect(
-        state.bars![0].bars.map((bar) => ({
+        state?.bars![0].bars.map((bar) => ({
           x: bar.x,
           y: Math.floor(bar.y * 100) / 100,
         }))
       ).to.eql(expectedData);
     }
 
-    function assertMatchesExpectedPieData(state: DebugState) {
+    function assertMatchesExpectedPieData(state: DebugState | undefined) {
       expect(
         state
-          .partition![0].partitions.map((partition) => ({
+          ?.partition![0].partitions.map((partition) => ({
             name: partition.name,
             value: Math.floor(partition.value * 100) / 100,
           }))
@@ -74,56 +74,52 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
     it('should render xy chart', async () => {
       const data = await PageObjects.lens.getCurrentChartDebugState('xyVisChart');
-      assertMatchesExpectedData(data!);
+      assertMatchesExpectedData(data);
     });
 
     it('should render pie chart', async () => {
       await PageObjects.lens.switchToVisualization('pie');
       const data = await PageObjects.lens.getCurrentChartDebugState('partitionVisChart');
-      assertMatchesExpectedPieData(data!);
+      assertMatchesExpectedPieData(data);
     });
 
     it('should render donut chart', async () => {
       await PageObjects.lens.switchToVisualization('donut');
       const data = await PageObjects.lens.getCurrentChartDebugState('partitionVisChart');
-      assertMatchesExpectedPieData(data!);
+      assertMatchesExpectedPieData(data);
     });
 
     it('should render treemap chart', async () => {
       await PageObjects.lens.switchToVisualization('treemap', 'treemap');
       const data = await PageObjects.lens.getCurrentChartDebugState('partitionVisChart');
-      assertMatchesExpectedPieData(data!);
+      assertMatchesExpectedPieData(data);
     });
 
     it('should render heatmap chart', async () => {
       await PageObjects.lens.switchToVisualization('heatmap', 'heat');
       const debugState = await PageObjects.lens.getCurrentChartDebugState('heatmapChart');
 
-      if (!debugState) {
-        throw new Error('Debug state is not available');
-      }
-
       // assert axes
-      expect(debugState.axes!.x[0].labels).to.eql([
+      expect(debugState?.axes!.x[0].labels).to.eql([
         '97.220.3.248',
         '169.228.188.120',
         '78.83.247.30',
         '226.82.228.233',
         '93.28.27.24',
         'Other',
       ]);
-      expect(debugState.axes!.y[0].labels).to.eql(['']);
+      expect(debugState?.axes!.y[0].labels).to.eql(['']);
 
       // assert cells
-      expect(debugState.heatmap!.cells.length).to.eql(6);
+      expect(debugState?.heatmap!.cells.length).to.eql(6);
 
       // assert legend
-      expect(debugState.legend!.items).to.eql([
-        { color: '#6092c0', key: '5,722.77 - 8,529.22', name: '5,722.77 - 8,529.22' },
-        { color: '#a8bfda', key: '8,529.22 - 11,335.66', name: '8,529.22 - 11,335.66' },
-        { color: '#ebeff5', key: '11,335.66 - 14,142.11', name: '11,335.66 - 14,142.11' },
-        { color: '#ecb385', key: '14,142.11 - 16,948.55', name: '14,142.11 - 16,948.55' },
-        { color: '#e7664c', key: '≥ 16,948.55', name: '≥ 16,948.55' },
+      expect(debugState?.legend!.items).to.eql([
+        { key: '5,722.775 - 8,529.22', name: '5,722.775 - 8,529.22', color: '#6092c0' },
+        { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#a8bfda' },
+        { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#ebeff5' },
+        { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#ecb385' },
+        { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#e7664c' },
       ]);
     });
 

x-pack/test/functional/apps/lens/group4/tsdb.ts

@@ -224,13 +224,13 @@ function getDataMapping(
   return dataStreamMapping;
 }
 
-function sumFirstNValues(n: number, bars: Array<{ y: number }>): number {
+function sumFirstNValues(n: number, bars: Array<{ y: number }> | undefined): number {
   const indexes = Array(n)
     .fill(1)
     .map((_, i) => i);
   let countSum = 0;
   for (const index of indexes) {
-    if (bars[index]) {
+    if (bars?.[index]) {
       countSum += bars[index].y;
     }
   }
@@ -816,29 +816,29 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
             await PageObjects.lens.waitForVisualization('xyVisChart');
             const data = await PageObjects.lens.getCurrentChartDebugState('xyVisChart');
-            const counterBars = data.bars![0].bars;
-            const countBars = data.bars![1].bars;
+            const counterBars = data?.bars![0].bars;
+            const countBars = data?.bars![1].bars;
 
             log.info('Check counter data before the upgrade');
             // check there's some data before the upgrade
-            expect(counterBars[0].y).to.eql(5000);
+            expect(counterBars?.[0].y).to.eql(5000);
             log.info('Check counter data after the upgrade');
             // check there's some data after the upgrade
-            expect(counterBars[counterBars.length - 1].y).to.eql(5000);
+            expect(counterBars?.[counterBars.length - 1].y).to.eql(5000);
 
             // due to the flaky nature of exact check here, we're going to relax it
             // as long as there's data before and after it is ok
             log.info('Check count before the upgrade');
-            const columnsToCheck = countBars.length / 2;
+            const columnsToCheck = countBars ? countBars.length / 2 : 0;
             // Before the upgrade the count is N times the indexes
             expect(sumFirstNValues(columnsToCheck, countBars)).to.be.greaterThan(
               indexes.length * TEST_DOC_COUNT - 1
             );
             log.info('Check count after the upgrade');
             // later there are only documents for the upgraded stream
-            expect(sumFirstNValues(columnsToCheck, [...countBars].reverse())).to.be.greaterThan(
-              TEST_DOC_COUNT - 1
-            );
+            expect(
+              sumFirstNValues(columnsToCheck, [...(countBars ?? [])].reverse())
+            ).to.be.greaterThan(TEST_DOC_COUNT - 1);
           });
         });
       });
@@ -911,8 +911,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
             await PageObjects.lens.waitForVisualization('xyVisChart');
             const data = await PageObjects.lens.getCurrentChartDebugState('xyVisChart');
-            const bars = data.bars![0].bars;
-            const columnsToCheck = bars.length / 2;
+            const bars = data?.bars![0].bars;
+            const columnsToCheck = bars ? bars.length / 2 : 0;
             // due to the flaky nature of exact check here, we're going to relax it
             // as long as there's data before and after it is ok
             log.info('Check count before the downgrade');
@@ -922,7 +922,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
             );
             log.info('Check count after the downgrade');
             // later there are only documents for the upgraded stream
-            expect(sumFirstNValues(columnsToCheck, [...bars].reverse())).to.be.greaterThan(
+            expect(sumFirstNValues(columnsToCheck, [...(bars ?? [])].reverse())).to.be.greaterThan(
               TEST_DOC_COUNT - 1
             );
           });
@@ -952,8 +952,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
             await PageObjects.lens.waitForVisualization('xyVisChart');
             const dataBefore = await PageObjects.lens.getCurrentChartDebugState('xyVisChart');
-            const barsBefore = dataBefore.bars![0].bars;
-            expect(barsBefore.some(({ y }) => y)).to.eql(true);
+            const barsBefore = dataBefore?.bars![0].bars;
+            expect(barsBefore?.some(({ y }) => y)).to.eql(true);
 
             // check after the downgrade
             await PageObjects.lens.goToTimeRange(
@@ -969,8 +969,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
             await PageObjects.lens.waitForVisualization('xyVisChart');
             const dataAfter = await PageObjects.lens.getCurrentChartDebugState('xyVisChart');
-            const barsAfter = dataAfter.bars![0].bars;
-            expect(barsAfter.some(({ y }) => y)).to.eql(true);
+            const barsAfter = dataAfter?.bars![0].bars;
+            expect(barsAfter?.some(({ y }) => y)).to.eql(true);
           });
         });
       });