angular-osf/src/app/features/admin-institutions/pages/institutions-summary/institutions-summary.component.html at 0f02b6f70f317de44e619e50d2fd5af357efbc3e · Vlad0n20/angular-osf · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
@if (summaryMetricsLoading()) {
  <div class="flex-1">
    <osf-loading-spinner />
  </div>
} @else {
  <div class="w-full">
    @if (summaryMetrics()?.reportYearmonth) {
      <div class="flex align-items-center gap-2 text-sm text-color-secondary mb-3 pt-3">
        <span class="font-semibold">{{ 'adminInstitutions.summary.lastUpdated' | translate }}:</span>
        <span class="text-color font-medium">{{ summaryMetrics()!.reportYearmonth + '-01' | date: 'MMMM d, y' }}</span>
      </div>
    }

    <div class="flex flex-wrap mt-4 gap-3 md:gap-4">
      @for (item of statisticsData; track $index) {
        <osf-statistic-card class="width-25" [label]="item.label | translate" [value]="item.value" />
      }
    </div>

    <div class="flex flex-wrap mt-4 gap-3 md:gap-4">
      @if (departmentLabels().length > 0) {
        <div class="grey-border-color border-round-lg border-1 p-3 md:p-4 width-33">
          <osf-doughnut-chart
            [isLoading]="departmentsLoading()"
            [datasets]="departmentDataset()"
            [labels]="departmentLabels()"
            [showExpandedSection]="true"
            [title]="'adminInstitutions.summary.totalUsersByDepartment' | translate"
          />
        </div>
      }

      @if (projectsLabels().length > 0) {
        <div class="grey-border-color border-round-lg border-1 p-3 md:p-4 width-33">
          <osf-doughnut-chart
            [isLoading]="summaryMetricsLoading()"
            [datasets]="projectDataset()"
            [labels]="projectsLabels()"
            [showExpandedSection]="true"
            [title]="'adminInstitutions.summary.publicPrivateProjects' | translate"
          />
        </div>
      }

      @if (registrationsLabels().length > 0) {
        <div class="grey-border-color border-round-lg border-1 p-3 md:p-4 width-33">
          <osf-doughnut-chart
            [isLoading]="summaryMetricsLoading()"
            [datasets]="registrationsDataset()"
            [labels]="registrationsLabels()"
            [showExpandedSection]="true"
            [title]="'adminInstitutions.summary.publicEmbargoedRegistrations' | translate"
          />
        </div>
      }

      @if (osfProjectsLabels().length > 0) {
        <div class="grey-border-color border-round-lg border-1 p-3 md:p-4 width-33">
          <osf-doughnut-chart
            [isLoading]="summaryMetricsLoading()"
            [datasets]="osfProjectsDataset()"
            [labels]="osfProjectsLabels()"
            [showExpandedSection]="true"
            [title]="'adminInstitutions.summary.totalOsfObjects' | translate"
          />
        </div>
      }

      @if (licenceLabels().length > 0) {
        <div class="grey-border-color border-round-lg border-1 p-3 md:p-4 width-33">
          <osf-bar-chart
            [isLoading]="rightsLoading()"
            [datasets]="licenceDataset()"
            [labels]="licenceLabels()"
            [showTicks]="false"
            [showExpandedSection]="true"
            [orientation]="'vertical'"
            [title]="'adminInstitutions.summary.topTenLicenses' | translate"
          />
        </div>
      }

      @if (addonLabels().length > 0) {
        <div class="grey-border-color border-round-lg border-1 p-3 md:p-4 width-33">
          <osf-bar-chart
            [isLoading]="storageRegionSearchLoading()"
            [datasets]="addonDataset()"
            [labels]="addonLabels()"
            [showTicks]="false"
            [showExpandedSection]="true"
            [orientation]="'vertical'"
            [title]="'adminInstitutions.summary.topTenAddons' | translate"
          />
        </div>
      }

      @if (storageLabels().length > 0) {
        <div class="grey-border-color border-round-lg border-1 p-3 md:p-4 width-33">
          <osf-doughnut-chart
            [isLoading]="storageRegionSearchLoading()"
            [datasets]="storageDataset()"
            [labels]="storageLabels()"
            [showExpandedSection]="true"
            [title]="'adminInstitutions.summary.topStorageRegions' | translate"
          />
        </div>
      }
    </div>
  </div>
}