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

package/dist/components/charts/Heatmap/Heatmap.js

@@ -0,0 +1,166 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useMemo, useEffect } from 'react';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
+import { useChart } from '../ChartContainer.js';
+import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { HeatmapCell } from './HeatmapCell.js';
+import { processHeatmapData, createGridMatrix, calculateIntensity, getDefaultTooltipContent } from './utils/heatmapUtils.js';
+import { HeatmapLegend } from './HeatmapLegend.js';
+import { heatmapTheme } from './Heatmap.theme.js';
+
+/**
+ * Heatmap component for visualizing data in a grid format with color intensity
+ * Supports weekly, monthly, hourly views and custom data structures
+ */
+var Heatmap = function (_a) {
+    var dataProp = _a.data, configProp = _a.config, _b = _a.color, color = _b === void 0 ? 'primary' : _b, _c = _a.colorScale, colorScale = _c === void 0 ? { minOpacity: 0.1 } : _c, _d = _a.layout, layout = _d === void 0 ? { gap: 6 } : _d, _e = _a.axis, axis = _e === void 0 ? { showXAxis: true, showYAxis: true } : _e, _f = _a.tooltip, tooltip = _f === void 0 ? { enabled: true } : _f, _g = _a.legend, legend = _g === void 0 ? { enabled: true } : _g, valueRange = _a.valueRange, onCellClick = _a.onCellClick, cellRenderer = _a.cellRenderer, className = _a.className, _h = _a.variant, variant = _h === void 0 ? 'default' : _h, children = _a.children, props = __rest(_a, ["data", "config", "color", "colorScale", "layout", "axis", "tooltip", "legend", "valueRange", "onCellClick", "cellRenderer", "className", "variant", "children"]);
+    // Get data and config from context if not provided as props
+    var chartContext = useChart();
+    var data = dataProp || chartContext.data;
+    var config = configProp || chartContext.config;
+    var containerRef = useRef(null);
+    var _j = useState({ width: 600, height: 400 }); _j[0]; var setDimensions = _j[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 _k = useTooltipPosition({
+        containerRef: containerRef,
+        isMobile: isMobile,
+    }), tooltipData = _k.tooltipData, tooltipRef = _k.tooltipRef, handleMouseEnter = _k.handleMouseEnter, handleMouseMove = _k.handleMouseMove, handleMouseLeave = _k.handleMouseLeave;
+    // Process data
+    var processedData = useMemo(function () {
+        return processHeatmapData(data, valueRange);
+    }, [data, valueRange]);
+    var xCategories = processedData.xCategories, yCategories = processedData.yCategories, minValue = processedData.minValue, maxValue = processedData.maxValue;
+    // Create grid matrix
+    var gridMatrix = useMemo(function () {
+        return createGridMatrix(data, xCategories, yCategories);
+    }, [data, xCategories, yCategories]);
+    // 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, height: height });
+            }
+        };
+        updateDimensions();
+        window.addEventListener('resize', updateDimensions);
+        return function () { return window.removeEventListener('resize', updateDimensions); };
+    }, []);
+    // Simple color resolution - similar to AreaChart
+    var getCellColor = function () {
+        var _a;
+        // Check config for custom color
+        if ((_a = config === null || config === void 0 ? void 0 : config.value) === null || _a === void 0 ? void 0 : _a.color) {
+            var customColor = config.value.color;
+            // Support direct hex/rgb colors
+            if (customColor.startsWith('#') || customColor.startsWith('rgb')) {
+                return customColor;
+            }
+            // Support CSS variables
+            if (customColor.startsWith('var(')) {
+                return customColor;
+            }
+            // Support semantic color strings
+            return "var(--color-".concat(customColor, ")");
+        }
+        // Use color prop (semantic color)
+        return "var(--color-".concat(color, ")");
+    };
+    var cellColor = getCellColor();
+    // Handle cell hover using new tooltip system
+    var handleCellHover = function (data, event) {
+        if (!tooltip.enabled)
+            return;
+        var content = tooltip.formatter
+            ? tooltip.formatter(data)
+            : getDefaultTooltipContent(data);
+        handleMouseEnter(event, content);
+    };
+    // Handle cell mouse move using new tooltip system
+    var handleCellMouseMove = function (data, event) {
+        if (!tooltip.enabled || !tooltipData)
+            return;
+        handleMouseMove(event);
+    };
+    // Handle cell leave using new tooltip system
+    var handleCellLeave = function () {
+        if (!tooltip.enabled)
+            return;
+        handleMouseLeave();
+    };
+    // Calculate grid styles
+    var gridStyles = {
+        display: 'grid',
+        gridTemplateColumns: "repeat(".concat(xCategories.length, ", 1fr)"),
+        gridTemplateRows: "repeat(".concat(yCategories.length, ", 1fr)"),
+        gap: typeof layout.gap === 'number' ? "".concat(layout.gap, "px") : layout.gap,
+        width: '100%',
+        height: '100%',
+    };
+    // Render axis labels - using theme for base styles
+    var renderXAxisLabels = function () {
+        if (!axis.showXAxis)
+            return null;
+        return (React__default.createElement("div", { className: cn("flex justify-between items-center px-1 py-2", heatmapTheme.axisLabelStyle), style: { gridColumn: "1 / -1" }, role: "list", "aria-label": "X-axis labels", "aria-describedby": "heatmap-x-axis-description" },
+            xCategories.map(function (category, index) { return (React__default.createElement("div", { key: category, className: "flex-1 text-center px-1", style: {
+                    transform: axis.xAxisRotation ? "rotate(".concat(axis.xAxisRotation, "deg)") : undefined
+                }, role: "listitem", "aria-label": "X-axis label: ".concat(axis.xAxisFormatter
+                    ? axis.xAxisFormatter(category, index)
+                    : String(category)) }, axis.xAxisFormatter
+                ? axis.xAxisFormatter(category, index)
+                : String(category))); }),
+            React__default.createElement("span", { id: "heatmap-x-axis-description", className: "sr-only" },
+                "X-axis contains ",
+                xCategories.length,
+                " categories representing the horizontal dimension of the heatmap")));
+    };
+    var renderYAxisLabels = function () {
+        if (!axis.showYAxis)
+            return null;
+        return (React__default.createElement("div", { className: cn("grid pr-3", heatmapTheme.axisLabelStyle), style: {
+                gridTemplateRows: "repeat(".concat(yCategories.length, ", 1fr)"),
+                gap: typeof layout.gap === 'number' ? "".concat(layout.gap, "px") : layout.gap,
+                height: '100%',
+            }, role: "list", "aria-label": "Y-axis labels", "aria-describedby": "heatmap-y-axis-description" },
+            yCategories.map(function (category, index) { return (React__default.createElement("div", { key: category, className: "flex items-center justify-end", style: {
+                    transform: axis.yAxisRotation ? "rotate(".concat(axis.yAxisRotation, "deg)") : undefined
+                }, role: "listitem", "aria-label": "Y-axis label: ".concat(axis.yAxisFormatter
+                    ? axis.yAxisFormatter(category, index)
+                    : String(category)) }, axis.yAxisFormatter
+                ? axis.yAxisFormatter(category, index)
+                : String(category))); }),
+            React__default.createElement("span", { id: "heatmap-y-axis-description", className: "sr-only" },
+                "Y-axis contains ",
+                yCategories.length,
+                " categories representing the vertical dimension of the heatmap")));
+    };
+    return (React__default.createElement("div", __assign({ ref: containerRef, className: cn(heatmapTheme.containerStyle, variant === 'bordered' && 'border border-gray-200 dark:border-gray-700 rounded-lg p-4', variant === 'minimal' && 'p-2', className) }, props),
+        React__default.createElement("div", { className: "flex flex-1 min-h-0" },
+            axis.showYAxis && (React__default.createElement("div", { className: "flex-shrink-0 w-16 flex flex-col" },
+                axis.showXAxis && React__default.createElement("div", { className: "flex-shrink-0 h-8" }),
+                React__default.createElement("div", { className: "flex-1" }, renderYAxisLabels()))),
+            React__default.createElement("div", { className: "flex-1 flex flex-col min-w-0" },
+                axis.showXAxis && (React__default.createElement("div", { className: "flex-shrink-0 h-8" }, renderXAxisLabels())),
+                React__default.createElement("div", { className: "flex-1 relative min-h-0" },
+                    React__default.createElement(motion.div, { style: gridStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5, ease: 'easeOut' }, className: heatmapTheme.gridStyle }, gridMatrix.flat().map(function (cellData, index) {
+                        var intensity = calculateIntensity(cellData.value, minValue, maxValue);
+                        "".concat(cellData.x, "-").concat(cellData.y);
+                        // Skip null values entirely
+                        if (cellData.value === null) {
+                            return (React__default.createElement("div", { key: "".concat(cellData.x, "-").concat(cellData.y, "-").concat(index), className: "bg-transparent" }));
+                        }
+                        var CellComponent = cellRenderer || HeatmapCell;
+                        return (React__default.createElement(CellComponent, { key: "".concat(cellData.x, "-").concat(cellData.y, "-").concat(index), data: cellData, intensity: intensity, minOpacity: colorScale === null || colorScale === void 0 ? void 0 : colorScale.minOpacity, color: cellColor, onClick: onCellClick, onHover: handleCellHover, onMouseMove: handleCellMouseMove, onLeave: handleCellLeave, className: "rounded-sm" }));
+                    }))))),
+        ((legend === null || legend === void 0 ? void 0 : legend.enabled) !== false) && (React__default.createElement("div", { className: "flex-shrink-0 mt-2" },
+            React__default.createElement(HeatmapLegend, { colorKey: "value", color: cellColor, minValue: minValue, maxValue: maxValue, labels: legend === null || legend === void 0 ? void 0 : legend.labels }))),
+        tooltip.enabled && (React__default.createElement(ChartTooltip, { content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef })),
+        children));
+};
+
+export { Heatmap };

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

@@ -0,0 +1,18 @@
+/**
+ * Heatmap theme configuration
+ * Uses production-ready CSS variables from global.scss
+ */
+var heatmapTheme = {
+    // Container with variants handled inline
+    containerStyle: "relative w-full h-full min-h-[200px] flex flex-col",
+    // Grid container (applied via inline styles for CSS Grid)
+    gridStyle: "absolute inset-0",
+    // Base cell styles (individual cells add opacity via inline styles)
+    cellBaseStyle: "relative w-full h-full cursor-pointer border border-transparent transition-all duration-500 animate-[flicker_0.6s_ease-out_forwards]",
+    // Axis labels using standard Tailwind classes (acceptable for labels)
+    axisLabelStyle: "text-xs text-gray-600 dark:text-gray-400 font-medium select-none",
+    // Legend using correct CSS variables
+    legendStyle: "w-full space-y-1.5 mt-3",
+};
+
+export { heatmapTheme };

package/dist/components/charts/Heatmap/HeatmapCell.js

@@ -0,0 +1,91 @@
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useRef } from 'react';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { heatmapTheme } from './Heatmap.theme.js';
+
+/**
+ * Individual heatmap cell component with hover animations and color intensity
+ */
+var HeatmapCell = function (_a) {
+    var data = _a.data, intensity = _a.intensity, _b = _a.minOpacity, minOpacity = _b === void 0 ? 0.1 : _b, _c = _a.color, color = _c === void 0 ? 'var(--color-primary)' : _c, // Default to primary color (correct CSS variable)
+    className = _a.className, onClick = _a.onClick, onHover = _a.onHover, onMouseMove = _a.onMouseMove, onLeave = _a.onLeave, children = _a.children;
+    // Calculate cell color and opacity based on intensity
+    var getColorStyle = function (intensity) {
+        // Only return empty object for null values (will use CSS class)
+        if (data.value === null) {
+            return {};
+        }
+        // Calculate base opacity from intensity
+        var baseOpacity;
+        // For 0 values, use minOpacity
+        if (data.value === 0) {
+            baseOpacity = minOpacity;
+        }
+        else {
+            // Map intensity (0-1) to opacity levels (minOpacity-1.0) in 10% increments
+            var opacityStep = Math.ceil(intensity * 10) / 10; // Round up to nearest 10%
+            baseOpacity = Math.max(minOpacity, Math.min(1.0, opacityStep));
+        }
+        // Use the passed color prop with calculated opacity
+        return {
+            backgroundColor: color,
+            opacity: baseOpacity
+        };
+    };
+    var getColorClass = function (intensity) {
+        // Only use gray colors for null values (missing data)
+        if (data.value === null) {
+            return 'bg-transparent border border-gray-200/80';
+        }
+        // For non-null values, we'll use inline styles
+        return '';
+    };
+    var handleClick = function () {
+        if (onClick) {
+            onClick(data);
+        }
+    };
+    var handleMouseEnter = function (event) {
+        if (onHover) {
+            onHover(data, event);
+        }
+    };
+    var handleMouseMove = function (event) {
+        if (onMouseMove) {
+            onMouseMove(data, event);
+        }
+    };
+    var handleMouseLeave = function () {
+        if (onLeave) {
+            onLeave();
+        }
+    };
+    var handleAnimationEnd = function () {
+        // Remove animation class after flicker completes to prevent interference with opacity
+        if (containerRef.current) {
+            containerRef.current.classList.remove('animate-[flicker_0.6s_ease-out_forwards]');
+        }
+    };
+    var containerRef = useRef(null);
+    return (React__default.createElement(motion.div, { ref: containerRef, className: cn(heatmapTheme.cellBaseStyle, getColorClass(), onClick && 'cursor-pointer', className), style: __assign(__assign({}, getColorStyle(intensity)), { 
+            // CSS custom properties for the animation
+            '--flicker-delay': "".concat(Math.random() * 0.3, "s"), animationDelay: "var(--flicker-delay)" }), onAnimationEnd: handleAnimationEnd, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, 
+        // Framer Motion animations (just for hover/tap, not initial load)
+        whileHover: {
+            scale: 1.025,
+            transition: { duration: 0.15, ease: 'easeOut' }
+        }, whileTap: {
+            scale: 0.95,
+            transition: { duration: 0.1, ease: 'easeOut' }
+        }, 
+        // Accessibility
+        role: "gridcell", tabIndex: onClick ? 0 : -1, "aria-label": "Value: ".concat(data.value, ", X: ").concat(data.x, ", Y: ").concat(data.y), onKeyDown: function (e) {
+            if ((e.key === 'Enter' || e.key === ' ') && onClick) {
+                e.preventDefault();
+                onClick(data);
+            }
+        } }, children && (React__default.createElement("div", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-700 dark:text-gray-300" }, children))));
+};
+
+export { HeatmapCell };

package/dist/components/charts/Heatmap/HeatmapLegend.js

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { heatmapTheme } from './Heatmap.theme.js';
+
+var HeatmapLegend = function (_a) {
+    _a.colorKey; var _c = _a.color, color = _c === void 0 ? 'var(--color-primary)' : _c; // Correct CSS variable
+    _a.minValue; // Correct CSS variable
+    _a.maxValue; var _f = _a.labels, labels = _f === void 0 ? {
+        min: 'Low activity',
+        max: 'High activity'
+    } : _f, className = _a.className;
+    // Create gradient using passed color (supports CSS variables and hex)
+    var gradientStyle = {
+        background: "linear-gradient(to right, color-mix(in srgb, ".concat(color, " 20%, transparent), ").concat(color, ")")
+    };
+    return (React__default.createElement("div", { className: cn(heatmapTheme.legendStyle, className) },
+        React__default.createElement("div", { className: "w-full h-1.5 rounded-full", style: gradientStyle }),
+        React__default.createElement("div", { className: "flex items-center justify-between text-xs font-medium text-[var(--color-text-secondary)]" },
+            React__default.createElement("div", null, labels.min),
+            React__default.createElement("div", null, labels.max))));
+};
+
+export { HeatmapLegend };

package/dist/components/charts/Heatmap/utils/heatmapUtils.js

@@ -0,0 +1,174 @@
+/**
+ * Process raw heatmap data and calculate necessary values
+ */
+function processHeatmapData(data, valueRange) {
+    // Extract unique categories preserving the order they appear in the data
+    var xCategories = [];
+    var yCategories = [];
+    // Preserve order by iterating through data and collecting unique values
+    data.forEach(function (point) {
+        if (!xCategories.includes(point.x)) {
+            xCategories.push(point.x);
+        }
+        if (!yCategories.includes(point.y)) {
+            yCategories.push(point.y);
+        }
+    });
+    // Calculate value range if not provided
+    var values = data.map(function (d) { return d.value; }).filter(function (v) { return v !== null; });
+    var calculatedMin = Math.min.apply(Math, values);
+    var calculatedMax = Math.max.apply(Math, values);
+    var finalValueRange = valueRange || [calculatedMin, calculatedMax];
+    return {
+        data: data,
+        xCategories: xCategories,
+        yCategories: yCategories,
+        valueRange: finalValueRange,
+        minValue: finalValueRange[0],
+        maxValue: finalValueRange[1],
+    };
+}
+/**
+ * Calculate intensity (0-1) for a given value within the range
+ */
+function calculateIntensity(value, minValue, maxValue) {
+    if (value === null)
+        return 0;
+    if (minValue === maxValue)
+        return 1;
+    return Math.max(0, Math.min(1, (value - minValue) / (maxValue - minValue)));
+}
+/**
+ * Create a complete grid matrix with all x,y combinations
+ * Fills missing data points with null values
+ */
+function createGridMatrix(data, xCategories, yCategories) {
+    // Create a map for quick lookup
+    var dataMap = new Map();
+    data.forEach(function (point) {
+        var key = "".concat(point.x, "-").concat(point.y);
+        dataMap.set(key, point);
+    });
+    // Create complete grid
+    return yCategories.map(function (y) {
+        return xCategories.map(function (x) {
+            var key = "".concat(x, "-").concat(y);
+            return dataMap.get(key) || { x: x, y: y, value: null };
+        });
+    });
+}
+/**
+ * Generate default tooltip content for a data point
+ */
+function getDefaultTooltipContent(data) {
+    var value = data.value !== null ? data.value.toString() : 'No data';
+    return "".concat(data.x, ", ").concat(data.y, ": ").concat(value);
+}
+/**
+ * Format axis labels with common patterns
+ */
+function formatAxisLabel(value, type) {
+    if (type === void 0) { type = 'default'; }
+    switch (type) {
+        case 'day':
+            if (typeof value === 'string') {
+                // Handle day abbreviations
+                var dayMap = {
+                    'Mon': 'Mo', 'Monday': 'Mo',
+                    'Tue': 'Tu', 'Tuesday': 'Tu',
+                    'Wed': 'We', 'Wednesday': 'We',
+                    'Thu': 'Th', 'Thursday': 'Th',
+                    'Fri': 'Fr', 'Friday': 'Fr',
+                    'Sat': 'Sa', 'Saturday': 'Sa',
+                    'Sun': 'Su', 'Sunday': 'Su',
+                };
+                return dayMap[value] || value.substring(0, 2);
+            }
+            break;
+        case 'month':
+            if (typeof value === 'string') {
+                // Handle month abbreviations
+                var monthMap = {
+                    'January': 'Jan', 'February': 'Feb', 'March': 'Mar',
+                    'April': 'Apr', 'May': 'May', 'June': 'Jun',
+                    'July': 'Jul', 'August': 'Aug', 'September': 'Sep',
+                    'October': 'Oct', 'November': 'Nov', 'December': 'Dec',
+                };
+                return monthMap[value] || value.substring(0, 3);
+            }
+            break;
+        case 'hour':
+            if (typeof value === 'number') {
+                return value === 0 ? '12am' : value === 12 ? '12pm' :
+                    value < 12 ? "".concat(value, "am") : "".concat(value - 12, "pm");
+            }
+            break;
+        case 'date':
+            if (typeof value === 'string') {
+                // Try to parse as date string
+                var date = new Date(value);
+                if (!isNaN(date.getTime())) {
+                    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+                }
+            }
+            break;
+        case 'number':
+            if (typeof value === 'number') {
+                return value.toLocaleString();
+            }
+            break;
+    }
+    return String(value);
+}
+/**
+ * Generate sample heatmap data for testing/examples
+ */
+function generateSampleData(type) {
+    if (type === void 0) { type = 'weekly'; }
+    var data = [];
+    switch (type) {
+        case 'weekly':
+            var days_1 = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+            var weeks = Array.from({ length: 12 }, function (_, i) { return "Week ".concat(i + 1); });
+            weeks.forEach(function (week) {
+                days_1.forEach(function (day) {
+                    data.push({
+                        x: day,
+                        y: week,
+                        value: Math.floor(Math.random() * 20),
+                    });
+                });
+            });
+            break;
+        case 'monthly':
+            var months_1 = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+            var years = ['2022', '2023', '2024'];
+            years.forEach(function (year) {
+                months_1.forEach(function (month) {
+                    data.push({
+                        x: month,
+                        y: year,
+                        value: Math.floor(Math.random() * 100),
+                    });
+                });
+            });
+            break;
+        case 'hourly':
+            var hours_1 = Array.from({ length: 24 }, function (_, i) { return i; });
+            var daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+            daysOfWeek.forEach(function (day) {
+                hours_1.forEach(function (hour) {
+                    data.push({
+                        x: hour,
+                        y: day,
+                        value: Math.floor(Math.random() * 50),
+                    });
+                });
+            });
+            break;
+    }
+    return data;
+}
+
+export { calculateIntensity, createGridMatrix, formatAxisLabel, generateSampleData, getDefaultTooltipContent, processHeatmapData };