Merge pull request #1495 from youichiro/update-progress-graph-of-statistics

Update progress graph of statistics

backend/api/views/statistics.py

@@ -1,5 +1,6 @@
 import collections
 
+from django.conf import settings
 from django.db.models import Count, Q
 from django.shortcuts import get_object_or_404
 from rest_framework.permissions import IsAuthenticated
@@ -30,6 +31,10 @@ class StatisticsAPI(APIView):
             progress = self.progress(project=p)
             response.update(progress)
 
+        if not include or 'confirmed_count' in include:
+            confirmed_count = self.confirmed_count(p)
+            response['confirmed_count'] = confirmed_count
+
         if include:
             response = {key: value for (key, value) in response.items() if key in include}
 
@@ -59,3 +64,15 @@ class StatisticsAPI(APIView):
     def label_per_data(self, project):
         annotation_class = project.get_annotation_class()
         return annotation_class.objects.get_label_per_data(project=project)
+
+    def confirmed_count(self, project):
+        confirmed_count = {
+            settings.ROLE_ANNOTATOR: 0,
+            settings.ROLE_ANNOTATION_APPROVER: 0,
+            settings.ROLE_PROJECT_ADMIN: 0,
+        }
+        for doc in project.examples.all():
+            role_names = list(set([state.confirmed_user_role.name for state in doc.states.all()]))
+            for role_name in role_names:
+                confirmed_count[role_name] += 1
+        return confirmed_count

frontend/components/statistics/ChartBar.vue

@@ -31,7 +31,10 @@ export default {
             }
           ]
         },
-        maintainAspectRatio: false
+        maintainAspectRatio: false,
+        legend: {
+          display: false
+        }
       }
     }
   },

frontend/domain/models/statistics/statistics.ts

@@ -2,26 +2,30 @@ export type Label = {[key: string]: number}
 
 export type User = {[key: string]: number}
 
+export type ConfirmedCount = {[key: string]: number}
+
 export class Statistics {
   constructor(
     public label:      Label,
     public userLabel:  User,
     public total:      number,
     public remaining:  number,
-    public user:       User
+    public user:       User,
+    public confirmedCount: ConfirmedCount,
   ) {}
 
   static valueOf(
-    { label, user_label, total, remaining, user }:
+    { label, user_label, total, remaining, user, confirmed_count }:
     {
       label:      Label,
       user_label: User,
       total:      number,
       remaining:  number,
-      user:       User
+      user:       User,
+      confirmed_count: ConfirmedCount,
     }
   ): Statistics {
-    return new Statistics(label, user_label, total, remaining, user)
+    return new Statistics(label, user_label, total, remaining, user, confirmed_count)
   }
 
   private makeData(object: Label | User, label: string) {
@@ -56,4 +60,28 @@ export class Statistics {
       labels
     }
   }
+
+  private makeProgressData(roleName: string, labels: string[]) {
+    const confirmed = this.confirmedCount[roleName]
+    const unconfirmed = this.total - confirmed
+    return {
+      datasets: [{
+        data: [confirmed, unconfirmed],
+        backgroundColor: ['#00d1b2', '#ffdd57']
+      }],
+      labels
+    }
+  }
+
+  public annotatorProgress(labels: string[]) {
+    return this.makeProgressData('annotator', labels)
+  }
+
+  public approverProgress(labels: string[]) {
+    return this.makeProgressData('annotation_approver', labels)
+  }
+
+  public adminProgress(labels: string[]) {
+    return this.makeProgressData('project_admin', labels)
+  }
 }

frontend/pages/projects/_id/statistics/index.vue

@@ -5,9 +5,12 @@
       lg="4"
     >
       <v-card>
-        <doughnut-chart
-          :chart-data="stats.progress"
-        />
+        <v-card-title>{{ $t('members.roles.annotator') }}</v-card-title>
+        <v-card-text>
+          <doughnut-chart
+            :chart-data="stats.annotatorProgress"
+          />
+        </v-card-text>
       </v-card>
     </v-col>
     <v-col
@@ -15,9 +18,12 @@
       lg="4"
     >
       <v-card>
-        <bar-chart
-          :chart-data="stats.label"
-        />
+        <v-card-title>{{ $t('members.roles.annotationApprover') }}</v-card-title>
+        <v-card-text>
+          <doughnut-chart
+            :chart-data="stats.approverProgress"
+          />
+        </v-card-text>
       </v-card>
     </v-col>
     <v-col
@@ -25,9 +31,38 @@
       lg="4"
     >
       <v-card>
-        <bar-chart
-          :chart-data="stats.user"
-        />
+        <v-card-title>{{ $t('members.roles.projectAdmin') }}</v-card-title>
+        <v-card-text>
+          <doughnut-chart
+            :chart-data="stats.adminProgress"
+          />
+        </v-card-text>
+      </v-card>
+    </v-col>
+    <v-col
+      cols="12"
+      lg="4"
+    >
+      <v-card>
+        <v-card-title>Label Stats</v-card-title>
+        <v-card-text>
+          <bar-chart
+            :chart-data="stats.label"
+          />
+        </v-card-text>
+      </v-card>
+    </v-col>
+    <v-col
+      cols="12"
+      lg="4"
+    >
+      <v-card>
+        <v-card-title>User Stats</v-card-title>
+        <v-card-text>
+          <bar-chart
+            :chart-data="stats.user"
+          />
+        </v-card-text>
       </v-card>
     </v-col>
   </v-row>

frontend/services/application/statistics/statisticsData.ts

@@ -5,10 +5,16 @@ export class StatisticsDTO {
   label: object;
   user: object;
   progress: object;
+  annotatorProgress: object;
+  approverProgress: object;
+  adminProgress: object;
 
   constructor(item: Statistics, labelText: string, userText: string, progressLabels: string[]) {
     this.label = item.labelStats(labelText);
     this.user = item.userStats(userText);
     this.progress = item.progress(progressLabels);
+    this.annotatorProgress = item.annotatorProgress(progressLabels);
+    this.approverProgress = item.approverProgress(progressLabels);
+    this.adminProgress = item.adminProgress(progressLabels);
   }
 }