fix(transparency): add extra top margin, top titles padding, and expanded leftTitles for enrollment bar chart
This commit is contained in:
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,
|
||||||
|
|||||||
Reference in new issue
Block a user