Revamp qmlbars example visuals and documentation

Pick-to: 6.5
Fixes: QTBUG-110801
Change-Id: I31ee31ab29cb230a7eadd9641bd817249e2e41c7
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
Reviewed-by: Tomi Korpipää <tomi.korpipaa@qt.io>

2 files changed, 234 insertions, 157 deletions

diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml b/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml
index d1352eef..f56774c3 100644
--- a/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml
+++ b/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml
@@ -8,111 +8,111 @@ Item {
     property alias model: dataModel
 
     property var modelAsJsArray: {
-        var arr = []
+        var arr = [];
         for (var i = 0; i < dataModel.count; i++) {
-            var row = dataModel.get(i)
+            var row = dataModel.get(i);
             arr.push({
                          timestamp: row.timestamp,
                          expenses: row.expenses,
                          income: row.income
-                     })
+                     });
         }
-        return arr
+        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" }
+        ListElement{ timestamp: "2016-01"; expenses: "-4";  income: "5" }
+        ListElement{ timestamp: "2016-02"; expenses: "-5";  income: "6" }
+        ListElement{ timestamp: "2016-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: "2016-04"; expenses: "-3";  income: "2" }
+        ListElement{ timestamp: "2016-05"; expenses: "-4";  income: "1" }
+        ListElement{ timestamp: "2016-06"; expenses: "-2";  income: "2" }
+        ListElement{ timestamp: "2016-07"; expenses: "-1";  income: "3" }
+        ListElement{ timestamp: "2016-08"; expenses: "-5";  income: "1" }
+        ListElement{ timestamp: "2016-09"; expenses: "-2";  income: "3" }
+        ListElement{ timestamp: "2016-10"; expenses: "-5";  income: "2" }
+        ListElement{ timestamp: "2016-11"; expenses: "-8";  income: "5" }
+        ListElement{ timestamp: "2016-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: "2017-01"; expenses: "-3";  income: "1" }
+        ListElement{ timestamp: "2017-02"; expenses: "-4";  income: "2" }
+        ListElement{ timestamp: "2017-03"; expenses: "-12"; income: "4" }
+        ListElement{ timestamp: "2017-04"; expenses: "-13"; income: "6" }
+        ListElement{ timestamp: "2017-05"; expenses: "-14"; income: "11" }
+        ListElement{ timestamp: "2017-06"; expenses: "-7";  income: "7" }
+        ListElement{ timestamp: "2017-07"; expenses: "-6";  income: "4" }
+        ListElement{ timestamp: "2017-08"; expenses: "-4";  income: "15" }
+        ListElement{ timestamp: "2017-09"; expenses: "-2";  income: "18" }
+        ListElement{ timestamp: "2017-10"; expenses: "-29"; income: "25" }
+        ListElement{ timestamp: "2017-11"; expenses: "-23"; income: "29" }
+        ListElement{ timestamp: "2017-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: "2018-01"; expenses: "-3";  income: "8" }
+        ListElement{ timestamp: "2018-02"; expenses: "-8";  income: "14" }
+        ListElement{ timestamp: "2018-03"; expenses: "-10"; income: "20" }
+        ListElement{ timestamp: "2018-04"; expenses: "-12"; income: "24" }
+        ListElement{ timestamp: "2018-05"; expenses: "-10"; income: "19" }
+        ListElement{ timestamp: "2018-06"; expenses: "-5";  income: "8" }
+        ListElement{ timestamp: "2018-07"; expenses: "-1";  income: "4" }
+        ListElement{ timestamp: "2018-08"; expenses: "-7";  income: "12" }
+        ListElement{ timestamp: "2018-09"; expenses: "-4";  income: "16" }
+        ListElement{ timestamp: "2018-10"; expenses: "-22"; income: "33" }
+        ListElement{ timestamp: "2018-11"; expenses: "-16"; income: "25" }
+        ListElement{ timestamp: "2018-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: "2019-01"; expenses: "-4";  income: "5"  }
+        ListElement{ timestamp: "2019-02"; expenses: "-4";  income: "7"  }
+        ListElement{ timestamp: "2019-03"; expenses: "-11"; income: "14"  }
+        ListElement{ timestamp: "2019-04"; expenses: "-16"; income: "22"  }
+        ListElement{ timestamp: "2019-05"; expenses: "-3";  income: "5"  }
+        ListElement{ timestamp: "2019-06"; expenses: "-4";  income: "8"  }
+        ListElement{ timestamp: "2019-07"; expenses: "-7";  income: "9"  }
+        ListElement{ timestamp: "2019-08"; expenses: "-9";  income: "13"  }
+        ListElement{ timestamp: "2019-09"; expenses: "-1";  income: "6"  }
+        ListElement{ timestamp: "2019-10"; expenses: "-14"; income: "25"  }
+        ListElement{ timestamp: "2019-11"; expenses: "-19"; income: "29"  }
+        ListElement{ timestamp: "2019-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: "2020-01"; expenses: "-14"; income: "22"  }
+        ListElement{ timestamp: "2020-02"; expenses: "-5";  income: "7"  }
+        ListElement{ timestamp: "2020-03"; expenses: "-1";  income: "9"  }
+        ListElement{ timestamp: "2020-04"; expenses: "-1";  income: "12"  }
+        ListElement{ timestamp: "2020-05"; expenses: "-5";  income: "9"  }
+        ListElement{ timestamp: "2020-06"; expenses: "-5";  income: "8"  }
+        ListElement{ timestamp: "2020-07"; expenses: "-3";  income: "7"  }
+        ListElement{ timestamp: "2020-08"; expenses: "-1";  income: "5"  }
+        ListElement{ timestamp: "2020-09"; expenses: "-2";  income: "4"  }
+        ListElement{ timestamp: "2020-10"; expenses: "-10"; income: "13"  }
+        ListElement{ timestamp: "2020-11"; expenses: "-12"; income: "17"  }
+        ListElement{ timestamp: "2020-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: "2021-01"; expenses: "-2";  income: "6"  }
+        ListElement{ timestamp: "2021-02"; expenses: "-4";  income: "8"  }
+        ListElement{ timestamp: "2021-03"; expenses: "-7";  income: "12"  }
+        ListElement{ timestamp: "2021-04"; expenses: "-9";  income: "15"  }
+        ListElement{ timestamp: "2021-05"; expenses: "-7";  income: "19"  }
+        ListElement{ timestamp: "2021-06"; expenses: "-9";  income: "18"  }
+        ListElement{ timestamp: "2021-07"; expenses: "-13"; income: "17"  }
+        ListElement{ timestamp: "2021-08"; expenses: "-5";  income: "9"  }
+        ListElement{ timestamp: "2021-09"; expenses: "-3";  income: "8"  }
+        ListElement{ timestamp: "2021-10"; expenses: "-13"; income: "15"  }
+        ListElement{ timestamp: "2021-11"; expenses: "-8";  income: "17"  }
+        ListElement{ timestamp: "2021-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"  }
+        ListElement{ timestamp: "2022-01"; expenses: "-12";  income: "16"  }
+        ListElement{ timestamp: "2022-02"; expenses: "-24";  income: "28"  }
+        ListElement{ timestamp: "2022-03"; expenses: "-27";  income: "22"  }
+        ListElement{ timestamp: "2022-04"; expenses: "-29";  income: "25"  }
+        ListElement{ timestamp: "2022-05"; expenses: "-27";  income: "29"  }
+        ListElement{ timestamp: "2022-06"; expenses: "-19";  income: "18"  }
+        ListElement{ timestamp: "2022-07"; expenses: "-13";  income: "17"  }
+        ListElement{ timestamp: "2022-08"; expenses: "-15";  income: "19"  }
+        ListElement{ timestamp: "2022-09"; expenses: "-3";   income: "8"  }
+        ListElement{ timestamp: "2022-10"; expenses: "-3";   income: "6"  }
+        ListElement{ timestamp: "2022-11"; expenses: "-4";   income: "8"  }
+        ListElement{ timestamp: "2022-12"; expenses: "-5";   income: "9"  }
     }
 }
diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml
index 2dd136b1..c86e3dac 100644
--- a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml
+++ b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml
@@ -31,24 +31,24 @@ Item {
 
     function handleSelectionChange(series, position) {
         if (position !== series.invalidSelectionPosition)
-            selectedSeries = series
+            selectedSeries = series;
 
         // Set tableView current row to selected bar
         var rowRole = series.dataProxy.rowLabels[position.x];
-        var colRole
+        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;
                 }
             }
         }
@@ -62,10 +62,10 @@ Item {
         Bars3D {
             id: barGraph
             anchors.fill: parent
-            shadowQuality: AbstractGraph3D.ShadowQualityMedium
+            shadowQuality: AbstractGraph3D.ShadowQualitySoftHigh
             selectionMode: AbstractGraph3D.SelectionItem
             theme: Theme3D {
-                type: Theme3D.ThemeRetro
+                type: Theme3D.ThemeEbony
                 labelBorderEnabled: true
                 font.pointSize: 35
                 labelBackgroundEnabled: true
@@ -115,7 +115,7 @@ Item {
                 }
 
                 onSelectedBarChanged: (position) => mainview.handleSelectionChange(secondarySeries,
-                                                                                   position)
+                                                                                   position);
             }
 
             //! [3]
@@ -145,7 +145,7 @@ Item {
                 }
 
                 onSelectedBarChanged: (position) => mainview.handleSelectionChange(barSeries,
-                                                                                  position)
+                                                                                   position);
             }
         }
     }
@@ -166,6 +166,10 @@ Item {
                 required property int index
                 padding: 3
                 text: headerView.columnNames[index]
+                color: barGraph.theme.labelTextColor
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                elide: Text.ElideRight
             }
         }
 
@@ -192,11 +196,15 @@ Item {
                 required property int column
                 required property string display
                 implicitHeight: 30
-                implicitWidth: tableView.width / 3
-                color: row === mainview.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: mainview.currentRow = delegateRoot.row
+                    onClicked: mainview.currentRow = delegateRoot.row;
                 }
 
                 Text {
@@ -210,15 +218,19 @@ Item {
                     property string formattedText: {
                         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]
+                                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 delegateRoot.display
+                            return delegateRoot.display;
                         }
                     }
+                    color: barGraph.theme.labelTextColor
+                    horizontalAlignment: delegateRoot.column === 0 ? Text.AlignLeft
+                                                                   : Text.AlignHCenter
+                    elide: Text.ElideRight
                 }
             }
         }
@@ -226,21 +238,21 @@ Item {
 
     //! [2]
     onCurrentRowChanged: {
-        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
+        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
+            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]
 
@@ -252,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 {
@@ -295,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 {
@@ -313,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 {
@@ -340,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
+            }
         }
     }