qml: render fee histogram as a HSV gradient over next 25 blocks

electrum/gui/qml/components/NetworkOverview.qml

@@ -79,8 +79,76 @@ Pane {
                     text: qsTr('Network fees:');
                     color: Material.accentColor
                 }
+                Item {
+                    id: histogramRoot
+                    Layout.fillWidth: true
+                    implicitHeight: histogramLayout.height
+
+                    ColumnLayout {
+                        id: histogramLayout
+                        width: parent.width
+                        spacing: 0
+                        RowLayout {
+                            Layout.fillWidth: true
+                            height: 28
+                            spacing: 0
+                            Repeater {
+                                model: Network.feeHistogram.histogram
+                                Rectangle {
+                                    Layout.preferredWidth: 300 * (modelData[1] / Network.feeHistogram.total)
+                                    Layout.fillWidth: true
+                                    height: parent.height
+                                    color: Qt.hsva(2/3-(2/3*(Math.log(modelData[0])/Math.log(Math.max(25, Network.feeHistogram.max_fee)))), 0.8, 1, 1)
+                                }
+                            }
+                        }
+                        RowLayout {
+                            Layout.fillWidth: true
+                            height: 3
+                            spacing: 0
+
+                            Repeater {
+                                model: Network.feeHistogram.total / 1000000
+                                RowLayout {
+                                    height: parent.height
+                                    spacing: 0
+                                    Rectangle {
+                                        Layout.preferredWidth: 1
+                                        Layout.fillWidth: false
+                                        height: parent.height
+                                        width: 1
+                                        color: 'white'
+                                    }
+                                    Item {
+                                        Layout.fillWidth: true
+                                        Layout.preferredHeight: parent.height
+                                    }
+                                }
+                            }
+                            Rectangle {
+                                Layout.preferredWidth: 1
+                                Layout.fillWidth: false
+                                height: parent.height
+                                width: 1
+                                color: 'white'
+                            }
+                        }
+                        RowLayout {
+                            Layout.fillWidth: true
                             Label {
-                    id: feeHistogram
+                                text: '< ' + qsTr('%1 sat/vB').arg(Math.ceil(Network.feeHistogram.max_fee))
+                                font.pixelSize: constants.fontSizeXSmall
+                                color: Material.accentColor
+                            }
+                            Label {
+                                Layout.fillWidth: true
+                                horizontalAlignment: Text.AlignRight
+                                text: qsTr('%1 sat/vB').arg(Math.floor(Network.feeHistogram.min_fee)) + ' >'
+                                font.pixelSize: constants.fontSizeXSmall
+                                color: Material.accentColor
+                            }
+                        }
+                    }
                 }
 
                 Heading {
@@ -191,21 +259,6 @@ Pane {
         }
     }
 
-    function setFeeHistogram() {
-        var txt = ''
-        Network.feeHistogram.forEach(function(item) {
-            txt = txt + item[0] + ': ' + item[1] + '\n';
-        })
-        feeHistogram.text = txt.trim()
-    }
-
-    Connections {
-        target: Network
-        function onFeeHistogramUpdated() {
-            setFeeHistogram()
-        }
-    }
-
     Component {
         id: serverConfig
         ServerConfigDialog {
@@ -219,6 +272,4 @@ Pane {
             onClosed: destroy()
         }
     }
-
-    Component.onCompleted: setFeeHistogram()
 }

electrum/gui/qml/qenetwork.py

@@ -87,8 +87,30 @@ class QENetwork(QObject, QtEventListener):
 
     @event_listener
     def on_event_fee_histogram(self, histogram):
-        self._logger.debug('fee histogram updated')
-        self._fee_histogram = histogram if histogram else []
+        self._logger.debug(f'fee histogram updated: {repr(histogram)}')
+        if histogram is None:
+            histogram = []
+        self.update_histogram(histogram)
+
+    def update_histogram(self, histogram):
+        # cap the histogram to a limited number of megabytes
+        bytes_limit=25*1000*1000
+        bytes_current = 0
+        capped_histogram = []
+        for item in sorted(histogram, key=lambda x: x[0], reverse=True):
+            if bytes_current >= bytes_limit:
+                break
+            slot = min(item[1], bytes_limit-bytes_current)
+            bytes_current += slot
+            capped_histogram.append([item[0], slot])
+
+        # add clamping attributes for the GUI
+        self._fee_histogram = {
+            'histogram': capped_histogram,
+            'total': bytes_current,
+            'min_fee': capped_histogram[-1][0],
+            'max_fee': capped_histogram[0][0]
+        }
         self.feeHistogramUpdated.emit()
 
     @event_listener

electrum/gui/qml/qeserverlistmodel.py

@@ -132,7 +132,7 @@ class QEServerListModel(QAbstractListModel, QtEventListener):
                 server['name'] = s.net_addr_str()
                 server['address'] = server['name']
 
-                self._logger.debug(f'adding server: {repr(server)}')
+                # self._logger.debug(f'adding server: {repr(server)}')
                 servers.append(server)
 
         self.beginInsertRows(QModelIndex(), 0, len(servers) - 1)