cleanup old files
This commit is contained in:
medcl
parent
749975aa8f
commit
a360f6a627
|
|
@ -1,90 +0,0 @@
|
|||
# ---> Node
|
||||
|
||||
.idea
|
||||
.vscode
|
||||
.DS_Store
|
||||
.umi
|
||||
*.swp
|
||||
*.iml
|
||||
jsconfig.json
|
||||
|
||||
dist
|
||||
run
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# TypeScript v1 declaration files
|
||||
typings/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
|
||||
# next.js build output
|
||||
.next
|
||||
|
||||
# nuxt.js build output
|
||||
.nuxt
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# Serverless directories
|
||||
.serverless
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
pipeline {
|
||||
agent any
|
||||
|
||||
environment {
|
||||
CI = 'true'
|
||||
}
|
||||
stages {
|
||||
stage('Build') {
|
||||
steps {
|
||||
sh 'cnpm install'
|
||||
}
|
||||
}
|
||||
stage('Test') {
|
||||
steps {
|
||||
sh '/bin/true'
|
||||
}
|
||||
}
|
||||
stage('Deliver') {
|
||||
steps {
|
||||
sh '/bin/true'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
46
README.md
46
README.md
|
|
@ -1,46 +0,0 @@
|
|||
# 极限日志分析中心
|
||||
|
||||
INFINI Logging Center
|
||||
|
||||
|
||||
## 开发说明
|
||||
|
||||
### 开发环境准备
|
||||
|
||||
确保已经安装好`nodejs`（版本大于等于 8.5.0）环境：
|
||||
```sh
|
||||
node -v
|
||||
npm -v
|
||||
```
|
||||
|
||||
在国内，你可以安装 `cnpm` 获得更快速、更安全的包管理体验。使用如下命令安装：
|
||||
```sh
|
||||
npm install -g cnpm --registry=https://registry.npm.taobao.org
|
||||
```
|
||||
|
||||
### 下载项目依赖包
|
||||
```
|
||||
cnpm install
|
||||
```
|
||||
|
||||
### 启动开发模式
|
||||
|
||||
```sh
|
||||
cnpm run dev
|
||||
```
|
||||
|
||||
在浏览器中访问：[http://localhost:8000](http://localhost:8000)
|
||||
|
||||
|
||||
### 构建和部署
|
||||
|
||||
```sh
|
||||
cnpm run build
|
||||
```
|
||||
|
||||
执行该命令后会生成最终的 HTML、CSS 和 JS 到 `dist` 目录下。它们是浏览器可以直接识别并运行的代码，这样你就可以将它们部署到你想要的服务器上了。
|
||||
|
||||
### 新增项目依赖包
|
||||
```
|
||||
cnpm install --save md5
|
||||
```
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
const Controller = require('egg').Controller;
|
||||
|
||||
class HomeController extends Controller {
|
||||
async index() {
|
||||
const { ctx } = this;
|
||||
await this.ctx.render('index.html');
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = HomeController;
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
||||
/>
|
||||
<link rel="stylesheet" href="/umi.ef75c6fd.css" />
|
||||
<script>
|
||||
window.routerBase = "/";
|
||||
</script>
|
||||
<script>
|
||||
window.publicPath = "/";
|
||||
</script>
|
||||
<script>
|
||||
//! umi version: 3.0.4
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
<script src="/umi.3e7eac41.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,9 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {Egg.Application} app - egg application
|
||||
*/
|
||||
module.exports = app => {
|
||||
const { router, controller } = app;
|
||||
router.get('/', controller.home.index);
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
|
||||
<meta name="format-detection" content="telephone=no"/>
|
||||
<meta name="format-detection" content="email=no"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
|
||||
<title></title>
|
||||
{{ helper.assets.getStyle('umi.css') | safe }}
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="root"></div>
|
||||
|
||||
<script>
|
||||
window.routerBase = '/';
|
||||
window.resourceBaseUrl = '{{ helper.assets.resourceBase }}';
|
||||
</script>
|
||||
{% if ctx.app.config.env === 'local' -%}
|
||||
{{ helper.assets.getScript('umi.dll.js') | safe }}
|
||||
{%- endif %}
|
||||
{{ helper.assets.getScript('umi.js') | safe }}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
//import webpackPlugin from './plugin.config';
|
||||
import pageRoutes from './router.config';
|
||||
import defaultSettings from '../src/defaultSettings';
|
||||
|
||||
export default {
|
||||
//singular: true,
|
||||
routes: [{
|
||||
path: '/',
|
||||
component: 'helloworld',
|
||||
}],
|
||||
antd: {
|
||||
},
|
||||
locale: {
|
||||
default: 'zh-CN',
|
||||
baseNavigator: true,
|
||||
},
|
||||
routes: pageRoutes,
|
||||
define:{
|
||||
APP_TYPE: process.env.APP_TYPE || '',
|
||||
},
|
||||
theme: {
|
||||
'primary-color': defaultSettings.primaryColor,
|
||||
},
|
||||
runtimePublicPath: true,
|
||||
hash: true,
|
||||
outputPath: '../public',
|
||||
manifest: {
|
||||
fileName: '../../config/manifest.json',
|
||||
publicPath: '/public/',
|
||||
}
|
||||
};
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
export default {
|
||||
outputPath: '../public',
|
||||
manifest: {
|
||||
fileName: '../../config/manifest.json',
|
||||
}
|
||||
};
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
export default [
|
||||
// user
|
||||
{
|
||||
path: '/user',
|
||||
component: '../layouts/UserLayout',
|
||||
routes: [
|
||||
{ path: '/user', redirect: '/user/login' },
|
||||
/*{ path: '/user/login', component: '' },
|
||||
{ path: '/user/register', component: './User/Register' },
|
||||
{ path: '/user/register-result', component: './User/RegisterResult' },
|
||||
*/
|
||||
],
|
||||
},
|
||||
// app
|
||||
{
|
||||
path: '/',
|
||||
component: '../layouts/BasicLayout',
|
||||
//Routes: ['src/pages/Authorized'],
|
||||
authority: ['admin', 'user'],
|
||||
routes: [
|
||||
// dashboard
|
||||
{ path: '/', redirect: '/dashboard/analysis' },
|
||||
{
|
||||
path: '/dashboard',
|
||||
name: 'dashboard',
|
||||
icon: 'dashboard',
|
||||
routes: [
|
||||
{
|
||||
path: '/dashboard/analysis',
|
||||
name: 'collect',
|
||||
component: './helloworld',
|
||||
},
|
||||
{
|
||||
path: '/dashboard/monitor',
|
||||
name: 'notification',
|
||||
//component: './Dashboard/Monitor',
|
||||
},
|
||||
{
|
||||
path: '/dashboard/workplace',
|
||||
name: 'logging',
|
||||
//component: './Dashboard/Workplace',
|
||||
},
|
||||
{
|
||||
path:'/dashboard/',
|
||||
name:'gateway',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/agents',
|
||||
name: 'agents',
|
||||
icon: 'dashboard',
|
||||
routes: [
|
||||
{
|
||||
path: '/agents/overview',
|
||||
name: 'overview',
|
||||
component: './helloworld',
|
||||
}
|
||||
],
|
||||
}
|
||||
],
|
||||
}
|
||||
];
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Group 28 Copy 5</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="62.1023273%" y1="0%" x2="108.19718%" y2="37.8635764%" id="linearGradient-1">
|
||||
<stop stop-color="#4285EB" offset="0%"></stop>
|
||||
<stop stop-color="#2EC7FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="69.644116%" y1="0%" x2="54.0428975%" y2="108.456714%" id="linearGradient-2">
|
||||
<stop stop-color="#29CDFF" offset="0%"></stop>
|
||||
<stop stop-color="#148EFF" offset="37.8600687%"></stop>
|
||||
<stop stop-color="#0A60FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="69.6908165%" y1="-12.9743587%" x2="16.7228981%" y2="117.391248%" id="linearGradient-3">
|
||||
<stop stop-color="#FA816E" offset="0%"></stop>
|
||||
<stop stop-color="#F74A5C" offset="41.472606%"></stop>
|
||||
<stop stop-color="#F51D2C" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="68.1279872%" y1="-35.6905737%" x2="30.4400914%" y2="114.942679%" id="linearGradient-4">
|
||||
<stop stop-color="#FA8E7D" offset="0%"></stop>
|
||||
<stop stop-color="#F74A5C" offset="51.2635191%"></stop>
|
||||
<stop stop-color="#F51D2C" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="logo" transform="translate(-20.000000, -20.000000)">
|
||||
<g id="Group-28-Copy-5" transform="translate(20.000000, 20.000000)">
|
||||
<g id="Group-27-Copy-3">
|
||||
<g id="Group-25" fill-rule="nonzero">
|
||||
<g id="2">
|
||||
<path d="M91.5880863,4.17652823 L4.17996544,91.5127728 C-0.519240605,96.2081146 -0.519240605,103.791885 4.17996544,108.487227 L91.5880863,195.823472 C96.2872923,200.518814 103.877304,200.518814 108.57651,195.823472 L145.225487,159.204632 C149.433969,154.999611 149.433969,148.181924 145.225487,143.976903 C141.017005,139.771881 134.193707,139.771881 129.985225,143.976903 L102.20193,171.737352 C101.032305,172.906015 99.2571609,172.906015 98.0875359,171.737352 L28.285908,101.993122 C27.1162831,100.824459 27.1162831,99.050775 28.285908,97.8821118 L98.0875359,28.1378823 C99.2571609,26.9692191 101.032305,26.9692191 102.20193,28.1378823 L129.985225,55.8983314 C134.193707,60.1033528 141.017005,60.1033528 145.225487,55.8983314 C149.433969,51.69331 149.433969,44.8756232 145.225487,40.6706018 L108.58055,4.05574592 C103.862049,-0.537986846 96.2692618,-0.500797906 91.5880863,4.17652823 Z" id="Shape" fill="url(#linearGradient-1)"></path>
|
||||
<path d="M91.5880863,4.17652823 L4.17996544,91.5127728 C-0.519240605,96.2081146 -0.519240605,103.791885 4.17996544,108.487227 L91.5880863,195.823472 C96.2872923,200.518814 103.877304,200.518814 108.57651,195.823472 L145.225487,159.204632 C149.433969,154.999611 149.433969,148.181924 145.225487,143.976903 C141.017005,139.771881 134.193707,139.771881 129.985225,143.976903 L102.20193,171.737352 C101.032305,172.906015 99.2571609,172.906015 98.0875359,171.737352 L28.285908,101.993122 C27.1162831,100.824459 27.1162831,99.050775 28.285908,97.8821118 L98.0875359,28.1378823 C100.999864,25.6271836 105.751642,20.541824 112.729652,19.3524487 C117.915585,18.4685261 123.585219,20.4140239 129.738554,25.1889424 C125.624663,21.0784292 118.571995,14.0340304 108.58055,4.05574592 C103.862049,-0.537986846 96.2692618,-0.500797906 91.5880863,4.17652823 Z" id="Shape" fill="url(#linearGradient-2)"></path>
|
||||
</g>
|
||||
<path d="M153.685633,135.854579 C157.894115,140.0596 164.717412,140.0596 168.925894,135.854579 L195.959977,108.842726 C200.659183,104.147384 200.659183,96.5636133 195.960527,91.8688194 L168.690777,64.7181159 C164.472332,60.5180858 157.646868,60.5241425 153.435895,64.7316526 C149.227413,68.936674 149.227413,75.7543607 153.435895,79.9593821 L171.854035,98.3623765 C173.02366,99.5310396 173.02366,101.304724 171.854035,102.473387 L153.685633,120.626849 C149.47715,124.83187 149.47715,131.649557 153.685633,135.854579 Z" id="Shape" fill="url(#linearGradient-3)"></path>
|
||||
</g>
|
||||
<ellipse id="Combined-Shape" fill="url(#linearGradient-4)" cx="100.519339" cy="100.436681" rx="23.6001926" ry="23.580786"></ellipse>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.6 KiB |
|
|
@ -1,93 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import { MiniArea } from '../Charts';
|
||||
import NumberInfo from '../NumberInfo';
|
||||
|
||||
import styles from './index.less';
|
||||
|
||||
function fixedZero(val) {
|
||||
return val * 1 < 10 ? `0${val}` : val;
|
||||
}
|
||||
|
||||
function getActiveData() {
|
||||
const activeData = [];
|
||||
for (let i = 0; i < 24; i += 1) {
|
||||
activeData.push({
|
||||
x: `${fixedZero(i)}:00`,
|
||||
y: Math.floor(Math.random() * 200) + i * 50,
|
||||
});
|
||||
}
|
||||
return activeData;
|
||||
}
|
||||
|
||||
export default class ActiveChart extends Component {
|
||||
state = {
|
||||
activeData: getActiveData(),
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.loopData();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
clearTimeout(this.timer);
|
||||
cancelAnimationFrame(this.requestRef);
|
||||
}
|
||||
|
||||
loopData = () => {
|
||||
this.requestRef = requestAnimationFrame(() => {
|
||||
this.timer = setTimeout(() => {
|
||||
this.setState(
|
||||
{
|
||||
activeData: getActiveData(),
|
||||
},
|
||||
() => {
|
||||
this.loopData();
|
||||
}
|
||||
);
|
||||
}, 1000);
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { activeData = [] } = this.state;
|
||||
|
||||
return (
|
||||
<div className={styles.activeChart}>
|
||||
<NumberInfo subTitle="目标评估" total="有望达到预期" />
|
||||
<div style={{ marginTop: 32 }}>
|
||||
<MiniArea
|
||||
animate={false}
|
||||
line
|
||||
borderWidth={2}
|
||||
height={84}
|
||||
scale={{
|
||||
y: {
|
||||
tickCount: 3,
|
||||
},
|
||||
}}
|
||||
yAxis={{
|
||||
tickLine: false,
|
||||
label: false,
|
||||
title: false,
|
||||
line: false,
|
||||
}}
|
||||
data={activeData}
|
||||
/>
|
||||
</div>
|
||||
{activeData && (
|
||||
<div className={styles.activeChartGrid}>
|
||||
<p>{[...activeData].sort()[activeData.length - 1].y + 200} 亿元</p>
|
||||
<p>{[...activeData].sort()[Math.floor(activeData.length / 2)].y} 亿元</p>
|
||||
</div>
|
||||
)}
|
||||
{activeData && (
|
||||
<div className={styles.activeChartLegend}>
|
||||
<span>00:00</span>
|
||||
<span>{activeData[Math.floor(activeData.length / 2)].x}</span>
|
||||
<span>{activeData[activeData.length - 1].x}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
.activeChart {
|
||||
position: relative;
|
||||
}
|
||||
.activeChartGrid {
|
||||
p {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
}
|
||||
p:last-child {
|
||||
top: 115px;
|
||||
}
|
||||
}
|
||||
.activeChartLegend {
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
margin-top: 8px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
width: 33.33%;
|
||||
}
|
||||
span:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
span:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import React from 'react';
|
||||
import moment from 'moment';
|
||||
import { Avatar } from 'antd';
|
||||
import styles from './index.less';
|
||||
|
||||
const ArticleListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => (
|
||||
<div className={styles.listContent}>
|
||||
<div className={styles.description}>{content}</div>
|
||||
<div className={styles.extra}>
|
||||
<Avatar src={avatar} size="small" />
|
||||
<a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a>
|
||||
<em>{moment(updatedAt).format('YYYY-MM-DD HH:mm')}</em>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default ArticleListContent;
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
@import '~antd/lib/style/themes/default.less';
|
||||
|
||||
.listContent {
|
||||
.description {
|
||||
line-height: 22px;
|
||||
max-width: 720px;
|
||||
}
|
||||
.extra {
|
||||
color: @text-color-secondary;
|
||||
margin-top: 16px;
|
||||
line-height: 22px;
|
||||
& > :global(.ant-avatar) {
|
||||
vertical-align: top;
|
||||
margin-right: 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
& > em {
|
||||
color: @disabled-color;
|
||||
font-style: normal;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-xs) {
|
||||
.listContent {
|
||||
.extra {
|
||||
& > em {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import CheckPermissions from './CheckPermissions';
|
||||
|
||||
const Authorized = ({ children, authority, noMatch = null }) => {
|
||||
const childrenRender = typeof children === 'undefined' ? null : children;
|
||||
return CheckPermissions(authority, childrenRender, noMatch);
|
||||
};
|
||||
|
||||
export default Authorized;
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Route, Redirect } from 'react-router-dom';
|
||||
import Authorized from './Authorized';
|
||||
|
||||
// TODO: umi只会返回render和rest
|
||||
const AuthorizedRoute = ({ component: Component, render, authority, redirectPath, ...rest }) => (
|
||||
<Authorized
|
||||
authority={authority}
|
||||
noMatch={<Route {...rest} render={() => <Redirect to={{ pathname: redirectPath }} />} />}
|
||||
>
|
||||
<Route {...rest} render={props => (Component ? <Component {...props} /> : render(props))} />
|
||||
</Authorized>
|
||||
);
|
||||
|
||||
export default AuthorizedRoute;
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
import React from 'react';
|
||||
import PromiseRender from './PromiseRender';
|
||||
import { CURRENT } from './renderAuthorize';
|
||||
|
||||
function isPromise(obj) {
|
||||
return (
|
||||
!!obj &&
|
||||
(typeof obj === 'object' || typeof obj === 'function') &&
|
||||
typeof obj.then === 'function'
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 通用权限检查方法
|
||||
* Common check permissions method
|
||||
* @param { 权限判定 Permission judgment type string |array | Promise | Function } authority
|
||||
* @param { 你的权限 Your permission description type:string} currentAuthority
|
||||
* @param { 通过的组件 Passing components } target
|
||||
* @param { 未通过的组件 no pass components } Exception
|
||||
*/
|
||||
const checkPermissions = (authority, currentAuthority, target, Exception) => {
|
||||
// 没有判定权限.默认查看所有
|
||||
// Retirement authority, return target;
|
||||
if (!authority) {
|
||||
return target;
|
||||
}
|
||||
// 数组处理
|
||||
if (Array.isArray(authority)) {
|
||||
if (authority.indexOf(currentAuthority) >= 0) {
|
||||
return target;
|
||||
}
|
||||
if (Array.isArray(currentAuthority)) {
|
||||
for (let i = 0; i < currentAuthority.length; i += 1) {
|
||||
const element = currentAuthority[i];
|
||||
if (authority.indexOf(element) >= 0) {
|
||||
return target;
|
||||
}
|
||||
}
|
||||
}
|
||||
return Exception;
|
||||
}
|
||||
|
||||
// string 处理
|
||||
if (typeof authority === 'string') {
|
||||
if (authority === currentAuthority) {
|
||||
return target;
|
||||
}
|
||||
if (Array.isArray(currentAuthority)) {
|
||||
for (let i = 0; i < currentAuthority.length; i += 1) {
|
||||
const element = currentAuthority[i];
|
||||
if (authority === element) {
|
||||
return target;
|
||||
}
|
||||
}
|
||||
}
|
||||
return Exception;
|
||||
}
|
||||
|
||||
// Promise 处理
|
||||
if (isPromise(authority)) {
|
||||
return <PromiseRender ok={target} error={Exception} promise={authority} />;
|
||||
}
|
||||
|
||||
// Function 处理
|
||||
if (typeof authority === 'function') {
|
||||
try {
|
||||
const bool = authority(currentAuthority);
|
||||
// 函数执行后返回值是 Promise
|
||||
if (isPromise(bool)) {
|
||||
return <PromiseRender ok={target} error={Exception} promise={bool} />;
|
||||
}
|
||||
if (bool) {
|
||||
return target;
|
||||
}
|
||||
return Exception;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
throw new Error('unsupported parameters');
|
||||
};
|
||||
|
||||
export { checkPermissions };
|
||||
|
||||
const check = (authority, target, Exception) =>
|
||||
checkPermissions(authority, CURRENT, target, Exception);
|
||||
|
||||
export default check;
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
import { checkPermissions } from './CheckPermissions';
|
||||
|
||||
const target = 'ok';
|
||||
const error = 'error';
|
||||
|
||||
describe('test CheckPermissions', () => {
|
||||
it('Correct string permission authentication', () => {
|
||||
expect(checkPermissions('user', 'user', target, error)).toEqual('ok');
|
||||
});
|
||||
it('Correct string permission authentication', () => {
|
||||
expect(checkPermissions('user', 'NULL', target, error)).toEqual('error');
|
||||
});
|
||||
it('authority is undefined , return ok', () => {
|
||||
expect(checkPermissions(null, 'NULL', target, error)).toEqual('ok');
|
||||
});
|
||||
it('currentAuthority is undefined , return error', () => {
|
||||
expect(checkPermissions('admin', null, target, error)).toEqual('error');
|
||||
});
|
||||
it('Wrong string permission authentication', () => {
|
||||
expect(checkPermissions('admin', 'user', target, error)).toEqual('error');
|
||||
});
|
||||
it('Correct Array permission authentication', () => {
|
||||
expect(checkPermissions(['user', 'admin'], 'user', target, error)).toEqual('ok');
|
||||
});
|
||||
it('Wrong Array permission authentication,currentAuthority error', () => {
|
||||
expect(checkPermissions(['user', 'admin'], 'user,admin', target, error)).toEqual('error');
|
||||
});
|
||||
it('Wrong Array permission authentication', () => {
|
||||
expect(checkPermissions(['user', 'admin'], 'guest', target, error)).toEqual('error');
|
||||
});
|
||||
it('Wrong Function permission authentication', () => {
|
||||
expect(checkPermissions(() => false, 'guest', target, error)).toEqual('error');
|
||||
});
|
||||
it('Correct Function permission authentication', () => {
|
||||
expect(checkPermissions(() => true, 'guest', target, error)).toEqual('ok');
|
||||
});
|
||||
it('authority is string, currentAuthority is array, return ok', () => {
|
||||
expect(checkPermissions('user', ['user'], target, error)).toEqual('ok');
|
||||
});
|
||||
it('authority is string, currentAuthority is array, return ok', () => {
|
||||
expect(checkPermissions('user', ['user', 'admin'], target, error)).toEqual('ok');
|
||||
});
|
||||
it('authority is array, currentAuthority is array, return ok', () => {
|
||||
expect(checkPermissions(['user', 'admin'], ['user', 'admin'], target, error)).toEqual('ok');
|
||||
});
|
||||
it('Wrong Function permission authentication', () => {
|
||||
expect(checkPermissions(() => false, ['user'], target, error)).toEqual('error');
|
||||
});
|
||||
it('Correct Function permission authentication', () => {
|
||||
expect(checkPermissions(() => true, ['user'], target, error)).toEqual('ok');
|
||||
});
|
||||
it('authority is undefined , return ok', () => {
|
||||
expect(checkPermissions(null, ['user'], target, error)).toEqual('ok');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Spin } from 'antd';
|
||||
|
||||
export default class PromiseRender extends React.PureComponent {
|
||||
state = {
|
||||
component: null,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.setRenderComponent(this.props);
|
||||
}
|
||||
|
||||
componentDidUpdate(nextProps) {
|
||||
// new Props enter
|
||||
this.setRenderComponent(nextProps);
|
||||
}
|
||||
|
||||
// set render Component : ok or error
|
||||
setRenderComponent(props) {
|
||||
const ok = this.checkIsInstantiation(props.ok);
|
||||
const error = this.checkIsInstantiation(props.error);
|
||||
props.promise
|
||||
.then(() => {
|
||||
this.setState({
|
||||
component: ok,
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.setState({
|
||||
component: error,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Determine whether the incoming component has been instantiated
|
||||
// AuthorizedRoute is already instantiated
|
||||
// Authorized render is already instantiated, children is no instantiated
|
||||
// Secured is not instantiated
|
||||
checkIsInstantiation = target => {
|
||||
if (!React.isValidElement(target)) {
|
||||
return target;
|
||||
}
|
||||
return () => target;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { component: Component } = this.state;
|
||||
const { ok, error, promise, ...rest } = this.props;
|
||||
return Component ? (
|
||||
<Component {...rest} />
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
margin: 'auto',
|
||||
paddingTop: 50,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
import React from 'react';
|
||||
import Exception from '../Exception';
|
||||
import CheckPermissions from './CheckPermissions';
|
||||
/**
|
||||
* 默认不能访问任何页面
|
||||
* default is "NULL"
|
||||
*/
|
||||
const Exception403 = () => <Exception type="403" />;
|
||||
|
||||
// Determine whether the incoming component has been instantiated
|
||||
// AuthorizedRoute is already instantiated
|
||||
// Authorized render is already instantiated, children is no instantiated
|
||||
// Secured is not instantiated
|
||||
const checkIsInstantiation = target => {
|
||||
if (!React.isValidElement(target)) {
|
||||
return target;
|
||||
}
|
||||
return () => target;
|
||||
};
|
||||
|
||||
/**
|
||||
* 用于判断是否拥有权限访问此view权限
|
||||
* authority 支持传入 string, function:()=>boolean|Promise
|
||||
* e.g. 'user' 只有user用户能访问
|
||||
* e.g. 'user,admin' user和 admin 都能访问
|
||||
* e.g. ()=>boolean 返回true能访问,返回false不能访问
|
||||
* e.g. Promise then 能访问 catch不能访问
|
||||
* e.g. authority support incoming string, function: () => boolean | Promise
|
||||
* e.g. 'user' only user user can access
|
||||
* e.g. 'user, admin' user and admin can access
|
||||
* e.g. () => boolean true to be able to visit, return false can not be accessed
|
||||
* e.g. Promise then can not access the visit to catch
|
||||
* @param {string | function | Promise} authority
|
||||
* @param {ReactNode} error 非必需参数
|
||||
*/
|
||||
const authorize = (authority, error) => {
|
||||
/**
|
||||
* conversion into a class
|
||||
* 防止传入字符串时找不到staticContext造成报错
|
||||
* String parameters can cause staticContext not found error
|
||||
*/
|
||||
let classError = false;
|
||||
if (error) {
|
||||
classError = () => error;
|
||||
}
|
||||
if (!authority) {
|
||||
throw new Error('authority is required');
|
||||
}
|
||||
return function decideAuthority(target) {
|
||||
const component = CheckPermissions(authority, target, classError || Exception403);
|
||||
return checkIsInstantiation(component);
|
||||
};
|
||||
};
|
||||
|
||||
export default authorize;
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 使用数组作为参数
|
||||
en-US: Use Array as a parameter
|
||||
---
|
||||
|
||||
Use Array as a parameter
|
||||
|
||||
```jsx
|
||||
import RenderAuthorized from 'ant-design-pro/lib/Authorized';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const Authorized = RenderAuthorized('user');
|
||||
const noMatch = <Alert message="No permission." type="error" showIcon />;
|
||||
|
||||
ReactDOM.render(
|
||||
<Authorized authority={['user', 'admin']} noMatch={noMatch}>
|
||||
<Alert message="Use Array as a parameter passed!" type="success" showIcon />
|
||||
</Authorized>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 使用方法作为参数
|
||||
en-US: Use function as a parameter
|
||||
---
|
||||
|
||||
Use Function as a parameter
|
||||
|
||||
```jsx
|
||||
import RenderAuthorized from 'ant-design-pro/lib/Authorized';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const Authorized = RenderAuthorized('user');
|
||||
const noMatch = <Alert message="No permission." type="error" showIcon />;
|
||||
|
||||
const havePermission = () => {
|
||||
return false;
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<Authorized authority={havePermission} noMatch={noMatch}>
|
||||
<Alert
|
||||
message="Use Function as a parameter passed!"
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
</Authorized>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本使用
|
||||
en-US: Basic use
|
||||
---
|
||||
|
||||
Basic use
|
||||
|
||||
```jsx
|
||||
import RenderAuthorized from 'ant-design-pro/lib/Authorized';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const Authorized = RenderAuthorized('user');
|
||||
const noMatch = <Alert message="No permission." type="error" showIcon />;
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Authorized authority="admin" noMatch={noMatch}>
|
||||
<Alert message="user Passed!" type="success" showIcon />
|
||||
</Authorized>
|
||||
</div>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 注解基本使用
|
||||
en-US: Basic use secured
|
||||
---
|
||||
|
||||
secured demo used
|
||||
|
||||
```jsx
|
||||
import RenderAuthorized from 'ant-design-pro/lib/Authorized';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const { Secured } = RenderAuthorized('user');
|
||||
|
||||
@Secured('admin')
|
||||
class TestSecuredString extends React.Component {
|
||||
render() {
|
||||
<Alert message="user Passed!" type="success" showIcon />;
|
||||
}
|
||||
}
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<TestSecuredString />
|
||||
</div>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import * as React from 'react';
|
||||
import { RouteProps } from 'react-router';
|
||||
|
||||
type authorityFN = (currentAuthority?: string) => boolean;
|
||||
|
||||
type authority = string | Array<string> | authorityFN | Promise<any>;
|
||||
|
||||
export type IReactComponent<P = any> =
|
||||
| React.StatelessComponent<P>
|
||||
| React.ComponentClass<P>
|
||||
| React.ClassicComponentClass<P>;
|
||||
|
||||
interface Secured {
|
||||
(authority: authority, error?: React.ReactNode): <T extends IReactComponent>(target: T) => T;
|
||||
}
|
||||
|
||||
export interface AuthorizedRouteProps extends RouteProps {
|
||||
authority: authority;
|
||||
}
|
||||
export class AuthorizedRoute extends React.Component<AuthorizedRouteProps, any> {}
|
||||
|
||||
interface check {
|
||||
<T extends IReactComponent, S extends IReactComponent>(
|
||||
authority: authority,
|
||||
target: T,
|
||||
Exception: S
|
||||
): T | S;
|
||||
}
|
||||
|
||||
export interface AuthorizedProps {
|
||||
authority: authority;
|
||||
noMatch?: React.ReactNode;
|
||||
}
|
||||
|
||||
export class Authorized extends React.Component<AuthorizedProps, any> {
|
||||
static Secured: Secured;
|
||||
static AuthorizedRoute: typeof AuthorizedRoute;
|
||||
static check: check;
|
||||
}
|
||||
|
||||
declare function renderAuthorize(currentAuthority: string): typeof Authorized;
|
||||
|
||||
export default renderAuthorize;
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import Authorized from './Authorized';
|
||||
import AuthorizedRoute from './AuthorizedRoute';
|
||||
import Secured from './Secured';
|
||||
import check from './CheckPermissions';
|
||||
import renderAuthorize from './renderAuthorize';
|
||||
|
||||
Authorized.Secured = Secured;
|
||||
Authorized.AuthorizedRoute = AuthorizedRoute;
|
||||
Authorized.check = check;
|
||||
|
||||
export default renderAuthorize(Authorized);
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
---
|
||||
title:
|
||||
en-US: Authorized
|
||||
zh-CN: Authorized
|
||||
subtitle: 权限
|
||||
cols: 1
|
||||
order: 15
|
||||
---
|
||||
|
||||
权限组件，通过比对现有权限与准入权限，决定相关元素的展示。
|
||||
|
||||
## API
|
||||
|
||||
### RenderAuthorized
|
||||
|
||||
`RenderAuthorized: (currentAuthority: string | () => string) => Authorized`
|
||||
|
||||
权限组件默认 export RenderAuthorized 函数，它接收当前权限作为参数，返回一个权限对象，该对象提供以下几种使用方式。
|
||||
|
||||
|
||||
### Authorized
|
||||
|
||||
最基础的权限控制。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| children | 正常渲染的元素，权限判断通过时展示 | ReactNode | - |
|
||||
| authority | 准入权限/权限判断 | `string | array | Promise | (currentAuthority) => boolean | Promise` | - |
|
||||
| noMatch | 权限异常渲染元素，权限判断不通过时展示 | ReactNode | - |
|
||||
|
||||
### Authorized.AuthorizedRoute
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| authority | 准入权限/权限判断 | `string | array | Promise | (currentAuthority) => boolean | Promise` | - |
|
||||
| redirectPath | 权限异常时重定向的页面路由 | string | - |
|
||||
|
||||
其余参数与 `Route` 相同。
|
||||
|
||||
### Authorized.Secured
|
||||
|
||||
注解方式，`@Authorized.Secured(authority, error)`
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| authority | 准入权限/权限判断 | `string | Promise | (currentAuthority) => boolean | Promise` | - |
|
||||
| error | 权限异常时渲染元素 | ReactNode | <Exception type="403" /> |
|
||||
|
||||
### Authorized.check
|
||||
|
||||
函数形式的 Authorized，用于某些不能被 HOC 包裹的组件。 `Authorized.check(authority, target, Exception)`
|
||||
注意：传入一个 Promise 时，无论正确还是错误返回的都是一个 ReactClass。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| authority | 准入权限/权限判断 | `string | Promise | (currentAuthority) => boolean | Promise` | - |
|
||||
| target | 权限判断通过时渲染的元素 | ReactNode | - |
|
||||
| Exception | 权限异常时渲染元素 | ReactNode | - |
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
/* eslint-disable import/no-mutable-exports */
|
||||
let CURRENT = 'NULL';
|
||||
/**
|
||||
* use authority or getAuthority
|
||||
* @param {string|()=>String} currentAuthority
|
||||
*/
|
||||
const renderAuthorize = Authorized => currentAuthority => {
|
||||
if (currentAuthority) {
|
||||
if (typeof currentAuthority === 'function') {
|
||||
CURRENT = currentAuthority();
|
||||
}
|
||||
if (
|
||||
Object.prototype.toString.call(currentAuthority) === '[object String]' ||
|
||||
Array.isArray(currentAuthority)
|
||||
) {
|
||||
CURRENT = currentAuthority;
|
||||
}
|
||||
} else {
|
||||
CURRENT = 'NULL';
|
||||
}
|
||||
return Authorized;
|
||||
};
|
||||
|
||||
export { CURRENT };
|
||||
export default Authorized => renderAuthorize(Authorized);
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface IAvatarItemProps {
|
||||
tips: React.ReactNode;
|
||||
src: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export default class AvatarItem extends React.Component<IAvatarItemProps, any> {
|
||||
constructor(props: IAvatarItemProps);
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基础样例
|
||||
en-US: Basic Usage
|
||||
---
|
||||
|
||||
Simplest of usage.
|
||||
|
||||
````jsx
|
||||
import AvatarList from 'ant-design-pro/lib/AvatarList';
|
||||
|
||||
ReactDOM.render(
|
||||
<AvatarList size="mini">
|
||||
<AvatarList.Item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
|
||||
<AvatarList.Item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
|
||||
<AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
</AvatarList>
|
||||
, mountNode);
|
||||
````
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import * as React from 'react';
|
||||
import AvatarItem from './AvatarItem';
|
||||
|
||||
export interface IAvatarListProps {
|
||||
size?: 'large' | 'small' | 'mini' | 'default';
|
||||
style?: React.CSSProperties;
|
||||
children: React.ReactElement<AvatarItem> | Array<React.ReactElement<AvatarItem>>;
|
||||
}
|
||||
|
||||
export default class AvatarList extends React.Component<IAvatarListProps, any> {
|
||||
public static Item: typeof AvatarItem;
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
---
|
||||
title: AvatarList
|
||||
order: 1
|
||||
cols: 1
|
||||
---
|
||||
|
||||
A list of user's avatar for project or group member list frequently. If a large or small AvatarList is desired, set the `size` property to either `large` or `small` and `mini` respectively. Omit the `size` property for a AvatarList with the default size.
|
||||
|
||||
## API
|
||||
|
||||
### AvatarList
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| size | size of list | `large`、`small` 、`mini`, `default` | `default` |
|
||||
|
||||
### AvatarList.Item
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| tips | title tips for avatar item | ReactNode | - |
|
||||
| src | the address of the image for an image avatar | string | - |
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Tooltip, Avatar } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import styles from './index.less';
|
||||
|
||||
const AvatarList = ({ children, size, ...other }) => {
|
||||
const childrenWithProps = React.Children.map(children, child =>
|
||||
React.cloneElement(child, {
|
||||
size,
|
||||
})
|
||||
);
|
||||
|
||||
return (
|
||||
<div {...other} className={styles.avatarList}>
|
||||
<ul> {childrenWithProps} </ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Item = ({ src, size, tips, onClick = () => {} }) => {
|
||||
const cls = classNames(styles.avatarItem, {
|
||||
[styles.avatarItemLarge]: size === 'large',
|
||||
[styles.avatarItemSmall]: size === 'small',
|
||||
[styles.avatarItemMini]: size === 'mini',
|
||||
});
|
||||
|
||||
return (
|
||||
<li className={cls} onClick={onClick}>
|
||||
{tips ? (
|
||||
<Tooltip title={tips}>
|
||||
<Avatar src={src} size={size} style={{ cursor: 'pointer' }} />
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Avatar src={src} size={size} />
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
AvatarList.Item = Item;
|
||||
|
||||
export default AvatarList;
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
@import '~antd/lib/style/themes/default.less';
|
||||
|
||||
.avatarList {
|
||||
display: inline-block;
|
||||
ul {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.avatarItem {
|
||||
display: inline-block;
|
||||
font-size: @font-size-base;
|
||||
margin-left: -8px;
|
||||
width: @avatar-size-base;
|
||||
height: @avatar-size-base;
|
||||
:global {
|
||||
.ant-avatar {
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatarItemLarge {
|
||||
width: @avatar-size-lg;
|
||||
height: @avatar-size-lg;
|
||||
}
|
||||
|
||||
.avatarItemSmall {
|
||||
width: @avatar-size-sm;
|
||||
height: @avatar-size-sm;
|
||||
}
|
||||
|
||||
.avatarItemMini {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
:global {
|
||||
.ant-avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
---
|
||||
title: AvatarList
|
||||
subtitle: 用户头像列表
|
||||
order: 1
|
||||
cols: 1
|
||||
---
|
||||
|
||||
一组用户头像，常用在项目/团队成员列表。可通过设置 `size` 属性来指定头像大小。
|
||||
|
||||
## API
|
||||
|
||||
### AvatarList
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| size | 头像大小 | `large`、`small` 、`mini`, `default` | `default` |
|
||||
|
||||
### AvatarList.Item
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| tips | 头像展示文案 | ReactNode | - |
|
||||
| src | 头像图片连接 | string | - |
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface IBarProps {
|
||||
title: React.ReactNode;
|
||||
color?: string;
|
||||
padding?: [number, number, number, number];
|
||||
height: number;
|
||||
data: Array<{
|
||||
x: string;
|
||||
y: number;
|
||||
}>;
|
||||
autoLabel?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export default class Bar extends React.Component<IBarProps, any> {}
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
|
||||
import Debounce from 'lodash-decorators/debounce';
|
||||
import Bind from 'lodash-decorators/bind';
|
||||
import autoHeight from '../autoHeight';
|
||||
import styles from '../index.less';
|
||||
|
||||
@autoHeight()
|
||||
class Bar extends Component {
|
||||
state = {
|
||||
autoHideXLabels: false,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener('resize', this.resize, { passive: true });
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('resize', this.resize);
|
||||
}
|
||||
|
||||
handleRoot = n => {
|
||||
this.root = n;
|
||||
};
|
||||
|
||||
handleRef = n => {
|
||||
this.node = n;
|
||||
};
|
||||
|
||||
@Bind()
|
||||
@Debounce(400)
|
||||
resize() {
|
||||
if (!this.node) {
|
||||
return;
|
||||
}
|
||||
const canvasWidth = this.node.parentNode.clientWidth;
|
||||
const { data = [], autoLabel = true } = this.props;
|
||||
if (!autoLabel) {
|
||||
return;
|
||||
}
|
||||
const minWidth = data.length * 30;
|
||||
const { autoHideXLabels } = this.state;
|
||||
|
||||
if (canvasWidth <= minWidth) {
|
||||
if (!autoHideXLabels) {
|
||||
this.setState({
|
||||
autoHideXLabels: true,
|
||||
});
|
||||
}
|
||||
} else if (autoHideXLabels) {
|
||||
this.setState({
|
||||
autoHideXLabels: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
height,
|
||||
title,
|
||||
forceFit = true,
|
||||
data,
|
||||
color = 'rgba(24, 144, 255, 0.85)',
|
||||
padding,
|
||||
} = this.props;
|
||||
|
||||
const { autoHideXLabels } = this.state;
|
||||
|
||||
const scale = {
|
||||
x: {
|
||||
type: 'cat',
|
||||
},
|
||||
y: {
|
||||
min: 0,
|
||||
},
|
||||
};
|
||||
|
||||
const tooltip = [
|
||||
'x*y',
|
||||
(x, y) => ({
|
||||
name: x,
|
||||
value: y,
|
||||
}),
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.chart} style={{ height }} ref={this.handleRoot}>
|
||||
<div ref={this.handleRef}>
|
||||
{title && <h4 style={{ marginBottom: 20 }}>{title}</h4>}
|
||||
<Chart
|
||||
scale={scale}
|
||||
height={title ? height - 41 : height}
|
||||
forceFit={forceFit}
|
||||
data={data}
|
||||
padding={padding || 'auto'}
|
||||
>
|
||||
<Axis
|
||||
name="x"
|
||||
title={false}
|
||||
label={autoHideXLabels ? false : {}}
|
||||
tickLine={autoHideXLabels ? false : {}}
|
||||
/>
|
||||
<Axis name="y" min={0} />
|
||||
<Tooltip showTitle={false} crosshairs={false} />
|
||||
<Geom type="interval" position="x*y" color={color} tooltip={tooltip} />
|
||||
</Chart>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Bar;
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import * as React from 'react';
|
||||
import { CardProps } from 'antd/lib/card';
|
||||
|
||||
export interface IChartCardProps extends CardProps {
|
||||
title: React.ReactNode;
|
||||
action?: React.ReactNode;
|
||||
total?: React.ReactNode | number | (() => React.ReactNode | number);
|
||||
footer?: React.ReactNode;
|
||||
contentHeight?: number;
|
||||
avatar?: React.ReactNode;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export default class ChartCard extends React.Component<IChartCardProps, any> {}
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Card } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import styles from './index.less';
|
||||
|
||||
const renderTotal = total => {
|
||||
let totalDom;
|
||||
switch (typeof total) {
|
||||
case 'undefined':
|
||||
totalDom = null;
|
||||
break;
|
||||
case 'function':
|
||||
totalDom = <div className={styles.total}>{total()}</div>;
|
||||
break;
|
||||
default:
|
||||
totalDom = <div className={styles.total}>{total}</div>;
|
||||
}
|
||||
return totalDom;
|
||||
};
|
||||
|
||||
class ChartCard extends React.PureComponent {
|
||||
renderConnet = () => {
|
||||
const { contentHeight, title, avatar, action, total, footer, children, loading } = this.props;
|
||||
if (loading) {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
<div className={styles.chartCard}>
|
||||
<div
|
||||
className={classNames(styles.chartTop, {
|
||||
[styles.chartTopMargin]: !children && !footer,
|
||||
})}
|
||||
>
|
||||
<div className={styles.avatar}>{avatar}</div>
|
||||
<div className={styles.metaWrap}>
|
||||
<div className={styles.meta}>
|
||||
<span className={styles.title}>{title}</span>
|
||||
<span className={styles.action}>{action}</span>
|
||||
</div>
|
||||
{renderTotal(total)}
|
||||
</div>
|
||||
</div>
|
||||
{children && (
|
||||
<div className={styles.content} style={{ height: contentHeight || 'auto' }}>
|
||||
<div className={contentHeight && styles.contentFixed}>{children}</div>
|
||||
</div>
|
||||
)}
|
||||
{footer && (
|
||||
<div
|
||||
className={classNames(styles.footer, {
|
||||
[styles.footerMargin]: !children,
|
||||
})}
|
||||
>
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
loading = false,
|
||||
contentHeight,
|
||||
title,
|
||||
avatar,
|
||||
action,
|
||||
total,
|
||||
footer,
|
||||
children,
|
||||
...rest
|
||||
} = this.props;
|
||||
return (
|
||||
<Card loading={loading} bodyStyle={{ padding: '20px 24px 8px 24px' }} {...rest}>
|
||||
{this.renderConnet()}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ChartCard;
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
@import '~antd/lib/style/themes/default.less';
|
||||
|
||||
.chartCard {
|
||||
position: relative;
|
||||
.chartTop {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.chartTopMargin {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.chartTopHasMargin {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.metaWrap {
|
||||
float: left;
|
||||
}
|
||||
.avatar {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
img {
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
.meta {
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
.action {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.total {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
color: @heading-color;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
font-size: 30px;
|
||||
line-height: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
.content {
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.contentFixed {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.footer {
|
||||
border-top: 1px solid @border-color-split;
|
||||
padding-top: 9px;
|
||||
margin-top: 8px;
|
||||
& > * {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.footerMargin {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface IFieldProps {
|
||||
label: React.ReactNode;
|
||||
value: React.ReactNode;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export default class Field extends React.Component<IFieldProps, any> {}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
import styles from './index.less';
|
||||
|
||||
const Field = ({ label, value, ...rest }) => (
|
||||
<div className={styles.field} {...rest}>
|
||||
<span>{label}</span>
|
||||
<span>{value}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Field;
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
@import '~antd/lib/style/themes/default.less';
|
||||
|
||||
.field {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0;
|
||||
span {
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
}
|
||||
span:last-child {
|
||||
margin-left: 8px;
|
||||
color: @heading-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface IGaugeProps {
|
||||
title: React.ReactNode;
|
||||
color?: string;
|
||||
height: number;
|
||||
bgColor?: number;
|
||||
percent: number;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export default class Gauge extends React.Component<IGaugeProps, any> {}
|
||||
|
|
@ -1,167 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Chart, Geom, Axis, Coord, Guide, Shape } from 'bizcharts';
|
||||
import autoHeight from '../autoHeight';
|
||||
|
||||
const { Arc, Html, Line } = Guide;
|
||||
|
||||
const defaultFormatter = val => {
|
||||
switch (val) {
|
||||
case '2':
|
||||
return '差';
|
||||
case '4':
|
||||
return '中';
|
||||
case '6':
|
||||
return '良';
|
||||
case '8':
|
||||
return '优';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
Shape.registerShape('point', 'pointer', {
|
||||
drawShape(cfg, group) {
|
||||
let point = cfg.points[0];
|
||||
point = this.parsePoint(point);
|
||||
const center = this.parsePoint({
|
||||
x: 0,
|
||||
y: 0,
|
||||
});
|
||||
group.addShape('line', {
|
||||
attrs: {
|
||||
x1: center.x,
|
||||
y1: center.y,
|
||||
x2: point.x,
|
||||
y2: point.y,
|
||||
stroke: cfg.color,
|
||||
lineWidth: 2,
|
||||
lineCap: 'round',
|
||||
},
|
||||
});
|
||||
return group.addShape('circle', {
|
||||
attrs: {
|
||||
x: center.x,
|
||||
y: center.y,
|
||||
r: 6,
|
||||
stroke: cfg.color,
|
||||
lineWidth: 3,
|
||||
fill: '#fff',
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@autoHeight()
|
||||
class Gauge extends React.Component {
|
||||
render() {
|
||||
const {
|
||||
title,
|
||||
height,
|
||||
percent,
|
||||
forceFit = true,
|
||||
formatter = defaultFormatter,
|
||||
color = '#2F9CFF',
|
||||
bgColor = '#F0F2F5',
|
||||
} = this.props;
|
||||
const cols = {
|
||||
value: {
|
||||
type: 'linear',
|
||||
min: 0,
|
||||
max: 10,
|
||||
tickCount: 6,
|
||||
nice: true,
|
||||
},
|
||||
};
|
||||
const data = [{ value: percent / 10 }];
|
||||
return (
|
||||
<Chart height={height} data={data} scale={cols} padding={[-16, 0, 16, 0]} forceFit={forceFit}>
|
||||
<Coord type="polar" startAngle={-1.25 * Math.PI} endAngle={0.25 * Math.PI} radius={0.8} />
|
||||
<Axis name="1" line={null} />
|
||||
<Axis
|
||||
line={null}
|
||||
tickLine={null}
|
||||
subTickLine={null}
|
||||
name="value"
|
||||
zIndex={2}
|
||||
gird={null}
|
||||
label={{
|
||||
offset: -12,
|
||||
formatter,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
fill: 'rgba(0, 0, 0, 0.65)',
|
||||
textAlign: 'center',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Guide>
|
||||
<Line
|
||||
start={[3, 0.905]}
|
||||
end={[3, 0.85]}
|
||||
lineStyle={{
|
||||
stroke: color,
|
||||
lineDash: null,
|
||||
lineWidth: 2,
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
start={[5, 0.905]}
|
||||
end={[5, 0.85]}
|
||||
lineStyle={{
|
||||
stroke: color,
|
||||
lineDash: null,
|
||||
lineWidth: 3,
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
start={[7, 0.905]}
|
||||
end={[7, 0.85]}
|
||||
lineStyle={{
|
||||
stroke: color,
|
||||
lineDash: null,
|
||||
lineWidth: 3,
|
||||
}}
|
||||
/>
|
||||
<Arc
|
||||
zIndex={0}
|
||||
start={[0, 0.965]}
|
||||
end={[10, 0.965]}
|
||||
style={{
|
||||
stroke: bgColor,
|
||||
lineWidth: 10,
|
||||
}}
|
||||
/>
|
||||
<Arc
|
||||
zIndex={1}
|
||||
start={[0, 0.965]}
|
||||
end={[data[0].value, 0.965]}
|
||||
style={{
|
||||
stroke: color,
|
||||
lineWidth: 10,
|
||||
}}
|
||||
/>
|
||||
<Html
|
||||
position={['50%', '95%']}
|
||||
html={() => `
|
||||
<div style="width: 300px;text-align: center;font-size: 12px!important;">
|
||||
<p style="font-size: 14px; color: rgba(0,0,0,0.43);margin: 0;">${title}</p>
|
||||
<p style="font-size: 24px;color: rgba(0,0,0,0.85);margin: 0;">
|
||||
${data[0].value * 10}%
|
||||
</p>
|
||||
</div>`}
|
||||
/>
|
||||
</Guide>
|
||||
<Geom
|
||||
line={false}
|
||||
type="point"
|
||||
position="value*1"
|
||||
shape="pointer"
|
||||
color={color}
|
||||
active={false}
|
||||
/>
|
||||
</Chart>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Gauge;
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import * as React from 'react';
|
||||
|
||||
// g2已经更新到3.0
|
||||
// 不带的写了
|
||||
|
||||
export interface IAxis {
|
||||
title: any;
|
||||
line: any;
|
||||
gridAlign: any;
|
||||
labels: any;
|
||||
tickLine: any;
|
||||
grid: any;
|
||||
}
|
||||
|
||||
export interface IMiniAreaProps {
|
||||
color?: string;
|
||||
height: number;
|
||||
borderColor?: string;
|
||||
line?: boolean;
|
||||
animate?: boolean;
|
||||
xAxis?: IAxis;
|
||||
yAxis?: IAxis;
|
||||
data: Array<{
|
||||
x: number | string;
|
||||
y: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
export default class MiniArea extends React.Component<IMiniAreaProps, any> {}
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
|
||||
import autoHeight from '../autoHeight';
|
||||
import styles from '../index.less';
|
||||
|
||||
@autoHeight()
|
||||
class MiniArea extends React.PureComponent {
|
||||
render() {
|
||||
const {
|
||||
height,
|
||||
data = [],
|
||||
forceFit = true,
|
||||
color = 'rgba(24, 144, 255, 0.2)',
|
||||
borderColor = '#1089ff',
|
||||
scale = {},
|
||||
borderWidth = 2,
|
||||
line,
|
||||
xAxis,
|
||||
yAxis,
|
||||
animate = true,
|
||||
} = this.props;
|
||||
|
||||
const padding = [36, 5, 30, 5];
|
||||
|
||||
const scaleProps = {
|
||||
x: {
|
||||
type: 'cat',
|
||||
range: [0, 1],
|
||||
...scale.x,
|
||||
},
|
||||
y: {
|
||||
min: 0,
|
||||
...scale.y,
|
||||
},
|
||||
};
|
||||
|
||||
const tooltip = [
|
||||
'x*y',
|
||||
(x, y) => ({
|
||||
name: x,
|
||||
value: y,
|
||||
}),
|
||||
];
|
||||
|
||||
const chartHeight = height + 54;
|
||||
|
||||
return (
|
||||
<div className={styles.miniChart} style={{ height }}>
|
||||
<div className={styles.chartContent}>
|
||||
{height > 0 && (
|
||||
<Chart
|
||||
animate={animate}
|
||||
scale={scaleProps}
|
||||
height={chartHeight}
|
||||
forceFit={forceFit}
|
||||
data={data}
|
||||
padding={padding}
|
||||
>
|
||||
<Axis
|
||||
key="axis-x"
|
||||
name="x"
|
||||
label={false}
|
||||
line={false}
|
||||
tickLine={false}
|
||||
grid={false}
|
||||
{...xAxis}
|
||||
/>
|
||||
<Axis
|
||||
key="axis-y"
|
||||
name="y"
|
||||
label={false}
|
||||
line={false}
|
||||
tickLine={false}
|
||||
grid={false}
|
||||
{...yAxis}
|
||||
/>
|
||||
<Tooltip showTitle={false} crosshairs={false} />
|
||||
<Geom
|
||||
type="area"
|
||||
position="x*y"
|
||||
color={color}
|
||||
tooltip={tooltip}
|
||||
shape="smooth"
|
||||
style={{
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
{line ? (
|
||||
<Geom
|
||||
type="line"
|
||||
position="x*y"
|
||||
shape="smooth"
|
||||
color={borderColor}
|
||||
size={borderWidth}
|
||||
tooltip={false}
|
||||
/>
|
||||
) : (
|
||||
<span style={{ display: 'none' }} />
|
||||
)}
|
||||
</Chart>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MiniArea;
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface IMiniBarProps {
|
||||
color?: string;
|
||||
height: number;
|
||||
data: Array<{
|
||||
x: number | string;
|
||||
y: number;
|
||||
}>;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export default class MiniBar extends React.Component<IMiniBarProps, any> {}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Chart, Tooltip, Geom } from 'bizcharts';
|
||||
import autoHeight from '../autoHeight';
|
||||
import styles from '../index.less';
|
||||
|
||||
@autoHeight()
|
||||
class MiniBar extends React.Component {
|
||||
render() {
|
||||
const { height, forceFit = true, color = '#1890FF', data = [] } = this.props;
|
||||
|
||||
const scale = {
|
||||
x: {
|
||||
type: 'cat',
|
||||
},
|
||||
y: {
|
||||
min: 0,
|
||||
},
|
||||
};
|
||||
|
||||
const padding = [36, 5, 30, 5];
|
||||
|
||||
const tooltip = [
|
||||
'x*y',
|
||||
(x, y) => ({
|
||||
name: x,
|
||||
value: y,
|
||||
}),
|
||||
];
|
||||
|
||||
// for tooltip not to be hide
|
||||
const chartHeight = height + 54;
|
||||
|
||||
return (
|
||||
<div className={styles.miniChart} style={{ height }}>
|
||||
<div className={styles.chartContent}>
|
||||
<Chart
|
||||
scale={scale}
|
||||
height={chartHeight}
|
||||
forceFit={forceFit}
|
||||
data={data}
|
||||
padding={padding}
|
||||
>
|
||||
<Tooltip showTitle={false} crosshairs={false} />
|
||||
<Geom type="interval" position="x*y" color={color} tooltip={tooltip} />
|
||||
</Chart>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default MiniBar;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface IMiniProgressProps {
|
||||
target: number;
|
||||
color?: string;
|
||||
strokeWidth?: number;
|
||||
percent?: number;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export default class MiniProgress extends React.Component<IMiniProgressProps, any> {}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Tooltip } from 'antd';
|
||||
|
||||
import styles from './index.less';
|
||||
|
||||
const MiniProgress = ({ target, color = 'rgb(19, 194, 194)', strokeWidth, percent }) => (
|
||||
<div className={styles.miniProgress}>
|
||||
<Tooltip title={`目标值: ${target}%`}>
|
||||
<div className={styles.target} style={{ left: target ? `${target}%` : null }}>
|
||||
<span style={{ backgroundColor: color || null }} />
|
||||
<span style={{ backgroundColor: color || null }} />
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div className={styles.progressWrap}>
|
||||
<div
|
||||
className={styles.progress}
|
||||
style={{
|
||||
backgroundColor: color || null,
|
||||
width: percent ? `${percent}%` : null,
|
||||
height: strokeWidth || null,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default MiniProgress;
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
@import '~antd/lib/style/themes/default.less';
|
||||
|
||||
.miniProgress {
|
||||
padding: 5px 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.progressWrap {
|
||||
background-color: @background-color-base;
|
||||
position: relative;
|
||||
}
|
||||
.progress {
|
||||
transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
|
||||
border-radius: 1px 0 0 1px;
|
||||
background-color: @primary-color;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.target {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
span {
|
||||
border-radius: 100px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
width: 2px;
|
||||
}
|
||||
span:last-child {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface IPieProps {
|
||||
animate?: boolean;
|
||||
color?: string;
|
||||
colors?: string[];
|
||||
height: number;
|
||||
hasLegend?: boolean;
|
||||
padding?: [number, number, number, number];
|
||||
percent?: number;
|
||||
data?: Array<{
|
||||
x: string | string;
|
||||
y: number;
|
||||
}>;
|
||||
total?: React.ReactNode | number | (() => React.ReactNode | number);
|
||||
title?: React.ReactNode;
|
||||
tooltip?: boolean;
|
||||
valueFormat?: (value: string) => string | React.ReactNode;
|
||||
subTitle?: React.ReactNode;
|
||||
}
|
||||
|
||||
export default class Pie extends React.Component<IPieProps, any> {}
|
||||
|
|
@ -1,271 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Chart, Tooltip, Geom, Coord } from 'bizcharts';
|
||||
import { DataView } from '@antv/data-set';
|
||||
import { Divider } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import ReactFitText from 'react-fittext';
|
||||
import Debounce from 'lodash-decorators/debounce';
|
||||
import Bind from 'lodash-decorators/bind';
|
||||
import autoHeight from '../autoHeight';
|
||||
|
||||
import styles from './index.less';
|
||||
|
||||
/* eslint react/no-danger:0 */
|
||||
@autoHeight()
|
||||
class Pie extends Component {
|
||||
state = {
|
||||
legendData: [],
|
||||
legendBlock: false,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener(
|
||||
'resize',
|
||||
() => {
|
||||
this.requestRef = requestAnimationFrame(() => this.resize());
|
||||
},
|
||||
{ passive: true }
|
||||
);
|
||||
}
|
||||
|
||||
componentDidUpdate(preProps) {
|
||||
const { data } = this.props;
|
||||
if (data !== preProps.data) {
|
||||
// because of charts data create when rendered
|
||||
// so there is a trick for get rendered time
|
||||
this.getLegendData();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.cancelAnimationFrame(this.requestRef);
|
||||
window.removeEventListener('resize', this.resize);
|
||||
this.resize.cancel();
|
||||
}
|
||||
|
||||
getG2Instance = chart => {
|
||||
this.chart = chart;
|
||||
requestAnimationFrame(() => {
|
||||
this.getLegendData();
|
||||
this.resize();
|
||||
});
|
||||
};
|
||||
|
||||
// for custom lengend view
|
||||
getLegendData = () => {
|
||||
if (!this.chart) return;
|
||||
const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
|
||||
if (!geom) return;
|
||||
const items = geom.get('dataArray') || []; // 获取图形对应的
|
||||
|
||||
const legendData = items.map(item => {
|
||||
/* eslint no-underscore-dangle:0 */
|
||||
const origin = item[0]._origin;
|
||||
origin.color = item[0].color;
|
||||
origin.checked = true;
|
||||
return origin;
|
||||
});
|
||||
|
||||
this.setState({
|
||||
legendData,
|
||||
});
|
||||
};
|
||||
|
||||
handleRoot = n => {
|
||||
this.root = n;
|
||||
};
|
||||
|
||||
handleLegendClick = (item, i) => {
|
||||
const newItem = item;
|
||||
newItem.checked = !newItem.checked;
|
||||
|
||||
const { legendData } = this.state;
|
||||
legendData[i] = newItem;
|
||||
|
||||
const filteredLegendData = legendData.filter(l => l.checked).map(l => l.x);
|
||||
|
||||
if (this.chart) {
|
||||
this.chart.filter('x', val => filteredLegendData.indexOf(val) > -1);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
legendData,
|
||||
});
|
||||
};
|
||||
|
||||
// for window resize auto responsive legend
|
||||
@Bind()
|
||||
@Debounce(300)
|
||||
resize() {
|
||||
const { hasLegend } = this.props;
|
||||
const { legendBlock } = this.state;
|
||||
if (!hasLegend || !this.root) {
|
||||
window.removeEventListener('resize', this.resize);
|
||||
return;
|
||||
}
|
||||
if (this.root.parentNode.clientWidth <= 380) {
|
||||
if (!legendBlock) {
|
||||
this.setState({
|
||||
legendBlock: true,
|
||||
});
|
||||
}
|
||||
} else if (legendBlock) {
|
||||
this.setState({
|
||||
legendBlock: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
valueFormat,
|
||||
subTitle,
|
||||
total,
|
||||
hasLegend = false,
|
||||
className,
|
||||
style,
|
||||
height,
|
||||
forceFit = true,
|
||||
percent,
|
||||
color,
|
||||
inner = 0.75,
|
||||
animate = true,
|
||||
colors,
|
||||
lineWidth = 1,
|
||||
} = this.props;
|
||||
|
||||
const { legendData, legendBlock } = this.state;
|
||||
const pieClassName = classNames(styles.pie, className, {
|
||||
[styles.hasLegend]: !!hasLegend,
|
||||
[styles.legendBlock]: legendBlock,
|
||||
});
|
||||
|
||||
const {
|
||||
data: propsData,
|
||||
selected: propsSelected = true,
|
||||
tooltip: propsTooltip = true,
|
||||
} = this.props;
|
||||
|
||||
let data = propsData || [];
|
||||
let selected = propsSelected;
|
||||
let tooltip = propsTooltip;
|
||||
|
||||
const defaultColors = colors;
|
||||
data = data || [];
|
||||
selected = selected || true;
|
||||
tooltip = tooltip || true;
|
||||
let formatColor;
|
||||
|
||||
const scale = {
|
||||
x: {
|
||||
type: 'cat',
|
||||
range: [0, 1],
|
||||
},
|
||||
y: {
|
||||
min: 0,
|
||||
},
|
||||
};
|
||||
|
||||
if (percent || percent === 0) {
|
||||
selected = false;
|
||||
tooltip = false;
|
||||
formatColor = value => {
|
||||
if (value === '占比') {
|
||||
return color || 'rgba(24, 144, 255, 0.85)';
|
||||
}
|
||||
return '#F0F2F5';
|
||||
};
|
||||
|
||||
data = [
|
||||
{
|
||||
x: '占比',
|
||||
y: parseFloat(percent),
|
||||
},
|
||||
{
|
||||
x: '反比',
|
||||
y: 100 - parseFloat(percent),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const tooltipFormat = [
|
||||
'x*percent',
|
||||
(x, p) => ({
|
||||
name: x,
|
||||
value: `${(p * 100).toFixed(2)}%`,
|
||||
}),
|
||||
];
|
||||
|
||||
const padding = [12, 0, 12, 0];
|
||||
|
||||
const dv = new DataView();
|
||||
dv.source(data).transform({
|
||||
type: 'percent',
|
||||
field: 'y',
|
||||
dimension: 'x',
|
||||
as: 'percent',
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={this.handleRoot} className={pieClassName} style={style}>
|
||||
<ReactFitText maxFontSize={25}>
|
||||
<div className={styles.chart}>
|
||||
<Chart
|
||||
scale={scale}
|
||||
height={height}
|
||||
forceFit={forceFit}
|
||||
data={dv}
|
||||
padding={padding}
|
||||
animate={animate}
|
||||
onGetG2Instance={this.getG2Instance}
|
||||
>
|
||||
{!!tooltip && <Tooltip showTitle={false} />}
|
||||
<Coord type="theta" innerRadius={inner} />
|
||||
<Geom
|
||||
style={{ lineWidth, stroke: '#fff' }}
|
||||
tooltip={tooltip && tooltipFormat}
|
||||
type="intervalStack"
|
||||
position="percent"
|
||||
color={['x', percent || percent === 0 ? formatColor : defaultColors]}
|
||||
selected={selected}
|
||||
/>
|
||||
</Chart>
|
||||
|
||||
{(subTitle || total) && (
|
||||
<div className={styles.total}>
|
||||
{subTitle && <h4 className="pie-sub-title">{subTitle}</h4>}
|
||||
{/* eslint-disable-next-line */}
|
||||
{total && (
|
||||
<div className="pie-stat">{typeof total === 'function' ? total() : total}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ReactFitText>
|
||||
|
||||
{hasLegend && (
|
||||
<ul className={styles.legend}>
|
||||
{legendData.map((item, i) => (
|
||||
<li key={item.x} onClick={() => this.handleLegendClick(item, i)}>
|
||||
<span
|
||||
className={styles.dot}
|
||||
style={{
|
||||
backgroundColor: !item.checked ? '#aaa' : item.color,
|
||||
}}
|
||||
/>
|
||||
<span className={styles.legendTitle}>{item.x}</span>
|
||||
<Divider type="vertical" />
|
||||
<span className={styles.percent}>
|
||||
{`${(Number.isNaN(item.percent) ? 0 : item.percent * 100).toFixed(2)}%`}
|
||||
</span>
|
||||
<span className={styles.value}>{valueFormat ? valueFormat(item.y) : item.y}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Pie;
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
@import '~antd/lib/style/themes/default.less';
|
||||
|
||||
.pie {
|
||||
position: relative;
|
||||
.chart {
|
||||
position: relative;
|
||||
}
|
||||
&.hasLegend .chart {
|
||||
width: ~'calc(100% - 240px)';
|
||||
}
|
||||
.legend {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
min-width: 200px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin: 0 20px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
li {
|
||||
cursor: pointer;
|
||||
margin-bottom: 16px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dot {
|
||||
border-radius: 8px;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
.line {
|
||||
background-color: @border-color-split;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
}
|
||||
.legendTitle {
|
||||
color: @text-color;
|
||||
}
|
||||
.percent {
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
.value {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.title {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.total {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
text-align: center;
|
||||
max-height: 62px;
|
||||
transform: translate(-50%, -50%);
|
||||
& > h4 {
|
||||
color: @text-color-secondary;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
height: 22px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: normal;
|
||||
}
|
||||
& > p {
|
||||
color: @heading-color;
|
||||
display: block;
|
||||
font-size: 1.2em;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.legendBlock {
|
||||
&.hasLegend .chart {
|
||||
width: 100%;
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
.legend {
|
||||
position: relative;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface IRadarProps {
|
||||
title?: React.ReactNode;
|
||||
height: number;
|
||||
padding?: [number, number, number, number];
|
||||
hasLegend?: boolean;
|
||||
data: Array<{
|
||||
name: string;
|
||||
label: string;
|
||||
value: string;
|
||||
}>;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export default class Radar extends React.Component<IRadarProps, any> {}
|
||||
|
|
@ -1,184 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Chart, Tooltip, Geom, Coord, Axis } from 'bizcharts';
|
||||
import { Row, Col } from 'antd';
|
||||
import autoHeight from '../autoHeight';
|
||||
import styles from './index.less';
|
||||
|
||||
/* eslint react/no-danger:0 */
|
||||
@autoHeight()
|
||||
class Radar extends Component {
|
||||
state = {
|
||||
legendData: [],
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.getLegendData();
|
||||
}
|
||||
|
||||
componentDidUpdate(preProps) {
|
||||
const { data } = this.props;
|
||||
if (data !== preProps.data) {
|
||||
this.getLegendData();
|
||||
}
|
||||
}
|
||||
|
||||
getG2Instance = chart => {
|
||||
this.chart = chart;
|
||||
};
|
||||
|
||||
// for custom lengend view
|
||||
getLegendData = () => {
|
||||
if (!this.chart) return;
|
||||
const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
|
||||
if (!geom) return;
|
||||
const items = geom.get('dataArray') || []; // 获取图形对应的
|
||||
|
||||
const legendData = items.map(item => {
|
||||
// eslint-disable-next-line
|
||||
const origins = item.map(t => t._origin);
|
||||
const result = {
|
||||
name: origins[0].name,
|
||||
color: item[0].color,
|
||||
checked: true,
|
||||
value: origins.reduce((p, n) => p + n.value, 0),
|
||||
};
|
||||
|
||||
return result;
|
||||
});
|
||||
|
||||
this.setState({
|
||||
legendData,
|
||||
});
|
||||
};
|
||||
|
||||
handleRef = n => {
|
||||
this.node = n;
|
||||
};
|
||||
|
||||
handleLegendClick = (item, i) => {
|
||||
const newItem = item;
|
||||
newItem.checked = !newItem.checked;
|
||||
|
||||
const { legendData } = this.state;
|
||||
legendData[i] = newItem;
|
||||
|
||||
const filteredLegendData = legendData.filter(l => l.checked).map(l => l.name);
|
||||
|
||||
if (this.chart) {
|
||||
this.chart.filter('name', val => filteredLegendData.indexOf(val) > -1);
|
||||
this.chart.repaint();
|
||||
}
|
||||
|
||||
this.setState({
|
||||
legendData,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const defaultColors = [
|
||||
'#1890FF',
|
||||
'#FACC14',
|
||||
'#2FC25B',
|
||||
'#8543E0',
|
||||
'#F04864',
|
||||
'#13C2C2',
|
||||
'#fa8c16',
|
||||
'#a0d911',
|
||||
];
|
||||
|
||||
const {
|
||||
data = [],
|
||||
height = 0,
|
||||
title,
|
||||
hasLegend = false,
|
||||
forceFit = true,
|
||||
tickCount = 4,
|
||||
padding = [35, 30, 16, 30],
|
||||
animate = true,
|
||||
colors = defaultColors,
|
||||
} = this.props;
|
||||
|
||||
const { legendData } = this.state;
|
||||
|
||||
const scale = {
|
||||
value: {
|
||||
min: 0,
|
||||
tickCount,
|
||||
},
|
||||
};
|
||||
|
||||
const chartHeight = height - (hasLegend ? 80 : 22);
|
||||
|
||||
return (
|
||||
<div className={styles.radar} style={{ height }}>
|
||||
{title && <h4>{title}</h4>}
|
||||
<Chart
|
||||
scale={scale}
|
||||
height={chartHeight}
|
||||
forceFit={forceFit}
|
||||
data={data}
|
||||
padding={padding}
|
||||
animate={animate}
|
||||
onGetG2Instance={this.getG2Instance}
|
||||
>
|
||||
<Tooltip />
|
||||
<Coord type="polar" />
|
||||
<Axis
|
||||
name="label"
|
||||
line={null}
|
||||
tickLine={null}
|
||||
grid={{
|
||||
lineStyle: {
|
||||
lineDash: null,
|
||||
},
|
||||
hideFirstLine: false,
|
||||
}}
|
||||
/>
|
||||
<Axis
|
||||
name="value"
|
||||
grid={{
|
||||
type: 'polygon',
|
||||
lineStyle: {
|
||||
lineDash: null,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Geom type="line" position="label*value" color={['name', colors]} size={1} />
|
||||
<Geom
|
||||
type="point"
|
||||
position="label*value"
|
||||
color={['name', colors]}
|
||||
shape="circle"
|
||||
size={3}
|
||||
/>
|
||||
</Chart>
|
||||
{hasLegend && (
|
||||
<Row className={styles.legend}>
|
||||
{legendData.map((item, i) => (
|
||||
<Col
|
||||
span={24 / legendData.length}
|
||||
key={item.name}
|
||||
onClick={() => this.handleLegendClick(item, i)}
|
||||
>
|
||||
<div className={styles.legendItem}>
|
||||
<p>
|
||||
<span
|
||||
className={styles.dot}
|
||||
style={{
|
||||
backgroundColor: !item.checked ? '#aaa' : item.color,
|
||||
}}
|
||||
/>
|
||||
<span>{item.name}</span>
|
||||
</p>
|
||||
<h6>{item.value}</h6>
|
||||
</div>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Radar;
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
@import '~antd/lib/style/themes/default.less';
|
||||
|
||||
.radar {
|
||||
.legend {
|
||||
margin-top: 16px;
|
||||
.legendItem {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: @text-color-secondary;
|
||||
line-height: 22px;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
h6 {
|
||||
color: @heading-color;
|
||||
padding-left: 16px;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:after {
|
||||
background-color: @border-color-split;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
width: 1px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
> :last-child .legendItem:after {
|
||||
display: none;
|
||||
}
|
||||
.dot {
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface ITagCloudProps {
|
||||
data: Array<{
|
||||
name: string;
|
||||
value: number;
|
||||
}>;
|
||||
height: number;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export default class TagCloud extends React.Component<ITagCloudProps, any> {}
|
||||
|
|
@ -1,170 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Chart, Geom, Coord, Shape } from 'bizcharts';
|
||||
import DataSet from '@antv/data-set';
|
||||
import Debounce from 'lodash-decorators/debounce';
|
||||
import Bind from 'lodash-decorators/bind';
|
||||
import classNames from 'classnames';
|
||||
import autoHeight from '../autoHeight';
|
||||
import styles from './index.less';
|
||||
|
||||
/* eslint no-underscore-dangle: 0 */
|
||||
/* eslint no-param-reassign: 0 */
|
||||
|
||||
const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png';
|
||||
|
||||
@autoHeight()
|
||||
class TagCloud extends Component {
|
||||
state = {
|
||||
dv: null,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
requestAnimationFrame(() => {
|
||||
this.initTagCloud();
|
||||
this.renderChart();
|
||||
});
|
||||
window.addEventListener('resize', this.resize, { passive: true });
|
||||
}
|
||||
|
||||
componentDidUpdate(preProps) {
|
||||
const { data } = this.props;
|
||||
if (JSON.stringify(preProps.data) !== JSON.stringify(data)) {
|
||||
this.renderChart(this.props);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.isUnmount = true;
|
||||
window.cancelAnimationFrame(this.requestRef);
|
||||
window.removeEventListener('resize', this.resize);
|
||||
}
|
||||
|
||||
resize = () => {
|
||||
this.requestRef = requestAnimationFrame(() => {
|
||||
this.renderChart();
|
||||
});
|
||||
};
|
||||
|
||||
saveRootRef = node => {
|
||||
this.root = node;
|
||||
};
|
||||
|
||||
initTagCloud = () => {
|
||||
function getTextAttrs(cfg) {
|
||||
return Object.assign(
|
||||
{},
|
||||
{
|
||||
fillOpacity: cfg.opacity,
|
||||
fontSize: cfg.origin._origin.size,
|
||||
rotate: cfg.origin._origin.rotate,
|
||||
text: cfg.origin._origin.text,
|
||||
textAlign: 'center',
|
||||
fontFamily: cfg.origin._origin.font,
|
||||
fill: cfg.color,
|
||||
textBaseline: 'Alphabetic',
|
||||
},
|
||||
cfg.style
|
||||
);
|
||||
}
|
||||
|
||||
// 给point注册一个词云的shape
|
||||
Shape.registerShape('point', 'cloud', {
|
||||
drawShape(cfg, container) {
|
||||
const attrs = getTextAttrs(cfg);
|
||||
return container.addShape('text', {
|
||||
attrs: Object.assign(attrs, {
|
||||
x: cfg.x,
|
||||
y: cfg.y,
|
||||
}),
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@Bind()
|
||||
@Debounce(500)
|
||||
renderChart(nextProps) {
|
||||
// const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C'];
|
||||
const { data, height } = nextProps || this.props;
|
||||
|
||||
if (data.length < 1 || !this.root) {
|
||||
return;
|
||||
}
|
||||
|
||||
const h = height * 4;
|
||||
const w = this.root.offsetWidth * 4;
|
||||
|
||||
const onload = () => {
|
||||
const dv = new DataSet.View().source(data);
|
||||
const range = dv.range('value');
|
||||
const [min, max] = range;
|
||||
dv.transform({
|
||||
type: 'tag-cloud',
|
||||
fields: ['name', 'value'],
|
||||
imageMask: this.imageMask,
|
||||
font: 'Verdana',
|
||||
size: [w, h], // 宽高设置最好根据 imageMask 做调整
|
||||
padding: 5,
|
||||
timeInterval: 5000, // max execute time
|
||||
rotate() {
|
||||
return 0;
|
||||
},
|
||||
fontSize(d) {
|
||||
// eslint-disable-next-line
|
||||
return Math.pow((d.value - min) / (max - min), 2) * (70 - 20) + 20;
|
||||
},
|
||||
});
|
||||
|
||||
if (this.isUnmount) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
dv,
|
||||
w,
|
||||
h,
|
||||
});
|
||||
};
|
||||
|
||||
if (!this.imageMask) {
|
||||
this.imageMask = new Image();
|
||||
this.imageMask.crossOrigin = '';
|
||||
this.imageMask.src = imgUrl;
|
||||
|
||||
this.imageMask.onload = onload;
|
||||
} else {
|
||||
onload();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className, height } = this.props;
|
||||
const { dv, w, h } = this.state;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.tagCloud, className)}
|
||||
style={{ width: '100%', height }}
|
||||
ref={this.saveRootRef}
|
||||
>
|
||||
{dv && (
|
||||
<Chart
|
||||
width={w}
|
||||
height={h}
|
||||
data={dv}
|
||||
padding={0}
|
||||
scale={{
|
||||
x: { nice: false },
|
||||
y: { nice: false },
|
||||
}}
|
||||
>
|
||||
<Coord reflect="y" />
|
||||
<Geom type="point" position="x*y" color="text" shape="cloud" />
|
||||
</Chart>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TagCloud;
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
.tagCloud {
|
||||
overflow: hidden;
|
||||
canvas {
|
||||
transform: scale(0.25);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface ITimelineChartProps {
|
||||
data: Array<{
|
||||
x: number;
|
||||
y1: number;
|
||||
y2?: number;
|
||||
}>;
|
||||
titleMap: { y1: string; y2?: string };
|
||||
padding?: [number, number, number, number];
|
||||
height?: number;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export default class TimelineChart extends React.Component<ITimelineChartProps, any> {}
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Chart, Tooltip, Geom, Legend, Axis } from 'bizcharts';
|
||||
import DataSet from '@antv/data-set';
|
||||
import Slider from 'bizcharts-plugin-slider';
|
||||
import autoHeight from '../autoHeight';
|
||||
import styles from './index.less';
|
||||
|
||||
@autoHeight()
|
||||
class TimelineChart extends React.Component {
|
||||
render() {
|
||||
const {
|
||||
title,
|
||||
height = 400,
|
||||
padding = [60, 20, 40, 40],
|
||||
titleMap = {
|
||||
y1: 'y1',
|
||||
y2: 'y2',
|
||||
},
|
||||
borderWidth = 2,
|
||||
data = [
|
||||
{
|
||||
x: 0,
|
||||
y1: 0,
|
||||
y2: 0,
|
||||
},
|
||||
],
|
||||
} = this.props;
|
||||
|
||||
data.sort((a, b) => a.x - b.x);
|
||||
|
||||
let max;
|
||||
if (data[0] && data[0].y1 && data[0].y2) {
|
||||
max = Math.max(
|
||||
[...data].sort((a, b) => b.y1 - a.y1)[0].y1,
|
||||
[...data].sort((a, b) => b.y2 - a.y2)[0].y2
|
||||
);
|
||||
}
|
||||
|
||||
const ds = new DataSet({
|
||||
state: {
|
||||
start: data[0].x,
|
||||
end: data[data.length - 1].x,
|
||||
},
|
||||
});
|
||||
|
||||
const dv = ds.createView();
|
||||
dv.source(data)
|
||||
.transform({
|
||||
type: 'filter',
|
||||
callback: obj => {
|
||||
const date = obj.x;
|
||||
return date <= ds.state.end && date >= ds.state.start;
|
||||
},
|
||||
})
|
||||
.transform({
|
||||
type: 'map',
|
||||
callback(row) {
|
||||
const newRow = { ...row };
|
||||
newRow[titleMap.y1] = row.y1;
|
||||
newRow[titleMap.y2] = row.y2;
|
||||
return newRow;
|
||||
},
|
||||
})
|
||||
.transform({
|
||||
type: 'fold',
|
||||
fields: [titleMap.y1, titleMap.y2], // 展开字段集
|
||||
key: 'key', // key字段
|
||||
value: 'value', // value字段
|
||||
});
|
||||
|
||||
const timeScale = {
|
||||
type: 'time',
|
||||
tickInterval: 60 * 60 * 1000,
|
||||
mask: 'HH:mm',
|
||||
range: [0, 1],
|
||||
};
|
||||
|
||||
const cols = {
|
||||
x: timeScale,
|
||||
value: {
|
||||
max,
|
||||
min: 0,
|
||||
},
|
||||
};
|
||||
|
||||
const SliderGen = () => (
|
||||
<Slider
|
||||
padding={[0, padding[1] + 20, 0, padding[3]]}
|
||||
width="auto"
|
||||
height={26}
|
||||
xAxis="x"
|
||||
yAxis="y1"
|
||||
scales={{ x: timeScale }}
|
||||
data={data}
|
||||
start={ds.state.start}
|
||||
end={ds.state.end}
|
||||
backgroundChart={{ type: 'line' }}
|
||||
onChange={({ startValue, endValue }) => {
|
||||
ds.setState('start', startValue);
|
||||
ds.setState('end', endValue);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={styles.timelineChart} style={{ height: height + 30 }}>
|
||||
<div>
|
||||
{title && <h4>{title}</h4>}
|
||||
<Chart height={height} padding={padding} data={dv} scale={cols} forceFit>
|
||||
<Axis name="x" />
|
||||
<Tooltip />
|
||||
<Legend name="key" position="top" />
|
||||
<Geom type="line" position="x*value" size={borderWidth} color="key" />
|
||||
</Chart>
|
||||
<div style={{ marginRight: -20 }}>
|
||||
<SliderGen />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TimelineChart;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.timelineChart {
|
||||
background: #fff;
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface IWaterWaveProps {
|
||||
title: React.ReactNode;
|
||||
color?: string;
|
||||
height: number;
|
||||
percent: number;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export default class WaterWave extends React.Component<IWaterWaveProps, any> {}
|
||||
|
|
@ -1,213 +0,0 @@
|
|||
import React, { PureComponent } from 'react';
|
||||
import autoHeight from '../autoHeight';
|
||||
import styles from './index.less';
|
||||
|
||||
/* eslint no-return-assign: 0 */
|
||||
/* eslint no-mixed-operators: 0 */
|
||||
// riddle: https://riddle.alibaba-inc.com/riddles/2d9a4b90
|
||||
|
||||
@autoHeight()
|
||||
class WaterWave extends PureComponent {
|
||||
state = {
|
||||
radio: 1,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.renderChart();
|
||||
this.resize();
|
||||
window.addEventListener(
|
||||
'resize',
|
||||
() => {
|
||||
requestAnimationFrame(() => this.resize());
|
||||
},
|
||||
{ passive: true }
|
||||
);
|
||||
}
|
||||
|
||||
componentDidUpdate(props) {
|
||||
const { percent } = this.props;
|
||||
if (props.percent !== percent) {
|
||||
// 不加这个会造成绘制缓慢
|
||||
this.renderChart('update');
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
cancelAnimationFrame(this.timer);
|
||||
if (this.node) {
|
||||
this.node.innerHTML = '';
|
||||
}
|
||||
window.removeEventListener('resize', this.resize);
|
||||
}
|
||||
|
||||
resize = () => {
|
||||
if (this.root) {
|
||||
const { height } = this.props;
|
||||
const { offsetWidth } = this.root.parentNode;
|
||||
this.setState({
|
||||
radio: offsetWidth < height ? offsetWidth / height : 1,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
renderChart(type) {
|
||||
const { percent, color = '#1890FF' } = this.props;
|
||||
const data = percent / 100;
|
||||
const self = this;
|
||||
cancelAnimationFrame(this.timer);
|
||||
|
||||
if (!this.node || (data !== 0 && !data)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const canvas = this.node;
|
||||
const ctx = canvas.getContext('2d');
|
||||
const canvasWidth = canvas.width;
|
||||
const canvasHeight = canvas.height;
|
||||
const radius = canvasWidth / 2;
|
||||
const lineWidth = 2;
|
||||
const cR = radius - lineWidth;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.lineWidth = lineWidth * 2;
|
||||
|
||||
const axisLength = canvasWidth - lineWidth;
|
||||
const unit = axisLength / 8;
|
||||
const range = 0.2; // 振幅
|
||||
let currRange = range;
|
||||
const xOffset = lineWidth;
|
||||
let sp = 0; // 周期偏移量
|
||||
let currData = 0;
|
||||
const waveupsp = 0.005; // 水波上涨速度
|
||||
|
||||
let arcStack = [];
|
||||
const bR = radius - lineWidth;
|
||||
const circleOffset = -(Math.PI / 2);
|
||||
let circleLock = true;
|
||||
|
||||
for (let i = circleOffset; i < circleOffset + 2 * Math.PI; i += 1 / (8 * Math.PI)) {
|
||||
arcStack.push([radius + bR * Math.cos(i), radius + bR * Math.sin(i)]);
|
||||
}
|
||||
|
||||
const cStartPoint = arcStack.shift();
|
||||
ctx.strokeStyle = color;
|
||||
ctx.moveTo(cStartPoint[0], cStartPoint[1]);
|
||||
|
||||
function drawSin() {
|
||||
ctx.beginPath();
|
||||
ctx.save();
|
||||
|
||||
const sinStack = [];
|
||||
for (let i = xOffset; i <= xOffset + axisLength; i += 20 / axisLength) {
|
||||
const x = sp + (xOffset + i) / unit;
|
||||
const y = Math.sin(x) * currRange;
|
||||
const dx = i;
|
||||
const dy = 2 * cR * (1 - currData) + (radius - cR) - unit * y;
|
||||
|
||||
ctx.lineTo(dx, dy);
|
||||
sinStack.push([dx, dy]);
|
||||
}
|
||||
|
||||
const startPoint = sinStack.shift();
|
||||
|
||||
ctx.lineTo(xOffset + axisLength, canvasHeight);
|
||||
ctx.lineTo(xOffset, canvasHeight);
|
||||
ctx.lineTo(startPoint[0], startPoint[1]);
|
||||
|
||||
const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight);
|
||||
gradient.addColorStop(0, '#ffffff');
|
||||
gradient.addColorStop(1, color);
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function render() {
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
if (circleLock && type !== 'update') {
|
||||
if (arcStack.length) {
|
||||
const temp = arcStack.shift();
|
||||
ctx.lineTo(temp[0], temp[1]);
|
||||
ctx.stroke();
|
||||
} else {
|
||||
circleLock = false;
|
||||
ctx.lineTo(cStartPoint[0], cStartPoint[1]);
|
||||
ctx.stroke();
|
||||
arcStack = null;
|
||||
|
||||
ctx.globalCompositeOperation = 'destination-over';
|
||||
ctx.beginPath();
|
||||
ctx.lineWidth = lineWidth;
|
||||
ctx.arc(radius, radius, bR, 0, 2 * Math.PI, 1);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.save();
|
||||
ctx.arc(radius, radius, radius - 3 * lineWidth, 0, 2 * Math.PI, 1);
|
||||
|
||||
ctx.restore();
|
||||
ctx.clip();
|
||||
ctx.fillStyle = color;
|
||||
}
|
||||
} else {
|
||||
if (data >= 0.85) {
|
||||
if (currRange > range / 4) {
|
||||
const t = range * 0.01;
|
||||
currRange -= t;
|
||||
}
|
||||
} else if (data <= 0.1) {
|
||||
if (currRange < range * 1.5) {
|
||||
const t = range * 0.01;
|
||||
currRange += t;
|
||||
}
|
||||
} else {
|
||||
if (currRange <= range) {
|
||||
const t = range * 0.01;
|
||||
currRange += t;
|
||||
}
|
||||
if (currRange >= range) {
|
||||
const t = range * 0.01;
|
||||
currRange -= t;
|
||||
}
|
||||
}
|
||||
if (data - currData > 0) {
|
||||
currData += waveupsp;
|
||||
}
|
||||
if (data - currData < 0) {
|
||||
currData -= waveupsp;
|
||||
}
|
||||
|
||||
sp += 0.07;
|
||||
drawSin();
|
||||
}
|
||||
self.timer = requestAnimationFrame(render);
|
||||
}
|
||||
render();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { radio } = this.state;
|
||||
const { percent, title, height } = this.props;
|
||||
return (
|
||||
<div
|
||||
className={styles.waterWave}
|
||||
ref={n => (this.root = n)}
|
||||
style={{ transform: `scale(${radio})` }}
|
||||
>
|
||||
<div style={{ width: height, height, overflow: 'hidden' }}>
|
||||
<canvas
|
||||
className={styles.waterWaveCanvasWrapper}
|
||||
ref={n => (this.node = n)}
|
||||
width={height * 2}
|
||||
height={height * 2}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.text} style={{ width: height }}>
|
||||
{title && <span>{title}</span>}
|
||||
<h4>{percent}%</h4>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default WaterWave;
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
@import '~antd/lib/style/themes/default.less';
|
||||
|
||||
.waterWave {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transform-origin: left;
|
||||
.text {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 32px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
span {
|
||||
color: @text-color-secondary;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
h4 {
|
||||
color: @heading-color;
|
||||
line-height: 32px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.waterWaveCanvasWrapper {
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
/* eslint eqeqeq: 0 */
|
||||
import React from 'react';
|
||||
|
||||
function computeHeight(node) {
|
||||
const totalHeight = parseInt(getComputedStyle(node).height, 10);
|
||||
const padding =
|
||||
parseInt(getComputedStyle(node).paddingTop, 10) +
|
||||
parseInt(getComputedStyle(node).paddingBottom, 10);
|
||||
return totalHeight - padding;
|
||||
}
|
||||
|
||||
function getAutoHeight(n) {
|
||||
if (!n) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
let node = n;
|
||||
|
||||
let height = computeHeight(node);
|
||||
|
||||
while (!height) {
|
||||
node = node.parentNode;
|
||||
if (node) {
|
||||
height = computeHeight(node);
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return height;
|
||||
}
|
||||
|
||||
const autoHeight = () => WrappedComponent =>
|
||||
class extends React.Component {
|
||||
state = {
|
||||
computedHeight: 0,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const { height } = this.props;
|
||||
if (!height) {
|
||||
const h = getAutoHeight(this.root);
|
||||
// eslint-disable-next-line
|
||||
this.setState({ computedHeight: h });
|
||||
}
|
||||
}
|
||||
|
||||
handleRoot = node => {
|
||||
this.root = node;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { height } = this.props;
|
||||
const { computedHeight } = this.state;
|
||||
const h = height || computedHeight;
|
||||
return (
|
||||
<div ref={this.handleRoot}>{h > 0 && <WrappedComponent {...this.props} height={h} />}</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default autoHeight;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import * as BizChart from 'bizcharts';
|
||||
|
||||
export = BizChart;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import * as BizChart from 'bizcharts';
|
||||
|
||||
export default BizChart;
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
---
|
||||
order: 4
|
||||
title: 柱状图
|
||||
---
|
||||
|
||||
通过设置 `x`，`y` 属性，可以快速的构建出一个漂亮的柱状图，各种纬度的关系则是通过自定义的数据展现。
|
||||
|
||||
````jsx
|
||||
import { Bar } from 'ant-design-pro/lib/Charts';
|
||||
|
||||
const salesData = [];
|
||||
for (let i = 0; i < 12; i += 1) {
|
||||
salesData.push({
|
||||
x: `${i + 1}月`,
|
||||
y: Math.floor(Math.random() * 1000) + 200,
|
||||
});
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Bar
|
||||
height={200}
|
||||
title="销售额趋势"
|
||||
data={salesData}
|
||||
/>
|
||||
, mountNode);
|
||||
````
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
---
|
||||
order: 1
|
||||
title: 图表卡片
|
||||
---
|
||||
|
||||
用于展示图表的卡片容器，可以方便的配合其它图表套件展示丰富信息。
|
||||
|
||||
```jsx
|
||||
import { ChartCard, yuan, Field } from 'ant-design-pro/lib/Charts';
|
||||
import Trend from 'ant-design-pro/lib/Trend';
|
||||
import { Row, Col, Icon, Tooltip } from 'antd';
|
||||
import numeral from 'numeral';
|
||||
|
||||
ReactDOM.render(
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<ChartCard
|
||||
title="销售额"
|
||||
action={
|
||||
<Tooltip title="指标说明">
|
||||
<Icon type="info-circle-o" />
|
||||
</Tooltip>
|
||||
}
|
||||
total={() => (
|
||||
<span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
|
||||
)}
|
||||
footer={
|
||||
<Field label="日均销售额" value={numeral(12423).format("0,0")} />
|
||||
}
|
||||
contentHeight={46}
|
||||
>
|
||||
<span>
|
||||
周同比
|
||||
<Trend flag="up" style={{ marginLeft: 8, color: "rgba(0,0,0,.85)" }}>
|
||||
12%
|
||||
</Trend>
|
||||
</span>
|
||||
<span style={{ marginLeft: 16 }}>
|
||||
日环比
|
||||
<Trend
|
||||
flag="down"
|
||||
style={{ marginLeft: 8, color: "rgba(0,0,0,.85)" }}
|
||||
>
|
||||
11%
|
||||
</Trend>
|
||||
</span>
|
||||
</ChartCard>
|
||||
</Col>
|
||||
<Col span={24} style={{ marginTop: 24 }}>
|
||||
<ChartCard
|
||||
title="移动指标"
|
||||
avatar={
|
||||
<img
|
||||
style={{ width: 56, height: 56 }}
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"
|
||||
alt="indicator"
|
||||
/>
|
||||
}
|
||||
action={
|
||||
<Tooltip title="指标说明">
|
||||
<Icon type="info-circle-o" />
|
||||
</Tooltip>
|
||||
}
|
||||
total={() => (
|
||||
<span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
|
||||
)}
|
||||
footer={
|
||||
<Field label="日均销售额" value={numeral(12423).format("0,0")} />
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={24} style={{ marginTop: 24 }}>
|
||||
<ChartCard
|
||||
title="移动指标"
|
||||
avatar={
|
||||
<img
|
||||
alt="indicator"
|
||||
style={{ width: 56, height: 56 }}
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png"
|
||||
/>
|
||||
}
|
||||
action={
|
||||
<Tooltip title="指标说明">
|
||||
<Icon type="info-circle-o" />
|
||||
</Tooltip>
|
||||
}
|
||||
total={() => (
|
||||
<span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
---
|
||||
order: 7
|
||||
title: 仪表盘
|
||||
---
|
||||
|
||||
仪表盘是一种进度展示方式，可以更直观的展示当前的进展情况，通常也可表示占比。
|
||||
|
||||
````jsx
|
||||
import { Gauge } from 'ant-design-pro/lib/Charts';
|
||||
|
||||
ReactDOM.render(
|
||||
<Gauge
|
||||
title="核销率"
|
||||
height={164}
|
||||
percent={87}
|
||||
/>
|
||||
, mountNode);
|
||||
````
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
---
|
||||
order: 2
|
||||
col: 2
|
||||
title: 迷你区域图
|
||||
---
|
||||
|
||||
````jsx
|
||||
import { MiniArea } from 'ant-design-pro/lib/Charts';
|
||||
import moment from 'moment';
|
||||
|
||||
const visitData = [];
|
||||
const beginDay = new Date().getTime();
|
||||
for (let i = 0; i < 20; i += 1) {
|
||||
visitData.push({
|
||||
x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
|
||||
y: Math.floor(Math.random() * 100) + 10,
|
||||
});
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<MiniArea
|
||||
line
|
||||
color="#cceafe"
|
||||
height={45}
|
||||
data={visitData}
|
||||
/>
|
||||
, mountNode);
|
||||
````
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
---
|
||||
order: 2
|
||||
col: 2
|
||||
title: 迷你柱状图
|
||||
---
|
||||
|
||||
迷你柱状图更适合展示简单的区间数据，简洁的表现方式可以很好的减少大数据量的视觉展现压力。
|
||||
|
||||
````jsx
|
||||
import { MiniBar } from 'ant-design-pro/lib/Charts';
|
||||
import moment from 'moment';
|
||||
|
||||
const visitData = [];
|
||||
const beginDay = new Date().getTime();
|
||||
for (let i = 0; i < 20; i += 1) {
|
||||
visitData.push({
|
||||
x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
|
||||
y: Math.floor(Math.random() * 100) + 10,
|
||||
});
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<MiniBar
|
||||
height={45}
|
||||
data={visitData}
|
||||
/>
|
||||
, mountNode);
|
||||
````
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
---
|
||||
order: 6
|
||||
title: 迷你饼状图
|
||||
---
|
||||
|
||||
通过简化 `Pie` 属性的设置，可以快速的实现极简的饼状图，可配合 `ChartCard` 组合展
|
||||
现更多业务场景。
|
||||
|
||||
```jsx
|
||||
import { Pie } from 'ant-design-pro/lib/Charts';
|
||||
|
||||
ReactDOM.render(
|
||||
<Pie percent={28} subTitle="中式快餐" total="28%" height={140} />,
|
||||
mountNode
|
||||
);
|
||||
```
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
---
|
||||
order: 3
|
||||
title: 迷你进度条
|
||||
---
|
||||
|
||||
````jsx
|
||||
import { MiniProgress } from 'ant-design-pro/lib/Charts';
|
||||
|
||||
ReactDOM.render(
|
||||
<MiniProgress percent={78} strokeWidth={8} target={80} />
|
||||
, mountNode);
|
||||
````
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
---
|
||||
order: 0
|
||||
title: 图表套件组合展示
|
||||
---
|
||||
|
||||
利用 Ant Design Pro 提供的图表套件，可以灵活组合符合设计规范的图表来满足复杂的业务需求。
|
||||
|
||||
````jsx
|
||||
import { ChartCard, Field, MiniArea, MiniBar, MiniProgress } from 'ant-design-pro/lib/Charts';
|
||||
import Trend from 'ant-design-pro/lib/Trend';
|
||||
import NumberInfo from 'ant-design-pro/lib/NumberInfo';
|
||||
import { Row, Col, Icon, Tooltip } from 'antd';
|
||||
import numeral from 'numeral';
|
||||
import moment from 'moment';
|
||||
|
||||
const visitData = [];
|
||||
const beginDay = new Date().getTime();
|
||||
for (let i = 0; i < 20; i += 1) {
|
||||
visitData.push({
|
||||
x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
|
||||
y: Math.floor(Math.random() * 100) + 10,
|
||||
});
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<ChartCard
|
||||
title="搜索用户数量"
|
||||
total={numeral(8846).format('0,0')}
|
||||
contentHeight={134}
|
||||
>
|
||||
<NumberInfo
|
||||
subTitle={<span>本周访问</span>}
|
||||
total={numeral(12321).format('0,0')}
|
||||
status="up"
|
||||
subTotal={17.1}
|
||||
/>
|
||||
<MiniArea
|
||||
line
|
||||
height={45}
|
||||
data={visitData}
|
||||
/>
|
||||
</ChartCard>
|
||||
</Col>
|
||||
<Col span={24} style={{ marginTop: 24 }}>
|
||||
<ChartCard
|
||||
title="访问量"
|
||||
action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
|
||||
total={numeral(8846).format('0,0')}
|
||||
footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
|
||||
contentHeight={46}
|
||||
>
|
||||
<MiniBar
|
||||
height={46}
|
||||
data={visitData}
|
||||
/>
|
||||
</ChartCard>
|
||||
</Col>
|
||||
<Col span={24} style={{ marginTop: 24 }}>
|
||||
<ChartCard
|
||||
title="线上购物转化率"
|
||||
action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
|
||||
total="78%"
|
||||
footer={
|
||||
<div>
|
||||
<span>
|
||||
周同比
|
||||
<Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
|
||||
</span>
|
||||
<span style={{ marginLeft: 16 }}>
|
||||
日环比
|
||||
<Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
contentHeight={46}
|
||||
>
|
||||
<MiniProgress percent={78} strokeWidth={8} target={80} />
|
||||
</ChartCard>
|
||||
</Col>
|
||||
</Row>
|
||||
, mountNode);
|
||||
````
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
---
|
||||
order: 5
|
||||
title: 饼状图
|
||||
---
|
||||
|
||||
```jsx
|
||||
import { Pie, yuan } from 'ant-design-pro/lib/Charts';
|
||||
|
||||
const salesPieData = [
|
||||
{
|
||||
x: '家用电器',
|
||||
y: 4544,
|
||||
},
|
||||
{
|
||||
x: '食用酒水',
|
||||
y: 3321,
|
||||
},
|
||||
{
|
||||
x: '个护健康',
|
||||
y: 3113,
|
||||
},
|
||||
{
|
||||
x: '服饰箱包',
|
||||
y: 2341,
|
||||
},
|
||||
{
|
||||
x: '母婴产品',
|
||||
y: 1231,
|
||||
},
|
||||
{
|
||||
x: '其他',
|
||||
y: 1231,
|
||||
},
|
||||
];
|
||||
|
||||
ReactDOM.render(
|
||||
<Pie
|
||||
hasLegend
|
||||
title="销售额"
|
||||
subTitle="销售额"
|
||||
total={() => (
|
||||
<span
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
data={salesPieData}
|
||||
valueFormat={val => <span dangerouslySetInnerHTML={{ __html: yuan(val) }} />}
|
||||
height={294}
|
||||
/>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
---
|
||||
order: 7
|
||||
title: 雷达图
|
||||
---
|
||||
|
||||
````jsx
|
||||
import { Radar, ChartCard } from 'ant-design-pro/lib/Charts';
|
||||
|
||||
const radarOriginData = [
|
||||
{
|
||||
name: '个人',
|
||||
ref: 10,
|
||||
koubei: 8,
|
||||
output: 4,
|
||||
contribute: 5,
|
||||
hot: 7,
|
||||
},
|
||||
{
|
||||
name: '团队',
|
||||
ref: 3,
|
||||
koubei: 9,
|
||||
output: 6,
|
||||
contribute: 3,
|
||||
hot: 1,
|
||||
},
|
||||
{
|
||||
name: '部门',
|
||||
ref: 4,
|
||||
koubei: 1,
|
||||
output: 6,
|
||||
contribute: 5,
|
||||
hot: 7,
|
||||
},
|
||||
];
|
||||
const radarData = [];
|
||||
const radarTitleMap = {
|
||||
ref: '引用',
|
||||
koubei: '口碑',
|
||||
output: '产量',
|
||||
contribute: '贡献',
|
||||
hot: '热度',
|
||||
};
|
||||
radarOriginData.forEach((item) => {
|
||||
Object.keys(item).forEach((key) => {
|
||||
if (key !== 'name') {
|
||||
radarData.push({
|
||||
name: item.name,
|
||||
label: radarTitleMap[key],
|
||||
value: item[key],
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<ChartCard title="数据比例">
|
||||
<Radar
|
||||
hasLegend
|
||||
height={286}
|
||||
data={radarData}
|
||||
/>
|
||||
</ChartCard>
|
||||
, mountNode);
|
||||
````
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
---
|
||||
order: 9
|
||||
title: 标签云
|
||||
---
|
||||
|
||||
标签云是一套相关的标签以及与此相应的权重展示方式，一般典型的标签云有 30 至 150 个标签，而权重影响使用的字体大小或其他视觉效果。
|
||||
|
||||
````jsx
|
||||
import { TagCloud } from 'ant-design-pro/lib/Charts';
|
||||
|
||||
const tags = [];
|
||||
for (let i = 0; i < 50; i += 1) {
|
||||
tags.push({
|
||||
name: `TagClout-Title-${i}`,
|
||||
value: Math.floor((Math.random() * 50)) + 20,
|
||||
});
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<TagCloud
|
||||
data={tags}
|
||||
height={200}
|
||||
/>
|
||||
, mountNode);
|
||||
````
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
---
|
||||
order: 9
|
||||
title: 带有时间轴的图表
|
||||
---
|
||||
|
||||
使用 `TimelineChart` 组件可以实现带有时间轴的柱状图展现，而其中的 `x` 属性，则是时间值的指向，默认最多支持同时展现两个指标，分别是 `y1` 和 `y2`。
|
||||
|
||||
````jsx
|
||||
import { TimelineChart } from 'ant-design-pro/lib/Charts';
|
||||
|
||||
const chartData = [];
|
||||
for (let i = 0; i < 20; i += 1) {
|
||||
chartData.push({
|
||||
x: (new Date().getTime()) + (1000 * 60 * 30 * i),
|
||||
y1: Math.floor(Math.random() * 100) + 1000,
|
||||
y2: Math.floor(Math.random() * 100) + 10,
|
||||
});
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<TimelineChart
|
||||
height={200}
|
||||
data={chartData}
|
||||
titleMap={{ y1: '客流量', y2: '支付笔数' }}
|
||||
/>
|
||||
, mountNode);
|
||||
````
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
---
|
||||
order: 8
|
||||
title: 水波图
|
||||
---
|
||||
|
||||
水波图是一种比例的展示方式，可以更直观的展示关键值的占比。
|
||||
|
||||
````jsx
|
||||
import { WaterWave } from 'ant-design-pro/lib/Charts';
|
||||
|
||||
ReactDOM.render(
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<WaterWave
|
||||
height={161}
|
||||
title="补贴资金剩余"
|
||||
percent={34}
|
||||
/>
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
// 全局 G2 设置
|
||||
import { track, setTheme } from 'bizcharts';
|
||||
|
||||
track(false);
|
||||
|
||||
const config = {
|
||||
defaultColor: '#1089ff',
|
||||
shape: {
|
||||
interval: {
|
||||
fillOpacity: 1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
setTheme(config);
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import * as numeral from 'numeral';
|
||||
export { default as ChartCard } from './ChartCard';
|
||||
export { default as Bar } from './Bar';
|
||||
export { default as Pie } from './Pie';
|
||||
export { default as Radar } from './Radar';
|
||||
export { default as Gauge } from './Gauge';
|
||||
export { default as MiniArea } from './MiniArea';
|
||||
export { default as MiniBar } from './MiniBar';
|
||||
export { default as MiniProgress } from './MiniProgress';
|
||||
export { default as Field } from './Field';
|
||||
export { default as WaterWave } from './WaterWave';
|
||||
export { default as TagCloud } from './TagCloud';
|
||||
export { default as TimelineChart } from './TimelineChart';
|
||||
|
||||
declare const yuan: (value: number | string) => string;
|
||||
|
||||
export { yuan };
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
import numeral from 'numeral';
|
||||
import './g2';
|
||||
import ChartCard from './ChartCard';
|
||||
import Bar from './Bar';
|
||||
import Pie from './Pie';
|
||||
import Radar from './Radar';
|
||||
import Gauge from './Gauge';
|
||||
import MiniArea from './MiniArea';
|
||||
import MiniBar from './MiniBar';
|
||||
import MiniProgress from './MiniProgress';
|
||||
import Field from './Field';
|
||||
import WaterWave from './WaterWave';
|
||||
import TagCloud from './TagCloud';
|
||||
import TimelineChart from './TimelineChart';
|
||||
|
||||
const yuan = val => `¥ ${numeral(val).format('0,0')}`;
|
||||
|
||||
const Charts = {
|
||||
yuan,
|
||||
Bar,
|
||||
Pie,
|
||||
Gauge,
|
||||
Radar,
|
||||
MiniBar,
|
||||
MiniArea,
|
||||
MiniProgress,
|
||||
ChartCard,
|
||||
Field,
|
||||
WaterWave,
|
||||
TagCloud,
|
||||
TimelineChart,
|
||||
};
|
||||
|
||||
export {
|
||||
Charts as default,
|
||||
yuan,
|
||||
Bar,
|
||||
Pie,
|
||||
Gauge,
|
||||
Radar,
|
||||
MiniBar,
|
||||
MiniArea,
|
||||
MiniProgress,
|
||||
ChartCard,
|
||||
Field,
|
||||
WaterWave,
|
||||
TagCloud,
|
||||
TimelineChart,
|
||||
};
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
.miniChart {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.chartContent {
|
||||
position: absolute;
|
||||
bottom: -28px;
|
||||
width: 100%;
|
||||
> div {
|
||||
margin: 0 -5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.chartLoading {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
---
|
||||
title:
|
||||
en-US: Charts
|
||||
zh-CN: Charts
|
||||
subtitle: 图表
|
||||
order: 2
|
||||
cols: 2
|
||||
---
|
||||
|
||||
Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https://antv.alipay.com/g2/doc/index.html) 按照 Ant Design 图表规范封装，需要注意的是 Ant Design Pro 的图表组件以套件形式提供，可以任意组合实现复杂的业务需求。
|
||||
|
||||
因为结合了 Ant Design 的标准设计，本着极简的设计思想以及开箱即用的理念，简化了大量 API 配置，所以如果需要灵活定制图表，可以参考 Ant Design Pro 图表实现，自行基于 [G2](https://antv.alipay.com/g2/doc/index.html) 封装图表组件使用。
|
||||
|
||||
## API
|
||||
|
||||
### ChartCard
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| title | 卡片标题 | ReactNode\|string | - |
|
||||
| action | 卡片操作 | ReactNode | - |
|
||||
| total | 数据总量 | ReactNode \| number \| function | - |
|
||||
| footer | 卡片底部 | ReactNode | - |
|
||||
| contentHeight | 内容区域高度 | number | - |
|
||||
| avatar | 右侧图标 | React.ReactNode | - |
|
||||
### MiniBar
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| color | 图表颜色 | string | `#1890FF` |
|
||||
| height | 图表高度 | number | - |
|
||||
| data | 数据 | array<{x, y}> | - |
|
||||
|
||||
### MiniArea
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| color | 图表颜色 | string | `rgba(24, 144, 255, 0.2)` |
|
||||
| borderColor | 图表边颜色 | string | `#1890FF` |
|
||||
| height | 图表高度 | number | - |
|
||||
| line | 是否显示描边 | boolean | false |
|
||||
| animate | 是否显示动画 | boolean | true |
|
||||
| xAxis | [x 轴配置](http://antvis.github.io/g2/doc/tutorial/start/axis.html) | object | - |
|
||||
| yAxis | [y 轴配置](http://antvis.github.io/g2/doc/tutorial/start/axis.html) | object | - |
|
||||
| data | 数据 | array<{x, y}> | - |
|
||||
|
||||
### MiniProgress
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| target | 目标比例 | number | - |
|
||||
| color | 进度条颜色 | string | - |
|
||||
| strokeWidth | 进度条高度 | number | - |
|
||||
| percent | 进度比例 | number | - |
|
||||
|
||||
### Bar
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| title | 图表标题 | ReactNode\|string | - |
|
||||
| color | 图表颜色 | string | `rgba(24, 144, 255, 0.85)` |
|
||||
| padding | 图表内部间距 | [array](https://github.com/alibaba/BizCharts/blob/master/doc/api/chart.md#7padding-object--number--array-) | `'auto'` |
|
||||
| height | 图表高度 | number | - |
|
||||
| data | 数据 | array<{x, y}> | - |
|
||||
| autoLabel | 在宽度不足时，自动隐藏 x 轴的 label | boolean | `true` |
|
||||
|
||||
### Pie
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| animate | 是否显示动画 | boolean | true |
|
||||
| color | 图表颜色 | string | `rgba(24, 144, 255, 0.85)` |
|
||||
| height | 图表高度 | number | - |
|
||||
| hasLegend | 是否显示 legend | boolean | `false` |
|
||||
| padding | 图表内部间距 | [array](https://github.com/alibaba/BizCharts/blob/master/doc/api/chart.md#7padding-object--number--array-) | `'auto'` |
|
||||
| percent | 占比 | number | - |
|
||||
| tooltip | 是否显示 tooltip | boolean | true |
|
||||
| valueFormat | 显示值的格式化函数 | function | - |
|
||||
| title | 图表标题 | ReactNode\|string | - |
|
||||
| subTitle | 图表子标题 | ReactNode\|string | - |
|
||||
| total | 图标中央的总数 | string | function | - |
|
||||
|
||||
### Radar
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| title | 图表标题 | ReactNode\|string | - |
|
||||
| height | 图表高度 | number | - |
|
||||
| hasLegend | 是否显示 legend | boolean | `false` |
|
||||
| padding | 图表内部间距 | [array](https://github.com/alibaba/BizCharts/blob/master/doc/api/chart.md#7padding-object--number--array-) | `'auto'` |
|
||||
| data | 图标数据 | array<{name,label,value}> | - |
|
||||
|
||||
### Gauge
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| title | 图表标题 | ReactNode\|string | - |
|
||||
| height | 图表高度 | number | - |
|
||||
| color | 图表颜色 | string | `#2F9CFF` |
|
||||
| bgColor | 图表背景颜色 | string | `#F0F2F5` |
|
||||
| percent | 进度比例 | number | - |
|
||||
|
||||
### WaterWave
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| title | 图表标题 | ReactNode\|string | - |
|
||||
| height | 图表高度 | number | - |
|
||||
| color | 图表颜色 | string | `#1890FF` |
|
||||
| percent | 进度比例 | number | - |
|
||||
|
||||
### TagCloud
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| data | 标题 | Array<name, value\> | - |
|
||||
| height | 高度值 | number | - |
|
||||
|
||||
### TimelineChart
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| data | 标题 | Array<x, y1, y2\> | - |
|
||||
| titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | - |
|
||||
| height | 高度值 | number | 400 |
|
||||
|
||||
### Field
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| label | 标题 | ReactNode\|string | - |
|
||||
| value | 值 | ReactNode\|string | - |
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
简单的倒计时组件使用。
|
||||
|
||||
## en-US
|
||||
|
||||
The simplest usage.
|
||||
|
||||
````jsx
|
||||
import CountDown from 'ant-design-pro/lib/CountDown';
|
||||
|
||||
const targetTime = new Date().getTime() + 3900000;
|
||||
|
||||
ReactDOM.render(
|
||||
<CountDown style={{ fontSize: 20 }} target={targetTime} />
|
||||
, mountNode);
|
||||
````
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import * as React from 'react';
|
||||
export interface ICountDownProps {
|
||||
format?: (time: number) => void;
|
||||
target: Date | number;
|
||||
onEnd?: () => void;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export default class CountDown extends React.Component<ICountDownProps, any> {}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
---
|
||||
title: CountDown
|
||||
cols: 1
|
||||
order: 3
|
||||
---
|
||||
|
||||
Simple CountDown Component.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| format | Formatter of time | Function(time) | |
|
||||
| target | Target time | Date | - |
|
||||
| onEnd | Countdown to the end callback | funtion | -|
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
|
||||
function fixedZero(val) {
|
||||
return val * 1 < 10 ? `0${val}` : val;
|
||||
}
|
||||
const initTime = props => {
|
||||
let lastTime = 0;
|
||||
let targetTime = 0;
|
||||
try {
|
||||
if (Object.prototype.toString.call(props.target) === '[object Date]') {
|
||||
targetTime = props.target.getTime();
|
||||
} else {
|
||||
targetTime = new Date(props.target).getTime();
|
||||
}
|
||||
} catch (e) {
|
||||
throw new Error('invalid target prop', e);
|
||||
}
|
||||
|
||||
lastTime = targetTime - new Date().getTime();
|
||||
return {
|
||||
lastTime: lastTime < 0 ? 0 : lastTime,
|
||||
};
|
||||
};
|
||||
|
||||
class CountDown extends Component {
|
||||
timer = 0;
|
||||
|
||||
interval = 1000;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const { lastTime } = initTime(props);
|
||||
this.state = {
|
||||
lastTime,
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps, preState) {
|
||||
const { lastTime } = initTime(nextProps);
|
||||
if (preState.lastTime !== lastTime) {
|
||||
return {
|
||||
lastTime,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.tick();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { target } = this.props;
|
||||
if (target !== prevProps.target) {
|
||||
clearTimeout(this.timer);
|
||||
this.tick();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
|
||||
// defaultFormat = time => (
|
||||
// <span>{moment(time).format('hh:mm:ss')}</span>
|
||||
// );
|
||||
defaultFormat = time => {
|
||||
const hours = 60 * 60 * 1000;
|
||||
const minutes = 60 * 1000;
|
||||
|
||||
const h = Math.floor(time / hours);
|
||||
const m = Math.floor((time - h * hours) / minutes);
|
||||
const s = Math.floor((time - h * hours - m * minutes) / 1000);
|
||||
return (
|
||||
<span>
|
||||
{fixedZero(h)}:{fixedZero(m)}:{fixedZero(s)}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
tick = () => {
|
||||
const { onEnd } = this.props;
|
||||
let { lastTime } = this.state;
|
||||
|
||||
this.timer = setTimeout(() => {
|
||||
if (lastTime < this.interval) {
|
||||
clearTimeout(this.timer);
|
||||
this.setState(
|
||||
{
|
||||
lastTime: 0,
|
||||
},
|
||||
() => {
|
||||
if (onEnd) {
|
||||
onEnd();
|
||||
}
|
||||
}
|
||||
);
|
||||
} else {
|
||||
lastTime -= this.interval;
|
||||
this.setState(
|
||||
{
|
||||
lastTime,
|
||||
},
|
||||
() => {
|
||||
this.tick();
|
||||
}
|
||||
);
|
||||
}
|
||||
}, this.interval);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { format = this.defaultFormat, onEnd, ...rest } = this.props;
|
||||
const { lastTime } = this.state;
|
||||
const result = format(lastTime);
|
||||
|
||||
return <span {...rest}>{result}</span>;
|
||||
}
|
||||
}
|
||||
|
||||
export default CountDown;
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
---
|
||||
title: CountDown
|
||||
subtitle: 倒计时
|
||||
cols: 1
|
||||
order: 3
|
||||
---
|
||||
|
||||
倒计时组件。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| format | 时间格式化显示 | Function(time) | |
|
||||
| target | 目标时间 | Date | - |
|
||||
| onEnd | 倒计时结束回调 | funtion | -|
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import * as React from 'react';
|
||||
|
||||
export default class Description extends React.Component<
|
||||
{
|
||||
term: React.ReactNode;
|
||||
style?: React.CSSProperties;
|
||||
},
|
||||
any
|
||||
> {}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Col } from 'antd';
|
||||
import styles from './index.less';
|
||||
import responsive from './responsive';
|
||||
|
||||
const Description = ({ term, column, children, ...restProps }) => (
|
||||
<Col {...responsive[column]} {...restProps}>
|
||||
{term && <div className={styles.term}>{term}</div>}
|
||||
{children !== null && children !== undefined && <div className={styles.detail}>{children}</div>}
|
||||
</Col>
|
||||
);
|
||||
|
||||
Description.defaultProps = {
|
||||
term: '',
|
||||
};
|
||||
|
||||
Description.propTypes = {
|
||||
term: PropTypes.node,
|
||||
};
|
||||
|
||||
export default Description;
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { Row } from 'antd';
|
||||
import styles from './index.less';
|
||||
|
||||
const DescriptionList = ({
|
||||
className,
|
||||
title,
|
||||
col = 3,
|
||||
layout = 'horizontal',
|
||||
gutter = 32,
|
||||
children,
|
||||
size,
|
||||
...restProps
|
||||
}) => {
|
||||
const clsString = classNames(styles.descriptionList, styles[layout], className, {
|
||||
[styles.small]: size === 'small',
|
||||
[styles.large]: size === 'large',
|
||||
});
|
||||
const column = col > 4 ? 4 : col;
|
||||
return (
|
||||
<div className={clsString} {...restProps}>
|
||||
{title ? <div className={styles.title}>{title}</div> : null}
|
||||
<Row gutter={gutter}>
|
||||
{React.Children.map(
|
||||
children,
|
||||
child => (child ? React.cloneElement(child, { column }) : child)
|
||||
)}
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DescriptionList;
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
基本描述列表。
|
||||
|
||||
## en-US
|
||||
|
||||
Basic DescriptionList.
|
||||
|
||||
````jsx
|
||||
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
|
||||
|
||||
const { Description } = DescriptionList;
|
||||
|
||||
ReactDOM.render(
|
||||
<DescriptionList size="large" title="title">
|
||||
<Description term="Firefox">
|
||||
A free, open source, cross-platform,
|
||||
graphical web browser developed by the
|
||||
Mozilla Corporation and hundreds of
|
||||
volunteers.
|
||||
</Description>
|
||||
<Description term="Firefox">
|
||||
A free, open source, cross-platform,
|
||||
graphical web browser developed by the
|
||||
Mozilla Corporation and hundreds of
|
||||
volunteers.
|
||||
</Description>
|
||||
<Description term="Firefox">
|
||||
A free, open source, cross-platform,
|
||||
graphical web browser developed by the
|
||||
Mozilla Corporation and hundreds of
|
||||
volunteers.
|
||||
</Description>
|
||||
</DescriptionList>
|
||||
, mountNode);
|
||||
````
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue