mirror of
https://github.com/ItzCrazyKns/Perplexica.git
synced 2025-11-24 14:08:14 +00:00
feat(app): add initial widgets
This commit is contained in:
ItzCrazyKns
@@ -91,7 +91,7 @@ const WeatherWidget = () => {
|
|||||||
setData({
|
setData({
|
||||||
temperature: data.temperature,
|
temperature: data.temperature,
|
||||||
condition: data.condition,
|
condition: data.condition,
|
||||||
location: location.city,
|
location: 'Mars',
|
||||||
humidity: data.humidity,
|
humidity: data.humidity,
|
||||||
windSpeed: data.windSpeed,
|
windSpeed: data.windSpeed,
|
||||||
icon: data.icon,
|
icon: data.icon,
|
||||||
|
|||||||
54
src/components/Widgets/Calculation.tsx
Normal file
54
src/components/Widgets/Calculation.tsx
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Calculator, Equal } from 'lucide-react';
|
||||||
|
|
||||||
|
type CalculationWidgetProps = {
|
||||||
|
expression: string;
|
||||||
|
result: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Calculation = ({ expression, result }: CalculationWidgetProps) => {
|
||||||
|
return (
|
||||||
|
<div className="rounded-lg bg-light-secondary dark:bg-dark-secondary border border-light-200 dark:border-dark-200 overflow-hidden shadow-sm">
|
||||||
|
<div className="flex items-center gap-2 p-3 bg-light-100/50 dark:bg-dark-100/50 border-b border-light-200 dark:border-dark-200">
|
||||||
|
<div className="rounded-full p-1.5 bg-light-100 dark:bg-dark-100">
|
||||||
|
<Calculator className="w-4 h-4 text-black/70 dark:text-white/70" />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-medium text-black dark:text-white">
|
||||||
|
Calculation
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4 space-y-3">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-1.5 mb-1.5">
|
||||||
|
<span className="text-xs text-black/50 dark:text-white/50 font-medium">
|
||||||
|
Expression
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="bg-light-100 dark:bg-dark-100 rounded-md p-2.5 border border-light-200 dark:border-dark-200">
|
||||||
|
<code className="text-sm text-black dark:text-white font-mono break-all">
|
||||||
|
{expression}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-1.5 mb-1.5">
|
||||||
|
<Equal className="w-3.5 h-3.5 text-black/50 dark:text-white/50" />
|
||||||
|
<span className="text-xs text-black/50 dark:text-white/50 font-medium">
|
||||||
|
Result
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gradient-to-br from-light-100 to-light-secondary dark:from-dark-100 dark:to-dark-secondary rounded-md p-4 border-2 border-light-200 dark:border-dark-200">
|
||||||
|
<div className="text-4xl font-bold text-black dark:text-white font-mono tabular-nums">
|
||||||
|
{result.toLocaleString()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Calculation;
|
||||||
76
src/components/Widgets/Renderer.tsx
Normal file
76
src/components/Widgets/Renderer.tsx
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Widget } from '../ChatWindow';
|
||||||
|
import Weather from './Weather';
|
||||||
|
import Calculation from './Calculation';
|
||||||
|
import Stock from './Stock';
|
||||||
|
|
||||||
|
const Renderer = ({ widgets }: { widgets: Widget[] }) => {
|
||||||
|
return widgets.map((widget, index) => {
|
||||||
|
switch (widget.widgetType) {
|
||||||
|
case 'weather':
|
||||||
|
return (
|
||||||
|
<Weather
|
||||||
|
key={index}
|
||||||
|
location={widget.params.location}
|
||||||
|
current={widget.params.current}
|
||||||
|
daily={widget.params.daily}
|
||||||
|
timezone={widget.params.timezone}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case 'calculation_result':
|
||||||
|
return (
|
||||||
|
<Calculation
|
||||||
|
expression={widget.params.expression}
|
||||||
|
result={widget.params.result}
|
||||||
|
key={index}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case 'stock':
|
||||||
|
return (
|
||||||
|
<Stock
|
||||||
|
key={index}
|
||||||
|
symbol={widget.params.symbol}
|
||||||
|
shortName={widget.params.shortName}
|
||||||
|
longName={widget.params.longName}
|
||||||
|
exchange={widget.params.exchange}
|
||||||
|
currency={widget.params.currency}
|
||||||
|
marketState={widget.params.marketState}
|
||||||
|
regularMarketPrice={widget.params.regularMarketPrice}
|
||||||
|
regularMarketChange={widget.params.regularMarketChange}
|
||||||
|
regularMarketChangePercent={
|
||||||
|
widget.params.regularMarketChangePercent
|
||||||
|
}
|
||||||
|
regularMarketPreviousClose={
|
||||||
|
widget.params.regularMarketPreviousClose
|
||||||
|
}
|
||||||
|
regularMarketOpen={widget.params.regularMarketOpen}
|
||||||
|
regularMarketDayHigh={widget.params.regularMarketDayHigh}
|
||||||
|
regularMarketDayLow={widget.params.regularMarketDayLow}
|
||||||
|
regularMarketVolume={widget.params.regularMarketVolume}
|
||||||
|
averageDailyVolume3Month={widget.params.averageDailyVolume3Month}
|
||||||
|
marketCap={widget.params.marketCap}
|
||||||
|
fiftyTwoWeekLow={widget.params.fiftyTwoWeekLow}
|
||||||
|
fiftyTwoWeekHigh={widget.params.fiftyTwoWeekHigh}
|
||||||
|
trailingPE={widget.params.trailingPE}
|
||||||
|
forwardPE={widget.params.forwardPE}
|
||||||
|
dividendYield={widget.params.dividendYield}
|
||||||
|
earningsPerShare={widget.params.earningsPerShare}
|
||||||
|
website={widget.params.website}
|
||||||
|
postMarketPrice={widget.params.postMarketPrice}
|
||||||
|
postMarketChange={widget.params.postMarketChange}
|
||||||
|
postMarketChangePercent={widget.params.postMarketChangePercent}
|
||||||
|
preMarketPrice={widget.params.preMarketPrice}
|
||||||
|
preMarketChange={widget.params.preMarketChange}
|
||||||
|
preMarketChangePercent={widget.params.preMarketChangePercent}
|
||||||
|
chartData={widget.params.chartData}
|
||||||
|
comparisonData={widget.params.comparisonData}
|
||||||
|
error={widget.params.error}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return <div key={index}>Unknown widget type: {widget.widgetType}</div>;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Renderer;
|
||||||
517
src/components/Widgets/Stock.tsx
Normal file
517
src/components/Widgets/Stock.tsx
Normal file
@@ -0,0 +1,517 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Clock, ArrowUpRight, ArrowDownRight, Minus } from 'lucide-react';
|
||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import {
|
||||||
|
createChart,
|
||||||
|
ColorType,
|
||||||
|
LineStyle,
|
||||||
|
BaselineSeries,
|
||||||
|
LineSeries,
|
||||||
|
} from 'lightweight-charts';
|
||||||
|
|
||||||
|
type StockWidgetProps = {
|
||||||
|
symbol: string;
|
||||||
|
shortName: string;
|
||||||
|
longName?: string;
|
||||||
|
exchange?: string;
|
||||||
|
currency?: string;
|
||||||
|
marketState?: string;
|
||||||
|
regularMarketPrice?: number;
|
||||||
|
regularMarketChange?: number;
|
||||||
|
regularMarketChangePercent?: number;
|
||||||
|
regularMarketPreviousClose?: number;
|
||||||
|
regularMarketOpen?: number;
|
||||||
|
regularMarketDayHigh?: number;
|
||||||
|
regularMarketDayLow?: number;
|
||||||
|
regularMarketVolume?: number;
|
||||||
|
averageDailyVolume3Month?: number;
|
||||||
|
marketCap?: number;
|
||||||
|
fiftyTwoWeekLow?: number;
|
||||||
|
fiftyTwoWeekHigh?: number;
|
||||||
|
trailingPE?: number;
|
||||||
|
forwardPE?: number;
|
||||||
|
dividendYield?: number;
|
||||||
|
earningsPerShare?: number;
|
||||||
|
website?: string;
|
||||||
|
postMarketPrice?: number;
|
||||||
|
postMarketChange?: number;
|
||||||
|
postMarketChangePercent?: number;
|
||||||
|
preMarketPrice?: number;
|
||||||
|
preMarketChange?: number;
|
||||||
|
preMarketChangePercent?: number;
|
||||||
|
chartData?: {
|
||||||
|
'1D'?: { timestamps: number[]; prices: number[] } | null;
|
||||||
|
'5D'?: { timestamps: number[]; prices: number[] } | null;
|
||||||
|
'1M'?: { timestamps: number[]; prices: number[] } | null;
|
||||||
|
'3M'?: { timestamps: number[]; prices: number[] } | null;
|
||||||
|
'6M'?: { timestamps: number[]; prices: number[] } | null;
|
||||||
|
'1Y'?: { timestamps: number[]; prices: number[] } | null;
|
||||||
|
MAX?: { timestamps: number[]; prices: number[] } | null;
|
||||||
|
} | null;
|
||||||
|
comparisonData?: Array<{
|
||||||
|
ticker: string;
|
||||||
|
name: string;
|
||||||
|
chartData: {
|
||||||
|
'1D'?: { timestamps: number[]; prices: number[] } | null;
|
||||||
|
'5D'?: { timestamps: number[]; prices: number[] } | null;
|
||||||
|
'1M'?: { timestamps: number[]; prices: number[] } | null;
|
||||||
|
'3M'?: { timestamps: number[]; prices: number[] } | null;
|
||||||
|
'6M'?: { timestamps: number[]; prices: number[] } | null;
|
||||||
|
'1Y'?: { timestamps: number[]; prices: number[] } | null;
|
||||||
|
MAX?: { timestamps: number[]; prices: number[] } | null;
|
||||||
|
};
|
||||||
|
}> | null;
|
||||||
|
error?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatNumber = (num: number | undefined, decimals = 2): string => {
|
||||||
|
if (num === undefined || num === null) return 'N/A';
|
||||||
|
return num.toLocaleString(undefined, {
|
||||||
|
minimumFractionDigits: decimals,
|
||||||
|
maximumFractionDigits: decimals,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatLargeNumber = (num: number | undefined): string => {
|
||||||
|
if (num === undefined || num === null) return 'N/A';
|
||||||
|
if (num >= 1e12) return `$${(num / 1e12).toFixed(2)}T`;
|
||||||
|
if (num >= 1e9) return `$${(num / 1e9).toFixed(2)}B`;
|
||||||
|
if (num >= 1e6) return `$${(num / 1e6).toFixed(2)}M`;
|
||||||
|
if (num >= 1e3) return `$${(num / 1e3).toFixed(2)}K`;
|
||||||
|
return `$${num.toFixed(2)}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Stock = (props: StockWidgetProps) => {
|
||||||
|
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||||
|
const [selectedTimeframe, setSelectedTimeframe] = useState<
|
||||||
|
'1D' | '5D' | '1M' | '3M' | '6M' | '1Y' | 'MAX'
|
||||||
|
>('1M');
|
||||||
|
const chartContainerRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkDarkMode = () => {
|
||||||
|
setIsDarkMode(document.documentElement.classList.contains('dark'));
|
||||||
|
};
|
||||||
|
|
||||||
|
checkDarkMode();
|
||||||
|
|
||||||
|
const observer = new MutationObserver(checkDarkMode);
|
||||||
|
observer.observe(document.documentElement, {
|
||||||
|
attributes: true,
|
||||||
|
attributeFilter: ['class'],
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => observer.disconnect();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const currentChartData = props.chartData?.[selectedTimeframe];
|
||||||
|
if (
|
||||||
|
!chartContainerRef.current ||
|
||||||
|
!currentChartData ||
|
||||||
|
currentChartData.timestamps.length === 0
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const chart = createChart(chartContainerRef.current, {
|
||||||
|
width: chartContainerRef.current.clientWidth,
|
||||||
|
height: 280,
|
||||||
|
layout: {
|
||||||
|
background: { type: ColorType.Solid, color: 'transparent' },
|
||||||
|
textColor: isDarkMode ? '#6b7280' : '#9ca3af',
|
||||||
|
fontSize: 11,
|
||||||
|
attributionLogo: false,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
vertLines: {
|
||||||
|
color: isDarkMode ? '#21262d' : '#e8edf1',
|
||||||
|
style: LineStyle.Solid,
|
||||||
|
},
|
||||||
|
horzLines: {
|
||||||
|
color: isDarkMode ? '#21262d' : '#e8edf1',
|
||||||
|
style: LineStyle.Solid,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
crosshair: {
|
||||||
|
vertLine: {
|
||||||
|
color: isDarkMode ? '#30363d' : '#d0d7de',
|
||||||
|
labelVisible: false,
|
||||||
|
},
|
||||||
|
horzLine: {
|
||||||
|
color: isDarkMode ? '#30363d' : '#d0d7de',
|
||||||
|
labelVisible: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rightPriceScale: {
|
||||||
|
borderVisible: false,
|
||||||
|
visible: false,
|
||||||
|
},
|
||||||
|
leftPriceScale: {
|
||||||
|
borderVisible: false,
|
||||||
|
visible: true,
|
||||||
|
},
|
||||||
|
timeScale: {
|
||||||
|
borderVisible: false,
|
||||||
|
timeVisible: false,
|
||||||
|
},
|
||||||
|
handleScroll: false,
|
||||||
|
handleScale: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const prices = currentChartData.prices;
|
||||||
|
let baselinePrice: number;
|
||||||
|
|
||||||
|
if (selectedTimeframe === '1D') {
|
||||||
|
baselinePrice = props.regularMarketPreviousClose ?? prices[0];
|
||||||
|
} else {
|
||||||
|
baselinePrice = prices[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
const baselineSeries = chart.addSeries(BaselineSeries);
|
||||||
|
|
||||||
|
baselineSeries.applyOptions({
|
||||||
|
baseValue: { type: 'price', price: baselinePrice },
|
||||||
|
topLineColor: isDarkMode ? '#14b8a6' : '#0d9488',
|
||||||
|
topFillColor1: isDarkMode
|
||||||
|
? 'rgba(20, 184, 166, 0.28)'
|
||||||
|
: 'rgba(13, 148, 136, 0.24)',
|
||||||
|
topFillColor2: isDarkMode
|
||||||
|
? 'rgba(20, 184, 166, 0.05)'
|
||||||
|
: 'rgba(13, 148, 136, 0.05)',
|
||||||
|
bottomLineColor: isDarkMode ? '#f87171' : '#dc2626',
|
||||||
|
bottomFillColor1: isDarkMode
|
||||||
|
? 'rgba(248, 113, 113, 0.05)'
|
||||||
|
: 'rgba(220, 38, 38, 0.05)',
|
||||||
|
bottomFillColor2: isDarkMode
|
||||||
|
? 'rgba(248, 113, 113, 0.28)'
|
||||||
|
: 'rgba(220, 38, 38, 0.24)',
|
||||||
|
lineWidth: 2,
|
||||||
|
crosshairMarkerVisible: true,
|
||||||
|
crosshairMarkerRadius: 4,
|
||||||
|
crosshairMarkerBorderColor: '',
|
||||||
|
crosshairMarkerBackgroundColor: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = currentChartData.timestamps.map((timestamp, index) => {
|
||||||
|
const price = currentChartData.prices[index];
|
||||||
|
return {
|
||||||
|
time: (timestamp / 1000) as any,
|
||||||
|
value: price,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
baselineSeries.setData(data);
|
||||||
|
|
||||||
|
const comparisonColors = ['#8b5cf6', '#f59e0b', '#ec4899'];
|
||||||
|
if (props.comparisonData && props.comparisonData.length > 0) {
|
||||||
|
props.comparisonData.forEach((comp, index) => {
|
||||||
|
const compChartData = comp.chartData[selectedTimeframe];
|
||||||
|
if (compChartData && compChartData.prices.length > 0) {
|
||||||
|
const compData = compChartData.timestamps.map((timestamp, i) => ({
|
||||||
|
time: (timestamp / 1000) as any,
|
||||||
|
value: compChartData.prices[i],
|
||||||
|
}));
|
||||||
|
|
||||||
|
const compSeries = chart.addSeries(LineSeries);
|
||||||
|
compSeries.applyOptions({
|
||||||
|
color: comparisonColors[index] || '#6b7280',
|
||||||
|
lineWidth: 2,
|
||||||
|
crosshairMarkerVisible: true,
|
||||||
|
crosshairMarkerRadius: 4,
|
||||||
|
priceScaleId: 'left',
|
||||||
|
});
|
||||||
|
compSeries.setData(compData);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
chart.timeScale().fitContent();
|
||||||
|
|
||||||
|
const handleResize = () => {
|
||||||
|
if (chartContainerRef.current) {
|
||||||
|
chart.applyOptions({
|
||||||
|
width: chartContainerRef.current.clientWidth,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
chart.remove();
|
||||||
|
};
|
||||||
|
}, [
|
||||||
|
props.chartData,
|
||||||
|
props.comparisonData,
|
||||||
|
selectedTimeframe,
|
||||||
|
isDarkMode,
|
||||||
|
props.regularMarketPreviousClose,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const isPositive = (props.regularMarketChange ?? 0) >= 0;
|
||||||
|
const isMarketOpen = props.marketState === 'REGULAR';
|
||||||
|
const isPreMarket = props.marketState === 'PRE';
|
||||||
|
const isPostMarket = props.marketState === 'POST';
|
||||||
|
|
||||||
|
const displayPrice = isPostMarket
|
||||||
|
? props.postMarketPrice ?? props.regularMarketPrice
|
||||||
|
: isPreMarket
|
||||||
|
? props.preMarketPrice ?? props.regularMarketPrice
|
||||||
|
: props.regularMarketPrice;
|
||||||
|
|
||||||
|
const displayChange = isPostMarket
|
||||||
|
? props.postMarketChange ?? props.regularMarketChange
|
||||||
|
: isPreMarket
|
||||||
|
? props.preMarketChange ?? props.regularMarketChange
|
||||||
|
: props.regularMarketChange;
|
||||||
|
|
||||||
|
const displayChangePercent = isPostMarket
|
||||||
|
? props.postMarketChangePercent ?? props.regularMarketChangePercent
|
||||||
|
: isPreMarket
|
||||||
|
? props.preMarketChangePercent ?? props.regularMarketChangePercent
|
||||||
|
: props.regularMarketChangePercent;
|
||||||
|
|
||||||
|
const changeColor = isPositive
|
||||||
|
? 'text-green-600 dark:text-green-400'
|
||||||
|
: 'text-red-600 dark:text-red-400';
|
||||||
|
|
||||||
|
if (props.error) {
|
||||||
|
return (
|
||||||
|
<div className="rounded-lg bg-light-secondary dark:bg-dark-secondary border border-light-200 dark:border-dark-200 p-4">
|
||||||
|
<p className="text-sm text-black dark:text-white">
|
||||||
|
Error: {props.error}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="rounded-lg border border-light-200 dark:border-dark-200 overflow-hidden">
|
||||||
|
<div className="p-4 space-y-4">
|
||||||
|
<div className="flex items-start justify-between gap-4 pb-4 border-b border-light-200 dark:border-dark-200">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
{props.website && (
|
||||||
|
<img
|
||||||
|
src={`https://logo.clearbit.com/${new URL(props.website).hostname}`}
|
||||||
|
alt={`${props.symbol} logo`}
|
||||||
|
className="w-8 h-8 rounded-lg"
|
||||||
|
onError={(e) => {
|
||||||
|
(e.target as HTMLImageElement).style.display = 'none';
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<h3 className="text-2xl font-bold text-black dark:text-white">
|
||||||
|
{props.symbol}
|
||||||
|
</h3>
|
||||||
|
{props.exchange && (
|
||||||
|
<span className="px-2 py-0.5 text-xs font-medium rounded bg-light-100 dark:bg-dark-100 text-black/60 dark:text-white/60">
|
||||||
|
{props.exchange}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{isMarketOpen && (
|
||||||
|
<div className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-green-100 dark:bg-green-950/40 border border-green-300 dark:border-green-800">
|
||||||
|
<div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
|
||||||
|
<span className="text-xs font-medium text-green-700 dark:text-green-400">
|
||||||
|
Live
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{isPreMarket && (
|
||||||
|
<div className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-blue-100 dark:bg-blue-950/40 border border-blue-300 dark:border-blue-800">
|
||||||
|
<Clock className="w-3 h-3 text-blue-600 dark:text-blue-400" />
|
||||||
|
<span className="text-xs font-medium text-blue-700 dark:text-blue-400">
|
||||||
|
Pre-Market
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{isPostMarket && (
|
||||||
|
<div className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-orange-100 dark:bg-orange-950/40 border border-orange-300 dark:border-orange-800">
|
||||||
|
<Clock className="w-3 h-3 text-orange-600 dark:text-orange-400" />
|
||||||
|
<span className="text-xs font-medium text-orange-700 dark:text-orange-400">
|
||||||
|
After Hours
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-black/60 dark:text-white/60">
|
||||||
|
{props.longName || props.shortName}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="flex items-baseline gap-2 mb-1">
|
||||||
|
<span className="text-3xl font-medium text-black dark:text-white">
|
||||||
|
{props.currency === 'USD' ? '$' : ''}
|
||||||
|
{formatNumber(displayPrice)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`flex items-center justify-end gap-1 ${changeColor}`}
|
||||||
|
>
|
||||||
|
{isPositive ? (
|
||||||
|
<ArrowUpRight className="w-4 h-4" />
|
||||||
|
) : displayChange === 0 ? (
|
||||||
|
<Minus className="w-4 h-4" />
|
||||||
|
) : (
|
||||||
|
<ArrowDownRight className="w-4 h-4" />
|
||||||
|
)}
|
||||||
|
<span className="text-lg font-normal">
|
||||||
|
{displayChange !== undefined && displayChange >= 0 ? '+' : ''}
|
||||||
|
{formatNumber(displayChange)}
|
||||||
|
</span>
|
||||||
|
<span className="text-sm font-normal">
|
||||||
|
(
|
||||||
|
{displayChangePercent !== undefined && displayChangePercent >= 0
|
||||||
|
? '+'
|
||||||
|
: ''}
|
||||||
|
{formatNumber(displayChangePercent)}%)
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{props.chartData && (
|
||||||
|
<div className="bg-light-secondary dark:bg-dark-secondary rounded-lg overflow-hidden">
|
||||||
|
<div className="flex items-center justify-between p-3 border-b border-light-200 dark:border-dark-200">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
{(['1D', '5D', '1M', '3M', '6M', '1Y', 'MAX'] as const).map(
|
||||||
|
(timeframe) => (
|
||||||
|
<button
|
||||||
|
key={timeframe}
|
||||||
|
onClick={() => setSelectedTimeframe(timeframe)}
|
||||||
|
disabled={!props.chartData?.[timeframe]}
|
||||||
|
className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
|
||||||
|
selectedTimeframe === timeframe
|
||||||
|
? 'bg-black/10 dark:bg-white/10 text-black dark:text-white'
|
||||||
|
: 'text-black/50 dark:text-white/50 hover:text-black/80 dark:hover:text-white/80'
|
||||||
|
} disabled:opacity-30 disabled:cursor-not-allowed`}
|
||||||
|
>
|
||||||
|
{timeframe}
|
||||||
|
</button>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{props.comparisonData && props.comparisonData.length > 0 && (
|
||||||
|
<div className="flex items-center gap-3 ml-auto">
|
||||||
|
<span className="text-xs text-black/50 dark:text-white/50">
|
||||||
|
{props.symbol}
|
||||||
|
</span>
|
||||||
|
{props.comparisonData.map((comp, index) => {
|
||||||
|
const colors = ['#8b5cf6', '#f59e0b', '#ec4899'];
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={comp.ticker}
|
||||||
|
className="flex items-center gap-1.5"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="w-2 h-2 rounded-full"
|
||||||
|
style={{ backgroundColor: colors[index] }}
|
||||||
|
/>
|
||||||
|
<span className="text-xs text-black/70 dark:text-white/70">
|
||||||
|
{comp.ticker}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4">
|
||||||
|
<div ref={chartContainerRef} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 border-t border-light-200 dark:border-dark-200">
|
||||||
|
<div className="flex justify-between p-3 border-r border-light-200 dark:border-dark-200">
|
||||||
|
<span className="text-xs text-black/50 dark:text-white/50">
|
||||||
|
Prev Close
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-black dark:text-white font-medium">
|
||||||
|
${formatNumber(props.regularMarketPreviousClose)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between p-3 border-r border-light-200 dark:border-dark-200">
|
||||||
|
<span className="text-xs text-black/50 dark:text-white/50">
|
||||||
|
52W Range
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-black dark:text-white font-medium">
|
||||||
|
${formatNumber(props.fiftyTwoWeekLow, 2)}-$
|
||||||
|
{formatNumber(props.fiftyTwoWeekHigh, 2)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between p-3">
|
||||||
|
<span className="text-xs text-black/50 dark:text-white/50">
|
||||||
|
Market Cap
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-black dark:text-white font-medium">
|
||||||
|
{formatLargeNumber(props.marketCap)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between p-3 border-t border-r border-light-200 dark:border-dark-200">
|
||||||
|
<span className="text-xs text-black/50 dark:text-white/50">
|
||||||
|
Open
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-black dark:text-white font-medium">
|
||||||
|
${formatNumber(props.regularMarketOpen)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between p-3 border-t border-r border-light-200 dark:border-dark-200">
|
||||||
|
<span className="text-xs text-black/50 dark:text-white/50">
|
||||||
|
P/E Ratio
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-black dark:text-white font-medium">
|
||||||
|
{props.trailingPE ? formatNumber(props.trailingPE, 2) : 'N/A'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between p-3 border-t border-light-200 dark:border-dark-200">
|
||||||
|
<span className="text-xs text-black/50 dark:text-white/50">
|
||||||
|
Dividend Yield
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-black dark:text-white font-medium">
|
||||||
|
{props.dividendYield
|
||||||
|
? `${formatNumber(props.dividendYield * 100, 2)}%`
|
||||||
|
: 'N/A'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between p-3 border-t border-r border-light-200 dark:border-dark-200">
|
||||||
|
<span className="text-xs text-black/50 dark:text-white/50">
|
||||||
|
Day Range
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-black dark:text-white font-medium">
|
||||||
|
${formatNumber(props.regularMarketDayLow, 2)}-$
|
||||||
|
{formatNumber(props.regularMarketDayHigh, 2)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between p-3 border-t border-r border-light-200 dark:border-dark-200">
|
||||||
|
<span className="text-xs text-black/50 dark:text-white/50">
|
||||||
|
Volume
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-black dark:text-white font-medium">
|
||||||
|
{formatLargeNumber(props.regularMarketVolume)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between p-3 border-t border-light-200 dark:border-dark-200">
|
||||||
|
<span className="text-xs text-black/50 dark:text-white/50">
|
||||||
|
EPS
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-black dark:text-white font-medium">
|
||||||
|
$
|
||||||
|
{props.earningsPerShare
|
||||||
|
? formatNumber(props.earningsPerShare, 2)
|
||||||
|
: 'N/A'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Stock;
|
||||||
408
src/components/Widgets/Weather.tsx
Normal file
408
src/components/Widgets/Weather.tsx
Normal file
@@ -0,0 +1,408 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Wind, Droplets, Gauge } from 'lucide-react';
|
||||||
|
import { useMemo, useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
type WeatherWidgetProps = {
|
||||||
|
location: string;
|
||||||
|
current: {
|
||||||
|
time: string;
|
||||||
|
temperature_2m: number;
|
||||||
|
relative_humidity_2m: number;
|
||||||
|
apparent_temperature: number;
|
||||||
|
is_day: number;
|
||||||
|
precipitation: number;
|
||||||
|
weather_code: number;
|
||||||
|
wind_speed_10m: number;
|
||||||
|
wind_direction_10m: number;
|
||||||
|
wind_gusts_10m?: number;
|
||||||
|
};
|
||||||
|
daily: {
|
||||||
|
time: string[];
|
||||||
|
weather_code: number[];
|
||||||
|
temperature_2m_max: number[];
|
||||||
|
temperature_2m_min: number[];
|
||||||
|
precipitation_probability_max: number[];
|
||||||
|
};
|
||||||
|
timezone: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getWeatherInfo = (code: number, isDay: boolean, isDarkMode: boolean) => {
|
||||||
|
const dayNight = isDay ? 'day' : 'night';
|
||||||
|
|
||||||
|
const weatherMap: Record<
|
||||||
|
number,
|
||||||
|
{ icon: string; description: string; gradient: string }
|
||||||
|
> = {
|
||||||
|
0: {
|
||||||
|
icon: `clear-${dayNight}.svg`,
|
||||||
|
description: 'Clear',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? isDay
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #E8F1FA, #7A9DBF 35%, #4A7BA8 60%, #2F5A88)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #5A6A7E, #3E4E63 40%, #2A3544 65%, #1A2230)'
|
||||||
|
: isDay
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #FFFFFF, #DBEAFE 30%, #93C5FD 60%, #60A5FA)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #7B8694, #475569 45%, #334155 70%, #1E293B)',
|
||||||
|
},
|
||||||
|
1: {
|
||||||
|
icon: `clear-${dayNight}.svg`,
|
||||||
|
description: 'Mostly Clear',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? isDay
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #E8F1FA, #7A9DBF 35%, #4A7BA8 60%, #2F5A88)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #5A6A7E, #3E4E63 40%, #2A3544 65%, #1A2230)'
|
||||||
|
: isDay
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #FFFFFF, #DBEAFE 30%, #93C5FD 60%, #60A5FA)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #7B8694, #475569 45%, #334155 70%, #1E293B)',
|
||||||
|
},
|
||||||
|
2: {
|
||||||
|
icon: `cloudy-1-${dayNight}.svg`,
|
||||||
|
description: 'Partly Cloudy',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? isDay
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #D4E1ED, #8BA3B8 35%, #617A93 60%, #426070)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #6B7583, #4A5563 40%, #3A4450 65%, #2A3340)'
|
||||||
|
: isDay
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #FFFFFF, #E0F2FE 28%, #BFDBFE 58%, #93C5FD)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #8B99AB, #64748B 45%, #475569 70%, #334155)',
|
||||||
|
},
|
||||||
|
3: {
|
||||||
|
icon: `cloudy-1-${dayNight}.svg`,
|
||||||
|
description: 'Cloudy',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #B8C3CF, #758190 38%, #546270 65%, #3D4A58)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #F5F8FA, #CBD5E1 32%, #94A3B8 65%, #64748B)',
|
||||||
|
},
|
||||||
|
45: {
|
||||||
|
icon: `fog-${dayNight}.svg`,
|
||||||
|
description: 'Foggy',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #C5CDD8, #8892A0 38%, #697380 65%, #4F5A68)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #FFFFFF, #E2E8F0 30%, #CBD5E1 62%, #94A3B8)',
|
||||||
|
},
|
||||||
|
48: {
|
||||||
|
icon: `fog-${dayNight}.svg`,
|
||||||
|
description: 'Rime Fog',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #C5CDD8, #8892A0 38%, #697380 65%, #4F5A68)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #FFFFFF, #E2E8F0 30%, #CBD5E1 62%, #94A3B8)',
|
||||||
|
},
|
||||||
|
51: {
|
||||||
|
icon: `rainy-1-${dayNight}.svg`,
|
||||||
|
description: 'Light Drizzle',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #B8D4E5, #6FA4C5 35%, #4A85AC 60%, #356A8E)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #E5FBFF, #A5F3FC 28%, #67E8F9 60%, #22D3EE)',
|
||||||
|
},
|
||||||
|
53: {
|
||||||
|
icon: `rainy-1-${dayNight}.svg`,
|
||||||
|
description: 'Drizzle',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #B8D4E5, #6FA4C5 35%, #4A85AC 60%, #356A8E)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #E5FBFF, #A5F3FC 28%, #67E8F9 60%, #22D3EE)',
|
||||||
|
},
|
||||||
|
55: {
|
||||||
|
icon: `rainy-2-${dayNight}.svg`,
|
||||||
|
description: 'Heavy Drizzle',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #A5C5D8, #5E92B0 35%, #3F789D 60%, #2A5F82)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #D4F3FF, #7DD3FC 30%, #38BDF8 62%, #0EA5E9)',
|
||||||
|
},
|
||||||
|
61: {
|
||||||
|
icon: `rainy-2-${dayNight}.svg`,
|
||||||
|
description: 'Light Rain',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #A5C5D8, #5E92B0 35%, #3F789D 60%, #2A5F82)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #D4F3FF, #7DD3FC 30%, #38BDF8 62%, #0EA5E9)',
|
||||||
|
},
|
||||||
|
63: {
|
||||||
|
icon: `rainy-2-${dayNight}.svg`,
|
||||||
|
description: 'Rain',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #8DB3C8, #4D819F 38%, #326A87 65%, #215570)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #B8E8FF, #38BDF8 32%, #0EA5E9 65%, #0284C7)',
|
||||||
|
},
|
||||||
|
65: {
|
||||||
|
icon: `rainy-3-${dayNight}.svg`,
|
||||||
|
description: 'Heavy Rain',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #7BA3B8, #3D6F8A 38%, #295973 65%, #1A455D)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #9CD9F5, #0EA5E9 32%, #0284C7 65%, #0369A1)',
|
||||||
|
},
|
||||||
|
71: {
|
||||||
|
icon: `snowy-1-${dayNight}.svg`,
|
||||||
|
description: 'Light Snow',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #E5F0FA, #9BB5CE 32%, #7496B8 58%, #527A9E)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #FFFFFF, #F0F9FF 25%, #E0F2FE 55%, #BAE6FD)',
|
||||||
|
},
|
||||||
|
73: {
|
||||||
|
icon: `snowy-2-${dayNight}.svg`,
|
||||||
|
description: 'Snow',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #D4E5F3, #85A1BD 35%, #6584A8 60%, #496A8E)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #FAFEFF, #E0F2FE 28%, #BAE6FD 60%, #7DD3FC)',
|
||||||
|
},
|
||||||
|
75: {
|
||||||
|
icon: `snowy-3-${dayNight}.svg`,
|
||||||
|
description: 'Heavy Snow',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #BDD8EB, #6F92AE 35%, #4F7593 60%, #365A78)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #F0FAFF, #BAE6FD 30%, #7DD3FC 62%, #38BDF8)',
|
||||||
|
},
|
||||||
|
77: {
|
||||||
|
icon: `snowy-1-${dayNight}.svg`,
|
||||||
|
description: 'Snow Grains',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #E5F0FA, #9BB5CE 32%, #7496B8 58%, #527A9E)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #FFFFFF, #F0F9FF 25%, #E0F2FE 55%, #BAE6FD)',
|
||||||
|
},
|
||||||
|
80: {
|
||||||
|
icon: `rainy-2-${dayNight}.svg`,
|
||||||
|
description: 'Light Showers',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #A5C5D8, #5E92B0 35%, #3F789D 60%, #2A5F82)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #D4F3FF, #7DD3FC 30%, #38BDF8 62%, #0EA5E9)',
|
||||||
|
},
|
||||||
|
81: {
|
||||||
|
icon: `rainy-2-${dayNight}.svg`,
|
||||||
|
description: 'Showers',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #8DB3C8, #4D819F 38%, #326A87 65%, #215570)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #B8E8FF, #38BDF8 32%, #0EA5E9 65%, #0284C7)',
|
||||||
|
},
|
||||||
|
82: {
|
||||||
|
icon: `rainy-3-${dayNight}.svg`,
|
||||||
|
description: 'Heavy Showers',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #7BA3B8, #3D6F8A 38%, #295973 65%, #1A455D)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #9CD9F5, #0EA5E9 32%, #0284C7 65%, #0369A1)',
|
||||||
|
},
|
||||||
|
85: {
|
||||||
|
icon: `snowy-2-${dayNight}.svg`,
|
||||||
|
description: 'Light Snow Showers',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #D4E5F3, #85A1BD 35%, #6584A8 60%, #496A8E)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #FAFEFF, #E0F2FE 28%, #BAE6FD 60%, #7DD3FC)',
|
||||||
|
},
|
||||||
|
86: {
|
||||||
|
icon: `snowy-3-${dayNight}.svg`,
|
||||||
|
description: 'Snow Showers',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #BDD8EB, #6F92AE 35%, #4F7593 60%, #365A78)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #F0FAFF, #BAE6FD 30%, #7DD3FC 62%, #38BDF8)',
|
||||||
|
},
|
||||||
|
95: {
|
||||||
|
icon: `scattered-thunderstorms-${dayNight}.svg`,
|
||||||
|
description: 'Thunderstorm',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #8A95A3, #5F6A7A 38%, #475260 65%, #2F3A48)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #C8D1DD, #94A3B8 32%, #64748B 65%, #475569)',
|
||||||
|
},
|
||||||
|
96: {
|
||||||
|
icon: 'severe-thunderstorm.svg',
|
||||||
|
description: 'Thunderstorm + Hail',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #7A8593, #515C6D 38%, #3A4552 65%, #242D3A)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #B0BBC8, #64748B 32%, #475569 65%, #334155)',
|
||||||
|
},
|
||||||
|
99: {
|
||||||
|
icon: 'severe-thunderstorm.svg',
|
||||||
|
description: 'Severe Thunderstorm',
|
||||||
|
gradient: isDarkMode
|
||||||
|
? 'radial-gradient(ellipse 150% 100% at 50% 100%, #6A7583, #434E5D 40%, #2F3A47 68%, #1C2530)'
|
||||||
|
: 'radial-gradient(ellipse 150% 100% at 50% 100%, #9BA8B8, #475569 35%, #334155 68%, #1E293B)',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return weatherMap[code] || weatherMap[0];
|
||||||
|
};
|
||||||
|
|
||||||
|
const Weather = ({
|
||||||
|
location,
|
||||||
|
current,
|
||||||
|
daily,
|
||||||
|
timezone,
|
||||||
|
}: WeatherWidgetProps) => {
|
||||||
|
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkDarkMode = () => {
|
||||||
|
setIsDarkMode(document.documentElement.classList.contains('dark'));
|
||||||
|
};
|
||||||
|
|
||||||
|
checkDarkMode();
|
||||||
|
|
||||||
|
const observer = new MutationObserver(checkDarkMode);
|
||||||
|
observer.observe(document.documentElement, {
|
||||||
|
attributes: true,
|
||||||
|
attributeFilter: ['class'],
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => observer.disconnect();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const weatherInfo = useMemo(
|
||||||
|
() =>
|
||||||
|
getWeatherInfo(
|
||||||
|
current?.weather_code || 0,
|
||||||
|
current?.is_day === 1,
|
||||||
|
isDarkMode,
|
||||||
|
),
|
||||||
|
[current?.weather_code, current?.is_day, isDarkMode],
|
||||||
|
);
|
||||||
|
|
||||||
|
const forecast = useMemo(() => {
|
||||||
|
if (!daily?.time || daily.time.length === 0) return [];
|
||||||
|
|
||||||
|
return daily.time.slice(1, 7).map((time, idx) => {
|
||||||
|
const date = new Date(time);
|
||||||
|
const dayName = date.toLocaleDateString('en-US', { weekday: 'short' });
|
||||||
|
const isDay = true;
|
||||||
|
const weatherCode = daily.weather_code[idx + 1];
|
||||||
|
const info = getWeatherInfo(weatherCode, isDay, isDarkMode);
|
||||||
|
|
||||||
|
return {
|
||||||
|
day: dayName,
|
||||||
|
icon: info.icon,
|
||||||
|
high: Math.round(daily.temperature_2m_max[idx + 1]),
|
||||||
|
low: Math.round(daily.temperature_2m_min[idx + 1]),
|
||||||
|
highF: Math.round((daily.temperature_2m_max[idx + 1] * 9) / 5 + 32),
|
||||||
|
lowF: Math.round((daily.temperature_2m_min[idx + 1] * 9) / 5 + 32),
|
||||||
|
precipitation: daily.precipitation_probability_max[idx + 1] || 0,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}, [daily, isDarkMode]);
|
||||||
|
|
||||||
|
if (!current || !daily || !daily.time || daily.time.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="relative overflow-hidden rounded-lg shadow-md bg-gray-200 dark:bg-gray-800">
|
||||||
|
<div className="p-4 text-black dark:text-white">
|
||||||
|
<p className="text-sm">Weather data unavailable for {location}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative overflow-hidden rounded-lg shadow-md">
|
||||||
|
<div
|
||||||
|
className="absolute inset-0"
|
||||||
|
style={{
|
||||||
|
background: weatherInfo.gradient,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="relative p-4 text-gray-800 dark:text-white">
|
||||||
|
<div className="flex items-start justify-between mb-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<img
|
||||||
|
src={`/weather-ico/${weatherInfo.icon}`}
|
||||||
|
alt={weatherInfo.description}
|
||||||
|
className="w-16 h-16 drop-shadow-lg"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<div className="flex items-baseline gap-1">
|
||||||
|
<span className="text-4xl font-bold drop-shadow-md">
|
||||||
|
{Math.round(current.temperature_2m)}°
|
||||||
|
</span>
|
||||||
|
<span className="text-lg">F C</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm font-medium drop-shadow mt-0.5">
|
||||||
|
{weatherInfo.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<p className="text-xs font-medium opacity-90">
|
||||||
|
{Math.round(daily.temperature_2m_max[0])}°{' '}
|
||||||
|
{Math.round(daily.temperature_2m_min[0])}°
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-3 pb-3 border-b border-gray-800/20 dark:border-white/20">
|
||||||
|
<h3 className="text-base font-semibold drop-shadow-md">{location}</h3>
|
||||||
|
<p className="text-xs text-gray-700 dark:text-white/80 drop-shadow mt-0.5">
|
||||||
|
{new Date(current.time).toLocaleString('en-US', {
|
||||||
|
weekday: 'short',
|
||||||
|
hour: 'numeric',
|
||||||
|
minute: '2-digit',
|
||||||
|
})}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-6 gap-2 mb-3 pb-3 border-b border-gray-800/20 dark:border-white/20">
|
||||||
|
{forecast.map((day, idx) => (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
className="flex flex-col items-center bg-gray-800/10 dark:bg-white/10 backdrop-blur-sm rounded-md p-2"
|
||||||
|
>
|
||||||
|
<p className="text-xs font-medium mb-1">{day.day}</p>
|
||||||
|
<img
|
||||||
|
src={`/weather-ico/${day.icon}`}
|
||||||
|
alt=""
|
||||||
|
className="w-8 h-8 mb-1"
|
||||||
|
/>
|
||||||
|
<div className="flex items-center gap-1 text-xs">
|
||||||
|
<span className="font-semibold">{day.high}°</span>
|
||||||
|
<span className="text-gray-600 dark:text-white/60">
|
||||||
|
{day.low}°
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{day.precipitation > 0 && (
|
||||||
|
<div className="flex items-center gap-0.5 mt-1">
|
||||||
|
<Droplets className="w-3 h-3 text-gray-600 dark:text-white/70" />
|
||||||
|
<span className="text-[10px] text-gray-600 dark:text-white/70">
|
||||||
|
{day.precipitation}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-2 text-xs">
|
||||||
|
<div className="flex items-center gap-2 bg-gray-800/10 dark:bg-white/10 backdrop-blur-sm rounded-md p-2">
|
||||||
|
<Wind className="w-4 h-4 text-gray-700 dark:text-white/80 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] text-gray-600 dark:text-white/70">
|
||||||
|
Wind
|
||||||
|
</p>
|
||||||
|
<p className="font-semibold">
|
||||||
|
{Math.round(current.wind_speed_10m)} km/h
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 bg-gray-800/10 dark:bg-white/10 backdrop-blur-sm rounded-md p-2">
|
||||||
|
<Droplets className="w-4 h-4 text-gray-700 dark:text-white/80 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] text-gray-600 dark:text-white/70">
|
||||||
|
Humidity
|
||||||
|
</p>
|
||||||
|
<p className="font-semibold">
|
||||||
|
{Math.round(current.relative_humidity_2m)}%
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 bg-gray-800/10 dark:bg-white/10 backdrop-blur-sm rounded-md p-2">
|
||||||
|
<Gauge className="w-4 h-4 text-gray-700 dark:text-white/80 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] text-gray-600 dark:text-white/70">
|
||||||
|
Feels Like
|
||||||
|
</p>
|
||||||
|
<p className="font-semibold">
|
||||||
|
{Math.round(current.apparent_temperature)}°C
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Weather;
|
||||||
@@ -1,9 +1,45 @@
|
|||||||
import { Intent } from '../../types';
|
import { Intent } from '../../types';
|
||||||
|
|
||||||
|
const description = `Use this intent when the user's query can be fully or partially answered using specialized widgets that provide structured, real-time data (weather, stocks, calculations, and more).
|
||||||
|
|
||||||
|
#### When to use:
|
||||||
|
1. The user is asking for specific information that a widget can provide (current weather, stock prices, mathematical calculations, unit conversions, etc.).
|
||||||
|
2. A widget can completely answer the query without needing additional web search (use this intent alone and set skipSearch to true).
|
||||||
|
3. A widget can provide part of the answer, but additional information from web search or other sources is needed (combine with other intents like 'web_search' and set skipSearch to false).
|
||||||
|
|
||||||
|
#### Example use cases:
|
||||||
|
Note: These are just examples - there are several other widgets available for use depending on the user's query.
|
||||||
|
|
||||||
|
1. "What is the weather in New York?"
|
||||||
|
- The weather widget can fully answer this query.
|
||||||
|
- Intent: ['widget_response'] with skipSearch: true
|
||||||
|
- Widget: [{ type: 'weather', location: 'New York', lat: 0, lon: 0 }]
|
||||||
|
|
||||||
|
2. "What's the weather in San Francisco today? Also tell me some popular events happening there this weekend."
|
||||||
|
- Weather widget provides current conditions, but events require web search.
|
||||||
|
- Intent: ['web_search', 'widget_response'] with skipSearch: false
|
||||||
|
- Widget: [{ type: 'weather', location: 'San Francisco', lat: 0, lon: 0 }]
|
||||||
|
|
||||||
|
3. "Calculate 25% of 480"
|
||||||
|
- The calculator widget can fully answer this.
|
||||||
|
- Intent: ['widget_response'] with skipSearch: true
|
||||||
|
- Widget: [{ type: 'calculator', expression: '25% of 480' }]
|
||||||
|
|
||||||
|
4. "AAPL stock price and recent Apple news"
|
||||||
|
- Stock widget provides price, but news requires web search.
|
||||||
|
- Intent: ['web_search', 'widget_response'] with skipSearch: false
|
||||||
|
- Widget: [{ type: 'stock', symbol: 'AAPL' }]
|
||||||
|
|
||||||
|
5. "What's Tesla's stock doing and how does it compare to competitors?"
|
||||||
|
- Stock widget provides Tesla's price, but comparison analysis requires web search.
|
||||||
|
- Intent: ['web_search', 'widget_response'] with skipSearch: false
|
||||||
|
- Widget: [{ type: 'stock', symbol: 'TSLA' }]
|
||||||
|
|
||||||
|
**IMPORTANT**: Set skipSearch to true ONLY if the widget(s) can completely answer the user's query without any additional information. If the user asks for anything beyond what the widget provides (context, explanations, comparisons, related information), combine this intent with 'web_search' and set skipSearch to false.`;
|
||||||
|
|
||||||
const widgetResponseIntent: Intent = {
|
const widgetResponseIntent: Intent = {
|
||||||
name: 'widget_response',
|
name: 'widget_response',
|
||||||
description:
|
description,
|
||||||
'Use this intent to respond to user queries using available widgets when the required information can be obtained from them.',
|
|
||||||
requiresSearch: false,
|
requiresSearch: false,
|
||||||
enabled: (config) => true,
|
enabled: (config) => true,
|
||||||
};
|
};
|
||||||
|
|||||||
65
src/lib/agents/search/widgets/calculationWidget.ts
Normal file
65
src/lib/agents/search/widgets/calculationWidget.ts
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
import z from 'zod';
|
||||||
|
import { Widget } from '../types';
|
||||||
|
import { evaluate as mathEval } from 'mathjs';
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
type: z.literal('calculation'),
|
||||||
|
expression: z
|
||||||
|
.string()
|
||||||
|
.describe(
|
||||||
|
"A valid mathematical expression to be evaluated (e.g., '2 + 2', '3 * (4 + 5)').",
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
||||||
|
const calculationWidget: Widget<typeof schema> = {
|
||||||
|
name: 'calculation',
|
||||||
|
description: `Performs mathematical calculations and evaluates mathematical expressions. Supports arithmetic operations, algebraic equations, functions, and complex mathematical computations.
|
||||||
|
|
||||||
|
**What it provides:**
|
||||||
|
- Evaluates mathematical expressions and returns computed results
|
||||||
|
- Handles basic arithmetic (+, -, *, /)
|
||||||
|
- Supports functions (sqrt, sin, cos, log, etc.)
|
||||||
|
- Can process complex expressions with parentheses and order of operations
|
||||||
|
|
||||||
|
**When to use:**
|
||||||
|
- User asks to calculate, compute, or evaluate a mathematical expression
|
||||||
|
- Questions like "what is X", "calculate Y", "how much is Z" where X/Y/Z are math expressions
|
||||||
|
- Any request involving numbers and mathematical operations
|
||||||
|
|
||||||
|
**Example call:**
|
||||||
|
{
|
||||||
|
"type": "calculation",
|
||||||
|
"expression": "25% of 480"
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
"type": "calculation",
|
||||||
|
"expression": "sqrt(144) + 5 * 2"
|
||||||
|
}
|
||||||
|
|
||||||
|
**Important:** The expression must be valid mathematical syntax that can be evaluated by mathjs. Format percentages as "0.25 * 480" or "25% of 480". Do not include currency symbols, units, or non-mathematical text in the expression.`,
|
||||||
|
schema: schema,
|
||||||
|
execute: async (params, _) => {
|
||||||
|
try {
|
||||||
|
const result = mathEval(params.expression);
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: 'calculation_result',
|
||||||
|
data: {
|
||||||
|
expression: params.expression,
|
||||||
|
result: result,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
type: 'calculation_result',
|
||||||
|
data: {
|
||||||
|
expression: params.expression,
|
||||||
|
result: `Error evaluating expression: ${error}`,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default calculationWidget;
|
||||||
@@ -1,6 +1,10 @@
|
|||||||
|
import calculationWidget from './calculationWidget';
|
||||||
import WidgetRegistry from './registry';
|
import WidgetRegistry from './registry';
|
||||||
import weatherWidget from './weatherWidget';
|
import weatherWidget from './weatherWidget';
|
||||||
|
import stockWidget from './stockWidget';
|
||||||
|
|
||||||
WidgetRegistry.register(weatherWidget);
|
WidgetRegistry.register(weatherWidget);
|
||||||
|
WidgetRegistry.register(calculationWidget);
|
||||||
|
WidgetRegistry.register(stockWidget);
|
||||||
|
|
||||||
export { WidgetRegistry };
|
export { WidgetRegistry };
|
||||||
|
|||||||
412
src/lib/agents/search/widgets/stockWidget.ts
Normal file
412
src/lib/agents/search/widgets/stockWidget.ts
Normal file
@@ -0,0 +1,412 @@
|
|||||||
|
import z from 'zod';
|
||||||
|
import { Widget } from '../types';
|
||||||
|
import YahooFinance from 'yahoo-finance2';
|
||||||
|
|
||||||
|
const yf = new YahooFinance({
|
||||||
|
suppressNotices: ['yahooSurvey'],
|
||||||
|
});
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
type: z.literal('stock'),
|
||||||
|
ticker: z
|
||||||
|
.string()
|
||||||
|
.describe(
|
||||||
|
"The stock ticker symbol in uppercase (e.g., 'AAPL' for Apple Inc., 'TSLA' for Tesla, 'GOOGL' for Google). Use the primary exchange ticker.",
|
||||||
|
),
|
||||||
|
comparisonTickers: z
|
||||||
|
.array(z.string())
|
||||||
|
.max(3)
|
||||||
|
.describe(
|
||||||
|
"Optional array of up to 3 ticker symbols to compare against the base ticker (e.g., ['MSFT', 'GOOGL', 'META']). Charts will show percentage change comparison.",
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
||||||
|
const stockWidget: Widget<typeof schema> = {
|
||||||
|
name: 'stock',
|
||||||
|
description: `Provides comprehensive real-time stock market data and financial information for any publicly traded company. Returns detailed quote data, market status, trading metrics, and company fundamentals.
|
||||||
|
|
||||||
|
You can set skipSearch to true if the stock widget can fully answer the user's query without needing additional web search.
|
||||||
|
|
||||||
|
**What it provides:**
|
||||||
|
- **Real-time Price Data**: Current price, previous close, open price, day's range (high/low)
|
||||||
|
- **Market Status**: Whether market is currently open or closed, trading sessions
|
||||||
|
- **Trading Metrics**: Volume, average volume, bid/ask prices and sizes
|
||||||
|
- **Performance**: Price changes (absolute and percentage), 52-week high/low range
|
||||||
|
- **Valuation**: Market capitalization, P/E ratio, earnings per share (EPS)
|
||||||
|
- **Dividends**: Dividend rate, dividend yield, ex-dividend date
|
||||||
|
- **Company Info**: Full company name, exchange, currency, sector/industry (when available)
|
||||||
|
- **Advanced Metrics**: Beta, trailing/forward P/E, book value, price-to-book ratio
|
||||||
|
- **Charts Data**: Historical price movements for visualization
|
||||||
|
- **Comparison**: Compare up to 3 stocks side-by-side with percentage-based performance visualization
|
||||||
|
|
||||||
|
**When to use:**
|
||||||
|
- User asks about a stock price ("What's AAPL stock price?", "How is Tesla doing?")
|
||||||
|
- Questions about company market performance ("Is Microsoft up or down today?")
|
||||||
|
- Requests for stock market data, trading info, or company valuation
|
||||||
|
- Queries about dividends, P/E ratio, market cap, or other financial metrics
|
||||||
|
- Any stock/equity-related question for a specific company
|
||||||
|
- Stock comparisons ("Compare AAPL vs MSFT", "How is TSLA doing vs RIVN and LCID?")
|
||||||
|
|
||||||
|
**Example calls:**
|
||||||
|
{
|
||||||
|
"type": "stock",
|
||||||
|
"ticker": "AAPL"
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
"type": "stock",
|
||||||
|
"ticker": "TSLA",
|
||||||
|
"comparisonTickers": ["RIVN", "LCID"]
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
"type": "stock",
|
||||||
|
"ticker": "GOOGL",
|
||||||
|
"comparisonTickers": ["MSFT", "META", "AMZN"]
|
||||||
|
}
|
||||||
|
|
||||||
|
**Important:**
|
||||||
|
- Use the correct ticker symbol (uppercase preferred: AAPL not aapl)
|
||||||
|
- For companies with multiple share classes, use the most common one (e.g., GOOGL for Google Class A shares)
|
||||||
|
- The widget works for stocks listed on major exchanges (NYSE, NASDAQ, etc.)
|
||||||
|
- Returns comprehensive data; the UI will display relevant metrics based on availability
|
||||||
|
- Market data may be delayed by 15-20 minutes for free data sources during trading hours`,
|
||||||
|
schema: schema,
|
||||||
|
execute: async (params, _) => {
|
||||||
|
try {
|
||||||
|
const ticker = params.ticker.toUpperCase();
|
||||||
|
|
||||||
|
const quote: any = await yf.quote(ticker);
|
||||||
|
|
||||||
|
const chartPromises = {
|
||||||
|
'1D': yf
|
||||||
|
.chart(ticker, {
|
||||||
|
period1: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
|
||||||
|
period2: new Date(),
|
||||||
|
interval: '5m',
|
||||||
|
})
|
||||||
|
.catch(() => null),
|
||||||
|
'5D': yf
|
||||||
|
.chart(ticker, {
|
||||||
|
period1: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000),
|
||||||
|
period2: new Date(),
|
||||||
|
interval: '15m',
|
||||||
|
})
|
||||||
|
.catch(() => null),
|
||||||
|
'1M': yf
|
||||||
|
.chart(ticker, {
|
||||||
|
period1: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
|
||||||
|
interval: '1d',
|
||||||
|
})
|
||||||
|
.catch(() => null),
|
||||||
|
'3M': yf
|
||||||
|
.chart(ticker, {
|
||||||
|
period1: new Date(Date.now() - 90 * 24 * 60 * 60 * 1000),
|
||||||
|
interval: '1d',
|
||||||
|
})
|
||||||
|
.catch(() => null),
|
||||||
|
'6M': yf
|
||||||
|
.chart(ticker, {
|
||||||
|
period1: new Date(Date.now() - 180 * 24 * 60 * 60 * 1000),
|
||||||
|
interval: '1d',
|
||||||
|
})
|
||||||
|
.catch(() => null),
|
||||||
|
'1Y': yf
|
||||||
|
.chart(ticker, {
|
||||||
|
period1: new Date(Date.now() - 365 * 24 * 60 * 60 * 1000),
|
||||||
|
interval: '1d',
|
||||||
|
})
|
||||||
|
.catch(() => null),
|
||||||
|
MAX: yf
|
||||||
|
.chart(ticker, {
|
||||||
|
period1: new Date(Date.now() - 10 * 365 * 24 * 60 * 60 * 1000),
|
||||||
|
interval: '1wk',
|
||||||
|
})
|
||||||
|
.catch(() => null),
|
||||||
|
};
|
||||||
|
|
||||||
|
const charts = await Promise.all([
|
||||||
|
chartPromises['1D'],
|
||||||
|
chartPromises['5D'],
|
||||||
|
chartPromises['1M'],
|
||||||
|
chartPromises['3M'],
|
||||||
|
chartPromises['6M'],
|
||||||
|
chartPromises['1Y'],
|
||||||
|
chartPromises['MAX'],
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [chart1D, chart5D, chart1M, chart3M, chart6M, chart1Y, chartMAX] =
|
||||||
|
charts;
|
||||||
|
|
||||||
|
if (!quote) {
|
||||||
|
throw new Error(`No data found for ticker: ${ticker}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
let comparisonData: any = null;
|
||||||
|
if (params.comparisonTickers.length > 0) {
|
||||||
|
const comparisonPromises = params.comparisonTickers
|
||||||
|
.slice(0, 3)
|
||||||
|
.map(async (compTicker) => {
|
||||||
|
try {
|
||||||
|
const compQuote = await yf.quote(compTicker);
|
||||||
|
const compCharts = await Promise.all([
|
||||||
|
yf
|
||||||
|
.chart(compTicker, {
|
||||||
|
period1: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
|
||||||
|
period2: new Date(),
|
||||||
|
interval: '5m',
|
||||||
|
})
|
||||||
|
.catch(() => null),
|
||||||
|
yf
|
||||||
|
.chart(compTicker, {
|
||||||
|
period1: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000),
|
||||||
|
period2: new Date(),
|
||||||
|
interval: '15m',
|
||||||
|
})
|
||||||
|
.catch(() => null),
|
||||||
|
yf
|
||||||
|
.chart(compTicker, {
|
||||||
|
period1: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
|
||||||
|
interval: '1d',
|
||||||
|
})
|
||||||
|
.catch(() => null),
|
||||||
|
yf
|
||||||
|
.chart(compTicker, {
|
||||||
|
period1: new Date(Date.now() - 90 * 24 * 60 * 60 * 1000),
|
||||||
|
interval: '1d',
|
||||||
|
})
|
||||||
|
.catch(() => null),
|
||||||
|
yf
|
||||||
|
.chart(compTicker, {
|
||||||
|
period1: new Date(Date.now() - 180 * 24 * 60 * 60 * 1000),
|
||||||
|
interval: '1d',
|
||||||
|
})
|
||||||
|
.catch(() => null),
|
||||||
|
yf
|
||||||
|
.chart(compTicker, {
|
||||||
|
period1: new Date(Date.now() - 365 * 24 * 60 * 60 * 1000),
|
||||||
|
interval: '1d',
|
||||||
|
})
|
||||||
|
.catch(() => null),
|
||||||
|
yf
|
||||||
|
.chart(compTicker, {
|
||||||
|
period1: new Date(
|
||||||
|
Date.now() - 10 * 365 * 24 * 60 * 60 * 1000,
|
||||||
|
),
|
||||||
|
interval: '1wk',
|
||||||
|
})
|
||||||
|
.catch(() => null),
|
||||||
|
]);
|
||||||
|
return {
|
||||||
|
ticker: compTicker,
|
||||||
|
name: compQuote.shortName || compTicker,
|
||||||
|
charts: compCharts,
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error(
|
||||||
|
`Failed to fetch comparison ticker ${compTicker}:`,
|
||||||
|
error,
|
||||||
|
);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const compResults = await Promise.all(comparisonPromises);
|
||||||
|
comparisonData = compResults.filter((r) => r !== null);
|
||||||
|
}
|
||||||
|
|
||||||
|
const stockData = {
|
||||||
|
symbol: quote.symbol,
|
||||||
|
shortName: quote.shortName || quote.longName || ticker,
|
||||||
|
longName: quote.longName,
|
||||||
|
exchange: quote.fullExchangeName || quote.exchange,
|
||||||
|
currency: quote.currency,
|
||||||
|
quoteType: quote.quoteType,
|
||||||
|
|
||||||
|
marketState: quote.marketState,
|
||||||
|
regularMarketTime: quote.regularMarketTime,
|
||||||
|
postMarketTime: quote.postMarketTime,
|
||||||
|
preMarketTime: quote.preMarketTime,
|
||||||
|
|
||||||
|
regularMarketPrice: quote.regularMarketPrice,
|
||||||
|
regularMarketChange: quote.regularMarketChange,
|
||||||
|
regularMarketChangePercent: quote.regularMarketChangePercent,
|
||||||
|
regularMarketPreviousClose: quote.regularMarketPreviousClose,
|
||||||
|
regularMarketOpen: quote.regularMarketOpen,
|
||||||
|
regularMarketDayHigh: quote.regularMarketDayHigh,
|
||||||
|
regularMarketDayLow: quote.regularMarketDayLow,
|
||||||
|
|
||||||
|
postMarketPrice: quote.postMarketPrice,
|
||||||
|
postMarketChange: quote.postMarketChange,
|
||||||
|
postMarketChangePercent: quote.postMarketChangePercent,
|
||||||
|
preMarketPrice: quote.preMarketPrice,
|
||||||
|
preMarketChange: quote.preMarketChange,
|
||||||
|
preMarketChangePercent: quote.preMarketChangePercent,
|
||||||
|
|
||||||
|
regularMarketVolume: quote.regularMarketVolume,
|
||||||
|
averageDailyVolume3Month: quote.averageDailyVolume3Month,
|
||||||
|
averageDailyVolume10Day: quote.averageDailyVolume10Day,
|
||||||
|
bid: quote.bid,
|
||||||
|
bidSize: quote.bidSize,
|
||||||
|
ask: quote.ask,
|
||||||
|
askSize: quote.askSize,
|
||||||
|
|
||||||
|
fiftyTwoWeekLow: quote.fiftyTwoWeekLow,
|
||||||
|
fiftyTwoWeekHigh: quote.fiftyTwoWeekHigh,
|
||||||
|
fiftyTwoWeekChange: quote.fiftyTwoWeekChange,
|
||||||
|
fiftyTwoWeekChangePercent: quote.fiftyTwoWeekChangePercent,
|
||||||
|
|
||||||
|
marketCap: quote.marketCap,
|
||||||
|
trailingPE: quote.trailingPE,
|
||||||
|
forwardPE: quote.forwardPE,
|
||||||
|
priceToBook: quote.priceToBook,
|
||||||
|
bookValue: quote.bookValue,
|
||||||
|
earningsPerShare: quote.epsTrailingTwelveMonths,
|
||||||
|
epsForward: quote.epsForward,
|
||||||
|
|
||||||
|
dividendRate: quote.dividendRate,
|
||||||
|
dividendYield: quote.dividendYield,
|
||||||
|
exDividendDate: quote.exDividendDate,
|
||||||
|
trailingAnnualDividendRate: quote.trailingAnnualDividendRate,
|
||||||
|
trailingAnnualDividendYield: quote.trailingAnnualDividendYield,
|
||||||
|
|
||||||
|
beta: quote.beta,
|
||||||
|
|
||||||
|
fiftyDayAverage: quote.fiftyDayAverage,
|
||||||
|
fiftyDayAverageChange: quote.fiftyDayAverageChange,
|
||||||
|
fiftyDayAverageChangePercent: quote.fiftyDayAverageChangePercent,
|
||||||
|
twoHundredDayAverage: quote.twoHundredDayAverage,
|
||||||
|
twoHundredDayAverageChange: quote.twoHundredDayAverageChange,
|
||||||
|
twoHundredDayAverageChangePercent:
|
||||||
|
quote.twoHundredDayAverageChangePercent,
|
||||||
|
|
||||||
|
sector: quote.sector,
|
||||||
|
industry: quote.industry,
|
||||||
|
website: quote.website,
|
||||||
|
|
||||||
|
chartData: {
|
||||||
|
'1D': chart1D
|
||||||
|
? {
|
||||||
|
timestamps: chart1D.quotes.map((q: any) => q.date.getTime()),
|
||||||
|
prices: chart1D.quotes.map((q: any) => q.close),
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
'5D': chart5D
|
||||||
|
? {
|
||||||
|
timestamps: chart5D.quotes.map((q: any) => q.date.getTime()),
|
||||||
|
prices: chart5D.quotes.map((q: any) => q.close),
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
'1M': chart1M
|
||||||
|
? {
|
||||||
|
timestamps: chart1M.quotes.map((q: any) => q.date.getTime()),
|
||||||
|
prices: chart1M.quotes.map((q: any) => q.close),
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
'3M': chart3M
|
||||||
|
? {
|
||||||
|
timestamps: chart3M.quotes.map((q: any) => q.date.getTime()),
|
||||||
|
prices: chart3M.quotes.map((q: any) => q.close),
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
'6M': chart6M
|
||||||
|
? {
|
||||||
|
timestamps: chart6M.quotes.map((q: any) => q.date.getTime()),
|
||||||
|
prices: chart6M.quotes.map((q: any) => q.close),
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
'1Y': chart1Y
|
||||||
|
? {
|
||||||
|
timestamps: chart1Y.quotes.map((q: any) => q.date.getTime()),
|
||||||
|
prices: chart1Y.quotes.map((q: any) => q.close),
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
MAX: chartMAX
|
||||||
|
? {
|
||||||
|
timestamps: chartMAX.quotes.map((q: any) => q.date.getTime()),
|
||||||
|
prices: chartMAX.quotes.map((q: any) => q.close),
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
},
|
||||||
|
comparisonData: comparisonData
|
||||||
|
? comparisonData.map((comp: any) => ({
|
||||||
|
ticker: comp.ticker,
|
||||||
|
name: comp.name,
|
||||||
|
chartData: {
|
||||||
|
'1D': comp.charts[0]
|
||||||
|
? {
|
||||||
|
timestamps: comp.charts[0].quotes.map((q: any) =>
|
||||||
|
q.date.getTime(),
|
||||||
|
),
|
||||||
|
prices: comp.charts[0].quotes.map((q: any) => q.close),
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
'5D': comp.charts[1]
|
||||||
|
? {
|
||||||
|
timestamps: comp.charts[1].quotes.map((q: any) =>
|
||||||
|
q.date.getTime(),
|
||||||
|
),
|
||||||
|
prices: comp.charts[1].quotes.map((q: any) => q.close),
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
'1M': comp.charts[2]
|
||||||
|
? {
|
||||||
|
timestamps: comp.charts[2].quotes.map((q: any) =>
|
||||||
|
q.date.getTime(),
|
||||||
|
),
|
||||||
|
prices: comp.charts[2].quotes.map((q: any) => q.close),
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
'3M': comp.charts[3]
|
||||||
|
? {
|
||||||
|
timestamps: comp.charts[3].quotes.map((q: any) =>
|
||||||
|
q.date.getTime(),
|
||||||
|
),
|
||||||
|
prices: comp.charts[3].quotes.map((q: any) => q.close),
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
'6M': comp.charts[4]
|
||||||
|
? {
|
||||||
|
timestamps: comp.charts[4].quotes.map((q: any) =>
|
||||||
|
q.date.getTime(),
|
||||||
|
),
|
||||||
|
prices: comp.charts[4].quotes.map((q: any) => q.close),
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
'1Y': comp.charts[5]
|
||||||
|
? {
|
||||||
|
timestamps: comp.charts[5].quotes.map((q: any) =>
|
||||||
|
q.date.getTime(),
|
||||||
|
),
|
||||||
|
prices: comp.charts[5].quotes.map((q: any) => q.close),
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
MAX: comp.charts[6]
|
||||||
|
? {
|
||||||
|
timestamps: comp.charts[6].quotes.map((q: any) =>
|
||||||
|
q.date.getTime(),
|
||||||
|
),
|
||||||
|
prices: comp.charts[6].quotes.map((q: any) => q.close),
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: 'stock',
|
||||||
|
data: stockData,
|
||||||
|
};
|
||||||
|
} catch (error: any) {
|
||||||
|
return {
|
||||||
|
type: 'stock',
|
||||||
|
data: {
|
||||||
|
error: `Error fetching stock data: ${error.message || error}`,
|
||||||
|
ticker: params.ticker,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default stockWidget;
|
||||||
@@ -20,104 +20,155 @@ const WeatherWidgetSchema = z.object({
|
|||||||
),
|
),
|
||||||
});
|
});
|
||||||
|
|
||||||
const weatherWidget = {
|
const weatherWidget: Widget<typeof WeatherWidgetSchema> = {
|
||||||
name: 'weather',
|
name: 'weather',
|
||||||
description:
|
description: `Provides comprehensive current weather information and forecasts for any location worldwide. Returns real-time weather data including temperature, conditions, humidity, wind, and multi-day forecasts.
|
||||||
'Provides current weather information for a specified location. It can return details such as temperature, humidity, wind speed, and weather conditions. It needs either a location name or latitude/longitude coordinates to function.',
|
|
||||||
|
You can set skipSearch to true if the weather widget can fully answer the user's query without needing additional web search.
|
||||||
|
|
||||||
|
**What it provides:**
|
||||||
|
- Current weather conditions (temperature, feels-like, humidity, precipitation)
|
||||||
|
- Wind speed, direction, and gusts
|
||||||
|
- Weather codes/conditions (clear, cloudy, rainy, etc.)
|
||||||
|
- Hourly forecast for next 24 hours
|
||||||
|
- Daily forecast for next 7 days (high/low temps, precipitation probability)
|
||||||
|
- Timezone information
|
||||||
|
|
||||||
|
**When to use:**
|
||||||
|
- User asks about weather in a location ("weather in X", "is it raining in Y")
|
||||||
|
- Questions about temperature, conditions, or forecast
|
||||||
|
- Any weather-related query for a specific place
|
||||||
|
|
||||||
|
**Example call:**
|
||||||
|
{
|
||||||
|
"type": "weather",
|
||||||
|
"location": "San Francisco, CA, USA",
|
||||||
|
"lat": 0,
|
||||||
|
"lon": 0
|
||||||
|
}
|
||||||
|
|
||||||
|
**Important:** Provide EITHER a location name OR latitude/longitude coordinates, never both. If using location name, set lat/lon to 0. Location should be specific (city, state/region, country) for best results.`,
|
||||||
schema: WeatherWidgetSchema,
|
schema: WeatherWidgetSchema,
|
||||||
execute: async (params, _) => {
|
execute: async (params, _) => {
|
||||||
if (
|
try {
|
||||||
params.location === '' &&
|
if (
|
||||||
(params.lat === undefined || params.lon === undefined)
|
params.location === '' &&
|
||||||
) {
|
(params.lat === undefined || params.lon === undefined)
|
||||||
throw new Error(
|
) {
|
||||||
'Either location name or both latitude and longitude must be provided.',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (params.location !== '') {
|
|
||||||
const openStreetMapUrl = `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(params.location)}&format=json&limit=1`;
|
|
||||||
|
|
||||||
const locationRes = await fetch(openStreetMapUrl, {
|
|
||||||
headers: {
|
|
||||||
'User-Agent': 'Perplexica',
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = await locationRes.json();
|
|
||||||
|
|
||||||
const location = data[0];
|
|
||||||
|
|
||||||
if (!location) {
|
|
||||||
throw new Error(
|
throw new Error(
|
||||||
`Could not find coordinates for location: ${params.location}`,
|
'Either location name or both latitude and longitude must be provided.',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const weatherRes = await fetch(
|
if (params.location !== '') {
|
||||||
`https://api.open-meteo.com/v1/forecast?latitude=${location.lat}&longitude=${location.lon}¤t_weather=true`,
|
const openStreetMapUrl = `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(params.location)}&format=json&limit=1`;
|
||||||
{
|
|
||||||
|
const locationRes = await fetch(openStreetMapUrl, {
|
||||||
headers: {
|
headers: {
|
||||||
'User-Agent': 'Perplexica',
|
'User-Agent': 'Perplexica',
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
},
|
},
|
||||||
},
|
});
|
||||||
);
|
|
||||||
|
|
||||||
const weatherData = await weatherRes.json();
|
const data = await locationRes.json();
|
||||||
|
|
||||||
|
const location = data[0];
|
||||||
|
|
||||||
|
if (!location) {
|
||||||
|
throw new Error(
|
||||||
|
`Could not find coordinates for location: ${params.location}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const weatherRes = await fetch(
|
||||||
|
`https://api.open-meteo.com/v1/forecast?latitude=${location.lat}&longitude=${location.lon}¤t=temperature_2m,relative_humidity_2m,apparent_temperature,is_day,precipitation,rain,showers,snowfall,weather_code,cloud_cover,pressure_msl,surface_pressure,wind_speed_10m,wind_direction_10m,wind_gusts_10m&hourly=temperature_2m,precipitation_probability,precipitation,weather_code&daily=weather_code,temperature_2m_max,temperature_2m_min,precipitation_sum,precipitation_probability_max&timezone=auto&forecast_days=7`,
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
'User-Agent': 'Perplexica',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const weatherData = await weatherRes.json();
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: 'weather',
|
||||||
|
data: {
|
||||||
|
location: params.location,
|
||||||
|
latitude: location.lat,
|
||||||
|
longitude: location.lon,
|
||||||
|
current: weatherData.current,
|
||||||
|
hourly: {
|
||||||
|
time: weatherData.hourly.time.slice(0, 24),
|
||||||
|
temperature_2m: weatherData.hourly.temperature_2m.slice(0, 24),
|
||||||
|
precipitation_probability:
|
||||||
|
weatherData.hourly.precipitation_probability.slice(0, 24),
|
||||||
|
precipitation: weatherData.hourly.precipitation.slice(0, 24),
|
||||||
|
weather_code: weatherData.hourly.weather_code.slice(0, 24),
|
||||||
|
},
|
||||||
|
daily: weatherData.daily,
|
||||||
|
timezone: weatherData.timezone,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
} else if (params.lat !== undefined && params.lon !== undefined) {
|
||||||
|
const [weatherRes, locationRes] = await Promise.all([
|
||||||
|
fetch(
|
||||||
|
`https://api.open-meteo.com/v1/forecast?latitude=${params.lat}&longitude=${params.lon}¤t=temperature_2m,relative_humidity_2m,apparent_temperature,is_day,precipitation,rain,showers,snowfall,weather_code,cloud_cover,pressure_msl,surface_pressure,wind_speed_10m,wind_direction_10m,wind_gusts_10m&hourly=temperature_2m,precipitation_probability,precipitation,weather_code&daily=weather_code,temperature_2m_max,temperature_2m_min,precipitation_sum,precipitation_probability_max&timezone=auto&forecast_days=7`,
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
'User-Agent': 'Perplexica',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
),
|
||||||
|
fetch(
|
||||||
|
`https://nominatim.openstreetmap.org/reverse?lat=${params.lat}&lon=${params.lon}&format=json`,
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
'User-Agent': 'Perplexica',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const weatherData = await weatherRes.json();
|
||||||
|
const locationData = await locationRes.json();
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: 'weather',
|
||||||
|
data: {
|
||||||
|
location: locationData.display_name,
|
||||||
|
latitude: params.lat,
|
||||||
|
longitude: params.lon,
|
||||||
|
current: weatherData.current,
|
||||||
|
hourly: {
|
||||||
|
time: weatherData.hourly.time.slice(0, 24),
|
||||||
|
temperature_2m: weatherData.hourly.temperature_2m.slice(0, 24),
|
||||||
|
precipitation_probability:
|
||||||
|
weatherData.hourly.precipitation_probability.slice(0, 24),
|
||||||
|
precipitation: weatherData.hourly.precipitation.slice(0, 24),
|
||||||
|
weather_code: weatherData.hourly.weather_code.slice(0, 24),
|
||||||
|
},
|
||||||
|
daily: weatherData.daily,
|
||||||
|
timezone: weatherData.timezone,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
/* this is like a very simple implementation just to see the bacckend works, when we're working on the frontend, we'll return more data i guess? */
|
|
||||||
return {
|
return {
|
||||||
type: 'weather',
|
type: 'weather',
|
||||||
data: {
|
data: null,
|
||||||
location: params.location,
|
|
||||||
latitude: location.lat,
|
|
||||||
longitude: location.lon,
|
|
||||||
weather: weatherData.current_weather,
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
} else if (params.lat !== undefined && params.lon !== undefined) {
|
} catch (err) {
|
||||||
const [weatherRes, locationRes] = await Promise.all([
|
|
||||||
fetch(
|
|
||||||
`https://api.open-meteo.com/v1/forecast?latitude=${params.lat}&longitude=${params.lon}¤t_weather=true`,
|
|
||||||
{
|
|
||||||
headers: {
|
|
||||||
'User-Agent': 'Perplexica',
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
),
|
|
||||||
fetch(
|
|
||||||
`https://nominatim.openstreetmap.org/reverse?lat=${params.lat}&lon=${params.lon}&format=json`,
|
|
||||||
{
|
|
||||||
headers: {
|
|
||||||
'User-Agent': 'Perplexica',
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
),
|
|
||||||
]);
|
|
||||||
|
|
||||||
const weatherData = await weatherRes.json();
|
|
||||||
const locationData = await locationRes.json();
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
type: 'weather',
|
type: 'weather',
|
||||||
data: {
|
data: {
|
||||||
location: locationData.display_name,
|
error: `Error fetching weather data: ${err}`,
|
||||||
latitude: params.lat,
|
|
||||||
longitude: params.lon,
|
|
||||||
weather: weatherData.current_weather,
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
|
||||||
type: 'weather',
|
|
||||||
data: null,
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
} satisfies Widget<typeof WeatherWidgetSchema>;
|
};
|
||||||
|
|
||||||
export default weatherWidget;
|
export default weatherWidget;
|
||||||
|
|||||||
Reference in New Issue
Block a user