@sinequa/atomic-angular 1.17.0 → 2.1.0

package/fesm2022/sinequa-atomic-angular-charts.mjs

@@ -0,0 +1,969 @@
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Service, afterNextRender, computed, effect, inject, input, output, signal, viewChild } from "@angular/core";
+import { Chart, registerables } from "chart.js";
+import { cn } from "cn";
+import { galactikPrimitive, galactikSemantic, paletteColor, seriesPalette, timelinePalette, toPercentages, toSeries, withAlpha } from "@sinequa/atomic-angular";
+let registered = false;
+function setupCharts() {
+	if (registered) return;
+	Chart.register(...registerables);
+	registered = true;
+}
+function applyChartTheme() {
+	Chart.defaults.color = galactikSemantic("font-neutral-muted");
+	Chart.defaults.borderColor = galactikSemantic("stroke-neutral-muted");
+}
+var ChartThemeService = class ChartThemeService {
+	dark = signal(hasDarkClass(), ...ngDevMode ? [{ debugName: "dark" }] : /* istanbul ignore next */ []);
+	isDark = this.dark.asReadonly();
+	constructor() {
+		const observer = new MutationObserver(() => this.dark.set(hasDarkClass()));
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["class"]
+		});
+		inject(DestroyRef).onDestroy(() => observer.disconnect());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ChartThemeService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ChartThemeService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ChartThemeService,
+	decorators: [{ type: Service }],
+	ctorParameters: () => []
+});
+function hasDarkClass() {
+	return document.documentElement.classList.contains("dark");
+}
+var ChartCanvasComponent = class ChartCanvasComponent {
+	cn = cn;
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	config = input.required(...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
+	plugins = input([], ...ngDevMode ? [{ debugName: "plugins" }] : /* istanbul ignore next */ []);
+	canvas = viewChild.required("canvas", ...ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []);
+	destroyRef = inject(DestroyRef);
+	theme = inject(ChartThemeService);
+	chart;
+	currentType;
+	currentDark;
+	constructor() {
+		setupCharts();
+		afterNextRender(() => {
+			const dark = this.theme.isDark();
+			applyChartTheme();
+			this.chart = new Chart(this.canvas().nativeElement, this.withDefaults(this.config(), this.plugins()));
+			this.currentType = this.config().type;
+			this.currentDark = dark;
+		});
+		effect(() => {
+			const config = this.config();
+			const dark = this.theme.isDark();
+			if (!this.chart) return;
+			if (this.currentType !== config.type || this.currentDark !== dark) {
+				applyChartTheme();
+				this.chart.destroy();
+				this.chart = new Chart(this.canvas().nativeElement, this.withDefaults(config, this.plugins()));
+				this.currentType = config.type;
+				this.currentDark = dark;
+				return;
+			}
+			this.chart.data = config.data;
+			this.chart.options = {
+				...this.chart.options,
+				...config.options ?? {}
+			};
+			this.chart.update();
+		});
+		this.destroyRef.onDestroy(() => this.chart?.destroy());
+	}
+	withDefaults(config, plugins) {
+		return {
+			...config,
+			plugins: [...config.plugins ?? [], ...plugins],
+			options: {
+				responsive: true,
+				maintainAspectRatio: false,
+				...config.options ?? {}
+			}
+		};
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ChartCanvasComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: ChartCanvasComponent,
+		isStandalone: true,
+		selector: "ChartCanvas, chart-canvas, chartcanvas",
+		inputs: {
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			config: {
+				classPropertyName: "config",
+				publicName: "config",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			plugins: {
+				classPropertyName: "plugins",
+				publicName: "plugins",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "cn(\"block h-full w-full\", class())" } },
+		viewQueries: [{
+			propertyName: "canvas",
+			first: true,
+			predicate: ["canvas"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `<canvas #canvas class="block size-full"></canvas>`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ChartCanvasComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ChartCanvas, chart-canvas, chartcanvas",
+			template: `<canvas #canvas class="block size-full"></canvas>`,
+			host: { "[class]": "cn(\"block h-full w-full\", class())" }
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		config: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "config",
+				required: true
+			}]
+		}],
+		plugins: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "plugins",
+				required: false
+			}]
+		}],
+		canvas: [{
+			type: i0.ViewChild,
+			args: ["canvas", { isSignal: true }]
+		}]
+	}
+});
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const MIN_DRAG_PX = 4;
+function createTimelineBrushPlugin(onSelect) {
+	let startX = null;
+	let currentX = null;
+	return {
+		id: "timeline-brush",
+		afterEvent(chart, args) {
+			const event = args.event;
+			const area = chart.chartArea;
+			const x = event.x ?? 0;
+			switch (event.type) {
+				case "mousedown":
+					if (x >= area.left && x <= area.right) {
+						startX = x;
+						currentX = x;
+					}
+					break;
+				case "mousemove":
+					if (startX !== null) {
+						currentX = clamp(x, area.left, area.right);
+						args.changed = true;
+					}
+					break;
+				case "mouseup":
+				case "mouseout":
+					if (startX !== null && currentX !== null && Math.abs(currentX - startX) > MIN_DRAG_PX) {
+						const xScale = chart.scales["x"];
+						const labels = chart.data.labels ?? [];
+						if (xScale && labels.length > 0) {
+							const i1 = clamp(Math.round(xScale.getValueForPixel(Math.min(startX, currentX)) ?? 0), 0, labels.length - 1);
+							const i2 = clamp(Math.round(xScale.getValueForPixel(Math.max(startX, currentX)) ?? 0), 0, labels.length - 1);
+							const from = labels[i1];
+							const to = labels[i2];
+							if (from != null && to != null) onSelect(String(from), String(to));
+						}
+					}
+					startX = null;
+					currentX = null;
+					args.changed = true;
+			}
+		},
+		afterDraw(chart) {
+			if (startX === null || currentX === null) return;
+			const { ctx, chartArea: area } = chart;
+			const left = Math.min(startX, currentX);
+			const right = Math.max(startX, currentX);
+			ctx.save();
+			ctx.fillStyle = withAlpha(galactikPrimitive("blue-500"), .15);
+			ctx.strokeStyle = withAlpha(galactikPrimitive("blue-500"), .5);
+			ctx.fillRect(left, area.top, right - left, area.bottom - area.top);
+			ctx.strokeRect(left, area.top, right - left, area.bottom - area.top);
+			ctx.restore();
+		}
+	};
+}
+function createAxisClickPlugin(onSelect, axes = ["x", "y"]) {
+	let hovering = false;
+	const setCursor = (chart, hover) => {
+		if (hover === hovering) return;
+		hovering = hover;
+		chart.canvas.style.cursor = hover ? "pointer" : "";
+	};
+	return {
+		id: "axis-click",
+		afterEvent(chart, args) {
+			const event = args.event;
+			const x = event.x ?? 0;
+			const y = event.y ?? 0;
+			switch (event.type) {
+				case "click": {
+					const hit = hitTest(chart, axes, x, y);
+					if (hit) onSelect(hit);
+					break;
+				}
+				case "mousemove":
+					setCursor(chart, hitTest(chart, axes, x, y) !== null);
+					break;
+				case "mouseout": setCursor(chart, false);
+			}
+		},
+		afterDestroy(chart) {
+			if (hovering) {
+				hovering = false;
+				chart.canvas.style.cursor = "";
+			}
+		}
+	};
+}
+function hitTest(chart, axes, x, y) {
+	for (const axis of axes) {
+		const scale = chart.scales[axis];
+		if (!scale || !isInsideScaleBox(scale, x, y)) continue;
+		const tick = nearestTick(scale, scale.isHorizontal() ? x : y);
+		if (tick) return {
+			axis,
+			index: tick.index,
+			label: tick.label
+		};
+	}
+	return null;
+}
+function isInsideScaleBox(scale, x, y) {
+	return x >= scale.left && x <= scale.right && y >= scale.top && y <= scale.bottom;
+}
+function nearestTick(scale, position) {
+	const ticks = scale.ticks;
+	if (ticks.length === 0) return null;
+	let best = 0;
+	let bestDistance = Number.POSITIVE_INFINITY;
+	for (let i = 0; i < ticks.length; i++) {
+		const distance = Math.abs(scale.getPixelForTick(i) - position);
+		if (distance < bestDistance) {
+			bestDistance = distance;
+			best = i;
+		}
+	}
+	const span = scale.isHorizontal() ? scale.width : scale.height;
+	if (bestDistance > span / ticks.length / 2 + 2) return null;
+	const value = ticks[best]?.value ?? best;
+	return {
+		index: value,
+		label: scale.getLabelForValue(value)
+	};
+}
+const MASK_UNIT = {
+	"YYYY-MM-DD-hh-mm": "minute",
+	"YYYY-MM-DD-hh": "hour",
+	"YYYY-MM-DD": "day",
+	"YYYY-WW": "week",
+	"YYYY-MM": "month",
+	YYYY: "year"
+};
+function buildTimeline(inputs, options = {}) {
+	const parsed = inputs.map((input) => ({
+		label: input.label,
+		primary: input.primary ?? false,
+		points: toPointMap(input.aggregation, input.weightField)
+	}));
+	const axis = buildAxis(parsed, options);
+	const series = parsed.map((entry) => {
+		const range = timestampRange(entry.points);
+		return {
+			label: entry.label,
+			primary: entry.primary,
+			values: axis.timestamps.map((ts) => {
+				const value = entry.points.get(ts);
+				if (value !== void 0) return value;
+				if (range && ts >= range.first && ts <= range.last) return 0;
+				return null;
+			})
+		};
+	});
+	return {
+		labels: axis.labels,
+		series
+	};
+}
+function buildAxis(series, options) {
+	const extentSources = series.some((s) => s.primary) ? series.filter((s) => s.primary) : series;
+	const tsToKey = /* @__PURE__ */ new Map();
+	for (const entry of extentSources) for (const ts of entry.points.keys()) if (!tsToKey.has(ts)) tsToKey.set(ts, formatFallback(ts));
+	for (const entry of series) for (const ts of entry.points.keys()) if (!tsToKey.has(ts) && extentSources === series) tsToKey.set(ts, formatFallback(ts));
+	const sorted = [...tsToKey.keys()].sort((a, b) => a - b);
+	const unit = options.mask ? MASK_UNIT[options.mask] : void 0;
+	if (!unit || sorted.length < 2) return {
+		labels: sorted.map((ts) => formatKey(ts, options.mask)),
+		timestamps: sorted
+	};
+	const maxBuckets = options.maxBuckets ?? 5e3;
+	const last = sorted[sorted.length - 1] ?? 0;
+	const labels = [];
+	const timestamps = [];
+	let cursor = new Date(sorted[0] ?? 0);
+	for (let i = 0; i < maxBuckets && cursor.getTime() <= last; i++) {
+		const ts = cursor.getTime();
+		timestamps.push(ts);
+		labels.push(formatKey(ts, options.mask));
+		cursor = stepDate(cursor, unit);
+	}
+	return {
+		labels,
+		timestamps
+	};
+}
+function timestampRange(points) {
+	let first;
+	let last;
+	for (const ts of points.keys()) {
+		if (first === void 0 || ts < first) first = ts;
+		if (last === void 0 || ts > last) last = ts;
+	}
+	return first === void 0 || last === void 0 ? void 0 : {
+		first,
+		last
+	};
+}
+function toPointMap(aggregation, weightField) {
+	const points = /* @__PURE__ */ new Map();
+	if (!aggregation) return points;
+	for (const item of aggregation.items) {
+		const date = parseBucketDate(String(item.value ?? ""));
+		if (!date) continue;
+		points.set(date.getTime(), readValue(item, weightField));
+	}
+	return points;
+}
+function readValue(item, weightField) {
+	if (weightField) {
+		const raw = item.operatorResults?.[weightField];
+		if (raw instanceof Date) return raw.getTime();
+		return Number(raw ?? 0);
+	}
+	return Number(item.count ?? 0);
+}
+function parseBucketDate(key) {
+	const s = key.trim();
+	if (s.length === 0) return null;
+	if (/^\d{4}$/.test(s)) return new Date(Number(s), 0, 1);
+	const ym = /^(\d{4})-(\d{2})$/.exec(s);
+	if (ym) return new Date(Number(ym[1]), Number(ym[2]) - 1, 1);
+	const ymd = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
+	if (ymd) return new Date(Number(ymd[1]), Number(ymd[2]) - 1, Number(ymd[3]));
+	const parsed = new Date(s.replace(" ", "T"));
+	return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+function stepDate(date, unit) {
+	const d = new Date(date.getTime());
+	switch (unit) {
+		case "minute":
+			d.setMinutes(d.getMinutes() + 1);
+			break;
+		case "hour":
+			d.setHours(d.getHours() + 1);
+			break;
+		case "day":
+			d.setDate(d.getDate() + 1);
+			break;
+		case "week":
+			d.setDate(d.getDate() + 7);
+			break;
+		case "month":
+			d.setMonth(d.getMonth() + 1);
+			break;
+		case "year": d.setFullYear(d.getFullYear() + 1);
+	}
+	return d;
+}
+const pad = (n) => String(n).padStart(2, "0");
+function formatKey(timestamp, mask) {
+	const d = new Date(timestamp);
+	switch (mask) {
+		case "YYYY": return String(d.getFullYear());
+		case "YYYY-MM": return `${d.getFullYear()}-${pad(d.getMonth() + 1)}`;
+		case "YYYY-WW":
+		case "YYYY-MM-DD": return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+		case "YYYY-MM-DD-hh": return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:00`;
+		case "YYYY-MM-DD-hh-mm": return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+		default: return formatFallback(timestamp);
+	}
+}
+function formatFallback(timestamp) {
+	const d = new Date(timestamp);
+	return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+function pickResolution(candidates, rangeMonths) {
+	if (candidates.length === 0) return void 0;
+	let best;
+	for (const candidate of candidates) {
+		const unlimited = candidate.maxMonths === -1;
+		if (!unlimited && candidate.maxMonths < rangeMonths) continue;
+		if (!best) {
+			best = candidate;
+			continue;
+		}
+		const bestUnlimited = best.maxMonths === -1;
+		if (bestUnlimited && !unlimited) best = candidate;
+		else if (!bestUnlimited && !unlimited && candidate.maxMonths < best.maxMonths) best = candidate;
+	}
+	return best ?? candidates[candidates.length - 1];
+}
+function monthsBetween(from, to) {
+	return (to.getFullYear() - from.getFullYear()) * 12 + (to.getMonth() - from.getMonth());
+}
+var AggregationChartComponent = class AggregationChartComponent {
+	cn = cn;
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	aggregation = input(void 0, ...ngDevMode ? [{ debugName: "aggregation" }] : /* istanbul ignore next */ []);
+	type = input("bar", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	limit = input(10, ...ngDevMode ? [{ debugName: "limit" }] : /* istanbul ignore next */ []);
+	asPercentage = input(false, ...ngDevMode ? [{ debugName: "asPercentage" }] : /* istanbul ignore next */ []);
+	weightField = input(void 0, ...ngDevMode ? [{ debugName: "weightField" }] : /* istanbul ignore next */ []);
+	emptyLabel = input("No data", ...ngDevMode ? [{ debugName: "emptyLabel" }] : /* istanbul ignore next */ []);
+	itemSelected = output();
+	palette = signal(seriesPalette(), ...ngDevMode ? [{ debugName: "palette" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterNextRender(() => this.palette.set(seriesPalette()));
+	}
+	series = computed(() => toSeries(this.aggregation(), {
+		limit: this.limit(),
+		weightField: this.weightField()
+	}), ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+	isEmpty = computed(() => this.series().labels.length === 0, ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
+	config = computed(() => {
+		const series = this.series();
+		const type = this.type();
+		const circular = type === "pie" || type === "doughnut";
+		const percentages = toPercentages(series.values);
+		const plotted = this.asPercentage() ? percentages : series.values;
+		const palette = this.palette();
+		return {
+			type,
+			data: {
+				labels: series.labels,
+				datasets: [{
+					label: this.label(),
+					data: plotted,
+					backgroundColor: circular ? [...palette] : paletteColor(palette, 0)
+				}]
+			},
+			options: {
+				plugins: {
+					legend: {
+						display: circular,
+						position: "right"
+					},
+					tooltip: { callbacks: { label: (ctx) => {
+						const index = ctx.dataIndex;
+						const count = series.values[index] ?? 0;
+						return ` ${(percentages[index] ?? 0).toFixed(1)}% (${count})`;
+					} } }
+				},
+				scales: circular ? {} : { y: {
+					beginAtZero: true,
+					ticks: this.asPercentage() ? { callback: (value) => `${value}%` } : {}
+				} },
+				onClick: (_event, elements) => {
+					const first = elements[0];
+					if (!first) return;
+					const label = series.labels[first.index];
+					if (label != null) this.itemSelected.emit(label);
+				}
+			}
+		};
+	}, ...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AggregationChartComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AggregationChartComponent,
+		isStandalone: true,
+		selector: "AggregationChart, aggregation-chart, aggregationchart",
+		inputs: {
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			aggregation: {
+				classPropertyName: "aggregation",
+				publicName: "aggregation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			limit: {
+				classPropertyName: "limit",
+				publicName: "limit",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			asPercentage: {
+				classPropertyName: "asPercentage",
+				publicName: "asPercentage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			weightField: {
+				classPropertyName: "weightField",
+				publicName: "weightField",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyLabel: {
+				classPropertyName: "emptyLabel",
+				publicName: "emptyLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { itemSelected: "itemSelected" },
+		host: { properties: { "class": "cn(\"block h-full w-full\", class())" } },
+		ngImport: i0,
+		template: `
+    @if (isEmpty()) {
+      <p class="flex h-full items-center justify-center text-sm text-(--font-neutral-muted)">{{ emptyLabel() }}</p>
+    } @else {
+      <ChartCanvas [config]="config()" />
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: ChartCanvasComponent,
+			selector: "ChartCanvas, chart-canvas, chartcanvas",
+			inputs: [
+				"class",
+				"config",
+				"plugins"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AggregationChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "AggregationChart, aggregation-chart, aggregationchart",
+			imports: [ChartCanvasComponent],
+			template: `
+    @if (isEmpty()) {
+      <p class="flex h-full items-center justify-center text-sm text-(--font-neutral-muted)">{{ emptyLabel() }}</p>
+    } @else {
+      <ChartCanvas [config]="config()" />
+    }
+  `,
+			host: { "[class]": "cn(\"block h-full w-full\", class())" }
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		aggregation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aggregation",
+				required: false
+			}]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		limit: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "limit",
+				required: false
+			}]
+		}],
+		asPercentage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "asPercentage",
+				required: false
+			}]
+		}],
+		weightField: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "weightField",
+				required: false
+			}]
+		}],
+		emptyLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyLabel",
+				required: false
+			}]
+		}],
+		itemSelected: [{
+			type: i0.Output,
+			args: ["itemSelected"]
+		}]
+	}
+});
+var AggregationTimelineComponent = class AggregationTimelineComponent {
+	cn = cn;
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	series = input([], ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+	mask = input("YYYY-MM-DD", ...ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []);
+	enableSelection = input(true, ...ngDevMode ? [{ debugName: "enableSelection" }] : /* istanbul ignore next */ []);
+	dashSecondary = input(false, ...ngDevMode ? [{ debugName: "dashSecondary" }] : /* istanbul ignore next */ []);
+	emptyLabel = input("No data", ...ngDevMode ? [{ debugName: "emptyLabel" }] : /* istanbul ignore next */ []);
+	rangeSelected = output();
+	brush = createTimelineBrushPlugin((from, to) => this.rangeSelected.emit({
+		from,
+		to
+	}));
+	palette = signal(timelinePalette(), ...ngDevMode ? [{ debugName: "palette" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterNextRender(() => this.palette.set(timelinePalette()));
+	}
+	plugins = computed(() => this.enableSelection() ? [this.brush] : [], ...ngDevMode ? [{ debugName: "plugins" }] : /* istanbul ignore next */ []);
+	timeline = computed(() => buildTimeline(this.series(), { mask: this.mask() }), ...ngDevMode ? [{ debugName: "timeline" }] : /* istanbul ignore next */ []);
+	isEmpty = computed(() => this.timeline().labels.length === 0, ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
+	config = computed(() => {
+		const { labels, series } = this.timeline();
+		const filled = series.length === 1;
+		const dashSecondary = this.dashSecondary();
+		const palette = this.palette();
+		const datasets = series.map((entry, index) => {
+			const color = paletteColor(palette, dashSecondary ? Math.floor(index / 2) : index);
+			const secondary = dashSecondary && index % 2 === 1;
+			return {
+				label: entry.label,
+				data: entry.values,
+				borderColor: color,
+				backgroundColor: filled ? withAlpha(color, .18) : color,
+				borderWidth: 1.5,
+				borderDash: secondary ? [4, 4] : void 0,
+				stepped: "middle",
+				fill: filled && !secondary,
+				spanGaps: true,
+				pointRadius: 0,
+				pointHoverRadius: 4
+			};
+		});
+		return {
+			type: "line",
+			data: {
+				labels,
+				datasets
+			},
+			options: {
+				events: [
+					"mousedown",
+					"mousemove",
+					"mouseup",
+					"mouseout",
+					"click",
+					"touchstart",
+					"touchmove",
+					"touchend"
+				],
+				interaction: {
+					mode: "index",
+					intersect: false
+				},
+				scales: {
+					x: {
+						type: "category",
+						grid: { display: false }
+					},
+					y: { beginAtZero: true }
+				},
+				plugins: { legend: {
+					display: datasets.length > 1,
+					position: "bottom"
+				} }
+			}
+		};
+	}, ...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AggregationTimelineComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AggregationTimelineComponent,
+		isStandalone: true,
+		selector: "AggregationTimeline, aggregation-timeline, aggregationtimeline",
+		inputs: {
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			series: {
+				classPropertyName: "series",
+				publicName: "series",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mask: {
+				classPropertyName: "mask",
+				publicName: "mask",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			enableSelection: {
+				classPropertyName: "enableSelection",
+				publicName: "enableSelection",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dashSecondary: {
+				classPropertyName: "dashSecondary",
+				publicName: "dashSecondary",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyLabel: {
+				classPropertyName: "emptyLabel",
+				publicName: "emptyLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { rangeSelected: "rangeSelected" },
+		host: { properties: { "class": "cn(\"block h-full w-full\", class())" } },
+		ngImport: i0,
+		template: `
+    @if (isEmpty()) {
+      <p class="flex h-full items-center justify-center text-sm text-(--font-neutral-muted)">{{ emptyLabel() }}</p>
+    } @else {
+      <ChartCanvas [config]="config()" [plugins]="plugins()" />
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: ChartCanvasComponent,
+			selector: "ChartCanvas, chart-canvas, chartcanvas",
+			inputs: [
+				"class",
+				"config",
+				"plugins"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AggregationTimelineComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "AggregationTimeline, aggregation-timeline, aggregationtimeline",
+			imports: [ChartCanvasComponent],
+			template: `
+    @if (isEmpty()) {
+      <p class="flex h-full items-center justify-center text-sm text-(--font-neutral-muted)">{{ emptyLabel() }}</p>
+    } @else {
+      <ChartCanvas [config]="config()" [plugins]="plugins()" />
+    }
+  `,
+			host: { "[class]": "cn(\"block h-full w-full\", class())" }
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		series: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "series",
+				required: false
+			}]
+		}],
+		mask: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mask",
+				required: false
+			}]
+		}],
+		enableSelection: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "enableSelection",
+				required: false
+			}]
+		}],
+		dashSecondary: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dashSecondary",
+				required: false
+			}]
+		}],
+		emptyLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyLabel",
+				required: false
+			}]
+		}],
+		rangeSelected: [{
+			type: i0.Output,
+			args: ["rangeSelected"]
+		}]
+	}
+});
+export { AggregationChartComponent, AggregationTimelineComponent, ChartCanvasComponent, ChartThemeService, applyChartTheme, buildTimeline, createAxisClickPlugin, createTimelineBrushPlugin, monthsBetween, parseBucketDate, pickResolution, setupCharts };
+
+//# sourceMappingURL=sinequa-atomic-angular-charts.mjs.map