feat(multi-view): add types define for multi-view plot

Author: hustcc

src/adaptor/geometries/base.ts

@@ -18,7 +18,10 @@ export type MappingOptions = {
   readonly tooltip?: TooltipAttr;
 };
 
-export interface GeometryOptions extends Options {
+/**
+ * 一个图形映射的逻辑，纯粹的图形语法
+ */
+export type Geometry = {
   /** geometry 类型 */
   readonly type: string;
   /** x 轴字段 */
@@ -41,7 +44,12 @@ export interface GeometryOptions extends Options {
   readonly mapping: MappingOptions;
   /** geometry params */
   readonly args?: any;
-}
+};
+
+/**
+ * geometry options
+ */
+export type GeometryOptions = Geometry & Options;
 
 /**
  * 获得映射的字段列表

src/lab.ts

@@ -1,4 +1,4 @@
-import { MultiLayer } from './plots/multi-layer';
+import { MultiView } from './plots/multi-layer';
 
 /** 实验室图表所处的阶段 */
 export enum Stage {
@@ -28,7 +28,7 @@ export function notice(stage: Stage, plotType: string) {
  */
 export class Lab {
   get MultiLayer() {
-    notice(Stage.DEV, 'multi-layer');
-    return MultiLayer;
+    notice(Stage.DEV, 'multi-view');
+    return MultiView;
   }
 }

src/plots/multi-layer/adaptor.ts

@@ -1,37 +1,27 @@
 import { interaction, animation, theme, scale } from '../../adaptor/common';
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
-import { MultiLayerOptions } from './types';
+import { MultiViewOptions } from './types';
 
 /**
  * geometry 处理
  * @param params
  */
-function geometry(params: Params<MultiLayerOptions>): Params<MultiLayerOptions> {
+function geometry(params: Params<MultiViewOptions>): Params<MultiViewOptions> {
   const { chart, options } = params;
 
   return params;
 }
 
-/**
- * meta 配置
- * @param params
- */
-export function meta(params: Params<MultiLayerOptions>): Params<MultiLayerOptions> {
-  const { options } = params;
-
-  return flow(scale({}))(params);
-}
 /**
  * 图适配器
  * @param chart
  * @param options
  */
-export function adaptor(params: Params<MultiLayerOptions>) {
+export function adaptor(params: Params<MultiViewOptions>) {
   return flow(
-    animation,
+    animation, // 多 view 的图，动画配置放到最前面
     geometry,
-    meta,
     interaction,
     animation,
     theme

src/plots/multi-layer/index.ts

@@ -1,21 +1,29 @@
 import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
-import { MultiLayerOptions } from './types';
+import { MultiViewOptions } from './types';
 import { adaptor } from './adaptor';
 
-export { MultiLayerOptions };
+export { MultiViewOptions };
 
 /**
- * 多图层图形，释放 G2 80% 的功能
+ * 多图层图形，释放 G2 80% 的功能，可以用来做：
+ * 1. 图层叠加的图：
+ *   - 折线 + 置信度区间迭代
+ *   - 嵌套饼图
+ *   - ...
+ * 2. 图层划分的图
+ *   - 多维图
+ *   - 柱饼组合图
+ *   - ...
  */
-export class MultiLayer extends Plot<MultiLayerOptions> {
+export class MultiView extends Plot<MultiViewOptions> {
   /** 图表类型 */
-  public type: string = 'multi-layer';
+  public type: string = 'multi-view';
 
   /**
    * 获取适配器
    */
-  protected getSchemaAdaptor(): Adaptor<MultiLayerOptions> {
+  protected getSchemaAdaptor(): Adaptor<MultiViewOptions> {
     return adaptor;
   }
 }

src/plots/multi-layer/types.ts

@@ -1,4 +1,63 @@
-import { Options } from '../../types';
+import { Data, Meta, Options, Region, Tooltip } from '../../types';
+import { Axis } from '../../types/axis';
+import { Legend } from '../../types/legend';
+import { Geometry } from '../../adaptor/geometries/base';
+
+/**
+ * 子 view 的配置。暂时不开嵌套 view 的情况
+ */
+type View = {
+  /**
+   * view 的布局范围，默认是占满全部
+   */
+  readonly region?: Region;
+
+  /**
+   * view 的中数据
+   */
+  readonly data: Data;
+
+  /**
+   * view 中对应的 meta 字段配置
+   */
+  readonly meta?: Record<string, Meta>;
+
+  /**
+   * 图形 geometry 及映射配置
+   */
+  readonly geometries: Geometry[];
+
+  /**
+   * x 轴配置
+   */
+  readonly xAxis?: Axis;
+
+  /**
+   * y 轴配置
+   */
+  readonly yAxis?: Axis;
+
+  /**
+   * legend 配置
+   */
+  readonly legend?: Legend;
+};
 
 /** 配置类型定义 */
-export interface MultiLayerOptions extends Options {}
+export interface MultiViewOptions extends Omit<Options, 'data' | 'legend' | 'xAxis' | 'yAxis' | 'legend' | 'tooltip'> {
+  /**
+   * 是否同步子 view 的配置
+   * 目前仅仅支持 true / false，后续需要增加 function 的方式进行自定义 view 之前的布局同步
+   */
+  readonly syncViewPadding?: boolean;
+  /**
+   * 没一个图层的配置。
+   * 每个图层包括有自己的：数据、图形、图形映射。
+   */
+  readonly views: View[];
+
+  /**
+   * tooltip 配置在 chart 层配置
+   */
+  readonly tooltip?: Tooltip;
+}