Initial commit - WhyRating Engine (Google Reviews Scraper)

web/components/reviewiq/charts/TimelineChart.tsx

@@ -15,16 +15,16 @@ import {
   ReferenceLine,
 } from 'recharts';
 import { X, TrendingUp, TrendingDown, Minus, Calendar, Filter } from 'lucide-react';
-import type { TimelinePoint, TimeRange, TimelineAnnotation } from '../types';
+import type { TimelinePoint, TimeRange, Granularity } from '../types';
 import { DOMAIN_LABELS } from '../types';
 import { useReviewIQFilters } from '@/contexts/ReviewIQFilterContext';
 
 interface TimelineChartProps {
   data: TimelinePoint[];
-  // AI-generated insight (optional - shows when available)
+  // AI-generated insight headline (optional - shows when available)
   insight?: string | null;
-  // Timeline annotations from AI (optional - marks key events)
-  annotations?: TimelineAnnotation[] | null;
+  // Timeline granularity from API (day, week, month, year)
+  granularity?: Granularity;
 }
 
 type ViewMode = 'sentiment' | 'volume' | 'rating';
@@ -49,7 +49,7 @@ const TIME_RANGE_OPTIONS: { value: TimeRange; label: string; description: string
  * User-friendly design with view toggles and interactive brush.
  * Responds to domain/sentiment filters.
  */
-export function TimelineChart({ data, insight, annotations }: TimelineChartProps) {
+export function TimelineChart({ data, insight, granularity = 'week' }: TimelineChartProps) {
   const { filters, setTimeRange, setBrushRange } = useReviewIQFilters();
   const [viewMode, setViewMode] = useState<ViewMode>('sentiment');
   const [localBrushRange, setLocalBrushRange] = useState<{
@@ -137,10 +137,21 @@ export function TimelineChart({ data, insight, annotations }: TimelineChartProps
   const hasSentimentFilter = filters.sentiment.length > 0;
   const hasAnyFilter = hasBrushFilter || hasDomainFilter || hasSentimentFilter;
 
-  // Format date for display
+  // Format date for display based on granularity
   const formatDate = (dateStr: string) => {
     const date = new Date(dateStr);
-    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+    switch (granularity) {
+      case 'day':
+        return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+      case 'week':
+        return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+      case 'month':
+        return date.toLocaleDateString('en-US', { month: 'short', year: '2-digit' });
+      case 'year':
+        return date.toLocaleDateString('en-US', { year: 'numeric' });
+      default:
+        return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+    }
   };
 
   return (
@@ -281,31 +292,6 @@ export function TimelineChart({ data, insight, annotations }: TimelineChartProps
         </div>
       )}
 
-      {/* Key Events (when annotations available) */}
-      {annotations && annotations.length > 0 && (
-        <div className="mb-4 flex flex-wrap gap-2">
-          {annotations.slice(0, 3).map((annotation, idx) => (
-            <div
-              key={idx}
-              className={`px-3 py-1.5 rounded-full text-xs font-medium flex items-center gap-1 ${
-                annotation.type === 'positive' ? 'bg-green-100 text-green-700' :
-                annotation.type === 'negative' ? 'bg-red-100 text-red-700' :
-                annotation.type === 'event' ? 'bg-blue-100 text-blue-700' :
-                'bg-gray-100 text-gray-700'
-              }`}
-              title={annotation.description}
-            >
-              <span>{
-                annotation.type === 'positive' ? '📈' :
-                annotation.type === 'negative' ? '📉' :
-                annotation.type === 'event' ? '📍' : '•'
-              }</span>
-              <span>{annotation.label}</span>
-            </div>
-          ))}
-        </div>
-      )}
-
       {sortedData.length === 0 ? (
         <div className="flex flex-col items-center justify-center h-80 text-gray-500">
           <Calendar className="w-12 h-12 text-gray-300 mb-2" />