Fakultas Ilmu Komputer UI

Commit fe984d0a authored by Muhammad Fairuzi Teguh's avatar Muhammad Fairuzi Teguh
Browse files

[GREEN] implement stok darah integration

parent 35ba4501
Pipeline #44831 passed with stages
in 1 minute and 44 seconds
import React from "react"
import ReactApexChart from "react-apexcharts"
import { apexOptions } from "../config"
import Row from "react-bootstrap/Row"
import Col from "react-bootstrap/Col"
import Row from "react-bootstrap/Row"
import { useQuery } from "react-query"
import { getStokDarah } from "../api"
import { apexOptions } from "../config"
import "./stokdonorchart.css"
import Spinner from "./spinner"
import ErrorRetry from "./error-retry"
export default function StokDonorChart() {
const state = {
series: [
{
name: "Rhesus Positif",
data: [263, 334, 232, 385],
},
{
name: "Rhesus Negatif",
data: [424, 463, 317, 345],
},
],
}
const { status, data, refetch, isFetching } = useQuery(
["stok-darah"],
queryKey => getStokDarah()
)
const series = data
? [{ name: "Darah", data: data.data.map(stok => stok.jumlah_stok) }]
: []
return (
<div>
<Row>
<Col sm="1" id="title">
<div className="">
<div className="title">
<h1>Stok Darah PMI Depok</h1>
</div>
</Col>
<Col>
<div id="chart">
<ReactApexChart
options={apexOptions}
series={state.series}
type="bar"
height={350}
/>
{isFetching ? (
<Spinner />
) : status === "error" ? (
<ErrorRetry retry={refetch} />
) : (
<ReactApexChart
options={apexOptions}
series={series}
type="bar"
height={350}
/>
)}
</div>
</Col>
</Row>
......
......@@ -50,10 +50,18 @@ const IndexPage = () => {
<SEO title="Home" />
<div className="mb-4">
<Row className="justify-content-center">
<Col xs={{ span: 12, order: 2 }} md={{ span: 10, order: 1 }}>
<Col
xs={{ span: 12, order: 2 }}
md={{ span: 9, order: 1 }}
lg={{ span: 10, order: 1 }}
>
<StokDonorChart />
</Col>
<Col xs={{ span: 4, order: 1 }} md={{ span: 2, order: 2 }}>
<Col
xs={{ span: 4, order: 1 }}
md={{ span: 3, order: 2 }}
lg={{ span: 2, order: 2 }}
>
<div className="calendar">
<div className="calendar__header">
<div className="text-left">{today.format("MMM")}</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment