Implement background color support from theme

Ramove unused background color property from GraphsView and
instead use the theme background color properties.

Task-number: QTBUG-120998
Change-Id: Ie96f911a8bc9078f51c1d76cc38aab102f20519d
Reviewed-by: Tomi Korpipää <tomi.korpipaa@qt.io>

12 files changed, 30 insertions, 63 deletions

diff --git a/examples/graphs/2d/testbed/qml/testbed/AreaSeries.qml b/examples/graphs/2d/testbed/qml/testbed/AreaSeries.qml
index ab09845..ba82a28 100644
--- a/examples/graphs/2d/testbed/qml/testbed/AreaSeries.qml
+++ b/examples/graphs/2d/testbed/qml/testbed/AreaSeries.qml
@@ -80,7 +80,6 @@ Rectangle {
         anchors.fill: parent
         anchors.margins: 20 * px
         anchors.rightMargin: settingsView.posX + 20 * px
-        backgroundColor: "#202020"
 
         axisX: ValueAxis {
             id: xAxis
@@ -95,6 +94,7 @@ Rectangle {
             id: seriesTheme
             colorScheme: Qt.Dark
             theme: GraphsTheme.Theme.QtGreen
+            backgroundColor: "#202020"
         }
 
         AreaSeries {
diff --git a/examples/graphs/2d/testbed/qml/testbed/AxisGridSetup.qml b/examples/graphs/2d/testbed/qml/testbed/AxisGridSetup.qml
index 3e0e596..37b1ebd 100644
--- a/examples/graphs/2d/testbed/qml/testbed/AxisGridSetup.qml
+++ b/examples/graphs/2d/testbed/qml/testbed/AxisGridSetup.qml
@@ -14,8 +14,8 @@ Rectangle {
     GraphsView {
         id: chartView
         anchors.fill: parent
-        anchors.margins: 20 * px
-        anchors.rightMargin: settingsView.posX + 20 * px
+        anchors.margins: 50 * px
+        anchors.rightMargin: settingsView.posX + 60 * px
         shadowEnabled: checkBoxShadowEnabled.checked
         shadowColor: "#80404040"
         axisX: BarCategoryAxis {
@@ -44,6 +44,7 @@ Rectangle {
         theme: GraphsTheme {
             id: myTheme
             colorScheme: Qt.Dark
+            backgroundColor: "#20000000"
             theme: GraphsTheme.Theme.QtGreen
             axisXLabelFont.pixelSize: 20
             gridMainColor: "#ffffff"
diff --git a/examples/graphs/2d/testbed/qml/testbed/BarLabels.qml b/examples/graphs/2d/testbed/qml/testbed/BarLabels.qml
index 219062e..cf82445 100644
--- a/examples/graphs/2d/testbed/qml/testbed/BarLabels.qml
+++ b/examples/graphs/2d/testbed/qml/testbed/BarLabels.qml
@@ -27,7 +27,8 @@ Rectangle {
         theme: GraphsTheme {
             id: myTheme
             colorScheme: Qt.Dark
-            theme: GraphsTheme.QtGreen
+            theme: GraphsTheme.Theme.QtGreen
+            backgroundEnabled: false
             axisXLabelFont.pixelSize: 20
         }
         BarSeries {
diff --git a/examples/graphs/2d/testbed/qml/testbed/BarThemes.qml b/examples/graphs/2d/testbed/qml/testbed/BarThemes.qml
index c7ee6a7..b997170 100644
--- a/examples/graphs/2d/testbed/qml/testbed/BarThemes.qml
+++ b/examples/graphs/2d/testbed/qml/testbed/BarThemes.qml
@@ -56,7 +56,6 @@ Rectangle {
             text: "Dark"
             onClicked: {
                 mainView.resetCustomGraphTheme()
-                background.color = "#202020"
                 myTheme.colorScheme = Qt.Dark
             }
         }
@@ -64,7 +63,6 @@ Rectangle {
             text: "Light"
             onClicked: {
                 mainView.resetCustomGraphTheme()
-                background.color = "#eeeeee"
                 myTheme.colorScheme = Qt.Light
             }
         }
@@ -169,23 +167,14 @@ Rectangle {
         }
     }
 
-    Rectangle {
-        id: background
+    GraphsView {
+        id: chartView
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         anchors.top: graphToolbar.bottom
-        anchors.margins: 10
-        color: "#202020"
-        border.color: "#606060"
-        border.width: 2
-        radius: 10
-    }
-
-    GraphsView {
-        id: chartView
-        anchors.fill: background
-        anchors.leftMargin: 30
+        anchors.margins: 20
+        marginLeft: 60 // Space for legend
         axisX: BarCategoryAxis {
             categories: ["2007", "2008", "2009", "2010", "2011", "2012"]
         }
@@ -245,7 +234,7 @@ Rectangle {
     Column {
         id: legendColumn
         property var sets: [set1, set2, set3, set4]
-        anchors.left: background.left
+        anchors.left: chartView.left
         anchors.leftMargin: 10
         anchors.verticalCenter: chartView.verticalCenter
         spacing: 2
diff --git a/examples/graphs/2d/testbed/qml/testbed/Callout.qml b/examples/graphs/2d/testbed/qml/testbed/Callout.qml
index 6f9bd82..c9fbd4d 100644
--- a/examples/graphs/2d/testbed/qml/testbed/Callout.qml
+++ b/examples/graphs/2d/testbed/qml/testbed/Callout.qml
@@ -12,15 +12,6 @@ Rectangle {
     height: 600
     color: "#404040"
 
-    Rectangle {
-        id: background
-        anchors.fill: chartView
-        color: "#202020"
-        border.color: "#606060"
-        border.width: 2
-        radius: 10
-    }
-
     GraphsView {
         id: chartView
         anchors.left: parent.left
@@ -28,7 +19,6 @@ Rectangle {
         anchors.bottom: parent.bottom
         anchors.top: parent.top
         anchors.margins: 10
-        backgroundColor: "#202020"
 
         axisX: BarCategoryAxis { categories: ["2023", "2024", "2025", "2026"] }
         axisY: ValueAxis {
diff --git a/examples/graphs/2d/testbed/qml/testbed/DynamicSeries.qml b/examples/graphs/2d/testbed/qml/testbed/DynamicSeries.qml
index 70a3220..eb8fb86 100644
--- a/examples/graphs/2d/testbed/qml/testbed/DynamicSeries.qml
+++ b/examples/graphs/2d/testbed/qml/testbed/DynamicSeries.qml
@@ -21,7 +21,6 @@ Rectangle {
         anchors.bottom: parent.bottom
         anchors.top: parent.top
         anchors.margins: 10
-        backgroundColor: "#202020"
 
         axisY: ValueAxis {
             id: yAxis
diff --git a/examples/graphs/2d/testbed/qml/testbed/LineProperties.qml b/examples/graphs/2d/testbed/qml/testbed/LineProperties.qml
index 6b7dc71..1dc6d74 100644
--- a/examples/graphs/2d/testbed/qml/testbed/LineProperties.qml
+++ b/examples/graphs/2d/testbed/qml/testbed/LineProperties.qml
@@ -131,7 +131,6 @@ Rectangle {
         anchors.top: toolbar.bottom
         anchors.margins: 10
         anchors.rightMargin: settingsView.posX + 20 * px
-        backgroundColor: "#202020"
 
         axisX: ValueAxis {
             id: xAxis
diff --git a/examples/graphs/2d/testbed/qml/testbed/ScatterProperties.qml b/examples/graphs/2d/testbed/qml/testbed/ScatterProperties.qml
index f0b2a4a..f634db7 100644
--- a/examples/graphs/2d/testbed/qml/testbed/ScatterProperties.qml
+++ b/examples/graphs/2d/testbed/qml/testbed/ScatterProperties.qml
@@ -54,7 +54,6 @@ Rectangle {
         anchors.bottom: parent.bottom
         anchors.top: toolbar.bottom
         anchors.margins: 10
-        backgroundColor: "#202020"
 
         axisX: ValueAxis {
             id: xAxis
diff --git a/examples/graphs/2d/testbed/qml/testbed/SplineSeries.qml b/examples/graphs/2d/testbed/qml/testbed/SplineSeries.qml
index 1730b76..5b8bf91 100644
--- a/examples/graphs/2d/testbed/qml/testbed/SplineSeries.qml
+++ b/examples/graphs/2d/testbed/qml/testbed/SplineSeries.qml
@@ -17,7 +17,6 @@ Rectangle {
         anchors.bottom: parent.bottom
         anchors.top: parent.top
         anchors.margins: 10
-        backgroundColor: "#202020"
 
         axisX: ValueAxis {
             id: xAxis
diff --git a/src/graphs2d/qgraphsview.cpp b/src/graphs2d/qgraphsview.cpp
index c109ef5..a897d6f 100644
--- a/src/graphs2d/qgraphsview.cpp
+++ b/src/graphs2d/qgraphsview.cpp
@@ -52,21 +52,6 @@ QGraphsView::~QGraphsView()
         removeSeries(s);
 }
 
-void QGraphsView::setBackgroundColor(QColor color)
-{
-    auto &b = m_backgroundBrush;
-    if (b.style() != Qt::SolidPattern || color != b.color()) {
-        b.setStyle(Qt::SolidPattern);
-        b.setColor(color);
-        emit backgroundColorChanged();
-    }
-}
-
-QColor QGraphsView::backgroundColor()
-{
-    return m_backgroundBrush.color();
-}
-
 /*!
     \qmlproperty color GraphsView::plotAreaBackgroundColor
     The background color of the plot area.
@@ -522,6 +507,23 @@ void QGraphsView::updatePolish()
         // Initialize shaders after system's event queue
         QTimer::singleShot(0, m_axisRenderer, &AxisRenderer::initialize);
     }
+    if (m_theme && m_theme->isBackgroundEnabled()) {
+        if (!m_backgroundRectangle) {
+            // Create m_backgroundRectangle only when it is needed
+            m_backgroundRectangle = new QQuickRectangle(this);
+            m_backgroundRectangle->setZ(-2);
+        }
+        m_backgroundRectangle->setColor(m_theme->backgroundColor());
+        m_backgroundRectangle->setWidth(width());
+        m_backgroundRectangle->setHeight(height());
+        m_backgroundRectangle->setVisible(true);
+    } else if (m_backgroundRectangle) {
+        // Hide and delete the m_backgroundRectangle
+        m_backgroundRectangle->setVisible(false);
+        m_backgroundRectangle->deleteLater();
+        m_backgroundRectangle = nullptr;
+    }
+
     // Polish for all series
     for (auto series : std::as_const(m_seriesList)) {
         if (m_barsRenderer) {
diff --git a/src/graphs2d/qgraphsview_p.h b/src/graphs2d/qgraphsview_p.h
index fac5bdf..69120cf 100644
--- a/src/graphs2d/qgraphsview_p.h
+++ b/src/graphs2d/qgraphsview_p.h
@@ -18,6 +18,7 @@
 #include <QList>
 #include <QQmlListProperty>
 #include <QtGraphs/qabstractseries.h>
+#include <QtQuick/private/qquickrectangle_p.h>
 
 #include <QBrush>
 #include <QPen>
@@ -38,8 +39,6 @@ class QGraphsView : public QQuickItem
     Q_OBJECT
     Q_PROPERTY(QGraphsTheme *theme READ theme WRITE setTheme NOTIFY themeChanged)
     Q_PROPERTY(QQmlListProperty<QObject> seriesList READ seriesList CONSTANT)
-    // TODO: Remove this?
-    Q_PROPERTY(QColor backgroundColor READ backgroundColor WRITE setBackgroundColor NOTIFY backgroundColorChanged)
     Q_PROPERTY(QColor plotAreaBackgroundColor READ plotAreaBackgroundColor
                        WRITE setPlotAreaBackgroundColor NOTIFY plotAreaBackgroundColorChanged)
     Q_PROPERTY(qreal marginTop READ marginTop WRITE setMarginTop NOTIFY marginTopChanged)
@@ -70,9 +69,6 @@ public:
     explicit QGraphsView(QQuickItem *parent = nullptr);
     ~QGraphsView() override;
 
-    void setBackgroundColor(QColor color);
-    QColor backgroundColor();
-
     void setPlotAreaBackgroundColor(const QColor &color);
     QColor plotAreaBackgroundColor() const;
 
@@ -166,7 +162,6 @@ protected:
     void updatePolish() override;
 
 Q_SIGNALS:
-    void backgroundColorChanged();
     void plotAreaBackgroundColorChanged();
     void themeChanged();
     void marginTopChanged();
@@ -207,9 +202,9 @@ private:
     PieRenderer *m_pieRenderer = nullptr;
     AreaRenderer *m_areaRenderer = nullptr;
     QList<QObject *> m_seriesList;
-    QBrush m_backgroundBrush;
     QColor m_plotAreaBackgroundColor =  QColor(Qt::transparent);
     QSGClipNode *m_backgroundNode = nullptr;
+    QQuickRectangle *m_backgroundRectangle = nullptr;
 
     QList<QAbstractAxis *> m_axis;
 
diff --git a/tests/auto/qml2dtest/graphsview/tst_graphsview.qml b/tests/auto/qml2dtest/graphsview/tst_graphsview.qml
index 720ec08..c2e8e83 100644
--- a/tests/auto/qml2dtest/graphsview/tst_graphsview.qml
+++ b/tests/auto/qml2dtest/graphsview/tst_graphsview.qml
@@ -28,7 +28,6 @@ Item {
         height: top.height
         width: top.width
         theme: myTheme
-        backgroundColor: "#fafade"
         plotAreaBackgroundColor: "#20304050"
         marginBottom: 5
         marginLeft: 10
@@ -74,7 +73,6 @@ Item {
         function test_1_initial() {
             compare(initial.height, 0)
             compare(initial.width, 0)
-            compare(initial.backgroundColor, "#000000")
             compare(initial.plotAreaBackgroundColor, "#00000000")
             compare(initial.marginTop, 20)
             compare(initial.marginBottom, 20)
@@ -90,7 +88,6 @@ Item {
         function test_1_initial_change() {
             initial.height = 100
             initial.width = 100
-            initial.backgroundColor = "#222222"
             initial.plotAreaBackgroundColor = "#333333"
             initial.marginTop = 10
             initial.marginBottom = 11
@@ -105,7 +102,6 @@ Item {
 
             compare(initial.height, 100)
             compare(initial.width, 100)
-            compare(initial.backgroundColor, "#222222")
             compare(initial.plotAreaBackgroundColor, "#333333")
             compare(initial.marginTop, 10)
             compare(initial.marginBottom, 11)
@@ -124,7 +120,6 @@ Item {
         function test_1_initialized() {
             compare(initialized.height, top.height)
             compare(initialized.width, top.width)
-            compare(initialized.backgroundColor, "#fafade")
             compare(initialized.plotAreaBackgroundColor, "#20304050")
             compare(initialized.marginTop, 5)
             compare(initialized.marginBottom, 5)
@@ -139,7 +134,6 @@ Item {
         function test_2_initialized_change() {
             initialized.height = 100
             initialized.width = 100
-            initialized.backgroundColor = "#222222"
             initialized.plotAreaBackgroundColor = "#333333"
             initialized.marginTop = 10
             initialized.marginBottom = 11
@@ -154,7 +148,6 @@ Item {
 
             compare(initialized.height, 100)
             compare(initialized.width, 100)
-            compare(initialized.backgroundColor, "#222222")
             compare(initialized.plotAreaBackgroundColor, "#333333")
             compare(initialized.marginTop, 10)
             compare(initialized.marginBottom, 11)