@testgorilla/tgo-ui 11.22.3 → 12.0.1

package/fesm2022/testgorilla-tgo-ui-components-donut-chart.mjs

@@ -1,144 +1,241 @@
-import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import DataLabelsPlugin from 'chartjs-plugin-datalabels';
-import { BaseChartDirective } from 'ng2-charts';
-import { Chart, registerables } from 'chart.js';
-
-class DonutChartComponent {
-    constructor() {
-        this.donutChartData = input(...(ngDevMode ? [undefined, { debugName: "donutChartData" }] : /* istanbul ignore next */ []));
-        this.applicationTheme = input('light', ...(ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []));
-        this.chartData = computed(() => {
-            const data = this.donutChartData();
-            return data
-                ? {
-                    labels: data.labels,
-                    datasets: [
-                        {
-                            data: data.data,
-                            backgroundColor: data.backgroundColor,
-                            borderWidth: 0,
-                        },
-                    ],
-                }
-                : { labels: [], datasets: [] };
-        }, ...(ngDevMode ? [{ debugName: "chartData" }] : /* istanbul ignore next */ []));
-        // Plugin to display the total in the center
-        this.centerTextPlugin = {
-            id: 'centerText',
-            beforeDraw: chart => {
-                const { ctx, chartArea: { width, height }, } = chart;
-                const total = chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
-                const padding = 32;
-                ctx.save();
-                ctx.font = 'bold 14px ModernGothic';
-                ctx.fillStyle = '#242424';
-                ctx.textAlign = 'center';
-                ctx.textBaseline = 'middle';
-                ctx.fillText(total.toString(), (width + padding) / 2, (height + padding) / 2);
-                ctx.restore();
-            },
-        };
-        // Plugin to draw lines from the donut segments to the labels
-        this.labelLinePlugin = {
-            id: 'labelLinePlugin',
-            afterDatasetDraw: chart => {
-                const { ctx, data } = chart;
-                const meta = chart.getDatasetMeta(0);
-                const radialOffset = 10; // length of the radial segment (elbow)
-                const horizontalLength = 20; // new length of the horizontal segment
-                const fontSize = 14;
-                ctx.save();
-                ctx.strokeStyle = '#666';
-                ctx.lineWidth = 1;
-                ctx.font = `${fontSize}px ModernGothic`;
-                ctx.fillStyle = '#242424';
-                meta.data.forEach((arc, index) => {
-                    const angle = (arc.startAngle + arc.endAngle) / 2;
-                    const radius = arc.outerRadius;
-                    const centerX = arc.x;
-                    const centerY = arc.y;
-                    // Start point: outer edge of the arc
-                    const startX = centerX + Math.cos(angle) * radius;
-                    const startY = centerY + Math.sin(angle) * radius;
-                    // Elbow: short line outward
-                    const midX = centerX + Math.cos(angle) * (radius + radialOffset);
-                    const midY = centerY + Math.sin(angle) * (radius + radialOffset);
-                    // Extended horizontal line
-                    const direction = Math.cos(angle) >= 0 ? 1 : -1;
-                    const endX = midX + direction * horizontalLength;
-                    const endY = midY;
-                    // Draw line with elbow
-                    ctx.beginPath();
-                    ctx.moveTo(startX, startY);
-                    ctx.lineTo(midX, midY);
-                    ctx.lineTo(endX, endY);
-                    ctx.stroke();
-                    // Draw value at the end
-                    const value = data.datasets[0].data?.[index] ?? '';
-                    const textX = endX + direction * 5;
-                    ctx.textAlign = direction > 0 ? 'left' : 'right';
-                    ctx.textBaseline = 'middle';
-                    ctx.fillText(String(value), textX, endY);
-                });
-                ctx.restore();
-            },
-        };
-        this.donutChartPlugins = [DataLabelsPlugin, this.centerTextPlugin, this.labelLinePlugin];
-        this.donutChartOptions = {
-            responsive: true,
-            cutout: '65%',
-            aspectRatio: 2,
-            layout: {
-                padding: 16,
-            },
-            plugins: {
-                legend: {
-                    onClick: () => null, // Disable legend click events
-                    position: 'right',
-                    labels: {
-                        font: {
-                            family: 'ModernGothic',
-                            size: 14,
-                        },
-                        boxWidth: 14,
-                        padding: 20,
-                    },
-                },
-                tooltip: {
-                    enabled: false,
-                },
-                datalabels: {
-                    display: false,
-                },
-            },
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: DonutChartComponent, isStandalone: true, selector: "ui-donut-chart", inputs: { donutChartData: { classPropertyName: "donutChartData", publicName: "donutChartData", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div style=\"height: 200px\">\n  <canvas baseChart [data]=\"chartData()\" type=\"doughnut\" [options]=\"donutChartOptions\" [plugins]=\"donutChartPlugins\">\n  </canvas>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DonutChartComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-donut-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [BaseChartDirective], template: "<div style=\"height: 200px\">\n  <canvas baseChart [data]=\"chartData()\" type=\"doughnut\" [options]=\"donutChartOptions\" [plugins]=\"donutChartPlugins\">\n  </canvas>\n</div>\n" }]
-        }], propDecorators: { donutChartData: [{ type: i0.Input, args: [{ isSignal: true, alias: "donutChartData", required: false }] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }] } });
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, NgModule, computed, input } from "@angular/core";
+import DataLabelsPlugin from "chartjs-plugin-datalabels";
+import { BaseChartDirective } from "ng2-charts";
+import { Chart, registerables } from "chart.js";
+var DonutChartComponent = class DonutChartComponent {
+	constructor() {
+		this.donutChartData = input(...ngDevMode ? [void 0, { debugName: "donutChartData" }] : /* istanbul ignore next */ []);
+		this.applicationTheme = input("light", ...ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []);
+		this.chartData = computed(() => {
+			const data = this.donutChartData();
+			return data ? {
+				labels: data.labels,
+				datasets: [{
+					data: data.data,
+					backgroundColor: data.backgroundColor,
+					borderWidth: 0
+				}]
+			} : {
+				labels: [],
+				datasets: []
+			};
+		}, ...ngDevMode ? [{ debugName: "chartData" }] : /* istanbul ignore next */ []);
+		this.centerTextPlugin = {
+			id: "centerText",
+			beforeDraw: (chart) => {
+				const { ctx, chartArea: { width, height } } = chart;
+				const total = chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
+				const padding = 32;
+				ctx.save();
+				ctx.font = "bold 14px ModernGothic";
+				ctx.fillStyle = "#242424";
+				ctx.textAlign = "center";
+				ctx.textBaseline = "middle";
+				ctx.fillText(total.toString(), (width + padding) / 2, (height + padding) / 2);
+				ctx.restore();
+			}
+		};
+		this.labelLinePlugin = {
+			id: "labelLinePlugin",
+			afterDatasetDraw: (chart) => {
+				const { ctx, data } = chart;
+				const meta = chart.getDatasetMeta(0);
+				const radialOffset = 10;
+				const horizontalLength = 20;
+				const fontSize = 14;
+				ctx.save();
+				ctx.strokeStyle = "#666";
+				ctx.lineWidth = 1;
+				ctx.font = `${fontSize}px ModernGothic`;
+				ctx.fillStyle = "#242424";
+				meta.data.forEach((arc, index) => {
+					const angle = (arc.startAngle + arc.endAngle) / 2;
+					const radius = arc.outerRadius;
+					const centerX = arc.x;
+					const centerY = arc.y;
+					const startX = centerX + Math.cos(angle) * radius;
+					const startY = centerY + Math.sin(angle) * radius;
+					const midX = centerX + Math.cos(angle) * (radius + radialOffset);
+					const midY = centerY + Math.sin(angle) * (radius + radialOffset);
+					const direction = Math.cos(angle) >= 0 ? 1 : -1;
+					const endX = midX + direction * horizontalLength;
+					const endY = midY;
+					ctx.beginPath();
+					ctx.moveTo(startX, startY);
+					ctx.lineTo(midX, midY);
+					ctx.lineTo(endX, endY);
+					ctx.stroke();
+					const value = data.datasets[0].data?.[index] ?? "";
+					const textX = endX + direction * 5;
+					ctx.textAlign = direction > 0 ? "left" : "right";
+					ctx.textBaseline = "middle";
+					ctx.fillText(String(value), textX, endY);
+				});
+				ctx.restore();
+			}
+		};
+		this.donutChartPlugins = [
+			DataLabelsPlugin,
+			this.centerTextPlugin,
+			this.labelLinePlugin
+		];
+		this.donutChartOptions = {
+			responsive: true,
+			cutout: "65%",
+			aspectRatio: 2,
+			layout: { padding: 16 },
+			plugins: {
+				legend: {
+					onClick: () => null,
+					position: "right",
+					labels: {
+						font: {
+							family: "ModernGothic",
+							size: 14
+						},
+						boxWidth: 14,
+						padding: 20
+					}
+				},
+				tooltip: { enabled: false },
+				datalabels: { display: false }
+			}
+		};
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DonutChartComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.4",
+			type: DonutChartComponent,
+			isStandalone: true,
+			selector: "ui-donut-chart",
+			inputs: {
+				donutChartData: {
+					classPropertyName: "donutChartData",
+					publicName: "donutChartData",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				applicationTheme: {
+					classPropertyName: "applicationTheme",
+					publicName: "applicationTheme",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			ngImport: i0,
+			template: "<div style=\"height: 200px\">\n  <canvas baseChart [data]=\"chartData()\" type=\"doughnut\" [options]=\"donutChartOptions\" [plugins]=\"donutChartPlugins\">\n  </canvas>\n</div>\n",
+			styles: [""],
+			dependencies: [{
+				kind: "directive",
+				type: BaseChartDirective,
+				selector: "canvas[baseChart]",
+				inputs: [
+					"type",
+					"legend",
+					"data",
+					"options",
+					"plugins",
+					"labels",
+					"datasets"
+				],
+				outputs: ["chartClick", "chartHover"],
+				exportAs: ["base-chart"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: DonutChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-donut-chart",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [BaseChartDirective],
+			template: "<div style=\"height: 200px\">\n  <canvas baseChart [data]=\"chartData()\" type=\"doughnut\" [options]=\"donutChartOptions\" [plugins]=\"donutChartPlugins\">\n  </canvas>\n</div>\n"
+		}]
+	}],
+	propDecorators: {
+		donutChartData: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "donutChartData",
+				required: false
+			}]
+		}],
+		applicationTheme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "applicationTheme",
+				required: false
+			}]
+		}]
+	}
+});
 Chart.register(...registerables);
-class DonutChartComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DonutChartComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: DonutChartComponentModule, imports: [BaseChartDirective, DonutChartComponent], exports: [DonutChartComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DonutChartComponentModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DonutChartComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [DonutChartComponent],
-                    imports: [BaseChartDirective, DonutChartComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var DonutChartComponentModule = class DonutChartComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DonutChartComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DonutChartComponentModule,
+			imports: [BaseChartDirective, DonutChartComponent],
+			exports: [DonutChartComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DonutChartComponentModule
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: DonutChartComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			exports: [DonutChartComponent],
+			imports: [BaseChartDirective, DonutChartComponent]
+		}]
+	}]
+});
 export { DonutChartComponent, DonutChartComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-donut-chart.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-donut-chart.mjs.map

package/fesm2022/testgorilla-tgo-ui-components-donut-chart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-donut-chart.mjs","sources":["../../../components/donut-chart/donut-chart.component.ts","../../../components/donut-chart/donut-chart.component.html","../../../components/donut-chart/donut-chart.component.module.ts","../../../components/donut-chart/testgorilla-tgo-ui-components-donut-chart.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { ArcElement, ChartOptions, Plugin } from 'chart.js';\nimport DataLabelsPlugin from 'chartjs-plugin-datalabels';\nimport { BaseChartDirective } from 'ng2-charts';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\nimport { DonutChartData } from './donut-chart.component.model';\n\n@Component({\n  selector: 'ui-donut-chart',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './donut-chart.component.html',\n  styleUrls: ['./donut-chart.component.scss'],\n  imports: [BaseChartDirective],\n})\nexport class DonutChartComponent {\n  donutChartData = input<DonutChartData>();\n  applicationTheme = input<ApplicationTheme>('light');\n\n  readonly chartData = computed(() => {\n    const data = this.donutChartData();\n    return data\n      ? {\n          labels: data.labels,\n          datasets: [\n            {\n              data: data.data,\n              backgroundColor: data.backgroundColor,\n              borderWidth: 0,\n            },\n          ],\n        }\n      : { labels: [], datasets: [] };\n  });\n\n  // Plugin to display the total in the center\n  centerTextPlugin: Plugin<'doughnut'> = {\n    id: 'centerText',\n    beforeDraw: chart => {\n      const {\n        ctx,\n        chartArea: { width, height },\n      } = chart;\n      const total = chart.data.datasets[0].data.reduce((a: number, b: number) => a + b, 0);\n      const padding = 32;\n      ctx.save();\n      ctx.font = 'bold 14px ModernGothic';\n      ctx.fillStyle = '#242424';\n      ctx.textAlign = 'center';\n      ctx.textBaseline = 'middle';\n      ctx.fillText(total.toString(), (width + padding) / 2, (height + padding) / 2);\n      ctx.restore();\n    },\n  };\n\n  // Plugin to draw lines from the donut segments to the labels\n  labelLinePlugin: Plugin<'doughnut'> = {\n    id: 'labelLinePlugin',\n    afterDatasetDraw: chart => {\n      const { ctx, data } = chart;\n      const meta = chart.getDatasetMeta(0);\n      const radialOffset = 10; // length of the radial segment (elbow)\n      const horizontalLength = 20; // new length of the horizontal segment\n      const fontSize = 14;\n\n      ctx.save();\n      ctx.strokeStyle = '#666';\n      ctx.lineWidth = 1;\n      ctx.font = `${fontSize}px ModernGothic`;\n      ctx.fillStyle = '#242424';\n\n      (meta.data as ArcElement[]).forEach((arc, index) => {\n        const angle = (arc.startAngle + arc.endAngle) / 2;\n        const radius = arc.outerRadius;\n        const centerX = arc.x;\n        const centerY = arc.y;\n\n        // Start point: outer edge of the arc\n        const startX = centerX + Math.cos(angle) * radius;\n        const startY = centerY + Math.sin(angle) * radius;\n\n        // Elbow: short line outward\n        const midX = centerX + Math.cos(angle) * (radius + radialOffset);\n        const midY = centerY + Math.sin(angle) * (radius + radialOffset);\n\n        // Extended horizontal line\n        const direction = Math.cos(angle) >= 0 ? 1 : -1;\n        const endX = midX + direction * horizontalLength;\n        const endY = midY;\n\n        // Draw line with elbow\n        ctx.beginPath();\n        ctx.moveTo(startX, startY);\n        ctx.lineTo(midX, midY);\n        ctx.lineTo(endX, endY);\n        ctx.stroke();\n\n        // Draw value at the end\n        const value = data.datasets[0].data?.[index] ?? '';\n        const textX = endX + direction * 5;\n        ctx.textAlign = direction > 0 ? 'left' : 'right';\n        ctx.textBaseline = 'middle';\n        ctx.fillText(String(value), textX, endY);\n      });\n\n      ctx.restore();\n    },\n  };\n\n  public donutChartPlugins: Plugin<'doughnut'>[] = [DataLabelsPlugin, this.centerTextPlugin, this.labelLinePlugin];\n\n  public donutChartOptions: ChartOptions<'doughnut'> = {\n    responsive: true,\n    cutout: '65%',\n    aspectRatio: 2,\n    layout: {\n      padding: 16,\n    },\n    plugins: {\n      legend: {\n        onClick: () => null, // Disable legend click events\n        position: 'right',\n        labels: {\n          font: {\n            family: 'ModernGothic',\n            size: 14,\n          },\n          boxWidth: 14,\n          padding: 20,\n        },\n      },\n      tooltip: {\n        enabled: false,\n      },\n      datalabels: {\n        display: false,\n      },\n    },\n  };\n}\n","<div style=\"height: 200px\">\n  <canvas baseChart [data]=\"chartData()\" type=\"doughnut\" [options]=\"donutChartOptions\" [plugins]=\"donutChartPlugins\">\n  </canvas>\n</div>\n","import { NgModule } from '@angular/core';\nimport { Chart, registerables } from 'chart.js';\nimport { BaseChartDirective } from 'ng2-charts';\n\nimport { DonutChartComponent } from './donut-chart.component';\n\nChart.register(...registerables);\n\n@NgModule({\n  exports: [DonutChartComponent],\n  imports: [BaseChartDirective, DonutChartComponent],\n})\nexport class DonutChartComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"testgorilla-tgo-ui-components-donut-chart.mjs","names":[],"sources":["../../../components/donut-chart/donut-chart.component.ts","../../../components/donut-chart/donut-chart.component.html","../../../components/donut-chart/donut-chart.component.module.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { ArcElement, ChartOptions, Plugin } from 'chart.js';\nimport DataLabelsPlugin from 'chartjs-plugin-datalabels';\nimport { BaseChartDirective } from 'ng2-charts';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\nimport { DonutChartData } from './donut-chart.component.model';\n\n@Component({\n  selector: 'ui-donut-chart',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './donut-chart.component.html',\n  styleUrls: ['./donut-chart.component.scss'],\n  imports: [BaseChartDirective],\n})\nexport class DonutChartComponent {\n  donutChartData = input<DonutChartData>();\n  applicationTheme = input<ApplicationTheme>('light');\n\n  readonly chartData = computed(() => {\n    const data = this.donutChartData();\n    return data\n      ? {\n          labels: data.labels,\n          datasets: [\n            {\n              data: data.data,\n              backgroundColor: data.backgroundColor,\n              borderWidth: 0,\n            },\n          ],\n        }\n      : { labels: [], datasets: [] };\n  });\n\n  // Plugin to display the total in the center\n  centerTextPlugin: Plugin<'doughnut'> = {\n    id: 'centerText',\n    beforeDraw: chart => {\n      const {\n        ctx,\n        chartArea: { width, height },\n      } = chart;\n      const total = chart.data.datasets[0].data.reduce((a: number, b: number) => a + b, 0);\n      const padding = 32;\n      ctx.save();\n      ctx.font = 'bold 14px ModernGothic';\n      ctx.fillStyle = '#242424';\n      ctx.textAlign = 'center';\n      ctx.textBaseline = 'middle';\n      ctx.fillText(total.toString(), (width + padding) / 2, (height + padding) / 2);\n      ctx.restore();\n    },\n  };\n\n  // Plugin to draw lines from the donut segments to the labels\n  labelLinePlugin: Plugin<'doughnut'> = {\n    id: 'labelLinePlugin',\n    afterDatasetDraw: chart => {\n      const { ctx, data } = chart;\n      const meta = chart.getDatasetMeta(0);\n      const radialOffset = 10; // length of the radial segment (elbow)\n      const horizontalLength = 20; // new length of the horizontal segment\n      const fontSize = 14;\n\n      ctx.save();\n      ctx.strokeStyle = '#666';\n      ctx.lineWidth = 1;\n      ctx.font = `${fontSize}px ModernGothic`;\n      ctx.fillStyle = '#242424';\n\n      (meta.data as ArcElement[]).forEach((arc, index) => {\n        const angle = (arc.startAngle + arc.endAngle) / 2;\n        const radius = arc.outerRadius;\n        const centerX = arc.x;\n        const centerY = arc.y;\n\n        // Start point: outer edge of the arc\n        const startX = centerX + Math.cos(angle) * radius;\n        const startY = centerY + Math.sin(angle) * radius;\n\n        // Elbow: short line outward\n        const midX = centerX + Math.cos(angle) * (radius + radialOffset);\n        const midY = centerY + Math.sin(angle) * (radius + radialOffset);\n\n        // Extended horizontal line\n        const direction = Math.cos(angle) >= 0 ? 1 : -1;\n        const endX = midX + direction * horizontalLength;\n        const endY = midY;\n\n        // Draw line with elbow\n        ctx.beginPath();\n        ctx.moveTo(startX, startY);\n        ctx.lineTo(midX, midY);\n        ctx.lineTo(endX, endY);\n        ctx.stroke();\n\n        // Draw value at the end\n        const value = data.datasets[0].data?.[index] ?? '';\n        const textX = endX + direction * 5;\n        ctx.textAlign = direction > 0 ? 'left' : 'right';\n        ctx.textBaseline = 'middle';\n        ctx.fillText(String(value), textX, endY);\n      });\n\n      ctx.restore();\n    },\n  };\n\n  public donutChartPlugins: Plugin<'doughnut'>[] = [DataLabelsPlugin, this.centerTextPlugin, this.labelLinePlugin];\n\n  public donutChartOptions: ChartOptions<'doughnut'> = {\n    responsive: true,\n    cutout: '65%',\n    aspectRatio: 2,\n    layout: {\n      padding: 16,\n    },\n    plugins: {\n      legend: {\n        onClick: () => null, // Disable legend click events\n        position: 'right',\n        labels: {\n          font: {\n            family: 'ModernGothic',\n            size: 14,\n          },\n          boxWidth: 14,\n          padding: 20,\n        },\n      },\n      tooltip: {\n        enabled: false,\n      },\n      datalabels: {\n        display: false,\n      },\n    },\n  };\n}\n","<div style=\"height: 200px\">\n  <canvas baseChart [data]=\"chartData()\" type=\"doughnut\" [options]=\"donutChartOptions\" [plugins]=\"donutChartPlugins\">\n  </canvas>\n</div>\n","import { NgModule } from '@angular/core';\nimport { Chart, registerables } from 'chart.js';\nimport { BaseChartDirective } from 'ng2-charts';\n\nimport { DonutChartComponent } from './donut-chart.component';\n\nChart.register(...registerables);\n\n@NgModule({\n  exports: [DonutChartComponent],\n  imports: [BaseChartDirective, DonutChartComponent],\n})\nexport class DonutChartComponentModule {}\n"],"mappings":";;;;;AAgBA,IAAa,sBAAb,MAAa,oBAAmB;CAPhC,cAAA;EAQE,KAAA,iBAAiB,MAAuB,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;EACxC,KAAA,mBAAmB,MAAwB,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;EAE1C,KAAA,YAAY,eAAc;GACjC,MAAM,OAAO,KAAK,eAAc;GAChC,OAAO,OACH;IACE,QAAQ,KAAK;IACb,UAAU,CACR;KACE,MAAM,KAAK;KACX,iBAAiB,KAAK;KACtB,aAAa;IACd,CACF;GACF,IACD;IAAE,QAAQ,CAAA;IAAI,UAAU,CAAA;GAAE;EAChC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;EAGF,KAAA,mBAAuC;GACrC,IAAI;GACJ,aAAY,UAAQ;IAClB,MAAM,EACJ,KACA,WAAW,EAAE,OAAO,aAClB;IACJ,MAAM,QAAQ,MAAM,KAAK,SAAS,EAAE,CAAC,KAAK,QAAQ,GAAW,MAAc,IAAI,GAAG,CAAC;IACnF,MAAM,UAAU;IAChB,IAAI,KAAI;IACR,IAAI,OAAO;IACX,IAAI,YAAY;IAChB,IAAI,YAAY;IAChB,IAAI,eAAe;IACnB,IAAI,SAAS,MAAM,SAAQ,IAAK,QAAQ,WAAW,IAAI,SAAS,WAAW,CAAC;IAC5E,IAAI,QAAO;GACb;EACD;EAGD,KAAA,kBAAsC;GACpC,IAAI;GACJ,mBAAkB,UAAQ;IACxB,MAAM,EAAE,KAAK,SAAS;IACtB,MAAM,OAAO,MAAM,eAAe,CAAC;IACnC,MAAM,eAAe;IACrB,MAAM,mBAAmB;IACzB,MAAM,WAAW;IAEjB,IAAI,KAAI;IACR,IAAI,cAAc;IAClB,IAAI,YAAY;IAChB,IAAI,OAAO,GAAG,SAAQ;IACtB,IAAI,YAAY;IAEf,KAAK,KAAsB,SAAS,KAAK,UAAS;KACjD,MAAM,SAAS,IAAI,aAAa,IAAI,YAAY;KAChD,MAAM,SAAS,IAAI;KACnB,MAAM,UAAU,IAAI;KACpB,MAAM,UAAU,IAAI;KAGpB,MAAM,SAAS,UAAU,KAAK,IAAI,KAAK,IAAI;KAC3C,MAAM,SAAS,UAAU,KAAK,IAAI,KAAK,IAAI;KAG3C,MAAM,OAAO,UAAU,KAAK,IAAI,KAAK,KAAK,SAAS;KACnD,MAAM,OAAO,UAAU,KAAK,IAAI,KAAK,KAAK,SAAS;KAGnD,MAAM,YAAY,KAAK,IAAI,KAAK,KAAK,IAAI,IAAI;KAC7C,MAAM,OAAO,OAAO,YAAY;KAChC,MAAM,OAAO;KAGb,IAAI,UAAS;KACb,IAAI,OAAO,QAAQ,MAAM;KACzB,IAAI,OAAO,MAAM,IAAI;KACrB,IAAI,OAAO,MAAM,IAAI;KACrB,IAAI,OAAM;KAGV,MAAM,QAAQ,KAAK,SAAS,EAAE,CAAC,OAAO,UAAU;KAChD,MAAM,QAAQ,OAAO,YAAY;KACjC,IAAI,YAAY,YAAY,IAAI,SAAS;KACzC,IAAI,eAAe;KACnB,IAAI,SAAS,OAAO,KAAK,GAAG,OAAO,IAAI;IACzC,CAAC;IAED,IAAI,QAAO;GACb;EACD;EAEM,KAAA,oBAA0C;GAAC;GAAkB,KAAK;GAAkB,KAAK;EAAe;EAExG,KAAA,oBAA8C;GACnD,YAAY;GACZ,QAAQ;GACR,aAAa;GACb,QAAQ,EACN,SAAS,GACV;GACD,SAAS;IACP,QAAQ;KACN,eAAe;KACf,UAAU;KACV,QAAQ;MACN,MAAM;OACJ,QAAQ;OACR,MAAM;MACP;MACD,UAAU;MACV,SAAS;KACV;IACF;IACD,SAAS,EACP,SAAS,MACV;IACD,YAAY,EACV,SAAS,MACV;GACF;EACF;CACF;CA5HY;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAmB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAnB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAmB,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,gBAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,kBAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;GAAA;GAAA,UAAA;GAAA,UChBhC;GAIA,QAAA,CAAA,EAAA;GAAA,cAAA,CAAA;IAAA,MAAA;IAAA,MDUY;IAAkB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,cAAA,YAAA;IAAA,UAAA,CAAA,YAAA;GAAA,CAAA;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AAEjB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAP/B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAgB,iBACT,wBAAwB;GAAM,SAGtC,CAAC,kBAAkB;GAAC,UAAA;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;AER/B,MAAM,SAAS,GAAG,aAAa;AAM/B,IAAa,4BAAb,MAAa,0BAAyB;CAAzB;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAyB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAzB;EAAA,KAAA,OAAA,GAAA,oBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAyB,SAAA,CAF1B,oBAAoB,mBAAmB;GAAA,SAAA,CADvC,mBAAmB;EAAA,CAAA;CAAA;CAGlB;EAAA,KAAA,OAAA,GAAA,oBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;EAAyB,CAAA;CAAA;;AAAzB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAyB,YAAA,CAAA;EAJrC,MAAA;EAAS,MAAA,CAAA;GACR,SAAS,CAAC,mBAAmB;GAC7B,SAAS,CAAC,oBAAoB,mBAAmB;EAClD,CAAA"}