Simple Scatter Graph

// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtGraphs

Item {
    id: mainView
    width: 800
    height: 600

    property int iconDimension: 38
    property int margin: 30
    property int spacing: 10
    property int radius: 6
    property int buttonMinWidth: 175

    Data {
        id: seriesData
    }

    Theme3D {
        id: themeQt
        type: Theme3D.Theme.Qt
        font.pointSize: 40
    }

    Theme3D {
        id: themeRetro
        type: Theme3D.Theme.Retro
    }

    component CustomButton : RoundButton {
        id: buttonRoot
        property alias source: iconImage.source

        Layout.minimumWidth: buttonMinWidth
        Layout.fillWidth: true

        radius: mainView.radius

        background: Rectangle {
            radius: mainView.radius
            color: "white"
            border.color: "black"
        }
        contentItem: Row {
            id :content
            IconImage {
                id: iconImage
                width: iconDimension
                height: iconDimension
                color: "transparent"
            }
            Label {
                text: buttonRoot.text
                horizontalAlignment: Text.AlignLeft
                anchors.verticalCenter: parent.verticalCenter
            }
        }
    }

    ColumnLayout {
        id: mainLayout
        anchors.fill: parent
        anchors.margins: margin
        spacing: spacing
        GridLayout {
            Layout.fillWidth: true
            rowSpacing: spacing
            columnSpacing: spacing

            columns: mainView.width < mainView.buttonMinWidth * 2 + mainView.spacing + mainView.margin * 2 // width of 2 buttons
                     ? 1
                     : (mainView.width < mainView.buttonMinWidth * 4 + mainView.spacing * 3 + mainView.margin * 2 // width of 4 buttons
                        ? 2
                        : 4)
            CustomButton {
                id: shadowButton
                text: graph.shadowQuality === AbstractGraph3D.ShadowQuality.None ?
                          qsTr("Show Shadows") : qsTr("Hide Shadows")
                source: graph.shadowQuality === AbstractGraph3D.ShadowQuality.None ?
                            "qrc:/images/shadow.svg" : "qrc:/images/shadow_hide.svg"
                onClicked: {
                    graph.shadowQuality = graph.shadowQuality === AbstractGraph3D.ShadowQuality.None ?
                                AbstractGraph3D.ShadowQuality.High :
                                AbstractGraph3D.ShadowQuality.None
                }
            }

            CustomButton {
                id: smoothButton
                text: qsTr("Smooth Series One")
                source: graph.meshSmooth ?
                            "qrc:/images/flatten.svg" : "qrc:/images/smooth_curve.svg"
                onClicked: {
                    text = graph.meshSmooth ? qsTr("Smooth Series One") : qsTr("Flat Series One")
                    graph.meshSmooth = !graph.meshSmooth
                }
            }

            CustomButton {
                id: cameraButton
                text: qsTr("Camera Placement")
                source: graph.cameraPreset === AbstractGraph3D.CameraPreset.Front ?
                                        "qrc:/images/camera.svg" : "qrc:/images/camera2.svg"
                onClicked: {
                    graph.cameraPreset = graph.cameraPreset === AbstractGraph3D.CameraPreset.Front ?
                                AbstractGraph3D.CameraPreset.IsometricRightHigh :
                                AbstractGraph3D.CameraPreset.Front
                }
            }

            CustomButton {
                id: backgroundButton
                text: qsTr("Hide Background")
                source: graph.theme.backgroundEnabled ?
                                        "qrc:/images/background_hide.svg" : "qrc:/images/background.svg"
                onClicked: {
                    graph.theme.backgroundEnabled = !graph.theme.backgroundEnabled
                    text = graph.theme.backgroundEnabled ? qsTr("Hide Background") : qsTr("Show Background")
                }
            }
        }

        Graph {
            id: graph
            Layout.fillWidth: true
            Layout.fillHeight: true
        }

        CustomButton {
            id: themeButton
            Layout.alignment: Qt.AlignLeft
            Layout.fillWidth: false
            text: qsTr("Change Theme")
            source: "qrc:/images/theme.svg"
            onClicked: {
                graph.theme = graph.theme.type === Theme3D.Theme.Retro ? themeQt : themeRetro
                backgroundButton.text = graph.theme.backgroundEnabled ? qsTr("Hide Background") : qsTr("Show Background")
            }
        }
    }
}