Skip to content

Commit e0f1543

Browse files
markov00markov00
authored
fix(xy): show mouse cursors on charts with opaque background (#1447)
1 parent 1d06a1e commit e0f1543

9 files changed

Lines changed: 24 additions & 2 deletions

‎integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png‎

104 Bytes
Loading

‎integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-theme-eui-dark-should-switch-to-a-30-minute-raster-1-snap.png‎

1.02 KB
Loading

‎integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-theme-eui-light-should-switch-to-a-30-minute-raster-1-snap.png‎

240 Bytes
Loading

‎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‎

27.3 KB
Loading

‎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‎

28.2 KB
Loading

‎integration/tests/__image_snapshots__/interactions-test-ts-interactions-mouse-cursor-should-show-cursor-when-background-is-set-with-eui-dark-theme-1-snap.png‎

38.2 KB
Loading

‎integration/tests/__image_snapshots__/interactions-test-ts-interactions-mouse-cursor-should-show-cursor-when-background-is-set-with-eui-light-theme-1-snap.png‎

40.1 KB
Loading

‎integration/tests/interactions.test.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -385,4 +385,26 @@ describe('Interactions', () => {
385385
);
386386
});
387387
});
388+
389+
describe('mouse cursor', () => {
390+
it.each<string>(['eui-light', 'eui-dark'])(
391+
`should show cursor when background is set with %s theme`,
392+
async (theme) => {
393+
await common.expectChartWithMouseAtUrlToMatchScreenshot(
394+
`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`,
395+
{ top: 150, left: 250 },
396+
);
397+
},
398+
);
399+
400+
it.each<string>(['eui-light', 'eui-dark'])(
401+
`should show cursor band when background is set with %s theme`,
402+
async (theme) => {
403+
await common.expectChartWithMouseAtUrlToMatchScreenshot(
404+
`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`,
405+
{ top: 150, left: 150 },
406+
);
407+
},
408+
);
409+
});
388410
});

‎packages/charts/src/chart_types/xy_chart/renderer/canvas/renderers.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export function renderXYChartCanvas2d(
3838
rotation,
3939
geometries,
4040
geometriesIndex,
41-
theme: { axes: sharedAxesStyle, sharedStyle, barSeriesStyle, background },
41+
theme: { axes: sharedAxesStyle, sharedStyle, barSeriesStyle },
4242
highlightedLegendItem,
4343
annotationDimensions,
4444
annotationSpecs,
@@ -51,7 +51,7 @@ export function renderXYChartCanvas2d(
5151
} = props;
5252
const transform = { x: renderingArea.left + chartTransform.x, y: renderingArea.top + chartTransform.y };
5353
renderLayers(ctx, [
54-
() => clearCanvas(ctx, background.color),
54+
() => clearCanvas(ctx, 'transparent'),
5555

5656
// render panel grid
5757
() => debug && renderGridPanels(ctx, transform, panelGeoms),

0 commit comments

Comments
 (0)