) => {
46 | expect(plot).toBeDefined();
47 | };
48 | act(() => {
49 | root.render();
50 | });
51 | });
52 |
53 | test('function ref should be called', () => {
54 | let chart;
55 | const getChart = (instance) => {
56 | chart = instance;
57 | };
58 | act(() => {
59 | root.render();
60 | });
61 |
62 | expect(chart).toBeDefined();
63 | });
64 |
65 | test('test update config and data', () => {
66 | const data = [
67 | { year: '1991', value: 3 },
68 | { year: '1992', value: 4 },
69 | { year: '1993', value: 3.5 },
70 | { year: '1994', value: 5 },
71 | { year: '1995', value: 4.9 },
72 | { year: '1996', value: 6 },
73 | { year: '1997', value: 7 },
74 | { year: '1998', value: 9 },
75 | { year: '1999', value: 13 },
76 | ];
77 | const config = {
78 | data,
79 | xField: 'year',
80 | yField: 'value',
81 | smooth: true,
82 | meta: {
83 | value: {
84 | max: 15,
85 | },
86 | },
87 | };
88 | act(() => {
89 | // @ts-ignore
90 | root.render();
91 | });
92 |
93 | act(() => {
94 | root.render();
95 | });
96 |
97 | act(() => {
98 | // @ts-ignore
99 | root.render();
100 | });
101 |
102 | act(() => {
103 | root.render();
104 | });
105 | act(() => {
106 | root.render();
107 | });
108 | act(() => {
109 | root.render();
110 | });
111 | });
112 |
113 | test('lifecycle', () => {
114 | const result = render();
115 |
116 | expect(result.container).toMatchSnapshot();
117 |
118 | result.unmount();
119 | });
120 | });
121 |
--------------------------------------------------------------------------------
/__tests__/plots/liquid.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import LiquidChart from '../../src/plots/liquid';
4 |
5 | describe('LiquidChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render();
8 |
9 | expect(result.container).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/__tests__/plots/mix.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import MixChart from '../../src/plots/mix';
4 |
5 | describe('MixChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render();
8 |
9 | expect(result.container).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/__tests__/plots/multi-view.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import MultiViewChart from '../../src/plots/multi-view';
4 |
5 | describe('MultiViewChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render();
8 |
9 | expect(result.container).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/__tests__/plots/pie.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import PieChart, { PieChartProps } from '../../src/plots/pie';
4 |
5 | const data = [
6 | { type: '分类一', value: 27 },
7 | { type: '分类二', value: 25 },
8 | { type: '分类三', value: 18 },
9 | { type: '分类四', value: 15 },
10 | { type: '分类五', value: 10 },
11 | { type: '其他', value: 5 },
12 | ];
13 |
14 | const config: PieChartProps = {
15 | appendPadding: 10,
16 | data,
17 | angleField: 'value',
18 | colorField: 'type',
19 | radius: 0.9,
20 | label: {
21 | type: 'inner',
22 | offset: '-30%',
23 | content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
24 | style: {
25 | fontSize: 14,
26 | textAlign: 'center',
27 | },
28 | },
29 | interactions: [{ type: 'element-active' }],
30 | };
31 |
32 | describe('PieChart', () => {
33 | test('should render without crashed', () => {
34 | const result = render();
35 |
36 | expect(result.container).toMatchSnapshot();
37 | });
38 | });
39 |
--------------------------------------------------------------------------------
/__tests__/plots/progress.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import ProgressChart from '../../src/plots/progress';
4 |
5 | describe('ProgressChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render();
8 |
9 | expect(result.container).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/__tests__/plots/radar.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import RadarChart from '../../src/plots/radar';
4 |
5 | describe('RadarChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render();
8 |
9 | expect(result.container).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/__tests__/plots/radial-bar.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import RadialBarChart from '../../src/plots/radial-bar';
4 |
5 | describe('RadialBarChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render();
8 |
9 | expect(result.container).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/__tests__/plots/ring-progress.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import RingProgressChart from '../../src/plots/ring-progress';
4 |
5 | describe('RingProgressChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render();
8 |
9 | expect(result.container).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/__tests__/plots/rose.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import RoseChart from '../../src/plots/rose';
4 |
5 | describe('RoseChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render();
8 |
9 | expect(result.container).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/__tests__/plots/sankey.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import SankeyChart from '../../src/plots/sankey';
4 |
5 | describe('SankeyChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render();
8 |
9 | expect(result.container).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/__tests__/plots/scatter.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import ScatterChart from '../../src/plots/scatter';
4 |
5 | describe('ScatterChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render();
8 |
9 | expect(result.container).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/__tests__/plots/stock.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import StockChart from '../../src/plots/stock';
4 |
5 | describe('StockChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render();
8 |
9 | expect(result.container).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/__tests__/plots/sunburst.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import SunburstChart from '../../src/plots/sunburst';
4 |
5 | const data = {
6 | name: '咖啡产地',
7 | children: [
8 | {
9 | name: '非洲',
10 | value: 4,
11 | children: [
12 | {
13 | continent: '非洲',
14 | country: '埃塞俄比亚',
15 | symbol: '🇪🇹',
16 | area: '耶加雪菲',
17 | name: '埃塞俄比亚',
18 | value: 1,
19 | },
20 | {
21 | continent: '非洲',
22 | country: '肯尼亚',
23 | symbol: '🇰🇪',
24 | coffee: '阿拉比加卡豆',
25 | name: '肯尼亚',
26 | value: 1,
27 | },
28 | {
29 | continent: '非洲',
30 | country: '坦桑尼亚',
31 | symbol: '🇹🇿',
32 | coffee: '乞力马扎罗咖啡',
33 | name: '坦桑尼亚',
34 | value: 1,
35 | },
36 | {
37 | continent: '非洲',
38 | country: '乌干达',
39 | symbol: '🇺🇬',
40 | name: '乌干达',
41 | value: 1,
42 | },
43 | ],
44 | },
45 | {
46 | name: '中南美洲',
47 | value: 6,
48 | children: [
49 | {
50 | continent: '中南美洲',
51 | country: '巴西',
52 | symbol: '🇧🇷',
53 | name: '巴西',
54 | value: 1,
55 | },
56 | {
57 | continent: '中南美洲',
58 | country: '哥伦比亚',
59 | symbol: '🇨🇴',
60 | name: '哥伦比亚',
61 | value: 1,
62 | },
63 | {
64 | continent: '中南美洲',
65 | country: '牙买加',
66 | symbol: '🇯🇲',
67 | name: '牙买加',
68 | value: 1,
69 | },
70 | {
71 | continent: '中南美洲',
72 | country: '巴拿马',
73 | symbol: '🇵🇦',
74 | name: '巴拿马',
75 | value: 1,
76 | },
77 | {
78 | continent: '中南美洲',
79 | country: '危地马拉',
80 | symbol: '🇬🇹',
81 | name: '危地马拉',
82 | value: 1,
83 | },
84 | {
85 | continent: '中南美洲',
86 | country: '哥斯达黎加',
87 | symbol: '🇨🇷',
88 | name: '哥斯达黎加',
89 | value: 1,
90 | },
91 | ],
92 | },
93 | {
94 | name: '亚洲',
95 | value: 5,
96 | children: [
97 | {
98 | continent: '亚洲',
99 | country: '印度尼西亚',
100 | symbol: '🇮🇩',
101 | area: '苏门答腊',
102 | coffee: '曼特宁咖啡',
103 | name: '印度尼西亚',
104 | value: 1,
105 | },
106 | {
107 | continent: '亚洲',
108 | country: '印度',
109 | symbol: '🇮🇳',
110 | name: '印度',
111 | value: 1,
112 | },
113 | {
114 | continent: '亚洲',
115 | country: '越南',
116 | symbol: '🇻🇳',
117 | name: '越南',
118 | value: 1,
119 | },
120 | {
121 | continent: '亚洲',
122 | country: '也门',
123 | symbol: '🇾🇪',
124 | name: '也门',
125 | value: 1,
126 | },
127 | {
128 | continent: '亚洲',
129 | country: '中国',
130 | symbol: '🇨🇳',
131 | name: '中国',
132 | value: 1,
133 | },
134 | ],
135 | },
136 | ],
137 | };
138 |
139 | describe('SunburstChart', () => {
140 | test('should render without crashed', () => {
141 | const result = render();
142 |
143 | expect(result.container).toMatchSnapshot();
144 | });
145 | });
146 |
--------------------------------------------------------------------------------
/__tests__/plots/tiny-area.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import TinyAreaChart from '../../src/plots/tiny-area';
4 |
5 | describe('TinyAreaChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render();
8 |
9 | expect(result.container).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/__tests__/plots/tiny-column.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import TinyColumnChart from '../../src/plots/tiny-column';
4 |
5 | describe('TinyColumnChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render();
8 |
9 | expect(result.container).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/__tests__/plots/tiny-line.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import TinyLineChart from '../../src/plots/tiny-line';
4 |
5 | describe('TinyLineChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render();
8 |
9 | expect(result.container).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/__tests__/plots/treemap.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import TreemapChart from '../../src/plots/treemap';
4 |
5 | const data = {
6 | name: 'root',
7 | children: [
8 | { name: '分类 1', value: 560 },
9 | { name: '分类 2', value: 500 },
10 | { name: '分类 3', value: 150 },
11 | { name: '分类 4', value: 140 },
12 | { name: '分类 5', value: 115 },
13 | { name: '分类 6', value: 95 },
14 | { name: '分类 7', value: 90 },
15 | { name: '分类 8', value: 75 },
16 | { name: '分类 9', value: 98 },
17 | { name: '分类 10', value: 60 },
18 | { name: '分类 11', value: 45 },
19 | { name: '分类 12', value: 40 },
20 | { name: '分类 13', value: 40 },
21 | { name: '分类 14', value: 35 },
22 | { name: '分类 15', value: 40 },
23 | { name: '分类 16', value: 40 },
24 | { name: '分类 17', value: 40 },
25 | { name: '分类 18', value: 30 },
26 | { name: '分类 19', value: 28 },
27 | { name: '分类 20', value: 16 },
28 | ],
29 | };
30 |
31 | describe('TreemapChart', () => {
32 | test('should render without crashed', () => {
33 | const result = render(
34 | ,
40 | );
41 |
42 | expect(result.container).toMatchSnapshot();
43 | });
44 | });
45 |
--------------------------------------------------------------------------------
/__tests__/plots/venn.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import VennChart from '../../src/plots/venn';
4 |
5 | describe('VennChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render(
8 | ,
24 | );
25 |
26 | expect(result.container).toMatchSnapshot();
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/__tests__/plots/violin.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import ViolinChart from '../../src/plots/violin';
4 |
5 | describe('ViolinChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render();
8 |
9 | expect(result.container).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/__tests__/plots/waterfall.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import WaterfallChart from '../../src/plots/waterfall';
4 |
5 | describe('WaterfallChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render();
8 |
9 | expect(result.container).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/__tests__/plots/word-cloud.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import React from 'react';
3 | import WordCloudChart from '../../src/plots/word-cloud';
4 |
5 | describe('WordCloudChart', () => {
6 | test('should render without crashed', () => {
7 | const result = render();
8 |
9 | expect(result.container).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/__tests__/setups/url.js:
--------------------------------------------------------------------------------
1 | window.URL.createObjectURL = jest.fn()
2 |
--------------------------------------------------------------------------------
/__tests__/setups/worker.js:
--------------------------------------------------------------------------------
1 | class Worker {
2 | constructor(stringUrl) {
3 | this.url = stringUrl
4 | this.onmessage = jest.fn()
5 | }
6 |
7 | postMessage(msg) {
8 | this.onmessage(msg)
9 | }
10 | }
11 |
12 | window.Worker = Worker
13 |
--------------------------------------------------------------------------------
/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/azure-pipelines.yml:
--------------------------------------------------------------------------------
1 | # Node.js
2 | # Build a general Node.js project with npm.
3 | # Add steps that analyze code, save build artifacts, deploy, and more:
4 | # https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
5 |
6 | trigger:
7 | - master
8 |
9 | pr:
10 | branches:
11 | include:
12 | - master
13 |
14 | pool:
15 | vmImage: "ubuntu-latest"
16 |
17 | steps:
18 | - task: NodeTool@0
19 | inputs:
20 | versionSpec: "18.x"
21 | displayName: "Install Node.js"
22 |
23 | - script: |
24 | npm install
25 | npm run build
26 | displayName: "npm install and build"
27 |
28 | - task: PublishCodeCoverageResults@1
29 | inputs:
30 | codeCoverageTool: "Cobertura"
31 | summaryFileLocation: "$(System.DefaultWorkingDirectory)/**/*coverage.xml"
32 | reportDirectory: "$(System.DefaultWorkingDirectory)/coverage"
33 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ['@pixas/babel-preset-lib'],
3 | }
4 |
--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | extends: ['@commitlint/config-conventional'],
3 | }
4 |
--------------------------------------------------------------------------------
/docs/api/area.md:
--------------------------------------------------------------------------------
1 | # AreaChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { AreaChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/bar.md:
--------------------------------------------------------------------------------
1 | # BarChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { BarChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/bidirectional-bar.md:
--------------------------------------------------------------------------------
1 | # BidirectionalBarChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { BidirectionalBarChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/box.md:
--------------------------------------------------------------------------------
1 | # BoxChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { BoxChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/bullet.md:
--------------------------------------------------------------------------------
1 | # BulletChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { BulletChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/chord.md:
--------------------------------------------------------------------------------
1 | # ChordChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { ChordChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/circle-packing.md:
--------------------------------------------------------------------------------
1 | # CirclePackingChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { CirclePackingChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/column.md:
--------------------------------------------------------------------------------
1 | # ColumnChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { ColumnChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/dual-axes.md:
--------------------------------------------------------------------------------
1 | # DualAxesChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { DualAxesChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/facet.md:
--------------------------------------------------------------------------------
1 | # FacetChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { FacetChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/funnel.md:
--------------------------------------------------------------------------------
1 | # FunnelChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { FunnelChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/gauge.md:
--------------------------------------------------------------------------------
1 | # GaugeChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { GaugeChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/heatmap.md:
--------------------------------------------------------------------------------
1 | # HeatmapChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { HeatmapChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/histogram.md:
--------------------------------------------------------------------------------
1 | # HistogramChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { HistogramChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: API
3 | nav:
4 | title: API
5 | ---
6 |
7 | ## Configurations
8 |
9 | All configurations defined in `G2Plot` can be used as `props`, and use `chartRef` can access chart instance
10 |
11 | For example
12 |
13 | ```tsx | pure
14 | import { LineChart } from '@opd/g2plot-react'
15 |
16 | export default () => {
17 | const ref = useRef()
18 | const chartRef = useRef()
19 | return (
20 |
21 | )
22 | }
23 | ```
24 |
25 | view `G2Plot` [docs](https://g2plot.antv.vision/en/docs/manual/introduction)
26 |
27 |
28 |
--------------------------------------------------------------------------------
/docs/api/line.md:
--------------------------------------------------------------------------------
1 | # LineChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { LineChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/liquid.md:
--------------------------------------------------------------------------------
1 | # LiquidChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { LiquidChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/mix.md:
--------------------------------------------------------------------------------
1 | # MixChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { MixChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/pie.md:
--------------------------------------------------------------------------------
1 | # PieChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { PieChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/progress.md:
--------------------------------------------------------------------------------
1 | # ProgressChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { ProgressChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/radar.md:
--------------------------------------------------------------------------------
1 | # RadarChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { RadarChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/radial-bar.md:
--------------------------------------------------------------------------------
1 | # RadialBarChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { RadialBarChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/ring-progress.md:
--------------------------------------------------------------------------------
1 | # RingProgressChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { RingProgressChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/rose.md:
--------------------------------------------------------------------------------
1 | # RoseChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { RoseChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/sankey.md:
--------------------------------------------------------------------------------
1 | # SankeyChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { SankeyChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/scatter.md:
--------------------------------------------------------------------------------
1 | # ScatterChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { ScatterChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/stock.md:
--------------------------------------------------------------------------------
1 | # StockChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { StockChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/sunburst.md:
--------------------------------------------------------------------------------
1 | # SunburstChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { SunburstChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/tiny-area.md:
--------------------------------------------------------------------------------
1 | # TinyAreaChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { TinyAreaChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/tiny-column.md:
--------------------------------------------------------------------------------
1 | # TinyColumnChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { TinyColumnChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/tiny-line.md:
--------------------------------------------------------------------------------
1 | # TinyLineChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { TinyLineChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/treemap.md:
--------------------------------------------------------------------------------
1 | # TreemapChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { TreemapChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/venn.md:
--------------------------------------------------------------------------------
1 | # VennChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { VennChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/violin.md:
--------------------------------------------------------------------------------
1 | # ViolinChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { ViolinChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/waterfall.md:
--------------------------------------------------------------------------------
1 | # WaterfallChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { WaterfallChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/api/word-cloud.md:
--------------------------------------------------------------------------------
1 | # WordCloudChart
2 |
3 | ## Usage
4 |
5 | ```tsx | pure
6 | import { WordCloudChart } from '@opd/g2plot-react'
7 | ```
8 |
9 | ## API
10 |
11 |
12 |
13 | > Visit [G2Plot](https://g2plot.antv.antgroup.com/api/plot-api) form more detail
14 |
--------------------------------------------------------------------------------
/docs/changelog/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Changelog
3 | ---
4 |
5 |
6 |
--------------------------------------------------------------------------------
/docs/demos/bar.tsx:
--------------------------------------------------------------------------------
1 | import { BarChart } from '@opd/g2plot-react';
2 |
3 | const config = {
4 | height: 350,
5 | autoFit: true,
6 | xField: 'value',
7 | yField: 'year',
8 | smooth: true,
9 | meta: {
10 | value: {
11 | max: 15,
12 | },
13 | },
14 | data: [
15 | { year: '1991', value: 3 },
16 | { year: '1992', value: 4 },
17 | { year: '1993', value: 3.5 },
18 | { year: '1994', value: 5 },
19 | { year: '1995', value: 4.9 },
20 | { year: '1996', value: 6 },
21 | { year: '1997', value: 7 },
22 | { year: '1998', value: 9 },
23 | { year: '1999', value: 11 },
24 | ],
25 | };
26 |
27 | export default () => {
28 | return ;
29 | };
30 |
--------------------------------------------------------------------------------
/docs/demos/column.tsx:
--------------------------------------------------------------------------------
1 | import { ColumnChart } from '@opd/g2plot-react';
2 |
3 | const config = {
4 | height: 350,
5 | autoFit: true,
6 | xField: 'year',
7 | yField: 'value',
8 | smooth: true,
9 | meta: {
10 | value: {
11 | max: 15,
12 | },
13 | },
14 | data: [
15 | { year: '1991', value: 3 },
16 | { year: '1992', value: 4 },
17 | { year: '1993', value: 3.5 },
18 | { year: '1994', value: 5 },
19 | { year: '1995', value: 4.9 },
20 | { year: '1996', value: 6 },
21 | { year: '1997', value: 7 },
22 | { year: '1998', value: 9 },
23 | { year: '1999', value: 11 },
24 | ],
25 | };
26 |
27 | export default () => {
28 | return ;
29 | };
30 |
--------------------------------------------------------------------------------
/docs/demos/line.tsx:
--------------------------------------------------------------------------------
1 | import { LineChart } from '@opd/g2plot-react';
2 |
3 | const config = {
4 | height: 350,
5 | autoFit: true,
6 | xField: 'year',
7 | yField: 'value',
8 | smooth: true,
9 | meta: {
10 | value: {
11 | max: 15,
12 | },
13 | },
14 | data: [
15 | { year: '1991', value: 3 },
16 | { year: '1992', value: 4 },
17 | { year: '1993', value: 3.5 },
18 | { year: '1994', value: 5 },
19 | { year: '1995', value: 4.9 },
20 | { year: '1996', value: 6 },
21 | { year: '1997', value: 7 },
22 | { year: '1998', value: 9 },
23 | { year: '1999', value: 11 },
24 | ],
25 | };
26 |
27 | export default () => {
28 | return ;
29 | };
30 |
--------------------------------------------------------------------------------
/docs/demos/pie.tsx:
--------------------------------------------------------------------------------
1 | import { PieChart } from '@opd/g2plot-react';
2 |
3 | const pieConfig = {
4 | height: 350,
5 | autoFit: true,
6 | padding: 'auto',
7 | radius: 1,
8 | data: [
9 | {
10 | type: 'A',
11 | value: 27,
12 | },
13 | {
14 | type: 'B',
15 | value: 25,
16 | },
17 | {
18 | type: 'C',
19 | value: 18,
20 | },
21 | {
22 | type: 'D',
23 | value: 15,
24 | },
25 | {
26 | type: 'E',
27 | value: 10,
28 | },
29 | {
30 | type: 'Others',
31 | value: 5,
32 | },
33 | ],
34 | angleField: 'value',
35 | colorField: 'type',
36 | label: {
37 | visible: true,
38 | type: 'inner',
39 | },
40 | legend: {
41 | visible: false,
42 | },
43 | };
44 |
45 | export default () => {
46 | return ;
47 | };
48 |
--------------------------------------------------------------------------------
/docs/guide/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Get Started
3 | ---
4 |
5 | ## What
6 |
7 | `G2Plot React` is a chart component set powered by [`G2Plot`](https://g2plot.antv.vision/) and developed for `React`.
8 |
9 | ## Features
10 |
11 | - Fully support `G2Plot` charts, and will support new chart at first time.
12 | - Developed for `React`, and easily use.
13 | - Native support for `TypeScript`.
14 | - **100%** unit test coverage
15 |
16 | ## Install
17 |
18 | Install package in your work directory
19 |
20 | ```bash
21 | npm install @opd/g2plot-react
22 | ```
23 |
24 | ## Import
25 |
26 | Import a chart in your `React` Component
27 |
28 | ```ts
29 | import { LineChart } from '@opd/g2plot-react'
30 | ```
31 |
32 | ## Config
33 |
34 | Config chart based on `G2Plot` [docs](https://g2plot.antv.vision/en/docs/manual/introduction)
35 |
36 | ```ts
37 | const config = {
38 | height: 400,
39 | xField: 'year',
40 | yField: 'value',
41 | smooth: true,
42 | meta: {
43 | value: {
44 | max: 15,
45 | },
46 | },
47 | data: [
48 | { year: '1991', value: 3 },
49 | { year: '1992', value: 4 },
50 | { year: '1993', value: 3.5 },
51 | { year: '1994', value: 5 },
52 | { year: '1995', value: 4.9 },
53 | { year: '1996', value: 6 },
54 | { year: '1997', value: 7 },
55 | { year: '1998', value: 9 },
56 | { year: '1999', value: 11 },
57 | ],
58 | }
59 | ```
60 |
61 | ## Render
62 |
63 | ```tsx
64 | import { LineChart } from '@opd/g2plot-react'
65 | import { useCallback } from 'react'
66 |
67 | const config = {
68 | height: 400,
69 | xField: 'year',
70 | yField: 'value',
71 | smooth: true,
72 | meta: {
73 | value: {
74 | max: 15,
75 | },
76 | },
77 | data: [
78 | { year: '1991', value: 3 },
79 | { year: '1992', value: 4 },
80 | { year: '1993', value: 3.5 },
81 | { year: '1994', value: 5 },
82 | { year: '1995', value: 4.9 },
83 | { year: '1996', value: 6 },
84 | { year: '1997', value: 7 },
85 | { year: '1998', value: 9 },
86 | { year: '1999', value: 11 },
87 | ],
88 | }
89 |
90 | export default () => {
91 | const getChart = useCallback((chart) => {
92 | console.log(chart)
93 | }, [])
94 | const getContainer = useCallback((container) => {
95 | console.log(container)
96 | }, [])
97 | return
98 | }
99 | ```
100 |
101 | ## Update Data
102 |
103 | ```tsx
104 | import { LineChart } from '@opd/g2plot-react'
105 | import { useCallback, useState } from 'react'
106 |
107 | const config = {
108 | height: 400,
109 | xField: 'year',
110 | yField: 'value',
111 | smooth: true,
112 | meta: {
113 | value: {
114 | max: 15,
115 | },
116 | },
117 | data: [
118 | { year: '1991', value: 3 },
119 | { year: '1992', value: 4 },
120 | { year: '1993', value: 3.5 },
121 | { year: '1994', value: 5 },
122 | { year: '1995', value: 4.9 },
123 | { year: '1996', value: 6 },
124 | { year: '1997', value: 7 },
125 | { year: '1998', value: 9 },
126 | { year: '1999', value: 11 },
127 | ],
128 | }
129 |
130 | export default () => {
131 | const getChart = useCallback((chart) => {
132 | console.log(chart)
133 | }, [])
134 | const getContainer = useCallback((container) => {
135 | console.log(container)
136 | }, [])
137 |
138 | const [data, setData] = useState([
139 | { year: '1991', value: 3 },
140 | { year: '1992', value: 4 },
141 | { year: '1993', value: 3.5 },
142 | { year: '1994', value: 5 },
143 | { year: '1995', value: 4.9 },
144 | { year: '1996', value: 6 },
145 | { year: '1997', value: 7 },
146 | { year: '1998', value: 9 },
147 | { year: '1999', value: 11 },
148 | ])
149 |
150 | const handleBtnClick = useCallback(() => {
151 | setData((items) => {
152 | const last = items.pop()
153 |
154 | return items.concat(last, {
155 | year: (+last.year + 1).toString(),
156 | value: Math.random() * 10,
157 | })
158 | })
159 | }, [])
160 |
161 | return (
162 |
163 |
164 |
170 |
171 | )
172 | }
173 | ```
174 |
175 | ## Update Config
176 |
177 | ```tsx
178 | import { LineChart } from '@opd/g2plot-react'
179 | import { useCallback, useState } from 'react'
180 |
181 | const config = {
182 | height: 400,
183 | xField: 'year',
184 | yField: 'value',
185 | smooth: true,
186 | meta: {
187 | value: {
188 | max: 15,
189 | },
190 | },
191 | data: [
192 | { year: '1991', value: 3 },
193 | { year: '1992', value: 4 },
194 | { year: '1993', value: 3.5 },
195 | { year: '1994', value: 5 },
196 | { year: '1995', value: 4.9 },
197 | { year: '1996', value: 6 },
198 | { year: '1997', value: 7 },
199 | { year: '1998', value: 9 },
200 | { year: '1999', value: 11 },
201 | ],
202 | }
203 |
204 | export default () => {
205 | const getChart = useCallback((chart) => {
206 | console.log(chart)
207 | }, [])
208 | const getContainer = useCallback((container) => {
209 | console.log(container)
210 | }, [])
211 |
212 | const [restConfig, setConfig] = useState({})
213 |
214 | const handleBtnClick = useCallback(() => {
215 | setConfig((config) => ({
216 | point: config.point ? undefined : {},
217 | }))
218 | }, [])
219 |
220 | return (
221 |
222 |
223 |
229 |
230 | )
231 | }
232 | ```
233 |
234 | ## Use Lab Chart
235 |
236 | ```tsx | pure
237 | import { Lab } from '@antv/g2plot'
238 | import { BaseChart } from '@opd/g2plot'
239 |
240 | export default () =>
241 | ```
242 |
--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: G2Plot React
3 | hero:
4 | title: G2Plot React
5 | description: G2Plot for React
6 | actions:
7 | - text: API
8 | link: /api
9 | - text: Get Started
10 | link: /guide
11 | features:
12 | - emoji: 🚀
13 | title: G2Plot
14 | description: Powered by G2Plot
15 | link: https://g2plot.antv.vision
16 | - emoji: 📦
17 | title: React
18 | description: Born for React
19 | - emoji: 🛠
20 | title: Type Strong
21 | description: Native support for TypeScript
22 | - emoji: ✅
23 | title: 100%
24 | description: Full unit test coverage
25 | demo:
26 | cols: 2
27 | ---
28 |
29 | ## Installation
30 |
31 | ```bash
32 | npm install @opd/g2plot-react
33 | ```
34 |
35 | ## Usage
36 |
37 | ```js
38 | import { LineChart } from '@opd/g2plot-react'
39 | ```
40 |
41 | ## Examples
42 |
43 | 
3 |