import { CdkListboxModule } from '@angular/cdk/listbox';
import * as i1$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, Optional, inject, input, model, computed, signal, effect, Component, ElementRef, DestroyRef, Injector, afterNextRender, runInInjectionContext, Directive, output, ChangeDetectionStrategy } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i3 from '@metad/ocap-angular/analytical-card';
import { AnalyticalCardModule } from '@metad/ocap-angular/analytical-card';
import * as i1 from '@metad/ocap-angular/core';
import { PERIODS, NgmDSCoreService, NgmLanguageEnum, NgmIsNilPipe } from '@metad/ocap-angular/core';
import * as i2 from '@metad/ocap-core';
import { SmartIndicatorDataService, PeriodFunctions, isNumber, getEntityCalendar, calcOffsetRange, TimeRangeType, FilterOperator, ChartDimensionRoleType, C_MEASURES, getIndicatorMeasureName, ReferenceLineType, ReferenceLineValueType, ReferenceLineAggregation, IndicatorTagEnum, TimeGranularity } from '@metad/ocap-core';
import * as i2$1 from '@ngx-translate/core';
import { TranslateService, TranslateModule } from '@ngx-translate/core';
import { derivedAsync } from 'ngxtension/derived-async';
import { combineLatest, map, of, startWith as startWith$1 } from 'rxjs';
import { map as map$1, startWith } from 'rxjs/operators';
import { TinyArea } from '@antv/g2plot/esm/plots/tiny-area';

var Trend;
(function (Trend) {
    Trend[Trend["None"] = 0] = "None";
    Trend[Trend["Up"] = 1] = "Up";
    Trend[Trend["Down"] = 2] = "Down";
})(Trend || (Trend = {}));
var TrendColor;
(function (TrendColor) {
    TrendColor["None"] = "#40A9FF";
    TrendColor["Up"] = "#31c75a";
    TrendColor["Down"] = "#fe3c2e";
})(TrendColor || (TrendColor = {}));
var TrendReverseColor;
(function (TrendReverseColor) {
    TrendReverseColor["None"] = "#40A9FF";
    TrendReverseColor["Down"] = "#31c75a";
    TrendReverseColor["Up"] = "#fe3c2e";
})(TrendReverseColor || (TrendReverseColor = {}));
var StatisticalType;
(function (StatisticalType) {
    StatisticalType["CurrentPeriod"] = "CurrentPeriod";
    StatisticalType["Accumulative"] = "Accumulative";
    StatisticalType["Yoy"] = "Yoy";
    StatisticalType["Mom"] = "Mom";
})(StatisticalType || (StatisticalType = {}));

class NgmIndicatorService extends SmartIndicatorDataService {
    constructor(dsCoreService, smartFilterBar) {
        super(dsCoreService, smartFilterBar);
    }
    selectQuery(options) {
        const lookBack = this.get((state) => state.lookBack);
        return combineLatest([
            super.selectQuery(options, null, [PeriodFunctions.CURRENT, PeriodFunctions.MOM, PeriodFunctions.YOY, PeriodFunctions.YTD], 0),
            super.selectQuery(options, null, [PeriodFunctions.CURRENT], lookBack ?? 1)
        ]).pipe(map(([current, trends]) => {
            if (current.error || trends.error) {
                return {
                    indicator: this.indicator,
                    error: `${(current.error ?? '').trim()}\n${(trends.error ?? '').trim()}`.trim()
                };
            }
            const items = trends.data?.filter((item) => isNumber(item.CURRENT));
            const start = items[0]?.CURRENT;
            const end = items[items.length - 1]?.CURRENT;
            return {
                indicator: this.indicator,
                trends: trends.data,
                data: current.data?.[0],
                trend: start > end ? Trend.Down : start < end ? Trend.Up : Trend.None
            };
        }));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmIndicatorService, deps: [{ token: i1.NgmDSCoreService }, { token: i2.SmartFilterBarService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmIndicatorService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmIndicatorService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: i1.NgmDSCoreService }, { type: i2.SmartFilterBarService, decorators: [{
                    type: Optional
                }] }] });

class NgmIndicatorExplorerComponent {
    #translate;
    constructor() {
        this.PERIODS = PERIODS;
        this.dataService = inject(NgmIndicatorService);
        this.dsCoreService = inject(NgmDSCoreService);
        this.#translate = inject(TranslateService);
        // Inputs
        this.dataSettings = input.required();
        this.indicatorCode = input.required();
        this.lookBack = input.required();
        this.primaryTheme = input();
        this.periodName = model();
        // States
        this.initied = toSignal(this.dataService.onAfterServiceInit().pipe(map$1(() => true), startWith(false)));
        this.indicator = computed(() => {
            const code = this.indicatorCode();
            if (code && this.initied()) {
                return this.dataService.getIndicator(code);
            }
            return null;
        });
        this.currentLang$ = toSignal(this.#translate.onLangChange.pipe(map$1((event) => event.lang), startWith(this.#translate.currentLang)));
        this.entityType = derivedAsync(() => {
            const { dataSource, entitySet } = this.dataSettings() ?? {};
            return dataSource && entitySet
                ? this.dsCoreService.selectEntitySet(dataSource, entitySet).pipe(map$1((entitySet) => entitySet?.entityType))
                : of(null);
        });
        this.indicatorCalendar = computed(() => this.indicator()?.calendar);
        this.calendar = computed(() => {
            const entityType = this.entityType();
            const calendar = this.indicatorCalendar();
            const timeGranularity = this.timeGranularity();
            const period = this.period();
            return getEntityCalendar(entityType, calendar, period?.granularity ?? timeGranularity);
        });
        // readonly detailPeriods = model<string>()
        this.period = computed(() => PERIODS.find((item) => item.name === this.periodName()));
        this.timeGranularity = computed(() => this.period()?.granularity);
        this.today = toSignal(this.dsCoreService.currentTime$.pipe(map$1(({ today }) => today)));
        this.timeSlicer = computed(() => {
            const { dimension, hierarchy, level } = this.calendar() ?? {};
            const today = this.today() ?? new Date();
            const timeGranularity = this.timeGranularity();
            const period = this.period();
            const lookBack = this.lookBack();
            const timeRange = calcOffsetRange(today, {
                type: TimeRangeType.Standard,
                granularity: period?.granularity ?? timeGranularity,
                formatter: level?.semantics?.formatter,
                lookBack: period?.lookBack ?? lookBack,
                lookAhead: 0
            });
            return {
                dimension: {
                    dimension: dimension.name,
                    hierarchy: hierarchy.name
                },
                members: timeRange.map((value) => ({ key: value })),
                operator: FilterOperator.BT
            };
        });
        this.freeSlicers = signal([]);
        this.analyticalCards = computed(() => {
            const indicator = this.indicator();
            const { dimension, hierarchy, level } = this.calendar() ?? {};
            const timeSlicer = this.timeSlicer();
            let freeSlicers = this.freeSlicers();
            const dataSettings = this.dataSettings();
            // Remove free slicers that already in indicator restrictive filters
            freeSlicers = freeSlicers.filter((slicer) => !indicator.filters?.find((filter) => filter.dimension?.dimension === slicer.dimension?.dimension));
            return [
                {
                    ...dataSettings,
                    id: indicator.id,
                    chartAnnotation: {
                        chartType: {
                            type: 'Line'
                        },
                        dimensions: [
                            {
                                dimension: dimension.name,
                                hierarchy: hierarchy.name,
                                level: level.name,
                                role: ChartDimensionRoleType.Time,
                                zeroSuppression: true,
                                chartOptions: {
                                    dataZoom: {
                                        type: 'inside'
                                    }
                                }
                            }
                        ],
                        measures: [
                            {
                                dimension: C_MEASURES,
                                measure: getIndicatorMeasureName(indicator),
                                formatting: {
                                    shortNumber: true,
                                    unit: indicator.unit
                                },
                                referenceLines: [
                                    {
                                        label: 'Max',
                                        type: ReferenceLineType.markPoint,
                                        valueType: ReferenceLineValueType.dynamic,
                                        aggregation: ReferenceLineAggregation.max
                                    },
                                    {
                                        label: 'Min',
                                        type: ReferenceLineType.markPoint,
                                        valueType: ReferenceLineValueType.dynamic,
                                        aggregation: ReferenceLineAggregation.min
                                    }
                                ]
                            }
                        ]
                    },
                    selectionVariant: {
                        selectOptions: [timeSlicer, ...(indicator.filters ?? []), ...freeSlicers]
                    },
                    presentationVariant: {
                        groupBy: indicator.dimensions?.map((dimension) => ({ dimension, hierarchy: null, level: null }))
                    }
                }
            ];
        });
        this.chartOptions = computed(() => {
            const indicatorTrend = Trend.Up;
            const currentLang = this.currentLang$();
            const color = currentLang === NgmLanguageEnum.SimplifiedChinese
                ? TrendReverseColor[Trend[indicatorTrend] ?? Trend[Trend.None]]
                : TrendColor[Trend[indicatorTrend] ?? Trend[Trend.None]];
            return {
                options: {
                    animation: false
                },
                grid: {
                    top: 50,
                    right: 10
                },
                seriesStyle: {
                    symbol: 'emptyCircle',
                    symbolSize: 20,
                    lineStyle: {
                        color
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: color + '80'
                                },
                                {
                                    offset: 1,
                                    color: color + '00'
                                }
                            ]
                        }
                    },
                    itemStyle: {
                        color: '#ffab00',
                        borderColor: color,
                        borderWidth: 3,
                        opacity: 0
                    },
                    emphasis: {
                        itemStyle: {
                            opacity: 1
                        }
                    },
                    selectedMode: 'single',
                    select: {
                        itemStyle: {
                            opacity: 1
                        }
                    },
                    markPoint: {
                        label: {
                            color: 'white'
                        }
                    }
                },
                valueAxis: {
                    splitNumber: 3,
                    position: 'right',
                    minorTick: {
                        show: true,
                        splitNumber: 5
                    }
                },
                categoryAxis: {
                    splitLine: {
                        show: true
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    position: (pos, params, el, elRect, size) => {
                        const obj = {};
                        obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 60;
                        obj[['top', 'bottom'][+(pos[1] < size.viewSize[1] / 2)]] = 20;
                        return obj;
                    }
                }
            };
        });
        effect(() => {
            if (this.dataSettings()) {
                this.dataService.dataSettings = this.dataSettings();
            }
        }, { allowSignalWrites: true });
        effect(() => {
            if (this.timeGranularity()) {
                this.dataService.timeGranularity = this.timeGranularity();
            }
        }, { allowSignalWrites: true });
        effect(() => {
            this.dataService.patchState({
                indicatorId: this.indicatorCode(),
                lookBack: this.lookBack()
            });
            if (this.initied()) {
                this.dataService.refresh();
            }
        }, { allowSignalWrites: true });
    }
    onPeriodSlicerChange(slicers) {
        //
    }
    onExplain(event) {
        //
    }
    togglePeriod(name) {
        this.periodName.update((state) => (state === name ? null : name));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmIndicatorExplorerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgmIndicatorExplorerComponent, isStandalone: true, selector: "ngm-indicator-explorer", inputs: { dataSettings: { classPropertyName: "dataSettings", publicName: "dataSettings", isSignal: true, isRequired: true, transformFunction: null }, indicatorCode: { classPropertyName: "indicatorCode", publicName: "indicatorCode", isSignal: true, isRequired: true, transformFunction: null }, lookBack: { classPropertyName: "lookBack", publicName: "lookBack", isSignal: true, isRequired: true, transformFunction: null }, primaryTheme: { classPropertyName: "primaryTheme", publicName: "primaryTheme", isSignal: true, isRequired: false, transformFunction: null }, periodName: { classPropertyName: "periodName", publicName: "periodName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { periodName: "periodNameChange" }, providers: [NgmIndicatorService], ngImport: i0, template: "@if (indicator(); as indicator) {\n  <div class=\"flex flex-col dark:text-text-primary\">\n    @for (dataSettings of analyticalCards(); track dataSettings.id) {\n      <ngm-analytical-card class=\"h-[300px]\"\n        [dataSettings]=\"dataSettings\"\n        [chartOptions]=\"chartOptions()\"\n        [chartSettings]=\"{theme: primaryTheme()}\"\n        [options]=\"{\n          realtimeLinked: true,\n          showSlicers: true\n        }\"\n        (slicersChanging)=\"onPeriodSlicerChange($event)\"\n        (explain)=\"onExplain($event)\"\n        >\n        <div class=\" flex-1 flex items-center md:gap-2 dark:text-text-primary\">\n          @for (p of PERIODS; track p.name) {\n            <span class=\"period-tag text-sm cursor-pointer inline-flex items-center font-semibold leading-sm uppercase px-2 py-1 rounded-lg\"\n              [ngClass]=\"{selected: p.name === periodName()}\"\n              (click)=\"togglePeriod(p.name)\"\n            >\n              {{p.name}}\n            </span>\n          }\n        </div>\n      </ngm-analytical-card>\n    }\n  </div>\n\n  @if (indicator.description) {\n    <div class=\"indicator-business mt-4 dark:text-text-primary\">\n      <div class=\"title text-base\">\n        {{ 'Ngm.Indicator.Description' | translate: {Default: 'Indicator Description'} }}\n      </div>\n      <div class=\"whitespace-pre-wrap text-sm text-text-secondary\">{{ indicator.description }}</div>\n    </div>\n  }\n}", styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background-color:var(--color-components-card-bg);padding:1rem}.period-tag{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}.period-tag:hover{--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity))}.period-tag:focus{--tw-bg-opacity: 1;background-color:rgb(229 229 229 / var(--tw-bg-opacity))}:is(.dark .period-tag){--tw-text-opacity: 1;color:rgb(229 229 229 / var(--tw-text-opacity))}:is(.dark .period-tag:hover){background-color:#ffffff1a}:is(.dark .period-tag:focus){background-color:#fff3}.period-tag.selected{--tw-bg-opacity: 1;background-color:rgb(229 229 229 / var(--tw-bg-opacity));font-weight:800;--tw-text-opacity: 1;color:rgb(38 38 38 / var(--tw-text-opacity))}:is(.dark .period-tag.selected){background-color:#fff3;--tw-text-opacity: 1;color:rgb(245 245 245 / var(--tw-text-opacity))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "ngmodule", type: AnalyticalCardModule }, { kind: "component", type: i3.AnalyticalCardComponent, selector: "ngm-analytical-card", inputs: ["title", "appearance", "dataSettings", "chartSettings", "chartOptions", "options", "slicers"], outputs: ["slicersChange", "slicersChanging", "chartClick", "chartHighlight", "chartContextMenu", "explain"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmIndicatorExplorerComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, CdkListboxModule, AnalyticalCardModule], selector: 'ngm-indicator-explorer', providers: [NgmIndicatorService], template: "@if (indicator(); as indicator) {\n  <div class=\"flex flex-col dark:text-text-primary\">\n    @for (dataSettings of analyticalCards(); track dataSettings.id) {\n      <ngm-analytical-card class=\"h-[300px]\"\n        [dataSettings]=\"dataSettings\"\n        [chartOptions]=\"chartOptions()\"\n        [chartSettings]=\"{theme: primaryTheme()}\"\n        [options]=\"{\n          realtimeLinked: true,\n          showSlicers: true\n        }\"\n        (slicersChanging)=\"onPeriodSlicerChange($event)\"\n        (explain)=\"onExplain($event)\"\n        >\n        <div class=\" flex-1 flex items-center md:gap-2 dark:text-text-primary\">\n          @for (p of PERIODS; track p.name) {\n            <span class=\"period-tag text-sm cursor-pointer inline-flex items-center font-semibold leading-sm uppercase px-2 py-1 rounded-lg\"\n              [ngClass]=\"{selected: p.name === periodName()}\"\n              (click)=\"togglePeriod(p.name)\"\n            >\n              {{p.name}}\n            </span>\n          }\n        </div>\n      </ngm-analytical-card>\n    }\n  </div>\n\n  @if (indicator.description) {\n    <div class=\"indicator-business mt-4 dark:text-text-primary\">\n      <div class=\"title text-base\">\n        {{ 'Ngm.Indicator.Description' | translate: {Default: 'Indicator Description'} }}\n      </div>\n      <div class=\"whitespace-pre-wrap text-sm text-text-secondary\">{{ indicator.description }}</div>\n    </div>\n  }\n}", styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background-color:var(--color-components-card-bg);padding:1rem}.period-tag{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}.period-tag:hover{--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity))}.period-tag:focus{--tw-bg-opacity: 1;background-color:rgb(229 229 229 / var(--tw-bg-opacity))}:is(.dark .period-tag){--tw-text-opacity: 1;color:rgb(229 229 229 / var(--tw-text-opacity))}:is(.dark .period-tag:hover){background-color:#ffffff1a}:is(.dark .period-tag:focus){background-color:#fff3}.period-tag.selected{--tw-bg-opacity: 1;background-color:rgb(229 229 229 / var(--tw-bg-opacity));font-weight:800;--tw-text-opacity: 1;color:rgb(38 38 38 / var(--tw-text-opacity))}:is(.dark .period-tag.selected){background-color:#fff3;--tw-text-opacity: 1;color:rgb(245 245 245 / var(--tw-text-opacity))}\n"] }]
        }], ctorParameters: () => [] });

class NgmSparkLineDirective {
    #elementRef;
    #injector;
    #translate;
    constructor() {
        this.#elementRef = inject(ElementRef);
        this.destroyRef = inject(DestroyRef);
        this.#injector = inject(Injector);
        this.#translate = inject(TranslateService);
        this.indicator = input.required();
        this.trend = input();
        this.trends = input();
        this.statisticalType = input(StatisticalType.CurrentPeriod);
        this.primaryTheme = input();
        this.config$ = computed(() => {
            const trends = this.trends();
            const measureFilter = this.statisticalType();
            let data = [];
            switch (measureFilter) {
                case StatisticalType.CurrentPeriod:
                    data = trends?.map((y) => y['CURRENT']) || [];
                    break;
                case StatisticalType.Accumulative:
                    data = trends?.map((y) => y['YTD']) || [];
                    break;
            }
            const color = this.#translate.currentLang === NgmLanguageEnum.SimplifiedChinese
                ? TrendReverseColor[Trend[this.trend()]]
                : TrendColor[Trend[this.trend()]];
            return {
                data,
                color
            };
        });
        afterNextRender(() => {
            const tinyArea = new TinyArea(this.#elementRef.nativeElement, {
                animation: false,
                autoFit: true,
                data: [],
                smooth: false,
                line: {
                    size: 2
                },
                tooltip: false
            });
            tinyArea.render();
            runInInjectionContext(this.#injector, () => {
                effect(() => {
                    const { data, color } = this.config$();
                    tinyArea.changeData(data);
                    tinyArea.update({
                        line: {
                            color: color
                        },
                        areaStyle: {
                            fill: `l(270) 0:${color}00 1:${color}${this.primaryTheme() === 'dark' ? '' : '70'}`
                        },
                        annotations: [
                            {
                                type: 'line',
                                start: ['min', 'mean'],
                                end: ['max', 'mean'],
                                // text: {
                                //   content: '平均值',
                                //   offsetY: -2,
                                //   style: {
                                //     textAlign: 'left',
                                //     fontSize: 10,
                                //     fill: 'rgba(44, 53, 66, 0.45)',
                                //     textBaseline: 'bottom',
                                //   },
                                // },
                                style: {
                                    lineWidth: 2,
                                    lineDash: [2, 2],
                                    stroke: color
                                }
                            }
                        ]
                    });
                });
            });
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmSparkLineDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: NgmSparkLineDirective, isStandalone: true, selector: "[ngmSparkLine]", inputs: { indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: true, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, trends: { classPropertyName: "trends", publicName: "trends", isSignal: true, isRequired: false, transformFunction: null }, statisticalType: { classPropertyName: "statisticalType", publicName: "statisticalType", isSignal: true, isRequired: false, transformFunction: null }, primaryTheme: { classPropertyName: "primaryTheme", publicName: "primaryTheme", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmSparkLineDirective, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[ngmSparkLine]'
                }]
        }], ctorParameters: () => [] });

class NgmIndicatorComponent {
    #translate;
    constructor() {
        this.statisticalType = StatisticalType.CurrentPeriod;
        this.TREND = Trend;
        this.TagEnum = IndicatorTagEnum;
        this.dataService = inject(NgmIndicatorService);
        this.#translate = inject(TranslateService);
        // Inputs
        this.dataSettings = input.required();
        this.indicatorCode = input.required();
        this.lookBack = input.required();
        this.primaryTheme = input();
        this.tagType = input(IndicatorTagEnum.MOM);
        this.timeGranularity = input(TimeGranularity.Day);
        // Outputs
        this.toggleTag = output();
        // States
        this.initied = toSignal(this.dataService.onAfterServiceInit().pipe(map(() => true), startWith$1(false)));
        this.loading = toSignal(this.dataService.loading$);
        this.indicator = computed(() => {
            const code = this.indicatorCode();
            if (code && this.initied()) {
                return this.dataService.getIndicator(code);
            }
            return null;
        });
        this.data = toSignal(this.dataService.selectResult());
        this.main = computed(() => this.data()?.data);
        this.trend = computed(() => this.data()?.trend);
        this.trends = computed(() => this.data()?.trends);
        this.error = computed(() => this.data()?.error);
        this.currentLang = toSignal(this.#translate.onLangChange.pipe(map((event) => event.lang), startWith$1(this.#translate.currentLang)));
        this.reverseSemanticColor = computed(() => this.currentLang() === NgmLanguageEnum.SimplifiedChinese);
        effect(() => {
            // console.log(this.indicator(), this.data())
        });
        effect(() => {
            if (this.dataSettings()) {
                this.dataService.dataSettings = this.dataSettings();
            }
        });
        effect(() => {
            if (this.timeGranularity()) {
                this.dataService.timeGranularity = this.timeGranularity();
            }
        });
        effect(() => {
            this.dataService.patchState({
                indicatorId: this.indicatorCode(),
                lookBack: this.lookBack()
            });
            if (this.initied()) {
                this.dataService.refresh();
            }
        }, { allowSignalWrites: true });
    }
    _toggleTag(event) {
        event.stopPropagation();
        event.preventDefault();
        this.toggleTag.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgmIndicatorComponent, isStandalone: true, selector: "ngm-indicator", inputs: { dataSettings: { classPropertyName: "dataSettings", publicName: "dataSettings", isSignal: true, isRequired: true, transformFunction: null }, indicatorCode: { classPropertyName: "indicatorCode", publicName: "indicatorCode", isSignal: true, isRequired: true, transformFunction: null }, lookBack: { classPropertyName: "lookBack", publicName: "lookBack", isSignal: true, isRequired: true, transformFunction: null }, primaryTheme: { classPropertyName: "primaryTheme", publicName: "primaryTheme", isSignal: true, isRequired: false, transformFunction: null }, tagType: { classPropertyName: "tagType", publicName: "tagType", isSignal: true, isRequired: false, transformFunction: null }, timeGranularity: { classPropertyName: "timeGranularity", publicName: "timeGranularity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleTag: "toggleTag" }, host: { properties: { "class.reverse-semantic-color": "reverseSemanticColor()" } }, providers: [NgmIndicatorService], ngImport: i0, template: "@if (indicator(); as indicator) {\n  <div class=\"pac-item-meta flex-1 flex flex-col overflow-hidden\"\n    [class.text-gray-500]=\"loading()\"\n  >\n    <div class=\"pac-item-meta-title text-lg flex justify-start items-center overflow-hidden\">\n      <span class=\"flex-1 font-semibold whitespace-nowrap text-ellipsis overflow-hidden\">{{ indicator.code }}</span>\n    </div>\n    <div class=\"pac-item-meta-description text-base\">\n      <span>{{ indicator.name }}</span>\n    </div>\n  </div>\n\n  @if (error()) {\n    <div class=\"text-xs w-28 h-12 px-2 whitespace-normal line-clamp-3\" [title]=\"error()\">\n      {{error()}}\n    </div>\n  } @else {\n    <div class=\"w-28 h-12 px-2\" ngmSparkLine [indicator]=\"indicator\" [statisticalType]=\"statisticalType\"\n      [trend]=\"trend()\"\n      [trends]=\"trends()\"\n    ></div>\n  }\n\n  <div class=\"w-24 flex flex-col justify-around items-end z-10\">\n    <div>\n      @if (indicator.unit === '%') {\n        <span>\n          {{ main()?.CURRENT * 100 | number:'0.0-2' | isNil:'-' }}\n        </span>\n      } @else {\n        <span>\n          {{ main()?.CURRENT | number:'0.0-2' | isNil:'-' }}\n        </span>\n      }\n    </div>\n\n    <div (click)=\"_toggleTag($event)\" class=\"ngm-indicator__tag h-5 text-sm bg-gray-500 bg-opacity-25\"\n      [ngClass]=\"{'Trend-Up': trend() === TREND.Up, 'Trend-Down': trend() === TREND.Down}\"\n    >\n      @switch (tagType()) {\n        @case(TagEnum.UNIT) {\n          <span>\n            {{ indicator.unit }}\n          </span>\n        }\n        @case(TagEnum.MOM) {\n          <span>\n            {{ main()?.MOM | percent:'0.2-2' }}\n          </span>\n        }\n        @case(TagEnum.YOY) {\n          <span>\n            {{ main()?.YOY | percent:'0.2-2' }}\n          </span>\n        }\n      }\n    </div>\n\n  </div>\n}", styles: [":host{display:flex;justify-content:flex-start;padding-left:1rem;padding-right:1rem;color:var(--color-text-primary)}.ngm-indicator__tag{width:60px;text-align:right;border-radius:5px;padding:0 5px;cursor:pointer}.ngm-indicator__tag.Trend-Up{background-color:#31c75a;color:#fff}.ngm-indicator__tag.Trend-Down{background-color:#fe3c2e;color:#fff}.Trend-Up{color:#31c75a}.Trend-Down{color:#fe3c2e}:host.reverse-semantic-color .Trend-Up{color:#fe3c2e}:host.reverse-semantic-color .Trend-Down{color:#31c75a}:host.reverse-semantic-color .ngm-indicator__tag.Trend-Up{background-color:#fe3c2e;--tw-text-opacity: 1;color:rgb(245 245 245 / var(--tw-text-opacity))}:host.reverse-semantic-color .ngm-indicator__tag.Trend-Down{background-color:#31c75a;--tw-text-opacity: 1;color:rgb(245 245 245 / var(--tw-text-opacity))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.PercentPipe, name: "percent" }, { kind: "directive", type: NgmSparkLineDirective, selector: "[ngmSparkLine]", inputs: ["indicator", "trend", "trends", "statisticalType", "primaryTheme"] }, { kind: "pipe", type: NgmIsNilPipe, name: "isNil" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmIndicatorComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngm-indicator', providers: [NgmIndicatorService], imports: [CommonModule, NgmSparkLineDirective, NgmIsNilPipe], host: {
                        '[class.reverse-semantic-color]': 'reverseSemanticColor()'
                    }, template: "@if (indicator(); as indicator) {\n  <div class=\"pac-item-meta flex-1 flex flex-col overflow-hidden\"\n    [class.text-gray-500]=\"loading()\"\n  >\n    <div class=\"pac-item-meta-title text-lg flex justify-start items-center overflow-hidden\">\n      <span class=\"flex-1 font-semibold whitespace-nowrap text-ellipsis overflow-hidden\">{{ indicator.code }}</span>\n    </div>\n    <div class=\"pac-item-meta-description text-base\">\n      <span>{{ indicator.name }}</span>\n    </div>\n  </div>\n\n  @if (error()) {\n    <div class=\"text-xs w-28 h-12 px-2 whitespace-normal line-clamp-3\" [title]=\"error()\">\n      {{error()}}\n    </div>\n  } @else {\n    <div class=\"w-28 h-12 px-2\" ngmSparkLine [indicator]=\"indicator\" [statisticalType]=\"statisticalType\"\n      [trend]=\"trend()\"\n      [trends]=\"trends()\"\n    ></div>\n  }\n\n  <div class=\"w-24 flex flex-col justify-around items-end z-10\">\n    <div>\n      @if (indicator.unit === '%') {\n        <span>\n          {{ main()?.CURRENT * 100 | number:'0.0-2' | isNil:'-' }}\n        </span>\n      } @else {\n        <span>\n          {{ main()?.CURRENT | number:'0.0-2' | isNil:'-' }}\n        </span>\n      }\n    </div>\n\n    <div (click)=\"_toggleTag($event)\" class=\"ngm-indicator__tag h-5 text-sm bg-gray-500 bg-opacity-25\"\n      [ngClass]=\"{'Trend-Up': trend() === TREND.Up, 'Trend-Down': trend() === TREND.Down}\"\n    >\n      @switch (tagType()) {\n        @case(TagEnum.UNIT) {\n          <span>\n            {{ indicator.unit }}\n          </span>\n        }\n        @case(TagEnum.MOM) {\n          <span>\n            {{ main()?.MOM | percent:'0.2-2' }}\n          </span>\n        }\n        @case(TagEnum.YOY) {\n          <span>\n            {{ main()?.YOY | percent:'0.2-2' }}\n          </span>\n        }\n      }\n    </div>\n\n  </div>\n}", styles: [":host{display:flex;justify-content:flex-start;padding-left:1rem;padding-right:1rem;color:var(--color-text-primary)}.ngm-indicator__tag{width:60px;text-align:right;border-radius:5px;padding:0 5px;cursor:pointer}.ngm-indicator__tag.Trend-Up{background-color:#31c75a;color:#fff}.ngm-indicator__tag.Trend-Down{background-color:#fe3c2e;color:#fff}.Trend-Up{color:#31c75a}.Trend-Down{color:#fe3c2e}:host.reverse-semantic-color .Trend-Up{color:#fe3c2e}:host.reverse-semantic-color .Trend-Down{color:#31c75a}:host.reverse-semantic-color .ngm-indicator__tag.Trend-Up{background-color:#fe3c2e;--tw-text-opacity: 1;color:rgb(245 245 245 / var(--tw-text-opacity))}:host.reverse-semantic-color .ngm-indicator__tag.Trend-Down{background-color:#31c75a;--tw-text-opacity: 1;color:rgb(245 245 245 / var(--tw-text-opacity))}\n"] }]
        }], ctorParameters: () => [] });

/**
 * Generated bundle index. Do not edit.
 */

export { NgmIndicatorComponent, NgmIndicatorExplorerComponent, StatisticalType, Trend, TrendColor, TrendReverseColor };
//# sourceMappingURL=metad-ocap-angular-indicator.mjs.map
