charts label fixed

CIAT-DAPA · Nov 14, 2024 · cd0b726 · cd0b726
1 parent 0e7a9ba
commit cd0b726
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 62 deletions.
diff --git a/src/package-lock.json b/src/package-lock.json
diff --git 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
@@ -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 (
     <Col lg={6} className="mb-4">
       <div className="bg-white rounded p-4 text-dark h-100">
@@ -140,8 +177,10 @@ const WeatherChart = ({
                   identificar patrones climáticos recientes en la región.
                 </p>
                 <Line
-                  data={chartConfig(title, data, color)}
-                  options={chartOptions}
+                  data={chartConfig("Datos estación", data, color)}
+                  options={
+                    startAtZero ? ChartOptionsStartedAtZero : chartOptions
+                  }
                 />
               </>
             )}

diff --git 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 (
     <div className="bg-dashboard">
       <Container className="p-3 bg-dashboard">
@@ -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
               />
               <WeatherChart
                 title="Temperatura Máxima"
                 data={data.tempMax}
                 unit="°C"
-                chartOptions={chartOptions}
-                chartConfig={chartConfig}
                 color="rgba(163, 36, 36, 1)"
                 isChartLoading={isChartLoading}
               />
@@ -386,17 +345,13 @@ const Dashboard = () => {
                 title="Temperatura Mínima"
                 data={data.tempMin}
                 unit="°C"
-                chartOptions={chartOptions}
-                chartConfig={chartConfig}
                 color="rgba(184, 84, 13, 1)"
                 isChartLoading={isChartLoading}
               />
               <WeatherChart
                 title="Radiación Solar"
                 data={data.solRad}
                 unit="MJ"
-                chartOptions={chartOptions}
-                chartConfig={chartConfig}
                 color="rgba(237, 185, 12, 1)"
                 isChartLoading={isChartLoading}
               />