UI: line chart #4661
UI: line chart #4661
Conversation
| <g class="canvas {{chartClass}}"> | ||
| <path class="line" d="{{line}}" /> | ||
| <rect class="area" x="0" y="0" width="{{yAxisOffset}}" height="{{xAxisOffset}}" fill="url(#{{fillId}})" clip-path="url(#{{maskId}})" /> | ||
| <rect class="hover-target" x="0" y="0" width="{{yAxisOffset}}" height="{{xAxisOffset}}" onhover={{action updateActiveDatum}} /> |
There was a problem hiding this comment.
Why both the onhover here and the mouseenter/move in the d3 binding in the JS?
There was a problem hiding this comment.
Oh, oops. This onhover in the template should be deleted. Glimmer doesn't support binding events on svg elements; at least not in 2.18.
| <rect class="hover-target" x="0" y="0" width="{{yAxisOffset}}" height="{{xAxisOffset}}" onhover={{action updateActiveDatum}} /> | ||
| </g> | ||
| <g class="x-axis axis" transform="translate(0, {{xAxisOffset}})"></g> | ||
| <g class="y-axis axis" transform="translate({{yAxisOffset}}, 0)"></g> |
There was a problem hiding this comment.
I was wondering aloud about accessibility of the SVG and @madalynrose pointed me to https://developer.mozilla.org/en-US/docs/Web/SVG/Element/desc - may be worth adding here. And she found https://developer.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/ - check out the section under "ARIA enhanced SVG accessibility". Though I'm not sure what stats we'd put there... maybe a min and max?
There was a problem hiding this comment.
Oh neat! Yeah, I'll look into this. The stat line charts, once they are in place, will also have related graphics and stats around them for the current value. I think those places will be the most useful for accessibility, but that doesn't mean svgs shouldn't have descriptions at least.
There was a problem hiding this comment.
After playing with this for an hour or so I think the amount of work justifies its own PR. I'd still open it against the f-ui-improved-stats-chart branch, so it'd be done before the line chart hits master.
There was a problem hiding this comment.
Ah yeah that makes sense! Thanks for digging into it ❤️
| chart.set('data', narrowData); | ||
|
|
||
| assert.equal( | ||
| +chart.get('xScale').domain()[0], |
There was a problem hiding this comment.
Is this just coercing to a Number?
There was a problem hiding this comment.
Yep. Comparing dates doesn't work due to them being passed by reference.
|
These look great 😍 |
|
|
||
| yGridlines: computed('yScale', function() { | ||
| // The first gridline overlaps the x-axis, so remove it | ||
| const [, ...ticks] = this.get('yTicks'); |
When data is coming in live, the tooltip can get bogged down by updates causing the tooltip to never make it under the mouse, which looks like either lag or a bug.
A use-case specific line-chart for showing utilization metrics by percent
DingoEatingFuzz
force-pushed
the
f-ui-line-chart
branch
from
8493680 to
efb1301
Compare
|
I'm going to lock this pull request because it has been closed for 120 days ⏳. This helps our maintainers find and focus on the active contributions. |
This is parter of a larger project to improve the cpu and memory usage charts in the UI
Just a couple line chart components.
Features
Tooltip in action
Some smaller charts, with less y-axis ticks
A demonstration of the "global intensity" of the gradient. Notice that the chart on the right doesn't have as deep as blues near the line. This is because the intensity is mapped from the top to the bottom of the canvas instead of from the top to the bottom of the area under the line for a chart.