如何在angular 8中使用finos/透视https://perspective.finos.org/？

Question

如何在我的angular 8应用程序中使用finos/透视数据网格https://perspective.finos.org/。输入数据为JSON，需要输出为Datagrid。任何示例代码都会很有帮助。

GitHub存储库为https://github.com/finos/perspective

Answer 1

我已经创建了一个小演示应用程序perspective-angular。在本例中，数据是从csv上传的，并显示为datagrid。我认为在JSON的情况下应该是一样的。

其主要思想是提供对webcomponents的支持和使用node.js应用程序接口。

我安装@webcomponents/webcomponentsjs作为开发人员依赖项，并安装@finos/perspective, @finos/perspective-viewer, @finos/perspective-viewer-d3fc, @finos/perspective-viewer-datagrid, @finos/perspective-webpack-plugin.

在index.html中，我添加了：

<script src="webcomponents/webcomponents-loader.js"></script>
<script>
    if (!window.customElements) {
        document.write('<!--');
    }
</script>
<script src="webcomponents/custom-elements-es5-adapter.js"></script>
<!-- ! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->

在polyfills.ts中：

(window as any).global = window;

在tsconfig.json中：

"allowJs": true,
"allowSyntheticDefaultImports": true,

在angular.json资源中：

{
    "glob": "**/*.js",
    "input": "node_modules/@webcomponents/webcomponentsjs",
    "output": "webcomponents/"
}

在您想要使用透视图模块中添加schemas: [CUSTOM_ELEMENTS_SCHEMA]

在组件中添加几个导入：

import perspective, {PerspectiveWorker} from "@finos/perspective";
import "@finos/perspective-viewer";
import "@finos/perspective-viewer-datagrid";

在此之后，您可以使用<perspective-viewer>标记并通过以下方式访问它

const viewer: HTMLPerspectiveViewerElement = document.getElementsByTagName("perspective-viewer")[0] as HTMLPerspectiveViewerElement;