| <!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> |
