add loan amount

components/calculator/asset.vue

@@ -151,7 +151,6 @@ const props = defineProps({
     }
 })
 const allocationQuartileMarks = reactive({})
-const legalInterestRate = 16
 // hooks
 const asset = computed(() => {
     return props.modelValue
@@ -174,14 +173,18 @@ function setPortfolioMarks() {
         allocationQuartileMarks[stockPercentage] = `IRR: ${irr}`
     })
 }
-function calculateAsset(options: any = { propagate: true }) {
+async function calculateAsset(options: any = { propagate: true }) {
     setPortfolioMarks()
     calculateInvestmentPeriod()
     calculatePortfolio()
     const { propagate = true } = options
-    customDebounce(() => {
-        drawLifeAssetChart(propagate)
-    })(propagate)
+    const promise = new Promise((resolve) => {
+        customDebounce(async () => {
+            const etfData = await drawLifeAssetChart(propagate)
+            resolve(etfData)
+        })(propagate)
+    })
+    return await promise
 }
 function calculatePortfolio() {
     const { allocationETF } = asset.value
@@ -227,7 +230,7 @@ function drawLifeAssetChart(propagate = true) {
     let pv = presentAsset
     let fv = 0
     const labels: number[] = []
-    const datasetData: number[] = []
+    const etfData: number[] = []
     const investingData: number[] = []
     const mortgageData: number[] = []
     const downpayData: number[] = []
@@ -257,14 +260,14 @@ function drawLifeAssetChart(propagate = true) {
         const mortgageStartYear = downpayYear
         const mortgageEndYear = downpayYear + loanTerm
         let mortgagePmt = 0
-        let inflatedTotalPrice = 0
+        let downpayTotalPrice = 0
         if (mortgageStartYear <= year && fv > 0) {
             if (year < mortgageEndYear) {
                 mortgagePmt = monthlyRepay * 12
             }
-            inflatedTotalPrice = Math.floor(totalPrice * valueModifier)
+            downpayTotalPrice = Math.floor(totalPrice * valueModifier)
         }
-        estateData.push(inflatedTotalPrice)
+        estateData.push(downpayTotalPrice)
         mortgageData.push(Math.floor(-mortgagePmt))
         calculatedPmt -= mortgagePmt
         /**
@@ -302,7 +305,7 @@ function drawLifeAssetChart(propagate = true) {
 
         // 計算複利終值
         fv = pv * irrModifier
-        datasetData.push(Math.floor(fv))
+        etfData.push(Math.floor(fv))
         fv += calculatedPmt
         if (fv <= 0) {
             fv = 0
@@ -320,7 +323,7 @@ function drawLifeAssetChart(propagate = true) {
     const datasets = [
         {
             label: 'ETF增值',
-            data: datasetData,
+            data: etfData,
         },
     ]
 
@@ -353,28 +356,28 @@ function drawLifeAssetChart(propagate = true) {
         datasets,
         labels
     }
-
     if (assetChartInstance.value) {
         assetChartInstance.value.data = chartData
         assetChartInstance.value.update()
-        return
-    }
-    const ctx: any = document.getElementById('assetChart')
-    const chartInstance = new Chart(ctx, {
-        type: 'bar',
-        data: chartData,
-        options: {
-            scales: {
-                x: {
-                    stacked: true,
-                },
-                y: {
-                    stacked: true
+    } else {
+        const ctx: any = document.getElementById('assetChart')
+        const chartInstance = new Chart(ctx, {
+            type: 'bar',
+            data: chartData,
+            options: {
+                scales: {
+                    x: {
+                        stacked: true,
+                    },
+                    y: {
+                        stacked: true
+                    }
                 }
             }
-        }
-    })
-    assetChartInstance = shallowRef(chartInstance)
+        })
+        assetChartInstance = shallowRef(chartInstance)
+    }
+    return etfData
 }
 
 import { ElMessage, } from 'element-plus'
@@ -400,5 +403,5 @@ function customDebounce(func, delay = 100) {
 
 defineExpose({
     calculateAsset,
-});
+})
 </script>

components/calculator/benchmark.vue

@@ -18,6 +18,7 @@
             <div v-else>
                 點選右上角，讓我們回顧......
             </div>
+            <canvas id="assetChart"></canvas>
         </el-form>
         <template #footer>
             <el-collapse>
@@ -33,7 +34,8 @@
     </el-card>
 </template>
 <script setup lang="ts">
-import { ref, computed, } from 'vue'
+import { ref, computed, shallowRef } from 'vue'
+import Chart from 'chart.js/auto';
 const { VITE_BASE_URL } = import.meta.env
 const emits = defineEmits(['update:modelValue', 'export'])
 const storyLoading = ref(false)
@@ -59,6 +61,13 @@ const props = defineProps({
         },
         required: true
     },
+    asset: {
+        type: Object,
+        default: () => {
+            return {}
+        },
+        required: true
+    },
     spouse: {
         type: Object,
         default: () => {
@@ -98,7 +107,46 @@ const props = defineProps({
 const profile = computed(() => {
     return props.modelValue
 })
-
+// methods
+let assetChartInstance = ref<Chart>()
+function calculateLifeAssetChart(payload) {
+    const {
+        retirementAsset,
+        etfAsset,
+    } = payload
+    // console.log({
+    //     retirementAsset,
+    //     etfAsset
+    // })
+    const { irr } = props.asset
+    const { downpayTotalPrice } = props.mortgage
+    const { irrOverDecade } = props.retirement.pension
+    const chartData = {
+        datasets: {},
+        labels: []
+    }
+    // if (assetChartInstance.value) {
+    //     assetChartInstance.value.data = chartData
+    //     assetChartInstance.value.update()
+    // } else {
+    //     const ctx: any = document.getElementById('assetChart')
+    //     const chartInstance = new Chart(ctx, {
+    //         type: 'bar',
+    //         data: chartData,
+    //         options: {
+    //             scales: {
+    //                 x: {
+    //                     stacked: true,
+    //                 },
+    //                 y: {
+    //                     stacked: true
+    //                 }
+    //             }
+    //         }
+    //     })
+    //     assetChartInstance = shallowRef(chartInstance)
+    // }
+}
 async function generatStory() {
     storyLoading.value = true
     const humanStory = getHumanStory()
@@ -176,6 +224,10 @@ function getHumanStory() {
 async function exportUserForm() {
     emits('export')
 }
+
+defineExpose({
+    calculateLifeAssetChart,
+})
 </script>
 <style lang="scss">
 .card-header--custom {

components/calculator/estateDialog.vue

@@ -13,8 +13,8 @@
             <el-col :span="20">
                 <el-form-item label="房屋總價">
                     <el-text>= 單價({{ estatePrice.unitPrice }}萬/坪) x 權狀({{
-            estateSize.floorSize }}坪) = {{
-            Number(tempTotalPrice).toLocaleString() }} NTD</el-text>
+                        estateSize.floorSize }}坪) = {{
+                            Number(Math.floor(tempTotalPrice / 10000)).toLocaleString() }} 萬</el-text>
                 </el-form-item>
             </el-col>
             <!-- <el-col :span="3">

components/calculator/index.vue

@@ -49,11 +49,11 @@
 
         <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>
+        <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()">
+            :retirement="userForm.retirement" ref="AssetRef" @update:model-value="onInvestmentChanged()">
         </Asset>
 
         <h3 id="_結婚試算" tabindex="-1">配偶試算<a class="header-anchor" href="#配偶試算"
@@ -69,8 +69,8 @@
             @update:model-value="onParentingChanged()">
         </Parenting>
 
-        <h3 id="_購屋試算" tabindex="-1">購屋試算<a class="header-anchor" href="#購屋試算"
-                aria-label="Permalink to &quot;購屋試算&quot;">&ZeroWidthSpace;</a></h3>
+        <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" :asset="userForm.asset" :parenting="userForm.parenting"
             :estatePrice="userForm.estatePrice" ref="MortgageRef" @update:model-value="onMortgageChanged()"
@@ -87,11 +87,12 @@
 
         <h2 id="_試算結果" tabindex="-1">試算結果<a class="header-anchor" href="#試算結果"
                 aria-label="Permalink to &quot;試算結果&quot;">&ZeroWidthSpace;</a></h2>
-        <Bechmark v-model="userForm.profile" :config="config" :career="userForm.career"
+        <Benchmark v-model="userForm.profile" :config="config" :career="userForm.career"
             :retirement="userForm.retirement" :spouse="userForm.spouse" :asset="userForm.asset"
             :estateSize="userForm.estateSize" :parenting="userForm.parenting" :estatePrice="userForm.estatePrice"
-            :mortgage="userForm.mortgage" @update:model-value="onProfileChanged()" @export="exportUserForm()">
-        </Bechmark>
+            :mortgage="userForm.mortgage" ref="BenchmarkRef" @update:model-value="onProfileChanged()"
+            @export="exportUserForm()">
+        </Benchmark>
         <br>
     </div>
 </template>
@@ -108,16 +109,17 @@ import Spouse from './spouse.vue'
 import Parenting from './parenting.vue'
 import Mortgage from './mortgage.vue'
 import EstateDialogContent from './estateDialog.vue'
-import Bechmark from './benchmark.vue'
+import Benchmark from './benchmark.vue'
 const { VITE_BASE_URL } = import.meta.env
 const ProfileRef = ref()
 const CareerRef = ref()
 const RetirementRef = ref()
-const InvestmentRef = ref()
+const AssetRef = ref()
 const SpouseRef = ref()
 const ParentingRef = ref()
 const EstateRef = ref()
 const MortgageRef = ref()
+const BenchmarkRef = ref()
 // 主要從資料庫來的設定檔案
 const config = reactive({
     // primitive types
@@ -240,7 +242,7 @@ function setUserAndInitialize(form, { showMessage = false }) {
         await RetirementRef.value.calculateRetirement({
             propagate: true,
         })
-        await InvestmentRef.value.calculateAsset({
+        await AssetRef.value.calculateAsset({
             propagate: true,
         })
         await SpouseRef.value.calculatecSpouse({
@@ -384,13 +386,13 @@ async function onProfileChanged() {
         method: 'put',
         body: userForm.profile,
     })
-    await CareerRef.value.calculateCareer({
+    CareerRef.value.calculateCareer({
         propagate: false,
     })
-    await RetirementRef.value.calculateRetirement({
+    RetirementRef.value.calculateRetirement({
         propagate: false,
     })
-    await InvestmentRef.value.calculateAsset({
+    AssetRef.value.calculateAsset({
         propagate: false,
     })
 }
@@ -403,7 +405,7 @@ function onCareerChanged() {
     RetirementRef.value.calculateRetirement({
         propagate: false,
     })
-    InvestmentRef.value.calculateAsset({
+    AssetRef.value.calculateAsset({
         propagate: false,
     })
     MortgageRef.value.calculateMortgage({
@@ -416,7 +418,7 @@ function onRetirementChanged() {
         method: 'put',
         body: userForm.retirement,
     })
-    InvestmentRef.value.calculateAsset({
+    AssetRef.value.calculateAsset({
         propagate: false,
     })
 }
@@ -442,7 +444,7 @@ function onSpouseChanged() {
     ParentingRef.value.calculateParenting({
         propagate: false,
     })
-    InvestmentRef.value.calculateAsset({
+    AssetRef.value.calculateAsset({
         propagate: false,
     })
 }
@@ -452,7 +454,7 @@ function onParentingChanged() {
         method: 'put',
         body: userForm.parenting,
     })
-    InvestmentRef.value.calculateAsset({
+    AssetRef.value.calculateAsset({
         propagate: false,
     })
 }
@@ -494,17 +496,21 @@ function onDialogConfirm(newValue) {
     })
 }
 // 房屋貸款試算
-function onMortgageChanged() {
+async function onMortgageChanged() {
     authFetch(`/user/mortgage`, {
         method: 'put',
         body: userForm.mortgage,
     })
-    RetirementRef.value.calculateRetirement({
+    const retirementAsset = await RetirementRef.value.calculateRetirement({
         propagate: false,
     })
-    InvestmentRef.value.calculateAsset({
+    const etfAsset = await AssetRef.value.calculateAsset({
         propagate: false,
     })
+    BenchmarkRef.value.calculateLifeAssetChart({
+        retirementAsset,
+        etfAsset,
+    })
 }
 
 // 資料匯出