816c3b3f2e
Add comprehensive analytics system with: - Analytics data layer (aggregator, metrics, trends, cache) - 6 API endpoints (overview, plants, transport, farms, sustainability, export) - 6 chart components (LineChart, BarChart, PieChart, AreaChart, Gauge, Heatmap) - 5 dashboard widgets (KPICard, TrendIndicator, DataTable, DateRangePicker, FilterPanel) - 5 dashboard pages (overview, plants, transport, farms, sustainability) - Export functionality (CSV, JSON) Dependencies added: recharts, d3, date-fns Also includes minor fixes: - Fix EnvironmentalForm spread type error - Fix AgentOrchestrator Map iteration issues - Fix next.config.js image domains undefined error - Add downlevelIteration to tsconfig
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
/**
|
|
* Date Range Picker Component
|
|
* Allows selection of time range for analytics
|
|
*/
|
|
|
|
import { TimeRange } from '../../lib/analytics/types';
|
|
|
|
interface DateRangePickerProps {
|
|
value: TimeRange;
|
|
onChange: (range: TimeRange) => void;
|
|
showCustom?: boolean;
|
|
}
|
|
|
|
const timeRangeOptions: { value: TimeRange; label: string }[] = [
|
|
{ value: '7d', label: 'Last 7 days' },
|
|
{ value: '30d', label: 'Last 30 days' },
|
|
{ value: '90d', label: 'Last 90 days' },
|
|
{ value: '365d', label: 'Last year' },
|
|
{ value: 'all', label: 'All time' },
|
|
];
|
|
|
|
export default function DateRangePicker({
|
|
value,
|
|
onChange,
|
|
showCustom = false,
|
|
}: DateRangePickerProps) {
|
|
return (
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-sm text-gray-500">Time range:</span>
|
|
<div className="inline-flex rounded-lg border border-gray-200 bg-white">
|
|
{timeRangeOptions.map((option) => (
|
|
<button
|
|
key={option.value}
|
|
onClick={() => onChange(option.value)}
|
|
className={`px-4 py-2 text-sm font-medium transition-colors first:rounded-l-lg last:rounded-r-lg ${
|
|
value === option.value
|
|
? 'bg-green-500 text-white'
|
|
: 'text-gray-600 hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
{option.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|