FlyFish é uma plataforma de orquestração de visualização de dados de código aberto do Cloud Intelligence. Ao configurar o modelo de dados, ele fornece aos usuários centenas de componentes gráficos visuais e a codificação zero pode obter uma tela grande visual legal que atende às suas próprias necessidades de negócios. Deve-se notar que este tutorial é aplicável apenas ao FlyFish, uma plataforma de visualização de dados de código aberto para inteligência em nuvem. Se você gosta do nosso projeto, clique no endereço do repositório de código abaixo e clique em Estrela no repositório GitHub / Gitee .
Introdução do Fly Fish
FlyFish é uma plataforma de desenvolvimento de aplicativos de baixo limiar, altamente escalável e de código baixo, projetada e desenvolvida independentemente pela Cloud Wisdom, fornecendo uma solução eficiente e completa para cenários de desenvolvimento de visualização de dados. Feiyu fornece uma rica biblioteca de componentes e modelos de aplicativos, que podem completar o desenvolvimento de visualização de dados arrastando e soltando, e usuários com experiência zero de desenvolvimento também podem concluir o trabalho de desenvolvimento de visualização de dados. Ao mesmo tempo, a Feiyu também oferece recursos de expansão flexíveis, suporta configuração de desenvolvimento de componentes, funções personalizadas e eventos globais e garante desenvolvimento e entrega eficientes para cenários de demanda complexos.
FlyFish é recomendado
Método 1: experiência do ambiente de demonstração online
Método 3: baixar e implantar o Gitee localmente
Método 2: download e implantação do GitHub localmente
Seis Componentes Básicos
Nota: Se os métodos a seguir não forem indicados especificamente que estão todos montados no props.parent do componente atual, certifique-se de fazer o processamento vazio antes de usar
-
Estrutura do componente DOM
Existem duas camadas de elementos de encapsulamento fora do componente.
componente div.dv
Controle a configuração global do tamanho, largura e altura do componente, zIndex, transparência, etc.
-
Nome da propriedade: $ wrap (também em props.parent)
-
Get: getWrap() (durante o desenvolvimento do componente, não use o método atual)
div.dv-component-container
O contêiner de conteúdo do componente.
-
Nome da propriedade: $container (também em props.parent)
-
Get: getContainer() (use este método para renderizar componentes)
-
Configuração do componente
Algumas configurações geométricas do componente podem ser configuradas em options.json. config é um item de configuração obrigatório para o componente, incluindo os seguintes itens de configuração:
-
largura: largura
-
altura: altura
-
esquerda: coordenada X
-
topo: coordenada Y
-
nome: nome de exibição
-
visível: se deve ser exibido
-
classe: nome da classe CSS
-
índice: ordem de empilhamento
Atualizar configuração
Podemos alterar dinamicamente a configuração do componente atual por meio de alguns métodos no componente.
-
Configuração direta: setConfig(config)
-
Definir largura e altura: setSize(width = null, height = null)
-
Definir coordenadas: setPosition(esquerda, superior)
-
Definir nome de exibição: setName(name)
-
Defina se deseja exibir: setVisible(visible)
-
Defina o nome da classe CSS: setClass(className)
-
Defina a ordem de empilhamento dos componentes: setIndex(index)
alocação padrão
defaultConfig é a configuração padrão do componente. Em geral, você só precisa fornecer a largura e a altura padrão do componente, e outras configurações não precisam ser consideradas. Claro, você também pode reescrever getDefaultConfig para obter o efeito de configurar a configuração padrão.
-
configuração da propriedade
O painel de configuração de propriedades pode ser desenhado explicitamente através do arquivo, o que é conveniente para editores de tela grande usarem as propriedades expostas pelo desenvolvedor para edição personalizada. Claro, os desenvolvedores também podem chamar métodos para atualizar opções de forma independente em algumas situações lógicas.
-
setOptions(options): Este método não aplica as opções ao componente imediatamente, e você precisa chamar o método refresh() novamente para aplicar as novas opções ao componente.
-
update(options): As opções de aplicação entram em vigor imediatamente.
-
defaultOptions: Defina as opções padrão do componente.Em geral, você precisa escrever todas as opções suportadas pelo componente em defaultOptions.
-
Permite que o usuário veja rapidamente quais opções são suportadas pelo componente.
-
O julgamento (propriedade estática) da existência de várias opções quando o componente é renderizado é omitido.
-
getDefaultOptions: O mesmo efeito que a propriedade acima pode ser obtido substituindo este método.
-
Dados e fontes de dados
Os dados são o núcleo da visualização de dados e a maioria dos componentes é criada para exibir dados. As opções de opções controlam o estilo de exibição do componente, mas os dados são o que o componente exibirá. O componente escutará as alterações de dados da fonte de dados e, sempre que os dados da fonte de dados forem atualizados, o componente redesenhará os dados.
pedido de data
-
Os dados do componente vêm da fonte de dados e cada componente só pode ser associado a uma fonte de dados e cada fonte de dados só pode ser associada a um componente.
-
Os dados da fonte de dados devem ser uma matriz bidimensional (coleção) e os dados que o componente pode reconhecer também devem ser uma matriz bidimensional.
-
Por padrão, os componentes são vinculados a uma fonte de dados estática padrão (JSON) e os dados estáticos são integrados para que os usuários possam ver a aparência do componente por padrão.
definir dados
-
definir fonte de dados
-
Baixar dados
O método load carrega dados para o componente (um dado é atualizado toda vez que é chamado, então o método load também pode ser usado como dados de atualização)
-
Ao desenhar dados que não são de origem de dados dentro de um componente, existem dois métodos:
- setData: Este método não permite que o componente desenhe dados para a interface imediatamente, e o método redesenho precisa ser chamado.
- draw: os dados do aplicativo entram em vigor imediatamente
Sobre a fonte de dados padrão
Se o componente atual precisar exibir dados, certifique-se de substituir getDefaultData para retornar os dados estáticos padrão do componente. O formato é object[]
-
atualização de componentes
Atualização completa
A atualização e a renderização mencionadas acima são atualizações completas. O método render também é chamado dentro da atualização real.
Atualização incremental
update é uma atualização incremental, que atualiza apenas a parte de entrada correspondente.
-
gancho de componente
A tabela a seguir mostra os detalhes do nome do gancho do componente, tempo de chamada e assim por diante:
| nome do gancho | tempo de chamada (pai) | tempo de chamada |
|---|---|---|
| _construir | constructor | chamado ao construir |
| _montar | montar | Chamado quando montado |
| _desmontar | desmontar | Chamado ao desinstalar |
| _render | renderizar | Chamado ao renderizar |
| _atualizar | atualizar | Chamado quando as opções são atualizadas |
| _atualizar | atualizar | Chamado quando as opções são atualizadas |
| _empate | empate | Chamado ao plotar dados |
| _redesenhar | redesenhar | Chamado quando os dados são redesenhados |
| _normalizar | normalizar | Chamado quando os dados normalizados são obtidos. |
| _destruir | destruir | Chamado quando o componente é destruído |
| _conectar a | - | Quando o evento de ligação ocorre, o método de gancho para obter o valor da variável |
Benefícios de código aberto
Se você gosta do nosso projeto, por favor, não se esqueça de clicar no endereço do repositório de código abaixo e clicar em Estrela no repositório GitHub / Gitee , precisamos do seu incentivo e apoio. Além disso, participe imediatamente do projeto FlyFish para contribuir para se tornar um Colaborador FlyFish, e haverá 10.000 yuans em dinheiro esperando por você.
Endereço do GitHub: https://github.com/CloudWise-OpenSource/FlyFish
Endereço do Gitee: https://gitee.com/CloudWise/fly-fish
Guia de Contribuição FlyFish: http://bbs.aiops.cloudwise.com/d/717-flyfish
Centro de modelos FlyFish : https://www.cloudwise.ai/flyFishComponents.html
Pesquise xiaoyuerwise no WeChat ou digitalize o código QR abaixo, anote [Flying Fish] para se juntar ao grupo de intercâmbio de desenvolvedores Flying Fish da comunidade AIOps e comunique-se cara a cara com o projeto FlyFish PMC.