From df33d053c1188b4be1e3ebd3b5114d28c602d692 Mon Sep 17 00:00:00 2001 From: Tuomo Pelkonen Date: Thu, 14 Jan 2021 13:15:36 +0200 Subject: Fix qmlbars example for Qt 6.0 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove API versions from imports, using standard Button and adapted to new TableView Task-number: QTBUG-89298 Change-Id: Ic41c53a6c6d2c0b0542464e78395f5347bdb4e74 Reviewed-by: Tomi Korpipää --- .../datavisualization/qmlbars/qml/qmlbars/Axes.qml | 4 +- .../datavisualization/qmlbars/qml/qmlbars/Data.qml | 16 +- .../datavisualization/qmlbars/qml/qmlbars/main.qml | 165 ++++++++++++--------- 3 files changed, 114 insertions(+), 71 deletions(-) (limited to 'examples') diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml b/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml index 15726c2a..93a72258 100644 --- a/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml +++ b/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml @@ -27,8 +27,8 @@ ** ****************************************************************************/ -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..78d2c002 100644 --- a/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml +++ b/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml @@ -27,11 +27,25 @@ ** ****************************************************************************/ -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 diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml index 203de239..98167504 100644 --- a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml +++ b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml @@ -27,11 +27,12 @@ ** ****************************************************************************/ -import QtQuick 2.1 -import QtQuick.Controls 1.0 -import QtQuick.Layouts 1.0 -import QtDataVisualization 1.1 -import QtQuick.Window 2.0 +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts +import QtDataVisualization +import QtQuick.Window +import Qt.labs.qmlmodels import "." Rectangle { @@ -40,6 +41,7 @@ Rectangle { height: 1024 property int buttonLayoutHeight: 180; + property int currentRow state: Screen.width < Screen.height ? "portrait" : "landscape" Data { @@ -54,7 +56,7 @@ Rectangle { selectedSeries: barSeries function handleSelectionChange(series, position) { - if (position != series.invalidSelectionPosition) { + if (position !== series.invalidSelectionPosition) { selectedSeries = series } @@ -66,18 +68,13 @@ Rectangle { 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; + var totalRows = tableView.rows; 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) - } + currentRow = i break } } @@ -179,65 +176,97 @@ Rectangle { } } - 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: header + property var columnNames: ["Month", "Expenses", "Income"] + + syncView: tableView + Layout.fillWidth: true + delegate: Text { + padding: 3 + text: header.columnNames[index] + } + + } + + 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 { + implicitHeight: 30 + implicitWidth: tableView.width / 3 + color: row===currentRow ? "#e0e0e0" : "#ffffff" + MouseArea { + anchors.fill: parent + onClicked: currentRow = 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 (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] + } + } else { + return display } - } else { - delegateText.customText = originalText } + } } } + } - 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] + 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 { @@ -337,7 +366,7 @@ Rectangle { height: mainview.height } PropertyChanges { - target: tableView + target: tableViewLayout height: mainview.height - buttonLayoutHeight anchors.right: dataView.left anchors.left: mainview.left @@ -347,7 +376,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 @@ -361,7 +390,7 @@ Rectangle { height: mainview.width } PropertyChanges { - target: tableView + target: tableViewLayout height: mainview.width anchors.right: controlLayout.left anchors.left: mainview.left -- cgit v1.2.3