Port the HelloGraphs example

Task-number: PYSIDE-2497
Change-Id: Ifa5ac24a5abf2f9a17736942bbeb8bb0f18e7067
Reviewed-by: Shyamnath Premnadh <Shyamnath.Premnadh@qt.io>

6 files changed, 231 insertions, 0 deletions

diff --git a/examples/graphs/2d/hellographs/HelloGraphs/Main.qml b/examples/graphs/2d/hellographs/HelloGraphs/Main.qml
new file mode 100644
index 000000000..b1844aec4
--- /dev/null
+++ b/examples/graphs/2d/hellographs/HelloGraphs/Main.qml
@@ -0,0 +1,153 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Layouts
+import QtGraphs
+
+Item {
+    id: mainView
+    width: 1280
+    height: 720
+
+    RowLayout  {
+        id: graphsRow
+
+        readonly property real margin:  mainView.width * 0.02
+
+        anchors.fill: parent
+        anchors.margins: margin
+        spacing: margin
+
+        Rectangle {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            color: "#262626"
+            border.color: "#4d4d4d"
+            border.width: 1
+            radius: graphsRow.margin
+            //! [bargraph]
+            GraphsView {
+                anchors.fill: parent
+                anchors.margins: 16
+                theme: GraphTheme {
+                    colorTheme: GraphTheme.ColorThemeDark
+                }
+                //! [bargraph]
+                //! [barseries]
+                BarSeries {
+                    axisX: BarCategoryAxis {
+                        categories: [2024, 2025, 2026]
+                        gridVisible: false
+                        minorGridVisible: false
+                    }
+                    axisY: ValueAxis {
+                        min: 20
+                        max: 100
+                        tickInterval: 10
+                        minorTickCount: 9
+                    }
+                    //! [barseries]
+                    //! [barset]
+                    BarSet {
+                        values: [82, 50, 75]
+                        borderWidth: 2
+                        color: "#373F26"
+                        borderColor: "#DBEB00"
+                    }
+                    //! [barset]
+                }
+            }
+        }
+
+        Rectangle {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            color: "#262626"
+            border.color: "#4d4d4d"
+            border.width: 1
+            radius: graphsRow.margin
+
+            //! [linegraph]
+            GraphsView {
+                anchors.fill: parent
+                anchors.margins: 16
+                theme: GraphTheme {
+                    readonly property color c1: "#DBEB00"
+                    readonly property color c2: "#373F26"
+                    readonly property color c3: Qt.lighter(c2, 1.5)
+                    colorTheme: GraphTheme.ColorThemeDark
+                    gridMajorBarsColor: c3
+                    gridMinorBarsColor: c2
+                    axisXMajorColor: c3
+                    axisYMajorColor: c3
+                    axisXMinorColor: c2
+                    axisYMinorColor: c2
+                    axisXLabelsColor: c1
+                    axisYLabelsColor: c1
+                }
+                //! [linegraph]
+
+                //! [linemarker]
+                component Marker : Rectangle {
+                    width: 16
+                    height: 16
+                    color: "#ffffff"
+                    radius: width * 0.5
+                    border.width: 4
+                    border.color: "#000000"
+                }
+                //! [linemarker]
+
+                //! [lineseriestheme]
+                SeriesTheme {
+                    id: seriesTheme
+                    colors: ["#2CDE85", "#DBEB00"]
+                }
+                //! [lineseriestheme]
+
+                //! [lineseries1]
+                LineSeries {
+                    id: lineSeries1
+                    theme: seriesTheme
+                    axisX: ValueAxis {
+                        max: 5
+                        tickInterval: 1
+                        minorTickCount: 9
+                        labelDecimals: 1
+                    }
+                    axisY: ValueAxis {
+                        max: 10
+                        tickInterval: 1
+                        minorTickCount: 4
+                        labelDecimals: 1
+                    }
+                    width: 4
+                    pointMarker: Marker { }
+                    XYPoint { x: 0; y: 0 }
+                    XYPoint { x: 1; y: 2.1 }
+                    XYPoint { x: 2; y: 3.3 }
+                    XYPoint { x: 3; y: 2.1 }
+                    XYPoint { x: 4; y: 4.9 }
+                    XYPoint { x: 5; y: 3.0 }
+                }
+                //! [lineseries1]
+
+                //! [lineseries2]
+                LineSeries {
+                    id: lineSeries2
+                    theme: seriesTheme
+                    width: 4
+                    pointMarker: Marker { }
+                    XYPoint { x: 0; y: 5.0 }
+                    XYPoint { x: 1; y: 3.3 }
+                    XYPoint { x: 2; y: 7.1 }
+                    XYPoint { x: 3; y: 7.5 }
+                    XYPoint { x: 4; y: 6.1 }
+                    XYPoint { x: 5; y: 3.2 }
+                }
+                //! [lineseries2]
+            }
+        }
+    }
+}
diff --git a/examples/graphs/2d/hellographs/HelloGraphs/qmldir b/examples/graphs/2d/hellographs/HelloGraphs/qmldir
new file mode 100644
index 000000000..007f5fb11
--- /dev/null
+++ b/examples/graphs/2d/hellographs/HelloGraphs/qmldir
@@ -0,0 +1,2 @@
+module HelloGraphs
+Main 1.0 Main.qml
diff --git a/examples/graphs/2d/hellographs/doc/hellographs.rst b/examples/graphs/2d/hellographs/doc/hellographs.rst
new file mode 100644
index 000000000..8f8ab4263
--- /dev/null
+++ b/examples/graphs/2d/hellographs/doc/hellographs.rst
@@ -0,0 +1,51 @@
+HelloGraphs Example
+===================
+
+The example shows how to make a simple 2D bar graph and line graph.
+
+BarGraph
+--------
+
+The first graph in the example is a bar graph. Creating it starts with a GraphsView
+component and setting the theme to one which is suitable on
+dark backgrounds. This theme adjusts the graph background grid and axis lines and
+labels.
+
+To make this a bar graph, add a ``BarSeries.`` The X axis of the series is a
+``BarCategoryAxis`` with 3 categories. We hide both the vertical grid and the
+axis lines. The Y axis of the series is ``ValueAxis`` with visible range
+between 20 and 100. Major ticks with labels will be shown on every 10 values
+using the ``tickInterval`` property. Minor ticks will be shown on every 1
+values setting the ``minorTickCount`` propertyt to 9, which means that between
+every major ticks there will be 9 minor ones.
+
+Then data is added into ``BarSeries`` using ``BarSet.`` There are 3 bars, and we define
+custom bars color and border properties. These properties will override the possible
+theme set for the ``AbstractSeries.``
+
+LineGraph
+--------
+
+The second graph of the example is a line graph. It also starts by defining a
+``GraphsView`` element. A custom ``GraphTheme`` is created to get a custom appearance.
+``GraphTheme`` offers quite a wide range of customization possibilities for the background
+grid and axis, which get applied after the ``colorTheme``.
+
+A custom ``Marker`` component is used to visualize the data points.
+
+The previous bar graph didn't define a separate ``SeriesTheme``, so it uses the
+default theme. This line graph uses a custom theme with the desired line colors.
+
+To make this a line graph, add a ``LineSeries.`` The first series defines
+``axisX`` and ``axisY`` for this graph. It also sets the ``pointMarker`` to use
+the custom ``Marker`` component that was created earlier. Data points are added
+using ``XYPoint`` elements.
+
+The second line series is similar to the first. The ``axisX`` and ``axisY``
+don't need to be defined as the graph already contains them. As this is the
+second ``LineSeries`` inside the ``GraphsView``, second color from the
+``seriesTheme`` gets automatically picked.
+
+.. image:: hellographs.webp
+   :width: 1293
+   :alt: HelloGraphs Screenshot
diff --git a/examples/graphs/2d/hellographs/doc/hellographs.webp b/examples/graphs/2d/hellographs/doc/hellographs.webp
new file mode 100644
index 000000000..3e7666411
--- /dev/null
+++ b/examples/graphs/2d/hellographs/doc/hellographs.webp
diff --git a/examples/graphs/2d/hellographs/hellographs.pyproject b/examples/graphs/2d/hellographs/hellographs.pyproject
new file mode 100644
index 000000000..e8e8cb228
--- /dev/null
+++ b/examples/graphs/2d/hellographs/hellographs.pyproject
@@ -0,0 +1,3 @@
+{
+    "files": ["main.py", "HelloGraphs/Main.qml", "HelloGraphs/qmldir"]
+}
diff --git a/examples/graphs/2d/hellographs/main.py b/examples/graphs/2d/hellographs/main.py
new file mode 100644
index 000000000..acc349beb
--- /dev/null
+++ b/examples/graphs/2d/hellographs/main.py
@@ -0,0 +1,22 @@
+# Copyright (C) 2024 The Qt Company Ltd.
+# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+"""PySide6 port of the Qt Hello Graphs example from Qt v6.x"""
+
+from pathlib import Path
+import sys
+from PySide6.QtGui import QGuiApplication
+from PySide6.QtQuick import QQuickView
+
+
+if __name__ == '__main__':
+    app = QGuiApplication(sys.argv)
+
+    viewer = QQuickView()
+    viewer.engine().addImportPath(Path(__file__).parent)
+    viewer.setColor("black")
+    viewer.loadFromModule("HelloGraphs", "Main")
+    viewer.show()
+    r = app.exec()
+    del viewer
+    sys.exit(r)