aril 1.1.71 → 1.1.73

package/fesm2022/aril-ui-charts.mjs

@@ -1,1666 +0,0 @@
-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