├── .editorconfig ├── .gitignore ├── .idea └── misc.xml ├── README.md ├── docs └── 1-框架搭建.md ├── lerna.json ├── package-lock.json ├── package.json ├── packages └── zet-component │ ├── .gitignore │ ├── .umirc.library.js │ ├── README.md │ ├── docs │ ├── cmtStandard.mdx │ ├── faq.mdx │ ├── index.mdx │ ├── quickstart.mdx │ ├── scaffold.mdx │ └── tsGuide.md │ ├── package.json │ ├── src │ ├── assets │ │ └── trophy.png │ ├── automl │ │ ├── achievement │ │ │ ├── _mock │ │ │ │ ├── example.js │ │ │ │ └── index.less │ │ │ ├── achievement.tsx │ │ │ ├── context.tsx │ │ │ ├── index.less │ │ │ ├── index.mdx │ │ │ ├── index.tsx │ │ │ └── panel.tsx │ │ ├── algorithm │ │ │ ├── _mock │ │ │ │ ├── condition.js │ │ │ │ ├── dataItem.js │ │ │ │ ├── list.js │ │ │ │ └── params.json │ │ │ ├── index.less │ │ │ ├── index.mdx │ │ │ ├── index.tsx │ │ │ ├── interface.tsx │ │ │ ├── item.tsx │ │ │ └── list.tsx │ │ ├── config │ │ │ └── metrics.js │ │ ├── derivative │ │ │ ├── _mock │ │ │ │ └── data.js │ │ │ ├── collapse.tsx │ │ │ ├── index.less │ │ │ ├── index.mdx │ │ │ ├── index.tsx │ │ │ ├── item.tsx │ │ │ └── list.tsx │ │ ├── design │ │ │ ├── _mock │ │ │ │ └── leftData.js │ │ │ ├── index.less │ │ │ ├── index.mdx │ │ │ └── index.tsx │ │ ├── index.tsx │ │ ├── layout │ │ │ ├── content.tsx │ │ │ ├── index.less │ │ │ ├── index.mdx │ │ │ ├── index.tsx │ │ │ ├── layout.tsx │ │ │ └── sider.tsx │ │ ├── metricsSelect │ │ │ ├── _mock │ │ │ │ └── metrics.js │ │ │ ├── index.mdx │ │ │ └── index.tsx │ │ ├── modelChart │ │ │ ├── _mock │ │ │ │ ├── autoChart.js │ │ │ │ └── jobData.js │ │ │ ├── charts │ │ │ │ ├── CurveChartMore.js │ │ │ │ ├── autoChart.js │ │ │ │ ├── barChart.js │ │ │ │ ├── index.js │ │ │ │ └── rocChart.js │ │ │ ├── index.less │ │ │ ├── index.mdx │ │ │ └── modelChart.tsx │ │ ├── modelList │ │ │ ├── CardExtra.tsx │ │ │ ├── _mock │ │ │ │ ├── chartData.js │ │ │ │ ├── jobData.js │ │ │ │ ├── modelList.js │ │ │ │ └── modellist.js │ │ │ ├── index.less │ │ │ ├── index.mdx │ │ │ ├── modelChart.tsx │ │ │ ├── modelDetail.tsx │ │ │ ├── modelItem.tsx │ │ │ └── modelList.tsx │ │ └── taskPanel │ │ │ ├── _mock │ │ │ └── jobInfo.js │ │ │ ├── contrastButton.tsx │ │ │ ├── index.less │ │ │ ├── index.mdx │ │ │ ├── index.tsx │ │ │ ├── task.tsx │ │ │ └── taskGroup.tsx │ ├── components │ │ ├── ZetIcon │ │ │ ├── index.js │ │ │ └── index.md │ │ ├── charts │ │ │ ├── LineChart.js │ │ │ ├── PieChart.js │ │ │ ├── _mock │ │ │ │ ├── sliderChartData.js │ │ │ │ ├── sliderChartData2.js │ │ │ │ └── sliderChartData3.js │ │ │ ├── index.js │ │ │ ├── index.mdx │ │ │ ├── index.tsx │ │ │ ├── rect4.js │ │ │ └── sliderChart.tsx │ │ ├── ellipsis │ │ │ ├── index.d.ts │ │ │ ├── index.en-US.md │ │ │ ├── index.js │ │ │ ├── index.less │ │ │ ├── index.test.js │ │ │ └── index.zh-CN.md │ │ ├── icon │ │ │ ├── index.js │ │ │ └── index.md │ │ ├── index.tsx │ │ ├── input │ │ │ ├── index.less │ │ │ ├── index.md │ │ │ ├── index.mdx │ │ │ ├── index.tsx │ │ │ ├── input.tsx │ │ │ ├── search.js │ │ │ └── textarea.tsx │ │ ├── locale-provider │ │ │ ├── en_US.js │ │ │ ├── index.mdx │ │ │ ├── index.tsx │ │ │ ├── localeContext.tsx │ │ │ ├── localeReceiver.tsx │ │ │ └── zh_CN.js │ │ ├── resource │ │ │ ├── index.less │ │ │ ├── index.mdx │ │ │ ├── index.tsx │ │ │ ├── resource.tsx │ │ │ ├── resourceContext.tsx │ │ │ └── resourceGroup.tsx │ │ ├── select │ │ │ ├── _mock │ │ │ │ └── treeData.js │ │ │ ├── index.less │ │ │ ├── index.mdx │ │ │ ├── index.tsx │ │ │ └── tree-select.tsx │ │ ├── tag-input │ │ │ ├── index.less │ │ │ ├── index.mdx │ │ │ └── index.tsx │ │ ├── tag │ │ │ ├── _mock │ │ │ │ └── treeData.js │ │ │ ├── index.less │ │ │ ├── index.mdx │ │ │ ├── index.tsx │ │ │ └── tags-input.js │ │ ├── time-select │ │ │ ├── _mock │ │ │ │ └── data.js │ │ │ ├── index.less │ │ │ ├── index.mdx │ │ │ └── index.tsx │ │ └── timer │ │ │ ├── index.js │ │ │ └── index.less │ ├── config │ │ └── iconFontConfig.js │ ├── index.tsx │ ├── style │ │ ├── index.js │ │ ├── index.less │ │ ├── minxins │ │ │ ├── center.less │ │ │ ├── clearfix.less │ │ │ └── index.less │ │ └── themes │ │ │ └── default.less │ ├── utils │ │ ├── hoc.js │ │ └── utils.js │ ├── wrapper.css │ ├── wrapper.js │ └── wrapper.less │ ├── tsconfig.json │ ├── tslint.json │ ├── tslint.yaml │ └── typings.d.ts └── yarn-error.log /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | 14 | [Makefile] 15 | indent_style = tab 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | TODO.md 2 | .DS_Store 3 | /node_modules 4 | /packages/*/node_modules 5 | /packages/*/LICENSE 6 | lerna-debug.log 7 | .rtp2_cache 8 | .idea/* 9 | *.tsx/*.js 10 | *.tsx/*.js.map 11 | yarn-error.log 12 | yarn.lock 13 | /packages/**/src/**/demo 14 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ### zet-component 3 | > 提供zet组件，在`antd`基础上做了一层封装,包含基础组件(components)和业务组件(bcomponents) 4 | 5 | 6 | ### 特性 7 | 1. 按需加载 8 | 2. 支持国际化 9 | 10 | 11 | ### 安装 12 | > `yarn`和`npm`都可以安装依赖，建议用一种方式，不要混装 13 | ``` 14 | (yarn || npm) install zet-component 15 | ``` 16 | 17 | ### 示例 18 | ``` 19 | import { Resource } from 'zet-component'; 20 | ReactDOM.render(); 21 | ``` 22 | 23 | 24 | ### 链接 25 | [首页](https://9-web.github.io/zet-component/#/) (文档地址) 26 | 27 | ### 依赖 28 | 29 | [react-powerplug](https://github.com/renatorib/react-powerplug) (提供了可插拔无渲染组件) 30 | 31 | [docz](https://github.com/pedronauck/docz) (书写文档和React组件预览工具) 32 | 33 | [umi-plugin-library](https://github.com/umijs/umi-plugin-library) (基于umi组件库开发工具，为组件开发提供全套方案，专注库开发) 34 | 35 | [lerna](https://github.com/lerna/lerna) (monorepo 管理工具) 36 | 37 | 38 | ### 项目结构 39 | 40 | ##### 框架目录 41 | 42 | ``` 43 | ├── bcomponents 存放我们的业务组件 44 | ├── components 存放基础组件 45 | │ ├── resource  资源组件 46 | │ └── tag 标签组件 47 | ├── index.js 入口文件 48 | ├── style 样式文件 49 | │ ├── index.js 50 | │ ├── index.less 入口样式 51 | │ ├── minxins less minxins 52 | │ └── themes 默认主题 53 | ├── utils 工具目录 54 | │ └── utils.js 工具类 55 | ``` 56 | 57 | ##### 组件目录 58 | 59 | ``` 60 | ├── resource resource组件文件夹 61 | │ ├── index.js 入口文件 62 | │ ├── index.less less描述文件 63 | │ ├── index.mdx 文档和案例 64 | │ ├── resource.js  组件内容 65 | │ ├── resourceContext.js 组件内容 66 | │ └── resourceGroup.js 组件内容 67 | └── tag tag组件 68 | ├── index.js 入口文件 69 | └── index.mdx 文档和案例 70 | ``` 71 | 72 | ### 本地开发 73 | ``` 74 | $ git clone git@github.com:9-web/zet-component.git 75 | $ cd zet-component 76 | $ yarn bootstrap 77 | $ yarn dev 78 | ``` 79 | 80 | ### 命令操作 81 | * `yarn bootstrap` 安装项目依赖 82 | * `yarn dev` 启动开发环境 83 | * `yarn build` 构建组件产物 84 | * `yarn build:watch` 文件改变自动构建组件产物 85 | * `yarn build:doc` 构建组件文档产物 86 | * `yarn deploy:doc` 把文档产物发布到github pages上 87 | * `yarn publish` 发布组件到npm仓库上 88 | * `yarn deploy` 构建组件并并把组件发布到npm仓库上 -------------------------------------------------------------------------------- /docs/1-框架搭建.md: -------------------------------------------------------------------------------- 1 | ### react 组件库框架搭建 2 | 3 | #### 前言 4 | 公司业务积累了一定程度，需要搭建自己的组件库，有了组件库，整个团队开发效率会提高恨多。 5 | 做组件库需要提供开发调试环境，和组件文档的展示，调研了几个比较主流的方案，如下： 6 | * [docz](https://github.com/pedronauck/docz) 配置简单，功能相对来说也较完善。我们现在项目是用的umi框架，正好官方也提供了开发库的脚手架，也集成了docz，因此我们决定采用它来开发我们的组件库。 7 | * [storybook](https://github.com/storybooks/storybook) 功能比较全面，支持自定义webpack配置等特性 8 | * [docsifyjs](https://github.com/docsifyjs) 写文档比较友好，对vue支持比较好，react 用的不是特别多 9 | 10 | 11 | #### 组件库搭建 12 | 13 | * monorepo（多包仓库）  14 | 15 | 现在比较流行的是`monorepo`（多包仓库）,我们采用[lerna](https://github.com/lerna/lerna)框架去管理开发项目。lerna我认为最主要的功能给我们提供了包的版本管理，快速发布npm等。像鼎鼎大名的babel就是采用这种方式来管理。lerna 初始化项目大家可以看下官方文档，要注意它的两种模式 16 | * Fixed/Locked（锁定，固定模式） 默认初始化就是使用的这种方式。此方式包升级相对应的所有包都会升级成新版本 17 | * Independent (独立模式) 支持单独包的改动升级版本 18 | 19 | lerna 项目文件目录描述 20 | ``` 21 | ├── README.md 项目介绍 22 | ├── lerna.json lerna 配置文件 23 | ├── package.json 24 | ├── packages 包目录 25 | │ └── ***-component 具体包文件 26 | └── yarn.lock 27 | ``` 28 | 29 | 30 | * 创建componet组件库 31 | 32 | 我们在`packages` 文件目录下创建我们的组件库，可以起名为 `***-component`, 接下来就是初始化项目，可以用umi提供的脚手架去创建，根据文档创建即可。我们介绍下文件目录的用途 33 | 34 | * 框架目录 35 | 36 | ``` 37 | ├── bcomponents 存放我们的业务组件 38 | ├── components 存放基础组件 39 | │ ├── resource  资源组件 40 | │ └── tag 标签组件 41 | ├── index.js 入口文件 42 | ├── style 样式文件 43 | │ ├── index.js 44 | │ ├── index.less 入口样式 45 | │ ├── minxins less minxins 46 | │ └── themes 默认主题 47 | ├── utils 工具目录 48 | │ └── utils.js 工具类 49 | ``` 50 | 51 | * 组件目录 52 | 53 | ``` 54 | ├── resource resource组件文件夹 55 | │ ├── index.js 入口文件 56 | │ ├── index.less less描述文件 57 | │ ├── index.mdx 文档和案例 58 | │ ├── resource.js  组件内容 59 | │ ├── resourceContext.js 组件内容 60 | │ └── resourceGroup.js 组件内容 61 | └── tag tag组件 62 | ├── index.js 入口文件 63 | └── index.mdx 文档和案例 64 | ``` 65 | 66 | * 开发，打包，发布 67 | 68 | 我们介绍了框架目录，大家可以按约定去开发。由于 [umi-plugin-library](https://github.com/umijs/umi-plugin-library) 目前开发还不是完善，文档也不是很全。通过查看源码总结了一下命令，包含开发，打包，发布到github pages 上. 69 | 70 | * `yarn dev` 启动开发环境 71 | * `yarn build:doc` 构建文档 72 | * `yarn deploy:doc` 构建文档并发布到github pages 73 | * `yarn build` 构建组件产物 74 | 75 | #### 成果展示 76 | 77 | #### 结束语 78 | 我简单的介绍了组建搭建，搭建的过程中还有许多小细节需要我们注意。我把项目放到了github上，大家有兴趣可以去查看 79 | * [component](https://github.com/9-web/zet-component) 80 | * [组建文档](https://9-web.github.io/zet-component/#/) 81 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": [ 3 | "packages/*" 4 | ], 5 | "command": { 6 | "publish": { 7 | "ignoreChanges": [ 8 | ] 9 | }, 10 | "bootstrap": { 11 | "ignore": "component-*", 12 | "npmClientArgs": ["--no-package-lock"] 13 | } 14 | }, 15 | "version": "independent", 16 | "npmClient": "yarn" 17 | } 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "root", 3 | "private": true, 4 | "scripts": { 5 | "bootstrap": "lerna bootstrap", 6 | "btp": "cd packages/zet-component && yarn install", 7 | "dev": "cd packages/zet-component && npm run dev", 8 | "build": "cd packages/zet-component && npm run build", 9 | "build:watch": "cd packages/zet-component && npm run build:watch", 10 | "build:doc": "cd packages/zet-component && npm run build:doc", 11 | "deploy:doc": "cd packages/zet-component && npm run deploy:doc", 12 | "publish": "lerna publish", 13 | "deploy": "npm run build && npm run publish", 14 | "tslint": "cd packages/zet-component && npm run tslint" 15 | }, 16 | "lint-staged": { 17 | "*.{ts,tsx}": [ 18 | "tslint --fix", 19 | "git add" 20 | ] 21 | }, 22 | "husky": { 23 | "hooks": { 24 | "pre-commit": "lint-staged" 25 | } 26 | }, 27 | "devDependencies": { 28 | "husky": "^1.3.1", 29 | "lerna": "^3.9.0", 30 | "lint-staged": "^8.1.5", 31 | "tslint": "^5.14.0", 32 | "typescript": "^3.4.5" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/zet-component/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /.docz 5 | /node_modules 6 | .rpt2_cache 7 | .idea/* 8 | *.tsx/*.js 9 | *.tsx/*.js.map 10 | 11 | -------------------------------------------------------------------------------- /packages/zet-component/.umirc.library.js: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | 3 | export default { 4 | entry: 'src/index.tsx', 5 | esm: 'rollup', 6 | cjs: 'rollup', 7 | // cssModules: false, 8 | doc: { 9 | base: '/zet-component', 10 | title: 'Zet Component', 11 | description: 'Zet Component UI library for React', 12 | wrapper: 'src/wrapper.js', 13 | files: "(docs||src)/**/*.mdx", 14 | typescript: true, 15 | // propsParser: false, 16 | // dest: '/dist', 17 | repository: 'https://github.com/9-web/zet-component', 18 | hashRouter: true, 19 | themeConfig: { 20 | repository: 'https://github.com/9-web/zet-component', 21 | colors: { 22 | primary: '#bd4932', 23 | link: '#bd4932', 24 | }, 25 | logo: { 26 | src: 27 | 'http://www.zetyun.com/img/icon/logo.svg', 28 | width: 200, 29 | }, 30 | }, 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/zet-component/README.md: -------------------------------------------------------------------------------- 1 | 2 | ### zet-component 3 | > 提供zet组件，在`antd`基础上做了一层封装,包含基础组件(components)和业务组件(bcomponents) 4 | 5 | 6 | ### 特性 7 | 1. 按需加载 8 | 2. 支持国际化 9 | 10 | 11 | ### 安装 12 | > `yarn`和`npm`都可以安装依赖，建议用一种方式，不要混装 13 | ``` 14 | (yarn || npm) install zet-component 15 | ``` 16 | 17 | ### 示例 18 | ``` 19 | import { Resource } from 'zet-component'; 20 | ReactDOM.render(); 21 | ``` 22 | 23 | ### 项目结构 24 | 25 | ##### 框架目录 26 | 27 | ``` 28 | ├── bcomponents 存放我们的业务组件 29 | ├── components 存放基础组件 30 | │ ├── resource  资源组件 31 | │ └── tag 标签组件 32 | ├── index.js 入口文件 33 | ├── style 样式文件 34 | │ ├── index.js 35 | │ ├── index.less 入口样式 36 | │ ├── minxins less minxins 37 | │ └── themes 默认主题 38 | ├── utils 工具目录 39 | │ └── utils.js 工具类 40 | ``` 41 | 42 | ##### 组件目录 43 | 44 | ``` 45 | ├── resource resource组件文件夹 46 | │ ├── index.js 入口文件 47 | │ ├── index.less less描述文件 48 | │ ├── index.mdx 文档和案例 49 | │ ├── resource.js  组件内容 50 | │ ├── resourceContext.js 组件内容 51 | │ └── resourceGroup.js 组件内容 52 | └── tag tag组件 53 | ├── index.js 入口文件 54 | └── index.mdx 文档和案例 55 | ``` 56 | 57 | ### 命令操作 58 | * `yarn dev` 启动开发环境 59 | * `yarn build:doc` 构建文档 60 | * `yarn deploy:doc` 构建文档并发布到github pages 61 | * `yarn build` 构建组件产物 62 | * `yarn build:watch` 文件改变自动构建组件产物 63 | -------------------------------------------------------------------------------- /packages/zet-component/docs/cmtStandard.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: 组件规范 3 | route: /standard 4 | order: 90 5 | --- 6 | 7 | # 组件开发规范 8 | 9 | 10 | ## less规范 11 | * less中用用`-`去分隔，不用驼峰方式去做，如`zet-resource` 12 | * 在组件中可以用css modules方式去引用样式 13 | 14 | ### less 命名规范前缀 15 | * automl ==> aml 16 | 17 | 18 | 19 | 20 | ## 组件属性 21 | 22 | -------------------------------------------------------------------------------- /packages/zet-component/docs/faq.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: FAQ 3 | route: /link 4 | order: 0 5 | sidebar: true 6 | --- 7 | 8 | ## yarn link 步骤 9 | 10 | * 在`zet-componet`项目里执行`yarn link` 11 | * 在`compass`项目里执行`yarn link zet-componet` 12 | 13 | 注意：需要用link的时候要删除package.json的依赖，如：`yarn remove zet-componet`，要不会引发更改不生效。 14 | 15 | 16 | -------------------------------------------------------------------------------- /packages/zet-component/docs/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: 介绍 3 | route: / 4 | order: 100 5 | sidebar: true 6 | --- 7 | 8 | # zet-component 9 | > 提供zet组件，在`antd`基础上做了一层封装,包含基础组件(components)和业务组件(bcomponents) 10 | 11 | 12 | ## 特性 13 | * 按需加载 14 | * 支持国际化 15 | * 支持typescript 16 | 17 | 18 | 19 | ## 文档 20 | [首页](https://9-web.github.io/zet-component/#/) 21 | 22 | [umi-plugin-library](https://umijs.github.io/umi-plugin-library/#/) 23 | 24 | ## 依赖 25 | 26 | [react-powerplug](https://github.com/renatorib/react-powerplug) (提供了可插拔无渲染组件) 27 | 28 | [docz](https://github.com/pedronauck/docz) (书写文档和React组件预览工具) 29 | 30 | [umi-plugin-library](https://github.com/umijs/umi-plugin-library) (基于umi组件库开发工具，为组件开发提供全套方案，专注库开发) 31 | 32 | [lerna](https://github.com/lerna/lerna) (monorepo 管理工具) 33 | 34 | 35 | ## 项目结构 36 | 37 | ##### lerna monorepo 38 | ``` 39 | ├── README.md 项目介绍 40 | ├── lerna.json lerna 配置文件 41 | ├── package.json 42 | ├── packages 包目录 43 | │ └── ***-component 具体包文件 44 | └── yarn.lock 45 | ``` 46 | 47 | ##### 框架目录 48 | 49 | ``` 50 | ├── bcomponents 存放我们的业务组件 51 | ├── components 存放基础组件 52 | │ ├── resource  资源组件 53 | │ └── tag 标签组件 54 | ├── index.js 入口文件 55 | ├── style 样式文件 56 | │ ├── index.js 57 | │ ├── index.less 入口样式 58 | │ ├── minxins less minxins 59 | │ └── themes 默认主题 60 | ├── utils 工具目录 61 | │ └── utils.js 工具类 62 | ``` 63 | 64 | ##### 组件目录 65 | 66 | ``` 67 | ├── resource resource组件文件夹 68 | │ ├── index.js 入口文件 69 | │ ├── index.less less描述文件 70 | │ ├── index.mdx 文档和案例 71 | │ ├── resource.js  组件内容 72 | │ ├── resourceContext.js 组件内容 73 | │ └── resourceGroup.js 组件内容 74 | └── tag tag组件 75 | ├── index.js 入口文件 76 | └── index.mdx 文档和案例 77 | ``` 78 | -------------------------------------------------------------------------------- /packages/zet-component/docs/quickstart.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: 快速开始 3 | route: /quickstart 4 | order: 99 5 | sidebar: true 6 | --- 7 | 8 | # 快速开始 9 | 10 | ## 安装 11 | `yarn`和`npm`都可以安装依赖，建议用一种方式，不要混装 12 | ``` 13 | (yarn || npm) install zet-component 14 | ``` 15 | 16 | ## 示例 17 | ``` 18 | import { Resource } from 'zet-component'; 19 | ReactDOM.render(); 20 | ``` 21 | 22 | ## 本地开发 23 | ``` 24 | $ git clone git@github.com:9-web/zet-component.git 25 | $ cd zet-component 26 | $ yarn bootstrap 27 | $ yarn dev 28 | ``` 29 | 30 | ## 命令操作 31 | * `yarn bootstrap` 安装项目依赖 32 | * `yarn dev` 启动开发环境 33 | * `yarn build` 构建组件产物 34 | * `yarn build:watch` 文件改变自动构建组件产物 35 | * `yarn build:doc` 构建组件文档产物 36 | * `yarn deploy:doc` 把文档产物发布到github pages上 37 | * `yarn publish` 发布组件到npm仓库上 38 | * `yarn deploy` 构建组件并并把组件发布到npm仓库上 39 | -------------------------------------------------------------------------------- /packages/zet-component/docs/scaffold.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: 脚手架 3 | route: /sacffold 4 | order: 98 5 | sidebar: true 6 | --- 7 | 8 | # Create zet 脚手架 9 | zet-component 通过 [create-zet](https://github.com/9-web/create-zet) 提供脚手架能力，包含： 10 | * zc doc 快速生成文档模板 11 | 12 | ## 安装 13 | ``` 14 | (yarn || npm) install create-zet -g 15 | ``` 16 | 17 | ## 使用 18 | * `cz doc -n Component -f index.mdx --d /usr/bin --m resource` 19 | 20 | 21 | ## 参数 22 | * -n, --name 组件名称,默认值Component 23 | * -m, --menu 文档菜单,默认值Other 24 | * -f, --file 文件名称,默认值index.mdx 25 | * -d, --dir 文件目录地址,默认值当前运行环境目录 26 | * -h, --help 帮助信息 27 | -------------------------------------------------------------------------------- /packages/zet-component/docs/tsGuide.md: -------------------------------------------------------------------------------- 1 | # typescript 2 | 3 | 4 | 5 | ## vscode 插件 6 | * [Typescript React code snippets](https://marketplace.visualstudio.com/items?itemName=infeng.vscode-react-typescript) 7 | -------------------------------------------------------------------------------- /packages/zet-component/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "zet-component", 3 | "version": "0.1.16", 4 | "description": "zet-ui", 5 | "main": "dist/zet-ui.js", 6 | "module": "dist/index.esm.js", 7 | "authors": { 8 | "name": "wangqj", 9 | "email": "qiaojienet@163.com" 10 | }, 11 | "repository": "https://github.com/9-web/zet-component", 12 | "scripts": { 13 | "dev": "umi-lib doc dev", 14 | "build:doc": "umi-lib doc build", 15 | "deploy:doc": "npm run build:doc && umi-lib doc deploy", 16 | "build": "umi-lib build", 17 | "build:watch": "umi-lib build --watch", 18 | "tslint": "./node_modules/.bin/tslint -c tslint.json 'src/**/*.{ts,tsx}'" 19 | }, 20 | "devDependencies": { 21 | "@types/classnames": "^2.2.7", 22 | "antd": "^3.13.0", 23 | "docz": "^0.13.7", 24 | "prop-types": "^15.7.2", 25 | "react-powerplug": "^1.0.0", 26 | "tslint": "^5.14.0", 27 | "tslint-react": "^3.6.0", 28 | "typescript": "^3.4.5", 29 | "typescript-tslint-plugin": "^0.3.1", 30 | "umi-library": "1.3.0" 31 | }, 32 | "typings": "dist/index.d.ts", 33 | "license": "MIT", 34 | "peerDependencies": { 35 | "antd": "^3.13.0", 36 | "prop-types": "^15.7.2", 37 | "react": ">=16.0.0", 38 | "react-dom": ">=16.0.0" 39 | }, 40 | "dependencies": { 41 | "@antv/data-set": "^0.10.2", 42 | "bizcharts": "^3.4.3", 43 | "bizcharts-plugin-slider": "^2.1.1-beta.1", 44 | "classnames": "^2.2.6", 45 | "docz-theme-default": "^0.13.7", 46 | "moment": "^2.24.0" 47 | }, 48 | "gitHead": "930b80939af50246307f29ccb1b4b7a0c44348e1" 49 | } 50 | -------------------------------------------------------------------------------- /packages/zet-component/src/assets/trophy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/9-web/zet-component/52993b0e5cef18cf83acabd4a1388f3b628059cf/packages/zet-component/src/assets/trophy.png -------------------------------------------------------------------------------- /packages/zet-component/src/automl/achievement/_mock/example.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Spin, Icon } from 'antd'; 3 | import styles from './index.less' 4 | export function Example1(props){ 5 | const {style} = props; 6 | return ( 7 |
8 | 9 |
10 | ) 11 | } 12 | 13 | 14 | export function Example2(props){ 15 | const {style} = props; 16 | return ( 17 |
18 | } > 19 |
20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/achievement/_mock/index.less: -------------------------------------------------------------------------------- 1 | .example { 2 | text-align: center; 3 | background: rgba(0,0,0,0.05); 4 | border-radius: 4px; 5 | padding: 30px 50px; 6 | height:100%; 7 | display: flex; 8 | align-items:center; 9 | justify-content: center; 10 | } 11 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/achievement/achievement.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import classNames from "classnames"; 3 | import { Icon } from "antd"; 4 | import Panel from "./panel"; 5 | import { AchieveContext } from "./context"; 6 | import LocaleReceiver from "../../components/locale-provider/localeReceiver"; 7 | 8 | import "./index.less"; 9 | 10 | interface AchievementProps { 11 | /** 组件行行内样式 */ 12 | style?: React.CSSProperties; 13 | /** 自定义类名 */ 14 | className?: string; 15 | /** 宽度 */ 16 | width?: string | number; 17 | /** 高度 */ 18 | height?: string | number; 19 | /** title 样式扩展 */ 20 | headStyle?: React.CSSProperties; 21 | /** 标题 */ 22 | title: string; 23 | /** 收缩 展开按钮 默认为true 不需要显示是 需设置 extra={false} */ 24 | extra?: boolean; 25 | /** 扩展操作的key all：ß全部 */ 26 | extraKeys?: string | string[]; 27 | /** 资源改变触发的回调 */ 28 | onChange?: (option: string, state: object) => void; 29 | 30 | chartIcon?: any; 31 | tableIcon?: any; 32 | } 33 | 34 | interface AchievementState { 35 | /** 展开 关闭操作 open：展开 closed：关闭*/ 36 | unfoldState: string; 37 | /** 旋转按钮 rotateRightLeft: 从右向左 rotateLeftRight：从左向右*/ 38 | rotateState: string; 39 | /** 图形展示 chart: 图形 table: 表格*/ 40 | type: string; 41 | } 42 | 43 | class Achievement extends React.Component { 44 | static Panel: typeof Panel; 45 | static defaultProps = { 46 | extra: true, 47 | extraKeys: "all", 48 | }; 49 | constructor(props: AchievementProps) { 50 | super(props); 51 | this.state = { 52 | unfoldState: "open", 53 | rotateState: "", 54 | type: "chart", 55 | }; 56 | } 57 | unfoldPanel = () => { 58 | const { unfoldState } = this.state; 59 | const { onChange } = this.props; 60 | const currentUnfoldState = unfoldState === "open" ? "closed" : "open"; 61 | this.setState( 62 | { 63 | unfoldState: currentUnfoldState, 64 | }, 65 | () => { 66 | onChange("unfold", { ...this.state }); 67 | }, 68 | ); 69 | } 70 | chartHandle = (e, type) => { 71 | e.stopPropagation(); 72 | if (!type) { 73 | return; 74 | } 75 | const { onChange } = this.props; 76 | this.setState( 77 | { 78 | rotateState: type === "chart" ? "rotateLeftRight" : "rotateRightLeft", 79 | type, 80 | }, 81 | () => { 82 | onChange("rotate", { ...this.state }); 83 | }, 84 | ); 85 | } 86 | render() { 87 | const { 88 | style, 89 | className, 90 | headStyle, 91 | title, 92 | width, 93 | height, 94 | children, 95 | extra, 96 | chartIcon, 97 | tableIcon, 98 | } = this.props; 99 | const styleProps = { width, height, ...style }; 100 | const { unfoldState, rotateState, type } = this.state; 101 | const cNames = classNames("zet-achievement", className); 102 | const ChartIcon = chartIcon || ; 103 | const TableIcon = tableIcon || ; 104 | return ( 105 | 111 |
112 |
113 | {title} 114 | { 117 | this.chartHandle(e, ""); 118 | }} 119 | > 120 | { 124 | this.chartHandle(e, "chart"); 125 | }} 126 | > 127 | {ChartIcon} 128 | 129 | { 133 | this.chartHandle(e, "table"); 134 | }} 135 | > 136 | {TableIcon} 137 | 138 | 139 | 140 | {extra !== false && ( 141 | 145 | 146 | {(locale: any) => ( 147 | 148 | {unfoldState === "open" ? locale.shrink : locale.unfold} 149 | 150 | )} 151 | 152 | 153 | )} 154 |
155 |
156 | {React.Children.map(children, (item) => { 157 | return item; 158 | })} 159 |
160 |
161 | 162 | ); 163 | } 164 | } 165 | 166 | export default Achievement; 167 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/achievement/context.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface AchievementContextState { 4 | unfoldState: string; 5 | extraKeys: any; 6 | } 7 | export const AchieveContext = React.createContext({ 8 | unfoldState: "open", 9 | extraKeys: "all", 10 | }); 11 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/achievement/index.less: -------------------------------------------------------------------------------- 1 | @import '../../style/minxins/index.less'; 2 | @import '../../style/index.less'; 3 | 4 | @panel-prefix-cls: ~'@{zet-prefix}-panel'; 5 | @panel-prefix-clsg: ~'@{zet-prefix}-achievement'; 6 | 7 | .@{panel-prefix-cls}{ 8 | background-color: #fff; 9 | font-size:14px; 10 | transition: all 0.3s; 11 | overflow: auto; 12 | } 13 | .@{panel-prefix-clsg}{ 14 | font-size:14px; 15 | height:100%; 16 | .zet-panel{ 17 | margin-bottom:20px; 18 | } 19 | .zet-panel:first-child{ 20 | overflow: hidden; 21 | } 22 | .zet-panel:last-child{ 23 | margin-bottom:0px !important; 24 | } 25 | &-title{ 26 | background-color: #fff; 27 | height:50px; 28 | line-height: 30px; 29 | padding:10px 30px; 30 | border-bottom: 1px solid rgba(0,0,0,.1); 31 | 32 | &-name{ 33 | font-size: 18px; 34 | font-weight: 200; 35 | float:left; 36 | cursor:pointer; 37 | } 38 | &-chart{ 39 | margin-left:30px; 40 | margin-right:10px; 41 | font-size: 18px; 42 | cursor:pointer; 43 | } 44 | &-table{ 45 | margin-left:10px; 46 | margin-right:20px; 47 | font-size: 18px; 48 | cursor:pointer; 49 | } 50 | &-checked{ 51 | //background-color: gray; 52 | } 53 | &-extra{ 54 | float:right; 55 | cursor:pointer; 56 | } 57 | } 58 | &-content{ 59 | display: flex; 60 | flex-direction: column; 61 | height:calc(~'100%' - 50px) 62 | } 63 | } 64 | 65 | 66 | @keyframes leftRight 67 | { 68 | 0% {-webkit-transform:rotateY(0deg);} 69 | 50% {-webkit-transform:rotateY(90deg);} 70 | 100% {-webkit-transform:rotateY(0deg);} 71 | } 72 | 73 | @keyframes rightLeft 74 | { 75 | 0% {-webkit-transform:rotateY(0deg);} 76 | 50% {-webkit-transform:rotateY(90deg);} 77 | 100% {-webkit-transform:rotateY(0deg);} 78 | } 79 | 80 | .rotateLeftRight{ 81 | -webkit-transform:translate3d(0,0,0); 82 | -moz-transform:translate3d(0,0,0); 83 | transform:translate3d(0,0,0); 84 | -webkit-animation:leftRight 0.3s linear; 85 | -moz-animation:leftRight 0.3s linear; 86 | animation:leftRight 0.3s linear; 87 | } 88 | 89 | .rotateRightLeft{ 90 | -webkit-transform:translate3d(0,0,0); 91 | -moz-transform:translate3d(0,0,0); 92 | transform:translate3d(0,0,0); 93 | -webkit-animation:rightLeft 0.3s linear; 94 | -moz-animation:rightLeft 0.3s linear; 95 | animation:rightLeft 0.3s linear; 96 | } 97 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/achievement/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Achievement (模型成果) 3 | menu: AutoML 4 | order: 70 5 | --- 6 | 7 | import { Playground, PropsTable } from 'docz'; 8 | import { State, Toggle } from 'react-powerplug'; 9 | import { Example1, Example2 } from './_mock/example' 10 | import { AutoML } from '../../index.tsx'; 11 | const Achievement = AutoML.Achievement; 12 | 13 | # Achievement (模型成果) 14 | 15 | 引入组件 16 | ``` 17 | import { AutoML } from 'zet-component'; 18 | ``` 19 | 20 | 21 | ## Basic usage 22 | 23 | 24 | 25 | {({ state, setState }) => { 26 | const { Achievement } = AutoML; 27 | const { Panel } = Achievement; 28 | const changeHandle = (option, record)=>{ 29 | if(option=='rotate'){ 30 | setState({ 31 | show:record.type 32 | }) 33 | } 34 | } 35 | const {show} = state; 36 | return 37 | {show=='chart' ? : } 38 | {show=='chart' ? : } 39 | 40 | }} 41 | 42 | 43 | 44 | ## 配置 展开/收缩 项 45 | 46 | 47 | 48 | {({ state, setState }) => { 49 | const { Achievement } = AutoML; 50 | const { Panel } = Achievement; 51 | const changeHandle = (option, record)=>{ 52 | if(option=='rotate'){ 53 | setState({ 54 | show:record.type 55 | }) 56 | } 57 | } 58 | const {show} = state; 59 | return 60 | {show=='chart' ? : } 61 | {show=='chart' ? : } 62 | 63 | }} 64 | 65 | 66 | 67 | ## 取消 展开/收缩 按钮 68 | 69 | 70 | 71 | {({ state, setState }) => { 72 | const { Achievement } = AutoML; 73 | const { Panel } = Achievement; 74 | const changeHandle = (option, record)=>{ 75 | if(option=='rotate'){ 76 | setState({ 77 | show:record.type 78 | }) 79 | } 80 | } 81 | const {show} = state; 82 | return 83 | {show=='chart' ? : } 84 | {show=='chart' ? : } 85 | 86 | }} 87 | 88 | 89 | 90 | ## 单个 91 | 92 | 93 | 94 | {({ state, setState }) => { 95 | const { Achievement } = AutoML; 96 | const { Panel } = Achievement; 97 | const changeHandle = (option, record)=>{ 98 | if(option=='rotate'){ 99 | setState({ 100 | show:record.type 101 | }) 102 | } 103 | } 104 | const {show} = state; 105 | return 106 | {show=='chart' ? : } 107 | 108 | }} 109 | 110 | 111 | 112 | 113 | ## API 114 | 115 | ### Achievement 116 | 117 | 118 | ### Panel 119 | 120 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/achievement/index.tsx: -------------------------------------------------------------------------------- 1 | import Panel from "./panel"; 2 | import Achievement from "./achievement"; 3 | 4 | Achievement.Panel = Panel; 5 | export default Achievement; 6 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/achievement/panel.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import PropTypes from "prop-types"; 3 | import { AchieveContext } from "./context"; 4 | 5 | import "./index.less"; 6 | 7 | export interface PanelProps { 8 | /** 组件行行内样式 */ 9 | style?: React.CSSProperties; 10 | /** panel 选项 panelGroup 操作子项是使用 */ 11 | option?: string; 12 | /** 宽度 */ 13 | width?: string | number; 14 | /** 是否在高度上自适应*/ 15 | flex?: boolean; 16 | /** 高度 */ 17 | height?: string | number; 18 | unfoldState: string; 19 | extraKeys: any; 20 | } 21 | class Panel extends React.Component { 22 | static defaultProps = { 23 | width: "100%", 24 | onChange: () => {}, 25 | }; 26 | static contextTypes = { 27 | unfoldState: PropTypes.string, 28 | extraKeys: PropTypes.any, 29 | }; 30 | constructor(props: PanelProps) { 31 | super(props); 32 | this.state = {}; 33 | } 34 | getPanelUnfoldCondition = (unfoldState, extraKeys) => { 35 | const { option } = this.props; 36 | if (extraKeys === "all" || extraKeys.indexOf(option) > -1) { 37 | return unfoldState === "open"; 38 | } else { 39 | return true; 40 | } 41 | } 42 | 43 | render() { 44 | const { 45 | style, 46 | width, 47 | height, 48 | children, 49 | unfoldState, 50 | extraKeys, 51 | ...otherProps 52 | } = this.props; 53 | const styleProps = { width, height, ...style }; 54 | if (this.props.flex) { 55 | styleProps.flex = 1; 56 | } 57 | if (!this.getPanelUnfoldCondition(unfoldState, extraKeys)) { 58 | styleProps.height = 0; 59 | delete styleProps.flex; 60 | } 61 | return ( 62 |
63 | {children} 64 |
65 | ); 66 | } 67 | } 68 | 69 | export default (props) => ( 70 | 71 | {({ unfoldState, extraKeys }) => { 72 | return ; 73 | }} 74 | 75 | ); 76 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/algorithm/_mock/condition.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | id: '1', 3 | name: '特征抽样策略', 4 | desc: '特征抽样策略特征抽样策略特征抽样策略f', 5 | params: [ 6 | // { 7 | // key: 'tree', 8 | // name: '树的个数', 9 | // type: 'tag-input', 10 | // default: [10], 11 | // extra: '树的数量' 12 | // }, 13 | { 14 | key: 'max_features', 15 | name: '特征抽象策略', 16 | type: 'select', 17 | data: [ 18 | { 19 | name: 'one', 20 | value: 'one', 21 | }, 22 | { 23 | name: 'two', 24 | value: 'two', 25 | }, 26 | { 27 | name: 'three', 28 | value: 'max_features##array', 29 | }, 30 | { 31 | name: 'four', 32 | value: 'max_features##number', 33 | }, 34 | { 35 | name: 'five', 36 | value: 'five', 37 | } 38 | ], 39 | default: 'max_features##array', 40 | }, { 41 | key: 'max_features##array', 42 | name: 'three_detail', 43 | type: 'tag-input', 44 | default: [12, 12, 12], 45 | }, { 46 | key: 'max_features##number', 47 | name: 'number_detail', 48 | type: 'input-number', 49 | default: 1., 50 | }, { 51 | key: 'diff', 52 | name: 'aaaaaaaa', 53 | type: 'input-number', 54 | default: 0, 55 | condition: 'max_features$$five' 56 | }, { 57 | key: 'diff2', 58 | name: 'aaaaaaaa', 59 | type: 'input-number', 60 | default: 0.1224, 61 | condition: 'max_features$$five' 62 | }, 63 | { 64 | key: 'randomState', 65 | name: 'randomState', 66 | type: 'select', 67 | data: [ 68 | { name: '随机', value: 'none' }, 69 | { name: '自定义', value: 'randomState##number' }, 70 | ], 71 | default: 'none', 72 | }, 73 | { 74 | key: 'randomState##number', 75 | name: 'randomStateNumber', 76 | min: 0, 77 | // max: 1.0, 78 | type: 'input-number', 79 | default: 0.1, 80 | }, 81 | ] 82 | }] 83 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/algorithm/_mock/dataItem.js: -------------------------------------------------------------------------------- 1 | 2 | export const item = { 3 | id: '1', 4 | name: '特征抽样策略', 5 | desc: '特征抽样策略特征抽样策略特征抽样策略f', 6 | params: [ 7 | { 8 | key: 'tree', 9 | name: '树的个数', 10 | type: 'tag-input', 11 | default: [10], 12 | extra: '树的数量' 13 | }, { 14 | key: 'max_features', 15 | name: '特征抽象策略', 16 | type: 'select', 17 | data: [ 18 | { 19 | name: 'one', 20 | value: 'one', 21 | }, 22 | { 23 | name: 'two', 24 | value: 'two', 25 | }, 26 | { 27 | name: 'three', 28 | value: 'max_features##array', 29 | }, 30 | { 31 | name: 'four', 32 | value: 'max_features##number', 33 | }, 34 | { 35 | name: 'five', 36 | value: 'five', 37 | } 38 | ], 39 | default: 'max_features##array', 40 | }, { 41 | key: 'max_features##array', 42 | name: 'three_detail', 43 | type: 'tag-input', 44 | default: [23, 232, 23], 45 | }, { 46 | key: 'max_features##number', 47 | name: 'number_detail', 48 | type: 'inputnumber', 49 | default: 0.4, 50 | }, { 51 | key: 'diff', 52 | name: 'aaaaaaaa', 53 | type: 'inputnumber', 54 | default: 0.14, 55 | condition: 'max_features$$five' 56 | }, { 57 | key: 'diff2', 58 | name: 'aaaaaaaa', 59 | type: 'inputnumber', 60 | default: 0.1224, 61 | condition: 'max_features$$five' 62 | } 63 | ] 64 | } 65 | 66 | export const value = { 67 | id: '1', 68 | name: '特征抽样策略', 69 | params: { 70 | tree: [1,2,3,4,5,6], 71 | // max_features: 'five', 72 | max_features: [1,2,3], 73 | // diff2: '232' 74 | } 75 | } 76 | 77 | // 两种情况 78 | // 1. 下拉框需要其它输入框的数据 79 | // 2. 下拉框控制其它输入框显示影藏 80 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/algorithm/_mock/list.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | id: 'd1010bce-2050-4beb-855b-d9ebcae81598', 4 | name: 'VGG19', 5 | desc: 'VGG19', 6 | params: [{ 7 | key: 'norm_size', 8 | name: 'norm_size4', 9 | extra: 'norm_size4', 10 | min: 48, 11 | max: 224, 12 | type: 'input-number', 13 | default: 48, 14 | }] 15 | }, { 16 | id: 'component-item', 17 | name: 'component-item', 18 | desc: 'component-item', 19 | params: [{ 20 | key: 'radioGroup', 21 | name: 'radioGroup', 22 | type: 'radio-group', 23 | extra: "radio-group", 24 | data: [{ 25 | name: 'A', 26 | value: 1, 27 | }, { 28 | name: 'B', 29 | value: 2, 30 | }, { 31 | name: 'C', 32 | value: 3, 33 | }], 34 | default: 1, 35 | }, 36 | { 37 | key: 'checkboxGroup', 38 | name: 'checkboxGroup', 39 | type: 'checkbox-group', 40 | extra: "checkbox-group", 41 | data: [{ 42 | name: 'A', 43 | value: 1, 44 | }, { 45 | name: 'B', 46 | value: 2, 47 | }, { 48 | name: 'C', 49 | value: 3, 50 | }], 51 | default: [1], 52 | }, 53 | { 54 | key: 'timeSelect', 55 | name: 'timeSelect', 56 | type: 'time-select', 57 | extra: "time-select", 58 | data: { 59 | seconds: { 60 | key: 'seconds', 61 | selectData: [1, 5, 10, 20, 30], 62 | displayUnit: '秒', 63 | }, 64 | minutes: { 65 | key: 'minutes', 66 | selectData: [1, 5, 10, 20, 30], 67 | displayUnit: '分钟', 68 | }, 69 | hours: { 70 | key: 'hours', 71 | selectData: [1, 2, 4, 8, 12, 18], 72 | displayUnit: '小时', 73 | }, 74 | }, 75 | default: 180, 76 | }] 77 | } 78 | ]; 79 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/algorithm/_mock/params.json: -------------------------------------------------------------------------------- 1 | {"algorithms":[{"id":"99bbf190-a77d-65f7-2c3c-2d4372730695","name":"随机森林","params":{"max_features":"Null","max_depth":[10],"n_jobs":1,"n_estimators":[10],"min_samples_leaf":[1]}},{"id":"001772bd-ca6b-0f95-4d4a-18f1f99be48f","name":"梯度渐进树","params":{"loss":"deviance","max_features":"Null","max_depth":[3],"n_estimators":[10],"learning_rate":[0.1]}},{"id":"4a7f39fe-4557-cc25-36b5-e75a17d7307f","name":"XGBoost","params":{"reg_lambda":[1],"colsample_bytree":[1],"max_depth":[6],"n_jobs":-1,"missing":0,"n_estimators":[10],"reg_alpha":[0],"subsample":[1],"learning_rate":[0.1],"gamma":[0],"min_child_weight":[1]}},{"id":"adc7d29b-fc07-0607-824c-5a44eb4ed5c6","name":"决策树（Decision Tree）","params":{"splitter":"best","max_depth":[10],"min_samples_leaf":[1]}}],"splitSet":{"spliting":{"testRatio":0.2,"randomSeed":1377,"split":"RANDOM","kFoldCrossTest":false},"sampling":{"method":"RANDOMRECORDS","recordsNum":10000},"policy":"SPLITDATASET"},"target":{"predictType":"MULTICLASSIFY","execMode":"STANDALONE","targetCol":"age"},"resources":{"algorithms":{"mem":1024,"cpu":1},"feature":{"mem":1024,"cpu":1},"metrics":{"mem":1024,"cpu":1}},"metrics":{"evaluationMetric":"accuracy"},"hyperparams":{"mode":"KFOLD","nJobs":1,"nIter":10,"nFolds":5,"randomized":true,"timeout":5},"featuresHandling":[{"cols":["job","marital","education","default","housing","loan","contact","month","poutcome","y"],"variableType":"Categorical","data":{"missValues#impute":"MostFrequent","handling":"OneHot","missValues#handling":"Impute"}},{"cols":["balance","day","duration","campaign","pdays","previous"],"variableType":"Numerical","data":{"missValues#impute":"Mean","handling":"RegularNumerical","handling#rescaling":"StandardRescale","missValues#handling":"Impute"}}],"rejectCols":[]} 2 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/algorithm/index.less: -------------------------------------------------------------------------------- 1 | @import '../../style/minxins/index.less'; 2 | @import '../../style/index.less'; 3 | 4 | 5 | .alg-layout { 6 | height: 100%; 7 | background-color: #fff; 8 | } 9 | 10 | .alg-content{ 11 | position: relative; 12 | height: 100%; 13 | font-size: 14px; 14 | padding: 24px; 15 | background-color: #fff; 16 | overflow-y: auto; 17 | } 18 | 19 | .alg-list { 20 | width: 100%; 21 | box-sizing: border-box; 22 | height: 100%; 23 | 24 | .alg-item { 25 | font-size: 14px!important; 26 | height: 54px!important; 27 | margin: 0!important; 28 | line-height: 54px!important; 29 | padding: 0 24px !important; 30 | color: #777!important; 31 | &:hover { 32 | background: #ebecf1; 33 | color: #444; 34 | } 35 | } 36 | 37 | .alg-right { 38 | float: right; 39 | margin-top: 17px; 40 | } 41 | } 42 | 43 | 44 | .alg-info { 45 | background: #fafafa; 46 | border-radius: 2px; 47 | padding: 24px 40px; 48 | margin-bottom: 24px; 49 | 50 | .alg-title { 51 | font-size: 18px; 52 | line-height: 24px; 53 | color: rgba(16, 38, 58, 0.85); 54 | margin-bottom: 16px; 55 | } 56 | 57 | .alg-desc { 58 | color: rgba(16, 38, 58, 0.65); 59 | font-size: 14px; 60 | line-height: 22px; 61 | margin-bottom: 10px; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/algorithm/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Alogrithm(算法) 3 | menu: AutoML 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz'; 7 | import { State, Toggle } from 'react-powerplug'; 8 | import { Button } from 'antd'; 9 | import { AutoML, LocaleProvider } from '../../index.tsx'; 10 | import { item, value } from './_mock/dataItem.js'; 11 | import list from './_mock/list.js'; 12 | import conditionList from './_mock/condition.js'; 13 | 14 | # Alogrithm 15 | 16 | ## 使用 17 | Alogrithm 18 | 19 | 20 | ## 参数模板 21 | 22 | ### 组件输出接口数据 23 | ``` 24 | [ 25 | { 26 | id: 'd1010bce-2050-4beb-855b-d9ebcae81598', 27 | name: 'VGG19', 28 | desc: 'VGG19', 29 | params: [{ 30 | key: 'norm_size', 31 | name: 'norm_size4', 32 | extra: 'norm_size4', 33 | min: 48, 34 | max: 224, 35 | type: 'input-number', 36 | default: 48, 37 | }] 38 | } 39 | ] 40 | ``` 41 | 42 | ## 案例介绍 43 | 44 | 45 | {({ state, setState }) => ( 46 | 47 | 48 | 49 | 50 | 51 | (setState({ value }))} /> 52 | {/* (setState({ value }))} /> */} 53 | 54 | change value: {JSON.stringify(state.value)} 55 | 56 | 57 | 58 | 59 | )} 60 | 61 | 62 | 63 | 64 | ### condition(条件配置) 65 | 66 | 67 | {({ state, setState }) => ( 68 | 69 | 70 | 71 | 72 | (setState({ value }))} /> 73 | {/* (setState({ value }))} /> */} 74 | 75 | change value: {JSON.stringify(state.value)} 76 | 77 | 78 | 79 | 80 | )} 81 | 82 | 83 | 84 | 85 | ## API 86 | 87 | 88 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/algorithm/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ValueItemSchema, DataItemSchema } from './interface'; 3 | import { Layout, Slider } from 'antd'; 4 | import Item from './item'; 5 | import List from './list'; 6 | import './index.less'; 7 | 8 | const { Sider, Content } = Layout; 9 | 10 | function handleData(props) { 11 | const {data, value} = props; 12 | data.forEach((fh) => { 13 | fh.checked = value.some((sm) => sm.id === fh.id); 14 | }); 15 | return data; 16 | } 17 | 18 | export interface AlgorithmProps { 19 | /** 算法配置列表 */ 20 | data: any[]; 21 | /** 算法组件value */ 22 | value?: ValueItemSchema[]; 23 | /** 当前内容是否禁用 */ 24 | disabled: boolean; 25 | /** 数据内容发生变化回调 */ 26 | onChange?: (value: ValueItemSchema[]) => void; 27 | } 28 | 29 | export interface AlgorithmState { 30 | /** 算法配置列表 */ 31 | singleData?: DataItemSchema; 32 | /** 算法组件value */ 33 | singleValue?: ValueItemSchema; 34 | /** 整个算法value 的值 */ 35 | value?: ValueItemSchema[]; 36 | /** data 值 */ 37 | data?: any[]; 38 | 39 | isDisable?: boolean; 40 | } 41 | 42 | class Algorithm extends React.Component { 43 | /** 算法右侧内容 */ 44 | static Item: typeof Item; 45 | /** 算法左侧列表 */ 46 | static List: typeof List; 47 | 48 | static defaultProps = { 49 | value: [], 50 | disable: false, 51 | }; 52 | 53 | constructor(props: AlgorithmProps) { 54 | super(props); 55 | 56 | const defaultSingleData = props.data.length > 0 && props.data[0]; 57 | const defaultSingleValue = this.getSingleValue(defaultSingleData, props.value); 58 | this.state = { 59 | singleData: defaultSingleData, // 单个算法数据项 60 | singleValue: defaultSingleValue, 61 | value: props.value, 62 | data: handleData(props), 63 | isDisable: true, 64 | }; 65 | } 66 | 67 | componentWillReceiveProps(nextProps) { 68 | if (this.props.data !== nextProps.data) { 69 | // console.log('nextProps', nextProps) 70 | this.setState({ 71 | data: handleData(nextProps), 72 | }); 73 | } 74 | 75 | if (JSON.stringify(this.props.value) !== JSON.stringify(nextProps.value)) { 76 | this.setState({ 77 | isDisable: false, 78 | }, () => { 79 | this.setState({ 80 | data: handleData(nextProps), 81 | value: nextProps.value, 82 | singleValue: this.getSingleValue(this.state.singleData, nextProps.value), 83 | isDisable: true, 84 | }); 85 | }); 86 | } 87 | } 88 | 89 | getSingleValue = (data, value) => { 90 | const singleValue = (value && value.find((fd) => fd.id === data.id)) || { id: data.id, name: data.name, params: {}}; 91 | return singleValue; 92 | } 93 | 94 | onListChange = (data) => { 95 | // console.log('data', data); 96 | const { value } = this.state; 97 | const singleValue = this.getSingleValue(data, value); 98 | this.setState({ 99 | singleData: data, 100 | singleValue, 101 | }); 102 | } 103 | 104 | onSwitchChange = (checked, data) => { 105 | // console.log('checkout, data', checked, data) 106 | const {value} = this.state; 107 | const { onChange } = this.props; 108 | let newValue = value; 109 | data.checked = checked; 110 | if (checked) { 111 | newValue.push({id: data.id, name: data.name, params: {}}); 112 | } else { 113 | newValue = newValue.filter((ft) => ft.id !== data.id); 114 | } 115 | this.setState({ 116 | isDisable: false, 117 | }, () => { 118 | this.setState({ 119 | singleData: data, 120 | singleValue: {id: data.id, name: data.name, params: {}}, 121 | value: newValue, 122 | isDisable: true, 123 | }); 124 | onChange(newValue); 125 | }); 126 | } 127 | 128 | onItemChange = (data) => { 129 | const {value} = this.state; 130 | const {onChange} = this.props; 131 | value.forEach((fh) => { 132 | if (data.id === fh.id) { 133 | fh.params = data.params; 134 | } 135 | }); 136 | onChange([...value]); 137 | } 138 | 139 | public render() { 140 | const {disabled} = this.props; 141 | const {singleData, singleValue, isDisable, data, value} = this.state; 142 | return ( 143 | 144 | 145 | { 146 | data && 153 | } 154 | 155 | 158 | { 159 | isDisable && singleData && 165 | } 166 | 167 | 168 | ); 169 | } 170 | } 171 | 172 | export default Algorithm; 173 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/algorithm/interface.tsx: -------------------------------------------------------------------------------- 1 | export interface ParamsItemSchema { 2 | /** 参数key */ 3 | key: string; 4 | /** 名称 */ 5 | name: string; 6 | /** 组件渲染类型，支持tag-input, select, input-number, input, radio-group, time-select */ 7 | type: string; 8 | /** 是否支持多选，只有type=select支持此参数 */ 9 | multiple?: boolean; 10 | /** 默认值 */ 11 | default: any; 12 | /** 最大值 */ 13 | max: number; 14 | /** 最小值 */ 15 | min: number; 16 | /** 扩展描述 */ 17 | extra: string; 18 | /** item数据，例如：select 的 option || radio group */ 19 | data?: any; 20 | /** 配置子父级依赖关系 */ 21 | condition?: string; 22 | } 23 | 24 | /** 当个数据项结构 */ 25 | export interface DataItemSchema { 26 | /** id */ 27 | id: string; 28 | /** 名称 */ 29 | name: string; 30 | /** 描述 */ 31 | desc?: string; 32 | /** 是否可用 */ 33 | checked?: boolean; 34 | /** 算法参数列表 */ 35 | params: ParamsItemSchema[]; 36 | } 37 | 38 | /** 单个value结构 */ 39 | export interface ValueItemSchema { 40 | /** 算法Id */ 41 | id: string; 42 | /** 算法名称 */ 43 | name: string; 44 | checked?: boolean; 45 | /** 参数选项 */ 46 | params: object; 47 | } 48 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/algorithm/list.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Menu, Switch } from 'antd'; 3 | import { DataItemSchema, ValueItemSchema } from './interface'; 4 | import LocaleReceiver from '../../components/locale-provider/localeReceiver'; 5 | import './index.less'; 6 | 7 | const MenuItem = Menu.Item; 8 | 9 | export interface ListProps { 10 | data: DataItemSchema[]; 11 | value: ValueItemSchema[]; 12 | onChange?: (data: any) => void; 13 | disabled: boolean; 14 | onSwitchChange?: (checked: boolean, data: DataItemSchema) => void; 15 | } 16 | 17 | class List extends React.Component { 18 | 19 | handleMenuClick = (item) => { 20 | const { onChange } = this.props; 21 | onChange && onChange(item); 22 | } 23 | 24 | onSwitchChange = (checked: boolean, data) => { 25 | // console.log('checked', checked) 26 | const { onSwitchChange } = this.props; 27 | onSwitchChange && onSwitchChange(checked, data); 28 | } 29 | 30 | public render() { 31 | const { data, value, disabled } = this.props; 32 | const defaultSelectKey = data.length > 0 && data[0].id || ''; 33 | return ( 34 | 40 | { 41 | data.map((d) => ( 42 | {this.handleMenuClick(d); }} 46 | > 47 | {d.name} 48 | 49 | { 50 | (locale: any) => ( 51 | { this.onSwitchChange(checked, d); }} 59 | // onClick={checked => { this.onSwitchChange(checked) }} 60 | // className={styles.amMenuListItemRight} 61 | /> 62 | ) 63 | } 64 | 65 | 66 | )) 67 | } 68 | 69 | ); 70 | } 71 | } 72 | 73 | export default List; 74 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/config/metrics.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { value: 'explained_variance', name: 'EVS' }, 3 | { value: 'neg_mean_absolute_error', name: 'MAE' }, 4 | { value: 'neg_mean_squared_error', name: 'MSE' }, 5 | { value: 'neg_mean_squared_log_error', name: 'MSLE' }, 6 | { value: 'neg_median_absolute_error', name: 'MedianAE' }, 7 | { value: 'r2', name: 'R2' }, 8 | { value: 'accuracy', name: 'Accuracy' }, 9 | { value: 'f1', name: 'F1' }, 10 | { value: 'precision', name: 'Precision' }, 11 | { value: 'recall', name: 'Recall' }, 12 | { value: 'roc_auc', name: 'AUC' }, 13 | { value: 'fbeta', name: 'FBeta' }, 14 | { value: 'log_loss', name: 'Log Loss' }, 15 | ]; 16 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/derivative/_mock/data.js: -------------------------------------------------------------------------------- 1 | export const data = [ 2 | { 3 | id: "1", 4 | name: "数值型", 5 | desc: "数值型", 6 | params: [ 7 | { 8 | key: 'int1', 9 | name: "int1", 10 | meaning: "Transform a Datetime feature into the year." 11 | }, 12 | { 13 | key: 'int2', 14 | name: "int2", 15 | meaning: "Transform a Datetime feature into the year." 16 | }, 17 | { 18 | key: 'int3', 19 | name: "int3", 20 | meaning: "Transform a Datetime feature into the year." 21 | }, 22 | { 23 | key: 'int4', 24 | name: "int4", 25 | meaning: "Transform a Datetime feature into the year." 26 | } 27 | ] 28 | }, 29 | { 30 | id: "2", 31 | name: "文本型", 32 | desc: "数值型", 33 | params: [ 34 | { 35 | key: 'text1', 36 | name: "text1", 37 | meaning: "Transform a Datetime feature into the year." 38 | }, 39 | { 40 | key: 'text2', 41 | name: "text2", 42 | meaning: "Transform a Datetime feature into the year." 43 | }, 44 | { 45 | key: 'text3', 46 | name: "text3", 47 | meaning: "Transform a Datetime feature into the year." 48 | }, 49 | { 50 | key: 'text4', 51 | name: "text4", 52 | meaning: "Transform a Datetime feature into the year." 53 | } 54 | ] 55 | }, 56 | { 57 | id: "3", 58 | name: "时间性", 59 | desc: "时间性", 60 | params: [ 61 | { 62 | key: 'time1', 63 | name: "time1", 64 | meaning: "Transform a Datetime feature into the year." 65 | }, 66 | { 67 | key: 'time2', 68 | name: "time2", 69 | meaning: "Transform a Datetime feature into the year." 70 | }, 71 | { 72 | key: 'time3', 73 | name: "time3", 74 | meaning: "Transform a Datetime feature into the year." 75 | }, 76 | { 77 | key: 'time4', 78 | name: "time4", 79 | meaning: "Transform a Datetime feature into the year." 80 | } 81 | ] 82 | } 83 | ]; 84 | 85 | export const value = [ 86 | { 87 | id: "1", 88 | checked: true, 89 | params:['int1','int3'] 90 | }, 91 | { 92 | id: "2", 93 | checked: true, 94 | params:['text2','text4'] 95 | }, 96 | { 97 | id: "3", 98 | checked: true, 99 | params:['time4',] 100 | } 101 | ] 102 | 103 | export const collapseData = { 104 | numeric:[ 105 | 'amount -> MEAN(transactions.amount),SUM(transactions.amount),MEAN(transactions.amount),MAX，(transactions.amount),MEAN(transactions.amount)MEAN(transactions.amount),SUM(transactions.amount),MEAN(transactions.amount)', 106 | 'amount -> MEAN(transactions.amount),SUM(transactions.amount),MEAN(transactions.amount),MAX' 107 | ], 108 | text:[ 109 | 'date_of_birth -> customers.MONTH(date_of_birth),customers.YEAR(date_of_birth),customers.DAY(date_of_birth)', 110 | 'date_of_birth -> customers.MONTH(date_of_birth),customers.YEAR(date_of_birth),customers.DAY(date_of_birth)' 111 | ], 112 | time:[ 113 | 'date_of_birth -> customers.MONTH(date_of_birth),customers.YEAR(date_of_birth),customers.DAY(date_of_birth)', 114 | 'date_of_birth -> customers.MONTH(date_of_birth),customers.YEAR(date_of_birth),customers.DAY(date_of_birth)' 115 | ] 116 | } -------------------------------------------------------------------------------- /packages/zet-component/src/automl/derivative/collapse.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Collapse, Tooltip, Icon } from "antd"; 3 | 4 | const Panel = Collapse.Panel; 5 | 6 | interface CollapseFooterProps { 7 | data: any; 8 | } 9 | interface CollapseFooterState {} 10 | 11 | const messMap = (data) => { 12 | return Array.isArray(data) && data.map((item, index) => { 13 | return ( 14 |

{item}

15 | ); 16 | }); 17 | }; 18 | const getAmount = (data= {}) => { 19 | const total = {sum: 0, numeric: 0, text: 0, time: 0}; 20 | Object.keys(data).forEach(item => { 21 | if (['numeric', 'text', 'time'].includes(item)) { 22 | if (Array.isArray(data[item])) { 23 | total.sum += data[item].length; 24 | total[item] = data[item].length; 25 | } 26 | } 27 | }); 28 | return total; 29 | }; 30 | 31 | class CollapseFooter extends React.Component { 32 | render() { 33 | const { data } = this.props; 34 | const { numeric, text, time } = data; 35 | const amount = getAmount(data); 36 | return ( 37 | 38 |
39 | {`验证特征 (${amount.sum})`} 40 | 41 | 42 | 43 | 44 | 45 |
46 | 52 | 53 | {messMap(numeric)} 54 | 55 | 56 | {messMap(text)} 57 | 58 | 59 | {messMap(time)} 60 | 61 | 62 | 63 | ); 64 | } 65 | } 66 | 67 | export default CollapseFooter; 68 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/derivative/index.less: -------------------------------------------------------------------------------- 1 | 2 | .sider-title{ 3 | font-size: 14px; 4 | color: rgba(0, 0, 0, 0.45); 5 | padding:12px; 6 | line-height: 22px; 7 | margin:0px; 8 | border-right: 1px rgba(16, 38, 58, 0.15) solid; 9 | } 10 | .derivative{ 11 | .alg-list{ 12 | height: calc(~'100%' - 46px) !important; 13 | } 14 | } 15 | .derivative-footer{ 16 | padding:0px; 17 | background-color: white; 18 | } 19 | .footer-tile{ 20 | border-top:1px solid rgba(16, 38, 58, 0.15); 21 | border-bottom:1px solid rgba(16, 38, 58, 0.15); 22 | line-height: 22px; 23 | padding: 16px; 24 | color: rgba(0, 0, 0, 0.45); 25 | font-size: 14px; 26 | } 27 | .mess{ 28 | border-radius: 2px; 29 | background-color: #fafafa; 30 | padding:20px; 31 | margin:20px 0px; 32 | color: rgba(16, 38, 58, 0.85); 33 | } 34 | .ant-table-thead tr{ 35 | background-color: transparent; 36 | } 37 | .collapse-inner{ 38 | height:246px; 39 | overflow: auto; 40 | } 41 | .collapse-inner p{ 42 | padding:12px 20px; 43 | border-top:1px solid rgba(16, 38, 58, 0.15); 44 | margin:0px; 45 | line-height: 22px; 46 | } -------------------------------------------------------------------------------- /packages/zet-component/src/automl/derivative/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Derivative(特征衍生) 3 | menu: AutoML 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz'; 7 | import { State, Toggle } from 'react-powerplug'; 8 | import { AutoML } from '../../index.tsx'; 9 | import { LocaleProviderHoc } from '../../utils/hoc.js'; 10 | import { data, value, collapseData } from './_mock/data' 11 | 12 | 13 | # Derivative 14 | 15 | ## 使用 16 | Derivative 17 | 18 | 19 | ## 参数模板 20 | 21 | ### 组件输出接口数据 22 | ``` 23 | ``` 24 | 25 | ## 案例介绍 26 | 27 | 28 | {({ state, setState }) => { 29 | const onChange = (newValue)=>{ 30 | console.log('mdx value >> ', newValue); 31 | setState({ 32 | value:newValue 33 | }) 34 | } 35 | return ( 36 | LocaleProviderHoc( 37 | 43 | 44 | ) 45 | ) 46 | }} 47 | 48 | 49 | 50 | 51 | ## API 52 | 53 | 54 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/derivative/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Layout } from "antd"; 3 | import List from "./list"; 4 | import { LocaleReceiverHoc } from "../../utils/hoc"; 5 | import Item from "./item"; 6 | import Collapse from "./collapse"; 7 | import "./index.less"; 8 | 9 | const { Content, Sider, Footer } = Layout; 10 | 11 | interface ValueItemSchema { 12 | /** 算法Id */ 13 | id: string; 14 | /** 算法名称 */ 15 | name: string; 16 | checked?: boolean; 17 | /** 参数选项 */ 18 | params: any[]; 19 | } 20 | 21 | interface DerivativeProps { 22 | /** 算法配置列表 */ 23 | data: any[]; 24 | collapseData: object; 25 | /** 算法组件value */ 26 | value?: ValueItemSchema[]; 27 | /** 当前内容是否禁用 */ 28 | disabled: boolean; 29 | /** 数据内容发生变化回调 */ 30 | onChange?: (value: ValueItemSchema[]) => void; 31 | } 32 | interface DerivativeState { 33 | currentId: string; 34 | } 35 | 36 | class Derivative extends React.Component { 37 | constructor(props) { 38 | super(props); 39 | this.state = { 40 | currentId: '', 41 | }; 42 | } 43 | componentDidMount() { 44 | const currentData = this.props.data[0]; 45 | currentData && this.setState({ 46 | currentId: currentData.id, 47 | }); 48 | } 49 | onListChange = item => { 50 | const { currentId } = this.state; 51 | item && item.id !== currentId && this.setState({ 52 | currentId: item.id, 53 | }); 54 | } 55 | onSwitchChange = (checked, data) => { 56 | const { value } = this.props; 57 | const newValue = value.map(item => { 58 | if (item.id === data.id) { 59 | item.checked = checked; 60 | } 61 | return item; 62 | }); 63 | this.props.onChange(newValue); 64 | } 65 | 66 | onSelectedChange = (data) => { 67 | const {value} = this.props; 68 | const newValue = value.map(item => { 69 | if (item.id === data.id) { 70 | item.params = data.params; 71 | } 72 | return item; 73 | }); 74 | this.props.onChange(newValue); 75 | } 76 | render() { 77 | const {data, collapseData, disabled = false, value = []} = this.props; 78 | const { currentId } = this.state; 79 | const contentData = data.find((item) => (item.id === currentId)) || {params: []}; 80 | const contentValue = value.find((item) => (item.id === currentId)) || {id: '', params: []}; 81 | return ( 82 | 83 | 84 | 85 |

特征衍生策略

86 | {data && ( 87 | 94 | )} 95 | 96 | 97 |
98 | 104 |
105 | 106 | 107 |
108 | 109 |
110 | 111 | ); 112 | } 113 | } 114 | 115 | export default LocaleReceiverHoc("AutoML")(Derivative); 116 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/derivative/item.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Table } from 'antd'; 3 | import './index.less'; 4 | 5 | interface ValueItemSchema { 6 | /** 算法Id */ 7 | id: string; 8 | /** 算法名称 */ 9 | name?: string; 10 | checked ?: boolean; 11 | /** 参数选项 */ 12 | params: any[]; 13 | } 14 | 15 | interface ItemProps { 16 | mess?: string; 17 | data: any[]; 18 | intl?: any; 19 | value: ValueItemSchema; 20 | onChange?: (value: any, selectedKeys: any) => void; 21 | } 22 | 23 | class Item extends React.Component { 24 | 25 | onSelectChange = (selectedRowKeys) => { 26 | const {value} = this.props; 27 | this.props.onChange({...value, params: selectedRowKeys}, selectedRowKeys); 28 | } 29 | 30 | render() { 31 | const { mess, data, value, intl= {} } = this.props; 32 | const columns = [ 33 | { 34 | title: '名称', 35 | dataIndex: 'name', 36 | }, 37 | { 38 | title: '含义', 39 | dataIndex: 'meaning', 40 | }, 41 | ]; 42 | const rowSelection = { 43 | selectedRowKeys: value.params || [], 44 | onChange: this.onSelectChange, 45 | getCheckboxProps: record => ({disabled: !value.checked}), 46 | }; 47 | const dataSource = getDataSource(data); 48 | return( 49 | 50 |
51 |

{mess}

52 |
53 | 55 | 56 | ); 57 | } 58 | } 59 | 60 | const getDataSource = (data= []) => { 61 | return Array.isArray(data) ? ( 62 | data.map((item) => ( 63 | { 64 | key: item.key, 65 | name: item.name, 66 | meaning: item.meaning, 67 | } 68 | )) 69 | ) : []; 70 | }; 71 | 72 | export default Item; 73 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/derivative/list.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Menu, Switch } from 'antd'; 3 | import { LocaleReceiverHoc } from "../../utils/hoc"; 4 | import './index.less'; 5 | 6 | const MenuItem = Menu.Item; 7 | 8 | /** 当个数据项结构 */ 9 | interface DataItemSchema { 10 | /** id */ 11 | id: string; 12 | /** 名称 */ 13 | name: string; 14 | /** 描述 */ 15 | desc?: string; 16 | /** 是否可用 */ 17 | checked?: boolean; 18 | /** 算法参数列表 */ 19 | params: any[]; 20 | } 21 | 22 | /** 单个value结构 */ 23 | interface ValueItemSchema { 24 | /** 算法Id */ 25 | id: string; 26 | /** 算法名称 */ 27 | name: string; 28 | checked?: boolean; 29 | /** 参数选项 */ 30 | params: object; 31 | } 32 | 33 | export interface ListProps { 34 | data: DataItemSchema[]; 35 | value: ValueItemSchema[]; 36 | onChange?: (data: any) => void; 37 | disabled: boolean; 38 | intl: any; 39 | onSwitchChange?: (checked: boolean, data: DataItemSchema) => void; 40 | } 41 | 42 | class List extends React.Component { 43 | 44 | handleMenuClick = (item) => { 45 | const { onChange } = this.props; 46 | onChange && onChange(item); 47 | } 48 | 49 | onSwitchChange = (checked: boolean, data) => { 50 | // console.log('checked', checked) 51 | const { onSwitchChange } = this.props; 52 | onSwitchChange && onSwitchChange(checked, data); 53 | } 54 | 55 | public render() { 56 | const { data, value, disabled, intl= {} } = this.props; 57 | const defaultSelectKey = data.length > 0 && data[0].id || ''; 58 | return ( 59 | 65 | { 66 | data.map((d) => { 67 | const currentValue = value.find(item => (item.id === d.id)) || {checked: false}; 68 | return ( 69 | {this.handleMenuClick(d); }} 73 | > 74 | {d.name} 75 | { this.onSwitchChange(checked, d); }} 83 | // onClick={checked => { this.onSwitchChange(checked) }} 84 | // className={styles.amMenuListItemRight} 85 | /> 86 | 87 | ); 88 | }) 89 | } 90 | 91 | ); 92 | } 93 | } 94 | 95 | export default LocaleReceiverHoc("AutoML")(List); 96 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/design/_mock/leftData.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | key: 'baseInfo', 3 | value: '基础信息', 4 | children: [ 5 | { 6 | key: 'target', 7 | value: '目标' 8 | } 9 | ] 10 | }, { 11 | key: 'featureEngineering', 12 | value: '特征工程', 13 | children: [{ 14 | key: 'pretreatment', 15 | value: '特性预处理', 16 | },{ 17 | key: 'processing', 18 | value: '特征处理', 19 | }] 20 | }, { 21 | key: 'modelTraining', 22 | value: '模型训练', 23 | children: [{ 24 | key: 'algorithms', 25 | value: '算法', 26 | },{ 27 | key: 'hyperparams', 28 | value: '超参数调优', 29 | }] 30 | }, { 31 | key: 'dataDeclustering', 32 | value: '数据拆分', 33 | children: [{ 34 | key: 'trainAndTest', 35 | value: '训练集/测试集', 36 | }, { 37 | key: 'trainAndVerify', 38 | value: '训练集/验证集', 39 | }, { 40 | key: 'all', 41 | value: '训练集/测试集/验证集', 42 | }] 43 | }, { 44 | key: 'resource', 45 | value: '资源设置', 46 | children: [{ 47 | key: 'standalone', 48 | value: '单击资源', 49 | },{ 50 | key: 'distributed', 51 | value: '分布式资源', 52 | }] 53 | }] 54 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/design/index.less: -------------------------------------------------------------------------------- 1 | @import '../../style/minxins/index.less'; 2 | @import '../../style/index.less'; 3 | 4 | @resource-prefix-cls: ~'@{zet-prefix}-aml-design'; 5 | 6 | .@{resource-prefix-cls} { 7 | display: 1; 8 | height: 100%; 9 | &-sider { 10 | border-right: 1px solid rgba(16, 38, 58, 0.15); 11 | overflow: auto; 12 | .ant-list-item { 13 | padding: 0 !important; 14 | } 15 | } 16 | 17 | &-header{ 18 | background-color: #fff; 19 | border-bottom: 1px solid rgba(16, 38, 58, 0.15); 20 | height: 54px; 21 | padding: 0 20px; 22 | line-height: 54px; 23 | } 24 | 25 | &-content{ 26 | background: #fff; 27 | overflow-y: auto; 28 | flex: 1; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/design/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Design (建模设计) 3 | menu: AutoML 4 | order: 70 5 | --- 6 | 7 | import { Playground, PropsTable } from 'docz'; 8 | import { State, Toggle } from 'react-powerplug' 9 | import { AutoML } from '../../index.tsx'; 10 | import leftData from './_mock/leftData.js'; 11 | 12 | 13 | # AutoML.Design (建模设计) 14 | 自动建模建模设计时候用此组件 15 | 16 | 17 | ## 基础展示 18 | 我们需要定义`AutoML.Design`组件的`leftData`属性，数据格式如下： 19 | ``` 20 | [{ 21 | key: 'baseInfo', 22 | value: '基础信息', 23 | children: [ 24 | { 25 | key: 'target', 26 | value: '目标' 27 | } 28 | ] 29 | }] 30 | ``` 31 | 引入组件 32 | ``` 33 | import { AutoML } from 'zet-component'; 34 | ``` 35 | 36 | 37 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/design/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import classnames from "classnames"; 3 | import { Layout, Menu } from "antd"; 4 | import "./index.less"; 5 | const { Header, Content, Sider } = Layout; 6 | 7 | const { ItemGroup: MenuItemGroup, Item: MenuItem } = Menu; 8 | 9 | /** 左侧列表数据项接口 */ 10 | export interface LeftDataItem { 11 | key: string; 12 | value: string; 13 | children?: LeftDataItem; 14 | } 15 | 16 | export interface DesignProps { 17 | /** 组件行行内样式 */ 18 | style?: React.CSSProperties; 19 | /** 自定义类名 */ 20 | className?: string; 21 | /** 左侧列表数据 */ 22 | leftData?: LeftDataItem[]; 23 | /** 左侧面板内容自定义渲染 */ 24 | leftRender?: React.ReactNode; 25 | /** 左侧antd layout.sider容器属性 */ 26 | leftSiderProps?: any; 27 | /** 左侧antd menu属性 */ 28 | leftMenuProps?: any; 29 | /** 左侧列表onSelect事件，参数为selectData */ 30 | onSelect: (selectData: LeftDataItem) => void; 31 | } 32 | 33 | export interface DesignState { 34 | selectedKeys: string[]; 35 | selectedData: LeftDataItem; 36 | } 37 | 38 | export default class Design extends React.Component { 39 | constructor(props: DesignProps) { 40 | super(props); 41 | const initSelectData = this.getInitSelectData(props.leftData); 42 | this.state = { 43 | selectedKeys: [initSelectData.key], 44 | selectedData: initSelectData, 45 | }; 46 | } 47 | 48 | getInitSelectData = (leftData) => { 49 | return ( 50 | (Array.isArray(leftData) && 51 | leftData.length > 0 && 52 | leftData[0].children && 53 | leftData[0].children.length > 0 && 54 | leftData[0].children[0]) || 55 | {} 56 | ); 57 | } 58 | 59 | onMenuClick = (data) => { 60 | const { onSelect } = this.props; 61 | this.setState({ 62 | selectedKeys: [data.key], 63 | selectedData: data, 64 | }); 65 | onSelect && onSelect(data); 66 | } 67 | 68 | /** 69 | * 左侧面板内容 70 | */ 71 | getLeftContent = () => { 72 | const { leftData, leftRender, leftMenuProps } = this.props; 73 | const { selectedKeys } = this.state; 74 | if (leftData) { 75 | return ( 76 | 81 | {Array.isArray(leftData) && 82 | leftData.map((item) => ( 83 | 84 | {Array.isArray(item.children) && 85 | item.children.map((child) => ( 86 | this.onMenuClick(child)} 88 | key={child.key} 89 | > 90 | {child.value} 91 | 92 | ))} 93 | 94 | ))} 95 | 96 | ); 97 | } 98 | return leftRender; 99 | } 100 | 101 | public render() { 102 | const { style, className, leftSiderProps, children } = this.props; 103 | const { selectedData } = this.state; 104 | const classNames = classnames("zet-aml-design", className); 105 | return ( 106 | 107 | 113 | {this.getLeftContent()} 114 | 115 | 116 |
117 | {selectedData.value} 118 |
119 | {children} 120 | 121 | 122 | ); 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import Design from './design'; 3 | import Layout from './layout'; 4 | import Algorithm from './algorithm'; 5 | import Achievement from './achievement'; 6 | import Task from './taskPanel'; 7 | import Chart from './modelChart/modelChart'; 8 | import ModelList from './modelList/modelList'; 9 | import MetricsSelect from './metricsSelect'; 10 | import Derivative from './derivative'; 11 | 12 | const AutoML = { 13 | Design, 14 | Algorithm, 15 | Achievement, 16 | Task, 17 | Chart, 18 | Layout, 19 | ModelList, 20 | MetricsSelect, 21 | Derivative, 22 | }; 23 | 24 | export default AutoML; 25 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/layout/content.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import classnames from 'classnames'; 3 | 4 | import './index.less'; 5 | 6 | export interface ContentProps { 7 | /** 组件行行内样式 */ 8 | style?: React.CSSProperties; 9 | /** 自定义类名 */ 10 | className?: string; 11 | /** 资源组件的宽度 */ 12 | width?: string | number; 13 | 14 | } 15 | 16 | export interface ContentState { 17 | 18 | } 19 | 20 | class Content extends React.Component { 21 | constructor(props: ContentProps) { 22 | super(props); 23 | this.state = {}; 24 | } 25 | 26 | render() { 27 | const { style, className, width, children } = this.props; 28 | const classNames = classnames('zetContent', className); 29 | const styleProps = {...style, width}; 30 | return ( 31 |
32 | {children} 33 |
34 | ); 35 | } 36 | } 37 | 38 | export default Content; 39 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/layout/index.less: -------------------------------------------------------------------------------- 1 | 2 | .zetLayout{ 3 | display: flex; 4 | height:100%; 5 | } 6 | 7 | .zetSider{ 8 | margin-right:20px; 9 | height:100%; 10 | width:324px; 11 | } 12 | 13 | .zetContent{ 14 | flex:1; 15 | height:100%; 16 | // background-color: aquamarine; 17 | } 18 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/layout/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Layout (模型成果页布局) 3 | menu: AutoML 4 | order: 70 5 | --- 6 | 7 | import { Playground, PropsTable } from 'docz'; 8 | import { State, Toggle } from 'react-powerplug'; 9 | import { AutoML } from '../../index.tsx'; 10 | 11 | # Layout (模型成果页布局) 12 | 13 | 引入组件 14 | ``` 15 | import { AutoML } from 'zet-component'; 16 | ``` 17 | 18 | 19 | ## Basic usage 20 | 21 | 22 | 23 | {({ state, setState }) => { 24 | const { Layout, Achievement } = AutoML; 25 | const { Sider, Content } = Layout; 26 | const { Panel } = Achievement; 27 | const changeHandle = (option, record)=>{ 28 | if(option=='rotate'){ 29 | setState({ 30 | show:record.type 31 | }) 32 | } 33 | } 34 | const {show} = state; 35 | return ( 36 | 37 | 38 |
39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | ) 49 | }} 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/layout/index.tsx: -------------------------------------------------------------------------------- 1 | import Layout from './layout'; 2 | import Sider from './sider'; 3 | import Content from './content'; 4 | 5 | Layout.Sider = Sider; 6 | Layout.Content = Content; 7 | export default Layout; 8 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/layout/layout.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import classnames from 'classnames'; 3 | import './index.less'; 4 | import Sider from './sider'; 5 | import Content from './content'; 6 | 7 | export interface LayoutComponentProps { 8 | /** 组件行行内样式 */ 9 | style?: React.CSSProperties; 10 | /** 自定义类名 */ 11 | className?: string; 12 | /** 资源组件的宽度 */ 13 | width?: string | number; 14 | } 15 | 16 | export interface LayoutComponentState { 17 | 18 | } 19 | 20 | class LayoutComponent extends React.Component { 21 | static Sider: typeof Sider; 22 | static Content: typeof Content; 23 | constructor(props: LayoutComponentProps) { 24 | super(props); 25 | this.state = {}; 26 | } 27 | render() { 28 | const { style, className, width, children } = this.props; 29 | const classNames = classnames('zetLayout', className); 30 | const styleProps = {...style, width}; 31 | return ( 32 |
33 | {children} 34 |
35 | ); 36 | } 37 | } 38 | 39 | export default LayoutComponent; 40 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/layout/sider.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import classnames from 'classnames'; 3 | 4 | import './index.less'; 5 | 6 | export interface SiderProps { 7 | /** 组件行行内样式 */ 8 | style?: React.CSSProperties; 9 | /** 自定义类名 */ 10 | className?: string; 11 | /** 资源组件的宽度 */ 12 | width?: string | number; 13 | } 14 | 15 | export interface SiderState { 16 | 17 | } 18 | 19 | class Sider extends React.Component { 20 | constructor(props: SiderProps) { 21 | super(props); 22 | this.state = {}; 23 | } 24 | 25 | render() { 26 | const { style, className, width, children } = this.props; 27 | const classNames = classnames('zetSider', className); 28 | const styleProps = {...style, width}; 29 | return ( 30 |
31 | {children} 32 |
33 | ); 34 | } 35 | } 36 | 37 | export default Sider; 38 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/metricsSelect/_mock/metrics.js: -------------------------------------------------------------------------------- 1 | export default ["accuracy", "f1", "fbeta", "precision", "recall", "log_loss", "roc_auc", "explained_variance", "neg_mean_absolute_error", "neg_mean_squared_error", "neg_mean_squared_log_error", "neg_median_absolute_error", "r2"] 2 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/metricsSelect/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: MetricsSelect (标准选择下拉列表) 3 | menu: AutoML 4 | order: 70 5 | --- 6 | 7 | import { Playground, PropsTable } from 'docz'; 8 | import { State, Toggle } from 'react-powerplug' 9 | import { AutoML } from '../../index.tsx'; 10 | import metrics from './_mock/metrics' 11 | 12 | # AutoML.Design (建模设计) 13 | 自动建模建模设计时候用此组件 14 | 15 | 16 | 引入组件 17 | 18 | ``` 19 | import { AutoML } from 'zet-component'; 20 | ``` 21 | 22 | ## Basic task 23 | 24 | 25 | { 26 | ({state,setState})=>{ 27 | const { MetricsSelect } = AutoML; 28 | const changeMetrics = (val)=>{ 29 | setState({metricsVal:val}) 30 | } 31 | return ( 32 | 33 | ) 34 | } 35 | } 36 | 37 | 38 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/metricsSelect/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Select } from "antd"; 3 | import MetricsConfig from "../config/metrics"; 4 | 5 | const { Option } = Select; 6 | 7 | export interface MetricsSelectProps { 8 | metrics: object[]; 9 | metricsVal: string; 10 | /** 切换标准回调 */ 11 | changeMetrics?: (value: string) => void; 12 | } 13 | 14 | export interface MetricsSelectState {} 15 | 16 | class Index extends React.Component { 17 | constructor(props: MetricsSelectProps) { 18 | super(props); 19 | this.state = {}; 20 | } 21 | 22 | changeMetrics = (val) => { 23 | this.props.changeMetrics(val); 24 | } 25 | 26 | format = () => { 27 | const { metrics } = this.props; 28 | const arr = []; 29 | if (metrics && metrics.length > 0) { 30 | metrics.forEach((val) => { 31 | MetricsConfig.forEach((v) => { 32 | if (v.value === val) { 33 | arr.push(v); 34 | } 35 | }); 36 | }); 37 | } 38 | return arr; 39 | } 40 | 41 | render() { 42 | const { metricsVal } = this.props; 43 | const metricsList = 44 | this.format().length > 0 && 45 | this.format().map((v) => ( 46 | 49 | )); 50 | return ( 51 | 58 | ); 59 | } 60 | } 61 | 62 | export default Index; 63 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/modelChart/charts/CurveChartMore.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import { Chart, Tooltip, Axis, Legend, Geom, View } from 'bizcharts'; 3 | import { DataView } from '@antv/data-set'; 4 | 5 | class CurveChartMore extends PureComponent { 6 | render() { 7 | const { data, height, type } = this.props; 8 | const chartdata = []; 9 | for (const model of data) { 10 | if (model.roc && model.roc[type]) { 11 | model.roc[type].data.forEach(point => chartdata.push({ x: point['False positive rate'], y: point['True positive rate'], name: model.name })); 12 | } 13 | } 14 | chartdata.push({ 15 | x: 0, 16 | y: 0, 17 | }); 18 | chartdata.push({ 19 | x: 1, 20 | y: 1, 21 | }); 22 | const dv = new DataView().source(chartdata); 23 | const dv2 = new DataView().source([{ x: 0, y: 0 }, { x: 1, y: 1 }]); 24 | const scale = { 25 | x: { 26 | min: 0, 27 | max: 1, 28 | alias: 'False positive rate', 29 | tickCount: 11, 30 | formatter: (value) => { 31 | return `${(value * 100).toFixed(0).toString()}%`; 32 | }, 33 | }, 34 | y: { 35 | min: 0, 36 | max: 1, 37 | alias: 'True positive rate', 38 | tickCount: 11, 39 | formatter: (value) => { 40 | return `${(value * 100).toFixed(0).toString()}%`; 41 | }, 42 | }, 43 | }; 44 | return ( 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | ); 57 | } 58 | } 59 | 60 | export default CurveChartMore; 61 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/modelChart/charts/autoChart.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import {Chart, Geom, Axis, Tooltip, Legend} from 'bizcharts'; 4 | import { DataView } from '@antv/data-set'; 5 | // import GlobalSocket from 'utils/socket'; 6 | // import trophy from 'assets/trophy.png'; 7 | import Icon from '../../../components/icon' 8 | import '../index.less'; 9 | 10 | class AutoChart extends Component { 11 | state = { 12 | data: [], 13 | } 14 | componentDidMount() {} 15 | componentDidUpdate(){ 16 | const legendDom = document.getElementById('autoChartLegend') 17 | legendDom && ReactDOM.render(,legendDom) 18 | } 19 | componentWillReceiveProps(nextProps) {} 20 | 21 | componentWillUnmount() {} 22 | 23 | compare = (property) => { 24 | return (a, b) => { 25 | const value1 = a[property]; 26 | const value2 = b[property]; 27 | return value1 - value2; 28 | }; 29 | } 30 | 31 | fommatChart = (props) => { 32 | const { data, legendScore } = props; 33 | const res = [...data]; 34 | const arr = []; 35 | if (res.length > 0) { 36 | res.forEach((v) => { 37 | if (v.hyperParams.length > 0) { 38 | const sortArr = v.hyperParams.sort(this.compare('x')); 39 | const start = sortArr[0].x; 40 | v.hyperParams.forEach((item) => { 41 | arr.push({ 42 | type: v.name, 43 | x: parseFloat(item.x - start), 44 | y: item.y, 45 | params: item.params, 46 | }); 47 | }); 48 | } 49 | }); 50 | } 51 | const result = []; 52 | Object.keys(legendScore).forEach(type => { 53 | arr.forEach(point => { 54 | if (point.type === type) { 55 | result.push(point); 56 | } 57 | }); 58 | 59 | }); 60 | return result; 61 | } 62 | 63 | render() { 64 | const { legendScore={} } = this.props; 65 | const dv = this.fommatChart(this.props); 66 | const scale = { 67 | x: { 68 | alias: 'Time (ms)', 69 | }, 70 | y: { 71 | alias: 'ROC AUC SCORE', 72 | }, 73 | }; 74 | return ( 75 | { 82 | const { items } = ev; // tooltip显示的项 83 | const origin = items[0]; // 将一条数据改成多条数据 84 | const { color } = origin; 85 | const { params } = origin.point['_origin']; 86 | items.splice(0); 87 | for (const i of Object.keys(params)) { 88 | items.push({ 89 | color, 90 | name: i, 91 | marker: true, 92 | title: i, 93 | value: params[i], 94 | }); 95 | } 96 | }} 97 | onGetG2Instance={i => { this.chart = i; }} 98 | > 99 | 100 | 101 | 107 | 111 |
112 | `} 113 | itemTpl={(value, color, checked, index) => { 114 | checked = checked ? 'checked' : 'unChecked'; 115 | return ` 116 | 117 | 118 | ${value} 119 | 120 | ${(index === 0 && legendScore[value] && legendScore[value].score !== '--' ? '': '')} 121 | ${legendScore[value] && legendScore[value].score} 122 | 123 | 124 | `; 125 | }} 126 | g2-legend={{ 127 | maxWidth: '240px', 128 | }} 129 | ref={this.legend} 130 | /> 131 | 132 | 143 | 144 | 145 | ); 146 | } 147 | } 148 | 149 | export default AutoChart; 150 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/modelChart/charts/barChart.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import {Chart, Geom, Axis, Tooltip} from 'bizcharts'; 3 | 4 | class AutoChart extends Component { 5 | fommatBarChart = () => { 6 | const { jobData, chart } = this.props; 7 | const res = [...jobData]; 8 | const arr = []; 9 | if (res.length > 0) { 10 | res.forEach((v) => { 11 | if (v.metricList.length > 0) { 12 | v.metricList.forEach((item) => { 13 | if (item.name === chart) { 14 | arr.push({ 15 | x: v.name, 16 | y: item.score, 17 | }); 18 | } 19 | }); 20 | } 21 | }); 22 | } 23 | return arr; 24 | } 25 | 26 | render() { 27 | const { chart } = this.props; 28 | return ( 29 | 36 | 37 | 38 | 39 | 40 | 41 | ); 42 | } 43 | } 44 | 45 | export default AutoChart; 46 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/modelChart/charts/index.js: -------------------------------------------------------------------------------- 1 | export { default as AutoChart } from './autoChart'; 2 | export { default as BarChart } from './barChart'; 3 | export { default as RocChart } from './rocChart'; 4 | export { default as CurveChartMore } from './CurveChartMore' 5 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/modelChart/charts/rocChart.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Select } from 'antd'; 3 | import CurveChartMore from './CurveChartMore' 4 | import '../index.less'; 5 | 6 | const { Option } = Select; 7 | class RocChart extends Component { 8 | state = { 9 | chartType: '', 10 | }; 11 | 12 | changeChartType=(val) => { 13 | this.setState({ 14 | chartType: val, 15 | }); 16 | } 17 | 18 | rocList=() => { 19 | const { jobData } = this.props; 20 | const set = new Set([]); 21 | for (const model of jobData) { 22 | if (model.roc) { 23 | for (const cn of Object.keys(model.roc)) { 24 | set.add(cn); 25 | } 26 | } 27 | } 28 | const arr = []; 29 | set.forEach(a => arr.push(a)); 30 | return arr; 31 | } 32 | 33 | render() { 34 | const { jobData } = this.props; 35 | const { chartType } = this.state; 36 | const optionList = this.rocList().map((item) => { 37 | return (); 38 | }); 39 | return ( 40 |
41 | 44 | 49 |
50 | ); 51 | } 52 | } 53 | 54 | export default RocChart; 55 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/modelChart/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Chart (自助建模chart图) 3 | menu: AutoML 4 | order: 70 5 | --- 6 | 7 | import { Playground, PropsTable } from 'docz'; 8 | import { State, Toggle } from 'react-powerplug' 9 | import { Row, Col } from 'antd'; 10 | import autoChartData from './_mock/autoChart.js'; 11 | import jobData from './_mock/jobData.js'; 12 | 13 | import { AutoML, LocaleProvider } from '../../index.tsx'; 14 | import { LocaleProviderHoc } from '../../utils/hoc.js'; 15 | 16 | # Chart (自助建模chart图) 17 | 18 | ## 基本 19 | 20 | 21 | {({ state, setState }) => { 22 | const { Chart } = AutoML; 23 | return ( 24 | 29 | ) 30 | }} 31 | 32 | 33 | 34 | ## 基本 (中英文切换) 35 | 36 | 37 | {({ state={currLocale:'zh_CH'}, setState }) => { 38 | const { Chart } = AutoML; 39 | return ( 40 | LocaleProviderHoc( 41 | 46 | ) 47 | ) 48 | }} 49 | 50 | 51 | 52 | 53 | ## API 54 | 55 | ### Chart 56 | 57 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/modelChart/modelChart.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Radio } from "antd"; 3 | import { AutoChart, RocChart, BarChart } from "./charts"; 4 | import { LocaleReceiverHoc } from "../../utils/hoc"; 5 | import MetricsConfig from "../config/metrics"; 6 | 7 | import "./index.less"; 8 | 9 | const RadioGroup = Radio.Group; 10 | const RadioButton = Radio.Button; 11 | export interface ModelChartProps { 12 | /** 图表数据 */ 13 | data: any; 14 | /** 评分指标数据 */ 15 | gradeData: any; 16 | /** 算法得分 */ 17 | legendScore: any; 18 | intl?: any; 19 | } 20 | 21 | export interface ModelChartState { 22 | /** 图表类型 */ 23 | chart: string; 24 | } 25 | class ModelChart extends React.Component { 26 | constructor(props: ModelChartProps) { 27 | super(props); 28 | this.state = { chart: "auto" }; 29 | } 30 | params = () => { 31 | const { gradeData } = this.props; 32 | const set = new Set([]); 33 | for (const model of gradeData) { 34 | if (model.metricList.length > 0) { 35 | model.metricList.forEach(v => { 36 | set.add(v.name); 37 | }); 38 | } 39 | } 40 | const arr = []; 41 | MetricsConfig.forEach(v => { 42 | set.forEach(a => { 43 | if (a === v.value) { 44 | arr.push(v); 45 | } 46 | }); 47 | }); 48 | return arr; 49 | } 50 | changeChart = e => { 51 | this.setState({ 52 | chart: e.target.value, 53 | }); 54 | } 55 | render() { 56 | const { chart } = this.state; 57 | const { gradeData, data, legendScore, intl = {} } = this.props; 58 | const paramsOptionList = this.params().map(item => { 59 | return ( 60 | 61 | {item.name} 62 | 63 | ); 64 | }); 65 | return ( 66 |
67 |
68 | {intl.grading || "评分指标"} 69 |
70 | 71 | 72 | {intl.autoParams || "自动调参"} 73 | 74 | {paramsOptionList} 75 | 76 |
77 |
78 |
79 | {chart === "auto" && ( 80 | 81 | )} 82 | {chart !== "auto" && chart !== "roc" && ( 83 | 84 | )} 85 | {chart === "roc" && gradeData.length > 0 && ( 86 | 87 | )} 88 |
89 |
90 | ); 91 | } 92 | } 93 | 94 | export default LocaleReceiverHoc("AutoML")(ModelChart); 95 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/modelList/CardExtra.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { LocaleReceiverHoc } from "../../utils/hoc"; 3 | 4 | function CardExtra(props) { 5 | const intl = props.intl; 6 | return ( 7 | 8 | { 10 | props.forecast(props.modelId); 11 | }} 12 | > 13 | {intl.predict || "预测"} 14 | 15 | | 16 | { 18 | props.openModelDetail(); 19 | }} 20 | > 21 | {intl.view || "查看"} 22 | 23 | | 24 | { 26 | props.view(props.id); 27 | }} 28 | > 29 | {intl.log || "日志"} 30 | 31 | 32 | ); 33 | } 34 | 35 | export default LocaleReceiverHoc('AutoML')(CardExtra); 36 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/modelList/_mock/jobData.js: -------------------------------------------------------------------------------- 1 | export default [{"modelId":"a7e8bf7f-8292-41c2-b3ba-0d93d12de1ea","blockId":"719059d1-7342-44c3-bf55-d2052cce04c4","name":"梯度渐进树","hyperParams":[{"x":1543209384150,"y":1,"params":{"loss":"deviance","score":1,"max_features":"None","total":"0.0s","max_depth":"3","n_estimators":"10","learning_rate":"0.1"}},{"x":1543209384150,"y":0.75,"params":{"loss":"deviance","score":0.75,"max_features":"None","total":"0.0s","max_depth":"3","n_estimators":"10","learning_rate":"0.1"}},{"x":1543209384150,"y":0.875,"params":{"loss":"deviance","score":0.875,"max_features":"None","total":"0.0s","max_depth":"3","n_estimators":"10","learning_rate":"0.1"}},{"x":1543209384150,"y":0.875,"params":{"loss":"deviance","score":0.875,"max_features":"None","total":"0.0s","max_depth":"3","n_estimators":"10","learning_rate":"0.1"}}],"trainBeginTime":"2018-11-26 13:16:23","trainEndTime":"2018-11-26 13:16:24","jobStatus":"SUCCESS","trainStatus":"SUCCESS","metricList":[{"name":"accuracy","score":0.5},{"name":"log_loss","score":0.2897},{"name":"f1","score":0},{"name":"fbeta","score":0},{"name":"precision","score":0},{"name":"recall","score":0},{"name":"roc_auc","score":1}],"params":{"loss":"deviance","max_features":null,"max_depth":3,"n_estimators":10,"learning_rate":0.1},"featureImportance":{"duration":0.2567,"month_4":0,"month_3":0.1262,"month_6":0,"month_5":0,"balance":0.158,"month_2":0,"month_1":0,"day":0.4591,"month_7":0},"roc":{"BINARYCLASSIFY":{"data":[{"False positive rate":0,"True positive rate":1},{"False positive rate":1,"True positive rate":1}],"roc_auc":1}}},{"modelId":"bf2c9c93-912f-46b1-8151-a1baaf432147","blockId":"78f9c176-c44b-4362-830a-c048b1185a7e","name":"随机森林","hyperParams":[{"x":1543209388209,"y":0.875,"params":{"score":0.875,"max_features":"None","total":"0.0s","n_jobs":"1","max_depth":"10","n_estimators":"10","min_samples_leaf":"1"}},{"x":1543209388236,"y":0.875,"params":{"score":0.875,"max_features":"None","total":"0.0s","n_jobs":"1","max_depth":"10","n_estimators":"10","min_samples_leaf":"1"}},{"x":1543209388258,"y":0.875,"params":{"score":0.875,"max_features":"None","total":"0.0s","n_jobs":"1","max_depth":"10","n_estimators":"10","min_samples_leaf":"1"}},{"x":1543209388297,"y":1,"params":{"score":1,"max_features":"None","total":"0.0s","n_jobs":"1","max_depth":"10","n_estimators":"10","min_samples_leaf":"1"}}],"trainBeginTime":"2018-11-26 13:16:28","trainEndTime":"2018-11-26 13:16:28","jobStatus":"SUCCESS","trainStatus":"SUCCESS","metricList":[{"name":"accuracy","score":0.5},{"name":"log_loss","score":0.1383},{"name":"f1","score":0},{"name":"fbeta","score":0},{"name":"precision","score":0},{"name":"recall","score":0},{"name":"roc_auc","score":1}],"params":{"max_features":null,"n_jobs":1,"max_depth":10,"n_estimators":10,"min_samples_leaf":1},"featureImportance":{"duration":0.2983,"month_4":0,"month_6":0,"month_5":0,"balance":0.1018,"job_0":0.0229,"month_1":0.0224,"day":0.411,"month_7":0,"age":0.0435},"roc":{"BINARYCLASSIFY":{"data":[{"False positive rate":0,"True positive rate":1},{"False positive rate":0.25,"True positive rate":1},{"False positive rate":1,"True positive rate":1}],"roc_auc":1}}},{"modelId":"bb4dea16-195b-4742-bb90-dbbaa706b85b","blockId":"85567c4b-eedc-4a77-adb3-abd78395d3e3","name":"XGBoost","hyperParams":[{"x":1543209385379,"y":1,"params":{"reg_lambda":"1","colsample_bytree":"1","n_jobs":"-1","max_depth":"6","reg_alpha":"0","n_estimators":"10","score":1,"total":"0.9s","missing":"0","subsample":"1","learning_rate":"0.1","min_child_weight":"1","gamma":"0"}},{"x":1543209389337,"y":1,"params":{"reg_lambda":"1","colsample_bytree":"1","n_jobs":"-1","max_depth":"6","reg_alpha":"0","n_estimators":"10","score":1,"total":"1.2s","missing":"0","subsample":"1","learning_rate":"0.1","min_child_weight":"1","gamma":"0"}}],"trainBeginTime":"2018-11-26 13:16:24","trainEndTime":"2018-11-26 13:16:30","jobStatus":"SUCCESS","trainStatus":"SUCCESS","metricList":[{"name":"accuracy","score":0.4375},{"name":"log_loss","score":0.5122},{"name":"f1","score":0},{"name":"fbeta","score":0},{"name":"precision","score":0},{"name":"recall","score":0},{"name":"roc_auc","score":0.25}],"params":{"reg_lambda":1,"colsample_bytree":1,"n_jobs":-1,"max_depth":6,"missing":0,"subsample":1,"reg_alpha":0,"n_estimators":10,"learning_rate":0.1,"min_child_weight":1,"gamma":0},"featureImportance":{"month_4":0,"month_3":0,"month_6":0,"month_5":0,"balance":0.7273,"month_0":0,"month_2":0,"month_1":0,"day":0.2727,"month_7":0},"roc":{"BINARYCLASSIFY":{"data":[{"False positive rate":0,"True positive rate":0},{"False positive rate":0.125,"True positive rate":0},{"False positive rate":0.375,"True positive rate":0},{"False positive rate":0.5,"True positive rate":0},{"False positive rate":1,"True positive rate":1}],"roc_auc":0.25}}}] 2 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/modelList/index.less: -------------------------------------------------------------------------------- 1 | .item{ 2 | display: flex; 3 | padding: 15px 0; 4 | border-bottom: 1px solid rgba(16, 38, 58, 0.15); 5 | } 6 | .itemInfo{ 7 | flex: 4 8 | } 9 | .itemTitle{ 10 | display: flex; 11 | width: 90%; 12 | height: 30px; 13 | align-items: center; 14 | } 15 | .listWrap{ 16 | padding: 24px; 17 | } 18 | .chartItem{ 19 | flex: 1.5; 20 | margin-right: 15px; 21 | } 22 | .shortName{ 23 | flex: 6; 24 | display: inline-block; 25 | text-overflow: ellipsis; 26 | white-space: nowrap; 27 | overflow: hidden; 28 | margin-right: 10px; 29 | } 30 | .moduleDescription{ 31 | width:300px; 32 | white-space:nowrap; 33 | overflow:hidden; 34 | text-overflow:ellipsis; 35 | } 36 | .status{ 37 | flex: 4; 38 | } 39 | .timer{ 40 | flex: 1.5; 41 | display: flex; 42 | flex-direction: column; 43 | } 44 | .userTimer{ 45 | font-size: 24px; 46 | color: rgba(16, 38, 58, 0.45); 47 | } 48 | .timerTit{ 49 | font-size: 16px; 50 | color: rgba(16, 38, 58, 0.85); 51 | } 52 | .mudoleList{ 53 | width: 100%; 54 | flex: 1; 55 | background: #fff; 56 | box-shadow: 0 2px 4px 0 rgba(120, 141, 180, 0.2); 57 | overflow-y: auto; 58 | } 59 | 60 | 61 | .mdlMain { 62 | width: 100%; 63 | flex: 1; 64 | overflow: auto; 65 | } 66 | 67 | .mdlItem { 68 | margin-bottom: 24px; 69 | width: 100%; 70 | box-shadow: 0 2px 4px 0 rgba(120, 141, 180, 0.2); 71 | } 72 | 73 | .mdlItemRow { 74 | // margin: 16px; 75 | height: 230px; 76 | border: 1px solid rgba(16, 38, 58, 0.15); 77 | border-radius: 4px; 78 | } 79 | 80 | .mdlItemStatusRow { 81 | // margin: 16px; 82 | height: 230px; 83 | // border: 1px solid rgba(16, 38, 58, 0.15); 84 | // border-radius: 4px; 85 | } 86 | 87 | .mdlItemCol { 88 | border-right: 1px solid rgba(16, 38, 58, 0.15); 89 | height: 100%; 90 | .ant-list-item { 91 | padding: 0 16px; 92 | height: 38px; 93 | } 94 | } 95 | 96 | .mdlItemColEnd { 97 | height: 100%; 98 | .ant-list-item { 99 | padding: 0 16px; 100 | height: 38px; 101 | } 102 | } 103 | 104 | .mdlItemColName { 105 | border-bottom: 1px solid rgba(16, 38, 58, 0.15); 106 | height: 38px; 107 | display: flex; 108 | align-items: center; 109 | padding-left: 16px; 110 | } 111 | 112 | .mdlItemColList { 113 | height: 190px; 114 | overflow-y: auto; 115 | } 116 | 117 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/modelList/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: ModelList (模型成果列表) 3 | menu: AutoML 4 | order: 70 5 | --- 6 | 7 | import { Playground, PropsTable } from 'docz'; 8 | import { State, Toggle } from 'react-powerplug' 9 | import { AutoML } from '../../index.tsx'; 10 | import modelList from './_mock/modelList.js'; 11 | import jobData from './_mock/jobData.js'; 12 | import { LocaleProviderHoc } from '../../utils/hoc.js'; 13 | 14 | 15 | 16 | # ModelList (模型成果列表) 17 | 18 | 19 | 20 | 引入组件 21 | 22 | ``` 23 | import { AutoML } from 'zet-component'; 24 | ``` 25 | 26 | ## Basic Detail 27 | 28 | 29 | 30 | { 31 | ({state,setState})=>{ 32 | const { ModelList } = AutoML; 33 | return LocaleProviderHoc( 34 | 39 | 40 | ) 41 | } 42 | } 43 | 44 | 45 | 46 | 47 | ## Basic List 48 | 49 | 50 | { 51 | ({state,setState})=>{ 52 | const { ModelList } = AutoML; 53 | return LocaleProviderHoc( 54 | 59 | 60 | ) 61 | } 62 | } 63 | 64 | 65 | 66 | ## Basic chart 67 | 68 | 69 | { 70 | ({state,setState})=>{ 71 | const { ModelList } = AutoML; 72 | return LocaleProviderHoc( 73 | 78 | 79 | ) 80 | } 81 | } 82 | 83 | 84 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/modelList/modelChart.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Card, Row, Col, List, Icon, Spin } from "antd"; 3 | import moment from "moment"; 4 | import Chart from "../../components/charts"; 5 | import { LocaleReceiverHoc } from "../../utils/hoc"; 6 | import CardExtra from './CardExtra'; 7 | import "./index.less"; 8 | // import sliderData from './_mock/chartData'; 9 | // import {start} from "repl"; 10 | 11 | const { SliderChart } = Chart; 12 | 13 | export interface ModelChartProps { 14 | /** 组件行行内样式 */ 15 | data?: any; 16 | autoMLInfo?: any; 17 | item?: any; 18 | intl?: any; 19 | jobId?: string; 20 | getView?: (blockId: string) => void; 21 | getForecast?: (moduleId: string) => void; 22 | openModelDetail?: (modelId: string, modelName: string, jobId: string) => void; 23 | } 24 | 25 | export interface ModelChartState {} 26 | 27 | class ModelChart extends React.Component { 28 | constructor(props: ModelChartProps) { 29 | super(props); 30 | this.state = {}; 31 | } 32 | durtion = (startTime, endTime) => { 33 | const result = moment(endTime).diff(moment(startTime), "seconds"); 34 | return isNaN(result) ? 0 : result; 35 | } 36 | view = blockId => { 37 | this.props.getView && this.props.getView(blockId); 38 | } 39 | 40 | forecast = moduleId => { 41 | this.props.getForecast && this.props.getForecast(moduleId); 42 | } 43 | 44 | openModelDetail = () => { 45 | const { 46 | item: { name, modelId }, 47 | jobId, 48 | } = this.props; 49 | this.props.openModelDetail && 50 | this.props.openModelDetail(modelId, name, jobId); 51 | } 52 | render() { 53 | const { 54 | item: { 55 | blockId, 56 | modelId, 57 | repository, 58 | name, 59 | trainBeginTime, 60 | trainEndTime, 61 | }, 62 | autoMLInfo = {}, 63 | intl = {}, 64 | ...otherProps 65 | } = this.props; 66 | 67 | return ( 68 |
69 | 72 | {autoMLInfo.metricName} 73 | 80 | {name} 81 | 82 | 83 | {intl.runTime || "运行时间"}{" "} 84 | {this.durtion(trainBeginTime, trainEndTime)}s 85 | 86 | 87 | } 88 | extra={ 89 | 96 | } 97 | bordered={false} 98 | // style={{ width: 300 }} 99 | > 100 |
101 | {repository && } 102 |
103 | 104 |
105 | ); 106 | } 107 | } 108 | 109 | export default LocaleReceiverHoc('AutoML')(ModelChart); 110 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/modelList/modelList.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | // import classnames from 'classnames'; 3 | import ModuleListItem from './modelItem'; 4 | import ModelDetail from './modelDetail'; 5 | import ModelChart from './modelChart'; 6 | 7 | import './index.less'; 8 | 9 | export interface ModelListProps { 10 | width?: string | number; 11 | height?: string | number; 12 | style?: React.CSSProperties; 13 | /** model 数据 */ 14 | data: any; 15 | /** 展示类型 */ 16 | contentType: string; 17 | /** job数据 */ 18 | jobData?: any; 19 | autoMLInfo?: any; 20 | /** job id */ 21 | jobId?: string; 22 | /** 查看日志回调 contentType 值为 detail */ 23 | getView?: (blockId: string) => void; 24 | /** 预测按钮事件回调 contentType 值为 detail */ 25 | getForecast?: (moduleId: string) => void; 26 | /** 查看详情回调 contentType 值为 detail */ 27 | openModelDetail?: (modelId: string, modelName: string, jobId: string) => void; 28 | onSeeLogClick?: (dataId: string) => void; 29 | } 30 | 31 | class ModelList extends React.Component { 32 | constructor(props: ModelListProps) { 33 | super(props); 34 | this.state = {}; 35 | } 36 | sort = () => { 37 | const { data } = this.props; 38 | const arr = data.filter((v) => [5, 7, 8].indexOf(v.status) !== -1); 39 | return arr; 40 | } 41 | getContent = () => { 42 | const { contentType, width, height, style, autoMLInfo } = this.props; 43 | const { jobData, jobId, data, ...otherProps } = this.props; 44 | let result; 45 | const styleProps = {width, height, ...style}; 46 | switch (contentType) { 47 | case 'list' : 48 | result = ( 49 |
50 |
51 | { 52 | this.sort().length > 0 && this.sort().map((v) => { 53 | if (v.mouduleName) { 54 | return ( 55 | 56 | ); 57 | } 58 | return ''; 59 | }) 60 | } 61 |
62 |
); 63 | break; 64 | case 'detail': 65 | result = ( 66 |
67 | {jobData.map((item, index) => { 68 | return ; 76 | })} 77 |
78 | ); 79 | break; 80 | case 'chart': 81 | result = ( 82 |
83 | {data.map((item, index) => { 84 | return ; 96 | })} 97 |
98 | ); 99 | break; 100 | default: null; 101 | } 102 | return result; 103 | } 104 | render() { 105 | return ( 106 | 107 | {this.getContent()} 108 | 109 | 110 | ); 111 | } 112 | } 113 | 114 | export default ModelList; 115 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/taskPanel/_mock/jobInfo.js: -------------------------------------------------------------------------------- 1 | export default [{"jobName":"Task17","jobStatus":"STOP","jobId":"6f30f8b4-90d7-49be-abb9-bd57abdbb5b6","jobStartTime":"2019-01-25 15:46:23","jobEndTime":null,"workflowVersionId":"b95b2071-e229-4938-be96-d6fa6f391012","workflowId":"32f6c646-6f2b-436a-88ef-cb04c9c44f75","automlId":"96728f40-ba85-4721-8b61-9af835bcf565","modelList":[{"modelId":"2990dc38-0545-4b86-b060-8f081bc722c2","modelName":"随机森林","score":null,"jobBlockStatus":0,"modelTrainStatus":"CREATE"},{"modelId":"7576440f-3bc1-42ad-97c0-8bf89e5ffcc4","modelName":"XGBoost","score":null,"jobBlockStatus":0,"modelTrainStatus":"CREATE"},{"modelId":"eb0f4830-091b-4473-97a3-4a6889319b91","modelName":"梯度渐进树","score":null,"jobBlockStatus":0,"modelTrainStatus":"CREATE"}]},{"jobName":"Task15","jobStatus":"SUCCESS","jobId":"3ac15482-689f-4b0c-9212-0fd29086c46a","jobStartTime":"2019-01-24 17:25:13","jobEndTime":"2019-01-24 17:27:51","workflowVersionId":"775b9568-1731-4cc9-b597-85b9b19c4a07","workflowId":"32f6c646-6f2b-436a-88ef-cb04c9c44f75","automlId":"96728f40-ba85-4721-8b61-9af835bcf565","modelList":[{"modelId":"c673a83b-86f5-425c-8563-0f1eaf3f548a","modelName":"XGBoost","score":"0.9101","jobBlockStatus":8,"modelTrainStatus":"SUCCESS"},{"modelId":"f7df1c26-4a07-42e6-a003-3e043aa1d264","modelName":"随机森林","score":"0.8962","jobBlockStatus":8,"modelTrainStatus":"SUCCESS"},{"modelId":"a4d6206f-9e91-4532-85fa-cb1d684b856b","modelName":"梯度渐进树","score":"0.8850","jobBlockStatus":8,"modelTrainStatus":"SUCCESS"}]},{"jobName":"Task14","jobStatus":"SUCCESS","jobId":"0a725b73-56e1-42b1-b0bc-317d48e5419f","jobStartTime":"2019-01-16 12:13:51","jobEndTime":"2019-01-16 12:16:58","workflowVersionId":"c35ef979-4f53-4c2e-85d8-6899a0f72383","workflowId":"32f6c646-6f2b-436a-88ef-cb04c9c44f75","automlId":"96728f40-ba85-4721-8b61-9af835bcf565","modelList":[{"modelId":"d04ba571-6b4f-4974-aaa6-d92e93c4a590","modelName":"XGBoost","score":"0.9128","jobBlockStatus":8,"modelTrainStatus":"SUCCESS"},{"modelId":"cd75ff7d-577f-4be6-856b-93615d6399e4","modelName":"随机森林","score":"0.8964","jobBlockStatus":8,"modelTrainStatus":"SUCCESS"},{"modelId":"8cbfc7d8-bb62-4680-9b9b-00052a99f31b","modelName":"梯度渐进树","score":"0.8850","jobBlockStatus":8,"modelTrainStatus":"SUCCESS"}]},{"jobName":"Task6","jobStatus":"SUCCESS","jobId":"5c40d7a5-8e9c-4c7b-aa27-5830d56da6ea","jobStartTime":"2018-11-26 13:14:52","jobEndTime":"2018-11-26 13:17:10","workflowVersionId":"a948703d-9ed0-437d-8f30-d53f9ad738fd","workflowId":"32f6c646-6f2b-436a-88ef-cb04c9c44f75","automlId":"96728f40-ba85-4721-8b61-9af835bcf565","modelList":[{"modelId":"a7e8bf7f-8292-41c2-b3ba-0d93d12de1ea","modelName":"梯度渐进树","score":"1.0000","jobBlockStatus":8,"modelTrainStatus":"SUCCESS"},{"modelId":"bf2c9c93-912f-46b1-8151-a1baaf432147","modelName":"随机森林","score":"1.0000","jobBlockStatus":8,"modelTrainStatus":"SUCCESS"},{"modelId":"bb4dea16-195b-4742-bb90-dbbaa706b85b","modelName":"XGBoost","score":"0.2500","jobBlockStatus":8,"modelTrainStatus":"SUCCESS"}]}] 2 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/taskPanel/contrastButton.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Button } from 'antd'; 3 | import { LocaleReceiverHoc } from "../../utils/hoc"; 4 | 5 | import './index.less'; 6 | 7 | export interface ContrastButtonProps { 8 | /** 组件行行内样式 */ 9 | contrastIds?: string[]; 10 | /** 对比模型id */ 11 | contrastJobId?: string; 12 | item: any; 13 | jobName: string; 14 | jobId: string; 15 | style?: object; 16 | intl?: any; 17 | showContras?: (item: object, jobId: string, jobName: string) => void; 18 | } 19 | 20 | class ContrastButton extends React.Component { 21 | constructor(props: ContrastButtonProps) { 22 | super(props); 23 | this.state = {}; 24 | } 25 | showContras = (e, item, jobId , jobName) => { 26 | e.stopPropagation(); 27 | this.props.showContras(item, jobId, jobName); 28 | } 29 | 30 | isDisabled = () => { 31 | const { item, contrastIds, contrastJobId, jobId } = this.props; 32 | if (contrastJobId && contrastJobId !== jobId) { 33 | return true; 34 | } 35 | if (item.modelTrainStatus) { 36 | return contrastIds.indexOf(item.modelId) !== -1 || item.modelTrainStatus !== 'SUCCESS'; 37 | } 38 | if (item.trainStatus) { 39 | return contrastIds.indexOf(item.modelId) !== -1 || item.trainStatus !== 'SUCCESS'; 40 | } 41 | return contrastIds.indexOf(item.modelId) !== -1; 42 | } 43 | render() { 44 | const { contrastIds, item, jobName, style, jobId, intl= {} } = this.props; 45 | return ( 46 | 57 | ); 58 | } 59 | } 60 | 61 | export default LocaleReceiverHoc('AutoML')(ContrastButton); 62 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/taskPanel/index.less: -------------------------------------------------------------------------------- 1 | 2 | .zet-task-group{ 3 | display: flex; 4 | flex-direction: column; 5 | height:100%; 6 | .zet-task-list{ 7 | flex:1; 8 | overflow: auto; 9 | } 10 | .zet-task{ 11 | margin-bottom: 20px; 12 | } 13 | .zet-task:last-child{ 14 | margin-bottom: 0px; 15 | } 16 | } 17 | .card-title-options{ 18 | float:right; 19 | } 20 | .zet-task{ 21 | //padding: 16px 14px; 22 | cursor: pointer; 23 | .ant-card-body{ 24 | padding:10px; 25 | } 26 | } 27 | .selected-title{ 28 | .ant-card-head{ 29 | background-color:rgba(16, 38, 58, 0.09); 30 | } 31 | } 32 | .task-anchor{ 33 | margin-left: 0; 34 | padding-left: 0; 35 | .ant-anchor-ink{ 36 | display: none; 37 | } 38 | .ant-anchor{ 39 | padding-left: 0; 40 | } 41 | .ant-anchor-link{ 42 | padding: 0; 43 | } 44 | } 45 | .link-wrap{ 46 | overflow: hidden; 47 | line-height: 24px; 48 | margin: 7px 0; 49 | display: flex; 50 | } 51 | .mudole-list-wrap{ 52 | height: 100%; 53 | display: flex; 54 | flex-direction: column; 55 | } 56 | .collapse-wrap{ 57 | .ant-collapse-content{ 58 | overflow: initial; 59 | } 60 | .ant-collapse{ 61 | box-shadow: 0 2px 4px 0 rgba(120, 141, 180, 0.2); 62 | } 63 | } 64 | .short-name{ 65 | // display: inline-block; 66 | width: 100px; 67 | text-overflow: ellipsis; 68 | white-space: nowrap; 69 | overflow: hidden; 70 | } 71 | 72 | .link-wraperr{ 73 | color: rgba(245, 34, 45, 0.85); 74 | &:hover{ 75 | color: rgba(245, 34, 45, 0.85); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/taskPanel/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Task (任务卡) 3 | menu: AutoML 4 | order: 70 5 | --- 6 | 7 | import { Playground, PropsTable } from 'docz'; 8 | import { State, Toggle } from 'react-powerplug' 9 | import { AutoML } from '../../index.tsx'; 10 | import jobList from './_mock/jobInfo.js'; 11 | import { LocaleProviderHoc } from "../../utils/hoc.js"; 12 | 13 | 14 | # AutoML.Design (建模设计) 15 | 自动建模建模设计时候用此组件 16 | 17 | 18 | 引入组件 19 | 20 | ``` 21 | import { AutoML } from 'zet-component'; 22 | ``` 23 | 24 | ## Basic task 25 | 26 | 27 | { 28 | ({state,setState})=>{ 29 | const { Task } = AutoML; 30 | return LocaleProviderHoc( 31 | 50 | ) 51 | } 52 | } 53 | 54 | 55 | 56 | ## task group 57 | 58 | 59 | 60 | { 61 | ({state,setState})=>{ 62 | const { Task } = AutoML; 63 | const { Group } = Task; 64 | return LocaleProviderHoc( 65 | 66 | { jobList && jobList.map(item=>{ 67 | return ( 68 | 71 | ) 72 | })} 73 | 74 | ) 75 | } 76 | } 77 | 78 | 79 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/taskPanel/index.tsx: -------------------------------------------------------------------------------- 1 | import Task from './task'; 2 | import Group from './taskGroup'; 3 | 4 | Task.Group = Group; 5 | export default Task; 6 | -------------------------------------------------------------------------------- /packages/zet-component/src/automl/taskPanel/taskGroup.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import classnames from 'classnames'; 3 | import { Input } from 'antd'; 4 | import './index.less'; 5 | 6 | const Search = Input.Search; 7 | 8 | export interface TaskGroupProps { 9 | /** 组件行行内样式 */ 10 | style?: React.CSSProperties; 11 | /** 自定义类名 */ 12 | className?: string; 13 | width?: string | number; 14 | changeJob?: (record: object) => void; 15 | delJob?: (jobId: string) => void; 16 | onSearch?: (keywords: string) => void; 17 | selectedTaskId?: string; 18 | } 19 | 20 | export interface TaskGroupState { 21 | selectedTaskId: string; 22 | selectedModelKeys: string[]; 23 | } 24 | 25 | class TaskGroup extends React.Component { 26 | constructor(props: TaskGroupProps) { 27 | super(props); 28 | this.state = { 29 | selectedTaskId: '', 30 | selectedModelKeys: [], 31 | }; 32 | } 33 | componentDidMount() { 34 | this.setState({ 35 | selectedTaskId: this.props.selectedTaskId, 36 | }); 37 | } 38 | componentWillReceiveProps(nextProps) { 39 | if (this.props.selectedTaskId !== nextProps.selectedTaskId) { 40 | this.setState({ 41 | selectedTaskId: nextProps.selectedTaskId, 42 | }); 43 | } 44 | } 45 | selectedRow = (record) => { 46 | this.setState({ 47 | selectedTaskId: record.jobId, 48 | }); 49 | this.props.changeJob && this.props.changeJob(record); 50 | } 51 | setSelectedModelKeys = (selectedModelKeys) => { 52 | this.setState({ 53 | selectedModelKeys, 54 | }); 55 | } 56 | instertSelectedRow = (child, extendProps) => { 57 | if (typeof child === 'object') { 58 | return React.cloneElement(child, extendProps); 59 | } 60 | return child; 61 | } 62 | search = (keywords) => { 63 | this.props.onSearch && this.props.onSearch(keywords); 64 | } 65 | render() { 66 | const { children, className, style, width, ...otherProps } = this.props; 67 | const { selectedTaskId, selectedModelKeys } = this.state; 68 | const extendProps = { 69 | ...otherProps, 70 | selectedRow: this.selectedRow, 71 | selectedTaskId, 72 | setSelectedModelKeys: this.setSelectedModelKeys, 73 | selectedModelKeys, 74 | }; 75 | const kids = React.Children.map(children, (child) => { 76 | return this.instertSelectedRow(child as React.ReactChild, extendProps); 77 | }); 78 | const cNames = classnames('zet-task-group', className); 79 | const styleProps = {width, ...style}; 80 | return ( 81 |
82 | 87 |
88 | {kids} 89 |
90 |
91 | ); 92 | } 93 | } 94 | 95 | export default TaskGroup; 96 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/ZetIcon/index.js: -------------------------------------------------------------------------------- 1 | import { Icon } from 'antd'; 2 | import version from '../../config/iconFontConfig'; 3 | 4 | const ZetIcon = Icon.createFromIconfontCN({ 5 | // scriptUrl: '//at.alicdn.com/t/font_810702_0wr5qh39yre.js', // generated by iconfont.cn 6 | // scriptUrl: '//at.alicdn.com/t/font_810702_gtugwqme7je.js', 7 | // scriptUrl: '/icon/font_810702_roevf7cc95p/iconfont.js', 8 | scriptUrl: `/icon/${version}/iconfont.js`, 9 | }); 10 | 11 | export default ZetIcon; 12 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/ZetIcon/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ZetIcon 3 | subtitle: icon图标 4 | --- 5 | 6 | ## API 7 | 8 | ZetInput的属性说明如下： 9 | 10 | 属性 | 说明 | 类型 | 默认值 11 | -----|-----|-----|------ 12 | type | icon名字详见public/fonts/iconfont中的demo 例：icon-audit | string 13 | style | style {{ color: 'red', fontSize: 12 }} | string 14 | 15 | 16 | 17 | ### 去色说明 18 | 如果遇到单色图标不能改颜色，需要到 `iconfont` 去色 19 | 然后生成链接，替换 ZetIcon scriptUrl 20 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/charts/LineChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Chart, 4 | Geom, 5 | Axis, 6 | Tooltip, 7 | } from 'bizcharts'; 8 | 9 | class LineChart extends React.PureComponent { 10 | state = {} 11 | 12 | render() { 13 | const { data = [], cols = {}, chart = {}, axisH = {}, axisV = {}, 14 | tooltip = {}, geomLine = {}, geomPoint = {}, showxy = true, yName } = this.props; 15 | 16 | if (this.chartI) { 17 | this.chartI.forceFit(); 18 | } 19 | return ( 20 | { 28 | this.chartI = chartI; 29 | }} 30 | > 31 | {showxy && ()} 32 | {showxy && } 33 | 34 | { 42 | return { 43 | title: x, 44 | name: yName || '', 45 | value: y, 46 | }; 47 | }] 48 | } 49 | /> 50 | { 61 | return { 62 | title: x, 63 | name: yName || 'y', 64 | value: y, 65 | }; 66 | }] 67 | } 68 | {...geomPoint} 69 | /> 70 | 71 | ); 72 | } 73 | } 74 | 75 | export default LineChart; 76 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/charts/PieChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Chart, Geom, Axis, Tooltip, Coord, Guide, Legend } from 'bizcharts'; 3 | import DataSet from '@antv/data-set'; 4 | 5 | const { DataView } = DataSet; 6 | const { Html } = Guide; 7 | 8 | class PieChart extends React.Component { 9 | getCols = () => { 10 | return { 11 | percent: { 12 | formatter: val => { 13 | val = `${val * 100}%`; 14 | return val; 15 | }, 16 | }, 17 | }; 18 | }; 19 | 20 | render() { 21 | const { data = [], chart = {}, tooltip = {}, 22 | coord = {}, guideHtml = {}, geom = {}, legend = {}, color = ['#13c2c2', '#f0f2f5'] } = this.props; 23 | const legendObj = legend === true ? {} : legend; 24 | const dv = new DataView().source(data).transform({ 25 | type: 'percent', 26 | field: 'y', 27 | dimension: 'x', 28 | as: 'percent', 29 | }); 30 | const cols = this.getCols(); 31 | return ( 32 |
33 | 41 | 42 | 43 | {!!legend && ( 44 | { 46 | if (name === 'fail') { 47 | return '失败'; 48 | } if (name === 'success') { 49 | return '成功'; 50 | } 51 | return name; 52 | }} 53 | {...legendObj} 54 | /> 55 | )} 56 | 61 | 62 | 68 | 69 | { 76 | percent = `${Math.round(percent * 100)}%`; 77 | return { 78 | name: item, 79 | value: percent, 80 | }; 81 | }, 82 | ]} 83 | style={{ 84 | lineWidth: 1, 85 | stroke: '#fff', 86 | }} 87 | {...geom} 88 | /> 89 | 90 |
91 | ); 92 | } 93 | } 94 | 95 | export default PieChart; 96 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/charts/_mock/sliderChartData2.js: -------------------------------------------------------------------------------- 1 | export default { 2 | "data": [ 3 | { 4 | "x": "2017-07-29 05:49:00", 5 | "y": 2327.3 6 | }, 7 | { 8 | "x": "2017-07-18 12:28:00", 9 | "y": 3018.35 10 | }, 11 | { 12 | "x": "2017-07-13 14:30:00", 13 | "y": 3096.55 14 | }, 15 | { 16 | "x": "2017-08-17 02:39:00", 17 | "y": 2164.95 18 | }, 19 | { 20 | "x": "2017-07-29 17:32:00", 21 | "y": 3450.15 22 | }, 23 | { 24 | "x": "2017-08-04 13:55:00", 25 | "y": 3067.65 26 | }, 27 | { 28 | "x": "2017-08-21 04:53:00", 29 | "y": 2051.05 30 | }, 31 | { 32 | "x": "2017-08-11 12:38:00", 33 | "y": 3536 34 | }, 35 | { 36 | "x": "2017-08-26 22:52:00", 37 | "y": 3684.75 38 | }, 39 | { 40 | "x": "2017-06-11 18:56:00", 41 | "y": 3184.1 42 | } 43 | 44 | ], 45 | "name": "xseries", 46 | "end": "2017-09-08 22:11:00", 47 | "begin": "2017-06-11 00:51:00" 48 | } 49 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/charts/_mock/sliderChartData3.js: -------------------------------------------------------------------------------- 1 | export default { 2 | "data": [ 3 | {lower: 0, upper: 7.5696092299, x: 1551888000000}, 4 | ,{lower: 0, upper: 6.6087313715, x: 1551888600000} 5 | ,{lower: 0, upper: 6.97313326, x: 1551889200000} 6 | ,{lower: 0, upper: 7.0478136269, x: 1551889800000} 7 | ,{lower: 0, upper: 7.0793531727, x: 1551890400000} 8 | ,{lower: 0, upper: 7.5166269636, x: 1551891000000} 9 | ,{lower: 0, upper: 7.0968485116, x: 1551891600000} 10 | ,{lower: 0, upper: 6.8291724596, x: 1551892200000} 11 | ,{lower: 0, upper: 7.7707407783, x: 1551892800000} 12 | ,{lower: 0, upper: 7.3327604655, x: 1551893400000} 13 | , {lower: 0, upper: 7.2710788096, x: 1551894000000} 14 | , {lower: 0, upper: 7.3580018408, x: 1551894600000} 15 | , {lower: 0, upper: 7.4863548715, x: 1551895200000} 16 | , {lower: 0, upper: 6.692688058, x: 1551895800000} 17 | , {lower: 0, upper: 6.4029700307, x: 1551896400000} 18 | , {lower: 0, upper: 7.2485647533, x: 1551897000000} 19 | , {lower: 0, upper: 7.2450686235, x: 1551897600000} 20 | , {lower: 0, upper: 7.5403220237, x: 1551898200000} 21 | , {lower: 0, upper: 7.5550367762, x: 1551898800000} 22 | , {lower: 0, upper: 6.1517208985, x: 1551899400000} 23 | , {lower: 0, upper: 7.1528128215, x: 1551900000000} 24 | , {lower: 0, upper: 7.9449671714, x: 1551900600000} 25 | , {lower: 0, upper: 7.2488552615, x: 1551901200000} 26 | , {lower: 0, upper: 7.4340246081, x: 1551901800000} 27 | , {lower: 0, upper: 6.7841619788, x: 1551902400000} 28 | , {lower: 0, upper: 7.1430108275, x: 1551903000000} 29 | , {lower: 0, upper: 7.5125800723, x: 1551903600000} 30 | , {lower: 0, upper: 7.7892965477, x: 1551904200000} 31 | , {lower: 0, upper: 6.695179677, x: 1551904800000} 32 | , {lower: 0, upper: 7.2290994502, x: 1551905400000} 33 | , {lower: 0, upper: 6.9859907716, x: 1551906000000} 34 | , {lower: 0, upper: 7.7114234657, x: 1551906600000} 35 | , {lower: 0, upper: 7.0405664632, x: 1551907200000} 36 | , {lower: 0, upper: 7.1433156235, x: 1551907800000} 37 | , {lower: 0, upper: 7.7104445398, x: 1551908400000} 38 | , {lower: 0, upper: 7.1685842977, x: 1551909000000} 39 | , {lower: 0, upper: 7.1335795882, x: 1551909600000} 40 | , {lower: 0, upper: 7.5617026518, x: 1551910200000} 41 | , {lower: 0, upper: 7.4961442689, x: 1551910800000} 42 | , {lower: 0, upper: 7.3587250631, x: 1551911400000} 43 | , {lower: 0, upper: 7.0248772501, x: 1551912000000} 44 | , {lower: 0, upper: 7.050658451, x: 1551912600000} 45 | , {lower: 0, upper: 7.302603688, x: 1551913200000} 46 | , {lower: 0, upper: 7.0680185478, x: 1551913800000} 47 | , {lower: 0, upper: 7.5945990218, x: 1551914400000} 48 | , {lower: 0, upper: 7.0953077527, x: 1551915000000} 49 | , {lower: 0, upper: 6.9501106264, x: 1551915600000} 50 | , {lower: 0, upper: 8.197521868, x: 1551916200000} 51 | , {lower: 0, upper: 7.6310467507, x: 1551916800000} 52 | , {lower: 0, upper: 7.1314700255, x: 1551917400000} 53 | , {lower: 0, upper: 7.6194913685, x: 1551918000000} 54 | , {lower: 0, upper: 7.2741762317, x: 1551918600000} 55 | , {lower: 0, upper: 7.2906743601, x: 1551919200000} 56 | , {lower: 0, upper: 7.7041032977, x: 1551919800000} 57 | , {lower: 0, upper: 7.5588594293, x: 1551920400000} 58 | , {lower: 0, upper: 6.7326108946, x: 1551921000000} 59 | , {lower: 0, upper: 7.4785846796, x: 1551921600000} 60 | , {lower: 0, upper: 7.4284512923, x: 1551922200000} 61 | , {lower: 0, upper: 7.3344300359, x: 1551922800000} 62 | , {lower: 0, upper: 7.6469600925, x: 1551923400000} 63 | , {lower: 0, upper: 7.5517117681, x: 1551924000000} 64 | , {lower: 0, upper: 7.9096722092, x: 1551924600000} 65 | , {lower: 0, upper: 7.7316510067, x: 1551925200000} 66 | , {lower: 0, upper: 7.1075711419, x: 1551925800000} 67 | , {lower: 0, upper: 7.473994091, x: 1551926400000} 68 | , {lower: 0, upper: 7.3360474011, x: 1551927000000} 69 | , {lower: 0, upper: 7.7049067546, x: 1551927600000} 70 | , {lower: 0, upper: 6.7994325026, x: 1551928200000} 71 | , {lower: 0, upper: 7.749090332, x: 1551928800000} 72 | , {lower: 0, upper: 6.8418322042, x: 1551929400000} 73 | , {lower: 0, upper: 7.5756392897, x: 1551930000000} 74 | , {lower: 0, upper: 7.3039046132, x: 1551930600000} 75 | , {lower: 0, upper: 6.2587168957, x: 1551931200000} 76 | , {lower: 0, upper: 7.5069363133, x: 1551931800000} 77 | , {lower: 0, upper: 6.6311150341, x: 1551932400000} 78 | , {lower: 0, upper: 6.8148278222, x: 1551933000000} 79 | , {lower: 0, upper: 7.4025987918, x: 1551933600000} 80 | , {lower: 0, upper: 7.480763877, x: 1551934200000} 81 | , {lower: 0, upper: 7.6550355304, x: 1551934800000} 82 | , {lower: 0, upper: 7.9820295467, x: 1551935400000} 83 | , {lower: 0, upper: 7.4153301826, x: 1551936000000} 84 | , {lower: 0, upper: 7.2010478692, x: 1551936600000} 85 | , {lower: 0, upper: 6.6983289913, x: 1551937200000} 86 | , {lower: 0, upper: 6.3638558417, x: 1551937800000} 87 | , {lower: 0, upper: 6.5989787545, x: 1551938400000} 88 | , {lower: 0, upper: 7.0329764844, x: 1551939000000} 89 | , {lower: 0, upper: 7.6926776325, x: 1551939600000} 90 | , {lower: 0, upper: 7.81043194, x: 1551940200000} 91 | , {lower: 0, upper: 7.5321809632, x: 1551940800000} 92 | , {lower: 0, upper: 8.0001431379, x: 1551941400000} 93 | , {lower: 0, upper: 7.2002560257, x: 1551942000000} 94 | , {lower: 0, upper: 6.8121802133, x: 1551942600000} 95 | , {lower: 0, upper: 7.1805311575, x: 1551943200000} 96 | , {lower: 0, upper: 7.0000583857, x: 1551943800000} 97 | , {lower: 0, upper: 7.535548633, x: 1551944400000} 98 | , {lower: 0, upper: 7.5794129842, x: 1551945000000} 99 | , {lower: 0, upper: 7.8263173318, x: 1551945600000} 100 | , {lower: 0, upper: 8.0507738017, x: 1551946200000} 101 | , {lower: 0, upper: 7.9379727962, x: 1551946800000} 102 | , {lower: 0, upper: 7.6427932173, x: 1551947400000} 103 | ], 104 | "name": "1551947400000", 105 | "end": "2017-09-08 22:11:00", 106 | "begin": "1551888000000" 107 | } 108 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/charts/index.js: -------------------------------------------------------------------------------- 1 | import SliderChart from './sliderChart'; 2 | import LineChart from './LineChart'; 3 | import PieChart from './PieChart'; 4 | import Rect4 from './rect4'; 5 | const Chart = { 6 | SliderChart, 7 | LineChart, 8 | PieChart, 9 | Rect4, 10 | }; 11 | export default Chart; 12 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /packages/zet-component/src/components/charts/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Chart (图表) 3 | menu: Components 4 | order: 70 5 | --- 6 | 7 | import { Playground, PropsTable } from 'docz'; 8 | import { State, Toggle } from 'react-powerplug' 9 | import { Components } from '../../index.tsx'; 10 | import data from './_mock/sliderChartData.js'; 11 | import data2 from './_mock/sliderChartData2.js'; 12 | import data3 from './_mock/sliderChartData3.js'; 13 | 14 | 15 | 16 | # Components.Chart (建模设计) 17 | 自动建模建模设计时候用此组件 18 | 19 | 20 | ## 基础展示 21 | 22 | 引入组件 23 | ``` 24 | import { Components } from 'zet-component'; 25 | ``` 26 | ####基础 27 | 28 | 29 | 30 | {({ state, setState }) => { 31 | const {Chart:{SliderChart}} = Components; 32 | return ( 33 | 38 | ) 39 | }} 40 | 41 | 42 | 43 | 44 | #### 自定义 45 | 46 | 47 | 48 | {({ state, setState }) => { 49 | const {Chart:{SliderChart}} = Components; 50 | return ( 51 | 64 | ) 65 | }} 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/charts/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import SliderChart from './sliderChart'; 3 | import LineChart from './LineChart'; 4 | import PieChart from './PieChart'; 5 | import Rect4 from './rect4' 6 | 7 | const Chart = { 8 | SliderChart, 9 | LineChart, 10 | PieChart, 11 | Rect4, 12 | } 13 | 14 | export default Chart; 15 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/charts/rect4.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Chart, 4 | Geom, 5 | Axis, 6 | Tooltip, 7 | Coord, 8 | } from 'bizcharts'; 9 | import { DataView } from '@antv/data-set'; 10 | 11 | function Rect4(props) { 12 | const { data, height } = props; 13 | const newData = Object.keys(data).map(key => ({ 14 | x: key, y: data[key], 15 | })); 16 | const dv = new DataView().source(newData); 17 | dv.transform({ 18 | type: 'sort', 19 | callback(a, b) { 20 | return a.y - b.y; 21 | }, 22 | }); 23 | const scale = { 24 | y: { 25 | min: 0, 26 | // max: 1, 27 | alias: 'value', 28 | }, 29 | }; 30 | return ( 31 | 32 | 33 | { 38 | if (text.length > 20) { 39 | return `${text.slice(0, 18)}...`; 40 | } 41 | return text; 42 | }, 43 | }} 44 | grid={null} 45 | tickLine={null} 46 | line={null} 47 | /> 48 | 49 | 50 | { 56 | return { 57 | name: 'value', 58 | value: `${y * 100}%`, 59 | }; 60 | }] 61 | } 62 | /> 63 | 64 | ); 65 | } 66 | 67 | export default Rect4; 68 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/ellipsis/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | export interface IEllipsisProps { 3 | tooltip?: boolean; 4 | length?: number; 5 | lines?: number; 6 | style?: React.CSSProperties; 7 | className?: string; 8 | fullWidthRecognition?: boolean; 9 | } 10 | 11 | export function getStrFullLength(str: string): number; 12 | export function cutStrByFullLength(str: string, maxLength: number): number; 13 | 14 | export default class Ellipsis extends React.Component {} 15 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/ellipsis/index.en-US.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ellipsis 3 | cols: 1 4 | order: 10 5 | --- 6 | 7 | When the text is too long, the Ellipsis automatically shortens it according to its length or the maximum number of lines. 8 | 9 | ## API 10 | 11 | Property | Description | Type | Default 12 | ----|------|-----|------ 13 | tooltip | tooltip for showing the full text content when hovering over | boolean | - 14 | length | maximum number of characters in the text before being truncated | number | - 15 | lines | maximum number of rows in the text before being truncated | number | `1` 16 | fullWidthRecognition | whether consider full-width character length as 2 when calculate string length | boolean | - 17 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/ellipsis/index.less: -------------------------------------------------------------------------------- 1 | .ellipsis { 2 | overflow: hidden; 3 | // display: inline-block; 4 | word-break: break-all; 5 | width: 100%; 6 | } 7 | 8 | .lines { 9 | position: relative; 10 | .shadow { 11 | display: block; 12 | position: relative; 13 | color: transparent; 14 | opacity: 0; 15 | z-index: -999; 16 | } 17 | } 18 | 19 | .lineClamp { 20 | position: relative; 21 | overflow: hidden; 22 | text-overflow: ellipsis; 23 | display: -webkit-box; 24 | } 25 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/ellipsis/index.test.js: -------------------------------------------------------------------------------- 1 | import { getStrFullLength, cutStrByFullLength } from './index'; 2 | 3 | describe('test calculateShowLength', () => { 4 | it('get full length', () => { 5 | expect(getStrFullLength('一二，a,')).toEqual(8); 6 | }); 7 | it('cut str by full length', () => { 8 | expect(cutStrByFullLength('一二，a,', 7)).toEqual('一二，a'); 9 | }); 10 | it('cut str when length small', () => { 11 | expect(cutStrByFullLength('一22三', 5)).toEqual('一22'); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/ellipsis/index.zh-CN.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ellipsis 3 | subtitle: 文本自动省略号 4 | cols: 1 5 | order: 10 6 | --- 7 | 8 | 文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。 9 | 10 | ## API 11 | 12 | 参数 | 说明 | 类型 | 默认值 13 | ----|------|-----|------ 14 | tooltip | 移动到文本展示完整内容的提示 | boolean | - 15 | length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | - 16 | lines | 在按照行数截取下最大的行数，超过则截取省略 | number | `1` 17 | fullWidthRecognition | 是否将全角字符的长度视为2来计算字符串长度 | boolean | - 18 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/icon/index.js: -------------------------------------------------------------------------------- 1 | import { Icon } from 'antd'; 2 | import version from '../../config/iconFontConfig'; 3 | 4 | const ZetIcon = Icon.createFromIconfontCN({ 5 | // scriptUrl: '//at.alicdn.com/t/font_810702_0wr5qh39yre.js', // generated by iconfont.cn 6 | // scriptUrl: '//at.alicdn.com/t/font_810702_gtugwqme7je.js', 7 | // scriptUrl: '/icon/font_810702_roevf7cc95p/iconfont.js', 8 | scriptUrl: `/icon/${version}/iconfont.js`, 9 | }); 10 | 11 | export default ZetIcon; 12 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/icon/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ZetIcon 3 | subtitle: icon图标 4 | --- 5 | 6 | ## API 7 | 8 | ZetInput的属性说明如下： 9 | 10 | 属性 | 说明 | 类型 | 默认值 11 | -----|-----|-----|------ 12 | type | icon名字详见public/fonts/iconfont中的demo 例：icon-audit | string 13 | style | style {{ color: 'red', fontSize: 12 }} | string 14 | 15 | 16 | 17 | ### 去色说明 18 | 如果遇到单色图标不能改颜色，需要到 `iconfont` 去色 19 | 然后生成链接，替换 ZetIcon scriptUrl 20 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import Chart from './charts'; 3 | 4 | 5 | const Components = { 6 | Chart, 7 | 8 | } 9 | 10 | export default Components; 11 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/input/index.less: -------------------------------------------------------------------------------- 1 | @import '../../style/minxins/index.less'; 2 | @import '../../style/index.less'; 3 | 4 | @input-prefix-cls: ~'@{zet-prefix}-input'; 5 | 6 | .@{input-prefix-cls} { 7 | height: 32px; 8 | flex: 1; 9 | &-wrapper { 10 | display: flex; 11 | width: 100%; 12 | &-num { 13 | margin-left: @margin-sm; 14 | color: #ccc; 15 | width: 40px; 16 | } 17 | } 18 | } 19 | 20 | .zetTextareaWrapper{ 21 | .zetInputWrapperNum{ 22 | margin-left: 10px; 23 | color: #ccc; 24 | } 25 | } 26 | .clearIcon{ 27 | color: #999; 28 | cursor: pointer; 29 | display: none; 30 | } 31 | .zetSearch{ 32 | position: relative; 33 | display: inline-block; 34 | } 35 | .iconSearch{ 36 | color: #A7B5C6 ; 37 | font-size: 14px; 38 | cursor: pointer; 39 | } 40 | .zetSearchInput{ 41 | :global{ 42 | .ant-input-disabled:hover{ 43 | border-color:#e6d8d8!important; 44 | } 45 | .ant-input-suffix{ 46 | right: 10px; 47 | } 48 | .ant-input:not(:last-child) { 49 | padding-right: 38px; 50 | } 51 | } 52 | } 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/input/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Input 3 | subtitle: 文本框 4 | --- 5 | 6 | 修改了antd input组件样式 7 | 8 | ## API 9 | 10 | ZetInput的属性说明如下： 11 | 12 | 属性 | 说明 | 类型 | 默认值 13 | -----|-----|-----|------ 14 | allowClear | 是否允许清除文本框的值 | Boolean | true 15 | maxLength | 支持最大输入的文字数， 0代表不启用此属性 | Number | 0 16 | width | 设置input的宽度 | string/number | 280 17 | 18 | 注: ZetInput 其它特性继承 Antd Input 组件 19 | 20 | #### ZetInput.Search 21 | 22 | 属性 | 说明 | 类型 | 默认值 23 | -----|-----|-----|------ 24 | onChange | 文本框的值发生改变触发 | function(value) 25 | onSearch | 点击搜索或按下回车键时的回调 | function(value) 26 | value | 输入框内容 | string 27 | allowClear | 是否允许清除文本框的值 | Boolean | true 28 | width | 设置input的宽度 | string/number | 190 29 | 30 | 其余属性和 Input 一致。 31 | 32 | #### ZetInput.Textarea 33 | 34 | 属性 | 说明 | 类型 | 默认值 35 | -----|-----|-----|------ 36 | change | 文本框的值发生改变触发 | function(value) 37 | width | 设置Textarea的宽度 | string/number | 190 38 | maxLength | 支持最大输入的文字数， 0代表不启用此属性 | Number | 0 39 | 40 | 其余属性和 Textarea 一致。 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/input/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Input (输入框) 3 | menu: Components 4 | order: 80 5 | --- 6 | 7 | import { Playground, PropsTable } from 'docz'; 8 | import { Input } from '../../index.tsx' 9 | 10 | # Input 11 | 在antd基础上扩展了maxLength属性 12 | 13 | ## 使用 14 | 15 | 16 | 17 | 18 | 19 | ## 限制可输入字符数(maxLength) 20 | 21 | 22 | 23 | 24 | ## TextArea 限制可输入字符数(maxLength) 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/input/index.tsx: -------------------------------------------------------------------------------- 1 | import Input from './input'; 2 | import Search from './search'; 3 | import TextArea from './textarea'; 4 | 5 | Input.Search = Search; 6 | Input.TextArea = TextArea; 7 | 8 | export default Input; 9 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/input/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Input } from 'antd'; 3 | import classNames from 'classnames'; 4 | import TextArea from './textarea'; 5 | import './index.less'; 6 | 7 | export interface ZetInputProps { 8 | /** 组件行行内样式 */ 9 | style?: React.CSSProperties; 10 | /** 自定义类名 */ 11 | className?: string; 12 | /** 资源组件的宽度 */ 13 | width?: string | number; 14 | /** 可输入的最大长度 */ 15 | maxLength: string | number; 16 | value?: string; 17 | defaultValue?; string; 18 | /** onChange 事件 */ 19 | onChange: (value: string) => void; 20 | } 21 | 22 | export interface ZetInputState { 23 | /** value 值 */ 24 | value: string; 25 | } 26 | 27 | class ZetInput extends React.Component { 28 | static TextArea: typeof TextArea; 29 | static Search: any; 30 | constructor(props: ZetInputProps) { 31 | super(props); 32 | this.state = { 33 | value: this.getValue(props.value) || this.getValue(props.defaultValue) || '', 34 | }; 35 | } 36 | 37 | getValue = (value) => { 38 | let newValue = ''; 39 | const { maxLength } = this.props; 40 | // tslint:disable-next-line: prefer-conditional-expression 41 | if (maxLength > 0 && ((value && value.length) > maxLength)) { 42 | newValue = value.substring(0, maxLength); 43 | } else { 44 | newValue = value; 45 | } 46 | return newValue; 47 | } 48 | 49 | getLabel = () => { 50 | const { value } = this.state; 51 | const { maxLength } = this.props; 52 | const returnValue = maxLength === 0 ? '' : `${(value && value.toString().length) || 0}/${maxLength}`; 53 | return returnValue; 54 | } 55 | 56 | onChange = (e) => { 57 | const { onChange, maxLength } = this.props; 58 | let value = e.target && e.target.value; 59 | if (typeof value === 'string') { 60 | value = value.trim(); 61 | } 62 | if (maxLength > 0 && (value.length > maxLength)) { 63 | value = value.substring(0, maxLength); 64 | } 65 | this.setState({ 66 | value, 67 | }); 68 | if (onChange) { 69 | onChange(value); 70 | } 71 | } 72 | 73 | public render() { 74 | const { maxLength, className, ...otherProps } = this.props; 75 | const { value } = this.state; 76 | const rootClass = classNames('zet-input-wrapper', className); 77 | return ( 78 | 79 | 85 | {(!maxLength || maxLength === 0) ? 86 | '' : 87 | {`${this.getLabel()}`}} 88 | 89 | ); 90 | } 91 | } 92 | 93 | export default ZetInput; 94 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/input/search.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Icon, Input } from 'antd'; 4 | import classNames from 'classnames'; 5 | import './index.less'; 6 | 7 | class ZetSearch extends React.Component { 8 | static defaultProps = { 9 | onSearch: () => {}, 10 | onChange: () => {}, 11 | // width: 190, 12 | allowClear: true, 13 | className: '', 14 | } 15 | 16 | constructor(props) { 17 | super(props); 18 | this.state = { 19 | value: props.value || props.defaultValue || '', 20 | }; 21 | this.timer = null; 22 | } 23 | 24 | onSearchClick = (e) => { 25 | const value = e.target && e.target.value; 26 | const { onSearch } = this.props; 27 | onSearch(value); 28 | } 29 | 30 | onIconClick = () => { 31 | const { onSearch } = this.props; 32 | onSearch(this.state.value); 33 | } 34 | 35 | onKeyChange = (e) => { 36 | const value = e.target && e.target.value; 37 | const { onChange } = this.props; 38 | this.setState({ 39 | value, 40 | }); 41 | 42 | if (this.timer) clearTimeout(this.timer); 43 | this.timer = setTimeout(() => { 44 | onChange(value); 45 | }, 500); 46 | } 47 | 48 | clearSelection = () => { 49 | const { onChange } = this.props; 50 | const value = ''; 51 | this.setState({ 52 | value: '', 53 | }); 54 | if (onChange) { 55 | onChange(value); 56 | } 57 | } 58 | 59 | render() { 60 | const { value } = this.state; 61 | const { style, allowClear, onSearch, onChange, className, ...restProps } = this.props; 62 | const clearIcon = allowClear && value.length > 0 ? ( 63 | 64 | 65 | 66 | ) : ; 67 | const rootClass = classNames('zetSearch', className); 68 | return ( 69 |
70 | 79 |
80 | ); 81 | } 82 | } 83 | 84 | ZetSearch.propTypes = { 85 | // width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 86 | onSearch: PropTypes.func, 87 | onChange: PropTypes.func, 88 | allowClear: PropTypes.bool, 89 | className: PropTypes.string, 90 | }; 91 | 92 | export default ZetSearch; 93 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/input/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Input } from 'antd'; 3 | import classNames from 'classnames'; 4 | import './index.less'; 5 | 6 | const AntdTextArea = Input.TextArea; 7 | 8 | export interface TextAreaProps { 9 | /** 组件行行内样式 */ 10 | style?: React.CSSProperties; 11 | /** 自定义类名 */ 12 | className?: string; 13 | /** 资源组件的宽度 */ 14 | width?: string | number; 15 | /** 可输入的最大长度 */ 16 | maxLength: string | number; 17 | value?: string; 18 | defaultValue?; string; 19 | /** onChange 事件 */ 20 | onChange: (value: string) => void; 21 | } 22 | 23 | export interface TextAreaState { 24 | /** value 值 */ 25 | value: string; 26 | } 27 | 28 | class TextArea extends React.Component { 29 | constructor(props: TextAreaProps) { 30 | super(props); 31 | this.state = { 32 | value: this.getValue(props.value) || this.getValue(props.defaultValue) || '', 33 | }; 34 | } 35 | 36 | getValue = (value) => { 37 | let newValue = ''; 38 | const { maxLength } = this.props; 39 | // tslint:disable-next-line: prefer-conditional-expression 40 | if (maxLength > 0 && ((value && value.length) > maxLength)) { 41 | newValue = value.substring(0, maxLength); 42 | } else { 43 | newValue = value; 44 | } 45 | return newValue; 46 | } 47 | 48 | getLabel = () => { 49 | const { value } = this.state; 50 | const { maxLength } = this.props; 51 | const returnValue = maxLength === 0 ? '' : `${(value && value.toString().length) || 0}/${maxLength}`; 52 | return returnValue; 53 | } 54 | 55 | onChange = (e) => { 56 | const { onChange, maxLength } = this.props; 57 | let value = e.target && e.target.value; 58 | if (typeof value === 'string') { 59 | value = value.trim(); 60 | } 61 | if (maxLength > 0 && (value.length > maxLength)) { 62 | value = value.substring(0, maxLength); 63 | } 64 | this.setState({ 65 | value, 66 | }); 67 | if (onChange) { 68 | onChange(value); 69 | } 70 | } 71 | 72 | public render() { 73 | const { maxLength, className, ...otherProps } = this.props; 74 | const { value } = this.state; 75 | const rootClass = classNames('zet-input-wrapper', className); 76 | return ( 77 | 78 | 84 | {(!maxLength || maxLength === 0) ? 85 | '' : 86 | {`${this.getLabel()}`}} 87 | 88 | ); 89 | } 90 | } 91 | 92 | export default TextArea; 93 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/locale-provider/en_US.js: -------------------------------------------------------------------------------- 1 | export default { 2 | locale: 'en-US', 3 | global: { 4 | placeholder: 'Placeholder', 5 | }, 6 | AutoML: { 7 | ok: 'OK' , 8 | cancel: 'Cancel', 9 | off: 'off', 10 | on: 'on', 11 | shrink:'shrink', 12 | unfold:'unfold', 13 | autoParams:'Automatic tuning parameter', 14 | grading:'Grading index', 15 | runTime: 'Run time', 16 | trainTime: 'Train Time', 17 | training: 'Traning', 18 | running: 'Running', 19 | waiting: 'Waiting', 20 | param: 'params', 21 | predict: 'Predict', 22 | view: 'View', 23 | log: 'Log', 24 | time: 'Time', 25 | viewLog: 'View log', 26 | exception: 'Exception', 27 | done: 'Done', 28 | contrast: 'Contrast', 29 | added: 'Added', 30 | delete: 'Delete', 31 | deleteConfirm: 'Are you sure you want to delete it?' 32 | }, 33 | Component:{ 34 | time: 'Time', 35 | }, 36 | Test: { 37 | okText: 'Ok', 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/locale-provider/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: LocalProvider (国际化) 3 | menu: Other 4 | order: 80 5 | --- 6 | 7 | import { Playground, PropsTable } from 'docz'; 8 | import { State, Toggle } from 'react-powerplug'; 9 | import { Button } from 'antd'; 10 | import { LocaleProvider} from '../../index.tsx'; 11 | 12 | # LocalProvider 13 | 14 | ## 使用 15 | LocaleProvider 使用 React 的 context 特性，只需在应用外围包裹一次即可全局生效。 16 | 17 | ``` 18 | import { LocaleProvider } from 'zet-component'; 19 | 20 | return ; 21 | ``` 22 | 23 | ## 内部组件 24 | 内部组件用`LocalProvider.LocaleReceiver`去包裹，需要传一个 `componentName` 参数 25 | 26 | 27 | 28 | {({ state, setState }) => { 29 | function onClick() { 30 | setState({ 31 | currLocale: state.currLocale === 'en_US' ? 'zh_CH' : 'en_US' 32 | }) 33 | } 34 | 35 | return 36 | 37 | {(locale) => { 38 | return
39 |
当前国际化内容：{JSON.stringify(locale)}
40 |
41 |
42 | }} 43 | 44 | 45 | }} 46 | 47 | 48 | 49 | 50 | ## API 51 | 52 | ### LocalProvider 53 | 54 | 55 | ### LocalProvider.LocaleReceiver 56 | 57 | 58 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/locale-provider/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { LocaleContext } from "./localeContext"; 3 | import LocaleReceiver from "./localeReceiver"; 4 | import zhCN from "./zh_CN"; 5 | import enUS from "./en_US"; 6 | 7 | export interface LocaleProviderProps { 8 | /** 语言包配置, 参数可为zh_CN || en_US*/ 9 | locale?: string; 10 | } 11 | 12 | class LocaleProvider extends React.Component { 13 | static LocaleReceiver: typeof LocaleReceiver; 14 | static defaultProps = { 15 | locale: "zh_CN", 16 | }; 17 | 18 | render() { 19 | const { children, locale } = this.props; 20 | const currLocal = ["en_US", "en-US"].includes(locale) ? enUS : zhCN; 21 | return ( 22 | 23 | {/* 子节点只有一项 */} 24 | {React.Children.only(children)} 25 | 26 | ); 27 | } 28 | } 29 | 30 | LocaleProvider.LocaleReceiver = LocaleReceiver; 31 | 32 | export default LocaleProvider; 33 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/locale-provider/localeContext.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const defaultValue = { 4 | } 5 | 6 | export const LocaleContext = React.createContext(defaultValue); 7 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/locale-provider/localeReceiver.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { LocaleContext } from "./localeContext"; 3 | 4 | export interface LocaleReceiverProps { 5 | /** 组件名称 */ 6 | componentName?: string; 7 | /** 组件内容是一个函数 */ 8 | children: (locale: object) => React.ReactElement; 9 | } 10 | 11 | class LocaleReceiver extends React.Component { 12 | getLocale(locale: any = {}) { 13 | const { componentName } = this.props; 14 | return { 15 | ...locale[componentName], 16 | ...locale.global, 17 | }; 18 | } 19 | 20 | render() { 21 | const { children } = this.props; 22 | return ( 23 | 24 | {(locale) => children(this.getLocale(locale))} 25 | 26 | ); 27 | } 28 | } 29 | 30 | export default LocaleReceiver; 31 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/locale-provider/zh_CN.js: -------------------------------------------------------------------------------- 1 | export default { 2 | locale: "zh-cn", 3 | global: { 4 | placeholder: "请选择" 5 | }, 6 | AutoML: { 7 | ok: '确定' , 8 | cancel: '取消', 9 | off: "关", 10 | on: "开", 11 | shrink: "收缩", 12 | unfold: "展开", 13 | autoParams: "自动调参", 14 | grading: "评分指标", 15 | runTime: "运行时间", 16 | trainTime: '训练时间', 17 | training: '训练中', 18 | running: '运行中', 19 | waiting: '等待中', 20 | param: '参数', 21 | predict: '预测', 22 | view: '查看', 23 | log: '日志', 24 | time: '耗时', 25 | viewLog: '查看日志', 26 | exception: '异常', 27 | done: '完成', 28 | contrast: '对比', 29 | added: '已添加', 30 | delete: '删除', 31 | deleteConfirm: '确定要删除吗?' 32 | }, 33 | Component:{ 34 | time: '耗时', 35 | }, 36 | Test: { 37 | okText: "确定" 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/resource/index.less: -------------------------------------------------------------------------------- 1 | @import '../../style/minxins/index.less'; 2 | @import '../../style/index.less'; 3 | 4 | @resource-prefix-cls: ~'@{zet-prefix}-resource'; 5 | 6 | .@{resource-prefix-cls} { 7 | font-size: @font-size-base; 8 | 9 | &-panel { 10 | font-size: @font-size-lg; 11 | &-title { 12 | margin-bottom: 10px; 13 | } 14 | &-content { 15 | padding: @padding-xs; 16 | } 17 | } 18 | 19 | &-slider { 20 | margin-top: @margin-md; 21 | } 22 | } 23 | 24 | 25 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/resource/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Resource (资源) 3 | menu: Components 4 | order: 70 5 | --- 6 | 7 | import { Playground, PropsTable } from 'docz'; 8 | import { State, Toggle } from 'react-powerplug' 9 | import { Row, Col } from 'antd'; 10 | import { Resource } from '../../index.tsx' 11 | const { ResourceGroup } = Resource; 12 | 13 | # Resource 14 | 15 | ## 基本 16 | 17 | 18 | 19 | 20 | ## 禁用 21 | 22 | 23 | 24 | 25 | ## onChange 26 | 27 | 28 | {({ state, setState }) => ( 29 | 30 | (setState({ value }))}> 31 | 32 | change value: {state.value} 33 | 34 | 35 | )} 36 | 37 | 38 | 39 | ## Group 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | ## Group 禁用 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | ## API 76 | 77 | ### Resource 78 | 79 | 80 | ### ResourceGroup 81 | 82 | 83 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/resource/index.tsx: -------------------------------------------------------------------------------- 1 | import Resource from './resource'; 2 | import ResourceGroup from './resourceGroup'; 3 | 4 | // export { ResourceProps } from './resource'; 5 | // export { ResourceGroupProps } from './resourceGroup'; 6 | 7 | Resource.ResourceGroup = ResourceGroup; 8 | 9 | export default Resource; 10 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/resource/resource.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ResourceContext } from './resourceContext'; 3 | import { InputNumber, Slider, Row, Col} from 'antd'; 4 | import classnames from 'classnames'; 5 | import ResourceGroup from './resourceGroup'; 6 | import { isNumber } from '../../utils/utils'; 7 | import './index.less'; 8 | 9 | export interface ResourceProps { 10 | /** 组件行行内样式 */ 11 | style?: React.CSSProperties; 12 | /** 自定义类名 */ 13 | className?: string; 14 | /** 资源组件的宽度 */ 15 | width?: string | number; 16 | /** 是否禁用 */ 17 | disabled?: boolean; 18 | /** 资源项标题 */ 19 | title?: string; 20 | /** 初始化资源值 */ 21 | defaultValue?: number; 22 | /** 资源值 */ 23 | value?: number; 24 | /** 步长，取值必须大于 0，并且可被 (max - min) 整除 */ 25 | step?: number; 26 | /** 最大值 */ 27 | max?: number; 28 | /** 最小值 */ 29 | min?: number; 30 | /** 资源改变触发的回调 */ 31 | onChange?: (e: React.MouseEvent) => void; 32 | /** 滑动输入条的属性 */ 33 | sliderProps?: any; 34 | /** 数字输入框的属性 */ 35 | inputNumberProps?: any; 36 | } 37 | 38 | class Resource extends React.Component { 39 | static ResourceGroup: typeof ResourceGroup; 40 | static defaultProps = { 41 | width: '255px', 42 | step: 1, 43 | max: 100, 44 | min: 0, 45 | disabled: false, 46 | sliderProps: {}, 47 | inputNumberProps: {}, 48 | onChange: () => {}, 49 | }; 50 | 51 | constructor(props: ResourceProps) { 52 | super(props); 53 | this.state = { 54 | value: props.value || props.defaultValue || 0, 55 | }; 56 | } 57 | 58 | onChange = (value) => { 59 | const { onChange } = this.props; 60 | if (!isNumber(value)) { 61 | return; 62 | } 63 | this.setState({ 64 | value, 65 | }, () => { 66 | onChange(value); 67 | }); 68 | } 69 | 70 | render() { 71 | const { style, className, title, width, step, max, min, disabled, sliderProps, inputNumberProps } = this.props; 72 | const { value } = this.state; 73 | const styleProps = { 74 | width, 75 | ...style, 76 | }; 77 | const classNames = classnames('zet-resource', className); 78 | 79 | return ( 80 |
81 | 82 | { 83 | ({ resourceGroup }) => { 84 | if (resourceGroup) { 85 | inputNumberProps.disabled = sliderProps.disabled = disabled || resourceGroup.disabled; 86 | } 87 | return ( 88 | 89 | 90 | {title} 91 | 99 | 112 | 113 | 114 | 125 | 126 | ); 127 | } 128 | } 129 | 130 |
131 | ); 132 | } 133 | } 134 | 135 | export default Resource; 136 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/resource/resourceContext.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const defaultValue = { 4 | resourceGroup: { 5 | disabled: false, 6 | } 7 | } 8 | 9 | export const ResourceContext = React.createContext(defaultValue); 10 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/resource/resourceGroup.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ResourceContext } from './resourceContext'; 3 | import classnames from 'classnames'; 4 | import './index.less'; 5 | export interface ResourceGroupProps { 6 | /** 组件行行内样式 */ 7 | style: React.CSSProperties; 8 | /** 自定义类名 */ 9 | className: string; 10 | /** 资源项标题 */ 11 | title: string; 12 | /** 是否禁用 */ 13 | disabled: boolean; 14 | } 15 | 16 | class ResourceGroup extends React.Component { 17 | static defaultProps = { 18 | title: '', 19 | className: '', 20 | style: {}, 21 | disabled: false, 22 | }; 23 | 24 | render() { 25 | const { className, title, children, disabled } = this.props; 26 | const styleProps = { 27 | 28 | }; 29 | const classNames = classnames('zet-resource-panel', className); 30 | // context value 31 | const contextValue = { 32 | resourceGroup: { 33 | disabled, 34 | }, 35 | }; 36 | return ( 37 |
38 |
39 | {title} 40 |
41 |
42 | 43 | { children } 44 | 45 |
46 |
47 | ); 48 | } 49 | } 50 | 51 | export default ResourceGroup; 52 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/select/_mock/treeData.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | title: 'Node1', 4 | value: '0-0', 5 | key: '0-0', 6 | children: [ 7 | { title: 'Child Node1', value: '0-0-1', key: '0-0-1' }, 8 | { title: 'Child Node2', value: '0-0-2', key: '0-0-2' }, 9 | ], 10 | }, 11 | { title: 'Node2', value: '0-1', key: '0-1' }, 12 | ]; 13 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/select/index.less: -------------------------------------------------------------------------------- 1 | @import '../../style/minxins/index.less'; 2 | @import '../../style/index.less'; 3 | 4 | @resource-prefix-cls: ~'@{zet-prefix}-select'; 5 | 6 | .@{resource-prefix-cls} { 7 | width: 300px; 8 | .ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected { 9 | color: #0099FF; 10 | background: transparent; 11 | } 12 | .ant-select-tree li .ant-select-tree-node-content-wrapper:hover { 13 | color: rgba(0, 153, 255, 0.4); 14 | background: transparent; 15 | } 16 | } 17 | 18 | 19 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/select/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Select (选择器) 3 | menu: Components 4 | order: 2 5 | --- 6 | 7 | import { Playground, PropsTable } from 'docz'; 8 | import { Icon, Menu, Dropdown, Button } from 'antd'; 9 | import { Select } from '../../index.tsx'; 10 | import { styles } from './index.less'; 11 | import treeData from './_mock/treeData.js'; 12 | 13 | # Select (选择器) 14 | 15 | ## 基础展示 16 | 我们需要定义`treeData`属性，数据格式如下： 17 | ``` 18 | [ 19 | { 20 | title: 'Node1', 21 | value: '0-0', 22 | key: '0-0', 23 | children: [ 24 | { title: 'Child Node1', value: '0-0-1', key: '0-0-1' }, 25 | { title: 'Child Node2', value: '0-0-2', key: '0-0-2' }, 26 | ], 27 | }, 28 | { title: 'Node2', value: '0-1', key: '0-1' }, 29 | ]; 30 | 31 | ``` 32 | 33 | ## 基本 34 | 35 | 36 | 37 | 38 | ## 多选 39 | 40 | 不可选父节点：
41 | 可以选父节点： 42 | 43 | 44 | ## 标签筛选 45 | 46 | 49 | 50 | 51 | 52 | 53 | } 54 | trigger={['click']} 55 | placement='bottomCenter' 56 | > 57 | 58 | 59 | 60 | 61 | ## 标签筛选 62 | 63 | 140 | 141 | 142 | {disabled &&
} 143 |
144 | ); 145 | } 146 | } 147 | 148 | export default TagsInput; 149 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/time-select/_mock/data.js: -------------------------------------------------------------------------------- 1 | 2 | const data = { 3 | seconds: { 4 | key: 'seconds', 5 | selectData: [1, 5, 10, 20, 30], 6 | displayUnit: '秒', 7 | }, 8 | minutes: { 9 | key: 'minutes', 10 | selectData: [1, 5, 10, 20, 30], 11 | displayUnit: '分钟', 12 | }, 13 | hours: { 14 | key: 'hours', 15 | selectData: [1, 2, 4, 8, 12, 18], 16 | displayUnit: '小时', 17 | }, 18 | }; 19 | 20 | export default data; 21 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/time-select/index.less: -------------------------------------------------------------------------------- 1 | @import '../../style/minxins/index.less'; 2 | @import '../../style/index.less'; 3 | 4 | @time-select-prefix-cls: ~'@{zet-prefix}-time-select'; 5 | 6 | .@{time-select-prefix-cls} { 7 | 8 | 9 | } 10 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/time-select/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: TimeSelect(时间选择) 3 | menu: Components 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz'; 7 | import { State, Toggle } from 'react-powerplug'; 8 | import { } from 'antd'; 9 | import { TagInput, TimeSelect } from '../../index.tsx'; 10 | import data from './_mock/data.js'; 11 | 12 | # TimeSelect 13 | 14 | ## 使用 15 | `TimeSelect`用来在选择时间范围，最终返回秒，可以结合Form表单使用, 现阶段支持秒，分钟，小时 16 | 17 | ## data 配置 18 | ``` 19 | const data = { 20 | seconds: { 21 | key: 'seconds', 22 | selectData: [1, 5, 10, 20, 30], 23 | displayUnit: '秒', 24 | }, 25 | minutes: { 26 | key: 'minutes', 27 | selectData: [1, 5, 10, 20, 30], 28 | displayUnit: '分钟', 29 | }, 30 | hours: { 31 | key: 'hours', 32 | selectData: [1, 2, 4, 8, 12, 18], 33 | displayUnit: '小时', 34 | }, 35 | }; 36 | 37 | ``` 38 | 39 | ## 基本使用 40 | 41 | 42 | 43 | 44 | ## value值 45 | 46 | 47 | 48 | 49 | ## 禁用 50 | 51 | 52 | 53 | 54 | 55 | ## onChage 56 | 57 | 58 | {({ state, setState }) => ( 59 | 60 | (setState({ value }))} /> 61 | 62 | change value: {state.value} 63 | 64 | 65 | )} 66 | 67 | 68 | 69 | ## API 70 | 71 | ### TimeSelect 72 | 73 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/time-select/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import classnames from 'classnames'; 3 | import { Row, Col, Select } from 'antd'; 4 | import './index.less'; 5 | 6 | const Option = Select.Option; 7 | 8 | const data = { 9 | seconds: { 10 | key: 'seconds', 11 | selectData: [1, 5, 10, 20, 30], 12 | displayUnit: '秒', 13 | }, 14 | minutes: { 15 | key: 'minutes', 16 | selectData: [1, 5, 10, 20, 30], 17 | displayUnit: '分钟', 18 | }, 19 | hours: { 20 | key: 'hours', 21 | selectData: [1, 2, 4, 8, 12], 22 | displayUnit: '小时', 23 | }, 24 | }; 25 | 26 | const calculateUnit = { 27 | seconds: 1, 28 | minutes: 60, 29 | hours: 3600, 30 | }; 31 | 32 | const unitKey = { 33 | seconds: 'seconds', 34 | minutes: 'minutes', 35 | hours: 'hours', 36 | }; 37 | 38 | export interface Item { 39 | /** key */ 40 | key: string; 41 | /** 时间下拉框数据 */ 42 | selectData: number[]; 43 | /** 时间单位 */ 44 | displayUnit: string; 45 | } 46 | 47 | export interface TimeSelectProps { 48 | /** 组件行行内样式 */ 49 | style?: React.CSSProperties; 50 | /** 自定义类名 */ 51 | className?: string; 52 | /** 宽度 */ 53 | width?: string | number; 54 | /** 组件选择数据 */ 55 | data?: object; 56 | /** value 值为秒数 */ 57 | value?: number; 58 | /** 是否禁用 */ 59 | disabled?: boolean; 60 | /** onChange 事件 */ 61 | onChange?: (value: number) => void; 62 | /** test function */ 63 | test?: (value: number) => void; 64 | } 65 | 66 | export interface TimeSelectState { 67 | timeSelectData: number[]; 68 | unitSelectData: Item[]; 69 | value: number; 70 | unitValue: string; 71 | timeValue: number; 72 | } 73 | 74 | class TimeSelect extends React.Component { 75 | static defaultProps = { 76 | data, 77 | }; 78 | 79 | static getUnitValue = (seconds: number) => { 80 | if (seconds < 60) { 81 | return 'seconds'; 82 | } 83 | if (seconds < 60 * 60) { 84 | return 'minutes'; 85 | } 86 | 87 | if (seconds < 60 * 60 * 60) { 88 | return 'hours'; 89 | } 90 | return ''; 91 | } 92 | 93 | static getTimeValue = (seconds: number) => { 94 | if (seconds < 60) { 95 | return seconds; 96 | } 97 | if (seconds < 60 * 60) { 98 | return seconds / 60; 99 | } 100 | 101 | if (seconds < 60 * 60 * 60) { 102 | return seconds / 60 / 60; 103 | } 104 | } 105 | 106 | constructor(props: TimeSelectProps) { 107 | super(props); 108 | const unitSelectData = Object.values(props.data) as Item[]; 109 | const firstData = unitSelectData.length > 0 ? unitSelectData[0] : null; 110 | this.state = { 111 | unitSelectData, 112 | timeSelectData: firstData.selectData || [], 113 | value: props.value || 1, 114 | unitValue: TimeSelect.getUnitValue(props.value || 1), 115 | timeValue: TimeSelect.getTimeValue(props.value || 1), 116 | }; 117 | } 118 | 119 | setValue = (value: number) => { 120 | const {onChange} = this.props; 121 | this.setState({ 122 | value, 123 | }); 124 | onChange && onChange(value); 125 | } 126 | 127 | onUnitChange = (unit: string) => { 128 | const currData = this.props.data[unit]; 129 | const timeValue = (Array.isArray(currData.selectData) 130 | && currData.selectData.length > 0 && currData.selectData[0]) || 1; 131 | const value = timeValue * calculateUnit[unit]; 132 | this.setState({ 133 | unitValue: unit, 134 | timeValue, 135 | timeSelectData: currData.selectData, 136 | }); 137 | this.setValue(value); 138 | } 139 | 140 | onTimeChange = (timeValue: number) => { 141 | const value = timeValue * calculateUnit[this.state.unitValue]; 142 | this.setState({ 143 | timeValue, 144 | }); 145 | this.setValue(value); 146 | } 147 | 148 | public render() { 149 | const { width, style, className, disabled } = this.props; 150 | const { unitSelectData, timeSelectData, unitValue, timeValue } = this.state; 151 | const classNames = classnames('zet-time-select', className); 152 | const styleProps = { 153 | width, 154 | ...style, 155 | }; 156 | return ( 157 |
158 | 159 | 160 | 167 | 168 | 169 | 176 | 177 | 178 |
179 | ); 180 | } 181 | } 182 | 183 | export default TimeSelect; 184 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/timer/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import moment from 'moment'; 3 | // import intl from 'utils/intl'; 4 | import { getServerCurrentTime } from '../../utils/utils'; 5 | import { LocaleReceiverHoc } from "../../utils/hoc" 6 | import './index.less'; 7 | 8 | class Timer extends Component { 9 | constructor(props) { 10 | super(props); 11 | this.state = { 12 | start: moment(props.start || 0).valueOf(), 13 | end: moment(props.end || props.start || 0).valueOf(), 14 | }; 15 | } 16 | 17 | componentDidMount() { 18 | if (this.props.status === 'start') { 19 | this.interval = setInterval(() => this.tick(), 1000); 20 | } 21 | } 22 | 23 | componentWillReceiveProps(nextProps) { 24 | const preTick = this.props.status; 25 | const nextTick = nextProps.status; 26 | if (preTick !== nextTick && nextTick === 'start') { 27 | clearInterval(this.interval); 28 | this.interval = setInterval(() => this.tick(), 1000); 29 | } 30 | if (preTick !== nextTick && (nextTick === 'stop' || nextTick === '')) { 31 | this.stopTick(); 32 | this.setState({ 33 | end: moment(nextProps.end).valueOf(), 34 | }); 35 | } 36 | } 37 | 38 | componentWillUnmount() { 39 | this.stopTick(); 40 | } 41 | 42 | stopTick = () => { 43 | clearInterval(this.interval); 44 | this.interval = null; 45 | } 46 | 47 | tick = () => { 48 | const end = getServerCurrentTime().format('x'); 49 | this.setState({ 50 | end, 51 | }); 52 | } 53 | 54 | addZero = (num) => { 55 | return num < 10 ? `0${num}` : num; 56 | } 57 | 58 | render() { 59 | const {intl={}} = this.props; 60 | const timer = moment.duration(this.state.end - this.state.start, 'ms'); 61 | const hours = timer.get('hours'); 62 | const mins = timer.get('minutes'); 63 | const sec = timer.get('seconds'); 64 | return ( 65 |
66 |
{intl.time || '耗时'}
67 |
68 | {this.addZero(hours)} : {this.addZero(mins)} : {this.addZero(sec)} 69 |
70 |
71 | ); 72 | } 73 | } 74 | 75 | export default LocaleReceiverHoc('Component')(Timer); 76 | -------------------------------------------------------------------------------- /packages/zet-component/src/components/timer/index.less: -------------------------------------------------------------------------------- 1 | .item{ 2 | display: flex; 3 | padding: 15px 0; 4 | border-bottom: 1px solid rgba(16, 38, 58, 0.15); 5 | } 6 | .itemInfo{ 7 | flex: 4 8 | } 9 | .itemTitle{ 10 | display: flex; 11 | width: 90%; 12 | height: 30px; 13 | align-items: center; 14 | } 15 | .listWrap{ 16 | padding: 24px; 17 | } 18 | .chartItem{ 19 | flex: 1.5; 20 | margin-right: 15px; 21 | } 22 | .shortName{ 23 | flex: 6; 24 | display: inline-block; 25 | text-overflow: ellipsis; 26 | white-space: nowrap; 27 | overflow: hidden; 28 | margin-right: 10px; 29 | } 30 | .status{ 31 | flex: 4; 32 | } 33 | .timer{ 34 | flex: 1.5; 35 | display: flex; 36 | flex-direction: column; 37 | } 38 | .userTimer{ 39 | font-size: 24px; 40 | color: rgba(16, 38, 58, 0.45); 41 | } 42 | .timerTit{ 43 | font-size: 16px; 44 | color: rgba(16, 38, 58, 0.85); 45 | } 46 | .mudoleList{ 47 | width: 100%; 48 | flex: 1; 49 | // height: 100%; 50 | // margin-top: 25px; 51 | background: #fff; 52 | box-shadow: 0 2px 4px 0 rgba(120, 141, 180, 0.2); 53 | overflow-y: auto; 54 | } 55 | -------------------------------------------------------------------------------- /packages/zet-component/src/config/iconFontConfig.js: -------------------------------------------------------------------------------- 1 | const version = 'font_810702_ploo9txlj1d'; 2 | 3 | export default version; 4 | -------------------------------------------------------------------------------- /packages/zet-component/src/index.tsx: -------------------------------------------------------------------------------- 1 | /** 基础组件 */ 2 | export { default as Components } from './components'; 3 | 4 | /** 资源 */ 5 | export { default as Resource } from './components/resource'; 6 | 7 | /** 国际化 */ 8 | export { default as LocaleProvider} from './components/locale-provider'; 9 | 10 | /** AutoML */ 11 | export { default as AutoML} from './automl/index'; 12 | 13 | /** 标签输入 */ 14 | export { default as TagInput } from './components/tag-input'; 15 | 16 | /** 选择器 */ 17 | export { default as Select } from './components/select'; 18 | 19 | /** 筛选标签 */ 20 | export { default as Tag } from './components/tag'; 21 | 22 | /** 时间范围选择 */ 23 | export { default as TimeSelect } from './components/time-select'; 24 | 25 | /** 输入框 */ 26 | export { default as Input } from './components/input'; 27 | -------------------------------------------------------------------------------- /packages/zet-component/src/style/index.js: -------------------------------------------------------------------------------- 1 | import './index.less'; -------------------------------------------------------------------------------- /packages/zet-component/src/style/index.less: -------------------------------------------------------------------------------- 1 | @import './themes/default.less'; -------------------------------------------------------------------------------- /packages/zet-component/src/style/minxins/center.less: -------------------------------------------------------------------------------- 1 | 2 | // 水平垂直居中 3 | .center() { 4 | display: flex; 5 | justify-content:center; 6 | align-items: center; 7 | } 8 | -------------------------------------------------------------------------------- /packages/zet-component/src/style/minxins/clearfix.less: -------------------------------------------------------------------------------- 1 | // mixins for clearfix 2 | // ------------------------ 3 | .clearfix() { 4 | zoom: 1; 5 | &:before, 6 | &:after { 7 | content: ''; 8 | display: table; 9 | } 10 | &:after { 11 | clear: both; 12 | } 13 | } -------------------------------------------------------------------------------- /packages/zet-component/src/style/minxins/index.less: -------------------------------------------------------------------------------- 1 | // Mixins 2 | @import './clearfix.less'; 3 | @import './center.less'; 4 | -------------------------------------------------------------------------------- /packages/zet-component/src/style/themes/default.less: -------------------------------------------------------------------------------- 1 | /* 定义默认主题less */ 2 | 3 | // ui框架 class 前缀 4 | @zet-prefix: 'zet'; 5 | 6 | // base 7 | @font-size-sm: 12px; 8 | @font-size-base: 14px; 9 | @font-size-lg: @font-size-base + 2px; 10 | 11 | 12 | 13 | // paddings 14 | @padding-lg: 24px; 15 | @padding-md: 16px; 16 | @padding-sm: 12px; 17 | @padding-xs: 8px; 18 | 19 | 20 | // margins 21 | @margin-lg: 24px; 22 | @margin-md: 16px; 23 | @margin-sm: 12px; 24 | @margin-xs: 8px; 25 | -------------------------------------------------------------------------------- /packages/zet-component/src/utils/hoc.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { LocaleProvider } from "../index"; 3 | import LocaleReceiver from "../components/locale-provider/localeReceiver"; 4 | 5 | /** 6 | 中英文 LocaleProvider hoc 7 | */ 8 | export const LocaleProviderHoc = WrappedComponent => { 9 | class HocComponent extends React.Component{ 10 | constructor(props) { 11 | super(props); 12 | this.state = { 13 | currLocale: "zh_CH", 14 | }; 15 | } 16 | clickHandle = () => { 17 | this.setState({ 18 | currLocale: this.state.currLocale === "en_US" ? "zh_CH" : "en_US", 19 | }); 20 | } 21 | render() { 22 | const { currLocale } = this.state; 23 | return ( 24 | 25 |
26 |

27 | 中英文切换 :{" "} 28 | 29 | {currLocale === "en_US" ? "中文" : "英文"} 30 | 31 |

32 | {WrappedComponent} 33 |
34 | 35 | ); 36 | } 37 | } 38 | return ; 39 | }; 40 | 41 | /** 42 | 中英文 LocaleProvider hoc 43 | */ 44 | 45 | export const LocaleReceiverHoc = componentName => WrappedComponent => { 46 | return class HocComponent extends React.Component { 47 | constructor(props) { 48 | super(props); 49 | this.state = { 50 | lcoale: {}, 51 | }; 52 | } 53 | render() { 54 | const { lcoale } = this.state; 55 | return ( 56 | 57 | {(locale) => } 58 | 59 | ); 60 | } 61 | }; 62 | }; 63 | -------------------------------------------------------------------------------- /packages/zet-component/src/utils/utils.js: -------------------------------------------------------------------------------- 1 | import moment from 'moment'; 2 | 3 | const toString = Object.prototype.toString; 4 | 5 | /** 6 | * 判断value是否为数字 7 | */ 8 | export const isNumber = (value) => { 9 | return typeof value === 'number' || toString.call(value) === '[object Number]'; 10 | } 11 | 12 | /** 13 | * 获取服务器当前时间 14 | */ 15 | export const getServerCurrentTime = () => { 16 | const { timeOffest } = window.g_app._store.getState().global; 17 | return moment(new Date()).add(timeOffest, 'milliseconds'); 18 | }; 19 | 20 | 21 | /** 22 | * 小数转换为百分数 23 | */ 24 | export const toPercent = (number, dec = 0) => { 25 | return `${Number(number * 100).toFixed(dec)}%`; 26 | }; 27 | 28 | /** 29 | * 空状态图片 30 | */ 31 | export const emptyPicture = () => { 32 | return "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"; 33 | }; 34 | 35 | -------------------------------------------------------------------------------- /packages/zet-component/src/wrapper.css: -------------------------------------------------------------------------------- 1 | 2 | @media(min-width:1440px){ 3 | .css-1i0fr1k { 4 | width: 100% !important; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/zet-component/src/wrapper.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** 3 | * 文档页容器, 这里可以引入一些全局样式或者 js 4 | */ 5 | import * as React from 'react'; 6 | import '!style-loader!css-loader!antd/dist/antd.css'; 7 | import './wrapper.css'; 8 | 9 | export default function({ children }) { 10 | return
{children}
; 11 | } 12 | -------------------------------------------------------------------------------- /packages/zet-component/src/wrapper.less: -------------------------------------------------------------------------------- 1 | 2 | @media(min-width:1440px){ 3 | .css-1i0fr1k { 4 | width: 100% !important; 5 | } 6 | } 7 | 8 | -------------------------------------------------------------------------------- /packages/zet-component/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "importHelpers": true, 7 | "jsx": "react", 8 | "lib": ["esnext", "dom"], 9 | "esModuleInterop": true, 10 | "sourceMap": true, 11 | "baseUrl": ".", 12 | "paths": { 13 | "@/*": ["src/*"] 14 | }, 15 | // "include":["./src/**/*"], 16 | "allowSyntheticDefaultImports": true, 17 | "plugins":[ 18 | {"name":"typescript-tslint-plugin"} 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/zet-component/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "error", 3 | "extends": ["tslint:latest", "tslint-react"], 4 | "jsRules": {}, 5 | "rules": { 6 | "quotemark": false, 7 | "ordered-imports": false, 8 | "interface-name": false, 9 | "member-access": false, 10 | "object-literal-sort-keys": false, 11 | "no-empty": false, 12 | "jsx-no-lambda": false, 13 | "jsx-no-multiline-js": false, 14 | "jsx-curly-spacing": false, 15 | "no-unused-expression": false, 16 | "max-classes-per-file": false, 17 | "jsdoc-format": false, 18 | "jsx-self-close": false, 19 | "no-empty-interface": false, 20 | "jsx-alignment": false, 21 | "no-implicit-dependencies": false, 22 | "arrow-parens" : false 23 | }, 24 | "rulesDirectory": [] 25 | } 26 | -------------------------------------------------------------------------------- /packages/zet-component/tslint.yaml: -------------------------------------------------------------------------------- 1 | defaultSeverity: error 2 | extends: 3 | - tslint-react 4 | - tslint-eslint-rules 5 | jsRules: 6 | rules: 7 | eofline: true 8 | no-console: true 9 | no-construct: true 10 | no-debugger: true 11 | no-reference: true 12 | -------------------------------------------------------------------------------- /packages/zet-component/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.css'; 2 | declare module '*.less'; 3 | declare module "*.png"; 4 | --------------------------------------------------------------------------------