feat: update timeframe presets and improve sorting
- Add 30m and 2h timeframes to available options - Update Scalping preset: 5m, 15m, 30m (was 5m, 15m, 1h) - Update Day Trading preset: 1h, 2h, 4h (was 1h, 4h, 1d) - Enhance sorting logic for screenshots and analysis results - Ensure consistent timeframe order: 5m → 15m → 30m → 1h → 2h → 4h → 1d - Improve multi-timeframe analysis display with proper sorting - Update filename parsing to handle new timeframes Changes improve trading workflow with more logical timeframe progressions for scalping and day trading strategies.
This commit is contained in:
mindesbunister
@@ -8,7 +8,9 @@ const timeframes = [
|
||||
{ label: '1m', value: '1' },
|
||||
{ label: '5m', value: '5' },
|
||||
{ label: '15m', value: '15' },
|
||||
{ label: '30m', value: '30' },
|
||||
{ label: '1h', value: '60' },
|
||||
{ label: '2h', value: '120' },
|
||||
{ label: '4h', value: '240' },
|
||||
{ label: '1d', value: 'D' },
|
||||
{ label: '1w', value: 'W' },
|
||||
@@ -38,7 +40,6 @@ interface ProgressStep {
|
||||
}
|
||||
|
||||
interface AnalysisProgress {
|
||||
sessionId: string
|
||||
currentStep: number
|
||||
totalSteps: number
|
||||
steps: ProgressStep[]
|
||||
@@ -545,16 +546,16 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
|
||||
<label className="block text-xs font-medium text-gray-400 mb-2">Quick Timeframe Presets</label>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||
<button
|
||||
onClick={() => setSelectedTimeframes(['5', '15', '60'])}
|
||||
onClick={() => setSelectedTimeframes(['5', '15', '30'])}
|
||||
className="py-2 px-3 rounded-lg text-xs font-medium bg-purple-600/20 text-purple-300 hover:bg-purple-600/30 transition-all"
|
||||
>
|
||||
🕒 Scalping (5m, 15m, 1h)
|
||||
🕒 Scalping (5m, 15m, 30m)
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedTimeframes(['60', '240', 'D'])}
|
||||
onClick={() => setSelectedTimeframes(['60', '120', '240'])}
|
||||
className="py-2 px-3 rounded-lg text-xs font-medium bg-blue-600/20 text-blue-300 hover:bg-blue-600/30 transition-all"
|
||||
>
|
||||
📊 Day Trading (1h, 4h, 1d)
|
||||
📊 Day Trading (1h, 2h, 4h)
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedTimeframes(['240', 'D', 'W'])}
|
||||
@@ -944,7 +945,23 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
{result.results.map((timeframeResult: any, index: number) => (
|
||||
{result.results
|
||||
.sort((a: any, b: any) => {
|
||||
// Sort by timeframe order: 5m, 15m, 30m, 1h, 2h, 4h, 1D
|
||||
const timeframeOrder: {[key: string]: number} = {
|
||||
'5': 1, '5m': 1,
|
||||
'15': 2, '15m': 2,
|
||||
'30': 3, '30m': 3,
|
||||
'60': 4, '1h': 4,
|
||||
'120': 5, '2h': 5,
|
||||
'240': 6, '4h': 6,
|
||||
'D': 7, '1D': 7
|
||||
}
|
||||
const orderA = timeframeOrder[a.timeframe] || timeframeOrder[a.timeframeLabel] || 999
|
||||
const orderB = timeframeOrder[b.timeframe] || timeframeOrder[b.timeframeLabel] || 999
|
||||
return orderA - orderB
|
||||
})
|
||||
.map((timeframeResult: any, index: number) => (
|
||||
<div key={index} className={`p-4 rounded-lg border ${
|
||||
timeframeResult.success
|
||||
? 'bg-green-500/5 border-green-500/30'
|
||||
@@ -1425,9 +1442,43 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
|
||||
{/* Multi-timeframe Screenshot Gallery */}
|
||||
{result && result.type === 'multi_timeframe' && result.results && (
|
||||
<ScreenshotGallery
|
||||
screenshots={result.results.filter((r: any) => r.success && r.result.screenshots).flatMap((r: any) => r.result.screenshots)}
|
||||
screenshots={result.results
|
||||
.filter((r: any) => r.success && r.result.screenshots)
|
||||
.sort((a: any, b: any) => {
|
||||
// Sort by timeframe order: 5m, 15m, 30m, 1h, 2h, 4h, 1D
|
||||
const timeframeOrder: {[key: string]: number} = {
|
||||
'5': 1, '5m': 1,
|
||||
'15': 2, '15m': 2,
|
||||
'30': 3, '30m': 3,
|
||||
'60': 4, '1h': 4,
|
||||
'120': 5, '2h': 5,
|
||||
'240': 6, '4h': 6,
|
||||
'D': 7, '1D': 7
|
||||
}
|
||||
const orderA = timeframeOrder[a.timeframe] || timeframeOrder[a.timeframeLabel] || 999
|
||||
const orderB = timeframeOrder[b.timeframe] || timeframeOrder[b.timeframeLabel] || 999
|
||||
return orderA - orderB
|
||||
})
|
||||
.flatMap((r: any) => r.result.screenshots)}
|
||||
symbol={symbol}
|
||||
timeframes={result.results.filter((r: any) => r.success).map((r: any) => r.timeframeLabel)}
|
||||
timeframes={result.results
|
||||
.filter((r: any) => r.success)
|
||||
.sort((a: any, b: any) => {
|
||||
// Sort by timeframe order: 5m, 15m, 30m, 1h, 2h, 4h, 1D
|
||||
const timeframeOrder: {[key: string]: number} = {
|
||||
'5': 1, '5m': 1,
|
||||
'15': 2, '15m': 2,
|
||||
'30': 3, '30m': 3,
|
||||
'60': 4, '1h': 4,
|
||||
'120': 5, '2h': 5,
|
||||
'240': 6, '4h': 6,
|
||||
'D': 7, '1D': 7
|
||||
}
|
||||
const orderA = timeframeOrder[a.timeframe] || timeframeOrder[a.timeframeLabel] || 999
|
||||
const orderB = timeframeOrder[b.timeframe] || timeframeOrder[b.timeframeLabel] || 999
|
||||
return orderA - orderB
|
||||
})
|
||||
.map((r: any) => r.timeframeLabel)}
|
||||
enlargedImage={enlargedScreenshot}
|
||||
onImageClick={handleScreenshotClick}
|
||||
onClose={() => setEnlargedScreenshot(null)}
|
||||
|
||||
@@ -34,6 +34,56 @@ export default function ScreenshotGallery({
|
||||
|
||||
if (screenshots.length === 0) return null
|
||||
|
||||
// Utility function to convert timeframe to sortable number
|
||||
const timeframeToMinutes = (timeframe: string): number => {
|
||||
const tf = timeframe.toLowerCase()
|
||||
if (tf.includes('5m') || tf === '5') return 5
|
||||
if (tf.includes('15m') || tf === '15') return 15
|
||||
if (tf.includes('30m') || tf === '30') return 30
|
||||
if (tf.includes('1h') || tf === '60') return 60
|
||||
if (tf.includes('2h') || tf === '120') return 120
|
||||
if (tf.includes('4h') || tf === '240') return 240
|
||||
if (tf.includes('1d') || tf === 'D') return 1440
|
||||
// Default fallback
|
||||
return parseInt(tf) || 999
|
||||
}
|
||||
|
||||
// Extract timeframe from filename
|
||||
const extractTimeframeFromFilename = (filename: string) => {
|
||||
const match = filename.match(/_(\d+|D)_/)
|
||||
if (!match) return 'Unknown'
|
||||
const tf = match[1]
|
||||
if (tf === 'D') return '1D'
|
||||
if (tf === '5') return '5m'
|
||||
if (tf === '15') return '15m'
|
||||
if (tf === '30') return '30m'
|
||||
if (tf === '60') return '1h'
|
||||
if (tf === '120') return '2h'
|
||||
if (tf === '240') return '4h'
|
||||
return `${tf}m`
|
||||
}
|
||||
|
||||
// Create sorted screenshot data with timeframes
|
||||
const screenshotData = screenshots.map((screenshot, index) => {
|
||||
const screenshotUrl = typeof screenshot === 'string'
|
||||
? screenshot
|
||||
: (screenshot as any)?.url || String(screenshot)
|
||||
const filename = screenshotUrl.split('/').pop() || ''
|
||||
const timeframe = timeframes[index] || extractTimeframeFromFilename(filename)
|
||||
|
||||
return {
|
||||
screenshot,
|
||||
screenshotUrl,
|
||||
filename,
|
||||
timeframe,
|
||||
index,
|
||||
sortOrder: timeframeToMinutes(timeframe)
|
||||
}
|
||||
})
|
||||
|
||||
// Sort by timeframe (smallest to largest)
|
||||
const sortedData = screenshotData.sort((a, b) => a.sortOrder - b.sortOrder)
|
||||
|
||||
// Helper function to format screenshot URL
|
||||
const formatScreenshotUrl = (screenshot: string | any) => {
|
||||
// Handle both string URLs and screenshot objects
|
||||
@@ -56,36 +106,17 @@ export default function ScreenshotGallery({
|
||||
Chart Screenshots
|
||||
</h4>
|
||||
<div className="text-xs text-gray-400">
|
||||
{screenshots.length} captured • Click to enlarge
|
||||
{sortedData.length} captured • Click to enlarge
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{screenshots.map((screenshot, index) => {
|
||||
// Handle both string URLs and screenshot objects
|
||||
const screenshotUrl = typeof screenshot === 'string'
|
||||
? screenshot
|
||||
: (screenshot as any)?.url || String(screenshot)
|
||||
const filename = screenshotUrl.split('/').pop() || ''
|
||||
// Extract timeframe from filename (e.g., SOLUSD_5_ai_timestamp.png -> "5m")
|
||||
const extractTimeframeFromFilename = (filename: string) => {
|
||||
const match = filename.match(/_(\d+|D)_/)
|
||||
if (!match) return 'Unknown'
|
||||
const tf = match[1]
|
||||
if (tf === 'D') return '1D'
|
||||
if (tf === '5') return '5m'
|
||||
if (tf === '15') return '15m'
|
||||
if (tf === '60') return '1h'
|
||||
if (tf === '240') return '4h'
|
||||
return `${tf}m`
|
||||
}
|
||||
|
||||
const timeframe = timeframes[index] || extractTimeframeFromFilename(filename)
|
||||
const imageUrl = formatScreenshotUrl(screenshot)
|
||||
{sortedData.map((item, displayIndex) => {
|
||||
const imageUrl = formatScreenshotUrl(item.screenshot)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
key={displayIndex}
|
||||
className="group relative bg-gray-800/30 rounded-lg overflow-hidden border border-gray-700 hover:border-purple-500/50 transition-all cursor-pointer transform hover:scale-[1.02]"
|
||||
onClick={() => onImageClick(imageUrl)}
|
||||
>
|
||||
@@ -93,7 +124,7 @@ export default function ScreenshotGallery({
|
||||
<div className="aspect-video bg-gray-800 flex items-center justify-center relative">
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={`${symbol} - ${timeframe} chart`}
|
||||
alt={`${symbol} - ${item.timeframe} chart`}
|
||||
className="w-full h-full object-cover"
|
||||
onError={(e: any) => {
|
||||
const target = e.target as HTMLImageElement
|
||||
@@ -106,7 +137,7 @@ export default function ScreenshotGallery({
|
||||
<div className="text-center">
|
||||
<div className="text-3xl mb-2">📊</div>
|
||||
<div className="text-sm">Chart Preview</div>
|
||||
<div className="text-xs text-gray-500">{filename}</div>
|
||||
<div className="text-xs text-gray-500">{item.filename}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -125,7 +156,7 @@ export default function ScreenshotGallery({
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-white">{symbol}</div>
|
||||
<div className="text-xs text-purple-300">{timeframe} Timeframe</div>
|
||||
<div className="text-xs text-purple-300">{item.timeframe} Timeframe</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
Click to view
|
||||
|
||||
Reference in New Issue
Block a user