@licklist/design 0.78.5-dev.9 → 0.78.5-dev.90

package/src/v2/dashboard-analytics/chart/Chart.tsx

@@ -0,0 +1,623 @@
+import React from 'react';
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, ResponsiveContainer, Tooltip, ReferenceLine } from 'recharts';
+import { TrendingUp, TrendingDown } from 'lucide-react';
+import './Chart.scss';
+
+interface ChartProps {
+  title: string;
+  subtitle: string;
+  data: Array<{ time: string; value: number; participants?: number }>;
+  isRevenue?: boolean;
+  className?: string;
+  period?: 'today' | 'yesterday' | 'week';
+  bookingType?: 'bookings_for' | 'bookings_made';
+  isFullWidth?: boolean;
+  isLoading?: boolean;
+  isRefreshing?: boolean;
+}
+
+export const Chart: React.FC<ChartProps> = ({ 
+  title, 
+  subtitle, 
+  data, 
+  isRevenue = false,
+  className = '',
+  period = 'today',
+  bookingType = 'bookings_for',
+  isFullWidth: propIsFullWidth = false,
+  isLoading = false,
+  isRefreshing = false
+}) => {
+  const [animationKey, setAnimationKey] = React.useState(0);
+  const [isAnimating, setIsAnimating] = React.useState(false);
+  const [forceResize, setForceResize] = React.useState(0);
+  const prevDataRef = React.useRef(data);
+  const prevPeriodRef = React.useRef(period);
+  
+  React.useEffect(() => {
+    const dataChanged = JSON.stringify(prevDataRef.current) !== JSON.stringify(data);
+    const periodChanged = prevPeriodRef.current !== period;
+    
+    if (dataChanged || periodChanged) {
+      setIsAnimating(true);
+      setAnimationKey(prev => prev + 1);
+      
+      if (periodChanged) {
+        setForceResize(prev => prev + 1);
+        prevPeriodRef.current = period;
+      }
+      
+      prevDataRef.current = data;
+      
+      const timer = setTimeout(() => {
+        setIsAnimating(false);
+      }, 800); 
+      
+      return () => clearTimeout(timer);
+    }
+  }, [data, period]);
+  const [isMobile, setIsMobile] = React.useState(false);
+  const [isTablet, setIsTablet] = React.useState(false);
+  const [detectedFullWidth, setDetectedFullWidth] = React.useState(false);
+  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
+  const chartRef = React.useRef<HTMLDivElement>(null);
+
+  const isFullWidth = propIsFullWidth || detectedFullWidth;
+
+  React.useEffect(() => {
+    const checkScreenSize = () => {
+      setIsMobile(window.innerWidth < 480);
+      setIsTablet(window.innerWidth >= 480 && window.innerWidth < 768);
+      
+      if (chartRef.current) {
+        const rect = chartRef.current.getBoundingClientRect();
+        setDimensions({ width: rect.width, height: rect.height });
+      }
+    };
+
+    checkScreenSize();
+    window.addEventListener('resize', checkScreenSize);
+    return () => window.removeEventListener('resize', checkScreenSize);
+  }, []);
+
+  const useChartRecalculation = () => {
+    const forceRecalculation = React.useCallback(() => {
+      if (chartRef.current) {
+        const resizeObserver = new ResizeObserver(() => {
+        });
+        
+        resizeObserver.observe(chartRef.current);
+        
+        setTimeout(() => {
+          resizeObserver.disconnect();
+        }, 100);
+        
+        setTimeout(() => {
+          window.dispatchEvent(new Event('resize'));
+        }, 50);
+      }
+    }, []);
+
+    return forceRecalculation;
+  };
+
+  const forceRecalculation = useChartRecalculation();
+
+  React.useEffect(() => {
+    forceRecalculation();
+  }, [period, forceRecalculation]);
+
+  React.useEffect(() => {
+    if (propIsFullWidth !== undefined) return; 
+    
+    const checkChartWidth = () => {
+      if (chartRef.current) {
+        const chartWidth = chartRef.current.offsetWidth;
+        const viewportWidth = window.innerWidth;
+        
+        const isWide = chartWidth > (viewportWidth * 0.65);
+        setDetectedFullWidth(isWide);
+      }
+    };
+
+    const timeoutId = setTimeout(checkChartWidth, 100);
+    
+    window.addEventListener('resize', checkChartWidth);
+    
+    const resizeObserver = new ResizeObserver(() => {
+      setTimeout(checkChartWidth, 50); 
+    });
+    
+    if (chartRef.current) {
+      resizeObserver.observe(chartRef.current);
+    }
+
+    return () => {
+      clearTimeout(timeoutId);
+      window.removeEventListener('resize', checkChartWidth);
+      resizeObserver.disconnect();
+    };
+  }, [propIsFullWidth, forceResize]); 
+  
+  React.useEffect(() => {
+    if (chartRef.current) {
+      
+      const resizeEvent = new Event('resize');
+      window.dispatchEvent(resizeEvent);
+      
+      const currentRef = chartRef.current;
+      const display = currentRef.style.display;
+      currentRef.style.display = 'none';
+      currentRef.offsetHeight; 
+      currentRef.style.display = display;
+      
+      setTimeout(() => {
+        const rect = currentRef.getBoundingClientRect();
+        setDimensions({ width: rect.width, height: rect.height });
+      }, 10);
+    }
+  }, [period, forceResize, animationKey]);
+  const processedData = React.useMemo(() => {
+    const transformXAxisForPeriod = (data: Array<{ time: string; value: number; participants?: number }>, period: string) => {
+      if (period === 'week') {
+        const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+        
+        return days.map((day, index) => {
+          const hourIndex = index * 3; 
+          const dayData = data[hourIndex] || { time: '', value: 0, participants: 0 };
+          
+          return {
+            time: day,
+            value: dayData.value,
+            participants: dayData.participants || 0
+          };
+        });
+      }
+      
+      if (isFullWidth) {
+        if (data.length > 8) {
+          return data.length <= 24 ? data : data.filter((_, index) => index % 2 === 0);
+        }
+        return data;
+      }
+      
+      if (period === 'today' && data.length > 12) {
+        return data.filter((_, index) => index % 3 === 0);
+      }
+      
+      return data;
+    };
+
+    const transformed = transformXAxisForPeriod(data, period);
+    
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    const isMonthlyData = transformed.some(item => months.some(month => item.time.includes(month)));
+    
+    if (isMonthlyData) {
+      const last12Months = transformed.slice(-12);
+      return last12Months;
+    }
+    
+    return transformed;
+  }, [data, period, isFullWidth]);
+
+  const maxValue = Math.max(...processedData.map(d => d.value));
+  
+  let yAxisMax: number;
+  let yAxisMin = 0;
+  
+  const calculateOptimalScale = (max: number) => {
+    if (max === 0) return isRevenue ? 10 : 5;
+    
+    const bufferedMax = max * (isRevenue ? 1.15 : 1.1);
+    
+    if (isRevenue) {
+      if (bufferedMax <= 1) return 1;
+      if (bufferedMax <= 2) return 2;
+      if (bufferedMax <= 5) return 5;
+      if (bufferedMax <= 10) return 10;
+      if (bufferedMax <= 20) return 20;
+      if (bufferedMax <= 25) return 25;
+      if (bufferedMax <= 50) return 50;
+      if (bufferedMax <= 100) return 100;
+      if (bufferedMax <= 250) return 250;
+      if (bufferedMax <= 500) return 500;
+      if (bufferedMax <= 1000) return 1000;
+      
+      const magnitude = Math.pow(10, Math.floor(Math.log10(bufferedMax)));
+      const normalized = bufferedMax / magnitude;
+      
+      if (normalized <= 1) return magnitude;
+      if (normalized <= 2) return 2 * magnitude;
+      if (normalized <= 2.5) return 2.5 * magnitude;
+      if (normalized <= 5) return 5 * magnitude;
+      return 10 * magnitude;
+    } else {
+      if (bufferedMax <= 1) return 2;
+      if (bufferedMax <= 2) return 3;
+      if (bufferedMax <= 3) return 4;
+      if (bufferedMax <= 5) return 6;
+      if (bufferedMax <= 8) return 10;
+      if (bufferedMax <= 12) return 15;
+      if (bufferedMax <= 20) return 25;
+      if (bufferedMax <= 40) return 50;
+      if (bufferedMax <= 80) return 100;
+      
+      const magnitude = Math.pow(10, Math.floor(Math.log10(bufferedMax)));
+      const normalized = bufferedMax / magnitude;
+      
+      if (normalized <= 1) return magnitude;
+      if (normalized <= 2) return 2 * magnitude;
+      if (normalized <= 5) return 5 * magnitude;
+      return 10 * magnitude;
+    }
+  };
+  
+  yAxisMax = calculateOptimalScale(maxValue);
+  
+  const getTickInterval = (max: number) => {
+    const targetTickCount = 5;
+    
+    if (isRevenue) {
+      if (max <= 1) return 0.25;
+      if (max <= 2) return 0.5;
+      if (max <= 5) return 1;
+      if (max <= 10) return 2;
+      if (max <= 20) return 5;
+      if (max <= 25) return 5;
+      if (max <= 50) return 10;
+      if (max <= 100) return 20;
+      if (max <= 250) return 50;
+      if (max <= 500) return 100;
+      if (max <= 1000) return 200;
+      
+      const roughInterval = max / targetTickCount;
+      const magnitude = Math.pow(10, Math.floor(Math.log10(roughInterval)));
+      const normalized = roughInterval / magnitude;
+      
+      if (normalized <= 1) return magnitude;
+      if (normalized <= 2) return 2 * magnitude;
+      if (normalized <= 2.5) return 2.5 * magnitude;
+      if (normalized <= 5) return 5 * magnitude;
+      return 10 * magnitude;
+    } else {
+      if (max <= 2) return 1;
+      if (max <= 3) return 1;
+      if (max <= 6) return 2;
+      if (max <= 10) return 2;
+      if (max <= 15) return 3;
+      if (max <= 25) return 5;
+      if (max <= 50) return 10;
+      if (max <= 100) return 20;
+      
+      const roughInterval = max / targetTickCount;
+      const magnitude = Math.pow(10, Math.floor(Math.log10(roughInterval)));
+      const normalized = roughInterval / magnitude;
+      
+      if (normalized <= 1) return magnitude;
+      if (normalized <= 2) return 2 * magnitude;
+      if (normalized <= 5) return 5 * magnitude;
+      return 10 * magnitude;
+    }
+  };
+  
+  const tickInterval = getTickInterval(yAxisMax);
+  const ticks = [];
+  
+  for (let i = yAxisMin; i <= yAxisMax; i += tickInterval) {
+    const tick = Math.round(i * 100) / 100;
+    ticks.push(tick);
+  }
+  
+  if (ticks[ticks.length - 1] > yAxisMax) {
+    ticks.pop();
+  }
+  
+  if (ticks[ticks.length - 1] < yAxisMax) {
+    ticks.push(yAxisMax);
+  }
+  
+  const getXAxisInterval = (dataLength: number, isMonthly: boolean = false, isWeekly: boolean = false, isHourly: boolean = false) => {
+    if (isMobile) {
+      if (isFullWidth) {
+        if (dataLength <= 6) return 0;
+        if (dataLength <= 10) return 1;
+        return Math.floor(dataLength / 5);
+      }
+      
+      if (isMonthly && dataLength <= 12) return 2; 
+      if (isWeekly && dataLength <= 7) return 0;
+      if (isHourly && dataLength <= 12) return 3; 
+      if (dataLength <= 4) return 0;
+      if (dataLength <= 7) return 1;
+      if (dataLength <= 12) return 2;
+      return Math.floor(dataLength / 3); 
+    }
+    
+    if (isTablet) {
+      if (isFullWidth) {
+        if (isMonthly && dataLength <= 12) return 0;
+        if (isWeekly && dataLength <= 7) return 0;
+        if (isHourly && dataLength <= 16) return 0; 
+        if (dataLength <= 10) return 0;
+        if (dataLength <= 20) return 1;
+        return Math.floor(dataLength / 10);
+      }
+      
+      if (isMonthly && dataLength <= 12) return 0;
+      if (isWeekly && dataLength <= 7) return 0;
+      if (isHourly && dataLength <= 12) return 1;
+      if (dataLength <= 4) return 0;
+      if (dataLength <= 7) return 0;
+      if (dataLength <= 12) return 1;
+      return Math.floor(dataLength / 5);
+    }
+
+    if (isFullWidth) {
+      if (isMonthly && dataLength <= 12) return 0; 
+      if (isWeekly && dataLength <= 7) return 0; 
+      if (isHourly && dataLength <= 24) return 1; 
+      if (dataLength <= 10) return 0; 
+      if (dataLength <= 20) return 1; 
+      return Math.floor(dataLength / 12); 
+    }
+
+    if (isMonthly && dataLength <= 12) return 0;
+    if (isWeekly && dataLength <= 7) return 0;
+    if (isHourly && dataLength <= 12) return 1; 
+    if (dataLength <= 4) return 0;
+    if (dataLength <= 7) return 0;
+    if (dataLength <= 12) return 2;
+    return Math.floor(dataLength / 6);
+  };
+  
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+  const isMonthlyData = processedData.some(item => months.some(month => item.time.includes(month)));
+  const isWeeklyData = processedData.some(item => days.some(day => item.time === day));
+  const isHourlyData = processedData.some(item => item.time.includes(':'));
+  const xAxisInterval = getXAxisInterval(processedData.length, isMonthlyData, isWeeklyData, isHourlyData);
+
+  const getCurrentTimeReference = () => {
+    if (subtitle && subtitle.includes('Yesterday')) return null;
+    
+    const now = new Date();
+    
+    if (subtitle === 'Today') {
+      return `${now.getHours().toString().padStart(2, '0')}:00`;
+    }
+    
+    if (subtitle && subtitle.includes(' - ') && (subtitle.includes('Mon') || subtitle.includes('Tue') || subtitle.includes('Wed') || subtitle.includes('Thu') || subtitle.includes('Fri') || subtitle.includes('Sat') || subtitle.includes('Sun'))) {
+      const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+      return dayNames[now.getDay() === 0 ? 6 : now.getDay() - 1];
+    }
+    
+    if (subtitle && /^[A-Z][a-z]+ \d{4}$/.test(subtitle)) {
+      const dayOfMonth = now.getDate();
+      const weekNumber = Math.ceil(dayOfMonth / 7);
+      const weekStart = ((weekNumber - 1) * 7) + 1;
+      const weekEnd = Math.min(weekNumber * 7, new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate());
+      
+      const formatOrdinal = (n: number) => {
+        const suffix = n % 10 === 1 && n !== 11 ? 'st' : 
+                       n % 10 === 2 && n !== 12 ? 'nd' : 
+                       n % 10 === 3 && n !== 13 ? 'rd' : 'th';
+        return `${n}${suffix}`;
+      };
+      
+      return `${formatOrdinal(weekStart)} - ${formatOrdinal(weekEnd)}`;
+    }
+    
+    if (subtitle && /^\d{4}$/.test(subtitle)) {
+      const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+      return months[now.getMonth()];
+    }
+    
+    return null;
+  };
+
+  const currentTimeRef = getCurrentTimeReference();
+
+  const CustomTooltip = ({ active, payload, label }: any) => {
+    if (active && payload && payload.length) {
+      const currentValue = payload[0].value;
+      const currentIndex = processedData.findIndex(d => d.time === label);
+      
+      let trend = null;
+      if (currentIndex >= 0 && currentIndex > 0) {
+        const prevValue = processedData[currentIndex - 1].value;
+        const prevTime = processedData[currentIndex - 1].time;
+        const change = currentValue - prevValue;
+        
+        if (typeof prevValue === 'number' && typeof currentValue === 'number') {
+          const previousValue = prevValue === 0 ? 0.1 : Math.abs(prevValue);
+          const percentChange = ((change / previousValue) * 100);
+          
+          if (!isNaN(percentChange) && isFinite(percentChange)) {
+            trend = {
+              change,
+              percentChange: Math.abs(percentChange).toFixed(1),
+              isPositive: change > 0,
+              isEqual: change === 0,
+              comparisonText: `vs ${prevTime}`,
+              previousValue: prevValue
+            };
+          }
+        }
+      }
+
+      const formatValue = (value: number) => {
+        if (isRevenue) {
+          return `£${value.toLocaleString("en-GB", { 
+            minimumFractionDigits: 2, 
+            maximumFractionDigits: 2 
+          })}`;
+        }
+        return value.toLocaleString();
+      };
+
+      return (
+        <div className="chart__tooltip">
+          <div className="chart__tooltip-label">
+            {label}
+          </div>
+          <div className="chart__tooltip-value">
+            {isRevenue ? formatValue(currentValue) : `${currentValue} ${currentValue === 1 ? 'Booking' : 'Bookings'}`}
+          </div>
+          
+          {!isRevenue && payload && payload[0] && payload[0].payload.participants !== undefined && (
+            <div className="chart__tooltip-participants">
+              {payload[0].payload.participants} people
+            </div>
+          )}
+          
+          {trend && !trend.isEqual && (
+            <div className={`chart__tooltip-trend ${
+              trend.isEqual ? 'neutral' : trend.isPositive ? 'positive' : 'negative'
+            }`}>
+              <div className="chart__tooltip-trend-content">
+                {trend.isPositive ? (
+                  <TrendingUp size={12} className="chart__tooltip-trend-icon" />
+                ) : (
+                  <TrendingDown size={12} className="chart__tooltip-trend-icon" />
+                )}
+                <span className="chart__tooltip-trend-value">
+                  {(trend.isPositive ? '+' : '') + (isRevenue ? `£${Math.abs(trend.change).toFixed(2)}` : `${trend.change} ${Math.abs(trend.change) === 1 ? 'Booking' : 'Bookings'}`)}
+                </span>
+              </div>
+            </div>
+          )}
+          {trend && !trend.isEqual && (
+            <div className="chart__tooltip-comparison">
+              {trend.comparisonText}
+            </div>
+          )}
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <section 
+      ref={chartRef} 
+      className={`chart ${className} ${isLoading || isAnimating ? 'chart--loading' : ''} ${isRefreshing ? 'chart--refreshing' : ''}`.trim()}
+      data-full-width={isFullWidth}
+    >
+      <header className="chart__header">
+        <h2 className="chart__title">
+          {title}
+          {/* Subtle refresh indicator in title */}
+          {isRefreshing && !isLoading && (
+            <span className="chart__title-refresh-indicator">⟳</span>
+          )}
+        </h2>
+        <p className="chart__subtitle">
+          {subtitle}
+        </p>
+      </header>
+      
+      <div className="chart__container">
+        {/* Only show major loading overlay for initial loads */}
+        {isLoading && (
+          <div className="chart__loading-overlay">
+            <div className="chart__loading-spinner"></div>
+          </div>
+        )}
+        <div className={`chart__wrapper ${isAnimating ? 'chart__wrapper--recalculating' : ''}`}>
+          <ResponsiveContainer 
+            key={`responsive-${animationKey}-${forceResize}`} 
+            width="100%" 
+            height="100%"
+            debounce={1}
+          >
+            <AreaChart 
+              key={`chart-${animationKey}-${forceResize}`}
+              data={processedData} 
+              margin={{ 
+                top: 10, 
+                right: 10, 
+                left: 10, 
+                bottom: 16 
+              }}
+            >
+              <defs>
+                <linearGradient id="chartGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor="#1F9AB5" stopOpacity={0.5}/>
+                  <stop offset="100%" stopColor="#1F9AB5" stopOpacity={0}/>
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" stroke="#E8E9EF" />
+               <XAxis 
+                dataKey="time" 
+                type="category"
+                axisLine={false}
+                tickLine={false}
+                tick={{ 
+                  fontSize: isMobile ? 9 : (isTablet ? 10 : 11), 
+                  fill: '#626A90' 
+                }}
+                tickMargin={isMobile ? 5 : 10}
+                interval={xAxisInterval}
+              />
+              <YAxis 
+                domain={[yAxisMin, yAxisMax]}
+                ticks={ticks}
+                axisLine={false}
+                tickLine={false}
+                tick={{ 
+                  fontSize: isMobile ? 9 : (isTablet ? 10 : 11), 
+                  fill: '#626A90' 
+                }}
+                tickFormatter={(value) => {
+                  if (isRevenue) {
+                    return isMobile ? `£${Math.round(value)}` : `£${value}`;
+                  }
+                  return value.toString();
+                }}
+                tickMargin={isMobile ? 3 : 5}
+                width={isMobile ? 30 : (isTablet ? 35 : 40)} 
+              />
+              <Tooltip content={CustomTooltip} />
+              {currentTimeRef && (
+                <ReferenceLine 
+                  x={currentTimeRef} 
+                  stroke="#7C3AED" 
+                  strokeWidth={2}
+                  strokeDasharray="6 4"
+                />
+              )}
+              <Area 
+                type="monotone" 
+                dataKey="value" 
+                stroke="#1F9AB5" 
+                strokeWidth={isMobile ? 1.5 : 2}
+                fill="url(#chartGradient)"
+                dot={{ 
+                  fill: '#1F9AB5', 
+                  strokeWidth: 0, 
+                  r: isMobile ? 3 : (isTablet ? 3.5 : 4), 
+                  fillOpacity: 1 
+                }}
+                activeDot={{ 
+                  r: isMobile ? 5 : (isTablet ? 5.5 : 6), 
+                  stroke: '#1F9AB5', 
+                  strokeWidth: 2, 
+                  fill: '#fff', 
+                  fillOpacity: 1, 
+                  strokeOpacity: 1 
+                }}
+                animationBegin={0}
+                animationDuration={800}
+                animationEasing="ease-out"
+                isAnimationActive={true}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export type { ChartProps };

package/src/v2/dashboard-analytics/chart/index.ts

@@ -0,0 +1,2 @@
+export { Chart } from './Chart';
+export type { ChartProps } from './Chart';