@allternit/viz 0.1.0 → 0.1.1

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

@@ -1,580 +0,0 @@
-/**
- * Canvas Chart Renderer
- *
- * Renders charts to HTML Canvas with animation support.
- */
-import { palettes } from '../types';
-/**
- * Create Canvas chart renderer
- */
-export function createCanvasRenderer() {
-    let currentCanvas = null;
-    let currentCtx = null;
-    const defaultWidth = 800;
-    const defaultHeight = 400;
-    const margin = { top: 60, right: 40, bottom: 60, left: 80 };
-    /**
-     * Create and setup canvas
-     */
-    function setupCanvas(width, height) {
-        if (typeof document === 'undefined') {
-            // Node.js environment - create mock canvas
-            currentCanvas = {
-                width,
-                height,
-                getContext: () => ({
-                    fillStyle: '',
-                    strokeStyle: '',
-                    lineWidth: 1,
-                    font: '',
-                    textAlign: 'left',
-                    textBaseline: 'alphabetic',
-                    fillRect: () => { },
-                    strokeRect: () => { },
-                    clearRect: () => { },
-                    beginPath: () => { },
-                    closePath: () => { },
-                    moveTo: () => { },
-                    lineTo: () => { },
-                    arc: () => { },
-                    fill: () => { },
-                    stroke: () => { },
-                    fillText: () => { },
-                    strokeText: () => { },
-                    save: () => { },
-                    restore: () => { },
-                    translate: () => { },
-                    scale: () => { },
-                    rotate: () => { },
-                    measureText: () => ({ width: 0 }),
-                }),
-                toDataURL: () => '',
-            };
-            currentCtx = currentCanvas.getContext('2d');
-        }
-        else {
-            currentCanvas = document.createElement('canvas');
-            currentCanvas.width = width;
-            currentCanvas.height = height;
-            currentCtx = currentCanvas.getContext('2d');
-        }
-        if (!currentCtx) {
-            throw new Error('Failed to get canvas context');
-        }
-        return {
-            ctx: currentCtx,
-            width,
-            height,
-            chartWidth: width - margin.left - margin.right,
-            chartHeight: height - margin.top - margin.bottom,
-            margin,
-        };
-    }
-    /**
-     * Render chart to canvas
-     */
-    function render(config, series) {
-        const width = config.width || defaultWidth;
-        const height = config.height || defaultHeight;
-        const palette = palettes[config.theme || 'default'];
-        const rc = setupCanvas(width, height);
-        const { ctx } = rc;
-        // Clear background
-        ctx.fillStyle = palette.background[0];
-        ctx.fillRect(0, 0, width, height);
-        // Title
-        if (config.title) {
-            ctx.fillStyle = palette.text.primary;
-            ctx.font = 'bold 18px sans-serif';
-            ctx.textAlign = 'center';
-            ctx.fillText(config.title, width / 2, 30);
-        }
-        // Clip to chart area
-        ctx.save();
-        ctx.translate(margin.left, margin.top);
-        // Render based on chart type
-        switch (config.type) {
-            case 'bar':
-                renderBarChart(rc, series, palette, config);
-                break;
-            case 'line':
-                renderLineChart(rc, series, palette, config);
-                break;
-            case 'pie':
-            case 'donut':
-                renderPieChart(rc, series, palette, config);
-                break;
-            case 'area':
-                renderAreaChart(rc, series, palette, config);
-                break;
-            default:
-                renderPlaceholder(rc, config.type, palette);
-        }
-        // Axes
-        if (['bar', 'line', 'area'].includes(config.type)) {
-            renderAxes(rc, series, config, palette);
-        }
-        ctx.restore();
-        return currentCanvas;
-    }
-    /**
-     * Render with animation
-     */
-    function renderAnimated(config, series, duration = 1000) {
-        return new Promise((resolve) => {
-            const startTime = performance.now();
-            const width = config.width || defaultWidth;
-            const height = config.height || defaultHeight;
-            const palette = palettes[config.theme || 'default'];
-            function animate(currentTime) {
-                const elapsed = currentTime - startTime;
-                const progress = Math.min(elapsed / duration, 1);
-                const eased = easeOutCubic(progress);
-                // Render with animation progress
-                const rc = setupCanvas(width, height);
-                const { ctx } = rc;
-                // Clear background
-                ctx.fillStyle = palette.background[0];
-                ctx.fillRect(0, 0, width, height);
-                // Title
-                if (config.title) {
-                    ctx.fillStyle = palette.text.primary;
-                    ctx.font = 'bold 18px sans-serif';
-                    ctx.textAlign = 'center';
-                    ctx.fillText(config.title, width / 2, 30);
-                }
-                ctx.save();
-                ctx.translate(margin.left, margin.top);
-                // Render with animation progress
-                switch (config.type) {
-                    case 'bar':
-                        renderBarChartAnimated(rc, series, palette, config, eased);
-                        break;
-                    case 'line':
-                        renderLineChartAnimated(rc, series, palette, config, eased);
-                        break;
-                    case 'pie':
-                    case 'donut':
-                        renderPieChartAnimated(rc, series, palette, config, eased);
-                        break;
-                    case 'area':
-                        renderAreaChartAnimated(rc, series, palette, config, eased);
-                        break;
-                    default:
-                        renderPlaceholder(rc, config.type, palette);
-                }
-                // Axes
-                if (['bar', 'line', 'area'].includes(config.type)) {
-                    renderAxes(rc, series, config, palette);
-                }
-                ctx.restore();
-                if (progress < 1) {
-                    requestAnimationFrame(animate);
-                }
-                else {
-                    resolve(currentCanvas);
-                }
-            }
-            requestAnimationFrame(animate);
-        });
-    }
-    /**
-     * Easing function for smooth animations
-     */
-    function easeOutCubic(t) {
-        return 1 - Math.pow(1 - t, 3);
-    }
-    /**
-     * Render bar chart
-     */
-    function renderBarChart(rc, series, palette, config) {
-        if (series.length === 0)
-            return;
-        const { ctx, chartWidth, chartHeight } = rc;
-        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 = (chartWidth / categories.length) * 0.6 / series.length;
-        const scaleY = chartHeight / (maxValue * 1.1);
-        series.forEach((s, seriesIndex) => {
-            const color = s.color || palette.primary[seriesIndex % palette.primary.length];
-            ctx.fillStyle = color;
-            s.data.forEach((point, pointIndex) => {
-                const value = (point.y || point.value || 0);
-                const barHeight = value * scaleY;
-                const x = (pointIndex + 0.2) * (chartWidth / categories.length) + seriesIndex * barWidth;
-                const y = chartHeight - barHeight;
-                ctx.fillRect(x, y, barWidth, barHeight);
-            });
-        });
-    }
-    /**
-     * Render animated bar chart
-     */
-    function renderBarChartAnimated(rc, series, palette, config, progress) {
-        if (series.length === 0)
-            return;
-        const { ctx, chartWidth, chartHeight } = rc;
-        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 = (chartWidth / categories.length) * 0.6 / series.length;
-        const scaleY = chartHeight / (maxValue * 1.1);
-        series.forEach((s, seriesIndex) => {
-            const color = s.color || palette.primary[seriesIndex % palette.primary.length];
-            ctx.fillStyle = color;
-            s.data.forEach((point, pointIndex) => {
-                const value = (point.y || point.value || 0);
-                const barHeight = value * scaleY * progress;
-                const x = (pointIndex + 0.2) * (chartWidth / categories.length) + seriesIndex * barWidth;
-                const y = chartHeight - barHeight;
-                ctx.fillRect(x, y, barWidth, barHeight);
-            });
-        });
-    }
-    /**
-     * Render line chart
-     */
-    function renderLineChart(rc, series, palette, config) {
-        if (series.length === 0)
-            return;
-        const { ctx, chartWidth, chartHeight } = rc;
-        const allData = series.flatMap((s) => s.data);
-        const maxValue = Math.max(...allData.map((d) => (d.y || 0)));
-        const scaleX = chartWidth / (allData.length - 1 || 1);
-        const scaleY = chartHeight / (maxValue * 1.1);
-        series.forEach((s, seriesIndex) => {
-            const color = s.color || palette.primary[seriesIndex % palette.primary.length];
-            ctx.strokeStyle = color;
-            ctx.lineWidth = 2;
-            ctx.beginPath();
-            s.data.forEach((point, index) => {
-                const x = index * scaleX;
-                const y = chartHeight - (point.y || 0) * scaleY;
-                if (index === 0) {
-                    ctx.moveTo(x, y);
-                }
-                else {
-                    ctx.lineTo(x, y);
-                }
-            });
-            ctx.stroke();
-            // Data points
-            if (config.dataLabels) {
-                ctx.fillStyle = color;
-                s.data.forEach((point, index) => {
-                    const x = index * scaleX;
-                    const y = chartHeight - (point.y || 0) * scaleY;
-                    ctx.beginPath();
-                    ctx.arc(x, y, 4, 0, Math.PI * 2);
-                    ctx.fill();
-                });
-            }
-        });
-    }
-    /**
-     * Render animated line chart
-     */
-    function renderLineChartAnimated(rc, series, palette, config, progress) {
-        if (series.length === 0)
-            return;
-        const { ctx, chartWidth, chartHeight } = rc;
-        const allData = series.flatMap((s) => s.data);
-        const maxValue = Math.max(...allData.map((d) => (d.y || 0)));
-        const scaleX = chartWidth / (allData.length - 1 || 1);
-        const scaleY = chartHeight / (maxValue * 1.1);
-        series.forEach((s, seriesIndex) => {
-            const color = s.color || palette.primary[seriesIndex % palette.primary.length];
-            ctx.strokeStyle = color;
-            ctx.lineWidth = 2;
-            ctx.beginPath();
-            s.data.forEach((point, index) => {
-                const x = index * scaleX;
-                const y = chartHeight - (point.y || 0) * scaleY;
-                if (index === 0) {
-                    ctx.moveTo(x, y);
-                }
-                else if (index / (s.data.length - 1) <= progress) {
-                    ctx.lineTo(x, y);
-                }
-            });
-            ctx.stroke();
-        });
-    }
-    /**
-     * Render pie/donut chart
-     */
-    function renderPieChart(rc, series, palette, config) {
-        if (series.length === 0)
-            return;
-        const { ctx, chartWidth, chartHeight } = rc;
-        const data = series[0].data;
-        const total = data.reduce((sum, d) => sum + (d.y || d.value || 0), 0);
-        const centerX = chartWidth / 2;
-        const centerY = chartHeight / 2;
-        const radius = Math.min(chartWidth, chartHeight) / 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];
-            ctx.fillStyle = color;
-            ctx.beginPath();
-            if (innerRadius > 0) {
-                // Donut
-                ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + angle);
-                ctx.arc(centerX, centerY, innerRadius, currentAngle + angle, currentAngle, true);
-            }
-            else {
-                // Pie
-                ctx.moveTo(centerX, centerY);
-                ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + angle);
-            }
-            ctx.closePath();
-            ctx.fill();
-            currentAngle += angle;
-        });
-    }
-    /**
-     * Render animated pie/donut chart
-     */
-    function renderPieChartAnimated(rc, series, palette, config, progress) {
-        if (series.length === 0)
-            return;
-        const { ctx, chartWidth, chartHeight } = rc;
-        const data = series[0].data;
-        const total = data.reduce((sum, d) => sum + (d.y || d.value || 0), 0);
-        const centerX = chartWidth / 2;
-        const centerY = chartHeight / 2;
-        const radius = Math.min(chartWidth, chartHeight) / 2 * 0.8 * progress;
-        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];
-            ctx.fillStyle = color;
-            ctx.beginPath();
-            if (innerRadius > 0) {
-                ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + angle);
-                ctx.arc(centerX, centerY, innerRadius, currentAngle + angle, currentAngle, true);
-            }
-            else {
-                ctx.moveTo(centerX, centerY);
-                ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + angle);
-            }
-            ctx.closePath();
-            ctx.fill();
-            currentAngle += angle;
-        });
-    }
-    /**
-     * Render area chart
-     */
-    function renderAreaChart(rc, series, palette, config) {
-        if (series.length === 0)
-            return;
-        const { ctx, chartWidth, chartHeight } = rc;
-        const allData = series.flatMap((s) => s.data);
-        const maxValue = Math.max(...allData.map((d) => (d.y || 0)));
-        const scaleX = chartWidth / (allData.length - 1 || 1);
-        const scaleY = chartHeight / (maxValue * 1.1);
-        series.forEach((s, seriesIndex) => {
-            const color = s.color || palette.primary[seriesIndex % palette.primary.length];
-            ctx.fillStyle = color + '40'; // 25% opacity
-            ctx.strokeStyle = color;
-            ctx.lineWidth = 2;
-            ctx.beginPath();
-            s.data.forEach((point, index) => {
-                const x = index * scaleX;
-                const y = chartHeight - (point.y || 0) * scaleY;
-                if (index === 0) {
-                    ctx.moveTo(x, y);
-                }
-                else {
-                    ctx.lineTo(x, y);
-                }
-            });
-            ctx.lineTo(chartWidth, chartHeight);
-            ctx.lineTo(0, chartHeight);
-            ctx.closePath();
-            ctx.fill();
-            ctx.stroke();
-        });
-    }
-    /**
-     * Render animated area chart
-     */
-    function renderAreaChartAnimated(rc, series, palette, config, progress) {
-        if (series.length === 0)
-            return;
-        const { ctx, chartWidth, chartHeight } = rc;
-        const allData = series.flatMap((s) => s.data);
-        const maxValue = Math.max(...allData.map((d) => (d.y || 0)));
-        const scaleX = chartWidth / (allData.length - 1 || 1);
-        const scaleY = (chartHeight / (maxValue * 1.1)) * progress;
-        series.forEach((s, seriesIndex) => {
-            const color = s.color || palette.primary[seriesIndex % palette.primary.length];
-            ctx.fillStyle = color + '40';
-            ctx.strokeStyle = color;
-            ctx.lineWidth = 2;
-            ctx.beginPath();
-            s.data.forEach((point, index) => {
-                const x = index * scaleX;
-                const y = chartHeight - (point.y || 0) * scaleY;
-                if (index === 0) {
-                    ctx.moveTo(x, y);
-                }
-                else {
-                    ctx.lineTo(x, y);
-                }
-            });
-            ctx.lineTo(chartWidth, chartHeight);
-            ctx.lineTo(0, chartHeight);
-            ctx.closePath();
-            ctx.fill();
-            ctx.stroke();
-        });
-    }
-    /**
-     * Render placeholder for unsupported chart types
-     */
-    function renderPlaceholder(rc, type, palette) {
-        const { ctx, chartWidth, chartHeight } = rc;
-        ctx.fillStyle = '#e5e7eb';
-        ctx.fillRect(chartWidth / 4, chartHeight / 3, chartWidth / 2, chartHeight / 3);
-        ctx.fillStyle = '#6b7280';
-        ctx.font = '14px sans-serif';
-        ctx.textAlign = 'center';
-        ctx.fillText(`${type} chart`, chartWidth / 2, chartHeight / 2 + 5);
-    }
-    /**
-     * Render axes
-     */
-    function renderAxes(rc, series, config, palette) {
-        const { ctx, chartWidth, chartHeight } = rc;
-        ctx.strokeStyle = palette.background[2];
-        ctx.lineWidth = 1;
-        ctx.fillStyle = palette.text.secondary;
-        ctx.font = '12px sans-serif';
-        ctx.textAlign = 'right';
-        ctx.textBaseline = 'middle';
-        // Y-axis
-        ctx.beginPath();
-        ctx.moveTo(0, 0);
-        ctx.lineTo(0, chartHeight);
-        ctx.stroke();
-        // X-axis
-        ctx.beginPath();
-        ctx.moveTo(0, chartHeight);
-        ctx.lineTo(chartWidth, chartHeight);
-        ctx.stroke();
-        // Y-axis labels
-        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 = chartHeight - (chartHeight / steps) * i;
-            ctx.fillText(String(Math.round(value)), -10, y);
-            // Grid line
-            if (config.xAxis?.grid?.enabled !== false && i > 0) {
-                ctx.save();
-                ctx.strokeStyle = palette.background[2];
-                ctx.setLineDash([4, 4]);
-                ctx.beginPath();
-                ctx.moveTo(0, y);
-                ctx.lineTo(chartWidth, y);
-                ctx.stroke();
-                ctx.restore();
-            }
-        }
-        // Axis titles
-        if (config.yAxis?.title) {
-            ctx.save();
-            ctx.translate(-margin.left + 20, chartHeight / 2);
-            ctx.rotate(-Math.PI / 2);
-            ctx.textAlign = 'center';
-            ctx.fillText(config.yAxis.title, 0, 0);
-            ctx.restore();
-        }
-        if (config.xAxis?.title) {
-            ctx.textAlign = 'center';
-            ctx.fillText(config.xAxis.title, chartWidth / 2, chartHeight + 40);
-        }
-    }
-    /**
-     * 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;
-    }
-    /**
-     * Export to data URL
-     */
-    function toDataURL(format = 'png', quality = 0.92) {
-        if (!currentCanvas)
-            return null;
-        return currentCanvas.toDataURL(`image/${format}`, quality);
-    }
-    /**
-     * Get canvas element
-     */
-    function getCanvas() {
-        return currentCanvas;
-    }
-    return {
-        render,
-        renderAnimated,
-        getMetadata,
-        toDataURL,
-        getCanvas,
-    };
-}
-/**
- * Global Canvas renderer instance
- */
-export const globalCanvasRenderer = createCanvasRenderer();
-//# sourceMappingURL=canvas-renderer.js.map

package/dist/charts/svg-renderer.d.ts.bak

@@ -1,21 +0,0 @@
-/**
- * SVG Chart Renderer
- *
- * Renders charts to SVG format.
- */
-import type { ChartConfig, DataSeries, ChartMetadata } from '../types';
-export interface SVGRenderer {
-    /** Render chart to SVG string */
-    render(config: ChartConfig, series: DataSeries[]): string;
-    /** Get chart metadata */
-    getMetadata(type: string): ChartMetadata;
-}
-/**
- * Create SVG chart renderer
- */
-export declare function createSVGRenderer(): SVGRenderer;
-/**
- * Global SVG renderer instance
- */
-export declare const globalSVGRenderer: SVGRenderer;
-//# sourceMappingURL=svg-renderer.d.ts.map