Stub out bandwidth chart

README.md

@@ -9,7 +9,7 @@ This repository contains a cross-platform GUI for controlling and observing stat
 To build, you'll need a handful of `Qt` packages available. On `Ubuntu` or similar, you can install these with:
 
 ```bash
-sudo apt install qt5-default qtdeclarative5-dev qml-module-qtquick-controls qml-module-qtquick-controls2 qml-module-qtquick-dialogs qml-module-qt-labs-platform
+sudo apt install qt5-default qtdeclarative5-dev qml-module-qtquick-controls qml-module-qtquick-controls2 qml-module-qtquick-dialogs qml-module-qt-labs-platform qml-module-qtcharts
 ```
 
 Then build and run:

lokicp.pro

@@ -1,6 +1,6 @@
 TEMPLATE = app
 
-QT += qml quick widgets
+QT += qml quick widgets charts
 
 CONFIG += c++14
 

res/qml/ControlPanel.qml

@@ -49,13 +49,6 @@ ColumnLayout {
         routers: numRoutersKnown
     }
 
-    // placeholder for performance graph panel
-    Rectangle {
-        color: Style.panelBackgroundColor
-        Layout.preferredHeight: 159
-        Layout.preferredWidth: Style.appWidth
-    }
-
     // usage
     UsagePanel {
         down: downloadUsage

res/qml/UsagePanel.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.0
 import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.0
+import QtCharts 2.0
 
 import QClipboard 1.0
 import "."
@@ -9,7 +10,17 @@ Container {
     property var down: 0
     property var up: 0
 
-    Layout.preferredHeight: 79
+    onUpChanged: function() {
+        // console.log("new 'up' value: "+ up);
+        // TODO: update chart data
+    }
+
+    onDownChanged: function() {
+        // console.log("new 'down' value: "+ down);
+        // TODO: update chart data
+    }
+
+    Layout.preferredHeight: 249
     Layout.preferredWidth: Style.appWidth
 
     contentItem: Rectangle {
@@ -75,5 +86,81 @@ Container {
         font.pointSize: Style.weakTextSize
     }
 
+    ChartView {
+        id: chart
+        title: ""
+        // anchors.fill:  parent
+        // anchors.margins: 0
+        antialiasing: true
+        backgroundColor: Style.panelBackgroundColor
+
+        legend.visible: false
+
+        // these weird numbers come from an attempt to work around ChartView's
+        // nasty permanent margins
+        x: -10
+        y: 70
+        width: Style.appWidth + 20
+        height: 189
+
+        ValueAxis {
+            id: xAxis
+            min: 0
+            max: 9
+            labelFormat: "%d"
+            labelsVisible: false
+            gridVisible: false
+            titleVisible: false
+        }
+
+        ValueAxis {
+            id: yAxis
+            min: 0
+            max: 10
+            gridVisible: false
+            tickCount: 2
+            labelFormat: "%d"
+            titleVisible: false
+        }
+
+        AreaSeries {
+            id: "txData"
+            axisX: xAxis
+            axisY: yAxis
+            opacity: 0.8
+            upperSeries: LineSeries {
+                XYPoint { x: 0; y: 4 }
+                XYPoint { x: 1; y: 8 }
+                XYPoint { x: 2; y: 9 }
+                XYPoint { x: 3; y: 2 }
+                XYPoint { x: 4; y: 7 }
+                XYPoint { x: 5; y: 8 }
+                XYPoint { x: 6; y: 0 }
+                XYPoint { x: 7; y: 1 }
+                XYPoint { x: 8; y: 3 }
+                XYPoint { x: 9; y: 2 }
+            }
+
+        }
+
+        AreaSeries {
+            id: "rxData"
+            axisX: xAxis
+            axisY: yAxis
+            opacity: 0.8
+            upperSeries: LineSeries {
+                XYPoint { x: 0; y: 2 }
+                XYPoint { x: 1; y: 4 }
+                XYPoint { x: 2; y: 7 }
+                XYPoint { x: 3; y: 9 }
+                XYPoint { x: 4; y: 6 }
+                XYPoint { x: 5; y: 2 }
+                XYPoint { x: 6; y: 1 }
+                XYPoint { x: 7; y: 0 }
+                XYPoint { x: 8; y: 5 }
+                XYPoint { x: 9; y: 4 }
+            }
+        }
+    }
 }