LinearGauge.qml

import QtQuick

// Reusable horizontal bar gauge — works for fuel, temp, battery, oil pressure, etc.
// Public API:
//   label:        text on the left (e.g. "FUEL")
//   value:        current reading
//   maxValue:     full-scale reading
//   units:        text after the value (e.g. "%", "°C")
//   warningLow:   value below which bar turns red (set -1 to disable)
//   warningHigh:  value above which bar turns red (set -1 to disable)
//   accentColor:  normal bar color
Item {
    id: root

    // ── Public API ──
    property string label: ""
    property real value: 0
    property real maxValue: 100
    property string units: "%"
    property real warningLow: -1
    property real warningHigh: -1
    property color accentColor: "#00c896"

    // ── Geometry ──
    implicitWidth: 240
    implicitHeight: 30

    // Is the value in a warning state?
    readonly property bool inWarning:
        (warningLow >= 0 && value <= warningLow) ||
        (warningHigh >= 0 && value >= warningHigh)

    // ── Header row: label + numeric value ──
    Text {
        id: labelText
        anchors.left: parent.left
        anchors.top: parent.top
        text: root.label
        color: "#8a92a8"
        font.family: "Bahnschrift"
        font.pixelSize: 11
        font.letterSpacing: 1.2
        font.weight: Font.Medium
    }

    Text {
        id: valueText
        anchors.right: parent.right
        anchors.top: parent.top
        text: Math.round(root.value) + " " + root.units
        color: root.inWarning ? "#ff5252" : "#ffffff"
        font.family: "Bahnschrift"
        font.pixelSize: 12
        font.weight: Font.Medium
    }

    // ── Bar track ──
    Rectangle {
        id: track
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 6
        radius: 2
        color: "#1a1f2e"

        // Filled portion
        Rectangle {
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            width: parent.width * Math.min(root.value / root.maxValue, 1)
            radius: 2
            color: root.inWarning ? "#ff5252" : root.accentColor

            Behavior on width {
                NumberAnimation { duration: 200; easing.type: Easing.OutCubic }
            }
            Behavior on color {
                ColorAnimation { duration: 300 }
            }
        }
    }
}