juxscript 1.0.59 → 1.0.60

package/lib/components/charts/areachart.ts

@@ -1,315 +0,0 @@
-import { BaseChart, BaseChartState, ChartDataPoint } from './lib/BaseChart.js';
-
-export interface AreaChartOptions {
-    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?: 'horizontal' | 'vertical';
-    showDataTable?: boolean;
-    showDataLabels?: boolean;
-    animate?: boolean;
-    animationDuration?: number;
-    width?: number;
-    height?: number;
-    colors?: string[];
-    class?: string;
-    style?: string;
-    theme?: 'google' | 'seriesa' | 'hr' | 'figma' | 'notion' | 'chalk' | 'mint';
-    styleMode?: 'default' | 'gradient' | 'outline' | 'dashed' | 'glow' | 'glass';
-    borderRadius?: number;
-}
-
-interface AreaChartState extends BaseChartState {
-    data: ChartDataPoint[];
-}
-
-export class AreaChart extends BaseChart<AreaChartState> {
-    constructor(id: string, options: AreaChartOptions = {}) {
-        const defaultColors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6'];
-        const randomColor = defaultColors[Math.floor(Math.random() * defaultColors.length)];
-
-        super(id, {
-            data: options.data ?? [],
-            title: options.title ?? '',
-            subtitle: options.subtitle ?? '',
-            xAxisLabel: options.xAxisLabel ?? '',
-            yAxisLabel: options.yAxisLabel ?? '',
-            showTicksX: options.showTicksX ?? true,
-            showTicksY: options.showTicksY ?? true,
-            showScaleX: options.showScaleX ?? true,
-            showScaleY: options.showScaleY ?? true,
-            scaleXUnit: options.scaleXUnit ?? '',
-            scaleYUnit: options.scaleYUnit ?? '',
-            showLegend: options.showLegend ?? false,
-            legendOrientation: options.legendOrientation ?? 'horizontal',
-            showDataTable: options.showDataTable ?? false,
-            showDataLabels: options.showDataLabels ?? true,
-            animate: options.animate ?? true,
-            animationDuration: options.animationDuration ?? 800,
-            width: options.width ?? 600,
-            height: options.height ?? 400,
-            colors: options.colors ?? [randomColor],
-            class: options.class ?? '',
-            style: options.style ?? '',
-            theme: options.theme,
-            styleMode: options.styleMode ?? 'default',
-            borderRadius: options.borderRadius ?? 4
-        });
-    }
-
-    protected _getChartClassName(): string {
-        return 'jux-areachart';
-    }
-
-    protected _createSVG(): SVGSVGElement {
-        const { data, width, height, colors, animate, animationDuration } = this.state;
-
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('width', width.toString());
-        svg.setAttribute('height', height.toString());
-        svg.setAttribute('class', 'jux-areachart-svg');
-
-        if (!data.length) return svg;
-
-        if (animate) this._addAnimationStyles(svg);
-
-        const padding = { top: 40, right: 40, bottom: 60, left: 60 };
-        const chartWidth = width - padding.left - padding.right;
-        const chartHeight = height - padding.top - padding.bottom;
-        const maxValue = Math.max(...data.map(d => d.value));
-
-        this._renderAreaChart(svg, padding, chartWidth, chartHeight, maxValue);
-
-        return svg;
-    }
-
-    protected _getBaseStyles(): string {
-        return `
-.jux-areachart {
-  font-family: var(--chart-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
-  display: inline-block;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  border-radius: 12px;
-  background: white;
-  padding: 24px;
-}
-.jux-areachart-title {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-.jux-areachart-subtitle {
-  margin: 0 0 1rem 0;
-  font-size: 0.875rem;
-  color: #6b7280;
-}
-.jux-areachart-legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  margin-top: 1rem;
-  justify-content: center;
-}
-.jux-areachart-legend-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.jux-areachart-legend-swatch {
-  width: 12px;
-  height: 12px;
-  border-radius: 2px;
-}
-.jux-areachart-legend-label {
-  font-size: 0.875rem;
-  color: #374151;
-}
-.jux-areachart-table {
-  width: 100%;
-  margin-top: 1rem;
-  border-collapse: collapse;
-  font-size: 0.875rem;
-}
-.jux-areachart-table thead th {
-  text-align: center;
-  padding: 0.5rem;
-  border-bottom: 2px solid #e5e7eb;
-  font-weight: 600;
-}
-.jux-areachart-table tbody td {
-  padding: 0.5rem;
-  border-bottom: 1px solid #f3f4f6;
-  text-align: center;
-}
-.jux-areachart-svg {
-  font-family: inherit;
-}
-`;
-    }
-
-    private _addAnimationStyles(svg: SVGSVGElement): void {
-        const { animationDuration } = this.state;
-        const animationId = `area-grow-${this._id}`;
-        const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
-
-        style.textContent = `
-            @keyframes ${animationId} {
-                from { opacity: 0; transform: scaleY(0); }
-                to { opacity: 1; transform: scaleY(1); }
-            }
-            .jux-area-animated {
-                transform-origin: bottom;
-                animation: ${animationId} ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-            }
-        `;
-        svg.appendChild(style);
-    }
-
-    private _renderAreaChart(svg: SVGSVGElement, padding: any, chartWidth: number, chartHeight: number, maxValue: number): void {
-        const { data, width, height, colors, showDataLabels, animate, xAxisLabel, yAxisLabel, showTicksX, showTicksY, showScaleX, showScaleY, scaleYUnit } = this.state;
-
-        const yScale = chartHeight / maxValue;
-        const xStep = chartWidth / (data.length - 1 || 1);
-        const color = colors[0];
-
-        // Axes
-        if (showScaleY) {
-            this._renderAxis(svg, padding.left, padding.top, padding.left, height - padding.bottom);
-            if (yAxisLabel && showTicksY) {
-                this._renderAxisLabel(svg, yAxisLabel, 20, padding.top + chartHeight / 2, -90);
-            }
-            if (showTicksY) {
-                this._renderYTicks(svg, maxValue, yScale, padding, width, height, scaleYUnit, chartHeight);
-            }
-        }
-
-        if (showScaleX) {
-            this._renderAxis(svg, padding.left, height - padding.bottom, width - padding.right, height - padding.bottom);
-            if (xAxisLabel && showTicksX) {
-                this._renderAxisLabel(svg, xAxisLabel, padding.left + chartWidth / 2, height - 15, 0);
-            }
-        }
-
-        // Build area path
-        let pathData = `M ${padding.left} ${height - padding.bottom}`;
-        data.forEach((point, i) => {
-            const x = padding.left + (i * xStep);
-            const y = height - padding.bottom - (point.value * yScale);
-            pathData += ` L ${x} ${y}`;
-        });
-        pathData += ` L ${padding.left + ((data.length - 1) * xStep)} ${height - padding.bottom} Z`;
-
-        const areaPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        areaPath.setAttribute('d', pathData);
-        areaPath.setAttribute('fill', color);
-        areaPath.setAttribute('fill-opacity', '0.3');
-        if (animate) areaPath.classList.add('jux-area-animated');
-        svg.appendChild(areaPath);
-
-        // Line path
-        let lineData = '';
-        data.forEach((point, i) => {
-            const x = padding.left + (i * xStep);
-            const y = height - padding.bottom - (point.value * yScale);
-            lineData += (i === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`);
-        });
-
-        const linePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        linePath.setAttribute('d', lineData);
-        linePath.setAttribute('stroke', color);
-        linePath.setAttribute('stroke-width', '3');
-        linePath.setAttribute('fill', 'none');
-        svg.appendChild(linePath);
-
-        // Data points
-        data.forEach((point, i) => {
-            const x = padding.left + (i * xStep);
-            const y = height - padding.bottom - (point.value * yScale);
-
-            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-            circle.setAttribute('cx', x.toString());
-            circle.setAttribute('cy', y.toString());
-            circle.setAttribute('r', '4');
-            circle.setAttribute('fill', color);
-            circle.setAttribute('stroke', 'white');
-            circle.setAttribute('stroke-width', '2');
-            svg.appendChild(circle);
-
-            if (showDataLabels) {
-                const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-                label.setAttribute('x', x.toString());
-                label.setAttribute('y', (y - 10).toString());
-                label.setAttribute('text-anchor', 'middle');
-                label.setAttribute('fill', '#374151');
-                label.setAttribute('font-size', '11');
-                label.setAttribute('font-weight', '600');
-                label.textContent = point.value.toString();
-                svg.appendChild(label);
-            }
-        });
-    }
-
-    private _renderAxis(svg: SVGSVGElement, x1: number, y1: number, x2: number, y2: number): void {
-        const axis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-        axis.setAttribute('x1', x1.toString());
-        axis.setAttribute('y1', y1.toString());
-        axis.setAttribute('x2', x2.toString());
-        axis.setAttribute('y2', y2.toString());
-        axis.setAttribute('stroke', '#9ca3af');
-        axis.setAttribute('stroke-width', '2');
-        svg.appendChild(axis);
-    }
-
-    private _renderAxisLabel(svg: SVGSVGElement, text: string, x: number, y: number, rotate: number): void {
-        const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-        label.setAttribute('x', x.toString());
-        label.setAttribute('y', y.toString());
-        label.setAttribute('text-anchor', 'middle');
-        if (rotate !== 0) label.setAttribute('transform', `rotate(${rotate}, ${x}, ${y})`);
-        label.setAttribute('fill', '#6b7280');
-        label.setAttribute('font-size', '12');
-        label.setAttribute('font-weight', '500');
-        label.textContent = text;
-        svg.appendChild(label);
-    }
-
-    private _renderYTicks(svg: SVGSVGElement, maxValue: number, yScale: number, padding: any, width: number, height: number, unit: string, chartHeight: number): void {
-        const numTicks = 5;
-        for (let i = 0; i <= numTicks; i++) {
-            const value = (maxValue / numTicks) * i;
-            const y = height - padding.bottom - (value * yScale);
-
-            const gridLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-            gridLine.setAttribute('x1', padding.left.toString());
-            gridLine.setAttribute('y1', y.toString());
-            gridLine.setAttribute('x2', (width - padding.right).toString());
-            gridLine.setAttribute('y2', y.toString());
-            gridLine.setAttribute('stroke', '#e5e7eb');
-            gridLine.setAttribute('stroke-width', '1');
-            gridLine.setAttribute('stroke-dasharray', '4,4');
-            svg.appendChild(gridLine);
-
-            const tickLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-            tickLabel.setAttribute('x', (padding.left - 10).toString());
-            tickLabel.setAttribute('y', (y + 4).toString());
-            tickLabel.setAttribute('text-anchor', 'end');
-            tickLabel.setAttribute('fill', '#6b7280');
-            tickLabel.setAttribute('font-size', '11');
-            tickLabel.textContent = Math.round(value).toString() + (unit || '');
-            svg.appendChild(tickLabel);
-        }
-    }
-}
-
-export function areachart(id: string, options: AreaChartOptions = {}): AreaChart {
-    return new AreaChart(id, options);
-}