import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    width: 1600
    height: 400
    visible : true
    property int sampleCount : 1000

    property var sampleArray : []
    property int nextSampleIndex
    property int fps

    Canvas {
        id: graph
        anchors.fill: parent
        anchors.margins: 10
        renderTarget      : Canvas.FramebufferObject //Canvas.Image
        renderStrategy    : Canvas.Cooperative

        function newSample(i) {
            return Math.random() //* 0.05 is better (repaint area is small)
        }
        Component.onCompleted: {
            for (var i=0; i<sampleCount; ++i)
                sampleArray.push(newSample(i));
            nextSampleIndex=sampleCount
            timer.start()
        }

        onPaint:
        {
            var ctx = getContext("2d");
            ctx.fillStyle = Qt.rgba(0.5, 0.5, 0.5, 1);
            ctx.fillRect(0, 0, width, height);
            ctx.strokeStyle=Qt.rgba(0, 0, 1, 1)
            ctx.lineWidth = 2
            ctx.beginPath()
            ctx.moveTo(0,sampleArray[0])
            for(var i=1; i< sampleArray.length;i++)
            {
                ctx.lineTo(i*graph.width/sampleCount,sampleArray[i]*graph.height)
            }
            ctx.stroke()
            ctx.closePath()
            fps += 1

            timer.start()

        }
    }

    Timer {
        id: timer
        interval: 0
        repeat: false
        running: false
        onTriggered: {
            sampleArray.shift()
            sampleArray.push(graph.newSample(nextSampleIndex++))
            graph.requestPaint()
        }
    }
    Timer {
      interval: 1000
      running: true
      repeat: true
      onTriggered: {
        console.log("Frame/s :",fps)
        fps = 0
      }
    }
    Rectangle {
        anchors.fill: graph
        color: "transparent"
        border.color: "black"
        border.width: 2
    }
}