diff --git a/docs/package.json b/docs/package.json index dd0c4cb18b21c5..6ec1878801e41d 100644 --- a/docs/package.json +++ b/docs/package.json @@ -114,6 +114,7 @@ "devDependencies": { "@babel/plugin-transform-react-constant-elements": "^7.8.3", "@babel/preset-typescript": "^7.7.4", + "@types/recharts": "^1.8.14", "babel-plugin-unwrap-createstyles": "^4.1.0", "cpy-cli": "^3.0.0", "cross-fetch": "^3.0.5", diff --git a/docs/src/pages/getting-started/templates/dashboard/Chart.tsx b/docs/src/pages/getting-started/templates/dashboard/Chart.tsx new file mode 100644 index 00000000000000..8c84a3ab58dca5 --- /dev/null +++ b/docs/src/pages/getting-started/templates/dashboard/Chart.tsx @@ -0,0 +1,69 @@ +import * as React from 'react'; +import { useTheme } from '@material-ui/core/styles'; +import { + LineChart, + Line, + XAxis, + YAxis, + Label, + ResponsiveContainer, +} from 'recharts'; +import Title from './Title'; + +// Generate Sales Data +function createData(time: string, amount?: number) { + return { time, amount }; +} + +const data = [ + createData('00:00', 0), + createData('03:00', 300), + createData('06:00', 600), + createData('09:00', 800), + createData('12:00', 1500), + createData('15:00', 2000), + createData('18:00', 2400), + createData('21:00', 2400), + createData('24:00', undefined), +]; + +export default function Chart() { + const theme = useTheme(); + + return ( + + Today + + + + + + + + + + + ); +} diff --git a/docs/src/pages/getting-started/templates/dashboard/Dashboard.js b/docs/src/pages/getting-started/templates/dashboard/Dashboard.js index 7b646251d8547e..8d9a137af31f3b 100644 --- a/docs/src/pages/getting-started/templates/dashboard/Dashboard.js +++ b/docs/src/pages/getting-started/templates/dashboard/Dashboard.js @@ -98,6 +98,10 @@ const useStyles = makeStyles((theme) => ({ }, appBarSpacer: theme.mixins.toolbar, content: { + backgroundColor: + theme.palette.type === 'light' + ? theme.palette.grey[100] + : theme.palette.grey[900], flexGrow: 1, height: '100vh', overflow: 'auto', diff --git a/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx b/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx new file mode 100644 index 00000000000000..8d9a137af31f3b --- /dev/null +++ b/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx @@ -0,0 +1,218 @@ +import * as React from 'react'; +import clsx from 'clsx'; +import { makeStyles } from '@material-ui/core/styles'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import Drawer from '@material-ui/core/Drawer'; +import Box from '@material-ui/core/Box'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import List from '@material-ui/core/List'; +import Typography from '@material-ui/core/Typography'; +import Divider from '@material-ui/core/Divider'; +import IconButton from '@material-ui/core/IconButton'; +import Badge from '@material-ui/core/Badge'; +import Container from '@material-ui/core/Container'; +import Grid from '@material-ui/core/Grid'; +import Paper from '@material-ui/core/Paper'; +import Link from '@material-ui/core/Link'; +import MenuIcon from '@material-ui/icons/Menu'; +import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; +import NotificationsIcon from '@material-ui/icons/Notifications'; +import { mainListItems, secondaryListItems } from './listItems'; +import Chart from './Chart'; +import Deposits from './Deposits'; +import Orders from './Orders'; + +function Copyright() { + return ( + + {'Copyright © '} + + Your Website + {' '} + {new Date().getFullYear()} + {'.'} + + ); +} + +const drawerWidth = 240; + +const useStyles = makeStyles((theme) => ({ + root: { + display: 'flex', + }, + toolbar: { + paddingRight: 24, // keep right padding when drawer closed + }, + toolbarIcon: { + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-end', + padding: '0 8px', + ...theme.mixins.toolbar, + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }, + appBarShift: { + marginLeft: drawerWidth, + width: `calc(100% - ${drawerWidth}px)`, + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + menuButton: { + marginRight: 36, + }, + menuButtonHidden: { + display: 'none', + }, + title: { + flexGrow: 1, + }, + drawerPaper: { + position: 'relative', + whiteSpace: 'nowrap', + width: drawerWidth, + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + drawerPaperClose: { + overflowX: 'hidden', + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + width: theme.spacing(7), + [theme.breakpoints.up('sm')]: { + width: theme.spacing(9), + }, + }, + appBarSpacer: theme.mixins.toolbar, + content: { + backgroundColor: + theme.palette.type === 'light' + ? theme.palette.grey[100] + : theme.palette.grey[900], + flexGrow: 1, + height: '100vh', + overflow: 'auto', + }, + container: { + paddingTop: theme.spacing(4), + paddingBottom: theme.spacing(4), + }, + paper: { + padding: theme.spacing(2), + display: 'flex', + overflow: 'auto', + flexDirection: 'column', + }, + fixedHeight: { + height: 240, + }, +})); + +export default function Dashboard() { + const classes = useStyles(); + const [open, setOpen] = React.useState(true); + const handleDrawerOpen = () => { + setOpen(true); + }; + const handleDrawerClose = () => { + setOpen(false); + }; + const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight); + + return ( +
+ + + + + + + + Dashboard + + + + + + + + + +
+ + + +
+ + {mainListItems} + + {secondaryListItems} + +
+
+ + + {/* Chart */} + + + + + + {/* Recent Deposits */} + + + + + + {/* Recent Orders */} + + + + + + + + + + +
+
+ ); +} diff --git a/docs/src/pages/getting-started/templates/dashboard/Deposits.tsx b/docs/src/pages/getting-started/templates/dashboard/Deposits.tsx new file mode 100644 index 00000000000000..945f4c876f1528 --- /dev/null +++ b/docs/src/pages/getting-started/templates/dashboard/Deposits.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import Link from '@material-ui/core/Link'; +import { makeStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; +import Title from './Title'; + +function preventDefault(event: React.MouseEvent) { + event.preventDefault(); +} + +const useStyles = makeStyles({ + depositContext: { + flex: 1, + }, +}); + +export default function Deposits() { + const classes = useStyles(); + return ( + + Recent Deposits + + $3,024.00 + + + on 15 March, 2019 + +
+ + View balance + +
+ + ); +} diff --git a/docs/src/pages/getting-started/templates/dashboard/Orders.js b/docs/src/pages/getting-started/templates/dashboard/Orders.js index bd26772187c892..b16cb9f40cc648 100644 --- a/docs/src/pages/getting-started/templates/dashboard/Orders.js +++ b/docs/src/pages/getting-started/templates/dashboard/Orders.js @@ -88,7 +88,7 @@ export default function Orders() { {row.name} {row.shipTo} {row.paymentMethod} - {row.amount} + {`$${row.amount}`} ))} diff --git a/docs/src/pages/getting-started/templates/dashboard/Orders.tsx b/docs/src/pages/getting-started/templates/dashboard/Orders.tsx new file mode 100644 index 00000000000000..79671cf37e1f87 --- /dev/null +++ b/docs/src/pages/getting-started/templates/dashboard/Orders.tsx @@ -0,0 +1,110 @@ +import * as React from 'react'; +import Link from '@material-ui/core/Link'; +import { makeStyles } from '@material-ui/core/styles'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import Title from './Title'; + +// Generate Order Data +function createData( + id: number, + date: string, + name: string, + shipTo: string, + paymentMethod: string, + amount: number, +) { + return { id, date, name, shipTo, paymentMethod, amount }; +} + +const rows = [ + createData( + 0, + '16 Mar, 2019', + 'Elvis Presley', + 'Tupelo, MS', + 'VISA ⠀•••• 3719', + 312.44, + ), + createData( + 1, + '16 Mar, 2019', + 'Paul McCartney', + 'London, UK', + 'VISA ⠀•••• 2574', + 866.99, + ), + createData( + 2, + '16 Mar, 2019', + 'Tom Scholz', + 'Boston, MA', + 'MC ⠀•••• 1253', + 100.81, + ), + createData( + 3, + '16 Mar, 2019', + 'Michael Jackson', + 'Gary, IN', + 'AMEX ⠀•••• 2000', + 654.39, + ), + createData( + 4, + '15 Mar, 2019', + 'Bruce Springsteen', + 'Long Branch, NJ', + 'VISA ⠀•••• 5919', + 212.79, + ), +]; + +function preventDefault(event: React.MouseEvent) { + event.preventDefault(); +} + +const useStyles = makeStyles((theme) => ({ + seeMore: { + marginTop: theme.spacing(3), + }, +})); + +export default function Orders() { + const classes = useStyles(); + return ( + + Recent Orders + + + + Date + Name + Ship To + Payment Method + Sale Amount + + + + {rows.map((row) => ( + + {row.date} + {row.name} + {row.shipTo} + {row.paymentMethod} + {`$${row.amount}`} + + ))} + +
+
+ + See more orders + +
+ + ); +} diff --git a/docs/src/pages/getting-started/templates/dashboard/Title.js b/docs/src/pages/getting-started/templates/dashboard/Title.js index 3b2ef54050d4cb..3391a800eae734 100644 --- a/docs/src/pages/getting-started/templates/dashboard/Title.js +++ b/docs/src/pages/getting-started/templates/dashboard/Title.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Typography from '@material-ui/core/Typography'; -export default function Title(props) { +function Title(props) { return ( {props.children} @@ -13,3 +13,5 @@ export default function Title(props) { Title.propTypes = { children: PropTypes.node, }; + +export default Title; diff --git a/docs/src/pages/getting-started/templates/dashboard/Title.tsx b/docs/src/pages/getting-started/templates/dashboard/Title.tsx new file mode 100644 index 00000000000000..7746758b8fed9e --- /dev/null +++ b/docs/src/pages/getting-started/templates/dashboard/Title.tsx @@ -0,0 +1,14 @@ +import * as React from 'react'; +import Typography from '@material-ui/core/Typography'; + +interface TitleProps { + children?: React.ReactNode; +} + +export default function Title(props: TitleProps) { + return ( + + {props.children} + + ); +} diff --git a/docs/src/pages/getting-started/templates/dashboard/listItems.tsx b/docs/src/pages/getting-started/templates/dashboard/listItems.tsx new file mode 100644 index 00000000000000..21e32419cf2652 --- /dev/null +++ b/docs/src/pages/getting-started/templates/dashboard/listItems.tsx @@ -0,0 +1,70 @@ +import * as React from 'react'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import DashboardIcon from '@material-ui/icons/Dashboard'; +import ShoppingCartIcon from '@material-ui/icons/ShoppingCart'; +import PeopleIcon from '@material-ui/icons/People'; +import BarChartIcon from '@material-ui/icons/BarChart'; +import LayersIcon from '@material-ui/icons/Layers'; +import AssignmentIcon from '@material-ui/icons/Assignment'; + +export const mainListItems = ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+); + +export const secondaryListItems = ( +
+ Saved reports + + + + + + + + + + + + + + + + + + +
+); diff --git a/yarn.lock b/yarn.lock index b3312e4726b46b..640d5e6a95cd57 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2576,6 +2576,18 @@ resolved "https://registry.yarnpkg.com/@types/css-mediaquery/-/css-mediaquery-0.1.0.tgz#61d439d8163880e90b61d19aba24f7b778c4e77d" integrity sha512-jzZ9bRw8fTgCEllDvE7GHR1zTP5LsDHJbAX6BCwD9qdxIOq/Le5TTsdteoCIdEQaFpDMvudLHU/hLo1Lmfcy0Q== +"@types/d3-path@*": + version "1.0.8" + resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-1.0.8.tgz#48e6945a8ff43ee0a1ce85c8cfa2337de85c7c79" + integrity sha512-AZGHWslq/oApTAHu9+yH/Bnk63y9oFOMROtqPAtxl5uB6qm1x2lueWdVEjsjjV3Qc2+QfuzKIwIR5MvVBakfzA== + +"@types/d3-shape@*": + version "1.3.2" + resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-1.3.2.tgz#a41d9d6b10d02e221696b240caf0b5d0f5a588ec" + integrity sha512-LtD8EaNYCaBRzHzaAiIPrfcL3DdIysc81dkGlQvv7WQP3+YXV7b0JJTtR1U3bzeRieS603KF4wUo+ZkJVenh8w== + dependencies: + "@types/d3-path" "*" + "@types/doctrine@^0.0.3": version "0.0.3" resolved "https://registry.yarnpkg.com/@types/doctrine/-/doctrine-0.0.3.tgz#e892d293c92c9c1d3f9af72c15a554fbc7e0895a" @@ -2849,6 +2861,14 @@ "@types/prop-types" "*" csstype "^3.0.2" +"@types/recharts@^1.8.14": + version "1.8.14" + resolved "https://registry.yarnpkg.com/@types/recharts/-/recharts-1.8.14.tgz#7fcbf9346db415d417910f5ce17af4e3e8e42c57" + integrity sha512-Q4NR9vgmugOELYY/8lXzs99nf9E1/fDWx6ZTVEjAtOhAbqXYFrepyQKa4+bR4mHl1F2WcYgf96fvWIu7It6rmA== + dependencies: + "@types/d3-shape" "*" + "@types/react" "*" + "@types/resolve@0.0.8": version "0.0.8" resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"