Added Chart Panel in story book
This commit is contained in:
parent
3e1a4f55cb
commit
13c2653e2f
|
@ -0,0 +1,210 @@
|
|||
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 Storybook 1.0
|
||||
|
||||
SplitView {
|
||||
id: root
|
||||
|
||||
orientation: Qt.Vertical
|
||||
|
||||
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: true}]
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
SplitView.fillWidth: true
|
||||
SplitView.fillHeight: true
|
||||
|
||||
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: 8,
|
||||
min: d.minStep,
|
||||
max: d.maxStep,
|
||||
stepSize: d.stepSize,
|
||||
callback: function(value, index, ticks) {
|
||||
return '$' + value;
|
||||
},
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
LogsAndControlsPanel {
|
||||
id: logsAndControlsPanel
|
||||
|
||||
SplitView.minimumHeight: 100
|
||||
SplitView.preferredHeight: 150
|
||||
}
|
||||
}
|
||||
|
||||
// category: Panels
|
Loading…
Reference in New Issue