Skip to content

Commit

Permalink
Switch to a new chart library (#19262)
Browse files Browse the repository at this point in the history 
Signed-off-by: AllForNothing <sshijun@vmware.com>
  • Loading branch information
@AllForNothing
AllForNothing committed Sep 1, 2023
1 parent aa5d9eb commit e2d0889
Show file tree
Hide file tree
Showing 6 changed files with 151 additions and 88 deletions.
34 changes: 28 additions & 6 deletions src/portal/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/portal/package.json
View file
Expand Up @@ -43,7 +43,7 @@
"@ngx-translate/core": "15.0.0",
"@ngx-translate/http-loader": "8.0.0",
"cron-validator": "^1.3.1",
"highcharts": "^11.1.0",
"echarts": "^5.4.3",
"js-yaml": "^4.1.0",
"ngx-clipboard": "^15.1.0",
"ngx-cookie": "^6.0.1",
Expand Down
80 changes: 45 additions & 35 deletions ...side-nav/interrogation-services/vulnerability-database/single-bar/single-bar.component.ts
View file
Expand Up @@ -8,7 +8,7 @@ import {
ViewChild,
} from '@angular/core';
import { DangerousArtifact } from '../../../../../../../ng-swagger-gen/models/dangerous-artifact';
import * as Highcharts from 'highcharts';
import * as echarts from 'echarts/core';

@Component({
selector: 'app-single-bar',
Expand All @@ -30,61 +30,71 @@ export class SingleBarComponent implements OnChanges {
}

initChart() {
(Highcharts as any).chart(this.container.nativeElement, {
credits: {
enabled: false,
},
chart: {
backgroundColor: 'transparent',
type: 'bar',
},
const chart = echarts.init(this.container.nativeElement);
chart.setOption({
color: ['red', '#e64524', 'orange'],
title: {
text: '',
},
tooltip: {
pointFormat: '{series.data.name}{point.y}',
style: {
fontSize: 12,
formatter: '{b}: {c}',
textStyle: {
fontSize: '12px',
whiteSpace: 'nowrap',
},
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
dataLabels: {
enabled: true,
distance: -8,
style: {
fontSize: '8px',
fontWeight: 1,
},
pointFormat: '{point.y}',
},
size: 50,
borderWidth: 0,
borderRadius: 2,
},
legend: {
show: false,
},
series: [
{
type: 'pie',
radius: '65%',
name: 'Severity',
// adjust the start angle
startAngle: 180,
itemStyle: {
borderRadius: 2,
borderWidth: 1,
},
labelLine: {
show: false,
},
label: {
show: true,
position: 'inside',
formatter: '{c}',
fontSize: '9px',
},
data: [
{
name: 'Critical',
y: this.dangerousArtifact?.critical_cnt || 0,
color: 'red',
value: this.dangerousArtifact?.critical_cnt || 0,
},
{
name: 'High',
y: this.dangerousArtifact?.high_cnt || 0,
color: '#e64524',
value: this.dangerousArtifact?.high_cnt || 0,
},
{
name: 'Medium',
y: this.dangerousArtifact?.medium_cnt || 0,
color: 'orange',
value: this.dangerousArtifact?.medium_cnt || 0,
},
{
// make a record to fill the bottom 50%
value:
this.dangerousArtifact?.critical_cnt +
this.dangerousArtifact?.high_cnt +
this.dangerousArtifact?.medium_cnt || 0,
itemStyle: {
// stop the chart from rendering this piece
color: 'none',
decal: {
symbol: 'none',
},
},
label: {
show: false,
},
},
],
},
Expand Down
2 changes: 1 addition & 1 deletion ...ervices/vulnerability-database/vulnerability-summary/vulnerability-summary.component.html
View file
Expand Up @@ -96,7 +96,7 @@ <h2>
</div>
<div class="clr-row" [hidden]="!securitySummary?.total_vuls">
<div class="placeholder">
<div class="pie-chart" id="pie-chart"></div>
<div #pieChart class="pie-chart" id="pie-chart"></div>
</div>
</div>
</div>
Expand Down
93 changes: 49 additions & 44 deletions ...-services/vulnerability-database/vulnerability-summary/vulnerability-summary.component.ts
View file
@@ -1,15 +1,16 @@
import {
Component,
ElementRef,
EventEmitter,
HostListener,
OnDestroy,
OnInit,
Output,
ViewChild,
} from '@angular/core';
import { SecurityhubService } from '../../../../../../../ng-swagger-gen/services/securityhub.service';
import { SecuritySummary } from '../../../../../../../ng-swagger-gen/models/security-summary';
import { MessageHandlerService } from '../../../../../shared/services/message-handler.service';
import * as Highcharts from 'highcharts';
import highchartsAccessibility from 'highcharts/modules/accessibility';
import { getDigestLink, severityText, VUL_ID } from '../security-hub.interface';
import { HAS_STYLE_MODE, StyleMode } from '../../../../../services/theme';
import { Subscription } from 'rxjs';
Expand All @@ -19,7 +20,7 @@ import {
} from '../../../../../services/event-service/event.service';
import { TranslateService } from '@ngx-translate/core';
import { DangerousArtifact } from '../../../../../../../ng-swagger-gen/models/dangerous-artifact';
highchartsAccessibility(Highcharts);
import * as echarts from 'echarts/core';

@Component({
selector: 'app-vulnerability-summary',
Expand All @@ -36,6 +37,9 @@ export class VulnerabilitySummaryComponent implements OnInit, OnDestroy {
readonly severityText = severityText;
readonly getDigestLink = getDigestLink;
harborEventSub: Subscription;
chart: any;
@ViewChild('pieChart', { static: true })
pieChartEle: ElementRef;
constructor(
private securityHubService: SecurityhubService,
private messageHandler: MessageHandlerService,
Expand All @@ -44,6 +48,7 @@ export class VulnerabilitySummaryComponent implements OnInit, OnDestroy {
) {}

ngOnInit() {
this.chart = echarts.init(this.pieChartEle.nativeElement);
this.getSummary();
if (!this.harborEventSub) {
this.harborEventSub = this.event.subscribe(
Expand Down Expand Up @@ -91,79 +96,74 @@ export class VulnerabilitySummaryComponent implements OnInit, OnDestroy {
'UNKNOWN',
];
this.translate.get([severity, c, h, m, l, n, u]).subscribe(res => {
Highcharts.chart('pie-chart', {
credits: {
enabled: false,
},
chart: {
backgroundColor: 'transparent',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
},
this.chart.setOption({
color: ['red', '#e64524', 'orange', '#007CBB', 'grey', 'green'],
title: {
text: '',
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>',
},
plotOptions: {
pie: {
dataLabels: {
enabled: false,
},
showInLegend: true,
borderWidth: 0,
},
formatter: '<b>{b}: {d}%</b>',
},
legend: {
align: 'left',
floating: true,
symbolRadius: 2,
itemStyle: {
fontSize: '12px',
fontWeight: '100',
left: 5,
bottom: 5,
formatter: '{a|{name}}',
textStyle: {
color: this.getColorByTheme(),
width: 50,
backgroundColor: 'transparent',
rich: {
a: {
fontWeight: '100',
fontSize: '12px',
verticalAlign: 'bottom',
height: 12,
lineHeight: 15,
},
},
},
width: '60%',
itemWidth: 12,
itemHeight: 12,
width: '50%',
},
series: [
{
innerSize: '60%',
itemStyle: {
borderRadius: 3,
borderWidth: 1,
},
label: {
show: false,
},
radius: ['50%', '80%'],
name: res[severity],
type: 'pie',
center: ['80%', '50%'],
center: ['68%', '50%'],
data: [
{
name: res[c],
y: summary?.critical_cnt || 0,
color: 'red',
value: summary?.critical_cnt || 0,
},
{
name: res[h],
y: summary?.high_cnt || 0,
color: '#e64524',
value: summary?.high_cnt || 0,
},
{
name: res[m],
y: summary?.medium_cnt || 0,
color: 'orange',
value: summary?.medium_cnt || 0,
},
{
name: res[l],
y: summary?.low_cnt || 0,
color: '#007CBB',
value: summary?.low_cnt || 0,
},
{
name: res[u],
y: summary?.unknown_cnt || 0,
color: 'grey',
value: summary?.unknown_cnt || 0,
},
{
name: res[n],
y: summary?.none_cnt || 0,
color: 'green',
value: summary?.none_cnt || 0,
},
],
},
Expand All @@ -185,4 +185,9 @@ export class VulnerabilitySummaryComponent implements OnInit, OnDestroy {
? '#000'
: '#fff';
}

@HostListener('window:resize', ['$event'])
onResize(event: any) {
this.chart.resize();
}
}

0 comments on commit e2d0889

Please sign in to comment.