aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
174 lines (171 loc) • 5.02 kB
JavaScript
import { useMemo } from 'react';
function useQualityTier(metrics, chartType, customTier) {
// Detect device capabilities
const deviceCapabilities = useMemo(() => {
const userAgent = navigator.userAgent;
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
const isTablet = /iPad|Android(?=.*\bMobile\b)|Tablet|PlayBook/i.test(userAgent);
// Estimate device performance
const isLowEndDevice = navigator.hardwareConcurrency ? navigator.hardwareConcurrency <= 2 : isMobile && !isTablet;
const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
// Estimate connection speed (simplified)
const connection = navigator.connection;
let connectionSpeed = 'unknown';
if (connection) {
const effectiveType = connection.effectiveType;
connectionSpeed = effectiveType === 'slow-2g' || effectiveType === '2g' ? 'slow' : 'fast';
}
// Estimate memory (rough approximation)
const memory = navigator.deviceMemory || (isLowEndDevice ? 2 : 8);
const cores = navigator.hardwareConcurrency || (isLowEndDevice ? 2 : 4);
return {
isMobile,
isTablet,
isLowEndDevice,
hasTouch,
connectionSpeed,
memory,
cores
};
}, []);
// Calculate optimal quality tier
const qualityTier = useMemo(() => {
// If custom tier is specified, use it
if (customTier) {
return getTierConfig(customTier, deviceCapabilities);
}
// Auto-detect optimal tier based on device and data complexity
const {
dataPointCount,
seriesCount,
animationComplexity,
interactionComplexity
} = metrics;
const {
isLowEndDevice,
isMobile,
connectionSpeed,
memory
} = deviceCapabilities;
// Calculate complexity score
const dataComplexity = Math.min(dataPointCount / 1000 + seriesCount / 10, 10);
const animationScore = animationComplexity === 'high' ? 3 : animationComplexity === 'medium' ? 2 : 1;
const interactionScore = interactionComplexity === 'high' ? 3 : interactionComplexity === 'medium' ? 2 : 1;
const totalComplexity = dataComplexity + animationScore + interactionScore;
// Determine tier based on complexity and device capabilities
let tier;
if (totalComplexity <= 5 && !isLowEndDevice && connectionSpeed !== 'slow' && memory >= 4) {
tier = 'ultra';
} else if (totalComplexity <= 8 && (!isLowEndDevice || memory >= 4)) {
tier = 'high';
} else if (totalComplexity <= 12 || !isMobile && memory >= 2) {
tier = 'medium';
} else {
tier = 'low';
}
return getTierConfig(tier, deviceCapabilities);
}, [customTier, deviceCapabilities, metrics]);
return qualityTier;
}
function getTierConfig(tier, device, metrics) {
const configs = {
ultra: {
tier: 'ultra',
maxDataPoints: 50000,
animationEnabled: true,
interactionEnabled: true,
quality: 'quality'
},
high: {
tier: 'high',
maxDataPoints: 25000,
animationEnabled: true,
interactionEnabled: true,
quality: 'quality'
},
medium: {
tier: 'medium',
maxDataPoints: 10000,
animationEnabled: device.connectionSpeed !== 'slow',
interactionEnabled: true,
quality: 'balanced'
},
low: {
tier: 'low',
maxDataPoints: 5000,
animationEnabled: false,
interactionEnabled: device.hasTouch,
quality: 'fast'
}
};
return configs[tier];
}
// Export utility functions for getting quality-based parameters
function getQualityBasedPhysicsParams(qualityTier) {
const configs = {
ultra: {
stiffness: 300,
dampingRatio: 0.8,
mass: 1,
precision: 0.001,
velocity: 0,
friction: 0.01
},
high: {
stiffness: 250,
dampingRatio: 0.7,
mass: 1.2,
precision: 0.005,
velocity: 0,
friction: 0.02
},
medium: {
stiffness: 200,
dampingRatio: 0.6,
mass: 1.5,
precision: 0.01,
velocity: 0,
friction: 0.05
},
low: {
stiffness: 150,
dampingRatio: 0.5,
mass: 2,
precision: 0.02,
velocity: 0,
friction: 0.1
}
};
return configs[qualityTier] || configs.medium;
}
function getQualityBasedGlassParams(qualityTier) {
const configs = {
ultra: {
blurStrength: 'heavy',
opacity: 0.9,
borderRadius: 16,
elevation: 'level4'
},
high: {
blurStrength: 'standard',
opacity: 0.85,
borderRadius: 12,
elevation: 'level3'
},
medium: {
blurStrength: 'light',
opacity: 0.8,
borderRadius: 8,
elevation: 'level2'
},
low: {
blurStrength: 'none',
opacity: 0.7,
borderRadius: 4,
elevation: 'level1'
}
};
return configs[qualityTier] || configs.medium;
}
export { getQualityBasedGlassParams, getQualityBasedPhysicsParams, useQualityTier };
//# sourceMappingURL=useQualityTier.js.map