Untitled
unknown
plain_text
a year ago
12 kB
16
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformed Table and Chart</title>
<style>
body { font-family: Arial, sans-serif; }
.table-container, .chart-container { margin-top: 20px; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; }
.bar-chart { display: flex; flex-direction: column; width: 100%; }
.bar-container { display: flex; align-items: center; margin: 5px; width:600px;}
.bar-label { width: 100px; font-size: 12px; }
.bar-background { background-color: #eee; height: 18px; flex-grow: 1; position: relative; }
.bar { background-color: navy; height: 100%; position: absolute; }
.bar-value { margin-left: 10px; font-size: 12px; }
</style>
</head>
<body>
<!-- Your original table structure -->
<table id="tblMain" cellspacing="3" cellpadding="3" align="Left" rules="all" border="1" style="background-color:White;border-color:Black;border-width:1px;border-style:solid;font-family:Arial;font-size:Small;">
<tbody><tr>
<td colspan="62" style="background-color:LightGrey;"><b>CPC</b>: DEM_Sapphire_Track Deviation<br><b>Work Centre</b>: WarriorClose WetLine D<br><b>Sample Time</b>: 29/08/2025 08:04:21<br><b>Total Throughput Count</b>: 2571</td>
</tr><tr>
<td style="color:White;background-color:Navy;">I-1</td><td style="color:White;background-color:Navy;">I-2</td><td style="color:White;background-color:Navy;">I-3</td><td style="color:White;background-color:Navy;">I-4</td><td style="color:White;background-color:Navy;">I-5</td><td style="color:White;background-color:Navy;">I-6</td><td style="color:White;background-color:Navy;">J-1</td><td style="color:White;background-color:Navy;">J-2</td><td style="color:White;background-color:Navy;">J-3</td><td style="color:White;background-color:Navy;">J-4</td><td style="color:White;background-color:Navy;">J-5</td><td style="color:White;background-color:Navy;">J-6</td><td style="color:White;background-color:Navy;">K-1</td><td style="color:White;background-color:Navy;">K-2</td><td style="color:White;background-color:Navy;">K-3</td><td style="color:White;background-color:Navy;">K-4</td><td style="color:White;background-color:Navy;">K-5</td><td style="color:White;background-color:Navy;">K-6</td><td style="color:White;background-color:Navy;">L-1</td><td style="color:White;background-color:Navy;">L-2</td><td style="color:White;background-color:Navy;">L-3</td><td style="color:White;background-color:Navy;">L-4</td><td style="color:White;background-color:Navy;">L-5</td><td style="color:White;background-color:Navy;">L-6</td><td style="color:White;background-color:Navy;">M-1</td><td style="color:White;background-color:Navy;">M-2</td><td style="color:White;background-color:Navy;">M-3</td><td style="color:White;background-color:Navy;">M-4</td><td style="color:White;background-color:Navy;">M-5</td><td style="color:White;background-color:Navy;">M-6</td><td style="color:White;background-color:Navy;">N-1</td><td style="color:White;background-color:Navy;">N-2</td><td style="color:White;background-color:Navy;">N-3</td><td style="color:White;background-color:Navy;">N-4</td><td style="color:White;background-color:Navy;">N-5</td><td style="color:White;background-color:Navy;">N-6</td><td style="color:White;background-color:Navy;">O-1</td><td style="color:White;background-color:Navy;">O-2</td><td style="color:White;background-color:Navy;">O-3</td><td style="color:White;background-color:Navy;">O-4</td><td style="color:White;background-color:Navy;">O-5</td><td style="color:White;background-color:Navy;">O-6</td><td style="color:White;background-color:Navy;">P-1</td><td style="color:White;background-color:Navy;">P-2</td><td style="color:White;background-color:Navy;">P-3</td><td style="color:White;background-color:Navy;">P-4</td><td style="color:White;background-color:Navy;">P-5</td><td style="color:White;background-color:Navy;">P-6</td><td style="color:White;background-color:Navy;">Q-1</td><td style="color:White;background-color:Navy;">Q-2</td><td style="color:White;background-color:Navy;">Q-3</td><td style="color:White;background-color:Navy;">Q-4</td><td style="color:White;background-color:Navy;">Q-5</td><td style="color:White;background-color:Navy;">Q-6</td><td style="color:White;background-color:Navy;">R-1</td><td style="color:White;background-color:Navy;">R-2</td><td style="color:White;background-color:Navy;">R-3</td><td style="color:White;background-color:Navy;">R-4</td><td style="color:White;background-color:Navy;">R-5</td><td style="color:White;background-color:Navy;">R-6</td><td style="color:White;background-color:Navy;"> </td><td style="color:White;background-color:Navy;"> </td>
</tr><tr>
<td>0</td><td>0</td><td>2</td><td>0</td><td>0</td><td>1</td><td>1</td><td>2</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>1</td><td>1</td><td>0</td><td>0</td><td>2</td><td>4</td><td>2</td><td>1</td><td>1</td><td>2</td><td>0</td><td>0</td><td>1</td><td>1</td><td>4</td><td>0</td><td>0</td><td>1</td><td>1</td><td>0</td><td>1</td><td>0</td><td>1</td><td>1</td><td>2</td><td>1</td><td>1</td><td>0</td><td>2</td><td>3</td><td>0</td><td>1</td><td>0</td><td>0</td><td>2</td><td>1</td><td>4</td><td>2</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>0</td><td>Total: 57</td><td>2.22%</td>
</tr><tr>
<td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">4.67%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">4.67%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">4.67%</td><td style="background-color:Khaki;">9.33%</td><td style="background-color:Khaki;">4.67%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">4.67%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">9.33%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">4.67%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">4.67%</td><td style="background-color:Khaki;">7.00%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">0.00%</td><td style="background-color:Khaki;">4.67%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">9.33%</td><td style="background-color:Khaki;">4.67%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">2.33%</td><td style="background-color:Khaki;">0.00%</td><td>CPC%: 9.33%</td><td>2.22%</td>
</tr>
</tbody></table>
<div id="result-container"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const table = document.getElementById('tblMain');
const tbody = table.querySelector('tbody');
const headerRow = tbody.querySelector('tr:nth-child(2)');
const countRow = tbody.querySelector('tr:nth-child(3)');
const percentRow = tbody.querySelector('tr:nth-child(4)');
const headers = Array.from(headerRow.querySelectorAll('td'))
.slice(0, -2) // Exclude the "Total" and "2.22%" columns
.map(cell => cell.textContent.trim());
const counts = Array.from(countRow.querySelectorAll('td'))
.slice(0, -2)
.map(cell => parseInt(cell.textContent, 10));
const percentages = Array.from(percentRow.querySelectorAll('td'))
.slice(0, -2)
.map(cell => parseFloat(cell.textContent.trim().replace('%', '')));
// Combine data into a single array of objects
const data = headers.map((header, index) => ({
samplePoint: header,
count: counts[index],
percentage: percentages[index]
}));
// Filter and sort the data
const filteredAndSortedData = data
.filter(item => item.percentage >= 3.00)
.sort((a, b) => b.percentage - a.percentage);
const resultContainer = document.getElementById('result-container');
// Create the vertical table
const tableHtml = `
`;
// Create the bar chart
const maxPercentage = Math.max(...filteredAndSortedData.map(item => item.percentage));
const chartHtml = `
<div class="chart-container">
<div class="bar-chart">
${filteredAndSortedData.map(item => `
<div class="bar-container">
<div class="bar-label">${item.samplePoint} (${item.percentage.toFixed(2)}%)</div>
<div class="bar-background">
<div class="bar" style="width: ${((item.percentage / maxPercentage) * 100).toFixed(2)}%;"></div>
</div>
<div class="bar-value"></div>
</div>
`).join('')}
</div>
</div>
`;
// Add content to the result container
resultContainer.innerHTML = tableHtml + chartHtml;
});
// Hide the original table
const originalTable = document.getElementById('tblMain');
if (originalTable) {
originalTable.style.display = 'none';
}
</script>
</body>
</html>
<div id="heatmap-container" class="table-container"></div>
<style>
.heatmap {
display: grid;
grid-template-columns: repeat(8, 1fr); /* Adjust based on number of columns */
gap: 2px;
margin-top: 20px;
}
.heatmap-cell {
width: 80px; /* Adjust width */
height: 40px; /* Adjust height */
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ddd;
color: white;
font-size: 12px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
// Assuming you have filteredAndSortedData already prepared
const heatmapContainer = document.getElementById('heatmap-container');
const heatmapHtml = `
<div class="heatmap">
${filteredAndSortedData.map(item => `
<div class="heatmap-cell" style="background-color: rgba(0, 0, 255, ${item.percentage / 100});">
${item.samplePoint}<br>${item.count}
</div>
`).join('')}
</div>
`;
heatmapContainer.innerHTML = heatmapHtml;
});
</script>Editor is loading...
Leave a Comment