laantungir/text_graph
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change adValue for always summing up values received

Browse Source
This commit is contained in:
Your Name
2025-10-21 11:23:23 -04:00
parent f46a1c910b
commit 5f456c0d0b
1 changed files with 94 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
text_graph.js
View File

@@ -20,22 +20,22 @@ class ASCIIBarChart {
* @param {string} [options.xAxisLabelFormat='elapsed'] - X-axis label format: 'elapsed', 'bins', 'timestamps', 'ranges' * @param {string} [options.xAxisLabelFormat='elapsed'] - X-axis label format: 'elapsed', 'bins', 'timestamps', 'ranges'
* @param {boolean} [options.debug=false] - Enable debug logging * @param {boolean} [options.debug=false] - Enable debug logging
*/ */
constructor(containerId, options = {}) { constructor(containerId, options = {}) {
this.container = document.getElementById(containerId); this.container = document.getElementById(containerId);
this.data = []; this.data = [];
this.maxHeight = options.maxHeight || 20; this.maxHeight = options.maxHeight || 20;
this.maxDataPoints = options.maxDataPoints || 30; this.maxDataPoints = options.maxDataPoints || 30;
this.totalDataPoints = 0; // Track total number of data points added this.totalDataPoints = 0; // Track total number of data points added
this.title = options.title || ''; this.title = options.title || '';
this.xAxisLabel = options.xAxisLabel || ''; this.xAxisLabel = options.xAxisLabel || '';
this.yAxisLabel = options.yAxisLabel || ''; this.yAxisLabel = options.yAxisLabel || '';
this.autoFitWidth = options.autoFitWidth !== false; // Default to true this.autoFitWidth = options.autoFitWidth !== false; // Default to true
this.debug = options.debug || false; // Debug logging option this.debug = options.debug || false; // Debug logging option
// Time bin configuration // Time bin configuration
this.useBinMode = options.useBinMode !== false; // Default to true this.useBinMode = options.useBinMode !== false; // Default to true
this.binDuration = options.binDuration || 4000; // 4 seconds default this.binDuration = options.binDuration || 4000; // 4 seconds default
this.xAxisLabelFormat = options.xAxisLabelFormat || 'elapsed'; this.xAxisLabelFormat = options.xAxisLabelFormat || 'elapsed';
// Time bin data structures // Time bin data structures
this.bins = []; this.bins = [];
@@ -63,21 +63,11 @@ class ASCIIBarChart {
* @param {number} value - The numeric value to add * @param {number} value - The numeric value to add
*/ */
addValue(value) { 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 // Time bin mode: increment count in current active bin
if (this.data.length > this.maxDataPoints) { this.checkBinRotation(); // Ensure we have an active bin
this.data.shift(); this.bins[this.currentBinIndex].count++;
} this.totalDataPoints++;
}
this.render(); this.render();
this.updateInfo(); this.updateInfo();
@@ -121,10 +111,10 @@ class ASCIIBarChart {
const totalWidth = yAxisPadding + yAxisNumbers + separator + dataWidth + padding; const totalWidth = yAxisPadding + yAxisNumbers + separator + dataWidth + padding;
// Only log when width changes // Only log when width changes
if (this.debug && this.lastChartWidth !== totalWidth) { if (this.debug && this.lastChartWidth !== totalWidth) {
console.log('getChartWidth changed:', { dataLength, totalWidth, previous: this.lastChartWidth }); console.log('getChartWidth changed:', { dataLength, totalWidth, previous: this.lastChartWidth });
this.lastChartWidth = totalWidth; this.lastChartWidth = totalWidth;
} }
return totalWidth; return totalWidth;
} }
@@ -153,10 +143,10 @@ class ASCIIBarChart {
const fontSize = Math.max(4, Math.min(20, optimalFontSize)); const fontSize = Math.max(4, Math.min(20, optimalFontSize));
// Only log when font size changes // Only log when font size changes
if (this.debug && this.lastFontSize !== fontSize) { if (this.debug && this.lastFontSize !== fontSize) {
console.log('fontSize changed:', { containerWidth, chartWidth, fontSize, previous: this.lastFontSize }); console.log('fontSize changed:', { containerWidth, chartWidth, fontSize, previous: this.lastFontSize });
this.lastFontSize = fontSize; this.lastFontSize = fontSize;
} }
this.container.style.fontSize = fontSize + 'px'; this.container.style.fontSize = fontSize + 'px';
this.container.style.lineHeight = '1.0'; this.container.style.lineHeight = '1.0';
@@ -223,12 +213,12 @@ class ASCIIBarChart {
const yAxisPadding = this.yAxisLabel ? ' ' : ''; const yAxisPadding = this.yAxisLabel ? ' ' : '';
// Add title if provided (centered) // Add title if provided (centered)
if (this.title) { if (this.title) {
// const chartWidth = 4 + this.maxDataPoints * 2; // Y-axis numbers + data columns // TEMP: commented for no-space test // const chartWidth = 4 + this.maxDataPoints * 2; // Y-axis numbers + data columns // TEMP: commented for no-space test
const chartWidth = 4 + this.maxDataPoints; // Y-axis numbers + data columns // TEMP: adjusted for no-space columns const chartWidth = 4 + this.maxDataPoints; // Y-axis numbers + data columns // TEMP: adjusted for no-space columns
const titlePadding = Math.floor((chartWidth - this.title.length) / 2); const titlePadding = Math.floor((chartWidth - this.title.length) / 2);
output += yAxisPadding + ' '.repeat(Math.max(0, titlePadding)) + this.title + '\n\n'; output += yAxisPadding + ' '.repeat(Math.max(0, titlePadding)) + this.title + '\n\n';
} }
// Draw from top to bottom // Draw from top to bottom
for (let row = scale; row > 0; row--) { for (let row = scale; row > 0; row--) {
@@ -271,75 +261,75 @@ class ASCIIBarChart {
} }
// Draw X-axis // Draw X-axis
// output += yAxisPadding + ' +' + '-'.repeat(this.maxDataPoints * 2) + '\n'; // TEMP: commented out for no-space test // output += yAxisPadding + ' +' + '-'.repeat(this.maxDataPoints * 2) + '\n'; // TEMP: commented out for no-space test
output += yAxisPadding + ' +' + '-'.repeat(this.maxDataPoints) + '\n'; // TEMP: back to original length output += yAxisPadding + ' +' + '-'.repeat(this.maxDataPoints) + '\n'; // TEMP: back to original length
// Draw X-axis labels based on mode and format // Draw X-axis labels based on mode and format
let xAxisLabels = yAxisPadding + ' '; // Initial padding to align with X-axis let xAxisLabels = yAxisPadding + ' '; // Initial padding to align with X-axis
// Determine label interval (every 5 columns) // Determine label interval (every 5 columns)
const labelInterval = 5; const labelInterval = 5;
// Generate all labels first and store in array // Generate all labels first and store in array
let labels = []; let labels = [];
for (let i = 0; i < this.maxDataPoints; i++) { for (let i = 0; i < this.maxDataPoints; i++) {
if (i % labelInterval === 0) { if (i % labelInterval === 0) {
let label = ''; let label = '';
if (this.useBinMode) { if (this.useBinMode) {
// For bin mode, show labels for all possible positions // For bin mode, show labels for all possible positions
// i=0 is leftmost (most recent), i=maxDataPoints-1 is rightmost (oldest) // i=0 is leftmost (most recent), i=maxDataPoints-1 is rightmost (oldest)
const elapsedSec = (i * this.binDuration) / 1000; const elapsedSec = (i * this.binDuration) / 1000;
// Format with appropriate precision for sub-second bins // Format with appropriate precision for sub-second bins
if (this.binDuration < 1000) { if (this.binDuration < 1000) {
// Show decimal seconds for sub-second bins // Show decimal seconds for sub-second bins
label = elapsedSec.toFixed(1) + 's'; label = elapsedSec.toFixed(1) + 's';
} else { } else {
// Show whole seconds for 1+ second bins // Show whole seconds for 1+ second bins
label = String(Math.round(elapsedSec)) + 's'; label = String(Math.round(elapsedSec)) + 's';
} }
} else { } else {
// For legacy mode, show data point numbers // For legacy mode, show data point numbers
const startIndex = Math.max(1, this.totalDataPoints - this.maxDataPoints + 1); const startIndex = Math.max(1, this.totalDataPoints - this.maxDataPoints + 1);
label = String(startIndex + i); label = String(startIndex + i);
} }
labels.push(label); labels.push(label);
} }
} }
// Build the label string with calculated spacing // Build the label string with calculated spacing
for (let i = 0; i < labels.length; i++) { for (let i = 0; i < labels.length; i++) {
const label = labels[i]; const label = labels[i];
xAxisLabels += label; xAxisLabels += label;
// Add spacing: labelInterval - label.length (except for last label) // Add spacing: labelInterval - label.length (except for last label)
if (i < labels.length - 1) { if (i < labels.length - 1) {
const spacing = labelInterval - label.length; const spacing = labelInterval - label.length;
xAxisLabels += ' '.repeat(spacing); xAxisLabels += ' '.repeat(spacing);
} }
} }
// Ensure the label line extends to match the X-axis dash line length // Ensure the label line extends to match the X-axis dash line length
// The dash line is this.maxDataPoints characters long, starting after " +" // The dash line is this.maxDataPoints characters long, starting after " +"
const dashLineLength = this.maxDataPoints; const dashLineLength = this.maxDataPoints;
const minLabelLineLength = yAxisPadding.length + 4 + dashLineLength; // 4 for " " const minLabelLineLength = yAxisPadding.length + 4 + dashLineLength; // 4 for " "
if (xAxisLabels.length < minLabelLineLength) { if (xAxisLabels.length < minLabelLineLength) {
xAxisLabels += ' '.repeat(minLabelLineLength - xAxisLabels.length); xAxisLabels += ' '.repeat(minLabelLineLength - xAxisLabels.length);
} }
output += xAxisLabels + '\n'; output += xAxisLabels + '\n';
// Add X-axis label if provided // Add X-axis label if provided
if (this.xAxisLabel) { if (this.xAxisLabel) {
// const labelPadding = Math.floor((this.maxDataPoints * 2 - this.xAxisLabel.length) / 2); // TEMP: commented for no-space test // const labelPadding = Math.floor((this.maxDataPoints * 2 - this.xAxisLabel.length) / 2); // TEMP: commented for no-space test
const labelPadding = Math.floor((this.maxDataPoints - this.xAxisLabel.length) / 2); // TEMP: adjusted for no-space columns const labelPadding = Math.floor((this.maxDataPoints - this.xAxisLabel.length) / 2); // TEMP: adjusted for no-space columns
output += '\n' + yAxisPadding + ' ' + ' '.repeat(Math.max(0, labelPadding)) + this.xAxisLabel + '\n'; output += '\n' + yAxisPadding + ' ' + ' '.repeat(Math.max(0, labelPadding)) + this.xAxisLabel + '\n';
} }
this.container.textContent = output; this.container.textContent = output;
// Adjust font size to fit width (only once at initialization) // Adjust font size to fit width (only once at initialization)
if (this.autoFitWidth) { if (this.autoFitWidth) {
this.adjustFontSize(); this.adjustFontSize();
} }
// Update the external info display // Update the external info display
if (this.useBinMode) { if (this.useBinMode) {