timkpaine/.block

## .block
license: apache-2.0

## README.md

      
    Raw
  

              README.md
            
          
    This is an example of getting IEX financial data into the perspective viewer.

  
## fetch.js
var PUB_TOKEN = "Tpk_ecc89ddf30a611e9958142010a80043c";
var IEX_URL = "https://sandbox.iexapis.com/beta/stock/";
var QUERY1 = "/chart?token=" + PUB_TOKEN;
var QUERY2 = "/stats?token=" + PUB_TOKEN;
var QUERY3 = "/balance-sheet?token=" + PUB_TOKEN;


function run(input, psp, string, wrap=false, index=null){
    let xhr = new XMLHttpRequest();
    xhr.open('GET', IEX_URL + input.value + string);
    xhr.onload = evt => {
        let data = JSON.parse(xhr.responseText);
        if(index){
            data = data[index];
        }
        psp.delete();

        if(wrap){
            psp.update([data]);
        } else {
            psp.update(data);
        }
    };
    xhr.send();
}

window.addEventListener("WebComponentsReady", function() {
    // Get element from the DOM.
    var psp1 = document.getElementsByTagName("perspective-viewer")[0];
    var psp2 = document.getElementsByTagName("perspective-viewer")[1];
    var psp3 = document.getElementsByTagName("perspective-viewer")[2];

    let input = document.getElementById("ticker");

    run(input, psp1, QUERY1);
    run(input, psp2, QUERY2, true);
    run(input, psp3, QUERY3, false, 'balancesheet');

    input.addEventListener('keyup', (ev) => {
        if(ev.keyCode === 13){
            run(input, psp1, QUERY1);
            run(input, psp2, QUERY2, true);
            run(input, psp3, QUERY3, false, 'balancesheet');
        }
      });
});

## index.css
perspective-viewer {
    flex: 1;
    height: 400px;
}
perspective-viewer#two {
    height: 150px;
}

input {
    height:25px;
}
body{
    display: flex;
    flex-direction: column;
}

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <script src="https://unpkg.com/@jpmorganchase/perspective/build/perspective.js"></script>
    <script src="https://unpkg.com/@jpmorganchase/perspective-viewer/build/perspective.view.js"></script>
    <script src="https://unpkg.com/@jpmorganchase/perspective-viewer-hypergrid/build/hypergrid.plugin.js"></script>
    <script src="https://unpkg.com/@jpmorganchase/perspective-viewer-highcharts/build/highcharts.plugin.js"></script>
    <script src="fetch.js"></script>
    <link rel='stylesheet' href="index.css">
    <link rel='stylesheet' href="https://unpkg.com/@jpmorganchase/perspective-viewer/build/material.css" is="custom-style">
</head>
<body>
    <input id="ticker" type="text" value="JPM"></input>
    <perspective-viewer id="one" view="y_line" columns='["open", "high", "low", "close"]' limit="500"></perspective-viewer>
    <h4>More charts below! Hit open</h4>
    <perspective-viewer id="two" limit="500"></perspective-viewer>
    <perspective-viewer id="three" view="heatmap" limit="500"></perspective-viewer>
</body>
</html>
	var PUB_TOKEN = "Tpk_ecc89ddf30a611e9958142010a80043c";
	var IEX_URL = "https://sandbox.iexapis.com/beta/stock/";
	var QUERY1 = "/chart?token=" + PUB_TOKEN;
	var QUERY2 = "/stats?token=" + PUB_TOKEN;
	var QUERY3 = "/balance-sheet?token=" + PUB_TOKEN;


	function run(input, psp, string, wrap=false, index=null){
	let xhr = new XMLHttpRequest();
	xhr.open('GET', IEX_URL + input.value + string);
	xhr.onload = evt => {
	let data = JSON.parse(xhr.responseText);
	if(index){
	data = data[index];
	}
	psp.delete();

	if(wrap){
	psp.update([data]);
	} else {
	psp.update(data);
	}
	};
	xhr.send();
	}

	window.addEventListener("WebComponentsReady", function() {
	// Get element from the DOM.
	var psp1 = document.getElementsByTagName("perspective-viewer")[0];
	var psp2 = document.getElementsByTagName("perspective-viewer")[1];
	var psp3 = document.getElementsByTagName("perspective-viewer")[2];

	let input = document.getElementById("ticker");

	run(input, psp1, QUERY1);
	run(input, psp2, QUERY2, true);
	run(input, psp3, QUERY3, false, 'balancesheet');

	input.addEventListener('keyup', (ev) => {
	if(ev.keyCode === 13){
	run(input, psp1, QUERY1);
	run(input, psp2, QUERY2, true);
	run(input, psp3, QUERY3, false, 'balancesheet');
	}
	});
	});
	perspective-viewer {
	flex: 1;
	height: 400px;
	}
	perspective-viewer#two {
	height: 150px;
	}

	input {
	height:25px;
	}
	body{
	display: flex;
	flex-direction: column;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<script src="https://unpkg.com/@jpmorganchase/perspective/build/perspective.js"></script>
	<script src="https://unpkg.com/@jpmorganchase/perspective-viewer/build/perspective.view.js"></script>
	<script src="https://unpkg.com/@jpmorganchase/perspective-viewer-hypergrid/build/hypergrid.plugin.js"></script>
	<script src="https://unpkg.com/@jpmorganchase/perspective-viewer-highcharts/build/highcharts.plugin.js"></script>
	<script src="fetch.js"></script>
	<link rel='stylesheet' href="index.css">
	<link rel='stylesheet' href="https://unpkg.com/@jpmorganchase/perspective-viewer/build/material.css" is="custom-style">
	</head>
	<body>
	<input id="ticker" type="text" value="JPM"></input>
	<perspective-viewer id="one" view="y_line" columns='["open", "high", "low", "close"]' limit="500"></perspective-viewer>
	<h4>More charts below! Hit open</h4>
	<perspective-viewer id="two" limit="500"></perspective-viewer>
	<perspective-viewer id="three" view="heatmap" limit="500"></perspective-viewer>
	</body>
	</html>