Author｜Cary Zhou
Cary Zhou is a front-end engineer of the Cloud Intelligence Research Institute-Technology Innovation Lab, dedicated to the research and development of cloud intelligence open source projects FlyFish and LCAP products, supporting the visual business line of the internal R&D delivery system, and has a wealth of low-code platforms and SaaS Platform design and development experience.
Open source low-code platform-Flyfish
In recent years, both data visualization and low-code have become hot words. Enterprise decision makers and business personnel can intuitively understand the information behind the data through data visualization. Low-code has the advantages of speed, simplicity, efficiency, security, maintenance, efficiency, communication, etc. The details are as follows:
-
High reuse: From the original one-shot transaction, it has become an asset that can be deposited, and different components can also be reused, and the data direction can be standardized;
-
High efficiency: low-code development bridges the communication gap between IT and business teams, thereby improving work efficiency;
-
Low cost: Solve the problems of long project delivery cycle, high personnel cost, repeated operation of simple work, and low work efficiency;
-
Low Difficulty: Due to the characteristics of low-code development, no-code foundation can quickly get started and quickly build solutions, which greatly reduces the difficulty of development;
-
Promote growth: After using low code, engineers have more time to improve themselves;
We combined low-code and data visualization to create FlyFish - a data visualization coding platform, which can quickly create data models by dragging and dropping simple methods, generate a set of data visualization solutions, greatly reduce enterprise costs, and be more flexible to respond to the increasing data of enterprises Show needs.
Online address : http://171.12.11.11:23368
Open source address: github.com/CloudWise-O…
FlyFish visual large screen example
FlyFish component principle
Component Basics
How to develop highly reusable components with low code?
First of all, high reuse means that it needs to have extremely high configurability. For this reason, the final output of FlyFish visual large screen does not contain settings. In the early stage of design, it has divided the visualization components and the customization settings of the visualization components into two different modules. .
Visual component
Visual components are displayed according to different settings, logical operations, and event linkage with other components, etc.
Component customization
预设自定义的设置来设置可视化组件，使之呈现不同的效果，最大程度的实现组件复用。
组件目录结构
组件的基本目录为build文件夹、package.json、options.json以及src。 build里面为webpack的两个配置；代码实现主要在src下方，通过main.js注册可视化组件让大屏知道组件存在，此外，通过setting.js注册可视化组件的自定义配置；package.json主要装可视化组件依赖相关内容；options.json可理解为整个大屏的渲染模版。
├── build
│ ├── webpack.config.dev.js
│ └── webpack.config.production.js
├── package.json
├── options.json 可视化组件依赖
└── src
├── Component.js 可视化组件类
├── main.js 注册可视化组件
├── setting.js 注册可视化组件的自定义配置
└── settings
├── data.js 自定义配置-数据配置扩展
└── options.js 自定义配置-属性配置扩展
复制代码组件存储结构
FlyFish可视化大屏最终以下列存储结构渲染出组件。type为组件的唯一标识。id为组件的唯一id。config里则包含大屏的长、宽、高等信息，此类信息修改会导致组件渲染出现异常，故不建议修改。options为预留自定义配置端口；dataSource为数据源，下文会做详细解释。
{
"type": "title",
"id": "UBKO-08U1-C9L4-6OJF-3OMB-3OFN",
"config": {
"left": 534,
"top": 242,
"width": 450,
"height": 280,
"index": 0,
"name": "title",
"visible": true,
"class": ""
},
"options": {},
"dataSource": {
"type": "json",
"options": {
"json": "{\"data\":{\"title\":\"标题\",\"text\":123}}"
}
}
}
复制代码组件实体类四大件
组件实体四大类包含config、options、dataSource以及组件生命周期。
组件config
width: 宽度
height: 高度
left: X 坐标
top: Y 坐标
name: 显示名
visible: 是否显示
class: CSS 类名
index: 层叠顺序
组件options
完全开放，由自定义而来
组件dataSource
type: 数据源类型
options：{
json: json字符串
}
复制代码组件生命周期
使用react开发组件
FlyFish不限制使用任何框架进行开发组件，内置了React开发组件的方式，只需按照FlyFish组件的生命周期，在适当的生命周期把框架代码渲染在指定组件dom上即可。
import ReactComponent from "data-vi/ReactComponent";
import React from "react";
export default class Test extends ReactComponent {
getReactComponent() {
return ReactTest;
}
}
class ReactTest extends React.Component {
render() {
return "Hello flyFish!";
}
}
复制代码组件开发内置包
jquery
lodash
moment
requirejs
data-vi/api 组件自定义请求
data-vi/Component 组件开发的基类
data-vi/ReactComponent 基于组件开发的基类的扩展类
data-vi/config 变量配置（globalOptions、componentsDir）
data-vi/helpers 使用的方法（内置lodash导出）
react
react-dom
复制代码FlyFish已内置数据源，但当用户想通过特殊方式发起组件请求时，则可通过使用 import lodash from “lodash”的方式进行。
组件开发-请求数据
目前FlyFish平台组件开发支持json、http以及screenDataSource 3种类型，以上类型均可在FlyFish组件平台进行配置。在开发过程中，如未含有特殊需求，使用以上三种类型数据请求即可。
Component Development - Custom Request Data
It is recommended to use the built-in request of FlyFish as much as possible. If there are special reasons, the following methods can be used to request data autonomously.
import { getHttpData } from 'data-vi/api';
import { componentApiDomain } from 'data-vi/config';
getHttpData(componentApiDomain + url, 'POST', {})
.done((request) => {})
.fail((request, xhr, msg) => {});
复制代码Component Development - Styles
- Inline styles
Writing inline styles directly is possible, but not recommended.
- less
Create a new .less file and open the component's enableLoadCssFile property to true to load the style file when loading the component.
- css module
Create a new ..module.less file and open the component's enableLoadCssFile property to true, then you can use the css module in the visual component.