juxscript 1.0.18 → 1.0.20

package/lib/components/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;
+}

package/lib/components/chart-utils.ts

@@ -0,0 +1,160 @@
+import { ChartDataPoint, ChartTheme } from './chart-types.js';
+import {
+    googleTheme,
+    seriesaTheme,
+    hrTheme,
+    figmaTheme,
+    notionTheme,
+    chalkTheme,
+    mintTheme
+} from '../themes/charts.js';
+
+/**
+ * Lighten a hex color by a percentage
+ */
+export function 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')}`;
+}
+
+/**
+ * Get theme configuration by name
+ */
+export function getThemeConfig(themeName: ChartTheme): any {
+    const themes: Record<ChartTheme, any> = {
+        google: googleTheme,
+        seriesa: seriesaTheme,
+        hr: hrTheme,
+        figma: figmaTheme,
+        notion: notionTheme,
+        chalk: chalkTheme,
+        mint: mintTheme
+    };
+    return themes[themeName];
+}
+
+/**
+ * Create legend HTML element
+ */
+export function createLegend(data: ChartDataPoint[], colors: string[], className: string): HTMLElement {
+    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;
+}
+
+/**
+ * Create data table HTML element
+ */
+export function createDataTable(
+    data: ChartDataPoint[],
+    xAxisLabel: string,
+    yAxisLabel: string,
+    className: string,
+    chartOrientation?: 'vertical' | 'horizontal'
+): HTMLElement {
+    const table = document.createElement('table');
+    table.className = `${className}-table`;
+
+    const thead = document.createElement('thead');
+    const headerRow = document.createElement('tr');
+
+    // Swap headers based on orientation for bar/area charts
+    const columnHeaders = chartOrientation === 'horizontal'
+        ? [yAxisLabel || 'Label', xAxisLabel || 'Value']
+        : [xAxisLabel || 'Label', yAxisLabel || 'Value'];
+
+    columnHeaders.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;
+}
+
+/**
+ * Apply theme styles to document
+ */
+export function applyThemeStyles(themeName: ChartTheme, className: string, baseStyles: string): void {
+    const theme = getThemeConfig(themeName);
+    if (!theme) return;
+
+    // Inject base styles (once)
+    const baseStyleId = `${className}-base-styles`;
+    if (!document.getElementById(baseStyleId)) {
+        const style = document.createElement('style');
+        style.id = baseStyleId;
+        style.textContent = baseStyles;
+        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 = `${className}-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 = `
+.${className}.theme-${themeName} {
+${variablesCSS}
+}
+`;
+}