Skip to content

Commit

Permalink
Reordenamiento sample
Browse files Browse the repository at this point in the history
  • Loading branch information
@v3gaaa
v3gaaa committed Aug 22, 2024
1 parent 6aaafe9 commit 773790c
Show file tree
Hide file tree
Showing 3 changed files with 144 additions and 197 deletions.
217 changes: 74 additions & 143 deletions samples/utils/BarChartControls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,164 +55,95 @@ const BarChartControls: React.FC<BarChartControlsProps> = ({
};

return (
<form className="grid grid-cols-2 gap-4 mb-8">
<div>
<label className="form-label">
Width:
<input
type="number"
value={width}
onChange={(e) => setWidth(parseInt(e.target.value, 10))}
className="form-input ml-2 border rounded px-2 py-1"
/>
</label>
</div>
<div>
<label className="form-label">
Height:
<input
type="number"
value={height}
onChange={(e) => setHeight(parseInt(e.target.value, 10))}
className="form-input ml-2 border rounded px-2 py-1"
/>
</label>
</div>
<div>
<label className="form-label">
Bar Category Gap:
<div className="bg-white p-6 shadow-lg stroke-purple-600 rounded-lg mb-5 max-w-md">
<h2 className="text-2xl font-semibold mb-6 text-purple-600">Controls</h2>
<form className="space-y-6">
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-purple-600 mb-1">Width</label>
<input
type="number"
value={width}
onChange={(e) => setWidth(parseInt(e.target.value, 10))}
className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
/>
</div>
<div>
<label className="block text-sm font-medium text-purple-600 mb-1">Height</label>
<input
type="number"
value={height}
onChange={(e) => setHeight(parseInt(e.target.value, 10))}
className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-purple-600 mb-1">Bar Category Gap</label>
<input
type="text"
value={barCategoryGap}
onChange={(e) => setBarCategoryGap(e.target.value)} // Asume string
className="form-input ml-2 border rounded px-2 py-1"
onChange={(e) => setBarCategoryGap(e.target.value)}
className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
/>
</label>
</div>
<div>
<label className="form-label">
Bar Gap:
</div>
<div>
<label className="block text-sm font-medium text-purple-600 mb-1">Bar Gap</label>
<input
type="number"
value={barGap}
onChange={(e) => setBarGap(parseInt(e.target.value, 10))} // Asume number
className="form-input ml-2 border rounded px-2 py-1"
onChange={(e) => setBarGap(parseInt(e.target.value, 10))}
className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
/>
</label>
</div>
<div>
<label className="form-label">
Layout:
</div>
<div>
<label className="block text-sm font-medium text-purple-600 mb-1">Layout</label>
<select
value={layout}
onChange={(e) => setLayout(e.target.value as 'horizontal' | 'vertical')}
className="form-input ml-2 border rounded px-2 py-1"
className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
>
<option value="horizontal">Horizontal</option>
<option value="vertical">Vertical</option>
</select>
</label>
</div>
<div>
<label className="form-label">
Margin Top:
<input
type="number"
value={margin.top}
onChange={(e) => handleMarginChange(e, 'top')}
className="form-input ml-2 border rounded px-2 py-1"
/>
</label>
</div>
<div>
<label className="form-label">
Margin Right:
<input
type="number"
value={margin.right}
onChange={(e) => handleMarginChange(e, 'right')}
className="form-input ml-2 border rounded px-2 py-1"
/>
</label>
</div>
<div>
<label className="form-label">
Margin Bottom:
<input
type="number"
value={margin.bottom}
onChange={(e) => handleMarginChange(e, 'bottom')}
className="form-input ml-2 border rounded px-2 py-1"
/>
</label>
</div>
<div>
<label className="form-label">
Margin Left:
<input
type="number"
value={margin.left}
onChange={(e) => handleMarginChange(e, 'left')}
className="form-input ml-2 border rounded px-2 py-1"
/>
</label>
</div>
<div>
<label className="form-label">
Show X Axis:
<input
type="checkbox"
checked={showXAxis}
onChange={(e) => setShowXAxis(e.target.checked)}
className="ml-2"
/>
</label>
</div>
<div>
<label className="form-label">
Show Y Axis:
<input
type="checkbox"
checked={showYAxis}
onChange={(e) => setShowYAxis(e.target.checked)}
className="ml-2"
/>
</label>
</div>
<div>
<label className="form-label">
Show Cartesian Grid:
<input
type="checkbox"
checked={showCartesianGrid}
onChange={(e) => setShowCartesianGrid(e.target.checked)}
className="ml-2"
/>
</label>
</div>
<div>
<label className="form-label">
Show Tooltip:
<input
type="checkbox"
checked={showTooltip}
onChange={(e) => setShowTooltip(e.target.checked)}
className="ml-2"
/>
</label>
</div>
<div>
<label className="form-label">
Show Legend:
<input
type="checkbox"
checked={showLegend}
onChange={(e) => setShowLegend(e.target.checked)}
className="ml-2"
/>
</label>
</div>
</form>
</div>
<div>
<h3 className="text-lg font-medium text-purple-600 mb-2">Margin</h3>
<div className="grid grid-cols-2 gap-4">
{['top', 'right', 'bottom', 'left'].map((side) => (
<div key={side}>
<label className="block text-sm font-medium text-purple-600 mb-1 capitalize">{side}</label>
<input
type="number"
value={margin[side as keyof typeof margin]}
onChange={(e) => handleMarginChange(e, side)}
className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
/>
</div>
))}
</div>
</div>
<div className="space-y-2">
{[
{ label: 'Show X Axis', checked: showXAxis, onChange: setShowXAxis },
{ label: 'Show Y Axis', checked: showYAxis, onChange: setShowYAxis },
{ label: 'Show Cartesian Grid', checked: showCartesianGrid, onChange: setShowCartesianGrid },
{ label: 'Show Tooltip', checked: showTooltip, onChange: setShowTooltip },
{ label: 'Show Legend', checked: showLegend, onChange: setShowLegend },
].map((item) => (
<label key={item.label} className="flex items-center space-x-2 text-purple-600 hover:bg-purple-100 rounded-lg p-2 transition duration-300 ease-in-out">
<input
type="checkbox"
checked={item.checked}
onChange={(e) => item.onChange(e.target.checked)}
className="form-checkbox h-5 w-5 text-purple-600 rounded transition duration-300 ease-in-out"
/>
<span className="text-sm">{item.label}</span>
</label>
))}
</div>
</form>
</div>
);
};

Expand Down
88 changes: 46 additions & 42 deletions samples/utils/BarChartWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,49 +21,53 @@ const BarChartWrapper: React.FC<BarChartWrapperProps> = ({ data, children }) =>
const [showLegend, setShowLegend] = useState(true);

return (
<div>
<BarChartControls
width={width}
setWidth={setWidth}
height={height}
setHeight={setHeight}
barCategoryGap={barCategoryGap}
setBarCategoryGap={setBarCategoryGap}
barGap={barGap}
setBarGap={setBarGap}
layout={layout}
setLayout={setLayout}
margin={margin}
setMargin={setMargin}
showXAxis={showXAxis}
setShowXAxis={setShowXAxis}
showYAxis={showYAxis}
setShowYAxis={setShowYAxis}
showCartesianGrid={showCartesianGrid}
setShowCartesianGrid={setShowCartesianGrid}
showTooltip={showTooltip}
setShowTooltip={setShowTooltip}
showLegend={showLegend}
setShowLegend={setShowLegend}
/>
<BarChart
data={data}
width={width}
height={height}
margin={margin}
barCategoryGap={barCategoryGap}
barGap={barGap}
layout={layout}
>
{showCartesianGrid && <CartesianGrid strokeDasharray="3 3" />}
{showXAxis && <XAxis />}
{showYAxis && <YAxis />}
{showTooltip && <Tooltip />}
{showLegend && <Legend />}
{children}
</BarChart>
<div className="flex flex-col lg:flex-row gap-6 p-6">
<div className="lg:w-1/3">
<BarChartControls
width={width}
setWidth={setWidth}
height={height}
setHeight={setHeight}
barCategoryGap={barCategoryGap}
setBarCategoryGap={setBarCategoryGap}
barGap={barGap}
setBarGap={setBarGap}
layout={layout}
setLayout={setLayout}
margin={margin}
setMargin={setMargin}
showXAxis={showXAxis}
setShowXAxis={setShowXAxis}
showYAxis={showYAxis}
setShowYAxis={setShowYAxis}
showCartesianGrid={showCartesianGrid}
setShowCartesianGrid={setShowCartesianGrid}
showTooltip={showTooltip}
setShowTooltip={setShowTooltip}
showLegend={showLegend}
setShowLegend={setShowLegend}
/>
</div>
<div className="lg:w-2/3">
<BarChart
data={data}
width={width}
height={height}
margin={margin}
barCategoryGap={barCategoryGap}
barGap={barGap}
layout={layout}
>
{showCartesianGrid && <CartesianGrid strokeDasharray="3 3" />}
{showXAxis && <XAxis />}
{showYAxis && <YAxis />}
{showTooltip && <Tooltip />}
{showLegend && <Legend />}
{children}
</BarChart>
</div>
</div>
);
};

export default BarChartWrapper;
export default BarChartWrapper;
36 changes: 24 additions & 12 deletions samples/utils/NavBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,31 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { Link, useLocation } from 'react-router-dom';

const NavBar = () => {
const location = useLocation();

const navItems = [
{ name: 'Normal BarChart', path: '/' },
{ name: 'Stacked BarChart', path: '/stacked' },
{ name: 'Ranged BarChart', path: '/ranged' },
];

return (
<nav className="bg-gray-800 p-4">
<div className="container mx-auto flex space-x-4">
<Link to="/" className="text-white hover:underline">
Normal BarChart
</Link>
<Link to="/stacked" className="text-white hover:underline">
Stacked BarChart
</Link>
<Link to="/ranged" className="text-white hover:underline">
Ranged BarChart
</Link>
<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-400'
: 'hover:bg-purple-600 hover:text-white'
} transition duration-300 ease-in-out`}
>
{item.name}
</Link>
))}
</div>
</nav>
);
Expand Down

0 comments on commit 773790c

Please sign in to comment.