diff --git a/app/lib/widgets/stat_charts.dart b/app/lib/widgets/stat_charts.dart index c02c6f4589a99be40e4710795a8f6095ab03336e..36a379b4aa384f50756cd865d7883310aa25c9ad 100644 --- a/app/lib/widgets/stat_charts.dart +++ b/app/lib/widgets/stat_charts.dart @@ -5,118 +5,124 @@ class StatCharts extends StatelessWidget { const StatCharts({Key? key}) : super(key: key); Widget buildLineChart(BuildContext context) { - return LineChart( - LineChartData( + return Padding( + padding: const EdgeInsets.only(right: 17), + child: LineChart( + LineChartData( + backgroundColor: Colors.grey.shade800, + titlesData: FlTitlesData( + leftTitles: SideTitles( + showTitles: true, + reservedSize: 22, + interval: 10, + getTextStyles: (value) => const TextStyle(color: Colors.white60), + ), + bottomTitles: SideTitles( + showTitles: true, + reservedSize: 22, + getTextStyles: (value) => const TextStyle(color: Colors.white60), + getTitles: (double value) { + switch (value.toInt()) { // Map int values to months + case 1: + return 'January'; + case 2: + return 'February'; + case 3: + return 'March'; + case 4: + return 'April'; + default: + return ''; + } + }, + ), + ), + borderData: FlBorderData( + show: true, + border: Border.all(color: Colors.white, width: 1), // Set border properties + ), + minX: 0, + maxX: 4, + minY: 0, + maxY: 50, + lineBarsData: [ + LineChartBarData( + spots: [ + FlSpot(0, 34), + FlSpot(1, 22), + FlSpot(2, 30), + FlSpot(3, 15), + FlSpot(4, 5), + ], + isCurved: true, + colors: [Colors.blue.shade200], + ), + ], + ), + ), + ); + } + + Widget buildBarChart(BuildContext context) { + return Padding( + padding: const EdgeInsets.only(right: 17), + child: BarChart( + BarChartData( + alignment: BarChartAlignment.spaceAround, + maxY: 20, + barTouchData: BarTouchData(enabled: false), backgroundColor: Colors.grey.shade800, titlesData: FlTitlesData( - leftTitles: SideTitles( - showTitles: true, - reservedSize: 22, - interval: 10, - getTextStyles: (value) => const TextStyle(color: Colors.white60), - ), bottomTitles: SideTitles( showTitles: true, - reservedSize: 22, getTextStyles: (value) => const TextStyle(color: Colors.white60), - getTitles: (double value) { - switch (value.toInt()) { // Map int values to months + margin: 10, + getTitles: (value) { + switch (value.toInt()) { + case 0: + return 'Value'; case 1: - return 'January'; + return 'Value'; case 2: - return 'February'; - case 3: - return 'March'; - case 4: - return 'April'; + return 'Value'; default: return ''; } }, ), + leftTitles: SideTitles( + showTitles: true, + getTextStyles: (value) => const TextStyle(color: Colors.white60), + margin: 10, + reservedSize: 30, + interval: 5, + ), ), borderData: FlBorderData( show: true, - border: Border.all(color: Colors.white, width: 1), // Set border properties + border: Border.all(color: Colors.white60, width: 1), ), - minX: 0, - maxX: 4, - minY: 0, - maxY: 50, - lineBarsData: [ - LineChartBarData( - spots: [ - FlSpot(0, 34), - FlSpot(1, 22), - FlSpot(2, 30), - FlSpot(3, 15), - FlSpot(4, 5), + barGroups: [ + BarChartGroupData( + x: 0, + barRods: [ + BarChartRodData(y: 15, width: 10), + ], + ), + BarChartGroupData( + x: 1, + barRods: [ + BarChartRodData(y: 10, width: 10), + ], + ), + BarChartGroupData( + x: 2, + barRods: [ + BarChartRodData(y: 18, width: 10), ], - isCurved: true, - colors: [Colors.blue.shade200], ), ], ), - ); - } - - Widget buildBarChart(BuildContext context) { - return BarChart( - BarChartData( - alignment: BarChartAlignment.spaceAround, - maxY: 20, - barTouchData: BarTouchData(enabled: false), - backgroundColor: Colors.grey.shade800, - titlesData: FlTitlesData( - bottomTitles: SideTitles( - showTitles: true, - getTextStyles: (value) => const TextStyle(color: Colors.white60), - margin: 10, - getTitles: (value) { - switch (value.toInt()) { - case 0: - return 'Placeholder1'; - case 1: - return 'Placeholder2'; - case 2: - return 'Placeholder3'; - default: - return ''; - } - }, - ), - leftTitles: SideTitles( - showTitles: true, - getTextStyles: (value) => const TextStyle(color: Colors.white60), - margin: 10, - reservedSize: 30, - interval: 5, - ), - ), - borderData: FlBorderData( - show: true, - border: Border.all(color: Colors.white60, width: 1), - ), - barGroups: [ - BarChartGroupData( - x: 0, - barRods: [ - BarChartRodData(y: 15, width: 10), - ], - ), - BarChartGroupData( - x: 1, - barRods: [ - BarChartRodData(y: 10, width: 10), - ], - ), - BarChartGroupData( - x: 2, - barRods: [ - BarChartRodData(y: 18, width: 10), - ], - ), - ], ), ); }