servala/website
1
0
Fork 0
Code Issues 12 Pull requests Projects 1 Packages 1 Activity Actions

allow to customize params of growth scenarios

Browse source
This commit is contained in:
Tobias Brunner 2025-07-16 15:31:29 +02:00
parent 1381eb8fdc
commit 0a84db25a3
Signed by: tobru
SSH key fingerprint: SHA256:kOXg1R6c11XW3/Pt9dbLdQvOJGFAy+B2K6v6PtRWBGQ
1 changed files with 218 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

223
hub/services/templates/calculator/csp_roi_calculator.html
View file

@ -334,7 +334,7 @@
</label>
</div>
<p class="small text-muted mb-2">Steady, predictable growth with minimal risk</p>
<small class="text-info">Churn: 2% | New instances: 50-200/month</small>
<small class="text-info">Churn: 2% | New instances: 50-150/month (customizable below)</small>
</div>
<div class="scenario-card active" id="moderate-card">
@ -345,7 +345,7 @@
</label>
</div>
<p class="small text-muted mb-2">Balanced approach with moderate risk/reward</p>
<small class="text-info">Churn: 3% | New instances: 100-400/month</small>
<small class="text-info">Churn: 3% | New instances: 100-400/month (customizable below)</small>
</div>
<div class="scenario-card active" id="aggressive-card">
@ -356,7 +356,7 @@
</label>
</div>
<p class="small text-muted mb-2">Rapid expansion with higher risk/reward</p>
<small class="text-info">Churn: 5% | New instances: 200-800/month</small>
<small class="text-info">Churn: 5% | New instances: 200-800/month (customizable below)</small>
</div>
<!-- Advanced Parameters -->
@ -369,7 +369,154 @@
</div>
<div class="collapsible-content" id="advanced-params">
<div id="scenario-customization">
<!-- Dynamic scenario customization will be populated here -->
<p class="text-muted small mb-3">Customize growth phases and churn rates for each scenario. Changes apply immediately to calculations.</p>
<!-- Conservative Scenario Customization -->
<div class="phase-settings" id="conservative-advanced" style="display: block;">
<h6 class="text-success mb-3"><i class="bi bi-sliders"></i> Conservative Scenario Parameters</h6>
<div class="row mb-2">
<div class="col-6">
<label class="form-label small">Monthly Churn Rate (%)</label>
<input type="number" class="form-control form-control-sm" id="conservative-churn"
min="0" max="10" step="0.1" value="2.0"
onchange="updateScenarioChurn('conservative', this.value)">
</div>
</div>
<div class="row mb-2">
<div class="col-6">
<label class="form-label small">Phase 1 (Mo 1-6)</label>
<input type="number" class="form-control form-control-sm" id="conservative-phase-0"
min="10" max="500" step="5" value="50"
onchange="updateScenarioPhase('conservative', 0, this.value)">
<small class="text-muted">instances/month</small>
</div>
<div class="col-6">
<label class="form-label small">Phase 2 (Mo 7-12)</label>
<input type="number" class="form-control form-control-sm" id="conservative-phase-1"
min="10" max="500" step="5" value="75"
onchange="updateScenarioPhase('conservative', 1, this.value)">
<small class="text-muted">instances/month</small>
</div>
</div>
<div class="row">
<div class="col-6">
<label class="form-label small">Phase 3 (Mo 13-24)</label>
<input type="number" class="form-control form-control-sm" id="conservative-phase-2"
min="10" max="500" step="5" value="100"
onchange="updateScenarioPhase('conservative', 2, this.value)">
<small class="text-muted">instances/month</small>
</div>
<div class="col-6">
<label class="form-label small">Phase 4 (Mo 25+)</label>
<input type="number" class="form-control form-control-sm" id="conservative-phase-3"
min="10" max="500" step="5" value="150"
onchange="updateScenarioPhase('conservative', 3, this.value)">
<small class="text-muted">instances/month</small>
</div>
</div>
</div>
<!-- Moderate Scenario Customization -->
<div class="phase-settings" id="moderate-advanced" style="display: block;">
<h6 class="text-warning mb-3"><i class="bi bi-sliders"></i> Moderate Scenario Parameters</h6>
<div class="row mb-2">
<div class="col-6">
<label class="form-label small">Monthly Churn Rate (%)</label>
<input type="number" class="form-control form-control-sm" id="moderate-churn"
min="0" max="10" step="0.1" value="3.0"
onchange="updateScenarioChurn('moderate', this.value)">
</div>
</div>
<div class="row mb-2">
<div class="col-6">
<label class="form-label small">Phase 1 (Mo 1-6)</label>
<input type="number" class="form-control form-control-sm" id="moderate-phase-0"
min="10" max="1000" step="10" value="100"
onchange="updateScenarioPhase('moderate', 0, this.value)">
<small class="text-muted">instances/month</small>
</div>
<div class="col-6">
<label class="form-label small">Phase 2 (Mo 7-12)</label>
<input type="number" class="form-control form-control-sm" id="moderate-phase-1"
min="10" max="1000" step="10" value="200"
onchange="updateScenarioPhase('moderate', 1, this.value)">
<small class="text-muted">instances/month</small>
</div>
</div>
<div class="row">
<div class="col-6">
<label class="form-label small">Phase 3 (Mo 13-24)</label>
<input type="number" class="form-control form-control-sm" id="moderate-phase-2"
min="10" max="1000" step="10" value="300"
onchange="updateScenarioPhase('moderate', 2, this.value)">
<small class="text-muted">instances/month</small>
</div>
<div class="col-6">
<label class="form-label small">Phase 4 (Mo 25+)</label>
<input type="number" class="form-control form-control-sm" id="moderate-phase-3"
min="10" max="1000" step="10" value="400"
onchange="updateScenarioPhase('moderate', 3, this.value)">
<small class="text-muted">instances/month</small>
</div>
</div>
</div>
<!-- Aggressive Scenario Customization -->
<div class="phase-settings" id="aggressive-advanced" style="display: block;">
<h6 class="text-danger mb-3"><i class="bi bi-sliders"></i> Aggressive Scenario Parameters</h6>
<div class="row mb-2">
<div class="col-6">
<label class="form-label small">Monthly Churn Rate (%)</label>
<input type="number" class="form-control form-control-sm" id="aggressive-churn"
min="0" max="15" step="0.1" value="5.0"
onchange="updateScenarioChurn('aggressive', this.value)">
</div>
</div>
<div class="row mb-2">
<div class="col-6">
<label class="form-label small">Phase 1 (Mo 1-6)</label>
<input type="number" class="form-control form-control-sm" id="aggressive-phase-0"
min="50" max="2000" step="25" value="200"
onchange="updateScenarioPhase('aggressive', 0, this.value)">
<small class="text-muted">instances/month</small>
</div>
<div class="col-6">
<label class="form-label small">Phase 2 (Mo 7-12)</label>
<input type="number" class="form-control form-control-sm" id="aggressive-phase-1"
min="50" max="2000" step="25" value="400"
onchange="updateScenarioPhase('aggressive', 1, this.value)">
<small class="text-muted">instances/month</small>
</div>
</div>
<div class="row">
<div class="col-6">
<label class="form-label small">Phase 3 (Mo 13-24)</label>
<input type="number" class="form-control form-control-sm" id="aggressive-phase-2"
min="50" max="2000" step="25" value="600"
onchange="updateScenarioPhase('aggressive', 2, this.value)">
<small class="text-muted">instances/month</small>
</div>
<div class="col-6">
<label class="form-label small">Phase 4 (Mo 25+)</label>
<input type="number" class="form-control form-control-sm" id="aggressive-phase-3"
min="50" max="2000" step="25" value="800"
onchange="updateScenarioPhase('aggressive', 3, this.value)">
<small class="text-muted">instances/month</small>
</div>
</div>
</div>
<div class="mt-3">
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="resetAdvancedParameters()">
<i class="bi bi-arrow-clockwise"></i> Reset to Defaults
</button>
</div>
</div>
</div>
</div>
@ -1039,6 +1186,69 @@ function updateCalculations() {
}
}
// Advanced parameter functions
function updateScenarioChurn(scenarioKey, churnRate) {
calculator.scenarios[scenarioKey].churnRate = parseFloat(churnRate) / 100;
updateCalculations();
}
function updateScenarioPhase(scenarioKey, phaseIndex, newInstancesPerMonth) {
calculator.scenarios[scenarioKey].phases[phaseIndex].newInstancesPerMonth = parseInt(newInstancesPerMonth);
updateCalculations();
}
function resetAdvancedParameters() {
if (confirm('Reset all advanced parameters to default values?')) {
// Reset Conservative
calculator.scenarios.conservative.churnRate = 0.02;
calculator.scenarios.conservative.phases = [
{ months: 6, newInstancesPerMonth: 50 },
{ months: 6, newInstancesPerMonth: 75 },
{ months: 12, newInstancesPerMonth: 100 },
{ months: 12, newInstancesPerMonth: 150 }
];
// Reset Moderate
calculator.scenarios.moderate.churnRate = 0.03;
calculator.scenarios.moderate.phases = [
{ months: 6, newInstancesPerMonth: 100 },
{ months: 6, newInstancesPerMonth: 200 },
{ months: 12, newInstancesPerMonth: 300 },
{ months: 12, newInstancesPerMonth: 400 }
];
// Reset Aggressive
calculator.scenarios.aggressive.churnRate = 0.05;
calculator.scenarios.aggressive.phases = [
{ months: 6, newInstancesPerMonth: 200 },
{ months: 6, newInstancesPerMonth: 400 },
{ months: 12, newInstancesPerMonth: 600 },
{ months: 12, newInstancesPerMonth: 800 }
];
// Update UI inputs
document.getElementById('conservative-churn').value = '2.0';
document.getElementById('conservative-phase-0').value = '50';
document.getElementById('conservative-phase-1').value = '75';
document.getElementById('conservative-phase-2').value = '100';
document.getElementById('conservative-phase-3').value = '150';
document.getElementById('moderate-churn').value = '3.0';
document.getElementById('moderate-phase-0').value = '100';
document.getElementById('moderate-phase-1').value = '200';
document.getElementById('moderate-phase-2').value = '300';
document.getElementById('moderate-phase-3').value = '400';
document.getElementById('aggressive-churn').value = '5.0';
document.getElementById('aggressive-phase-0').value = '200';
document.getElementById('aggressive-phase-1').value = '400';
document.getElementById('aggressive-phase-2').value = '600';
document.getElementById('aggressive-phase-3').value = '800';
updateCalculations();
}
}
// Scenario management
function toggleScenario(scenarioKey) {
const enabled = document.getElementById(scenarioKey + '-enabled').checked;
@ -1318,7 +1528,10 @@ function resetCalculator() {
document.getElementById(scenario + '-card').classList.remove('disabled');
});
// Recalculate
// Reset advanced parameters
resetAdvancedParameters();
// Recalculate (this will be called by resetAdvancedParameters, but we ensure it happens)
updateCalculations();
}
}