diff --git a/lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart b/lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart index 18012ce4..4fc0f3df 100644 --- a/lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart +++ b/lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart @@ -40,34 +40,70 @@ class _AnalyticsEnergyManagementViewState ); } + static const _padding = EdgeInsetsDirectional.all(32); + @override Widget build(BuildContext context) { - return Padding( - padding: const EdgeInsetsDirectional.all(32), - child: Row( - spacing: 20, - children: [ - const Expanded( - flex: 2, + return LayoutBuilder( + builder: (context, constraints) { + final isMediumOrLess = constraints.maxWidth <= 900; + if (isMediumOrLess) { + return SingleChildScrollView( + padding: _padding, child: Column( - spacing: 20, + spacing: 32, children: [ - Expanded(child: TotalEnergyConsumptionChartBox()), - Expanded(child: EnergyConsumptionPerDeviceChartBox()), + SizedBox( + height: MediaQuery.of(context).size.height * 0.9, + child: Container( + decoration: subSectionContainerDecoration.copyWith( + borderRadius: BorderRadius.circular(30), + ), + padding: const EdgeInsetsDirectional.all(32), + child: const PowerClampEnergyDataWidget(), + ), + ), + SizedBox( + height: MediaQuery.of(context).size.height * 0.5, + child: const TotalEnergyConsumptionChartBox(), + ), + SizedBox( + height: MediaQuery.of(context).size.height * 0.5, + child: const EnergyConsumptionPerDeviceChartBox(), + ), ], ), - ), - Expanded( - child: Container( - decoration: subSectionContainerDecoration.copyWith( - borderRadius: BorderRadius.circular(30), + ); + } + + return Padding( + padding: _padding, + child: Row( + spacing: 32, + children: [ + const Expanded( + flex: 2, + child: Column( + spacing: 20, + children: [ + Expanded(child: TotalEnergyConsumptionChartBox()), + Expanded(child: EnergyConsumptionPerDeviceChartBox()), + ], + ), ), - padding: const EdgeInsetsDirectional.all(32), - child: const PowerClampEnergyDataWidget(), - ), + Expanded( + child: Container( + decoration: subSectionContainerDecoration.copyWith( + borderRadius: BorderRadius.circular(30), + ), + padding: const EdgeInsetsDirectional.all(32), + child: const PowerClampEnergyDataWidget(), + ), + ), + ], ), - ], - ), + ); + }, ); } } diff --git a/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart b/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart index d45e64ac..c78d30a3 100644 --- a/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart +++ b/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart @@ -21,7 +21,16 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget { Row( spacing: 32, children: [ - ChartTitle(title: Text('Energy Consumption per Device')), + Expanded( + flex: 3, + child: FittedBox( + fit: BoxFit.scaleDown, + alignment: AlignmentDirectional.centerStart, + child: ChartTitle( + title: Text('Energy Consumption per Device'), + ), + ), + ), Spacer(), Expanded(flex: 2, child: EnergyConsumptionPerDeviceDevicesList()), ], diff --git a/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_devices_list.dart b/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_devices_list.dart index af20e403..41143b73 100644 --- a/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_devices_list.dart +++ b/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_devices_list.dart @@ -13,13 +13,17 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget { mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.end, mainAxisAlignment: MainAxisAlignment.end, - children: List.generate(20, (index) => _buildDeviceCell(index)).toList(), + children: List.generate( + 20, + (index) => _buildDeviceCell(context, index), + ).toList(), ), ); } - Widget _buildDeviceCell(int index) { + Widget _buildDeviceCell(BuildContext context, int index) { return Container( + height: MediaQuery.sizeOf(context).height * 0.035, padding: const EdgeInsetsDirectional.symmetric( vertical: 8, horizontal: 12, @@ -31,23 +35,27 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget { width: 1, ), ), - child: Row( - spacing: 6, - children: [ - const CircleAvatar( - radius: 4, - backgroundColor: Colors.purple, - ), - Text( - 'Device ${index + 1}', - textAlign: TextAlign.center, - style: const TextStyle( - color: ColorsManager.blackColor, - fontWeight: FontWeight.w400, - fontSize: 14, + child: FittedBox( + fit: BoxFit.scaleDown, + alignment: Alignment.center, + child: Row( + spacing: 6, + children: [ + const CircleAvatar( + radius: 4, + backgroundColor: Colors.purple, ), - ), - ], + Text( + 'Device ${index + 1}', + textAlign: TextAlign.center, + style: const TextStyle( + color: ColorsManager.blackColor, + fontWeight: FontWeight.w400, + fontSize: 14, + ), + ), + ], + ), ), ); } diff --git a/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart b/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart index 80daabb4..7b998a9d 100644 --- a/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart +++ b/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart @@ -73,16 +73,29 @@ class PowerClampEnergyDataWidget extends StatelessWidget { return Row( mainAxisSize: MainAxisSize.min, children: [ - SelectableText( - 'Smart Power Clamp', - style: context.textTheme.headlineSmall?.copyWith( - fontWeight: FontWeight.w700, - color: ColorsManager.vividBlue.withValues(alpha: 0.6), - fontSize: 18, + Expanded( + flex: 2, + child: FittedBox( + fit: BoxFit.scaleDown, + alignment: AlignmentDirectional.centerStart, + child: SelectableText( + 'Smart Power Clamp', + style: context.textTheme.headlineSmall?.copyWith( + fontWeight: FontWeight.w700, + color: ColorsManager.vividBlue.withValues(alpha: 0.6), + fontSize: 18, + ), + ), ), ), const Spacer(), - const PowerClampEnergyDataDeviceDropdown(), + const Expanded( + child: FittedBox( + fit: BoxFit.scaleDown, + alignment: AlignmentDirectional.centerEnd, + child: PowerClampEnergyDataDeviceDropdown(), + ), + ), ], ); } diff --git a/lib/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart_box.dart b/lib/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart_box.dart index 0d10992f..23b95591 100644 --- a/lib/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart_box.dart +++ b/lib/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart_box.dart @@ -20,7 +20,19 @@ class TotalEnergyConsumptionChartBox extends StatelessWidget { spacing: 20, crossAxisAlignment: CrossAxisAlignment.start, children: [ - const ChartTitle(title: Text('Total Energy Consumption')), + const Row( + children: [ + Expanded( + flex: 3, + child: FittedBox( + alignment: AlignmentDirectional.centerStart, + fit: BoxFit.scaleDown, + child: ChartTitle(title: Text('Total Energy Consumption')), + ), + ), + Spacer(flex: 4), + ], + ), const Divider(), TotalEnergyConsumptionChart(chartData: state.chartData), ],