From 23983fb556083c1a1aa6c8d05ebdb01c3238260c Mon Sep 17 00:00:00 2001
From: Rongjian Zhang <pd4d10@gmail.com>
Date: Sat, 21 Dec 2019 16:55:25 +0800
Subject: [PATCH] feat: languages chart

---
 lib/screens/repository.dart | 76 ++++++++++++++++++++++++++++---------
 pubspec.yaml                |  1 +
 2 files changed, 60 insertions(+), 17 deletions(-)

diff --git a/lib/screens/repository.dart b/lib/screens/repository.dart
index 5685d59..2953400 100644
--- a/lib/screens/repository.dart
+++ b/lib/screens/repository.dart
@@ -15,6 +15,7 @@ import 'package:git_touch/widgets/repository_item.dart';
 import 'package:tuple/tuple.dart';
 import '../widgets/entry_item.dart';
 import 'package:git_touch/widgets/action_button.dart';
+import 'package:charts_flutter/flutter.dart' as charts;
 
 final repositoryRouter = RouterScreen('/:owner/:name', (context, params) {
   if (params['ref'] == null) {
@@ -165,23 +166,64 @@ class RepositoryScreen extends StatelessWidget {
             ),
             CommonStyle.verticalGap,
             if (repo.languages.edges.isNotEmpty)
-              Container(
-                color: theme.palette.background,
-                padding: CommonStyle.padding.copyWith(top: 8, bottom: 8),
-                child: ClipRRect(
-                  borderRadius: BorderRadius.circular(2),
-                  child: SizedBox(
-                    height: 10,
-                    child: Row(
-                      children: join(
-                        SizedBox(width: 1),
-                        repo.languages.edges
-                            .map((lang) => Container(
-                                color: convertColor(lang.node.color),
-                                width: langWidth *
-                                    lang.size /
-                                    repo.languages.totalSize))
-                            .toList(),
+              GestureDetector(
+                onTap: () {
+                  showCupertinoModalPopup(
+                    context: context,
+                    builder: (context) {
+                      return Container(
+                        color: theme.palette.background,
+                        padding: EdgeInsets.all(40),
+                        height: 400,
+                        child: charts.PieChart(
+                          [
+                            charts.Series<GithubRepositoryLanguageEdge, String>(
+                              id: 'languages',
+                              domainFn: (v, _) => v.node.name,
+                              measureFn: (v, _) => v.size,
+                              colorFn: (v, _) =>
+                                  charts.Color.fromHex(code: v.node.color),
+                              data: repo.languages.edges,
+                              labelAccessorFn: (v, _) => v.node.name,
+                            )
+                          ],
+                          defaultRenderer: charts.ArcRendererConfig(
+                            arcRendererDecorators: [
+                              charts.ArcLabelDecorator(
+                                insideLabelStyleSpec: charts.TextStyleSpec(
+                                  fontSize: 20,
+                                  color: charts.Color.white,
+                                ),
+                                outsideLabelStyleSpec: charts.TextStyleSpec(
+                                  fontSize: 20,
+                                  color: charts.Color.black,
+                                ),
+                              )
+                            ],
+                          ),
+                        ),
+                      );
+                    },
+                  );
+                },
+                child: Container(
+                  // color: theme.palette.background,
+                  padding: CommonStyle.padding.copyWith(top: 8, bottom: 8),
+                  child: ClipRRect(
+                    borderRadius: BorderRadius.circular(2),
+                    child: SizedBox(
+                      height: 10,
+                      child: Row(
+                        children: join(
+                          SizedBox(width: 1),
+                          repo.languages.edges
+                              .map((lang) => Container(
+                                  color: convertColor(lang.node.color),
+                                  width: langWidth *
+                                      lang.size /
+                                      repo.languages.totalSize))
+                              .toList(),
+                        ),
                       ),
                     ),
                   ),
diff --git a/pubspec.yaml b/pubspec.yaml
index f6dfa57..17609a8 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -41,6 +41,7 @@ dependencies:
   artemis: ^2.1.2
   gql_link: ^0.2.0
   fluro: ^1.5.1
+  charts_flutter: ^0.8.1
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.