Merge branch 'nabh/diagram-statistik-kasus-fe' into 'pbi-13-diagram-statistik-kasus'

tanggal-bulan-tahun untuk filter waktu dan total kasus setiap kecamatan di pdf statistik

See merge request !47

src/scenes/Home/components/ExportPDFButton/index.test.tsx

@@ -11,7 +11,8 @@ describe('<ExportPDFButton />', () => {
             selectedKey={''}
             dataType={''}
             chartType={true}
-            information={''}
+            totalCount={''}
+            information={[0,1]}
             clickable={false} />);
     })
     it('should call downloadAsPDF', () => {
@@ -22,7 +23,8 @@ describe('<ExportPDFButton />', () => {
             selectedKey={''}
             dataType={''}
             chartType={true}
-            information={''}
+            totalCount={''}
+            information={[0,1]}
             clickable={false} />);
         btn.find('Button').simulate('click');
         expect(mod.downloadAsPDF).toHaveBeenCalled();

src/scenes/Home/components/ExportPDFButton/index.tsx

@@ -7,15 +7,16 @@ interface ExportPDFButtonProps {
     selectedKey: string,
     dataType: string,
     chartType: boolean,
-    information: string,
+    totalCount: string,
+    information: Array<number>,
     clickable: boolean,
 }
 
 function ExportPDFButton({
-  type, selectedKey, dataType, chartType, information, clickable
+  type, selectedKey, dataType, chartType, totalCount, information, clickable
 }: ExportPDFButtonProps) {
-  const handleDownload = React.useCallback(async (type: string, selectedKey: string, dataType: string, chartType: boolean, information: string) => {
-    downloadAsPDF(type, selectedKey, dataType, chartType, information);
+  const handleDownload = React.useCallback(async (type: string, selectedKey: string, dataType: string, chartType: boolean, totalCount: string, information: Array<number>) => {
+    downloadAsPDF(type, selectedKey, dataType, chartType, totalCount, information);
   }, []);
   return (
     <Box
@@ -26,7 +27,7 @@ function ExportPDFButton({
     >
       <Button
         isBold={false}
-        onClick={() => handleDownload(type, selectedKey, dataType, chartType, information)}
+        onClick={() => handleDownload(type, selectedKey, dataType, chartType, totalCount, information)}
         clickable={clickable}
       >
         Export PDF

src/scenes/Home/components/Statistic/index.tsx

@@ -171,6 +171,38 @@ function Statistic({
     }
   };
 
+  const getInfoStatistics = (data: Exportables) => {
+    const values = Object.values(data['district']);
+    values.sort(function (a: any, b: any) { return b['total_count'] - a['total_count'] });
+    const keys = Object.keys(statisticsDateData['district']);
+    let res: Array<number> = [];
+    keys.forEach((element, index) => {
+      let casesP: number = 0;
+      let casesN: number = 0;
+      let casesU: number = 0;
+      casesP += values[index]['positive'];
+      casesN += values[index]['negative'];
+      casesU += values[index]['undetermined'];
+      res.push(casesP);
+      res.push(casesN);
+      res.push(casesU);
+    });
+    return res;
+  }
+
+  const getInfoDiagram = (data: StatisticData) => {
+    let res: Array<number> = [];
+    for (var i = 0, len = 4 ; i < len; i++) {
+      var casesPositive =  data.parts[0]?.jumlah;
+      var casesNegative = data.parts[1]?.jumlah;
+      var casesUndetermined = data.parts[2]?.jumlah;
+      res.push(casesPositive);
+      res.push(casesNegative);
+      res.push(casesUndetermined);
+    }
+    return res;
+  }
+
   const fetchStatisticsByDate = async () => {
     const start_date = (ignoreDateRange) ? "0010-01-01" : (new Date(dateKey.start_date.valueOf() + 1000 * 3600 * 24)).toISOString().split('T')[0];   // Add 1 day to start_date
     const end_date = (ignoreDateRange) ? "9990-12-31" : (new Date(dateKey.end_date.valueOf() + 1000 * 3600 * 24)).toISOString().split('T')[0];    // Add 1 day to end_date
@@ -475,7 +507,8 @@ function Statistic({
                         selectedKey={ageKey.minAge.toString() + " - " + ageKey.maxAge.toString()}
                         dataType={(!ignoreDateRangeFilter) ? (new Date(dateKeyFilter.start_date.valueOf() + 1000 * 3600 * 24)).toISOString().split('T')[0] + " s/d " + (new Date(dateKeyFilter.end_date.valueOf() + 1000 * 3600 * 24)).toISOString().split('T')[0] : ""}
                         chartType={chartType}
-                        information={selectedKeyData.totalCount.toString() + selectedKeyData.parts[0]?.jumlah.toString() + selectedKeyData.parts[1]?.jumlah.toString() + selectedKeyData.parts[2]?.jumlah.toString()}
+                        totalCount={selectedKeyData.totalCount.toString()}
+                        information={getInfoDiagram(selectedKeyData)}
                         clickable={selectedKeyData.totalCount !== 0}
                       />
                     </Box>
@@ -521,7 +554,8 @@ function Statistic({
                       selectedKey={"Tanggal"}
                       dataType={(!ignoreDateRange) ? (new Date(dateKey.start_date.valueOf() + 1000 * 3600 * 24)).toISOString().split('T')[0] + " s/d " + (new Date(dateKey.end_date.valueOf() + 1000 * 3600 * 24)).toISOString().split('T')[0] : ""}
                       chartType={false}
-                      information={selectedKeyData.totalCount.toString() + selectedKeyData.parts[0]?.jumlah.toString() + selectedKeyData.parts[1]?.jumlah.toString() + selectedKeyData.parts[2]?.jumlah.toString()}
+                      totalCount={statisticsDateData.total_count.toString()}
+                      information={getInfoStatistics(statisticsDateData)}
                       clickable={Object.values(statisticsDateData['district']).reduce((a, b) => a + (b['total_count'] || 0), 0) !== 0}
                     />
                   </Box>
@@ -583,7 +617,8 @@ function Statistic({
                           selectedKey={selectedKey}
                           dataType={(!ignoreDateRangeFilter) ? (new Date(dateKeyFilter.start_date.valueOf() + 1000 * 3600 * 24)).toISOString().split('T')[0] + " s/d " + (new Date(dateKeyFilter.end_date.valueOf() + 1000 * 3600 * 24)).toISOString().split('T')[0] : ""}
                           chartType={chartType}
-                          information={selectedKeyData.totalCount.toString() + selectedKeyData.parts[0]?.jumlah.toString() + selectedKeyData.parts[1]?.jumlah.toString() + selectedKeyData.parts[2]?.jumlah.toString()}
+                          totalCount={selectedKeyData.totalCount.toString()}
+                          information={getInfoDiagram(selectedKeyData)}
                           clickable={selectedKeyData.totalCount !== 0}
                         />
                       </Box>

src/scenes/Home/utilities/utils.test.tsx

-import { translate } from './utils'
+import { translate, translateTypetoKey, translateToMonth, translateChartType } from './utils'
 
 describe('utils', () => {
     it('translates jenis kelamin', () => {
         const ret_val = translate("male");
         expect(ret_val).toEqual("Pria");
     })
+    it('translates tipe data', () => {
+        const ret_val = translateTypetoKey("Kecamatan");
+        expect(ret_val).toEqual("district");
+    })
+    it('translates bulan', () => {
+        const ret_val = translateToMonth("01");
+        expect(ret_val).toEqual("Januari");
+    })
+    it('translates tipe chart', () => {
+        const ret_val = translateChartType(false);
+        expect(ret_val).toEqual("Bar");
+    })
 })
\ No newline at end of file

src/scenes/Home/utilities/utils.tsx

@@ -43,6 +43,32 @@ const translateTypetoKey = (str: string) => {
   return str;
 };
 
+const translateToMonth = (bulan: string) => {
+  const bulan2 = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
+  const noBulan = parseInt(bulan.slice(1,2)) - 1;
+  for (var i = 0, len = bulan2.length ; i < len; i++) { 
+    return bulan2[noBulan];
+  }
+};
+
+const translateChartType = (input: boolean) => {
+  if(!input){
+    return 'Bar';
+  }
+  else{
+    return 'Pie';
+  } 
+}
+
+const translateToString = (input: Array<number>) => {
+  let res: Array<string> = [];
+    for (var i = 0, len = input.length ; i < len; i++) {
+      var casesPositive = input[i].toString();
+      res.push(casesPositive);
+    }
+  return res;
+}
+
 const renderActiveShape = (props: ActiveShapeProps) => {
   const RADIAN = Math.PI / 180;
   const {
@@ -89,8 +115,9 @@ const renderActiveShape = (props: ActiveShapeProps) => {
   );
 };
 
-const image2pdf  = (imageType: string, type: string, key: string, dataType: string, chartType: boolean, info: string) => {
+const image2pdf  = (imageType: string, type: string, key: string, dataType: string, chartType: boolean, total: string, info: Array<number>) => {
   const imgWidth = 232;  
+
   const imgHeight = 130;  
   const pageWidth = 297;
   const pageHeight = 210;
@@ -98,11 +125,17 @@ const image2pdf  = (imageType: string, type: string, key: string, dataType: stri
   const marginX = (pageWidth - imgWidth) / 2;
   
   const doc = new jsPDF({orientation: "l", format:[pageWidth, pageHeight]});
-  
+  const date1st = dataType.slice(8,10) + " " + translateToMonth(dataType.slice(5,7)) +" "+ dataType.slice(0,4);
+  const date2nd = dataType.slice(23,25) + " " + translateToMonth(dataType.slice(20,22)) + " " + dataType.slice(15,19);
+  const caseP = info[0].toString();
+  const caseN = info[1].toString();
+  const caseU = info[2].toString();
+  const cases = translateToString(info);
+
   const header = (doc: jsPDF) => {
     doc.setFontSize(26);
     doc.setFont("arial", "bold");
-    if (key == "Tanggal")
+    if (key === "Tanggal")
       doc.text("DATA KASUS TBC 1 DEPOK", pageWidth/2, 24, {align:"center"});
     else 
       doc.text("DATA KASUS TBC DEPOK", pageWidth/2, 18, {align:"center"});
@@ -111,36 +144,90 @@ const image2pdf  = (imageType: string, type: string, key: string, dataType: stri
   const writeInfoCases = (doc: jsPDF) => {
     doc.setFontSize(20);
     doc.setFont("arial", "light");
-    doc.text("Jumlah : " + info.slice(1, 2), 90, 35, {align:"center"})
-    doc.text("Jumlah : " + info.slice(2, 3), 145, 35, {align:"center"})
-    doc.text("Jumlah : " + info.slice(3, 4), 200, 35, {align:"center"})
+    doc.text("Jumlah : " + caseP, 90, 35, {align:"center"});
+    doc.text("Jumlah : " + caseN, 145, 35, {align:"center"});
+    doc.text("Jumlah : " + caseU, 200, 35, {align:"center"});
+  }
+
+  const writeInfoCaseP = (doc: jsPDF) => {
+    doc.setFontSize(13);
+    doc.setFont("arial", "light");
+	  doc.text("P: " + cases[0], 65, 43, {align:"center"});
+    doc.text("P: " + cases[3], 83, 43, {align:"center"});
+    doc.text("P: " + cases[6], 102, 43, {align:"center"});
+    doc.text("P: " + cases[9], 120, 43, {align:"center"});
+    doc.text("P: " + cases[12], 138, 43, {align:"center"});
+    doc.text("P: " + cases[15], 157, 43, {align:"center"});
+    doc.text("P: " + cases[18], 175, 43, {align:"center"});
+    doc.text("P: " + cases[21], 193, 43, {align:"center"});
+    doc.text("P: " + cases[24], 212, 43, {align:"center"});
+    doc.text("P: " + cases[27], 230, 43, {align:"center"});
+    doc.text("P: " + cases[30], 248, 43, {align:"center"});
+  }
+
+  const writeInfoCaseN = (doc: jsPDF) => {
+    doc.setFontSize(13);
+    doc.setFont("arial", "light");
+	  doc.text("N: " + cases[1], 65, 50, {align:"center"});
+    doc.text("N: " + cases[4], 83, 50, {align:"center"});
+    doc.text("N: " + cases[7], 102, 50, {align:"center"});
+    doc.text("N: " + cases[10], 120, 50, {align:"center"});
+    doc.text("N: " + cases[13], 138, 50, {align:"center"});
+    doc.text("N: " + cases[16], 157, 50, {align:"center"});
+    doc.text("N: " + cases[19], 175, 50, {align:"center"});
+    doc.text("N: " + cases[22], 193, 50, {align:"center"});
+    doc.text("N: " + cases[25], 212, 50, {align:"center"});
+    doc.text("N: " + cases[28], 230, 50, {align:"center"});
+    doc.text("N: " + cases[31], 248, 50, {align:"center"});
+  }
+
+  const writeInfoCaseU = (doc: jsPDF) => {
+    doc.setFontSize(13);
+    doc.setFont("arial", "light");
+	  doc.text("T: " + cases[2], 65, 57, {align:"center"});
+    doc.text("T: " + cases[5], 83, 57, {align:"center"});
+    doc.text("T: " + cases[8], 102, 57, {align:"center"});
+    doc.text("T: " + cases[11], 120, 57, {align:"center"});
+    doc.text("T: " + cases[14], 138, 57, {align:"center"});
+    doc.text("T: " + cases[17], 157, 57, {align:"center"});
+    doc.text("T: " + cases[20], 175, 57, {align:"center"});
+    doc.text("T: " + cases[23], 193, 57, {align:"center"});
+    doc.text("T: " + cases[26], 212, 57, {align:"center"});
+    doc.text("T: " + cases[29], 230, 57, {align:"center"});
+    doc.text("T: " + cases[32], 248, 57, {align:"center"});
   }
 
   const writeTotal = (doc: jsPDF) => {
     doc.setFontSize(20);
     doc.setFont("arial", "bold");
-    if (key == "Tanggal")
-      doc.text("Total Kasus : " + info.slice(0, 1), pageWidth/2, 155, {align:"center"})
+    if (key === "Tanggal")
+      doc.text("Total Kasus : " + total, pageWidth/2, 155, {align:"center"})
     else 
       if (chartType)
-        doc.text("Total : " + info.slice(0, 1) + " Kasus", pageWidth/2, 140, {align:"center"})
+        doc.text("Total : " + total + " Kasus", pageWidth/2, 140, {align:"center"})
       else  
-        doc.text("Total : " + info.slice(0, 1) + " Kasus", pageWidth/2, 150, {align:"center"})
+        doc.text("Total : " + total + " Kasus", pageWidth/2, 150, {align:"center"})
   }
 
   const writeTextToPDF = (doc: jsPDF) =>  {
     doc.setFontSize(20);
     doc.setFont("arial", "italic-bold");
-    if(key == "Tanggal")
-      if(dataType == "")
+    if(key === "Tanggal")
+      if(dataType === "")
         doc.text("Keseluruhan Kasus TBC di DEPOK", pageWidth/2, 170, {align:"center"});
       else
-        doc.text("Berdasarkan tanggal " + dataType, pageWidth/2, 170, {align:"center"})
+        if(date1st === date2nd)
+          doc.text("Berdasarkan tanggal " + date1st, pageWidth/2, 170, {align:"center"})
+        else
+          doc.text("Berdasarkan tanggal " + date1st + " sampai " + date2nd, pageWidth/2, 170, {align:"center"})
     else
-      if(dataType == "")
+      if(dataType === "")
         doc.text("Keseluruhan Kasus TBC berdasarkan " + type + " " + key, pageWidth/2, 165, {align:"center"});
-      else   
-        doc.text(type + " " + key + " dari tanggal " + dataType, pageWidth/2, 165, {align:"center"});
+      else
+        if(date1st === date2nd)
+          doc.text(type + " " + key + " pada tanggal " + date1st, pageWidth/2, 165, {align:"center"});
+        else
+          doc.text(type + " " + key + " dari tanggal " + date1st + " sampai " + date2nd, pageWidth/2, 165, {align:"center"});
 
     doc.setFillColor(PIE_COLORS[0]);
     doc.rect(30, 190, 5, 5, 'F');
@@ -171,7 +258,7 @@ const image2pdf  = (imageType: string, type: string, key: string, dataType: stri
     let context = canvas.getContext('2d')!;
     context.drawImage(img, 0, 0, context.canvas.width, context.canvas.height);
     let png = canvas.toDataURL('image/png', 1.0);
-    if (key == "Tanggal")
+    if (key === "Tanggal")
       doc.addImage(png, imageType, marginX, 12, 252, 156, undefined, "SLOW");
     else 
       doc.addImage(png, imageType, marginX, 12, imgWidth, imgHeight, undefined, "SLOW");
@@ -194,27 +281,39 @@ const image2pdf  = (imageType: string, type: string, key: string, dataType: stri
   
   blobToImage(svgBlob).then(img => {
     header(doc);
-    if (!chartType && key !== "Tanggal")
+    if (!chartType && key != "Tanggal"){
       writeInfoCases(doc);
+    }
+    if (key === "Tanggal"){
+      writeInfoCaseP(doc);
+      writeInfoCaseN(doc);
+      writeInfoCaseU(doc);
+    }
     addImageToDoc(img, doc);
     writeTotal(doc);
     writeTextToPDF(doc);
-    if(key == "Tanggal")
-      if (dataType == "")
+    if(key === "Tanggal")
+      if (dataType === "")
         doc.save("Statistik Keseluruhan Kasus TBC.pdf");
       else
-        doc.save("Statistik berdasarkan tanggal " + dataType + ".pdf")
+        if(date1st === date2nd)
+          doc.save("Statistik berdasarkan tanggal " + date1st + ".pdf")
+        else 
+          doc.save("Statistik berdasarkan tanggal " + date1st + " sampai " + date2nd + ".pdf")
         
     else 
-      if (dataType == "")
-        doc.save("Diagram Keseluruhan Kasus TBC berdasarkan " + type + " " + key + ".pdf")
+      if (dataType === "")
+        doc.save("Diagram " + translateChartType(chartType) + " Keseluruhan Kasus TBC berdasarkan " + type + " " + key + ".pdf")
       else 
-        doc.save("Diagram berdasarkan "+ type + " " + key + " dari tanggal " + dataType + ".pdf");
+        if(date1st === date2nd)
+          doc.save("Diagram " + translateChartType(chartType) + " berdasarkan "+ type + " " + key + " pada tanggal " + date1st + ".pdf");
+        else 
+          doc.save("Diagram " + translateChartType(chartType) + " berdasarkan "+ type + " " + key + " dari tanggal " + date1st + " sampai " + date2nd + ".pdf");
   });
 };
 
-const downloadAsPDF = (type: string, selectedKey: string, dataType: string, chartType: boolean, info: string) => {
-  image2pdf("PNG", type, translate(selectedKey), dataType, chartType, info);
+const downloadAsPDF = (type: string, selectedKey: string, dataType: string, chartType: boolean, total: string, info: Array<number>) => {
+  image2pdf("PNG", type, translate(selectedKey), dataType, chartType, total, info);
 }
 
-export { translate, renderActiveShape, image2pdf, downloadAsPDF, translateTypetoKey };
\ No newline at end of file
+export { translate, renderActiveShape, image2pdf, downloadAsPDF, translateTypetoKey, translateToMonth, translateToString, translateChartType };
\ No newline at end of file