Port ExtendedLegend away from deprecated Quick Charts API

The legend has undergone pretty big changes, this should make it display
a lot better.

faces/facepackages/barchart/contents/ui/FullRepresentation.qml

@@ -116,8 +116,7 @@ Faces.SensorFace {
         }
 
         Faces.ExtendedLegend {
-            Layout.fillWidth: root.width < implicitWidth * 1.5
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+            Layout.fillWidth: true
             Layout.fillHeight: true
             Layout.minimumHeight: root.formFactor === Faces.SensorFace.Horizontal
                 || root.formFactor === Faces.SensorFace.Vertical
@@ -127,11 +126,6 @@ Faces.SensorFace {
             chart: compactRepresentation
             sourceModel: root.showLegend ? compactRepresentation.sensorsModel : null
             sensorIds: root.showLegend ? root.controller.lowPrioritySensorIds : []
-            flow: root.width > root.height * 1.5 ? GridLayout.LeftToRight : GridLayout.TopToBottom
-        }
-
-        Item {
-            Layout.fillHeight: true
         }
     }
 }

faces/facepackages/linechart/contents/ui/FullRepresentation.qml

@@ -117,8 +117,7 @@ Faces.SensorFace {
         }
 
         Faces.ExtendedLegend {
-            Layout.fillWidth: root.width < implicitWidth * 1.5
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+            Layout.fillWidth: true
             Layout.fillHeight: true
             Layout.minimumHeight: root.formFactor === Faces.SensorFace.Horizontal
                 || root.formFactor === Faces.SensorFace.Vertical
@@ -128,7 +127,6 @@ Faces.SensorFace {
             chart: compactRepresentation
             sourceModel: root.showLegend ? compactRepresentation.sensorsModel : null
             sensorIds: root.showLegend ? root.controller.lowPrioritySensorIds : []
-            flow: root.width > root.height * 1.5 ? GridLayout.LeftToRight : GridLayout.TopToBottom
         }
     }
 }

faces/facepackages/piechart/contents/ui/FullRepresentation.qml

@@ -68,8 +68,7 @@ Faces.SensorFace {
         }
 
         Faces.ExtendedLegend {
-            Layout.fillWidth: root.width < implicitWidth * 1.5
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+            Layout.fillWidth: true
             Layout.fillHeight: true
             Layout.minimumHeight: root.formFactor === Faces.SensorFace.Horizontal
                 || root.formFactor === Faces.SensorFace.Vertical
@@ -79,11 +78,6 @@ Faces.SensorFace {
             chart: compactRepresentation.chart
             sourceModel: root.showLegend ? compactRepresentation.sensorsModel : null
             sensorIds: root.showLegend ? root.controller.lowPrioritySensorIds : []
-            flow: root.width > root.height * 1.5 ? GridLayout.LeftToRight : GridLayout.TopToBottom
-        }
-
-        Item {
-            Layout.fillHeight: true
         }
     }
 }

faces/import/ExtendedLegend.qml

@@ -58,15 +58,14 @@ ChartsControls.Legend {
      */
     property var colorSource
 
-    flow: GridLayout.TopToBottom
-
     Layout.maximumHeight: implicitHeight
     Layout.maximumWidth: parent.width
 
-    spacing: flow == GridLayout.TopToBottom ? Kirigami.Units.smallSpacing : Kirigami.Units.gridUnit
+    horizontalSpacing: Kirigami.Units.gridUnit
+    verticalSpacing: Kirigami.Units.smallSpacing
+
+    maximumDelegateWidth: Kirigami.Units.gridUnit * 15
 
-    valueVisible: true
-    valueWidth: Kirigami.Units.gridUnit * 2
     formatValue: function(input, index) {
         if (!sourceModel) {
             return input
@@ -98,16 +97,29 @@ ChartsControls.Legend {
         value: "Color"
     }
 
+    maximumValueWidth: function(input, index) {
+        if (!sourceModel) {
+            return -1
+        }
+
+        var unit = sourceModel.data(sourceModel.index(0, index), SensorDataModel.Unit)
+        return Formatter.maximumLength(unit, legend.font)
+    }
+
     Repeater {
         id: sensorsRepeater
         delegate: ChartsControls.LegendDelegate {
             name: sensor.name
             shortName: sensor.shortName
             value: sensor.formattedValue || ""
-            colorVisible: false
 
-            layoutWidth: legend.width
-            valueWidth: Kirigami.Units.gridUnit * 2
+            indicator: Item { }
+
+            maximumValueWidth: legend.maximumValueWidth(sensor.value, index)
+
+            Charts.LegendLayout.minimumWidth: minimumWidth
+            Charts.LegendLayout.preferredWidth: preferredWidth
+            Charts.LegendLayout.maximumWidth: Math.max(legend.maximumDelegateWidth, preferredWidth)
 
             Sensor {
                 id: sensor