feat: better layout for bar charts

This commit is contained in:
2026-02-26 12:22:53 +01:00
parent 6fa7ac09b8
commit c45747cac0
2 changed files with 41 additions and 35 deletions

View File

@@ -72,6 +72,7 @@ export const A2UIChart: React.FC<A2UIComponentProps> = ({ component }) => {
<div className="assistant-panel-chart"> <div className="assistant-panel-chart">
{title && <p className="assistant-panel-chart-title">{title}</p>} {title && <p className="assistant-panel-chart-title">{title}</p>}
<div className="assistant-panel-chart-type">{chartType}</div> <div className="assistant-panel-chart-type">{chartType}</div>
<div className="assistant-panel-chart-body">
{series.map((entry, index) => { {series.map((entry, index) => {
const totalValue = isStacked && entry.segments const totalValue = isStacked && entry.segments
? entry.segments.reduce((sum, s) => sum + s.value, 0) ? entry.segments.reduce((sum, s) => sum + s.value, 0)
@@ -107,6 +108,7 @@ export const A2UIChart: React.FC<A2UIComponentProps> = ({ component }) => {
</div> </div>
); );
})} })}
</div>
{isStacked && segmentLabels.length > 0 && ( {isStacked && segmentLabels.length > 0 && (
<div className="assistant-panel-chart-legend"> <div className="assistant-panel-chart-legend">
{segmentLabels.map((label, i) => ( {segmentLabels.map((label, i) => (

View File

@@ -155,14 +155,18 @@
opacity: 0.7; opacity: 0.7;
} }
.assistant-panel-chart-item { .assistant-panel-chart-body {
display: grid; display: grid;
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
gap: 8px; gap: 4px 8px;
align-items: center; align-items: center;
font-size: 12px; font-size: 12px;
} }
.assistant-panel-chart-item {
display: contents;
}
.assistant-panel-chart-label { .assistant-panel-chart-label {
justify-self: end; justify-self: end;
white-space: nowrap; white-space: nowrap;