ui lab result history chart page
parent
cdbd905a62
commit
4ce6ff8d7d
@ -0,0 +1,116 @@
|
|||||||
|
import 'package:doctor_app_flutter/config/size_config.dart';
|
||||||
|
import 'package:doctor_app_flutter/core/viewModel/project_view_model.dart';
|
||||||
|
import 'package:doctor_app_flutter/util/date-utils.dart';
|
||||||
|
import 'package:doctor_app_flutter/util/translations_delegate_base.dart';
|
||||||
|
import 'package:doctor_app_flutter/widgets/shared/app_texts_widget.dart';
|
||||||
|
import 'package:doctor_app_flutter/core/model/labs/LabResultHistory.dart';
|
||||||
|
import 'package:flutter/cupertino.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:provider/provider.dart';
|
||||||
|
|
||||||
|
class LabResultHistoryDetailsWidget extends StatefulWidget {
|
||||||
|
final List<LabResultHistory> labResultHistory;
|
||||||
|
|
||||||
|
LabResultHistoryDetailsWidget({
|
||||||
|
this.labResultHistory,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
_VitalSignDetailsWidgetState createState() => _VitalSignDetailsWidgetState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _VitalSignDetailsWidgetState extends State<LabResultHistoryDetailsWidget> {
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
ProjectViewModel projectViewModel = Provider.of(context);
|
||||||
|
return Container(
|
||||||
|
/* decoration: BoxDecoration(
|
||||||
|
color: Colors.transparent,
|
||||||
|
borderRadius: BorderRadius.only(
|
||||||
|
topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0)),
|
||||||
|
border: Border.all(color: Colors.grey, width: 1),
|
||||||
|
),*/
|
||||||
|
margin: EdgeInsets.all(0),
|
||||||
|
child: Container(
|
||||||
|
color: Colors.transparent,
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: <Widget>[
|
||||||
|
Row(
|
||||||
|
children: [
|
||||||
|
Expanded(
|
||||||
|
child: Container(
|
||||||
|
child: Container(
|
||||||
|
padding: EdgeInsets.all(8),
|
||||||
|
child: AppText(
|
||||||
|
TranslationBase.of(context).date,
|
||||||
|
fontSize: SizeConfig.textMultiplier * 1.6,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: Container(
|
||||||
|
padding: EdgeInsets.all(8),
|
||||||
|
child: Container(
|
||||||
|
child: AppText(
|
||||||
|
TranslationBase.of(context).labResult,
|
||||||
|
fontSize: SizeConfig.textMultiplier * 1.6,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
),
|
||||||
|
// height: 60
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const Divider(
|
||||||
|
height: 1,
|
||||||
|
thickness: 1,
|
||||||
|
color: Colors.black,
|
||||||
|
),
|
||||||
|
Table(
|
||||||
|
border: TableBorder.symmetric(
|
||||||
|
inside: BorderSide(width: 1.0, color: Colors.grey[300]),
|
||||||
|
),
|
||||||
|
children: fullData(projectViewModel),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
List<TableRow> fullData(ProjectViewModel projectViewModel) {
|
||||||
|
List<TableRow> tableRow = [];
|
||||||
|
widget.labResultHistory.forEach((vital) {
|
||||||
|
var date = AppDateUtils.convertStringToDate(vital.verifiedOnDateTime);
|
||||||
|
tableRow.add(TableRow(children: [
|
||||||
|
Container(
|
||||||
|
child: Container(
|
||||||
|
padding: EdgeInsets.all(8),
|
||||||
|
color: Colors.white,
|
||||||
|
child: AppText(
|
||||||
|
'${projectViewModel.isArabic ? AppDateUtils.getWeekDayArabic(date.weekday) : AppDateUtils.getWeekDay(date.weekday)} ,${date.day} ${projectViewModel.isArabic ? AppDateUtils.getMonthArabic(date.month) : AppDateUtils.getMonth(date.month)} ${date.year}',
|
||||||
|
fontSize: SizeConfig.textMultiplier * 1.8,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Container(
|
||||||
|
child: Container(
|
||||||
|
padding: EdgeInsets.all(8),
|
||||||
|
color: Colors.white,
|
||||||
|
child: AppText(
|
||||||
|
'${vital.resultValue}',
|
||||||
|
fontSize: SizeConfig.textMultiplier * 1.8,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
]));
|
||||||
|
});
|
||||||
|
return tableRow;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,231 @@
|
|||||||
|
import 'package:doctor_app_flutter/config/size_config.dart';
|
||||||
|
import 'package:doctor_app_flutter/util/date-utils.dart';
|
||||||
|
import 'package:doctor_app_flutter/core/model/labs/LabResultHistory.dart';
|
||||||
|
import 'package:doctor_app_flutter/widgets/shared/app_texts_widget.dart';
|
||||||
|
import 'package:fl_chart/fl_chart.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
class LineChartCurvedLabHistory extends StatefulWidget {
|
||||||
|
final String title;
|
||||||
|
final List<LabResultHistory> labResultHistory;
|
||||||
|
|
||||||
|
LineChartCurvedLabHistory({this.title, this.labResultHistory});
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<StatefulWidget> createState() => LineChartCurvedLabHistoryState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class LineChartCurvedLabHistoryState extends State<LineChartCurvedLabHistory> {
|
||||||
|
bool isShowingMainData;
|
||||||
|
List<int> xAxixs = List();
|
||||||
|
int indexes = 0;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
getXaxix();
|
||||||
|
isShowingMainData = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
getXaxix() {
|
||||||
|
indexes = widget.labResultHistory.length ~/ 3.5;
|
||||||
|
for (int index = 0; index < widget.labResultHistory.length; index++) {
|
||||||
|
int mIndex = indexes * index;
|
||||||
|
if (mIndex < widget.labResultHistory.length) {
|
||||||
|
xAxixs.add(mIndex);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return AspectRatio(
|
||||||
|
aspectRatio: 1.23,
|
||||||
|
child: Container(
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
borderRadius: BorderRadius.all(Radius.circular(18)),
|
||||||
|
// color: Colors.white,
|
||||||
|
),
|
||||||
|
child: Stack(
|
||||||
|
children: <Widget>[
|
||||||
|
Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||||
|
children: <Widget>[
|
||||||
|
const SizedBox(
|
||||||
|
height: 4,
|
||||||
|
),
|
||||||
|
AppText(
|
||||||
|
widget.title,
|
||||||
|
fontSize: SizeConfig.textMultiplier * 2.1,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
fontFamily: 'Poppins',
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
),
|
||||||
|
const SizedBox(
|
||||||
|
height: 12,
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.only(right: 16.0, left: 8.0),
|
||||||
|
child: LineChart(
|
||||||
|
sampleData1(),
|
||||||
|
swapAnimationDuration: const Duration(milliseconds: 250),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(
|
||||||
|
height: 10,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
LineChartData sampleData1() {
|
||||||
|
return LineChartData(
|
||||||
|
lineTouchData: LineTouchData(
|
||||||
|
touchTooltipData: LineTouchTooltipData(
|
||||||
|
tooltipBgColor: Colors.white,
|
||||||
|
),
|
||||||
|
touchCallback: (LineTouchResponse touchResponse) {},
|
||||||
|
handleBuiltInTouches: true,
|
||||||
|
),
|
||||||
|
gridData: FlGridData(
|
||||||
|
show: true, drawVerticalLine: true, drawHorizontalLine: true),
|
||||||
|
titlesData: FlTitlesData(
|
||||||
|
bottomTitles: SideTitles(
|
||||||
|
showTitles: true,
|
||||||
|
getTextStyles: (value) => const TextStyle(
|
||||||
|
color: Colors.black,
|
||||||
|
fontSize: 11,
|
||||||
|
),
|
||||||
|
margin: 28,
|
||||||
|
rotateAngle: -65,
|
||||||
|
getTitles: (value) {
|
||||||
|
print(value);
|
||||||
|
DateTime date = AppDateUtils.convertStringToDate(
|
||||||
|
widget.labResultHistory[value.toInt()].verifiedOnDateTime);
|
||||||
|
if (widget.labResultHistory.length < 8) {
|
||||||
|
if (widget.labResultHistory.length > value.toInt()) {
|
||||||
|
return '${date.day}/ ${date.year}';
|
||||||
|
} else
|
||||||
|
return '';
|
||||||
|
} else {
|
||||||
|
if (value.toInt() == 0) return '${date.day}/ ${date.year}';
|
||||||
|
if (value.toInt() == widget.labResultHistory.length - 1)
|
||||||
|
return '${date.day}/ ${date.year}';
|
||||||
|
if (xAxixs.contains(value.toInt())) {
|
||||||
|
return '${date.day}/ ${date.year}';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
),
|
||||||
|
leftTitles: SideTitles(
|
||||||
|
showTitles: true,
|
||||||
|
getTextStyles: (value) => const TextStyle(
|
||||||
|
color: Colors.black,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
fontSize: 10,
|
||||||
|
),
|
||||||
|
getTitles: (value) {
|
||||||
|
return '${value.toInt()}';
|
||||||
|
},
|
||||||
|
margin: 8,
|
||||||
|
//reservedSize: 30,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
borderData: FlBorderData(
|
||||||
|
show: true,
|
||||||
|
border: const Border(
|
||||||
|
bottom: BorderSide(
|
||||||
|
color: Colors.black,
|
||||||
|
width: 0.5,
|
||||||
|
),
|
||||||
|
left: BorderSide(
|
||||||
|
color: Colors.black,
|
||||||
|
),
|
||||||
|
right: BorderSide(
|
||||||
|
color: Colors.black,
|
||||||
|
),
|
||||||
|
top: BorderSide(
|
||||||
|
color: Colors.transparent,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
minX: 0,
|
||||||
|
maxX: (widget.labResultHistory.length - 1).toDouble(),
|
||||||
|
maxY: getMaxY() + 2,
|
||||||
|
minY: getMinY(),
|
||||||
|
lineBarsData: getData(),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
double getMaxY() {
|
||||||
|
double max = 0;
|
||||||
|
widget.labResultHistory.forEach((element) {
|
||||||
|
try {
|
||||||
|
double resultValueDouble = double.parse(element.resultValue);
|
||||||
|
if (resultValueDouble > max) max = resultValueDouble;
|
||||||
|
} catch (e) {
|
||||||
|
print(e);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return max.roundToDouble();
|
||||||
|
}
|
||||||
|
|
||||||
|
double getMinY() {
|
||||||
|
double min = 0;
|
||||||
|
try {
|
||||||
|
min = double.parse(widget.labResultHistory[0].resultValue);
|
||||||
|
|
||||||
|
widget.labResultHistory.forEach((element) {
|
||||||
|
double resultValueDouble = double.parse(element.resultValue);
|
||||||
|
if (resultValueDouble < min) min = resultValueDouble;
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
print(e);
|
||||||
|
}
|
||||||
|
int value = min.toInt();
|
||||||
|
|
||||||
|
return value.toDouble();
|
||||||
|
}
|
||||||
|
|
||||||
|
List<LineChartBarData> getData() {
|
||||||
|
List<FlSpot> spots = List();
|
||||||
|
for (int index = 0; index < widget.labResultHistory.length; index++) {
|
||||||
|
try {
|
||||||
|
var resultValueDouble =
|
||||||
|
double.parse(widget.labResultHistory[index].resultValue);
|
||||||
|
spots.add(FlSpot(index.toDouble(), resultValueDouble));
|
||||||
|
} catch (e) {
|
||||||
|
print(e);
|
||||||
|
spots.add(FlSpot(index.toDouble(), 0.0));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
final LineChartBarData lineChartBarData1 = LineChartBarData(
|
||||||
|
spots: spots,
|
||||||
|
isCurved: true,
|
||||||
|
colors: [Colors.red],
|
||||||
|
barWidth: 3,
|
||||||
|
isStrokeCapRound: true,
|
||||||
|
curveSmoothness: 0.12,
|
||||||
|
dotData: FlDotData(
|
||||||
|
show: false,
|
||||||
|
),
|
||||||
|
belowBarData: BarAreaData(
|
||||||
|
show: false,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
return [
|
||||||
|
lineChartBarData1,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
import 'package:doctor_app_flutter/config/size_config.dart';
|
||||||
|
import 'package:doctor_app_flutter/core/model/labs/LabResultHistory.dart';
|
||||||
|
import 'package:doctor_app_flutter/util/translations_delegate_base.dart';
|
||||||
|
import 'package:doctor_app_flutter/widgets/shared/app_texts_widget.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
import 'Lab_Result_history_details_wideget.dart';
|
||||||
|
import 'LineChartCurvedLabHistory.dart';
|
||||||
|
|
||||||
|
class LabResultHistoryChartAndDetails extends StatelessWidget {
|
||||||
|
LabResultHistoryChartAndDetails({
|
||||||
|
Key key,
|
||||||
|
@required this.labResultHistory,
|
||||||
|
@required this.name,
|
||||||
|
}) : super(key: key);
|
||||||
|
|
||||||
|
final List<LabResultHistory> labResultHistory;
|
||||||
|
final String name;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Padding(
|
||||||
|
padding: const EdgeInsets.all(10.0),
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: <Widget>[
|
||||||
|
Container(
|
||||||
|
margin: EdgeInsets.symmetric(horizontal: 8),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Colors.white, borderRadius: BorderRadius.circular(12)),
|
||||||
|
child: LineChartCurvedLabHistory(
|
||||||
|
title: name,
|
||||||
|
labResultHistory: labResultHistory,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Container(
|
||||||
|
margin: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
|
||||||
|
padding: EdgeInsets.only(top: 16, right: 18.0, left: 16.0),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Colors.white, borderRadius: BorderRadius.circular(12)),
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
AppText(
|
||||||
|
TranslationBase.of(context).graphDetails,
|
||||||
|
fontSize: SizeConfig.textMultiplier * 2.1,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
),
|
||||||
|
SizedBox(
|
||||||
|
height: 8,
|
||||||
|
),
|
||||||
|
LabResultHistoryDetailsWidget(
|
||||||
|
labResultHistory: labResultHistory.reversed.toList(),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue