flikkui 0.1.0-beta.11 → 0.1.0-beta.12

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

@@ -0,0 +1,443 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useId, useEffect } 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 { HorizontalGrid } from '../shared/ChartGrid/HorizontalGrid.js';
+import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { ChartMarker } from '../shared/ChartMarker/ChartMarker.js';
+import { ChartCrosshair } from '../shared/ChartCrosshair/ChartCrosshair.js';
+import { LINE_CHART_DEFAULTS } from './LineChart.types.js';
+
+// Production-ready color system with CORRECT CSS variable syntax
+var getSeriesColorClass = function (index) {
+    var colors = [
+        "stroke-[var(--color-primary)]",
+        "stroke-[var(--color-warning)]",
+        "stroke-[var(--color-success)]",
+        "stroke-[var(--color-danger)]",
+    ];
+    return colors[index % colors.length];
+};
+// Get color value for SVG elements and tooltips
+var getSeriesFillColor = function (index) {
+    var colorVars = [
+        "var(--color-primary)",
+        "var(--color-warning)",
+        "var(--color-success)",
+        "var(--color-danger)",
+    ];
+    return colorVars[index % colorVars.length];
+};
+// Monotone cubic interpolation implementation based on D3's curveMonotoneX
+var generateMonotonePath = function (points) {
+    if (points.length === 0)
+        return "";
+    if (points.length === 1)
+        return "M ".concat(points[0].x, " ").concat(points[0].y);
+    var path = "M ".concat(points[0].x, " ").concat(points[0].y);
+    for (var i = 1; i < points.length; i++) {
+        var prev = points[i - 1];
+        var curr = points[i];
+        // Calculate control points for smooth curve
+        var dx = curr.x - prev.x;
+        curr.y - prev.y;
+        // Control point distance (adjust for smoothness)
+        var controlDistance = dx * 0.3;
+        var cp1x = prev.x + controlDistance;
+        var cp1y = prev.y;
+        var cp2x = curr.x - controlDistance;
+        var cp2y = curr.y;
+        path += " C ".concat(cp1x, " ").concat(cp1y, ", ").concat(cp2x, " ").concat(cp2y, ", ").concat(curr.x, " ").concat(curr.y);
+    }
+    return path;
+};
+var generateLinearPath = function (points) {
+    if (points.length === 0)
+        return "";
+    var path = "M ".concat(points[0].x, " ").concat(points[0].y);
+    for (var i = 1; i < points.length; i++) {
+        path += " L ".concat(points[i].x, " ").concat(points[i].y);
+    }
+    return path;
+};
+// Simple curve implementation
+var generateCurvePath = function (points, curveType) {
+    if (curveType === void 0) { curveType = "monotone"; }
+    if (points.length === 0)
+        return "";
+    if (points.length === 1)
+        return "M ".concat(points[0].x, " ").concat(points[0].y);
+    switch (curveType) {
+        case "monotone":
+            return generateMonotonePath(points);
+        case "linear":
+            return generateLinearPath(points);
+        default:
+            return generateLinearPath(points);
+    }
+};
+var LineChart = function (_a) {
+    var _b;
+    var data = _a.data, config = _a.config, 
+    // Standardized display props with defaults
+    _c = _a.showGrid, 
+    // Standardized display props with defaults
+    showGrid = _c === void 0 ? LINE_CHART_DEFAULTS.showGrid : _c, _d = _a.showXAxis, showXAxis = _d === void 0 ? LINE_CHART_DEFAULTS.showXAxis : _d, _e = _a.showYAxis, showYAxis = _e === void 0 ? LINE_CHART_DEFAULTS.showYAxis : _e, propMinValue = _a.minValue, propMaxValue = _a.maxValue, 
+    // Simple semantic color prop
+    _f = _a.color; 
+    // Simple semantic color prop
+    _f === void 0 ? LINE_CHART_DEFAULTS.color : _f; 
+    var // Standardized visual props with defaults (renamed from line-specific names)
+    dotRadius = _a.dotRadius, radius = _a.radius, // @deprecated Use dotRadius instead
+    _g = _a.strokeWidth, // @deprecated Use dotRadius instead
+    strokeWidth = _g === void 0 ? LINE_CHART_DEFAULTS.strokeWidth : _g, _h = _a.curved, curved = _h === void 0 ? LINE_CHART_DEFAULTS.curved : _h, _j = _a.curveType, curveType = _j === void 0 ? LINE_CHART_DEFAULTS.curveType : _j, _k = _a.showDots, showDots = _k === void 0 ? LINE_CHART_DEFAULTS.showDots : _k, 
+    // Base props
+    className = _a.className, title = _a.title, description = _a.description, _l = _a.enableKeyboardNavigation, enableKeyboardNavigation = _l === void 0 ? LINE_CHART_DEFAULTS.enableKeyboardNavigation : _l, children = _a.children, props = __rest(_a, ["data", "config", "showGrid", "showXAxis", "showYAxis", "minValue", "maxValue", "color", "dotRadius", "radius", "strokeWidth", "curved", "curveType", "showDots", "className", "title", "description", "enableKeyboardNavigation", "children"]);
+    // Resolve dotRadius with backward compatibility
+    var resolvedDotRadius = (_b = dotRadius !== null && dotRadius !== void 0 ? dotRadius : radius) !== null && _b !== void 0 ? _b : LINE_CHART_DEFAULTS.dotRadius;
+    // Development warning for deprecated radius prop
+    if (process.env.NODE_ENV !== "production" && radius !== undefined) {
+        console.warn("[LineChart]: The `radius` prop is deprecated and will be removed in a future version. " +
+            "Use `dotRadius` instead.");
+    }
+    // Simplified color system - no complex theme hook needed
+    var containerRef = useRef(null);
+    var _m = useState({ width: 600, height: 400 }), dimensions = _m[0], setDimensions = _m[1];
+    var revealClipId = useId();
+    var ANIMATION_DURATION = 1.5;
+    var _o = useState(null), hoveredPoint = _o[0], setHoveredPoint = _o[1];
+    // Detect if device is mobile/touch
+    var isMobile = typeof window !== "undefined" &&
+        ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+    // Use the new tooltip positioning hook
+    var _p = useTooltipPosition({
+        containerRef: containerRef,
+        isMobile: isMobile,
+    }), tooltipData = _p.tooltipData, tooltipRef = _p.tooltipRef, handleMouseEnter = _p.handleMouseEnter, handleMouseMove = _p.handleMouseMove, handleMouseLeave = _p.handleMouseLeave;
+    // Use accessibility hook
+    var _q = useChartAccessibility({
+        chartType: "line",
+        data: data,
+        config: config,
+        title: title,
+        description: description,
+        enableKeyboardNavigation: enableKeyboardNavigation,
+    }), chartAccessibilityProps = _q.chartAccessibilityProps, descriptionProps = _q.descriptionProps, focusedElementIndex = _q.focusedElementIndex, isKeyboardMode = _q.isKeyboardMode, handleMouseInteraction = _q.handleMouseInteraction;
+    // Measure container dimensions
+    useEffect(function () {
+        var updateDimensions = function () {
+            if (containerRef.current) {
+                var _a = containerRef.current.getBoundingClientRect(), width = _a.width, height = _a.height;
+                setDimensions({
+                    width: width || 600,
+                    height: height || 400,
+                });
+            }
+        };
+        updateDimensions();
+        var resizeObserver = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return function () {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    // Early return if no data
+    if (!data || data.length === 0) {
+        return (React__default.createElement("div", __assign({ className: cn("chart-container flex items-center justify-center text-[var(--color-text-placeholder)]", className), role: "img", "aria-label": "Empty line chart" }, props),
+            React__default.createElement("span", null, "No data available")));
+    }
+    // Calculate dimensions
+    var margin = {
+        top: 0,
+        right: 0,
+        bottom: showXAxis ? 40 : 0, // Reduce bottom margin when X-axis is hidden
+        left: showYAxis ? 60 : 0, // Reduce left margin when Y-axis is hidden
+    };
+    var innerWidth = dimensions.width - margin.left - margin.right;
+    var innerHeight = dimensions.height - margin.top - margin.bottom;
+    // Get all data keys from config
+    var dataKeys = Object.keys(config);
+    // Calculate scales
+    var rawMaxValue = Math.max.apply(Math, data.map(function (item) {
+        return Math.max.apply(Math, dataKeys.map(function (key) {
+            var value = item[key];
+            return typeof value === "number" ? value : 0;
+        }));
+    }));
+    var minValue = propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0;
+    var maxValue = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : (function () {
+        if (rawMaxValue <= 10)
+            return Math.ceil(rawMaxValue);
+        if (rawMaxValue <= 100)
+            return Math.ceil(rawMaxValue / 5) * 5;
+        if (rawMaxValue <= 1000)
+            return Math.ceil(rawMaxValue / 50) * 50;
+        if (rawMaxValue <= 10000)
+            return Math.ceil(rawMaxValue / 500) * 500;
+        return Math.ceil(rawMaxValue / 1000) * 1000;
+    })();
+    // Calculate point position
+    var getPointPosition = function (dataIndex, value) {
+        // Spread points evenly across the full width
+        // First point at left edge (margin.left), last point at right edge (margin.left + innerWidth)
+        var x = data.length === 1
+            ? margin.left + innerWidth / 2 // Center single point
+            : margin.left + (dataIndex / (data.length - 1)) * innerWidth;
+        var y = margin.top +
+            innerHeight -
+            ((value - minValue) / (maxValue - minValue)) * innerHeight;
+        return { x: x, y: y };
+    };
+    // Generate SVG path for line with null value handling (creates gaps for nulls)
+    var generatePath = function (key) {
+        var segments = [];
+        var currentSegment = [];
+        data.forEach(function (item, index) {
+            var rawValue = item[key];
+            var isNull = rawValue === null || rawValue === undefined;
+            if (isNull) {
+                // End current segment and start a new one (creates gap)
+                if (currentSegment.length > 0) {
+                    segments.push(currentSegment);
+                    currentSegment = [];
+                }
+            }
+            else {
+                var value = typeof rawValue === "number" ? rawValue : 0;
+                var _a = getPointPosition(index, value), x = _a.x, y = _a.y;
+                currentSegment.push({ x: x, y: y });
+            }
+        });
+        // Add the last segment if it has points
+        if (currentSegment.length > 0) {
+            segments.push(currentSegment);
+        }
+        // Generate path for each segment
+        return segments
+            .map(function (segment) {
+            return generateCurvePath(segment, curved ? curveType : "linear");
+        })
+            .join(" ");
+    };
+    // Handle keyboard focus tooltips
+    useEffect(function () {
+        if (isKeyboardMode &&
+            focusedElementIndex >= 0 &&
+            focusedElementIndex < data.length) {
+            var item_1 = data[focusedElementIndex];
+            // Create multi-series tooltip data
+            var seriesData = dataKeys.map(function (seriesKey, keyIndex) {
+                var _a, _b;
+                var seriesValue = item_1[seriesKey];
+                var numValue = typeof seriesValue === "number" ? seriesValue : 0;
+                return {
+                    key: seriesKey,
+                    label: ((_a = config[seriesKey]) === null || _a === void 0 ? void 0 : _a.label) || seriesKey,
+                    value: numValue,
+                    color: ((_b = config[seriesKey]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(keyIndex),
+                };
+            });
+            var content = {
+                category: item_1.name || "Category ".concat(focusedElementIndex + 1),
+                series: seriesData,
+            };
+            // Calculate position for focused point
+            var pointX = data.length === 1
+                ? margin.left + innerWidth / 2
+                : margin.left +
+                    (focusedElementIndex / (data.length - 1)) * innerWidth;
+            var svgCoordinates = {
+                x: pointX,
+                y: margin.top + innerHeight / 2,
+                dimensions: dimensions,
+            };
+            // Simulate mouse enter for keyboard focus
+            var syntheticEvent = new MouseEvent("mouseenter", {
+                clientX: pointX,
+                clientY: margin.top + innerHeight / 2,
+            });
+            handleMouseEnter(syntheticEvent, content, svgCoordinates);
+        }
+        else if (isKeyboardMode && focusedElementIndex === -1) {
+            // Only clear tooltip when explicitly exiting keyboard mode (Escape key)
+            handleMouseLeave();
+        }
+        // Don't clear tooltips when switching from keyboard to mouse mode
+    }, [
+        isKeyboardMode,
+        focusedElementIndex,
+        data,
+        config,
+        dimensions,
+        margin,
+        innerWidth,
+        innerHeight,
+        dataKeys,
+        handleMouseEnter,
+        handleMouseLeave,
+    ]);
+    return (React__default.createElement("div", __assign({ ref: containerRef, className: cn("chart-container w-full h-full", className) }, chartAccessibilityProps, { onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction }, props),
+        descriptionProps && React__default.createElement("div", __assign({}, descriptionProps)),
+        React__default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 ".concat(dimensions.width, " ").concat(dimensions.height), className: "overflow-visible", role: "presentation" },
+            React__default.createElement("defs", null,
+                React__default.createElement("filter", { id: "line-shadow", x: "-20%", y: "-20%", width: "140%", height: "140%" },
+                    React__default.createElement("feDropShadow", { dx: "8", dy: "8", stdDeviation: "8", floodOpacity: "0.15", floodColor: "#000000" })),
+                React__default.createElement("linearGradient", { id: "vertical-fade", x1: "0%", y1: "0%", x2: "0%", y2: "100%" },
+                    React__default.createElement("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }),
+                    React__default.createElement("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }),
+                    React__default.createElement("stop", { offset: "50%", stopColor: "#6b7280", stopOpacity: "0.5" }),
+                    React__default.createElement("stop", { offset: "60%", stopColor: "#6b7280", stopOpacity: "0.3" }),
+                    React__default.createElement("stop", { offset: "100%", stopColor: "#6b7280", stopOpacity: "0" })),
+                React__default.createElement("linearGradient", { id: "horizontal-fade", x1: "0%", y1: "0%", x2: "100%", y2: "0%" },
+                    React__default.createElement("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }),
+                    React__default.createElement("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }),
+                    React__default.createElement("stop", { offset: "50%", stopColor: "#6b7280", stopOpacity: "0.5" }),
+                    React__default.createElement("stop", { offset: "60%", stopColor: "#6b7280", stopOpacity: "0.3" }),
+                    React__default.createElement("stop", { offset: "100%", stopColor: "#6b7280", stopOpacity: "0" })),
+                React__default.createElement("clipPath", { id: revealClipId },
+                    React__default.createElement(motion.rect, { initial: { width: 0, x: margin.left, y: margin.top }, animate: {
+                            width: innerWidth + margin.right,
+                            x: margin.left,
+                            y: margin.top,
+                        }, height: innerHeight, transition: {
+                            duration: ANIMATION_DURATION,
+                            ease: "easeOut",
+                        } }))),
+            React__default.createElement(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }),
+            React__default.createElement(ChartCrosshair, { show: hoveredPoint !== null, x: hoveredPoint !== null
+                    ? data.length === 1
+                        ? margin.left + innerWidth / 2
+                        : margin.left +
+                            (hoveredPoint.index / (data.length - 1)) * innerWidth
+                    : 0, y: hoveredPoint !== null && dataKeys.length === 1
+                    ? (function () {
+                        var item = data[hoveredPoint.index];
+                        var singleKey = dataKeys[0];
+                        var singleValue = item[singleKey];
+                        var numValue = typeof singleValue === "number" ? singleValue : 0;
+                        return (margin.top +
+                            innerHeight -
+                            ((numValue - minValue) / (maxValue - minValue)) *
+                                innerHeight);
+                    })()
+                    : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1 }),
+            React__default.createElement(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: function (value) {
+                    if (value >= 1000)
+                        return "".concat((value / 1000).toFixed(0), "k");
+                    return value.toString();
+                } }),
+            React__default.createElement("g", { className: "chart-lines" }, dataKeys.map(function (key, keyIndex) {
+                var targetPath = generatePath(key);
+                var colorClass = getSeriesColorClass(keyIndex);
+                return (React__default.createElement("g", { key: key, clipPath: "url(#".concat(revealClipId, ")") },
+                    React__default.createElement("path", { d: targetPath, fill: "none", strokeWidth: strokeWidth, strokeLinecap: "round", className: cn("transition-all duration-200", colorClass), filter: "url(#line-shadow)" }),
+                    showDots &&
+                        data.map(function (item, dataIndex) {
+                            var rawValue = item[key];
+                            var isNull = rawValue === null || rawValue === undefined;
+                            var value = isNull
+                                ? 0
+                                : typeof rawValue === "number"
+                                    ? rawValue
+                                    : 0;
+                            // Don't render dots for null values
+                            if (isNull)
+                                return null;
+                            var _a = getPointPosition(dataIndex, value), x = _a.x, y = _a.y;
+                            var isFocused = isKeyboardMode && focusedElementIndex === dataIndex;
+                            return (React__default.createElement(motion.g, { key: "".concat(key, "-").concat(dataIndex), initial: { opacity: 0, scale: 0 }, animate: { opacity: 1, scale: 1 }, transition: {
+                                    // Sync with the line reveal: calculate when the line reaches this point
+                                    delay: (dataIndex / (data.length - 1)) *
+                                        ANIMATION_DURATION,
+                                    type: "spring",
+                                    stiffness: 260,
+                                    damping: 20,
+                                }, style: {
+                                    originX: "50%",
+                                    originY: "50%",
+                                    transformBox: "fill-box",
+                                } },
+                                React__default.createElement(ChartMarker, { cx: x, cy: y, radius: isFocused
+                                        ? resolvedDotRadius + 2
+                                        : resolvedDotRadius, colorClass: cn(colorClass, isFocused &&
+                                        "stroke-[var(--color-primary-600)] stroke-2") })));
+                        })));
+            })),
+            !showDots && hoveredPoint !== null && (React__default.createElement("g", { className: "chart-hover-markers" }, dataKeys.map(function (key, keyIndex) {
+                var item = data[hoveredPoint.index];
+                var rawValue = item[key];
+                var isNull = rawValue === null || rawValue === undefined;
+                var value = isNull
+                    ? 0
+                    : typeof rawValue === "number"
+                        ? rawValue
+                        : 0;
+                // Don't render hover markers for null values
+                if (isNull)
+                    return null;
+                var _a = getPointPosition(hoveredPoint.index, value), x = _a.x, y = _a.y;
+                var colorClass = getSeriesColorClass(keyIndex);
+                return (React__default.createElement(ChartMarker, { key: "hover-".concat(key, "-").concat(hoveredPoint.index), cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass }));
+            }))),
+            React__default.createElement("g", { className: "chart-hover-areas" }, data.map(function (item, dataIndex) {
+                // Calculate hover area based on new point positioning
+                var pointX = data.length === 1
+                    ? margin.left + innerWidth / 2
+                    : margin.left + (dataIndex / (data.length - 1)) * innerWidth;
+                // Create hover area around each point
+                var hoverWidth = data.length === 1 ? innerWidth : innerWidth / (data.length - 1);
+                var hoverX = data.length === 1
+                    ? margin.left
+                    : Math.max(margin.left, pointX - hoverWidth / 2);
+                // Ensure hover area doesn't exceed chart bounds
+                var adjustedWidth = data.length === 1
+                    ? innerWidth
+                    : Math.min(hoverWidth, margin.left + innerWidth - hoverX);
+                return (React__default.createElement("rect", { key: "hover-".concat(dataIndex), x: hoverX, y: margin.top, width: adjustedWidth, height: innerHeight, fill: "transparent", className: "cursor-pointer", onMouseEnter: function (e) {
+                        setHoveredPoint({ index: dataIndex, key: dataKeys[0] });
+                        // Create multi-series tooltip data
+                        var seriesData = dataKeys.map(function (seriesKey, keyIndex) {
+                            var _a, _b;
+                            var seriesValue = item[seriesKey];
+                            var numValue = typeof seriesValue === "number" ? seriesValue : 0;
+                            return {
+                                key: seriesKey,
+                                label: ((_a = config[seriesKey]) === null || _a === void 0 ? void 0 : _a.label) || seriesKey,
+                                value: numValue,
+                                color: ((_b = config[seriesKey]) === null || _b === void 0 ? void 0 : _b.color) ||
+                                    getSeriesFillColor(keyIndex),
+                            };
+                        });
+                        var content = {
+                            category: item.name || "Category ".concat(dataIndex + 1),
+                            series: seriesData,
+                        };
+                        var svgCoordinates = {
+                            x: pointX,
+                            y: margin.top + innerHeight / 2,
+                            dimensions: dimensions,
+                        };
+                        handleMouseEnter(e, content, svgCoordinates);
+                    }, onMouseMove: function (e) {
+                        if ((hoveredPoint === null || hoveredPoint === void 0 ? void 0 : hoveredPoint.index) === dataIndex) {
+                            var svgCoordinates = {
+                                x: pointX,
+                                y: margin.top + innerHeight / 2,
+                                dimensions: dimensions,
+                            };
+                            handleMouseMove(e, svgCoordinates);
+                        }
+                    }, onMouseLeave: handleMouseLeave }));
+            })),
+            React__default.createElement(XAxis, { show: showXAxis, data: data, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / data.length, categoryGap: 0, alignWithEdge: true })),
+        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: "line" }),
+        children));
+};
+
+export { LineChart };

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

@@ -0,0 +1,7 @@
+import { __assign } from '/Users/ggn/Development/ui-flik/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), { color: undefined, dotRadius: CHART_DEFAULTS.dotRadius, radius: CHART_DEFAULTS.dotRadius, strokeWidth: CHART_DEFAULTS.strokeWidth, curved: CHART_DEFAULTS.curved, curveType: CHART_DEFAULTS.curveType, showDots: CHART_DEFAULTS.showDots });
+
+export { LINE_CHART_DEFAULTS };