搜索文章

输入关键词开始搜索

VISALL和StandardChart主题机制设计

程序设计#程序设计#ECharts#数据可视化#人员管理#架构

主题 Token、组件、图表与运行时切换的架构

解决什么问题

架构统一,降低理解和管理的复杂度 通过架构约束,提升程序质量 增加可扩展性和可修改性,降低开发成本,给业务方提供自定义能力 改善visall的职责

终态

VISALL中没有任何主题相关的内容。 VISALL的theme、token、ThemeConfig都应该是透传到SD的: src/core/api.ts

/**
 * 规范设计参考了 Vega-Lite 和 Plot
 *
 * @see https://vega.github.io/vega-lite/docs/spec.html
 * @see https://observablehq.com/plot/getting-started
 */
export interface Specification {
  /** Hook API */
  hook: Partial<Hook>;
  /** 预设 hook */
  presetHook: Partial<Hook>;
  /** 设计 tokens */
  token: Partial<Token>;
  /** 布局 */
  layout: (typeof LAYOUT)[keyof typeof LAYOUT];
  /** 数据集 */
  data: { metadata?: unknown; values: TabularData }[];
  /**
   * 视图配置,分块
   *
   * - 例如主副图视图中,主图为一个块,副图为另一个块
   */
  view: {
    /** 主图 */
    main: NormalViewSpec | StandardChartViewSpec | HXKLineViewSpec;
    /** 副图 */
    secondary?: SimpleKLineViewSpec;
  };
  /** 是否代理(透传StandardChart) */
  proxy: boolean;
  /** StandardChart 主题(旧版,保持兼容) */
  theme?: string;
  /** 新版主题配置 */
  themeConfig?: ThemeConfig;
}

方案评审:CXH的第一版方案

存在的问题

1、机制没抽取和统一,SD和VISALL的主题机制能不能统一 2、主题模块和VISALL的边界没分清楚、UI组件的职责 3、主题没分包,存在冗余资源加载的问题(用户只用到了一个主题,但是需要加载所有的代码;或者业务方只用StandardChart) 4、搬功能,而不是优化机制

建议改进流程

1、微内核 2、看下ECharts的theme的设计、i18n的设计 3、流程跑通,写几个不同的use case场景的代码(应用SD、VISALL、开发主题等等) 4、确认VISALL的hook是否都可以下沉至StandardChart之上的theme模块

机制的职责范围

register、apply、unregister token定义:设计师定,业务方配置 theme:配置项预处理函数parser数组(函数名字、逻辑、执行顺序可以自己定,约束输入和输出既可) hook:生命周期,固定的,用户不可修改,由我们定

可以提供一个default theme,即跨业务线通用的那部分主题。

其他问题

公共函数该不该放theme模块中?

比如merge等,这种其实是跨项目通用的,应该单独提个团队级别的npm工具包

StandardChart和VISALL的token如何融合?

取并集 VISALL中有这个自定义的token:

[token:string]: unknown

这个其实是历史遗留问题,一开始设计师想设计一套Token涵盖我们的可视化库和沈佳棋的HexinUI组件库,所以我们设计了这个自定义的token,以兼容HexinUI组件库和其他的非可视化的UI库。实际上这个目前并未用到。

UI组件怎么办?

UI组件应该是和SD同一层级的概念。 layer其实是一个容器的设计,在layer中进行SD和UI组件的组合。