gerrit.onap Code Review - portal/sdk.git/blob

   1 /*
   2  * ============LICENSE_START==========================================
   3  * ONAP Portal SDK
   4  * ===================================================================
   5  * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
   6  * ===================================================================
   7  *
   8  * Unless otherwise specified, all software contained herein is licensed
   9  * under the Apache License, Version 2.0 (the "License");
  10  * you may not use this software except in compliance with the License.
  11  * You may obtain a copy of the License at
  12  *
  13  *             http://www.apache.org/licenses/LICENSE-2.0
  14  *
  15  * Unless required by applicable law or agreed to in writing, software
  16  * distributed under the License is distributed on an "AS IS" BASIS,
  17  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18  * See the License for the specific language governing permissions and
  19  * limitations under the License.
  20  *
  21  * Unless otherwise specified, all documentation contained herein is licensed
  22  * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
  23  * you may not use this documentation except in compliance with the License.
  24  * You may obtain a copy of the License at
  25  *
  26  *             https://creativecommons.org/licenses/by/4.0/
  27  *
  28  * Unless required by applicable law or agreed to in writing, documentation
  29  * distributed under the License is distributed on an "AS IS" BASIS,
  30  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  31  * See the License for the specific language governing permissions and
  32  * limitations under the License.
  33  *
  34  * ============LICENSE_END============================================
  35  *
  36  *
  37  */
  38
  39 import { Component, OnInit } from '@angular/core';
  40 import {Chart} from 'chart.js';
  41
  42 @Component({
  43   selector: 'app-bar-chart',
  44   templateUrl: './bar-chart.component.html',
  45   styleUrls: ['./bar-chart.component.scss']
  46 })
  47 export class BarChartComponent implements OnInit {
  48   fixesEnhancementBarChart = [];
  49     constructor() { }
  50
  51     ngOnInit() {
  52       this.getLineChart();
  53     }
  54
  55     getLineChart(){
  56         this.fixesEnhancementBarChart = new Chart('fixes-enhancements',{
  57           type:'bar',
  58           data:{
  59             labels:['Q1-2015','Q2-2015','Q3-2015','Q4-2015'],
  60             datasets:[
  61               {label:'SAMPLE 7',
  62                 data:[88.87,98.97,37.26,71.70],
  63                 backgroundColor:'#1f77b4',
  64                 borderColor:'#1f77b4',
  65                 fill:false
  66               },
  67               {label:'SAMPLE 6',
  68               data:[11.13,15.17,19.21,75.76],
  69                 backgroundColor:'#ff7f0e',
  70                 borderColor:'#ff7f0e',
  71                 fill:false
  72               },
  73               {label:'SAMPLE 5',
  74               data:[100.00,100.00,100.00,100.00,99.99],
  75                 backgroundColor:'#3a6657',
  76                 borderColor:'#3a6657',
  77                 fill:false
  78               },
  79               {label:'SAMPLE 4',
  80               data:[11.88,12.44,44.76,76.67],
  81                 backgroundColor:'#ff2e0e',
  82                 borderColor:'#ff2e0e',
  83                 fill:false
  84               },
  85               {label:'SAMPLE 3',
  86               data:[80.69,82.42,72.36,72.90],
  87                 backgroundColor:'#ff0eef',
  88                 borderColor:'#ff0eef',
  89                 fill:false
  90               },
  91               {label:'SAMPLE 2',
  92               data:[11.74,22.31,33.15,44.16],
  93                 backgroundColor:'#ff0e5a',
  94                 borderColor:'#ff0e5a',
  95                 fill:false
  96               },
  97               {label:'SAMPLE 1',
  98               data:[95.78,97.61,97.86,98.53],
  99                 backgroundColor:'#0edbff',
 100                 borderColor:'#0edbff',
 101                 fill:false
 102               },
 103             ]
 104           }
 105         }
 106
 107         )
 108     }
 109 }