Add row colors for Bar3DSeries

Added rowColors property for Bar3DSeries.
The property can be used draw the individual
rows in the series in different colors.
Autotests and a manualtest for the property were
added also.

Fixes: QTBUG-96682
Change-Id: I5c4f778189d079206500a9289490792584eab2b9
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: Tomi Korpipää <tomi.korpipaa@qt.io>

8 files changed, 777 insertions, 0 deletions

diff --git a/tests/auto/cpptest/q3dbars-series/tst_series.cpp b/tests/auto/cpptest/q3dbars-series/tst_series.cpp
index 11dfd3f2..74e375c5 100644
--- a/tests/auto/cpptest/q3dbars-series/tst_series.cpp
+++ b/tests/auto/cpptest/q3dbars-series/tst_series.cpp
@@ -90,6 +90,7 @@ void tst_series::initialProperties()
     QVERIFY(m_series->dataProxy());
     QCOMPARE(m_series->meshAngle(), 0.0f);
     QCOMPARE(m_series->selectedBar(), m_series->invalidSelectionPosition());
+    QCOMPARE(m_series->rowColors().size(), 0);
 
     // Common properties
     QCOMPARE(m_series->baseColor(), QColor(Qt::black));
@@ -132,6 +133,13 @@ void tst_series::initializeProperties()
     gradient3.setColorAt(0.0, Qt::white);
     gradient3.setColorAt(1.0, Qt::gray);
 
+    QList<QColor> rowColors;
+    rowColors.append(QColor(Qt::green));
+    rowColors.append(QColor(Qt::blue));
+    rowColors.append(QColor(Qt::red));
+
+    m_series->setRowColors(rowColors);
+
     // Common properties
     m_series->setBaseColor(QColor(Qt::blue));
     m_series->setBaseGradient(gradient1);
@@ -165,6 +173,11 @@ void tst_series::initializeProperties()
     QCOMPARE(m_series->singleHighlightGradient().stops().at(0).second, QColor(Qt::white));
     QCOMPARE(m_series->userDefinedMesh(), QString(":/customitem.obj"));
     QCOMPARE(m_series->isVisible(), false);
+
+    QCOMPARE(m_series->rowColors().size(), 3);
+    QCOMPARE(m_series->rowColors().at(0), QColor(Qt::green));
+    QCOMPARE(m_series->rowColors().at(1), QColor(Qt::blue));
+    QCOMPARE(m_series->rowColors().at(2), QColor(Qt::red));
 }
 
 void tst_series::invalidProperties()
diff --git a/tests/auto/qmltest/bars3d/tst_barseries.qml b/tests/auto/qmltest/bars3d/tst_barseries.qml
index 77eba61a..77dd0895 100644
--- a/tests/auto/qmltest/bars3d/tst_barseries.qml
+++ b/tests/auto/qmltest/bars3d/tst_barseries.qml
@@ -64,6 +64,20 @@ Item {
         ]
     }
 
+    ThemeColor {
+        id: rowColor1
+        color: "green"
+    }
+
+    ThemeColor {
+        id: rowColor2
+        color: "blue"
+    }
+    ThemeColor {
+        id: rowColor3
+        color: "red"
+    }
+
     Bar3DSeries {
         id: initialized
         dataProxy: ItemModelBarDataProxy {
@@ -92,6 +106,7 @@ Item {
         singleHighlightGradient: gradient3
         userDefinedMesh: ":/customitem.obj"
         visible: false
+        rowColors: [ rowColor1, rowColor2, rowColor3 ]
     }
 
     ItemModelBarDataProxy {
@@ -118,6 +133,7 @@ Item {
             compare(initial.invalidSelectionPosition, Qt.point(-1, -1))
             compare(initial.meshAngle, 0)
             compare(initial.selectedBar, Qt.point(-1, -1))
+            compare(initial.rowColors.length, 0)
         }
 
         function test_2_initial_common() {
@@ -149,6 +165,7 @@ Item {
             compare(initialized.dataProxy.rowCount, 2)
             fuzzyCompare(initialized.meshAngle, 15.0, 0.01)
             compare(initialized.selectedBar, Qt.point(0, 0))
+            compare(initialized.rowColors.length, 3)
         }
 
         function test_2_initialized_common() {
@@ -177,6 +194,7 @@ Item {
             change.dataProxy = proxy1
             change.meshAngle = 15.0
             change.selectedBar = Qt.point(0, 0)
+            change.rowColors = [rowColor1, rowColor2, rowColor3]
         }
 
         function test_2_test_change() {
@@ -222,5 +240,10 @@ Item {
             gradient1.stops[0].color = "yellow"
             compare(change.baseGradient.stops[0].color, "#ffff00")
         }
+
+        function test_5_change_rowColors() {
+            rowColor2.color = "purple"
+            compare(change.rowColors[1].color, "#800080")
+        }
     }
 }
diff --git a/tests/manual/CMakeLists.txt b/tests/manual/CMakeLists.txt
index a1ca1dba..922fe921 100644
--- a/tests/manual/CMakeLists.txt
+++ b/tests/manual/CMakeLists.txt
@@ -5,6 +5,7 @@ if(TARGET Qt::Quick)
     add_subdirectory(qmlperf)
     add_subdirectory(qmlgradient)
     add_subdirectory(qmlheightmap)
+    add_subdirectory(qmlbarsrowcolors)
 endif()
 if(NOT ANDROID AND NOT IOS AND NOT WINRT)
     add_subdirectory(barstest)
diff --git a/tests/manual/qmlbarsrowcolors/CMakeLists.txt b/tests/manual/qmlbarsrowcolors/CMakeLists.txt
new file mode 100644
index 00000000..bd8da958
--- /dev/null
+++ b/tests/manual/qmlbarsrowcolors/CMakeLists.txt
@@ -0,0 +1,52 @@
+set(CMAKE_INCLUDE_CURRENT_DIR ON)
+
+set(CMAKE_AUTOMOC ON)
+set(CMAKE_AUTORCC ON)
+set(CMAKE_AUTOUIC ON)
+
+qt_internal_add_manual_test(qmlbarsrowcolors
+    GUI
+    SOURCES
+        main.cpp
+    )
+
+find_package(Qt6 COMPONENTS Core)
+find_package(Qt6 COMPONENTS Gui)
+find_package(Qt6 COMPONENTS Qml)
+find_package(Qt6 COMPONENTS Quick)
+find_package(Qt6 COMPONENTS DataVisualization)
+
+set_target_properties(qmlbarsrowcolors PROPERTIES
+    WIN32_EXECUTABLE TRUE
+    MACOSX_BUNDLE TRUE
+)
+target_compile_definitions(qmlbarsrowcolors PUBLIC
+    QT_DISABLE_DEPRECATED_BEFORE=0x050F00
+)
+
+target_link_libraries(qmlbarsrowcolors PUBLIC
+    Qt::Core
+    Qt::Gui
+    Qt::Qml
+    Qt::Quick
+    Qt::DataVisualization
+)
+
+set(qmlbarsrowcolors_resource_files
+    "qml/qmlbarsrowcolors/Axes.qml"
+    "qml/qmlbarsrowcolors/Data.qml"
+    "qml/qmlbarsrowcolors/main.qml"
+)
+
+qt6_add_resources(qmlbarsrowcolors "qmlbarsrowcolors"
+    PREFIX
+        "/"
+    FILES
+        ${qmlbarsrowcolors_resource_files}
+)
+
+install(TARGETS qmlbarsrowcolors
+    RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}"
+    BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}"
+    LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}"
+)
diff --git a/tests/manual/qmlbarsrowcolors/main.cpp b/tests/manual/qmlbarsrowcolors/main.cpp
new file mode 100644
index 00000000..25ed1447
--- /dev/null
+++ b/tests/manual/qmlbarsrowcolors/main.cpp
@@ -0,0 +1,59 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 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$
+**
+****************************************************************************/
+
+#include <QtGui/QGuiApplication>
+#include <QtCore/QDir>
+#include <QtQuick/QQuickView>
+#include <QtQml/QQmlEngine>
+
+int main(int argc, char *argv[])
+{
+    qputenv("QSG_RHI_BACKEND", "opengl");
+    QGuiApplication app(argc, argv);
+
+    QQuickView viewer;
+
+    // The following are needed to make examples run without having to install the module
+    // in desktop environments.
+#ifdef Q_OS_WIN
+    QString extraImportPath(QStringLiteral("%1/../../../../%2"));
+#else
+    QString extraImportPath(QStringLiteral("%1/../../../%2"));
+#endif
+    viewer.engine()->addImportPath(extraImportPath.arg(QGuiApplication::applicationDirPath(),
+                                      QString::fromLatin1("qml")));
+
+    viewer.setTitle(QStringLiteral("Monthly income/expenses"));
+
+    viewer.setSource(QUrl("qrc:/qml/qmlbarsrowcolors/main.qml"));
+    viewer.setResizeMode(QQuickView::SizeRootObjectToView);
+    viewer.show();
+
+    return app.exec();
+}
diff --git a/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/Axes.qml b/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/Axes.qml
new file mode 100644
index 00000000..e17ca521
--- /dev/null
+++ b/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/Axes.qml
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 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
+import QtDataVisualization
+
+Item {
+    property alias column: columnAxis
+    property alias row: rowAxis
+    property alias value: valueAxis
+    property alias total: totalAxis
+
+    // Custom labels for columns, since the data contains abbreviated month names.
+    //! [0]
+    CategoryAxis3D {
+        id: columnAxis
+        labels: ["January", "February", "March", "April", "May", "June",
+            "July", "August", "September", "October", "November", "December"]
+        labelAutoRotation: 30
+    }
+    //! [0]
+    CategoryAxis3D {
+        id: totalAxis
+        labels: ["Yearly total"]
+        labelAutoRotation: 30
+    }
+    CategoryAxis3D {
+        // For row labels we can use row labels from data proxy, no labels defined for rows.
+        id: rowAxis
+        labelAutoRotation: 30
+    }
+
+    ValueAxis3D {
+        id: valueAxis
+        min: 0
+        max: 35
+        labelFormat: "%.2f M\u20AC"
+        title: "Monthly income"
+        labelAutoRotation: 90
+    }
+}
diff --git a/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/Data.qml b/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/Data.qml
new file mode 100644
index 00000000..cabb6522
--- /dev/null
+++ b/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/Data.qml
@@ -0,0 +1,144 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 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
+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
+        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{ 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{ 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{ 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{ 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{ 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{ 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{ 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/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/main.qml b/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/main.qml
new file mode 100644
index 00000000..0d72369b
--- /dev/null
+++ b/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/main.qml
@@ -0,0 +1,418 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 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
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtDataVisualization
+import QtQuick.Window
+import Qt.labs.qmlmodels
+import "."
+
+Item {
+    id: mainview
+
+    property int buttonLayoutHeight: 180;
+    property int currentRow
+    property Bar3DSeries selectedSeries
+
+    function toggleRowColorsForBarSeries(enable) {
+        if (enable)
+            barSeries.rowColors = [color1, color2, color3]
+        else
+            barSeries.rowColors = []
+    }
+
+    function toggleRowColorsForSecondarySeries(enable) {
+        if (enable)
+            secondarySeries.rowColors = [color4, color5, color6]
+        else
+            secondarySeries.rowColors = []
+    }
+
+    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
+
+        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
+                if (modelTimestamp === checkTimestamp) {
+                    currentRow = i
+                    break
+                }
+            }
+        }
+    }
+
+    width: 1280
+    height: 1024
+
+    state: Screen.width < Screen.height ? "portrait" : "landscape"
+    selectedSeries: barSeries
+
+    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)
+    }
+
+    Data {
+        id: graphData
+    }
+
+    Axes {
+        id: graphAxes
+    }
+
+    ThemeColor {
+        id: color1
+        color: "green"
+    }
+
+    ThemeColor {
+        id: color2
+        color: "blue"
+    }
+
+    ThemeColor {
+        id: color3
+        color: "red"
+    }
+
+    ThemeColor {
+        id: color4
+        color: "yellow"
+    }
+
+    ThemeColor {
+        id: color5
+        color: "purple"
+    }
+
+    ThemeColor {
+        id: color6
+        color: "orange"
+    }
+
+    Theme3D {
+        id: theme1
+        type: Theme3D.ThemeRetro
+        labelBorderEnabled: true
+        font.pointSize: 35
+        labelBackgroundEnabled: true
+        colorStyle: Theme3D.ColorStyleUniform
+    }
+
+    Theme3D {
+        id: theme2
+        type: Theme3D.ThemeArmyBlue
+        labelBorderEnabled: true
+        font.pointSize: 35
+        labelBackgroundEnabled: true
+        colorStyle: Theme3D.ColorStyleUniform
+    }
+
+    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: theme1
+            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"
+                rowColors: [color4 , color5, color6]
+
+                onSelectedBarChanged: (position)=> handleSelectionChange(secondarySeries, position)
+
+                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
+                }
+            }
+
+            Bar3DSeries {
+                id: barSeries
+                itemLabelFormat: "Income, @colLabel, @rowLabel: @valueLabel"
+                rowColors: [color1, color2, color3]
+
+                onSelectedBarChanged: (position)=> handleSelectionChange(barSeries, position)
+
+                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
+                }
+            }
+        }
+    }
+
+    ColumnLayout {
+        id: tableViewLayout
+
+        anchors.top: parent.top
+        anchors.left: parent.left
+
+        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
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    ColumnLayout {
+        id: controlLayout
+        spacing: 0
+
+        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"
+                }
+            }
+        }
+
+        Button {
+            id: themeToggle
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            text: "Use theme 2"
+            clip: true
+
+            onClicked: {
+                if (text === "Use theme 2") {
+                    barGraph.theme = theme2
+                    text = "Use theme 1"
+                } else {
+                    barGraph.theme = theme1
+                    text = "Use theme 2"
+                }
+            }
+        }
+
+        Button {
+            id: barSeriesRowColorToggle
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            text: "Disable row colors"
+
+            onClicked: {
+                if (text === "Disable row colors") {
+                    toggleRowColorsForBarSeries(false)
+                    toggleRowColorsForSecondarySeries(false)
+                    text = "Enable row colors"
+                } else {
+                    toggleRowColorsForBarSeries(true)
+                    toggleRowColorsForSecondarySeries(true)
+                    text = "Disable row colors"
+                }
+            }
+        }
+    }
+
+    states: [
+        State  {
+            name: "landscape"
+            PropertyChanges {
+                target: dataView
+                width: mainview.width / 4 * 3
+                height: mainview.height
+            }
+            PropertyChanges  {
+                target: tableViewLayout
+                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: tableViewLayout.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: tableViewLayout
+                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
+            }
+        }
+    ]
+}