feat(AssetDetailView): Adding price history chart

Closes #6490

ui/StatusQ

@@ -1 +1 @@
-Subproject commit 9a24d59ea86b68d0279df6fdb2a85fd93778bad0
+Subproject commit f79cf81db238f114691c1490df44b1f953bb8637

ui/app/AppLayouts/Wallet/views/RightTabView.qml

@@ -100,6 +100,7 @@ Item {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
                 onGoBack: stack.currentIndex = 0
+                visible: (stack.currentTabIndex === 2)
             }
             TransactionDetailView {
                 id: transactionDetailView

ui/imports/shared/views/AssetsDetailView.qml

@@ -9,6 +9,7 @@ import StatusQ.Core 0.1
 import StatusQ.Controls 0.1
 
 import utils 1.0
+import shared.views 1.0
 import shared.controls 1.0
 
 import "../stores"
@@ -18,8 +19,78 @@ Item {
 
     property var token
 
-    signal goBack()
+    QtObject {
+        id: d
+        //dummy data
+        property real stepSize: 1000
+        property real minStep: 12000
+        property real maxStep: 22000
 
+        property var graphTabsModel: [{text: qsTr("Price"), enabled: true}, {text: qsTr("Balance"), enabled: false}]
+        property var timeRangeTabsModel: [{text: qsTr("1H"), enabled: true},
+                {text: qsTr("1D"), enabled: true},{text: qsTr("7D"), enabled: true},
+                {text: qsTr("1M"), enabled: true}, {text: qsTr("6M"), enabled: true},
+                {text: qsTr("1Y"), enabled: true}, {text: qsTr("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[graphDetailLoader.item.timeRangeTabBarIndex][graphDetailLoader.item.selectedTimeRange].length; ++i) {
+                result[i] = Math.random() * (maxStep - minStep) + minStep;
+            }
+            graphDetailLoader.item.chart.chartData.datasets[0].data = result;
+            graphDetailLoader.item.chart.animateToNewData();
+        }
+    }
+
+    signal goBack()
     StatusFlatButton {
         id: backButton
         anchors.top: parent.top
@@ -54,12 +125,123 @@ Item {
         }
     }
 
-    ColumnLayout {
+    Loader {
+        id: graphDetailLoader
+        width: parent.width
+        height: 290
         anchors.top: tokenDetailsHeader.bottom
         anchors.topMargin: 24
+        active: root.visible
+        sourceComponent: StatusChartPanel {
+            id: graphDetail
+            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: 8,
+                                    min: d.minStep,
+                                    max: d.maxStep,
+                                    stepSize: d.stepSize,
+                                    callback: function(value, index, ticks) {
+                                        return '$' + value;
+                                    },
+                                }
+                            }]
+                    }
+                }
+            }
+        }
+    }
+
+    ColumnLayout {
+        anchors.top: graphDetailLoader.bottom
+        anchors.topMargin: 24
+        anchors.bottom: parent.bottom
         anchors.left: parent.left
         anchors.right: parent.right
-        anchors.bottom: parent.bottom
 
         width: parent.width