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

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

@@ -7,10 +7,11 @@ export interface ChartConfig {
         label?: string;
         color?: string;
         theme?: string;
+        type?: 'bar' | 'line' | 'area';
     };
 }
 export type ChartVariant = 'default' | 'minimal' | 'gradient';
-export type CurveType = 'linear' | 'monotone';
+export type CurveType = 'linear' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
 export interface ChartThemeOverrides {
     baseStyle?: {
         colors?: Partial<{
@@ -40,8 +41,10 @@ export declare const CHART_DEFAULTS: {
     readonly showGrid: true;
     readonly showXAxis: true;
     readonly showYAxis: true;
-    readonly showNullValues: true;
-    readonly radius: 4;
+    readonly barRadius: 32;
+    readonly dotRadius: 4;
+    readonly cellRadius: 4;
+    readonly radius: 20;
     readonly strokeWidth: 2;
     readonly gap: 4;
     readonly categoryGap: 16;
@@ -68,13 +71,15 @@ export interface StandardChartDisplayProps {
     showGrid?: boolean;
     showXAxis?: boolean;
     showYAxis?: boolean;
-    showNullValues?: boolean;
     minValue?: number;
     maxValue?: number;
     variant?: ChartVariant;
     theme?: ChartThemeOverrides;
 }
 export interface StandardVisualProps {
+    barRadius?: number;
+    dotRadius?: number;
+    cellRadius?: number;
     radius?: number;
     strokeWidth?: number;
     gap?: number;

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

@@ -1,12 +1,14 @@
 // Standardized Chart Defaults
-var CHART_DEFAULTS = {
+const CHART_DEFAULTS = {
     // Display options
     showGrid: true,
     showXAxis: true,
     showYAxis: true,
-    showNullValues: true,
     // Visual properties
-    radius: 4, // For dots, bars, cells
+    barRadius: 32, // For bar corners (rounded top)
+    dotRadius: 4, // For line/area dot markers
+    cellRadius: 4, // For heatmap cells
+    radius: 20, // @deprecated Use barRadius, dotRadius, or cellRadius instead
     strokeWidth: 2,
     gap: 4, // For bars, cells
     categoryGap: 16, // For bar categories

package/dist/components/charts/utils/animation-utils.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Animation utilities for chart components
+ *
+ * Provides shared spring animation presets and helper functions
+ * to ensure consistent animations across all chart components.
+ */
+/**
+ * Spring animation configuration
+ */
+export interface SpringConfig {
+    type: 'spring';
+    stiffness: number;
+    damping: number;
+    delay?: number;
+}
+/**
+ * No animation configuration
+ */
+export interface NoAnimationConfig {
+    duration: 0;
+}
+/**
+ * Animation preset names
+ */
+export type AnimationPreset = 'smooth' | 'bouncy' | 'quick' | 'slow';
+/**
+ * Spring animation presets for circular charts
+ *
+ * These presets define the physics of spring animations:
+ * - stiffness: How quickly the animation reaches its target (higher = faster)
+ * - damping: How much the animation oscillates (lower = more bouncy)
+ */
+export declare const SPRING_PRESETS: Record<AnimationPreset, Omit<SpringConfig, 'type'>>;
+/**
+ * Get spring animation configuration for circular charts
+ *
+ * @param preset - The animation preset to use
+ * @param shouldReduceMotion - Whether to respect reduced motion preferences
+ * @param delay - Optional delay before animation starts (in seconds)
+ * @returns Animation configuration object for motion components
+ *
+ * @example
+ * ```tsx
+ * const animation = getSpringAnimation('smooth', shouldReduceMotion, 0.2);
+ * <motion.circle
+ *   animate={...}
+ *   transition={animation}
+ * />
+ * ```
+ */
+export declare function getSpringAnimation(preset?: AnimationPreset, shouldReduceMotion?: boolean | null, delay?: number): SpringConfig | NoAnimationConfig;
+/**
+ * Get useSpring configuration (for motion/react useSpring hook)
+ *
+ * @param preset - The animation preset to use
+ * @returns Spring configuration object for useSpring
+ *
+ * @example
+ * ```tsx
+ * const animatedValue = useSpring(value, getUseSpringConfig('bouncy'));
+ * ```
+ */
+export declare function getUseSpringConfig(preset?: AnimationPreset): {
+    stiffness: number;
+    damping: number;
+};
+/**
+ * Create staggered animation delay for multiple elements
+ *
+ * @param index - The element index
+ * @param staggerDelay - The delay between each element (in seconds)
+ * @returns The calculated delay for this element
+ *
+ * @example
+ * ```tsx
+ * rings.map((ring, index) => (
+ *   <motion.circle
+ *     transition={{ ...springConfig, delay: getStaggerDelay(index, 0.1) }}
+ *   />
+ * ))
+ * ```
+ */
+export declare function getStaggerDelay(index: number, staggerDelay?: number): number;
+/**
+ * Pre-configured animation settings for specific circular chart types
+ */
+export declare const CIRCULAR_CHART_ANIMATIONS: {
+    /**
+     * DonutChart: Smooth spring animation with slight delay
+     */
+    readonly donut: {
+        readonly preset: AnimationPreset;
+        readonly initialDelay: 0.2;
+    };
+    /**
+     * ActivityRings: Smooth spring with staggered rings
+     */
+    readonly activityRings: {
+        readonly preset: AnimationPreset;
+        readonly staggerDelay: 0.1;
+        readonly centerLabelDelay: 0.3;
+    };
+    /**
+     * GaugeChart: Bouncy animation for needle
+     */
+    readonly gauge: {
+        readonly preset: AnimationPreset;
+        readonly needleDelay: 0;
+        readonly valueDelay: 0.3;
+    };
+};

package/dist/components/charts/utils/animation-utils.js

@@ -0,0 +1,116 @@
+/**
+ * Animation utilities for chart components
+ *
+ * Provides shared spring animation presets and helper functions
+ * to ensure consistent animations across all chart components.
+ */
+/**
+ * Spring animation presets for circular charts
+ *
+ * These presets define the physics of spring animations:
+ * - stiffness: How quickly the animation reaches its target (higher = faster)
+ * - damping: How much the animation oscillates (lower = more bouncy)
+ */
+const SPRING_PRESETS = {
+    /**
+     * Smooth animation - balanced and natural
+     * Best for: DonutChart, ActivityRings
+     */
+    smooth: {
+        stiffness: 80,
+        damping: 20,
+    },
+    /**
+     * Bouncy animation - more playful with slight overshoot
+     * Best for: GaugeChart needle, interactive elements
+     */
+    bouncy: {
+        stiffness: 60,
+        damping: 15,
+    },
+    /**
+     * Quick animation - fast and snappy
+     * Best for: Small updates, micro-interactions
+     */
+    quick: {
+        stiffness: 120,
+        damping: 25,
+    },
+    /**
+     * Slow animation - gentle and deliberate
+     * Best for: Large value changes, presentations
+     */
+    slow: {
+        stiffness: 50,
+        damping: 25,
+    },
+};
+/**
+ * Get spring animation configuration for circular charts
+ *
+ * @param preset - The animation preset to use
+ * @param shouldReduceMotion - Whether to respect reduced motion preferences
+ * @param delay - Optional delay before animation starts (in seconds)
+ * @returns Animation configuration object for motion components
+ *
+ * @example
+ * ```tsx
+ * const animation = getSpringAnimation('smooth', shouldReduceMotion, 0.2);
+ * <motion.circle
+ *   animate={...}
+ *   transition={animation}
+ * />
+ * ```
+ */
+function getSpringAnimation(preset = 'smooth', shouldReduceMotion = false, delay) {
+    if (shouldReduceMotion) {
+        return { duration: 0 };
+    }
+    const config = SPRING_PRESETS[preset];
+    return {
+        type: 'spring',
+        stiffness: config.stiffness,
+        damping: config.damping,
+        ...(delay !== undefined && { delay }),
+    };
+}
+/**
+ * Create staggered animation delay for multiple elements
+ *
+ * @param index - The element index
+ * @param staggerDelay - The delay between each element (in seconds)
+ * @returns The calculated delay for this element
+ *
+ * @example
+ * ```tsx
+ * rings.map((ring, index) => (
+ *   <motion.circle
+ *     transition={{ ...springConfig, delay: getStaggerDelay(index, 0.1) }}
+ *   />
+ * ))
+ * ```
+ */
+function getStaggerDelay(index, staggerDelay = 0.1) {
+    return index * staggerDelay;
+}
+/**
+ * Pre-configured animation settings for specific circular chart types
+ */
+const CIRCULAR_CHART_ANIMATIONS = {
+    /**
+     * DonutChart: Smooth spring animation with slight delay
+     */
+    donut: {
+        preset: 'smooth',
+        initialDelay: 0.2,
+    },
+    /**
+     * ActivityRings: Smooth spring with staggered rings
+     */
+    activityRings: {
+        preset: 'smooth',
+        staggerDelay: 0.1,
+        centerLabelDelay: 0.3,
+    }};
+
+export { CIRCULAR_CHART_ANIMATIONS, SPRING_PRESETS, getSpringAnimation, getStaggerDelay };

package/dist/components/charts/utils/chart-validation.js

@@ -1,76 +1,67 @@
 /**
  * Safe math operations to prevent division by zero and other edge cases
  */
-var SafeMath = /** @class */ (function () {
-    function SafeMath() {
-    }
+class SafeMath {
     /**
      * Safe division that returns 0 when dividing by zero
      */
-    SafeMath.divide = function (numerator, denominator, fallback) {
-        if (fallback === void 0) { fallback = 0; }
+    static divide(numerator, denominator, fallback = 0) {
         if (denominator === 0 || !isFinite(denominator)) {
             return fallback;
         }
-        var result = numerator / denominator;
+        const result = numerator / denominator;
         return isFinite(result) ? result : fallback;
-    };
+    }
     /**
      * Safe percentage calculation
      */
-    SafeMath.percentage = function (value, total, fallback) {
-        if (fallback === void 0) { fallback = 0; }
+    static percentage(value, total, fallback = 0) {
         return this.divide(value * 100, total, fallback);
-    };
+    }
     /**
      * Safe Math.max that handles empty arrays
      */
-    SafeMath.max = function (values, fallback) {
-        if (fallback === void 0) { fallback = 0; }
+    static max(values, fallback = 0) {
         if (!Array.isArray(values) || values.length === 0) {
             return fallback;
         }
-        var filtered = values.filter(function (v) { return isFinite(v); });
-        return filtered.length > 0 ? Math.max.apply(Math, filtered) : fallback;
-    };
+        const filtered = values.filter(v => isFinite(v));
+        return filtered.length > 0 ? Math.max(...filtered) : fallback;
+    }
     /**
      * Safe Math.min that handles empty arrays
      */
-    SafeMath.min = function (values, fallback) {
-        if (fallback === void 0) { fallback = 0; }
+    static min(values, fallback = 0) {
         if (!Array.isArray(values) || values.length === 0) {
             return fallback;
         }
-        var filtered = values.filter(function (v) { return isFinite(v); });
-        return filtered.length > 0 ? Math.min.apply(Math, filtered) : fallback;
-    };
+        const filtered = values.filter(v => isFinite(v));
+        return filtered.length > 0 ? Math.min(...filtered) : fallback;
+    }
     /**
      * Safe scale calculation for chart positioning
      */
-    SafeMath.scale = function (value, min, max, targetMin, targetMax) {
-        if (targetMin === void 0) { targetMin = 0; }
-        if (targetMax === void 0) { targetMax = 1; }
-        var range = max - min;
+    static scale(value, min, max, targetMin = 0, targetMax = 1) {
+        const range = max - min;
         if (range === 0) {
             return targetMin + (targetMax - targetMin) / 2; // Return middle of target range
         }
-        var ratio = this.divide(value - min, range);
+        const ratio = this.divide(value - min, range);
         return targetMin + ratio * (targetMax - targetMin);
-    };
+    }
     /**
      * Clamp a value between min and max
      */
-    SafeMath.clamp = function (value, min, max) {
+    static clamp(value, min, max) {
         return Math.min(Math.max(value, min), max);
-    };
-    return SafeMath;
-}());
+    }
+}
 /**
  * Validates chart data array
  */
 function validateChartData(data) {
-    var errors = [];
-    var warnings = [];
+    const errors = [];
+    const warnings = [];
     // Check if data exists
     if (!data) {
         errors.push({
@@ -78,7 +69,7 @@ function validateChartData(data) {
             message: 'Chart data is required but was not provided',
             field: 'data'
         });
-        return { isValid: false, errors: errors, warnings: warnings };
+        return { isValid: false, errors, warnings };
     }
     // Check if data is an array
     if (!Array.isArray(data)) {
@@ -87,7 +78,7 @@ function validateChartData(data) {
             message: 'Chart data must be an array',
             field: 'data'
         });
-        return { isValid: false, errors: errors, warnings: warnings };
+        return { isValid: false, errors, warnings };
     }
     // Check if data is empty
     if (data.length === 0) {
@@ -98,35 +89,40 @@ function validateChartData(data) {
         });
     }
     // Validate each data item
-    data.forEach(function (item, index) {
+    data.forEach((item, index) => {
         if (!item || typeof item !== 'object') {
             errors.push({
                 type: 'data',
-                message: "Data item at index ".concat(index, " must be an object"),
-                field: "data[".concat(index, "]")
+                message: `Data item at index ${index} must be an object`,
+                field: `data[${index}]`
             });
             return;
         }
         // Check for at least one numeric value
-        var hasNumericValue = Object.values(item).some(function (value) {
-            return typeof value === 'number' && isFinite(value);
-        });
+        const hasNumericValue = Object.values(item).some(value => typeof value === 'number' && isFinite(value));
+        // Only warn about missing numeric values if there are no valid numeric values 
+        // in the entire dataset. Individual items with null/undefined values are 
+        // handled gracefully by chart components (e.g., using averages for bar charts)
         if (!hasNumericValue) {
-            warnings.push({
-                type: 'data',
-                message: "Data item at index ".concat(index, " has no valid numeric values"),
-                field: "data[".concat(index, "]")
-            });
+            const allDataHasNumericValues = data.some(dataItem => dataItem && typeof dataItem === 'object' &&
+                Object.values(dataItem).some(value => typeof value === 'number' && isFinite(value)));
+            if (!allDataHasNumericValues) {
+                warnings.push({
+                    type: 'data',
+                    message: `Data item at index ${index} has no valid numeric values`,
+                    field: `data[${index}]`
+                });
+            }
         }
     });
-    return { isValid: errors.length === 0, errors: errors, warnings: warnings };
+    return { isValid: errors.length === 0, errors, warnings };
 }
 /**
  * Validates chart configuration
  */
 function validateChartConfig(config) {
-    var errors = [];
-    var warnings = [];
+    const errors = [];
+    const warnings = [];
     // Check if config exists
     if (!config) {
         errors.push({
@@ -134,7 +130,7 @@ function validateChartConfig(config) {
             message: 'Chart config is required but was not provided',
             field: 'config'
         });
-        return { isValid: false, errors: errors, warnings: warnings };
+        return { isValid: false, errors, warnings };
     }
     // Check if config is an object
     if (typeof config !== 'object') {
@@ -143,10 +139,10 @@ function validateChartConfig(config) {
             message: 'Chart config must be an object',
             field: 'config'
         });
-        return { isValid: false, errors: errors, warnings: warnings };
+        return { isValid: false, errors, warnings };
     }
     // Check if config has any keys
-    var configKeys = Object.keys(config);
+    const configKeys = Object.keys(config);
     if (configKeys.length === 0) {
         warnings.push({
             type: 'config',
@@ -154,21 +150,19 @@ function validateChartConfig(config) {
             field: 'config'
         });
     }
-    return { isValid: errors.length === 0, errors: errors, warnings: warnings };
+    return { isValid: errors.length === 0, errors, warnings };
 }
 /**
  * Validates that data and config are compatible
  */
 function validateDataConfigCompatibility(data, config) {
-    var errors = [];
-    var warnings = [];
-    var configKeys = Object.keys(config);
-    var dataKeys = data.length > 0 ? Object.keys(data[0]) : [];
+    const errors = [];
+    const warnings = [];
+    const configKeys = Object.keys(config);
+    const dataKeys = data.length > 0 ? Object.keys(data[0]) : [];
     // Check if any config keys exist in data
-    var validKeys = configKeys.filter(function (key) {
-        return dataKeys.includes(key) &&
-            data.some(function (item) { return typeof item[key] === 'number' && isFinite(item[key]); });
-    });
+    const validKeys = configKeys.filter(key => dataKeys.includes(key) &&
+        data.some(item => typeof item[key] === 'number' && isFinite(item[key])));
     if (validKeys.length === 0) {
         errors.push({
             type: 'config',
@@ -177,15 +171,15 @@ function validateDataConfigCompatibility(data, config) {
         });
     }
     // Warn about config keys that don't exist in data
-    var missingKeys = configKeys.filter(function (key) { return !dataKeys.includes(key); });
-    missingKeys.forEach(function (key) {
+    const missingKeys = configKeys.filter(key => !dataKeys.includes(key));
+    missingKeys.forEach(key => {
         warnings.push({
             type: 'config',
-            message: "Config key \"".concat(key, "\" not found in data"),
-            field: "config.".concat(key)
+            message: `Config key "${key}" not found in data`,
+            field: `config.${key}`
         });
     });
-    return { isValid: errors.length === 0, errors: errors, warnings: warnings };
+    return { isValid: errors.length === 0, errors, warnings };
 }
 /**
  * Sanitizes chart data by removing invalid entries and normalizing values
@@ -195,11 +189,10 @@ function sanitizeChartData(data) {
         return [];
     }
     return data
-        .filter(function (item) { return item && typeof item === 'object'; })
-        .map(function (item) {
-        var sanitized = {};
-        Object.entries(item).forEach(function (_a) {
-            var key = _a[0], value = _a[1];
+        .filter(item => item && typeof item === 'object')
+        .map(item => {
+        const sanitized = {};
+        Object.entries(item).forEach(([key, value]) => {
             if (typeof value === 'number') {
                 // Replace NaN and Infinity with null
                 sanitized[key] = isFinite(value) ? value : null;
@@ -220,9 +213,8 @@ function sanitizeChartData(data) {
 /**
  * Calculates safe min/max values for chart scales
  */
-function calculateSafeScaleRange(data, config, options) {
-    if (options === void 0) { options = {}; }
-    var propMin = options.minValue, propMax = options.maxValue, _a = options.includeZero, includeZero = _a === void 0 ? true : _a, _b = options.padding, padding = _b === void 0 ? 0.1 : _b;
+function calculateSafeScaleRange(data, config, options = {}) {
+    const { minValue: propMin, maxValue: propMax, includeZero = true, padding = 0.1 } = options;
     // If both min and max are provided, use them
     if (propMin !== undefined && propMax !== undefined) {
         return {
@@ -231,12 +223,12 @@ function calculateSafeScaleRange(data, config, options) {
             hasValidData: true
         };
     }
-    var configKeys = Object.keys(config);
-    var allValues = [];
+    const configKeys = Object.keys(config);
+    const allValues = [];
     // Extract all numeric values
-    data.forEach(function (item) {
-        configKeys.forEach(function (key) {
-            var value = item[key];
+    data.forEach(item => {
+        configKeys.forEach(key => {
+            const value = item[key];
             if (typeof value === 'number' && isFinite(value)) {
                 allValues.push(value);
             }
@@ -250,8 +242,8 @@ function calculateSafeScaleRange(data, config, options) {
             hasValidData: false
         };
     }
-    var min = propMin !== null && propMin !== void 0 ? propMin : SafeMath.min(allValues);
-    var max = propMax !== null && propMax !== void 0 ? propMax : SafeMath.max(allValues);
+    let min = propMin !== null && propMin !== void 0 ? propMin : SafeMath.min(allValues);
+    let max = propMax !== null && propMax !== void 0 ? propMax : SafeMath.max(allValues);
     // Include zero if requested
     if (includeZero) {
         min = Math.min(min, 0);
@@ -259,34 +251,34 @@ function calculateSafeScaleRange(data, config, options) {
     }
     // Add padding if min and max are the same
     if (min === max) {
-        var absValue = Math.abs(min);
-        var paddingValue = absValue > 0 ? absValue * padding : 1;
+        const absValue = Math.abs(min);
+        const paddingValue = absValue > 0 ? absValue * padding : 1;
         min -= paddingValue;
         max += paddingValue;
     }
-    return { min: min, max: max, hasValidData: true };
+    return { min, max, hasValidData: true };
 }
 /**
  * Comprehensive chart validation that combines all checks
  */
 function validateChart(data, config) {
-    var errors = [];
-    var warnings = [];
+    const errors = [];
+    const warnings = [];
     // Validate data
-    var dataValidation = validateChartData(data);
-    errors.push.apply(errors, dataValidation.errors);
-    warnings.push.apply(warnings, dataValidation.warnings);
+    const dataValidation = validateChartData(data);
+    errors.push(...dataValidation.errors);
+    warnings.push(...dataValidation.warnings);
     // Validate config
-    var configValidation = validateChartConfig(config);
-    errors.push.apply(errors, configValidation.errors);
-    warnings.push.apply(warnings, configValidation.warnings);
+    const configValidation = validateChartConfig(config);
+    errors.push(...configValidation.errors);
+    warnings.push(...configValidation.warnings);
     // If basic validation passes, check compatibility
     if (dataValidation.isValid && configValidation.isValid) {
-        var compatibilityValidation = validateDataConfigCompatibility(data, config);
-        errors.push.apply(errors, compatibilityValidation.errors);
-        warnings.push.apply(warnings, compatibilityValidation.warnings);
+        const compatibilityValidation = validateDataConfigCompatibility(data, config);
+        errors.push(...compatibilityValidation.errors);
+        warnings.push(...compatibilityValidation.warnings);
     }
-    return { isValid: errors.length === 0, errors: errors, warnings: warnings };
+    return { isValid: errors.length === 0, errors, warnings };
 }
 
 export { SafeMath, calculateSafeScaleRange, sanitizeChartData, validateChart, validateChartConfig, validateChartData, validateDataConfigCompatibility };