ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-10 07:07:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement EnergyConsumptionByPhasesChart with structured layout and phase indicators

Browse Source
This commit is contained in:
Faris Armoush
2025-05-04 12:01:40 +03:00
parent a657a9a25e
commit f6448d3eff
2 changed files with 93 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
lib/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart.dart
View File

@ -1,10 +1,86 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:syncrow_web/utils/style.dart';
class EnergyConsumptionByPhasesChart extends StatelessWidget {
const EnergyConsumptionByPhasesChart({super.key});
@override
Widget build(BuildContext context) {
return const Placeholder();
return Container(
padding: const EdgeInsetsDirectional.all(20),
decoration: secondarySection,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
flex: 4,
child: FittedBox(
fit: BoxFit.scaleDown,
child: ChartTitle(
title: Text(
'Energy Consumption by Phases',
style: context.textTheme.titleLarge?.copyWith(
fontSize: 14,
fontWeight: FontWeight.w400,
color: ColorsManager.textPrimaryColor,
),
),
),
),
),
const Spacer(),
...<(String title, double opacity)>[
('A', 0.8),
('B', 0.4),
('C', 0.15),
].map((phase) => _buildPhaseCell(context, phase)),
],
),
],
),
);
}
Widget _buildPhaseCell(
BuildContext context,
(String title, double colorOpacity) phase,
) {
final (title, colorOpacity) = phase;
return Expanded(
child: FittedBox(
fit: BoxFit.scaleDown,
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
spacing: 4,
children: [
CircleAvatar(
backgroundColor: ColorsManager.vividBlue.withValues(
alpha: colorOpacity,
),
radius: 4,
),
Text(
'Phase $title',
style: context.textTheme.labelSmall?.copyWith(
fontSize: 8,
fontWeight: FontWeight.w400,
color: ColorsManager.lightGreyColor,
),
),
const SizedBox(width: 4),
],
),
),
);
}
}

19
lib/utils/style.dart
View File

@ -2,8 +2,7 @@ import 'package:flutter/material.dart';
import 'color_manager.dart';
InputDecoration? textBoxDecoration(
{bool suffixIcon = false, double radios = 8}) =>
InputDecoration? textBoxDecoration({bool suffixIcon = false, double radios = 8}) =>
InputDecoration(
focusColor: ColorsManager.grayColor,
suffixIcon: suffixIcon ? const Icon(Icons.search) : null,
@ -68,10 +67,24 @@ BoxDecoration subSectionContainerDecoration = BoxDecoration(
],
);
final secondarySection = BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
spreadRadius: 1,
blurRadius: 7,
offset: const Offset(0, 10),
),
],
color: ColorsManager.circleRolesBackground,
borderRadius: const BorderRadius.all(
Radius.circular(15),
),
);
InputDecoration inputTextFormDeco({hintText}) => InputDecoration(
hintText: hintText,
border: const OutlineInputBorder(
borderSide: BorderSide(
width: 1,
color: ColorsManager.textGray, // Border color for unfocused state