@area8975/ui 0.1.1-dev.7 → 0.1.1-dev.8

package/fesm2022/area8975-ui.mjs

@@ -657,7 +657,10 @@ var UiChartComponent = class UiChartComponent {
 		});
 		effect(() => {
 			const chart = this.chart();
-			if (chart) this.applyHidden(chart);
+			if (chart) {
+				this.applyHidden(chart);
+				this.applyEmphasis();
+			}
 		});
 		inject(DestroyRef).onDestroy(() => {
 			this.destroyed = true;
@@ -673,16 +676,18 @@ var UiChartComponent = class UiChartComponent {
 		}
 	}
 	applyEmphasis() {
-		const emphasis = untracked(this.emphasis);
 		const names = this.seriesNames();
+		const emphasis = untracked(this.emphasis);
+		const active = emphasis && names.includes(emphasis) && !untracked(this.hiddenSeries).includes(emphasis) ? emphasis : null;
 		const groups = this.canvas().nativeElement.querySelectorAll(".apexcharts-series[data\\:realIndex]");
 		for (const group of groups) {
 			const name = names[Number(group.getAttribute("data:realIndex"))];
-			group.classList.toggle("ui-chart-series--faded", !!emphasis && name !== emphasis);
+			group.classList.toggle("ui-chart-series--faded", !!active && name !== active);
 		}
 	}
 	seriesNames() {
-		return (untracked(this.options).series ?? []).map((item) => typeof item === "object" && item !== null && "name" in item ? item.name ?? null : null);
+		const { series = [], labels = [] } = untracked(this.options);
+		return series.map((item, index) => typeof item === "object" && item !== null && "name" in item ? item.name ?? null : labels[index] ?? null);
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -1788,6 +1793,204 @@ const LineChartCurves = [
 	"smooth",
 	"stepline"
 ];
+const percentFormatter = new Intl.NumberFormat("en-GB", {
+	style: "percent",
+	maximumFractionDigits: 1
+});
+var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
+	variant = input("pie", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	totalLabel = input("Total", ...ngDevMode ? [{ debugName: "totalLabel" }] : /* istanbul ignore next */ []);
+	values = computed(() => this.series()[0]?.data ?? [], ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
+	isEmpty = computed(() => !this.values().some((value) => value !== null && value > 0), ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
+	isMuted = computed(() => {
+		const highlight = this.highlight();
+		return this.categories().map((name) => !!highlight && !highlight.includes(name));
+	}, ...ngDevMode ? [{ debugName: "isMuted" }] : /* istanbul ignore next */ []);
+	styles = computed(() => {
+		const highlight = this.highlight();
+		const muted = this.isMuted();
+		return this.categories().map((name, index) => muted[index] ? {
+			colour: CHART_INK.context,
+			dashed: false
+		} : chartSeriesStyle(highlight ? highlight.indexOf(name) : index, false));
+	}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
+	legendItems = computed(() => {
+		const highlight = this.highlight();
+		const items = this.categories().map((name, index) => ({
+			name,
+			...this.styles()[index]
+		})).filter((_, index) => !this.isMuted()[index]);
+		return highlight ? items.sort((a, b) => highlight.indexOf(a.name) - highlight.indexOf(b.name)) : items;
+	}, ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
+	slices = computed(() => {
+		const hidden = this.hiddenSeries();
+		const values = this.values();
+		const colours = this.colours();
+		return this.categories().map((name, index) => ({
+			name,
+			value: values[index] ?? 0,
+			colour: colours[index]
+		})).filter((slice) => !hidden.includes(slice.name));
+	}, ...ngDevMode ? [{ debugName: "slices" }] : /* istanbul ignore next */ []);
+	chartOptions = computed(() => {
+		const base = baseChartOptions();
+		const slices = this.slices();
+		const donut = this.variant() === "donut";
+		const total = slices.reduce((sum, slice) => sum + slice.value, 0);
+		const centreText = {
+			fontSize: "12px",
+			color: CHART_INK.muted,
+			offsetY: -4
+		};
+		return mergeChartOptions({
+			...base,
+			chart: {
+				...base.chart,
+				type: donut ? "donut" : "pie",
+				height: this.height()
+			},
+			colors: slices.map((slice) => slice.colour),
+			labels: slices.map((slice) => slice.name),
+			series: slices.map((slice) => slice.value),
+			stroke: {
+				show: true,
+				width: 2,
+				colors: [CHART_INK.surface]
+			},
+			states: {
+				...base.states,
+				hover: { filter: { type: "darken" } }
+			},
+			plotOptions: { pie: {
+				expandOnClick: false,
+				donut: {
+					size: "65%",
+					labels: {
+						show: donut,
+						name: centreText,
+						value: {
+							fontSize: "20px",
+							fontWeight: 600,
+							color: CHART_INK.text,
+							offsetY: 4,
+							formatter: (value) => this.formatValue(Number(value))
+						},
+						total: {
+							show: true,
+							showAlways: true,
+							label: this.totalLabel(),
+							...centreText,
+							formatter: () => this.formatValue(total)
+						}
+					}
+				}
+			} },
+			tooltip: {
+				theme: "light",
+				fillSeriesColor: false,
+				custom: ({ seriesIndex }) => {
+					const slice = slices[seriesIndex];
+					return slice ? chartTooltipHtml("", [{
+						colour: slice.colour,
+						name: slice.name,
+						value: this.formatValue(slice.value)
+					}], total ? `${percentFormatter.format(slice.value / total)} of total` : "") : "";
+				}
+			}
+		}, this.options());
+	}, ...ngDevMode ? [{ debugName: "chartOptions" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiPieChartComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiPieChartComponent,
+		isStandalone: true,
+		selector: "ui-pie-chart",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			totalLabel: {
+				classPropertyName: "totalLabel",
+				publicName: "totalLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "block w-full min-w-0" },
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n",
+		dependencies: [{
+			kind: "component",
+			type: UiChartFrameComponent,
+			selector: "ui-chart-frame",
+			inputs: [
+				"options",
+				"ariaLabel",
+				"categories",
+				"series",
+				"legendItems",
+				"legendNote",
+				"hiddenSeries",
+				"valueFormatter",
+				"categoryLabel",
+				"height",
+				"emptyText",
+				"loading",
+				"empty",
+				"showTable"
+			],
+			outputs: ["hiddenSeriesChange"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiPieChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-pie-chart",
+			imports: [UiChartFrameComponent],
+			host: { class: "block w-full min-w-0" },
+			template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n"
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		totalLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "totalLabel",
+				required: false
+			}]
+		}]
+	}
+});
+const PieChartVariants = ["pie", "donut"];
 var UiCheckboxComponent = class UiCheckboxComponent {
 	value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
 	id = input("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
@@ -11572,6 +11775,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { AlertAppearances, AlertIntents, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CalendarModes, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_LOADING_TYPES, UiAlertComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiProgressComponent, UiRadioComponent, UiSelectComponent, UiSidebarComponent, UiSidebarItemComponent, UiSkeletonComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTextareaComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, WeekStarts, defaultDateRangePresets, financialYearPreset, lastDaysPreset, monthPreset, thisWeekPreset, todayPreset, yearPreset };
+export { AlertAppearances, AlertIntents, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CalendarModes, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, PieChartVariants, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_LOADING_TYPES, UiAlertComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiPieChartComponent, UiProgressComponent, UiRadioComponent, UiSelectComponent, UiSidebarComponent, UiSidebarItemComponent, UiSkeletonComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTextareaComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, WeekStarts, defaultDateRangePresets, financialYearPreset, lastDaysPreset, monthPreset, thisWeekPreset, todayPreset, yearPreset };
 
 //# sourceMappingURL=area8975-ui.mjs.map