Changeset 2950570
- Timestamp:
- 08/09/2023 01:38:25 PM (3 years ago)
- Location:
- loan-calculator-with-chart
- Files:
-
- 8 added
- 5 edited
-
assets/screenshot-1.png (modified) (previous)
-
assets/screenshot-2.png (added)
-
assets/screenshot-3.png (added)
-
trunk/assets/css/lcwc_admin.css (added)
-
trunk/assets/css/loan_calc.css (modified) (8 diffs)
-
trunk/assets/js/lcwc_admin.js (added)
-
trunk/assets/js/loan_calc.js (modified) (6 diffs)
-
trunk/assets/js/wp-color-picker-alpha.js (added)
-
trunk/inc (added)
-
trunk/inc/lcwc_backend.php (added)
-
trunk/inc/lcwc_fronted.php (added)
-
trunk/loan-calculator.php (modified) (2 diffs)
-
trunk/readme.txt (modified) (3 diffs)
Legend:
- Unmodified
- Added
- Removed
-
loan-calculator-with-chart/trunk/assets/css/loan_calc.css
r2759726 r2950570 4 4 border-radius: 20px; 5 5 padding: 20px; 6 margin: 50px 0; 7 background-image: linear-gradient(to bottom left, #e4dfec, white, white); 6 margin: 0px auto; 7 /* background-image: linear-gradient(to bottom left, #e4dfec, white, white);*/ 8 background-color: #f0f8ff; 8 9 } 9 10 .loan-calc-sub-container { 10 11 display: flex; 11 12 width: 100%; 12 gap: 50px;13 gap: 25px; 13 14 height: max-content; 14 15 } … … 41 42 42 43 /*----- Styling the sliders ----*/ 44 /*.loan_calc_container input[type="range"] { 45 -webkit-appearance: none; 46 margin: 10px 0; 47 width: 100%; 48 padding: 0; 49 height: auto; 50 }*/ 51 43 52 .loan_calc_container input[type="range"] { 44 53 -webkit-appearance: none; 45 54 margin: 10px 0; 46 55 width: 100%; 56 padding: 0; 57 height: auto; 58 border-radius: 5px; 59 background-color: #ffffff; 60 background-image: linear-gradient(#9088d2, #9088d2); 61 background-size: 70% 100%; 62 background-repeat: no-repeat; 47 63 } 48 64 … … 51 67 } 52 68 53 .loan_calc_container input[type="range"]::-webkit-slider-runnable-track { 54 width: 100%; 55 height: 6px; 56 cursor: pointer; 57 background: #9088d2; 58 border-radius: 10px; 69 .loan_calc_container input[type=range]::-webkit-slider-runnable-track { 70 width: 100%; 71 height: 7px; 72 cursor: pointer; 59 73 } 60 74 61 75 .loan_calc_container input[type="range"]::-webkit-slider-thumb { 62 76 box-shadow: 2px 2px 5px #b3b3b3, -1px -1px 3px grey; 63 border: 5px solid #ffffff; 77 border: 5px solid; 78 border-color: #ffffff; 64 79 height: 20px; 65 80 width: 20px; … … 71 86 } 72 87 73 .loan_calc_container input[type="range"]:focus::-webkit-slider-runnable-track {88 /*.loan_calc_container input[type="range"]:focus::-webkit-slider-runnable-track { 74 89 background: #b3b3b3; 75 } 90 }*/ 91 92 93 94 /*............. new */ 95 96 97 /* Input Thumb */ 98 99 /*input[type="range"]::-moz-range-thumb { 100 -webkit-appearance: none; 101 height: 20px; 102 width: 20px; 103 border-radius: 50%; 104 background: #ff4500; 105 cursor: ew-resize; 106 box-shadow: 0 0 2px 0 #555; 107 transition: background .3s ease-in-out; 108 } 109 110 input[type="range"]::-ms-thumb { 111 -webkit-appearance: none; 112 height: 20px; 113 width: 20px; 114 border-radius: 50%; 115 background: #ff4500; 116 cursor: ew-resize; 117 box-shadow: 0 0 2px 0 #555; 118 transition: background .3s ease-in-out; 119 }*/ 120 121 /*input[type="range"]::-webkit-slider-thumb:hover { 122 background: #ff0200; 123 }*/ 124 125 126 /*.............*/ 76 127 77 128 .loan_calc_container input[type="range"]::-moz-range-track { 78 width: 100%; 79 height: 6px; 80 cursor: pointer; 81 background: #9088d2; 82 border-color: transparent; 83 border-width: 16px 0; 84 color: transparent; 85 border-radius: 10px; 129 -webkit-appearance: none; 130 margin: 10px 0; 131 width: 100%; 132 padding: 0; 133 height: auto; 134 border-radius: 5px; 135 background-color: #ffffff; 136 background-image: linear-gradient(#9088d2, #9088d2); 137 background-size: 70% 100%; 138 background-repeat: no-repeat; 86 139 } 87 140 … … 99 152 .loan_calc_container input[type="range"]::-ms-track { 100 153 width: 100%; 101 height: 6px;154 height: 7px; 102 155 cursor: pointer; 103 156 background: #9088d2; … … 144 197 145 198 .loan-details { 146 width: 90%; 147 display: flex; 148 justify-content: space-between; 199 display: flex; 200 justify-content: space-around; 149 201 gap: 30px; 202 text-align: center; 150 203 } 151 204 … … 169 222 .loan-detail-text{ 170 223 color: #9088D2; 224 margin-top: 1em; 225 margin-bottom: 1em; 171 226 } 172 227 .loan-calc-text, .loan_calc_header h1{ … … 181 236 width: 100%; 182 237 } 183 } 238 .loan_calc_container { 239 width: auto; 240 padding: 12px; 241 } 242 .loan-details { 243 gap: 10px; 244 align-items: center; 245 justify-content: space-around; 246 flex-wrap: wrap; 247 } 248 } -
loan-calculator-with-chart/trunk/assets/js/loan_calc.js
r2759726 r2950570 1 1 jQuery(document).ready(function(event) { 2 2 3 var P, R, N, pie, line; 4 5 // update loan amount 3 6 var loan_amt_slider = document.getElementById("loan-amount"); 4 var int_rate_slider = document.getElementById("interest-rate"); 5 var loan_period_slider = document.getElementById("loan-period"); 6 7 // update loan amount 7 var loan_amt_thumb_position = (loan_amt_slider.value - loan_amt_slider.min) * 100 / (loan_amt_slider.max - loan_amt_slider.min); 8 loan_amt_slider.style.backgroundSize = loan_amt_thumb_position + '% 100%'; 8 9 loan_amt_slider.addEventListener("input", (self) => { 9 document.querySelector("#loan-amt-text").innerText = 10 parseInt(self.target.value).toLocaleString("en-US") + "$"; 10 let target = self.target; 11 const min = target.min; 12 const max = target.max; 13 const val = target.value; 14 15 document.querySelector("#loan-amt-text").innerText = parseInt(self.target.value).toLocaleString("en-US") + "$"; 16 target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%'; 11 17 P = parseFloat(self.target.value); 12 18 displayDetails(); 13 19 }); 14 20 21 15 22 // update Rate of Interest 23 var int_rate_slider = document.getElementById("interest-rate"); 24 var rate_thumb_position = (int_rate_slider.value - int_rate_slider.min) * 100 / (int_rate_slider.max - int_rate_slider.min); 25 int_rate_slider.style.backgroundSize = rate_thumb_position + '% 100%'; 16 26 int_rate_slider.addEventListener("input", (self) => { 27 let target = self.target; 28 const min = target.min 29 const max = target.max 30 const val = target.value 17 31 document.querySelector("#interest-rate-text").innerText = 18 32 self.target.value + "%"; 33 self.target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%'; 19 34 R = parseFloat(self.target.value); 20 35 displayDetails(); … … 22 37 23 38 // update loan period 39 var loan_period_slider = document.getElementById("loan-period"); 40 var period_thumb_position = (loan_period_slider.value - loan_period_slider.min) * 100 / (loan_period_slider.max - loan_period_slider.min); 41 loan_period_slider.style.backgroundSize = period_thumb_position + '% 100%'; 24 42 loan_period_slider.addEventListener("input", (self) => { 43 let target = self.target; 44 const min = target.min 45 const max = target.max 46 const val = target.value 25 47 document.querySelector("#loan-period-text").innerText = 26 48 self.target.value + " years"; 49 self.target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%'; 27 50 N = parseFloat(self.target.value); 28 51 displayDetails(); … … 56 79 } 57 80 } 58 line.data.datasets[0].data = yearPrincipal; 59 line.data.datasets[1].data = yearlyInterest; 60 line.data.labels = years; 81 if(loan_calc_style.laon_enable_yearly_breakdown_chart == 'true'){ 82 line.data.datasets[0].data = yearPrincipal; 83 line.data.datasets[1].data = yearlyInterest; 84 line.data.labels = years; 85 } 61 86 return totalInterest; 62 87 } … … 71 96 let emi = parseFloat(num) / parseFloat(denom); 72 97 73 let payabaleInterest = calculateLoanDetails(P, r, emi) ;98 let payabaleInterest = calculateLoanDetails(P, r, emi).toFixed(0); 74 99 75 100 let opts = '{style: "decimal", currency: "US"}'; … … 88 113 89 114 document.querySelector("#loan-calc-price").innerText = 90 parseFloat(emi).toLocaleString("en-US", opts) + "$"; 91 92 pie.data.datasets[0].data[0] = P; 93 pie.data.datasets[0].data[1] = payabaleInterest; 94 pie.update(); 95 line.update(); 115 parseInt(emi).toLocaleString("en-US", opts) + "$"; 116 117 if(loan_calc_style.laon_enable_breakup_chart == 'true'){ 118 pie.data.datasets[0].data[0] = P; 119 pie.data.datasets[0].data[1] = payabaleInterest; 120 pie.update(); 121 } 122 if(loan_calc_style.laon_enable_yearly_breakdown_chart == 'true'){ 123 line.update(); 124 } 96 125 } 97 126 98 127 // Initialize everything 99 128 function initialize() { 129 100 130 document.querySelector("#loan-amt-text").innerText = 101 131 parseInt(loan_amt_slider.value).toLocaleString("en-US") + "$"; … … 110 140 N = parseFloat(document.getElementById("loan-period").value); 111 141 112 line = new Chart(document.getElementById("loan_calc_lineChart"), { 113 data: { 114 datasets: [ 115 { 116 type: "line", 117 label: "Yearly Principal paid", 118 borderColor: "rgb(54, 162, 235)", 119 data: [] 142 if(loan_calc_style.laon_enable_breakup_chart == 'true'){ 143 if(loan_calc_style.laon_payment_breakup_chart_type == 'doughnut_chart'){ 144 pie = new Chart(document.getElementById("loan_calc_pieChart"), { 145 type: "doughnut", 146 data: { 147 labels: [loan_calc_style.laon_chart_principal_amou_text, loan_calc_style.laon_chart_total_interest_text], 148 datasets: [ 149 { 150 label: "Home Loan Details", 151 data: [P, 0], 152 backgroundColor: [loan_calc_style.laon_chart_principal_loan_color, loan_calc_style.laon_chart_total_interest_color], 153 hoverOffset: 4 154 } 155 ] 120 156 }, 121 { 122 type: "line", 123 label: "Yearly Interest paid", 124 borderColor: "rgb(255, 99, 132)", 125 data: [] 126 } 127 ], 128 labels: [] 129 }, 130 options: { 131 plugins: { 132 title: { 133 display: true, 134 text: "Yearly Payment Breakdown" 135 } 157 options: { 158 plugins: { 159 title: { 160 display: true, 161 text: loan_calc_style.laon_chart_breakup_text 162 } 163 }, 164 // responsive: true, 165 // maintainAspectRatio: false, 166 } 167 }); 168 }else if(loan_calc_style.laon_payment_breakup_chart_type == 'pie_chart'){ 169 170 var loandata = { 171 labels: [loan_calc_style.laon_chart_principal_amou_text, loan_calc_style.laon_chart_total_interest_text], 172 datasets: [ 173 { 174 data: [P, 0], 175 backgroundColor: [ 176 loan_calc_style.laon_chart_principal_loan_color, 177 loan_calc_style.laon_chart_total_interest_color 178 ], 179 hoverOffset: 4 180 }] 181 }; 182 pie = new Chart(document.getElementById("loan_calc_pieChart"), { 183 type: 'pie', 184 data: loandata, 185 options: { 186 plugins: { 187 title: { 188 display: true, 189 text: loan_calc_style.laon_chart_breakup_text 190 } 191 }, 192 // responsive: true, 193 // maintainAspectRatio: false, 194 } 195 }); 196 }else if(loan_calc_style.laon_payment_breakup_chart_type == 'bar_chart'){ 197 pie = new Chart(document.getElementById("loan_calc_pieChart"), { 198 type: "bar", 199 data: { 200 labels: [ 201 loan_calc_style.laon_chart_principal_amou_text, 202 loan_calc_style.laon_chart_total_interest_text, 203 ], 204 datasets: [{ 205 backgroundColor: [ 206 loan_calc_style.laon_chart_principal_loan_color, 207 loan_calc_style.laon_chart_total_interest_color 208 ], 209 data: [P, 0], 210 }] 211 }, 212 options: { 213 214 plugins: { 215 legend: {display: false}, 216 title: { 217 display: true, 218 text: loan_calc_style.laon_chart_breakup_text 219 } 220 }, 221 } 222 }); 223 }else if(loan_calc_style.laon_payment_breakup_chart_type == 'polar_area_chart'){ 224 var polar_Data = { 225 labels: [ 226 loan_calc_style.laon_chart_principal_amou_text, 227 loan_calc_style.laon_chart_total_interest_text 228 ], 229 datasets: [{ 230 data: [P, 0], 231 backgroundColor: [ 232 loan_calc_style.laon_chart_principal_loan_color, 233 loan_calc_style.laon_chart_total_interest_color 234 ] 235 }] 236 }; 237 238 pie = new Chart(document.getElementById("loan_calc_pieChart"), { 239 type: 'polarArea', 240 data: polar_Data, 241 options: { 242 plugins: { 243 title: { 244 display: true, 245 text: loan_calc_style.laon_chart_breakup_text 246 } 247 }, 248 } 249 }); 250 } 251 252 } 253 254 if(loan_calc_style.laon_enable_yearly_breakdown_chart == 'true'){ 255 line = new Chart(document.getElementById("loan_calc_lineChart"), { 256 data: { 257 datasets: [ 258 { 259 type: "line", 260 label: loan_calc_style.laon_chart_year_princ_paid_text, 261 borderColor: loan_calc_style.laon_chart_yearly_principal_paid_color, 262 data: [] 263 }, 264 { 265 type: "line", 266 label: loan_calc_style.laon_chart_year_interest_paid_text, 267 borderColor: loan_calc_style.laon_chart_yearly_interest_paid_color, 268 data: [] 269 } 270 ], 271 labels: [] 136 272 }, 137 scales: {138 x: {273 options: { 274 plugins: { 139 275 title: { 140 color: "grey",141 276 display: true, 142 text: "Years Passed"277 text: loan_calc_style.laon_chart_year_breakdown_text 143 278 } 144 279 }, 145 y: { 146 title: { 147 color: "grey", 148 display: true, 149 text: "Money in Rs." 280 scales: { 281 x: { 282 title: { 283 color: "grey", 284 display: true, 285 text: "Years Passed" 286 } 287 }, 288 y: { 289 title: { 290 color: "grey", 291 display: true, 292 text: "Money in Rs." 293 } 150 294 } 151 295 } 152 296 } 153 } 154 }); 155 156 pie = new Chart(document.getElementById("loan_calc_pieChart"), { 157 type: "doughnut", 158 data: { 159 labels: ["Principal", "Interest"], 160 datasets: [ 161 { 162 label: "Home Loan Details", 163 data: [0, 0], 164 backgroundColor: ["rgb(54, 162, 235)", "rgb(255, 99, 132)"], 165 hoverOffset: 4 166 } 167 ] 168 }, 169 options: { 170 plugins: { 171 title: { 172 display: true, 173 text: "Payment Breakup" 174 } 175 } 176 } 177 }); 297 }); 298 } 178 299 displayDetails(); 179 300 } -
loan-calculator-with-chart/trunk/loan-calculator.php
r2759726 r2950570 4 4 * Description: This plugin allows you to Create Loan Calculator. 5 5 * Version: 1.0 6 * Copyright: 202 26 * Copyright: 2023 7 7 * Text Domain: loan-calculator 8 8 */ … … 12 12 } 13 13 14 add_action( 'wp_enqueue_scripts','LOAN_calculator_loadScriptStyle'); 14 // Include function files 15 include_once('inc/lcwc_backend.php'); 16 include_once('inc/lcwc_fronted.php'); 17 18 function EMI_load_admin_script(){ 19 wp_enqueue_style( 'wp-color-picker' ); 20 wp_enqueue_script( 'lcwc-admin-script', LOANC_PLUGIN_DIR. '/assets/js/lcwc_admin.js', false, '1.0'); 21 wp_enqueue_script( 'wp-color-picker-alpha', LOANC_PLUGIN_DIR . '/assets/js/wp-color-picker-alpha.js', array( 'wp-color-picker' ), '3.0.2', true ); 22 wp_add_inline_script( 23 'wp-color-picker-alpha', 24 'jQuery( function() { jQuery( ".color-picker" ).wpColorPicker(); } );' 25 ); 26 wp_enqueue_style( 'style-css', LOANC_PLUGIN_DIR . '/assets/css/lcwc_admin.css', false, '1.0.0' ); 27 } 28 add_action( 'admin_enqueue_scripts', 'EMI_load_admin_script' ); 29 15 30 function LOAN_calculator_loadScriptStyle() { 16 31 wp_enqueue_script('jquery', false, array(), false, false); 17 32 wp_enqueue_script( 'loan_calc_js', LOANC_PLUGIN_DIR . '/assets/js/loan_calc.js', false, '1.0.0' ); 18 33 wp_enqueue_style( 'loan_calc_css', LOANC_PLUGIN_DIR . '/assets/css/loan_calc.css', false, '1.0.0' ); 19 wp_enqueue_script( 'chart_min_js', LOANC_PLUGIN_DIR . '/assets/js/chart.min.js', false, '1.0.0' ); 34 wp_enqueue_script( 'chart_min_js', LOANC_PLUGIN_DIR . '/assets/js/chart.min.js', false, '3.8.0' ); 35 $loan_color_var = array( 36 'laon_enable_breakup_chart' => get_option('lcwc_enable_breakup_chart','true'), 37 'laon_payment_breakup_chart_type' => get_option('lcwc_chart_type','doughnut_chart'), 38 'laon_chart_principal_loan_color' => get_option('lcwc_principal_loan_color','rgb(54, 162, 235)'), 39 'laon_chart_total_interest_color' => get_option('lcwc_total_interest_color','rgb(255, 99, 132)'), 40 'laon_enable_yearly_breakdown_chart' => get_option('lcwc_enable_yearly_breakdown_chart','true'), 41 'laon_chart_yearly_principal_paid_color' => get_option('lcwc_yearly_principal_paid_color','rgb(54, 162, 235)'), 42 'laon_chart_yearly_interest_paid_color' => get_option('lcwc_yearly_interest_paid_color','rgb(255, 99, 132)'), 43 'laon_chart_breakup_text' => get_option('lcwc_breakup_text','Total Payment Break-up'), 44 'laon_chart_principal_amou_text' => get_option('lcwc_principal_amou_text','Principal Amount'), 45 'laon_chart_total_interest_text' => get_option('lcwc_total_interest_text','Total Interest'), 46 'laon_chart_year_breakdown_text' => get_option('lcwc_year_breakdown_text','Yearly Payment Breakdown'), 47 'laon_chart_year_princ_paid_text' => get_option('lcwc_year_princ_paid_text','Yearly Principal paid'), 48 'laon_chart_year_interest_paid_text' => get_option('lcwc_year_interest_paid_text','Yearly Interest paid'), 49 ); 50 wp_localize_script( 'loan_calc_js', 'loan_calc_style', $loan_color_var); 20 51 } 21 22 function loan_calculator_create(){ 23 ob_start(); 24 ?> 25 <div class="loan_calc_container"> 26 <div class="loan_calc_header"> 27 <h1>Loan Calculator</h1> 28 </div> 29 <div class="loan-calc-sub-container"> 30 <div class="loan_calc_view"> 31 <div class="loan_calc_details"> 32 <div> 33 <div class="loan-calc-detail"> 34 <p class="loan-detail-text">Amount</p> 35 <p class="loan-calc-text" id="loan-amt-text"></p> 36 </div> 37 <input type="range" id="loan-amount" min="0" max="10000000" step="50000"> 38 </div> 39 <div> 40 <div class="loan-calc-detail"> 41 <p class="loan-detail-text">Length</p> 42 <p class="loan-calc-text" id="loan-period-text"></p> 43 </div> 44 <input type="range" id="loan-period" min="1" max="30" step="1"> 45 </div> 46 <div> 47 <div class="loan-calc-detail"> 48 <p class="loan-detail-text">% Interest</p> 49 <p class="loan-calc-text" id="interest-rate-text"></p> 50 </div> 51 <input type="range" id="interest-rate" min="1" max="15" step="0.5"> 52 </div> 53 </div> 54 <div class="loan-calc-footer"> 55 <p id="loan-calc-price-container"><span id="loan-calc-price">0</span>/mo</p> 56 </div> 57 </div> 58 <div class="loan_calc_breakup"> 59 <canvas id="loan_calc_pieChart"></canvas> 60 </div> 61 </div> 62 <div> 63 <div class="loan-details"> 64 <div class='chart-details'> 65 <p class="loan_chart_details">Principal</p> 66 <p class="chart_loan_calc_detail" id="loan_calc_cp"></p> 67 </div> 68 <div class='chart-details'> 69 <p class="loan_chart_details">Interest</p> 70 <p class="chart_loan_calc_detail" id="loan_calc_ci"></p> 71 </div> 72 <div class='chart-details'> 73 <p class="loan_chart_details">Total Payable</p> 74 <p class="chart_loan_calc_detail" id="loan_calc_ct"></p> 75 </div> 76 </div> 77 <canvas id="loan_calc_lineChart" height="200px" width="200px"></canvas> 78 </div> 79 </div> 80 <?php 81 $content = ob_get_clean(); 82 return $content; 83 } 84 add_shortcode( 'loan_calculator', 'loan_calculator_create' ); 52 add_action( 'wp_enqueue_scripts','LOAN_calculator_loadScriptStyle'); -
loan-calculator-with-chart/trunk/readme.txt
r2759726 r2950570 2 2 Tags: Loan Calculator, Calculator 3 3 Requires at least: 5.5 4 Tested up to: 6. 04 Tested up to: 6.2.2 5 5 Stable tag: 1.0 6 6 License: GPLv3 or later … … 17 17 <ul> 18 18 <li>Mobile friendly UI</li> 19 <li>Chart</li> 19 <li>Customize calculator body background color</li> 20 <li>Change calculator heading color with font size</li> 21 <li>Change calculator heading color with font size</li> 22 <li>Change calculator loan detail title and calculator texts color</li> 23 <li>Customize slider active and progress color</li> 24 <li>Customize slider thumb background and border color</li> 25 <li>Change result title color</li> 26 <li>Enable/ Disable total payment break-up and yearly payment breakdown chart</li> 27 <li>Customize payment break-up chart with chart type and color</li> 28 <li>Customize yearly payment breakdown chart with principal and interest paid color</li> 29 <li>Customize yearly payment breakdown chart with principal and interest paid color</li> 30 <li>Change calculator title text</li> 31 <li>Customize result title text setting</li> 32 <li>Customize payment break-up and yearly payment breakdown title text setting</li> 33 <li>Set min and max loan amount with default loan amount</li> 34 <li>Set min and max loan loan terms with default loan year</li> 35 <li>Set min and max loan loan interest with default loan interest</li> 20 36 <li>Loan Calculator</li> 21 37 <li>Mortgage Calculator</li> … … 23 39 </ul> 24 40 41 == Installation == 42 1. Make sure you have Contact Form 7 installed. 43 2. Download the file to install and activate. 44 3. Done! Just remember to keep the plugins up to date! 45 46 == Changelog == 47 = 1.0 = 48 * Release
Note: See TracChangeset
for help on using the changeset viewer.