135 lines
5.5 KiB
HTML
135 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Perspective Viewer Dashboard</title>
|
|
<link rel="stylesheet" crossorigin="anonymous"
|
|
href="https://unpkg.com/@finos/perspective-viewer/dist/css/themes.css"/>
|
|
<style>
|
|
/* define the layout of the entire dashboard */
|
|
#dashboard {
|
|
display: grid;
|
|
/* define a grid layout with two rows and two columns */
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: auto auto auto;
|
|
gap: 20px;
|
|
padding: 20px;
|
|
/* limit the maximum height of the Dashboard to the viewport height */
|
|
max-height: 100vh;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* define the style */
|
|
.viewer-container {
|
|
/* adjust the height of the container to ensure it can be displayed on one screen */
|
|
height: calc((100vh - 30px) / 2);
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #333;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
perspective-viewer {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
body {
|
|
background-color: #242526;
|
|
color: white;
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- introduce JavaScript files related to Perspective Viewer -->
|
|
<script type="module" src="https://unpkg.com/@finos/perspective@3.1.3/dist/cdn/perspective.js"></script>
|
|
<script type="module" src="https://unpkg.com/@finos/perspective-viewer@3.1.3/dist/cdn/perspective-viewer.js"></script>
|
|
<script type="module"
|
|
src="https://unpkg.com/@finos/perspective-viewer-datagrid@3.1.3/dist/cdn/perspective-viewer-datagrid.js"></script>
|
|
<script type="module"
|
|
src="https://unpkg.com/@finos/perspective-viewer-d3fc@3.1.3/dist/cdn/perspective-viewer-d3fc.js"></script>
|
|
|
|
// ANCHOR: perspective_viewer
|
|
<script type="module">
|
|
// import the Perspective library
|
|
import perspective from "https://unpkg.com/@finos/perspective@3.1.3/dist/cdn/perspective.js";
|
|
|
|
document.addEventListener("DOMContentLoaded", async function () {
|
|
// an asynchronous function for loading the view
|
|
async function load_viewer(viewerId, config) {
|
|
try {
|
|
const table_name = "meters_values";
|
|
const viewer = document.getElementById(viewerId);
|
|
// connect WebSocket server
|
|
const websocket = await perspective.websocket("ws://localhost:8085/websocket");
|
|
// open server table
|
|
const server_table = await websocket.open_table(table_name);
|
|
// load the table into the view
|
|
await viewer.load(server_table);
|
|
// use view configuration
|
|
await viewer.restore(config);
|
|
} catch (error) {
|
|
console.error('发生错误:', error);
|
|
}
|
|
}
|
|
|
|
// configuration of the view
|
|
const config1 = {
|
|
"version": "3.3.1", // Perspective library version (compatibility identifier)
|
|
"plugin": "Datagrid", // View mode: Datagrid (table) or D3FC (chart)
|
|
"plugin_config": { // Plugin-specific configuration
|
|
"columns": {
|
|
"current": {
|
|
"width": 150 // Column width in pixels
|
|
}
|
|
},
|
|
"edit_mode": "READ_ONLY", // Edit mode: READ_ONLY (immutable) or EDIT (editable)
|
|
"scroll_lock": false // Whether to lock scroll position
|
|
},
|
|
"columns_config": {}, // Custom column configurations (colors, formatting, etc.)
|
|
"settings": true, // Whether to show settings panel (true/false)
|
|
"theme": "Power Meters", // Custom theme name (must be pre-defined)
|
|
"title": "Meters list data", // View title
|
|
"group_by": ["location", "groupid"], // Row grouping fields (equivalent to `row_pivots`)
|
|
"split_by": [], // Column grouping fields (equivalent to `column_pivots`)
|
|
"columns": [ // Columns to display (in order)
|
|
"timestamp",
|
|
"location",
|
|
"current",
|
|
"voltage",
|
|
"phase"
|
|
],
|
|
"filter": [], // Filter conditions (triplet format array)
|
|
"sort": [], // Sorting rules (format: [field, direction])
|
|
"expressions": {}, // Custom expressions (e.g., calculated columns)
|
|
"aggregates": { // Aggregation function configuration
|
|
"timestamp": "last", // Aggregation: last (takes the latest value)
|
|
"voltage": "last", // Aggregation: last
|
|
"phase": "last", // Aggregation: last
|
|
"current": "last" // Aggregation: last
|
|
}
|
|
};
|
|
|
|
// load the first view
|
|
await load_viewer("prsp-viewer-1", config1);
|
|
});
|
|
</script>
|
|
|
|
<!-- define the HTML Structure of the Dashboard -->
|
|
<div id="dashboard">
|
|
<div class="viewer-container">
|
|
<perspective-viewer id="prsp-viewer-1" theme="Pro Dark"></perspective-viewer>
|
|
</div>
|
|
</div>
|
|
// ANCHOR_END: perspective_viewer
|
|
</body>
|
|
|
|
</html> |