Efficiently Calculating and Displaying Dynamic Metrics Using jQuery • Anjo Barros

Whats the Problem?

In interactive web applications, it’s often necessary to dynamically calculate and display metrics based on user inputs. The challenge is to ensure that the displayed values are accurate, update in real-time, and remain within valid ranges. This problem involves:

Validating User Input**: Ensuring user input is numeric and correctly formatted.
Performing Calculations**: Computing various metrics based on user inputs and specific formulas.
Updating UI Elements**: Reflecting calculated values in the user interface, including sliders and text elements.
Handling Edge Cases**: Dealing with scenarios where calculated values may be zero or out of expected ranges.

The Solution

The provided jQuery script addresses these challenges by:

Validating and Formatting Input: It listens for input changes in specific fields and ensures that the values are numeric by stripping non-numeric characters. This prevents erroneous data from being processed.
Calculating Metrics: Upon each input change, it computes several metrics using predefined formulas. For example, it calculates valC and valE based on the values of therapists, patients, and a checkbox input. These metrics represent different performance indicators or ratios.
Updating UI Elements: The script dynamically updates various elements of the page:
- Text Elements: It displays calculated values such as the current valC and valE, and updates additional metrics in specific HTML elements.
- Sliders: It adjusts the width of sliders to visually represent the computed percentage values.
Ensuring Valid Value Ranges: The setSlider function ensures that slider values are clamped between 0 and 100 percent, maintaining the expected visual range. It also formats the displayed values appropriately.
Handling Edge Cases: It includes a conditional check to log a message if either calculated value is zero, providing insight into potential issues with the calculations or user inputs.

<script>
(function($) {

    var fields = $('#therapists, #patients');
    var C = $('#cur_avg_cpr');
    var D = $('input[name=inc_productivity]');
    var E = $('#inc_avg_cpr');

    var cur_pdup = $( '#cur_pdup' );
    var cur_avg_pdup = $( '#cur_avg_pdup' );
    var inc_avg_cpr = $( '#inc_avg_cpr' );
    var inc_inc_cpr = $( '#inc_inc_cpr' );
    var inc_addl = $( '#inc_addl' );
    var inc_dept_pru = $( '#inc_dept_pru' );
    
    fields.on('input', function() {
        var valA = parseFloat($('#therapists').val().replace(/[^0-9]/g, '')) || 0;
        var valB = parseFloat($('#patients').val().replace(/[^0-9]/g, '')) || 0;
        var otherField = $(this).attr('id') === 'therapists' ? $('#patients') : $('#therapists');
        
        this.value = this.value.replace(/[^0-9]/g, '');
    
        var valC = 0;
        var valD = parseFloat(D.filter(":checked").val()) || 0;
        var valE = 0;
    
        if (valA > 0 && valB > 0) {
            console.log('Therapists: ' + valA + ', Patients: ' + valB);
            valC = (((valB * 2) / valA) / 32) * 100;
            valE = ((((((valD * valA) + valB) * 2) / valA) / 32) * 100);

            cur_pdup.html( valB * 2 );
            cur_avg_pdup.html( Number( valB * 2 / valA ).toFixed( 1 ) );
            inc_inc_cpr.html( Number( valE - valC ).toFixed( 1 ) + ' %' );
            inc_addl.find( '.value' ).html( '+ ' + Number( valA * valD ).toFixed( 0 ) + ' <span class="nhc-font-normal nhc-font-smallest">patients per day</span>' );
            inc_dept_pru.find( '.value' ).html( '+ ' + Number( valA * valD * 2 ).toFixed( 1 ) + ' <span class="nhc-font-normal nhc-font-smallest">units per day</span>' );
        }
        
        setSlider(C, valC);
        setSlider(E, valE);
        
        if (valC === 0 || valE === 0) {
            console.log('One or both values are zero');
        }
    });
    
    function setSlider(el, value) {
        var $this = $(el);
        var number = $this.find('.nh-calculator__number');
    
        value = Math.max(Math.min(value, 100), 0); // Ensure value is between 0 and 100
        $this.css('width', Number(value).toFixed(0) + '%');
        number.html(value === 0 ? '0' : Number(value).toFixed(0) + '%');
    }
    
})(jQuery);
</script>

Whats the Problem?

The Solution

Conclusion