Fill in Health Score, Fault Probabilities, Energy ledger, Latency and Cost and Recent Alerts with template data

index.html

@@ -170,73 +170,56 @@ setTheme(dark);
 document.getElementById('themeBtn').onclick = ()=>setTheme(!body.classList.contains('theme-dark'));
 /* DEMO DATA GENERATION */
 let lastHealth=0.94, lastEta=180;
-const dataHealth = Array(15*60).fill().map((_,i)=>{
-  const x = Date.now()-i*1000;
-  // Simulate realistic grid health with daily patterns
-  const hour = (i/3600) % 24;
-  const isPeak = (hour >= 8 && hour <= 10) || (hour >= 17 && hour <= 20);
-  const isNight = hour >= 22 || hour <= 5;
-  
-  // Base health score with daily variation
-  let base = isPeak ? 0.88 : isNight ? 0.96 : 0.92;
-  
-  // Add smaller fluctuations based on minutes
-  const min = (i/60) % 60;
-  base += Math.sin(min/15) * 0.02;
-  
-  // Add random equipment failures (5% chance every 15 min)
-  const failure = i % (15*60) === 0 && Math.random() > 0.95 ? -0.08 : 0;
-  
-  // Add random noise
-  const noise = Math.random() * 0.01;
-  
-  return {x, y: Math.max(0.7, base + failure + noise)};
-});
+// Template data for Health Score (15 minutes, updated every second)
+const dataHealth = [];
+const now = Date.now();
+for (let i = 0; i < 15 * 60; i++) {
+  const time = now - (15 * 60 - i) * 1000;
+  // Use template values that vary realistically
+  const values = [0.95, 0.94, 0.93, 0.92, 0.91, 0.90, 0.89, 0.88, 0.87, 0.86];
+  const value = values[i % values.length] + (Math.random() * 0.02 - 0.01);
+  dataHealth.push({ x: time, y: Math.max(0.85, Math.min(0.96, value)) });
+}
+
+// Template data for Fault Probabilities (24 hours, updated every minute)
+const dataSag = [], dataSwell = [], dataOsc = [];
+for (let i = 0; i < 24 * 60; i++) {
+  const time = now - (24 * 60 - i) * 60000;
+  // Use template patterns for each fault type
+  dataSag.push({ x: time, y: 0.1 + 0.1 * Math.sin(i / 30) + Math.random() * 0.05 });
+  dataSwell.push({ x: time, y: 0.05 + 0.08 * Math.sin(i / 45 + 1) + Math.random() * 0.03 });
+  dataOsc.push({ x: time, y: 0.02 + 0.06 * Math.sin(i / 60 + 2) + Math.random() * 0.02 });
+}
 
-// Fault probability data (last 24 hours)
-const dataSag = [], dataSwell=[], dataOsc=[], dataLatency=[], dataCost=[], dataEnergy=[];
-for(let i=0;i<60*24;i++){
-  const x = Date.now()-i*60000;
-  const hour = (i/60) % 24;
-  const isPeak = (hour >= 6 && hour <= 9) || (hour >= 16 && hour <= 20);
-  
-  // Voltage Sag (most common during peak hours)
-  let sagProb = isPeak ? 0.25 : 0.15;
-  sagProb += Math.sin(i/180) * 0.1; // cyclic pattern every 3 hours
-  if(i % (7*60) === 0 && Math.random() > 0.7) sagProb += 0.3; // random spikes
-  dataSag.unshift({x, y: Math.min(0.9, Math.max(0, sagProb + Math.random()*0.05))});
-  
-  // Voltage Swell (less common)
-  let swellProb = isPeak ? 0.18 : 0.1;
-  swellProb += Math.sin(i/240) * 0.08;
-  if(i % (10*60) === 0 && Math.random() > 0.8) swellProb += 0.2;
-  dataSwell.unshift({x, y: Math.min(0.8, Math.max(0, swellProb + Math.random()*0.03))});
-  
-  // Frequency Oscillation (rare but important)
-  let oscProb = isPeak ? 0.12 : 0.08;
-  oscProb += Math.sin(i/300) * 0.05;
-  if(i % (15*60) === 0 && Math.random() > 0.9) oscProb += 0.25;
-  dataOsc.unshift({x, y: Math.min(0.7, Math.max(0, oscProb + Math.random()*0.02))});
-  
-  // Latency & Cost (better at night)
-  const latency = isPeak ? 0.18 + Math.random()*0.04 : 0.12 + Math.random()*0.03;
-  dataLatency.unshift({x, y: latency});
-  dataCost.unshift({x, y: latency / 1500}); // cost proportional to latency
-  
-  // Energy consumption
-  const energy = isPeak ? 0.0095 + Math.random()*0.002 : 0.006 + Math.random()*0.0015;
-  dataEnergy.unshift({x, y: energy});
+// Template data for Energy Ledger (24 hours, hourly data)
+const dataEnergy = [];
+for (let i = 0; i < 24; i++) {
+  const time = now - (23 - i) * 3600000;
+  // Template energy consumption pattern
+  const base = 0.005 + 0.003 * Math.sin(i / 4);
+  dataEnergy.push({ x: time, y: base + Math.random() * 0.002 });
 }
 
-// Recent Alerts (last 24 hours)
+// Template data for Latency & Cost (24 hours, hourly data)
+const dataLatency = [], dataCost = [];
+for (let i = 0; i < 24; i++) {
+  const time = now - (23 - i) * 3600000;
+  // Template latency pattern
+  const latency = 0.1 + 0.05 * Math.sin(i / 3) + Math.random() * 0.02;
+  dataLatency.push({ x: time, y: latency });
+  // Cost derived from latency
+  dataCost.push({ x: time, y: latency * 0.0005 });
+}
+
+// Template data for Recent Alerts
 const alerts = [
-  {time:new Date(Date.now()-45000), feeder:"N12", fault:"Voltage Sag 0.85", eta:"32 s", action:"Adjust tap changer"},
-  {time:new Date(Date.now()-120000), feeder:"S08", fault:"Current Swell 0.78", eta:"1:45", action:"Notify maintenance"},
-  {time:new Date(Date.now()-300000), feeder:"E05", fault:"Frequency Osc 0.65", eta:"2:10", action:"Monitor"},
-  {time:new Date(Date.now()-1800000), feeder:"W03", fault:"Harmonic Dist 0.72", eta:"4:30", action:"Schedule filter check"},
-  {time:new Date(Date.now()-3600000), feeder:"C01", fault:"Voltage Dip 0.88", eta:"12:30", action:"Reroute load"},
-  {time:new Date(Date.now()-5400000), feeder:"N07", fault:"Phase Unbalance 0.81", eta:"6:15", action:"Balance load"},
-  {time:new Date(Date.now()-7200000), feeder:"S02", fault:"Capacitor Bank Fail", eta:"8:20", action:"Dispatch crew"}
+  {time:new Date(now-2*60000), feeder:"F01", fault:"Voltage Sag 0.85", eta:"32 s", action:"Adjust tap changer"},
+  {time:new Date(now-5*60000), feeder:"F02", fault:"Current Swell 0.78", eta:"1:45", action:"Notify maintenance"},
+  {time:new Date(now-10*60000), feeder:"F03", fault:"Frequency Osc 0.65", eta:"2:10", action:"Monitor"},
+  {time:new Date(now-30*60000), feeder:"F04", fault:"Harmonic Dist 0.72", eta:"4:30", action:"Schedule filter check"},
+  {time:new Date(now-60*60000), feeder:"F05", fault:"Voltage Dip 0.88", eta:"12:30", action:"Reroute load"},
+  {time:new Date(now-90*60000), feeder:"F06", fault:"Phase Unbalance 0.81", eta:"6:15", action:"Balance load"},
+  {time:new Date(now-120*60000), feeder:"F07", fault:"Capacitor Bank Fail", eta:"8:20", action:"Dispatch crew"}
 ];
 /* CHARTS */
 function lineConfig(data,label,color,fill=false){
@@ -281,7 +264,6 @@ function refresh(){
   const gauge = document.getElementById('gauge');
   let c = lastHealth>=0.8? '#22c55e':lastHealth>=0.5? '#f59e0b': '#ef4444';
   gauge.style.borderColor = c;
-
   lastEta = Math.max(0,lastEta-1+Math.random()*2);
   const eta = lastEta<60?Math.round(lastEta)+' s':`${Math.floor(lastEta/60)} m`;
   document.getElementById('etaVal').textContent=eta;
@@ -289,10 +271,13 @@ function refresh(){
   kpiEta.classList.toggle('blink', lastEta<60);
   const hour = new Date().getHours();
   const isPeak = hour > 8 && hour < 20;
-  document.getElementById('latencyVal').textContent = (isPeak ? 0.17 + Math.random()*0.03 : 0.12 + Math.random()*0.02).toFixed(2)+' ms';
-  document.getElementById('energyVal').textContent = (isPeak ? 0.009 + Math.random()*0.0015 : 0.006 + Math.random()*0.0012).toFixed(3)+' Wh';
-  document.getElementById('co2Val').textContent = (3.2 + Math.sin(Date.now()/86400000)*0.4).toFixed(2)+' kg';
-// alerts
+  // Use template values for latency and energy
+  const latencyVal = isPeak ? 0.15 + Math.random() * 0.03 : 0.12 + Math.random() * 0.02;
+  const energyVal = isPeak ? 0.008 + Math.random() * 0.0015 : 0.006 + Math.random() * 0.0012;
+  document.getElementById('latencyVal').textContent = latencyVal.toFixed(2) + ' ms';
+  document.getElementById('energyVal').textContent = energyVal.toFixed(3) + ' Wh';
+  document.getElementById('co2Val').textContent = (2.1 + Math.random() * 0.2).toFixed(1) + ' kg';
+  // alerts
   const tbody = document.querySelector('#alertsTable tbody');
   tbody.innerHTML='';
   alerts.forEach(a=>{