angular-chrts 1.0.0-beta.1

package/fesm2022/angular-chrts.mjs

@@ -0,0 +1,1756 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, output, viewChild, signal, inject, ChangeDetectorRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@unovis/angular';
+import { VisXYContainerModule, VisAreaModule, VisAxisModule, VisLineModule, VisTooltipModule, VisCrosshairModule, VisBulletLegendModule, VisGroupedBarModule, VisStackedBarModule, VisSingleContainerModule, VisDonutModule, VisScatterModule, VisTimelineModule } from '@unovis/angular';
+import { Position, CurveType as CurveType$1, Orientation as Orientation$1, StackedBar, GroupedBar, Donut, Scatter, Timeline } from '@unovis/ts';
+
+var LegendPosition;
+(function (LegendPosition) {
+    LegendPosition["TopLeft"] = "top-left";
+    LegendPosition["TopCenter"] = "top-center";
+    LegendPosition["TopRight"] = "top-right";
+    LegendPosition["BottomLeft"] = "bottom-left";
+    LegendPosition["BottomCenter"] = "bottom-center";
+    LegendPosition["BottomRight"] = "bottom-right";
+})(LegendPosition || (LegendPosition = {}));
+var CurveType;
+(function (CurveType) {
+    CurveType["Basis"] = "basis";
+    CurveType["BasisClosed"] = "basisClosed";
+    CurveType["BasisOpen"] = "basisOpen";
+    CurveType["Bundle"] = "bundle";
+    CurveType["Cardinal"] = "cardinal";
+    CurveType["CardinalClosed"] = "cardinalClosed";
+    CurveType["CardinalOpen"] = "cardinalOpen";
+    CurveType["CatmullRom"] = "catmullRom";
+    CurveType["CatmullRomClosed"] = "catmullRomClosed";
+    CurveType["CatmullRomOpen"] = "catmullRomOpen";
+    CurveType["Linear"] = "linear";
+    CurveType["LinearClosed"] = "linearClosed";
+    CurveType["MonotoneX"] = "monotoneX";
+    CurveType["MonotoneY"] = "monotoneY";
+    CurveType["Natural"] = "natural";
+    CurveType["Step"] = "step";
+    CurveType["StepAfter"] = "stepAfter";
+    CurveType["StepBefore"] = "stepBefore";
+})(CurveType || (CurveType = {}));
+var Orientation;
+(function (Orientation) {
+    Orientation["Horizontal"] = "horizontal";
+    Orientation["Vertical"] = "vertical";
+})(Orientation || (Orientation = {}));
+var DonutType;
+(function (DonutType) {
+    DonutType["Half"] = "half";
+    DonutType["Full"] = "full";
+})(DonutType || (DonutType = {}));
+
+class TooltipComponent {
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    categories = input.required(...(ngDevMode ? [{ debugName: "categories" }] : []));
+    titleFormatter = input(...(ngDevMode ? [undefined, { debugName: "titleFormatter" }] : []));
+    yFormatter = input(...(ngDevMode ? [undefined, { debugName: "yFormatter" }] : []));
+    titleFormat = computed(() => {
+        const data = this.data();
+        const formatter = this.titleFormatter();
+        if (formatter)
+            return formatter(data);
+        // getFirstPropertyValue equivalent
+        if (data && Object.keys(data).length > 0) {
+            const firstKey = Object.keys(data)[0];
+            return data[firstKey];
+        }
+        return undefined;
+    }, ...(ngDevMode ? [{ debugName: "titleFormat" }] : []));
+    keyBlockList = ['_index', '_stacked', '_ending'];
+    visibleEntries = computed(() => {
+        const data = this.data();
+        const categories = this.categories();
+        return Object.entries(data ?? {})
+            .filter(([key]) => !this.keyBlockList.includes(key) && Object.keys(categories).includes(key))
+            .map(([key, value]) => ({ key, value }));
+    }, ...(ngDevMode ? [{ debugName: "visibleEntries" }] : []));
+    containerStyle = {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: '0px',
+        margin: '0px'
+    };
+    titleStyle = {
+        color: 'var(--vis-tooltip-title-color, #000)',
+        textTransform: 'var(--vis-tooltip-title-text-transform, capitalize)',
+        borderBottom: 'var(--vis-tooltip-title-border-bottom, 1px solid #e5e7eb)',
+        padding: 'var(--vis-tooltip-title-padding, 0.75rem 0.75rem 0.5rem 0.75rem)',
+        margin: 'var(--vis-tooltip-title-margin, 0 0 0.25rem 0)',
+        fontSize: 'var(--vis-tooltip-title-font-size, 0.875rem)',
+        lineHeight: 'var(--vis-tooltip-title-line-height, 100%)',
+        fontWeight: 'var(--vis-tooltip-title-font-weight, 600)',
+    };
+    contentStyle = {
+        display: 'grid',
+        gridTemplateColumns: 'auto 1fr auto',
+        alignItems: 'center',
+        gap: 'var(--vis-tooltip-content-gap, 0.25rem 0.5rem)',
+        padding: 'var(--vis-tooltip-content-padding, 0 0.75rem 0.5rem 0.75rem)',
+    };
+    labelStyle = {
+        fontWeight: 'var(--vis-tooltip-label-font-weight, 400)',
+        fontSize: 'var(--vis-tooltip-label-font-size, 0.875rem)',
+        color: 'var(--vis-tooltip-label-color, inherit)',
+        margin: 'var(--vis-tooltip-label-margin, 0 1rem 0 0)',
+        whiteSpace: 'nowrap',
+    };
+    valueStyle = {
+        fontSize: 'var(--vis-tooltip-value-font-size, 0.875rem)',
+        fontWeight: 'var(--vis-tooltip-value-font-weight, 600)',
+        color: 'var(--vis-tooltip-value-color, inherit)',
+        textAlign: 'right',
+        fontVariantNumeric: 'tabular-nums',
+    };
+    getDotStyle(key, index) {
+        const category = this.categories()[key];
+        const color = (category && typeof category.color === 'string')
+            ? category.color
+            : `var(--vis-color${index})`;
+        return {
+            width: '8px',
+            height: '8px',
+            aspectRatio: '1',
+            borderRadius: 'var(--vis-tooltip-dot-border-radius, 4px)',
+            margin: 'var(--vis-tooltip-dot-margin, 0)',
+            flexShrink: '0',
+            backgroundColor: color,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TooltipComponent, isStandalone: true, selector: "ngx-tooltip", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, titleFormatter: { classPropertyName: "titleFormatter", publicName: "titleFormatter", isSignal: true, isRequired: false, transformFunction: null }, yFormatter: { classPropertyName: "yFormatter", publicName: "yFormatter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div [style]="containerStyle">
+      @if (titleFormat()) {
+        <div [style]="titleStyle">
+          {{ titleFormat() }}
+        </div>
+      }
+      <div [style]="contentStyle">
+        @for (entry of visibleEntries(); track entry.key; let i = $index) {
+          <span [style]="getDotStyle(entry.key, i)"></span>
+          <span [style]="labelStyle">
+            {{ categories()[entry.key].name }}
+          </span>
+          <span [style]="valueStyle">
+            {{ yFormatter() ? yFormatter()!(entry.value, i, []) : entry.value }}
+          </span>
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-tooltip', standalone: true, imports: [], template: `
+    <div [style]="containerStyle">
+      @if (titleFormat()) {
+        <div [style]="titleStyle">
+          {{ titleFormat() }}
+        </div>
+      }
+      <div [style]="contentStyle">
+        @for (entry of visibleEntries(); track entry.key; let i = $index) {
+          <span [style]="getDotStyle(entry.key, i)"></span>
+          <span [style]="labelStyle">
+            {{ categories()[entry.key].name }}
+          </span>
+          <span [style]="valueStyle">
+            {{ yFormatter() ? yFormatter()!(entry.value, i, []) : entry.value }}
+          </span>
+        }
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: true }] }], titleFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleFormatter", required: false }] }], yFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "yFormatter", required: false }] }] } });
+
+function getDistributedIndices(length, numTicks) {
+    // Handle edge cases
+    if (numTicks <= 0)
+        return [];
+    // If numTicks >= length, return all indices
+    if (numTicks >= length) {
+        return Array.from({ length }, (_, i) => i);
+    }
+    // Special case: if numTicks is 1, return only the middle index
+    if (numTicks === 1) {
+        return [Math.floor((length - 1) / 2)];
+    }
+    // For 2 ticks, just return first and last
+    if (numTicks === 2) {
+        return [0, length - 1];
+    }
+    // For 3 or more ticks, we need to ensure perfectly even distribution
+    const indices = [];
+    // We'll manually calculate the indices to ensure perfect distribution
+    for (let i = 0; i < numTicks; i++) {
+        // This formula ensures perfect distribution of indices
+        const index = Math.round((i * (length - 1)) / (numTicks - 1));
+        indices.push(index);
+    }
+    return indices;
+}
+function getFirstPropertyValue(obj) {
+    if (obj && Object.keys(obj).length > 0) {
+        const firstKey = Object.keys(obj)[0];
+        return obj[firstKey];
+    }
+    return undefined;
+}
+const markerShape = (type, size, strokeWidth, color, strokeColor) => {
+    switch (type) {
+        case 'circle':
+            return `<circle cx="${size / 2}" cy="${size / 2}" r="${(size - strokeWidth) / 2}" stroke-width="${strokeWidth}" stroke="${strokeColor}" fill="${color}" />`;
+        case 'square':
+            return `<rect x="${strokeWidth / 2}" y="${strokeWidth / 2}" width="${size - strokeWidth}" height="${size - strokeWidth}" stroke-width="${strokeWidth}" stroke="${strokeColor}" fill="${color}" />`;
+        case 'triangle':
+            return `<polygon points="${size / 2},${strokeWidth / 2} ${size - strokeWidth / 2},${size - strokeWidth / 2} ${strokeWidth / 2},${size - strokeWidth / 2}" stroke-width="${strokeWidth}" stroke="${strokeColor}" fill="${color}" />`;
+        case 'diamond':
+            return `<polygon points="${size / 2},${strokeWidth / 2} ${size - strokeWidth / 2},${size / 2} ${size / 2},${size - strokeWidth / 2} ${strokeWidth / 2},${size / 2}" stroke-width="${strokeWidth}" stroke="${strokeColor}" fill="${color}" />`;
+        default:
+            return '';
+    }
+};
+function createMarkers(markerConfig) {
+    const makeMarker = (id, cfg) => {
+        const type = cfg.type || 'circle';
+        const size = cfg.size || 10;
+        const strokeWidth = cfg.strokeWidth || 2;
+        const color = cfg.color || '#000';
+        const strokeColor = cfg.strokeColor || cfg.color || '#000';
+        return `<marker id="${id}" viewBox="0 0 ${size} ${size}" refX="${size / 2}" refY="${size / 2}" markerWidth="${size / 2}" markerHeight="${size / 2}" orient="auto">
+      ${markerShape(type, size, strokeWidth, color, strokeColor)}
+    </marker>`;
+    };
+    return Object.entries(markerConfig.config)
+        .map(([key, cfg]) => {
+        const legacyId = `${markerConfig.id}-${key}`;
+        return makeMarker(legacyId, cfg);
+    })
+        .join('\n');
+}
+function logPremiumUpgradeMessage() {
+    // Logic for premium upgrade message
+}
+
+class AreaChartComponent {
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    height = input(400, ...(ngDevMode ? [{ debugName: "height" }] : []));
+    padding = input({
+        top: 5,
+        right: 5,
+        bottom: 5,
+        left: 5,
+    }, ...(ngDevMode ? [{ debugName: "padding" }] : []));
+    categories = input.required(...(ngDevMode ? [{ debugName: "categories" }] : []));
+    stacked = input(false, ...(ngDevMode ? [{ debugName: "stacked" }] : []));
+    hideArea = input(false, ...(ngDevMode ? [{ debugName: "hideArea" }] : []));
+    curveType = input(...(ngDevMode ? [undefined, { debugName: "curveType" }] : []));
+    lineWidth = input(2, ...(ngDevMode ? [{ debugName: "lineWidth" }] : []));
+    lineDashArray = input(...(ngDevMode ? [undefined, { debugName: "lineDashArray" }] : []));
+    xLabel = input(...(ngDevMode ? [undefined, { debugName: "xLabel" }] : []));
+    yLabel = input(...(ngDevMode ? [undefined, { debugName: "yLabel" }] : []));
+    xFormatter = input(...(ngDevMode ? [undefined, { debugName: "xFormatter" }] : []));
+    yFormatter = input(...(ngDevMode ? [undefined, { debugName: "yFormatter" }] : []));
+    xNumTicks = input(...(ngDevMode ? [undefined, { debugName: "xNumTicks" }] : []));
+    xExplicitTicks = input(...(ngDevMode ? [undefined, { debugName: "xExplicitTicks" }] : []));
+    minMaxTicksOnly = input(false, ...(ngDevMode ? [{ debugName: "minMaxTicksOnly" }] : []));
+    yNumTicks = input(...(ngDevMode ? [undefined, { debugName: "yNumTicks" }] : []));
+    hideXAxis = input(false, ...(ngDevMode ? [{ debugName: "hideXAxis" }] : []));
+    hideYAxis = input(false, ...(ngDevMode ? [{ debugName: "hideYAxis" }] : []));
+    xGridLine = input(false, ...(ngDevMode ? [{ debugName: "xGridLine" }] : []));
+    yGridLine = input(false, ...(ngDevMode ? [{ debugName: "yGridLine" }] : []));
+    xDomainLine = input(false, ...(ngDevMode ? [{ debugName: "xDomainLine" }] : []));
+    yDomainLine = input(false, ...(ngDevMode ? [{ debugName: "yDomainLine" }] : []));
+    xTickLine = input(false, ...(ngDevMode ? [{ debugName: "xTickLine" }] : []));
+    yTickLine = input(false, ...(ngDevMode ? [{ debugName: "yTickLine" }] : []));
+    hideTooltip = input(false, ...(ngDevMode ? [{ debugName: "hideTooltip" }] : []));
+    hideLegend = input(false, ...(ngDevMode ? [{ debugName: "hideLegend" }] : []));
+    legendPosition = input(LegendPosition.BottomCenter, ...(ngDevMode ? [{ debugName: "legendPosition" }] : []));
+    legendStyle = input(...(ngDevMode ? [undefined, { debugName: "legendStyle" }] : []));
+    tooltipStyle = input({}, ...(ngDevMode ? [{ debugName: "tooltipStyle" }] : []));
+    tooltipTitleFormatter = input(...(ngDevMode ? [undefined, { debugName: "tooltipTitleFormatter" }] : []));
+    markerConfig = input(...(ngDevMode ? [undefined, { debugName: "markerConfig" }] : []));
+    gradientStops = input([
+        { offset: '0%', stopOpacity: 1 },
+        { offset: '75%', stopOpacity: 0 },
+    ], ...(ngDevMode ? [{ debugName: "gradientStops" }] : []));
+    yDomain = input(...(ngDevMode ? [undefined, { debugName: "yDomain" }] : []));
+    xDomain = input(...(ngDevMode ? [undefined, { debugName: "xDomain" }] : []));
+    click = output();
+    tooltipWrapper = viewChild('tooltipWrapper', ...(ngDevMode ? [{ debugName: "tooltipWrapper" }] : []));
+    hoverValues = signal(undefined, ...(ngDevMode ? [{ debugName: "hoverValues" }] : []));
+    DEFAULT_OPACITY = 0.5;
+    DEFAULT_COLOR = '#3b82f6';
+    Position = Position;
+    CurveType = CurveType$1;
+    categoryKeys = computed(() => Object.keys(this.categories()), ...(ngDevMode ? [{ debugName: "categoryKeys" }] : []));
+    colors = computed(() => {
+        const cats = this.categories();
+        return Object.keys(cats).map((key, index) => {
+            return cats[key].color ?? `var(--vis-color${index})`;
+        });
+    }, ...(ngDevMode ? [{ debugName: "colors" }] : []));
+    isLegendTop = computed(() => this.legendPosition().startsWith('top'), ...(ngDevMode ? [{ debugName: "isLegendTop" }] : []));
+    legendAlignment = computed(() => {
+        const pos = this.legendPosition();
+        if (pos.includes('left'))
+            return 'flex-start';
+        if (pos.includes('right'))
+            return 'flex-end';
+        return 'center';
+    }, ...(ngDevMode ? [{ debugName: "legendAlignment" }] : []));
+    legendItems = computed(() => {
+        return Object.values(this.categories()).map((item) => ({
+            ...item,
+            color: Array.isArray(item.color) ? item.color[0] : item.color,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "legendItems" }] : []));
+    svgDefs = computed(() => {
+        const stops = this.gradientStops();
+        const colors = this.colors();
+        return colors.map((color, index) => {
+            const id = `gradient-${index}-${color.replace(/#/g, '')}`;
+            return `
+        <linearGradient id="${id}" gradientTransform="rotate(90)">
+          ${stops.map(stop => `
+            <stop offset="${stop.offset}" stop-color="${color}" stop-opacity="${stop.stopOpacity}" />
+          `).join('')}
+          <stop offset="100%" stop-color="${color}" stop-opacity="0" />
+        </linearGradient>
+      `;
+        }).join('');
+    }, ...(ngDevMode ? [{ debugName: "svgDefs" }] : []));
+    stackedYAccessors = computed(() => {
+        const keys = this.categoryKeys();
+        return keys.map(key => (d) => Number(d[key]));
+    }, ...(ngDevMode ? [{ debugName: "stackedYAccessors" }] : []));
+    stackedLineYAccessors = computed(() => {
+        const keys = this.categoryKeys();
+        return keys.map((_, index) => {
+            return (d) => {
+                let sum = 0;
+                for (let i = 0; i <= index; i++) {
+                    sum += Number(d[keys[i]]) || 0;
+                }
+                return sum;
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "stackedLineYAccessors" }] : []));
+    markerSvgDefs = computed(() => {
+        const config = this.markerConfig();
+        if (!config?.config)
+            return '';
+        return createMarkers(config);
+    }, ...(ngDevMode ? [{ debugName: "markerSvgDefs" }] : []));
+    markerCssVars = computed(() => {
+        const config = this.markerConfig();
+        if (!config?.config)
+            return {};
+        const vars = {};
+        for (const key of Object.keys(config.config)) {
+            vars[`--vis-marker-${key}`] = `url("#${config.id}-${key}")`;
+        }
+        return vars;
+    }, ...(ngDevMode ? [{ debugName: "markerCssVars" }] : []));
+    stackedColorAccessor = (_d, i) => this.colors()[i] ?? this.DEFAULT_COLOR;
+    _x = (_, i) => i;
+    getYAccessor(categoryId) {
+        return (d) => Number(d[categoryId]);
+    }
+    getGradientSelector(index) {
+        const color = this.colors()[index];
+        const id = `gradient-${index}-${color.replace(/#/g, '')}`;
+        return `url(#${id})`;
+    }
+    onCrosshairUpdate = (d) => {
+        this.hoverValues.set(d);
+        this.cdr.detectChanges();
+        return this.tooltipWrapper()?.nativeElement.innerHTML || '';
+    };
+    onClick(event) {
+        this.click.emit({ event, values: this.hoverValues() });
+    }
+    cdr = inject(ChangeDetectorRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AreaChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AreaChartComponent, isStandalone: true, selector: "ngx-area-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, hideArea: { classPropertyName: "hideArea", publicName: "hideArea", isSignal: true, isRequired: false, transformFunction: null }, curveType: { classPropertyName: "curveType", publicName: "curveType", isSignal: true, isRequired: false, transformFunction: null }, lineWidth: { classPropertyName: "lineWidth", publicName: "lineWidth", isSignal: true, isRequired: false, transformFunction: null }, lineDashArray: { classPropertyName: "lineDashArray", publicName: "lineDashArray", isSignal: true, isRequired: false, transformFunction: null }, xLabel: { classPropertyName: "xLabel", publicName: "xLabel", isSignal: true, isRequired: false, transformFunction: null }, yLabel: { classPropertyName: "yLabel", publicName: "yLabel", isSignal: true, isRequired: false, transformFunction: null }, xFormatter: { classPropertyName: "xFormatter", publicName: "xFormatter", isSignal: true, isRequired: false, transformFunction: null }, yFormatter: { classPropertyName: "yFormatter", publicName: "yFormatter", isSignal: true, isRequired: false, transformFunction: null }, xNumTicks: { classPropertyName: "xNumTicks", publicName: "xNumTicks", isSignal: true, isRequired: false, transformFunction: null }, xExplicitTicks: { classPropertyName: "xExplicitTicks", publicName: "xExplicitTicks", isSignal: true, isRequired: false, transformFunction: null }, minMaxTicksOnly: { classPropertyName: "minMaxTicksOnly", publicName: "minMaxTicksOnly", isSignal: true, isRequired: false, transformFunction: null }, yNumTicks: { classPropertyName: "yNumTicks", publicName: "yNumTicks", isSignal: true, isRequired: false, transformFunction: null }, hideXAxis: { classPropertyName: "hideXAxis", publicName: "hideXAxis", isSignal: true, isRequired: false, transformFunction: null }, hideYAxis: { classPropertyName: "hideYAxis", publicName: "hideYAxis", isSignal: true, isRequired: false, transformFunction: null }, xGridLine: { classPropertyName: "xGridLine", publicName: "xGridLine", isSignal: true, isRequired: false, transformFunction: null }, yGridLine: { classPropertyName: "yGridLine", publicName: "yGridLine", isSignal: true, isRequired: false, transformFunction: null }, xDomainLine: { classPropertyName: "xDomainLine", publicName: "xDomainLine", isSignal: true, isRequired: false, transformFunction: null }, yDomainLine: { classPropertyName: "yDomainLine", publicName: "yDomainLine", isSignal: true, isRequired: false, transformFunction: null }, xTickLine: { classPropertyName: "xTickLine", publicName: "xTickLine", isSignal: true, isRequired: false, transformFunction: null }, yTickLine: { classPropertyName: "yTickLine", publicName: "yTickLine", isSignal: true, isRequired: false, transformFunction: null }, hideTooltip: { classPropertyName: "hideTooltip", publicName: "hideTooltip", isSignal: true, isRequired: false, transformFunction: null }, hideLegend: { classPropertyName: "hideLegend", publicName: "hideLegend", isSignal: true, isRequired: false, transformFunction: null }, legendPosition: { classPropertyName: "legendPosition", publicName: "legendPosition", isSignal: true, isRequired: false, transformFunction: null }, legendStyle: { classPropertyName: "legendStyle", publicName: "legendStyle", isSignal: true, isRequired: false, transformFunction: null }, tooltipStyle: { classPropertyName: "tooltipStyle", publicName: "tooltipStyle", isSignal: true, isRequired: false, transformFunction: null }, tooltipTitleFormatter: { classPropertyName: "tooltipTitleFormatter", publicName: "tooltipTitleFormatter", isSignal: true, isRequired: false, transformFunction: null }, markerConfig: { classPropertyName: "markerConfig", publicName: "markerConfig", isSignal: true, isRequired: false, transformFunction: null }, gradientStops: { classPropertyName: "gradientStops", publicName: "gradientStops", isSignal: true, isRequired: false, transformFunction: null }, yDomain: { classPropertyName: "yDomain", publicName: "yDomain", isSignal: true, isRequired: false, transformFunction: null }, xDomain: { classPropertyName: "xDomain", publicName: "xDomain", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "tooltipWrapper", first: true, predicate: ["tooltipWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      [style.display]="'flex'"
+      [style.flexDirection]="isLegendTop() ? 'column-reverse' : 'column'"
+      [style.gap]="'var(--vis-legend-spacing)'"
+      [style]="markerCssVars()"
+      [class.stacked-area-chart]="stacked()"
+      [id]="markerConfig()?.id"
+      (click)="onClick($event)"
+    >
+      <vis-xy-container
+        [data]="data()"
+        [height]="height()"
+        [padding]="padding()"
+        [yDomain]="yDomain()"
+        [xDomain]="xDomain()"
+      >
+        @if (!hideTooltip()) {
+          <vis-tooltip
+            [horizontalPlacement]="Position.Right"
+            [verticalPlacement]="Position.Top"
+          ></vis-tooltip>
+        }
+
+        @if (stacked()) {
+          <vis-area
+            [x]="_x"
+            [y]="stackedYAccessors()"
+            [color]="stackedColorAccessor"
+            [opacity]="hideArea() ? 0 : DEFAULT_OPACITY"
+            [curveType]="curveType() || CurveType.MonotoneX"
+          ></vis-area>
+          <vis-line
+            [x]="_x"
+            [y]="stackedLineYAccessors()"
+            [color]="stackedColorAccessor"
+            [curveType]="curveType() || CurveType.MonotoneX"
+            [lineWidth]="lineWidth()"
+          ></vis-line>
+        } @else {
+          @for (categoryId of categoryKeys(); track categoryId; let i = $index) {
+            <vis-area
+              [x]="_x"
+              [y]="getYAccessor(categoryId)"
+              [color]="getGradientSelector(i)"
+              [opacity]="hideArea() ? 0 : DEFAULT_OPACITY"
+              [curveType]="curveType() || CurveType.MonotoneX"
+            ></vis-area>
+            <vis-line
+              [x]="_x"
+              [y]="getYAccessor(categoryId)"
+              [color]="colors()[i]"
+              [curveType]="curveType() || CurveType.MonotoneX"
+              [lineWidth]="lineWidth()"
+              [lineDashArray]="lineDashArray() ? lineDashArray()![i] : undefined"
+            ></vis-line>
+          }
+        }
+
+        @if (!hideXAxis()) {
+          <vis-axis
+            type="x"
+            [label]="xLabel()"
+            [labelMargin]="8"
+            [numTicks]="xNumTicks()"
+            [tickFormat]="xFormatter()"
+            [tickValues]="xExplicitTicks()"
+            [gridLine]="xGridLine()"
+            [domainLine]="xDomainLine()"
+            [tickLine]="xTickLine()"
+            [minMaxTicksOnly]="minMaxTicksOnly()"
+          ></vis-axis>
+        }
+
+        @if (!hideYAxis()) {
+          <vis-axis
+            type="y"
+            [label]="yLabel()"
+            [numTicks]="yNumTicks()"
+            [tickFormat]="yFormatter()"
+            [gridLine]="yGridLine()"
+            [domainLine]="yDomainLine()"
+            [tickLine]="yTickLine()"
+          ></vis-axis>
+        }
+
+        @if (!hideTooltip()) {
+          <vis-crosshair
+            [template]="onCrosshairUpdate"
+          ></vis-crosshair>
+        }
+      </vis-xy-container>
+
+      @if (!hideLegend()) {
+        <div
+          [style.display]="'flex'"
+          [style.justifyContent]="legendAlignment()"
+        >
+          <vis-bullet-legend
+            [style]="legendStyle()"
+            [items]="legendItems()"
+          ></vis-bullet-legend>
+        </div>
+      }
+
+      <div #tooltipWrapper style="display: none">
+        @if (hoverValues()) {
+            <ngx-tooltip
+              [data]="hoverValues()!"
+              [categories]="categories()"
+              [titleFormatter]="tooltipTitleFormatter()"
+              [yFormatter]="yFormatter()"
+            ></ngx-tooltip>
+        }
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: VisXYContainerModule }, { kind: "component", type: i1.VisXYContainerComponent, selector: "vis-xy-container", inputs: ["width", "height", "xScale", "xDomain", "xDomainMinConstraint", "xDomainMaxConstraint", "xRange", "yScale", "yDomain", "yDomainMinConstraint", "yDomainMaxConstraint", "yRange", "yDirection", "preventEmptyDomain", "duration", "margin", "padding", "scaleByDomain", "autoMargin", "ariaLabel", "data"] }, { kind: "ngmodule", type: VisAreaModule }, { kind: "component", type: i1.VisAreaComponent, selector: "vis-area", inputs: ["duration", "events", "attributes", "x", "y", "id", "color", "xScale", "yScale", "excludeFromDomainCalculation", "curveType", "baseline", "opacity", "cursor", "minHeight1Px", "minHeight", "data"] }, { kind: "ngmodule", type: VisAxisModule }, { kind: "component", type: i1.VisAxisComponent, selector: "vis-axis", inputs: ["duration", "events", "attributes", "position", "type", "fullSize", "label", "labelFontSize", "labelMargin", "labelTextFitMode", "labelTextTrimType", "labelColor", "gridLine", "tickLine", "domainLine", "minMaxTicksOnly", "minMaxTicksOnlyShowGridLines", "minMaxTicksOnlyWhenWidthIsLess", "tickFormat", "tickValues", "numTicks", "tickTextFitMode", "tickTextWidth", "tickTextSeparator", "tickTextForceWordBreak", "tickTextTrimType", "tickTextFontSize", "tickTextAlign", "tickTextColor", "tickTextAngle", "tickTextHideOverlapping", "tickPadding", "data"] }, { kind: "ngmodule", type: VisLineModule }, { kind: "component", type: i1.VisLineComponent, selector: "vis-line", inputs: ["duration", "events", "attributes", "x", "y", "id", "color", "xScale", "yScale", "excludeFromDomainCalculation", "curveType", "lineWidth", "lineDashArray", "fallbackValue", "highlightOnHover", "cursor", "interpolateMissingData", "data"] }, { kind: "ngmodule", type: VisTooltipModule }, { kind: "component", type: i1.VisTooltipComponent, selector: "vis-tooltip", inputs: ["components", "container", "followCursor", "allowHover", "horizontalPlacement", "horizontalShift", "verticalPlacement", "verticalShift", "triggers", "attributes", "className", "hideDelay", "showDelay"] }, { kind: "ngmodule", type: VisCrosshairModule }, { kind: "component", type: i1.VisCrosshairComponent, selector: "vis-crosshair", inputs: ["duration", "events", "attributes", "x", "y", "id", "color", "xScale", "yScale", "excludeFromDomainCalculation", "strokeColor", "strokeWidth", "yStacked", "baseline", "tooltip", "template", "hideWhenFarFromPointer", "hideWhenFarFromPointerDistance", "snapToData", "getCircles", "onCrosshairMove", "forceShowAt", "skipRangeCheck", "data"] }, { kind: "ngmodule", type: VisBulletLegendModule }, { kind: "component", type: i1.VisBulletLegendComponent, selector: "vis-bullet-legend", inputs: ["items", "labelClassName", "onLegendItemClick", "labelFontSize", "labelMaxWidth", "bulletSize", "bulletSpacing", "bulletShape", "orientation"] }, { kind: "component", type: TooltipComponent, selector: "ngx-tooltip", inputs: ["data", "categories", "titleFormatter", "yFormatter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AreaChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-area-chart',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        VisXYContainerModule,
+                        VisAreaModule,
+                        VisAxisModule,
+                        VisLineModule,
+                        VisTooltipModule,
+                        VisCrosshairModule,
+                        VisBulletLegendModule,
+                        TooltipComponent,
+                    ],
+                    template: `
+    <div
+      [style.display]="'flex'"
+      [style.flexDirection]="isLegendTop() ? 'column-reverse' : 'column'"
+      [style.gap]="'var(--vis-legend-spacing)'"
+      [style]="markerCssVars()"
+      [class.stacked-area-chart]="stacked()"
+      [id]="markerConfig()?.id"
+      (click)="onClick($event)"
+    >
+      <vis-xy-container
+        [data]="data()"
+        [height]="height()"
+        [padding]="padding()"
+        [yDomain]="yDomain()"
+        [xDomain]="xDomain()"
+      >
+        @if (!hideTooltip()) {
+          <vis-tooltip
+            [horizontalPlacement]="Position.Right"
+            [verticalPlacement]="Position.Top"
+          ></vis-tooltip>
+        }
+
+        @if (stacked()) {
+          <vis-area
+            [x]="_x"
+            [y]="stackedYAccessors()"
+            [color]="stackedColorAccessor"
+            [opacity]="hideArea() ? 0 : DEFAULT_OPACITY"
+            [curveType]="curveType() || CurveType.MonotoneX"
+          ></vis-area>
+          <vis-line
+            [x]="_x"
+            [y]="stackedLineYAccessors()"
+            [color]="stackedColorAccessor"
+            [curveType]="curveType() || CurveType.MonotoneX"
+            [lineWidth]="lineWidth()"
+          ></vis-line>
+        } @else {
+          @for (categoryId of categoryKeys(); track categoryId; let i = $index) {
+            <vis-area
+              [x]="_x"
+              [y]="getYAccessor(categoryId)"
+              [color]="getGradientSelector(i)"
+              [opacity]="hideArea() ? 0 : DEFAULT_OPACITY"
+              [curveType]="curveType() || CurveType.MonotoneX"
+            ></vis-area>
+            <vis-line
+              [x]="_x"
+              [y]="getYAccessor(categoryId)"
+              [color]="colors()[i]"
+              [curveType]="curveType() || CurveType.MonotoneX"
+              [lineWidth]="lineWidth()"
+              [lineDashArray]="lineDashArray() ? lineDashArray()![i] : undefined"
+            ></vis-line>
+          }
+        }
+
+        @if (!hideXAxis()) {
+          <vis-axis
+            type="x"
+            [label]="xLabel()"
+            [labelMargin]="8"
+            [numTicks]="xNumTicks()"
+            [tickFormat]="xFormatter()"
+            [tickValues]="xExplicitTicks()"
+            [gridLine]="xGridLine()"
+            [domainLine]="xDomainLine()"
+            [tickLine]="xTickLine()"
+            [minMaxTicksOnly]="minMaxTicksOnly()"
+          ></vis-axis>
+        }
+
+        @if (!hideYAxis()) {
+          <vis-axis
+            type="y"
+            [label]="yLabel()"
+            [numTicks]="yNumTicks()"
+            [tickFormat]="yFormatter()"
+            [gridLine]="yGridLine()"
+            [domainLine]="yDomainLine()"
+            [tickLine]="yTickLine()"
+          ></vis-axis>
+        }
+
+        @if (!hideTooltip()) {
+          <vis-crosshair
+            [template]="onCrosshairUpdate"
+          ></vis-crosshair>
+        }
+      </vis-xy-container>
+
+      @if (!hideLegend()) {
+        <div
+          [style.display]="'flex'"
+          [style.justifyContent]="legendAlignment()"
+        >
+          <vis-bullet-legend
+            [style]="legendStyle()"
+            [items]="legendItems()"
+          ></vis-bullet-legend>
+        </div>
+      }
+
+      <div #tooltipWrapper style="display: none">
+        @if (hoverValues()) {
+            <ngx-tooltip
+              [data]="hoverValues()!"
+              [categories]="categories()"
+              [titleFormatter]="tooltipTitleFormatter()"
+              [yFormatter]="yFormatter()"
+            ></ngx-tooltip>
+        }
+      </div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: true }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], hideArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideArea", required: false }] }], curveType: [{ type: i0.Input, args: [{ isSignal: true, alias: "curveType", required: false }] }], lineWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineWidth", required: false }] }], lineDashArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineDashArray", required: false }] }], xLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabel", required: false }] }], yLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLabel", required: false }] }], xFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "xFormatter", required: false }] }], yFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "yFormatter", required: false }] }], xNumTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "xNumTicks", required: false }] }], xExplicitTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "xExplicitTicks", required: false }] }], minMaxTicksOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMaxTicksOnly", required: false }] }], yNumTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "yNumTicks", required: false }] }], hideXAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideXAxis", required: false }] }], hideYAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideYAxis", required: false }] }], xGridLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "xGridLine", required: false }] }], yGridLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "yGridLine", required: false }] }], xDomainLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "xDomainLine", required: false }] }], yDomainLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "yDomainLine", required: false }] }], xTickLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "xTickLine", required: false }] }], yTickLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "yTickLine", required: false }] }], hideTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTooltip", required: false }] }], hideLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLegend", required: false }] }], legendPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendPosition", required: false }] }], legendStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendStyle", required: false }] }], tooltipStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipStyle", required: false }] }], tooltipTitleFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTitleFormatter", required: false }] }], markerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerConfig", required: false }] }], gradientStops: [{ type: i0.Input, args: [{ isSignal: true, alias: "gradientStops", required: false }] }], yDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "yDomain", required: false }] }], xDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "xDomain", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], tooltipWrapper: [{ type: i0.ViewChild, args: ['tooltipWrapper', { isSignal: true }] }] } });
+
+class LineChartComponent {
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    height = input(400, ...(ngDevMode ? [{ debugName: "height" }] : []));
+    padding = input({
+        top: 5,
+        right: 5,
+        bottom: 5,
+        left: 5,
+    }, ...(ngDevMode ? [{ debugName: "padding" }] : []));
+    categories = input.required(...(ngDevMode ? [{ debugName: "categories" }] : []));
+    stacked = input(false, ...(ngDevMode ? [{ debugName: "stacked" }] : []));
+    curveType = input(...(ngDevMode ? [undefined, { debugName: "curveType" }] : []));
+    lineWidth = input(2, ...(ngDevMode ? [{ debugName: "lineWidth" }] : []));
+    lineDashArray = input(...(ngDevMode ? [undefined, { debugName: "lineDashArray" }] : []));
+    xLabel = input(...(ngDevMode ? [undefined, { debugName: "xLabel" }] : []));
+    yLabel = input(...(ngDevMode ? [undefined, { debugName: "yLabel" }] : []));
+    xFormatter = input(...(ngDevMode ? [undefined, { debugName: "xFormatter" }] : []));
+    yFormatter = input(...(ngDevMode ? [undefined, { debugName: "yFormatter" }] : []));
+    xNumTicks = input(...(ngDevMode ? [undefined, { debugName: "xNumTicks" }] : []));
+    xExplicitTicks = input(...(ngDevMode ? [undefined, { debugName: "xExplicitTicks" }] : []));
+    minMaxTicksOnly = input(false, ...(ngDevMode ? [{ debugName: "minMaxTicksOnly" }] : []));
+    yNumTicks = input(...(ngDevMode ? [undefined, { debugName: "yNumTicks" }] : []));
+    hideXAxis = input(false, ...(ngDevMode ? [{ debugName: "hideXAxis" }] : []));
+    hideYAxis = input(false, ...(ngDevMode ? [{ debugName: "hideYAxis" }] : []));
+    xGridLine = input(false, ...(ngDevMode ? [{ debugName: "xGridLine" }] : []));
+    yGridLine = input(false, ...(ngDevMode ? [{ debugName: "yGridLine" }] : []));
+    xDomainLine = input(false, ...(ngDevMode ? [{ debugName: "xDomainLine" }] : []));
+    yDomainLine = input(false, ...(ngDevMode ? [{ debugName: "yDomainLine" }] : []));
+    xTickLine = input(false, ...(ngDevMode ? [{ debugName: "xTickLine" }] : []));
+    yTickLine = input(false, ...(ngDevMode ? [{ debugName: "yTickLine" }] : []));
+    hideTooltip = input(false, ...(ngDevMode ? [{ debugName: "hideTooltip" }] : []));
+    hideLegend = input(false, ...(ngDevMode ? [{ debugName: "hideLegend" }] : []));
+    legendPosition = input(LegendPosition.BottomCenter, ...(ngDevMode ? [{ debugName: "legendPosition" }] : []));
+    legendStyle = input(...(ngDevMode ? [undefined, { debugName: "legendStyle" }] : []));
+    tooltipTitleFormatter = input(...(ngDevMode ? [undefined, { debugName: "tooltipTitleFormatter" }] : []));
+    markerConfig = input(...(ngDevMode ? [undefined, { debugName: "markerConfig" }] : []));
+    yDomain = input(...(ngDevMode ? [undefined, { debugName: "yDomain" }] : []));
+    xDomain = input(...(ngDevMode ? [undefined, { debugName: "xDomain" }] : []));
+    click = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: LineChartComponent, isStandalone: true, selector: "ngx-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, curveType: { classPropertyName: "curveType", publicName: "curveType", isSignal: true, isRequired: false, transformFunction: null }, lineWidth: { classPropertyName: "lineWidth", publicName: "lineWidth", isSignal: true, isRequired: false, transformFunction: null }, lineDashArray: { classPropertyName: "lineDashArray", publicName: "lineDashArray", isSignal: true, isRequired: false, transformFunction: null }, xLabel: { classPropertyName: "xLabel", publicName: "xLabel", isSignal: true, isRequired: false, transformFunction: null }, yLabel: { classPropertyName: "yLabel", publicName: "yLabel", isSignal: true, isRequired: false, transformFunction: null }, xFormatter: { classPropertyName: "xFormatter", publicName: "xFormatter", isSignal: true, isRequired: false, transformFunction: null }, yFormatter: { classPropertyName: "yFormatter", publicName: "yFormatter", isSignal: true, isRequired: false, transformFunction: null }, xNumTicks: { classPropertyName: "xNumTicks", publicName: "xNumTicks", isSignal: true, isRequired: false, transformFunction: null }, xExplicitTicks: { classPropertyName: "xExplicitTicks", publicName: "xExplicitTicks", isSignal: true, isRequired: false, transformFunction: null }, minMaxTicksOnly: { classPropertyName: "minMaxTicksOnly", publicName: "minMaxTicksOnly", isSignal: true, isRequired: false, transformFunction: null }, yNumTicks: { classPropertyName: "yNumTicks", publicName: "yNumTicks", isSignal: true, isRequired: false, transformFunction: null }, hideXAxis: { classPropertyName: "hideXAxis", publicName: "hideXAxis", isSignal: true, isRequired: false, transformFunction: null }, hideYAxis: { classPropertyName: "hideYAxis", publicName: "hideYAxis", isSignal: true, isRequired: false, transformFunction: null }, xGridLine: { classPropertyName: "xGridLine", publicName: "xGridLine", isSignal: true, isRequired: false, transformFunction: null }, yGridLine: { classPropertyName: "yGridLine", publicName: "yGridLine", isSignal: true, isRequired: false, transformFunction: null }, xDomainLine: { classPropertyName: "xDomainLine", publicName: "xDomainLine", isSignal: true, isRequired: false, transformFunction: null }, yDomainLine: { classPropertyName: "yDomainLine", publicName: "yDomainLine", isSignal: true, isRequired: false, transformFunction: null }, xTickLine: { classPropertyName: "xTickLine", publicName: "xTickLine", isSignal: true, isRequired: false, transformFunction: null }, yTickLine: { classPropertyName: "yTickLine", publicName: "yTickLine", isSignal: true, isRequired: false, transformFunction: null }, hideTooltip: { classPropertyName: "hideTooltip", publicName: "hideTooltip", isSignal: true, isRequired: false, transformFunction: null }, hideLegend: { classPropertyName: "hideLegend", publicName: "hideLegend", isSignal: true, isRequired: false, transformFunction: null }, legendPosition: { classPropertyName: "legendPosition", publicName: "legendPosition", isSignal: true, isRequired: false, transformFunction: null }, legendStyle: { classPropertyName: "legendStyle", publicName: "legendStyle", isSignal: true, isRequired: false, transformFunction: null }, tooltipTitleFormatter: { classPropertyName: "tooltipTitleFormatter", publicName: "tooltipTitleFormatter", isSignal: true, isRequired: false, transformFunction: null }, markerConfig: { classPropertyName: "markerConfig", publicName: "markerConfig", isSignal: true, isRequired: false, transformFunction: null }, yDomain: { classPropertyName: "yDomain", publicName: "yDomain", isSignal: true, isRequired: false, transformFunction: null }, xDomain: { classPropertyName: "xDomain", publicName: "xDomain", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: `
+    <ngx-area-chart
+      [data]="data()"
+      [height]="height()"
+      [padding]="padding()"
+      [categories]="categories()"
+      [stacked]="stacked()"
+      [hideArea]="true"
+      [curveType]="curveType()"
+      [lineWidth]="lineWidth()"
+      [lineDashArray]="lineDashArray()"
+      [xLabel]="xLabel()"
+      [yLabel]="yLabel()"
+      [xFormatter]="xFormatter()"
+      [yFormatter]="yFormatter()"
+      [xNumTicks]="xNumTicks()"
+      [xExplicitTicks]="xExplicitTicks()"
+      [minMaxTicksOnly]="minMaxTicksOnly()"
+      [yNumTicks]="yNumTicks()"
+      [hideXAxis]="hideXAxis()"
+      [hideYAxis]="hideYAxis()"
+      [xGridLine]="xGridLine()"
+      [yGridLine]="yGridLine()"
+      [xDomainLine]="xDomainLine()"
+      [yDomainLine]="yDomainLine()"
+      [xTickLine]="xTickLine()"
+      [yTickLine]="yTickLine()"
+      [hideTooltip]="hideTooltip()"
+      [hideLegend]="hideLegend()"
+      [legendPosition]="legendPosition()"
+      [legendStyle]="legendStyle()"
+      [tooltipTitleFormatter]="tooltipTitleFormatter()"
+      [markerConfig]="markerConfig()"
+      [yDomain]="yDomain()"
+      [xDomain]="xDomain()"
+      (click)="click.emit($event)"
+    ></ngx-area-chart>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AreaChartComponent, selector: "ngx-area-chart", inputs: ["data", "height", "padding", "categories", "stacked", "hideArea", "curveType", "lineWidth", "lineDashArray", "xLabel", "yLabel", "xFormatter", "yFormatter", "xNumTicks", "xExplicitTicks", "minMaxTicksOnly", "yNumTicks", "hideXAxis", "hideYAxis", "xGridLine", "yGridLine", "xDomainLine", "yDomainLine", "xTickLine", "yTickLine", "hideTooltip", "hideLegend", "legendPosition", "legendStyle", "tooltipStyle", "tooltipTitleFormatter", "markerConfig", "gradientStops", "yDomain", "xDomain"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LineChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-line-chart',
+                    standalone: true,
+                    imports: [CommonModule, AreaChartComponent],
+                    template: `
+    <ngx-area-chart
+      [data]="data()"
+      [height]="height()"
+      [padding]="padding()"
+      [categories]="categories()"
+      [stacked]="stacked()"
+      [hideArea]="true"
+      [curveType]="curveType()"
+      [lineWidth]="lineWidth()"
+      [lineDashArray]="lineDashArray()"
+      [xLabel]="xLabel()"
+      [yLabel]="yLabel()"
+      [xFormatter]="xFormatter()"
+      [yFormatter]="yFormatter()"
+      [xNumTicks]="xNumTicks()"
+      [xExplicitTicks]="xExplicitTicks()"
+      [minMaxTicksOnly]="minMaxTicksOnly()"
+      [yNumTicks]="yNumTicks()"
+      [hideXAxis]="hideXAxis()"
+      [hideYAxis]="hideYAxis()"
+      [xGridLine]="xGridLine()"
+      [yGridLine]="yGridLine()"
+      [xDomainLine]="xDomainLine()"
+      [yDomainLine]="yDomainLine()"
+      [xTickLine]="xTickLine()"
+      [yTickLine]="yTickLine()"
+      [hideTooltip]="hideTooltip()"
+      [hideLegend]="hideLegend()"
+      [legendPosition]="legendPosition()"
+      [legendStyle]="legendStyle()"
+      [tooltipTitleFormatter]="tooltipTitleFormatter()"
+      [markerConfig]="markerConfig()"
+      [yDomain]="yDomain()"
+      [xDomain]="xDomain()"
+      (click)="click.emit($event)"
+    ></ngx-area-chart>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: true }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], curveType: [{ type: i0.Input, args: [{ isSignal: true, alias: "curveType", required: false }] }], lineWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineWidth", required: false }] }], lineDashArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineDashArray", required: false }] }], xLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabel", required: false }] }], yLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLabel", required: false }] }], xFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "xFormatter", required: false }] }], yFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "yFormatter", required: false }] }], xNumTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "xNumTicks", required: false }] }], xExplicitTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "xExplicitTicks", required: false }] }], minMaxTicksOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMaxTicksOnly", required: false }] }], yNumTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "yNumTicks", required: false }] }], hideXAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideXAxis", required: false }] }], hideYAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideYAxis", required: false }] }], xGridLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "xGridLine", required: false }] }], yGridLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "yGridLine", required: false }] }], xDomainLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "xDomainLine", required: false }] }], yDomainLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "yDomainLine", required: false }] }], xTickLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "xTickLine", required: false }] }], yTickLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "yTickLine", required: false }] }], hideTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTooltip", required: false }] }], hideLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLegend", required: false }] }], legendPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendPosition", required: false }] }], legendStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendStyle", required: false }] }], tooltipTitleFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTitleFormatter", required: false }] }], markerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerConfig", required: false }] }], yDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "yDomain", required: false }] }], xDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "xDomain", required: false }] }], click: [{ type: i0.Output, args: ["click"] }] } });
+
+class BarChartComponent {
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    height = input(400, ...(ngDevMode ? [{ debugName: "height" }] : []));
+    padding = input({
+        top: 5,
+        right: 5,
+        bottom: 5,
+        left: 5,
+    }, ...(ngDevMode ? [{ debugName: "padding" }] : []));
+    categories = input.required(...(ngDevMode ? [{ debugName: "categories" }] : []));
+    yAxis = input.required(...(ngDevMode ? [{ debugName: "yAxis" }] : []));
+    stacked = input(false, ...(ngDevMode ? [{ debugName: "stacked" }] : []));
+    orientation = input(Orientation$1.Vertical, ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    radius = input(...(ngDevMode ? [undefined, { debugName: "radius" }] : []));
+    groupPadding = input(0, ...(ngDevMode ? [{ debugName: "groupPadding" }] : []));
+    barPadding = input(0.2, ...(ngDevMode ? [{ debugName: "barPadding" }] : []));
+    xLabel = input(...(ngDevMode ? [undefined, { debugName: "xLabel" }] : []));
+    yLabel = input(...(ngDevMode ? [undefined, { debugName: "yLabel" }] : []));
+    xFormatter = input(...(ngDevMode ? [undefined, { debugName: "xFormatter" }] : []));
+    yFormatter = input(...(ngDevMode ? [undefined, { debugName: "yFormatter" }] : []));
+    tooltipTitleFormatter = input(...(ngDevMode ? [undefined, { debugName: "tooltipTitleFormatter" }] : []));
+    xNumTicks = input(...(ngDevMode ? [undefined, { debugName: "xNumTicks" }] : []));
+    xExplicitTicks = input(...(ngDevMode ? [undefined, { debugName: "xExplicitTicks" }] : []));
+    minMaxTicksOnly = input(false, ...(ngDevMode ? [{ debugName: "minMaxTicksOnly" }] : []));
+    yNumTicks = input(...(ngDevMode ? [undefined, { debugName: "yNumTicks" }] : []));
+    hideXAxis = input(false, ...(ngDevMode ? [{ debugName: "hideXAxis" }] : []));
+    hideYAxis = input(false, ...(ngDevMode ? [{ debugName: "hideYAxis" }] : []));
+    xGridLine = input(false, ...(ngDevMode ? [{ debugName: "xGridLine" }] : []));
+    yGridLine = input(true, ...(ngDevMode ? [{ debugName: "yGridLine" }] : []));
+    xDomainLine = input(false, ...(ngDevMode ? [{ debugName: "xDomainLine" }] : []));
+    yDomainLine = input(false, ...(ngDevMode ? [{ debugName: "yDomainLine" }] : []));
+    xTickLine = input(false, ...(ngDevMode ? [{ debugName: "xTickLine" }] : []));
+    yTickLine = input(false, ...(ngDevMode ? [{ debugName: "yTickLine" }] : []));
+    hideTooltip = input(false, ...(ngDevMode ? [{ debugName: "hideTooltip" }] : []));
+    hideLegend = input(false, ...(ngDevMode ? [{ debugName: "hideLegend" }] : []));
+    legendPosition = input(LegendPosition.BottomCenter, ...(ngDevMode ? [{ debugName: "legendPosition" }] : []));
+    legendStyle = input(...(ngDevMode ? [undefined, { debugName: "legendStyle" }] : []));
+    valueLabel = input(...(ngDevMode ? [undefined, { debugName: "valueLabel" }] : []));
+    xAxisConfig = input(...(ngDevMode ? [undefined, { debugName: "xAxisConfig" }] : []));
+    yAxisConfig = input(...(ngDevMode ? [undefined, { debugName: "yAxisConfig" }] : []));
+    click = output();
+    tooltipWrapper = viewChild('tooltipWrapper', ...(ngDevMode ? [{ debugName: "tooltipWrapper" }] : []));
+    hoverValues = signal(undefined, ...(ngDevMode ? [{ debugName: "hoverValues" }] : []));
+    Orientation = Orientation$1;
+    isLegendTop = computed(() => this.legendPosition().startsWith('top'), ...(ngDevMode ? [{ debugName: "isLegendTop" }] : []));
+    legendAlignment = computed(() => {
+        const pos = this.legendPosition();
+        if (pos.includes('left'))
+            return 'flex-start';
+        if (pos.includes('right'))
+            return 'flex-end';
+        return 'center';
+    }, ...(ngDevMode ? [{ debugName: "legendAlignment" }] : []));
+    legendItems = computed(() => {
+        return Object.values(this.categories()).map((item) => ({
+            ...item,
+            color: Array.isArray(item.color) ? item.color[0] : item.color,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "legendItems" }] : []));
+    yAccessors = computed(() => {
+        return this.yAxis().map((key) => (d) => d[key]);
+    }, ...(ngDevMode ? [{ debugName: "yAccessors" }] : []));
+    colorAccessor = (_, i) => {
+        const cats = Object.values(this.categories());
+        return cats[i]?.color;
+    };
+    _x = (_, i) => i;
+    xFormatterFn = (tick, i, ticks) => {
+        const formatter = this.xFormatter();
+        return formatter ? formatter(tick, i, ticks) : String(tick);
+    };
+    yFormatterFn = (tick, i, ticks) => {
+        const formatter = this.yFormatter();
+        return formatter ? formatter(tick, i, ticks) : String(tick);
+    };
+    tooltipTriggers = {
+        [GroupedBar.selectors.bar]: (d) => {
+            this.onCrosshairUpdate(d);
+            return d ? this.tooltipWrapper()?.nativeElement.innerHTML ?? '' : '';
+        },
+        [StackedBar.selectors.bar]: (d) => {
+            this.onCrosshairUpdate(d);
+            return d ? this.tooltipWrapper()?.nativeElement.innerHTML ?? '' : '';
+        },
+    };
+    onCrosshairUpdate(d) {
+        this.hoverValues.set(d);
+        this.cdr.detectChanges();
+    }
+    onClick(event) {
+        this.click.emit({ event, values: this.hoverValues() });
+    }
+    cdr = inject(ChangeDetectorRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BarChartComponent, isStandalone: true, selector: "ngx-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, yAxis: { classPropertyName: "yAxis", publicName: "yAxis", isSignal: true, isRequired: true, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, groupPadding: { classPropertyName: "groupPadding", publicName: "groupPadding", isSignal: true, isRequired: false, transformFunction: null }, barPadding: { classPropertyName: "barPadding", publicName: "barPadding", isSignal: true, isRequired: false, transformFunction: null }, xLabel: { classPropertyName: "xLabel", publicName: "xLabel", isSignal: true, isRequired: false, transformFunction: null }, yLabel: { classPropertyName: "yLabel", publicName: "yLabel", isSignal: true, isRequired: false, transformFunction: null }, xFormatter: { classPropertyName: "xFormatter", publicName: "xFormatter", isSignal: true, isRequired: false, transformFunction: null }, yFormatter: { classPropertyName: "yFormatter", publicName: "yFormatter", isSignal: true, isRequired: false, transformFunction: null }, tooltipTitleFormatter: { classPropertyName: "tooltipTitleFormatter", publicName: "tooltipTitleFormatter", isSignal: true, isRequired: false, transformFunction: null }, xNumTicks: { classPropertyName: "xNumTicks", publicName: "xNumTicks", isSignal: true, isRequired: false, transformFunction: null }, xExplicitTicks: { classPropertyName: "xExplicitTicks", publicName: "xExplicitTicks", isSignal: true, isRequired: false, transformFunction: null }, minMaxTicksOnly: { classPropertyName: "minMaxTicksOnly", publicName: "minMaxTicksOnly", isSignal: true, isRequired: false, transformFunction: null }, yNumTicks: { classPropertyName: "yNumTicks", publicName: "yNumTicks", isSignal: true, isRequired: false, transformFunction: null }, hideXAxis: { classPropertyName: "hideXAxis", publicName: "hideXAxis", isSignal: true, isRequired: false, transformFunction: null }, hideYAxis: { classPropertyName: "hideYAxis", publicName: "hideYAxis", isSignal: true, isRequired: false, transformFunction: null }, xGridLine: { classPropertyName: "xGridLine", publicName: "xGridLine", isSignal: true, isRequired: false, transformFunction: null }, yGridLine: { classPropertyName: "yGridLine", publicName: "yGridLine", isSignal: true, isRequired: false, transformFunction: null }, xDomainLine: { classPropertyName: "xDomainLine", publicName: "xDomainLine", isSignal: true, isRequired: false, transformFunction: null }, yDomainLine: { classPropertyName: "yDomainLine", publicName: "yDomainLine", isSignal: true, isRequired: false, transformFunction: null }, xTickLine: { classPropertyName: "xTickLine", publicName: "xTickLine", isSignal: true, isRequired: false, transformFunction: null }, yTickLine: { classPropertyName: "yTickLine", publicName: "yTickLine", isSignal: true, isRequired: false, transformFunction: null }, hideTooltip: { classPropertyName: "hideTooltip", publicName: "hideTooltip", isSignal: true, isRequired: false, transformFunction: null }, hideLegend: { classPropertyName: "hideLegend", publicName: "hideLegend", isSignal: true, isRequired: false, transformFunction: null }, legendPosition: { classPropertyName: "legendPosition", publicName: "legendPosition", isSignal: true, isRequired: false, transformFunction: null }, legendStyle: { classPropertyName: "legendStyle", publicName: "legendStyle", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "valueLabel", isSignal: true, isRequired: false, transformFunction: null }, xAxisConfig: { classPropertyName: "xAxisConfig", publicName: "xAxisConfig", isSignal: true, isRequired: false, transformFunction: null }, yAxisConfig: { classPropertyName: "yAxisConfig", publicName: "yAxisConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "tooltipWrapper", first: true, predicate: ["tooltipWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      [style.display]="'flex'"
+      [style.flexDirection]="isLegendTop() ? 'column-reverse' : 'column'"
+      [style.gap]="'var(--vis-legend-spacing)'"
+      (click)="onClick($event)"
+    >
+      <vis-xy-container
+        [data]="data()"
+        [height]="height()"
+        [padding]="padding()"
+      >
+        <vis-tooltip
+          [triggers]="tooltipTriggers"
+        ></vis-tooltip>
+
+        @if (!stacked()) {
+          <vis-grouped-bar
+            [data]="data()"
+            [x]="_x"
+            [y]="yAccessors()"
+            [color]="colorAccessor"
+            [roundedCorners]="radius() ?? 0"
+            [groupPadding]="groupPadding()"
+            [barPadding]="barPadding()"
+            [orientation]="orientation()"
+          ></vis-grouped-bar>
+        } @else {
+          <vis-stacked-bar
+            [data]="data()"
+            [x]="_x"
+            [y]="yAccessors()"
+            [color]="colorAccessor"
+            [roundedCorners]="radius() ?? 0"
+            [barPadding]="barPadding()"
+            [orientation]="orientation()"
+          ></vis-stacked-bar>
+        }
+
+        @if (!hideXAxis()) {
+          <vis-axis
+            type="x"
+            [label]="xLabel()"
+            [tickFormat]="xFormatterFn"
+            [gridLine]="xGridLine()"
+            [domainLine]="!!xDomainLine()"
+            [tickLine]="xTickLine()"
+            [numTicks]="xNumTicks()"
+            [tickValues]="xExplicitTicks()"
+            [minMaxTicksOnly]="minMaxTicksOnly()"
+          ></vis-axis>
+        }
+
+        @if (!hideYAxis()) {
+          <vis-axis
+            type="y"
+            [label]="yLabel()"
+            [tickFormat]="yFormatterFn"
+            [gridLine]="orientation() !== Orientation.Horizontal && yGridLine()"
+            [domainLine]="!!yDomainLine()"
+            [numTicks]="yNumTicks()"
+            [tickLine]="yTickLine()"
+          ></vis-axis>
+        }
+      </vis-xy-container>
+
+      @if (!hideLegend()) {
+        <div
+          [style.display]="'flex'"
+          [style.justifyContent]="legendAlignment()"
+        >
+          <vis-bullet-legend
+            [items]="legendItems()"
+          ></vis-bullet-legend>
+        </div>
+      }
+
+      <div #tooltipWrapper style="display: none">
+        @if (hoverValues()) {
+          <ngx-tooltip
+            [data]="hoverValues()!"
+            [categories]="categories()"
+            [titleFormatter]="tooltipTitleFormatter()"
+            [yFormatter]="orientation() === Orientation.Horizontal ? xFormatter() : yFormatter()"
+          ></ngx-tooltip>
+        }
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: VisXYContainerModule }, { kind: "component", type: i1.VisXYContainerComponent, selector: "vis-xy-container", inputs: ["width", "height", "xScale", "xDomain", "xDomainMinConstraint", "xDomainMaxConstraint", "xRange", "yScale", "yDomain", "yDomainMinConstraint", "yDomainMaxConstraint", "yRange", "yDirection", "preventEmptyDomain", "duration", "margin", "padding", "scaleByDomain", "autoMargin", "ariaLabel", "data"] }, { kind: "ngmodule", type: VisAxisModule }, { kind: "component", type: i1.VisAxisComponent, selector: "vis-axis", inputs: ["duration", "events", "attributes", "position", "type", "fullSize", "label", "labelFontSize", "labelMargin", "labelTextFitMode", "labelTextTrimType", "labelColor", "gridLine", "tickLine", "domainLine", "minMaxTicksOnly", "minMaxTicksOnlyShowGridLines", "minMaxTicksOnlyWhenWidthIsLess", "tickFormat", "tickValues", "numTicks", "tickTextFitMode", "tickTextWidth", "tickTextSeparator", "tickTextForceWordBreak", "tickTextTrimType", "tickTextFontSize", "tickTextAlign", "tickTextColor", "tickTextAngle", "tickTextHideOverlapping", "tickPadding", "data"] }, { kind: "ngmodule", type: VisTooltipModule }, { kind: "component", type: i1.VisTooltipComponent, selector: "vis-tooltip", inputs: ["components", "container", "followCursor", "allowHover", "horizontalPlacement", "horizontalShift", "verticalPlacement", "verticalShift", "triggers", "attributes", "className", "hideDelay", "showDelay"] }, { kind: "ngmodule", type: VisBulletLegendModule }, { kind: "component", type: i1.VisBulletLegendComponent, selector: "vis-bullet-legend", inputs: ["items", "labelClassName", "onLegendItemClick", "labelFontSize", "labelMaxWidth", "bulletSize", "bulletSpacing", "bulletShape", "orientation"] }, { kind: "ngmodule", type: VisGroupedBarModule }, { kind: "component", type: i1.VisGroupedBarComponent, selector: "vis-grouped-bar", inputs: ["duration", "events", "attributes", "x", "y", "id", "color", "xScale", "yScale", "excludeFromDomainCalculation", "groupWidth", "groupMaxWidth", "dataStep", "groupPadding", "barPadding", "roundedCorners", "barMinHeight", "cursor", "orientation", "data"] }, { kind: "ngmodule", type: VisStackedBarModule }, { kind: "component", type: i1.VisStackedBarComponent, selector: "vis-stacked-bar", inputs: ["duration", "events", "attributes", "x", "y", "id", "color", "xScale", "yScale", "excludeFromDomainCalculation", "barWidth", "barMaxWidth", "dataStep", "barPadding", "roundedCorners", "cursor", "barMinHeight1Px", "barMinHeightZeroValue", "orientation", "data"] }, { kind: "component", type: TooltipComponent, selector: "ngx-tooltip", inputs: ["data", "categories", "titleFormatter", "yFormatter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-bar-chart',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        VisXYContainerModule,
+                        VisAxisModule,
+                        VisTooltipModule,
+                        VisBulletLegendModule,
+                        VisGroupedBarModule,
+                        VisStackedBarModule,
+                        TooltipComponent,
+                    ],
+                    template: `
+    <div
+      [style.display]="'flex'"
+      [style.flexDirection]="isLegendTop() ? 'column-reverse' : 'column'"
+      [style.gap]="'var(--vis-legend-spacing)'"
+      (click)="onClick($event)"
+    >
+      <vis-xy-container
+        [data]="data()"
+        [height]="height()"
+        [padding]="padding()"
+      >
+        <vis-tooltip
+          [triggers]="tooltipTriggers"
+        ></vis-tooltip>
+
+        @if (!stacked()) {
+          <vis-grouped-bar
+            [data]="data()"
+            [x]="_x"
+            [y]="yAccessors()"
+            [color]="colorAccessor"
+            [roundedCorners]="radius() ?? 0"
+            [groupPadding]="groupPadding()"
+            [barPadding]="barPadding()"
+            [orientation]="orientation()"
+          ></vis-grouped-bar>
+        } @else {
+          <vis-stacked-bar
+            [data]="data()"
+            [x]="_x"
+            [y]="yAccessors()"
+            [color]="colorAccessor"
+            [roundedCorners]="radius() ?? 0"
+            [barPadding]="barPadding()"
+            [orientation]="orientation()"
+          ></vis-stacked-bar>
+        }
+
+        @if (!hideXAxis()) {
+          <vis-axis
+            type="x"
+            [label]="xLabel()"
+            [tickFormat]="xFormatterFn"
+            [gridLine]="xGridLine()"
+            [domainLine]="!!xDomainLine()"
+            [tickLine]="xTickLine()"
+            [numTicks]="xNumTicks()"
+            [tickValues]="xExplicitTicks()"
+            [minMaxTicksOnly]="minMaxTicksOnly()"
+          ></vis-axis>
+        }
+
+        @if (!hideYAxis()) {
+          <vis-axis
+            type="y"
+            [label]="yLabel()"
+            [tickFormat]="yFormatterFn"
+            [gridLine]="orientation() !== Orientation.Horizontal && yGridLine()"
+            [domainLine]="!!yDomainLine()"
+            [numTicks]="yNumTicks()"
+            [tickLine]="yTickLine()"
+          ></vis-axis>
+        }
+      </vis-xy-container>
+
+      @if (!hideLegend()) {
+        <div
+          [style.display]="'flex'"
+          [style.justifyContent]="legendAlignment()"
+        >
+          <vis-bullet-legend
+            [items]="legendItems()"
+          ></vis-bullet-legend>
+        </div>
+      }
+
+      <div #tooltipWrapper style="display: none">
+        @if (hoverValues()) {
+          <ngx-tooltip
+            [data]="hoverValues()!"
+            [categories]="categories()"
+            [titleFormatter]="tooltipTitleFormatter()"
+            [yFormatter]="orientation() === Orientation.Horizontal ? xFormatter() : yFormatter()"
+          ></ngx-tooltip>
+        }
+      </div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: true }] }], yAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxis", required: true }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], groupPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupPadding", required: false }] }], barPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "barPadding", required: false }] }], xLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabel", required: false }] }], yLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLabel", required: false }] }], xFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "xFormatter", required: false }] }], yFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "yFormatter", required: false }] }], tooltipTitleFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTitleFormatter", required: false }] }], xNumTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "xNumTicks", required: false }] }], xExplicitTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "xExplicitTicks", required: false }] }], minMaxTicksOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMaxTicksOnly", required: false }] }], yNumTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "yNumTicks", required: false }] }], hideXAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideXAxis", required: false }] }], hideYAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideYAxis", required: false }] }], xGridLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "xGridLine", required: false }] }], yGridLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "yGridLine", required: false }] }], xDomainLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "xDomainLine", required: false }] }], yDomainLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "yDomainLine", required: false }] }], xTickLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "xTickLine", required: false }] }], yTickLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "yTickLine", required: false }] }], hideTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTooltip", required: false }] }], hideLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLegend", required: false }] }], legendPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendPosition", required: false }] }], legendStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendStyle", required: false }] }], valueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabel", required: false }] }], xAxisConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisConfig", required: false }] }], yAxisConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisConfig", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], tooltipWrapper: [{ type: i0.ViewChild, args: ['tooltipWrapper', { isSignal: true }] }] } });
+
+class DonutChartComponent {
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    height = input(400, ...(ngDevMode ? [{ debugName: "height" }] : []));
+    categories = input.required(...(ngDevMode ? [{ debugName: "categories" }] : []));
+    type = input(DonutType.Full, ...(ngDevMode ? [{ debugName: "type" }] : []));
+    radius = input(0, ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    arcWidth = input(20, ...(ngDevMode ? [{ debugName: "arcWidth" }] : []));
+    padAngle = input(0, ...(ngDevMode ? [{ debugName: "padAngle" }] : []));
+    hideLegend = input(false, ...(ngDevMode ? [{ debugName: "hideLegend" }] : []));
+    legendPosition = input(LegendPosition.BottomCenter, ...(ngDevMode ? [{ debugName: "legendPosition" }] : []));
+    legendStyle = input(...(ngDevMode ? [undefined, { debugName: "legendStyle" }] : []));
+    tooltipTitleFormatter = input(...(ngDevMode ? [undefined, { debugName: "tooltipTitleFormatter" }] : []));
+    click = output();
+    tooltipWrapper = viewChild('tooltipWrapper', ...(ngDevMode ? [{ debugName: "tooltipWrapper" }] : []));
+    hoverValues = signal(undefined, ...(ngDevMode ? [{ debugName: "hoverValues" }] : []));
+    isLegendTop = computed(() => this.legendPosition().startsWith('top'), ...(ngDevMode ? [{ debugName: "isLegendTop" }] : []));
+    legendAlignment = computed(() => {
+        const pos = this.legendPosition();
+        if (pos.includes('left'))
+            return 'flex-start';
+        if (pos.includes('right'))
+            return 'flex-end';
+        return 'center';
+    }, ...(ngDevMode ? [{ debugName: "legendAlignment" }] : []));
+    categoriesArray = computed(() => Object.values(this.categories()), ...(ngDevMode ? [{ debugName: "categoriesArray" }] : []));
+    legendItems = computed(() => {
+        return this.categoriesArray().map((item) => ({
+            ...item,
+            color: this.normalizeColor(item.color),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "legendItems" }] : []));
+    angleRange = computed(() => {
+        return this.type() === DonutType.Half
+            ? [-1.5707963267948966, 1.5707963267948966]
+            : undefined;
+    }, ...(ngDevMode ? [{ debugName: "angleRange" }] : []));
+    valueAccessor = (d) => d;
+    colorAccessor = (_, i) => {
+        const cat = this.categoriesArray()[i];
+        if (!cat)
+            return undefined;
+        return this.normalizeColor(cat.color);
+    };
+    tooltipTriggers = {
+        [Donut.selectors.segment]: (d) => {
+            this.onCrosshairUpdate(d);
+            return d ? this.tooltipWrapper()?.nativeElement.innerHTML ?? '' : '';
+        },
+    };
+    onCrosshairUpdate(d) {
+        const keyName = Object.values(this.categories())[d?.index]?.name;
+        this.hoverValues.set({
+            label: keyName,
+            [keyName]: d?.data,
+        });
+        this.cdr.detectChanges();
+    }
+    onClick(event) {
+        this.click.emit({ event, values: this.hoverValues() });
+    }
+    normalizeColor(color, fallback = '#ccc') {
+        if (!color)
+            return fallback;
+        return Array.isArray(color) ? color[0] || fallback : color;
+    }
+    cdr = inject(ChangeDetectorRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DonutChartComponent, isStandalone: true, selector: "ngx-donut-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, arcWidth: { classPropertyName: "arcWidth", publicName: "arcWidth", isSignal: true, isRequired: false, transformFunction: null }, padAngle: { classPropertyName: "padAngle", publicName: "padAngle", isSignal: true, isRequired: false, transformFunction: null }, hideLegend: { classPropertyName: "hideLegend", publicName: "hideLegend", isSignal: true, isRequired: false, transformFunction: null }, legendPosition: { classPropertyName: "legendPosition", publicName: "legendPosition", isSignal: true, isRequired: false, transformFunction: null }, legendStyle: { classPropertyName: "legendStyle", publicName: "legendStyle", isSignal: true, isRequired: false, transformFunction: null }, tooltipTitleFormatter: { classPropertyName: "tooltipTitleFormatter", publicName: "tooltipTitleFormatter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "tooltipWrapper", first: true, predicate: ["tooltipWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      [style.display]="'flex'"
+      [style.flexDirection]="isLegendTop() ? 'column-reverse' : 'column'"
+      [style.gap]="'var(--vis-legend-spacing)'"
+      (click)="onClick($event)"
+    >
+      <vis-single-container
+        [data]="data()"
+        [height]="height()"
+        [margin]="{}"
+      >
+        <vis-tooltip
+          [horizontalShift]="20"
+          [verticalShift]="20"
+          [triggers]="tooltipTriggers"
+        ></vis-tooltip>
+
+        <vis-donut
+          [value]="valueAccessor"
+          [cornerRadius]="radius()"
+          [arcWidth]="arcWidth()"
+          [color]="colorAccessor"
+          [angleRange]="angleRange()"
+          [padAngle]="padAngle()"
+        ></vis-donut>
+
+        <div
+          [style.position]="'absolute'"
+          [style.top]="'50%'"
+          [style.left]="'50%'"
+          [style.transform]="'translate(-50%, -50%)'"
+        >
+          <ng-content></ng-content>
+        </div>
+      </vis-single-container>
+
+      @if (!hideLegend()) {
+        <div
+          [style.display]="'flex'"
+          [style.justifyContent]="legendAlignment()"
+        >
+          <vis-bullet-legend
+            [items]="legendItems()"
+          ></vis-bullet-legend>
+        </div>
+      }
+
+      <div #tooltipWrapper style="display: none">
+        @if (hoverValues()) {
+          <ngx-tooltip
+            [data]="hoverValues()!"
+            [categories]="categories()"
+            [titleFormatter]="tooltipTitleFormatter()"
+          ></ngx-tooltip>
+        }
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: VisSingleContainerModule }, { kind: "component", type: i1.VisSingleContainerComponent, selector: "vis-single-container", inputs: ["width", "height", "margin", "duration", "ariaLabel", "svgDefs", "sizing", "data"] }, { kind: "ngmodule", type: VisDonutModule }, { kind: "component", type: i1.VisDonutComponent, selector: "vis-donut", inputs: ["duration", "events", "attributes", "id", "value", "angleRange", "padAngle", "sortFunction", "cornerRadius", "color", "radius", "arcWidth", "centralLabel", "centralSubLabel", "centralSubLabelWrap", "showEmptySegments", "emptySegmentAngle", "showBackground", "backgroundAngleRange", "centralLabelOffsetX", "centralLabelOffsetY", "data"] }, { kind: "ngmodule", type: VisTooltipModule }, { kind: "component", type: i1.VisTooltipComponent, selector: "vis-tooltip", inputs: ["components", "container", "followCursor", "allowHover", "horizontalPlacement", "horizontalShift", "verticalPlacement", "verticalShift", "triggers", "attributes", "className", "hideDelay", "showDelay"] }, { kind: "ngmodule", type: VisBulletLegendModule }, { kind: "component", type: i1.VisBulletLegendComponent, selector: "vis-bullet-legend", inputs: ["items", "labelClassName", "onLegendItemClick", "labelFontSize", "labelMaxWidth", "bulletSize", "bulletSpacing", "bulletShape", "orientation"] }, { kind: "component", type: TooltipComponent, selector: "ngx-tooltip", inputs: ["data", "categories", "titleFormatter", "yFormatter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DonutChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-donut-chart',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        VisSingleContainerModule,
+                        VisDonutModule,
+                        VisTooltipModule,
+                        VisBulletLegendModule,
+                        TooltipComponent,
+                    ],
+                    template: `
+    <div
+      [style.display]="'flex'"
+      [style.flexDirection]="isLegendTop() ? 'column-reverse' : 'column'"
+      [style.gap]="'var(--vis-legend-spacing)'"
+      (click)="onClick($event)"
+    >
+      <vis-single-container
+        [data]="data()"
+        [height]="height()"
+        [margin]="{}"
+      >
+        <vis-tooltip
+          [horizontalShift]="20"
+          [verticalShift]="20"
+          [triggers]="tooltipTriggers"
+        ></vis-tooltip>
+
+        <vis-donut
+          [value]="valueAccessor"
+          [cornerRadius]="radius()"
+          [arcWidth]="arcWidth()"
+          [color]="colorAccessor"
+          [angleRange]="angleRange()"
+          [padAngle]="padAngle()"
+        ></vis-donut>
+
+        <div
+          [style.position]="'absolute'"
+          [style.top]="'50%'"
+          [style.left]="'50%'"
+          [style.transform]="'translate(-50%, -50%)'"
+        >
+          <ng-content></ng-content>
+        </div>
+      </vis-single-container>
+
+      @if (!hideLegend()) {
+        <div
+          [style.display]="'flex'"
+          [style.justifyContent]="legendAlignment()"
+        >
+          <vis-bullet-legend
+            [items]="legendItems()"
+          ></vis-bullet-legend>
+        </div>
+      }
+
+      <div #tooltipWrapper style="display: none">
+        @if (hoverValues()) {
+          <ngx-tooltip
+            [data]="hoverValues()!"
+            [categories]="categories()"
+            [titleFormatter]="tooltipTitleFormatter()"
+          ></ngx-tooltip>
+        }
+      </div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], arcWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "arcWidth", required: false }] }], padAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "padAngle", required: false }] }], hideLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLegend", required: false }] }], legendPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendPosition", required: false }] }], legendStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendStyle", required: false }] }], tooltipTitleFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTitleFormatter", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], tooltipWrapper: [{ type: i0.ViewChild, args: ['tooltipWrapper', { isSignal: true }] }] } });
+
+class BubbleChartComponent {
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    height = input(600, ...(ngDevMode ? [{ debugName: "height" }] : []));
+    padding = input({
+        top: 5,
+        right: 5,
+        bottom: 5,
+        left: 5,
+    }, ...(ngDevMode ? [{ debugName: "padding" }] : []));
+    categories = input({}, ...(ngDevMode ? [{ debugName: "categories" }] : []));
+    categoryKey = input(...(ngDevMode ? [undefined, { debugName: "categoryKey" }] : []));
+    xAccessor = input(...(ngDevMode ? [undefined, { debugName: "xAccessor" }] : []));
+    yAccessor = input(...(ngDevMode ? [undefined, { debugName: "yAccessor" }] : []));
+    sizeAccessor = input(...(ngDevMode ? [undefined, { debugName: "sizeAccessor" }] : []));
+    labelPosition = input(...(ngDevMode ? [undefined, { debugName: "labelPosition" }] : []));
+    sizeRange = input(...(ngDevMode ? [undefined, { debugName: "sizeRange" }] : []));
+    xLabel = input('', ...(ngDevMode ? [{ debugName: "xLabel" }] : []));
+    yLabel = input('', ...(ngDevMode ? [{ debugName: "yLabel" }] : []));
+    xFormatter = input(...(ngDevMode ? [undefined, { debugName: "xFormatter" }] : []));
+    yFormatter = input(...(ngDevMode ? [undefined, { debugName: "yFormatter" }] : []));
+    tooltipTitleFormatter = input(...(ngDevMode ? [undefined, { debugName: "tooltipTitleFormatter" }] : []));
+    xNumTicks = input(...(ngDevMode ? [undefined, { debugName: "xNumTicks" }] : []));
+    yNumTicks = input(...(ngDevMode ? [undefined, { debugName: "yNumTicks" }] : []));
+    xExplicitTicks = input(...(ngDevMode ? [undefined, { debugName: "xExplicitTicks" }] : []));
+    minMaxTicksOnly = input(false, ...(ngDevMode ? [{ debugName: "minMaxTicksOnly" }] : []));
+    hideXAxis = input(false, ...(ngDevMode ? [{ debugName: "hideXAxis" }] : []));
+    hideYAxis = input(false, ...(ngDevMode ? [{ debugName: "hideYAxis" }] : []));
+    xGridLine = input(false, ...(ngDevMode ? [{ debugName: "xGridLine" }] : []));
+    yGridLine = input(true, ...(ngDevMode ? [{ debugName: "yGridLine" }] : []));
+    xDomainLine = input(true, ...(ngDevMode ? [{ debugName: "xDomainLine" }] : []));
+    yDomainLine = input(true, ...(ngDevMode ? [{ debugName: "yDomainLine" }] : []));
+    xTickLine = input(true, ...(ngDevMode ? [{ debugName: "xTickLine" }] : []));
+    yTickLine = input(true, ...(ngDevMode ? [{ debugName: "yTickLine" }] : []));
+    hideTooltip = input(false, ...(ngDevMode ? [{ debugName: "hideTooltip" }] : []));
+    hideLegend = input(false, ...(ngDevMode ? [{ debugName: "hideLegend" }] : []));
+    legendPosition = input(LegendPosition.BottomCenter, ...(ngDevMode ? [{ debugName: "legendPosition" }] : []));
+    legendStyle = input(...(ngDevMode ? [undefined, { debugName: "legendStyle" }] : []));
+    crosshairConfig = input({ color: '#666' }, ...(ngDevMode ? [{ debugName: "crosshairConfig" }] : []));
+    xAxisConfig = input(...(ngDevMode ? [undefined, { debugName: "xAxisConfig" }] : []));
+    yAxisConfig = input(...(ngDevMode ? [undefined, { debugName: "yAxisConfig" }] : []));
+    click = output();
+    tooltipWrapper = viewChild('tooltipWrapper', ...(ngDevMode ? [{ debugName: "tooltipWrapper" }] : []));
+    hoverValues = signal(undefined, ...(ngDevMode ? [{ debugName: "hoverValues" }] : []));
+    Position = Position;
+    isLegendTop = computed(() => this.legendPosition().startsWith('top'), ...(ngDevMode ? [{ debugName: "isLegendTop" }] : []));
+    legendAlignment = computed(() => {
+        const pos = this.legendPosition();
+        if (pos.includes('left'))
+            return 'flex-start';
+        if (pos.includes('right'))
+            return 'flex-end';
+        return 'center';
+    }, ...(ngDevMode ? [{ debugName: "legendAlignment" }] : []));
+    legendItems = computed(() => {
+        const cats = this.categories();
+        return Object.values(cats).map((item) => ({
+            ...item,
+            color: Array.isArray(item.color) ? item.color[0] : item.color,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "legendItems" }] : []));
+    sizeAccessorFn = computed(() => {
+        const accessor = this.sizeAccessor();
+        if (accessor)
+            return accessor;
+        return (d) => (typeof d.comments === 'number' ? d.comments : 1);
+    }, ...(ngDevMode ? [{ debugName: "sizeAccessorFn" }] : []));
+    colorAccessor = (d) => {
+        const cats = this.categories();
+        const catKey = this.categoryKey();
+        if (!cats || !catKey) {
+            return '#cccccc';
+        }
+        const categoryValue = String(d[catKey]);
+        let categoryColor = cats[categoryValue]?.color;
+        // Special case: when only one category is defined, use the categoryKey
+        // directly as the category lookup key (matching Vue behavior)
+        if (Object.keys(cats).length === 1) {
+            categoryColor = cats[catKey]?.color;
+        }
+        if (!categoryColor) {
+            return '#cccccc';
+        }
+        // Ensure we return a string, not an array
+        return Array.isArray(categoryColor) ? categoryColor[0] : categoryColor;
+    };
+    xFormatterFn = (tick, i, ticks) => {
+        const formatter = this.xFormatter();
+        return formatter ? formatter(tick, i, ticks) : String(tick);
+    };
+    yFormatterFn = (tick, i, ticks) => {
+        const formatter = this.yFormatter();
+        return formatter ? formatter(tick, i, ticks) : String(tick);
+    };
+    tooltipTriggers = {
+        [Scatter.selectors.point]: (d) => {
+            this.onCrosshairUpdate(d);
+            return d ? this.tooltipWrapper()?.nativeElement.innerHTML ?? '' : '';
+        },
+    };
+    onCrosshairUpdate(d) {
+        this.hoverValues.set(d);
+        this.cdr.detectChanges();
+    }
+    onClick(event) {
+        this.click.emit({ event, values: this.hoverValues() });
+    }
+    cdr = inject(ChangeDetectorRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BubbleChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BubbleChartComponent, isStandalone: true, selector: "ngx-bubble-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, categoryKey: { classPropertyName: "categoryKey", publicName: "categoryKey", 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 }, sizeAccessor: { classPropertyName: "sizeAccessor", publicName: "sizeAccessor", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, sizeRange: { classPropertyName: "sizeRange", publicName: "sizeRange", isSignal: true, isRequired: false, transformFunction: null }, xLabel: { classPropertyName: "xLabel", publicName: "xLabel", isSignal: true, isRequired: false, transformFunction: null }, yLabel: { classPropertyName: "yLabel", publicName: "yLabel", isSignal: true, isRequired: false, transformFunction: null }, xFormatter: { classPropertyName: "xFormatter", publicName: "xFormatter", isSignal: true, isRequired: false, transformFunction: null }, yFormatter: { classPropertyName: "yFormatter", publicName: "yFormatter", isSignal: true, isRequired: false, transformFunction: null }, tooltipTitleFormatter: { classPropertyName: "tooltipTitleFormatter", publicName: "tooltipTitleFormatter", isSignal: true, isRequired: false, transformFunction: null }, xNumTicks: { classPropertyName: "xNumTicks", publicName: "xNumTicks", isSignal: true, isRequired: false, transformFunction: null }, yNumTicks: { classPropertyName: "yNumTicks", publicName: "yNumTicks", isSignal: true, isRequired: false, transformFunction: null }, xExplicitTicks: { classPropertyName: "xExplicitTicks", publicName: "xExplicitTicks", isSignal: true, isRequired: false, transformFunction: null }, minMaxTicksOnly: { classPropertyName: "minMaxTicksOnly", publicName: "minMaxTicksOnly", isSignal: true, isRequired: false, transformFunction: null }, hideXAxis: { classPropertyName: "hideXAxis", publicName: "hideXAxis", isSignal: true, isRequired: false, transformFunction: null }, hideYAxis: { classPropertyName: "hideYAxis", publicName: "hideYAxis", isSignal: true, isRequired: false, transformFunction: null }, xGridLine: { classPropertyName: "xGridLine", publicName: "xGridLine", isSignal: true, isRequired: false, transformFunction: null }, yGridLine: { classPropertyName: "yGridLine", publicName: "yGridLine", isSignal: true, isRequired: false, transformFunction: null }, xDomainLine: { classPropertyName: "xDomainLine", publicName: "xDomainLine", isSignal: true, isRequired: false, transformFunction: null }, yDomainLine: { classPropertyName: "yDomainLine", publicName: "yDomainLine", isSignal: true, isRequired: false, transformFunction: null }, xTickLine: { classPropertyName: "xTickLine", publicName: "xTickLine", isSignal: true, isRequired: false, transformFunction: null }, yTickLine: { classPropertyName: "yTickLine", publicName: "yTickLine", isSignal: true, isRequired: false, transformFunction: null }, hideTooltip: { classPropertyName: "hideTooltip", publicName: "hideTooltip", isSignal: true, isRequired: false, transformFunction: null }, hideLegend: { classPropertyName: "hideLegend", publicName: "hideLegend", isSignal: true, isRequired: false, transformFunction: null }, legendPosition: { classPropertyName: "legendPosition", publicName: "legendPosition", isSignal: true, isRequired: false, transformFunction: null }, legendStyle: { classPropertyName: "legendStyle", publicName: "legendStyle", isSignal: true, isRequired: false, transformFunction: null }, crosshairConfig: { classPropertyName: "crosshairConfig", publicName: "crosshairConfig", isSignal: true, isRequired: false, transformFunction: null }, xAxisConfig: { classPropertyName: "xAxisConfig", publicName: "xAxisConfig", isSignal: true, isRequired: false, transformFunction: null }, yAxisConfig: { classPropertyName: "yAxisConfig", publicName: "yAxisConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "tooltipWrapper", first: true, predicate: ["tooltipWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      [style.display]="'flex'"
+      [style.flexDirection]="isLegendTop() ? 'column-reverse' : 'column'"
+      [style.gap]="'var(--vis-legend-spacing)'"
+    >
+      <vis-xy-container
+        [data]="data()"
+        [height]="height()"
+        [padding]="padding()"
+        [scaleByDomain]="true"
+        (click)="onClick($event)"
+      >
+        @if (!hideTooltip()) {
+          <vis-tooltip [triggers]="tooltipTriggers"></vis-tooltip>
+        }
+
+        <vis-scatter
+          [x]="xAccessor()"
+          [y]="yAccessor()"
+          [color]="colorAccessor"
+          [size]="sizeAccessorFn()"
+          [labelPosition]="labelPosition() || Position.Bottom"
+          [sizeRange]="sizeRange() || [1, 20]"
+          cursor="pointer"
+        ></vis-scatter>
+
+        @if (!hideXAxis()) {
+          <vis-axis
+            type="x"
+            [label]="xLabel()"
+            [tickFormat]="xFormatterFn"
+            [gridLine]="xGridLine()"
+            [domainLine]="!!xDomainLine()"
+            [tickLine]="xTickLine()"
+            [numTicks]="xNumTicks()"
+            [tickValues]="xExplicitTicks()"
+            [minMaxTicksOnly]="minMaxTicksOnly()"
+          ></vis-axis>
+        }
+
+        @if (!hideYAxis()) {
+          <vis-axis
+            type="y"
+            [label]="yLabel()"
+            [tickFormat]="yFormatterFn"
+            [gridLine]="yGridLine()"
+            [domainLine]="!!yDomainLine()"
+            [tickLine]="yTickLine()"
+            [numTicks]="yNumTicks()"
+          ></vis-axis>
+        }
+      </vis-xy-container>
+
+      @if (!hideLegend()) {
+        <div
+          [style.display]="'flex'"
+          [style.justifyContent]="legendAlignment()"
+        >
+          <vis-bullet-legend
+            [items]="legendItems()"
+          ></vis-bullet-legend>
+        </div>
+      }
+
+      <div #tooltipWrapper style="display: none">
+        @if (hoverValues()) {
+          <ngx-tooltip
+            [data]="hoverValues()!"
+            [categories]="categories() || {}"
+            [titleFormatter]="tooltipTitleFormatter()"
+            [yFormatter]="yFormatter()"
+          ></ngx-tooltip>
+        }
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: VisXYContainerModule }, { kind: "component", type: i1.VisXYContainerComponent, selector: "vis-xy-container", inputs: ["width", "height", "xScale", "xDomain", "xDomainMinConstraint", "xDomainMaxConstraint", "xRange", "yScale", "yDomain", "yDomainMinConstraint", "yDomainMaxConstraint", "yRange", "yDirection", "preventEmptyDomain", "duration", "margin", "padding", "scaleByDomain", "autoMargin", "ariaLabel", "data"] }, { kind: "ngmodule", type: VisScatterModule }, { kind: "component", type: i1.VisScatterComponent, selector: "vis-scatter", inputs: ["duration", "events", "attributes", "x", "y", "id", "color", "xScale", "yScale", "excludeFromDomainCalculation", "size", "sizeScale", "sizeRange", "shape", "label", "labelColor", "labelHideOverlapping", "cursor", "labelTextBrightnessRatio", "labelPosition", "strokeColor", "strokeWidth", "data"] }, { kind: "ngmodule", type: VisAxisModule }, { kind: "component", type: i1.VisAxisComponent, selector: "vis-axis", inputs: ["duration", "events", "attributes", "position", "type", "fullSize", "label", "labelFontSize", "labelMargin", "labelTextFitMode", "labelTextTrimType", "labelColor", "gridLine", "tickLine", "domainLine", "minMaxTicksOnly", "minMaxTicksOnlyShowGridLines", "minMaxTicksOnlyWhenWidthIsLess", "tickFormat", "tickValues", "numTicks", "tickTextFitMode", "tickTextWidth", "tickTextSeparator", "tickTextForceWordBreak", "tickTextTrimType", "tickTextFontSize", "tickTextAlign", "tickTextColor", "tickTextAngle", "tickTextHideOverlapping", "tickPadding", "data"] }, { kind: "ngmodule", type: VisTooltipModule }, { kind: "component", type: i1.VisTooltipComponent, selector: "vis-tooltip", inputs: ["components", "container", "followCursor", "allowHover", "horizontalPlacement", "horizontalShift", "verticalPlacement", "verticalShift", "triggers", "attributes", "className", "hideDelay", "showDelay"] }, { kind: "ngmodule", type: VisBulletLegendModule }, { kind: "component", type: i1.VisBulletLegendComponent, selector: "vis-bullet-legend", inputs: ["items", "labelClassName", "onLegendItemClick", "labelFontSize", "labelMaxWidth", "bulletSize", "bulletSpacing", "bulletShape", "orientation"] }, { kind: "component", type: TooltipComponent, selector: "ngx-tooltip", inputs: ["data", "categories", "titleFormatter", "yFormatter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BubbleChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-bubble-chart',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        VisXYContainerModule,
+                        VisScatterModule,
+                        VisAxisModule,
+                        VisTooltipModule,
+                        VisBulletLegendModule,
+                        TooltipComponent,
+                    ],
+                    template: `
+    <div
+      [style.display]="'flex'"
+      [style.flexDirection]="isLegendTop() ? 'column-reverse' : 'column'"
+      [style.gap]="'var(--vis-legend-spacing)'"
+    >
+      <vis-xy-container
+        [data]="data()"
+        [height]="height()"
+        [padding]="padding()"
+        [scaleByDomain]="true"
+        (click)="onClick($event)"
+      >
+        @if (!hideTooltip()) {
+          <vis-tooltip [triggers]="tooltipTriggers"></vis-tooltip>
+        }
+
+        <vis-scatter
+          [x]="xAccessor()"
+          [y]="yAccessor()"
+          [color]="colorAccessor"
+          [size]="sizeAccessorFn()"
+          [labelPosition]="labelPosition() || Position.Bottom"
+          [sizeRange]="sizeRange() || [1, 20]"
+          cursor="pointer"
+        ></vis-scatter>
+
+        @if (!hideXAxis()) {
+          <vis-axis
+            type="x"
+            [label]="xLabel()"
+            [tickFormat]="xFormatterFn"
+            [gridLine]="xGridLine()"
+            [domainLine]="!!xDomainLine()"
+            [tickLine]="xTickLine()"
+            [numTicks]="xNumTicks()"
+            [tickValues]="xExplicitTicks()"
+            [minMaxTicksOnly]="minMaxTicksOnly()"
+          ></vis-axis>
+        }
+
+        @if (!hideYAxis()) {
+          <vis-axis
+            type="y"
+            [label]="yLabel()"
+            [tickFormat]="yFormatterFn"
+            [gridLine]="yGridLine()"
+            [domainLine]="!!yDomainLine()"
+            [tickLine]="yTickLine()"
+            [numTicks]="yNumTicks()"
+          ></vis-axis>
+        }
+      </vis-xy-container>
+
+      @if (!hideLegend()) {
+        <div
+          [style.display]="'flex'"
+          [style.justifyContent]="legendAlignment()"
+        >
+          <vis-bullet-legend
+            [items]="legendItems()"
+          ></vis-bullet-legend>
+        </div>
+      }
+
+      <div #tooltipWrapper style="display: none">
+        @if (hoverValues()) {
+          <ngx-tooltip
+            [data]="hoverValues()!"
+            [categories]="categories() || {}"
+            [titleFormatter]="tooltipTitleFormatter()"
+            [yFormatter]="yFormatter()"
+          ></ngx-tooltip>
+        }
+      </div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], categoryKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryKey", required: false }] }], xAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAccessor", required: false }] }], yAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAccessor", required: false }] }], sizeAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeAccessor", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], sizeRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeRange", required: false }] }], xLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabel", required: false }] }], yLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLabel", required: false }] }], xFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "xFormatter", required: false }] }], yFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "yFormatter", required: false }] }], tooltipTitleFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTitleFormatter", required: false }] }], xNumTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "xNumTicks", required: false }] }], yNumTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "yNumTicks", required: false }] }], xExplicitTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "xExplicitTicks", required: false }] }], minMaxTicksOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMaxTicksOnly", required: false }] }], hideXAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideXAxis", required: false }] }], hideYAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideYAxis", required: false }] }], xGridLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "xGridLine", required: false }] }], yGridLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "yGridLine", required: false }] }], xDomainLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "xDomainLine", required: false }] }], yDomainLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "yDomainLine", required: false }] }], xTickLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "xTickLine", required: false }] }], yTickLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "yTickLine", required: false }] }], hideTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTooltip", required: false }] }], hideLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLegend", required: false }] }], legendPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendPosition", required: false }] }], legendStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendStyle", required: false }] }], crosshairConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "crosshairConfig", required: false }] }], xAxisConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisConfig", required: false }] }], yAxisConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisConfig", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], tooltipWrapper: [{ type: i0.ViewChild, args: ['tooltipWrapper', { isSignal: true }] }] } });
+
+// Cached date formatter instance for better performance
+const cachedDateFormatter = new Intl.DateTimeFormat();
+const dateFormatter = (date) => cachedDateFormatter.format(typeof date === 'number' ? date : date.getTime());
+class GanttChartComponent {
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : []));
+    categories = input.required(...(ngDevMode ? [{ debugName: "categories" }] : []));
+    x = input.required(...(ngDevMode ? [{ debugName: "x" }] : []));
+    length = input.required(...(ngDevMode ? [{ debugName: "length" }] : []));
+    type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
+    labelWidth = input(220, ...(ngDevMode ? [{ debugName: "labelWidth" }] : []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    showLabels = input(true, ...(ngDevMode ? [{ debugName: "showLabels" }] : []));
+    hideTooltip = input(false, ...(ngDevMode ? [{ debugName: "hideTooltip" }] : []));
+    lineWidth = input(12, ...(ngDevMode ? [{ debugName: "lineWidth" }] : []));
+    rowHeight = input(24, ...(ngDevMode ? [{ debugName: "rowHeight" }] : []));
+    legendPosition = input(LegendPosition.TopRight, ...(ngDevMode ? [{ debugName: "legendPosition" }] : []));
+    legendStyle = input(...(ngDevMode ? [undefined, { debugName: "legendStyle" }] : []));
+    hideLegend = input(false, ...(ngDevMode ? [{ debugName: "hideLegend" }] : []));
+    xNumTicks = input(...(ngDevMode ? [undefined, { debugName: "xNumTicks" }] : []));
+    xTickLine = input(...(ngDevMode ? [undefined, { debugName: "xTickLine" }] : []));
+    xTickFormat = input(...(ngDevMode ? [undefined, { debugName: "xTickFormat" }] : []));
+    xGridLine = input(...(ngDevMode ? [undefined, { debugName: "xGridLine" }] : []));
+    xDomainLine = input(...(ngDevMode ? [undefined, { debugName: "xDomainLine" }] : []));
+    tooltipTitleFormatter = input(...(ngDevMode ? [undefined, { debugName: "tooltipTitleFormatter" }] : []));
+    clickEvent = output();
+    scrollEvent = output();
+    labelHover = output();
+    tooltipWrapper = viewChild('tooltipWrapper', ...(ngDevMode ? [{ debugName: "tooltipWrapper" }] : []));
+    slotValue = signal(undefined, ...(ngDevMode ? [{ debugName: "slotValue" }] : []));
+    isLegendTop = computed(() => this.legendPosition().startsWith('top'), ...(ngDevMode ? [{ debugName: "isLegendTop" }] : []));
+    legendAlignment = computed(() => {
+        const pos = this.legendPosition();
+        if (pos.includes('left'))
+            return 'flex-start';
+        if (pos.includes('right'))
+            return 'flex-end';
+        return 'center';
+    }, ...(ngDevMode ? [{ debugName: "legendAlignment" }] : []));
+    legendItems = computed(() => {
+        return Object.values(this.categories()).map((item) => ({
+            ...item,
+            color: Array.isArray(item.color) ? item.color[0] : item.color,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "legendItems" }] : []));
+    colors = computed(() => {
+        const cats = this.categories();
+        const defaultColors = Object.values(cats).map((_, index) => `var(--vis-color${index})`);
+        return Object.values(cats).map((c, i) => {
+            const color = c.color ?? defaultColors[i];
+            return Array.isArray(color) ? color[0] : color;
+        });
+    }, ...(ngDevMode ? [{ debugName: "colors" }] : []));
+    tickFormatFn = (tick, i, ticks) => {
+        const formatter = this.xTickFormat();
+        return formatter ? formatter(tick, i, ticks) : dateFormatter(tick);
+    };
+    tooltipTriggers = {
+        [Timeline.selectors.label]: (d) => {
+            this.generateLabelTooltip(d);
+            return d ? this.tooltipWrapper()?.nativeElement.innerHTML ?? '' : '';
+        },
+    };
+    generateLabelTooltip(d) {
+        this.slotValue.set(d);
+        this.labelHover.emit(d);
+        this.cdr.detectChanges();
+    }
+    onScroll(event) {
+        this.scrollEvent.emit(event.deltaY);
+    }
+    cdr = inject(ChangeDetectorRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GanttChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GanttChartComponent, isStandalone: true, selector: "ngx-gantt-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, hideTooltip: { classPropertyName: "hideTooltip", publicName: "hideTooltip", isSignal: true, isRequired: false, transformFunction: null }, lineWidth: { classPropertyName: "lineWidth", publicName: "lineWidth", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, legendPosition: { classPropertyName: "legendPosition", publicName: "legendPosition", isSignal: true, isRequired: false, transformFunction: null }, legendStyle: { classPropertyName: "legendStyle", publicName: "legendStyle", isSignal: true, isRequired: false, transformFunction: null }, hideLegend: { classPropertyName: "hideLegend", publicName: "hideLegend", isSignal: true, isRequired: false, transformFunction: null }, xNumTicks: { classPropertyName: "xNumTicks", publicName: "xNumTicks", isSignal: true, isRequired: false, transformFunction: null }, xTickLine: { classPropertyName: "xTickLine", publicName: "xTickLine", isSignal: true, isRequired: false, transformFunction: null }, xTickFormat: { classPropertyName: "xTickFormat", publicName: "xTickFormat", isSignal: true, isRequired: false, transformFunction: null }, xGridLine: { classPropertyName: "xGridLine", publicName: "xGridLine", isSignal: true, isRequired: false, transformFunction: null }, xDomainLine: { classPropertyName: "xDomainLine", publicName: "xDomainLine", isSignal: true, isRequired: false, transformFunction: null }, tooltipTitleFormatter: { classPropertyName: "tooltipTitleFormatter", publicName: "tooltipTitleFormatter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEvent: "clickEvent", scrollEvent: "scrollEvent", labelHover: "labelHover" }, viewQueries: [{ propertyName: "tooltipWrapper", first: true, predicate: ["tooltipWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      [style.display]="'flex'"
+      [style.flexDirection]="isLegendTop() ? 'column-reverse' : 'column'"
+      [style.gap]="'var(--vis-legend-spacing)'"
+    >
+      <vis-xy-container
+        [data]="data()"
+        [height]="height()"
+        (wheel)="onScroll($event)"
+      >
+        <vis-timeline
+          [x]="x()"
+          [length]="length()"
+          [lineWidth]="lineWidth()"
+          [rowHeight]="rowHeight()"
+          [type]="type()"
+          [color]="colors()"
+          [labelWidth]="labelWidth()"
+          [showLabels]="showLabels()"
+        ></vis-timeline>
+
+        <vis-tooltip
+          [triggers]="tooltipTriggers"
+        ></vis-tooltip>
+
+        <vis-axis
+          type="x"
+          [tickFormat]="tickFormatFn"
+          [numTicks]="xNumTicks()"
+          [tickLine]="xTickLine()"
+          [gridLine]="xGridLine()"
+          [domainLine]="xDomainLine()"
+        ></vis-axis>
+      </vis-xy-container>
+
+      @if (!hideLegend()) {
+        <div
+          [style.display]="'flex'"
+          [style.justifyContent]="legendAlignment()"
+        >
+          <vis-bullet-legend
+            [items]="legendItems()"
+          ></vis-bullet-legend>
+        </div>
+      }
+
+      <div #tooltipWrapper style="display: none">
+        @if (slotValue()) {
+          <ngx-tooltip
+            [data]="slotValue()!"
+            [categories]="categories()"
+            [titleFormatter]="tooltipTitleFormatter()"
+          ></ngx-tooltip>
+        }
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: VisXYContainerModule }, { kind: "component", type: i1.VisXYContainerComponent, selector: "vis-xy-container", inputs: ["width", "height", "xScale", "xDomain", "xDomainMinConstraint", "xDomainMaxConstraint", "xRange", "yScale", "yDomain", "yDomainMinConstraint", "yDomainMaxConstraint", "yRange", "yDirection", "preventEmptyDomain", "duration", "margin", "padding", "scaleByDomain", "autoMargin", "ariaLabel", "data"] }, { kind: "ngmodule", type: VisTimelineModule }, { kind: "component", type: i1.VisTimelineComponent, selector: "vis-timeline", inputs: ["duration", "events", "attributes", "x", "id", "color", "xScale", "yScale", "excludeFromDomainCalculation", "type", "length", "cursor", "lineRow", "lineDuration", "lineWidth", "lineCap", "lineStartIcon", "lineStartIconColor", "lineStartIconSize", "lineStartIconArrangement", "lineEndIcon", "lineEndIconColor", "lineEndIconSize", "lineEndIconArrangement", "lineCursor", "showEmptySegments", "showEmptySegmentsCorrectPosition", "rowHeight", "alternatingRowColors", "showLabels", "labelWidth", "maxLabelWidth", "showRowLabels", "rowLabelStyle", "rowLabelFormatter", "rowIcon", "rowLabelWidth", "rowMaxLabelWidth", "rowLabelTextAlign", "arrows", "animationLineEnterPosition", "animationLineExitPosition", "onScroll", "data"] }, { kind: "ngmodule", type: VisAxisModule }, { kind: "component", type: i1.VisAxisComponent, selector: "vis-axis", inputs: ["duration", "events", "attributes", "position", "type", "fullSize", "label", "labelFontSize", "labelMargin", "labelTextFitMode", "labelTextTrimType", "labelColor", "gridLine", "tickLine", "domainLine", "minMaxTicksOnly", "minMaxTicksOnlyShowGridLines", "minMaxTicksOnlyWhenWidthIsLess", "tickFormat", "tickValues", "numTicks", "tickTextFitMode", "tickTextWidth", "tickTextSeparator", "tickTextForceWordBreak", "tickTextTrimType", "tickTextFontSize", "tickTextAlign", "tickTextColor", "tickTextAngle", "tickTextHideOverlapping", "tickPadding", "data"] }, { kind: "ngmodule", type: VisTooltipModule }, { kind: "component", type: i1.VisTooltipComponent, selector: "vis-tooltip", inputs: ["components", "container", "followCursor", "allowHover", "horizontalPlacement", "horizontalShift", "verticalPlacement", "verticalShift", "triggers", "attributes", "className", "hideDelay", "showDelay"] }, { kind: "ngmodule", type: VisBulletLegendModule }, { kind: "component", type: i1.VisBulletLegendComponent, selector: "vis-bullet-legend", inputs: ["items", "labelClassName", "onLegendItemClick", "labelFontSize", "labelMaxWidth", "bulletSize", "bulletSpacing", "bulletShape", "orientation"] }, { kind: "component", type: TooltipComponent, selector: "ngx-tooltip", inputs: ["data", "categories", "titleFormatter", "yFormatter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GanttChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-gantt-chart',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        VisXYContainerModule,
+                        VisTimelineModule,
+                        VisAxisModule,
+                        VisTooltipModule,
+                        VisBulletLegendModule,
+                        TooltipComponent,
+                    ],
+                    template: `
+    <div
+      [style.display]="'flex'"
+      [style.flexDirection]="isLegendTop() ? 'column-reverse' : 'column'"
+      [style.gap]="'var(--vis-legend-spacing)'"
+    >
+      <vis-xy-container
+        [data]="data()"
+        [height]="height()"
+        (wheel)="onScroll($event)"
+      >
+        <vis-timeline
+          [x]="x()"
+          [length]="length()"
+          [lineWidth]="lineWidth()"
+          [rowHeight]="rowHeight()"
+          [type]="type()"
+          [color]="colors()"
+          [labelWidth]="labelWidth()"
+          [showLabels]="showLabels()"
+        ></vis-timeline>
+
+        <vis-tooltip
+          [triggers]="tooltipTriggers"
+        ></vis-tooltip>
+
+        <vis-axis
+          type="x"
+          [tickFormat]="tickFormatFn"
+          [numTicks]="xNumTicks()"
+          [tickLine]="xTickLine()"
+          [gridLine]="xGridLine()"
+          [domainLine]="xDomainLine()"
+        ></vis-axis>
+      </vis-xy-container>
+
+      @if (!hideLegend()) {
+        <div
+          [style.display]="'flex'"
+          [style.justifyContent]="legendAlignment()"
+        >
+          <vis-bullet-legend
+            [items]="legendItems()"
+          ></vis-bullet-legend>
+        </div>
+      }
+
+      <div #tooltipWrapper style="display: none">
+        @if (slotValue()) {
+          <ngx-tooltip
+            [data]="slotValue()!"
+            [categories]="categories()"
+            [titleFormatter]="tooltipTitleFormatter()"
+          ></ngx-tooltip>
+        }
+      </div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: true }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: true }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], hideTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTooltip", required: false }] }], lineWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineWidth", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], legendPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendPosition", required: false }] }], legendStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendStyle", required: false }] }], hideLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLegend", required: false }] }], xNumTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "xNumTicks", required: false }] }], xTickLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "xTickLine", required: false }] }], xTickFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "xTickFormat", required: false }] }], xGridLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "xGridLine", required: false }] }], xDomainLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "xDomainLine", required: false }] }], tooltipTitleFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTitleFormatter", required: false }] }], clickEvent: [{ type: i0.Output, args: ["clickEvent"] }], scrollEvent: [{ type: i0.Output, args: ["scrollEvent"] }], labelHover: [{ type: i0.Output, args: ["labelHover"] }], tooltipWrapper: [{ type: i0.ViewChild, args: ['tooltipWrapper', { isSignal: true }] }] } });
+
+/*
+ * Public API Surface of lib
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AreaChartComponent, BarChartComponent, BubbleChartComponent, CurveType, DonutChartComponent, DonutType, GanttChartComponent, LegendPosition, LineChartComponent, Orientation, TooltipComponent };
+//# sourceMappingURL=angular-chrts.mjs.map