diff --git a/.umirc.ts b/.umirc.ts
index 3578c68d1..e571a850d 100644
--- a/.umirc.ts
+++ b/.umirc.ts
@@ -1,5 +1,7 @@
import { defineConfig } from 'dumi';
+console.log('process.env.API_URL', process.env.API_URL)
+
export default defineConfig({
title: ' ',
hash: true,
diff --git a/packages/client/package.json b/packages/client/package.json
index d5df72d2f..bd3f717a2 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -18,6 +18,7 @@
},
"gitHead": "f0b335ac30f29f25c95d7d137655fa64d8d67f1e",
"dependencies": {
+ "@ant-design/charts": "^1.2.3",
"@formily/antd": "^2.0.0-beta.72",
"@formily/core": "^2.0.0-beta.72",
"@formily/react": "^2.0.0-beta.72",
diff --git a/packages/client/src/components/schema-renderer/index.tsx b/packages/client/src/components/schema-renderer/index.tsx
index a036bc7f9..de9c67b3f 100644
--- a/packages/client/src/components/schema-renderer/index.tsx
+++ b/packages/client/src/components/schema-renderer/index.tsx
@@ -51,6 +51,7 @@ import { CardItem } from '../../schemas/card-item';
import { DragAndDrop } from '../../schemas/drag-and-drop';
import { TreeSelect } from '../../schemas/tree-select';
import { Page } from '../../schemas/page';
+import { Chart } from '../../schemas/chart';
import { useCollectionContext, useSwithDesignableContext } from '../../schemas';
export const BlockContext = createContext({ dragRef: null });
@@ -71,6 +72,7 @@ export const SchemaField = createSchemaField({
Div,
Space,
Page,
+ Chart,
ArrayCollapse,
ArrayTable,
diff --git a/packages/client/src/schemas/add-new/chart.ts b/packages/client/src/schemas/add-new/chart.ts
new file mode 100644
index 000000000..2b055c969
--- /dev/null
+++ b/packages/client/src/schemas/add-new/chart.ts
@@ -0,0 +1,150 @@
+export const columnChartConfig = {
+ data: [
+ {
+ type: '家具家电',
+ sales: 38,
+ },
+ {
+ type: '粮油副食',
+ sales: 52,
+ },
+ {
+ type: '生鲜水果',
+ sales: 61,
+ },
+ {
+ type: '美容洗护',
+ sales: 145,
+ },
+ {
+ type: '母婴用品',
+ sales: 48,
+ },
+ {
+ type: '进口食品',
+ sales: 38,
+ },
+ {
+ type: '食品饮料',
+ sales: 38,
+ },
+ {
+ type: '家庭清洁',
+ sales: 38,
+ },
+ ],
+ xField: 'type',
+ yField: 'sales',
+ label: {
+ position: 'middle',
+ style: {
+ fill: '#FFFFFF',
+ opacity: 0.6,
+ },
+ },
+ xAxis: {
+ label: {
+ autoHide: true,
+ autoRotate: false,
+ },
+ },
+ meta: {
+ type: { alias: '类别' },
+ sales: { alias: '销售额' },
+ },
+};
+
+var data = [
+ {
+ type: '家具家电',
+ sales: 38,
+ },
+ {
+ type: '粮油副食',
+ sales: 52,
+ },
+ {
+ type: '生鲜水果',
+ sales: 61,
+ },
+ {
+ type: '美容洗护',
+ sales: 145,
+ },
+ {
+ type: '母婴用品',
+ sales: 48,
+ },
+ {
+ type: '进口食品',
+ sales: 38,
+ },
+ {
+ type: '食品饮料',
+ sales: 38,
+ },
+ {
+ type: '家庭清洁',
+ sales: 38,
+ },
+];
+var config = {
+ data: data,
+ xField: 'sales',
+ yField: 'type',
+ legend: { position: 'top-left' },
+ barBackground: { style: { fill: 'rgba(0,0,0,0.1)' } },
+ interactions: [
+ {
+ type: 'active-region',
+ enable: false,
+ },
+ ],
+};
+
+export const barChartConfig = {
+ data: [
+ {
+ type: '家具家电',
+ sales: 38,
+ },
+ {
+ type: '粮油副食',
+ sales: 52,
+ },
+ {
+ type: '生鲜水果',
+ sales: 61,
+ },
+ {
+ type: '美容洗护',
+ sales: 145,
+ },
+ {
+ type: '母婴用品',
+ sales: 48,
+ },
+ {
+ type: '进口食品',
+ sales: 38,
+ },
+ {
+ type: '食品饮料',
+ sales: 38,
+ },
+ {
+ type: '家庭清洁',
+ sales: 38,
+ },
+ ],
+ xField: 'sales',
+ yField: 'type',
+ legend: { position: 'top-left' },
+ barBackground: { style: { fill: 'rgba(0,0,0,0.1)' } },
+ interactions: [
+ {
+ type: 'active-region',
+ enable: false,
+ },
+ ],
+};
diff --git a/packages/client/src/schemas/add-new/index.tsx b/packages/client/src/schemas/add-new/index.tsx
index 847d45f3e..0232c7f27 100644
--- a/packages/client/src/schemas/add-new/index.tsx
+++ b/packages/client/src/schemas/add-new/index.tsx
@@ -65,6 +65,8 @@ import { options } from '../database-field/interfaces';
import { useDisplayFieldsContext } from '../form';
import './style.less';
+import IconPicker from '../../components/icon-picker';
+import { barChartConfig, columnChartConfig } from './chart';
const generateGridBlock = (schema: ISchema) => {
const name = schema.name || uid();
@@ -333,6 +335,24 @@ function generateCardItemSchema(component) {
},
},
},
+ 'Chart.Column': {
+ type: 'void',
+ 'x-decorator': 'CardItem',
+ 'x-component': 'Chart.Column',
+ 'x-designable-bar': 'Chart.DesignableBar',
+ 'x-component-props': {
+ config: cloneDeep(columnChartConfig),
+ },
+ },
+ 'Chart.Bar': {
+ type: 'void',
+ 'x-decorator': 'CardItem',
+ 'x-component': 'Chart.Bar',
+ 'x-designable-bar': 'Chart.DesignableBar',
+ 'x-component-props': {
+ config: cloneDeep(barChartConfig),
+ },
+ },
};
return defaults[component];
}
@@ -427,15 +447,16 @@ AddNew.CardItem = observer((props: any) => {
info.key === 'addNewTable' ? 'Table' : 'Form',
);
resourceName = values.name;
- } else if (info.key !== 'Markdown.Void') {
+ } else if (info.key.startsWith('collection.')) {
const keys = info.key.split('.');
- const component = keys.shift();
- const tableName = keys.join('.');
+ const component = keys.pop();
+ const tableName = keys.pop();
resourceName = tableName;
data = generateCardItemSchema(component);
console.log('info.keyPath', component, tableName);
} else {
data = generateCardItemSchema(info.key);
+ console.log('generateCardItemSchema', data, info.key);
}
if (schema['key']) {
data['key'] = uid();
@@ -464,25 +485,92 @@ AddNew.CardItem = observer((props: any) => {
}
}}
>
-
-
- {collections.map((item) => (
- {item.title}
- ))}
-
-
- 新建数据表
-
-
-
- {collections.map((item) => (
- {item.title}
- ))}
-
-
- 新建数据表
-
- 新建文本段
+
+ {[
+ { key: 'Table', title: '表格', icon: 'TableOutlined' },
+ { key: 'Form', title: '表单', icon: 'FormOutlined' },
+ {
+ key: 'Calendar',
+ title: '日历',
+ icon: 'CalendarOutlined',
+ disabled: true,
+ },
+ {
+ key: 'Kanban',
+ title: '看板',
+ icon: 'CreditCardOutlined',
+ disabled: true,
+ },
+ ].map((view) => (
+ }
+ disabled={view.disabled}
+ key={view.key}
+ title={view.title}
+ >
+
+ {collections.map((item) => (
+
+ {item.title}
+
+ ))}
+
+
+ } key={`addNew${view.key}`}>
+ 新建数据表
+
+
+ ))}
+
+
+
+ }
+ >
+ Markdown
+
+ }
+ >
+ 富文本
+
+
+
+
+ }
+ >
+ 柱状图
+
+ }
+ >
+ 条形图
+
+ }
+ >
+ 折线图
+
+ }
+ >
+ 饼图
+
+
+
模板1
diff --git a/packages/client/src/schemas/chart/index.md b/packages/client/src/schemas/chart/index.md
new file mode 100644
index 000000000..2b6a7a79b
--- /dev/null
+++ b/packages/client/src/schemas/chart/index.md
@@ -0,0 +1,10 @@
+---
+title: Chart - 图表
+nav:
+ title: 组件
+ path: /client
+group:
+ order: 1
+ title: Schemas
+ path: /client/schemas
+---
diff --git a/packages/client/src/schemas/chart/index.tsx b/packages/client/src/schemas/chart/index.tsx
new file mode 100644
index 000000000..3d91cc840
--- /dev/null
+++ b/packages/client/src/schemas/chart/index.tsx
@@ -0,0 +1,111 @@
+import React, { useContext } from 'react';
+import {
+ Column,
+ ColumnConfig,
+ Line,
+ LineConfig,
+ Pie,
+ PieConfig,
+ Bar,
+ BarConfig,
+} from '@ant-design/charts';
+import {
+ connect,
+ mapProps,
+ observer,
+ useField,
+ useFieldSchema,
+ mapReadPretty,
+} from '@formily/react';
+import { Button, Dropdown, Input as AntdInput, Menu, Space } from 'antd';
+import { InputProps, TextAreaProps } from 'antd/lib/input';
+import { Display } from '../display';
+import { LoadingOutlined, MenuOutlined, DragOutlined } from '@ant-design/icons';
+import micromark from 'micromark';
+import { useDesignable } from '../../components/schema-renderer';
+import { useState } from 'react';
+import AddNew from '../add-new';
+import cls from 'classnames';
+import { DraggableBlockContext } from '../../components/drag-and-drop';
+import { uid } from '@formily/shared';
+import { removeSchema, updateSchema } from '..';
+import { isGridRowOrCol } from '../grid';
+
+export const Chart: any = {};
+
+Chart.Column = observer((props: any) => {
+ return ;
+});
+
+Chart.Line = observer((props: any) => {
+ return ;
+});
+
+Chart.Pie = observer((props: any) => {
+ return ;
+});
+
+Chart.Bar = observer((props: any) => {
+ return ;
+});
+
+Chart.DesignableBar = observer((props) => {
+ const field = useField();
+ const { designable, schema, refresh, deepRemove } = useDesignable();
+ const [visible, setVisible] = useState(false);
+ const { dragRef } = useContext(DraggableBlockContext);
+ if (!designable) {
+ return null;
+ }
+ return (
+
+
{
+ e.stopPropagation();
+ }}
+ className={cls('designable-bar-actions', { active: visible })}
+ >
+
+
+ {dragRef && }
+ {
+ setVisible(visible);
+ }}
+ overlay={
+
+ }
+ >
+
+
+
+
+