Skip to content

Commit 69f2fdd

Browse files
texodustexodus
authored
Merge pull request #2910 from finos/fix-api-docs
Fix API docs
2 parents 3ccef43 + 415285a commit 69f2fdd

File tree

13 files changed

+81
-25
lines changed

13 files changed

+81
-25
lines changed

‎docs/md/SUMMARY.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
- [Hosting a `WebSocketServer` in Node.js](./how_to/javascript/nodejs_server.md)
4343
- [`perspective-viewer` Custom Element library](./how_to/javascript/viewer.md)
4444
- [Theming](./how_to/javascript/theming.md)
45+
- [Custom Themes](./how_to/javascript/custom_themes.md)
4546
- [Loading data from a `Table`](./how_to/javascript/loading_data.md)
4647
- [Loading data from a virtual `Table`](./how_to/javascript/loading_virtual_data.md)
4748
- [Saving and restoring UI state](./how_to/javascript/save_restore.md)

‎docs/md/how_to/javascript/custom_themes.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Custom themes
2+
3+
The best way to write a new theme is to
4+
[fork and modify an existing theme](https://github.com/finos/perspective/tree/master/rust/perspective-viewer/src/themes),
5+
which are _just_ collections of regular CSS variables (no preprocessor is
6+
required, though Perspective's own themes use one). `<perspective-viewer>` is
7+
not "themed" by default and will lack icons and label text in addition to colors
8+
and fonts, so starting from an empty theme forces you to define _every_
9+
theme-able variable to get a functional UI.
10+
11+
### Icons and Translation
12+
13+
UI icons are defined by CSS variables provided by
14+
[`@finos/perspective-viewer/dist/css/icons.css`](https://github.com/finos/perspective/blob/master/rust/perspective-viewer/src/themes/icons.less).
15+
These variables must be defined for the UI icons to work - there are no default
16+
icons without a theme.
17+
18+
UI text is also defined in CSS variables provided by
19+
[`@finos/perspective-viewer/dist/css/intl.css`](https://github.com/finos/perspective/blob/master/rust/perspective-viewer/src/themes/intl.less),
20+
and has identical import requirements. Some _example definitions_
21+
(automatically-translated sans-editing) can be found
22+
[`@finos/perspective-viewer/dist/css/intl/` folder](https://github.com/finos/perspective/tree/master/rust/perspective-viewer/src/themes/intl).
23+
24+
Importing the pre-built `themes.css` stylesheet as well as a custom theme will
25+
define Icons and Translation globally as a side-effect. You can still customize
26+
icons in this mode with rules (of the appropriate specificity), _but_ if you do
27+
not still remember to define these variables yourself, your theme will not work
28+
without the base `themes.css` pacage available.

‎examples/blocks/src/editable/index.html‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,26 @@
22
<html>
33
<head>
44
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
5-
<link rel="preload" href="/node_modules/@finos/perspective/dist/wasm/perspective-server.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
6-
<link rel="preload" href="/node_modules/@finos/perspective-viewer/dist/wasm/perspective-viewer.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
7-
<link rel="preload" href="/node_modules/superstore-arrow/superstore.lz4.arrow" as="fetch" type="arraybuffer" crossorigin="anonymous" />
8-
<link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-viewer/dist/css/themes.css" />
5+
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@finos/perspective/dist/cdn/perspective-server.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
6+
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/cdn/perspective-viewer.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
7+
<link rel="preload" href="https://cdn.jsdelivr.net/npm/superstore-arrow/superstore.lz4.arrow" as="fetch" type="arraybuffer" crossorigin="anonymous" />
8+
<!-- <link rel="stylesheet" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/css/themes.css" /> -->
9+
<link rel="stylesheet" href="customStyle.css" />
910
<script type="module">
10-
import "/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js";
11-
import "/node_modules/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js";
12-
import "/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js";
11+
import "https://cdn.jsdelivr.net/npm/@finos/perspective-viewer@3.3.2/dist/cdn/perspective-viewer.js";
12+
import "https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid@3.3.2/dist/cdn/perspective-viewer-datagrid.js";
13+
import "https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc@3.3.2/dist/cdn/perspective-viewer-d3fc.js";
1314

14-
import perspective from "/node_modules/@finos/perspective/dist/cdn/perspective.js";
15+
import perspective from "https://cdn.jsdelivr.net/npm/@finos/perspective@3.3.2/dist/cdn/perspective.js";
1516

1617
const worker = await perspective.worker();
17-
const resp = await fetch("/node_modules/superstore-arrow/superstore.lz4.arrow");
18+
const resp = await fetch("https://cdn.jsdelivr.net/npm/superstore-arrow/superstore.lz4.arrow");
1819
const arrow = await resp.arrayBuffer();
1920
const viewer = document.getElementsByTagName("perspective-viewer")[0];
2021
const table = worker.table(arrow);
2122
viewer.load(table);
22-
viewer.restore({ settings: true, plugin_config: { edit_mode: "EDIT" } });
23+
viewer.restore({ settings: true });
24+
viewer.resetThemes(["Style1", "Pro Dark", "Pro Light"]);
2325
</script>
2426
<style>
2527
perspective-viewer {

‎examples/react-example/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@
2020
},
2121
"devDependencies": {
2222
"esbuild": "^0.14.54",
23-
"http-server": "^14.1.1"
23+
"http-server": "^14.1.1",
24+
"@types/react": "^18",
25+
"@types/react-dom": "^18"
2426
}
2527
}

‎examples/react-example/src/index.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ import perspective from "@finos/perspective";
1717
import perspective_viewer from "@finos/perspective-viewer";
1818
import "@finos/perspective-viewer-datagrid";
1919
import "@finos/perspective-viewer-d3fc";
20-
import type { ViewerConfigUpdate } from "@finos/perspective-viewer";
20+
import type {
21+
HTMLPerspectiveViewerElement,
22+
ViewerConfigUpdate,
23+
} from "@finos/perspective-viewer";
2124

2225
import "@finos/perspective-viewer/dist/css/themes.css";
2326
import "./index.css";
@@ -50,7 +53,7 @@ const config: ViewerConfigUpdate = {
5053
};
5154

5255
const App = (): React.ReactElement => {
53-
const viewer = React.useRef(null);
56+
const viewer = React.useRef<HTMLPerspectiveViewerElement>(null);
5457
React.useEffect(() => {
5558
getTable().then((table) => {
5659
if (viewer.current) {
@@ -63,4 +66,6 @@ const App = (): React.ReactElement => {
6366
return <perspective-viewer ref={viewer}></perspective-viewer>;
6467
};
6568

66-
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
69+
ReactDOM.createRoot(
70+
document.getElementById("root") as ReactDOM.Container
71+
).render(<App />);

‎examples/react-example/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"noImplicitUseStrict": false,
1313
"noUnusedLocals": true,
1414
"strictNullChecks": true,
15-
"skipLibCheck": true,
15+
"skipLibCheck": false,
1616
"removeComments": false,
1717
"jsx": "react",
1818
"allowSyntheticDefaultImports": true,

‎packages/perspective-viewer-d3fc/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"type": "module",
88
"exports": {
99
".": {
10-
"types": "./dist/esm/types/index.d.ts",
10+
"types": "./dist/esm/index.d.ts",
1111
"default": "./dist/esm/perspective-viewer-d3fc.js"
1212
},
1313
"./src/*": "./src/*",
@@ -31,7 +31,7 @@
3131
"src/**/*",
3232
"index.d.ts"
3333
],
34-
"types": "dist/esm/types/index.d.ts",
34+
"types": "dist/esm/index.d.ts",
3535
"scripts": {
3636
"prebuild": "mkdirp dist/esm",
3737
"build": "node ./build.js",

‎packages/perspective-viewer-datagrid/package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@
55
"unpkg": "dist/cdn/perspective-viewer-datagrid.js",
66
"jsdelivr": "dist/cdn/perspective-viewer-datagrid.js",
77
"exports": {
8-
".": "./dist/esm/perspective-viewer-datagrid.js",
8+
".": {
9+
"types": "./index.d.ts",
10+
"default": "./dist/esm/perspective-viewer-datagrid.js"
11+
},
912
"./dist/*": "./dist/*",
1013
"./package.json": "./package.json"
1114
},
@@ -14,7 +17,6 @@
1417
"dist/**/*",
1518
"index.d.ts"
1619
],
17-
"types": "index.d.ts",
1820
"scripts": {
1921
"build": "node build.js",
2022
"clean": "rimraf dist",

‎pnpm-lock.yaml‎

Lines changed: 19 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎rust/perspective-js/Cargo.toml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ keywords = ["experimental"]
2323
include = ["src/**/*", "Cargo.toml", "./package.json", "docs/**/*", "build.rs"]
2424

2525
[package.metadata.docs.rs]
26+
features = ["external-docs"]
2627
rustc-args = ["--cfg", "web_sys_unstable_apis"]
2728
rustdoc-args = ["--html-in-header", "docs/index.html"]
2829

0 commit comments

Comments
 (0)