aboutsummaryrefslogtreecommitdiffstats
path: root/examples/qml/canvas/stockchart/stock.qml
diff options
context:
space:
mode:
Diffstat (limited to 'examples/qml/canvas/stockchart/stock.qml')
-rw-r--r--examples/qml/canvas/stockchart/stock.qml726
1 files changed, 726 insertions, 0 deletions
diff --git a/examples/qml/canvas/stockchart/stock.qml b/examples/qml/canvas/stockchart/stock.qml
new file mode 100644
index 0000000000..1c95fde2ce
--- /dev/null
+++ b/examples/qml/canvas/stockchart/stock.qml
@@ -0,0 +1,726 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+** the names of its contributors may be used to endorse or promote
+** products derived from this software without specific prior written
+** permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+import com.nokia.StockChartExample 1.0
+import "../contents"
+
+Rectangle {
+ id:container
+ width: 360; height: 600
+ color: "#343434";
+ Image { source: "contents/images/stripes.png"; fillMode: Image.Tile; anchors.fill: parent; opacity: 1 }
+
+
+ TitleBar {
+ id: titleBar
+ width: parent.width
+ anchors.top : container.top
+ height: 40
+ opacity: 0.9
+ }
+
+ StockModel {
+ id:stockModel
+ dataCycle: StockModel.Daily
+ function dataCycleName() {
+ if (dataCycle === StockModel.Weekly)
+ return "Weekly";
+ else if (dataCycle === StockModel.Monthly)
+ return "Monthly";
+ return "Daily";
+ }
+
+ onDataChanged: {
+ if (view.viewType == "chart") {
+ canvas.requestPaint();
+ }
+ }
+ onDownloadProgress: {
+ if (bytesReceived == bytesTotal && bytesTotal != -1) {
+ progress.opacity = 0;
+ } else {
+ progress.opacity = 0.8;
+ progress.text = "downloading " + stockModel.dataCycleName() + " data ..."+ Math.round(bytesReceived/1000) + " KB";
+ }
+ }
+
+ property string description:"";
+ }
+
+ Stocks {id:stocks}
+
+ Rectangle {
+ id: header
+ width: parent.width
+ height: 20
+ color: "steelblue"
+ opacity: 0
+ Row {
+ spacing: 2
+ Text {
+ id:t
+ font.pointSize:15
+ horizontalAlignment:Text.AlignHCenter
+ font.bold: true
+ font.underline:true
+ }
+ Rectangle {
+ height:20
+ width:50
+ Text {text:"Stock list"; font.pointSize:15; font.bold: true}
+ }
+ }
+ }
+
+ ListView {
+ id:stockList
+ width: parent.width
+ anchors.bottom: container.bottom
+ anchors.top : titleBar.bottom
+ focus: true
+ keyNavigationWraps: true
+ spacing:1
+ opacity: 1
+ model: stocks
+
+ Component.onCompleted: opacity = 0.9;
+ onOpacityChanged: {
+ titleBar.title = "Top 100 NASDAQ stocks"
+ }
+
+
+ delegate : Rectangle {
+ height: 30
+ width: view.width
+ color: {
+ if (ListView.isCurrentItem)
+ return focus ? "lightyellow" : "pink";
+ return index % 2 == 0 ? "lightblue" : "lightsteelblue"
+ }
+ Text {
+ font.pointSize:20
+ text: index + ". " + stockId + " \t(" + name + ")";
+ }
+ MouseArea {
+ anchors.fill: parent;
+ onDoubleClicked: {
+ stockList.opacity = 0;
+ stockModel.stockName = stockId;
+ stockModel.description = "NASDAQ:" + stockId + " (" + name + ")";
+ view.opacity = 1;
+ view.viewType = "chart";
+ canvas.opacity = 0.7;
+ }
+ onClicked: stockList.currentIndex = index
+ }//mousearea
+ }//delegate
+ }
+
+ ListView {
+ id:view
+ width: container.width
+ height: container.height - 50
+ anchors.bottom: container.bottom
+ focus: true
+ keyNavigationWraps: true
+
+ spacing:1
+ opacity: 0
+ model: stockModel
+ highlightFollowsCurrentItem: false
+ highlightRangeMode: ListView.StrictlyEnforceRange
+ preferredHighlightBegin:50
+ preferredHighlightEnd : height - 50
+ highlight: listHighlight
+
+ //header : Text {}
+ delegate: listDelegate
+ snapMode: ListView.SnapToItem
+
+ property string viewType : "list"
+ property int topIndex:indexAt(0,contentY);
+ property int bottomIndex:indexAt(0, contentY+height);
+
+ onCountChanged: {
+
+ titleBar.title = stockModel.description + " " + Qt.formatDate(stockModel.startDate, "yyyy-MM-dd") + " - " +
+ Qt.formatDate(stockModel.endDate, "yyyy-MM-dd") + " " + stockModel.dataCycleName() +
+ " records:" + view.count;
+
+ }
+
+ Component {
+ id: listDelegate
+ Rectangle {
+ height: 20
+ width: view.width
+ border.color: "lightsteelblue"
+ border.width: 1
+ color: {
+ if (ListView.isCurrentItem)
+ return focus ? "lightyellow" : "pink";
+
+ return index % 2 == 0 ? "lightblue" : "lightsteelblue"
+ }
+ Text {
+ font.pointSize:13
+ text: index + ". " + Qt.formatDate(date, "yyyy-MM-dd")
+ + "\t " + Math.round(openPrice*100)/100
+ + "\t " + Math.round(highPrice*100)/100
+ + "\t " + Math.round(lowPrice*100)/100
+ + "\t " + Math.round(closePrice*100)/100
+ + "\t " + volume + "\t "
+ + Math.round(adjustedPrice*100)/100;
+ }
+ MouseArea {anchors.fill: parent; onClicked: view.currentIndex = index}
+ }
+ }
+
+ Component {
+ id: chartDelegate
+ Rectangle {
+ height: 20
+ width: view.width/view.count * canvas.scaleX
+ border.color: "lightsteelblue"
+ border.width: 1
+ color: {
+ if (ListView.isCurrentItem)
+ return focus ? "lightyellow" : "pink";
+
+ return index % 2 == 0 ? "lightblue" : "lightsteelblue"
+ }
+
+ Text {
+ anchors.bottom: parent.bottom
+ font.pointSize: {
+ if (parent.width <= 4)
+ return 1;
+ if (parent.width <= 50)
+ return parent.width/4;
+ return 15;
+ }
+ horizontalAlignment:Text.AlignHCenter
+ verticalAlignment:Text.AlignBottom
+ text:font.pointSize > 1 ? Qt.formatDate(date, "d/M/yy") : ""
+ }
+ MouseArea {anchors.fill: parent; onClicked: view.currentIndex = index}
+ }
+ }
+
+ Component {
+ id:chartHighlight
+ Rectangle { radius: 5; width:40; height: 20; color: "lightsteelblue" }
+ }
+
+ Component {
+ id:listHighlight
+ Rectangle { radius: 5; width:container.width; height: 20; color: "lightsteelblue" }
+ }
+
+
+
+
+ onViewTypeChanged : {
+ if (viewType == "list") {
+ view.orientation = ListView.Vertical;
+ view.delegate = listDelegate;
+// view.section.property = "year";
+// view.section.criteria = ViewSection.FullString;
+// view.section.delegate = sectionHeading;
+ view.highlight = listHighlight;
+ view.opacity = 1;
+ canvas.opacity = 0;
+ // comment.opacity = 0;
+
+ } else if (viewType == "chart") {
+ view.orientation = ListView.Horizontal;
+ view.delegate = chartDelegate;
+ //comment.opacity = 0.6;
+
+ view.opacity = 1;
+ view.height = 30
+
+ canvas.opacity = 0.7;
+ canvas.requestPaint();
+ } else {
+ viewType = "list";
+ }
+ }
+
+
+ onCurrentIndexChanged: {
+ //header.updateCurrent(stockModel.stockPriceAtIndex(view.currentIndex));
+ if (viewType == "chart") {
+ canvas.first = Math.round(view.currentIndex - view.currentIndex / canvas.scaleX);
+ canvas.last = Math.round(view.currentIndex + (view.count - view.currentIndex) / canvas.scaleX);
+
+ canvas.requestPaint();
+ }
+ }
+ onContentYChanged: { // keep "current" item visible
+ topIndex = indexAt(0,contentY);
+ bottomIndex = indexAt(0, contentY+height);
+
+ if (topIndex != -1 && currentIndex <= topIndex)
+ currentIndex = topIndex+1;
+ else if (bottomIndex != -1 && currentIndex >= bottomIndex)
+ currentIndex = bottomIndex-1;
+ if (viewType == "chart")
+ canvas.requestPaint();
+ }
+
+ onContentXChanged: { // keep "current" item visible
+ topIndex = indexAt(contentX,0);
+ bottomIndex = indexAt(contentX+width, 0);
+
+ if (topIndex != -1 && currentIndex <= topIndex)
+ currentIndex = topIndex+1;
+ else if (bottomIndex != -1 && currentIndex >= bottomIndex)
+ currentIndex = bottomIndex-1;
+ if (viewType == "chart")
+ canvas.requestPaint();
+ }
+
+ MouseArea {
+ anchors.fill: parent
+ onDoubleClicked: {
+ if (view.viewType == "list")
+ view.viewType = "chart";
+ else
+ view.viewType = "list";
+ }
+ }
+ }
+
+
+
+ Canvas {
+ id:canvas
+ anchors.top : titleBar.bottom
+ anchors.bottom : view.top
+ width:container.width;
+ opacity:0
+ renderTarget: Canvas.Image
+ renderStrategy: Canvas.Immediate
+ property bool running:false
+ property int frames:first
+ property int mouseX:0;
+ property int mouseY:0;
+ property int mousePressedX:0;
+ property int mousePressedY:0;
+ property int movedY:0
+ property real scaleX:1.0;
+ property real scaleY:1.0;
+ property int first:0;
+ property int last:view.count - 1;
+
+ onOpacityChanged: {
+ if (opacity > 0)
+ requestPaint();
+ }
+ Text {
+ id:comment
+ x:100
+ y:50
+ font.pointSize: 20
+ color:"white"
+ opacity: 0.7
+ focus:false
+ text: stockModel.description
+ function updateCurrent(price)
+ {
+ if (price !== undefined) {
+ text =stockModel.description + "\n"
+ + Qt.formatDate(price.date, "yyyy-MM-dd") + " OPEN:"
+ + Math.round(price.openPrice*100)/100 + " HIGH:"
+ + Math.round(price.highPrice*100)/100 + " LOW:"
+ + Math.round(price.lowPrice*100)/100 + " CLOSE:"
+ + Math.round(price.closePrice*100)/100 + " VOLUME:"
+ + price.volume;
+ }
+ }
+ }
+
+ Text {
+ id:priceAxis
+ x:25
+ y:25
+ font.pointSize: 15
+ color:"yellow"
+ opacity: 0.7
+ focus: false
+ }
+ Text {
+ id:volumeAxis
+ x:canvas.width - 200
+ y:25
+ font.pointSize: 15
+ color:"yellow"
+ opacity: 0.7
+ }
+
+ Rectangle {
+ id:progress
+ x:canvas.width/2 - 100
+ y:canvas.height/2
+ width:childrenRect.width
+ height: childrenRect.height
+ opacity: 0
+ color:"white"
+ property string text;
+ Text {
+ text:parent.text
+ font.pointSize: 20
+ }
+ }
+
+ Button {
+ id:runButton
+ text:"Run this chart"
+ y:0
+ x:canvas.width/2 - 50
+ opacity: 0.5
+ onClicked: {
+ if (canvas.running) {
+ canvas.running = false;
+ canvas.frames = canvas.first;
+ canvas.requestPaint();
+ text = "Run this chart";
+ comment.text = stockModel.description;
+ } else {
+ text = " Stop running ";
+ canvas.runChart();
+ }
+ }
+ }
+ Button {
+ id:returnButton
+ text:"Stocks"
+ y:0
+ anchors.left : runButton.right
+ anchors.leftMargin : 20
+ opacity: 0.5
+ onClicked: {
+ stockList.opacity = 1;
+ canvas.opacity = 0;
+ }
+ }
+ PinchArea {
+ anchors.fill: parent
+ onPinchUpdated : {
+ var current = pinch.center;
+ var scale = pinch.scale;
+ console.log("center:" + pinch.center + " scale:" + pinch.scale);
+ //canvas.requestPaint();
+ }
+ }
+
+ MouseArea {
+ anchors.fill: parent
+
+ onDoubleClicked: {
+ if (stockModel.dataCycle == StockModel.Daily)
+ stockModel.dataCycle = StockModel.Weekly;
+ else if (stockModel.dataCycle == StockModel.Weekly)
+ stockModel.dataCycle = StockModel.Monthly;
+ else
+ stockModel.dataCycle = StockModel.Daily;
+ }
+
+ onPositionChanged: {
+ if (mouse.modifiers & Qt.ControlModifier) {
+ if (canvas.mouseX == 0 && canvas.mouseY == 0) {
+ canvas.mouseX = mouse.x;
+ canvas.mouseY = mouse.y;
+ }
+ } else{
+ var w = (view.width/view.count)*canvas.scaleX;
+
+ //canvas.movedY += Math.round((canvas.mousePressedY - mouse.y)/2);
+
+ var movedX = Math.round((canvas.mousePressedX - mouse.x)/w);
+ if (movedX != 0 || canvas.movedY != 0) {
+ if (canvas.first + movedX >= 0 && canvas.last + movedX < view.count) {
+ canvas.first += movedX;
+ canvas.last += movedX;
+ }
+ canvas.requestPaint();
+ }
+ }
+ }
+
+ onPressed: {
+ canvas.mousePressedX = mouse.x;
+ canvas.mousePressedY = mouse.y;
+ }
+
+ onReleased : {
+ if (mouse.modifiers & Qt.ControlModifier) {
+ var sx = mouse.x - canvas.mouseX;
+ var sy = canvas.mouseY - mouse.y;
+
+ if (Math.abs(sx) < 50) sx = 0;
+ if (Math.abs(sy) < 50) sy = 0;
+
+ if (sx > 0)
+ canvas.scaleX *= sx/100 +1;
+ else
+ canvas.scaleX *= 1/(-sx/100 + 1);
+
+ if (sy > 0)
+ canvas.scaleY *= sy/100 +1;
+ else
+ canvas.scaleY *= 1/(-sy/100 + 1);
+
+ if (canvas.scaleX < 1)
+ canvas.scaleX = 1;
+
+ //console.log("scaleX:" + canvas.scaleX + ", scaleY:" + canvas.scaleY);
+
+ canvas.first = Math.round(view.currentIndex - view.currentIndex / canvas.scaleX);
+ canvas.last = Math.round(view.currentIndex + (view.count - view.currentIndex) / canvas.scaleX);
+
+ canvas.mouseX = 0;
+ canvas.mouseY = 0;
+ canvas.mousePressedX = 0;
+ canvas.mousePressedY = 0;
+ canvas.requestPaint();
+ }
+ }
+ }
+
+ function runChart() {
+ canvas.running = true;
+ requestPaint();
+ }
+
+ function showPriceAt(x) {
+ var w = (view.width/view.count)*canvas.scaleX;
+ //header.updateCurrent(stockModel.stockPriceAtIndex(canvas.first + Math.round(x/w)));
+ //console.log("x:" + x + " w:" + w + " index:" + (canvas.first + Math.round(x/w)));
+ }
+
+ function drawPrice(ctx, from, to, color, price, points, highest)
+ {
+ ctx.globalAlpha = 0.7;
+ ctx.strokeStyle = color;
+ ctx.lineWidth = 1;
+ ctx.beginPath();
+
+ //price x axis
+ priceAxis.text = "price:" + Math.round(highest);
+ ctx.font = "bold 12px sans-serif";
+
+ ctx.strokeText("price", 25, 25);
+ for (var j = 1; j < 30; j++) {
+ var val = (highest * j) / 30;
+ val = canvas.height * (1 - val/highest);
+ ctx.beginPath();
+
+ ctx.moveTo(10, val);
+ if (j % 5)
+ ctx.lineTo(15, val);
+ else
+ ctx.lineTo(20, val);
+ ctx.stroke();
+ }
+
+ ctx.beginPath();
+ ctx.moveTo(10, 0);
+ ctx.lineTo(10, canvas.height);
+ ctx.stroke();
+
+
+ var w = canvas.width/points.length;
+ var end = canvas.running? canvas.frames - canvas.first :points.length;
+ for (var i = 0; i < end; i++) {
+ var x = points[i].x;
+ var y = points[i][price];
+ y += canvas.movedY;
+
+ y = canvas.height * (1 - y/highest);
+ if (i == 0) {
+ ctx.moveTo(x+w/2, y);
+ } else {
+ ctx.lineTo(x+w/2, y);
+ }
+ }
+ ctx.stroke();
+ }
+
+ function drawKLine(ctx, from, to, points, highest)
+ {
+ ctx.globalAlpha = 0.4;
+ ctx.lineWidth = 2;
+ var end = canvas.running? canvas.frames - canvas.first :points.length;
+ for (var i = 0; i < end; i++) {
+ var x = points[i].x;
+ var open = canvas.height * (1 - points[i].open/highest) - canvas.movedY;
+ var close = canvas.height * (1 - points[i].close/highest) - canvas.movedY;
+ var high = canvas.height * (1 - points[i].high/highest) - canvas.movedY;
+ var low = canvas.height * (1 - points[i].low/highest) - canvas.movedY;
+
+ var top, bottom;
+ if (close <= open) {
+ ctx.fillStyle = Qt.rgba(1, 0, 0, 1);
+ ctx.strokeStyle = Qt.rgba(1, 0, 0, 1);
+ top = close;
+ bottom = open;
+ } else {
+ ctx.fillStyle = Qt.rgba(0, 1, 0, 1);
+ ctx.strokeStyle = Qt.rgba(0, 1, 0, 1);
+ top = open;
+ bottom = close;
+ }
+
+ var w1, w2;
+ w1 = canvas.width/points.length;
+ w2 = w1 > 10 ? w1/2 : w1;
+
+ ctx.fillRect(x + (w1 - w2)/2, top, w2, bottom - top);
+ ctx.beginPath();
+ ctx.moveTo(x+w1/2, high);
+ ctx.lineTo(x+w1/2, low);
+ ctx.stroke();
+ }
+ ctx.globalAlpha = 1;
+
+ }
+
+ function drawVolume(ctx, from, to, color, price, points, highest)
+ {
+ ctx.fillStyle = color;
+ ctx.globalAlpha = 0.6;
+ ctx.strokeStyle = Qt.rgba(0.8, 0.8, 0.8, 1);
+ ctx.lineWidth = 1;
+
+ //volume x axis
+ volumeAxis.text = "volume:" + Math.round(highest/(1000*100)) + "M";
+ for (var j = 1; j < 30; j++) {
+ var val = (highest * j) / 30;
+ val = canvas.height * (1 - val/highest);
+ ctx.beginPath();
+ if (j % 5)
+ ctx.moveTo(canvas.width - 15, val);
+ else
+ ctx.moveTo(canvas.width - 20, val);
+ ctx.lineTo(canvas.width - 10, val);
+ ctx.stroke();
+ }
+
+ ctx.beginPath();
+ ctx.moveTo(canvas.width - 10, 0);
+ ctx.lineTo(canvas.width - 10, canvas.height);
+ ctx.stroke();
+
+ var end = canvas.running? canvas.frames - canvas.first :points.length;
+ for (var i = 0; i < end; i++) {
+ var x = points[i].x;
+ var y = points[i][price];
+ y = canvas.height * (1 - y/highest);
+ ctx.fillRect(x, y, canvas.width/points.length, canvas.height - y);
+ }
+ }
+/*
+ onPainted : {
+ if (canvas.running) {
+ if (frames >= last) {
+ canvas.running = false;
+ canvas.frames = first;
+ runButton.text = "Run this chart";
+ comment.text = stockModel.description;
+ requestPaint();
+ } else {
+ frames += Math.round(view.count / 100);
+ if (frames > last) frames = last;
+ var price = stockModel.stockPriceAtIndex(frames);
+ if (price) {
+ comment.updateCurrent(price);
+ }
+
+ requestPaint();
+ }
+ }
+ }
+*/
+ onPaint: {
+ if (view.currentIndex <= 0)
+ first = 0;
+ if (last >= view.count)
+ last = view.count - 1;
+
+ //console.log("painting... first:" + first + ", last:" + last + " current:" + view.currentIndex);
+ var ctx = canvas.getContext("2d");
+ ctx.save();
+
+ ctx.globalCompositeOperation = "source-over";
+ ctx.lineWidth = 1;
+ ctx.lineJoin = "round";
+ ctx.fillStyle = "rgba(0,0,0,0)";
+
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+
+
+ var highestPrice = 500/canvas.scaleY;
+ var highestValume = 600 * 1000 * 1000/canvas.scaleY;
+ var points = [];
+ for (var i = 0; i <= last - first; i++) {
+ var price = stockModel.stockPriceAtIndex(i + first);
+ points.push({
+ x: i*canvas.width/(last-first+1),
+ open: price.openPrice,
+ close: price.closePrice,
+ high:price.highPrice,
+ low:price.lowPrice,
+ volume:price.volume
+ });
+ }
+
+ drawPrice(ctx, first, last, Qt.rgba(1, 0, 0, 1),"high", points, highestPrice);
+ drawPrice(ctx, first, last, Qt.rgba(0, 1, 0, 1),"low", points, highestPrice);
+ drawPrice(ctx, first, last, Qt.rgba(0, 0, 1, 1),"open", points, highestPrice);
+ drawPrice(ctx, first, last, Qt.rgba(0.5, 0.5, 0.5, 1),"close", points, highestPrice);
+ drawVolume(ctx, first, last, Qt.rgba(0.3, 0.5, 0.7, 1),"volume", points, highestValume);
+ drawKLine(ctx, first, last, points, highestPrice);
+ ctx.restore();
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-04-25 10:43:54 +0000