feat: use maintenance object key in resale value chart

theopensystemslab · Jan 16, 2025 · e846a55 · e846a55
1 parent 762f341
commit e846a55
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 34 deletions.
diff --git a/app/components/graphs/ResaleValueLineChart.tsx b/app/components/graphs/ResaleValueLineChart.tsx
@@ -7,6 +7,7 @@ import {
   ChartTooltip,
 } from "@/components/ui/chart";
 import { formatValue } from "@/app/lib/format";
+import { MaintenanceLevel } from "@/app/models/constants";
 
 type CustomTooltipProps = TooltipProps<number, string> & {
   payload?: Array<{
@@ -17,35 +18,35 @@ type CustomTooltipProps = TooltipProps<number, string> & {
 };
 
 const chartConfig = {
-  noMaintenance: {
+  none: {
     label: "No maintenance",
     color: "rgb(var(--fairhold-land-color-rgb))", 
   },
-  lowMaintenance: {
+  low: {
     label: "Low maintenance",
     color: "rgb(var(--fairhold-land-color-rgb))",
   },
-  mediumMaintenance: {
+  medium: {
     label: "Medium maintenance",
     color: "rgb(var(--fairhold-land-color-rgb))",
   },
-  highMaintenance: {
+  high: {
     label: "High maintenance",
     color: "rgb(var(--fairhold-land-color-rgb))",
   },
 } satisfies ChartConfig;
 
 export interface DataPoint {
   year: number;
-  noMaintenance: number;
-  lowMaintenance: number;
-  mediumMaintenance: number;
-  highMaintenance: number;
+  none: number;
+  low: number;
+  medium: number;
+  high: number;
 }
 
 interface ResaleValueLineChartProps {
   data: DataPoint[];
-  selectedMaintenance: "noMaintenance" | "lowMaintenance" | "mediumMaintenance" | "highMaintenance";
+  selectedMaintenance: MaintenanceLevel;
   maxY: number;
 }
 
@@ -126,10 +127,10 @@ const ResaleValueLineChart: React.FC<ResaleValueLineChartProps> = ({
               />
             </YAxis>
             <ChartTooltip content={<CustomTooltip />} />
-            {renderLine("highMaintenance")}
-            {renderLine("mediumMaintenance")}
-            {renderLine("lowMaintenance")}
-            {renderLine("noMaintenance")}
+            {renderLine("high")}
+            {renderLine("medium")}
+            {renderLine("low")}
+            {renderLine("none")}
           </LineChart>
         </ChartContainer>
       </CardContent>

diff --git a/app/components/graphs/ResaleValueWrapper.tsx b/app/components/graphs/ResaleValueWrapper.tsx
@@ -14,21 +14,6 @@ const ResaleValueWrapper: React.FC<ResaleValueWrapperProps> = ({
     tenure,
     household
 }) => {
-    // Since we want one line (user selected) to be solid, need to map the maintenance percentage to the line type
-    const getSelectedMaintenance = (maintenancePercentage: number): 'noMaintenance' | 'lowMaintenance' | 'mediumMaintenance' | 'highMaintenance' => { 
-      switch (maintenancePercentage) {
-        case 0:
-          return 'noMaintenance';
-        case 0.015:
-          return 'lowMaintenance';
-        case 0.019:
-          return 'mediumMaintenance';
-        case 0.025:
-          return 'highMaintenance';
-        default:
-          return 'lowMaintenance';
-      }
-    };
 
     /** Needs either `landRent` or `landPurchase` to denote Fairhold tenure type; based on this arg, it will determine if land resale value is 0 or FHLP over time */
     const formatData = (household: Household) => {
@@ -41,18 +26,17 @@ const ResaleValueWrapper: React.FC<ResaleValueWrapperProps> = ({
 
         chartData.push({
           year: i + 1,
-          noMaintenance: landValue + lifetime[i].depreciatedHouseResaleValueNoMaintenance,
-          lowMaintenance: landValue + lifetime[i].depreciatedHouseResaleValueLowMaintenance,
-          mediumMaintenance: landValue + lifetime[i].depreciatedHouseResaleValueMediumMaintenance,
-          highMaintenance: landValue + lifetime[i].depreciatedHouseResaleValueHighMaintenance
+          none: landValue + lifetime[i].depreciatedHouseResaleValueNoMaintenance,
+          low: landValue + lifetime[i].depreciatedHouseResaleValueLowMaintenance,
+          medium: landValue + lifetime[i].depreciatedHouseResaleValueMediumMaintenance,
+          high: landValue + lifetime[i].depreciatedHouseResaleValueHighMaintenance
         })
 
       }
       return chartData
     }
 
     const formattedData = formatData(household);
-    const selectedMaintenance = getSelectedMaintenance(household.property.maintenancePercentage)
 
     // We want a constant y value across the graphs so we can compare resale values between them
     const finalYear = household.lifetime.lifetimeData[household.lifetime.lifetimeData.length - 1]
@@ -67,7 +51,7 @@ const ResaleValueWrapper: React.FC<ResaleValueWrapperProps> = ({
         <div>
           <ResaleValueLineChart 
             data={formattedData} 
-            selectedMaintenance={selectedMaintenance}
+            selectedMaintenance={household.property.maintenanceLevel}
             maxY={maxY}
             />
         </div>