File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
appliedFilters
|
Type : any
|
|
|
|
hideElements
|
Type : boolean
|
Default value : false
|
|
|
Methods
|
checkForChanges
|
checkForChanges()
|
|
|
|
|
|
ngOnChanges
|
ngOnChanges(_changes: SimpleChanges)
|
|
|
Parameters :
| Name |
Type |
Optional |
| _changes |
SimpleChanges
|
No
|
|
|
contentRef
|
Type : TemplateRef<any>
|
Decorators :
@ViewChild('content', {read: TemplateRef})
|
|
|
|
Public
dialog
|
Type : MatDialog
|
|
|
|
outletRef
|
Type : ViewContainerRef
|
Decorators :
@ViewChild('outlet', {read: ViewContainerRef})
|
|
|
|
showLastUpdatedOn
|
Type : boolean
|
Default value : false
|
|
|
import { Component, Input, OnChanges, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ResourceService } from '@sunbird/shared';
import * as _ from "lodash-es";
import { PdServiceService } from '../services/pd-service/pd-service.service';
import dayjs from 'dayjs';
@Component({
selector: 'app-sb-bignumber',
templateUrl: './sb-bignumber.component.html',
styleUrls: ['./sb-bignumber.component.scss']
})
export class SbBignumberComponent implements OnInit, OnChanges {
@Input() chart;
lastUpdatedOn;
@Input() hideElements = false;
@Input() appliedFilters;
chartData;
chartConfig;
updatedData;
globalChange:boolean;
globalData;
@ViewChild('outlet', { read: ViewContainerRef }) outletRef: ViewContainerRef;
@ViewChild('content', { read: TemplateRef }) contentRef: TemplateRef<any>;
showLastUpdatedOn: boolean = false;
constructor(
public resourceService: ResourceService,
public dialog: MatDialog,
public filterService:PdServiceService
) { }
ngOnInit(){
this.updatedData = this.chartData = _.compact(this.chart.chartData);
this.chartConfig = this.chart.chartConfig;
if(_.get(this.chart,'lastUpdatedOn')){
this.lastUpdatedOn = dayjs(this.chart.lastUpdatedOn).format('DD-MMMM-YYYY');
if (_.get(this.chartConfig, 'options.showLastUpdatedOn') || this.lastUpdatedOn) {
this.showLastUpdatedOn = true;
}
}
}
ngOnChanges(_changes: SimpleChanges): void {
this.checkForChanges();
}
checkForChanges(){
if(Object.keys(this.appliedFilters).length){
this.globalData = this.filterService.getFilteredData(this.chartData,this.appliedFilters)
this.globalChange = true;
this.updatedData = this.globalData;
this.outletRef.clear();
this.outletRef.createEmbeddedView(this.contentRef);
}else{
this.globalData = this.chartData;
this.globalChange = false;
}
}
}
<div
*ngIf="showLastUpdatedOn && lastUpdatedOn"
class="sb-last-update-status mb-8"
>
<span>{{ resourceService?.frmelmnts?.lbl?.lastUpdatedOn }} : </span>
{{ lastUpdatedOn }}
</div>
<div class="d-flex flex-dr bigNumberCard py-24">
<ng-container #outlet [ngTemplateOutlet]="content">
</ng-container>
<ng-template #content>
<ng-container *ngIf="globalChange else default">
<ng-container *ngFor="let bigNum of chart?.chartConfig?.bigNumbers">
<sb-dashlet
[type]="'bigNumber'"
[data]="globalData | bigData: bigNum"
[config]="bigNum | bigData"
class="mt-8"
#lib
></sb-dashlet>
</ng-container>
</ng-container>
</ng-template>
<ng-template #default>
<ng-container *ngFor="let bigNum of chart?.chartConfig?.bigNumbers">
<sb-dashlet
[type]="'bigNumber'"
[data]="updatedData | bigData: bigNum"
[config]="bigNum | bigData"
class="mt-8"
#lib
>
</sb-dashlet>
</ng-container>
</ng-template>
</div>
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.sb-last-update-status {
font-size: calculateRem(12px);
font-weight: bold;
}
::ng-deep {
.bigNumberCard {
border-bottom: 0.0625rem solid var(--rc-dddddd) !important;
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 1.5rem !important;
sb-dashlet {
border-right: 0.0625rem solid var(--rc-dddddd) !important;
&:nth-child(3n + 3) {
border-right: 0rem solid var(--gray-100) !important;
}
}
.card {
flex: 1 !important;
background-color: var(--gray-hs) !important;
box-shadow: none !important;
margin-top: 1.5rem !important;
.header {
font-size: 1.125rem !important;
font-weight: unset !important;
}
.content {
padding: 0% !important;
}
.description {
color: var(--gray) !important;
font-size: 2.5rem !important;
font-weight: 700 !important;
margin-top: 0% !important;
}
.meta {
color: var(--gray-200);
font-size: calculateRem(18px) !important;
}
}
}
}
Legend
Html element with directive