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"> <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>
{series.map((entry, index) => { <div className="assistant-panel-chart-body">
const totalValue = isStacked && entry.segments {series.map((entry, index) => {
? entry.segments.reduce((sum, s) => sum + s.value, 0) const totalValue = isStacked && entry.segments
: entry.value; ? entry.segments.reduce((sum, s) => sum + s.value, 0)
: entry.value;
return ( return (
<div key={`${component.id}-series-${index}`} className="assistant-panel-chart-item"> <div key={`${component.id}-series-${index}`} className="assistant-panel-chart-item">
<span className="assistant-panel-chart-label">{entry.label}</span> <span className="assistant-panel-chart-label">{entry.label}</span>
<div className="assistant-panel-chart-bar-track"> <div className="assistant-panel-chart-bar-track">
{isStacked && entry.segments ? ( {isStacked && entry.segments ? (
entry.segments.map((seg, si) => { entry.segments.map((seg, si) => {
const segWidth = maxValue > 0 ? (seg.value / maxValue) * 100 : 0; const segWidth = maxValue > 0 ? (seg.value / maxValue) * 100 : 0;
return ( return (
<div <div
key={`${component.id}-seg-${index}-${si}`} key={`${component.id}-seg-${index}-${si}`}
className="assistant-panel-chart-bar-segment" className="assistant-panel-chart-bar-segment"
style={{ style={{
width: `${segWidth}%`, width: `${segWidth}%`,
backgroundColor: getSegmentColor(segmentLabels.indexOf(seg.label)), backgroundColor: getSegmentColor(segmentLabels.indexOf(seg.label)),
}} }}
title={`${seg.label}: ${seg.value}`} title={`${seg.label}: ${seg.value}`}
/> />
); );
}) })
) : ( ) : (
<div <div
className="assistant-panel-chart-bar-fill" className="assistant-panel-chart-bar-fill"
style={{ width: `${maxValue > 0 ? (entry.value / maxValue) * 100 : 0}%` }} style={{ width: `${maxValue > 0 ? (entry.value / maxValue) * 100 : 0}%` }}
/> />
)} )}
</div>
<span className="assistant-panel-chart-value">{totalValue}</span>
</div> </div>
<span className="assistant-panel-chart-value">{totalValue}</span> );
</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) => (

8
src/renderer/components/AssistantSidebar/AssistantSidebar.css
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;