PieChart

samples/App.tsx

@@ -4,6 +4,10 @@ import NavBar from './utils/NavBar';
 import NormalBarChart from './pages/NormalBarChart';
 import StackedBarChart from './pages/StackedBarChart';
 import RangedBarChart from './pages/RangedBarChart';
+import DoubleLayerPieChart from './pages/DoubleLayerPieChart';
+import PieChart from './pages/PieChart';
+import StraightAnglePieChart from './pages/StraightAnglePieChart';
+import PieChartWithPaddingAngle from './pages/PieChartWithPaddingAngle';
 
 const App = () => {
   return (
@@ -14,6 +18,10 @@ const App = () => {
           <Route path="/" element={<NormalBarChart />} />
           <Route path="/stacked" element={<StackedBarChart />} />
           <Route path="/ranged" element={<RangedBarChart />} />
+          <Route path="/double-layer-pie" element={<DoubleLayerPieChart />} />
+          <Route path="/pie-chart" element={<PieChart />} />
+          <Route path="/straight-angle-pie" element={<StraightAnglePieChart />} />
+          <Route path="/padding-angle-pie" element={<PieChartWithPaddingAngle />} />
         </Routes>
       </div>
     </Router>

samples/pages/DoubleLayerPieChart.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import PieChart from '../../src/PieChart';
+import Pie from '../../src/Pie';
+import PolarGrid from '../../src/PolarGrid';
+import Tooltip from '../../src/Tooltip';
+import Legend from '../../src/Legend';
+import PieChartControls from '../utils/PieChartControls';
+
+const data01 = [
+  { name: 'Group A', value: 400 },
+  { name: 'Group B', value: 300 },
+  { name: 'Group C', value: 300 },
+  { name: 'Group D', value: 200 },
+  { name: 'Group E', value: 278 },
+  { name: 'Group F', value: 189 },
+];
+
+const data02 = [
+  { name: 'Group A', value: 2400 },
+  { name: 'Group B', value: 4567 },
+  { name: 'Group C', value: 1398 },
+  { name: 'Group D', value: 9800 },
+  { name: 'Group E', value: 3908 },
+  { name: 'Group F', value: 4800 },
+];
+
+const PieChartExample: React.FC = () => {
+  const [showPolarGrid, setShowPolarGrid] = useState(true);
+  const [pies, setPies] = useState([
+    { id: 1, innerRadius: 0, outerRadius: 50, cx: '50%', cy: '50%', showLabels: false },
+    { id: 2, innerRadius: 60, outerRadius: 80, cx: '50%', cy: '50%', showLabels: true },
+  ]);
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-semibold mb-4">PieChart</h1>
+      <div className="flex flex-col lg:flex-row gap-6">
+        <PieChartControls pies={pies} setPies={setPies} showPolarGrid={showPolarGrid} setShowPolarGrid={setShowPolarGrid} />
+        <PieChart width={730} height={250}>
+          {showPolarGrid && <PolarGrid />}
+          {pies.map((pie) => (
+            <Pie
+              key={pie.id}
+              data={pie.id === 1 ? data01 : data02}
+              dataKey="value"
+              nameKey="name"
+              cx={pie.cx}
+              cy={pie.cy}
+              innerRadius={pie.innerRadius}
+              outerRadius={pie.outerRadius}
+              fill={pie.id === 1 ? '#8884d8' : '#82ca9d'}
+              label={pie.showLabels}
+            />
+          ))}
+          <Tooltip />
+          <Legend />
+        </PieChart>
+      </div>
+    </div>
+  );
+};
+
+export default PieChartExample;

samples/pages/PieChart.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import PieChart from '../../src/PieChart';
+import Pie from '../../src/Pie';
+import PolarGrid from '../../src/PolarGrid';
+import Tooltip from '../../src/Tooltip';
+import Legend from '../../src/Legend';
+import PieChartControls from '../utils/PieChartControls';
+
+const data01 = [
+  { name: 'Group A', value: 400 },
+  { name: 'Group B', value: 300 },
+  { name: 'Group C', value: 300 },
+  { name: 'Group D', value: 200 },
+  { name: 'Group E', value: 278 },
+  { name: 'Group F', value: 189 },
+];
+
+const PieChartExample: React.FC = () => {
+  const [showPolarGrid, setShowPolarGrid] = useState(true);
+  const [pies, setPies] = useState([
+    { id: 1, innerRadius: 0, outerRadius: 80, cx: '50%', cy: '50%', showLabels: true },
+  ]);
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-semibold mb-4">Pie Chart</h1>
+      <div className="flex flex-col lg:flex-row gap-6">
+        <PieChartControls pies={pies} setPies={setPies} showPolarGrid={showPolarGrid} setShowPolarGrid={setShowPolarGrid} />
+        <PieChart width={730} height={250}>
+          {showPolarGrid && <PolarGrid />}
+          <Pie
+            data={data01}
+            dataKey="value"
+            nameKey="name"
+            cx={pies[0].cx}
+            cy={pies[0].cy}
+            innerRadius={pies[0].innerRadius}
+            outerRadius={pies[0].outerRadius}
+            fill="#8884d8"
+            label={pies[0].showLabels}
+          />
+          <Tooltip />
+          <Legend />
+        </PieChart>
+      </div>
+    </div>
+  );
+};
+
+export default PieChartExample;

samples/pages/PieChartWithPaddingAngle.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import PieChart from '../../src/PieChart';
+import Pie from '../../src/Pie';
+import PolarGrid from '../../src/PolarGrid';
+import Tooltip from '../../src/Tooltip';
+import Legend from '../../src/Legend';
+import PieChartControls from '../utils/PieChartControls';
+
+const data01 = [
+  { "name": "Group A", "value": 400 },
+  { "name": "Group B", "value": 300 },
+  { "name": "Group C", "value": 300 },
+  { "name": "Group D", "value": 200 },
+  { "name": "Group E", "value": 278 },
+  { "name": "Group F", "value": 189 }
+];
+
+const PieChartWithPaddingAngle: React.FC = () => {
+  const [pies, setPies] = useState([{
+    id: 1,
+    innerRadius: 0,
+    outerRadius: 80,
+    cx: '50%',
+    cy: '50%',
+    showLabels: true,
+    startAngle: 0,
+    endAngle: 360,
+    paddingAngle: 5,
+  }]);
+  const [showPolarGrid, setShowPolarGrid] = useState(true);
+
+  return (
+    <div className="flex gap-6 p-6">
+      <PieChartControls
+        pies={pies}
+        setPies={setPies}
+        showPolarGrid={showPolarGrid}
+        setShowPolarGrid={setShowPolarGrid}
+      />
+      <div className="flex-grow">
+        <h1 className="text-2xl font-semibold mb-4">Pie Chart with Padding Angle</h1>
+        <PieChart width={730} height={250}>
+          {showPolarGrid && <PolarGrid />}
+          {pies.map((pie) => (
+            <Pie 
+              key={pie.id}
+              data={data01} 
+              dataKey="value" 
+              nameKey="name" 
+              cx={pie.cx} 
+              cy={pie.cy} 
+              innerRadius={pie.innerRadius} 
+              outerRadius={pie.outerRadius} 
+              fill="#8884d8" 
+              label={pie.showLabels}
+              startAngle={pie.startAngle}
+              endAngle={pie.endAngle}
+              paddingAngle={pie.paddingAngle}
+            />
+          ))}
+          <Tooltip />
+          <Legend />
+        </PieChart>
+      </div>
+    </div>
+  );
+};
+
+export default PieChartWithPaddingAngle;

samples/pages/StraightAnglePieChart.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import PieChart from '../../src/PieChart';
+import Pie from '../../src/Pie';
+import PolarGrid from '../../src/PolarGrid';
+import Tooltip from '../../src/Tooltip';
+import Legend from '../../src/Legend';
+import PieChartControls from '../utils/PieChartControls';
+
+const data = [
+  { name: 'Group A', value: 400 },
+  { name: 'Group B', value: 300 },
+  { name: 'Group C', value: 300 },
+  { name: 'Group D', value: 200 },
+  { name: 'Group E', value: 278 },
+  { name: 'Group F', value: 189 },
+];
+
+const StraightAnglePieChart: React.FC = () => {
+  const [showPolarGrid, setShowPolarGrid] = useState(true);
+  const [pies, setPies] = useState([
+    { id: 1, innerRadius: 0, outerRadius: 80, cx: '50%', cy: '50%', showLabels: true, startAngle: 0, endAngle: 180 },
+  ]);
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-semibold mb-4">Straight Angle Pie Chart</h1>
+      <div className="flex flex-col lg:flex-row gap-6">
+        <PieChartControls pies={pies} setPies={setPies} showPolarGrid={showPolarGrid} setShowPolarGrid={setShowPolarGrid} />
+        <PieChart width={730} height={250}>
+          {showPolarGrid && <PolarGrid />}
+          <Pie
+            data={data}
+            dataKey="value"
+            nameKey="name"
+            cx={pies[0].cx}
+            cy={pies[0].cy}
+            innerRadius={pies[0].innerRadius}
+            outerRadius={pies[0].outerRadius}
+            fill="#8884d8"
+            label={pies[0].showLabels}
+            startAngle={pies[0].startAngle}
+            endAngle={pies[0].endAngle}
+          />
+          <Tooltip />
+          <Legend />
+        </PieChart>
+      </div>
+    </div>
+  );
+};
+
+export default StraightAnglePieChart;

samples/utils/NavBar.tsx

@@ -1,30 +1,65 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
 const NavBar = () => {
   const location = useLocation();
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
 
-  const navItems = [
-    { name: 'Normal BarChart', path: '/' },
-    { name: 'Stacked BarChart', path: '/stacked' },
-    { name: 'Ranged BarChart', path: '/ranged' },
+  const handleDropdownToggle = (category: string) => {
+    setOpenDropdown(openDropdown === category ? null : category);
+  };
+
+  const navSections = [
+    {
+      category: 'Bar Charts',
+      items: [
+        { name: 'Normal BarChart', path: '/' },
+        { name: 'Stacked BarChart', path: '/stacked' },
+        { name: 'Ranged BarChart', path: '/ranged' },
+      ],
+    },
+    {
+      category: 'Pie Charts',
+      items: [
+        { name: 'Double Layer Pie Chart', path: '/double-layer-pie' },
+        { name: 'Pie Chart', path: '/pie-chart' },
+        { name: 'Straight Angle Pie Chart', path: '/straight-angle-pie' },
+        { name: 'Pie Chart with Padding Angle', path: '/padding-angle-pie' },
+      ],
+    },
   ];
 
   return (
-    <nav className="bg-white p-4 shadow-lg mb-5">
+    <nav className="bg-white p-4 shadow-lg stroke-purple-600 mb-5">
       <div className="container mx-auto flex justify-center space-x-6">
-        {navItems.map((item) => (
-          <Link
-            key={item.path}
-            to={item.path}
-            className={`text-purple-600 py-2 px-4 rounded-lg ${
-              location.pathname === item.path
-                ? 'bg-purple-100'
-                : 'hover:bg-purple-200 hover:text-purple-800'
-            } transition duration-300 ease-in-out`}
-          >
-            {item.name}
-          </Link>
+        {navSections.map((section) => (
+          <div className="relative" key={section.category}>
+            <button
+              onClick={() => handleDropdownToggle(section.category)}
+              className="text-purple-600 py-2 px-4 rounded-lg hover:bg-purple-600 hover:text-white transition duration-300 ease-in-out"
+            >
+              {section.category}
+            </button>
+            {openDropdown === section.category && (
+              <div className="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
+                <ul className="py-1">
+                  {section.items.map((item) => (
+                    <li key={item.path}>
+                      <Link
+                        to={item.path}
+                        className={`block px-4 py-2 text-purple-600 hover:bg-purple-200 ${
+                          location.pathname === item.path ? 'bg-purple-400 text-white' : ''
+                        }`}
+                        onClick={() => setOpenDropdown(null)}
+                      >
+                        {item.name}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
         ))}
       </div>
     </nav>