investment => asset

components/calculator/investment.vue → components/calculator/asset.vue

@@ -4,7 +4,7 @@
             <el-row>
                 <el-col :span="24">
                     <el-form-item label="資產配置">
-                        <el-radio-group v-model="investment.allocationETF" @change="calculateAsset()">
+                        <el-radio-group v-model="asset.allocationETF" @change="calculateAsset()">
                             <el-radio v-for="(label, key) in config.porfolioLabels" :value="key">{{ label
                                 }}</el-radio>
                         </el-radio-group>
@@ -14,7 +14,7 @@
             <el-row>
                 <el-col :span="23">
                     <el-form-item label="投資報酬率">
-                        <el-slider v-model="investment.stockPercentage" :marks="allocationQuartileMarks"
+                        <el-slider v-model="asset.stockPercentage" :marks="allocationQuartileMarks"
                             :disabled="true" />
                     </el-form-item>
                 </el-col>
@@ -23,7 +23,7 @@
             <el-row>
                 <el-col :span="12">
                     <el-form-item label="已備資產">
-                        <el-input-number v-model="investment.presentAsset" :min="0" :step="100000"
+                        <el-input-number v-model="asset.presentAsset" :min="0" :step="100000"
                             :disabled="isFormDisabled" @change="calculateAsset()" />
                     </el-form-item>
                 </el-col>
@@ -202,7 +202,7 @@ const props = defineProps({
 })
 const allocationQuartileMarks = reactive({})
 // hooks
-const investment = computed(() => {
+const asset = computed(() => {
     return props.modelValue
 })
 const isFormDisabled = computed(() => {
@@ -232,21 +232,21 @@ function calculateAsset(options: any = { propagate: true }) {
     })(propagate)
 }
 function calculatePortfolio() {
-    const { allocationETF } = investment.value
+    const { allocationETF } = asset.value
     const { portfolioIRR, porfolioLabels } = props.config
     const allocationLabels = Object.keys(porfolioLabels)
     const allocationIndex = allocationLabels.findIndex(label => label === allocationETF)
     const stockPercentage = Math.floor((allocationIndex + 1) * 20)
-    investment.value.stockPercentage = stockPercentage
-    investment.value.irr = portfolioIRR[allocationETF]
+    asset.value.stockPercentage = stockPercentage
+    asset.value.irr = portfolioIRR[allocationETF]
 
 }
 function calculateInvestmentPeriod() {
-    investment.value.period = props.retirement.yearToRetirement
+    asset.value.period = props.retirement.yearToRetirement
 }
 
 const unableToDraw = computed(() => {
-    const { presentAsset, irr, period } = investment.value
+    const { presentAsset, irr, period } = asset.value
     const { monthlySaving } = props.career
     const noPv = !presentAsset
     const noPmt = !monthlySaving
@@ -255,16 +255,16 @@ const unableToDraw = computed(() => {
     return (noPv && noPmt) || noIY || noN
 })
 
-let investmentChartInstance = ref<Chart>()
+let assetChartInstance = ref<Chart>()
 function drawLifeAssetChart(propagate = true) {
     if (propagate) {
-        emits('update:modelValue', investment.value)
+        emits('update:modelValue', asset.value)
     }
     if (unableToDraw.value) {
         return
     }
-    const { presentAsset, irr, period } = investment.value
-    const { downpayYear, downpay, monthlyRepay, loanTerm, downpayGoal } = props.mortgage
+    const { presentAsset, irr, period } = asset.value
+    const { downpayYear, downpay, monthlyRepay, loanTerm, downpayGoal, totalPrice } = props.mortgage
     const { currentYear, inflationRate } = props.config
     const { monthlyContribution } = props.spouse
     const spouseAnnualContribution = monthlyContribution * 12
@@ -279,6 +279,7 @@ function drawLifeAssetChart(propagate = true) {
     const investingData: number[] = []
     const mortgageData: number[] = []
     const downpayData: number[] = []
+    const estateData: number[] = []
     const spouseContribution: number[] = []
     const childExpenseData: number[] = []
 
@@ -336,11 +337,16 @@ function drawLifeAssetChart(propagate = true) {
         const mortgageStartYear = downpayYear
         const mortgageEndYear = downpayYear + loanTerm
         let mortgagePmt = 0
-        if (mortgageStartYear <= year && year < mortgageEndYear) {
-            mortgagePmt = monthlyRepay * 12
+        let inflatedTotalPrice = 0
+        if (mortgageStartYear <= year) {
+            if (year < mortgageEndYear) {
+                mortgagePmt = monthlyRepay * 12
+            }
+            inflatedTotalPrice = Math.floor(totalPrice * inflationModifier)
         }
-        calculatedPmt -= mortgagePmt
+        estateData.push(inflatedTotalPrice)
         mortgageData.push(Math.floor(-mortgagePmt))
+        calculatedPmt -= mortgagePmt
 
         // 計算複利終值
         fv = pv * irrModifier
@@ -376,15 +382,19 @@ function drawLifeAssetChart(propagate = true) {
             label: '頭期款',
             data: downpayData,
         })
+        datasets.push({
+            label: '房地增值',
+            data: estateData,
+        })
     }
     const chartData = {
         datasets,
         labels
     }
 
-    if (investmentChartInstance.value) {
-        investmentChartInstance.value.data = chartData
-        investmentChartInstance.value.update()
+    if (assetChartInstance.value) {
+        assetChartInstance.value.data = chartData
+        assetChartInstance.value.update()
         return
     }
     const ctx: any = document.getElementById('assetChart')
@@ -402,7 +412,7 @@ function drawLifeAssetChart(propagate = true) {
             }
         }
     })
-    investmentChartInstance = shallowRef(chartInstance)
+    assetChartInstance = shallowRef(chartInstance)
 }
 
 const debounceId = ref()

components/calculator/index.vue

@@ -45,12 +45,12 @@
 
         <h2 id="_五子登科" tabindex="-1">五子登科<a class="header-anchor" href="#五子登科"
                 aria-label="Permalink to &quot;五子登科&quot;">&ZeroWidthSpace;</a></h2>
-        <h3 id="_投資資產試算" tabindex="-1">投資資產試算<a class="header-anchor" href="#投資資產試算"
-                aria-label="Permalink to &quot;投資資產試算&quot;">&ZeroWidthSpace;</a></h3>
-        <Investment v-model="userForm.investment" :config="config" :profile="userForm.profile" :career="userForm.career"
+        <h3 id="_資產試算" tabindex="-1">資產試算<a class="header-anchor" href="#資產試算"
+                aria-label="Permalink to &quot;資產試算&quot;">&ZeroWidthSpace;</a></h3>
+        <Asset v-model="userForm.asset" :config="config" :profile="userForm.profile" :career="userForm.career"
             :spouse="userForm.spouse" :parenting="userForm.parenting" :mortgage="userForm.mortgage"
             :retirement="userForm.retirement" ref="InvestmentRef" @update:model-value="onInvestmentChanged()">
-        </Investment>
+        </Asset>
 
         <h3 id="_結婚試算" tabindex="-1">配偶試算<a class="header-anchor" href="#配偶試算"
                 aria-label="Permalink to &quot;結婚試算&quot;">&ZeroWidthSpace;</a></h3>
@@ -60,15 +60,15 @@
         <h3 id="_家庭責任試算" tabindex="-1">家庭責任試算<a class="header-anchor" href="#家庭責任試算"
                 aria-label="Permalink to &quot;家庭責任試算&quot;">&ZeroWidthSpace;</a></h3>
         <Parenting v-model="userForm.parenting" :config="config" :career="userForm.career"
-            :retirement="userForm.retirement" :spouse="userForm.spouse" :investment="userForm.investment"
+            :retirement="userForm.retirement" :spouse="userForm.spouse" :asset="userForm.asset"
             :estateSize="userForm.estateSize" :mortgage="userForm.mortgage" ref="ParentingRef"
             @update:model-value="onParentingChanged()">
         </Parenting>
 
         <h3 id="_購屋試算" tabindex="-1">購屋試算<a class="header-anchor" href="#購屋試算"
                 aria-label="Permalink to &quot;購屋試算&quot;">&ZeroWidthSpace;</a></h3>
         <Mortgage v-model="userForm.mortgage" :config="config" :career="userForm.career"
-            :estateSize="userForm.estateSize" :investment="userForm.investment" :estatePrice="userForm.estatePrice"
+            :estateSize="userForm.estateSize" :asset="userForm.asset" :estatePrice="userForm.estatePrice"
             ref="MortgageRef" @update:model-value="onMortgageChanged()" @open="openEstateCalculator()"
             @reset="resetTotalPrice()">
         </Mortgage>
@@ -95,7 +95,7 @@ import Profile from './profile.vue'
 import CareerLabor from './career/labor.vue'
 import CareerGovernment from './career/government.vue'
 import Retirement from './retirement.vue'
-import Investment from './investment.vue'
+import Asset from './asset.vue'
 import Spouse from './spouse.vue'
 import Parenting from './parenting.vue'
 import Mortgage from './mortgage.vue'
@@ -209,6 +209,10 @@ function setUserAndInitialize(form, { showMessage = false }) {
         if (userForm[key]) {
             Object.assign(userForm[key], form[key])
         }
+        // Backward compatible since 2024/05/10
+        if (form.investment) {
+            Object.assign(userForm.asset, form.investment)
+        }
     }
     nextTick(async () => {
         await ProfileRef.value.calculateProfile({
@@ -297,7 +301,7 @@ const userForm = reactive({
         qualityLevel: 3,
         expenseQuartileMarks: {},
     },
-    investment: {
+    asset: {
         allocationETF: 'aok',
         stockPercentage: 20,
         irr: 0,
@@ -404,9 +408,9 @@ function onRetirementChanged() {
 }
 // 投資試算
 function onInvestmentChanged() {
-    authFetch(`/user/investment`, {
+    authFetch(`/user/asset`, {
         method: 'put',
-        body: userForm.investment,
+        body: userForm.asset,
     })
     ParentingRef.value.calculateParenting({
         propagate: false,

components/calculator/mortgage.vue

@@ -258,7 +258,7 @@ const props = defineProps({
         },
         required: true,
     },
-    investment: {
+    asset: {
         type: Object,
         default: () => {
             return {}
@@ -283,7 +283,7 @@ const mortgage = computed(() => {
 })
 const unableToDrawChart = computed(() => {
     const { monthlySaving } = props.career
-    const { irr, } = props.investment
+    const { irr, } = props.asset
     const { downpay, downpayGoal } = mortgage.value
     const noPv = !downpay
     const negativePmt = monthlySaving <= 0
@@ -392,7 +392,7 @@ function drawDownpayChart(propagate = false) {
     if (unableToDrawChart.value) {
         return
     }
-    const { irr, } = props.investment
+    const { irr, } = props.asset
     const { inflationRate, currentYear } = props.config
     const { downpay, downpayGoal } = mortgage.value
     const { monthlySaving } = props.career

components/calculator/parenting.vue

@@ -73,7 +73,7 @@
                 </el-col>
                 <el-col :span="12">
                     <el-form-item label="資產投報率">
-                        <el-text>{{ config.portfolioIRR[investment.allocationETF] }} %</el-text>
+                        <el-text>{{ config.portfolioIRR[asset.allocationETF] }} %</el-text>
                     </el-form-item>
                 </el-col>
             </el-row>
@@ -181,7 +181,7 @@ const props = defineProps({
         },
         required: true,
     },
-    investment: {
+    asset: {
         type: Object,
         default: () => {
             return {}
@@ -266,7 +266,7 @@ function drawParentingChart(propagate = true) {
     const { survivorAnnuity } = props.retirement.insurance
 
     // 計算投資報酬率
-    const investmentIrr = 1 + props.investment.irr / 100
+    const assetIrr = 1 + props.asset.irr / 100
     const firstBornEndYear: number = firstBornYear + independantAge
     const secondBornEndYear: number = secondBornYear + independantAge
     const parentingDuration: number = Math.max(firstBornYear, secondBornYear) - firstBornYear + independantAge
@@ -340,7 +340,7 @@ function drawParentingChart(propagate = true) {
         }
 
         // 儲存資料
-        fv = pv * investmentIrr + pmt
+        fv = pv * assetIrr + pmt
         const floorPmt = Math.floor(pmt)
         lifeInsuranceEquity.push([floorPmt, Math.floor(Math.max(0, fv))])
         cash = cash + pmt

components/calculator/spouse.vue

@@ -75,7 +75,7 @@ const spouse = computed(() => {
     return props.modelValue
 })
 const unableToDraw = computed(() => {
-    // const { presentAsset, irr, period } = investment.value
+    // const { presentAsset, irr, period } = asset.value
     // const { monthlySaving } = props.career
     // const noPv = !presentAsset
     // const noPmt = !monthlySaving

finance/outline.md

@@ -33,7 +33,7 @@ const digitalDocumentItems = [
         rating: 2
     },
     {
-        url: './investment',
+        url: './asset',
         name: '投資進階管道',
         keywords: ['證券', '太陽能', '加密貨幣', '天使投資'],
         audience: ['對純被動收入好奇的人', '想遠離看盤或沒時間看盤的人', '怕被騙或是歸零的人'],