summaryrefslogtreecommitdiffstats
path: root/examples/datavisualization/qmlbars/qml/qmlbars/main.qml
diff options
context:
space:
mode:
Diffstat (limited to 'examples/datavisualization/qmlbars/qml/qmlbars/main.qml')
-rw-r--r--examples/datavisualization/qmlbars/qml/qmlbars/main.qml290
1 files changed, 170 insertions, 120 deletions
diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml
index 4a81df7e..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,38 @@ 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 {
@@ -367,15 +401,31 @@ Item {
onClicked: {
if (text === "Use Margin") {
- barGraph.barSeriesMargin = Qt.size(0.2, 0.2)
- barGraph.barSpacing = Qt.size(0.0, 0.0)
+ 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"
+ 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
+ }
}
}
@@ -408,7 +458,7 @@ Item {
name: "portrait"
PropertyChanges {
target: dataView
- width: mainview.height / 4 * 3
+ width: mainview.width
height: mainview.width
}
PropertyChanges {
generated by cgit v1.2.3 (git 2.25.1) at 2024-04-30 10:36:31 +0000