docs: options

ant-design · Nov 17, 2023 · fb4651a · fb4651a
1 parent c5f6597
commit fb4651a
Show file tree

Hide file tree

Showing 280 changed files with 3,361 additions and 43,780 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 <div align="center">
 
-A React chart library, based on [G2Plot](https://github.com/antvis/G2Plot), [G6](https://github.com/antvis/G6), [XFlow](https://github.com/antvis/XFlow), [L7Plot](https://github.com/antvis/L7Plot).
+A React chart library, based on [G2](https://github.com/antvis/G2), [G6](https://github.com/antvis/G6), [X6](https://github.com/antvis/X6), [L7](https://github.com/antvis/L7).
 
 ![build](https://github.com/ant-design/ant-design-charts/workflows/build/badge.svg)
 ![npm](https://img.shields.io/npm/v/@ant-design/charts)
@@ -15,7 +15,6 @@ A React chart library, based on [G2Plot](https://github.com/antvis/G2Plot), [G6]
   <a href="https://charts.ant.design/en/docs/manual/getting-started">Quick Start</a> •
   <a href="https://charts.ant.design/en/examples/gallery">Gallery</a> •
   <a href="https://charts.ant.design/en/docs/manual/faq">FAQ</a> •
-  <a href="https://www.yuque.com/antv/g2plot">Blog</a>
 </p>
 
 </div>
@@ -60,51 +59,13 @@ const Page: React.FC = () => {
     { year: '1999', value: 13 },
   ];
 
-  let chart;
-
   const props = {
-    config: {
-      data,
-      width: 800,
-      height: 400,
-      autoFit: false,
-      xField: 'year',
-      yField: 'value',
-      point: {
-        size: 5,
-        shape: 'diamond',
-      },
-      label: {
-        style: {
-          fill: '#aaa',
-        },
-      },
-      onReady: (chartInstance) => chart = chartInstance
-    }
+    data,
+    xField: 'year',
+    yField: 'value',
   };
 
-
-  // Export Image
-  const downloadImage = () => {
-    chart?.downloadImage();
-  };
-
-  // Get chart base64 string
-  const toDataURL = () => {
-    console.log(chart?.toDataURL());
-  };
-
-  return (
-    <div>
-      <button type="button" onClick={downloadImage} style={{ marginRight: 24 }}>
-        Export Image
-      </button>
-      <button type="button" onClick={toDataURL}>
-        Get base64
-      </button>
-      <Line {...props} />
-    </div>
-  );
+  return <Line {...props} />
 };
 export default Page;
 ```
@@ -114,20 +75,6 @@ Preview
 <img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*xTY6QIQsWcwAAAAAAAAAAAAAARQnAQ" width="600">
 
 
-## 📜 Document & API
-
-See chart API for details. Common props:
-
-| Property | Description | Type | defaultValue |
-| :--- | :--- | :--- | :--- |
-| onReady | chart loaded callback | (chart)=> void | - |
-| onEvent | chart events | (chart, event)=> void | - |
-| loading | loading status | boolean | - |
-| loadingTemplate | loading template | React.ReactElement | - |
-| errorTemplate | custom error template | (e: Error) => React.ReactNode | - |
-| className | container class | string | - |
-| style | container style | React.CSSProperties | - |
-
 ## Development
 
  Clone locally:
@@ -136,8 +83,7 @@ See chart API for details. Common props:
 $ git clone git@github.com:ant-design/ant-design-charts.git
 $ cd ant-design-charts
 $ pnpm install
-$ pnpm build:lib
-$ pnpm start
+$ pnpm build:lib & pnpm start
 ```
 
 ## 🤝 How to Contribute

diff --git a/packages/charts/README.md b/packages/charts/README.md
@@ -2,7 +2,7 @@
 
 <div align="center">
 
-A React chart library, based on [G2Plot](https://github.com/antvis/G2Plot), [G6](https://github.com/antvis/G6), [X6](https://github.com/antvis/X6), [L7Plot](https://github.com/antvis/L7Plot).
+A React chart library, based on [G2](https://github.com/antvis/G2), [G6](https://github.com/antvis/G6), [X6](https://github.com/antvis/X6), [L7](https://github.com/antvis/L7).
 
 ![build](https://github.com/ant-design/ant-design-charts/workflows/build/badge.svg)
 ![npm](https://img.shields.io/npm/v/@ant-design/charts)
@@ -15,7 +15,6 @@ A React chart library, based on [G2Plot](https://github.com/antvis/G2Plot), [G6]
   <a href="https://charts.ant.design/en/docs/manual/getting-started">Quick Start</a> •
   <a href="https://charts.ant.design/en/examples/gallery">Gallery</a> •
   <a href="https://charts.ant.design/en/docs/manual/faq">FAQ</a> •
-  <a href="https://www.yuque.com/antv/g2plot">Blog</a>
 </p>
 
 </div>
@@ -72,45 +71,11 @@ const Page: React.FC = () => {
 
   const config = {
     data,
-    width: 800,
-    height: 400,
-    autoFit: false,
     xField: 'year',
     yField: 'value',
-    point: {
-      size: 5,
-      shape: 'diamond',
-    },
-    label: {
-      style: {
-        fill: '#aaa',
-      },
-    },
   };
 
-  let chart;
-
-  // Export Image
-  const downloadImage = () => {
-    chart?.downloadImage();
-  };
-
-  // Get chart base64 string
-  const toDataURL = () => {
-    console.log(chart?.toDataURL());
-  };
-
-  return (
-    <div>
-      <button type="button" onClick={downloadImage} style={{ marginRight: 24 }}>
-        Export Image
-      </button>
-      <button type="button" onClick={toDataURL}>
-        Get base64
-      </button>
-      <Line {...config} onReady={(chartInstance) => (chart = chartInstance)} />
-    </div>
-  );
+  return <Line {...config} />;
 };
 export default Page;
 ```
@@ -120,21 +85,6 @@ Preview
 <img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*xTY6QIQsWcwAAAAAAAAAAAAAARQnAQ" width="600">
 
 
-## 📜 Document & API
-
-See chart API for details. Common props:
-
-| Property | Description | Type | defaultValue |
-| :--- | :--- | :--- | :--- |
-| onReady | chart loaded callback | (chart)=> void | - |
-| onEvent | chart events | (chart, event)=> void | - |
-| loading | loading status | boolean | - |
-| loadingTemplate | loading template | React.ReactElement | - |
-| errorTemplate | custom error template | (e: Error) => React.ReactNode | - |
-| className | container class | string | - |
-| style | container style | React.CSSProperties | - |
-
-
 ## 🤝 How to Contribute
 
 Your contributions are always welcome! Please Do have a look at the [issues](https://github.com/ant-design/ant-design-charts/issues) first.

diff --git a/packages/plots/README.md b/packages/plots/README.md
@@ -2,7 +2,7 @@
 
 <div align="center">
 
-A React chart library, based on [G2Plot](https://github.com/antvis/G2Plot).
+A React chart library, based on [G2](https://github.com/antvis/G2).
 
 ![npm](https://img.shields.io/npm/v/@ant-design/plots) ![npm](https://img.shields.io/npm/dm/@ant-design/plots) [![GitHub stars](https://img.shields.io/github/stars/ant-design/ant-design-charts)](https://github.com/ant-design/ant-design-charts/stargazers) [![npm License](https://img.shields.io/npm/l/@ant-design/charts.svg)](https://www.npmjs.com/package/@ant-design/charts)
 
@@ -11,7 +11,6 @@ A React chart library, based on [G2Plot](https://github.com/antvis/G2Plot).
   <a href="https://charts.ant.design/en/docs/manual/getting-started">Quick Start</a> •
   <a href="https://charts.ant.design/en/examples/gallery">Gallery</a> •
   <a href="https://charts.ant.design/en/docs/manual/faq">FAQ</a> •
-  <a href="https://www.yuque.com/antv/g2plot">Blog</a>
 </p>
 
 <img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*sXqrRrEwFRQAAAAAAAAAAABkARQnAQ" width="800"/>
@@ -35,8 +34,8 @@ $ npm install @ant-design/plots
 ## 🔨 Usage
 
 ```tsx | pure
-import React from 'react';
-import { Line } from '@ant-design/charts';
+iimport React from 'react';
+import { Line } from '@ant-design/plots';
 
 const Page: React.FC = () => {
   const data = [
@@ -53,45 +52,11 @@ const Page: React.FC = () => {
 
   const config = {
     data,
-    width: 800,
-    height: 400,
-    autoFit: false,
     xField: 'year',
     yField: 'value',
-    point: {
-      size: 5,
-      shape: 'diamond',
-    },
-    label: {
-      style: {
-        fill: '#aaa',
-      },
-    },
   };
 
-  let chart;
-
-  // Export Image
-  const downloadImage = () => {
-    chart?.downloadImage();
-  };
-
-  // Get chart base64 string
-  const toDataURL = () => {
-    console.log(chart?.toDataURL());
-  };
-
-  return (
-    <div>
-      <button type="button" onClick={downloadImage} style={{ marginRight: 24 }}>
-        Export Image
-      </button>
-      <button type="button" onClick={toDataURL}>
-        Get base64
-      </button>
-      <Line {...config} onReady={(chartInstance) => (chart = chartInstance)} />
-    </div>
-  );
+  return <Line {...config} />;
 };
 export default Page;
 ```
@@ -100,20 +65,6 @@ Preview
 
 <img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*xTY6QIQsWcwAAAAAAAAAAAAAARQnAQ" width="600">
 
-## 📜 Document & API
-
-See chart API for details. Common props:
-
-| Property        | Description           | Type                          | defaultValue |
-| --------------- | --------------------- | ----------------------------- | ------------ |
-| onReady         | chart loaded callback | (chart)=> void                | -            |
-| onEvent         | chart events          | (chart, event)=> void         | -            |
-| loading         | loading status        | boolean                       | -            |
-| loadingTemplate | loading template      | React.ReactElement            | -            |
-| errorTemplate   | custom error template | (e: Error) => React.ReactNode | -            |
-| className       | container class       | string                        | -            |
-| style           | container style       | React.CSSProperties           | -            |
-
 ## 🤝 How to Contribute
 
 Your contributions are always welcome! Please Do have a look at the [issues](https://github.com/ant-design/ant-design-charts/issues) first.

diff --git a/packages/plots/src/core/plots/violin/type.ts b/packages/plots/src/core/plots/violin/type.ts
@@ -1,5 +1,5 @@
-import type { BaseOptions, Options } from '../../types/common';
+import type { Options } from '../../types/common';
 
-export type ViolinOptions = Options & BaseOptions & {
-  violinType?: 'normal' | 'density' | 'polar'
+export type ViolinOptions = Options & {
+  violinType?: 'normal' | 'density' | 'polar';
 };
diff --git a/packages/plots/src/core/types/common.ts b/packages/plots/src/core/types/common.ts
@@ -58,12 +58,6 @@ export type BaseOptions = {
    * @title 分组
    */
   readonly group?: boolean | DodgeXTransform;
-  /**
-   * @title 图形
-   * @description interval 图形元素展示形状
-   * @example smooth | hvh
-   */
-  readonly shape?: string;
   /**
    * @title 标签
    * @description 待底层导出
@@ -96,7 +90,7 @@ export type Options = Spec &
      * @title 嵌套 view
      * @description 用于 Mix 等复杂图表
      */
-    children?: Options[];
+    children?: Array<Options & { type: unknown }>;
   };
 
 export type Adaptor<P = Options> = {