juxscript 1.0.19 → 1.0.21

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

@@ -0,0 +1,160 @@
+import { ChartDataPoint, ChartTheme } from './chart-types.js';
+import {
+    googleTheme,
+    seriesaTheme,
+    hrTheme,
+    figmaTheme,
+    notionTheme,
+    chalkTheme,
+    mintTheme
+} from './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}
+}
+`;
+}