luckyimnotanigger/adguard-home-manager
1
0
Fork 0
mirror of https://github.com/JGeek00/adguard-home-manager.git synced 2025-06-08 15:47:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added animation top items

Browse source
This commit is contained in:
Juan Gilsanz Polo 2023-11-01 20:47:37 +01:00
parent ad7267bc5c
commit 2837f85435
6 changed files with 564 additions and 450 deletions
Download patch file Download diff file Expand all files Collapse all files

2
lib/screens/clients/client/logs_list_client.dart
View file

@ -6,7 +6,7 @@ import 'package:provider/provider.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:adguard_home_manager/screens/logs/log_tile.dart'; import 'package:adguard_home_manager/screens/logs/log_tile.dart';
import 'package:adguard_home_manager/screens/logs/log_details_screen.dart'; import 'package:adguard_home_manager/screens/logs/details/log_details_screen.dart';
import 'package:adguard_home_manager/functions/desktop_mode.dart'; import 'package:adguard_home_manager/functions/desktop_mode.dart';
import 'package:adguard_home_manager/models/logs.dart'; import 'package:adguard_home_manager/models/logs.dart';

2
lib/screens/home/home.dart
View file

@ -11,7 +11,7 @@ import 'package:adguard_home_manager/screens/home/server_status.dart';
import 'package:adguard_home_manager/screens/home/combined_chart.dart'; import 'package:adguard_home_manager/screens/home/combined_chart.dart';
import 'package:adguard_home_manager/screens/home/appbar.dart'; import 'package:adguard_home_manager/screens/home/appbar.dart';
import 'package:adguard_home_manager/screens/home/fab.dart'; import 'package:adguard_home_manager/screens/home/fab.dart';
import 'package:adguard_home_manager/screens/home/top_items.dart'; import 'package:adguard_home_manager/screens/home/top_items/top_items.dart';
import 'package:adguard_home_manager/screens/home/chart.dart'; import 'package:adguard_home_manager/screens/home/chart.dart';
import 'package:adguard_home_manager/functions/number_format.dart'; import 'package:adguard_home_manager/functions/number_format.dart';

447
lib/screens/home/top_items.dart
View file

@ -1,447 +0,0 @@
// ignore_for_file: use_build_context_synchronously
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:adguard_home_manager/widgets/custom_pie_chart.dart';
import 'package:adguard_home_manager/widgets/domain_options.dart';
import 'package:adguard_home_manager/screens/top_items/top_items_modal.dart';
import 'package:adguard_home_manager/screens/top_items/top_items.dart';
import 'package:adguard_home_manager/models/applied_filters.dart';
import 'package:adguard_home_manager/providers/status_provider.dart';
import 'package:adguard_home_manager/providers/logs_provider.dart';
import 'package:adguard_home_manager/providers/app_config_provider.dart';
class TopItems extends StatefulWidget {
final String type;
final String label;
final List<Map<String, dynamic>> data;
final bool? clients;
const TopItems({
Key? key,
required this.type,
required this.label,
required this.data,
this.clients
}) : super(key: key);
@override
State<TopItems> createState() => _TopItemsState();
}
class _TopItemsState extends State<TopItems> {
bool _showChart = true;
final colors = [
Colors.red,
Colors.green,
Colors.blue,
Colors.orange,
Colors.teal,
Colors.grey
];
@override
void initState() {
_showChart = Provider.of<AppConfigProvider>(context, listen: false).showTopItemsChart;
super.initState();
}
@override
Widget build(BuildContext context) {
final statusProvider = Provider.of<StatusProvider>(context);
final width = MediaQuery.of(context).size.width;
List<Map<String, dynamic>> generateData() {
switch (widget.type) {
case 'topQueriedDomains':
return statusProvider.serverStatus!.stats.topQueriedDomains;
case 'topBlockedDomains':
return statusProvider.serverStatus!.stats.topBlockedDomains;
case 'topClients':
return statusProvider.serverStatus!.stats.topClients;
default:
return [];
}
}
Map<String, double> chartData() {
Map<String, double> values = {};
widget.data.sublist(0, widget.data.length > 5 ? 5 : widget.data.length).forEach((element) {
values = {
...values,
element.keys.first: element.values.first.toDouble()
};
});
if (widget.data.length > 5) {
final int rest = List<int>.from(
widget.data.sublist(5, widget.data.length).map((e) => e.values.first.toInt())
).reduce((a, b) => a + b);
values = {
...values,
AppLocalizations.of(context)!.others: rest.toDouble()
};
}
return values;
}
final List<Widget> itemsList = widget.data.sublist(
0,
widget.data.length > 5 ? 5 : widget.data.length
).asMap().entries.map((e) => RowItem(
clients: widget.clients ?? false,
domain: e.value.keys.toList()[0],
number: e.value.values.toList()[0].toString(),
type: widget.type,
chartColor: _showChart ? colors[e.key] : null,
)).toList();
final Widget noItems = Padding(
padding: const EdgeInsets.only(
bottom: 20,
top: 10
),
child: Text(
AppLocalizations.of(context)!.noItems,
style: TextStyle(
fontSize: 16,
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
);
final Widget chart = CustomPieChart(
data: chartData(),
colors: colors
);
return SizedBox(
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Row(
mainAxisAlignment: width <= 700
? MainAxisAlignment.spaceBetween
: MainAxisAlignment.center,
children: [
Text(
widget.label,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Theme.of(context).colorScheme.onSurface
),
),
if (width <= 700) TextButton(
onPressed: () => setState(() => _showChart = !_showChart),
child: Text(
_showChart
? AppLocalizations.of(context)!.hideChart
: AppLocalizations.of(context)!.showChart
)
)
],
),
),
const SizedBox(height: 24),
if (widget.data.isEmpty) noItems,
if (widget.data.isNotEmpty && width > 700) Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 1,
child: ConstrainedBox(
constraints: const BoxConstraints(
maxHeight: 250
),
child: Padding(
padding: const EdgeInsets.all(16),
child: chart,
),
)
),
Expanded(
flex: 2,
child: Column(
children: [
...itemsList,
OthersRowItem(items: widget.data)
]
),
)
],
),
if (widget.data.isNotEmpty && width <= 700) ...[
if (_showChart) ...[
SizedBox(
height: 150,
child: chart
),
const SizedBox(height: 16),
],
...itemsList,
if (_showChart) OthersRowItem(items: widget.data),
const SizedBox(height: 16),
],
if (widget.data.length > 5) ...[
Padding(
padding: const EdgeInsets.only(right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () => {
if (width > 700 || !(Platform.isAndroid || Platform.isIOS)) {
showDialog(
context: context,
barrierDismissible: false,
builder: (context) => TopItemsModal(
type: widget.type,
title: widget.label,
isClient: widget.clients,
data: generateData(),
)
)
}
else {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => TopItemsScreen(
type: widget.type,
title: widget.label,
isClient: widget.clients,
data: generateData(),
)
)
)
}
},
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(AppLocalizations.of(context)!.viewMore),
const SizedBox(width: 10),
const Icon(
Icons.arrow_forward,
size: 20,
)
],
)
),
],
),
),
const SizedBox(height: 10),
]
],
),
);
}
}
class RowItem extends StatelessWidget {
final String type;
final Color? chartColor;
final String domain;
final String number;
final bool clients;
const RowItem({
Key? key,
required this.type,
this.chartColor,
required this.domain,
required this.number,
required this.clients
}) : super(key: key);
@override
Widget build(BuildContext context) {
final statusProvider = Provider.of<StatusProvider>(context);
final appConfigProvider = Provider.of<AppConfigProvider>(context);
final logsProvider = Provider.of<LogsProvider>(context);
String? name;
if (clients == true) {
try {
name = statusProvider.serverStatus!.clients.firstWhere((c) => c.ids.contains(domain)).name;
} catch (e) {
// ---- //
}
}
return Material(
color: Colors.transparent,
child: DomainOptions(
item: domain,
isClient: type == 'topClients',
isBlocked: type == 'topBlockedDomains',
onTap: () {
if (type == 'topQueriedDomains' || type == 'topBlockedDomains') {
logsProvider.setSearchText(domain);
logsProvider.setSelectedClients(null);
logsProvider.setAppliedFilters(
AppliedFiters(
selectedResultStatus: 'all',
searchText: domain,
clients: null
)
);
appConfigProvider.setSelectedScreen(2);
}
else if (type == 'topClients') {
logsProvider.setSearchText(null);
logsProvider.setSelectedClients([domain]);
logsProvider.setAppliedFilters(
AppliedFiters(
selectedResultStatus: 'all',
searchText: null,
clients: [domain]
)
);
}
},
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 8
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Row(
children: [
if (chartColor != null) Container(
margin: const EdgeInsets.only(right: 16),
width: 12,
height: 12,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: chartColor
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
domain,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
color: Theme.of(context).colorScheme.onSurface
),
),
if (name != null) ...[
const SizedBox(height: 5),
Text(
name,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14,
color: Theme.of(context).colorScheme.onSurfaceVariant
),
),
]
],
),
),
],
),
),
const SizedBox(width: 16),
Text(
number,
style: TextStyle(
color: Theme.of(context).colorScheme.onSurface
),
)
],
),
),
),
);
}
}
class OthersRowItem extends StatelessWidget {
final List<Map<String, dynamic>> items;
const OthersRowItem({
Key? key,
required this.items
}) : super(key: key);
@override
Widget build(BuildContext context) {
if (items.length <= 5) {
return const SizedBox();
}
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 8
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Row(
children: [
Container(
margin: const EdgeInsets.only(right: 16),
width: 12,
height: 12,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.grey
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
AppLocalizations.of(context)!.others,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
color: Theme.of(context).colorScheme.onSurface
),
),
],
),
),
],
),
),
const SizedBox(width: 16),
Text(
List<int>.from(
items.sublist(5, items.length).map((e) => e.values.first.toInt())
).reduce((a, b) => a + b).toString(),
style: TextStyle(
color: Theme.of(context).colorScheme.onSurface
),
)
],
),
);
}
}

260
lib/screens/home/top_items/row_item.dart Normal file
View file

@ -0,0 +1,260 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:adguard_home_manager/widgets/domain_options.dart';
import 'package:adguard_home_manager/models/applied_filters.dart';
import 'package:adguard_home_manager/providers/app_config_provider.dart';
import 'package:adguard_home_manager/providers/logs_provider.dart';
import 'package:adguard_home_manager/providers/status_provider.dart';
class RowItem extends StatelessWidget {
final String type;
final Color chartColor;
final String domain;
final String number;
final bool clients;
final bool showColor;
const RowItem({
Key? key,
required this.type,
required this.chartColor,
required this.domain,
required this.number,
required this.clients,
required this.showColor,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final statusProvider = Provider.of<StatusProvider>(context);
final appConfigProvider = Provider.of<AppConfigProvider>(context);
final logsProvider = Provider.of<LogsProvider>(context);
String? name;
if (clients == true) {
try {
name = statusProvider.serverStatus!.clients.firstWhere((c) => c.ids.contains(domain)).name;
} catch (e) {
// ---- //
}
}
return Material(
color: Colors.transparent,
child: DomainOptions(
item: domain,
isClient: type == 'topClients',
isBlocked: type == 'topBlockedDomains',
onTap: () {
if (type == 'topQueriedDomains' || type == 'topBlockedDomains') {
logsProvider.setSearchText(domain);
logsProvider.setSelectedClients(null);
logsProvider.setAppliedFilters(
AppliedFiters(
selectedResultStatus: 'all',
searchText: domain,
clients: null
)
);
appConfigProvider.setSelectedScreen(2);
}
else if (type == 'topClients') {
logsProvider.setSearchText(null);
logsProvider.setSelectedClients([domain]);
logsProvider.setAppliedFilters(
AppliedFiters(
selectedResultStatus: 'all',
searchText: null,
clients: [domain]
)
);
}
},
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 8
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Row(
children: [
AnimatedContainer(
duration: const Duration(milliseconds: 200),
curve: Curves.ease,
margin: EdgeInsets.only(right: showColor ? 16 : 0),
width: showColor ? 12 : 0,
height: showColor ? 12 : 0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: chartColor
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
domain,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
color: Theme.of(context).colorScheme.onSurface
),
),
if (name != null) ...[
const SizedBox(height: 5),
Text(
name,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14,
color: Theme.of(context).colorScheme.onSurfaceVariant
),
),
]
],
),
),
],
),
),
const SizedBox(width: 16),
Text(
number,
style: TextStyle(
color: Theme.of(context).colorScheme.onSurface
),
)
],
),
),
),
);
}
}
class OthersRowItem extends StatefulWidget {
final List<Map<String, dynamic>> items;
final bool showColor;
const OthersRowItem({
Key? key,
required this.items,
required this.showColor,
}) : super(key: key);
@override
State<OthersRowItem> createState() => _OthersRowItemState();
}
class _OthersRowItemState extends State<OthersRowItem> with SingleTickerProviderStateMixin {
late AnimationController expandController;
late Animation<double> animation;
@override
void initState() {
super.initState();
prepareAnimations();
_runExpandCheck();
}
void prepareAnimations() {
expandController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 200)
);
animation = CurvedAnimation(
parent: expandController,
curve: Curves.ease,
);
}
void _runExpandCheck() {
if (widget.showColor) {
expandController.forward();
}
else {
expandController.reverse();
}
}
@override
void didUpdateWidget(oldWidget) {
super.didUpdateWidget(oldWidget);
_runExpandCheck();
}
@override
void dispose() {
expandController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
if (widget.items.length <= 5) {
return const SizedBox();
}
return SizeTransition(
axisAlignment: 1.0,
sizeFactor: animation,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 8
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Row(
children: [
Container(
margin: const EdgeInsets.only(right: 16),
width: 12,
height: 12,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.grey
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
AppLocalizations.of(context)!.others,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
color: Theme.of(context).colorScheme.onSurface
),
),
],
),
),
],
),
),
const SizedBox(width: 16),
Text(
List<int>.from(
widget.items.sublist(5, widget.items.length).map((e) => e.values.first.toInt())
).reduce((a, b) => a + b).toString(),
style: TextStyle(
color: Theme.of(context).colorScheme.onSurface
),
)
],
),
),
);
}
}

299
lib/screens/home/top_items/top_items.dart Normal file
View file

@ -0,0 +1,299 @@
// ignore_for_file: use_build_context_synchronously
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:adguard_home_manager/screens/home/top_items/row_item.dart';
import 'package:adguard_home_manager/widgets/custom_pie_chart.dart';
import 'package:adguard_home_manager/screens/top_items/top_items_modal.dart';
import 'package:adguard_home_manager/screens/top_items/top_items.dart';
import 'package:adguard_home_manager/providers/status_provider.dart';
import 'package:adguard_home_manager/providers/app_config_provider.dart';
class TopItems extends StatefulWidget {
final String type;
final String label;
final List<Map<String, dynamic>> data;
final bool? clients;
const TopItems({
Key? key,
required this.type,
required this.label,
required this.data,
this.clients
}) : super(key: key);
@override
State<TopItems> createState() => _TopItemsState();
}
class _TopItemsState extends State<TopItems> {
bool _showChart = true;
final colors = [
Colors.red,
Colors.green,
Colors.blue,
Colors.orange,
Colors.teal,
Colors.grey
];
@override
void initState() {
_showChart = Provider.of<AppConfigProvider>(context, listen: false).showTopItemsChart;
super.initState();
}
@override
Widget build(BuildContext context) {
final statusProvider = Provider.of<StatusProvider>(context);
final width = MediaQuery.of(context).size.width;
List<Map<String, dynamic>> generateData() {
switch (widget.type) {
case 'topQueriedDomains':
return statusProvider.serverStatus!.stats.topQueriedDomains;
case 'topBlockedDomains':
return statusProvider.serverStatus!.stats.topBlockedDomains;
case 'topClients':
return statusProvider.serverStatus!.stats.topClients;
default:
return [];
}
}
Map<String, double> chartData() {
Map<String, double> values = {};
widget.data.sublist(0, widget.data.length > 5 ? 5 : widget.data.length).forEach((element) {
values = {
...values,
element.keys.first: element.values.first.toDouble()
};
});
if (widget.data.length > 5) {
final int rest = List<int>.from(
widget.data.sublist(5, widget.data.length).map((e) => e.values.first.toInt())
).reduce((a, b) => a + b);
values = {
...values,
AppLocalizations.of(context)!.others: rest.toDouble()
};
}
return values;
}
final Widget noItems = Padding(
padding: const EdgeInsets.only(
bottom: 20,
top: 10
),
child: Text(
AppLocalizations.of(context)!.noItems,
style: TextStyle(
fontSize: 16,
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
);
return SizedBox(
child: Column(
children: [
if (widget.data.isEmpty) noItems,
if (widget.data.isNotEmpty && width > 700) Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 1,
child: ConstrainedBox(
constraints: const BoxConstraints(
maxHeight: 250
),
child: Padding(
padding: const EdgeInsets.all(16),
child: CustomPieChart(
data: chartData(),
colors: colors
)
),
)
),
Expanded(
flex: 2,
child: Column(
children: [
ItemsList(
colors: colors,
data: widget.data,
clients: widget.clients,
type: widget.type,
showChart: _showChart
),
OthersRowItem(
items: widget.data,
showColor: true,
)
]
),
)
],
),
if (widget.data.isNotEmpty && width <= 700) ...[
ExpansionPanelList(
expandedHeaderPadding: const EdgeInsets.all(0),
elevation: 0,
expansionCallback: (_, isExpanded) => setState(() => _showChart = isExpanded),
children: [
ExpansionPanel(
headerBuilder: (context, isExpanded) => Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Row(
mainAxisAlignment: width <= 700
? MainAxisAlignment.spaceBetween
: MainAxisAlignment.center,
children: [
Text(
widget.label,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Theme.of(context).colorScheme.onSurface
),
),
],
),
),
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Column(
children: [
SizedBox(
height: 150,
child: CustomPieChart(
data: chartData(),
colors: colors
)
),
const SizedBox(height: 16),
],
),
),
isExpanded: _showChart
),
],
),
Padding(
padding: const EdgeInsets.only(top: 8),
child: ItemsList(
colors: colors,
data: widget.data,
clients: widget.clients,
type: widget.type,
showChart: _showChart
),
),
OthersRowItem(
items: widget.data,
showColor: _showChart,
),
const SizedBox(height: 16),
],
if (widget.data.length > 5) ...[
Padding(
padding: const EdgeInsets.only(right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () => {
if (width > 700 || !(Platform.isAndroid || Platform.isIOS)) {
showDialog(
context: context,
barrierDismissible: false,
builder: (context) => TopItemsModal(
type: widget.type,
title: widget.label,
isClient: widget.clients,
data: generateData(),
)
)
}
else {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => TopItemsScreen(
type: widget.type,
title: widget.label,
isClient: widget.clients,
data: generateData(),
)
)
)
}
},
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(AppLocalizations.of(context)!.viewMore),
const SizedBox(width: 10),
const Icon(
Icons.arrow_forward,
size: 20,
)
],
)
),
],
),
),
const SizedBox(height: 10),
]
],
),
);
}
}
class ItemsList extends StatelessWidget {
final List<Color> colors;
final List<Map<String, dynamic>> data;
final bool? clients;
final String type;
final bool showChart;
const ItemsList({
Key? key,
required this.colors,
required this.data,
required this.clients,
required this.type,
required this.showChart,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: data.sublist(
0, data.length > 5 ? 5 : data.length
).asMap().entries.map((e) => RowItem(
clients: clients ?? false,
domain: e.value.keys.toList()[0],
number: e.value.values.toList()[0].toString(),
type: type,
chartColor: colors[e.key],
showColor: showChart,
)).toList()
);
}
}

4
lib/widgets/custom_pie_chart.dart
View file

@ -4,18 +4,20 @@ import 'package:pie_chart/pie_chart.dart';
class CustomPieChart extends StatelessWidget { class CustomPieChart extends StatelessWidget {
final Map<String, double> data; final Map<String, double> data;
final List<Color> colors; final List<Color> colors;
final Duration? animationDuration;
const CustomPieChart({ const CustomPieChart({
Key? key, Key? key,
required this.data, required this.data,
required this.colors, required this.colors,
this.animationDuration = const Duration(milliseconds: 800),
}) : super(key: key); }) : super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return PieChart( return PieChart(
dataMap: data, dataMap: data,
animationDuration: const Duration(milliseconds: 800), animationDuration: animationDuration,
colorList: colors, colorList: colors,
initialAngleInDegree: 270, initialAngleInDegree: 270,
chartType: ChartType.ring, chartType: ChartType.ring,