Scale scatter chart into quadrants#14
Conversation
aacfa11 to
08437f2
Compare
| const data = { | ||
| datasets: [{ | ||
| data: this.pointsValue.map((p) => ({ x: p.want, y: p.can, label: p.name })), | ||
| data: this.pointsValue.map((p) => ({ x: p.want - 3, y: p.can - 2.5, label: p.name })), |
There was a problem hiding this comment.
Doing this in JS splits knowledge about how this values are scaled between the backend and the frontend. This is bad for maintenance. Can you do the conversion in the rails backend?
| // The four can levels; 0 carries no label — it only draws the centre line between them. | ||
| const canTickValues = [-1.5, -0.5, 0.5, 1.5] | ||
| const zeroLine = (ctx) => (ctx.tick?.value === 0 ? '#999999' : 'rgba(0, 0, 0, 0.1)') |
There was a problem hiding this comment.
Confusing naming: This calculates the gridColor, choosing a different color for the zero line. It sounds like it draws the zero line.
| grid: { color: zeroLine }, | ||
| afterBuildTicks: (axis) => { | ||
| // Add 0 so the centre line is drawn | ||
| axis.ticks = [...canTickValues, 0].sort((a, b) => a - b).map((value) => ({ value })) |
There was a problem hiding this comment.
Why not add it to the canTickValues above?
There was a problem hiding this comment.
0 isn't a level, it has no label and only draws the centre line. canTickValues is the index map for the labels, so adding 0 there would shift the lookup and mislabel the levels. That's why it's separated
08437f2 to
994d14f
Compare
| <% end %> | ||
|
|
||
| <% can_ticks = TechRadar::Rating.can_levels.keys.map { |key| t("tech_radar.rate.can.#{key}") } %> | ||
| <% want_ticks = TechRadar::Rating.want_levels.keys.map { |key| t("tech_radar.rate.want.#{key}") } %> |
There was a problem hiding this comment.
this looks like the same thing you extracted to a helper here: https://github.com/renuo/redmine_techradar/pull/16/changes#diff-6e8ce091a1c35c5276d211ac6886d64aca48c3915694d246cf0e80e44f983d95R3-R13
use those helpers after rebasing
2206558 to
bc11944
Compare
bc11944 to
d7ae383
Compare
Before:

After:
