fix(xy): improve highlighted style for line/area/bubble/bars

packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts

@@ -6,23 +6,28 @@
  * Side Public License, v 1.
  */
 
+import chroma from 'chroma-js';
+
 import type { ReactiveChartStateProps } from './connected_component';
 import { renderHeatmapDebugElements } from './debug';
-import { getColorBandStyle, getGeometryStateStyle } from './utils';
+import { getCellStyle } from './utils';
+import { colorToRgba, RGBATupleToString } from '../../../../common/color_library_wrappers';
 import { clearCanvas, renderLayers, withContext } from '../../../../renderers/canvas';
 import { renderMultiLine } from '../../../../renderers/canvas/primitives/line';
 import { renderRect } from '../../../../renderers/canvas/primitives/rect';
 import type { TextFont } from '../../../../renderers/canvas/primitives/text';
 import { renderText, wrapLines } from '../../../../renderers/canvas/primitives/text';
 import { radToDeg } from '../../../../utils/common';
 import { horizontalPad } from '../../../../utils/dimensions';
+import { getCellHighlightState } from '../../state/highlight_state';
 
+const HIGHLIGHTED_BORDER_SIZE = 2;
 /** @internal */
 export function renderHeatmapCanvas2d(ctx: CanvasRenderingContext2D, dpr: number, props: ReactiveChartStateProps) {
   const { theme } = props.geometries;
   const { heatmapViewModels } = props.geometries;
   const {
-    theme: { sharedStyle: sharedGeometryStyle, chartPaddings: paddings, chartMargins: margins },
+    theme: { chartPaddings: paddings, chartMargins: margins },
     background,
     elementSizes,
     highlightedLegendBands,
@@ -72,10 +77,43 @@ export function renderHeatmapCanvas2d(ctx: CanvasRenderingContext2D, dpr: number
           withContext(ctx, () => {
             ctx.translate(x, y);
             cells.forEach((cell) => {
-              if (cell.visible) {
-                const geometryStateStyle = getGeometryStateStyle(cell, sharedGeometryStyle, highlightedLegendBands);
-                const style = getColorBandStyle(cell, geometryStateStyle);
-                renderRect(ctx, cell, style.fill, style.stroke);
+              if (cell.visible && getCellHighlightState(cell, highlightedLegendBands) !== 'highlighted') {
+                const highlightState = getCellHighlightState(cell, highlightedLegendBands);
+                const style = getCellStyle(cell, highlightState, theme.cell);
+                renderRect(ctx, cell, style.fill, style.stroke, true);
+              }
+            });
+          });
+        }),
+
+      () =>
+        // render highlighted cells border first
+        heatmapViewModels.forEach(({ gridOrigin: { x, y }, cells }) => {
+          withContext(ctx, () => {
+            ctx.translate(x, y);
+            cells.forEach((cell) => {
+              if (cell.visible && getCellHighlightState(cell, highlightedLegendBands) === 'highlighted') {
+                const style = getCellStyle(cell, 'highlighted', theme.cell);
+
+                renderRect(
+                  ctx,
+                  {
+                    ...cell,
+                    x: cell.x - HIGHLIGHTED_BORDER_SIZE,
+                    y: cell.y - HIGHLIGHTED_BORDER_SIZE,
+                    width: cell.width + HIGHLIGHTED_BORDER_SIZE * 2,
+                    height: cell.height + HIGHLIGHTED_BORDER_SIZE * 2,
+                  },
+                  {
+                    ...style.fill,
+                    // darkening the border color a bit
+                    color: colorToRgba(chroma(RGBATupleToString(style.fill.color)).darken(2).hex()),
+                  },
+                  style.stroke,
+                  true,
+                  1, // render a rounded rectangle with a 1px radius
+                );
+                renderRect(ctx, cell, style.fill, style.stroke, true);
               }
             });
           });

packages/charts/src/chart_types/heatmap/renderer/canvas/utils.ts

@@ -6,41 +6,38 @@
  * Side Public License, v 1.
  */
 
-import { overrideOpacity } from '../../../../common/color_library_wrappers';
+import { colorToRgba, RGBATupleToString } from '../../../../common/color_library_wrappers';
 import type { Fill, Stroke } from '../../../../geoms/types';
-import type { GenericDomain } from '../../../../utils/domain';
-import type { GeometryStateStyle, SharedGeometryStateStyle } from '../../../../utils/themes/theme';
+import { getColorFromVariant } from '../../../../utils/common';
+import type { GeometryHighlightState } from '../../../../utils/geometry';
+import type { Theme } from '../../../../utils/themes/theme';
 import type { Cell } from '../../layout/types/viewmodel_types';
-import { isValueInRanges } from '../../layout/viewmodel/viewmodel';
 
 /** @internal */
-export function getGeometryStateStyle(
+export function getCellStyle(
   cell: Cell,
-  sharedGeometryStyle: SharedGeometryStateStyle,
-  highlightedLegendBands: Array<GenericDomain>,
-): GeometryStateStyle {
-  const { default: defaultStyles, highlighted, unhighlighted } = sharedGeometryStyle;
-
-  if (highlightedLegendBands.length > 0) {
-    const isHighlightedBand = isValueInRanges(cell.value, highlightedLegendBands);
-    return isHighlightedBand ? highlighted : unhighlighted;
+  highlightState: GeometryHighlightState,
+  cellStyle: Theme['heatmap']['cell'],
+): { fill: Fill; stroke: Stroke } {
+  const cellColorAsString = RGBATupleToString(cell.fill.color);
+  const cellStrokeAsString = RGBATupleToString(cell.stroke.color);
+  switch (highlightState) {
+    case 'default':
+    case 'highlighted':
+      return {
+        fill: cell.fill,
+        stroke: cell.stroke,
+      };
+    case 'dimmed':
+      return {
+        fill: {
+          ...cell.fill,
+          color: colorToRgba(getColorFromVariant(cellColorAsString, cellStyle.dimmed.fill)),
+        },
+        stroke: {
+          ...cell.stroke,
+          color: colorToRgba(getColorFromVariant(cellStrokeAsString, cellStyle.dimmed.stroke)),
+        },
+      };
   }
-
-  return defaultStyles;
-}
-
-/** @internal */
-export function getColorBandStyle(cell: Cell, geometryStateStyle: GeometryStateStyle): { fill: Fill; stroke: Stroke } {
-  const fillColor = overrideOpacity(cell.fill.color, (opacity) => opacity * geometryStateStyle.opacity);
-  const fill: Fill = {
-    ...cell.fill,
-    color: fillColor,
-  };
-
-  const strokeColor = overrideOpacity(cell.stroke.color, (opacity) => opacity * geometryStateStyle.opacity);
-  const stroke: Stroke = {
-    ...cell.stroke,
-    color: strokeColor,
-  };
-  return { fill, stroke };
 }

packages/charts/src/chart_types/heatmap/state/highlight_state.ts

@@ -0,0 +1,31 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { GenericDomain } from '../../../utils/domain';
+import type { GeometryHighlightState } from '../../../utils/geometry';
+import type { Cell } from '../layout/types/viewmodel_types';
+import { isValueInRanges } from '../layout/viewmodel/viewmodel';
+
+/**
+ * Determines the highlight state of a heatmap cell based on the currently highlighted legend bands.
+ *
+ * @param cell - The heatmap cell to evaluate.
+ * @param highlightedLegendBands - An array of value ranges representing the currently highlighted legend bands.
+ * @returns The geometry highlight state: 'highlighted' if the cell's value is within any highlighted band,
+ *          'dimmed' if not, or 'default' if no bands are highlighted.
+ * @internal
+ */
+export function getCellHighlightState(
+  cell: Cell,
+  highlightedLegendBands: Array<GenericDomain>,
+): GeometryHighlightState {
+  if (highlightedLegendBands.length > 0) {
+    return isValueInRanges(cell.value, highlightedLegendBands) ? 'highlighted' : 'dimmed';
+  }
+  return 'default';
+}

packages/charts/src/chart_types/heatmap/state/selectors/compute_chart_dimensions.ts

@@ -14,6 +14,7 @@ import type { ChartDimensions } from '../../../../utils/dimensions';
 
 const getParentDimension = (state: GlobalChartState) => state.parentDimensions;
 
+const CANVAS_MARGIN = 2;
 /**
  * Returns chart dimensions  axes sizes and positions.
  * @internal
@@ -44,10 +45,10 @@ export const computeChartDimensionsSelector = createCustomCachedSelector(
     const paddedHeight = chartHeight - chartPaddings.top - chartPaddings.bottom;
 
     // Calculate dimensions after applying margins
-    const top = paddedTop + chartMargins.top;
-    const left = paddedLeft + chartMargins.left;
-    const width = Math.max(0, paddedWidth - chartMargins.left - chartMargins.right);
-    const height = Math.max(0, paddedHeight - chartMargins.bottom - chartMargins.top);
+    const top = paddedTop + chartMargins.top + CANVAS_MARGIN;
+    const left = paddedLeft + chartMargins.left + CANVAS_MARGIN;
+    const width = Math.max(0, paddedWidth - chartMargins.left - chartMargins.right) - CANVAS_MARGIN * 2;
+    const height = Math.max(0, paddedHeight - chartMargins.bottom - chartMargins.top) - CANVAS_MARGIN * 2;
 
     return {
       leftMargin: NaN, // not used

packages/charts/src/chart_types/xy_chart/renderer/canvas/areas.ts

@@ -12,17 +12,18 @@ import { renderLinePaths, renderAreaPath } from './primitives/path';
 import { buildAreaStyles } from './styles/area';
 import { buildLineStyles } from './styles/line';
 import { withPanelTransform } from './utils/panel_transform';
-import { colorToRgba, overrideOpacity } from '../../../../common/color_library_wrappers';
 import type { LegendItem } from '../../../../common/legend';
-import type { Fill, Rect, Stroke } from '../../../../geoms/types';
+import type { Rect } from '../../../../geoms/types';
 import { withContext } from '../../../../renderers/canvas';
 import type { Rotation } from '../../../../utils/common';
-import { ColorVariant } from '../../../../utils/common';
 import type { Dimensions } from '../../../../utils/dimensions';
-import type { AreaGeometry, PerPanel } from '../../../../utils/geometry';
-import type { SharedGeometryStateStyle } from '../../../../utils/themes/theme';
-import { getGeometryStateStyle } from '../../rendering/utils';
-import { getTextureStyles } from '../../utils/texture';
+import {
+  getGeometryHighlightState,
+  getGeometryHighlightStateStyle,
+  type AreaGeometry,
+  type PerPanel,
+} from '../../../../utils/geometry';
+import type { GeometryStateStyle, SharedGeometryStateStyle } from '../../../../utils/themes/theme';
 
 /** @internal */
 export function renderAreas(
@@ -35,33 +36,45 @@ export function renderAreas(
   highlightedLegendItem?: LegendItem,
 ) {
   withContext(ctx, () => {
+    const areasWithStyle = areas
+      .map(({ panel, value }) => {
+        const highlightState = getGeometryHighlightState(value.seriesIdentifier.key, highlightedLegendItem);
+        return {
+          panel,
+          area: value,
+          highlightState,
+          geometryStyle: getGeometryHighlightStateStyle(sharedStyle, highlightState),
+        };
+      })
+      // sort by dimmed first once are rendered ontop of the non-highlighted ones
+      .sort(({ highlightState }) => (highlightState === 'dimmed' ? -1 : 1));
+
     // first render all the areas and lines
-    areas.forEach(({ panel, value: geom }) => {
+    areasWithStyle.forEach(({ panel, area, geometryStyle }) => {
       const clippings = getPanelClipping(panel, rotation);
-      if (geom.style.area.visible) {
+      if (area.style.area.visible) {
         withPanelTransform(
           ctx,
           panel,
           rotation,
           renderingArea,
-          () => renderArea(ctx, imgCanvas, geom, sharedStyle, clippings, highlightedLegendItem),
+          () => renderArea(ctx, imgCanvas, area, geometryStyle, clippings),
           { area: clippings, shouldClip: true },
         );
       }
-      if (geom.style.line.visible) {
+      if (area.style.line.visible) {
         withPanelTransform(
           ctx,
           panel,
           rotation,
           renderingArea,
-          () => renderAreaLines(ctx, geom, sharedStyle, clippings, highlightedLegendItem),
+          () => renderAreaLines(ctx, area, geometryStyle, clippings),
           { area: clippings, shouldClip: true },
         );
       }
     });
     // now we can render the visible points on top of each the areas/lines
-    areas.forEach(({ panel, value: { style, seriesIdentifier, points, hasFit, minPointDistance } }) => {
-      const geometryStyle = getGeometryStateStyle(seriesIdentifier, sharedStyle, highlightedLegendItem);
+    areasWithStyle.forEach(({ panel, area: { style, points, hasFit, minPointDistance }, geometryStyle }) => {
       withPanelTransform(
         ctx,
         panel,
@@ -89,22 +102,12 @@ function renderArea(
   ctx: CanvasRenderingContext2D,
   imgCanvas: HTMLCanvasElement,
   geometry: AreaGeometry,
-  sharedStyle: SharedGeometryStateStyle,
+  geometryStateStyle: GeometryStateStyle,
   clippings: Rect,
-  highlightedLegendItem?: LegendItem,
 ) {
-  const { area, color, transform, seriesIdentifier, style, clippedRanges, shouldClip } = geometry;
-  const geometryStateStyle = getGeometryStateStyle(seriesIdentifier, sharedStyle, highlightedLegendItem);
+  const { area, color, transform, style, clippedRanges, shouldClip } = geometry;
   const areaFill = buildAreaStyles(ctx, imgCanvas, color, style.area, geometryStateStyle);
-
-  const fitAreaFillColor = style.fit.area.fill === ColorVariant.Series ? color : style.fit.area.fill;
-  const fitAreaFill: Fill = {
-    texture: getTextureStyles(ctx, imgCanvas, fitAreaFillColor, geometryStateStyle.opacity, style.fit.area.texture),
-    color: overrideOpacity(
-      colorToRgba(fitAreaFillColor),
-      (opacity) => opacity * geometryStateStyle.opacity * style.fit.area.opacity,
-    ),
-  };
+  const fitAreaFill = buildAreaStyles(ctx, imgCanvas, color, style.fit.area, geometryStateStyle);
 
   renderAreaPath(
     ctx,
@@ -121,22 +124,17 @@ function renderArea(
 function renderAreaLines(
   ctx: CanvasRenderingContext2D,
   geometry: AreaGeometry,
-  sharedStyle: SharedGeometryStateStyle,
+  geometryStateStyle: GeometryStateStyle,
   clippings: Rect,
-  highlightedLegendItem?: LegendItem,
 ) {
-  const { lines, color, seriesIdentifier, transform, style, clippedRanges, shouldClip } = geometry;
-  const geometryStateStyle = getGeometryStateStyle(seriesIdentifier, sharedStyle, highlightedLegendItem);
-  const lineStyle = buildLineStyles(color, style.line, geometryStateStyle);
+  const { lines, color, transform, style, clippedRanges, shouldClip } = geometry;
 
-  const fitLineStroke: Stroke = {
-    dash: style.fit.line.dash,
-    width: style.line.strokeWidth,
-    color: overrideOpacity(
-      colorToRgba(style.fit.line.stroke === ColorVariant.Series ? color : style.fit.line.stroke),
-      (opacity) => opacity * geometryStateStyle.opacity * style.fit.line.opacity,
-    ),
-  };
+  const lineStyle = buildLineStyles(color, style.line, geometryStateStyle);
+  const fitLineStroke = buildLineStyles(
+    color,
+    { ...style.fit.line, strokeWidth: style.line.strokeWidth },
+    geometryStateStyle,
+  );
 
   renderLinePaths(
     ctx,

packages/charts/src/chart_types/xy_chart/renderer/canvas/bars.ts

@@ -13,9 +13,13 @@ import type { LegendItem } from '../../../../common/legend';
 import { renderRect } from '../../../../renderers/canvas/primitives/rect';
 import type { Rotation } from '../../../../utils/common';
 import type { Dimensions } from '../../../../utils/dimensions';
-import type { BarGeometry, PerPanel } from '../../../../utils/geometry';
+import {
+  getGeometryHighlightState,
+  getGeometryHighlightStateStyle,
+  type BarGeometry,
+  type PerPanel,
+} from '../../../../utils/geometry';
 import type { SharedGeometryStateStyle } from '../../../../utils/themes/theme';
-import { getGeometryStateStyle } from '../../rendering/utils';
 
 /** @internal */
 export function renderBars(
@@ -37,7 +41,8 @@ export function renderBars(
         bars.forEach((barGeometry) => {
           const { x, y, width, height, color, seriesStyle: style, seriesIdentifier } = barGeometry;
           const rect = { x, y, width, height };
-          const geometryStateStyle = getGeometryStateStyle(seriesIdentifier, sharedStyle, highlightedLegendItem);
+          const highlightState = getGeometryHighlightState(seriesIdentifier.key, highlightedLegendItem);
+          const geometryStateStyle = getGeometryHighlightStateStyle(sharedStyle, highlightState);
           const barStyle = buildBarStyle(ctx, imgCanvas, color, style.rect, style.rectBorder, geometryStateStyle, rect);
           renderRect(ctx, rect, barStyle.fill, barStyle.stroke);
         }),

packages/charts/src/chart_types/xy_chart/renderer/canvas/bubbles.ts

@@ -12,9 +12,13 @@ import type { SeriesKey } from '../../../../common/series_id';
 import { withContext } from '../../../../renderers/canvas';
 import type { Rotation } from '../../../../utils/common';
 import type { Dimensions } from '../../../../utils/dimensions';
-import type { BubbleGeometry, PerPanel } from '../../../../utils/geometry';
+import {
+  getGeometryHighlightState,
+  getGeometryHighlightStateStyle,
+  type BubbleGeometry,
+  type PerPanel,
+} from '../../../../utils/geometry';
 import type { SharedGeometryStateStyle, GeometryStateStyle } from '../../../../utils/themes/theme';
-import { getGeometryStateStyle } from '../../rendering/utils';
 
 /** @internal */
 export function renderBubbles(
@@ -28,7 +32,8 @@ export function renderBubbles(
   withContext(ctx, () => {
     const styles: Record<SeriesKey, GeometryStateStyle> = {};
     const allPoints = bubbles.flatMap(({ value: { seriesIdentifier, points } }) => {
-      styles[seriesIdentifier.key] = getGeometryStateStyle(seriesIdentifier, sharedStyle, highlightedLegendItem);
+      const highlightState = getGeometryHighlightState(seriesIdentifier.key, highlightedLegendItem);
+      styles[seriesIdentifier.key] = getGeometryHighlightStateStyle(sharedStyle, highlightState);
       return points;
     });