박권수

feat. 차트 및 상세사항 변경

1 import moment from 'moment'; 1 import moment from 'moment';
2 2
3 -export const make = (chartData : any[], numberOfRow : number) => { 3 +export const make = (takeMedicineHist : any[], numberOfRow : number) => {
4 const now = new Date(); 4 const now = new Date();
5 const result : any = {}; 5 const result : any = {};
6 - new Array(numberOfRow).fill(null).forEach((item : any, index : number) => { 6 + new Array(numberOfRow).fill(null).forEach(() => {
7 const key = moment(now).format('MM/DD'); 7 const key = moment(now).format('MM/DD');
8 result[key] = 0; 8 result[key] = 0;
9 now.setDate(now.getDate() - 1); 9 now.setDate(now.getDate() - 1);
10 - }) 10 + });
11 11
12 - chartData.forEach((data : any) => { 12 + takeMedicineHist.forEach((data : any) => {
13 const key : string = moment(data.takeDate).format('MM/DD'); 13 const key : string = moment(data.takeDate).format('MM/DD');
14 - !isNaN(result[key]) ? result[key] = result[key] + 1 : null; 14 + !isNaN(result[key]) ? result[key] = result[key] + data.dosage : null;
15 }); 15 });
16 16
17 const categories : any = []; 17 const categories : any = [];
......
...@@ -52,7 +52,7 @@ const BottleInfoContainer = (props : BottleInfoProps) => { ...@@ -52,7 +52,7 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
52 categories : [], 52 categories : [],
53 }, 53 },
54 series : [{ 54 series : [{
55 - name : '약 복용 횟수', 55 + name : '약 복용 회분',
56 color : '#337DFF', 56 color : '#337DFF',
57 data : [], 57 data : [],
58 }], 58 }],
...@@ -75,7 +75,12 @@ const BottleInfoContainer = (props : BottleInfoProps) => { ...@@ -75,7 +75,12 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
75 try { 75 try {
76 const result = await doctorApi.getPatientBottleDetail(token, bottleId); 76 const result = await doctorApi.getPatientBottleDetail(token, bottleId);
77 if (result.statusText === 'OK') { 77 if (result.statusText === 'OK') {
78 - setTakeMedicineHist(result.data.takeMedicineHist); 78 + setTakeMedicineHist(result.data.takeMedicineHist.map((takeMedicine : any) => {
79 + return ({
80 + ...takeMedicine,
81 + takeDate : moment(takeMedicine.takeDate).format('YYYY년 MM월 DD일 hh시 mm분'),
82 + });
83 + }));
79 const { categories, data } = makeChart.make(result.data.takeMedicineHist, numberOfChartItem); 84 const { categories, data } = makeChart.make(result.data.takeMedicineHist, numberOfChartItem);
80 setBottleInfo({ 85 setBottleInfo({
81 ...result.data, 86 ...result.data,
......
...@@ -72,6 +72,10 @@ const BottleInfoPresenter = (props : BottleInfoProps) => { ...@@ -72,6 +72,10 @@ const BottleInfoPresenter = (props : BottleInfoProps) => {
72 </styled.HistDtmWrapper> 72 </styled.HistDtmWrapper>
73 <styled.HistInfoWrapper> 73 <styled.HistInfoWrapper>
74 <styled.HistInfoEachWrapper> 74 <styled.HistInfoEachWrapper>
75 + 복용량
76 + <styled.HistInfoEach>{hist.dosage}회분</styled.HistInfoEach>
77 + </styled.HistInfoEachWrapper>
78 + <styled.HistInfoEachWrapper>
75 약병 내 온도 79 약병 내 온도
76 <styled.HistInfoEach>{hist.temperature}℃</styled.HistInfoEach> 80 <styled.HistInfoEach>{hist.temperature}℃</styled.HistInfoEach>
77 </styled.HistInfoEachWrapper> 81 </styled.HistInfoEachWrapper>
...@@ -79,10 +83,6 @@ const BottleInfoPresenter = (props : BottleInfoProps) => { ...@@ -79,10 +83,6 @@ const BottleInfoPresenter = (props : BottleInfoProps) => {
79 약병 내 습도 83 약병 내 습도
80 <styled.HistInfoEach>{hist.humidity}%</styled.HistInfoEach> 84 <styled.HistInfoEach>{hist.humidity}%</styled.HistInfoEach>
81 </styled.HistInfoEachWrapper> 85 </styled.HistInfoEachWrapper>
82 - <styled.HistInfoEachWrapper>
83 - 약병 내 잔량
84 - <styled.HistInfoEach>{hist.balance}%</styled.HistInfoEach>
85 - </styled.HistInfoEachWrapper>
86 </styled.HistInfoWrapper> 86 </styled.HistInfoWrapper>
87 </styled.HistWrapper> 87 </styled.HistWrapper>
88 ) 88 )
......
...@@ -72,7 +72,7 @@ export const HistDtmWrapper = styled.div ` ...@@ -72,7 +72,7 @@ export const HistDtmWrapper = styled.div `
72 `; 72 `;
73 73
74 export const HistDtm = styled.div ` 74 export const HistDtm = styled.div `
75 - font-size : 18px; 75 + font-size : 16px;
76 color : #000; 76 color : #000;
77 `; 77 `;
78 78
......