juxscript 1.0.19 → 1.0.21

package/lib/components/charts/lib/BaseChart.ts

@@ -0,0 +1,402 @@
+import { BaseComponent } from '../../base/BaseComponent.js';
+
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
+
+/**
+ * Base chart data point
+ */
+export interface ChartDataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+
+/**
+ * Base chart state shared by all chart types
+ */
+export interface BaseChartState {
+    data: ChartDataPoint[];
+    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;
+    width: number;
+    height: number;
+    colors: string[];
+    class: string;
+    style: string;
+    theme?: 'google' | 'seriesa' | 'hr' | 'figma' | 'notion' | 'chalk' | 'mint';
+    styleMode: 'default' | 'gradient' | 'outline' | 'dashed' | 'glow' | 'glass';
+    borderRadius: number;
+}
+
+/**
+ * Abstract base class for all chart components
+ */
+export abstract class BaseChart<TState extends BaseChartState> extends BaseComponent<TState> {
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * SHARED FLUENT API (All charts inherit these)
+     * ═════════════════════════════════════════════════════════════════ */
+
+    data(value: ChartDataPoint[]): this {
+        this.state.data = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    title(value: string): this {
+        this.state.title = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    subtitle(value: string): this {
+        this.state.subtitle = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    xAxisLabel(value: string): this {
+        this.state.xAxisLabel = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    yAxisLabel(value: string): this {
+        this.state.yAxisLabel = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    showTicksX(value: boolean): this {
+        this.state.showTicksX = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    showTicksY(value: boolean): this {
+        this.state.showTicksY = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    showScaleX(value: boolean): this {
+        this.state.showScaleX = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    showScaleY(value: boolean): this {
+        this.state.showScaleY = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    scaleXUnit(value: string): this {
+        this.state.scaleXUnit = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    scaleYUnit(value: string): this {
+        this.state.scaleYUnit = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    showLegend(value: boolean): this {
+        this.state.showLegend = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    legendOrientation(value: 'horizontal' | 'vertical'): this {
+        this.state.legendOrientation = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    showDataTable(value: boolean): this {
+        this.state.showDataTable = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    showDataLabels(value: boolean): this {
+        this.state.showDataLabels = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    animate(value: boolean): this {
+        this.state.animate = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    animationDuration(value: number): this {
+        this.state.animationDuration = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    width(value: number): this {
+        this.state.width = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    height(value: number): this {
+        this.state.height = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    colors(value: string[]): this {
+        this.state.colors = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    theme(value: 'google' | 'seriesa' | 'hr' | 'figma' | 'notion' | 'chalk' | 'mint'): this {
+        this.state.theme = value;
+        this._applyTheme(value);
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    styleMode(value: 'default' | 'gradient' | 'outline' | 'dashed' | 'glow' | 'glass'): this {
+        this.state.styleMode = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    borderRadius(value: number): this {
+        this.state.borderRadius = value;
+        if (this.container) this._updateChart();
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * SHARED INTERNAL METHODS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    protected _updateChart(): void {
+        if (!this.container) return;
+
+        const wrapper = this.container.querySelector(`#${this._id}`) as HTMLElement;
+        if (!wrapper) return;
+
+        wrapper.innerHTML = '';
+        this._buildChart(wrapper);
+
+        if (this.state.theme) {
+            this._applyThemeToWrapper(wrapper);
+        }
+    }
+
+    protected _buildChart(wrapper: HTMLElement): void {
+        const { title, subtitle, showLegend, showDataTable } = this.state;
+
+        if (title) {
+            const titleEl = document.createElement('h3');
+            titleEl.className = `${this._getChartClassName()}-title`;
+            titleEl.textContent = title;
+            wrapper.appendChild(titleEl);
+        }
+
+        if (subtitle) {
+            const subtitleEl = document.createElement('p');
+            subtitleEl.className = `${this._getChartClassName()}-subtitle`;
+            subtitleEl.textContent = subtitle;
+            wrapper.appendChild(subtitleEl);
+        }
+
+        const svg = this._createSVG();
+        wrapper.appendChild(svg);
+
+        if (showLegend) {
+            const legend = this._createLegend();
+            wrapper.appendChild(legend);
+        }
+
+        if (showDataTable) {
+            const table = this._createDataTable();
+            wrapper.appendChild(table);
+        }
+    }
+
+    protected _createLegend(): HTMLElement {
+        const { data, colors } = this.state;
+        const className = this._getChartClassName();
+
+        const legend = document.createElement('div');
+        legend.className = `${className}-legend`;
+
+        data.forEach((point, index) => {
+            const color = point.color || colors[index % colors.length];
+
+            const item = document.createElement('div');
+            item.className = `${className}-legend-item`;
+
+            const swatch = document.createElement('div');
+            swatch.className = `${className}-legend-swatch`;
+            swatch.style.background = color;
+
+            const label = document.createElement('span');
+            label.className = `${className}-legend-label`;
+            label.textContent = point.label;
+
+            item.appendChild(swatch);
+            item.appendChild(label);
+            legend.appendChild(item);
+        });
+
+        return legend;
+    }
+
+    protected _createDataTable(): HTMLElement {
+        const { data, xAxisLabel, yAxisLabel } = this.state;
+        const className = this._getChartClassName();
+
+        const table = document.createElement('table');
+        table.className = `${className}-table`;
+
+        const thead = document.createElement('thead');
+        const headerRow = document.createElement('tr');
+
+        [xAxisLabel || 'Label', yAxisLabel || 'Value'].forEach(text => {
+            const th = document.createElement('th');
+            th.textContent = text;
+            headerRow.appendChild(th);
+        });
+        thead.appendChild(headerRow);
+        table.appendChild(thead);
+
+        const tbody = document.createElement('tbody');
+        data.forEach(point => {
+            const row = document.createElement('tr');
+
+            const labelCell = document.createElement('td');
+            labelCell.textContent = point.label;
+
+            const valueCell = document.createElement('td');
+            valueCell.textContent = point.value.toString();
+
+            row.appendChild(labelCell);
+            row.appendChild(valueCell);
+            tbody.appendChild(row);
+        });
+        table.appendChild(tbody);
+
+        return table;
+    }
+
+    protected _lightenColor(color: string, percent: number): string {
+        const num = parseInt(color.replace('#', ''), 16);
+        const r = Math.min(255, Math.floor((num >> 16) + ((255 - (num >> 16)) * percent / 100)));
+        const g = Math.min(255, Math.floor(((num >> 8) & 0x00FF) + ((255 - ((num >> 8) & 0x00FF)) * percent / 100)));
+        const b = Math.min(255, Math.floor((num & 0x0000FF) + ((255 - (num & 0x0000FF)) * percent / 100)));
+        return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+    }
+
+    protected _applyTheme(themeName: string): void {
+        // Simple theme color sets
+        const themes: Record<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']
+        };
+
+        this.state.colors = themes[themeName] || themes.google;
+    }
+
+    protected _applyThemeToWrapper(wrapper: HTMLElement): void {
+        if (!this.state.theme) return;
+
+        wrapper.classList.remove('theme-google', 'theme-seriesa', 'theme-hr', 'theme-figma', 'theme-notion', 'theme-chalk', 'theme-mint');
+        wrapper.classList.add(`theme-${this.state.theme}`);
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * ABSTRACT METHODS (Child must implement)
+     * ═════════════════════════════════════════════════════════════════ */
+
+    protected abstract _createSVG(): SVGSVGElement;
+    protected abstract _getChartClassName(): string;
+    protected abstract _getBaseStyles(): string;
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER (Shared implementation)
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        if (this.state.theme) {
+            this._applyTheme(this.state.theme);
+        }
+
+        const container = this._setupContainer(targetId);
+        const { class: className, style } = this.state;
+
+        const wrapper = document.createElement('div');
+        wrapper.id = this._id;
+        wrapper.className = this._getChartClassName();
+
+        if (this.state.theme) {
+            wrapper.classList.add(`theme-${this.state.theme}`);
+        }
+
+        if (className) {
+            wrapper.classList.add(...className.split(' '));
+        }
+
+        if (style) {
+            wrapper.setAttribute('style', style);
+        }
+
+        // Inject styles
+        this._injectStyles();
+
+        container.appendChild(wrapper);
+        this._buildChart(wrapper);
+
+        return this;
+    }
+
+    private _injectStyles(): void {
+        const styleId = `${this._getChartClassName()}-styles`;
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = this._getBaseStyles();
+        document.head.appendChild(style);
+    }
+}

package/lib/components/charts/lib/chart-types.ts

@@ -0,0 +1,159 @@
+import { State } from '../../../reactivity/state.js';
+
+/**
+ * Shared chart data point
+ */
+export interface ChartDataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+
+/**
+ * Shared chart theme type
+ */
+export type ChartTheme = 'google' | 'seriesa' | 'hr' | 'figma' | 'notion' | 'chalk' | 'mint';
+
+/**
+ * Shared chart style mode type
+ */
+export type ChartStyleMode = 'default' | 'gradient' | 'outline' | 'dashed' | 'glow' | 'glass';
+
+/**
+ * Shared chart orientation type
+ */
+export type ChartOrientation = 'vertical' | 'horizontal';
+
+/**
+ * Shared chart direction type
+ */
+export type ChartDirection = 'normal' | 'reverse';
+
+/**
+ * Shared legend orientation type
+ */
+export type LegendOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Base chart options shared across all chart types
+ */
+export interface BaseChartOptions {
+    data?: ChartDataPoint[];
+    title?: string;
+    subtitle?: string;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    showTicksX?: boolean;
+    showTicksY?: boolean;
+    showScaleX?: boolean;
+    showScaleY?: boolean;
+    scaleXUnit?: string;
+    scaleYUnit?: string;
+    showLegend?: boolean;
+    legendOrientation?: LegendOrientation;
+    showDataTable?: boolean;
+    showDataLabels?: boolean;
+    animate?: boolean;
+    animationDuration?: number;
+    width?: number;
+    height?: number;
+    colors?: string[];
+    class?: string;
+    style?: string;
+    theme?: ChartTheme;
+    styleMode?: ChartStyleMode;
+    borderRadius?: number;
+}
+
+/**
+ * Bar/Area chart specific options (with orientation support)
+ */
+export interface BarAreaChartOptions extends BaseChartOptions {
+    chartOrientation?: ChartOrientation;
+    chartDirection?: ChartDirection;
+}
+
+/**
+ * Doughnut chart specific options
+ */
+export interface DoughnutChartOptions extends BaseChartOptions {
+    // Doughnut-specific options can be added here
+}
+
+/**
+ * Base chart state shared across all chart types
+ */
+export interface BaseChartState {
+    data: ChartDataPoint[];
+    title: string;
+    subtitle: string;
+    xAxisLabel: string;
+    yAxisLabel: string;
+    showTicksX: boolean;
+    showTicksY: boolean;
+    showScaleX: boolean;
+    showScaleY: boolean;
+    scaleXUnit: string;
+    scaleYUnit: string;
+    showLegend: boolean;
+    legendOrientation: LegendOrientation;
+    showDataTable: boolean;
+    showDataLabels: boolean;
+    animate: boolean;
+    animationDuration: number;
+    width: number;
+    height: number;
+    colors: string[];
+    class: string;
+    style: string;
+    theme?: ChartTheme;
+    styleMode: ChartStyleMode;
+    borderRadius: number;
+}
+
+/**
+ * Bar/Area chart state with orientation
+ */
+export interface BarAreaChartState extends BaseChartState {
+    chartOrientation: ChartOrientation;
+    chartDirection: ChartDirection;
+}
+
+/**
+ * Doughnut chart state
+ */
+export interface DoughnutChartState extends BaseChartState {
+    // Doughnut-specific state can be added here
+}
+
+/**
+ * Property mapping for syncState
+ * Maps state property names to component method names
+ */
+export interface ChartPropertyMapping {
+    [stateProperty: string]: string | ((value: any) => void);
+}
+
+/**
+ * Chart state object (all properties as State objects)
+ */
+export interface ChartStateObject {
+    chartType?: State<string>;
+    chartTheme?: State<ChartTheme>;
+    chartStyleMode?: State<ChartStyleMode>;
+    borderRadius?: State<number>;
+    chartTitle?: State<string>;
+    chartWidth?: State<number>;
+    chartHeight?: State<number>;
+    showTicksX?: State<boolean>;
+    showTicksY?: State<boolean>;
+    showLegend?: State<boolean>;
+    showDataTable?: State<boolean>;
+    showDataLabels?: State<boolean>;
+    animate?: State<boolean>;
+    animationDuration?: State<number>;
+    legendOrientation?: State<LegendOrientation>;
+    chartOrientation?: State<ChartOrientation>;
+    chartDirection?: State<ChartDirection>;
+    [key: string]: State<any> | undefined;
+}