ModeInspect: New updates to the project#5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
modeinspect-eu wants to merge 1 commit into
base:main
Choose a base branch
from
Open

ModeInspect: New updates to the project #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
295 changes: 295 additions & 0 deletions PriceHistoryWidget.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
import React, { useState } from 'react';
import { mockPriceData, PriceHistoryData, PriceDataPoint } from './mockPriceData';

const PriceHistoryWidget: React.FC = () => {
const [isExpanded, setIsExpanded] = useState(false);
const data = mockPriceData;

return (
<div className="font-sans max-w-md mx-auto">
{isExpanded ? (
<ExpandedView
data={data}
onCollapse={() => setIsExpanded(false)}
/>
) : (
<CollapsedView
data={data}
onExpand={() => setIsExpanded(true)}
/>
)}
</div>
);
};

interface ViewProps {
data: PriceHistoryData;
onExpand?: () => void;
onCollapse?: () => void;
}

const CollapsedView: React.FC<ViewProps> = ({ data, onExpand }) => {
const {
currentPrice,
currency,
recommendation,
priceChangePercentage
} = data;

return (
<div
className="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300"
onClick={onExpand}
>
<div className="flex justify-between items-center mb-2">
<h3 className="text-lg font-semibold text-gray-800">Price History</h3>
<button
onClick={(e) => {
e.stopPropagation();
onExpand?.();
}}
className="text-blue-500 hover:text-blue-700"
aria-label="Expand price history"
>
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</button>
</div>

<div className="flex items-center mb-3">
<div className="text-2xl font-bold text-gray-900">{currency} {currentPrice}</div>
<div className={`ml-2 px-2 py-1 rounded-full text-sm font-medium ${
priceChangePercentage < 0
? 'bg-green-100 text-green-800'
: 'bg-red-100 text-red-800'
}`}>
{priceChangePercentage >= 0 ? '+' : ''}{priceChangePercentage}%
</div>
</div>

<div className={`text-sm font-medium ${
recommendation === 'buy'
? 'text-green-600'
: recommendation === 'wait'
? 'text-red-600'
: 'text-gray-600'
}`}>
{recommendation === 'buy' && (
<div className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z" clipRule="evenodd" />
</svg>
Good time to buy! Prices are below average.
</div>
)}
{recommendation === 'wait' && (
<div className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
</svg>
Consider waiting. Prices are higher than usual.
</div>
)}
{recommendation === 'neutral' && (
<div className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
</svg>
Prices are around average for this route.
</div>
)}
</div>
</div>
);
};

const ExpandedView: React.FC<ViewProps> = ({ data, onCollapse }) => {
const {
currentPrice,
currency,
averagePrice,
lowestPrice,
highestPrice,
recommendation,
history
} = data;

// Find the highest price in the dataset for graph scaling
const maxPrice = Math.max(...history.map(item => item.price));
const minPrice = Math.min(...history.map(item => item.price));
const priceRange = maxPrice - minPrice;
const buffer = priceRange * 0.1; // 10% buffer

// Graph height and scaling
const graphHeight = 150;
const getY = (price: number) => {
return graphHeight - ((price - (minPrice - buffer)) / ((maxPrice + buffer) - (minPrice - buffer))) * graphHeight;
};

// Generate path for the graph
const graphWidth = 300;
const pointSpacing = graphWidth / (history.length - 1);

let pathData = `M 0,${getY(history[0].price)}`;
history.forEach((point, index) => {
if (index > 0) {
pathData += ` L ${index * pointSpacing},${getY(point.price)}`;
}
});

return (
<div className="bg-white rounded-lg shadow-lg p-6 transition-all duration-300">
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-semibold text-gray-800">Price History</h3>
<button
onClick={onCollapse}
className="text-blue-500 hover:text-blue-700"
aria-label="Collapse price history"
>
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clipRule="evenodd" />
</svg>
</button>
</div>

<div className="flex justify-between mb-2">
<div className="text-sm text-gray-500">Last 30 days</div>
<div className="text-sm font-medium text-gray-800">Current: {currency} {currentPrice}</div>
</div>

{/* Graph */}
<div className="relative h-40 mb-6">
<svg
viewBox={`0 0 ${graphWidth} ${graphHeight}`}
className="w-full h-full"
preserveAspectRatio="none"
>
{/* Price line */}
<path
d={pathData}
fill="none"
stroke="#4F46E5"
strokeWidth="2"
className="transition-all duration-700 ease-in-out"
/>

{/* Average price line */}
<line
x1="0"
y1={getY(averagePrice)}
x2={graphWidth}
y2={getY(averagePrice)}
stroke="#9CA3AF"
strokeWidth="1"
strokeDasharray="4,4"
/>

{/* Data points */}
{history.map((point, index) => (
<React.Fragment key={index}>
<circle
cx={index * pointSpacing}
cy={getY(point.price)}
r={point.isLowestPrice ? "4" : "2"}
fill={point.isLowestPrice ? "#10B981" : "#4F46E5"}
className={point.isLowestPrice ? "animate-pulse" : ""}
/>

{/* Label for lowest price */}
{point.isLowestPrice && (
<>
<text
x={index * pointSpacing}
y={getY(point.price) - 10}
fontSize="10"
textAnchor="middle"
fill="#10B981"
fontWeight="bold"
>
Lowest
</text>
</>
)}
</React.Fragment>
))}
</svg>

{/* Y-axis labels */}
<div className="absolute top-0 left-0 h-full flex flex-col justify-between text-xs text-gray-500">
<div>{Math.round(maxPrice + buffer)}</div>
<div>{Math.round(minPrice - buffer)}</div>
</div>
</div>

{/* Price stats */}
<div className="grid grid-cols-3 gap-4 mb-4">
<div className="text-center">
<div className="text-sm text-gray-500">Lowest</div>
<div className="font-semibold text-green-600">{currency} {lowestPrice}</div>
</div>
<div className="text-center">
<div className="text-sm text-gray-500">Average</div>
<div className="font-semibold text-gray-600">{currency} {averagePrice}</div>
</div>
<div className="text-center">
<div className="text-sm text-gray-500">Highest</div>
<div className="font-semibold text-red-600">{currency} {highestPrice}</div>
</div>
</div>

{/* Recommendation */}
<div className={`p-3 rounded-lg ${
recommendation === 'buy'
? 'bg-green-50 border border-green-200'
: recommendation === 'wait'
? 'bg-red-50 border border-red-200'
: 'bg-gray-50 border border-gray-200'
}`}>
<div className={`text-sm font-medium ${
recommendation === 'buy'
? 'text-green-600'
: recommendation === 'wait'
? 'text-red-600'
: 'text-gray-600'
}`}>
{recommendation === 'buy' && (
<div className="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
<div>
<p className="font-bold">Good time to buy!</p>
<p>Current prices are {Math.round((averagePrice - currentPrice) / averagePrice * 100)}% below the average for this route.</p>
</div>
</div>
)}
{recommendation === 'wait' && (
<div className="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
</svg>
<div>
<p className="font-bold">Consider waiting for prices to drop</p>
<p>Current prices are {Math.round((currentPrice - averagePrice) / averagePrice * 100)}% above the average for this route.</p>
</div>
</div>
)}
{recommendation === 'neutral' && (
<div className="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
</svg>
<div>
<p className="font-bold">Prices are stable</p>
<p>Current prices are close to the average for this route.</p>
</div>
</div>
)}
</div>
</div>
</div>
);
};

export default PriceHistoryWidget;
60 changes: 46 additions & 14 deletions README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,54 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
# Flight Price History Component

## Getting Started
This is a prototype of a price history feature for a flight search website. The component displays price trends and recommendations at a glance, with the ability to expand into a full interactive graph view.

First, run the development server:
## Features

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
- Compact view showing current price, price trend, and quick recommendation
- Expandable detailed view with price history graph
- Visual indicators for price changes (up/down)
- Recommendations based on price analysis
- Responsive design using Tailwind CSS

## How to Use

Import the component in your Next.js/React application:

```jsx
import PriceHistoryWidget from './components/PriceHistoryWidget';

// Then use it in your component
function FlightDetails() {
return (
<div>
<h2>Flight Details</h2>
<PriceHistoryWidget />
</div>
);
}
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Data Structure

The component expects price history data in the following format:

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
```typescript
type PriceHistoryData = {
currency: string;
currentPrice: number;
averagePrice: number;
lowestPrice: number;
highestPrice: number;
recommendation: "buy" | "wait" | "neutral";
priceChangePercentage: number;
history: PriceDataPoint[];
};

This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
type PriceDataPoint = {
date: string; // ISO date string
price: number;
isLowestPrice?: boolean;
};
```

For this prototype, mock data is generated internally. In a real application, you would connect this to your actual price history API.
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
ModeInspect: New updates to the project#5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

modeinspect-eu
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


ModeInspect: New updates to the project
#5
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


295 changes: 295 additions & 0 deletions
PriceHistoryWidget.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
import React, { useState } from 'react';
import { mockPriceData, PriceHistoryData, PriceDataPoint } from './mockPriceData';

const PriceHistoryWidget: React.FC = () => {
 const [isExpanded, setIsExpanded] = useState(false);
 const data = mockPriceData;

 return (
 <div className="font-sans max-w-md mx-auto">
 {isExpanded ? (
 <ExpandedView 
 data={data} 
 onCollapse={() => setIsExpanded(false)} 
 />
 ) : (
 <CollapsedView 
 data={data} 
 onExpand={() => setIsExpanded(true)} 
 />
 )}
 </div>
 );
};

interface ViewProps {
 data: PriceHistoryData;
 onExpand?: () => void;
 onCollapse?: () => void;
}

const CollapsedView: React.FC<ViewProps> = ({ data, onExpand }) => {
 const { 
 currentPrice, 
 currency, 
 recommendation, 
 priceChangePercentage 
 } = data;

 return (
 <div 
 className="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300"
 onClick={onExpand}
 >
 <div className="flex justify-between items-center mb-2">
 <h3 className="text-lg font-semibold text-gray-800">Price History</h3>
 <button 
 onClick={(e) => {
 e.stopPropagation();
 onExpand?.();
 }}
 className="text-blue-500 hover:text-blue-700"
 aria-label="Expand price history"
 >
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
 </svg>
 </button>
 </div>

 <div className="flex items-center mb-3">
 <div className="text-2xl font-bold text-gray-900">{currency} {currentPrice}</div>
 <div className={`ml-2 px-2 py-1 rounded-full text-sm font-medium ${
 priceChangePercentage < 0 
 ? 'bg-green-100 text-green-800' 
 : 'bg-red-100 text-red-800'
 }`}>
 {priceChangePercentage >= 0 ? '+' : ''}{priceChangePercentage}%
 </div>
 </div>

 <div className={`text-sm font-medium ${
 recommendation === 'buy' 
 ? 'text-green-600' 
 : recommendation === 'wait' 
 ? 'text-red-600' 
 : 'text-gray-600'
 }`}>
 {recommendation === 'buy' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z" clipRule="evenodd" />
 </svg>
 Good time to buy! Prices are below average.
 </div>
 )}
 {recommendation === 'wait' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
 </svg>
 Consider waiting. Prices are higher than usual.
 </div>
 )}
 {recommendation === 'neutral' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
 </svg>
 Prices are around average for this route.
 </div>
 )}
 </div>
 </div>
 );
};

const ExpandedView: React.FC<ViewProps> = ({ data, onCollapse }) => {
 const { 
 currentPrice, 
 currency, 
 averagePrice, 
 lowestPrice, 
 highestPrice, 
 recommendation, 
 history 
 } = data;

 // Find the highest price in the dataset for graph scaling
 const maxPrice = Math.max(...history.map(item => item.price));
 const minPrice = Math.min(...history.map(item => item.price));
 const priceRange = maxPrice - minPrice;
 const buffer = priceRange * 0.1; // 10% buffer

 // Graph height and scaling
 const graphHeight = 150;
 const getY = (price: number) => {
 return graphHeight - ((price - (minPrice - buffer)) / ((maxPrice + buffer) - (minPrice - buffer))) * graphHeight;
 };

 // Generate path for the graph
 const graphWidth = 300;
 const pointSpacing = graphWidth / (history.length - 1);

 let pathData = `M 0,${getY(history[0].price)}`;
 history.forEach((point, index) => {
 if (index > 0) {
 pathData += ` L ${index * pointSpacing},${getY(point.price)}`;
 }
 });

 return (
 <div className="bg-white rounded-lg shadow-lg p-6 transition-all duration-300">
 <div className="flex justify-between items-center mb-4">
 <h3 className="text-lg font-semibold text-gray-800">Price History</h3>
 <button 
 onClick={onCollapse}
 className="text-blue-500 hover:text-blue-700"
 aria-label="Collapse price history"
 >
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clipRule="evenodd" />
 </svg>
 </button>
 </div>

 <div className="flex justify-between mb-2">
 <div className="text-sm text-gray-500">Last 30 days</div>
 <div className="text-sm font-medium text-gray-800">Current: {currency} {currentPrice}</div>
 </div>

 {/* Graph */}
 <div className="relative h-40 mb-6">
 <svg 
 viewBox={`0 0 ${graphWidth} ${graphHeight}`} 
 className="w-full h-full"
 preserveAspectRatio="none"
 >
 {/* Price line */}
 <path
 d={pathData}
 fill="none"
 stroke="#4F46E5"
 strokeWidth="2"
 className="transition-all duration-700 ease-in-out"
 />

 {/* Average price line */}
 <line
 x1="0"
 y1={getY(averagePrice)}
 x2={graphWidth}
 y2={getY(averagePrice)}
 stroke="#9CA3AF"
 strokeWidth="1"
 strokeDasharray="4,4"
 />

 {/* Data points */}
 {history.map((point, index) => (
 <React.Fragment key={index}>
 <circle
 cx={index * pointSpacing}
 cy={getY(point.price)}
 r={point.isLowestPrice ? "4" : "2"}
 fill={point.isLowestPrice ? "#10B981" : "#4F46E5"}
 className={point.isLowestPrice ? "animate-pulse" : ""}
 />

 {/* Label for lowest price */}
 {point.isLowestPrice && (
 <>
 <text
 x={index * pointSpacing}
 y={getY(point.price) - 10}
 fontSize="10"
 textAnchor="middle"
 fill="#10B981"
 fontWeight="bold"
 >
 Lowest
 </text>
 </>
 )}
 </React.Fragment>
 ))}
 </svg>

 {/* Y-axis labels */}
 <div className="absolute top-0 left-0 h-full flex flex-col justify-between text-xs text-gray-500">
 <div>{Math.round(maxPrice + buffer)}</div>
 <div>{Math.round(minPrice - buffer)}</div>
 </div>
 </div>

 {/* Price stats */}
 <div className="grid grid-cols-3 gap-4 mb-4">
 <div className="text-center">
 <div className="text-sm text-gray-500">Lowest</div>
 <div className="font-semibold text-green-600">{currency} {lowestPrice}</div>
 </div>
 <div className="text-center">
 <div className="text-sm text-gray-500">Average</div>
 <div className="font-semibold text-gray-600">{currency} {averagePrice}</div>
 </div>
 <div className="text-center">
 <div className="text-sm text-gray-500">Highest</div>
 <div className="font-semibold text-red-600">{currency} {highestPrice}</div>
 </div>
 </div>

 {/* Recommendation */}
 <div className={`p-3 rounded-lg ${
 recommendation === 'buy' 
 ? 'bg-green-50 border border-green-200' 
 : recommendation === 'wait' 
 ? 'bg-red-50 border border-red-200' 
 : 'bg-gray-50 border border-gray-200'
 }`}>
 <div className={`text-sm font-medium ${
 recommendation === 'buy' 
 ? 'text-green-600' 
 : recommendation === 'wait' 
 ? 'text-red-600' 
 : 'text-gray-600'
 }`}>
 {recommendation === 'buy' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Good time to buy!</p>
 <p>Current prices are {Math.round((averagePrice - currentPrice) / averagePrice * 100)}% below the average for this route.</p>
 </div>
 </div>
 )}
 {recommendation === 'wait' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Consider waiting for prices to drop</p>
 <p>Current prices are {Math.round((currentPrice - averagePrice) / averagePrice * 100)}% above the average for this route.</p>
 </div>
 </div>
 )}
 {recommendation === 'neutral' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Prices are stable</p>
 <p>Current prices are close to the average for this route.</p>
 </div>
 </div>
 )}
 </div>
 </div>
 </div>
 );
};

export default PriceHistoryWidget;

60 changes: 46 additions & 14 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,22 +1,54 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
# Flight Price History Component

## Getting Started
This is a prototype of a price history feature for a flight search website. The component displays price trends and recommendations at a glance, with the ability to expand into a full interactive graph view.

First, run the development server:
## Features

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
- Compact view showing current price, price trend, and quick recommendation
- Expandable detailed view with price history graph
- Visual indicators for price changes (up/down)
- Recommendations based on price analysis
- Responsive design using Tailwind CSS

## How to Use

Import the component in your Next.js/React application:

```jsx
import PriceHistoryWidget from './components/PriceHistoryWidget';

// Then use it in your component
function FlightDetails() {
 return (
 <div>
 <h2>Flight Details</h2>
 <PriceHistoryWidget />
 </div>
 );
}
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Data Structure

The component expects price history data in the following format:

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
```typescript
type PriceHistoryData = {
 currency: string;
 currentPrice: number;
 averagePrice: number;
 lowestPrice: number;
 highestPrice: number;
 recommendation: "buy" | "wait" | "neutral";
 priceChangePercentage: number;
 history: PriceDataPoint[];
};

This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
type PriceDataPoint = {
 date: string; // ISO date string
 price: number;
 isLowestPrice?: boolean;
};
```

For this prototype, mock data is generated internally. In a real application, you would connect this to your actual price history API.
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
ModeInspect: New updates to the project#5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

modeinspect-eu
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


ModeInspect: New updates to the project
#5
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


295 changes: 295 additions & 0 deletions
PriceHistoryWidget.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
import React, { useState } from 'react';
import { mockPriceData, PriceHistoryData, PriceDataPoint } from './mockPriceData';

const PriceHistoryWidget: React.FC = () => {
 const [isExpanded, setIsExpanded] = useState(false);
 const data = mockPriceData;

 return (
 <div className="font-sans max-w-md mx-auto">
 {isExpanded ? (
 <ExpandedView 
 data={data} 
 onCollapse={() => setIsExpanded(false)} 
 />
 ) : (
 <CollapsedView 
 data={data} 
 onExpand={() => setIsExpanded(true)} 
 />
 )}
 </div>
 );
};

interface ViewProps {
 data: PriceHistoryData;
 onExpand?: () => void;
 onCollapse?: () => void;
}

const CollapsedView: React.FC<ViewProps> = ({ data, onExpand }) => {
 const { 
 currentPrice, 
 currency, 
 recommendation, 
 priceChangePercentage 
 } = data;

 return (
 <div 
 className="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300"
 onClick={onExpand}
 >
 <div className="flex justify-between items-center mb-2">
 <h3 className="text-lg font-semibold text-gray-800">Price History</h3>
 <button 
 onClick={(e) => {
 e.stopPropagation();
 onExpand?.();
 }}
 className="text-blue-500 hover:text-blue-700"
 aria-label="Expand price history"
 >
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
 </svg>
 </button>
 </div>

 <div className="flex items-center mb-3">
 <div className="text-2xl font-bold text-gray-900">{currency} {currentPrice}</div>
 <div className={`ml-2 px-2 py-1 rounded-full text-sm font-medium ${
 priceChangePercentage < 0 
 ? 'bg-green-100 text-green-800' 
 : 'bg-red-100 text-red-800'
 }`}>
 {priceChangePercentage >= 0 ? '+' : ''}{priceChangePercentage}%
 </div>
 </div>

 <div className={`text-sm font-medium ${
 recommendation === 'buy' 
 ? 'text-green-600' 
 : recommendation === 'wait' 
 ? 'text-red-600' 
 : 'text-gray-600'
 }`}>
 {recommendation === 'buy' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z" clipRule="evenodd" />
 </svg>
 Good time to buy! Prices are below average.
 </div>
 )}
 {recommendation === 'wait' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
 </svg>
 Consider waiting. Prices are higher than usual.
 </div>
 )}
 {recommendation === 'neutral' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
 </svg>
 Prices are around average for this route.
 </div>
 )}
 </div>
 </div>
 );
};

const ExpandedView: React.FC<ViewProps> = ({ data, onCollapse }) => {
 const { 
 currentPrice, 
 currency, 
 averagePrice, 
 lowestPrice, 
 highestPrice, 
 recommendation, 
 history 
 } = data;

 // Find the highest price in the dataset for graph scaling
 const maxPrice = Math.max(...history.map(item => item.price));
 const minPrice = Math.min(...history.map(item => item.price));
 const priceRange = maxPrice - minPrice;
 const buffer = priceRange * 0.1; // 10% buffer

 // Graph height and scaling
 const graphHeight = 150;
 const getY = (price: number) => {
 return graphHeight - ((price - (minPrice - buffer)) / ((maxPrice + buffer) - (minPrice - buffer))) * graphHeight;
 };

 // Generate path for the graph
 const graphWidth = 300;
 const pointSpacing = graphWidth / (history.length - 1);

 let pathData = `M 0,${getY(history[0].price)}`;
 history.forEach((point, index) => {
 if (index > 0) {
 pathData += ` L ${index * pointSpacing},${getY(point.price)}`;
 }
 });

 return (
 <div className="bg-white rounded-lg shadow-lg p-6 transition-all duration-300">
 <div className="flex justify-between items-center mb-4">
 <h3 className="text-lg font-semibold text-gray-800">Price History</h3>
 <button 
 onClick={onCollapse}
 className="text-blue-500 hover:text-blue-700"
 aria-label="Collapse price history"
 >
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clipRule="evenodd" />
 </svg>
 </button>
 </div>

 <div className="flex justify-between mb-2">
 <div className="text-sm text-gray-500">Last 30 days</div>
 <div className="text-sm font-medium text-gray-800">Current: {currency} {currentPrice}</div>
 </div>

 {/* Graph */}
 <div className="relative h-40 mb-6">
 <svg 
 viewBox={`0 0 ${graphWidth} ${graphHeight}`} 
 className="w-full h-full"
 preserveAspectRatio="none"
 >
 {/* Price line */}
 <path
 d={pathData}
 fill="none"
 stroke="#4F46E5"
 strokeWidth="2"
 className="transition-all duration-700 ease-in-out"
 />

 {/* Average price line */}
 <line
 x1="0"
 y1={getY(averagePrice)}
 x2={graphWidth}
 y2={getY(averagePrice)}
 stroke="#9CA3AF"
 strokeWidth="1"
 strokeDasharray="4,4"
 />

 {/* Data points */}
 {history.map((point, index) => (
 <React.Fragment key={index}>
 <circle
 cx={index * pointSpacing}
 cy={getY(point.price)}
 r={point.isLowestPrice ? "4" : "2"}
 fill={point.isLowestPrice ? "#10B981" : "#4F46E5"}
 className={point.isLowestPrice ? "animate-pulse" : ""}
 />

 {/* Label for lowest price */}
 {point.isLowestPrice && (
 <>
 <text
 x={index * pointSpacing}
 y={getY(point.price) - 10}
 fontSize="10"
 textAnchor="middle"
 fill="#10B981"
 fontWeight="bold"
 >
 Lowest
 </text>
 </>
 )}
 </React.Fragment>
 ))}
 </svg>

 {/* Y-axis labels */}
 <div className="absolute top-0 left-0 h-full flex flex-col justify-between text-xs text-gray-500">
 <div>{Math.round(maxPrice + buffer)}</div>
 <div>{Math.round(minPrice - buffer)}</div>
 </div>
 </div>

 {/* Price stats */}
 <div className="grid grid-cols-3 gap-4 mb-4">
 <div className="text-center">
 <div className="text-sm text-gray-500">Lowest</div>
 <div className="font-semibold text-green-600">{currency} {lowestPrice}</div>
 </div>
 <div className="text-center">
 <div className="text-sm text-gray-500">Average</div>
 <div className="font-semibold text-gray-600">{currency} {averagePrice}</div>
 </div>
 <div className="text-center">
 <div className="text-sm text-gray-500">Highest</div>
 <div className="font-semibold text-red-600">{currency} {highestPrice}</div>
 </div>
 </div>

 {/* Recommendation */}
 <div className={`p-3 rounded-lg ${
 recommendation === 'buy' 
 ? 'bg-green-50 border border-green-200' 
 : recommendation === 'wait' 
 ? 'bg-red-50 border border-red-200' 
 : 'bg-gray-50 border border-gray-200'
 }`}>
 <div className={`text-sm font-medium ${
 recommendation === 'buy' 
 ? 'text-green-600' 
 : recommendation === 'wait' 
 ? 'text-red-600' 
 : 'text-gray-600'
 }`}>
 {recommendation === 'buy' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Good time to buy!</p>
 <p>Current prices are {Math.round((averagePrice - currentPrice) / averagePrice * 100)}% below the average for this route.</p>
 </div>
 </div>
 )}
 {recommendation === 'wait' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Consider waiting for prices to drop</p>
 <p>Current prices are {Math.round((currentPrice - averagePrice) / averagePrice * 100)}% above the average for this route.</p>
 </div>
 </div>
 )}
 {recommendation === 'neutral' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Prices are stable</p>
 <p>Current prices are close to the average for this route.</p>
 </div>
 </div>
 )}
 </div>
 </div>
 </div>
 );
};

export default PriceHistoryWidget;

60 changes: 46 additions & 14 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,22 +1,54 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
# Flight Price History Component

## Getting Started
This is a prototype of a price history feature for a flight search website. The component displays price trends and recommendations at a glance, with the ability to expand into a full interactive graph view.

First, run the development server:
## Features

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
- Compact view showing current price, price trend, and quick recommendation
- Expandable detailed view with price history graph
- Visual indicators for price changes (up/down)
- Recommendations based on price analysis
- Responsive design using Tailwind CSS

## How to Use

Import the component in your Next.js/React application:

```jsx
import PriceHistoryWidget from './components/PriceHistoryWidget';

// Then use it in your component
function FlightDetails() {
 return (
 <div>
 <h2>Flight Details</h2>
 <PriceHistoryWidget />
 </div>
 );
}
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Data Structure

The component expects price history data in the following format:

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
```typescript
type PriceHistoryData = {
 currency: string;
 currentPrice: number;
 averagePrice: number;
 lowestPrice: number;
 highestPrice: number;
 recommendation: "buy" | "wait" | "neutral";
 priceChangePercentage: number;
 history: PriceDataPoint[];
};

This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
type PriceDataPoint = {
 date: string; // ISO date string
 price: number;
 isLowestPrice?: boolean;
};
```

For this prototype, mock data is generated internally. In a real application, you would connect this to your actual price history API.
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
ModeInspect: New updates to the project#5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

modeinspect-eu
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


ModeInspect: New updates to the project
#5
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


295 changes: 295 additions & 0 deletions
PriceHistoryWidget.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
import React, { useState } from 'react';
import { mockPriceData, PriceHistoryData, PriceDataPoint } from './mockPriceData';

const PriceHistoryWidget: React.FC = () => {
 const [isExpanded, setIsExpanded] = useState(false);
 const data = mockPriceData;

 return (
 <div className="font-sans max-w-md mx-auto">
 {isExpanded ? (
 <ExpandedView 
 data={data} 
 onCollapse={() => setIsExpanded(false)} 
 />
 ) : (
 <CollapsedView 
 data={data} 
 onExpand={() => setIsExpanded(true)} 
 />
 )}
 </div>
 );
};

interface ViewProps {
 data: PriceHistoryData;
 onExpand?: () => void;
 onCollapse?: () => void;
}

const CollapsedView: React.FC<ViewProps> = ({ data, onExpand }) => {
 const { 
 currentPrice, 
 currency, 
 recommendation, 
 priceChangePercentage 
 } = data;

 return (
 <div 
 className="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300"
 onClick={onExpand}
 >
 <div className="flex justify-between items-center mb-2">
 <h3 className="text-lg font-semibold text-gray-800">Price History</h3>
 <button 
 onClick={(e) => {
 e.stopPropagation();
 onExpand?.();
 }}
 className="text-blue-500 hover:text-blue-700"
 aria-label="Expand price history"
 >
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
 </svg>
 </button>
 </div>

 <div className="flex items-center mb-3">
 <div className="text-2xl font-bold text-gray-900">{currency} {currentPrice}</div>
 <div className={`ml-2 px-2 py-1 rounded-full text-sm font-medium ${
 priceChangePercentage < 0 
 ? 'bg-green-100 text-green-800' 
 : 'bg-red-100 text-red-800'
 }`}>
 {priceChangePercentage >= 0 ? '+' : ''}{priceChangePercentage}%
 </div>
 </div>

 <div className={`text-sm font-medium ${
 recommendation === 'buy' 
 ? 'text-green-600' 
 : recommendation === 'wait' 
 ? 'text-red-600' 
 : 'text-gray-600'
 }`}>
 {recommendation === 'buy' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z" clipRule="evenodd" />
 </svg>
 Good time to buy! Prices are below average.
 </div>
 )}
 {recommendation === 'wait' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
 </svg>
 Consider waiting. Prices are higher than usual.
 </div>
 )}
 {recommendation === 'neutral' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
 </svg>
 Prices are around average for this route.
 </div>
 )}
 </div>
 </div>
 );
};

const ExpandedView: React.FC<ViewProps> = ({ data, onCollapse }) => {
 const { 
 currentPrice, 
 currency, 
 averagePrice, 
 lowestPrice, 
 highestPrice, 
 recommendation, 
 history 
 } = data;

 // Find the highest price in the dataset for graph scaling
 const maxPrice = Math.max(...history.map(item => item.price));
 const minPrice = Math.min(...history.map(item => item.price));
 const priceRange = maxPrice - minPrice;
 const buffer = priceRange * 0.1; // 10% buffer

 // Graph height and scaling
 const graphHeight = 150;
 const getY = (price: number) => {
 return graphHeight - ((price - (minPrice - buffer)) / ((maxPrice + buffer) - (minPrice - buffer))) * graphHeight;
 };

 // Generate path for the graph
 const graphWidth = 300;
 const pointSpacing = graphWidth / (history.length - 1);

 let pathData = `M 0,${getY(history[0].price)}`;
 history.forEach((point, index) => {
 if (index > 0) {
 pathData += ` L ${index * pointSpacing},${getY(point.price)}`;
 }
 });

 return (
 <div className="bg-white rounded-lg shadow-lg p-6 transition-all duration-300">
 <div className="flex justify-between items-center mb-4">
 <h3 className="text-lg font-semibold text-gray-800">Price History</h3>
 <button 
 onClick={onCollapse}
 className="text-blue-500 hover:text-blue-700"
 aria-label="Collapse price history"
 >
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clipRule="evenodd" />
 </svg>
 </button>
 </div>

 <div className="flex justify-between mb-2">
 <div className="text-sm text-gray-500">Last 30 days</div>
 <div className="text-sm font-medium text-gray-800">Current: {currency} {currentPrice}</div>
 </div>

 {/* Graph */}
 <div className="relative h-40 mb-6">
 <svg 
 viewBox={`0 0 ${graphWidth} ${graphHeight}`} 
 className="w-full h-full"
 preserveAspectRatio="none"
 >
 {/* Price line */}
 <path
 d={pathData}
 fill="none"
 stroke="#4F46E5"
 strokeWidth="2"
 className="transition-all duration-700 ease-in-out"
 />

 {/* Average price line */}
 <line
 x1="0"
 y1={getY(averagePrice)}
 x2={graphWidth}
 y2={getY(averagePrice)}
 stroke="#9CA3AF"
 strokeWidth="1"
 strokeDasharray="4,4"
 />

 {/* Data points */}
 {history.map((point, index) => (
 <React.Fragment key={index}>
 <circle
 cx={index * pointSpacing}
 cy={getY(point.price)}
 r={point.isLowestPrice ? "4" : "2"}
 fill={point.isLowestPrice ? "#10B981" : "#4F46E5"}
 className={point.isLowestPrice ? "animate-pulse" : ""}
 />

 {/* Label for lowest price */}
 {point.isLowestPrice && (
 <>
 <text
 x={index * pointSpacing}
 y={getY(point.price) - 10}
 fontSize="10"
 textAnchor="middle"
 fill="#10B981"
 fontWeight="bold"
 >
 Lowest
 </text>
 </>
 )}
 </React.Fragment>
 ))}
 </svg>

 {/* Y-axis labels */}
 <div className="absolute top-0 left-0 h-full flex flex-col justify-between text-xs text-gray-500">
 <div>{Math.round(maxPrice + buffer)}</div>
 <div>{Math.round(minPrice - buffer)}</div>
 </div>
 </div>

 {/* Price stats */}
 <div className="grid grid-cols-3 gap-4 mb-4">
 <div className="text-center">
 <div className="text-sm text-gray-500">Lowest</div>
 <div className="font-semibold text-green-600">{currency} {lowestPrice}</div>
 </div>
 <div className="text-center">
 <div className="text-sm text-gray-500">Average</div>
 <div className="font-semibold text-gray-600">{currency} {averagePrice}</div>
 </div>
 <div className="text-center">
 <div className="text-sm text-gray-500">Highest</div>
 <div className="font-semibold text-red-600">{currency} {highestPrice}</div>
 </div>
 </div>

 {/* Recommendation */}
 <div className={`p-3 rounded-lg ${
 recommendation === 'buy' 
 ? 'bg-green-50 border border-green-200' 
 : recommendation === 'wait' 
 ? 'bg-red-50 border border-red-200' 
 : 'bg-gray-50 border border-gray-200'
 }`}>
 <div className={`text-sm font-medium ${
 recommendation === 'buy' 
 ? 'text-green-600' 
 : recommendation === 'wait' 
 ? 'text-red-600' 
 : 'text-gray-600'
 }`}>
 {recommendation === 'buy' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Good time to buy!</p>
 <p>Current prices are {Math.round((averagePrice - currentPrice) / averagePrice * 100)}% below the average for this route.</p>
 </div>
 </div>
 )}
 {recommendation === 'wait' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Consider waiting for prices to drop</p>
 <p>Current prices are {Math.round((currentPrice - averagePrice) / averagePrice * 100)}% above the average for this route.</p>
 </div>
 </div>
 )}
 {recommendation === 'neutral' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Prices are stable</p>
 <p>Current prices are close to the average for this route.</p>
 </div>
 </div>
 )}
 </div>
 </div>
 </div>
 );
};

export default PriceHistoryWidget;

60 changes: 46 additions & 14 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,22 +1,54 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
# Flight Price History Component

## Getting Started
This is a prototype of a price history feature for a flight search website. The component displays price trends and recommendations at a glance, with the ability to expand into a full interactive graph view.

First, run the development server:
## Features

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
- Compact view showing current price, price trend, and quick recommendation
- Expandable detailed view with price history graph
- Visual indicators for price changes (up/down)
- Recommendations based on price analysis
- Responsive design using Tailwind CSS

## How to Use

Import the component in your Next.js/React application:

```jsx
import PriceHistoryWidget from './components/PriceHistoryWidget';

// Then use it in your component
function FlightDetails() {
 return (
 <div>
 <h2>Flight Details</h2>
 <PriceHistoryWidget />
 </div>
 );
}
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Data Structure

The component expects price history data in the following format:

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
```typescript
type PriceHistoryData = {
 currency: string;
 currentPrice: number;
 averagePrice: number;
 lowestPrice: number;
 highestPrice: number;
 recommendation: "buy" | "wait" | "neutral";
 priceChangePercentage: number;
 history: PriceDataPoint[];
};

This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
type PriceDataPoint = {
 date: string; // ISO date string
 price: number;
 isLowestPrice?: boolean;
};
```

For this prototype, mock data is generated internally. In a real application, you would connect this to your actual price history API.
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
ModeInspect: New updates to the project#5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

modeinspect-eu
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


ModeInspect: New updates to the project
#5
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


295 changes: 295 additions & 0 deletions
PriceHistoryWidget.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
import React, { useState } from 'react';
import { mockPriceData, PriceHistoryData, PriceDataPoint } from './mockPriceData';

const PriceHistoryWidget: React.FC = () => {
 const [isExpanded, setIsExpanded] = useState(false);
 const data = mockPriceData;

 return (
 <div className="font-sans max-w-md mx-auto">
 {isExpanded ? (
 <ExpandedView 
 data={data} 
 onCollapse={() => setIsExpanded(false)} 
 />
 ) : (
 <CollapsedView 
 data={data} 
 onExpand={() => setIsExpanded(true)} 
 />
 )}
 </div>
 );
};

interface ViewProps {
 data: PriceHistoryData;
 onExpand?: () => void;
 onCollapse?: () => void;
}

const CollapsedView: React.FC<ViewProps> = ({ data, onExpand }) => {
 const { 
 currentPrice, 
 currency, 
 recommendation, 
 priceChangePercentage 
 } = data;

 return (
 <div 
 className="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300"
 onClick={onExpand}
 >
 <div className="flex justify-between items-center mb-2">
 <h3 className="text-lg font-semibold text-gray-800">Price History</h3>
 <button 
 onClick={(e) => {
 e.stopPropagation();
 onExpand?.();
 }}
 className="text-blue-500 hover:text-blue-700"
 aria-label="Expand price history"
 >
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
 </svg>
 </button>
 </div>

 <div className="flex items-center mb-3">
 <div className="text-2xl font-bold text-gray-900">{currency} {currentPrice}</div>
 <div className={`ml-2 px-2 py-1 rounded-full text-sm font-medium ${
 priceChangePercentage < 0 
 ? 'bg-green-100 text-green-800' 
 : 'bg-red-100 text-red-800'
 }`}>
 {priceChangePercentage >= 0 ? '+' : ''}{priceChangePercentage}%
 </div>
 </div>

 <div className={`text-sm font-medium ${
 recommendation === 'buy' 
 ? 'text-green-600' 
 : recommendation === 'wait' 
 ? 'text-red-600' 
 : 'text-gray-600'
 }`}>
 {recommendation === 'buy' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z" clipRule="evenodd" />
 </svg>
 Good time to buy! Prices are below average.
 </div>
 )}
 {recommendation === 'wait' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
 </svg>
 Consider waiting. Prices are higher than usual.
 </div>
 )}
 {recommendation === 'neutral' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
 </svg>
 Prices are around average for this route.
 </div>
 )}
 </div>
 </div>
 );
};

const ExpandedView: React.FC<ViewProps> = ({ data, onCollapse }) => {
 const { 
 currentPrice, 
 currency, 
 averagePrice, 
 lowestPrice, 
 highestPrice, 
 recommendation, 
 history 
 } = data;

 // Find the highest price in the dataset for graph scaling
 const maxPrice = Math.max(...history.map(item => item.price));
 const minPrice = Math.min(...history.map(item => item.price));
 const priceRange = maxPrice - minPrice;
 const buffer = priceRange * 0.1; // 10% buffer

 // Graph height and scaling
 const graphHeight = 150;
 const getY = (price: number) => {
 return graphHeight - ((price - (minPrice - buffer)) / ((maxPrice + buffer) - (minPrice - buffer))) * graphHeight;
 };

 // Generate path for the graph
 const graphWidth = 300;
 const pointSpacing = graphWidth / (history.length - 1);

 let pathData = `M 0,${getY(history[0].price)}`;
 history.forEach((point, index) => {
 if (index > 0) {
 pathData += ` L ${index * pointSpacing},${getY(point.price)}`;
 }
 });

 return (
 <div className="bg-white rounded-lg shadow-lg p-6 transition-all duration-300">
 <div className="flex justify-between items-center mb-4">
 <h3 className="text-lg font-semibold text-gray-800">Price History</h3>
 <button 
 onClick={onCollapse}
 className="text-blue-500 hover:text-blue-700"
 aria-label="Collapse price history"
 >
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clipRule="evenodd" />
 </svg>
 </button>
 </div>

 <div className="flex justify-between mb-2">
 <div className="text-sm text-gray-500">Last 30 days</div>
 <div className="text-sm font-medium text-gray-800">Current: {currency} {currentPrice}</div>
 </div>

 {/* Graph */}
 <div className="relative h-40 mb-6">
 <svg 
 viewBox={`0 0 ${graphWidth} ${graphHeight}`} 
 className="w-full h-full"
 preserveAspectRatio="none"
 >
 {/* Price line */}
 <path
 d={pathData}
 fill="none"
 stroke="#4F46E5"
 strokeWidth="2"
 className="transition-all duration-700 ease-in-out"
 />

 {/* Average price line */}
 <line
 x1="0"
 y1={getY(averagePrice)}
 x2={graphWidth}
 y2={getY(averagePrice)}
 stroke="#9CA3AF"
 strokeWidth="1"
 strokeDasharray="4,4"
 />

 {/* Data points */}
 {history.map((point, index) => (
 <React.Fragment key={index}>
 <circle
 cx={index * pointSpacing}
 cy={getY(point.price)}
 r={point.isLowestPrice ? "4" : "2"}
 fill={point.isLowestPrice ? "#10B981" : "#4F46E5"}
 className={point.isLowestPrice ? "animate-pulse" : ""}
 />

 {/* Label for lowest price */}
 {point.isLowestPrice && (
 <>
 <text
 x={index * pointSpacing}
 y={getY(point.price) - 10}
 fontSize="10"
 textAnchor="middle"
 fill="#10B981"
 fontWeight="bold"
 >
 Lowest
 </text>
 </>
 )}
 </React.Fragment>
 ))}
 </svg>

 {/* Y-axis labels */}
 <div className="absolute top-0 left-0 h-full flex flex-col justify-between text-xs text-gray-500">
 <div>{Math.round(maxPrice + buffer)}</div>
 <div>{Math.round(minPrice - buffer)}</div>
 </div>
 </div>

 {/* Price stats */}
 <div className="grid grid-cols-3 gap-4 mb-4">
 <div className="text-center">
 <div className="text-sm text-gray-500">Lowest</div>
 <div className="font-semibold text-green-600">{currency} {lowestPrice}</div>
 </div>
 <div className="text-center">
 <div className="text-sm text-gray-500">Average</div>
 <div className="font-semibold text-gray-600">{currency} {averagePrice}</div>
 </div>
 <div className="text-center">
 <div className="text-sm text-gray-500">Highest</div>
 <div className="font-semibold text-red-600">{currency} {highestPrice}</div>
 </div>
 </div>

 {/* Recommendation */}
 <div className={`p-3 rounded-lg ${
 recommendation === 'buy' 
 ? 'bg-green-50 border border-green-200' 
 : recommendation === 'wait' 
 ? 'bg-red-50 border border-red-200' 
 : 'bg-gray-50 border border-gray-200'
 }`}>
 <div className={`text-sm font-medium ${
 recommendation === 'buy' 
 ? 'text-green-600' 
 : recommendation === 'wait' 
 ? 'text-red-600' 
 : 'text-gray-600'
 }`}>
 {recommendation === 'buy' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Good time to buy!</p>
 <p>Current prices are {Math.round((averagePrice - currentPrice) / averagePrice * 100)}% below the average for this route.</p>
 </div>
 </div>
 )}
 {recommendation === 'wait' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Consider waiting for prices to drop</p>
 <p>Current prices are {Math.round((currentPrice - averagePrice) / averagePrice * 100)}% above the average for this route.</p>
 </div>
 </div>
 )}
 {recommendation === 'neutral' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Prices are stable</p>
 <p>Current prices are close to the average for this route.</p>
 </div>
 </div>
 )}
 </div>
 </div>
 </div>
 );
};

export default PriceHistoryWidget;

60 changes: 46 additions & 14 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,22 +1,54 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
# Flight Price History Component

## Getting Started
This is a prototype of a price history feature for a flight search website. The component displays price trends and recommendations at a glance, with the ability to expand into a full interactive graph view.

First, run the development server:
## Features

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
- Compact view showing current price, price trend, and quick recommendation
- Expandable detailed view with price history graph
- Visual indicators for price changes (up/down)
- Recommendations based on price analysis
- Responsive design using Tailwind CSS

## How to Use

Import the component in your Next.js/React application:

```jsx
import PriceHistoryWidget from './components/PriceHistoryWidget';

// Then use it in your component
function FlightDetails() {
 return (
 <div>
 <h2>Flight Details</h2>
 <PriceHistoryWidget />
 </div>
 );
}
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Data Structure

The component expects price history data in the following format:

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
```typescript
type PriceHistoryData = {
 currency: string;
 currentPrice: number;
 averagePrice: number;
 lowestPrice: number;
 highestPrice: number;
 recommendation: "buy" | "wait" | "neutral";
 priceChangePercentage: number;
 history: PriceDataPoint[];
};

This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
type PriceDataPoint = {
 date: string; // ISO date string
 price: number;
 isLowestPrice?: boolean;
};
```

For this prototype, mock data is generated internally. In a real application, you would connect this to your actual price history API.
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
ModeInspect: New updates to the project#5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

modeinspect-eu
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


ModeInspect: New updates to the project
#5
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


295 changes: 295 additions & 0 deletions
PriceHistoryWidget.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
import React, { useState } from 'react';
import { mockPriceData, PriceHistoryData, PriceDataPoint } from './mockPriceData';

const PriceHistoryWidget: React.FC = () => {
 const [isExpanded, setIsExpanded] = useState(false);
 const data = mockPriceData;

 return (
 <div className="font-sans max-w-md mx-auto">
 {isExpanded ? (
 <ExpandedView 
 data={data} 
 onCollapse={() => setIsExpanded(false)} 
 />
 ) : (
 <CollapsedView 
 data={data} 
 onExpand={() => setIsExpanded(true)} 
 />
 )}
 </div>
 );
};

interface ViewProps {
 data: PriceHistoryData;
 onExpand?: () => void;
 onCollapse?: () => void;
}

const CollapsedView: React.FC<ViewProps> = ({ data, onExpand }) => {
 const { 
 currentPrice, 
 currency, 
 recommendation, 
 priceChangePercentage 
 } = data;

 return (
 <div 
 className="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300"
 onClick={onExpand}
 >
 <div className="flex justify-between items-center mb-2">
 <h3 className="text-lg font-semibold text-gray-800">Price History</h3>
 <button 
 onClick={(e) => {
 e.stopPropagation();
 onExpand?.();
 }}
 className="text-blue-500 hover:text-blue-700"
 aria-label="Expand price history"
 >
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
 </svg>
 </button>
 </div>

 <div className="flex items-center mb-3">
 <div className="text-2xl font-bold text-gray-900">{currency} {currentPrice}</div>
 <div className={`ml-2 px-2 py-1 rounded-full text-sm font-medium ${
 priceChangePercentage < 0 
 ? 'bg-green-100 text-green-800' 
 : 'bg-red-100 text-red-800'
 }`}>
 {priceChangePercentage >= 0 ? '+' : ''}{priceChangePercentage}%
 </div>
 </div>

 <div className={`text-sm font-medium ${
 recommendation === 'buy' 
 ? 'text-green-600' 
 : recommendation === 'wait' 
 ? 'text-red-600' 
 : 'text-gray-600'
 }`}>
 {recommendation === 'buy' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z" clipRule="evenodd" />
 </svg>
 Good time to buy! Prices are below average.
 </div>
 )}
 {recommendation === 'wait' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
 </svg>
 Consider waiting. Prices are higher than usual.
 </div>
 )}
 {recommendation === 'neutral' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
 </svg>
 Prices are around average for this route.
 </div>
 )}
 </div>
 </div>
 );
};

const ExpandedView: React.FC<ViewProps> = ({ data, onCollapse }) => {
 const { 
 currentPrice, 
 currency, 
 averagePrice, 
 lowestPrice, 
 highestPrice, 
 recommendation, 
 history 
 } = data;

 // Find the highest price in the dataset for graph scaling
 const maxPrice = Math.max(...history.map(item => item.price));
 const minPrice = Math.min(...history.map(item => item.price));
 const priceRange = maxPrice - minPrice;
 const buffer = priceRange * 0.1; // 10% buffer

 // Graph height and scaling
 const graphHeight = 150;
 const getY = (price: number) => {
 return graphHeight - ((price - (minPrice - buffer)) / ((maxPrice + buffer) - (minPrice - buffer))) * graphHeight;
 };

 // Generate path for the graph
 const graphWidth = 300;
 const pointSpacing = graphWidth / (history.length - 1);

 let pathData = `M 0,${getY(history[0].price)}`;
 history.forEach((point, index) => {
 if (index > 0) {
 pathData += ` L ${index * pointSpacing},${getY(point.price)}`;
 }
 });

 return (
 <div className="bg-white rounded-lg shadow-lg p-6 transition-all duration-300">
 <div className="flex justify-between items-center mb-4">
 <h3 className="text-lg font-semibold text-gray-800">Price History</h3>
 <button 
 onClick={onCollapse}
 className="text-blue-500 hover:text-blue-700"
 aria-label="Collapse price history"
 >
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clipRule="evenodd" />
 </svg>
 </button>
 </div>

 <div className="flex justify-between mb-2">
 <div className="text-sm text-gray-500">Last 30 days</div>
 <div className="text-sm font-medium text-gray-800">Current: {currency} {currentPrice}</div>
 </div>

 {/* Graph */}
 <div className="relative h-40 mb-6">
 <svg 
 viewBox={`0 0 ${graphWidth} ${graphHeight}`} 
 className="w-full h-full"
 preserveAspectRatio="none"
 >
 {/* Price line */}
 <path
 d={pathData}
 fill="none"
 stroke="#4F46E5"
 strokeWidth="2"
 className="transition-all duration-700 ease-in-out"
 />

 {/* Average price line */}
 <line
 x1="0"
 y1={getY(averagePrice)}
 x2={graphWidth}
 y2={getY(averagePrice)}
 stroke="#9CA3AF"
 strokeWidth="1"
 strokeDasharray="4,4"
 />

 {/* Data points */}
 {history.map((point, index) => (
 <React.Fragment key={index}>
 <circle
 cx={index * pointSpacing}
 cy={getY(point.price)}
 r={point.isLowestPrice ? "4" : "2"}
 fill={point.isLowestPrice ? "#10B981" : "#4F46E5"}
 className={point.isLowestPrice ? "animate-pulse" : ""}
 />

 {/* Label for lowest price */}
 {point.isLowestPrice && (
 <>
 <text
 x={index * pointSpacing}
 y={getY(point.price) - 10}
 fontSize="10"
 textAnchor="middle"
 fill="#10B981"
 fontWeight="bold"
 >
 Lowest
 </text>
 </>
 )}
 </React.Fragment>
 ))}
 </svg>

 {/* Y-axis labels */}
 <div className="absolute top-0 left-0 h-full flex flex-col justify-between text-xs text-gray-500">
 <div>{Math.round(maxPrice + buffer)}</div>
 <div>{Math.round(minPrice - buffer)}</div>
 </div>
 </div>

 {/* Price stats */}
 <div className="grid grid-cols-3 gap-4 mb-4">
 <div className="text-center">
 <div className="text-sm text-gray-500">Lowest</div>
 <div className="font-semibold text-green-600">{currency} {lowestPrice}</div>
 </div>
 <div className="text-center">
 <div className="text-sm text-gray-500">Average</div>
 <div className="font-semibold text-gray-600">{currency} {averagePrice}</div>
 </div>
 <div className="text-center">
 <div className="text-sm text-gray-500">Highest</div>
 <div className="font-semibold text-red-600">{currency} {highestPrice}</div>
 </div>
 </div>

 {/* Recommendation */}
 <div className={`p-3 rounded-lg ${
 recommendation === 'buy' 
 ? 'bg-green-50 border border-green-200' 
 : recommendation === 'wait' 
 ? 'bg-red-50 border border-red-200' 
 : 'bg-gray-50 border border-gray-200'
 }`}>
 <div className={`text-sm font-medium ${
 recommendation === 'buy' 
 ? 'text-green-600' 
 : recommendation === 'wait' 
 ? 'text-red-600' 
 : 'text-gray-600'
 }`}>
 {recommendation === 'buy' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Good time to buy!</p>
 <p>Current prices are {Math.round((averagePrice - currentPrice) / averagePrice * 100)}% below the average for this route.</p>
 </div>
 </div>
 )}
 {recommendation === 'wait' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Consider waiting for prices to drop</p>
 <p>Current prices are {Math.round((currentPrice - averagePrice) / averagePrice * 100)}% above the average for this route.</p>
 </div>
 </div>
 )}
 {recommendation === 'neutral' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Prices are stable</p>
 <p>Current prices are close to the average for this route.</p>
 </div>
 </div>
 )}
 </div>
 </div>
 </div>
 );
};

export default PriceHistoryWidget;

60 changes: 46 additions & 14 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,22 +1,54 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
# Flight Price History Component

## Getting Started
This is a prototype of a price history feature for a flight search website. The component displays price trends and recommendations at a glance, with the ability to expand into a full interactive graph view.

First, run the development server:
## Features

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
- Compact view showing current price, price trend, and quick recommendation
- Expandable detailed view with price history graph
- Visual indicators for price changes (up/down)
- Recommendations based on price analysis
- Responsive design using Tailwind CSS

## How to Use

Import the component in your Next.js/React application:

```jsx
import PriceHistoryWidget from './components/PriceHistoryWidget';

// Then use it in your component
function FlightDetails() {
 return (
 <div>
 <h2>Flight Details</h2>
 <PriceHistoryWidget />
 </div>
 );
}
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Data Structure

The component expects price history data in the following format:

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
```typescript
type PriceHistoryData = {
 currency: string;
 currentPrice: number;
 averagePrice: number;
 lowestPrice: number;
 highestPrice: number;
 recommendation: "buy" | "wait" | "neutral";
 priceChangePercentage: number;
 history: PriceDataPoint[];
};

This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
type PriceDataPoint = {
 date: string; // ISO date string
 price: number;
 isLowestPrice?: boolean;
};
```

For this prototype, mock data is generated internally. In a real application, you would connect this to your actual price history API.
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
ModeInspect: New updates to the project#5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

modeinspect-eu
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


ModeInspect: New updates to the project
#5
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


295 changes: 295 additions & 0 deletions
PriceHistoryWidget.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
import React, { useState } from 'react';
import { mockPriceData, PriceHistoryData, PriceDataPoint } from './mockPriceData';

const PriceHistoryWidget: React.FC = () => {
 const [isExpanded, setIsExpanded] = useState(false);
 const data = mockPriceData;

 return (
 <div className="font-sans max-w-md mx-auto">
 {isExpanded ? (
 <ExpandedView 
 data={data} 
 onCollapse={() => setIsExpanded(false)} 
 />
 ) : (
 <CollapsedView 
 data={data} 
 onExpand={() => setIsExpanded(true)} 
 />
 )}
 </div>
 );
};

interface ViewProps {
 data: PriceHistoryData;
 onExpand?: () => void;
 onCollapse?: () => void;
}

const CollapsedView: React.FC<ViewProps> = ({ data, onExpand }) => {
 const { 
 currentPrice, 
 currency, 
 recommendation, 
 priceChangePercentage 
 } = data;

 return (
 <div 
 className="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300"
 onClick={onExpand}
 >
 <div className="flex justify-between items-center mb-2">
 <h3 className="text-lg font-semibold text-gray-800">Price History</h3>
 <button 
 onClick={(e) => {
 e.stopPropagation();
 onExpand?.();
 }}
 className="text-blue-500 hover:text-blue-700"
 aria-label="Expand price history"
 >
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
 </svg>
 </button>
 </div>

 <div className="flex items-center mb-3">
 <div className="text-2xl font-bold text-gray-900">{currency} {currentPrice}</div>
 <div className={`ml-2 px-2 py-1 rounded-full text-sm font-medium ${
 priceChangePercentage < 0 
 ? 'bg-green-100 text-green-800' 
 : 'bg-red-100 text-red-800'
 }`}>
 {priceChangePercentage >= 0 ? '+' : ''}{priceChangePercentage}%
 </div>
 </div>

 <div className={`text-sm font-medium ${
 recommendation === 'buy' 
 ? 'text-green-600' 
 : recommendation === 'wait' 
 ? 'text-red-600' 
 : 'text-gray-600'
 }`}>
 {recommendation === 'buy' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z" clipRule="evenodd" />
 </svg>
 Good time to buy! Prices are below average.
 </div>
 )}
 {recommendation === 'wait' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
 </svg>
 Consider waiting. Prices are higher than usual.
 </div>
 )}
 {recommendation === 'neutral' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
 </svg>
 Prices are around average for this route.
 </div>
 )}
 </div>
 </div>
 );
};

const ExpandedView: React.FC<ViewProps> = ({ data, onCollapse }) => {
 const { 
 currentPrice, 
 currency, 
 averagePrice, 
 lowestPrice, 
 highestPrice, 
 recommendation, 
 history 
 } = data;

 // Find the highest price in the dataset for graph scaling
 const maxPrice = Math.max(...history.map(item => item.price));
 const minPrice = Math.min(...history.map(item => item.price));
 const priceRange = maxPrice - minPrice;
 const buffer = priceRange * 0.1; // 10% buffer

 // Graph height and scaling
 const graphHeight = 150;
 const getY = (price: number) => {
 return graphHeight - ((price - (minPrice - buffer)) / ((maxPrice + buffer) - (minPrice - buffer))) * graphHeight;
 };

 // Generate path for the graph
 const graphWidth = 300;
 const pointSpacing = graphWidth / (history.length - 1);

 let pathData = `M 0,${getY(history[0].price)}`;
 history.forEach((point, index) => {
 if (index > 0) {
 pathData += ` L ${index * pointSpacing},${getY(point.price)}`;
 }
 });

 return (
 <div className="bg-white rounded-lg shadow-lg p-6 transition-all duration-300">
 <div className="flex justify-between items-center mb-4">
 <h3 className="text-lg font-semibold text-gray-800">Price History</h3>
 <button 
 onClick={onCollapse}
 className="text-blue-500 hover:text-blue-700"
 aria-label="Collapse price history"
 >
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clipRule="evenodd" />
 </svg>
 </button>
 </div>

 <div className="flex justify-between mb-2">
 <div className="text-sm text-gray-500">Last 30 days</div>
 <div className="text-sm font-medium text-gray-800">Current: {currency} {currentPrice}</div>
 </div>

 {/* Graph */}
 <div className="relative h-40 mb-6">
 <svg 
 viewBox={`0 0 ${graphWidth} ${graphHeight}`} 
 className="w-full h-full"
 preserveAspectRatio="none"
 >
 {/* Price line */}
 <path
 d={pathData}
 fill="none"
 stroke="#4F46E5"
 strokeWidth="2"
 className="transition-all duration-700 ease-in-out"
 />

 {/* Average price line */}
 <line
 x1="0"
 y1={getY(averagePrice)}
 x2={graphWidth}
 y2={getY(averagePrice)}
 stroke="#9CA3AF"
 strokeWidth="1"
 strokeDasharray="4,4"
 />

 {/* Data points */}
 {history.map((point, index) => (
 <React.Fragment key={index}>
 <circle
 cx={index * pointSpacing}
 cy={getY(point.price)}
 r={point.isLowestPrice ? "4" : "2"}
 fill={point.isLowestPrice ? "#10B981" : "#4F46E5"}
 className={point.isLowestPrice ? "animate-pulse" : ""}
 />

 {/* Label for lowest price */}
 {point.isLowestPrice && (
 <>
 <text
 x={index * pointSpacing}
 y={getY(point.price) - 10}
 fontSize="10"
 textAnchor="middle"
 fill="#10B981"
 fontWeight="bold"
 >
 Lowest
 </text>
 </>
 )}
 </React.Fragment>
 ))}
 </svg>

 {/* Y-axis labels */}
 <div className="absolute top-0 left-0 h-full flex flex-col justify-between text-xs text-gray-500">
 <div>{Math.round(maxPrice + buffer)}</div>
 <div>{Math.round(minPrice - buffer)}</div>
 </div>
 </div>

 {/* Price stats */}
 <div className="grid grid-cols-3 gap-4 mb-4">
 <div className="text-center">
 <div className="text-sm text-gray-500">Lowest</div>
 <div className="font-semibold text-green-600">{currency} {lowestPrice}</div>
 </div>
 <div className="text-center">
 <div className="text-sm text-gray-500">Average</div>
 <div className="font-semibold text-gray-600">{currency} {averagePrice}</div>
 </div>
 <div className="text-center">
 <div className="text-sm text-gray-500">Highest</div>
 <div className="font-semibold text-red-600">{currency} {highestPrice}</div>
 </div>
 </div>

 {/* Recommendation */}
 <div className={`p-3 rounded-lg ${
 recommendation === 'buy' 
 ? 'bg-green-50 border border-green-200' 
 : recommendation === 'wait' 
 ? 'bg-red-50 border border-red-200' 
 : 'bg-gray-50 border border-gray-200'
 }`}>
 <div className={`text-sm font-medium ${
 recommendation === 'buy' 
 ? 'text-green-600' 
 : recommendation === 'wait' 
 ? 'text-red-600' 
 : 'text-gray-600'
 }`}>
 {recommendation === 'buy' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Good time to buy!</p>
 <p>Current prices are {Math.round((averagePrice - currentPrice) / averagePrice * 100)}% below the average for this route.</p>
 </div>
 </div>
 )}
 {recommendation === 'wait' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Consider waiting for prices to drop</p>
 <p>Current prices are {Math.round((currentPrice - averagePrice) / averagePrice * 100)}% above the average for this route.</p>
 </div>
 </div>
 )}
 {recommendation === 'neutral' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Prices are stable</p>
 <p>Current prices are close to the average for this route.</p>
 </div>
 </div>
 )}
 </div>
 </div>
 </div>
 );
};

export default PriceHistoryWidget;

60 changes: 46 additions & 14 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,22 +1,54 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
# Flight Price History Component

## Getting Started
This is a prototype of a price history feature for a flight search website. The component displays price trends and recommendations at a glance, with the ability to expand into a full interactive graph view.

First, run the development server:
## Features

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
- Compact view showing current price, price trend, and quick recommendation
- Expandable detailed view with price history graph
- Visual indicators for price changes (up/down)
- Recommendations based on price analysis
- Responsive design using Tailwind CSS

## How to Use

Import the component in your Next.js/React application:

```jsx
import PriceHistoryWidget from './components/PriceHistoryWidget';

// Then use it in your component
function FlightDetails() {
 return (
 <div>
 <h2>Flight Details</h2>
 <PriceHistoryWidget />
 </div>
 );
}
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Data Structure

The component expects price history data in the following format:

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
```typescript
type PriceHistoryData = {
 currency: string;
 currentPrice: number;
 averagePrice: number;
 lowestPrice: number;
 highestPrice: number;
 recommendation: "buy" | "wait" | "neutral";
 priceChangePercentage: number;
 history: PriceDataPoint[];
};

This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
type PriceDataPoint = {
 date: string; // ISO date string
 price: number;
 isLowestPrice?: boolean;
};
```

For this prototype, mock data is generated internally. In a real application, you would connect this to your actual price history API.
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
ModeInspect: New updates to the project#5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

modeinspect-eu
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


ModeInspect: New updates to the project
#5
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


295 changes: 295 additions & 0 deletions
PriceHistoryWidget.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
import React, { useState } from 'react';
import { mockPriceData, PriceHistoryData, PriceDataPoint } from './mockPriceData';

const PriceHistoryWidget: React.FC = () => {
 const [isExpanded, setIsExpanded] = useState(false);
 const data = mockPriceData;

 return (
 <div className="font-sans max-w-md mx-auto">
 {isExpanded ? (
 <ExpandedView 
 data={data} 
 onCollapse={() => setIsExpanded(false)} 
 />
 ) : (
 <CollapsedView 
 data={data} 
 onExpand={() => setIsExpanded(true)} 
 />
 )}
 </div>
 );
};

interface ViewProps {
 data: PriceHistoryData;
 onExpand?: () => void;
 onCollapse?: () => void;
}

const CollapsedView: React.FC<ViewProps> = ({ data, onExpand }) => {
 const { 
 currentPrice, 
 currency, 
 recommendation, 
 priceChangePercentage 
 } = data;

 return (
 <div 
 className="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300"
 onClick={onExpand}
 >
 <div className="flex justify-between items-center mb-2">
 <h3 className="text-lg font-semibold text-gray-800">Price History</h3>
 <button 
 onClick={(e) => {
 e.stopPropagation();
 onExpand?.();
 }}
 className="text-blue-500 hover:text-blue-700"
 aria-label="Expand price history"
 >
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
 </svg>
 </button>
 </div>

 <div className="flex items-center mb-3">
 <div className="text-2xl font-bold text-gray-900">{currency} {currentPrice}</div>
 <div className={`ml-2 px-2 py-1 rounded-full text-sm font-medium ${
 priceChangePercentage < 0 
 ? 'bg-green-100 text-green-800' 
 : 'bg-red-100 text-red-800'
 }`}>
 {priceChangePercentage >= 0 ? '+' : ''}{priceChangePercentage}%
 </div>
 </div>

 <div className={`text-sm font-medium ${
 recommendation === 'buy' 
 ? 'text-green-600' 
 : recommendation === 'wait' 
 ? 'text-red-600' 
 : 'text-gray-600'
 }`}>
 {recommendation === 'buy' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z" clipRule="evenodd" />
 </svg>
 Good time to buy! Prices are below average.
 </div>
 )}
 {recommendation === 'wait' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
 </svg>
 Consider waiting. Prices are higher than usual.
 </div>
 )}
 {recommendation === 'neutral' && (
 <div className="flex items-center">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
 </svg>
 Prices are around average for this route.
 </div>
 )}
 </div>
 </div>
 );
};

const ExpandedView: React.FC<ViewProps> = ({ data, onCollapse }) => {
 const { 
 currentPrice, 
 currency, 
 averagePrice, 
 lowestPrice, 
 highestPrice, 
 recommendation, 
 history 
 } = data;

 // Find the highest price in the dataset for graph scaling
 const maxPrice = Math.max(...history.map(item => item.price));
 const minPrice = Math.min(...history.map(item => item.price));
 const priceRange = maxPrice - minPrice;
 const buffer = priceRange * 0.1; // 10% buffer

 // Graph height and scaling
 const graphHeight = 150;
 const getY = (price: number) => {
 return graphHeight - ((price - (minPrice - buffer)) / ((maxPrice + buffer) - (minPrice - buffer))) * graphHeight;
 };

 // Generate path for the graph
 const graphWidth = 300;
 const pointSpacing = graphWidth / (history.length - 1);

 let pathData = `M 0,${getY(history[0].price)}`;
 history.forEach((point, index) => {
 if (index > 0) {
 pathData += ` L ${index * pointSpacing},${getY(point.price)}`;
 }
 });

 return (
 <div className="bg-white rounded-lg shadow-lg p-6 transition-all duration-300">
 <div className="flex justify-between items-center mb-4">
 <h3 className="text-lg font-semibold text-gray-800">Price History</h3>
 <button 
 onClick={onCollapse}
 className="text-blue-500 hover:text-blue-700"
 aria-label="Collapse price history"
 >
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clipRule="evenodd" />
 </svg>
 </button>
 </div>

 <div className="flex justify-between mb-2">
 <div className="text-sm text-gray-500">Last 30 days</div>
 <div className="text-sm font-medium text-gray-800">Current: {currency} {currentPrice}</div>
 </div>

 {/* Graph */}
 <div className="relative h-40 mb-6">
 <svg 
 viewBox={`0 0 ${graphWidth} ${graphHeight}`} 
 className="w-full h-full"
 preserveAspectRatio="none"
 >
 {/* Price line */}
 <path
 d={pathData}
 fill="none"
 stroke="#4F46E5"
 strokeWidth="2"
 className="transition-all duration-700 ease-in-out"
 />

 {/* Average price line */}
 <line
 x1="0"
 y1={getY(averagePrice)}
 x2={graphWidth}
 y2={getY(averagePrice)}
 stroke="#9CA3AF"
 strokeWidth="1"
 strokeDasharray="4,4"
 />

 {/* Data points */}
 {history.map((point, index) => (
 <React.Fragment key={index}>
 <circle
 cx={index * pointSpacing}
 cy={getY(point.price)}
 r={point.isLowestPrice ? "4" : "2"}
 fill={point.isLowestPrice ? "#10B981" : "#4F46E5"}
 className={point.isLowestPrice ? "animate-pulse" : ""}
 />

 {/* Label for lowest price */}
 {point.isLowestPrice && (
 <>
 <text
 x={index * pointSpacing}
 y={getY(point.price) - 10}
 fontSize="10"
 textAnchor="middle"
 fill="#10B981"
 fontWeight="bold"
 >
 Lowest
 </text>
 </>
 )}
 </React.Fragment>
 ))}
 </svg>

 {/* Y-axis labels */}
 <div className="absolute top-0 left-0 h-full flex flex-col justify-between text-xs text-gray-500">
 <div>{Math.round(maxPrice + buffer)}</div>
 <div>{Math.round(minPrice - buffer)}</div>
 </div>
 </div>

 {/* Price stats */}
 <div className="grid grid-cols-3 gap-4 mb-4">
 <div className="text-center">
 <div className="text-sm text-gray-500">Lowest</div>
 <div className="font-semibold text-green-600">{currency} {lowestPrice}</div>
 </div>
 <div className="text-center">
 <div className="text-sm text-gray-500">Average</div>
 <div className="font-semibold text-gray-600">{currency} {averagePrice}</div>
 </div>
 <div className="text-center">
 <div className="text-sm text-gray-500">Highest</div>
 <div className="font-semibold text-red-600">{currency} {highestPrice}</div>
 </div>
 </div>

 {/* Recommendation */}
 <div className={`p-3 rounded-lg ${
 recommendation === 'buy' 
 ? 'bg-green-50 border border-green-200' 
 : recommendation === 'wait' 
 ? 'bg-red-50 border border-red-200' 
 : 'bg-gray-50 border border-gray-200'
 }`}>
 <div className={`text-sm font-medium ${
 recommendation === 'buy' 
 ? 'text-green-600' 
 : recommendation === 'wait' 
 ? 'text-red-600' 
 : 'text-gray-600'
 }`}>
 {recommendation === 'buy' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Good time to buy!</p>
 <p>Current prices are {Math.round((averagePrice - currentPrice) / averagePrice * 100)}% below the average for this route.</p>
 </div>
 </div>
 )}
 {recommendation === 'wait' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Consider waiting for prices to drop</p>
 <p>Current prices are {Math.round((currentPrice - averagePrice) / averagePrice * 100)}% above the average for this route.</p>
 </div>
 </div>
 )}
 {recommendation === 'neutral' && (
 <div className="flex items-start">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
 </svg>
 <div>
 <p className="font-bold">Prices are stable</p>
 <p>Current prices are close to the average for this route.</p>
 </div>
 </div>
 )}
 </div>
 </div>
 </div>
 );
};

export default PriceHistoryWidget;

60 changes: 46 additions & 14 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,22 +1,54 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
# Flight Price History Component

## Getting Started
This is a prototype of a price history feature for a flight search website. The component displays price trends and recommendations at a glance, with the ability to expand into a full interactive graph view.

First, run the development server:
## Features

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
- Compact view showing current price, price trend, and quick recommendation
- Expandable detailed view with price history graph
- Visual indicators for price changes (up/down)
- Recommendations based on price analysis
- Responsive design using Tailwind CSS

## How to Use

Import the component in your Next.js/React application:

```jsx
import PriceHistoryWidget from './components/PriceHistoryWidget';

// Then use it in your component
function FlightDetails() {
 return (
 <div>
 <h2>Flight Details</h2>
 <PriceHistoryWidget />
 </div>
 );
}
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Data Structure

The component expects price history data in the following format:

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
```typescript
type PriceHistoryData = {
 currency: string;
 currentPrice: number;
 averagePrice: number;
 lowestPrice: number;
 highestPrice: number;
 recommendation: "buy" | "wait" | "neutral";
 priceChangePercentage: number;
 history: PriceDataPoint[];
};

This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
type PriceDataPoint = {
 date: string; // ISO date string
 price: number;
 isLowestPrice?: boolean;
};
```

For this prototype, mock data is generated internally. In a real application, you would connect this to your actual price history API.
Loading