179 lines
6.2 KiB
Dart
179 lines
6.2 KiB
Dart
|
import 'package:design_system/design_system.dart';
|
||
|
|
import 'package:flutter/material.dart';
|
||
|
|
import 'package:fl_chart/fl_chart.dart';
|
||
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||
|
|
|
||
|
|
class LineGraph extends ConsumerStatefulWidget {
|
||
|
|
final lines = [
|
||
|
|
[0, 1, 0, 1, 0, 1, 0],
|
||
|
|
[1, 0, 1, 0, 1, 0, 1],
|
||
|
|
];
|
||
|
|
|
||
|
|
LineGraph({super.key});
|
||
|
|
|
||
|
|
@override
|
||
|
|
ConsumerState<LineGraph> createState() => LineGraphState();
|
||
|
|
}
|
||
|
|
|
||
|
|
class LineGraphState extends ConsumerState<LineGraph> {
|
||
|
|
final weekDays = ["L", "M", "X", "J", "V", "S", "D"];
|
||
|
|
String? timeSpan;
|
||
|
|
late var days = weekDays;
|
||
|
|
|
||
|
|
@override
|
||
|
|
void initState() {
|
||
|
|
timeSpan = "week";
|
||
|
|
super.initState();
|
||
|
|
}
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
final theme = ref.watch(themePortProvider);
|
||
|
|
|
||
|
|
return Container(
|
||
|
|
padding: EdgeInsets.all(15),
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
border: BoxBorder.fromLTRB(
|
||
|
|
left: BorderSide(color: Colors.cyan, width: 5),
|
||
|
|
),
|
||
|
|
borderRadius: BorderRadius.all(Radius.circular(20)),
|
||
|
|
color: theme.getColorFor(ThemeCode.backgroundPrimary),
|
||
|
|
),
|
||
|
|
child: Column(
|
||
|
|
spacing: 10,
|
||
|
|
children: [
|
||
|
|
Row(
|
||
|
|
children: [
|
||
|
|
Text("Gastos", style: TextStyle(fontWeight: FontWeight.bold)),
|
||
|
|
Spacer(),
|
||
|
|
Container(
|
||
|
|
padding: EdgeInsets.symmetric(horizontal: 10),
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
borderRadius: BorderRadius.all(Radius.circular(10)),
|
||
|
|
color: theme.getColorFor(ThemeCode.backgroundSecondary),
|
||
|
|
),
|
||
|
|
child: DropdownButton(
|
||
|
|
underline: Container(),
|
||
|
|
value: timeSpan,
|
||
|
|
onChanged: (String? value) {
|
||
|
|
setState(() {
|
||
|
|
timeSpan = value;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
dropdownColor: theme.getColorFor(ThemeCode.backgroundPrimary),
|
||
|
|
items: [
|
||
|
|
DropdownMenuItem(value: "day", child: Text("Hoy")),
|
||
|
|
DropdownMenuItem(value: "week", child: Text("Esta semana")),
|
||
|
|
DropdownMenuItem(value: "month", child: Text("Este mes")),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
Expanded(
|
||
|
|
child: LineChart(
|
||
|
|
LineChartData(
|
||
|
|
gridData: FlGridData(
|
||
|
|
show: true,
|
||
|
|
drawHorizontalLine: false,
|
||
|
|
drawVerticalLine: true,
|
||
|
|
verticalInterval: 1,
|
||
|
|
),
|
||
|
|
titlesData: FlTitlesData(
|
||
|
|
//show: false,
|
||
|
|
bottomTitles: AxisTitles(
|
||
|
|
sideTitles: SideTitles(
|
||
|
|
showTitles: true,
|
||
|
|
reservedSize: 40,
|
||
|
|
getTitlesWidget: (double value, TitleMeta meta) =>
|
||
|
|
SideTitleWidget(
|
||
|
|
space: 4,
|
||
|
|
meta: meta,
|
||
|
|
/*fitInside: fitInsideBottomTitle
|
||
|
|
? SideTitleFitInsideData.fromTitleMeta(meta, distanceFromEdge: 0)
|
||
|
|
: SideTitleFitInsideData.disable(),*/
|
||
|
|
child: Text(weekDays[value.toInt()]),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
leftTitles: AxisTitles(),
|
||
|
|
topTitles: AxisTitles(),
|
||
|
|
rightTitles: AxisTitles(),
|
||
|
|
),
|
||
|
|
lineTouchData: LineTouchData(
|
||
|
|
touchTooltipData: LineTouchTooltipData(
|
||
|
|
getTooltipColor: (touchedSpot) =>
|
||
|
|
theme.getColorFor(ThemeCode.buttonSecondary),
|
||
|
|
getTooltipItems: (List<LineBarSpot> touchedBarSpots) {
|
||
|
|
return touchedBarSpots.map((barSpot) {
|
||
|
|
return LineTooltipItem(
|
||
|
|
"${barSpot.y} €",
|
||
|
|
TextStyle(
|
||
|
|
color: theme.getColorFor(ThemeCode.textSecondary),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}).toList();
|
||
|
|
},
|
||
|
|
),
|
||
|
|
),
|
||
|
|
borderData: FlBorderData(
|
||
|
|
show: true,
|
||
|
|
border: Border(
|
||
|
|
bottom: BorderSide(
|
||
|
|
color: Colors.lightBlue.withValues(alpha: 0.2),
|
||
|
|
width: 4,
|
||
|
|
),
|
||
|
|
left: const BorderSide(color: Colors.transparent),
|
||
|
|
right: const BorderSide(color: Colors.transparent),
|
||
|
|
top: const BorderSide(color: Colors.transparent),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
lineBarsData: [
|
||
|
|
LineChartBarData(
|
||
|
|
isCurved: true,
|
||
|
|
color: Colors.pink,
|
||
|
|
barWidth: 5,
|
||
|
|
isStrokeCapRound: true,
|
||
|
|
dotData: const FlDotData(show: false),
|
||
|
|
belowBarData: BarAreaData(show: false),
|
||
|
|
spots: const [
|
||
|
|
FlSpot(0, 1),
|
||
|
|
FlSpot(1, 0),
|
||
|
|
FlSpot(2, 1),
|
||
|
|
FlSpot(3, 0),
|
||
|
|
FlSpot(4, 1),
|
||
|
|
FlSpot(5, 0),
|
||
|
|
FlSpot(6, 1),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
LineChartBarData(
|
||
|
|
isCurved: true,
|
||
|
|
color: Colors.cyan,
|
||
|
|
barWidth: 5,
|
||
|
|
isStrokeCapRound: true,
|
||
|
|
dotData: const FlDotData(show: false),
|
||
|
|
belowBarData: BarAreaData(show: false),
|
||
|
|
spots: const [
|
||
|
|
FlSpot(0, 0),
|
||
|
|
FlSpot(1, 1),
|
||
|
|
FlSpot(2, 0),
|
||
|
|
FlSpot(3, 1),
|
||
|
|
FlSpot(4, 0),
|
||
|
|
FlSpot(5, 1),
|
||
|
|
FlSpot(6, 0),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
],
|
||
|
|
minX: 0,
|
||
|
|
maxX: days.length - 1,
|
||
|
|
maxY: 1,
|
||
|
|
minY: 0,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|