diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index c77c179..0000000
--- a/.babelrc
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "plugins": [
- ["import", {
- "libraryName": "antd",
- "style": "css"
- }]
- ]
-}
diff --git a/package.json b/package.json
index c11c1eb..e1dbf38 100644
--- a/package.json
+++ b/package.json
@@ -1,44 +1,46 @@
-{
- "private": true,
- "entry": {
- "index": "./src/index.js"
- },
- "dependencies": {
- "antd": "^2.3.1",
- "classnames": "^2.2.5",
- "dva": "1.0.0",
- "js-cookie": "^2.1.3",
- "qs": "^6.2.0",
- "react": "^15.1.0",
- "react-dom": "^15.1.0"
- },
- "devDependencies": {
- "atool-build": "^0.7.6",
- "babel-eslint": "^6.0.4",
- "babel-plugin-dev-expression": "^0.2.1",
- "babel-plugin-dva-hmr": "^0.1.0",
- "babel-plugin-import": "^1.0.1",
- "babel-plugin-transform-runtime": "^6.9.0",
- "babel-runtime": "^6.9.2",
- "dora": "0.3.x",
- "dora-plugin-proxy": "^0.7.0",
- "dora-plugin-webpack": "0.6.x",
- "dora-plugin-webpack-hmr": "^0.1.0",
- "eslint": "^2.13.1",
- "eslint-config-airbnb": "^9.0.1",
- "eslint-plugin-import": "^1.8.1",
- "eslint-plugin-jsx-a11y": "^1.4.2",
- "eslint-plugin-react": "^5.1.1",
- "glob": "^7.0.5",
- "mockjs": "^1.0.1-beta3",
- "redbox-react": "^1.2.10",
- "robe-ajax": "^1.0.0",
- "watchjs": "^0.0.0"
- },
- "scripts": {
- "start": "dora --plugins \"proxy,webpack,webpack-hmr\"",
- "dev": "dora --plugins \"webpack,webpack-hmr\"",
- "lint": "eslint --fix --ext .js,.jsx src/components/layout",
- "build": "atool-build"
- }
-}
+{
+ "private": true,
+ "entry": {
+ "index": "./src/index.js"
+ },
+ "dependencies": {
+ "antd": "^2.3.1",
+ "classnames": "^2.2.5",
+ "dva": "1.0.0",
+ "js-cookie": "^2.1.3",
+ "qs": "^6.2.0",
+ "react": "^15.1.0",
+ "react-dom": "^15.1.0",
+ "recharts": "^0.19.0"
+ },
+ "devDependencies": {
+ "atool-build": "^0.7.6",
+ "babel-eslint": "^6.0.4",
+ "babel-plugin-dev-expression": "^0.2.1",
+ "babel-plugin-dva-hmr": "^0.1.0",
+ "babel-plugin-import": "^1.0.1",
+ "babel-plugin-transform-runtime": "^6.9.0",
+ "babel-runtime": "^6.9.2",
+ "dora": "0.3.x",
+ "dora-plugin-proxy": "^0.7.0",
+ "dora-plugin-webpack": "0.6.x",
+ "dora-plugin-webpack-hmr": "^0.1.0",
+ "eslint": "^2.13.1",
+ "eslint-config-airbnb": "^9.0.1",
+ "eslint-plugin-import": "^1.8.1",
+ "eslint-plugin-jsx-a11y": "^1.4.2",
+ "eslint-plugin-react": "^5.1.1",
+ "glob": "^7.0.5",
+ "mockjs": "^1.0.1-beta3",
+ "redbox-react": "^1.2.10",
+ "robe-ajax": "^1.0.0",
+ "watchjs": "^0.0.0"
+ },
+ "scripts": {
+ "start": "dora --plugins \"proxy,webpack,webpack-hmr\"",
+ "dev": "dora --plugins \"webpack,webpack-hmr\"",
+ "lint": "eslint --fix --ext .js,.jsx src/components/layout",
+ "build": "atool-build"
+ },
+ "theme": "./src/theme.js"
+}
diff --git a/src/components/dashboard/numberCard.less b/src/components/dashboard/numberCard.less
index 0f981ac..6daa31f 100644
--- a/src/components/dashboard/numberCard.less
+++ b/src/components/dashboard/numberCard.less
@@ -1,9 +1,16 @@
+@import "../vars.less";
.numberCard{
- box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.01);
+ box-shadow: @shadow-1;
padding: 32px;
font-family: monospace;
background-color: #fff;
margin-bottom: 24px;
+ cursor: pointer;
+ transition: @transition-ease-in;
+ &:hover{
+ box-shadow: @shadow-2;
+ transform: translateY(-2px);
+ }
.iconWarp{
font-size: 54px;
float: left;
@@ -26,9 +33,3 @@
}
}
}
-
-.text-overflow(){
- overflow: hidden;
- text-overflow: ellipsis;
- white-space:nowrap;
-}
diff --git a/src/components/dashboard/sales.js b/src/components/dashboard/sales.js
new file mode 100644
index 0000000..4bf6cc7
--- /dev/null
+++ b/src/components/dashboard/sales.js
@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react'
+import { Icon } from 'antd'
+import styles from './numberCard.less'
+import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts'
+
+function Sales(props) {
+ const { icon, color, title, number } = props
+ return (
+
+
+
+
{title || 'No Title'}
+
{number || '10,000'}
+
+
{numberCards}
+
+
+
+
+
+
+
)
}
diff --git a/src/theme.js b/src/theme.js
new file mode 100644
index 0000000..7c025a3
--- /dev/null
+++ b/src/theme.js
@@ -0,0 +1,7 @@
+module.exports = () => {
+ return {
+ '@primary-color': '#1DA57A',
+ '@link-color': '#1DA57A',
+ '@border-radius-base': '2px',
+ };
+};
diff --git a/webpack.config.js b/webpack.config.js
index f861251..4b8fe8f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,41 +1,45 @@
-const fs = require('fs');
-const path = require('path');
+const fs = require('fs')
+const path = require('path')
module.exports = function(webpackConfig, env) {
- webpackConfig.babel.plugins.push('transform-runtime');
+ webpackConfig.babel.plugins.push('transform-runtime')
+ webpackConfig.babel.plugins.push(['import', {
+ libraryName: 'antd',
+ style: true,
+ }])
// Support hmr
if (env === 'development') {
- webpackConfig.devtool = '#eval';
+ webpackConfig.devtool = '#eval'
webpackConfig.babel.plugins.push(['dva-hmr', {
entries: [
'./src/index.js',
],
- }]);
+ }])
} else {
- webpackConfig.babel.plugins.push('dev-expression');
+ webpackConfig.babel.plugins.push('dev-expression')
}
// Support CSS Modules
// Parse all less files as css module.
webpackConfig.module.loaders.forEach(function(loader, index) {
if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.less$') > -1) {
- loader.include = /node_modules/;
- loader.test = /\.less$/;
+ loader.include = /node_modules/
+ loader.test = /\.less$/
}
if (loader.test.toString() === '/\\.module\\.less$/') {
- loader.exclude = /node_modules/;
- loader.test = /\.less$/;
+ loader.exclude = /node_modules/
+ loader.test = /\.less$/
}
if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.css$') > -1) {
- loader.include = /node_modules/;
- loader.test = /\.css$/;
+ loader.include = /node_modules/
+ loader.test = /\.css$/
}
if (loader.test.toString() === '/\\.module\\.css$/') {
- loader.exclude = /node_modules/;
- loader.test = /\.css$/;
+ loader.exclude = /node_modules/
+ loader.test = /\.css$/
}
- });
+ })
- return webpackConfig;
-};
+ return webpackConfig
+}