juxscript 1.0.19 → 1.0.20

package/lib/components/areachart.ts

@@ -1,116 +1,39 @@
 import { getOrCreateContainer } from './helpers.js';
 import { State } from '../reactivity/state.js';
 import {
-    googleTheme,
-    seriesaTheme,
-    hrTheme,
-    figmaTheme,
-    notionTheme,
-    chalkTheme,
-    mintTheme
-} from '../themes/charts.js';
-
-/**
- * Bar chart data point
- */
-export interface AreaChartDataPoint {
-    label: string;
-    value: number;
-    color?: string;
-}
-
-/**
- * Bar chart options
- */
-export interface AreaChartOptions {
-    data?: AreaChartDataPoint[];
-    title?: string;
-    subtitle?: string;
-    xAxisLabel?: string;
-    yAxisLabel?: string;
-    showTicksX?: boolean;
-    showTicksY?: boolean;
-    showScaleX?: boolean;
-    showScaleY?: boolean;
-    scaleXUnit?: string;
-    scaleYUnit?: string;
-    showLegend?: boolean;
-    legendOrientation?: 'horizontal' | 'vertical';
-    showDataTable?: boolean;
-    showDataLabels?: boolean;
-    animate?: boolean;
-    animationDuration?: number;
-    chartOrientation?: 'vertical' | 'horizontal';  // NEW
-    chartDirection?: 'normal' | 'reverse';  // NEW: normal = bottom-to-top or left-to-right, reverse = opposite
-    width?: number;
-    height?: number;
-    colors?: string[];
-    class?: string;
-    style?: string;
-    theme?: 'google' | 'seriesa' | 'hr' | 'figma' | 'notion' | 'chalk' | 'mint';
-    styleMode?: 'default' | 'gradient' | 'glow' | 'glass';
-    borderRadius?: number;
-}
+    ChartDataPoint,
+    BarAreaChartOptions,
+    BarAreaChartState,
+    ChartTheme,
+    ChartStyleMode,
+    ChartOrientation,
+    ChartDirection,
+    LegendOrientation,
+    ChartPropertyMapping,
+    ChartStateObject
+} from './chart-types.js';
+import {
+    lightenColor,
+    getThemeConfig,
+    createLegend,
+    createDataTable,
+    applyThemeStyles
+} from './chart-utils.js';
 
-/**
- * Bar chart state
- */
-type AreaChartState = {
-    data: AreaChartDataPoint[];
-    title: string;
-    subtitle: string;
-    xAxisLabel: string;
-    yAxisLabel: string;
-    showTicksX: boolean;
-    showTicksY: boolean;
-    showScaleX: boolean;
-    showScaleY: boolean;
-    scaleXUnit: string;
-    scaleYUnit: string;
-    showLegend: boolean;
-    legendOrientation: 'horizontal' | 'vertical';
-    showDataTable: boolean;
-    showDataLabels: boolean;
-    animate: boolean;
-    animationDuration: number;
-    chartOrientation: 'vertical' | 'horizontal';  // NEW
-    chartDirection: 'normal' | 'reverse';  // NEW
-    width: number;
-    height: number;
-    colors: string[];
-    class: string;
-    style: string;
-    theme?: 'google' | 'seriesa' | 'hr' | 'figma' | 'notion' | 'chalk' | 'mint';
-    styleMode: 'default' | 'gradient' | 'glow' | 'glass';
-    borderRadius: number;
-};
+// Re-export for convenience
+export type { ChartDataPoint as AreaChartDataPoint };
+export type { BarAreaChartOptions as AreaChartOptions };
 
 /**
- * Bar chart component - Simple SVG-based bar chart
- * 
- * Usage:
- *   jux.areachart('sales-chart')
- *     .data([
- *       { label: 'Jan', value: 100 },
- *       { label: 'Feb', value: 150 },
- *       { label: 'Mar', value: 200 }
- *     ])
- *     .title('Monthly Sales')
- *     .showLegend(true)
- *     .render('#app');
+ * Area chart component - Simple SVG-based area chart
  */
 export class AreaChart {
-    state: AreaChartState;
+    state: BarAreaChartState;
     container: HTMLElement | null = null;
     _id: string;
     id: string;
 
-    // State bindings
-    private _boundTheme?: State<string>;
-    private _boundStyleMode?: State<string>;
-    private _boundBorderRadius?: State<number>;
-
-    constructor(id: string, options: AreaChartOptions = {}) {
+    constructor(id: string, options: BarAreaChartOptions = {}) {
         this._id = id;
         this.id = id;
 
@@ -118,7 +41,6 @@ export class AreaChart {
             '#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6',
             '#ec4899', '#06b6d4', '#f97316', '#84cc16', '#6366f1'
         ];
-        // using defaultColors, select a random color from the list.
         const randomColor = defaultColors[Math.floor(Math.random() * defaultColors.length)];
         defaultColors = [randomColor];
 
@@ -140,8 +62,8 @@ export class AreaChart {
             showDataLabels: options.showDataLabels ?? true,
             animate: options.animate ?? true,
             animationDuration: options.animationDuration ?? 800,
-            chartOrientation: options.chartOrientation ?? 'vertical',  // NEW
-            chartDirection: options.chartDirection ?? 'normal',  // NEW
+            chartOrientation: options.chartOrientation ?? 'vertical',
+            chartDirection: options.chartDirection ?? 'normal',
             width: options.width ?? 600,
             height: options.height ?? 400,
             colors: options.colors ?? defaultColors,
@@ -153,54 +75,11 @@ export class AreaChart {
         };
     }
 
-    /* -------------------------
-     * State Binding Methods
-     * ------------------------- */
-
-    /**
-     * Bind theme to reactive state
-     */
-    bindTheme(stateObj: State<string>): this {
-        this._boundTheme = stateObj;
-
-        stateObj.subscribe((val) => {
-            this.theme(val as any);
-        });
-
-        return this;
-    }
-
-    /**
-     * Bind styleMode to reactive state
-     */
-    bindStyleMode(stateObj: State<string>): this {
-        this._boundStyleMode = stateObj;
-
-        stateObj.subscribe((val) => {
-            this.styleMode(val as any);
-        });
-
-        return this;
-    }
-
-    /**
-     * Bind borderRadius to reactive state
-     */
-    bindBorderRadius(stateObj: State<number>): this {
-        this._boundBorderRadius = stateObj;
-
-        stateObj.subscribe((val) => {
-            this.borderRadius(val);
-        });
-
-        return this;
-    }
-
     /* -------------------------
      * Fluent API
      * ------------------------- */
 
-    data(value: AreaChartDataPoint[]): this {
+    data(value: ChartDataPoint[]): this {
         this.state.data = value;
         this._updateChart();
         return this;
@@ -242,37 +121,13 @@ export class AreaChart {
         return this;
     }
 
-    showScaleX(value: boolean): this {
-        this.state.showScaleX = value;
-        this._updateChart();
-        return this;
-    }
-
-    showScaleY(value: boolean): this {
-        this.state.showScaleY = value;
-        this._updateChart();
-        return this;
-    }
-
-    scaleXUnit(value: string): this {
-        this.state.scaleXUnit = value;
-        this._updateChart();
-        return this;
-    }
-
-    scaleYUnit(value: string): this {
-        this.state.scaleYUnit = value;
-        this._updateChart();
-        return this;
-    }
-
     showLegend(value: boolean): this {
         this.state.showLegend = value;
         this._updateChart();
         return this;
     }
 
-    legendOrientation(value: 'horizontal' | 'vertical'): this {
+    legendOrientation(value: LegendOrientation): this {
         this.state.legendOrientation = value;
         this._updateChart();
         return this;
@@ -284,48 +139,31 @@ export class AreaChart {
         return this;
     }
 
-    /**
-     * Show/hide value labels on bars
-     */
     showDataLabels(value: boolean): this {
         this.state.showDataLabels = value;
         this._updateChart();
         return this;
     }
 
-    /**
-     * Enable/disable bar grow animation
-     */
     animate(value: boolean): this {
         this.state.animate = value;
         this._updateChart();
         return this;
     }
 
-    /**
-     * Set animation duration in milliseconds
-     */
     animationDuration(value: number): this {
         this.state.animationDuration = value;
         this._updateChart();
         return this;
     }
 
-    /**
-     * Set chart orientation (vertical bars or horizontal bars)
-     */
-    chartOrientation(value: 'vertical' | 'horizontal'): this {
+    chartOrientation(value: ChartOrientation): this {
         this.state.chartOrientation = value;
         this._updateChart();
         return this;
     }
 
-    /**
-     * Set chart direction (normal or reverse)
-     * For vertical: normal = bottom-to-top, reverse = top-to-bottom
-     * For horizontal: normal = left-to-right, reverse = right-to-left
-     */
-    chartDirection(value: 'normal' | 'reverse'): this {
+    chartDirection(value: ChartDirection): this {
         this.state.chartDirection = value;
         this._updateChart();
         return this;
@@ -343,75 +181,169 @@ export class AreaChart {
         return this;
     }
 
-    colors(value: string[]): this {
-        this.state.colors = value;
+    theme(value: ChartTheme): this {
+        this.state.theme = value;
+        this._applyTheme(value);
         this._updateChart();
         return this;
     }
 
-    class(value: string): this {
-        this.state.class = value;
-        return this;
-    }
-
-    style(value: string): this {
-        this.state.style = value;
+    styleMode(value: ChartStyleMode): this {
+        this.state.styleMode = value;
+        this._updateChart();
         return this;
     }
 
-    /**
-     * Set chart theme
-     */
-    theme(value: 'google' | 'seriesa' | 'hr' | 'figma' | 'notion' | 'chalk' | 'mint'): this {
-        this.state.theme = value;
-        this._applyTheme(value);
+    borderRadius(value: number): this {
+        this.state.borderRadius = value;
         this._updateChart();
         return this;
     }
 
+    /* -------------------------
+     * Reactivity Support
+     * ------------------------- */
+
     /**
-     * Set bar style mode
+     * Sync a single property to a state object
      */
-    styleMode(value: 'default' | 'gradient' | 'glow' | 'glass'): this {
-        this.state.styleMode = value;
-        this._updateChart();
+    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+        const transform = toComponent || ((v: any) => v);
+
+        stateObj.subscribe((val: any) => {
+            const transformed = transform(val);
+
+            // Map property to correct method
+            switch (property) {
+                case 'data': this.data(transformed); break;
+                case 'title': this.title(transformed); break;
+                case 'subtitle': this.subtitle(transformed); break;
+                case 'width': this.width(transformed); break;
+                case 'height': this.height(transformed); break;
+                case 'theme': this.theme(transformed); break;
+                case 'styleMode': this.styleMode(transformed); break;
+                case 'borderRadius': this.borderRadius(transformed); break;
+                case 'showTicksX': this.showTicksX(transformed); break;
+                case 'showTicksY': this.showTicksY(transformed); break;
+                case 'showLegend': this.showLegend(transformed); break;
+                case 'showDataLabels': this.showDataLabels(transformed); break;
+                case 'showDataTable': this.showDataTable(transformed); break;
+                case 'animate': this.animate(transformed); break;
+                case 'animationDuration': this.animationDuration(transformed); break;
+                case 'legendOrientation': this.legendOrientation(transformed); break;
+                case 'chartOrientation': this.chartOrientation(transformed); break;
+                case 'chartDirection': this.chartDirection(transformed); break;
+            }
+        });
+
         return this;
     }
 
     /**
-     * Set border radius for bars (0 = sharp corners, higher = rounder)
+     * Sync multiple properties from a state object
+     * 
+     * @param stateObject - Object containing State instances for each property
+     * @param mapping - Optional mapping of state keys to component method names
+     * 
+     * @example
+     * // Auto-mapping (state keys match method names)
+     * chart.syncState(chartStates);
+     * 
+     * @example
+     * // Custom mapping
+     * chart.syncState(chartStates, {
+     *   chartTheme: 'theme',
+     *   chartTitle: 'title',
+     *   chartWidth: 'width'
+     * });
+     * 
+     * @example
+     * // Function mapping for transforms
+     * chart.syncState(chartStates, {
+     *   chartWidth: (value) => chart.width(Number(value))
+     * });
      */
-    borderRadius(value: number): this {
-        this.state.borderRadius = value;
-        this._updateChart();
+    syncState(stateObject: ChartStateObject, mapping?: ChartPropertyMapping): this {
+        // Default mapping: camelCase state names to method names
+        const defaultMapping: ChartPropertyMapping = {
+            chartType: 'type',           // Not used in area chart, ignored
+            chartTheme: 'theme',
+            chartStyleMode: 'styleMode',
+            borderRadius: 'borderRadius',
+            chartTitle: 'title',
+            chartWidth: 'width',
+            chartHeight: 'height',
+            showTicksX: 'showTicksX',
+            showTicksY: 'showTicksY',
+            showLegend: 'showLegend',
+            showDataTable: 'showDataTable',
+            showDataLabels: 'showDataLabels',
+            animate: 'animate',
+            animationDuration: 'animationDuration',
+            legendOrientation: 'legendOrientation',
+            chartOrientation: 'chartOrientation',
+            chartDirection: 'chartDirection'
+        };
+
+        const finalMapping = { ...defaultMapping, ...mapping };
+
+        // Iterate through state object and bind each property
+        Object.entries(stateObject).forEach(([key, stateObj]) => {
+            if (!stateObj || typeof stateObj.subscribe !== 'function') {
+                console.warn(`AreaChart.syncState: "${key}" is not a valid State object`);
+                return;
+            }
+
+            const methodOrFunction = finalMapping[key];
+
+            if (!methodOrFunction) {
+                console.warn(`AreaChart.syncState: No mapping found for "${key}"`);
+                return;
+            }
+
+            if (typeof methodOrFunction === 'function') {
+                // Custom function mapping
+                stateObj.subscribe(methodOrFunction);
+            } else {
+                // String mapping to method name
+                const methodName = methodOrFunction as keyof this;
+                const method = this[methodName];
+
+                if (typeof method !== 'function') {
+                    console.warn(`AreaChart.syncState: Method "${String(methodName)}" not found`);
+                    return;
+                }
+
+                stateObj.subscribe((val: any) => {
+                    (method as Function).call(this, val);
+                });
+            }
+        });
+
         return this;
     }
 
     /* -------------------------
-     * Update chart
+     * Internal Methods
      * ------------------------- */
 
     private _updateChart(): void {
         if (!this.container) return;
 
-        // Find the wrapper div
         const wrapper = this.container.querySelector(`#${this._id}`) as HTMLElement;
         if (!wrapper) return;
 
-        // Clear and rebuild
         wrapper.innerHTML = '';
         this._buildChart(wrapper);
 
-        // Reapply theme after rebuild
         if (this.state.theme) {
             this._applyThemeToWrapper(wrapper);
         }
     }
 
     private _buildChart(wrapper: HTMLElement): void {
-        const { data, title, subtitle, width, height, showLegend, showDataTable } = this.state;
+        const { title, subtitle, showLegend, showDataTable } = this.state;
 
-        // Title
         if (title) {
             const titleEl = document.createElement('h3');
             titleEl.className = 'jux-areachart-title';
@@ -419,7 +351,6 @@ export class AreaChart {
             wrapper.appendChild(titleEl);
         }
 
-        // Subtitle
         if (subtitle) {
             const subtitleEl = document.createElement('p');
             subtitleEl.className = 'jux-areachart-subtitle';
@@ -427,19 +358,21 @@ export class AreaChart {
             wrapper.appendChild(subtitleEl);
         }
 
-        // SVG Chart
         const svg = this._createSVG();
         wrapper.appendChild(svg);
 
-        // Legend
         if (showLegend) {
-            const legend = this._createLegend();
+            const legend = createLegend(this.state.data, this.state.colors, 'jux-areachart');
             wrapper.appendChild(legend);
         }
 
-        // Data Table
         if (showDataTable) {
-            const table = this._createDataTable();
+            const table = createDataTable(
+                this.state.data,
+                this.state.xAxisLabel,
+                this.state.yAxisLabel,
+                'jux-areachart'
+            );
             wrapper.appendChild(table);
         }
     }
@@ -540,7 +473,7 @@ export class AreaChart {
 
     private _renderVerticalBars(
         svg: SVGSVGElement,
-        data: AreaChartDataPoint[],
+        data: ChartDataPoint[],
         colors: string[],
         padding: { top: number, right: number, bottom: number, left: number },
         chartWidth: number,
@@ -657,7 +590,7 @@ export class AreaChart {
 
     private _renderHorizontalBars(
         svg: SVGSVGElement,
-        data: AreaChartDataPoint[],
+        data: ChartDataPoint[],
         colors: string[],
         padding: { top: number, right: number, bottom: number, left: number },
         chartWidth: number,
@@ -799,7 +732,7 @@ export class AreaChart {
         height: number,
         color: string,
         index: number,
-        point: AreaChartDataPoint,
+        point: ChartDataPoint,
         labelPosition: 'top' | 'bottom' | 'left' | 'right',
         isHorizontal: boolean = false
     ): void {
@@ -823,8 +756,8 @@ export class AreaChart {
         rect.setAttribute('y', y.toString());
         rect.setAttribute('width', width.toString());
         rect.setAttribute('height', height.toString());
-       // rect.setAttribute('rx', borderRadius.toString());
-       // rect.setAttribute('ry', borderRadius.toString());
+        // rect.setAttribute('rx', borderRadius.toString());
+        // rect.setAttribute('ry', borderRadius.toString());
 
         if (!shouldUseGroup && animate) {
             rect.classList.add('jux-bar-animated');
@@ -1042,71 +975,20 @@ export class AreaChart {
         return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
     }
 
-    private _applyTheme(themeName: string): void {
-        const themes: Record<string, any> = {
-            google: googleTheme,
-            seriesa: seriesaTheme,
-            hr: hrTheme,
-            figma: figmaTheme,
-            notion: notionTheme,
-            chalk: chalkTheme,
-            mint: mintTheme
-        };
-
-        const theme = themes[themeName];
+    private _applyTheme(themeName: ChartTheme): void {
+        const theme = getThemeConfig(themeName);
         if (!theme) return;
 
-        // Apply colors
-        // get one color;
         const randomColor = theme.colors[Math.floor(Math.random() * theme.colors.length)];
         this.state.colors = [randomColor];
 
-        // Inject base styles (once)
-        const baseStyleId = 'jux-areachart-base-styles';
-        if (!document.getElementById(baseStyleId)) {
-            const style = document.createElement('style');
-            style.id = baseStyleId;
-            style.textContent = this._getBaseStyles();
-            document.head.appendChild(style);
-        }
-
-        // Inject font (once per theme)
-        if (theme.font && !document.querySelector(`link[href="${theme.font}"]`)) {
-            const link = document.createElement('link');
-            link.rel = 'stylesheet';
-            link.href = theme.font;
-            document.head.appendChild(link);
-        }
-
-        // Apply theme-specific styles
-        const styleId = `jux-areachart-theme-${themeName}`;
-        let styleElement = document.getElementById(styleId) as HTMLStyleElement;
-
-        if (!styleElement) {
-            styleElement = document.createElement('style');
-            styleElement.id = styleId;
-            document.head.appendChild(styleElement);
-        }
-
-        // Generate CSS with theme variables
-        const variablesCSS = Object.entries(theme.variables)
-            .map(([key, value]) => `  ${key}: ${value};`)
-            .join('\n');
-
-        styleElement.textContent = `
-.jux-areachart.theme-${themeName} {
-${variablesCSS}
-}
-`;
+        applyThemeStyles(themeName, 'jux-areachart', this._getBaseStyles());
     }
 
     private _applyThemeToWrapper(wrapper: HTMLElement): void {
         if (!this.state.theme) return;
 
-        // Remove old theme classes
         wrapper.classList.remove('theme-google', 'theme-seriesa', 'theme-hr', 'theme-figma', 'theme-notion', 'theme-chalk', 'theme-mint');
-
-        // Add new theme class
         wrapper.classList.add(`theme-${this.state.theme}`);
     }
 
@@ -1241,6 +1123,6 @@ ${variablesCSS}
     }
 }
 
-export function areachart(id: string, options: AreaChartOptions = {}): AreaChart {
+export function areachart(id: string, options: BarAreaChartOptions = {}): AreaChart {
     return new AreaChart(id, options);
 }

package/lib/components/areachartsmooth.ts

@@ -921,7 +921,7 @@ export class AreaChartSmooth {
 
             // Calculate control points for smooth curve
             const tension = 0.3;
-            
+
             if (isHorizontal) {
                 const cp1x = current.x + (next.x - prev.x) * tension;
                 const cp1y = current.y;
@@ -1006,7 +1006,7 @@ export class AreaChartSmooth {
         } else if (styleMode === 'glow') {
             area.setAttribute('fill', color);
             area.setAttribute('fill-opacity', '0.3');
-            
+
             const filterId = `glow-area-${this._id}`;
             const defs = svg.querySelector('defs') || document.createElementNS('http://www.w3.org/2000/svg', 'defs');
             if (!svg.querySelector('defs')) {