In this article, I’d like to submit the tiny guide for Perspective usage in the Angular application.
Perspective is the powerful data visualization component. It is based on JS + WebAssebmly or Python, supports Apache Arrow, CSV, JSON formats.
More information about Perspective is available by this link.
First of all, we need an Angular application. If you don’t have one, you can create it by calling the command below.
The second step is adding the Perspective dependencies in package.json:
The next step is providing the webpack configuration for the perspective-webpack-plugin.
Create webpack.config.js and place this config in it.
Then, in the angular.json we need to add the webcomponent.js asset’s configuration.
We need to edit the polyfills.ts file.
Add ‘ (window as any).global = window; ‘ for the node compatibility.
The main.ts should look like this:
In the index.html, in the head tag, add the following code.
Manual import perspective-viewer-d3fc from the CDN is a temporary solution for chart visualization fixing.
Then, we need to provide the custom element schema in the application module file.
After all these preparations, we can configure our components.
In the less (css/sass/scss) component’s file, add import Perspective’s themes, and feel free to provide your own styles.
Add the perspective-viewer in the component’s html.
The last step is component.ts configuration. Provide necessary imports, define the worker, provide data to the viewer.
The source code of this example is available on Github.