@eagami/ui 5.51.0 → 5.53.0
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.
- package/README.md +9 -5
- package/fesm2022/eagami-ui.mjs +696 -93
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/eagami-ui.d.ts +201 -11
package/fesm2022/eagami-ui.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
|
-
import { CSP_NONCE, ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, HostBinding, HostListener, Injectable, InjectionToken, Injector, PLATFORM_ID, Renderer2, RendererStyleFlags2, TemplateRef, ViewContainerRef, ViewEncapsulation, afterNextRender, afterRenderEffect, computed, contentChild, effect, forwardRef, inject, input, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
|
|
2
|
+
import { CSP_NONCE, ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, HostBinding, HostListener, Injectable, InjectionToken, Injector, PLATFORM_ID, Renderer2, RendererStyleFlags2, TemplateRef, ViewContainerRef, ViewEncapsulation, afterNextRender, afterRenderEffect, computed, contentChild, effect, forwardRef, inject, input, linkedSignal, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
|
|
3
3
|
import { NgClass, NgComponentOutlet, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
|
|
4
4
|
import { NG_VALUE_ACCESSOR, NgControl, TouchedChangeEvent } from "@angular/forms";
|
|
5
5
|
const EAGAMI_I18N_CONFIG = new InjectionToken("EAGAMI_I18N_CONFIG");
|
|
@@ -3653,6 +3653,7 @@ var AccordionComponent = class AccordionComponent {
|
|
|
3653
3653
|
multi = input(false, ...ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []);
|
|
3654
3654
|
size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
3655
3655
|
headingLevel = input(3, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
|
|
3656
|
+
highlightExpanded = input(false, ...ngDevMode ? [{ debugName: "highlightExpanded" }] : /* istanbul ignore next */ []);
|
|
3656
3657
|
expandedItems = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "expandedItems" }] : /* istanbul ignore next */ []);
|
|
3657
3658
|
registeredItems = signal([], ...ngDevMode ? [{ debugName: "registeredItems" }] : /* istanbul ignore next */ []);
|
|
3658
3659
|
constructor() {
|
|
@@ -3718,6 +3719,13 @@ var AccordionComponent = class AccordionComponent {
|
|
|
3718
3719
|
isSignal: true,
|
|
3719
3720
|
isRequired: false,
|
|
3720
3721
|
transformFunction: null
|
|
3722
|
+
},
|
|
3723
|
+
highlightExpanded: {
|
|
3724
|
+
classPropertyName: "highlightExpanded",
|
|
3725
|
+
publicName: "highlightExpanded",
|
|
3726
|
+
isSignal: true,
|
|
3727
|
+
isRequired: false,
|
|
3728
|
+
transformFunction: null
|
|
3721
3729
|
}
|
|
3722
3730
|
},
|
|
3723
3731
|
ngImport: i0,
|
|
@@ -3766,6 +3774,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3766
3774
|
alias: "headingLevel",
|
|
3767
3775
|
required: false
|
|
3768
3776
|
}]
|
|
3777
|
+
}],
|
|
3778
|
+
highlightExpanded: [{
|
|
3779
|
+
type: i0.Input,
|
|
3780
|
+
args: [{
|
|
3781
|
+
isSignal: true,
|
|
3782
|
+
alias: "highlightExpanded",
|
|
3783
|
+
required: false
|
|
3784
|
+
}]
|
|
3769
3785
|
}]
|
|
3770
3786
|
}
|
|
3771
3787
|
});
|
|
@@ -3918,10 +3934,12 @@ var AccordionItemComponent = class AccordionItemComponent {
|
|
|
3918
3934
|
accordion = inject(AccordionComponent);
|
|
3919
3935
|
value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
3920
3936
|
label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
3937
|
+
icon = input(void 0, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
|
|
3921
3938
|
disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
|
|
3922
3939
|
id = input(uniqueId("ea-accordion-item"), ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
|
|
3923
3940
|
isExpanded = computed(() => this.accordion.isExpanded(this.value()), ...ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []);
|
|
3924
3941
|
headingLevel = computed(() => this.accordion.headingLevel(), ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
|
|
3942
|
+
isHighlighted = computed(() => this.accordion.highlightExpanded() && this.isExpanded(), ...ngDevMode ? [{ debugName: "isHighlighted" }] : /* istanbul ignore next */ []);
|
|
3925
3943
|
size = computed(() => this.accordion.size(), ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
3926
3944
|
ngOnInit() {
|
|
3927
3945
|
this.accordion.registerItem(this);
|
|
@@ -3962,6 +3980,13 @@ var AccordionItemComponent = class AccordionItemComponent {
|
|
|
3962
3980
|
isRequired: true,
|
|
3963
3981
|
transformFunction: null
|
|
3964
3982
|
},
|
|
3983
|
+
icon: {
|
|
3984
|
+
classPropertyName: "icon",
|
|
3985
|
+
publicName: "icon",
|
|
3986
|
+
isSignal: true,
|
|
3987
|
+
isRequired: false,
|
|
3988
|
+
transformFunction: null
|
|
3989
|
+
},
|
|
3965
3990
|
disabled: {
|
|
3966
3991
|
classPropertyName: "disabled",
|
|
3967
3992
|
publicName: "disabled",
|
|
@@ -3978,12 +4003,25 @@ var AccordionItemComponent = class AccordionItemComponent {
|
|
|
3978
4003
|
}
|
|
3979
4004
|
},
|
|
3980
4005
|
ngImport: i0,
|
|
3981
|
-
template: "<div\n class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n [class.ea-accordion-item--expanded]=\"isExpanded()\"\n [class.ea-accordion-item--disabled]=\"disabled()\">\n <div\n class=\"ea-accordion-item__header\"\n role=\"heading\"\n [attr.aria-level]=\"headingLevel()\">\n <button\n class=\"ea-accordion-item__trigger\"\n type=\"button\"\n [id]=\"id() + '-trigger'\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-controls]=\"id() + '-content'\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\">\n <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n <ea-icon-chevron-down\n class=\"ea-accordion-item__chevron\"\n aria-hidden=\"true\" />\n </button>\n </div>\n @if (isExpanded()) {\n <div\n class=\"ea-accordion-item__content\"\n role=\"region\"\n [id]=\"id() + '-content'\"\n [attr.aria-labelledby]=\"id() + '-trigger'\">\n <ng-content />\n </div>\n }\n</div>\n",
|
|
3982
|
-
styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item--2xs{font-size:var(--font-size-2xs)}.ea-accordion-item--xs{font-size:var(--font-size-xs)}.ea-accordion-item--sm{font-size:var(--font-size-sm)}.ea-accordion-item--md{font-size:var(--font-size-md)}.ea-accordion-item--lg{font-size:var(--font-size-lg)}.ea-accordion-item--xl{font-size:var(--font-size-xl)}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:.75em;width:100%;padding:.75em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:start;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-accordion-item__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:default}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item__content{padding:.5em 1em 1em;line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"],
|
|
4006
|
+
template: "<div\n class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n [class.ea-accordion-item--expanded]=\"isExpanded()\"\n [class.ea-accordion-item--highlighted]=\"isHighlighted()\"\n [class.ea-accordion-item--disabled]=\"disabled()\">\n <div\n class=\"ea-accordion-item__header\"\n role=\"heading\"\n [attr.aria-level]=\"headingLevel()\">\n <button\n class=\"ea-accordion-item__trigger\"\n type=\"button\"\n [id]=\"id() + '-trigger'\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-controls]=\"id() + '-content'\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\">\n @if (icon(); as leadingIcon) {\n <span\n class=\"ea-accordion-item__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"leadingIcon\" />\n </span>\n }\n <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n <ea-icon-chevron-down\n class=\"ea-accordion-item__chevron\"\n aria-hidden=\"true\" />\n </button>\n </div>\n @if (isExpanded()) {\n <div\n class=\"ea-accordion-item__content\"\n role=\"region\"\n [id]=\"id() + '-content'\"\n [attr.aria-labelledby]=\"id() + '-trigger'\">\n <ng-content />\n </div>\n }\n</div>\n",
|
|
4007
|
+
styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item--2xs{font-size:var(--font-size-2xs)}.ea-accordion-item--xs{font-size:var(--font-size-xs)}.ea-accordion-item--sm{font-size:var(--font-size-sm)}.ea-accordion-item--md{font-size:var(--font-size-md)}.ea-accordion-item--lg{font-size:var(--font-size-lg)}.ea-accordion-item--xl{font-size:var(--font-size-xl)}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:.75em;width:100%;padding:.75em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:start;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-accordion-item__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:default}.ea-accordion-item__icon{display:inline-flex;flex-shrink:0;color:var(--color-text-secondary)}.ea-accordion-item__icon+.ea-accordion-item__label{flex-grow:1}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item--highlighted .ea-accordion-item__trigger{font-weight:var(--font-weight-semibold);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-accordion-item--highlighted .ea-accordion-item__icon,.ea-accordion-item--highlighted .ea-accordion-item__chevron{color:var(--color-brand-default)}.ea-accordion-item__content{padding:.5em 1em 1em;line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"],
|
|
3983
4008
|
dependencies: [{
|
|
3984
4009
|
kind: "component",
|
|
3985
4010
|
type: ChevronDownIconComponent,
|
|
3986
4011
|
selector: "ea-icon-chevron-down"
|
|
4012
|
+
}, {
|
|
4013
|
+
kind: "directive",
|
|
4014
|
+
type: NgComponentOutlet,
|
|
4015
|
+
selector: "[ngComponentOutlet]",
|
|
4016
|
+
inputs: [
|
|
4017
|
+
"ngComponentOutlet",
|
|
4018
|
+
"ngComponentOutletInputs",
|
|
4019
|
+
"ngComponentOutletInjector",
|
|
4020
|
+
"ngComponentOutletEnvironmentInjector",
|
|
4021
|
+
"ngComponentOutletContent",
|
|
4022
|
+
"ngComponentOutletNgModule"
|
|
4023
|
+
],
|
|
4024
|
+
exportAs: ["ngComponentOutlet"]
|
|
3987
4025
|
}],
|
|
3988
4026
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
3989
4027
|
});
|
|
@@ -3997,10 +4035,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3997
4035
|
type: Component,
|
|
3998
4036
|
args: [{
|
|
3999
4037
|
selector: "ea-accordion-item",
|
|
4000
|
-
imports: [ChevronDownIconComponent],
|
|
4038
|
+
imports: [ChevronDownIconComponent, NgComponentOutlet],
|
|
4001
4039
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
4002
|
-
template: "<div\n class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n [class.ea-accordion-item--expanded]=\"isExpanded()\"\n [class.ea-accordion-item--disabled]=\"disabled()\">\n <div\n class=\"ea-accordion-item__header\"\n role=\"heading\"\n [attr.aria-level]=\"headingLevel()\">\n <button\n class=\"ea-accordion-item__trigger\"\n type=\"button\"\n [id]=\"id() + '-trigger'\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-controls]=\"id() + '-content'\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\">\n <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n <ea-icon-chevron-down\n class=\"ea-accordion-item__chevron\"\n aria-hidden=\"true\" />\n </button>\n </div>\n @if (isExpanded()) {\n <div\n class=\"ea-accordion-item__content\"\n role=\"region\"\n [id]=\"id() + '-content'\"\n [attr.aria-labelledby]=\"id() + '-trigger'\">\n <ng-content />\n </div>\n }\n</div>\n",
|
|
4003
|
-
styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item--2xs{font-size:var(--font-size-2xs)}.ea-accordion-item--xs{font-size:var(--font-size-xs)}.ea-accordion-item--sm{font-size:var(--font-size-sm)}.ea-accordion-item--md{font-size:var(--font-size-md)}.ea-accordion-item--lg{font-size:var(--font-size-lg)}.ea-accordion-item--xl{font-size:var(--font-size-xl)}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:.75em;width:100%;padding:.75em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:start;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-accordion-item__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:default}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item__content{padding:.5em 1em 1em;line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"]
|
|
4040
|
+
template: "<div\n class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n [class.ea-accordion-item--expanded]=\"isExpanded()\"\n [class.ea-accordion-item--highlighted]=\"isHighlighted()\"\n [class.ea-accordion-item--disabled]=\"disabled()\">\n <div\n class=\"ea-accordion-item__header\"\n role=\"heading\"\n [attr.aria-level]=\"headingLevel()\">\n <button\n class=\"ea-accordion-item__trigger\"\n type=\"button\"\n [id]=\"id() + '-trigger'\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-controls]=\"id() + '-content'\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\">\n @if (icon(); as leadingIcon) {\n <span\n class=\"ea-accordion-item__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"leadingIcon\" />\n </span>\n }\n <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n <ea-icon-chevron-down\n class=\"ea-accordion-item__chevron\"\n aria-hidden=\"true\" />\n </button>\n </div>\n @if (isExpanded()) {\n <div\n class=\"ea-accordion-item__content\"\n role=\"region\"\n [id]=\"id() + '-content'\"\n [attr.aria-labelledby]=\"id() + '-trigger'\">\n <ng-content />\n </div>\n }\n</div>\n",
|
|
4041
|
+
styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item--2xs{font-size:var(--font-size-2xs)}.ea-accordion-item--xs{font-size:var(--font-size-xs)}.ea-accordion-item--sm{font-size:var(--font-size-sm)}.ea-accordion-item--md{font-size:var(--font-size-md)}.ea-accordion-item--lg{font-size:var(--font-size-lg)}.ea-accordion-item--xl{font-size:var(--font-size-xl)}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:.75em;width:100%;padding:.75em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:start;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-accordion-item__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:default}.ea-accordion-item__icon{display:inline-flex;flex-shrink:0;color:var(--color-text-secondary)}.ea-accordion-item__icon+.ea-accordion-item__label{flex-grow:1}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item--highlighted .ea-accordion-item__trigger{font-weight:var(--font-weight-semibold);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-accordion-item--highlighted .ea-accordion-item__icon,.ea-accordion-item--highlighted .ea-accordion-item__chevron{color:var(--color-brand-default)}.ea-accordion-item__content{padding:.5em 1em 1em;line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"]
|
|
4004
4042
|
}]
|
|
4005
4043
|
}],
|
|
4006
4044
|
propDecorators: {
|
|
@@ -4020,6 +4058,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
4020
4058
|
required: true
|
|
4021
4059
|
}]
|
|
4022
4060
|
}],
|
|
4061
|
+
icon: [{
|
|
4062
|
+
type: i0.Input,
|
|
4063
|
+
args: [{
|
|
4064
|
+
isSignal: true,
|
|
4065
|
+
alias: "icon",
|
|
4066
|
+
required: false
|
|
4067
|
+
}]
|
|
4068
|
+
}],
|
|
4023
4069
|
disabled: [{
|
|
4024
4070
|
type: i0.Input,
|
|
4025
4071
|
args: [{
|
|
@@ -8520,6 +8566,41 @@ function injectChartFormatter(formatValue) {
|
|
|
8520
8566
|
function clamp$1(value, min, max) {
|
|
8521
8567
|
return Math.min(max, Math.max(min, value));
|
|
8522
8568
|
}
|
|
8569
|
+
const CHART_LABEL_ANGLES = {
|
|
8570
|
+
horizontal: 0,
|
|
8571
|
+
diagonal: 45,
|
|
8572
|
+
vertical: 90
|
|
8573
|
+
};
|
|
8574
|
+
const BREAK_HEIGHT = 2.5;
|
|
8575
|
+
function tickLength(axisPx) {
|
|
8576
|
+
return axisPx * .4 + 2;
|
|
8577
|
+
}
|
|
8578
|
+
function labelRoom(text, angle, axisPx) {
|
|
8579
|
+
if (angle === 0) return estimateTextWidth(text, axisPx) + axisPx;
|
|
8580
|
+
return axisPx * 1.15 / Math.sin(angle * Math.PI / 180);
|
|
8581
|
+
}
|
|
8582
|
+
function labelBand(widest, angle, axisPx, height) {
|
|
8583
|
+
if (!angle) return axisPx * 2.5 + 2 + 2;
|
|
8584
|
+
const radians = angle * Math.PI / 180;
|
|
8585
|
+
return Math.min(height / 2, axisPx * .8 + 2 + 2 + widest * Math.sin(radians) + axisPx * Math.cos(radians) + axisPx * .5);
|
|
8586
|
+
}
|
|
8587
|
+
function labelLine(axisY, angle, axisPx) {
|
|
8588
|
+
return angle ? axisY + tickLength(axisPx) + 2 + axisPx * .4 : axisY + axisPx * 1.5 + 2 + 2;
|
|
8589
|
+
}
|
|
8590
|
+
function axisBreak(x, top, bottom, y, axisPx) {
|
|
8591
|
+
const half = axisPx * .8;
|
|
8592
|
+
const gap = axisPx * .35;
|
|
8593
|
+
return {
|
|
8594
|
+
axis: `M${x},${top}L${x},${y - gap}M${x},${y + gap}L${x},${bottom}`,
|
|
8595
|
+
gap: {
|
|
8596
|
+
x: x - half,
|
|
8597
|
+
y: y - gap,
|
|
8598
|
+
width: 2 * half,
|
|
8599
|
+
height: 2 * gap
|
|
8600
|
+
},
|
|
8601
|
+
slashes: [-gap, gap].map((offset) => `M${x - half},${y + offset + half / 2}L${x + half},${y + offset - half / 2}`).join("")
|
|
8602
|
+
};
|
|
8603
|
+
}
|
|
8523
8604
|
const BAR_GAP = 2;
|
|
8524
8605
|
const BAR_RADIUS = 4;
|
|
8525
8606
|
function barPath(x, y, w, h, side) {
|
|
@@ -8547,6 +8628,8 @@ var BarChartComponent = class BarChartComponent {
|
|
|
8547
8628
|
showGrid = input(true, ...ngDevMode ? [{ debugName: "showGrid" }] : /* istanbul ignore next */ []);
|
|
8548
8629
|
showLegend = input(true, ...ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []);
|
|
8549
8630
|
showValues = input(false, ...ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []);
|
|
8631
|
+
xLabelOrientation = input("horizontal", ...ngDevMode ? [{ debugName: "xLabelOrientation" }] : /* istanbul ignore next */ []);
|
|
8632
|
+
showAxisBreak = input(false, ...ngDevMode ? [{ debugName: "showAxisBreak" }] : /* istanbul ignore next */ []);
|
|
8550
8633
|
height = input(240, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
|
|
8551
8634
|
size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
8552
8635
|
animation = input("grow", ...ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []);
|
|
@@ -8594,6 +8677,7 @@ var BarChartComponent = class BarChartComponent {
|
|
|
8594
8677
|
};
|
|
8595
8678
|
let lo = 0;
|
|
8596
8679
|
let hi = 0;
|
|
8680
|
+
let lowestTop = Infinity;
|
|
8597
8681
|
for (let i = 0; i < count; i++) {
|
|
8598
8682
|
let up = 0;
|
|
8599
8683
|
let down = 0;
|
|
@@ -8609,22 +8693,36 @@ var BarChartComponent = class BarChartComponent {
|
|
|
8609
8693
|
});
|
|
8610
8694
|
hi = Math.max(hi, up);
|
|
8611
8695
|
lo = Math.min(lo, down);
|
|
8696
|
+
if (stacked && up > 0) lowestTop = Math.min(lowestTop, up);
|
|
8612
8697
|
}
|
|
8698
|
+
if (!stacked) {
|
|
8699
|
+
for (const s of series) for (const value of s.data) if (value != null && isFinite(value) && value > 0) lowestTop = Math.min(lowestTop, value);
|
|
8700
|
+
}
|
|
8701
|
+
const breakable = vertical && this.showAxisBreak() && lo >= 0 && isFinite(lowestTop);
|
|
8702
|
+
const scaleLo = breakable ? lowestTop : lo;
|
|
8613
8703
|
const labelTexts = Array.from({ length: count }, (_, i) => this.labels()[i] ?? "");
|
|
8614
8704
|
const valueRoom = this.showValues() ? axisPx * 1.5 : 0;
|
|
8615
|
-
const provisionalTicks = niceScale(
|
|
8705
|
+
const provisionalTicks = niceScale(scaleLo, hi).ticks.map(format);
|
|
8616
8706
|
const widestTick = Math.max(0, ...provisionalTicks.map((t) => estimateTextWidth(t, axisPx)));
|
|
8617
8707
|
let left;
|
|
8618
8708
|
let right;
|
|
8619
8709
|
let top;
|
|
8620
8710
|
let bottom;
|
|
8621
8711
|
let categoryText;
|
|
8712
|
+
let angle = 0;
|
|
8622
8713
|
if (vertical) {
|
|
8623
8714
|
left = widestTick + axisPx;
|
|
8624
8715
|
right = axisPx / 2;
|
|
8625
8716
|
top = axisPx + valueRoom;
|
|
8626
|
-
bottom = axisPx * 2.5;
|
|
8627
8717
|
categoryText = labelTexts;
|
|
8718
|
+
const orientation = this.xLabelOrientation();
|
|
8719
|
+
const band = Math.max(1, width - left - right) / count;
|
|
8720
|
+
angle = orientation === "auto" ? [
|
|
8721
|
+
0,
|
|
8722
|
+
45,
|
|
8723
|
+
90
|
|
8724
|
+
].find((a) => labelTexts.every((t) => labelRoom(t, a, axisPx) <= band)) ?? 90 : CHART_LABEL_ANGLES[orientation];
|
|
8725
|
+
bottom = labelBand(Math.max(0, ...labelTexts.map((t) => estimateTextWidth(t, axisPx))), angle, axisPx, height);
|
|
8628
8726
|
} else {
|
|
8629
8727
|
const maxLabel = width * .3;
|
|
8630
8728
|
categoryText = labelTexts.map((t) => truncate(t, maxLabel, axisPx));
|
|
@@ -8635,8 +8733,21 @@ var BarChartComponent = class BarChartComponent {
|
|
|
8635
8733
|
}
|
|
8636
8734
|
const plotWidth = Math.max(1, width - left - right);
|
|
8637
8735
|
const plotHeight = Math.max(1, height - top - bottom);
|
|
8638
|
-
const scale = niceScale(
|
|
8639
|
-
|
|
8736
|
+
const scale = niceScale(scaleLo, hi, Math.max(2, Math.floor((vertical ? plotHeight : plotWidth) / (vertical ? axisPx * 3 : widestTick + axisPx * 2))));
|
|
8737
|
+
let { min } = scale;
|
|
8738
|
+
const { max } = scale;
|
|
8739
|
+
const scaleTicks = [...scale.ticks];
|
|
8740
|
+
if (breakable && min > 0) {
|
|
8741
|
+
const step = scaleTicks[1] - scaleTicks[0];
|
|
8742
|
+
const clearance = axisPx * 6;
|
|
8743
|
+
const px = (value) => value / (max - min || 1) * plotHeight;
|
|
8744
|
+
for (let steps = 0; steps < 6 && min > 0 && px(lowestTop - min) < clearance; steps++) {
|
|
8745
|
+
min = Number((min - step).toPrecision(12));
|
|
8746
|
+
scaleTicks.unshift(min);
|
|
8747
|
+
}
|
|
8748
|
+
}
|
|
8749
|
+
const axisY = top + plotHeight;
|
|
8750
|
+
const breakY = breakable && min > 0 ? axisY - axisPx * BREAK_HEIGHT : null;
|
|
8640
8751
|
const valuePos = (v) => {
|
|
8641
8752
|
const t = (clamp$1(v, min, max) - min) / (max - min || 1);
|
|
8642
8753
|
return vertical ? top + (1 - t) * plotHeight : left + t * plotWidth;
|
|
@@ -8725,13 +8836,13 @@ var BarChartComponent = class BarChartComponent {
|
|
|
8725
8836
|
});
|
|
8726
8837
|
});
|
|
8727
8838
|
}
|
|
8728
|
-
const ticks =
|
|
8839
|
+
const ticks = scaleTicks.filter((value) => value >= min).map((value) => ({
|
|
8729
8840
|
value,
|
|
8730
8841
|
text: format(value),
|
|
8731
8842
|
pos: valuePos(value)
|
|
8732
|
-
}));
|
|
8733
|
-
const
|
|
8734
|
-
const labelStep = vertical ? Math.max(1, Math.ceil(
|
|
8843
|
+
})).filter((tick) => breakY == null || tick.pos < breakY - axisPx);
|
|
8844
|
+
const widestRoom = Math.max(0, ...categoryText.map((t) => labelRoom(t, angle, axisPx)));
|
|
8845
|
+
const labelStep = vertical ? Math.max(1, Math.ceil(widestRoom / band)) : 1;
|
|
8735
8846
|
const categories = categoryText.map((text, index) => ({
|
|
8736
8847
|
text,
|
|
8737
8848
|
index,
|
|
@@ -8755,7 +8866,12 @@ var BarChartComponent = class BarChartComponent {
|
|
|
8755
8866
|
categories,
|
|
8756
8867
|
bars,
|
|
8757
8868
|
valueLabels,
|
|
8758
|
-
valuePos
|
|
8869
|
+
valuePos,
|
|
8870
|
+
axisY,
|
|
8871
|
+
tickEndY: axisY + tickLength(axisPx),
|
|
8872
|
+
labelAngle: angle,
|
|
8873
|
+
labelY: labelLine(axisY, angle, axisPx),
|
|
8874
|
+
axisBreak: breakY == null ? null : axisBreak(left, top, axisY, breakY, axisPx)
|
|
8759
8875
|
};
|
|
8760
8876
|
}, ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
|
|
8761
8877
|
tooltip = computed(() => {
|
|
@@ -9010,6 +9126,20 @@ var BarChartComponent = class BarChartComponent {
|
|
|
9010
9126
|
isRequired: false,
|
|
9011
9127
|
transformFunction: null
|
|
9012
9128
|
},
|
|
9129
|
+
xLabelOrientation: {
|
|
9130
|
+
classPropertyName: "xLabelOrientation",
|
|
9131
|
+
publicName: "xLabelOrientation",
|
|
9132
|
+
isSignal: true,
|
|
9133
|
+
isRequired: false,
|
|
9134
|
+
transformFunction: null
|
|
9135
|
+
},
|
|
9136
|
+
showAxisBreak: {
|
|
9137
|
+
classPropertyName: "showAxisBreak",
|
|
9138
|
+
publicName: "showAxisBreak",
|
|
9139
|
+
isSignal: true,
|
|
9140
|
+
isRequired: false,
|
|
9141
|
+
transformFunction: null
|
|
9142
|
+
},
|
|
9013
9143
|
height: {
|
|
9014
9144
|
classPropertyName: "height",
|
|
9015
9145
|
publicName: "height",
|
|
@@ -9058,8 +9188,8 @@ var BarChartComponent = class BarChartComponent {
|
|
|
9058
9188
|
activePointChange: "activePointChange"
|
|
9059
9189
|
},
|
|
9060
9190
|
ngImport: i0,
|
|
9061
|
-
template: "<div\n class=\"ea-bar-chart\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n @if (hasData()) {\n <div\n class=\"ea-bar-chart__plot\"\n role=\"group\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n [attr.aria-label]=\"label()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\">\n @for (pass of renderPass(); track pass) {\n <svg\n class=\"ea-bar-chart__svg\"\n aria-hidden=\"true\"\n [attr.width]=\"layout().width\"\n [attr.height]=\"layout().height\"\n [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n [style.--ea-bar-chart-baseline]=\"layout().baseline + 'px'\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerdown)=\"onPointerMove($event)\"\n (pointerleave)=\"onPointerLeave()\"\n (click)=\"onClick()\">\n <rect\n class=\"ea-bar-chart__hit\"\n [attr.x]=\"layout().left\"\n [attr.y]=\"layout().top\"\n [attr.width]=\"layout().plotWidth\"\n [attr.height]=\"layout().plotHeight\" />\n @for (tick of layout().ticks; track tick.value) {\n @if (layout().vertical) {\n @if (showGrid()) {\n <line\n class=\"ea-bar-chart__grid\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"tick.pos\"\n [attr.y2]=\"tick.pos\" />\n }\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"end\"\n dominant-baseline=\"middle\"\n [attr.x]=\"layout().left - layout().axisPx / 2\"\n [attr.y]=\"tick.pos\">\n {{ tick.text }}\n </text>\n } @else {\n @if (showGrid()) {\n <line\n class=\"ea-bar-chart__grid\"\n [attr.x1]=\"tick.pos\"\n [attr.x2]=\"tick.pos\"\n [attr.y1]=\"layout().top\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n }\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"middle\"\n [attr.x]=\"tick.pos\"\n [attr.y]=\"layout().top + layout().plotHeight + layout().axisPx * 1.5\">\n {{ tick.text }}\n </text>\n }\n }\n @for (category of layout().categories; track category.index) {\n @if (layout().vertical) {\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"middle\"\n [attr.
|
|
9062
|
-
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-bar-chart{display:block}.ea-bar-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-bar-chart--2xs{font-size:var(--font-size-2xs)}.ea-bar-chart--xs{font-size:var(--font-size-xs)}.ea-bar-chart--sm{font-size:var(--font-size-sm)}.ea-bar-chart--md{font-size:var(--font-size-md)}.ea-bar-chart--lg{font-size:var(--font-size-lg)}.ea-bar-chart--xl{font-size:var(--font-size-xl)}.ea-bar-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-bar-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-bar-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-bar-chart__plot svg{display:block;overflow:visible}.ea-bar-chart__svg{direction:ltr;touch-action:pan-y}.ea-bar-chart__hit{fill:transparent}.ea-bar-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-bar-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-bar-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-bar-chart__value{font-size:.75em;fill:var(--color-text-secondary);font-variant-numeric:tabular-nums;fill:var(--color-text-primary);pointer-events:none}.ea-bar-chart__bar{fill:var(--ea-chart-color);pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out);transform-box:view-box}.ea-bar-chart__bar--dimmed{opacity:.35}.ea-bar-chart--vertical .ea-bar-chart__bar{transform-origin:0 var(--ea-bar-chart-baseline)}.ea-bar-chart--horizontal .ea-bar-chart__bar{transform-origin:var(--ea-bar-chart-baseline) 0}.ea-bar-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-bar-chart__anchor{fill:transparent}.ea-bar-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-bar-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-value{
|
|
9191
|
+
template: "<div\n class=\"ea-bar-chart\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n @if (hasData()) {\n <div\n class=\"ea-bar-chart__plot\"\n role=\"group\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n [attr.aria-label]=\"label()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\">\n @for (pass of renderPass(); track pass) {\n <svg\n class=\"ea-bar-chart__svg\"\n aria-hidden=\"true\"\n [attr.width]=\"layout().width\"\n [attr.height]=\"layout().height\"\n [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n [style.--ea-bar-chart-baseline]=\"layout().baseline + 'px'\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerdown)=\"onPointerMove($event)\"\n (pointerleave)=\"onPointerLeave()\"\n (click)=\"onClick()\">\n <rect\n class=\"ea-bar-chart__hit\"\n [attr.x]=\"layout().left\"\n [attr.y]=\"layout().top\"\n [attr.width]=\"layout().plotWidth\"\n [attr.height]=\"layout().plotHeight\" />\n @for (tick of layout().ticks; track tick.value) {\n @if (layout().vertical) {\n @if (showGrid()) {\n <line\n class=\"ea-bar-chart__grid\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"tick.pos\"\n [attr.y2]=\"tick.pos\" />\n }\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"end\"\n dominant-baseline=\"middle\"\n [attr.x]=\"layout().left - layout().axisPx / 2\"\n [attr.y]=\"tick.pos\">\n {{ tick.text }}\n </text>\n } @else {\n @if (showGrid()) {\n <line\n class=\"ea-bar-chart__grid\"\n [attr.x1]=\"tick.pos\"\n [attr.x2]=\"tick.pos\"\n [attr.y1]=\"layout().top\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n }\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"middle\"\n [attr.x]=\"tick.pos\"\n [attr.y]=\"layout().top + layout().plotHeight + layout().axisPx * 1.5\">\n {{ tick.text }}\n </text>\n }\n }\n @for (category of layout().categories; track category.index) {\n @if (layout().vertical) {\n <line\n class=\"ea-bar-chart__x-tick\"\n [attr.x1]=\"category.pos\"\n [attr.x2]=\"category.pos\"\n [attr.y1]=\"layout().axisY\"\n [attr.y2]=\"layout().tickEndY\" />\n <text\n class=\"ea-bar-chart__axis\"\n [attr.text-anchor]=\"layout().labelAngle ? 'end' : 'middle'\"\n [attr.dominant-baseline]=\"layout().labelAngle ? 'central' : null\"\n [attr.transform]=\"\n layout().labelAngle\n ? 'rotate(' +\n -layout().labelAngle +\n ' ' +\n category.pos +\n ' ' +\n layout().labelY +\n ')'\n : null\n \"\n [attr.x]=\"category.pos\"\n [attr.y]=\"layout().labelY\">\n {{ category.text }}\n </text>\n } @else {\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"end\"\n dominant-baseline=\"middle\"\n [attr.x]=\"layout().left - layout().axisPx / 2\"\n [attr.y]=\"category.pos\">\n {{ category.text }}\n </text>\n }\n }\n @for (bar of layout().bars; track $index) {\n <path\n class=\"ea-bar-chart__bar\"\n [class.ea-bar-chart__bar--dimmed]=\"isDimmed(bar)\"\n [style.--ea-chart-color]=\"bar.color\"\n [style.--ea-chart-delay]=\"bar.delay + 'ms'\"\n [attr.d]=\"bar.path\" />\n }\n @if (layout().axisBreak; as axisBreak) {\n <path\n class=\"ea-bar-chart__y-axis\"\n [attr.d]=\"axisBreak.axis\" />\n <path\n class=\"ea-bar-chart__axis-break\"\n [attr.d]=\"axisBreak.slashes\" />\n }\n @if (layout().vertical) {\n <line\n class=\"ea-bar-chart__baseline\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"layout().baseline\"\n [attr.y2]=\"layout().baseline\" />\n } @else {\n <line\n class=\"ea-bar-chart__baseline\"\n [attr.x1]=\"layout().baseline\"\n [attr.x2]=\"layout().baseline\"\n [attr.y1]=\"layout().top\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n }\n @for (valueLabel of layout().valueLabels; track valueLabel.key) {\n <text\n class=\"ea-bar-chart__value\"\n [attr.text-anchor]=\"valueLabel.anchor\"\n [attr.dominant-baseline]=\"layout().vertical ? null : 'middle'\"\n [attr.x]=\"valueLabel.x\"\n [attr.y]=\"valueLabel.y\">\n {{ valueLabel.text }}\n </text>\n }\n @for (tip of tooltips(); track tip.key) {\n <rect\n class=\"ea-bar-chart__anchor\"\n width=\"2\"\n height=\"2\"\n [attr.x]=\"tip.x - 1\"\n [attr.y]=\"tip.y - 1\"\n [eaTooltip]=\"tooltipContent\"\n [tooltipOpen]=\"true\"\n [maxWidth]=\"undefined\" />\n }\n </svg>\n }\n <ng-template #tooltipContent>\n @if (tooltip(); as tip) {\n <div class=\"ea-bar-chart__tooltip\">\n <span class=\"ea-bar-chart__tooltip-title\">{{ tip.title }}</span>\n @for (row of tip.rows; track $index) {\n <span\n class=\"ea-bar-chart__tooltip-row\"\n [class.ea-bar-chart__tooltip-row--active]=\"row.active\">\n <span\n class=\"ea-bar-chart__swatch\"\n [style.--ea-chart-color]=\"row.color\">\n </span>\n <span class=\"ea-bar-chart__tooltip-name\">{{ row.name }}</span>\n <span class=\"ea-bar-chart__tooltip-value\">{{ row.value }}</span>\n </span>\n }\n </div>\n }\n </ng-template>\n <!-- Hidden through a block, since a table ignores the 1px size and keeps its full height -->\n <div class=\"ea-bar-chart__table\">\n <table>\n <caption>\n {{ label() }}\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n @for (s of series(); track $index) {\n <th scope=\"col\">{{ s.name }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of labels(); track $index; let i = $index) {\n <tr>\n <th scope=\"row\">{{ row }}</th>\n @for (s of series(); track $index) {\n <td>{{ tableValue(s.data[i]) }}</td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n </div>\n <div\n class=\"ea-bar-chart__live\"\n aria-live=\"polite\">\n {{ announcement() }}\n </div>\n } @else {\n <div\n class=\"ea-bar-chart__empty\"\n role=\"img\"\n [attr.aria-label]=\"label()\"\n [style.height.px]=\"height()\">\n {{ i18n.messages().chart.noData }}\n </div>\n }\n @if (showsLegend()) {\n <ul\n class=\"ea-bar-chart__legend\"\n aria-hidden=\"true\">\n @for (s of series(); track $index; let i = $index) {\n <li class=\"ea-bar-chart__legend-item\">\n <span\n class=\"ea-bar-chart__swatch\"\n [style.--ea-chart-color]=\"seriesColor(i)\">\n </span>\n {{ s.name }}\n </li>\n }\n </ul>\n }\n</div>\n",
|
|
9192
|
+
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-bar-chart{display:block}.ea-bar-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-bar-chart--2xs{font-size:var(--font-size-2xs)}.ea-bar-chart--xs{font-size:var(--font-size-xs)}.ea-bar-chart--sm{font-size:var(--font-size-sm)}.ea-bar-chart--md{font-size:var(--font-size-md)}.ea-bar-chart--lg{font-size:var(--font-size-lg)}.ea-bar-chart--xl{font-size:var(--font-size-xl)}.ea-bar-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-bar-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-bar-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-bar-chart__plot svg{display:block;overflow:visible}.ea-bar-chart__svg{direction:ltr;touch-action:pan-y}.ea-bar-chart__hit{fill:transparent}.ea-bar-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-bar-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-bar-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-bar-chart__x-tick{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-bar-chart__y-axis{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;fill:none}.ea-bar-chart__axis-break{fill:none;stroke:var(--color-border-strong);stroke-width:1.5px;stroke-linecap:round}.ea-bar-chart__value{font-size:.75em;fill:var(--color-text-secondary);font-variant-numeric:tabular-nums;fill:var(--color-text-primary);pointer-events:none}.ea-bar-chart__bar{fill:var(--ea-chart-color);pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out);transform-box:view-box}.ea-bar-chart__bar--dimmed{opacity:.35}.ea-bar-chart--vertical .ea-bar-chart__bar{transform-origin:0 var(--ea-bar-chart-baseline)}.ea-bar-chart--horizontal .ea-bar-chart__bar{transform-origin:var(--ea-bar-chart-baseline) 0}.ea-bar-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-bar-chart__anchor{fill:transparent}.ea-bar-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-bar-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-value{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}.ea-bar-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-bar-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-bar-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-bar-chart__table,.ea-bar-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-bar-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-bar-chart--animate-grow.ea-bar-chart--vertical .ea-bar-chart__bar,.ea-bar-chart--animate-cascade.ea-bar-chart--vertical .ea-bar-chart__bar{animation-name:ea-chart-grow-y}.ea-bar-chart--animate-grow.ea-bar-chart--horizontal .ea-bar-chart__bar,.ea-bar-chart--animate-cascade.ea-bar-chart--horizontal .ea-bar-chart__bar{animation-name:ea-chart-grow-x}.ea-bar-chart--animate-grow .ea-bar-chart__bar,.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-grow .ea-bar-chart__bar,.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation:none}}.ea-bar-chart--animate-grow .ea-bar-chart__value,.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation-name:ea-chart-fade;animation-delay:calc(var(--ea-chart-duration, .6s) * .8);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-grow .ea-bar-chart__value,.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation:none}}.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation-delay:var(--ea-chart-delay, 0ms)}.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation-delay:calc(var(--ea-chart-duration, .6s) * 1.3)}.ea-bar-chart--animate-fade .ea-bar-chart__bar,.ea-bar-chart--animate-fade .ea-bar-chart__value{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-fade .ea-bar-chart__bar,.ea-bar-chart--animate-fade .ea-bar-chart__value{animation:none}}\n"],
|
|
9063
9193
|
dependencies: [{
|
|
9064
9194
|
kind: "directive",
|
|
9065
9195
|
type: NgClass,
|
|
@@ -9095,8 +9225,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
9095
9225
|
imports: [NgClass, TooltipDirective],
|
|
9096
9226
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
9097
9227
|
encapsulation: ViewEncapsulation.None,
|
|
9098
|
-
template: "<div\n class=\"ea-bar-chart\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n @if (hasData()) {\n <div\n class=\"ea-bar-chart__plot\"\n role=\"group\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n [attr.aria-label]=\"label()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\">\n @for (pass of renderPass(); track pass) {\n <svg\n class=\"ea-bar-chart__svg\"\n aria-hidden=\"true\"\n [attr.width]=\"layout().width\"\n [attr.height]=\"layout().height\"\n [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n [style.--ea-bar-chart-baseline]=\"layout().baseline + 'px'\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerdown)=\"onPointerMove($event)\"\n (pointerleave)=\"onPointerLeave()\"\n (click)=\"onClick()\">\n <rect\n class=\"ea-bar-chart__hit\"\n [attr.x]=\"layout().left\"\n [attr.y]=\"layout().top\"\n [attr.width]=\"layout().plotWidth\"\n [attr.height]=\"layout().plotHeight\" />\n @for (tick of layout().ticks; track tick.value) {\n @if (layout().vertical) {\n @if (showGrid()) {\n <line\n class=\"ea-bar-chart__grid\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"tick.pos\"\n [attr.y2]=\"tick.pos\" />\n }\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"end\"\n dominant-baseline=\"middle\"\n [attr.x]=\"layout().left - layout().axisPx / 2\"\n [attr.y]=\"tick.pos\">\n {{ tick.text }}\n </text>\n } @else {\n @if (showGrid()) {\n <line\n class=\"ea-bar-chart__grid\"\n [attr.x1]=\"tick.pos\"\n [attr.x2]=\"tick.pos\"\n [attr.y1]=\"layout().top\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n }\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"middle\"\n [attr.x]=\"tick.pos\"\n [attr.y]=\"layout().top + layout().plotHeight + layout().axisPx * 1.5\">\n {{ tick.text }}\n </text>\n }\n }\n @for (category of layout().categories; track category.index) {\n @if (layout().vertical) {\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"middle\"\n [attr.
|
|
9099
|
-
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-bar-chart{display:block}.ea-bar-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-bar-chart--2xs{font-size:var(--font-size-2xs)}.ea-bar-chart--xs{font-size:var(--font-size-xs)}.ea-bar-chart--sm{font-size:var(--font-size-sm)}.ea-bar-chart--md{font-size:var(--font-size-md)}.ea-bar-chart--lg{font-size:var(--font-size-lg)}.ea-bar-chart--xl{font-size:var(--font-size-xl)}.ea-bar-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-bar-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-bar-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-bar-chart__plot svg{display:block;overflow:visible}.ea-bar-chart__svg{direction:ltr;touch-action:pan-y}.ea-bar-chart__hit{fill:transparent}.ea-bar-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-bar-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-bar-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-bar-chart__value{font-size:.75em;fill:var(--color-text-secondary);font-variant-numeric:tabular-nums;fill:var(--color-text-primary);pointer-events:none}.ea-bar-chart__bar{fill:var(--ea-chart-color);pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out);transform-box:view-box}.ea-bar-chart__bar--dimmed{opacity:.35}.ea-bar-chart--vertical .ea-bar-chart__bar{transform-origin:0 var(--ea-bar-chart-baseline)}.ea-bar-chart--horizontal .ea-bar-chart__bar{transform-origin:var(--ea-bar-chart-baseline) 0}.ea-bar-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-bar-chart__anchor{fill:transparent}.ea-bar-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-bar-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-value{
|
|
9228
|
+
template: "<div\n class=\"ea-bar-chart\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n @if (hasData()) {\n <div\n class=\"ea-bar-chart__plot\"\n role=\"group\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n [attr.aria-label]=\"label()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\">\n @for (pass of renderPass(); track pass) {\n <svg\n class=\"ea-bar-chart__svg\"\n aria-hidden=\"true\"\n [attr.width]=\"layout().width\"\n [attr.height]=\"layout().height\"\n [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n [style.--ea-bar-chart-baseline]=\"layout().baseline + 'px'\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerdown)=\"onPointerMove($event)\"\n (pointerleave)=\"onPointerLeave()\"\n (click)=\"onClick()\">\n <rect\n class=\"ea-bar-chart__hit\"\n [attr.x]=\"layout().left\"\n [attr.y]=\"layout().top\"\n [attr.width]=\"layout().plotWidth\"\n [attr.height]=\"layout().plotHeight\" />\n @for (tick of layout().ticks; track tick.value) {\n @if (layout().vertical) {\n @if (showGrid()) {\n <line\n class=\"ea-bar-chart__grid\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"tick.pos\"\n [attr.y2]=\"tick.pos\" />\n }\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"end\"\n dominant-baseline=\"middle\"\n [attr.x]=\"layout().left - layout().axisPx / 2\"\n [attr.y]=\"tick.pos\">\n {{ tick.text }}\n </text>\n } @else {\n @if (showGrid()) {\n <line\n class=\"ea-bar-chart__grid\"\n [attr.x1]=\"tick.pos\"\n [attr.x2]=\"tick.pos\"\n [attr.y1]=\"layout().top\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n }\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"middle\"\n [attr.x]=\"tick.pos\"\n [attr.y]=\"layout().top + layout().plotHeight + layout().axisPx * 1.5\">\n {{ tick.text }}\n </text>\n }\n }\n @for (category of layout().categories; track category.index) {\n @if (layout().vertical) {\n <line\n class=\"ea-bar-chart__x-tick\"\n [attr.x1]=\"category.pos\"\n [attr.x2]=\"category.pos\"\n [attr.y1]=\"layout().axisY\"\n [attr.y2]=\"layout().tickEndY\" />\n <text\n class=\"ea-bar-chart__axis\"\n [attr.text-anchor]=\"layout().labelAngle ? 'end' : 'middle'\"\n [attr.dominant-baseline]=\"layout().labelAngle ? 'central' : null\"\n [attr.transform]=\"\n layout().labelAngle\n ? 'rotate(' +\n -layout().labelAngle +\n ' ' +\n category.pos +\n ' ' +\n layout().labelY +\n ')'\n : null\n \"\n [attr.x]=\"category.pos\"\n [attr.y]=\"layout().labelY\">\n {{ category.text }}\n </text>\n } @else {\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"end\"\n dominant-baseline=\"middle\"\n [attr.x]=\"layout().left - layout().axisPx / 2\"\n [attr.y]=\"category.pos\">\n {{ category.text }}\n </text>\n }\n }\n @for (bar of layout().bars; track $index) {\n <path\n class=\"ea-bar-chart__bar\"\n [class.ea-bar-chart__bar--dimmed]=\"isDimmed(bar)\"\n [style.--ea-chart-color]=\"bar.color\"\n [style.--ea-chart-delay]=\"bar.delay + 'ms'\"\n [attr.d]=\"bar.path\" />\n }\n @if (layout().axisBreak; as axisBreak) {\n <path\n class=\"ea-bar-chart__y-axis\"\n [attr.d]=\"axisBreak.axis\" />\n <path\n class=\"ea-bar-chart__axis-break\"\n [attr.d]=\"axisBreak.slashes\" />\n }\n @if (layout().vertical) {\n <line\n class=\"ea-bar-chart__baseline\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"layout().baseline\"\n [attr.y2]=\"layout().baseline\" />\n } @else {\n <line\n class=\"ea-bar-chart__baseline\"\n [attr.x1]=\"layout().baseline\"\n [attr.x2]=\"layout().baseline\"\n [attr.y1]=\"layout().top\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n }\n @for (valueLabel of layout().valueLabels; track valueLabel.key) {\n <text\n class=\"ea-bar-chart__value\"\n [attr.text-anchor]=\"valueLabel.anchor\"\n [attr.dominant-baseline]=\"layout().vertical ? null : 'middle'\"\n [attr.x]=\"valueLabel.x\"\n [attr.y]=\"valueLabel.y\">\n {{ valueLabel.text }}\n </text>\n }\n @for (tip of tooltips(); track tip.key) {\n <rect\n class=\"ea-bar-chart__anchor\"\n width=\"2\"\n height=\"2\"\n [attr.x]=\"tip.x - 1\"\n [attr.y]=\"tip.y - 1\"\n [eaTooltip]=\"tooltipContent\"\n [tooltipOpen]=\"true\"\n [maxWidth]=\"undefined\" />\n }\n </svg>\n }\n <ng-template #tooltipContent>\n @if (tooltip(); as tip) {\n <div class=\"ea-bar-chart__tooltip\">\n <span class=\"ea-bar-chart__tooltip-title\">{{ tip.title }}</span>\n @for (row of tip.rows; track $index) {\n <span\n class=\"ea-bar-chart__tooltip-row\"\n [class.ea-bar-chart__tooltip-row--active]=\"row.active\">\n <span\n class=\"ea-bar-chart__swatch\"\n [style.--ea-chart-color]=\"row.color\">\n </span>\n <span class=\"ea-bar-chart__tooltip-name\">{{ row.name }}</span>\n <span class=\"ea-bar-chart__tooltip-value\">{{ row.value }}</span>\n </span>\n }\n </div>\n }\n </ng-template>\n <!-- Hidden through a block, since a table ignores the 1px size and keeps its full height -->\n <div class=\"ea-bar-chart__table\">\n <table>\n <caption>\n {{ label() }}\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n @for (s of series(); track $index) {\n <th scope=\"col\">{{ s.name }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of labels(); track $index; let i = $index) {\n <tr>\n <th scope=\"row\">{{ row }}</th>\n @for (s of series(); track $index) {\n <td>{{ tableValue(s.data[i]) }}</td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n </div>\n <div\n class=\"ea-bar-chart__live\"\n aria-live=\"polite\">\n {{ announcement() }}\n </div>\n } @else {\n <div\n class=\"ea-bar-chart__empty\"\n role=\"img\"\n [attr.aria-label]=\"label()\"\n [style.height.px]=\"height()\">\n {{ i18n.messages().chart.noData }}\n </div>\n }\n @if (showsLegend()) {\n <ul\n class=\"ea-bar-chart__legend\"\n aria-hidden=\"true\">\n @for (s of series(); track $index; let i = $index) {\n <li class=\"ea-bar-chart__legend-item\">\n <span\n class=\"ea-bar-chart__swatch\"\n [style.--ea-chart-color]=\"seriesColor(i)\">\n </span>\n {{ s.name }}\n </li>\n }\n </ul>\n }\n</div>\n",
|
|
9229
|
+
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-bar-chart{display:block}.ea-bar-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-bar-chart--2xs{font-size:var(--font-size-2xs)}.ea-bar-chart--xs{font-size:var(--font-size-xs)}.ea-bar-chart--sm{font-size:var(--font-size-sm)}.ea-bar-chart--md{font-size:var(--font-size-md)}.ea-bar-chart--lg{font-size:var(--font-size-lg)}.ea-bar-chart--xl{font-size:var(--font-size-xl)}.ea-bar-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-bar-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-bar-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-bar-chart__plot svg{display:block;overflow:visible}.ea-bar-chart__svg{direction:ltr;touch-action:pan-y}.ea-bar-chart__hit{fill:transparent}.ea-bar-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-bar-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-bar-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-bar-chart__x-tick{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-bar-chart__y-axis{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;fill:none}.ea-bar-chart__axis-break{fill:none;stroke:var(--color-border-strong);stroke-width:1.5px;stroke-linecap:round}.ea-bar-chart__value{font-size:.75em;fill:var(--color-text-secondary);font-variant-numeric:tabular-nums;fill:var(--color-text-primary);pointer-events:none}.ea-bar-chart__bar{fill:var(--ea-chart-color);pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out);transform-box:view-box}.ea-bar-chart__bar--dimmed{opacity:.35}.ea-bar-chart--vertical .ea-bar-chart__bar{transform-origin:0 var(--ea-bar-chart-baseline)}.ea-bar-chart--horizontal .ea-bar-chart__bar{transform-origin:var(--ea-bar-chart-baseline) 0}.ea-bar-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-bar-chart__anchor{fill:transparent}.ea-bar-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-bar-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-value{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}.ea-bar-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-bar-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-bar-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-bar-chart__table,.ea-bar-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-bar-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-bar-chart--animate-grow.ea-bar-chart--vertical .ea-bar-chart__bar,.ea-bar-chart--animate-cascade.ea-bar-chart--vertical .ea-bar-chart__bar{animation-name:ea-chart-grow-y}.ea-bar-chart--animate-grow.ea-bar-chart--horizontal .ea-bar-chart__bar,.ea-bar-chart--animate-cascade.ea-bar-chart--horizontal .ea-bar-chart__bar{animation-name:ea-chart-grow-x}.ea-bar-chart--animate-grow .ea-bar-chart__bar,.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-grow .ea-bar-chart__bar,.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation:none}}.ea-bar-chart--animate-grow .ea-bar-chart__value,.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation-name:ea-chart-fade;animation-delay:calc(var(--ea-chart-duration, .6s) * .8);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-grow .ea-bar-chart__value,.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation:none}}.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation-delay:var(--ea-chart-delay, 0ms)}.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation-delay:calc(var(--ea-chart-duration, .6s) * 1.3)}.ea-bar-chart--animate-fade .ea-bar-chart__bar,.ea-bar-chart--animate-fade .ea-bar-chart__value{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-fade .ea-bar-chart__bar,.ea-bar-chart--animate-fade .ea-bar-chart__value{animation:none}}\n"]
|
|
9100
9230
|
}]
|
|
9101
9231
|
}],
|
|
9102
9232
|
propDecorators: {
|
|
@@ -9156,6 +9286,22 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
9156
9286
|
required: false
|
|
9157
9287
|
}]
|
|
9158
9288
|
}],
|
|
9289
|
+
xLabelOrientation: [{
|
|
9290
|
+
type: i0.Input,
|
|
9291
|
+
args: [{
|
|
9292
|
+
isSignal: true,
|
|
9293
|
+
alias: "xLabelOrientation",
|
|
9294
|
+
required: false
|
|
9295
|
+
}]
|
|
9296
|
+
}],
|
|
9297
|
+
showAxisBreak: [{
|
|
9298
|
+
type: i0.Input,
|
|
9299
|
+
args: [{
|
|
9300
|
+
isSignal: true,
|
|
9301
|
+
alias: "showAxisBreak",
|
|
9302
|
+
required: false
|
|
9303
|
+
}]
|
|
9304
|
+
}],
|
|
9159
9305
|
height: [{
|
|
9160
9306
|
type: i0.Input,
|
|
9161
9307
|
args: [{
|
|
@@ -19091,6 +19237,14 @@ function roundTo(value, digits) {
|
|
|
19091
19237
|
const factor = 10 ** digits;
|
|
19092
19238
|
return (Math.round(value * factor) / factor).toString();
|
|
19093
19239
|
}
|
|
19240
|
+
const EDGE_INSET = 8;
|
|
19241
|
+
const DRAG_THRESHOLD = 4;
|
|
19242
|
+
const WHEEL_LINE_PX = 16;
|
|
19243
|
+
const ZOOM_RATE = .01;
|
|
19244
|
+
function valueBetween(a, b, position, curve) {
|
|
19245
|
+
if (curve === "step") return position < (a.position + b.position) / 2 ? a.value : b.value;
|
|
19246
|
+
return a.value + (b.value - a.value) * (position - a.position) / (b.position - a.position);
|
|
19247
|
+
}
|
|
19094
19248
|
function linearPath(points) {
|
|
19095
19249
|
return points.map((p, i) => `${i ? "L" : "M"}${p.x},${p.y}`).join("");
|
|
19096
19250
|
}
|
|
@@ -19103,6 +19257,16 @@ function stepPath(points) {
|
|
|
19103
19257
|
return d;
|
|
19104
19258
|
}
|
|
19105
19259
|
function smoothPath(points) {
|
|
19260
|
+
let d = "";
|
|
19261
|
+
let start = 0;
|
|
19262
|
+
for (let i = 1; i <= points.length; i++) if (i === points.length || points[i].x === points[i - 1].x) {
|
|
19263
|
+
const run = monotonePath(points.slice(start, i));
|
|
19264
|
+
d += start === 0 ? run : `L${run.slice(1)}`;
|
|
19265
|
+
start = i;
|
|
19266
|
+
}
|
|
19267
|
+
return d;
|
|
19268
|
+
}
|
|
19269
|
+
function monotonePath(points) {
|
|
19106
19270
|
const n = points.length;
|
|
19107
19271
|
if (n < 3) return linearPath(points);
|
|
19108
19272
|
const slopes = [];
|
|
@@ -19139,10 +19303,14 @@ const CURVES = {
|
|
|
19139
19303
|
smooth: smoothPath,
|
|
19140
19304
|
step: stepPath
|
|
19141
19305
|
};
|
|
19306
|
+
let nextId = 0;
|
|
19142
19307
|
var LineChartComponent = class LineChartComponent {
|
|
19143
19308
|
i18n = inject(EagamiI18nService);
|
|
19144
19309
|
labels = input([], ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
|
|
19145
19310
|
series = input([], ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
|
|
19311
|
+
xValues = input(null, ...ngDevMode ? [{ debugName: "xValues" }] : /* istanbul ignore next */ []);
|
|
19312
|
+
xTicks = input(null, ...ngDevMode ? [{ debugName: "xTicks" }] : /* istanbul ignore next */ []);
|
|
19313
|
+
visibleXSpan = input(null, ...ngDevMode ? [{ debugName: "visibleXSpan" }] : /* istanbul ignore next */ []);
|
|
19146
19314
|
curve = input("linear", ...ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []);
|
|
19147
19315
|
showArea = input(false, ...ngDevMode ? [{ debugName: "showArea" }] : /* istanbul ignore next */ []);
|
|
19148
19316
|
showPoints = input(true, ...ngDevMode ? [{ debugName: "showPoints" }] : /* istanbul ignore next */ []);
|
|
@@ -19150,6 +19318,8 @@ var LineChartComponent = class LineChartComponent {
|
|
|
19150
19318
|
showLegend = input(true, ...ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []);
|
|
19151
19319
|
yMin = input(void 0, ...ngDevMode ? [{ debugName: "yMin" }] : /* istanbul ignore next */ []);
|
|
19152
19320
|
yMax = input(void 0, ...ngDevMode ? [{ debugName: "yMax" }] : /* istanbul ignore next */ []);
|
|
19321
|
+
xLabelOrientation = input("horizontal", ...ngDevMode ? [{ debugName: "xLabelOrientation" }] : /* istanbul ignore next */ []);
|
|
19322
|
+
showAxisBreak = input(false, ...ngDevMode ? [{ debugName: "showAxisBreak" }] : /* istanbul ignore next */ []);
|
|
19153
19323
|
height = input(240, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
|
|
19154
19324
|
size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
19155
19325
|
animation = input("draw", ...ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []);
|
|
@@ -19161,85 +19331,133 @@ var LineChartComponent = class LineChartComponent {
|
|
|
19161
19331
|
});
|
|
19162
19332
|
pointClick = output();
|
|
19163
19333
|
activePointChange = output();
|
|
19334
|
+
visibleRangeChange = output();
|
|
19164
19335
|
viewport = injectChartViewport(this.size);
|
|
19165
19336
|
format = injectChartFormatter(this.formatValue);
|
|
19166
19337
|
active = signal(null, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
|
|
19338
|
+
clipId = `ea-line-chart-clip-${nextId++}`;
|
|
19339
|
+
breakMaskId = `${this.clipId}-break`;
|
|
19340
|
+
panEnd = linkedSignal(() => {
|
|
19341
|
+
this.xValues();
|
|
19342
|
+
this.series();
|
|
19343
|
+
this.visibleXSpan();
|
|
19344
|
+
return null;
|
|
19345
|
+
}, ...ngDevMode ? [{ debugName: "panEnd" }] : /* istanbul ignore next */ []);
|
|
19346
|
+
zoomSpan = linkedSignal(() => this.visibleXSpan(), ...ngDevMode ? [{ debugName: "zoomSpan" }] : /* istanbul ignore next */ []);
|
|
19347
|
+
gestureSpan = null;
|
|
19348
|
+
panning = signal(false, ...ngDevMode ? [{ debugName: "panning" }] : /* istanbul ignore next */ []);
|
|
19349
|
+
drag = null;
|
|
19350
|
+
suppressClick = false;
|
|
19167
19351
|
label = computed(() => this.ariaLabel() || this.i18n.messages().chart.lineChart, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
19168
19352
|
count = computed(() => Math.max(this.labels().length, ...this.series().map((s) => s.data.length), 0), ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
|
|
19169
|
-
hasData = computed(() => this.series().some((s) => s.data.some((v) =>
|
|
19353
|
+
hasData = computed(() => this.series().some((s) => s.data.some((v) => this.isValue(v))), ...ngDevMode ? [{ debugName: "hasData" }] : /* istanbul ignore next */ []);
|
|
19354
|
+
positions = computed(() => {
|
|
19355
|
+
const xValues = this.xValues();
|
|
19356
|
+
return Array.from({ length: this.count() }, (_, i) => xValues ? xValues[i] ?? NaN : i);
|
|
19357
|
+
}, ...ngDevMode ? [{ debugName: "positions" }] : /* istanbul ignore next */ []);
|
|
19358
|
+
domain = computed(() => {
|
|
19359
|
+
const known = [...this.positions(), ...this.xTicks()?.map((t) => t.value) ?? []].filter((p) => isFinite(p));
|
|
19360
|
+
const first = known.length ? Math.min(...known) : 0;
|
|
19361
|
+
const last = known.length ? Math.max(...known) : 0;
|
|
19362
|
+
const span = this.zoomSpan();
|
|
19363
|
+
if (span == null || !(span > 0) || last - first <= span) return {
|
|
19364
|
+
first,
|
|
19365
|
+
last,
|
|
19366
|
+
start: first,
|
|
19367
|
+
end: last,
|
|
19368
|
+
span: null
|
|
19369
|
+
};
|
|
19370
|
+
const end = clamp$1(this.panEnd() ?? last, first + span, last);
|
|
19371
|
+
return {
|
|
19372
|
+
first,
|
|
19373
|
+
last,
|
|
19374
|
+
start: end - span,
|
|
19375
|
+
end,
|
|
19376
|
+
span
|
|
19377
|
+
};
|
|
19378
|
+
}, ...ngDevMode ? [{ debugName: "domain" }] : /* istanbul ignore next */ []);
|
|
19379
|
+
windowed = computed(() => this.domain().span != null, ...ngDevMode ? [{ debugName: "windowed" }] : /* istanbul ignore next */ []);
|
|
19170
19380
|
renderPass = computed(() => {
|
|
19171
19381
|
this.labels();
|
|
19172
19382
|
this.series();
|
|
19383
|
+
this.xValues();
|
|
19173
19384
|
this.animation();
|
|
19174
19385
|
this.animationDuration();
|
|
19175
19386
|
return [{}];
|
|
19176
19387
|
}, ...ngDevMode ? [{ debugName: "renderPass" }] : /* istanbul ignore next */ []);
|
|
19177
19388
|
hostClasses = computed(() => ({
|
|
19178
19389
|
[`ea-line-chart--${this.size()}`]: true,
|
|
19179
|
-
[`ea-line-chart--animate-${this.animation()}`]: true
|
|
19390
|
+
[`ea-line-chart--animate-${this.animation()}`]: true,
|
|
19391
|
+
"ea-line-chart--pannable": this.windowed(),
|
|
19392
|
+
"ea-line-chart--panning": this.panning()
|
|
19180
19393
|
}), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
|
|
19394
|
+
runs = computed(() => {
|
|
19395
|
+
const positions = this.positions();
|
|
19396
|
+
return this.series().map((s) => {
|
|
19397
|
+
const runs = [];
|
|
19398
|
+
let run = [];
|
|
19399
|
+
positions.forEach((position, index) => {
|
|
19400
|
+
const value = s.data[index];
|
|
19401
|
+
if (!this.isValue(value) || !isFinite(position)) {
|
|
19402
|
+
if (run.length) runs.push(run);
|
|
19403
|
+
run = [];
|
|
19404
|
+
return;
|
|
19405
|
+
}
|
|
19406
|
+
run.push({
|
|
19407
|
+
index,
|
|
19408
|
+
position,
|
|
19409
|
+
value
|
|
19410
|
+
});
|
|
19411
|
+
});
|
|
19412
|
+
if (run.length) runs.push(run);
|
|
19413
|
+
return runs;
|
|
19414
|
+
});
|
|
19415
|
+
}, ...ngDevMode ? [{ debugName: "runs" }] : /* istanbul ignore next */ []);
|
|
19416
|
+
visibleValues = computed(() => {
|
|
19417
|
+
const runs = this.runs().flat();
|
|
19418
|
+
const domain = this.domain();
|
|
19419
|
+
if (domain.span == null) return runs.flatMap((run) => run.map((p) => p.value));
|
|
19420
|
+
const curve = this.curve();
|
|
19421
|
+
const values = [];
|
|
19422
|
+
for (const run of runs) run.forEach((point, i) => {
|
|
19423
|
+
if (point.position >= domain.start && point.position <= domain.end) values.push(point.value);
|
|
19424
|
+
const next = run[i + 1];
|
|
19425
|
+
for (const edge of next ? [domain.start, domain.end] : []) if (point.position < edge && next.position > edge) values.push(valueBetween(point, next, edge, curve));
|
|
19426
|
+
});
|
|
19427
|
+
return values;
|
|
19428
|
+
}, ...ngDevMode ? [{ debugName: "visibleValues" }] : /* istanbul ignore next */ []);
|
|
19181
19429
|
layout = computed(() => {
|
|
19182
|
-
const count = this.count();
|
|
19183
19430
|
const width = this.viewport.width();
|
|
19184
19431
|
const height = this.height();
|
|
19185
19432
|
const axisPx = this.viewport.fontSize() * .75;
|
|
19186
|
-
const
|
|
19187
|
-
const
|
|
19433
|
+
const orientation = this.xLabelOrientation();
|
|
19434
|
+
const fixedAngle = orientation === "auto" ? 0 : CHART_LABEL_ANGLES[orientation];
|
|
19435
|
+
const plot = this.plotArea(width, height, axisPx, fixedAngle);
|
|
19436
|
+
const angle = orientation === "auto" ? [
|
|
19437
|
+
0,
|
|
19438
|
+
45,
|
|
19439
|
+
90
|
|
19440
|
+
].find((a) => this.labelsFit(plot.candidates, a, axisPx)) ?? 90 : fixedAngle;
|
|
19441
|
+
const { plotHeight, min, max, tickTexts, left, plotWidth, x, xLabels } = angle === fixedAngle ? plot : this.plotArea(width, height, axisPx, angle);
|
|
19188
19442
|
const top = axisPx;
|
|
19189
|
-
const bottom = axisPx * 2.5;
|
|
19190
|
-
const plotHeight = Math.max(1, height - top - bottom);
|
|
19191
|
-
let lo = this.yMin() ?? Math.min(...values);
|
|
19192
|
-
let hi = this.yMax() ?? Math.max(...values);
|
|
19193
|
-
if (this.showArea() && this.yMin() === void 0) lo = Math.min(lo, 0);
|
|
19194
|
-
if (lo > hi) [lo, hi] = [hi, lo];
|
|
19195
|
-
const scale = niceScale(lo, hi, Math.max(2, Math.floor(plotHeight / (axisPx * 3))));
|
|
19196
|
-
let min = this.yMin() ?? scale.min;
|
|
19197
|
-
let max = this.yMax() ?? scale.max;
|
|
19198
|
-
if (min > max) [min, max] = [max, min];
|
|
19199
|
-
const ticks = scale.ticks.filter((t) => t >= min && t <= max).map((value) => ({
|
|
19200
|
-
value,
|
|
19201
|
-
text: format(value)
|
|
19202
|
-
}));
|
|
19203
|
-
const labelTexts = Array.from({ length: count }, (_, i) => this.labels()[i] ?? "");
|
|
19204
|
-
const widestLabel = Math.max(0, ...labelTexts.map((t) => estimateTextWidth(t, axisPx)));
|
|
19205
|
-
const left = Math.max(0, ...ticks.map((t) => estimateTextWidth(t.text, axisPx))) + axisPx;
|
|
19206
|
-
const right = Math.min(widestLabel / 2, width * .1) + axisPx / 2;
|
|
19207
|
-
const plotWidth = Math.max(1, width - left - right);
|
|
19208
|
-
const spacing = count > 1 ? plotWidth / (count - 1) : plotWidth;
|
|
19209
|
-
const x = (i) => count > 1 ? left + i * spacing : left + plotWidth / 2;
|
|
19210
19443
|
const y = (v) => top + (1 - (clamp$1(v, min, max) - min) / (max - min || 1)) * plotHeight;
|
|
19211
19444
|
const baselineY = y(clamp$1(0, min, max));
|
|
19212
|
-
const
|
|
19213
|
-
const
|
|
19214
|
-
text,
|
|
19215
|
-
index,
|
|
19216
|
-
x: x(index)
|
|
19217
|
-
})).filter((l) => l.index % labelStep === 0);
|
|
19445
|
+
const breakY = this.showAxisBreak() && min > 0 ? top + plotHeight - axisPx * BREAK_HEIGHT : null;
|
|
19446
|
+
const axisY = top + plotHeight;
|
|
19218
19447
|
const curve = CURVES[this.curve()];
|
|
19219
19448
|
const series = this.series().map((s, seriesIndex) => {
|
|
19220
|
-
const
|
|
19221
|
-
|
|
19222
|
-
|
|
19223
|
-
|
|
19224
|
-
|
|
19225
|
-
|
|
19226
|
-
run = [];
|
|
19227
|
-
continue;
|
|
19228
|
-
}
|
|
19229
|
-
run.push({
|
|
19230
|
-
x: x(index),
|
|
19231
|
-
y: y(value),
|
|
19232
|
-
index,
|
|
19233
|
-
value
|
|
19234
|
-
});
|
|
19235
|
-
}
|
|
19236
|
-
if (run.length) segments.push(run);
|
|
19449
|
+
const runs = this.runs()[seriesIndex].map((run) => run.map((p) => ({
|
|
19450
|
+
x: x(p.index),
|
|
19451
|
+
y: y(p.value),
|
|
19452
|
+
index: p.index,
|
|
19453
|
+
value: p.value
|
|
19454
|
+
})));
|
|
19237
19455
|
return {
|
|
19238
19456
|
name: s.name,
|
|
19239
19457
|
color: chartColor(seriesIndex, s.color),
|
|
19240
|
-
paths:
|
|
19241
|
-
areas:
|
|
19242
|
-
points:
|
|
19458
|
+
paths: runs.map(curve),
|
|
19459
|
+
areas: runs.map((seg) => `${curve(seg)}L${seg[seg.length - 1].x},${baselineY}L${seg[0].x},${baselineY}Z`),
|
|
19460
|
+
points: runs.flat()
|
|
19243
19461
|
};
|
|
19244
19462
|
});
|
|
19245
19463
|
return {
|
|
@@ -19250,18 +19468,72 @@ var LineChartComponent = class LineChartComponent {
|
|
|
19250
19468
|
plotWidth,
|
|
19251
19469
|
plotHeight,
|
|
19252
19470
|
baselineY,
|
|
19253
|
-
|
|
19471
|
+
windowed: this.domain().span != null,
|
|
19472
|
+
axisBreak: breakY == null ? null : axisBreak(left, top, axisY, breakY, axisPx),
|
|
19473
|
+
axisY,
|
|
19474
|
+
tickEndY: axisY + tickLength(axisPx),
|
|
19475
|
+
labelAngle: angle,
|
|
19476
|
+
labelY: labelLine(axisY, angle, axisPx),
|
|
19254
19477
|
tickX: left - axisPx / 2,
|
|
19255
|
-
ticks:
|
|
19478
|
+
ticks: tickTexts.map((t) => ({
|
|
19256
19479
|
...t,
|
|
19257
19480
|
y: y(t.value)
|
|
19258
|
-
})),
|
|
19481
|
+
})).filter((t) => breakY == null || t.y < breakY - axisPx),
|
|
19259
19482
|
xLabels,
|
|
19260
19483
|
series,
|
|
19261
19484
|
x,
|
|
19262
19485
|
y
|
|
19263
19486
|
};
|
|
19264
19487
|
}, ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
|
|
19488
|
+
plotArea(width, height, axisPx, angle) {
|
|
19489
|
+
const format = this.format();
|
|
19490
|
+
const domain = this.domain();
|
|
19491
|
+
const windowed = domain.span != null;
|
|
19492
|
+
const top = axisPx;
|
|
19493
|
+
const bottom = labelBand(this.widestXLabel(axisPx), angle, axisPx, height);
|
|
19494
|
+
const plotHeight = Math.max(1, height - top - bottom);
|
|
19495
|
+
const maxTicks = Math.max(2, Math.floor(plotHeight / (axisPx * 3)));
|
|
19496
|
+
const { min, max, ticks } = this.yScale(this.visibleValues(), plotHeight, axisPx, maxTicks);
|
|
19497
|
+
const tickTexts = ticks.map((value) => ({
|
|
19498
|
+
value,
|
|
19499
|
+
text: format(value)
|
|
19500
|
+
}));
|
|
19501
|
+
const gutterTexts = [...tickTexts.map((t) => t.text), ...windowed ? this.yScale(this.runs().flatMap((runs) => runs.flat().map((p) => p.value)), plotHeight, axisPx, maxTicks).ticks.map(format) : []];
|
|
19502
|
+
const left = Math.max(0, ...gutterTexts.map((t) => estimateTextWidth(t, axisPx))) + axisPx;
|
|
19503
|
+
const positions = this.positions();
|
|
19504
|
+
const xAxis = (right) => {
|
|
19505
|
+
const plotWidth = Math.max(1, width - left - right);
|
|
19506
|
+
const at = this.atPosition(domain, left, plotWidth);
|
|
19507
|
+
const x = (i) => at(positions[i]);
|
|
19508
|
+
return {
|
|
19509
|
+
plotWidth,
|
|
19510
|
+
x,
|
|
19511
|
+
xLabels: this.xLabels(domain, at, x, plotWidth, axisPx, angle),
|
|
19512
|
+
candidates: this.xLabelCandidates(domain, at, x)
|
|
19513
|
+
};
|
|
19514
|
+
};
|
|
19515
|
+
const axis = xAxis(axisPx / 2);
|
|
19516
|
+
const xLabels = axis.xLabels.map((label) => {
|
|
19517
|
+
if (angle) return {
|
|
19518
|
+
...label,
|
|
19519
|
+
textX: label.x
|
|
19520
|
+
};
|
|
19521
|
+
const half = estimateTextWidth(label.text, axisPx) / 2;
|
|
19522
|
+
return {
|
|
19523
|
+
...label,
|
|
19524
|
+
textX: clamp$1(label.x, half, width - half)
|
|
19525
|
+
};
|
|
19526
|
+
});
|
|
19527
|
+
return {
|
|
19528
|
+
plotHeight,
|
|
19529
|
+
min,
|
|
19530
|
+
max,
|
|
19531
|
+
tickTexts,
|
|
19532
|
+
left,
|
|
19533
|
+
...axis,
|
|
19534
|
+
xLabels
|
|
19535
|
+
};
|
|
19536
|
+
}
|
|
19265
19537
|
tooltip = computed(() => {
|
|
19266
19538
|
const active = this.active();
|
|
19267
19539
|
if (!active) return null;
|
|
@@ -19273,13 +19545,13 @@ var LineChartComponent = class LineChartComponent {
|
|
|
19273
19545
|
return {
|
|
19274
19546
|
name: s.name,
|
|
19275
19547
|
color: chartColor(i, s.color),
|
|
19276
|
-
value:
|
|
19548
|
+
value: this.tableValue(value),
|
|
19277
19549
|
active: i === active.series
|
|
19278
19550
|
};
|
|
19279
19551
|
});
|
|
19280
19552
|
return {
|
|
19281
19553
|
x,
|
|
19282
|
-
y:
|
|
19554
|
+
y: this.isValue(activeValue) ? layout.y(activeValue) : layout.top,
|
|
19283
19555
|
title: this.labels()[active.index] ?? "",
|
|
19284
19556
|
rows,
|
|
19285
19557
|
key: `${active.series}-${active.index}`
|
|
@@ -19306,20 +19578,44 @@ var LineChartComponent = class LineChartComponent {
|
|
|
19306
19578
|
return !!active && active.series === seriesIndex && active.index === index;
|
|
19307
19579
|
}
|
|
19308
19580
|
tableValue(value) {
|
|
19309
|
-
return
|
|
19581
|
+
return this.isValue(value) ? this.format()(value) : "–";
|
|
19582
|
+
}
|
|
19583
|
+
onPointerDown(event) {
|
|
19584
|
+
this.suppressClick = false;
|
|
19585
|
+
const domain = this.domain();
|
|
19586
|
+
if (domain.span != null && event.button === 0) this.drag = {
|
|
19587
|
+
pointerId: event.pointerId,
|
|
19588
|
+
x: event.clientX,
|
|
19589
|
+
end: domain.end,
|
|
19590
|
+
moved: false
|
|
19591
|
+
};
|
|
19592
|
+
this.onPointerMove(event);
|
|
19310
19593
|
}
|
|
19311
19594
|
onPointerMove(event) {
|
|
19595
|
+
if (this.drag && event.buttons === 0) this.endDrag();
|
|
19596
|
+
const drag = this.drag;
|
|
19597
|
+
if (drag && drag.pointerId === event.pointerId) {
|
|
19598
|
+
const dx = event.clientX - drag.x;
|
|
19599
|
+
if (drag.moved || Math.abs(dx) >= DRAG_THRESHOLD) {
|
|
19600
|
+
if (!drag.moved) {
|
|
19601
|
+
drag.moved = true;
|
|
19602
|
+
this.panning.set(true);
|
|
19603
|
+
this.setActive(null);
|
|
19604
|
+
event.currentTarget.setPointerCapture?.(event.pointerId);
|
|
19605
|
+
}
|
|
19606
|
+
this.panTo(drag.end - dx * this.unitsPerPx());
|
|
19607
|
+
return;
|
|
19608
|
+
}
|
|
19609
|
+
}
|
|
19312
19610
|
const rect = event.currentTarget.getBoundingClientRect();
|
|
19313
|
-
const
|
|
19314
|
-
const count = this.count();
|
|
19315
|
-
const px = event.clientX - rect.left;
|
|
19611
|
+
const index = this.indexAt(event.clientX - rect.left);
|
|
19316
19612
|
const py = event.clientY - rect.top;
|
|
19317
|
-
const
|
|
19613
|
+
const layout = this.layout();
|
|
19318
19614
|
let series = -1;
|
|
19319
19615
|
let nearest = Infinity;
|
|
19320
|
-
this.series().forEach((
|
|
19321
|
-
const value =
|
|
19322
|
-
if (value == null
|
|
19616
|
+
this.series().forEach((_, i) => {
|
|
19617
|
+
const value = this.valueAt(i, index);
|
|
19618
|
+
if (value == null) return;
|
|
19323
19619
|
const distance = Math.abs(layout.y(value) - py);
|
|
19324
19620
|
if (distance < nearest) {
|
|
19325
19621
|
nearest = distance;
|
|
@@ -19331,10 +19627,39 @@ var LineChartComponent = class LineChartComponent {
|
|
|
19331
19627
|
index
|
|
19332
19628
|
});
|
|
19333
19629
|
}
|
|
19630
|
+
onPointerUp(event) {
|
|
19631
|
+
if (this.drag?.pointerId === event.pointerId) {
|
|
19632
|
+
this.suppressClick = this.drag.moved;
|
|
19633
|
+
this.endDrag();
|
|
19634
|
+
}
|
|
19635
|
+
}
|
|
19334
19636
|
onPointerLeave() {
|
|
19637
|
+
if (!this.drag?.moved) this.setActive(null);
|
|
19638
|
+
}
|
|
19639
|
+
onWheel(event) {
|
|
19640
|
+
if (event.ctrlKey && event.deltaY && this.visibleXSpan() != null) {
|
|
19641
|
+
event.preventDefault();
|
|
19642
|
+
const { start, end } = this.domain();
|
|
19643
|
+
this.zoomTo((end - start) * Math.exp(event.deltaY * ZOOM_RATE), {
|
|
19644
|
+
clientX: event.clientX,
|
|
19645
|
+
currentTarget: event.currentTarget
|
|
19646
|
+
});
|
|
19647
|
+
return;
|
|
19648
|
+
}
|
|
19649
|
+
const domain = this.domain();
|
|
19650
|
+
if (domain.span == null) return;
|
|
19651
|
+
const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.shiftKey ? event.deltaY : 0;
|
|
19652
|
+
if (!delta) return;
|
|
19653
|
+
event.preventDefault();
|
|
19654
|
+
const unit = event.deltaMode === WheelEvent.DOM_DELTA_LINE ? WHEEL_LINE_PX : event.deltaMode === WheelEvent.DOM_DELTA_PAGE ? this.layout().plotWidth : 1;
|
|
19335
19655
|
this.setActive(null);
|
|
19656
|
+
this.panTo(domain.end + delta * unit * this.unitsPerPx());
|
|
19336
19657
|
}
|
|
19337
19658
|
onClick() {
|
|
19659
|
+
if (this.suppressClick) {
|
|
19660
|
+
this.suppressClick = false;
|
|
19661
|
+
return;
|
|
19662
|
+
}
|
|
19338
19663
|
const event = this.eventFor(this.active());
|
|
19339
19664
|
if (event) this.pointClick.emit(event);
|
|
19340
19665
|
}
|
|
@@ -19393,14 +19718,212 @@ var LineChartComponent = class LineChartComponent {
|
|
|
19393
19718
|
default: return;
|
|
19394
19719
|
}
|
|
19395
19720
|
event.preventDefault();
|
|
19396
|
-
|
|
19721
|
+
const target = next ?? (event.key === "Escape" ? null : active);
|
|
19722
|
+
if (target) this.reveal(target.index);
|
|
19723
|
+
this.setActive(target);
|
|
19724
|
+
}
|
|
19725
|
+
isValue(value) {
|
|
19726
|
+
return value != null && isFinite(value);
|
|
19727
|
+
}
|
|
19728
|
+
yScale(values, plotHeight, axisPx, maxTicks) {
|
|
19729
|
+
const yMin = this.yMin();
|
|
19730
|
+
const yMax = this.yMax();
|
|
19731
|
+
const dataMin = Math.min(...values);
|
|
19732
|
+
const dataMax = Math.max(...values);
|
|
19733
|
+
let lo = yMin ?? dataMin;
|
|
19734
|
+
let hi = yMax ?? dataMax;
|
|
19735
|
+
const zeroFloor = this.showArea() && yMin === void 0 && !(dataMin < 0);
|
|
19736
|
+
if (zeroFloor) lo = Math.min(lo, 0);
|
|
19737
|
+
if (lo > hi) [lo, hi] = [hi, lo];
|
|
19738
|
+
const clearance = axisPx;
|
|
19739
|
+
const breakClearance = axisPx * 6;
|
|
19740
|
+
const derivedFloor = yMin === void 0 && !zeroFloor && dataMin > 0;
|
|
19741
|
+
if (this.windowed() && isFinite(lo) && isFinite(hi)) {
|
|
19742
|
+
const spread = hi - lo || Math.abs(hi) || 1;
|
|
19743
|
+
const pad = clearance * spread / Math.max(1, plotHeight - 2 * clearance);
|
|
19744
|
+
const breakPad = breakClearance * spread / Math.max(1, plotHeight - clearance - breakClearance);
|
|
19745
|
+
const min = yMin ?? (zeroFloor ? lo : derivedFloor ? Math.max(0, lo - breakPad) : lo - pad);
|
|
19746
|
+
const max = yMax ?? hi + pad;
|
|
19747
|
+
return {
|
|
19748
|
+
min,
|
|
19749
|
+
max,
|
|
19750
|
+
ticks: niceScale(min, max, maxTicks).ticks.filter((t) => t >= min && t <= max)
|
|
19751
|
+
};
|
|
19752
|
+
}
|
|
19753
|
+
const scale = niceScale(lo, hi, maxTicks);
|
|
19754
|
+
const step = scale.ticks[1] - scale.ticks[0];
|
|
19755
|
+
const ticks = [...scale.ticks];
|
|
19756
|
+
let min = yMin ?? scale.min;
|
|
19757
|
+
let max = yMax ?? scale.max;
|
|
19758
|
+
if (min > max) [min, max] = [max, min];
|
|
19759
|
+
const px = (value) => value / (max - min || 1) * plotHeight;
|
|
19760
|
+
const lowTight = () => yMin === void 0 && !zeroFloor && px(dataMin - min) < (derivedFloor && min > 0 ? breakClearance : clearance);
|
|
19761
|
+
const highTight = yMax === void 0 && px(max - dataMax) < clearance;
|
|
19762
|
+
for (let steps = 0; steps < 6 && lowTight() && !(derivedFloor && min <= 0); steps++) {
|
|
19763
|
+
min = Number((min - step).toPrecision(12));
|
|
19764
|
+
ticks.unshift(min);
|
|
19765
|
+
}
|
|
19766
|
+
if (highTight) {
|
|
19767
|
+
max = Number((max + step).toPrecision(12));
|
|
19768
|
+
ticks.push(max);
|
|
19769
|
+
}
|
|
19770
|
+
return {
|
|
19771
|
+
min,
|
|
19772
|
+
max,
|
|
19773
|
+
ticks: ticks.filter((t) => t >= min && t <= max)
|
|
19774
|
+
};
|
|
19775
|
+
}
|
|
19776
|
+
atPosition(domain, left, plotWidth) {
|
|
19777
|
+
const inset = domain.span != null ? EDGE_INSET : 0;
|
|
19778
|
+
const inner = Math.max(1, plotWidth - 2 * inset);
|
|
19779
|
+
const extent = domain.end - domain.start;
|
|
19780
|
+
const scale = inner / extent;
|
|
19781
|
+
return (position) => extent > 0 ? left + inset + (position - domain.start) * scale : left + plotWidth / 2;
|
|
19782
|
+
}
|
|
19783
|
+
xLabelCandidates(domain, at, x) {
|
|
19784
|
+
const inView = (position) => position >= domain.start && position <= domain.end;
|
|
19785
|
+
const ticks = this.xTicks();
|
|
19786
|
+
if (ticks) return ticks.filter((t) => inView(t.value)).map((t) => ({
|
|
19787
|
+
key: t.value,
|
|
19788
|
+
text: t.label,
|
|
19789
|
+
x: at(t.value)
|
|
19790
|
+
}));
|
|
19791
|
+
const positions = this.positions();
|
|
19792
|
+
return positions.map((position, index) => ({
|
|
19793
|
+
key: index,
|
|
19794
|
+
text: this.labels()[index] ?? "",
|
|
19795
|
+
x: x(index)
|
|
19796
|
+
})).filter((l) => inView(positions[l.key]));
|
|
19797
|
+
}
|
|
19798
|
+
labelsFit(labels, angle, axisPx) {
|
|
19799
|
+
return labels.every((label, i) => i === 0 || label.x - labels[i - 1].x >= (labelRoom(label.text, angle, axisPx) + labelRoom(labels[i - 1].text, angle, axisPx)) / 2);
|
|
19800
|
+
}
|
|
19801
|
+
xLabels(domain, at, x, plotWidth, axisPx, angle) {
|
|
19802
|
+
const candidates = this.xLabelCandidates(domain, at, x);
|
|
19803
|
+
if (this.xTicks()) return candidates;
|
|
19804
|
+
const texts = this.positions().map((_, i) => this.labels()[i] ?? "");
|
|
19805
|
+
if (!this.xValues()) {
|
|
19806
|
+
const count = texts.length;
|
|
19807
|
+
const extent = domain.end - domain.start;
|
|
19808
|
+
const spacing = count > 1 ? (plotWidth - (domain.span != null ? 2 * EDGE_INSET : 0)) / extent : plotWidth;
|
|
19809
|
+
const room = Math.max(0, ...texts.map((t) => labelRoom(t, angle, axisPx)));
|
|
19810
|
+
const step = Math.max(1, Math.ceil(room / spacing));
|
|
19811
|
+
return candidates.filter((l) => l.key % step === 0);
|
|
19812
|
+
}
|
|
19813
|
+
const labels = [];
|
|
19814
|
+
let edge = -Infinity;
|
|
19815
|
+
for (const label of candidates) {
|
|
19816
|
+
const half = labelRoom(label.text, angle, axisPx) / 2;
|
|
19817
|
+
if (label.x - half >= edge) {
|
|
19818
|
+
labels.push(label);
|
|
19819
|
+
edge = label.x + half;
|
|
19820
|
+
}
|
|
19821
|
+
}
|
|
19822
|
+
return labels;
|
|
19823
|
+
}
|
|
19824
|
+
widestXLabel(axisPx) {
|
|
19825
|
+
const texts = this.xTicks()?.map((t) => t.label) ?? this.labels();
|
|
19826
|
+
return Math.max(0, ...texts.map((t) => estimateTextWidth(t, axisPx)));
|
|
19827
|
+
}
|
|
19828
|
+
onGestureStart(event) {
|
|
19829
|
+
if (this.visibleXSpan() == null) return;
|
|
19830
|
+
event.preventDefault();
|
|
19831
|
+
const { start, end } = this.domain();
|
|
19832
|
+
this.gestureSpan = end - start;
|
|
19833
|
+
}
|
|
19834
|
+
onGestureChange(event) {
|
|
19835
|
+
if (this.gestureSpan == null || !("scale" in event) || !("clientX" in event)) return;
|
|
19836
|
+
const { scale, clientX } = event;
|
|
19837
|
+
if (typeof scale !== "number" || typeof clientX !== "number" || !(scale > 0)) return;
|
|
19838
|
+
event.preventDefault();
|
|
19839
|
+
this.zoomTo(this.gestureSpan / scale, {
|
|
19840
|
+
clientX,
|
|
19841
|
+
currentTarget: event.currentTarget
|
|
19842
|
+
});
|
|
19843
|
+
}
|
|
19844
|
+
onGestureEnd() {
|
|
19845
|
+
this.gestureSpan = null;
|
|
19846
|
+
}
|
|
19847
|
+
zoomTo(span, { clientX, currentTarget }) {
|
|
19848
|
+
const domain = this.domain();
|
|
19849
|
+
const full = domain.last - domain.first;
|
|
19850
|
+
if (!(full > 0) || !(currentTarget instanceof Element)) return;
|
|
19851
|
+
const next = clamp$1(span, Math.min(this.minSpan(), full), full);
|
|
19852
|
+
const shown = domain.end - domain.start;
|
|
19853
|
+
const inset = domain.span != null ? EDGE_INSET : 0;
|
|
19854
|
+
const { left, plotWidth } = this.layout();
|
|
19855
|
+
const ratio = clamp$1((clientX - currentTarget.getBoundingClientRect().left - left - inset) / Math.max(1, plotWidth - 2 * inset), 0, 1);
|
|
19856
|
+
const end = clamp$1(domain.start + ratio * shown + (1 - ratio) * next, domain.first + next, domain.last);
|
|
19857
|
+
this.setActive(null);
|
|
19858
|
+
this.zoomSpan.set(next);
|
|
19859
|
+
this.panEnd.set(end);
|
|
19860
|
+
this.visibleRangeChange.emit({
|
|
19861
|
+
start: end - next,
|
|
19862
|
+
end
|
|
19863
|
+
});
|
|
19864
|
+
}
|
|
19865
|
+
minSpan() {
|
|
19866
|
+
const known = this.positions().filter((p) => isFinite(p)).sort((a, b) => a - b);
|
|
19867
|
+
const gaps = known.slice(1).map((p, i) => p - known[i]).filter((gap) => gap > 0);
|
|
19868
|
+
return gaps.length ? Math.min(...gaps) * 2 : 1;
|
|
19869
|
+
}
|
|
19870
|
+
unitsPerPx() {
|
|
19871
|
+
return (this.domain().span ?? 0) / Math.max(1, this.layout().plotWidth - 2 * EDGE_INSET);
|
|
19872
|
+
}
|
|
19873
|
+
panTo(end) {
|
|
19874
|
+
const domain = this.domain();
|
|
19875
|
+
if (domain.span == null) return;
|
|
19876
|
+
const next = clamp$1(end, domain.first + domain.span, domain.last);
|
|
19877
|
+
if (next === domain.end) return;
|
|
19878
|
+
this.panEnd.set(next);
|
|
19879
|
+
this.visibleRangeChange.emit({
|
|
19880
|
+
start: next - domain.span,
|
|
19881
|
+
end: next
|
|
19882
|
+
});
|
|
19883
|
+
}
|
|
19884
|
+
endDrag() {
|
|
19885
|
+
this.drag = null;
|
|
19886
|
+
this.panning.set(false);
|
|
19887
|
+
}
|
|
19888
|
+
reveal(index) {
|
|
19889
|
+
const domain = this.domain();
|
|
19890
|
+
const position = this.positions()[index];
|
|
19891
|
+
if (domain.span == null) return;
|
|
19892
|
+
if (position < domain.start) this.panTo(position + domain.span);
|
|
19893
|
+
else if (position > domain.end) this.panTo(position);
|
|
19894
|
+
}
|
|
19895
|
+
indexAt(px) {
|
|
19896
|
+
const layout = this.layout();
|
|
19897
|
+
const count = this.count();
|
|
19898
|
+
const domain = this.domain();
|
|
19899
|
+
if (!this.xValues()) {
|
|
19900
|
+
if (count < 2) return 0;
|
|
19901
|
+
const inset = domain.span != null ? EDGE_INSET : 0;
|
|
19902
|
+
const inner = Math.max(1, layout.plotWidth - 2 * inset);
|
|
19903
|
+
return clamp$1(Math.round(domain.start + (px - layout.left - inset) / inner * (domain.end - domain.start)), Math.ceil(domain.start), Math.floor(domain.end));
|
|
19904
|
+
}
|
|
19905
|
+
const positions = this.positions();
|
|
19906
|
+
let best = -1;
|
|
19907
|
+
let nearest = Infinity;
|
|
19908
|
+
for (let index = 0; index < count; index++) {
|
|
19909
|
+
const position = positions[index];
|
|
19910
|
+
if (position < domain.start || position > domain.end || !this.series().some((_, s) => this.valueAt(s, index) != null)) continue;
|
|
19911
|
+
const distance = Math.abs(layout.x(index) - px);
|
|
19912
|
+
if (distance < nearest) {
|
|
19913
|
+
nearest = distance;
|
|
19914
|
+
best = index;
|
|
19915
|
+
}
|
|
19916
|
+
}
|
|
19917
|
+
return best;
|
|
19397
19918
|
}
|
|
19398
19919
|
valueAt(series, index) {
|
|
19399
19920
|
const value = this.series()[series]?.data[index];
|
|
19400
|
-
return value
|
|
19921
|
+
return this.isValue(value) && isFinite(this.positions()[index]) ? value : null;
|
|
19401
19922
|
}
|
|
19402
19923
|
firstPoint() {
|
|
19924
|
+
const domain = this.domain();
|
|
19403
19925
|
for (let index = 0; index < this.count(); index++) {
|
|
19926
|
+
if (this.positions()[index] < domain.start) continue;
|
|
19404
19927
|
const series = this.series().findIndex((_, s) => this.valueAt(s, index) != null);
|
|
19405
19928
|
if (series !== -1) return {
|
|
19406
19929
|
series,
|
|
@@ -19463,6 +19986,27 @@ var LineChartComponent = class LineChartComponent {
|
|
|
19463
19986
|
isRequired: false,
|
|
19464
19987
|
transformFunction: null
|
|
19465
19988
|
},
|
|
19989
|
+
xValues: {
|
|
19990
|
+
classPropertyName: "xValues",
|
|
19991
|
+
publicName: "xValues",
|
|
19992
|
+
isSignal: true,
|
|
19993
|
+
isRequired: false,
|
|
19994
|
+
transformFunction: null
|
|
19995
|
+
},
|
|
19996
|
+
xTicks: {
|
|
19997
|
+
classPropertyName: "xTicks",
|
|
19998
|
+
publicName: "xTicks",
|
|
19999
|
+
isSignal: true,
|
|
20000
|
+
isRequired: false,
|
|
20001
|
+
transformFunction: null
|
|
20002
|
+
},
|
|
20003
|
+
visibleXSpan: {
|
|
20004
|
+
classPropertyName: "visibleXSpan",
|
|
20005
|
+
publicName: "visibleXSpan",
|
|
20006
|
+
isSignal: true,
|
|
20007
|
+
isRequired: false,
|
|
20008
|
+
transformFunction: null
|
|
20009
|
+
},
|
|
19466
20010
|
curve: {
|
|
19467
20011
|
classPropertyName: "curve",
|
|
19468
20012
|
publicName: "curve",
|
|
@@ -19512,6 +20056,20 @@ var LineChartComponent = class LineChartComponent {
|
|
|
19512
20056
|
isRequired: false,
|
|
19513
20057
|
transformFunction: null
|
|
19514
20058
|
},
|
|
20059
|
+
xLabelOrientation: {
|
|
20060
|
+
classPropertyName: "xLabelOrientation",
|
|
20061
|
+
publicName: "xLabelOrientation",
|
|
20062
|
+
isSignal: true,
|
|
20063
|
+
isRequired: false,
|
|
20064
|
+
transformFunction: null
|
|
20065
|
+
},
|
|
20066
|
+
showAxisBreak: {
|
|
20067
|
+
classPropertyName: "showAxisBreak",
|
|
20068
|
+
publicName: "showAxisBreak",
|
|
20069
|
+
isSignal: true,
|
|
20070
|
+
isRequired: false,
|
|
20071
|
+
transformFunction: null
|
|
20072
|
+
},
|
|
19515
20073
|
height: {
|
|
19516
20074
|
classPropertyName: "height",
|
|
19517
20075
|
publicName: "height",
|
|
@@ -19557,11 +20115,12 @@ var LineChartComponent = class LineChartComponent {
|
|
|
19557
20115
|
},
|
|
19558
20116
|
outputs: {
|
|
19559
20117
|
pointClick: "pointClick",
|
|
19560
|
-
activePointChange: "activePointChange"
|
|
20118
|
+
activePointChange: "activePointChange",
|
|
20119
|
+
visibleRangeChange: "visibleRangeChange"
|
|
19561
20120
|
},
|
|
19562
20121
|
ngImport: i0,
|
|
19563
|
-
template: "<div\n class=\"ea-line-chart\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n @if (hasData()) {\n <div\n class=\"ea-line-chart__plot\"\n role=\"group\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n [attr.aria-label]=\"label()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\">\n @for (pass of renderPass(); track pass) {\n <svg\n class=\"ea-line-chart__svg\"\n aria-hidden=\"true\"\n [attr.width]=\"layout().width\"\n [attr.height]=\"layout().height\"\n [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n [style.--ea-line-chart-baseline]=\"layout().baselineY + 'px'\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerdown)=\"
|
|
19564
|
-
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-line-chart{display:block}.ea-line-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-line-chart--2xs{font-size:var(--font-size-2xs)}.ea-line-chart--xs{font-size:var(--font-size-xs)}.ea-line-chart--sm{font-size:var(--font-size-sm)}.ea-line-chart--md{font-size:var(--font-size-md)}.ea-line-chart--lg{font-size:var(--font-size-lg)}.ea-line-chart--xl{font-size:var(--font-size-xl)}.ea-line-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-line-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-line-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-line-chart__plot svg{display:block;overflow:visible}.ea-line-chart__svg{direction:ltr;touch-action:pan-y}.ea-line-chart__hit{fill:transparent}.ea-line-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-line-chart__crosshair{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-line-chart__series{pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out)}.ea-line-chart__series--dimmed{opacity:.35}.ea-line-chart__area{fill:var(--ea-chart-color);fill-opacity:.12}.ea-line-chart__line{fill:none;stroke:var(--ea-chart-color);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.ea-line-chart__point{fill:var(--ea-chart-color);stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px}.ea-line-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-line-chart__anchor{fill:transparent}.ea-line-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-line-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-value{
|
|
20122
|
+
template: "<div\n class=\"ea-line-chart\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n @if (hasData()) {\n <div\n class=\"ea-line-chart__plot\"\n role=\"group\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n [attr.aria-label]=\"label()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\">\n @for (pass of renderPass(); track pass) {\n <svg\n class=\"ea-line-chart__svg\"\n aria-hidden=\"true\"\n [attr.width]=\"layout().width\"\n [attr.height]=\"layout().height\"\n [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n [style.--ea-line-chart-baseline]=\"layout().baselineY + 'px'\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointerup)=\"onPointerUp($event)\"\n (pointercancel)=\"onPointerUp($event)\"\n (pointerleave)=\"onPointerLeave()\"\n (wheel)=\"onWheel($event)\"\n (gesturestart)=\"onGestureStart($event)\"\n (gesturechange)=\"onGestureChange($event)\"\n (gestureend)=\"onGestureEnd()\"\n (click)=\"onClick()\">\n @if (layout().windowed) {\n <defs>\n <clipPath [attr.id]=\"clipId\">\n <rect\n [attr.x]=\"layout().left\"\n y=\"0\"\n [attr.width]=\"layout().plotWidth\"\n [attr.height]=\"layout().height\" />\n </clipPath>\n </defs>\n }\n <rect\n class=\"ea-line-chart__hit\"\n [attr.x]=\"layout().left\"\n [attr.y]=\"layout().top\"\n [attr.width]=\"layout().plotWidth\"\n [attr.height]=\"layout().plotHeight\" />\n @for (tick of layout().ticks; track tick.value) {\n @if (showGrid()) {\n <line\n class=\"ea-line-chart__grid\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\" />\n }\n <text\n class=\"ea-line-chart__axis ea-line-chart__axis--y\"\n text-anchor=\"end\"\n dominant-baseline=\"middle\"\n [attr.x]=\"layout().tickX\"\n [attr.y]=\"tick.y\">\n {{ tick.text }}\n </text>\n }\n <line\n class=\"ea-line-chart__baseline\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"layout().top + layout().plotHeight\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n @if (layout().axisBreak; as axisBreak) {\n <path\n class=\"ea-line-chart__y-axis\"\n [attr.d]=\"axisBreak.axis\" />\n <path\n class=\"ea-line-chart__axis-break\"\n [attr.d]=\"axisBreak.slashes\" />\n }\n @for (xLabel of layout().xLabels; track xLabel.key) {\n <line\n class=\"ea-line-chart__x-tick\"\n [attr.x1]=\"xLabel.x\"\n [attr.x2]=\"xLabel.x\"\n [attr.y1]=\"layout().axisY\"\n [attr.y2]=\"layout().tickEndY\" />\n <text\n class=\"ea-line-chart__axis ea-line-chart__axis--x\"\n [attr.text-anchor]=\"layout().labelAngle ? 'end' : 'middle'\"\n [attr.dominant-baseline]=\"layout().labelAngle ? 'central' : null\"\n [attr.transform]=\"\n layout().labelAngle\n ? 'rotate(' +\n -layout().labelAngle +\n ' ' +\n xLabel.x +\n ' ' +\n layout().labelY +\n ')'\n : null\n \"\n [attr.x]=\"xLabel.textX\"\n [attr.y]=\"layout().labelY\">\n {{ xLabel.text }}\n </text>\n }\n @if (layout().axisBreak; as axisBreak) {\n <!-- Keeps the break's gap open under a crosshair drawn along the y-axis -->\n <mask\n maskUnits=\"userSpaceOnUse\"\n [attr.id]=\"breakMaskId\">\n <rect\n fill=\"white\"\n x=\"0\"\n y=\"0\"\n [attr.width]=\"layout().width\"\n [attr.height]=\"layout().height\" />\n <rect\n fill=\"black\"\n [attr.x]=\"axisBreak.gap.x\"\n [attr.y]=\"axisBreak.gap.y\"\n [attr.width]=\"axisBreak.gap.width\"\n [attr.height]=\"axisBreak.gap.height\" />\n </mask>\n }\n @if (tooltip(); as tip) {\n <line\n class=\"ea-line-chart__crosshair\"\n [attr.mask]=\"layout().axisBreak ? 'url(#' + breakMaskId + ')' : null\"\n [attr.x1]=\"tip.x\"\n [attr.x2]=\"tip.x\"\n [attr.y1]=\"layout().top\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n }\n <g [attr.clip-path]=\"layout().windowed ? 'url(#' + clipId + ')' : null\">\n <g class=\"ea-line-chart__lines\">\n @for (line of layout().series; track $index; let s = $index) {\n <g\n class=\"ea-line-chart__series\"\n [class.ea-line-chart__series--dimmed]=\"isDimmed(s)\"\n [style.--ea-chart-color]=\"line.color\">\n @if (showArea()) {\n @for (area of line.areas; track $index) {\n <path\n class=\"ea-line-chart__area\"\n [attr.d]=\"area\" />\n }\n }\n @for (path of line.paths; track $index) {\n <path\n class=\"ea-line-chart__line\"\n pathLength=\"1\"\n [attr.d]=\"path\" />\n }\n @for (point of line.points; track point.index) {\n @if (showPoints() || isActivePoint(s, point.index)) {\n <circle\n class=\"ea-line-chart__point\"\n [class.ea-line-chart__point--active]=\"\n isActivePoint(s, point.index)\n \"\n [attr.cx]=\"point.x\"\n [attr.cy]=\"point.y\"\n [attr.r]=\"isActivePoint(s, point.index) ? 6 : 4\" />\n }\n }\n </g>\n }\n </g>\n </g>\n @for (tip of tooltips(); track tip.key) {\n <rect\n class=\"ea-line-chart__anchor\"\n width=\"12\"\n height=\"12\"\n [attr.x]=\"tip.x - 6\"\n [attr.y]=\"tip.y - 6\"\n [eaTooltip]=\"tooltipContent\"\n [tooltipOpen]=\"true\"\n [maxWidth]=\"undefined\" />\n }\n </svg>\n }\n <ng-template #tooltipContent>\n @if (tooltip(); as tip) {\n <div class=\"ea-line-chart__tooltip\">\n <span class=\"ea-line-chart__tooltip-title\">{{ tip.title }}</span>\n @for (row of tip.rows; track $index) {\n <span\n class=\"ea-line-chart__tooltip-row\"\n [class.ea-line-chart__tooltip-row--active]=\"row.active\">\n <span\n class=\"ea-line-chart__swatch\"\n [style.--ea-chart-color]=\"row.color\">\n </span>\n <span class=\"ea-line-chart__tooltip-name\">{{ row.name }}</span>\n <span class=\"ea-line-chart__tooltip-value\">{{ row.value }}</span>\n </span>\n }\n </div>\n }\n </ng-template>\n <!-- Hidden through a block, since a table ignores the 1px size and keeps its full height -->\n <div class=\"ea-line-chart__table\">\n <table>\n <caption>\n {{ label() }}\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n\n @for (s of series(); track $index) {\n <th scope=\"col\">{{ s.name }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of labels(); track $index; let i = $index) {\n <tr>\n <th scope=\"row\">{{ row }}</th>\n\n @for (s of series(); track $index) {\n <td>{{ tableValue(s.data[i]) }}</td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n </div>\n <div\n class=\"ea-line-chart__live\"\n aria-live=\"polite\">\n {{ announcement() }}\n </div>\n } @else {\n <div\n class=\"ea-line-chart__empty\"\n role=\"img\"\n [attr.aria-label]=\"label()\"\n [style.height.px]=\"height()\">\n {{ i18n.messages().chart.noData }}\n </div>\n }\n @if (showsLegend()) {\n <ul\n class=\"ea-line-chart__legend\"\n aria-hidden=\"true\">\n @for (s of series(); track $index; let i = $index) {\n <li class=\"ea-line-chart__legend-item\">\n <span\n class=\"ea-line-chart__legend-line\"\n [style.--ea-chart-color]=\"seriesColor(i)\">\n </span>\n {{ s.name }}\n </li>\n }\n </ul>\n }\n</div>\n",
|
|
20123
|
+
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-line-chart{display:block}.ea-line-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-line-chart--2xs{font-size:var(--font-size-2xs)}.ea-line-chart--xs{font-size:var(--font-size-xs)}.ea-line-chart--sm{font-size:var(--font-size-sm)}.ea-line-chart--md{font-size:var(--font-size-md)}.ea-line-chart--lg{font-size:var(--font-size-lg)}.ea-line-chart--xl{font-size:var(--font-size-xl)}.ea-line-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-line-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-line-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-line-chart__plot svg{display:block;overflow:visible}.ea-line-chart__svg{direction:ltr;touch-action:pan-y}.ea-line-chart__hit{fill:transparent}.ea-line-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-line-chart__x-tick{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__y-axis{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;fill:none}.ea-line-chart__axis-break{fill:none;stroke:var(--color-border-strong);stroke-width:1.5px;stroke-linecap:round}.ea-line-chart__crosshair{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-line-chart__series{pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out)}.ea-line-chart__series--dimmed{opacity:.35}.ea-line-chart__area{fill:var(--ea-chart-color);fill-opacity:.12}.ea-line-chart__line{fill:none;stroke:var(--ea-chart-color);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.ea-line-chart__point{fill:var(--ea-chart-color);stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px}.ea-line-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-line-chart__anchor{fill:transparent}.ea-line-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-line-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-value{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}.ea-line-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-line-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-line-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-line-chart__legend-line{width:1em;height:2px;border-radius:var(--radius-full);background-color:var(--ea-chart-color)}.ea-line-chart__table,.ea-line-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-line-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-line-chart--pannable .ea-line-chart__svg{cursor:grab}.ea-line-chart--panning .ea-line-chart__svg{cursor:grabbing;-webkit-user-select:none;user-select:none}.ea-line-chart--animate-draw .ea-line-chart__line{stroke-dasharray:1;animation-name:ea-chart-draw;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__line{animation:none}}.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation-name:ea-chart-fade;animation-delay:var(--ea-chart-duration, .6s);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation:none}}.ea-line-chart--animate-reveal .ea-line-chart__lines{clip-path:inset(-8px);animation-name:ea-line-chart-reveal;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-reveal .ea-line-chart__lines{animation:none}}.ea-line-chart--animate-fade .ea-line-chart__series{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-fade .ea-line-chart__series{animation:none}}.ea-line-chart--animate-rise .ea-line-chart__series{animation-name:ea-chart-grow-y;transform-origin:0 var(--ea-line-chart-baseline);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-rise .ea-line-chart__series{animation:none}}@keyframes ea-line-chart-reveal{0%{clip-path:inset(-8px 100% -8px -8px)}}\n"],
|
|
19565
20124
|
dependencies: [{
|
|
19566
20125
|
kind: "directive",
|
|
19567
20126
|
type: NgClass,
|
|
@@ -19597,8 +20156,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
19597
20156
|
imports: [NgClass, TooltipDirective],
|
|
19598
20157
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
19599
20158
|
encapsulation: ViewEncapsulation.None,
|
|
19600
|
-
template: "<div\n class=\"ea-line-chart\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n @if (hasData()) {\n <div\n class=\"ea-line-chart__plot\"\n role=\"group\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n [attr.aria-label]=\"label()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\">\n @for (pass of renderPass(); track pass) {\n <svg\n class=\"ea-line-chart__svg\"\n aria-hidden=\"true\"\n [attr.width]=\"layout().width\"\n [attr.height]=\"layout().height\"\n [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n [style.--ea-line-chart-baseline]=\"layout().baselineY + 'px'\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerdown)=\"
|
|
19601
|
-
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-line-chart{display:block}.ea-line-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-line-chart--2xs{font-size:var(--font-size-2xs)}.ea-line-chart--xs{font-size:var(--font-size-xs)}.ea-line-chart--sm{font-size:var(--font-size-sm)}.ea-line-chart--md{font-size:var(--font-size-md)}.ea-line-chart--lg{font-size:var(--font-size-lg)}.ea-line-chart--xl{font-size:var(--font-size-xl)}.ea-line-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-line-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-line-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-line-chart__plot svg{display:block;overflow:visible}.ea-line-chart__svg{direction:ltr;touch-action:pan-y}.ea-line-chart__hit{fill:transparent}.ea-line-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-line-chart__crosshair{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-line-chart__series{pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out)}.ea-line-chart__series--dimmed{opacity:.35}.ea-line-chart__area{fill:var(--ea-chart-color);fill-opacity:.12}.ea-line-chart__line{fill:none;stroke:var(--ea-chart-color);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.ea-line-chart__point{fill:var(--ea-chart-color);stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px}.ea-line-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-line-chart__anchor{fill:transparent}.ea-line-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-line-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-value{
|
|
20159
|
+
template: "<div\n class=\"ea-line-chart\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n @if (hasData()) {\n <div\n class=\"ea-line-chart__plot\"\n role=\"group\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n [attr.aria-label]=\"label()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\">\n @for (pass of renderPass(); track pass) {\n <svg\n class=\"ea-line-chart__svg\"\n aria-hidden=\"true\"\n [attr.width]=\"layout().width\"\n [attr.height]=\"layout().height\"\n [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n [style.--ea-line-chart-baseline]=\"layout().baselineY + 'px'\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointerup)=\"onPointerUp($event)\"\n (pointercancel)=\"onPointerUp($event)\"\n (pointerleave)=\"onPointerLeave()\"\n (wheel)=\"onWheel($event)\"\n (gesturestart)=\"onGestureStart($event)\"\n (gesturechange)=\"onGestureChange($event)\"\n (gestureend)=\"onGestureEnd()\"\n (click)=\"onClick()\">\n @if (layout().windowed) {\n <defs>\n <clipPath [attr.id]=\"clipId\">\n <rect\n [attr.x]=\"layout().left\"\n y=\"0\"\n [attr.width]=\"layout().plotWidth\"\n [attr.height]=\"layout().height\" />\n </clipPath>\n </defs>\n }\n <rect\n class=\"ea-line-chart__hit\"\n [attr.x]=\"layout().left\"\n [attr.y]=\"layout().top\"\n [attr.width]=\"layout().plotWidth\"\n [attr.height]=\"layout().plotHeight\" />\n @for (tick of layout().ticks; track tick.value) {\n @if (showGrid()) {\n <line\n class=\"ea-line-chart__grid\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\" />\n }\n <text\n class=\"ea-line-chart__axis ea-line-chart__axis--y\"\n text-anchor=\"end\"\n dominant-baseline=\"middle\"\n [attr.x]=\"layout().tickX\"\n [attr.y]=\"tick.y\">\n {{ tick.text }}\n </text>\n }\n <line\n class=\"ea-line-chart__baseline\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"layout().top + layout().plotHeight\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n @if (layout().axisBreak; as axisBreak) {\n <path\n class=\"ea-line-chart__y-axis\"\n [attr.d]=\"axisBreak.axis\" />\n <path\n class=\"ea-line-chart__axis-break\"\n [attr.d]=\"axisBreak.slashes\" />\n }\n @for (xLabel of layout().xLabels; track xLabel.key) {\n <line\n class=\"ea-line-chart__x-tick\"\n [attr.x1]=\"xLabel.x\"\n [attr.x2]=\"xLabel.x\"\n [attr.y1]=\"layout().axisY\"\n [attr.y2]=\"layout().tickEndY\" />\n <text\n class=\"ea-line-chart__axis ea-line-chart__axis--x\"\n [attr.text-anchor]=\"layout().labelAngle ? 'end' : 'middle'\"\n [attr.dominant-baseline]=\"layout().labelAngle ? 'central' : null\"\n [attr.transform]=\"\n layout().labelAngle\n ? 'rotate(' +\n -layout().labelAngle +\n ' ' +\n xLabel.x +\n ' ' +\n layout().labelY +\n ')'\n : null\n \"\n [attr.x]=\"xLabel.textX\"\n [attr.y]=\"layout().labelY\">\n {{ xLabel.text }}\n </text>\n }\n @if (layout().axisBreak; as axisBreak) {\n <!-- Keeps the break's gap open under a crosshair drawn along the y-axis -->\n <mask\n maskUnits=\"userSpaceOnUse\"\n [attr.id]=\"breakMaskId\">\n <rect\n fill=\"white\"\n x=\"0\"\n y=\"0\"\n [attr.width]=\"layout().width\"\n [attr.height]=\"layout().height\" />\n <rect\n fill=\"black\"\n [attr.x]=\"axisBreak.gap.x\"\n [attr.y]=\"axisBreak.gap.y\"\n [attr.width]=\"axisBreak.gap.width\"\n [attr.height]=\"axisBreak.gap.height\" />\n </mask>\n }\n @if (tooltip(); as tip) {\n <line\n class=\"ea-line-chart__crosshair\"\n [attr.mask]=\"layout().axisBreak ? 'url(#' + breakMaskId + ')' : null\"\n [attr.x1]=\"tip.x\"\n [attr.x2]=\"tip.x\"\n [attr.y1]=\"layout().top\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n }\n <g [attr.clip-path]=\"layout().windowed ? 'url(#' + clipId + ')' : null\">\n <g class=\"ea-line-chart__lines\">\n @for (line of layout().series; track $index; let s = $index) {\n <g\n class=\"ea-line-chart__series\"\n [class.ea-line-chart__series--dimmed]=\"isDimmed(s)\"\n [style.--ea-chart-color]=\"line.color\">\n @if (showArea()) {\n @for (area of line.areas; track $index) {\n <path\n class=\"ea-line-chart__area\"\n [attr.d]=\"area\" />\n }\n }\n @for (path of line.paths; track $index) {\n <path\n class=\"ea-line-chart__line\"\n pathLength=\"1\"\n [attr.d]=\"path\" />\n }\n @for (point of line.points; track point.index) {\n @if (showPoints() || isActivePoint(s, point.index)) {\n <circle\n class=\"ea-line-chart__point\"\n [class.ea-line-chart__point--active]=\"\n isActivePoint(s, point.index)\n \"\n [attr.cx]=\"point.x\"\n [attr.cy]=\"point.y\"\n [attr.r]=\"isActivePoint(s, point.index) ? 6 : 4\" />\n }\n }\n </g>\n }\n </g>\n </g>\n @for (tip of tooltips(); track tip.key) {\n <rect\n class=\"ea-line-chart__anchor\"\n width=\"12\"\n height=\"12\"\n [attr.x]=\"tip.x - 6\"\n [attr.y]=\"tip.y - 6\"\n [eaTooltip]=\"tooltipContent\"\n [tooltipOpen]=\"true\"\n [maxWidth]=\"undefined\" />\n }\n </svg>\n }\n <ng-template #tooltipContent>\n @if (tooltip(); as tip) {\n <div class=\"ea-line-chart__tooltip\">\n <span class=\"ea-line-chart__tooltip-title\">{{ tip.title }}</span>\n @for (row of tip.rows; track $index) {\n <span\n class=\"ea-line-chart__tooltip-row\"\n [class.ea-line-chart__tooltip-row--active]=\"row.active\">\n <span\n class=\"ea-line-chart__swatch\"\n [style.--ea-chart-color]=\"row.color\">\n </span>\n <span class=\"ea-line-chart__tooltip-name\">{{ row.name }}</span>\n <span class=\"ea-line-chart__tooltip-value\">{{ row.value }}</span>\n </span>\n }\n </div>\n }\n </ng-template>\n <!-- Hidden through a block, since a table ignores the 1px size and keeps its full height -->\n <div class=\"ea-line-chart__table\">\n <table>\n <caption>\n {{ label() }}\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n\n @for (s of series(); track $index) {\n <th scope=\"col\">{{ s.name }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of labels(); track $index; let i = $index) {\n <tr>\n <th scope=\"row\">{{ row }}</th>\n\n @for (s of series(); track $index) {\n <td>{{ tableValue(s.data[i]) }}</td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n </div>\n <div\n class=\"ea-line-chart__live\"\n aria-live=\"polite\">\n {{ announcement() }}\n </div>\n } @else {\n <div\n class=\"ea-line-chart__empty\"\n role=\"img\"\n [attr.aria-label]=\"label()\"\n [style.height.px]=\"height()\">\n {{ i18n.messages().chart.noData }}\n </div>\n }\n @if (showsLegend()) {\n <ul\n class=\"ea-line-chart__legend\"\n aria-hidden=\"true\">\n @for (s of series(); track $index; let i = $index) {\n <li class=\"ea-line-chart__legend-item\">\n <span\n class=\"ea-line-chart__legend-line\"\n [style.--ea-chart-color]=\"seriesColor(i)\">\n </span>\n {{ s.name }}\n </li>\n }\n </ul>\n }\n</div>\n",
|
|
20160
|
+
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-line-chart{display:block}.ea-line-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-line-chart--2xs{font-size:var(--font-size-2xs)}.ea-line-chart--xs{font-size:var(--font-size-xs)}.ea-line-chart--sm{font-size:var(--font-size-sm)}.ea-line-chart--md{font-size:var(--font-size-md)}.ea-line-chart--lg{font-size:var(--font-size-lg)}.ea-line-chart--xl{font-size:var(--font-size-xl)}.ea-line-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-line-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-line-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-line-chart__plot svg{display:block;overflow:visible}.ea-line-chart__svg{direction:ltr;touch-action:pan-y}.ea-line-chart__hit{fill:transparent}.ea-line-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-line-chart__x-tick{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__y-axis{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;fill:none}.ea-line-chart__axis-break{fill:none;stroke:var(--color-border-strong);stroke-width:1.5px;stroke-linecap:round}.ea-line-chart__crosshair{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-line-chart__series{pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out)}.ea-line-chart__series--dimmed{opacity:.35}.ea-line-chart__area{fill:var(--ea-chart-color);fill-opacity:.12}.ea-line-chart__line{fill:none;stroke:var(--ea-chart-color);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.ea-line-chart__point{fill:var(--ea-chart-color);stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px}.ea-line-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-line-chart__anchor{fill:transparent}.ea-line-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-line-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-value{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}.ea-line-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-line-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-line-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-line-chart__legend-line{width:1em;height:2px;border-radius:var(--radius-full);background-color:var(--ea-chart-color)}.ea-line-chart__table,.ea-line-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-line-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-line-chart--pannable .ea-line-chart__svg{cursor:grab}.ea-line-chart--panning .ea-line-chart__svg{cursor:grabbing;-webkit-user-select:none;user-select:none}.ea-line-chart--animate-draw .ea-line-chart__line{stroke-dasharray:1;animation-name:ea-chart-draw;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__line{animation:none}}.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation-name:ea-chart-fade;animation-delay:var(--ea-chart-duration, .6s);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation:none}}.ea-line-chart--animate-reveal .ea-line-chart__lines{clip-path:inset(-8px);animation-name:ea-line-chart-reveal;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-reveal .ea-line-chart__lines{animation:none}}.ea-line-chart--animate-fade .ea-line-chart__series{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-fade .ea-line-chart__series{animation:none}}.ea-line-chart--animate-rise .ea-line-chart__series{animation-name:ea-chart-grow-y;transform-origin:0 var(--ea-line-chart-baseline);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-rise .ea-line-chart__series{animation:none}}@keyframes ea-line-chart-reveal{0%{clip-path:inset(-8px 100% -8px -8px)}}\n"]
|
|
19602
20161
|
}]
|
|
19603
20162
|
}],
|
|
19604
20163
|
propDecorators: {
|
|
@@ -19618,6 +20177,30 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
19618
20177
|
required: false
|
|
19619
20178
|
}]
|
|
19620
20179
|
}],
|
|
20180
|
+
xValues: [{
|
|
20181
|
+
type: i0.Input,
|
|
20182
|
+
args: [{
|
|
20183
|
+
isSignal: true,
|
|
20184
|
+
alias: "xValues",
|
|
20185
|
+
required: false
|
|
20186
|
+
}]
|
|
20187
|
+
}],
|
|
20188
|
+
xTicks: [{
|
|
20189
|
+
type: i0.Input,
|
|
20190
|
+
args: [{
|
|
20191
|
+
isSignal: true,
|
|
20192
|
+
alias: "xTicks",
|
|
20193
|
+
required: false
|
|
20194
|
+
}]
|
|
20195
|
+
}],
|
|
20196
|
+
visibleXSpan: [{
|
|
20197
|
+
type: i0.Input,
|
|
20198
|
+
args: [{
|
|
20199
|
+
isSignal: true,
|
|
20200
|
+
alias: "visibleXSpan",
|
|
20201
|
+
required: false
|
|
20202
|
+
}]
|
|
20203
|
+
}],
|
|
19621
20204
|
curve: [{
|
|
19622
20205
|
type: i0.Input,
|
|
19623
20206
|
args: [{
|
|
@@ -19674,6 +20257,22 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
19674
20257
|
required: false
|
|
19675
20258
|
}]
|
|
19676
20259
|
}],
|
|
20260
|
+
xLabelOrientation: [{
|
|
20261
|
+
type: i0.Input,
|
|
20262
|
+
args: [{
|
|
20263
|
+
isSignal: true,
|
|
20264
|
+
alias: "xLabelOrientation",
|
|
20265
|
+
required: false
|
|
20266
|
+
}]
|
|
20267
|
+
}],
|
|
20268
|
+
showAxisBreak: [{
|
|
20269
|
+
type: i0.Input,
|
|
20270
|
+
args: [{
|
|
20271
|
+
isSignal: true,
|
|
20272
|
+
alias: "showAxisBreak",
|
|
20273
|
+
required: false
|
|
20274
|
+
}]
|
|
20275
|
+
}],
|
|
19677
20276
|
height: [{
|
|
19678
20277
|
type: i0.Input,
|
|
19679
20278
|
args: [{
|
|
@@ -19729,6 +20328,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
19729
20328
|
activePointChange: [{
|
|
19730
20329
|
type: i0.Output,
|
|
19731
20330
|
args: ["activePointChange"]
|
|
20331
|
+
}],
|
|
20332
|
+
visibleRangeChange: [{
|
|
20333
|
+
type: i0.Output,
|
|
20334
|
+
args: ["visibleRangeChange"]
|
|
19732
20335
|
}]
|
|
19733
20336
|
}
|
|
19734
20337
|
});
|
|
@@ -22638,7 +23241,7 @@ var PieChartComponent = class PieChartComponent {
|
|
|
22638
23241
|
},
|
|
22639
23242
|
ngImport: i0,
|
|
22640
23243
|
template: "<div\n class=\"ea-pie-chart\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n @if (hasData()) {\n <div\n class=\"ea-pie-chart__plot\"\n role=\"group\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n [attr.aria-label]=\"label()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\">\n <div class=\"ea-pie-chart__figure\">\n @for (pass of renderPass(); track pass) {\n <svg\n class=\"ea-pie-chart__svg\"\n aria-hidden=\"true\"\n [attr.width]=\"layout().diameter\"\n [attr.height]=\"layout().diameter\"\n [attr.viewBox]=\"'0 0 ' + layout().diameter + ' ' + layout().diameter\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerdown)=\"onPointerMove($event)\"\n (pointerleave)=\"onPointerLeave()\"\n (click)=\"onClick()\">\n @for (slice of layout().slices; track slice.index) {\n <path\n class=\"ea-pie-chart__slice\"\n fill-rule=\"evenodd\"\n [class.ea-pie-chart__slice--dimmed]=\"isDimmed(slice.index)\"\n [style.--ea-chart-color]=\"slice.color\"\n [style.transform]=\"offset(slice)\"\n [attr.d]=\"slice.path\" />\n }\n @for (tip of tooltips(); track tip.key) {\n <rect\n class=\"ea-pie-chart__anchor\"\n width=\"2\"\n height=\"2\"\n [attr.x]=\"tip.x - 1\"\n [attr.y]=\"tip.y - 1\"\n [eaTooltip]=\"tooltipContent\"\n [tooltipOpen]=\"true\"\n [maxWidth]=\"undefined\" />\n }\n </svg>\n }\n <ng-template #tooltipContent>\n @if (tooltip(); as tip) {\n <div class=\"ea-pie-chart__tooltip\">\n <span class=\"ea-pie-chart__tooltip-row\">\n <span\n class=\"ea-pie-chart__swatch\"\n [style.--ea-chart-color]=\"tip.color\">\n </span>\n <span class=\"ea-pie-chart__tooltip-title\">{{ tip.title }}</span>\n </span>\n <span class=\"ea-pie-chart__tooltip-value\">{{ tip.detail }}</span>\n </div>\n }\n </ng-template>\n </div>\n <table class=\"ea-pie-chart__table\">\n <caption>\n {{ label() }}\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n <th scope=\"col\">{{ i18n.messages().chart.value }}</th>\n <th scope=\"col\">{{ i18n.messages().chart.share }}</th>\n </tr>\n </thead>\n <tbody>\n @for (slice of data(); track $index; let i = $index) {\n <tr>\n <th scope=\"row\">{{ slice.label }}</th>\n <td>{{ tableValue(slice) }}</td>\n <td>{{ tablePercent(i) }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n <div\n class=\"ea-pie-chart__live\"\n aria-live=\"polite\">\n {{ announcement() }}\n </div>\n } @else {\n <div\n class=\"ea-pie-chart__empty\"\n role=\"img\"\n [attr.aria-label]=\"label()\"\n [style.height.px]=\"height()\">\n {{ i18n.messages().chart.noData }}\n </div>\n }\n @if (showLegend() && hasData()) {\n <ul\n class=\"ea-pie-chart__legend\"\n aria-hidden=\"true\">\n @for (item of legend(); track $index) {\n <li class=\"ea-pie-chart__legend-item\">\n <span\n class=\"ea-pie-chart__swatch\"\n [style.--ea-chart-color]=\"item.color\">\n </span>\n {{ item.label }}\n @if (showPercentages()) {\n <span class=\"ea-pie-chart__legend-percent\">{{ item.percent }}</span>\n }\n </li>\n }\n </ul>\n }\n</div>\n",
|
|
22641
|
-
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}@property --ea-pie-chart-sweep{syntax: \"<angle>\"; inherits: false; initial-value: 360deg;}ea-pie-chart{display:block}.ea-pie-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-pie-chart--2xs{font-size:var(--font-size-2xs)}.ea-pie-chart--xs{font-size:var(--font-size-xs)}.ea-pie-chart--sm{font-size:var(--font-size-sm)}.ea-pie-chart--md{font-size:var(--font-size-md)}.ea-pie-chart--lg{font-size:var(--font-size-lg)}.ea-pie-chart--xl{font-size:var(--font-size-xl)}.ea-pie-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-pie-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-pie-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-pie-chart__plot svg{display:block;overflow:visible}.ea-pie-chart__plot{display:flex;justify-content:center}.ea-pie-chart__figure{position:relative}.ea-pie-chart__svg{display:block;touch-action:pan-y}.ea-pie-chart__slice{stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px;stroke-linejoin:round;fill:var(--ea-chart-color);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-pie-chart__slice--dimmed{opacity:.35}.ea-pie-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-pie-chart__anchor{fill:transparent}.ea-pie-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-pie-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-pie-chart__tooltip-value{font-variant-numeric:tabular-nums}.ea-pie-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-pie-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-pie-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-pie-chart__legend-percent{font-variant-numeric:tabular-nums;color:var(--color-text-tertiary)}.ea-pie-chart__table,.ea-pie-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-pie-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-pie-chart--animate-sweep .ea-pie-chart__svg{-webkit-mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);animation-name:ea-pie-chart-sweep;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-sweep .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation-name:ea-chart-grow;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation:none}}@keyframes ea-pie-chart-sweep{0%{--ea-pie-chart-sweep: 0deg}}\n"],
|
|
23244
|
+
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}@property --ea-pie-chart-sweep{syntax: \"<angle>\"; inherits: false; initial-value: 360deg;}ea-pie-chart{display:block}.ea-pie-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-pie-chart--2xs{font-size:var(--font-size-2xs)}.ea-pie-chart--xs{font-size:var(--font-size-xs)}.ea-pie-chart--sm{font-size:var(--font-size-sm)}.ea-pie-chart--md{font-size:var(--font-size-md)}.ea-pie-chart--lg{font-size:var(--font-size-lg)}.ea-pie-chart--xl{font-size:var(--font-size-xl)}.ea-pie-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-pie-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-pie-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-pie-chart__plot svg{display:block;overflow:visible}.ea-pie-chart__plot{display:flex;justify-content:center}.ea-pie-chart__figure{position:relative}.ea-pie-chart__svg{display:block;touch-action:pan-y}.ea-pie-chart__slice{stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px;stroke-linejoin:round;fill:var(--ea-chart-color);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-pie-chart__slice--dimmed{opacity:.35}.ea-pie-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-pie-chart__anchor{fill:transparent}.ea-pie-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-pie-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-pie-chart__tooltip-value{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}.ea-pie-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-pie-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-pie-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-pie-chart__legend-percent{font-variant-numeric:tabular-nums;color:var(--color-text-tertiary)}.ea-pie-chart__table,.ea-pie-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-pie-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-pie-chart--animate-sweep .ea-pie-chart__svg{-webkit-mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);animation-name:ea-pie-chart-sweep;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-sweep .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation-name:ea-chart-grow;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation:none}}@keyframes ea-pie-chart-sweep{0%{--ea-pie-chart-sweep: 0deg}}\n"],
|
|
22642
23245
|
dependencies: [{
|
|
22643
23246
|
kind: "directive",
|
|
22644
23247
|
type: NgClass,
|
|
@@ -22675,7 +23278,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
22675
23278
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
22676
23279
|
encapsulation: ViewEncapsulation.None,
|
|
22677
23280
|
template: "<div\n class=\"ea-pie-chart\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n @if (hasData()) {\n <div\n class=\"ea-pie-chart__plot\"\n role=\"group\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n [attr.aria-label]=\"label()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\">\n <div class=\"ea-pie-chart__figure\">\n @for (pass of renderPass(); track pass) {\n <svg\n class=\"ea-pie-chart__svg\"\n aria-hidden=\"true\"\n [attr.width]=\"layout().diameter\"\n [attr.height]=\"layout().diameter\"\n [attr.viewBox]=\"'0 0 ' + layout().diameter + ' ' + layout().diameter\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerdown)=\"onPointerMove($event)\"\n (pointerleave)=\"onPointerLeave()\"\n (click)=\"onClick()\">\n @for (slice of layout().slices; track slice.index) {\n <path\n class=\"ea-pie-chart__slice\"\n fill-rule=\"evenodd\"\n [class.ea-pie-chart__slice--dimmed]=\"isDimmed(slice.index)\"\n [style.--ea-chart-color]=\"slice.color\"\n [style.transform]=\"offset(slice)\"\n [attr.d]=\"slice.path\" />\n }\n @for (tip of tooltips(); track tip.key) {\n <rect\n class=\"ea-pie-chart__anchor\"\n width=\"2\"\n height=\"2\"\n [attr.x]=\"tip.x - 1\"\n [attr.y]=\"tip.y - 1\"\n [eaTooltip]=\"tooltipContent\"\n [tooltipOpen]=\"true\"\n [maxWidth]=\"undefined\" />\n }\n </svg>\n }\n <ng-template #tooltipContent>\n @if (tooltip(); as tip) {\n <div class=\"ea-pie-chart__tooltip\">\n <span class=\"ea-pie-chart__tooltip-row\">\n <span\n class=\"ea-pie-chart__swatch\"\n [style.--ea-chart-color]=\"tip.color\">\n </span>\n <span class=\"ea-pie-chart__tooltip-title\">{{ tip.title }}</span>\n </span>\n <span class=\"ea-pie-chart__tooltip-value\">{{ tip.detail }}</span>\n </div>\n }\n </ng-template>\n </div>\n <table class=\"ea-pie-chart__table\">\n <caption>\n {{ label() }}\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n <th scope=\"col\">{{ i18n.messages().chart.value }}</th>\n <th scope=\"col\">{{ i18n.messages().chart.share }}</th>\n </tr>\n </thead>\n <tbody>\n @for (slice of data(); track $index; let i = $index) {\n <tr>\n <th scope=\"row\">{{ slice.label }}</th>\n <td>{{ tableValue(slice) }}</td>\n <td>{{ tablePercent(i) }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n <div\n class=\"ea-pie-chart__live\"\n aria-live=\"polite\">\n {{ announcement() }}\n </div>\n } @else {\n <div\n class=\"ea-pie-chart__empty\"\n role=\"img\"\n [attr.aria-label]=\"label()\"\n [style.height.px]=\"height()\">\n {{ i18n.messages().chart.noData }}\n </div>\n }\n @if (showLegend() && hasData()) {\n <ul\n class=\"ea-pie-chart__legend\"\n aria-hidden=\"true\">\n @for (item of legend(); track $index) {\n <li class=\"ea-pie-chart__legend-item\">\n <span\n class=\"ea-pie-chart__swatch\"\n [style.--ea-chart-color]=\"item.color\">\n </span>\n {{ item.label }}\n @if (showPercentages()) {\n <span class=\"ea-pie-chart__legend-percent\">{{ item.percent }}</span>\n }\n </li>\n }\n </ul>\n }\n</div>\n",
|
|
22678
|
-
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}@property --ea-pie-chart-sweep{syntax: \"<angle>\"; inherits: false; initial-value: 360deg;}ea-pie-chart{display:block}.ea-pie-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-pie-chart--2xs{font-size:var(--font-size-2xs)}.ea-pie-chart--xs{font-size:var(--font-size-xs)}.ea-pie-chart--sm{font-size:var(--font-size-sm)}.ea-pie-chart--md{font-size:var(--font-size-md)}.ea-pie-chart--lg{font-size:var(--font-size-lg)}.ea-pie-chart--xl{font-size:var(--font-size-xl)}.ea-pie-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-pie-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-pie-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-pie-chart__plot svg{display:block;overflow:visible}.ea-pie-chart__plot{display:flex;justify-content:center}.ea-pie-chart__figure{position:relative}.ea-pie-chart__svg{display:block;touch-action:pan-y}.ea-pie-chart__slice{stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px;stroke-linejoin:round;fill:var(--ea-chart-color);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-pie-chart__slice--dimmed{opacity:.35}.ea-pie-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-pie-chart__anchor{fill:transparent}.ea-pie-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-pie-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-pie-chart__tooltip-value{font-variant-numeric:tabular-nums}.ea-pie-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-pie-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-pie-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-pie-chart__legend-percent{font-variant-numeric:tabular-nums;color:var(--color-text-tertiary)}.ea-pie-chart__table,.ea-pie-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-pie-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-pie-chart--animate-sweep .ea-pie-chart__svg{-webkit-mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);animation-name:ea-pie-chart-sweep;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-sweep .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation-name:ea-chart-grow;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation:none}}@keyframes ea-pie-chart-sweep{0%{--ea-pie-chart-sweep: 0deg}}\n"]
|
|
23281
|
+
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}@property --ea-pie-chart-sweep{syntax: \"<angle>\"; inherits: false; initial-value: 360deg;}ea-pie-chart{display:block}.ea-pie-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-pie-chart--2xs{font-size:var(--font-size-2xs)}.ea-pie-chart--xs{font-size:var(--font-size-xs)}.ea-pie-chart--sm{font-size:var(--font-size-sm)}.ea-pie-chart--md{font-size:var(--font-size-md)}.ea-pie-chart--lg{font-size:var(--font-size-lg)}.ea-pie-chart--xl{font-size:var(--font-size-xl)}.ea-pie-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-pie-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-pie-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-pie-chart__plot svg{display:block;overflow:visible}.ea-pie-chart__plot{display:flex;justify-content:center}.ea-pie-chart__figure{position:relative}.ea-pie-chart__svg{display:block;touch-action:pan-y}.ea-pie-chart__slice{stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px;stroke-linejoin:round;fill:var(--ea-chart-color);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-pie-chart__slice--dimmed{opacity:.35}.ea-pie-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-pie-chart__anchor{fill:transparent}.ea-pie-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-pie-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-pie-chart__tooltip-value{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}.ea-pie-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-pie-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-pie-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-pie-chart__legend-percent{font-variant-numeric:tabular-nums;color:var(--color-text-tertiary)}.ea-pie-chart__table,.ea-pie-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-pie-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-pie-chart--animate-sweep .ea-pie-chart__svg{-webkit-mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);animation-name:ea-pie-chart-sweep;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-sweep .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation-name:ea-chart-grow;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation:none}}@keyframes ea-pie-chart-sweep{0%{--ea-pie-chart-sweep: 0deg}}\n"]
|
|
22679
23282
|
}]
|
|
22680
23283
|
}],
|
|
22681
23284
|
propDecorators: {
|