Optional debug print

text_graph.html

@@ -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);
 

text_graph.js

@@ -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 = {}) {
+     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
 
-        // 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
         this.bins = [];
@@ -119,10 +121,10 @@ class ASCIIBarChart {
         const totalWidth = yAxisPadding + yAxisNumbers + separator + dataWidth + padding;
 
         // Only log when width changes
-        if (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;
     }
@@ -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) {
+         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.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;