@bizy/core 21.6.0 → 21.7.1

package/fesm2022/bizy-core.mjs

@@ -11317,11 +11317,11 @@ class BizyCardComponent {
     }
     getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyCardComponent, isStandalone: true, selector: "bizy-card", inputs: { id: "id", disabled: "disabled", selected: "selected", customClass: "customClass" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<button \n    type=\"button\"\n    (click)=\"_onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\"\n    class=\"bizy-card {{customClass}}\"\n    [ngClass]=\"{'bizy-card--disabled': disabled}\">\n\n    <span class=\"bizy-card__header\">\n\n        <span class=\"bizy-card__header__start bizy-card__slot\">\n            <ng-content select=\"[slot=header-start]\"></ng-content>\n        </span>\n\n        <span class=\"bizy-card__header__end bizy-card__slot\">\n            <ng-content select=\"[slot=header-end]\"></ng-content>\n        </span>\n\n    </span>\n\n    <span class=\"bizy-card__content\">\n\n        <ng-content></ng-content>\n\n    </span>\n\n    <span class=\"bizy-card__footer\">\n\n        <span class=\"bizy-card__footer__start bizy-card__slot\">\n            <ng-content select=\"[slot=footer-start]\"></ng-content>\n        </span>\n\n        <span class=\"bizy-card__footer__end bizy-card__slot\">\n            <ng-content select=\"[slot=footer-end]\"></ng-content>\n        </span>\n\n    </span>\n\n</button>", styles: [":host{font-size:1rem;height:var(--bizy-card-height);min-height:var(--bizy-card-min-height);max-height:var(--bizy-card-max-height);width:var(--bizy-card-width);min-width:var(--bizy-card-min-width);max-width:var(--bizy-card-max-width)}.bizy-card{height:100%;width:100%;cursor:var(--bizy-card-cursor);border-top:var(--bizy-card-border-top, var(--bizy-card-border, none));border-right:var(--bizy-card-border-right, var(--bizy-card-border, none));border-bottom:var(--bizy-card-border-bottom, var(--bizy-card-border, none));border-left:var(--bizy-card-border-left, var(--bizy-card-border, none));border-radius:var(--bizy-card-border-radius);overflow:hidden;padding:var(--bizy-card-padding);display:flex;flex-direction:column;justify-content:space-between;row-gap:var(--bizy-card-row-gap);background-color:var(--bizy-card-background-color);transition:transform .25s ease-in-out;box-shadow:var(--bizy-card-box-shadow)}.bizy-card:hover{transform:translateY(-1px);box-shadow:var(--bizy-card-hover-box-shadow)}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__content{display:none}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__header:not(:empty){height:100%!important}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__footer:not(:empty){height:100%!important}.bizy-card--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-card__content:not(:empty){display:flex;align-items:var(--bizy-card-content-align-items);column-gap:.5rem;height:100%;width:100%;background-color:var(--bizy-card-content-background-color)}.bizy-card__header:has(>.bizy-card__header__start:empty):has(>.bizy-card__header__end:empty){display:none}.bizy-card__header:not(:empty){width:100%;height:fit-content;display:grid;grid-template-columns:auto auto;align-items:var(--bizy-card-header-align-items);column-gap:.5rem;background-color:var(--bizy-card-header-background-color)}.bizy-card__header__start{justify-content:flex-start}.bizy-card__header__end{justify-content:flex-end}.bizy-card__slot{width:100%;display:flex;align-items:center;column-gap:.5rem;height:100%;overflow:hidden}.bizy-card__footer:has(>.bizy-card__footer__start:empty):has(>.bizy-card__footer__end:empty){display:none}.bizy-card__footer:not(:empty){width:100%;height:fit-content;display:grid;grid-template-columns:auto auto;align-items:var(--bizy-card-footer-align-items);column-gap:.5rem;background-color:var(--bizy-card-footer-background-color)}.bizy-card__footer__start{justify-content:flex-start}.bizy-card__footer__end{justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyCardComponent, isStandalone: true, selector: "bizy-card", inputs: { id: "id", disabled: "disabled", selected: "selected", customClass: "customClass" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<button \n    type=\"button\"\n    (click)=\"_onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\"\n    class=\"bizy-card {{customClass}}\"\n    [ngClass]=\"{'bizy-card--disabled': disabled}\">\n\n    <span class=\"bizy-card__header\">\n\n        <span class=\"bizy-card__header__start bizy-card__slot\">\n            <ng-content select=\"[slot=header-start]\"></ng-content>\n        </span>\n\n        <span class=\"bizy-card__header__end bizy-card__slot\">\n            <ng-content select=\"[slot=header-end]\"></ng-content>\n        </span>\n\n    </span>\n\n    <span class=\"bizy-card__content\">\n\n        <ng-content></ng-content>\n\n    </span>\n\n    <span class=\"bizy-card__footer\">\n\n        <span class=\"bizy-card__footer__start bizy-card__slot\">\n            <ng-content select=\"[slot=footer-start]\"></ng-content>\n        </span>\n\n        <span class=\"bizy-card__footer__end bizy-card__slot\">\n            <ng-content select=\"[slot=footer-end]\"></ng-content>\n        </span>\n\n    </span>\n\n</button>", styles: [":host{font-size:1rem;height:var(--bizy-card-height);min-height:var(--bizy-card-min-height);max-height:var(--bizy-card-max-height);width:var(--bizy-card-width);min-width:var(--bizy-card-min-width);max-width:var(--bizy-card-max-width)}.bizy-card{height:100%;width:100%;cursor:var(--bizy-card-cursor);border-top:var(--bizy-card-border-top, var(--bizy-card-border, none));border-right:var(--bizy-card-border-right, var(--bizy-card-border, none));border-bottom:var(--bizy-card-border-bottom, var(--bizy-card-border, none));border-left:var(--bizy-card-border-left, var(--bizy-card-border, none));border-radius:var(--bizy-card-border-radius);overflow:hidden;padding:var(--bizy-card-padding);display:flex;flex-direction:column;justify-content:space-between;row-gap:var(--bizy-card-row-gap);background-color:var(--bizy-card-background-color);transition:transform .25s ease-in-out;box-shadow:var(--bizy-card-box-shadow)}.bizy-card:hover{transform:translateY(-1px);box-shadow:var(--bizy-card-hover-box-shadow)}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__content{display:none}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__header:not(:empty){height:100%!important}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__footer:not(:empty){height:100%!important}.bizy-card--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-card__content:not(:empty){display:flex;align-items:var(--bizy-card-content-align-items);column-gap:var(--bizy-card-content-column-gap);height:100%;width:100%;background-color:var(--bizy-card-content-background-color)}.bizy-card__header:has(>.bizy-card__header__start:empty):has(>.bizy-card__header__end:empty){display:none}.bizy-card__header:not(:empty){width:100%;height:fit-content;display:grid;grid-template-columns:auto auto;align-items:var(--bizy-card-header-align-items);column-gap:var(--bizy-card-header-column-gap);background-color:var(--bizy-card-header-background-color)}.bizy-card__header__start{justify-content:flex-start}.bizy-card__header__end{justify-content:flex-end}.bizy-card__slot{width:100%;display:flex;align-items:center;column-gap:var(--bizy-card-slot-column-gap);height:100%;overflow:hidden}.bizy-card__footer:has(>.bizy-card__footer__start:empty):has(>.bizy-card__footer__end:empty){display:none}.bizy-card__footer:not(:empty){width:100%;height:fit-content;display:grid;grid-template-columns:auto auto;align-items:var(--bizy-card-footer-align-items);column-gap:var(--bizy-card-footer-column-gap);background-color:var(--bizy-card-footer-background-color)}.bizy-card__footer__start{justify-content:flex-start}.bizy-card__footer__end{justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizy-card', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n    type=\"button\"\n    (click)=\"_onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\"\n    class=\"bizy-card {{customClass}}\"\n    [ngClass]=\"{'bizy-card--disabled': disabled}\">\n\n    <span class=\"bizy-card__header\">\n\n        <span class=\"bizy-card__header__start bizy-card__slot\">\n            <ng-content select=\"[slot=header-start]\"></ng-content>\n        </span>\n\n        <span class=\"bizy-card__header__end bizy-card__slot\">\n            <ng-content select=\"[slot=header-end]\"></ng-content>\n        </span>\n\n    </span>\n\n    <span class=\"bizy-card__content\">\n\n        <ng-content></ng-content>\n\n    </span>\n\n    <span class=\"bizy-card__footer\">\n\n        <span class=\"bizy-card__footer__start bizy-card__slot\">\n            <ng-content select=\"[slot=footer-start]\"></ng-content>\n        </span>\n\n        <span class=\"bizy-card__footer__end bizy-card__slot\">\n            <ng-content select=\"[slot=footer-end]\"></ng-content>\n        </span>\n\n    </span>\n\n</button>", styles: [":host{font-size:1rem;height:var(--bizy-card-height);min-height:var(--bizy-card-min-height);max-height:var(--bizy-card-max-height);width:var(--bizy-card-width);min-width:var(--bizy-card-min-width);max-width:var(--bizy-card-max-width)}.bizy-card{height:100%;width:100%;cursor:var(--bizy-card-cursor);border-top:var(--bizy-card-border-top, var(--bizy-card-border, none));border-right:var(--bizy-card-border-right, var(--bizy-card-border, none));border-bottom:var(--bizy-card-border-bottom, var(--bizy-card-border, none));border-left:var(--bizy-card-border-left, var(--bizy-card-border, none));border-radius:var(--bizy-card-border-radius);overflow:hidden;padding:var(--bizy-card-padding);display:flex;flex-direction:column;justify-content:space-between;row-gap:var(--bizy-card-row-gap);background-color:var(--bizy-card-background-color);transition:transform .25s ease-in-out;box-shadow:var(--bizy-card-box-shadow)}.bizy-card:hover{transform:translateY(-1px);box-shadow:var(--bizy-card-hover-box-shadow)}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__content{display:none}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__header:not(:empty){height:100%!important}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__footer:not(:empty){height:100%!important}.bizy-card--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-card__content:not(:empty){display:flex;align-items:var(--bizy-card-content-align-items);column-gap:.5rem;height:100%;width:100%;background-color:var(--bizy-card-content-background-color)}.bizy-card__header:has(>.bizy-card__header__start:empty):has(>.bizy-card__header__end:empty){display:none}.bizy-card__header:not(:empty){width:100%;height:fit-content;display:grid;grid-template-columns:auto auto;align-items:var(--bizy-card-header-align-items);column-gap:.5rem;background-color:var(--bizy-card-header-background-color)}.bizy-card__header__start{justify-content:flex-start}.bizy-card__header__end{justify-content:flex-end}.bizy-card__slot{width:100%;display:flex;align-items:center;column-gap:.5rem;height:100%;overflow:hidden}.bizy-card__footer:has(>.bizy-card__footer__start:empty):has(>.bizy-card__footer__end:empty){display:none}.bizy-card__footer:not(:empty){width:100%;height:fit-content;display:grid;grid-template-columns:auto auto;align-items:var(--bizy-card-footer-align-items);column-gap:.5rem;background-color:var(--bizy-card-footer-background-color)}.bizy-card__footer__start{justify-content:flex-start}.bizy-card__footer__end{justify-content:flex-end}\n"] }]
+            args: [{ selector: 'bizy-card', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n    type=\"button\"\n    (click)=\"_onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\"\n    class=\"bizy-card {{customClass}}\"\n    [ngClass]=\"{'bizy-card--disabled': disabled}\">\n\n    <span class=\"bizy-card__header\">\n\n        <span class=\"bizy-card__header__start bizy-card__slot\">\n            <ng-content select=\"[slot=header-start]\"></ng-content>\n        </span>\n\n        <span class=\"bizy-card__header__end bizy-card__slot\">\n            <ng-content select=\"[slot=header-end]\"></ng-content>\n        </span>\n\n    </span>\n\n    <span class=\"bizy-card__content\">\n\n        <ng-content></ng-content>\n\n    </span>\n\n    <span class=\"bizy-card__footer\">\n\n        <span class=\"bizy-card__footer__start bizy-card__slot\">\n            <ng-content select=\"[slot=footer-start]\"></ng-content>\n        </span>\n\n        <span class=\"bizy-card__footer__end bizy-card__slot\">\n            <ng-content select=\"[slot=footer-end]\"></ng-content>\n        </span>\n\n    </span>\n\n</button>", styles: [":host{font-size:1rem;height:var(--bizy-card-height);min-height:var(--bizy-card-min-height);max-height:var(--bizy-card-max-height);width:var(--bizy-card-width);min-width:var(--bizy-card-min-width);max-width:var(--bizy-card-max-width)}.bizy-card{height:100%;width:100%;cursor:var(--bizy-card-cursor);border-top:var(--bizy-card-border-top, var(--bizy-card-border, none));border-right:var(--bizy-card-border-right, var(--bizy-card-border, none));border-bottom:var(--bizy-card-border-bottom, var(--bizy-card-border, none));border-left:var(--bizy-card-border-left, var(--bizy-card-border, none));border-radius:var(--bizy-card-border-radius);overflow:hidden;padding:var(--bizy-card-padding);display:flex;flex-direction:column;justify-content:space-between;row-gap:var(--bizy-card-row-gap);background-color:var(--bizy-card-background-color);transition:transform .25s ease-in-out;box-shadow:var(--bizy-card-box-shadow)}.bizy-card:hover{transform:translateY(-1px);box-shadow:var(--bizy-card-hover-box-shadow)}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__content{display:none}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__header:not(:empty){height:100%!important}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__footer:not(:empty){height:100%!important}.bizy-card--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-card__content:not(:empty){display:flex;align-items:var(--bizy-card-content-align-items);column-gap:var(--bizy-card-content-column-gap);height:100%;width:100%;background-color:var(--bizy-card-content-background-color)}.bizy-card__header:has(>.bizy-card__header__start:empty):has(>.bizy-card__header__end:empty){display:none}.bizy-card__header:not(:empty){width:100%;height:fit-content;display:grid;grid-template-columns:auto auto;align-items:var(--bizy-card-header-align-items);column-gap:var(--bizy-card-header-column-gap);background-color:var(--bizy-card-header-background-color)}.bizy-card__header__start{justify-content:flex-start}.bizy-card__header__end{justify-content:flex-end}.bizy-card__slot{width:100%;display:flex;align-items:center;column-gap:var(--bizy-card-slot-column-gap);height:100%;overflow:hidden}.bizy-card__footer:has(>.bizy-card__footer__start:empty):has(>.bizy-card__footer__end:empty){display:none}.bizy-card__footer:not(:empty){width:100%;height:fit-content;display:grid;grid-template-columns:auto auto;align-items:var(--bizy-card-footer-align-items);column-gap:var(--bizy-card-footer-column-gap);background-color:var(--bizy-card-footer-background-color)}.bizy-card__footer__start{justify-content:flex-start}.bizy-card__footer__end{justify-content:flex-end}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], disabled: [{
@@ -11953,6 +11953,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                 }]
         }] });
 
+class BizyDonutChartSectionComponent {
+    #elementRef = inject(ElementRef);
+    #document = inject(DOCUMENT);
+    id = `bizy-donut-chart-section-${Math.random()}`;
+    value = null;
+    name = null;
+    metadata = null;
+    onSelect = new EventEmitter();
+    #changes = new Subject();
+    get changes$() {
+        return this.#changes.asObservable();
+    }
+    ngOnChanges() {
+        this.#changes.next();
+    }
+    #getClosestCssVariable = (element, cssVariable) => {
+        while (element) {
+            const value = getComputedStyle(element).getPropertyValue(cssVariable).trim();
+            if (value) {
+                return value;
+            }
+            element = element.parentElement;
+        }
+        const rootValue = getComputedStyle(this.#document.documentElement).getPropertyValue(cssVariable).trim();
+        return rootValue || null;
+    };
+    getColor = () => this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-donut-chart-section-color');
+    getNativeElement = () => this.#elementRef?.nativeElement;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyDonutChartSectionComponent, isStandalone: true, selector: "bizy-donut-chart-section", inputs: { id: "id", value: "value", name: "name", metadata: "metadata" }, outputs: { onSelect: "onSelect" }, host: { properties: { "id": "id" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bizy-donut-chart-section',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[id]': 'id'
+                    }
+                }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], metadata: [{
+                type: Input
+            }], onSelect: [{
+                type: Output
+            }] } });
+
 class BizyDonutChartPopupComponent {
     #popup = inject(BizyPopupService);
     #renderer = inject(Renderer2);
@@ -12011,7 +12064,7 @@ class BizyDonutChartPopupComponent {
                                             html2canvas(this.#chartContainer).then(canvas => {
                                                 var link = this.#renderer.createElement('a');
                                                 link.href = canvas.toDataURL('image/png');
-                                                link.download = `${data.download.name}.png`;
+                                                link.download = `${data.download.fileName}.png`;
                                                 this.#renderer.appendChild(this.#document.body, link);
                                                 link.click();
                                                 this.#renderer.removeChild(this.#document.body, link);
@@ -12037,12 +12090,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
             args: [{ selector: 'bizy-donut-chart-popup', template: '', styles: [":host{display:inline-block;height:min(60rem,90dvh);width:min(60rem,85dvw)}\n"] }]
         }] });
 
-const EMPTY_CHART$1 = [0];
-const DEFAULT_CHART_SIZE$3 = '300px';
+const DEFAULT_EMPTY_LABEL$1 = 'Sin elementos';
+const DEFAULT_CHART_SIZE$3 = 300;
 const DEFAULT_DOWNLOAD$3 = {
     show: true,
     label: 'Descargar',
-    name: 'Bizy'
+    fileName: 'Bizy'
 };
 const DEFAULT_EXPAND$2 = {
     show: true,
@@ -12052,7 +12105,7 @@ const DEFAULT_TOOLTIP$3 = {
     show: true
 };
 const DEFAULT_LEGEND$1 = {
-    show: true,
+    show: false,
     orient: 'vertical',
     position: {
         x: 'auto',
@@ -12060,227 +12113,273 @@ const DEFAULT_LEGEND$1 = {
     }
 };
 const DEFAULT_LABEL$1 = {
-    show: false,
+    show: true,
     overflow: 'break',
     line: true
 };
+class BizyDonutChartService {
+    emptyLabel = DEFAULT_EMPTY_LABEL$1;
+    chartSize = DEFAULT_CHART_SIZE$3;
+    downloadConfig = DEFAULT_DOWNLOAD$3;
+    expandConfig = DEFAULT_EXPAND$2;
+    tooltipConfig = DEFAULT_TOOLTIP$3;
+    legendConfig = DEFAULT_LEGEND$1;
+    labelConfig = DEFAULT_LABEL$1;
+    getEmptyLabel = () => this.emptyLabel;
+    setEmptyLabel = (label) => {
+        if (!label) {
+            return;
+        }
+        this.emptyLabel = label;
+    };
+    getChartSize = () => this.chartSize;
+    setChartSize = (size) => {
+        if (typeof size === 'undefined' || size === null) {
+            return;
+        }
+        this.chartSize = size;
+    };
+    getDownloadConfig = () => this.downloadConfig;
+    setDownloadConfig = (config) => {
+        this.downloadConfig = Object.assign(this.downloadConfig, config);
+    };
+    getExpandConfig = () => this.expandConfig;
+    setExpandConfig = (config) => {
+        this.expandConfig = Object.assign(this.expandConfig, config);
+    };
+    getTooltipConfig = () => this.tooltipConfig;
+    setTooltipConfig = (config) => {
+        this.tooltipConfig = Object.assign(this.tooltipConfig, config);
+    };
+    getLegendConfig = () => this.legendConfig;
+    setLegendConfig = (config) => {
+        this.legendConfig = Object.assign(this.legendConfig, config);
+    };
+    getLabelConfig = () => this.labelConfig;
+    setLabelConfig = (config) => {
+        this.labelConfig = Object.assign(this.labelConfig, config);
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartService, decorators: [{
+            type: Injectable
+        }] });
+
 class BizyDonutChartComponent {
     #elementRef = inject(ElementRef);
     #document = inject(DOCUMENT);
     #ref = inject(ChangeDetectorRef);
     #renderer = inject(Renderer2);
     #popup = inject(BizyPopupService);
+    #donutChartService = inject(BizyDonutChartService);
+    sections = null;
     resizeRef = null;
     centerLabel = null;
-    tooltip = DEFAULT_TOOLTIP$3;
-    legend = DEFAULT_LEGEND$1;
-    download = DEFAULT_DOWNLOAD$3;
-    expand = DEFAULT_EXPAND$2;
-    label = DEFAULT_LABEL$1;
-    onSelect = new EventEmitter();
+    tooltip = this.#donutChartService.getTooltipConfig();
+    legend = this.#donutChartService.getLegendConfig();
+    download = this.#donutChartService.getDownloadConfig();
+    expand = this.#donutChartService.getDownloadConfig();
+    label = this.#donutChartService.getLabelConfig();
     onDownload = new EventEmitter();
     #echarts = null;
+    #echartsContainer = null;
     #resizeObserver = null;
-    #afterViewInitSubscription = new Subscription();
     #resizeSubscription = new Subscription();
     #chartContainer = null;
-    #afterViewInit = new BehaviorSubject(false);
     #resize$ = new Subject();
-    #data = EMPTY_CHART$1;
-    ngAfterViewInit() {
-        this.#afterViewInit.next(true);
-    }
+    #donutChartSectionSubscription = new Subscription();
+    #donutChartSectionChangesSubscription = new Subscription();
+    #renderSubscription = new Subscription();
+    #render = new Subject();
     getNativeElement = () => this.#elementRef?.nativeElement;
-    set data(data) {
-        if (!data) {
+    ngAfterContentInit() {
+        import('echarts').then(echarts => {
+            this.#echarts = echarts;
+            this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
+            const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
+            this.#resizeObserver.observe(resizeRef);
+            this.#resizeSubscription = new Subscription();
+            this.#resizeSubscription.add(this.#resize$.subscribe(() => {
+                this.#render.next();
+            }));
+            this.sections.forEach(_section => {
+                this.#donutChartSectionChangesSubscription.add(_section.changes$.subscribe(() => {
+                    this.#render.next();
+                }));
+            });
+            this.#donutChartSectionSubscription.add(this.sections.changes.subscribe(_sections => {
+                this.#donutChartSectionChangesSubscription.unsubscribe();
+                this.#donutChartSectionChangesSubscription = new Subscription();
+                this.#render.next();
+                _sections.forEach(_section => {
+                    this.#donutChartSectionChangesSubscription.add(_section.changes$.subscribe(() => {
+                        this.#render.next();
+                    }));
+                });
+            }));
+            this.#renderSubscription.add(this.#render.asObservable().pipe(debounceTime(150), throttleTime(300)).subscribe(() => {
+                this.render();
+            }));
+            this.#render.next();
+        });
+    }
+    render = () => {
+        this.#deleteChartContainer();
+        this.#createChartContainer();
+        if (!this.#chartContainer) {
             return;
         }
-        if (data.length > 0) {
-            this.#setChartData(data);
-        }
-        else {
-            this.#deleteChartContainer();
-            this.#setChartData(EMPTY_CHART$1);
+        let data = [];
+        this.sections.forEach(_section => {
+            const section = {
+                id: _section.id,
+                name: _section.name || '---',
+                value: _section.value ?? 0,
+                metadata: _section.metadata ?? {}
+            };
+            const color = _section.getColor();
+            const itemStyle = color ? { color } : {};
+            data.push({
+                id: section.id,
+                name: section.name,
+                value: section.value,
+                metadata: section.metadata,
+                itemStyle,
+            });
+        });
+        if (data.length === 0) {
+            data = [{
+                    name: this.#donutChartService.getEmptyLabel(),
+                    value: 0
+                }];
         }
-    }
-    async #setChartData(data) {
-        this.#afterViewInitSubscription.add(this.#afterViewInit.pipe(filter$1(value => value === true), take(1)).subscribe(() => {
-            /**
-             * setTimeout fix angular render problem
-             */
-            setTimeout(() => {
-                this.#createChartContainer();
-                if (!this.#chartContainer) {
-                    return;
-                }
-                if (data && data.length > 0 && data[0] !== 0) {
-                    this.#data = [];
-                    data.forEach(_d => {
-                        if (!_d.value) {
-                            _d.value = 0;
-                        }
-                        if (!_d.name) {
-                            _d.name = '---';
-                        }
-                        const itemStyle = _d.color ? { color: _d.color } : {};
-                        this.#data.push({
-                            name: _d.name,
-                            value: _d.value,
-                            itemStyle
-                        });
-                    });
-                }
-                else {
-                    this.#data = EMPTY_CHART$1;
-                }
-                const itemStyle = {
-                    borderRadius: 10,
-                    borderColor: '#fff',
-                    borderWidth: 2
-                };
-                const label = {
-                    show: this.label?.show ?? DEFAULT_LABEL$1.show,
-                    overflow: this.label?.overflow ?? DEFAULT_LABEL$1.overflow,
-                    position: 'center',
-                    formatter: this.label?.formatter
-                };
-                const labelLine = {
-                    show: this.label?.line ?? DEFAULT_LABEL$1.line
-                };
-                const series = [{
-                        type: 'pie',
-                        radius: ['50%', '70%'],
-                        center: ['50%', '50%'],
-                        data: this.#data,
-                        itemStyle,
-                        label,
-                        labelLine
-                    }];
-                const textColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-donut-chart-tooltip-color');
-                const textBackgroundColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-donut-chart-tooltip-background-color');
-                const borderColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-donut-chart-tooltip-border-color');
-                const toolbox = {
-                    show: true,
-                    feature: {
-                        mySaveAsImage: {
-                            show: this.download.show ?? DEFAULT_DOWNLOAD$3.show,
-                            icon: 'path://M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z',
-                            title: this.download.label ?? DEFAULT_DOWNLOAD$3.label,
-                            onclick: () => {
-                                setTimeout(() => {
-                                    import('html2canvas').then(module => {
-                                        const html2canvas = module.default;
-                                        html2canvas(this.#chartContainer).then(canvas => {
-                                            var link = this.#renderer.createElement('a');
-                                            link.href = canvas.toDataURL('image/png');
-                                            link.download = `${this.download.name ?? DEFAULT_DOWNLOAD$3.name}.png`;
-                                            this.#renderer.appendChild(this.#document.body, link);
-                                            link.click();
-                                            this.#renderer.removeChild(this.#document.body, link);
-                                            this.onDownload.emit();
-                                        });
-                                    });
-                                }, 500);
-                            }
-                        },
-                        myExpandChart: {
-                            show: this.expand.show ?? DEFAULT_EXPAND$2.show,
-                            icon: 'path://M264 96L120 96C106.7 96 96 106.7 96 120L96 264C96 273.7 101.8 282.5 110.8 286.2C119.8 289.9 130.1 287.8 137 281L177 241L256 320L177 399L137 359C130.1 352.1 119.8 350.1 110.8 353.8C101.8 357.5 96 366.3 96 376L96 520C96 533.3 106.7 544 120 544L264 544C273.7 544 282.5 538.2 286.2 529.2C289.9 520.2 287.9 509.9 281 503L241 463L320 384L399 463L359 503C352.1 509.9 350.1 520.2 353.8 529.2C357.5 538.2 366.3 544 376 544L520 544C533.3 544 544 533.3 544 520L544 376C544 366.3 538.2 357.5 529.2 353.8C520.2 350.1 509.9 352.1 503 359L463 399L384 320L463 241L503 281C509.9 287.9 520.2 289.9 529.2 286.2C538.2 282.5 544 273.7 544 264L544 120C544 106.7 533.3 96 520 96L376 96C366.3 96 357.5 101.8 353.8 110.8C350.1 119.8 352.2 130.1 359 137L399 177L320 256L241 177L281 137C287.9 130.1 289.9 119.8 286.2 110.8C282.5 101.8 273.7 96 264 96z',
-                            title: this.expand.label ?? DEFAULT_EXPAND$2.label,
-                            onclick: () => {
-                                this.#popup.open({
-                                    component: BizyDonutChartPopupComponent,
-                                    data: {
-                                        download: {
-                                            show: this.download?.show ?? DEFAULT_DOWNLOAD$3.show,
-                                            label: this.download?.label ?? DEFAULT_DOWNLOAD$3.label,
-                                            name: this.download?.name ?? DEFAULT_DOWNLOAD$3.name,
-                                        },
-                                        option: this.#echarts.getOption()
-                                    }
+        const itemStyle = {
+            borderRadius: 10,
+            borderColor: '#fff',
+            borderWidth: 2
+        };
+        const label = {
+            show: this.label?.show ?? this.#donutChartService.getLabelConfig().show,
+            overflow: this.label?.overflow ?? this.#donutChartService.getLabelConfig().overflow,
+            position: 'center',
+            formatter: this.label?.formatter
+        };
+        const labelLine = {
+            show: this.label?.line ?? this.#donutChartService.getLabelConfig().line
+        };
+        const series = [{
+                type: 'pie',
+                radius: ['50%', '70%'],
+                center: ['50%', '50%'],
+                data,
+                itemStyle,
+                label,
+                labelLine
+            }];
+        const textColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-donut-chart-tooltip-color');
+        const textBackgroundColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-donut-chart-tooltip-background-color');
+        const borderColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-donut-chart-tooltip-border-color');
+        const toolbox = {
+            show: true,
+            feature: {
+                mySaveAsImage: {
+                    show: this.download.show ?? this.#donutChartService.getDownloadConfig().show,
+                    icon: 'path://M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z',
+                    title: this.download.label ?? this.#donutChartService.getDownloadConfig().label,
+                    onclick: () => {
+                        setTimeout(() => {
+                            import('html2canvas').then(module => {
+                                const html2canvas = module.default;
+                                html2canvas(this.#chartContainer).then(canvas => {
+                                    var link = this.#renderer.createElement('a');
+                                    link.href = canvas.toDataURL('image/png');
+                                    link.download = `${this.download.fileName ?? this.#donutChartService.getDownloadConfig().fileName}.png`;
+                                    this.#renderer.appendChild(this.#document.body, link);
+                                    link.click();
+                                    this.#renderer.removeChild(this.#document.body, link);
+                                    this.onDownload.emit();
                                 });
+                            });
+                        }, 500);
+                    }
+                },
+                myExpandChart: {
+                    show: this.expand.show ?? this.#donutChartService.getExpandConfig().show,
+                    icon: 'path://M264 96L120 96C106.7 96 96 106.7 96 120L96 264C96 273.7 101.8 282.5 110.8 286.2C119.8 289.9 130.1 287.8 137 281L177 241L256 320L177 399L137 359C130.1 352.1 119.8 350.1 110.8 353.8C101.8 357.5 96 366.3 96 376L96 520C96 533.3 106.7 544 120 544L264 544C273.7 544 282.5 538.2 286.2 529.2C289.9 520.2 287.9 509.9 281 503L241 463L320 384L399 463L359 503C352.1 509.9 350.1 520.2 353.8 529.2C357.5 538.2 366.3 544 376 544L520 544C533.3 544 544 533.3 544 520L544 376C544 366.3 538.2 357.5 529.2 353.8C520.2 350.1 509.9 352.1 503 359L463 399L384 320L463 241L503 281C509.9 287.9 520.2 289.9 529.2 286.2C538.2 282.5 544 273.7 544 264L544 120C544 106.7 533.3 96 520 96L376 96C366.3 96 357.5 101.8 353.8 110.8C350.1 119.8 352.2 130.1 359 137L399 177L320 256L241 177L281 137C287.9 130.1 289.9 119.8 286.2 110.8C282.5 101.8 273.7 96 264 96z',
+                    title: this.expand.label ?? this.#donutChartService.getExpandConfig().label,
+                    onclick: () => {
+                        this.#popup.open({
+                            component: BizyDonutChartPopupComponent,
+                            data: {
+                                download: {
+                                    show: this.download?.show ?? this.#donutChartService.getDownloadConfig().show,
+                                    label: this.download?.label ?? this.#donutChartService.getDownloadConfig().label,
+                                    name: this.download?.fileName ?? this.#donutChartService.getDownloadConfig().fileName,
+                                },
+                                option: this.#echartsContainer.getOption()
                             }
-                        }
-                    },
-                    emphasis: {
-                        iconStyle: {
-                            color: textColor,
-                            borderColor,
-                            borderWidth: 1,
-                            textBackgroundColor,
-                            textPadding: 5,
-                        }
+                        });
                     }
-                };
-                const tooltip = {
-                    show: this.tooltip?.show ?? DEFAULT_TOOLTIP$3.show,
-                    trigger: 'item',
-                    appendToBody: true,
-                    formatter: this.tooltip?.formatter
-                };
-                let legend = {
-                    show: this.legend?.show ?? DEFAULT_LEGEND$1.show,
-                    orient: this.legend?.orient ?? DEFAULT_LEGEND$1.orient,
-                    left: this.legend?.position ? this.legend?.position.x : DEFAULT_LEGEND$1.position.x,
-                    top: this.legend?.position ? this.legend?.position.y : DEFAULT_LEGEND$1.position.y,
-                };
-                let graphic;
-                if (this.centerLabel) {
-                    let centerLabelColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-donut-chart-center-label-color');
-                    let { width, height } = this.#chartContainer.getBoundingClientRect();
-                    let base = Math.min(width, height);
-                    let fontSize = base / 6;
-                    graphic = {
-                        type: 'text',
-                        left: 'center',
-                        top: 'center',
-                        style: {
-                            text: this.centerLabel,
-                            fill: centerLabelColor,
-                            textAlign: 'center',
-                            fontSize,
-                            fontWeight: 'bold'
-                        }
-                    };
                 }
-                const option = {
-                    tooltip,
-                    toolbox,
-                    legend,
-                    series,
-                    graphic
-                };
-                import('echarts').then(echarts => {
-                    this.#echarts = echarts.init(this.#chartContainer);
-                    Promise.resolve().then(() => {
-                        this.#echarts.setOption(option);
-                        this.#echarts.on('click', params => {
-                            this.onSelect.emit(params.name);
-                        });
-                        this.#resizeSubscription.unsubscribe();
-                        this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
-                        const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
-                        this.#resizeObserver.observe(resizeRef);
-                        this.#resizeSubscription = new Subscription();
-                        this.#resizeSubscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
-                            this.#deleteChartContainer();
-                            this.#createChartContainer();
-                            if (!this.#chartContainer) {
-                                return;
-                            }
-                            this.#echarts = echarts.init(this.#chartContainer);
-                            Promise.resolve().then(() => {
-                                this.#echarts.setOption({ ...option, series: option.series.map(_serie => { return { ..._serie, data: this.#data }; }) });
-                                this.#echarts.on('click', params => {
-                                    this.onSelect.emit(params.name);
-                                });
-                            });
-                        }));
-                    });
-                });
-            });
-        }));
-    }
+            },
+            emphasis: {
+                iconStyle: {
+                    color: textColor,
+                    borderColor,
+                    borderWidth: 1,
+                    textBackgroundColor,
+                    textPadding: 5,
+                }
+            }
+        };
+        const tooltip = {
+            show: this.tooltip?.show ?? this.#donutChartService.getTooltipConfig().show,
+            trigger: 'item',
+            appendToBody: true,
+            formatter: this.tooltip?.formatter
+        };
+        let legend = {
+            show: this.legend?.show ?? this.#donutChartService.getLegendConfig().show,
+            orient: this.legend?.orient ?? this.#donutChartService.getLegendConfig().orient,
+            left: this.legend?.position ? this.legend?.position.x : this.#donutChartService.getLegendConfig().position.x,
+            top: this.legend?.position ? this.legend?.position.y : this.#donutChartService.getLegendConfig().position.y,
+        };
+        let graphic;
+        if (this.centerLabel) {
+            let centerLabelColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-donut-chart-center-label-color');
+            let { width, height } = this.#chartContainer.getBoundingClientRect();
+            let base = Math.min(width, height);
+            let fontSize = base / 6;
+            graphic = {
+                type: 'text',
+                left: 'center',
+                top: 'center',
+                style: {
+                    text: this.centerLabel,
+                    fill: centerLabelColor,
+                    textAlign: 'center',
+                    fontSize,
+                    fontWeight: 'bold'
+                }
+            };
+        }
+        const option = {
+            tooltip,
+            toolbox,
+            legend,
+            series,
+            graphic
+        };
+        this.#echartsContainer = this.#echarts.init(this.#chartContainer);
+        this.#echartsContainer.setOption(option);
+        this.#echartsContainer.on('click', (params) => {
+            const section = this.sections.find(_section => _section.id === params.data.id);
+            if (section) {
+                section.onSelect.emit(params.event.event);
+            }
+        });
+    };
     #createChartContainer = () => {
         if (this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
             return;
@@ -12289,8 +12388,8 @@ class BizyDonutChartComponent {
         let elementHeight = this.#elementRef.nativeElement.offsetHeight;
         let minWidth = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-donut-chart-width');
         let minHeight = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-donut-chart-height');
-        const width = minWidth ? minWidth : elementWidth ? `${elementWidth * 0.99}px` : DEFAULT_CHART_SIZE$3;
-        const height = minHeight ? minHeight : elementHeight ? `${elementHeight}px` : DEFAULT_CHART_SIZE$3;
+        const width = minWidth ? minWidth : elementWidth ? `${elementWidth}px` : `${this.#donutChartService.getChartSize()}px`;
+        const height = minHeight ? minHeight : elementHeight ? `${elementHeight}px` : `${this.#donutChartService.getChartSize()}px`;
         this.#chartContainer = this.#renderer.createElement('div');
         this.#renderer.setStyle(this.#chartContainer, 'width', width);
         this.#renderer.setStyle(this.#chartContainer, 'height', height);
@@ -12301,7 +12400,7 @@ class BizyDonutChartComponent {
         if (!this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
             return;
         }
-        this.#echarts.clear();
+        this.#echartsContainer.clear();
         this.#renderer.removeChild(this.#elementRef.nativeElement, this.#chartContainer);
         this.#chartContainer = null;
         this.#ref.detectChanges();
@@ -12318,22 +12417,27 @@ class BizyDonutChartComponent {
         return rootValue || null;
     };
     ngOnDestroy() {
-        this.#afterViewInitSubscription.unsubscribe();
         this.#resizeSubscription.unsubscribe();
+        this.#donutChartSectionSubscription.unsubscribe();
+        this.#donutChartSectionChangesSubscription.unsubscribe();
+        this.#renderSubscription.unsubscribe();
         if (this.#resizeObserver) {
             this.#resizeObserver.disconnect();
         }
-        if (this.#echarts) {
-            this.#echarts.clear();
+        if (this.#echartsContainer) {
+            this.#echartsContainer.clear();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyDonutChartComponent, isStandalone: true, selector: "bizy-donut-chart", inputs: { resizeRef: "resizeRef", centerLabel: "centerLabel", tooltip: "tooltip", legend: "legend", download: "download", expand: "expand", label: "label", data: "data" }, outputs: { onSelect: "onSelect", onDownload: "onDownload" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:flex;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyDonutChartComponent, isStandalone: true, selector: "bizy-donut-chart", inputs: { resizeRef: "resizeRef", centerLabel: "centerLabel", tooltip: "tooltip", legend: "legend", download: "download", expand: "expand", label: "label" }, outputs: { onDownload: "onDownload" }, queries: [{ propertyName: "sections", predicate: BizyDonutChartSectionComponent }], ngImport: i0, template: '<ng-content select="bizy-donut-chart-section"></ng-content>', isInline: true, styles: [":host{display:flex;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizy-donut-chart', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;justify-content:center}\n"] }]
-        }], propDecorators: { resizeRef: [{
+            args: [{ selector: 'bizy-donut-chart', template: '<ng-content select="bizy-donut-chart-section"></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;justify-content:center}\n"] }]
+        }], propDecorators: { sections: [{
+                type: ContentChildren,
+                args: [BizyDonutChartSectionComponent]
+            }], resizeRef: [{
                 type: Input
             }], centerLabel: [{
                 type: Input
@@ -12347,30 +12451,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                 type: Input
             }], label: [{
                 type: Input
-            }], onSelect: [{
-                type: Output
             }], onDownload: [{
                 type: Output
-            }], data: [{
-                type: Input
             }] } });
 
 const COMPONENTS$p = [
     BizyDonutChartComponent,
-    BizyDonutChartPopupComponent
+    BizyDonutChartPopupComponent,
+    BizyDonutChartSectionComponent
 ];
 class BizyDonutChartModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartModule, imports: [BizyDonutChartComponent,
-            BizyDonutChartPopupComponent], exports: [BizyDonutChartComponent,
-            BizyDonutChartPopupComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartModule });
+            BizyDonutChartPopupComponent,
+            BizyDonutChartSectionComponent], exports: [BizyDonutChartComponent,
+            BizyDonutChartPopupComponent,
+            BizyDonutChartSectionComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartModule, providers: [BizyDonutChartService] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS$p,
                     exports: COMPONENTS$p,
+                    providers: [BizyDonutChartService]
                 }]
         }] });
 
@@ -15147,6 +15251,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                 }]
         }] });
 
+class BizyPieChartSectionComponent {
+    #elementRef = inject(ElementRef);
+    #document = inject(DOCUMENT);
+    id = `bizy-pie-chart-section-${Math.random()}`;
+    value = null;
+    name = null;
+    metadata = null;
+    onSelect = new EventEmitter();
+    #changes = new Subject();
+    get changes$() {
+        return this.#changes.asObservable();
+    }
+    ngOnChanges() {
+        this.#changes.next();
+    }
+    #getClosestCssVariable = (element, cssVariable) => {
+        while (element) {
+            const value = getComputedStyle(element).getPropertyValue(cssVariable).trim();
+            if (value) {
+                return value;
+            }
+            element = element.parentElement;
+        }
+        const rootValue = getComputedStyle(this.#document.documentElement).getPropertyValue(cssVariable).trim();
+        return rootValue || null;
+    };
+    getColor = () => this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-section-color');
+    getNativeElement = () => this.#elementRef?.nativeElement;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyPieChartSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyPieChartSectionComponent, isStandalone: true, selector: "bizy-pie-chart-section", inputs: { id: "id", value: "value", name: "name", metadata: "metadata" }, outputs: { onSelect: "onSelect" }, host: { properties: { "id": "id" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyPieChartSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bizy-pie-chart-section',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[id]': 'id'
+                    }
+                }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], metadata: [{
+                type: Input
+            }], onSelect: [{
+                type: Output
+            }] } });
+
 class BizyPieChartPopupComponent {
     #popup = inject(BizyPopupService);
     #renderer = inject(Renderer2);
@@ -15205,7 +15362,7 @@ class BizyPieChartPopupComponent {
                                             html2canvas(this.#chartContainer).then(canvas => {
                                                 var link = this.#renderer.createElement('a');
                                                 link.href = canvas.toDataURL('image/png');
-                                                link.download = `${data.download.name}.png`;
+                                                link.download = `${data.download.fileName}.png`;
                                                 this.#renderer.appendChild(this.#document.body, link);
                                                 link.click();
                                                 this.#renderer.removeChild(this.#document.body, link);
@@ -15231,12 +15388,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
             args: [{ selector: 'bizy-pie-chart-popup', template: '', styles: [":host{display:inline-block;height:min(60rem,90dvh);width:min(60rem,85dvw)}\n"] }]
         }] });
 
-const EMPTY_CHART = [0];
-const DEFAULT_CHART_SIZE = '300px';
+const DEFAULT_EMPTY_LABEL = 'Sin elementos';
+const DEFAULT_CHART_SIZE = 300;
 const DEFAULT_DOWNLOAD = {
     show: true,
     label: 'Descargar',
-    name: 'Bizy'
+    fileName: 'Bizy'
 };
 const DEFAULT_EXPAND = {
     show: true,
@@ -15258,227 +15415,262 @@ const DEFAULT_LABEL = {
     overflow: 'break',
     line: true
 };
+class BizyPieChartService {
+    emptyLabel = DEFAULT_EMPTY_LABEL;
+    chartSize = DEFAULT_CHART_SIZE;
+    downloadConfig = DEFAULT_DOWNLOAD;
+    expandConfig = DEFAULT_EXPAND;
+    tooltipConfig = DEFAULT_TOOLTIP;
+    legendConfig = DEFAULT_LEGEND;
+    labelConfig = DEFAULT_LABEL;
+    getEmptyLabel = () => this.emptyLabel;
+    setEmptyLabel = (label) => {
+        if (!label) {
+            return;
+        }
+        this.emptyLabel = label;
+    };
+    getChartSize = () => this.chartSize;
+    setChartSize = (size) => {
+        if (typeof size === 'undefined' || size === null) {
+            return;
+        }
+        this.chartSize = size;
+    };
+    getDownloadConfig = () => this.downloadConfig;
+    setDownloadConfig = (config) => {
+        this.downloadConfig = Object.assign(this.downloadConfig, config);
+    };
+    getExpandConfig = () => this.expandConfig;
+    setExpandConfig = (config) => {
+        this.expandConfig = Object.assign(this.expandConfig, config);
+    };
+    getTooltipConfig = () => this.tooltipConfig;
+    setTooltipConfig = (config) => {
+        this.tooltipConfig = Object.assign(this.tooltipConfig, config);
+    };
+    getLegendConfig = () => this.legendConfig;
+    setLegendConfig = (config) => {
+        this.legendConfig = Object.assign(this.legendConfig, config);
+    };
+    getLabelConfig = () => this.labelConfig;
+    setLabelConfig = (config) => {
+        this.labelConfig = Object.assign(this.labelConfig, config);
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyPieChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyPieChartService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyPieChartService, decorators: [{
+            type: Injectable
+        }] });
+
 class BizyPieChartComponent {
     #elementRef = inject(ElementRef);
     #document = inject(DOCUMENT);
     #ref = inject(ChangeDetectorRef);
     #renderer = inject(Renderer2);
     #popup = inject(BizyPopupService);
+    #pieChartService = inject(BizyPieChartService);
+    sections = null;
     resizeRef = null;
     centerLabel = null;
-    tooltip = DEFAULT_TOOLTIP;
-    legend = null;
-    download = DEFAULT_DOWNLOAD;
-    expand = DEFAULT_EXPAND;
-    label = DEFAULT_LABEL;
-    onSelect = new EventEmitter();
+    tooltip = this.#pieChartService.getTooltipConfig();
+    legend = this.#pieChartService.getLegendConfig();
+    download = this.#pieChartService.getDownloadConfig();
+    expand = this.#pieChartService.getExpandConfig();
+    label = this.#pieChartService.getLabelConfig();
     onDownload = new EventEmitter();
     #echarts = null;
+    #echartsContainer = null;
     #resizeObserver = null;
-    #afterViewInitSubscription = new Subscription();
     #resizeSubscription = new Subscription();
     #chartContainer = null;
-    #afterViewInit = new BehaviorSubject(false);
     #resize$ = new Subject();
-    #data = EMPTY_CHART;
-    ngAfterViewInit() {
-        this.#afterViewInit.next(true);
-    }
+    #pieChartSectionSubscription = new Subscription();
+    #pieChartSectionChangesSubscription = new Subscription();
+    #renderSubscription = new Subscription();
+    #render = new Subject();
     getNativeElement = () => this.#elementRef?.nativeElement;
-    set data(data) {
-        if (!data) {
+    ngAfterContentInit() {
+        import('echarts').then(echarts => {
+            this.#echarts = echarts;
+            this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
+            const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
+            this.#resizeObserver.observe(resizeRef);
+            this.#resizeSubscription = new Subscription();
+            this.#resizeSubscription.add(this.#resize$.subscribe(() => {
+                this.#render.next();
+            }));
+            this.sections.forEach(_section => {
+                this.#pieChartSectionChangesSubscription.add(_section.changes$.subscribe(() => {
+                    this.#render.next();
+                }));
+            });
+            this.#pieChartSectionSubscription.add(this.sections.changes.subscribe(_sections => {
+                this.#pieChartSectionChangesSubscription.unsubscribe();
+                this.#pieChartSectionChangesSubscription = new Subscription();
+                this.#render.next();
+                _sections.forEach(_section => {
+                    this.#pieChartSectionChangesSubscription.add(_section.changes$.subscribe(() => {
+                        this.#render.next();
+                    }));
+                });
+            }));
+            this.#renderSubscription.add(this.#render.asObservable().pipe(debounceTime(150), throttleTime(300)).subscribe(() => {
+                this.render();
+            }));
+            this.#render.next();
+        });
+    }
+    render = () => {
+        this.#deleteChartContainer();
+        this.#createChartContainer();
+        if (!this.#chartContainer) {
             return;
         }
-        if (data.length > 0) {
-            this.#setChartData(data);
-        }
-        else {
-            this.#deleteChartContainer();
-            this.#setChartData(EMPTY_CHART);
+        let data = [];
+        this.sections.forEach(_section => {
+            const section = {
+                id: _section.id,
+                name: _section.name || '---',
+                value: _section.value ?? 0,
+                metadata: _section.metadata ?? {}
+            };
+            const color = _section.getColor();
+            const itemStyle = color ? { color } : {};
+            data.push({
+                id: section.id,
+                name: section.name,
+                value: section.value,
+                metadata: section.metadata,
+                itemStyle,
+            });
+        });
+        if (data.length === 0) {
+            data = [{
+                    name: this.#pieChartService.getEmptyLabel(),
+                    value: 0
+                }];
         }
-    }
-    async #setChartData(data) {
-        this.#afterViewInitSubscription.add(this.#afterViewInit.pipe(filter$1(value => value === true), take(1)).subscribe(() => {
-            /**
-             * setTimeout fix angular render problem
-             */
-            setTimeout(() => {
-                this.#createChartContainer();
-                if (!this.#chartContainer) {
-                    return;
-                }
-                if (data && data.length > 0 && data[0] !== 0) {
-                    this.#data = [];
-                    data.forEach(_d => {
-                        if (!_d.value) {
-                            _d.value = 0;
-                        }
-                        if (!_d.name) {
-                            _d.name = '---';
-                        }
-                        const itemStyle = _d.color ? { color: _d.color } : {};
-                        this.#data.push({
-                            name: _d.name,
-                            value: _d.value,
-                            itemStyle,
-                            metadata: _d.metadata
-                        });
-                    });
-                }
-                else {
-                    this.#data = EMPTY_CHART;
-                }
-                const label = {
-                    show: this.label?.show ?? DEFAULT_LABEL.show,
-                    overflow: this.label?.overflow ?? DEFAULT_LABEL.overflow,
-                    formatter: this.label?.formatter
-                };
-                const labelLine = {
-                    show: this.label?.line ?? true
-                };
-                const series = [{
-                        type: 'pie',
-                        radius: '50%',
-                        center: ['50%', '50%'],
-                        data: this.#data,
-                        label,
-                        labelLine
-                    }];
-                const textColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-pie-chart-tooltip-color');
-                const textBackgroundColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-pie-chart-tooltip-background-color');
-                const borderColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-pie-chart-tooltip-border-color');
-                const toolbox = {
-                    show: true,
-                    feature: {
-                        mySaveAsImage: {
-                            show: this.download.show ?? DEFAULT_DOWNLOAD.show,
-                            icon: 'path://M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z',
-                            title: this.download.label ?? DEFAULT_DOWNLOAD.label,
-                            onclick: () => {
-                                setTimeout(() => {
-                                    import('html2canvas').then(module => {
-                                        const html2canvas = module.default;
-                                        html2canvas(this.#chartContainer).then(canvas => {
-                                            var link = this.#renderer.createElement('a');
-                                            link.href = canvas.toDataURL('image/png');
-                                            link.download = `${this.download.name ?? DEFAULT_DOWNLOAD.name}.png`;
-                                            this.#renderer.appendChild(this.#document.body, link);
-                                            link.click();
-                                            this.#renderer.removeChild(this.#document.body, link);
-                                            this.onDownload.emit();
-                                        });
-                                    });
-                                }, 500);
-                            }
-                        },
-                        myExpandChart: {
-                            show: this.expand.show ?? DEFAULT_EXPAND.show,
-                            icon: 'path://M264 96L120 96C106.7 96 96 106.7 96 120L96 264C96 273.7 101.8 282.5 110.8 286.2C119.8 289.9 130.1 287.8 137 281L177 241L256 320L177 399L137 359C130.1 352.1 119.8 350.1 110.8 353.8C101.8 357.5 96 366.3 96 376L96 520C96 533.3 106.7 544 120 544L264 544C273.7 544 282.5 538.2 286.2 529.2C289.9 520.2 287.9 509.9 281 503L241 463L320 384L399 463L359 503C352.1 509.9 350.1 520.2 353.8 529.2C357.5 538.2 366.3 544 376 544L520 544C533.3 544 544 533.3 544 520L544 376C544 366.3 538.2 357.5 529.2 353.8C520.2 350.1 509.9 352.1 503 359L463 399L384 320L463 241L503 281C509.9 287.9 520.2 289.9 529.2 286.2C538.2 282.5 544 273.7 544 264L544 120C544 106.7 533.3 96 520 96L376 96C366.3 96 357.5 101.8 353.8 110.8C350.1 119.8 352.2 130.1 359 137L399 177L320 256L241 177L281 137C287.9 130.1 289.9 119.8 286.2 110.8C282.5 101.8 273.7 96 264 96z',
-                            title: this.expand.label ?? DEFAULT_EXPAND.label,
-                            onclick: () => {
-                                this.#popup.open({
-                                    component: BizyPieChartPopupComponent,
-                                    data: {
-                                        download: {
-                                            show: this.download?.show ?? DEFAULT_DOWNLOAD.show,
-                                            label: this.download?.label ?? DEFAULT_DOWNLOAD.label,
-                                            name: this.download?.name ?? DEFAULT_DOWNLOAD.name,
-                                        },
-                                        option: this.#echarts.getOption()
-                                    }
+        const label = {
+            show: this.label?.show ?? this.#pieChartService.getLabelConfig().show,
+            overflow: this.label?.overflow ?? this.#pieChartService.getLabelConfig().overflow,
+            formatter: this.label?.formatter
+        };
+        const labelLine = {
+            show: this.label?.line ?? true
+        };
+        const series = [{
+                type: 'pie',
+                radius: '50%',
+                center: ['50%', '50%'],
+                data,
+                label,
+                labelLine
+            }];
+        const textColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-pie-chart-tooltip-color');
+        const textBackgroundColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-pie-chart-tooltip-background-color');
+        const borderColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-pie-chart-tooltip-border-color');
+        const toolbox = {
+            show: true,
+            feature: {
+                mySaveAsImage: {
+                    show: this.download.show ?? this.#pieChartService.getDownloadConfig().show,
+                    icon: 'path://M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z',
+                    title: this.download.label ?? this.#pieChartService.getDownloadConfig().label,
+                    onclick: () => {
+                        setTimeout(() => {
+                            import('html2canvas').then(module => {
+                                const html2canvas = module.default;
+                                html2canvas(this.#chartContainer).then(canvas => {
+                                    var link = this.#renderer.createElement('a');
+                                    link.href = canvas.toDataURL('image/png');
+                                    link.download = `${this.download.fileName ?? this.#pieChartService.getDownloadConfig().fileName}.png`;
+                                    this.#renderer.appendChild(this.#document.body, link);
+                                    link.click();
+                                    this.#renderer.removeChild(this.#document.body, link);
+                                    this.onDownload.emit();
                                 });
+                            });
+                        }, 500);
+                    }
+                },
+                myExpandChart: {
+                    show: this.expand.show ?? this.#pieChartService.getExpandConfig().show,
+                    icon: 'path://M264 96L120 96C106.7 96 96 106.7 96 120L96 264C96 273.7 101.8 282.5 110.8 286.2C119.8 289.9 130.1 287.8 137 281L177 241L256 320L177 399L137 359C130.1 352.1 119.8 350.1 110.8 353.8C101.8 357.5 96 366.3 96 376L96 520C96 533.3 106.7 544 120 544L264 544C273.7 544 282.5 538.2 286.2 529.2C289.9 520.2 287.9 509.9 281 503L241 463L320 384L399 463L359 503C352.1 509.9 350.1 520.2 353.8 529.2C357.5 538.2 366.3 544 376 544L520 544C533.3 544 544 533.3 544 520L544 376C544 366.3 538.2 357.5 529.2 353.8C520.2 350.1 509.9 352.1 503 359L463 399L384 320L463 241L503 281C509.9 287.9 520.2 289.9 529.2 286.2C538.2 282.5 544 273.7 544 264L544 120C544 106.7 533.3 96 520 96L376 96C366.3 96 357.5 101.8 353.8 110.8C350.1 119.8 352.2 130.1 359 137L399 177L320 256L241 177L281 137C287.9 130.1 289.9 119.8 286.2 110.8C282.5 101.8 273.7 96 264 96z',
+                    title: this.expand.label ?? this.#pieChartService.getExpandConfig().label,
+                    onclick: () => {
+                        this.#popup.open({
+                            component: BizyPieChartPopupComponent,
+                            data: {
+                                download: {
+                                    show: this.download?.show ?? this.#pieChartService.getDownloadConfig().show,
+                                    label: this.download?.label ?? this.#pieChartService.getDownloadConfig().label,
+                                    fileName: this.download?.fileName ?? this.#pieChartService.getDownloadConfig().fileName,
+                                },
+                                option: this.#echartsContainer.getOption()
                             }
-                        }
-                    },
-                    emphasis: {
-                        iconStyle: {
-                            color: textColor,
-                            borderColor,
-                            borderWidth: 1,
-                            textBackgroundColor,
-                            textPadding: 5,
-                        }
+                        });
                     }
-                };
-                const tooltip = {
-                    show: this.tooltip?.show ?? DEFAULT_TOOLTIP.show,
-                    trigger: 'item',
-                    appendToBody: true,
-                    formatter: this.tooltip?.formatter
-                };
-                let legend = {
-                    show: this.legend?.show ?? DEFAULT_LEGEND.show,
-                    orient: this.legend?.orient ?? DEFAULT_LEGEND.orient,
-                    left: this.legend?.position ? this.legend?.position.x : DEFAULT_LEGEND.position.x,
-                    top: this.legend?.position ? this.legend?.position.y : DEFAULT_LEGEND.position.y,
-                };
-                let graphic;
-                if (this.centerLabel) {
-                    let centerLabelColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-center-label-color');
-                    let { width, height } = this.#chartContainer.getBoundingClientRect();
-                    let base = Math.min(width, height);
-                    let fontSize = base / 6;
-                    graphic = {
-                        type: 'text',
-                        left: 'center',
-                        top: 'center',
-                        style: {
-                            text: this.centerLabel,
-                            fill: centerLabelColor,
-                            textAlign: 'center',
-                            fontSize,
-                            fontWeight: 'bold'
-                        }
-                    };
                 }
-                const option = {
-                    tooltip,
-                    toolbox,
-                    legend,
-                    series,
-                    graphic
-                };
-                import('echarts').then(echarts => {
-                    this.#echarts = echarts.init(this.#chartContainer);
-                    Promise.resolve().then(() => {
-                        this.#echarts.setOption(option);
-                        this.#echarts.on('click', (params) => {
-                            this.onSelect.emit({
-                                name: params.data.name,
-                                value: params.data.value,
-                                color: params.data.itemStyle.color,
-                                metadata: params.data.metadata || {}
-                            });
-                        });
-                        this.#resizeSubscription.unsubscribe();
-                        this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
-                        const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
-                        this.#resizeObserver.observe(resizeRef);
-                        this.#resizeSubscription = new Subscription();
-                        this.#resizeSubscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
-                            this.#deleteChartContainer();
-                            this.#createChartContainer();
-                            if (!this.#chartContainer) {
-                                return;
-                            }
-                            this.#echarts = echarts.init(this.#chartContainer);
-                            Promise.resolve().then(() => {
-                                this.#echarts.setOption({ ...option, series: option.series.map(_serie => { return { ..._serie, data: this.#data }; }) });
-                                this.#echarts.on('click', (params) => {
-                                    this.onSelect.emit({
-                                        name: params.data.name,
-                                        value: params.data.value,
-                                        color: params.data.itemStyle.color,
-                                        metadata: params.data.metadata || {}
-                                    });
-                                });
-                            });
-                        }));
-                    });
-                });
-            });
-        }));
-    }
+            },
+            emphasis: {
+                iconStyle: {
+                    color: textColor,
+                    borderColor,
+                    borderWidth: 1,
+                    textBackgroundColor,
+                    textPadding: 5,
+                }
+            }
+        };
+        const tooltip = {
+            show: this.tooltip?.show ?? this.#pieChartService.getTooltipConfig().show,
+            trigger: 'item',
+            appendToBody: true,
+            formatter: this.tooltip?.formatter
+        };
+        let legend = {
+            show: this.legend?.show ?? this.#pieChartService.getLegendConfig().show,
+            orient: this.legend?.orient ?? this.#pieChartService.getLegendConfig().orient,
+            left: this.legend?.position ? this.legend?.position.x : this.#pieChartService.getLegendConfig().position.x,
+            top: this.legend?.position ? this.legend?.position.y : this.#pieChartService.getLegendConfig().position.y,
+        };
+        let graphic;
+        if (this.centerLabel) {
+            let centerLabelColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-center-label-color');
+            let { width, height } = this.#chartContainer.getBoundingClientRect();
+            let base = Math.min(width, height);
+            let fontSize = base / 6;
+            graphic = {
+                type: 'text',
+                left: 'center',
+                top: 'center',
+                style: {
+                    text: this.centerLabel,
+                    fill: centerLabelColor,
+                    textAlign: 'center',
+                    fontSize,
+                    fontWeight: 'bold'
+                }
+            };
+        }
+        const option = {
+            tooltip,
+            toolbox,
+            legend,
+            series,
+            graphic
+        };
+        this.#echartsContainer = this.#echarts.init(this.#chartContainer);
+        this.#echartsContainer.setOption(option);
+        this.#echartsContainer.on('click', (params) => {
+            const section = this.sections.find(_section => _section.id === params.data.id);
+            if (section) {
+                section.onSelect.emit(params.event.event);
+            }
+        });
+    };
     #createChartContainer = () => {
         if (this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
             return;
@@ -15487,8 +15679,8 @@ class BizyPieChartComponent {
         let elementHeight = this.#elementRef.nativeElement.offsetHeight;
         let minWidth = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-width');
         let minHeight = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-height');
-        const width = minWidth ? minWidth : elementWidth ? `${elementWidth * 0.99}px` : DEFAULT_CHART_SIZE;
-        const height = minHeight ? minHeight : elementHeight ? `${elementHeight}px` : DEFAULT_CHART_SIZE;
+        const width = minWidth ? minWidth : elementWidth ? `${elementWidth}px` : `${this.#pieChartService.getChartSize()}px`;
+        const height = minHeight ? minHeight : elementHeight ? `${elementHeight}px` : `${this.#pieChartService.getChartSize()}px`;
         this.#chartContainer = this.#renderer.createElement('div');
         this.#renderer.setStyle(this.#chartContainer, 'width', width);
         this.#renderer.setStyle(this.#chartContainer, 'height', height);
@@ -15499,7 +15691,7 @@ class BizyPieChartComponent {
         if (!this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
             return;
         }
-        this.#echarts.clear();
+        this.#echartsContainer.clear();
         this.#renderer.removeChild(this.#elementRef.nativeElement, this.#chartContainer);
         this.#chartContainer = null;
         this.#ref.detectChanges();
@@ -15516,22 +15708,27 @@ class BizyPieChartComponent {
         return rootValue || null;
     };
     ngOnDestroy() {
-        this.#afterViewInitSubscription.unsubscribe();
         this.#resizeSubscription.unsubscribe();
+        this.#pieChartSectionSubscription.unsubscribe();
+        this.#pieChartSectionChangesSubscription.unsubscribe();
+        this.#renderSubscription.unsubscribe();
         if (this.#resizeObserver) {
             this.#resizeObserver.disconnect();
         }
-        if (this.#echarts) {
-            this.#echarts.clear();
+        if (this.#echartsContainer) {
+            this.#echartsContainer.clear();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyPieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyPieChartComponent, isStandalone: true, selector: "bizy-pie-chart", inputs: { resizeRef: "resizeRef", centerLabel: "centerLabel", tooltip: "tooltip", legend: "legend", download: "download", expand: "expand", label: "label", data: "data" }, outputs: { onSelect: "onSelect", onDownload: "onDownload" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:flex;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyPieChartComponent, isStandalone: true, selector: "bizy-pie-chart", inputs: { resizeRef: "resizeRef", centerLabel: "centerLabel", tooltip: "tooltip", legend: "legend", download: "download", expand: "expand", label: "label" }, outputs: { onDownload: "onDownload" }, queries: [{ propertyName: "sections", predicate: BizyPieChartSectionComponent }], ngImport: i0, template: '<ng-content select="bizy-pie-chart-section"></ng-content>', isInline: true, styles: [":host{display:flex;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyPieChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizy-pie-chart', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;justify-content:center}\n"] }]
-        }], propDecorators: { resizeRef: [{
+            args: [{ selector: 'bizy-pie-chart', template: '<ng-content select="bizy-pie-chart-section"></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;justify-content:center}\n"] }]
+        }], propDecorators: { sections: [{
+                type: ContentChildren,
+                args: [BizyPieChartSectionComponent]
+            }], resizeRef: [{
                 type: Input
             }], centerLabel: [{
                 type: Input
@@ -15545,30 +15742,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                 type: Input
             }], label: [{
                 type: Input
-            }], onSelect: [{
-                type: Output
             }], onDownload: [{
                 type: Output
-            }], data: [{
-                type: Input
             }] } });
 
 const COMPONENTS$e = [
     BizyPieChartComponent,
-    BizyPieChartPopupComponent
+    BizyPieChartPopupComponent,
+    BizyPieChartSectionComponent
 ];
 class BizyPieChartModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyPieChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: BizyPieChartModule, imports: [BizyPieChartComponent,
-            BizyPieChartPopupComponent], exports: [BizyPieChartComponent,
-            BizyPieChartPopupComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyPieChartModule });
+            BizyPieChartPopupComponent,
+            BizyPieChartSectionComponent], exports: [BizyPieChartComponent,
+            BizyPieChartPopupComponent,
+            BizyPieChartSectionComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyPieChartModule, providers: [BizyPieChartService] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyPieChartModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS$e,
                     exports: COMPONENTS$e,
+                    providers: [BizyPieChartService]
                 }]
         }] });
 
@@ -19063,5 +19260,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BIZY_ANIMATION, BIZY_BAR_LINE_CHART_AXIS_POSITION, BIZY_CALENDAR_DAY, BIZY_CALENDAR_EVENT_ACTION, BIZY_CALENDAR_LANGUAGE, BIZY_CALENDAR_MODE, BIZY_FORMAT_SECONDS_FORMAT, BIZY_FORMAT_SECONDS_LANGUAGE, BIZY_SKELETON_SHAPE, BIZY_STACKED_BAR_CHART_LEGEND_POSITION, BIZY_TAG_TYPE, BizyAccordionComponent, BizyAccordionModule, BizyAnimationService, BizyAudioPlayerComponent, BizyAudioPlayerFormatSecondsPipe, BizyAudioPlayerModule, BizyAudioRecorderComponent, BizyAudioRecorderModule, BizyAutoFocusDirective, BizyAveragePipe, BizyBarChartComponent, BizyBarLineChartComponent, BizyBarLineChartModule, BizyBarLineChartPopupComponent, BizyBreadcrumbComponent, BizyBreadcrumbModule, BizyButtonComponent, BizyButtonModule, BizyCacheService, BizyCalendarComponent, BizyCalendarModule, BizyCardComponent, BizyCardModule, BizyCheckboxComponent, BizyCheckboxModule, BizyContentComponent, BizyContentModule, BizyCopyToClipboardDirective, BizyCopyToClipboardService, BizyCurrencyFormatDirective, BizyDatePickerComponent, BizyDatePickerModule, BizyDeviceService, BizyDirectivesModule, BizyDonutChartComponent, BizyDonutChartModule, BizyDonutChartPopupComponent, BizyEnumToArrayPipe, BizyExportToCSVService, BizyExtractNumbersPipe, BizyFileUploaderComponent, BizyFileUploaderModule, BizyFileUploaderService, BizyFilterComponent, BizyFilterContentComponent, BizyFilterModule, BizyFilterPipe, BizyFilterSectionCheckboxOptionComponent, BizyFilterSectionComponent, BizyFilterSectionRangeOptionComponent, BizyFilterSectionSearchOptionComponent, BizyFilterSectionsComponent, BizyFormComponent, BizyFormModule, BizyFormatSecondsPipe, BizyFormatSecondsService, BizyFullScreenPopupWrapperComponent, BizyGaugeChartComponent, BizyGaugeChartModule, BizyGaugeChartPopupComponent, BizyGridComponent, BizyGridForDirective, BizyGridModule, BizyGridRowComponent, BizyHeatMapChartComponent, BizyHeatMapChartModule, BizyInputComponent, BizyInputModule, BizyInputOptionComponent, BizyKeyboardService, BizyLineChartComponent, BizyListComponent, BizyListModule, BizyLoadingDirective, BizyLogService, BizyLongPressDirective, BizyMenuBarComponent, BizyMenuBarModule, BizyMenuBarOptionComponent, BizyMenuComponent, BizyMenuModule, BizyMenuOptionComponent, BizyMenuTitleComponent, BizyMouseOverDirective, BizyOnlyNumbersDirective, BizyOnlyPhoneDigitsDirective, BizyOrderByPipe, BizyPieChartComponent, BizyPieChartModule, BizyPieChartPopupComponent, BizyPipesModule, BizyPopupModule, BizyPopupService, BizyPopupWrapperComponent, BizyProgressBarComponent, BizyProgressBarModule, BizyRadioComponent, BizyRadioModule, BizyRangeFilterPipe, BizyReducePipe, BizyReloadDirective, BizyRepeatPipe, BizyRoundPipe, BizyRouterService, BizySafePipe, BizySearchPipe, BizySectionCenterComponent, BizySectionComponent, BizySectionEndComponent, BizySectionModule, BizySectionStartComponent, BizySelectComponent, BizySelectModule, BizySelectOptionComponent, BizySelectSelectedOptionComponent, BizyServicesModule, BizySetToArrayPipe, BizySidebarComponent, BizySidebarFloatingOptionComponent, BizySidebarFloatingOptionTitleComponent, BizySidebarModule, BizySidebarOptionComponent, BizySkeletonComponent, BizySkeletonModule, BizySliderComponent, BizySliderModule, BizyStackedBarChartComponent, BizyStackedBarChartModule, BizyStackedBarChartSegmentComponent, BizyStorageService, BizyTabComponent, BizyTableColumnArrowsComponent, BizyTableColumnComponent, BizyTableColumnFixedDirective, BizyTableComponent, BizyTableFooterComponent, BizyTableHeaderComponent, BizyTableModule, BizyTableRowComponent, BizyTableRowExpandContentComponent, BizyTableScrollingComponent, BizyTableScrollingDirective, BizyTabsComponent, BizyTabsModule, BizyTagComponent, BizyTagModule, BizyTextEllipsisDirective, BizyTimelineComponent, BizyTimelineEventComponent, BizyTimelineModule, BizyToastModule, BizyToastService, BizyToastWrapperComponent, BizyToggleComponent, BizyToggleModule, BizyToolbarComponent, BizyToolbarModule, BizyTooltipDirective, BizyTranslateModule, BizyTranslatePipe, BizyTranslateService, BizyUniquePipe, BizyValidatorService, BizyViewportService, LANGUAGE, LOADING_TYPE, MIME_TYPE, POPUP_PLACEMENT };
+export { BIZY_ANIMATION, BIZY_BAR_LINE_CHART_AXIS_POSITION, BIZY_CALENDAR_DAY, BIZY_CALENDAR_EVENT_ACTION, BIZY_CALENDAR_LANGUAGE, BIZY_CALENDAR_MODE, BIZY_FORMAT_SECONDS_FORMAT, BIZY_FORMAT_SECONDS_LANGUAGE, BIZY_SKELETON_SHAPE, BIZY_STACKED_BAR_CHART_LEGEND_POSITION, BIZY_TAG_TYPE, BizyAccordionComponent, BizyAccordionModule, BizyAnimationService, BizyAudioPlayerComponent, BizyAudioPlayerFormatSecondsPipe, BizyAudioPlayerModule, BizyAudioRecorderComponent, BizyAudioRecorderModule, BizyAutoFocusDirective, BizyAveragePipe, BizyBarChartComponent, BizyBarLineChartComponent, BizyBarLineChartModule, BizyBarLineChartPopupComponent, BizyBreadcrumbComponent, BizyBreadcrumbModule, BizyButtonComponent, BizyButtonModule, BizyCacheService, BizyCalendarComponent, BizyCalendarModule, BizyCardComponent, BizyCardModule, BizyCheckboxComponent, BizyCheckboxModule, BizyContentComponent, BizyContentModule, BizyCopyToClipboardDirective, BizyCopyToClipboardService, BizyCurrencyFormatDirective, BizyDatePickerComponent, BizyDatePickerModule, BizyDeviceService, BizyDirectivesModule, BizyDonutChartComponent, BizyDonutChartModule, BizyDonutChartPopupComponent, BizyDonutChartSectionComponent, BizyEnumToArrayPipe, BizyExportToCSVService, BizyExtractNumbersPipe, BizyFileUploaderComponent, BizyFileUploaderModule, BizyFileUploaderService, BizyFilterComponent, BizyFilterContentComponent, BizyFilterModule, BizyFilterPipe, BizyFilterSectionCheckboxOptionComponent, BizyFilterSectionComponent, BizyFilterSectionRangeOptionComponent, BizyFilterSectionSearchOptionComponent, BizyFilterSectionsComponent, BizyFormComponent, BizyFormModule, BizyFormatSecondsPipe, BizyFormatSecondsService, BizyFullScreenPopupWrapperComponent, BizyGaugeChartComponent, BizyGaugeChartModule, BizyGaugeChartPopupComponent, BizyGridComponent, BizyGridForDirective, BizyGridModule, BizyGridRowComponent, BizyHeatMapChartComponent, BizyHeatMapChartModule, BizyInputComponent, BizyInputModule, BizyInputOptionComponent, BizyKeyboardService, BizyLineChartComponent, BizyListComponent, BizyListModule, BizyLoadingDirective, BizyLogService, BizyLongPressDirective, BizyMenuBarComponent, BizyMenuBarModule, BizyMenuBarOptionComponent, BizyMenuComponent, BizyMenuModule, BizyMenuOptionComponent, BizyMenuTitleComponent, BizyMouseOverDirective, BizyOnlyNumbersDirective, BizyOnlyPhoneDigitsDirective, BizyOrderByPipe, BizyPieChartComponent, BizyPieChartModule, BizyPieChartPopupComponent, BizyPieChartSectionComponent, BizyPieChartService, BizyPipesModule, BizyPopupModule, BizyPopupService, BizyPopupWrapperComponent, BizyProgressBarComponent, BizyProgressBarModule, BizyRadioComponent, BizyRadioModule, BizyRangeFilterPipe, BizyReducePipe, BizyReloadDirective, BizyRepeatPipe, BizyRoundPipe, BizyRouterService, BizySafePipe, BizySearchPipe, BizySectionCenterComponent, BizySectionComponent, BizySectionEndComponent, BizySectionModule, BizySectionStartComponent, BizySelectComponent, BizySelectModule, BizySelectOptionComponent, BizySelectSelectedOptionComponent, BizyServicesModule, BizySetToArrayPipe, BizySidebarComponent, BizySidebarFloatingOptionComponent, BizySidebarFloatingOptionTitleComponent, BizySidebarModule, BizySidebarOptionComponent, BizySkeletonComponent, BizySkeletonModule, BizySliderComponent, BizySliderModule, BizyStackedBarChartComponent, BizyStackedBarChartModule, BizyStackedBarChartSegmentComponent, BizyStorageService, BizyTabComponent, BizyTableColumnArrowsComponent, BizyTableColumnComponent, BizyTableColumnFixedDirective, BizyTableComponent, BizyTableFooterComponent, BizyTableHeaderComponent, BizyTableModule, BizyTableRowComponent, BizyTableRowExpandContentComponent, BizyTableScrollingComponent, BizyTableScrollingDirective, BizyTabsComponent, BizyTabsModule, BizyTagComponent, BizyTagModule, BizyTextEllipsisDirective, BizyTimelineComponent, BizyTimelineEventComponent, BizyTimelineModule, BizyToastModule, BizyToastService, BizyToastWrapperComponent, BizyToggleComponent, BizyToggleModule, BizyToolbarComponent, BizyToolbarModule, BizyTooltipDirective, BizyTranslateModule, BizyTranslatePipe, BizyTranslateService, BizyUniquePipe, BizyValidatorService, BizyViewportService, LANGUAGE, LOADING_TYPE, MIME_TYPE, POPUP_PLACEMENT };
 //# sourceMappingURL=bizy-core.mjs.map