import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
import { arc } from 'd3';
import * as i0 from "@angular/core";
function RadialBarChartComponent__svg_g_2__svg_text_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵnamespaceSVG();
    i0.ɵɵelementStart(0, "text", 9);
    i0.ɵɵtext(1);
    i0.ɵɵpipe(2, "translate");
    i0.ɵɵpipe(3, "aclFieldNotAvailable");
    i0.ɵɵpipe(4, "aclNumericalLimit");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const label_r7 = ctx.$implicit;
    const labelIndex_r8 = ctx.index;
    const arc_r4 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵproperty("indicator", labelIndex_r8 || (arc_r4 == null ? null : arc_r4.hideIndicator) ? 0 : label_r7);
    i0.ɵɵattribute("dx", arc_r4.labelCoord.dx - 55 * labelIndex_r8)("dy", arc_r4.labelCoord.dy);
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate2(" ", labelIndex_r8 ? i0.ɵɵpipeBind1(2, 5, label_r7) : i0.ɵɵpipeBind1(3, 7, i0.ɵɵpipeBind1(4, 9, +label_r7)), "", labelIndex_r8 ? "" : "%", " ");
} }
const _c0 = function (a0, a1) { return { index: a0, arc: a1 }; };
function RadialBarChartComponent__svg_g_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵnamespaceSVG();
    i0.ɵɵelementStart(0, "g");
    i0.ɵɵelement(1, "path", 6)(2, "path", 7);
    i0.ɵɵtemplate(3, RadialBarChartComponent__svg_g_2__svg_text_3_Template, 5, 11, "text", 8);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const arc_r4 = ctx.$implicit;
    const i_r5 = ctx.index;
    i0.ɵɵnextContext();
    const _r2 = i0.ɵɵreference(13);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("auiTooltip", _r2)("auiTooltipContext", i0.ɵɵpureFunction2(12, _c0, i_r5, arc_r4));
    i0.ɵɵattribute("d", arc_r4.backgroundArcPath);
    i0.ɵɵadvance(1);
    i0.ɵɵstyleProp("color", arc_r4.color)("opacity", arc_r4.fractionArcOpacity);
    i0.ɵɵproperty("auiTooltip", _r2)("auiTooltipContext", i0.ɵɵpureFunction2(15, _c0, i_r5, arc_r4));
    i0.ɵɵattribute("fill", arc_r4.color)("d", arc_r4.fractionArcPath);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngForOf", arc_r4.labels);
} }
function RadialBarChartComponent_div_11_div_1_Template(rf, ctx) { if (rf & 1) {
    const _r13 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 13);
    i0.ɵɵelement(1, "aui-icon", 14);
    i0.ɵɵtext(2);
    i0.ɵɵpipe(3, "translate");
    i0.ɵɵelementStart(4, "button", 15);
    i0.ɵɵlistener("click", function RadialBarChartComponent_div_11_div_1_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r12.onRefresh()); });
    i0.ɵɵtext(5);
    i0.ɵɵpipe(6, "translate");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, "failed_load_please"), " ");
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 4, "refresh"), " ");
} }
function RadialBarChartComponent_div_11_div_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 16);
    i0.ɵɵelement(1, "aui-icon", 17);
    i0.ɵɵtext(2);
    i0.ɵɵpipe(3, "translate");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 1, "loading"), " ");
} }
function RadialBarChartComponent_div_11_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵnamespaceSVG();
    i0.ɵɵnamespaceHTML();
    i0.ɵɵelementStart(0, "div", 10);
    i0.ɵɵtemplate(1, RadialBarChartComponent_div_11_div_1_Template, 7, 6, "div", 11);
    i0.ɵɵtemplate(2, RadialBarChartComponent_div_11_div_2_Template, 4, 3, "div", 12);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r1.failed && !ctx_r1.loading);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r1.loading);
} }
function RadialBarChartComponent_ng_template_12_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵnamespaceSVG();
    i0.ɵɵnamespaceHTML();
    i0.ɵɵelement(0, "i", 18);
    i0.ɵɵtext(1);
    i0.ɵɵpipe(2, "translate");
    i0.ɵɵpipe(3, "aclFieldNotAvailable");
    i0.ɵɵpipe(4, "aclNumericalLimit");
    i0.ɵɵpipe(5, "aclFieldNotAvailable");
    i0.ɵɵpipe(6, "aclNumericalLimit");
    i0.ɵɵpipe(7, "translate");
} if (rf & 2) {
    const arc_r15 = ctx.arc;
    const ctx_r3 = i0.ɵɵnextContext();
    i0.ɵɵstyleProp("background", arc_r15.color);
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate4(" ", i0.ɵɵpipeBind1(2, 6, arc_r15.labels[1]), ": ", i0.ɵɵpipeBind1(3, 8, i0.ɵɵpipeBind1(4, 10, +arc_r15.labels[0])), "% (", i0.ɵɵpipeBind1(5, 12, i0.ɵɵpipeBind1(6, 14, +arc_r15.value)), " ", i0.ɵɵpipeBind1(7, 16, ctx_r3.unit), ")\n");
} }
const MAX_VALUE = 999999;
const DECIMAL_MAX_VALUE = 999.99;
export class RadialBarChartComponent {
    constructor() {
        this.refresh = new EventEmitter();
        this.size = 160;
        this.pieSize = 10;
        this.margin = 5;
        this.innerShrink = 15;
        this.maxValue = MAX_VALUE;
        this.decimalMaxValue = DECIMAL_MAX_VALUE;
        this.getArc = (level, fraction, label, opacity, value, hideIndicator = false, color = this.color) => {
            fraction = fraction || 0;
            return {
                backgroundArcPath: this.getBackgroundArcPath(level),
                fractionArcPath: this.getFractionArcPath(fraction || 0, level),
                labels: [fraction ? '' + fraction : null, label],
                labelCoord: this.getTextCoord(level),
                fractionArcOpacity: opacity,
                fraction,
                color,
                value,
                hideIndicator,
            };
        };
    }
    ngOnChanges() {
        this.arcs = this.getArcs();
    }
    get transform() {
        return `translate(${(this.size + 90) / 2}, ${this.size / 2})`;
    }
    get outerRadius() {
        return this.size / 2 - this.margin;
    }
    get innerRadius() {
        return this.outerRadius - this.pieSize;
    }
    arcTrackByFn(index) {
        return index;
    }
    getArcs() {
        let arcs = [];
        const limitsArc = this.getArc(0, this.requestsFraction, 'request_rate', 1, this.request);
        const requestsArc = this.getArc(1, this.limitsFraction, 'usage_rate', 0.5, this.usage);
        arcs = [requestsArc, limitsArc];
        if (this.data) {
            arcs = this.handelData();
        }
        return arcs;
    }
    handelData() {
        return this.data.map((item, index) => this.getArc(index, item.fraction, item.title, item.color ? 1 : +(1 / (index + 1)).toFixed(2), item.value, item.hideIndicator, item.color));
    }
    getBackgroundArcPath(level = 0) {
        const shrink = level * this.innerShrink;
        return arc().cornerRadius(20)({
            startAngle: 0,
            endAngle: Math.PI * 1.5,
            innerRadius: this.innerRadius - shrink,
            outerRadius: this.outerRadius - shrink,
        });
    }
    onRefresh() {
        this.refresh.next(null);
    }
    getFractionArcPath(fraction, level = 0) {
        const shrink = level * this.innerShrink;
        fraction = Math.min(100, fraction);
        return arc().cornerRadius(20)({
            startAngle: 0,
            endAngle: (Math.PI * 1.5 * fraction) / 100,
            innerRadius: this.innerRadius - shrink,
            outerRadius: this.outerRadius - shrink,
        });
    }
    getTextCoord(level = 0) {
        const shrink = level * this.innerShrink;
        return {
            dx: -4,
            dy: -(this.outerRadius - shrink - 5),
        };
    }
}
RadialBarChartComponent.ɵfac = function RadialBarChartComponent_Factory(t) { return new (t || RadialBarChartComponent)(); };
RadialBarChartComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RadialBarChartComponent, selectors: [["acl-radial-bar-chart"]], inputs: { limitsFraction: "limitsFraction", requestsFraction: "requestsFraction", capacity: "capacity", data: "data", unit: "unit", color: "color", usage: "usage", request: "request", loading: "loading", failed: "failed" }, outputs: { refresh: "refresh" }, features: [i0.ɵɵNgOnChangesFeature], decls: 14, vars: 16, consts: [[4, "ngFor", "ngForOf", "ngForTrackBy"], ["dy", "-5", 1, "center-text"], ["text-anchor", "middle", 1, "center-text__main"], ["text-anchor", "middle", "dy", "20", 1, "center-text__sub"], ["class", "status-container", 4, "ngIf"], ["tooltipTemplate", ""], [1, "full-arc-path", 3, "auiTooltip", "auiTooltipContext"], ["nodeName", "", 1, "fraction-arc-path", 3, "auiTooltip", "auiTooltipContext"], ["class", "fraction-label-text", "text-anchor", "end", "aclIndicatorColor", "", 3, "indicator", 4, "ngFor", "ngForOf"], ["text-anchor", "end", "aclIndicatorColor", "", 1, "fraction-label-text", 3, "indicator"], [1, "status-container"], ["class", "status failed", 4, "ngIf"], ["class", "status loading", 4, "ngIf"], [1, "status", "failed"], ["icon", "exclamation_triangle_s", "background", "triangle"], ["aui-button", "text", 3, "click"], [1, "status", "loading"], ["icon", "spinner"], [1, "dot"]], template: function RadialBarChartComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵnamespaceSVG();
        i0.ɵɵelementStart(0, "svg")(1, "g");
        i0.ɵɵtemplate(2, RadialBarChartComponent__svg_g_2_Template, 4, 18, "g", 0);
        i0.ɵɵelementStart(3, "g", 1)(4, "text", 2);
        i0.ɵɵtext(5);
        i0.ɵɵpipe(6, "aclFieldNotAvailable");
        i0.ɵɵpipe(7, "aclNumericalLimit");
        i0.ɵɵelementEnd();
        i0.ɵɵelementStart(8, "text", 3);
        i0.ɵɵtext(9);
        i0.ɵɵpipe(10, "translate");
        i0.ɵɵelementEnd()()()();
        i0.ɵɵtemplate(11, RadialBarChartComponent_div_11_Template, 3, 2, "div", 4);
        i0.ɵɵtemplate(12, RadialBarChartComponent_ng_template_12_Template, 8, 18, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
    } if (rf & 2) {
        i0.ɵɵattribute("width", ctx.size + 90)("height", ctx.size);
        i0.ɵɵadvance(1);
        i0.ɵɵattribute("transform", ctx.transform);
        i0.ɵɵadvance(1);
        i0.ɵɵproperty("ngForOf", ctx.arcs)("ngForTrackBy", ctx.arcTrackByFn);
        i0.ɵɵadvance(2);
        i0.ɵɵstyleProp("font-size", ctx.capacity > 9999 || (ctx.arcs == null ? null : ctx.arcs.length) > 2 ? "16px" : "24px");
        i0.ɵɵadvance(1);
        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 10, i0.ɵɵpipeBind1(7, 12, +ctx.capacity)), " ");
        i0.ɵɵadvance(4);
        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(10, 14, "total_number"), " ");
        i0.ɵɵadvance(2);
        i0.ɵɵproperty("ngIf", ctx.loading || ctx.failed);
    } }, styles: ["[_nghost-%COMP%]{position:relative}text[_ngcontent-%COMP%]{dominant-baseline:middle}.center-text__main[_ngcontent-%COMP%]{font-size:24px;font-weight:500;fill:rgb(var(--aui-color-main-text))}.center-text__sub[_ngcontent-%COMP%]{font-size:12px;fill:rgb(var(--aui-color-secondary-text))}.full-arc-path[_ngcontent-%COMP%]{fill:rgb(var(--aui-color-n-8))}.fraction-arc-path[_ngcontent-%COMP%]{cursor:pointer}.fraction-arc-path[_ngcontent-%COMP%]:hover{stroke:currentcolor;stroke-width:2px}.fraction-label-text[_ngcontent-%COMP%]{font-size:12px;fill:rgb(var(--aui-color-secondary-text))}.total-text[_ngcontent-%COMP%]{font-size:20px;font-weight:500}.dot[_ngcontent-%COMP%]{width:6px;height:6px;display:inline-block;border-radius:50%;margin-right:5px}.status-container[_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}"], changeDetection: 0 });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RadialBarChartComponent, [{
        type: Component,
        args: [{ selector: 'acl-radial-bar-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  [attr.width]=\"size + 90\"\n  [attr.height]=\"size\"\n>\n  <svg:g [attr.transform]=\"transform\">\n    <svg:g *ngFor=\"let arc of arcs; trackBy: arcTrackByFn; index as i\">\n      <svg:path\n        class=\"full-arc-path\"\n        [auiTooltip]=\"tooltipTemplate\"\n        [auiTooltipContext]=\"{ index: i, arc: arc }\"\n        [attr.d]=\"arc.backgroundArcPath\"\n      ></svg:path>\n      <svg:path\n        [style.color]=\"arc.color\"\n        [auiTooltip]=\"tooltipTemplate\"\n        [auiTooltipContext]=\"{ index: i, arc: arc }\"\n        class=\"fraction-arc-path\"\n        [attr.fill]=\"arc.color\"\n        [style.opacity]=\"arc.fractionArcOpacity\"\n        [attr.d]=\"arc.fractionArcPath\"\n        nodeName\n      ></svg:path>\n      <svg:text\n        *ngFor=\"let label of arc.labels; index as labelIndex\"\n        class=\"fraction-label-text\"\n        [attr.dx]=\"arc.labelCoord.dx - 55 * labelIndex\"\n        [attr.dy]=\"arc.labelCoord.dy\"\n        text-anchor=\"end\"\n        aclIndicatorColor\n        [indicator]=\"labelIndex || arc?.hideIndicator ? 0 : label\"\n      >\n        {{\n          labelIndex\n            ? (label | translate)\n            : (+label | aclNumericalLimit | aclFieldNotAvailable)\n        }}{{ labelIndex ? '' : '%' }}\n      </svg:text>\n    </svg:g>\n\n    <svg:g\n      class=\"center-text\"\n      dy=\"-5\"\n    >\n      <svg:text\n        [style.font-size]=\"\n          capacity > 9999 || arcs?.length > 2 ? '16px' : '24px'\n        \"\n        text-anchor=\"middle\"\n        class=\"center-text__main\"\n      >\n        {{ +capacity | aclNumericalLimit | aclFieldNotAvailable }}\n      </svg:text>\n      <svg:text\n        text-anchor=\"middle\"\n        dy=\"20\"\n        class=\"center-text__sub\"\n      >\n        {{ 'total_number' | translate }}\n      </svg:text>\n    </svg:g>\n  </svg:g>\n</svg>\n\n<div\n  class=\"status-container\"\n  *ngIf=\"loading || failed\"\n>\n  <div\n    *ngIf=\"failed && !loading\"\n    class=\"status failed\"\n  >\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)=\"onRefresh()\"\n    >\n      {{ 'refresh' | translate }}\n    </button>\n  </div>\n  <div\n    *ngIf=\"loading\"\n    class=\"status loading\"\n  >\n    <aui-icon icon=\"spinner\"></aui-icon> {{ 'loading' | translate }}\n  </div>\n</div>\n\n<ng-template\n  #tooltipTemplate\n  let-index=\"index\"\n  let-arc=\"arc\"\n>\n  <i\n    class=\"dot\"\n    [style.background]=\"arc.color\"\n  ></i>\n  {{ arc.labels[1] | translate }}:\n  {{ +arc.labels[0] | aclNumericalLimit | aclFieldNotAvailable }}% ({{\n    +arc.value | aclNumericalLimit | aclFieldNotAvailable\n  }}\n  {{ unit | translate }})\n</ng-template>\n", styles: [":host{position:relative}text{dominant-baseline:middle}.center-text__main{font-size:24px;font-weight:500;fill:rgb(var(--aui-color-main-text))}.center-text__sub{font-size:12px;fill:rgb(var(--aui-color-secondary-text))}.full-arc-path{fill:rgb(var(--aui-color-n-8))}.fraction-arc-path{cursor:pointer}.fraction-arc-path:hover{stroke:currentcolor;stroke-width:2px}.fraction-label-text{font-size:12px;fill:rgb(var(--aui-color-secondary-text))}.total-text{font-size:20px;font-weight:500}.dot{width:6px;height:6px;display:inline-block;border-radius:50%;margin-right:5px}.status-container{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}\n"] }]
    }], null, { limitsFraction: [{
            type: Input
        }], requestsFraction: [{
            type: Input
        }], capacity: [{
            type: Input
        }], data: [{
            type: Input
        }], unit: [{
            type: Input
        }], color: [{
            type: Input
        }], usage: [{
            type: Input
        }], request: [{
            type: Input
        }], loading: [{
            type: Input
        }], failed: [{
            type: Input
        }], refresh: [{
            type: Output
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 