@allternit/viz 0.1.0 → 0.1.1

package/dist/charts/svg-renderer.js.bak

@@ -1,285 +0,0 @@
-/**
- * SVG Chart Renderer
- *
- * Renders charts to SVG format.
- */
-import { palettes } from '../types';
-/**
- * Create SVG chart renderer
- */
-export function createSVGRenderer() {
-    const defaultWidth = 800;
-    const defaultHeight = 400;
-    const margin = { top: 60, right: 40, bottom: 60, left: 80 };
-    /**
-     * Render chart to SVG
-     */
-    function render(config, series) {
-        const width = config.width || defaultWidth;
-        const height = config.height || defaultHeight;
-        const palette = palettes[config.theme || 'default'];
-        const chartWidth = width - margin.left - margin.right;
-        const chartHeight = height - margin.top - margin.bottom;
-        let svg = `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">\n`;
-        // Background
-        svg += `  <rect width="${width}" height="${height}" fill="${palette.background[0]}" />\n`;
-        // Title
-        if (config.title) {
-            svg += `  <text x="${width / 2}" y="30" text-anchor="middle" font-family="sans-serif" font-size="18" font-weight="bold" fill="${palette.text.primary}">${escapeHtml(config.title)}</text>\n`;
-        }
-        // Chart group
-        svg += `  <g transform="translate(${margin.left}, ${margin.top})">\n`;
-        // Render based on chart type
-        switch (config.type) {
-            case 'bar':
-                svg += renderBarChart(chartWidth, chartHeight, series, palette, config);
-                break;
-            case 'line':
-                svg += renderLineChart(chartWidth, chartHeight, series, palette, config);
-                break;
-            case 'pie':
-            case 'donut':
-                svg += renderPieChart(chartWidth, chartHeight, series, palette, config);
-                break;
-            case 'area':
-                svg += renderAreaChart(chartWidth, chartHeight, series, palette, config);
-                break;
-            default:
-                svg += renderPlaceholder(chartWidth, chartHeight, config.type);
-        }
-        // Axes
-        if (['bar', 'line', 'area'].includes(config.type)) {
-            svg += renderAxes(chartWidth, chartHeight, series, config, palette);
-        }
-        svg += `  </g>\n`;
-        svg += `</svg>`;
-        return svg;
-    }
-    /**
-     * Render bar chart
-     */
-    function renderBarChart(width, height, series, palette, config) {
-        let svg = '';
-        if (series.length === 0)
-            return svg;
-        const allData = series.flatMap(s => s.data);
-        const maxValue = Math.max(...allData.map(d => (d.y || d.value || 0)));
-        const categories = [...new Set(allData.map(d => d.x || d.name))];
-        const barWidth = (width / categories.length) * 0.6 / series.length;
-        const scaleY = height / (maxValue * 1.1);
-        series.forEach((s, seriesIndex) => {
-            const color = s.color || palette.primary[seriesIndex % palette.primary.length];
-            s.data.forEach((point, pointIndex) => {
-                const value = (point.y || point.value || 0);
-                const barHeight = value * scaleY;
-                const x = (pointIndex + 0.2) * (width / categories.length) + seriesIndex * barWidth;
-                const y = height - barHeight;
-                svg += `    <rect x="${x}" y="${y}" width="${barWidth}" height="${barHeight}" fill="${color}" />\n`;
-            });
-        });
-        return svg;
-    }
-    /**
-     * Render line chart
-     */
-    function renderLineChart(width, height, series, palette, config) {
-        let svg = '';
-        if (series.length === 0)
-            return svg;
-        const allData = series.flatMap(s => s.data);
-        const maxValue = Math.max(...allData.map(d => (d.y || 0)));
-        const scaleX = width / (allData.length - 1 || 1);
-        const scaleY = height / (maxValue * 1.1);
-        series.forEach((s, seriesIndex) => {
-            const color = s.color || palette.primary[seriesIndex % palette.primary.length];
-            // Generate path
-            let path = '';
-            s.data.forEach((point, index) => {
-                const x = index * scaleX;
-                const y = height - (point.y || 0) * scaleY;
-                path += index === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`;
-            });
-            svg += `    <path d="${path}" fill="none" stroke="${color}" stroke-width="2" />\n`;
-            // Data points
-            if (config.dataLabels) {
-                s.data.forEach((point, index) => {
-                    const x = index * scaleX;
-                    const y = height - (point.y || 0) * scaleY;
-                    svg += `    <circle cx="${x}" cy="${y}" r="4" fill="${color}" />\n`;
-                });
-            }
-        });
-        return svg;
-    }
-    /**
-     * Render pie/donut chart
-     */
-    function renderPieChart(width, height, series, palette, config) {
-        let svg = '';
-        if (series.length === 0)
-            return svg;
-        const data = series[0].data;
-        const total = data.reduce((sum, d) => sum + (d.y || d.value || 0), 0);
-        const centerX = width / 2;
-        const centerY = height / 2;
-        const radius = Math.min(width, height) / 2 * 0.8;
-        const innerRadius = config.type === 'donut' ? radius * 0.5 : 0;
-        let currentAngle = -Math.PI / 2;
-        data.forEach((point, index) => {
-            const value = (point.y || point.value || 0);
-            const angle = (value / total) * 2 * Math.PI;
-            const color = palette.primary[index % palette.primary.length];
-            const x1 = centerX + Math.cos(currentAngle) * radius;
-            const y1 = centerY + Math.sin(currentAngle) * radius;
-            const x2 = centerX + Math.cos(currentAngle + angle) * radius;
-            const y2 = centerY + Math.sin(currentAngle + angle) * radius;
-            const largeArc = angle > Math.PI ? 1 : 0;
-            if (innerRadius > 0) {
-                // Donut
-                const ix1 = centerX + Math.cos(currentAngle) * innerRadius;
-                const iy1 = centerY + Math.sin(currentAngle) * innerRadius;
-                const ix2 = centerX + Math.cos(currentAngle + angle) * innerRadius;
-                const iy2 = centerY + Math.sin(currentAngle + angle) * innerRadius;
-                svg += `    <path d="M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} L ${ix2} ${iy2} A ${innerRadius} ${innerRadius} 0 ${largeArc} 0 ${ix1} ${iy1} Z" fill="${color}" />\n`;
-            }
-            else {
-                // Pie
-                svg += `    <path d="M ${centerX} ${centerY} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z" fill="${color}" />\n`;
-            }
-            currentAngle += angle;
-        });
-        return svg;
-    }
-    /**
-     * Render area chart
-     */
-    function renderAreaChart(width, height, series, palette, config) {
-        let svg = '';
-        if (series.length === 0)
-            return svg;
-        const allData = series.flatMap(s => s.data);
-        const maxValue = Math.max(...allData.map(d => (d.y || 0)));
-        const scaleX = width / (allData.length - 1 || 1);
-        const scaleY = height / (maxValue * 1.1);
-        series.forEach((s, seriesIndex) => {
-            const color = s.color || palette.primary[seriesIndex % palette.primary.length];
-            const fillColor = color + '40'; // 25% opacity
-            // Generate area path
-            let path = '';
-            s.data.forEach((point, index) => {
-                const x = index * scaleX;
-                const y = height - (point.y || 0) * scaleY;
-                path += index === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`;
-            });
-            // Close the area
-            path += ` L ${width} ${height} L 0 ${height} Z`;
-            svg += `    <path d="${path}" fill="${fillColor}" stroke="${color}" stroke-width="2" />\n`;
-        });
-        return svg;
-    }
-    /**
-     * Render placeholder for unsupported chart types
-     */
-    function renderPlaceholder(width, height, type) {
-        return `    <rect x="${width / 4}" y="${height / 3}" width="${width / 2}" height="${height / 3}" fill="#e5e7eb" rx="8" />\n    <text x="${width / 2}" y="${height / 2}" text-anchor="middle" font-family="sans-serif" font-size="14" fill="#6b7280">${type} chart</text>\n`;
-    }
-    /**
-     * Render axes
-     */
-    function renderAxes(width, height, series, config, palette) {
-        let svg = '';
-        // Y-axis
-        svg += `    <line x1="0" y1="0" x2="0" y2="${height}" stroke="${palette.background[2]}" stroke-width="1" />\n`;
-        // X-axis
-        svg += `    <line x1="0" y1="${height}" x2="${width}" y2="${height}" stroke="${palette.background[2]}" stroke-width="1" />\n`;
-        // Y-axis labels
-        const yAxis = config.yAxis || {};
-        const maxValue = Math.max(...series.flatMap(s => s.data.map(d => (d.y || 0))));
-        const steps = 5;
-        for (let i = 0; i <= steps; i++) {
-            const value = (maxValue / steps) * i;
-            const y = height - (height / steps) * i;
-            svg += `    <text x="-10" y="${y + 4}" text-anchor="end" font-family="sans-serif" font-size="12" fill="${palette.text.secondary}">${Math.round(value)}</text>\n`;
-            // Grid line
-            if (config.xAxis?.grid?.enabled !== false && i > 0) {
-                svg += `    <line x1="0" y1="${y}" x2="${width}" y2="${y}" stroke="${palette.background[2]}" stroke-width="1" stroke-dasharray="4,4" />\n`;
-            }
-        }
-        // Axis titles
-        if (yAxis.title) {
-            svg += `    <text x="${-margin.left + 20}" y="${height / 2}" transform="rotate(-90, ${-margin.left + 20}, ${height / 2})" text-anchor="middle" font-family="sans-serif" font-size="12" fill="${palette.text.secondary}">${escapeHtml(yAxis.title)}</text>\n`;
-        }
-        if (config.xAxis?.title) {
-            svg += `    <text x="${width / 2}" y="${height + 40}" text-anchor="middle" font-family="sans-serif" font-size="12" fill="${palette.text.secondary}">${escapeHtml(config.xAxis.title)}</text>\n`;
-        }
-        return svg;
-    }
-    /**
-     * Escape HTML special characters
-     */
-    function escapeHtml(text) {
-        return text
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#039;');
-    }
-    /**
-     * Get chart metadata
-     */
-    function getMetadata(type) {
-        const metadata = {
-            line: {
-                type: 'line',
-                name: 'Line Chart',
-                description: 'Show trends over time or categories',
-                axes: ['x', 'y'],
-                dataStructure: 'Array of { x, y } points',
-                useCases: ['Time series', 'Trends', 'Progress over time'],
-            },
-            bar: {
-                type: 'bar',
-                name: 'Bar Chart',
-                description: 'Compare values across categories',
-                axes: ['x', 'y'],
-                dataStructure: 'Array of { x, y } points',
-                useCases: ['Comparisons', 'Rankings', 'Category distribution'],
-            },
-            pie: {
-                type: 'pie',
-                name: 'Pie Chart',
-                description: 'Show part-to-whole relationships',
-                axes: [],
-                dataStructure: 'Array of { name, value }',
-                useCases: ['Composition', 'Percentage distribution'],
-            },
-            donut: {
-                type: 'donut',
-                name: 'Donut Chart',
-                description: 'Show part-to-whole with center space',
-                axes: [],
-                dataStructure: 'Array of { name, value }',
-                useCases: ['Composition', 'Percentage distribution'],
-            },
-            area: {
-                type: 'area',
-                name: 'Area Chart',
-                description: 'Show cumulative totals over time',
-                axes: ['x', 'y'],
-                dataStructure: 'Array of { x, y } points',
-                useCases: ['Volume over time', 'Cumulative data'],
-            },
-        };
-        return metadata[type] || metadata.line;
-    }
-    return {
-        render,
-        getMetadata,
-    };
-}
-/**
- * Global SVG renderer instance
- */
-export const globalSVGRenderer = createSVGRenderer();
-//# sourceMappingURL=svg-renderer.js.map

package/dist/index.d.ts.bak

@@ -1,34 +0,0 @@
-/**
- * A2R Data Visualization
- *
- * Charts, graphs, and dashboards for A2R platform.
- *
- * @example
- * ```typescript
- * import { createSVGRenderer, createDashboard } from '@allternit/viz';
- *
- * const renderer = createSVGRenderer();
- *
- * const svg = renderer.render({
- *   type: 'bar',
- *   title: 'Sales by Month',
- *   width: 800,
- *   height: 400,
- * }, [
- *   {
- *     id: 'sales',
- *     name: 'Sales',
- *     data: [
- *       { x: 'Jan', y: 100 },
- *       { x: 'Feb', y: 150 },
- *       { x: 'Mar', y: 200 },
- *     ],
- *   },
- * ]);
- * ```
- */
-export type { ChartType, ChartConfig, AxisConfig, LegendConfig, TooltipConfig, DataSeries, DataPoint, DashboardConfig, WidgetConfig, GridPosition, MetricConfig, TableConfig, TableColumn, DataSource, DataTransform, ChartMetadata, ChartPalette, ExportOptions, VizEvent, } from './types';
-export { palettes } from './types';
-export { createSVGRenderer, globalSVGRenderer, type SVGRenderer, } from './charts/svg-renderer';
-export declare const VERSION = "0.1.0";
-//# sourceMappingURL=index.d.ts.map

package/dist/index.js.bak

@@ -1,35 +0,0 @@
-/**
- * A2R Data Visualization
- *
- * Charts, graphs, and dashboards for A2R platform.
- *
- * @example
- * ```typescript
- * import { createSVGRenderer, createDashboard } from '@allternit/viz';
- *
- * const renderer = createSVGRenderer();
- *
- * const svg = renderer.render({
- *   type: 'bar',
- *   title: 'Sales by Month',
- *   width: 800,
- *   height: 400,
- * }, [
- *   {
- *     id: 'sales',
- *     name: 'Sales',
- *     data: [
- *       { x: 'Jan', y: 100 },
- *       { x: 'Feb', y: 150 },
- *       { x: 'Mar', y: 200 },
- *     ],
- *   },
- * ]);
- * ```
- */
-export { palettes } from './types';
-// Charts
-export { createSVGRenderer, globalSVGRenderer, } from './charts/svg-renderer';
-// Version
-export const VERSION = '0.1.0';
-//# sourceMappingURL=index.js.map

package/dist/types.d.ts.bak

@@ -1,342 +0,0 @@
-/**
- * A2R Data Visualization Types
- */
-/**
- * Chart Types
- */
-export type ChartType = 'line' | 'bar' | 'column' | 'area' | 'pie' | 'donut' | 'scatter' | 'bubble' | 'radar' | 'heatmap' | 'treemap' | 'sankey' | 'gauge' | 'candlestick';
-/**
- * Chart Configuration
- */
-export interface ChartConfig {
-    /** Chart type */
-    type: ChartType;
-    /** Chart title */
-    title?: string;
-    /** Chart subtitle */
-    subtitle?: string;
-    /** Width in pixels */
-    width?: number;
-    /** Height in pixels */
-    height?: number;
-    /** X-axis configuration */
-    xAxis?: AxisConfig;
-    /** Y-axis configuration */
-    yAxis?: AxisConfig;
-    /** Legend configuration */
-    legend?: LegendConfig;
-    /** Tooltip configuration */
-    tooltip?: TooltipConfig;
-    /** Chart colors */
-    colors?: string[];
-    /** Theme */
-    theme?: 'light' | 'dark';
-    /** Enable animations */
-    animation?: boolean;
-    /** Enable stacking (for bar/area) */
-    stacking?: boolean;
-    /** Show data labels */
-    dataLabels?: boolean;
-    /** Chart-specific options */
-    options?: Record<string, unknown>;
-}
-/**
- * Axis Configuration
- */
-export interface AxisConfig {
-    /** Axis title */
-    title?: string;
-    /** Axis type */
-    type?: 'category' | 'number' | 'datetime' | 'logarithmic';
-    /** Minimum value */
-    min?: number;
-    /** Maximum value */
-    max?: number;
-    /** Tick interval */
-    tickInterval?: number;
-    /** Label format */
-    labelFormat?: string;
-    /** Categories (for category axis) */
-    categories?: string[];
-    /** Grid lines */
-    grid?: GridConfig;
-    /** Opposite side */
-    opposite?: boolean;
-    /** Reversed */
-    reversed?: boolean;
-}
-/**
- * Grid Configuration
- */
-export interface GridConfig {
-    /** Show grid */
-    enabled?: boolean;
-    /** Grid color */
-    color?: string;
-    /** Dash style */
-    dashStyle?: string;
-}
-/**
- * Legend Configuration
- */
-export interface LegendConfig {
-    /** Show legend */
-    enabled?: boolean;
-    /** Legend position */
-    position?: 'top' | 'bottom' | 'left' | 'right';
-    /** Legend alignment */
-    align?: 'left' | 'center' | 'right';
-}
-/**
- * Tooltip Configuration
- */
-export interface TooltipConfig {
-    /** Show tooltip */
-    enabled?: boolean;
-    /** Shared tooltip */
-    shared?: boolean;
-    /** Follow cursor */
-    followCursor?: boolean;
-    /** Formatter function */
-    formatter?: string;
-}
-/**
- * Data Series
- */
-export interface DataSeries {
-    /** Series ID */
-    id: string;
-    /** Series name */
-    name: string;
-    /** Series type (can override chart type) */
-    type?: ChartType;
-    /** Series data */
-    data: DataPoint[];
-    /** Series color */
-    color?: string;
-    /** Y-axis index (for multi-axis) */
-    yAxis?: number;
-    /** Series options */
-    options?: Record<string, unknown>;
-}
-/**
- * Data Point
- */
-export interface DataPoint {
-    /** X value */
-    x?: string | number | Date;
-    /** Y value */
-    y?: number;
-    /** Category name (for pie/donut) */
-    name?: string;
-    /** Value (for pie/donut) */
-    value?: number;
-    /** Additional properties */
-    [key: string]: unknown;
-}
-/**
- * Dashboard Configuration
- */
-export interface DashboardConfig {
-    /** Dashboard ID */
-    id: string;
-    /** Dashboard title */
-    title: string;
-    /** Layout grid columns */
-    columns?: number;
-    /** Widgets */
-    widgets: WidgetConfig[];
-    /** Refresh interval (seconds) */
-    refreshInterval?: number;
-    /** Theme */
-    theme?: 'light' | 'dark';
-}
-/**
- * Widget Configuration
- */
-export interface WidgetConfig {
-    /** Widget ID */
-    id: string;
-    /** Widget type */
-    type: 'chart' | 'metric' | 'table' | 'text' | 'image';
-    /** Widget title */
-    title?: string;
-    /** Grid position */
-    position: GridPosition;
-    /** Widget data source */
-    dataSource?: DataSource;
-    /** Widget-specific config */
-    config?: ChartConfig | MetricConfig | TableConfig;
-}
-/**
- * Grid Position
- */
-export interface GridPosition {
-    /** Column start (1-based) */
-    x: number;
-    /** Row start (1-based) */
-    y: number;
-    /** Width in columns */
-    w: number;
-    /** Height in rows */
-    h: number;
-}
-/**
- * Metric Configuration
- */
-export interface MetricConfig {
-    /** Metric value format */
-    format?: 'number' | 'currency' | 'percentage' | 'duration';
-    /** Decimal places */
-    decimals?: number;
-    /** Prefix */
-    prefix?: string;
-    /** Suffix */
-    suffix?: string;
-    /** Comparison to previous period */
-    comparison?: boolean;
-    /** Trend indicator */
-    trend?: 'up' | 'down' | 'neutral';
-    /** Color by trend */
-    colorByTrend?: boolean;
-}
-/**
- * Table Configuration
- */
-export interface TableConfig {
-    /** Columns */
-    columns: TableColumn[];
-    /** Enable pagination */
-    pagination?: boolean;
-    /** Page size */
-    pageSize?: number;
-    /** Enable sorting */
-    sortable?: boolean;
-    /** Enable filtering */
-    filterable?: boolean;
-    /** Enable search */
-    searchable?: boolean;
-}
-/**
- * Table Column
- */
-export interface TableColumn {
-    /** Column ID */
-    id: string;
-    /** Column header */
-    header: string;
-    /** Column type */
-    type?: 'text' | 'number' | 'date' | 'currency' | 'percentage' | 'badge';
-    /** Column width */
-    width?: number | string;
-    /** Align */
-    align?: 'left' | 'center' | 'right';
-    /** Format string */
-    format?: string;
-    /** Sortable */
-    sortable?: boolean;
-}
-/**
- * Data Source
- */
-export interface DataSource {
-    /** Source type */
-    type: 'static' | 'api' | 'websocket' | 'query';
-    /** Source configuration */
-    config: Record<string, unknown>;
-    /** Data transform pipeline */
-    transforms?: DataTransform[];
-    /** Polling interval (seconds) */
-    pollingInterval?: number;
-}
-/**
- * Data Transform
- */
-export interface DataTransform {
-    /** Transform type */
-    type: 'filter' | 'map' | 'reduce' | 'aggregate' | 'sort' | 'limit';
-    /** Transform configuration */
-    config: Record<string, unknown>;
-}
-/**
- * Chart Renderer
- */
-export interface ChartRenderer {
-    /** Render chart to SVG */
-    renderSVG(config: ChartConfig, series: DataSeries[]): string;
-    /** Render chart to Canvas */
-    renderCanvas(config: ChartConfig, series: DataSeries[]): HTMLCanvasElement;
-    /** Get chart metadata */
-    getMetadata(type: ChartType): ChartMetadata;
-}
-/**
- * Chart Metadata
- */
-export interface ChartMetadata {
-    /** Chart type */
-    type: ChartType;
-    /** Display name */
-    name: string;
-    /** Description */
-    description: string;
-    /** Supported axes */
-    axes: ('x' | 'y' | 'z')[];
-    /** Required data structure */
-    dataStructure: string;
-    /** Use cases */
-    useCases: string[];
-}
-/**
- * Export Options
- */
-export interface ExportOptions {
-    /** Export format */
-    format: 'png' | 'svg' | 'pdf' | 'csv' | 'json';
-    /** Export filename */
-    filename?: string;
-    /** Export dimensions */
-    width?: number;
-    height?: number;
-    /** Background color */
-    backgroundColor?: string;
-}
-/**
- * Visualization Event
- */
-export interface VizEvent {
-    /** Event type */
-    type: 'click' | 'hover' | 'select' | 'zoom' | 'pan';
-    /** Target element */
-    target: string;
-    /** Event data */
-    data: Record<string, unknown>;
-    /** Timestamp */
-    timestamp: number;
-}
-/**
- * Chart Palette
- */
-export interface ChartPalette {
-    /** Primary colors */
-    primary: string[];
-    /** Secondary colors */
-    secondary: string[];
-    /** Semantic colors */
-    semantic: {
-        success: string;
-        warning: string;
-        error: string;
-        info: string;
-    };
-    /** Background colors */
-    background: string[];
-    /** Text colors */
-    text: {
-        primary: string;
-        secondary: string;
-        muted: string;
-    };
-}
-/** Predefined palettes */
-export declare const palettes: Record<string, ChartPalette>;
-//# sourceMappingURL=types.d.ts.map