issue 11-07-22 (chartline pengunjung)

components/Charts/chart-flot.scss

@@ -34,7 +34,7 @@
     }
 }
 .flot-chart {
-    display: block;
+    display: inline-block;
     width: 150%;
     height: 250px;
     // font-size: 15px;

components/Main/ChartdataHome.js

@@ -0,0 +1,96 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
+
+import Sparkline from "@/components/Common/Sparklines.js";
+import FlotChart from "@/components/Charts/Flot.js";
+import { connect } from "react-redux";
+import { getPengunjung } from "@/actions/pengunjung";
+class ChartdataHome extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataPengunjung: [],
+    };
+  }
+
+  ChartSpline = {
+    data: [
+      {
+        // label: "Uniques",
+        color: "#3e3a8e",
+        data: [
+          ["1", 20],
+          ["10", 90],
+          ["20", 40],
+          ["30", 60],
+        ],
+      },
+    ],
+
+    options: {
+      series: {
+        lines: {
+          show: false,
+        },
+        points: {
+          show: true,
+          radius: 4,
+        },
+        splines: {
+          show: true,
+          tension: 0.4,
+          lineWidth: 1,
+          fill: 0.5,
+        },
+      },
+      grid: {
+        borderColor: "#eee",
+        borderWidth: 1,
+        hoverable: true,
+        backgroundColor: "#fcfcfc",
+      },
+      tooltip: true,
+      tooltipOpts: {
+        content: (label, x, y) => x + " : " + y,
+      },
+      xaxis: {
+        tickColor: "#fcfcfc",
+        mode: "categories",
+      },
+      yaxis: {
+        min: 0,
+        max: 150, // optional: use it for a clear represetation
+        tickColor: "#eee",
+        //position: 'right' or 'left',
+        tickFormatter: (v) => v /* + ' visitors'*/,
+      },
+      shadowSize: 0,
+    },
+  };
+
+  render() {
+    console.log(this.state.dataPengunjung);
+    return (
+      <Col lg={12}>
+        <Card>
+          <CardBody>
+            <FlotChart
+              options={this.ChartSpline.options}
+              data={this.ChartSpline.data}
+              className="flot-chart"
+              height="150px"
+              width="350px"
+            />
+          </CardBody>
+          <div align="center">
+            <h5 className="font-weight-bold">Data Statistik Pengunjung Bulan<span> Juli</span></h5>
+          </div>
+        </Card>
+      </Col>
+    );
+  }
+}
+
+const mapStateToProps = (state) => ({ token: state.token });
+export default connect(mapStateToProps)(ChartdataHome);

components/Main/Login.js

@@ -111,13 +111,13 @@ class Login extends Component {
         />
         <CardBody className="card-body">
           {" "}
-          <h5 className="card-title text-left py-2 bg-gray border-radius-login">
-            <img
-              className="icon-triangle"
-              src="/static/img/icon-caution.png"
-            ></img>
-            <b>Login Menggunakan Akun PDDIKTI </b>
-          </h5>
+          {/* <h5 className="card-title text-left py-2 bg-gray border-radius-login"> */}
+          <img
+            className="icon-triangle"
+            src="/static/img/icon-caution.png"
+          ></img>
+          <b>Login Menggunakan Akun PDDIKTI </b>
+          {/* </h5> */}
           {this.state.error}
           <form onSubmit={this.onSubmit} method="post" name="formLogin">
             <div className="form-group">

pages/app/index.js

@@ -6,110 +6,116 @@ import Link from "next/link";
 import Login from "@/components/Main/Login";
 import { connect } from "react-redux";
 import { createPengunjung } from "@/actions/pengunjung";
+import ChartdataHome from "../../components/Main/ChartdataHome";
 
 const menu = [
-	{
-		title: "Home",
-		path: "/app",
-	},
-	{
-		title: "Buat Laporan",
-		path: "/laporan/new",
-	},
-	{
-		title: "Pemantauan",
-		path: "/pemantauan",
-	},
+  {
+    title: "Home",
+    path: "/app",
+  },
+  {
+    title: "Buat Laporan",
+    path: "/laporan/new",
+  },
+  {
+    title: "Pemantauan",
+    path: "/pemantauan",
+  },
 ];
 class App extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			isOpen: false,
-		};
-	}
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+    };
+  }
 
-	static getInitialProps = ({ pathname }) => ({ pathname });
+  static getInitialProps = ({ pathname }) => ({ pathname });
 
-	async componentDidMount() {
-		const { token } = this.props;
-		if (!token) {
-			await createPengunjung();
-		}
-	}
+  async componentDidMount() {
+    const { token } = this.props;
+    if (!token) {
+      await createPengunjung();
+    }
+  }
 
-	toggleCollapse = () => {
-		this.setState({
-			isOpen: !this.state.isOpen,
-		});
-	};
+  toggleCollapse = () => {
+    this.setState({
+      isOpen: !this.state.isOpen,
+    });
+  };
 
-	render() {
-		return (
-			<div>
-				<Navbar className="navbar-color" expand="md" dark>
-					<NavbarBrand href="/">
-						<img className="width-133" src="/static/img/Logo-Sidali.png" alt="App Logo" />
-					</NavbarBrand>
-					<NavbarToggler onClick={this.toggleCollapse} />
-					<Collapse isOpen={this.state.isOpen} navbar>
-						<Nav className="ml-auto" navbar>
-							{menu.map((e) => (
-								<NavItem active={e.path === this.props.pathname ? true : false}>
-									<Link href={e.path}>
-										<NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
-									</Link>
-								</NavItem>
-							))}
-						</Nav>
-					</Collapse>
-				</Navbar>
-				<ContentWrapper>
-					<Jumbotron>
-						<Row className="home-1">
-							<Col lg={8} className="d-flex flex-column justify-content-center align-items-start">
-								<h1 className="display-5 home-2 txt-size">Sistem Informasi Pengendalian Kelembagaan Perguruan Tinggi pada Pendidikan Tinggi Akademik</h1>
-								<p className="lead txt-size">Layanan Pelaporan Pelanggaran Perguruan Tinggi Penyelenggara Pendidikan Tinggi Akademik</p>
-								<hr className="my-4" />
-								<p className="txt-size">Disediakan kepada masyarakat untuk melaporkan pelanggaran perguruan tinggi yang menyelenggarakan pendidikan tinggi akademik</p>
-								<p className="lead">
-									{/* <Link href="/laporan/new">
+  render() {
+    return (
+      <div>
+        <Navbar className="navbar-color" expand="md" dark>
+          <NavbarBrand href="/">
+            <img className="width-133" src="/static/img/Logo-Sidali.png" alt="App Logo" />
+          </NavbarBrand>
+          <NavbarToggler onClick={this.toggleCollapse} />
+          <Collapse isOpen={this.state.isOpen} navbar>
+            <Nav className="ml-auto" navbar>
+              {menu.map((e) => (
+                <NavItem active={e.path === this.props.pathname ? true : false}>
+                  <Link href={e.path}>
+                    <NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
+                  </Link>
+                </NavItem>
+              ))}
+            </Nav>
+          </Collapse>
+        </Navbar>
+        <ContentWrapper>
+          <Jumbotron>
+            <Row className="home-1">
+              <Col lg={8} className="d-flex flex-column justify-content-center align-items-start">
+                <h1 className="display-5 home-2 txt-size">Sistem Informasi Pengendalian Kelembagaan Perguruan Tinggi pada Pendidikan Tinggi Akademik</h1>
+                <p className="lead txt-size">Layanan Pelaporan Pelanggaran Perguruan Tinggi Penyelenggara Pendidikan Tinggi Akademik</p>
+                <hr className="my-4" />
+                <p className="txt-size">Disediakan kepada masyarakat untuk melaporkan pelanggaran perguruan tinggi yang menyelenggarakan pendidikan tinggi akademik</p>
+                <p className="lead">
+                  {/* <Link href="/laporan/new">
 										<button className="btn btn-info btn-lg"><img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon"/>Buat Laporan</button>
 									</Link> */}
-									<Link href="/laporan/new">
-										<span className="btn-radius">
-											<Button color="" className="btn-labeled">
-												<span className="btn-label">
-													<img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon" />
-												</span>
-												<text className="text-button-home-1 font-color-white">Buat Laporan</text>
-											</Button>
-										</span>
-									</Link>
-									<Link href="/pemantauan">
-										<span className="btn-radius">
-											<Button color className="btn-labeled-2">
-												<span className="btn-label">
-													<img className="icon-pemantauan" src="/static/img/icon-pemantauan.png" alt="icon" />
-												</span>
-												<text className="text-button-home-1 font-color-white">Pemantauan</text>
-											</Button>
-										</span>
-									</Link>
-								</p>
-								<div>
-									<img className="ditbaga-logo" src="/static/img/ditbaga-logo.png" alt="applogo" />
-								</div>
-							</Col>
-							<Col>
-								<Login />
-							</Col>
-						</Row>
-					</Jumbotron>
-				</ContentWrapper>
-			</div>
-		);
-	}
+                  <Link href="/laporan/new">
+                    <span className="btn-radius">
+                      <Button color="" className="btn-labeled">
+                        <span className="btn-label">
+                          <img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon" />
+                        </span>
+                        <text className="text-button-home-1 font-color-white">Buat Laporan</text>
+                      </Button>
+                    </span>
+                  </Link>
+                  <Link href="/pemantauan">
+                    <span className="btn-radius">
+                      <Button color className="btn-labeled-2">
+                        <span className="btn-label">
+                          <img className="icon-pemantauan" src="/static/img/icon-pemantauan.png" alt="icon" />
+                        </span>
+                        <text className="text-button-home-1 font-color-white">Pemantauan</text>
+                      </Button>
+                    </span>
+                  </Link>
+                </p>
+                <div>
+                  <span className="cd-home-1">
+                    <img className="ditbaga-logo float-lg-none" src="/static/img/ditbaga-logo.png" alt="applogo" />
+                  </span>
+                  <span className="cd-home-2">
+                    <ChartdataHome className="" />
+                  </span>
+                </div>
+              </Col>
+              <Col>
+                <Login />
+              </Col>
+            </Row>
+          </Jumbotron>
+        </ContentWrapper>
+      </div>
+    );
+  }
 }
 
 App.Layout = BasePage;

styles/bootstrap/_card.scss

@@ -366,3 +366,16 @@
   border-width: 0.5px;
   border-color: rgb(124, 122, 122);
 }
+.cd-home-1{
+  display: inline;
+  position: relative;
+  // background-color: red;
+  // min-width: 300px;
+  float: left;
+}
+.cd-home-2{
+display: inline;
+// background-color: rgb(50, 0, 230);
+// min-width: 300px;
+float: right;
+}