Commit @e587547454bd5887d35991e91d721c649f26980f

박정하 2023-07-03

230703 박정하 복용률 관련 작업중

@e587547454bd5887d35991e91d721c649f26980f

8b64792

e587547

client/resources/css/main.css

--- client/resources/css/main.css

+++ client/resources/css/main.css

...	...	@@ -1594,4 +1594,9 @@
1594	1594
1595	1595	.span4 {
1596	1596	grid-column: span 4;
	1597	+}
	1598	+
	1599	+.table-size-fix {
	1600	+ max-height: 220px;
	1601	+ overflow-y: auto;
1597	1602	} (No newline at end of file)

8b64792

e587547

client/views/component/chart/Chart2_govern.jsx

--- client/views/component/chart/Chart2_govern.jsx

+++ client/views/component/chart/Chart2_govern.jsx


 import * as am5 from "@amcharts/amcharts5";
 import * as am5xy from "@amcharts/amcharts5/xy";
 import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+import CommonUtil from "../../../resources/js/CommonUtil";
 
-class Chart2 extends Component {
-  componentDidMount() {
+export default function Chart2({ data }) {
+  const createChart = () => {
+    console.log('createChart2 data : ', data);
+
     let root = am5.Root.new("Chart2");
-
     root._logo.dispose();
+
+
     // Set themes
     // https://www.amcharts.com/docs/v5/concepts/themes/
-    root.setThemes([am5themes_Animated.new(root)]);
+    root.setThemes([
+      am5themes_Animated.new(root)
+    ]);
+
 
     // Create chart
     // https://www.amcharts.com/docs/v5/charts/xy-chart/
-    let chart = root.container.children.push(
-      am5xy.XYChart.new(root, {
-        panX: true,
-        panY: true,
-        wheelX: "panX",
-        wheelY: "zoomX",
-        pinchZoomX: true,
-      })
-    );
+    let chart = root.container.children.push(am5xy.XYChart.new(root, {
+      panX: true,
+      panY: true,
+      wheelX: "panX",
+      wheelY: "zoomX",
+      pinchZoomX: true
+    }));
 
-    chart.get("colors").set("step", 3);
 
     // Add cursor
     // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
-    let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
+    let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
+      behavior: "none"
+    }));
     cursor.lineY.set("visible", false);
+
 
     // Create axes
     // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
-    let xAxis = chart.xAxes.push(
-      am5xy.DateAxis.new(root, {
-        maxDeviation: 0.3,
-        baseInterval: {
-          timeUnit: "day",
-          count: 1,
-        },
-        renderer: am5xy.AxisRendererX.new(root, {}),
-        tooltip: am5.Tooltip.new(root, {}),
-      })
-    );
+    let xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
+      maxDeviation: 0.2,
+      baseInterval: {
+        timeUnit: "day",
+        count: 1
+      },
+      renderer: am5xy.AxisRendererX.new(root, {}),
+      tooltip: am5.Tooltip.new(root, {})
+    }));
 
-    let yAxis = chart.yAxes.push(
-      am5xy.ValueAxis.new(root, {
-        maxDeviation: 0.3,
-        renderer: am5xy.AxisRendererY.new(root, {}),
-      })
-    );
+    let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+      renderer: am5xy.AxisRendererY.new(root, {})
+    }));
 
-    // Create series
+
+    // Add series
     // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
-    let series = chart.series.push(
-      am5xy.LineSeries.new(root, {
-        name: "Series 1",
-        xAxis: xAxis,
-        yAxis: yAxis,
-        valueYField: "value",
-        valueXField: "date",
-        tooltip: am5.Tooltip.new(root, {
-          labelText: "{valueY}",
-        }),
+    let series = chart.series.push(am5xy.LineSeries.new(root, {
+      name: "Series",
+      xAxis: xAxis,
+      yAxis: yAxis,
+      valueYField: "average",
+      valueXField: "date",
+      tooltip: am5.Tooltip.new(root, {
+        labelText: "{valueY}"
       })
-    );
-    series.strokes.template.setAll({
-      strokeWidth: 2,
-      strokeDasharray: [3, 3],
-    });
+    }));
+
+
+    // Add scrollbar
+    // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
+    chart.set("scrollbarX", am5.Scrollbar.new(root, {
+      orientation: "horizontal"
+    }));
+
 
     // Set data
-    let data = [
-      {
-        date: new Date(2022, 8).getTime(),
-        value: 0,
-      },
-      {
-        date: new Date(2022, 9).getTime(),
-        value: 10,
-      },
-      {
-        date: new Date(2022, 10).getTime(),
-        value: 10,
-      },
-      {
-        date: new Date(2022, 11).getTime(),
-        value: 20,
-      },
-      {
-        date: new Date(2022, 12).getTime(),
-        value: 50,
-      },
-      {
-        date: new Date(2023, 1).getTime(),
-        value: 30,
-      },
-      {
-        date: new Date(2023, 2).getTime(),
-        value: 70,
-      },
-      {
-        date: new Date(2023, 3).getTime(),
-        value: 60,
-      },
-      {
-        date: new Date(2023, 4).getTime(),
-        value: 80,
-      },
-      {
-        date: new Date(2023, 5).getTime(),
-        value: 70,
-      },
-      {
-        date: new Date(2023, 6).getTime(),
-        value: 80,
-      },
-    ];
-
     series.data.setAll(data);
+
 
     // Make stuff animate on load
     // https://www.amcharts.com/docs/v5/concepts/animations/
     series.appear(1000);
     chart.appear(1000, 100);
 
-    this.root = root;
   }
 
-  componentWillUnmount() {
-    if (this.root) {
-      this.root.dispose();
+  React.useEffect(() => {
+    console.log('React.useEffect chart2 data : ', data);
+    if (CommonUtil.isEmpty(data) == false) {
+      createChart();
     }
-  }
+  }, [data])
 
-  render() {
-    return <div id="Chart2" style={{ width: "100%", height: "15vh" }}></div>;
-  }
-}
-
-export default Chart2;
+  return (
+    <div id="Chart2" style={{ width: "100%", height: "15vh" }}></div>
+  )
+}

8b64792

e587547

client/views/component/chart/Chart5_agency.jsx

--- client/views/component/chart/Chart5_agency.jsx

+++ client/views/component/chart/Chart5_agency.jsx


   componentDidMount() {
     let root = am5.Root.new("Chart5");
 
-   
-// Set themes
-// https://www.amcharts.com/docs/v5/concepts/themes/
-root.setThemes([
-  am5themes_Animated.new(root)
-]);
+
+    // Set themes
+    // https://www.amcharts.com/docs/v5/concepts/themes/
+    root.setThemes([
+      am5themes_Animated.new(root)
+    ]);
 
 
-// Create chart
-// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/
-let chart = root.container.children.push(am5percent.SlicedChart.new(root, {
-  layout: root.verticalLayout
-}));
+    // Create chart
+    // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/
+    let chart = root.container.children.push(am5percent.SlicedChart.new(root, {
+      layout: root.verticalLayout
+    }));
 
 
-// Create series
-// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Series
-let series = chart.series.push(am5percent.PictorialStackedSeries.new(root, {
-  alignLabels: true,
-  orientation: "vertical",
-  valueField: "value",
-  categoryField: "category",
-  svgPath: "M53.5,476c0,14,6.833,21,20.5,21s20.5-7,20.5-21V287h21v189c0,14,6.834,21,20.5,21 c13.667,0,20.5-7,20.5-21V154h10v116c0,7.334,2.5,12.667,7.5,16s10.167,3.333,15.5,0s8-8.667,8-16V145c0-13.334-4.5-23.667-13.5-31 s-21.5-11-37.5-11h-82c-15.333,0-27.833,3.333-37.5,10s-14.5,17-14.5,31v133c0,6,2.667,10.333,8,13s10.5,2.667,15.5,0s7.5-7,7.5-13 V154h10V476 M61.5,42.5c0,11.667,4.167,21.667,12.5,30S92.333,85,104,85s21.667-4.167,30-12.5S146.5,54,146.5,42 c0-11.335-4.167-21.168-12.5-29.5C125.667,4.167,115.667,0,104,0S82.333,4.167,74,12.5S61.5,30.833,61.5,42.5z"
-}));
+    // Create series
+    // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Series
+    let series = chart.series.push(am5percent.PictorialStackedSeries.new(root, {
+      alignLabels: true,
+      orientation: "vertical",
+      valueField: "value",
+      categoryField: "category",
+      svgPath: "M53.5,476c0,14,6.833,21,20.5,21s20.5-7,20.5-21V287h21v189c0,14,6.834,21,20.5,21 c13.667,0,20.5-7,20.5-21V154h10v116c0,7.334,2.5,12.667,7.5,16s10.167,3.333,15.5,0s8-8.667,8-16V145c0-13.334-4.5-23.667-13.5-31 s-21.5-11-37.5-11h-82c-15.333,0-27.833,3.333-37.5,10s-14.5,17-14.5,31v133c0,6,2.667,10.333,8,13s10.5,2.667,15.5,0s7.5-7,7.5-13 V154h10V476 M61.5,42.5c0,11.667,4.167,21.667,12.5,30S92.333,85,104,85s21.667-4.167,30-12.5S146.5,54,146.5,42 c0-11.335-4.167-21.168-12.5-29.5C125.667,4.167,115.667,0,104,0S82.333,4.167,74,12.5S61.5,30.833,61.5,42.5z"
+    }));
 
-series.labelsContainer.set("width", 100);
-series.ticks.template.set("location", 0.6);
+    series.labelsContainer.set("width", 100);
+    series.ticks.template.set("location", 0.6);
 
 
-// Set data
-// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Setting_data
-series.data.setAll([
-  { value: 10, category: "부계면" },
-  { value: 9, category: "소보면" },
-  { value: 6, category: "군위읍" },
-  { value: 5, category: "우보면" },
-  { value: 4, category: "의흥면" },
-  { value: 3, category: "삼국유사면" },
-  { value: 3, category: "산성면" },
-  { value: 2, category: "효령면" }
-]);
+    // Set data
+    // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Setting_data
+    series.data.setAll([
+      { value: 10, category: "부계면" },
+      { value: 9, category: "소보면" },
+      { value: 6, category: "군위읍" },
+      { value: 5, category: "우보면" },
+      { value: 4, category: "의흥면" },
+      { value: 3, category: "삼국유사면" },
+      { value: 3, category: "산성면" },
+      { value: 2, category: "효령면" }
+    ]);
 
 
-// Play initial series animation
-// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
-chart.appear(1000, 100);
- // end am5.ready()
+    // Play initial series animation
+    // https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
+    chart.appear(1000, 100);
+    // end am5.ready()
     this.root = root;
   }
   componentWillUnmount() {

8b64792

e587547

client/views/component/chart/Chart8.jsx

--- client/views/component/chart/Chart8.jsx

+++ client/views/component/chart/Chart8.jsx


 import React, { Component } from "react";
 import * as am5 from "@amcharts/amcharts5";
 import * as am5xy from "@amcharts/amcharts5/xy";
-import * as am5percent from "@amcharts/amcharts5/percent";
 import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
 import CommonUtil from "../../../resources/js/CommonUtil";
 
 
-export default function Chart8() {
+export default function Chart8({ data }) {
   const createChart = () => {
+    console.log('createChart8 data : ', data);
+
+    /* Chart code */
+
+    // Create root element
+    // https://www.amcharts.com/docs/v5/getting-started/#Root_element
     let root = am5.Root.new("Chart8");
+    root._logo.dispose();
 
 
     // Set themes

 
     let yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
       maxDeviation: 0,
-      categoryField: "senior_name",
+      categoryField: "user_name",
       renderer: yRenderer,
       tooltip: am5.Tooltip.new(root, { themeTags: ["axis"] })
     }));

       name: "Series 1",
       xAxis: xAxis,
       yAxis: yAxis,
-      valueXField: "percent",
-      categoryYField: "senior_name",
+      valueXField: "average",
+      categoryYField: "user_name",
       tooltip: am5.Tooltip.new(root, {
         pointerOrientation: "left",
         labelText: "{valueX}"

 
 
     // Set data
-    let data = [
-      {
-        "senior_name": "보일",
-        "percent": 28
-      },
-      {
-        "senior_name": "보이",
-        "percent": 6
-      },
-      {
-        "senior_name": "보삼",
-        "percent": 16
-      },
-    ]
     yAxis.data.setAll(data);
     series.data.setAll(data);
     sortCategoryAxis();

   }
 
   React.useEffect(() => {
-    createChart();
-  }, [])
+    console.log('React.useEffect chart8 data : ', data);
+    if (CommonUtil.isEmpty(data) == false) {
+      createChart();
+    }
+  }, [data])
 
   return (
     <div id="Chart8" style={{ width: "100%", height: "100%" }}></div>
   )
-
 }

8b64792

client/views/component/chart/Chart8_government.jsx (deleted)

--- client/views/component/chart/Chart8_government.jsx

...	...	@@ -1,170 +0,0 @@
	1	-import React, { Component } from "react";
	2	-import * as am5 from "@amcharts/amcharts5";
	3	-import * as am5xy from "@amcharts/amcharts5/xy";
	4	-import * as am5percent from "@amcharts/amcharts5/percent";
	5	-import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	6	-import CommonUtil from "../../../resources/js/CommonUtil";
	7	-
	8	-
	9	-export default function Chart8(chartData) {
	10	- console.log("chartData : ", chartData.data)
	11	-
	12	- const createChart = (chartData) => {
	13	- let root = am5.Root.new("Chart8");
	14	-
	15	- // Set themes
	16	- // https://www.amcharts.com/docs/v5/concepts/themes/
	17	- root.setThemes([
	18	- am5themes_Animated.new(root)
	19	- ]);
	20	-
	21	-
	22	- // Create chart
	23	- // https://www.amcharts.com/docs/v5/charts/xy-chart/
	24	- let chart = root.container.children.push(am5xy.XYChart.new(root, {
	25	- panX: false,
	26	- panY: false,
	27	- wheelX: "none",
	28	- wheelY: "none"
	29	- }));
	30	-
	31	- // We don't want zoom-out button to appear while animating, so we hide it
	32	- chart.zoomOutButton.set("forceHidden", true);
	33	-
	34	-
	35	- // Create axes
	36	- // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	37	- let yRenderer = am5xy.AxisRendererY.new(root, {
	38	- minGridDistance: 30
	39	- });
	40	-
	41	- yRenderer.grid.template.set("location", 1);
	42	-
	43	- let yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
	44	- maxDeviation: 0,
	45	- categoryField: "senior_name",
	46	- renderer: yRenderer,
	47	- tooltip: am5.Tooltip.new(root, { themeTags: ["axis"] })
	48	- }));
	49	-
	50	- let xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
	51	- maxDeviation: 0,
	52	- min: 0,
	53	- extraMax: 0.1,
	54	- renderer: am5xy.AxisRendererX.new(root, {
	55	- strokeOpacity: 0.1
	56	- })
	57	- }));
	58	-
	59	-
	60	- // Add series
	61	- // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	62	- let series = chart.series.push(am5xy.ColumnSeries.new(root, {
	63	- name: "Series 1",
	64	- xAxis: xAxis,
	65	- yAxis: yAxis,
	66	- valueXField: "percent",
	67	- categoryYField: "user_name",
	68	- tooltip: am5.Tooltip.new(root, {
	69	- pointerOrientation: "left",
	70	- labelText: "{valueX}"
	71	- })
	72	- }));
	73	-
	74	-
	75	- // Rounded corners for columns
	76	- series.columns.template.setAll({
	77	- cornerRadiusTR: 5,
	78	- cornerRadiusBR: 5,
	79	- strokeOpacity: 0
	80	- });
	81	-
	82	- // Make each column to be of a different color
	83	- series.columns.template.adapters.add("fill", function (fill, target) {
	84	- return chart.get("colors").getIndex(series.columns.indexOf(target));
	85	- });
	86	-
	87	- series.columns.template.adapters.add("stroke", function (stroke, target) {
	88	- return chart.get("colors").getIndex(series.columns.indexOf(target));
	89	- });
	90	-
	91	-
	92	- // Set data
	93	- let data = chartData.data;
	94	- yAxis.data.setAll(data);
	95	- series.data.setAll(data);
	96	- sortCategoryAxis();
	97	-
	98	- // Get series item by category
	99	- function getSeriesItem(category) {
	100	- for (var i = 0; i < series.dataItems.length; i++) {
	101	- let dataItem = series.dataItems[i];
	102	- if (dataItem.get("categoryY") == category) {
	103	- return dataItem;
	104	- }
	105	- }
	106	- }
	107	-
	108	- chart.set("cursor", am5xy.XYCursor.new(root, {
	109	- behavior: "none",
	110	- xAxis: xAxis,
	111	- yAxis: yAxis
	112	- }));
	113	-
	114	-
	115	- // Axis sorting
	116	- function sortCategoryAxis() {
	117	-
	118	- // Sort by value
	119	- series.dataItems.sort(function (x, y) {
	120	- return x.get("valueX") - y.get("valueX"); // descending
	121	- //return y.get("valueY") - x.get("valueX"); // ascending
	122	- })
	123	-
	124	- // Go through each axis item
	125	- am5.array.each(yAxis.dataItems, function (dataItem) {
	126	- // get corresponding series item
	127	- let seriesDataItem = getSeriesItem(dataItem.get("category"));
	128	-
	129	- if (seriesDataItem) {
	130	- // get index of series data item
	131	- let index = series.dataItems.indexOf(seriesDataItem);
	132	- // calculate delta position
	133	- let deltaPosition = (index - dataItem.get("index", 0)) / series.dataItems.length;
	134	- // set index to be the same as series data item index
	135	- dataItem.set("index", index);
	136	- // set deltaPosition instanlty
	137	- dataItem.set("deltaPosition", -deltaPosition);
	138	- // animate delta position to 0
	139	- dataItem.animate({
	140	- key: "deltaPosition",
	141	- to: 0,
	142	- duration: 1000,
	143	- easing: am5.ease.out(am5.ease.cubic)
	144	- })
	145	- }
	146	- });
	147	-
	148	- // Sort axis items by index.
	149	- // This changes the order instantly, but as deltaPosition is set,
	150	- // they keep in the same places and then animate to true positions.
	151	- yAxis.dataItems.sort(function (x, y) {
	152	- return x.get("index") - y.get("index");
	153	- });
	154	- }
	155	-
	156	- // Make stuff animate on load
	157	- // https://www.amcharts.com/docs/v5/concepts/animations/
	158	- series.appear(1000);
	159	- chart.appear(1000, 100);
	160	- }
	161	-
	162	- React.useEffect(() => {
	163	- createChart(chartData);
	164	- }, [])
	165	-
	166	- return (
	167	- <div id="Chart8" style={{ width: "100%", height: "100%" }}></div>
	168	- )
	169	-
	170	-}(No newline at end of file)

8b64792

e587547

client/views/pages/main/Main_agency.jsx

--- client/views/pages/main/Main_agency.jsx

+++ client/views/pages/main/Main_agency.jsx

...	...	@@ -21,6 +21,8 @@
21	21	import temperatureAgency from "../../../resources/files/images/temperatureAgency.png";
22	22	import TitleSmall from "../../component/TitleSmall.jsx";
23	23
	24	+import CommonUtil from "../../../resources/js/CommonUtil.js";
	25	+
24	26	export default function Main2() {
25	27	//전역 변수 저장 객체
26	28	const state = useSelector((state) => { return state });
...	...	@@ -105,10 +107,85 @@
105	107	});
106	108	}
107	109
	110	+ // 최근 복용률
	111	+ const [medicationSelectListByNew, setMedicationSelectListByNew] = React.useState([]);
	112	+ // 최근 복용률 조회
	113	+ const seniorMedicationSelectListByNew = () => {
	114	+ fetch("/user/seniorMedicationSelectListByNew.json", {
	115	+ method: "POST",
	116	+ headers: {
	117	+ 'Content-Type': 'application/json; charset=UTF-8'
	118	+ },
	119	+ body: JSON.stringify({ "agency_id": state.loginUser['agency_id'] }),
	120	+ }).then((response) => response.json()).then((data) => {
	121	+ console.log("seniorMedicationSelectListByNew : ", data);
	122	+ setMedicationSelectListByNew(data)
	123	+ }).catch((error) => {
	124	+ console.log('seniorMedicationSelectListByNew() /user/seniorMedicationSelectListByNew.json error : ', error);
	125	+ });
	126	+ };
	127	+
	128	+ // 복용률 목록
	129	+ const [medicationSelectListByMonth, setMedicationSelectListByMonth] = React.useState([]);
	130	+ const [medicationSelectListByYear, setMedicationSelectListByYear] = React.useState([]);
	131	+ // 복용률 목록 조회
	132	+ const seniorMedicationSelectListByMonth = () => {
	133	+ let totalYearArr = [];
	134	+ let yearArr = [];
	135	+
	136	+ fetch("/user/seniorMedicationSelectListByMonth.json", {
	137	+ method: "POST",
	138	+ headers: {
	139	+ 'Content-Type': 'application/json; charset=UTF-8'
	140	+ },
	141	+ body: JSON.stringify({ "agency_id": state.loginUser['agency_id'] }),
	142	+ }).then((response) => response.json()).then((data) => {
	143	+ data.map((item, idx) => {
	144	+ item['year'] = item['medication_default_date'].substr(0, 4);
	145	+ item['month'] = item['medication_default_date'].substr(5, 2);
	146	+ totalYearArr.push(item['medication_default_date'].substr(0, 4));
	147	+ item['date'] = new Date(item['medication_default_date']);
	148	+ })
	149	+
	150	+ const setYearArr = [...new Set(totalYearArr)];
	151	+ console.log("totalYearArr: ", setYearArr);
	152	+
	153	+ setYearArr.map((year, yearIdx) => {
	154	+ let sum = 0;
	155	+ let count = 0;
	156	+ let avg = 0;
	157	+
	158	+ let monthArr = ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-'];
	159	+
	160	+ data.map((item, idx) => {
	161	+ if (item['year'] == year) {
	162	+ sum += item['average'];
	163	+ count++;
	164	+ monthArr[Number(item['month'])] = item['average'];
	165	+ }
	166	+ })
	167	+
	168	+ avg = parseInt(sum / count);
	169	+ yearArr.push({ "year": [year], "average": avg, "data": monthArr });
	170	+ })
	171	+
	172	+ console.log("yearArr : ", yearArr);
	173	+ setMedicationSelectListByYear(yearArr);
	174	+
	175	+ console.log("seniorMedicationSelectListByMonth : ", data);
	176	+ setMedicationSelectListByMonth(data);
	177	+ }).catch((error) => {
	178	+ console.log('seniorMedicationSelectListByMonth() /user/seniorMedicationSelectListByMonth.json error : ', error);
	179	+ });
	180	+ };
	181	+
	182	+
108	183	React.useEffect(() => {
109	184	agentSeniorCount();
110	185	temperatureRiskCount();
111	186	batteryRiskCount();
	187	+ seniorMedicationSelectListByNew();
	188	+ seniorMedicationSelectListByMonth();
112	189	}, []);
113	190
114	191	return (
...	...	@@ -177,81 +254,23 @@
177	254	</tr>
178	255	</thead>
179	256	<tbody>
180		- <tr>
181		- <td>2023</td>
182		- <td>87%</td>
183		- <td>86%</td>
184		- <td></td>
185		- <td></td>
186		- <td></td>
187		- <td></td>
188		- <td></td>
189		- <td></td>
190		- <td></td>
191		- <td></td>
192		- <td></td>
193		- <td></td>
194		- </tr>
195		- <tr>
196		- <td>2022</td>
197		- <td>83%</td>
198		- <td>81%</td>
199		- <td></td>
200		- <td></td>
201		- <td></td>
202		- <td></td>
203		- <td></td>
204		- <td></td>
205		- <td></td>
206		- <td></td>
207		- <td></td>
208		- <td></td>
209		- </tr>
210		- <tr>
211		- <td>2021</td>
212		- <td>81%</td>
213		- <td>80%</td>
214		- <td></td>
215		- <td></td>
216		- <td></td>
217		- <td></td>
218		- <td></td>
219		- <td></td>
220		- <td></td>
221		- <td></td>
222		- <td></td>
223		- <td></td>
224		- </tr>
225		- <tr>
226		- <td>2020</td>
227		- <td>82%</td>
228		- <td>83%</td>
229		- <td></td>
230		- <td></td>
231		- <td></td>
232		- <td></td>
233		- <td></td>
234		- <td></td>
235		- <td></td>
236		- <td></td>
237		- <td></td>
238		- <td></td>
239		- </tr>
240		- <tr>
241		- <td>2019</td>
242		- <td>80%</td>
243		- <td>81%</td>
244		- <td></td>
245		- <td></td>
246		- <td></td>
247		- <td></td>
248		- <td></td>
249		- <td></td>
250		- <td></td>
251		- <td></td>
252		- <td></td>
253		- <td></td>
254		- </tr>
	257	+ {medicationSelectListByYear.map((item, idx) => {
	258	+ return (
	259	+ <tr>
	260	+ <td>{item['year']}</td>
	261	+ <td>{item['average'] == '-' ? '-' : item['average'] + '%'}</td>
	262	+ {CommonUtil.isEmpty(item['data']) == false ? (
	263	+ item['data'].map((item1, idx1) => {
	264	+ return (
	265	+ <>
	266	+ <td>{item1 == '-' ? '-' : item1 + '%'}</td>
	267	+ </>
	268	+ )
	269	+ })
	270	+ ) : null}
	271	+ </tr>
	272	+ )
	273	+ })}
255	274	</tbody>
256	275	</table>
257	276	</div>
...	...	@@ -272,7 +291,7 @@
272	291	<div>
273	292	<div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"시니어 복용률 순위"} /></div>
274	293	<div className="content-box combine-left-government3 visitlist margin-bottom2">
275		- <Chart8 />
	294	+ <Chart8 data={medicationSelectListByNew} />
276	295	</div>
277	296	</div>
278	297	<div>

8b64792

e587547

client/views/pages/main/Main_agencyAdmin.jsx

--- client/views/pages/main/Main_agencyAdmin.jsx

+++ client/views/pages/main/Main_agencyAdmin.jsx


     className: 'leaflet-background-radius-icon'//leaflet-div-icon
   });
 
-
-  //특정 대상자의 실제 복약 정보
-  const [seniorMedicationList, setSeniorMedicationList] = React.useState([]);
-  const [showMedicationTimeCode, setShowMedicationTimeCode] = React.useState({});
-  //특정 대상자의 실제 복약 정보 목록 조회
-  const seniorMedicationSelectList = (seniorNum) => {
-    fetch("/user/seniorMedicationSelectList.json", {
+  //특정 대상자의 최근 복용률
+  const [medicationSelectListByNew, setMedicationSelectListByNew] = React.useState([]);
+  //특정 대상자의 최근 복용률 조회
+  const seniorMedicationSelectListByNew = () => {
+    fetch("/user/seniorMedicationSelectListByNew.json", {
       method: "POST",
       headers: {
         'Content-Type': 'application/json; charset=UTF-8'
       },
-      body: JSON.stringify(seniorNum['senior_id']),
+      body: JSON.stringify({ "agency_id": state.loginUser['agency_id'] }),
     }).then((response) => response.json()).then((data) => {
-      setSeniorMedicationList(data, seniorNum);
-      seniorMedicationSelectListByDay(data, seniorNum);
-      console.log("seniorMedicationSelectList: ", seniorMedicationSelectList)
+      console.log("seniorMedicationSelectListByNew : ", data);
+      setMedicationSelectListByNew(data)
     }).catch((error) => {
-      console.log('seniorMedicationSelectList() /user/seniorMedicationSelectList.json error : ', error);
+      console.log('seniorMedicationSelectListByNew() /user/seniorMedicationSelectListByNew.json error : ', error);
     });
   };
 
-  //특정 대상자의 일별, 복약시간별 복약 목록
-  const [stackChartData, setStackChartData] = React.useState([]);
-  //특정 대상자의 일별, 복약시간별 복약 목록 조회
-  const seniorMedicationSelectListByDay = (seniorMedicationList, seniorNum) => {
-    fetch("/user/seniorMedicationSelectListByDay.json", {
+  // 복용률 목록
+  const [medicationSelectListByMonth, setMedicationSelectListByMonth] = React.useState([]);
+  const [medicationSelectListByYear, setMedicationSelectListByYear] = React.useState([]);
+  // 복용률 목록 조회
+  const seniorMedicationSelectListByMonth = () => {
+    let totalYearArr = [];
+    let yearArr = [];
+
+    fetch("/user/seniorMedicationSelectListByMonth.json", {
       method: "POST",
       headers: {
         'Content-Type': 'application/json; charset=UTF-8'
       },
-      body: JSON.stringify(seniorNum),
+      body: JSON.stringify({ "agency_id": state.loginUser['agency_id'] }),
     }).then((response) => response.json()).then((data) => {
-      let showMedicationTimeCode = {};
-      for (let i = 0; i < seniorMedicationList.length; i++) {
-        showMedicationTimeCode[seniorMedicationList[i]] = true;
-      }
-      setShowMedicationTimeCode(showMedicationTimeCode);
+      data.map((item, idx) => {
+        item['year'] = item['medication_default_date'].substr(0, 4);
+        item['month'] = item['medication_default_date'].substr(5, 2);
+        totalYearArr.push(item['medication_default_date'].substr(0, 4));
+        item['date'] = new Date(item['medication_default_date']);
+      })
 
-      if (CommonUtil.isEmpty(data) == false) {
-        let _stackChartData = [];
-        for (let i = data.length - 1; i >= data.length - 3; i--) {
-          let sum = 0;      // 실제 복약량
-          let counter = 0;  // 복약해야하는 양
-          let chartData = {
-            xName: data[i]['medication_default_date']
-          };
-          for (let j = 0; j < data[i]['medication_time_code_list'].length; j++) {
-            if (CommonUtil.isEmpty(showMedicationTimeCode[data[i]['medication_time_code_list'][j]]) == false) {
-              chartData[data[i]['medication_time_code_list'][j]] = data[i]['medication_time_code_count_list'][j];
-              counter++;
-              if (i > 0) {
-                sum += data[i]['medication_time_code_count_list'][j];
-              }
-            } else {
-              continue;
-            }
+      const setYearArr = [...new Set(totalYearArr)];
+      console.log("totalYearArr: ", setYearArr);
+
+      setYearArr.map((year, yearIdx) => {
+        let sum = 0;
+        let count = 0;
+        let avg = 0;
+
+        let monthArr = ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-'];
+
+        data.map((item, idx) => {
+          if (item['year'] == year) {
+            sum += item['average'];
+            count++;
+            monthArr[Number(item['month'])] = item['average'];
           }
-          _stackChartData.push({ "sum": sum, "total": counter })
-        }
-        seniorNum.seniorMedicationList = _stackChartData;
-      }
+        })
+
+        avg = parseInt(sum / count);
+        yearArr.push({ "year": [year], "average": avg, "data": monthArr });
+      })
+
+      console.log("yearArr : ", yearArr);
+      setMedicationSelectListByYear(yearArr);
+
+      console.log("seniorMedicationSelectListByMonth : ", data);
+      setMedicationSelectListByMonth(data);
     }).catch((error) => {
-      console.log('seniorMedicationSelectListByDay() /user/seniorMedicationSelectListByDay.json error : ', error);
+      console.log('seniorMedicationSelectListByMonth() /user/seniorMedicationSelectListByMonth.json error : ', error);
     });
   };
 

     batteryRiskCount();
     visitByMonthList();
     seniorByAgent();
+    seniorMedicationSelectListByNew();
+    seniorMedicationSelectListByMonth();
   }, []);
 
   return (

             <Title title={`${cityName} 복용률 순위`} explanation={""} />
           </div>
           <div style={{ height: 'calc(100% - 60px)' }}>
-            <Chart8 data={stackChartData} />
-            {/* <Chart8 /> */}
+            <Chart8 data={medicationSelectListByNew} />
           </div>
         </div>
         <div className="content-box combine-left-government2">
           <div className="flex">
             <Title title={`${cityName} 복용률 평균`} explanation={"해당 지역의 대상자 복용률이 그래프로 보여집니다."} />
           </div>
-          <Chart2_govern />
+          <Chart2_govern data={medicationSelectListByMonth} />
         </div>
         <div className="content-box combine-right-government2">
           <div className="flex">

               </tr>
             </thead>
             <tbody>
-              <tr>
-                <td>2023</td>
-                <td>87%</td>
-                <td>86%</td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-              </tr>
-              <tr>
-                <td>2022</td>
-                <td>83%</td>
-                <td>81%</td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-              </tr>
-              <tr>
-                <td>2021</td>
-                <td>81%</td>
-                <td>80%</td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-              </tr>
-              <tr>
-                <td>2020</td>
-                <td>82%</td>
-                <td>83%</td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-              </tr>
-              <tr>
-                <td>2019</td>
-                <td>80%</td>
-                <td>81%</td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-              </tr>
+              {medicationSelectListByYear.map((item, idx) => {
+                return (
+                  <tr>
+                    <td>{item['year']}</td>
+                    <td>{item['average'] == '-' ? '-' : item['average'] + '%'}</td>
+                    {CommonUtil.isEmpty(item['data']) == false ? (
+                      item['data'].map((item1, idx1) => {
+                        return (
+                          <>
+                            <td>{item1 == '-' ? '-' : item1 + '%'}</td>
+                          </>
+                        )
+                      })
+                    ) : null}
+                  </tr>
+                )
+              })}
             </tbody>
           </table>
         </div>

8b64792

e587547

client/views/pages/main/Main_government.jsx

--- client/views/pages/main/Main_government.jsx

+++ client/views/pages/main/Main_government.jsx


 import Chart5 from "../../component/chart/Chart5.jsx";
 import Chart2_govern from "../../component/chart/Chart2_govern.jsx";
 import Donut1_govern from "../../component/chart/Donut1_govern.jsx";
-import Chart8 from "../../component/chart/Chart8_government.jsx";
+import Chart8 from "../../component/chart/Chart8.jsx";
 import RowChart_govern from "../../component/chart/RowChart_govern.jsx";
 import AddCircleIcon from "@mui/icons-material/AddCircle";
 import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';

   const [cityName, setCityName] = useState(state.loginUser['government_name']);
 
   //대상자(시니어) 목록 조회
-  const [seniorNum, setSeniorNum] = React.useState();
   const [senior, setSenior] = React.useState({ userList: [], userListCount: 0 });
   const seniorSelectList = () => {
     fetch("/user/userSelectList.json", {

     }).then((response) => response.json()).then((data) => {
       console.log("대상자(시니어) 목록 조회 : ", data);
       setSenior(data);
-      data.userList.map((item, idx) => {
-        item['senior_id'] = item['user_id']
-        seniorMedicationSelectList(item);
-      })
-      console.log(medicationList)
     }).catch((error) => {
       console.log('seniorSelectList() /user/userSelectList.json error : ', error);
     });

     });
   }
 
-  //특정 대상자의 실제 복약 정보
-  const [seniorMedicationList, setSeniorMedicationList] = React.useState([]);
-  const [showMedicationTimeCode, setShowMedicationTimeCode] = React.useState({});
-  //특정 대상자의 실제 복약 정보 목록 조회
-  const seniorMedicationSelectList = (seniorData) => {
-    fetch("/user/seniorMedicationSelectList.json", {
+  // 최근 복용률
+  const [medicationSelectListByNew, setMedicationSelectListByNew] = React.useState([]);
+  // 최근 복용률 조회
+  const seniorMedicationSelectListByNew = () => {
+    fetch("/user/seniorMedicationSelectListByNew.json", {
       method: "POST",
       headers: {
         'Content-Type': 'application/json; charset=UTF-8'
       },
-      body: JSON.stringify(seniorData),
+      body: JSON.stringify({ "government_id": state.loginUser['government_id'] }),
     }).then((response) => response.json()).then((data) => {
-      setSeniorMedicationList(data);
-      seniorMedicationSelectListByDay(data, seniorData);
+      console.log("seniorMedicationSelectListByNew : ", data);
+      setMedicationSelectListByNew(data)
     }).catch((error) => {
-      console.log('seniorMedicationSelectList() /user/seniorMedicationSelectList.json error : ', error);
+      console.log('seniorMedicationSelectListByNew() /user/seniorMedicationSelectListByNew.json error : ', error);
     });
   };
 
-  //특정 대상자의 일별, 복약시간별 복약 목록
-  const [medicationList, setMedicationList] = React.useState([]);
-  //특정 대상자의 일별, 복약시간별 복약 목록 조회
-  const seniorMedicationSelectListByDay = (seniorMedicationList, seniorData) => {
-    fetch("/user/seniorMedicationSelectListByDay.json", {
+  // 복용률 목록
+  const [medicationSelectListByMonth, setMedicationSelectListByMonth] = React.useState([]);
+  const [medicationSelectListByYear, setMedicationSelectListByYear] = React.useState([]);
+  // 복용률 목록 조회
+  const seniorMedicationSelectListByMonth = () => {
+    let totalYearArr = [];
+    let yearArr = [];
+
+    fetch("/user/seniorMedicationSelectListByMonth.json", {
       method: "POST",
       headers: {
         'Content-Type': 'application/json; charset=UTF-8'
       },
-      body: JSON.stringify(seniorData),
+      body: JSON.stringify({ "government_id": state.loginUser['government_id'] }),
     }).then((response) => response.json()).then((data) => {
-      let showMedicationTimeCode = {};
-      for (let i = 0; i < seniorMedicationList.length; i++) {
-        showMedicationTimeCode[seniorMedicationList[i]] = true;
-      }
-      setShowMedicationTimeCode(showMedicationTimeCode);
+      data.map((item, idx) => {
+        item['year'] = item['medication_default_date'].substr(0, 4);
+        item['month'] = item['medication_default_date'].substr(5, 2);
+        totalYearArr.push(item['medication_default_date'].substr(0, 4));
+        item['date'] = new Date(item['medication_default_date']);
+      })
 
-      if (CommonUtil.isEmpty(data) == false) {
-        let _stackChartData = [];
-        let lenghs = 0;
-        if (data.length < 30) {
-          lenghs = data.length
-        } else {
-          lenghs = data.length - 30
-        }
-        let sum = 0;      // 실제 복약량
-        let counter = 0;  // 복약해야하는 양
-        let percent = 0;  // 복용률
-        for (let i = data.length - 1; i >= lenghs; i--) {
-          for (let j = 0; j < data[i]['medication_time_code_list'].length; j++) {
-            if (CommonUtil.isEmpty(showMedicationTimeCode[data[i]['medication_time_code_list'][j]]) == false) {
-              counter++;
-              if (i > 0) {
-                sum += data[i]['medication_time_code_count_list'][j];
-              }
-            } else {
-              continue;
-            }
+      const setYearArr = [...new Set(totalYearArr)];
+      console.log("totalYearArr: ", setYearArr);
+
+      setYearArr.map((year, yearIdx) => {
+        let sum = 0;
+        let count = 0;
+        let avg = 0;
+
+        let monthArr = ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-'];
+
+        data.map((item, idx) => {
+          if (item['year'] == year) {
+            sum += item['average'];
+            count++;
+            monthArr[Number(item['month'])] = item['average'];
           }
-        }
-        if (sum == 0 || counter == 0) {
-          percent = 0
-        } else {
-          percent = Math.floor((sum / counter) * 100);
-        }
-        _stackChartData = { "user_name": seniorData['user_name'], "percent": percent }
-        setMedicationList(_stackChartData);
-      }
+        })
+
+        avg = parseInt(sum / count);
+        yearArr.push({ "year": [year], "average": avg, "data": monthArr });
+      })
+
+      console.log("yearArr : ", yearArr);
+      setMedicationSelectListByYear(yearArr);
+
+      console.log("seniorMedicationSelectListByMonth : ", data);
+      setMedicationSelectListByMonth(data);
     }).catch((error) => {
-      console.log('seniorMedicationSelectListByDay() /user/seniorMedicationSelectListByDay.json error : ', error);
+      console.log('seniorMedicationSelectListByMonth() /user/seniorMedicationSelectListByMonth.json error : ', error);
     });
   };
 
 
   function updateList(agencyList, countList) {
-
     const result = [];
     for (let i = 0; i < agencyList.length; i++) {
       const agency = agencyList[i];

     visitByMonthList();
     equipmentByAgency();
     seniorByAgency();
+    seniorMedicationSelectListByNew();
+    seniorMedicationSelectListByMonth();
   }, []);
-
 
   return (
     <main>

             <Title title={`${cityName}  복용률 순위`} />
           </div>
           <div style={{ height: 'calc(100% - 60px)' }}>
-            <Chart8 data={medicationList} />
+            <Chart8 data={medicationSelectListByNew} />
           </div>
         </div>
         <div className="content-box combine-left-government2">
           <div className="flex">
             <Title title={`${cityName} 복용률 평균`} explanation={"해당 지역의 대상자 복용률이 그래프로 보여집니다."} />
           </div>
-          <Chart2_govern />
+          <Chart2_govern data={medicationSelectListByMonth} />
         </div>
         <div className="content-box combine-right-government2">
           <div className="flex">

           </div>
           <Donut1_govern data={equipmentUsage} />
         </div>
-        <div className="content-box span4">
+        <div className="content-box span4 table-size-fix">
           <table className="visit-data-table">
             <thead>
               <tr>

               </tr>
             </thead>
             <tbody>
-              <tr>
-                <td>2023</td>
-                <td>87%</td>
-                <td>86%</td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-              </tr>
-              <tr>
-                <td>2022</td>
-                <td>83%</td>
-                <td>81%</td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-              </tr>
-              <tr>
-                <td>2021</td>
-                <td>81%</td>
-                <td>80%</td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-              </tr>
-              <tr>
-                <td>2020</td>
-                <td>82%</td>
-                <td>83%</td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-              </tr>
-              <tr>
-                <td>2019</td>
-                <td>80%</td>
-                <td>81%</td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-              </tr>
+              {medicationSelectListByYear.map((item, idx) => {
+                return (
+                  <tr>
+                    <td>{item['year']}</td>
+                    <td>{item['average'] == '-' ? '-' : item['average'] + '%'}</td>
+                    {CommonUtil.isEmpty(item['data']) == false ? (
+                      item['data'].map((item1, idx1) => {
+                        return (
+                          <>
+                            <td>{item1 == '-' ? '-' : item1 + '%'}</td>
+                          </>
+                        )
+                      })
+                    ) : null}
+                  </tr>
+                )
+              })}
             </tbody>
           </table>
         </div>

Add a comment

Open 0
Closed 0

List

...	...	@@ -2,142 +2,99 @@
2	2	import * as am5 from "@amcharts/amcharts5";
3	3	import * as am5xy from "@amcharts/amcharts5/xy";
4	4	import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	5	+import CommonUtil from "../../../resources/js/CommonUtil";
5	6
6		-class Chart2 extends Component {
7		- componentDidMount() {
	7	+export default function Chart2({ data }) {
	8	+ const createChart = () => {
	9	+ console.log('createChart2 data : ', data);
	10	+
8	11	let root = am5.Root.new("Chart2");
9		-
10	12	root._logo.dispose();
	13	+
	14	+
11	15	// Set themes
12	16	// https://www.amcharts.com/docs/v5/concepts/themes/
13		- root.setThemes([am5themes_Animated.new(root)]);
	17	+ root.setThemes([
	18	+ am5themes_Animated.new(root)
	19	+ ]);
	20	+
14	21
15	22	// Create chart
16	23	// https://www.amcharts.com/docs/v5/charts/xy-chart/
17		- let chart = root.container.children.push(
18		- am5xy.XYChart.new(root, {
19		- panX: true,
20		- panY: true,
21		- wheelX: "panX",
22		- wheelY: "zoomX",
23		- pinchZoomX: true,
24		- })
25		- );
	24	+ let chart = root.container.children.push(am5xy.XYChart.new(root, {
	25	+ panX: true,
	26	+ panY: true,
	27	+ wheelX: "panX",
	28	+ wheelY: "zoomX",
	29	+ pinchZoomX: true
	30	+ }));
26	31
27		- chart.get("colors").set("step", 3);
28	32
29	33	// Add cursor
30	34	// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
31		- let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
	35	+ let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
	36	+ behavior: "none"
	37	+ }));
32	38	cursor.lineY.set("visible", false);
	39	+
33	40
34	41	// Create axes
35	42	// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
36		- let xAxis = chart.xAxes.push(
37		- am5xy.DateAxis.new(root, {
38		- maxDeviation: 0.3,
39		- baseInterval: {
40		- timeUnit: "day",
41		- count: 1,
42		- },
43		- renderer: am5xy.AxisRendererX.new(root, {}),
44		- tooltip: am5.Tooltip.new(root, {}),
45		- })
46		- );
	43	+ let xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
	44	+ maxDeviation: 0.2,
	45	+ baseInterval: {
	46	+ timeUnit: "day",
	47	+ count: 1
	48	+ },
	49	+ renderer: am5xy.AxisRendererX.new(root, {}),
	50	+ tooltip: am5.Tooltip.new(root, {})
	51	+ }));
47	52
48		- let yAxis = chart.yAxes.push(
49		- am5xy.ValueAxis.new(root, {
50		- maxDeviation: 0.3,
51		- renderer: am5xy.AxisRendererY.new(root, {}),
52		- })
53		- );
	53	+ let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
	54	+ renderer: am5xy.AxisRendererY.new(root, {})
	55	+ }));
54	56
55		- // Create series
	57	+
	58	+ // Add series
56	59	// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
57		- let series = chart.series.push(
58		- am5xy.LineSeries.new(root, {
59		- name: "Series 1",
60		- xAxis: xAxis,
61		- yAxis: yAxis,
62		- valueYField: "value",
63		- valueXField: "date",
64		- tooltip: am5.Tooltip.new(root, {
65		- labelText: "{valueY}",
66		- }),
	60	+ let series = chart.series.push(am5xy.LineSeries.new(root, {
	61	+ name: "Series",
	62	+ xAxis: xAxis,
	63	+ yAxis: yAxis,
	64	+ valueYField: "average",
	65	+ valueXField: "date",
	66	+ tooltip: am5.Tooltip.new(root, {
	67	+ labelText: "{valueY}"
67	68	})
68		- );
69		- series.strokes.template.setAll({
70		- strokeWidth: 2,
71		- strokeDasharray: [3, 3],
72		- });
	69	+ }));
	70	+
	71	+
	72	+ // Add scrollbar
	73	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
	74	+ chart.set("scrollbarX", am5.Scrollbar.new(root, {
	75	+ orientation: "horizontal"
	76	+ }));
	77	+
73	78
74	79	// Set data
75		- let data = [
76		- {
77		- date: new Date(2022, 8).getTime(),
78		- value: 0,
79		- },
80		- {
81		- date: new Date(2022, 9).getTime(),
82		- value: 10,
83		- },
84		- {
85		- date: new Date(2022, 10).getTime(),
86		- value: 10,
87		- },
88		- {
89		- date: new Date(2022, 11).getTime(),
90		- value: 20,
91		- },
92		- {
93		- date: new Date(2022, 12).getTime(),
94		- value: 50,
95		- },
96		- {
97		- date: new Date(2023, 1).getTime(),
98		- value: 30,
99		- },
100		- {
101		- date: new Date(2023, 2).getTime(),
102		- value: 70,
103		- },
104		- {
105		- date: new Date(2023, 3).getTime(),
106		- value: 60,
107		- },
108		- {
109		- date: new Date(2023, 4).getTime(),
110		- value: 80,
111		- },
112		- {
113		- date: new Date(2023, 5).getTime(),
114		- value: 70,
115		- },
116		- {
117		- date: new Date(2023, 6).getTime(),
118		- value: 80,
119		- },
120		- ];
121		-
122	80	series.data.setAll(data);
	81	+
123	82
124	83	// Make stuff animate on load
125	84	// https://www.amcharts.com/docs/v5/concepts/animations/
126	85	series.appear(1000);
127	86	chart.appear(1000, 100);
128	87
129		- this.root = root;
130	88	}
131	89
132		- componentWillUnmount() {
133		- if (this.root) {
134		- this.root.dispose();
	90	+ React.useEffect(() => {
	91	+ console.log('React.useEffect chart2 data : ', data);
	92	+ if (CommonUtil.isEmpty(data) == false) {
	93	+ createChart();
135	94	}
136		- }
	95	+ }, [data])
137	96
138		- render() {
139		- return <div id="Chart2" style={{ width: "100%", height: "15vh" }}></div>;
140		- }
141		-}
142		-
143		-export default Chart2;
	97	+ return (
	98	+ <div id="Chart2" style={{ width: "100%", height: "15vh" }}></div>
	99	+ )
	100	+} (No newline at end of file)

...	...	@@ -7,53 +7,53 @@
7	7	componentDidMount() {
8	8	let root = am5.Root.new("Chart5");
9	9
10		-
11		-// Set themes
12		-// https://www.amcharts.com/docs/v5/concepts/themes/
13		-root.setThemes([
14		- am5themes_Animated.new(root)
15		-]);
	10	+
	11	+ // Set themes
	12	+ // https://www.amcharts.com/docs/v5/concepts/themes/
	13	+ root.setThemes([
	14	+ am5themes_Animated.new(root)
	15	+ ]);
16	16
17	17
18		-// Create chart
19		-// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/
20		-let chart = root.container.children.push(am5percent.SlicedChart.new(root, {
21		- layout: root.verticalLayout
22		-}));
	18	+ // Create chart
	19	+ // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/
	20	+ let chart = root.container.children.push(am5percent.SlicedChart.new(root, {
	21	+ layout: root.verticalLayout
	22	+ }));
23	23
24	24
25		-// Create series
26		-// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Series
27		-let series = chart.series.push(am5percent.PictorialStackedSeries.new(root, {
28		- alignLabels: true,
29		- orientation: "vertical",
30		- valueField: "value",
31		- categoryField: "category",
32		- svgPath: "M53.5,476c0,14,6.833,21,20.5,21s20.5-7,20.5-21V287h21v189c0,14,6.834,21,20.5,21 c13.667,0,20.5-7,20.5-21V154h10v116c0,7.334,2.5,12.667,7.5,16s10.167,3.333,15.5,0s8-8.667,8-16V145c0-13.334-4.5-23.667-13.5-31 s-21.5-11-37.5-11h-82c-15.333,0-27.833,3.333-37.5,10s-14.5,17-14.5,31v133c0,6,2.667,10.333,8,13s10.5,2.667,15.5,0s7.5-7,7.5-13 V154h10V476 M61.5,42.5c0,11.667,4.167,21.667,12.5,30S92.333,85,104,85s21.667-4.167,30-12.5S146.5,54,146.5,42 c0-11.335-4.167-21.168-12.5-29.5C125.667,4.167,115.667,0,104,0S82.333,4.167,74,12.5S61.5,30.833,61.5,42.5z"
33		-}));
	25	+ // Create series
	26	+ // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Series
	27	+ let series = chart.series.push(am5percent.PictorialStackedSeries.new(root, {
	28	+ alignLabels: true,
	29	+ orientation: "vertical",
	30	+ valueField: "value",
	31	+ categoryField: "category",
	32	+ svgPath: "M53.5,476c0,14,6.833,21,20.5,21s20.5-7,20.5-21V287h21v189c0,14,6.834,21,20.5,21 c13.667,0,20.5-7,20.5-21V154h10v116c0,7.334,2.5,12.667,7.5,16s10.167,3.333,15.5,0s8-8.667,8-16V145c0-13.334-4.5-23.667-13.5-31 s-21.5-11-37.5-11h-82c-15.333,0-27.833,3.333-37.5,10s-14.5,17-14.5,31v133c0,6,2.667,10.333,8,13s10.5,2.667,15.5,0s7.5-7,7.5-13 V154h10V476 M61.5,42.5c0,11.667,4.167,21.667,12.5,30S92.333,85,104,85s21.667-4.167,30-12.5S146.5,54,146.5,42 c0-11.335-4.167-21.168-12.5-29.5C125.667,4.167,115.667,0,104,0S82.333,4.167,74,12.5S61.5,30.833,61.5,42.5z"
	33	+ }));
34	34
35		-series.labelsContainer.set("width", 100);
36		-series.ticks.template.set("location", 0.6);
	35	+ series.labelsContainer.set("width", 100);
	36	+ series.ticks.template.set("location", 0.6);
37	37
38	38
39		-// Set data
40		-// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Setting_data
41		-series.data.setAll([
42		- { value: 10, category: "부계면" },
43		- { value: 9, category: "소보면" },
44		- { value: 6, category: "군위읍" },
45		- { value: 5, category: "우보면" },
46		- { value: 4, category: "의흥면" },
47		- { value: 3, category: "삼국유사면" },
48		- { value: 3, category: "산성면" },
49		- { value: 2, category: "효령면" }
50		-]);
	39	+ // Set data
	40	+ // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Setting_data
	41	+ series.data.setAll([
	42	+ { value: 10, category: "부계면" },
	43	+ { value: 9, category: "소보면" },
	44	+ { value: 6, category: "군위읍" },
	45	+ { value: 5, category: "우보면" },
	46	+ { value: 4, category: "의흥면" },
	47	+ { value: 3, category: "삼국유사면" },
	48	+ { value: 3, category: "산성면" },
	49	+ { value: 2, category: "효령면" }
	50	+ ]);
51	51
52	52
53		-// Play initial series animation
54		-// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
55		-chart.appear(1000, 100);
56		- // end am5.ready()
	53	+ // Play initial series animation
	54	+ // https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
	55	+ chart.appear(1000, 100);
	56	+ // end am5.ready()
57	57	this.root = root;
58	58	}
59	59	componentWillUnmount() {

...	...	@@ -1,14 +1,20 @@
1	1	import React, { Component } from "react";
2	2	import * as am5 from "@amcharts/amcharts5";
3	3	import * as am5xy from "@amcharts/amcharts5/xy";
4		-import * as am5percent from "@amcharts/amcharts5/percent";
5	4	import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
6	5	import CommonUtil from "../../../resources/js/CommonUtil";
7	6
8	7
9		-export default function Chart8() {
	8	+export default function Chart8({ data }) {
10	9	const createChart = () => {
	10	+ console.log('createChart8 data : ', data);
	11	+
	12	+ /* Chart code */
	13	+
	14	+ // Create root element
	15	+ // https://www.amcharts.com/docs/v5/getting-started/#Root_element
11	16	let root = am5.Root.new("Chart8");
	17	+ root._logo.dispose();
12	18
13	19
14	20	// Set themes
...	...	@@ -41,7 +47,7 @@
41	47
42	48	let yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
43	49	maxDeviation: 0,
44		- categoryField: "senior_name",
	50	+ categoryField: "user_name",
45	51	renderer: yRenderer,
46	52	tooltip: am5.Tooltip.new(root, { themeTags: ["axis"] })
47	53	}));
...	...	@@ -62,8 +68,8 @@
62	68	name: "Series 1",
63	69	xAxis: xAxis,
64	70	yAxis: yAxis,
65		- valueXField: "percent",
66		- categoryYField: "senior_name",
	71	+ valueXField: "average",
	72	+ categoryYField: "user_name",
67	73	tooltip: am5.Tooltip.new(root, {
68	74	pointerOrientation: "left",
69	75	labelText: "{valueX}"
...	...	@@ -89,20 +95,6 @@
89	95
90	96
91	97	// Set data
92		- let data = [
93		- {
94		- "senior_name": "보일",
95		- "percent": 28
96		- },
97		- {
98		- "senior_name": "보이",
99		- "percent": 6
100		- },
101		- {
102		- "senior_name": "보삼",
103		- "percent": 16
104		- },
105		- ]
106	98	yAxis.data.setAll(data);
107	99	series.data.setAll(data);
108	100	sortCategoryAxis();
...	...	@@ -172,11 +164,13 @@
172	164	}
173	165
174	166	React.useEffect(() => {
175		- createChart();
176		- }, [])
	167	+ console.log('React.useEffect chart8 data : ', data);
	168	+ if (CommonUtil.isEmpty(data) == false) {
	169	+ createChart();
	170	+ }
	171	+ }, [data])
177	172
178	173	return (
179	174	<div id="Chart8" style={{ width: "100%", height: "100%" }}></div>
180	175	)
181		-
182	176	} (No newline at end of file)

...	...	@@ -163,69 +163,75 @@
163	163	className: 'leaflet-background-radius-icon'//leaflet-div-icon
164	164	});
165	165
166		-
167		- //특정 대상자의 실제 복약 정보
168		- const [seniorMedicationList, setSeniorMedicationList] = React.useState([]);
169		- const [showMedicationTimeCode, setShowMedicationTimeCode] = React.useState({});
170		- //특정 대상자의 실제 복약 정보 목록 조회
171		- const seniorMedicationSelectList = (seniorNum) => {
172		- fetch("/user/seniorMedicationSelectList.json", {
	166	+ //특정 대상자의 최근 복용률
	167	+ const [medicationSelectListByNew, setMedicationSelectListByNew] = React.useState([]);
	168	+ //특정 대상자의 최근 복용률 조회
	169	+ const seniorMedicationSelectListByNew = () => {
	170	+ fetch("/user/seniorMedicationSelectListByNew.json", {
173	171	method: "POST",
174	172	headers: {
175	173	'Content-Type': 'application/json; charset=UTF-8'
176	174	},
177		- body: JSON.stringify(seniorNum['senior_id']),
	175	+ body: JSON.stringify({ "agency_id": state.loginUser['agency_id'] }),
178	176	}).then((response) => response.json()).then((data) => {
179		- setSeniorMedicationList(data, seniorNum);
180		- seniorMedicationSelectListByDay(data, seniorNum);
181		- console.log("seniorMedicationSelectList: ", seniorMedicationSelectList)
	177	+ console.log("seniorMedicationSelectListByNew : ", data);
	178	+ setMedicationSelectListByNew(data)
182	179	}).catch((error) => {
183		- console.log('seniorMedicationSelectList() /user/seniorMedicationSelectList.json error : ', error);
	180	+ console.log('seniorMedicationSelectListByNew() /user/seniorMedicationSelectListByNew.json error : ', error);
184	181	});
185	182	};
186	183
187		- //특정 대상자의 일별, 복약시간별 복약 목록
188		- const [stackChartData, setStackChartData] = React.useState([]);
189		- //특정 대상자의 일별, 복약시간별 복약 목록 조회
190		- const seniorMedicationSelectListByDay = (seniorMedicationList, seniorNum) => {
191		- fetch("/user/seniorMedicationSelectListByDay.json", {
	184	+ // 복용률 목록
	185	+ const [medicationSelectListByMonth, setMedicationSelectListByMonth] = React.useState([]);
	186	+ const [medicationSelectListByYear, setMedicationSelectListByYear] = React.useState([]);
	187	+ // 복용률 목록 조회
	188	+ const seniorMedicationSelectListByMonth = () => {
	189	+ let totalYearArr = [];
	190	+ let yearArr = [];
	191	+
	192	+ fetch("/user/seniorMedicationSelectListByMonth.json", {
192	193	method: "POST",
193	194	headers: {
194	195	'Content-Type': 'application/json; charset=UTF-8'
195	196	},
196		- body: JSON.stringify(seniorNum),
	197	+ body: JSON.stringify({ "agency_id": state.loginUser['agency_id'] }),
197	198	}).then((response) => response.json()).then((data) => {
198		- let showMedicationTimeCode = {};
199		- for (let i = 0; i < seniorMedicationList.length; i++) {
200		- showMedicationTimeCode[seniorMedicationList[i]] = true;
201		- }
202		- setShowMedicationTimeCode(showMedicationTimeCode);
	199	+ data.map((item, idx) => {
	200	+ item['year'] = item['medication_default_date'].substr(0, 4);
	201	+ item['month'] = item['medication_default_date'].substr(5, 2);
	202	+ totalYearArr.push(item['medication_default_date'].substr(0, 4));
	203	+ item['date'] = new Date(item['medication_default_date']);
	204	+ })
203	205
204		- if (CommonUtil.isEmpty(data) == false) {
205		- let _stackChartData = [];
206		- for (let i = data.length - 1; i >= data.length - 3; i--) {
207		- let sum = 0; // 실제 복약량
208		- let counter = 0; // 복약해야하는 양
209		- let chartData = {
210		- xName: data[i]['medication_default_date']
211		- };
212		- for (let j = 0; j < data[i]['medication_time_code_list'].length; j++) {
213		- if (CommonUtil.isEmpty(showMedicationTimeCode[data[i]['medication_time_code_list'][j]]) == false) {
214		- chartData[data[i]['medication_time_code_list'][j]] = data[i]['medication_time_code_count_list'][j];
215		- counter++;
216		- if (i > 0) {
217		- sum += data[i]['medication_time_code_count_list'][j];
218		- }
219		- } else {
220		- continue;
221		- }
	206	+ const setYearArr = [...new Set(totalYearArr)];
	207	+ console.log("totalYearArr: ", setYearArr);
	208	+
	209	+ setYearArr.map((year, yearIdx) => {
	210	+ let sum = 0;
	211	+ let count = 0;
	212	+ let avg = 0;
	213	+
	214	+ let monthArr = ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-'];
	215	+
	216	+ data.map((item, idx) => {
	217	+ if (item['year'] == year) {
	218	+ sum += item['average'];
	219	+ count++;
	220	+ monthArr[Number(item['month'])] = item['average'];
222	221	}
223		- _stackChartData.push({ "sum": sum, "total": counter })
224		- }
225		- seniorNum.seniorMedicationList = _stackChartData;
226		- }
	222	+ })
	223	+
	224	+ avg = parseInt(sum / count);
	225	+ yearArr.push({ "year": [year], "average": avg, "data": monthArr });
	226	+ })
	227	+
	228	+ console.log("yearArr : ", yearArr);
	229	+ setMedicationSelectListByYear(yearArr);
	230	+
	231	+ console.log("seniorMedicationSelectListByMonth : ", data);
	232	+ setMedicationSelectListByMonth(data);
227	233	}).catch((error) => {
228		- console.log('seniorMedicationSelectListByDay() /user/seniorMedicationSelectListByDay.json error : ', error);
	234	+ console.log('seniorMedicationSelectListByMonth() /user/seniorMedicationSelectListByMonth.json error : ', error);
229	235	});
230	236	};
231	237
...	...	@@ -236,6 +242,8 @@
236	242	batteryRiskCount();
237	243	visitByMonthList();
238	244	seniorByAgent();
	245	+ seniorMedicationSelectListByNew();
	246	+ seniorMedicationSelectListByMonth();
239	247	}, []);
240	248
241	249	return (
...	...	@@ -309,15 +317,14 @@
309	317	<Title title={`${cityName} 복용률 순위`} explanation={""} />
310	318	</div>
311	319	<div style={{ height: 'calc(100% - 60px)' }}>
312		- <Chart8 data={stackChartData} />
313		- {/* <Chart8 /> */}
	320	+ <Chart8 data={medicationSelectListByNew} />
314	321	</div>
315	322	</div>
316	323	<div className="content-box combine-left-government2">
317	324	<div className="flex">
318	325	<Title title={`${cityName} 복용률 평균`} explanation={"해당 지역의 대상자 복용률이 그래프로 보여집니다."} />
319	326	</div>
320		- <Chart2_govern />
	327	+ <Chart2_govern data={medicationSelectListByMonth} />
321	328	</div>
322	329	<div className="content-box combine-right-government2">
323	330	<div className="flex">
...	...	@@ -352,81 +359,23 @@
352	359	</tr>
353	360	</thead>
354	361	<tbody>
355		- <tr>
356		- <td>2023</td>
357		- <td>87%</td>
358		- <td>86%</td>
359		- <td></td>
360		- <td></td>
361		- <td></td>
362		- <td></td>
363		- <td></td>
364		- <td></td>
365		- <td></td>
366		- <td></td>
367		- <td></td>
368		- <td></td>
369		- </tr>
370		- <tr>
371		- <td>2022</td>
372		- <td>83%</td>
373		- <td>81%</td>
374		- <td></td>
375		- <td></td>
376		- <td></td>
377		- <td></td>
378		- <td></td>
379		- <td></td>
380		- <td></td>
381		- <td></td>
382		- <td></td>
383		- <td></td>
384		- </tr>
385		- <tr>
386		- <td>2021</td>
387		- <td>81%</td>
388		- <td>80%</td>
389		- <td></td>
390		- <td></td>
391		- <td></td>
392		- <td></td>
393		- <td></td>
394		- <td></td>
395		- <td></td>
396		- <td></td>
397		- <td></td>
398		- <td></td>
399		- </tr>
400		- <tr>
401		- <td>2020</td>
402		- <td>82%</td>
403		- <td>83%</td>
404		- <td></td>
405		- <td></td>
406		- <td></td>
407		- <td></td>
408		- <td></td>
409		- <td></td>
410		- <td></td>
411		- <td></td>
412		- <td></td>
413		- <td></td>
414		- </tr>
415		- <tr>
416		- <td>2019</td>
417		- <td>80%</td>
418		- <td>81%</td>
419		- <td></td>
420		- <td></td>
421		- <td></td>
422		- <td></td>
423		- <td></td>
424		- <td></td>
425		- <td></td>
426		- <td></td>
427		- <td></td>
428		- <td></td>
429		- </tr>
	362	+ {medicationSelectListByYear.map((item, idx) => {
	363	+ return (
	364	+ <tr>
	365	+ <td>{item['year']}</td>
	366	+ <td>{item['average'] == '-' ? '-' : item['average'] + '%'}</td>
	367	+ {CommonUtil.isEmpty(item['data']) == false ? (
	368	+ item['data'].map((item1, idx1) => {
	369	+ return (
	370	+ <>
	371	+ <td>{item1 == '-' ? '-' : item1 + '%'}</td>
	372	+ </>
	373	+ )
	374	+ })
	375	+ ) : null}
	376	+ </tr>
	377	+ )
	378	+ })}
430	379	</tbody>
431	380	</table>
432	381	</div>

...	...	@@ -12,7 +12,7 @@
12	12	import Chart5 from "../../component/chart/Chart5.jsx";
13	13	import Chart2_govern from "../../component/chart/Chart2_govern.jsx";
14	14	import Donut1_govern from "../../component/chart/Donut1_govern.jsx";
15		-import Chart8 from "../../component/chart/Chart8_government.jsx";
	15	+import Chart8 from "../../component/chart/Chart8.jsx";
16	16	import RowChart_govern from "../../component/chart/RowChart_govern.jsx";
17	17	import AddCircleIcon from "@mui/icons-material/AddCircle";
18	18	import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
...	...	@@ -32,7 +32,6 @@
32	32	const [cityName, setCityName] = useState(state.loginUser['government_name']);
33	33
34	34	//대상자(시니어) 목록 조회
35		- const [seniorNum, setSeniorNum] = React.useState();
36	35	const [senior, setSenior] = React.useState({ userList: [], userListCount: 0 });
37	36	const seniorSelectList = () => {
38	37	fetch("/user/userSelectList.json", {
...	...	@@ -48,11 +47,6 @@
48	47	}).then((response) => response.json()).then((data) => {
49	48	console.log("대상자(시니어) 목록 조회 : ", data);
50	49	setSenior(data);
51		- data.userList.map((item, idx) => {
52		- item['senior_id'] = item['user_id']
53		- seniorMedicationSelectList(item);
54		- })
55		- console.log(medicationList)
56	50	}).catch((error) => {
57	51	console.log('seniorSelectList() /user/userSelectList.json error : ', error);
58	52	});
...	...	@@ -176,81 +170,80 @@
176	170	});
177	171	}
178	172
179		- //특정 대상자의 실제 복약 정보
180		- const [seniorMedicationList, setSeniorMedicationList] = React.useState([]);
181		- const [showMedicationTimeCode, setShowMedicationTimeCode] = React.useState({});
182		- //특정 대상자의 실제 복약 정보 목록 조회
183		- const seniorMedicationSelectList = (seniorData) => {
184		- fetch("/user/seniorMedicationSelectList.json", {
	173	+ // 최근 복용률
	174	+ const [medicationSelectListByNew, setMedicationSelectListByNew] = React.useState([]);
	175	+ // 최근 복용률 조회
	176	+ const seniorMedicationSelectListByNew = () => {
	177	+ fetch("/user/seniorMedicationSelectListByNew.json", {
185	178	method: "POST",
186	179	headers: {
187	180	'Content-Type': 'application/json; charset=UTF-8'
188	181	},
189		- body: JSON.stringify(seniorData),
	182	+ body: JSON.stringify({ "government_id": state.loginUser['government_id'] }),
190	183	}).then((response) => response.json()).then((data) => {
191		- setSeniorMedicationList(data);
192		- seniorMedicationSelectListByDay(data, seniorData);
	184	+ console.log("seniorMedicationSelectListByNew : ", data);
	185	+ setMedicationSelectListByNew(data)
193	186	}).catch((error) => {
194		- console.log('seniorMedicationSelectList() /user/seniorMedicationSelectList.json error : ', error);
	187	+ console.log('seniorMedicationSelectListByNew() /user/seniorMedicationSelectListByNew.json error : ', error);
195	188	});
196	189	};
197	190
198		- //특정 대상자의 일별, 복약시간별 복약 목록
199		- const [medicationList, setMedicationList] = React.useState([]);
200		- //특정 대상자의 일별, 복약시간별 복약 목록 조회
201		- const seniorMedicationSelectListByDay = (seniorMedicationList, seniorData) => {
202		- fetch("/user/seniorMedicationSelectListByDay.json", {
	191	+ // 복용률 목록
	192	+ const [medicationSelectListByMonth, setMedicationSelectListByMonth] = React.useState([]);
	193	+ const [medicationSelectListByYear, setMedicationSelectListByYear] = React.useState([]);
	194	+ // 복용률 목록 조회
	195	+ const seniorMedicationSelectListByMonth = () => {
	196	+ let totalYearArr = [];
	197	+ let yearArr = [];
	198	+
	199	+ fetch("/user/seniorMedicationSelectListByMonth.json", {
203	200	method: "POST",
204	201	headers: {
205	202	'Content-Type': 'application/json; charset=UTF-8'
206	203	},
207		- body: JSON.stringify(seniorData),
	204	+ body: JSON.stringify({ "government_id": state.loginUser['government_id'] }),
208	205	}).then((response) => response.json()).then((data) => {
209		- let showMedicationTimeCode = {};
210		- for (let i = 0; i < seniorMedicationList.length; i++) {
211		- showMedicationTimeCode[seniorMedicationList[i]] = true;
212		- }
213		- setShowMedicationTimeCode(showMedicationTimeCode);
	206	+ data.map((item, idx) => {
	207	+ item['year'] = item['medication_default_date'].substr(0, 4);
	208	+ item['month'] = item['medication_default_date'].substr(5, 2);
	209	+ totalYearArr.push(item['medication_default_date'].substr(0, 4));
	210	+ item['date'] = new Date(item['medication_default_date']);
	211	+ })
214	212
215		- if (CommonUtil.isEmpty(data) == false) {
216		- let _stackChartData = [];
217		- let lenghs = 0;
218		- if (data.length < 30) {
219		- lenghs = data.length
220		- } else {
221		- lenghs = data.length - 30
222		- }
223		- let sum = 0; // 실제 복약량
224		- let counter = 0; // 복약해야하는 양
225		- let percent = 0; // 복용률
226		- for (let i = data.length - 1; i >= lenghs; i--) {
227		- for (let j = 0; j < data[i]['medication_time_code_list'].length; j++) {
228		- if (CommonUtil.isEmpty(showMedicationTimeCode[data[i]['medication_time_code_list'][j]]) == false) {
229		- counter++;
230		- if (i > 0) {
231		- sum += data[i]['medication_time_code_count_list'][j];
232		- }
233		- } else {
234		- continue;
235		- }
	213	+ const setYearArr = [...new Set(totalYearArr)];
	214	+ console.log("totalYearArr: ", setYearArr);
	215	+
	216	+ setYearArr.map((year, yearIdx) => {
	217	+ let sum = 0;
	218	+ let count = 0;
	219	+ let avg = 0;
	220	+
	221	+ let monthArr = ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-'];
	222	+
	223	+ data.map((item, idx) => {
	224	+ if (item['year'] == year) {
	225	+ sum += item['average'];
	226	+ count++;
	227	+ monthArr[Number(item['month'])] = item['average'];
236	228	}
237		- }
238		- if (sum == 0 \|\| counter == 0) {
239		- percent = 0
240		- } else {
241		- percent = Math.floor((sum / counter) * 100);
242		- }
243		- _stackChartData = { "user_name": seniorData['user_name'], "percent": percent }
244		- setMedicationList(_stackChartData);
245		- }
	229	+ })
	230	+
	231	+ avg = parseInt(sum / count);
	232	+ yearArr.push({ "year": [year], "average": avg, "data": monthArr });
	233	+ })
	234	+
	235	+ console.log("yearArr : ", yearArr);
	236	+ setMedicationSelectListByYear(yearArr);
	237	+
	238	+ console.log("seniorMedicationSelectListByMonth : ", data);
	239	+ setMedicationSelectListByMonth(data);
246	240	}).catch((error) => {
247		- console.log('seniorMedicationSelectListByDay() /user/seniorMedicationSelectListByDay.json error : ', error);
	241	+ console.log('seniorMedicationSelectListByMonth() /user/seniorMedicationSelectListByMonth.json error : ', error);
248	242	});
249	243	};
250	244
251	245
252	246	function updateList(agencyList, countList) {
253		-
254	247	const result = [];
255	248	for (let i = 0; i < agencyList.length; i++) {
256	249	const agency = agencyList[i];
...	...	@@ -283,8 +276,9 @@
283	276	visitByMonthList();
284	277	equipmentByAgency();
285	278	seniorByAgency();
	279	+ seniorMedicationSelectListByNew();
	280	+ seniorMedicationSelectListByMonth();
286	281	}, []);
287		-
288	282
289	283	return (
290	284	<main>
...	...	@@ -363,14 +357,14 @@
363	357	<Title title={`${cityName} 복용률 순위`} />
364	358	</div>
365	359	<div style={{ height: 'calc(100% - 60px)' }}>
366		- <Chart8 data={medicationList} />
	360	+ <Chart8 data={medicationSelectListByNew} />
367	361	</div>
368	362	</div>
369	363	<div className="content-box combine-left-government2">
370	364	<div className="flex">
371	365	<Title title={`${cityName} 복용률 평균`} explanation={"해당 지역의 대상자 복용률이 그래프로 보여집니다."} />
372	366	</div>
373		- <Chart2_govern />
	367	+ <Chart2_govern data={medicationSelectListByMonth} />
374	368	</div>
375	369	<div className="content-box combine-right-government2">
376	370	<div className="flex">
...	...	@@ -384,7 +378,7 @@
384	378	</div>
385	379	<Donut1_govern data={equipmentUsage} />
386	380	</div>
387		- <div className="content-box span4">
	381	+ <div className="content-box span4 table-size-fix">
388	382	<table className="visit-data-table">
389	383	<thead>
390	384	<tr>
...	...	@@ -405,81 +399,23 @@
405	399	</tr>
406	400	</thead>
407	401	<tbody>
408		- <tr>
409		- <td>2023</td>
410		- <td>87%</td>
411		- <td>86%</td>
412		- <td></td>
413		- <td></td>
414		- <td></td>
415		- <td></td>
416		- <td></td>
417		- <td></td>
418		- <td></td>
419		- <td></td>
420		- <td></td>
421		- <td></td>
422		- </tr>
423		- <tr>
424		- <td>2022</td>
425		- <td>83%</td>
426		- <td>81%</td>
427		- <td></td>
428		- <td></td>
429		- <td></td>
430		- <td></td>
431		- <td></td>
432		- <td></td>
433		- <td></td>
434		- <td></td>
435		- <td></td>
436		- <td></td>
437		- </tr>
438		- <tr>
439		- <td>2021</td>
440		- <td>81%</td>
441		- <td>80%</td>
442		- <td></td>
443		- <td></td>
444		- <td></td>
445		- <td></td>
446		- <td></td>
447		- <td></td>
448		- <td></td>
449		- <td></td>
450		- <td></td>
451		- <td></td>
452		- </tr>
453		- <tr>
454		- <td>2020</td>
455		- <td>82%</td>
456		- <td>83%</td>
457		- <td></td>
458		- <td></td>
459		- <td></td>
460		- <td></td>
461		- <td></td>
462		- <td></td>
463		- <td></td>
464		- <td></td>
465		- <td></td>
466		- <td></td>
467		- </tr>
468		- <tr>
469		- <td>2019</td>
470		- <td>80%</td>
471		- <td>81%</td>
472		- <td></td>
473		- <td></td>
474		- <td></td>
475		- <td></td>
476		- <td></td>
477		- <td></td>
478		- <td></td>
479		- <td></td>
480		- <td></td>
481		- <td></td>
482		- </tr>
	402	+ {medicationSelectListByYear.map((item, idx) => {
	403	+ return (
	404	+ <tr>
	405	+ <td>{item['year']}</td>
	406	+ <td>{item['average'] == '-' ? '-' : item['average'] + '%'}</td>
	407	+ {CommonUtil.isEmpty(item['data']) == false ? (
	408	+ item['data'].map((item1, idx1) => {
	409	+ return (
	410	+ <>
	411	+ <td>{item1 == '-' ? '-' : item1 + '%'}</td>
	412	+ </>
	413	+ )
	414	+ })
	415	+ ) : null}
	416	+ </tr>
	417	+ )
	418	+ })}
483	419	</tbody>
484	420	</table>
485	421	</div>

Delete comment