vc-create-dashboard 3.0.84 → 3.0.85

package/src/lib/ui-kit/action-dialog/move/move.component.less

@@ -1,157 +0,0 @@
-::ng-deep .move-dialog {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &-container {
-    width: 560px;
-    border-radius: 4px;
-    -webkit-animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 50ms both;
-    animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 50ms both;
-  }
-
-  &-body {
-    background: #f8f8f8;
-    border-radius: 5px 5px 0 0;
-    padding: 50px 55px 35px;
-
-    p {
-      font-size: 14px;
-      color: #4e4e4e;
-      text-align: center;
-      margin: 0 0 24px;
-      font-weight: 400;
-
-      strong {
-        font-weight: 500;
-        font-style: italic;
-      }
-    }
-  }
-
-  &-icon {
-    background: #fff;
-    border: 1px solid #dcdcdc;
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    margin: 0 auto 35px;
-    padding: 5px 0 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-    color: #1c5bd1;
-  }
-
-  ul {
-    padding: 10px 0;
-    margin: 0;
-    display: flex;
-    justify-content: space-between;
-    li {
-      list-style: none;
-      display: block;
-      width: calc(50% - 5px);
-      app-cs-radio {
-        display: block;
-        border-radius: 4px;
-        padding: 7px 13px;
-        background: #ffffff;
-        label.radio-item {
-          span.value {
-            font-size: 10px !important;
-            font-weight: 500 !important;
-            color: #161b2f !important;
-            line-height: 16px !important;
-            text-transform: uppercase !important;
-          }
-        }
-      }
-    }
-  }
-  &-footer {
-    font-size: 14px;
-    background: #ffffff;
-    padding: 15px 20px;
-    letter-spacing: 0.2px;
-    border-radius: 0 0 4px 4px;
-    z-index: 1;
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    p {
-      color: #161b2f;
-      margin: 0;
-      font-size: 12px;
-      font-weight: 400;
-      margin-bottom: 0;
-      span {
-        font-weight: 500;
-      }
-    }
-    .action {
-      display: flex;
-    }
-    button {
-      font-size: 12px;
-      color: #1e5dd3;
-      letter-spacing: 1px;
-      font-weight: 500;
-      padding: 0 15px;
-      margin-left: 5px;
-      text-transform: uppercase;
-      border-radius: 3px;
-      height: 30px;
-      outline: none;
-      cursor: pointer;
-
-      &.greyButton {
-        background: #f1f1f1;
-        color: #1e5dd3;
-        border: 1px solid #f1f1f1;
-      }
-
-      &.blueBtn {
-        background: #1e5dd3;
-        color: #ffffff;
-        border: 1px solid #1e5dd3;
-      }
-    }
-  }
-}
-
-@-webkit-keyframes scale-up-center {
-  0% {
-    -webkit-transform: scale(0.5);
-    transform: scale(0.5);
-    opacity: 0;
-  }
-
-  100% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes scale-up-center {
-  0% {
-    -webkit-transform: scale(0.5);
-    transform: scale(0.5);
-    opacity: 0;
-  }
-
-  100% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-}

package/src/lib/ui-kit/action-dialog/move/move.component.ts

@@ -1,25 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { DialogConfig } from '../../dialog/dialog-config';
-import { DialogRef } from '../../dialog/dialog-ref';
-
-@Component({
-  selector: 'app-move',
-  templateUrl: './move.component.html',
-  styleUrls: ['./move.component.less'],
-})
-export class MoveComponent implements OnInit {
-  state = 'move';
-  constructor(private dialog: DialogRef, public dialogConfig: DialogConfig) {}
-
-  ngOnInit(): void {}
-  handleChecked(evt: any, type: any) {
-    this.state = type;
-  }
-  moveTheRisk(state: string) {
-    if (state === 'NO') {
-      this.dialog.close();
-    } else if (state === 'YES') {
-      this.dialog.close(this.state);
-    }
-  }
-}

package/src/lib/ui-kit/action-dialog/my-rating/my-rating.component.html

@@ -1,19 +0,0 @@
-<div class="alert-dialog">
-  <div class="alert-dialog-container">
-    <div class="alert-dialog-body">
-      <div class="alert-dialog-icon">
-        <div class="rating-icon">
-          <i class="risk-icons">&#xe90a;</i>
-        </div>
-      </div>
-      <p>{{ dialogConfig.data }}</p>
-    </div>
-    <div class="alert-dialog-footer">
-      <p>Are you sure you would like to proceed?</p>
-      <div>
-        <button class="greyButton" (click)="close(false)">no</button>
-        <button class="blueBtn" (click)="close(true)">Yes</button>
-      </div>
-    </div>
-  </div>
-</div>

package/src/lib/ui-kit/action-dialog/my-rating/my-rating.component.less

@@ -1,97 +0,0 @@
-.alert-dialog {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &-container {
-    width: 540px;
-    border-radius: 5px;
-    -webkit-animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 50ms both;
-    animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 50ms both;
-  }
-
-  &-body {
-    background: #f8f8f8;
-    border-radius: 5px 5px 0 0;
-    padding: 50px 15px 35px;
-
-    p {
-      font-size: 14px;
-      color: #4e4e4e;
-      text-align: center;
-      margin: 0;
-      font-weight: 400;
-
-      strong {
-        font-weight: 500;
-      }
-    }
-  }
-
-  &-icon {
-    background: #fff;
-    border: 1px solid #dcdcdc;
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    margin: 0 auto 35px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .rating-icon {
-      color: #1e5dd3;
-      font-size: 35px;
-      display: flex;
-    }
-  }
-
-  &-footer {
-    display: flex;
-    font-size: 14px;
-    background: #ffffff;
-    padding: 15px 20px;
-    letter-spacing: 0.2px;
-    border-radius: 0 0 4px 4px;
-    z-index: 1;
-    position: relative;
-    align-items: center;
-    justify-content: space-between;
-
-    p {
-      color: #161b2f;
-      margin: 0;
-    }
-
-    button {
-      font-size: 12px;
-      color: #1e5dd3;
-      letter-spacing: 1px;
-      font-weight: 500;
-      padding: 0 25px;
-      margin-left: 5px;
-      text-transform: uppercase;
-      border-radius: 3px;
-      height: 30px;
-      outline: none;
-      cursor: pointer;
-
-      &.greyButton {
-        background: #f1f1f1;
-        color: #1e5dd3;
-        border: 1px solid #f1f1f1;
-      }
-
-      &.blueBtn {
-        background: #1e5dd3;
-        color: #ffffff;
-        border: 1px solid #1e5dd3;
-      }
-    }
-  }
-}

package/src/lib/ui-kit/action-dialog/my-rating/my-rating.component.ts

@@ -1,18 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { DialogConfig } from '../../dialog/dialog-config';
-import { DialogRef } from '../../dialog/dialog-ref';
-
-@Component({
-  selector: 'app-my-rating',
-  templateUrl: './my-rating.component.html',
-  styleUrls: ['./my-rating.component.less'],
-})
-export class MyRatingComponent implements OnInit {
-  constructor(public dialogConfig: DialogConfig, private dialogRef: DialogRef) {}
-
-  ngOnInit(): void {}
-
-  close(performFunctionality: boolean) {
-    this.dialogRef.close(performFunctionality);
-  }
-}

package/src/lib/ui-kit/action-dialog/upload/upload.component.html

@@ -1,19 +0,0 @@
-<div class="alert-dialog">
-  <div class="alert-dialog-container">
-    <div class="alert-dialog-body">
-      <div class="alert-dialog-icon">
-        <div class="upload-icon">
-          <i class="risk-icons">&#xe934;</i>
-        </div>
-      </div>
-      <p>This action will <strong>upload</strong> a new file for bulk responsibility</p>
-    </div>
-    <div class="alert-dialog-footer">
-      <p>Are you sure you would like to proceed?</p>
-      <div>
-        <button class="greyButton">no</button>
-        <button class="blueBtn">Yes</button>
-      </div>
-    </div>
-  </div>
-</div>

package/src/lib/ui-kit/action-dialog/upload/upload.component.less

@@ -1,97 +0,0 @@
-.alert-dialog {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &-container {
-    width: 540px;
-    border-radius: 5px;
-    -webkit-animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 50ms both;
-    animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 50ms both;
-  }
-
-  &-body {
-    background: #f8f8f8;
-    border-radius: 5px 5px 0 0;
-    padding: 50px 15px 35px;
-
-    p {
-      font-size: 16px;
-      color: #4e4e4e;
-      text-align: center;
-      margin: 0;
-      font-weight: 400;
-
-      strong {
-        font-weight: 500;
-      }
-    }
-  }
-
-  &-icon {
-    background: #fff;
-    border: 1px solid #dcdcdc;
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    margin: 0 auto 35px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .upload-icon {
-      color: #1c5bd1;
-      font-size: 20px;
-      display: flex;
-    }
-  }
-
-  &-footer {
-    display: flex;
-    font-size: 14px;
-    background: #ffffff;
-    padding: 15px 20px;
-    letter-spacing: 0.2px;
-    border-radius: 0 0 4px 4px;
-    z-index: 1;
-    position: relative;
-    align-items: center;
-    justify-content: space-between;
-
-    p {
-      color: #161b2f;
-      margin: 0;
-    }
-
-    button {
-      font-size: 12px;
-      color: #1e5dd3;
-      letter-spacing: 1px;
-      font-weight: 500;
-      padding: 0 25px;
-      margin-left: 5px;
-      text-transform: uppercase;
-      border-radius: 3px;
-      height: 30px;
-      outline: none;
-      cursor: pointer;
-
-      &.greyButton {
-        background: #f1f1f1;
-        color: #1e5dd3;
-        border: 1px solid #f1f1f1;
-      }
-
-      &.blueBtn {
-        background: #1e5dd3;
-        color: #ffffff;
-        border: 1px solid #1e5dd3;
-      }
-    }
-  }
-}

package/src/lib/ui-kit/action-dialog/upload/upload.component.ts

@@ -1,12 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-upload',
-  templateUrl: './upload.component.html',
-  styleUrls: ['./upload.component.less'],
-})
-export class UploadComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit(): void {}
-}

package/src/lib/ui-kit/chart/bar/bar.component.html

@@ -1,28 +0,0 @@
-<div class="bar-graph">
-  <div class="left">
-    <ng-container></ng-container>
-    <p></p>
-  </div>
-  <div class="right">
-    <ng-container *ngIf="graphs | segmenter as resolvedGraph">
-      <!-- {{resolvedGraph|json}} -->
-      <svg class="chart" width="100%" height="250" role="img">
-        <!-- <rect width="90%" height="400"> -->
-        <g class="bar" *ngFor="let data of graphs; let i = index">
-          <rect
-            attr.width="{{ resolvedGraph[i][j] }}%"
-            height="10"
-            *ngFor="let data of [1, 1, 1, 1, 1]; let j = index"
-            attr.x="{{ resolvedGraph[i] | xCalculator: j }}%"
-            attr.y="{{ 11 * i }}"
-            attr.fill="{{ color[j].color }}"
-          >
-            <!-- {{(resolvedGraph[i]|xCalculator:j)}}% -->
-          </rect>
-          <!-- <rect attr.y="{{11*i}}" width="30" height="10"></rect> -->
-        </g>
-        <!-- </rect> -->
-      </svg>
-    </ng-container>
-  </div>
-</div>

package/src/lib/ui-kit/chart/bar/bar.component.less

@@ -1,13 +0,0 @@
-.bar-graph {
-  width: 100%;
-  display: flex;
-  .left {
-    width: 150px;
-  }
-  .right {
-    width: calc(100% - 150px);
-    svg {
-      width: 100%;
-    }
-  }
-}

package/src/lib/ui-kit/chart/bar/bar.component.ts

@@ -1,44 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-bar',
-  templateUrl: './bar.component.html',
-  styleUrls: ['./bar.component.less'],
-})
-export class BarComponent implements OnInit {
-  graphs: any[] = [
-    ['VComply Inc', [9, 90, 3, 90, 0]],
-    ['Finance', [10, 3, 7, 34, 7]],
-    ['Engineering', [70, 6, 836, 9, 39]],
-    ['HR', [10, 44, 7, 76, 39]],
-    ['Marketing', [30, 4, 0, 9, 30]],
-    ['Bangalore', [9, 6, 90, 0, 90]],
-    ['Kolkata', [10, 3, 7, 34, 7]],
-    ['San Fransisco', [70, 0, 36, 9, 39]],
-    ['South America', [10, 44, 76, 67, 0]],
-  ];
-  maxSum = 0;
-  color: any[] = [
-    { legend: 'Negligible', color: 'green' },
-    { legend: 'Low', color: 'yellow' },
-    { legend: 'Medium', color: 'orange' },
-    { legend: 'High', color: 'red' },
-    { legend: 'Critical', color: 'blue' },
-  ];
-
-  constructor() {
-    const sumArr = this.graphs.reduce((a: any[], b: any[]) => {
-      a.push(b[1].reduce((x: number, y: number) => x + y, 0));
-      return a;
-    }, []);
-    this.maxSum = Math.max(...sumArr);
-    console.log('MS1', this.maxSum);
-    this.maxSum = this.maxSum + (50 - (this.maxSum % 50));
-    console.log('MS2', this.maxSum);
-  }
-
-  //  [      [4.54,3.03,45.45,1.51,45.45]  [4.54,3.03,45.45,1.51,45.45]   [4.54,3.03,45.45,1.51,45.45]   [4.54,3.03,45.45,1.51,45.45]   [4.54,3.03,45.45,1.51,45.45]]
-
-  // (9/198)*100
-  ngOnInit(): void {}
-}

package/src/lib/ui-kit/chart/chart.module.ts

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { BarComponent } from './bar/bar.component';
-import { SegmenterPipe } from './pipes/segmenter.pipe';
-import { XCalculatorPipe } from './pipes/x-calculator.pipe';
-
-@NgModule({
-  declarations: [BarComponent, SegmenterPipe, XCalculatorPipe],
-  imports: [CommonModule],
-  exports: [BarComponent],
-})
-export class ChartModule {}

package/src/lib/ui-kit/chart/pipes/segmenter.pipe.ts

@@ -1,28 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'segmenter',
-})
-export class SegmenterPipe implements PipeTransform {
-  // [['North America', [130, 4, 40, 9, 39], ['red', 'green', 'yellow', 'black']],
-  // ['North America', [10, 49, 40, 94, 369], ['red', 'green', 'yellow', 'black']],
-  // ['North America', [130, 42, 450, 90, 9], ['red', 'green', 'yellow', 'black']]]
-  transform(value: any[], ...args: unknown[]): any {
-    console.log('from the pipe', value);
-    const res: any[] = [];
-    for (let i = 0; i < value.length; i++) {
-      const barr = value[i][1];
-      const sum = barr.reduce((a: number, b: number) => a + b, 0);
-      res.push([]);
-      for (let j = 0; j < barr.length; j++) {
-        res[i][j] = (barr[j] / sum) * 100;
-      }
-    }
-    return res;
-    // value.forEach((element, index) => {
-
-    // });
-    // return    [      [4.54, 3.03, 45.45, 1.51, 45.45] , [4.54, 3.03, 45.45, 1.51, 45.45] ,  [4.54, 3.03, 45.45, 1.51, 45.45] ,  [4.54, 3.03, 45.45, 1.51, 45.45] ,  [4.54, 3.03, 45.45, 1.51, 45.45]];
-    // return null;
-  }
-}

package/src/lib/ui-kit/chart/pipes/x-calculator.pipe.ts

@@ -1,22 +0,0 @@
-import { getUrlScheme } from '@angular/compiler';
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'xCalculator',
-})
-export class XCalculatorPipe implements PipeTransform {
-  transform(value: any[], ...args: any[]): unknown {
-    const element = value;
-    const index = args[0];
-    let sum = 0;
-    if (index !== 0 && index < element.length) {
-      console.log(element.length);
-      let i = 0;
-      do {
-        sum += element[i];
-        i++;
-      } while (i < index);
-    }
-    return sum;
-  }
-}

package/src/lib/ui-kit/circle-progresss/circle/circle.component.html

@@ -1,37 +0,0 @@
-<svg viewBox="0 0 36 36" class="circular-chart">
-  <path class="circle-bg" attr.stroke="{{ fillColor }}" stroke-dasharray="100, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
-  <path
-    class="circle circle-{{ value }}"
-    stroke-dasharray="100, 100"
-    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
-    attr.stroke="{{ progressColor }}"
-  />
-  <text
-    *ngIf="isValueVisible === true && isPercentVisible === true"
-    x="50%"
-    y="52%"
-    font-family="Poppins"
-    font-size="9"
-    font-weight="500"
-    class="text"
-    dominant-baseline="middle"
-    text-anchor="middle"
-    attr.fill="{{ progressColor }}"
-  >
-    {{ value | number:'1.0-2' }}%
-  </text>
-  <text
-    *ngIf="isValueVisible === true && isPercentVisible !== true"
-    x="50%"
-    y="52%"
-    font-family="Poppins"
-    font-size="9"
-    font-weight="500"
-    class="text"
-    dominant-baseline="middle"
-    text-anchor="middle"
-    attr.fill="{{ progressColor }}"
-  >
-    {{ value }}
-  </text>
-</svg>