34987-vm/resilience.php

<?php
$page_title = "Resilience Index";
include 'includes/header.php';
?>

<div class="container mt-5">
    <h1 class="page-title">Resilience Index</h1>
    <p class="lead mb-5">An overview of transformer fleet health and digital twin visualization.</p>

    <div class="row">
        <!-- Left Column: Table and Actions -->
        <div class="col-lg-6">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">Transformer Health Scores</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Transformer ID</th>
                                    <th>Location</th>
                                    <th>Resilience Index</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="health-table-body"></tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer text-center">
                    <button class="btn btn-primary"><i class="bi bi-file-earmark-pdf"></i> Generate Maintenance Report</button>
                    <a href="green.php" class="btn btn-secondary"><i class="bi bi-tree"></i> View Sustainability Impact</a>
                </div>
            </div>
        </div>

        <!-- Right Column: Charts -->
        <div class="col-lg-6">
            <!-- Bar Chart -->
            <div class="card mb-4">
                <div class="card-body">
                    <div id="resilience-bar-chart" class="chart-container"></div>
                </div>
            </div>
            <!-- 3D Scatter Plot -->
            <div class="card">
                 <div class="card-header">
                    <h5 class="mb-0">3D Digital Twin</h5>
                </div>
                <div class="card-body">
                    <div id="digital-twin-chart" class="chart-container"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Mock Data
    const locations = ['Mumbai', 'Delhi', 'Bangalore', 'Chennai', 'Kolkata', 'Hyderabad', 'Pune', 'Ahmedabad'];
    const transformers = Array.from({length: 8}, (_, i) => {
        const health = Math.floor(Math.random() * 60) + 40; // Score between 40 and 100
        let status, color;
        if (health < 60) {
            status = 'Critical';
            color = 'red';
        } else if (health < 85) {
            status = 'Warning';
            color = 'yellow';
        } else {
            status = 'Healthy';
            color = 'green';
        }
        return {
            id: `TRF-${1001 + i}`,
            location: locations[i],
            health: health,
            status: status,
            color: color,
            x: Math.random() * 100,
            y: Math.random() * 100,
            z: Math.random() * 100
        };
    });

    // 1. Populate Table
    const tableBody = document.getElementById('health-table-body');
    transformers.forEach(t => {
        const row = `<tr>
            <td>${t.id}</td>
            <td>${t.location}</td>
            <td><strong>${t.health}</strong></td>
            <td><span class="badge bg-${t.status === 'Healthy' ? 'success' : (t.status === 'Warning' ? 'warning' : 'danger')} text-dark">${t.status}</span></td>
        </tr>`;
        tableBody.innerHTML += row;
    });

    // 2. Create Bar Chart
    const barChartData = [{
        x: transformers.map(t => t.id),
        y: transformers.map(t => t.health),
        type: 'bar',
        marker: {
            color: transformers.map(t => t.color)
        }
    }];
    const barLayout = {
        title: 'Resilience Index by Transformer',
        xaxis: { title: 'Transformer ID' },
        yaxis: { title: 'Health Score (0-100)' },
        margin: { t: 40, l: 60, r: 20, b: 60 }
    };
    Plotly.newPlot('resilience-bar-chart', barChartData, barLayout, {responsive: true});

    // 3. Create 3D Digital Twin
    const scatter3dData = [{
        x: transformers.map(t => t.x),
        y: transformers.map(t => t.y),
        z: transformers.map(t => t.z),
        mode: 'markers',
        type: 'scatter3d',
        marker: {
            color: transformers.map(t => t.color),
            size: 8
        },
        text: transformers.map(t => `${t.id}<br>Health: ${t.health}`),
        hoverinfo: 'text'
    }];
    const scatterLayout = {
        title: 'Fault Zone Visualization',
        margin: { l: 0, r: 0, b: 0, t: 40 }
    };
    Plotly.newPlot('digital-twin-chart', scatter3dData, scatterLayout, {responsive: true});
});
</script>

<?php include 'includes/footer.php'; ?>