Added progress chart

Author: AniruddhaSadhukhan

README.md

@@ -218,3 +218,10 @@ For Example:
 | Line Chart         | `line-chart`         | [Line Chart Docs](docs/line-chart.md)                 |
 | Bar Chart          | `bar-chart`          | [Bar Chart Docs](docs/bar-chart.md)                   |
 | Doughnut/Pie Chart | `doughnut-pie-chart` | [Doughnut/Pie Chart Docs](docs/doughnut-pie-chart.md) |
+| Progress Chart     | `progress-chart`     | [Progress Chart Docs](docs/progress-chart.md)         |
+
+---
+
+### Example Screenshot
+
+![](docs/assets/example.png)

demo/index.js

@@ -692,7 +692,7 @@ widgetContainer.jsonInput = {
                 display: true,
                 backgroundColor: {
                   arguments: "context",
-                  body: "console.log(context.chart.config.options.backgroundColor);return context.chart.config.options.backgroundColor;",
+                  body: "return context.chart.config.options.backgroundColor;",
                 },
                 borderColor: "darkbrown",
                 borderRadius: 25,
@@ -923,6 +923,46 @@ widgetContainer.jsonInput = {
         },
       ],
     },
+    {
+      classes: ["justify-content-center"],
+      widgets: [
+        {
+          widget: "progress-chart",
+          classes: ["col-12"],
+          clickable: true,
+          datasets: [
+            {
+              title: "Category A",
+              classes: ["col-md-6"],
+              max: 50,
+              value: 30,
+              customId: 1,
+            },
+            {
+              title: "Category B",
+              classes: ["col-md-6"],
+              max: 50,
+              value: 40,
+              customId: 1,
+            },
+            {
+              title: "Category C",
+              classes: ["col-md-6"],
+              max: 50,
+              value: 10,
+              customId: 1,
+            },
+            {
+              title: "Category D",
+              classes: ["col-md-6"],
+              max: 50,
+              value: 50,
+              customId: 1,
+            },
+          ],
+        },
+      ],
+    },
   ],
 };
 

docs/assets/example.png

@@ -0,0 +1,68 @@
+## Bar Chart Widget
+
+![](assets/progressChart1.png)
+
+
+| Option Name              | Description                                                                                                                                                                                       | Structure | Default                              |
+| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------------------- |
+| datasets                 | This will be an array of objects.                                                                                                                                                                 | Object[]  | []                                   |
+| datasets[index].title    | Progress chart title                                                                                                                                                                              | String    | null                                 |
+| datasets[index].classes  | Progress chart bootstrap grid classes.<br />Eg.`col-md-6` will allocate half of total widget width for this progress chart for medium size screen and above                                       | String[]  | []                                   |
+| datasets[index].max      | Max value for progress bar                                                                                                                                                                        | Number    | 100                                  |
+| datasets[index].value    | The achieved value for progress bar                                                                                                                                                               | Number    | 0                                    |
+| datasets[index].progress | The progress percentage for progress bar.<br />Note: If progress is provided, max and value will not be used to calculate progress percentage. Skip this value if providing max and value.        | Number    | Calculated based on`max` and `value` |
+| color                    | Color of progress bar.                                                                                                                                                                            | String    | `#488aff`                            |
+| disablePercentage        | If True, will not show percentage symbol in the progress bar                                                                                                                                      | Bool      | False                                |
+| clickable                | If True, the progress bar and title will be clickable. An output event will be emitted when clicked.<br />Event Structure:<br />*{"action":"clicked","widget":"progress-chart","data":`dataset`}* | Bool      | False                                |
+
+### Examples:
+
+#### Example 1
+
+##### JSON Input:
+
+```js
+        {
+          widget: "progress-chart",
+          classes: ["col-12"],
+          clickable: true,
+          datasets: [
+            {
+              title: "Category A",
+              classes: ["col-md-6"],
+              max: 50,
+              value: 30,
+              customId: 1,
+            },
+            {
+              title: "Category B",
+              classes: ["col-md-6"],
+              max: 50,
+              value: 40,
+              customId: 1,
+            },
+            {
+              title: "Category C",
+              classes: ["col-md-6"],
+              max: 50,
+              value: 10,
+              customId: 1,
+            },
+            {
+              title: "Category D",
+              classes: ["col-md-6"],
+              max: 50,
+              value: 50,
+              customId: 1,
+            },
+          ],
+        }
+```
+
+##### Widget Output
+
+![](assets/progressChart1.png)
+
+---
+
+[Go Back to Main Page](../README.md)

docs/assets/progressChart1.png

@@ -14,6 +14,7 @@ import { AppComponent } from './app.component';
 import { BarChartComponent } from './bar-chart/bar-chart.component';
 import { DoughnutChartComponent } from './doughnut-chart/doughnut-chart.component';
 import { LineChartComponent } from './line-chart/line-chart.component';
+import { ProgressChartComponent } from './progress-chart/progress-chart.component';
 import { SmallStatComponent } from './small-stat/small-stat.component';
 import { StatGraphCardComponent } from './stat-graph-card/stat-graph-card.component';
 import { WidgetsContainerComponent } from './widgets-container/widgets-container.component';
@@ -22,6 +23,7 @@ const WidgetComponentMap = {
   'small-stat': SmallStatComponent,
   'line-chart': LineChartComponent,
   'bar-chart': BarChartComponent,
+  'progress-chart': ProgressChartComponent,
   'doughnut-pie-chart': DoughnutChartComponent,
   'stat-graph-card': StatGraphCardComponent,
 };
@@ -42,6 +44,7 @@ const MaterialModules = [
     LineChartComponent,
     BarChartComponent,
     DoughnutChartComponent,
+    ProgressChartComponent,
   ],
   imports: [
     BrowserModule,

docs/progress-chart.md

@@ -0,0 +1,28 @@
+<div class="row progress-container" *ngIf="!loading">
+  <div *ngFor="let item of chartData.datasets" [ngClass]="item.classes">
+    <div class="d-flex justify-content-between">
+      <span
+        class="mat-h4 fw-bold mb-0"
+        [ngClass]="{ clickable: chartData.clickable }"
+        (click)="itemClicked(item)"
+      >
+        {{ item.title }}
+      </span>
+      <span class="value mat-small" *ngIf="item.value">
+        {{ item.value }} <span *ngIf="item.max">/{{ item.max }}</span>
+      </span>
+    </div>
+    <div
+      class="progress-outer"
+      [ngClass]="{ clickable: chartData.clickable }"
+      (click)="itemClicked(item)"
+    >
+      <div [style.width]="whichWidth(item.progress)">
+        <div class="progress-inner" [style.background-color]="color">
+          {{ item.progress
+          }}<ng-container *ngIf="!disablePercentage">% </ng-container>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/app.module.ts

@@ -0,0 +1,41 @@
+.progress-outer {
+  width: 96%;
+  margin: 10px 2%;
+  padding: 3px;
+  background-color: #f4f4f4;
+  border: 1px solid #dcdcdc;
+  color: #fff;
+  border-radius: 20px;
+  text-align: center;
+}
+
+.progress-inner {
+  min-height: 18px;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 0px;
+  border-radius: 20px;
+  animation: progress 2s;
+}
+
+.value{
+    color: rgba(0,0,0,0.54);
+    margin-bottom: -7px;
+}
+
+@keyframes progress {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+
+.progress-container > div {
+    padding: 10px;
+}
+
+.clickable{
+    cursor: pointer;
+}

src/app/progress-chart/progress-chart.component.html

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProgressChartComponent } from './progress-chart.component';
+
+describe('ProgressChartComponent', () => {
+  let component: ProgressChartComponent;
+  let fixture: ComponentFixture<ProgressChartComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProgressChartComponent]
+    });
+    fixture = TestBed.createComponent(ProgressChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/progress-chart/progress-chart.component.scss

@@ -0,0 +1,55 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { isArray } from 'lodash-es';
+
+@Component({
+  selector: 'app-progress-chart',
+  templateUrl: './progress-chart.component.html',
+  styleUrls: ['./progress-chart.component.scss'],
+})
+export class ProgressChartComponent implements OnInit {
+  @Input() chartData = {
+    datasets: [],
+    color: '',
+    disablePercentage: false,
+    clickable: false,
+  };
+  @Output() widgetOutput: EventEmitter<any> = new EventEmitter();
+
+  loading = true;
+  color: string;
+  disablePercentage: boolean;
+
+  ngOnInit(): void {
+    if (!isArray(this.chartData?.datasets)) {
+      this.chartData.datasets = [this.chartData.datasets];
+    }
+
+    this.chartData.datasets.forEach((data) => {
+      if (data.hasOwnProperty('progress')) {
+        data.progress = +data.progress;
+      } else {
+        let val = +data.value || 0;
+        let max = +data.max || 100;
+        data.progress = Math.round((val / max) * 10000) / 100;
+      }
+    });
+
+    this.color = this.chartData.color || '#488aff';
+    this.disablePercentage = this.chartData.disablePercentage || false;
+    this.loading = false;
+  }
+
+  whichWidth(progress) {
+    return progress > 0 ? Math.max(progress, 15) + '%' : 0;
+  }
+
+  itemClicked = (item) => {
+    if (this.chartData.clickable) {
+      this.widgetOutput.emit({
+        action: 'clicked',
+        data: item,
+        widget: 'progress-chart',
+      });
+    }
+  };
+}