Add horizontal scrollbars to dashboard panels
This commit is contained in:
Hillel Coren
parent
eeed8276ca
commit
9e89e6cc24
|
|
@ -43,6 +43,21 @@ class DashboardChart extends StatefulWidget {
|
|||
class _DashboardChartState extends State<DashboardChart> {
|
||||
String? _selected;
|
||||
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) {
|
||||
if (widget.onDateSelected == null) {
|
||||
|
|
@ -139,82 +154,86 @@ class _DashboardChartState extends State<DashboardChart> {
|
|||
Divider(height: 1.0),
|
||||
LimitedBox(
|
||||
maxHeight: settings.enableComparison ? 122 : 102,
|
||||
child: ListView(
|
||||
shrinkWrap: true,
|
||||
scrollDirection: Axis.horizontal,
|
||||
children: widget.data!.map((dataGroup) {
|
||||
final int index = widget.data!.indexOf(dataGroup);
|
||||
final bool isSelected = index == _selectedIndex;
|
||||
final bool isIncrease =
|
||||
dataGroup.periodTotal > dataGroup.previousTotal;
|
||||
final String changeAmount = (isIncrease ? '+' : '') +
|
||||
formatNumber(
|
||||
dataGroup.periodTotal - dataGroup.previousTotal,
|
||||
context,
|
||||
currencyId: widget.currencyId)!;
|
||||
final changePercent = (isIncrease ? '+' : '') +
|
||||
formatNumber(
|
||||
dataGroup.periodTotal != 0 &&
|
||||
dataGroup.previousTotal != 0
|
||||
? round(
|
||||
(dataGroup.periodTotal -
|
||||
dataGroup.previousTotal) /
|
||||
dataGroup.previousTotal *
|
||||
100,
|
||||
2)
|
||||
: 0.0,
|
||||
context,
|
||||
formatNumberType: FormatNumberType.percent,
|
||||
currencyId: widget.currencyId)!;
|
||||
final String changeString = dataGroup.periodTotal == 0 ||
|
||||
dataGroup.previousTotal == 0 ||
|
||||
dataGroup.periodTotal == dataGroup.previousTotal
|
||||
? (settings.enableComparison ? ' ' : '')
|
||||
: '$changeAmount ($changePercent)';
|
||||
child: Scrollbar(
|
||||
controller: _controller,
|
||||
child: ListView(
|
||||
shrinkWrap: true,
|
||||
scrollDirection: Axis.horizontal,
|
||||
controller: _controller,
|
||||
children: widget.data!.map((dataGroup) {
|
||||
final int index = widget.data!.indexOf(dataGroup);
|
||||
final bool isSelected = index == _selectedIndex;
|
||||
final bool isIncrease =
|
||||
dataGroup.periodTotal > dataGroup.previousTotal;
|
||||
final String changeAmount = (isIncrease ? '+' : '') +
|
||||
formatNumber(
|
||||
dataGroup.periodTotal - dataGroup.previousTotal,
|
||||
context,
|
||||
currencyId: widget.currencyId)!;
|
||||
final changePercent = (isIncrease ? '+' : '') +
|
||||
formatNumber(
|
||||
dataGroup.periodTotal != 0 &&
|
||||
dataGroup.previousTotal != 0
|
||||
? round(
|
||||
(dataGroup.periodTotal -
|
||||
dataGroup.previousTotal) /
|
||||
dataGroup.previousTotal *
|
||||
100,
|
||||
2)
|
||||
: 0.0,
|
||||
context,
|
||||
formatNumberType: FormatNumberType.percent,
|
||||
currencyId: widget.currencyId)!;
|
||||
final String changeString = dataGroup.periodTotal == 0 ||
|
||||
dataGroup.previousTotal == 0 ||
|
||||
dataGroup.periodTotal == dataGroup.previousTotal
|
||||
? (settings.enableComparison ? ' ' : '')
|
||||
: '$changeAmount ($changePercent)';
|
||||
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
setState(() {
|
||||
_selectedIndex = index;
|
||||
_selected = null;
|
||||
});
|
||||
},
|
||||
child: Container(
|
||||
color: isSelected ? state.accentColor : theme.cardColor,
|
||||
padding: EdgeInsets.only(
|
||||
left: 16, top: 16, right: 32, bottom: 16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text(localization!.lookup(dataGroup.name),
|
||||
style: theme.textTheme.titleLarge!.copyWith(
|
||||
color: isSelected ? Colors.white : null,
|
||||
)),
|
||||
SizedBox(height: 4),
|
||||
Text(
|
||||
formatNumber(dataGroup.periodTotal, context,
|
||||
currencyId: widget.currencyId)!,
|
||||
style: theme.textTheme.headlineSmall!.copyWith(
|
||||
color: isSelected ? Colors.white : null)),
|
||||
SizedBox(height: 4),
|
||||
changeString.isNotEmpty
|
||||
? Text(
|
||||
changeString,
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
color: isSelected
|
||||
? Colors.white
|
||||
: (isIncrease
|
||||
? Colors.green
|
||||
: Colors.red),
|
||||
),
|
||||
)
|
||||
: SizedBox(),
|
||||
],
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
setState(() {
|
||||
_selectedIndex = index;
|
||||
_selected = null;
|
||||
});
|
||||
},
|
||||
child: Container(
|
||||
color: isSelected ? state.accentColor : theme.cardColor,
|
||||
padding: EdgeInsets.only(
|
||||
left: 16, top: 16, right: 32, bottom: 16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text(localization!.lookup(dataGroup.name),
|
||||
style: theme.textTheme.titleLarge!.copyWith(
|
||||
color: isSelected ? Colors.white : null,
|
||||
)),
|
||||
SizedBox(height: 4),
|
||||
Text(
|
||||
formatNumber(dataGroup.periodTotal, context,
|
||||
currencyId: widget.currencyId)!,
|
||||
style: theme.textTheme.headlineSmall!.copyWith(
|
||||
color: isSelected ? Colors.white : null)),
|
||||
SizedBox(height: 4),
|
||||
changeString.isNotEmpty
|
||||
? Text(
|
||||
changeString,
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
color: isSelected
|
||||
? Colors.white
|
||||
: (isIncrease
|
||||
? Colors.green
|
||||
: Colors.red),
|
||||
),
|
||||
)
|
||||
: SizedBox(),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
Divider(height: 1.0),
|
||||
|
|
|
|||
Loading…
Reference in New Issue