diff --git a/src/package-lock.json b/src/package-lock.json index a5ff703..e6f4fa9 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -15,7 +15,6 @@ "axios": "^1.7.7", "bootstrap": "^5.3.3", "chart.js": "^4.4.4", - "jquery": "^3.7.1", "leaflet": "^1.9.4", "react": "^18.3.1", "react-bootstrap": "^2.10.4", @@ -12296,11 +12295,6 @@ "jiti": "bin/jiti.js" } }, - "node_modules/jquery": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", - "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==" - }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -27320,11 +27314,6 @@ "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz", "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==" }, - "jquery": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", - "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==" - }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", diff --git a/src/package.json b/src/package.json index a40cc32..eb32339 100644 --- a/src/package.json +++ b/src/package.json @@ -11,7 +11,6 @@ "axios": "^1.7.7", "bootstrap": "^5.3.3", "chart.js": "^4.4.4", - "jquery": "^3.7.1", "leaflet": "^1.9.4", "react": "^18.3.1", "react-bootstrap": "^2.10.4", diff --git a/src/src/components/weatherChart/WeatherChart.js b/src/src/components/weatherChart/WeatherChart.js index ffbbb80..001c4aa 100644 --- a/src/src/components/weatherChart/WeatherChart.js +++ b/src/src/components/weatherChart/WeatherChart.js @@ -28,10 +28,9 @@ const WeatherChart = ({ title, data, unit, - chartOptions, - chartConfig, color, isChartLoading, + startAtZero, }) => { const maxItem = useMemo( () => @@ -72,6 +71,44 @@ const WeatherChart = ({ document.body.removeChild(link); }; + const chartConfig = (label, data, color) => ({ + labels: data.map((item) => item.label), + datasets: [ + { + label, + data: data.map((item) => item.value), + fill: false, + borderColor: color, + tension: 0.1, + }, + ], + }); + + const chartOptions = useMemo( + () => ({ + scales: { + x: { title: { display: true, text: "Días" } }, + y: { title: { display: true, text: unit }, beginAtZero: false }, + }, + }), + [] + ); + + const ChartOptionsStartedAtZero = useMemo( + () => ({ + ...chartOptions, + scales: { + ...chartOptions.scales, + y: { + ...chartOptions.scales.y, + beginAtZero: true, + min: 0, + }, + }, + }), + [chartOptions] + ); + return (
@@ -140,8 +177,10 @@ const WeatherChart = ({ identificar patrones climáticos recientes en la región.

)} diff --git a/src/src/pages/dashboard/Dashboard.js b/src/src/pages/dashboard/Dashboard.js index acb7371..e81fba6 100644 --- a/src/src/pages/dashboard/Dashboard.js +++ b/src/src/pages/dashboard/Dashboard.js @@ -225,44 +225,6 @@ const Dashboard = () => { const compareData = () => {}; - const chartConfig = (label, data, color) => ({ - labels: data.map((item) => item.label), - datasets: [ - { - label, - data: data.map((item) => item.value), - fill: false, - borderColor: color, - tension: 0.1, - }, - ], - }); - - const chartOptions = useMemo( - () => ({ - scales: { - x: { title: { display: true, text: "Días" } }, - y: { title: { display: true, text: "Valores" }, beginAtZero: false }, - }, - }), - [] - ); - - const precipitationChartOptions = useMemo( - () => ({ - ...chartOptions, - scales: { - ...chartOptions.scales, - y: { - ...chartOptions.scales.y, - beginAtZero: true, - min: 0, - }, - }, - }), - [chartOptions] - ); - return (
@@ -366,17 +328,14 @@ const Dashboard = () => { title="Precipitación" data={data.precipitation} unit="mm" - chartOptions={precipitationChartOptions} - chartConfig={chartConfig} color="rgba(26, 51, 237, 1)" isChartLoading={isChartLoading} + startAtZero /> @@ -386,8 +345,6 @@ const Dashboard = () => { title="Temperatura Mínima" data={data.tempMin} unit="°C" - chartOptions={chartOptions} - chartConfig={chartConfig} color="rgba(184, 84, 13, 1)" isChartLoading={isChartLoading} /> @@ -395,8 +352,6 @@ const Dashboard = () => { title="Radiación Solar" data={data.solRad} unit="MJ" - chartOptions={chartOptions} - chartConfig={chartConfig} color="rgba(237, 185, 12, 1)" isChartLoading={isChartLoading} />