juxscript 1.0.6 → 1.0.8

package/lib/components/kpicard.ts

@@ -0,0 +1,605 @@
+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' | 'glow';
+    animate?: boolean;
+    animationDuration?: number;
+    borderRadius?: number;
+    showAccentBar?: boolean;
+    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' | 'glow';
+    animate: boolean;
+    animationDuration: number;
+    borderRadius: number;
+    showAccentBar: boolean;
+    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')
+ *     .styleMode('gradient')
+ *     .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,
+        borderRadius: 16,
+        showAccentBar: true,
+        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.borderRadius !== undefined) this.state.borderRadius = options.borderRadius;
+        if (options.showAccentBar !== undefined) this.state.showAccentBar = options.showAccentBar;
+        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;
+    }
+
+    borderRadius(value: number): this {
+        this.state.borderRadius = value;
+        return this;
+    }
+
+    showAccentBar(value: boolean): this {
+        this.state.showAccentBar = 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._loadThemeFont();
+        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._loadThemeFont();
+        this._buildCard(element as HTMLElement);
+    }
+
+    private _loadThemeFont(): void {
+        const themeConfig = this._getThemeConfig();
+        
+        if (themeConfig.font && !document.querySelector(`link[href="${themeConfig.font}"]`)) {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = themeConfig.font;
+            document.head.appendChild(link);
+        }
+    }
+
+    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, styleMode, width, height } = this.state;
+        const themeConfig = this._getThemeConfig();
+
+        // Calculate scale factor based on default dimensions (280x200)
+        const baseWidth = 280;
+        const baseHeight = 200;
+        const scaleFactor = Math.min(width / baseWidth, height / baseHeight);
+
+        const content = document.createElement('div');
+        content.className = 'jux-kpicard-content';
+        content.style.cssText = `
+            padding: ${24 * scaleFactor}px;
+            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: ${16 * scaleFactor}px;
+            font-weight: 500;
+            color: ${styleMode === 'gradient' ? 'rgba(255, 255, 255, 0.95)' : '#6b7280'};
+            margin-bottom: ${16 * scaleFactor}px;
+            font-family: ${themeConfig.variables['--chart-font-family']};
+        `;
+        content.appendChild(titleEl);
+
+        // Value container
+        const valueContainer = document.createElement('div');
+        valueContainer.style.cssText = `
+            display: flex;
+            align-items: baseline;
+            margin-bottom: ${12 * scaleFactor}px;
+        `;
+
+        // Value
+        const valueEl = document.createElement('div');
+        valueEl.className = 'jux-kpicard-value';
+        valueEl.textContent = `${prefix}${value}${suffix}`;
+        valueEl.style.cssText = `
+            font-size: ${56 * scaleFactor}px;
+            font-weight: 800;
+            color: ${styleMode === 'gradient' ? '#ffffff' : '#1f2937'};
+            line-height: 1;
+            font-family: ${themeConfig.variables['--chart-font-family']};
+            ${styleMode === 'glow' ? `text-shadow: 0 0 ${20 * scaleFactor}px ${themeConfig.colors[0]}40;` : ''}
+        `;
+
+        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: ${8 * scaleFactor}px;
+            `;
+
+            // Arrow SVG
+            const arrow = this._createArrowSVG(delta > 0, styleMode === 'gradient', scaleFactor);
+            deltaContainer.appendChild(arrow);
+
+            // Delta text
+            const deltaText = document.createElement('span');
+            deltaText.textContent = `${delta > 0 ? '+' : ''}${delta}%`;
+            const deltaColor = styleMode === 'gradient' 
+                ? (delta > 0 ? 'rgba(255, 255, 255, 0.95)' : 'rgba(255, 200, 200, 0.95)')
+                : (delta > 0 ? '#10b981' : '#ef4444');
+            
+            deltaText.style.cssText = `
+                font-size: ${18 * scaleFactor}px;
+                font-weight: 700;
+                color: ${deltaColor};
+                font-family: ${themeConfig.variables['--chart-font-family']};
+            `;
+
+            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, isGradientMode: boolean, scaleFactor: number = 1): SVGSVGElement {
+        const baseWidth = 120;
+        const baseHeight = 32;
+        const width = baseWidth * scaleFactor;
+        const height = baseHeight * scaleFactor;
+
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('width', width.toString());
+        svg.setAttribute('height', height.toString());
+        svg.setAttribute('viewBox', `0 0 ${baseWidth} ${baseHeight}`);
+        svg.setAttribute('fill', 'none');
+        svg.style.flexShrink = '0';
+
+        const color = isGradientMode 
+            ? (isUp ? 'rgba(255, 255, 255, 0.9)' : 'rgba(255, 200, 200, 0.9)')
+            : (isUp ? '#10b981' : '#ef4444');
+
+        if (isUp) {
+            // Upward trending arrow - wider
+            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute('d', 'M4 26 L22 18 L40 22 L58 14 L76 18 L94 10');
+            path.setAttribute('stroke', color);
+            path.setAttribute('stroke-width', '3');
+            path.setAttribute('stroke-linecap', 'round');
+            path.setAttribute('stroke-linejoin', 'round');
+            path.setAttribute('fill', 'none');
+            svg.appendChild(path);
+
+            // Points at each vertex - bigger circles
+            const points = [
+                { x: 4, y: 26 },
+                { x: 22, y: 18 },
+                { x: 40, y: 22 },
+                { x: 58, y: 14 },
+                { x: 76, y: 18 },
+                { x: 94, y: 10 }
+            ];
+
+            points.forEach(point => {
+                const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+                circle.setAttribute('cx', point.x.toString());
+                circle.setAttribute('cy', point.y.toString());
+                circle.setAttribute('r', '4.5');
+                circle.setAttribute('fill', color);
+                svg.appendChild(circle);
+            });
+        } else {
+            // Downward trending arrow - wider
+            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute('d', 'M4 6 L22 14 L40 10 L58 18 L76 14 L94 22');
+            path.setAttribute('stroke', color);
+            path.setAttribute('stroke-width', '3');
+            path.setAttribute('stroke-linecap', 'round');
+            path.setAttribute('stroke-linejoin', 'round');
+            path.setAttribute('fill', 'none');
+            svg.appendChild(path);
+
+            // Points at each vertex - bigger circles
+            const points = [
+                { x: 4, y: 6 },
+                { x: 22, y: 14 },
+                { x: 40, y: 10 },
+                { x: 58, y: 18 },
+                { x: 76, y: 14 },
+                { x: 94, y: 22 }
+            ];
+
+            points.forEach(point => {
+                const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+                circle.setAttribute('cx', point.x.toString());
+                circle.setAttribute('cy', point.y.toString());
+                circle.setAttribute('r', '4.5');
+                circle.setAttribute('fill', color);
+                svg.appendChild(circle);
+            });
+        }
+
+        return svg;
+    }
+
+    private _getThemeConfig() {
+        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, borderRadius, showAccentBar, width, height } = this.state;
+        const themeConfig = this._getThemeConfig();
+        const colors = themeConfig.colors;
+
+        // Calculate scale factor for accent bar
+        const baseWidth = 280;
+        const scaleFactor = width / baseWidth;
+        const accentBarHeight = 4 * scaleFactor;
+
+        const baseStyles = `
+            border-radius: ${borderRadius}px;
+            overflow: hidden;
+            position: relative;
+            font-family: ${themeConfig.variables['--chart-font-family']};
+        `;
+
+        if (styleMode === 'gradient') {
+            wrapper.style.cssText += `
+                ${baseStyles}
+                background: linear-gradient(135deg, ${colors[0]} 0%, ${colors[1]} 50%, ${colors[2]} 100%);
+                box-shadow: 0 ${8 * scaleFactor}px ${32 * scaleFactor}px ${colors[0]}40;
+            `;
+        } else if (styleMode === 'glass') {
+            wrapper.style.cssText += `
+                ${baseStyles}
+                background: linear-gradient(135deg, ${colors[0]}20 0%, ${colors[1]}20 100%);
+                backdrop-filter: blur(${12 * scaleFactor}px) saturate(180%);
+                border: ${1 * scaleFactor}px solid ${colors[0]}30;
+                box-shadow: 0 ${8 * scaleFactor}px ${32 * scaleFactor}px rgba(0, 0, 0, 0.1);
+            `;
+        } else if (styleMode === 'outline') {
+            wrapper.style.cssText += `
+                ${baseStyles}
+                background: #ffffff;
+                border: ${3 * scaleFactor}px solid ${colors[0]};
+                box-shadow: 0 ${4 * scaleFactor}px ${12 * scaleFactor}px ${colors[0]}20;
+            `;
+        } else if (styleMode === 'glow') {
+            wrapper.style.cssText += `
+                ${baseStyles}
+                background: #ffffff;
+                border: ${2 * scaleFactor}px solid ${colors[0]}40;
+                box-shadow: 0 0 ${30 * scaleFactor}px ${colors[0]}30, 0 ${4 * scaleFactor}px ${12 * scaleFactor}px rgba(0, 0, 0, 0.1);
+            `;
+        } else {
+            // default
+            wrapper.style.cssText += `
+                ${baseStyles}
+                background: #ffffff;
+                border: ${1 * scaleFactor}px solid #e5e7eb;
+                box-shadow: 0 ${1 * scaleFactor}px ${3 * scaleFactor}px rgba(0, 0, 0, 0.1);
+            `;
+        }
+
+        // Apply theme color accent bar (optional)
+        if (showAccentBar) {
+            const accentBar = document.createElement('div');
+            accentBar.style.cssText = `
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                height: ${accentBarHeight}px;
+                background: linear-gradient(90deg, ${colors[0]}, ${colors[1]}, ${colors[2]});
+                border-radius: ${borderRadius}px ${borderRadius}px 0 0;
+            `;
+            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.6",
+  "version": "1.0.8",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",