Skip to content

Improved custom time range picker & optimized viewing larger amounts of data with granularity #503

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jgfoster merged 5 commits into from
May 19, 2025
Merged

Improved custom time range picker & optimized viewing larger amounts of data with granularity #503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4206e03
When dates are selected in the calendar picker, the date labels chang…
anna-st-40 May 7, 2025
d82f9d8
Optimized viewing larger datasets by displaying smaller amount of dat…
anna-st-40 May 7, 2025
0a6136f
Formatting
anna-st-40 May 7, 2025
829d6a9
formatting
anna-st-40 May 7, 2025
e287dba
Changed datetime back to now
anna-st-40 May 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 61 additions & 47 deletions extras/log_file_client/lib/components/custom_time_range_picker.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,63 +20,73 @@ class CustomTimeRangePicker extends StatefulWidget {
}

class _CustomTimeRangePickerState extends State<CustomTimeRangePicker> {
late DateTime minTime;
late DateTime maxTime;
late DateTimeRange selectedRange;

@override
void initState() {
super.initState();
minTime = widget.timeRange.start;
maxTime = widget.timeRange.end;
selectedRange = widget.timeRange;
}

void onDatesSelected(DateTimeRange value) {
minTime = DateTime(
value.start.year,
value.start.month,
value.start.day,
minTime.hour,
minTime.minute,
);
maxTime = DateTime(
value.end.year,
value.end.month,
value.end.day,
maxTime.hour,
maxTime.minute,
);
setState(() {
selectedRange = DateTimeRange(
start: DateTime(
value.start.year,
value.start.month,
value.start.day,
selectedRange.start.hour,
selectedRange.start.minute,
),
end: DateTime(
value.end.year,
value.end.month,
value.end.day,
selectedRange.end.hour,
selectedRange.end.minute,
),
);
});
}

void onTimeSelected(TimeOfDay time, RangeEndpointType type) {
if (type == RangeEndpointType.start) {
minTime = DateTime(
minTime.year,
minTime.month,
minTime.day,
time.hour,
time.minute,
selectedRange = DateTimeRange(
start: DateTime(
selectedRange.start.year,
selectedRange.start.month,
selectedRange.start.day,
time.hour,
time.minute,
),
end: selectedRange.end,
);
} else if (type == RangeEndpointType.end) {
maxTime = DateTime(
maxTime.year,
maxTime.month,
maxTime.day,
time.hour,
time.minute,
selectedRange = DateTimeRange(
start: selectedRange.start,
end: DateTime(
selectedRange.end.year,
selectedRange.end.month,
selectedRange.end.day,
time.hour,
time.minute,
),
);
}
}

void onApplied() {
// Ensure the time range is within the available range
if (minTime.isBefore(widget.timeRange.start)) {
minTime = widget.timeRange.start;
}
if (maxTime.isAfter(widget.timeRange.end)) {
maxTime = widget.timeRange.end;
}
selectedRange = DateTimeRange(
start: selectedRange.start.isAfter(widget.timeRange.start)
? selectedRange.start
: widget.timeRange.start,
end: selectedRange.end.isBefore(widget.timeRange.end)
? selectedRange.end
: widget.timeRange.end,
);

widget.onApplied(DateTimeRange(start: minTime, end: maxTime));
widget.onApplied(selectedRange);
}

@override
Expand All @@ -95,10 +105,7 @@ class _CustomTimeRangePickerState extends State<CustomTimeRangePicker> {
),
Padding(
padding: const EdgeInsets.only(bottom: 8),
child: TextButton(
onPressed: onApplied,
child: const Text('Apply'),
),
child: TextButton(onPressed: onApplied, child: const Text('Apply')),
),
],
),
Expand Down Expand Up @@ -141,8 +148,8 @@ class _CustomTimeRangePickerState extends State<CustomTimeRangePicker> {
Widget _dateDisplay(RangeEndpointType type) {
return Text(
type == RangeEndpointType.start
? DateFormat.yMMMd('en_US').format(minTime)
: DateFormat.yMMMd('en_US').format(maxTime),
? DateFormat.yMMMd('en_US').format(selectedRange.start)
: DateFormat.yMMMd('en_US').format(selectedRange.end),
style: const TextStyle(fontSize: 16),
);
}
Expand All @@ -153,8 +160,9 @@ class _CustomTimeRangePickerState extends State<CustomTimeRangePicker> {
height: 300,
child: RangeDatePicker(
centerLeadingDate: true,
minDate: minTime,
maxDate: maxTime,
minDate: widget.timeRange.start,
maxDate: widget.timeRange.end,
selectedRange: selectedRange,
onRangeSelected: onDatesSelected,
splashColor: Colors.transparent,
daysOfTheWeekTextStyle: TextStyle(
Expand All @@ -173,8 +181,14 @@ class _CustomTimeRangePickerState extends State<CustomTimeRangePicker> {

Widget _timePicker(RangeEndpointType type) {
final TimeOfDay selectedTime = type == RangeEndpointType.start
? TimeOfDay(hour: minTime.hour, minute: minTime.minute)
: TimeOfDay(hour: maxTime.hour, minute: maxTime.minute);
? TimeOfDay(
hour: selectedRange.start.hour,
minute: selectedRange.start.minute,
)
: TimeOfDay(
hour: selectedRange.end.hour,
minute: selectedRange.end.minute,
);

return SizedBox(
height: 100,
Expand Down
34 changes: 30 additions & 4 deletions extras/log_file_client/lib/components/graph_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ class _GraphViewState extends State<GraphView> {
late double timeInterval;
late DateFormat timeFormat;

int scatterGranularity = 1;

@override
void initState() {
super.initState();
Expand Down Expand Up @@ -79,6 +81,7 @@ class _GraphViewState extends State<GraphView> {
displayedTimeRange = timeRange;
_displayedTimeRangeIndices = calculateTimeRange(timeRange);
calculateTimeAxisFormat();
calculateGranularity();
});
}

Expand Down Expand Up @@ -116,6 +119,17 @@ class _GraphViewState extends State<GraphView> {
}
}

void calculateGranularity() {
final Duration duration = displayedTimeRange.duration;
if (duration <= Duration(days: 5)) {
scatterGranularity = 1;
} else if (duration <= Duration(days: 20)) {
scatterGranularity = 3;
} else {
scatterGranularity = 10;
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
Expand Down Expand Up @@ -248,11 +262,13 @@ class _GraphViewState extends State<GraphView> {
List<CartesianSeries> _chartSeries(List<LogDataLine> logData) {
final MarkerSettings markerSettings = MarkerSettings(height: 2, width: 2);

final subsampledLogData = _subsampleData(logData, scatterGranularity);

return <CartesianSeries>[
ScatterSeries<LogDataLine, DateTime>(
legendItemText: 'pH',
name: 'pH',
dataSource: logData,
dataSource: subsampledLogData,
xValueMapper: (LogDataLine log, _) => log.time,
yValueMapper: (LogDataLine log, _) => log.phCurrent,
color: _showPH ? Colors.green : Colors.transparent,
Expand All @@ -264,7 +280,7 @@ class _GraphViewState extends State<GraphView> {
ScatterSeries<LogDataLine, DateTime>(
legendItemText: 'pH setpoint',
name: 'pH setpoint',
dataSource: logData,
dataSource: subsampledLogData,
xValueMapper: (LogDataLine log, _) => log.time,
yValueMapper: (LogDataLine log, _) => log.phTarget,
color: _showPH ? Colors.green.shade800 : Colors.transparent,
Expand All @@ -276,7 +292,7 @@ class _GraphViewState extends State<GraphView> {
ScatterSeries<LogDataLine, DateTime>(
legendItemText: 'temp',
name: 'temp',
dataSource: logData,
dataSource: subsampledLogData,
xValueMapper: (LogDataLine log, _) => log.time,
yValueMapper: (LogDataLine log, _) => log.tempMean,
color: _showTemp ? Colors.blue : Colors.transparent,
Expand All @@ -288,7 +304,7 @@ class _GraphViewState extends State<GraphView> {
ScatterSeries<LogDataLine, DateTime>(
legendItemText: 'temp setpoint',
name: 'temp setpoint',
dataSource: logData,
dataSource: subsampledLogData,
xValueMapper: (LogDataLine log, _) => log.time,
yValueMapper: (LogDataLine log, _) => log.tempTarget,
color: _showTemp ? Colors.blue.shade800 : Colors.transparent,
Expand All @@ -299,4 +315,14 @@ class _GraphViewState extends State<GraphView> {
),
];
}

List<LogDataLine> _subsampleData(List<LogDataLine> logData, int granularity) {
final List<LogDataLine> subSampledData = [];

for (int i = 0; i < logData.length; i += scatterGranularity) {
subSampledData.add(logData[i]);
}

return subSampledData;
}
}