| 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"> | |
| <script src="https://cdn.jsdelivr.net/npm/webfontloader"></script> | |
| <script>WebFont.load({google:{families:["Roboto Mono:200,400","Material Icons","Open Sans:300,400"]}})</script> | |
| <link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/@finos/perspective-workspace/dist/umd/material.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/@finos/perspective-workspace/dist/umd/perspective-workspace.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid/dist/umd/perspective-viewer-datagrid.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@finos/perspective/dist/umd/perspective.js"></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", | |
| "row_pivots": [ | |
| "Region", | |
| "State" | |
| ], | |
| "column_pivots": [ | |
| "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", | |
| "row_pivots": [ | |
| "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 | |
| } | |
| } | |
| } |
