设计

此页面包含一些有关应用程序设计的主要指南。这包括代码架构以及 UX/UI 设计。

文件结构

NeoDash 的源代码被组织为基于组件的扁平文件结构。如果要添加组件 ABC，则应创建名为 abc 的目录，其中包含以下文件

  • ABC.tsx (组件渲染器)

  • ABCActions.ts (定义状态操作的对象)

  • ABCReducer.ts (根据操作处理状态更改)

  • ABCSelectors.ts (组件用来检索部分状态)

  • ABCThunks.ts (复杂的状态处理逻辑，用于触发一个或多个操作)

其他文件夹的结构

conf: nginx configuration for Docker image.
dist: directory for generated webpack files.
node_modules: downloaded dependencies
public: style files/images. Runtime app config.
scripts: utility scripts for deployment.
src: source code.
target: compiled package as tgz file.
.babelrc: javascript compiled settings.
.gitignore: gitignore files.
Dockerfile: docker image definition.

UX 设计

从根本上说，NeoDash 旨在成为一种易于学习但难以精通的工具。这转化为以下五个设计原则

  1. 使用有限的核心可视化，并具有很高的可定制性。

  2. 无需阅读文档即可轻松上手。

  3. 该工具应该是自说明的。

  4. 复杂的データ変換は、アプリケーションではなく、ダッシュボードビルダーが Cypher で行う必要があります。

  5. 该工具应该易于扩展，可以使用自定义可视化。