Currency Symbol in Dashboard

This commit is contained in:
Surendiran 2023-06-06 15:00:38 +05:30
parent e4f27db995
commit ce7d2986e4
9 changed files with 38 additions and 14 deletions

View File

@ -547,7 +547,7 @@
</div>
<div fxFlex.xs="70" fxFlex.sm="70" fxFlex.md="70" fxFlex.lg="70" fxFlex.xl="70">
<div class="service-info">{{details.servicesName}}</div>
<div class="service-info2">{{servicesList_data[i].duration.length>0 ? servicesList_data[i].duration[0].durationNew : details.duration}} Mins | <span class="indianSymbol">{{(servicesList_data[i].duration.length>0 ? servicesList_data[i].duration[0].fees : details.fees) | currency: currencySymbol}}</span></div>
<div class="service-info2">{{servicesList_data[i].duration.length>0 ? servicesList_data[i].duration[0].durationNew : details.duration}} Mins | <span class="indianSymbol">{{(servicesList_data[i].duration.length>0 ? servicesList_data[i].duration[0].fees : details.fees) | currency: currencySymbol:true:'2.0'}}</span></div>
<div class="info" (click)="asignService(details,i)">+ Customize the price and duration of a service.</div>
</div>
<div fxFlex.xs="15" fxFlex.sm="15" fxFlex.md="15" fxFlex.lg="15" fxFlex.xl="15" fxLayoutAlign="center center">

View File

@ -53,7 +53,7 @@
<ng-container matColumnDef="fees">
<th mat-header-cell *matHeaderCellDef class="font-color th-mat"> Fees </th>
<td mat-cell *matCellDef="let row" class="element-spc">{{row.fees | currency: currencySymbol}}</td>
<td mat-cell *matCellDef="let row" class="element-spc">{{row.fees | currency: currencySymbol:true:'2.0'}}</td>
</ng-container>
<ng-container matColumnDef="description">

View File

@ -44,12 +44,12 @@
<div class="card-block text-center">
<div class="row">
<div>
<h2>{{count.monthly_earning_count | currency:currency}}</h2>
<h2>{{count.monthly_earning_count | currency:currency:true:'2.0'}}</h2>
<p class="text-muted">Monthly</p>
</div>
<hr>
<div>
<h2>{{count.today_earning_count | currency:currency}}</h2>
<h2>{{count.today_earning_count | currency:currency:true:'2.0'}}</h2>
<p class="text-muted">Today</p>
</div>
</div>
@ -205,7 +205,7 @@
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap">
<mat-card class="pie">
<mat-card-title fxLayout="row" fxLayoutAlign="start center">
Practitioner wise Revenue&nbsp;
Practitioner wise Revenue&nbsp;({{currencyHtmlCode}})
<span fxFlex></span>
</mat-card-title>
<hr>
@ -241,7 +241,7 @@
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap">
<mat-card class="pie">
<mat-card-title fxLayout="row" fxLayoutAlign="start center">
Service Wise Revenue &nbsp;
Service Wise Revenue &nbsp;({{currencyHtmlCode}})
<span fxFlex></span>
</mat-card-title>
<hr>
@ -276,7 +276,7 @@
<canvas height="120" baseChart class="chart" [datasets]="ComboChartData" [labels]="comboChartLabels" [options]="ComboChartOptions" [colors]="chartColors" [legend]="comboChartLegend" [chartType]="barChartType"></canvas>
</mat-card-content>
<mat-card-content *ngIf="countAndRevenue == true">
<canvas height="120" baseChart class="chart" [datasets]="ComboChartData2" [labels]="comboChartLabels" [options]="ComboChartOptions" [colors]="chartColors" [legend]="comboChartLegend" [chartType]="chartColors2"></canvas>
<canvas height="120" baseChart class="chart" [datasets]="ComboChartData2" [labels]="comboChartLabels" [options]="ComboChartOptions" [colors]="chartColors2" [legend]="comboChartLegend" [chartType]="barChartType"></canvas>
</mat-card-content>
</mat-card>
</div>

View File

@ -263,7 +263,7 @@ ComboChartData: Array <any> = [{
];
ComboChartData2: Array <any> = [{
data: [],
label: 'Revenue',
label: '',
borderWidth: 1,
type: 'line',
fill: false
@ -329,6 +329,8 @@ messages: Object[] = [{
user_role: any;
currency: any;
countAndRevenue: boolean = false;
currencyHtmlCode: any;
constructor(private currencySymbol: CurrencyPipe,public _dash:DashboardService,private matIconRegistry: MatIconRegistry,private domSanitizer: DomSanitizer) {
// this.fetch((data) => { this.rows = data; });
Object.assign(this, {single, multi})
@ -340,6 +342,9 @@ messages: Object[] = [{
this.currency = localStorage.getItem('currency')
console.log(this.currency)
// Usage example
// const currencyName = 'INR';
this.currencyHtmlCode = this.getCurrencyHtmlCode(this.currency);
}
ngOnInit() {
@ -490,6 +495,7 @@ messages: Object[] = [{
console.log(this.ComboChartData)
this.ComboChartData[0].data = linecount
this.ComboChartData2[0].data = lineFees
this.ComboChartData2[0].label = 'Revenue ' + this.currencyHtmlCode
// this.ComboChartData.forEach(element => {
// console.log(element)
// if(element.type == 'line'){
@ -597,4 +603,22 @@ messages: Object[] = [{
console.log(event)
this.countAndRevenue = event
}
getCurrencyHtmlCode(currencyName) {
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: currencyName,
});
const sampleValue = 123; // Use a sample value to retrieve the currency symbol
const formattedValue = formatter.format(sampleValue);
const match = formattedValue.match(/(\D+)/); // Extract the non-numeric part (currency symbol)
const currencySymbol = match ? match[0] : '';
const spanElement = document.createElement('span');
spanElement.textContent = currencySymbol;
return spanElement.innerHTML;
}
}

View File

@ -111,7 +111,7 @@
<span class="head">Fees</span>
</div>
<div fxFlex.xs="75" fxFlex.sm="75" fxFlex.md="75" fxFlex.lg="75" fxFlex.xl="75">
<span>: {{busCurrency}} {{(serviceMapDetails.duration.length>0 ? serviceMapDetails.duration[0].fees : serviceMapDetails.service[0].fees) | currency: currency}}</span>
<span>: {{busCurrency}} {{(serviceMapDetails.duration.length>0 ? serviceMapDetails.duration[0].fees : serviceMapDetails.service[0].fees) | currency: currency:true:'2.0'}}</span>
</div>
</div>

View File

@ -272,7 +272,7 @@
<p class="param"><img src="assets/images/Time-Icon.svg" alt="Avatar" class="img">Time </p>
<span class="span-text">{{bookedDetails.time | date:'shortTime'}}</span>
<p class="param"><img src="assets/images/Location.svg" alt="Avatar" class="img">Amount </p>
<span class="span-text"><span class="ex" style="font-size: 12px;padding-bottom: 10px;line-height: 17px;"></span> {{bookedDetails.amount | currency: currency}}</span>
<span class="span-text"><span class="ex" style="font-size: 12px;padding-bottom: 10px;line-height: 17px;"></span> {{bookedDetails.amount | currency: currency:true:'2.0'}}</span>
</div>
</div>

View File

@ -219,7 +219,7 @@
<p class="param"><img src="assets/images/Time-Icon.svg" alt="Avatar" class="img">Time : </p>
<span class="span-text">{{slotTime | date:'shortTime'}}</span>
<p class="param"><img src="assets/images/Location.svg" alt="Avatar" class="img">Amount : </p>
<span class="span-text"><span class="ex" style="font-size: 12px;padding-bottom: 10px;line-height: 17px;"></span> {{(serviceMapdetails[0].duration.length>0 ? serviceMapdetails[0].duration[0].fees:serviceMapdetails[0].service[0].fees) | currency: currency}}</span>
<span class="span-text"><span class="ex" style="font-size: 12px;padding-bottom: 10px;line-height: 17px;"></span> {{(serviceMapdetails[0].duration.length>0 ? serviceMapdetails[0].duration[0].fees:serviceMapdetails[0].service[0].fees) | currency: currency:true:'2.0'}}</span>
<div>
<hr>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 btn-red" [ngStyle]="{'background':slot_array.length ==0 ? '#ccc':'#4caf50' }" [disabled]="slot_array.length ==0" (click)="submit()">PROCEED</button>

View File

@ -4,7 +4,7 @@ export const environment = {
// apiEndpoint:'http://venbainfotech.com:5000/',
// apiEndpoint:'https://192.168.159.24:8080/api/',
// apiEndpoint:'https://api.venbait.in/api/',
apiEndpoint:'https://dev.venbait.in/appointment/api/',
apiEndpoint:'https://dev.venbait.in/appointments/api/',
//EndUser URL
endUserUrl: window.location.origin+'/#/booking/',

View File

@ -7,8 +7,8 @@ export const environment = {
production: false,
environmentName: 'Testing Environment',//Localhost Environment.
// apiEndpoint:'http://venbainfotech.com:5000/api/',
apiEndpoint:'http://192.168.1.32:8080/api/',
// apiEndpoint:'https://dev.venbait.in/appointments/api/',
// apiEndpoint:'http://192.168.1.32:8080/api/',
apiEndpoint:'https://dev.venbait.in/appointments/api/',
//EndUser URL
endUserUrl: window.location.origin+'/#/booking/',