Fakultas Ilmu Komputer UI

Skip to content
GitLab
Commit 3ae83656 authored by Nabilah Adani's avatar Nabilah Adani
Browse files

[GREEN] adding cases to file export pdf

parent d4a1d22d
Pipeline #79839 failed with stages
in 1 minute and 26 seconds
Hide whitespace changes
Inline Side-by-side
src/scenes/Home/components/ExportPDFButton/index.tsx
View file @ 3ae83656
......@@ -6,14 +6,16 @@ interface ExportPDFButtonProps {
type: string,
selectedKey: string,
dataType: string,
chartType: boolean,
information: string,
clickable: boolean,
}
function ExportPDFButton({
type, selectedKey, dataType, clickable
type, selectedKey, dataType, chartType, information, clickable
}: ExportPDFButtonProps) {
const handleDownload = React.useCallback(async (type: string, selectedKey: string, dataType: string) => {
downloadAsPDF(type, selectedKey, dataType);
const handleDownload = React.useCallback(async (type: string, selectedKey: string, dataType: string, chartType: boolean, information: string) => {
downloadAsPDF(type, selectedKey, dataType, chartType, information);
}, []);
return (
<Box
......@@ -24,7 +26,7 @@ function ExportPDFButton({
>
<Button
isBold={false}
onClick={() => handleDownload(type, selectedKey, dataType)}
onClick={() => handleDownload(type, selectedKey, dataType, chartType, information)}
clickable={clickable}
>
Export PDF
......
src/scenes/Home/components/Statistic/index.tsx
View file @ 3ae83656
......@@ -73,6 +73,7 @@ function Statistic({
const generateFilter = (filterType: StatisticType) => {
var data = {} as ExportPayload;
console.log((new Date(dateKeyFilter.start_date.valueOf() + 1000 * 3600 * 24)).toISOString().split('T')[0])
var start_date_Table = (ignoreDateRangeTable) ? "0010-01-01" : (new Date(dateKeyTable.start_date.valueOf() + 1000 * 3600 * 24)).toISOString().split('T')[0];
var end_date_Table = (ignoreDateRangeTable) ? "9990-12-31" : (new Date(dateKeyTable.end_date.valueOf() + 1000 * 3600 * 24)).toISOString().split('T')[0];
var start_date_Chart = (ignoreDateRangeFilter) ? "0010-01-01" : (new Date(dateKeyFilter.start_date.valueOf() + 1000 * 3600 * 24)).toISOString().split('T')[0];
......@@ -180,6 +181,7 @@ function Statistic({
const { data } = response;
setstatisticsDateData(data);
}
console.log(statisticsDateData)
};
const fetchStatisticsByDateTable = async () => {
......@@ -313,33 +315,35 @@ function Statistic({
)
}
return (
<BarChart
width={650}
height={265}
data={res}
margin={{
top: 50, right: 70
}}
>
<CartesianGrid strokeDasharray="4 4" />
<XAxis dataKey="name" tick={{ fontSize: 14 }} interval={0} angle={30} dy={20} height={60} />
<YAxis type="number" domain={[0, dataMax => (Math.ceil(dataMax * 1.5))]} allowDataOverflow={true} />
<Tooltip />
<Legend
layout="horizontal"
verticalAlign="bottom"
align="center"
payload={
[
<>
<BarChart
width={650}
height={265}
data={res}
margin={{
top: 50, right: 70
}}
>
<CartesianGrid strokeDasharray="4 4" />
<XAxis dataKey="name" tick={{ fontSize: 14 }} interval={0} angle={30} dy={20} height={60} />
<YAxis type="number" domain={[0, dataMax => (Math.ceil(dataMax * 1.5))]} allowDataOverflow={true} />
<Tooltip />
<Legend
layout="horizontal"
verticalAlign="bottom"
align="center"
payload={[
{ value: "Kasus Positif", type: "square", id: "Kasus Positif", color: PIE_COLORS[0] },
{ value: "Kasus Negatif", type: "square", id: "Kasus Negatif", color: PIE_COLORS[1] },
{ value: "Kasus Terduga", type: "square", id: "Kasus Terduga", color: PIE_COLORS[2] }
]
} />
<Bar dataKey="positive" stackId="a" fill={PIE_COLORS[0]} />
<Bar dataKey="negative" stackId="a" fill={PIE_COLORS[1]} />
<Bar dataKey="undetermined" stackId="a" fill={PIE_COLORS[2]} />
</BarChart>
]} />
<Bar dataKey="positive" stackId="a" fill={PIE_COLORS[0]} />
<Bar dataKey="negative" stackId="a" fill={PIE_COLORS[1]} />
<Bar dataKey="undetermined" stackId="a" fill={PIE_COLORS[2]} />
</BarChart>
<br></br>
<Text align={"center"} width={"580px"} fontSize={"19px"} isBold={true}>{`Total: ${statisticsDateData.total_count} kasus`}</Text>
</>
);
}
if (chartType) {
......@@ -472,7 +476,9 @@ function Statistic({
<ExportPDFButton
type={type}
selectedKey={ageKey.minAge.toString() + " - " + ageKey.maxAge.toString()}
dataType={(!ignoreDateRange) ? dateKeyFilter.start_date.toISOString().split('T')[0] + " s/d " + dateKeyFilter.end_date.toISOString().split('T')[0] : ""}
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()}
clickable={selectedKeyData.totalCount !== 0}
/>
</Box>
......@@ -516,7 +522,9 @@ function Statistic({
<ExportPDFButton
type={type}
selectedKey={"Tanggal"}
dataType={(!ignoreDateRange) ? dateKey.start_date.toISOString().split('T')[0] + " s/d " + dateKey.end_date.toISOString().split('T')[0] : ""}
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()}
clickable={Object.values(statisticsDateData['district']).reduce((a, b) => a + (b['total_count'] || 0), 0) !== 0}
/>
</Box>
......@@ -576,7 +584,9 @@ function Statistic({
<ExportPDFButton
type={type}
selectedKey={selectedKey}
dataType={(!ignoreDateRangeFilter) ? dateKeyFilter.start_date.toISOString().split('T')[0] + " s/d " + dateKeyFilter.end_date.toISOString().split('T')[0] : ""}
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()}
clickable={selectedKeyData.totalCount !== 0}
/>
</Box>
......
src/scenes/Home/utilities/utils.tsx
View file @ 3ae83656
......@@ -2,6 +2,7 @@ import React from 'react';
import { Sector } from 'recharts';
import { jsPDF } from "jspdf";
import { PIE_COLORS } from 'constant';
import { PassThrough } from 'stream';
interface ActiveShapeProps {
cx: number, cy: number, midAngle: number, innerRadius: number,
......@@ -88,7 +89,7 @@ const renderActiveShape = (props: ActiveShapeProps) => {
);
};
const image2pdf = (imageType: string, type: string, key: string, dataType: string) => {
const image2pdf = (imageType: string, type: string, key: string, dataType: string, chartType: boolean, info: string) => {
const imgWidth = 232;
const imgHeight = 130;
const pageWidth = 297;
......@@ -101,7 +102,30 @@ const image2pdf = (imageType: string, type: string, key: string, dataType: stri
const header = (doc: jsPDF) => {
doc.setFontSize(26);
doc.setFont("arial", "bold");
doc.text("DATA KASUS TBC DEPOK", pageWidth/2, 18, {align:"center"});
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"});
}
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"})
}
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"})
else
if (chartType)
doc.text("Total : " + info.slice(0, 1) + " Kasus", pageWidth/2, 140, {align:"center"})
else
doc.text("Total : " + info.slice(0, 1) + " Kasus", pageWidth/2, 150, {align:"center"})
}
const writeTextToPDF = (doc: jsPDF) => {
......@@ -109,26 +133,26 @@ const image2pdf = (imageType: string, type: string, key: string, dataType: stri
doc.setFont("arial", "italic-bold");
if(key == "Tanggal")
if(dataType == "")
doc.text("Keseluruhan Kasus TBC di DEPOK", pageWidth/2, 160, {align:"center"});
doc.text("Keseluruhan Kasus TBC di DEPOK", pageWidth/2, 170, {align:"center"});
else
doc.text("Berdasarkan tanggal " + dataType, pageWidth/2, 160, {align:"center"})
doc.text("Berdasarkan tanggal " + dataType, pageWidth/2, 170, {align:"center"})
else
if(dataType == "")
doc.text("Keseluruhan Kasus TBC berdasarkan " + type + " " + key, pageWidth/2, 156, {align:"center"});
doc.text("Keseluruhan Kasus TBC berdasarkan " + type + " " + key, pageWidth/2, 165, {align:"center"});
else
doc.text(type + " " + key + " dari tanggal " + dataType, pageWidth/2, 156, {align:"center"});
doc.text(type + " " + key + " dari tanggal " + dataType, pageWidth/2, 165, {align:"center"});
doc.setFillColor(PIE_COLORS[0]);
doc.rect(30, 170, 5, 5, 'F');
doc.rect(30, 190, 5, 5, 'F');
doc.setFillColor(PIE_COLORS[1]);
doc.rect(30, 180, 5, 5, 'F');
doc.rect(120, 190, 5, 5, 'F');
doc.setFillColor(PIE_COLORS[2]);
doc.rect(30, 190, 5, 5, 'F');
doc.rect(220, 190, 5, 5, 'F');
doc.setFont("arial", "normal");
doc.text("Kasus Positif", 40, 174, {align:"left"});
doc.text("Kasus Negatif", 40, 184, {align:"left"});
doc.text("Kasus Terduga", 40, 194, {align:"left"});
doc.text("Kasus Positif", 40, 194, {align:"left"});
doc.text("Kasus Negatif", 130, 194, {align:"left"});
doc.text("Kasus Terduga", 230, 194, {align:"left"});
}
const svgToBlob = (svg: Element) => {
......@@ -170,7 +194,10 @@ const image2pdf = (imageType: string, type: string, key: string, dataType: stri
blobToImage(svgBlob).then(img => {
header(doc);
if (!chartType && key !== "Tanggal")
writeInfoCases(doc);
addImageToDoc(img, doc);
writeTotal(doc);
writeTextToPDF(doc);
if(key == "Tanggal")
if (dataType == "")
......@@ -186,8 +213,8 @@ const image2pdf = (imageType: string, type: string, key: string, dataType: stri
});
};
const downloadAsPDF = (type: string, selectedKey: string, dataType: string) => {
image2pdf("PNG", type, translate(selectedKey), dataType);
const downloadAsPDF = (type: string, selectedKey: string, dataType: string, chartType: boolean, info: string) => {
image2pdf("PNG", type, translate(selectedKey), dataType, chartType, info);
}
export { translate, renderActiveShape, image2pdf, downloadAsPDF, translateTypetoKey };
\ 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