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 2.9
0009 import QtQuick.Controls 2.2
0010 import QtQuick.Layouts 1.2
0011
0012 import org.kde.kirigami 2.4 as Kirigami
0013 import org.kde.kquickcontrols 2.0
0014
0015 import org.kde.quickcharts 1.0 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             ScrollView {
0082                 anchors.fill: parent
0083                 ListView {
0084                     model: pieModel;
0085                     delegate: Kirigami.BasicListItem {
0086                         width: ListView.view.width
0087                         height: Kirigami.Units.gridUnit * 2 + Kirigami.Units.smallSpacing
0088                         contentItem: RowLayout {
0089                             Label { text: "Value" }
0090                             SpinBox {
0091                                 Layout.preferredWidth: parent.width * 0.15
0092                                 from: 0; to: 10000;
0093                                 stepSize: 1;
0094                                 value: model.data;
0095                                 onValueModified: pieModel.setProperty(index, "data", value)
0096                             }
0097                             Label { text: "Color" }
0098                             ColorButton {
0099                                 color: model.color;
0100                                 showAlphaChannel: true;
0101                                 onColorChanged: pieModel.setProperty(index, "color", color)
0102                             }
0103                         }
0104                     }
0105                 }
0106             }
0107         }
0108     }
0109 }