| license: apache-2.0 |
Demo of Perspective.
This example of a <perspective-workspace> dashboard is generated from one
Apache Arrow source dataset, converted originally from this XLS from a
Tableau presentation.
This layout is just an example; you can explore your own visualizations in the Perspective
configuration menu, accessed by clicking the dropdown arrow in each pane's upper
left, or advanced options in the pane's right-click context menu.
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" /> | |
| <link rel="stylesheet" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/@finos/perspective-workspace/dist/css/material.css"/> | |
| <script src="https://cdn.jsdelivr.net/npm/@finos/perspective-workspace@latest"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid@latest"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc@latest"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@finos/perspective@latest"></script> | |
| <style> | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <perspective-workspace id="workspace"> | |
| <perspective-viewer table="superstore"></perspective-viewer> | |
| </perspective-workspace> | |
| <script> | |
| const DATA_URL = "https://cdn.jsdelivr.net/npm/superstore-arrow/superstore.arrow"; | |
| async function get_layout() { | |
| const req = await fetch("layout.json"); | |
| const json = await req.json(); | |
| return json; | |
| } | |
| const datasource = async () => { | |
| const request = fetch(DATA_URL); | |
| const worker = perspective.worker(); | |
| const response = await request; | |
| const buffer = await response.arrayBuffer(); | |
| return await worker.table(buffer); | |
| }; | |
| window.addEventListener("load", async () => { | |
| window.workspace.tables.set("superstore", datasource()); | |
| const layout = await get_layout(); | |
| window.workspace.restore(layout); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
| { | |
| "sizes": [1], | |
| "detail": { | |
| "main": { | |
| "type": "split-area", | |
| "orientation": "horizontal", | |
| "children": [ | |
| { | |
| "type": "tab-area", | |
| "widgets": [ | |
| "PERSPECTIVE_GENERATED_ID_0", | |
| "PERSPECTIVE_GENERATED_ID_1" | |
| ], | |
| "currentIndex": 0 | |
| }, | |
| { | |
| "type": "tab-area", | |
| "widgets": ["PERSPECTIVE_GENERATED_ID_2"], | |
| "currentIndex": 0 | |
| } | |
| ], | |
| "sizes": [0.5, 0.5] | |
| } | |
| }, | |
| "mode": "globalFilters", | |
| "viewers": { | |
| "PERSPECTIVE_GENERATED_ID_0": { | |
| "plugin": "datagrid", | |
| "group_by": ["Region", "State"], | |
| "split_by": ["Category", "Sub-Category"], | |
| "columns": ["Sales", "Profit"], | |
| "master": false, | |
| "name": "Sales Report", | |
| "table": "superstore", | |
| "linked": false | |
| }, | |
| "PERSPECTIVE_GENERATED_ID_1": { | |
| "plugin": "datagrid", | |
| "columns": [ | |
| "Row ID", | |
| "Order ID", | |
| "Ship Mode", | |
| "Customer ID", | |
| "Customer Name", | |
| "Segment", | |
| "Country", | |
| "City", | |
| "State", | |
| "Postal Code", | |
| "Region", | |
| "Product ID", | |
| "Category", | |
| "Sub-Category", | |
| "Product Name", | |
| "Sales", | |
| "Quantity", | |
| "Discount", | |
| "Profit", | |
| "Order Date", | |
| "Ship Date" | |
| ], | |
| "master": false, | |
| "name": "superstore.csv", | |
| "table": "superstore", | |
| "linked": false | |
| }, | |
| "PERSPECTIVE_GENERATED_ID_2": { | |
| "plugin": "Treemap", | |
| "group_by": ["State"], | |
| "columns": ["Sales", "Profit", null], | |
| "sort": [["Profit", "desc"]], | |
| "plugin_config": { | |
| "realValues": ["Sales", "Profit", null], | |
| "treemaps": { | |
| "": { | |
| "treemapLevel": 0, | |
| "treemapRoute": [""] | |
| } | |
| } | |
| }, | |
| "master": false, | |
| "name": "Sales Report (by State)", | |
| "table": "superstore", | |
| "linked": false | |
| } | |
| } | |
| } |
