elastic · alexwizp · Jan 25, 2022 · Nov 19, 2021 · Nov 24, 2021 · Nov 24, 2021
@@ -156,7 +156,7 @@ describe('HeatmapComponent', function () {
       expect(component.find(Heatmap).prop('colorScale')).toEqual({
         bands: [
           { color: 'rgb(0, 0, 0)', end: 0, start: 0 },
-          { color: 'rgb(112, 38, 231)', end: 150, start: 0 },
+          { color: 'rgb(112, 38, 231)', end: 150.00000001, start: 0 },
         ],
         type: 'bands',
       });

@@ -268,7 +268,8 @@ const HeatmapComponent: FC<HeatmapRenderProps> = ({
 
   // adds a very small number to the max value to make sure the max value will be included
   const endValue =
-    paletteParams && paletteParams.range === 'number' ? paletteParams.rangeMax : max + 0.00000001;
+    (paletteParams && paletteParams.range === 'number' ? paletteParams.rangeMax : max) + 0.00000001;
+
   const overwriteColors = uiState?.get('vis.colors') ?? null;
 
   const bands = ranges.map((start, index, array) => {

@@ -29,7 +29,7 @@ function findColorsByStops(
   colors: string[],
   stops: number[]
 ) {
-  const index = stops.findIndex((s) => comparison(value, s) < 0);
+  const index = stops.findIndex((s) => comparison(value, s) <= 0);
   return colors[index] || colors[0];
 }
 
@@ -77,13 +77,13 @@ export function workoutColorForValue(
   const minRange = stops.length ? rangeMin : dataRangeArguments[0];
 
   // in case of shorter rangers, extends the steps on the sides to cover the whole set
-  if (comparisonFn(normalizedValue, maxRange) > 0) {
+  if (comparisonFn(normalizedValue, isFinite(maxRange) ? maxRange : stops[stops.length - 1]) > 0) {
     if (continuity === 'above' || continuity === 'all') {
       return colors[colors.length - 1];
     }
     return;
   }
-  if (comparisonFn(normalizedValue, minRange) < 0) {
+  if (comparisonFn(normalizedValue, isFinite(minRange) ? minRange : stops[0]) < 0) {
     if (continuity === 'below' || continuity === 'all') {
       return colors[0];
     }

@@ -51,6 +51,7 @@ export interface CustomPaletteParams {
   reverse?: boolean;
   rangeType?: 'number' | 'percent';
   continuity?: 'above' | 'below' | 'all' | 'none';
+  autoValue?: 'max' | 'min' | 'all' | 'none';
   progression?: 'fixed';
   rangeMin?: number;
   rangeMax?: number;

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiIconProps } from '@elastic/eui';
+
+export const DistributeEquallyIcon = (props: Omit<EuiIconProps, 'type'>) => (
+  <svg
+    width="15"
+    height="12"
+    viewBox="0 0 15 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M4 .5a.5.5 0 0 1 1 0v11a.5.5 0 0 1-1 0V.5ZM0 3a1 1 0 0 1 1-1h2v8H1a1 1 0 0 1-1-1V3ZM10.5 0a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 1 0V.5a.5.5 0 0 0-.5-.5ZM6 2h3v8H6V2ZM14 2h-2v8h2a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Z" />
+  </svg>
+);
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiIconProps } from '@elastic/eui';
+
+export const RelatedIcon = (props: Omit<EuiIconProps, 'type'>) => (
+  <svg width="24" height="24" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M6 .5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5V8h4V6.5a.5.5 0 0 1 .82-.384l3 2.5a.5.5 0 0 1 0 .768l-3 2.5A.5.5 0 0 1 12 11.5V10H6.5a.5.5 0 0 1-.5-.5v-9Z" />
+  </svg>
+);
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiIconProps } from '@elastic/eui';
+
+export const ValueMaxIcon = (props: Omit<EuiIconProps, 'type'>) => (
+  <svg width="16" height="14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8 0a.5.5 0 0 1 .384.18l2.5 3A.5.5 0 0 1 10.5 4h-5a.5.5 0 0 1-.384-.82l2.5-3A.5.5 0 0 1 8 0ZM.916 5.223A.5.5 0 0 0 0 5.5v5a.5.5 0 0 0 1 0V7.151l1.084 1.626a.5.5 0 0 0 .832 0L4 7.151V10.5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.916-.277L2.5 7.599.916 5.223Z" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.5 5h-.545l-.098.006a3.572 3.572 0 0 0-1.33.36 2.693 2.693 0 0 0-1.052.911C6.18 6.72 6 7.287 6 8v2.5a.5.5 0 0 0 1 0V9h2v1.5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Zm-.5.5V5v.5ZM7 8h2V6h-.011a2.57 2.57 0 0 0-.297.032c-.202.034-.463.1-.718.228a1.695 1.695 0 0 0-.667.572C7.133 7.092 7 7.462 7 8Z"
+    />
+    <path d="M11.188 5.11a.5.5 0 0 1 .702.078L13.5 7.2l1.61-2.012a.5.5 0 1 1 .78.624L14.14 8l1.75 2.188a.5.5 0 1 1-.78.624L13.5 8.8l-1.61 2.012a.5.5 0 0 1-.78-.624L12.86 8l-1.75-2.188a.5.5 0 0 1 .078-.702Z" />
+  </svg>
+);
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiIconProps } from '@elastic/eui';
+
+export const ValueMinIcon = (props: Omit<EuiIconProps, 'type'>) => (
+  <svg width="16" height="14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M10.367.018a.5.5 0 0 1 .562.225L13 3.695V.5a.5.5 0 0 1 1 0v5a.5.5 0 0 1-.929.257L11 2.305V5.5a.5.5 0 0 1-1 0v-5a.5.5 0 0 1 .367-.482ZM.916.223A.5.5 0 0 0 0 .5v5a.5.5 0 0 0 1 0V2.151l1.084 1.626a.5.5 0 0 0 .832 0L4 2.151V5.5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.916-.277L2.5 2.599.916.223ZM7 11a.5.5 0 0 0 .384-.18l2.5-3A.5.5 0 0 0 9.5 7h-5a.5.5 0 0 0-.384.82l2.5 3A.5.5 0 0 0 7 11ZM6.5 0a.5.5 0 0 0 0 1H7v4h-.5a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1H8V1h.5a.5.5 0 0 0 0-1h-2Z" />
+  </svg>
+);
@@ -22,7 +22,7 @@ import type {
 import { LensIconChartDatatable } from '../assets/chart_datatable';
 import { TableDimensionEditor } from './components/dimension_editor';
 import { CUSTOM_PALETTE } from '../shared_components/coloring/constants';
-import { getStopsForFixedMode } from '../shared_components';
+import { getStopsForFixedMode, getColorPaletteParams } from '../shared_components';
 import { LayerType, layerTypes } from '../../common';
 import { getDefaultSummaryLabel, PagingState } from '../../common/expressions';
 import type { ColumnState, SortingState } from '../../common/expressions';
@@ -385,7 +385,11 @@ export const getDatatableVisualization = ({
                       ],
                       alignment: typeof column.alignment === 'undefined' ? [] : [column.alignment],
                       colorMode: [column.colorMode ?? 'none'],
-                      palette: [paletteService.get(CUSTOM_PALETTE).toExpression(paletteParams)],
+                      palette: [
+                        paletteService
+                          .get(CUSTOM_PALETTE)
+                          .toExpression(getColorPaletteParams(paletteParams)),
+                      ],
                       summaryRow: hasNoSummaryRow ? [] : [column.summaryRow!],
                       summaryLabel: hasNoSummaryRow
                         ? []

@@ -97,7 +97,6 @@ export function HeatmapDimensionEditor(
               palettes={props.paletteService}
               activePalette={activePalette}
               dataBounds={currentMinMax}
-              showContinuity={false}
               setPalette={(newPalette) => {
                 // make sure to always have a list of stops
                 if (newPalette.params && !newPalette.params.stops) {

@@ -407,6 +407,7 @@ describe('heatmap', () => {
                   ],
                 },
               ],
+              lastRangeIsRightOpen: [true],
               legend: [
                 {
                   type: 'expression',

@@ -318,6 +318,11 @@ export const getHeatmapVisualization = ({
             xAccessor: [state.xAccessor ?? ''],
             yAccessor: [state.yAccessor ?? ''],
             valueAccessor: [state.valueAccessor ?? ''],
+            lastRangeIsRightOpen: [
+              state.palette?.params?.autoValue
+                ? ['max', 'all'].includes(state.palette?.params?.autoValue || '')
+                : true,
+            ],
             palette: state.palette?.params
               ? [
                   paletteService

@@ -418,7 +418,7 @@ describe('metric_expression', () => {
       );
     });
 
-    test('it renders no color styling for numeric value if value is higher than rangeMax and continuity is "none"', () => {
+    test('it renders no color styling for numeric value if value is higher than rangeMax', () => {
       const { data, args } = sampleArgs();
 
       data.tables.l1.rows[0].c = 500;
@@ -430,7 +430,6 @@ describe('metric_expression', () => {
         gradient: false,
         range: 'number',
         colors: ['red', 'yellow', 'green'],
-        continuity: 'none',
       };
 
       const instance = shallow(
@@ -451,7 +450,7 @@ describe('metric_expression', () => {
       );
     });
 
-    test('it renders no color styling for numeric value if value is lower than rangeMin and continuity is "none"', () => {
+    test('it renders no color styling for numeric value if value is lower than rangeMin', () => {
       const { data, args } = sampleArgs();
 
       data.tables.l1.rows[0].c = -1;
@@ -463,7 +462,6 @@ describe('metric_expression', () => {
         gradient: false,
         range: 'number',
         colors: ['red', 'yellow', 'green'],
-        continuity: 'none',
       };
 
       const instance = shallow(
@@ -484,19 +482,18 @@ describe('metric_expression', () => {
       );
     });
 
-    test('it renders the color styling for numeric value if value is higher than rangeMax and continuity is "all"', () => {
+    test('it renders the correct color styling for numeric value if user select auto detect max value', () => {
       const { data, args } = sampleArgs();
 
       data.tables.l1.rows[0].c = 500;
       args.colorMode = ColorMode.Labels;
       args.palette.params = {
-        rangeMin: 0,
-        rangeMax: 400,
+        rangeMin: 20,
+        rangeMax: Infinity,
         stops: [100, 200, 400],
         gradient: false,
         range: 'number',
         colors: ['red', 'yellow', 'green'],
-        continuity: 'all',
       };
 
       const instance = shallow(
@@ -515,19 +512,18 @@ describe('metric_expression', () => {
       );
     });
 
-    test('it renders the color styling for numeric value if value is lower than rangeMin and continuity is "all"', () => {
+    test('it renders the correct color styling for numeric value if user select auto detect min value', () => {
       const { data, args } = sampleArgs();
 
       data.tables.l1.rows[0].c = -1;
       args.colorMode = ColorMode.Labels;
       args.palette.params = {
-        rangeMin: 0,
+        rangeMin: -Infinity,
         rangeMax: 400,
-        stops: [100, 200, 400],
+        stops: [-Infinity, 200, 400],
         gradient: false,
         range: 'number',
         colors: ['red', 'yellow', 'green'],
-        continuity: 'all',
       };
 
       const instance = shallow(

@@ -69,29 +69,28 @@ function getColorStyling(
     return {};
   }
 
-  const { continuity = 'above', rangeMin, stops, colors } = palette.params;
-  const penultimateStop = stops[stops.length - 2];
+  const { rangeMin, rangeMax, stops, colors } = palette.params;
 
-  if (continuity === 'none' && (value < rangeMin || value > penultimateStop)) {
+  if (value > rangeMax) {
     return {};
   }
-  if (continuity === 'below' && value > penultimateStop) {
-    return {};
-  }
-  if (continuity === 'above' && value < rangeMin) {
+  if (value < rangeMin) {
     return {};
   }
   const cssProp = colorMode === ColorMode.Background ? 'backgroundColor' : 'color';
-  const rawIndex = stops.findIndex((v) => v > value);
+  let rawIndex = stops.findIndex((v) => v > value);
 
-  let colorIndex = rawIndex;
-  if (['all', 'below'].includes(continuity) && value < rangeMin && colorIndex < 0) {
-    colorIndex = 0;
+  if (!isFinite(rangeMax) && value > stops[stops.length - 1]) {
+    rawIndex = stops.length - 1;
   }
-  if (['all', 'above'].includes(continuity) && value > penultimateStop && colorIndex < 0) {
-    colorIndex = stops.length - 1;
+
+  // in this case first stop is -Infinity
+  if (!isFinite(rangeMin) && value < stops[1]) {
+    rawIndex = 0;
   }
 
+  const colorIndex = rawIndex;
+
   const color = colors[colorIndex];
   const styling = {
     [cssProp]: color,