From 5bad21322615be81ea2d013e52b9e1ffa9bf716e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Qu=C3=A8ze?= Date: Fri, 26 May 2023 19:02:29 +0200 Subject: [PATCH] Set the CanvasRenderingContext2D.lineJoin property to bevel on power tracks to avoid visual noise on dense charts. --- src/components/timeline/TrackPowerGraph.js | 1 + src/test/components/__snapshots__/TrackPower.test.js.snap | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/src/components/timeline/TrackPowerGraph.js b/src/components/timeline/TrackPowerGraph.js index b930e1424c..070b93b241 100644 --- a/src/components/timeline/TrackPowerGraph.js +++ b/src/components/timeline/TrackPowerGraph.js @@ -124,6 +124,7 @@ class TrackPowerCanvas extends React.PureComponent { // power graph. ctx.lineWidth = deviceLineWidth; + ctx.lineJoin = 'bevel'; ctx.strokeStyle = GREY_50; ctx.fillStyle = '#73737388'; // Grey 50 with transparency. ctx.beginPath(); diff --git a/src/test/components/__snapshots__/TrackPower.test.js.snap b/src/test/components/__snapshots__/TrackPower.test.js.snap index ff26e785a8..3e195d7595 100644 --- a/src/test/components/__snapshots__/TrackPower.test.js.snap +++ b/src/test/components/__snapshots__/TrackPower.test.js.snap @@ -45,6 +45,10 @@ Array [ "set lineWidth", 2, ], + Array [ + "set lineJoin", + "bevel", + ], Array [ "set strokeStyle", "#737373",