mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-10 15:17:31 +00:00
added loading indicators to charts.
This commit is contained in:
@ -22,8 +22,8 @@ class TotalEnergyConsumptionBloc
|
|||||||
TotalEnergyConsumptionLoadEvent event,
|
TotalEnergyConsumptionLoadEvent event,
|
||||||
Emitter<TotalEnergyConsumptionState> emit,
|
Emitter<TotalEnergyConsumptionState> emit,
|
||||||
) async {
|
) async {
|
||||||
emit(state.copyWith(status: TotalEnergyConsumptionStatus.loading));
|
|
||||||
try {
|
try {
|
||||||
|
emit(state.copyWith(status: TotalEnergyConsumptionStatus.loading));
|
||||||
final chartData = await _totalEnergyConsumptionService.load(event.param);
|
final chartData = await _totalEnergyConsumptionService.load(event.param);
|
||||||
emit(
|
emit(
|
||||||
state.copyWith(
|
state.copyWith(
|
||||||
|
@ -22,7 +22,7 @@ class EnergyConsumptionByPhasesChartBox extends StatelessWidget {
|
|||||||
spacing: 20,
|
spacing: 20,
|
||||||
children: [
|
children: [
|
||||||
AnalyticsErrorWidget(state.errorMessage),
|
AnalyticsErrorWidget(state.errorMessage),
|
||||||
const EnergyConsumptionByPhasesTitle(),
|
EnergyConsumptionByPhasesTitle(isLoading: state.status == EnergyConsumptionByPhasesStatus.loading,),
|
||||||
Expanded(
|
Expanded(
|
||||||
child: EnergyConsumptionByPhasesChart(
|
child: EnergyConsumptionByPhasesChart(
|
||||||
energyData: state.chartData,
|
energyData: state.chartData,
|
||||||
|
@ -1,10 +1,12 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
|
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
|
||||||
|
import 'package:syncrow_web/pages/analytics/widgets/charts_loading_widget.dart';
|
||||||
import 'package:syncrow_web/utils/color_manager.dart';
|
import 'package:syncrow_web/utils/color_manager.dart';
|
||||||
import 'package:syncrow_web/utils/extension/build_context_x.dart';
|
import 'package:syncrow_web/utils/extension/build_context_x.dart';
|
||||||
|
|
||||||
class EnergyConsumptionByPhasesTitle extends StatelessWidget {
|
class EnergyConsumptionByPhasesTitle extends StatelessWidget {
|
||||||
const EnergyConsumptionByPhasesTitle({super.key});
|
const EnergyConsumptionByPhasesTitle({super.key, required this.isLoading});
|
||||||
|
final bool isLoading;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
@ -12,6 +14,7 @@ class EnergyConsumptionByPhasesTitle extends StatelessWidget {
|
|||||||
crossAxisAlignment: CrossAxisAlignment.center,
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
children: [
|
children: [
|
||||||
|
ChartsLoadingWidget(isLoading: isLoading),
|
||||||
Expanded(
|
Expanded(
|
||||||
flex: 4,
|
flex: 4,
|
||||||
child: FittedBox(
|
child: FittedBox(
|
||||||
|
@ -5,6 +5,7 @@ import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/ch
|
|||||||
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart.dart';
|
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart.dart';
|
||||||
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_devices_list.dart';
|
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_devices_list.dart';
|
||||||
import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
|
import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
|
||||||
|
import 'package:syncrow_web/pages/analytics/widgets/charts_loading_widget.dart';
|
||||||
import 'package:syncrow_web/utils/style.dart';
|
import 'package:syncrow_web/utils/style.dart';
|
||||||
|
|
||||||
class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
|
class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
|
||||||
@ -28,6 +29,8 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
|
|||||||
Row(
|
Row(
|
||||||
spacing: 32,
|
spacing: 32,
|
||||||
children: [
|
children: [
|
||||||
|
if (state.status == EnergyConsumptionPerDeviceStatus.loading)
|
||||||
|
const ChartsLoadingWidget(isLoading: true),
|
||||||
const Expanded(
|
const Expanded(
|
||||||
flex: 3,
|
flex: 3,
|
||||||
child: FittedBox(
|
child: FittedBox(
|
||||||
|
@ -4,6 +4,7 @@ import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/tota
|
|||||||
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
|
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
|
||||||
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart.dart';
|
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart.dart';
|
||||||
import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
|
import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
|
||||||
|
import 'package:syncrow_web/pages/analytics/widgets/charts_loading_widget.dart';
|
||||||
import 'package:syncrow_web/utils/style.dart';
|
import 'package:syncrow_web/utils/style.dart';
|
||||||
|
|
||||||
class TotalEnergyConsumptionChartBox extends StatelessWidget {
|
class TotalEnergyConsumptionChartBox extends StatelessWidget {
|
||||||
@ -22,9 +23,12 @@ class TotalEnergyConsumptionChartBox extends StatelessWidget {
|
|||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
AnalyticsErrorWidget(state.errorMessage),
|
AnalyticsErrorWidget(state.errorMessage),
|
||||||
const Row(
|
Row(
|
||||||
children: [
|
children: [
|
||||||
Expanded(
|
ChartsLoadingWidget(
|
||||||
|
isLoading: state.status == TotalEnergyConsumptionStatus.loading,
|
||||||
|
),
|
||||||
|
const Expanded(
|
||||||
flex: 3,
|
flex: 3,
|
||||||
child: FittedBox(
|
child: FittedBox(
|
||||||
alignment: AlignmentDirectional.centerStart,
|
alignment: AlignmentDirectional.centerStart,
|
||||||
@ -32,7 +36,7 @@ class TotalEnergyConsumptionChartBox extends StatelessWidget {
|
|||||||
child: ChartTitle(title: Text('Total Energy Consumption')),
|
child: ChartTitle(title: Text('Total Energy Consumption')),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
Spacer(flex: 4),
|
const Spacer(flex: 4),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
const Divider(),
|
const Divider(),
|
||||||
|
24
lib/pages/analytics/widgets/charts_loading_widget.dart
Normal file
24
lib/pages/analytics/widgets/charts_loading_widget.dart
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
class ChartsLoadingWidget extends StatelessWidget {
|
||||||
|
const ChartsLoadingWidget({
|
||||||
|
required this.isLoading,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
final bool isLoading;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Visibility(
|
||||||
|
visible: isLoading,
|
||||||
|
child: const SizedBox.square(
|
||||||
|
dimension: 16,
|
||||||
|
child: FittedBox(
|
||||||
|
child: CircularProgressIndicator(
|
||||||
|
padding: EdgeInsetsDirectional.only(end: 8),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
Reference in New Issue
Block a user