juxscript 1.0.18 → 1.0.20

package/lib/components/chart.ts

@@ -1,50 +1,78 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
 /**
- * Chart component options
+ * Chart component using Chart.js library
+ * 
+ * DEPENDENCY: Requires Chart.js to be loaded
+ * Add to your HTML: <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+ * Or install: npm install chart.js
  */
+
 export interface ChartOptions {
-  type?: 'bar' | 'line' | 'pie' | 'doughnut';
+  type?: string;
   data?: any;
   options?: any;
+  width?: number;
+  height?: number;
+  title?: string;
+  subtitle?: string;
+  xAxisLabel?: string;
+  yAxisLabel?: string;
+  style?: string;
+  class?: string;
 }
 
-/**
- * Chart component state
- */
 type ChartState = {
   type: string;
   data: any;
   options: any;
+  width: number;
+  height: number;
+  title: string;
+  subtitle: string;
+  xAxisLabel: string;
+  yAxisLabel: string;
+  style: string;
+  class: string;
 };
 
-/**
- * Chart component - placeholder for chart integration
- *
- * Usage:
- *   const chart = jux.chart('myChart', {
- *     type: 'bar',
- *     data: {
- *       labels: ['A', 'B', 'C'],
- *       datasets: [{ data: [10, 20, 30] }]
- *     }
- *   });
- *   chart.render();
- */
 export class Chart {
   state: ChartState;
   container: HTMLElement | null = null;
   _id: string;
   id: string;
+  chartInstance: any = null;
+
+  // CRITICAL: Store bind/sync instructions for deferred wiring
+  private _bindings: Array<{ event: string, handler: Function }> = [];
+  private _syncBindings: Array<{
+    property: string,
+    stateObj: State<any>,
+    toState?: Function,
+    toComponent?: Function
+  }> = [];
+
+  private _chartJsCheckAttempts = 0;
+  private _maxCheckAttempts = 50; // 5 seconds with 100ms intervals
+  private static _dataLabelsRegistered = false; // Track if plugin is registered
 
   constructor(id: string, options: ChartOptions = {}) {
     this._id = id;
     this.id = id;
 
     this.state = {
-      type: options.type ?? 'bar',
-      data: options.data ?? {},
-      options: options.options ?? {}
+      type: options.type ?? 'line',
+      data: options.data ?? { labels: [], datasets: [] },
+      options: options.options ?? {},
+      width: options.width ?? 400,
+      height: options.height ?? 300,
+      title: options.title ?? '',
+      subtitle: options.subtitle ?? '',
+      xAxisLabel: options.xAxisLabel ?? '',
+      yAxisLabel: options.yAxisLabel ?? '',
+      style: options.style ?? '',
+      class: options.class ?? ''
     };
   }
 
@@ -57,71 +85,623 @@ export class Chart {
     return this;
   }
 
+  /**
+   * Change chart type dynamically (recreates chart)
+   */
+  changeType(value: string): this {
+    this.state.type = value;
+
+    if (this.chartInstance) {
+      // Properly destroy existing chart and clear canvas
+      this.chartInstance.destroy();
+      this.chartInstance = null;
+
+      // Clear canvas completely
+      const canvas = document.getElementById(`${this._id}-canvas`) as HTMLCanvasElement;
+      if (canvas) {
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+          // Clear the entire canvas
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+          // Reset canvas dimensions to force complete redraw
+          const { width, height } = this.state;
+          canvas.width = width;
+          canvas.height = height;
+
+          try {
+            // Apply pie/doughnut specific colors if needed
+            const chartData = this._preparePieChartColors(value, this.state.data);
+
+            this.chartInstance = new (window as any).Chart(ctx, {
+              type: value,
+              data: chartData,
+              options: this.state.options
+            });
+            console.log(`✓ Chart "${this._id}" type changed to "${value}"`);
+          } catch (error) {
+            console.error(`Failed to change chart type to "${value}":`, error);
+          }
+        }
+      }
+    }
+
+    return this;
+  }
+
+  /**
+   * Apply unique colors to each slice for pie/doughnut/polar charts
+   */
+  private _preparePieChartColors(type: string, data: any): any {
+    const isPieType = ['pie', 'doughnut', 'polarArea', 'radar'].includes(type);
+
+    if (!isPieType || !data || !data.datasets) {
+      return data;
+    }
+
+    // Clone data to avoid mutating original
+    const clonedData = JSON.parse(JSON.stringify(data));
+
+    // Get theme colors
+    const themeColors = this._getThemeColors();
+
+    clonedData.datasets.forEach((dataset: any) => {
+      if (!dataset.backgroundColor || typeof dataset.backgroundColor === 'string') {
+        // Generate colors for each data point
+        const colors = dataset.data.map((_: any, index: number) => {
+          return themeColors[index % themeColors.length];
+        });
+
+        dataset.backgroundColor = colors;
+        dataset.borderColor = colors.map((color: string) => color);
+        dataset.borderWidth = 2;
+      }
+    });
+
+    return clonedData;
+  }
+
+  /**
+   * Get current theme colors
+   */
+  private _getThemeColors(): string[] {
+    const themeValue = this.state.options.theme || 'google';
+
+    // Default color sets by theme
+    const themeColorSets: { [key: string]: string[] } = {
+      google: ['#4285F4', '#EA4335', '#FBBC04', '#34A853', '#FF6D01', '#46BDC6'],
+      seriesa: ['#667eea', '#764ba2', '#f093fb', '#4facfe', '#00f2fe', '#43e97b'],
+      hr: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F'],
+      figma: ['#0ACF83', '#FF7262', '#1ABCFE', '#A259FF', '#F24E1E', '#FFC700'],
+      notion: ['#2EAADC', '#9B59B6', '#E67E22', '#E74C3C', '#F39C12', '#16A085'],
+      chalk: ['#96CEB4', '#FFEAA7', '#DFE6E9', '#74B9FF', '#FD79A8', '#A29BFE'],
+      mint: ['#26de81', '#20bf6b', '#0fb9b1', '#2bcbba', '#45aaf2', '#4b7bec']
+    };
+
+    return themeColorSets[themeValue] || themeColorSets.google;
+  }
+
   data(value: any): this {
     this.state.data = value;
+    this._updateChart();
     return this;
   }
 
   options(value: any): this {
     this.state.options = value;
+    this._updateChart();
+    return this;
+  }
+
+  width(value: number): this {
+    this.state.width = value;
+    return this;
+  }
+
+  height(value: number): this {
+    this.state.height = value;
+    return this;
+  }
+
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
+
+  class(value: string): this {
+    this.state.class = value;
+    return this;
+  }
+
+  title(value: string): this {
+    this.state.title = value;
+    return this;
+  }
+
+  subtitle(value: string): this {
+    this.state.subtitle = value;
+    return this;
+  }
+
+  xAxisLabel(value: string): this {
+    this.state.xAxisLabel = value;
+    return this;
+  }
+
+  yAxisLabel(value: string): this {
+    this.state.yAxisLabel = value;
+    return this;
+  }
+
+  /* -------------------------
+   * Fluent API - Chart.js Configuration
+   * ------------------------- */
+
+  // Chart.js options configuration methods
+  theme(value: string): this {
+    // Import theme colors and apply to chart
+    import('../themes/charts.js').then(themes => {
+      const themeConfig = themes.chartThemes[value as keyof typeof themes.chartThemes];
+
+      if (!themeConfig) return;
+
+      // Apply theme colors to datasets
+      if (this.chartInstance && this.chartInstance.data.datasets) {
+        this.chartInstance.data.datasets.forEach((dataset: any, index: number) => {
+          const colorIndex = index % themeConfig.colors.length;
+          dataset.borderColor = themeConfig.colors[colorIndex];
+          dataset.backgroundColor = themeConfig.colors[colorIndex] + '33'; // 20% opacity
+        });
+        this.chartInstance.update();
+      }
+
+      // Store theme in state
+      this.state.options.theme = value;
+    });
+
+    return this;
+  }
+
+  styleMode(value: string): this {
+    // Style mode affects line tension and stepped property
+    if (!this.state.options.elements) this.state.options.elements = {};
+    if (!this.state.options.elements.line) this.state.options.elements.line = {};
+
+    // Reset both properties first
+    delete this.state.options.elements.line.stepped;
+    delete this.state.options.elements.line.tension;
+
+    switch (value) {
+      case 'smooth':
+        this.state.options.elements.line.tension = 0.4;
+        break;
+      case 'stepped':
+        this.state.options.elements.line.stepped = true;
+        this.state.options.elements.line.tension = 0;
+        break;
+      case 'linear': // Changed from 'straight' to avoid reserved word issues
+        this.state.options.elements.line.tension = 0;
+        break;
+    }
+
+    // Apply to dataset if chart is already rendered
+    if (this.chartInstance && this.chartInstance.data.datasets) {
+      this.chartInstance.data.datasets.forEach((dataset: any) => {
+        if (value === 'smooth') {
+          dataset.tension = 0.4;
+          delete dataset.stepped;
+        } else if (value === 'stepped') {
+          dataset.stepped = true;
+          dataset.tension = 0;
+        } else if (value === 'linear') {
+          dataset.tension = 0;
+          delete dataset.stepped;
+        }
+      });
+    }
+
+    this._updateChart();
+    return this;
+  }
+
+  borderRadius(value: number): this {
+    if (!this.state.options.elements) this.state.options.elements = {};
+    if (!this.state.options.elements.bar) this.state.options.elements.bar = {};
+    this.state.options.elements.bar.borderRadius = value;
+    this._updateChart();
+    return this;
+  }
+
+  showTicksX(value: boolean): this {
+    if (!this.state.options.scales) this.state.options.scales = {};
+    if (!this.state.options.scales.x) this.state.options.scales.x = {};
+    if (!this.state.options.scales.x.ticks) this.state.options.scales.x.ticks = {};
+    this.state.options.scales.x.ticks.display = value;
+    this._updateChart();
+    return this;
+  }
+
+  showTicksY(value: boolean): this {
+    if (!this.state.options.scales) this.state.options.scales = {};
+    if (!this.state.options.scales.y) this.state.options.scales.y = {};
+    if (!this.state.options.scales.y.ticks) this.state.options.scales.y.ticks = {};
+    this.state.options.scales.y.ticks.display = value;
+    this._updateChart();
+    return this;
+  }
+
+  showDataLabels(value: boolean): this {
+    if (!this.state.options.plugins) this.state.options.plugins = {};
+
+    if (value) {
+      // Enable datalabels plugin with proper configuration
+      this.state.options.plugins.datalabels = {
+        display: true,
+        color: '#fff',
+        backgroundColor: function (context: any) {
+          // Use dataset color or default
+          return context.dataset.backgroundColor || 'rgba(0, 0, 0, 0.7)';
+        },
+        borderRadius: 4,
+        padding: 6,
+        font: {
+          weight: 'bold',
+          size: 11
+        },
+        formatter: (value: any, context: any) => {
+          // Format numbers with commas
+          if (typeof value === 'number') {
+            return value.toLocaleString();
+          }
+          return value;
+        },
+        anchor: 'end',
+        align: 'end',
+        offset: 4
+      };
+    } else {
+      // Disable datalabels
+      this.state.options.plugins.datalabels = {
+        display: false
+      };
+    }
+
+    this._updateChart();
+    return this;
+  }
+
+  showLegend(value: boolean): this {
+    if (!this.state.options.plugins) this.state.options.plugins = {};
+    if (!this.state.options.plugins.legend) this.state.options.plugins.legend = {};
+    this.state.options.plugins.legend.display = value;
+    this._updateChart();
+    return this;
+  }
+
+  showDataTable(value: boolean): this {
+    // Store flag for custom rendering (not a Chart.js feature)
+    if (!this.state.options.custom) this.state.options.custom = {};
+    this.state.options.custom.showDataTable = value;
+    return this;
+  }
+
+  legendOrientation(value: string): this {
+    if (!this.state.options.plugins) this.state.options.plugins = {};
+    if (!this.state.options.plugins.legend) this.state.options.plugins.legend = {};
+    this.state.options.plugins.legend.position = value === 'horizontal' ? 'top' : 'right';
+    this._updateChart();
+    return this;
+  }
+
+  animate(value: boolean): this {
+    if (!this.state.options.animation) this.state.options.animation = {};
+    this.state.options.animation.duration = value ? 800 : 0;
+    this._updateChart();
+    return this;
+  }
+
+  animationDuration(value: number): this {
+    if (!this.state.options.animation) this.state.options.animation = {};
+    this.state.options.animation.duration = value;
+    this._updateChart();
+    return this;
+  }
+
+  chartOrientation(value: string): this {
+    if (!this.state.options.indexAxis) {
+      this.state.options.indexAxis = value === 'horizontal' ? 'y' : 'x';
+      this._updateChart();
+    }
+    return this;
+  }
+
+  chartDirection(value: string): this {
+    if (!this.state.options.scales) this.state.options.scales = {};
+    if (value === 'reverse') {
+      if (!this.state.options.scales.x) this.state.options.scales.x = {};
+      if (!this.state.options.scales.y) this.state.options.scales.y = {};
+      this.state.options.scales.x.reverse = true;
+      this.state.options.scales.y.reverse = true;
+    } else {
+      if (this.state.options.scales.x) this.state.options.scales.x.reverse = false;
+      if (this.state.options.scales.y) this.state.options.scales.y.reverse = false;
+    }
+    this._updateChart();
+    return this;
+  }
+
+  bind(event: string, handler: Function): this {
+    this._bindings.push({ event, handler });
+    return this;
+  }
+
+  sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+    if (!stateObj || typeof stateObj.subscribe !== 'function') {
+      throw new Error(`Chart.sync: Expected a State object for property "${property}"`);
+    }
+    this._syncBindings.push({ property, stateObj, toState, toComponent });
     return this;
   }
 
   /* -------------------------
-   * Render
+   * Helpers
+   * ------------------------- */
+
+  private _waitForChartJs(callback: () => void): void {
+    if ((window as any).Chart) {
+      // Register ChartDataLabels plugin if available and not already registered
+      if (!Chart._dataLabelsRegistered && (window as any).ChartDataLabels) {
+        try {
+          (window as any).Chart.register((window as any).ChartDataLabels);
+          Chart._dataLabelsRegistered = true;
+          console.log('✓ ChartDataLabels plugin registered');
+        } catch (error) {
+          console.warn('Failed to register ChartDataLabels plugin:', error);
+        }
+      }
+
+      callback();
+      return;
+    }
+
+    if (this._chartJsCheckAttempts >= this._maxCheckAttempts) {
+      console.error(
+        `Chart.js failed to load after ${this._maxCheckAttempts * 100}ms. ` +
+        'Please ensure Chart.js is properly loaded in your page.'
+      );
+      this._renderFallbackUI();
+      return;
+    }
+
+    this._chartJsCheckAttempts++;
+    setTimeout(() => this._waitForChartJs(callback), 100);
+  }
+
+  private _renderFallbackUI(): void {
+    const wrapper = document.getElementById(this._id);
+    if (!wrapper) return;
+
+    const { data, type, width, height } = this.state;
+    const hasData = data?.labels?.length > 0 || data?.datasets?.length > 0;
+
+    wrapper.innerHTML = `
+      <div style="
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        min-height: ${Math.max(height, 200)}px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 12px;
+        padding: 40px 20px;
+        text-align: center;
+        color: white;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      ">
+        <div style="
+          background: rgba(255, 255, 255, 0.2);
+          backdrop-filter: blur(10px);
+          border-radius: 16px;
+          padding: 32px;
+          max-width: 500px;
+        ">
+          <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-bottom: 20px;">
+            <path d="M3 3v18h18"></path>
+            <path d="M18 17V9"></path>
+            <path d="M13 17V5"></path>
+            <path d="M8 17v-3"></path>
+          </svg>
+          
+          <h3 style="
+            margin: 0 0 12px 0;
+            font-size: 24px;
+            font-weight: 700;
+          ">Chart.js Required</h3>
+          
+          <p style="
+            margin: 0 0 24px 0;
+            font-size: 14px;
+            opacity: 0.9;
+            line-height: 1.6;
+          ">
+            This ${type} chart needs Chart.js library to render.<br>
+            ${hasData ? `Ready to display ${data.labels?.length || 0} data points.` : 'Waiting for data...'}
+          </p>
+          
+          <div style="
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 8px;
+            padding: 16px;
+            text-align: left;
+            font-family: 'Monaco', 'Courier New', monospace;
+            font-size: 13px;
+            margin-bottom: 16px;
+          ">
+            <div style="color: #ffd700; margin-bottom: 8px;">📦 Add to your HTML:</div>
+            <code style="
+              display: block;
+              color: #fff;
+              line-height: 1.5;
+              word-break: break-all;
+            ">&lt;script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"&gt;&lt;/script&gt;</code>
+          </div>
+          
+          <div style="
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 8px;
+            padding: 16px;
+            text-align: left;
+            font-family: 'Monaco', 'Courier New', monospace;
+            font-size: 13px;
+          ">
+            <div style="color: #ffd700; margin-bottom: 8px;">📦 Or install via npm:</div>
+            <code style="
+              display: block;
+              color: #fff;
+              line-height: 1.5;
+            ">npm install chart.js</code>
+          </div>
+
+          <button onclick="window.location.reload()" style="
+            margin-top: 24px;
+            padding: 12px 24px;
+            background: rgba(255, 255, 255, 0.9);
+            color: #667eea;
+            border: none;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+          " onmouseover="this.style.background='#fff'" onmouseout="this.style.background='rgba(255, 255, 255, 0.9)'">
+            🔄 Reload Page
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  private _updateChart(): void {
+    if (this.chartInstance) {
+      this.chartInstance.data = this.state.data;
+      this.chartInstance.options = this.state.options;
+      this.chartInstance.update();
+    }
+  }
+
+  destroy(): void {
+    if (this.chartInstance) {
+      this.chartInstance.destroy();
+      this.chartInstance = null;
+    }
+  }
+
+  /* -------------------------
+   * Render (5-Step Pattern)
    * ------------------------- */
 
   render(targetId?: string): this {
+    // === 1. SETUP: Get or create container ===
     let container: HTMLElement;
-
     if (targetId) {
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Chart: Target element "${targetId}" not found`);
+        throw new Error(`Chart: Target "${targetId}" not found`);
       }
       container = target;
     } else {
       container = getOrCreateContainer(this._id);
     }
-
     this.container = container;
-    const { type, data } = this.state;
+
+    // === 2. PREPARE: Destructure state ===
+    const { type, data, options, width, height, style, class: className } = this.state;
+
+    // === 3. BUILD: Create DOM elements ===
+    const wrapper = document.createElement('div');
+    wrapper.className = 'jux-chart';
+    wrapper.id = this._id;
+    wrapper.style.cssText = `width: ${width}px; height: ${height}px; position: relative;`;
+    if (className) wrapper.className += ` ${className}`;
+    if (style) wrapper.setAttribute('style', wrapper.style.cssText + style);
 
     const canvas = document.createElement('canvas');
-    canvas.id = this._id;
-    canvas.className = 'jux-chart';
+    canvas.id = `${this._id}-canvas`;
+    wrapper.appendChild(canvas);
+
+    // === 4. WIRE: Attach event listeners and sync bindings ===
+
+    // Wire custom bindings from .bind() calls
+    this._bindings.forEach(({ event, handler }) => {
+      wrapper.addEventListener(event, handler as EventListener);
+    });
 
-    // Placeholder rendering (would integrate with Chart.js or similar)
-    const placeholder = document.createElement('div');
-    placeholder.className = 'jux-chart-placeholder';
-    placeholder.textContent = `Chart (${type}) - Integration pending`;
-    placeholder.style.cssText = 'padding: 2rem; border: 2px dashed var(--border-color); text-align: center;';
+    // Initialize chart with retry logic
+    this._waitForChartJs(() => {
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        try {
+          // Apply pie chart colors if needed
+          const chartData = this._preparePieChartColors(type, data);
 
-    container.appendChild(placeholder);
-    container.appendChild(canvas);
+          this.chartInstance = new (window as any).Chart(ctx, {
+            type,
+            data: chartData,
+            options
+          });
+          console.log(`✓ Chart "${this._id}" rendered successfully`);
+        } catch (error) {
+          console.error(`Failed to create chart "${this._id}":`, error);
+          this._renderFallbackUI();
+        }
+      }
+    });
+
+    // Wire sync bindings from .sync() calls
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'data') {
+        const transformToComponent = toComponent || ((v: any) => v);
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          this.state.data = transformed;
+
+          if (this.chartInstance) {
+            this.chartInstance.data = transformed;
+            this.chartInstance.update();
+          }
+        });
+      }
+      else if (property === 'options') {
+        const transformToComponent = toComponent || ((v: any) => v);
 
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          this.state.options = transformed;
+
+          if (this.chartInstance) {
+            this.chartInstance.options = transformed;
+            this.chartInstance.update();
+          }
+        });
+      }
+    });
+
+    // === 5. RENDER: Append to DOM and finalize ===
+    container.appendChild(wrapper);
     return this;
   }
 
-  /**
-   * Render to another Jux component's container
-   */
   renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Chart.renderTo: Invalid component - not an object');
+    if (!juxComponent?._id) {
+      throw new Error('Chart.renderTo: Invalid component');
     }
-
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Chart.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
-
     return this.render(`#${juxComponent._id}`);
   }
 }
 
-/**
- * Factory helper
- */
 export function chart(id: string, options: ChartOptions = {}): Chart {
   return new Chart(id, options);
 }