mirror of
https://github.com/taosdata/TDengine
synced 2026-05-24 10:09:01 +00:00
c52c68aa4f
The following commits could not be applied individually due to context differences between the monorepo and the public repo's build files. They have been applied as a cumulative diff to ensure the final state matches the monorepo exactly: - chore: sync CI files with 3.0 branch to eliminate merge conflicts (rd-public/tsdb!271) - revert(refactor): dynamically link taosd taosudf taosmqtt against libtaosnative.so to reduce binary size (revert #183) (rd-public/tsdb!282) - fix(docs): autofix formatting issues across all doc files (rd-public/tsdb!296) - feat: support -DBUILD_SANITIZER=true on windows for debug build (rd-public/tsdb!291) - feat(build): build cache, mirror, and sccache optimizations (rd-public/tsdb!326) - docs: update image for three replica (rd-public/tsdb!324) - enh: shared storage on windows (rd-public/tsdb!333) - fix(cmake): convert ext_libs3 from git clone to URL tarball download (rd-public/tsdb!360) - feat: dual-source deps and comprehensive docs/packaging (cherry-pick to main) (rd-public/tsdb!352) - fix(cmake): guard DOWNLOAD_EXTRACT_TIMESTAMP for CMake < 3.24 and fix duplicate Cargo.lock entry (rd-public/tsdb!369) - fix: test case execution failure in pytest.sh (rd-public/tsdb!338) - enh: built-in compilation support for Python UDF plugins use abi3 (rd-public/tsdb!325)
135 lines
No EOL
5.5 KiB
HTML
135 lines
No EOL
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> |