Skip to content

2
2023-261
Commit dc7e0e6e authored by Imesh Dilshan's avatar Imesh Dilshan
Browse files
Options

dashboard like, dislike

parent 3e713c66
Show whitespace changes
Inline Side-by-side
Showing with 205 additions and 693 deletions
src/app/components/dashboard/dashboard.component.html
View file @ dc7e0e6e
<!-- Container-fluid starts-->
<!-- <div class="container-fluid">
<div class="row">
<div class="col-xl-3 col-md-6 xl-50">
<div class="card o-hidden widget-cards">
<div class="bg-warning 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]="'navigation'" class="font-warning"></app-feather-icons>
</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">
<!DOCTYPE html>
<html>
<head>
<title>Customer Satisfaction Survey</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border: 2px solid #ccc;
background-color: #f9f9f9; /* Update to desired light color */
}
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>
<i data-feather="briefcase"></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 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>
<!-- Add more response options if needed -->
<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>
</div>
</div> -->
<!-- Container-fluid Ends-->
\ No newline at end of file
<!-- <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 * as chartData from '../../shared/data/chart';
import { doughnutData, pieData } from '../../shared/data/chart';
@Component({
selector: 'app-dashboard',
......@@ -8,73 +6,42 @@ import { doughnutData, pieData } from '../../shared/data/chart';
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
public doughnutData = doughnutData;
public pieData = pieData;
constructor() {
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
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;
likesCount: number = 0;
incidentsCount: number = 0;
dislikesCount: number = 0;
constructor() { }
ngOnInit() {
}
// events
public chartClicked(e: any): void {
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();
}
public chartHovered(e: any): void {
}
ngOnInit() {
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 @@
<div class="col-lg-6">
<div class="page-header-left">
<h3>{{title}}
<small>Multikart Admin panel</small>
<small>SDN Controller panel</small>
</h3>
</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="logo-wrapper"><a [routerLink]="'/dashboard/default'"><img class="blur-up lazyloaded"
src="assets/images/dashboard/multikart-logo.png" alt=""></a></div>
src="assets/images/dashboard/SDNC Scanning 1.jpg" alt=""></a></div>
</div>
<div class="sidebar custom-scrollbar">
<div class="sidebar-user text-center">
<div><img class="img-60 rounded-circle" src="assets/images/dashboard/man.png" alt="#">
</div>
<h6 class="mt-3 f-14">JOHN</h6>
<p>general manager.</p>
<h6 class="mt-3 f-14">Imesh Dilshan</h6>
<p>User</p>
</div>
<ul class="sidebar-menu">
<li *ngFor="let menuItem of menuItems" [ngClass]="{active: menuItem.active}">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment