Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
mgr/dashboard_v2: improve health page charts tooltips
Extracted the charts into a new component and it is now using a new tooltip. Signed-off-by: Tiago Melo <tmelo@suse.com>
- Loading branch information
Tiago Melo
committed
Mar 12, 2018
1 parent
7c1f7d3
commit ce4379b
Showing
8 changed files
with
206 additions
and
172 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 15 additions & 0 deletions
15
...ind/mgr/dashboard_v2/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<div class="chart-container"> | ||
<canvas baseChart | ||
#chartCanvas | ||
[datasets]="chart.dataset" | ||
[chartType]="chart.chartType" | ||
[options]="chart.options" | ||
[labels]="chart.labels" | ||
[colors]="chart.colors" | ||
width="120" | ||
height="120"></canvas> | ||
<div class="chartjs-tooltip" | ||
#chartTooltip> | ||
<table></table> | ||
</div> | ||
</div> |
1 change: 1 addition & 0 deletions
1
...ind/mgr/dashboard_v2/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
@import '../../../../styles/chart-tooltip.scss'; |
30 changes: 30 additions & 0 deletions
30
.../mgr/dashboard_v2/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
||
import { ChartsModule } from 'ng2-charts/ng2-charts'; | ||
|
||
import { SharedModule } from '../../../shared/shared.module'; | ||
import { HealthPieComponent } from './health-pie.component'; | ||
|
||
describe('HealthPieComponent', () => { | ||
let component: HealthPieComponent; | ||
let fixture: ComponentFixture<HealthPieComponent>; | ||
|
||
beforeEach( | ||
async(() => { | ||
TestBed.configureTestingModule({ | ||
imports: [ChartsModule, SharedModule], | ||
declarations: [HealthPieComponent] | ||
}).compileComponents(); | ||
}) | ||
); | ||
|
||
beforeEach(() => { | ||
fixture = TestBed.createComponent(HealthPieComponent); | ||
component = fixture.componentInstance; | ||
fixture.detectChanges(); | ||
}); | ||
|
||
it('should create', () => { | ||
expect(component).toBeTruthy(); | ||
}); | ||
}); |
117 changes: 117 additions & 0 deletions
117
...ybind/mgr/dashboard_v2/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,117 @@ | ||
import { | ||
Component, | ||
ElementRef, | ||
EventEmitter, | ||
Input, | ||
OnChanges, | ||
OnInit, | ||
Output, | ||
ViewChild | ||
} from '@angular/core'; | ||
|
||
import * as Chart from 'chart.js'; | ||
import * as _ from 'lodash'; | ||
|
||
import { ChartTooltip } from '../../../shared/models/chart-tooltip'; | ||
import { DimlessBinaryPipe } from '../../../shared/pipes/dimless-binary.pipe'; | ||
|
||
@Component({ | ||
selector: 'cd-health-pie', | ||
templateUrl: './health-pie.component.html', | ||
styleUrls: ['./health-pie.component.scss'] | ||
}) | ||
export class HealthPieComponent implements OnChanges, OnInit { | ||
@ViewChild('chartCanvas') chartCanvasRef: ElementRef; | ||
@ViewChild('chartTooltip') chartTooltipRef: ElementRef; | ||
|
||
@Input() data: any; | ||
@Input() tooltipFn: any; | ||
@Output() prepareFn = new EventEmitter(); | ||
|
||
chart: any = { | ||
chartType: 'doughnut', | ||
dataset: [ | ||
{ | ||
label: null, | ||
borderWidth: 0 | ||
} | ||
], | ||
options: { | ||
responsive: true, | ||
legend: { display: false }, | ||
animation: { duration: 0 }, | ||
|
||
tooltips: { | ||
enabled: false | ||
} | ||
}, | ||
colors: [ | ||
{ | ||
borderColor: 'transparent' | ||
} | ||
] | ||
}; | ||
|
||
constructor(private dimlessBinary: DimlessBinaryPipe) {} | ||
|
||
ngOnInit() { | ||
// An extension to Chart.js to enable rendering some | ||
// text in the middle of a doughnut | ||
Chart.pluginService.register({ | ||
beforeDraw: function(chart) { | ||
if (!chart.options.center_text) { | ||
return; | ||
} | ||
|
||
const width = chart.chart.width, | ||
height = chart.chart.height, | ||
ctx = chart.chart.ctx; | ||
|
||
ctx.restore(); | ||
const fontSize = (height / 114).toFixed(2); | ||
ctx.font = fontSize + 'em sans-serif'; | ||
ctx.textBaseline = 'middle'; | ||
|
||
const text = chart.options.center_text, | ||
textX = Math.round((width - ctx.measureText(text).width) / 2), | ||
textY = height / 2; | ||
|
||
ctx.fillText(text, textX, textY); | ||
ctx.save(); | ||
} | ||
}); | ||
|
||
const getStyleTop = (tooltip, positionY) => { | ||
return positionY + tooltip.caretY - tooltip.height - 10 + 'px'; | ||
}; | ||
|
||
const getStyleLeft = (tooltip, positionX) => { | ||
return positionX + tooltip.caretX + 'px'; | ||
}; | ||
|
||
const getBody = (body) => { | ||
const bodySplit = body[0].split(': '); | ||
bodySplit[1] = this.dimlessBinary.transform(bodySplit[1]); | ||
return bodySplit.join(': '); | ||
}; | ||
|
||
const chartTooltip = new ChartTooltip( | ||
this.chartCanvasRef, | ||
this.chartTooltipRef, | ||
getStyleLeft, | ||
getStyleTop, | ||
); | ||
chartTooltip.getBody = getBody; | ||
|
||
const self = this; | ||
this.chart.options.tooltips.custom = (tooltip) => { | ||
chartTooltip.customTooltips(tooltip); | ||
}; | ||
|
||
this.prepareFn.emit([this.chart, this.data]); | ||
} | ||
|
||
ngOnChanges() { | ||
this.prepareFn.emit([this.chart, this.data]); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
20 changes: 6 additions & 14 deletions
20
src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.