Perspective › Examples

Market

3-panel dashboard of Datagrid, X Bar and Candlestick: Data grid of id, side, security and price, sorted by timestamp; X Bar chart of if("side"=='buy'){-1}else{1}, grouped by bucket("price", 0.5), split by side, filtered to status == open, sorted by bucket("price", 0.5), with 2 computed expression columns; Candlestick chart of price, price 2 and price 3, grouped by bucket("timestamp", 'm'), filtered to status == closed, with 3 computed expression columns.

Candlestick, live order book and blotter over one simulated feed.

Market: 3-panel dashboard of Datagrid, X Bar and Candlestick: Data grid of id, side, security and price, sorted by timestamp; X Bar chart of if("side"=='buy'){-1}else{1}, grouped by bucket("price", 0.5), split by side, filtered to status == open, sorted by bucket("price", 0.5), with 2 computed expression columns; Candlestick chart of price, price 2 and price 3, grouped by bucket("timestamp", 'm'), filtered to status == closed, with 3 computed expression columns.

Data

A simulated order book streaming into a Perspective table in real time: orders are created, filled, cancelled and expired continuously, and every data grid, pivot and chart updates incrementally as they arrive.

Generated continuously in the browser by a JavaScript simulation streaming into a Perspective Table.

Configuration

This example is a saved <perspective-viewer> workspace. Pass this JSON to viewer.restoreWorkspace() to reproduce it over the same table:

{
    "active": "PERSPECTIVE_GENERATED_ID_0",
    "layout": {
        "type": "split-layout",
        "children": [
            {
                "type": "tab-layout",
                "tabs": [
                    "PERSPECTIVE_GENERATED_ID_2"
                ],
                "selected": 0
            },
            {
                "type": "split-layout",
                "children": [
                    {
                        "type": "tab-layout",
                        "tabs": [
                            "PERSPECTIVE_GENERATED_ID_1"
                        ],
                        "selected": 0
                    },
                    {
                        "type": "tab-layout",
                        "tabs": [
                            "PERSPECTIVE_GENERATED_ID_0"
                        ],
                        "selected": 0
                    }
                ],
                "sizes": [
                    0.5,
                    0.5
                ],
                "orientation": "vertical"
            }
        ],
        "sizes": [
            0.5,
            0.5
        ],
        "orientation": "horizontal"
    },
    "panels": {
        "PERSPECTIVE_GENERATED_ID_0": {
            "columns_config": {
                "price": {
                    "fg_mode": "label-bar",
                    "fg_gradient": 20
                }
            },
            "plugin": "Datagrid",
            "table": "market",
            "title": "Blotter",
            "sort": [
                [
                    "timestamp",
                    "desc"
                ]
            ],
            "columns": [
                "id",
                "side",
                "security",
                "price",
                "timestamp",
                "status"
            ]
        },
        "PERSPECTIVE_GENERATED_ID_1": {
            "plugin": "X Bar",
            "table": "market",
            "title": "Order Book (Chart)",
            "group_by": [
                "bucket(\"price\", 0.5)"
            ],
            "split_by": [
                "side"
            ],
            "sort": [
                [
                    "bucket(\"price\", 0.5)",
                    "desc"
                ]
            ],
            "filter": [
                [
                    "status",
                    "==",
                    "open"
                ]
            ],
            "expressions": {
                "if(\"side\"=='buy'){-1}else{1}": "if(\"side\"=='buy'){-1}else{1}",
                "bucket(\"price\", 0.5)": "bucket(\"price\", 0.5)"
            },
            "columns": [
                "if(\"side\"=='buy'){-1}else{1}"
            ]
        },
        "PERSPECTIVE_GENERATED_ID_2": {
            "plugin": "Candlestick",
            "table": "market",
            "title": "Candlestick",
            "group_by": [
                "bucket(\"timestamp\", 'm')"
            ],
            "filter": [
                [
                    "status",
                    "==",
                    "closed"
                ]
            ],
            "expressions": {
                "price 3": "\"price\"",
                "bucket(\"timestamp\", 'm')": "bucket(\"timestamp\", 'm')",
                "price 2": "\"price\""
            },
            "columns": [
                "price",
                null,
                "price 2",
                "price 3"
            ],
            "aggregates": {
                "price": "avg",
                "price 3": "low",
                "price 2": "high"
            }
        }
    }
}

About Perspective

Perspective is an open-source, WebAssembly-powered data grid, pivot table and charting component for large, real-time and streaming datasets — in the browser, Python, Jupyter, Node.js and Rust.

Documentation