feat: dual axis legend #108
Conversation
|
@jsilll some of the existing pages are failing with errors, e.g. the |
|
Should the separator line be in the middle between two legends? 
|
|
@jsilll, that is not directly related, but should "Legend bottom max height" include legend's title and the margin between title and items? Currently, only the items are included. Edit: it turns out, the question was related. In the current implementation, the entire legend is covered by the max height setting. |
| items={legendItems} | ||
| actions={actions} | ||
| position={position} | ||
| bottomMaxHeight={bottomMaxHeight} |
There was a problem hiding this comment.
Why do we implement the legend layout inside the legend itself? Instead of passing the bottomMaxHeight down to the legend, you can give extra slot in the chart-container, so that it can render either a single or a double legend.
| return null; | ||
| } | ||
|
|
||
| // TODO: surface the type and defaultTitle and oppositeTitle props |
There was a problem hiding this comment.
should this comment be removed or is there something still planned?
| const resizeObserver = new ResizeObserver((entries) => { | ||
| if (entries.length > 0) { | ||
| const width = entries[0].borderBoxSize?.[0].inlineSize; | ||
| setShouldStack(width < 400); |
There was a problem hiding this comment.
Why id it 400px? Let's extract this into a constant
There was a problem hiding this comment.
Yea, 400 was simply my choice for the threshold, let's agree on a sensible value.
| if (!containerRef.current) { | ||
| return; | ||
| } | ||
| const resizeObserver = new ResizeObserver((entries) => { |
There was a problem hiding this comment.
CDS has useContainerQuery and useResizeObserver utils that can be used instead of this custom code.
| tabIndex={-1} | ||
| ref={containerRef} | ||
| style={{ | ||
| overflow: "auto", |
There was a problem hiding this comment.
The inline styles can only be used when the values are computed dynamically. The overflow: auto should be added via classes instead
| } | ||
|
|
||
| .legend-dual-group { | ||
| inline-size: calc(50% - 20px); |
There was a problem hiding this comment.
let's add a comment explaining the values here. Or, better, you can extract the 20px (or 40px) into a variable. E.g. some $legend-horizontal-padding: 40px, and then inline-size: calc(50% - $legend-horizontal-padding / 2)
2 participants
Description
Introduces support for dual-axis chart legends, which properly groups and separates legend items based on which Y-axis they belong to.
Key changes:
oppositeAxisproperty to legend items to track which Y-axis a series belongs to