# Usage and cost estimator





<link rel="stylesheet" href="/nginxaas-azure/css/cost-calculator_v2.css">
<div id="calculator" data-testid="calculator">
    <h3 id="calculator-section-heading" data-testid="calculator-section-heading">
            Cost Estimation for Standard V3 Plan
            <button id="printButton">Print Estimate</button>
        </h3>
    <div class="section" data-testid="calculator-section-content">
        <div class="form-section">
            <div class="form-section-content" data-testid="form-section-content-estimateNCUUsage">
                <h4>1. Estimate NCU Usage </h4>
                <div>
                    <div class="form-field">
                        <label for="avgNewConnsPerSec">
                            Average New Connections per Second
                        </label>
                        <input id="avgNewConnsPerSec" type="number" data-testid="input-avgNewConnsPerSec"/>
                    </div>
                    <div class="form-field avg-conn-duration-container">
                        <label for="avgConnDuration">
                            Average Connection Duration
                        </label>
                        <input id="avgConnDuration" type="number" data-testid="input-avgConnDuration"/>
                    </div>
                    <div class="form-field bandwidth-input-container">
                        <label for="totalBandwidth">
                            Total Processed Data
                        </label>
                        <input id="totalBandwidth" type="number" data-testid="input-totalBandwidth"/>
                    </div>
                </div>
            </div>
            <div class="form-section-content" data-testid="form-section-content-capacityUnitsNeeded">
                <div class=form-section-footer>
                    <div class="totals">
                        <span>NGINX Capacity Units Needed</span>
                        <span id="ncuEstimateValue" data-testid="ncuEstimateValue">--</span>
                        <span> Sold in bundles of 10, with a minimum of 10</span>
                    </div>
                    <details id="ncu-usage-details">
                        <summary data-testid="button-ncu-usage-details">Show calculations</summary>
                        <div id="ncuEstimateDetails">
                        <div class="math">
                            <var id="ncuEstConnRate">x</var> new connections per second *
                            <var id="ncuEstConnDuration">y</var> average connection duration seconds =
                            <var id="ncuEstAvgConn">z</var> average concurrent connections
                        </div>
                        <pre class="math">
Max(
    <var id="ncuEstAvgConn2">x</var> concurrent connections / <span id="ncuEstConnsPerNcu"></span> Conns per NCU,
    <var id="ncuEstConnRate2">y</var> connections per second / <span id="ncuEstConnsPerSecondPerNcu"></span> conns per second per NCU,
    <var id="ncuEstDataRate">z</var> Mbps / <span id="ncuEstMbpsPerNcu"></span>Mbps per NCU
) = <var id="ncuEstMin1"></var> NCUs
</pre>
                        <div class="math">
                            Usage needs at least <var id="ncuEstMin">x</var> NCUs, rounded to the nearest 10, with a minimum of 10 = <var id="ncuEstTotal">total</var> NCUs
                        </div>
                        </div>
                    </details>
                </div>
            </div>
        </div>
        <div class="form-section">
        <div class="form-section-content" data-testid="form-section-content-estimateMonthlyCost">
            <h4 id="calculator-section-heading">
               2. Estimate Monthly Cost
            </h4>
            <div class="form-field">
                <label for="region">
                    Region
                </label>
                <select id="region" data-testid="dropdown-region">
                <!-- options appended from tiers data -->
                </select>
            </div>
            <div class="form-field">
                <label for="numNcus">
                    NCUs <span class="label-details">- value from usage estimate: <span id="numNcusEstVal"> - </span></span>
                </label>
                <input id="numNcus" data-testid="input-numNcus" type="number" step="10" min="10" />
                <span id="ncuValidation"></span>
            </div>
            <div class="form-field">
                <label for="numHours">
                    Hours <span class="label-details">- used in a month</span>
                </label>
                <input id="numHours" data-testid="input-numHours" type="number"/>
            </div>
            <div class="form-field">
                <label for="numListenPorts">
                    Listen Ports <span class="label-details">- first 5 are included (1 additional port = 2 NCU)</span>
                </label>
                <input id="numListenPorts" data-testid="input-numListenPorts" type="number"/>
            </div>
            <div class="form-field">
                <label for="dataProcessedGB">
                    Data Processed <span class="label-details">- GB per month</span>
                </label>
                <input id="dataProcessedGB" data-testid="input-dataProcessedGB" type="number" min="0" />
            </div>
            <div class="form-field">
                <label for="isWAF">
                    Utilize WAF <span class="label-details"></span>
                </label>
                <input type="checkbox" id="isWAF" />
            </div>
            </div>
            <div class=form-section-content>
                <div id="totals-section">
                    <span class="total-text">Total Monthly Payment</span>
                    <span id="total-value" data-testid="total-value" class="total-text">--</span>
                    <div class="subtitle">
                        The standard Azure networking and bandwidth charges apply to NGINX deployments.
                    </div>
                    <details id="total-cost-details">
                        <summary>Show calculations</summary>
                        <div class="details-content">
                            <div class="details-section">
                                <h5>Standard V3 Pricing Components:</h5>
                                <p class="math">
                                    <var id="cost-detail-hours"></var> hours × (<var id="cost-detail-deployment-fee"></var> fixed deployment + <var id="cost-detail-ncus"></var> NCUs × <var id="cost-detail-tier-cost"></var> per NCU per hour + <var id="cost-detail-listen-ports"></var> additional listen ports × 2 NCUs × <var id="cost-detail-listen-ports-cost"></var>) +
                                    <var id="cost-detail-data-processed"></var> GB × <var id="cost-detail-data-processing-cost"></var> per GB<br/>
                                    <strong>Total:</strong> <var id="cost-detail-total"></var>
                                </p>
                            </div>
                            <div class="details-section">
                                <h5>Regional Pricing:</h5>
                                <table class="math" id="tiers-costs-table">
                                    <tr>
                                        <th>Region</th>
                                        <th>Tier</th>
                                        <th>NCU Cost/hr (No WAF)</th>
                                        <th>NCU Cost/hr (With WAF)</th>
                                        <th>Fixed Deployment/hr (No WAF)</th>
                                        <th>Fixed Deployment/hr (With WAF)</th>
                                    </tr>
                                    <!-- tier costs data appended here -->
                                </table>
                                <p><em>Note: Deployment fees and NCU costs vary by region tier and WAF usage. Data processing cost is $0.005/GB across all configurations.</em></p>
                            </div>
                        </div>
                    </details>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="module" src="/nginxaas-azure/js/cost-calculator_v2.js"></script>