vc-create-dashboard 3.0.5 → 3.0.61

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

@@ -0,0 +1,157 @@
+::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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,19 @@
+<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

@@ -0,0 +1,97 @@
+.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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,19 @@
+<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

@@ -0,0 +1,97 @@
+.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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,28 @@
+<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

@@ -0,0 +1,13 @@
+.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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,37 @@
+<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 }}%
+  </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>