cats-charts 0.0.61 → 0.0.62
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/fesm2022/cats-charts.mjs +53 -43
- package/fesm2022/cats-charts.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/package.json +1 -1
package/fesm2022/cats-charts.mjs
CHANGED
|
@@ -426,11 +426,11 @@ class ChartLegendComponent {
|
|
|
426
426
|
return typeof this.config.maxWidth === 'string' && this.config.maxWidth.trim().length > 0;
|
|
427
427
|
}
|
|
428
428
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartLegendComponent, deps: [{ token: ChartLegendAdapter }, { token: i0.ChangeDetectorRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
|
|
429
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ChartLegendComponent, isStandalone: true, selector: "lib-chart-legend", inputs: { chart: "chart", series: "series", colors: "colors", config: "config", itemTemplate: "itemTemplate" }, outputs: { legendEvent: "legendEvent" }, viewQueries: [{ propertyName: "itemsScroller", first: true, predicate: ["itemsScroller"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (config.enabled !== false) {\n <nav\n class=\"chart-legend\"\n [class.chart-legend--vertical]=\"isVerticalLegend\"\n [class.chart-legend--scrollable]=\"isScrollableLegend\"\n [class.chart-legend--wrap]=\"!isScrollableLegend\"\n [class.chart-legend--limited-wrap]=\"isLimitedWrapLegend\"\n [ngClass]=\"config.className || null\"\n [style.--legend-text-color]=\"config.legendTextColor || null\"\n [style.--legend-font-size]=\"config.legendFontSize ? config.legendFontSize + 'px' : null\"\n [style.max-height]=\"config.maxHeight || null\"\n [style.padding]=\"config.padding || '1rem'\"\n [attr.aria-label]=\"config.ariaLabel || 'Chart legend'\"\n >\n <div class=\"chart-legend__viewport\">\n @if (config.title) {\n <p class=\"chart-legend-title\">{{ config.title }}</p>\n }\n @if (usesInternalLegendScroll && canScrollLegend) {\n <button\n type=\"button\"\n class=\"chart-legend__scroll-button chart-legend__scroll-button--start\"\n [disabled]=\"!canScrollStart\"\n (click)=\"scrollLegend(-1, $event)\"\n [attr.aria-label]=\"scrollStartAriaLabel\"\n >\n <img\n src=\"images/legend_left.svg\"\n [class.chart-legend__scroll-icon--up]=\"scrollsVertically\"\n alt=\"left\"\n />\n </button>\n }\n\n <div #itemsScroller class=\"chart-legend__scroller\" (scroll)=\"updateScrollState()\">\n <div\n class=\"chart-legend__items\"\n role=\"list\"\n [class.chart-legend__items--center]=\"isLegendAlignedCenter\"\n [class.chart-legend__items--end]=\"isLegendAlignedEnd\"\n >\n @for (group of groupedItems; track trackByGroup($index, group)) {\n @if (group.group) {\n <div class=\"chart-legend__group-label\">{{ group.group }}</div>\n }\n\n @for (item of group.items; track trackByItem($index, item)) {\n <button\n type=\"button\"\n class=\"chart-legend__item\"\n role=\"switch\"\n [class.chart-legend__item--off]=\"!item.selected\"\n [class.chart-legend__item--disabled]=\"item.disabled\"\n [class.chart-legend__item--hovered]=\"state.hoveredName === item.name\"\n [disabled]=\"item.disabled\"\n [attr.aria-checked]=\"item.selected\"\n [attr.aria-label]=\"item.label\"\n [style.--legend-item-color]=\"item.color\"\n [title]=\"itemTitle(item)\"\n (click)=\"toggle(item, $event)\"\n (keydown.enter)=\"toggle(item, $event)\"\n (keydown.space)=\"toggle(item, $event)\"\n (mouseenter)=\"hover(item)\"\n (focus)=\"hover(item)\"\n (mouseleave)=\"leave(item)\"\n (blur)=\"leave(item)\"\n >\n @if (templateFor(item); as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"templateContext(item)\"\n ></ng-container>\n } @else {\n @switch (iconRenderType(item)) {\n @case ('image') {\n <img class=\"chart-legend__icon-image\" [src]=\"iconImageSrc(item)\" alt=\"\" />\n }\n @case ('path') {\n <svg\n class=\"chart-legend__icon-path\"\n viewBox=\"-512 -512 1024 1024\"\n aria-hidden=\"true\"\n >\n <path [attr.d]=\"iconPathData(item)\"></path>\n </svg>\n }\n @case ('shape') {\n <span\n class=\"chart-legend__icon\"\n [ngClass]=\"iconShapeClass(item)\"\n aria-hidden=\"true\"\n ></span>\n }\n }\n <span class=\"chart-legend__label\"\n >{{ item.label\n }}{{ this.config.showValue && this.config.valueFormatter && ':' }}</span\n >\n @if (this.config.showValue && this.config.valueFormatter) {\n <span class=\"chart-legend__value\">{{ this.config.valueFormatter(item) }}</span>\n }\n }\n </button>\n }\n }\n </div>\n </div>\n\n @if (usesInternalLegendScroll && canScrollLegend) {\n <button\n type=\"button\"\n class=\"chart-legend__scroll-button chart-legend__scroll-button--end\"\n [disabled]=\"!canScrollEnd\"\n (click)=\"scrollLegend(1, $event)\"\n [attr.aria-label]=\"scrollEndAriaLabel\"\n >\n <img\n src=\"images/legend_right.svg\"\n [class.chart-legend__scroll-icon--down]=\"scrollsVertically\"\n alt=\"right\"\n />\n </button>\n }\n </div>\n\n @if (config.showPagination && pageCount > 1) {\n <div class=\"chart-legend__pagination\" aria-label=\"Legend pages\">\n <button\n type=\"button\"\n class=\"chart-legend__page\"\n [disabled]=\"state.pageIndex === 0\"\n (click)=\"page(-1)\"\n aria-label=\"Previous legend page\"\n >\n <\n </button>\n <span class=\"chart-legend__page-count\">{{ state.pageIndex + 1 }} / {{ pageCount }}</span>\n <button\n type=\"button\"\n class=\"chart-legend__page\"\n [disabled]=\"state.pageIndex + 1 === pageCount\"\n (click)=\"page(1)\"\n aria-label=\"Next legend page\"\n >\n >\n </button>\n </div>\n }\n </nav>\n}\n", styles: [":host{display:block;min-height:0;min-width:0}.chart-legend{--legend-text-color: #040d17;--legend-muted-color: #8a94a6;--legend-border-color: #eaf3fd;--legend-hover-bg: rgba(15, 23, 42, .04);--legend-font-size: 14px;--legend-item-min-height: 28px;--legend-row-gap: 8px;--legend-column-gap: 12px;color:var(--legend-text-color);font-size:var(--legend-font-size);box-sizing:border-box;min-height:0;min-width:0;width:100%}:host-context(.dark) .chart-legend,:host-context([data-theme=dark]) .chart-legend{--legend-text-color: #e5e7eb;--legend-muted-color: #9ca3af;--legend-border-color: #374151;--legend-hover-bg: rgba(255, 255, 255, .08)}.chart-legend__viewport{align-items:center;display:flex;gap:4px;min-width:0;width:100%}.chart-legend__viewport .chart-legend-title{white-space:nowrap;font-weight:400;font-size:14px;margin:0 8px 0 0}.chart-legend__scroller{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:hidden;scrollbar-width:none}.chart-legend__scroller::-webkit-scrollbar{display:none}.chart-legend--scrollable .chart-legend__scroller{overflow-x:auto;overscroll-behavior-x:contain}.chart-legend--scrollable .chart-legend__scroller::-webkit-scrollbar{display:block;height:6px}.chart-legend__items{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--legend-row-gap) var(--legend-column-gap);min-width:0}.chart-legend--scrollable .chart-legend__items{min-width:max-content}.chart-legend--wrap:not(.chart-legend--vertical) .chart-legend__items{flex-wrap:wrap;width:100%}.chart-legend--limited-wrap:not(.chart-legend--vertical) .chart-legend__scroller{max-height:calc(var(--legend-item-min-height) * 2 + var(--legend-row-gap));overflow-y:auto;overscroll-behavior-y:contain}.chart-legend--vertical{height:100%}.chart-legend--vertical .chart-legend__viewport{align-items:stretch;flex-direction:column;height:100%;min-height:0}.chart-legend--vertical .chart-legend__scroller{overflow-x:hidden;overflow-y:hidden}.chart-legend--vertical.chart-legend--scrollable .chart-legend__scroller{overflow-y:auto;overscroll-behavior-y:contain}.chart-legend--vertical .chart-legend__items{align-items:stretch;flex-direction:column;min-width:0;width:100%;height:100%}.chart-legend--vertical.chart-legend--wrap .chart-legend__items{align-content:start;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-template-rows:repeat(auto-fit,minmax(28px,max-content));height:100%;justify-content:start;width:auto}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__viewport{flex-direction:row}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__scroller{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__items{grid-auto-columns:minmax(1,calc((100% - var(--legend-column-gap)) / 2));width:max-content}.chart-legend__items--center{justify-content:center}.chart-legend__items--end{justify-content:flex-end}.chart-legend--vertical.chart-legend--wrap .chart-legend__items--center{align-content:center;justify-content:start}.chart-legend--vertical.chart-legend--wrap .chart-legend__items--end{align-content:end;justify-content:start}.chart-legend__group-label{flex:0 0 auto;color:var(--legend-muted-color);font-size:12px;font-weight:600;line-height:1.2;margin-top:4px}.chart-legend__item{--legend-item-color: #64748b;align-items:center;background:color-mix(in srgb,var(--legend-item-color) 4%,transparent);border:1px solid color-mix(in srgb,var(--legend-item-color) 25%,transparent);border-radius:4px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:8px;line-height:1.2;min-height:28px;min-width:0;padding:4px 8px;touch-action:manipulation;transition:background-color .14s ease,border-color .14s ease,opacity .14s ease}.chart-legend--vertical .chart-legend__item{justify-content:flex-start;width:100%}.chart-legend--vertical.chart-legend--wrap .chart-legend__item{width:auto}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__item{width:100%}.chart-legend__scroll-button{align-items:center;background:transparent;border:1px solid var(--legend-border-color);border-radius:6px;color:inherit;cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;height:28px;justify-content:center;line-height:1;width:28px}.chart-legend--vertical .chart-legend__scroll-button{width:100%}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__scroll-button{height:auto;min-height:28px;width:28px}.chart-legend__scroll-button img{display:block;height:10px;width:10px}.chart-legend__scroll-icon--up,.chart-legend__scroll-icon--down{transform:rotate(90deg)}.chart-legend__scroll-button:disabled{cursor:default;opacity:.42}.chart-legend__item:hover,.chart-legend__item:focus-visible,.chart-legend__item--hovered{outline:none}.chart-legend__item--off{color:var(--legend-muted-color);filter:grayscale(1);opacity:.68}.chart-legend__item--disabled{cursor:not-allowed;opacity:.48}.chart-legend__icon,.chart-legend__icon-image,.chart-legend__icon-path{--legend-icon-size: 12px;background:var(--legend-item-color);box-sizing:border-box;display:inline-block;flex:0 0 auto;height:var(--legend-icon-size);width:var(--legend-icon-size)}.chart-legend__icon-image,.chart-legend__icon-path{background:transparent;object-fit:contain}.chart-legend__icon-path path{fill:var(--legend-item-color);stroke:var(--legend-item-color)}.chart-legend__icon--line,.chart-legend__icon--emptyLine{border-radius:999px;background:linear-gradient(to bottom,transparent 0 4px,var(--legend-item-color) 4px 6px,transparent 6px 100%)}.chart-legend__icon--emptyLine{background:linear-gradient(to bottom,transparent 0 4px,var(--legend-item-color) 4px 6px,transparent 6px 100%)}.chart-legend__icon--area{background:linear-gradient(to bottom,var(--legend-item-color),color-mix(in srgb,var(--legend-item-color) 12%,transparent));border-top:3px solid var(--legend-item-color)}.chart-legend__icon--circle{border-radius:50%}.chart-legend__icon--emptyCircle{background:transparent;border:2px solid var(--legend-item-color);border-radius:50%}.chart-legend__icon--rect,.chart-legend__icon--emptyRect,.chart-legend__icon--square,.chart-legend__icon--emptySquare{border-radius:2px}.chart-legend__icon--emptyRect,.chart-legend__icon--emptySquare{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--roundRect,.chart-legend__icon--emptyRoundRect{border-radius:6px}.chart-legend__icon--emptyRoundRect{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--triangle,.chart-legend__icon--emptyTriangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.chart-legend__icon--emptyTriangle{background:var(--legend-item-color)}.chart-legend__icon--diamond,.chart-legend__icon--emptyDiamond{transform:rotate(45deg)}.chart-legend__icon--emptyDiamond{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--pin,.chart-legend__icon--emptyPin{border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.chart-legend__icon--emptyPin{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--arrow,.chart-legend__icon--emptyArrow{clip-path:polygon(0 35%,58% 35%,58% 10%,100% 50%,58% 90%,58% 65%,0 65%)}.chart-legend__icon--emptyArrow{opacity:.72}.chart-legend__item--off .chart-legend__icon,.chart-legend__item--off .chart-legend__icon-path path{filter:grayscale(1);opacity:.68}.chart-legend__item--off .chart-legend__icon--emptyCircle,.chart-legend__item--off .chart-legend__icon--emptyRect,.chart-legend__item--off .chart-legend__icon--emptyRoundRect,.chart-legend__item--off .chart-legend__icon--emptySquare,.chart-legend__item--off .chart-legend__icon--emptyDiamond,.chart-legend__item--off .chart-legend__icon--emptyPin,.chart-legend__item--off .chart-legend__icon--emptyLine{filter:grayscale(1);opacity:.68}.chart-legend__content{display:flex;align-items:center;justify-content:space-between;gap:1rem}.chart-legend__value{font-weight:600;font-size:14px}.chart-legend__item--off .chart-legend__icon--emptyTriangle{filter:grayscale(1);opacity:.68}.chart-legend__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.chart-legend__pagination{align-items:center;display:flex;gap:8px;justify-content:flex-end;margin-top:8px}.chart-legend__page{align-items:center;background:transparent;border:1px solid var(--legend-border-color);border-radius:6px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;height:28px;justify-content:center;width:28px}.chart-legend__page:disabled{cursor:default;opacity:.42}.chart-legend__page-count{color:var(--legend-muted-color);font-size:12px}@media (max-width: 640px){.chart-legend__items{padding-bottom:2px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
429
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ChartLegendComponent, isStandalone: true, selector: "lib-chart-legend", inputs: { chart: "chart", series: "series", colors: "colors", config: "config", itemTemplate: "itemTemplate" }, outputs: { legendEvent: "legendEvent" }, viewQueries: [{ propertyName: "itemsScroller", first: true, predicate: ["itemsScroller"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (config.enabled !== false) {\n <nav\n class=\"chart-legend\"\n [class.chart-legend--vertical]=\"isVerticalLegend\"\n [class.chart-legend--scrollable]=\"isScrollableLegend\"\n [class.chart-legend--wrap]=\"!isScrollableLegend\"\n [class.chart-legend--limited-wrap]=\"isLimitedWrapLegend\"\n [ngClass]=\"config.className || null\"\n [style.--legend-text-color]=\"config.legendTextColor || null\"\n [style.--legend-font-size]=\"config.legendFontSize ? config.legendFontSize + 'px' : null\"\n [style.max-height]=\"config.maxHeight || null\"\n [style.padding]=\"config.padding || '1rem'\"\n [attr.aria-label]=\"config.ariaLabel || 'Chart legend'\"\n >\n <div class=\"chart-legend__viewport\">\n @if (config.title) {\n <p class=\"chart-legend-title\">{{ config.title }}</p>\n }\n @if (usesInternalLegendScroll && canScrollLegend) {\n <button\n type=\"button\"\n class=\"chart-legend__scroll-button chart-legend__scroll-button--start\"\n [disabled]=\"!canScrollStart\"\n (click)=\"scrollLegend(-1, $event)\"\n [attr.aria-label]=\"scrollStartAriaLabel\"\n >\n <img\n src=\"images/legend_left.svg\"\n [class.chart-legend__scroll-icon--up]=\"scrollsVertically\"\n alt=\"left\"\n />\n </button>\n }\n\n <div #itemsScroller class=\"chart-legend__scroller\" (scroll)=\"updateScrollState()\">\n <div\n class=\"chart-legend__items\"\n role=\"list\"\n [class.chart-legend__items--center]=\"\n isLegendAlignedCenter && (!usesInternalLegendScroll || !canScrollLegend)\n \"\n [class.chart-legend__items--end]=\"isLegendAlignedEnd\"\n >\n @for (group of groupedItems; track trackByGroup($index, group)) {\n @if (group.group) {\n <div class=\"chart-legend__group-label\">{{ group.group }}</div>\n }\n\n @for (item of group.items; track trackByItem($index, item)) {\n <button\n type=\"button\"\n class=\"chart-legend__item\"\n role=\"switch\"\n [class.chart-legend__item--off]=\"!item.selected\"\n [class.chart-legend__item--disabled]=\"item.disabled\"\n [class.chart-legend__item--hovered]=\"state.hoveredName === item.name\"\n [disabled]=\"item.disabled\"\n [attr.aria-checked]=\"item.selected\"\n [attr.aria-label]=\"item.label\"\n [style.--legend-item-color]=\"item.color\"\n [title]=\"itemTitle(item)\"\n (click)=\"toggle(item, $event)\"\n (keydown.enter)=\"toggle(item, $event)\"\n (keydown.space)=\"toggle(item, $event)\"\n (mouseenter)=\"hover(item)\"\n (focus)=\"hover(item)\"\n (mouseleave)=\"leave(item)\"\n (blur)=\"leave(item)\"\n >\n @if (templateFor(item); as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"templateContext(item)\"\n ></ng-container>\n } @else {\n @switch (iconRenderType(item)) {\n @case ('image') {\n <img class=\"chart-legend__icon-image\" [src]=\"iconImageSrc(item)\" alt=\"\" />\n }\n @case ('path') {\n <svg\n class=\"chart-legend__icon-path\"\n viewBox=\"-512 -512 1024 1024\"\n aria-hidden=\"true\"\n >\n <path [attr.d]=\"iconPathData(item)\"></path>\n </svg>\n }\n @case ('shape') {\n <span\n class=\"chart-legend__icon\"\n [ngClass]=\"iconShapeClass(item)\"\n aria-hidden=\"true\"\n ></span>\n }\n }\n <span class=\"chart-legend__label\"\n >{{ item.label\n }}{{ this.config.showValue && this.config.valueFormatter && ':' }}</span\n >\n @if (this.config.showValue && this.config.valueFormatter) {\n <span class=\"chart-legend__value\">{{ this.config.valueFormatter(item) }}</span>\n }\n }\n </button>\n }\n }\n </div>\n </div>\n\n @if (usesInternalLegendScroll && canScrollLegend) {\n <button\n type=\"button\"\n class=\"chart-legend__scroll-button chart-legend__scroll-button--end\"\n [disabled]=\"!canScrollEnd\"\n (click)=\"scrollLegend(1, $event)\"\n [attr.aria-label]=\"scrollEndAriaLabel\"\n >\n <img\n src=\"images/legend_right.svg\"\n [class.chart-legend__scroll-icon--down]=\"scrollsVertically\"\n alt=\"right\"\n />\n </button>\n }\n </div>\n\n @if (config.showPagination && pageCount > 1) {\n <div class=\"chart-legend__pagination\" aria-label=\"Legend pages\">\n <button\n type=\"button\"\n class=\"chart-legend__page\"\n [disabled]=\"state.pageIndex === 0\"\n (click)=\"page(-1)\"\n aria-label=\"Previous legend page\"\n >\n <\n </button>\n <span class=\"chart-legend__page-count\">{{ state.pageIndex + 1 }} / {{ pageCount }}</span>\n <button\n type=\"button\"\n class=\"chart-legend__page\"\n [disabled]=\"state.pageIndex + 1 === pageCount\"\n (click)=\"page(1)\"\n aria-label=\"Next legend page\"\n >\n >\n </button>\n </div>\n }\n </nav>\n}\n", styles: [":host{display:block;min-height:0;min-width:0}.chart-legend{--legend-text-color: #040d17;--legend-muted-color: #8a94a6;--legend-border-color: #eaf3fd;--legend-hover-bg: rgba(15, 23, 42, .04);--legend-font-size: 14px;--legend-item-min-height: 28px;--legend-row-gap: 8px;--legend-column-gap: 12px;color:var(--legend-text-color);font-size:var(--legend-font-size);box-sizing:border-box;min-height:0;min-width:0;width:100%}:host-context(.dark) .chart-legend,:host-context([data-theme=dark]) .chart-legend{--legend-text-color: #e5e7eb;--legend-muted-color: #9ca3af;--legend-border-color: #374151;--legend-hover-bg: rgba(255, 255, 255, .08)}.chart-legend__viewport{align-items:center;display:flex;gap:4px;min-width:0;width:100%}.chart-legend__viewport .chart-legend-title{white-space:nowrap;font-weight:400;font-size:14px;margin:0 8px 0 0}.chart-legend__scroller{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:hidden;scrollbar-width:none}.chart-legend__scroller::-webkit-scrollbar{display:none}.chart-legend--scrollable .chart-legend__scroller{overflow-x:auto;overscroll-behavior-x:contain}.chart-legend--scrollable .chart-legend__scroller::-webkit-scrollbar{display:block;height:6px}.chart-legend__items{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--legend-row-gap) var(--legend-column-gap);min-width:0}.chart-legend--scrollable .chart-legend__items{min-width:max-content}.chart-legend--wrap:not(.chart-legend--vertical) .chart-legend__items{flex-wrap:wrap;width:100%}.chart-legend--limited-wrap:not(.chart-legend--vertical) .chart-legend__scroller{max-height:calc(var(--legend-item-min-height) * 2 + var(--legend-row-gap));overflow-y:auto;overscroll-behavior-y:contain}.chart-legend--vertical{height:100%}.chart-legend--vertical .chart-legend__viewport{align-items:stretch;flex-direction:column;height:100%;min-height:0}.chart-legend--vertical .chart-legend__scroller{overflow-x:hidden;overflow-y:hidden}.chart-legend--vertical.chart-legend--scrollable .chart-legend__scroller{overflow-y:auto;overscroll-behavior-y:contain}.chart-legend--vertical .chart-legend__items{align-items:stretch;flex-direction:column;min-width:0;width:100%;height:100%}.chart-legend--vertical.chart-legend--wrap .chart-legend__items{align-content:start;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-template-rows:repeat(auto-fit,minmax(28px,max-content));height:100%;justify-content:start;width:auto}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__viewport{flex-direction:row}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__scroller{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__items{grid-auto-columns:minmax(1,calc((100% - var(--legend-column-gap)) / 2));width:max-content}.chart-legend__items--center{justify-content:center}.chart-legend__items--end{justify-content:flex-end}.chart-legend--vertical.chart-legend--wrap .chart-legend__items--center{align-content:center;justify-content:start}.chart-legend--vertical.chart-legend--wrap .chart-legend__items--end{align-content:end;justify-content:start}.chart-legend__group-label{flex:0 0 auto;color:var(--legend-muted-color);font-size:12px;font-weight:600;line-height:1.2;margin-top:4px}.chart-legend__item{--legend-item-color: #64748b;align-items:center;background:color-mix(in srgb,var(--legend-item-color) 4%,transparent);border:1px solid color-mix(in srgb,var(--legend-item-color) 25%,transparent);border-radius:4px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:8px;line-height:1.2;min-height:28px;min-width:0;padding:4px 8px;touch-action:manipulation;transition:background-color .14s ease,border-color .14s ease,opacity .14s ease}.chart-legend--vertical .chart-legend__item{justify-content:flex-start;width:100%}.chart-legend--vertical.chart-legend--wrap .chart-legend__item{width:auto}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__item{width:100%}.chart-legend__scroll-button{align-items:center;background:transparent;border:1px solid var(--legend-border-color);border-radius:6px;color:inherit;cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;height:28px;justify-content:center;line-height:1;width:28px}.chart-legend--vertical .chart-legend__scroll-button{width:100%}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__scroll-button{height:auto;min-height:28px;width:28px}.chart-legend__scroll-button img{display:block;height:10px;width:10px}.chart-legend__scroll-icon--up,.chart-legend__scroll-icon--down{transform:rotate(90deg)}.chart-legend__scroll-button:disabled{cursor:default;opacity:.42}.chart-legend__item:hover,.chart-legend__item:focus-visible,.chart-legend__item--hovered{outline:none}.chart-legend__item--off{color:var(--legend-muted-color);filter:grayscale(1);opacity:.68}.chart-legend__item--disabled{cursor:not-allowed;opacity:.48}.chart-legend__icon,.chart-legend__icon-image,.chart-legend__icon-path{--legend-icon-size: 12px;background:var(--legend-item-color);box-sizing:border-box;display:inline-block;flex:0 0 auto;height:var(--legend-icon-size);width:var(--legend-icon-size)}.chart-legend__icon-image,.chart-legend__icon-path{background:transparent;object-fit:contain}.chart-legend__icon-path path{fill:var(--legend-item-color);stroke:var(--legend-item-color)}.chart-legend__icon--line,.chart-legend__icon--emptyLine{border-radius:999px;background:linear-gradient(to bottom,transparent 0 4px,var(--legend-item-color) 4px 6px,transparent 6px 100%)}.chart-legend__icon--emptyLine{background:linear-gradient(to bottom,transparent 0 4px,var(--legend-item-color) 4px 6px,transparent 6px 100%)}.chart-legend__icon--area{background:linear-gradient(to bottom,var(--legend-item-color),color-mix(in srgb,var(--legend-item-color) 12%,transparent));border-top:3px solid var(--legend-item-color)}.chart-legend__icon--circle{border-radius:50%}.chart-legend__icon--emptyCircle{background:transparent;border:2px solid var(--legend-item-color);border-radius:50%}.chart-legend__icon--rect,.chart-legend__icon--emptyRect,.chart-legend__icon--square,.chart-legend__icon--emptySquare{border-radius:2px}.chart-legend__icon--emptyRect,.chart-legend__icon--emptySquare{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--roundRect,.chart-legend__icon--emptyRoundRect{border-radius:6px}.chart-legend__icon--emptyRoundRect{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--triangle,.chart-legend__icon--emptyTriangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.chart-legend__icon--emptyTriangle{background:var(--legend-item-color)}.chart-legend__icon--diamond,.chart-legend__icon--emptyDiamond{transform:rotate(45deg)}.chart-legend__icon--emptyDiamond{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--pin,.chart-legend__icon--emptyPin{border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.chart-legend__icon--emptyPin{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--arrow,.chart-legend__icon--emptyArrow{clip-path:polygon(0 35%,58% 35%,58% 10%,100% 50%,58% 90%,58% 65%,0 65%)}.chart-legend__icon--emptyArrow{opacity:.72}.chart-legend__item--off .chart-legend__icon,.chart-legend__item--off .chart-legend__icon-path path{filter:grayscale(1);opacity:.68}.chart-legend__item--off .chart-legend__icon--emptyCircle,.chart-legend__item--off .chart-legend__icon--emptyRect,.chart-legend__item--off .chart-legend__icon--emptyRoundRect,.chart-legend__item--off .chart-legend__icon--emptySquare,.chart-legend__item--off .chart-legend__icon--emptyDiamond,.chart-legend__item--off .chart-legend__icon--emptyPin,.chart-legend__item--off .chart-legend__icon--emptyLine{filter:grayscale(1);opacity:.68}.chart-legend__content{display:flex;align-items:center;justify-content:space-between;gap:1rem}.chart-legend__value{font-weight:600;font-size:14px}.chart-legend__item--off .chart-legend__icon--emptyTriangle{filter:grayscale(1);opacity:.68}.chart-legend__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.chart-legend__pagination{align-items:center;display:flex;gap:8px;justify-content:flex-end;margin-top:8px}.chart-legend__page{align-items:center;background:transparent;border:1px solid var(--legend-border-color);border-radius:6px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;height:28px;justify-content:center;width:28px}.chart-legend__page:disabled{cursor:default;opacity:.42}.chart-legend__page-count{color:var(--legend-muted-color);font-size:12px}@media (max-width: 640px){.chart-legend__items{padding-bottom:2px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
430
430
|
}
|
|
431
431
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartLegendComponent, decorators: [{
|
|
432
432
|
type: Component,
|
|
433
|
-
args: [{ selector: 'lib-chart-legend', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (config.enabled !== false) {\n <nav\n class=\"chart-legend\"\n [class.chart-legend--vertical]=\"isVerticalLegend\"\n [class.chart-legend--scrollable]=\"isScrollableLegend\"\n [class.chart-legend--wrap]=\"!isScrollableLegend\"\n [class.chart-legend--limited-wrap]=\"isLimitedWrapLegend\"\n [ngClass]=\"config.className || null\"\n [style.--legend-text-color]=\"config.legendTextColor || null\"\n [style.--legend-font-size]=\"config.legendFontSize ? config.legendFontSize + 'px' : null\"\n [style.max-height]=\"config.maxHeight || null\"\n [style.padding]=\"config.padding || '1rem'\"\n [attr.aria-label]=\"config.ariaLabel || 'Chart legend'\"\n >\n <div class=\"chart-legend__viewport\">\n @if (config.title) {\n <p class=\"chart-legend-title\">{{ config.title }}</p>\n }\n @if (usesInternalLegendScroll && canScrollLegend) {\n <button\n type=\"button\"\n class=\"chart-legend__scroll-button chart-legend__scroll-button--start\"\n [disabled]=\"!canScrollStart\"\n (click)=\"scrollLegend(-1, $event)\"\n [attr.aria-label]=\"scrollStartAriaLabel\"\n >\n <img\n src=\"images/legend_left.svg\"\n [class.chart-legend__scroll-icon--up]=\"scrollsVertically\"\n alt=\"left\"\n />\n </button>\n }\n\n <div #itemsScroller class=\"chart-legend__scroller\" (scroll)=\"updateScrollState()\">\n <div\n class=\"chart-legend__items\"\n role=\"list\"\n [class.chart-legend__items--center]=\"isLegendAlignedCenter\"\n [class.chart-legend__items--end]=\"isLegendAlignedEnd\"\n >\n @for (group of groupedItems; track trackByGroup($index, group)) {\n @if (group.group) {\n <div class=\"chart-legend__group-label\">{{ group.group }}</div>\n }\n\n @for (item of group.items; track trackByItem($index, item)) {\n <button\n type=\"button\"\n class=\"chart-legend__item\"\n role=\"switch\"\n [class.chart-legend__item--off]=\"!item.selected\"\n [class.chart-legend__item--disabled]=\"item.disabled\"\n [class.chart-legend__item--hovered]=\"state.hoveredName === item.name\"\n [disabled]=\"item.disabled\"\n [attr.aria-checked]=\"item.selected\"\n [attr.aria-label]=\"item.label\"\n [style.--legend-item-color]=\"item.color\"\n [title]=\"itemTitle(item)\"\n (click)=\"toggle(item, $event)\"\n (keydown.enter)=\"toggle(item, $event)\"\n (keydown.space)=\"toggle(item, $event)\"\n (mouseenter)=\"hover(item)\"\n (focus)=\"hover(item)\"\n (mouseleave)=\"leave(item)\"\n (blur)=\"leave(item)\"\n >\n @if (templateFor(item); as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"templateContext(item)\"\n ></ng-container>\n } @else {\n @switch (iconRenderType(item)) {\n @case ('image') {\n <img class=\"chart-legend__icon-image\" [src]=\"iconImageSrc(item)\" alt=\"\" />\n }\n @case ('path') {\n <svg\n class=\"chart-legend__icon-path\"\n viewBox=\"-512 -512 1024 1024\"\n aria-hidden=\"true\"\n >\n <path [attr.d]=\"iconPathData(item)\"></path>\n </svg>\n }\n @case ('shape') {\n <span\n class=\"chart-legend__icon\"\n [ngClass]=\"iconShapeClass(item)\"\n aria-hidden=\"true\"\n ></span>\n }\n }\n <span class=\"chart-legend__label\"\n >{{ item.label\n }}{{ this.config.showValue && this.config.valueFormatter && ':' }}</span\n >\n @if (this.config.showValue && this.config.valueFormatter) {\n <span class=\"chart-legend__value\">{{ this.config.valueFormatter(item) }}</span>\n }\n }\n </button>\n }\n }\n </div>\n </div>\n\n @if (usesInternalLegendScroll && canScrollLegend) {\n <button\n type=\"button\"\n class=\"chart-legend__scroll-button chart-legend__scroll-button--end\"\n [disabled]=\"!canScrollEnd\"\n (click)=\"scrollLegend(1, $event)\"\n [attr.aria-label]=\"scrollEndAriaLabel\"\n >\n <img\n src=\"images/legend_right.svg\"\n [class.chart-legend__scroll-icon--down]=\"scrollsVertically\"\n alt=\"right\"\n />\n </button>\n }\n </div>\n\n @if (config.showPagination && pageCount > 1) {\n <div class=\"chart-legend__pagination\" aria-label=\"Legend pages\">\n <button\n type=\"button\"\n class=\"chart-legend__page\"\n [disabled]=\"state.pageIndex === 0\"\n (click)=\"page(-1)\"\n aria-label=\"Previous legend page\"\n >\n <\n </button>\n <span class=\"chart-legend__page-count\">{{ state.pageIndex + 1 }} / {{ pageCount }}</span>\n <button\n type=\"button\"\n class=\"chart-legend__page\"\n [disabled]=\"state.pageIndex + 1 === pageCount\"\n (click)=\"page(1)\"\n aria-label=\"Next legend page\"\n >\n >\n </button>\n </div>\n }\n </nav>\n}\n", styles: [":host{display:block;min-height:0;min-width:0}.chart-legend{--legend-text-color: #040d17;--legend-muted-color: #8a94a6;--legend-border-color: #eaf3fd;--legend-hover-bg: rgba(15, 23, 42, .04);--legend-font-size: 14px;--legend-item-min-height: 28px;--legend-row-gap: 8px;--legend-column-gap: 12px;color:var(--legend-text-color);font-size:var(--legend-font-size);box-sizing:border-box;min-height:0;min-width:0;width:100%}:host-context(.dark) .chart-legend,:host-context([data-theme=dark]) .chart-legend{--legend-text-color: #e5e7eb;--legend-muted-color: #9ca3af;--legend-border-color: #374151;--legend-hover-bg: rgba(255, 255, 255, .08)}.chart-legend__viewport{align-items:center;display:flex;gap:4px;min-width:0;width:100%}.chart-legend__viewport .chart-legend-title{white-space:nowrap;font-weight:400;font-size:14px;margin:0 8px 0 0}.chart-legend__scroller{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:hidden;scrollbar-width:none}.chart-legend__scroller::-webkit-scrollbar{display:none}.chart-legend--scrollable .chart-legend__scroller{overflow-x:auto;overscroll-behavior-x:contain}.chart-legend--scrollable .chart-legend__scroller::-webkit-scrollbar{display:block;height:6px}.chart-legend__items{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--legend-row-gap) var(--legend-column-gap);min-width:0}.chart-legend--scrollable .chart-legend__items{min-width:max-content}.chart-legend--wrap:not(.chart-legend--vertical) .chart-legend__items{flex-wrap:wrap;width:100%}.chart-legend--limited-wrap:not(.chart-legend--vertical) .chart-legend__scroller{max-height:calc(var(--legend-item-min-height) * 2 + var(--legend-row-gap));overflow-y:auto;overscroll-behavior-y:contain}.chart-legend--vertical{height:100%}.chart-legend--vertical .chart-legend__viewport{align-items:stretch;flex-direction:column;height:100%;min-height:0}.chart-legend--vertical .chart-legend__scroller{overflow-x:hidden;overflow-y:hidden}.chart-legend--vertical.chart-legend--scrollable .chart-legend__scroller{overflow-y:auto;overscroll-behavior-y:contain}.chart-legend--vertical .chart-legend__items{align-items:stretch;flex-direction:column;min-width:0;width:100%;height:100%}.chart-legend--vertical.chart-legend--wrap .chart-legend__items{align-content:start;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-template-rows:repeat(auto-fit,minmax(28px,max-content));height:100%;justify-content:start;width:auto}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__viewport{flex-direction:row}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__scroller{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__items{grid-auto-columns:minmax(1,calc((100% - var(--legend-column-gap)) / 2));width:max-content}.chart-legend__items--center{justify-content:center}.chart-legend__items--end{justify-content:flex-end}.chart-legend--vertical.chart-legend--wrap .chart-legend__items--center{align-content:center;justify-content:start}.chart-legend--vertical.chart-legend--wrap .chart-legend__items--end{align-content:end;justify-content:start}.chart-legend__group-label{flex:0 0 auto;color:var(--legend-muted-color);font-size:12px;font-weight:600;line-height:1.2;margin-top:4px}.chart-legend__item{--legend-item-color: #64748b;align-items:center;background:color-mix(in srgb,var(--legend-item-color) 4%,transparent);border:1px solid color-mix(in srgb,var(--legend-item-color) 25%,transparent);border-radius:4px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:8px;line-height:1.2;min-height:28px;min-width:0;padding:4px 8px;touch-action:manipulation;transition:background-color .14s ease,border-color .14s ease,opacity .14s ease}.chart-legend--vertical .chart-legend__item{justify-content:flex-start;width:100%}.chart-legend--vertical.chart-legend--wrap .chart-legend__item{width:auto}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__item{width:100%}.chart-legend__scroll-button{align-items:center;background:transparent;border:1px solid var(--legend-border-color);border-radius:6px;color:inherit;cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;height:28px;justify-content:center;line-height:1;width:28px}.chart-legend--vertical .chart-legend__scroll-button{width:100%}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__scroll-button{height:auto;min-height:28px;width:28px}.chart-legend__scroll-button img{display:block;height:10px;width:10px}.chart-legend__scroll-icon--up,.chart-legend__scroll-icon--down{transform:rotate(90deg)}.chart-legend__scroll-button:disabled{cursor:default;opacity:.42}.chart-legend__item:hover,.chart-legend__item:focus-visible,.chart-legend__item--hovered{outline:none}.chart-legend__item--off{color:var(--legend-muted-color);filter:grayscale(1);opacity:.68}.chart-legend__item--disabled{cursor:not-allowed;opacity:.48}.chart-legend__icon,.chart-legend__icon-image,.chart-legend__icon-path{--legend-icon-size: 12px;background:var(--legend-item-color);box-sizing:border-box;display:inline-block;flex:0 0 auto;height:var(--legend-icon-size);width:var(--legend-icon-size)}.chart-legend__icon-image,.chart-legend__icon-path{background:transparent;object-fit:contain}.chart-legend__icon-path path{fill:var(--legend-item-color);stroke:var(--legend-item-color)}.chart-legend__icon--line,.chart-legend__icon--emptyLine{border-radius:999px;background:linear-gradient(to bottom,transparent 0 4px,var(--legend-item-color) 4px 6px,transparent 6px 100%)}.chart-legend__icon--emptyLine{background:linear-gradient(to bottom,transparent 0 4px,var(--legend-item-color) 4px 6px,transparent 6px 100%)}.chart-legend__icon--area{background:linear-gradient(to bottom,var(--legend-item-color),color-mix(in srgb,var(--legend-item-color) 12%,transparent));border-top:3px solid var(--legend-item-color)}.chart-legend__icon--circle{border-radius:50%}.chart-legend__icon--emptyCircle{background:transparent;border:2px solid var(--legend-item-color);border-radius:50%}.chart-legend__icon--rect,.chart-legend__icon--emptyRect,.chart-legend__icon--square,.chart-legend__icon--emptySquare{border-radius:2px}.chart-legend__icon--emptyRect,.chart-legend__icon--emptySquare{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--roundRect,.chart-legend__icon--emptyRoundRect{border-radius:6px}.chart-legend__icon--emptyRoundRect{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--triangle,.chart-legend__icon--emptyTriangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.chart-legend__icon--emptyTriangle{background:var(--legend-item-color)}.chart-legend__icon--diamond,.chart-legend__icon--emptyDiamond{transform:rotate(45deg)}.chart-legend__icon--emptyDiamond{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--pin,.chart-legend__icon--emptyPin{border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.chart-legend__icon--emptyPin{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--arrow,.chart-legend__icon--emptyArrow{clip-path:polygon(0 35%,58% 35%,58% 10%,100% 50%,58% 90%,58% 65%,0 65%)}.chart-legend__icon--emptyArrow{opacity:.72}.chart-legend__item--off .chart-legend__icon,.chart-legend__item--off .chart-legend__icon-path path{filter:grayscale(1);opacity:.68}.chart-legend__item--off .chart-legend__icon--emptyCircle,.chart-legend__item--off .chart-legend__icon--emptyRect,.chart-legend__item--off .chart-legend__icon--emptyRoundRect,.chart-legend__item--off .chart-legend__icon--emptySquare,.chart-legend__item--off .chart-legend__icon--emptyDiamond,.chart-legend__item--off .chart-legend__icon--emptyPin,.chart-legend__item--off .chart-legend__icon--emptyLine{filter:grayscale(1);opacity:.68}.chart-legend__content{display:flex;align-items:center;justify-content:space-between;gap:1rem}.chart-legend__value{font-weight:600;font-size:14px}.chart-legend__item--off .chart-legend__icon--emptyTriangle{filter:grayscale(1);opacity:.68}.chart-legend__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.chart-legend__pagination{align-items:center;display:flex;gap:8px;justify-content:flex-end;margin-top:8px}.chart-legend__page{align-items:center;background:transparent;border:1px solid var(--legend-border-color);border-radius:6px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;height:28px;justify-content:center;width:28px}.chart-legend__page:disabled{cursor:default;opacity:.42}.chart-legend__page-count{color:var(--legend-muted-color);font-size:12px}@media (max-width: 640px){.chart-legend__items{padding-bottom:2px}}\n"] }]
|
|
433
|
+
args: [{ selector: 'lib-chart-legend', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (config.enabled !== false) {\n <nav\n class=\"chart-legend\"\n [class.chart-legend--vertical]=\"isVerticalLegend\"\n [class.chart-legend--scrollable]=\"isScrollableLegend\"\n [class.chart-legend--wrap]=\"!isScrollableLegend\"\n [class.chart-legend--limited-wrap]=\"isLimitedWrapLegend\"\n [ngClass]=\"config.className || null\"\n [style.--legend-text-color]=\"config.legendTextColor || null\"\n [style.--legend-font-size]=\"config.legendFontSize ? config.legendFontSize + 'px' : null\"\n [style.max-height]=\"config.maxHeight || null\"\n [style.padding]=\"config.padding || '1rem'\"\n [attr.aria-label]=\"config.ariaLabel || 'Chart legend'\"\n >\n <div class=\"chart-legend__viewport\">\n @if (config.title) {\n <p class=\"chart-legend-title\">{{ config.title }}</p>\n }\n @if (usesInternalLegendScroll && canScrollLegend) {\n <button\n type=\"button\"\n class=\"chart-legend__scroll-button chart-legend__scroll-button--start\"\n [disabled]=\"!canScrollStart\"\n (click)=\"scrollLegend(-1, $event)\"\n [attr.aria-label]=\"scrollStartAriaLabel\"\n >\n <img\n src=\"images/legend_left.svg\"\n [class.chart-legend__scroll-icon--up]=\"scrollsVertically\"\n alt=\"left\"\n />\n </button>\n }\n\n <div #itemsScroller class=\"chart-legend__scroller\" (scroll)=\"updateScrollState()\">\n <div\n class=\"chart-legend__items\"\n role=\"list\"\n [class.chart-legend__items--center]=\"\n isLegendAlignedCenter && (!usesInternalLegendScroll || !canScrollLegend)\n \"\n [class.chart-legend__items--end]=\"isLegendAlignedEnd\"\n >\n @for (group of groupedItems; track trackByGroup($index, group)) {\n @if (group.group) {\n <div class=\"chart-legend__group-label\">{{ group.group }}</div>\n }\n\n @for (item of group.items; track trackByItem($index, item)) {\n <button\n type=\"button\"\n class=\"chart-legend__item\"\n role=\"switch\"\n [class.chart-legend__item--off]=\"!item.selected\"\n [class.chart-legend__item--disabled]=\"item.disabled\"\n [class.chart-legend__item--hovered]=\"state.hoveredName === item.name\"\n [disabled]=\"item.disabled\"\n [attr.aria-checked]=\"item.selected\"\n [attr.aria-label]=\"item.label\"\n [style.--legend-item-color]=\"item.color\"\n [title]=\"itemTitle(item)\"\n (click)=\"toggle(item, $event)\"\n (keydown.enter)=\"toggle(item, $event)\"\n (keydown.space)=\"toggle(item, $event)\"\n (mouseenter)=\"hover(item)\"\n (focus)=\"hover(item)\"\n (mouseleave)=\"leave(item)\"\n (blur)=\"leave(item)\"\n >\n @if (templateFor(item); as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"templateContext(item)\"\n ></ng-container>\n } @else {\n @switch (iconRenderType(item)) {\n @case ('image') {\n <img class=\"chart-legend__icon-image\" [src]=\"iconImageSrc(item)\" alt=\"\" />\n }\n @case ('path') {\n <svg\n class=\"chart-legend__icon-path\"\n viewBox=\"-512 -512 1024 1024\"\n aria-hidden=\"true\"\n >\n <path [attr.d]=\"iconPathData(item)\"></path>\n </svg>\n }\n @case ('shape') {\n <span\n class=\"chart-legend__icon\"\n [ngClass]=\"iconShapeClass(item)\"\n aria-hidden=\"true\"\n ></span>\n }\n }\n <span class=\"chart-legend__label\"\n >{{ item.label\n }}{{ this.config.showValue && this.config.valueFormatter && ':' }}</span\n >\n @if (this.config.showValue && this.config.valueFormatter) {\n <span class=\"chart-legend__value\">{{ this.config.valueFormatter(item) }}</span>\n }\n }\n </button>\n }\n }\n </div>\n </div>\n\n @if (usesInternalLegendScroll && canScrollLegend) {\n <button\n type=\"button\"\n class=\"chart-legend__scroll-button chart-legend__scroll-button--end\"\n [disabled]=\"!canScrollEnd\"\n (click)=\"scrollLegend(1, $event)\"\n [attr.aria-label]=\"scrollEndAriaLabel\"\n >\n <img\n src=\"images/legend_right.svg\"\n [class.chart-legend__scroll-icon--down]=\"scrollsVertically\"\n alt=\"right\"\n />\n </button>\n }\n </div>\n\n @if (config.showPagination && pageCount > 1) {\n <div class=\"chart-legend__pagination\" aria-label=\"Legend pages\">\n <button\n type=\"button\"\n class=\"chart-legend__page\"\n [disabled]=\"state.pageIndex === 0\"\n (click)=\"page(-1)\"\n aria-label=\"Previous legend page\"\n >\n <\n </button>\n <span class=\"chart-legend__page-count\">{{ state.pageIndex + 1 }} / {{ pageCount }}</span>\n <button\n type=\"button\"\n class=\"chart-legend__page\"\n [disabled]=\"state.pageIndex + 1 === pageCount\"\n (click)=\"page(1)\"\n aria-label=\"Next legend page\"\n >\n >\n </button>\n </div>\n }\n </nav>\n}\n", styles: [":host{display:block;min-height:0;min-width:0}.chart-legend{--legend-text-color: #040d17;--legend-muted-color: #8a94a6;--legend-border-color: #eaf3fd;--legend-hover-bg: rgba(15, 23, 42, .04);--legend-font-size: 14px;--legend-item-min-height: 28px;--legend-row-gap: 8px;--legend-column-gap: 12px;color:var(--legend-text-color);font-size:var(--legend-font-size);box-sizing:border-box;min-height:0;min-width:0;width:100%}:host-context(.dark) .chart-legend,:host-context([data-theme=dark]) .chart-legend{--legend-text-color: #e5e7eb;--legend-muted-color: #9ca3af;--legend-border-color: #374151;--legend-hover-bg: rgba(255, 255, 255, .08)}.chart-legend__viewport{align-items:center;display:flex;gap:4px;min-width:0;width:100%}.chart-legend__viewport .chart-legend-title{white-space:nowrap;font-weight:400;font-size:14px;margin:0 8px 0 0}.chart-legend__scroller{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:hidden;scrollbar-width:none}.chart-legend__scroller::-webkit-scrollbar{display:none}.chart-legend--scrollable .chart-legend__scroller{overflow-x:auto;overscroll-behavior-x:contain}.chart-legend--scrollable .chart-legend__scroller::-webkit-scrollbar{display:block;height:6px}.chart-legend__items{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--legend-row-gap) var(--legend-column-gap);min-width:0}.chart-legend--scrollable .chart-legend__items{min-width:max-content}.chart-legend--wrap:not(.chart-legend--vertical) .chart-legend__items{flex-wrap:wrap;width:100%}.chart-legend--limited-wrap:not(.chart-legend--vertical) .chart-legend__scroller{max-height:calc(var(--legend-item-min-height) * 2 + var(--legend-row-gap));overflow-y:auto;overscroll-behavior-y:contain}.chart-legend--vertical{height:100%}.chart-legend--vertical .chart-legend__viewport{align-items:stretch;flex-direction:column;height:100%;min-height:0}.chart-legend--vertical .chart-legend__scroller{overflow-x:hidden;overflow-y:hidden}.chart-legend--vertical.chart-legend--scrollable .chart-legend__scroller{overflow-y:auto;overscroll-behavior-y:contain}.chart-legend--vertical .chart-legend__items{align-items:stretch;flex-direction:column;min-width:0;width:100%;height:100%}.chart-legend--vertical.chart-legend--wrap .chart-legend__items{align-content:start;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-template-rows:repeat(auto-fit,minmax(28px,max-content));height:100%;justify-content:start;width:auto}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__viewport{flex-direction:row}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__scroller{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__items{grid-auto-columns:minmax(1,calc((100% - var(--legend-column-gap)) / 2));width:max-content}.chart-legend__items--center{justify-content:center}.chart-legend__items--end{justify-content:flex-end}.chart-legend--vertical.chart-legend--wrap .chart-legend__items--center{align-content:center;justify-content:start}.chart-legend--vertical.chart-legend--wrap .chart-legend__items--end{align-content:end;justify-content:start}.chart-legend__group-label{flex:0 0 auto;color:var(--legend-muted-color);font-size:12px;font-weight:600;line-height:1.2;margin-top:4px}.chart-legend__item{--legend-item-color: #64748b;align-items:center;background:color-mix(in srgb,var(--legend-item-color) 4%,transparent);border:1px solid color-mix(in srgb,var(--legend-item-color) 25%,transparent);border-radius:4px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:8px;line-height:1.2;min-height:28px;min-width:0;padding:4px 8px;touch-action:manipulation;transition:background-color .14s ease,border-color .14s ease,opacity .14s ease}.chart-legend--vertical .chart-legend__item{justify-content:flex-start;width:100%}.chart-legend--vertical.chart-legend--wrap .chart-legend__item{width:auto}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__item{width:100%}.chart-legend__scroll-button{align-items:center;background:transparent;border:1px solid var(--legend-border-color);border-radius:6px;color:inherit;cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;height:28px;justify-content:center;line-height:1;width:28px}.chart-legend--vertical .chart-legend__scroll-button{width:100%}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__scroll-button{height:auto;min-height:28px;width:28px}.chart-legend__scroll-button img{display:block;height:10px;width:10px}.chart-legend__scroll-icon--up,.chart-legend__scroll-icon--down{transform:rotate(90deg)}.chart-legend__scroll-button:disabled{cursor:default;opacity:.42}.chart-legend__item:hover,.chart-legend__item:focus-visible,.chart-legend__item--hovered{outline:none}.chart-legend__item--off{color:var(--legend-muted-color);filter:grayscale(1);opacity:.68}.chart-legend__item--disabled{cursor:not-allowed;opacity:.48}.chart-legend__icon,.chart-legend__icon-image,.chart-legend__icon-path{--legend-icon-size: 12px;background:var(--legend-item-color);box-sizing:border-box;display:inline-block;flex:0 0 auto;height:var(--legend-icon-size);width:var(--legend-icon-size)}.chart-legend__icon-image,.chart-legend__icon-path{background:transparent;object-fit:contain}.chart-legend__icon-path path{fill:var(--legend-item-color);stroke:var(--legend-item-color)}.chart-legend__icon--line,.chart-legend__icon--emptyLine{border-radius:999px;background:linear-gradient(to bottom,transparent 0 4px,var(--legend-item-color) 4px 6px,transparent 6px 100%)}.chart-legend__icon--emptyLine{background:linear-gradient(to bottom,transparent 0 4px,var(--legend-item-color) 4px 6px,transparent 6px 100%)}.chart-legend__icon--area{background:linear-gradient(to bottom,var(--legend-item-color),color-mix(in srgb,var(--legend-item-color) 12%,transparent));border-top:3px solid var(--legend-item-color)}.chart-legend__icon--circle{border-radius:50%}.chart-legend__icon--emptyCircle{background:transparent;border:2px solid var(--legend-item-color);border-radius:50%}.chart-legend__icon--rect,.chart-legend__icon--emptyRect,.chart-legend__icon--square,.chart-legend__icon--emptySquare{border-radius:2px}.chart-legend__icon--emptyRect,.chart-legend__icon--emptySquare{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--roundRect,.chart-legend__icon--emptyRoundRect{border-radius:6px}.chart-legend__icon--emptyRoundRect{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--triangle,.chart-legend__icon--emptyTriangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.chart-legend__icon--emptyTriangle{background:var(--legend-item-color)}.chart-legend__icon--diamond,.chart-legend__icon--emptyDiamond{transform:rotate(45deg)}.chart-legend__icon--emptyDiamond{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--pin,.chart-legend__icon--emptyPin{border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.chart-legend__icon--emptyPin{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--arrow,.chart-legend__icon--emptyArrow{clip-path:polygon(0 35%,58% 35%,58% 10%,100% 50%,58% 90%,58% 65%,0 65%)}.chart-legend__icon--emptyArrow{opacity:.72}.chart-legend__item--off .chart-legend__icon,.chart-legend__item--off .chart-legend__icon-path path{filter:grayscale(1);opacity:.68}.chart-legend__item--off .chart-legend__icon--emptyCircle,.chart-legend__item--off .chart-legend__icon--emptyRect,.chart-legend__item--off .chart-legend__icon--emptyRoundRect,.chart-legend__item--off .chart-legend__icon--emptySquare,.chart-legend__item--off .chart-legend__icon--emptyDiamond,.chart-legend__item--off .chart-legend__icon--emptyPin,.chart-legend__item--off .chart-legend__icon--emptyLine{filter:grayscale(1);opacity:.68}.chart-legend__content{display:flex;align-items:center;justify-content:space-between;gap:1rem}.chart-legend__value{font-weight:600;font-size:14px}.chart-legend__item--off .chart-legend__icon--emptyTriangle{filter:grayscale(1);opacity:.68}.chart-legend__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.chart-legend__pagination{align-items:center;display:flex;gap:8px;justify-content:flex-end;margin-top:8px}.chart-legend__page{align-items:center;background:transparent;border:1px solid var(--legend-border-color);border-radius:6px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;height:28px;justify-content:center;width:28px}.chart-legend__page:disabled{cursor:default;opacity:.42}.chart-legend__page-count{color:var(--legend-muted-color);font-size:12px}@media (max-width: 640px){.chart-legend__items{padding-bottom:2px}}\n"] }]
|
|
434
434
|
}], ctorParameters: () => [{ type: ChartLegendAdapter }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
435
435
|
type: Inject,
|
|
436
436
|
args: [PLATFORM_ID]
|
|
@@ -2655,51 +2655,61 @@ class DoughnutChart {
|
|
|
2655
2655
|
selected,
|
|
2656
2656
|
selectedMode,
|
|
2657
2657
|
},
|
|
2658
|
-
series:
|
|
2659
|
-
{
|
|
2660
|
-
type: 'pie',
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
show: this.config
|
|
2672
|
-
position: '
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
:
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2658
|
+
series: this.config.series?.length
|
|
2659
|
+
? this.config.series.map((s) => {
|
|
2660
|
+
return { type: 'pie', ...s };
|
|
2661
|
+
})
|
|
2662
|
+
: [
|
|
2663
|
+
{
|
|
2664
|
+
type: 'pie',
|
|
2665
|
+
top: this.config.top ?? 0,
|
|
2666
|
+
bottom: this.config.bottom ?? 0,
|
|
2667
|
+
radius: [innerRadius, outerRadius],
|
|
2668
|
+
center: this.config.center ?? ['50%', '50%'],
|
|
2669
|
+
data: seriesData,
|
|
2670
|
+
// label: {
|
|
2671
|
+
// show: this.config.showLabel ?? false,
|
|
2672
|
+
// position: this.config.labelPosition ?? 'outside',
|
|
2673
|
+
// },
|
|
2674
|
+
label: {
|
|
2675
|
+
show: this.config?.centerLabel?.show ?? false,
|
|
2676
|
+
position: 'center',
|
|
2677
|
+
formatter: (value) => {
|
|
2678
|
+
if (this.config?.centerLabel?.formatter) {
|
|
2679
|
+
return this.config.centerLabel.formatter(value, total, this.config.data);
|
|
2680
|
+
}
|
|
2681
|
+
const title = this.config?.centerLabel?.title || '';
|
|
2682
|
+
const centerValue = this.config?.centerLabel?.value;
|
|
2683
|
+
return `{title|${title}}${centerValue !== undefined && centerValue !== null && centerValue !== ''
|
|
2684
|
+
? `\n{desc|${centerValue}}`
|
|
2685
|
+
: ''}`;
|
|
2682
2686
|
},
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
|
|
2687
|
-
|
|
2687
|
+
rich: {
|
|
2688
|
+
title: {
|
|
2689
|
+
fontSize: this.config?.centerLabel?.fontSizeTitle || 12,
|
|
2690
|
+
fontWeight: this.config?.centerLabel?.fontWeightTitle || 400,
|
|
2691
|
+
color: this.config?.centerLabel?.titleColor || '#111827',
|
|
2692
|
+
lineHeight: this.config?.centerLabel?.titleLineheight || 20,
|
|
2693
|
+
},
|
|
2694
|
+
desc: {
|
|
2695
|
+
fontSize: this.config?.centerLabel?.fontSizeValue || 12,
|
|
2696
|
+
fontWeight: this.config?.centerLabel?.fontWeightValue || 600,
|
|
2697
|
+
color: this.config?.centerLabel?.valueColor || '#6B7280',
|
|
2698
|
+
lineHeight: this.config?.centerLabel?.valueLineheight || 20,
|
|
2699
|
+
},
|
|
2688
2700
|
},
|
|
2701
|
+
...(this.config?.label || {}),
|
|
2702
|
+
},
|
|
2703
|
+
itemStyle: {
|
|
2704
|
+
borderRadius: this.config.borderRadius ?? 8,
|
|
2705
|
+
borderColor: this.config.borderColor || '#fff',
|
|
2706
|
+
borderWidth: this.config.borderWidth ?? 2,
|
|
2707
|
+
},
|
|
2708
|
+
emphasis: {
|
|
2709
|
+
scale: this.config.emphasisScale,
|
|
2689
2710
|
},
|
|
2690
|
-
...(this.config?.label || {}),
|
|
2691
|
-
},
|
|
2692
|
-
itemStyle: {
|
|
2693
|
-
borderRadius: this.config.borderRadius ?? 8,
|
|
2694
|
-
borderColor: this.config.borderColor || '#fff',
|
|
2695
|
-
borderWidth: this.config.borderWidth ?? 2,
|
|
2696
|
-
},
|
|
2697
|
-
emphasis: {
|
|
2698
|
-
scale: this.config.emphasisScale,
|
|
2699
2711
|
},
|
|
2700
|
-
|
|
2701
|
-
},
|
|
2702
|
-
],
|
|
2712
|
+
],
|
|
2703
2713
|
};
|
|
2704
2714
|
}
|
|
2705
2715
|
get hasSideLegendWidth() {
|