Added data tile

Amends :
- + documentation

.flutter-plugins-dependencies

-{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"flutter_blue","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\flutter_blue-0.7.2\\\\","dependencies":[]},{"name":"geolocator","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\geolocator-5.2.1\\\\","dependencies":["google_api_availability","location_permissions"]},{"name":"google_api_availability","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\google_api_availability-2.0.2\\\\","dependencies":[]},{"name":"location_permissions","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\location_permissions-2.0.4+1\\\\","dependencies":[]},{"name":"path_provider","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\path_provider-1.6.0\\\\","dependencies":[]},{"name":"permission_handler","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\permission_handler-4.2.0+hotfix.3\\\\","dependencies":[]},{"name":"shared_preferences","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\shared_preferences-0.5.7+2\\\\","dependencies":[]},{"name":"sqflite","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\sqflite-1.2.0\\\\","dependencies":[]}],"android":[{"name":"flutter_blue","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\flutter_blue-0.7.2\\\\","dependencies":[]},{"name":"geolocator","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\geolocator-5.2.1\\\\","dependencies":["google_api_availability","location_permissions"]},{"name":"google_api_availability","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\google_api_availability-2.0.2\\\\","dependencies":[]},{"name":"location_permissions","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\location_permissions-2.0.4+1\\\\","dependencies":[]},{"name":"path_provider","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\path_provider-1.6.0\\\\","dependencies":[]},{"name":"permission_handler","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\permission_handler-4.2.0+hotfix.3\\\\","dependencies":[]},{"name":"shared_preferences","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\shared_preferences-0.5.7+2\\\\","dependencies":[]},{"name":"sqflite","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\sqflite-1.2.0\\\\","dependencies":[]}],"macos":[{"name":"shared_preferences_macos","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\shared_preferences_macos-0.0.1+8\\\\","dependencies":[]},{"name":"sqflite","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\sqflite-1.2.0\\\\","dependencies":[]}],"linux":[],"windows":[],"web":[{"name":"shared_preferences_web","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\shared_preferences_web-0.1.2+5\\\\","dependencies":[]}]},"dependencyGraph":[{"name":"flutter_blue","dependencies":[]},{"name":"geolocator","dependencies":["google_api_availability","location_permissions"]},{"name":"google_api_availability","dependencies":[]},{"name":"location_permissions","dependencies":[]},{"name":"path_provider","dependencies":[]},{"name":"permission_handler","dependencies":[]},{"name":"shared_preferences","dependencies":["shared_preferences_macos","shared_preferences_web"]},{"name":"shared_preferences_macos","dependencies":[]},{"name":"shared_preferences_web","dependencies":[]},{"name":"sqflite","dependencies":[]}],"date_created":"2020-07-21 17:28:31.765660","version":"1.19.0-2.0.pre.49"}
+{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"flutter_blue","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\flutter_blue-0.7.2\\\\","dependencies":[]},{"name":"geolocator","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\geolocator-5.2.1\\\\","dependencies":["google_api_availability","location_permissions"]},{"name":"google_api_availability","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\google_api_availability-2.0.2\\\\","dependencies":[]},{"name":"location_permissions","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\location_permissions-2.0.4+1\\\\","dependencies":[]},{"name":"path_provider","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\path_provider-1.6.0\\\\","dependencies":[]},{"name":"permission_handler","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\permission_handler-4.2.0+hotfix.3\\\\","dependencies":[]},{"name":"shared_preferences","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\shared_preferences-0.5.7+2\\\\","dependencies":[]},{"name":"sqflite","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\sqflite-1.2.0\\\\","dependencies":[]}],"android":[{"name":"flutter_blue","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\flutter_blue-0.7.2\\\\","dependencies":[]},{"name":"geolocator","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\geolocator-5.2.1\\\\","dependencies":["google_api_availability","location_permissions"]},{"name":"google_api_availability","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\google_api_availability-2.0.2\\\\","dependencies":[]},{"name":"location_permissions","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\location_permissions-2.0.4+1\\\\","dependencies":[]},{"name":"path_provider","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\path_provider-1.6.0\\\\","dependencies":[]},{"name":"permission_handler","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\permission_handler-4.2.0+hotfix.3\\\\","dependencies":[]},{"name":"shared_preferences","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\shared_preferences-0.5.7+2\\\\","dependencies":[]},{"name":"sqflite","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\sqflite-1.2.0\\\\","dependencies":[]}],"macos":[{"name":"shared_preferences_macos","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\shared_preferences_macos-0.0.1+8\\\\","dependencies":[]},{"name":"sqflite","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\sqflite-1.2.0\\\\","dependencies":[]}],"linux":[],"windows":[],"web":[{"name":"shared_preferences_web","path":"C:\\\\src\\\\flutter\\\\.pub-cache\\\\hosted\\\\pub.dartlang.org\\\\shared_preferences_web-0.1.2+5\\\\","dependencies":[]}]},"dependencyGraph":[{"name":"flutter_blue","dependencies":[]},{"name":"geolocator","dependencies":["google_api_availability","location_permissions"]},{"name":"google_api_availability","dependencies":[]},{"name":"location_permissions","dependencies":[]},{"name":"path_provider","dependencies":[]},{"name":"permission_handler","dependencies":[]},{"name":"shared_preferences","dependencies":["shared_preferences_macos","shared_preferences_web"]},{"name":"shared_preferences_macos","dependencies":[]},{"name":"shared_preferences_web","dependencies":[]},{"name":"sqflite","dependencies":[]}],"date_created":"2020-07-27 12:45:17.444374","version":"1.19.0-2.0.pre.49"}
\ No newline at end of file

lib/logic/controllers/map_display_controller.dart

@@ -9,6 +9,7 @@ import 'package:logair_application/logic/handlers/network_handler.dart';
 import 'package:logair_application/logic/data_header.dart';
 import 'package:logair_application/logic/data_packet.dart';
 import 'package:logair_application/logic/handlers/position_handler.dart';
+import 'package:logair_application/utils/pm_symbol.dart';
 
 /// The [MapDisplayController] is a [Singleton] that handles the mapping of information.
 class MapDisplayController {
@@ -33,15 +34,12 @@ class MapDisplayController {
   /// [Marker] representing the user's current [Position].
   Marker _marker;
   
-  HashMap<String, List<CircleMarker>> _pmMarkers = HashMap.from({'PM1': <CircleMarker>[], 'PM2_5': <CircleMarker>[], 'PM4': <CircleMarker>[], 'PM10': <CircleMarker>[]});
-  
-  /// [List] of [Color]s to be smudged as a gradient and cherry picked based on a value (lerped).
-  /// @see [_colorizeValue]
-  List<Color> _colors = [ Color.fromARGB(0xff, 0, 0xcc, 0), Color.fromARGB(0xff, 0, 0xcc, 0), Color.fromARGB(0xff, 0xff, 0xff, 0), Color.fromARGB(0xff, 0xeb, 0x8a, 0x14), Color.fromARGB(0xff, 0xff, 0, 0), Color.fromARGB(0xff, 0xa1, 0x06, 0x49), Color.fromARGB(0xff, 0x7e, 0, 0x23) ];
-
-  /// [List] of stops for the lerping to occur.
-  /// @see [_colorizeValue]
-  List<double> _stops = [0, 12, 35.4, 55.4, 150.4, 250.4, 500.4];
+  HashMap<PMSymbol, List<CircleMarker>> _pmMarkers = HashMap.from({
+    PMSymbol.PM1: <CircleMarker>[],
+    PMSymbol.PM2_5: <CircleMarker>[],
+    PMSymbol.PM4: <CircleMarker>[],
+    PMSymbol.PM10: <CircleMarker>[]}
+  );
 
   /// [Singleton]() instantiation factory.
   factory MapDisplayController() => _singleton;
@@ -56,13 +54,13 @@ class MapDisplayController {
   final Distance _distance = new Distance();
 
   // TODO Faster to rebuild than to store ?
-  List<CircleMarker> pmMarkers() => this._pmMarkers[_pmKey[_pmKeyIndex]];
+  List<CircleMarker> pmMarkers() => this._pmMarkers[_pmKey];
 
-  List<String> _pmKey = ["PM1", "PM2_5", "PM4", "PM10"];
+  List<String> _pmKey = PMSymbol.list.map((e) => e.key);
 
-  int _pmKeyIndex = 1;
+  PMSymbol _pmKeyIndex = PMSymbol.PM2_5;
 
-  void setPMKeyIndex(int value) { print('PM Index $value gives ${_pmKey[value]}'); this._pmKeyIndex = value; }
+  void setPMKeyIndex(PMSymbol value) { print('PM Index $value gives ${value.key}'); this._pmKeyIndex = value; }
   
   /// This function is executed on first initialization of the [MapDisplayController]
   /// TODO: Throttle to 1 in 5 updates for efficiency ?
@@ -165,21 +163,6 @@ class MapDisplayController {
     }
   }
 
-  /// Gets the lerped [Color] value at a for a given PM value.
-  Color _colorizeValue(double pmValue) {
-    for (int stop = 0; stop < _stops.length - 1; stop++) {
-      final double left = _stops[stop], right = _stops[stop + 1];
-      final Color colorLeft = _colors[stop], colorRight = _colors[stop + 1];
-      if (pmValue <= left)
-        return colorLeft;
-      else if (pmValue < right) {
-        final section = (pmValue - left) / (right - left);
-        return Color.lerp(colorLeft, colorRight, section);
-      }
-    }
-    return _colors.last;
-  }
-
   /// Wrapper function to build a [Marker], with default values.
   Marker _buildLocationMarker(LatLng position) => Marker(
     width: 20.0,
@@ -195,7 +178,7 @@ class MapDisplayController {
     return CircleMarker(
       radius: 8,
       point: position,
-      color: _colorizeValue(pmValue).withAlpha(0xff),
+      color: this._pmKeyIndex.colorizeValue(pmValue).withAlpha(0xff),
       borderStrokeWidth: 1,
       borderColor: Colors.blue[300]
     );

lib/logic/handlers/database_handler.dart

@@ -116,6 +116,8 @@ class DatabaseHandler {
     return List.generate(data.length, (i) => Tuple2(data[i]['id'], DataPacket.fromMappedData(data[i])));
   }
 
+  // TODO Document
+  // TODO Fix not being set correctly
   Future<void> setExported(List<int> ids) async {
     final Database database = await _database;
     int count = await database.update(

lib/logic/handlers/network_handler.dart

@@ -62,7 +62,7 @@ class NetworkHandler {
       body: json.encode(postData)
     )
     /// On error, the error should be ignored and not break the thread.
-    .catchError((e) => print('COULDN\'T CONNECT'));
+    .catchError((e) => print("COULDN'T CONNECT"));
 
     /// If the response is defined as an instance of [http.Response], check it's status code and remove all of the packets from the log.
     if (response != null && response.statusCode == 200) {
@@ -99,4 +99,6 @@ class NetworkHandler {
       await Future.delayed(Duration(seconds: 2));
     }
   }
+
+  //TODO Generate a stream from a place for Place display
 }
\ No newline at end of file

lib/ui/base/battery_visualizer.dart

@@ -3,15 +3,13 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:logair_application/services/battery_service.dart';
 import 'package:logair_application/ui/base/custom_paint.dart';
-import 'dart:math';
 
 class BatteryVisualizerWidget extends StatelessWidget {
   BatteryVisualizerWidget(this.isLeft, {Key key}) : super(key: key);
 
   Stream<int> getBatteryLevel2() async* {
-    Random r = new Random();
     while (true) {
-      yield 100; //r.nextInt(100);
+      yield 100;
       await Future.delayed(Duration(seconds: 10));
     }
   }

lib/ui/components/data_tile.dart

+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:logair_application/logic/data_packet.dart';
+import 'package:logair_application/utils/pm_symbol.dart';
+
+//TODO Add weather ?
+/// Widget that displays the data specific to a specific place, depending on the stream provided.
+/// Data displayed is PM1, PM2.5, PM4, PM10, Temperature, Pressure, Relative Humidity.
+/// 
+/// Usage example :
+/// ```dart
+/// DataTile(StreamHandler().someStream<DataPacket>())
+/// ```
+class DataTile extends StatefulWidget {
+  /// [Stream] of [DataPacket] that tracks the newly received packets.
+  final Stream<DataPacket> stream;
+
+  DataTile(this.stream, {Key key}) : super(key: key);
+  
+  /// Provides [stream] to the [_DataTileState]
+  @override
+  State<DataTile> createState() => _DataTileState(this.stream);
+}
+
+/// [State] of a [DataTile] displaying [stream] specific data.
+class _DataTileState extends State<DataTile> {
+  /// [Stream] of [DataPacket] that tracks the newly received packets.
+  final Stream<DataPacket> stream;
+
+  /// Value of the PM1 metric.
+  double _pm1 = -1;
+
+  /// Value of the PM2.5 metric.
+  double _pm2_5 = -1;
+
+  /// Value of the PM4 metric.
+  double _pm4 = -1;
+
+  /// Value of the PM10 metric.
+  double _pm10 = -1;
+
+  /// Value of the temperature metric.
+  double _temperature = -1;
+
+  /// Value of the pressure metric.
+  double _pressure = -1;
+
+  /// Value of the relative humidity metric.
+  double _relativeHumidity = -1;
+
+  /// Creates a [_DataTileState] that listens to [stream] and changes the state whenever a new [DataPacket] is available.
+  _DataTileState(this.stream, {Key key}) {
+    stream.listen((DataPacket newPacket) {
+      // Checks that the packet contains actual data.
+      if (newPacket != null)
+        setState(() {
+          _pm1 = newPacket.pm1();
+          _pm2_5 = newPacket.pm2_5();
+          _pm4 = newPacket.pm4();
+          _pm10 = newPacket.pm10();
+          _temperature = newPacket.temperature();
+          _pressure = newPacket.pressure();
+          _relativeHumidity = newPacket.relativeHumidity();
+        });
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // TODO Doc
+    Widget _buildPMDataCell(PMSymbol cellTitle, double value) => Expanded(
+      flex: 1,
+      child: Container(
+        color: (value != -1 && value != null) ? cellTitle.colorizeValue(value) : Colors.white,
+        margin: EdgeInsets.all(2),
+        padding: EdgeInsets.symmetric(vertical: 3),
+        child: Column(
+          children: [
+            Text(
+              cellTitle.key,
+              style: TextStyle(
+                fontSize: 12
+              ),
+            ),
+            Text(
+              (value != -1 && value != null) ? value.toString() : 'N/A',
+              style: TextStyle(
+                fontSize: 14,
+                fontWeight: FontWeight.bold
+              ),
+            )
+          ]
+        )
+      )
+    );
+
+    // TODO Doc
+    Widget _buildEnvironmentalDataCellHeaders(String title) => Expanded(
+      flex: 1,
+      child: Container(
+        margin: EdgeInsets.all(2),
+        padding: EdgeInsets.symmetric(vertical: 3),
+        alignment: Alignment.center,
+        child: Text(
+          title,
+          style: TextStyle(
+            fontSize: 12,
+          ),
+        ),
+      )
+    );
+
+    // TODO Doc
+    Widget _buildEnvironmentalDataCells(double value) => Expanded(
+      flex: 1,
+      child: Container(
+        color: Colors.grey,
+        alignment: Alignment.center,
+        margin: EdgeInsets.all(2),
+        padding: EdgeInsets.symmetric(vertical: 3),
+        child: Text(
+          (value != -1 && value != null) ? value.toString() : 'N/A',
+          style: TextStyle(
+            fontSize: 14,
+            fontWeight: FontWeight.bold
+          ),
+        )
+      )
+    );
+
+    return Container(
+      margin: EdgeInsets.symmetric(horizontal: 3),
+      child: Column(
+        children: [
+          Text("Area Title"),
+          Row(
+            children: [
+              Expanded(
+                flex: 1,
+                child: Column(
+                  children: [
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceAround,
+                      crossAxisAlignment: CrossAxisAlignment.center,
+                      children: [
+                        _buildPMDataCell(PMSymbol.PM1, _pm1),
+                        _buildPMDataCell(PMSymbol.PM2_5, _pm2_5),
+                      ],
+                    ),
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceAround,
+                      crossAxisAlignment: CrossAxisAlignment.center,
+                      children: [
+                        _buildPMDataCell(PMSymbol.PM4, _pm4),
+                        _buildPMDataCell(PMSymbol.PM10, _pm10),
+                      ],
+                    ),
+                  ],
+                ),
+              ),
+              Expanded(
+                flex: 2,
+                child: Column(
+                  children: [
+                    Row(
+                      mainAxisSize: MainAxisSize.max,
+                      children: [
+                        _buildEnvironmentalDataCellHeaders('Temperature'),
+                        _buildEnvironmentalDataCellHeaders('Pressure'),
+                        _buildEnvironmentalDataCellHeaders('Relative\nHumidity'),
+                      ],
+                    ),
+                    Row(
+                      mainAxisSize: MainAxisSize.max,
+                      children: [
+                        _buildEnvironmentalDataCells(_temperature),
+                        _buildEnvironmentalDataCells(_pressure),
+                        _buildEnvironmentalDataCells(_relativeHumidity),
+                      ],
+                    ),
+                  ]
+                ),
+              )
+            ],
+          )
+        ],
+      ),
+    );
+  }
+}

lib/ui/components/graph/graph.dart

 
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
-import 'package:logair_application/logic/handlers/database_handler.dart';
 import 'package:logair_application/ui/components/graph/graph_colors.dart';
 import 'package:logair_application/ui/components/graph/graph_controller.dart';
 import 'package:logair_application/ui/components/graph/indicator.dart';
 
 /// WIP
-/// TODO Fix display (statefulness ? Yes)
-/// TODO Clear FL Spots
+/// TODO Add axis titles
 /// This graph should display the average quality of the air in 5 second increments.
 class Graph extends StatefulWidget {
   Graph({Key key}) : super(key: key);
 
   @override
-  State<StatefulWidget> createState() => _GraphState();
+  State<Graph> createState() => _GraphState();
 }
 
 class _GraphState extends State<Graph> {
-
   _GraphState({Key key}) {
     GraphController().getGraphData().listen((Map<String, dynamic> newData) {
       if (this.mounted) {

lib/ui/components/graph/graph_controller.dart

 import 'package:fl_chart/fl_chart.dart';
 import 'package:logair_application/logic/handlers/database_handler.dart';
+import 'package:logair_application/ui/data_widget.dart';
 
+/// This Controller type class serves to remove the data aspect of the [LineChart] from Flutter's build tree,
+/// therefore reducing memory usage to paint the graph when cycling back to the [DataWidget]..
+/// Data is displayed as 4 lines on a (x: Time, y: PM value) graph, with 2 minutes (approx. 24 averaged points) on x and an auto-scaled y axis (0, max)
 class GraphController {
-  
+  /// [GraphController] factory
   factory GraphController() => _singleton;
 
   GraphController._internal() {
+    /// Every 5 seconds, averaged values are taken from the database and streamed.
+    /// This listener appends the data to the storage.
     DatabaseHandler().getLatest().listen((newData) {
       this.start = this.start ?? DateTime.now().millisecondsSinceEpoch * 1.0;
       this.now = (DateTime.now().millisecondsSinceEpoch - this.start) / 1000;
-      this.max = [getMax(spotsPM1), getMax(spotsPM2_5), getMax(spotsPM4), getMax(spotsPM10)].reduce((curr, next) => curr > next? curr: next);
+      // Get max y value to avoid out of bounding on y-axis
+      this.max = [getMax(spotsPM1), getMax(spotsPM2_5), getMax(spotsPM4), getMax(spotsPM10)]
+        .reduce((curr, next) => curr > next ? curr : next);
+      
+      // If actual data was acquired from the database.
       if (newData['start'] != null) {
         spotsPM1 = appendDataPoint(this.now, newData['pm_1'], spotsPM1);
         spotsPM2_5 = appendDataPoint(this.now, newData['pm_2_5'], spotsPM2_5);
@@ -19,33 +29,50 @@ class GraphController {
     });
   }
 
+  /// Instantiates the Singleton.
   static final GraphController _singleton = new GraphController._internal();
 
+  /// List of [FlSpot] for PM1 values.
   static List<FlSpot> spotsPM1 = [FlSpot(0, 0)];
+  
+  /// List of [FlSpot] for PM2.5 values.
   static List<FlSpot> spotsPM2_5 = [FlSpot(0, 0)];
+  
+  /// List of [FlSpot] for PM4 values.
   static List<FlSpot> spotsPM4 = [FlSpot(0, 0)];
+
+  /// List of [FlSpot] for PM10 values.
   static List<FlSpot> spotsPM10 = [FlSpot(0, 0)];
 
+  /// Current maximum y-axis value.
   double max;
+
+  /// Seconds elapsed since start of acquisition.
   double now;
+
+  /// Timestamp of the first datapoint for this instance.
   double start;
-  bool _displaying = false;
 
+  /// Add a data point to the given collection ([currentData]).
+  /// 
+  /// Returns the updated collection with the added [FlSpot] (x: [timestamp], y: [datapoint]) if [datapoint] is not null.
   List<FlSpot> appendDataPoint(double timestamp, double datapoint, List<FlSpot> currentData) {
     List<FlSpot> data = currentData.where((element) => true).toList();
-    if (datapoint != null)
+    if (datapoint != null) {
+      // Remove the [0, 0] point, to clean the graph's initial area, but only if an additional point can be added.
+      if (data.length == 1 && (data[0].x == 0 && data[0].y == 0))
+        data.removeAt(0);
       data.add(FlSpot(timestamp, datapoint));
+    }
     if (data.length > 50)
       data.removeAt(0);
     return data;
   }
 
-  double getMax(List<FlSpot> data) => data.map((point) => point.y).reduce((curr, next) => curr > next? curr: next);
-
-  set displaying(bool isDisplaying) => this._displaying = isDisplaying;
-
-  bool get displaying => this._displaying;
+  /// Get the highest y-value in [data]
+  double getMax(List<FlSpot> data) => data.map((point) => point.y).reduce((curr, next) => curr > next ? curr : next);
 
+  /// References a [Stream] that yields the current graph data every second.
   Stream<Map<String, dynamic>> getGraphData() async* {
     while (true) {
       yield {

lib/ui/data_widget.dart

@@ -5,60 +5,13 @@ import 'package:geolocator/geolocator.dart';
 
 import 'package:logair_application/logic/handlers/data_handler.dart';
 import 'package:logair_application/logic/handlers/position_handler.dart';
-import 'package:logair_application/logic/data_packet.dart';
 import 'package:logair_application/ui/carousel_card.dart';
+import 'package:logair_application/ui/components/data_tile.dart';
 import 'package:logair_application/ui/components/graph/graph.dart';
 
 class DataWidget extends StatelessWidget {
   DataWidget();
 
-  // TODO Remove
-  Text _buildText(String text, {FontWeight weight = FontWeight.normal, double size: 12}) {
-    return Text(
-      text,
-      textAlign: TextAlign.center,
-      style: TextStyle(
-        fontSize: size,
-        fontWeight: weight,
-        decorationStyle: TextDecorationStyle.solid
-      ),
-    );
-  }
-
-  // TODO Remove
-  TableRow _buildRow(List<Widget> children) {
-    return TableRow(
-      children: children.map((x) => Container(decoration: BoxDecoration(border: Border.all(color: Colors.black)), padding: EdgeInsets.symmetric(vertical: 4), child: x)).toList()
-    );
-  }
-
-  // TODO Remove
-  /// Displays packets ungracefully.
-  Widget _buildPacketDisplay(DataPacket packet) {
-    FontWeight b = FontWeight.bold;
-    return Column(
-      children: [
-        Table(
-          children: [
-            _buildRow([_buildText('Temperature', weight: b), _buildText('Pressure', weight: b), _buildText('Relative Humidity', weight: b)]),
-            (packet != null) ?
-            _buildRow([_buildText('${packet.temperature()}'), _buildText('${packet.pressure()}'), _buildText('${packet.relativeHumidity()}')]) :
-            _buildRow([_buildText('N/A'), _buildText('N/A'), _buildText('N/A')]),
-          ]
-        ),
-        Divider(color: Colors.white, height: 4,),
-        Table(
-          children: [
-            _buildRow([_buildText('PM1', weight: b), _buildText('PM2_5', weight: b), _buildText('PM_4', weight: b), _buildText('PM_10', weight: b)]),
-            (packet != null) ?
-            _buildRow([_buildText('${packet.pm1()}'), _buildText('${packet.pm2_5()}'), _buildText('${packet.pm4()}'), _buildText('${packet.pm10()}')]) :
-            _buildRow([_buildText('N/A'), _buildText('N/A'), _buildText('N/A'), _buildText('N/A')]),
-          ],
-        ),
-      ]
-    );
-  }
-
   @override
   Widget build(BuildContext context) {
     Widget widget = Center(
@@ -67,20 +20,39 @@ class DataWidget extends StatelessWidget {
           children: [