forked from jamesraymondbrown/RentProof
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' of github.com:jamesraymondbrown/rent-tracker
- Loading branch information
Showing
7 changed files
with
275 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ? ( | ||
| <div>loading...</div> | ||
| ) : ( | ||
| <Card | ||
| title="Welcome to Rentproof!" | ||
| subTitle="" | ||
| className="welcome-card welcome-title" | ||
| > | ||
| <p className="m-0 welcome-card welcome-message"> | ||
| Welcome to RentProof! We're currently tracking{" "} | ||
| <strong>{prices.length}</strong> prices across{" "} | ||
| <strong>{properties.length}</strong> different properties. | ||
| </p> | ||
| <p className="m-0 welcome-card welcome-message"> | ||
| Do you have info to share that might help your fellow renters?{" "} | ||
| <a href="http://localhost:8000/register">Create an account</a> or{" "} | ||
| <a href="http://localhost:8000/login">login</a> to get started! | ||
| </p> | ||
| </Card> | ||
| ); | ||
| }; | ||
|
|
||
| export default WelcomeCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
176 changes: 176 additions & 0 deletions
176
client/src/components/helpers/getPriceChangePercentage.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 <div>{data[data.length - 1].price_difference_percentage}</div>; | ||
| }; | ||
|
|
||
| module.exports = getPriceChangePercentage(); |