import { __decorate, __metadata } from "tslib";
import { rgbColor } from '@alauda/ui';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
import { combineLatest, Observable, map } from 'rxjs';
import { ObservableInput } from '../../core/public-api';
import * as i0 from "@angular/core";
function DonutStatusChartComponent_ng_template_6_span_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 11);
    i0.ɵɵtext(1);
    i0.ɵɵpipe(2, "translate");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r3.unit || "unit_ge"));
} }
function DonutStatusChartComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 6)(1, "div", 7)(2, "span", 8);
    i0.ɵɵtext(3);
    i0.ɵɵpipe(4, "aclFieldNotAvailable");
    i0.ɵɵpipe(5, "number");
    i0.ɵɵpipe(6, "async");
    i0.ɵɵpipe(7, "async");
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(8, DonutStatusChartComponent_ng_template_6_span_8_Template, 3, 3, "span", 9);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(9, "div", 10);
    i0.ɵɵtext(10);
    i0.ɵɵpipe(11, "translate");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 3, ctx_r1.decimal ? i0.ɵɵpipeBind2(5, 5, i0.ɵɵpipeBind1(6, 8, ctx_r1.total$), "1.2-2") : i0.ɵɵpipeBind1(7, 10, ctx_r1.total$)));
    i0.ɵɵadvance(5);
    i0.ɵɵproperty("ngIf", !ctx_r1.hideUnit);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 12, ctx_r1.guideLabel || "total_num"), " ");
} }
const _c0 = function (a0) { return { backgroundColor: a0 }; };
function DonutStatusChartComponent_li_9_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "li");
    i0.ɵɵelement(1, "i", 12);
    i0.ɵɵpipe(2, "pure");
    i0.ɵɵelementStart(3, "span", 13);
    i0.ɵɵtext(4);
    i0.ɵɵpipe(5, "translate");
    i0.ɵɵelementEnd();
    i0.ɵɵtext(6);
    i0.ɵɵpipe(7, "aclFieldNotAvailable");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r4 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c0, i0.ɵɵpipeBind2(2, 3, item_r4, ctx_r2.color)));
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 6, item_r4.name));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 8, item_r4.value), " ");
} }
const EMPTY_COLOR = rgbColor('n-6');
export const CHART_COLORS = {
    running: rgbColor('green'),
    partial_running: rgbColor('yellow'),
    pending: rgbColor('blue'),
    failed: rgbColor('red'),
    fail_or_abnormal: rgbColor('red'),
    stopped: rgbColor('n-4'),
    empty: rgbColor('n-6'),
    error: rgbColor('red'),
    no_workload: EMPTY_COLOR,
    nil: 'rgba(242, 242, 242, 0.85)',
    completed: '#1ba4b3',
    done: '#1ba4b3',
};
export class DonutStatusChartComponent {
    constructor() {
        this.layout = 'row';
        this.size = 145;
        this.decimal = false;
        this.width = 10;
        this.tooltipHideTitle = true;
        this.tooltipTranslation = true;
        this.refresh = new EventEmitter();
        this.status$ = combineLatest([this.loading$, this.failed$]).pipe(map(([loading, failed]) => ({ loading, failed })));
        this.pieData$ = this.data$.pipe(map(data => data?.map(d => ({
            ...d,
            color: d.color ||
                CHART_COLORS[(d.type || d.name)],
        }))));
        this.total$ = this.data$.pipe(map(data => data?.reduce((sum, { value }) => sum + value, 0)));
        this.CHART_COLORS = CHART_COLORS;
    }
    get layoutColumn() {
        return this.layout === 'column';
    }
    color(item) {
        return (item.color ||
            CHART_COLORS[(item.type || item.name)]);
    }
}
DonutStatusChartComponent.ɵfac = function DonutStatusChartComponent_Factory(t) { return new (t || DonutStatusChartComponent)(); };
DonutStatusChartComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DonutStatusChartComponent, selectors: [["acl-donut-status-chart"]], inputs: { data: "data", loading: "loading", failed: "failed", pieLabelText: "pieLabelText", layout: "layout", size: "size", unit: "unit", hideUnit: "hideUnit", decimal: "decimal", width: "width", guideLabel: "guideLabel", tooltipTrigger: "tooltipTrigger", tooltipHideTitle: "tooltipHideTitle", tooltipTranslation: "tooltipTranslation" }, outputs: { refresh: "refresh" }, decls: 11, vars: 22, consts: [[1, "dount"], [1, "dount_pie"], ["chartType", "pie", 3, "chartStatus", "series", "pieLabelText", "hideHeader", "pieOuterRadius", "pieInnerDisc", "tooltipTrigger", "tooltipHideTitle", "tooltipTranslation", "refreshEvent"], ["totalTemplate", ""], [1, "labels"], [4, "ngFor", "ngForOf"], [1, "guide"], [1, "guide_value"], [1, "guide_value_text"], ["class", "guide_unit", 4, "ngIf"], [1, "guide_label"], [1, "guide_unit"], [3, "ngStyle"], [1, "label"]], template: function DonutStatusChartComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "acl-view-chart", 2);
        i0.ɵɵlistener("refreshEvent", function DonutStatusChartComponent_Template_acl_view_chart_refreshEvent_2_listener() { return ctx.refresh.next(null); });
        i0.ɵɵpipe(3, "async");
        i0.ɵɵpipe(4, "async");
        i0.ɵɵpipe(5, "async");
        i0.ɵɵelementEnd()();
        i0.ɵɵtemplate(6, DonutStatusChartComponent_ng_template_6_Template, 12, 14, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
        i0.ɵɵelementStart(8, "ul", 4);
        i0.ɵɵtemplate(9, DonutStatusChartComponent_li_9_Template, 8, 12, "li", 5);
        i0.ɵɵpipe(10, "async");
        i0.ɵɵelementEnd()();
    } if (rf & 2) {
        const _r0 = i0.ɵɵreference(7);
        i0.ɵɵclassProp("dount_column", ctx.layoutColumn);
        i0.ɵɵadvance(1);
        i0.ɵɵstyleProp("width", ctx.size + 10 + "px");
        i0.ɵɵadvance(1);
        i0.ɵɵproperty("chartStatus", i0.ɵɵpipeBind1(3, 14, ctx.status$))("series", i0.ɵɵpipeBind1(4, 16, ctx.pieData$))("pieLabelText", i0.ɵɵpipeBind1(5, 18, ctx.status$).loading ? "" : ctx.pieLabelText || _r0)("hideHeader", true)("pieOuterRadius", ctx.size / 2)("pieInnerDisc", true)("tooltipTrigger", ctx.tooltipTrigger)("tooltipHideTitle", ctx.tooltipHideTitle)("tooltipTranslation", ctx.tooltipTranslation);
        i0.ɵɵadvance(7);
        i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(10, 20, ctx.data$));
    } }, styles: [".dount[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;flex-direction:row;width:100%;height:100%}.dount_pie[_ngcontent-%COMP%]{height:100%}.dount_column[_ngcontent-%COMP%]{flex-direction:column}.dount_column[_ngcontent-%COMP%]   .labels[_ngcontent-%COMP%]{flex-flow:row wrap;margin-top:45px}.dount_column[_ngcontent-%COMP%]   .labels[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{flex:0 0 25%}.dount_column[_ngcontent-%COMP%]   .labels[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:nth-child(odd){margin-right:65px}.labels[_ngcontent-%COMP%]{display:flex;flex-direction:column;justify-content:center;margin-left:32px;font-size:12px;color:use-text-color(secondary)}.labels[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{margin:2px 0;display:flex;align-items:center}.labels[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{flex:1;margin-right:20px}.labels[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{display:inline-flex;width:6px;height:6px;border-radius:50%;margin-right:4px}.guide[_ngcontent-%COMP%]{display:flex;flex-direction:column;align-items:center}.guide_value[_ngcontent-%COMP%]{color:use-rgb(n-1);display:flex;align-items:flex-end}.guide_value_text[_ngcontent-%COMP%]{font-size:38px;text-align:center;line-height:40px}.guide_unit[_ngcontent-%COMP%]{font-size:14px}.guide_label[_ngcontent-%COMP%]{font-size:14px;color:use-rgb(n-2)}.center-text__main[_ngcontent-%COMP%]{font-size:48px;font-weight:500;fill:use-text-color(main)}.center-text__sub[_ngcontent-%COMP%]{font-size:14px;fill:use-text-color(secondary)}"], changeDetection: 0 });
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], DonutStatusChartComponent.prototype, "data$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], DonutStatusChartComponent.prototype, "loading$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], DonutStatusChartComponent.prototype, "failed$", void 0);
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DonutStatusChartComponent, [{
        type: Component,
        args: [{ selector: 'acl-donut-status-chart', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"dount\"\n  [class.dount_column]=\"layoutColumn\"\n>\n  <div\n    class=\"dount_pie\"\n    [style.width]=\"size + 10 + 'px'\"\n  >\n    <acl-view-chart\n      chartType=\"pie\"\n      [chartStatus]=\"status$ | async\"\n      [series]=\"pieData$ | async\"\n      [pieLabelText]=\"\n        (status$ | async).loading ? '' : pieLabelText || totalTemplate\n      \"\n      [hideHeader]=\"true\"\n      [pieOuterRadius]=\"size / 2\"\n      [pieInnerDisc]=\"true\"\n      [tooltipTrigger]=\"tooltipTrigger\"\n      [tooltipHideTitle]=\"tooltipHideTitle\"\n      [tooltipTranslation]=\"tooltipTranslation\"\n      (refreshEvent)=\"refresh.next(null)\"\n    >\n    </acl-view-chart>\n  </div>\n\n  <ng-template #totalTemplate>\n    <div class=\"guide\">\n      <div class=\"guide_value\">\n        <span class=\"guide_value_text\">{{\n          (decimal ? (total$ | async | number: '1.2-2') : (total$ | async))\n            | aclFieldNotAvailable\n        }}</span>\n        <span\n          *ngIf=\"!hideUnit\"\n          class=\"guide_unit\"\n          >{{ unit || 'unit_ge' | translate }}</span\n        >\n      </div>\n      <div class=\"guide_label\">\n        {{ guideLabel || 'total_num' | translate }}\n      </div>\n    </div>\n  </ng-template>\n\n  <ul class=\"labels\">\n    <li *ngFor=\"let item of data$ | async\">\n      <i [ngStyle]=\"{ backgroundColor: item | pure: color }\"></i>\n      <span class=\"label\">{{ item.name | translate }}</span>\n      {{ item.value | aclFieldNotAvailable }}\n    </li>\n  </ul>\n</div>\n", styles: [".dount{display:flex;justify-content:center;align-items:center;flex-direction:row;width:100%;height:100%}.dount_pie{height:100%}.dount_column{flex-direction:column}.dount_column .labels{flex-flow:row wrap;margin-top:45px}.dount_column .labels li{flex:0 0 25%}.dount_column .labels li:nth-child(odd){margin-right:65px}.labels{display:flex;flex-direction:column;justify-content:center;margin-left:32px;font-size:12px;color:use-text-color(secondary)}.labels li{margin:2px 0;display:flex;align-items:center}.labels .label{flex:1;margin-right:20px}.labels i{display:inline-flex;width:6px;height:6px;border-radius:50%;margin-right:4px}.guide{display:flex;flex-direction:column;align-items:center}.guide_value{color:use-rgb(n-1);display:flex;align-items:flex-end}.guide_value_text{font-size:38px;text-align:center;line-height:40px}.guide_unit{font-size:14px}.guide_label{font-size:14px;color:use-rgb(n-2)}.center-text__main{font-size:48px;font-weight:500;fill:use-text-color(main)}.center-text__sub{font-size:14px;fill:use-text-color(secondary)}\n"] }]
    }], null, { data: [{
            type: Input
        }], data$: [], loading: [{
            type: Input
        }], loading$: [], failed: [{
            type: Input
        }], pieLabelText: [{
            type: Input
        }], failed$: [], layout: [{
            type: Input
        }], size: [{
            type: Input
        }], unit: [{
            type: Input
        }], hideUnit: [{
            type: Input
        }], decimal: [{
            type: Input
        }], width: [{
            type: Input
        }], guideLabel: [{
            type: Input
        }], tooltipTrigger: [{
            type: Input
        }], tooltipHideTitle: [{
            type: Input
        }], tooltipTranslation: [{
            type: Input
        }], refresh: [{
            type: Output
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 