Add horizontal scrollbars to dashboard panels

This commit is contained in:
Hillel Coren 2023-10-24 12:56:52 +03:00
parent eeed8276ca
commit 9e89e6cc24
1 changed files with 93 additions and 74 deletions

View File

@ -43,6 +43,21 @@ class DashboardChart extends StatefulWidget {
class _DashboardChartState extends State<DashboardChart> { class _DashboardChartState extends State<DashboardChart> {
String? _selected; String? _selected;
int _selectedIndex = 0; int _selectedIndex = 0;
late ScrollController _controller;
@override
void initState() {
super.initState();
_controller = ScrollController();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _onSelectionChanged(charts.SelectionModel model) { void _onSelectionChanged(charts.SelectionModel model) {
if (widget.onDateSelected == null) { if (widget.onDateSelected == null) {
@ -139,82 +154,86 @@ class _DashboardChartState extends State<DashboardChart> {
Divider(height: 1.0), Divider(height: 1.0),
LimitedBox( LimitedBox(
maxHeight: settings.enableComparison ? 122 : 102, maxHeight: settings.enableComparison ? 122 : 102,
child: ListView( child: Scrollbar(
shrinkWrap: true, controller: _controller,
scrollDirection: Axis.horizontal, child: ListView(
children: widget.data!.map((dataGroup) { shrinkWrap: true,
final int index = widget.data!.indexOf(dataGroup); scrollDirection: Axis.horizontal,
final bool isSelected = index == _selectedIndex; controller: _controller,
final bool isIncrease = children: widget.data!.map((dataGroup) {
dataGroup.periodTotal > dataGroup.previousTotal; final int index = widget.data!.indexOf(dataGroup);
final String changeAmount = (isIncrease ? '+' : '') + final bool isSelected = index == _selectedIndex;
formatNumber( final bool isIncrease =
dataGroup.periodTotal - dataGroup.previousTotal, dataGroup.periodTotal > dataGroup.previousTotal;
context, final String changeAmount = (isIncrease ? '+' : '') +
currencyId: widget.currencyId)!; formatNumber(
final changePercent = (isIncrease ? '+' : '') + dataGroup.periodTotal - dataGroup.previousTotal,
formatNumber( context,
dataGroup.periodTotal != 0 && currencyId: widget.currencyId)!;
dataGroup.previousTotal != 0 final changePercent = (isIncrease ? '+' : '') +
? round( formatNumber(
(dataGroup.periodTotal - dataGroup.periodTotal != 0 &&
dataGroup.previousTotal) / dataGroup.previousTotal != 0
dataGroup.previousTotal * ? round(
100, (dataGroup.periodTotal -
2) dataGroup.previousTotal) /
: 0.0, dataGroup.previousTotal *
context, 100,
formatNumberType: FormatNumberType.percent, 2)
currencyId: widget.currencyId)!; : 0.0,
final String changeString = dataGroup.periodTotal == 0 || context,
dataGroup.previousTotal == 0 || formatNumberType: FormatNumberType.percent,
dataGroup.periodTotal == dataGroup.previousTotal currencyId: widget.currencyId)!;
? (settings.enableComparison ? ' ' : '') final String changeString = dataGroup.periodTotal == 0 ||
: '$changeAmount ($changePercent)'; dataGroup.previousTotal == 0 ||
dataGroup.periodTotal == dataGroup.previousTotal
? (settings.enableComparison ? ' ' : '')
: '$changeAmount ($changePercent)';
return InkWell( return InkWell(
onTap: () { onTap: () {
setState(() { setState(() {
_selectedIndex = index; _selectedIndex = index;
_selected = null; _selected = null;
}); });
}, },
child: Container( child: Container(
color: isSelected ? state.accentColor : theme.cardColor, color: isSelected ? state.accentColor : theme.cardColor,
padding: EdgeInsets.only( padding: EdgeInsets.only(
left: 16, top: 16, right: 32, bottom: 16), left: 16, top: 16, right: 32, bottom: 16),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
Text(localization!.lookup(dataGroup.name), Text(localization!.lookup(dataGroup.name),
style: theme.textTheme.titleLarge!.copyWith( style: theme.textTheme.titleLarge!.copyWith(
color: isSelected ? Colors.white : null, color: isSelected ? Colors.white : null,
)), )),
SizedBox(height: 4), SizedBox(height: 4),
Text( Text(
formatNumber(dataGroup.periodTotal, context, formatNumber(dataGroup.periodTotal, context,
currencyId: widget.currencyId)!, currencyId: widget.currencyId)!,
style: theme.textTheme.headlineSmall!.copyWith( style: theme.textTheme.headlineSmall!.copyWith(
color: isSelected ? Colors.white : null)), color: isSelected ? Colors.white : null)),
SizedBox(height: 4), SizedBox(height: 4),
changeString.isNotEmpty changeString.isNotEmpty
? Text( ? Text(
changeString, changeString,
style: TextStyle( style: TextStyle(
fontSize: 16, fontSize: 16,
color: isSelected color: isSelected
? Colors.white ? Colors.white
: (isIncrease : (isIncrease
? Colors.green ? Colors.green
: Colors.red), : Colors.red),
), ),
) )
: SizedBox(), : SizedBox(),
], ],
),
), ),
), );
); }).toList(),
}).toList(), ),
), ),
), ),
Divider(height: 1.0), Divider(height: 1.0),