Additions and fixes and server link fix

src/app/components/add-data.component.html

@@ -209,7 +209,7 @@
               <div class="col-md-9">
                 <div class="input-group">
                   <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
-                  <input type="number" min="0.00" step="0.01" class="form-control" formControlName="grosswage" placeholder="0.00">
+                  <input type="number" min="0.00" step="0.01" class="form-control" formControlName="employeegrosswage" placeholder="0.00">
                 </div>
                 <span class="help-block">This is a help text</span>
               </div>

src/app/dashboard/dashboard.component.html

@@ -2,41 +2,65 @@
   <div class="card">
     <div class="card-footer">
       <ul>
-        <li class="hidden-sm-down">
+        <li *ngIf="showSnippet.customersthismonth" class="hidden-sm-down">
           <div class="text-muted">Customers This Month</div>
           <strong>{{customersThisMonth}}</strong>
         </li>
-        <li>
+        <li *ngIf="showSnippet.moneyspentthismonth" class="hidden-sm-down">
           <div class="text-muted">Money Spent This Month</div>
           <strong>{{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}}</strong>
         </li>
-        <li class="hidden-sm-down">
+        <li *ngIf="showSnippet.pointstotal" class="hidden-sm-down">
           <div class="text-muted">Points Total</div>
           <strong>{{pointsTotal}}</strong>
         </li>
-        <li class="hidden-sm-down">
+        <li *ngIf="showSnippet.averagetransactiontoday" class="hidden-sm-down">
           <div class="text-muted">Average Transaction Today</div>
           <strong>{{averageTransactionToday | currency:'GBP':true:'1.2-2'}}</strong>
         </li>
+        <li *ngIf="showSnippet.percentownlocalsupplier" class="hidden-sm-down">
+          <div class="text-muted">Local Suppliers</div>
+          <strong>{{percentOfLocalSuppliers}}%</strong>
+          <div class="progress progress-xs mt-2">
+              <div class="progress-bar bg-info" role="progressbar" [style.width]="percentOfLocalSuppliers + '%'" attr.aria-valuenow="{{percentOfLocalSuppliers}}" aria-valuemin="0" aria-valuemax="100"></div>
+          </div>
+        </li>
+        <li *ngIf="showSnippet.percentsinglecompetitorlocalsupplier" class="hidden-sm-down">
+          <div class="text-muted">Competitor Local Suppliers</div>
+          <strong>{{percentOfSingleCompetitorLocalSuppliers}}%</strong>
+          <div class="progress progress-xs mt-2">
+              <div class="progress-bar bg-info" role="progressbar" [style.width]="percentOfSingleCompetitorLocalSuppliers + '%'" attr.aria-valuenow="{{percentOfSingleCompetitorLocalSuppliers}}" aria-valuemin="0" aria-valuemax="100"></div>
+          </div>
+        </li>
       </ul>
     </div>
   </div>
   <div class="row">
-    <div *ngIf="showGraph.percentofcustomerssectorgraph" class="col-sm-6 col-lg-3">
+    <div *ngIf="showGraph.noofcustomerssector" class="col-sm-6 col-lg-3">
       <div class="card card-inverse card-primary">
         <div class="card-block">
-          <div class="h1 text-muted text-right mb-4">
+          <div class="h4 mb-0">{{noOfCustomersSector}}</div>
-            <i class="icon-pie-chart"></i>
+          <div>No. of Customers in your Sector</div>
-          </div>
-          <div class="h4 mb-0">{{percentOfCustomersSector}}%</div>
-          <small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
           <div class="progress progress-white progress-xs mt-3">
             <div class="progress-bar" role="progressbar" [style.width]="percentOfCustomersSector + '%'" attr.aria-valuenow="{{percentOfCustomersSector}}" aria-valuemin="0" aria-valuemax="100"></div>
           </div>
+          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
         </div>
       </div>
     </div><!--/.col-->
-    <div *ngIf="showGraph.customersthisweekgraph" class="col-sm-6 col-lg-3">
+    <div *ngIf="showGraph.percentofcustomerssector" class="col-sm-6 col-lg-3">
+      <div class="card card-inverse card-primary">
+        <div class="card-block">
+          <div class="h4 mb-0">{{percentOfCustomersSector}}%</div>
+          <div>Customers in your Sector</div>
+          <div class="progress progress-white progress-xs mt-3">
+            <div class="progress-bar" role="progressbar" [style.width]="percentOfCustomersSector + '%'" attr.aria-valuenow="{{percentOfCustomersSector}}" aria-valuemin="0" aria-valuemax="100"></div>
+          </div>
+          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
+        </div>
+      </div>
+    </div><!--/.col-->
+    <div *ngIf="showGraph.customersthisweek" class="col-sm-6 col-lg-3">
       <div class="card card-inverse card-primary">
         <div class="card-block pb-0">
           <div class="btn-group float-right" dropdown>
@@ -65,7 +89,7 @@
         </div>
       </div>
     </div><!--/.col-->
-    <div *ngIf="showGraph.customerslastweekgraph" class="col-sm-6 col-lg-3">
+    <div *ngIf="showGraph.customerslastweek" class="col-sm-6 col-lg-3">
       <div class="card card-inverse card-info">
         <div class="card-block pb-0">
           <button type="button" class="btn btn-transparent p-0 float-right">
@@ -87,7 +111,7 @@
         </div>
       </div>
     </div><!--/.col-->
-    <div *ngIf="showGraph.customerslastmonthgraph" class="col-sm-6 col-lg-3">
+    <div *ngIf="showGraph.customerslastmonth" class="col-sm-6 col-lg-3">
       <div class="card card-inverse card-info">
         <div class="card-block pb-0">
           <button type="button" class="btn btn-transparent p-0 float-right">
@@ -109,7 +133,7 @@
         </div>
       </div>
     </div><!--/.col-->
-    <div *ngIf="showGraph.customerslastyeargraph" class="col-sm-6 col-lg-3">
+    <div *ngIf="showGraph.customerslastyear" class="col-sm-6 col-lg-3">
       <div class="card card-inverse card-info">
         <div class="card-block pb-0">
           <button type="button" class="btn btn-transparent p-0 float-right">
@@ -131,7 +155,73 @@
         </div>
       </div>
     </div><!--/.col-->
-    <div *ngIf="showGraph.pointsthisweekgraph" class="col-sm-6 col-lg-3">
+    <div *ngIf="showGraph.returningcustomerslastweek" class="col-sm-6 col-lg-3">
+      <div class="card card-inverse card-info">
+        <div class="card-block pb-0">
+          <button type="button" class="btn btn-transparent p-0 float-right">
+            <i class="icon-location-pin"></i>
+          </button>
+          <h4 class="mb-0">9.823</h4>
+          <p>Returning Customers last week</p>
+        </div>
+        <div class="chart-wrapper px-3" style="height:70px;">
+          <canvas baseChart class="chart"
+          [datasets]="lineChart6Data"
+          [labels]="lineChart6Labels"
+          [options]="lineChart6Options"
+          [colors]="lineChart6Colours"
+          [legend]="lineChart6Legend"
+          [chartType]="lineChart6Type"
+          (chartHover)="chartHovered($event)"
+          (chartClick)="chartClicked($event)"></canvas>
+        </div>
+      </div>
+    </div><!--/.col-->
+    <div *ngIf="showGraph.returningcustomerslastmonth" class="col-sm-6 col-lg-3">
+      <div class="card card-inverse card-info">
+        <div class="card-block pb-0">
+          <button type="button" class="btn btn-transparent p-0 float-right">
+            <i class="icon-location-pin"></i>
+          </button>
+          <h4 class="mb-0">9.823</h4>
+          <p>Returning Customers last month</p>
+        </div>
+        <div class="chart-wrapper px-3" style="height:70px;">
+          <canvas baseChart class="chart"
+          [datasets]="lineChart7Data"
+          [labels]="lineChart7Labels"
+          [options]="lineChart7Options"
+          [colors]="lineChart7Colours"
+          [legend]="lineChart7Legend"
+          [chartType]="lineChart7Type"
+          (chartHover)="chartHovered($event)"
+          (chartClick)="chartClicked($event)"></canvas>
+        </div>
+      </div>
+    </div><!--/.col-->
+    <div *ngIf="showGraph.returningcustomerslastyear" class="col-sm-6 col-lg-3">
+      <div class="card card-inverse card-info">
+        <div class="card-block pb-0">
+          <button type="button" class="btn btn-transparent p-0 float-right">
+            <i class="icon-location-pin"></i>
+          </button>
+          <h4 class="mb-0">9.823</h4>
+          <p>Returning Customers last year</p>
+        </div>
+        <div class="chart-wrapper px-3" style="height:70px;">
+          <canvas baseChart class="chart"
+          [datasets]="lineChart8Data"
+          [labels]="lineChart8Labels"
+          [options]="lineChart8Options"
+          [colors]="lineChart8Colours"
+          [legend]="lineChart8Legend"
+          [chartType]="lineChart8Type"
+          (chartHover)="chartHovered($event)"
+          (chartClick)="chartClicked($event)"></canvas>
+        </div>
+      </div>
+    </div><!--/.col-->
+    <div *ngIf="showGraph.pointsthisweek" class="col-sm-6 col-lg-3">
       <div class="card card-inverse card-warning">
         <div class="card-block pb-0">
           <div class="btn-group float-right">
@@ -160,7 +250,7 @@
         </div>
       </div>
     </div><!--/.col-->
-    <div *ngIf="showGraph.pointslastweekgraph" class="col-sm-6 col-lg-3">
+    <div *ngIf="showGraph.pointslastweek" class="col-sm-6 col-lg-3">
       <div class="card card-inverse card-danger">
         <div class="card-block pb-0">
           <div class="btn-group float-right" dropdown>
@@ -189,6 +279,35 @@
         </div>
       </div>
     </div><!--/.col-->
+    <div *ngIf="showGraph.percentlocalsuppliersvscompetitor" class="col-sm-6 col-lg-3">
+      <div class="card card-inverse card-primary">
+        <div class="card-block">
+          <div>Your suppliers that are local vs a local competitor</div>
+          <ul class="horizontal-bars type-3">
+            <li>
+              <i class="icon-pie-chart"></i>
+              <span class="title">Yours</span>
+              <span class="value">{{percentOfLocalSuppliers}}%</span>
+              <div class="bars">
+                <div class="progress progress-xs">
+                  <div class="progress-bar bg-warning" role="progressbar" [style.width]="percentOfLocalSuppliers + '%'" attr.aria-valuenow="{{percentOfLocalSuppliers}}" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <i class="icon-pie-chart"></i>
+              <span class="title">A competitor</span>
+              <span class="value">{{percentOfSingleCompetitorLocalSuppliers}}%</span>
+              <div class="bars">
+                <div class="progress progress-xs">
+                  <div class="progress-bar bg-warning" role="progressbar" [style.width]="percentOfSingleCompetitorLocalSuppliers + '%'" attr.aria-valuenow="{{percentOfSingleCompetitorLocalSuppliers}}" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div><!--/.col-->
   </div><!--/.row-->
   <div class="card">
     <div class="card-block">

src/app/dashboard/dashboard.component.ts

@@ -7,19 +7,23 @@ import { Router } from '@angular/router';
   templateUrl: 'dashboard.component.html'
 })
 export class DashboardComponent implements OnInit {
+  shuffledArray: any;
+  showGraph: any;
+  showSnippet: any;
+  customersThisMonth: any;
+  moneySpentThisMonth: any;
+  pointsTotal: any;
+  averageTransactionToday: any;
   customersThisWeek: any;
   customersLastWeek: any;
   customersLastMonth: any;
   customersLastYear: any;
   pointsThisWeek: any;
   pointsLastWeek: any;
-  customersThisMonth: any;
-  moneySpentThisMonth: any;
-  pointsTotal: any;
-  averageTransactionToday: any;
-  shuffledArray: any;
-  showGraph: any;
   percentOfCustomersSector: any;
+  noOfCustomersSector: any;
+  percentOfLocalSuppliers: any;
+  percentOfSingleCompetitorLocalSuppliers: any;
 
   constructor(
   private http: Http,
@@ -30,34 +34,51 @@ export class DashboardComponent implements OnInit {
     .subscribe(
       result => { 
         console.log(result);
-        // Return what graphs to show
+        // Return what data to show 4 of
-        this.showGraph = result.graphstoshow;
+        this.showGraph = result.elementstoshow.graphs;
+        this.showSnippet = result.elementstoshow.snippets;
         // Percentage Chart
-        this.percentOfCustomersSector = result.percentofcustomerssector;
+        this.percentOfLocalSuppliers = result.data.localsuppliers.percentownlocal;
+        this.percentOfSingleCompetitorLocalSuppliers = result.data.localsuppliers.percentsinglecompetitorlocal;
+        // Percentage Chart 2
+        this.percentOfCustomersSector = result.data.customersinsector.percent;
+        this.noOfCustomersSector = result.data.customersinsector.customerno;
         // Chart 1
-        this.customersThisWeek = result.customersthisweek;
+        this.customersThisWeek = result.data.customersthisweek;
         this.lineChart1Data[0].data = this.customersThisWeek.customerno;
         this.lineChart1Labels = this.customersThisWeek.day;
         // Chart 2
-        this.customersLastWeek = result.customerslastweek;
+        this.customersLastWeek = result.data.customerslastweek;
         this.lineChart2Data[0].data = this.customersLastWeek.customerno;
         this.lineChart2Labels = this.customersLastWeek.day;
         // Chart 3
-        this.customersLastMonth = result.customerslastmonth;
+        this.customersLastMonth = result.data.customerslastmonth;
         this.lineChart3Data[0].data = this.customersLastMonth.customerno;
         this.lineChart3Labels = this.customersLastMonth.day;
         // Chart 4
-        this.customersLastYear = result.customerslastyear;
+        this.customersLastYear = result.data.customerslastyear;
         this.lineChart4Data[0].data = this.customersLastYear.customerno;
-        this.lineChart4Labels = this.customersLastYear.day;
+        this.lineChart4Labels = this.customersLastYear.month;
         // Chart 5
-        this.pointsThisWeek = result.pointsthisweek;
+        this.pointsThisWeek = result.data.pointsthisweek;
         this.lineChart5Data[0].data = this.pointsThisWeek.points;
         this.lineChart5Labels = this.pointsThisWeek.day;
         // Chart 6
-        this.pointsLastWeek = result.pointslastweek;
+        this.pointsLastWeek = result.data.pointslastweek;
         this.barChart1Data[0].data = this.pointsLastWeek.points;
         this.barChart1Labels = this.pointsLastWeek.day;
+        // Chart 7
+        this.customersLastWeek = result.data.customerslastweek;
+        this.lineChart6Data[0].data = this.customersLastWeek.returningcustomerno;
+        this.lineChart6Labels = this.customersLastWeek.day;
+        // Chart 8
+        this.customersLastMonth = result.data.customerslastmonth;
+        this.lineChart7Data[0].data = this.customersLastMonth.returningcustomerno;
+        this.lineChart7Labels = this.customersLastMonth.day;
+        // Chart 9
+        this.customersLastYear = result.data.customerslastyear;
+        this.lineChart8Data[0].data = this.customersLastYear.returningcustomerno;
+        this.lineChart8Labels = this.customersLastYear.month;
       }
     ),
   this.api.breadcrumb_data(undefined)
@@ -329,6 +350,153 @@ export class DashboardComponent implements OnInit {
   public lineChart4Legend = false;
   public lineChart4Type = 'line';
   
+  // lineChart6
+  public lineChart6Data: Array<any> = [
+    {
+      data: [],
+      label: 'Series B'
+    }
+  ];
+  public lineChart6Labels: Array<any> = [];
+  public lineChart6Options: any = {
+    maintainAspectRatio: false,
+    scales: {
+      xAxes: [{
+        gridLines: {
+          color: 'transparent',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          fontSize: 2,
+          fontColor: 'transparent',
+        }
+
+      }],
+      yAxes: [{
+        display: false,
+        ticks: {
+          display: false,
+        }
+      }],
+    },
+    elements: {
+      line: {
+        tension: 0.00001,
+        borderWidth: 1
+      },
+      point: {
+        radius: 4,
+        hitRadius: 10,
+        hoverRadius: 4,
+      },
+    },
+    legend: {
+      display: false
+    }
+  };
+  public lineChart6Colours: Array<any> = [
+    { // grey
+      backgroundColor: this.brandInfo,
+      borderColor: 'rgba(255,255,255,.55)'
+    }
+  ];
+  public lineChart6Legend = false;
+  public lineChart6Type = 'line';
+  
+  // lineChart7
+  public lineChart7Data: Array<any> = [
+    {
+      data: [],
+      label: 'Series B'
+    }
+  ];
+  public lineChart7Labels: Array<any> = [];
+  public lineChart7Options: any = {
+    maintainAspectRatio: false,
+    scales: {
+      xAxes: [{
+        display: false
+      }],
+      yAxes: [{
+        display: false
+      }]
+    },
+    elements: {
+      line: {
+        borderWidth: 2
+      },
+      point: {
+        radius: 2,
+        hitRadius: 10,
+        hoverRadius: 4,
+      },
+    },
+    legend: {
+      display: false
+    }
+  };
+  public lineChart7Colours: Array<any> = [
+    { // grey
+      backgroundColor: this.brandInfo,
+      borderColor: 'rgba(255,255,255,.55)'
+    }
+  ];
+  public lineChart7Legend = false;
+  public lineChart7Type = 'line';
+  
+  // lineChart8
+  public lineChart8Data: Array<any> = [
+    {
+      data: [],
+      label: 'Series B'
+    }
+  ];
+  public lineChart8Labels: Array<any> = [];
+  public lineChart8Options: any = {
+    maintainAspectRatio: false,
+    scales: {
+      xAxes: [{
+        gridLines: {
+          color: 'transparent',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          fontSize: 2,
+          fontColor: 'transparent',
+        }
+
+      }],
+      yAxes: [{
+        display: false,
+        ticks: {
+          display: false,
+        }
+      }],
+    },
+    elements: {
+      line: {
+        tension: 0.00001,
+        borderWidth: 1
+      },
+      point: {
+        radius: 4,
+        hitRadius: 10,
+        hoverRadius: 4,
+      },
+    },
+    legend: {
+      display: false
+    }
+  };
+  public lineChart8Colours: Array<any> = [
+    { // grey
+      backgroundColor: this.brandInfo,
+      borderColor: 'rgba(255,255,255,.55)'
+    }
+  ];
+  public lineChart8Legend = false;
+  public lineChart8Type = 'line';
+  
   // lineChart5
   public lineChart5Data: Array<any> = [
     {

src/app/providers/api-service.ts

@@ -7,7 +7,7 @@ import 'rxjs/add/operator/map';
  
 @Injectable()
 export class ApiService {
-  private apiUrl = 'https://dev.app.peartrade.org/api';
+  private apiUrl = 'https://dev.peartrade.org/api';
   private sessionKey: string = null;
   constructor(
     private http: Http,
@@ -102,52 +102,101 @@ export class ApiService {
   public graph_data(data) {
     return Observable.of(
     {
-    // graphstoshow is on server and changes every hour, listing what graphs to display
+      // graphstoshow is on server and changes every hour, listing what snippets & graphs to display
-    "graphstoshow" :
+      "elementstoshow" :
-      {
-        customersthisweekgraph : true,
-        customerslastweekgraph : true,
-        customerslastmonthgraph : true,
-        customerslastyeargraph : true,
-        percentofcustomerssectorgraph : true,
-        pointsthisweekgraph : true,
-        pointslastweekgraph : true,
-      },
-    "customersthisweek" :
-      {
-        day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
-        customerno : [1,2,3,4,5,6,7],
-      },
-    "customerslastweek" :
-      {
-        day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
-        customerno : [7,6,5,4,3,2,1],
-      },
-      // can take differing size arrays, so any month works. Example here is for April
-      "customerslastmonth" :
-      {
-        day : ['April 1','April 2','April 3','April 4','April 5','April 6','April 7','April 8',
-        'April 9','April 10','April 11','April 12','April 13','April 14','April 15','April 16',
-        'April 17','April 18','April 19','April 20','April 21','April 22','April 23','April 24',
-        'April 25','April 26','April 27','April 28','April 29','April 30'],
-        customerno : [7,6,5,4,3,2,1,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
-      },
-      "customerslastyear" :
-      {
-        day : ['January','February','March','April','May','June','July','August','September','October','November','December'],
-        customerno : [7,6,5,4,3,2,1,8,9,10,11,12],
-      },
-      percentofcustomerssector : 76,
-      "pointsthisweek" :
         {
-          day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
+        "graphs" :
-          points : [1,2,3,4,5,6,7],
+          {
+            customersthisweek : true,
+            customerslastweek : true,
+            customerslastmonth : true,
+            customerslastyear : true,
+            returningcustomerslastweek : true,
+            returningcustomerslastmonth : true,
+            returningcustomerslastyear : true,
+            noofcustomerssector : true,
+            percentofcustomerssector : true,
+            pointsthisweek : true,
+            percentlocalsuppliersvscompetitor : true,
+          },
+        "snippets" :
+        {
+          customersthismonth: false,
+          moneyspentthismonth: true,
+          pointstotal: true,
+          averagetransactiontoday: false,
+          percentownlocalsupplier : true,
+          percentsinglecompetitorlocalsupplier : true,
         },
-      "pointslastweek" :
+      },
+      "data" :
+        "graphs" :
+          {
+          "customersthisweek" :
+            {
+              day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
+              customerno : [1,2,3,4,5,6,7],
+              returningcustomerno : [1,1,2,3,4,5,4],
+              totalcustomerno: 
+            },
+          "customerslastweek" :
+            {
+              day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
+              customerno : [7,6,5,4,3,2,1],
+              returningcustomerno : [3,4,5,4,3,2,1],
+            },
+          // can take differing size arrays, so any month works. Example here is for April
+          "customerslastmonth" :
+            {
+              day : ['April 1','April 2','April 3','April 4','April 5','April 6','April 7','April 8',
+              'April 9','April 10','April 11','April 12','April 13','April 14','April 15','April 16',
+              'April 17','April 18','April 19','April 20','April 21','April 22','April 23','April 24',
+              'April 25','April 26','April 27','April 28','April 29','April 30'],
+              customerno : [7,6,5,4,3,2,1,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
+              returningcustomerno : [4,5,4,3,2,1,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
+            },
+          "customerslastyear" :
+            {
+              month : ['January','February','March','April','May','June','July','August','September','October','November','December'],
+              customerno : [7,6,5,4,3,2,1,8,9,10,11,12],
+              returningcustomerno : [3,2,4,2,1,1,1,6,4,8,5,12],
+            },
+          // If the number is potential or actual customers in their sector has yet to be determined
+          "customersinsector" : 
+            {
+            percent : 76,
+            customerno : 34000,
+            },
+          "pointsthisweek" :
+            {
+              day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
+              points : [1,2,3,4,5,6,7],
+            },
+          "pointslastweek" :
+            {
+              day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
+              points : [1,2,3,4,5,6,7],
+            },
+          "localsuppliers" :
+            {
+              percentownlocal : 50,
+              percentsinglecompetitorlocal : 65,
+            },
+          },
+        "snippets" :
         {
-          day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
+          "customersinsector" : 
-          points : [1,2,3,4,5,6,7],
+            {
-        }
+            percent : 76,
+            customerno : 34000,
+            },
+          "localsuppliers" :
+            {
+              percentownlocal : 50,
+              percentsinglecompetitorlocal : 65,
+            },
+          
+        },
     }  
     )
   }

src/scss/_custom.scss

@@ -1 +1,90 @@
 // Here you can add other styles
+
+// white title font variant on type-2 as defined in _widgets.css
+.horizontal-bars {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  li {
+    position: relative;
+    height: 40px;
+    line-height: 40px;
+    vertical-align: middle;
+
+    .title {
+      width: 100px;
+      font-size: 12px;
+      font-weight: 600;
+      color: $text-muted;
+      vertical-align: middle;
+    }
+
+    .bars {
+      position: absolute;
+      top: 15px;
+      width: 100%;
+      padding-left: 100px;
+
+      .progress:first-child {
+        margin-bottom: 2px;
+      }
+    }
+
+    &.legend {
+      text-align: center;
+
+      .badge {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        padding: 0;
+      }
+    }
+
+    &.divider {
+      height: 40px;
+
+      i {
+        margin: 0 !important;
+      }
+    }
+  }
+
+  &.type-3 {
+
+    li {
+      overflow: hidden;
+
+      i {
+        display: inline-block;
+        margin-right: $spacer;
+        margin-left: 5px;
+        font-size: 18px;
+        line-height: 40px;
+      }
+
+      .title {
+        display: inline-block;
+        width: auto;
+        margin-top: -9px;
+        font-size: $font-size-base;
+        font-weight: normal;
+        line-height: 40px;
+        color: $white;
+      }
+
+      .value {
+        float: right;
+        font-weight: 600;
+      }
+
+      .bars {
+        position: absolute;
+        top: auto;
+        bottom: 0;
+        padding: 0;
+      }
+    }
+  }
+}