src/qml/PieProgressBar.qml

0001 // SPDX-FileCopyrightText: 2023 James Graham <james.h.graham@protonmail.com>
0002 // SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
0003
0004 import QtQuick
0005
0006 import org.kde.kirigami as Kirigami
0007 import org.kde.quickcharts as Charts
0008
0009 /**
0010  * @brief A circular progress bar that fills an arc as progress goes up.
0011  */
0012 Rectangle {
0013     id: root
0014
0015     /**
0016      * @brief Progress of the circle as a percentage.
0017      *
0018      * Range - 0% to 100%.
0019      */
0020     property int progress: 0
0021
0022     /**
0023      * @brief Offset angle for the start of the pie fill arc.
0024      *
0025      * This defaults to 0, i.e. an upward vertical line from the center. This rotates
0026      * that start point by the desired number of degrees.
0027      *
0028      * Range - 0 degrees to 360 degrees
0029      */
0030     property int startOffset: 0
0031
0032     /**
0033      * @brief Fill color of the pie.
0034      */
0035     property color pieColor: Kirigami.Theme.highlightColor
0036
0037     width: Kirigami.Units.iconSizes.smallMedium
0038     height: Kirigami.Units.iconSizes.smallMedium
0039     radius: width / 2
0040     color: Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.15)
0041
0042     Charts.PieChart {
0043         id: chart
0044         anchors.fill: parent
0045         anchors.margins: 1
0046
0047         filled: true
0048         // Set chart background color so the parent filled rectangle looks like
0049         // an outline.
0050         backgroundColor: Kirigami.Theme.backgroundColor
0051         fromAngle: root.startOffset
0052         toAngle: 360 + root.startOffset
0053         range {
0054             from: 0
0055             to: 100
0056             automatic: false
0057         }
0058         valueSources: Charts.SingleValueSource {
0059             value: root.progress
0060         }
0061         colorSource: Charts.SingleValueSource {
0062             value: Kirigami.Theme.highlightColor
0063         }
0064     }
0065 }