feat(bi): add period selector dropdown to cost avoidance metric
Added time period filtering to cost avoidance calculation: HTML changes: - Added dropdown selector next to "Cost Avoidance" title - Options: 7 days, 30 days (default), 90 days, 1 year, all time - Green focus ring matching metric theme JavaScript changes: - Filter audit data by selected time period before calculating costs - Event listener updates calculation when period changes - Cutoff date logic for temporal filtering - Defaults to 30 days if selector not found Users can now see cost avoidance for different time windows to track governance ROI trends over various periods. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
96ba8fdb16
commit
88f9ccfb34
2 changed files with 32 additions and 3 deletions
|
|
@ -167,7 +167,16 @@
|
|||
<!-- Cost Avoidance -->
|
||||
<div class="bg-white rounded-lg p-4 border-2 border-green-200">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h4 class="text-md font-semibold text-gray-800">Cost Avoidance This Period</h4>
|
||||
<div class="flex items-center space-x-3">
|
||||
<h4 class="text-md font-semibold text-gray-800">Cost Avoidance</h4>
|
||||
<select id="cost-period-selector" class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-2 focus:ring-green-500 focus:border-transparent">
|
||||
<option value="7">7 days</option>
|
||||
<option value="30" selected>30 days</option>
|
||||
<option value="90">90 days</option>
|
||||
<option value="365">1 year</option>
|
||||
<option value="all">All time</option>
|
||||
</select>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -182,8 +182,18 @@ async function renderBusinessIntelligence() {
|
|||
});
|
||||
}
|
||||
|
||||
// Cost Avoidance - load from API
|
||||
const blockedDecisions = auditData.filter(d => !d.allowed);
|
||||
// Cost Avoidance - filter by selected period
|
||||
const period = document.getElementById('cost-period-selector')?.value || '30';
|
||||
let filteredData = auditData;
|
||||
|
||||
if (period !== 'all') {
|
||||
const days = parseInt(period);
|
||||
const cutoffDate = new Date();
|
||||
cutoffDate.setDate(cutoffDate.getDate() - days);
|
||||
filteredData = auditData.filter(d => new Date(d.timestamp) >= cutoffDate);
|
||||
}
|
||||
|
||||
const blockedDecisions = filteredData.filter(d => !d.allowed);
|
||||
let totalCost = 0;
|
||||
const costByLevel = { CRITICAL: 0, HIGH: 0, MEDIUM: 0, LOW: 0 };
|
||||
|
||||
|
|
@ -1144,6 +1154,16 @@ function init() {
|
|||
configCostsBtn.addEventListener('click', showCostConfigModal);
|
||||
}
|
||||
|
||||
// Setup cost period selector
|
||||
const periodSelector = document.getElementById('cost-period-selector');
|
||||
if (periodSelector) {
|
||||
console.log('[Audit Analytics] Cost period selector found, attaching event listener');
|
||||
periodSelector.addEventListener('change', () => {
|
||||
console.log('[Audit Analytics] Period changed, recalculating cost avoidance...');
|
||||
renderBusinessIntelligence();
|
||||
});
|
||||
}
|
||||
|
||||
// Load initial data
|
||||
loadAuditData();
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue