@alauda-fe/common/esm2022/view-zchart/view-zchart.component.mjs

Alauda frontend team common codes.

import { __decorate, __metadata } from "tslib";
import { ScaleType, } from '@alauda/chart';
import { isTemplateRef, rgbColor, ThemeService } from '@alauda/ui';
import { ComponentPortal, DomPortalOutlet, TemplatePortal, } from '@angular/cdk/portal';
import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentFactoryResolver, ElementRef, EventEmitter, Injector, Input, Output, TemplateRef, ViewChild, ViewContainerRef, } from '@angular/core';
import dayjs from 'dayjs';
import { BehaviorSubject, map, merge, Observable, Subject, takeUntil, tap, combineLatest, startWith, skip, debounceTime, } from 'rxjs';
import { Chart, ChartEvent, ActionType, } from 'zz-chart';
import { DATE_TIME_FORMAT, ObservableInput, ValueHook, publishRef, } from '../core/public-api';
import { hasNoData } from '../metric-chart/utils';
import { TranslateService } from '../translate/public-api';
import { LegendComponent } from './legend/legend.component';
import { handleDateFormat, pointFormat } from './public-api';
import * as i0 from "@angular/core";
import * as i1 from "../translate/public-api";
import * as i2 from "@alauda/ui";
const _c0 = ["chartContainer"];
const _c1 = ["titleContainer"];
const _c2 = ["tooltipItemVirtual"];
const _c3 = ["tooltipTitleVirtual"];
const _c4 = ["tooltipNameVirtual"];
const _c5 = ["pieLabelContainer"];
function ViewZChartComponent_ng_container_2_div_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 24);
    i0.ɵɵelementContainer(1, 18);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    i0.ɵɵnextContext(2);
    const titleContainer_r1 = i0.ɵɵreference(7);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngTemplateOutlet", titleContainer_r1);
} }
function ViewZChartComponent_ng_container_2_div_5_div_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 27)(1, "div", 28);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const item_r2 = ctx.$implicit;
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(item_r2.value);
} }
function ViewZChartComponent_ng_container_2_div_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 19)(1, "div", 25);
    i0.ɵɵtemplate(2, ViewZChartComponent_ng_container_2_div_5_div_2_Template, 3, 1, "div", 26);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const statSeries_r3 = ctx.ngIf;
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngForOf", statSeries_r3);
} }
function ViewZChartComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelementStart(1, "div", 19)(2, "div", 20);
    i0.ɵɵtemplate(3, ViewZChartComponent_ng_container_2_div_3_Template, 2, 1, "div", 21);
    i0.ɵɵelement(4, "div", 22);
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(5, ViewZChartComponent_ng_container_2_div_5_Template, 3, 1, "div", 23);
    i0.ɵɵpipe(6, "async");
    i0.ɵɵelementEnd();
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext();
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("ngIf", !ctx_r3.hideHeader);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(6, 2, ctx_r3.series$));
} }
function ViewZChartComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelement(1, "div", 29, 7);
    i0.ɵɵelementContainerEnd();
} }
function ViewZChartComponent_div_4_div_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelementContainer(1, 18);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.customErrorContainer);
} }
function ViewZChartComponent_div_4_div_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelement(0, "aui-icon", 37);
    i0.ɵɵtext(1);
    i0.ɵɵpipe(2, "translate");
    i0.ɵɵelementStart(3, "button", 38);
    i0.ɵɵlistener("click", function ViewZChartComponent_div_4_div_1_ng_template_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.refresh()); });
    i0.ɵɵtext(4);
    i0.ɵɵpipe(5, "translate");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, "failed_load_please"), " ");
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, "refresh").toLowerCase(), " ");
} }
function ViewZChartComponent_div_4_div_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 35);
    i0.ɵɵtemplate(1, ViewZChartComponent_div_4_div_1_ng_container_1_Template, 2, 1, "ng-container", 36)(2, ViewZChartComponent_div_4_div_1_ng_template_2_Template, 6, 6, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const noCustomErrorContainer_r6 = i0.ɵɵreference(3);
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r3.customErrorContainer)("ngIfElse", noCustomErrorContainer_r6);
} }
function ViewZChartComponent_div_4_div_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 39);
    i0.ɵɵelement(1, "aui-icon", 40);
    i0.ɵɵtext(2);
    i0.ɵɵpipe(3, "translate");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 1, "loading"), " ");
} }
function ViewZChartComponent_div_4_div_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 41);
    i0.ɵɵtext(1);
    i0.ɵɵpipe(2, "translate");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, "no_indicator_selected"), " ");
} }
function ViewZChartComponent_div_4_div_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelementContainer(1, 18);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.customNoDataTitle);
} }
function ViewZChartComponent_div_4_div_4_ng_template_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtext(0);
    i0.ɵɵpipe(1, "translate");
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext(3);
    i0.ɵɵtextInterpolate1(" ", ctx_r3.customNoDataTitle || i0.ɵɵpipeBind1(1, 1, "no_data"), " ");
} }
function ViewZChartComponent_div_4_div_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 42);
    i0.ɵɵtemplate(1, ViewZChartComponent_div_4_div_4_ng_container_1_Template, 2, 1, "ng-container", 36)(2, ViewZChartComponent_div_4_div_4_ng_template_2_Template, 2, 3, "ng-template", null, 9, i0.ɵɵtemplateRefExtractor);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const noDataTitleTemplate_r7 = i0.ɵɵreference(3);
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r3.customNoDataTitle && ctx_r3.isTemplateRef(ctx_r3.customNoDataTitle))("ngIfElse", noDataTitleTemplate_r7);
} }
function ViewZChartComponent_div_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 30);
    i0.ɵɵtemplate(1, ViewZChartComponent_div_4_div_1_Template, 4, 2, "div", 31)(2, ViewZChartComponent_div_4_div_2_Template, 4, 3, "div", 32)(3, ViewZChartComponent_div_4_div_3_Template, 3, 3, "div", 33)(4, ViewZChartComponent_div_4_div_4_Template, 4, 2, "div", 34);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const status_r8 = ctx.ngIf;
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", status_r8.failed && !status_r8.loading);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", status_r8.loading);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", status_r8.noLegend && !status_r8.loading && !status_r8.noData);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", status_r8.noData && !status_r8.loading && !status_r8.failed);
} }
function ViewZChartComponent_ng_template_6_ng_container_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelementContainer(1, 18);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.title);
} }
function ViewZChartComponent_ng_template_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelementContainer(1, 17);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.titleDescription)("ngTemplateOutletContext", ctx_r3.titleDescriptionContext);
} }
function ViewZChartComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, ViewZChartComponent_ng_template_6_ng_container_0_Template, 2, 1, "ng-container", 36)(1, ViewZChartComponent_ng_template_6_ng_container_1_Template, 2, 2, "ng-container", 36);
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext();
    const TitleTemplate_r9 = i0.ɵɵreference(9);
    const TitleDesTemplate_r10 = i0.ɵɵreference(11);
    i0.ɵɵproperty("ngIf", ctx_r3.isTemplateRef(ctx_r3.title))("ngIfElse", TitleTemplate_r9);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r3.isTemplateRef(ctx_r3.titleDescription))("ngIfElse", TitleDesTemplate_r10);
} }
function ViewZChartComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtext(0);
    i0.ɵɵpipe(1, "translate");
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext();
    i0.ɵɵtextInterpolate2(" ", ctx_r3.title, " ", ctx_r3.unit ? "(" + i0.ɵɵpipeBind1(1, 2, ctx_r3.unit) + ")" : "", "\n");
} }
function ViewZChartComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtext(0);
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext();
    i0.ɵɵtextInterpolate1(" ", ctx_r3.titleDescription, "\n");
} }
function ViewZChartComponent_ng_template_21_ng_container_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelementContainer(1, 18);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.pieLabelText);
} }
function ViewZChartComponent_ng_template_21_ng_template_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtext(0);
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵtextInterpolate1(" ", ctx_r3.pieLabelText, " ");
} }
function ViewZChartComponent_ng_template_21_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, ViewZChartComponent_ng_template_21_ng_container_0_Template, 2, 1, "ng-container", 36)(1, ViewZChartComponent_ng_template_21_ng_template_1_Template, 1, 1, "ng-template", null, 10, i0.ɵɵtemplateRefExtractor);
} if (rf & 2) {
    const stringPieLabelText_r11 = i0.ɵɵreference(2);
    const ctx_r3 = i0.ɵɵnextContext();
    i0.ɵɵproperty("ngIf", ctx_r3.pieLabelText && ctx_r3.isTemplateRef(ctx_r3.pieLabelText))("ngIfElse", stringPieLabelText_r11);
} }
export class ViewZChartComponent {
    get background() {
        return this.backgroundColor;
    }
    get isCardMode() {
        return this.mode === 'card';
    }
    get scaleType() {
        return this.xScaleType || ScaleType.TIME;
    }
    get isScaleTime() {
        return this.scaleType === ScaleType.TIME;
    }
    get chartEl() {
        return this.chartContainer.nativeElement;
    }
    get options() {
        const defaultXAxisTickFormatter = this.isScaleTime
            ? (value) => dayjs(+value).format(this.dateAxisLabelFormats || DATE_TIME_FORMAT)
            : null;
        const xAxisTickFormatter = this.xAxisTickFormatter || defaultXAxisTickFormatter;
        return {
            title: this.hideTitle || this.hideHeader
                ? false
                : {
                    text: this.title,
                    custom: true,
                },
            legend: this.hideHeader
                ? false
                : {
                    custom: true,
                },
            scale: {
                x: {
                    time: !!this.isScaleTime,
                },
                y: {
                    ...(this.scaleYMin && { min: this.scaleYMin }),
                    ...(this.scaleYMax && { max: this.scaleYMax }),
                },
            },
            axis: {
                x: {
                    formatter: xAxisTickFormatter,
                },
                y: {
                    formatter: this.yAxisTickFormatter ||
                        ((value) => `${this.conversionMaximum(value)}${this.yAxisTickSuffix || ''}`),
                },
            },
            tooltip: this.tooltipHide
                ? false
                : {
                    popupContainer: this.tooltipAppendToBody ? null : this.chartEl,
                    showTitle: !this.tooltipHideTitle,
                    titleFormatter: this.titleFormatter,
                    itemFormatter: (context) => {
                        this.tooltipItemContext = this.mergePointContext(context);
                        this.cdr.detectChanges();
                        return this.tooltipPointTemplate
                            ? this.tooltipItemVirtual.nativeElement.innerHTML
                            : this.tooltipItemContext.context;
                    },
                    nameFormatter: (name) => this.tooltipTranslation ? this.translate.get(name) : name,
                    valueFormatter: this.valueFormatter,
                    sort: this.tooltipSortMethod || this.tooltipAutoSort
                        ? this.tooltipSortMethod
                        : null,
                },
        };
    }
    constructor(componentFactoryResolver, injector, appRef, translate, cdr, viewContainerRef, theme, el) {
        this.componentFactoryResolver = componentFactoryResolver;
        this.injector = injector;
        this.appRef = appRef;
        this.translate = translate;
        this.cdr = cdr;
        this.viewContainerRef = viewContainerRef;
        this.theme = theme;
        this.el = el;
        this.mode = 'default';
        this.gridOffsetTop = 0;
        // base
        this.chartType = 'area';
        this.xAccessor = (d) => d.x;
        this.yAccessor = (d) => d.y;
        this.callbackFirst = false;
        // legend
        this.hideLegend = false;
        this.legendSelectAllOperation = false;
        this.tooltipAutoSort = false;
        this.tooltipSortMethod = (a, b) => b.value - a.value;
        this.tooltipAppendToBody = true;
        // series
        this.bandWidth = 10;
        this.barType = 'standard';
        // plot line
        this.yPlotLinesHide = false;
        this.mouseUpEvent = new EventEmitter();
        this.markClickEvent = new EventEmitter();
        this.refreshEvent = new EventEmitter();
        this.onDestroy$ = new Subject();
        this._chartStatus$$ = new BehaviorSubject({
            loading: true,
            noData: false,
            failed: false,
            noLegend: false,
        });
        this._status = {};
        this.areaPosition = {
            x1: 0,
            x2: 0,
            startX: 0,
            endX: 0,
        };
        this.status$ = merge(this.chartStatus$, this._chartStatus$$).pipe(map(status => ({
            ...this._status,
            ...status,
        })), tap(status => {
            this._status = status;
        }), publishRef());
        this.isTemplateRef = isTemplateRef;
        this.tooltipItemContext = { context: [] };
        this.tooltipTitleContext = { context: null };
        this.cacheData = [];
        this.mergePointContext = (context) => ({
            context: this.limitMaxContext(context),
            ...this.tooltipPointTemplateContext,
        });
        this.defaultPointFormat = pointFormat;
        this.titleFormatter = (value, values) => {
            this.tooltipTitleContext = { context: { title: value, values } };
            const title = this.tooltipTranslation && !this.tooltipTitleTemplate
                ? this.translate.get(value) || value
                : value;
            this.cdr.markForCheck();
            return this.tooltipTitleTemplate
                ? this.tooltipTitleVirtual.nativeElement.innerHTML
                : handleDateFormat(title);
        };
        this.valueFormatter = (data) => {
            const res = this.tooltipPointFormat
                ? this.tooltipPointFormat(data)
                : this.defaultPointFormat(+data);
            return this.hideTooltipUnit && !this.unit
                ? res
                : `${res} ${this.translate.get(this.unit)}`;
        };
    }
    ngAfterViewInit() {
        combineLatest([this.rotated$, this.chartType$, this.stepLine$]).subscribe(() => {
            if (this.chart) {
                this.reInit();
            }
            else {
                setTimeout(() => {
                    this.reInit();
                }, 0);
            }
        });
        if (!this.chart) {
            this.chartInit();
        }
    }
    reInit() {
        this.ngOnDestroy();
        this.chartInit();
    }
    chartInit() {
        if (this.chartType === 'stat') {
            setTimeout(() => {
                this.addCustomLegend();
            }, 0);
            return;
        }
        this.chart = new Chart({
            container: this.chartContainer?.nativeElement ||
                this.el.nativeElement.querySelector('.ac-chart-container'),
            padding: [16, 12, 2, 0],
            options: this.options,
            data: [],
        });
        this.chartReactive = this.chart.reactive();
        this.handleOptionsReactive();
        this.theme.currentTheme$
            .pipe(takeUntil(this.onDestroy$))
            .subscribe(type => {
            this.chart.theme(type);
        });
        this.enableZoom$.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
            if (this.enableZoom) {
                this.chart.interaction('brush-x', {
                    end: [
                        {
                            trigger: ChartEvent.PLOT_MOUSEUP,
                            action: ActionType.BRUSH_X_END,
                            callback: (e) => {
                                this.mouseUpEvent.next({
                                    startX: e.start,
                                    endX: e.end,
                                });
                            },
                        },
                    ],
                });
            }
        });
        if (this.chartType === 'line' || this.stepLine) {
            this.stepLine ? this.chart.line().step('start') : this.chart.line();
        }
        else
            switch (this.chartType) {
                case 'area': {
                    this.chart.area();
                    break;
                }
                case 'point': {
                    this.chart.point();
                    break;
                }
                case 'bar': {
                    if (this.barType === 'stacked') {
                        this.chart.bar().adjust({ type: 'stack' });
                    }
                    else {
                        this.chart.bar();
                    }
                    break;
                }
            }
        if (this.rotated) {
            this.chart.coordinate().transpose();
        }
        this.chart.render();
        combineLatest([this.series$, this.xPlotLines$.pipe(startWith(null))])
            .pipe(takeUntil(this.onDestroy$), debounceTime(200))
            .subscribe({
            next: ([data, res]) => {
                if (data) {
                    const values = this.handelData(data);
                    if (values.filter(d => d.name).length &&
                        values
                            .map(v => v.name)
                            .some(d => !this.cacheData.map(c => c.name).includes(d)) &&
                        this.cacheData.length) {
                        this.reInit();
                        return;
                    }
                    if (values?.[0]?.name) {
                        this.cacheData = values;
                    }
                    requestAnimationFrame(() => {
                        this.chart?.data(values);
                    });
                    this.addCustomTitle();
                    const noData = hasNoData(values);
                    this.handelChartStatus({
                        loading: false,
                        noData,
                    });
                    if (res && !noData) {
                        this.chart?.annotation().lineY({
                            data: res?.value,
                            text: {
                                content: res?.text || String(res?.value),
                            },
                        }, this.xPlotEmpty);
                    }
                    requestAnimationFrame(() => {
                        this.chart?.render();
                    });
                    setTimeout(() => {
                        const legend = this.chart?.components?.get('legend');
                        if (values.length > 0 && legend?.inactivatedSet?.size > 0) {
                            legend.inactivatedSet.forEach(value => {
                                const leg = legend
                                    .getLegend()
                                    .find(item => item.name === value);
                                if (leg) {
                                    legend.legendItemClick({
                                        name: leg.name,
                                        activated: false,
                                    });
                                }
                            });
                        }
                    }, 100);
                }
            },
        });
        setTimeout(() => {
            if (this.contextCallbackFunction && !this.callbackFirst) {
                this.callbackFirst = true;
                this.contextCallbackFunction(this.chart);
            }
        }, 0);
        this.chart.on(ChartEvent.PLOT_CLICK, (value) => {
            this.markClickEvent.next(value);
        });
        this.yPlotLines$.pipe(takeUntil(this.onDestroy$)).subscribe(res => {
            if (res) {
                requestAnimationFrame(() => {
                    this.chart.annotation().lineX({
                        data: res.title,
                        text: {
                            content: dayjs(res.title).format('YYYY-MM-DD HH:mm:ss'),
                            border: {
                                style: `1px solid ${rgbColor('n-7')}`,
                            },
                        },
                    });
                });
            }
        });
        this.addCustomLegend();
    }
    handelData(data) {
        return data.map(d => ({
            ...d,
            values: d.values?.map(v => ({
                ...v,
                x: this.xAccessor(v),
                y: this.yAccessor(v),
            })),
        }));
    }
    addCustomLegend() {
        const container = this.chartType === 'stat' ? this.el.nativeElement : this.chartEl;
        const dom = container.querySelector(`.achart-legend`);
        if (dom && !this.hideHeader) {
            dom.innerHTML = '';
            const p = new ComponentPortal(LegendComponent);
            const o = new DomPortalOutlet(dom, this.componentFactoryResolver, this.appRef, this.injector);
            this.customLegendRef = p.attach(o);
            this.customLegendRef.instance.chart = this.chart;
            this.customLegendRef.instance.symbol = ['bar', 'pie', 'scatter'].includes(this.chartType)
                ? 'circle'
                : 'line';
            this.leftOperation$.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
                this.customLegendRef.instance.leftOperation = this.leftOperation;
            });
            this.leftOperationContext$
                .pipe(takeUntil(this.onDestroy$))
                .subscribe(() => {
                this.customLegendRef.instance.leftOperationContext =
                    this.leftOperationContext;
            });
            this.rightOperation$.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
                this.customLegendRef.instance.rightOperation = this.rightOperation;
                this.customLegendRef.instance.cdr.markForCheck();
            });
            this.customLegendRef.instance.mode = this.mode;
            this.customLegendRef.instance.hideLegend = this.hideLegend;
            this.customLegendRef.instance.selectAllName = this.legendSelectAllName;
            this.customLegendRef.instance.selectAllOperation =
                this.legendSelectAllOperation;
            this.customLegendRef.instance.template = this.legendTemplate;
            this.customLegendRef.instance.changeLegend
                .pipe(takeUntil(this.onDestroy$))
                .subscribe(res => {
                this.handelChartStatus({
                    noLegend: res.every(item => !item.activate),
                });
            });
        }
    }
    addCustomTitle() {
        const dom = this.chartContainer.nativeElement.querySelector(`.achart-title`);
        if (dom && !this.hideHeader) {
            dom.innerHTML = '';
            const p = new TemplatePortal(this.titleContainer, this.viewContainerRef);
            const o = new DomPortalOutlet(dom, this.componentFactoryResolver, this.appRef, this.injector);
            this.customTitleRef = p.attach(o);
        }
    }
    addPieLabelText(chartUId) {
        const dom = document.querySelector(`.${chartUId} .ac-pie-guide`);
        if (!this.customPieLabelTextRef && dom && this.pieLabelText) {
            const p = new TemplatePortal(this.pieLabelContainer, this.viewContainerRef);
            const o = new DomPortalOutlet(dom, this.componentFactoryResolver, this.appRef, this.injector);
            this.customPieLabelTextRef = p.attach(o);
        }
    }
    handleOptionsReactive() {
        this.tooltipHide$
            .pipe(skip(1), takeUntil(this.onDestroy$))
            .subscribe(hide => {
            if (!this.chartReactive) {
                return;
            }
            this.chartReactive.options.tooltip = hide ? !hide : {};
        });
        this.hideLegend$.pipe(skip(1), takeUntil(this.onDestroy$)).subscribe(() => {
            this.addCustomLegend();
        });
        this.tooltipSortMethod$
            .pipe(skip(1), takeUntil(this.onDestroy$))
            .subscribe(tooltipSortMethod => {
            if (!this.chartReactive) {
                return;
            }
            if (this.chartReactive.options.tooltip) {
                this.chartReactive.options.tooltip.sort =
                    tooltipSortMethod || this.tooltipAutoSort
                        ? tooltipSortMethod
                        : null;
            }
        });
    }
    refresh() {
        this.refreshEvent.next(null);
    }
    ngOnDestroy() {
        this.callbackFirst = false;
        this.cacheData = [];
        this.chart?.destroy();
        this.chart = null;
        this.onDestroy$.next();
        this.customLegendRef?.destroy();
    }
    handelChartStatus(status) {
        this._chartStatus$$.next({
            ...status,
        });
        this.cdr.detectChanges();
    }
    limitMaxContext(context, limit = 15) {
        return context.slice(0, limit);
    }
    conversionMaximum(value) {
        const unit = 'k';
        const data = Number(value) || 0;
        if (data >= 1000) {
            const num = +(data / 1000).toFixed(2);
            return `${num}${unit}`;
        }
        return '' + value;
    }
    static { this.ɵfac = function ViewZChartComponent_Factory(t) { return new (t || ViewZChartComponent)(i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ApplicationRef), i0.ɵɵdirectiveInject(i1.TranslateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2.ThemeService), i0.ɵɵdirectiveInject(i0.ElementRef)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ViewZChartComponent, selectors: [["acl-view-zchart"]], viewQuery: function ViewZChartComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 5);
            i0.ɵɵviewQuery(_c1, 5);
            i0.ɵɵviewQuery(_c2, 5);
            i0.ɵɵviewQuery(_c3, 5);
            i0.ɵɵviewQuery(_c4, 5);
            i0.ɵɵviewQuery(_c5, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartContainer = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.titleContainer = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tooltipItemVirtual = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tooltipTitleVirtual = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tooltipNameVirtual = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.pieLabelContainer = _t.first);
        } }, inputs: { backgroundColor: "backgroundColor", hideHeader: "hideHeader", mode: "mode", customNoDataTitle: "customNoDataTitle", customErrorContainer: "customErrorContainer", marginLeft: "marginLeft", gridOffsetTop: "gridOffsetTop", rotated: "rotated", chartType: "chartType", series: "series", xAccessor: "xAccessor", yAccessor: "yAccessor", unit: "unit", contextCallbackFunction: "contextCallbackFunction", title: "title", hideTitle: "hideTitle", titleDescription: "titleDescription", titleDescriptionContext: "titleDescriptionContext", titleOffsetX: "titleOffsetX", hideLegend: "hideLegend", legendTemplate: "legendTemplate", leftOperation: "leftOperation", leftOperationContext: "leftOperationContext", rightOperation: "rightOperation", legendSelectAllOperation: "legendSelectAllOperation", legendSelectAllName: "legendSelectAllName", scaleYMin: "scaleYMin", scaleYMax: "scaleYMax", yAxisTickSuffix: "yAxisTickSuffix", dateAxisLabelFormats: "dateAxisLabelFormats", xAxisLabelTranslation: "xAxisLabelTranslation", xScaleType: "xScaleType", xAxisTickFormatter: "xAxisTickFormatter", ticks: "ticks", yAxisTickFormatter: "yAxisTickFormatter", yAxisMinStep: "yAxisMinStep", tooltipHide: "tooltipHide", tooltipAutoSort: "tooltipAutoSort", tooltipSortMethod: "tooltipSortMethod", tooltipHideTitle: "tooltipHideTitle", tooltipAppendToBody: "tooltipAppendToBody", tooltipColumnLayout: "tooltipColumnLayout", tooltipTitleTemplate: "tooltipTitleTemplate", tooltipPointNameTemplate: "tooltipPointNameTemplate", tooltipTranslation: "tooltipTranslation", tooltipTitleTranslation: "tooltipTitleTranslation", hideTooltipUnit: "hideTooltipUnit", tooltipPointFormat: "tooltipPointFormat", tooltipPointTemplate: "tooltipPointTemplate", tooltipPointTemplateContext: "tooltipPointTemplateContext", bandWidth: "bandWidth", minHeight: "minHeight", stepLine: "stepLine", curveType: "curveType", barType: "barType", startOpacity: "startOpacity", endOpacity: "endOpacity", lineWidth: "lineWidth", isGroup: "isGroup", barRadius: "barRadius", closeRadiusLadder: "closeRadiusLadder", columnClick: "columnClick", enableZoom: "enableZoom", chartStatus: "chartStatus", yPlotLinesHide: "yPlotLinesHide", yPlotLines: "yPlotLines", pieInnerRadius: "pieInnerRadius", pieOuterRadius: "pieOuterRadius", pieStartAngle: "pieStartAngle", pieEndAngle: "pieEndAngle", pieBackgroundColor: "pieBackgroundColor", pieTotal: "pieTotal", pieInnerDisc: "pieInnerDisc", pieLabelText: "pieLabelText", pieLabelPosition: "pieLabelPosition", pieItemStyle: "pieItemStyle", scatterType: "scatterType", scatterOpacity: "scatterOpacity", scatterSize: "scatterSize", scatterThreshold: "scatterThreshold", xPlotLines: "xPlotLines", xPlotEmpty: "xPlotEmpty" }, outputs: { mouseUpEvent: "mouseUpEvent", markClickEvent: "markClickEvent", refreshEvent: "refreshEvent" }, decls: 23, vars: 14, consts: [["titleContainer", ""], ["TitleTemplate", ""], ["TitleDesTemplate", ""], ["tooltipItemVirtual", ""], ["tooltipTitleVirtual", ""], ["tooltipNameVirtual", ""], ["pieLabelContainer", ""], ["chartContainer", ""], ["noCustomErrorContainer", ""], ["noDataTitleTemplate", ""], ["stringPieLabelText", ""], [1, "ac-chart"], [3, "ngSwitch"], [4, "ngSwitchCase"], [4, "ngSwitchDefault"], ["class", "ac-chart-status", 4, "ngIf"], [1, "hide"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "ngTemplateOutlet"], [1, "stat"], [1, "tw-flex"], ["class", "achart-title tw-flex-1 tw-break-all", 4, "ngIf"], [1, "achart-legend"], ["class", "stat", 4, "ngIf"], [1, "achart-title", "tw-flex-1", "tw-break-all"], [1, "body"], ["class", "item", 4, "ngFor", "ngForOf"], [1, "item"], [1, "value"], [1, "ac-chart-container", 2, "height", "100%"], [1, "ac-chart-status"], ["class", "status failed", 4, "ngIf"], ["class", "status loading", 4, "ngIf"], ["class", "status no-legend", 4, "ngIf"], ["class", "status no-data", 4, "ngIf"], [1, "status", "failed"], [4, "ngIf", "ngIfElse"], ["icon", "exclamation_triangle_s", "background", "triangle"], ["aui-button", "text", 3, "click"], [1, "status", "loading"], ["icon", "spinner"], [1, "status", "no-legend"], [1, "status", "no-data"]], template: function ViewZChartComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 11);
            i0.ɵɵelementContainerStart(1, 12);
            i0.ɵɵtemplate(2, ViewZChartComponent_ng_container_2_Template, 7, 4, "ng-container", 13)(3, ViewZChartComponent_ng_container_3_Template, 3, 0, "ng-container", 14);
            i0.ɵɵelementContainerEnd();
            i0.ɵɵtemplate(4, ViewZChartComponent_div_4_Template, 5, 4, "div", 15);
            i0.ɵɵpipe(5, "async");
            i0.ɵɵelementEnd();
            i0.ɵɵtemplate(6, ViewZChartComponent_ng_template_6_Template, 2, 4, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(8, ViewZChartComponent_ng_template_8_Template, 2, 4, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(10, ViewZChartComponent_ng_template_10_Template, 1, 1, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
            i0.ɵɵelementStart(12, "div", 16, 3);
            i0.ɵɵelementContainer(14, 17);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(15, "div", 16, 4);
            i0.ɵɵelementContainer(17, 17);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(18, "div", 16, 5);
            i0.ɵɵelementContainer(20, 18);
            i0.ɵɵelementEnd();
            i0.ɵɵtemplate(21, ViewZChartComponent_ng_template_21_Template, 3, 2, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
        } if (rf & 2) {
            i0.ɵɵstyleProp("background", ctx.background);
            i0.ɵɵclassProp("ac-non-chart", ctx.chartType === "pie");
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngSwitch", ctx.chartType);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngSwitchCase", "stat");
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(5, 12, ctx.status$));
            i0.ɵɵadvance(10);
            i0.ɵɵproperty("ngTemplateOutlet", ctx.tooltipPointTemplate)("ngTemplateOutletContext", ctx.tooltipItemContext);
            i0.ɵɵadvance(3);
            i0.ɵɵproperty("ngTemplateOutlet", ctx.tooltipTitleTemplate)("ngTemplateOutletContext", ctx.tooltipTitleContext);
            i0.ɵɵadvance(3);
            i0.ɵɵproperty("ngTemplateOutlet", ctx.tooltipPointNameTemplate);
        } }, styles: ["[_nghost-%COMP%]{width:100%;height:100%;display:block}[_nghost-%COMP%]     .achart-title{font-size:16px;word-break:break-word!important}[_nghost-%COMP%]     .achart-header{align-items:center}div.ac-non-chart[_ngcontent-%COMP%]{min-height:unset;padding:0}.ac-chart[_ngcontent-%COMP%]{display:flex;padding:20px 16px;width:100%;position:relative;height:210px;min-height:100%;max-height:100%;box-sizing:border-box;flex-direction:column}.ac-chart-container[_ngcontent-%COMP%]{width:100%}.ac-chart-status[_ngcontent-%COMP%]{left:50%;position:absolute;top:50%;white-space:nowrap;transform:translate(-50%,-50%)}.status[_ngcontent-%COMP%]{padding:6px 16px;display:flex;align-items:center;justify-content:center;background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-4));border-radius:2px}.status[_ngcontent-%COMP%]   aui-icon[_ngcontent-%COMP%]{font-size:14px;margin-right:4px}.loading[_ngcontent-%COMP%]   aui-icon[_ngcontent-%COMP%]{color:rgb(var(--aui-color-primary))}.failed[_ngcontent-%COMP%]   aui-icon[_ngcontent-%COMP%]{color:rgb(var(--aui-color-red))}.hide[_ngcontent-%COMP%]{display:none}.stat[_ngcontent-%COMP%]{display:flex;flex-direction:column;width:100%;height:100%}.stat[_ngcontent-%COMP%]   .body[_ngcontent-%COMP%]{display:flex;height:100%}.stat[_ngcontent-%COMP%]   .item[_ngcontent-%COMP%]{flex:1;padding:12px;display:flex;align-items:center;justify-content:center;flex-direction:column}.stat[_ngcontent-%COMP%]   .title[_ngcontent-%COMP%]{font-size:20px}.stat[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%]{font-size:60px;line-height:initial}"], changeDetection: 0 }); }
}
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], ViewZChartComponent.prototype, "rotated$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], ViewZChartComponent.prototype, "chartType$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], ViewZChartComponent.prototype, "series$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], ViewZChartComponent.prototype, "unit$", void 0);
__decorate([
    ValueHook(function (contextCallbackFunction) {
        if (contextCallbackFunction && !this.callbackFirst && this.chart) {
            this.callbackFirst = true;
            contextCallbackFunction(this.chart);
        }
    }),
    __metadata("design:type", Function)
], ViewZChartComponent.prototype, "contextCallbackFunction", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], ViewZChartComponent.prototype, "hideLegend$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], ViewZChartComponent.prototype, "legendTemplate$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], ViewZChartComponent.prototype, "leftOperationContext$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], ViewZChartComponent.prototype, "leftOperation$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], ViewZChartComponent.prototype, "rightOperation$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], ViewZChartComponent.prototype, "tooltipHide$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], ViewZChartComponent.prototype, "tooltipSortMethod$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], ViewZChartComponent.prototype, "stepLine$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], ViewZChartComponent.prototype, "enableZoom$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], ViewZChartComponent.prototype, "yPlotLines$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], ViewZChartComponent.prototype, "xPlotLines$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], ViewZChartComponent.prototype, "chartStatus$", void 0);
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ViewZChartComponent, [{
        type: Component,
        args: [{ selector: 'acl-view-zchart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ac-chart\"\n  [class.ac-non-chart]=\"chartType === 'pie'\"\n  [style.background]=\"background\"\n>\n  <ng-container [ngSwitch]=\"chartType\">\n    <ng-container *ngSwitchCase=\"'stat'\">\n      <div class=\"stat\">\n        <div class=\"tw-flex\">\n          <div\n            class=\"achart-title tw-flex-1 tw-break-all\"\n            *ngIf=\"!hideHeader\"\n          >\n            <ng-container [ngTemplateOutlet]=\"titleContainer\"></ng-container>\n          </div>\n          <div class=\"achart-legend\"></div>\n        </div>\n        <div\n          class=\"stat\"\n          *ngIf=\"series$ | async as statSeries\"\n        >\n          <div class=\"body\">\n            <div\n              class=\"item\"\n              *ngFor=\"let item of statSeries\"\n            >\n              <div class=\"value\">{{ $any(item).value }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <div\n        #chartContainer\n        class=\"ac-chart-container\"\n        style=\"height: 100%\"\n      ></div>\n    </ng-container>\n  </ng-container>\n\n  <div\n    class=\"ac-chart-status\"\n    *ngIf=\"status$ | async as status\"\n  >\n    <div\n      *ngIf=\"status.failed && !status.loading\"\n      class=\"status failed\"\n    >\n      <ng-container *ngIf=\"customErrorContainer; else noCustomErrorContainer\">\n        <ng-container [ngTemplateOutlet]=\"customErrorContainer\"></ng-container>\n      </ng-container>\n      <ng-template #noCustomErrorContainer>\n        <aui-icon\n          icon=\"exclamation_triangle_s\"\n          background=\"triangle\"\n        ></aui-icon>\n        {{ 'failed_load_please' | translate }}\n        <button\n          aui-button=\"text\"\n          (click)=\"refresh()\"\n        >\n          {{ ('refresh' | translate).toLowerCase() }}\n        </button>\n      </ng-template>\n    </div>\n    <div\n      *ngIf=\"status.loading\"\n      class=\"status loading\"\n    >\n      <aui-icon icon=\"spinner\"></aui-icon> {{ 'loading' | translate }}\n    </div>\n    <div\n      *ngIf=\"status.noLegend && !status.loading && !status.noData\"\n      class=\"status no-legend\"\n    >\n      {{ 'no_indicator_selected' | translate }}\n    </div>\n\n    <div\n      *ngIf=\"status.noData && !status.loading && !status.failed\"\n      class=\"status no-data\"\n    >\n      <ng-container\n        *ngIf=\"\n          customNoDataTitle && isTemplateRef(customNoDataTitle);\n          else noDataTitleTemplate\n        \"\n      >\n        <ng-container [ngTemplateOutlet]=\"customNoDataTitle\"></ng-container>\n      </ng-container>\n      <ng-template #noDataTitleTemplate>\n        {{ customNoDataTitle || ('no_data' | translate) }}\n      </ng-template>\n    </div>\n  </div>\n</div>\n\n<!-- title Template -->\n<ng-template #titleContainer>\n  <ng-container *ngIf=\"isTemplateRef(title); else TitleTemplate\">\n    <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"isTemplateRef(titleDescription); else TitleDesTemplate\">\n    <ng-container\n      [ngTemplateOutlet]=\"titleDescription\"\n      [ngTemplateOutletContext]=\"titleDescriptionContext\"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #TitleTemplate>\n  {{ title }}\n  {{ unit ? '(' + (unit | translate) + ')' : '' }}\n</ng-template>\n\n<ng-template #TitleDesTemplate>\n  {{ titleDescription }}\n</ng-template>\n\n<!-- tooltip template -->\n<div\n  #tooltipItemVirtual\n  class=\"hide\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"tooltipPointTemplate\"\n    [ngTemplateOutletContext]=\"tooltipItemContext\"\n  ></ng-container>\n</div>\n\n<div\n  #tooltipTitleVirtual\n  class=\"hide\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"tooltipTitleTemplate\"\n    [ngTemplateOutletContext]=\"tooltipTitleContext\"\n  ></ng-container>\n</div>\n\n<div\n  #tooltipNameVirtual\n  class=\"hide\"\n>\n  <ng-container [ngTemplateOutlet]=\"tooltipPointNameTemplate\"></ng-container>\n</div>\n\n<ng-template #pieLabelContainer>\n  <ng-container\n    *ngIf=\"pieLabelText && isTemplateRef(pieLabelText); else stringPieLabelText\"\n  >\n    <ng-container [ngTemplateOutlet]=\"pieLabelText\"></ng-container>\n  </ng-container>\n  <ng-template #stringPieLabelText>\n    {{ pieLabelText }}\n  </ng-template>\n</ng-template>\n", styles: [":host{width:100%;height:100%;display:block}:host ::ng-deep .achart-title{font-size:16px;word-break:break-word!important}:host ::ng-deep .achart-header{align-items:center}div.ac-non-chart{min-height:unset;padding:0}.ac-chart{display:flex;padding:20px 16px;width:100%;position:relative;height:210px;min-height:100%;max-height:100%;box-sizing:border-box;flex-direction:column}.ac-chart-container{width:100%}.ac-chart-status{left:50%;position:absolute;top:50%;white-space:nowrap;transform:translate(-50%,-50%)}.status{padding:6px 16px;display:flex;align-items:center;justify-content:center;background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-4));border-radius:2px}.status aui-icon{font-size:14px;margin-right:4px}.loading aui-icon{color:rgb(var(--aui-color-primary))}.failed aui-icon{color:rgb(var(--aui-color-red))}.hide{display:none}.stat{display:flex;flex-direction:column;width:100%;height:100%}.stat .body{display:flex;height:100%}.stat .item{flex:1;padding:12px;display:flex;align-items:center;justify-content:center;flex-direction:column}.stat .title{font-size:20px}.stat .value{font-size:60px;line-height:initial}\n"] }]
    }], () => [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }, { type: i1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i2.ThemeService }, { type: i0.ElementRef }], { backgroundColor: [{
            type: Input
        }], hideHeader: [{
            type: Input
        }], chartContainer: [{
            type: ViewChild,
            args: ['chartContainer']
        }], titleContainer: [{
            type: ViewChild,
            args: ['titleContainer']
        }], tooltipItemVirtual: [{
            type: ViewChild,
            args: ['tooltipItemVirtual']
        }], tooltipTitleVirtual: [{
            type: ViewChild,
            args: ['tooltipTitleVirtual']
        }], tooltipNameVirtual: [{
            type: ViewChild,
            args: ['tooltipNameVirtual']
        }], pieLabelContainer: [{
            type: ViewChild,
            args: ['pieLabelContainer']
        }], mode: [{
            type: Input
        }], customNoDataTitle: [{
            type: Input
        }], customErrorContainer: [{
            type: Input
        }], marginLeft: [{
            type: Input
        }], gridOffsetTop: [{
            type: Input
        }], rotated: [{
            type: Input
        }], rotated$: [], chartType: [{
            type: Input
        }], chartType$: [], series: [{
            type: Input
        }], series$: [], xAccessor: [{
            type: Input
        }], yAccessor: [{
            type: Input
        }], unit: [{
            type: Input
        }], unit$: [], contextCallbackFunction: [{
            type: Input
        }], title: [{
            type: Input
        }], hideTitle: [{
            type: Input
        }], titleDescription: [{
            type: Input
        }], titleDescriptionContext: [{
            type: Input
        }], titleOffsetX: [{
            type: Input
        }], hideLegend: [{
            type: Input
        }], hideLegend$: [], legendTemplate: [{
            type: Input
        }], legendTemplate$: [], leftOperation: [{
            type: Input
        }], leftOperationContext: [{
            type: Input
        }], leftOperationContext$: [], leftOperation$: [], rightOperation: [{
            type: Input
        }], rightOperation$: [], legendSelectAllOperation: [{
            type: Input
        }], legendSelectAllName: [{
            type: Input
        }], scaleYMin: [{
            type: Input
        }], scaleYMax: [{
            type: Input
        }], yAxisTickSuffix: [{
            type: Input
        }], dateAxisLabelFormats: [{
            type: Input
        }], xAxisLabelTranslation: [{
            type: Input
        }], xScaleType: [{
            type: Input
        }], xAxisTickFormatter: [{
            type: Input
        }], ticks: [{
            type: Input
        }], yAxisTickFormatter: [{
            type: Input
        }], yAxisMinStep: [{
            type: Input
        }], tooltipHide: [{
            type: Input
        }], tooltipHide$: [], tooltipAutoSort: [{
            type: Input
        }], tooltipSortMethod: [{
            type: Input
        }], tooltipSortMethod$: [], tooltipHideTitle: [{
            type: Input
        }], tooltipAppendToBody: [{
            type: Input
        }], tooltipColumnLayout: [{
            type: Input
        }], tooltipTitleTemplate: [{
            type: Input
        }], tooltipPointNameTemplate: [{
            type: Input
        }], tooltipTranslation: [{
            type: Input
        }], tooltipTitleTranslation: [{
            type: Input
        }], hideTooltipUnit: [{
            type: Input
        }], tooltipPointFormat: [{
            type: Input
        }], tooltipPointTemplate: [{
            type: Input
        }], tooltipPointTemplateContext: [{
            type: Input
        }], bandWidth: [{
            type: Input
        }], minHeight: [{
            type: Input
        }], stepLine: [{
            type: Input
        }], stepLine$: [], curveType: [{
            type: Input
        }], barType: [{
            type: Input
        }], startOpacity: [{
            type: Input
        }], endOpacity: [{
            type: Input
        }], lineWidth: [{
            type: Input
        }], isGroup: [{
            type: Input
        }], barRadius: [{
            type: Input
        }], closeRadiusLadder: [{
            type: Input
        }], columnClick: [{
            type: Input
        }], enableZoom: [{
            type: Input
        }], enableZoom$: [], chartStatus: [{
            type: Input
        }], yPlotLinesHide: [{
            type: Input
        }], yPlotLines: [{
            type: Input
        }], pieInnerRadius: [{
            type: Input
        }], pieOuterRadius: [{
            type: Input
        }], pieStartAngle: [{
            type: Input