Fakultas Ilmu Komputer UI

Commit 3e384306 authored by Nabilah Adani's avatar Nabilah Adani
Browse files

Merge branch 'pbi-3-export-diagram-statistik-kasus' into 'inigo/download-as-pdf-2'

# Conflicts:
#   src/scenes/Home/components/Statistic/index.tsx
parents 5e2fdc5f 8d3c6a5f
Pipeline #64240 failed with stages
in 9 minutes and 26 seconds
import React, { useContext, useState, useEffect } from 'react';
import { Box, Text, Field, Gap, Button, Table, CategoryButton } from 'components';
import { PieChart, Pie, Cell, BarChart, CartesianGrid, XAxis, Tooltip, Legend, YAxis, Bar } from 'recharts';
import { PieChart, Pie, Cell, BarChart, CartesianGrid, XAxis, Tooltip, Legend, YAxis, Bar, Line } from 'recharts';
import { AppContext } from 'contexts';
import { KECAMATAN_VALUES, PIE_COLORS, GENDER_VALUES } from 'constant';
import { renderActiveShape, translate, downloadAsPDF } from 'scenes/Home/utilities/utils';
......@@ -31,14 +31,11 @@ function Statistic({
minAge: 0,
maxAge: 0,
});
const [activeIndex, setActiveIndex] = useState<number>(0);
const [activeIndex, setActiveIndex] = useState<number[]>([0,1,2]);
const [
selectedKeyData,
setselectedKeyData
] = useState<any[]>([{}]);
const onPieEnter = (_pData: any, index: number) => {
setActiveIndex(index);
};
const [png, ref] = useRechartToPng();
......@@ -145,19 +142,29 @@ function Statistic({
activeIndex={activeIndex}
activeShape={renderActiveShape}
data={selectedKeyData}
cx={200}
cx={210}
cy={120}
innerRadius={60}
outerRadius={80}
dataKey="jumlah"
onMouseEnter={onPieEnter}
>
{
selectedKeyData.map((entry, index) =>
<Cell key={`cell-${entry}`} fill={PIE_COLORS[index % PIE_COLORS.length]} />
<Cell key={`cell-${entry}`} fill={PIE_COLORS[index % PIE_COLORS.length]} />
)
}
</Pie>
<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]}
]
}/>
</PieChart>
);
}
......
......@@ -43,7 +43,6 @@ const renderActiveShape = (props: ActiveShapeProps) => {
return (
<g>
<text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>{payload.name}</text>
<Sector
cx={cx}
cy={cy}
......
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