Fakultas Ilmu Komputer UI

Commit aa0f6591 authored by Nabilah Adani's avatar Nabilah Adani
Browse files

Merge branch 'pbi-13-diagram-statistik-kasus' into 'staging'

Pbi 13 diagram statistik kasus

See merge request !50
parents 8facf5b7 46b44012
Pipeline #81729 passed with stages
in 8 minutes and 29 seconds
......@@ -7,18 +7,24 @@ const dummyImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASoAAAEsCAYAAA
describe('<ExportPDFButton />', () => {
it('should render correctly', () => {
shallow(<ExportPDFButton
png={dummyImage}
type={''}
selectedKey={''}
dataType={''}
chartType={true}
totalCount={''}
information={[0,1]}
clickable={false} />);
})
it('should call downloadAsPDF', () => {
const mod = require('../../utilities/utils');
jest.spyOn(mod, 'downloadAsPDF');
const btn = shallow(<ExportPDFButton
png={dummyImage}
type={''}
selectedKey={''}
dataType={''}
chartType={true}
totalCount={''}
information={[0,1]}
clickable={false} />);
btn.find('Button').simulate('click');
expect(mod.downloadAsPDF).toHaveBeenCalled();
......
......@@ -6,14 +6,17 @@ interface ExportPDFButtonProps {
type: string,
selectedKey: string,
dataType: string,
chartType: boolean,
totalCount: string,
information: Array<number>,
clickable: boolean,
}
function ExportPDFButton({
type, selectedKey, dataType, clickable
type, selectedKey, dataType, chartType, totalCount, 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, totalCount: string, information: Array<number>) => {
downloadAsPDF(type, selectedKey, dataType, chartType, totalCount, information);
}, []);
return (
<Box
......@@ -24,7 +27,7 @@ function ExportPDFButton({
>
<Button
isBold={false}
onClick={() => handleDownload(type, selectedKey, dataType)}
onClick={() => handleDownload(type, selectedKey, dataType, chartType, totalCount, information)}
clickable={clickable}
>
Export PDF
......
......@@ -48,7 +48,7 @@ describe('<Statistic />', () => {
}
};
it('render diagram statistics without crashing', () => {
it('render diagram statistics without crashing', () => {
mount(
<AppContext.Provider value={testProps}>
<Statistic
......@@ -60,7 +60,7 @@ describe('<Statistic />', () => {
);
});
it('render table statistics without crashing', () => {
it('render table statistics without crashing', () => {
mount(
<AppContext.Provider value={testProps}>
<Statistic
......@@ -72,7 +72,7 @@ describe('<Statistic />', () => {
);
});
it('render table age statistics without crashing', () => {
it('render table age statistics without crashing', () => {
mount(
<AppContext.Provider value={testProps}>
<Statistic
......@@ -84,9 +84,9 @@ describe('<Statistic />', () => {
);
});
it('render sex stats chart successfully', () => {
it('render sex stats chart successfully', () => {
mount(
<AppContext.Provider value={testProps}>
<AppContext.Provider value={testProps}>
<Statistic
isTable={false}
type={StatisticType.Sex}
......@@ -96,7 +96,7 @@ describe('<Statistic />', () => {
);
});
it('render kasus in time range stats chart successfully', () => {
it('render kasus in time range stats chart successfully', () => {
mount(
<AppContext.Provider value={testProps}>
<Statistic
......@@ -108,7 +108,7 @@ describe('<Statistic />', () => {
);
});
it('sets ignoreDateRange state after clicking ignoreDateRange button', () => {
it('sets ignoreDateRange Statistics state after clicking ignoreDateRange button', () => {
const wrapper = mount(<Statistic
isTable={false}
type={StatisticType.Date}
......@@ -118,9 +118,22 @@ describe('<Statistic />', () => {
expect(wrapper.find(Checkbox).props().isChecked).toBe(false);
wrapper.find(Checkbox).simulate('click');
expect(wrapper.find(Checkbox).props().isChecked).toBe(true);
})
});
it('sets ignoreDateRangeFilter age after clicking ignoreDateRangeFilter button', () => {
const wrapper = mount(<Statistic
isTable={false}
type={StatisticType.Age}
data={statisticData.age}
/>);
expect(wrapper.find(Checkbox).props().isChecked).toBe(false);
wrapper.find(Checkbox).simulate('click');
expect(wrapper.find(Checkbox).props().isChecked).toBe(true);
});
it('render table district in time range stats chart successfully', () => {
it('render table district in time range stats chart successfully', () => {
mount(
<AppContext.Provider value={testProps}>
<Statistic
......@@ -132,7 +145,7 @@ describe('<Statistic />', () => {
);
});
it('sets ignoreDateRangeTable false state after clicking ignoreDateRangeTable button', () => {
it('sets ignoreDateRangeTable false state after clicking ignoreDateRangeTable button', () => {
const wrapper = mount(<Statistic
isTable={true}
type={StatisticType.Date}
......
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
......@@ -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,
......@@ -42,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 {
......@@ -88,8 +115,9 @@ 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, total: string, info: Array<number>) => {
const imgWidth = 232;
const imgHeight = 130;
const pageWidth = 297;
const pageHeight = 210;
......@@ -97,38 +125,121 @@ 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");
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 : " + 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 : " + total, pageWidth/2, 155, {align:"center"})
else
if (chartType)
doc.text("Total : " + total + " Kasus", pageWidth/2, 140, {align:"center"})
else
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 == "")
doc.text("Keseluruhan Kasus TBC di DEPOK", pageWidth/2, 160, {align:"center"});
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, 160, {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 == "")
doc.text("Keseluruhan Kasus TBC berdasarkan " + type + " " + key, pageWidth/2, 156, {align:"center"});
else
doc.text(type + " " + key + " dari tanggal " + dataType, pageWidth/2, 156, {align:"center"});
if(dataType === "")
doc.text("Keseluruhan Kasus TBC berdasarkan " + type + " " + key, 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, 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) => {
......@@ -147,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");
......@@ -170,24 +281,39 @@ const image2pdf = (imageType: string, type: string, key: string, dataType: stri
blobToImage(svgBlob).then(img => {
header(doc);
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) => {
image2pdf("PNG", type, translate(selectedKey), dataType);
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