Add a new graph to renting and move things around

public/i18n/cz/translation.json

@@ -64,5 +64,6 @@
   "Select currency": "Vyberte měnu",
   "Language": "Jazyk",
   "Select language": "Vyberte jazyk",
-  "Monthly costs of buying": "Měsíční náklady na koupi"
+  "Monthly costs of buying": "Měsíční náklady na koupi",
+  "Interest": "Úrok"
 }

public/i18n/de/translation.json

@@ -64,5 +64,6 @@
   "Select currency": "Währung auswählen",
   "Language": "Sprache",
   "Select language": "Sprache auswählen",
-  "Monthly costs of buying": "Monatliche Kosten des Kaufens"
+  "Monthly costs of buying": "Monatliche Kosten des Kaufens",
+  "Interest": "Zinsen"
 }

public/i18n/dk/translation.json

@@ -64,5 +64,6 @@
   "Select currency": "Vælg valuta",
   "Language": "Sprog",
   "Select language": "Vælg sprog",
-  "Monthly costs of buying": "Månedlige omkostninger ved køb"
+  "Monthly costs of buying": "Månedlige omkostninger ved køb",
+  "Interest": "Rente"
 }

public/i18n/en/translation.json

@@ -64,5 +64,6 @@
   "Select currency": "Select Currency",
   "Language": "Language",
   "Select language": "Select Language",
-  "Monthly costs of buying": "Monthly Costs of Buying"
+  "Monthly costs of buying": "Monthly Costs of Buying",
+  "Interest": "Interest"
 }

public/i18n/ro/translation.json

@@ -64,5 +64,6 @@
   "Select currency": "Selectează moneda",
   "Language": "Limba",
   "Select language": "Selectează limba",
-  "Monthly costs of buying": "Costuri lunare de cumpărare"
+  "Monthly costs of buying": "Costuri lunare de cumpărare",
+  "Interest": "Dobândă"
 }

public/i18n/se/translation.json

@@ -64,5 +64,6 @@
   "Select currency": "Välj valuta",
   "Language": "Språk",
   "Select language": "Välj språk",
-  "Monthly costs of buying": "Månadskostnader för köp"
+  "Monthly costs of buying": "Månadskostnader för köp",
+  "Interest": "Ränta"
 }

src/components/calculatorInputs.tsx

@@ -8,12 +8,12 @@ function CalculatorInputs() {
   const { t } = useTranslation();
   return (
     <Stack spacing={3}>
-      <PaperWrapper title={t("Renting")}>
-        <Renting />
-      </PaperWrapper>
       <PaperWrapper title={t("Buying")}>
         <Buying />
       </PaperWrapper>
+      <PaperWrapper title={t("Renting")}>
+        <Renting />
+      </PaperWrapper>
       <br />
     </Stack>
   );

src/components/inputBlocks/buying.tsx

@@ -125,7 +125,7 @@ function Buying() {
           <PieChart
             slotProps={{
               legend: {
-                direction: "column",
+                direction: "row",
                 position: { vertical: "top", horizontal: "right" },
                 padding: 0,
               },
@@ -152,7 +152,7 @@ function Buying() {
               },
             ]}
             width={500}
-            height={200}
+            height={300}
           />
         )}
       </Grid>

src/components/inputBlocks/renting.tsx

@@ -2,12 +2,14 @@ import NumberFields from "../numberFields.tsx";
 import useCalculatorSlice from "../../../store/calculatorSlices/useCalculatorSlice.ts";
 import { NumberFieldProps } from "../numberField.tsx";
 import { getInputProps, usePercentageAdornment } from "../adornments.tsx";
-import { Checkbox, FormControlLabel, Typography } from "@mui/material";
+import { Checkbox, FormControlLabel, Grid, Typography } from "@mui/material";
 import { useDispatch } from "react-redux";
 import { toggleInvestDifference } from "../../../store/calculatorSlices/renting.ts";
 import { useMortgageDetails } from "../../services/buying/useMortgageDetails.ts";
 import { useLocaleCurrencyFormatter } from "../../../store/settings/useLocale.ts";
 import { useTranslation } from "react-i18next";
+import { PieChart } from "@mui/x-charts";
+import { useAlternativeInvestmentReturns } from "../../services/useAlternativeInvestment.ts";
 
 const Renting = () => {
   const { t } = useTranslation();
@@ -23,6 +25,8 @@ const Renting = () => {
 
   const getPercentageAdornment = usePercentageAdornment();
 
+  const alternativeInvestment = useAlternativeInvestmentReturns();
+
   const inputs: NumberFieldProps[] = [
     {
       label: t("Monthly Rent"),
@@ -113,6 +117,44 @@ const Renting = () => {
                   },
                 ]}
               ></NumberFields>
+              <Grid container justifyContent={"center"}>
+                <PieChart
+                  slotProps={{
+                    legend: {
+                      direction: "row",
+                      position: { vertical: "top", horizontal: "right" },
+                    },
+                  }}
+                  colors={["yellow", "orange", "green"]}
+                  series={[
+                    {
+                      data: [
+                        {
+                          id: 0,
+                          value: alternativeInvestment.allMonthlyInvestment,
+                          label: t("All monthly investments"),
+                        },
+                        {
+                          id: 1,
+                          value: alternativeInvestment.initialCash,
+                          label: t("Initial investment"),
+                        },
+                        {
+                          id: 2,
+                          value: alternativeInvestment.valueAdded,
+                          label: t("Interest"),
+                        },
+                      ],
+                      innerRadius: 50,
+                      outerRadius: 100,
+                      paddingAngle: 5,
+                      cornerRadius: 5,
+                    },
+                  ]}
+                  width={500}
+                  height={300}
+                />
+              </Grid>
             </>
           )}
         </>

src/components/result/result.tsx

@@ -105,44 +105,6 @@ function Result() {
           difference: formatAsCurrency(Math.abs(difference)),
         })}
       </Typography>
-      <ResultBlock
-        heading={makeLabel("Renting", yearsStaying)}
-        rows={[
-          { label: t("Deposit"), value: -1 * rentDeposit },
-          {
-            label: t("Rent"),
-            value: -1 * rentTotal,
-          },
-          {
-            label: t("Investment returns"),
-            value: alternativeInvestment.valueAdded,
-            tooltip: (
-              <ResultBlock
-                heading={t("Alternative investment")}
-                rows={[
-                  {
-                    label: t("Initial investment"),
-                    value: -1 * alternativeInvestment.initialCash,
-                  },
-                  {
-                    label: t("All monthly investments"),
-                    value: -1 * alternativeInvestment.allMonthlyInvestment,
-                  },
-                  "divider",
-                  {
-                    label: t("Total at the end"),
-                    value: alternativeInvestment.totalAtTheEnd,
-                  },
-                ]}
-              />
-            ),
-          },
-          { label: t("Deposit returned"), value: rentDeposit },
-          "divider",
-          { label: t("Total"), value: totalRenting },
-        ]}
-      />
-      <br />
       <ResultBlock
         chart={<BuyingChart graphData={yearValueChanges} />}
         heading={makeLabel("Buying", yearsStaying)}
@@ -202,6 +164,44 @@ function Result() {
         ]}
       />
       <br />
+      <ResultBlock
+        heading={makeLabel("Renting", yearsStaying)}
+        rows={[
+          { label: t("Deposit"), value: -1 * rentDeposit },
+          {
+            label: t("Rent"),
+            value: -1 * rentTotal,
+          },
+          {
+            label: t("Investment returns"),
+            value: alternativeInvestment.valueAdded,
+            tooltip: (
+              <ResultBlock
+                heading={t("Alternative investment")}
+                rows={[
+                  {
+                    label: t("Initial investment"),
+                    value: -1 * alternativeInvestment.initialCash,
+                  },
+                  {
+                    label: t("All monthly investments"),
+                    value: -1 * alternativeInvestment.allMonthlyInvestment,
+                  },
+                  "divider",
+                  {
+                    label: t("Total at the end"),
+                    value: alternativeInvestment.totalAtTheEnd,
+                  },
+                ]}
+              />
+            ),
+          },
+          { label: t("Deposit returned"), value: rentDeposit },
+          "divider",
+          { label: t("Total"), value: totalRenting },
+        ]}
+      />
+      <br />
     </Box>
   );
 }

src/theme.ts

@@ -27,6 +27,28 @@ const customTheme = createTheme({
         },
       },
     },
+    MuiTypography: {
+      styleOverrides: {
+        h1: {
+          wordBreak: "break-word",
+        },
+        h2: {
+          wordBreak: "break-word",
+        },
+        h3: {
+          wordBreak: "break-word",
+        },
+        h4: {
+          wordBreak: "break-word",
+        },
+        h5: {
+          wordBreak: "break-word",
+        },
+        h6: {
+          wordBreak: "break-word",
+        },
+      },
+    },
   },
 });