New frontend scaleup

frontend/package.json

@@ -17,6 +17,7 @@
     "axios": "^1.7.4",
     "chart.js": "^4.4.4",
     "d3": "^7.9.0",
+    "date-fns": "^4.1.0",
     "firebase": "^10.7.1",
     "papaparse": "^5.4.1",
     "plotly.js": "^2.34.0",

frontend/src/components/home page/dailyVisualizations.jsx

@@ -18,10 +18,17 @@ const Container = styled.div`
   }
 `;
 
+const ButtonContainer = styled.div`
+  margin-bottom: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+`;
+
 const FeatureButton = styled.button`
   background-color: ${(props) => (props.selected ? '#007bff' : '#6c757d')};
   color: white;
-  margin: 5px;
   padding: 8px 15px;
   border: none;
   border-radius: 5px;
@@ -38,10 +45,9 @@ const FeatureButton = styled.button`
 `;
 
 const FetchButton = styled.button`
-  margin: 5px;
-  padding: 8px 15px;
   background-color: green;
   color: white;
+  padding: 8px 15px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
@@ -56,6 +62,28 @@ const FetchButton = styled.button`
   }
 `;
 
+const SelectCityDropdown = styled.select`
+  background-color: orange;
+  color: white;
+  padding: 8px 15px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-weight: bold;
+  margin-bottom: 15px;
+  text-align: center;
+  appearance: none;
+  &:hover {
+    background-color: darkorange;
+  }
+`;
+
+const CityDropdownContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+`;
+
 const DatePickerWrapper = styled.div`
   margin: 10px;
   display: inline-block;
@@ -65,31 +93,47 @@ const DatePickerWrapper = styled.div`
   }
 `;
 
-const ButtonGroup = styled.div`
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
+const DatePickerContainer = styled.div`
   margin-bottom: 20px;
-`;
-
-const DatePickerGroup = styled.div`
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
-  margin-bottom: 20px;
+  gap: 20px;
 `;
 
 const DailyVisualizations = () => {
   const [selectedParams, setSelectedParams] = useState([]);
   const [weatherData, setWeatherData] = useState(null);
   const [startDate, setStartDate] = useState(new Date("2024-08-06"));
   const [endDate, setEndDate] = useState(new Date("2024-08-20"));
+  const [selectedCity, setSelectedCity] = useState('SELECT CITY');
+  const [latitude, setLatitude] = useState(8.3122);
+  const [longitude, setLongitude] = useState(80.4131);
 
   const availableParams = {
-    temperature2mMax: "temperature_2m_max",
-    temperature2mMin: "temperature_2m_min",
-    temperature2mMean: "temperature_2m_mean",
-    rainSum: "rain_sum",
-    windSpeed10mMax: "wind_speed_10m_max"
+    MaxTemperature: "temperature_2m_max",
+    MinTemperature: "temperature_2m_min",
+    MeanTemperature: "temperature_2m_mean",
+    Rain: "rain_sum",
+    WindSpeed: "wind_speed_10m_max"
+  };
+
+  //cities added
+    const cities = [
+    { name: "COLOMBO", latitude: 6.9355, longitude: 79.8487 },
+    { name: "ANURADHAPURA", latitude: 8.3122, longitude: 80.4131 },
+    { name: "HIKKADUWA", latitude: 6.1407, longitude: 80.1012 },
+    { name: "NUWARA ELIYA", latitude: 6.9708, longitude: 80.7829 },
+    { name: "JAFFNA", latitude: 9.6684, longitude: 80.0074 }
+  ];
+
+  const handleCitySelection = (event) => {
+    const city = cities.find(city => city.name === event.target.value);
+    if (city) {
+      setSelectedCity(city.name);
+      setLatitude(city.latitude);
+      setLongitude(city.longitude);
+    }
   };
 
   const handleParamSelection = (param) => {
@@ -100,8 +144,8 @@ const DailyVisualizations = () => {
 
   const fetchWeatherData = async () => {
     const params = {
-      latitude: 8.3122,
-      longitude: 80.4131,
+      latitude: latitude,
+      longitude: longitude,
       start_date: startDate.toISOString().split('T')[0],
       end_date: endDate.toISOString().split('T')[0],
       daily: selectedParams,
@@ -130,7 +174,7 @@ const DailyVisualizations = () => {
 
   return (
     <Container>
-      <ButtonGroup>
+      <ButtonContainer>
         {Object.keys(availableParams).map((key) => (
           <FeatureButton
             key={key}
@@ -143,9 +187,20 @@ const DailyVisualizations = () => {
         <FetchButton onClick={fetchWeatherData}>
           Fetch Data
         </FetchButton>
-      </ButtonGroup>
-
-      <DatePickerGroup>
+      </ButtonContainer>
+
+      <CityDropdownContainer>
+        <SelectCityDropdown value={selectedCity} onChange={handleCitySelection}>
+          <option value="SELECT CITY" disabled>SELECT CITY</option>
+          {cities.map((city) => (
+            <option key={city.name} value={city.name}>
+              {city.name}
+            </option>
+          ))}
+        </SelectCityDropdown>
+      </CityDropdownContainer>
+
+      <DatePickerContainer>
         <DatePickerWrapper>
           <label>Start Date: </label>
           <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
@@ -154,7 +209,7 @@ const DailyVisualizations = () => {
           <label>End Date: </label>
           <DatePicker selected={endDate} onChange={(date) => setEndDate(date)} />
         </DatePickerWrapper>
-      </DatePickerGroup>
+      </DatePickerContainer>
 
       {weatherData && (
         <ResponsiveContainer width="100%" height={400}>
@@ -174,4 +229,4 @@ const DailyVisualizations = () => {
   );
 };
 
-export default DailyVisualizations;
+export default DailyVisualizations;

frontend/src/components/home page/hourlyVisualizations.jsx

@@ -62,6 +62,28 @@ const FetchButton = styled.button`
   }
 `;
 
+const SelectCityDropdown = styled.select`
+  background-color: orange;
+  color: white;
+  padding: 8px 15px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-weight: bold;
+  margin-bottom: 15px;
+  text-align: center;
+  appearance: none;
+  &:hover {
+    background-color: darkorange;
+  }
+`;
+
+const CityDropdownContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+`;
+
 const DatePickerWrapper = styled.div`
   margin: 10px;
   display: inline-block;
@@ -84,13 +106,34 @@ const HourlyVisualizations = () => {
   const [weatherData, setWeatherData] = useState(null);
   const [startDate, setStartDate] = useState(new Date("2024-08-06"));
   const [endDate, setEndDate] = useState(new Date("2024-08-20"));
+  const [selectedCity, setSelectedCity] = useState('SELECT CITY');
+  const [latitude, setLatitude] = useState(8.3122);
+  const [longitude, setLongitude] = useState(80.4131);
 
   const availableParams = {
-    temperature2m: "temperature_2m",
-    relativeHumidity2m: "relative_humidity_2m",
-    rain: "rain",
-    surfacePressure: "surface_pressure",
-    windSpeed10m: "wind_speed_10m"
+    Temperature: "temperature_2m",
+    RelativeHumidity: "relative_humidity_2m",
+    Rain: "rain",
+    SurfacePressure: "surface_pressure",
+    WindSpeed: "wind_speed_10m"
+  };
+
+  //cities added
+  const cities = [
+    { name: "COLOMBO", latitude: 6.9355, longitude: 79.8487 },
+    { name: "ANURADHAPURA", latitude: 8.3122, longitude: 80.4131 },
+    { name: "HIKKADUWA", latitude: 6.1407, longitude: 80.1012 },
+    { name: "NUWARA ELIYA", latitude: 6.9708, longitude: 80.7829 },
+    { name: "JAFFNA", latitude: 9.6684, longitude: 80.0074 }
+  ];
+
+  const handleCitySelection = (event) => {
+    const city = cities.find(city => city.name === event.target.value);
+    if (city) {
+      setSelectedCity(city.name);
+      setLatitude(city.latitude);
+      setLongitude(city.longitude);
+    }
   };
 
   const handleParamSelection = (param) => {
@@ -101,8 +144,8 @@ const HourlyVisualizations = () => {
 
   const fetchWeatherData = async () => {
     const params = {
-      latitude: 8.3122,
-      longitude: 80.4131,
+      latitude: latitude,
+      longitude: longitude,
       start_date: startDate.toISOString().split('T')[0],
       end_date: endDate.toISOString().split('T')[0],
       hourly: selectedParams,
@@ -146,6 +189,17 @@ const HourlyVisualizations = () => {
         </FetchButton>
       </ButtonContainer>
 
+      <CityDropdownContainer>
+        <SelectCityDropdown value={selectedCity} onChange={handleCitySelection}>
+          <option value="SELECT CITY" disabled>SELECT CITY</option>
+          {cities.map((city) => (
+            <option key={city.name} value={city.name}>
+              {city.name}
+            </option>
+          ))}
+        </SelectCityDropdown>
+      </CityDropdownContainer>
+
       <DatePickerContainer>
         <DatePickerWrapper>
           <label>Start Date: </label>
@@ -175,4 +229,4 @@ const HourlyVisualizations = () => {
   );
 };
 
-export default HourlyVisualizations;
+export default HourlyVisualizations;

frontend/src/components/home page/predictionSelector.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import ApexChartDaily from './apexChartsDaily';
 import ApexChartHourly from './apexChartsHourly';
-import './PredictionSelector.css';
+import './predictionSelector.css';
 import { FaSun, FaCloudSun, FaCloudRain } from 'react-icons/fa'; // Example icons
 
 function PredictionSelector() {