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 } } ] }