Pie chart avance2 (#11)

* PieChart basico funcionando * Ui and utility changes * StraightAnglePieChart * Padding Angle View * Last ui changes and Linting * Customized Label * Pie Chart Controls dinamicos * Active Shape view * Ultimos cambios y linting * Deleted cooments
unosquare · Sep 11, 2024 · 185cf82 · 185cf82
1 parent c6de184
commit 185cf82
Show file tree

Hide file tree

Showing 6 changed files with 341 additions and 112 deletions.
diff --git a/samples/App.tsx b/samples/App.tsx
@@ -1,3 +1,5 @@
+// App.tsx
+
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import NavBar from './utils/NavBar';
@@ -8,6 +10,9 @@ import DoubleLayerPieChart from './pages/DoubleLayerPieChart';
 import PieChart from './pages/PieChart';
 import StraightAnglePieChart from './pages/StraightAnglePieChart';
 import PieChartWithPaddingAngle from './pages/PieChartWithPaddingAngle';
+import PieChartWithCustomizedLabel from './pages/PieChartWithCustomizedLabel';
+import CustomActiveShapePieChart from './pages/CustomActiveShapePieChart';
+
 
 const App = () => {
   return (
@@ -21,7 +26,9 @@ const App = () => {
           <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 />} />
+          <Route path="/pie-chart-with-padding-angle" element={<PieChartWithPaddingAngle />} />
+          <Route path="/pie-chart-with-customized-label" element={<PieChartWithCustomizedLabel />} />
+          <Route path="/custom-active-shape-pie" element={<CustomActiveShapePieChart />} />
         </Routes>
       </div>
     </Router>

diff --git a/samples/pages/CustomActiveShapePieChart.tsx b/samples/pages/CustomActiveShapePieChart.tsx
@@ -0,0 +1,67 @@
+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 CustomActiveShapePieChart: React.FC = () => {
+  const [pies, setPies] = useState([
+    {
+      id: 1,
+      innerRadius: 0,
+      outerRadius: 80,
+      cx: '50%',
+      cy: '50%',
+      showLabels: true,
+      startAngle: 0,
+      endAngle: 360,
+      label: 'percent',
+      activeShape: true,
+    },
+  ]);
+  const [showPolarGrid, setShowPolarGrid] = useState(true);
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-semibold mb-4">Custom Active Shape Pie Chart</h1>
+      <div className="flex 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={data01}
+              dataKey="value"
+              nameKey="name"
+              cx={pie.cx}
+              cy={pie.cy}
+              innerRadius={pie.innerRadius}
+              outerRadius={pie.outerRadius}
+              startAngle={pie.startAngle}
+              endAngle={pie.endAngle}
+              fill="#8884d8"
+              label={pie.label}
+              activeShape={pie.activeShape}
+            />
+          ))}
+          <Tooltip />
+          <Legend />
+        </PieChart>
+      </div>
+    </div>
+  );
+};
+
+export default CustomActiveShapePieChart;
diff --git a/samples/pages/PieChartWithCustomizedLabel.tsx b/samples/pages/PieChartWithCustomizedLabel.tsx
@@ -0,0 +1,70 @@
+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 PieChartWithCustomizedLabel: React.FC = () => {
+  const [pies, setPies] = useState([
+    {
+      id: 1,
+      innerRadius: 0,
+      outerRadius: 80,
+      cx: '50%',
+      cy: '50%',
+      showLabels: true,
+      startAngle: 0,
+      endAngle: 360,
+      label: ['A', 'B', 'C', 'D', 'E', 'F'],
+    },
+  ]);
+  const [showPolarGrid, setShowPolarGrid] = useState(true);
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-semibold mb-4">PieChart With Customized Label</h1>
+      <div className="flex">
+        <PieChartControls 
+          pies={pies} 
+          setPies={setPies} 
+          showPolarGrid={showPolarGrid} 
+          setShowPolarGrid={setShowPolarGrid} 
+        />
+        <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}
+              startAngle={pie.startAngle}
+              endAngle={pie.endAngle}
+              fill="#8884d8"
+              label={pie.showLabels ? pie.label : false}
+            />
+          ))}
+          <Tooltip />
+          <Legend />
+        </PieChart>
+      </div>
+    </div>
+  );
+};
+
+export default PieChartWithCustomizedLabel;
diff --git a/samples/utils/NavBar.tsx b/samples/utils/NavBar.tsx
@@ -1,3 +1,4 @@
+// NavBar.tsx
 import React, { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
@@ -21,10 +22,12 @@ const NavBar = () => {
     {
       category: 'Pie Charts',
       items: [
-        { name: 'Double Layer Pie Chart', path: '/double-layer-pie' },
         { name: 'Pie Chart', path: '/pie-chart' },
+        { name: 'Double Layer Pie Chart', path: '/double-layer-pie' },
         { name: 'Straight Angle Pie Chart', path: '/straight-angle-pie' },
-        { name: 'Pie Chart with Padding Angle', path: '/padding-angle-pie' },
+        { name: 'Pie Chart with Padding Angle', path: '/pie-chart-with-padding-angle' },
+        { name: 'Pie Chart with Customized Label', path: '/pie-chart-with-customized-label' },
+        { name: 'Custom Active Shape Pie Chart', path: '/custom-active-shape-pie' },
       ],
     },
   ];