diff --git a/samples/pages/CustomActiveShapePieChart.tsx b/samples/pages/CustomActiveShapePieChart.tsx index a70dc41..8ab87fc 100644 --- a/samples/pages/CustomActiveShapePieChart.tsx +++ b/samples/pages/CustomActiveShapePieChart.tsx @@ -26,7 +26,7 @@ const CustomActiveShapePieChart: React.FC = () => { showLabels: true, startAngle: 0, endAngle: 360, - label: 'percent', + label: 'percent' as "percent", activeShape: true, }, ]); @@ -52,7 +52,7 @@ const CustomActiveShapePieChart: React.FC = () => { startAngle={pie.startAngle} endAngle={pie.endAngle} fill="#8884d8" - label={pie.label} + label={pie.label as "percent"} activeShape={pie.activeShape} /> ))} diff --git a/samples/pages/PieChart.tsx b/samples/pages/PieChart.tsx index f69c04f..a7c607e 100644 --- a/samples/pages/PieChart.tsx +++ b/samples/pages/PieChart.tsx @@ -37,7 +37,7 @@ const PieChartExample: React.FC = () => { innerRadius={pies[0].innerRadius} outerRadius={pies[0].outerRadius} fill="#8884d8" - label={pies[0].showLabels} + label={pies[0].showLabels ? "percent" : undefined} /> diff --git a/samples/pages/PieChartWithCustomizedLabel.tsx b/samples/pages/PieChartWithCustomizedLabel.tsx index fe0cc53..54b1e1f 100644 --- a/samples/pages/PieChartWithCustomizedLabel.tsx +++ b/samples/pages/PieChartWithCustomizedLabel.tsx @@ -15,8 +15,21 @@ const data01 = [ { "name": "Group F", "value": 189 } ]; +interface PieData { + id: number; + innerRadius?: number; + outerRadius?: number; + cx?: string | number; + cy?: string | number; + showLabels?: boolean; + startAngle?: number; + endAngle?: number; + label?: boolean | string[] | "percent"; + activeShape?: boolean; +} + const PieChartWithCustomizedLabel: React.FC = () => { - const [pies, setPies] = useState([ + const [pies, setPies] = useState([ { id: 1, innerRadius: 0, @@ -49,14 +62,14 @@ const PieChartWithCustomizedLabel: React.FC = () => { data={data01} dataKey="value" nameKey="name" - cx={pie.cx} - cy={pie.cy} + cx={pie.cx ?? '50%'} + cy={pie.cy ?? '50%'} innerRadius={pie.innerRadius} - outerRadius={pie.outerRadius} + outerRadius={pie.outerRadius ?? 0} startAngle={pie.startAngle} endAngle={pie.endAngle} fill="#8884d8" - label={pie.showLabels ? pie.label : false} + label={pie.showLabels ? (pie.label as string[] | "percent") : undefined} /> ))} diff --git a/samples/pages/PieChartWithPaddingAngle.tsx b/samples/pages/PieChartWithPaddingAngle.tsx index 7a61c1f..9397f6a 100644 --- a/samples/pages/PieChartWithPaddingAngle.tsx +++ b/samples/pages/PieChartWithPaddingAngle.tsx @@ -16,7 +16,18 @@ const data01 = [ ]; const PieChartWithPaddingAngle: React.FC = () => { - const [pies, setPies] = useState([{ + const [pies, setPies] = useState>([{ id: 1, innerRadius: 0, outerRadius: 80, @@ -47,12 +58,12 @@ const PieChartWithPaddingAngle: React.FC = () => { data={data01} dataKey="value" nameKey="name" - cx={pie.cx} - cy={pie.cy} + cx={pie.cx ?? '50%'} + cy={pie.cy ?? '50%'} innerRadius={pie.innerRadius} - outerRadius={pie.outerRadius} + outerRadius={pie.outerRadius ?? 0} fill="#8884d8" - label={pie.showLabels} + label={pie.showLabels ? "percent" : undefined} startAngle={pie.startAngle} endAngle={pie.endAngle} paddingAngle={pie.paddingAngle} diff --git a/samples/pages/StraightAnglePieChart.tsx b/samples/pages/StraightAnglePieChart.tsx index d29ced3..5007d4b 100644 --- a/samples/pages/StraightAnglePieChart.tsx +++ b/samples/pages/StraightAnglePieChart.tsx @@ -17,7 +17,7 @@ const data = [ const StraightAnglePieChart: React.FC = () => { const [showPolarGrid, setShowPolarGrid] = useState(true); - const [pies, setPies] = useState([ + const [pies, setPies] = useState<{ id: number; innerRadius?: number; outerRadius?: number; cx?: string | number; cy?: string | number; showLabels?: boolean; startAngle?: number; endAngle?: number; activeShape?: boolean }[]>([ { id: 1, innerRadius: 0, outerRadius: 80, cx: '50%', cy: '50%', showLabels: true, startAngle: 0, endAngle: 180 }, ]); @@ -32,12 +32,12 @@ const StraightAnglePieChart: React.FC = () => { data={data} dataKey="value" nameKey="name" - cx={pies[0].cx} - cy={pies[0].cy} + cx={pies[0].cx ?? '50%'} + cy={pies[0].cy ?? '50%'} innerRadius={pies[0].innerRadius} - outerRadius={pies[0].outerRadius} + outerRadius={pies[0].outerRadius ?? 0} fill="#8884d8" - label={pies[0].showLabels} + label={pies[0].showLabels ? "percent" : undefined} startAngle={pies[0].startAngle} endAngle={pies[0].endAngle} /> diff --git a/samples/utils/PieChartControls.tsx b/samples/utils/PieChartControls.tsx index cc5f0b7..891d225 100644 --- a/samples/utils/PieChartControls.tsx +++ b/samples/utils/PieChartControls.tsx @@ -32,7 +32,7 @@ interface PieChartControlsProps { } const PieChartControls: React.FC = ({ pies, setPies, showPolarGrid, setShowPolarGrid }) => { - const handlePieChange = (index: number, key: keyof typeof pies[number], value: string | number | boolean) => { + const handlePieChange = (index: number, key: K, value: typeof pies[number][K]) => { const updatedPies = [...pies]; updatedPies[index][key] = value; setPies(updatedPies); diff --git a/src/Pie/Pie.spec.tsx b/src/Pie/Pie.spec.tsx new file mode 100644 index 0000000..2e09d26 --- /dev/null +++ b/src/Pie/Pie.spec.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { render, fireEvent } from '@testing-library/react'; +import Pie from './index'; + +describe('Pie', () => { + const mockData = [ + { name: 'Group A', value: 400 }, + { name: 'Group B', value: 300 }, + { name: 'Group C', value: 300 }, + ]; + + it('renders without crashing', () => { + const { container } = render( + + + + ); + expect(container).toBeInTheDocument(); + }); + + it('displays the correct number of pie segments', () => { + const { container } = render( + + + + ); + const paths = container.querySelectorAll('path'); + expect(paths.length).toBe(mockData.length); + }); + + it('changes shape when activeShape is true', () => { + const { container } = render( + + ); + + const path = container.querySelector('path'); + fireEvent.mouseEnter(path!); + + setTimeout(() => { + expect(path).toHaveStyle('transform: scale(1.05)'); + }, 200); + }); +}); diff --git a/src/Pie/index.tsx b/src/Pie/index.tsx index 4088283..59a097b 100644 --- a/src/Pie/index.tsx +++ b/src/Pie/index.tsx @@ -3,7 +3,7 @@ import { v4 as uuidv4 } from 'uuid'; interface PieProps { data: Array<{ name: string; value: number }>; - dataKey: string; + dataKey: keyof { name: string; value: number }; nameKey: string; cx: string | number; cy: string | number; @@ -35,7 +35,7 @@ const Pie: React.FC = ({ const computedCx = typeof cx === 'string' && cx.endsWith('%') ? (parseFloat(cx) / 100) * 730 : cx; const computedCy = typeof cy === 'string' && cy.endsWith('%') ? (parseFloat(cy) / 100) * 250 : cy; - const totalValue = data.reduce((acc, item) => acc + item[dataKey], 0); + const totalValue = data.reduce((acc, item) => acc + (item[dataKey] as number), 0); // Ajuste aquí const angleRange = endAngle - startAngle; let currentAngle = startAngle + 180; @@ -45,7 +45,7 @@ const Pie: React.FC = ({ return ( {data.map((entry, index) => { - const value = entry[dataKey]; + const value = entry[dataKey] as number; // Ajuste aquí const angle = (value / totalValue) * angleRange - paddingAngle; const nextAngle = currentAngle + angle; const largeArcFlag = angle > 180 ? 1 : 0; diff --git a/src/PieChart/PieChart.spec.tsx b/src/PieChart/PieChart.spec.tsx new file mode 100644 index 0000000..a41f262 --- /dev/null +++ b/src/PieChart/PieChart.spec.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import PieChart from './index'; +import Pie from '../Pie'; + +describe('PieChart', () => { + const mockData = [ + { name: 'Group A', value: 400 }, + { name: 'Group B', value: 300 }, + ]; + + it('renders without crashing', () => { + const { container } = render( + + + + ); + expect(container).toBeInTheDocument(); + }); + + it('renders with correct width and height', () => { + const { container } = render( + + + + ); + const svg = container.querySelector('svg'); + expect(svg).toHaveAttribute('width', '500'); + expect(svg).toHaveAttribute('height', '400'); + }); +}); diff --git a/src/PolarGrid/PolarGrid.spec.tsx b/src/PolarGrid/PolarGrid.spec.tsx new file mode 100644 index 0000000..b261313 --- /dev/null +++ b/src/PolarGrid/PolarGrid.spec.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import PolarGrid from './index'; + +describe('PolarGrid', () => { + it('renders without crashing', () => { + const { container } = render( + + + + ); + expect(container).toBeInTheDocument(); + }); + + it('renders correct number of radial lines and concentric circles', () => { + const { container } = render( + + + + ); + const lines = container.querySelectorAll('line'); + const circles = container.querySelectorAll('circle'); + expect(lines.length).toBe(8); + expect(circles.length).toBe(4); + }); + + it('applies correct stroke color', () => { + const { container } = render( + + + + ); + const lines = container.querySelector('line'); + const circles = container.querySelector('circle'); + expect(lines).toHaveAttribute('stroke', '#123456'); + expect(circles).toHaveAttribute('stroke', '#123456'); + }); +});