fix(transparency): add extra top margin, top titles padding, and expanded leftTitles for enrollment bar chart

This commit is contained in:
ssbg04 committed 2026-08-18 21:02:21 +08:00
1 parent 8aaefb2aa4
commit c8f215eaaf
1 file changed
+94 -88
@@ -317,7 +317,7 @@ class _TransparencyBoardContent extends StatelessWidget {
), ),
const SizedBox(height: AppSizes.p12), const SizedBox(height: AppSizes.p12),
SizedBox( SizedBox(
height: 320, height: 360,
child: _buildEnrollmentGroupedBarChart(context, years, isDark: isDark), child: _buildEnrollmentGroupedBarChart(context, years, isDark: isDark),
), ),
const SizedBox(height: AppSizes.p24), const SizedBox(height: AppSizes.p24),
@@ -374,101 +374,106 @@ class _TransparencyBoardContent extends StatelessWidget {
return LayoutBuilder( return LayoutBuilder(
builder: (context, constraints) { builder: (context, constraints) {
final isMobile = constraints.maxWidth < 600; final isMobile = constraints.maxWidth < 600;
final chartContentWidth = isMobile ? 620.0 : constraints.maxWidth; final chartContentWidth = isMobile ? 640.0 : constraints.maxWidth;
final chartWidget = SizedBox( final chartWidget = Padding(
width: chartContentWidth, padding: const EdgeInsets.only(top: 16, right: 14, left: 4),
child: BarChart( child: SizedBox(
BarChartData( width: chartContentWidth,
alignment: BarChartAlignment.spaceAround, child: BarChart(
groupsSpace: 24, BarChartData(
maxY: (maxVal * 1.30).ceilToDouble(), alignment: BarChartAlignment.spaceAround,
barTouchData: BarTouchData( groupsSpace: 24,
enabled: true, maxY: (maxVal * 1.45).ceilToDouble(),
handleBuiltInTouches: true, barTouchData: BarTouchData(
touchTooltipData: BarTouchTooltipData( enabled: true,
fitInsideHorizontally: true, handleBuiltInTouches: true,
fitInsideVertically: true, touchTooltipData: BarTouchTooltipData(
tooltipMargin: 8, fitInsideHorizontally: true,
tooltipPadding: const EdgeInsets.symmetric( fitInsideVertically: true,
horizontal: 12, tooltipMargin: 12,
vertical: 8, tooltipPadding: const EdgeInsets.symmetric(
), horizontal: 14,
getTooltipColor: (group) => isDark vertical: 8,
? AppColors.darkSurface2 ),
: const Color(0xFF1E293B), getTooltipColor: (group) => isDark
getTooltipItem: (group, groupIndex, rod, rodIndex) { ? AppColors.darkSurface2
final yr = years[rodIndex % years.length].yearRange; : const Color(0xFF1E293B),
return BarTooltipItem( getTooltipItem: (group, groupIndex, rod, rodIndex) {
'$yr\nGrade ${gradeLevels[group.x.toInt()]}: ${rod.toY.toInt()} enrolled', final yr = years[rodIndex % years.length].yearRange;
TextStyle( return BarTooltipItem(
color: isDark '$yr\nGrade ${gradeLevels[group.x.toInt()]}: ${rod.toY.toInt()} enrolled',
? AppColors.darkTextPrimary TextStyle(
: Colors.white, color: isDark
fontSize: 12, ? AppColors.darkTextPrimary
fontWeight: FontWeight.bold, : Colors.white,
), fontSize: 12,
); fontWeight: FontWeight.bold,
},
),
),
titlesData: FlTitlesData(
show: true,
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 32,
getTitlesWidget: (val, meta) {
final idx = val.toInt();
if (idx < 0 || idx >= gradeLevels.length) {
return const SizedBox.shrink();
}
return Padding(
padding: const EdgeInsets.only(top: 8),
child: Text(
'Grade ${gradeLevels[idx]}',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: isDark
? AppColors.darkTextSecondary
: AppColors.textPrimary,
),
), ),
); );
}, },
), ),
), ),
leftTitles: AxisTitles( titlesData: FlTitlesData(
sideTitles: SideTitles( show: true,
showTitles: true, bottomTitles: AxisTitles(
reservedSize: 46, sideTitles: SideTitles(
getTitlesWidget: (val, meta) { showTitles: true,
if (val == 0) return const SizedBox.shrink(); reservedSize: 34,
return Padding( getTitlesWidget: (val, meta) {
padding: const EdgeInsets.only(right: 6), final idx = val.toInt();
child: Text( if (idx < 0 || idx >= gradeLevels.length) {
val.toInt().toString(), return const SizedBox.shrink();
textAlign: TextAlign.right, }
style: TextStyle( return Padding(
fontSize: 11, padding: const EdgeInsets.only(top: 8),
fontWeight: FontWeight.bold, child: Text(
color: isDark 'Grade ${gradeLevels[idx]}',
? AppColors.darkTextSecondary style: TextStyle(
: AppColors.textSecondary, fontSize: 11,
fontWeight: FontWeight.w600,
color: isDark
? AppColors.darkTextSecondary
: AppColors.textPrimary,
),
), ),
), );
); },
}, ),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 52,
getTitlesWidget: (val, meta) {
if (val == 0) return const SizedBox.shrink();
return Padding(
padding: const EdgeInsets.only(right: 8),
child: Text(
val.toInt().toString(),
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 11.5,
fontWeight: FontWeight.bold,
color: isDark
? AppColors.darkTextSecondary
: AppColors.textSecondary,
),
),
);
},
),
),
topTitles: const AxisTitles(
sideTitles: SideTitles(
showTitles: false,
reservedSize: 20,
),
),
rightTitles: const AxisTitles(
sideTitles: SideTitles(showTitles: false),
), ),
), ),
topTitles: const AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
rightTitles: const AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
),
gridData: FlGridData( gridData: FlGridData(
show: true, show: true,
drawVerticalLine: false, drawVerticalLine: false,
@@ -516,7 +521,8 @@ class _TransparencyBoardContent extends StatelessWidget {
}).toList(), }).toList(),
), ),
), ),
); ),
);
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,