MaDgIK
/
usage-counts
13
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

[Usage stats | Trunk]: Add graph analysis on analytics. Fix search section size

This commit is contained in:
k.triantafyllou 2020-09-23 14:39:48 +00:00
parent 366835e39b
commit 07ff56537d
12 changed files with 1689 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
src/app/analytics/analytics.component.css
View File

@ -1,51 +1,122 @@
.countries {
background-image: url("/assets/usage-statistics-assets/analytics/1.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
min-height: calc(100vh - 100px);
background-image: url("/assets/usage-statistics-assets/analytics/1.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: top center;
min-height: calc(100vh - 100px);
position: relative;
}
.countries a.next {
position: absolute;
bottom: 10vh;
right: -10%;
color: var(--portal-main-color);
line-height: 24px;
font-size: 18px;
letter-spacing: 1.8px;
z-index: 1;
}
.countries input, .countries input:focus {
background: transparent 0 0 no-repeat padding-box;
border-radius: 4px;
padding: 15px;
border: none;
outline: none;
background: transparent 0 0 no-repeat padding-box;
border-radius: 4px;
padding: 15px;
border: none;
outline: none;
}
.countries input::placeholder {
color: #a3a3a3;
font-weight: 600;
color: #a3a3a3;
font-weight: 600;
}
button.search, button.search:hover {
color: #333333;
font-weight: 700;
border: none;
outline: none;
background-color: transparent;
font-family: "Roboto", sans-serif;
font-size: 12px;
color: #333333;
font-weight: 700;
border: none;
outline: none;
background-color: transparent;
font-family: "Roboto", sans-serif;
font-size: 12px;
}
button.search:hover {
color: var(--portal-main-color);
color: var(--portal-main-color);
}
.card {
background: #FFFFFF 0 0 no-repeat padding-box;
box-shadow: 0 3px 6px #00000029;
border-radius: 4px;
padding: 50px 0;
text-align: center;
position: relative;
height: 113px;
background: #FFFFFF 0 0 no-repeat padding-box;
box-shadow: 0 3px 6px #00000029;
border-radius: 4px;
padding: 40px 0;
text-align: center;
position: relative;
height: 110px;
font-weight: 700;
}
.card h4 {
font-weight: 700;
}
.card > img {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
.second {
background-image: url("/assets/usage-statistics-assets/analytics/2.2.svg"), url("/assets/usage-statistics-assets/analytics/2.1.svg");
background-size: auto;
background-repeat: no-repeat;
background-position: bottom left, top right;
}
.third {
background-image: url("/assets/usage-statistics-assets/analytics/3.2.svg"), url("/assets/usage-statistics-assets/analytics/3.1.svg");
background-size: auto;
background-repeat: no-repeat;
background-position: bottom left, bottom right;
}
.third ul {
padding-left: 0 !important;
display: inline-flex;
vertical-align: middle;
flex-wrap: nowrap;
}
.third .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
margin-right: 10px !important;
border-left: 1px solid #f2f2f2 !important;
}
.third .uk-subnav > * {
padding-left: 10px;
flex: inherit;
}
.third ul > li > a {
text-transform: none;
letter-spacing: 0;
}
.third ul > li.uk-active > a, .third ul > li.uk-active > a:hover {
color: var(--portal-main-color) !important;
font-weight: 700;
}
.third .uk-subnav > *:nth-child(1) {
padding-left: 0 !important;
}
.iframe-card {
background: #FFFFFF 0 0 no-repeat padding-box;
box-shadow: 1px 10px 12px #00000029;
border: 1px solid #E0E0E0;
border-radius: 5px;
padding: 30px;
min-height: 496px;
}

249
src/app/analytics/analytics.component.html
View File

@ -1,26 +1,39 @@
<div *ngIf="countryFb" class="uk-section uk-section-small uk-container countries uk-text-center uk-text-bold">
<h2 class="uk-margin-medium-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
<div class="uk-container uk-container-small">
<div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-large-bottom">
<div class="uk-width-3-5">
<form [formGroup]="countryFb" (ngSubmit)="search()">
<input #input type="text" class="uk-width-1-1"
[class.uk-animation-slide-right-medium]="showSearch && !countryFb.get('country').value"
[class.uk-hidden]="!showSearch || (!showSearch && country)"
placeholder="SEARCH FOR A COUNTRY"
(blur)="closeSearch()"
aria-label="Number"
formControlName="country"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="search()">
<mat-option *ngFor="let option of countries | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</form>
<div class="uk-flex uk-flex-left">
<span *ngIf="countryFb.get('country').value && !showSearch" class="uk-flex uk-flex-middle">
<span (click)="toggle()">{{countryFb.get('country').value}}</span>
<div class="analytics">
<div *ngIf="countryFb" class="uk-container uk-text-center countries">
<a class="uk-visible@l next uk-flex uk-flex-middle uk-text-uppercase" (click)="goTo('graph-analysis')">
Graph Analysis
<svg height="17.155" viewBox="0 0 17.155 17.155" width="17.155" class="uk-margin-left"
xmlns="http://www.w3.org/2000/svg">
<g data-name="Group 2442" id="Group_2442" transform="translate(-1221 -675)">
<path
d="M14.405,4.3,6.022,12.68V9.055A1.011,1.011,0,0,0,4,9.055V15.12a1.009,1.009,0,0,0,1.011,1.01h6.065a1.011,1.011,0,1,0,0-2.022H7.451l8.383-8.383A1.011,1.011,0,0,0,14.405,4.3h0Z"
fill="#e95420" id="arrow-down-left2" transform="translate(1215.343 683.578) rotate(-45)"></path>
</g>
</svg>
</a>
<div class="uk-section uk-section-small">
<h2 class="uk-margin-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
<div class="uk-container uk-text-bold">
<div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-medium-bottom">
<div class="uk-width-3-5">
<form [formGroup]="countryFb" (ngSubmit)="search()">
<input #input type="text" class="uk-width-1-1"
[class.uk-animation-slide-right-medium]="showSearch && !countryFb.get('country').value"
[class.uk-hidden]="!showSearch || (!showSearch && country)"
placeholder="SEARCH FOR A COUNTRY"
(blur)="closeSearch()"
aria-label="Number"
formControlName="country"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="search()">
<mat-option *ngFor="let option of countries | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</form>
<div class="uk-flex uk-flex-left">
<span *ngIf="country && !showSearch" class="uk-flex uk-flex-middle">
<span (click)="toggle()">{{country}}</span>
<span class="uk-icon clickable space" uk-icon="icon: close; ratio: 0.8" (click)="reset()">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close"><path
fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000"
@ -28,92 +41,128 @@
d="M16,4 L4,16"></path></svg>
</span>
</span>
</div>
</div>
<button [disabled]="loading" class="uk-width-1-6 uk-margin-medium-left search" (mousedown)="$event.preventDefault()" (click)="toggle()">
<img src="assets/usage-statistics-assets/analytics/search.svg">
<span class="uk-text-uppercase space">search</span>
</button>
</div>
<div class="uk-margin-medium-bottom">
<div class="uk-text-uppercase">{{(country) ? country : 'world wide'}}</div>
<div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
</div>
<div *ngIf="loading" class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
</div>
<div *ngIf="display && !loading" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s uk-grid-large"
uk-grid>
<div *ngIf="display.total_repos && state > 0" [class.uk-animation-fade]="state == 1">
<div class="card">
<div class="uk-margin-medium-bottom">
Repositories
</div>
</div>
<h3>
{{display.total_repos | number}}
</h3>
<img src="assets/usage-statistics-assets/analytics/2.svg">
<button [disabled]="loading" class="uk-width-1-6 uk-margin-medium-left search"
(mousedown)="$event.preventDefault()" (click)="toggle()">
<img src="assets/usage-statistics-assets/analytics/search.svg">
<span class="uk-text-uppercase space">search</span>
</button>
</div>
</div>
<div *ngIf="display.repositories && state > 0" [class.uk-animation-fade]="state == 1">
<div class="card">
<div class="uk-margin-medium-bottom">
Repositories
</div>
<h3>
{{display.repositories | number}}
</h3>
<img src="assets/usage-statistics-assets/analytics/2.svg">
<div class="uk-margin-medium-bottom">
<div class="uk-text-uppercase">{{(country) ? country : 'worldwide'}}</div>
<div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
</div>
</div>
<div *ngIf="display.total_views && state > 1" [class.uk-animation-fade]="state == 2">
<div class="card">
<div class="uk-margin-medium-bottom">
Views
<div class="uk-width-2-3 uk-margin-auto-left uk-margin-auto-right">
<div *ngIf="loading" class="uk-animation-fade uk-margin-medium-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
</div>
<h3>
{{display.total_views | number}}
</h3>
<img src="assets/usage-statistics-assets/analytics/3.svg">
</div>
</div>
<div *ngIf="display.views && state > 1" [class.uk-animation-fade]="state == 2">
<div class="card">
<div class="uk-margin-medium-bottom">
Views
<div *ngIf="display && !loading" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s"
uk-grid>
<div *ngIf="display.total_repos && state > 0" [class.uk-animation-fade]="state == 1"
class="uk-padding-remove-left">
<div class="card">
<div class="uk-margin-medium-bottom">
Repositories
</div>
<h4>
{{display.total_repos | number}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.1.svg">
</div>
</div>
<div *ngIf="display.repositories && state > 0" [class.uk-animation-fade]="state == 1">
<div class="card">
<div class="uk-margin-medium-bottom">
Repositories
</div>
<h4>
{{display.repositories | number}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.1.svg">
</div>
</div>
<div *ngIf="display.total_views && state > 1" [class.uk-animation-fade]="state == 2">
<div class="card">
<div class="uk-margin-medium-bottom">
Views
</div>
<h4>
{{display.total_views | number}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.2.svg">
</div>
</div>
<div *ngIf="display.views && state > 1" [class.uk-animation-fade]="state == 2">
<div class="card">
<div class="uk-margin-medium-bottom">
Views
</div>
<h4>
{{display.views | number}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.2.svg">
</div>
</div>
<div *ngIf="display.total_downloads && state > 2" [class.uk-animation-fade]="state == 3">
<div class="card">
<div class="uk-margin-medium-bottom">
Downloads
</div>
<h4>
{{display.total_downloads | number}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.3.svg">
</div>
</div>
<div *ngIf="display.downloads && state > 2" [class.uk-animation-fade]="state == 3">
<div class="card">
<div class="uk-margin-medium-bottom">
Downloads
</div>
<h4>
{{display.downloads | number}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.3.svg">
</div>
</div>
</div>
<h3>
{{display.views | number}}
</h3>
<img src="assets/usage-statistics-assets/analytics/3.svg">
</div>
</div>
<div *ngIf="display.total_downloads && state > 2" [class.uk-animation-fade]="state == 3">
<div class="card">
<div class="uk-margin-medium-bottom">
Downloads
<div *ngIf="!display && !loading" class="card uk-animation-fade">
<div class="uk-position-center">
No results found for that country
</div>
</div>
<h3>
{{display.total_downloads | number}}
</h3>
<img src="assets/usage-statistics-assets/analytics/4.svg">
</div>
</div>
<div *ngIf="display.downloads && state > 2" [class.uk-animation-fade]="state == 3">
<div class="card">
<div class="uk-margin-medium-bottom">
Downloads
</div>
<h3>
{{display.downloads | number}}
</h3>
<img src="assets/usage-statistics-assets/analytics/4.svg">
</div>
</div>
</div>
<div *ngIf="!display && !loading" class="card uk-animation-fade">
<div class="uk-position-center">
No results found for that country
</div>
<div id="graph-analysis" class="uk-visible@m">
<div class="uk-container uk-section uk-text-center">
<h3 class="uk-margin-medium-bottom uk-text-bold">Worldwide Monthly Usage Events</h3>
<div class="uk-padding second">
<div class="iframe-card uk-margin-left uk-margin-right">
<iframe width="742" height="453" seamless frameborder="0" scrolling="no"
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRN9KbdyQSnWrC-yNpZj3C0U6_Qp-XQBSm9KY0G1Pz5UMoi1Q0bL5RaC1-oBw3o6kYoT7drlGCjUNCy/pubchart?oid=82603024&amp;format=interactive"></iframe>
</div>
</div>
</div>
<div *ngIf="charts" class="uk-container uk-section uk-text-center">
<h3 class="uk-margin-medium-bottom uk-text-bold">Worldwide Monthly Views & Downloads</h3>
<div class="uk-padding third">
<div class="iframe-card uk-margin-left uk-margin-right uk-text-center">
<div>
<ul class="uk-subnav uk-subnav-divider uk-margin-remove-bottom">
<li [class.uk-active]="years == 0"><a class="uk-text-primary" (click)="changeYear(0)">This year</a></li>
<li [class.uk-active]="years == 1"><a class="uk-text-primary" (click)="changeYear(1)">Last 2 years</a></li>
<li [class.uk-active]="years == 2"><a class="uk-text-primary" (click)="changeYear(2)">Last 5 years</a></li>
</ul>
</div>
<div *ngIf="iframeLoading" class="uk-animation-fade uk-margin-medium-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
</div>
<iframe (load)="onLoad()" class="uk-animation-fade" width="742" height="453" seamless frameborder="0" scrolling="no" [class.uk-hidden]="iframeLoading"
[src]="charts[years]"></iframe>
</div>
</div>
</div>
</div>

52
src/app/analytics/analytics.component.ts
View File

@ -5,8 +5,9 @@ import {Observable} from 'rxjs';
import {UsageStatsService} from '../services/usage-stats.service';
import {map, startWith} from 'rxjs/operators';
import {countries} from '../services/countries';
import {Title} from '@angular/platform-browser';
import {DomSanitizer, SafeUrl, Title} from '@angular/platform-browser';
import {StringUtils} from '../openaireLibrary/utils/string-utils.class';
import {ActivatedRoute} from '@angular/router';
@Component({
selector: 'analytics',
@ -18,20 +19,37 @@ export class AnalyticsComponent implements OnInit {
public countries: Observable<string[]>;
public country: string;
public loading: boolean = true;
public iframeLoading: boolean = true;
public display: UsageStat | CountryUsageStat;
public showSearch: boolean = false;
public state: number = 0;
private timeouts: any[] = [];
public years = 0;
public charts: SafeUrl[];
@ViewChild('input') input: ElementRef;
constructor(private usageStatsService: UsageStatsService,
private title: Title) {
private route: ActivatedRoute,
private title: Title,
private sanitizer: DomSanitizer) {
}
ngOnInit() {
this.title.setTitle('OpenAIRE - UsageCounts | Analytics');
this.route.fragment.subscribe(fragment => {
setTimeout(() => {
this.goTo(fragment);
}, 100);
});
this.init();
this.search();
for(let i = 0; i < 3; i++) {
this.charts = [
this.getSafeUrl('https://docs.google.com/spreadsheets/d/e/2PACX-1vQ-HejU11H1dMKa2MeIvLevnH0jtJUvduan3WMTjgDYCeq6g_WBPFBbZvg83hLuMv7XNyDQ3vHZWNYc/pubchart?oid=919355937&amp;format=interactive'),
this.getSafeUrl('https://docs.google.com/spreadsheets/d/e/2PACX-1vQ-HejU11H1dMKa2MeIvLevnH0jtJUvduan3WMTjgDYCeq6g_WBPFBbZvg83hLuMv7XNyDQ3vHZWNYc/pubchart?oid=1667183135&amp;format=interactive'),
this.getSafeUrl('https://docs.google.com/spreadsheets/d/e/2PACX-1vQ-HejU11H1dMKa2MeIvLevnH0jtJUvduan3WMTjgDYCeq6g_WBPFBbZvg83hLuMv7XNyDQ3vHZWNYc/pubchart?oid=2070534117&amp;format=interactive')
]
}
}
private init() {
@ -45,6 +63,17 @@ export class AnalyticsComponent implements OnInit {
);
}
changeYear(i: number) {
if(!this.iframeLoading) {
this.iframeLoading = true;
this.years = i;
}
}
onLoad() {
this.iframeLoading = false;
}
public search() {
this.country = this.countryFb.value.country;
this.showSearch = false;
@ -55,7 +84,7 @@ export class AnalyticsComponent implements OnInit {
this.usageStatsService.getCountryMetrics(this.country).subscribe(stats => {
this.display = stats;
this.loading = false;
if(this.display) {
if (this.display) {
this.state = 1;
this.animation();
}
@ -67,7 +96,7 @@ export class AnalyticsComponent implements OnInit {
this.usageStatsService.getAllMetrics().subscribe(stats => {
this.display = stats;
this.loading = false;
if(this.display) {
if (this.display) {
this.state = 1;
this.animation();
}
@ -80,7 +109,7 @@ export class AnalyticsComponent implements OnInit {
private animation() {
this.timeouts.push(setTimeout(() => {
if(this.state != 3) {
if (this.state != 3) {
this.animation();
}
this.state++;
@ -114,7 +143,7 @@ export class AnalyticsComponent implements OnInit {
reset() {
this.clearTimeouts();
if(this.state == 0) {
if (this.state == 0) {
this.init();
this.showSearch = true;
setTimeout(() => { // this will make the execution after the above boolean has changed
@ -123,4 +152,15 @@ export class AnalyticsComponent implements OnInit {
this.search();
}
}
goTo(id: string) {
const yOffset = -100;
const element = document.getElementById(id);
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({top: y, behavior: 'smooth'});
}
public getSafeUrl(url: string): SafeUrl {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}

7
src/app/home/home.component.html
View File

@ -147,10 +147,3 @@
<ng-container *ngTemplateOutlet="fourth"></ng-container>
</div>
</div>
<!--<div class="uk-section third uk-text-center">
<h3 class="uk-margin-medium-bottom">Monthly Usage Events</h3>
<div class="uk-container">
<iframe width="742" height="453" seamless frameborder="0" scrolling="no"
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRN9KbdyQSnWrC-yNpZj3C0U6_Qp-XQBSm9KY0G1Pz5UMoi1Q0bL5RaC1-oBw3o6kYoT7drlGCjUNCy/pubchart?oid=82603024&amp;format=interactive"></iframe>
</div>
</div>-->

0
src/assets/usage-statistics-assets/analytics/2.svg → src/assets/usage-statistics-assets/analytics/1.1.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

0
src/assets/usage-statistics-assets/analytics/3.svg → src/assets/usage-statistics-assets/analytics/1.2.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

0
src/assets/usage-statistics-assets/analytics/4.svg → src/assets/usage-statistics-assets/analytics/1.3.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 566 B

After

Width:  |  Height:  |  Size: 566 B

19
src/assets/usage-statistics-assets/analytics/1.svg
View File

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1170.108" height="584.798" viewBox="0 0 1170.108 584.798">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1250" height="658" viewBox="0 0 1250 658">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_2197" data-name="Rectangle 2197" width="166.65" height="159.84" fill="none"/>
@ -7,10 +7,11 @@
<rect id="Rectangle_1897" data-name="Rectangle 1897" width="17.114" height="11.001" fill="none"/>
</clipPath>
</defs>
<g id="track_bg" data-name="track bg" transform="translate(-210 -149)">
<path id="small_elipse_blue" data-name="small elipse blue" d="M323.561,98.128c0,8.731-7.341,15.808-16.4,15.808s-16.4-7.077-16.4-15.808,7.341-15.808,16.4-15.808S323.555,89.4,323.561,98.128Z" transform="translate(888.659 300.237)" fill="#222080"/>
<circle id="Ellipse_blue" data-name="Ellipse blue" cx="198.5" cy="198.5" r="198.5" transform="translate(210 149)" fill="#4687e6" opacity="0.2"/>
<g id="grid_blue" data-name="grid blue" transform="translate(249.366 519.494)" opacity="0.22">
<g id="Group_11679" data-name="Group 11679" transform="translate(0 -106)">
<rect id="Rectangle_2632" data-name="Rectangle 2632" width="1366" height="658" transform="translate(0 106)" fill="none"/>
<path id="small_elipse_blue" data-name="small elipse blue" d="M323.561,98.128c0,8.731-7.341,15.808-16.4,15.808s-16.4-7.077-16.4-15.808,7.341-15.808,16.4-15.808S323.555,89.4,323.561,98.128Z" transform="translate(776.659 330.238)" fill="#222080"/>
<circle id="Ellipse_blue" data-name="Ellipse blue" cx="198.5" cy="198.5" r="198.5" transform="translate(98 179)" fill="#4687e6" opacity="0.2"/>
<g id="grid_blue" data-name="grid blue" transform="translate(137.366 549.494)" opacity="0.22">
<g id="Group_3051" data-name="Group 3051" clip-path="url(#clip-path)">
<g id="Group_3050" data-name="Group 3050" clip-path="url(#clip-path)">
<g id="Group_2751" data-name="Group 2751" transform="translate(151.965 150.907)" clip-path="url(#clip-path-3)">
@ -1366,10 +1367,10 @@
</g>
</g>
</g>
<g id="rows_track_activity" data-name="rows track activity" transform="translate(1089.412 413.748)">
<path id="Path_16420" data-name="Path 16420" d="M404.212,271.857,373.2,260.372l-31.869-11.8-55.058-20.384-15.4-5.709L238.96,210.66" transform="translate(-160.76 5.332)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="3"/>
<path id="Path_17201" data-name="Path 17201" d="M219.74,196.331,178.5,159.486l-42.377-37.869-73.213-65.4L42.435,37.9,0,0" transform="matrix(0.94, 0.342, -0.342, 0.94, 83.767, 59.94)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="1"/>
<path id="Path_17202" data-name="Path 17202" d="M183.655,164.091,149.191,133.3l-35.418-31.65L52.583,46.988,35.467,31.68,0,0" transform="matrix(0.643, -0.766, 0.766, 0.643, 0, 140.688)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="1"/>
<g id="rows_track_activity" data-name="rows track activity" transform="translate(977.412 486.748)">
<path id="Path_16420" data-name="Path 16420" d="M331.645,244.983l-17.393-6.441-17.874-6.62L265.5,220.489l-8.638-3.2-17.9-6.627" transform="translate(-195.1 -89.517)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="3"/>
<path id="Path_17201" data-name="Path 17201" d="M123.245,110.116,100.117,89.451,76.349,68.211,35.287,31.532,23.8,21.259,0,0" transform="matrix(0.94, 0.342, -0.342, 0.94, 46.982, 33.618)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="1"/>
<path id="Path_17202" data-name="Path 17202" d="M103.007,92.033,83.677,74.762,63.812,57.01,29.492,26.354l-9.6-8.586L0,0" transform="matrix(0.643, -0.766, 0.766, 0.643, 0, 78.908)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="1"/>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 232 KiB

After

Width:  |  Height:  |  Size: 232 KiB

1366
src/assets/usage-statistics-assets/analytics/2.1.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

3
src/assets/usage-statistics-assets/analytics/2.2.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="145.259" height="145.29" viewBox="0 0 145.259 145.29">
<path id="Path_17210" data-name="Path 17210" d="M226.039,119.789a72.814,72.814,0,0,0-30.892-38.86,62.41,62.41,0,0,0-5.836-3.236,72.206,72.206,0,0,0-31.1-7.492h-1.09a72.688,72.688,0,0,0-46.29,128.651,73.468,73.468,0,0,0,7.185,5.242,72.688,72.688,0,0,0,108.025-84.3ZM157.1,184.544A41.544,41.544,0,1,1,198.641,143,41.544,41.544,0,0,1,157.1,184.544Z" transform="translate(-84.523 -70.2)" fill="#4687e6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 512 B

6
src/assets/usage-statistics-assets/analytics/3.1.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="78.774" height="98.774" viewBox="0 0 78.774 98.774">
<g id="Group_11677" data-name="Group 11677" transform="translate(-950.705 -2057.365)">
<path id="Path_16423" data-name="Path 16423" d="M331.578,102.724a20.4,20.4,0,1,1-20.4-20.4A20.4,20.4,0,0,1,331.578,102.724Z" transform="translate(697.9 1975.045)" fill="#e95420" opacity="0.8"/>
<path id="Path_17208" data-name="Path 17208" d="M369.544,121.707A39.387,39.387,0,1,1,330.157,82.32,39.387,39.387,0,0,1,369.544,121.707Z" transform="translate(659.935 1995.045)" fill="#222080" opacity="0.8"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 613 B

7
src/assets/usage-statistics-assets/analytics/3.2.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="229.583" height="297.71" viewBox="0 0 229.583 297.71">
<g id="Group_11678" data-name="Group 11678" transform="translate(-244.57 -1898.089)">
<path id="Path_17235" data-name="Path 17235" d="M422.615,374.751l-34.464-30.795-35.418-31.65-61.19-54.658L274.427,242.34,238.96,210.66" transform="translate(-51.588 1924.914) rotate(-20)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="1"/>
<path id="Path_17236" data-name="Path 17236" d="M434.678,283.139l-36.728-13.6-37.744-13.98L295,231.415l-18.24-6.762-37.8-13.993" transform="matrix(0.891, 0.454, -0.454, 0.891, 165.282, 1661.494)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="2"/>
<path id="Path_17237" data-name="Path 17237" d="M519.555,336.774,466.9,313.106l-54.113-24.325L319.3,246.773l-26.151-11.766L238.96,210.66" transform="translate(573.233 1649.117) rotate(87)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="3"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1002 B