platform-roi/model.html at main · PECommunity/platform-roi · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Title -->
    <title>Platform Engineering ROI Calculator | Platformetrics</title>

    <!-- Primary Meta Tags -->
    <meta name="title" content="Platform Engineering ROI Calculator | Platformetrics">
    <meta name="description" content="Calculate the ROI of platform engineering investments using proven methodologies from Effective Platform Engineering and Platformetrics Framework.">

    <!-- Keywords -->
    <meta name="keywords" content="Platform Engineering ROI, ROI Calculator, Internal Developer Platform ROI, Developer Productivity ROI, DevOps ROI, Platform Investment Calculator, Cost Savings Calculator, TCO Platform Engineering">

    <!-- Author -->
    <meta name="author" content="Ajay Chankramath">

    <!-- Canonical URL -->
    <link rel="canonical" href="https://platformetrics.com/model.html">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://platformetrics.com/model.html">
    <meta property="og:title" content="Platform Engineering ROI Calculator | Platformetrics">
    <meta property="og:description" content="Calculate the return on investment for platform engineering initiatives using proven methodologies and real-world data.">
    <meta property="og:image" content="https://platformetrics.com/platformetrics-blacklogo.png">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://platformetrics.com/model.html">
    <meta name="twitter:title" content="Platform Engineering ROI Calculator | Platformetrics">
    <meta name="twitter:description" content="Model the business impact and ROI of your platform engineering initiatives with data-driven precision.">
    <meta name="twitter:image" content="https://platformetrics.com/platformetrics-blacklogo.png">

    <!-- ChatGPT + AI Agent Discoverability -->
    <meta name="ai-topic" content="Platform Engineering ROI Calculator, Developer Productivity ROI, Internal Developer Platform Business Case">
    <meta name="ai-summary" content="Interactive ROI calculator for platform engineering investments using proven methodologies and real-world implementation data from the Platformetrics framework.">
    <meta name="ai-keywords" content="Platform Engineering ROI, Developer Productivity Calculator, Internal Developer Platform ROI, DevOps Business Case, Platform Investment ROI">

    <!-- Preconnects and Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/model.css">

    <!-- CSS and Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="platformetrics.css"/>
    <link rel="icon" href="favicon.ico" type="image/x-icon">

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "Platform Engineering ROI Calculator",
  "url": "https://platformetrics.com/model.html",
  "description": "Interactive calculator for modeling the ROI of platform engineering initiatives using proven methodologies and real-world implementation data.",
  "applicationCategory": "BusinessApplication",
  "operatingSystem": "Web Browser",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "creator": {
    "@type": "Organization",
    "name": "Platformetrics",
    "url": "https://platformetrics.com",
    "logo": "https://platformetrics.com/platformetrics-blacklogo.png"
  }
}
</script>

    <style>

    </style>
</head>
<body>

    <div id="header-placeholder"></div>

    <div class="container">
        <header class="header">
            <div style="display:flex; gap:12px; align-items:center; justify-content:center; width:100%;">
                <div style="flex:1; text-align:center;">
                    <h1 data-i18n="title">Platform Engineering ROI Calculator</h1>
                    <p class="subtitle" data-i18n="subtitle">
                        Calculate the return on investment for platform engineering initiatives using proven methodologies, irrespective of your AI maturity, and real-world data from the Effective Platform Engineering framework.
                    </p>
                    <div class="methodology-badge">
                        <a href="https://effectiveplatformengineering.com" target="_blank" data-i18n="methodology.link1">Effective Platform Engineering</a> |
                        <a href="platform-roi.html" data-i18n="methodology.link2">Model Description</a> |
                        <a href="#" data-i18n="methodology.link3">Read the whitepaper</a>
                    </div>
                </div>
                <div style="min-width:170px; text-align:right;">
                    <label for="langSelect" class="hidden" data-i18n="lang.selectLabel">Language</label>
                    <select id="langSelect" aria-label="Language selector">
                        <option value="en">English</option>
                        <option value="zh">中文</option>
                    </select>
                </div>
            </div>
        </header>

        <section class="form-section">
            <h2>
                <i class="fas fa-cogs"></i> <span data-i18n="config.heading">Configuration</span>
            </h2>
            <div class="form-grid">
                <div class="form-group">
                    <label for="teamSize" data-i18n="label.teamSize">Engineering Team Size</label>
                    <input type="number" id="teamSize" value="5" min="5" max="1000">
                    <div class="help-text" data-i18n="help.teamSize">Number of engineers on your team</div>
                </div>

                <div class="form-group">
                    <label for="avgSalary" data-i18n="label.avgSalary">Average Engineer Salary (USD)</label>
                    <input type="number" id="avgSalary" value="120000" min="50000" max="300000">
                    <div class="help-text" data-i18n="help.avgSalary">Annual salary including benefits</div>
                </div>

                <div class="form-group">
                    <label for="toilHours" data-i18n="label.toilHours">Weekly Toil Hours</label>
                    <input type="number" id="toilHours" value="8" min="0" max="40">
                    <div class="help-text" data-i18n="help.toilHours">Hours per week spent on manual ops work</div>
                </div>

                <div class="form-group">
                    <label for="currentAI" data-i18n="label.currentAI">Current AI Usage</label>
                    <select id="currentAI">
                        <option value="none" data-i18n="option.currentAI.none">None</option>
                        <option value="basic" data-i18n="option.currentAI.basic">Basic (GitHub Copilot)</option>
                        <option value="advanced" data-i18n="option.currentAI.advanced">Advanced (Cursor, Windsurf)</option>
                        <option value="expert" data-i18n="option.currentAI.expert">Expert (AI-native workflow)</option>
                    </select>
                    <div class="help-text" data-i18n="help.currentAI">Current level of AI tool adoption</div>
                </div>

                <div class="form-group">
                    <label for="aiReadiness" data-i18n="label.aiReadiness">Team AI Readiness</label>
                    <select id="aiReadiness">
                        <option value="low" data-i18n="option.aiReadiness.low">Low</option>
                        <option value="intermediate" selected data-i18n="option.aiReadiness.intermediate">Intermediate</option>
                        <option value="high" data-i18n="option.aiReadiness.high">High</option>
                        <option value="expert" data-i18n="option.aiReadiness.expert">Expert</option>
                    </select>
                    <div class="help-text" data-i18n="help.aiReadiness">Team's ability to adopt new AI tools</div>
                </div>

                <div class="form-group">
                    <label for="deployFreq" data-i18n="label.deployFreq">Deployment Frequency</label>
                    <select id="deployFreq">
                        <option value="monthly" data-i18n="option.deployFreq.monthly">Monthly</option>
                        <option value="weekly" selected data-i18n="option.deployFreq.weekly">Weekly</option>
                        <option value="daily" data-i18n="option.deployFreq.daily">Daily</option>
                    </select>
                    <div class="help-text" data-i18n="help.deployFreq">Current deployment cadence</div>
                </div>

                <div class="form-group">
                    <label for="industry" data-i18n="label.industry">Industry</label>
                    <select id="industry">
                        <option value="general" selected data-i18n="option.industry.general">General Technology</option>
                        <option value="financial" data-i18n="option.industry.financial">Financial Services</option>
                        <option value="healthcare" data-i18n="option.industry.healthcare">Healthcare</option>
                        <option value="startup" data-i18n="option.industry.startup">Early Stage Startup</option>
                    </select>
                    <div class="help-text" data-i18n="help.industry">Industry affects compliance requirements</div>
                </div>

                <div class="form-group">
                    <label for="techDebt" data-i18n="label.techDebt">Technical Debt Level</label>
                    <select id="techDebt">
                        <option value="low" data-i18n="option.techDebt.low">Low</option>
                        <option value="medium" selected data-i18n="option.techDebt.medium">Medium</option>
                        <option value="high" data-i18n="option.techDebt.high">High</option>
                        <option value="very-high" data-i18n="option.techDebt.veryHigh">Very High</option>
                    </select>
                    <div class="help-text" data-i18n="help.techDebt">Level of legacy technical debt</div>
                </div>

                <div class="form-group">
                    <label for="timeHorizon" data-i18n="label.timeHorizon">Analysis Period (Years)</label>
                    <input type="number" id="timeHorizon" value="3" min="1" max="5">
                    <div class="help-text" data-i18n="help.timeHorizon">Time horizon for ROI analysis</div>
                </div>
            </div>
        </section>

        <section class="results-section">
            <div id="currentSituation" class="current-situation">
                <!-- Dynamic content will be inserted here -->
            </div>

            <div id="stackResults" class="stack-results">
                <!-- Dynamic content will be inserted here -->
            </div>
        </section>

        <!-- Charts: dynamically updated (lazy-loaded, stacked in rows) -->
        <section id="charts" class="charts-section">
            <h2 class="charts-title"><i class="fas fa-chart-line"></i> <span data-i18n="charts.title">Visualizations</span></h2>
            <p class="charts-subtitle" data-i18n="charts.subtitle">Charts mirror the ROI dynamics in the whitepaper—cumulative ROI, cumulative investments vs. returns, and cumulative net value. They update automatically as you change inputs.</p>

            <table id="chartsTable" class="charts-table" role="presentation">
                <tbody>
                    <tr>
                        <td id="charts-col-1" colspan="3">
                            <div class="chart-card">
                                <h3 data-i18n="chart.roiTitle">ROI % over Time (Cumulative)</h3>
                                <canvas id="roiOverTimeChart" height="120"></canvas>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td id="charts-col-2" colspan="3">
                            <div class="chart-card">
                                <h3 data-i18n="chart.investmentsTitle">Total Investments vs Returns (&rarr; <span id="horizonLabel">3</span>-Year)</h3>
                                <canvas id="investmentsReturnsChart" height="120"></canvas>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td id="charts-col-3" colspan="3">
                            <div class="chart-card">
                                <h3 data-i18n="chart.netValueTitle">Net Value Accumulation</h3>
                                <canvas id="netValueChart" height="120"></canvas>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>

        <section class="methodology">
            <div class="disclaimer">
                <strong>Methodology Note:</strong> This calculator uses methodologies from "Effective Platform Engineering" and real implementation data.
                Results are estimates based on industry benchmarks and should be validated through pilot projects. Individual results may vary based on
                organizational context, execution quality, and team capabilities.
            </div>
        </section>


    </div>

    <div id="footer-placeholder"></div>

    <!-- Lazy-load model dynamic calculations -->
    <script src="js/i18n.js" defer></script>
    <script src="js/model.js" defer></script>

    <!-- Lazy-load charts inside container; sync colspan to table above -->
    <script src="js/charts.js" defer></script>

    <!-- Google Analytics (if using) -->
    <script src="js/ga-loader.js" defer></script>

    <!-- Cookie Banner (if using) -->
    <script src="js/cookie-banner.js"></script>

</body>
</html>