hugo/bDS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: better layout for bar charts

Browse Source
This commit is contained in:
hugo
2026-02-26 12:22:53 +01:00
parent 6fa7ac09b8
commit c45747cac0
2 changed files with 41 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/renderer/a2ui/components/A2UIChart.tsx
View File

@@ -72,41 +72,43 @@ export const A2UIChart: React.FC<A2UIComponentProps> = ({ component }) => {
<div className="assistant-panel-chart">
{title && <p className="assistant-panel-chart-title">{title}</p>}
<div className="assistant-panel-chart-type">{chartType}</div>
{series.map((entry, index) => {
const totalValue = isStacked && entry.segments
? entry.segments.reduce((sum, s) => sum + s.value, 0)
: entry.value;
<div className="assistant-panel-chart-body">
{series.map((entry, index) => {
const totalValue = isStacked && entry.segments
? entry.segments.reduce((sum, s) => sum + s.value, 0)
: entry.value;
return (
<div key={`${component.id}-series-${index}`} className="assistant-panel-chart-item">
<span className="assistant-panel-chart-label">{entry.label}</span>
<div className="assistant-panel-chart-bar-track">
{isStacked && entry.segments ? (
entry.segments.map((seg, si) => {
const segWidth = maxValue > 0 ? (seg.value / maxValue) * 100 : 0;
return (
<div
key={`${component.id}-seg-${index}-${si}`}
className="assistant-panel-chart-bar-segment"
style={{
width: `${segWidth}%`,
backgroundColor: getSegmentColor(segmentLabels.indexOf(seg.label)),
}}
title={`${seg.label}: ${seg.value}`}
/>
);
})
) : (
<div
className="assistant-panel-chart-bar-fill"
style={{ width: `${maxValue > 0 ? (entry.value / maxValue) * 100 : 0}%` }}
/>
)}
return (
<div key={`${component.id}-series-${index}`} className="assistant-panel-chart-item">
<span className="assistant-panel-chart-label">{entry.label}</span>
<div className="assistant-panel-chart-bar-track">
{isStacked && entry.segments ? (
entry.segments.map((seg, si) => {
const segWidth = maxValue > 0 ? (seg.value / maxValue) * 100 : 0;
return (
<div
key={`${component.id}-seg-${index}-${si}`}
className="assistant-panel-chart-bar-segment"
style={{
width: `${segWidth}%`,
backgroundColor: getSegmentColor(segmentLabels.indexOf(seg.label)),
}}
title={`${seg.label}: ${seg.value}`}
/>
);
})
) : (
<div
className="assistant-panel-chart-bar-fill"
style={{ width: `${maxValue > 0 ? (entry.value / maxValue) * 100 : 0}%` }}
/>
)}
</div>
<span className="assistant-panel-chart-value">{totalValue}</span>
</div>
<span className="assistant-panel-chart-value">{totalValue}</span>
</div>
);
})}
);
})}
</div>
{isStacked && segmentLabels.length > 0 && (
<div className="assistant-panel-chart-legend">
{segmentLabels.map((label, i) => (

8
src/renderer/components/AssistantSidebar/AssistantSidebar.css
View File

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