4170 lines
161 KiB
Dart
4170 lines
161 KiB
Dart
import 'dart:convert';
|
|
import 'dart:math';
|
|
|
|
import 'package:fl_chart/fl_chart.dart';
|
|
import 'package:flutter/foundation.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:uae_stat/domain/use_cases/language.dart';
|
|
// import 'package:syncfusion_flutter_charts/charts.dart';
|
|
import 'package:d_chart/d_chart.dart';
|
|
|
|
class ChartWidget extends StatelessWidget {
|
|
ChartWidget({
|
|
Key? key,
|
|
required this.chartData,
|
|
required this.bodyColor,
|
|
required this.chartHeader,
|
|
}) : super(key: key);
|
|
final dynamic chartData;
|
|
final Color bodyColor;
|
|
final String chartHeader;
|
|
|
|
List<int> showingTooltipOnSpots = []; // To store indices of active tooltips
|
|
late LineChartBarData tooltipsOnBar; // Needs proper initialization
|
|
|
|
// Define color lists
|
|
final Map<String, List<Color>> colorMap = {
|
|
"ECONOMY": [
|
|
Color(0xFF648CBA),
|
|
Color(0xFF90B0D5),
|
|
Color(0xFF98BCE5),
|
|
Color(0xFFA7B5C5),
|
|
Color(0xFFBED3EC),
|
|
Color(0xFFD4E3F4),
|
|
],
|
|
"SOCIAL": [
|
|
Color(0xFFD9BB99),
|
|
Color(0xFF87766E),
|
|
Color(0xFFC6A885),
|
|
Color(0xFFA28565),
|
|
Color(0xFFBFB29B),
|
|
Color(0xFFE8D8BB),
|
|
],
|
|
"ENVIRONMENT": [
|
|
Color(0xFF376C79),
|
|
Color(0xFF578D9C),
|
|
Color(0xFF7DAFBC),
|
|
Color(0xFF86C7D9),
|
|
// Color(0xFF989898),
|
|
],
|
|
};
|
|
|
|
final Map<String, List<Color>> colorMapForFour = {
|
|
"ECONOMY": [
|
|
Color(0xFF648CBA),
|
|
Color(0xFF90B0D5),
|
|
Color(0xFF98BCE5),
|
|
Color(0xFFA7B5C5),
|
|
Color(0xFFBED3EC),
|
|
],
|
|
"SOCIAL": [
|
|
Color(0xFFD9BB99),
|
|
Color(0xFF87766E),
|
|
Color(0xFFC6A885),
|
|
Color(0xFFA28565),
|
|
Color(0xFFBFB29B),
|
|
],
|
|
"ENVIRONMENT": [
|
|
Color(0xFF376C79),
|
|
Color(0xFF578D9C),
|
|
Color(0xFF7DAFBC),
|
|
Color(0xFF86C7D9),
|
|
],
|
|
};
|
|
|
|
final Map<String, List<Color>> colorMapForThree = {
|
|
"ECONOMY": [Color(0xFF648CBA), Color(0xFF90B0D5), Color(0xFF98BCE5)],
|
|
"SOCIAL": [Color(0xFFD9BB99), Color(0xFF87766E), Color(0xFFC6A885)],
|
|
"ENVIRONMENT": [Color(0xFF376C79), Color(0xFF578D9C), Color(0xFF7DAFBC)],
|
|
};
|
|
|
|
// Define color lists
|
|
final Map<String, List<Color>> colorMapForTwo = {
|
|
"ECONOMY": [Color(0xFF648CBA), Color(0xFF90B0D5)],
|
|
"SOCIAL": [Color(0xFFD9BB99), Color(0xFF87766E)],
|
|
"ENVIRONMENT": [Color(0xFF376C79), Color(0xFF578D9C)],
|
|
};
|
|
|
|
// List<Color> get uniqueColors => colorMap[chartHeader] ?? [Colors.grey]; // Default to grey if header is unknown
|
|
// Function to get colors for both English & Arabic keys
|
|
List<Color> get uniqueColors {
|
|
final Map<String, String> translations = {
|
|
'الاقتصاد': 'ECONOMY',
|
|
'الاجتماعي': 'SOCIAL',
|
|
'البيئة': 'ENVIRONMENT',
|
|
};
|
|
|
|
String key = translations[chartHeader] ?? chartHeader;
|
|
return colorMap[key] ?? [Colors.grey];
|
|
}
|
|
|
|
List<Color> get uniqueColorsForTwo {
|
|
final Map<String, String> translations = {
|
|
'الاقتصاد': 'ECONOMY',
|
|
'الاجتماعي': 'SOCIAL',
|
|
'البيئة': 'ENVIRONMENT',
|
|
};
|
|
|
|
String key = translations[chartHeader] ?? chartHeader;
|
|
return colorMapForTwo[key] ?? [Colors.grey];
|
|
}
|
|
|
|
List<Color> get uniqueColorsForThree {
|
|
final Map<String, String> translations = {
|
|
'الاقتصاد': 'ECONOMY',
|
|
'الاجتماعي': 'SOCIAL',
|
|
'البيئة': 'ENVIRONMENT',
|
|
};
|
|
|
|
String key = translations[chartHeader] ?? chartHeader;
|
|
return colorMapForThree[key] ?? [Colors.grey];
|
|
}
|
|
|
|
List<Color> get uniqueColorsForFour {
|
|
final Map<String, String> translations = {
|
|
'اقتصاد': 'ECONOMY',
|
|
'اجتماعي': 'SOCIAL',
|
|
'بيئة': 'ENVIRONMENT',
|
|
};
|
|
|
|
String key = translations[chartHeader] ?? chartHeader;
|
|
return colorMapForFour[key] ?? [Colors.grey];
|
|
}
|
|
|
|
String capitalizeAndSplit(String input) {
|
|
return input
|
|
.split('_')
|
|
.map((word) => word[0].toUpperCase() + word.substring(1))
|
|
.join(' ');
|
|
}
|
|
|
|
Color _hexToColor(String hexColor) {
|
|
hexColor = hexColor.toUpperCase().replaceAll('#', ''); // Remove #
|
|
if (hexColor.length == 6) {
|
|
hexColor = 'FF$hexColor'; // Add alpha if missing
|
|
}
|
|
return Color(int.parse(hexColor, radix: 16));
|
|
}
|
|
|
|
String formatVerticalText(String text) {
|
|
return text.split('').join('\n'); // Inserts a newline after each character
|
|
}
|
|
|
|
String formatNumber(double value) {
|
|
if (value >= 1e12) {
|
|
return '${(value / 1e12).toStringAsFixed(2)}T';
|
|
} else if (value >= 1e9) {
|
|
return '${(value / 1e9).toStringAsFixed(2)}B';
|
|
} else if (value >= 1e6) {
|
|
return '${(value / 1e6).toStringAsFixed(2)}M';
|
|
} else if (value >= 1e3) {
|
|
return '${(value / 1e3).toStringAsFixed(2)}K';
|
|
} else {
|
|
return value.toStringAsFixed(2); // No decimals for small numbers
|
|
}
|
|
}
|
|
|
|
String formatNumberConversion(
|
|
double value,
|
|
String chartConversion,
|
|
String numberFormat,
|
|
) {
|
|
// Convert the input value to base unit (actual value)
|
|
double baseValue = value;
|
|
|
|
if (numberFormat == 'M') {
|
|
baseValue = value * 1e6; // Convert from Million to base value
|
|
} else if (numberFormat == 'B') {
|
|
baseValue = value * 1e9; // Convert from Billion to base value
|
|
} else if (numberFormat == 'T') {
|
|
baseValue = value * 1e12; // Convert from Trillion to base value
|
|
} else if (numberFormat == 'K') {
|
|
baseValue = value * 1e3; // Convert from Thousand to base value
|
|
}
|
|
|
|
// Convert base value to the target chartConversion format
|
|
if (chartConversion == 'T') {
|
|
return '${(baseValue / 1e12).toStringAsFixed(2)}T'; // Convert to Trillion
|
|
} else if (chartConversion == 'B') {
|
|
return '${(baseValue / 1e9).toStringAsFixed(2)}B'; // Convert to Billion
|
|
} else if (chartConversion == 'M') {
|
|
return '${(baseValue / 1e6).toStringAsFixed(2)}M'; // Convert to Million
|
|
} else if (chartConversion == 'K') {
|
|
return '${(baseValue / 1e3).toStringAsFixed(2)}K'; // Convert to Thousand
|
|
} else {
|
|
return baseValue.toStringAsFixed(
|
|
2,
|
|
); // Default: Show value with 2 decimals
|
|
}
|
|
}
|
|
|
|
List<ChartData> parseStackedBarChartData(
|
|
dynamic chartData,
|
|
String groupByKey,
|
|
String groupByValue,
|
|
) {
|
|
return chartData['response']
|
|
.where((entry) => entry['ObsKey'][groupByKey] == groupByValue)
|
|
.map<ChartData>((entry) {
|
|
return ChartData(
|
|
x: entry['ObsKey']['TIME_PERIOD'],
|
|
y: double.tryParse(entry['ObsValue']['Value']) ?? 0.0,
|
|
);
|
|
}).toList();
|
|
}
|
|
|
|
List<BarChartGroupData> parseColumnChartData(dynamic chartData) {
|
|
return chartData['response'].map<BarChartGroupData>((entry) {
|
|
return BarChartGroupData(
|
|
x: int.tryParse(entry['ObsKey']['TIME_PERIOD']) ?? 0,
|
|
barRods: [
|
|
BarChartRodData(
|
|
toY: double.tryParse(entry['ObsValue']['Value']) ?? 0.0,
|
|
color: Colors.blue,
|
|
width: 16,
|
|
borderRadius: BorderRadius.zero,
|
|
),
|
|
],
|
|
);
|
|
}).toList();
|
|
}
|
|
|
|
Color hexToColor(String hex) {
|
|
hex = hex.replaceFirst('#', ''); // Remove #
|
|
if (hex.length == 6) {
|
|
hex = 'FF$hex'; // Add full opacity
|
|
}
|
|
return Color(int.parse(hex, radix: 16));
|
|
}
|
|
|
|
Color adjustColor(Color baseColor, int index) {
|
|
final HSLColor hsl = HSLColor.fromColor(baseColor);
|
|
|
|
// Lightness variation (keeping it light, between 0.6 and 0.9)
|
|
double lightnessFactor =
|
|
0.6 + (index % 4) * 0.1; // Varies between 0.6 to 0.8
|
|
final HSLColor adjustedHSL = hsl.withLightness(
|
|
lightnessFactor.clamp(0.6, 0.9), // Ensures light shades only
|
|
);
|
|
|
|
return adjustedHSL.toColor();
|
|
}
|
|
|
|
Color adjustColorlineTrend(Color baseColor, int index) {
|
|
final HSLColor hsl = HSLColor.fromColor(baseColor);
|
|
|
|
// Darken the color slightly by reducing lightness
|
|
double lightnessFactor = hsl.lightness - ((index % 4) * 0.05);
|
|
lightnessFactor = lightnessFactor.clamp(0.3, 0.7); // Keeps colors darker
|
|
|
|
// Adjust opacity: Making it darker with alpha between 160-230
|
|
int alphaFactor = (230 - (index % 4) * 20).clamp(
|
|
160,
|
|
230,
|
|
); // Darker opacity
|
|
|
|
return hsl
|
|
.withLightness(lightnessFactor)
|
|
.toColor()
|
|
.withAlpha(alphaFactor); // Use withAlpha() instead of withOpacity()
|
|
}
|
|
|
|
List<PieChartSectionData> parsePieChartData(
|
|
dynamic chartData,
|
|
double totalValue,
|
|
int? touchedIndex,BuildContext context
|
|
) {
|
|
debugPrint('Chart Data: ${jsonEncode(chartData)}');
|
|
|
|
var groupByKeyValue;
|
|
if (chartData['chart_type_json']['chart_type'] == 'bar_chart_horizontal' ||
|
|
chartData['chart_type_json']['chart_type'] == 'horizontal_rotate') {
|
|
groupByKeyValue = chartData['chart_type_json']['y_group'] ?? '';
|
|
} else {
|
|
groupByKeyValue = chartData['chart_type_json']['x_group'] ?? '';
|
|
}
|
|
|
|
return chartData['response'].asMap().entries.map<PieChartSectionData>((
|
|
entry,
|
|
) {
|
|
int index = entry.key;
|
|
|
|
var data = entry.value;
|
|
// Handle different types: int, double, and String
|
|
double value = 0.0;
|
|
var rawValue = data['ObsValue']['Value'];
|
|
String title = data['ObsKey'][groupByKeyValue] ?? '';
|
|
|
|
if (rawValue is String) {
|
|
value = double.tryParse(rawValue) ?? 0.0;
|
|
} else if (rawValue is num) {
|
|
value = rawValue.toDouble();
|
|
} else if (rawValue is double) {
|
|
value = rawValue;
|
|
} else {
|
|
print('Unexpected Type for ObsValue[Value]: ${rawValue.runtimeType}');
|
|
}
|
|
|
|
// double percentage = (value / totalValue) * 100;
|
|
double percentage = (totalValue > 0) ? (value / totalValue) * 100 : 0.0;
|
|
bool isTouched = index == touchedIndex;
|
|
String displayTitle = title.length > 12 ? '${title.substring(0, 10)}...' : title;
|
|
return PieChartSectionData(
|
|
value: value,
|
|
// color: Colors.primaries[index % Colors.primaries.length],
|
|
// color: adjustColor(bodyColor, index), // Adjust alpha dynamically
|
|
color: uniqueColors[index % uniqueColors.length],
|
|
// title: '${percentage.toStringAsFixed(1)}%',
|
|
title: percentage >= 0.1 ? '${percentage.toStringAsFixed(1)}%' : '',
|
|
// title: percentage >= 0.1 ? '$displayTitle\n${percentage.toStringAsFixed(1)}%' : '',
|
|
radius: isTouched ? 70 : 50,
|
|
|
|
// Increase size when touched
|
|
titleStyle: TextStyle(
|
|
fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),
|
|
fontSize: isTouched ? 12 : (percentage < 1 ? 10 : 11),
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.black,
|
|
// color: Colors.white,
|
|
),
|
|
titlePositionPercentageOffset: 1.4,
|
|
// titlePositionPercentageOffset: 1.7,
|
|
);
|
|
}).toList();
|
|
}
|
|
|
|
// List<Widget> generateIndicators(dynamic chartData) {
|
|
// var groupByKeyValue;
|
|
// if (chartData['chart_type_json']['chart_type'] == 'bar_chart_horizontal' ||
|
|
// chartData['chart_type_json']['chart_type'] == 'horizontal_rotate') {
|
|
// groupByKeyValue = chartData['chart_type_json']['y_group'] ?? '';
|
|
// } else {
|
|
// groupByKeyValue = chartData['chart_type_json']['x_group'] ?? '';
|
|
// }
|
|
//
|
|
// return [
|
|
// Center(
|
|
// child: Wrap(
|
|
// alignment: WrapAlignment.center, // Center-align all items
|
|
// spacing: 10, // Adjust horizontal spacing
|
|
// runSpacing: 5, // Adjust vertical spacing for wrapping
|
|
// children: chartData['response'].asMap().entries.map<Widget>((entry) {
|
|
// int index = entry.key;
|
|
// var data = entry.value;
|
|
// Color color = Colors.primaries[index % Colors.primaries.length];
|
|
// String title = data['ObsKey'][groupByKeyValue] ?? '';
|
|
//
|
|
// return Container(
|
|
// padding: EdgeInsets.symmetric(vertical: 4), // Add spacing
|
|
// child: Row(
|
|
// mainAxisSize:
|
|
// MainAxisSize.min, // Wrap content without extra space
|
|
// mainAxisAlignment:
|
|
// MainAxisAlignment.center, // Align items center
|
|
// crossAxisAlignment:
|
|
// CrossAxisAlignment.center, // Align vertically
|
|
// children: [
|
|
// Container(
|
|
// width: 10,
|
|
// height: 10,
|
|
// decoration: BoxDecoration(
|
|
// color: uniqueColors[index % uniqueColors.length],
|
|
// shape: BoxShape.circle,
|
|
// ),
|
|
// ),
|
|
// SizedBox(width: 5),
|
|
// ConstrainedBox(
|
|
// constraints: BoxConstraints(
|
|
// maxWidth: 200, // Ensures text wraps within a limit
|
|
// ),
|
|
// child: Text(
|
|
// title,
|
|
// style: TextStyle(fontSize: 12),
|
|
// softWrap: true, // Allow text to wrap naturally
|
|
// textAlign: TextAlign.center, // Center text alignment
|
|
// ),
|
|
// ),
|
|
// ],
|
|
// ),
|
|
// );
|
|
// }).toList(),
|
|
// ),
|
|
// ),
|
|
// ];
|
|
// }
|
|
|
|
List<Widget> generateIndicators(
|
|
dynamic chartData, double totalValue, BuildContext context) {
|
|
var groupByKeyValue;
|
|
if (chartData['chart_type_json']['chart_type'] == 'bar_chart_horizontal' ||
|
|
chartData['chart_type_json']['chart_type'] == 'horizontal_rotate') {
|
|
groupByKeyValue = chartData['chart_type_json']['y_group'] ?? '';
|
|
} else {
|
|
groupByKeyValue = chartData['chart_type_json']['x_group'] ?? '';
|
|
}
|
|
return chartData['response'].asMap().entries.map<Widget>((entry) {
|
|
int index = entry.key;
|
|
var data = entry.value;
|
|
Color color = Colors.primaries[index % Colors.primaries.length];
|
|
String title = data['ObsKey'][groupByKeyValue] ?? '';
|
|
// String value = data['ObsValue']['Value'].toString();
|
|
String shortTitle =
|
|
title.length > 10 ? '${title.substring(0, 10)}…' : title;
|
|
|
|
// Handle different types: int, double, and String
|
|
double value = 0.0;
|
|
var rawValue = data['ObsValue']['Value'];
|
|
|
|
if (rawValue is String) {
|
|
value = double.tryParse(rawValue) ?? 0.0;
|
|
} else if (rawValue is num) {
|
|
value = rawValue.toDouble();
|
|
} else if (rawValue is double) {
|
|
value = rawValue;
|
|
} else {
|
|
print('Unexpected Type for ObsValue[Value]: ${rawValue.runtimeType}');
|
|
}
|
|
|
|
// double percentage = (value / totalValue) * 100;
|
|
String percentage = (totalValue > 0)
|
|
? ((value / totalValue) * 100).toStringAsFixed(1)
|
|
: "0.0";
|
|
// bool isTouched = index == touchedIndex;
|
|
|
|
// return Wrap(
|
|
// alignment: WrapAlignment.center,
|
|
// spacing: 12,
|
|
// runSpacing: 8,
|
|
// children: [
|
|
// Row(
|
|
// mainAxisSize: MainAxisSize.min,
|
|
// children: [
|
|
// Container(
|
|
// width: 10,
|
|
// height: 10,
|
|
// decoration: BoxDecoration(
|
|
// color: uniqueColors[index % uniqueColors.length],
|
|
// shape: BoxShape.circle,
|
|
// ),
|
|
// ),
|
|
// SizedBox(width: 8),
|
|
// Flexible(
|
|
// child: Text(
|
|
// context.translate(
|
|
// '$title -- $percentage%',
|
|
// '$title -- %$percentage',
|
|
// ),
|
|
// textAlign: TextAlign.start,
|
|
// style: TextStyle(fontSize: 12),
|
|
// softWrap: true,
|
|
// maxLines: 2, // Allows wrapping within two lines
|
|
// overflow: TextOverflow.ellipsis, // Prevents overflow
|
|
// ),
|
|
// ),
|
|
// ],
|
|
// ),
|
|
// ],
|
|
// );
|
|
|
|
return Row(
|
|
crossAxisAlignment:
|
|
CrossAxisAlignment.start, // Aligns dot to text start
|
|
children: [
|
|
Container(
|
|
width: 10,
|
|
height: 10,
|
|
margin: EdgeInsets.only(top: 4), // Adjust to align with text
|
|
decoration: BoxDecoration(
|
|
color: uniqueColors[index % uniqueColors.length],
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
SizedBox(width: 8),
|
|
Expanded(
|
|
child: TooltipTheme(
|
|
data: TooltipThemeData(
|
|
decoration: BoxDecoration(
|
|
color: Colors.blueGrey[800], // Change background color
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
textStyle: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),color: Colors.white),
|
|
),
|
|
child: Tooltip(
|
|
message: title, // Full text on hover
|
|
child: Text(
|
|
context.translate(
|
|
'$title -- $percentage%',
|
|
'$title -- %$percentage',
|
|
),
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 12),
|
|
softWrap: true,
|
|
maxLines: 2,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}).toList();
|
|
}
|
|
|
|
List<Widget> generateIndicatorsBar(
|
|
Map<String, dynamic> chartData,
|
|
List<String> groupByValues,
|
|
) {
|
|
List<Widget> indicators = [];
|
|
|
|
for (int i = 0; i < groupByValues.length; i++) {
|
|
String groupLabel = groupByValues[i];
|
|
|
|
indicators.add(
|
|
Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(
|
|
width: 12,
|
|
height: 12,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: Colors.blue, // Replace with dynamic color if needed
|
|
),
|
|
),
|
|
SizedBox(width: 5),
|
|
Text(
|
|
groupLabel, // Displaying groupLabel
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
return indicators;
|
|
}
|
|
|
|
Set<String> extractGroupByValues(dynamic chartData, String groupByKey) {
|
|
return (chartData['response'] as List<dynamic>).map<String>((entry) {
|
|
var value = entry['ObsKey'][groupByKey];
|
|
return value != null
|
|
? value.toString()
|
|
: ''; // Handle null and ensure conversion to String
|
|
}).toSet();
|
|
}
|
|
|
|
// @override
|
|
// void initState() {
|
|
// super.initState();
|
|
// tooltipsOnBar = lineBars.first; // Example: Assign the first line bar
|
|
// }
|
|
|
|
Widget buildChart(dynamic chartData, BuildContext context) {
|
|
// print('bodyColor- $bodyColor');
|
|
print('chartDataccccccc $chartData');
|
|
if (chartData == null || chartData['response'] == null) {
|
|
return Center(child: Text('No chart data available'));
|
|
}
|
|
|
|
print(chartData['chart_type_json']['TIME_PERIOD']);
|
|
print(chartData['chart_type_json']['x_group']);
|
|
|
|
String groupByKey = '';
|
|
|
|
if (chartData['chart_type_json']['chart_type'] == 'bar_chart_horizontal' ||
|
|
chartData['chart_type_json']['chart_type'] == 'horizontal_rotate') {
|
|
groupByKey = chartData['chart_type_json']['y_group'] ?? '';
|
|
} else {
|
|
groupByKey = chartData['chart_type_json']['x_group'] ?? '';
|
|
}
|
|
|
|
print('groupByKey $groupByKey');
|
|
Set<String> groupByValues = extractGroupByValues(chartData, groupByKey);
|
|
print('groupByValues $groupByValues');
|
|
|
|
switch (chartData['chart_type_json']['chart_type']) {
|
|
// case 'stacked_bar':
|
|
// String chartTitle =
|
|
// capitalizeAndSplit(chartData['chart_heading'] ?? '');
|
|
// // Define a list of colors
|
|
// final List<Color> uniqueColors = [
|
|
// Color(0xFF648CBA),
|
|
// Color(0xFF90B0D5),
|
|
// Color(0xFF98BCE5),
|
|
// Color(0xFFA7B5C5),
|
|
// Color(0xFFBED3EC),
|
|
// Color(0xFFD4E3F4),
|
|
// ];
|
|
// return SfCartesianChart(
|
|
// primaryXAxis: CategoryAxis(),
|
|
// title: ChartTitle(text: chartData['chart_heading']),
|
|
// legend: Legend(
|
|
// isVisible: true,
|
|
// position: LegendPosition.bottom,
|
|
// overflowMode: LegendItemOverflowMode.scroll,
|
|
// ),
|
|
// tooltipBehavior: TooltipBehavior(
|
|
// enable: true, // Enable tooltips
|
|
// format: 'point.x : point.y', // Custom tooltip format
|
|
// ),
|
|
// series: <StackedBarSeries<ChartData, String>>[
|
|
// for (int i = 0; i < groupByValues.length; i++)
|
|
// StackedBarSeries<ChartData, String>(
|
|
// dataSource: parseStackedBarChartData(
|
|
// chartData, groupByKey, groupByValues.elementAt(i)),
|
|
// xValueMapper: (ChartData data, _) => data.x ?? '',
|
|
// yValueMapper: (ChartData data, _) => data.y,
|
|
// name: groupByValues.elementAt(i),
|
|
// color: uniqueColors[i % uniqueColors.length],
|
|
// enableTooltip: true,
|
|
// ),
|
|
// ],
|
|
// );
|
|
// case 'stacked_column':
|
|
// String chartTitle =
|
|
// capitalizeAndSplit(chartData['chart_heading'] ?? '');
|
|
// // Define a list of colors
|
|
// final List<Color> uniqueColors = [
|
|
// Color(0xFF648CBA),
|
|
// Color(0xFF90B0D5),
|
|
// Color(0xFF98BCE5),
|
|
// Color(0xFFA7B5C5),
|
|
// Color(0xFFBED3EC),
|
|
// Color(0xFFD4E3F4),
|
|
// ];
|
|
// return SfCartesianChart(
|
|
// primaryXAxis: CategoryAxis(),
|
|
// title: ChartTitle(text: chartData['chart_heading']),
|
|
// legend: Legend(
|
|
// isVisible: true,
|
|
// position: LegendPosition.bottom,
|
|
// overflowMode: LegendItemOverflowMode.scroll,
|
|
// ),
|
|
// tooltipBehavior: TooltipBehavior(
|
|
// enable: true, // Enable tooltips
|
|
// format: 'point.x : point.y', // Custom tooltip format
|
|
// ),
|
|
// series: <CartesianSeries<ChartData, String>>[
|
|
// for (int i = 0; i < groupByValues.length; i++)
|
|
// StackedColumnSeries<ChartData, String>(
|
|
// dataSource: parseStackedBarChartData(
|
|
// chartData, groupByKey, groupByValues.elementAt(i)),
|
|
// xValueMapper: (ChartData data, _) => data.x ?? '',
|
|
// yValueMapper: (ChartData data, _) => data.y,
|
|
// name: groupByValues.elementAt(i),
|
|
// color: uniqueColors[i % uniqueColors.length],
|
|
// enableTooltip: true,
|
|
// ),
|
|
// ],
|
|
// );
|
|
case 'column_chart': // Case 3 for fl_chart column chart
|
|
return BarChart(
|
|
BarChartData(
|
|
gridData: FlGridData(show: false),
|
|
titlesData: FlTitlesData(show: true),
|
|
borderData: FlBorderData(show: false),
|
|
barGroups: parseColumnChartData(chartData),
|
|
),
|
|
);
|
|
case 'pie_chart':
|
|
double totalValue = chartData['response'].map<double>((entry) {
|
|
var value = entry['ObsValue']['Value'];
|
|
// print('Processing value: $value, type: ${value.runtimeType}');
|
|
return (value is num)
|
|
? value.toDouble()
|
|
: value is String
|
|
? double.tryParse(value) ?? 0.0
|
|
: 0.0;
|
|
}).fold(0.0, (prev, element) => prev + element);
|
|
|
|
ValueNotifier<int?> touchedIndex = ValueNotifier(null);
|
|
|
|
return Column(
|
|
children: [
|
|
Text(
|
|
chartData['chart_heading'] ??
|
|
'Pie Chart', // Chart title from data
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 14, fontWeight: FontWeight.w400),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
SizedBox(height: 15),
|
|
Text(
|
|
chartData['chart_sub_heading'] ?? '',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 13, fontWeight: FontWeight.w300),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
SizedBox(height: 70),
|
|
Expanded(
|
|
child: ValueListenableBuilder<int?>(
|
|
valueListenable: touchedIndex,
|
|
builder: (context, value, child) {
|
|
return PieChart(
|
|
PieChartData(
|
|
sections: parsePieChartData(
|
|
chartData,
|
|
totalValue,
|
|
touchedIndex.value,context
|
|
),
|
|
borderData: FlBorderData(show: false),
|
|
sectionsSpace: 2,
|
|
centerSpaceRadius: 50,
|
|
pieTouchData: PieTouchData(
|
|
touchCallback: (FlTouchEvent event, pieTouchResponse) {
|
|
if (pieTouchResponse?.touchedSection != null &&
|
|
event is! FlTapUpEvent) {
|
|
touchedIndex.value = pieTouchResponse!
|
|
.touchedSection!.touchedSectionIndex;
|
|
} else {
|
|
touchedIndex.value =
|
|
null; // Reset when not touching
|
|
}
|
|
},
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
SizedBox(height: 55),
|
|
Expanded(
|
|
// child: SingleChildScrollView(
|
|
// scrollDirection: Axis.horizontal,
|
|
//
|
|
|
|
// child: SingleChildScrollView(
|
|
// scrollDirection: Axis.vertical,
|
|
child: Center(
|
|
child: Container(
|
|
width: double.infinity,
|
|
constraints: BoxConstraints(
|
|
minHeight: 3,
|
|
), // Allow dynamic height
|
|
child: Padding(
|
|
padding: const EdgeInsets.only(
|
|
left: 2.0,
|
|
right: 2.0,
|
|
bottom: 8.0,
|
|
top: 30,
|
|
),
|
|
child: Column(
|
|
// Change Row to Column
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children:
|
|
generateIndicators(chartData, totalValue, context),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
// ),
|
|
],
|
|
);
|
|
case 'fl_stacked_bar':
|
|
// Divide groupByValuesList into chunks of 5 items per row
|
|
List<String> groupByValuesList = groupByValues.toList();
|
|
int chunkSize = 5;
|
|
List<List<String>> chunkedGroupByValues = [];
|
|
print('flStackedBar1');
|
|
for (int i = 0; i < groupByValuesList.length; i += chunkSize) {
|
|
chunkedGroupByValues.add(
|
|
groupByValuesList.sublist(
|
|
i,
|
|
i + chunkSize > groupByValuesList.length
|
|
? groupByValuesList.length
|
|
: i + chunkSize,
|
|
),
|
|
);
|
|
}
|
|
return Column(
|
|
children: [
|
|
Text(
|
|
chartData['chart_heading'] ?? '',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 14, fontWeight: FontWeight.w400),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
SizedBox(height: 5),
|
|
Text(
|
|
chartData['chart_sub_heading'] ?? '',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 13, fontWeight: FontWeight.w300),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
SizedBox(height: 15),
|
|
AspectRatio(
|
|
aspectRatio: 1.5,
|
|
child: BarChart(
|
|
BarChartData(
|
|
alignment: BarChartAlignment.spaceEvenly,
|
|
barTouchData: BarTouchData(
|
|
touchTooltipData: BarTouchTooltipData(
|
|
// tooltipBgColor: Colors.black.withOpacity(0.8),
|
|
fitInsideHorizontally: true,
|
|
fitInsideVertically: true,
|
|
// tooltipPadding: const EdgeInsets.all(8),
|
|
tooltipPadding: const EdgeInsets.symmetric(
|
|
horizontal: 4,
|
|
vertical: 8,
|
|
), // Optional
|
|
tooltipHorizontalAlignment: FLHorizontalAlignment.left,
|
|
tooltipMargin: 16,
|
|
getTooltipColor: (colorMap) => Colors.black,
|
|
getTooltipItem: (
|
|
groupData,
|
|
groupIndex,
|
|
rodData,
|
|
rodIndex,
|
|
) {
|
|
// Get the list of group names dynamically
|
|
|
|
List<String> groupNames = [];
|
|
for (var entry in chartData['response']) {
|
|
String groupValue = entry['ObsKey'][groupByKey];
|
|
if (!groupNames.contains(groupValue)) {
|
|
groupNames.add(groupValue);
|
|
}
|
|
}
|
|
// Accessing the stacked rod items and calculating the tooltip text
|
|
List<BarChartRodStackItem> rodStackItems =
|
|
rodData.rodStackItems;
|
|
List<TextSpan> tooltipTextSpans = [];
|
|
|
|
for (int i = 0; i < rodStackItems.length; i++) {
|
|
double fromY = rodStackItems[i].fromY;
|
|
double toY = rodStackItems[i].toY;
|
|
double value = toY - fromY;
|
|
String groupName = groupNames[i];
|
|
|
|
String formattedValue;
|
|
if (value >= 1000000) {
|
|
formattedValue =
|
|
(value / 1000000).toStringAsFixed(1) + 'M';
|
|
} else if (value >= 1000) {
|
|
formattedValue =
|
|
(value / 1000).toStringAsFixed(1) + 'K';
|
|
} else {
|
|
formattedValue = value.toStringAsFixed(
|
|
0,
|
|
); // for values smaller than 1000
|
|
}
|
|
// Get the color for the current group
|
|
Color groupColor = _getColorForGroup(
|
|
i,
|
|
); // Replace with your color logic
|
|
|
|
// Add a TextSpan for the colored circle and the group name with value
|
|
tooltipTextSpans.addAll([
|
|
TextSpan(
|
|
text: ' ● ',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),
|
|
color: groupColor,
|
|
fontSize: 14,
|
|
), // Circle color
|
|
),
|
|
TextSpan(
|
|
text: '$groupName - $formattedValue\n',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),
|
|
color: Colors.white,
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
]);
|
|
}
|
|
|
|
return BarTooltipItem(
|
|
'',
|
|
TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),color: Colors.white, fontSize: 12),
|
|
children: tooltipTextSpans,
|
|
textAlign: TextAlign.left,
|
|
);
|
|
},
|
|
),
|
|
handleBuiltInTouches: true, // Enable built-in touch events
|
|
),
|
|
titlesData: FlTitlesData(
|
|
show: true,
|
|
bottomTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
reservedSize: 28,
|
|
getTitlesWidget: (double value, TitleMeta meta) {
|
|
return _generateXTitles(chartData,context)[value.toInt()];
|
|
},
|
|
),
|
|
),
|
|
leftTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
reservedSize: 40,
|
|
getTitlesWidget: _generateLeftTitles,
|
|
),
|
|
),
|
|
topTitles: AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false),
|
|
),
|
|
rightTitles: AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false),
|
|
),
|
|
),
|
|
gridData: FlGridData(show: false),
|
|
borderData: FlBorderData(show: false),
|
|
barGroups: _generateBarGroups(context, chartData, groupByKey),
|
|
),
|
|
),
|
|
),
|
|
// Legend
|
|
Padding(
|
|
padding: const EdgeInsets.all(5.0),
|
|
child: Wrap(
|
|
spacing: 10, // Horizontal spacing between items
|
|
runSpacing: 5, // Vertical spacing between rows
|
|
children: chunkedGroupByValues.expand((chunk) {
|
|
return chunk.map((group) {
|
|
List<String> groupByValuesList = groupByValues.toList();
|
|
int index = groupByValuesList.indexOf(group);
|
|
Color groupColor = _getColorForGroup(index);
|
|
|
|
return Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(
|
|
width: 10,
|
|
height: 10,
|
|
decoration: BoxDecoration(
|
|
color: groupColor,
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
SizedBox(width: 5),
|
|
Tooltip(
|
|
message: group,
|
|
waitDuration: Duration(milliseconds: 500),
|
|
showDuration: Duration(seconds: 2),
|
|
decoration: BoxDecoration(
|
|
color: Colors.black,
|
|
// color: Colors.blueGrey[900],
|
|
borderRadius: BorderRadius.circular(4),
|
|
),
|
|
textStyle: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),color: Colors.white),
|
|
child: Text(
|
|
group,
|
|
// group.length > 10
|
|
// ? '${group.substring(0, 10)}...'
|
|
// : group,
|
|
// overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 11),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}).toList();
|
|
}).toList(),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
case 'line_trend':
|
|
final List<Color> uniqueColorsLine_trend_2 = [
|
|
Color(0xFF6097CD),
|
|
Color(0xFFD086A7),
|
|
Color(0xFF98BCE5),
|
|
Color(0xFFA7B5C5),
|
|
Color(0xFFBED3EC),
|
|
Color(0xFFD4E3F4),
|
|
];
|
|
Map<String, Color> groupColorMap = {};
|
|
int colorIndex = 0;
|
|
|
|
// for (String group in groupByValues) {
|
|
// // groupColorMap[group] = uniqueColorsLine_trend_2[
|
|
// // colorIndex % uniqueColorsLine_trend_2.length];
|
|
// groupColorMap[group] = uniqueColors[colorIndex % uniqueColors.length];
|
|
// // groupColorMap[group] = adjustColorlineTrend(bodyColor, colorIndex);
|
|
// colorIndex++;
|
|
// }
|
|
print('LnTrnd1');
|
|
|
|
// Extract all years from the chart data
|
|
List<int> years = (chartData['response'] as List<dynamic>)
|
|
.map<int>(
|
|
(entry) =>
|
|
int.tryParse(entry['ObsKey']['TIME_PERIOD'] ?? '0') ?? 0,
|
|
)
|
|
.toList();
|
|
// Sort in ascending order
|
|
years.sort();
|
|
|
|
// Sort in descending order
|
|
// years.sort((a, b) => b.compareTo(a));
|
|
|
|
print(years);
|
|
|
|
print('years $years');
|
|
|
|
if (years.isEmpty) {
|
|
// Return an empty chart if no data
|
|
return LineChart(
|
|
LineChartData(
|
|
titlesData: FlTitlesData(show: false),
|
|
lineBarsData: [],
|
|
),
|
|
);
|
|
}
|
|
|
|
print('LnTrnd1.2');
|
|
|
|
// Find the maximum year and calculate the range for the last 5 years
|
|
int maxYear = years.reduce((a, b) => a > b ? a : b);
|
|
int minYear = maxYear - 5;
|
|
|
|
// Filter chart data to only include entries within the last 5 years
|
|
List<dynamic> filteredData =
|
|
(chartData['response'] as List<dynamic>).where((entry) {
|
|
int year = int.tryParse(entry['ObsKey']['TIME_PERIOD'] ?? '0') ?? 0;
|
|
return year >= minYear && year <= maxYear;
|
|
}).toList();
|
|
print('LnTrnd2 $filteredData');
|
|
|
|
// Set<double> uniqueXValues = filteredData
|
|
// .map<double>(
|
|
// (entry) => double.parse(entry['ObsKey']['TIME_PERIOD']))
|
|
// .toSet();
|
|
|
|
Set<String> uniqueXValues = filteredData.map<String>((entry) {
|
|
String? timePeriod =
|
|
entry['ObsKey']['TIME_PERIOD']; // Nullable String
|
|
print('TIME_PERIOD- $timePeriod');
|
|
|
|
if (timePeriod == null) {
|
|
print('TIME_PERIOD is null');
|
|
return ''; // Or handle the null case appropriately
|
|
}
|
|
|
|
// Check format using regex
|
|
if (RegExp(r'^\d{4}$').hasMatch(timePeriod)) {
|
|
print('Year format detected: $timePeriod');
|
|
return timePeriod; // Year only
|
|
} else if (RegExp(r'^\d{4}-\d{2}$').hasMatch(timePeriod)) {
|
|
print('Year-Month format detected: $timePeriod');
|
|
return timePeriod; // Year-Month
|
|
} else if (RegExp(r'^\d{4}-[A-Za-z]{3}$').hasMatch(timePeriod)) {
|
|
print('Year-MonthAbbr format detected: $timePeriod');
|
|
return timePeriod; // Year-MonthAbbr
|
|
} else {
|
|
print('Unknown format: $timePeriod');
|
|
return timePeriod; // Keep it as is
|
|
}
|
|
}).toSet();
|
|
|
|
print("Unique X Values: $uniqueXValues");
|
|
|
|
double parseTimePeriod(String timePeriod) {
|
|
// Match formats
|
|
if (RegExp(r'^\d{4}$').hasMatch(timePeriod)) {
|
|
return double.parse(timePeriod); // Year-only (2019 → 2019.0)
|
|
} else if (RegExp(r'^\d{4}-\d{2}$').hasMatch(timePeriod)) {
|
|
return double.parse(
|
|
timePeriod.replaceAll('-', '.'),
|
|
); // Year-Month (2019-11 → 2019.11)
|
|
} else if (RegExp(r'^\d{4}-[A-Za-z]{3}$').hasMatch(timePeriod)) {
|
|
// Year-MonthAbbr (2019-Nov)
|
|
Map<String, int> monthMap = {
|
|
'Jan': 1,
|
|
'Feb': 2,
|
|
'Mar': 3,
|
|
'Apr': 4,
|
|
'May': 5,
|
|
'Jun': 6,
|
|
'Jul': 7,
|
|
'Aug': 8,
|
|
'Sep': 9,
|
|
'Oct': 10,
|
|
'Nov': 11,
|
|
'Dec': 12,
|
|
};
|
|
|
|
List<String> parts = timePeriod.split('-');
|
|
int month =
|
|
monthMap[parts[1]] ?? 1; // Default to January if unknown
|
|
return double.parse(
|
|
'${parts[0]}.$month',
|
|
); // Convert to format (2019-Nov → 2019.11)
|
|
}
|
|
|
|
throw FormatException("Invalid TIME_PERIOD format: $timePeriod");
|
|
}
|
|
|
|
Set<double> uniqueXValuesProcessed = uniqueXValues
|
|
.where((value) => value.isNotEmpty) // Remove any empty strings
|
|
.map(parseTimePeriod)
|
|
.toSet();
|
|
print('Processed X Values: $uniqueXValuesProcessed');
|
|
|
|
print('LnTrnd2.1');
|
|
|
|
var chartBarColors = chartData['chart_bar_color'] ?? {};
|
|
Map<String, String> barColorsMap = {};
|
|
chartBarColors.forEach((key, value) {
|
|
barColorsMap[key] = value.toString(); // Ensure values are strings
|
|
});
|
|
bool hasBarColors = barColorsMap.isNotEmpty;
|
|
|
|
var chartBarColorsRaw = chartData['chart_bar_color'] ?? {};
|
|
|
|
// Convert LinkedMap<dynamic, dynamic> to Map<String, String>
|
|
Map<String, String> chartBarColrs = Map<String, String>.from(
|
|
chartBarColorsRaw,
|
|
);
|
|
|
|
// Now map to Color
|
|
Map<String, Color> parsedChartBarColors = chartBarColrs.map((
|
|
key,
|
|
value,
|
|
) {
|
|
return MapEntry(key, _hexToColor(value));
|
|
});
|
|
|
|
print('parsedChartBarColors1 - $parsedChartBarColors');
|
|
|
|
for (String group in groupByValues) {
|
|
if (hasBarColors && chartData['dataset'] == 'population') {
|
|
groupColorMap[group] =
|
|
parsedChartBarColors[group]!; // Directly assign as Color
|
|
} else {
|
|
groupColorMap[group] =
|
|
uniqueColors[colorIndex % uniqueColors.length];
|
|
}
|
|
colorIndex++;
|
|
}
|
|
|
|
// Generate line bars for the chart
|
|
List<LineChartBarData> lineBars = lineBarsData(
|
|
filteredData,
|
|
groupByValues,
|
|
groupByKey,
|
|
parsedChartBarColors,
|
|
);
|
|
|
|
print('LnTrnd3');
|
|
|
|
return Column(
|
|
children: [
|
|
Text(
|
|
chartData['chart_heading'] ?? '',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 14, fontWeight: FontWeight.w400),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
SizedBox(height: 5),
|
|
Text(
|
|
chartData['chart_sub_heading'] ?? '',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 13, fontWeight: FontWeight.w300),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
SizedBox(height: 10),
|
|
// Chart
|
|
Expanded(
|
|
child: LineChart(
|
|
LineChartData(
|
|
// showingTooltipIndicators: showingTooltipOnSpots.map((index) {
|
|
// return ShowingTooltipIndicators([
|
|
// LineBarSpot(
|
|
// tooltipsOnBar,
|
|
// lineBarsData.indexOf(tooltipsOnBar),
|
|
// tooltipsOnBar.spots[index],
|
|
// ),
|
|
// ]);
|
|
// }).toList(),
|
|
lineTouchData: lineTouchData1(context),
|
|
gridData: gridData(),
|
|
// titlesData: titlesData1(uniqueXValues),
|
|
titlesData: titlesData1(uniqueXValuesProcessed,context),
|
|
borderData: borderData(),
|
|
lineBarsData: lineBars,
|
|
// minY: 10000,
|
|
// minX: uniqueXValues.reduce((a, b) => a < b ? a : b),
|
|
// maxX: uniqueXValues.reduce((a, b) => a > b ? a : b),
|
|
// minX: uniqueXValuesProcessed.reduce((a, b) => a < b ? a : b),
|
|
// maxX: uniqueXValuesProcessed.reduce((a, b) => a > b ? a : b),
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.all(8.0),
|
|
child: Wrap(
|
|
spacing: 12,
|
|
runSpacing: 8,
|
|
children: groupByValues.map((group) {
|
|
return Row(
|
|
mainAxisSize: MainAxisSize.max, // Take full width
|
|
mainAxisAlignment: MainAxisAlignment.start, // Align to left
|
|
children: [
|
|
Container(
|
|
width: 12,
|
|
height: 12,
|
|
color: groupColorMap[group],
|
|
),
|
|
SizedBox(width: 6),
|
|
Text(
|
|
group,
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}).toList(),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
case 'line_trend_population':
|
|
final List<Color> uniqueColorsLine_trend_2 = [
|
|
Color(0xFF6097CD),
|
|
Color(0xFFD086A7),
|
|
];
|
|
Set<int> selectedYears = {1970, 1980, 1990, 2000, 2010, 2020};
|
|
Map<String, Color> groupColorMap = {};
|
|
int colorIndex = 0;
|
|
// for (String group in groupByValues) {
|
|
// // groupColorMap[group] = uniqueColors[colorIndex % uniqueColors.length];
|
|
// groupColorMap[group] = uniqueColorsLine_trend_2[
|
|
// colorIndex % uniqueColorsLine_trend_2.length];
|
|
// colorIndex++;
|
|
// }
|
|
|
|
// Extract all years from the chart data
|
|
List<int> years = (chartData['response'] as List<dynamic>)
|
|
.map<int>(
|
|
(entry) =>
|
|
int.tryParse(entry['ObsKey']['TIME_PERIOD'] ?? '0') ?? 0,
|
|
)
|
|
.toList();
|
|
|
|
if (years.isEmpty) {
|
|
// Return an empty chart if no data
|
|
return LineChart(
|
|
LineChartData(
|
|
titlesData: FlTitlesData(show: false),
|
|
lineBarsData: [],
|
|
),
|
|
);
|
|
}
|
|
|
|
if (years.isNotEmpty) {
|
|
// Find the latest available year
|
|
int latestYear = years.reduce((a, b) => a > b ? a : b);
|
|
selectedYears.add(latestYear); // Include the latest year in selection
|
|
}
|
|
|
|
// Filter chart data to include only the selected years
|
|
List<dynamic> filteredData =
|
|
(chartData['response'] as List<dynamic>).where((entry) {
|
|
int year = int.tryParse(entry['ObsKey']['TIME_PERIOD'] ?? '0') ?? 0;
|
|
return selectedYears.contains(year);
|
|
}).toList();
|
|
|
|
Set<double> uniqueXValues = filteredData
|
|
.map<double>(
|
|
(entry) => double.parse(entry['ObsKey']['TIME_PERIOD']),
|
|
)
|
|
.toSet();
|
|
|
|
var chartBarColors = chartData['chart_bar_color'] ?? {};
|
|
Map<String, String> barColorsMap = {};
|
|
|
|
chartBarColors.forEach((key, value) {
|
|
barColorsMap[key] = value.toString(); // Ensure values are strings
|
|
});
|
|
bool hasBarColors = barColorsMap.isNotEmpty;
|
|
// var chartBarColorsRaw = chartData['chart_bar_color'] ?? {};
|
|
// // Convert LinkedMap<dynamic, dynamic> to Map<String, String>
|
|
// Map<String, String> chartBarColrs =
|
|
// Map<String, String>.from(chartBarColorsRaw);
|
|
// // Now map to Color
|
|
// Map<String, Color> parsedChartBarColors =
|
|
// chartBarColrs.map((key, value) {
|
|
// return MapEntry(key, _hexToColor(value));
|
|
// });
|
|
//
|
|
|
|
List<dynamic> keys = chartBarColors['key'] ?? [];
|
|
List<dynamic> colors = chartBarColors['color'] ?? [];
|
|
|
|
print('RT1keys - $keys');
|
|
print('RT1colors - $colors');
|
|
|
|
// Convert to a map for easy lookup
|
|
Map<String, Color> parsedChartBarColors = {};
|
|
for (int i = 0; i < keys.length; i++) {
|
|
parsedChartBarColors[keys[i].toString()] = _hexToColor(
|
|
colors[i].toString(),
|
|
);
|
|
}
|
|
print('RTLinr1 - $parsedChartBarColors');
|
|
|
|
for (String group in groupByValues) {
|
|
if (parsedChartBarColors.containsKey(group)) {
|
|
groupColorMap[group] =
|
|
parsedChartBarColors[group]!; // Directly assign as Color
|
|
} else {
|
|
groupColorMap[group] =
|
|
uniqueColors[colorIndex % uniqueColors.length];
|
|
}
|
|
colorIndex++;
|
|
}
|
|
|
|
// Generate line bars for the chart
|
|
List<LineChartBarData> lineBars = lineBarsData(
|
|
filteredData,
|
|
groupByValues,
|
|
groupByKey,
|
|
parsedChartBarColors,
|
|
);
|
|
|
|
return Column(
|
|
children: [
|
|
Text(
|
|
chartData['chart_heading'] ?? '',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 14, fontWeight: FontWeight.w400),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
SizedBox(height: 5),
|
|
Text(
|
|
chartData['chart_sub_heading'] ?? '',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 13, fontWeight: FontWeight.w300),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
SizedBox(height: 10),
|
|
|
|
Expanded(
|
|
child: SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal, // Enable horizontal scrolling
|
|
padding: const EdgeInsets.only(right: 40, top: 10),
|
|
child: SizedBox(
|
|
width: (uniqueXValues.length * 50) +
|
|
50, // Adjust width dynamically
|
|
child: LineChart(
|
|
LineChartData(
|
|
lineTouchData: lineTouchData1(context),
|
|
gridData: gridData(),
|
|
titlesData: titlesData1(uniqueXValues,context),
|
|
borderData: borderData(),
|
|
lineBarsData: lineBars,
|
|
minX: uniqueXValues.reduce((a, b) => a < b ? a : b),
|
|
maxX: uniqueXValues.reduce((a, b) => a > b ? a : b),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.all(8.0),
|
|
child: Wrap(
|
|
spacing: 12,
|
|
runSpacing: 8,
|
|
children: groupByValues.map((group) {
|
|
return Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(
|
|
width: 12,
|
|
height: 12,
|
|
color: groupColorMap[group],
|
|
),
|
|
SizedBox(width: 6),
|
|
Text(group, style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 14)),
|
|
],
|
|
);
|
|
}).toList(),
|
|
),
|
|
),
|
|
// Chart
|
|
],
|
|
);
|
|
case 'line_trend_2':
|
|
// final List<Color> uniqueColorsLine_trend_2 = [
|
|
// Color(0xFF6097CD),
|
|
// Color(0xFFD086A7),
|
|
// Color(0xFF98BCE5),
|
|
// Color(0xFFA7B5C5),
|
|
// Color(0xFFBED3EC),
|
|
// Color(0xFFD4E3F4),
|
|
// ];
|
|
Set<int> selectedYears = {1970, 1980, 1990, 2000, 2010, 2020};
|
|
Map<String, Color> groupColorMap = {};
|
|
int colorIndex = 0;
|
|
// for (String group in groupByValues) {
|
|
// // groupColorMap[group] = uniqueColorsLine_trend_2[
|
|
// // colorIndex % uniqueColorsLine_trend_2.length];
|
|
// groupColorMap[group] = uniqueColors[colorIndex % uniqueColors.length];
|
|
// // groupColorMap[group] = adjustColorlineTrend(bodyColor, colorIndex);
|
|
// colorIndex++;
|
|
// }
|
|
|
|
// Extract all years from the chart data
|
|
List<int> years = (chartData['response'] as List<dynamic>)
|
|
.map<int>(
|
|
(entry) =>
|
|
int.tryParse(entry['ObsKey']['TIME_PERIOD'] ?? '0') ?? 0,
|
|
)
|
|
.toList();
|
|
|
|
if (years.isEmpty) {
|
|
// Return an empty chart if no data
|
|
return LineChart(
|
|
LineChartData(
|
|
titlesData: FlTitlesData(show: false),
|
|
lineBarsData: [],
|
|
),
|
|
);
|
|
}
|
|
|
|
if (years.isNotEmpty) {
|
|
// Find the latest available year
|
|
int latestYear = years.reduce((a, b) => a > b ? a : b);
|
|
selectedYears.add(latestYear); // Include the latest year in selection
|
|
}
|
|
|
|
// Filter chart data to include only the selected years
|
|
List<dynamic> filteredData =
|
|
(chartData['response'] as List<dynamic>).where((entry) {
|
|
int year = int.tryParse(entry['ObsKey']['TIME_PERIOD'] ?? '0') ?? 0;
|
|
return selectedYears.contains(year);
|
|
}).toList();
|
|
|
|
Set<double> uniqueXValues = filteredData
|
|
.map<double>(
|
|
(entry) => double.parse(entry['ObsKey']['TIME_PERIOD']),
|
|
)
|
|
.toSet();
|
|
|
|
print('uniqueXValuesLineTrend2- $uniqueXValues');
|
|
|
|
var chartBarColors = chartData['chart_bar_color'] ?? {};
|
|
Map<String, String> barColorsMap = {};
|
|
chartBarColors.forEach((key, value) {
|
|
barColorsMap[key] = value.toString(); // Ensure values are strings
|
|
});
|
|
bool hasBarColors = barColorsMap.isNotEmpty;
|
|
|
|
var chartBarColorsRaw = chartData['chart_bar_color'] ?? {};
|
|
|
|
// Convert LinkedMap<dynamic, dynamic> to Map<String, String>
|
|
Map<String, String> chartBarColrs = Map<String, String>.from(
|
|
chartBarColorsRaw,
|
|
);
|
|
|
|
// Now map to Color
|
|
Map<String, Color> parsedChartBarColors = chartBarColrs.map((
|
|
key,
|
|
value,
|
|
) {
|
|
return MapEntry(key, _hexToColor(value));
|
|
});
|
|
|
|
for (String group in groupByValues) {
|
|
if (parsedChartBarColors.containsKey(group)) {
|
|
groupColorMap[group] =
|
|
parsedChartBarColors[group]!; // Directly assign as Color
|
|
} else {
|
|
groupColorMap[group] =
|
|
uniqueColors[colorIndex % uniqueColors.length];
|
|
}
|
|
colorIndex++;
|
|
}
|
|
|
|
// Generate line bars for the chart
|
|
List<LineChartBarData> lineBars = lineBarsData2(filteredData);
|
|
|
|
return Column(
|
|
children: [
|
|
Text(
|
|
chartData['chart_heading'] ?? '',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 14, fontWeight: FontWeight.w400),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
SizedBox(height: 5),
|
|
Text(
|
|
'',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 13, fontWeight: FontWeight.w300),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
SizedBox(height: 10),
|
|
// Chart
|
|
Expanded(
|
|
child: SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal, // Enable horizontal scrolling
|
|
padding: const EdgeInsets.only(right: 40, top: 20),
|
|
child: SizedBox(
|
|
width: (uniqueXValues.length * 50) +
|
|
50, // Adjust width dynamically
|
|
child: LineChart(
|
|
LineChartData(
|
|
lineTouchData: lineTouchData1(context),
|
|
gridData: gridData(),
|
|
titlesData: titlesData1(uniqueXValues,context),
|
|
borderData: borderData(),
|
|
lineBarsData: lineBars,
|
|
minX: uniqueXValues.reduce((a, b) => a < b ? a : b),
|
|
maxX: uniqueXValues.reduce((a, b) => a > b ? a : b),
|
|
minY: 0,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
case 'bar_chart':
|
|
// Extract groupBy values and their corresponding y-axis values
|
|
List<String> xAxisData = [];
|
|
List<double> yAxisData = [];
|
|
List<String> yAxisLabels = [];
|
|
|
|
var xadditionalgrp = chartData['chart_type_json']['additional_x_group'];
|
|
var chartConversion = chartData['chart_type_json']['conversion'];
|
|
var number_format = chartData['chart_type_json']['number_format'];
|
|
|
|
print('xadditionalgrp-$xadditionalgrp');
|
|
|
|
for (var entry in chartData['response']) {
|
|
var xValue = entry['ObsKey'][groupByKey];
|
|
var xTimePeriod = entry['ObsKey']['TIME_PERIOD'];
|
|
var unitMsr = entry['ObsKey']['UNIT_MEASURE'];
|
|
var yValue = entry['ObsValue']['Value'];
|
|
var xadditionalgroup =
|
|
chartData['chart_type_json']['additional_x_group'];
|
|
|
|
print('chartData response: ${chartData['response']}');
|
|
|
|
print('chartConversion: $chartConversion');
|
|
print('number_format: $number_format');
|
|
print('xValue-$xValue');
|
|
print('Xadditionalt-$xTimePeriod');
|
|
print('xadditionalgroup-$xadditionalgroup');
|
|
print('yValue-$yValue');
|
|
print('unitMsr-$unitMsr');
|
|
|
|
//Handled For Quarter Chart Case (sort by Year and Quarter)
|
|
if (xadditionalgrp == 'TIME_PERIOD') {
|
|
chartData['response'].sort((a, b) {
|
|
// Convert TIME_PERIOD to int for proper sorting
|
|
int timeA =
|
|
int.tryParse(a['ObsKey']['TIME_PERIOD'].toString()) ?? 0;
|
|
int timeB =
|
|
int.tryParse(b['ObsKey']['TIME_PERIOD'].toString()) ?? 0;
|
|
|
|
// Extract QUARTER and convert "Q1", "Q2", etc. to numeric values
|
|
int quarterA = int.tryParse(
|
|
a['ObsKey']['QUARTER'].toString().replaceAll('Q', ''),
|
|
) ??
|
|
0;
|
|
int quarterB = int.tryParse(
|
|
b['ObsKey']['QUARTER'].toString().replaceAll('Q', ''),
|
|
) ??
|
|
0;
|
|
|
|
// First, sort by TIME_PERIOD. If equal, sort by QUARTER
|
|
if (timeA != timeB) {
|
|
return timeA.compareTo(timeB);
|
|
} else {
|
|
return quarterA.compareTo(quarterB);
|
|
}
|
|
});
|
|
}
|
|
|
|
print('chartData response sort: ${chartData['response']}');
|
|
|
|
// if (xValue != null && yValue != null) {
|
|
// xAxisData.add(xValue.toString());
|
|
// yAxisData.add(double.tryParse(yValue.toString()) ?? 0.0);
|
|
// }
|
|
// if (xValue != null && yValue != null) {
|
|
// // Check if additional_x_group is "Timeperiod" and concatenate
|
|
// String xLabel = xValue.toString();
|
|
// if (xadditionalgroup == 'TIME_PERIOD' && xTimePeriod != null) {
|
|
// xLabel = '$xTimePeriod-$xValue'; // Format: Label (TimePeriod)
|
|
// }
|
|
//
|
|
// xAxisData.add(xLabel);
|
|
// yAxisData.add(double.tryParse(yValue.toString()) ?? 0.0);
|
|
// // yAxisLabels.add(unitMsr ?? '');
|
|
// }
|
|
}
|
|
for (var entry in chartData['response']) {
|
|
var xValue = entry['ObsKey'][groupByKey];
|
|
var xTimePeriod = entry['ObsKey']['TIME_PERIOD'];
|
|
var yValue = entry['ObsValue']['Value'];
|
|
var xadditionalgroup =
|
|
chartData['chart_type_json']['additional_x_group'];
|
|
|
|
if (xValue != null) {
|
|
String xLabel = xValue.toString();
|
|
if (xadditionalgroup == 'TIME_PERIOD' && xTimePeriod != null) {
|
|
xLabel = '$xTimePeriod-$xValue'; // Format: Label (TimePeriod)
|
|
}
|
|
xAxisData.add(xLabel);
|
|
}
|
|
if (yValue != null) {
|
|
yAxisData.add(double.tryParse(yValue.toString()) ?? 0.0);
|
|
}
|
|
}
|
|
print('xAxisData $xAxisData');
|
|
print('yAxisData $yAxisData');
|
|
return Column(
|
|
children: [
|
|
Text(
|
|
chartData['chart_heading'] ?? '', // Chart title from data
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 14, fontWeight: FontWeight.w400),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
SizedBox(height: 5),
|
|
Text(
|
|
chartData['chart_sub_heading'] ?? '',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 13, fontWeight: FontWeight.w300),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
SizedBox(height: 10),
|
|
// Chart
|
|
Expanded(
|
|
child: LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
double chartWidth =
|
|
xAxisData.length * (40 + 10); // Compute chart width
|
|
double screenWidth = constraints.maxWidth;
|
|
|
|
print('length');
|
|
print(xAxisData.length);
|
|
|
|
return SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
physics: xAxisData.length == 5
|
|
? const NeverScrollableScrollPhysics() // Disable scrolling
|
|
: const AlwaysScrollableScrollPhysics(), // Enable scrolling
|
|
padding: const EdgeInsets.only(top: 10, left: 5),
|
|
child: ConstrainedBox(
|
|
constraints: BoxConstraints(
|
|
minWidth:
|
|
screenWidth, // Ensure it at least fills available width
|
|
maxWidth: chartWidth > screenWidth
|
|
? chartWidth
|
|
: screenWidth, // Prevent non-normalized constraints
|
|
),
|
|
child: Center(
|
|
child: SizedBox(
|
|
width: xAxisData.length *
|
|
(40 + 10), // Bar width + manual spacing
|
|
child: BarChart(
|
|
BarChartData(
|
|
alignment: BarChartAlignment.spaceAround,
|
|
maxY: yAxisData.isNotEmpty
|
|
? yAxisData.reduce(
|
|
(a, b) => a > b ? a : b,
|
|
) *
|
|
1.2
|
|
: 10,
|
|
// barTouchData: BarTouchData(
|
|
// enabled: true,
|
|
// touchCallback: (FlTouchEvent event, barTouchResponse) {
|
|
// if (!event.isInterestedForInteractions || barTouchResponse == null || barTouchResponse.spot == null) {
|
|
// return;
|
|
// }
|
|
// },
|
|
// touchTooltipData: BarTouchTooltipData(
|
|
// getTooltipColor: (group) => Colors.transparent,
|
|
// getTooltipItem: (group, groupIndex, rod, rodIndex) {
|
|
// if (rod.toY == 0) return null; // Hide for zero values
|
|
// return BarTooltipItem(
|
|
// formatNumber(rod.toY),
|
|
// TextStyle(color: Colors.black),
|
|
// );
|
|
// },
|
|
// ),
|
|
// ),
|
|
|
|
// barTouchData: BarTouchData(enabled: true),
|
|
barTouchData: BarTouchData(
|
|
enabled: false,
|
|
handleBuiltInTouches: false,
|
|
touchTooltipData: BarTouchTooltipData(
|
|
getTooltipColor: (group) =>
|
|
Colors.transparent,
|
|
// fitInsideHorizontally: true,
|
|
// fitInsideVertically: true,
|
|
// tooltipPadding: const EdgeInsets.all(8),
|
|
tooltipMargin: 1,
|
|
getTooltipItem: (
|
|
group,
|
|
groupIndex,
|
|
rod,
|
|
rodIndex,
|
|
) {
|
|
// String unitMsrLabel = yAxisLabels.isNotEmpty && groupIndex < yAxisLabels.length
|
|
// ? yAxisLabels[groupIndex]
|
|
// : '';
|
|
// if (rod.toY == 0) return null;
|
|
final originalValue = rod.toY == 0.1 ? 0.0 : rod.toY;
|
|
String displayValue;
|
|
if (originalValue == 0.0) {
|
|
displayValue = '0'; // 🔥 clean and simple
|
|
} else {
|
|
displayValue = (chartConversion != null &&
|
|
chartConversion.isNotEmpty &&
|
|
number_format != null &&
|
|
chartConversion.isNotEmpty)
|
|
? formatNumberConversion(
|
|
originalValue,
|
|
chartConversion,
|
|
number_format,
|
|
)
|
|
: formatNumber(originalValue);
|
|
}
|
|
|
|
return BarTooltipItem(
|
|
displayValue,
|
|
TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),
|
|
color: Colors.black,
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w400,
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
titlesData: FlTitlesData(
|
|
leftTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: false,
|
|
interval: (yAxisData.isNotEmpty
|
|
? yAxisData.reduce(
|
|
(a, b) => a > b ? a : b,
|
|
) /
|
|
5
|
|
: 1),
|
|
getTitlesWidget: (value, meta) {
|
|
return Padding(
|
|
padding: const EdgeInsets.only(
|
|
right: 8.0,
|
|
),
|
|
child: Text(
|
|
'${value.toInt()}',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
)),
|
|
),
|
|
);
|
|
},
|
|
reservedSize: 60,
|
|
),
|
|
),
|
|
bottomTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
interval: 1,
|
|
getTitlesWidget: (value, meta) {
|
|
if (value.toInt() < xAxisData.length) {
|
|
String title = xAxisData[value.toInt()];
|
|
String displayTitle = title.length > 10
|
|
? title.substring(0, 10) + '...'
|
|
: title;
|
|
print('barChartVALUECHECKTITLE $title');
|
|
print(
|
|
'barChartVALUECHECK $displayTitle');
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.only(
|
|
top: 8.0,
|
|
left: 75.0,
|
|
),
|
|
child: SizedBox(
|
|
width:
|
|
100, // Limit width to force wrapping
|
|
child: Transform.rotate(
|
|
// angle: -0.5,
|
|
angle: -1.5,
|
|
|
|
child: TooltipTheme(
|
|
data: TooltipThemeData(
|
|
decoration: BoxDecoration(
|
|
color: Colors
|
|
.black, // Change background color
|
|
// color: Colors.blueGrey[800], // Change background color
|
|
borderRadius:
|
|
BorderRadius.circular(
|
|
8,
|
|
), // Optional: rounded corners
|
|
),
|
|
textStyle: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),
|
|
color: Colors.white,
|
|
), // Change text color
|
|
),
|
|
child: Tooltip(
|
|
message: title,
|
|
child: Text(
|
|
// title,
|
|
displayTitle,
|
|
softWrap: true,
|
|
textAlign: TextAlign.right,
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),
|
|
fontSize: 10,
|
|
),
|
|
overflow:
|
|
TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
return Container();
|
|
},
|
|
reservedSize: 110,
|
|
),
|
|
),
|
|
topTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: false,
|
|
), // Hide top titles
|
|
),
|
|
rightTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: false,
|
|
), // Hide right titles
|
|
),
|
|
),
|
|
gridData: FlGridData(show: false),
|
|
borderData: FlBorderData(
|
|
show: true,
|
|
border: const Border(
|
|
// left: BorderSide(color: Colors.grey),
|
|
bottom: BorderSide(color: Colors.grey),
|
|
),
|
|
),
|
|
barGroups: List.generate(
|
|
xAxisData.length,
|
|
(index) {
|
|
final value = double.tryParse(yAxisData[index].toString()) ?? 0;
|
|
print('GGGGGG $value');
|
|
return BarChartGroupData(
|
|
x: index,
|
|
barsSpace: 10,
|
|
barRods: [
|
|
BarChartRodData(
|
|
toY: value == 0 ? 0.1 : value,
|
|
color: bodyColor,
|
|
borderRadius: BorderRadius.circular(4),
|
|
width: 20,
|
|
),
|
|
],
|
|
showingTooltipIndicators: [0],
|
|
);
|
|
},
|
|
),
|
|
// barGroups: List.generate(
|
|
// xAxisData.length,
|
|
// (index) => BarChartGroupData(
|
|
// x: index,
|
|
// barsSpace: 10,
|
|
// barRods: [
|
|
// BarChartRodData(
|
|
// // toY: yAxisData[index],
|
|
// toY: yAxisData[index] == 0
|
|
// ? 0.1
|
|
// : yAxisData[index],
|
|
// // toY: yAxisData[index] == 0
|
|
// // ? 0.001
|
|
// // : yAxisData[
|
|
// // index], // gives a slight visible bar
|
|
//
|
|
// // color: yAxisData[index] == 0
|
|
// // ? Colors.grey
|
|
// // : bodyColor,
|
|
// color: bodyColor,
|
|
// borderRadius: BorderRadius.circular(4),
|
|
// width: 20,
|
|
// ),
|
|
// ],
|
|
// showingTooltipIndicators: [0],
|
|
// ),
|
|
// ),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
);
|
|
case 'bar_chart_horizontal':
|
|
// Extract groupBy values and their corresponding y-axis values
|
|
List<String> xAxisData = [];
|
|
List<double> yAxisData = [];
|
|
List<Map<String, dynamic>> sortedData = [];
|
|
var chartConversion = chartData['chart_type_json']['conversion'];
|
|
var number_format = chartData['chart_type_json']['number_format'];
|
|
|
|
for (var entry in chartData['response']) {
|
|
String? timePeriod = entry['ObsKey']['TIME_PERIOD'];
|
|
if (timePeriod != null) {
|
|
// Check if it contains a month (i.e., has "-" and follows "YYYY-MM" format)
|
|
bool hasMonth = RegExp(r'^\d{4}-\d{2}$').hasMatch(timePeriod);
|
|
|
|
if (hasMonth) {
|
|
print('Yes-TIME_PERIOD: $timePeriod');
|
|
sortedData.add(entry);
|
|
} else {
|
|
print('No-TIME_PERIOD: $timePeriod');
|
|
}
|
|
}
|
|
}
|
|
// Sort the data based on year and month
|
|
sortedData.sort((a, b) {
|
|
String timeA = a['ObsKey']['TIME_PERIOD'];
|
|
String timeB = b['ObsKey']['TIME_PERIOD'];
|
|
|
|
return timeA.compareTo(
|
|
timeB,
|
|
); // Lexicographical sorting works for YYYY-MM
|
|
});
|
|
|
|
// If no valid TIME_PERIOD with a month is found, return original response
|
|
List<Map<String, dynamic>> finalData = sortedData.isNotEmpty
|
|
? sortedData
|
|
: List.from(chartData['response']);
|
|
|
|
for (var entry in finalData) {
|
|
var xValue = entry['ObsKey'][groupByKey];
|
|
var yValue = entry['ObsValue']['Value'];
|
|
if (xValue != null && yValue != null) {
|
|
xAxisData.add(xValue.toString());
|
|
yAxisData.add(double.tryParse(yValue.toString()) ?? 0.0);
|
|
}
|
|
}
|
|
|
|
print("chartData['chart_heading']");
|
|
print('RESpns- ${chartData['chart_heading']}');
|
|
print(chartData['response']);
|
|
|
|
int rotationTurns = 1;
|
|
return Column(
|
|
children: [
|
|
Text(
|
|
chartData['chart_heading'] ?? '',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 14, fontWeight: FontWeight.w400),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
// SizedBox(height: 5),
|
|
// Text(
|
|
// chartData['chart_sub_heading'] ?? '',
|
|
// style: TextStyle(
|
|
// fontSize: 13,
|
|
// fontWeight: FontWeight.w300,
|
|
// ),
|
|
// textAlign: TextAlign.center,
|
|
// ),
|
|
// SizedBox(height: 5),
|
|
// Chart
|
|
Flexible(
|
|
child: BarChart(
|
|
BarChartData(
|
|
// alignment: BarChartAlignment.spaceAround,
|
|
// maxY: yAxisData.isNotEmpty
|
|
// ? yAxisData.reduce((a, b) => a > b ? a : b) * 1.2
|
|
// : 10,
|
|
maxY: _calculateMaxY(chartData),
|
|
rotationQuarterTurns: rotationTurns,
|
|
barTouchData: BarTouchData(
|
|
enabled: false,
|
|
handleBuiltInTouches: false,
|
|
touchTooltipData: BarTouchTooltipData(
|
|
fitInsideHorizontally: true,
|
|
fitInsideVertically: true,
|
|
tooltipPadding: const EdgeInsets.all(5),
|
|
tooltipMargin: 12,
|
|
getTooltipColor: (group) => Colors.transparent,
|
|
getTooltipItem: (group, groupIndex, rod, rodIndex) {
|
|
// if (rod.toY == 0) return null;
|
|
|
|
return BarTooltipItem(
|
|
// formatNumber(rod.toY),
|
|
(chartConversion != null &&
|
|
chartConversion.isNotEmpty &&
|
|
number_format != null)
|
|
? formatNumberConversion(
|
|
rod.toY,
|
|
chartConversion,
|
|
number_format,
|
|
)
|
|
: formatNumber(rod.toY),
|
|
TextStyle(
|
|
fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),
|
|
color: Colors.black,
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w400,
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
titlesData: FlTitlesData(
|
|
leftTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: false,
|
|
interval: (yAxisData.isNotEmpty
|
|
? yAxisData.reduce((a, b) => a > b ? a : b) / 5
|
|
: 1),
|
|
getTitlesWidget: (value, meta) {
|
|
return Padding(
|
|
padding: const EdgeInsets.only(right: 8.0),
|
|
child: Text(
|
|
'${value.toInt()}',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
)),
|
|
),
|
|
);
|
|
},
|
|
reservedSize: 60,
|
|
),
|
|
),
|
|
bottomTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
getTitlesWidget: (value, meta) {
|
|
if (value.toInt() < xAxisData.length) {
|
|
return Padding(
|
|
padding: const EdgeInsets.only(top: 8.0),
|
|
child: Transform.rotate(
|
|
angle: -1.58,
|
|
// angle: -45 *
|
|
// (3.1415927 / 180), // Rotating by -45 degrees
|
|
alignment: Alignment.center,
|
|
child: Center(
|
|
child: SizedBox(
|
|
width: 100,
|
|
child: Text(
|
|
xAxisData[value.toInt()],
|
|
textAlign: TextAlign.right,
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 10),
|
|
softWrap: true,
|
|
maxLines: 2,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
return Container();
|
|
},
|
|
reservedSize: 125,
|
|
),
|
|
),
|
|
topTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: false,
|
|
), // Hide top titles
|
|
),
|
|
rightTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: false,
|
|
), // Hide right titles
|
|
),
|
|
),
|
|
gridData: FlGridData(show: false),
|
|
|
|
// borderData: FlBorderData(show: false),
|
|
borderData: FlBorderData(show: false),
|
|
// groupsSpace: 5,
|
|
barGroups: List.generate(
|
|
xAxisData.length,
|
|
(index) => BarChartGroupData(
|
|
x: index,
|
|
barsSpace: 20,
|
|
barRods: [
|
|
BarChartRodData(
|
|
toY: (yAxisData[index] == 0)
|
|
? 0.0001
|
|
: yAxisData[index],
|
|
// color: Colors.blueAccent,
|
|
color: uniqueColors[1],
|
|
borderRadius: BorderRadius.circular(4),
|
|
width: 20,
|
|
),
|
|
],
|
|
showingTooltipIndicators: [0],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
case 'fl_multi_bar':
|
|
double _calculateChartWidth(dynamic chartData) {
|
|
int totalBars = chartData['response']?.length ?? 0;
|
|
const double barWidth = 30; // Width for each bar, including spacing
|
|
return totalBars * barWidth; // Calculate total chart width
|
|
}
|
|
var chartConversion = chartData['chart_type_json']['conversion'];
|
|
var number_format = chartData['chart_type_json']['number_format'];
|
|
var chartBarColors = chartData['chart_bar_color'] ?? {};
|
|
Map<String, String> barColorsMap = {};
|
|
chartBarColors.forEach((key, value) {
|
|
barColorsMap[key] = value.toString(); // Ensure values are strings
|
|
});
|
|
bool hasBarColors = barColorsMap.isNotEmpty;
|
|
|
|
var chartBarColorsRaw = chartData['chart_bar_color'] ?? {};
|
|
|
|
// Convert LinkedMap<dynamic, dynamic> to Map<String, String>
|
|
Map<String, String> chartBarColrs = Map<String, String>.from(
|
|
chartBarColorsRaw,
|
|
);
|
|
|
|
// Now map to Color
|
|
Map<String, Color> parsedChartBarColors = chartBarColrs.map((
|
|
key,
|
|
value,
|
|
) {
|
|
return MapEntry(key, _hexToColor(value));
|
|
});
|
|
|
|
if (kDebugMode) {
|
|
print('Converted barColorsMap: $barColorsMap');
|
|
print('hasBarColors: $hasBarColors');
|
|
}
|
|
|
|
print('multi_bar');
|
|
if (chartData.containsKey('chart_bar_color')) {
|
|
print('bar_colors - $chartBarColors');
|
|
}
|
|
if (kDebugMode) {
|
|
print('chartBarColors: $chartBarColors');
|
|
print('chartBarColors Type: ${chartBarColors.runtimeType}');
|
|
print('chartBarColors keys: ${chartBarColors?.keys}');
|
|
print('chartBarColors is null? ${chartBarColors == null}');
|
|
print('chartBarColors is empty? ${chartBarColors?.isEmpty}');
|
|
}
|
|
|
|
String cropKey = chartData['chart_type_json']['x_sub_group'];
|
|
// Group crops by CROP_TYPE
|
|
Map<String, List<String>> groupedCrops = {};
|
|
|
|
int touchedGroupIndex = -1;
|
|
// Iterate over the chartData to group crops by CROP_TYPE
|
|
|
|
for (var item in chartData['response']) {
|
|
print("MultiBArRaw item: $item");
|
|
|
|
String crop = item['ObsKey'][cropKey];
|
|
String cropType = item['ObsKey'][groupByKey];
|
|
|
|
// Use a Set to avoid duplicates
|
|
if (groupedCrops.containsKey(cropType)) {
|
|
groupedCrops[cropType] =
|
|
(groupedCrops[cropType]! + [crop]).toSet().toList();
|
|
} else {
|
|
groupedCrops[cropType] = [crop];
|
|
}
|
|
}
|
|
|
|
print('Unique groupedCrops: $groupedCrops');
|
|
|
|
// for (var item in chartData['response']) {
|
|
// String crop, cropType;
|
|
// crop = item['ObsKey'][cropKey];
|
|
// cropType = item['ObsKey'][groupByKey];
|
|
//
|
|
// if (groupedCrops.containsKey(cropType)) {
|
|
// groupedCrops[cropType]!.add(crop);
|
|
// } else {
|
|
// groupedCrops[cropType] = [crop];
|
|
// }
|
|
// }
|
|
//
|
|
// print('groupedCropsflmutli- $groupedCrops');
|
|
|
|
print('hormulti_bar');
|
|
|
|
return Center(
|
|
child: Column(
|
|
children: [
|
|
Text(
|
|
chartData['chart_heading'] ?? '',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 14, fontWeight: FontWeight.w400),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
SizedBox(height: 5),
|
|
Text(
|
|
'',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 13, fontWeight: FontWeight.w300),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
SizedBox(height: 10),
|
|
// Chart
|
|
Expanded(
|
|
child: SingleChildScrollView(
|
|
scrollDirection:
|
|
Axis.horizontal, // Enable horizontal scrolling
|
|
child: SizedBox(
|
|
width: _calculateChartWidth(
|
|
chartData,
|
|
), // Dynamically calculate the chart width
|
|
|
|
child: BarChart(
|
|
BarChartData(
|
|
alignment: BarChartAlignment.spaceAround,
|
|
maxY: _calculateMaxY(
|
|
chartData,
|
|
), // Dynamically calculate max Y
|
|
// barGroups: _buildHorizontalRotateBarGroups(
|
|
// chartData, groupByValues), // Build bar groups
|
|
barGroups: hasBarColors
|
|
? _buildHorizontalRotateBarGroupsBarColors(
|
|
chartData,
|
|
groupByValues,
|
|
parsedChartBarColors,
|
|
)
|
|
: _buildHorizontalRotateBarGroups(
|
|
chartData,
|
|
groupByValues,
|
|
),
|
|
|
|
titlesData: FlTitlesData(
|
|
leftTitles: AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false),
|
|
),
|
|
bottomTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
reservedSize:
|
|
130, // Added space for rotated titles
|
|
getTitlesWidget: (value, meta) {
|
|
if (value < groupByValues.length) {
|
|
String title = groupByValues.elementAt(
|
|
value.toInt(),
|
|
);
|
|
|
|
String displayTitle = title.length > 10
|
|
? title.substring(0, 10) + '...'
|
|
: title;
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.only(
|
|
top: 8.0,
|
|
left: 95.0,
|
|
),
|
|
child: SizedBox(
|
|
width:
|
|
80, // Limit width to force wrapping
|
|
child: Transform.rotate(
|
|
angle: -1.5,
|
|
child: TooltipTheme(
|
|
data: TooltipThemeData(
|
|
decoration: BoxDecoration(
|
|
color: Colors
|
|
.black, // Change background color
|
|
// color: Colors.blueGrey[800], // Change background color
|
|
borderRadius:
|
|
BorderRadius.circular(
|
|
8,
|
|
), // Optional: rounded corners
|
|
),
|
|
textStyle: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),
|
|
color: Colors.white,
|
|
), // Change text color
|
|
),
|
|
child: Tooltip(
|
|
message: title,
|
|
child: Text(
|
|
title,
|
|
softWrap: true,
|
|
maxLines: 2,
|
|
textAlign: TextAlign.right,
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 10),
|
|
// overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
// return Transform.rotate(
|
|
// angle:
|
|
// -0.5, // Rotation in radians (~ -30 degrees)
|
|
// child: Text(
|
|
// title,
|
|
// style: const TextStyle(fontSize: 12),
|
|
// ),
|
|
// );
|
|
}
|
|
|
|
return const SizedBox.shrink();
|
|
},
|
|
),
|
|
),
|
|
topTitles: AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false),
|
|
),
|
|
rightTitles: AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false),
|
|
),
|
|
),
|
|
borderData: FlBorderData(show: false),
|
|
|
|
barTouchData: BarTouchData(
|
|
enabled: true,
|
|
touchTooltipData: BarTouchTooltipData(
|
|
getTooltipColor: (group) => Colors.black,
|
|
tooltipHorizontalAlignment:
|
|
FLHorizontalAlignment.center,
|
|
tooltipRoundedRadius: 8,
|
|
fitInsideHorizontally:
|
|
true, // Ensure it fits within the screen
|
|
fitInsideVertically: true,
|
|
tooltipPadding: EdgeInsets.all(8),
|
|
tooltipMargin: 16,
|
|
|
|
// Only show tooltip when touched
|
|
getTooltipItem: (group, groupIndex, rod, rodIndex) {
|
|
// if (rod.toY == 0 || touchedGroupIndex == -1) {
|
|
// return null; // Don't show the tooltip if the value is 0 or there's no touch
|
|
// }
|
|
if (rod.toY == 0) {
|
|
return null; // Don't show for zero values
|
|
}
|
|
|
|
if (groupIndex == touchedGroupIndex) {
|
|
// Get the group label dynamically
|
|
String groupLabel = groupByValues.elementAt(
|
|
groupIndex,
|
|
);
|
|
|
|
// Fetch the crop for the current group from groupedCrops
|
|
String cropType = groupByValues.elementAt(
|
|
groupIndex,
|
|
);
|
|
print('GrpcropType: $cropType');
|
|
// String crop = groupedCrops[cropType]![rodIndex];
|
|
|
|
// Safely fetch crop with null check
|
|
List<String>? crops = groupedCrops[cropType];
|
|
String crop;
|
|
if (crops != null && rodIndex < crops.length) {
|
|
crop = crops[rodIndex];
|
|
} else {
|
|
print(
|
|
'Crop is null or index out of bounds for cropType: $cropType and rodIndex: $rodIndex',
|
|
);
|
|
// crop = cropType; // Fallback to cropType
|
|
crop = (crops != null && crops.isNotEmpty)
|
|
? crops.first
|
|
: cropType;
|
|
}
|
|
|
|
// print('groupedCrops1: $groupedCrops - $rodIndex');
|
|
// print(
|
|
// 'Groupcrop: $crop');
|
|
double value = rod.toY;
|
|
|
|
return BarTooltipItem(
|
|
'$groupLabel\n$crop',
|
|
TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
children: [
|
|
TextSpan(
|
|
text:
|
|
'- ${(chartConversion != null && chartConversion.isNotEmpty && number_format != null) ? formatNumberConversion(rod.toY, chartConversion, number_format) : formatNumber(rod.toY)}',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
return null;
|
|
},
|
|
),
|
|
touchCallback: (event, response) {
|
|
if (event.isInterestedForInteractions &&
|
|
response != null &&
|
|
response.spot != null) {
|
|
// setState(() {
|
|
touchedGroupIndex =
|
|
response.spot!.touchedBarGroupIndex;
|
|
// });
|
|
} else {
|
|
// setState(() {
|
|
touchedGroupIndex = -1; // Reset if no interaction
|
|
// });
|
|
}
|
|
},
|
|
),
|
|
gridData: FlGridData(show: false),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
|
|
case 'horizontal_rotate':
|
|
String cropKey = chartData['chart_type_json']
|
|
['y_sub_group']; // Dynamically get crop key
|
|
// Group crops by CROP_TYPE
|
|
Map<String, List<String>> groupedCrops = {};
|
|
|
|
// Iterate over the chartData to group crops by CROP_TYPE
|
|
for (var item in chartData['response']) {
|
|
String crop, cropType;
|
|
// crop = item['ObsKey']['CROP'];
|
|
crop = item['ObsKey'][cropKey];
|
|
cropType = item['ObsKey'][groupByKey];
|
|
|
|
if (groupedCrops.containsKey(cropType)) {
|
|
groupedCrops[cropType]!.add(crop);
|
|
} else {
|
|
groupedCrops[cropType] = [crop];
|
|
}
|
|
}
|
|
int touchedGroupIndex = -1;
|
|
|
|
int rotationTurns = 1;
|
|
print('Grouped Crops: $groupedCrops');
|
|
|
|
int numberOfBars =
|
|
groupedCrops.length; // Number of grouped sets (bar groups)
|
|
double barHeight = 10.0; // Height per individual bar
|
|
double barSpacing = 1.0; // Space between bar sets
|
|
double minHeight = 300.0; // Minimum chart height
|
|
double maxHeight = 500.0; // Maximum chart height
|
|
|
|
// Calculate total height dynamically
|
|
// double chartHeight =
|
|
// ((numberOfBars * barHeight) + ((numberOfBars - 1) * barSpacing))
|
|
// .clamp(minHeight, maxHeight);
|
|
|
|
var chartBarColors = chartData['chart_bar_color'] ?? {};
|
|
Map<String, String> barColorsMap = {};
|
|
// chartBarColors.forEach((key, value) {
|
|
// barColorsMap[key] = value.toString(); // Ensure values are strings
|
|
// });
|
|
// bool hasBarColors = barColorsMap.isNotEmpty;
|
|
|
|
var chartBarColorsRaw = chartData['chart_bar_color'] ?? {};
|
|
|
|
// // Convert LinkedMap<dynamic, dynamic> to Map<String, String>
|
|
// Map<String, String> chartBarColrs =
|
|
// Map<String, String>.from(chartBarColorsRaw);
|
|
//
|
|
// // Now map to Color
|
|
// Map<String, Color> parsedChartBarColors =
|
|
// chartBarColrs.map((key, value) {
|
|
// print('HorizontalLegends1 -$key');
|
|
// return MapEntry(key, _hexToColor(value));
|
|
// });
|
|
|
|
List<dynamic> keys = chartBarColors['key'] ?? [];
|
|
List<dynamic> colors = chartBarColors['color'] ?? [];
|
|
|
|
print('RT1keys - $keys');
|
|
print('RT1colors - $colors');
|
|
|
|
// Convert to a map for easy lookup
|
|
Map<String, Color> parsedChartBarColors = {};
|
|
for (int i = 0; i < keys.length; i++) {
|
|
parsedChartBarColors[keys[i].toString()] = _hexToColor(
|
|
colors[i].toString(),
|
|
);
|
|
}
|
|
print('RT1 - $parsedChartBarColors');
|
|
bool hasBarColors = parsedChartBarColors.isNotEmpty;
|
|
|
|
return Column(
|
|
children: [
|
|
Text(
|
|
chartData['chart_heading'] ?? '',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 14, fontWeight: FontWeight.w400),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
SizedBox(height: 5),
|
|
Text(
|
|
chartData['chart_sub_heading'] ?? '',
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 13, fontWeight: FontWeight.w300),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
SizedBox(height: 5),
|
|
// Chart
|
|
Flexible(
|
|
// child: SingleChildScrollView(
|
|
// scrollDirection: Axis.vertical,
|
|
// child: SingleChildScrollView(
|
|
// scrollDirection: Axis.horizontal,
|
|
child: SizedBox(
|
|
// width: 500,
|
|
// width: 1000,
|
|
// height: chartHeight,
|
|
child: Stack(
|
|
children: [
|
|
BarChart(
|
|
BarChartData(
|
|
// maxY: 400000,
|
|
maxY: _calculateMaxY(chartData),
|
|
rotationQuarterTurns: rotationTurns,
|
|
|
|
// barTouchData: BarTouchData(
|
|
// // enabled: true,
|
|
// enabled: false,
|
|
// touchTooltipData: BarTouchTooltipData(
|
|
// // getTooltipColor: (group) => Colors.black12,
|
|
// getTooltipColor: (group) => Colors.transparent,
|
|
// tooltipHorizontalAlignment: FLHorizontalAlignment.center,
|
|
// tooltipRoundedRadius: 8,
|
|
// fitInsideHorizontally:
|
|
// true, // Ensure it fits within the screen
|
|
// fitInsideVertically: true,
|
|
// tooltipPadding: const EdgeInsets.all(5),
|
|
// tooltipMargin: 10,
|
|
//
|
|
// // Only show tooltip when touched
|
|
// getTooltipItem: (group, groupIndex, rod, rodIndex) {
|
|
// // if (rod.toY == 0 || touchedGroupIndex == -1) {
|
|
// // return null; // Don't show the tooltip if the value is 0 or there's no touch
|
|
// // }
|
|
// // Hide tooltips for 0 values
|
|
// if (rod.toY == 0) return null; // Hide for zero values
|
|
//
|
|
// // if (groupIndex == touchedGroupIndex) {
|
|
// // print('Group Index: $groupIndex, Group : $group');
|
|
//
|
|
// // Get the group label dynamically
|
|
// String groupLabel = groupByValues.elementAt(groupIndex);
|
|
//
|
|
// // Fetch the crop for the current group from groupedCrops
|
|
// String cropType = groupByValues.elementAt(groupIndex);
|
|
// String crop = groupedCrops[cropType]![rodIndex];
|
|
// double value = rod.toY;
|
|
//
|
|
// String formattedValue;
|
|
// if (value >= 1000000) {
|
|
// formattedValue =
|
|
// (value / 1000000).toStringAsFixed(1) + 'M';
|
|
// } else if (value >= 1000) {
|
|
// formattedValue =
|
|
// (value / 1000).toStringAsFixed(1) + 'K';
|
|
// } else {
|
|
// formattedValue = value.toStringAsFixed(
|
|
// 0); // for values smaller than 1000
|
|
// }
|
|
//
|
|
// // return BarTooltipItem(
|
|
// // // '$groupLabel\n$crop',
|
|
// // '$formattedValue',
|
|
// // const TextStyle(
|
|
// // color: Colors.black,
|
|
// // fontWeight: FontWeight.w400,
|
|
// // fontSize: 12,
|
|
// // ),
|
|
// // );
|
|
//
|
|
// return BarTooltipItem(
|
|
// ' $formattedValue', // This is your main tooltip text
|
|
// // textAlign: TextAlign.center,
|
|
// const TextStyle(
|
|
// color: Colors.black,
|
|
// fontWeight: FontWeight.w400,
|
|
// fontSize: 12,
|
|
// ),
|
|
// children: [
|
|
// TextSpan(
|
|
// text: '', // Add extra information here
|
|
// // text: '\n$crop', // Add extra information here
|
|
//
|
|
// style: TextStyle(
|
|
// color: Colors.grey[
|
|
// 700], // Optional: Different color for extra text
|
|
// fontSize: 8,
|
|
// ),
|
|
// ),
|
|
// ],
|
|
// );
|
|
//
|
|
// // return BarTooltipItem(
|
|
// // '$groupLabel\n$crop',
|
|
// // const TextStyle(
|
|
// // color: Colors.white,
|
|
// // fontWeight: FontWeight.bold,
|
|
// // ),
|
|
// // children: [
|
|
// // TextSpan(
|
|
// // text: ' Value: $formattedValue',
|
|
// // style: const TextStyle(
|
|
// // color: Colors.yellow,
|
|
// // fontWeight: FontWeight.w500,
|
|
// // ),
|
|
// // ),
|
|
// // ],
|
|
// // );
|
|
//
|
|
// // }
|
|
// // return null;
|
|
// },
|
|
// ),
|
|
// // touchCallback: (event, response) {
|
|
// // if (event.isInterestedForInteractions &&
|
|
// // response != null &&
|
|
// // response.spot != null) {
|
|
// // // setState(() {
|
|
// // touchedGroupIndex =
|
|
// // response.spot!.touchedBarGroupIndex;
|
|
// // // });
|
|
// // } else {
|
|
// // // setState(() {
|
|
// // touchedGroupIndex = -1; // Reset if no interaction
|
|
// // // });
|
|
// // }
|
|
// // },
|
|
// ),
|
|
barTouchData: BarTouchData(
|
|
enabled: false, // Enable touch to show tooltip
|
|
handleBuiltInTouches: false,
|
|
touchTooltipData: BarTouchTooltipData(
|
|
getTooltipColor: (group) => Colors
|
|
.transparent, // Light background for visibility
|
|
tooltipHorizontalAlignment:
|
|
FLHorizontalAlignment.center,
|
|
tooltipRoundedRadius:
|
|
6, // Softer roundness for tooltips
|
|
fitInsideHorizontally: true,
|
|
fitInsideVertically: true,
|
|
// tooltipPadding: const EdgeInsets.all(5),
|
|
tooltipPadding: const EdgeInsets.only(
|
|
top: 8, bottom: 5, left: 5, right: 5),
|
|
tooltipMargin:
|
|
20, // Reduce margin for better alignment
|
|
|
|
getTooltipItem: (group, groupIndex, rod, rodIndex) {
|
|
// if (rod.toY == 0) return null; // Hide for zero values
|
|
|
|
String cropType = groupByValues.elementAt(
|
|
groupIndex,
|
|
);
|
|
String crop = groupedCrops[cropType]![rodIndex];
|
|
double value = rod.toY;
|
|
|
|
// Show tooltip for zero values
|
|
if (value == 0) {
|
|
return BarTooltipItem(
|
|
'0', // Display "0" instead of hiding
|
|
textAlign: TextAlign.right,
|
|
TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),
|
|
color: Colors.black,
|
|
fontSize: 12,
|
|
),
|
|
);
|
|
}
|
|
// Format values dynamically
|
|
// String formattedValue = value >= 1e6
|
|
// ? '${(value / 1e6).toStringAsFixed(1)}M'
|
|
// : value >= 1e3
|
|
// ? '${(value / 1e3).toStringAsFixed(1)}K'
|
|
// : value.toStringAsFixed(0);
|
|
|
|
String formattedValue;
|
|
if (value >= 1000000) {
|
|
formattedValue =
|
|
(value / 1000000).toStringAsFixed(1) + 'M';
|
|
} else if (value >= 1000) {
|
|
formattedValue =
|
|
(value / 1000).toStringAsFixed(1) + 'K';
|
|
} else {
|
|
formattedValue = value.toStringAsFixed(
|
|
0,
|
|
); // for values smaller than 1000
|
|
}
|
|
print('formattedValue00 $formattedValue');
|
|
return BarTooltipItem(
|
|
formattedValue,
|
|
textAlign: TextAlign.right,
|
|
TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),
|
|
color: Colors.black,
|
|
fontSize: 12,
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
|
|
titlesData: FlTitlesData(
|
|
leftTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
// showTitles: false,
|
|
reservedSize: 40,
|
|
interval: 100000,
|
|
getTitlesWidget: (value, meta) {
|
|
return SizedBox(
|
|
width: 50,
|
|
child: Text(
|
|
value.toInt().toString(),
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 12),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
bottomTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
reservedSize: (chartData['chart_label_width'] ==
|
|
null ||
|
|
chartData['chart_label_width'] == 0)
|
|
? 150
|
|
: (double.tryParse(
|
|
chartData['chart_label_width']
|
|
.toString()) ??
|
|
150), // Added space for rotated titles
|
|
getTitlesWidget: (value, meta) {
|
|
if (value < groupByValues.length) {
|
|
String title = groupByValues.elementAt(
|
|
value.toInt(),
|
|
);
|
|
return Transform.rotate(
|
|
angle:
|
|
-1.58, // Rotation in radians (~ -30 degrees)
|
|
child: Center(
|
|
child: SizedBox(
|
|
width: 120,
|
|
child: Text(
|
|
title,
|
|
textAlign: (chartData[
|
|
'chart_label_width'] ==
|
|
null ||
|
|
chartData[
|
|
'chart_label_width'] ==
|
|
0)
|
|
? TextAlign.right
|
|
: TextAlign.center,
|
|
style: TextStyle(fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),fontSize: 12),
|
|
softWrap: true,
|
|
maxLines: 2,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
return const SizedBox.shrink();
|
|
},
|
|
),
|
|
),
|
|
rightTitles: AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false),
|
|
),
|
|
topTitles: AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false),
|
|
),
|
|
),
|
|
borderData: FlBorderData(
|
|
show: true,
|
|
border: const Border(
|
|
// left: BorderSide(color: Colors.grey),
|
|
bottom: BorderSide(color: Colors.white),
|
|
),
|
|
),
|
|
gridData: FlGridData(
|
|
show: false,
|
|
drawVerticalLine: true,
|
|
verticalInterval: 1,
|
|
horizontalInterval: 100000,
|
|
getDrawingHorizontalLine: (value) {
|
|
return FlLine(
|
|
color: Colors.grey.withOpacity(0.5),
|
|
strokeWidth: 1,
|
|
);
|
|
},
|
|
getDrawingVerticalLine: (value) {
|
|
return FlLine(
|
|
color: Colors.grey.withOpacity(0.5),
|
|
strokeWidth: 1,
|
|
);
|
|
},
|
|
),
|
|
|
|
// barGroups: _buildHorizontalRotateBarGroups(
|
|
// chartData, groupByValues),
|
|
barGroups: hasBarColors
|
|
? _buildHorizontalRotateBarGroupsBarColors(
|
|
chartData,
|
|
groupByValues,
|
|
parsedChartBarColors,
|
|
)
|
|
: _buildHorizontalRotateBarGroups(
|
|
chartData,
|
|
groupByValues,
|
|
),
|
|
|
|
alignment: BarChartAlignment.spaceAround,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
// ),
|
|
// )
|
|
const SizedBox(height: 10), // Space between chart and legend
|
|
_buildChartLegend(groupedCrops, parsedChartBarColors, uniqueColors,context),
|
|
],
|
|
);
|
|
// case 'd_chart_grouped_bar_horizantal':
|
|
// return DChartBar(
|
|
// vertical: false, // <--- Important: rotate the chart
|
|
// barGroupingType: BarGroupingType.grouped,
|
|
// data: const [
|
|
// {
|
|
// 'id': 'Product A',
|
|
// 'data': [
|
|
// {'domain': 'Jan', 'measure': 30},
|
|
// {'domain': 'Feb', 'measure': 50},
|
|
// {'domain': 'Mar', 'measure': 40},
|
|
// ],
|
|
// },
|
|
// {
|
|
// 'id': 'Product B',
|
|
// 'data': [
|
|
// {'domain': 'Jan', 'measure': 20},
|
|
// {'domain': 'Feb', 'measure': 20},
|
|
// {'domain': 'Mar', 'measure': 35},
|
|
// ],
|
|
// },
|
|
// {
|
|
// 'id': 'Product C',
|
|
// 'data': [
|
|
// {'domain': 'Jan', 'measure': 0},
|
|
// {'domain': 'Feb', 'measure': 25},
|
|
// {'domain': 'Mar', 'measure': 45},
|
|
// ],
|
|
// },
|
|
// ],
|
|
// groupList: const [
|
|
// {'id': 'Product A', 'color': Colors.orange},
|
|
// {'id': 'Product B', 'color': Colors.deepOrange},
|
|
// {'id': 'Product C', 'color': Colors.pinkAccent},
|
|
// ],
|
|
// barValue: (barData, index) => '${barData['measure']}',
|
|
// barLabelPosition: BarLabelPosition.outside,
|
|
// domainLabelPaddingToAxisLine: 16,
|
|
// measureLabelPaddingToAxisLine: 16,
|
|
// groupSeparatorWidth: 14,
|
|
// barLabelFontSize: 12,
|
|
// );
|
|
default:
|
|
return Center(child: Text('Unknown chart type'));
|
|
}
|
|
}
|
|
|
|
// Start Of line trend chart
|
|
FlTitlesData titlesData2(Set<double> xValues) {
|
|
return FlTitlesData(
|
|
leftTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
reservedSize: 40,
|
|
getTitlesWidget: (value, meta) {
|
|
// Format values as millions (M)
|
|
// String formattedValue = (value / 1000000).toStringAsFixed(1) + 'M';
|
|
return Text(
|
|
value.toStringAsFixed(1),
|
|
style: TextStyle(
|
|
color: Colors.black,
|
|
fontSize: 12
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
bottomTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
interval: 1, // Ensure each year is shown only once
|
|
getTitlesWidget: (value, meta) {
|
|
if (xValues.contains(value)) {
|
|
return Text(
|
|
value.toInt().toString(),
|
|
style: TextStyle(color: Colors.black, fontSize: 12),
|
|
);
|
|
} else {
|
|
return SizedBox.shrink(); // Hide non-relevant labels
|
|
}
|
|
},
|
|
),
|
|
),
|
|
topTitles: AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false), // Hide top titles
|
|
),
|
|
rightTitles: AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false), // Hide right titles
|
|
),
|
|
);
|
|
}
|
|
|
|
List<LineChartBarData> lineBarsData2(List<dynamic> filteredData) {
|
|
List<LineChartBarData> lineBars = [];
|
|
|
|
// Create a map to store population values by year and gender
|
|
Map<int, Map<String, double>> yearGenderMap = {};
|
|
|
|
for (var entry in filteredData) {
|
|
int year = int.tryParse(entry['ObsKey']['TIME_PERIOD'].toString()) ?? 0;
|
|
String gender = entry['ObsKey']['GENDER'];
|
|
|
|
double value =
|
|
double.tryParse(entry['ObsValue']['Value'].toString()) ?? 0.0;
|
|
|
|
if (!yearGenderMap.containsKey(year)) {
|
|
yearGenderMap[year] = {'M': 0.0, 'F': 0.0};
|
|
}
|
|
|
|
if (gender == 'Male' || gender == 'ذكر') {
|
|
yearGenderMap[year]!['M'] = value;
|
|
} else if (gender == 'Female' || gender == 'أنثى') {
|
|
yearGenderMap[year]!['F'] = value;
|
|
}
|
|
}
|
|
|
|
// Calculate the ratio (M/F) * 100 for each year
|
|
List<FlSpot> spots = [];
|
|
yearGenderMap.forEach((year, genderMap) {
|
|
if (genderMap['M'] != 0.0 && genderMap['F'] != 0.0) {
|
|
double ratio = (genderMap['M']! / genderMap['F']!) * 100;
|
|
spots.add(FlSpot(year.toDouble(), ratio));
|
|
}
|
|
});
|
|
|
|
// Add a line for the ratio data
|
|
lineBars.add(
|
|
LineChartBarData(
|
|
spots: spots,
|
|
isCurved: true,
|
|
// color: bodyColor?? Colors.grey, // Set color for the ratio line
|
|
color: uniqueColors[1] ?? Colors.grey,
|
|
barWidth: 3,
|
|
isStrokeCapRound: true,
|
|
belowBarData: BarAreaData(
|
|
show: true,
|
|
// color: bodyColor ,
|
|
// color: (bodyColor ?? Colors.grey).withAlpha(100),
|
|
color: (uniqueColors[1] ?? Colors.grey).withAlpha(100),
|
|
),
|
|
),
|
|
);
|
|
|
|
return lineBars;
|
|
}
|
|
|
|
/// Function to parse TIME_PERIOD into a EXACT value
|
|
double parseTimePeriod(String timePeriod) {
|
|
// Match formats
|
|
if (RegExp(r'^\d{4}$').hasMatch(timePeriod)) {
|
|
// Format: Year-only (e.g., "2020")
|
|
return double.parse(timePeriod); // Year as a double (2020 → 2020.0)
|
|
} else if (RegExp(r'^\d{4}-\d{2}$').hasMatch(timePeriod)) {
|
|
// Format: Year-Month (e.g., "2020-10")
|
|
return double.parse(
|
|
timePeriod.replaceAll('-', '.'),
|
|
); // Convert "2020-10" → 2020.10
|
|
} else if (RegExp(r'^\d{4}-[A-Za-z]{3}$').hasMatch(timePeriod)) {
|
|
// Format: Year-MonthAbbr (e.g., "2020-Oct")
|
|
Map<String, int> monthMap = {
|
|
'Jan': 1,
|
|
'Feb': 2,
|
|
'Mar': 3,
|
|
'Apr': 4,
|
|
'May': 5,
|
|
'Jun': 6,
|
|
'Jul': 7,
|
|
'Aug': 8,
|
|
'Sep': 9,
|
|
'Oct': 10,
|
|
'Nov': 11,
|
|
'Dec': 12,
|
|
};
|
|
|
|
List<String> parts = timePeriod.split('-');
|
|
int month = monthMap[parts[1]] ?? 1; // Default to January if unknown
|
|
return double.parse('${parts[0]}.$month'); // Convert "2020-Oct" → 2020.10
|
|
}
|
|
|
|
// Throw an error for unsupported formats
|
|
throw FormatException("Invalid TIME_PERIOD format: $timePeriod");
|
|
}
|
|
|
|
List<LineChartBarData> lineBarsData(
|
|
List<dynamic> filteredData,
|
|
Set<String> groupByValues,
|
|
String groupByKey,
|
|
Map<String, Color> chartBarColors,
|
|
) {
|
|
List<LineChartBarData> lineBars = [];
|
|
print('LineParsedChartBarColors $chartBarColors');
|
|
|
|
print('filteredData $filteredData');
|
|
print('filteredData222 $groupByValues');
|
|
// final List<Color> uniqueColors = [
|
|
// Color(0xFF6097CD),
|
|
// Color(0xFFD086A7),
|
|
// Color(0xFF98BCE5),
|
|
// Color(0xFFA7B5C5),
|
|
// Color(0xFFBED3EC),
|
|
// Color(0xFFD4E3F4),
|
|
// ];
|
|
|
|
// Create a map to assign colors to each group in order
|
|
Map<String, Color> groupColorMap = {};
|
|
int colorIndex = 0;
|
|
|
|
// for (String group in groupByValues) {
|
|
// groupColorMap[group] = uniqueColors[colorIndex % uniqueColors.length];
|
|
// // groupColorMap[group] = adjustColorlineTrend(bodyColor, colorIndex);
|
|
// colorIndex++;
|
|
// }
|
|
|
|
for (String group in groupByValues) {
|
|
if (chartBarColors.isNotEmpty && chartBarColors.containsKey(group)) {
|
|
// Use predefined color from chartBarColors
|
|
groupColorMap[group] = chartBarColors[group]!;
|
|
} else {
|
|
groupColorMap[group] = uniqueColors[colorIndex % uniqueColors.length];
|
|
}
|
|
colorIndex++;
|
|
}
|
|
|
|
print('Group-Color Map: $groupColorMap');
|
|
// Iterate through each group and generate line data
|
|
for (String group in groupByValues) {
|
|
print('lineGrp1');
|
|
|
|
// List<FlSpot> spots = filteredData
|
|
// .where((entry) => entry['ObsKey'][groupByKey] == group)
|
|
// .map<FlSpot>((entry) {
|
|
// print("FindTimePeriod");
|
|
// print(entry['ObsKey'][groupByKey]);
|
|
// double xValue = double.parse(entry['ObsKey']['TIME_PERIOD']);
|
|
// double yValue = double.parse(entry['ObsValue']['Value']);
|
|
// return FlSpot(xValue, yValue);
|
|
// }).toList();
|
|
|
|
// List<FlSpot> spots = filteredData
|
|
// .where((entry) => entry['ObsKey'][groupByKey] == group)
|
|
// .map<FlSpot>((entry) {
|
|
// String timePeriod = entry['ObsKey']['TIME_PERIOD'];
|
|
// print("FindTimePeriod: $timePeriod");
|
|
//
|
|
// double xValue = parseTimePeriodToDouble(timePeriod); // Convert to double for graph plotting
|
|
// double yValue = double.parse(entry['ObsValue']['Value']);
|
|
// print('TimePeriod: $timePeriod, xValue: $xValue, yValue: $yValue');
|
|
//
|
|
// return FlSpot(xValue, yValue);
|
|
// }).toList();
|
|
|
|
List<FlSpot> spots = filteredData
|
|
.where((entry) => entry['ObsKey'][groupByKey] == group)
|
|
.map<FlSpot>((entry) {
|
|
String timePeriod = entry['ObsKey']['TIME_PERIOD'];
|
|
print("FindTimePeriod: $timePeriod");
|
|
|
|
// Use the timePeriod directly as a string for x-axis
|
|
double xValue = parseTimePeriod(timePeriod);
|
|
print('spotss $xValue');
|
|
|
|
// double yValue = double.parse(entry['ObsValue']['Value']);
|
|
double yValue;
|
|
var value = entry['ObsValue']['Value'];
|
|
|
|
print('LineTrend $value');
|
|
|
|
if (value is int) {
|
|
yValue = value.toDouble();
|
|
} else if (value is double) {
|
|
yValue = value;
|
|
} else if (value is String) {
|
|
yValue =
|
|
double.tryParse(value) ?? 0.0; // Handle invalid strings safely
|
|
} else {
|
|
throw Exception(
|
|
"Unexpected value type: ${value.runtimeType}",
|
|
);
|
|
}
|
|
print('LineTrendX $xValue');
|
|
print('LineTrendY $yValue');
|
|
return FlSpot(xValue, yValue);
|
|
}).toList()
|
|
..sort((a, b) => a.x.compareTo(b.x));
|
|
|
|
print('spots - $spots');
|
|
|
|
// lineChartLabel = spots;
|
|
|
|
// List<FlSpot> spots = filteredData
|
|
// .where((entry) => entry['ObsKey'][groupByKey] == group)
|
|
// .map<FlSpot>((entry) {
|
|
// String timePeriod = entry['ObsKey']['TIME_PERIOD'];
|
|
// List<String> parts = timePeriod.split('-'); // Split "2017-01" into ["2017", "01"]
|
|
//
|
|
// double year = double.parse(parts[0]); // Convert "2017" to 2017.0
|
|
// double month = double.parse(parts[1]) / 12; // Convert "01" to 1/12
|
|
//
|
|
// double xValue = year + month; // E.g., "2017-06" becomes 2017.5
|
|
// double yValue = double.parse(entry['ObsValue']['Value']);
|
|
//
|
|
// return FlSpot(xValue, yValue);
|
|
// }).toList();
|
|
|
|
print('lineGrp2');
|
|
// Add a line for this group
|
|
lineBars.add(
|
|
LineChartBarData(
|
|
show: true,
|
|
spots: spots,
|
|
isCurved: true,
|
|
color: groupColorMap[group],
|
|
barWidth: 3,
|
|
isStrokeCapRound: true,
|
|
dotData: FlDotData(show: true),
|
|
belowBarData: BarAreaData(show: false),
|
|
),
|
|
);
|
|
}
|
|
|
|
return lineBars;
|
|
}
|
|
|
|
// Helper functions for chart styles
|
|
LineTouchData lineTouchData1(BuildContext context) {
|
|
var chartConversion = chartData['chart_type_json']['conversion'];
|
|
var number_format = chartData['chart_type_json']['number_format'];
|
|
return LineTouchData(
|
|
touchSpotThreshold: 10,
|
|
touchTooltipData: LineTouchTooltipData(
|
|
// tooltipBgColor: Colors.black.withOpacity(0.7), // Tooltip background
|
|
tooltipRoundedRadius: 8,
|
|
fitInsideHorizontally: true, // Ensure it fits within the screen
|
|
fitInsideVertically: true,
|
|
tooltipPadding: EdgeInsets.all(8),
|
|
tooltipMargin: 16, // Adds margin to prevent clipping
|
|
getTooltipColor: (spot) => Colors.black,
|
|
getTooltipItems: (List<LineBarSpot> lineBarsSpot) {
|
|
return lineBarsSpot.map((lineBarSpot) {
|
|
Color lineColor = lineBarSpot.bar is LineChartBarData
|
|
? (lineBarSpot.bar).color ?? Colors.white
|
|
: Colors.white; // Extract bar color safely
|
|
return LineTooltipItem(
|
|
'',
|
|
const TextStyle(),
|
|
children: [
|
|
TextSpan(
|
|
text: '● ', // Unicode circle
|
|
style: TextStyle(
|
|
color: lineColor,
|
|
fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
),
|
|
), // Set circle color to match bar
|
|
),
|
|
TextSpan(
|
|
// text: formatNumber(lineBarSpot.y),
|
|
text: (chartConversion != null &&
|
|
chartConversion.isNotEmpty &&
|
|
number_format != null)
|
|
? formatNumberConversion(
|
|
lineBarSpot.y,
|
|
chartConversion,
|
|
number_format,
|
|
)
|
|
: formatNumber(lineBarSpot.y),
|
|
// text: ' ${lineBarSpot.y}', // Keep the value white
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
)
|
|
),
|
|
),
|
|
],
|
|
textAlign: TextAlign.left,
|
|
);
|
|
}).toList();
|
|
},
|
|
),
|
|
handleBuiltInTouches: true,
|
|
);
|
|
}
|
|
|
|
//
|
|
// LineTouchData lineTouchData1() {
|
|
// var chartConversion = chartData['chart_type_json']['conversion'];
|
|
// var number_format = chartData['chart_type_json']['number_format'];
|
|
// return LineTouchData(
|
|
// enabled: true,
|
|
// handleBuiltInTouches: true,
|
|
// touchCallback:
|
|
// (FlTouchEvent event, LineTouchResponse? response) {
|
|
// if (response == null || response.lineBarSpots == null) {
|
|
// return;
|
|
// }
|
|
// // if (event is FlTapUpEvent) {
|
|
// // final spotIndex = response.lineBarSpots!.first.spotIndex;
|
|
// // setState(() {
|
|
// // if (showingTooltipOnSpots.contains(spotIndex)) {
|
|
// // showingTooltipOnSpots.remove(spotIndex);
|
|
// // } else {
|
|
// // showingTooltipOnSpots.add(spotIndex);
|
|
// // }
|
|
// // });
|
|
// // }
|
|
// },
|
|
// mouseCursorResolver:
|
|
// (FlTouchEvent event, LineTouchResponse? response) {
|
|
// if (response == null || response.lineBarSpots == null) {
|
|
// return SystemMouseCursors.basic;
|
|
// }
|
|
// return SystemMouseCursors.click;
|
|
// },
|
|
// touchSpotThreshold: 5,
|
|
// touchTooltipData: LineTouchTooltipData(
|
|
// tooltipRoundedRadius: 0,
|
|
// getTooltipColor: (spot) => Colors.transparent,
|
|
// fitInsideHorizontally: true, // Ensure it fits within the screen
|
|
// fitInsideVertically: true,
|
|
// tooltipPadding: EdgeInsets.all(8),
|
|
// tooltipMargin: 16,
|
|
// getTooltipItems: (List<LineBarSpot> touchedSpots) {
|
|
// return touchedSpots.map((LineBarSpot touchedSpot) {
|
|
// return LineTooltipItem(
|
|
// // formatNumber(touchedSpot.y),
|
|
// (chartConversion != null &&
|
|
// chartConversion.isNotEmpty &&
|
|
// number_format != null)
|
|
// ? formatNumberConversion(touchedSpot.y, chartConversion, number_format)
|
|
// : formatNumber(touchedSpot.y),
|
|
// TextStyle(
|
|
// color: Colors.black87,
|
|
// fontWeight: FontWeight.w400,
|
|
// fontSize: 15,
|
|
// ),
|
|
// );
|
|
// }).toList();
|
|
// },
|
|
// ),
|
|
// getTouchedSpotIndicator: (
|
|
// _,
|
|
// indicators,
|
|
// ) {
|
|
// return indicators
|
|
// .map((int index) => const TouchedSpotIndicatorData(
|
|
// FlLine(color: Colors.transparent),
|
|
// FlDotData(show: true),
|
|
// ))
|
|
// .toList();
|
|
// },
|
|
// distanceCalculator: (Offset touchPoint, Offset spotPixelCoordinates) =>
|
|
// (touchPoint - spotPixelCoordinates).distance,
|
|
// );
|
|
// }
|
|
|
|
FlGridData gridData() {
|
|
return FlGridData(
|
|
show: false,
|
|
drawVerticalLine: true,
|
|
getDrawingHorizontalLine: (value) =>
|
|
FlLine(color: Colors.grey, strokeWidth: 1),
|
|
getDrawingVerticalLine: (value) =>
|
|
FlLine(color: Colors.grey, strokeWidth: 1),
|
|
);
|
|
}
|
|
|
|
FlTitlesData titlesData1(Set<double> xValues,BuildContext context) {
|
|
print('tileDATa1xvalueline2 - $xValues');
|
|
|
|
double findClosest(double value, Set<double> values) {
|
|
return values.reduce(
|
|
(a, b) => (value - a).abs() < (value - b).abs() ? a : b,
|
|
);
|
|
}
|
|
|
|
return FlTitlesData(
|
|
leftTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
reservedSize: 40,
|
|
getTitlesWidget: (value, meta) {
|
|
// Format values as millions (M)
|
|
// String formattedValue;
|
|
String? formattedValue;
|
|
print('LineTrend2val1 - $value ');
|
|
|
|
// if (value % 10 == 0) {
|
|
// // Check if the value is in the millions or thousands range
|
|
// if (kDebugMode) {
|
|
// print('LineTrend2valKmode - $value ');
|
|
// }
|
|
// if (value >= 1000000000000) {
|
|
// formattedValue =
|
|
// '${(value / 1000000000000).toStringAsFixed(0)}T';
|
|
// } else if (value >= 1000000000) {
|
|
// formattedValue = '${(value / 1000000000).toStringAsFixed(0)}B';
|
|
// } else if (value >= 1000000) {
|
|
// formattedValue = '${(value / 1000000).toStringAsFixed(0)}M';
|
|
// } else if (value >= 1000) {
|
|
// formattedValue = '${(value / 1000).toStringAsFixed(0)}k';
|
|
// } else {
|
|
// formattedValue = value.toStringAsFixed(
|
|
// 0); // No decimals for values less than 1000
|
|
// }
|
|
//
|
|
// // Skip rendering if the formatted value is the same as the last one
|
|
// if (_lastFormattedValue == formattedValue) {
|
|
// return const SizedBox.shrink(); // Empty widget for duplicates
|
|
// }
|
|
// // Update the last formatted value for the next comparison
|
|
// _lastFormattedValue = formattedValue;
|
|
//
|
|
// print('LINETREND_POP- $formattedValue');
|
|
// // if (int.parse(formattedValue.replaceAll(RegExp(r'[^0-9]'), '')) % 10 != 0) {
|
|
// // return const SizedBox.shrink();
|
|
// // }
|
|
//
|
|
//
|
|
// // print('formattedValueLine - $formattedValue');
|
|
// return Text(
|
|
// formattedValue,
|
|
// textAlign: TextAlign.center,
|
|
// style: TextStyle(
|
|
// fontSize: 10,
|
|
// ));
|
|
//
|
|
// }
|
|
|
|
// Ensure value is a multiple of 10k, 2M, 100B, or 1T before processing
|
|
if (value >= 1000000000000) {
|
|
// Trillions (T)
|
|
if (value % 1000000000000 == 0) {
|
|
// Only multiples of 1T
|
|
formattedValue =
|
|
'${(value / 1000000000000).toStringAsFixed(0)}T';
|
|
}
|
|
} else if (value >= 1000000000) {
|
|
// Billions (B)
|
|
if (value % 100000000000 == 0) {
|
|
// Only multiples of 100B
|
|
formattedValue = '${(value / 1000000000).toStringAsFixed(0)}B';
|
|
}
|
|
} else if (value >= 1000000) {
|
|
// Millions (M)
|
|
if (value % 2000000 == 0) {
|
|
// Only multiples of 2M
|
|
formattedValue = '${(value / 1000000).toStringAsFixed(0)}M';
|
|
}
|
|
} else if (value >= 10000) {
|
|
// Thousands (k)
|
|
if (value % 10000 == 0) {
|
|
// Only multiples of 10k
|
|
formattedValue = '${(value / 1000).toStringAsFixed(0)}k';
|
|
}
|
|
}
|
|
|
|
print(
|
|
'Value: $value | Formatted: ${formattedValue ?? "Hidden"}',
|
|
); // Debugging
|
|
|
|
if (formattedValue != null) {
|
|
return Text(
|
|
formattedValue,
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
fontSize: 10,
|
|
fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
)
|
|
),
|
|
);
|
|
}
|
|
|
|
return const SizedBox.shrink();
|
|
},
|
|
),
|
|
),
|
|
bottomTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
interval: null,
|
|
// interval: 10, // Ensure each year is shown only once
|
|
getTitlesWidget: (value, meta) {
|
|
// print('BtmTiles :-$value');
|
|
// print('BtmTilesmeta :-$meta');
|
|
// if (xValues.contains(value))
|
|
double closestValue = findClosest(value, xValues);
|
|
if ((closestValue - value).abs() < 0.15) {
|
|
// print("Bottomtiles");
|
|
// print(value);
|
|
return Padding(
|
|
padding: const EdgeInsets.only(top: 5, left: 20.0),
|
|
child: SizedBox(
|
|
width: 40,
|
|
child: Transform.rotate(
|
|
// angle: 0.0,
|
|
angle: -1.5, // Slight rotation to improve readability
|
|
child: Text(
|
|
value.toInt().toString(),
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
color: Colors.black,
|
|
fontSize: 12,
|
|
fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
)
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
} else {
|
|
return SizedBox.shrink(); // Hide non-relevant labels
|
|
}
|
|
},
|
|
reservedSize: 40,
|
|
),
|
|
),
|
|
topTitles: AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false), // Hide top titles
|
|
),
|
|
rightTitles: AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false), // Hide right titles
|
|
),
|
|
);
|
|
}
|
|
|
|
FlBorderData borderData() {
|
|
return FlBorderData(
|
|
show: true,
|
|
border: Border(
|
|
bottom: BorderSide(color: Colors.black, width: 1), // Show bottom border
|
|
left: BorderSide(color: Colors.black, width: 1), // Show left border
|
|
top: BorderSide.none, // Hide top border
|
|
right: BorderSide.none, // Hide right border
|
|
),
|
|
);
|
|
}
|
|
|
|
// End Of line trend chart
|
|
|
|
// Define the list of unique colors
|
|
// final List<Color> uniqueColors1 = [
|
|
// Color(0xFF648CBA),
|
|
// Color(0xFF90B0D5),
|
|
// Color(0xFF98BCE5),
|
|
// Color(0xFFA7B5C5),
|
|
// Color(0xFFBED3EC),
|
|
// Color(0xFFD4E3F4),
|
|
// ];
|
|
//
|
|
// final List<Color> uniqueColors2 = [
|
|
// Color(0xFFD9BB99),
|
|
// Color(0xFF87766E),
|
|
// Color(0xFFC6A885),
|
|
// Color(0xFFA28565),
|
|
// Color(0xFFBFB29B),
|
|
// Color(0xFFE8D8BB),
|
|
// ];
|
|
//
|
|
// final List<Color> uniqueColors = [
|
|
// Color(0xFF376C79),
|
|
// Color(0xFF578D9C),
|
|
// Color(0xFF7DAFBC),
|
|
// Color(0xFF86C7D9),
|
|
// Color(0xFF989898),
|
|
// ];
|
|
|
|
Color _getColorForGroup(int index) {
|
|
// Use the index to get a color from the uniqueColors list
|
|
return uniqueColors[index % uniqueColors.length];
|
|
}
|
|
|
|
List<BarChartGroupData> _generateBarGroups(
|
|
BuildContext context,
|
|
dynamic chartData,
|
|
String groupByKey,
|
|
) {
|
|
Map<String, Map<String, double>> groupedData = {};
|
|
print('flStackedBar3');
|
|
// Group data by `group_by` and `TIME_PERIOD`, accumulating the values for each group and year
|
|
for (var entry in chartData['response']) {
|
|
String groupValue = entry['ObsKey'][groupByKey];
|
|
String timePeriod = entry['ObsKey']['TIME_PERIOD'];
|
|
// double value = double.tryParse(entry['ObsValue']['Value']) ?? 0.0;
|
|
|
|
double value;
|
|
var rawValue = entry['ObsValue']['Value'];
|
|
|
|
if (rawValue is num) {
|
|
value = rawValue.toDouble();
|
|
} else if (rawValue is double) {
|
|
value = rawValue;
|
|
} else {
|
|
value = double.tryParse(rawValue.toString()) ?? 0.0;
|
|
}
|
|
|
|
print('flStackedBar3.1');
|
|
|
|
// print('fl_groupValue $groupValue');
|
|
// print('fl_timePeriod $timePeriod');
|
|
// print('fl_value $value');
|
|
|
|
if (!groupedData.containsKey(groupValue)) {
|
|
groupedData[groupValue] = {};
|
|
}
|
|
|
|
if (!groupedData[groupValue]!.containsKey(timePeriod)) {
|
|
groupedData[groupValue]![timePeriod] = 0.0;
|
|
}
|
|
groupedData[groupValue]![timePeriod] =
|
|
groupedData[groupValue]![timePeriod]! + value;
|
|
}
|
|
|
|
// Create BarChartGroupData for each group
|
|
List<BarChartGroupData> barGroups = [];
|
|
List<String> timePeriods = groupedData.values.first.keys.toList();
|
|
print('timePeriods $timePeriods');
|
|
|
|
// double barWidth = calculateBarWidth(context, timePeriods.length);
|
|
|
|
// For each time period, generate a BarChartGroupData
|
|
for (int i = 0; i < timePeriods.length; i++) {
|
|
// Intermediate variable to track the current toY value as we stack bars
|
|
double currentToY = 0;
|
|
|
|
List<BarChartRodStackItem> rodStackItems = [];
|
|
|
|
// For each group (e.g., region), create stacked bars
|
|
int groupIndex = 0; // Track group index for color assignment
|
|
for (var group in groupedData.keys) {
|
|
double value = groupedData[group]![timePeriods[i]] ?? 0.0;
|
|
// Add stacked item with current `toY` value and the incremented one
|
|
rodStackItems.add(
|
|
BarChartRodStackItem(
|
|
currentToY, // The current bottom of the stack
|
|
currentToY + value, // The new top of the stack
|
|
_getColorForGroup(groupIndex), // Color based on the index
|
|
),
|
|
);
|
|
|
|
// Update currentToY after adding the value for this stack
|
|
currentToY += value;
|
|
|
|
groupIndex++; // Increment group index for the next group
|
|
}
|
|
|
|
// Create BarChartGroupData with the final stacked value
|
|
BarChartGroupData barGroup = BarChartGroupData(
|
|
x: i, // Index for the x-axis based on the time period
|
|
barRods: [
|
|
BarChartRodData(
|
|
toY: currentToY, // Use the accumulated `currentToY` value
|
|
rodStackItems: rodStackItems, // Add the stacked items
|
|
width: 20,
|
|
// width: barWidth,
|
|
borderRadius: BorderRadius.zero,
|
|
color:
|
|
Colors.black, // This will act as a container for stacked items
|
|
),
|
|
],
|
|
);
|
|
|
|
barGroups.add(barGroup);
|
|
}
|
|
|
|
return barGroups;
|
|
}
|
|
|
|
// Function to dynamically generate titles for the x-axis (time periods)
|
|
List<Widget> _generateXTitles(dynamic chartData,BuildContext context) {
|
|
Set<String> timePeriods = {};
|
|
for (var entry in chartData['response']) {
|
|
timePeriods.add(entry['ObsKey']['TIME_PERIOD']);
|
|
}
|
|
return timePeriods.map((period) {
|
|
return Text(period,
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
)
|
|
)
|
|
);
|
|
}).toList();
|
|
}
|
|
|
|
// Function to dynamically set left axis titles (values)
|
|
String? _lastFormattedValue;
|
|
Widget _generateLeftTitles(double value, TitleMeta meta) {
|
|
String formattedValue;
|
|
|
|
if (value % 1000 == 0) {
|
|
// Check if the value is in the millions or thousands range
|
|
if (value >= 1000000) {
|
|
formattedValue = '${(value / 1000000).toStringAsFixed(0)}M';
|
|
} else if (value >= 1000) {
|
|
formattedValue = '${(value / 1000).toStringAsFixed(0)}k';
|
|
} else {
|
|
formattedValue = value.toStringAsFixed(
|
|
0,
|
|
); // No decimals for values less than 1000
|
|
}
|
|
|
|
// Skip rendering if the formatted value is the same as the last one
|
|
if (_lastFormattedValue == formattedValue) {
|
|
return const SizedBox.shrink(); // Empty widget for duplicates
|
|
}
|
|
// Update the last formatted value for the next
|
|
_lastFormattedValue = formattedValue;
|
|
|
|
print('formattedValue - $formattedValue');
|
|
return Text(formattedValue,
|
|
style: TextStyle(
|
|
fontSize: 10,
|
|
));
|
|
}
|
|
return const SizedBox.shrink();
|
|
// return Container();
|
|
}
|
|
|
|
/// Start horizontal rotate and fl_multi_bar bar
|
|
// List<BarChartGroupData> _buildBarGroups(dynamic chartData) {
|
|
// String groupByKey = chartData['group_by'];
|
|
// if (groupByKey == null || chartData['response'] == null) {
|
|
// return [];
|
|
// }
|
|
//
|
|
// // Extract unique group_by values
|
|
// Set<String> groupByValues = extractGroupByValues(chartData, groupByKey);
|
|
//
|
|
// // Create a map to hold grouped data
|
|
// Map<String, List<Map<String, dynamic>>> groupedData = {};
|
|
// for (var entry in chartData['response']) {
|
|
// String groupValue = entry['ObsKey'][groupByKey] ?? '';
|
|
// if (groupValue.isNotEmpty) {
|
|
// groupedData.putIfAbsent(groupValue, () => []).add(entry);
|
|
// }
|
|
// }
|
|
//
|
|
// // Convert grouped data into BarChartGroupData
|
|
// List<BarChartGroupData> barGroups = [];
|
|
// int groupIndex = 0;
|
|
//
|
|
// groupedData.forEach((key, values) {
|
|
// int colorIndex = 0; // Track the color for each bar within the group
|
|
//
|
|
// List<BarChartRodData> rods = values.map((entry) {
|
|
// double yValue = double.tryParse(entry['ObsValue']['Value'] ?? '0') ?? 0;
|
|
//
|
|
// // Cycle through colors for each bar
|
|
// final barColor = uniqueColors[colorIndex % uniqueColors.length];
|
|
// colorIndex++;
|
|
//
|
|
// return BarChartRodData(
|
|
// fromY: 0,
|
|
// toY: yValue,
|
|
// color: barColor,
|
|
// width: 20, // Adjust bar width for better visibility
|
|
// borderRadius: BorderRadius.circular(4),
|
|
// );
|
|
// }).toList();
|
|
//
|
|
// barGroups.add(BarChartGroupData(
|
|
// x: groupIndex,
|
|
// barRods: rods,
|
|
// showingTooltipIndicators: [0],
|
|
// ));
|
|
// groupIndex++;
|
|
// });
|
|
//
|
|
// return barGroups;
|
|
// }
|
|
|
|
double _calculateMaxY(dynamic chartData) {
|
|
// Dynamically calculate the maximum Y value
|
|
|
|
print('hormulti_bar2');
|
|
|
|
List<dynamic> response = chartData['response'] ?? [];
|
|
double maxY = 0;
|
|
|
|
for (var entry in response) {
|
|
// double value = double.tryParse(entry['ObsValue']['Value'] ?? '0') ?? 0;
|
|
double value = (entry['ObsValue']['Value'] as num?)?.toDouble() ?? 0;
|
|
|
|
if (value > maxY) {
|
|
maxY = value;
|
|
}
|
|
}
|
|
|
|
// Apply different buffers based on maxY value
|
|
// return maxY < 500 ? maxY * 3.5 : maxY * 1.5;
|
|
return maxY * 1.5; // Add 10% buffer for better visualization
|
|
}
|
|
|
|
List<BarChartGroupData> _buildHorizontalRotateBarGroups(
|
|
dynamic chartData,
|
|
Set<String> groupByValues,
|
|
) {
|
|
String groupByKeyValueData;
|
|
|
|
if (chartData['chart_type_json']['chart_type'] == 'bar_chart_horizontal' ||
|
|
chartData['chart_type_json']['chart_type'] == 'horizontal_rotate') {
|
|
groupByKeyValueData = chartData['chart_type_json']['y_group'] ?? '';
|
|
} else {
|
|
groupByKeyValueData = chartData['chart_type_json']['x_group'] ?? '';
|
|
}
|
|
|
|
List<dynamic> responseData = chartData['response'];
|
|
List<BarChartGroupData> barGroups = [];
|
|
int colorIndex = 0;
|
|
|
|
print('hormulti_bar1.1');
|
|
|
|
// Iterate through groupByValues and populate BarChartGroupData
|
|
for (int i = 0; i < groupByValues.length; i++) {
|
|
String groupValue = groupByValues.elementAt(i);
|
|
|
|
// Filter data for the current group (grouping by CROP_TYPE)
|
|
List<dynamic> groupData = responseData.where((entry) {
|
|
return entry['ObsKey'][groupByKeyValueData] == groupValue;
|
|
}).toList();
|
|
|
|
// Create BarChartRodData for each bar in the group
|
|
List<BarChartRodData> barRods = groupData.map((data) {
|
|
// Ensure to retrieve and parse 'ObsValue' value (which should be a double)
|
|
double value =
|
|
double.tryParse(data['ObsValue']['Value'].toString()) ?? 0.0;
|
|
double minBarHeight = 0.1;
|
|
print('multi_bar1.1');
|
|
// final List<Color> uniqueColorsForTwo = [
|
|
// Color(0xFF648CBA),
|
|
// Color(0xFF90B0D5),
|
|
// ];
|
|
|
|
// Use bodyColor instead of hardcoded colors
|
|
|
|
final barColor;
|
|
if (chartData['dataset'] == 'general_education' ||
|
|
chartData['dataset'] == 'higher_education' ||
|
|
chartData['dataset'] == 'air_transport' ||
|
|
chartData['dataset'] == 'labour_force' ||
|
|
chartData['dataset'] == 'gdp' ||
|
|
chartData['dataset'] == 'hotels' ||
|
|
chartData['dataset'] == 'hotel_guests' ||
|
|
chartData['dataset'] == 'health_services' ||
|
|
chartData['dataset'] == 'clinics') {
|
|
barColor = uniqueColorsForTwo[colorIndex % uniqueColorsForTwo.length];
|
|
colorIndex++;
|
|
} else if (chartData['dataset'] == 'cropsk') {
|
|
barColor =
|
|
uniqueColorsForThree[colorIndex % uniqueColorsForThree.length];
|
|
colorIndex++;
|
|
} else if (chartData['dataset'] == 'oil_and_gas') {
|
|
barColor =
|
|
uniqueColorsForFour[colorIndex % uniqueColorsForFour.length];
|
|
colorIndex++;
|
|
} else {
|
|
barColor = uniqueColors[colorIndex % uniqueColors.length];
|
|
colorIndex++;
|
|
}
|
|
|
|
return BarChartRodData(
|
|
// toY: value,
|
|
|
|
toY: value == 0 ? minBarHeight : value, // Use the parsed value
|
|
color: barColor, // Dynamic color
|
|
width: 20,
|
|
|
|
// backDrawRodData: BackgroundBarChartRodData(
|
|
// show: true,
|
|
// toY: 400000,
|
|
// color: Colors.grey.shade300,
|
|
// ),
|
|
);
|
|
}).toList();
|
|
|
|
// Add BarChartGroupData for the group
|
|
barGroups.add(
|
|
BarChartGroupData(
|
|
x: i,
|
|
barRods: barRods,
|
|
showingTooltipIndicators: List.generate(
|
|
barRods.length,
|
|
(index) => index,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
return barGroups;
|
|
}
|
|
|
|
List<BarChartGroupData> _buildHorizontalRotateBarGroupsBarColors(
|
|
dynamic chartData,
|
|
Set<String> groupByValues,
|
|
Map<String, Color> chartBarColors,
|
|
) {
|
|
String groupByKeyValueData1;
|
|
|
|
if (chartData['chart_type_json']['chart_type'] == 'bar_chart_horizontal' ||
|
|
chartData['chart_type_json']['chart_type'] == 'horizontal_rotate') {
|
|
groupByKeyValueData1 = chartData['chart_type_json']['y_group'] ?? '';
|
|
} else {
|
|
groupByKeyValueData1 = chartData['chart_type_json']['x_group'] ?? '';
|
|
}
|
|
|
|
List<dynamic> responseData = chartData['response'];
|
|
List<BarChartGroupData> barGroups = [];
|
|
|
|
print('chartBarColorsRota- $chartBarColors');
|
|
|
|
// Define two shades for alternating colors
|
|
List<Color> uniqueColorsForTwo = [
|
|
chartBarColors['default'] ?? Colors.blue, // Original color
|
|
(chartBarColors['default'] ?? Colors.blue).withAlpha(
|
|
180,
|
|
), // Slightly modified shade
|
|
];
|
|
|
|
int colorIndex = 0;
|
|
// Iterate through groupByValues and populate BarChartGroupData
|
|
for (int i = 0; i < groupByValues.length; i++) {
|
|
String groupValue = groupByValues.elementAt(i);
|
|
|
|
// Filter data for the current group
|
|
List<dynamic> groupData = responseData.where((entry) {
|
|
return entry['ObsKey'][groupByKeyValueData1] == groupValue;
|
|
}).toList();
|
|
|
|
Map<String, String> genderMapping = {
|
|
'ذكر': 'Male', // Arabic for Male
|
|
'أنثى': 'Female', // Arabic for Female
|
|
};
|
|
|
|
// Sort data so "Male" appears first, "Female" second
|
|
groupData.sort((a, b) {
|
|
String genderA =
|
|
genderMapping[a['ObsKey']['GENDER']] ?? a['ObsKey']['GENDER'] ?? "";
|
|
String genderB =
|
|
genderMapping[b['ObsKey']['GENDER']] ?? b['ObsKey']['GENDER'] ?? "";
|
|
|
|
return (genderA == 'Male' ? 0 : 1).compareTo(genderB == 'Male' ? 0 : 1);
|
|
});
|
|
|
|
// Create BarChartRodData for each bar in the group
|
|
List<BarChartRodData> barRods = groupData.map((data) {
|
|
double value =
|
|
double.tryParse(data['ObsValue']['Value'].toString()) ?? 0.0;
|
|
|
|
// Get gender-based color
|
|
String gender = data['ObsKey']['GENDER'] ?? "";
|
|
// Convert Arabic gender to English if necessary
|
|
String normalizedGender = genderMapping[gender] ?? gender;
|
|
|
|
print('horizontalRotateGender - $gender');
|
|
// Map Arabic gender values to English equivalents
|
|
|
|
// Determine color dynamically
|
|
Color barColor;
|
|
if (chartData['dataset'] == 'health_services') {
|
|
barColor = uniqueColorsForTwo[
|
|
colorIndex % 2]; // Alternate between two colors
|
|
colorIndex++; // Update index for next bar
|
|
} else {
|
|
// barColor = chartBarColors[gender] ?? Colors.grey; // Default gender-based color
|
|
barColor = chartBarColors[normalizedGender] ?? Colors.grey;
|
|
}
|
|
|
|
print('GEG- $gender');
|
|
|
|
return BarChartRodData(
|
|
toY: value, // Use the parsed value
|
|
color: barColor, // Gender-based dynamic color
|
|
width: 20,
|
|
);
|
|
}).toList();
|
|
|
|
// Add BarChartGroupData for the group
|
|
barGroups.add(
|
|
BarChartGroupData(
|
|
x: i,
|
|
barRods: barRods,
|
|
showingTooltipIndicators: List.generate(
|
|
barRods.length,
|
|
(index) => index,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
return barGroups;
|
|
}
|
|
|
|
/// End horizontal rotate and fl_multi_bar bar
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return buildChart(chartData, context);
|
|
}
|
|
}
|
|
|
|
Widget _buildChartLegend(
|
|
Map<String, List<String>> groupedCrops,
|
|
Map<String, Color> parsedChartBarColors,
|
|
List<Color> uniqueColors,BuildContext context
|
|
) {
|
|
// Extract unique crop types
|
|
Set<String> uniqueCropTypes =
|
|
groupedCrops.values.expand((list) => list).toSet();
|
|
|
|
print('HorizontalLegends2 -$uniqueCropTypes');
|
|
print('HorizontalLegends -$parsedChartBarColors');
|
|
|
|
return Wrap(
|
|
alignment: WrapAlignment.center,
|
|
spacing: 12,
|
|
runSpacing: 6,
|
|
children: uniqueCropTypes.map((cropType) {
|
|
// Color cropColor = parsedChartBarColors[cropType] ?? Colors.grey; // Fetch color for each crop type
|
|
int index = uniqueCropTypes.toList().indexOf(
|
|
cropType,
|
|
); // Get index for cycling colors
|
|
Color cropColor = parsedChartBarColors.isNotEmpty &&
|
|
parsedChartBarColors.containsKey(cropType)
|
|
? parsedChartBarColors[cropType]!
|
|
: uniqueColors[index % uniqueColors.length];
|
|
|
|
return Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
CircleAvatar(radius: 6, backgroundColor: cropColor),
|
|
const SizedBox(width: 4),
|
|
Text(cropType, style: TextStyle(
|
|
fontSize: 12,
|
|
fontFamily: context.translate(
|
|
'Roboto',
|
|
'NotoKufi',
|
|
)
|
|
)),
|
|
],
|
|
);
|
|
}).toList(),
|
|
);
|
|
}
|
|
|
|
class BarValuePainter extends CustomPainter {
|
|
BarValuePainter(this.barGroups, this.constraints);
|
|
final List<BarChartGroupData> barGroups;
|
|
final BoxConstraints constraints;
|
|
|
|
@override
|
|
void paint(Canvas canvas, Size size) {
|
|
final textPainter = TextPainter(
|
|
textAlign: TextAlign.center,
|
|
textDirection: TextDirection.ltr,
|
|
);
|
|
|
|
final paint = Paint()..color = Colors.black;
|
|
|
|
for (var group in barGroups) {
|
|
for (var rod in group.barRods) {
|
|
final x = group.x.toDouble() * (size.width / barGroups.length);
|
|
final y = (1 - rod.toY / 400000) * size.height; // Normalize height
|
|
|
|
textPainter.text = TextSpan(
|
|
text: rod.toY.toStringAsFixed(1),
|
|
style: TextStyle(color: Colors.black, fontSize: 12),
|
|
);
|
|
|
|
textPainter.layout();
|
|
textPainter.paint(canvas, Offset(x - textPainter.width / 2, y - 20));
|
|
}
|
|
}
|
|
}
|
|
|
|
@override
|
|
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
|
|
}
|
|
|
|
double calculateBarWidth(BuildContext context, int totalBars) {
|
|
double width = MediaQuery.of(context).size.width; // Chart width
|
|
double padding = 16.0; // Space between bars
|
|
double availableWidth = (width - 100);
|
|
if (totalBars <= 0) {
|
|
throw ArgumentError("TotalBars must be greater than 0");
|
|
}
|
|
|
|
double barWidth = (availableWidth - (padding * (totalBars - 1))) / totalBars;
|
|
|
|
print('barWidth - $barWidth');
|
|
|
|
// Ensure bar width does not exceed availableWidth
|
|
if (barWidth > availableWidth) {
|
|
barWidth = availableWidth;
|
|
}
|
|
|
|
// Optional: Add a minimum width constraint if needed
|
|
double minWidth = 10.0; // Example minimum width
|
|
if (barWidth < minWidth) {
|
|
barWidth = minWidth;
|
|
}
|
|
|
|
return barWidth;
|
|
}
|
|
|
|
class ChartData {
|
|
ChartData({this.x, required this.y, this.xDateTime});
|
|
final String? x;
|
|
final double y;
|
|
final DateTime? xDateTime;
|
|
}
|