From 590d11726e0708e9f8fad0ec386cc5859dbe5cc8 Mon Sep 17 00:00:00 2001 From: Miikka Heikkinen Date: Thu, 8 May 2014 14:55:13 +0300 Subject: Enable mapping single role to multiple properties for bars MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Surface and scatter to follow in separate task Task-number: QTRD-3074 Change-Id: I790078446cd1b805a83da2e3760eaf27c586aaab Reviewed-by: Tomi Korpipää --- .../datavisualization/qmlbars/qml/qmlbars/Data.qml | 168 ++++++++++----------- .../datavisualization/qmlbars/qml/qmlbars/main.qml | 61 ++++++-- 2 files changed, 131 insertions(+), 98 deletions(-) (limited to 'examples/datavisualization/qmlbars/qml') diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml b/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml index 7e0978c6..6922ef17 100644 --- a/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml +++ b/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml @@ -24,96 +24,96 @@ Item { //! [0] ListModel { id: dataModel - ListElement{ year: "2006"; month: "Jan"; expenses: "4"; income: "5" } - ListElement{ year: "2006"; month: "Feb"; expenses: "5"; income: "6" } - ListElement{ year: "2006"; month: "Mar"; expenses: "7"; income: "4" } + ListElement{ timestamp: "2006-01"; expenses: "4"; income: "5" } + ListElement{ timestamp: "2006-02"; expenses: "5"; income: "6" } + ListElement{ timestamp: "2006-03"; expenses: "7"; income: "4" } //! [0] - ListElement{ year: "2006"; month: "Apr"; expenses: "3"; income: "2" } - ListElement{ year: "2006"; month: "May"; expenses: "4"; income: "1" } - ListElement{ year: "2006"; month: "Jun"; expenses: "2"; income: "2" } - ListElement{ year: "2006"; month: "Jul"; expenses: "1"; income: "3" } - ListElement{ year: "2006"; month: "Aug"; expenses: "5"; income: "1" } - ListElement{ year: "2006"; month: "Sep"; expenses: "2"; income: "3" } - ListElement{ year: "2006"; month: "Oct"; expenses: "5"; income: "2" } - ListElement{ year: "2006"; month: "Nov"; expenses: "8"; income: "5" } - ListElement{ year: "2006"; month: "Dec"; expenses: "3"; income: "3" } + 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{ year: "2007"; month: "Jan"; expenses: "3"; income: "1" } - ListElement{ year: "2007"; month: "Feb"; expenses: "4"; income: "2" } - ListElement{ year: "2007"; month: "Mar"; expenses: "12"; income: "4" } - ListElement{ year: "2007"; month: "Apr"; expenses: "13"; income: "6" } - ListElement{ year: "2007"; month: "May"; expenses: "14"; income: "11" } - ListElement{ year: "2007"; month: "Jun"; expenses: "7"; income: "7" } - ListElement{ year: "2007"; month: "Jul"; expenses: "6"; income: "4" } - ListElement{ year: "2007"; month: "Aug"; expenses: "4"; income: "15" } - ListElement{ year: "2007"; month: "Sep"; expenses: "2"; income: "18" } - ListElement{ year: "2007"; month: "Oct"; expenses: "29"; income: "25" } - ListElement{ year: "2007"; month: "Nov"; expenses: "23"; income: "29" } - ListElement{ year: "2007"; month: "Dec"; expenses: "5"; income: "9" } + 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{ year: "2008"; month: "Jan"; expenses: "3"; income: "8" } - ListElement{ year: "2008"; month: "Feb"; expenses: "8"; income: "14" } - ListElement{ year: "2008"; month: "Mar"; expenses: "10"; income: "20" } - ListElement{ year: "2008"; month: "Apr"; expenses: "12"; income: "24" } - ListElement{ year: "2008"; month: "May"; expenses: "10"; income: "19" } - ListElement{ year: "2008"; month: "Jun"; expenses: "5"; income: "8" } - ListElement{ year: "2008"; month: "Jul"; expenses: "1"; income: "4" } - ListElement{ year: "2008"; month: "Aug"; expenses: "7"; income: "12" } - ListElement{ year: "2008"; month: "Sep"; expenses: "4"; income: "16" } - ListElement{ year: "2008"; month: "Oct"; expenses: "22"; income: "33" } - ListElement{ year: "2008"; month: "Nov"; expenses: "16"; income: "25" } - ListElement{ year: "2008"; month: "Dec"; expenses: "2"; income: "7" } + 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{ year: "2009"; month: "Jan"; expenses: "4"; income: "5" } - ListElement{ year: "2009"; month: "Feb"; expenses: "4"; income: "7" } - ListElement{ year: "2009"; month: "Mar"; expenses: "11"; income: "14" } - ListElement{ year: "2009"; month: "Apr"; expenses: "16"; income: "22" } - ListElement{ year: "2009"; month: "May"; expenses: "3"; income: "5" } - ListElement{ year: "2009"; month: "Jun"; expenses: "4"; income: "8" } - ListElement{ year: "2009"; month: "Jul"; expenses: "7"; income: "9" } - ListElement{ year: "2009"; month: "Aug"; expenses: "9"; income: "13" } - ListElement{ year: "2009"; month: "Sep"; expenses: "1"; income: "6" } - ListElement{ year: "2009"; month: "Oct"; expenses: "14"; income: "25" } - ListElement{ year: "2009"; month: "Nov"; expenses: "19"; income: "29" } - ListElement{ year: "2009"; month: "Dec"; expenses: "5"; 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{ year: "2010"; month: "Jan"; expenses: "14"; income: "22" } - ListElement{ year: "2010"; month: "Feb"; expenses: "5"; income: "7" } - ListElement{ year: "2010"; month: "Mar"; expenses: "1"; income: "9" } - ListElement{ year: "2010"; month: "Apr"; expenses: "1"; income: "12" } - ListElement{ year: "2010"; month: "May"; expenses: "5"; income: "9" } - ListElement{ year: "2010"; month: "Jun"; expenses: "5"; income: "8" } - ListElement{ year: "2010"; month: "Jul"; expenses: "3"; income: "7" } - ListElement{ year: "2010"; month: "Aug"; expenses: "1"; income: "5" } - ListElement{ year: "2010"; month: "Sep"; expenses: "2"; income: "4" } - ListElement{ year: "2010"; month: "Oct"; expenses: "10"; income: "13" } - ListElement{ year: "2010"; month: "Nov"; expenses: "12"; income: "17" } - ListElement{ year: "2010"; month: "Dec"; expenses: "6"; income: "9" } + 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{ year: "2011"; month: "Jan"; expenses: "2"; income: "6" } - ListElement{ year: "2011"; month: "Feb"; expenses: "4"; income: "8" } - ListElement{ year: "2011"; month: "Mar"; expenses: "7"; income: "12" } - ListElement{ year: "2011"; month: "Apr"; expenses: "9"; income: "15" } - ListElement{ year: "2011"; month: "May"; expenses: "7"; income: "19" } - ListElement{ year: "2011"; month: "Jun"; expenses: "9"; income: "18" } - ListElement{ year: "2011"; month: "Jul"; expenses: "13"; income: "17" } - ListElement{ year: "2011"; month: "Aug"; expenses: "5"; income: "9" } - ListElement{ year: "2011"; month: "Sep"; expenses: "3"; income: "8" } - ListElement{ year: "2011"; month: "Oct"; expenses: "13"; income: "15" } - ListElement{ year: "2011"; month: "Nov"; expenses: "8"; income: "17" } - ListElement{ year: "2011"; month: "Dec"; expenses: "7"; income: "10" } + 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{ year: "2012"; month: "Jan"; expenses: "12"; income: "16" } - ListElement{ year: "2012"; month: "Feb"; expenses: "24"; income: "28" } - ListElement{ year: "2012"; month: "Mar"; expenses: "27"; income: "22" } - ListElement{ year: "2012"; month: "Apr"; expenses: "29"; income: "25" } - ListElement{ year: "2012"; month: "May"; expenses: "27"; income: "29" } - ListElement{ year: "2012"; month: "Jun"; expenses: "19"; income: "18" } - ListElement{ year: "2012"; month: "Jul"; expenses: "13"; income: "17" } - ListElement{ year: "2012"; month: "Aug"; expenses: "15"; income: "19" } - ListElement{ year: "2012"; month: "Sep"; expenses: "3"; income: "8" } - ListElement{ year: "2012"; month: "Oct"; expenses: "3"; income: "6" } - ListElement{ year: "2012"; month: "Nov"; expenses: "4"; income: "8" } - ListElement{ year: "2012"; month: "Dec"; expenses: "5"; income: "9" } + 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" } } } diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml index 0df8d8ae..2bb5e376 100644 --- a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml +++ b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml @@ -19,7 +19,7 @@ import QtQuick 2.1 import QtQuick.Controls 1.0 import QtQuick.Layouts 1.0 -import QtDataVisualization 1.0 +import QtDataVisualization 1.1 import QtQuick.Window 2.0 import "." @@ -50,14 +50,13 @@ Rectangle { // Set tableView current row to selected bar var rowRole = series.dataProxy.rowLabels[position.x]; var colRole = series.dataProxy.columnLabels[position.y]; + var checkTimestamp = rowRole + "-" + colRole var currentRow = tableView.currentRow - if (currentRow === -1 || rowRole !== graphData.model.get(currentRow).year - || colRole !== graphData.model.get(currentRow).month) { + if (currentRow === -1 || checkTimestamp !== graphData.model.get(currentRow).timestamp) { var totalRows = tableView.rowCount; for (var i = 0; i < totalRows; i++) { - var currentRowRole = graphData.model.get(i).year - var currentColRole = graphData.model.get(i).month - if (currentRowRole === rowRole && currentColRole === colRole) { + 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") { @@ -111,9 +110,13 @@ Rectangle { ItemModelBarDataProxy { id: modelProxy itemModel: graphData.model - rowRole: "year" - columnRole: "month" + rowRole: "timestamp" + columnRole: "timestamp" valueRole: "income" + rowRolePattern: /^(\d\d\d\d).*$/ + columnRolePattern: /^.*-(\d\d)$/ + rowRoleReplace: "\\1" + columnRoleReplace: "\\1" } //! [3] @@ -136,9 +139,13 @@ Rectangle { ItemModelBarDataProxy { id: secondaryProxy itemModel: graphData.model - rowRole: "year" - columnRole: "month" + rowRole: "timestamp" + columnRole: "timestamp" valueRole: "expenses" + rowRolePattern: /^(\d\d\d\d).*$/ + columnRolePattern: /^.*-(\d\d)$/ + rowRoleReplace: "\\1" + columnRoleReplace: "\\1" } //! [4] @@ -157,16 +164,42 @@ Rectangle { id: tableView anchors.top: parent.top anchors.left: parent.left - TableViewColumn{ role: "year" ; title: "Year" ; width: tableView.width / 4 } - TableViewColumn{ role: "month" ; title: "Month" ; width: tableView.width / 4 } + 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 { + 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: styleData.value + horizontalAlignment: styleData.textAlignment + + Component.onCompleted: { + if (styleData.column === 0) { + var pattern = /(\d\d\d\d)-(\d\d)/ + var matches = pattern.exec(styleData.value) + var colIndex = parseInt(matches[2], 10) - 1 + text = matches[1] + " - " + barGraph.columnAxis.labels[colIndex] + + } + } + } + } + model: graphData.model //! [2] onCurrentRowChanged: { - var rowIndex = modelProxy.rowCategoryIndex(graphData.model.get(currentRow).year) - var colIndex = modelProxy.columnCategoryIndex(graphData.model.get(currentRow).month) + 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 = modelProxy.columnCategoryIndex(matches[2]) if (selectedSeries.visible) mainview.selectedSeries.selectedBar = Qt.point(rowIndex, colIndex) else if (barSeries.visible) -- cgit v1.2.3