34987-vm/policy.php

<?php
$page_title = "Policy View";
include 'includes/header.php';
?>

<div class="container mt-5">
    <h1 class="page-title">Policy View</h1>
    <p class="lead mb-5">Aggregated national data for strategic planning and policy making.</p>

    <!-- Main Content Row -->
    <div class="row g-4">
        <!-- Left Column: Heatmap -->
        <div class="col-lg-8">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">National Resilience Heatmap</h5>
                </div>
                <div class="card-body">
                    <div id="india-heatmap" class="chart-container"></div>
                </div>
            </div>
        </div>

        <!-- Right Column: Policy Section & Charts -->
        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">Policy Impact</h5>
                    <p class="text-secondary">From Diagnosis to National Planning.</p>
                    <p>The aggregated data provides insights for resource allocation, pre-emptive maintenance scheduling, and long-term grid fortification strategies. By identifying high-risk zones, policy makers can direct investments to areas with the most critical need.</p>
                    <button class="btn btn-primary w-100"><i class="bi bi-download"></i> Download National Resilience Report</button>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div id="high-risk-chart" class="chart-container" style="min-height: 280px;"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- District-level chart -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div id="district-health-chart" class="chart-container"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', async function() {
    // URL for India GeoJSON data
    const geoJsonUrl = 'https://cdn.jsdelivr.net/gh/udit-001/india-maps-data/geojson/india.geojson';

    try {
        // Fetch GeoJSON
        const response = await fetch(geoJsonUrl);
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
        const indiaGeoJSON = await response.json();

        // Mock data for states
        const stateNames = indiaGeoJSON.features.map(feature => feature.properties.ST_NM);
        const healthData = stateNames.map(name => ({
            state: name,
            health: Math.floor(Math.random() * 50) + 50 // Health score 50-100
        }));

        // 1. Create Choropleth Heatmap
        const mapData = [{
            type: 'choroplethmapbox',
            geojson: indiaGeoJSON,
            locations: healthData.map(d => d.state),
            z: healthData.map(d => d.health),
            featureidkey: 'properties.ST_NM',
            colorscale: 'Viridis',
            reversescale: true,
            marker: { opacity: 0.7 },
            colorbar: { title: 'Health Score' }
        }];

        const mapLayout = {
            mapbox: {
                style: 'carto-positron',
                center: { lat: 20.5937, lon: 78.9629 },
                zoom: 3.5
            },
            margin: { r: 0, t: 0, b: 0, l: 0 }
        };

        Plotly.newPlot('india-heatmap', mapData, mapLayout, {responsive: true});

    } catch (error) {
        console.error("Failed to load GeoJSON data:", error);
        document.getElementById('india-heatmap').innerHTML = '<div class="alert alert-danger">Failed to load map data. Please check the console for details.</div>';
    }

    // 2. High-Risk Transformers Chart
    const riskData = {
        zones: ['North', 'South', 'East', 'West', 'Central'],
        count: [25, 18, 32, 41, 11]
    };
    const highRiskChart = [{
        x: riskData.zones,
        y: riskData.count,
        type: 'bar',
        marker: { color: 'var(--primary)' }
    }];
    const highRiskLayout = {
        title: 'High-Risk Transformers by Zone',
        xaxis: { title: 'Zone' },
        yaxis: { title: 'Number of Units' },
        margin: { t: 40, l: 50, r: 20, b: 40 }
    };
    Plotly.newPlot('high-risk-chart', highRiskChart, {responsive: true});

    // 3. Average Health by District Chart
    const districtData = {
        districts: ['Mumbai', 'Pune', 'Nagpur', 'Thane', 'Nashik', 'Aurangabad', 'Solapur', 'Amravati'],
        health: [85, 78, 92, 81, 76, 88, 72, 90]
    };
    const districtHealthChart = [{
        x: districtData.districts,
        y: districtData.health,
        type: 'line',
        marker: { color: 'var(--secondary)' }
    }];
    const districtHealthLayout = {
        title: 'Average Health by District (Sample)',
        xaxis: { title: 'District' },
        yaxis: { title: 'Average Health Score' },
        margin: { t: 40, l: 50, r: 20, b: 40 }
    };
    Plotly.newPlot('district-health-chart', districtHealthChart, {responsive: true});
});
</script>

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