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

Optional debug print

Browse Source
This commit is contained in:
Your Name
2025-10-19 12:35:43 -04:00
parent 0762bfbd1e
commit f46a1c910b
2 changed files with 99 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
text_graph.html
View File

@@ -120,6 +120,10 @@
<option value="ranges">Time Ranges</option>
</select>
</label>
<label style="margin-left: 15px;">
<input type="checkbox" id="debug-mode" onchange="toggleDebugMode()">
Debug Mode
</label>
<button onclick="applySettings()" style="margin-left: 15px; padding: 5px 15px;">Apply Settings</button>
<button onclick="rotateBin()" id="rotate-bin-btn" style="margin-left: 10px; padding: 5px 15px; display: none;">Rotate Bin</button>
</div>
@@ -139,6 +143,12 @@
<div id="bin-info" style="display: none;"><strong>Current Bin:</strong> <span id="current-bin">--</span>, <strong>Time Remaining:</strong> <span id="time-remaining">--</span>s</div>
</div>
<div id="code-example" style="margin-top: 20px; background-color: #2a2a2a; padding: 15px; border-radius: 5px; border: 1px solid #00ff00;">
<h3 style="margin-top: 0; color: #00ff00;">Implementation Code Example</h3>
<p style="margin-bottom: 10px; font-size: 12px;">Copy this code to implement the chart in your project:</p>
<div id="code-display" style="background-color: #1e1e1e; padding: 10px; border-radius: 3px; font-size: 11px; line-height: 1.4; overflow-x: auto; color: #00ff00; border: 1px solid #444; font-family: 'Courier New', Courier, monospace;"></div>
</div>
<!-- Include the ASCII Bar Chart library -->
<script src="text_graph.js"></script>
@@ -154,12 +164,16 @@
autoFitWidth: true, // Automatically adjust font size to fit container width
useBinMode: true, // Start in time bin mode
binDuration: 4000, // 4 seconds
xAxisLabelFormat: 'elapsed'
xAxisLabelFormat: 'elapsed',
debug: false // Debug mode disabled by default
});
// Initial render
chart.render();
chart.updateInfo();
// Generate initial code example
generateCodeExample();
// Test data generator (separate from chart API)
class DataGenerator {
@@ -300,6 +314,13 @@
}
}
// Function to toggle debug mode
function toggleDebugMode() {
const debugMode = document.getElementById('debug-mode').checked;
// Note: Debug mode requires recreating the chart to take effect
// This is a limitation since debug mode is set at construction time
}
// Function to manually rotate bin
function rotateBin() {
if (chart && chart.useBinMode) {
@@ -307,6 +328,48 @@
}
}
// Function to generate code example
function generateCodeExample() {
const maxColumns = parseInt(document.getElementById('max-columns').value);
const chartHeight = parseInt(document.getElementById('chart-height').value);
const useBinMode = document.getElementById('use-bin-mode').checked;
const binDuration = parseFloat(document.getElementById('bin-duration').value);
const xAxisLabelFormat = document.getElementById('x-axis-format').value;
const debugMode = document.getElementById('debug-mode').checked;
let code = '// Include the ASCII Bar Chart library\n';
code += '<script src="text_graph.js"><' + '/script>\n\n';
code += '// Create the chart\n';
code += 'const chart = new ASCIIBarChart(\'chart-container\', {\n';
code += ' maxHeight: ' + chartHeight + ',\n';
code += ' maxDataPoints: ' + maxColumns + ',\n';
code += ' title: \'Real-Time Data Visualization\',\n';
code += ' xAxisLabel: \'Time (seconds)\',\n';
code += ' yAxisLabel: \'Count\',\n';
code += ' autoFitWidth: true,\n';
if (useBinMode) {
code += ' useBinMode: true,\n';
code += ' binDuration: ' + (binDuration * 1000) + ', // ' + binDuration + ' seconds in milliseconds\n';
code += ' xAxisLabelFormat: \'' + xAxisLabelFormat + '\',\n';
} else {
code += ' useBinMode: false,\n';
}
code += ' debug: ' + debugMode + '\n';
code += '});\n\n';
code += '// Add data points\n';
code += 'chart.addValue(5);\n';
code += 'chart.addValue(12);\n';
code += 'chart.addValue(8);\n\n';
code += '// Clear the chart\n';
code += 'chart.clear();';
// Format the code for better display
code = code.replace(/\n/g, '<br>')
.replace(/ /g, '&nbsp;')
.replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
document.getElementById('code-display').innerHTML = code;
}
// Function to apply settings
function applySettings() {
const wasRunning = dataGenerator.isRunning;
@@ -328,6 +391,9 @@
chart.binCheckInterval = null;
}
// Get debug mode setting
const debugMode = document.getElementById('debug-mode').checked;
// Recreate chart with new settings
chart = new ASCIIBarChart('chart-container', {
maxHeight: chartHeight,
@@ -338,7 +404,8 @@
autoFitWidth: true,
useBinMode: useBinMode,
binDuration: binDuration,
xAxisLabelFormat: xAxisLabelFormat
xAxisLabelFormat: xAxisLabelFormat,
debug: debugMode
});
// Force font size adjustment for new settings
@@ -346,6 +413,9 @@
chart.render();
chart.updateInfo();
// Update code example
generateCodeExample();
// Recreate data generator with new interval
dataGenerator = new DataGenerator(updateInterval);

50
text_graph.js
View File

@@ -18,22 +18,24 @@ class ASCIIBarChart {
* @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'
* @param {boolean} [options.debug=false] - Enable debug logging
*/
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
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
this.debug = options.debug || false; // Debug logging option
// 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 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 = [];
@@ -119,10 +121,10 @@ class ASCIIBarChart {
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;
}
if (this.debug && this.lastChartWidth !== totalWidth) {
console.log('getChartWidth changed:', { dataLength, totalWidth, previous: this.lastChartWidth });
this.lastChartWidth = totalWidth;
}
return totalWidth;
}
@@ -151,10 +153,10 @@ class ASCIIBarChart {
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;
}
if (this.debug && 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';
@@ -190,7 +192,9 @@ class ASCIIBarChart {
}
});
console.log('render() dataToRender:', dataToRender, 'bins length:', this.bins.length);
if (this.debug) {
console.log('render() dataToRender:', dataToRender, 'bins length:', this.bins.length);
}
maxValue = Math.max(...dataToRender);
minValue = Math.min(...dataToRender);
valueRange = maxValue - minValue;