Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
2
2023-261
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Gamage G.G.I.V.M
2023-261
Commits
dc7e0e6e
Commit
dc7e0e6e
authored
May 24, 2023
by
Imesh Dilshan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
dashboard like, dislike
parent
3e713c66
Changes
7
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
205 additions
and
693 deletions
+205
-693
src/app/components/dashboard/dashboard.component.html
src/app/components/dashboard/dashboard.component.html
+169
-624
src/app/components/dashboard/dashboard.component.ts
src/app/components/dashboard/dashboard.component.ts
+32
-65
src/app/shared/components/breadcrumb/breadcrumb.component.html
...pp/shared/components/breadcrumb/breadcrumb.component.html
+1
-1
src/app/shared/components/sidebar/sidebar.component.html
src/app/shared/components/sidebar/sidebar.component.html
+3
-3
src/assets/images/dashboard/SDNC Scanning 1.jpg
src/assets/images/dashboard/SDNC Scanning 1.jpg
+0
-0
src/assets/images/dashboard/dislike.png
src/assets/images/dashboard/dislike.png
+0
-0
src/assets/images/dashboard/like.png
src/assets/images/dashboard/like.png
+0
-0
No files found.
src/app/components/dashboard/dashboard.component.html
View file @
dc7e0e6e
<!-- Container-fluid starts-->
<!DOCTYPE html>
<!-- <div class="container-fluid">
<html>
<div class="row">
<head>
<div class="col-xl-3 col-md-6 xl-50">
<title>
Customer Satisfaction Survey
</title>
<div class="card o-hidden widget-cards">
<style>
<div class="bg-warning card-body">
body
{
<div class="media static-top-widget row">
font-family
:
Arial
,
sans-serif
;
<div class="icons-widgets col-4">
background-color
:
#f5f5f5
;
<div class="align-self-center text-center">
margin
:
0
;
<app-feather-icons [icon]="'navigation'" class="font-warning"></app-feather-icons>
padding
:
20px
;
</div>
}
</div>
<div class="media-body col-8"><span class="m-0">Earnings</span>
<h3 class="mb-0">$ <span class="counter" [CountTo]="6659" [from]="0"
[duration]="2">6659</span><small> This Month</small></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 xl-50">
<div class="card o-hidden widget-cards">
<div class="bg-secondary card-body">
<div class="media static-top-widget row">
<div class="icons-widgets col-4">
<div class="align-self-center text-center">
<app-feather-icons [icon]="'box'" class="font-secondary"></app-feather-icons>
</div>
</div>
<div class="media-body col-8"><span class="m-0">Products</span>
<h3 class="mb-0">$ <span class="counter" [CountTo]="9856" [from]="0"
[duration]="2">9856</span><small> This Month</small></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 xl-50">
<div class="card o-hidden widget-cards">
<div class="bg-primary card-body">
<div class="media static-top-widget row">
<div class="icons-widgets col-4">
<div class="align-self-center text-center">
<app-feather-icons [icon]="'message-square'" class="font-primary"></app-feather-icons>
</div>
</div>
<div class="media-body col-8"><span class="m-0">Messages</span>
<h3 class="mb-0">$ <span class="counter" [CountTo]="893" [from]="0"
[duration]="2">893</span><small> This Month</small></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 xl-50">
<div class="card o-hidden widget-cards">
<div class="bg-danger card-body">
<div class="media static-top-widget row">
<div class="icons-widgets col-4">
<div class="align-self-center text-center">
<app-feather-icons [icon]="'users'" class="font-danger"></app-feather-icons>
</div>
</div>
<div class="media-body col-8"><span class="m-0">New Vendors</span>
<h3 class="mb-0">$ <span class="counter" [CountTo]="45631" [from]="0"
[duration]="2">45631</span><small> This Month</small></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 xl-100">
<div class="card">
<div class="card-header">
<h5>Market Value</h5>
</div>
<div class="card-body">
<div class="market-chart">
<x-chartist class="board-chart ct-golden-section" [data]="chart3.data" [type]="chart3.type"
[options]="chart3.options" [events]="chart3.events">
</x-chartist>
</div>
</div>
</div>
</div>
<div class="col-xl-6 xl-100">
<div class="card">
<div class="card-header">
<h5>Latest Orders</h5>
</div>
<div class="card-body">
<div class="user-status table-responsive latest-order-table">
<table class="table table-bordernone">
<thead>
<tr>
<th scope="col">Order ID</th>
<th scope="col">Order Total</th>
<th scope="col">Payment Method</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="digits">$120.00</td>
<td class="font-danger">Bank Transfers</td>
<td class="digits">On Way</td>
</tr>
<tr>
<td>2</td>
<td class="digits">$90.00</td>
<td class="font-secondary">Ewallets</td>
<td class="digits">Delivered</td>
</tr>
<tr>
<td>3</td>
<td class="digits">$240.00</td>
<td class="font-warning">Cash</td>
<td class="digits">Delivered</td>
</tr>
<tr>
<td>4</td>
<td class="digits">$120.00</td>
<td class="font-primary">Direct Deposit</td>
<td class="digits">$6523</td>
</tr>
<tr>
<td>5</td>
<td class="digits">$50.00</td>
<td class="font-primary">Bank Transfers</td>
<td class="digits">Delivered</td>
</tr>
</tbody>
</table>
<a href="javascript:void(0)" class="btn btn-primary">View All Orders</a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 xl-50">
<div class="card order-graph sales-carousel">
<div class="card-header">
<h6>Total Sales</h6>
<div class="row">
<div class="col-6">
<div class="small-chartjs">
<canvas baseChart id="small-graph-1" height="60vw" width="140vw"
[datasets]="smallLineChartData" [labels]="smallLineChartLabels"
[options]="smallLineChartOptions" [colors]="smallLineChartColors"
[legend]="smallLineChartLegend" [chartType]="smallLineChartType"
(chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
<div class="col-6">
<div class="value-graph">
<h3>42% <span><i class="fa fa-angle-up font-primary"></i></span></h3>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="media">
<div class="media-body">
<span>Sales Last Month</span>
<h2 class="mb-0">9054</h2>
<p>0.25% <span><i class="fa fa-angle-up"></i></span></p>
<h5 class="f-w-600">Gross sales of August</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
</div>
<div class="bg-primary b-r-8">
<div class="small-box">
<i data-feather="briefcase"></i>
.container
{
</div>
max-width
:
400px
;
</div>
margin
:
0
auto
;
</div>
padding
:
20px
;
</div>
border-radius
:
5px
;
</div>
box-shadow
:
0
2px
5px
rgba
(
0
,
0
,
0
,
0.1
);
</div>
border
:
2px
solid
#ccc
;
<div class="col-xl-3 col-md-6 xl-50">
background-color
:
#f9f9f9
;
/* Update to desired light color */
<div class="card order-graph sales-carousel">
}
<div class="card-header">
<h6>Total purchase</h6>
<div class="row">
<div class="col-6">
<div class="small-chartjs">
<canvas baseChart id="small-graph-2" height="60vw" width="140vw"
[datasets]="smallLine2ChartData" [labels]="smallLine2ChartLabels"
[options]="smallLine2ChartOptions" [colors]="smallLine2ChartColors"
[legend]="smallLine2ChartLegend" [chartType]="smallLine2ChartType"
(chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
<div class="col-6">
<div class="value-graph">
<h3>20% <span><i class="fa fa-angle-up font-secondary"></i></span></h3>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="media">
<div class="media-body">
<span>Monthly purchase</span>
<h2 class="mb-0">2154</h2>
<p>0.13% <span><i class="fa fa-angle-up"></i></span></p>
<h5 class="f-w-600">Avg Gross purchase</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
</div>
<div class="bg-secondary b-r-8">
<div class="small-box">
<i data-feather="credit-card"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 xl-50">
<div class="card order-graph sales-carousel">
<div class="card-header">
<h6>Total cash transaction</h6>
<div class="row">
<div class="col-6">
<div class="small-chartjs">
<canvas baseChart id="small-graph-3" height="60vw" width="140vw"
[datasets]="smallLine3ChartData" [labels]="smallLine3ChartLabels"
[options]="smallLine3ChartOptions" [colors]="smallLine3ChartColors"
[legend]="smallLine3ChartLegend" [chartType]="smallLine3ChartType"
(chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
<div class="col-6">
<div class="value-graph">
<h3>28% <span><i class="fa fa-angle-up font-warning"></i></span></h3>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="media">
<div class="media-body">
<span>Cash on hand</span>
<h2 class="mb-0">4672</h2>
<p>0.8% <span><i class="fa fa-angle-up"></i></span></p>
<h5 class="f-w-600">Details about cash</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
</div>
<div class="bg-warning b-r-8">
<div class="small-box">
<i data-feather="shopping-cart"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 xl-50">
<div class="card order-graph sales-carousel">
<div class="card-header">
<h6>Daily Deposits</h6>
<div class="row">
<div class="col-6">
<div class="small-chartjs">
<canvas baseChart id="small-graph-4" height="60vw" width="140vw"
[datasets]="smallLine4ChartData" [labels]="smallLine4ChartLabels"
[options]="smallLine4ChartOptions" [colors]="smallLine4ChartColors"
[legend]="smallLine4ChartLegend" [chartType]="smallLine4ChartType"
(chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
<div class="col-6">
<div class="value-graph">
<h3>75% <span><i class="fa fa-angle-up font-danger"></i></span></h3>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="media">
<div class="media-body">
<span>Security Deposits</span>
<h2 class="mb-0">0782</h2>
<p>0.25% <span><i class="fa fa-angle-up"></i></span></p>
<h5 class="f-w-600">Gross sales of June</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
</div>
<div class="bg-danger b-r-8">
<div class="small-box">
<i data-feather="calendar"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h5>Buy / Sell</h5>
</div>
<div class="card-body sell-graph">
<canvas baseChart id="myGraph" [datasets]="lineChartData" [labels]="lineChartLabels"
[options]="lineChartOptions" [colors]="lineChartColors" [legend]="lineChartLegend"
[chartType]="lineChartType" (chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
<div class="col-xl-6 xl-100">
<div class="card height-equal">
<div class="card-header">
<h5>Products Cart</h5>
</div>
<div class="card-body">
<div class="user-status table-responsive products-table">
<table class="table table-bordernone mb-0">
<thead>
<tr>
<th scope="col">Details</th>
<th scope="col">Quantity</th>
<th scope="col">Status</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Simply dummy text of the printing</td>
<td class="digits">1</td>
<td class="font-primary">Pending</td>
<td class="digits">$6523</td>
</tr>
<tr>
<td>Long established</td>
<td class="digits">5</td>
<td class="font-secondary">Cancle</td>
<td class="digits">$6523</td>
</tr>
<tr>
<td>sometimes by accident</td>
<td class="digits">10</td>
<td class="font-secondary">Cancle</td>
<td class="digits">$6523</td>
</tr>
<tr>
<td>Classical Latin literature</td>
<td class="digits">9</td>
<td class="font-primary">Return</td>
<td class="digits">$6523</td>
</tr>
<tr>
<td>keep the site on the Internet</td>
<td class="digits">8</td>
<td class="font-primary">Pending</td>
<td class="digits">$6523</td>
</tr>
<tr>
<td>Molestiae consequatur</td>
<td class="digits">3</td>
<td class="font-secondary">Cancle</td>
<td class="digits">$6523</td>
</tr>
<tr>
<td>Pain can procure</td>
<td class="digits">8</td>
<td class="font-primary">Return</td>
<td class="digits">$6523</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-xl-6 xl-100">
<div class="card height-equal">
<div class="card-header">
<h5>Empolyee Status</h5>
</div>
<div class="card-body">
<div class="user-status table-responsive products-table">
<table class="table table-bordernone mb-0">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Designation</th>
<th scope="col">Skill Level</th>
<th scope="col">Experience</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bd-t-none u-s-tb">
<div class="align-middle image-sm-size"><img
class="img-radius align-top m-r-15 rounded-circle"
src="assets/images/dashboard/user2.jpg" alt="" data-original-title=""
title="">
<div class="d-inline-block">
<h6>John Deo <span class="text-muted digits">(14+ Online)</span></h6>
</div>
</div>
</td>
<td>Designer</td>
<td>
<div class="progress-showcase">
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-primary" role="progressbar"
style="width: 30%" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
</td>
<td class="digits">2 Year</td>
</tr>
<tr>
<td class="bd-t-none u-s-tb">
<div class="align-middle image-sm-size"><img
class="img-radius align-top m-r-15 rounded-circle"
src="assets/images/dashboard/user1.jpg" alt="" data-original-title=""
title="">
<div class="d-inline-block">
<h6>Holio Mako <span class="text-muted digits">(250+ Online)</span></h6>
</div>
</div>
</td>
<td>Developer</td>
<td>
<div class="progress-showcase">
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-secondary" role="progressbar"
style="width: 70%" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
</td>
<td class="digits">3 Year</td>
</tr>
<tr>
<td class="bd-t-none u-s-tb">
<div class="align-middle image-sm-size"><img
class="img-radius align-top m-r-15 rounded-circle"
src="assets/images/dashboard/man.png" alt="" data-original-title=""
title="">
<div class="d-inline-block">
<h6>Mohsib lara<span class="text-muted digits">(99+ Online)</span></h6>
</div>
</div>
</td>
<td>Tester</td>
<td>
<div class="progress-showcase">
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-primary" role="progressbar"
style="width: 60%" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
</td>
<td class="digits">5 Month</td>
</tr>
<tr>
<td class="bd-t-none u-s-tb">
<div class="align-middle image-sm-size"><img
class="img-radius align-top m-r-15 rounded-circle"
src="assets/images/dashboard/user.png" alt="" data-original-title=""
title="">
<div class="d-inline-block">
<h6>Hileri Soli <span class="text-muted digits">(150+ Online)</span>
</h6>
</div>
</div>
</td>
<td>Designer</td>
<td>
<div class="progress-showcase">
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-secondary" role="progressbar"
style="width: 30%" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
</td>
<td class="digits">3 Month</td>
</tr>
<tr>
<td class="bd-t-none u-s-tb">
<div class="align-middle image-sm-size"><img
class="img-radius align-top m-r-15 rounded-circle"
src="assets/images/dashboard/designer.jpg" alt=""
data-original-title="" title="">
<div class="d-inline-block">
<h6>Pusiz bia <span class="text-muted digits">(14+ Online)</span></h6>
</div>
</div>
</td>
<td>Designer</td>
<td>
<div class="progress-showcase">
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-primary" role="progressbar"
style="width: 90%" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
</td>
<td class="digits">5 Year</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h5>Sales Status</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-xl-3 col-sm-6 xl-50">
<div class="order-graph">
<h6>Orders By Location</h6>
<div class="chart-block chart-vertical-center">
<ngx-charts-pie-chart class="pie-colours-1" [view]="view"
[scheme]="doughnutChartColorScheme" [results]="pieData" [explodeSlices]="false"
[labels]="doughnutChartShowLabels" [arcWidth]=0.50 [doughnut]="true"
[animations]="false" [tooltipDisabled]="doughnutChartTooltip"
[gradient]="doughnutChartGradient">
</ngx-charts-pie-chart>
</div>
<div class="order-graph-bottom">
<div class="media">
<div class="order-color-primary"></div>
<div class="media-body">
<h6 class="mb-0">Saint Lucia <span class="pull-right">$157</span></h6>
</div>
</div>
<div class="media">
<div class="order-color-secondary"></div>
<div class="media-body">
<h6 class="mb-0">Kenya <span class="pull-right">$347</span></h6>
</div>
</div>
<div class="media">
<div class="order-color-danger"></div>
<div class="media-body">
<h6 class="mb-0">Liberia<span class="pull-right">$468</span></h6>
</div>
</div>
<div class="media">
<div class="order-color-warning"></div>
<div class="media-body">
<h6 class="mb-0">Christmas Island<span class="pull-right">$742</span></h6>
</div>
</div>
<div class="media">
<div class="order-color-success"></div>
<div class="media-body">
<h6 class="mb-0">Saint Helena <span class="pull-right">$647</span></h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 xl-50">
<div class="order-graph sm-order-space">
<h6>Sales By Location</h6>
<div class="peity-chart-dashboard text-center chart-vertical-center">
<ngx-charts-pie-chart class="pie-colours-1" [view]="view"
[scheme]="doughnutChartColorScheme" [results]="doughnutData"
[explodeSlices]="false" [labels]="doughnutChartShowLabels" [arcWidth]=0.99
[doughnut]="true" [animations]="false" [tooltipDisabled]="doughnutChartTooltip"
[gradient]="doughnutChartGradient">
</ngx-charts-pie-chart>
</div>
<div class="order-graph-bottom sales-location">
<div class="media">
<div class="order-shape-primary"></div>
<div class="media-body">
<h6 class="mb-0 mr-0">Germany <span class="pull-right">25%</span></h6>
</div>
</div>
<div class="media">
<div class="order-shape-secondary"></div>
<div class="media-body">
<h6 class="mb-0 mr-0">Brasil <span class="pull-right">10%</span></h6>
</div>
</div>
<div class="media">
<div class="order-shape-danger"></div>
<div class="media-body">
<h6 class="mb-0 mr-0">United Kingdom<span class="pull-right">34%</span></h6>
</div>
</div>
<div class="media">
<div class="order-shape-warning"></div>
<div class="media-body">
<h6 class="mb-0 mr-0">Australia<span class="pull-right">5%</span></h6>
</div>
</div>
<div class="media">
<div class="order-shape-success"></div>
<div class="media-body">
<h6 class="mb-0 mr-0">Canada <span class="pull-right">25%</span></h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 xl-100">
<div class="order-graph xl-space">
<h6>Revenue for last month</h6>
<div class="ct-4 flot-chart-container">
<x-chartist [type]="chart5.type" [data]="chart5.data" [options]="chart5.options">
</x-chartist>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
h1
{
text-align
:
center
;
color
:
#333
;
}
.response-chart
{
margin-bottom
:
10px
;
text-align
:
center
;
}
.response-chart
input
[
type
=
"radio"
]
{
display
:
none
;
}
.response-chart
label
{
display
:
inline-block
;
text-align
:
center
;
width
:
60px
;
height
:
60px
;
line-height
:
60px
;
border-radius
:
50%
;
border
:
2px
solid
#ccc
;
padding
:
0
;
cursor
:
pointer
;
transition
:
background-color
0.3s
ease
;
}
.response-chart
label
:hover
{
background-color
:
#f1f1f1
;
}
.response-chart
input
[
type
=
"radio"
]
:checked
+
label
{
background-color
:
#4CAF50
;
color
:
#fff
;
border-color
:
#4CAF50
;
}
.response-chart
label
img
{
max-width
:
100%
;
max-height
:
100%
;
}
.stats-container
{
text-align
:
center
;
margin-top
:
20px
;
}
.stats
{
display
:
inline-block
;
margin
:
0
10px
;
font-size
:
14px
;
color
:
#555
;
}
.stats
strong
{
display
:
block
;
font-size
:
20px
;
color
:
#333
;
}
.total-incidents-label
{
display
:
inline-block
;
font-size
:
14px
;
color
:
#555
;
}
.total-incidents
{
display
:
inline-block
;
font-size
:
20px
;
color
:
#333
;
}
</style>
</head>
<body>
<div
class=
"container"
>
<h1>
Customer Satisfaction Survey
</h1>
<div
class=
"response-chart"
>
<input
type=
"radio"
id=
"like"
name=
"satisfaction"
value=
"like"
(change)=
"handleResponse('like')"
>
<label
for=
"like"
><img
src=
"assets/images/dashboard/like.png"
alt=
"Like"
></label>
<input
type=
"radio"
id=
"dislike"
name=
"satisfaction"
value=
"dislike"
(change)=
"handleResponse('dislike')"
>
<label
for=
"dislike"
><img
src=
"assets/images/dashboard/dislike.png"
alt=
"Dislike"
></label>
</div>
</div>
</div> -->
<!-- Container-fluid Ends-->
<!-- Add more response options if needed -->
\ No newline at end of file
<div
class=
"stats-container"
>
<div
class=
"stats"
>
<strong>
Likes:
</strong>
<span
id=
"likesCount"
>
0
</span>
<span
id=
"likesPercentage"
>
(0%)
</span>
</div>
<div
class=
"stats"
>
<strong>
Dislikes:
</strong>
<span
id=
"dislikesCount"
>
0
</span>
<span
id=
"dislikesPercentage"
>
(0%)
</span>
</div>
<div
class=
"total-incidents-label"
>
<strong>
Total Incidents:
</strong>
</div>
<div
class=
"total-incidents"
>
<span
id=
"incidentsCount"
>
0
</span>
</div>
</div>
<!-- <script>
// JavaScript code for handling the selected response
var incidentsCount = 0;
var likesCount = 0;
var dislikesCount = 0;
var incidentsCountElem = document.getElementById('incidentsCount');
var likesCountElem = document.getElementById('likesCount');
var dislikesCountElem = document.getElementById('dislikesCount');
var likesPercentageElem = document.getElementById('likesPercentage');
var dislikesPercentageElem = document.getElementById('dislikesPercentage');
function updateStats() {
incidentsCountElem.textContent = incidentsCount;
likesCountElem.textContent = likesCount;
dislikesCountElem.textContent = dislikesCount;
var totalResponses = likesCount + dislikesCount;
var likesPercentage = (likesCount / totalResponses) * 100;
var dislikesPercentage = (dislikesCount / totalResponses) * 100;
likesPercentageElem.textContent = '(' + likesPercentage.toFixed(1) + '%)';
dislikesPercentageElem.textContent = '(' + dislikesPercentage.toFixed(1) + '%)';
}
var radios = document.querySelectorAll('input[type="radio"]');
for (var i = 0; i < radios.length; i++) {
radios[i].addEventListener('change', function() {
console.log('Selected response:', this.value);
incidentsCount++;
if (this.value === 'like') {
likesCount++;
} else if (this.value === 'dislike') {
dislikesCount++;
}
updateStats();
this.checked = false; // Uncheck the radio button for multiple responses
});
}
</script> -->
</div>
</body>
</html>
src/app/components/dashboard/dashboard.component.ts
View file @
dc7e0e6e
import
{
Component
,
OnInit
}
from
'
@angular/core
'
;
import
{
Component
,
OnInit
}
from
'
@angular/core
'
;
import
*
as
chartData
from
'
../../shared/data/chart
'
;
import
{
doughnutData
,
pieData
}
from
'
../../shared/data/chart
'
;
@
Component
({
@
Component
({
selector
:
'
app-dashboard
'
,
selector
:
'
app-dashboard
'
,
...
@@ -8,73 +6,42 @@ import { doughnutData, pieData } from '../../shared/data/chart';
...
@@ -8,73 +6,42 @@ import { doughnutData, pieData } from '../../shared/data/chart';
styleUrls
:
[
'
./dashboard.component.scss
'
]
styleUrls
:
[
'
./dashboard.component.scss
'
]
})
})
export
class
DashboardComponent
implements
OnInit
{
export
class
DashboardComponent
implements
OnInit
{
public
doughnutData
=
doughnutData
;
likesCount
:
number
=
0
;
public
pieData
=
pieData
;
incidentsCount
:
number
=
0
;
constructor
()
{
dislikesCount
:
number
=
0
;
Object
.
assign
(
this
,
{
doughnutData
,
pieData
})
}
// doughnut 2
public
view
=
chartData
.
view
;
public
doughnutChartColorScheme
=
chartData
.
doughnutChartcolorScheme
;
public
doughnutChartShowLabels
=
chartData
.
doughnutChartShowLabels
;
public
doughnutChartGradient
=
chartData
.
doughnutChartGradient
;
public
doughnutChartTooltip
=
chartData
.
doughnutChartTooltip
;
public
chart5
=
chartData
.
chart5
;
// lineChart
public
lineChartData
=
chartData
.
lineChartData
;
public
lineChartLabels
=
chartData
.
lineChartLabels
;
public
lineChartOptions
=
chartData
.
lineChartOptions
;
public
lineChartColors
=
chartData
.
lineChartColors
;
public
lineChartLegend
=
chartData
.
lineChartLegend
;
public
lineChartType
=
chartData
.
lineChartType
;
// lineChart
public
smallLineChartData
=
chartData
.
smallLineChartData
;
public
smallLineChartLabels
=
chartData
.
smallLineChartLabels
;
public
smallLineChartOptions
=
chartData
.
smallLineChartOptions
;
public
smallLineChartColors
=
chartData
.
smallLineChartColors
;
public
smallLineChartLegend
=
chartData
.
smallLineChartLegend
;
public
smallLineChartType
=
chartData
.
smallLineChartType
;
// lineChart
public
smallLine2ChartData
=
chartData
.
smallLine2ChartData
;
public
smallLine2ChartLabels
=
chartData
.
smallLine2ChartLabels
;
public
smallLine2ChartOptions
=
chartData
.
smallLine2ChartOptions
;
public
smallLine2ChartColors
=
chartData
.
smallLine2ChartColors
;
public
smallLine2ChartLegend
=
chartData
.
smallLine2ChartLegend
;
public
smallLine2ChartType
=
chartData
.
smallLine2ChartType
;
// lineChart
public
smallLine3ChartData
=
chartData
.
smallLine3ChartData
;
public
smallLine3ChartLabels
=
chartData
.
smallLine3ChartLabels
;
public
smallLine3ChartOptions
=
chartData
.
smallLine3ChartOptions
;
public
smallLine3ChartColors
=
chartData
.
smallLine3ChartColors
;
public
smallLine3ChartLegend
=
chartData
.
smallLine3ChartLegend
;
public
smallLine3ChartType
=
chartData
.
smallLine3ChartType
;
// lineChart
constructor
()
{
}
public
smallLine4ChartData
=
chartData
.
smallLine4ChartData
;
public
smallLine4ChartLabels
=
chartData
.
smallLine4ChartLabels
;
public
smallLine4ChartOptions
=
chartData
.
smallLine4ChartOptions
;
public
smallLine4ChartColors
=
chartData
.
smallLine4ChartColors
;
public
smallLine4ChartLegend
=
chartData
.
smallLine4ChartLegend
;
public
smallLine4ChartType
=
chartData
.
smallLine4ChartType
;
public
chart3
=
chartData
.
chart3
;
ngOnInit
()
{
// events
public
chartClicked
(
e
:
any
):
void
{
}
public
chartHovered
(
e
:
any
):
void
{
}
}
ngOnInit
()
{
updateStats
()
{
const
totalResponses
=
this
.
likesCount
+
this
.
dislikesCount
;
const
likesPercentage
=
totalResponses
>
0
?
((
this
.
likesCount
/
totalResponses
)
*
100
).
toFixed
(
1
)
:
'
0
'
;
const
dislikesPercentage
=
totalResponses
>
0
?
((
this
.
dislikesCount
/
totalResponses
)
*
100
).
toFixed
(
1
)
:
'
0
'
;
const
likesCountElem
=
document
.
getElementById
(
'
likesCount
'
);
const
dislikesCountElem
=
document
.
getElementById
(
'
dislikesCount
'
);
const
likesPercentageElem
=
document
.
getElementById
(
'
likesPercentage
'
);
const
dislikesPercentageElem
=
document
.
getElementById
(
'
dislikesPercentage
'
);
const
incidentsCountElem
=
document
.
getElementById
(
'
incidentsCount
'
);
if
(
likesCountElem
&&
dislikesCountElem
&&
likesPercentageElem
&&
dislikesPercentageElem
&&
incidentsCountElem
)
{
likesCountElem
.
textContent
=
this
.
likesCount
.
toString
();
dislikesCountElem
.
textContent
=
this
.
dislikesCount
.
toString
();
likesPercentageElem
.
textContent
=
`(
${
likesPercentage
}
%)`
;
dislikesPercentageElem
.
textContent
=
`(
${
dislikesPercentage
}
%)`
;
incidentsCountElem
.
textContent
=
(
this
.
likesCount
+
this
.
dislikesCount
).
toString
();
}
}
}
handleResponse
(
response
:
string
)
{
this
.
incidentsCount
++
;
if
(
response
===
'
like
'
)
{
this
.
likesCount
++
;
}
else
if
(
response
===
'
dislike
'
)
{
this
.
dislikesCount
++
;
}
this
.
updateStats
();
}
}
}
src/app/shared/components/breadcrumb/breadcrumb.component.html
View file @
dc7e0e6e
...
@@ -4,7 +4,7 @@
...
@@ -4,7 +4,7 @@
<div
class=
"col-lg-6"
>
<div
class=
"col-lg-6"
>
<div
class=
"page-header-left"
>
<div
class=
"page-header-left"
>
<h3>
{{title}}
<h3>
{{title}}
<small>
Multikart Admin
panel
</small>
<small>
SDN Controller
panel
</small>
</h3>
</h3>
</div>
</div>
</div>
</div>
...
...
src/app/shared/components/sidebar/sidebar.component.html
View file @
dc7e0e6e
<div
class=
"main-header-left d-none d-lg-block"
>
<div
class=
"main-header-left d-none d-lg-block"
>
<div
class=
"logo-wrapper"
><a
[routerLink]=
"'/dashboard/default'"
><img
class=
"blur-up lazyloaded"
<div
class=
"logo-wrapper"
><a
[routerLink]=
"'/dashboard/default'"
><img
class=
"blur-up lazyloaded"
src=
"assets/images/dashboard/
multikart-logo.pn
g"
alt=
""
></a></div>
src=
"assets/images/dashboard/
SDNC Scanning 1.jp
g"
alt=
""
></a></div>
</div>
</div>
<div
class=
"sidebar custom-scrollbar"
>
<div
class=
"sidebar custom-scrollbar"
>
<div
class=
"sidebar-user text-center"
>
<div
class=
"sidebar-user text-center"
>
<div><img
class=
"img-60 rounded-circle"
src=
"assets/images/dashboard/man.png"
alt=
"#"
>
<div><img
class=
"img-60 rounded-circle"
src=
"assets/images/dashboard/man.png"
alt=
"#"
>
</div>
</div>
<h6
class=
"mt-3 f-14"
>
JOHN
</h6>
<h6
class=
"mt-3 f-14"
>
Imesh Dilshan
</h6>
<p>
general manager.
</p>
<p>
User
</p>
</div>
</div>
<ul
class=
"sidebar-menu"
>
<ul
class=
"sidebar-menu"
>
<li
*ngFor=
"let menuItem of menuItems"
[ngClass]=
"{active: menuItem.active}"
>
<li
*ngFor=
"let menuItem of menuItems"
[ngClass]=
"{active: menuItem.active}"
>
...
...
src/assets/images/dashboard/SDNC Scanning 1.jpg
0 → 100644
View file @
dc7e0e6e
5.45 KB
src/assets/images/dashboard/dislike.png
0 → 100644
View file @
dc7e0e6e
42.1 KB
src/assets/images/dashboard/like.png
0 → 100644
View file @
dc7e0e6e
98.7 KB
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment