Enable mapping single role to multiple properties for bars

Surface and scatter to follow in separate task

Task-number: QTRD-3074
Change-Id: I790078446cd1b805a83da2e3760eaf27c586aaab
Reviewed-by: Tomi Korpipää <tomi.korpipaa@digia.com>

2 files changed, 131 insertions, 98 deletions

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)