kquickcharts/controls/Legend.qml

0001 /*
0002  * This file is part of KQuickCharts
0003  * SPDX-FileCopyrightText: 2019 Arjen Hiemstra <ahiemstra@heimr.nl>
0004  *
0005  * SPDX-License-Identifier: LGPL-2.1-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
0006  */
0007
0008 import QtQuick
0009 import QtQuick.Layouts
0010 import QtQuick.Controls
0011
0012 import org.kde.quickcharts as Charts
0013 import org.kde.quickcharts.controls
0014
0015 /**
0016  * A pre-made legend control that displays a legend for charts.
0017  */
0018 Control {
0019     id: control
0020
0021     /**
0022      * The chart to display the legend for.
0023      */
0024     property Charts.Chart chart
0025     /**
0026      * The delegate to use to display legend information.
0027      *
0028      * \sa Legend::delegate
0029      */
0030     property alias delegate: legendRepeater.delegate
0031     /**
0032      *
0033      */
0034     property alias model: legendRepeater.model
0035
0036     property alias horizontalSpacing: legend.horizontalSpacing
0037     property alias verticalSpacing: legend.verticalSpacing
0038
0039     property real maximumDelegateWidth: Theme.gridUnit * 10
0040
0041     property var formatValue: function(input, index) { return input }
0042     property var maximumValueWidth: function(input, index) { return -1 }
0043
0044     property alias preferredWidth: legend.preferredWidth
0045
0046     property string nameRole: "name"
0047     property string shortNameRole: "shortName"
0048     property string colorRole: "color"
0049     property string valueRole: "value"
0050
0051     default property alias _children: legend.children
0052
0053     leftPadding: 0
0054     rightPadding: 0
0055     topPadding: 0
0056     bottomPadding: 0
0057
0058     implicitWidth: Math.max(implicitContentWidth, implicitBackgroundWidth) + leftPadding + rightPadding
0059     implicitHeight: Math.max(implicitContentHeight, implicitBackgroundHeight) + topPadding + bottomPadding
0060
0061     contentItem: Flickable {
0062         anchors.fill: parent
0063
0064         contentHeight: legend.implicitHeight
0065         clip: true
0066         boundsBehavior: Flickable.StopAtBounds
0067
0068         implicitHeight: legend.implicitHeight
0069         implicitWidth: legend.implicitWidth
0070
0071         // Limit maximum flick velocity to ensure we can scroll one line per
0072         // mouse wheel "tick" when the legend's height is very constrained.
0073         maximumFlickVelocity: Theme.gridUnit * 50
0074         LegendLayout {
0075             id: legend
0076
0077             width: parent.width
0078
0079             Repeater {
0080                 id: legendRepeater
0081
0082                 model: LegendModel { chart: control.chart }
0083
0084                 delegate: LegendDelegate {
0085                     property var itemData: typeof modelData !== "undefined" ? modelData : model
0086
0087                     name: itemData[control.nameRole] ?? ""
0088                     shortName: itemData[control.shortNameRole] ?? ""
0089                     color: itemData[control.colorRole] ?? "white"
0090                     value: control.formatValue(itemData[control.valueRole] ?? "", index)
0091
0092                     maximumValueWidth: {
0093                         var result = control.maximumValueWidth(model.value, index)
0094                         if (result > 0) {
0095                             return result
0096                         }
0097
0098                         return -1
0099                     }
0100
0101                     LegendLayout.minimumWidth: minimumWidth
0102                     LegendLayout.preferredWidth: preferredWidth
0103                     LegendLayout.maximumWidth: Math.max(control.maximumDelegateWidth, preferredWidth)
0104                 }
0105             }
0106
0107             horizontalSpacing: Theme.largeSpacing
0108             verticalSpacing: Theme.smallSpacing
0109         }
0110
0111         children: [
0112             Item {
0113                 width: parent.width;
0114                 height: 1;
0115                 visible: parent.contentY > 0
0116
0117                 ToolButton {
0118                     anchors {
0119                         horizontalCenter: parent.horizontalCenter
0120                         top: parent.top
0121                     }
0122
0123                     width: Theme.smallIconSize
0124                     height: Theme.smallIconSize
0125
0126                     icon.name: "arrow-up-symbolic"
0127                     icon.width: Theme.smallIconSize
0128                     icon.height: Theme.smallIconSize
0129                     enabled: false
0130                 }
0131             },
0132             Item {
0133                 y: parent.height - height
0134                 width: parent.width;
0135                 height: 1;
0136                 visible: parent.contentY + parent.height < legend.height
0137
0138                 ToolButton {
0139                     anchors {
0140                         horizontalCenter: parent.horizontalCenter
0141                         bottom: parent.bottom
0142                     }
0143
0144                     width: Theme.smallIconSize
0145                     height: Theme.smallIconSize
0146
0147                     icon.name: "arrow-down-symbolic"
0148                     icon.width: Theme.smallIconSize
0149                     icon.height: Theme.smallIconSize
0150                     enabled: false
0151                 }
0152             }
0153         ]
0154     }
0155 }