Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ScatterChart #18

Merged
merged 13 commits into from
Nov 7, 2024
Merged

ScatterChart #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3a50214
First ScatterChart Approach
v3gaaa Nov 1, 2024
3f60802
Añadido a navbar y arreglos de renderizacion
v3gaaa Nov 4, 2024
1fbf1a8
Rework de los ejes y del ScatterChart
v3gaaa Nov 4, 2024
60a424d
Design overhaul of all graphs
v3gaaa Nov 4, 2024
fbaba97
Fixed duplicated code issues
v3gaaa Nov 5, 2024
ffcc022
samples/utils reestructure
v3gaaa Nov 5, 2024
eb73a25
Axis code reestructure
v3gaaa Nov 5, 2024
058f22f
Wrapper UI rework
v3gaaa Nov 5, 2024
ae9502b
Fixed duplicated code on Line Bar and Scatter Controls
v3gaaa Nov 5, 2024
bd75390
Sonarlint Fixes
v3gaaa Nov 5, 2024
f33df94
PieChart Wrapper
v3gaaa Nov 5, 2024
f00122c
Pie Chart fixes
v3gaaa Nov 5, 2024
9c85022
Linting
v3gaaa Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 25 additions & 22 deletions samples/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// App.tsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import NavBar from './utils/NavBar';
import Home from './pages/Home';
import NormalBarChart from './pages/NormalBarChart';
import StackedBarChart from './pages/StackedBarChart';
import RangedBarChart from './pages/RangedBarChart';
Expand All @@ -14,35 +14,38 @@ import CustomActiveShapePieChart from './pages/CustomActiveShapePieChart';
import LineChartExample from './pages/LineChartExample';
import DashedLineChart from './pages/DashedLineChart';
import ReferenceLineChart from './pages/ReferenceLineChart';
import TinyLineChart from './pages/TinyLineChart';
import NoNullsChart from './pages/NoNulls';
import LineChartWithLabels from './pages/LineChartWithLabels';
import ScatterChartExample from './pages/ScatterChartExample';

const App = () => {
const App: React.FC = () => {
return (
<Router>
<div>
<div className="min-h-screen">
<NavBar />
<Routes>
<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="/pie-chart-with-padding-angle" element={<PieChartWithPaddingAngle />} />
<Route path="/pie-chart-with-customized-label" element={<PieChartWithCustomizedLabel />} />
<Route path="/custom-active-shape-pie" element={<CustomActiveShapePieChart />} />
<Route path="/line-chart" element={<LineChartExample />} />
<Route path="/dashed-line-chart" element={<DashedLineChart />} />
<Route path="/reference-line-chart" element={<ReferenceLineChart />} />
<Route path="/tiny-line-chart" element={<TinyLineChart />} />
<Route path="/no-nulls" element={<NoNullsChart />} />
<Route path="/line-chart-with-labels" element={<LineChartWithLabels />} />
</Routes>
<main>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/normal-bar" element={<NormalBarChart />} />
<Route path="/stacked-bar" element={<StackedBarChart />} />
<Route path="/ranged-bar" element={<RangedBarChart />} />
<Route path="/double-layer-pie" element={<DoubleLayerPieChart />} />
<Route path="/pie-chart" element={<PieChart />} />
<Route path="/straight-angle-pie" element={<StraightAnglePieChart />} />
<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 />} />
<Route path="/line-chart" element={<LineChartExample />} />
<Route path="/dashed-line-chart" element={<DashedLineChart />} />
<Route path="/reference-line-chart" element={<ReferenceLineChart />} />
<Route path="/no-nulls" element={<NoNullsChart />} />
<Route path="/line-chart-with-labels" element={<LineChartWithLabels />} />
<Route path="/scatter-chart" element={<ScatterChartExample />} />
</Routes>
</main>
</div>
</Router>
);
};

export default App;
export default App;
54 changes: 5 additions & 49 deletions samples/pages/CustomActiveShapePieChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,8 @@
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 },
];
import React from 'react';
import PieChartWrapper from '../utils/PieChartWrapper';

const CustomActiveShapePieChart: React.FC = () => {
const [pies, setPies] = useState([
const initialPies = [
{
id: 1,
innerRadius: 0,
Expand All @@ -26,41 +12,11 @@ const CustomActiveShapePieChart: React.FC = () => {
showLabels: true,
startAngle: 0,
endAngle: 360,
label: 'percent' as "percent",
activeShape: true,
},
]);
const [showPolarGrid, setShowPolarGrid] = useState(true);
];

return (
<div className="p-6">
<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 as "percent"}
activeShape={pie.activeShape}
/>
))}
<Tooltip />
<Legend />
</PieChart>
</div>
</div>
);
return <PieChartWrapper initialPies={initialPies} />;
};

export default CustomActiveShapePieChart;
61 changes: 6 additions & 55 deletions samples/pages/DoubleLayerPieChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,13 @@
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 },
];
import React from 'react';
import PieChartWrapper from '../utils/PieChartWrapper';

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 },
const initialPies = [
{ id: 1, innerRadius: 0, outerRadius: 50, cx: '50%', cy: '50%' },
{ id: 2, innerRadius: 60, outerRadius: 80, cx: '50%', cy: '50%', showLabels: true },
]);
];

return (
<div className="p-6">
<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>
);
return <PieChartWrapper initialPies={initialPies} />;
};

export default PieChartExample;
66 changes: 66 additions & 0 deletions samples/pages/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { BarChart3, PieChart, LineChart, ScatterChart } from 'lucide-react';

const Home: React.FC = () => {
const categories = [
{
name: 'Bar Charts',
path: '/normal-bar',
icon: BarChart3,
description: 'Normal, Stacked, and Ranged'
},
{
name: 'Pie Charts',
path: '/pie-chart',
icon: PieChart,
description: 'Simple, Double Layer, and Custom'
},
{
name: 'Line Charts',
path: '/line-chart',
icon: LineChart,
description: 'Basic, Dashed, and with Reference Lines'
},
{
name: 'Scatter Charts',
path: '/scatter-chart',
icon: ScatterChart,
description: 'Interactive Scatter Plots'
},
];

return (
<div className="min-h-[calc(100vh-64px)] bg-gradient-to-br from-indigo-100 to-blue-100">
<div className="max-w-6xl mx-auto px-4 py-12">
<div className="text-center mb-12">
<h1 className="text-5xl font-extrabold text-gray-900 mb-3">UnoChart</h1>
<p className="text-xl text-gray-600 font-medium">
React 19 Rechart Replica
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
{categories.map((category) => (
<Link
key={category.path}
to={category.path}
className="group bg-white/80 backdrop-blur-sm border border-gray-100 rounded-xl hover:shadow-xl transition-all duration-300 ease-in-out hover:-translate-y-1"
>
<div className="p-6">
<div className="flex items-center gap-4 mb-3">
<div className="p-3 rounded-lg bg-indigo-50 group-hover:bg-indigo-100 transition-colors">
<category.icon className="h-6 w-6 text-indigo-600" />
</div>
<h2 className="text-xl font-semibold text-gray-900">{category.name}</h2>
</div>
<p className="text-gray-600">{category.description}</p>
</div>
</Link>
))}
</div>
</div>
</div>
);
};

export default Home;
49 changes: 6 additions & 43 deletions samples/pages/PieChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,12 @@
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 },
];
import React from 'react';
import PieChartWrapper from '../utils/PieChartWrapper';

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 },
]);
const initialPies = [
{ id: 1, innerRadius: 0, outerRadius: 85, cx: '50%', cy: '50%', showLabels: true },
];

return (
<div className="p-6">
<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 ? "percent" : undefined}
/>
<Tooltip />
<Legend />
</PieChart>
</div>
</div>
);
return <PieChartWrapper initialPies={initialPies} />;
};

export default PieChartExample;
Loading
Loading