
<div class="clr-row" >
    <ng-container *ngFor="let item of dashboardModel; let i = index">
    <ng-container *ngIf="item.name === 'Index'" >
        <div class="clr-col-3" style="padding: 10px 12px 5px 12px;">
          <div class="card card-block" style="margin: 0%; padding: 1%;">
            <h4 class="card-title" style="text-align: center; font-weight: bolder; ">{{ item?.charttitle }}</h4>
            <p class="card-text" style="text-align: center;  color: red; font-size: 25px;">
              <!-- {{ item.function === "Count" ? calculateCount(item.key) : 'N/A' }} -->
              0
            </p>
          </div>
        </div>
    </ng-container> 



        <!-- <ng-container  *ngIf="item.name === 'Bar Chart'" >
            <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                <div class="chart-box" id="contentContainer" #contentContainer>
                    <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                      <canvas baseChart
                      [datasets]="item?.featchData?.barChartData"
                      [labels]="item.showlabel ? item?.featchData?.barChartLabels: ChartNoLabels"
                      [legend]="item.chartlegend"
                      [type]="'bar'">
                    </canvas>
                </div>
            </div>
        </ng-container>
            <ng-container *ngIf="item.name === 'Line Chart'" >
                <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                    <div class="chart-box" id="contentContainer" #contentContainer>
                        <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                        <canvas baseChart
                        [datasets]="item?.featchData?.chartData"
                        [labels]="item.showlabel ? item?.featchData?.chartLabels: ChartNoLabels"
                        [legend]="item.chartlegend"
                        [type]="'line'">
                    </canvas>
                    </div>
                </div>
            </ng-container>
                <ng-container *ngIf="item.name === 'Doughnut Chart'" >
                  <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                      <div class="chart-box" id="contentContainer" #contentContainer>
                          <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                          <canvas baseChart
                          [datasets]="item?.featchData?.chartData"
                          [labels]="item.showlabel ? item?.featchData?.chartLabels: ChartNoLabels"
                          [legend]="item.chartlegend"
                          [type]="'doughnut'">
                        </canvas>
                      </div>
                  </div>
                </ng-container>
                  <ng-container *ngIf="item.name === 'Bubble Chart'" >
                    <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                        <div class="chart-box" id="contentContainer" #contentContainer>
                            <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                            <canvas baseChart
                          [datasets]="item?.featchData?.bubbleChartData"
                          [legend]="item.chartlegend"
                          [type]="'bubble'">
                          </canvas>
                        </div>
                    </div>
                  </ng-container>
                    <ng-container  *ngIf="item.name === 'Pie Chart'" >
                      <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                          <div class="chart-box" id="contentContainer" #contentContainer>
                              <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                              <canvas baseChart
                              [datasets]="item?.featchData?.pieChartData"
                              [labels]="item.showlabel ? item?.featchData?.pieChartLabels: ChartNoLabels"
                              [legend]="item.chartlegend"
                              [type]="'pie'">
                            </canvas>
                          </div>
                      </div>
                    </ng-container>
                      <ng-container  *ngIf="item.name === 'PolarArea Chart'" >
                        <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                            <div class="chart-box" id="contentContainer" #contentContainer>
                                <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                                <canvas baseChart
                                [datasets]="item?.featchData?.polarAreaChartData"
                                [labels]="item.showlabel ? item?.featchData?.polarAreaChartLabels: ChartNoLabels"
                                [legend]="item.chartlegend"
                                [type]="'polarArea'">
                            </canvas>
                            </div>
                        </div>
                      </ng-container>
                        <ng-container  *ngIf="item.name === 'Radar Chart'" >
                          <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                              <div class="chart-box" id="contentContainer" #contentContainer>
                                  <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                                  <canvas baseChart
                                  [datasets]="item?.featchData?.radarChartData"
                                  [labels]="item.showlabel ? item?.featchData?.radarChartLabels: ChartNoLabels"
                                  [legend]="item.chartlegend"
                                  [type]="'radar'">
                              </canvas>
                              </div>
                          </div>
                        </ng-container>
                          <ng-container  *ngIf="item.name === 'Scatter Chart'" >
                            <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                                <div class="chart-box" id="contentContainer" #contentContainer>
                                    <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                                    <canvas baseChart
                                    [datasets]="item?.featchData?.scatterChartData"
                                    [labels]="item.showlabel ? item?.featchData?.scatterChartLabels: ChartNoLabels"
                                    [legend]="item.chartlegend"
                                    [type]="'scatter'">
                                </canvas>
                                </div>
                            </div>
                          </ng-container>
                            <ng-container  *ngIf="item.name === 'Scatter Chart'" >
                              <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                                  <div class="chart-box" id="contentContainer" #contentContainer>
                                      <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                                      <canvas baseChart
                                      [datasets]="item?.featchData?.scatterChartData"
                                      [labels]="item.showlabel ? item?.featchData?.scatterChartLabels: ChartNoLabels"
                                      [legend]="item.chartlegend"
                                      [type]="'scatter'">
                                  </canvas>
                                  </div>
                              </div>
                            </ng-container> -->
      </ng-container>

      <ng-container *ngFor="let item of dashboardChartData; let i = index">
        <ng-container  *ngIf="item.name === 'Bar Chart'" >
            <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                <div class="chart-box" id="contentContainer" #contentContainer>
                    <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                      <canvas baseChart
                      [datasets]="item?.featchData?.barChartData"
                      [labels]="item.showlabel ? item?.featchData?.barChartLabels: ChartNoLabels"
                      [legend]="item.chartlegend"
                      [type]="'bar'">
                    </canvas>
                </div>
            </div>
        </ng-container>
            <ng-container *ngIf="item.name === 'Line Chart'" >
                <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                    <div class="chart-box" id="contentContainer" #contentContainer>
                        <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                        <canvas baseChart
                        [datasets]="item?.featchData?.chartData"
                        [labels]="item.showlabel ? item?.featchData?.chartLabels: ChartNoLabels"
                        [legend]="item.chartlegend"
                        [type]="'line'">
                    </canvas>
                    </div>
                </div>
            </ng-container>
                <ng-container *ngIf="item.name === 'Doughnut Chart'" >
                  <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                      <div class="chart-box" id="contentContainer" #contentContainer>
                          <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                          <canvas baseChart
                          [datasets]="item?.featchData?.chartData"
                          [labels]="item.showlabel ? item?.featchData?.chartLabels: ChartNoLabels"
                          [legend]="item.chartlegend"
                          [type]="'doughnut'">
                        </canvas>
                      </div>
                  </div>
                </ng-container>
                  <ng-container *ngIf="item.name === 'Bubble Chart'" >
                    <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                        <div class="chart-box" id="contentContainer" #contentContainer>
                            <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                            <canvas baseChart
                          [datasets]="item?.featchData?.bubbleChartData"
                          [legend]="item.chartlegend"
                          [type]="'bubble'">
                          </canvas>
                        </div>
                    </div>
                  </ng-container>
                    <ng-container  *ngIf="item.name === 'Pie Chart'" >
                      <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                          <div class="chart-box" id="contentContainer" #contentContainer>
                              <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                              <canvas baseChart
                              [datasets]="item?.featchData?.pieChartData"
                              [labels]="item.showlabel ? item?.featchData?.pieChartLabels: ChartNoLabels"
                              [legend]="item.chartlegend"
                              [type]="'pie'">
                            </canvas>
                          </div>
                      </div>
                    </ng-container>
                      <ng-container  *ngIf="item.name === 'PolarArea Chart'" >
                        <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                            <div class="chart-box" id="contentContainer" #contentContainer>
                                <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                                <canvas baseChart
                                [datasets]="item?.featchData?.polarAreaChartData"
                                [labels]="item.showlabel ? item?.featchData?.polarAreaChartLabels: ChartNoLabels"
                                [legend]="item.chartlegend"
                                [type]="'polarArea'">
                            </canvas>
                            </div>
                        </div>
                      </ng-container>
                        <ng-container  *ngIf="item.name === 'Radar Chart'" >
                          <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                              <div class="chart-box" id="contentContainer" #contentContainer>
                                  <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                                  <canvas baseChart
                                  [datasets]="item?.featchData?.radarChartData"
                                  [labels]="item.showlabel ? item?.featchData?.radarChartLabels: ChartNoLabels"
                                  [legend]="item.chartlegend"
                                  [type]="'radar'">
                              </canvas>
                              </div>
                          </div>
                        </ng-container>
                          <ng-container  *ngIf="item.name === 'Scatter Chart'" >
                            <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                                <div class="chart-box" id="contentContainer" #contentContainer>
                                    <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                                    <canvas baseChart
                                    [datasets]="item?.featchData?.scatterChartData"
                                    [labels]="item.showlabel ? item?.featchData?.scatterChartLabels: ChartNoLabels"
                                    [legend]="item.chartlegend"
                                    [type]="'scatter'">
                                </canvas>
                                </div>
                            </div>
                          </ng-container>
                            <ng-container  *ngIf="item.name === 'Scatter Chart'" >
                              <div class="clr-col-4" style="padding: 10px 12px 5px 12px;">
                                  <div class="chart-box" id="contentContainer" #contentContainer>
                                      <h4 class="center"> <b>{{item?.charttitle}}</b>  </h4>
                                      <canvas baseChart
                                      [datasets]="item?.featchData?.scatterChartData"
                                      [labels]="item.showlabel ? item?.featchData?.scatterChartLabels: ChartNoLabels"
                                      [legend]="item.chartlegend"
                                      [type]="'scatter'">
                                  </canvas>
                                  </div>
                              </div>
                            </ng-container>
      </ng-container>
</div>





<div  style="width:1180px; margin:16px;
padding:0 16px;
background-color: #fff;
border:1px solid #ccc;
border-radius: 2px;">
  <clr-tabs>
    <clr-tab>
      <button clrTabLink>{{'ACTIVITIES' | translate}}</button>
      <clr-tab-content *clrIfActive>
        <br>
        <ng-template #showInfo>
        <div class="alert alert-info" role="alert">
          <div class="alert-items">
              <div class="alert-item static">
                  <span class="alert-text">
                    {{'NOTIFICATION_NOT_FOUND' | translate}}
                       <ng-template #loadingSpinner><clr-spinner [clrMedium]="true">{{'LOADING' | translate}} ... </clr-spinner></ng-template>
      <div *ngIf="error;else loadingSpinner">{{error}}</div>
      <div *ngIf="er;">{{er}}</div>       </span></div>
          </div>
      </div></ng-template>
      <div *ngIf="notification; else showInfo">
        <div *ngFor="let not of notification;">
          <ng-container  *ngIf="not?.image; else def">
            <img [src]="not?.image" alt="Avatar" style="height:50px;border-radius:50%;">
          </ng-container>
          <ng-template #def>
            <img src="../../../../assets/images/images.png" alt="" style="height: 50px;">
          </ng-template>
          {{not.notification}}
          <span class="label label-purple p7" style="margin-top: .4em;" [title]="not.time">
            <b>{{ not.time | timePipe }}</b>
          </span><br>
          <hr>
        </div></div>
      </clr-tab-content>
    </clr-tab>
    <clr-tab>
      <button  clrTabLink>{{'SUGGESTION_FOR_YOU'| translate}}</button>
      <clr-tab-content *clrIfActive>
       <br>
       <ng-template #suggetionInfo>
        <div class="alert alert-info" role="alert">
          <div class="alert-items">
              <div class="alert-item static">
                  <span class="alert-text">
                      {{'SUGGESTION_NOT_FOUND'| translate}}
                       <ng-template #loadingSpinner><clr-spinner [clrMedium]="true">{{'LOADING'| translate}} ... </clr-spinner></ng-template>
      <div *ngIf="error;else loadingSpinner">{{error}}</div>
      <div *ngIf="er;">{{er}}</div>       </span></div>
          </div>
      </div></ng-template>
       <ng-container *ngIf="projectsetup else suggetionInfo">
        <div  >
          <div class="clr-row">
            <div *ngFor="let app of projectsetup; let index = i" class="clr-col-md-6  clr-col-12" style="width: 310px;">
                <div class="card" style="background-color: azure;">
                    <div class="card-header">
                      <div class="clr-row">
                        <div class="clr-col-5">
                        <b class="word" id="projectword" [title]="app.owner"><clr-icon shape="employee"></clr-icon> {{app.owner}}   <span class="label label-light-blue p7 wordwrap" style="margin-top: .4em;" [title]="app.accessibility"> {{app.accessibility ? 'private' : 'public'}}</span></b>  
                      </div>
                        <div class="clr-col-7" style="text-align: right;">
      
                        </div>
                      </div>
                        <div class="card-title1" id="projectword">
                          <b style="font-size: 15px;" [title]="app.projectName">{{app.projectName}}</b>
                         </div>
                         <div class="clr-row">
                          <div class="clr-col-9"> <div class="card-title1" id="projectword" >
                            <b style="font-size: 15px;" class="p2" [title]="app.description">{{app.description ? app.description : 'project description'}}</b>
                          </div>
                           </div>
                          <div class="clr-col-3" style="text-align: right; display: flex; align-items: center; justify-content: flex-end;">

                            <a href="javascript:void(0)" class="btn--circle" (click)="goToModule(app.id);" >
                              <span class="btn-stage">◇</span>
                              <span class="btn-stage">{{'SERVICE'| translate}}</span>
                            </a>
                          </div>
                          
                        </div>
                        <div class="card-text">
                          <div class="clr-row" >
                            <div class="clr-col-12" >
                              <span *ngFor="let tech of app?.technology?.slice(0, 6); let i = index">
                            <span class="label label-light-blue p7 wordwrap" style="margin-top: .4em;" [title]="tech"> {{tech}}</span>
                            </span>
                            </div>
                            <!-- <div class="clr-col-5"  (click)="stopRedirection($event)">
                              
                          </div> -->
                      </div>
                  </div>
                    </div>
    
      
                    <div class="card-block" style="padding: 10px 10px 0px 10px;">
                    <div class="card-footer" style="padding: 0px 10px 6px 10px">
                        <button class="btn btn-sm btn-link"> {{'Last Updated On' | translate}} {{app.updatedAt|date}}</button>  <span style="margin: 0 0 0 10px; padding: 5px;" class="label p7"><clr-icon shape="calendar"></clr-icon>&nbsp;{{app.createdAt | timePipe}}</span>
                    </div>
                </div>
            </div>
        </div>
        </div>
      </div>
       </ng-container>
       <br>
      </clr-tab-content>
    </clr-tab>



  </clr-tabs>
</div>