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

SP-1495 reworks.

Browse Source 
1. Overlapping line not removed.
2. The colors of the data on X axis and Y axis are not identical to design.
3. Day 1 and 2 are missing on the X axis.
4. When the chart loads, we see it coming from the top right corner (check the attached video).
5. Display all available devices even if they have no data and make the chart empty state.
This commit is contained in:
Faris Armoush
2025-05-19 10:52:44 +03:00
parent f67d0e2912
commit 494ae1c941
5 changed files with 112 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
lib/pages/analytics/models/analytics_device.dart
View File

@ -1,13 +1,65 @@
class AnalyticsDevice {
const AnalyticsDevice({required this.name, required this.uuid});
const AnalyticsDevice({
required this.uuid,
required this.name,
required this.createdAt,
required this.updatedAt,
required this.deviceTuyaUuid,
required this.isActive,
required this.productDevice,
});
final String uuid;
final String name;
final DateTime createdAt;
final DateTime updatedAt;
final String deviceTuyaUuid;
final bool isActive;
final ProductDevice productDevice;
factory AnalyticsDevice.fromJson(Map<String, dynamic> json) {
return AnalyticsDevice(
uuid: json['uuid'] as String? ?? '',
name: json['name'] as String? ?? '',
createdAt: DateTime.parse(json['createdAt'] as String? ?? ''),
updatedAt: DateTime.parse(json['updatedAt'] as String? ?? ''),
deviceTuyaUuid: json['deviceTuyaUuid'] as String? ?? '',
isActive: json['isActive'] as bool? ?? false,
productDevice: ProductDevice.fromJson(
json['productDevice'] as Map<String, dynamic>? ?? {},
),
);
}
}
class ProductDevice {
const ProductDevice({
required this.uuid,
required this.createdAt,
required this.updatedAt,
required this.catName,
required this.prodId,
required this.name,
required this.prodType,
});
final String uuid;
final DateTime createdAt;
final DateTime updatedAt;
final String catName;
final String prodId;
final String name;
final String prodType;
factory ProductDevice.fromJson(Map<String, dynamic> json) {
return ProductDevice(
uuid: json['uuid'] as String? ?? '',
createdAt: DateTime.parse(json['createdAt'] as String? ?? ''),
updatedAt: DateTime.parse(json['updatedAt'] as String? ?? ''),
catName: json['catName'] as String? ?? '',
prodId: json['prodId'] as String? ?? '',
name: json['name'] as String? ?? '',
prodType: json['prodType'] as String? ?? '',
);
}
}

2
lib/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart
View File

@ -38,7 +38,7 @@ abstract final class EnergyManagementChartsHelper {
sideTitles: SideTitles(
showTitles: true,
maxIncluded: false,
minIncluded: false,
minIncluded: true,
interval: leftTitlesInterval,
reservedSize: 110,
getTitlesWidget: (value, meta) => Padding(

2
lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart
View File

@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_devices/analytics_devices_bloc.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/energy_consumption_per_device/energy_consumption_per_device_bloc.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart.dart';
@ -46,6 +47,7 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
flex: 2,
child: EnergyConsumptionPerDeviceDevicesList(
chartData: state.chartData,
devices: context.watch<AnalyticsDevicesBloc>().state.devices,
),
),
],

89
lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_devices_list.dart
View File

@ -1,10 +1,16 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/analytics/models/analytics_device.dart';
import 'package:syncrow_web/pages/analytics/models/device_energy_data_model.dart';
import 'package:syncrow_web/utils/color_manager.dart';
class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
const EnergyConsumptionPerDeviceDevicesList({required this.chartData, super.key});
const EnergyConsumptionPerDeviceDevicesList({
required this.chartData,
required this.devices,
super.key,
});
final List<AnalyticsDevice> devices;
final List<DeviceEnergyDataModel> chartData;
@override
@ -16,45 +22,60 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: chartData.map((e) => _buildDeviceCell(context, e)).toList(),
children: devices.map((e) => _buildDeviceCell(context, e)).toList(),
),
);
}
Widget _buildDeviceCell(BuildContext context, DeviceEnergyDataModel device) {
return Container(
height: MediaQuery.sizeOf(context).height * 0.0365,
padding: const EdgeInsetsDirectional.symmetric(
vertical: 8,
horizontal: 12,
),
decoration: BoxDecoration(
borderRadius: BorderRadiusDirectional.circular(8),
border: Border.all(
color: ColorsManager.greyColor,
width: 1,
Widget _buildDeviceCell(BuildContext context, AnalyticsDevice device) {
final deviceColor = chartData
.firstWhere(
(element) => element.deviceId == device.uuid,
orElse: () => const DeviceEnergyDataModel(
energy: [],
deviceName: '',
deviceId: '',
color: Colors.red,
),
)
.color;
return Tooltip(
message: '${device.name}\n${device.productDevice.uuid}',
child: Container(
height: MediaQuery.sizeOf(context).height * 0.0365,
padding: const EdgeInsetsDirectional.symmetric(
vertical: 8,
horizontal: 12,
),
),
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: Alignment.center,
child: Row(
spacing: 6,
children: [
CircleAvatar(
radius: 4,
backgroundColor: device.color,
),
Text(
device.deviceName,
textAlign: TextAlign.center,
style: const TextStyle(
color: ColorsManager.blackColor,
fontWeight: FontWeight.w400,
fontSize: 14,
decoration: BoxDecoration(
borderRadius: BorderRadiusDirectional.circular(8),
border: Border.all(
color: ColorsManager.greyColor,
width: 1,
),
),
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: Alignment.center,
child: Row(
spacing: 6,
children: [
CircleAvatar(
radius: 4,
backgroundColor: deviceColor,
),
),
],
Text(
device.name,
textAlign: TextAlign.center,
style: const TextStyle(
color: ColorsManager.blackColor,
fontWeight: FontWeight.w400,
fontSize: 14,
),
),
],
),
),
),
);

5
lib/pages/analytics/services/energy_consumption_per_device/remote_energy_consumption_per_device_service.dart
View File

@ -34,10 +34,7 @@ abstract final class _EnergyConsumptionPerDeviceMapper {
static List<DeviceEnergyDataModel> map(dynamic data) {
final json = data as Map<String, dynamic>? ?? {};
final mappedData = json['data'] as List<dynamic>? ?? [];
return mappedData.where((e) {
final deviceData = (e as Map<String, dynamic>)['data'] as List<dynamic>? ?? [];
return deviceData.isNotEmpty;
}).map((e) {
return mappedData.map((e) {
final deviceData = e as Map<String, dynamic>;
final energyData = deviceData['data'] as List<dynamic>;