flikkui 0.1.0-beta.8 → 0.2.0-beta.1

package/dist/components/charts/LineChart/LineChart.types.d.ts

@@ -1,5 +1,8 @@
-import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps } from '../types/chart.types';
-export interface LineChartProps extends BaseChartProps, StandardChartDisplayProps, StandardVisualProps {
+import { BaseChartProps, StandardChartDisplayProps } from '../types/chart.types';
+export type SemanticColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+export interface LineChartProps extends BaseChartProps, Omit<StandardChartDisplayProps, 'variant' | 'theme'> {
+    color?: SemanticColor;
+    dotRadius?: number;
     radius?: number;
     strokeWidth?: number;
     curved?: boolean;
@@ -7,6 +10,8 @@ export interface LineChartProps extends BaseChartProps, StandardChartDisplayProp
     showDots?: boolean;
 }
 export declare const LINE_CHART_DEFAULTS: {
+    readonly color: undefined;
+    readonly dotRadius: 4;
     readonly radius: 4;
     readonly strokeWidth: 2;
     readonly curved: true;
@@ -15,7 +20,8 @@ export declare const LINE_CHART_DEFAULTS: {
     readonly showGrid: true;
     readonly showXAxis: true;
     readonly showYAxis: true;
-    readonly showNullValues: true;
+    readonly barRadius: 32;
+    readonly cellRadius: 4;
     readonly gap: 4;
     readonly categoryGap: 16;
     readonly fillOpacity: 0.3;

package/dist/components/charts/LineChart/LineChart.types.js

@@ -1,7 +1,15 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import { CHART_DEFAULTS } from '../types/chart.types.js';
 
 // Default values using centralized defaults
-var LINE_CHART_DEFAULTS = __assign(__assign({}, CHART_DEFAULTS), { radius: CHART_DEFAULTS.radius, strokeWidth: CHART_DEFAULTS.strokeWidth, curved: CHART_DEFAULTS.curved, curveType: CHART_DEFAULTS.curveType, showDots: CHART_DEFAULTS.showDots });
+const LINE_CHART_DEFAULTS = {
+    ...CHART_DEFAULTS,
+    color: undefined, // Defaults to auto-cycling through semantic colors
+    dotRadius: CHART_DEFAULTS.dotRadius, // 20 - For dot markers
+    radius: CHART_DEFAULTS.dotRadius, // @deprecated - kept for backward compatibility
+    strokeWidth: CHART_DEFAULTS.strokeWidth,
+    curved: CHART_DEFAULTS.curved,
+    curveType: CHART_DEFAULTS.curveType,
+    showDots: CHART_DEFAULTS.showDots,
+};
 
 export { LINE_CHART_DEFAULTS };

package/dist/components/charts/ScatterPlot/ScatterPlot.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ScatterPlotProps } from './ScatterPlot.types';
+/**
+ * ScatterPlot Component
+ *
+ * Displays correlation between two variables with optional bubble sizing.
+ * Now uses shared axis components with tick marks and value labels like other charts.
+ */
+export declare const ScatterPlot: React.FC<ScatterPlotProps>;

package/dist/components/charts/ScatterPlot/ScatterPlot.js

@@ -0,0 +1,218 @@
+import React__default, { useRef, useState, useEffect, useMemo } from 'react';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
+import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
+import { XAxis } from '../shared/ChartAxis/XAxis.js';
+import { YAxis } from '../shared/ChartAxis/YAxis.js';
+import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { SCATTER_PLOT_DEFAULTS } from './ScatterPlot.types.js';
+import { getCategoryColor, scatterPlotTheme } from './ScatterPlot.theme.js';
+
+/**
+ * ScatterPlot Component
+ *
+ * Displays correlation between two variables with optional bubble sizing.
+ * Now uses shared axis components with tick marks and value labels like other charts.
+ */
+const ScatterPlot = ({ data, xLabel, yLabel, dotRadius: propDotRadius, pointSize, // @deprecated
+showGrid = SCATTER_PLOT_DEFAULTS.showGrid, showXAxis = SCATTER_PLOT_DEFAULTS.showXAxis, showYAxis = SCATTER_PLOT_DEFAULTS.showYAxis, showTooltip = SCATTER_PLOT_DEFAULTS.showTooltip, colors, minValue: propMinValue, maxValue: propMaxValue, theme: themeOverrides, className, svgClassName, dotClassName, gridClassName, axisClassName, title, description, enableKeyboardNavigation = SCATTER_PLOT_DEFAULTS.enableKeyboardNavigation, ...props }) => {
+    var _a;
+    const theme = { ...scatterPlotTheme, ...(themeOverrides || {}) };
+    const chartColors = colors || theme.colors || scatterPlotTheme.colors;
+    // Use dotRadius, fallback to pointSize for backward compatibility
+    const dotRadiusValue = (_a = propDotRadius !== null && propDotRadius !== void 0 ? propDotRadius : pointSize) !== null && _a !== void 0 ? _a : SCATTER_PLOT_DEFAULTS.dotRadius;
+    // Responsive container dimensions
+    const containerRef = useRef(null);
+    const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
+    // Update dimensions on mount and resize
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const updateDimensions = () => {
+            if (containerRef.current) {
+                const rect = containerRef.current.getBoundingClientRect();
+                setDimensions({
+                    width: rect.width || 600,
+                    height: rect.height || 400,
+                });
+            }
+        };
+        // Initial measurement
+        updateDimensions();
+        // Setup ResizeObserver
+        const resizeObserver = new ResizeObserver(updateDimensions);
+        resizeObserver.observe(containerRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    // Calculate ranges and categories
+    const { xMin, xMax, yMin, yMax, categories, validData } = useMemo(() => {
+        // Filter out invalid data points
+        const valid = data.filter((d) => typeof d.x === 'number' &&
+            typeof d.y === 'number' &&
+            !isNaN(d.x) &&
+            !isNaN(d.y) &&
+            isFinite(d.x) &&
+            isFinite(d.y));
+        if (valid.length === 0) {
+            return {
+                xMin: propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0,
+                xMax: propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : 100,
+                yMin: propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0,
+                yMax: propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : 100,
+                categories: [],
+                validData: [],
+            };
+        }
+        const xValues = valid.map((d) => d.x);
+        const yValues = valid.map((d) => d.y);
+        const cats = Array.from(new Set(valid.map((d) => d.category).filter(Boolean)));
+        const minX = propMinValue !== null && propMinValue !== void 0 ? propMinValue : Math.min(...xValues);
+        const maxX = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : Math.max(...xValues);
+        const minY = propMinValue !== null && propMinValue !== void 0 ? propMinValue : Math.min(...yValues);
+        const maxY = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : Math.max(...yValues);
+        return {
+            xMin: minX,
+            xMax: maxX === minX ? minX + 1 : maxX, // Avoid same min/max
+            yMin: minY,
+            yMax: maxY === minY ? minY + 1 : maxY, // Avoid same min/max
+            categories: cats,
+            validData: valid,
+        };
+    }, [data, propMinValue, propMaxValue]);
+    // Chart dimensions with margins (pixel-based like other charts)
+    const margin = {
+        top: 20,
+        right: 20,
+        bottom: showXAxis ? 60 : 20,
+        left: showYAxis ? 60 : 20,
+    };
+    const innerWidth = dimensions.width - margin.left - margin.right;
+    const innerHeight = dimensions.height - margin.top - margin.bottom;
+    // Scale functions (pixel-based)
+    const scaleX = (value) => {
+        const ratio = (value - xMin) / (xMax - xMin);
+        return margin.left + ratio * innerWidth;
+    };
+    const scaleY = (value) => {
+        const ratio = (value - yMin) / (yMax - yMin);
+        return margin.top + innerHeight - ratio * innerHeight;
+    };
+    // Get color for category
+    const getColor = (category) => {
+        if (!category)
+            return chartColors[0];
+        const index = categories.indexOf(category);
+        return getCategoryColor(chartColors, index);
+    };
+    // Tooltip setup
+    const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
+    const { tooltipData, tooltipRef, handleMouseEnter, handleMouseMove, handleMouseLeave, } = useTooltipPosition({
+        containerRef,
+        isMobile,
+    });
+    // Accessibility setup (create config from data for accessibility)
+    const config = useMemo(() => {
+        const configObj = {};
+        categories.forEach((cat, idx) => {
+            configObj[cat] = {
+                label: cat,
+                color: getCategoryColor(chartColors, idx),
+            };
+        });
+        return configObj;
+    }, [categories, chartColors]);
+    const chartDataForAccessibility = useMemo(() => {
+        return validData.map((point) => ({
+            category: point.category || 'Point',
+            x: point.x,
+            y: point.y,
+            size: point.size,
+            label: point.label,
+        }));
+    }, [validData]);
+    const { chartAccessibilityProps, descriptionProps, handleMouseInteraction, } = useChartAccessibility({
+        chartType: 'scatter',
+        data: chartDataForAccessibility,
+        config,
+        title,
+        description,
+        enableKeyboardNavigation,
+    });
+    // Generate X-axis data for axis component
+    const xAxisData = useMemo(() => {
+        // Create tick marks for X axis
+        const tickCount = 5;
+        const range = xMax - xMin;
+        const step = range / (tickCount - 1);
+        return Array.from({ length: tickCount }, (_, i) => ({
+            name: (xMin + i * step).toFixed(0),
+            value: xMin + i * step,
+        }));
+    }, [xMin, xMax]);
+    // Return empty state if no data
+    if (validData.length === 0) {
+        return (React__default.createElement("div", { ref: containerRef, className: cn(theme.containerStyle, className), style: { minHeight: '400px' }, ...props },
+            React__default.createElement("div", { className: theme.emptyStateStyle }, data.length === 0 ? 'No data available' : 'No valid data points')));
+    }
+    return (React__default.createElement("div", { ref: containerRef, className: cn(theme.containerStyle, className), style: { minHeight: '400px' }, ...chartAccessibilityProps, ...props },
+        React__default.createElement("svg", { width: dimensions.width, height: dimensions.height, className: cn(theme.svgStyle, svgClassName), ...descriptionProps },
+            React__default.createElement(YAxis, { show: showYAxis, min: yMin, max: yMax, x: margin.left, y: margin.top, height: innerHeight, showGrid: showGrid, gridWidth: innerWidth, tickCount: 5, className: cn(axisClassName) }),
+            validData.map((point, index) => {
+                const cx = scaleX(point.x);
+                const cy = scaleY(point.y);
+                const size = point.size ? Math.sqrt(point.size) / 2 : dotRadiusValue;
+                const pointColor = getColor(point.category);
+                return (React__default.createElement(motion.circle, { key: index, cx: cx, cy: cy, r: size, fill: pointColor, className: cn(theme.dotStyle, dotClassName), strokeWidth: "0.5", initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * 0.01, duration: 0.3 }, whileHover: { scale: 1.5, opacity: 1 }, onMouseEnter: (e) => {
+                        if (showTooltip) {
+                            const content = {
+                                category: point.label || point.category || `Point ${index + 1}`,
+                                series: [
+                                    {
+                                        key: 'x',
+                                        label: xLabel || 'X',
+                                        value: point.x.toFixed(2),
+                                        color: pointColor,
+                                    },
+                                    {
+                                        key: 'y',
+                                        label: yLabel || 'Y',
+                                        value: point.y.toFixed(2),
+                                        color: pointColor,
+                                    },
+                                    ...(point.size
+                                        ? [
+                                            {
+                                                key: 'size',
+                                                label: 'Size',
+                                                value: point.size.toFixed(2),
+                                                color: pointColor,
+                                            },
+                                        ]
+                                        : []),
+                                ],
+                            };
+                            // Pass SVG coordinates for proper positioning (especially in mobile/constrained containers)
+                            const svgCoordinates = isMobile ? {
+                                x: cx,
+                                y: cy,
+                                dimensions
+                            } : undefined;
+                            handleMouseEnter(e, content, svgCoordinates);
+                        }
+                        handleMouseInteraction();
+                    }, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave }));
+            }),
+            React__default.createElement(XAxis, { show: showXAxis, data: xAxisData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / (xAxisData.length - 1), categoryGap: 0, alignWithEdge: true, className: cn(axisClassName) }),
+            xLabel && showXAxis && (React__default.createElement("text", { x: margin.left + innerWidth / 2, y: dimensions.height - 5, textAnchor: "middle", className: "text-xs fill-[var(--color-text-secondary)]" }, xLabel)),
+            yLabel && showYAxis && (React__default.createElement("text", { x: 15, y: margin.top + innerHeight / 2, textAnchor: "middle", className: "text-xs fill-[var(--color-text-secondary)]", transform: `rotate(-90 15 ${margin.top + innerHeight / 2})` }, yLabel))),
+        categories.length > 0 && (React__default.createElement("div", { className: theme.legendContainerStyle }, categories.map((cat, index) => (React__default.createElement("div", { key: cat, className: theme.legendItemStyle },
+            React__default.createElement("div", { className: theme.legendDotStyle, style: { backgroundColor: getCategoryColor(chartColors, index) } }),
+            React__default.createElement("span", { className: theme.legendLabelStyle }, cat)))))),
+        showTooltip && (React__default.createElement(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "scatter" }))));
+};
+ScatterPlot.displayName = 'ScatterPlot';
+
+export { ScatterPlot };

package/dist/components/charts/ScatterPlot/ScatterPlot.theme.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ScatterPlot Theme - Uses CSS variables for production-ready styling
+ */
+export declare const scatterPlotTheme: {
+    containerStyle: string;
+    svgStyle: string;
+    emptyStateStyle: string;
+    gridLineStyle: string;
+    axisLineStyle: string;
+    axisLabelStyle: string;
+    dotStyle: string;
+    dotHoverStyle: string;
+    legendContainerStyle: string;
+    legendItemStyle: string;
+    legendDotStyle: string;
+    legendLabelStyle: string;
+    colors: string[];
+};
+/**
+ * Get fill color for category (supports both CSS variables and direct colors)
+ */
+export declare function getCategoryColor(colors: string[], categoryIndex: number): string;

package/dist/components/charts/ScatterPlot/ScatterPlot.theme.js

@@ -0,0 +1,38 @@
+/**
+ * ScatterPlot Theme - Uses CSS variables for production-ready styling
+ */
+const scatterPlotTheme = {
+    containerStyle: 'relative inline-flex flex-col items-center w-full',
+    svgStyle: 'overflow-visible',
+    emptyStateStyle: 'flex items-center justify-center h-full text-[var(--color-text-muted)] text-sm',
+    // Grid styles
+    gridLineStyle: 'stroke-[var(--color-border)]',
+    // Axis styles
+    axisLineStyle: 'stroke-[var(--color-text-secondary)]',
+    axisLabelStyle: 'fill-[var(--color-text-secondary)]',
+    // Data point styles
+    dotStyle: 'fill-opacity-70 stroke-white',
+    dotHoverStyle: 'fill-opacity-100',
+    // Legend styles
+    legendContainerStyle: 'flex flex-wrap gap-3 mt-4 justify-center',
+    legendItemStyle: 'flex items-center gap-2',
+    legendDotStyle: 'w-3 h-3 rounded-full',
+    legendLabelStyle: 'text-sm text-[var(--color-text-secondary)]',
+    // Default category colors using CSS variables
+    colors: [
+        'var(--color-primary)',
+        'var(--color-success)',
+        'var(--color-warning)',
+        'var(--color-danger)',
+        'hsl(262, 83%, 58%)', // violet
+        'hsl(328, 86%, 70%)', // pink
+    ],
+};
+/**
+ * Get fill color for category (supports both CSS variables and direct colors)
+ */
+function getCategoryColor(colors, categoryIndex) {
+    return colors[categoryIndex % colors.length];
+}
+
+export { getCategoryColor, scatterPlotTheme };

package/dist/components/charts/ScatterPlot/ScatterPlot.types.d.ts

@@ -0,0 +1,71 @@
+import { StandardChartDisplayProps } from '../types/chart.types';
+/**
+ * Data point for ScatterPlot
+ */
+export interface ScatterPlotDataPoint {
+    /** X-axis value */
+    x: number;
+    /** Y-axis value */
+    y: number;
+    /** Optional size for bubble chart effect */
+    size?: number;
+    /** Optional label */
+    label?: string;
+    /** Optional category for coloring */
+    category?: string;
+}
+/**
+ * ScatterPlot props - extends standardized chart props
+ */
+export interface ScatterPlotProps extends StandardChartDisplayProps {
+    /** Data points */
+    data: ScatterPlotDataPoint[];
+    /** X-axis label */
+    xLabel?: string;
+    /** Y-axis label */
+    yLabel?: string;
+    /** Point size (if not using data.size) */
+    dotRadius?: number;
+    pointSize?: number;
+    /** Custom colors for categories (using CSS variables) */
+    colors?: string[];
+    /** Enable tooltip on hover */
+    showTooltip?: boolean;
+    /** Accessibility props */
+    title?: string;
+    description?: string;
+    enableKeyboardNavigation?: boolean;
+    /** Additional className */
+    className?: string;
+    /** className overrides for chart elements (shadcn approach) */
+    svgClassName?: string;
+    dotClassName?: string;
+    gridClassName?: string;
+    axisClassName?: string;
+}
+/**
+ * Default values using centralized defaults
+ */
+export declare const SCATTER_PLOT_DEFAULTS: {
+    readonly dotRadius: 4;
+    readonly pointSize: 4;
+    readonly showTooltip: true;
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly barRadius: 32;
+    readonly cellRadius: 4;
+    readonly radius: 20;
+    readonly strokeWidth: 2;
+    readonly gap: 4;
+    readonly categoryGap: 16;
+    readonly curved: true;
+    readonly curveType: import("../types/chart.types").CurveType;
+    readonly fillOpacity: 0.3;
+    readonly showStroke: true;
+    readonly showDots: true;
+    readonly orientation: "vertical" | "horizontal";
+    readonly stacked: false;
+    readonly variant: import("../types/chart.types").ChartVariant;
+    readonly enableKeyboardNavigation: true;
+};

package/dist/components/charts/ScatterPlot/ScatterPlot.types.js

@@ -0,0 +1,12 @@
+import { CHART_DEFAULTS } from '../types/chart.types.js';
+
+/**
+ * Default values using centralized defaults
+ */
+const SCATTER_PLOT_DEFAULTS = {
+    ...CHART_DEFAULTS,
+    dotRadius: 4,
+    showTooltip: true,
+};
+
+export { SCATTER_PLOT_DEFAULTS };

package/dist/components/charts/ScatterPlot/index.d.ts

@@ -0,0 +1,3 @@
+export { ScatterPlot } from './ScatterPlot';
+export type { ScatterPlotProps, ScatterPlotDataPoint } from './ScatterPlot.types';
+export { scatterPlotTheme } from './ScatterPlot.theme';

package/dist/components/charts/StackedBarChart/StackedBarChart.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { StackedBarChartProps } from "./StackedBarChart.types";
+export declare const StackedBarChart: React.FC<StackedBarChartProps>;