examples/charts/PieChart.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.Controls
0010 import QtQuick.Layouts
0011
0012 import org.kde.kirigami as Kirigami
0013 import org.kde.kquickcontrols
0014
0015 import org.kde.quickcharts as Charts
0016
0017 Kirigami.Page {
0018     title: "Pie Chart"
0019
0020     ListModel {
0021         id: pieModel;
0022         dynamicRoles: true;
0023
0024         Component.onCompleted: {
0025             append({ data: 50, data2: 30, color: "red" })
0026             append({ data: 50, data2: 60, color: "green" })
0027             append({ data: 50, data2: 60, color: "blue" })
0028         }
0029     }
0030
0031     ColumnLayout {
0032         anchors.fill: parent
0033         anchors.margins: Kirigami.Units.largeSpacing
0034         spacing: Kirigami.Units.largeSpacing
0035
0036         Kirigami.AbstractCard {
0037             Layout.fillWidth: false
0038             Layout.fillHeight: false
0039             Layout.preferredWidth: 600
0040             Layout.preferredHeight: 400
0041             Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
0042
0043             Charts.PieChart {
0044                 id: chart
0045                 anchors.fill: parent
0046                 anchors.margins: Kirigami.Units.smallSpacing;
0047
0048                 range.to: 150
0049
0050                 valueSources: Charts.ModelSource { roleName: "data"; model: pieModel }
0051                 colorSource: Charts.ModelSource { roleName: "color"; model: pieModel }
0052
0053                 thickness: 20;
0054                 filled: false;
0055                 backgroundColor: "gray"
0056             }
0057         }
0058
0059         RangeEditor { label: "Range"; range: chart.range }
0060
0061         RowLayout {
0062             Button { text: "Add Item"; onClicked: pieModel.append({data: 50, color: Qt.rgba(1.0, 1.0, 1.0)}) }
0063             Button { text: "Remove Item"; onClicked: pieModel.remove(pieModel.count - 1)}
0064             Label { text: "Thickness" }
0065             SpinBox { from: 0; to: chart.width / 2; value: chart.thickness; onValueModified: chart.thickness = value; }
0066             CheckBox { text: "Filled"; checked: chart.filled; onCheckedChanged: chart.filled = checked }
0067         }
0068
0069         RowLayout {
0070             CheckBox { text: "Smooth Ends"; checked: chart.smoothEnds; onCheckedChanged: chart.smoothEnds = checked }
0071             Label { text: "From Angle" }
0072             SpinBox { from: -360; to: 360; value: chart.fromAngle; onValueModified: chart.fromAngle = value; }
0073             Label { text: "To Angle" }
0074             SpinBox { from: -360; to: 360; value: chart.toAngle; onValueModified: chart.toAngle = value; }
0075         }
0076
0077         Frame {
0078             Layout.fillWidth: true
0079             Layout.fillHeight: true
0080
0081             leftPadding: 1
0082             rightPadding: 1
0083             topPadding: 1
0084             bottomPadding: 1
0085
0086             Kirigami.Theme.inherit: false
0087             Kirigami.Theme.colorSet: Kirigami.Theme.View
0088
0089             ScrollView {
0090                 anchors.fill: parent
0091                 ListView {
0092                     model: pieModel;
0093                     delegate: ItemDelegate {
0094                         width: ListView.view.width
0095                         height: Kirigami.Units.gridUnit * 2 + Kirigami.Units.smallSpacing
0096                         contentItem: RowLayout {
0097                             Label { text: "Value" }
0098                             SpinBox {
0099                                 Layout.preferredWidth: parent.width * 0.15
0100                                 from: 0; to: 10000;
0101                                 stepSize: 1;
0102                                 value: model.data;
0103                                 onValueModified: pieModel.setProperty(index, "data", value)
0104                             }
0105                             Label { text: "Color" }
0106                             ColorButton {
0107                                 color: model.color;
0108                                 showAlphaChannel: true;
0109                                 onColorChanged: pieModel.setProperty(index, "color", color)
0110                             }
0111                         }
0112                     }
0113                 }
0114             }
0115         }
0116     }
0117 }