diff options
Diffstat (limited to 'examples/datavisualization/qmlbars/qml')
3 files changed, 358 insertions, 295 deletions
diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml b/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml index 15726c2a..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 2.1 -import QtDataVisualization 1.1 +import QtQuick +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 efd575a2..4121f26b 100644 --- a/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml +++ b/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml @@ -1,130 +1,118 @@ -/**************************************************************************** -** -** 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 2.1 +import QtQuick +import QtQml.Models Item { property alias model: dataModel + property var modelAsJsArray: { + var arr = []; + for (var i = 0; i < dataModel.count; i++) { + var row = dataModel.get(i); + arr.push({ + timestamp: row.timestamp, + expenses: row.expenses, + income: row.income + }); + } + 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 203de239..0b40e957 100644 --- a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml +++ b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml @@ -1,45 +1,21 @@ -/**************************************************************************** -** -** 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$ -** -****************************************************************************/ - -import QtQuick 2.1 -import QtQuick.Controls 1.0 -import QtQuick.Layouts 1.0 -import QtDataVisualization 1.1 -import QtQuick.Window 2.0 -import "." - -Rectangle { +// 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 +import Qt.labs.qmlmodels + +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" Data { @@ -54,31 +30,25 @@ Rectangle { 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 currentRow = tableView.currentRow + var checkTimestamp = rowRole + "-" + colRole; + if (currentRow === -1 || checkTimestamp !== graphData.model.get(currentRow).timestamp) { - var totalRows = tableView.rowCount; + 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) { - tableView.currentRow = i - // Workaround to 5.2 row selection issue - if (typeof tableView.selection != "undefined") { - tableView.selection.clear() - tableView.selection.select(i) - } - break + currentRow = i; + break; } } } @@ -86,17 +56,16 @@ Rectangle { 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 @@ -145,7 +114,8 @@ Rectangle { ColorGradientStop { position: 0.0; color: "#600000" } } - onSelectedBarChanged: handleSelectionChange(secondarySeries, position) + onSelectedBarChanged: (position) => mainview.handleSelectionChange(secondarySeries, + position); } //! [3] @@ -174,71 +144,117 @@ Rectangle { ColorGradientStop { position: 0.0; color: "#006000" } } - onSelectedBarChanged: handleSelectionChange(barSeries, position) + onSelectedBarChanged: (position) => mainview.handleSelectionChange(barSeries, + position); } } } - TableView { - id: tableView + ColumnLayout { + id: tableViewLayout + anchors.top: parent.top anchors.left: parent.left - TableViewColumn{ role: "timestamp" ; title: "Month" ; width: tableView.width / 2 } - TableViewColumn{ role: "expenses" ; title: "Expenses" ; width: tableView.width / 4 } - TableViewColumn{ role: "income" ; title: "Income" ; width: tableView.width / 4 } - itemDelegate: Item { - Text { - id: delegateText - anchors.verticalCenter: parent.verticalCenter - width: parent.width - anchors.leftMargin: 4 - anchors.left: parent.left - anchors.right: parent.right - color: styleData.textColor - elide: styleData.elideMode - text: customText - horizontalAlignment: styleData.textAlignment - - property string originalText: styleData.value - property string customText - - onOriginalTextChanged: { - if (styleData.column === 0) { - if (delegateText.originalText !== "") { - var pattern = /(\d\d\d\d)-(\d\d)/ - var matches = pattern.exec(delegateText.originalText) - var colIndex = parseInt(matches[2], 10) - 1 - delegateText.customText = matches[1] + " - " + graphAxes.column.labels[colIndex] + + HorizontalHeaderView { + id: headerView + readonly property var columnNames: ["Month", "Expenses", "Income"] + + syncView: tableView + Layout.fillWidth: true + delegate: Text { + required property int index + padding: 3 + text: headerView.columnNames[index] + color: barGraph.theme.labelTextColor + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + } + + TableView { + id: tableView + Layout.fillWidth: true + Layout.fillHeight: true + + reuseItems: false + clip: true + + model: TableModel { + id: tableModel + TableModelColumn { display: "timestamp" } + TableModelColumn { display: "expenses" } + TableModelColumn { display: "income" } + + rows: graphData.modelAsJsArray + } + + delegate: Rectangle { + id: delegateRoot + required property int row + required property int column + required property string display + implicitHeight: 30 + 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: mainview.currentRow = delegateRoot.row; + } + + Text { + id: delegateText + anchors.verticalCenter: parent.verticalCenter + width: parent.width + anchors.leftMargin: 4 + anchors.left: parent.left + anchors.right: parent.right + text: formattedText + property string formattedText: { + 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 delegateRoot.display; } - } else { - delegateText.customText = originalText } + color: barGraph.theme.labelTextColor + horizontalAlignment: delegateRoot.column === 0 ? Text.AlignLeft + : Text.AlignHCenter + elide: Text.ElideRight } } } + } - model: graphData.model - - //! [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 - else - colIndex = modelProxy.columnCategoryIndex(matches[2]) - if (selectedSeries.visible) - mainview.selectedSeries.selectedBar = Qt.point(rowIndex, colIndex) - else if (barSeries.visible) - barSeries.selectedBar = Qt.point(rowIndex, colIndex) - else - secondarySeries.selectedBar = Qt.point(rowIndex, colIndex) - } - //! [2] + //! [2] + onCurrentRowChanged: { + 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]); + if (selectedSeries.visible) + mainview.selectedSeries.selectedBar = Qt.point(rowIndex, colIndex); + else if (barSeries.visible) + barSeries.selectedBar = Qt.point(rowIndex, colIndex); + else + secondarySeries.selectedBar = Qt.point(rowIndex, colIndex); } + //! [2] ColumnLayout { id: controlLayout @@ -248,38 +264,55 @@ Rectangle { 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 { @@ -291,13 +324,29 @@ Rectangle { 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 { @@ -309,22 +358,74 @@ Rectangle { //! [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 + } } } @@ -337,7 +438,7 @@ Rectangle { height: mainview.height } PropertyChanges { - target: tableView + target: tableViewLayout height: mainview.height - buttonLayoutHeight anchors.right: dataView.left anchors.left: mainview.left @@ -347,7 +448,7 @@ Rectangle { target: controlLayout width: mainview.width / 4 height: buttonLayoutHeight - anchors.top: tableView.bottom + anchors.top: tableViewLayout.bottom anchors.bottom: mainview.bottom anchors.left: mainview.left anchors.right: dataView.left @@ -357,11 +458,11 @@ Rectangle { name: "portrait" PropertyChanges { target: dataView - width: mainview.height / 4 * 3 + width: mainview.width height: mainview.width } PropertyChanges { - target: tableView + target: tableViewLayout height: mainview.width anchors.right: controlLayout.left anchors.left: mainview.left |