feat: better layout for bar charts
This commit is contained in:
@@ -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) => (
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user