
File name
Commit message
Commit date
2023-02-16
File name
Commit message
Commit date
File name
Commit message
Commit date
2023-02-16
File name
Commit message
Commit date
File name
Commit message
Commit date
import React from "react";
import ContentTitle from "../../../component/ContentTitle.jsx";
import SubTitle from "../../../component/SubTitle.jsx";
import Button from "../../../component/Button.jsx";
import Chart3 from "../../../component/chart/Chart3.jsx";
import LineColor from "./../../../component/chart/LineColor.jsx";
import Donut2 from "./../../../component/chart/Donut2.jsx";
import ToggleButton from "../../../component/ToggleButton.jsx";
import Chart from './../../../component/chart/Chart.jsx';
export default function MedicineStatistics() {
return (
<main>
<div className="content-wrap">
<ContentTitle contentTitle={"복약율 통계"} />
<div className="board-wrap" style={{ height: "calc(100% - 60px)" }}>
<div className="statistics-grid" style={{ height: "100%" }}>
<div>
<SubTitle
className="margin-bottom"
explanation={"토탈 복약율 통계"}
color={"#333333"}
/>
<div
style={{
border: "1px solid #eeeeee",
borderRadius: "0.5rem",
padding: "1rem",
height: "calc(100% - 47px)",
}}
>
<div className="flex-end">
<div className="flex flex30">
<input type="date" name="" id="" />
</div>
<div className="flex10">
<Button className={"green-btn"} btnName={"검색"} />
</div>
</div>
<Donut2 />
</div>
</div>
<div>
<div className="flex">
<SubTitle
className="margin-bottom"
explanation={"나이대별 복약율 통계"}
color={"#333333"}
/>
</div>
<div
style={{
border: "1px solid #eeeeee",
borderRadius: "0.5rem",
padding: "1rem",
height: "calc(100% - 47px)",
}}
>
<Chart3 />
</div>
</div>
<div>
<div className="flex">
<SubTitle
className="margin-bottom"
explanation={"주별, 월별 복약율 통계"}
color={"#333333"}
/>
<ToggleButton
btnName1={"주별"}
btnName2={"월별"}
/>
</div>
<div
style={{
border: "1px solid #eeeeee",
borderRadius: "0.5rem",
padding: "1rem",
height: "calc(100% - 47px)",
}}
>
<div className="flex-end">
<select name="" id="">
<option value="">1월</option>
<option value="">2월</option>
<option value="">3월</option>
<option value="">4월</option>
<option value="">5월</option>
<option value="">6월</option>
<option value="">7월</option>
<option value="">8월</option>
<option value="">9월</option>
<option value="">10월</option>
<option value="">11월</option>
<option value="">12월</option>
</select>
</div>
<Chart />
</div>
</div>
<div>
<div className="flex">
<SubTitle
className="margin-bottom"
explanation={"분기별 년별 복약율 통계"}
color={"#333333"}
/>
<ToggleButton
btnName1={"분기별"}
btnName2={"년별"}
/>
</div>
<div
style={{
border: "1px solid #eeeeee",
borderRadius: "0.5rem",
padding: "1rem",
height: "calc(100% - 47px)",
}}
>
<div className="flex-end">
<select name="" id="">
<option value="">2022</option>
<option value="">2023</option>
</select>
</div>
<LineColor />
</div>
</div>
</div>
</div>
</div>
</main>
);
}