367 lines
16 KiB
Dart
367 lines
16 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_bloc/flutter_bloc.dart';
|
|
import '../../../../core/theme/app_theme.dart';
|
|
import '../../../../core/widgets/glass_container.dart';
|
|
import '../../../../core/widgets/status_badge.dart';
|
|
import '../../bloc/technical/asset_technical_bloc.dart';
|
|
import '../../bloc/technical/asset_technical_event.dart';
|
|
import '../../bloc/technical/asset_technical_state.dart';
|
|
import '../../utils/metric_explanations.dart';
|
|
import '../../utils/pattern_explanations.dart';
|
|
import '../../widgets/chart/candlestick_chart.dart';
|
|
|
|
class TechnicalTab extends StatefulWidget {
|
|
final String symbol;
|
|
final bool isDesktopLeftPanel;
|
|
|
|
const TechnicalTab({
|
|
super.key,
|
|
required this.symbol,
|
|
this.isDesktopLeftPanel = false,
|
|
});
|
|
|
|
@override
|
|
State<TechnicalTab> createState() => _TechnicalTabState();
|
|
}
|
|
|
|
class _TechnicalTabState extends State<TechnicalTab> {
|
|
bool _showSma50 = true;
|
|
bool _showSma200 = true;
|
|
bool _showEma = true;
|
|
bool _showPatterns = true;
|
|
bool _showSignals = true;
|
|
bool _showSupertrend = true;
|
|
|
|
// Set of disabled pattern indices for individual toggling
|
|
final Set<int> _disabledPatternIndices = {};
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
context.read<AssetTechnicalBloc>().add(LoadAssetTechnical(widget.symbol, forceRefresh: false));
|
|
}
|
|
|
|
@override
|
|
void didUpdateWidget(covariant TechnicalTab oldWidget) {
|
|
super.didUpdateWidget(oldWidget);
|
|
if (oldWidget.symbol != widget.symbol) {
|
|
context.read<AssetTechnicalBloc>().add(LoadAssetTechnical(widget.symbol, forceRefresh: false));
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return BlocBuilder<AssetTechnicalBloc, AssetTechnicalState>(
|
|
builder: (context, state) {
|
|
if (state is AssetTechnicalLoading) {
|
|
return Center(child: CircularProgressIndicator(color: AppTheme.primaryEmerald));
|
|
}
|
|
|
|
if (state is AssetTechnicalError) {
|
|
return Center(
|
|
child: GlassContainer(
|
|
padding: const EdgeInsets.all(24),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(Icons.show_chart, color: AppTheme.accentRed, size: 48),
|
|
const SizedBox(height: 12),
|
|
Text('Fehler beim Laden der Technischen Analyse: ${state.message}', style: const TextStyle(color: Colors.white70)),
|
|
const SizedBox(height: 16),
|
|
ElevatedButton.icon(
|
|
onPressed: () => context.read<AssetTechnicalBloc>().add(LoadAssetTechnical(widget.symbol, forceRefresh: true)),
|
|
icon: const Icon(Icons.refresh),
|
|
label: const Text('Erneut versuchen'),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
if (state is AssetTechnicalLoaded) {
|
|
final data = state.data;
|
|
List<CandleModel> candles = [];
|
|
List<ChartPatternModel> patterns = [];
|
|
List<StrategySignalModel> signals = [];
|
|
List<IndicatorModel> indicators = [];
|
|
|
|
if (data != null) {
|
|
candles = data.candles.map((c) => CandleModel(time: c.timestamp, open: c.open, high: c.high, low: c.low, close: c.close, volume: c.volume)).toList();
|
|
patterns = []; // Since data.patterns is a List of Strings, we don't have point coordinates to draw them on the chart
|
|
signals = data.signals.map((s) => StrategySignalModel(type: 'strategy', timestamp: s.date, direction: s.type, price: s.price, description: s.title)).toList();
|
|
indicators = data.indicators.map((i) => IndicatorModel(timestamp: i.timestamp, ema20: i.ema20, sma50: i.sma50, sma200: i.sma200, supertrendUpper: i.supertrendUpper, supertrendLower: i.supertrendLower, supertrendDirection: i.supertrendDirection)).toList();
|
|
}
|
|
|
|
// Filter patterns according to individual checkbox states
|
|
final activePatterns = [
|
|
for (int i = 0; i < patterns.length; i++)
|
|
if (!_disabledPatternIndices.contains(i)) patterns[i]
|
|
];
|
|
|
|
return SingleChildScrollView(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Glassmorphic Indicator & Pattern Control Ribbon
|
|
GlassContainer(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
|
child: SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: [
|
|
_buildIndicatorChip('EMA (20)', _showEma, (v) => setState(() => _showEma = v), Colors.blueAccent),
|
|
const SizedBox(width: 6),
|
|
_buildIndicatorChip('SMA (50)', _showSma50, (v) => setState(() => _showSma50 = v), Colors.orangeAccent),
|
|
const SizedBox(width: 6),
|
|
_buildIndicatorChip('SMA (200)', _showSma200, (v) => setState(() => _showSma200 = v), Colors.redAccent),
|
|
const SizedBox(width: 6),
|
|
_buildIndicatorChip('Supertrend', _showSupertrend, (v) => setState(() => _showSupertrend = v), AppTheme.primaryEmerald),
|
|
const SizedBox(width: 6),
|
|
_buildIndicatorChip('Alle Muster', _showPatterns, (v) => setState(() => _showPatterns = v), Colors.amberAccent),
|
|
const SizedBox(width: 6),
|
|
_buildIndicatorChip('Signale', _showSignals, (v) => setState(() => _showSignals = v), AppTheme.accentCyan),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
|
|
// Interactive Candlestick Chart
|
|
SizedBox(
|
|
height: 380,
|
|
child: CandlestickChart(
|
|
candles: candles,
|
|
patterns: activePatterns,
|
|
signals: signals,
|
|
indicators: indicators,
|
|
showPatterns: _showPatterns,
|
|
showEma: _showEma,
|
|
showSma50: _showSma50,
|
|
showSma200: _showSma200,
|
|
showSignals: _showSignals,
|
|
showSupertrend: _showSupertrend,
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
|
|
// Dedicated Chart Patterns & Signal Description List Section
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Icon(Icons.architecture_outlined, color: AppTheme.primaryEmerald, size: 20),
|
|
const SizedBox(width: 8),
|
|
const Text('Erkannte Chart-Muster & Signale', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white)),
|
|
],
|
|
),
|
|
if (patterns.isNotEmpty)
|
|
TextButton.icon(
|
|
onPressed: () {
|
|
setState(() {
|
|
if (_disabledPatternIndices.length == patterns.length) {
|
|
_disabledPatternIndices.clear();
|
|
} else {
|
|
_disabledPatternIndices.addAll(List.generate(patterns.length, (i) => i));
|
|
}
|
|
});
|
|
},
|
|
icon: Icon(_disabledPatternIndices.isEmpty ? Icons.deselect : Icons.select_all, size: 16, color: Colors.amberAccent),
|
|
label: Text(_disabledPatternIndices.isEmpty ? 'Alle abwählen' : 'Alle anwählen', style: const TextStyle(color: Colors.amberAccent, fontSize: 12)),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 12),
|
|
if (patterns.isEmpty && signals.isEmpty)
|
|
GlassContainer(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Center(
|
|
child: Text('Zurzeit wurden keine akuten Formationen oder Strategie-Signale identifiziert.', style: TextStyle(color: AppTheme.textMuted, fontSize: 12)),
|
|
),
|
|
)
|
|
else ...[
|
|
if (patterns.isNotEmpty) ...[
|
|
Text('Formationen & Trendlinien (Mit Checkbox im Chart schalten):', style: TextStyle(color: AppTheme.textSecondary, fontWeight: FontWeight.w600, fontSize: 13)),
|
|
const SizedBox(height: 6),
|
|
...List.generate(patterns.length, (index) => _buildPatternCard(patterns[index], index)),
|
|
const SizedBox(height: 12),
|
|
],
|
|
if (signals.isNotEmpty) ...[
|
|
Text('Strategie-Signale:', style: TextStyle(color: AppTheme.textSecondary, fontWeight: FontWeight.w600, fontSize: 13)),
|
|
const SizedBox(height: 6),
|
|
...signals.map((s) => _buildSignalCard(s)),
|
|
],
|
|
],
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
return Center(
|
|
child: Text('Keine technisches Indikatoren verfügbar', style: TextStyle(color: AppTheme.textMuted)),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget _buildPatternCard(ChartPatternModel pattern, int index) {
|
|
final isEnabled = !_disabledPatternIndices.contains(index);
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.only(bottom: 8),
|
|
child: GlassContainer(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
|
|
child: Row(
|
|
children: [
|
|
// Checkbox for individual pattern toggling on the chart
|
|
Checkbox(
|
|
value: isEnabled,
|
|
activeColor: Colors.amberAccent,
|
|
checkColor: Colors.black,
|
|
side: BorderSide(color: Colors.amberAccent.withValues(alpha: 0.6)),
|
|
onChanged: (bool? val) {
|
|
setState(() {
|
|
if (val == true) {
|
|
_disabledPatternIndices.remove(index);
|
|
} else {
|
|
_disabledPatternIndices.add(index);
|
|
}
|
|
});
|
|
},
|
|
),
|
|
Expanded(
|
|
child: InkWell(
|
|
onTap: () => PatternExplanations.showPatternDetails(context, pattern.type),
|
|
borderRadius: BorderRadius.circular(8),
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 4),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(8),
|
|
decoration: BoxDecoration(
|
|
color: isEnabled ? Colors.amberAccent.withValues(alpha: 0.15) : AppTheme.glassSurface,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Icon(Icons.polyline_outlined, color: isEnabled ? Colors.amberAccent : AppTheme.textMuted, size: 20),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Text(
|
|
pattern.type,
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
color: isEnabled ? Colors.white : AppTheme.textMuted,
|
|
fontSize: 14,
|
|
decoration: isEnabled ? null : TextDecoration.lineThrough,
|
|
),
|
|
),
|
|
const SizedBox(width: 6),
|
|
Icon(Icons.info_outline, size: 14, color: AppTheme.textMuted),
|
|
],
|
|
),
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
'Formationspunkte: Oberer Trendkanal (${pattern.upperLine.length} Pkt.) / Unterer Trendkanal (${pattern.lowerLine.length} Pkt.)',
|
|
style: TextStyle(color: AppTheme.textMuted, fontSize: 11),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
StatusBadge(
|
|
label: isEnabled ? 'AKTIV' : 'AUS',
|
|
color: isEnabled ? Colors.amberAccent : AppTheme.textMuted,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildSignalCard(StrategySignalModel signal) {
|
|
final isBuy = signal.type.toUpperCase() == 'BUY';
|
|
final color = isBuy ? AppTheme.primaryEmerald : AppTheme.accentRed;
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.only(bottom: 8),
|
|
child: GlassContainer(
|
|
padding: const EdgeInsets.all(12),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(8),
|
|
decoration: BoxDecoration(
|
|
color: color.withValues(alpha: 0.15),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Icon(isBuy ? Icons.north_east : Icons.south_east, color: color, size: 20),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Text(signal.type.toUpperCase(), style: TextStyle(fontWeight: FontWeight.bold, color: color, fontSize: 14)),
|
|
const SizedBox(width: 8),
|
|
Text('@ €${signal.price.toStringAsFixed(2)}', style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 13)),
|
|
],
|
|
),
|
|
const SizedBox(height: 4),
|
|
Text(signal.description.isNotEmpty ? signal.description : 'Strategisches Kaufsignal ausgelöst durch technische Indikatoren.', style: TextStyle(color: AppTheme.textSecondary, fontSize: 12)),
|
|
],
|
|
),
|
|
),
|
|
StatusBadge(label: 'SIGNAL', color: color),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildIndicatorChip(String label, bool isSelected, ValueChanged<bool> onChanged, Color color) {
|
|
return Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
FilterChip(
|
|
selected: isSelected,
|
|
label: Text(label, style: TextStyle(color: isSelected ? Colors.black : color, fontSize: 11, fontWeight: FontWeight.bold)),
|
|
selectedColor: color,
|
|
backgroundColor: color.withValues(alpha: 0.15),
|
|
side: BorderSide(color: color.withValues(alpha: 0.4)),
|
|
showCheckmark: false,
|
|
onSelected: onChanged,
|
|
),
|
|
InkWell(
|
|
onTap: () => MetricExplanations.show(context, label),
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 2),
|
|
child: Icon(Icons.info_outline, size: 14, color: AppTheme.textMuted),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|