From 8ce6d7cde7ec75942b88b21ba1c620e5b29814e1 Mon Sep 17 00:00:00 2001
From: Sara <sarasdj@stud.ntnu.no>
Date: Thu, 4 Apr 2024 18:48:15 +0200
Subject: [PATCH] update: stacked bar chart, bit wacky looking
---
app/lib/widgets/bar_graph/bar_data.dart | 163 ++++++++++++++++++++++++
app/lib/widgets/stat_charts.dart | 10 +-
2 files changed, 168 insertions(+), 5 deletions(-)
create mode 100644 app/lib/widgets/bar_graph/bar_data.dart
diff --git a/app/lib/widgets/bar_graph/bar_data.dart b/app/lib/widgets/bar_graph/bar_data.dart
new file mode 100644
index 00000000..ccc9e890
--- /dev/null
+++ b/app/lib/widgets/bar_graph/bar_data.dart
@@ -0,0 +1,163 @@
+import 'package:flutter/material.dart';
+import 'package:fl_chart/fl_chart.dart';
+
+class BarData extends StatefulWidget {
+ const BarData({super.key});
+
+ @override
+ State<StatefulWidget> createState() => _BarDataState();
+}
+
+
+class _BarDataState extends State<BarData> {
+ static const double barWidth = 18;
+
+ // NB should be rounded to two decimals in server
+ // NB should be allocated values dynamically
+ // Bar items show data for 10 previous days
+ static const bars = <int, List<double>>{
+ 0: [1.5, 4, 2.5],
+ 1: [1.8, 5.6, 3],
+ 2: [1.5, 3.1, 3.5],
+ 3: [1.5, 1.5, 4],
+ 4: [2, 2, 5],
+ 5: [1.2, 1.5, 4.3],
+ 6: [1.2, 4.8, 5],
+ 7: [1.2, 5.5, 4],
+ 8: [1.2, 3.2, 2],
+ 9: [1.2, 1, 1.5],
+ };
+ int touchedIndex = -1;
+
+ @override
+ void initState() {
+ super.initState();
+ }
+
+ BarChartGroupData generateGroup(
+ int x,
+ double value1,
+ double value2,
+ double value3,
+ ) {
+ final sum = value1 + value2 + value3;
+ final isTouched = touchedIndex == x;
+ return BarChartGroupData(
+ x: x,
+ showingTooltipIndicators: isTouched ? [0] : [],
+ barRods: [
+ BarChartRodData(
+ y: sum,
+ width: barWidth,
+ borderRadius: const BorderRadius.only(
+ topLeft: Radius.circular(6),
+ topRight: Radius.circular(6),
+ ),
+ rodStackItems: [
+ BarChartRodStackItem(
+ 0,
+ value1,
+ const Color(0xFF13dbff),
+ ),
+ BarChartRodStackItem(
+ value1,
+ value1 + value2,
+ const Color(0xFF000085),
+ ),
+ BarChartRodStackItem(
+ value1 + value2,
+ value1 + value2 + value3,
+ Colors.white60,
+ ),
+ ],
+ ),
+ ],
+ );
+ }
+
+ Widget _buildLegendItem(Color color, String text) {
+ return Row(
+ children: [
+ Container(
+ width: 20,
+ height: 20,
+ decoration: BoxDecoration(
+ color: color,
+ shape: BoxShape.circle,
+ ),
+ ),
+ const SizedBox(width: 8),
+ Text(
+ text,
+ style: const TextStyle(
+ fontSize: 14,
+ color: Colors.white,
+ ),
+ ),
+ ],
+ );
+ }
+
+
+ @override
+ Widget build(BuildContext context) {
+ return Padding(
+ padding: const EdgeInsets.only(top: 16),
+ child: Column(
+ children: [
+ BarChart(
+ BarChartData(
+ alignment: BarChartAlignment.center,
+ maxY: 12,
+ minY: 0,
+ titlesData: FlTitlesData(
+ show: true,
+ bottomTitles: SideTitles(
+ showTitles: true,
+ reservedSize: 5,
+ getTextStyles: (value) => const TextStyle(color: Colors.white60),
+ ),
+ leftTitles: SideTitles(
+ showTitles: true,
+ getTextStyles: (value) => const TextStyle(color: Colors.white60),
+ margin: 10,
+ reservedSize: 30,
+ interval: 2,
+ ),
+ ),
+ groupsSpace: 12,
+ gridData: FlGridData(
+ show: true,
+ ),
+ borderData: FlBorderData(
+ show: false,
+ ),
+ barGroups: bars.entries
+ .map(
+ (e) => generateGroup(
+ e.key,
+ e.value[0],
+ e.value[1],
+ e.value[2],
+ ),
+ ).toList(),
+ ),
+ ),
+ Padding( // Legend items
+ padding: const EdgeInsets.only(top: 16),
+ child: Center(
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+ children: [
+ _buildLegendItem(Colors.white60, "Snow"),
+ _buildLegendItem(const Color(0xFF13dbff), "Slush ice"),
+ _buildLegendItem(const Color(0xFF000085), "Black ice"),
+ ],
+ ),
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+}
\ No newline at end of file
diff --git a/app/lib/widgets/stat_charts.dart b/app/lib/widgets/stat_charts.dart
index 8d480da1..b335a87d 100644
--- a/app/lib/widgets/stat_charts.dart
+++ b/app/lib/widgets/stat_charts.dart
@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
+import 'bar_graph/bar_data.dart';
class StatCharts extends StatelessWidget {
const StatCharts({Key? key}) : super(key: key);
@@ -131,16 +132,15 @@ class StatCharts extends StatelessWidget {
Widget build(BuildContext context) {
return Column(
children: [
- SizedBox(
+ /*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: buildBarChart(context),
+ width: MediaQuery.of(context).size.width,
+ child: const BarData(),
),
],
);
--
GitLab