chad0218/line-efficiency-mastermind
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Line Efficiency Visualizer</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>10 <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>11<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>12 <script src="https://unpkg.com/feather-icons"></script>13</head>14<body class="bg-gray-50">15 <custom-navbar></custom-navbar>16 17 <main class="container mx-auto px-4 py-8">18 <div class="bg-white rounded-xl shadow-md p-6">19 <h1 class="text-2xl font-bold text-gray-800 mb-6">Line vs. MHrs Relationship</h1>20 <div class="w-full h-96">21 <canvas id="lineChart"></canvas>22 </div>23 <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">24 <div class="bg-gray-50 p-4 rounded-lg">25 <h2 class="text-lg font-semibold mb-2">Highest MHrs</h2>26 <p class="text-gray-700">Line 150: 173 MHrs</p>27 </div>28 <div class="bg-gray-50 p-4 rounded-lg">29 <h2 class="text-lg font-semibold mb-2">Lowest MHrs</h2>30 <p class="text-gray-700">Line 230: 2 MHrs</p>31 </div>32 </div>33 </div>34 </main>35 36 <custom-footer></custom-footer>37 38 <script src="components/navbar.js"></script>39 <script src="components/footer.js"></script>40 <script src="script.js"></script>41 <script>42 feather.replace();43 44 // Register Chart.js plugins45 Chart.register(ChartDataLabels);46 47 // Chart initialization48document.addEventListener('DOMContentLoaded', function() {49 const ctx = document.getElementById('lineChart').getContext('2d');50 const lineChart = new Chart(ctx, {51 type: 'bar',52 data: {53 // Sort data from highest to lowest MHrs54 labels: [150, 180, 210, 231, 120, 110, 220, 250, 251, 140, 200, 370, 330, 320, 260, 170, 380, 111, 230],55 datasets: [{56 label: 'MHrs',57 data: [173, 93.1, 52.3, 31, 29.3, 28.9, 26.2, 25.9, 25.1, 20.4, 20, 11, 10.1, 17.4, 4.8, 8.6, 7.8, 5, 2],58backgroundColor: 'rgba(79, 70, 229, 0.7)',59 borderColor: 'rgba(79, 70, 229, 1)',60 borderWidth: 161 }]62 },63 options: {64 responsive: true,65 maintainAspectRatio: false,66 plugins: {67 datalabels: {68 anchor: 'end',69 align: 'top',70 color: '#000',71 font: {72 weight: 'bold'73 },74 formatter: function(value) {75 return value;76 }77 },78scales: {79 y: {80 beginAtZero: true,81 title: {82 display: true,83 text: 'MHrs',84 font: {85 weight: 'bold'86 }87 }88 },89 x: {90 title: {91 display: true,92 text: 'Line Number',93 font: {94 weight: 'bold'95 }96 }97 }98 },99 plugins: {100 legend: {101 display: false102 },103 tooltip: {104 callbacks: {105 label: function(context) {106 return `Line ${context.label}: ${context.raw} MHrs`;107 }108 }109 }110 }111 }112 });113 });114 </script>115<script src="https://deepsite.hf.co/deepsite-badge.js"></script>116</body>117</html>