Show code
viewof rlDeviceCount = Inputs.range([10, 50000], {
value: 500,
step: 10,
label: "Number of devices:"
})
viewof rlReportInterval = Inputs.range([1, 3600], {
value: 30,
step: 1,
label: "Report interval (seconds):"
})
viewof rlHeaderOverhead = Inputs.range([50, 500], {
value: 250,
step: 10,
label: "HTTP header overhead (bytes):"
})
viewof rlPayloadSize = Inputs.range([20, 2000], {
value: 120,
step: 10,
label: "JSON payload size (bytes):"
})
rlReqPerSec = rlDeviceCount / rlReportInterval
rlBytesPerReq = rlHeaderOverhead + rlPayloadSize
rlDailyBytes = rlReqPerSec * rlBytesPerReq * 86400
rlDailyMB = rlDailyBytes / (1024 * 1024)
rlDailyGB = rlDailyMB / 1024
rlMonthlyGB = rlDailyGB * 30
html`<div style="background: #f8f9fa; border-left: 4px solid #2C3E50; padding: 15px; margin-top: 15px; font-family: Arial, sans-serif;">
<h4 style="color: #2C3E50; margin-top: 0;">API Request Load Estimates</h4>
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 10px;">
<div style="background: white; padding: 12px; border-radius: 4px; border: 1px solid #e0e0e0;">
<div style="color: #7F8C8D; font-size: 12px; text-transform: uppercase; margin-bottom: 5px;">Requests per Second</div>
<div style="color: #16A085; font-size: 22px; font-weight: bold;">${rlReqPerSec.toFixed(2)}</div>
<div style="color: #7F8C8D; font-size: 11px; margin-top: 3px;">${(rlReqPerSec * 60).toFixed(0)} req/min</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; border: 1px solid #e0e0e0;">
<div style="color: #7F8C8D; font-size: 12px; text-transform: uppercase; margin-bottom: 5px;">Bytes per Request</div>
<div style="color: #E67E22; font-size: 22px; font-weight: bold;">${rlBytesPerReq} B</div>
<div style="color: #7F8C8D; font-size: 11px; margin-top: 3px;">${rlHeaderOverhead}B header + ${rlPayloadSize}B payload</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; border: 1px solid #e0e0e0;">
<div style="color: #7F8C8D; font-size: 12px; text-transform: uppercase; margin-bottom: 5px;">Daily Bandwidth</div>
<div style="color: ${rlDailyGB > 1 ? '#E74C3C' : '#3498DB'}; font-size: 22px; font-weight: bold;">${rlDailyGB >= 1 ? rlDailyGB.toFixed(2) + ' GB' : rlDailyMB.toFixed(1) + ' MB'}</div>
<div style="color: #7F8C8D; font-size: 11px; margin-top: 3px;">${rlMonthlyGB.toFixed(1)} GB/month</div>
</div>
</div>
<div style="margin-top: 12px; padding: 10px; background: #f0f7ff; border-radius: 4px; font-size: 13px; color: #2C3E50;">
<strong>Capacity note:</strong> ${rlReqPerSec < 100 ? 'A single API server can handle this load comfortably.' : rlReqPerSec < 1000 ? 'Consider load balancing across 2-3 API servers.' : 'High volume -- deploy behind a load balancer with auto-scaling.'}
</div>
</div>`