fix(statistics): let a point on the 0 % or 100 % line draw in full - #166
Merged
Conversation
The previous attempt grew `layout.padding`, on the assumption the canvas edge was doing the clipping. It is not: chart.js clips a dataset at the plot area, and `layout.padding` moves that boundary inwards along with everything else, so a point sitting exactly on the axis limit kept losing its outer half. Measured on the live page: the 100 % gridline sits at device row 92, the topmost pixel of the point is also at row 92 with a flat edge, and the eight rows of padding above it stay empty. A radius-3 point would have to start at 85,5. Setting `clip` on the line dataset lets the point spill into that padding. Padding is now uniform, because bottom and left were at 4 — below the hover radius of 5.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Was war das Problem
Punkte im „Zeitlicher Verlauf"-Chart, die genau auf 0 % oder 100 % liegen, werden zur Hälfte abgeschnitten. Der Fix in af0d458 hat dafür
layout.paddingvergrößert — das hat nichts gebracht.Warum der letzte Anlauf nicht wirken konnte
Die Annahme war, die Canvas-Kante schneide ab. Tatsächlich clippt chart.js ein Dataset an der Plot-Area, und
layout.paddingverschiebt genau diese Grenze mit nach innen. Der Punkt auf dem Achsenlimit verliert seine äußere Hälfte danach also unverändert. Der chart.js-Default fürclipistborderWidth / 2— daher der 1-px-Splitter, der übrig bleibt.Nachgemessen auf der Produktivinstanz (Canvas-Pixel, DPR 2):
Ein Punkt mit Radius 3 müsste bei 85,5 beginnen.
Was sich ändert
clip: POINT_OVERFLOWauf dem Line-Dataset, damit der Punkt in das reservierte Padding hineinzeichnen darflayout.paddingjetzt gleichmäßig auf demselben Wert; unten und links standen auf 4 und lagen damit unter dem Hover-Radius von 5Die Bar-Charts bleiben auf dem Default — ein Balken endet ohnehin an der Kante.
Verifikation
Isolierte Repro-Seite mit der chart.js-Version aus dem Repo, alte und neue Optionen nebeneinander:
Gleiches Bild an der 0 %-Kante. eslint und
npm run buildsind grün.Für den Review
Rein visuell, keine API- oder Verhaltensänderung — für den Flutter-Client irrelevant.