Skip to content

Commit

Permalink
dropped onResize dynamic chart resize
Browse files Browse the repository at this point in the history
  • Loading branch information
@Palabola
Palabola committed Nov 5, 2024
1 parent 4daf444 commit 6dafdda
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 83 deletions.
32 changes: 16 additions & 16 deletions src/app/components/server-charts/server-charts.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ <h3 class="text-2xl flex items-center gap-2" >Memory bandwidth
(mouseleave)="hideTooltip()">
</lucide-icon>
</h3>
<div *ngIf="isBrowser()">
<div chartType="bar">
<div class="h-full" *ngIf="isBrowser()">
<div class="chart_div" chartType="bar">
<canvas
id="bw_mem_canvas"
baseChart
Expand Down Expand Up @@ -59,8 +59,8 @@ <h3 class="text-2xl flex items-center gap-2" >
</button>
</div>
</div>
<div *ngIf="isBrowser()">
<div chartType="bar">
<div class="h-full" *ngIf="isBrowser()">
<div class="chart_div" chartType="bar">
<canvas
id="compress_canvas"
baseChart
Expand Down Expand Up @@ -93,8 +93,8 @@ <h3 class="text-2xl flex items-center gap-2" >
Score: {{geekScoreSingle}}
</div>
</div>
<div *ngIf="isBrowser()">
<div chartType="bar">
<div class="h-full" *ngIf="isBrowser()">
<div class="chart_div" chartType="bar">
<canvas
#chartPriceLowest
id="chartPriceLowest"
Expand Down Expand Up @@ -128,8 +128,8 @@ <h3 class="text-2xl flex items-center gap-2" >
Score: {{geekScoreMulti}}
</div>
</div>
<div *ngIf="isBrowser()">
<div chartType="bar">
<div class="h-full" *ngIf="isBrowser()">
<div class="chart_div" chartType="bar">
<canvas
baseChart
[data]="radarChartDataGeekMulti"
Expand Down Expand Up @@ -159,8 +159,8 @@ <h3 class="text-2xl flex items-center gap-2" >
</lucide-icon>
</h3>
</div>
<div *ngIf="isBrowser()">
<div chartType="bar">
<div class="h-full" *ngIf="isBrowser()">
<div class="chart_div" chartType="bar">
<canvas
id="ssl_canvas"
baseChart
Expand Down Expand Up @@ -204,8 +204,8 @@ <h3 class="text-2xl flex items-center gap-2" >
</div>
</button>
</div>
<div *ngIf="isBrowser()">
<div chartType="bar">
<div class="h-full" *ngIf="isBrowser()">
<div class="chart_div" chartType="bar">
<canvas
baseChart
id="{{chartItem.chart.id}}_canvas"
Expand Down Expand Up @@ -237,8 +237,8 @@ <h3 class="text-2xl flex items-center gap-2" >
</lucide-icon>
</h3>
</div>
<div *ngIf="isBrowser()">
<div chartType="bar">
<div class="h-full" *ngIf="isBrowser()">
<div class="chart_div" chartType="bar">
<canvas
id="stress_ng_div16_canvas"
baseChart
Expand Down Expand Up @@ -269,8 +269,8 @@ <h3 class="text-2xl flex items-center gap-2" >
</lucide-icon>
</h3>
</div>
<div *ngIf="isBrowser()">
<div chartType="bar">
<div class="h-full" *ngIf="isBrowser()">
<div class="chart_div" chartType="bar">
<canvas
id="stress_ng_relative_canvas"
baseChart
Expand Down
54 changes: 1 addition & 53 deletions src/app/components/server-charts/server-charts.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Chart.register(annotationPlugin);
templateUrl: './server-charts.component.html',
styleUrl: './server-charts.component.scss'
})
export class ServerChartsComponent implements OnChanges, OnInit {
export class ServerChartsComponent implements OnChanges {

@ViewChild('tooltipDefault') tooltip!: ElementRef;
@ViewChild('tooltipGeekbench') tooltipGB!: ElementRef;
Expand Down Expand Up @@ -94,58 +94,6 @@ export class ServerChartsComponent implements OnChanges, OnInit {
private sanitizer: DomSanitizer) {
}

ngOnInit() {
let options = [
{ id: 'bw_mem', option: this.lineChartOptionsBWMem},
{ id: 'compress', option: this.lineChartOptionsCompress},
{ id: 'ssl', option: this.barChartOptionsSSL},
{ id: 'stress_ng', option: this.lineChartOptionsStressNG},
{ id: 'stress_ng_percent', option: this.lineChartOptionsStressNGPercent},
];
if(this.isBrowser() && this.isEmbedded) {
options.forEach((option) => {
if(option.option) {
option.option.maintainAspectRatio = false;
option.option.onResize = (chart) => {
this.resizeCanvas(chart, option.id);
};
}
});
this.multiBarCharts.forEach((chart) => {
chart.chart.chartOptions.maintainAspectRatio = false;
chart.chart.chartOptions.onResize = (chartItem: any) => {
this.resizeCanvas(chartItem, chart.chart.id);
};
});
} else {
options.forEach((option) => {
if(option.option) {
option.option.maintainAspectRatio = true;
option.option.onResize = undefined;
}
});
}
}

resizeCanvas(chart: any, id: string) {
if(!this.isChartShown(id)) {
return;
}

const outerDiv = this.document.getElementById(`${id}_chart`);
let height = outerDiv?.clientHeight || 0;

height -= 102;

let chartElem = this.document.getElementById(`${id}_canvas`);
if(chartElem && height > 0 && (Math.abs(chartElem.offsetHeight - height) > chartElem.offsetHeight / 20)) {
chartElem.setAttribute('height', height.toString());
}
setTimeout(() => {
chart.update();
}, 500);
}

ngOnChanges() {
if(this.serverDetails && this.benchmarksByCategory && this.isBrowser()) {
this.initializeBenchmarkCharts();
Expand Down
19 changes: 9 additions & 10 deletions src/app/pages/embedded-server-chart/embedded-server-chart.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,8 @@
width: calc(100%);
max-height: calc(100vh - 64px);
height: calc(100vh - 64px);
canvas {
height: 100% !important;
width: 100% !important;
.chart_div {
height: 100%;
}
}

Expand All @@ -21,20 +20,20 @@
max-height: calc(100vh - 64px);
height: calc(100vh - 64px);
margin: auto;
.chart_div {
height: 100%;
display: flex;
justify-content: center;
}
}

:host ::ng-deep .block_full {
@apply px-6 py-6 bg-secondary flex flex-col gap-4 relative overflow-hidden;
width: calc(100%);
max-height: calc(100vh - 64px);
height: calc(100vh - 64px);
canvas {
height: 100% !important;
width: 100% !important;
.chart_div {
height: 100%;
}
}

:host ::ng-deep canvas {
max-width: 100% !important;
max-height: calc(100vh - 165px) !important;
}
7 changes: 7 additions & 0 deletions src/app/pages/server-details/chartOptions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { ChartConfiguration, ChartData, TooltipItem, TooltipModel } from "chart.js";

export const barChartOptions: ChartConfiguration<'bar'>['options'] = {

scales: {
x: {
ticks: {
Expand Down Expand Up @@ -34,6 +35,7 @@ export const barChartOptions: ChartConfiguration<'bar'>['options'] = {
};

export const barChartOptionsSSL: ChartConfiguration<'bar'>['options'] = {
maintainAspectRatio: false,
scales: {
...barChartOptions.scales,
y: {
Expand Down Expand Up @@ -115,6 +117,7 @@ export const barChartOptionsStaticWeb: ChartConfiguration<'bar'>['options'] = {
};

export const barChartOptionsTemplate: ChartConfiguration<'bar'>['options'] = {
maintainAspectRatio: false,
scales: {
...barChartOptions.scales,
y: {
Expand Down Expand Up @@ -426,6 +429,7 @@ export const radarDatasetColors = [
];

export const lineChartOptionsBWM: ChartConfiguration<'line'>['options'] = {
maintainAspectRatio: false,
scales: {
x: {
ticks: {
Expand Down Expand Up @@ -513,6 +517,7 @@ export const lineChartOptionsBWM: ChartConfiguration<'line'>['options'] = {
};

export const lineChartOptionsComp: ChartConfiguration<'line'>['options'] = {
maintainAspectRatio: false,
scales: {
x: {
ticks: {
Expand Down Expand Up @@ -717,6 +722,7 @@ export const lineChartOptionsCompareDecompress: ChartConfiguration<'line'>['opti
};

export const lineChartOptionsStressNG: ChartConfiguration<'line'>['options'] = {
maintainAspectRatio: false,
scales: {
x: {
ticks: {
Expand Down Expand Up @@ -762,6 +768,7 @@ export const lineChartOptionsStressNG: ChartConfiguration<'line'>['options'] = {
};

export const lineChartOptionsStressNGPercent: ChartConfiguration<'line'>['options'] = {
maintainAspectRatio: false,
scales: {
x: {
ticks: {
Expand Down
16 changes: 12 additions & 4 deletions src/app/pages/server-details/server-details.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@
width: calc(50% - 1.0rem);
min-height: 460px;
height: 460px;
canvas {
max-height: 350px;
.chart_div {
max-height: 350px !important;
height: 350px !important;
max-width:100% !important;
}
}

Expand All @@ -19,8 +21,12 @@
min-height: 615px;
height: 615px;
margin: auto;
canvas {
.chart_div {
max-height: 530px;
height: 530px !important;
max-width:100% !important;
display: flex;
justify-content: center;
}
}

Expand All @@ -29,8 +35,10 @@
width: calc(100%);
min-height: 460px;
height: 460px;
canvas {
.chart_div {
max-height: 350px;
height: 350px !important;
max-width:100% !important;
}
}

Expand Down

0 comments on commit 6dafdda

Please sign in to comment.