diff options
Diffstat (limited to 'examples/datavisualization/qmlbars/qml')
3 files changed, 278 insertions, 260 deletions
diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml b/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml index 9d242510..042294ad 100644 --- a/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml +++ b/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml @@ -1,34 +1,8 @@ -/**************************************************************************** -** -** Copyright (C) 2016 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of the Qt Data Visualization module of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:GPL$ -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** GNU General Public License Usage -** Alternatively, this file may be used under the terms of the GNU -** General Public License version 3 or (at your option) any later version -** approved by the KDE Free Qt Foundation. The licenses are as published by -** the Free Software Foundation and appearing in the file LICENSE.GPL3 -** included in the packaging of this file. Please review the following -** information to ensure the GNU General Public License requirements will -** be met: https://www.gnu.org/licenses/gpl-3.0.html. -** -** $QT_END_LICENSE$ -** -****************************************************************************/ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause import QtQuick -import QtDataVisualization 1.2 +import QtDataVisualization Item { property alias column: columnAxis diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml b/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml index 78d2c002..4121f26b 100644 --- a/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml +++ b/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml @@ -1,31 +1,5 @@ -/**************************************************************************** -** -** Copyright (C) 2016 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of the Qt Data Visualization module of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:GPL$ -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** GNU General Public License Usage -** Alternatively, this file may be used under the terms of the GNU -** General Public License version 3 or (at your option) any later version -** approved by the KDE Free Qt Foundation. The licenses are as published by -** the Free Software Foundation and appearing in the file LICENSE.GPL3 -** included in the packaging of this file. Please review the following -** information to ensure the GNU General Public License requirements will -** be met: https://www.gnu.org/licenses/gpl-3.0.html. -** -** $QT_END_LICENSE$ -** -****************************************************************************/ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause import QtQuick import QtQml.Models @@ -34,111 +8,111 @@ Item { property alias model: dataModel property var modelAsJsArray: { - var arr = [] + var arr = []; for (var i = 0; i < dataModel.count; i++) { - var row = dataModel.get(i) + var row = dataModel.get(i); arr.push({ timestamp: row.timestamp, expenses: row.expenses, income: row.income - }) + }); } - return arr + return arr; } //! [0] ListModel { id: dataModel - ListElement{ timestamp: "2006-01"; expenses: "-4"; income: "5" } - ListElement{ timestamp: "2006-02"; expenses: "-5"; income: "6" } - ListElement{ timestamp: "2006-03"; expenses: "-7"; income: "4" } + ListElement{ timestamp: "2016-01"; expenses: "-4"; income: "5" } + ListElement{ timestamp: "2016-02"; expenses: "-5"; income: "6" } + ListElement{ timestamp: "2016-03"; expenses: "-7"; income: "4" } //! [0] - ListElement{ timestamp: "2006-04"; expenses: "-3"; income: "2" } - ListElement{ timestamp: "2006-05"; expenses: "-4"; income: "1" } - ListElement{ timestamp: "2006-06"; expenses: "-2"; income: "2" } - ListElement{ timestamp: "2006-07"; expenses: "-1"; income: "3" } - ListElement{ timestamp: "2006-08"; expenses: "-5"; income: "1" } - ListElement{ timestamp: "2006-09"; expenses: "-2"; income: "3" } - ListElement{ timestamp: "2006-10"; expenses: "-5"; income: "2" } - ListElement{ timestamp: "2006-11"; expenses: "-8"; income: "5" } - ListElement{ timestamp: "2006-12"; expenses: "-3"; income: "3" } + ListElement{ timestamp: "2016-04"; expenses: "-3"; income: "2" } + ListElement{ timestamp: "2016-05"; expenses: "-4"; income: "1" } + ListElement{ timestamp: "2016-06"; expenses: "-2"; income: "2" } + ListElement{ timestamp: "2016-07"; expenses: "-1"; income: "3" } + ListElement{ timestamp: "2016-08"; expenses: "-5"; income: "1" } + ListElement{ timestamp: "2016-09"; expenses: "-2"; income: "3" } + ListElement{ timestamp: "2016-10"; expenses: "-5"; income: "2" } + ListElement{ timestamp: "2016-11"; expenses: "-8"; income: "5" } + ListElement{ timestamp: "2016-12"; expenses: "-3"; income: "3" } - ListElement{ timestamp: "2007-01"; expenses: "-3"; income: "1" } - ListElement{ timestamp: "2007-02"; expenses: "-4"; income: "2" } - ListElement{ timestamp: "2007-03"; expenses: "-12"; income: "4" } - ListElement{ timestamp: "2007-04"; expenses: "-13"; income: "6" } - ListElement{ timestamp: "2007-05"; expenses: "-14"; income: "11" } - ListElement{ timestamp: "2007-06"; expenses: "-7"; income: "7" } - ListElement{ timestamp: "2007-07"; expenses: "-6"; income: "4" } - ListElement{ timestamp: "2007-08"; expenses: "-4"; income: "15" } - ListElement{ timestamp: "2007-09"; expenses: "-2"; income: "18" } - ListElement{ timestamp: "2007-10"; expenses: "-29"; income: "25" } - ListElement{ timestamp: "2007-11"; expenses: "-23"; income: "29" } - ListElement{ timestamp: "2007-12"; expenses: "-5"; income: "9" } + ListElement{ timestamp: "2017-01"; expenses: "-3"; income: "1" } + ListElement{ timestamp: "2017-02"; expenses: "-4"; income: "2" } + ListElement{ timestamp: "2017-03"; expenses: "-12"; income: "4" } + ListElement{ timestamp: "2017-04"; expenses: "-13"; income: "6" } + ListElement{ timestamp: "2017-05"; expenses: "-14"; income: "11" } + ListElement{ timestamp: "2017-06"; expenses: "-7"; income: "7" } + ListElement{ timestamp: "2017-07"; expenses: "-6"; income: "4" } + ListElement{ timestamp: "2017-08"; expenses: "-4"; income: "15" } + ListElement{ timestamp: "2017-09"; expenses: "-2"; income: "18" } + ListElement{ timestamp: "2017-10"; expenses: "-29"; income: "25" } + ListElement{ timestamp: "2017-11"; expenses: "-23"; income: "29" } + ListElement{ timestamp: "2017-12"; expenses: "-5"; income: "9" } - ListElement{ timestamp: "2008-01"; expenses: "-3"; income: "8" } - ListElement{ timestamp: "2008-02"; expenses: "-8"; income: "14" } - ListElement{ timestamp: "2008-03"; expenses: "-10"; income: "20" } - ListElement{ timestamp: "2008-04"; expenses: "-12"; income: "24" } - ListElement{ timestamp: "2008-05"; expenses: "-10"; income: "19" } - ListElement{ timestamp: "2008-06"; expenses: "-5"; income: "8" } - ListElement{ timestamp: "2008-07"; expenses: "-1"; income: "4" } - ListElement{ timestamp: "2008-08"; expenses: "-7"; income: "12" } - ListElement{ timestamp: "2008-09"; expenses: "-4"; income: "16" } - ListElement{ timestamp: "2008-10"; expenses: "-22"; income: "33" } - ListElement{ timestamp: "2008-11"; expenses: "-16"; income: "25" } - ListElement{ timestamp: "2008-12"; expenses: "-2"; income: "7" } + ListElement{ timestamp: "2018-01"; expenses: "-3"; income: "8" } + ListElement{ timestamp: "2018-02"; expenses: "-8"; income: "14" } + ListElement{ timestamp: "2018-03"; expenses: "-10"; income: "20" } + ListElement{ timestamp: "2018-04"; expenses: "-12"; income: "24" } + ListElement{ timestamp: "2018-05"; expenses: "-10"; income: "19" } + ListElement{ timestamp: "2018-06"; expenses: "-5"; income: "8" } + ListElement{ timestamp: "2018-07"; expenses: "-1"; income: "4" } + ListElement{ timestamp: "2018-08"; expenses: "-7"; income: "12" } + ListElement{ timestamp: "2018-09"; expenses: "-4"; income: "16" } + ListElement{ timestamp: "2018-10"; expenses: "-22"; income: "33" } + ListElement{ timestamp: "2018-11"; expenses: "-16"; income: "25" } + ListElement{ timestamp: "2018-12"; expenses: "-2"; income: "7" } - ListElement{ timestamp: "2009-01"; expenses: "-4"; income: "5" } - ListElement{ timestamp: "2009-02"; expenses: "-4"; income: "7" } - ListElement{ timestamp: "2009-03"; expenses: "-11"; income: "14" } - ListElement{ timestamp: "2009-04"; expenses: "-16"; income: "22" } - ListElement{ timestamp: "2009-05"; expenses: "-3"; income: "5" } - ListElement{ timestamp: "2009-06"; expenses: "-4"; income: "8" } - ListElement{ timestamp: "2009-07"; expenses: "-7"; income: "9" } - ListElement{ timestamp: "2009-08"; expenses: "-9"; income: "13" } - ListElement{ timestamp: "2009-09"; expenses: "-1"; income: "6" } - ListElement{ timestamp: "2009-10"; expenses: "-14"; income: "25" } - ListElement{ timestamp: "2009-11"; expenses: "-19"; income: "29" } - ListElement{ timestamp: "2009-12"; expenses: "-5"; income: "7" } + ListElement{ timestamp: "2019-01"; expenses: "-4"; income: "5" } + ListElement{ timestamp: "2019-02"; expenses: "-4"; income: "7" } + ListElement{ timestamp: "2019-03"; expenses: "-11"; income: "14" } + ListElement{ timestamp: "2019-04"; expenses: "-16"; income: "22" } + ListElement{ timestamp: "2019-05"; expenses: "-3"; income: "5" } + ListElement{ timestamp: "2019-06"; expenses: "-4"; income: "8" } + ListElement{ timestamp: "2019-07"; expenses: "-7"; income: "9" } + ListElement{ timestamp: "2019-08"; expenses: "-9"; income: "13" } + ListElement{ timestamp: "2019-09"; expenses: "-1"; income: "6" } + ListElement{ timestamp: "2019-10"; expenses: "-14"; income: "25" } + ListElement{ timestamp: "2019-11"; expenses: "-19"; income: "29" } + ListElement{ timestamp: "2019-12"; expenses: "-5"; income: "7" } - ListElement{ timestamp: "2010-01"; expenses: "-14"; income: "22" } - ListElement{ timestamp: "2010-02"; expenses: "-5"; income: "7" } - ListElement{ timestamp: "2010-03"; expenses: "-1"; income: "9" } - ListElement{ timestamp: "2010-04"; expenses: "-1"; income: "12" } - ListElement{ timestamp: "2010-05"; expenses: "-5"; income: "9" } - ListElement{ timestamp: "2010-06"; expenses: "-5"; income: "8" } - ListElement{ timestamp: "2010-07"; expenses: "-3"; income: "7" } - ListElement{ timestamp: "2010-08"; expenses: "-1"; income: "5" } - ListElement{ timestamp: "2010-09"; expenses: "-2"; income: "4" } - ListElement{ timestamp: "2010-10"; expenses: "-10"; income: "13" } - ListElement{ timestamp: "2010-11"; expenses: "-12"; income: "17" } - ListElement{ timestamp: "2010-12"; expenses: "-6"; income: "9" } + ListElement{ timestamp: "2020-01"; expenses: "-14"; income: "22" } + ListElement{ timestamp: "2020-02"; expenses: "-5"; income: "7" } + ListElement{ timestamp: "2020-03"; expenses: "-1"; income: "9" } + ListElement{ timestamp: "2020-04"; expenses: "-1"; income: "12" } + ListElement{ timestamp: "2020-05"; expenses: "-5"; income: "9" } + ListElement{ timestamp: "2020-06"; expenses: "-5"; income: "8" } + ListElement{ timestamp: "2020-07"; expenses: "-3"; income: "7" } + ListElement{ timestamp: "2020-08"; expenses: "-1"; income: "5" } + ListElement{ timestamp: "2020-09"; expenses: "-2"; income: "4" } + ListElement{ timestamp: "2020-10"; expenses: "-10"; income: "13" } + ListElement{ timestamp: "2020-11"; expenses: "-12"; income: "17" } + ListElement{ timestamp: "2020-12"; expenses: "-6"; income: "9" } - ListElement{ timestamp: "2011-01"; expenses: "-2"; income: "6" } - ListElement{ timestamp: "2011-02"; expenses: "-4"; income: "8" } - ListElement{ timestamp: "2011-03"; expenses: "-7"; income: "12" } - ListElement{ timestamp: "2011-04"; expenses: "-9"; income: "15" } - ListElement{ timestamp: "2011-05"; expenses: "-7"; income: "19" } - ListElement{ timestamp: "2011-06"; expenses: "-9"; income: "18" } - ListElement{ timestamp: "2011-07"; expenses: "-13"; income: "17" } - ListElement{ timestamp: "2011-08"; expenses: "-5"; income: "9" } - ListElement{ timestamp: "2011-09"; expenses: "-3"; income: "8" } - ListElement{ timestamp: "2011-10"; expenses: "-13"; income: "15" } - ListElement{ timestamp: "2011-11"; expenses: "-8"; income: "17" } - ListElement{ timestamp: "2011-12"; expenses: "-7"; income: "10" } + ListElement{ timestamp: "2021-01"; expenses: "-2"; income: "6" } + ListElement{ timestamp: "2021-02"; expenses: "-4"; income: "8" } + ListElement{ timestamp: "2021-03"; expenses: "-7"; income: "12" } + ListElement{ timestamp: "2021-04"; expenses: "-9"; income: "15" } + ListElement{ timestamp: "2021-05"; expenses: "-7"; income: "19" } + ListElement{ timestamp: "2021-06"; expenses: "-9"; income: "18" } + ListElement{ timestamp: "2021-07"; expenses: "-13"; income: "17" } + ListElement{ timestamp: "2021-08"; expenses: "-5"; income: "9" } + ListElement{ timestamp: "2021-09"; expenses: "-3"; income: "8" } + ListElement{ timestamp: "2021-10"; expenses: "-13"; income: "15" } + ListElement{ timestamp: "2021-11"; expenses: "-8"; income: "17" } + ListElement{ timestamp: "2021-12"; expenses: "-7"; income: "10" } - ListElement{ timestamp: "2012-01"; expenses: "-12"; income: "16" } - ListElement{ timestamp: "2012-02"; expenses: "-24"; income: "28" } - ListElement{ timestamp: "2012-03"; expenses: "-27"; income: "22" } - ListElement{ timestamp: "2012-04"; expenses: "-29"; income: "25" } - ListElement{ timestamp: "2012-05"; expenses: "-27"; income: "29" } - ListElement{ timestamp: "2012-06"; expenses: "-19"; income: "18" } - ListElement{ timestamp: "2012-07"; expenses: "-13"; income: "17" } - ListElement{ timestamp: "2012-08"; expenses: "-15"; income: "19" } - ListElement{ timestamp: "2012-09"; expenses: "-3"; income: "8" } - ListElement{ timestamp: "2012-10"; expenses: "-3"; income: "6" } - ListElement{ timestamp: "2012-11"; expenses: "-4"; income: "8" } - ListElement{ timestamp: "2012-12"; expenses: "-5"; income: "9" } + ListElement{ timestamp: "2022-01"; expenses: "-12"; income: "16" } + ListElement{ timestamp: "2022-02"; expenses: "-24"; income: "28" } + ListElement{ timestamp: "2022-03"; expenses: "-27"; income: "22" } + ListElement{ timestamp: "2022-04"; expenses: "-29"; income: "25" } + ListElement{ timestamp: "2022-05"; expenses: "-27"; income: "29" } + ListElement{ timestamp: "2022-06"; expenses: "-19"; income: "18" } + ListElement{ timestamp: "2022-07"; expenses: "-13"; income: "17" } + ListElement{ timestamp: "2022-08"; expenses: "-15"; income: "19" } + ListElement{ timestamp: "2022-09"; expenses: "-3"; income: "8" } + ListElement{ timestamp: "2022-10"; expenses: "-3"; income: "6" } + ListElement{ timestamp: "2022-11"; expenses: "-4"; income: "8" } + ListElement{ timestamp: "2022-12"; expenses: "-5"; income: "9" } } } diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml index 76eff0f2..0b40e957 100644 --- a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml +++ b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml @@ -1,46 +1,20 @@ -/**************************************************************************** -** -** Copyright (C) 2016 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of the Qt Data Visualization module of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:GPL$ -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** GNU General Public License Usage -** Alternatively, this file may be used under the terms of the GNU -** General Public License version 3 or (at your option) any later version -** approved by the KDE Free Qt Foundation. The licenses are as published by -** the Free Software Foundation and appearing in the file LICENSE.GPL3 -** included in the packaging of this file. Please review the following -** information to ensure the GNU General Public License requirements will -** be met: https://www.gnu.org/licenses/gpl-3.0.html. -** -** $QT_END_LICENSE$ -** -****************************************************************************/ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause import QtQuick import QtQuick.Controls import QtQuick.Layouts -import QtDataVisualization 1.2 -import QtQuick.Window +import QtDataVisualization import Qt.labs.qmlmodels -import "." + +pragma ComponentBehavior: Bound Item { id: mainview width: 1280 height: 1024 - property int buttonLayoutHeight: 180; + property int buttonLayoutHeight: 180 property int currentRow state: Screen.width < Screen.height ? "portrait" : "landscape" @@ -56,26 +30,25 @@ Item { selectedSeries: barSeries function handleSelectionChange(series, position) { - if (position !== series.invalidSelectionPosition) { - selectedSeries = series - } + if (position !== series.invalidSelectionPosition) + selectedSeries = series; // Set tableView current row to selected bar var rowRole = series.dataProxy.rowLabels[position.x]; - var colRole - if (barGraph.columnAxis === graphAxes.total) + var colRole; + if (barGraph.columnAxis == graphAxes.total) colRole = "01"; else colRole = series.dataProxy.columnLabels[position.y]; - var checkTimestamp = rowRole + "-" + colRole + var checkTimestamp = rowRole + "-" + colRole; if (currentRow === -1 || checkTimestamp !== graphData.model.get(currentRow).timestamp) { var totalRows = tableView.rows; for (var i = 0; i < totalRows; i++) { - var modelTimestamp = graphData.model.get(i).timestamp + var modelTimestamp = graphData.model.get(i).timestamp; if (modelTimestamp === checkTimestamp) { - currentRow = i - break + currentRow = i; + break; } } } @@ -83,17 +56,16 @@ Item { Item { id: dataView - anchors.right: mainview.right; + anchors.right: mainview.right anchors.bottom: mainview.bottom Bars3D { id: barGraph - width: dataView.width - height: dataView.height - shadowQuality: AbstractGraph3D.ShadowQualityMedium + anchors.fill: parent + shadowQuality: AbstractGraph3D.ShadowQualitySoftHigh selectionMode: AbstractGraph3D.SelectionItem theme: Theme3D { - type: Theme3D.ThemeRetro + type: Theme3D.ThemeEbony labelBorderEnabled: true font.pointSize: 35 labelBackgroundEnabled: true @@ -142,7 +114,8 @@ Item { ColorGradientStop { position: 0.0; color: "#600000" } } - onSelectedBarChanged: (position)=> handleSelectionChange(secondarySeries, position) + onSelectedBarChanged: (position) => mainview.handleSelectionChange(secondarySeries, + position); } //! [3] @@ -171,31 +144,33 @@ Item { ColorGradientStop { position: 0.0; color: "#006000" } } - onSelectedBarChanged: (position)=> handleSelectionChange(barSeries, position) + onSelectedBarChanged: (position) => mainview.handleSelectionChange(barSeries, + position); } } } - - ColumnLayout { id: tableViewLayout - anchors.top: parent.top anchors.left: parent.left HorizontalHeaderView { - id: header - property var columnNames: ["Month", "Expenses", "Income"] + id: headerView + readonly property var columnNames: ["Month", "Expenses", "Income"] syncView: tableView Layout.fillWidth: true delegate: Text { + required property int index padding: 3 - text: header.columnNames[index] + text: headerView.columnNames[index] + color: barGraph.theme.labelTextColor + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight } - } TableView { @@ -215,14 +190,21 @@ Item { rows: graphData.modelAsJsArray } - delegate: Rectangle { + id: delegateRoot + required property int row + required property int column + required property string display implicitHeight: 30 - implicitWidth: tableView.width / 3 - color: row===currentRow ? "#e0e0e0" : "#ffffff" + implicitWidth: column === 0 ? tableView.width / 2 : tableView.width / 4 + color: row === mainview.currentRow ? barGraph.theme.gridLineColor + : barGraph.theme.windowColor + border.color: row === mainview.currentRow ? barGraph.theme.labelTextColor + : barGraph.theme.gridLineColor + border.width: 1 MouseArea { anchors.fill: parent - onClicked: currentRow = row + onClicked: mainview.currentRow = delegateRoot.row; } Text { @@ -234,18 +216,21 @@ Item { anchors.right: parent.right text: formattedText property string formattedText: { - if (column === 0) { - if (display !== "") { - var pattern = /(\d\d\d\d)-(\d\d)/ - var matches = pattern.exec(display) - var colIndex = parseInt(matches[2], 10) - 1 - return matches[1] + " - " + graphAxes.column.labels[colIndex] + if (delegateRoot.column === 0) { + if (delegateRoot.display !== "") { + var pattern = /(\d\d\d\d)-(\d\d)/; + var matches = pattern.exec(delegateRoot.display); + var colIndex = parseInt(matches[2], 10) - 1; + return matches[1] + " - " + graphAxes.column.labels[colIndex]; } } else { - return display + return delegateRoot.display; } } - + color: barGraph.theme.labelTextColor + horizontalAlignment: delegateRoot.column === 0 ? Text.AlignLeft + : Text.AlignHCenter + elide: Text.ElideRight } } } @@ -253,21 +238,21 @@ Item { //! [2] onCurrentRowChanged: { - var timestamp = graphData.model.get(currentRow).timestamp - var pattern = /(\d\d\d\d)-(\d\d)/ - var matches = pattern.exec(timestamp) - var rowIndex = modelProxy.rowCategoryIndex(matches[1]) - var colIndex - if (barGraph.columnAxis === graphAxes.total) - colIndex = 0 // Just one column when showing yearly totals + var timestamp = graphData.model.get(mainview.currentRow).timestamp; + var pattern = /(\d\d\d\d)-(\d\d)/; + var matches = pattern.exec(timestamp); + var rowIndex = modelProxy.rowCategoryIndex(matches[1]); + var colIndex; + if (barGraph.columnAxis == graphAxes.total) + colIndex = 0 ;// Just one column when showing yearly totals else - colIndex = modelProxy.columnCategoryIndex(matches[2]) + colIndex = modelProxy.columnCategoryIndex(matches[2]); if (selectedSeries.visible) - mainview.selectedSeries.selectedBar = Qt.point(rowIndex, colIndex) + mainview.selectedSeries.selectedBar = Qt.point(rowIndex, colIndex); else if (barSeries.visible) - barSeries.selectedBar = Qt.point(rowIndex, colIndex) + barSeries.selectedBar = Qt.point(rowIndex, colIndex); else - secondarySeries.selectedBar = Qt.point(rowIndex, colIndex) + secondarySeries.selectedBar = Qt.point(rowIndex, colIndex); } //! [2] @@ -279,38 +264,55 @@ Item { id: changeDataButton Layout.fillWidth: true Layout.fillHeight: true - text: "Show 2010 - 2012" + text: "Show 2020 - 2022" clip: true //! [1] onClicked: { if (text === "Show yearly totals") { - modelProxy.autoRowCategories = true - secondaryProxy.autoRowCategories = true - modelProxy.columnRolePattern = /^.*$/ - secondaryProxy.columnRolePattern = /^.*$/ - graphAxes.value.autoAdjustRange = true - barGraph.columnAxis = graphAxes.total - text = "Show all years" + modelProxy.autoRowCategories = true; + secondaryProxy.autoRowCategories = true; + modelProxy.columnRolePattern = /^.*$/; + secondaryProxy.columnRolePattern = /^.*$/; + graphAxes.value.autoAdjustRange = true; + barGraph.columnAxis = graphAxes.total; + text = "Show all years"; } else if (text === "Show all years") { - modelProxy.autoRowCategories = true - secondaryProxy.autoRowCategories = true - modelProxy.columnRolePattern = /^.*-(\d\d)$/ - secondaryProxy.columnRolePattern = /^.*-(\d\d)$/ - graphAxes.value.min = 0 - graphAxes.value.max = 35 - barGraph.columnAxis = graphAxes.column - text = "Show 2010 - 2012" - } else { // text === "Show 2010 - 2012" + modelProxy.autoRowCategories = true; + secondaryProxy.autoRowCategories = true; + modelProxy.columnRolePattern = /^.*-(\d\d)$/; + secondaryProxy.columnRolePattern = /^.*-(\d\d)$/; + graphAxes.value.min = 0; + graphAxes.value.max = 35; + barGraph.columnAxis = graphAxes.column; + text = "Show 2020 - 2022"; + } else { // text === "Show 2020 - 2022" // Explicitly defining row categories, since we do not want to show data for // all years in the model, just for the selected ones. - modelProxy.autoRowCategories = false - secondaryProxy.autoRowCategories = false - modelProxy.rowCategories = ["2010", "2011", "2012"] - secondaryProxy.rowCategories = ["2010", "2011", "2012"] - text = "Show yearly totals" + modelProxy.autoRowCategories = false; + secondaryProxy.autoRowCategories = false; + modelProxy.rowCategories = ["2020", "2021", "2022"]; + secondaryProxy.rowCategories = ["2020", "2021", "2022"]; + text = "Show yearly totals"; } } //! [1] + + contentItem: Text { + text: changeDataButton.text + opacity: changeDataButton.enabled ? 1.0 : 0.3 + color: barGraph.theme.labelTextColor + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + background: Rectangle { + opacity: changeDataButton.enabled ? 1 : 0.3 + color: changeDataButton.down ? barGraph.theme.gridLineColor : barGraph.theme.windowColor + border.color: changeDataButton.down ? barGraph.theme.labelTextColor : barGraph.theme.gridLineColor + border.width: 1 + radius: 2 + } } Button { @@ -322,13 +324,29 @@ Item { enabled: barGraph.shadowsSupported onClicked: { if (barGraph.shadowQuality == AbstractGraph3D.ShadowQualityNone) { - barGraph.shadowQuality = AbstractGraph3D.ShadowQualityMedium; - text = "Hide Shadows" + barGraph.shadowQuality = AbstractGraph3D.ShadowQualitySoftHigh; + text = "Hide Shadows"; } else { barGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone; - text = "Show Shadows" + text = "Show Shadows"; } } + contentItem: Text { + text: shadowToggle.text + opacity: shadowToggle.enabled ? 1.0 : 0.3 + color: barGraph.theme.labelTextColor + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + background: Rectangle { + opacity: shadowToggle.enabled ? 1 : 0.3 + color: shadowToggle.down ? barGraph.theme.gridLineColor : barGraph.theme.windowColor + border.color: shadowToggle.down ? barGraph.theme.labelTextColor : barGraph.theme.gridLineColor + border.width: 1 + radius: 2 + } } Button { @@ -340,22 +358,74 @@ Item { //! [0] onClicked: { if (text === "Show Expenses") { - barSeries.visible = false - secondarySeries.visible = true - barGraph.valueAxis.labelFormat = "-%.2f M\u20AC" - secondarySeries.itemLabelFormat = "Expenses, @colLabel, @rowLabel: @valueLabel" - text = "Show Both" + barSeries.visible = false; + secondarySeries.visible = true; + barGraph.valueAxis.labelFormat = "-%.2f M\u20AC"; + secondarySeries.itemLabelFormat = "Expenses, @colLabel, @rowLabel: @valueLabel"; + text = "Show Both"; } else if (text === "Show Both") { - barSeries.visible = true - barGraph.valueAxis.labelFormat = "%.2f M\u20AC" - secondarySeries.itemLabelFormat = "Expenses, @colLabel, @rowLabel: -@valueLabel" - text = "Show Income" + barSeries.visible = true; + barGraph.valueAxis.labelFormat = "%.2f M\u20AC"; + secondarySeries.itemLabelFormat = "Expenses, @colLabel, @rowLabel: -@valueLabel"; + text = "Show Income"; } else { // text === "Show Income" - secondarySeries.visible = false - text = "Show Expenses" + secondarySeries.visible = false; + text = "Show Expenses"; } } //! [0] + contentItem: Text { + text: seriesToggle.text + opacity: seriesToggle.enabled ? 1.0 : 0.3 + color: barGraph.theme.labelTextColor + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + background: Rectangle { + opacity: seriesToggle.enabled ? 1 : 0.3 + color: seriesToggle.down ? barGraph.theme.gridLineColor : barGraph.theme.windowColor + border.color: seriesToggle.down ? barGraph.theme.labelTextColor : barGraph.theme.gridLineColor + border.width: 1 + radius: 2 + } + } + + Button { + id: marginToggle + Layout.fillWidth: true + Layout.fillHeight: true + text: "Use Margin" + clip: true + + onClicked: { + if (text === "Use Margin") { + barGraph.barSeriesMargin = Qt.size(0.2, 0.2); + barGraph.barSpacing = Qt.size(0.0, 0.0); + text = "Use Spacing" + } else if (text === "Use Spacing") { + barGraph.barSeriesMargin = Qt.size(0.0, 0.0); + barGraph.barSpacing = Qt.size(0.5, 0.5); + text = "Use Margin"; + } + } + contentItem: Text { + text: marginToggle.text + opacity: marginToggle.enabled ? 1.0 : 0.3 + color: barGraph.theme.labelTextColor + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + background: Rectangle { + opacity: marginToggle.enabled ? 1 : 0.3 + color: marginToggle.down ? barGraph.theme.gridLineColor : barGraph.theme.windowColor + border.color: marginToggle.down ? barGraph.theme.labelTextColor : barGraph.theme.gridLineColor + border.width: 1 + radius: 2 + } } } @@ -388,7 +458,7 @@ Item { name: "portrait" PropertyChanges { target: dataView - width: mainview.height / 4 * 3 + width: mainview.width height: mainview.width } PropertyChanges { |