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/request_distribution_charts.dart
+42 -36
View File
@@ -77,10 +77,11 @@ class _RequestTypeChartState extends ConsumerState<RequestTypeChart> {
return ReportCardWrapper(
title: 'Request Type Distribution',
repaintBoundaryKey: widget.repaintKey,
height: 220,
height: 180,
child: Row(
children: [
Expanded(
SizedBox(
width: 150,
child: PieChart(
PieChartData(
pieTouchData: PieTouchData(
@@ -116,22 +117,24 @@ class _RequestTypeChartState extends ConsumerState<RequestTypeChart> {
),
),
),
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 _HoverLegendItem(
color: colorFor(i, e.name),
label: e.name,
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 _HoverLegendItem(
color: colorFor(i, e.name),
label: e.name,
value:
'${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
isTouched: isTouched,
);
}).toList(),
),
),
],
),
@@ -208,10 +211,11 @@ class _RequestCategoryChartState extends ConsumerState<RequestCategoryChart> {
return ReportCardWrapper(
title: 'Request Category Distribution',
repaintBoundaryKey: widget.repaintKey,
height: 220,
height: 180,
child: Row(
children: [
Expanded(
SizedBox(
width: 150,
child: PieChart(
PieChartData(
pieTouchData: PieTouchData(
@@ -247,22 +251,24 @@ class _RequestCategoryChartState extends ConsumerState<RequestCategoryChart> {
),
),
),
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 _HoverLegendItem(
color: colorFor(i, e.name),
label: e.name,
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 _HoverLegendItem(
color: colorFor(i, e.name),
label: e.name,
value:
'${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
isTouched: isTouched,
);
}).toList(),
),
),
],
),