Files
finos--perspective/examples/blocks/src/streaming/streaming.js
T
2026-07-13 12:23:53 +08:00

110 lines
4.4 KiB
JavaScript

// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃
// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
// ┃ Copyright (c) 2017, the Perspective Authors. ┃
// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
// ┃ This file is part of the Perspective library, distributed under the terms ┃
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
import "/node_modules/@perspective-dev/viewer/dist/cdn/perspective-viewer.js";
import "/node_modules/@perspective-dev/viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js";
import "/node_modules/@perspective-dev/viewer-charts/dist/cdn/perspective-viewer-charts.js";
import perspective from "/node_modules/@perspective-dev/client/dist/cdn/perspective.js";
var SECURITIES = [
"AAPL.N",
"AMZN.N",
"QQQ.N",
"NVDA.N",
"TSLA.N",
"FB.N",
"MSFT.N",
"TLT.N",
"XIV.N",
"YY.N",
"CSCO.N",
"GOOGL.N",
"PCLN.N",
];
var CLIENTS = [
"Homer",
"Marge",
"Bart",
"Lisa",
"Maggie",
"Moe",
"Lenny",
"Carl",
"Krusty",
];
// Create 5 random rows of data.
function newRows() {
var rows = [];
for (var x = 0; x < 50; x++) {
rows.push({
name: SECURITIES[Math.floor(Math.random() * SECURITIES.length)],
client: CLIENTS[Math.floor(Math.random() * CLIENTS.length)],
lastUpdate: new Date(),
chg: Math.random() * 20 - 10,
bid: Math.random() * 10 + 90,
ask: Math.random() * 10 + 100,
vol: Math.random() * 10 + 100,
});
}
return rows;
}
// Get element from the DOM.
var elem = document.getElementsByTagName("perspective-viewer")[0];
// Create a new Perspective WebWorker instance.
var worker = await perspective.worker();
// Create a new Perspective table in our `worker`, and limit it it 500 rows.
const table = await worker.table(newRows(), {
name: "streaming",
limit: 500,
});
// Load the `table` in the `<perspective-viewer>` DOM reference.
await elem.load(worker);
elem.restore({
plugin: "Datagrid",
columns_config: {
"(+)chg": { fg_gradient: 7.93, number_fg_mode: "bar" },
"(-)chg": { fg_gradient: 8.07, number_fg_mode: "bar" },
chg: { bg_gradient: 9.97, number_bg_mode: "gradient" },
},
plugin_config: {
editable: false,
scroll_lock: true,
},
settings: true,
table: "streaming",
theme: "Pro Light",
group_by: ["name"],
split_by: ["client"],
columns: ["(-)chg", "chg", "(+)chg"],
filter: [],
sort: [["chg", "desc"]],
expressions: {
"(-)chg": 'if("chg"<0){"chg"}else{0}',
"(+)chg": 'if("chg">0){"chg"}else{0}',
},
aggregates: { "(-)chg": "avg", chg: "avg", "(+)chg": "avg" },
});
// Add more rows every 50ms using the `update()` method on the `table` directly.
(function postRow() {
table.update(newRows());
setTimeout(postRow, 10);
})();