Skip to content

Commit

Permalink
server compare multibar chart DRY 1
Browse files Browse the repository at this point in the history
  • Loading branch information
@Palabola
Palabola committed Oct 4, 2024
1 parent d872081 commit ecb0827
Show file tree
Hide file tree
Showing 5 changed files with 258 additions and 36 deletions.
106 changes: 105 additions & 1 deletion src/app/pages/server-compare/server-compare.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ <h2 class="text-xl font-semibold">{{category.name}}</h2>
</ng-container>
</tr>
</ng-container>

<!--
<ng-container *ngFor="let category of benchmarkCategories">
<ng-container *ngIf="category.data.length">
<tr class="section_header" id="benchmark_line">
Expand Down Expand Up @@ -506,6 +506,110 @@ <h3 class="text-xl font-semibold flex gap-2 items-center">{{category.name}}
</ng-container>
</ng-container>
</ng-container>
-->
<ng-container *ngFor="let chartItem of multiBarCharts">
<ng-container *ngIf="chartItem.chart.chartData">
<tr class="section_header" id="benchmark_line">
<td [colSpan]="2" >
<h3 class="text-xl font-semibold flex gap-2 items-center">FOOBAR {{chartItem.chart.name}}
<lucide-icon
*ngIf="chartItem.chart.options[chartItem.chart.selectedOption].icon"
name="{{chartItem.chart.options[chartItem.chart.selectedOption].icon}}"
class="h-4 w-4 text-gray-200"
(mouseenter)="showTooltip($event, chartItem.chart.options[chartItem.chart.selectedOption].tooltip)"
(mouseleave)="hideTooltip()">
</lucide-icon>
<lucide-icon
name="info"
class="h-4 w-4 text-gray-200"
(mouseenter)="showTooltipChart($event, chartItem.chart.options[chartItem.chart.selectedOption].benchmark_id)"
(mouseleave)="hideTooltip()">
</lucide-icon>
</h3>
</td>
<td [colSpan]="servers.length -1">

</td>
</tr>
<tr>
<td [colSpan]="servers.length + 1" >
<div>
<div class="block_full_inline" *ngIf="chartItem.chart.chartData">
<div class="flex justify-end items-center">
<button
id="bw_mem_button"
class="dropdown_button"
type="button">
<div class="px-4 py-3">
{{selectedBWMemOperation.name}}
</div>
<div class="px-4 py-3 w-12 h-full bg-primary justify-center items-center flex rounded-r-lg">
<lucide-icon name="chevron-down" class="h-6 w-6 text-emerald-400"></lucide-icon>
</div>
</button>
</div>
<div *ngIf="isBrowser()">
<div chartType="bar">
<canvas
style="height: 350px; max-height: 350px; max-width:100%"
baseChart
[data]="chartItem.chart.chartData"
[options]="chartItem.chart.chartOptions"
[type]="chartItem.chart.chartType"
>
</canvas>
</div>
</div>
</div>
</div>
<div class="mt-4 mb-8 flex justify-center"
[ngClass]="{
'mb-8': !chartItem.show_more
}">
<button class="btn-primary py-2 px-3" (click)="toggleBenchmarkCategory(chartItem)">
{{chartItem.show_more ? 'Hide' : 'Show'}} Details
</button>
</div>
</td>
</tr>
<ng-container *ngIf="chartItem.show_more">
<ng-container *ngFor="let item of chartItem.data">
<tr *ngIf="chartItem.data.length > 1">
<td [colSpan]="servers.length + 1" >
<div class="ml-4 flex justify-between">
<div class="flex gap-2 items-center">
{{item.name}}
<lucide-icon
*ngIf="item.description"
name="info"
class="h-4 w-4 text-gray-200"
(mouseenter)="showTooltip($event, item.description)"
(mouseleave)="hideTooltip()">
</lucide-icon>
</div>
<lucide-icon
*ngIf="item.description"
[name]="benchmarkIcon(item)"
class="h-6 w-6 text-emerald-400 cursor-pointer"
(click)="toggleBenchmark(item)"
>
</lucide-icon>
</div>
</td>
</tr>
<ng-container *ngIf="!item.collapsed" >
<tr *ngFor="let config of item.configs">
<td>
<div class="ml-6" [innerHTML]="serializeConfig(config.config)" ></div></td>
<td *ngFor="let value of config.values" [style]="isBestStyle(value, config.values, item)">
{{numberWithCommas(value)}}
</td>
</tr>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</ng-container>

<ng-container *ngIf="getBenchmarksForCategory(null)?.length">
<tr class="section_header">
Expand Down
109 changes: 96 additions & 13 deletions src/app/pages/server-compare/server-compare.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { ServerCompareService } from '../../services/server-compare.service';
import { DropdownManagerService } from '../../services/dropdown-manager.service';
import { AnalyticsService } from '../../services/analytics.service';
import { CurrencyOption, availableCurrencies } from '../../tools/shared_data';
import { ChartFromBenchmarkTemplate, ChartFromBenchmarkTemplateOptions, redisChartTemplate, redisChartTemplateCallbacks, staticWebChartCompareTemplate, staticWebChartTemplate, staticWebChartTemplateCallbacks } from '../server-details/chartFromBenchmarks';

Chart.register(annotationPlugin);

Expand Down Expand Up @@ -165,6 +166,23 @@ export class ServerCompareComponent implements OnInit, AfterViewInit {

selectedRedisOption: any = this.redisOptions[0];

multiBarCharts: any[] = [
{
chart: JSON.parse(JSON.stringify(redisChartTemplate)),
callbacks: redisChartTemplateCallbacks,
dropdown: undefined,
data: [],
show_more: false,
},
{
chart: JSON.parse(JSON.stringify(staticWebChartCompareTemplate)),
callbacks: staticWebChartTemplateCallbacks,
dropdown: undefined,
data: [],
show_more: false,
}
];

compressDropdown: any;
availableCompressMethods: any[] = [];
selectedCompressMethod: any;
Expand Down Expand Up @@ -401,20 +419,38 @@ export class ServerCompareComponent implements OnInit, AfterViewInit {
category.data = this.benchmarkMeta.filter((b: any) => category.benchmarks.includes(b.benchmark_id));
});

this.multiBarCharts.forEach((chartTemplate) => {
const benchmarks = chartTemplate.chart.options.map((o: any) => o.benchmark_id);
chartTemplate.data = this.benchmarkMeta.filter((b: any) => benchmarks.includes(b.benchmark_id));
});

if(isPlatformBrowser(this.platformId)) {

this.initializeBenchmarkCharts();

this.getCompressChartOptions();

this.generateChartsData();
this.generateBWMemChart();
this.generateSSLChart();
this.generateCompressChart();
this.generateStatiWebChart(this.selectedStaticWebOption, this.selectedConnections);
this.generateStatiWebChart(this.selectedRedisOption, this.selectedOperation);
//this.generateMultiBarChart(this.selectedStaticWebOption, this.selectedConnections);
//this.generateMultiBarChart(this.selectedRedisOption, this.selectedOperation);

this.multiBarCharts.forEach((chart) => {
this.generateMultiBarChart(chart.chart);
});

this.dropdownManager.initDropdown('currency_button', 'currency_options').then((dropdown) => {
this.dropdownCurrency = dropdown;
});

this.multiBarCharts.forEach((chart) => {
this.dropdownManager.initDropdown(chart.chart.id + '_button', chart.chart.id + '_options').then((dropdown) => {
chart.dropdown = dropdown;
});
});

}
}).catch((err) => {
this.analytics.SentryException(err, {tags: { location: this.constructor.name, function: 'compareInit' }});
Expand Down Expand Up @@ -915,14 +951,23 @@ export class ServerCompareComponent implements OnInit, AfterViewInit {
}
}

generateStatiWebChart(chartConf: any, chartConf2: any) {
generateMultiBarChart(chartTemplate: ChartFromBenchmarkTemplate) {

const benchmark_id = chartConf.benchmark;
const labelsField = chartConf.scaleField;
const scaleField = chartConf.labelsField;
const option: ChartFromBenchmarkTemplateOptions = chartTemplate.options[chartTemplate.selectedOption];
const benchmark_id = option.benchmark_id;
const labelsField = option.labelsField;
const scaleField = option.scaleField;

const labelValue = chartConf2.value;
const selectedName = chartConf2.name;
if(!chartTemplate.secondaryOptions || chartTemplate.selectedSecondaryOption === undefined) {
return;
}

const optionsSecondary = chartTemplate.secondaryOptions[chartTemplate.selectedSecondaryOption];

console.log(optionsSecondary, labelsField);

const labelValue = optionsSecondary.value;
const selectedName = optionsSecondary.name;

const dataSet = this.benchmarkMeta?.find((x: any) => x.benchmark_id === benchmark_id);

Expand Down Expand Up @@ -966,7 +1011,7 @@ export class ServerCompareComponent implements OnInit, AfterViewInit {
chartData.datasets[i].data.push({
data:item.score,
label: size,
unit: chartConf.YLabel,
unit: option.YLabel,
note: item.note
});
} else {
Expand All @@ -975,6 +1020,19 @@ export class ServerCompareComponent implements OnInit, AfterViewInit {
});
});

console.log(chartData);

if(chartData) {
chartTemplate.chartData = { labels: chartData.labels, datasets: chartData.datasets };
chartTemplate.chartOptions.scales.y.title.text = option.YLabel;
chartTemplate.chartOptions.scales.x.title.text = option.XLabel;
chartTemplate.chartOptions.plugins.title.text = option.title;
} else {
chartTemplate.chartData = undefined;
}


/*
if(benchmark_id.includes('static_web')) {
this.barChartDataStaticWeb = { labels: chartData.labels, datasets: chartData.datasets };
Expand Down Expand Up @@ -1007,6 +1065,7 @@ export class ServerCompareComponent implements OnInit, AfterViewInit {
});
}
}
*/
}
}

Expand Down Expand Up @@ -1140,6 +1199,30 @@ export class ServerCompareComponent implements OnInit, AfterViewInit {
}
}

initializeBenchmarkCharts() {

this.multiBarCharts.forEach((chartItem: any) => {
chartItem.chart.chartOptions.plugins.tooltip.callbacks = chartItem.callbacks;
this.initializeMultiBarChart(chartItem.chart);
});
}

initializeMultiBarChart(chartTemplate: ChartFromBenchmarkTemplate) {
chartTemplate.options.forEach((option: ChartFromBenchmarkTemplateOptions) => {
const benchmark = this.benchmarkMeta.find((b: any) => b.benchmark_id === option.benchmark_id);
if(benchmark) {
option.name = benchmark.name;
option.unit = benchmark.unit;
option.higher_is_better = benchmark.higher_is_better;
option.icon = benchmark.higher_is_better ? 'circle-arrow-up' : 'circle-arrow-down';
option.tooltip = benchmark.higher_is_better ? 'Higher is better' : 'Lower is better';
option.title = ' '
option.XLabel = benchmark.config_fields ? ((benchmark.config_fields as any)[option.scaleField] as string) : '';
option.YLabel = benchmark.unit;
}
});
}

isBrowser() {
return isPlatformBrowser(this.platformId);
}
Expand Down Expand Up @@ -1195,25 +1278,25 @@ export class ServerCompareComponent implements OnInit, AfterViewInit {

selectStaticWebOption(item: any) {
this.selectedStaticWebOption = item;
this.generateStatiWebChart(this.selectedStaticWebOption, this.selectedConnections);
//this.generateMultiBarChart(this.selectedStaticWebOption, this.selectedConnections);
this.dropdownStaticWeb?.hide();
}

selectStaticWebConnOption(item: any) {
this.selectedConnections = item;
this.generateStatiWebChart(this.selectedStaticWebOption, this.selectedConnections);
//this.generateMultiBarChart(this.selectedStaticWebOption, this.selectedConnections);
this.dropdownConnections?.hide();
}

selectRedisOption(item: any) {
this.selectedRedisOption = item;
this.generateStatiWebChart(this.selectedRedisOption, this.selectedOperation);
//this.generateMultiBarChart(this.selectedRedisOption, this.selectedOperation);
this.dropdownRedis?.hide();
}

selectRedisOpOption(item: any) {
this.selectedOperation = item;
this.generateStatiWebChart(this.selectedRedisOption, this.selectedOperation);
//this.generateMultiBarChart(this.selectedRedisOption, this.selectedOperation);
this.dropdownOperation?.hide();
}

Expand Down
Loading

0 comments on commit ecb0827

Please sign in to comment.