Using Perspective with Angular

[Supertramplee]

Feature Request

Description of Problem:

i'm trying to use Perspective with angular. but seems it's didn't works well with the latest release. also try with webpack / react demo, also raise errors...

Perspective is a wonderful BI tool. Hope it can deploy on both React/Angular/vue or pure JS :) . and i'll do my best to help if possible. i can do coding parts if you know how to fix it.. thanks!

Version

• angular 11.0.4
• perspective 1.0.0

what i do:

1. create new angular project ng new angular-perspective (@angular/cli was required if not install as global)

2. install Perspective

   dependencies: {
       "@finos/perspective": "^1.0.0",
       "@finos/perspective-viewer": "^1.0.0",
       "@finos/perspective-viewer-d3fc": "^1.0.0",
       "@finos/perspective-viewer-datagrid": "^1.0.0",
       "@finos/perspective-workspace": "^1.0.0",
       "@finos/perspective-webpack-plugin": "^1.0.0"
   }

3. install webpack npm install @angular-builders/[email protected] --save-dev & create webpack.config.js , config @finos/perspective-webpack-plugin

4. import perspective in app.components.ts import perspective from "@finos/perspective";, error as below:

   • Cannot find name space React

   node_modules/@finos/perspective-viewer/dist/esm/extensions.d.ts:32:52 - error TS2503: Cannot find namespace 'React'.
   
   32 declare type ReactPerspectiveViewerAttributes<T> = React.HTMLAttributes<T>;
                                                         ~~~~~
   node_modules/@finos/perspective-viewer/dist/esm/extensions.d.ts:35:5 - error TS2503: Cannot find namespace 'React'.
   
   35 } & React.DetailedHTMLProps<ReactPerspectiveViewerAttributes<PerspectiveViewerElement>, PerspectiveViewerElement>;
          ~~~~~
   node_modules/@finos/perspective-viewer/dist/esm/extensions.d.ts:10:23 - error TS2688: Cannot find type definition file for 'react'.    
   
   10 /// <reference types="react" />

   Fix: add @types/react as devDependence npm install @types/react --save-dev

   • from plugin.d.ts... not sure what's this..

   Error: node_modules/@finos/perspective-viewer/dist/esm/plugin.d.ts:50:5 - error TS1131: Property or signature expected.
   
   50     get name(): string;
          ~~~
   node_modules/@finos/perspective-viewer/dist/esm/plugin.d.ts:50:9 - error TS1005: ';' expected.
   
   50     get name(): string;
              ~~~~
   node_modules/@finos/perspective-viewer/dist/esm/plugin.d.ts:50:15 - error TS1005: ';' expected.
   
   50     get name(): string;
                    ~
   node_modules/@finos/perspective-viewer/dist/esm/plugin.d.ts:57:9 - error TS1005: ';' expected.
   
   57     get select_mode(): "select" | "toggle" | undefined;
              ~~~~~~~~~~~
   node_modules/@finos/perspective-viewer/dist/esm/plugin.d.ts:57:22 - error TS1005: ';' expected.
   
   57     get select_mode(): "select" | "toggle" | undefined;
                           ~
   node_modules/@finos/perspective-viewer/dist/esm/plugin.d.ts:67:9 - error TS1005: ';' expected.
   
   67     get min_config_columns(): number | undefined;
      [91m        ~~~~~~~~~~~~~~~~~~
   node_modules/@finos/perspective-viewer/dist/esm/plugin.d.ts:67:29 - error TS1005: ';' expected.
   
   67     get min_config_columns(): number | undefined;
   ............

[texodus]

You seem to be using a wildly out-of-date TypeScript, Webpack and/or Angular. I am far from an Angular expert, and have never heard of @angular-builders/custom-webpack. You don't provide your webpack.config.js or angular.json, but following the instructions on the custom-webpack plugin docs in a fresh project (as per your instructions) leads to a cavalcade of errors that are completely unrelated to Perspective (after correcting the numerous glaring syntax and spelling errors in the docs themselves ...). I suspect the version you're pinning (11.1.1) has some special significance in your environment? But it is not compatible with @latest for Angular itself, clearly. Suffice it to say, this is where my attempt to understand Angular+Webpack builds ends; if you can provide a complete example in a github repo that repros the error you're seeing, I will take another look.

All that being said, you don't need any of this - ng new ... + import "@finos/perspective-viewer" just works out-of-the-box without any special plugins.

[Supertramplee]

thanks for your response. and i have try to start a new project with angular12, it works (without perspective-webpack-plugin) but still suffer some error. what I suffer & what i do. make a demo here ng-perspective.

can you help to take a look? appreciate a lot :)