@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-micro-chart.mjs

@@ -0,0 +1,928 @@
+import * as i0 from '@angular/core';
+import { inject, Renderer2, ViewContainerRef, Injector, DOCUMENT, PLATFORM_ID, DestroyRef, ElementRef, input, numberAttribute, booleanAttribute, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
+import { curveStep, curveBumpX, curveCatmullRom, curveLinear, select, scalePoint, min, max, scaleLinear, area, line, pointer, scaleBand, arc, pie, scaleOrdinal, schemeTableau10, interpolate } from 'd3';
+import { fromEvent } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import { PositionManager } from '@ngstarter-ui/components/overlay';
+
+class BaseChartTooltip {
+    _tooltipOrigin;
+    _tooltipPortal;
+    _overlayRef;
+    _renderer = inject(Renderer2);
+    _overlay = inject(Overlay);
+    _viewContainerRef = inject(ViewContainerRef);
+    _injector = inject(Injector);
+    _document = inject(DOCUMENT);
+    _createTooltipOrigin() {
+        let tooltipOrigin = this._document.querySelector('.ngs-mchart-tooltip-origin');
+        if (!tooltipOrigin) {
+            tooltipOrigin = this._renderer.createElement('div');
+            tooltipOrigin.classList.add('ngs-mchart-tooltip-origin');
+            this._renderer.appendChild(this._document.body, tooltipOrigin);
+        }
+        this._tooltipOrigin = tooltipOrigin;
+        this._renderer.setStyle(this._tooltipOrigin, 'width', '0');
+        this._renderer.setStyle(this._tooltipOrigin, 'height', '0');
+        this._renderer.setStyle(this._tooltipOrigin, 'z-index', '-1');
+        this._renderer.setStyle(this._tooltipOrigin, 'position', 'fixed');
+        this._renderer.setStyle(this._tooltipOrigin, 'opacity', '0');
+    }
+    _showTooltip(data) {
+        this._overlayRef?.detach();
+        this._overlayRef = this._overlay.create(this._getOverlayConfig());
+        this._overlayRef.attach(this._getContentPortal(data));
+    }
+    _hideTooltip() {
+        this._overlayRef?.detach();
+    }
+    _setTooltipPositionByEvent(e) {
+        const gap = 10;
+        this._renderer.setStyle(this._tooltipOrigin, 'left', (e.clientX - gap) + 'px');
+        this._renderer.setStyle(this._tooltipOrigin, 'top', (e.clientY) + 'px');
+        this._renderer.setStyle(this._tooltipOrigin, 'width', (gap * 2) + 'px');
+    }
+    _setTooltipVisible() {
+        this._renderer.addClass(this._tooltipOrigin, 'is-visible');
+    }
+    _setTooltipInVisible() {
+        this._renderer.removeClass(this._tooltipOrigin, 'is-visible');
+    }
+    _getContentPortal(data) {
+        this._tooltipPortal = new TemplatePortal(this.getTooltipTemplateRef(), this._viewContainerRef, {
+            '$implicit': {
+                ...data
+            }
+        }, this._injector);
+        return this._tooltipPortal;
+    }
+    _getOverlayConfig() {
+        return new OverlayConfig({
+            panelClass: 'ngs-mchart-tooltip-overlay',
+            positionStrategy: this._getOverlayPositionStrategy(),
+            scrollStrategy: this._overlay.scrollStrategies.reposition()
+        });
+    }
+    _getOverlayPositionStrategy() {
+        return this._overlay
+            .position()
+            .flexibleConnectedTo(this._tooltipOrigin)
+            .withFlexibleDimensions()
+            .withGrowAfterOpen()
+            .withPositions(this._getOverlayPositions());
+    }
+    _getOverlayPositions() {
+        return (new PositionManager()).build(this.getTooltipPosition());
+    }
+}
+
+let nextId$1 = 0;
+class MchartLine extends BaseChartTooltip {
+    _initialized = false;
+    _host;
+    _svg;
+    _dimensions;
+    _hostWidth = 0;
+    _hostHeight = 0;
+    _innerWidth = 0;
+    _innerHeight = 0;
+    _yScale;
+    _xScale;
+    _curveMap = {
+        'linear': curveLinear,
+        'catmullRom': curveCatmullRom,
+        'curveBumpX': curveBumpX,
+        'curveStep': curveStep
+    };
+    _resizeObserver;
+    _tooltipDot;
+    _area;
+    _line;
+    _platformId = inject(PLATFORM_ID);
+    _destroyRef = inject(DestroyRef);
+    _elementRef = inject(ElementRef);
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    labels = input([], ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    strokeWidth = input(2, { ...(ngDevMode ? { debugName: "strokeWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    showArea = input(false, { ...(ngDevMode ? { debugName: "showArea" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showMarkers = input(false, { ...(ngDevMode ? { debugName: "showMarkers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    responsive = input(false, { ...(ngDevMode ? { debugName: "responsive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    fillAreaGradient = input(false, { ...(ngDevMode ? { debugName: "fillAreaGradient" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    curve = input('linear', ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
+    xAccessor = input((d, i) => i, ...(ngDevMode ? [{ debugName: "xAccessor" }] : /* istanbul ignore next */ []));
+    yAccessor = input((d) => d, ...(ngDevMode ? [{ debugName: "yAccessor" }] : /* istanbul ignore next */ []));
+    compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    markerDotSize = input(5, { ...(ngDevMode ? { debugName: "markerDotSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    tooltipPosition = input('after-center', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
+    _currentTooltipPosition = 'after-center';
+    get gradientId() {
+        return 'areaGradient' + this._gradientId;
+    }
+    _gradientId = nextId$1++;
+    constructor() {
+        super();
+        effect(() => {
+            this._currentTooltipPosition = this.tooltipPosition();
+        });
+        effect(() => {
+            if (!this._initialized) {
+                return;
+            }
+            this._render();
+        });
+    }
+    ngAfterViewChecked() {
+        if (isPlatformServer(this._platformId)) {
+            return;
+        }
+        if (!this._initialized) {
+            const element = this._elementRef.nativeElement;
+            this._dimensions = element.getBoundingClientRect();
+            if (this._dimensions.width !== 0 && this._dimensions.height !== 0) {
+                this._initialized = true;
+                this._render();
+                this._setupResizeObserver();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this._resizeObserver?.disconnect();
+    }
+    getTooltipPosition() {
+        return this._currentTooltipPosition;
+    }
+    getTooltipTemplateRef() {
+        return this.tooltip();
+    }
+    _render() {
+        this._setupContainers();
+        this._setupData();
+    }
+    _setupContainers() {
+        this._hostWidth = this._dimensions.width;
+        this._hostHeight = this._dimensions.height;
+        this._innerWidth = this._dimensions.width;
+        this._innerHeight = this._dimensions.height;
+        this._host = select(this._elementRef.nativeElement);
+        this._svg = this._host
+            .select('svg')
+            .attr('viewBox', `0 0 ${this._hostWidth} ${this._hostHeight}`);
+        if (this.tooltip()) {
+            this._tooltipDot = this._renderer.createElement('div');
+            this._renderer.setStyle(this._tooltipDot, 'width', '10px');
+            this._renderer.setStyle(this._tooltipDot, 'height', '10px');
+            this._renderer.setStyle(this._tooltipDot, 'z-index', '-1');
+            this._renderer.setStyle(this._tooltipDot, 'position', 'fixed');
+            this._renderer.setStyle(this._tooltipDot, 'opacity', '0');
+            this._renderer.appendChild(this._document.body, this._tooltipDot);
+        }
+    }
+    _setupData(isUpdate = false) {
+        let markerDotSize = this.markerDotSize();
+        if (!this.showMarkers()) {
+            markerDotSize = this.strokeWidth();
+        }
+        const xAccessor = this.xAccessor();
+        const yAccessor = this.yAccessor();
+        const xDomain = this.data().map((d, i) => xAccessor(d, i));
+        if (!this._xScale) {
+            this._xScale = scalePoint().domain(xDomain);
+        }
+        this._xScale.range([markerDotSize, this._innerWidth - markerDotSize]);
+        const yDomain = [
+            this.compact() ? min(this.data().map(d => yAccessor(d))) : 0,
+            max(this.data().map(d => yAccessor(d)))
+        ];
+        if (!this._yScale) {
+            this._yScale = scaleLinear()
+                .domain(yDomain);
+        }
+        this._yScale.range([this._innerHeight - markerDotSize, markerDotSize]);
+        if (this.showArea()) {
+            const areaGenerator = area()
+                .x((d, i) => this._xScale(xAccessor(d, i)))
+                .y1((d) => this._yScale(yAccessor(d)))
+                .y0(this._innerHeight - markerDotSize)
+                .curve(this._curveMap[this.curve()]);
+            if (!this._area) {
+                // add area
+                this._area = this._svg
+                    .append('path')
+                    .datum(this.data())
+                    .attr('d', areaGenerator)
+                    .attr('class', 'area');
+                if (this.fillAreaGradient()) {
+                    this._area.attr('fill', `url(#${this.gradientId})`);
+                }
+            }
+            else {
+                this._area.attr('d', areaGenerator);
+            }
+        }
+        const lineGenerator = line()
+            .x((d, i) => this._xScale(xAccessor(d, i)))
+            .y((d) => this._yScale(yAccessor(d)));
+        if (!this._line) {
+            // add line
+            this._line = this._svg
+                .append('path')
+                .datum(this.data())
+                .attr('d', lineGenerator.curve(this._curveMap[this.curve()]))
+                .attr('class', 'line')
+                .attr('stroke-width', this.strokeWidth());
+        }
+        else {
+            this._line.attr('d', lineGenerator.curve(this._curveMap[this.curve()]));
+        }
+        if (isUpdate) {
+            return;
+        }
+        if (this.showMarkers() || this.tooltip()) {
+            const markerLine = this._svg
+                .append('line')
+                .attr('x1', 0)
+                .attr('x2', 0)
+                .attr('y1', 0)
+                .attr('y2', this._innerHeight - markerDotSize)
+                .attr('opacity', 0)
+                .attr('class', 'marker-line');
+            const markerDot = this._svg
+                .append('circle')
+                .attr('cx', 0)
+                .attr('cy', 0)
+                .attr('r', markerDotSize)
+                .attr('opacity', 0)
+                .attr('class', 'marker-dot');
+            let x = 0;
+            let y = 0;
+            let label;
+            let value;
+            if (this.tooltip()) {
+                this._createTooltipOrigin();
+            }
+            fromEvent(this._document, 'mousemove')
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe((e) => {
+                const target = e.target;
+                const oldXPosition = +markerDot.attr('cx');
+                const pointerCoords = pointer(e, this._svg.node());
+                const [posX, posY] = pointerCoords;
+                let visible = true;
+                if (posX < this.markerDotSize() || posY < this.markerDotSize() || posX > this._hostWidth || posY > this._hostHeight) {
+                    visible = false;
+                    this._overlayRef?.detach();
+                    markerLine.attr('opacity', 0);
+                    markerDot.attr('opacity', 0);
+                }
+                else {
+                    if (target.closest('.ngs-mchart-line') ||
+                        target.classList.contains('ngs-mchart-tooltip-overlay') ||
+                        target.closest('.ngs-mchart-tooltip-overlay')) {
+                        if (this.showMarkers()) {
+                            markerLine.attr('opacity', 1);
+                            markerDot.attr('opacity', 1);
+                        }
+                    }
+                    else {
+                        visible = false;
+                        this._overlayRef?.detach();
+                    }
+                }
+                const eachBand = this._xScale.step();
+                const index = Math.round((posX / eachBand));
+                const dataValue = this.data()[index];
+                label = this.labels()[index] ? this.labels()[index] : xAccessor(index, index);
+                value = yAccessor(dataValue);
+                x = this._xScale(xAccessor(index, index));
+                y = this._yScale(yAccessor(dataValue));
+                markerLine
+                    .attr('x1', x)
+                    .attr('x2', x);
+                markerDot
+                    .attr('cx', x)
+                    .attr('cy', y);
+                if (this.tooltip()) {
+                    if (posX < this._hostWidth / 2) {
+                        this._currentTooltipPosition = 'after-center';
+                    }
+                    else {
+                        this._currentTooltipPosition = 'before-center';
+                    }
+                    this._setTooltipPositionByEvent(e);
+                    if (visible) {
+                        this._setTooltipVisible();
+                        if (!this._overlayRef?.hasAttached()) {
+                            this._showTooltip({
+                                label,
+                                value
+                            });
+                        }
+                        else {
+                            if (oldXPosition !== x) {
+                                this._showTooltip({
+                                    label,
+                                    value
+                                });
+                            }
+                            else {
+                                this._overlayRef.updatePositionStrategy(this._getOverlayPositionStrategy());
+                                this._overlayRef.updatePosition();
+                            }
+                        }
+                    }
+                    else {
+                        this._setTooltipInVisible();
+                    }
+                }
+            });
+        }
+    }
+    _setupResizeObserver() {
+        if (!this.responsive()) {
+            return;
+        }
+        this._resizeObserver = new ResizeObserver((entries) => {
+            if (this._hostWidth !== entries[0].contentRect.width || this._hostHeight !== entries[0].contentRect.height) {
+                this._hostWidth = entries[0].contentRect.width;
+                this._hostHeight = entries[0].contentRect.height;
+                this._innerWidth = entries[0].contentRect.width;
+                this._innerHeight = entries[0].contentRect.height;
+                this._svg
+                    .attr("viewBox", `0 0 ${this._hostWidth} ${this._hostHeight}`);
+                this._setupData(true);
+            }
+        });
+        this._resizeObserver.observe(this._elementRef.nativeElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartLine, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MchartLine, isStandalone: true, selector: "ngs-mchart-line", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showArea: { classPropertyName: "showArea", publicName: "showArea", isSignal: true, isRequired: false, transformFunction: null }, showMarkers: { classPropertyName: "showMarkers", publicName: "showMarkers", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, fillAreaGradient: { classPropertyName: "fillAreaGradient", publicName: "fillAreaGradient", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, xAccessor: { classPropertyName: "xAccessor", publicName: "xAccessor", isSignal: true, isRequired: false, transformFunction: null }, yAccessor: { classPropertyName: "yAccessor", publicName: "yAccessor", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, markerDotSize: { classPropertyName: "markerDotSize", publicName: "markerDotSize", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fill-area-gradient": "fillAreaGradient()" }, classAttribute: "ngs-mchart-line" }, exportAs: ["ngsMchartLine"], usesInheritance: true, ngImport: i0, template: "<svg>\n  @if (fillAreaGradient()) {\n    <linearGradient [id]=\"gradientId\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n      <stop offset=\"0%\" class=\"lg-start-color\"/>\n      <stop offset=\"100%\" class=\"lg-end-color\"/>\n    </linearGradient>\n  }\n</svg>\n", styles: [":host{--ngs-mchart-line-line-bg: var(--color-primary);--ngs-mchart-line-area-bg: var(--color-primary-200);--ngs-mchart-line-marker-line-bg: var(--color-neutral);--ngs-mchart-line-marker-dot-bg: var(--color-primary);--ngs-mchart-line-area-gradient-start-color: var(--color-primary);--ngs-mchart-line-area-gradient-end-color: var(--color-background);display:block;overflow:hidden}:host svg{width:100%;height:100%}:host ::ng-deep .line{stroke:var(--ngs-mchart-line-line-bg);fill:none;stroke-linejoin:round;stroke-linecap:round}:host ::ng-deep .area{stroke-width:0}:host ::ng-deep .marker-line{stroke:var(--ngs-mchart-line-marker-line-bg);stroke-width:1;stroke-dasharray:3}:host ::ng-deep .marker-dot{fill:var(--ngs-mchart-line-marker-dot-bg)}:host:not(.fill-area-gradient) ::ng-deep .area{fill:var(--ngs-mchart-line-area-bg)}:host.fill-area-gradient .lg-start-color{stop-color:var(--ngs-mchart-line-area-gradient-start-color)}:host.fill-area-gradient .lg-end-color{stop-color:var(--ngs-mchart-line-area-gradient-end-color)}:host-context(html.dark){--ngs-mchart-line-area-bg: var(--color-neutral-700);--ngs-mchart-line-area-gradient-start-color: var(--color-neutral-700)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartLine, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-mchart-line', exportAs: 'ngsMchartLine', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-mchart-line',
+                        '[class.fill-area-gradient]': 'fillAreaGradient()',
+                    }, template: "<svg>\n  @if (fillAreaGradient()) {\n    <linearGradient [id]=\"gradientId\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n      <stop offset=\"0%\" class=\"lg-start-color\"/>\n      <stop offset=\"100%\" class=\"lg-end-color\"/>\n    </linearGradient>\n  }\n</svg>\n", styles: [":host{--ngs-mchart-line-line-bg: var(--color-primary);--ngs-mchart-line-area-bg: var(--color-primary-200);--ngs-mchart-line-marker-line-bg: var(--color-neutral);--ngs-mchart-line-marker-dot-bg: var(--color-primary);--ngs-mchart-line-area-gradient-start-color: var(--color-primary);--ngs-mchart-line-area-gradient-end-color: var(--color-background);display:block;overflow:hidden}:host svg{width:100%;height:100%}:host ::ng-deep .line{stroke:var(--ngs-mchart-line-line-bg);fill:none;stroke-linejoin:round;stroke-linecap:round}:host ::ng-deep .area{stroke-width:0}:host ::ng-deep .marker-line{stroke:var(--ngs-mchart-line-marker-line-bg);stroke-width:1;stroke-dasharray:3}:host ::ng-deep .marker-dot{fill:var(--ngs-mchart-line-marker-dot-bg)}:host:not(.fill-area-gradient) ::ng-deep .area{fill:var(--ngs-mchart-line-area-bg)}:host.fill-area-gradient .lg-start-color{stop-color:var(--ngs-mchart-line-area-gradient-start-color)}:host.fill-area-gradient .lg-end-color{stop-color:var(--ngs-mchart-line-area-gradient-end-color)}:host-context(html.dark){--ngs-mchart-line-area-bg: var(--color-neutral-700);--ngs-mchart-line-area-gradient-start-color: var(--color-neutral-700)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArea", required: false }] }], showMarkers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMarkers", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], fillAreaGradient: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillAreaGradient", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], xAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAccessor", required: false }] }], yAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAccessor", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], markerDotSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerDotSize", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }] } });
+
+let nextId = 0;
+class MchartBar extends BaseChartTooltip {
+    _initialized = false;
+    _host;
+    _svg;
+    _hlContainer;
+    _dataContainer;
+    _dimensions;
+    _innerWidth = 0;
+    _innerHeight = 0;
+    _hostWidth = 0;
+    _hostHeight = 0;
+    _xScale;
+    _yScale;
+    _resizeObserver;
+    _platformId = inject(PLATFORM_ID);
+    _elementRef = inject(ElementRef);
+    _destroyRef = inject(DestroyRef);
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    labels = input([], ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    gap = input(0.2, { ...(ngDevMode ? { debugName: "gap" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    radius = input(0, { ...(ngDevMode ? { debugName: "radius" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    highlight = input(false, { ...(ngDevMode ? { debugName: "highlight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    responsive = input(false, { ...(ngDevMode ? { debugName: "responsive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    fillGradient = input(false, { ...(ngDevMode ? { debugName: "fillGradient" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    xAccessor = input((d, i) => i, ...(ngDevMode ? [{ debugName: "xAccessor" }] : /* istanbul ignore next */ []));
+    yAccessor = input((d) => d, ...(ngDevMode ? [{ debugName: "yAccessor" }] : /* istanbul ignore next */ []));
+    tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    tooltipPosition = input('after-center', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
+    _currentTooltipPosition = 'after-center';
+    get gradientId() {
+        return 'areaGradient' + this._gradientId;
+    }
+    _gradientId = nextId++;
+    constructor() {
+        super();
+        effect(() => {
+            this._currentTooltipPosition = this.tooltipPosition();
+        });
+        effect(() => {
+            if (!this._initialized) {
+                return;
+            }
+            this._render();
+            this._setupResizeObserver();
+        });
+    }
+    ngAfterViewChecked() {
+        if (isPlatformServer(this._platformId)) {
+            return;
+        }
+        if (!this._initialized) {
+            const element = this._elementRef.nativeElement;
+            this._dimensions = element.getBoundingClientRect();
+            if (this._dimensions.width !== 0 && this._dimensions.height !== 0) {
+                this._initialized = true;
+                this._render();
+                this._setupResizeObserver();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this._resizeObserver?.disconnect();
+    }
+    getTooltipPosition() {
+        return this._currentTooltipPosition;
+    }
+    getTooltipTemplateRef() {
+        return this.tooltip();
+    }
+    _render() {
+        this._init();
+        this._setupAxisScale();
+        this._setupData();
+        this._initTooltip();
+    }
+    _init() {
+        this._hostWidth = this._dimensions.width;
+        this._hostHeight = this._dimensions.height;
+        this._innerWidth = this._dimensions.width;
+        this._innerHeight = this._dimensions.height;
+        this._host = select(this._elementRef.nativeElement);
+        this._svg = this._host
+            .select('svg')
+            .attr('viewBox', `0 0 ${this._hostWidth} ${this._hostHeight}`);
+    }
+    _setupAxisScale() {
+        if (!this._xScale) {
+            this._xScale = scaleBand()
+                .paddingInner(this.gap())
+                .domain(this.data().map((d, i) => i.toString()));
+        }
+        this._xScale.range([0, this._innerWidth]);
+        if (!this._yScale) {
+            this._yScale = scaleLinear().domain([0, Math.max(...this.data())]);
+        }
+        this._yScale.range([this._innerHeight, 0]);
+    }
+    _setupData() {
+        if (this.highlight()) {
+            if (!this._hlContainer) {
+                this._hlContainer = this._svg.append('g')
+                    .attr('class', 'hl-container')
+                    .attr('transform', `translate(0,0)`);
+                this._hlContainer.selectAll('rect')
+                    .data(this.data())
+                    .enter()
+                    .append('rect')
+                    .attr('rx', this.radius())
+                    .attr('x', (d, i) => this._xScale(i.toString()))
+                    .attr('y', 0)
+                    .attr('width', this._xScale.bandwidth())
+                    .attr('height', this._innerHeight)
+                    .attr('class', 'highlight');
+            }
+            else {
+                this._hlContainer.selectAll('rect')
+                    .attr('x', (d, i) => this._xScale(i.toString()))
+                    .attr('y', 0)
+                    .attr('width', this._xScale.bandwidth())
+                    .attr('height', this._innerHeight);
+            }
+        }
+        if (!this._dataContainer) {
+            this._dataContainer = this._svg.append('g')
+                .attr('class', 'data-container')
+                .attr('transform', `translate(0,0)`);
+            const allBars = this._dataContainer.selectAll('rect')
+                .data(this.data())
+                .enter()
+                .append('rect')
+                .attr('rx', this.radius())
+                .attr('x', (d, i) => this._xScale(i.toString()))
+                .attr('y', (d) => this._yScale(d))
+                .attr('width', this._xScale.bandwidth())
+                .attr('height', (d) => this._innerHeight - this._yScale(d))
+                .attr('class', 'bar');
+            if (this.fillGradient()) {
+                allBars.attr('fill', `url(#${this.gradientId})`);
+            }
+        }
+        else {
+            this._dataContainer.selectAll('rect')
+                .attr('x', (d, i) => this._xScale(i.toString()))
+                .attr('y', (d) => this._yScale(d))
+                .attr('width', this._xScale.bandwidth())
+                .attr('height', (d) => this._innerHeight - this._yScale(d));
+        }
+    }
+    _setupResizeObserver() {
+        if (!this.responsive()) {
+            return;
+        }
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = new ResizeObserver((entries) => {
+            if (this._hostWidth !== entries[0].contentRect.width || this._hostHeight !== entries[0].contentRect.height) {
+                this._hostWidth = entries[0].contentRect.width;
+                this._hostHeight = entries[0].contentRect.height;
+                this._innerWidth = entries[0].contentRect.width;
+                this._innerHeight = entries[0].contentRect.height;
+                this._svg.attr('viewBox', `0 0 ${this._hostWidth} ${this._hostHeight}`);
+                this._setupAxisScale();
+                this._setupData();
+            }
+        });
+        this._resizeObserver.observe(this._elementRef.nativeElement);
+    }
+    _initTooltip() {
+        if (!this.tooltip()) {
+            return;
+        }
+        const xAccessor = this.xAccessor();
+        const yAccessor = this.yAccessor();
+        this._createTooltipOrigin();
+        let x = 0;
+        let y = 0;
+        let label;
+        let value;
+        let oldX;
+        fromEvent(this._document, 'mousemove')
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((e) => {
+            const target = e.target;
+            const pointerCoords = pointer(e, this._svg.node());
+            const [posX, posY] = pointerCoords;
+            let visible = true;
+            if (posX < 0 || posY < 0 || posX > this._hostWidth || posY > this._hostHeight) {
+                visible = false;
+                oldX = null;
+                this._overlayRef?.detach();
+            }
+            else {
+                if (!target.closest('.ngs-mchart-line') ||
+                    !target.classList.contains('ngs-mchart-tooltip-overlay') ||
+                    !target.closest('.ngs-mchart-tooltip-overlay')) {
+                    oldX = null;
+                    this._overlayRef?.detach();
+                }
+            }
+            const eachBand = this._xScale.step();
+            const index = Math.floor(posX / eachBand);
+            const dataValue = this.data()[index];
+            label = this.labels()[index] ? this.labels()[index] : xAccessor(index, index);
+            value = yAccessor(dataValue);
+            x = this._xScale(xAccessor(index, index));
+            y = this._yScale(yAccessor(dataValue));
+            if (posX < this._hostWidth / 2) {
+                this._currentTooltipPosition = 'after-center';
+            }
+            else {
+                this._currentTooltipPosition = 'before-center';
+            }
+            this._setTooltipPositionByEvent(e);
+            if (visible) {
+                this._setTooltipVisible();
+                if (!this._overlayRef?.hasAttached()) {
+                    oldX = x;
+                    this._showTooltip({
+                        label,
+                        value
+                    });
+                }
+                else {
+                    if (oldX !== x) {
+                        oldX = x;
+                        this._showTooltip({
+                            label,
+                            value
+                        });
+                    }
+                    else {
+                        this._overlayRef.updatePositionStrategy(this._getOverlayPositionStrategy());
+                        this._overlayRef.updatePosition();
+                    }
+                }
+            }
+            else {
+                oldX = x;
+                this._setTooltipInVisible();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MchartBar, isStandalone: true, selector: "ngs-mchart-bar", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, fillGradient: { classPropertyName: "fillGradient", publicName: "fillGradient", isSignal: true, isRequired: false, transformFunction: null }, xAccessor: { classPropertyName: "xAccessor", publicName: "xAccessor", isSignal: true, isRequired: false, transformFunction: null }, yAccessor: { classPropertyName: "yAccessor", publicName: "yAccessor", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fill-gradient": "fillGradient()", "class.with-tooltip": "!!tooltip()" }, classAttribute: "ngs-mchart-bar" }, exportAs: ["ngsMchartBar"], usesInheritance: true, ngImport: i0, template: "<svg>\n  <defs>\n    @if (fillGradient()) {\n      <linearGradient [id]=\"gradientId\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n        <stop offset=\"0%\" class=\"lg-start-color\"/>\n        <stop offset=\"100%\" class=\"lg-end-color\"/>\n      </linearGradient>\n    }\n  </defs>\n</svg>\n", styles: [":host{--ngs-mchart-bar-bar-bg: var(--color-primary);--ngs-mchart-bar-bar-gradient-start-color: var(--color-primary-500);--ngs-mchart-bar-bar-gradient-end-color: var(--color-primary);--ngs-mchart-bar-highlight-bg: var(--color-neutral-200);display:block;overflow:hidden}:host svg{width:100%;height:100%}:host ::ng-deep .highlight{fill:var(--ngs-mchart-bar-highlight-bg)}:host:not(.fill-gradient) ::ng-deep .bar{fill:var(--ngs-mchart-bar-bar-bg)}:host.fill-gradient .lg-start-color{stop-color:var(--ngs-mchart-bar-bar-gradient-start-color)}:host.fill-gradient .lg-end-color{stop-color:var(--ngs-mchart-bar-bar-gradient-end-color)}:host.with-tooltip ::ng-deep .bar:hover{opacity:.85}:host-context(html.dark){--ngs-mchart-bar-highlight-bg: var(--color-neutral-700)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-mchart-bar', exportAs: 'ngsMchartBar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-mchart-bar',
+                        '[class.fill-gradient]': 'fillGradient()',
+                        '[class.with-tooltip]': '!!tooltip()',
+                    }, template: "<svg>\n  <defs>\n    @if (fillGradient()) {\n      <linearGradient [id]=\"gradientId\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n        <stop offset=\"0%\" class=\"lg-start-color\"/>\n        <stop offset=\"100%\" class=\"lg-end-color\"/>\n      </linearGradient>\n    }\n  </defs>\n</svg>\n", styles: [":host{--ngs-mchart-bar-bar-bg: var(--color-primary);--ngs-mchart-bar-bar-gradient-start-color: var(--color-primary-500);--ngs-mchart-bar-bar-gradient-end-color: var(--color-primary);--ngs-mchart-bar-highlight-bg: var(--color-neutral-200);display:block;overflow:hidden}:host svg{width:100%;height:100%}:host ::ng-deep .highlight{fill:var(--ngs-mchart-bar-highlight-bg)}:host:not(.fill-gradient) ::ng-deep .bar{fill:var(--ngs-mchart-bar-bar-bg)}:host.fill-gradient .lg-start-color{stop-color:var(--ngs-mchart-bar-bar-gradient-start-color)}:host.fill-gradient .lg-end-color{stop-color:var(--ngs-mchart-bar-bar-gradient-end-color)}:host.with-tooltip ::ng-deep .bar:hover{opacity:.85}:host-context(html.dark){--ngs-mchart-bar-highlight-bg: var(--color-neutral-700)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], highlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlight", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], fillGradient: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillGradient", required: false }] }], xAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAccessor", required: false }] }], yAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAccessor", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }] } });
+
+class MchartPie extends BaseChartTooltip {
+    _initialized = false;
+    _host;
+    _svg;
+    _dataContainer;
+    _legendContainer;
+    _dimensions;
+    _innerWidth = 0;
+    _innerHeight = 0;
+    _hostWidth = 0;
+    _hostHeight = 0;
+    _resizeObserver;
+    _platformId = inject(PLATFORM_ID);
+    _elementRef = inject(ElementRef);
+    _radius = 0;
+    _arcGenerator;
+    _pieGenerator;
+    _colorsGenerator;
+    _arcTweenGenerator;
+    _pieData;
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    labels = input([], ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    valueAccessor = input((d) => d, ...(ngDevMode ? [{ debugName: "valueAccessor" }] : /* istanbul ignore next */ []));
+    dataItemStrokeWidth = input(1, { ...(ngDevMode ? { debugName: "dataItemStrokeWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    legendContainerWidth = input(0, { ...(ngDevMode ? { debugName: "legendContainerWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    showDataAnimation = input(false, { ...(ngDevMode ? { debugName: "showDataAnimation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showValueOnSlices = input(false, { ...(ngDevMode ? { debugName: "showValueOnSlices" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showLegend = input(false, { ...(ngDevMode ? { debugName: "showLegend" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    legendOffset = input(30, { ...(ngDevMode ? { debugName: "legendOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    legendItemHeight = input(30, { ...(ngDevMode ? { debugName: "legendItemHeight" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    legendItemSymbolSize = input(12, { ...(ngDevMode ? { debugName: "legendItemSymbolSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    legendItemFontSize = input(14, { ...(ngDevMode ? { debugName: "legendItemFontSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    legendItemSymbolBorderRadius = input(12, { ...(ngDevMode ? { debugName: "legendItemSymbolBorderRadius" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    valueFontSize = input(12, { ...(ngDevMode ? { debugName: "valueFontSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    tooltipPosition = input('after-center', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
+    getTooltipPosition() {
+        return this.tooltipPosition();
+    }
+    getTooltipTemplateRef() {
+        return this.tooltip();
+    }
+    ngAfterViewChecked() {
+        if (isPlatformServer(this._platformId)) {
+            return;
+        }
+        if (!this._initialized) {
+            const element = this._elementRef.nativeElement;
+            this._dimensions = element.getBoundingClientRect();
+            if (this._dimensions.width !== 0 && this._dimensions.height !== 0) {
+                this._initialized = true;
+                this._render();
+                this._setupResizeObserver();
+            }
+        }
+    }
+    ngOnChanges(changes) {
+        if (!this._initialized) {
+            return;
+        }
+        if (changes['data'] && !changes['data'].firstChange) {
+            this._draw(true);
+        }
+    }
+    ngOnDestroy() {
+        this._resizeObserver?.disconnect();
+    }
+    _render() {
+        this._initDimensions();
+        this._initContainers();
+        this._setGenerators();
+        this._setLegend();
+        this._draw();
+        this._initTooltip();
+    }
+    _initDimensions() {
+        const legendContainerWidth = this.showLegend() ? this.legendContainerWidth() : 0;
+        this._hostWidth = this._dimensions.width;
+        this._hostHeight = this._dimensions.height;
+        this._innerWidth = this._dimensions.width - legendContainerWidth - this.dataItemStrokeWidth() * 2;
+        this._innerHeight = this._dimensions.height - this.dataItemStrokeWidth() * 2;
+        this._host = select(this._elementRef.nativeElement);
+        this._svg = this._host
+            .select('svg')
+            .attr('viewBox', `0 0 ${this._hostWidth} ${this._hostHeight}`);
+        this._radius = Math.min(this._innerWidth, this._innerHeight) * .5;
+    }
+    _initContainers() {
+        this._dataContainer = this._svg
+            .append('g')
+            .attr('class', 'data-container')
+            .attr('transform', `translate(${this._radius},${this._innerHeight * .5})`);
+        if (this.showLegend()) {
+            this._legendContainer = this._svg
+                .append('g')
+                .attr('class', 'legend-container');
+        }
+    }
+    _setGenerators() {
+        const self = this;
+        this._arcGenerator = arc()
+            .innerRadius(0)
+            .outerRadius(this._radius);
+        this._pieGenerator = pie()
+            .value(this.valueAccessor());
+        this._colorsGenerator = scaleOrdinal(schemeTableau10)
+            .domain(this.data().map((d, i) => i.toString()));
+        this._arcTweenGenerator = function (d) {
+            // @ts-ignore
+            const _this = this;
+            const current = d;
+            const interpolateGenerator = interpolate(_this._previous, current);
+            _this._previous = current;
+            return (t) => {
+                return self._arcGenerator(interpolateGenerator(t));
+            };
+        };
+    }
+    _setLegend() {
+        if (!this.showLegend()) {
+            return;
+        }
+        this._legendContainer
+            .selectAll('g.legend-item')
+            .data(this.data())
+            .join('g')
+            .attr('class', 'legend-item')
+            .attr('data-index', (d, i) => i)
+            .attr('transform', (d, i) => `translate(0, ${i * this.legendItemHeight()})`)
+            .on('mouseenter', (event, d) => {
+            const target = event.target;
+            const index = +target.getAttribute('data-index');
+            this._dataContainer
+                .select(`path.data-item[data-index="${index}"]`)
+                .classed('active', true);
+        })
+            .on('mouseleave', (event, d) => {
+            const target = event.target;
+            const index = +target.getAttribute('data-index');
+            this._dataContainer
+                .select(`path.data-item[data-index="${index}"]`)
+                .classed('active', false);
+        });
+        this._legendContainer
+            .selectAll('g.legend-item')
+            .selectAll('text')
+            .data((d, i) => [i])
+            .join('text')
+            .attr('class', 'legend-item-text')
+            .attr('x', this.legendItemSymbolSize() * 2)
+            .attr('y', this.legendItemHeight() * .5)
+            .attr('font-size', this.legendItemFontSize())
+            .text((i) => this.labels()[i]);
+        this._legendContainer
+            .selectAll('g.legend-item')
+            .selectAll('rect')
+            .data((d, i) => [i])
+            .join('rect')
+            .attr('class', 'legend-item-symbol')
+            .attr('rx', this.legendItemSymbolBorderRadius())
+            .attr('width', this.legendItemSymbolSize())
+            .attr('height', this.legendItemSymbolSize())
+            .attr('fill', (i) => this._colorsGenerator(i))
+            .attr('y', this.legendItemFontSize() * .5 - 2);
+        const dimensions = this._legendContainer.node().getBBox();
+        this._legendContainer.attr('transform', `translate(${this._radius * 2 + this.legendOffset()},${this._innerHeight * .5 - .5 * dimensions.height})`);
+    }
+    _draw(isUpdate = false) {
+        if (isUpdate) {
+            this._colorsGenerator
+                .domain(this.data().map((d, i) => i.toString()));
+        }
+        this._pieData = this._pieGenerator(this.data());
+        this._dataContainer
+            .selectAll('g.data-item-group')
+            .data(this.data())
+            .join('g')
+            .attr('class', 'data-item-group')
+            .attr('data-index', (d, i) => i);
+        this._dataContainer
+            .selectAll('g.data-item-group')
+            .selectAll('path')
+            .data((d, i) => [this._pieData[i]])
+            .join('path')
+            .attr('class', 'data-item')
+            .attr('stroke-width', this.dataItemStrokeWidth())
+            .attr('d', (d) => this._arcGenerator(d))
+            .style('fill', (d) => this._colorsGenerator(d.index))
+            .attr('data-index', (d) => d.index)
+            .transition()
+            .duration(this.showDataAnimation() ? 1000 : 0)
+            .attrTween('d', this._arcTweenGenerator);
+        if (this.showValueOnSlices()) {
+            this._dataContainer
+                .selectAll('g.data-item-group')
+                .selectAll('text')
+                .data((d, i) => [this._pieData[i]])
+                .join('text')
+                .attr('class', 'value')
+                .attr('font-size', this.valueFontSize())
+                .attr('transform', (d) => {
+                const coordinates = this._arcGenerator.centroid(d);
+                return `translate(${coordinates[0]},${coordinates[1]})`;
+            })
+                .text((d) => d.data);
+        }
+    }
+    _setupResizeObserver() {
+    }
+    _initTooltip() {
+        if (!this.tooltip()) {
+            return;
+        }
+        let oldValue;
+        this._createTooltipOrigin();
+        this._dataContainer
+            .selectAll('g.data-item-group')
+            .data(this._pieData)
+            .on('mousemove', (event, d) => {
+            const target = event.target;
+            this._setTooltipPositionByEvent(event);
+            this._setTooltipVisible();
+            const index = +target.getAttribute('data-index');
+            const label = this.labels()[index] ? this.labels()[index] : null;
+            const color = this._colorsGenerator(index);
+            const value = d.data;
+            if (!this._overlayRef?.hasAttached()) {
+                this._showTooltip({
+                    label,
+                    color,
+                    value
+                });
+                oldValue = value;
+            }
+            else {
+                if (oldValue !== d.data) {
+                    this._showTooltip({
+                        label,
+                        color,
+                        value
+                    });
+                    oldValue = value;
+                }
+                else {
+                    this._overlayRef.updatePosition();
+                }
+            }
+        });
+        this._dataContainer
+            .on('mouseleave', (event) => {
+            this._setTooltipInVisible();
+            this._hideTooltip();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartPie, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: MchartPie, isStandalone: true, selector: "ngs-mchart-pie", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, valueAccessor: { classPropertyName: "valueAccessor", publicName: "valueAccessor", isSignal: true, isRequired: false, transformFunction: null }, dataItemStrokeWidth: { classPropertyName: "dataItemStrokeWidth", publicName: "dataItemStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, legendContainerWidth: { classPropertyName: "legendContainerWidth", publicName: "legendContainerWidth", isSignal: true, isRequired: false, transformFunction: null }, showDataAnimation: { classPropertyName: "showDataAnimation", publicName: "showDataAnimation", isSignal: true, isRequired: false, transformFunction: null }, showValueOnSlices: { classPropertyName: "showValueOnSlices", publicName: "showValueOnSlices", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, legendOffset: { classPropertyName: "legendOffset", publicName: "legendOffset", isSignal: true, isRequired: false, transformFunction: null }, legendItemHeight: { classPropertyName: "legendItemHeight", publicName: "legendItemHeight", isSignal: true, isRequired: false, transformFunction: null }, legendItemSymbolSize: { classPropertyName: "legendItemSymbolSize", publicName: "legendItemSymbolSize", isSignal: true, isRequired: false, transformFunction: null }, legendItemFontSize: { classPropertyName: "legendItemFontSize", publicName: "legendItemFontSize", isSignal: true, isRequired: false, transformFunction: null }, legendItemSymbolBorderRadius: { classPropertyName: "legendItemSymbolBorderRadius", publicName: "legendItemSymbolBorderRadius", isSignal: true, isRequired: false, transformFunction: null }, valueFontSize: { classPropertyName: "valueFontSize", publicName: "valueFontSize", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-mchart-pie" }, exportAs: ["ngsMchartPie"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg></svg>\n", styles: [":host{--ngs-mchart-pie-stroke-color: var(--color-background);--ngs-mchart-pie-legend-item-color: var(--color-neutral-900);--ngs-mchart-pie-legend-item-hover-color: var(--color-primary);--ngs-mchart-pie-value-color: var(--color-neutral-950);display:block;overflow:hidden}:host svg{width:100%;height:100%}:host:has(.data-item.active) ::ng-deep .data-item:not(.active){opacity:.7;scale:.93;transition:scale .2s}:host ::ng-deep .data-item{stroke:var(--ngs-mchart-pie-stroke-color)}:host ::ng-deep .value{text-anchor:middle;alignment-baseline:middle;fill:var(--ngs-mchart-pie-value-color)}:host ::ng-deep .legend-item{cursor:pointer}:host ::ng-deep .legend-item:hover .legend-item-text{fill:var(--ngs-mchart-pie-legend-item-hover-color)}:host ::ng-deep .legend-item-text{fill:var(--ngs-mchart-pie-legend-item-color)}:host-context(html.dark){--ngs-mchart-pie-legend-item-color: var(--color-neutral-200)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartPie, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-mchart-pie', exportAs: 'ngsMchartPie', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-mchart-pie'
+                    }, template: "<svg></svg>\n", styles: [":host{--ngs-mchart-pie-stroke-color: var(--color-background);--ngs-mchart-pie-legend-item-color: var(--color-neutral-900);--ngs-mchart-pie-legend-item-hover-color: var(--color-primary);--ngs-mchart-pie-value-color: var(--color-neutral-950);display:block;overflow:hidden}:host svg{width:100%;height:100%}:host:has(.data-item.active) ::ng-deep .data-item:not(.active){opacity:.7;scale:.93;transition:scale .2s}:host ::ng-deep .data-item{stroke:var(--ngs-mchart-pie-stroke-color)}:host ::ng-deep .value{text-anchor:middle;alignment-baseline:middle;fill:var(--ngs-mchart-pie-value-color)}:host ::ng-deep .legend-item{cursor:pointer}:host ::ng-deep .legend-item:hover .legend-item-text{fill:var(--ngs-mchart-pie-legend-item-hover-color)}:host ::ng-deep .legend-item-text{fill:var(--ngs-mchart-pie-legend-item-color)}:host-context(html.dark){--ngs-mchart-pie-legend-item-color: var(--color-neutral-200)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], valueAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAccessor", required: false }] }], dataItemStrokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataItemStrokeWidth", required: false }] }], legendContainerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendContainerWidth", required: false }] }], showDataAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDataAnimation", required: false }] }], showValueOnSlices: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueOnSlices", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], legendOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendOffset", required: false }] }], legendItemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendItemHeight", required: false }] }], legendItemSymbolSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendItemSymbolSize", required: false }] }], legendItemFontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendItemFontSize", required: false }] }], legendItemSymbolBorderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendItemSymbolBorderRadius", required: false }] }], valueFontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFontSize", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }] } });
+
+class MchartTooltip {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: MchartTooltip, isStandalone: true, selector: "ngs-mchart-tooltip", host: { classAttribute: "ngs-mchart-tooltip" }, exportAs: ["ngsMchartTooltip"], ngImport: i0, template: "<div class=\"title\">\n  <ng-content select=\"ngs-mchart-tooltip-title\" />\n</div>\n<div class=\"body\">\n  <ng-content select=\"ngs-mchart-tooltip-body\" />\n</div>\n<ng-content />\n", styles: [":host{display:block;width:max-content;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;border-radius:.5rem;background:#fff;font-size:.75rem;overflow:hidden}:host .title:empty{display:none}:host .body:empty{display:none}:host-context(html.dark){background:var(--color-tertiary-200);color:var(--color-neutral-800)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartTooltip, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-mchart-tooltip', exportAs: 'ngsMchartTooltip', host: {
+                        'class': 'ngs-mchart-tooltip'
+                    }, template: "<div class=\"title\">\n  <ng-content select=\"ngs-mchart-tooltip-title\" />\n</div>\n<div class=\"body\">\n  <ng-content select=\"ngs-mchart-tooltip-body\" />\n</div>\n<ng-content />\n", styles: [":host{display:block;width:max-content;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;border-radius:.5rem;background:#fff;font-size:.75rem;overflow:hidden}:host .title:empty{display:none}:host .body:empty{display:none}:host-context(html.dark){background:var(--color-tertiary-200);color:var(--color-neutral-800)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class MchartTooltipTitle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartTooltipTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: MchartTooltipTitle, isStandalone: true, selector: "ngs-mchart-tooltip-title", host: { classAttribute: "ngs-mchart-tooltip-title" }, exportAs: ["ngsMchartTooltipTitle"], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;background:var(--color-neutral-200);padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 2);font-weight:500}:host-context(html.dark){background:var(--color-neutral-300);color:var(--color-neutral-900)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartTooltipTitle, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-mchart-tooltip-title', exportAs: 'ngsMchartTooltipTitle', host: {
+                        'class': 'ngs-mchart-tooltip-title'
+                    }, template: "<ng-content />\n", styles: [":host{display:block;background:var(--color-neutral-200);padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 2);font-weight:500}:host-context(html.dark){background:var(--color-neutral-300);color:var(--color-neutral-900)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class MchartTooltipBody {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartTooltipBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: MchartTooltipBody, isStandalone: true, selector: "ngs-mchart-tooltip-body", host: { classAttribute: "ngs-mchart-tooltip-body" }, exportAs: ["ngsMchartTooltipBody"], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 2)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MchartTooltipBody, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-mchart-tooltip-body', exportAs: 'ngsMchartTooltipBody', host: {
+                        'class': 'ngs-mchart-tooltip-body'
+                    }, template: "<ng-content />\n", styles: [":host{display:block;padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 2)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MchartBar, MchartLine, MchartPie, MchartTooltip, MchartTooltipBody, MchartTooltipTitle };
+//# sourceMappingURL=ngstarter-ui-components-micro-chart.mjs.map