From f739558ec51ecec9b7eef00062c21f707f464972 Mon Sep 17 00:00:00 2001
From: Sebastian Denhi Vega Saint Martin <svsm03@hotmail.com>
Date: Tue, 27 Aug 2024 17:05:12 -0600
Subject: [PATCH] UI Improvements (#9)

* Reordenamiento sample

* Arreglo tooltip barras con rango

* Pruebas unitarias

* Ui color/layout changes

* Linting
---
 jest-setup.tsx                           |   1 -
 package-lock.json                        |  10 +-
 package.json                             |   2 +-
 samples/utils/BarChartControls.tsx       | 217 ++++++++---------------
 samples/utils/BarChartWrapper.tsx        |  88 ++++-----
 samples/utils/NavBar.tsx                 |  36 ++--
 src/Bar/Bar.spec.tsx                     |  24 +++
 src/BarChart/BarChart.spec.tsx           |  76 +++-----
 src/BarChart/index.tsx                   |  10 +-
 src/CartesianGrid/CartesianGrid.spec.tsx |  23 +++
 src/Legend/Legend.spec.tsx               |  32 ++++
 src/Legend/index.tsx                     |   2 +-
 src/Tooltip/Tooltip.spec.tsx             |  30 ++++
 src/Tooltip/index.tsx                    |   4 +-
 src/XAxis/XAxis.spec.tsx                 |  39 ++++
 src/YAxis/YAxis.spec.tsx                 |  23 +++
 src/YAxis/index.tsx                      |   7 +-
 tsconfig.test.json                       |   5 +-
 18 files changed, 355 insertions(+), 274 deletions(-)
 create mode 100644 src/Bar/Bar.spec.tsx
 create mode 100644 src/CartesianGrid/CartesianGrid.spec.tsx
 create mode 100644 src/Legend/Legend.spec.tsx
 create mode 100644 src/Tooltip/Tooltip.spec.tsx
 create mode 100644 src/XAxis/XAxis.spec.tsx
 create mode 100644 src/YAxis/YAxis.spec.tsx

diff --git a/jest-setup.tsx b/jest-setup.tsx
index 142d1be..7b0828b 100644
--- a/jest-setup.tsx
+++ b/jest-setup.tsx
@@ -1,2 +1 @@
-// jest-setup.tsx
 import '@testing-library/jest-dom';
diff --git a/package-lock.json b/package-lock.json
index 0bd674e..a64b477 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
       "devDependencies": {
         "@rsbuild/core": "^0.7.10",
         "@rsbuild/plugin-react": "^0.7.10",
-        "@testing-library/jest-dom": "^6.4.8",
+        "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^16.0.0",
         "@types/jest": "^29.5.12",
         "@types/node": "^22.4.1",
@@ -1820,13 +1820,12 @@
       }
     },
     "node_modules/@testing-library/jest-dom": {
-      "version": "6.4.8",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.8.tgz",
-      "integrity": "sha512-JD0G+Zc38f5MBHA4NgxQMR5XtO5Jx9g86jqturNTt2WUfRmLDIY7iKkWHDCCTiDuFMre6nxAD5wHw9W5kI4rGw==",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz",
+      "integrity": "sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==",
       "dev": true,
       "dependencies": {
         "@adobe/css-tools": "^4.4.0",
-        "@babel/runtime": "^7.9.2",
         "aria-query": "^5.0.0",
         "chalk": "^3.0.0",
         "css.escape": "^1.5.1",
@@ -2011,7 +2010,6 @@
       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.12.tgz",
       "integrity": "sha512-eDC8bTvT/QhYdxJAulQikueigY5AsdBRH2yDKW3yveW7svY3+DzN84/2NUgkw10RTiJbWqZrTtoGVdYlvFJdLw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "expect": "^29.0.0",
         "pretty-format": "^29.0.0"
diff --git a/package.json b/package.json
index 524c64f..7013f06 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
   "devDependencies": {
     "@rsbuild/core": "^0.7.10",
     "@rsbuild/plugin-react": "^0.7.10",
-    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^22.4.1",
diff --git a/samples/utils/BarChartControls.tsx b/samples/utils/BarChartControls.tsx
index d25db08..9465da4 100644
--- a/samples/utils/BarChartControls.tsx
+++ b/samples/utils/BarChartControls.tsx
@@ -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 rounded-lg mb-5 max-w-md">
+      <h2 className="text-xl font-semibold mb-6 text-gray-700">Chart Settings</h2>
+      <form className="space-y-6">
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 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-gray-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-gray-700 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-gray-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-gray-700 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-gray-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-gray-700 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-gray-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-gray-700 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-gray-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-gray-700 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-gray-700 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-gray-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-gray-700 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>
   );
 };
 
diff --git a/samples/utils/BarChartWrapper.tsx b/samples/utils/BarChartWrapper.tsx
index 524e922..17078ef 100644
--- a/samples/utils/BarChartWrapper.tsx
+++ b/samples/utils/BarChartWrapper.tsx
@@ -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;
\ No newline at end of file
diff --git a/samples/utils/NavBar.tsx b/samples/utils/NavBar.tsx
index f75907a..1732d76 100644
--- a/samples/utils/NavBar.tsx
+++ b/samples/utils/NavBar.tsx
@@ -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 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>
+        ))}
       </div>
     </nav>
   );
diff --git a/src/Bar/Bar.spec.tsx b/src/Bar/Bar.spec.tsx
new file mode 100644
index 0000000..06fe49c
--- /dev/null
+++ b/src/Bar/Bar.spec.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Bar from './index';
+
+describe('Bar', () => {
+    const mockData = [{ name: 'Page A', uv: 4000 }];
+
+    it('renders without crashing', () => {
+        const { container } = render(<Bar data={mockData} dataKey="uv" fill="#8884d8" />);
+        expect(container).toBeInTheDocument();
+    } );
+
+    it('renders the correct number of bars', () => {
+        const { container } = render(<Bar data={mockData} dataKey="uv" fill="#8884d8" />);
+        const bars = container.querySelectorAll('rect');
+        expect(bars.length).toBe(1);
+    });
+
+    it('applies the correct color to bars', () => {
+        const { container } = render(<Bar data={mockData} dataKey="uv" fill="#8884d8" />);
+        const bar = container.querySelector('rect');
+        expect(bar).toHaveAttribute('fill', '#8884d8');
+    });
+});
diff --git a/src/BarChart/BarChart.spec.tsx b/src/BarChart/BarChart.spec.tsx
index 7f977ab..137175c 100644
--- a/src/BarChart/BarChart.spec.tsx
+++ b/src/BarChart/BarChart.spec.tsx
@@ -2,76 +2,42 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import BarChart from './index';
 import Bar from '../Bar';
-import CartesianGrid from '../CartesianGrid';
-import XAxis from '../XAxis';
-import YAxis from '../YAxis';
-import Tooltip from '../Tooltip';
-import Legend from '../Legend';
+import { ChartData } from '../constants';
 
 describe('BarChart', () => {
-    const data = [
-        { name: 'A', uv: 30, pv: 40 },
-        { name: 'B', uv: 80, pv: 90 },
-        { name: 'C', uv: 45, pv: 60 },
-        { name: 'D', uv: 60, pv: 70 },
+    const mockData: ChartData = [
+        { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
+        { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
     ];
 
-    it('renders the correct number of bars', () => {
+    it('renders without crashing', () => {
         const { container } = render(
-            <BarChart data={data}>
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey="name" />
-                <YAxis />
-                <Tooltip />
-                <Legend />
-                <Bar dataKey="uv" fill="#8884d8" />
-                <Bar dataKey="pv" fill="#82ca9d" />
+            <BarChart data={mockData}>
+                <Bar dataKey="pv" fill="#8884d8" />
             </BarChart>
         );
-        expect(container.querySelectorAll('rect').length).toBe(data.length * 2);
-    });
+        expect(container).toBeInTheDocument();
+    } );
 
-    it('renders bars with correct height', () => {
+    it('displays the correct number of bars', () => {
         const { container } = render(
-            <BarChart data={data} height={300}>
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey="name" />
-                <YAxis />
-                <Tooltip />
-                <Legend />
-                <Bar dataKey="uv" fill="#8884d8" />
-                <Bar dataKey="pv" fill="#82ca9d" />
+            <BarChart data={mockData}>
+                <Bar dataKey="pv" fill="#8884d8" />
+                <Bar dataKey="uv" fill="#82ca9d" />
             </BarChart>
         );
-        const rects = container.querySelectorAll('rect');
-        const maxValue = Math.max(...data.map(d => Math.max(d.uv, d.pv)));
-        
-        rects.forEach((rect, index) => {
-            const entry = data[Math.floor(index / 2)];
-            const value = index % 2 === 0 ? entry.uv : entry.pv;
-            const expectedHeight = (value / maxValue) * 300; // Assuming height is 300
-            expect(parseFloat(rect.getAttribute('height') || '')).toBeCloseTo(expectedHeight, 1);
-        });
+        const bars = container.querySelectorAll('rect');
+        expect(bars.length).toBe(4); // 2 data points * 2 bars
     });
 
-    it('applies the correct bar color', () => {
+    it('has the correct width and height attributes', () => {
         const { container } = render(
-            <BarChart data={data}>
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey="name" />
-                <YAxis />
-                <Tooltip />
-                <Legend />
-                <Bar dataKey="uv" fill="#8884d8" />
-                <Bar dataKey="pv" fill="#82ca9d" />
+            <BarChart data={mockData} width={500} height={400}>
+                <Bar dataKey="pv" fill="#8884d8" />
             </BarChart>
         );
-        const rects = container.querySelectorAll('rect');
-        
-        rects.forEach((rect, index) => {
-            const expectedColor = index % 2 === 0 ? '#8884d8' : '#82ca9d';
-            expect(rect.getAttribute('fill')).toBe(expectedColor);
-        });
+        const svg = container.querySelector('svg');
+        expect(svg).toHaveAttribute('width', '500');
+        expect(svg).toHaveAttribute('height', '440');
     });
 });
-
diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx
index 03e478f..c1bbfd6 100644
--- a/src/BarChart/index.tsx
+++ b/src/BarChart/index.tsx
@@ -209,13 +209,7 @@ const BarChart = ({
                 margin: `${margin.top ?? DEFAULT_MARGIN}px ${margin.right ?? DEFAULT_MARGIN}px ${margin.bottom ?? DEFAULT_MARGIN}px ${margin.left ?? DEFAULT_MARGIN}px`,
             }}
         >
-            <svg
-                ref={svgRef}
-                width={width}
-                height={height + height * 0.1}
-                className='border border-gray-300'
-                onMouseLeave={handleMouseLeave} // Aquí agregas el manejador de evento
-            >
+            <svg ref={svgRef} width={width} height={height + height * 0.1} className='' onMouseLeave={handleMouseLeave}>
                 <g
                     transform={`translate(${(margin.left ?? DEFAULT_MARGIN) + leftMargin}, ${
                         (margin.top ?? DEFAULT_MARGIN) + height * 0.025
@@ -235,6 +229,7 @@ const BarChart = ({
                                 <CartesianGrid
                                     width={width - (margin.left ?? DEFAULT_MARGIN) - rightMargin - leftMargin}
                                     height={height - (margin.top ?? DEFAULT_MARGIN) - (margin.bottom ?? DEFAULT_MARGIN)}
+                                    minValue={minValue}
                                     layout={layout}
                                 />
                             )}
@@ -268,6 +263,7 @@ const BarChart = ({
                                 <CartesianGrid
                                     width={width - (margin.left ?? DEFAULT_MARGIN) - rightMargin}
                                     height={height - (margin.top ?? DEFAULT_MARGIN) - (margin.bottom ?? DEFAULT_MARGIN)}
+                                    minValue={minValue}
                                     layout={layout}
                                 />
                             )}
diff --git a/src/CartesianGrid/CartesianGrid.spec.tsx b/src/CartesianGrid/CartesianGrid.spec.tsx
new file mode 100644
index 0000000..955b378
--- /dev/null
+++ b/src/CartesianGrid/CartesianGrid.spec.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import CartesianGrid from './index';
+
+describe('CartesianGrid', () => {
+
+    it('renders without crashing', () => {
+        const { container } = render(<CartesianGrid width={400} height={300} />);
+        expect(container).toBeInTheDocument();
+    });
+
+    it('renders the correct number of grid lines', () => {
+        const { container } = render(<CartesianGrid width={400} height={300} />);
+        const lines = container.querySelectorAll('line');
+        expect(lines.length).toBeGreaterThan(0);
+    });
+
+    it('renders grid lines with correct strokeDasharray', () => {
+        const { container } = render(<CartesianGrid width={400} height={300} strokeDasharray="3 3" />);
+        const line = container.querySelector('line');
+        expect(line).toHaveAttribute('stroke-dasharray', '3 3');
+    });
+});
diff --git a/src/Legend/Legend.spec.tsx b/src/Legend/Legend.spec.tsx
new file mode 100644
index 0000000..1bc34fe
--- /dev/null
+++ b/src/Legend/Legend.spec.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom'; // Asegúrate de importar esto
+import Legend from './index';
+
+describe('Legend', () => {
+    const mockItems = [
+        { color: '#8884d8', label: 'uv' },
+        { color: '#82ca9d', label: 'pv' },
+    ];
+
+    it('renders without crashing', () => {
+        const { container } = render(<Legend items={mockItems} />);
+        expect(container).toBeInTheDocument();
+    });
+
+    it('renders the correct number of items', () => {
+        const { getAllByTestId } = render(<Legend items={mockItems} />);
+        const legendItems = getAllByTestId('legend-item');
+        expect(legendItems.length).toBe(mockItems.length);
+    });
+
+    it('renders items with correct color and label', () => {
+        const { getByText } = render(<Legend items={mockItems} />);
+        mockItems.forEach(item => {
+            const legendItem = getByText(item.label);
+            expect(legendItem).toBeInTheDocument();
+            const colorDiv = legendItem.previousSibling;
+            expect(colorDiv).toHaveStyle(`background-color: ${item.color}`);
+        });
+    });
+});
\ No newline at end of file
diff --git a/src/Legend/index.tsx b/src/Legend/index.tsx
index 7eee441..a218427 100644
--- a/src/Legend/index.tsx
+++ b/src/Legend/index.tsx
@@ -13,7 +13,7 @@ const Legend: React.FC<LegendProps> = ({ items = [] }) => {
     return (
         <div className='flex justify-center items-center'>
             {validItems.map((item) => (
-                <div key={uuidv4()} className='flex items-center mx-2'>
+                <div key={uuidv4()} className='flex items-center mx-2' data-testid='legend-item'>
                     <div className='w-4 h-3' style={{ backgroundColor: item.color }} />
                     <span className='ml-2'>{item.label}</span>
                 </div>
diff --git a/src/Tooltip/Tooltip.spec.tsx b/src/Tooltip/Tooltip.spec.tsx
new file mode 100644
index 0000000..2c9df8e
--- /dev/null
+++ b/src/Tooltip/Tooltip.spec.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom'; // Asegúrate de importar esto
+import Tooltip from './index';
+
+describe('Tooltip', () => {
+    const mockTooltipData = {
+        name: 'Page A',
+        values: [{ key: 'uv', value: 4000, color: '#8884d8' }],
+    };
+
+    it('renders without crashing', () => {
+        const { container } = render(<Tooltip tooltipData={mockTooltipData} />);
+        expect(container).toBeInTheDocument();
+    });
+
+    it('displays the correct name', () => {
+        const { getByText } = render(<Tooltip tooltipData={mockTooltipData} />);
+        expect(getByText(mockTooltipData.name)).toBeInTheDocument();
+    });
+
+    it('displays the correct values with the correct color', () => {
+        const { getByText } = render(<Tooltip tooltipData={mockTooltipData} />);
+        mockTooltipData.values.forEach(item => {
+            const valueElement = getByText(`${item.key}: ${item.value}`);
+            expect(valueElement).toBeInTheDocument();
+            expect(valueElement).toHaveStyle(`color: ${item.color}`);
+        });
+    });
+});
\ No newline at end of file
diff --git a/src/Tooltip/index.tsx b/src/Tooltip/index.tsx
index f6f41d5..a368713 100644
--- a/src/Tooltip/index.tsx
+++ b/src/Tooltip/index.tsx
@@ -1,7 +1,7 @@
 import { v4 as uuidv4 } from 'uuid';
 
 interface TooltipProps {
-    tooltipData?: { name: string; values: { key: string; value: number; color: string }[] } | null;
+    tooltipData?: { name: string; values: { key: string; value: number | [number, number]; color: string }[] } | null;
     position?: { x: number; y: number };
 }
 
@@ -21,7 +21,7 @@ const Tooltip = ({ tooltipData = null, position = { x: 0, y: 0 } }: TooltipProps
             <p className='font-bold mb-1'>{tooltipData.name}</p>
             {tooltipData.values.map((value) => (
                 <p key={uuidv4()} className='text-sm' style={{ color: value.color }}>
-                    {value.key}: {value.value}
+                    {value.key}: {Array.isArray(value.value) ? `${value.value[0]} - ${value.value[1]}` : value.value}
                 </p>
             ))}
         </div>
diff --git a/src/XAxis/XAxis.spec.tsx b/src/XAxis/XAxis.spec.tsx
new file mode 100644
index 0000000..5d6ad1f
--- /dev/null
+++ b/src/XAxis/XAxis.spec.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import XAxis from './index';
+
+describe('XAxis', () => {
+    const mockData = [
+        { name: 'Jan', value: 30 },
+        { name: 'Feb', value: 20 },
+    ];
+
+    it('renders without crashing', () => {
+        const { container } = render(
+            <svg>
+                <XAxis width={400} height={50} data={mockData} dataKey="name" />
+            </svg>
+        );
+        expect(container).toBeInTheDocument();
+    });
+
+    it('renders the correct number of labels', () => {
+        const { container } = render(
+            <svg>
+                <XAxis width={400} height={50} data={mockData} dataKey="name" />
+            </svg>
+        );
+        const labels = container.querySelectorAll('text');
+        expect(labels.length).toBe(2);
+    });
+
+    it('renders labels at the correct positions', () => {
+        const { container } = render(
+            <svg>
+                <XAxis width={400} height={50} data={mockData} dataKey="name" />
+            </svg>
+        );
+        const labelPositions = Array.from(container.querySelectorAll('text')).map(label => label.getAttribute('x'));
+        expect(labelPositions.every(pos => parseInt(pos || '0') >= 0)).toBe(true);
+    });
+});
diff --git a/src/YAxis/YAxis.spec.tsx b/src/YAxis/YAxis.spec.tsx
new file mode 100644
index 0000000..ac74cb2
--- /dev/null
+++ b/src/YAxis/YAxis.spec.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import YAxis from './index';
+
+describe('YAxis', () => {
+
+    it('renders without crashing', () => {
+        const { container } = render(<YAxis height={300} maxValue={100} minValue={0} />);
+        expect(container).toBeInTheDocument();
+    } );
+
+    it('renders the correct number of labels', () => {
+        const { container } = render(<YAxis height={300} maxValue={100} minValue={0} />);
+        const labels = container.querySelectorAll('text');
+        expect(labels.length).toBeGreaterThan(0);
+    });
+
+    it('renders labels in the correct position', () => {
+        const { container } = render(<YAxis height={300} maxValue={100} minValue={0} />);
+        const labelPositions = Array.from(container.querySelectorAll('text')).map(label => label.getAttribute('y'));
+        expect(labelPositions.every(pos => parseInt(pos || '0') >= 0)).toBe(true);
+    });
+});
diff --git a/src/YAxis/index.tsx b/src/YAxis/index.tsx
index 8413c19..1484363 100644
--- a/src/YAxis/index.tsx
+++ b/src/YAxis/index.tsx
@@ -17,6 +17,8 @@ const YAxis = ({ data = [], height = 0, width = 0, maxValue = 0, minValue = 0, l
     const positiveRange = maxValue / positiveLines;
     const negativeRange = minValue < 0 ? Math.abs(minValue) / negativeLines : 0;
 
+    const formatValue = (value: number) => (value % 1 === 0 ? value.toString() : value.toFixed(2));
+
     return (
         <g className='y-axis'>
             {layout === 'horizontal' &&
@@ -32,7 +34,7 @@ const YAxis = ({ data = [], height = 0, width = 0, maxValue = 0, minValue = 0, l
                             textAnchor='end'
                             dominantBaseline='middle'
                         >
-                            {value.toFixed(2)}
+                            {formatValue(value)}
                         </text>
                     );
                 })}
@@ -41,7 +43,6 @@ const YAxis = ({ data = [], height = 0, width = 0, maxValue = 0, minValue = 0, l
                 // Render positive values
                 new Array(positiveLines + 1).fill(null).map((_, index) => {
                     const value = positiveRange * index;
-                    const yOffset = minValue < 0 ? negativeLines : 0;
                     return (
                         <text
                             key={uuidv4()}
@@ -50,7 +51,7 @@ const YAxis = ({ data = [], height = 0, width = 0, maxValue = 0, minValue = 0, l
                             textAnchor='end'
                             dominantBaseline='middle'
                         >
-                            {value.toFixed(2)}
+                            {formatValue(value)}
                         </text>
                     );
                 })}
diff --git a/tsconfig.test.json b/tsconfig.test.json
index 5da6169..c2260d7 100644
--- a/tsconfig.test.json
+++ b/tsconfig.test.json
@@ -1,4 +1,7 @@
 {
     "extends": "./tsconfig",
     "include": ["src/**/*.ts*", "jest-setup.tsx"],
-}
\ No newline at end of file
+    "compilerOptions": {
+        "types": ["jest", "@testing-library/jest-dom"]
+    }
+}