1 files changed, 142 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/Widget/BigChartWidget.js b/front/odiparpack/app/components/Widget/BigChartWidget.js
new file mode 100644
index 0000000..718af45
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/BigChartWidget.js
@@ -0,0 +1,142 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import Dvr from '@material-ui/icons/Dvr';
+import Explore from '@material-ui/icons/Explore';
+import Healing from '@material-ui/icons/Healing';
+import LocalActivity from '@material-ui/icons/LocalActivity';
+import {
+  ComposedChart,
+  Line,
+  Area,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer
+} from 'recharts';
+import { data1 } from 'ba-api/chartData';
+import Type from 'ba-styles/Typography.scss';
+import colorfull from 'ba-api/colorfull';
+import { Grid, Avatar, Divider, LinearProgress, Typography } from '@material-ui/core';
+import styles from './widget-jss';
+import PapperBlock from '../PapperBlock/PapperBlock';
+
+
+const color = ({
+  main: colorfull[5],
+  maindark: '#2196F3',
+  secondary: colorfull[3],
+  third: colorfull[0],
+});
+
+class BigChartWidget extends PureComponent {
+  render() {
+    const {
+      classes,
+    } = this.props;
+    return (
+      <PapperBlock whiteBg noMargin title="Top Product Sales" desc="">
+        <Grid container spacing={2}>
+          <Grid item md={8} xs={12}>
+            <ul className={classes.bigResume}>
+              <li>
+                <Avatar className={classNames(classes.avatar, classes.pinkAvatar)}>
+                  <Dvr />
+                </Avatar>
+                <Typography variant="h6">
+                  1234
+                  <Typography>Monitors</Typography>
+                </Typography>
+              </li>
+              <li>
+                <Avatar className={classNames(classes.avatar, classes.purpleAvatar)}>
+                  <Explore />
+                </Avatar>
+                <Typography variant="h6">
+                  5678
+                  <Typography>Compas</Typography>
+                </Typography>
+              </li>
+              <li>
+                <Avatar className={classNames(classes.avatar, classes.blueAvatar)}>
+                  <Healing />
+                </Avatar>
+                <Typography variant="h6">
+                  910
+                  <Typography>Badges</Typography>
+                </Typography>
+              </li>
+              <li>
+                <Avatar className={classNames(classes.avatar, classes.tealAvatar)}>
+                  <LocalActivity />
+                </Avatar>
+                <Typography variant="h6">
+                  1112
+                  <Typography>Tickets</Typography>
+                </Typography>
+              </li>
+            </ul>
+            <div className={classes.chartWrap}>
+              <div className={classes.chartFluid}>
+                <ResponsiveContainer>
+                  <ComposedChart
+                    data={data1}
+                    margin={{
+                      top: 0,
+                      right: 30,
+                      left: 20,
+                      bottom: 20
+                    }}
+                  >
+                    <CartesianGrid stroke="#f5f5f5" />
+                    <XAxis dataKey="name" />
+                    <YAxis />
+                    <Tooltip />
+                    <Area type="monotone" dataKey="amt" fill={color.main} stroke={color.maindark} />
+                    <Bar dataKey="pv" barSize={20} fill={color.secondary} />
+                    <Line type="monotone" dataKey="uv" stroke={color.third} />
+                  </ComposedChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+          </Grid>
+          <Grid item md={4} xs={12}>
+            <Typography variant="button"><span className={Type.bold}>Performance Listing</span></Typography>
+            <Divider className={classes.divider} />
+            <ul className={classes.secondaryWrap}>
+              <li>
+                <Typography gutterBottom>Monitoring Quality</Typography>
+                <LinearProgress variant="determinate" className={classNames(classes.progress, classes.pinkProgress)} value={24} />
+              </li>
+              <li>
+                <Typography gutterBottom>Compas Speed</Typography>
+                <LinearProgress variant="determinate" className={classNames(classes.progress, classes.purpleProgress)} value={89} />
+              </li>
+              <li>
+                <Typography gutterBottom>Total Badges</Typography>
+                <LinearProgress variant="determinate" className={classNames(classes.progress, classes.orangeProgress)} value={78} />
+              </li>
+              <li>
+                <Typography gutterBottom>Sold Ticket</Typography>
+                <LinearProgress variant="determinate" className={classNames(classes.progress, classes.greenProgress)} value={55} />
+              </li>
+              <li>
+                <Typography gutterBottom>App Performance</Typography>
+                <LinearProgress variant="determinate" className={classNames(classes.progress, classes.blueProgress)} value={80} />
+              </li>
+            </ul>
+          </Grid>
+        </Grid>
+      </PapperBlock>
+    );
+  }
+}
+
+BigChartWidget.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(BigChartWidget);