Dmitry
62d36aa3e8
Тема и общие виджеты (AssetIcon, ServiceMark, HelpTip, глоссарий), верхняя панель TopNav и вкладки Аналитики вместо NavSidebar, иконки PWA. Экраны: портфели, создание брокерского счёта, ручное событие, правка инструмента, Обзор карточками по скоупам и таблица активов, пересчёт метрик с опросом /metrics/status. design-system.md обновлён.
467 lines
14 KiB
Dart
467 lines
14 KiB
Dart
import 'package:decimal/decimal.dart';
|
||
import 'package:fintracker_api/fintracker_api.dart';
|
||
import 'package:flutter/material.dart';
|
||
import 'package:go_router/go_router.dart';
|
||
|
||
import '../../core/widgets/asset_icon.dart';
|
||
import '../../core/widgets/money_text.dart';
|
||
import '../../core/widgets/help_tip.dart';
|
||
import 'labels.dart';
|
||
|
||
/// Which columns the table shows. Each preset answers one question about the same rows, the
|
||
/// way Snowball's «Мои активы | Общее | Дивиденды | Прибыль | Облигации» tabs do.
|
||
enum HoldingsPreset {
|
||
mine('Мои активы'),
|
||
overall('Общее'),
|
||
dividends('Дивиденды'),
|
||
profit('Прибыль'),
|
||
bonds('Облигации');
|
||
|
||
const HoldingsPreset(this.label);
|
||
final String label;
|
||
}
|
||
|
||
/// A column: a header, a width, and how a position renders in it. A cell is one or two lines —
|
||
/// the figure and, muted below it, the same figure per unit or as a share.
|
||
class _Col {
|
||
const _Col(this.title, this.width, this.cell, {this.alignEnd = true});
|
||
|
||
final String title;
|
||
final double width;
|
||
final Widget Function(BuildContext context, HoldingOut h) cell;
|
||
final bool alignEnd;
|
||
}
|
||
|
||
const _dash = Text('—');
|
||
|
||
/// A cell whose figure is unknown is a dash, never a zero: the position is absent from the
|
||
/// totals, and 0 ₽ would read as «worthless» instead of «unknown».
|
||
Widget _money(
|
||
String? v, {
|
||
String currency = 'RUB',
|
||
TextStyle? style,
|
||
bool signed = false,
|
||
}) {
|
||
if (v == null) return _dash;
|
||
final d = Decimal.parse(v);
|
||
final text = MoneyText.format(v, currency);
|
||
return Text(signed && d > Decimal.zero ? '+$text' : text, style: style);
|
||
}
|
||
|
||
Widget _stack(BuildContext context, Widget top, Widget? bottom) {
|
||
final muted = Theme.of(context).textTheme.bodySmall
|
||
?.copyWith(color: Theme.of(context).colorScheme.onSurfaceVariant);
|
||
return Column(
|
||
crossAxisAlignment: CrossAxisAlignment.end,
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
DefaultTextStyle.merge(
|
||
style: const TextStyle(fontWeight: FontWeight.w600),
|
||
child: top,
|
||
),
|
||
if (bottom != null) DefaultTextStyle.merge(style: muted, child: bottom),
|
||
],
|
||
);
|
||
}
|
||
|
||
/// `share` of a decimal-string pair, or null when the base is missing or not positive.
|
||
String? _ratio(String? part, String? base) {
|
||
if (part == null || base == null) return null;
|
||
final b = Decimal.parse(base);
|
||
if (b <= Decimal.zero) return null;
|
||
return (Decimal.parse(part) / b)
|
||
.toDecimal(scaleOnInfinitePrecision: 10)
|
||
.toString();
|
||
}
|
||
|
||
Widget _signedPercent(BuildContext context, String? share) {
|
||
if (share == null) return _dash;
|
||
final color = signColor(context, share);
|
||
final d = Decimal.parse(share);
|
||
final arrow = d > Decimal.zero
|
||
? Icons.arrow_drop_up
|
||
: d < Decimal.zero
|
||
? Icons.arrow_drop_down
|
||
: null;
|
||
return Row(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
if (arrow != null) Icon(arrow, size: 18, color: color),
|
||
Text(
|
||
formatPercent(share, signed: false).replaceAll('-', ''),
|
||
style: TextStyle(color: color),
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
Widget _pnl(BuildContext context, String? amount, String? share) {
|
||
if (amount == null) return _dash;
|
||
return _stack(
|
||
context,
|
||
_money(
|
||
amount,
|
||
signed: true,
|
||
style: TextStyle(color: signColor(context, amount)),
|
||
),
|
||
_signedPercent(context, share),
|
||
);
|
||
}
|
||
|
||
final _asset = _Col('Актив', 260, (context, h) {
|
||
final theme = Theme.of(context);
|
||
final title = h.name;
|
||
final ticker = h.ticker;
|
||
return Row(
|
||
children: [
|
||
AssetIcon(
|
||
assetClass: h.assetClass,
|
||
logoUrl: h.logoUrl,
|
||
logoColor: h.logoColor,
|
||
),
|
||
const SizedBox(width: 12),
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Text(
|
||
title,
|
||
overflow: TextOverflow.ellipsis,
|
||
style: const TextStyle(fontWeight: FontWeight.w500),
|
||
),
|
||
Row(
|
||
children: [
|
||
if (ticker != null && ticker != title)
|
||
Flexible(
|
||
child: Text(
|
||
ticker,
|
||
overflow: TextOverflow.ellipsis,
|
||
style: theme.textTheme.bodySmall?.copyWith(
|
||
color: theme.colorScheme.onSurfaceVariant,
|
||
),
|
||
),
|
||
),
|
||
PriceStatusChip(status: h.priceStatus, priceDate: h.priceDate),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
);
|
||
}, alignEnd: false);
|
||
|
||
final _qty = _Col('Кол-во', 90, (c, h) => Text(formatQty(h.qty)));
|
||
|
||
final _invested = _Col(
|
||
'Вложено',
|
||
140,
|
||
(c, h) => _stack(
|
||
c,
|
||
_money(h.costTotalRub),
|
||
h.avgCost == null
|
||
? null
|
||
: _money(h.avgCost, currency: h.costCurrency ?? h.currency),
|
||
),
|
||
);
|
||
|
||
final _value = _Col(
|
||
'Текущая стоимость',
|
||
170,
|
||
(c, h) => h.valueRub == null
|
||
? _dash
|
||
: _stack(
|
||
c,
|
||
_money(h.valueRub),
|
||
h.marketPrice == null
|
||
? null
|
||
: _money(h.marketPrice, currency: h.priceCurrency ?? h.currency),
|
||
),
|
||
);
|
||
|
||
final _income = _Col('Дивиденды', 120, (c, h) => _money(_nonZero(h.incomeRub)));
|
||
|
||
final _incomeYield = _Col(
|
||
'Див. доходность',
|
||
130,
|
||
(c, h) => Text(
|
||
formatPercent(_nonZero(_ratio(h.incomeRub, h.costTotalRub)), signed: false),
|
||
),
|
||
);
|
||
|
||
final _profit = _Col(
|
||
'Прибыль',
|
||
130,
|
||
(c, h) =>
|
||
_pnl(c, h.unrealizedPnlRub, _ratio(h.unrealizedPnlRub, h.costTotalRub)),
|
||
);
|
||
|
||
final _weight = _Col(
|
||
'Доля в портфеле',
|
||
130,
|
||
(c, h) => Text(formatPercent(h.weight, signed: false)),
|
||
);
|
||
|
||
final _xirr = _Col(
|
||
'Доходность',
|
||
120,
|
||
(c, h) => Text(
|
||
formatPercent(h.xirr),
|
||
style: TextStyle(color: signColor(c, h.xirr)),
|
||
),
|
||
);
|
||
|
||
final _held = _Col(
|
||
'В портфеле',
|
||
120,
|
||
(c, h) => Text(h.daysHeld == null ? '—' : '${h.daysHeld} дн.'),
|
||
);
|
||
|
||
final _realized = _Col(
|
||
'Реализовано',
|
||
130,
|
||
(c, h) => _money(
|
||
h.realizedPnlRub,
|
||
signed: true,
|
||
style: TextStyle(color: signColor(c, h.realizedPnlRub)),
|
||
),
|
||
);
|
||
|
||
final _accrued = _Col(
|
||
'НКД',
|
||
110,
|
||
(c, h) => _money(_nonZero(h.accruedInterestRub)),
|
||
);
|
||
|
||
/// A payout or accrual of zero is «none», shown as a dash; only a real amount is a figure.
|
||
String? _nonZero(String? v) =>
|
||
v == null || Decimal.parse(v) == Decimal.zero ? null : v;
|
||
|
||
final _columns = {
|
||
HoldingsPreset.mine: [
|
||
_asset,
|
||
_qty,
|
||
_invested,
|
||
_value,
|
||
_income,
|
||
_incomeYield,
|
||
_profit,
|
||
_weight,
|
||
],
|
||
HoldingsPreset.overall: [
|
||
_asset,
|
||
_qty,
|
||
_invested,
|
||
_value,
|
||
_profit,
|
||
_xirr,
|
||
_weight,
|
||
_held,
|
||
],
|
||
HoldingsPreset.dividends: [_asset, _qty, _income, _incomeYield],
|
||
HoldingsPreset.profit: [_asset, _profit, _realized, _income, _xirr],
|
||
HoldingsPreset.bonds: [
|
||
_asset,
|
||
_qty,
|
||
_invested,
|
||
_value,
|
||
_accrued,
|
||
_profit,
|
||
_xirr,
|
||
],
|
||
};
|
||
|
||
/// Позиции as a table: preset tabs, a search box, and one row per holding. A tap opens the
|
||
/// instrument card.
|
||
class HoldingsTable extends StatefulWidget {
|
||
const HoldingsTable({required this.rows, super.key});
|
||
|
||
final List<HoldingOut> rows;
|
||
|
||
@override
|
||
State<HoldingsTable> createState() => _HoldingsTableState();
|
||
}
|
||
|
||
class _HoldingsTableState extends State<HoldingsTable> {
|
||
HoldingsPreset _preset = HoldingsPreset.mine;
|
||
String _query = '';
|
||
|
||
List<HoldingOut> get _visible {
|
||
final q = _query.trim().toLowerCase();
|
||
return [
|
||
for (final h in widget.rows)
|
||
if ((_preset != HoldingsPreset.bonds || h.assetClass == 'bond') &&
|
||
(q.isEmpty ||
|
||
h.name.toLowerCase().contains(q) ||
|
||
(h.ticker ?? '').toLowerCase().contains(q)))
|
||
h,
|
||
];
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final theme = Theme.of(context);
|
||
final scheme = theme.colorScheme;
|
||
final columns = _columns[_preset]!;
|
||
final rows = _visible;
|
||
const pad = 32.0;
|
||
final natural = columns.fold<double>(0, (sum, c) => sum + c.width);
|
||
|
||
return LayoutBuilder(
|
||
builder: (context, constraints) {
|
||
// spread the columns over the card when there is room; scroll sideways when there is not
|
||
final room = constraints.maxWidth.isFinite
|
||
? constraints.maxWidth - pad
|
||
: natural;
|
||
final scale = room > natural ? room / natural : 1.0;
|
||
final tableWidth = natural * scale + pad;
|
||
|
||
return Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
SizedBox(
|
||
width: double.infinity,
|
||
child: Wrap(
|
||
spacing: 12,
|
||
runSpacing: 12,
|
||
crossAxisAlignment: WrapCrossAlignment.center,
|
||
alignment: WrapAlignment.spaceBetween,
|
||
children: [
|
||
Wrap(
|
||
crossAxisAlignment: WrapCrossAlignment.center,
|
||
children: [
|
||
for (final p in HoldingsPreset.values)
|
||
InkWell(
|
||
borderRadius: BorderRadius.circular(6),
|
||
onTap: () => setState(() => _preset = p),
|
||
child: Padding(
|
||
padding: const EdgeInsets.symmetric(
|
||
horizontal: 10,
|
||
vertical: 6,
|
||
),
|
||
child: Text(
|
||
p.label,
|
||
style: TextStyle(
|
||
color: p == _preset
|
||
? scheme.onSurface
|
||
: scheme.onSurfaceVariant,
|
||
fontWeight: p == _preset
|
||
? FontWeight.w700
|
||
: FontWeight.w400,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
SizedBox(
|
||
width: 260,
|
||
child: TextField(
|
||
onChanged: (v) => setState(() => _query = v),
|
||
decoration: const InputDecoration(
|
||
hintText: 'Найти…',
|
||
isDense: true,
|
||
prefixIcon: Icon(Icons.search, size: 20),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
const SizedBox(height: 12),
|
||
SingleChildScrollView(
|
||
scrollDirection: Axis.horizontal,
|
||
child: SizedBox(
|
||
width: tableWidth,
|
||
child: Column(
|
||
children: [
|
||
_HeaderRow(columns: columns, scale: scale),
|
||
Divider(color: scheme.outlineVariant),
|
||
if (rows.isEmpty)
|
||
const Padding(
|
||
padding: EdgeInsets.symmetric(vertical: 24),
|
||
child: Text('Ничего не найдено'),
|
||
),
|
||
for (final h in rows)
|
||
InkWell(
|
||
onTap: () => context.push(
|
||
'/portfolio/instrument/${h.instrumentId}',
|
||
),
|
||
child: Container(
|
||
padding: const EdgeInsets.symmetric(
|
||
horizontal: 16,
|
||
vertical: 12,
|
||
),
|
||
decoration: BoxDecoration(
|
||
border: Border(
|
||
bottom: BorderSide(color: scheme.outlineVariant),
|
||
),
|
||
),
|
||
child: Row(
|
||
children: [
|
||
for (final c in columns)
|
||
SizedBox(
|
||
width: c.width * scale,
|
||
child: Align(
|
||
alignment: c.alignEnd
|
||
? Alignment.centerRight
|
||
: Alignment.centerLeft,
|
||
child: Padding(
|
||
padding: EdgeInsets.only(
|
||
right: c.alignEnd ? 8 : 0,
|
||
),
|
||
child: c.cell(context, h),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
],
|
||
);
|
||
},
|
||
);
|
||
}
|
||
}
|
||
|
||
class _HeaderRow extends StatelessWidget {
|
||
const _HeaderRow({required this.columns, required this.scale});
|
||
|
||
final List<_Col> columns;
|
||
final double scale;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final style = Theme.of(context).textTheme.labelMedium
|
||
?.copyWith(color: Theme.of(context).colorScheme.onSurfaceVariant);
|
||
return Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||
child: Row(
|
||
children: [
|
||
for (final c in columns)
|
||
SizedBox(
|
||
width: c.width * scale,
|
||
child: Padding(
|
||
padding: EdgeInsets.only(right: c.alignEnd ? 8 : 0),
|
||
child: TermLabel(
|
||
c.title,
|
||
textAlign: c.alignEnd ? TextAlign.end : TextAlign.start,
|
||
alignment: c.alignEnd
|
||
? MainAxisAlignment.end
|
||
: MainAxisAlignment.start,
|
||
style: style,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|