{
39 | chart = c;
40 | }}
41 | />,
42 | );
43 | cleanup();
44 | });
45 | });
46 |
--------------------------------------------------------------------------------
/unittest/plots/__snapshots__/ProgressChart-spec.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Plots-ProgressChart 进度条 1`] = `
4 | Object {
5 | "animation": Object {},
6 | "appendPadding": Array [
7 | 10,
8 | 5,
9 | 10,
10 | 10,
11 | ],
12 | "autoFit": true,
13 | "color": Array [
14 | "#5B8FF9",
15 | "#E8EDF3",
16 | ],
17 | "data": 0.71,
18 | "height": 70,
19 | "padding": 10,
20 | "percent": 0.71,
21 | "width": 200,
22 | }
23 | `;
24 |
--------------------------------------------------------------------------------
/unittest/plots/__snapshots__/RingProgressChart-spec.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Plots-RingProgressChart 环形进度条 1`] = `
4 | Object {
5 | "animation": Object {},
6 | "appendPadding": Array [
7 | 10,
8 | 5,
9 | 10,
10 | 10,
11 | ],
12 | "autoFit": true,
13 | "color": Array [
14 | "#5B8FF9",
15 | "#E8EDF3",
16 | ],
17 | "data": 0.8,
18 | "height": 100,
19 | "innerRadius": 0.8,
20 | "percent": 0.8,
21 | "radius": 0.98,
22 | "statistic": Object {
23 | "content": Object {
24 | "style": Object {
25 | "fill": "#4D4D4D",
26 | "fontSize": "14px",
27 | "fontWeight": 300,
28 | "textAlign": "center",
29 | "textBaseline": "middle",
30 | },
31 | },
32 | "title": false,
33 | },
34 | "width": 100,
35 | }
36 | `;
37 |
--------------------------------------------------------------------------------
/unittest/plots/__snapshots__/TinyAreaChart-spec.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Plots-TinyAreaChart 迷你面积图-旧版 1`] = `
4 | Object {
5 | "animation": Object {},
6 | "appendPadding": Array [
7 | 10,
8 | 5,
9 | 10,
10 | 10,
11 | ],
12 | "areaStyle": Object {
13 | "fillOpacity": 0.6,
14 | },
15 | "autoFit": true,
16 | "color": "l(90) 0:#E5EDFE 1:#ffffff",
17 | "data": Array [
18 | 3,
19 | 4,
20 | 6,
21 | 6,
22 | 8,
23 | 9,
24 | 7,
25 | 9,
26 | 13,
27 | ],
28 | "line": Object {
29 | "color": "#5B8FF9",
30 | "size": 1,
31 | },
32 | "tooltip": Object {
33 | "containerTpl": "",
34 | "crosshairs": Object {
35 | "type": "x",
36 | },
37 | "customContent": [Function],
38 | "domStyles": Object {
39 | "g2-tooltip": Object {
40 | "fontSize": "10px",
41 | "padding": "2px 4px",
42 | },
43 | },
44 | "itemTpl": "{value}",
45 | "shared": true,
46 | "showCrosshairs": true,
47 | "showMarkers": false,
48 | "showTitle": false,
49 | },
50 | }
51 | `;
52 |
--------------------------------------------------------------------------------
/unittest/plots/_update-option-spec.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import BarChart from '../../src/plots/BarChart';
3 | import { render, cleanup } from '@testing-library/react';
4 |
5 | const MOCK_DATA = [
6 | { type: '家具家电', sales: 38 },
7 | { type: '粮油副食', sales: 52 },
8 | { type: '生鲜水果', sales: 61 },
9 | { type: '美容洗护', sales: 145 },
10 | { type: '母婴用品', sales: 48 },
11 | { type: '进口食品', sales: 38 },
12 | { type: '食品饮料', sales: 38 },
13 | { type: '家庭清洁', sales: 38 },
14 | ];
15 |
16 | const opt = {
17 | data: MOCK_DATA,
18 | yField: "type",
19 | xField: "sales",
20 | seriesField: "type",
21 | };
22 |
23 | const Demo = () => {
24 | const [option, setState] = useState(opt);
25 | return <>
26 | {
27 | setState({...opt});
28 | console.log('change')
29 | }}>click me change option seriesField
30 | {
31 | setState({...opt, seriesField: undefined });
32 | console.log('change')
33 | }}>click me change option seriesField
34 | {
35 | setState({...opt, data: [] });
36 | console.log('change')
37 | }}>click me change option seriesField
38 |
39 |
42 |
43 | };
44 |
45 | describe('Plots-basic', () => {
46 | test('update options', () => {
47 | let chart = null;
48 | render()
49 | // cleanup();
50 | });
51 | })
52 |
--------------------------------------------------------------------------------
/unittest/setup.js:
--------------------------------------------------------------------------------
1 | require('whatwg-fetch');
2 |
--------------------------------------------------------------------------------
/unittest/shallowEqual-spec.tsx:
--------------------------------------------------------------------------------
1 | import shallowEqual from '../src/utils/shallowEqual';
2 |
3 | describe('shallowEqual', () => {
4 | it('should ref data shallowEqual true', () => {
5 | const data = [{x:1,y:1}];
6 | expect(
7 | shallowEqual({ data: data }, { data: data })
8 | ).toEqual(true)
9 | });
10 | it('should defined data shallowEqual false', () => {
11 | expect(
12 | shallowEqual({ data: [{x:1,y:1}] }, { data:[{x:1,y:1}] })
13 | ).toEqual(false)
14 | });
15 | it('should some obj shallowEqual false', () => {
16 | const obj = { data: [{x:1,y:1}] };
17 | expect(
18 | shallowEqual(obj, obj)
19 | ).toEqual(true)
20 | });
21 | it('should data shallowEqual', () => {
22 | expect(
23 | shallowEqual({ title: 'title' }, { title: 'title' })
24 | ).toEqual(true)
25 | });
26 | it('should data shallowEqual', () => {
27 | expect(
28 | shallowEqual({ title: undefined }, { title: undefined })
29 | ).toEqual(true)
30 | })
31 | })
32 |
--------------------------------------------------------------------------------
/unittest/tools/simulate.ts:
--------------------------------------------------------------------------------
1 |
2 | export function simulateMouseEvent(dom, type, cfg) {
3 | const event = new MouseEvent(type, cfg);
4 | dom.dispatchEvent(event);
5 | }
6 |
7 | export function getClientPoint(canvas, x: number, y: number) {
8 | const point = canvas.getClientByPoint(x, y);
9 | return {
10 | clientX: point.x,
11 | clientY: point.y,
12 | };
13 | }
14 |
--------------------------------------------------------------------------------
/unittest/tools/sleep.ts:
--------------------------------------------------------------------------------
1 | export function sleep(ms) {
2 | return new Promise((resolve) => setTimeout(resolve, ms));
3 | }
4 |
--------------------------------------------------------------------------------
/unittest/utils/transBooleanCfg-spec.tsx:
--------------------------------------------------------------------------------
1 | import transBooleanCfg from '../../src/utils/transBooleanCfg';
2 |
3 | describe('pickWithout', () => {
4 | it('should pickWithout a from array', () => {
5 | const res = transBooleanCfg({
6 | title: false,
7 | grid: true,
8 | line: null,
9 | }, ['title', 'grid', 'line']);
10 | expect(res.title).toEqual(null);
11 | expect(res.grid).toEqual({});
12 | expect(res.line).toEqual(null);
13 | });
14 | })
15 |
16 |
--------------------------------------------------------------------------------
/unittest/version-spec.tsx:
--------------------------------------------------------------------------------
1 | import { VERSION } from '../src/core';
2 | import packageJson from '../package.json';
3 |
4 | // 全局变量中的版本号是否和 package.json 中的一致
5 | describe('version', () => {
6 | it('should equal package.json', () => {
7 | expect(
8 | packageJson.version
9 | ).toEqual(VERSION)
10 | });
11 | })
12 |
--------------------------------------------------------------------------------
9 |
10 | ## 如何改变主题
11 |
12 | 你可以通过 `BizCharts.setTheme(themeName)` API 来改变主题。
13 |
14 | Exmaple:
15 |
16 | ```js
17 | BizCharts.setTheme('dark');
18 | ```
19 |
20 | ## 自定义主题
21 | 当调用 `BizCharts.setTheme()` API 传入的参数是一个对象时，这个时候代表使用你自定义的主题配置。
22 |
23 | Example:
24 | ```js
25 | const seaTheme = {
26 | animate:false,
27 | colors:{},
28 | shapes:{},
29 | };
30 | BizCharts.setTheme(seaTheme);
31 | ```
32 |
33 | 更多的自定义配置项, 请参考 [Theme API](../../7/page/41)
34 |
--------------------------------------------------------------------------------
/docs/BizCharts/使用指南/图表交互.md:
--------------------------------------------------------------------------------
1 | # 图表交互
2 |
3 | ## 默认交互
4 | 包括：
5 | - active 激活，鼠标hover。
6 | - select 选中，鼠标点击选择、框选。
7 |
8 | ## 激活
9 | 开启以及关闭 shape 对于鼠标 hover 时的响应效果，默认为各个 `
12 | 
13 |
14 | ## 分享链接到钉钉答疑群
15 | - demo保存之后页面会自动刷新，拷贝页面链接分享到答疑，并艾特相关同学进行答疑。
16 | - 
17 |
18 | ## 钉钉答疑群
19 | - 开源一群：钉钉群号21708548（已满）
20 | - 开源二群：钉钉群号30230048（可加新同学）
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/docs/BizCharts/实战/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": 59,
3 | "name": "实战",
4 | "name_en": "use",
5 | "product_id": 1,
6 | "parent_id": null,
7 | "rank": "4",
8 | "gmt_create": "2020-03-26T02:01:55.000Z",
9 | "gmt_modified": "2020-03-26T02:10:40.000Z",
10 | "is_deleted": 0,
11 | "is_avaliable": 1,
12 | "is_alinw": 0,
13 | "type": "normal",
14 | "externalPath": "/product/bizcharts/category/59/page/70",
15 | "creator_userid": 1,
16 | "updator_userid": 1,
17 | "children": []
18 | }
--------------------------------------------------------------------------------
/docs/BizCharts@4.x/API文档/G组件/Canvas.md:
--------------------------------------------------------------------------------
1 | # Canvas
2 |
3 |
4 |
5 | G组件的最外层必要组件，控制整个图表组件的渲染方式和画布容器大小。
6 |
7 | ## 使用方法
8 | 解构使用
9 | ```js
10 | import { GComponents } from 'bizcharts';
11 | const { Canvas, Ellipse, Rect } = GComponents;
12 | ...
13 |
16 | ```
17 | 也可按需使用
18 | ```js
19 | import Canvas from "bizcharts/g-components/Canvas";
20 | ...
21 |
24 | ```
25 |
26 |
27 | ## API
28 |
29 | ### renderer
30 | _