Fakultas Ilmu Komputer UI

Skip to content
GitLab
Commit 12211c41 authored by Nabilah Adani's avatar Nabilah Adani
Browse files

[GREEN] d/m/y and cases each district statistics in pdf

parent 0b607fe8
Pipeline #81473 failed with stages
in 1 minute and 7 seconds
Hide whitespace changes
Inline Side-by-side
src/scenes/Home/components/ExportPDFButton/index.tsx
View file @ 12211c41
......@@ -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
View file @ 12211c41
......@@ -11,6 +11,7 @@ import ExportPDFButton from '../ExportPDFButton';
import { StatisticData } from '../types';
import ExportCSVButton from '../ExportCSVButton';
import ExportXLSButton from '../ExportXLSButton';
import { SSL_OP_SSLEAY_080_CLIENT_DH_BUG } from 'constants';
interface StatisticProps {
isTable: boolean;
......@@ -171,6 +172,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
......@@ -306,6 +339,7 @@ function Statistic({
});
res.sort(function (a: any, b: any) { return a['total_count'] - b['total_count'] });
res.reverse();
console.log(values.sort(function (a: any, b: any) { return b['total_count'] - a['total_count'] }));
if (sum === 0) {
return (
<Text>{`Belum ada kasus untuk ${type.toLowerCase()} ini`}</Text>
......@@ -475,7 +509,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 +556,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 +619,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.tsx
View file @ 12211c41
......@@ -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
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Excellence In Teamwork