aril 1.1.73 → 1.1.74

package/fesm2022/aril-ui-charts.mjs

@@ -0,0 +1,1666 @@
+import { isPlatformBrowser, NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, PLATFORM_ID, Component, ChangeDetectionStrategy, Inject, EventEmitter, effect, Output, computed, ViewChild } from '@angular/core';
+import * as am5 from '@amcharts/amcharts5';
+import * as am5percent from '@amcharts/amcharts5/percent';
+import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
+import * as am5xy from '@amcharts/amcharts5/xy';
+import * as Highcharts from 'highcharts';
+import * as i1 from 'highcharts-angular';
+import { HighchartsChartModule } from 'highcharts-angular';
+import highchartsMore from 'highcharts/highcharts-more';
+import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
+import solidGauge from 'highcharts/modules/solid-gauge';
+import heatmap from 'highcharts/modules/heatmap';
+
+class ChartThemes {
+    static getThorAppColors() {
+        return [
+            '#e7625f',
+            '#c85250',
+            '#f7bec0',
+            '#e9eae0',
+            '#aa1945',
+            '#f1ced4',
+            '#391306',
+            '#821d30',
+            '#fb4570',
+            '#fb4570',
+            '#fb4570',
+            '#5f093d',
+            '#b21368',
+            '#d67ba8'
+        ];
+    }
+    static getYeapAppColors() {
+        return [
+            '#525252',
+            '#9A9A9A',
+            '#767676',
+            '#828282',
+            '#BEBEBE',
+            '#8E8E8E',
+            '#6A6A6A',
+            '#A6A6A6',
+            '#5E5E5E',
+            '#B2B2B2',
+            '#CACACA'
+        ];
+    }
+    static getLenaAppColors() {
+        return [
+            '#abea7c',
+            '#fede00',
+            '#c8df52',
+            '#0a7029',
+            '#dbe8d8',
+            '#65463e',
+            '#aad6a0',
+            '#013a20',
+            '#bacc81',
+            '#cdd193',
+            '#fad02c',
+            '#282120',
+            '#333652',
+            '#b2d7da'
+        ];
+    }
+}
+
+// EXAMPLE CHART DATA
+// testChartData = [
+// 	{
+// 		label: "part1",
+// 		value: 100000
+// 	},
+// 	{
+// 		label: "part1",
+// 		value: 160000
+// 	},
+// 	{
+// 		label: "part1",
+// 		value: 80000
+// 	}
+// ];
+class PieChartComponent {
+    constructor(platformId, zone) {
+        this.platformId = platformId;
+        this.zone = zone;
+        this.data = input.required();
+        this.chartId = input.required(); // must be given unique names for all charts. Its because angular and am5 rendering methods needs unique id to draw different canvas
+        this.appName = input('yeap');
+        this.chartColorSet = [];
+        this.chartHeight = input.required();
+    }
+    browserOnly(f) {
+        if (isPlatformBrowser(this.platformId)) {
+            this.zone.runOutsideAngular(() => {
+                f();
+            });
+        }
+    }
+    ngAfterViewInit() {
+        // Chart code goes in here
+        this.browserOnly(() => {
+            switch (this.appName()) {
+                case 'yeap':
+                    this.chartColorSet = ChartThemes.getYeapAppColors();
+                    break;
+                case 'thor':
+                    this.chartColorSet = ChartThemes.getThorAppColors();
+                    break;
+                case 'lena':
+                    this.chartColorSet = ChartThemes.getLenaAppColors();
+                    break;
+                case 'billing':
+                    this.chartColorSet = ChartThemes.getThorAppColors();
+                    break;
+                default:
+                    this.chartColorSet = ChartThemes.getYeapAppColors();
+                    break;
+            }
+            const root = am5.Root.new(this.chartId());
+            root._logo?.dispose();
+            root.setThemes([am5themes_Animated.new(root)]);
+            const chart = root.container.children.push(am5percent.PieChart.new(root, {}));
+            const series = chart.series.push(am5percent.PieSeries.new(root, {
+                name: 'Series',
+                categoryField: 'label',
+                valueField: 'value',
+                fillField: 'color'
+            }));
+            series.slices.template.adapters.add('fill', (fill, target) => {
+                const dataContext = target.dataItem?.dataContext;
+                if (dataContext) {
+                    const index = this.data().findIndex((item) => item.label === dataContext.label);
+                    return am5.color(this.chartColorSet[index % this.chartColorSet.length]); // Sıralı renk seçimi
+                }
+                return fill;
+            });
+            series.slices.template.setAll({
+                stroke: am5.color(0xffffff),
+                strokeWidth: 2
+            });
+            series.data.setAll(this.data());
+            const legend = chart.children.push(am5.Legend.new(root, {
+                centerX: am5.percent(50),
+                x: am5.percent(50),
+                layout: root.horizontalLayout
+            }));
+            legend.data.setAll(series.dataItems);
+        });
+    }
+    ngOnDestroy() {
+        // Clean up chart when the component is removed
+        this.browserOnly(() => {
+            if (this.root) {
+                this.root.dispose();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PieChartComponent, deps: [{ token: PLATFORM_ID }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.1.2", type: PieChartComponent, isStandalone: true, selector: "aril-pie-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, chartId: { classPropertyName: "chartId", publicName: "chartId", isSignal: true, isRequired: true, transformFunction: null }, appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: false, transformFunction: null }, chartHeight: { classPropertyName: "chartHeight", publicName: "chartHeight", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<div style="width: 100%; height:{{ chartHeight() }}px;" id="{{ chartId() }}"></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PieChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'aril-pie-chart',
+                    template: `<div style="width: 100%; height:{{ chartHeight() }}px;" id="{{ chartId() }}"></div>`,
+                    imports: [NgClass],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: () => [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i0.NgZone }] });
+
+// EXAMPLE CHART DATA
+// testChartData = [
+// 	{
+// 		label: "col1",
+// 		value: 100000
+// 	},
+// 	{
+// 		label: "col2",
+// 		value: 160000
+// 	},
+// 	{
+// 		label: "col3",
+// 		value: 80000
+// 	}
+// ];
+class ColumnChartComponent {
+    constructor(platformId, zone) {
+        this.platformId = platformId;
+        this.zone = zone;
+        this.data = input.required();
+        this.chartId = input.required(); // must be given unique names for all charts. Its because angular and am5 rendering methods needs unique id to draw different canvas
+        this.appName = input('yeap');
+        this.chartHeight = input.required();
+        this.chartColorSet = [];
+    }
+    browserOnly(f) {
+        if (isPlatformBrowser(this.platformId)) {
+            this.zone.runOutsideAngular(() => {
+                f();
+            });
+        }
+    }
+    ngAfterViewInit() {
+        // Chart code goes in here
+        this.browserOnly(() => {
+            switch (this.appName()) {
+                case 'yeap':
+                    this.chartColorSet = ChartThemes.getYeapAppColors();
+                    break;
+                case 'thor':
+                    this.chartColorSet = ChartThemes.getThorAppColors();
+                    break;
+                case 'lena':
+                    this.chartColorSet = ChartThemes.getLenaAppColors();
+                    break;
+                case 'billing':
+                    this.chartColorSet = ChartThemes.getThorAppColors();
+                    break;
+                default:
+                    this.chartColorSet = ChartThemes.getYeapAppColors();
+                    break;
+            }
+            const root = am5.Root.new(this.chartId());
+            root._logo?.dispose();
+            root.setThemes([am5themes_Animated.new(root)]);
+            const chart = root.container.children.push(am5xy.XYChart.new(root, {
+                panY: false,
+                layout: root.verticalLayout
+            }));
+            const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+                renderer: am5xy.AxisRendererY.new(root, {})
+            }));
+            const xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
+                renderer: am5xy.AxisRendererX.new(root, {}),
+                categoryField: 'label'
+            }));
+            xAxis.data.setAll(this.data());
+            const series = chart.series.push(am5xy.ColumnSeries.new(root, {
+                xAxis: xAxis,
+                yAxis: yAxis,
+                valueYField: 'value',
+                categoryXField: 'label',
+                stacked: true
+            }));
+            series.data.setAll(this.data());
+            xAxis.data.setAll(this.data());
+            series.columns.template.setAll({
+                stroke: am5.color(0xffffff),
+                strokeWidth: 2
+            });
+            series.columns.template.adapters.add('fill', (fill, target) => {
+                const dataContext = target.dataItem?.dataContext;
+                if (dataContext) {
+                    const index = this.data().findIndex((item) => item.label === dataContext.label);
+                    return am5.color(this.chartColorSet[index % this.chartColorSet.length]); // Sıralı renk seçimi
+                }
+                return fill;
+            });
+        });
+    }
+    ngOnDestroy() {
+        // Clean up chart when the component is removed
+        this.browserOnly(() => {
+            if (this.root) {
+                this.root.dispose();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ColumnChartComponent, deps: [{ token: PLATFORM_ID }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.1.2", type: ColumnChartComponent, isStandalone: true, selector: "aril-column-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, chartId: { classPropertyName: "chartId", publicName: "chartId", isSignal: true, isRequired: true, transformFunction: null }, appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: false, transformFunction: null }, chartHeight: { classPropertyName: "chartHeight", publicName: "chartHeight", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<div style="width: 100%; height:{{ chartHeight() }}px;" id="{{ chartId() }}"></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ColumnChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'aril-column-chart',
+                    // templateUrl: './column-chart.component.html',
+                    template: `<div style="width: 100%; height:{{ chartHeight() }}px;" id="{{ chartId() }}"></div>`,
+                    imports: [NgClass],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: () => [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i0.NgZone }] });
+
+// EXAMPLE CHART DATA
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/date-axis/
+// testChartData = [
+// 	{
+// 		date: 1732628383422,
+// 		value: 100000
+// 	},
+// 	{
+// 		date: 1732638383422,
+// 		value: 160000
+// 	},
+// 	{
+// 		date: 1732658383422,
+// 		value: 80000
+// 	}
+// ];
+let LineChartComponent$1 = class LineChartComponent {
+    constructor(platformId, zone) {
+        this.platformId = platformId;
+        this.zone = zone;
+        this.data = input.required();
+        this.chartId = input.required(); // must be given unique names for all charts. Its because angular and am5 rendering methods needs unique id to draw different canvas
+        this.appName = input('yeap');
+        this.timeUnit = input('day');
+        this.chartHeight = input.required();
+        this.chartColorSet = [];
+    }
+    browserOnly(f) {
+        if (isPlatformBrowser(this.platformId)) {
+            this.zone.runOutsideAngular(() => {
+                f();
+            });
+        }
+    }
+    ngAfterViewInit() {
+        // Chart code goes in here
+        this.browserOnly(() => {
+            switch (this.appName()) {
+                case 'yeap':
+                    this.chartColorSet = ChartThemes.getYeapAppColors();
+                    break;
+                case 'thor':
+                    this.chartColorSet = ChartThemes.getThorAppColors();
+                    break;
+                case 'lena':
+                    this.chartColorSet = ChartThemes.getLenaAppColors();
+                    break;
+                case 'billing':
+                    this.chartColorSet = ChartThemes.getThorAppColors();
+                    break;
+                default:
+                    this.chartColorSet = ChartThemes.getYeapAppColors();
+                    break;
+            }
+            const root = am5.Root.new(this.chartId());
+            root._logo?.dispose();
+            root.setThemes([am5themes_Animated.new(root)]);
+            const chart = root.container.children.push(am5xy.XYChart.new(root, {
+                panX: false,
+                panY: false,
+                wheelX: 'panX',
+                wheelY: 'zoomX',
+                paddingLeft: 0
+            }));
+            const cursor = chart.set('cursor', am5xy.XYCursor.new(root, {
+                behavior: 'zoomX'
+            }));
+            cursor.lineY.set('visible', false);
+            const xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
+                maxDeviation: 0,
+                baseInterval: {
+                    timeUnit: this.timeUnit(),
+                    count: 1
+                },
+                markUnitChange: false,
+                gridIntervals: [
+                    { timeUnit: 'day', count: 1 },
+                    { timeUnit: 'month', count: 1 },
+                    { timeUnit: 'year', count: 1 }
+                ],
+                tooltipDateFormat: 'dd-MM-yyyy',
+                renderer: am5xy.AxisRendererX.new(root, {
+                    minorGridEnabled: true,
+                    minGridDistance: 200,
+                    minorLabelsEnabled: true
+                }),
+                tooltip: am5.Tooltip.new(root, {})
+            }));
+            xAxis.set('minorDateFormats', {
+                day: 'dd',
+                month: 'MM',
+                year: 'yyyy'
+            });
+            xAxis.get('dateFormats')['day'] = 'dd/MM/yyyy';
+            const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+                renderer: am5xy.AxisRendererY.new(root, {})
+            }));
+            const series = chart.series.push(am5xy.LineSeries.new(root, {
+                name: 'Series',
+                xAxis: xAxis,
+                yAxis: yAxis,
+                valueYField: 'value',
+                valueXField: 'date',
+                stroke: am5.color(this.chartColorSet[0]),
+                tooltip: am5.Tooltip.new(root, {
+                    labelText: '{valueY}'
+                })
+            }));
+            series.bullets.push(function () {
+                const bulletCircle = am5.Circle.new(root, {
+                    radius: 5,
+                    fill: series.get('fill')
+                });
+                return am5.Bullet.new(root, {
+                    sprite: bulletCircle
+                });
+            });
+            chart.set('scrollbarX', am5.Scrollbar.new(root, {
+                orientation: 'horizontal'
+            }));
+            series.set('fill', am5.color(this.chartColorSet[0])); // set Series color to red
+            // series.fills.template.setAll({
+            // 	fillOpacity: 0.5,
+            // 	visible: true
+            // 	color
+            // });
+            series.data.setAll(this.data());
+            series.appear(1000);
+            chart.appear(1000, 100);
+        });
+    }
+    ngOnDestroy() {
+        // Clean up chart when the component is removed
+        this.browserOnly(() => {
+            if (this.root) {
+                this.root.dispose();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: LineChartComponent, deps: [{ token: PLATFORM_ID }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.1.2", type: LineChartComponent, isStandalone: true, selector: "aril-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, chartId: { classPropertyName: "chartId", publicName: "chartId", isSignal: true, isRequired: true, transformFunction: null }, appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: false, transformFunction: null }, timeUnit: { classPropertyName: "timeUnit", publicName: "timeUnit", isSignal: true, isRequired: false, transformFunction: null }, chartHeight: { classPropertyName: "chartHeight", publicName: "chartHeight", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<div style="width: 100%; height:{{ chartHeight() }}px;" id="{{ chartId() }}"></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: LineChartComponent$1, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'aril-line-chart',
+                    template: `<div style="width: 100%; height:{{ chartHeight() }}px;" id="{{ chartId() }}"></div>`,
+                    imports: [NgClass],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: () => [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i0.NgZone }] });
+
+// Example Data
+// data = [
+// 	{ name: 'Kategori A', y: 200 },
+// 	{ name: 'Kategori B', y: 100 },
+// 	{ name: 'Kategori C', y: 500 },
+// 	{ name: 'Kategori D', y: 250 },
+// 	{ name: 'Kategori E', y: 400 },
+// ]
+class PieHighChartComponent {
+    constructor() {
+        this.data = input.required();
+        this.title = input('');
+        this.size = input('70%');
+        this.width = input('460');
+        this.height = input('380');
+        this.showLegend = input(false);
+        this.dataLabelsFormat = input('<span style="font-size: 1.2em"><b>{point.name}:</b> <span style="opacity: 0.6">' +
+            '{point.percentage:.1f}%</span><br>');
+        this.selected = new EventEmitter();
+        this.Highcharts = Highcharts;
+        this.chartOptions = {};
+        effect(() => {
+            if (this.data()) {
+                this.setChartOptions();
+            }
+        });
+    }
+    setChartOptions() {
+        this.chartOptions = {
+            chart: {
+                type: 'pie',
+                plotShadow: false,
+                width: this.width(),
+                height: this.height()
+            },
+            title: {
+                text: this.title()
+            },
+            tooltip: {
+                pointFormat: '<b>{point.percentage:.1f}%</b>'
+            },
+            accessibility: {
+                point: {
+                    valueSuffix: '%'
+                }
+            },
+            plotOptions: {
+                pie: {
+                    size: this.size(),
+                    allowPointSelect: true,
+                    cursor: 'pointer',
+                    showInLegend: this.showLegend(),
+                    dataLabels: {
+                        formatter: function () {
+                            const percentage = this.point.percentage.toFixed(1);
+                            const value = this.point.y.toLocaleString('tr-TR', {
+                                minimumFractionDigits: 2,
+                                maximumFractionDigits: 2
+                            });
+                            return `
+								<span style="font-size: 1.2em"><b>${this.point.name}:</b></span>
+								<span style="opacity: 0.6">${percentage}%</span>
+								<br>
+								<span style="font-weight: bold;">${value} TL</span>`;
+                        },
+                        enabled: true,
+                        style: {
+                            fontWeight: 'normal'
+                        }
+                    },
+                    events: {
+                        click: (event) => {
+                            this.selected.emit(event.point.options);
+                        }
+                    }
+                }
+            },
+            series: [
+                {
+                    type: 'pie',
+                    name: 'Data',
+                    data: this.data()
+                }
+            ],
+            credits: {
+                enabled: false
+            },
+            responsive: {
+                rules: [
+                    {
+                        condition: {
+                            maxWidth: 500
+                        },
+                        chartOptions: {
+                            legend: {
+                                layout: 'vertical',
+                                align: 'right',
+                                verticalAlign: 'middle'
+                            }
+                        }
+                    }
+                ]
+            }
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PieHighChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.1.2", type: PieHighChartComponent, isStandalone: true, selector: "aril-pie-highchart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, dataLabelsFormat: { classPropertyName: "dataLabelsFormat", publicName: "dataLabelsFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: ` <highcharts-chart
+		style="width: 100%; display: block"
+		[Highcharts]="Highcharts"
+		[oneToOne]="true"
+		[runOutsideAngular]="true"
+		[options]="chartOptions">
+	</highcharts-chart>`, isInline: true, dependencies: [{ kind: "ngmodule", type: HighchartsChartModule }, { kind: "component", type: i1.HighchartsChartComponent, selector: "highcharts-chart", inputs: ["Highcharts", "constructorType", "callbackFunction", "oneToOne", "runOutsideAngular", "options", "update"], outputs: ["updateChange", "chartInstance"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PieHighChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'aril-pie-highchart',
+                    template: ` <highcharts-chart
+		style="width: 100%; display: block"
+		[Highcharts]="Highcharts"
+		[oneToOne]="true"
+		[runOutsideAngular]="true"
+		[options]="chartOptions">
+	</highcharts-chart>`,
+                    imports: [HighchartsChartModule]
+                }]
+        }], ctorParameters: () => [], propDecorators: { selected: [{
+                type: Output
+            }] } });
+
+// Example Data
+// data = [
+// 	{ name: 'Kategori A', y: 200 },
+// 	{ name: 'Kategori B', y: 100 },
+// 	{ name: 'Kategori C', y: 500 },
+// 	{ name: 'Kategori D', y: 250 },
+// 	{ name: 'Kategori E', y: 400 },
+// ]
+class BarHighChartComponent {
+    constructor() {
+        this.data = input.required();
+        this.title = input('');
+        this.categoriesTitle = input('');
+        this.valuesTitle = input('');
+        this.seriesName = input();
+        this.width = input('460');
+        this.height = input('380');
+        this.Highcharts = Highcharts;
+        this.chartOptions = {}; // Highcharts.Options
+    }
+    setChartOptions() {
+        this.chartOptions = {
+            chart: {
+                type: 'bar',
+                height: this.height(),
+                width: this.width()
+            },
+            title: {
+                text: this.title()
+            },
+            xAxis: {
+                categories: this.data().map((item) => item.name),
+                title: {
+                    text: this.categoriesTitle()
+                }
+            },
+            yAxis: {
+                min: 0,
+                title: {
+                    text: this.valuesTitle()
+                }
+            },
+            tooltip: {
+                formatter: function () {
+                    return `
+						<strong>${this.point.category}</strong><br>
+						Değer: <b>${this.point.y.toLocaleString('tr-TR', {
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 2
+                    })}</b>
+					`;
+                },
+                useHTML: true
+            },
+            series: [
+                {
+                    name: this.seriesName(),
+                    data: this.data().map((item) => item.y)
+                }
+            ],
+            legend: { enabled: this.seriesName() ? true : false },
+            credits: {
+                enabled: false
+            }
+        };
+    }
+    ngOnChanges(changes) {
+        if (changes['data'] || changes['title']) {
+            this.setChartOptions();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: BarHighChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.1.2", type: BarHighChartComponent, isStandalone: true, selector: "aril-bar-highchart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, categoriesTitle: { classPropertyName: "categoriesTitle", publicName: "categoriesTitle", isSignal: true, isRequired: false, transformFunction: null }, valuesTitle: { classPropertyName: "valuesTitle", publicName: "valuesTitle", isSignal: true, isRequired: false, transformFunction: null }, seriesName: { classPropertyName: "seriesName", publicName: "seriesName", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: ` <highcharts-chart
+		style="width: 100%; display: block"
+		[Highcharts]="Highcharts"
+		[options]="chartOptions"
+		[oneToOne]="true">
+	</highcharts-chart>`, isInline: true, dependencies: [{ kind: "ngmodule", type: HighchartsChartModule }, { kind: "component", type: i1.HighchartsChartComponent, selector: "highcharts-chart", inputs: ["Highcharts", "constructorType", "callbackFunction", "oneToOne", "runOutsideAngular", "options", "update"], outputs: ["updateChange", "chartInstance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: BarHighChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'aril-bar-highchart',
+                    template: ` <highcharts-chart
+		style="width: 100%; display: block"
+		[Highcharts]="Highcharts"
+		[options]="chartOptions"
+		[oneToOne]="true">
+	</highcharts-chart>`,
+                    imports: [HighchartsChartModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+// Example Data
+// data = [
+// 	{ name: 'Kategori A', y: 200 },
+// 	{ name: 'Kategori B', y: 100 },
+// 	{ name: 'Kategori C', y: 500 },
+// 	{ name: 'Kategori D', y: 250 },
+// 	{ name: 'Kategori E', y: 400 },
+// ]
+class ColumnHighChartComponent {
+    constructor() {
+        this.data = input.required();
+        this.title = input('');
+        this.categoriesTitle = input('');
+        this.valuesTitle = input('');
+        this.seriesName = input();
+        this.dateFormat = input();
+        this.width = input('460');
+        this.height = input('380');
+        this.series = input([]);
+        this.Highcharts = Highcharts;
+        this.chartOptions = {}; // Highcharts.Options
+        effect(() => {
+            if (this.data()) {
+                this.setChartOptions();
+            }
+        });
+    }
+    formatDate(name) {
+        const date = new Date(`${name.toString().slice(0, 4)}-${name.toString().slice(4, 6)}-${name.toString().slice(6, 8)}T` +
+            `${name.toString().slice(8, 10)}:${name.toString().slice(10, 12)}:${name.toString().slice(12, 14)}Z`);
+        switch (this.dateFormat()) {
+            case 'date':
+                return new Intl.DateTimeFormat('tr-TR', { day: '2-digit', month: 'long', year: 'numeric' }).format(date);
+            case 'month':
+                return new Intl.DateTimeFormat('tr-TR', { month: 'long', year: 'numeric' }).format(date).replace(' ', '/');
+            case 'year':
+                return new Intl.DateTimeFormat('tr-TR', { year: 'numeric' }).format(date);
+        }
+    }
+    setChartOptions() {
+        this.chartOptions = {
+            chart: {
+                type: 'column',
+                width: this.width(),
+                height: this.height()
+            },
+            title: {
+                text: this.title()
+            },
+            xAxis: {
+                categories: this.dateFormat() ?
+                    this.data().map((item) => this.formatDate(item.name))
+                    : this.data().map((item) => item.name),
+                title: {
+                    text: this.categoriesTitle()
+                }
+            },
+            yAxis: {
+                min: 0,
+                title: {
+                    text: this.valuesTitle()
+                }
+            },
+            tooltip: {
+                formatter: function () {
+                    return `
+						<strong>${this.point.category}</strong><br>
+						Değer: <b>${this.point.y.toLocaleString('tr-TR', {
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 2
+                    })}</b>
+					`;
+                },
+                useHTML: true
+            },
+            series: this.series().length ?
+                this.series()
+                : [
+                    {
+                        name: this.seriesName(),
+                        data: this.data().map((item) => item.y)
+                    }
+                ],
+            legend: { enabled: this.seriesName() ? true : false },
+            credits: {
+                enabled: false
+            }
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ColumnHighChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.1.2", type: ColumnHighChartComponent, isStandalone: true, selector: "aril-column-highchart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, categoriesTitle: { classPropertyName: "categoriesTitle", publicName: "categoriesTitle", isSignal: true, isRequired: false, transformFunction: null }, valuesTitle: { classPropertyName: "valuesTitle", publicName: "valuesTitle", isSignal: true, isRequired: false, transformFunction: null }, seriesName: { classPropertyName: "seriesName", publicName: "seriesName", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ` <highcharts-chart
+		style="width: 100%; display: block"
+		[Highcharts]="Highcharts"
+		[oneToOne]="true"
+		[options]="chartOptions">
+	</highcharts-chart>`, isInline: true, dependencies: [{ kind: "ngmodule", type: HighchartsChartModule }, { kind: "component", type: i1.HighchartsChartComponent, selector: "highcharts-chart", inputs: ["Highcharts", "constructorType", "callbackFunction", "oneToOne", "runOutsideAngular", "options", "update"], outputs: ["updateChange", "chartInstance"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ColumnHighChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'aril-column-highchart',
+                    template: ` <highcharts-chart
+		style="width: 100%; display: block"
+		[Highcharts]="Highcharts"
+		[oneToOne]="true"
+		[options]="chartOptions">
+	</highcharts-chart>`,
+                    imports: [HighchartsChartModule]
+                }]
+        }], ctorParameters: () => [] });
+
+highchartsMore(Highcharts);
+NoDataToDisplay(Highcharts);
+class AreaChartComponent {
+    constructor() {
+        this.Highcharts = Highcharts;
+        this.data = input.required();
+        this.title = input.required();
+        this.loading = input(false);
+        this.chartCallback = (chart) => {
+            this.chart = chart;
+            if (this.loading()) {
+                this.chart.showLoading();
+            }
+        };
+        this.chartOptions = computed(() => {
+            const currentData = this.data();
+            if (!currentData || currentData.length === 0) {
+                return {
+                    chart: {
+                        type: 'area',
+                        height: 200
+                    },
+                    title: { text: undefined },
+                    xAxis: { type: 'datetime', visible: true },
+                    yAxis: { visible: true },
+                    series: [{
+                            name: 'Çalışma Süresi',
+                            data: [],
+                            type: 'area'
+                        }],
+                    credits: { enabled: false },
+                    tooltip: { enabled: true },
+                    plotOptions: {
+                        area: {
+                            fillColor: '#D6EAF8',
+                            marker: { enabled: false },
+                            lineWidth: 2
+                        }
+                    }
+                };
+            }
+            return {
+                chart: {
+                    type: 'area',
+                    height: 200
+                },
+                title: { text: this.title() },
+                xAxis: { type: 'datetime', visible: true },
+                yAxis: { visible: true },
+                series: currentData.map(s => ({
+                    ...s,
+                    type: 'area'
+                })),
+                credits: { enabled: false },
+                tooltip: { enabled: true },
+                plotOptions: {
+                    area: {
+                        fillColor: '#D6EAF8',
+                        marker: { enabled: false },
+                        lineWidth: 2
+                    }
+                }
+            };
+        });
+        effect(() => {
+            const isLoading = this.loading();
+            if (this.chart) {
+                if (isLoading) {
+                    this.chart.showLoading();
+                }
+                else {
+                    this.chart.hideLoading();
+                }
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AreaChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.1.2", type: AreaChartComponent, isStandalone: true, selector: "aril-area-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<highcharts-chart
+			style="display: block"
+			[Highcharts]="Highcharts"
+			[oneToOne]="true"
+			[runOutsideAngular]="true"
+			[options]="chartOptions()"
+			[callbackFunction]="chartCallback">
+		</highcharts-chart>
+	`, isInline: true, dependencies: [{ kind: "ngmodule", type: HighchartsChartModule }, { kind: "component", type: i1.HighchartsChartComponent, selector: "highcharts-chart", inputs: ["Highcharts", "constructorType", "callbackFunction", "oneToOne", "runOutsideAngular", "options", "update"], outputs: ["updateChange", "chartInstance"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AreaChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'aril-area-chart',
+                    standalone: true,
+                    imports: [HighchartsChartModule],
+                    template: `
+		<highcharts-chart
+			style="display: block"
+			[Highcharts]="Highcharts"
+			[oneToOne]="true"
+			[runOutsideAngular]="true"
+			[options]="chartOptions()"
+			[callbackFunction]="chartCallback">
+		</highcharts-chart>
+	`
+                }]
+        }], ctorParameters: () => [] });
+
+NoDataToDisplay(Highcharts);
+var MetricUnit;
+(function (MetricUnit) {
+    MetricUnit["Bytes"] = "Bytes";
+    MetricUnit["Percentage"] = "%";
+    MetricUnit["OpsPerSec"] = "Ops/sec";
+    MetricUnit["Count"] = "Count";
+    MetricUnit["Seconds"] = "Seconds";
+    MetricUnit["Mib"] = "Mib";
+})(MetricUnit || (MetricUnit = {}));
+class LineDatetimeAxisChartComponent {
+    constructor() {
+        this.Highcharts = Highcharts;
+        this.series = input.required();
+        this.title = input('Chart');
+        this.yAxisTitle = input('');
+        this.loading = input(false);
+        this.unit = input();
+        this.chartCallback = (chart) => {
+            this.chart = chart;
+        };
+        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'
+            },
+            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;
+                        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;
+                    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()
+                        }
+                    }
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: LineDatetimeAxisChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.1.2", type: LineDatetimeAxisChartComponent, isStandalone: true, selector: "aril-line-datetime-axis-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, yAxisTitle: { classPropertyName: "yAxisTitle", publicName: "yAxisTitle", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<highcharts-chart
+			style="width: 100%; height: 100%; display: block"
+			[Highcharts]="Highcharts"
+			[options]="chartOptions"
+			[callbackFunction]="chartCallback">
+		</highcharts-chart>
+	`, isInline: true, dependencies: [{ kind: "ngmodule", type: HighchartsChartModule }, { kind: "component", type: i1.HighchartsChartComponent, selector: "highcharts-chart", inputs: ["Highcharts", "constructorType", "callbackFunction", "oneToOne", "runOutsideAngular", "options", "update"], outputs: ["updateChange", "chartInstance"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: LineDatetimeAxisChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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]
+                }]
+        }], ctorParameters: () => [] });
+
+class LineSeriesChartComponent {
+    constructor() {
+        this.seriesData = input([]);
+        this.title = input('Time Series Chart');
+        this.yAxisTitle = input('Value');
+        this.xAxisTitle = input('Time');
+    }
+    ngOnInit() {
+        this.initChart();
+    }
+    initChart() {
+        const options = {
+            chart: {
+                type: 'line',
+                zoomType: 'x'
+            },
+            title: {
+                text: this.title()
+            },
+            xAxis: {
+                type: 'datetime',
+                title: {
+                    text: this.xAxisTitle()
+                }
+            },
+            yAxis: {
+                title: {
+                    text: this.yAxisTitle()
+                }
+            },
+            series: this.seriesData().map(series => ({
+                type: 'line',
+                name: series.name,
+                data: series.data,
+                color: series.color
+            })),
+            tooltip: {
+                xDateFormat: '%Y-%m-%d %H:%M:%S',
+                shared: true
+            },
+            legend: {
+                enabled: true
+            },
+            plotOptions: {
+                series: {
+                    marker: {
+                        enabled: false
+                    }
+                }
+            },
+            noData: {
+                style: {
+                    fontWeight: 'bold',
+                    fontSize: '16px',
+                    color: '#303030'
+                },
+                position: {
+                    align: 'center',
+                    verticalAlign: 'middle'
+                },
+                useHTML: true
+            },
+        };
+        this.chart = Highcharts.chart(this.chartContainer.nativeElement, options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: LineSeriesChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.1.2", type: LineSeriesChartComponent, isStandalone: true, selector: "aril-lineseries-chart", inputs: { seriesData: { classPropertyName: "seriesData", publicName: "seriesData", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, yAxisTitle: { classPropertyName: "yAxisTitle", publicName: "yAxisTitle", isSignal: true, isRequired: false, transformFunction: null }, xAxisTitle: { classPropertyName: "xAxisTitle", publicName: "xAxisTitle", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true, static: true }], ngImport: i0, template: `
+		<div #chartContainer style="width: 100%; height: 100%;"></div>
+	`, isInline: true, dependencies: [{ kind: "ngmodule", type: HighchartsChartModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: LineSeriesChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'aril-lineseries-chart',
+                    template: `
+		<div #chartContainer style="width: 100%; height: 100%;"></div>
+	`,
+                    imports: [HighchartsChartModule]
+                }]
+        }], propDecorators: { chartContainer: [{
+                type: ViewChild,
+                args: ['chartContainer', { static: true }]
+            }] } });
+
+class LineChartComponent {
+    constructor() {
+        this.seriesData = input([]);
+        this.title = input('Line Chart');
+        this.yAxisTitle = input('Value');
+        this.xAxisTitle = input('Category');
+    }
+    ngOnInit() {
+        this.initChart();
+    }
+    initChart() {
+        const options = {
+            chart: {
+                type: 'line'
+            },
+            title: {
+                text: this.title()
+            },
+            xAxis: {
+                title: {
+                    text: this.xAxisTitle()
+                }
+            },
+            yAxis: {
+                title: {
+                    text: this.yAxisTitle()
+                }
+            },
+            series: this.seriesData().map((series) => ({
+                type: 'line',
+                name: series.name,
+                data: series.data,
+                color: series.color
+            })),
+            tooltip: {
+                shared: true
+            },
+            legend: {
+                enabled: true
+            },
+            plotOptions: {
+                series: {
+                    marker: {
+                        enabled: true
+                    }
+                }
+            },
+            noData: {
+                style: {
+                    fontWeight: 'bold',
+                    fontSize: '16px',
+                    color: '#303030'
+                },
+                position: {
+                    align: 'center',
+                    verticalAlign: 'middle'
+                },
+                useHTML: true
+            },
+        };
+        this.chart = Highcharts.chart(this.chartContainer.nativeElement, options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: LineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.1.2", type: LineChartComponent, isStandalone: true, selector: "aril-line-chart", inputs: { seriesData: { classPropertyName: "seriesData", publicName: "seriesData", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, yAxisTitle: { classPropertyName: "yAxisTitle", publicName: "yAxisTitle", isSignal: true, isRequired: false, transformFunction: null }, xAxisTitle: { classPropertyName: "xAxisTitle", publicName: "xAxisTitle", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true, static: true }], ngImport: i0, template: ` <div #chartContainer style="width: 100%; height: 100%;"></div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: HighchartsChartModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: LineChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'aril-line-chart',
+                    template: ` <div #chartContainer style="width: 100%; height: 100%;"></div> `,
+                    imports: [HighchartsChartModule]
+                }]
+        }], propDecorators: { chartContainer: [{
+                type: ViewChild,
+                args: ['chartContainer', { static: true }]
+            }] } });
+
+var lineChart_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    LineChartComponent: LineChartComponent
+});
+
+highchartsMore(Highcharts);
+solidGauge(Highcharts);
+NoDataToDisplay(Highcharts);
+class SolidGaugeChartComponent {
+    constructor() {
+        this.Highcharts = Highcharts;
+        this.data = input.required();
+        this.title = input.required();
+        this.loading = input(false);
+        this.chartCallback = (chart) => {
+            this.chart = chart;
+            if (this.loading()) {
+                this.chart.showLoading();
+            }
+        };
+        this.chartOptions = computed(() => {
+            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 = 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
+                        }
+                    }
+                ]
+            };
+        });
+        effect(() => {
+            const isLoading = this.loading();
+            if (this.chart) {
+                if (isLoading) {
+                    this.chart.showLoading();
+                }
+                else {
+                    this.chart.hideLoading();
+                }
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SolidGaugeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.1.2", type: SolidGaugeChartComponent, isStandalone: true, selector: "aril-solid-gauge", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<highcharts-chart
+			style="display: block"
+			[Highcharts]="Highcharts"
+			[oneToOne]="true"
+			[runOutsideAngular]="true"
+			[options]="chartOptions()"
+			[callbackFunction]="chartCallback">
+		</highcharts-chart>
+	`, isInline: true, dependencies: [{ kind: "ngmodule", type: HighchartsChartModule }, { kind: "component", type: i1.HighchartsChartComponent, selector: "highcharts-chart", inputs: ["Highcharts", "constructorType", "callbackFunction", "oneToOne", "runOutsideAngular", "options", "update"], outputs: ["updateChange", "chartInstance"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SolidGaugeChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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>
+	`
+                }]
+        }], ctorParameters: () => [] });
+
+highchartsMore(Highcharts);
+heatmap(Highcharts);
+NoDataToDisplay(Highcharts);
+class HeatmapChartComponent {
+    constructor() {
+        this.Highcharts = Highcharts;
+        this.series = input.required();
+        this.title = input('Chart');
+        this.yAxisTitle = input('');
+        this.loading = input(false);
+        this.chartOptions = {};
+        this.xAxisCategories = [];
+        this.yAxisCategories = [];
+        this.chartCallback = (chart) => {
+            this.chart = chart;
+        };
+        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) {
+                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
+        };
+    }
+    epochToTimeString(epoch) {
+        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() {
+        const xCategorySet = new Set();
+        const yCategorySet = new Set();
+        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 = [];
+        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
+            }
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: HeatmapChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.1.2", type: HeatmapChartComponent, isStandalone: true, selector: "aril-heatmap-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, yAxisTitle: { classPropertyName: "yAxisTitle", publicName: "yAxisTitle", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<highcharts-chart
+			style="width: 100%; height: 100%; display: block"
+			[Highcharts]="Highcharts"
+			[options]="chartOptions"
+			[callbackFunction]="chartCallback">
+		</highcharts-chart>
+	`, isInline: true, dependencies: [{ kind: "ngmodule", type: HighchartsChartModule }, { kind: "component", type: i1.HighchartsChartComponent, selector: "highcharts-chart", inputs: ["Highcharts", "constructorType", "callbackFunction", "oneToOne", "runOutsideAngular", "options", "update"], outputs: ["updateChange", "chartInstance"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: HeatmapChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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>
+	`
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AreaChartComponent, BarHighChartComponent, ColumnChartComponent, ColumnHighChartComponent, HeatmapChartComponent, lineChart_component as HighChartLine, LineChartComponent$1 as LineChartComponent, LineDatetimeAxisChartComponent, LineSeriesChartComponent, MetricUnit, PieChartComponent, PieHighChartComponent, SolidGaugeChartComponent };
+//# sourceMappingURL=aril-ui-charts.mjs.map