转眼间2018年就过去了,来到的2019新的一年,在这里,祝大家新年快乐。
开发缘由:因为一个很重要的朋友需要绘制一些Charts,但是嫌弃手绘太慢,因此这次放假写了这个小东西
当前进度:简单的Demo Charts展示,包括AreaChart, BarChart, ComposedChart, LineChart, PieChart
测试文件:src/common/files/info.xlsx
附上
先上两张照片吧
1、版本
2、创建项目
因为公司使用的 react
+antd
+ts
, 虽然antd
前两天搞了个圣诞惊吓,但是毋庸置疑,这个组件库做的确实很好啊,我不怕被喷,辩证一分为二,不能因为别人犯一点的错误,就否认人家吧,废话不多说,还是讲本文的主题吧
首先先安装create-react-app
1 | npm i -g create-react-app |
然后安装react-route-dom和recharts
1
2
3
4yarn add react-route-dom
or
npm i react-route-dom --save
npm i recharts --save
因为TS
检查较为严格,所以,我对TS
有一些我自己需要rules
的配置tslint.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71{
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
"linterOptions": {
"exclude": [
"config/**/*.js",
"node_modules/**/*.ts",
"coverage/lcov-report/*.js"
]
},
"rules": {
"no-string-throw": true,
"no-unused-expression": false,
"no-unused-variable": false,
"no-use-before-declare": false,
"no-duplicate-variable": false,
"curly": true,
"class-name": true,
"triple-equals": [true, "allow-null-check"],
"comment-format": [false, "check-space"],
"eofline": true,
"forin": false,
"indent": [true, "spaces", 2],
"label-position": true,
"max-line-length": [true, 150],
"member-access": false,
"no-arg": true,
"no-bitwise": false,
"no-console": [true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-debugger": true,
"no-empty": false,
"no-eval": true,
"no-inferrable-types": true,
"no-shadowed-variable": false,
"no-string-literal": false,
"no-switch-case-fall-through": false,
"no-trailing-whitespace": true,
"no-var-keyword": false,
"object-literal-sort-keys": false,
"one-line": [true,
"check-open-brace",
"check-catch",
"check-else"
],
"radix": false,
"typedef-whitespace": [true, {
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}],
"variable-name": [true, "ban-keywords"],
"whitespace": [true,
"check-branch",
"check-decl",
"check-type",
"check-preblock"
],
"ordered-imports": false,
"jsx-no-lambda": false,
"interface-name": [true, "never-prefix"],
"prefer-const": false
}
}
React-Route 4.x
提供给我们使用的都是以组件形式存在的。我们使用的时候就像我们以前使用组件那样使用就行了,详见React-Route官方文档。
菜单栏,我觉得日后可能还会增加其他的Charts
,所以我将菜单通过配置文件来控制,增加复用性。
SideMenu.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import classnames from 'classnames';
import moment from 'moment';
import './index.scss';
import { menus } from './menus';
import { Layout, Menu, Icon } from 'antd';
import Timer from 'src/components/Timer/Timer';
const { Header, Footer, Sider, Content } = Layout;
const { SubMenu } = Menu;
interface SideMenuProps {
children?: any;
}
export default class SideMenu extends Component<SideMenuProps, any> {
public state = {
collapsed: false,
selectedKeys: [menus[0].key],
};
public toggle = () => {
this.setState({
collapsed: !this.state.collapsed
});
};
render() {
const { collapsed, selectedKeys, } = this.state
return (
<Layout className="side-menu">
<Sider trigger={null} collapsible={true} collapsed={collapsed}>
<div className="logo">
<img src={require('src/common/images/logo.png')} />
<a href="https://github.com/Rain120/charts" target="_blank">
<span className={classnames("title")}><Icon type="github" /></span>
</a>
<a href="https://www.zhihu.com/people/yan-yang-nian-hua-120/activities" target="_blank">
<span className={classnames("title")}><Icon type="zhihu" /></span>
</a>
</div>
<Menu theme="dark" mode="inline" defaultSelectedKeys={selectedKeys}>
{
menus && menus.map(menu => (
menu.children
? (
<SubMenu key={menu.key} title={<span><Icon type={menu.icon} /><span>{menu.text}</span></span>}>
{
menu.children.map(item => (
<Menu.Item key={item.key}>
<Link to={item.path}>{item.text}</Link>
</Menu.Item>
))
}
</SubMenu>
) : (
<Menu.Item key={menu.key}>
<Link to={menu.path} style={{ overflow: 'hidden' }}><Icon type={menu.icon} />{menu.text}</Link>
</Menu.Item>
)
))
}
</Menu>
</Sider>
<Layout className="r-content">
<Header>
<Icon
className="trigger"
type={collapsed ? 'menu-unfold' : 'menu-fold'}
onClick={this.toggle}
/>
<Timer timerStyle="timer" />
</Header>
<Content style={{ margin: '1rem', padding: '1rem', background: '#fff', minHeight: '25rem', }}>
{this.props.children}
</Content>
<Footer style={{ textAlign: 'center' }}>
©{moment().format('YYYY')} Created by Rainy
</Footer>
</Layout>
</Layout>
);
}
}
Menu.ts
1 | /* |
获取Excel
的数据是通过使用大佬的xlsx
插件来实现的,详见XLSX官网。1
npm i xlsx -S
因为这次项目没有后端,所以其实我们对Excel
文件的解析是在upload
之前完成的1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26public beforeUpload = (file: any, fileList: any) => {
var rABS = true;
const f = fileList[0];
var reader = new FileReader();
reader.onload = (e: any) => {
let data: any = e.target.result;
if (!rABS) {
data = new Uint8Array(data);
}
var workbook = XLSX.read(data, {
type: rABS ? 'binary' : 'array'
});
// more sheet
workbook.SheetNames.map(item => {
var worksheet = workbook.Sheets[item];
var jsonArr = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
this.handleImpotedJson(jsonArr);
})
};
if (rABS) {
reader.readAsBinaryString(f);
} else {
reader.readAsArrayBuffer(f);
}
return false;
}
upload config
1 | const props = { |
Charts
组件
因为使用的Charts
比较多,所以使用recharts
提供的组件ResponsiveContainer
为了使得这些Charts
不够缩放的影响。但是当前做的这些Charts
大部分都是相同的结构,所以相同的部分应该抽离出来。
因为其他的Charts
都差不多,这里我只说一下LineCharts
1 | import React, { Component } from 'react'; |
github page deploy
1 | npm i -g gh-pages |
package.json
配置1
2"predeploy": "yarn run build",
"deploy": "gh-pages -d build"
部署1
yarn run deploy
引入图片
以上就是这两天做的小东西,写的和讲的都很潦草,请看管轻喷。