ihompadmin/tasq
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

UI Phase 2 (L7): tighten Reports chart grid layout

Browse Source 
Reduce dead whitespace and align the Reports charts to the cyber card language.
Layout only — charts, data and PDF export untouched.

- report_card_wrapper.dart: flat tonal fill + hairline outline + token radius
  (was surfaceContainerLow + hard 16 radius, no border); uppercase telemetry
  card title to match section headers.
- status_charts.dart / request_distribution_charts.dart: donut charts now use a
  fixed 150px donut with an Expanded legend beside it (was an Expanded donut +
  cramped right legend, leaving a large central gap); card height 220 -> 180.

Verified: flutter analyze lib clean; flutter build web green; visual QA (Reports)
in dark.

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
Marc Rejohn Castillano
2026-09-26 16:06:32 +08:00
parent 9f764150a2
commit ab5d385325
3 changed files with 105 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/screens/reports/widgets/status_charts.dart
+42 -36
View File
@@ -52,10 +52,11 @@ class _TicketsByStatusChartState extends ConsumerState<TicketsByStatusChart> {
return ReportCardWrapper(
title: 'Tickets by Status',
repaintBoundaryKey: widget.repaintKey,
height: 220,
height: 180,
child: Row(
children: [
Expanded(
SizedBox(
width: 150,
child: PieChart(
PieChartData(
pieTouchData: PieTouchData(
@@ -92,22 +93,24 @@ class _TicketsByStatusChartState extends ConsumerState<TicketsByStatusChart> {
),
),
),
const SizedBox(width: 12),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: data.asMap().entries.map((entry) {
final i = entry.key;
final e = entry.value;
final isTouched = i == _touchedIndex;
return _LegendItem(
color: _ticketStatusColor(context, e.status),
label: _capitalize(e.status),
value:
'${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
isTouched: isTouched,
);
}).toList(),
const SizedBox(width: 16),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: data.asMap().entries.map((entry) {
final i = entry.key;
final e = entry.value;
final isTouched = i == _touchedIndex;
return _LegendItem(
color: _ticketStatusColor(context, e.status),
label: _capitalize(e.status),
value:
'${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
isTouched: isTouched,
);
}).toList(),
),
),
],
),
@@ -178,10 +181,11 @@ class _TasksByStatusChartState extends ConsumerState<TasksByStatusChart> {
return ReportCardWrapper(
title: 'Tasks by Status',
repaintBoundaryKey: widget.repaintKey,
height: 220,
height: 180,
child: Row(
children: [
Expanded(
SizedBox(
width: 150,
child: PieChart(
PieChartData(
pieTouchData: PieTouchData(
@@ -218,22 +222,24 @@ class _TasksByStatusChartState extends ConsumerState<TasksByStatusChart> {
),
),
),
const SizedBox(width: 12),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: data.asMap().entries.map((entry) {
final i = entry.key;
final e = entry.value;
final isTouched = i == _touchedIndex;
return _LegendItem(
color: _taskStatusColor(context, e.status),
label: _formatTaskStatus(e.status),
value:
'${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
isTouched: isTouched,
);
}).toList(),
const SizedBox(width: 16),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: data.asMap().entries.map((entry) {
final i = entry.key;
final e = entry.value;
final isTouched = i == _touchedIndex;
return _LegendItem(
color: _taskStatusColor(context, e.status),
label: _formatTaskStatus(e.status),
value:
'${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
isTouched: isTouched,
);
}).toList(),
),
),
],
),