fuzi_fauzia/hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Fuzi_fauzia
2024-04-19 12:53:45 +07:00
commit 71a3a661dc
1943 changed files with 246917 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/content/pages/user/user-profile/user-profile.component.css Normal file
View File

@@ -0,0 +1,25 @@
agm-map {
height: 450px;
}
:host ::ng-deep .block-ui-wrapper {
background: rgba(255, 249, 249, 0.5) !important;
}
:host ::ng-deep .my-gallery img{
max-width: 100% !important;
padding: .25rem;
background-color: #F4F5FA;
border: 1px solid #626E82;
border-radius: .25rem;
margin-bottom: 15px;
}
:host ::ng-deep .my-gallery .img-thumbnail {
padding: .25rem;
background-color: #F4F5FA;
border: 1px solid #626E82;
border-radius: .25rem;
}
:host ::ng-deep .ngx-gallery {
grid-template-columns: auto !important
;
}

591
src/app/content/pages/user/user-profile/user-profile.component.html Normal file
View File

@@ -0,0 +1,591 @@
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row mb-1">
</div>
<div class="content-body">
<div id="user-profile">
<div class="row">
<div class="col-12">
<div class="card profile-with-cover">
<div class="card-img-top img-fluid bg-cover height-300"
style="background: url('../../../assets/images/carousel/22.jpg') 50%;"></div>
<div class="media profil-cover-details w-100">
<div class="media-left pl-2 pt-2">
<a [routerLink]="" class="profile-image">
<img src="../../../../../assets/images/portrait/small/avatar-s-8.png"
class="rounded-circle img-border height-100" alt="Card image">
</a>
</div>
<div class="media-body pt-3 px-2">
<div class="row">
<div class="col">
<h3 class="card-title">Jose Diaz</h3>
</div>
<div class="col text-right">
<button type="button" class="btn btn-primary d-"><i class="la la-plus"></i> Follow</button>
<div class="btn-group d-none d-md-block float-right ml-2" role="group" aria-label="Basic example">
<button type="button" class="btn btn-success"><i class="la la-dashcube"></i> Message</button>
<button type="button" class="btn btn-success"><i class="la la-cog"></i></button>
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-light navbar-profile align-self-end">
<button class="navbar-toggler d-sm-none" type="button" data-toggle="collapse" aria-expanded="false"
aria-label="Toggle navigation"></button>
<nav class="navbar navbar-expand-lg">
<ul class="navbar-nav mr-auto">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"><i class="la la-line-chart"></i>Timeline <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="la la-user"></i>Profile</a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="la la-briefcase"></i>Projects</a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="la la-heart-o"></i>Favourites</a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="la la-bell-o"></i>Notifications</a>
</li>
</ul>
</div>
</nav>
</ul>
</nav>
</nav>
</div>
</div>
</div>
<section id="timeline" class="timeline-center timeline-wrapper">
<h3 class="page-title text-center">Timeline</h3>
<ul class="timeline">
<li class="timeline-line"></li>
<li class="timeline-group">
<a [routerLink]="" class="btn btn-primary"><i class="la la-calendar-o"></i> Today</a>
</li>
</ul>
<ul class="timeline">
<li class="timeline-line"></li>
<li class="timeline-item">
<div class="timeline-badge">
<span class="bg-red bg-lighten-1" data-toggle="tooltip" data-placement="right"
title="Portfolio project work"><i class="la la-plane"></i></span>
</div>
<div class="timeline-card card border-grey border-lighten-2"
*blockUI="'projectWorkOne'; message: 'Loading'">
<m-card [options]="options" (reloadFunction)="reloadProjectWorkOne($event)">
<ng-container mCardHeaderTitle>
<a [routerLink]="" class="">
Portfolio project work
<p class="card-subtitle text-muted mb-0 pt-1">
<span class="font-small-3">8 hours ago</span>
</p>
</a>
</ng-container>
<ng-container mCardContent>
<img class="img-fluid" src="../../../../../assets/images/portfolio/width-1200/portfolio-1.jpg"
alt="Timeline Image 1">
</ng-container>
<ng-container mCardBody>
<p class="card-text">Nullam facilisis fermentum aliquam. Suspendisse ornare dolor vitae libero
hendrerit auctor lacinia a ligula. Curabitur elit tellus, porta ut orci sed, fermentum bibendum
nisi.</p>
<ul class="list-inline">
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-thumbs-o-up"></span> Like</a>
</li>
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-commenting-o"></span>
Comment</a></li>
<li><a [routerLink]="" class=""><span class="la la-share-alt"></span> Share</a></li>
</ul>
</ng-container>
<ng-container mCardFooter>
<ng-container mCardBody>
<div class="media">
<div class="media-left pr-1">
<a [routerLink]="">
<span class="avatar avatar-online"><img
src="../../../../../assets/images/portrait/small/avatar-s-1.png" alt="avatar"></span>
</a>
</div>
<div class="media-body">
<p class="text-bold-600 mb-0"><a [routerLink]="">Jason Ansley</a></p>
<p class="m-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin commodo.</p>
<ul class="list-inline mb-1">
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-thumbs-o-up"></span>
Like</a></li>
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-commenting-o"></span>
Replay</a>
</li>
</ul>
<div class="media">
<div class="media-left pr-1">
<a [routerLink]="">
<span class="avatar avatar-online"><img
src="../../../../../assets/images/portrait/small/avatar-s-18.png"
alt="avatar"></span>
</a>
</div>
<div class="media-body">
<p class="text-bold-600 mb-0"><a [routerLink]="">Janice Johnston</a></p>
<p>Gravida nulla. Nulla vel metus scelerisque ante sollicitudin.</p>
<ul class="list-inline mb-1">
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-thumbs-o-up"></span>
Like</a>
</li>
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-commenting-o"></span>
Replay</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<fieldset class="form-group position-relative has-icon-left mb-0">
<input type="text" class="form-control" placeholder="Write comments...">
<div class="form-control-position">
<i class="la la-dashcube"></i>
</div>
</fieldset>
</ng-container>
</ng-container>
</m-card>
</div>
</li>
<li class="timeline-item mt-3">
<div class="timeline-badge">
<span class="avatar avatar-online" data-toggle="tooltip" data-placement="left"
title="Eu pid nunc urna integer"><img
src="../../../../../assets/images/portrait/small/avatar-s-14.png" alt="avatar"></span>
</div>
<div class="timeline-card card border-grey border-lighten-2" *blockUI="'sofiaOrav'; message: 'Loading'">
<m-card [options]="options" (reloadFunction)="reloadSofiaOrav($event)">
<ng-container mCardHeaderTitle>
<a [routerLink]="" class="">
Sofia Orav
<p class="card-subtitle text-muted mb-0 pt-1">
<span class="font-small-3">8 hours ago</span>
</p>
</a>
</ng-container>
<ng-container mCardContent>
<div class="embed-responsive embed-responsive-4by3">
<iframe src="https://player.vimeo.com/video/118589137?title=0&byline=0"></iframe>
</div>
</ng-container>
<ng-container mCardBody>
<p class="card-text">Nullam facilisis fermentum aliquam. Suspendisse ornare dolor vitae libero
hendrerit auctor lacinia a ligula. Curabitur elit tellus, porta ut orci sed, fermentum bibendum
nisi.</p>
<p class="card-text">Eu pid nunc urna integer, sed, cras tortor scelerisque penatibus facilisis a
pulvinar, rhoncus sagittis ut nunc elit! Sociis in et? Rhoncus, vel dignissim in scelerisque.
Dolor lacus pulvinar adipiscing adipiscing montes! Elementum risus adipiscing non, cras
scelerisque risus penatibus? Massa vut, habitasse, tincidunt!</p>
<ul class="list-inline">
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-thumbs-o-up"></span> Like</a>
</li>
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-commenting-o"></span>
Comment</a></li>
<li><a [routerLink]="" class=""><span class="la la-share-alt"></span> Share</a></li>
</ul>
</ng-container>
<ng-container mCardFooter>
<fieldset class="form-group position-relative has-icon-left mb-0">
<input type="text" class="form-control" placeholder="Write comments...">
<div class="form-control-position">
<i class="la la-dashcube"></i>
</div>
</fieldset>
</ng-container>
</m-card>
</div>
</li>
<li class="timeline-item block">
<div class="timeline-badge">
<a title="" data-context="inverse" data-container="body" class="border-silc" [routerLink]=""
data-original-title="block highlight"></a>
</div>
<div class="timeline-card card border-grey border-lighten-2">
<div class="card-header">
<div class="text-center">
<p><i class="la la-bar-chart font-medium-4"></i></p>
<h4>Campaign Report</h4>
<p class="timeline-date">18 hours ago</p>
<p>Rhoncus, vel dignissim in scelerisque. Dolor lacus pulvinar adipiscing adipiscing montes!
Elementum
risus adipiscing non, cras scelerisque risus penatibus? Massa vut, habitasse, tincidunt!</p>
</div>
</div>
<div class="card-content">
<div class="card-body">
<div class="chart-container">
<div id="stacked-column" class="height-400 overflow-hidden echart-container">
<div echarts [options]="chartOption"></div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- 2016 -->
<ul class="timeline">
<li class="timeline-line"></li>
<li class="timeline-group">
<a [routerLink]="" class="btn btn-primary"><i class="la la-calendar-o"></i> 2016</a>
</li>
</ul>
<ul class="timeline">
<li class="timeline-line"></li>
<!-- /.timeline-line -->
<li class="timeline-item">
<div class="timeline-badge">
<span class="avatar avatar-online" data-toggle="tooltip" data-placement="right"
title="Eu pid nunc urna integer"><img src="../../../../../assets/images/portrait/small/avatar-s-5.png"
alt="avatar"></span>
</div>
<div class="timeline-card card text-white">
<img class="card-img img-fluid" src="../../../../../assets/images/portfolio/width-1200/portfolio-2.jpg"
alt="Card image">
<div class="card-img-overlay bg-overlay">
<h4 class="card-title white">Good Morning</h4>
<p class="card-text"><small>26 Aug, 2016 at 2.00 A.M</small></p>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
additional
content. This content is a little bit longer.</p>
<p class="card-text">Eu pid nunc urna integer, sed, cras tortor scelerisque penatibus facilisis a
pulvinar, rhoncus sagittis ut nunc elit! Sociis in et? Rhoncus, vel dignissim in scelerisque. Dolor
lacus pulvinar adipiscing adipiscing montes!</p>
</div>
</div>
</li>
<li class="timeline-item mt-3">
<div class="timeline-badge">
<span class="bg-teal bg-lighten-1" data-toggle="tooltip" data-placement="left"
title="Nullam facilisis fermentum"><i class="la la-check-square-o"></i></span>
</div>
<div class="timeline-card card border-grey border-lighten-2"
*blockUI="'sofiaOravTwo'; message: 'Loading'">
<m-card [options]="options" (reloadFunction)="reloadSofiaOravTwo($event)">
<ng-container mCardHeaderTitle>
<a [routerLink]="" class="">
Sofia Orav
<p class="card-subtitle text-muted mb-0 pt-1">
<span class="font-small-3">18 June, 2016 at 4.50 P.M</span>
</p>
</a>
</ng-container>
<ng-container mCardBody>
<p class="card-text">Nullam facilisis fermentum aliquam. Suspendisse ornare dolor vitae libero
hendrerit auctor lacinia a ligula. Curabitur elit tellus, porta ut orci sed, fermentum bibendum
nisi.</p>
<ul class="list-group">
<li class="list-group-item">
<span class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="input-1">
<label class="custom-control-label" for="input-1">Cras justo odio</label>
</span>
</li>
<li class="list-group-item">
<span class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="input-2" checked>
<label class="custom-control-label" for="input-2" checked="checked">Dapibus ac facilisis
in</label>
</span>
</li>
<li class="list-group-item">
<span class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="input-3">
<label class="custom-control-label" for="input-3">Morbi leo risus</label>
</span>
</li>
<li class="list-group-item">
<span class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="input-4" disabled checked>
<label class="custom-control-label" for="input-4">Porta ac consectetur
ac</label>
</span>
</li>
<li class="list-group-item">
<span class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="input-5">
<label class="custom-control-label" for="input-5">Vestibulum at eros</label>
</span>
</li>
</ul>
</ng-container>
<ng-container mCardFooter>
<fieldset class="form-group position-relative has-icon-left mb-0">
<input type="text" class="form-control" placeholder="Write comments...">
<div class="form-control-position">
<i class="la la-dashcube"></i>
</div>
</fieldset>
</ng-container>
</m-card>
</div>
</li>
<li class="timeline-item">
<div class="timeline-badge">
<span class="bg-purple bg-lighten-1" data-toggle="tooltip" data-placement="right"
title="Nullam facilisis fermentum"><i class="la la-area-chart"></i></span>
</div>
<div class="timeline-card card border-grey border-lighten-2">
<div class="card-header">
<h4 class="card-title"><a [routerLink]="">Punch Card Chart</a></h4>
<p class="card-subtitle text-muted mb-0 pt-1">
<span class="font-small-3">6 Feb, 2016 at 6.00 A.M</span>
</p>
</div>
<div class="card-content">
<div class="card-content">
<div class="card-body">
<p class="card-text">Nullam facilisis fermentum aliquam. Suspendisse ornare dolor vitae libero
hendrerit auctor lacinia a ligula. Curabitur elit tellus, porta ut orci sed, fermentum bibendum
nisi.</p>
<div class="chart-container">
<div echarts [options]="option" class="height-400 overflow-hidden echart-container"></div>
</div>
</div>
</div>
<div class="card-footer px-0 py-0">
<div class="card-body">
<fieldset class="form-group position-relative has-icon-left mb-0">
<input type="text" class="form-control" placeholder="Write comments...">
<div class="form-control-position">
<i class="la la-dashcube"></i>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- 2015 -->
<ul class="timeline">
<li class="timeline-line"></li>
<li class="timeline-group">
<a [routerLink]="" class="btn btn-primary"><i class="la la-calendar-o"></i> 2015</a>
</li>
</ul>
<ul class="timeline">
<li class="timeline-line"></li>
<!-- /.timeline-line -->
<li class="timeline-item block">
<div class="timeline-badge">
<a title="" data-context="inverse" data-container="body" class="border-silc" [routerLink]=""
data-original-title="block highlight"></a>
</div>
<div class="timeline-card card border-grey border-lighten-2">
<div class="card-header">
<div class="text-center">
<p class="mt-1"><i class="la la-file-image-o font-medium-4"></i></p>
<h4>Media Gallery</h4>
<p class="timeline-date">July 1, 2015</p>
<p>Eu pid nunc urna integer, sed, cras tortor scelerisque penatibus facilisis a pulvinar, rhoncus
sagittis ut nunc elit! Sociis in et?</p>
</div>
</div>
<!-- Image grid -->
<div class="card-content">
<div class="card-body my-gallery">
<div class="row">
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image1"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image2"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image3"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image4"></ngxps-gallery>
</a2p-gallery>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image5"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image6"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image7"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image8"></ngxps-gallery>
</a2p-gallery>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image9"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image10"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image11"></ngxps-gallery>
</a2p-gallery>
</div>
<div class="col-md-3 col-sm-6 col-12">
<a2p-gallery>
<ngxps-gallery [images]="image12"></ngxps-gallery>
</a2p-gallery>
</div>
</div>
<ngxps-lightbox></ngxps-lightbox>
</div>
</div>
<!--/ PhotoSwipe -->
</div>
</li>
<li class="timeline-item">
<div class="timeline-badge">
<span class="bg-warning bg-darken-1" data-toggle="tooltip" data-placement="right"
title="Application API Support"><i class="la la-life-ring"></i></span>
</div>
<div class="timeline-card card border-grey border-lighten-2">
<div class="card-header">
<div class="media">
<div class="media-left mr-1">
<a [routerLink]="">
<span class="avatar avatar-md avatar-busy"><img
src="../../../../../assets/images/portrait/small/avatar-s-18.png" alt="avatar"></span>
<i></i>
</a>
</div>
<div class="media-body">
<h4 class="card-title"><a [routerLink]="">Application API Support</a></h4>
<p class="card-subtitle text-muted mb-0 pt-1">
<span class="font-small-3">15 Oct, 2015 at 8.00 A.M</span>
<span class="badge badge-pill badge-warning float-right">High</span>
</p>
</div>
</div>
</div>
<div class="card-content">
<img class="img-fluid" src="../../../../../assets/images/portfolio/width-1200/portfolio-3.jpg"
alt="Timeline Image 1">
<div class="card-content">
<div class="card-body">
<p class="card-text">Nullam facilisis fermentum aliquam. Suspendisse ornare dolor vitae libero
hendrerit auctor lacinia a ligula. Curabitur elit tellus, porta ut orci sed, fermentum bibendum
nisi.</p>
<ul class="list-inline">
<li class="pr-1"><a [routerLink]="" class=""><span class="la la-commenting-o"></span>
Comment</a></li>
</ul>
</div>
</div>
<div class="card-footer px-0 py-0">
<div class="card-body">
<div class="media">
<div class="media-left mr-1">
<a [routerLink]="">
<span class="avatar avatar-online"><img
src="../../../../../assets/images/portrait/small/avatar-s-4.png" alt="avatar"></span>
</a>
</div>
<div class="media-body">
<p class="text-bold-600 mb-0"><a [routerLink]="">Crystal Lawson</a></p>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
commodo.</p>
<div class="media">
<div class="media-left mr-1">
<a [routerLink]="">
<span class="avatar avatar-online"><img
src="../../../../../assets/images/portrait/small/avatar-s-6.png"
alt="avatar"></span>
</a>
</div>
<div class="media-body">
<p class="text-bold-600 mb-0"><a [routerLink]="">Rafila Găitan</a></p>
<p>Gravida nulla. Nulla vel metus scelerisque ante sollicitudin.</p>
</div>
</div>
</div>
</div>
<fieldset class="form-group position-relative has-icon-left mb-0">
<input type="text" class="form-control" placeholder="Write comments...">
<div class="form-control-position">
<i class="la la-dashcube"></i>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</li>
<li class="timeline-item mt-3">
<div class="timeline-badge">
<span class="bg-amber bg-darken-1" data-toggle="tooltip" data-placement="left"
title="Quote of the day"><i class="la la-smile-o"></i></span>
</div>
<div class="timeline-card card border-grey border-lighten-2">
<div class="card-header">
<h4 class="card-title"><a [routerLink]="">Quote of the day</a></h4>
<p class="card-subtitle text-muted mb-0 pt-1">
<span class="font-small-3">03 March, 2015 at 5 P.M</span>
</p>
</div>
<div class="card-content">
<img class="img-fluid" src="../../../../../assets/images/portfolio/width-600/portfolio-3.jpg"
alt="Timeline Image 1">
<div class="card-body">
<blockquote class="card-bodyquote">
<p class="card-text">Eu pid nunc urna integer, sed, cras tortor scelerisque penatibus facilisis a
pulvinar, rhoncus sagittis ut nunc elit! Sociis in et?</p>
<footer>Someone famous in
<cite title="Source Title"> - Source Title</cite>
</footer>
</blockquote>
</div>
</div>
</div>
</li>
</ul>
<!-- 2014 -->
<ul class="timeline">
<li class="timeline-line"></li>
<li class="timeline-group">
<a [routerLink]="" class="btn btn-primary"><i class="la la-calendar-o"></i>Founded in 2012</a>
</li>
</ul>
<!-- 2014 -->
</section>
</div>
</div>
</div>
</div>

25
src/app/content/pages/user/user-profile/user-profile.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { UserProfileComponent } from './user-profile.component';
describe('UserProfileComponent', () => {
let component: UserProfileComponent;
let fixture: ComponentFixture<UserProfileComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ UserProfileComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserProfileComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

317
src/app/content/pages/user/user-profile/user-profile.component.ts Normal file
View File

@@ -0,0 +1,317 @@
import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';
import { NgBlockUI, BlockUI } from 'ng-block-ui';
import { ChartApiService } from '../../../../_services/chart.api';
interface Marker {
lat: number;
lng: number;
label: string;
}
const hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a', '10a', '11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'];
const days = ['Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
@Component({
selector: 'app-user-profile',
templateUrl: './user-profile.component.html',
styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {
image1 = [
{
img: '../../../../../assets/images/gallery/1.jpg',
thumb: '../../../../../assets/images/gallery/1.jpg',
description: 'Image 1'
}]
image2 = [{
img: '../../../../../assets/images/gallery/2.jpg',
thumb: '../../../../../assets/images/gallery/2.jpg',
description: 'Image 2'
}]
image3 = [{
img: '../../../../../assets/images/gallery/3.jpg',
thumb: '../../../../../assets/images/gallery/3.jpg',
description: 'Image 3'
}]
image4 = [{
img: '../../../../../assets/images/gallery/4.jpg',
thumb: '../../../../../assets/images/gallery/4.jpg',
description: 'Image 4'
}]
image5 = [{
img: '../../../../../assets/images/gallery/5.jpg',
thumb: '../../../../../assets/images/gallery/5.jpg',
description: 'Image 5'
}
]
image6 = [
{
img: '../../../../../assets/images/gallery/6.jpg',
thumb: '../../../../../assets/images/gallery/6.jpg',
description: 'Image 6'
}
]
image7 = [
{
img: '../../../../../assets/images/gallery/7.jpg',
thumb: '../../../../../assets/images/gallery/7.jpg',
description: 'Image 7'
}
]
image8 = [
{
img: '../../../../../assets/images/gallery/8.jpg',
thumb: '../../../../../assets/images/gallery/8.jpg',
description: 'Image 8'
}
]
image9 = [
{
img: '../../../../../assets/images/gallery/9.jpg',
thumb: '../../../../../assets/images/gallery/9.jpg',
description: 'Image 9'
}
]
image10 = [
{
img: '../../../../../assets/images/gallery/10.jpg',
thumb: '../../../../../assets/images/gallery/10.jpg',
description: 'Image 10'
}
]
image11 =
[
{
img: '../../../../../assets/images/gallery/11.jpg',
thumb: '../../../../../assets/images/gallery/11.jpg',
description: 'Image 11'
}
];
image12 =
[
{
img: '../../../../../assets/images/gallery/12.jpg',
thumb: '../../../../../assets/images/gallery/12.jpg',
description: 'Image 12'
}
];
data: any;
option: any;
public zoom = 15;
end: any;
@BlockUI('projectWorkOne') blockUIProjectWorkOne: NgBlockUI;
@BlockUI('sofiaOrav') blockUISofiaOrav: NgBlockUI;
@BlockUI('sofiaOravTwo') blockUISofiaOravTwo: NgBlockUI;
lat = 40.650002;
lng = -73.949997;
options = {
close: false,
expand: true,
minimize: false,
reload: true
};
markers: Marker[] = [
{
lat: this.lat,
lng: this.lng,
label: ''
}
];
constructor(private chartApiservice: ChartApiService) { }
chartOption: echarts.EChartsOption = {
// grid: {
// x: 40,
// x2: 40,
// y: 45,
// y2: 25
// },
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: { // Axis indicator axis trigger effective
type: 'shadow' // The default is a straight line, optionally: 'line' | 'shadow'
}
},
// Add legend
legend: {
data: ['Direct access', 'Email marketing', 'Advertising alliance', 'Video ads',
'Search engine', 'Google', 'Safari', 'Opera', 'Firefox']
},
// Add custom colors
color: ['#666EE8', '#FF9149', '#FF9966', '#FA8E57', '#FF637b', '#5175E0', '#A147F0', '#28D094', '#BABFC7'],
// // Enable drag recalculate
// calculable: true,
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Direct access',
type: 'bar',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Email marketing',
type: 'bar',
stack: 'advertising',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Advertising alliance',
type: 'bar',
stack: 'advertising',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video ads',
type: 'bar',
stack: 'advertising',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Search Engine',
type: 'bar',
stack: 'Total',
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
},
{
name: 'Google',
type: 'bar',
barWidth: 12,
stack: 'search engine',
data: [620, 732, 701, 734, 1090, 1130, 1120]
},
{
name: 'Safari',
type: 'bar',
stack: 'search engine',
data: [120, 132, 101, 134, 290, 230, 220]
},
{
name: 'Opera',
type: 'bar',
stack: 'search engine',
data: [60, 72, 71, 74, 190, 130, 110]
},
{
name: 'Firefox',
type: 'bar',
stack: 'search engine',
data: [62, 82, 91, 84, 109, 110, 120]
}
]
};
getChordchart() {
this.option = {
title: {
text: 'Punch Card of Github',
link: 'https://github.com/pissang/echarts-next/graphs/punch-card'
},
legend: {
data: ['Punch Card'],
left: 'right'
},
polar: {},
tooltip: {
formatter: function (params) {
return params.value[2] + ' commits in ' + hours[params.value[1]] + ' of ' + days[params.value[0]];
}
},
angleAxis: {
type: 'category',
data: hours,
boundaryGap: false,
splitLine: {
show: true,
lineStyle: {
color: '#999',
type: 'dashed'
}
},
axisLine: {
show: false
}
},
radiusAxis: {
type: 'category',
data: days,
axisLine: {
show: false
},
axisLabel: {
rotate: 45
}
},
series: [{
name: 'Punch Card',
type: 'scatter',
coordinateSystem: 'polar',
symbolSize: function (val) {
return val[2] * 2;
},
data: this.data['punchdata'].data,
animationDelay: function (idx) {
return idx * 5;
}
}]
};
}
ngOnInit() {
this.zoom = 15;
this.chartApiservice.getTimelineData().subscribe(Response => {
this.data = Response;
this.getChordchart();
});
}
reloadProjectWorkOne() {
this.blockUIProjectWorkOne.start('Loading..');
setTimeout(() => {
this.blockUIProjectWorkOne.stop();
}, 2500);
}
reloadSofiaOrav() {
this.blockUISofiaOrav.start('Loading..');
setTimeout(() => {
this.blockUISofiaOrav.stop();
}, 2500);
}
reloadSofiaOravTwo() {
this.blockUISofiaOravTwo.start('Loading..');
setTimeout(() => {
this.blockUISofiaOravTwo.stop();
}, 2500);
}
}