diff --git a/client/src/components/RentList.jsx b/client/src/components/RentList.jsx index ee42959..5358838 100644 --- a/client/src/components/RentList.jsx +++ b/client/src/components/RentList.jsx @@ -16,6 +16,7 @@ import { getBathroomsFromPrices, } from "./helpers/getDataFromPrices"; import LazyLoad from "react-lazyload"; +import WelcomeCard from "./WelcomeCard"; const RentList = () => { const { state } = useContext(MarkerFilterContext); @@ -54,11 +55,10 @@ const RentList = () => { } }, [showCharts]); - return (
- + @@ -134,16 +134,32 @@ const RentList = () => { ) : ( - Rent List + <> + Rent List + + {/* + + + + + + + + + + + + +
PropertiesPrices
{properties.length}{prices.length}
*/} + )}
); - }; export default RentList; diff --git a/client/src/components/RentList.scss b/client/src/components/RentList.scss index f93c301..c6f1d47 100644 --- a/client/src/components/RentList.scss +++ b/client/src/components/RentList.scss @@ -46,7 +46,7 @@ border-bottom: none; border-top-left-radius: 5px; border-top-right-radius: 5px; - font-size: .85em; + font-size: 0.85em; } .home-right-property-table-bottom { @@ -55,7 +55,7 @@ border-top: none; border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; - font-size: .85em; + font-size: 0.85em; } .home-right-property-table-top thead tr th { diff --git a/client/src/components/WelcomeCard.jsx b/client/src/components/WelcomeCard.jsx new file mode 100644 index 0000000..2d517ba --- /dev/null +++ b/client/src/components/WelcomeCard.jsx @@ -0,0 +1,31 @@ +import { DataBaseContext } from "../providers/DataBaseProvider"; +import { Card } from "primereact/card"; +import { useContext } from "react"; +import "./WelcomeCard.scss"; + +const WelcomeCard = () => { + const { users, properties, prices } = useContext(DataBaseContext); + + return prices === null || properties === null ? ( +
loading...
+ ) : ( + +

+ Welcome to RentProof! We're currently tracking{" "} + {prices.length} prices across{" "} + {properties.length} different properties. +

+

+ Do you have info to share that might help your fellow renters?{" "} + Create an account or{" "} + login to get started! +

+ + ); +}; + +export default WelcomeCard; diff --git a/client/src/components/WelcomeCard.scss b/client/src/components/WelcomeCard.scss new file mode 100644 index 0000000..c0718aa --- /dev/null +++ b/client/src/components/WelcomeCard.scss @@ -0,0 +1,37 @@ +.welcome-card { + padding: 10px; + margin-top: 15px; + margin-left: 15px; + margin-right: 15px; + + .p-card-title { + margin-left: 10px; + margin-bottom: 0px; + } + + .p-card-subtitle { + margin-left: 10px; + margin-bottom: 0px; + } + + .p-card-body { + padding: 5px; + } + + .p-card-content { + padding-top: 5px; + padding-bottom: 5px; + } + + .welcome-message { + padding: 5px; + margin-left: 5px; + margin-right: 5px; + margin-top: 3px; + margin-bottom: 0px; + } + + a { + color: black; + } +} diff --git a/client/src/components/charts/RentGrowthRateVsMarket.jsx b/client/src/components/charts/RentGrowthRateVsMarket.jsx index 4bd75bf..7146ea0 100644 --- a/client/src/components/charts/RentGrowthRateVsMarket.jsx +++ b/client/src/components/charts/RentGrowthRateVsMarket.jsx @@ -229,7 +229,7 @@ const RentGrowthRateVsMarket = (props) => { return
Not enough data
; } - console.log("dataLogLog", data); + console.log("dataLogLog", data[data.length - 1].price_difference_percentage); return (
diff --git a/client/src/components/charts/SelectedPropertyVsAll.jsx b/client/src/components/charts/SelectedPropertyVsAll.jsx index b417c5b..0ea7a66 100644 --- a/client/src/components/charts/SelectedPropertyVsAll.jsx +++ b/client/src/components/charts/SelectedPropertyVsAll.jsx @@ -172,24 +172,23 @@ const RentIncreaseChart = (props) => { } const CustomTooltip = ({ active, payload, label }) => { - if (active && data.compare_at_price && payload.length) { + if (active && data[0].compare_at_price && payload.length > 1) { return (

{`Year: ${label}`}

{`Actual price: $${payload[0].value}`}

- {}

{`Market-adjusted price: $${payload[1].value}`}

- {/* {console.log("load", payload)} */} + {console.log("load", payload)}
); } return null; }; - console.log("data", data); + // console.log("data", data[0].compare_at_price); return data.length < 3 ? ( -
Not enough data...
+
Not enough data
) : (
diff --git a/client/src/components/helpers/getPriceChangePercentage.js b/client/src/components/helpers/getPriceChangePercentage.js new file mode 100644 index 0000000..4631131 --- /dev/null +++ b/client/src/components/helpers/getPriceChangePercentage.js @@ -0,0 +1,176 @@ +import { useContext } from "react"; +import { DataBaseContext } from "../../providers/DataBaseProvider"; +import { MarkerFilterContext } from "../../providers/MarkerFilterProvider"; +import { getPriceHistory } from "../helpers/getDataFromPrices"; + +const getPriceChangePercentage = (currentProperty) => { + const data = []; + const { prices, properties } = useContext(DataBaseContext); + const currentPropertyPrices = getPriceHistory(currentProperty.id, prices); + const averageIncreasePerYear = { + 2015: [], + 2016: [], + 2017: [], + 2018: [], + 2019: [], + 2020: [], + 2021: [], + 2022: [], + 2023: [], + }; + + const addPricesToData = () => { + for (let price of currentPropertyPrices) { + if (price.admin_status === "approved") { + data.push({ + date: parseInt(price.date.substring(0, 4)), + price: parseInt(price.price), + }); + } + } + getRentIncreaseAverages(prices, properties, data); + }; + + const getRentIncreaseAverages = (prices, properties, data) => { + const priceObject = {}; + const allIncreasesPerYear = { + 2014: [], + 2015: [], + 2016: [], + 2017: [], + 2018: [], + 2019: [], + 2020: [], + 2021: [], + 2022: [], + 2023: [], + }; + + // Add an array to the priceObject, for each property. The key is that property's ID + for (const property of properties) { + priceObject[property.id] = []; + } + + // Push the price data for each property into the correct array + for (const price of prices) { + priceObject[price.property_id].push(price); + } + + // Loop through each property to get an integer for querying the priceObject object + for (let property of properties) { + // Another loop for getting the index of the array inside of each priceObject index (priceObject is an object full of arrays) + for (let i = 1; i < priceObject[property.id].length; i++) { + if (priceObject[property.id].length > 3) { + allIncreasesPerYear[ + priceObject[property.id][i].date.substring(0, 4) + ].push( + Math.round( + ((parseInt(priceObject[property.id][i].price) - + parseInt(priceObject[property.id][i - 1].price)) / + parseInt(priceObject[property.id][i - 1].price)) * + 100 * + 10 + ) / 10 + ); + } + } + } + + // now we have an allIncreasesPerYear object, that contains an array with the percentage increase for each property, for each year + // Loop through that data to get the average increase per year, and push that to our data array + for (let i = 2015; i <= 2023; i++) { + let sum = 0; + for (const indexValue of allIncreasesPerYear[i]) { + sum += indexValue; + } + averageIncreasePerYear[i] = + Math.round((sum / allIncreasesPerYear[i].length) * 100) / 100; + } + showPricesBasedOnAverages(); + }; + + // Multiplies the initial property price by the average rent increase percentage, to compare + // what it would be like if this property followed the market trend exactly + const showPricesBasedOnAverages = () => { + for (let i = 0; i < data.length; i++) { + if (data[i].date === 2014) { + data[i].compare_at_price = data[i].price; + } + if (data[i].date === 2015 && data[i - 1] !== undefined) { + data[i].compare_at_price = Math.round( + data[i - 1].compare_at_price + + data[i - 1].compare_at_price * (averageIncreasePerYear[2015] / 100) + ); + } + if (data[i].date === 2016 && data[i - 1] !== undefined) { + data[i].compare_at_price = Math.round( + data[i - 1].compare_at_price + + data[i - 1].compare_at_price * (averageIncreasePerYear[2016] / 100) + ); + } + if (data[i].date === 2017 && data[i - 1] !== undefined) { + data[i].compare_at_price = Math.round( + data[i - 1].compare_at_price + + data[i - 1].compare_at_price * (averageIncreasePerYear[2017] / 100) + ); + } + if (data[i].date === 2018 && data[i - 1] !== undefined) { + data[i].compare_at_price = Math.round( + data[i - 1].compare_at_price + + data[i - 1].compare_at_price * (averageIncreasePerYear[2018] / 100) + ); + } + if (data[i].date === 2019 && data[i - 1] !== undefined) { + data[i].compare_at_price = Math.round( + data[i - 1].compare_at_price + + data[i - 1].compare_at_price * (averageIncreasePerYear[2019] / 100) + ); + } + if (data[i].date === 2020 && data[i - 1] !== undefined) { + data[i].compare_at_price = Math.round( + data[i - 1].compare_at_price + + data[i - 1].compare_at_price * (averageIncreasePerYear[2020] / 100) + ); + } + if (data[i].date === 2021 && data[i - 1] !== undefined) { + data[i].compare_at_price = Math.round( + data[i - 1].compare_at_price + + data[i - 1].compare_at_price * (averageIncreasePerYear[2021] / 100) + ); + } + if (data[i].date === 2022 && data[i - 1] !== undefined) { + data[i].compare_at_price = Math.round( + data[i - 1].compare_at_price + + data[i - 1].compare_at_price * (averageIncreasePerYear[2022] / 100) + ); + } + if (data[i].date === 2023 && data[i - 1] !== undefined) { + data[i].compare_at_price = Math.round( + data[i - 1].compare_at_price + + data[i - 1].compare_at_price * (averageIncreasePerYear[2023] / 100) + ); + } + } + percentIncreaseVsMarketAverage(); + }; + + // convert the price difference into a percentage, comparing how much higher or lower the current + // property's price is vs market trends. Above 0 is above market value, below 0 is below market + // value. So below 0 means you're getting a better deal + + const percentIncreaseVsMarketAverage = () => { + for (const d of data) { + d.price_difference_percentage = + Math.round((d.price / d.compare_at_price - 1) * 100 * 10) / 10; + } + }; + + // Call function to populate the data + addPricesToData(); + + // console.log("dataLogLog", data[data.length - 1].price_difference_percentage); + + return
{data[data.length - 1].price_difference_percentage}
; +}; + +module.exports = getPriceChangePercentage();