status-qml/sandbox/pages/StatusChartPanelPage.qml

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1

import Sandbox 0.1

Item {

    QtObject {
        id: d
        //dummy data
        property real stepSize: 1000
        property real minStep: 12000
        property real maxStep: 22000

        property var graphTabsModel: [{text: "Price", enabled: true}, {text: "Balance", enabled: false}]
        property var timeRangeTabsModel: [{text: "1H", enabled: true},
                {text: "1D", enabled: true},{text: "7D", enabled: true},
                {text: "1M", enabled: true}, {text: "6M", enabled: true},
                {text: "1Y", enabled: true}, {text: "ALL", enabled: true}]

        property var simTimer: Timer {
            running: true
            interval: 3000
            repeat: true
            onTriggered: {
                d.generateData();
            }
        }

        function minutes(minutes = 0) {
            var newMinute = new Date(new Date().getTime() - (minutes * 60 * 1000)).toString();
            if (newMinute.slice(10,12) === "00") {
                var dateToday = new Date(Date.now()).toString();
                return dateToday.slice(4,7) + " " + dateToday.slice(8,10);
            }
            return newMinute.slice(10,16);
        }

        function hour(hours = 0) {
            var newHour = new Date(new Date().getTime() - (hours * 60 * 60 * 1000)).toString();
            if (newHour.slice(10,12) === "00") {
                var dateToday = new Date(Date.now()).toString();
                return dateToday.slice(4,7) + " " + dateToday.slice(8,10);
            }
            return newHour.slice(10,16);
        }

        function day(before = 0) {
            var newDay = new Date(Date.now() - before * 24 * 60 * 60 * 1000).toString();
            return newDay.slice(4,7) + " " + newDay.slice(8,10);
        }

        function month(before = 0) {
            var newMonth = new Date(Date.now() - before * 24 * 60 * 60 * 1000).toString();
            return newMonth.slice(4,7) + " '" + newMonth.slice(newMonth.indexOf("G")-3, newMonth.indexOf("G")-1);
        }

        property var timeRange: [
            {'1H': [minutes(60), minutes(55), minutes(50), minutes(45), minutes(40), minutes(35), minutes(30), minutes(25), minutes(20), minutes(15), minutes(10), minutes(5), minutes()]},
            {'1D': [hour(24), hour(23), hour(22), hour(21), hour(20), hour(19), hour(18), hour(17), hour(16), hour(15), hour(14), hour(13),
                    hour(12), hour(11), hour(10), hour(9), hour(8), hour(7), hour(6), hour(5), hour(4), hour(3), hour(2), hour(1), hour()]},
            {'7D': [day(6), day(5), day(4), day(3), day(2), day(1), day()]},
            {'1M': [day(30), day(28), day(26), day(24), day(22), day(20), day(18), day(16), day(14), day(12), day(10), day(8), day(6), day(4), day()]},
            {'6M': [month(150), month(120), month(90), month(60), month(30), month()]},
            {'1Y': [month(330), month(300), month(270), month(240), month(210), month(180), month(150), month(120), month(90), month(60), month(30), month()]},
            {'ALL': ['2016', '2017', '2018', '2019', '2020', '2021', '2022']}
        ]

        function generateData() {
            var result = [];
            for (var i = 0; i < timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange].length; ++i) {
                result[i] = Math.random() * (maxStep - minStep) + minStep;
            }
            graphDetail.chart.chartData.datasets[0].data = result;
            graphDetail.chart.animateToNewData();
        }
    }

    StatusChartPanel {
        id: graphDetail
        height: 290
        anchors.left: parent.left
        anchors.leftMargin: 24
        anchors.right: parent.right
        anchors.rightMargin: 24
        anchors.verticalCenter: parent.verticalCenter
        graphsModel: d.graphTabsModel
        timeRangeModel: d.timeRangeTabsModel
        onHeaderTabClicked: {
            //TODO
            //if time range tab
            d.generateData();
            //if graph bar
            //switch graph
        }
        chart.chartType: 'line'
        chart.chartData: {
            return {
                labels: d.timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange],
                datasets: [{
                    label: 'Price',
                    xAxisId: 'x-axis-1',
                    yAxisId: 'y-axis-1',
                    backgroundColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 0.2)' : 'rgba(67, 96, 223, 0.2)',
                    borderColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 1)' : 'rgba(67, 96, 223, 1)',
                    borderWidth: 3,
                    pointRadius: 0,
                    //data: d.generateData()
                }]
            }
        }

        chart.chartOptions: {
            return {
                maintainAspectRatio: false,
                responsive: true,
                legend: {
                    display: false
                },
                //TODO enable zoom
//                zoom: {
//                    enabled: true,
//                    drag: true,
//                    speed: 0.1,
//                    threshold: 2
//                },
//                pan:{enabled:true,mode:'x'},
                tooltips: {
                    intersect: false,
                    displayColors: false,
                    callbacks: {
                        footer: function(tooltipItem, data) { return 'Vol: $43,042,678,876'; },
                        label: function(tooltipItem, data) {
                          let label = data.datasets[tooltipItem.datasetIndex].label || '';
                            if (label) {
                                label += ': ';
                            }
                            label += tooltipItem.yLabel.toFixed(2);
                            return label.slice(0,label.indexOf(":")+1)+ " $"+label.slice(label.indexOf(":")+2, label.length);
                       }
                    }
                },
                scales: {
                    xAxes: [{
                       id: 'x-axis-1',
                       position: 'bottom',
                       gridLines: {
                           drawOnChartArea: false,
                           drawBorder: false,
                           drawTicks: false,
                       },
                       ticks: {
                           fontSize: 10,
                           fontColor: (Theme.palette.name === "dark") ? '#909090' : '#939BA1',
                           padding: 16,
                       }
                    }],
                    yAxes: [{
                       position: 'left',
                       id: 'y-axis-1',
                       gridLines: {
                          borderDash: [8, 4],
                          drawBorder: false,
                          drawTicks: false,
                          color: (Theme.palette.name === "dark") ? '#909090' : '#939BA1'
                       },
                       beforeDataLimits: (axis) => {
                          axis.paddingTop = 25;
                          axis.paddingBottom = 0;
                        },
                       ticks: {
                          fontSize: 10,
                          fontColor: (Theme.palette.name === "dark") ? '#909090' : '#939BA1',
                          padding: 24,
                          min: d.minStep,
                          max: d.maxStep,
                          stepSize: d.stepSize,
                          callback: function(value, index, ticks) {
                                return '$' + value;
                          },
                       }
                    }]
                }
            }
        }
    }
}