diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png index e318efecc0..f74fb52489 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-theme-eui-dark-should-switch-to-a-30-minute-raster-1-snap.png b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-theme-eui-dark-should-switch-to-a-30-minute-raster-1-snap.png new file mode 100644 index 0000000000..d92e7e27e1 Binary files /dev/null and b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-theme-eui-dark-should-switch-to-a-30-minute-raster-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-theme-eui-light-should-switch-to-a-30-minute-raster-1-snap.png b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-theme-eui-light-should-switch-to-a-30-minute-raster-1-snap.png new file mode 100644 index 0000000000..4a4d6c0ab3 Binary files /dev/null and b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-theme-eui-light-should-switch-to-a-30-minute-raster-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-mouse-cursor-should-show-cursor-band-when-background-is-set-with-eui-dark-theme-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-mouse-cursor-should-show-cursor-band-when-background-is-set-with-eui-dark-theme-1-snap.png new file mode 100644 index 0000000000..8630bcd006 Binary files /dev/null and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-mouse-cursor-should-show-cursor-band-when-background-is-set-with-eui-dark-theme-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-mouse-cursor-should-show-cursor-band-when-background-is-set-with-eui-light-theme-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-mouse-cursor-should-show-cursor-band-when-background-is-set-with-eui-light-theme-1-snap.png new file mode 100644 index 0000000000..3df54c0067 Binary files /dev/null and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-mouse-cursor-should-show-cursor-band-when-background-is-set-with-eui-light-theme-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-mouse-cursor-should-show-cursor-when-background-is-set-with-eui-dark-theme-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-mouse-cursor-should-show-cursor-when-background-is-set-with-eui-dark-theme-1-snap.png new file mode 100644 index 0000000000..a1242815d3 Binary files /dev/null and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-mouse-cursor-should-show-cursor-when-background-is-set-with-eui-dark-theme-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-mouse-cursor-should-show-cursor-when-background-is-set-with-eui-light-theme-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-mouse-cursor-should-show-cursor-when-background-is-set-with-eui-light-theme-1-snap.png new file mode 100644 index 0000000000..7520a5cffa Binary files /dev/null and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-mouse-cursor-should-show-cursor-when-background-is-set-with-eui-light-theme-1-snap.png differ diff --git a/integration/tests/interactions.test.ts b/integration/tests/interactions.test.ts index 51cfb385f7..3bb9a8d9a7 100644 --- a/integration/tests/interactions.test.ts +++ b/integration/tests/interactions.test.ts @@ -385,4 +385,26 @@ describe('Interactions', () => { ); }); }); + + describe('mouse cursor', () => { + it.each(['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(['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 index 63e6a8404c..0d9834624a 100644 --- 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),