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> {
style: regTextStyle,
),
const SizedBox(height: contPadding),
const SizedBox(height: 15),
const StatCharts(),
],
),
......
app/lib/widgets/stat_charts.dart
+ 123
− 82
View file @ 74f7a4be
......@@ -4,99 +4,140 @@ import 'package:fl_chart/fl_chart.dart';
class StatCharts extends StatelessWidget {
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
Widget build(BuildContext context) {
return Column(
children: [
LineChart(
LineChartData(
backgroundColor: Colors.lightBlue,
titlesData: FlTitlesData(
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],
),
],
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.8, // Set the width of the LineChart
height: 200,
child: buildLineChart(context),
),
const SizedBox(height: 20),
SizedBox(
width: MediaQuery.of(context).size.width * 0.8,
height: 160,
child: BarChart(
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),
],
),
],
),
),
child: buildBarChart(context),
),
],
);
}
}
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