fix(xy): show mouse cursors on charts with opaque background (#1447)

elastic · Oct 29, 2021 · e0f1543 · e0f1543
1 parent 1d06a1e
commit e0f1543
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 2 deletions.
diff --git a/...for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png b/...for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png
diff --git a/...t-ts-axis-stories-theme-eui-dark-should-switch-to-a-30-minute-raster-1-snap.png b/...t-ts-axis-stories-theme-eui-dark-should-switch-to-a-30-minute-raster-1-snap.png
diff --git a/...-ts-axis-stories-theme-eui-light-should-switch-to-a-30-minute-raster-1-snap.png b/...-ts-axis-stories-theme-eui-light-should-switch-to-a-30-minute-raster-1-snap.png
diff --git a/...r-should-show-cursor-band-when-background-is-set-with-eui-dark-theme-1-snap.png b/...r-should-show-cursor-band-when-background-is-set-with-eui-dark-theme-1-snap.png
diff --git a/...-should-show-cursor-band-when-background-is-set-with-eui-light-theme-1-snap.png b/...-should-show-cursor-band-when-background-is-set-with-eui-light-theme-1-snap.png
diff --git a/...cursor-should-show-cursor-when-background-is-set-with-eui-dark-theme-1-snap.png b/...cursor-should-show-cursor-when-background-is-set-with-eui-dark-theme-1-snap.png
diff --git a/...ursor-should-show-cursor-when-background-is-set-with-eui-light-theme-1-snap.png b/...ursor-should-show-cursor-when-background-is-set-with-eui-light-theme-1-snap.png
diff --git a/integration/tests/interactions.test.ts b/integration/tests/interactions.test.ts
@@ -385,4 +385,26 @@ describe('Interactions', () => {
       );
     });
   });
+
+  describe('mouse cursor', () => {
+    it.each<string>(['eui-light', 'eui-dark'])(
+      `should show cursor when background is set with %s theme`,
+      async (theme) => {
+        await common.expectChartWithMouseAtUrlToMatchScreenshot(
+          `http://localhost:9001/?path=/story/mixed-charts--lines-and-areas&globals=theme:${theme}&knob-Fit%20domain_Y%20-%20Axis=true&knob-Log%20base_Y%20-%20Axis=natural&knob-Use%20default%20limit_Y%20-%20Axis=true&knob-Use%20negative%20values_Y%20-%20Axis=false`,
+          { top: 150, left: 250 },
+        );
+      },
+    );
+
+    it.each<string>(['eui-light', 'eui-dark'])(
+      `should show cursor band when background is set with %s theme`,
+      async (theme) => {
+        await common.expectChartWithMouseAtUrlToMatchScreenshot(
+          `http://localhost:9001/?path=/story/mixed-charts--bars-and-lines&globals=theme:${theme}&knob-Fit%20domain_Y%20-%20Axis=true&knob-Log%20base_Y%20-%20Axis=natural&knob-Use%20default%20limit_Y%20-%20Axis=true&knob-Use%20negative%20values_Y%20-%20Axis=false`,
+          { top: 150, left: 150 },
+        );
+      },
+    );
+  });
 });
diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/renderers.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/renderers.ts
@@ -38,7 +38,7 @@ export function renderXYChartCanvas2d(
       rotation,
       geometries,
       geometriesIndex,
-      theme: { axes: sharedAxesStyle, sharedStyle, barSeriesStyle, background },
+      theme: { axes: sharedAxesStyle, sharedStyle, barSeriesStyle },
       highlightedLegendItem,
       annotationDimensions,
       annotationSpecs,
@@ -51,7 +51,7 @@ export function renderXYChartCanvas2d(
     } = props;
     const transform = { x: renderingArea.left + chartTransform.x, y: renderingArea.top + chartTransform.y };
     renderLayers(ctx, [
-      () => clearCanvas(ctx, background.color),
+      () => clearCanvas(ctx, 'transparent'),
 
       // render panel grid
       () => debug && renderGridPanels(ctx, transform, panelGeoms),