FlyFish|Front-end data visualization development pit avoidance guide (1)

Time:2022-8-5

FlyFish is an open source data visualization orchestration platform of Cloud Intelligence. By configuring the data model, it provides users with hundreds of visual graphic components, and zero coding can achieve a cool visual large screen that meets their own business needs. At the same time, FlyFish also provides flexible expansion capabilities, supports configuration of component development, custom functions and global events, and ensures efficient development and delivery for complex demand scenarios.

It should be noted that this pit avoidance guide is only for FlyFish, an open source data visualization platform for cloud intelligence. If you are also interested in data visualization, please clickFlyFish, give FlyFish a star. and WeChat addedxiaoyuerwiseReply to Flying Fish and join the FlyFish developer exchange group to discuss.

  1. After Q1FlyFish is successfully built, the component development module reports an error.

FlyFish|Front-end data visualization development pit avoidance guide (1)

A1: The component package has not been imported. The download address of the component package is as follows:

https://flyfish-demo.opscloud…

  1. Q2: FlyFish 2.0 version front-end NPM installation dependency package error

A2: You need to use Node v12 version NPM to install dependencies.

  1. Q3: An error is reported after FlyFish deployment is started

FlyFish|Front-end data visualization development pit avoidance guide (1)

FlyFish|Front-end data visualization development pit avoidance guide (1)

A3: The web project needs to be compiled and correctly placed in the www/static directory. Please check whether there is corresponding compiled code in this directory.

  1. Q4: NPM source loading failed

A4: You can remove the contents of the current components .npmrc and .yarnrc. This package has been released to the NPM public source.

  1. Q5: An error is reported when re-importing the public components after exporting

After installing and configuring the FlyFish 2.0 version, the components are first exported online, and then imported, which cannot be displayed normally. The currently used mysql, redis, code-server, solution_platform, and visual_component_platform are all mirrored by dokcer and run on k8s.

FlyFish|Front-end data visualization development pit avoidance guide (1)

A5: FlyFish non-public components cannot be exported, so the above operations will fail. Common components can be downloaded from the repository:https://github.com/CloudWise-…

  1. Q6: The component development platform npm run build reports an error

FlyFish|Front-end data visualization development pit avoidance guide (1)

A6: If the above situation occurs, you need to use the node v12 version, install the dependency package with npm, and compile it.

  1. Q7: There is a cross-domain problem when calling the API of the public network

The system information is as follows:

  • Browser version: Version 101.0.4951.64 (Official Build) (x86_64)
  • Operating system: CentOS7.6
  • Node version: NodeJS14.9

FlyFish|Front-end data visualization development pit avoidance guide (1)

A7: The cross-domain problem of the open source version needs to be solved by means of proxy, etc. The built-in data source management of Feiyu Enterprise Edition can also solve the cross-domain problem

  1. Q8: After exporting the json file, re-import an error

After exporting the edited json file of template 2 in the demo environment, an error occurs when importing it into personal template 1. The system information is as follows:

  • Browser version: Version 101.0.4951.64 (Official Build) (x86_64)
  • Operating system: CentOS7.6
  • Node version: NodeJS12.22

FlyFish|Front-end data visualization development pit avoidance guide (1)

A8: It is necessary to check whether the exported template is complete. If there is any change, check whether the json conforms to the JSON format verification.

  1. Q9: After downloading the template in the Demo environment, when it is directly placed in the webapps directory of tomcat, an access error is reported and the component loading fails

The system information is as follows:

  • Browser version: Version 101.0.4951.64 (Official Build) (x86_64)
  • Operating system: CentOS7.6

FlyFish|Front-end data visualization development pit avoidance guide (1)

A9: You need to use nginx or other methods to access the service, and then confirm whether the componentDir path of env under config is configured correctly.

  1. Q10: FlyFish component display problem

FlyFish|Front-end data visualization development pit avoidance guide (1)

A10: The component needs to be compiled successfully before it can be displayed. Please check whether the js code is correct.

Open source benefits

Today, Cloud Wisdom has open source data visualization orchestration platform FlyFish. By configuring the data model, it provides users with hundreds of visual graphic components, and zero coding can achieve a cool visual large screen that meets their own business needs. At the same time, FlyFish also provides flexible expansion capabilities, supports configuration of component development, custom functions and global events, and ensures efficient development and delivery for complex demand scenarios.

Click the address link below, welcome everyone to FlyFish Like and send Star. Participate in component development, and there will be more than 10,000 yuan in cash waiting for you.

GitHub address:https://github.com/CloudWise-…

Gitee address:https://gitee.com/CloudWise/f…

Thousands of cash benefits: http://bbs.aiops.cloudwise.co…

Wechat scan to identify the QR code below, note [Flying Fish] Join the AIOps community Flying Fish developer exchange group, and communicate face-to-face with the FlyFish project PMC~

FlyFish|Front-end data visualization development pit avoidance guide (1)

Recommended Today

What is the SpringBoot source code

What is the SpringBoot source code 1 IntroductionSpring Boot is a rapid development framework provided by the Pivotal team. Based on SpringMVC, it simplifies XML configuration through annotations + built-in Http server such as: tomcat-embed-core, and quickly integrates some commonly used third-party dependencies (inheriting dependencies through Maven), The final implementation is executed as a Java […]