Merge branch 'master' of github.com:jamesraymondbrown/rent-tracker

client/src/components/helpers/getPriceChangePercentage.js → client/src/components/helpers/getPriceChangePercentages.js

@@ -1,13 +1,9 @@
-import { useContext } from "react";
-import { DataBaseContext } from "../../providers/DataBaseProvider";
-import { MarkerFilterContext } from "../../providers/MarkerFilterProvider";
-import { getPriceHistory } from "../helpers/getDataFromPrices";
+import { getPriceHistory } from "./getDataFromPrices";
 
-const getPriceChangePercentage = (currentProperty) => {
+export const getPriceChangePercentage = (currentProperty_id, prices, properties) => {
   const data = [];
-  const { prices, properties } = useContext(DataBaseContext);
-  const currentPropertyPrices = getPriceHistory(currentProperty.id, prices);
-  const averageIncreasePerYear = {
+  const currentPropertyPrices = getPriceHistory(currentProperty_id, prices);
+    const averageIncreasePerYear = {
     2015: [],
     2016: [],
     2017: [],
@@ -89,8 +85,6 @@ const getPriceChangePercentage = (currentProperty) => {
     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) {
@@ -154,10 +148,6 @@ const getPriceChangePercentage = (currentProperty) => {
     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 =
@@ -170,7 +160,7 @@ const getPriceChangePercentage = (currentProperty) => {
 
   // console.log("dataLogLog", data[data.length - 1].price_difference_percentage);
 
-  return <div>{data[data.length - 1].price_difference_percentage}</div>;
+  return data[data.length - 1].price_difference_percentage;
+
 };
 
-module.exports = getPriceChangePercentage();

client/src/components/map/Marker.jsx

@@ -2,6 +2,9 @@ import React, { useState, useContext, lazy, Suspense } from "react";
 import { getPriceChangePercentage } from "../helpers/getPriceChangePercentages";
 import { MarkerFilterContext } from "../../providers/MarkerFilterProvider";
 
+
+
+
 const GoogleMapMarker = lazy(() =>
   import("@react-google-maps/api").then((module) => ({
     default: module.Marker,
@@ -32,158 +35,37 @@ function Marker({
     state,
   } = useContext(MarkerFilterContext);
 
-  // console.log("state.currentProperty ➤", state.currentProperty);
-
-  function percentageToHexColor(percentage, lightness = 0, saturation = 100) {
-    let R, G, B;
-    percentage -= 60;
-
-    R = Math.round(percentage * 2 + lightness + (100 - saturation));
-    G = Math.round(150 + lightness - percentage * 2.5 + (100 - saturation));
-    B =
-      150 + lightness - percentage * 2.5 >= 255
-        ? (150 + lightness - percentage * 2.5 - 255) * 4
-        : 0 + (100 - saturation);
-
-    R = R > 255 ? 255 : R < 0 ? 0 : R;
-    G = G > 255 ? 255 : G < 0 ? 0 : G;
-    B = B > 255 ? 255 : B < 0 ? 0 : B;
-
-    R = R.toString(16).padStart(2, "0");
-    G = G.toString(16).padStart(2, "0");
-    B = B.toString(16).padStart(2, "0");
-
-    return "#" + R + G + B;
-  }
-
-  function desaturate(hex, amount) {
-    // Remove the '#' from the beginning of the hex string
-    hex = hex.substring(1);
-
-    // Convert hex string to RGB values
-    let r = parseInt(hex.substring(0, 2), 16);
-    let g = parseInt(hex.substring(2, 4), 16);
-    let b = parseInt(hex.substring(4, 6), 16);
 
-    // Desaturate the color by averaging the RGB values and scaling them down
-    let avg = (r + g + b) / 3;
-    r = Math.round(avg + (r - avg) * (1 - amount));
-    g = Math.round(avg + (g - avg) * (1 - amount));
-    b = Math.round(avg + (b - avg) * (1 - amount));
-
-    // Convert the RGB values back to a hex string
-    let result = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-    return "#" + result;
-  }
-
-  function darken(hex, amount) {
-    // Remove the '#' from the beginning of the hex string
-    hex = hex.substring(1);
-
-    // Convert hex string to RGB values
-    let r = parseInt(hex.substring(0, 2), 16);
-    let g = parseInt(hex.substring(2, 4), 16);
-    let b = parseInt(hex.substring(4, 6), 16);
-
-    // Darken the color by decreasing the RGB values
-    r = Math.round(r * (1 - amount));
-    g = Math.round(g * (1 - amount));
-    b = Math.round(b * (1 - amount));
-
-    // Convert the RGB values back to a hex string
-    let result = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-    return "#" + result;
-  }
 
-  const costVSavg = (getPriceChangePercentage(id, prices, properties)*4)+100;
+  let costVSavg = getPriceChangePercentage(id, prices, properties);
+  if (costVSavg <= -20) {costVSavg = -20}
+  costVSavg = Math.floor((costVSavg + 20) / 2.4);
+  if (costVSavg>=14){costVSavg=14}
+  //  console.log("costVSavg ➤", costVSavg); 
 
 
   const isGray =
     state.prevProperty.includes(id) && state.currentProperty.id !== id;
-  const saturation = state.prevProperty.includes(id) ? 0 : 100;
-  const markerColor = percentageToHexColor(costVSavg, 120);
-  const markerColorgreyed = desaturate(markerColor, 0.5);
-  const markerColorgreyeddark = darken(desaturate(markerColor, 0.5), 0.3);
-  const markerColorDarker = darken(markerColor, 0.7);
-  const markerColorDark = darken(markerColor, 0.4);
-  const Point = window.google.maps.Point;
-  const Circle = window.google.maps.SymbolPath.CIRCLE;
-
-  const pinSymbol2 = function (color, greycolor, darkColor, isGray, isHovered) {
-    return {
-      path: Circle,
-      fillColor: isGray ? greycolor : color,
-      strokeColor: isGray ? "#808080" : darkColor,
-      strokeWeight: isHovered ? 0.5 : 0.5,
-      fillOpacity: 1,
-      scale: isHovered ? 5.2 : 4,
-      anchor: new Point(0.2, 4.8),
-    };
-  };
-
-  function pinSymbol1(color, greycolor, darkColor, isGray, isHovered) {
-    return {
-      path: "M23.667 11.84c0 7.52-10.048 19.52-11.5 19.52s-11.5-12-11.5-19.52C.667 5.743 5.816.8 12.167.8c6.35 0 11.5 4.943 11.5 11.04",
-      fillColor: isGray ? greycolor : color,
-      fillOpacity: 1,
-      strokeColor: isGray ? "#808080" : darkColor,
-      strokeWeight: isHovered ? 3 : 1,
-      scale: isHovered ? 1.3 : 1,
-      anchor: new Point(13, 32),
-    };
-  }
-  // console.log("state.currentProperty.id === id ➤", state.currentProperty.id === id);
-  // console.log("state.prevProperty.includes(id) ➤", state.prevProperty.includes(id));
-
   return (
     <div>
       {(selectedBedrooms.includes(bedrooms) || !selectedBedrooms.length) &&
       (selectedBathrooms.includes(bathrooms) || !selectedBathrooms.length) &&
       cost < maxF &&
       cost > minF ? (
         <Suspense fallback={<div>Loading...</div>}>
-          {/* Marker 1 */}
           <GoogleMapMarker
             position={position}
             title={title}
             zIndex={isGray ? 0 : 1}
             onClick={() => handleClickMarker(id)}
-            icon={pinSymbol1(
-              markerColor,
-              markerColorgreyed,
-              markerColorDarker,
-              isGray,
-              isHovered
-            )}
-            onMouseOver={() => {
-              setIsHovered(true);
+            icon={{
+              url: require(`../Docs/marker${
+                isGray ? "grey" : ""
+              }${costVSavg}.png`),
+              scaledSize: isHovered
+                ? { width: 34, height: 47 }
+                : { width: 26, height: 36 },
             }}
-            onMouseOut={() => {
-              setIsHovered(false);
-            }}
-            animation={(() => {
-              if (state.currentProperty.id === id) {
-                return 1;
-              }
-              if (state.prevProperty.includes(id)) {
-                return null;
-              }
-              return 2;
-            })()}
-          />
-          Marker 2
-          <GoogleMapMarker
-            position={position}
-            title={title}
-            zIndex={isGray ? 0 : 1}
-            onClick={() => handleClickMarker(id)}
-            icon={pinSymbol2(
-              markerColorDarker,
-              markerColorgreyeddark,
-              markerColorDark,
-              isGray,
-              isHovered
-            )}
             onMouseOver={() => {
               setIsHovered(true);
             }}