Fix charts lable margins for generic data view

This commit is contained in:
Simon Stürz 2025-12-18 15:15:39 +01:00
parent 0a948632bf
commit 37e869f6ca

View File

@ -230,13 +230,24 @@ Item {
} }
Item { Item {
id: chartContainer
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
readonly property int yAxisLabelAreaWidth: labelsLayout.visible
? Math.max(Style.smallMargins * 2, Math.max(minValueLabelMetrics.width, maxValueLabelMetrics.width) + Style.smallMargins * 2)
: 0
// Rectangle {
// anchors.fill: parent
// color: Style.tileBackgroundColor
// radius: Style.cornerRadius
// }
ChartView { ChartView {
id: chartView id: chartView
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: chartContainer.yAxisLabelAreaWidth
// backgroundColor: "transparent" // backgroundColor: "transparent"
margins.left: 0 margins.left: 0
margins.right: 0 margins.right: 0
@ -259,15 +270,27 @@ Item {
Label { Label {
anchors.centerIn: parent anchors.centerIn: parent
visible: !logsModel.busy && logsModel.count == 0 visible: !logsModel.busy && logsModel.count === 0
text: qsTr("No data") text: qsTr("No data")
font: Style.smallFont font: Style.smallFont
opacity: .5 opacity: .5
} }
TextMetrics {
id: minValueLabelMetrics
font: Style.extraSmallFont
text: root.stateType ? Types.toUiValue(valueAxis.min, root.stateType.unit).toFixed(labelsLayout.precision) + " " + Types.toUiUnit(root.stateType.unit) : ""
}
TextMetrics {
id: maxValueLabelMetrics
font: Style.extraSmallFont
text: root.stateType ? Types.toUiValue(valueAxis.max, root.stateType.unit).toFixed(labelsLayout.precision) + " " + Types.toUiUnit(root.stateType.unit) : ""
}
Label { Label {
x: chartView.x + chartView.plotArea.x + (chartView.plotArea.width - width) / 2 x: chartView.plotArea.x + (chartView.plotArea.width - width) / 2
y: chartView.y + chartView.plotArea.y + Style.smallMargins y: chartView.plotArea.y + Style.smallMargins
text: { text: {
switch (d.sampleRate) { switch (d.sampleRate) {
case NewLogsModel.SampleRate1Min: case NewLogsModel.SampleRate1Min:
@ -286,6 +309,7 @@ Item {
opacity: ((new Date().getTime() - d.now.getTime()) / d.sampleRate / 60000) > d.visibleValues ? .5 : 0 opacity: ((new Date().getTime() - d.now.getTime()) / d.sampleRate / 60000) > d.visibleValues ? .5 : 0
Behavior on opacity { NumberAnimation {} } Behavior on opacity { NumberAnimation {} }
} }
ValueAxis { ValueAxis {
id: valueAxis id: valueAxis
min: logsModel.minValue == undefined || logsModel.minValue == 0 min: logsModel.minValue == undefined || logsModel.minValue == 0
@ -305,32 +329,6 @@ Item {
labelsColor: Style.foregroundColor labelsColor: Style.foregroundColor
} }
// Overriding the labels with our own as printf struggles with special chars
Item {
id: labelsLayout
x: Style.smallMargins
y: chartView.plotArea.y
height: chartView.plotArea.height
width: chartView.plotArea.x - x
visible: root.stateType.type.toLowerCase() != "bool" && logsModel.minValue != logsModel.maxValue
property double range: Math.abs(valueAxis.max - valueAxis.min)
property double stepSize: range / (valueAxis.tickCount - 1)
property int precision: valueAxis.max - valueAxis.min < 5 ? 2 : 0
Repeater {
model: valueAxis.tickCount
delegate: Label {
y: parent.height / (valueAxis.tickCount - 1) * index - font.pixelSize / 2
width: parent.width - Style.smallMargins
horizontalAlignment: Text.AlignRight
property double offset: (valueAxis.tickCount - index - 1) * labelsLayout.stepSize
property double value: valueAxis.min + offset
text: root.stateType ? Types.toUiValue(value, root.stateType.unit).toFixed(labelsLayout.precision) + " " + Types.toUiUnit(root.stateType.unit) : ""
verticalAlignment: Text.AlignTop
font: Style.extraSmallFont
}
}
}
DateTimeAxis { DateTimeAxis {
id: dateTimeAxis id: dateTimeAxis
@ -414,13 +412,40 @@ Item {
} }
} }
// Overriding the labels with our own as printf struggles with special chars
Item {
id: labelsLayout
x: Style.smallMargins
y: chartView.y + chartView.plotArea.y
height: chartView.plotArea.height
width: Math.max(0, chartContainer.yAxisLabelAreaWidth - Style.smallMargins)
visible: root.stateType && root.stateType.type.toLowerCase() != "bool" && logsModel.minValue != logsModel.maxValue
property double range: Math.abs(valueAxis.max - valueAxis.min)
property double stepSize: range / (valueAxis.tickCount - 1)
property int precision: valueAxis.max - valueAxis.min < 5 ? 2 : 0
Repeater {
model: valueAxis.tickCount
delegate: Label {
y: parent.height / (valueAxis.tickCount - 1) * index - font.pixelSize / 2
width: parent.width - Style.smallMargins
horizontalAlignment: Text.AlignRight
property double offset: (valueAxis.tickCount - index - 1) * labelsLayout.stepSize
property double value: valueAxis.min + offset
text: root.stateType ? Types.toUiValue(value, root.stateType.unit).toFixed(labelsLayout.precision) + " " + Types.toUiUnit(root.stateType.unit) : ""
verticalAlignment: Text.AlignTop
font: Style.extraSmallFont
}
}
}
MouseArea { MouseArea {
id: mouseArea id: mouseArea
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: chartView.plotArea.x anchors.leftMargin: chartView.x + chartView.plotArea.x
anchors.topMargin: chartView.plotArea.y anchors.topMargin: chartView.y + chartView.plotArea.y
anchors.rightMargin: chartView.width - chartView.plotArea.width - chartView.plotArea.x anchors.rightMargin: chartContainer.width - (chartView.x + chartView.plotArea.x + chartView.plotArea.width)
anchors.bottomMargin: chartView.height - chartView.plotArea.height - chartView.plotArea.y anchors.bottomMargin: chartContainer.height - (chartView.y + chartView.plotArea.y + chartView.plotArea.height)
hoverEnabled: true hoverEnabled: true
preventStealing: tooltipping || dragging preventStealing: tooltipping || dragging