mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-10 15:17:31 +00:00
SP-1495 reworks.
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:
@ -1,13 +1,65 @@
|
|||||||
class AnalyticsDevice {
|
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 uuid;
|
||||||
final String name;
|
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) {
|
factory AnalyticsDevice.fromJson(Map<String, dynamic> json) {
|
||||||
return AnalyticsDevice(
|
return AnalyticsDevice(
|
||||||
uuid: json['uuid'] as String? ?? '',
|
uuid: json['uuid'] as String? ?? '',
|
||||||
name: json['name'] 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? ?? '',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -38,7 +38,7 @@ abstract final class EnergyManagementChartsHelper {
|
|||||||
sideTitles: SideTitles(
|
sideTitles: SideTitles(
|
||||||
showTitles: true,
|
showTitles: true,
|
||||||
maxIncluded: false,
|
maxIncluded: false,
|
||||||
minIncluded: false,
|
minIncluded: true,
|
||||||
interval: leftTitlesInterval,
|
interval: leftTitlesInterval,
|
||||||
reservedSize: 110,
|
reservedSize: 110,
|
||||||
getTitlesWidget: (value, meta) => Padding(
|
getTitlesWidget: (value, meta) => Padding(
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_bloc/flutter_bloc.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/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/chart_title.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_chart.dart';
|
||||||
@ -46,6 +47,7 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
|
|||||||
flex: 2,
|
flex: 2,
|
||||||
child: EnergyConsumptionPerDeviceDevicesList(
|
child: EnergyConsumptionPerDeviceDevicesList(
|
||||||
chartData: state.chartData,
|
chartData: state.chartData,
|
||||||
|
devices: context.watch<AnalyticsDevicesBloc>().state.devices,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
@ -1,10 +1,16 @@
|
|||||||
import 'package:flutter/material.dart';
|
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/pages/analytics/models/device_energy_data_model.dart';
|
||||||
import 'package:syncrow_web/utils/color_manager.dart';
|
import 'package:syncrow_web/utils/color_manager.dart';
|
||||||
|
|
||||||
class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
|
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;
|
final List<DeviceEnergyDataModel> chartData;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
@ -16,45 +22,60 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
|
|||||||
mainAxisSize: MainAxisSize.min,
|
mainAxisSize: MainAxisSize.min,
|
||||||
crossAxisAlignment: CrossAxisAlignment.end,
|
crossAxisAlignment: CrossAxisAlignment.end,
|
||||||
mainAxisAlignment: MainAxisAlignment.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) {
|
Widget _buildDeviceCell(BuildContext context, AnalyticsDevice device) {
|
||||||
return Container(
|
final deviceColor = chartData
|
||||||
height: MediaQuery.sizeOf(context).height * 0.0365,
|
.firstWhere(
|
||||||
padding: const EdgeInsetsDirectional.symmetric(
|
(element) => element.deviceId == device.uuid,
|
||||||
vertical: 8,
|
orElse: () => const DeviceEnergyDataModel(
|
||||||
horizontal: 12,
|
energy: [],
|
||||||
),
|
deviceName: '',
|
||||||
decoration: BoxDecoration(
|
deviceId: '',
|
||||||
borderRadius: BorderRadiusDirectional.circular(8),
|
color: Colors.red,
|
||||||
border: Border.all(
|
),
|
||||||
color: ColorsManager.greyColor,
|
)
|
||||||
width: 1,
|
.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,
|
||||||
),
|
),
|
||||||
),
|
decoration: BoxDecoration(
|
||||||
child: FittedBox(
|
borderRadius: BorderRadiusDirectional.circular(8),
|
||||||
fit: BoxFit.scaleDown,
|
border: Border.all(
|
||||||
alignment: Alignment.center,
|
color: ColorsManager.greyColor,
|
||||||
child: Row(
|
width: 1,
|
||||||
spacing: 6,
|
),
|
||||||
children: [
|
),
|
||||||
CircleAvatar(
|
child: FittedBox(
|
||||||
radius: 4,
|
fit: BoxFit.scaleDown,
|
||||||
backgroundColor: device.color,
|
alignment: Alignment.center,
|
||||||
),
|
child: Row(
|
||||||
Text(
|
spacing: 6,
|
||||||
device.deviceName,
|
children: [
|
||||||
textAlign: TextAlign.center,
|
CircleAvatar(
|
||||||
style: const TextStyle(
|
radius: 4,
|
||||||
color: ColorsManager.blackColor,
|
backgroundColor: deviceColor,
|
||||||
fontWeight: FontWeight.w400,
|
|
||||||
fontSize: 14,
|
|
||||||
),
|
),
|
||||||
),
|
Text(
|
||||||
],
|
device.name,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
style: const TextStyle(
|
||||||
|
color: ColorsManager.blackColor,
|
||||||
|
fontWeight: FontWeight.w400,
|
||||||
|
fontSize: 14,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
@ -34,10 +34,7 @@ abstract final class _EnergyConsumptionPerDeviceMapper {
|
|||||||
static List<DeviceEnergyDataModel> map(dynamic data) {
|
static List<DeviceEnergyDataModel> map(dynamic data) {
|
||||||
final json = data as Map<String, dynamic>? ?? {};
|
final json = data as Map<String, dynamic>? ?? {};
|
||||||
final mappedData = json['data'] as List<dynamic>? ?? [];
|
final mappedData = json['data'] as List<dynamic>? ?? [];
|
||||||
return mappedData.where((e) {
|
return mappedData.map((e) {
|
||||||
final deviceData = (e as Map<String, dynamic>)['data'] as List<dynamic>? ?? [];
|
|
||||||
return deviceData.isNotEmpty;
|
|
||||||
}).map((e) {
|
|
||||||
final deviceData = e as Map<String, dynamic>;
|
final deviceData = e as Map<String, dynamic>;
|
||||||
final energyData = deviceData['data'] as List<dynamic>;
|
final energyData = deviceData['data'] as List<dynamic>;
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user