AlignToHour.qml

import QtQuick 2.0
import QtQuick.Layouts 1.1

import org.kde.plasma.plasmoid 2.0
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents

Item {
    id: root

    readonly property date currentDateTime: dataSource.data.Local ? dataSource.data.Local.DateTime : new Date()
    readonly property string currentYear: currentDateTime.getFullYear()
    property real currentPercent: 0

    onCurrentDateTimeChanged: {
        // Make sure to remove / comment out your debug logging when you release the widget.
        console.log('onCurrentDateTimeChanged', currentDateTime) 

        // updateCurrentPercent()
    }

    PlasmaCore.DataSource {
        id: dataSource
        engine: "time"
        connectedSources: ["Local"]

        // interval: 60 * 60 * 1000 // 1 hour
        // intervalAlignment: PlasmaCore.Types.AlignToHour
        
        // interval: 60 * 1000 // 1 minute
        // intervalAlignment: PlasmaCore.Types.AlignToMinute

        interval: 1000
        intervalAlignment: PlasmaCore.Types.AlignToSecond
    }

    Plasmoid.preferredRepresentation: Plasmoid.fullRepresentation

    Plasmoid.fullRepresentation: ColumnLayout {
        spacing: 0

        PlasmaComponents.Label {
            Layout.alignment: Qt.AlignCenter
            text: i18n("%1 is %2% complete", currentYear, currentPercent)
        }
        
        PlasmaComponents.ProgressBar {
            Layout.alignment: Qt.AlignCenter
            value: currentPercent
            maximumValue: 100
            minimumValue: 0
        }
    }
}