Last active
January 2, 2022 06:13
-
-
Save texodus/238458c2feb8c6b56599cdb6b3ac9526 to your computer and use it in GitHub Desktop.
Perspective / Custom `datetime` example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/> | |
| <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective/dist/cdn/perspective.js"></script> | |
| <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script> | |
| <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script> | |
| <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/css/material-dense.css" /> | |
| <script type="module"> | |
| import {worker} from "https://cdn.jsdelivr.net/npm/@finos/perspective/dist/cdn/perspective.js"; | |
| class CustomDatagrid extends customElements.get( | |
| "perspective-viewer-datagrid" | |
| ) { | |
| get name() { | |
| return "Custom Datagrid"; | |
| } | |
| style_seconds(...args) { | |
| for (const td of this.querySelectorAll("td")) { | |
| const meta = this._datagrid.getMeta(td); | |
| const col_name = meta.column_header.at(-1); | |
| if (this._schema[col_name] === "date") { | |
| td.textContent = this._formatter.format(meta.user); | |
| } | |
| } | |
| } | |
| async activate(...args) { | |
| await super.activate(...args); | |
| const view = await this.parentElement.getView(); | |
| this._schema = await view.schema(); | |
| if (!this._datagrid) { | |
| this._datagrid = this.querySelector("regular-table"); | |
| this._datagrid.addStyleListener( | |
| this.style_seconds.bind(this) | |
| ); | |
| this._formatter = new Intl.DateTimeFormat("en-us", { | |
| month: "long", | |
| weekday: "long", | |
| year: "numeric", | |
| day: "numeric", | |
| }); | |
| } | |
| } | |
| } | |
| customElements.define("custom-datagrid", CustomDatagrid); | |
| customElements | |
| .get("perspective-viewer") | |
| .registerPlugin("custom-datagrid"); | |
| const WORKER = worker(); | |
| const REQ = fetch("https://cdn.jsdelivr.net/npm/superstore-arrow/superstore.arrow"); | |
| async function load() { | |
| const resp = await REQ; | |
| const arrow = await resp.arrayBuffer(); | |
| const el = document.getElementsByTagName("perspective-viewer")[0]; | |
| const table = WORKER.table(arrow); | |
| el.load(table); | |
| el.restore({ | |
| settings: true, | |
| plugin: "Custom Datagrid", | |
| columns: ["Order Date", "Ship Date"], | |
| }); | |
| } | |
| load(); | |
| </script> | |
| <style> | |
| perspective-viewer { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <perspective-viewer editable> </perspective-viewer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment