juxscript 1.0.5 → 1.0.7

package/lib/components/kpicard.ts

@@ -0,0 +1,501 @@
+import { State } from '../reactivity/state.js';
+import {
+    googleTheme,
+    seriesaTheme,
+    hrTheme,
+    figmaTheme,
+    notionTheme,
+    chalkTheme,
+    mintTheme
+} from '../themes/charts.js';
+
+/**
+ * KPI card options
+ */
+export interface KPICardOptions {
+    title?: string;
+    value?: string | number;
+    delta?: number; // Percentage change (e.g., 10 for +10%, -5 for -5%)
+    prefix?: string; // e.g., "$", "€"
+    suffix?: string; // e.g., "k", "M", "%"
+    width?: number;
+    height?: number;
+    theme?: 'google' | 'seriesa' | 'hr' | 'figma' | 'notion' | 'chalk' | 'mint';
+    styleMode?: 'default' | 'gradient' | 'glass' | 'outline';
+    animate?: boolean;
+    animationDuration?: number;
+    class?: string;
+    style?: string;
+}
+
+/**
+ * KPI card state
+ */
+type KPICardState = {
+    title: string;
+    value: string | number;
+    delta: number;
+    prefix: string;
+    suffix: string;
+    width: number;
+    height: number;
+    theme: 'google' | 'seriesa' | 'hr' | 'figma' | 'notion' | 'chalk' | 'mint';
+    styleMode: 'default' | 'gradient' | 'glass' | 'outline';
+    animate: boolean;
+    animationDuration: number;
+    class: string;
+    style: string;
+};
+
+/**
+ * KPI card component - Displays key performance indicators
+ * 
+ * Usage:
+ *   jux.kpicard('users-kpi')
+ *     .title('New users')
+ *     .value('78k')
+ *     .delta(10)
+ *     .theme('mint')
+ *     .render('#app');
+ */
+export class KPICard {
+    private _id: string;
+    private _element?: HTMLElement;
+    private _container?: string;
+    
+    public state: KPICardState = {
+        title: 'KPI',
+        value: 0,
+        delta: 0,
+        prefix: '',
+        suffix: '',
+        width: 280,
+        height: 200,
+        theme: 'google',
+        styleMode: 'default',
+        animate: true,
+        animationDuration: 600,
+        class: '',
+        style: ''
+    };
+
+    private _boundTheme?: State<string>;
+    private _boundStyleMode?: State<string>;
+    private _boundTitle?: State<string>;
+    private _boundValue?: State<string | number>;
+    private _boundDelta?: State<number>;
+
+    constructor(id: string, options: KPICardOptions = {}) {
+        this._id = id;
+        
+        // Apply options
+        if (options.title !== undefined) this.state.title = options.title;
+        if (options.value !== undefined) this.state.value = options.value;
+        if (options.delta !== undefined) this.state.delta = options.delta;
+        if (options.prefix !== undefined) this.state.prefix = options.prefix;
+        if (options.suffix !== undefined) this.state.suffix = options.suffix;
+        if (options.width !== undefined) this.state.width = options.width;
+        if (options.height !== undefined) this.state.height = options.height;
+        if (options.theme !== undefined) this.state.theme = options.theme;
+        if (options.styleMode !== undefined) this.state.styleMode = options.styleMode;
+        if (options.animate !== undefined) this.state.animate = options.animate;
+        if (options.animationDuration !== undefined) this.state.animationDuration = options.animationDuration;
+        if (options.class !== undefined) this.state.class = options.class;
+        if (options.style !== undefined) this.state.style = options.style;
+    }
+
+    // Chainable setters
+    title(value: string | State<string>): this {
+        if (value instanceof State) {
+            this._boundTitle = value;
+            this.state.title = value.value;
+            value.subscribe((newValue) => {
+                this.state.title = newValue;
+                this._updateCard();
+            });
+        } else {
+            this.state.title = value;
+        }
+        return this;
+    }
+
+    value(value: string | number | State<string | number>): this {
+        if (value instanceof State) {
+            this._boundValue = value;
+            this.state.value = value.value;
+            value.subscribe((newValue) => {
+                this.state.value = newValue;
+                this._updateCard();
+            });
+        } else {
+            this.state.value = value;
+        }
+        return this;
+    }
+
+    delta(value: number | State<number>): this {
+        if (value instanceof State) {
+            this._boundDelta = value;
+            this.state.delta = value.value;
+            value.subscribe((newValue) => {
+                this.state.delta = newValue;
+                this._updateCard();
+            });
+        } else {
+            this.state.delta = value;
+        }
+        return this;
+    }
+
+    prefix(value: string): this {
+        this.state.prefix = value;
+        return this;
+    }
+
+    suffix(value: string): this {
+        this.state.suffix = value;
+        return this;
+    }
+
+    width(value: number): this {
+        this.state.width = value;
+        return this;
+    }
+
+    height(value: number): this {
+        this.state.height = value;
+        return this;
+    }
+
+    theme(value: string | State<string>): this {
+        if (value instanceof State) {
+            this._boundTheme = value;
+            this.state.theme = value.value as any;
+            value.subscribe((newValue) => {
+                this.state.theme = newValue as any;
+                this._updateCard();
+            });
+        } else {
+            this.state.theme = value as any;
+        }
+        return this;
+    }
+
+    styleMode(value: string | State<string>): this {
+        if (value instanceof State) {
+            this._boundStyleMode = value;
+            this.state.styleMode = value.value as any;
+            value.subscribe((newValue) => {
+                this.state.styleMode = newValue as any;
+                this._updateCard();
+            });
+        } else {
+            this.state.styleMode = value as any;
+        }
+        return this;
+    }
+
+    animate(value: boolean): this {
+        this.state.animate = value;
+        return this;
+    }
+
+    animationDuration(value: number): this {
+        this.state.animationDuration = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    render(container: string): this {
+        this._container = container;
+        const element = document.querySelector(container);
+        if (!element) {
+            console.warn(`Container ${container} not found`);
+            return this;
+        }
+
+        this._buildCard(element as HTMLElement);
+        return this;
+    }
+
+    private _updateCard(): void {
+        if (!this._container) return;
+        
+        const element = document.querySelector(this._container);
+        if (!element) return;
+
+        // Clear and rebuild
+        element.innerHTML = '';
+        this._buildCard(element as HTMLElement);
+    }
+
+    private _buildCard(container: HTMLElement): void {
+        const { width, height, class: className, style, animate, animationDuration } = this.state;
+
+        // Create wrapper
+        const wrapper = document.createElement('div');
+        wrapper.className = `jux-kpicard ${className}`;
+        wrapper.id = this._id;
+        wrapper.style.cssText = `
+            width: ${width}px;
+            height: ${height}px;
+            ${style}
+        `;
+
+        // Apply theme colors and style mode
+        this._applyThemeAndStyle(wrapper);
+
+        // Build card content
+        const content = this._createContent();
+        wrapper.appendChild(content);
+
+        // Add animation
+        if (animate) {
+            wrapper.style.opacity = '0';
+            wrapper.style.transform = 'translateY(20px)';
+            wrapper.style.transition = `opacity ${animationDuration}ms ease-out, transform ${animationDuration}ms ease-out`;
+            
+            requestAnimationFrame(() => {
+                setTimeout(() => {
+                    wrapper.style.opacity = '1';
+                    wrapper.style.transform = 'translateY(0)';
+                }, 50);
+            });
+        }
+
+        container.appendChild(wrapper);
+        this._element = wrapper;
+    }
+
+    private _createContent(): HTMLElement {
+        const { title, value, delta, prefix, suffix, animate, animationDuration } = this.state;
+
+        const content = document.createElement('div');
+        content.className = 'jux-kpicard-content';
+        content.style.cssText = `
+            padding: 24px;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            position: relative;
+        `;
+
+        // Title
+        const titleEl = document.createElement('div');
+        titleEl.className = 'jux-kpicard-title';
+        titleEl.textContent = title;
+        titleEl.style.cssText = `
+            font-size: 16px;
+            font-weight: 500;
+            color: #6b7280;
+            margin-bottom: 16px;
+            font-family: inherit;
+        `;
+        content.appendChild(titleEl);
+
+        // Value container
+        const valueContainer = document.createElement('div');
+        valueContainer.style.cssText = `
+            display: flex;
+            align-items: baseline;
+            margin-bottom: 12px;
+        `;
+
+        // Value
+        const valueEl = document.createElement('div');
+        valueEl.className = 'jux-kpicard-value';
+        valueEl.textContent = `${prefix}${value}${suffix}`;
+        valueEl.style.cssText = `
+            font-size: 56px;
+            font-weight: 800;
+            color: #1f2937;
+            line-height: 1;
+            font-family: inherit;
+        `;
+
+        if (animate) {
+            valueEl.style.opacity = '0';
+            valueEl.style.transform = 'scale(0.8)';
+            valueEl.style.transition = `opacity ${animationDuration}ms ease-out ${animationDuration / 2}ms, transform ${animationDuration}ms cubic-bezier(0.34, 1.56, 0.64, 1) ${animationDuration / 2}ms`;
+            
+            requestAnimationFrame(() => {
+                setTimeout(() => {
+                    valueEl.style.opacity = '1';
+                    valueEl.style.transform = 'scale(1)';
+                }, 100);
+            });
+        }
+
+        valueContainer.appendChild(valueEl);
+        content.appendChild(valueContainer);
+
+        // Delta with arrow
+        if (delta !== 0) {
+            const deltaContainer = document.createElement('div');
+            deltaContainer.className = 'jux-kpicard-delta';
+            deltaContainer.style.cssText = `
+                display: flex;
+                align-items: center;
+                gap: 8px;
+            `;
+
+            // Arrow SVG
+            const arrow = this._createArrowSVG(delta > 0);
+            deltaContainer.appendChild(arrow);
+
+            // Delta text
+            const deltaText = document.createElement('span');
+            deltaText.textContent = `${delta > 0 ? '+' : ''}${delta}%`;
+            deltaText.style.cssText = `
+                font-size: 18px;
+                font-weight: 700;
+                color: ${delta > 0 ? '#10b981' : '#ef4444'};
+                font-family: inherit;
+            `;
+
+            if (animate) {
+                deltaContainer.style.opacity = '0';
+                deltaContainer.style.transform = 'translateX(-10px)';
+                deltaContainer.style.transition = `opacity ${animationDuration}ms ease-out ${animationDuration}ms, transform ${animationDuration}ms ease-out ${animationDuration}ms`;
+                
+                requestAnimationFrame(() => {
+                    setTimeout(() => {
+                        deltaContainer.style.opacity = '1';
+                        deltaContainer.style.transform = 'translateX(0)';
+                    }, 150);
+                });
+            }
+
+            deltaContainer.appendChild(deltaText);
+            content.appendChild(deltaContainer);
+        }
+
+        return content;
+    }
+
+    private _createArrowSVG(isUp: boolean): SVGSVGElement {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('width', '24');
+        svg.setAttribute('height', '24');
+        svg.setAttribute('viewBox', '0 0 24 24');
+        svg.setAttribute('fill', 'none');
+        svg.style.flexShrink = '0';
+
+        const color = isUp ? '#10b981' : '#ef4444';
+
+        // Create squiggly arrow path
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        
+        if (isUp) {
+            // Up arrow with squiggly line
+            path.setAttribute('d', 'M12 4L12 20M12 4L8 8M12 4L16 8M10 10Q11 11 12 10T14 10M10 14Q11 15 12 14T14 14');
+        } else {
+            // Down arrow with squiggly line
+            path.setAttribute('d', 'M12 20L12 4M12 20L8 16M12 20L16 16M10 10Q11 9 12 10T14 10M10 14Q11 13 12 14T14 14');
+        }
+        
+        path.setAttribute('stroke', color);
+        path.setAttribute('stroke-width', '2');
+        path.setAttribute('stroke-linecap', 'round');
+        path.setAttribute('stroke-linejoin', 'round');
+
+        svg.appendChild(path);
+        return svg;
+    }
+
+    private _getThemeColors(): string[] {
+        const { theme } = this.state;
+        
+        switch (theme) {
+            case 'google':
+                return googleTheme;
+            case 'seriesa':
+                return seriesaTheme;
+            case 'hr':
+                return hrTheme;
+            case 'figma':
+                return figmaTheme;
+            case 'notion':
+                return notionTheme;
+            case 'chalk':
+                return chalkTheme;
+            case 'mint':
+                return mintTheme;
+            default:
+                return googleTheme;
+        }
+    }
+
+    private _applyThemeAndStyle(wrapper: HTMLElement): void {
+        const { styleMode } = this.state;
+        const colors = this._getThemeColors();
+
+        const baseStyles = `
+            border-radius: 16px;
+            overflow: hidden;
+            position: relative;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        `;
+
+        if (styleMode === 'gradient') {
+            wrapper.style.cssText += `
+                ${baseStyles}
+                background: linear-gradient(135deg, ${colors[0]} 0%, ${colors[1]} 100%);
+                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            `;
+            
+            // Adjust text colors for gradient
+            const titleElements = wrapper.querySelectorAll('.jux-kpicard-title');
+            const valueElements = wrapper.querySelectorAll('.jux-kpicard-value');
+            titleElements.forEach(el => (el as HTMLElement).style.color = 'rgba(255, 255, 255, 0.9)');
+            valueElements.forEach(el => (el as HTMLElement).style.color = '#ffffff');
+        } else if (styleMode === 'glass') {
+            wrapper.style.cssText += `
+                ${baseStyles}
+                background: rgba(255, 255, 255, 0.7);
+                backdrop-filter: blur(10px);
+                border: 1px solid rgba(255, 255, 255, 0.8);
+                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            `;
+        } else if (styleMode === 'outline') {
+            wrapper.style.cssText += `
+                ${baseStyles}
+                background: transparent;
+                border: 3px solid ${colors[0]};
+            `;
+        } else {
+            // default
+            wrapper.style.cssText += `
+                ${baseStyles}
+                background: #ffffff;
+                border: 1px solid #e5e7eb;
+                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            `;
+        }
+
+        // Apply theme color accent
+        const accentBar = document.createElement('div');
+        accentBar.style.cssText = `
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, ${colors[0]}, ${colors[1]});
+        `;
+        wrapper.appendChild(accentBar);
+    }
+}
+
+export function kpicard(id: string, options: KPICardOptions = {}): KPICard {
+    return new KPICard(id, options);
+}

package/lib/jux.ts

@@ -50,7 +50,10 @@ import { req, Req, type RequestInfo } from './components/req.js';
 import { heading, Heading, type HeadingOptions } from './components/heading.js';
 import { paragraph, Paragraph, type ParagraphOptions } from './components/paragraph.js';
 import { barchart, BarChart, type BarChartOptions, type BarChartDataPoint } from './components/barchart.js';
-
+import { areachart, AreaChart, type AreaChartOptions, type AreaChartDataPoint } from './components/areachart.js';
+import { areachartsmooth, AreaChartSmooth, type AreaChartSmoothOptions, AreaChartSmoothDataPoint  } from './components/areachartsmooth.js';
+import { doughnutchart, DoughnutChart, type DoughnutChartOptions, type DoughnutChartDataPoint } from './components/doughnutchart.js';
+import { kpicard, KPICard, type KPICardOptions } from './components/kpicard.js';
 
 /* -------------------------
  * Type Exports
@@ -106,7 +109,14 @@ export type {
   HeadingOptions,
   ParagraphOptions,
   BarChartOptions,
-  BarChartDataPoint
+  BarChartDataPoint,
+  AreaChartOptions,
+  AreaChartDataPoint,
+  AreaChartSmoothOptions,
+  AreaChartSmoothDataPoint,
+  DoughnutChartOptions,
+  DoughnutChartDataPoint,
+  KPICardOptions
 };
 
 /* -------------------------
@@ -158,7 +168,11 @@ export {
   Req,
   Heading,
   Paragraph,
-  BarChart
+  BarChart,
+  AreaChart,
+  AreaChartSmooth,
+  DoughnutChart,
+  KPICard
 };
 
 /* -------------------------
@@ -216,6 +230,10 @@ export interface JuxAPI {
   heading: typeof heading;
   paragraph: typeof paragraph;
   barchart: typeof barchart;
+  areachart: typeof areachart;
+  areachartsmooth: typeof areachartsmooth;
+  doughnutchart: typeof doughnutchart;
+  kpicard: typeof kpicard;
 }
 
 /* -------------------------
@@ -289,6 +307,10 @@ class Jux implements JuxAPI {
   heading = heading;
   paragraph = paragraph;
   barchart = barchart;
+  areachart = areachart;
+  areachartsmooth = areachartsmooth;
+  doughnutchart = doughnutchart;
+  kpicard = kpicard;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",