422 lines
16 KiB
JavaScript
422 lines
16 KiB
JavaScript
/**
|
|
* ASCIIBarChart - A dynamic ASCII-based vertical bar chart renderer
|
|
*
|
|
* Creates real-time animated bar charts using monospaced characters (X)
|
|
* with automatic scaling, labels, and responsive font sizing.
|
|
*/
|
|
class ASCIIBarChart {
|
|
/**
|
|
* Create a new ASCII bar chart
|
|
* @param {string} containerId - The ID of the HTML element to render the chart in
|
|
* @param {Object} options - Configuration options
|
|
* @param {number} [options.maxHeight=20] - Maximum height of the chart in rows
|
|
* @param {number} [options.maxDataPoints=30] - Maximum number of data columns before scrolling
|
|
* @param {string} [options.title=''] - Chart title (displayed centered at top)
|
|
* @param {string} [options.xAxisLabel=''] - X-axis label (displayed centered at bottom)
|
|
* @param {string} [options.yAxisLabel=''] - Y-axis label (displayed vertically on left)
|
|
* @param {boolean} [options.autoFitWidth=true] - Automatically adjust font size to fit container width
|
|
* @param {boolean} [options.useBinMode=false] - Enable time bin mode for data aggregation
|
|
* @param {number} [options.binDuration=10000] - Duration of each time bin in milliseconds (10 seconds default)
|
|
* @param {string} [options.xAxisLabelFormat='elapsed'] - X-axis label format: 'elapsed', 'bins', 'timestamps', 'ranges'
|
|
*/
|
|
constructor(containerId, options = {}) {
|
|
this.container = document.getElementById(containerId);
|
|
this.data = [];
|
|
this.maxHeight = options.maxHeight || 20;
|
|
this.maxDataPoints = options.maxDataPoints || 30;
|
|
this.totalDataPoints = 0; // Track total number of data points added
|
|
this.title = options.title || '';
|
|
this.xAxisLabel = options.xAxisLabel || '';
|
|
this.yAxisLabel = options.yAxisLabel || '';
|
|
this.autoFitWidth = options.autoFitWidth !== false; // Default to true
|
|
|
|
// Time bin configuration
|
|
this.useBinMode = options.useBinMode !== false; // Default to true
|
|
this.binDuration = options.binDuration || 4000; // 4 seconds default
|
|
this.xAxisLabelFormat = options.xAxisLabelFormat || 'elapsed';
|
|
|
|
// Time bin data structures
|
|
this.bins = [];
|
|
this.currentBinIndex = -1;
|
|
this.binStartTime = null;
|
|
this.binCheckInterval = null;
|
|
this.chartStartTime = Date.now();
|
|
|
|
// Set up resize observer if auto-fit is enabled
|
|
if (this.autoFitWidth) {
|
|
this.resizeObserver = new ResizeObserver(() => {
|
|
this.adjustFontSize();
|
|
});
|
|
this.resizeObserver.observe(this.container);
|
|
}
|
|
|
|
// Initialize first bin if bin mode is enabled
|
|
if (this.useBinMode) {
|
|
this.initializeBins();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Add a new data point to the chart
|
|
* @param {number} value - The numeric value to add
|
|
*/
|
|
addValue(value) {
|
|
if (this.useBinMode) {
|
|
// Time bin mode: increment count in current active bin
|
|
this.checkBinRotation(); // Ensure we have an active bin
|
|
this.bins[this.currentBinIndex].count++;
|
|
this.totalDataPoints++;
|
|
} else {
|
|
// Legacy mode: add individual values
|
|
this.data.push(value);
|
|
this.totalDataPoints++;
|
|
|
|
// Keep only the most recent data points
|
|
if (this.data.length > this.maxDataPoints) {
|
|
this.data.shift();
|
|
}
|
|
}
|
|
|
|
this.render();
|
|
this.updateInfo();
|
|
}
|
|
|
|
/**
|
|
* Clear all data from the chart
|
|
*/
|
|
clear() {
|
|
this.data = [];
|
|
this.totalDataPoints = 0;
|
|
|
|
if (this.useBinMode) {
|
|
this.bins = [];
|
|
this.currentBinIndex = -1;
|
|
this.binStartTime = null;
|
|
this.initializeBins();
|
|
}
|
|
|
|
this.render();
|
|
this.updateInfo();
|
|
}
|
|
|
|
/**
|
|
* Calculate the width of the chart in characters
|
|
* @returns {number} The chart width in characters
|
|
* @private
|
|
*/
|
|
getChartWidth() {
|
|
let dataLength = this.maxDataPoints; // Always use maxDataPoints for consistent width
|
|
|
|
if (dataLength === 0) return 50; // Default width for empty chart
|
|
|
|
const yAxisPadding = this.yAxisLabel ? 2 : 0;
|
|
const yAxisNumbers = 3; // Width of Y-axis numbers
|
|
const separator = 1; // The '|' character
|
|
const dataWidth = dataLength * 2; // Each column is 2 characters wide
|
|
const padding = 1; // Extra padding
|
|
|
|
const totalWidth = yAxisPadding + yAxisNumbers + separator + dataWidth + padding;
|
|
|
|
// Only log when width changes
|
|
if (this.lastChartWidth !== totalWidth) {
|
|
console.log('getChartWidth changed:', { dataLength, totalWidth, previous: this.lastChartWidth });
|
|
this.lastChartWidth = totalWidth;
|
|
}
|
|
|
|
return totalWidth;
|
|
}
|
|
|
|
/**
|
|
* Adjust font size to fit container width
|
|
* @private
|
|
*/
|
|
adjustFontSize() {
|
|
if (!this.autoFitWidth) return;
|
|
|
|
const containerWidth = this.container.clientWidth;
|
|
const chartWidth = this.getChartWidth();
|
|
|
|
if (chartWidth === 0) return;
|
|
|
|
// Calculate optimal font size
|
|
// For monospace fonts, character width is approximately 0.6 * font size
|
|
const charWidthRatio = 0.6;
|
|
const padding = 40; // Account for container padding
|
|
const availableWidth = containerWidth - padding;
|
|
const optimalFontSize = Math.floor((availableWidth / chartWidth) / charWidthRatio);
|
|
|
|
// Set reasonable bounds (min 4px, max 20px)
|
|
const fontSize = Math.max(4, Math.min(20, optimalFontSize));
|
|
|
|
// Only log when font size changes
|
|
if (this.lastFontSize !== fontSize) {
|
|
console.log('fontSize changed:', { containerWidth, chartWidth, fontSize, previous: this.lastFontSize });
|
|
this.lastFontSize = fontSize;
|
|
}
|
|
|
|
this.container.style.fontSize = fontSize + 'px';
|
|
this.container.style.lineHeight = '1.0';
|
|
}
|
|
|
|
/**
|
|
* Render the chart to the container
|
|
* @private
|
|
*/
|
|
render() {
|
|
let dataToRender = [];
|
|
let maxValue = 0;
|
|
let minValue = 0;
|
|
let valueRange = 0;
|
|
|
|
if (this.useBinMode) {
|
|
// Bin mode: render bin counts
|
|
if (this.bins.length === 0) {
|
|
this.container.textContent = 'No data yet. Click Start to begin.';
|
|
return;
|
|
}
|
|
// Only render the most recent bins up to maxDataPoints
|
|
// Reverse the order so the most recent (active) bin is on the left
|
|
const startIndex = Math.max(0, this.bins.length - this.maxDataPoints);
|
|
const recentBins = this.bins.slice(startIndex);
|
|
dataToRender = recentBins.reverse().map(bin => bin.count); // Reverse so active bin is first (leftmost)
|
|
maxValue = Math.max(...dataToRender);
|
|
minValue = Math.min(...dataToRender);
|
|
valueRange = maxValue - minValue;
|
|
} else {
|
|
// Legacy mode: render individual values
|
|
if (this.data.length === 0) {
|
|
this.container.textContent = 'No data yet. Click Start to begin.';
|
|
return;
|
|
}
|
|
dataToRender = this.data;
|
|
maxValue = Math.max(...this.data);
|
|
minValue = Math.min(...this.data);
|
|
valueRange = maxValue - minValue;
|
|
}
|
|
|
|
let output = '';
|
|
const scale = this.maxHeight;
|
|
|
|
// Calculate scaling factor: each X represents at least 1 count
|
|
const maxCount = Math.max(...dataToRender);
|
|
const scaleFactor = Math.max(1, Math.ceil(maxCount / scale)); // 1 X = scaleFactor counts
|
|
const scaledMax = Math.ceil(maxCount / scaleFactor) * scaleFactor;
|
|
|
|
// Calculate Y-axis label width (for vertical text)
|
|
const yLabelWidth = this.yAxisLabel ? 2 : 0;
|
|
const yAxisPadding = this.yAxisLabel ? ' ' : '';
|
|
|
|
// Add title if provided (centered)
|
|
if (this.title) {
|
|
const chartWidth = 4 + this.maxDataPoints * 2; // Y-axis numbers + data columns
|
|
const titlePadding = Math.floor((chartWidth - this.title.length) / 2);
|
|
output += yAxisPadding + ' '.repeat(Math.max(0, titlePadding)) + this.title + '\n\n';
|
|
}
|
|
|
|
// Draw from top to bottom
|
|
for (let row = scale; row > 0; row--) {
|
|
let line = '';
|
|
|
|
// Add vertical Y-axis label character
|
|
if (this.yAxisLabel) {
|
|
const L = this.yAxisLabel.length;
|
|
const startRow = Math.floor((scale - L) / 2) + 1;
|
|
const relativeRow = scale - row + 1; // 1 at top, scale at bottom
|
|
if (relativeRow >= startRow && relativeRow < startRow + L) {
|
|
const labelIndex = relativeRow - startRow;
|
|
line += this.yAxisLabel[labelIndex] + ' ';
|
|
} else {
|
|
line += ' ';
|
|
}
|
|
}
|
|
|
|
// Calculate the actual count value this row represents (0 at bottom, increasing upward)
|
|
const rowCount = (row - 1) * scaleFactor;
|
|
|
|
// Add Y-axis label (show actual count values)
|
|
line += String(rowCount).padStart(3, ' ') + ' |';
|
|
|
|
// Draw each column
|
|
for (let i = 0; i < dataToRender.length; i++) {
|
|
const count = dataToRender[i];
|
|
const scaledHeight = Math.ceil(count / scaleFactor);
|
|
|
|
if (scaledHeight >= row) {
|
|
line += ' X';
|
|
} else {
|
|
line += ' ';
|
|
}
|
|
}
|
|
|
|
output += line + '\n';
|
|
}
|
|
|
|
// Draw X-axis
|
|
output += yAxisPadding + ' +' + '-'.repeat(this.maxDataPoints * 2) + '\n';
|
|
|
|
// Draw X-axis labels based on mode and format
|
|
let xAxisLabels = yAxisPadding + ' ';
|
|
for (let i = 0; i < this.maxDataPoints; i++) {
|
|
if (i % 5 === 0) {
|
|
let label = '';
|
|
if (this.useBinMode) {
|
|
// For bin mode, show labels for all possible positions
|
|
// i=0 is leftmost (most recent), i=maxDataPoints-1 is rightmost (oldest)
|
|
const elapsedSec = i * Math.floor(this.binDuration / 1000);
|
|
label = String(elapsedSec).padStart(2, ' ') + 's';
|
|
} else {
|
|
// For legacy mode, show data point numbers
|
|
const startIndex = Math.max(1, this.totalDataPoints - this.maxDataPoints + 1);
|
|
label = String(startIndex + i).padStart(2, ' ');
|
|
}
|
|
xAxisLabels += label;
|
|
} else {
|
|
xAxisLabels += ' ';
|
|
}
|
|
}
|
|
output += xAxisLabels + '\n';
|
|
|
|
// Add X-axis label if provided
|
|
if (this.xAxisLabel) {
|
|
const labelPadding = Math.floor((this.maxDataPoints * 2 - this.xAxisLabel.length) / 2);
|
|
output += '\n' + yAxisPadding + ' ' + ' '.repeat(Math.max(0, labelPadding)) + this.xAxisLabel + '\n';
|
|
}
|
|
|
|
this.container.textContent = output;
|
|
|
|
// Adjust font size to fit width (only once at initialization)
|
|
if (this.autoFitWidth) {
|
|
this.adjustFontSize();
|
|
}
|
|
|
|
// Update the external info display
|
|
if (this.useBinMode) {
|
|
const binCounts = this.bins.map(bin => bin.count);
|
|
const scaleFactor = Math.max(1, Math.ceil(maxValue / scale));
|
|
document.getElementById('values').textContent = `[${dataToRender.join(', ')}]`;
|
|
document.getElementById('max-value').textContent = maxValue;
|
|
document.getElementById('scale').textContent = `Min: ${minValue}, Max: ${maxValue}, 1X=${scaleFactor} counts`;
|
|
} else {
|
|
document.getElementById('values').textContent = `[${this.data.join(', ')}]`;
|
|
document.getElementById('max-value').textContent = maxValue;
|
|
document.getElementById('scale').textContent = `Min: ${minValue}, Max: ${maxValue}, Height: ${scale}`;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Update the info display
|
|
* @private
|
|
*/
|
|
updateInfo() {
|
|
if (this.useBinMode) {
|
|
const totalCount = this.bins.reduce((sum, bin) => sum + bin.count, 0);
|
|
document.getElementById('count').textContent = totalCount;
|
|
} else {
|
|
document.getElementById('count').textContent = this.data.length;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Initialize the bin system
|
|
* @private
|
|
*/
|
|
initializeBins() {
|
|
this.bins = [];
|
|
this.currentBinIndex = -1;
|
|
this.binStartTime = null;
|
|
this.chartStartTime = Date.now();
|
|
|
|
// Create first bin
|
|
this.rotateBin();
|
|
|
|
// Set up automatic bin rotation check
|
|
this.binCheckInterval = setInterval(() => {
|
|
this.checkBinRotation();
|
|
}, 100); // Check every 100ms for responsiveness
|
|
}
|
|
|
|
/**
|
|
* Check if current bin should rotate and create new bin if needed
|
|
* @private
|
|
*/
|
|
checkBinRotation() {
|
|
if (!this.useBinMode || !this.binStartTime) return;
|
|
|
|
const now = Date.now();
|
|
if ((now - this.binStartTime) >= this.binDuration) {
|
|
this.rotateBin();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Rotate to a new bin, finalizing the current one
|
|
*/
|
|
rotateBin() {
|
|
// Finalize current bin if it exists
|
|
if (this.currentBinIndex >= 0) {
|
|
this.bins[this.currentBinIndex].isActive = false;
|
|
}
|
|
|
|
// Create new bin
|
|
const newBin = {
|
|
startTime: Date.now(),
|
|
count: 0,
|
|
isActive: true
|
|
};
|
|
|
|
this.bins.push(newBin);
|
|
this.currentBinIndex = this.bins.length - 1;
|
|
this.binStartTime = newBin.startTime;
|
|
|
|
// Keep only the most recent bins
|
|
if (this.bins.length > this.maxDataPoints) {
|
|
this.bins.shift();
|
|
this.currentBinIndex--;
|
|
}
|
|
|
|
// Ensure currentBinIndex points to the last bin (the active one)
|
|
this.currentBinIndex = this.bins.length - 1;
|
|
|
|
// Force a render to update the display immediately
|
|
this.render();
|
|
this.updateInfo();
|
|
}
|
|
|
|
/**
|
|
* Format X-axis label for a bin based on the configured format
|
|
* @param {number} binIndex - Index of the bin
|
|
* @returns {string} Formatted label
|
|
* @private
|
|
*/
|
|
formatBinLabel(binIndex) {
|
|
const bin = this.bins[binIndex];
|
|
if (!bin) return ' ';
|
|
|
|
switch (this.xAxisLabelFormat) {
|
|
case 'bins':
|
|
return String(binIndex + 1).padStart(2, ' ');
|
|
|
|
case 'timestamps':
|
|
const time = new Date(bin.startTime);
|
|
return time.toLocaleTimeString('en-US', {
|
|
hour12: false,
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit'
|
|
}).replace(/:/g, '');
|
|
|
|
case 'ranges':
|
|
const startSec = Math.floor((bin.startTime - this.chartStartTime) / 1000);
|
|
const endSec = startSec + Math.floor(this.binDuration / 1000);
|
|
return `${startSec}-${endSec}`;
|
|
|
|
case 'elapsed':
|
|
default:
|
|
// For elapsed time, always show time relative to the first bin (index 0)
|
|
// This keeps the leftmost label as 0s and increases to the right
|
|
const firstBinTime = this.bins[0] ? this.bins[0].startTime : this.chartStartTime;
|
|
const elapsedSec = Math.floor((bin.startTime - firstBinTime) / 1000);
|
|
return String(elapsedSec).padStart(2, ' ') + 's';
|
|
}
|
|
}
|
|
} |