feat: 基于 dumi 新增临时 docs (#1283)

* feat: add docs

* feat(docs): add dumi docs for dev

Co-authored-by: liufu.lf <[email protected]>

Author: lxfu1

.gitignore

@@ -79,3 +79,4 @@ demos/assets/screenshots
 
 .vscode
 /stats.json
+.umi

.umirc.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'dumi';
+
+export default defineConfig({
+  mode: 'site',
+  title: 'G2Plot',
+  base: '/',
+  publicPath: '/',
+  exportStatic: {},
+  logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
+  navs: [null, { title: 'GitHub', path: 'https://github.com/antvis/G2Plot' }],
+  analytics: {
+    ga: 'UA-72788897-12',
+  },
+  chainWebpack(memo) {
+    memo.plugins.delete('copy');
+  },
+  // more config: https://d.umijs.org/config
+});

docs/demos/scatter.md

@@ -0,0 +1,58 @@
+---
+title: 散点图
+order: 17
+---
+
+# 散点图
+
+## Scatter
+
+```tsx
+import React, { useEffect, useState, useRef } from 'react';
+import { Scatter } from '@antv/g2plot';
+
+const Page: React.FC = () => {
+  const [data, setData] = useState([]);
+  const chart = useRef();
+  const fetchData = () => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json')
+      .then((response) => response.json())
+      .then((json) => setData(json))
+      .catch((error) => {
+        console.log('fetch data failed', error);
+      });
+  };
+
+  useEffect(() => {
+    chart.current = new Scatter('container', {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      seriesField: 'gender',
+      shape: ['circle', 'square'],
+      symbolSize: 5,
+      tooltip: {
+        showCrosshairs: true,
+        crosshairs: {
+          type: 'xy',
+        },
+      },
+    });
+    chart.current.render();
+
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    if (data.length) {
+      chart.current.changeData(data);
+    }
+  }, [data]);
+
+  return <div id="container" />;
+};
+export default Page;
+```

docs/index.md

@@ -0,0 +1,25 @@
+---
+title: G2Plot - 简单好用的图表库
+order: 10
+hero:
+  title: G2Plot
+  desc: 简单好用的图表库
+  actions:
+    - text: 快速上手
+      link: /demos/scatter
+features:
+  - icon: https://gw.alipayobjects.com/zos/bmw-prod/881dc458-f20b-407b-947a-95104b5ec82b/k79dm8ih_w144_h144.png
+    title: 开箱即用
+    desc: 一个简单的配置就能呈现优雅、标准的图表
+  - icon: https://gw.alipayobjects.com/zos/antfincdn/oyqsrPh0Kg/houyuan.png
+    title: 后援强大
+    desc: AntV团队支持，基于 G2 实现，简单方便、专业可靠、无限可能
+  - icon: https://gw.alipayobjects.com/zos/antfincdn/aKCFl7vDAB/tubiao.png
+    title: 图表完善
+    desc: 支持全量的 G2 图表，几乎做到同步升级更新
+footer: Open-source MIT Licensed | Copyright © 2019-present
+---
+
+## 反馈
+
+请访问 [GitHub](https://github.com/antvis/G2Plot/issues)

package.json

@@ -23,6 +23,7 @@
     "url": "https://github.com/antvis/g2plot"
   },
   "scripts": {
+    "start": "dumi dev",
     "fix": "eslint --ext .ts ./src ./__tests__ --fix && prettier --write ./src ./__tests__",
     "build": "run-s clean lib dist",
     "clean": "rimraf lib esm dist",
@@ -61,6 +62,7 @@
     "@typescript-eslint/parser": "^2.0.0",
     "babel-loader": "^8.1.0",
     "conventional-changelog-cli": "^2.0.28",
+    "dumi": "^1.0.33",
     "eslint": "^6.1.0",
     "eslint-config-prettier": "^6.0.0",
     "eslint-plugin-prettier": "^3.1.0",

src/core/plot.ts

@@ -1,7 +1,7 @@
 import { Chart } from '@antv/g2';
 import { bind } from 'size-sensor';
 import { Adaptor } from './adaptor';
-import { Options } from '../types';
+import { Options, Data } from '../types';
 
 /**
  * 所有 plot 的基类
@@ -19,7 +19,7 @@ export abstract class Plot<O extends Options> {
   private unbind: () => void;
 
   constructor(container: string | HTMLElement, options: O) {
-    this.container = typeof container === 'string' ? document.querySelector(container) : container;
+    this.container = typeof container === 'string' ? document.getElementById(container) : container;
     this.options = options;
 
     this.createG2();
@@ -77,6 +77,15 @@ export abstract class Plot<O extends Options> {
     this.render();
   }
 
+  /**
+   * 更新数据
+   * @param options
+   */
+  public changeData(data: Data) {
+    this.chart.changeData(data);
+    this.chart.render();
+  }
+
   /**
    * 修改画布大小
    * @param width

src/index.ts

@@ -5,3 +5,6 @@ export * from './types';
 
 // 折线图及类型定义
 export { Line, LineOptions } from './plots/line';
+
+//散点图及类型定义
+export { Scatter, ScatterOptions } from './plots/scatter';

src/plots/scatter/adaptor.ts

@@ -0,0 +1,82 @@
+import { Params } from '../../core/adaptor';
+import { flow } from '../../utils';
+import { ScatterOptions } from './types';
+
+/**
+ * 字段
+ * @param params
+ */
+function field(params: Params<ScatterOptions>): Params<ScatterOptions> {
+  const { chart, options } = params;
+  const { data, xField, yField, seriesField, color, symbolSize, shape } = options;
+
+  // 散点图操作逻辑
+  chart.data(data);
+  const geometry = chart.point().position(`${xField}*${yField}`);
+
+  // 颜色映射
+  if (seriesField) {
+    geometry.color(seriesField, color);
+    geometry.shape(seriesField, shape);
+  }
+
+  // 大小映射
+  if (symbolSize) {
+    const size = typeof symbolSize === 'number' ? ([symbolSize, symbolSize] as [number, number]) : symbolSize;
+    geometry.size(yField, size);
+  }
+  return params;
+}
+
+/**
+ * meta 配置
+ * @param params
+ */
+function meta(params: Params<ScatterOptions>): Params<ScatterOptions> {
+  // TODO
+  return params;
+}
+
+/**
+ * axis 配置
+ * @param params
+ */
+function axis(params: Params<ScatterOptions>): Params<ScatterOptions> {
+  // TODO
+  return params;
+}
+
+/**
+ * legend 配置
+ * @param params
+ */
+function legend(params: Params<ScatterOptions>): Params<ScatterOptions> {
+  // TODO
+  return params;
+}
+
+/**
+ * tooltip 配置
+ * @param params
+ */
+function tooltip(params: Params<ScatterOptions>): Params<ScatterOptions> {
+  const {
+    chart,
+    options: { tooltip },
+  } = params;
+
+  if (tooltip) {
+    chart.tooltip({ ...tooltip });
+  }
+  return params;
+}
+
+/**
+ * 散点图适配器
+ * @param chart
+ * @param options
+ */
+export function adaptor(params: Params<ScatterOptions>) {
+  // flow 的方式处理所有的配置到 G2 API
+  flow(field, meta, axis, legend, tooltip)(params);
+}

src/plots/scatter/index.ts

@@ -0,0 +1,18 @@
+import { Plot } from '../../core/plot';
+import { ScatterOptions } from './types';
+import { adaptor } from './adaptor';
+import { Adaptor } from '../../core/adaptor';
+
+export { ScatterOptions };
+
+export class Scatter extends Plot<ScatterOptions> {
+  /** 图表类型 */
+  public type: string = 'point';
+
+  /**
+   * 获取散点图的适配器
+   */
+  protected getSchemaAdaptor(): Adaptor<ScatterOptions> {
+    return adaptor;
+  }
+}

src/plots/scatter/types.ts

@@ -0,0 +1,18 @@
+import { Options } from '../../types';
+
+export interface ScatterOptions extends Options {
+  /** x 轴字段 */
+  readonly xField: string;
+
+  /** y 轴字段 */
+  readonly yField: string;
+
+  /** 分组字段 */
+  readonly seriesField?: string;
+
+  /** 散点图大小 */
+  readonly symbolSize?: number | [number, number] | ((value: number) => number);
+
+  /** 散点图形状 */
+  readonly shape?: string[] | ((item: any[]) => string | string[]);
+}

src/types/axis.ts

@@ -1 +1,98 @@
-export type Axis = {};
+import { TextStyle } from './common';
+
+export type Axis = {
+  /**
+   * 是否可见
+   */
+  readonly visible?: boolean;
+
+  /**
+   * 期望的坐标轴刻度数量，非最终结果
+   */
+  readonly tickCount?: number;
+
+  /**
+   * 坐标轴刻度间隔
+   */
+  readonly tickInterval?: number;
+
+  /**
+   * 坐标轴最小值
+   */
+  readonly min?: number;
+
+  /**
+   * 坐标轴最大值
+   */
+  readonly max?: number;
+
+  /**
+   * 网格线
+   */
+  readonly grid?: {
+    /** 是否可见 */
+    readonly visible?: boolean;
+    /** 网格线样式 */
+    readonly style?: TextStyle;
+  };
+
+  /**
+   * 坐标轴轴线
+   */
+  readonly line?: {
+    /** 是否可见 */
+    readonly visible?: boolean;
+    /** 轴线样式 */
+    readonly style?: TextStyle;
+  };
+
+  /**
+   * 坐标轴刻度
+   */
+  readonly tickLine?: {
+    /** 是否可见 */
+    readonly visible?: boolean;
+    /** 刻度样式 */
+    readonly style?: TextStyle;
+  };
+
+  /**
+   * 坐标轴标签
+   */
+  readonly label?: {
+    /** 是否可见 */
+    readonly visible?: boolean;
+    /** 标签格式化 */
+    readonly formatter?: (label: string) => string;
+    /** 后缀 */
+    readonly suffix?: string;
+    /** 前缀 */
+    readonly prefix?: string;
+    /** 标签精度 */
+    readonly precision?: number;
+    /** 在 x 方向上的偏移量*/
+    readonly offsetX?: number;
+    /** 在 y 方向上的偏移量 */
+    readonly offsetY?: number;
+    /** 是否自动隐藏 */
+    readonly autoHide?: boolean;
+    /** 是否自动旋转 */
+    readonly autoRotate?: boolean;
+    /** 标签样式 */
+    readonly style?: TextStyle;
+  };
+
+  /**
+   * 坐标轴标题
+   */
+  readonly title?: {
+    /** 是否可见 */
+    readonly visible?: boolean;
+    /** 标题文字 */
+    readonly text?: string;
+    /** 偏移量 */
+    readonly offset?: number;
+    /** 标题样式 */
+    readonly style?: TextStyle;
+  };
+};