aril 1.1.71 → 1.1.73

package/ui/charts/src/highCharts/gauge/solid-gauge.component.ts

@@ -0,0 +1,199 @@
+import { Component, computed, effect, input } from '@angular/core';
+import * as Highcharts from 'highcharts';
+import { HighchartsChartModule } from 'highcharts-angular';
+import highchartsMore from 'highcharts/highcharts-more';
+import solidGauge from 'highcharts/modules/solid-gauge';
+import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
+
+highchartsMore(Highcharts);
+solidGauge(Highcharts);
+NoDataToDisplay(Highcharts);
+
+export interface SolidGaugeDataPoint {
+	value: number;
+	name: string;
+	title: string;
+	color?: string;
+}
+
+export interface SolidGaugeData {
+	data: SolidGaugeDataPoint[];
+	min: number;
+	max: number;
+	title: string;
+	unit: string;
+	colors?: string[];
+	stops?: number[];
+	size?: string;
+	startAngle?: number;
+	endAngle?: number;
+	innerRadius?: string;
+	outerRadius?: string;
+	backgroundColor?: string;
+	showTooltip?: boolean;
+	fontSize?: string;
+	unitFontSize?: string;
+}
+
+@Component({
+	selector: 'aril-solid-gauge',
+	standalone: true,
+	imports: [HighchartsChartModule],
+	template: `
+		<highcharts-chart
+			style="display: block"
+			[Highcharts]="Highcharts"
+			[oneToOne]="true"
+			[runOutsideAngular]="true"
+			[options]="chartOptions()"
+			[callbackFunction]="chartCallback">
+		</highcharts-chart>
+	`
+})
+export class SolidGaugeChartComponent {
+	Highcharts: typeof Highcharts = Highcharts;
+
+	data = input.required<SolidGaugeData>();
+	title = input.required<string>();
+	loading = input(false);
+
+	private chart?: Highcharts.Chart;
+
+	constructor() {
+		effect(() => {
+			const isLoading = this.loading();
+			if (this.chart) {
+				if (isLoading) {
+					this.chart.showLoading();
+				} else {
+					this.chart.hideLoading();
+				}
+			}
+		});
+	}
+
+	chartCallback: Highcharts.ChartCallbackFunction = (chart) => {
+		this.chart = chart;
+		if (this.loading()) {
+			this.chart.showLoading();
+		}
+	};
+
+	chartOptions = computed<Highcharts.Options>(() => {
+		const currentData = this.data();
+		if (!currentData || !currentData.data) {
+			return {
+				chart: { type: 'solidgauge', backgroundColor: 'transparent' },
+				title: { text: this.title(), style: { fontSize: '16px', textAlign: 'center', fontWeight: 'normal' } },
+				noData: {
+					style: {
+						fontWeight: 'bold',
+						fontSize: '16px',
+						color: '#303030'
+					},
+					position: {
+						align: 'center',
+						verticalAlign: 'middle'
+					},
+					useHTML: true
+				},
+				series: []
+			};
+		}
+
+		const min = typeof currentData.min === 'number' ? currentData.min : 0;
+		const max = typeof currentData.max === 'number' ? currentData.max : 100;
+		const value = Number(currentData.data[0]?.value) || 0;
+		const percent = max !== min ? ((value / (max - min)) * 100).toFixed(1) : '0';
+
+		return {
+			chart: { type: 'solidgauge', backgroundColor: 'transparent', height: 300 },
+			title: {
+				text: this.title(),
+				align: 'center',
+				style: { fontSize: '14px', fontWeight: 'normal', textAlign: 'left' }
+			},
+			pane: {
+				size: '100%',
+				startAngle: -120,
+				endAngle: 120,
+				background: [
+					{
+						outerRadius: '90%',
+						innerRadius: '70%',
+						backgroundColor: '#f5f5f5',
+						borderWidth: 0,
+						shape: 'arc'
+					}
+				]
+			},
+			yAxis: {
+				min,
+				max,
+				stops: [
+					[0, '#DF5353'], // kırmızı
+					[0.96, '#DDDF0D'], // sarı
+					[0.99, '#55BF3B'], // yeşil
+					[1, '#55BF3B'] // yeşil
+				],
+				lineWidth: 0,
+				tickPositions: [],
+				minorTickLength: 0,
+				labels: { enabled: false },
+				plotBands: []
+			},
+			plotOptions: {
+				solidgauge: {
+					borderWidth: 24,
+					dataLabels: {
+						enabled: true,
+						useHTML: true,
+						borderWidth: 0,
+						verticalAlign: 'middle',
+						style: {
+							fontSize: '2.5rem',
+							fontWeight: 'bold',
+							color: '#55BF3B',
+							textAlign: 'center',
+							lineHeight: '1'
+						},
+						formatter: function () {
+							const currentDataControl: any = currentData.data[0];
+							return currentDataControl[1] === Infinity ?
+									'∞'
+								:	`<span style="color:#55BF3B;font-size:2.5rem;font-weight:bold;">${Highcharts.numberFormat(Number(this.y) || 0, 1)}%</span>`;
+						}
+					}
+				}
+			},
+			noData: {
+				style: { fontWeight: 'bold', fontSize: '16px', color: '#303030' },
+				position: { align: 'center', verticalAlign: 'middle' },
+				useHTML: true
+			},
+			loading: {
+				hideDuration: 100,
+				showDuration: 100,
+				labelStyle: { color: 'gray', fontSize: '16px' },
+				style: { backgroundColor: 'rgba(255,255,255,0.7)' }
+			},
+			series: [
+				{
+					type: 'solidgauge',
+					data: [
+						{
+							y: parseFloat(percent),
+							color:
+								value < 70 ? '#55BF3B'
+								: value < 90 ? '#DDDF0D'
+								: '#DF5353'
+						}
+					],
+					dataLabels: {
+						enabled: true
+					}
+				}
+			]
+		};
+	});
+}

package/ui/charts/src/highCharts/heatmap/heatMap-chart.component.ts

@@ -0,0 +1,279 @@
+import { Component, effect, input } from '@angular/core';
+import * as Highcharts from 'highcharts';
+import { HighchartsChartModule } from 'highcharts-angular';
+import highchartsMore from 'highcharts/highcharts-more';
+import heatmap from 'highcharts/modules/heatmap';
+import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
+
+highchartsMore(Highcharts);
+heatmap(Highcharts);
+NoDataToDisplay(Highcharts);
+
+export interface HeatmapPoint {
+	x: number;
+	y: number;
+	value: number;
+}
+
+export interface HeatmapData {
+	data: HeatmapPoint[];
+	xCategories?: string[];
+	yCategories?: string[];
+	title?: string;
+	colorAxis?: Highcharts.ColorAxisOptions;
+}
+
+@Component({
+	selector: 'aril-heatmap-chart',
+	standalone: true,
+	imports: [HighchartsChartModule],
+	template: `
+		<highcharts-chart
+			style="width: 100%; height: 100%; display: block"
+			[Highcharts]="Highcharts"
+			[options]="chartOptions"
+			[callbackFunction]="chartCallback">
+		</highcharts-chart>
+	`
+})
+export class HeatmapChartComponent {
+	Highcharts: typeof Highcharts = Highcharts;
+
+	series = input.required<any>();
+	title = input<string>('Chart');
+	yAxisTitle = input<string>('');
+	loading = input(false);
+	chartOptions: Highcharts.Options = {};
+
+	xAxisCategories: any[] = [];
+	yAxisCategories: any[] = [];
+
+	private chart?: Highcharts.Chart;
+
+	constructor() {
+		effect(() => {
+			if (this.series()) {
+				this.setChartOptions();
+			}
+		});
+
+		effect(() => {
+			if (this.chart) {
+				const newSeries = this.prometheusToHighchartsSeries();
+				this.chart.update(
+					{
+						series: newSeries,
+
+						yAxis: { categories: this.yAxisCategories },
+						xAxis: { categories: this.xAxisCategories }
+					},
+					true,
+					true
+				);
+			}
+		});
+
+		effect(() => {
+			if (this.chart) {
+				if (this.loading()) {
+					this.chart.showLoading();
+				} else {
+					this.chart.hideLoading();
+				}
+			}
+		});
+
+		effect(() => {
+			if (this.chart) {
+				this.chart.update({
+					title: {
+						text: this.title()
+					},
+					yAxis: {
+						title: {
+							text: this.yAxisTitle()
+						}
+					}
+				});
+			}
+		});
+	}
+
+	setChartOptions() {
+		const series = this.prometheusToHighchartsSeries();
+		let minValue = Number.POSITIVE_INFINITY;
+		let maxValue = Number.NEGATIVE_INFINITY;
+		if (series && series.length && series[0].type === 'heatmap' && Array.isArray(series[0].data)) {
+			for (const d of series[0].data as number[][]) {
+				const value = d[2];
+				if (typeof value === 'number') {
+					if (value < minValue) minValue = value;
+					if (value > maxValue) maxValue = value;
+				}
+			}
+		}
+		if (!isFinite(minValue)) minValue = 0;
+		if (!isFinite(maxValue)) maxValue = 1;
+
+		console.log("minValue", minValue);
+		console.log("maxValue", maxValue);
+
+		this.chartOptions = {
+			chart: {
+				type: 'heatmap',
+				marginTop: 40,
+				marginBottom: 80,
+				plotBorderWidth: 0
+			},
+			title: {
+				text: this.title() || 'Heatmap'
+			},
+			colorAxis: {
+				stops: [
+					[0, '#73BF69'],
+					[0.3, '#fffbbc'],
+					[0.5, '#fffbbc'],
+					[0.7, '#c4463a'],
+					[0.9, '#c4463a'],
+					[1, '#c4463a']
+				],
+				min: minValue,
+				max: maxValue,
+				startOnTick: false,
+				endOnTick: false
+			},
+			tooltip: {
+				formatter: function () {
+					const dateStr = Highcharts.dateFormat('%Y-%m-%d %H:%M', this.point.x);
+					return '<b> Value </b>' + this.point.value?.toFixed(2) + '<br/><b> Time </b>' + dateStr;
+				},
+				enabled: true
+			},
+			legend: {
+				enabled: false
+			},
+			plotOptions: {
+				heatmap: {
+					pointPadding: 5
+				},
+				series: {
+					stickyTracking: false
+				}
+			},
+			noData: {
+				style: {
+					fontWeight: 'bold',
+					fontSize: '16px',
+					color: '#303030'
+				},
+				position: {
+					align: 'center',
+					verticalAlign: 'middle'
+				},
+				useHTML: true
+			},
+			xAxis: {
+				type: 'datetime',
+				categories: this.xAxisCategories,
+				labels: {
+					align: 'left',
+					x: 5,
+					y: 14,
+					format: '{value:%H:00}',
+					rotation: 0,
+					step: 2
+				},
+				showLastLabel: false,
+				tickInterval: 2 * 3600 * 1000,
+				minTickInterval: 3600 * 1000
+			},
+			yAxis: {
+				categories: this.yAxisCategories,
+				title: {
+					text: this.yAxisTitle()
+				}
+			},
+			series: series
+		};
+	}
+
+	chartCallback: Highcharts.ChartCallbackFunction = (chart) => {
+		this.chart = chart;
+	};
+
+	epochToTimeString(epoch: number): string {
+		const date = new Date(Number(epoch) * 1000);
+		const hours = date.getHours().toString().padStart(2, '0');
+		const minutes = date.getMinutes().toString().padStart(2, '0');
+		return `${hours}:${minutes}`;
+	}
+
+	prometheusToHighchartsSeries(): Highcharts.SeriesOptionsType[] {
+		const xCategorySet = new Set<string>();
+		const yCategorySet = new Set<string>();
+		const seriesData = this.series();
+
+		if (!seriesData) {
+			return [];
+		}
+
+		for (const key in seriesData) {
+			if (key === 'response') {
+				if (Object.prototype.hasOwnProperty.call(seriesData, key)) {
+					const dataSet = seriesData[key];
+					const result = dataSet?.result || dataSet?.data?.result;
+					if (result) {
+						for (const item of result) {
+							yCategorySet.add(item.metric?.le);
+							for (const itemValue of item.values) {
+								xCategorySet.add(this.epochToTimeString(itemValue[0]));
+							}
+						}
+					}
+				}
+			}
+		}
+
+		this.xAxisCategories = Array.from(xCategorySet);
+		this.yAxisCategories = Array.from(yCategorySet);
+
+		const data: number[][] = [];
+
+		for (const key in seriesData) {
+			if (key === 'response') {
+				if (Object.prototype.hasOwnProperty.call(seriesData, key)) {
+					const dataSet = seriesData[key];
+					const result = dataSet?.result || dataSet?.data?.result;
+					if (result) {
+						for (const item of result) {
+							const yValue = item.metric?.le;
+							const yIndex = this.yAxisCategories.indexOf(yValue);
+							for (const itemValue of item.values) {
+								const epoch = Number(itemValue[0]);
+								const date = new Date(epoch * 1000);
+								const utcTime = Date.UTC(
+									date.getUTCFullYear(),
+									date.getUTCMonth(),
+									date.getUTCDate(),
+									date.getUTCHours(),
+									date.getUTCMinutes()
+								);
+								const value = Number(itemValue[1]);
+								data.push([utcTime, yIndex, value]);
+							}
+						}
+					}
+				}
+			}
+		}
+
+		return [
+			{
+				type: 'heatmap',
+				data: data,
+				colsize: 8 * 60 * 1000,
+				borderWidth: 1
+			} as Highcharts.SeriesHeatmapOptions
+		];
+	}
+}

package/ui/charts/src/highCharts/line/line-chart-datetime-axis.component.ts

@@ -0,0 +1,185 @@
+import { Component, effect, input } from '@angular/core';
+import { HighchartsChartModule } from 'highcharts-angular';
+import * as Highcharts from 'highcharts';
+import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
+
+NoDataToDisplay(Highcharts);
+
+export enum MetricUnit {
+	Bytes = 'Bytes',
+	Percentage = '%',
+	OpsPerSec = 'Ops/sec',
+	Count = 'Count',
+	Seconds = 'Seconds',
+	Mib = 'Mib'
+}
+
+@Component({
+	standalone: true,
+	selector: 'aril-line-datetime-axis-chart',
+	template: `
+		<highcharts-chart
+			style="width: 100%; height: 100%; display: block"
+			[Highcharts]="Highcharts"
+			[options]="chartOptions"
+			[callbackFunction]="chartCallback">
+		</highcharts-chart>
+	`,
+	imports: [HighchartsChartModule]
+})
+export class LineDatetimeAxisChartComponent {
+	Highcharts: typeof Highcharts = Highcharts;
+
+	series = input.required<Highcharts.SeriesOptionsType[]>();
+	title = input<string>('Chart');
+	yAxisTitle = input<string>('');
+	loading = input(false);
+
+	chartOptions: Highcharts.Options;
+
+	unit = input<MetricUnit>();
+	private chart?: Highcharts.Chart;
+
+	constructor() {
+		Highcharts.setOptions({
+			lang: {
+				months: [
+					'Ocak',
+					'Şubat',
+					'Mart',
+					'Nisan',
+					'Mayıs',
+					'Haziran',
+					'Temmuz',
+					'Ağustos',
+					'Eylül',
+					'Ekim',
+					'Kasım',
+					'Aralık'
+				],
+				shortMonths: ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'],
+				weekdays: ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi']
+			}
+		});
+		this.chartOptions = {
+			chart: {
+				type: 'line',
+				zoomType: 'x'
+			} as Highcharts.ChartOptions,
+			title: { style: { fontSize: '16px', textAlign: 'center', fontWeight: 'normal' } },
+			xAxis: {
+				type: 'datetime',
+				dateTimeLabelFormats: {
+					day: '%e %b',
+					month: '%b %Y',
+					year: '%Y'
+				}
+			},
+			yAxis: {
+				title: {
+					text: this.yAxisTitle()
+				},
+				labels: {
+					formatter: function () {
+						const value = this.value as number ;
+						if (value === 0) return '0';
+						if (!value || value < 0) return '';
+
+						const i = Math.max(0, Math.floor(Math.log(value) / Math.log(1024)));
+						return parseFloat((value / Math.pow(1024, i)).toFixed(2)) + ' ';
+					}
+				}
+			},
+			series: [],
+			tooltip: {
+				xDateFormat: '%e %b %Y %H:%M:%S',
+				shared: true,
+				pointFormatter: function () {
+					const value = this.y as number;
+					if (value === null || value === undefined)
+						return `<span style="color:${this.color}">\u25CF</span> ${this.series.name}: <b>No data</b><br/>`;
+					if (value === 0)
+						return `<span style="color:${this.color}">\u25CF</span> ${this.series.name}: <b>0</b><br/>`;
+					const i = Math.floor(Math.log(value) / Math.log(1024));
+					const formattedValue =
+						parseFloat((value / Math.pow(1024, i)).toFixed(2)) + ' ';
+					return `<span style="color:${this.color}">\u25CF</span> ${this.series.name}: <b>${formattedValue}</b><br/>`;
+				}
+			},
+			legend: {
+				enabled: true
+			},
+			plotOptions: {
+				area: {
+					marker: {
+						enabled: false,
+						radius: 2
+					},
+					lineWidth: 1,
+					states: {
+						hover: {
+							lineWidth: 1
+						}
+					},
+					threshold: null
+				}
+			},
+			noData: {
+				style: {
+					fontWeight: 'bold',
+					fontSize: '16px',
+					color: '#303030'
+				},
+				position: {
+					align: 'center',
+					verticalAlign: 'middle'
+				},
+				useHTML: true
+			},
+			loading: {
+				hideDuration: 100,
+				showDuration: 100,
+				labelStyle: { color: 'gray', fontSize: '16px' },
+				style: { backgroundColor: 'rgba(255,255,255,0.7)' }
+			}
+		};
+
+		effect(() => {
+			if (this.chart) {
+				// const newSeries = this.prometheusToHighchartsSeries();
+				this.chart.update({ series: this.series() }, true, true);
+			}
+		});
+
+		effect(() => {
+			if (this.chart) {
+				if (this.loading()) {
+					this.chart.showLoading();
+				} else {
+					this.chart.hideLoading();
+				}
+			}
+		});
+
+		effect(() => {
+			if (this.chart) {
+				this.chart.update({
+					title: {
+						text: this.title()
+					},
+					yAxis: {
+						title: {
+							text: this.yAxisTitle()
+						}
+					}
+				});
+			}
+		});
+	}
+
+	chartCallback: Highcharts.ChartCallbackFunction = (chart) => {
+		this.chart = chart;
+	};
+
+	
+}