Plugin Directory

Changeset 2950570


Ignore:
Timestamp:
08/09/2023 01:38:25 PM (3 years ago)
Author:
mgplugin
Message:

updates code

Location:
loan-calculator-with-chart
Files:
8 added
5 edited

Legend:

Unmodified
Added
Removed
  • loan-calculator-with-chart/trunk/assets/css/loan_calc.css

    r2759726 r2950570  
    44    border-radius: 20px;
    55    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;
    89}
    910.loan-calc-sub-container {
    1011    display: flex;
    1112    width: 100%;
    12     gap: 50px;
     13    gap: 25px;
    1314    height: max-content;
    1415}
     
    4142
    4243/*----- 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
    4352.loan_calc_container input[type="range"] {
    4453    -webkit-appearance: none;
    4554    margin: 10px 0;
    4655    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;
    4763}
    4864
     
    5167}
    5268
    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;
    5973}
    6074
    6175.loan_calc_container input[type="range"]::-webkit-slider-thumb {
    6276    box-shadow: 2px 2px 5px #b3b3b3, -1px -1px 3px grey;
    63     border: 5px solid #ffffff;
     77    border: 5px solid;
     78    border-color: #ffffff;
    6479    height: 20px;
    6580    width: 20px;
     
    7186}
    7287
    73 .loan_calc_container input[type="range"]:focus::-webkit-slider-runnable-track {
     88/*.loan_calc_container input[type="range"]:focus::-webkit-slider-runnable-track {
    7489    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
     110input[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/*.............*/
    76127
    77128.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;
    86139}
    87140
     
    99152.loan_calc_container input[type="range"]::-ms-track {
    100153    width: 100%;
    101     height: 6px;
     154    height: 7px;
    102155    cursor: pointer;
    103156    background: #9088d2;
     
    144197
    145198.loan-details {
    146     width: 90%;
    147     display: flex;
    148     justify-content: space-between;
     199    display: flex;
     200    justify-content: space-around;
    149201    gap: 30px;
     202    text-align: center;
    150203}
    151204
     
    169222.loan-detail-text{
    170223    color: #9088D2;
     224    margin-top: 1em;
     225    margin-bottom: 1em;
    171226}
    172227.loan-calc-text, .loan_calc_header h1{
     
    181236        width: 100%;
    182237    }
    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  
    11jQuery(document).ready(function(event) {
     2
    23var P, R, N, pie, line;
     4
     5// update loan amount
    36var 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
     7var loan_amt_thumb_position = (loan_amt_slider.value - loan_amt_slider.min) * 100 / (loan_amt_slider.max - loan_amt_slider.min);
     8loan_amt_slider.style.backgroundSize = loan_amt_thumb_position + '% 100%';
    89loan_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%';
    1117    P = parseFloat(self.target.value);
    1218    displayDetails();
    1319});
    1420
     21
    1522// update Rate of Interest
     23var int_rate_slider = document.getElementById("interest-rate");
     24var rate_thumb_position = (int_rate_slider.value - int_rate_slider.min) * 100 / (int_rate_slider.max - int_rate_slider.min);
     25int_rate_slider.style.backgroundSize = rate_thumb_position + '% 100%';
    1626int_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
    1731    document.querySelector("#interest-rate-text").innerText =
    1832        self.target.value + "%";
     33    self.target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%';
    1934    R = parseFloat(self.target.value);
    2035    displayDetails();
     
    2237
    2338// update loan period
     39var loan_period_slider = document.getElementById("loan-period");
     40var period_thumb_position = (loan_period_slider.value - loan_period_slider.min) * 100 / (loan_period_slider.max - loan_period_slider.min);
     41loan_period_slider.style.backgroundSize = period_thumb_position + '% 100%';
    2442loan_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
    2547    document.querySelector("#loan-period-text").innerText =
    2648        self.target.value + " years";
     49    self.target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%';
    2750    N = parseFloat(self.target.value);
    2851    displayDetails();
     
    5679        }
    5780    }
    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    }
    6186    return totalInterest;
    6287}
     
    7196    let emi = parseFloat(num) / parseFloat(denom);
    7297
    73     let payabaleInterest = calculateLoanDetails(P, r, emi);
     98    let payabaleInterest = calculateLoanDetails(P, r, emi).toFixed(0);
    7499
    75100    let opts = '{style: "decimal", currency: "US"}';
     
    88113
    89114    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    }
    96125}
    97126
    98127// Initialize everything
    99128function initialize() {
     129
    100130    document.querySelector("#loan-amt-text").innerText =
    101131        parseInt(loan_amt_slider.value).toLocaleString("en-US") + "$";
     
    110140    N = parseFloat(document.getElementById("loan-period").value);
    111141
    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                    ]
    120156                },
    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: []
    136272            },
    137             scales: {
    138                 x: {
     273            options: {
     274                plugins: {
    139275                    title: {
    140                         color: "grey",
    141276                        display: true,
    142                         text: "Years Passed"
     277                        text: loan_calc_style.laon_chart_year_breakdown_text
    143278                    }
    144279                },
    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                        }
    150294                    }
    151295                }
    152296            }
    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    }
    178299    displayDetails();
    179300}
  • loan-calculator-with-chart/trunk/loan-calculator.php

    r2759726 r2950570  
    44* Description: This plugin allows you to Create Loan Calculator.
    55* Version: 1.0
    6 * Copyright: 2022
     6* Copyright: 2023
    77* Text Domain: loan-calculator
    88*/
     
    1212}
    1313
    14 add_action( 'wp_enqueue_scripts','LOAN_calculator_loadScriptStyle');
     14// Include function files
     15include_once('inc/lcwc_backend.php');
     16include_once('inc/lcwc_fronted.php');
     17
     18function 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}
     28add_action( 'admin_enqueue_scripts', 'EMI_load_admin_script' );
     29
    1530function LOAN_calculator_loadScriptStyle() {
    1631    wp_enqueue_script('jquery', false, array(), false, false);
    1732    wp_enqueue_script( 'loan_calc_js', LOANC_PLUGIN_DIR . '/assets/js/loan_calc.js', false, '1.0.0' );
    1833    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);
    2051}
    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' );
     52add_action( 'wp_enqueue_scripts','LOAN_calculator_loadScriptStyle');
  • loan-calculator-with-chart/trunk/readme.txt

    r2759726 r2950570  
    22Tags: Loan Calculator, Calculator
    33Requires at least: 5.5
    4 Tested up to: 6.0
     4Tested up to: 6.2.2
    55Stable tag: 1.0
    66License: GPLv3 or later
     
    1717<ul>
    1818<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>
    2036<li>Loan Calculator</li>
    2137<li>Mortgage Calculator</li>
     
    2339</ul>
    2440
     41== Installation ==
     421. Make sure you have Contact Form 7 installed.
     432. Download the file to install and activate.
     443. 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.