Skip to content
Snippets Groups Projects
Commit 74f7a4be authored by Sara Savanovic Djordjevic's avatar Sara Savanovic Djordjevic
Browse files

update: chart apperances

parent 5a7366a1
No related branches found
No related tags found
1 merge request!10Clhp map
Hide whitespace changes
Inline Side-by-side
app/lib/widgets/main_layout.dart
+ 1
− 0
View file @ 74f7a4be
...@@ -220,6 +220,7 @@ class _MapContainerWidgetState extends State<MapContainerWidget> { ...@@ -220,6 +220,7 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
style: regTextStyle, style: regTextStyle,
), ),
const SizedBox(height: contPadding), const SizedBox(height: contPadding),
const SizedBox(height: 15),
const StatCharts(), const StatCharts(),
], ],
), ),
......
app/lib/widgets/stat_charts.dart
+ 123
− 82
View file @ 74f7a4be
...@@ -4,99 +4,140 @@ import 'package:fl_chart/fl_chart.dart'; ...@@ -4,99 +4,140 @@ import 'package:fl_chart/fl_chart.dart';
class StatCharts extends StatelessWidget { class StatCharts extends StatelessWidget {
const StatCharts({Key? key}) : super(key: key); const StatCharts({Key? key}) : super(key: key);
Widget buildLineChart(BuildContext context) {
return 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 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),
],
),
],
),
);
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( return Column(
children: [ children: [
LineChart( SizedBox(
LineChartData( width: MediaQuery.of(context).size.width * 0.8, // Set the width of the LineChart
backgroundColor: Colors.lightBlue, height: 200,
titlesData: FlTitlesData( child: buildLineChart(context),
leftTitles: SideTitles(showTitles: true),
bottomTitles: SideTitles(showTitles: true),
),
borderData: FlBorderData(show: true),
minX: 0,
maxX: 4,
minY: 0,
maxY: 50,
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, 10),
FlSpot(1, 20),
FlSpot(2, 30),
FlSpot(3, 40),
],
isCurved: true,
colors: [Colors.blue],
),
],
),
), ),
const SizedBox(height: 20), const SizedBox(height: 20),
SizedBox( SizedBox(
width: MediaQuery.of(context).size.width * 0.8, width: MediaQuery.of(context).size.width * 0.8,
height: 160, height: 160,
child: BarChart( child: buildBarChart(context),
BarChartData(
alignment: BarChartAlignment.spaceAround,
maxY: 20,
barTouchData: BarTouchData(enabled: false),
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: true,
getTextStyles: (value) => const TextStyle(color: Colors.black),
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.black),
margin: 10,
reservedSize: 30,
interval: 5,
),
),
borderData: FlBorderData(
show: true,
border: Border.all(color: Colors.white, 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),
],
),
],
),
),
), ),
], ],
); );
} }
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment