|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>nvline</title> |
|
<style> |
|
body { |
|
background-color: #121212; |
|
color: #ffffff; |
|
font-family: Arial, sans-serif; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
height: 100vh; |
|
margin: 0; |
|
padding: 20px; |
|
box-sizing: border-box; |
|
} |
|
|
|
h1 { |
|
margin-bottom: 10px; |
|
font-size: 24px; |
|
} |
|
|
|
#chart-container { |
|
width: 90%; |
|
height: 80%; |
|
} |
|
|
|
#chart { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
.axis-label { |
|
fill: #ffffff; |
|
} |
|
|
|
.tooltip { |
|
position: absolute; |
|
background: rgba(0, 0, 0, 0.7); |
|
color: #fff; |
|
padding: 5px; |
|
border-radius: 3px; |
|
pointer-events: none; |
|
font-size: 12px; |
|
} |
|
|
|
.grid line { |
|
stroke: #444; |
|
} |
|
|
|
.grid path { |
|
stroke: none; |
|
} |
|
|
|
|
|
input[type="file"] { |
|
display: none; |
|
} |
|
|
|
.custom-file-upload { |
|
border: 1px solid #ccc; |
|
display: inline-block; |
|
padding: 6px 12px; |
|
cursor: pointer; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<h1>Import nvline JSONL File and Display Memory Usage</h1> |
|
|
|
|
|
<label for="fileInput" class="custom-file-upload"> |
|
Add nvline JSONL File |
|
</label> |
|
<input type="file" id="fileInput" accept=".jsonl"> |
|
|
|
<div id="chart-container"> |
|
<svg id="chart"></svg> |
|
</div> |
|
<div id="tooltip" class="tooltip" style="display: none;"></div> |
|
|
|
<script> |
|
document.getElementById('fileInput').addEventListener('change', handleFile, false); |
|
|
|
function handleFile(event) { |
|
const file = event.target.files[0]; |
|
const reader = new FileReader(); |
|
reader.onload = function (event) { |
|
const lines = event.target.result.split('\n').filter(line => line.trim() !== ''); |
|
const data = lines.map(line => JSON.parse(line)); |
|
drawChart(data); |
|
}; |
|
reader.readAsText(file); |
|
} |
|
|
|
function drawChart(data) { |
|
const svg = document.getElementById('chart'); |
|
svg.innerHTML = ''; |
|
const width = svg.clientWidth; |
|
const height = svg.clientHeight; |
|
const padding = 30; |
|
const xScale = width / (data.length - 1); |
|
const yMax = Math.max(...data.map(d => d.memory_total)); |
|
const yScale = (height - padding * 2) / yMax; |
|
|
|
const line = (points) => points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0]},${p[1]}`).join(' '); |
|
|
|
const memoryUsedPoints = data.map((d, i) => [i * xScale, height - padding - d.memory_used * yScale]); |
|
const memoryFreePoints = data.map((d, i) => [i * xScale, height - padding - d.memory_free * yScale]); |
|
const memoryTotalPoints = data.map((d, i) => [i * xScale, height - padding - d.memory_total * yScale]); |
|
|
|
const gridX = document.createElementNS('http://www.w3.org/2000/svg', 'g'); |
|
const gridY = document.createElementNS('http://www.w3.org/2000/svg', 'g'); |
|
|
|
for (let i = 0; i < data.length; i++) { |
|
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); |
|
line.setAttribute('x1', i * xScale); |
|
line.setAttribute('y1', height - padding); |
|
line.setAttribute('x2', i * xScale); |
|
line.setAttribute('y2', padding); |
|
line.setAttribute('class', 'grid'); |
|
line.setAttribute('stroke', '#444'); |
|
gridX.appendChild(line); |
|
} |
|
|
|
for (let i = 0; i <= yMax; i += yMax / 10) { |
|
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); |
|
line.setAttribute('x1', 0); |
|
line.setAttribute('y1', height - padding - i * yScale); |
|
line.setAttribute('x2', width); |
|
line.setAttribute('y2', height - padding - i * yScale); |
|
line.setAttribute('class', 'grid'); |
|
line.setAttribute('stroke', '#444'); |
|
gridY.appendChild(line); |
|
} |
|
|
|
svg.appendChild(gridX); |
|
svg.appendChild(gridY); |
|
|
|
const pathUsed = document.createElementNS('http://www.w3.org/2000/svg', 'path'); |
|
pathUsed.setAttribute('d', line(memoryUsedPoints)); |
|
pathUsed.setAttribute('stroke', 'red'); |
|
pathUsed.setAttribute('fill', 'none'); |
|
svg.appendChild(pathUsed); |
|
|
|
const pathFree = document.createElementNS('http://www.w3.org/2000/svg', 'path'); |
|
pathFree.setAttribute('d', line(memoryFreePoints)); |
|
pathFree.setAttribute('stroke', 'green'); |
|
pathFree.setAttribute('fill', 'none'); |
|
svg.appendChild(pathFree); |
|
|
|
const pathTotal = document.createElementNS('http://www.w3.org/2000/svg', 'path'); |
|
pathTotal.setAttribute('d', line(memoryTotalPoints)); |
|
pathTotal.setAttribute('stroke', 'blue'); |
|
pathTotal.setAttribute('fill', 'none'); |
|
svg.appendChild(pathTotal); |
|
|
|
memoryUsedPoints.forEach((point, i) => { |
|
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); |
|
circle.setAttribute('cx', point[0]); |
|
circle.setAttribute('cy', point[1]); |
|
circle.setAttribute('r', 3); |
|
circle.setAttribute('fill', 'red'); |
|
circle.setAttribute('class', 'dot dot-used'); |
|
circle.setAttribute('data-index', i); |
|
svg.appendChild(circle); |
|
}); |
|
|
|
memoryFreePoints.forEach((point, i) => { |
|
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); |
|
circle.setAttribute('cx', point[0]); |
|
circle.setAttribute('cy', point[1]); |
|
circle.setAttribute('r', 3); |
|
circle.setAttribute('fill', 'green'); |
|
circle.setAttribute('class', 'dot dot-free'); |
|
circle.setAttribute('data-index', i); |
|
svg.appendChild(circle); |
|
}); |
|
|
|
memoryTotalPoints.forEach((point, i) => { |
|
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); |
|
circle.setAttribute('cx', point[0]); |
|
circle.setAttribute('cy', point[1]); |
|
circle.setAttribute('r', 3); |
|
circle.setAttribute('fill', 'blue'); |
|
circle.setAttribute('class', 'dot dot-total'); |
|
circle.setAttribute('data-index', i); |
|
svg.appendChild(circle); |
|
}); |
|
|
|
const xAxisLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text'); |
|
xAxisLabel.setAttribute('x', width / 2); |
|
xAxisLabel.setAttribute('y', height - 10); |
|
xAxisLabel.setAttribute('class', 'axis-label'); |
|
xAxisLabel.setAttribute('text-anchor', 'middle'); |
|
xAxisLabel.textContent = 'Data Points'; |
|
svg.appendChild(xAxisLabel); |
|
|
|
const yAxisLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text'); |
|
yAxisLabel.setAttribute('x', -height / 2); |
|
yAxisLabel.setAttribute('y', 20); |
|
yAxisLabel.setAttribute('class', 'axis-label'); |
|
yAxisLabel.setAttribute('text-anchor', 'middle'); |
|
yAxisLabel.setAttribute('transform', 'rotate(-90)'); |
|
yAxisLabel.textContent = 'Memory Usage'; |
|
svg.appendChild(yAxisLabel); |
|
|
|
const tooltip = document.getElementById('tooltip'); |
|
svg.addEventListener('mousemove', (event) => { |
|
const rect = svg.getBoundingClientRect(); |
|
const x = event.clientX - rect.left; |
|
const index = Math.round(x / xScale); |
|
|
|
document.querySelectorAll('.dot').forEach(dot => dot.style.display = 'none'); |
|
|
|
if (index >= 0 && index < data.length) { |
|
const memoryUsed = data[index].memory_used; |
|
const memoryFree = data[index].memory_free; |
|
const memoryTotal = data[index].memory_total; |
|
const timestamp = new Date(1000 * data[index].timestamp).toISOString(); |
|
|
|
tooltip.style.display = 'block'; |
|
tooltip.style.left = event.pageX + 10 + 'px'; |
|
tooltip.style.top = event.pageY - 10 + 'px'; |
|
tooltip.innerHTML = `Total: ${memoryTotal} Used: ${memoryUsed}<br>Free: ${memoryFree}<br> Timestamp: ${timestamp}`; |
|
|
|
document.querySelector(`.dot-used[data-index='${index}']`).style.display = 'block'; |
|
document.querySelector(`.dot-free[data-index='${index}']`).style.display = 'block'; |
|
document.querySelector(`.dot-total[data-index='${index}']`).style.display = 'block'; |
|
} else { |
|
tooltip.style.display = 'none'; |
|
} |
|
}); |
|
|
|
svg.addEventListener('mouseout', () => { |
|
tooltip.style.display = 'none'; |
|
document.querySelectorAll('.dot').forEach(dot => dot.style.display = 'none'); |
|
}); |
|
} |
|
</script> |
|
</body> |
|
|
|
</html> |
