main.qml Example File

qmlbars/qml/qmlbars/main.qml
/**************************************************************************** ** ** 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 { id: mainview width: 1280 height: 1024 property int buttonLayoutHeight: 180; state: Screen.width < Screen.height ? "portrait" : "landscape" Data { id: graphData } Axes { id: graphAxes } property Bar3DSeries selectedSeries selectedSeries: barSeries function handleSelectionChange(series, position) { 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) colRole = "01"; else colRole = series.dataProxy.columnLabels[position.y]; var checkTimestamp = rowRole + "-" + colRole var currentRow = tableView.currentRow if (currentRow === -1 || checkTimestamp !== graphData.model.get(currentRow).timestamp) { var totalRows = tableView.rowCount; for (var i = 0; i < totalRows; i++) { 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 } } } } Item { id: dataView anchors.right: mainview.right; anchors.bottom: mainview.bottom Bars3D { id: barGraph width: dataView.width height: dataView.height shadowQuality: AbstractGraph3D.ShadowQualityMedium selectionMode: AbstractGraph3D.SelectionItem theme: Theme3D { type: Theme3D.ThemeRetro labelBorderEnabled: true font.pointSize: 35 labelBackgroundEnabled: true colorStyle: Theme3D.ColorStyleRangeGradient singleHighlightGradient: customGradient ColorGradient { id: customGradient ColorGradientStop { position: 1.0; color: "#FFFF00" } ColorGradientStop { position: 0.0; color: "#808000" } } } barThickness: 0.7 barSpacing: Qt.size(0.5, 0.5) barSpacingRelative: false scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeftHigh columnAxis: graphAxes.column rowAxis: graphAxes.row valueAxis: graphAxes.value Bar3DSeries { id: secondarySeries visible: false itemLabelFormat: "Expenses, @colLabel, @rowLabel: -@valueLabel" baseGradient: secondaryGradient ItemModelBarDataProxy { id: secondaryProxy itemModel: graphData.model rowRole: "timestamp" columnRole: "timestamp" valueRole: "expenses" rowRolePattern: /^(\d\d\d\d).*$/ columnRolePattern: /^.*-(\d\d)$/ valueRolePattern: /-/ rowRoleReplace: "\\1" columnRoleReplace: "\\1" multiMatchBehavior: ItemModelBarDataProxy.MMBCumulative } ColorGradient { id: secondaryGradient ColorGradientStop { position: 1.0; color: "#FF0000" } ColorGradientStop { position: 0.0; color: "#600000" } } onSelectedBarChanged: handleSelectionChange(secondarySeries, position) } Bar3DSeries { id: barSeries itemLabelFormat: "Income, @colLabel, @rowLabel: @valueLabel" baseGradient: barGradient ItemModelBarDataProxy { id: modelProxy itemModel: graphData.model rowRole: "timestamp" columnRole: "timestamp" valueRole: "income" rowRolePattern: /^(\d\d\d\d).*$/ columnRolePattern: /^.*-(\d\d)$/ rowRoleReplace: "\\1" columnRoleReplace: "\\1" multiMatchBehavior: ItemModelBarDataProxy.MMBCumulative } ColorGradient { id: barGradient ColorGradientStop { position: 1.0; color: "#00FF00" } ColorGradientStop { position: 0.0; color: "#006000" } } onSelectedBarChanged: handleSelectionChange(barSeries, position) } } } TableView { id: tableView 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] } } else { delegateText.customText = originalText } } } } model: graphData.model 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) } } ColumnLayout { id: controlLayout spacing: 0 Button { id: changeDataButton Layout.fillWidth: true Layout.fillHeight: true text: "Show 2010 - 2012" clip: true 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" } 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" // 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" } } } Button { id: shadowToggle Layout.fillWidth: true Layout.fillHeight: true text: barGraph.shadowsSupported ? "Hide Shadows" : "Shadows not supported" clip: true enabled: barGraph.shadowsSupported onClicked: { if (barGraph.shadowQuality == AbstractGraph3D.ShadowQualityNone) { barGraph.shadowQuality = AbstractGraph3D.ShadowQualityMedium; text = "Hide Shadows" } else { barGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone; text = "Show Shadows" } } } Button { id: seriesToggle Layout.fillWidth: true Layout.fillHeight: true text: "Show Expenses" clip: true 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" } else if (text === "Show Both") { 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" } } } } states: [ State { name: "landscape" PropertyChanges { target: dataView width: mainview.width / 4 * 3 height: mainview.height } PropertyChanges { target: tableView height: mainview.height - buttonLayoutHeight anchors.right: dataView.left anchors.left: mainview.left anchors.bottom: undefined } PropertyChanges { target: controlLayout width: mainview.width / 4 height: buttonLayoutHeight anchors.top: tableView.bottom anchors.bottom: mainview.bottom anchors.left: mainview.left anchors.right: dataView.left } }, State { name: "portrait" PropertyChanges { target: dataView width: mainview.height / 4 * 3 height: mainview.width } PropertyChanges { target: tableView height: mainview.width anchors.right: controlLayout.left anchors.left: mainview.left anchors.bottom: dataView.top } PropertyChanges { target: controlLayout width: mainview.height / 4 height: mainview.width / 4 anchors.top: mainview.top anchors.bottom: dataView.top anchors.left: undefined anchors.right: mainview.right } } ] }

© 2020 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.