Add horizontal scrollbars to dashboard panels
This commit is contained in:
parent
eeed8276ca
commit
9e89e6cc24
|
|
@ -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),
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue