API: Unify pointMarker dynamic properties

- Name properties as "point*".
- Fix selected color query.
- Add x & y value properties, to match with barComponent barValue
  component.
- Add API documentation of these properties.

Task-number: QTBUG-125254
Change-Id: I5fc2451408c19794cbc703045ba2da2e5d8b981b
Reviewed-by: Jere Tuliniemi <jere.tuliniemi@qt.io>
Reviewed-by: Tomi Korpipää <tomi.korpipaa@qt.io>

5 files changed, 122 insertions, 26 deletions

diff --git a/examples/graphs/2d/testbed/qml/testbed/LineProperties.qml b/examples/graphs/2d/testbed/qml/testbed/LineProperties.qml
index 1dc6d74..96f30fa 100644
--- a/examples/graphs/2d/testbed/qml/testbed/LineProperties.qml
+++ b/examples/graphs/2d/testbed/qml/testbed/LineProperties.qml
@@ -154,10 +154,10 @@ Rectangle {
             selectable: true
             draggable: true
             pointMarker: Image {
-                property bool selected: false
+                property bool pointSelected: false
                 source: "images/happy_box.png"
-                width: selected ? 96 : 64
-                height: selected ? 96 : 64
+                width: pointSelected ? 96 : 64
+                height: pointSelected ? 96 : 64
             }
 
             XYPoint { x: 0; y: 0 }
@@ -175,7 +175,27 @@ Rectangle {
             theme: seriesTheme
             width: widthSlider2.value
             draggable: true
-
+            pointMarker: Item {
+                property color pointColor
+                property real pointValueX
+                property real pointValueY
+                width: 16
+                height: 16
+                Rectangle {
+                    anchors.fill: parent
+                    color: "#202020"
+                    border.width: 2
+                    border.color: pointColor
+                    radius: width / 2
+                }
+                Text {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.bottom: parent.top
+                    color: "#ffffff"
+                    font.pixelSize: 16
+                    text: "(" + pointValueX.toFixed(1) + ", " + pointValueY.toFixed(1) + ")"
+                }
+            }
             XYPoint { x: 0; y: 6.6 }
             XYPoint { x: 0.6; y: 4.1 }
             XYPoint { x: 1.5; y: 5.3 }
diff --git a/examples/graphs/2d/testbed/qml/testbed/ScatterProperties.qml b/examples/graphs/2d/testbed/qml/testbed/ScatterProperties.qml
index f634db7..e1e64d8 100644
--- a/examples/graphs/2d/testbed/qml/testbed/ScatterProperties.qml
+++ b/examples/graphs/2d/testbed/qml/testbed/ScatterProperties.qml
@@ -76,10 +76,10 @@ Rectangle {
             theme: seriesTheme
             selectable: true
             pointMarker: Image {
-                property bool selected: false
+                property bool pointSelected: false
                 source: "images/happy_box.png"
-                width: selected ? 96 : 64
-                height: selected ? 96 : 64
+                width: pointSelected ? 96 : 64
+                height: pointSelected ? 96 : 64
             }
 
             XYPoint { x: 0; y: 0 }
diff --git a/examples/graphs/2d/testbed/qml/testbed/SplineSeries.qml b/examples/graphs/2d/testbed/qml/testbed/SplineSeries.qml
index 5b8bf91..7e1414b 100644
--- a/examples/graphs/2d/testbed/qml/testbed/SplineSeries.qml
+++ b/examples/graphs/2d/testbed/qml/testbed/SplineSeries.qml
@@ -41,8 +41,8 @@ Rectangle {
             width: 2
 
             pointMarker: Rectangle {
-                property color seriesColor
-                color: seriesColor
+                property color pointColor
+                color: pointColor
                 width: 16
                 height: 16
             }
diff --git a/src/graphs2d/qsgrenderer/pointrenderer.cpp b/src/graphs2d/qsgrenderer/pointrenderer.cpp
index 42f5eb3..ae2b690 100644
--- a/src/graphs2d/qsgrenderer/pointrenderer.cpp
+++ b/src/graphs2d/qsgrenderer/pointrenderer.cpp
@@ -11,6 +11,12 @@
 
 QT_BEGIN_NAMESPACE
 
+static const char* TAG_POINT_COLOR = "pointColor";
+static const char* TAG_POINT_SELECTED_COLOR = "pointSelectedColor";
+static const char* TAG_POINT_SELECTED = "pointSelected";
+static const char* TAG_POINT_VALUE_X = "pointValueX";
+static const char* TAG_POINT_VALUE_Y = "pointValueY";
+
 PointRenderer::PointRenderer(QQuickItem *parent)
     : QQuickItem(parent)
 {
@@ -23,15 +29,14 @@ PointRenderer::PointRenderer(QQuickItem *parent)
         import QtQuick;
 
         Rectangle {
-            property bool selected
-            property color seriesColor
-            property color seriesSelectedColor
-            color: selected ? seriesSelectedColor : seriesColor
+            property bool pointSelected
+            property color pointColor
+            property color pointSelectedColor
+            color: pointSelected ? pointSelectedColor : pointColor
             width: %1
             height: %1
         }
-    )QML")
-                                .arg(QString::number((int) defaultSize()));
+    )QML").arg(QString::number((int) defaultSize()));
     m_tempMarker = new QQmlComponent(qmlEngine(m_graph), this);
     m_tempMarker->setData(qmlData.toUtf8(), QUrl());
 }
@@ -74,17 +79,19 @@ void PointRenderer::updatePointMarker(
     int index = group->colorIndex % series->theme()->seriesColors().size();
     QColor color = series->color().alpha() != 0 ? series->color()
                                             : series->theme()->seriesColors().at(index);
-
-    index = group->colorIndex % series->theme()->borderColors().size();
-    QColor selectedColor = series->color().alpha() != 0 ? series->color()
-                                            : series->theme()->borderColors().at(index);
-
-    if (marker->property("selected").isValid())
-        marker->setProperty("selected", series->isPointSelected(pointIndex));
-    if (marker->property("seriesColor").isValid())
-        marker->setProperty("seriesColor", color);
-    if (marker->property("seriesSelectedColor").isValid())
-        marker->setProperty("seriesSelectedColor", selectedColor);
+    QColor selectedColor = series->selectedColor().alpha() != 0 ? series->selectedColor()
+                                                                : series->theme()->singleHighlightColor();
+    if (marker->property(TAG_POINT_SELECTED).isValid())
+        marker->setProperty(TAG_POINT_SELECTED, series->isPointSelected(pointIndex));
+    if (marker->property(TAG_POINT_COLOR).isValid())
+        marker->setProperty(TAG_POINT_COLOR, color);
+    if (marker->property(TAG_POINT_SELECTED_COLOR).isValid())
+        marker->setProperty(TAG_POINT_SELECTED_COLOR, selectedColor);
+    const auto point = series->points().at(pointIndex);
+    if (marker->property(TAG_POINT_VALUE_X).isValid())
+        marker->setProperty(TAG_POINT_VALUE_X, point.x());
+    if (marker->property(TAG_POINT_VALUE_Y).isValid())
+        marker->setProperty(TAG_POINT_VALUE_Y, point.y());
 
     marker->setX(x - marker->width() / 2.0);
     marker->setY(y - marker->height() / 2.0);
diff --git a/src/graphs2d/xychart/qxyseries.cpp b/src/graphs2d/xychart/qxyseries.cpp
index 10c65f4..cb2b539 100644
--- a/src/graphs2d/xychart/qxyseries.cpp
+++ b/src/graphs2d/xychart/qxyseries.cpp
@@ -518,10 +518,79 @@ QColor QXYSeries::selectedColor() const
 /*!
     \property QXYSeries::pointMarker
     \brief A custom QML Component used as a marker for data points.
+
+    The dynamic properties available for this component are:
+
+    \table
+    \header
+        \li Type
+        \li Name
+        \li Description
+    \row
+        \li bool
+        \li pointSelected
+        \li This value is true when the point is selected, meaning that the point index
+        is in \l{QXYSeries::selectedPoints}.
+    \row
+        \li QColor
+        \li pointColor
+        \li The color of the series. This value comes either from the \l QGraphsTheme
+        or from \l{QXYSeries::color} if the \l QXYSeries overrides the color.
+    \row
+        \li QColor
+        \li pointSelectedColor
+        \li The selected color of the series. This value comes either from the \l QGraphsTheme
+        or from \l{QXYSeries::selectedColor} if the \l QXYSeries overrides the color.
+    \row
+        \li qreal
+        \li pointValueX
+        \li The value of the \l{QXYPoint::x} at this position.
+    \row
+        \li qreal
+        \li pointValueY
+        \li The value of the \l{QXYPoint::y} at this position.
+    \endtable
+
+    To use any of these, add property with the defined name into your custom component.
+    For example \c{"property color pointColor"} and \c{"property real pointValueX"}.
 */
 /*!
     \qmlproperty Component XYSeries::pointMarker
     A custom QML Component used as a marker for data points.
+
+    The dynamic properties available for this component are:
+
+    \table
+    \header
+        \li Type
+        \li Name
+        \li Description
+    \row
+        \li bool
+        \li pointSelected
+        \li This value is true when the point is selected.
+    \row
+        \li Color
+        \li pointColor
+        \li The color of the series. This value comes either from the \l GraphsTheme
+        or from \l{XYSeries::color} if the \l XYSeries overrides the color.
+    \row
+        \li Color
+        \li pointSelectedColor
+        \li The selected color of the series. This value comes either from the \l GraphsTheme
+        or from \l{XYSeries::selectedColor} if the \l XYSeries overrides the color.
+    \row
+        \li real
+        \li pointValueX
+        \li The value of the \l{XYPoint::x} at this position.
+    \row
+        \li real
+        \li pointValueY
+        \li The value of the \l{XYPoint::y} at this position.
+    \endtable
+
+    To use any of these, add property with the defined name into your custom component.
+    For example \c{"property color pointColor"} and \c{"property real pointValueX"}.
 */
 QQmlComponent *QXYSeries::pointMarker() const
 {