+em{font-style: normal;}

+main img{margin-right: 1rem;}

+  gap: 2rem;

+.guardian-medicine{height: 16vh;}

+  background: #ffffff;

+  border-radius: 20px;

+/* .statistics-guardian:nth-child(1) {

+} */

+.main-guardian{margin-bottom: 3rem;}

+.battery-wrap{height: 10rem;}

+.battery-img{position: relative; padding: 1.5rem 0 1.5rem 3rem;}

+.battery-img img{position: absolute; display: none; box-shadow: 1px 1px 14px 1px rgba(0, 0, 0, 0.15); border-radius: 20px;}

+.battery-img img.show{display: block; }

+  font-size: 2rem;

+.battery p:nth-child(3){font-size: 1.5rem; padding-top: 0.7rem;}

+.react-calendar{width: 100%; border: none; height: 54vh;}

+.react-calendar__month-view__days{padding: 2rem 0;}

+.react-calendar__month-view__days button{padding: 2.5rem; border: 1px solid #fdede8; border-radius: 0;}

+.react-calendar__tile--active:enabled:hover, .react-calendar__tile--active:enabled:focus{background: #e26f49;}

+.react-calendar__tile--active{background: #e26f49;}

+.weather-info

+

+/* 보호자 복약 */

+.guardian-medicine  ul li{position: relative;}

+.guardian-medicine  ul li img{position: absolute; display: none;}

+.guardian-medicine  ul li img.show{display: block;}

+

+export default function CalendarComponent(props) {  

+import React from "react";

+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';

+import ChevronRightIcon from '@mui/icons-material/ChevronRight';

+import calendar from '../../resources/files/images/calendar.png';

+

+export default function DateDay() {

+  const [date, setDate] = React.useState();

+  function clock() {

+    const date = new Date();

+    const year = date.getFullYear();

+    const month = date.getMonth() + 1;

+    const day = date.getDate();

+    setDate(`${year}년 ${month}월 ${day}일 `);

+  }

+

+

+  React.useEffect(() => {

+    clock();

+  }, []);

+

+  return (

+    <div className="weather-info flex-center">

+      <div className="flex-start">

+      <ChevronLeftIcon sx={{ width: "33px",height:"33px", marginBottom:"0.8rem", color: "#a5a5a5" }}/>

+        <div id="fullDate">{date} <img src={calendar} alt="" /></div>

+        <ChevronRightIcon sx={{ width: "33px",height:"33px", marginBottom:"0.8rem", color: "#a5a5a5" }}/>

+      </div>

+    </div>

+  );

+}

+import React from "react";

+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';

+import ChevronRightIcon from '@mui/icons-material/ChevronRight';

+import calendar from '../../resources/files/images/calendar.png';

+

+export default function DateDay() {

+  const [date, setDate] = React.useState();

+  function clock() {

+    const date = new Date();

+    const year = date.getFullYear();

+    const month = date.getMonth() + 1;

+    setDate(`${year}년 ${month}월`);

+  }

+

+

+  React.useEffect(() => {

+    clock();

+  }, []);

+

+  return (

+    <div className="weather-info flex-center">

+      <ul className="flex-start">

+      <ChevronLeftIcon sx={{ width: "33px",height:"33px", marginBottom:"0.8rem", color: "#a5a5a5" }}/>

+        <li id="fullDate">{date} <img src={calendar} alt="" /></li>

+        <ChevronRightIcon sx={{ width: "33px",height:"33px", marginBottom:"0.8rem", color: "#a5a5a5" }}/>

+      </ul>

+    </div>

+  );

+}

+  font-size: 2.4rem;

+import styled from "styled-components";

+import React from "react";

+

+export default function TitleSmall({ title, explanation }) {

+  return (

+    <div className="flex-start">

+      <TitleStyle className="title">{title}</TitleStyle>

+      <Explanation>{explanation}</Explanation>

+    </div>

+  );

+}

+

+const TitleStyle = styled.h4`

+  font-size: 2rem;

+  font-weight: bold;

+  margin-right: 1rem;

+`;

+

+const Explanation = styled.p`

+  font-size: 1.5rem;

+  color: rgb(170 170 170);

+  padding-top: 0.5rem;

+`;

+import React, { Component } from "react";

+import * as am5 from "@amcharts/amcharts5";

+import * as am5xy from "@amcharts/amcharts5/xy";

+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

+

+class Chart6 extends Component {

+  componentDidMount() {

+    let root = am5.Root.new("chart6");

+

+

+    root._logo.dispose();

+// Set themes

+// https://www.amcharts.com/docs/v5/concepts/themes/

+root.setThemes([

+  am5themes_Animated.new(root)

+]);

+

+

+root.dateFormatter.setAll({

+  dateFormat: "yyyy-MM-dd",

+  dateFields: ["valueX"]

+});

+

+let data = [

+  {

+    date: "2021-01-01",

+    steps: 4561

+  },

+  {

+    date: "2021-01-02",

+    steps: 5687

+  },

+  {

+    date: "2021-01-03",

+    steps: 6348

+  },

+  {

+    date: "2021-01-04",

+    steps: 4878

+  },

+  {

+    date: "2021-01-05",

+    steps: 9867

+  },

+  {

+    date: "2021-01-06",

+    steps: 7561

+  },

+  {

+    date: "2021-01-07",

+    steps: 1287

+  },

+  {

+    date: "2021-01-08",

+    steps: 3298

+  },

+  {

+    date: "2021-01-09",

+    steps: 5697

+  },

+  {

+    date: "2021-01-10",

+    steps: 4878

+  },

+  {

+    date: "2021-01-11",

+    steps: 8788

+  },

+  {

+    date: "2021-01-12",

+    steps: 9560

+  },

+  {

+    date: "2021-01-13",

+    steps: 11687

+  },

+  {

+    date: "2021-01-14",

+    steps: 5878

+  },

+  {

+    date: "2021-01-15",

+    steps: 9789

+  },

+  {

+    date: "2021-01-16",

+    steps: 3987

+  },

+  {

+    date: "2021-01-17",

+    steps: 5898

+  },

+  {

+    date: "2021-01-18",

+    steps: 9878

+  },

+  {

+    date: "2021-01-19",

+    steps: 13687

+  },

+  {

+    date: "2021-01-20",

+    steps: 6789

+  },

+  {

+    date: "2021-01-21",

+    steps: 4531

+  },

+  {

+    date: "2021-01-22",

+    steps: 5856

+  },

+  {

+    date: "2021-01-23",

+    steps: 5737

+  },

+  {

+    date: "2021-01-24",

+    steps: 9987

+  },

+  {

+    date: "2021-01-25",

+    steps: 16457

+  },

+  {

+    date: "2021-01-26",

+    steps: 7878

+  },

+  {

+    date: "2021-01-27",

+    steps: 6845

+  },

+  {

+    date: "2021-01-28",

+    steps: 4659

+  },

+  {

+    date: "2021-01-29",

+    steps: 7892

+  },

+  {

+    date: "2021-01-30",

+    steps: 7362

+  },

+  {

+    date: "2021-01-31",

+    steps: 3268

+  }

+];

+

+// Create chart

+// https://www.amcharts.com/docs/v5/charts/xy-chart/

+let chart = root.container.children.push(

+  am5xy.XYChart.new(root, {

+    focusable: true,

+    panX: true,

+    panY: false,

+    wheelX: "panX",

+    wheelY: "none"

+  })

+);

+

+let easing = am5.ease.linear;

+

+// hide zoomout button

+chart.zoomOutButton.set("forceHidden", true);

+

+// add label

+chart.plotContainer.children.push(

+  am5.Label.new(root, { text: "Pan chart to change date", x: 100, y: 50 })

+);

+

+// Create axes

+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/

+let xRenderer = am5xy.AxisRendererX.new(root, {

+  minGridDistance: 50,

+  strokeOpacity: 0.2

+});

+xRenderer.grid.template.set("forceHidden", true);

+

+let xAxis = chart.xAxes.push(

+  am5xy.DateAxis.new(root, {

+    maxDeviation: 0.49,

+    snapTooltip: false,

+    baseInterval: {

+      timeUnit: "day",

+      count: 1

+    },

+    renderer: xRenderer,

+    tooltip: am5.Tooltip.new(root, {})

+  })

+);

+

+let yRenderer = am5xy.AxisRendererY.new(root, { inside: true });

+yRenderer.grid.template.set("forceHidden", true);

+

+let yAxis = chart.yAxes.push(

+  am5xy.ValueAxis.new(root, {

+    maxDeviation: 0,

+    renderer: yRenderer

+  })

+);

+

+// Add series

+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/

+let series = chart.series.push(

+  am5xy.ColumnSeries.new(root, {

+    xAxis: xAxis,

+    yAxis: yAxis,

+    valueYField: "steps",

+    valueXField: "date",

+    tooltip: am5.Tooltip.new(root, {

+      pointerOrientation: "vertical",

+      labelText: "{valueY}"

+    })

+  })

+);

+

+series.columns.template.setAll({

+  cornerRadiusTL: 15,

+  cornerRadiusTR: 15,

+  maxWidth: 30,

+  strokeOpacity: 0

+});

+

+series.columns.template.adapters.add("fill", function (fill, target) {

+  if (target.dataItem.get("valueY") < 6000) {

+    return am5.color(0xdadada);

+  }

+  return fill;

+});

+

+// Set up data processor to parse string dates

+// https://www.amcharts.com/docs/v5/concepts/data/#Pre_processing_data

+series.data.processor = am5.DataProcessor.new(root, {

+  dateFormat: "yyyy-MM-dd",

+  dateFields: ["date"]

+});

+

+series.data.setAll(data);

+

+// do not allow tooltip  to move horizontally

+series.get("tooltip").adapters.add("x", function (x) {

+  return chart.plotContainer.toGlobal({

+    x: chart.plotContainer.width() / 2,

+    y: 0

+  }).x;

+});

+

+// add ranges

+let goalRange = yAxis.createAxisRange(yAxis.makeDataItem({

+  value: 6000

+}));

+

+goalRange.get("grid").setAll({

+  forceHidden: false,

+  strokeOpacity: 0.2

+});

+

+let goalLabel = goalRange.get("label");

+

+goalLabel.setAll({

+  centerY: am5.p100,

+  centerX: am5.p100,

+  text: "Goal"

+});

+

+// put to other side

+goalLabel.adapters.add("x", function (x) {

+  return chart.plotContainer.width();

+});

+

+let goalRange2 = yAxis.createAxisRange(yAxis.makeDataItem({

+  value: 12000

+}));

+

+goalRange2.get("grid").setAll({

+  forceHidden: false,

+  strokeOpacity: 0.2

+});

+

+let goalLabel2 = goalRange2.get("label");

+

+goalLabel2.setAll({

+  centerY: am5.p100,

+  centerX: am5.p100,

+  text: "2 x Goal"

+});

+

+// put to other side

+goalLabel2.adapters.add("x", function (x) {

+  return chart.plotContainer.width();

+});

+

+// reposition when width changes

+chart.plotContainer.onPrivate("width", function () {

+  goalLabel.markDirtyPosition();

+  goalLabel2.markDirtyPosition();

+});

+

+// Add cursor

+// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/

+let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {

+  alwaysShow: true,

+  behavior: "none",

+  positionX: 0.5 // make it always be at the center

+}));

+cursor.lineY.set("visible", false);

+

+// zoom to last 11 days

+series.events.on("datavalidated", function () {

+  let toTime =

+    series.dataItems[series.dataItems.length - 1].get("valueX") +

+    am5.time.getDuration("day", 1);

+  let fromTime = series.dataItems[series.dataItems.length - 11].get("valueX");

+

+  xAxis.zoomToValues(fromTime, toTime);

+});

+

+// when plot are is released, round zoom to nearest days

+chart.plotContainer.events.on("globalpointerup", function () {

+  let dayDuration = am5.time.getDuration("day", 1);

+

+  let firstTime = am5.time

+    .round(new Date(series.dataItems[0].get("valueX")), "day", 1)

+    .getTime();

+  let lastTime =

+    series.dataItems[series.dataItems.length - 1].get("valueX") + dayDuration;

+  let totalTime = lastTime - firstTime;

+  let days = totalTime / dayDuration;

+

+  let roundedStart =

+    firstTime + Math.round(days * xAxis.get("start")) * dayDuration;

+  let roundedEnd =

+    firstTime + Math.round(days * xAxis.get("end")) * dayDuration;

+

+  xAxis.zoomToValues(roundedStart, roundedEnd);

+});

+

+// Make stuff animate on load

+// https://www.amcharts.com/docs/v5/concepts/animations/

+chart.appear(1000, 50);

+

+

+  }

+

+  componentWillUnmount() {

+    if (this.root) {

+      this.root.dispose();

+    }

+  }

+

+  render() {

+    return <div id="chart6" style={{ width: "100%", height: "22vh" }}></div>;

+  }

+}

+

+export default Chart6;

+import TitleSmall from "../../component/TitleSmall.jsx";

+import DateDay from "../../component/DateDay.jsx";

+import DateMonth from "../../component/DateMonth.jsx";

+import Chart6 from "../../component/chart/Chart6.jsx";

+import Senior from '../../../resources/files/images/senior.png';

+import battery from '../../../resources/files/images/battery.png';

+import zeropercent from '../../../resources/files/images/zeropercent.png';

+import pullpercent from '../../../resources/files/images/pullpercent.png';

+import twentypercent from '../../../resources/files/images/twentypercent.png';

+import fortypercent from '../../../resources/files/images/fortypercent.png';

+import eightytypercent from '../../../resources/files/images/eightypercent.png';

+import sixtytypercent from '../../../resources/files/images/sixtypercent.png';

+import calendar from '../../../resources/files/images/calendar.png';

+import temperature from '../../../resources/files/images/temperature.png';

+import medicine from '../../../resources/files/images/medicine.png';

+import calendarBig from '../../../resources/files/images/calendarBig.png';

+import mornon from '../../../resources/files/images/mornon.png';

+import mornoff from '../../../resources/files/images/mornoff.png';

+import lunchon from '../../../resources/files/images/lunchon.png';

+import lunchoff from '../../../resources/files/images/lunchoff.png';

+import dinneron from '../../../resources/files/images/dinneron.png';

+import dinneroff from '../../../resources/files/images/dinneroff.png';

+        <div className="flex-start main-guardian"><img src={Senior} alt="" /><Title title={"김복남 어르신"} explanation={"방문, 복약, 온도, 배터리 현황을 확인하세요."} /></div>

+          <div className=" statistics-guardian combine-left2 combine-middle-government">

+          <div className="flex-start margin-bottom2"><img src={calendarBig} alt="" /><TitleSmall title={"방문체크"} /></div>

+            <ul >         

+              <li>

+              <Calendar />

+              </li>     

+            </ul>

+          </div>

+          <div className=" statistics-guardian combine-right3">

+          <div className="flex-start margin-bottom2"><img src={temperature} alt="" /><TitleSmall title={"온도체크"} explanation={"댁내 온도가 적절한지 체크해보세요."}/></div>

+            <ul >

+              <li>

+                <DateMonth />

+                <Chart6 />

+            </ul>

+          </div>

+          

+          <div className="statistics-guardian combine-right3">

+          <div className="flex-start margin-bottom2"><img src={medicine} alt="" /><TitleSmall title={"복약체크"} explanation={"약을 잘 복용하고 계신지 체크해주세요."}/></div>

+            <ul className="">

+              <li className="guardian-medicine">

+                <DateDay />

+                <ul className="flex">

+                  <li>

+                    <img src={mornon} alt="" className="show"/>

+                    <img src={mornoff} alt="" />

+                  </li>

+                  <li>

+                    <img src={lunchon} alt="" />

+                    <img src={lunchoff} alt="" className="show"/>

+                  </li>

+                  <li>

+                    <img src={dinneron} alt="" />

+                    <img src={dinneroff} alt="" className="show"/>

+                  </li>

+                </ul>

+              </li>

+            </ul>

+          </div>

+          <div className="combine-left combine-all-government battery-wrap ">

+            <div className="battery flex-start"><img src={battery} alt="" /><p>현재 스마트 약상자의 배터리가 <em className="red">40</em>% 입니다.</p><p className="red">※충전이 필요합니다.</p></div> 

+            <div className="battery-img"> 

+              {/* 0%일때 */}

+              <img src={zeropercent} alt="" /> 

+              {/* 0~20%일때 */}

+              <img src={twentypercent} alt="" />

+              {/* 20~40%일때 */}

+              <img src={fortypercent} alt="" className="show"/>

+              {/* 40~60%일때 */}

+              <img src={sixtytypercent} alt="" />

+              {/* 60~80% 일때 */}

+              <img src={eightytypercent} alt="" />

+              {/* 80~100%일때 */}

+              <img src={pullpercent} alt="" />

+            </div>