Merge PR #959: Fix energy chargs legend opacity when single items are selected

nymea-app/resources.qrc

@@ -256,7 +256,6 @@
         <file>ui/components/NymeaSpinBox.qml</file>
         <file>ui/mainviews/energy/PowerConsumptionBalanceHistory.qml</file>
         <file>ui/mainviews/energy/PowerProductionBalanceHistory.qml</file>
-        <file>ui/mainviews/energy/ConsumersBarChart.qml</file>
         <file>ui/mainviews/energy/ConsumersHistory.qml</file>
         <file>ui/mainviews/energy/PowerBalanceStats.qml</file>
         <file>ui/mainviews/energy/CurrentProductionBalancePieChart.qml</file>

nymea-app/ui/mainviews/energy/ConsumerStats.qml

@@ -336,15 +336,21 @@ StatsBase {
 
                 Repeater {
                     model: root.consumers
-                    delegate: MouseArea {
+                    delegate: Item {
                         id: legendDelegate
                         Layout.fillWidth: true
                         Layout.fillHeight: true
                         readonly property Thing thing: root.consumers.get(index)
-                        onClicked: d.selectThing(thing)
+                        MouseArea {
+                            anchors.fill: parent
+                            anchors.topMargin: -Style.smallMargins
+                            anchors.bottomMargin: -Style.smallMargins
+                            onClicked: d.selectThing(thing)
+                        }
                         Row {
                             anchors.centerIn: parent
                             spacing: Style.smallMargins
+                            opacity: d.selectedThing == null || legendDelegate.thing == d.selectedThing ? 1 : 0.3
                             ColorIcon {
                                 name: app.interfacesToIcon(legendDelegate.thing.thingClass.interfaces)
                                 size: Style.smallIconSize

nymea-app/ui/mainviews/energy/ConsumersBarChart.qml

@@ -1,166 +0,0 @@
-import QtQuick 2.0
-import QtQuick.Layouts 1.2
-import QtQuick.Controls 2.2
-import QtGraphicalEffects 1.0
-import Nymea 1.0
-import "qrc:/ui/components"
-
-Item {
-    id: root
-
-    property EnergyManager energyManager: null
-
-    property ThingsProxy consumers: ThingsProxy {
-        engine: _engine
-        shownInterfaces: ["smartmeterconsumer"]
-    }
-
-    property var colors: null
-
-    property int tickCount: 5
-
-    property int labelsWidth: 40
-
-
-    QtObject {
-        id: d
-        property int topMargin: Style.margins
-        property int bottomMargin: Style.margins
-        property int leftMargin: Style.margins
-        property int rightMargin: Style.margins
-    }
-
-    ColumnLayout {
-        anchors.fill: parent
-        anchors.margins: Style.smallMargins
-        Label {
-            text: qsTr("Consumers")
-            Layout.fillWidth: true
-            horizontalAlignment: Text.AlignHCenter
-        }
-
-        Item {
-            id: valueAxis
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-
-            property double max: Math.ceil(root.energyManager.currentPowerConsumption / 100) * 100
-            Repeater {
-                model: root.tickCount
-                delegate: RowLayout {
-                    width: parent.width - d.leftMargin - d.rightMargin
-                    y: index * ((parent.height - d.topMargin - d.bottomMargin - Style.iconSize - Style.margins) / (root.tickCount - 1)) - height / 2 + d.topMargin
-                    x: d.leftMargin
-                    Label {
-                        property double value: (valueAxis.max - index * (valueAxis.max / (root.tickCount - 1)))
-                        text: (value >= 1000 ? (value / 1000).toFixed(2) : value.toFixed(1)) + (value >= 1000 ? "kW" : "W")
-                        font: Style.extraSmallFont
-                        Layout.preferredWidth: root.labelsWidth
-                    }
-                    Rectangle {
-                        Layout.preferredHeight: 1
-                        Layout.fillWidth: true
-                        color: Style.tileOverlayColor
-                    }
-                }
-            }
-
-            RowLayout {
-                anchors.fill: parent
-                anchors.topMargin: d.topMargin
-                anchors.leftMargin: root.labelsWidth + d.leftMargin
-                anchors.bottomMargin: d.bottomMargin
-                anchors.rightMargin: d.rightMargin
-
-                Repeater {
-                    model: consumers.count + 1
-
-                    delegate: ColumnLayout {
-                        id: consumerDelegate
-                        Layout.fillHeight: true
-                        Layout.preferredWidth: root.width / consumers.count
-                        spacing: Style.margins
-                        property Thing thing: consumers.get(index)
-                        property State currentPowerState: thing ? thing.stateByName("currentPower") : null
-
-                        property double consumption: {
-                            var consumption = 0
-                            if (thing) {
-                                consumption = currentPowerState.value
-                            } else {
-                                consumption = energyManager.currentPowerConsumption
-                                for (var i = 0; i < consumers.count; i++) {
-                                    consumption -= consumers.get(i).stateByName("currentPower").value
-                                }
-                            }
-                            return consumption;
-                        }
-
-                        Item {
-                            Layout.fillHeight: true
-                            Layout.fillWidth: true
-
-                            Rectangle {
-                                id: bar
-                                anchors {
-                                    bottom: parent.bottom
-                                    horizontalCenter: parent.horizontalCenter
-                                    top: parent.top
-                                }
-                                gradient: Gradient {
-                                    GradientStop { position: 1; color: Style.green }
-                                    GradientStop { position: 0.5; color: Style.orange }
-                                    GradientStop { position: 0; color: Style.red }
-                                }
-                                width: 20
-                                visible: false
-                            }
-
-                            Item {
-                                id: barMask
-                                anchors.fill: bar
-                                Rectangle {
-                                    anchors {
-                                        bottom: parent.bottom
-                                        horizontalCenter: parent.horizontalCenter
-                                    }
-                                    width: 20
-                                    Behavior on height { NumberAnimation { duration: Style.slowAnimationDuration; easing.type: Easing.InOutQuad } }
-                                    height: Math.max(1, parent.height * consumerDelegate.consumption / valueAxis.max)
-                                    //                                    visible: false
-                                }
-                            }
-
-
-                            OpacityMask {
-                                anchors.fill: bar
-                                source: bar
-                                maskSource: barMask
-                            }
-
-                            Label {
-                                anchors.bottom: bar.bottom
-                                anchors.left: bar.left
-                                text: consumerDelegate.thing ? consumerDelegate.thing.name : qsTr("Unknown")
-                                transform: Rotation {
-                                    angle: -90
-                                }
-                            }
-
-                        }
-                        Item {
-                            Layout.fillWidth: true
-                            Layout.preferredHeight: Style.iconSize
-
-                            ColorIcon {
-                                anchors.centerIn: parent
-                                name: consumerDelegate.thing ? app.interfacesToIcon(consumerDelegate.thing.thingClass.interfaces) : "energy"
-                                color: root.colors[index % root.colors.length]
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

nymea-app/ui/mainviews/energy/ConsumersHistory.qml

@@ -501,13 +501,18 @@ Item {
 
                 Repeater {
                     model: root.consumers
-                    delegate: MouseArea {
+                    delegate: Item {
                         id: legendDelegate
                         Layout.fillWidth: true
                         Layout.fillHeight: true
                         readonly property Thing thing: root.consumers.get(index)
-                        onClicked: d.selectSeries(consumersRepeater.itemAt(index).series)
                         opacity: d.selectedSeries == null || d.selectedSeries === consumersRepeater.itemAt(index).series ? 1 : 0.3
+                        MouseArea {
+                            anchors.fill: parent
+                            anchors.topMargin: -Style.smallMargins
+                            anchors.bottomMargin: -Style.smallMargins
+                            onClicked: d.selectSeries(consumersRepeater.itemAt(index).series)
+                        }
                         Row {
                             anchors.centerIn: parent
                             spacing: Style.smallMargins

nymea-app/ui/mainviews/energy/PowerBalanceHistory.qml

@@ -514,11 +514,16 @@ Item {
                 height: Style.smallIconSize
                 anchors.margins: Style.margins
 
-                MouseArea {
+                Item {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
-                    onClicked: d.selectSeries(selfProductionConsumptionSeries)
                     opacity: selfProductionConsumptionSeries.opacity
+                    MouseArea {
+                        anchors.fill: parent
+                        anchors.topMargin: -Style.smallMargins
+                        anchors.bottomMargin: -Style.smallMargins
+                        onClicked: d.selectSeries(selfProductionConsumptionSeries)
+                    }
                     Row {
                         anchors.centerIn: parent
                         spacing: Style.smallMargins
@@ -538,11 +543,16 @@ Item {
                     }
                 }
 
-                MouseArea {
+                Item {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
-                    onClicked: d.selectSeries(acquisitionSeries)
                     opacity: acquisitionSeries.opacity
+                    MouseArea {
+                        anchors.fill: parent
+                        anchors.topMargin: -Style.smallMargins
+                        anchors.bottomMargin: -Style.smallMargins
+                        onClicked: d.selectSeries(acquisitionSeries)
+                    }
                     Row {
                         anchors.centerIn: parent
                         spacing: Style.smallMargins
@@ -569,11 +579,16 @@ Item {
                     }
                 }
 
-                MouseArea {
+                Item {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
-                    onClicked: d.selectSeries(returnSeries)
                     opacity: returnSeries.opacity
+                    MouseArea {
+                        anchors.fill: parent
+                        anchors.topMargin: -Style.smallMargins
+                        anchors.bottomMargin: -Style.smallMargins
+                        onClicked: d.selectSeries(returnSeries)
+                    }
                     Row {
                         anchors.centerIn: parent
                         spacing: Style.smallMargins
@@ -600,12 +615,17 @@ Item {
                     }
                 }
 
-                MouseArea {
+                Item {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
                     visible: batteries.count > 0
-                    onClicked: d.selectSeries(toStorageSeries)
                     opacity: toStorageSeries.opacity
+                    MouseArea {
+                        anchors.fill: parent
+                        anchors.topMargin: -Style.smallMargins
+                        anchors.bottomMargin: -Style.smallMargins
+                        onClicked: d.selectSeries(toStorageSeries)
+                    }
                     Row {
                         anchors.centerIn: parent
                         spacing: Style.smallMargins
@@ -632,12 +652,17 @@ Item {
                     }
                 }
 
-                MouseArea {
+                Item {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
                     visible: batteries.count > 0
-                    onClicked: d.selectSeries(fromStorageSeries)
                     opacity: fromStorageSeries.opacity
+                    MouseArea {
+                        anchors.fill: parent
+                        anchors.topMargin: -Style.smallMargins
+                        anchors.bottomMargin: -Style.smallMargins
+                        onClicked: d.selectSeries(fromStorageSeries)
+                    }
                     Row {
                         anchors.centerIn: parent
                         spacing: Style.smallMargins

nymea-app/ui/mainviews/energy/PowerBalanceStats.qml

@@ -299,9 +299,10 @@ StatsBase {
                     BarSet {
                         id: consumptionSet
                         label: qsTr("Consumed")
-                        color: Qt.rgba(Style.blue.r, Style.blue.g, Style.blue.b, d.selectedSet == null || d.selectedSet == consumptionSet ? 1 : 0.3)
+                        color: Qt.rgba(Style.blue.r, Style.blue.g, Style.blue.b, opacity)
                         borderColor: color
                         borderWidth: 0
+                        property real opacity: d.selectedSet == null || d.selectedSet == consumptionSet ? 1 : 0.3
                         values: {
                             var ret = []
                             for (var i = 0; i < d.config.count; i++) {
@@ -313,9 +314,10 @@ StatsBase {
                     BarSet {
                         id: productionSet
                         label: qsTr("Produced")
-                        color: Qt.rgba(Style.green.r, Style.green.g, Style.green.b, d.selectedSet == null || d.selectedSet == productionSet ? 1 : 0.3)
+                        color: Qt.rgba(Style.green.r, Style.green.g, Style.green.b, opacity)
                         borderColor: color
                         borderWidth: 0
+                        property real opacity: d.selectedSet == null || d.selectedSet == productionSet ? 1 : 0.3
                         values: {
                             var ret = []
                             for (var i = 0; i < d.config.count; i++) {
@@ -327,9 +329,10 @@ StatsBase {
                     BarSet {
                         id: acquisitionSet
                         label: qsTr("From grid")
-                        color: Qt.rgba(Style.red.r, Style.red.g, Style.red.b, d.selectedSet == null || d.selectedSet == acquisitionSet ? 1 : 0.3)
+                        color: Qt.rgba(Style.red.r, Style.red.g, Style.red.b, opacity)
                         borderColor: color
                         borderWidth: 0
+                        property real opacity: d.selectedSet == null || d.selectedSet == acquisitionSet ? 1 : 0.3
                         values: {
                             var ret = []
                             for (var i = 0; i < d.config.count; i++) {
@@ -341,9 +344,10 @@ StatsBase {
                     BarSet {
                         id: returnSet
                         label: qsTr("To grid")
-                        color: Qt.rgba(Style.yellow.r, Style.yellow.g, Style.yellow.b, d.selectedSet == null || d.selectedSet == returnSet ? 1 : 0.3)
+                        color: Qt.rgba(Style.yellow.r, Style.yellow.g, Style.yellow.b, opacity)
                         borderColor: color
                         borderWidth: 0
+                        property real opacity: d.selectedSet == null || d.selectedSet == returnSet ? 1 : 0.3
                         values: {
                             var ret = []
                             for (var i = 0; i < d.config.count; i++) {
@@ -362,13 +366,20 @@ StatsBase {
                 height: Style.smallIconSize
                 anchors.margins: Style.margins
 
-                MouseArea {
+                Item {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
-                    onClicked: d.selectSet(consumptionSet)
+                    MouseArea {
+                        anchors.fill: parent
+                        anchors.topMargin: -Style.smallMargins
+                        anchors.bottomMargin: -Style.smallMargins
+                        onClicked: d.selectSet(consumptionSet)
+                    }
+
                     Row {
                         anchors.centerIn: parent
                         spacing: Style.smallMargins
+                        opacity: consumptionSet.opacity
                         ColorIcon {
                             name: "powersocket"
                             size: Style.smallIconSize
@@ -385,13 +396,19 @@ StatsBase {
                     }
                 }
 
-                MouseArea {
+                Item {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
-                    onClicked: d.selectSet(productionSet)
+                    MouseArea {
+                        anchors.fill: parent
+                        anchors.topMargin: -Style.smallMargins
+                        anchors.bottomMargin: -Style.smallMargins
+                        onClicked: d.selectSet(productionSet)
+                    }
                     Row {
                         anchors.centerIn: parent
                         spacing: Style.smallMargins
+                        opacity: productionSet.opacity
                         ColorIcon {
                             name: "weathericons/weather-clear-day"
                             size: Style.smallIconSize
@@ -408,13 +425,19 @@ StatsBase {
                     }
                 }
 
-                MouseArea {
+                Item {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
-                    onClicked: d.selectSet(acquisitionSet)
+                    MouseArea {
+                        anchors.fill: parent
+                        anchors.topMargin: -Style.smallMargins
+                        anchors.bottomMargin: -Style.smallMargins
+                        onClicked: d.selectSet(acquisitionSet)
+                    }
                     Row {
                         anchors.centerIn: parent
                         spacing: Style.smallMargins
+                        opacity: acquisitionSet.opacity
                         Row {
                             ColorIcon {
                                 name: "power-grid"
@@ -437,13 +460,19 @@ StatsBase {
                         }
                     }
                 }
-                MouseArea {
+                Item {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
-                    onClicked: d.selectSet(returnSet)
+                    MouseArea {
+                        anchors.fill: parent
+                        anchors.topMargin: -Style.smallMargins
+                        anchors.bottomMargin: -Style.smallMargins
+                        onClicked: d.selectSet(returnSet)
+                    }
                     Row {
                         anchors.centerIn: parent
                         spacing: Style.smallMargins
+                        opacity: returnSet.opacity
                         Row {
                             ColorIcon {
                                 name: "power-grid"