|
@@ -1,71 +0,0 @@
|
|
|
-import * as React from 'react';
|
|
|
|
|
-import { useTheme } from '@mui/material/styles';
|
|
|
|
|
-import { LineChart, Line, XAxis, YAxis, Label, ResponsiveContainer } from 'recharts';
|
|
|
|
|
-import Title from './Title';
|
|
|
|
|
-
|
|
|
|
|
-// Generate Sales Data
|
|
|
|
|
-function createData(time, amount) {
|
|
|
|
|
- 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 (
|
|
|
|
|
- <React.Fragment>
|
|
|
|
|
- <Title>Today</Title>
|
|
|
|
|
- <ResponsiveContainer>
|
|
|
|
|
- <LineChart
|
|
|
|
|
- data={data}
|
|
|
|
|
- margin={{
|
|
|
|
|
- top: 16,
|
|
|
|
|
- right: 16,
|
|
|
|
|
- bottom: 0,
|
|
|
|
|
- left: 24,
|
|
|
|
|
- }}
|
|
|
|
|
- >
|
|
|
|
|
- <XAxis
|
|
|
|
|
- dataKey="time"
|
|
|
|
|
- stroke={theme.palette.text.secondary}
|
|
|
|
|
- style={theme.typography.body2}
|
|
|
|
|
- />
|
|
|
|
|
- <YAxis
|
|
|
|
|
- stroke={theme.palette.text.secondary}
|
|
|
|
|
- style={theme.typography.body2}
|
|
|
|
|
- >
|
|
|
|
|
- <Label
|
|
|
|
|
- angle={270}
|
|
|
|
|
- position="left"
|
|
|
|
|
- style={{
|
|
|
|
|
- textAnchor: 'middle',
|
|
|
|
|
- fill: theme.palette.text.primary,
|
|
|
|
|
- ...theme.typography.body1,
|
|
|
|
|
- }}
|
|
|
|
|
- >
|
|
|
|
|
- Sales ($)
|
|
|
|
|
- </Label>
|
|
|
|
|
- </YAxis>
|
|
|
|
|
- <Line
|
|
|
|
|
- isAnimationActive={false}
|
|
|
|
|
- type="monotone"
|
|
|
|
|
- dataKey="amount"
|
|
|
|
|
- stroke={theme.palette.primary.main}
|
|
|
|
|
- dot={false}
|
|
|
|
|
- />
|
|
|
|
|
- </LineChart>
|
|
|
|
|
- </ResponsiveContainer>
|
|
|
|
|
- </React.Fragment>
|
|
|
|
|
- );
|
|
|
|
|
-}
|
|
|