Merge pull request #80 from CIAT-DAPA/develop

Develop

src/package.json

@@ -13,6 +13,7 @@
     "bootstrap": "^5.3.0",
     "chart.js": "^4.3.2",
     "chartjs-adapter-moment": "^1.0.1",
+    "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",
     "i18next": "^23.4.5",
     "jspdf": "^2.5.1",
@@ -21,6 +22,7 @@
     "leaflet-timedimension": "^1.1.1",
     "moment": "^2.29.4",
     "papaparse": "^5.4.1",
+    "rc-slider": "^11.0.0",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.1",
     "react-bootstrap": "^2.8.0",

src/src/components/clickWoreda/ClickWoreda.js

@@ -0,0 +1,71 @@
+import React from "react";
+import { useMap, useMapEvents } from "react-leaflet";
+import axios from "axios";
+import L from "leaflet";
+import Configuration from "../../conf/Configuration";
+
+function ClickWoreda({ onWoredaClick }) {
+  const map = useMap();
+
+  useMapEvents({
+    click(e) {
+      const url = getFeatureInfoUrl(
+        map,
+        Configuration.get_adm_level_url_geoserver(),
+        "administrative:et_adm3_wp",
+        e.latlng,
+        {
+          info_format: "application/json",
+          propertyName: "ADM3_EN,ADM3_PCODE",
+        }
+      );
+
+      axios.get(url).then((response) => {
+        const feature = response.data.features[0];
+
+        if (feature) {
+          const woredaName = feature.properties.ADM3_EN;
+          const woredaCode = feature.properties.ADM3_PCODE;
+          onWoredaClick(woredaName, woredaCode);
+        } else {
+          console.warn("No features found at the clicked location.");
+        }
+      }).catch((error) => {
+        console.error("Error fetching Woreda data:", error);
+      });
+    },
+  });
+
+  return null;
+}
+
+function getFeatureInfoUrl(map, url, layers, latlng, params) {
+  const point = map.latLngToContainerPoint(latlng, map.getZoom());
+  const size = map.getSize();
+  const bounds = map.getBounds();
+  const sw = bounds.getSouthWest();
+  const ne = bounds.getNorthEast();
+
+  const defaultParams = {
+    request: "GetFeatureInfo",
+    service: "WMS",
+    srs: "EPSG:4326",
+    styles: "",
+    version: "1.1.1",
+    format: "image/jpeg",
+    bbox: [sw.lng, sw.lat, ne.lng, ne.lat].join(","),
+    height: size.y,
+    width: size.x,
+    layers: layers,
+    query_layers: layers,
+    info_format: "application/json",
+  };
+
+  params = L.extend(defaultParams, params || {});
+  params[params.version === "1.3.0" ? "i" : "x"] = point.x;
+  params[params.version === "1.3.0" ? "j" : "y"] = point.y;
+
+  return url + L.Util.getParamString(params, url, true);
+}
+
+export default ClickWoreda;

src/src/components/forageLineChart/ForageLineChart.css

@@ -0,0 +1,21 @@
+.export-buttons {
+    display: flex;
+    justify-content: space-between; 
+    margin-top: 10px; 
+  }
+
+  .export-button {
+    padding: 5px 10px;
+    font-size: 14px;
+    color: white; 
+    background-color: #007bff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  .export-button:hover {
+    background-color: #0056b3;
+  }
+

src/src/components/forageLineChart/ForageLineChart.js

@@ -0,0 +1,102 @@
+import React, { useRef } from "react";
+import { Line } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+
+import { saveAs } from 'file-saver';
+import html2canvas from "html2canvas";
+import './ForageLineChart.css';
+
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+const ForageLineChart = ({ data, title }) => {
+  const chartRef = useRef(null); 
+  const chartData = {
+    labels: data.map(item => item.date),
+    datasets: [
+      {
+        label: "Mean Biomass",
+        data: data.map(item => item.mean),
+        fill: false,
+        backgroundColor: "rgba(75,192,192,0.2)",
+        borderColor: "rgba(75,192,192,1)",
+        tension: 0.4,
+      },
+    ],
+  };
+
+  // Chart options
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        display: false,
+        position: "top",
+      },
+      title: {
+        display: true,
+        text: title,
+      },
+    },
+    scales: {
+      x: {
+        title: {
+          display: true,
+          text: 'Date'
+        }
+      },
+      y: {
+        title: {
+          display: true,
+          text: 'Biomass (t/ha)'
+        }
+      }
+    }
+  };
+
+  const exportChartAsJPEG = async () => {
+    if (chartRef.current) {
+      const canvas = await html2canvas(chartRef.current);
+      const dataURL = canvas.toDataURL("image/jpeg");
+      saveAs(dataURL, `${title}.jpeg`);
+    }
+  };
+
+  const exportDataAsCSV = () => {
+    const csvData = data.map(item => `${item.date},${item.mean}`).join("\n");
+    const blob = new Blob([`Date,Biomass (t/ha)\n${csvData}`], { type: 'text/csv;charset=utf-8;' });
+    saveAs(blob, `${title}.csv`);
+  };
+
+ return (
+    <>
+      <div ref={chartRef}>
+        <Line data={chartData} options={options} />
+      </div>
+      <div className="export-buttons">
+        <button className="export-button" onClick={exportChartAsJPEG}>Export as JPEG</button>
+        <button className="export-button" onClick={exportDataAsCSV}>Export Data as CSV</button>
+      </div>
+    </>
+  );
+};
+
+
+export default ForageLineChart;

src/src/components/forageModal/ForageModal.css

@@ -0,0 +1,39 @@
+.woreda-info {
+    padding: 15px;
+    background-color: #f8f9fa;
+    border-radius: 5px; 
+    border: 1px solid #dee2e6; 
+  }
+
+  .woreda-title,
+  .biomass-info,
+  .date-info {
+    font-size: 1.1em; 
+    margin: 10px 0;
+  }
+
+  .woreda-title strong,
+  .biomass-info strong,
+  .date-info strong {
+    font-weight: bold; 
+    color: #007bff;
+  }
+
+  .tab-header {
+    font-weight: bold !important;
+  }
+
+  .nav-tabs .nav-link {
+    font-size: 1.1em;
+    color: black !important;
+  }
+
+  .nav-tabs .nav-link.active {
+    color: #007bff !important;
+    background-color: #e9ecef !important;
+  }
+
+  .margin-top {
+    margin-top: 20px;
+  }
+