@life-cockpit/angular-ui-kit 2.0.1 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, PLATFORM_ID, signal, computed, Injectable, input, effect, ChangeDetectionStrategy, Component, model, contentChildren, untracked, output, ViewChild, ViewEncapsulation, HostListener, forwardRef, InjectionToken, ElementRef, viewChild, ChangeDetectorRef, EventEmitter, Output, Input, ViewChildren, HostBinding, ViewContainerRef, Renderer2, Directive, TemplateRef, ContentChildren, ContentChild, SecurityContext, NgZone, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
|
|
2
|
+
import { inject, PLATFORM_ID, signal, computed, Injectable, input, effect, ChangeDetectionStrategy, Component, model, contentChildren, untracked, output, ViewChild, ViewEncapsulation, HostListener, forwardRef, InjectionToken, ElementRef, viewChild, ChangeDetectorRef, EventEmitter, Output, Input, ViewChildren, HostBinding, ViewContainerRef, Renderer2, Directive, TemplateRef, ContentChildren, ContentChild, DestroyRef, afterNextRender, SecurityContext, NgZone, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
|
|
3
3
|
import { isPlatformBrowser, NgClass, CommonModule, NgTemplateOutlet, NgStyle, SlicePipe } from '@angular/common';
|
|
4
4
|
import * as i1$4 from '@angular/platform-browser';
|
|
5
5
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
@@ -8766,6 +8766,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
8766
8766
|
* ```
|
|
8767
8767
|
*/
|
|
8768
8768
|
class SparklineComponent {
|
|
8769
|
+
_el = inject(ElementRef);
|
|
8770
|
+
_destroyRef = inject(DestroyRef);
|
|
8771
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
8772
|
+
constructor() {
|
|
8773
|
+
afterNextRender(() => {
|
|
8774
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
8775
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
8776
|
+
});
|
|
8777
|
+
obs.observe(this._el.nativeElement);
|
|
8778
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
8779
|
+
});
|
|
8780
|
+
}
|
|
8769
8781
|
/** Data points to plot. */
|
|
8770
8782
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
8771
8783
|
/** Stroke color theme. */
|
|
@@ -8808,7 +8820,7 @@ class SparklineComponent {
|
|
|
8808
8820
|
const d = this.data();
|
|
8809
8821
|
if (!d || d.length < 2)
|
|
8810
8822
|
return '';
|
|
8811
|
-
const w = this.
|
|
8823
|
+
const w = this.effectiveWidth();
|
|
8812
8824
|
const h = this.height();
|
|
8813
8825
|
const sw = this.strokeWidth();
|
|
8814
8826
|
const padding = sw;
|
|
@@ -8846,7 +8858,7 @@ class SparklineComponent {
|
|
|
8846
8858
|
if (!line)
|
|
8847
8859
|
return '';
|
|
8848
8860
|
const d = this.data();
|
|
8849
|
-
const w = this.
|
|
8861
|
+
const w = this.effectiveWidth();
|
|
8850
8862
|
const h = this.height();
|
|
8851
8863
|
const sw = this.strokeWidth();
|
|
8852
8864
|
const padding = sw;
|
|
@@ -8862,7 +8874,7 @@ class SparklineComponent {
|
|
|
8862
8874
|
const d = this.data();
|
|
8863
8875
|
if (!d || d.length < 2)
|
|
8864
8876
|
return null;
|
|
8865
|
-
const w = this.
|
|
8877
|
+
const w = this.effectiveWidth();
|
|
8866
8878
|
const h = this.height();
|
|
8867
8879
|
const sw = this.strokeWidth();
|
|
8868
8880
|
const padding = sw;
|
|
@@ -8878,14 +8890,15 @@ class SparklineComponent {
|
|
|
8878
8890
|
r: sw + 1,
|
|
8879
8891
|
};
|
|
8880
8892
|
}, ...(ngDevMode ? [{ debugName: "endDot" }] : /* istanbul ignore next */ []));
|
|
8881
|
-
|
|
8893
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
8894
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
8882
8895
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SparklineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8883
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: SparklineComponent, isStandalone: true, selector: "lc-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, showEndDot: { classPropertyName: "showEndDot", publicName: "showEndDot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n
|
|
8896
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: SparklineComponent, isStandalone: true, selector: "lc-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, showEndDot: { classPropertyName: "showEndDot", publicName: "showEndDot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n class=\"lc-sparkline\"\n role=\"img\"\n aria-label=\"Sparkline chart\"\n>\n @if (areaD()) {\n <path\n [attr.d]=\"areaD()\"\n [attr.fill]=\"fillColorVar()\"\n class=\"lc-sparkline__area\"\n />\n }\n\n @if (pathD()) {\n <path\n [attr.d]=\"pathD()\"\n [attr.stroke]=\"colorVar()\"\n [attr.stroke-width]=\"strokeWidth()\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"lc-sparkline__line\"\n />\n }\n\n @if (endDot(); as dot) {\n <circle\n [attr.cx]=\"dot.cx\"\n [attr.cy]=\"dot.cy\"\n [attr.r]=\"dot.r\"\n [attr.fill]=\"colorVar()\"\n class=\"lc-sparkline__dot\"\n />\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-sparkline{overflow:visible}.lc-sparkline__area{opacity:.2}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8884
8897
|
}
|
|
8885
8898
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SparklineComponent, decorators: [{
|
|
8886
8899
|
type: Component,
|
|
8887
|
-
args: [{ selector: 'lc-sparkline', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n
|
|
8888
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], showEndDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEndDot", required: false }] }] } });
|
|
8900
|
+
args: [{ selector: 'lc-sparkline', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n class=\"lc-sparkline\"\n role=\"img\"\n aria-label=\"Sparkline chart\"\n>\n @if (areaD()) {\n <path\n [attr.d]=\"areaD()\"\n [attr.fill]=\"fillColorVar()\"\n class=\"lc-sparkline__area\"\n />\n }\n\n @if (pathD()) {\n <path\n [attr.d]=\"pathD()\"\n [attr.stroke]=\"colorVar()\"\n [attr.stroke-width]=\"strokeWidth()\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"lc-sparkline__line\"\n />\n }\n\n @if (endDot(); as dot) {\n <circle\n [attr.cx]=\"dot.cx\"\n [attr.cy]=\"dot.cy\"\n [attr.r]=\"dot.r\"\n [attr.fill]=\"colorVar()\"\n class=\"lc-sparkline__dot\"\n />\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-sparkline{overflow:visible}.lc-sparkline__area{opacity:.2}\n"] }]
|
|
8901
|
+
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], showEndDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEndDot", required: false }] }] } });
|
|
8889
8902
|
|
|
8890
8903
|
/**
|
|
8891
8904
|
* Stat trend component for displaying KPI values with change indicators.
|
|
@@ -9070,11 +9083,11 @@ class DonutChartComponent {
|
|
|
9070
9083
|
percentage: arc.percentage,
|
|
9071
9084
|
})), ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
|
|
9072
9085
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9073
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DonutChartComponent, isStandalone: true, selector: "lc-donut-chart", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, showCenter: { classPropertyName: "showCenter", publicName: "showCenter", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-donut-chart\">\n <svg\n [attr.width]=\"svgSize()\"\n [attr.height]=\"svgSize()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Donut chart\"\n class=\"lc-donut-chart__svg\"\n >\n @for (arc of arcs(); track arc.label) {\n <path\n [attr.d]=\"arc.d\"\n [attr.fill]=\"arc.color\"\n class=\"lc-donut-chart__segment\"\n />\n }\n\n @if (showCenter() && (centerValue() || centerLabel())) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"centerLabel() ? center() - 4 : center()\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-value\"\n >\n {{ centerValue() }}\n </text>\n @if (centerLabel()) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"center() + 14\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-label\"\n >\n {{ centerLabel() }}\n </text>\n }\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-donut-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-donut-chart__legend-item\">\n <span class=\"lc-donut-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-donut-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-donut-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-donut-chart{display:
|
|
9086
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DonutChartComponent, isStandalone: true, selector: "lc-donut-chart", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, showCenter: { classPropertyName: "showCenter", publicName: "showCenter", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-donut-chart\">\n <svg\n [attr.width]=\"svgSize()\"\n [attr.height]=\"svgSize()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Donut chart\"\n class=\"lc-donut-chart__svg\"\n >\n @for (arc of arcs(); track arc.label) {\n <path\n [attr.d]=\"arc.d\"\n [attr.fill]=\"arc.color\"\n class=\"lc-donut-chart__segment\"\n />\n }\n\n @if (showCenter() && (centerValue() || centerLabel())) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"centerLabel() ? center() - 4 : center()\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-value\"\n >\n {{ centerValue() }}\n </text>\n @if (centerLabel()) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"center() + 14\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-label\"\n >\n {{ centerLabel() }}\n </text>\n }\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-donut-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-donut-chart__legend-item\">\n <span class=\"lc-donut-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-donut-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-donut-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-donut-chart{display:flex;flex-direction:column;align-items:center;gap:.75rem}.lc-donut-chart__svg{overflow:visible}.lc-donut-chart__segment{transition:opacity .15s ease}.lc-donut-chart__segment:hover{opacity:.8}.lc-donut-chart__center-value{font-size:1.25rem;font-weight:700;fill:var(--color-text-primary)}.lc-donut-chart__center-label{font-size:.6875rem;fill:var(--color-text-tertiary);font-weight:500}.lc-donut-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-donut-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-donut-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-donut-chart__legend-label{color:var(--color-text-secondary)}.lc-donut-chart__legend-pct{color:var(--color-text-tertiary);font-weight:600}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9074
9087
|
}
|
|
9075
9088
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DonutChartComponent, decorators: [{
|
|
9076
9089
|
type: Component,
|
|
9077
|
-
args: [{ selector: 'lc-donut-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-donut-chart\">\n <svg\n [attr.width]=\"svgSize()\"\n [attr.height]=\"svgSize()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Donut chart\"\n class=\"lc-donut-chart__svg\"\n >\n @for (arc of arcs(); track arc.label) {\n <path\n [attr.d]=\"arc.d\"\n [attr.fill]=\"arc.color\"\n class=\"lc-donut-chart__segment\"\n />\n }\n\n @if (showCenter() && (centerValue() || centerLabel())) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"centerLabel() ? center() - 4 : center()\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-value\"\n >\n {{ centerValue() }}\n </text>\n @if (centerLabel()) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"center() + 14\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-label\"\n >\n {{ centerLabel() }}\n </text>\n }\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-donut-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-donut-chart__legend-item\">\n <span class=\"lc-donut-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-donut-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-donut-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-donut-chart{display:
|
|
9090
|
+
args: [{ selector: 'lc-donut-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-donut-chart\">\n <svg\n [attr.width]=\"svgSize()\"\n [attr.height]=\"svgSize()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Donut chart\"\n class=\"lc-donut-chart__svg\"\n >\n @for (arc of arcs(); track arc.label) {\n <path\n [attr.d]=\"arc.d\"\n [attr.fill]=\"arc.color\"\n class=\"lc-donut-chart__segment\"\n />\n }\n\n @if (showCenter() && (centerValue() || centerLabel())) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"centerLabel() ? center() - 4 : center()\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-value\"\n >\n {{ centerValue() }}\n </text>\n @if (centerLabel()) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"center() + 14\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-label\"\n >\n {{ centerLabel() }}\n </text>\n }\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-donut-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-donut-chart__legend-item\">\n <span class=\"lc-donut-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-donut-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-donut-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-donut-chart{display:flex;flex-direction:column;align-items:center;gap:.75rem}.lc-donut-chart__svg{overflow:visible}.lc-donut-chart__segment{transition:opacity .15s ease}.lc-donut-chart__segment:hover{opacity:.8}.lc-donut-chart__center-value{font-size:1.25rem;font-weight:700;fill:var(--color-text-primary)}.lc-donut-chart__center-label{font-size:.6875rem;fill:var(--color-text-tertiary);font-weight:500}.lc-donut-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-donut-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-donut-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-donut-chart__legend-label{color:var(--color-text-secondary)}.lc-donut-chart__legend-pct{color:var(--color-text-tertiary);font-weight:600}\n"] }]
|
|
9078
9091
|
}], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], showCenter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCenter", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], centerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerValue", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }] } });
|
|
9079
9092
|
|
|
9080
9093
|
const DEFAULT_COLORS$6 = [
|
|
@@ -9102,6 +9115,18 @@ const DEFAULT_COLORS$6 = [
|
|
|
9102
9115
|
* ```
|
|
9103
9116
|
*/
|
|
9104
9117
|
class BarChartComponent {
|
|
9118
|
+
_el = inject(ElementRef);
|
|
9119
|
+
_destroyRef = inject(DestroyRef);
|
|
9120
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
9121
|
+
constructor() {
|
|
9122
|
+
afterNextRender(() => {
|
|
9123
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
9124
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
9125
|
+
});
|
|
9126
|
+
obs.observe(this._el.nativeElement);
|
|
9127
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
9128
|
+
});
|
|
9129
|
+
}
|
|
9105
9130
|
/** Data items. */
|
|
9106
9131
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
9107
9132
|
/** Chart width in pixels. */
|
|
@@ -9125,7 +9150,8 @@ class BarChartComponent {
|
|
|
9125
9150
|
PADDING_RIGHT = 10;
|
|
9126
9151
|
PADDING_TOP = 10;
|
|
9127
9152
|
PADDING_BOTTOM = 30;
|
|
9128
|
-
|
|
9153
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
9154
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
9129
9155
|
maxValue = computed(() => {
|
|
9130
9156
|
const d = this.data();
|
|
9131
9157
|
if (!d || d.length === 0)
|
|
@@ -9154,7 +9180,7 @@ class BarChartComponent {
|
|
|
9154
9180
|
if (!d || d.length === 0)
|
|
9155
9181
|
return [];
|
|
9156
9182
|
const isVertical = this.orientation() === 'vertical';
|
|
9157
|
-
const w = this.
|
|
9183
|
+
const w = this.effectiveWidth();
|
|
9158
9184
|
const h = this.height();
|
|
9159
9185
|
const pl = this.PADDING_LEFT;
|
|
9160
9186
|
const pr = this.PADDING_RIGHT;
|
|
@@ -9210,7 +9236,7 @@ class BarChartComponent {
|
|
|
9210
9236
|
}, ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
|
|
9211
9237
|
isVertical = computed(() => this.orientation() === 'vertical', ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
|
|
9212
9238
|
axisLine = computed(() => {
|
|
9213
|
-
const w = this.
|
|
9239
|
+
const w = this.effectiveWidth();
|
|
9214
9240
|
const h = this.height();
|
|
9215
9241
|
const pl = this.PADDING_LEFT;
|
|
9216
9242
|
const pt = this.PADDING_TOP;
|
|
@@ -9228,12 +9254,12 @@ class BarChartComponent {
|
|
|
9228
9254
|
};
|
|
9229
9255
|
}, ...(ngDevMode ? [{ debugName: "axisLine" }] : /* istanbul ignore next */ []));
|
|
9230
9256
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9231
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: BarChartComponent, isStandalone: true, selector: "lc-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n
|
|
9257
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: BarChartComponent, isStandalone: true, selector: "lc-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Bar chart\"\n class=\"lc-bar-chart\"\n>\n <!-- Grid lines -->\n @if (showGrid() && isVertical()) {\n @for (line of gridLines(); track line.y) {\n <line\n [attr.x1]=\"axisLine().bx1\"\n [attr.y1]=\"line.y\"\n [attr.x2]=\"axisLine().bx2\"\n [attr.y2]=\"line.y\"\n class=\"lc-bar-chart__grid-line\"\n />\n <text\n [attr.x]=\"axisLine().x1 - 6\"\n [attr.y]=\"line.y\"\n text-anchor=\"end\"\n dominant-baseline=\"central\"\n class=\"lc-bar-chart__grid-label\"\n >\n {{ line.label }}\n </text>\n }\n }\n\n <!-- Axes -->\n <line\n [attr.x1]=\"axisLine().x1\"\n [attr.y1]=\"axisLine().y1\"\n [attr.x2]=\"axisLine().x2\"\n [attr.y2]=\"axisLine().y2\"\n class=\"lc-bar-chart__axis\"\n />\n <line\n [attr.x1]=\"axisLine().bx1\"\n [attr.y1]=\"axisLine().by1\"\n [attr.x2]=\"axisLine().bx2\"\n [attr.y2]=\"axisLine().by2\"\n class=\"lc-bar-chart__axis\"\n />\n\n <!-- Bars -->\n @for (bar of bars(); track bar.label) {\n <rect\n [attr.x]=\"bar.x\"\n [attr.y]=\"bar.y\"\n [attr.width]=\"bar.width\"\n [attr.height]=\"bar.height\"\n [attr.fill]=\"bar.color\"\n rx=\"2\"\n class=\"lc-bar-chart__bar\"\n />\n\n @if (showValues()) {\n <text\n [attr.x]=\"bar.valueX\"\n [attr.y]=\"bar.valueY\"\n [attr.text-anchor]=\"isVertical() ? 'middle' : 'start'\"\n [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n class=\"lc-bar-chart__value\"\n >\n {{ bar.value }}\n </text>\n }\n\n @if (showLabels()) {\n <text\n [attr.x]=\"bar.labelX\"\n [attr.y]=\"bar.labelY\"\n [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\"\n [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n class=\"lc-bar-chart__label\"\n >\n {{ bar.label }}\n </text>\n }\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-bar-chart{overflow:visible}.lc-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-bar-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-bar-chart__bar{transition:opacity .15s ease}.lc-bar-chart__bar:hover{opacity:.8}.lc-bar-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9232
9258
|
}
|
|
9233
9259
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BarChartComponent, decorators: [{
|
|
9234
9260
|
type: Component,
|
|
9235
|
-
args: [{ selector: 'lc-bar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n
|
|
9236
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
9261
|
+
args: [{ selector: 'lc-bar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Bar chart\"\n class=\"lc-bar-chart\"\n>\n <!-- Grid lines -->\n @if (showGrid() && isVertical()) {\n @for (line of gridLines(); track line.y) {\n <line\n [attr.x1]=\"axisLine().bx1\"\n [attr.y1]=\"line.y\"\n [attr.x2]=\"axisLine().bx2\"\n [attr.y2]=\"line.y\"\n class=\"lc-bar-chart__grid-line\"\n />\n <text\n [attr.x]=\"axisLine().x1 - 6\"\n [attr.y]=\"line.y\"\n text-anchor=\"end\"\n dominant-baseline=\"central\"\n class=\"lc-bar-chart__grid-label\"\n >\n {{ line.label }}\n </text>\n }\n }\n\n <!-- Axes -->\n <line\n [attr.x1]=\"axisLine().x1\"\n [attr.y1]=\"axisLine().y1\"\n [attr.x2]=\"axisLine().x2\"\n [attr.y2]=\"axisLine().y2\"\n class=\"lc-bar-chart__axis\"\n />\n <line\n [attr.x1]=\"axisLine().bx1\"\n [attr.y1]=\"axisLine().by1\"\n [attr.x2]=\"axisLine().bx2\"\n [attr.y2]=\"axisLine().by2\"\n class=\"lc-bar-chart__axis\"\n />\n\n <!-- Bars -->\n @for (bar of bars(); track bar.label) {\n <rect\n [attr.x]=\"bar.x\"\n [attr.y]=\"bar.y\"\n [attr.width]=\"bar.width\"\n [attr.height]=\"bar.height\"\n [attr.fill]=\"bar.color\"\n rx=\"2\"\n class=\"lc-bar-chart__bar\"\n />\n\n @if (showValues()) {\n <text\n [attr.x]=\"bar.valueX\"\n [attr.y]=\"bar.valueY\"\n [attr.text-anchor]=\"isVertical() ? 'middle' : 'start'\"\n [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n class=\"lc-bar-chart__value\"\n >\n {{ bar.value }}\n </text>\n }\n\n @if (showLabels()) {\n <text\n [attr.x]=\"bar.labelX\"\n [attr.y]=\"bar.labelY\"\n [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\"\n [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n class=\"lc-bar-chart__label\"\n >\n {{ bar.label }}\n </text>\n }\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-bar-chart{overflow:visible}.lc-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-bar-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-bar-chart__bar{transition:opacity .15s ease}.lc-bar-chart__bar:hover{opacity:.8}.lc-bar-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}\n"] }]
|
|
9262
|
+
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
9237
9263
|
|
|
9238
9264
|
const DEFAULT_COLORS$5 = [
|
|
9239
9265
|
'var(--color-primary-500)',
|
|
@@ -9259,6 +9285,18 @@ const DEFAULT_COLORS$5 = [
|
|
|
9259
9285
|
* ```
|
|
9260
9286
|
*/
|
|
9261
9287
|
class LineChartComponent {
|
|
9288
|
+
_el = inject(ElementRef);
|
|
9289
|
+
_destroyRef = inject(DestroyRef);
|
|
9290
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
9291
|
+
constructor() {
|
|
9292
|
+
afterNextRender(() => {
|
|
9293
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
9294
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
9295
|
+
});
|
|
9296
|
+
obs.observe(this._el.nativeElement);
|
|
9297
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
9298
|
+
});
|
|
9299
|
+
}
|
|
9262
9300
|
/** One or more data series. */
|
|
9263
9301
|
series = input.required(...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
|
|
9264
9302
|
/** X-axis labels. */
|
|
@@ -9289,7 +9327,8 @@ class LineChartComponent {
|
|
|
9289
9327
|
PR = 10;
|
|
9290
9328
|
PT = 10;
|
|
9291
9329
|
PB = 30;
|
|
9292
|
-
|
|
9330
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
9331
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
9293
9332
|
allValues = computed(() => {
|
|
9294
9333
|
const s = this.series();
|
|
9295
9334
|
return s.flatMap((ser) => ser.data);
|
|
@@ -9304,7 +9343,7 @@ class LineChartComponent {
|
|
|
9304
9343
|
plotArea = computed(() => ({
|
|
9305
9344
|
x: this.PL,
|
|
9306
9345
|
y: this.PT,
|
|
9307
|
-
w: this.
|
|
9346
|
+
w: this.effectiveWidth() - this.PL - this.PR,
|
|
9308
9347
|
h: this.height() - this.PT - this.PB,
|
|
9309
9348
|
}), ...(ngDevMode ? [{ debugName: "plotArea" }] : /* istanbul ignore next */ []));
|
|
9310
9349
|
gridLines = computed(() => {
|
|
@@ -9417,12 +9456,12 @@ class LineChartComponent {
|
|
|
9417
9456
|
return String(Math.round(val));
|
|
9418
9457
|
}
|
|
9419
9458
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9420
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: LineChartComponent, isStandalone: true, selector: "lc-line-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showXLabels: { classPropertyName: "showXLabels", publicName: "showXLabels", isSignal: true, isRequired: false, transformFunction: null }, showYLabels: { classPropertyName: "showYLabels", publicName: "showYLabels", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, smooth: { classPropertyName: "smooth", publicName: "smooth", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-line-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n
|
|
9459
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: LineChartComponent, isStandalone: true, selector: "lc-line-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showXLabels: { classPropertyName: "showXLabels", publicName: "showXLabels", isSignal: true, isRequired: false, transformFunction: null }, showYLabels: { classPropertyName: "showYLabels", publicName: "showYLabels", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, smooth: { classPropertyName: "smooth", publicName: "smooth", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-line-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Line chart\"\n class=\"lc-line-chart__svg\"\n >\n <!-- Grid lines -->\n @for (line of gridLines(); track line.y) {\n <line\n [attr.x1]=\"axisLine().hx1\"\n [attr.y1]=\"line.y\"\n [attr.x2]=\"axisLine().hx2\"\n [attr.y2]=\"line.y\"\n class=\"lc-line-chart__grid-line\"\n />\n @if (showYLabels()) {\n <text\n [attr.x]=\"axisLine().vx1 - 6\"\n [attr.y]=\"line.y\"\n text-anchor=\"end\"\n dominant-baseline=\"central\"\n class=\"lc-line-chart__y-label\"\n >\n {{ line.label }}\n </text>\n }\n }\n\n <!-- Axes -->\n <line\n [attr.x1]=\"axisLine().vx1\"\n [attr.y1]=\"axisLine().vy1\"\n [attr.x2]=\"axisLine().vx2\"\n [attr.y2]=\"axisLine().vy2\"\n class=\"lc-line-chart__axis\"\n />\n <line\n [attr.x1]=\"axisLine().hx1\"\n [attr.y1]=\"axisLine().hy1\"\n [attr.x2]=\"axisLine().hx2\"\n [attr.y2]=\"axisLine().hy2\"\n class=\"lc-line-chart__axis\"\n />\n\n <!-- X labels -->\n @for (lbl of xLabels(); track lbl.x) {\n <text\n [attr.x]=\"lbl.x\"\n [attr.y]=\"lbl.y\"\n text-anchor=\"middle\"\n class=\"lc-line-chart__x-label\"\n >\n {{ lbl.label }}\n </text>\n }\n\n <!-- Clip path: prevents smooth spline overshoot from rendering outside the plot area -->\n <defs>\n <clipPath [attr.id]=\"clipId()\">\n <rect\n [attr.x]=\"plotArea().x\"\n [attr.y]=\"plotArea().y\"\n [attr.width]=\"plotArea().w\"\n [attr.height]=\"plotArea().h\"\n />\n </clipPath>\n </defs>\n\n <!-- Series -->\n @for (ser of renderedSeries(); track ser.label) {\n @if (ser.areaD) {\n <path\n [attr.d]=\"ser.areaD\"\n [attr.fill]=\"ser.color\"\n [attr.clip-path]=\"'url(#' + clipId() + ')'\"\n class=\"lc-line-chart__area\"\n />\n }\n @if (ser.pathD) {\n <path\n [attr.d]=\"ser.pathD\"\n [attr.stroke]=\"ser.color\"\n [attr.stroke-width]=\"strokeWidth()\"\n [attr.clip-path]=\"'url(#' + clipId() + ')'\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"lc-line-chart__line\"\n />\n }\n @for (pt of ser.points; track $index) {\n <circle\n [attr.cx]=\"pt.x\"\n [attr.cy]=\"pt.y\"\n r=\"3\"\n [attr.fill]=\"ser.color\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n class=\"lc-line-chart__dot\"\n />\n }\n }\n </svg>\n\n @if (legendItems().length > 0) {\n <div class=\"lc-line-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-line-chart__legend-item\">\n <span class=\"lc-line-chart__legend-line\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-line-chart__legend-label\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-line-chart{display:block;width:100%}.lc-line-chart__svg{overflow:visible}.lc-line-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-line-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-line-chart__y-label,.lc-line-chart__x-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-line-chart__area{opacity:.12}.lc-line-chart__dot{transition:r .15s ease}.lc-line-chart__dot:hover{r:5}.lc-line-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-line-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-line-chart__legend-line{width:1rem;height:.1875rem;border-radius:1px;flex-shrink:0}.lc-line-chart__legend-label{color:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9421
9460
|
}
|
|
9422
9461
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LineChartComponent, decorators: [{
|
|
9423
9462
|
type: Component,
|
|
9424
|
-
args: [{ selector: 'lc-line-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-line-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n
|
|
9425
|
-
}], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showXLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showXLabels", required: false }] }], showYLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showYLabels", required: false }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], smooth: [{ type: i0.Input, args: [{ isSignal: true, alias: "smooth", required: false }] }], yMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMin", required: false }] }] } });
|
|
9463
|
+
args: [{ selector: 'lc-line-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-line-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Line chart\"\n class=\"lc-line-chart__svg\"\n >\n <!-- Grid lines -->\n @for (line of gridLines(); track line.y) {\n <line\n [attr.x1]=\"axisLine().hx1\"\n [attr.y1]=\"line.y\"\n [attr.x2]=\"axisLine().hx2\"\n [attr.y2]=\"line.y\"\n class=\"lc-line-chart__grid-line\"\n />\n @if (showYLabels()) {\n <text\n [attr.x]=\"axisLine().vx1 - 6\"\n [attr.y]=\"line.y\"\n text-anchor=\"end\"\n dominant-baseline=\"central\"\n class=\"lc-line-chart__y-label\"\n >\n {{ line.label }}\n </text>\n }\n }\n\n <!-- Axes -->\n <line\n [attr.x1]=\"axisLine().vx1\"\n [attr.y1]=\"axisLine().vy1\"\n [attr.x2]=\"axisLine().vx2\"\n [attr.y2]=\"axisLine().vy2\"\n class=\"lc-line-chart__axis\"\n />\n <line\n [attr.x1]=\"axisLine().hx1\"\n [attr.y1]=\"axisLine().hy1\"\n [attr.x2]=\"axisLine().hx2\"\n [attr.y2]=\"axisLine().hy2\"\n class=\"lc-line-chart__axis\"\n />\n\n <!-- X labels -->\n @for (lbl of xLabels(); track lbl.x) {\n <text\n [attr.x]=\"lbl.x\"\n [attr.y]=\"lbl.y\"\n text-anchor=\"middle\"\n class=\"lc-line-chart__x-label\"\n >\n {{ lbl.label }}\n </text>\n }\n\n <!-- Clip path: prevents smooth spline overshoot from rendering outside the plot area -->\n <defs>\n <clipPath [attr.id]=\"clipId()\">\n <rect\n [attr.x]=\"plotArea().x\"\n [attr.y]=\"plotArea().y\"\n [attr.width]=\"plotArea().w\"\n [attr.height]=\"plotArea().h\"\n />\n </clipPath>\n </defs>\n\n <!-- Series -->\n @for (ser of renderedSeries(); track ser.label) {\n @if (ser.areaD) {\n <path\n [attr.d]=\"ser.areaD\"\n [attr.fill]=\"ser.color\"\n [attr.clip-path]=\"'url(#' + clipId() + ')'\"\n class=\"lc-line-chart__area\"\n />\n }\n @if (ser.pathD) {\n <path\n [attr.d]=\"ser.pathD\"\n [attr.stroke]=\"ser.color\"\n [attr.stroke-width]=\"strokeWidth()\"\n [attr.clip-path]=\"'url(#' + clipId() + ')'\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"lc-line-chart__line\"\n />\n }\n @for (pt of ser.points; track $index) {\n <circle\n [attr.cx]=\"pt.x\"\n [attr.cy]=\"pt.y\"\n r=\"3\"\n [attr.fill]=\"ser.color\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n class=\"lc-line-chart__dot\"\n />\n }\n }\n </svg>\n\n @if (legendItems().length > 0) {\n <div class=\"lc-line-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-line-chart__legend-item\">\n <span class=\"lc-line-chart__legend-line\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-line-chart__legend-label\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-line-chart{display:block;width:100%}.lc-line-chart__svg{overflow:visible}.lc-line-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-line-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-line-chart__y-label,.lc-line-chart__x-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-line-chart__area{opacity:.12}.lc-line-chart__dot{transition:r .15s ease}.lc-line-chart__dot:hover{r:5}.lc-line-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-line-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-line-chart__legend-line{width:1rem;height:.1875rem;border-radius:1px;flex-shrink:0}.lc-line-chart__legend-label{color:var(--color-text-secondary)}\n"] }]
|
|
9464
|
+
}], ctorParameters: () => [], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showXLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showXLabels", required: false }] }], showYLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showYLabels", required: false }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], smooth: [{ type: i0.Input, args: [{ isSignal: true, alias: "smooth", required: false }] }], yMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMin", required: false }] }] } });
|
|
9426
9465
|
|
|
9427
9466
|
/**
|
|
9428
9467
|
* Gauge component for displaying a value on a semicircular scale.
|
|
@@ -9545,6 +9584,18 @@ const DEFAULT_COLORS$4 = [
|
|
|
9545
9584
|
* ```
|
|
9546
9585
|
*/
|
|
9547
9586
|
class StackedBarChartComponent {
|
|
9587
|
+
_el = inject(ElementRef);
|
|
9588
|
+
_destroyRef = inject(DestroyRef);
|
|
9589
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
9590
|
+
constructor() {
|
|
9591
|
+
afterNextRender(() => {
|
|
9592
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
9593
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
9594
|
+
});
|
|
9595
|
+
obs.observe(this._el.nativeElement);
|
|
9596
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
9597
|
+
});
|
|
9598
|
+
}
|
|
9548
9599
|
/** Categories with stacked values. */
|
|
9549
9600
|
categories = input.required(...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
|
|
9550
9601
|
/** Legend items mapping to each value index. */
|
|
@@ -9561,7 +9612,8 @@ class StackedBarChartComponent {
|
|
|
9561
9612
|
PR = 10;
|
|
9562
9613
|
PT = 10;
|
|
9563
9614
|
PB = 30;
|
|
9564
|
-
|
|
9615
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
9616
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
9565
9617
|
maxTotal = computed(() => {
|
|
9566
9618
|
const cats = this.categories();
|
|
9567
9619
|
if (!cats.length)
|
|
@@ -9590,7 +9642,7 @@ class StackedBarChartComponent {
|
|
|
9590
9642
|
const legs = this.legends();
|
|
9591
9643
|
if (!cats.length)
|
|
9592
9644
|
return [];
|
|
9593
|
-
const w = this.
|
|
9645
|
+
const w = this.effectiveWidth();
|
|
9594
9646
|
const h = this.height();
|
|
9595
9647
|
const isV = this.orientation() === 'vertical';
|
|
9596
9648
|
const plotW = w - this.PL - this.PR;
|
|
@@ -9649,15 +9701,15 @@ class StackedBarChartComponent {
|
|
|
9649
9701
|
vx1: this.PL, vy1: this.PT,
|
|
9650
9702
|
vx2: this.PL, vy2: this.height() - this.PB,
|
|
9651
9703
|
hx1: this.PL, hy1: this.height() - this.PB,
|
|
9652
|
-
hx2: this.
|
|
9704
|
+
hx2: this.effectiveWidth() - this.PR, hy2: this.height() - this.PB,
|
|
9653
9705
|
}), ...(ngDevMode ? [{ debugName: "axisLine" }] : /* istanbul ignore next */ []));
|
|
9654
9706
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StackedBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9655
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: StackedBarChartComponent, isStandalone: true, selector: "lc-stacked-bar-chart", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, legends: { classPropertyName: "legends", publicName: "legends", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-stacked-bar-chart\">\n <svg\n
|
|
9707
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: StackedBarChartComponent, isStandalone: true, selector: "lc-stacked-bar-chart", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, legends: { classPropertyName: "legends", publicName: "legends", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-stacked-bar-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Stacked bar chart\"\n class=\"lc-stacked-bar-chart__svg\"\n >\n @if (showGrid() && isVertical()) {\n @for (line of gridLines(); track line.y) {\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-stacked-bar-chart__grid\" />\n <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-stacked-bar-chart__grid-label\">{{ line.label }}</text>\n }\n }\n\n <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-stacked-bar-chart__axis\" />\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-stacked-bar-chart__axis\" />\n\n @for (stack of stacks(); track stack.label) {\n @for (seg of stack.segments; track $index) {\n <rect [attr.x]=\"seg.x\" [attr.y]=\"seg.y\" [attr.width]=\"seg.w\" [attr.height]=\"seg.h\" [attr.fill]=\"seg.color\" class=\"lc-stacked-bar-chart__segment\" />\n }\n @if (showLabels()) {\n <text [attr.x]=\"stack.labelPos.x\" [attr.y]=\"stack.labelPos.y\" [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\" [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\" class=\"lc-stacked-bar-chart__label\">{{ stack.label }}</text>\n }\n }\n </svg>\n\n @if (showLegend() && legendItems().length) {\n <div class=\"lc-stacked-bar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-stacked-bar-chart__legend-item\">\n <span class=\"lc-stacked-bar-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-stacked-bar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-stacked-bar-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.lc-stacked-bar-chart__svg{overflow:visible}.lc-stacked-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-stacked-bar-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-stacked-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-stacked-bar-chart__segment{transition:opacity .15s ease}.lc-stacked-bar-chart__segment:hover{opacity:.8}.lc-stacked-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}.lc-stacked-bar-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-stacked-bar-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-stacked-bar-chart__legend-dot{width:.5rem;height:.5rem;border-radius:2px;flex-shrink:0}.lc-stacked-bar-chart__legend-text{color:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9656
9708
|
}
|
|
9657
9709
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StackedBarChartComponent, decorators: [{
|
|
9658
9710
|
type: Component,
|
|
9659
|
-
args: [{ selector: 'lc-stacked-bar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-stacked-bar-chart\">\n <svg\n
|
|
9660
|
-
}], propDecorators: { categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: true }] }], legends: [{ type: i0.Input, args: [{ isSignal: true, alias: "legends", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }] } });
|
|
9711
|
+
args: [{ selector: 'lc-stacked-bar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-stacked-bar-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Stacked bar chart\"\n class=\"lc-stacked-bar-chart__svg\"\n >\n @if (showGrid() && isVertical()) {\n @for (line of gridLines(); track line.y) {\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-stacked-bar-chart__grid\" />\n <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-stacked-bar-chart__grid-label\">{{ line.label }}</text>\n }\n }\n\n <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-stacked-bar-chart__axis\" />\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-stacked-bar-chart__axis\" />\n\n @for (stack of stacks(); track stack.label) {\n @for (seg of stack.segments; track $index) {\n <rect [attr.x]=\"seg.x\" [attr.y]=\"seg.y\" [attr.width]=\"seg.w\" [attr.height]=\"seg.h\" [attr.fill]=\"seg.color\" class=\"lc-stacked-bar-chart__segment\" />\n }\n @if (showLabels()) {\n <text [attr.x]=\"stack.labelPos.x\" [attr.y]=\"stack.labelPos.y\" [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\" [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\" class=\"lc-stacked-bar-chart__label\">{{ stack.label }}</text>\n }\n }\n </svg>\n\n @if (showLegend() && legendItems().length) {\n <div class=\"lc-stacked-bar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-stacked-bar-chart__legend-item\">\n <span class=\"lc-stacked-bar-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-stacked-bar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-stacked-bar-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.lc-stacked-bar-chart__svg{overflow:visible}.lc-stacked-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-stacked-bar-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-stacked-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-stacked-bar-chart__segment{transition:opacity .15s ease}.lc-stacked-bar-chart__segment:hover{opacity:.8}.lc-stacked-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}.lc-stacked-bar-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-stacked-bar-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-stacked-bar-chart__legend-dot{width:.5rem;height:.5rem;border-radius:2px;flex-shrink:0}.lc-stacked-bar-chart__legend-text{color:var(--color-text-secondary)}\n"] }]
|
|
9712
|
+
}], ctorParameters: () => [], propDecorators: { categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: true }] }], legends: [{ type: i0.Input, args: [{ isSignal: true, alias: "legends", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }] } });
|
|
9661
9713
|
|
|
9662
9714
|
const DEFAULT_COLORS$3 = [
|
|
9663
9715
|
'var(--color-primary-500)',
|
|
@@ -9683,6 +9735,18 @@ const DEFAULT_COLORS$3 = [
|
|
|
9683
9735
|
* ```
|
|
9684
9736
|
*/
|
|
9685
9737
|
class AreaChartComponent {
|
|
9738
|
+
_el = inject(ElementRef);
|
|
9739
|
+
_destroyRef = inject(DestroyRef);
|
|
9740
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
9741
|
+
constructor() {
|
|
9742
|
+
afterNextRender(() => {
|
|
9743
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
9744
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
9745
|
+
});
|
|
9746
|
+
obs.observe(this._el.nativeElement);
|
|
9747
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
9748
|
+
});
|
|
9749
|
+
}
|
|
9686
9750
|
series = input.required(...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
|
|
9687
9751
|
labels = input([], ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
|
|
9688
9752
|
width = input(400, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
@@ -9702,10 +9766,11 @@ class AreaChartComponent {
|
|
|
9702
9766
|
PR = 10;
|
|
9703
9767
|
PT = 10;
|
|
9704
9768
|
PB = 30;
|
|
9705
|
-
|
|
9769
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
9770
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
9706
9771
|
plotArea = computed(() => ({
|
|
9707
9772
|
x: this.PL, y: this.PT,
|
|
9708
|
-
w: this.
|
|
9773
|
+
w: this.effectiveWidth() - this.PL - this.PR,
|
|
9709
9774
|
h: this.height() - this.PT - this.PB,
|
|
9710
9775
|
}), ...(ngDevMode ? [{ debugName: "plotArea" }] : /* istanbul ignore next */ []));
|
|
9711
9776
|
computedSeries = computed(() => {
|
|
@@ -9847,12 +9912,12 @@ class AreaChartComponent {
|
|
|
9847
9912
|
return this.renderedSeries().map(s => ({ label: s.label, color: s.color }));
|
|
9848
9913
|
}, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
|
|
9849
9914
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AreaChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9850
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: AreaChartComponent, isStandalone: true, selector: "lc-area-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showXLabels: { classPropertyName: "showXLabels", publicName: "showXLabels", isSignal: true, isRequired: false, transformFunction: null }, showYLabels: { classPropertyName: "showYLabels", publicName: "showYLabels", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, smooth: { classPropertyName: "smooth", publicName: "smooth", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-area-chart\">\n <svg
|
|
9915
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: AreaChartComponent, isStandalone: true, selector: "lc-area-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showXLabels: { classPropertyName: "showXLabels", publicName: "showXLabels", isSignal: true, isRequired: false, transformFunction: null }, showYLabels: { classPropertyName: "showYLabels", publicName: "showYLabels", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, smooth: { classPropertyName: "smooth", publicName: "smooth", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-area-chart\">\n <svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Area chart\" class=\"lc-area-chart__svg\">\n @for (line of gridLines(); track line.y) {\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-area-chart__grid\" />\n @if (showYLabels()) {\n <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-area-chart__axis-label\">{{ line.label }}</text>\n }\n }\n\n <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-area-chart__axis\" />\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-area-chart__axis\" />\n\n @for (lbl of xLabelItems(); track lbl.x) {\n <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" text-anchor=\"middle\" class=\"lc-area-chart__axis-label\">{{ lbl.label }}</text>\n }\n\n @for (ser of renderedSeries(); track ser.label) {\n @if (ser.areaD) {\n <path [attr.d]=\"ser.areaD\" [attr.fill]=\"ser.color\" [attr.opacity]=\"fillOpacity()\" class=\"lc-area-chart__area\" />\n }\n @if (ser.lineD) {\n <path [attr.d]=\"ser.lineD\" [attr.stroke]=\"ser.color\" [attr.stroke-width]=\"strokeWidth()\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lc-area-chart__line\" />\n }\n @for (pt of ser.points; track $index) {\n <circle [attr.cx]=\"pt.x\" [attr.cy]=\"pt.y\" r=\"3\" [attr.fill]=\"ser.color\" stroke=\"white\" stroke-width=\"1.5\" class=\"lc-area-chart__dot\" />\n }\n }\n </svg>\n\n @if (legendItems().length) {\n <div class=\"lc-area-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-area-chart__legend-item\">\n <span class=\"lc-area-chart__legend-swatch\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-area-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-area-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.lc-area-chart__svg{overflow:visible}.lc-area-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-area-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-area-chart__axis-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-area-chart__dot{transition:r .15s ease}.lc-area-chart__dot:hover{r:5}.lc-area-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-area-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-area-chart__legend-swatch{width:.75rem;height:.75rem;border-radius:2px;flex-shrink:0}.lc-area-chart__legend-text{color:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9851
9916
|
}
|
|
9852
9917
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AreaChartComponent, decorators: [{
|
|
9853
9918
|
type: Component,
|
|
9854
|
-
args: [{ selector: 'lc-area-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-area-chart\">\n <svg
|
|
9855
|
-
}], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showXLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showXLabels", required: false }] }], showYLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showYLabels", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], smooth: [{ type: i0.Input, args: [{ isSignal: true, alias: "smooth", required: false }] }], fillOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillOpacity", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }] } });
|
|
9919
|
+
args: [{ selector: 'lc-area-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-area-chart\">\n <svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Area chart\" class=\"lc-area-chart__svg\">\n @for (line of gridLines(); track line.y) {\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-area-chart__grid\" />\n @if (showYLabels()) {\n <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-area-chart__axis-label\">{{ line.label }}</text>\n }\n }\n\n <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-area-chart__axis\" />\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-area-chart__axis\" />\n\n @for (lbl of xLabelItems(); track lbl.x) {\n <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" text-anchor=\"middle\" class=\"lc-area-chart__axis-label\">{{ lbl.label }}</text>\n }\n\n @for (ser of renderedSeries(); track ser.label) {\n @if (ser.areaD) {\n <path [attr.d]=\"ser.areaD\" [attr.fill]=\"ser.color\" [attr.opacity]=\"fillOpacity()\" class=\"lc-area-chart__area\" />\n }\n @if (ser.lineD) {\n <path [attr.d]=\"ser.lineD\" [attr.stroke]=\"ser.color\" [attr.stroke-width]=\"strokeWidth()\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lc-area-chart__line\" />\n }\n @for (pt of ser.points; track $index) {\n <circle [attr.cx]=\"pt.x\" [attr.cy]=\"pt.y\" r=\"3\" [attr.fill]=\"ser.color\" stroke=\"white\" stroke-width=\"1.5\" class=\"lc-area-chart__dot\" />\n }\n }\n </svg>\n\n @if (legendItems().length) {\n <div class=\"lc-area-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-area-chart__legend-item\">\n <span class=\"lc-area-chart__legend-swatch\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-area-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-area-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.lc-area-chart__svg{overflow:visible}.lc-area-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-area-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-area-chart__axis-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-area-chart__dot{transition:r .15s ease}.lc-area-chart__dot:hover{r:5}.lc-area-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-area-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-area-chart__legend-swatch{width:.75rem;height:.75rem;border-radius:2px;flex-shrink:0}.lc-area-chart__legend-text{color:var(--color-text-secondary)}\n"] }]
|
|
9920
|
+
}], ctorParameters: () => [], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showXLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showXLabels", required: false }] }], showYLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showYLabels", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], smooth: [{ type: i0.Input, args: [{ isSignal: true, alias: "smooth", required: false }] }], fillOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillOpacity", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }] } });
|
|
9856
9921
|
|
|
9857
9922
|
/**
|
|
9858
9923
|
* Heatmap component for visualizing 2D data density.
|
|
@@ -10038,11 +10103,11 @@ class PieChartComponent {
|
|
|
10038
10103
|
}, ...(ngDevMode ? [{ debugName: "arcs" }] : /* istanbul ignore next */ []));
|
|
10039
10104
|
legendItems = computed(() => this.arcs().map(a => ({ color: a.color, label: a.label, percentage: a.percentage })), ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
|
|
10040
10105
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10041
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PieChartComponent, isStandalone: true, selector: "lc-pie-chart", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-pie-chart\">\n <svg [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Pie chart\" class=\"lc-pie-chart__svg\">\n @for (arc of arcs(); track arc.label) {\n <path [attr.d]=\"arc.d\" [attr.fill]=\"arc.color\" class=\"lc-pie-chart__segment\" />\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-pie-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-pie-chart__legend-item\">\n <span class=\"lc-pie-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-pie-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-pie-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-pie-chart{display:
|
|
10106
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PieChartComponent, isStandalone: true, selector: "lc-pie-chart", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-pie-chart\">\n <svg [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Pie chart\" class=\"lc-pie-chart__svg\">\n @for (arc of arcs(); track arc.label) {\n <path [attr.d]=\"arc.d\" [attr.fill]=\"arc.color\" class=\"lc-pie-chart__segment\" />\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-pie-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-pie-chart__legend-item\">\n <span class=\"lc-pie-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-pie-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-pie-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-pie-chart{display:flex;flex-direction:column;align-items:center;gap:.75rem}.lc-pie-chart__svg{overflow:visible}.lc-pie-chart__segment{transition:opacity .15s ease}.lc-pie-chart__segment:hover{opacity:.8}.lc-pie-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-pie-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-pie-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-pie-chart__legend-label{color:var(--color-text-secondary)}.lc-pie-chart__legend-pct{color:var(--color-text-tertiary);font-weight:600}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10042
10107
|
}
|
|
10043
10108
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PieChartComponent, decorators: [{
|
|
10044
10109
|
type: Component,
|
|
10045
|
-
args: [{ selector: 'lc-pie-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-pie-chart\">\n <svg [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Pie chart\" class=\"lc-pie-chart__svg\">\n @for (arc of arcs(); track arc.label) {\n <path [attr.d]=\"arc.d\" [attr.fill]=\"arc.color\" class=\"lc-pie-chart__segment\" />\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-pie-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-pie-chart__legend-item\">\n <span class=\"lc-pie-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-pie-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-pie-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-pie-chart{display:
|
|
10110
|
+
args: [{ selector: 'lc-pie-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-pie-chart\">\n <svg [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Pie chart\" class=\"lc-pie-chart__svg\">\n @for (arc of arcs(); track arc.label) {\n <path [attr.d]=\"arc.d\" [attr.fill]=\"arc.color\" class=\"lc-pie-chart__segment\" />\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-pie-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-pie-chart__legend-item\">\n <span class=\"lc-pie-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-pie-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-pie-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-pie-chart{display:flex;flex-direction:column;align-items:center;gap:.75rem}.lc-pie-chart__svg{overflow:visible}.lc-pie-chart__segment{transition:opacity .15s ease}.lc-pie-chart__segment:hover{opacity:.8}.lc-pie-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-pie-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-pie-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-pie-chart__legend-label{color:var(--color-text-secondary)}.lc-pie-chart__legend-pct{color:var(--color-text-tertiary);font-weight:600}\n"] }]
|
|
10046
10111
|
}], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }] } });
|
|
10047
10112
|
|
|
10048
10113
|
/**
|
|
@@ -10159,11 +10224,11 @@ class RadarChartComponent {
|
|
|
10159
10224
|
return this.seriesPolygons().map(s => ({ label: s.label, colorIndex: s.colorIndex, customColor: s.customColor }));
|
|
10160
10225
|
}, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
|
|
10161
10226
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RadarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10162
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: RadarChartComponent, isStandalone: true, selector: "lc-radar-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, axes: { classPropertyName: "axes", publicName: "axes", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rings: { classPropertyName: "rings", publicName: "rings", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-radar-chart\">\n <svg [attr.width]=\"size()\" [attr.height]=\"size()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Radar chart\" class=\"lc-radar-chart__svg\">\n @for (ring of gridRings(); track $index) {\n <polygon [attr.points]=\"ring\" class=\"lc-radar-chart__grid\" />\n }\n\n @for (axis of axisLines(); track $index) {\n <line [attr.x1]=\"center()\" [attr.y1]=\"center()\" [attr.x2]=\"axis.x2\" [attr.y2]=\"axis.y2\" class=\"lc-radar-chart__axis\" />\n }\n\n @for (ser of seriesPolygons(); track ser.label) {\n <polygon [attr.points]=\"ser.points\" [class]=\"'lc-radar-chart__polygon lc-radar-chart__polygon--' + ser.colorIndex\" [attr.fill]=\"ser.customColor\" [attr.stroke]=\"ser.customColor\" [attr.fill-opacity]=\"fillOpacity()\" stroke-width=\"2\" />\n }\n\n @for (lbl of labelItems(); track lbl.label) {\n <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" [attr.text-anchor]=\"lbl.anchor\" dominant-baseline=\"central\" class=\"lc-radar-chart__label\">{{ lbl.label }}</text>\n }\n </svg>\n\n @if (legendItems().length) {\n <div class=\"lc-radar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-radar-chart__legend-item\">\n <span [class]=\"'lc-radar-chart__legend-dot lc-radar-chart__legend-dot--' + item.colorIndex\" [style.background-color]=\"item.customColor\"></span>\n <span class=\"lc-radar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-radar-chart{display:
|
|
10227
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: RadarChartComponent, isStandalone: true, selector: "lc-radar-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, axes: { classPropertyName: "axes", publicName: "axes", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rings: { classPropertyName: "rings", publicName: "rings", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-radar-chart\">\n <svg [attr.width]=\"size()\" [attr.height]=\"size()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Radar chart\" class=\"lc-radar-chart__svg\">\n @for (ring of gridRings(); track $index) {\n <polygon [attr.points]=\"ring\" class=\"lc-radar-chart__grid\" />\n }\n\n @for (axis of axisLines(); track $index) {\n <line [attr.x1]=\"center()\" [attr.y1]=\"center()\" [attr.x2]=\"axis.x2\" [attr.y2]=\"axis.y2\" class=\"lc-radar-chart__axis\" />\n }\n\n @for (ser of seriesPolygons(); track ser.label) {\n <polygon [attr.points]=\"ser.points\" [class]=\"'lc-radar-chart__polygon lc-radar-chart__polygon--' + ser.colorIndex\" [attr.fill]=\"ser.customColor\" [attr.stroke]=\"ser.customColor\" [attr.fill-opacity]=\"fillOpacity()\" stroke-width=\"2\" />\n }\n\n @for (lbl of labelItems(); track lbl.label) {\n <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" [attr.text-anchor]=\"lbl.anchor\" dominant-baseline=\"central\" class=\"lc-radar-chart__label\">{{ lbl.label }}</text>\n }\n </svg>\n\n @if (legendItems().length) {\n <div class=\"lc-radar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-radar-chart__legend-item\">\n <span [class]=\"'lc-radar-chart__legend-dot lc-radar-chart__legend-dot--' + item.colorIndex\" [style.background-color]=\"item.customColor\"></span>\n <span class=\"lc-radar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-radar-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem}.lc-radar-chart__svg{overflow:visible}.lc-radar-chart__grid{fill:none;stroke:var(--color-border);stroke-width:1}.lc-radar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-radar-chart__polygon{transition:fill-opacity .15s ease}.lc-radar-chart__polygon:hover{fill-opacity:.3}.lc-radar-chart__polygon--0{fill:var(--color-primary-500);stroke:var(--color-primary-500)}.lc-radar-chart__polygon--1{fill:var(--color-secondary-500);stroke:var(--color-secondary-500)}.lc-radar-chart__polygon--2{fill:var(--color-success-default);stroke:var(--color-success-default)}.lc-radar-chart__polygon--3{fill:var(--color-warning-default);stroke:var(--color-warning-default)}.lc-radar-chart__polygon--4{fill:var(--color-error-default);stroke:var(--color-error-default)}.lc-radar-chart__polygon--5{fill:var(--color-info-default);stroke:var(--color-info-default)}.lc-radar-chart__polygon--6{fill:var(--color-primary-700);stroke:var(--color-primary-700)}.lc-radar-chart__polygon--7{fill:var(--color-secondary-700);stroke:var(--color-secondary-700)}.lc-radar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}.lc-radar-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-radar-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-radar-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-radar-chart__legend-dot--0{background-color:var(--color-primary-500)}.lc-radar-chart__legend-dot--1{background-color:var(--color-secondary-500)}.lc-radar-chart__legend-dot--2{background-color:var(--color-success-default)}.lc-radar-chart__legend-dot--3{background-color:var(--color-warning-default)}.lc-radar-chart__legend-dot--4{background-color:var(--color-error-default)}.lc-radar-chart__legend-dot--5{background-color:var(--color-info-default)}.lc-radar-chart__legend-dot--6{background-color:var(--color-primary-700)}.lc-radar-chart__legend-dot--7{background-color:var(--color-secondary-700)}.lc-radar-chart__legend-text{color:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10163
10228
|
}
|
|
10164
10229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RadarChartComponent, decorators: [{
|
|
10165
10230
|
type: Component,
|
|
10166
|
-
args: [{ selector: 'lc-radar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-radar-chart\">\n <svg [attr.width]=\"size()\" [attr.height]=\"size()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Radar chart\" class=\"lc-radar-chart__svg\">\n @for (ring of gridRings(); track $index) {\n <polygon [attr.points]=\"ring\" class=\"lc-radar-chart__grid\" />\n }\n\n @for (axis of axisLines(); track $index) {\n <line [attr.x1]=\"center()\" [attr.y1]=\"center()\" [attr.x2]=\"axis.x2\" [attr.y2]=\"axis.y2\" class=\"lc-radar-chart__axis\" />\n }\n\n @for (ser of seriesPolygons(); track ser.label) {\n <polygon [attr.points]=\"ser.points\" [class]=\"'lc-radar-chart__polygon lc-radar-chart__polygon--' + ser.colorIndex\" [attr.fill]=\"ser.customColor\" [attr.stroke]=\"ser.customColor\" [attr.fill-opacity]=\"fillOpacity()\" stroke-width=\"2\" />\n }\n\n @for (lbl of labelItems(); track lbl.label) {\n <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" [attr.text-anchor]=\"lbl.anchor\" dominant-baseline=\"central\" class=\"lc-radar-chart__label\">{{ lbl.label }}</text>\n }\n </svg>\n\n @if (legendItems().length) {\n <div class=\"lc-radar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-radar-chart__legend-item\">\n <span [class]=\"'lc-radar-chart__legend-dot lc-radar-chart__legend-dot--' + item.colorIndex\" [style.background-color]=\"item.customColor\"></span>\n <span class=\"lc-radar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-radar-chart{display:
|
|
10231
|
+
args: [{ selector: 'lc-radar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-radar-chart\">\n <svg [attr.width]=\"size()\" [attr.height]=\"size()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Radar chart\" class=\"lc-radar-chart__svg\">\n @for (ring of gridRings(); track $index) {\n <polygon [attr.points]=\"ring\" class=\"lc-radar-chart__grid\" />\n }\n\n @for (axis of axisLines(); track $index) {\n <line [attr.x1]=\"center()\" [attr.y1]=\"center()\" [attr.x2]=\"axis.x2\" [attr.y2]=\"axis.y2\" class=\"lc-radar-chart__axis\" />\n }\n\n @for (ser of seriesPolygons(); track ser.label) {\n <polygon [attr.points]=\"ser.points\" [class]=\"'lc-radar-chart__polygon lc-radar-chart__polygon--' + ser.colorIndex\" [attr.fill]=\"ser.customColor\" [attr.stroke]=\"ser.customColor\" [attr.fill-opacity]=\"fillOpacity()\" stroke-width=\"2\" />\n }\n\n @for (lbl of labelItems(); track lbl.label) {\n <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" [attr.text-anchor]=\"lbl.anchor\" dominant-baseline=\"central\" class=\"lc-radar-chart__label\">{{ lbl.label }}</text>\n }\n </svg>\n\n @if (legendItems().length) {\n <div class=\"lc-radar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-radar-chart__legend-item\">\n <span [class]=\"'lc-radar-chart__legend-dot lc-radar-chart__legend-dot--' + item.colorIndex\" [style.background-color]=\"item.customColor\"></span>\n <span class=\"lc-radar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-radar-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem}.lc-radar-chart__svg{overflow:visible}.lc-radar-chart__grid{fill:none;stroke:var(--color-border);stroke-width:1}.lc-radar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-radar-chart__polygon{transition:fill-opacity .15s ease}.lc-radar-chart__polygon:hover{fill-opacity:.3}.lc-radar-chart__polygon--0{fill:var(--color-primary-500);stroke:var(--color-primary-500)}.lc-radar-chart__polygon--1{fill:var(--color-secondary-500);stroke:var(--color-secondary-500)}.lc-radar-chart__polygon--2{fill:var(--color-success-default);stroke:var(--color-success-default)}.lc-radar-chart__polygon--3{fill:var(--color-warning-default);stroke:var(--color-warning-default)}.lc-radar-chart__polygon--4{fill:var(--color-error-default);stroke:var(--color-error-default)}.lc-radar-chart__polygon--5{fill:var(--color-info-default);stroke:var(--color-info-default)}.lc-radar-chart__polygon--6{fill:var(--color-primary-700);stroke:var(--color-primary-700)}.lc-radar-chart__polygon--7{fill:var(--color-secondary-700);stroke:var(--color-secondary-700)}.lc-radar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}.lc-radar-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-radar-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-radar-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-radar-chart__legend-dot--0{background-color:var(--color-primary-500)}.lc-radar-chart__legend-dot--1{background-color:var(--color-secondary-500)}.lc-radar-chart__legend-dot--2{background-color:var(--color-success-default)}.lc-radar-chart__legend-dot--3{background-color:var(--color-warning-default)}.lc-radar-chart__legend-dot--4{background-color:var(--color-error-default)}.lc-radar-chart__legend-dot--5{background-color:var(--color-info-default)}.lc-radar-chart__legend-dot--6{background-color:var(--color-primary-700)}.lc-radar-chart__legend-dot--7{background-color:var(--color-secondary-700)}.lc-radar-chart__legend-text{color:var(--color-text-secondary)}\n"] }]
|
|
10167
10232
|
}], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], axes: [{ type: i0.Input, args: [{ isSignal: true, alias: "axes", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rings: [{ type: i0.Input, args: [{ isSignal: true, alias: "rings", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], fillOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillOpacity", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }] } });
|
|
10168
10233
|
|
|
10169
10234
|
/**
|
|
@@ -10233,6 +10298,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
10233
10298
|
* ```
|
|
10234
10299
|
*/
|
|
10235
10300
|
class WaterfallChartComponent {
|
|
10301
|
+
_el = inject(ElementRef);
|
|
10302
|
+
_destroyRef = inject(DestroyRef);
|
|
10303
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
10304
|
+
constructor() {
|
|
10305
|
+
afterNextRender(() => {
|
|
10306
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
10307
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
10308
|
+
});
|
|
10309
|
+
obs.observe(this._el.nativeElement);
|
|
10310
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
10311
|
+
});
|
|
10312
|
+
}
|
|
10236
10313
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
10237
10314
|
width = input(500, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
10238
10315
|
height = input(250, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
@@ -10247,7 +10324,8 @@ class WaterfallChartComponent {
|
|
|
10247
10324
|
PR = 10;
|
|
10248
10325
|
PT = 15;
|
|
10249
10326
|
PB = 30;
|
|
10250
|
-
|
|
10327
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
10328
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
10251
10329
|
computedBars = computed(() => {
|
|
10252
10330
|
const items = this.data();
|
|
10253
10331
|
if (!items.length)
|
|
@@ -10276,7 +10354,7 @@ class WaterfallChartComponent {
|
|
|
10276
10354
|
const minVal = Math.min(0, ...allVals);
|
|
10277
10355
|
const maxVal = Math.max(0, ...allVals);
|
|
10278
10356
|
const range = maxVal - minVal || 1;
|
|
10279
|
-
const w = this.
|
|
10357
|
+
const w = this.effectiveWidth();
|
|
10280
10358
|
const h = this.height();
|
|
10281
10359
|
const plotW = w - this.PL - this.PR;
|
|
10282
10360
|
const plotH = h - this.PT - this.PB;
|
|
@@ -10331,15 +10409,15 @@ class WaterfallChartComponent {
|
|
|
10331
10409
|
vx1: this.PL, vy1: this.PT,
|
|
10332
10410
|
vx2: this.PL, vy2: this.height() - this.PB,
|
|
10333
10411
|
hx1: this.PL, hy1: this.height() - this.PB,
|
|
10334
|
-
hx2: this.
|
|
10412
|
+
hx2: this.effectiveWidth() - this.PR, hy2: this.height() - this.PB,
|
|
10335
10413
|
}), ...(ngDevMode ? [{ debugName: "axisLine" }] : /* istanbul ignore next */ []));
|
|
10336
10414
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: WaterfallChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10337
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: WaterfallChartComponent, isStandalone: true, selector: "lc-waterfall-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showConnectors: { classPropertyName: "showConnectors", publicName: "showConnectors", isSignal: true, isRequired: false, transformFunction: null }, increaseColor: { classPropertyName: "increaseColor", publicName: "increaseColor", isSignal: true, isRequired: false, transformFunction: null }, decreaseColor: { classPropertyName: "decreaseColor", publicName: "decreaseColor", isSignal: true, isRequired: false, transformFunction: null }, totalColor: { classPropertyName: "totalColor", publicName: "totalColor", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg
|
|
10415
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: WaterfallChartComponent, isStandalone: true, selector: "lc-waterfall-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showConnectors: { classPropertyName: "showConnectors", publicName: "showConnectors", isSignal: true, isRequired: false, transformFunction: null }, increaseColor: { classPropertyName: "increaseColor", publicName: "increaseColor", isSignal: true, isRequired: false, transformFunction: null }, decreaseColor: { classPropertyName: "decreaseColor", publicName: "decreaseColor", isSignal: true, isRequired: false, transformFunction: null }, totalColor: { classPropertyName: "totalColor", publicName: "totalColor", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Waterfall chart\" class=\"lc-waterfall-chart\">\n @for (line of computedBars().gridLines; track line.y) {\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-waterfall-chart__grid\" />\n <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-waterfall-chart__grid-label\">{{ line.label }}</text>\n }\n\n <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-waterfall-chart__axis\" />\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-waterfall-chart__axis\" />\n\n @for (conn of computedBars().connectors; track $index) {\n <line [attr.x1]=\"conn.x1\" [attr.y1]=\"conn.y\" [attr.x2]=\"conn.x2\" [attr.y2]=\"conn.y\" class=\"lc-waterfall-chart__connector\" />\n }\n\n @for (bar of computedBars().bars; track bar.label) {\n <rect [attr.x]=\"bar.x\" [attr.y]=\"bar.y\" [attr.width]=\"bar.width\" [attr.height]=\"bar.height\" [attr.fill]=\"bar.color\" rx=\"2\" class=\"lc-waterfall-chart__bar\" />\n @if (showValues()) {\n <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.valueY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__value\">{{ bar.value >= 0 ? '+' : '' }}{{ bar.value }}</text>\n }\n <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.labelY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__label\">{{ bar.label }}</text>\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-waterfall-chart{overflow:visible}.lc-waterfall-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-waterfall-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-waterfall-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-waterfall-chart__connector{stroke:var(--color-border-strong);stroke-width:1;stroke-dasharray:2 2}.lc-waterfall-chart__bar{transition:opacity .15s ease}.lc-waterfall-chart__bar:hover{opacity:.8}.lc-waterfall-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-waterfall-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10338
10416
|
}
|
|
10339
10417
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: WaterfallChartComponent, decorators: [{
|
|
10340
10418
|
type: Component,
|
|
10341
|
-
args: [{ selector: 'lc-waterfall-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg
|
|
10342
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showConnectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showConnectors", required: false }] }], increaseColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "increaseColor", required: false }] }], decreaseColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "decreaseColor", required: false }] }], totalColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalColor", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }] } });
|
|
10419
|
+
args: [{ selector: 'lc-waterfall-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Waterfall chart\" class=\"lc-waterfall-chart\">\n @for (line of computedBars().gridLines; track line.y) {\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-waterfall-chart__grid\" />\n <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-waterfall-chart__grid-label\">{{ line.label }}</text>\n }\n\n <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-waterfall-chart__axis\" />\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-waterfall-chart__axis\" />\n\n @for (conn of computedBars().connectors; track $index) {\n <line [attr.x1]=\"conn.x1\" [attr.y1]=\"conn.y\" [attr.x2]=\"conn.x2\" [attr.y2]=\"conn.y\" class=\"lc-waterfall-chart__connector\" />\n }\n\n @for (bar of computedBars().bars; track bar.label) {\n <rect [attr.x]=\"bar.x\" [attr.y]=\"bar.y\" [attr.width]=\"bar.width\" [attr.height]=\"bar.height\" [attr.fill]=\"bar.color\" rx=\"2\" class=\"lc-waterfall-chart__bar\" />\n @if (showValues()) {\n <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.valueY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__value\">{{ bar.value >= 0 ? '+' : '' }}{{ bar.value }}</text>\n }\n <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.labelY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__label\">{{ bar.label }}</text>\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-waterfall-chart{overflow:visible}.lc-waterfall-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-waterfall-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-waterfall-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-waterfall-chart__connector{stroke:var(--color-border-strong);stroke-width:1;stroke-dasharray:2 2}.lc-waterfall-chart__bar{transition:opacity .15s ease}.lc-waterfall-chart__bar:hover{opacity:.8}.lc-waterfall-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-waterfall-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}\n"] }]
|
|
10420
|
+
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showConnectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showConnectors", required: false }] }], increaseColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "increaseColor", required: false }] }], decreaseColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "decreaseColor", required: false }] }], totalColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalColor", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }] } });
|
|
10343
10421
|
|
|
10344
10422
|
/**
|
|
10345
10423
|
* Calendar component for date-based event display and navigation.
|
|
@@ -10690,11 +10768,11 @@ class GanttChartComponent {
|
|
|
10690
10768
|
return new Date(d.getFullYear(), d.getMonth(), d.getDate());
|
|
10691
10769
|
}
|
|
10692
10770
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: GanttChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10693
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: GanttChartComponent, isStandalone: true, selector: "lc-gantt-chart", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: true, transformFunction: null }, dependencies: { classPropertyName: "dependencies", publicName: "dependencies", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, dayWidth: { classPropertyName: "dayWidth", publicName: "dayWidth", isSignal: true, isRequired: false, transformFunction: null }, showToday: { classPropertyName: "showToday", publicName: "showToday", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { taskClick: "taskClick" }, ngImport: i0, template: "<div class=\"lc-gantt\">\n <div class=\"lc-gantt__container\">\n <!-- Left: Task labels -->\n <div class=\"lc-gantt__labels\" [style.width.px]=\"labelWidth()\">\n <div class=\"lc-gantt__labels-header\">Aufgaben</div>\n @for (bar of bars(); track bar.task.id) {\n <div class=\"lc-gantt__label-row\" [style.height.px]=\"rowHeight()\">\n <span class=\"lc-gantt__label-text\" [title]=\"bar.task.title\">{{ bar.task.title }}</span>\n </div>\n }\n </div>\n\n <!-- Right: Timeline -->\n <div class=\"lc-gantt__timeline-wrapper\">\n <!-- Month headers -->\n <div class=\"lc-gantt__month-row\" [style.width.px]=\"timelineWidth()\">\n @for (mh of monthHeaders(); track mh.label + mh.left) {\n <div class=\"lc-gantt__month-cell\" [style.left.px]=\"mh.left\" [style.width.px]=\"mh.width\">\n {{ mh.label }}\n </div>\n }\n </div>\n\n <!-- Day headers -->\n <div class=\"lc-gantt__day-row\" [style.width.px]=\"timelineWidth()\">\n @for (col of dayColumns(); track col.left) {\n <div\n class=\"lc-gantt__day-cell\"\n [class.lc-gantt__day-cell--weekend]=\"col.isWeekend\"\n [style.left.px]=\"col.left\"\n [style.width.px]=\"dayWidth()\"\n >\n {{ col.label }}\n </div>\n }\n </div>\n\n <!-- Grid + Bars -->\n <div class=\"lc-gantt__grid\" [style.width.px]=\"timelineWidth()\" [style.height.px]=\"gridHeight()\">\n <!-- Weekend columns -->\n @for (col of dayColumns(); track col.left) {\n @if (col.isWeekend) {\n <div class=\"lc-gantt__weekend-bg\" [style.left.px]=\"col.left\" [style.width.px]=\"dayWidth()\" [style.height.px]=\"gridHeight()\"></div>\n }\n }\n\n <!-- Row borders -->\n @for (bar of bars(); track bar.task.id) {\n <div class=\"lc-gantt__row-line\" [style.top.px]=\"bar.top + rowHeight()\"></div>\n }\n\n <!-- Today marker -->\n @if (todayLeft() >= 0) {\n <div class=\"lc-gantt__today\" [style.left.px]=\"todayLeft()\" [style.height.px]=\"gridHeight()\"></div>\n }\n\n <!-- Dependency lines SVG -->\n @if (depLines().length) {\n <svg class=\"lc-gantt__dep-svg\" [attr.width]=\"timelineWidth()\" [attr.height]=\"gridHeight()\">\n <defs>\n <marker id=\"arrowhead\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\">\n <path d=\"M0,0 L8,3 L0,6 Z\" class=\"lc-gantt__arrow\" />\n </marker>\n </defs>\n @for (dep of depLines(); track $index) {\n <path\n [attr.d]=\"'M' + dep.x1 + ',' + dep.y1 + ' C' + (dep.x1 + 20) + ',' + dep.y1 + ' ' + (dep.x2 - 20) + ',' + dep.y2 + ' ' + dep.x2 + ',' + dep.y2\"\n class=\"lc-gantt__dep-line\"\n marker-end=\"url(#arrowhead)\"\n />\n }\n </svg>\n }\n\n <!-- Task bars -->\n @for (bar of bars(); track bar.task.id) {\n <div\n [class]=\"'lc-gantt__bar lc-gantt__bar--' + bar.colorClass\"\n [style.left.px]=\"bar.left\"\n [style.top.px]=\"bar.top + 8\"\n [style.width.px]=\"bar.width\"\n [style.height.px]=\"rowHeight() - 16\"\n [title]=\"bar.task.title + ' (' + bar.progress + '%)'\"\n (click)=\"onTaskClick(bar.task)\"\n >\n @if (bar.progress > 0) {\n <div class=\"lc-gantt__bar-progress\" [style.width.%]=\"bar.progress\"></div>\n }\n <span class=\"lc-gantt__bar-label\">{{ bar.task.title }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".lc-gantt{font-family:var(--typography-font-family, sans-serif);border:1px solid var(--color-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface)}.lc-gantt__container{display:flex;overflow:auto}.lc-gantt__labels{flex-shrink:0;border-right:2px solid var(--color-border);background:var(--color-surface-2);position:sticky;left:0;z-index:3}.lc-gantt__labels-header{height:3.5rem;display:flex;align-items:center;padding:0 .75rem;font-size:.75rem;font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.025em;border-bottom:1px solid var(--color-border)}.lc-gantt__label-row{display:flex;align-items:center;padding:0 .75rem;border-bottom:1px solid var(--color-divider)}.lc-gantt__label-text{font-size:.8125rem;font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__timeline-wrapper{flex:1;overflow:auto}.lc-gantt__month-row{display:flex;position:relative;height:1.5rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__month-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;padding-left:.5rem;font-size:.6875rem;font-weight:600;color:var(--color-text-secondary);border-left:1px solid var(--color-border)}.lc-gantt__day-row{display:flex;position:relative;height:2rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__day-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;font-size:.625rem;color:var(--color-text-secondary);border-left:1px solid var(--color-divider)}.lc-gantt__day-cell--weekend{color:var(--color-text-tertiary);background:color-mix(in srgb,var(--color-border) 30%,transparent)}.lc-gantt__grid{position:relative;min-height:4rem}.lc-gantt__weekend-bg{position:absolute;top:0;background:color-mix(in srgb,var(--color-border) 20%,transparent)}.lc-gantt__row-line{position:absolute;left:0;right:0;height:1px;background:var(--color-divider)}.lc-gantt__today{position:absolute;top:0;width:2px;background:var(--color-error-default);z-index:2;opacity:.7}.lc-gantt__bar{position:absolute;border-radius:var(--border-radius-sm);cursor:pointer;overflow:hidden;display:flex;align-items:center;min-width:.25rem;transition:filter .15s}.lc-gantt__bar:hover{filter:brightness(1.1)}.lc-gantt__bar--primary{background:var(--color-primary-500)}.lc-gantt__bar--secondary{background:var(--color-secondary-500)}.lc-gantt__bar--success{background:var(--color-success-default)}.lc-gantt__bar--warning{background:var(--color-warning-default)}.lc-gantt__bar--error{background:var(--color-error-default)}.lc-gantt__bar--info{background:var(--color-info-default)}.lc-gantt__bar-progress{position:absolute;top:0;left:0;height:100%;background:#00000026;border-radius:.25rem 0 0 .25rem}.lc-gantt__bar-label{position:relative;z-index:1;padding:0 .375rem;font-size:.6875rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__dep-svg{position:absolute;top:0;left:0;pointer-events:none;z-index:1}.lc-gantt__dep-line{fill:none;stroke:var(--color-border-strong);stroke-width:1.5}.lc-gantt__arrow{fill:var(--color-text-tertiary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10771
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: GanttChartComponent, isStandalone: true, selector: "lc-gantt-chart", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: true, transformFunction: null }, dependencies: { classPropertyName: "dependencies", publicName: "dependencies", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, dayWidth: { classPropertyName: "dayWidth", publicName: "dayWidth", isSignal: true, isRequired: false, transformFunction: null }, showToday: { classPropertyName: "showToday", publicName: "showToday", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { taskClick: "taskClick" }, ngImport: i0, template: "<div class=\"lc-gantt\">\n <div class=\"lc-gantt__container\">\n <!-- Left: Task labels -->\n <div class=\"lc-gantt__labels\" [style.width.px]=\"labelWidth()\">\n <div class=\"lc-gantt__labels-header\">Aufgaben</div>\n @for (bar of bars(); track bar.task.id) {\n <div class=\"lc-gantt__label-row\" [style.height.px]=\"rowHeight()\">\n <span class=\"lc-gantt__label-text\" [title]=\"bar.task.title\">{{ bar.task.title }}</span>\n </div>\n }\n </div>\n\n <!-- Right: Timeline -->\n <div class=\"lc-gantt__timeline-wrapper\">\n <!-- Month headers -->\n <div class=\"lc-gantt__month-row\" [style.width.px]=\"timelineWidth()\">\n @for (mh of monthHeaders(); track mh.label + mh.left) {\n <div class=\"lc-gantt__month-cell\" [style.left.px]=\"mh.left\" [style.width.px]=\"mh.width\">\n {{ mh.label }}\n </div>\n }\n </div>\n\n <!-- Day headers -->\n <div class=\"lc-gantt__day-row\" [style.width.px]=\"timelineWidth()\">\n @for (col of dayColumns(); track col.left) {\n <div\n class=\"lc-gantt__day-cell\"\n [class.lc-gantt__day-cell--weekend]=\"col.isWeekend\"\n [style.left.px]=\"col.left\"\n [style.width.px]=\"dayWidth()\"\n >\n {{ col.label }}\n </div>\n }\n </div>\n\n <!-- Grid + Bars -->\n <div class=\"lc-gantt__grid\" [style.width.px]=\"timelineWidth()\" [style.height.px]=\"gridHeight()\">\n <!-- Weekend columns -->\n @for (col of dayColumns(); track col.left) {\n @if (col.isWeekend) {\n <div class=\"lc-gantt__weekend-bg\" [style.left.px]=\"col.left\" [style.width.px]=\"dayWidth()\" [style.height.px]=\"gridHeight()\"></div>\n }\n }\n\n <!-- Row borders -->\n @for (bar of bars(); track bar.task.id) {\n <div class=\"lc-gantt__row-line\" [style.top.px]=\"bar.top + rowHeight()\"></div>\n }\n\n <!-- Today marker -->\n @if (todayLeft() >= 0) {\n <div class=\"lc-gantt__today\" [style.left.px]=\"todayLeft()\" [style.height.px]=\"gridHeight()\"></div>\n }\n\n <!-- Dependency lines SVG -->\n @if (depLines().length) {\n <svg class=\"lc-gantt__dep-svg\" [attr.width]=\"timelineWidth()\" [attr.height]=\"gridHeight()\">\n <defs>\n <marker id=\"arrowhead\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\">\n <path d=\"M0,0 L8,3 L0,6 Z\" class=\"lc-gantt__arrow\" />\n </marker>\n </defs>\n @for (dep of depLines(); track $index) {\n <path\n [attr.d]=\"'M' + dep.x1 + ',' + dep.y1 + ' C' + (dep.x1 + 20) + ',' + dep.y1 + ' ' + (dep.x2 - 20) + ',' + dep.y2 + ' ' + dep.x2 + ',' + dep.y2\"\n class=\"lc-gantt__dep-line\"\n marker-end=\"url(#arrowhead)\"\n />\n }\n </svg>\n }\n\n <!-- Task bars -->\n @for (bar of bars(); track bar.task.id) {\n <div\n [class]=\"'lc-gantt__bar lc-gantt__bar--' + bar.colorClass\"\n [style.left.px]=\"bar.left\"\n [style.top.px]=\"bar.top + 8\"\n [style.width.px]=\"bar.width\"\n [style.height.px]=\"rowHeight() - 16\"\n [title]=\"bar.task.title + ' (' + bar.progress + '%)'\"\n (click)=\"onTaskClick(bar.task)\"\n >\n @if (bar.progress > 0) {\n <div class=\"lc-gantt__bar-progress\" [style.width.%]=\"bar.progress\"></div>\n }\n <span class=\"lc-gantt__bar-label\">{{ bar.task.title }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.lc-gantt{font-family:var(--typography-font-family, sans-serif);border:1px solid var(--color-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface)}.lc-gantt__container{display:flex;overflow:auto}.lc-gantt__labels{flex-shrink:0;border-right:2px solid var(--color-border);background:var(--color-surface-2);position:sticky;left:0;z-index:3}.lc-gantt__labels-header{height:3.5rem;display:flex;align-items:center;padding:0 .75rem;font-size:.75rem;font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.025em;border-bottom:1px solid var(--color-border)}.lc-gantt__label-row{display:flex;align-items:center;padding:0 .75rem;border-bottom:1px solid var(--color-divider)}.lc-gantt__label-text{font-size:.8125rem;font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__timeline-wrapper{flex:1;overflow:auto}.lc-gantt__month-row{display:flex;position:relative;height:1.5rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__month-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;padding-left:.5rem;font-size:.6875rem;font-weight:600;color:var(--color-text-secondary);border-left:1px solid var(--color-border)}.lc-gantt__day-row{display:flex;position:relative;height:2rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__day-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;font-size:.625rem;color:var(--color-text-secondary);border-left:1px solid var(--color-divider)}.lc-gantt__day-cell--weekend{color:var(--color-text-tertiary);background:color-mix(in srgb,var(--color-border) 30%,transparent)}.lc-gantt__grid{position:relative;min-height:4rem}.lc-gantt__weekend-bg{position:absolute;top:0;background:color-mix(in srgb,var(--color-border) 20%,transparent)}.lc-gantt__row-line{position:absolute;left:0;right:0;height:1px;background:var(--color-divider)}.lc-gantt__today{position:absolute;top:0;width:2px;background:var(--color-error-default);z-index:2;opacity:.7}.lc-gantt__bar{position:absolute;border-radius:var(--border-radius-sm);cursor:pointer;overflow:hidden;display:flex;align-items:center;min-width:.25rem;transition:filter .15s}.lc-gantt__bar:hover{filter:brightness(1.1)}.lc-gantt__bar--primary{background:var(--color-primary-500)}.lc-gantt__bar--secondary{background:var(--color-secondary-500)}.lc-gantt__bar--success{background:var(--color-success-default)}.lc-gantt__bar--warning{background:var(--color-warning-default)}.lc-gantt__bar--error{background:var(--color-error-default)}.lc-gantt__bar--info{background:var(--color-info-default)}.lc-gantt__bar-progress{position:absolute;top:0;left:0;height:100%;background:#00000026;border-radius:.25rem 0 0 .25rem}.lc-gantt__bar-label{position:relative;z-index:1;padding:0 .375rem;font-size:.6875rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__dep-svg{position:absolute;top:0;left:0;pointer-events:none;z-index:1}.lc-gantt__dep-line{fill:none;stroke:var(--color-border-strong);stroke-width:1.5}.lc-gantt__arrow{fill:var(--color-text-tertiary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10694
10772
|
}
|
|
10695
10773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: GanttChartComponent, decorators: [{
|
|
10696
10774
|
type: Component,
|
|
10697
|
-
args: [{ selector: 'lc-gantt-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-gantt\">\n <div class=\"lc-gantt__container\">\n <!-- Left: Task labels -->\n <div class=\"lc-gantt__labels\" [style.width.px]=\"labelWidth()\">\n <div class=\"lc-gantt__labels-header\">Aufgaben</div>\n @for (bar of bars(); track bar.task.id) {\n <div class=\"lc-gantt__label-row\" [style.height.px]=\"rowHeight()\">\n <span class=\"lc-gantt__label-text\" [title]=\"bar.task.title\">{{ bar.task.title }}</span>\n </div>\n }\n </div>\n\n <!-- Right: Timeline -->\n <div class=\"lc-gantt__timeline-wrapper\">\n <!-- Month headers -->\n <div class=\"lc-gantt__month-row\" [style.width.px]=\"timelineWidth()\">\n @for (mh of monthHeaders(); track mh.label + mh.left) {\n <div class=\"lc-gantt__month-cell\" [style.left.px]=\"mh.left\" [style.width.px]=\"mh.width\">\n {{ mh.label }}\n </div>\n }\n </div>\n\n <!-- Day headers -->\n <div class=\"lc-gantt__day-row\" [style.width.px]=\"timelineWidth()\">\n @for (col of dayColumns(); track col.left) {\n <div\n class=\"lc-gantt__day-cell\"\n [class.lc-gantt__day-cell--weekend]=\"col.isWeekend\"\n [style.left.px]=\"col.left\"\n [style.width.px]=\"dayWidth()\"\n >\n {{ col.label }}\n </div>\n }\n </div>\n\n <!-- Grid + Bars -->\n <div class=\"lc-gantt__grid\" [style.width.px]=\"timelineWidth()\" [style.height.px]=\"gridHeight()\">\n <!-- Weekend columns -->\n @for (col of dayColumns(); track col.left) {\n @if (col.isWeekend) {\n <div class=\"lc-gantt__weekend-bg\" [style.left.px]=\"col.left\" [style.width.px]=\"dayWidth()\" [style.height.px]=\"gridHeight()\"></div>\n }\n }\n\n <!-- Row borders -->\n @for (bar of bars(); track bar.task.id) {\n <div class=\"lc-gantt__row-line\" [style.top.px]=\"bar.top + rowHeight()\"></div>\n }\n\n <!-- Today marker -->\n @if (todayLeft() >= 0) {\n <div class=\"lc-gantt__today\" [style.left.px]=\"todayLeft()\" [style.height.px]=\"gridHeight()\"></div>\n }\n\n <!-- Dependency lines SVG -->\n @if (depLines().length) {\n <svg class=\"lc-gantt__dep-svg\" [attr.width]=\"timelineWidth()\" [attr.height]=\"gridHeight()\">\n <defs>\n <marker id=\"arrowhead\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\">\n <path d=\"M0,0 L8,3 L0,6 Z\" class=\"lc-gantt__arrow\" />\n </marker>\n </defs>\n @for (dep of depLines(); track $index) {\n <path\n [attr.d]=\"'M' + dep.x1 + ',' + dep.y1 + ' C' + (dep.x1 + 20) + ',' + dep.y1 + ' ' + (dep.x2 - 20) + ',' + dep.y2 + ' ' + dep.x2 + ',' + dep.y2\"\n class=\"lc-gantt__dep-line\"\n marker-end=\"url(#arrowhead)\"\n />\n }\n </svg>\n }\n\n <!-- Task bars -->\n @for (bar of bars(); track bar.task.id) {\n <div\n [class]=\"'lc-gantt__bar lc-gantt__bar--' + bar.colorClass\"\n [style.left.px]=\"bar.left\"\n [style.top.px]=\"bar.top + 8\"\n [style.width.px]=\"bar.width\"\n [style.height.px]=\"rowHeight() - 16\"\n [title]=\"bar.task.title + ' (' + bar.progress + '%)'\"\n (click)=\"onTaskClick(bar.task)\"\n >\n @if (bar.progress > 0) {\n <div class=\"lc-gantt__bar-progress\" [style.width.%]=\"bar.progress\"></div>\n }\n <span class=\"lc-gantt__bar-label\">{{ bar.task.title }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".lc-gantt{font-family:var(--typography-font-family, sans-serif);border:1px solid var(--color-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface)}.lc-gantt__container{display:flex;overflow:auto}.lc-gantt__labels{flex-shrink:0;border-right:2px solid var(--color-border);background:var(--color-surface-2);position:sticky;left:0;z-index:3}.lc-gantt__labels-header{height:3.5rem;display:flex;align-items:center;padding:0 .75rem;font-size:.75rem;font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.025em;border-bottom:1px solid var(--color-border)}.lc-gantt__label-row{display:flex;align-items:center;padding:0 .75rem;border-bottom:1px solid var(--color-divider)}.lc-gantt__label-text{font-size:.8125rem;font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__timeline-wrapper{flex:1;overflow:auto}.lc-gantt__month-row{display:flex;position:relative;height:1.5rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__month-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;padding-left:.5rem;font-size:.6875rem;font-weight:600;color:var(--color-text-secondary);border-left:1px solid var(--color-border)}.lc-gantt__day-row{display:flex;position:relative;height:2rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__day-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;font-size:.625rem;color:var(--color-text-secondary);border-left:1px solid var(--color-divider)}.lc-gantt__day-cell--weekend{color:var(--color-text-tertiary);background:color-mix(in srgb,var(--color-border) 30%,transparent)}.lc-gantt__grid{position:relative;min-height:4rem}.lc-gantt__weekend-bg{position:absolute;top:0;background:color-mix(in srgb,var(--color-border) 20%,transparent)}.lc-gantt__row-line{position:absolute;left:0;right:0;height:1px;background:var(--color-divider)}.lc-gantt__today{position:absolute;top:0;width:2px;background:var(--color-error-default);z-index:2;opacity:.7}.lc-gantt__bar{position:absolute;border-radius:var(--border-radius-sm);cursor:pointer;overflow:hidden;display:flex;align-items:center;min-width:.25rem;transition:filter .15s}.lc-gantt__bar:hover{filter:brightness(1.1)}.lc-gantt__bar--primary{background:var(--color-primary-500)}.lc-gantt__bar--secondary{background:var(--color-secondary-500)}.lc-gantt__bar--success{background:var(--color-success-default)}.lc-gantt__bar--warning{background:var(--color-warning-default)}.lc-gantt__bar--error{background:var(--color-error-default)}.lc-gantt__bar--info{background:var(--color-info-default)}.lc-gantt__bar-progress{position:absolute;top:0;left:0;height:100%;background:#00000026;border-radius:.25rem 0 0 .25rem}.lc-gantt__bar-label{position:relative;z-index:1;padding:0 .375rem;font-size:.6875rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__dep-svg{position:absolute;top:0;left:0;pointer-events:none;z-index:1}.lc-gantt__dep-line{fill:none;stroke:var(--color-border-strong);stroke-width:1.5}.lc-gantt__arrow{fill:var(--color-text-tertiary)}\n"] }]
|
|
10775
|
+
args: [{ selector: 'lc-gantt-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-gantt\">\n <div class=\"lc-gantt__container\">\n <!-- Left: Task labels -->\n <div class=\"lc-gantt__labels\" [style.width.px]=\"labelWidth()\">\n <div class=\"lc-gantt__labels-header\">Aufgaben</div>\n @for (bar of bars(); track bar.task.id) {\n <div class=\"lc-gantt__label-row\" [style.height.px]=\"rowHeight()\">\n <span class=\"lc-gantt__label-text\" [title]=\"bar.task.title\">{{ bar.task.title }}</span>\n </div>\n }\n </div>\n\n <!-- Right: Timeline -->\n <div class=\"lc-gantt__timeline-wrapper\">\n <!-- Month headers -->\n <div class=\"lc-gantt__month-row\" [style.width.px]=\"timelineWidth()\">\n @for (mh of monthHeaders(); track mh.label + mh.left) {\n <div class=\"lc-gantt__month-cell\" [style.left.px]=\"mh.left\" [style.width.px]=\"mh.width\">\n {{ mh.label }}\n </div>\n }\n </div>\n\n <!-- Day headers -->\n <div class=\"lc-gantt__day-row\" [style.width.px]=\"timelineWidth()\">\n @for (col of dayColumns(); track col.left) {\n <div\n class=\"lc-gantt__day-cell\"\n [class.lc-gantt__day-cell--weekend]=\"col.isWeekend\"\n [style.left.px]=\"col.left\"\n [style.width.px]=\"dayWidth()\"\n >\n {{ col.label }}\n </div>\n }\n </div>\n\n <!-- Grid + Bars -->\n <div class=\"lc-gantt__grid\" [style.width.px]=\"timelineWidth()\" [style.height.px]=\"gridHeight()\">\n <!-- Weekend columns -->\n @for (col of dayColumns(); track col.left) {\n @if (col.isWeekend) {\n <div class=\"lc-gantt__weekend-bg\" [style.left.px]=\"col.left\" [style.width.px]=\"dayWidth()\" [style.height.px]=\"gridHeight()\"></div>\n }\n }\n\n <!-- Row borders -->\n @for (bar of bars(); track bar.task.id) {\n <div class=\"lc-gantt__row-line\" [style.top.px]=\"bar.top + rowHeight()\"></div>\n }\n\n <!-- Today marker -->\n @if (todayLeft() >= 0) {\n <div class=\"lc-gantt__today\" [style.left.px]=\"todayLeft()\" [style.height.px]=\"gridHeight()\"></div>\n }\n\n <!-- Dependency lines SVG -->\n @if (depLines().length) {\n <svg class=\"lc-gantt__dep-svg\" [attr.width]=\"timelineWidth()\" [attr.height]=\"gridHeight()\">\n <defs>\n <marker id=\"arrowhead\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\">\n <path d=\"M0,0 L8,3 L0,6 Z\" class=\"lc-gantt__arrow\" />\n </marker>\n </defs>\n @for (dep of depLines(); track $index) {\n <path\n [attr.d]=\"'M' + dep.x1 + ',' + dep.y1 + ' C' + (dep.x1 + 20) + ',' + dep.y1 + ' ' + (dep.x2 - 20) + ',' + dep.y2 + ' ' + dep.x2 + ',' + dep.y2\"\n class=\"lc-gantt__dep-line\"\n marker-end=\"url(#arrowhead)\"\n />\n }\n </svg>\n }\n\n <!-- Task bars -->\n @for (bar of bars(); track bar.task.id) {\n <div\n [class]=\"'lc-gantt__bar lc-gantt__bar--' + bar.colorClass\"\n [style.left.px]=\"bar.left\"\n [style.top.px]=\"bar.top + 8\"\n [style.width.px]=\"bar.width\"\n [style.height.px]=\"rowHeight() - 16\"\n [title]=\"bar.task.title + ' (' + bar.progress + '%)'\"\n (click)=\"onTaskClick(bar.task)\"\n >\n @if (bar.progress > 0) {\n <div class=\"lc-gantt__bar-progress\" [style.width.%]=\"bar.progress\"></div>\n }\n <span class=\"lc-gantt__bar-label\">{{ bar.task.title }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.lc-gantt{font-family:var(--typography-font-family, sans-serif);border:1px solid var(--color-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface)}.lc-gantt__container{display:flex;overflow:auto}.lc-gantt__labels{flex-shrink:0;border-right:2px solid var(--color-border);background:var(--color-surface-2);position:sticky;left:0;z-index:3}.lc-gantt__labels-header{height:3.5rem;display:flex;align-items:center;padding:0 .75rem;font-size:.75rem;font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.025em;border-bottom:1px solid var(--color-border)}.lc-gantt__label-row{display:flex;align-items:center;padding:0 .75rem;border-bottom:1px solid var(--color-divider)}.lc-gantt__label-text{font-size:.8125rem;font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__timeline-wrapper{flex:1;overflow:auto}.lc-gantt__month-row{display:flex;position:relative;height:1.5rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__month-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;padding-left:.5rem;font-size:.6875rem;font-weight:600;color:var(--color-text-secondary);border-left:1px solid var(--color-border)}.lc-gantt__day-row{display:flex;position:relative;height:2rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__day-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;font-size:.625rem;color:var(--color-text-secondary);border-left:1px solid var(--color-divider)}.lc-gantt__day-cell--weekend{color:var(--color-text-tertiary);background:color-mix(in srgb,var(--color-border) 30%,transparent)}.lc-gantt__grid{position:relative;min-height:4rem}.lc-gantt__weekend-bg{position:absolute;top:0;background:color-mix(in srgb,var(--color-border) 20%,transparent)}.lc-gantt__row-line{position:absolute;left:0;right:0;height:1px;background:var(--color-divider)}.lc-gantt__today{position:absolute;top:0;width:2px;background:var(--color-error-default);z-index:2;opacity:.7}.lc-gantt__bar{position:absolute;border-radius:var(--border-radius-sm);cursor:pointer;overflow:hidden;display:flex;align-items:center;min-width:.25rem;transition:filter .15s}.lc-gantt__bar:hover{filter:brightness(1.1)}.lc-gantt__bar--primary{background:var(--color-primary-500)}.lc-gantt__bar--secondary{background:var(--color-secondary-500)}.lc-gantt__bar--success{background:var(--color-success-default)}.lc-gantt__bar--warning{background:var(--color-warning-default)}.lc-gantt__bar--error{background:var(--color-error-default)}.lc-gantt__bar--info{background:var(--color-info-default)}.lc-gantt__bar-progress{position:absolute;top:0;left:0;height:100%;background:#00000026;border-radius:.25rem 0 0 .25rem}.lc-gantt__bar-label{position:relative;z-index:1;padding:0 .375rem;font-size:.6875rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__dep-svg{position:absolute;top:0;left:0;pointer-events:none;z-index:1}.lc-gantt__dep-line{fill:none;stroke:var(--color-border-strong);stroke-width:1.5}.lc-gantt__arrow{fill:var(--color-text-tertiary)}\n"] }]
|
|
10698
10776
|
}], propDecorators: { tasks: [{ type: i0.Input, args: [{ isSignal: true, alias: "tasks", required: true }] }], dependencies: [{ type: i0.Input, args: [{ isSignal: true, alias: "dependencies", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], dayWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayWidth", required: false }] }], showToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToday", required: false }] }], taskClick: [{ type: i0.Output, args: ["taskClick"] }] } });
|
|
10699
10777
|
|
|
10700
10778
|
/**
|
|
@@ -12782,6 +12860,18 @@ const DEFAULT_COLORS = [
|
|
|
12782
12860
|
'var(--color-warning-default)',
|
|
12783
12861
|
];
|
|
12784
12862
|
class FunnelChartComponent {
|
|
12863
|
+
_el = inject(ElementRef);
|
|
12864
|
+
_destroyRef = inject(DestroyRef);
|
|
12865
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
12866
|
+
constructor() {
|
|
12867
|
+
afterNextRender(() => {
|
|
12868
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
12869
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
12870
|
+
});
|
|
12871
|
+
obs.observe(this._el.nativeElement);
|
|
12872
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
12873
|
+
});
|
|
12874
|
+
}
|
|
12785
12875
|
steps = input.required(...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
|
|
12786
12876
|
width = input(400, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
12787
12877
|
height = input(300, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
@@ -12789,13 +12879,14 @@ class FunnelChartComponent {
|
|
|
12789
12879
|
showValues = input(true, ...(ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []));
|
|
12790
12880
|
showPercentage = input(true, ...(ngDevMode ? [{ debugName: "showPercentage" }] : /* istanbul ignore next */ []));
|
|
12791
12881
|
orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
12792
|
-
|
|
12882
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
12883
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
12793
12884
|
renderedSteps = computed(() => {
|
|
12794
12885
|
const steps = this.steps();
|
|
12795
12886
|
if (!steps.length)
|
|
12796
12887
|
return [];
|
|
12797
12888
|
const maxVal = Math.max(...steps.map(s => s.value));
|
|
12798
|
-
const w = this.
|
|
12889
|
+
const w = this.effectiveWidth();
|
|
12799
12890
|
const h = this.height();
|
|
12800
12891
|
const isV = this.orientation() === 'vertical';
|
|
12801
12892
|
const count = steps.length;
|
|
@@ -12861,12 +12952,12 @@ class FunnelChartComponent {
|
|
|
12861
12952
|
}
|
|
12862
12953
|
}, ...(ngDevMode ? [{ debugName: "renderedSteps" }] : /* istanbul ignore next */ []));
|
|
12863
12954
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FunnelChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12864
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FunnelChartComponent, isStandalone: true, selector: "lc-funnel-chart", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-funnel-chart\">\n <svg\n
|
|
12955
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FunnelChartComponent, isStandalone: true, selector: "lc-funnel-chart", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-funnel-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Funnel chart\"\n class=\"lc-funnel-chart__svg\"\n >\n @for (step of renderedSteps(); track step.label) {\n <path\n [attr.d]=\"step.path\"\n [attr.fill]=\"step.color\"\n class=\"lc-funnel-chart__step\"\n />\n\n @if (showLabels()) {\n <text\n [attr.x]=\"step.labelX\"\n [attr.y]=\"step.labelY - 2\"\n text-anchor=\"middle\"\n dominant-baseline=\"auto\"\n class=\"lc-funnel-chart__label\"\n >{{ step.label }}</text>\n }\n\n @if (showValues() || showPercentage()) {\n <text\n [attr.x]=\"step.labelX\"\n [attr.y]=\"step.labelY + 12\"\n text-anchor=\"middle\"\n dominant-baseline=\"auto\"\n class=\"lc-funnel-chart__value\"\n >\n @if (showValues()) { {{ step.value }} }\n @if (showValues() && showPercentage()) { \u00B7 }\n @if (showPercentage()) { {{ step.pct }}% }\n </text>\n }\n }\n </svg>\n</div>\n", styles: [":host{display:block}.lc-funnel-chart{display:flex;flex-direction:column;align-items:center;width:100%}.lc-funnel-chart__svg{overflow:visible}.lc-funnel-chart__step{opacity:.85;transition:opacity .15s}.lc-funnel-chart__step:hover{opacity:1}.lc-funnel-chart__label{font-size:.75rem;font-weight:600;fill:#fff;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.3)}.lc-funnel-chart__value{font-size:.625rem;fill:#ffffffd9;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12865
12956
|
}
|
|
12866
12957
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FunnelChartComponent, decorators: [{
|
|
12867
12958
|
type: Component,
|
|
12868
|
-
args: [{ selector: 'lc-funnel-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-funnel-chart\">\n <svg\n
|
|
12869
|
-
}], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
|
|
12959
|
+
args: [{ selector: 'lc-funnel-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-funnel-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Funnel chart\"\n class=\"lc-funnel-chart__svg\"\n >\n @for (step of renderedSteps(); track step.label) {\n <path\n [attr.d]=\"step.path\"\n [attr.fill]=\"step.color\"\n class=\"lc-funnel-chart__step\"\n />\n\n @if (showLabels()) {\n <text\n [attr.x]=\"step.labelX\"\n [attr.y]=\"step.labelY - 2\"\n text-anchor=\"middle\"\n dominant-baseline=\"auto\"\n class=\"lc-funnel-chart__label\"\n >{{ step.label }}</text>\n }\n\n @if (showValues() || showPercentage()) {\n <text\n [attr.x]=\"step.labelX\"\n [attr.y]=\"step.labelY + 12\"\n text-anchor=\"middle\"\n dominant-baseline=\"auto\"\n class=\"lc-funnel-chart__value\"\n >\n @if (showValues()) { {{ step.value }} }\n @if (showValues() && showPercentage()) { \u00B7 }\n @if (showPercentage()) { {{ step.pct }}% }\n </text>\n }\n }\n </svg>\n</div>\n", styles: [":host{display:block}.lc-funnel-chart{display:flex;flex-direction:column;align-items:center;width:100%}.lc-funnel-chart__svg{overflow:visible}.lc-funnel-chart__step{opacity:.85;transition:opacity .15s}.lc-funnel-chart__step:hover{opacity:1}.lc-funnel-chart__label{font-size:.75rem;font-weight:600;fill:#fff;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.3)}.lc-funnel-chart__value{font-size:.625rem;fill:#ffffffd9;pointer-events:none}\n"] }]
|
|
12960
|
+
}], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
|
|
12870
12961
|
|
|
12871
12962
|
class TagInputComponent {
|
|
12872
12963
|
placeholder = input('Add tag…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|