Blocks Tutorial - the Stock Quote Widget (Beta)

1/**
2*@function
3*@description describe your function
4*@param {string} arg1 - a sample parameter to the function
5*@returns {boolean} true on success, false on error
6*See http://wix.to/a8C0AFI for more information on function annotation
7*/
8export function foo(arg1){
9    //This function is part of my public API
10}
11

1/**
2*@function
3*@description refreshes the stock information
4*See http://wix.to/a8C0AFI for more information on function annotation
5*/
6export function refresh(arg1){
7    //This function is part of my public API
8}
9

1//wix-fetch enables the use of the API, which fetches data from a 3rd-party service
2import {fetch} from 'wix-fetch';
3 
4//When setting the percentage changed text, we'll use HTML, so that we can change the color on the fly. This represents the template for that HTML. %COLOR% and %CHANGE% are placeholders that will be replaced in the code below
5const percentChangeHTMLTemplate = '<p class="p1"><span style="color:%COLOR%;font-family:poppins-semibold,poppins,sans-serif">%CHANGE% %</span></p>'
6 
7let refreshTimer;
8 
9//onReady is called when the widget loads
10$w.onReady(function () {
11    //Refresh the stock quote
12    refresh();
13});
14 
15//onPropsChanged is called when the widget's properties change
16$widget.onPropsChanged((oldProps, newProps) => {
17    //Refresh the stock quote
18    refresh();
19});
20 
21/*
22@function
23@description Refreshes the stock quote
24*/
25export function refresh(){
26    //Call the stock API and process the results
27    getStockData();
28 
29    //If there was a previous refresh timer, clear it first
30    clearInterval(refreshTimer);
31 
32    //Set the new interval based on the timing defined in the property 'refreshInterval'
33    let intervalInMilliseconds = $widget.props.refreshInterval * 1000;
34    refreshTimer = setInterval(() => {
35        //Call the stock API and process the results
36        getStockData();
37    }, intervalInMilliseconds);
38}
39 
40function getStockData(){
41    //The widget's property 'symbol' holds the stock symbol for which we want to get the quote
42    let symbol = $widget.props.symbol;
43 
44    //Build the URL for data retrieval from https://iextrading.com/
45    let url = 'https://api.iextrading.com/1.0/stock/';  
46    let fullUrl = url + symbol + '/batch?types=quote';
47 
48    //Make an HTTP GET call to that URL
49    fetch(fullUrl, {method: 'get'})
50        //When that comes back successfully, read the response as a json object (for the sake of this example, we're ignoring error cases)
51        .then(response => response.json())
52        //When the json response is ready, keep going
53        .then(json => {
54            //Make sure we got the expected data back (in this case, the API returns the bulk of the data in the 'quote' member of the object)
55            let quote = json.quote;
56            if(!quote){
57                console.log('Missing quote in response from API');
58                return;
59            }
60 
61            try {           
62                //Try to process the quote
63                processQuote(quote);
64            } catch (err) {
65                console.log('Error processing quote from API - ', err);
66            }
67        });
68}
69 
70function processQuote(quote){
71    //Process the JSON returned by the iextrading.com API. See API reference here - https://iextrading.com/developer/docs/#quote
72 
73    //set the latestPrice and companyName elements accordingly
74    $w('#latestPrice').text = '$' + quote.latestPrice.toFixed(2);
75    $w('#companyName').text = quote.companyName;
76 
77    //Get the percentage changed and put it in the HTML template we'll use to display it
78    let percentChange = quote.changePercent * 100;
79    let percentChangeHTML = percentChangeHTMLTemplate.replace('%CHANGE%', percentChange.toFixed(2));
80    let changeColor;
81    
82    //Check if this was a positive or negative change
83    if(percentChange >= 0){
84        //Set the color to green and show the 'positiveChangeSVG' element which displays the green arrow
85        changeColor = '#6BC76B';
86        $w('#positiveChangeSVG').show();
87        $w('#negativeChangeSVG').hide();
88    }
89    else {
90        //Set the color to red and show the 'negativeChangeSVG' element which displays the red arrow
91        changeColor = '#FA4B4B';
92        $w('#positiveChangeSVG').hide();
93        $w('#negativeChangeSVG').show();
94    }
95    //Use the color determined above to replace the color in the HTML snippet, then display it on the 'percentChange' element
96    percentChangeHTML = percentChangeHTML.replace('%COLOR%', changeColor);
97    $w('#percentChange').html = percentChangeHTML;
98 
99    //Set all the other elements according to the different values we received
100    $w('#open').text = quote.open.toFixed(2);
101    $w('#close').text = quote.close.toFixed(2);
102    $w('#low').text = quote.low.toFixed(2);
103    $w('#high').text = quote.high.toFixed(2);
104    $w('#volume').text = quote.latestVolume.toString();
105    $w('#date').text = quote.latestTime;
106 
107    //If the change is bigger than the requested trigger, trigger an event
108    if(Math.abs(percentChange) >= $widget.props.percentChangeThreshold){
109        //$widget.fireEvent fires an event that can be handled with custom Wix Code JavaScript on the site
110        $widget.fireEvent('changeAlert', percentChange);
111        console.log('Fired OnChangeAlert with value of ', percentChange);
112    }
113