cats-charts 0.0.56 → 0.0.58
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 +418 -136
- package/fesm2022/cats-charts.mjs.map +1 -1
- package/index.d.ts +46 -45
- package/package.json +1 -1
package/fesm2022/cats-charts.mjs
CHANGED
|
@@ -35,7 +35,8 @@ class ChartLegendAdapter {
|
|
|
35
35
|
return series
|
|
36
36
|
.map((seriesItem, index) => {
|
|
37
37
|
const name = String(seriesItem.name ?? `Series ${index + 1}`);
|
|
38
|
-
const color = seriesItem
|
|
38
|
+
const color = seriesItem?.color ??
|
|
39
|
+
seriesItem.itemStyle?.color ??
|
|
39
40
|
seriesItem.lineStyle?.color ??
|
|
40
41
|
colors[index % Math.max(colors.length, 1)] ??
|
|
41
42
|
'#64748b';
|
|
@@ -304,7 +305,7 @@ class ChartLegendComponent {
|
|
|
304
305
|
return;
|
|
305
306
|
this.state = { ...this.state, hoveredName: item.name };
|
|
306
307
|
this.adapter.highlight(this.chart, item);
|
|
307
|
-
this.emit('highlight', item);
|
|
308
|
+
// this.emit('highlight', item);
|
|
308
309
|
this.cdr.markForCheck();
|
|
309
310
|
}
|
|
310
311
|
leave(item) {
|
|
@@ -312,7 +313,7 @@ class ChartLegendComponent {
|
|
|
312
313
|
return;
|
|
313
314
|
this.state = { ...this.state, hoveredName: null };
|
|
314
315
|
this.adapter.downplay(this.chart, item);
|
|
315
|
-
this.emit('downplay', item);
|
|
316
|
+
// this.emit('downplay', item);
|
|
316
317
|
this.cdr.markForCheck();
|
|
317
318
|
}
|
|
318
319
|
page(step) {
|
|
@@ -425,11 +426,11 @@ class ChartLegendComponent {
|
|
|
425
426
|
return typeof this.config.maxWidth === 'string' && this.config.maxWidth.trim().length > 0;
|
|
426
427
|
}
|
|
427
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 });
|
|
428
|
-
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 (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__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%}.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]=\"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
430
|
}
|
|
430
431
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartLegendComponent, decorators: [{
|
|
431
432
|
type: Component,
|
|
432
|
-
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 (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__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%}.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]=\"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
434
|
}], ctorParameters: () => [{ type: ChartLegendAdapter }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
434
435
|
type: Inject,
|
|
435
436
|
args: [PLATFORM_ID]
|
|
@@ -1364,6 +1365,9 @@ class LinesChart {
|
|
|
1364
1365
|
chartInstance;
|
|
1365
1366
|
cardPosition = { x: 0, y: 0 };
|
|
1366
1367
|
openCard = false;
|
|
1368
|
+
get deafultColors() {
|
|
1369
|
+
return this.chartService.defaultColors;
|
|
1370
|
+
}
|
|
1367
1371
|
get hasSideLegendWidth() {
|
|
1368
1372
|
return this.isSideLegend && !!this.config.customLegend?.maxWidth;
|
|
1369
1373
|
}
|
|
@@ -1392,7 +1396,6 @@ class LinesChart {
|
|
|
1392
1396
|
xAxisName: '',
|
|
1393
1397
|
yAxisName: '',
|
|
1394
1398
|
secondaryYAxisName: '',
|
|
1395
|
-
title: '',
|
|
1396
1399
|
};
|
|
1397
1400
|
ngDoCheck() {
|
|
1398
1401
|
if (!this.chartInstance || !this.config)
|
|
@@ -1423,12 +1426,6 @@ class LinesChart {
|
|
|
1423
1426
|
},
|
|
1424
1427
|
];
|
|
1425
1428
|
}
|
|
1426
|
-
if (this.previousConfig.title !== this.config.title) {
|
|
1427
|
-
this.previousConfig.title = this.config.title;
|
|
1428
|
-
updateOption.title = {
|
|
1429
|
-
text: this.config?.title || '',
|
|
1430
|
-
};
|
|
1431
|
-
}
|
|
1432
1429
|
if (Object.keys(updateOption).length) {
|
|
1433
1430
|
this.chartInstance.setOption(updateOption);
|
|
1434
1431
|
}
|
|
@@ -1469,7 +1466,6 @@ class LinesChart {
|
|
|
1469
1466
|
right: this.config?.gridRight ?? 0,
|
|
1470
1467
|
bottom: this.config?.gridBottom ?? 0,
|
|
1471
1468
|
top: this.config?.gridTop ?? 0,
|
|
1472
|
-
containLabel: true,
|
|
1473
1469
|
},
|
|
1474
1470
|
xAxis: {
|
|
1475
1471
|
show: !this.config?.isTrendChart,
|
|
@@ -1477,12 +1473,35 @@ class LinesChart {
|
|
|
1477
1473
|
// boundaryGap: false,
|
|
1478
1474
|
data: this.config?.xAxisData,
|
|
1479
1475
|
axisLine: {
|
|
1480
|
-
show: this.config?.showXAxisLine ??
|
|
1476
|
+
show: this.config?.showXAxisLine ?? true,
|
|
1477
|
+
lineStyle: {
|
|
1478
|
+
color: '#C0C2C5',
|
|
1479
|
+
width: 1,
|
|
1480
|
+
},
|
|
1481
|
+
},
|
|
1482
|
+
axisTick: {
|
|
1483
|
+
show: false,
|
|
1484
|
+
},
|
|
1485
|
+
axisLabel: {
|
|
1486
|
+
show: this.config?.showXAxisLabel ?? true,
|
|
1487
|
+
color: '#434A51',
|
|
1488
|
+
fontSize: 12,
|
|
1481
1489
|
},
|
|
1482
|
-
containLabel: true,
|
|
1483
1490
|
name: this.config?.xAxisName || '',
|
|
1484
1491
|
nameLocation: 'center',
|
|
1485
|
-
|
|
1492
|
+
nameTextStyle: {
|
|
1493
|
+
color: '#434A51',
|
|
1494
|
+
fontSize: 14,
|
|
1495
|
+
fontWeight: 400,
|
|
1496
|
+
},
|
|
1497
|
+
splitLine: {
|
|
1498
|
+
show: this.config?.showXAxisSplitLine ?? true,
|
|
1499
|
+
lineStyle: {
|
|
1500
|
+
type: 'dashed',
|
|
1501
|
+
color: '#C0C2C5',
|
|
1502
|
+
width: 1,
|
|
1503
|
+
},
|
|
1504
|
+
},
|
|
1486
1505
|
...(this.config?.xAxis || {}),
|
|
1487
1506
|
},
|
|
1488
1507
|
yAxis: [
|
|
@@ -1491,12 +1510,26 @@ class LinesChart {
|
|
|
1491
1510
|
type: 'value',
|
|
1492
1511
|
boundaryGap: this.config?.isTrendChart ? [0.2] : undefined,
|
|
1493
1512
|
axisLine: {
|
|
1494
|
-
show: this.config?.showYAxisLine ??
|
|
1513
|
+
show: this.config?.showYAxisLine ?? true,
|
|
1514
|
+
lineStyle: {
|
|
1515
|
+
color: '#C0C2C5',
|
|
1516
|
+
width: 1,
|
|
1517
|
+
},
|
|
1518
|
+
},
|
|
1519
|
+
axisTick: {
|
|
1520
|
+
show: false,
|
|
1495
1521
|
},
|
|
1496
1522
|
name: this.config?.yAxisName || '',
|
|
1497
1523
|
nameLocation: 'center',
|
|
1498
|
-
|
|
1524
|
+
nameTextStyle: {
|
|
1525
|
+
color: '#434A51',
|
|
1526
|
+
fontSize: 14,
|
|
1527
|
+
fontWeight: 400,
|
|
1528
|
+
},
|
|
1499
1529
|
axisLabel: {
|
|
1530
|
+
show: this.config?.showYAxisLabel ?? true,
|
|
1531
|
+
color: '#434A51',
|
|
1532
|
+
fontSize: 12,
|
|
1500
1533
|
formatter: (value) => {
|
|
1501
1534
|
if (value === 0) {
|
|
1502
1535
|
return '0';
|
|
@@ -1526,7 +1559,15 @@ class LinesChart {
|
|
|
1526
1559
|
if (Number.isInteger(value)) {
|
|
1527
1560
|
return value.toString();
|
|
1528
1561
|
}
|
|
1529
|
-
return value
|
|
1562
|
+
return value;
|
|
1563
|
+
},
|
|
1564
|
+
},
|
|
1565
|
+
splitLine: {
|
|
1566
|
+
show: this.config?.showYAxisSplitLine ?? true,
|
|
1567
|
+
lineStyle: {
|
|
1568
|
+
type: 'dashed',
|
|
1569
|
+
color: '#C0C2C5',
|
|
1570
|
+
width: 1,
|
|
1530
1571
|
},
|
|
1531
1572
|
},
|
|
1532
1573
|
...(this.config?.yAxis || {}),
|
|
@@ -1538,9 +1579,19 @@ class LinesChart {
|
|
|
1538
1579
|
type: 'value',
|
|
1539
1580
|
boundaryGap: this.config?.isTrendChart ? [0.2] : undefined,
|
|
1540
1581
|
axisLine: {
|
|
1541
|
-
show: this.config?.showYAxisLine ??
|
|
1582
|
+
show: this.config?.showYAxisLine ?? true,
|
|
1583
|
+
lineStyle: {
|
|
1584
|
+
color: '#C0C2C5',
|
|
1585
|
+
width: 1,
|
|
1586
|
+
},
|
|
1587
|
+
},
|
|
1588
|
+
axisTick: {
|
|
1589
|
+
show: false,
|
|
1542
1590
|
},
|
|
1543
1591
|
axisLabel: {
|
|
1592
|
+
show: this.config?.showSecondaryYAxisLabel ?? true,
|
|
1593
|
+
color: '#434A51',
|
|
1594
|
+
fontSize: 12,
|
|
1544
1595
|
formatter: (value) => {
|
|
1545
1596
|
if (value === 0) {
|
|
1546
1597
|
return '0';
|
|
@@ -1570,13 +1621,24 @@ class LinesChart {
|
|
|
1570
1621
|
if (Number.isInteger(value)) {
|
|
1571
1622
|
return value.toString();
|
|
1572
1623
|
}
|
|
1573
|
-
return value
|
|
1624
|
+
return value;
|
|
1574
1625
|
},
|
|
1575
1626
|
},
|
|
1576
|
-
containLabel: true,
|
|
1577
1627
|
name: this.config?.secondaryYAxisName || '',
|
|
1578
1628
|
nameLocation: 'center',
|
|
1579
|
-
|
|
1629
|
+
nameTextStyle: {
|
|
1630
|
+
color: '#434A51',
|
|
1631
|
+
fontSize: 14,
|
|
1632
|
+
fontWeight: 400,
|
|
1633
|
+
},
|
|
1634
|
+
splitLine: {
|
|
1635
|
+
show: this.config?.showSecondaryYAxisSplitLine ?? true,
|
|
1636
|
+
lineStyle: {
|
|
1637
|
+
type: 'dashed',
|
|
1638
|
+
color: '#C0C2C5',
|
|
1639
|
+
width: 1,
|
|
1640
|
+
},
|
|
1641
|
+
},
|
|
1580
1642
|
...(this.config?.secondaryYAxisConfig || {}),
|
|
1581
1643
|
},
|
|
1582
1644
|
]
|
|
@@ -1750,11 +1812,11 @@ class LinesChart {
|
|
|
1750
1812
|
return { ...(option?.legend?.[0]?.selected ?? {}) };
|
|
1751
1813
|
}
|
|
1752
1814
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LinesChart, deps: [{ token: Charts }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1753
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LinesChart, isStandalone: true, selector: "lib-line-chart", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions", showContextMenu: "showContextMenu" }, outputs: { contextMenuClick: "contextMenuClick", chartEvent: "chartEvent", legendEvent: "legendEvent" }, host: { listeners: { "document:click": "closeCard()" } }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"line-chart-shell\"\n [class.line-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.line-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.line-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"line-chart-shell__legend\"\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors ||
|
|
1815
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LinesChart, isStandalone: true, selector: "lib-line-chart", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions", showContextMenu: "showContextMenu" }, outputs: { contextMenuClick: "contextMenuClick", chartEvent: "chartEvent", legendEvent: "legendEvent" }, host: { listeners: { "document:click": "closeCard()" } }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"line-chart-shell\"\n [class.line-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.line-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.line-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"line-chart-shell__legend\"\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n (chartInit)=\"onChartInit($event)\"\n class=\"chart-container\"\n ></div>\n\n @if (\n !config.hideLegend &&\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\n ) {\n <lib-chart-legend\n class=\"line-chart-shell__legend\"\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n</div>\n@if (openCard) {\n <lib-right-click-card\n [cardOptions]=\"contextMenuOptions\"\n (contextMenuClick)=\"onMenuClick($event)\"\n [cardPosition]=\"cardPosition\"\n ></lib-right-click-card>\n}\n", styles: [".line-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.line-chart-shell--legend-left,.line-chart-shell--legend-right{flex-direction:row}.line-chart-shell--legend-bottom{flex-direction:column}.line-chart-shell__legend{flex:0 0 auto;min-width:0}.line-chart-shell--legend-left .line-chart-shell__legend,.line-chart-shell--legend-right .line-chart-shell__legend{height:100%;max-width:min(var(--line-chart-legend-max-width, 360px),70%);min-height:0}.chart-container{width:100%;height:100%;position:relative;flex:1 1 auto;min-height:0;min-width:0}@media (max-width: 640px){.line-chart-shell,.line-chart-shell--legend-left,.line-chart-shell--legend-right{flex-direction:column}.line-chart-shell--legend-left .line-chart-shell__legend,.line-chart-shell--legend-right .line-chart-shell__legend{flex-basis:auto;max-width:none;width:auto}}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "component", type: RightClickCard, selector: "lib-right-click-card", inputs: ["cardPosition", "cardOptions"], outputs: ["contextMenuClick"] }, { kind: "component", type: ChartLegendComponent, selector: "lib-chart-legend", inputs: ["chart", "series", "colors", "config", "itemTemplate"], outputs: ["legendEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1754
1816
|
}
|
|
1755
1817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LinesChart, decorators: [{
|
|
1756
1818
|
type: Component,
|
|
1757
|
-
args: [{ selector: 'lib-line-chart', standalone: true, imports: [NgxEchartsDirective, RightClickCard, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"line-chart-shell\"\n [class.line-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.line-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.line-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"line-chart-shell__legend\"\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors ||
|
|
1819
|
+
args: [{ selector: 'lib-line-chart', standalone: true, imports: [NgxEchartsDirective, RightClickCard, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"line-chart-shell\"\n [class.line-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.line-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.line-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"line-chart-shell__legend\"\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n (chartInit)=\"onChartInit($event)\"\n class=\"chart-container\"\n ></div>\n\n @if (\n !config.hideLegend &&\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\n ) {\n <lib-chart-legend\n class=\"line-chart-shell__legend\"\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n</div>\n@if (openCard) {\n <lib-right-click-card\n [cardOptions]=\"contextMenuOptions\"\n (contextMenuClick)=\"onMenuClick($event)\"\n [cardPosition]=\"cardPosition\"\n ></lib-right-click-card>\n}\n", styles: [".line-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.line-chart-shell--legend-left,.line-chart-shell--legend-right{flex-direction:row}.line-chart-shell--legend-bottom{flex-direction:column}.line-chart-shell__legend{flex:0 0 auto;min-width:0}.line-chart-shell--legend-left .line-chart-shell__legend,.line-chart-shell--legend-right .line-chart-shell__legend{height:100%;max-width:min(var(--line-chart-legend-max-width, 360px),70%);min-height:0}.chart-container{width:100%;height:100%;position:relative;flex:1 1 auto;min-height:0;min-width:0}@media (max-width: 640px){.line-chart-shell,.line-chart-shell--legend-left,.line-chart-shell--legend-right{flex-direction:column}.line-chart-shell--legend-left .line-chart-shell__legend,.line-chart-shell--legend-right .line-chart-shell__legend{flex-basis:auto;max-width:none;width:auto}}\n"] }]
|
|
1758
1820
|
}], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
|
|
1759
1821
|
type: Input
|
|
1760
1822
|
}], theme: [{
|
|
@@ -1785,20 +1847,24 @@ echarts.use([
|
|
|
1785
1847
|
DatasetComponent,
|
|
1786
1848
|
CanvasRenderer,
|
|
1787
1849
|
DataZoomComponent,
|
|
1850
|
+
ToolboxComponent,
|
|
1851
|
+
DataZoomInsideComponent,
|
|
1852
|
+
DataZoomComponent,
|
|
1853
|
+
MarkAreaComponent,
|
|
1854
|
+
MarkLineComponent,
|
|
1788
1855
|
]);
|
|
1789
1856
|
class BarChart {
|
|
1790
1857
|
chartService;
|
|
1791
1858
|
cdr;
|
|
1792
|
-
config;
|
|
1859
|
+
config = { xAxisData: [], series: [] };
|
|
1793
1860
|
theme;
|
|
1794
1861
|
events = [];
|
|
1795
1862
|
contextMenuOptions = [];
|
|
1796
1863
|
showContextMenu = false;
|
|
1797
1864
|
contextMenuClick = new EventEmitter();
|
|
1798
1865
|
chartEvent = new EventEmitter();
|
|
1866
|
+
legendEvent = new EventEmitter();
|
|
1799
1867
|
chartOption;
|
|
1800
|
-
legendConfig = {};
|
|
1801
|
-
legendSeries = [];
|
|
1802
1868
|
chartInstance;
|
|
1803
1869
|
cardPosition = { x: 0, y: 0 };
|
|
1804
1870
|
openCard = false;
|
|
@@ -1806,6 +1872,9 @@ class BarChart {
|
|
|
1806
1872
|
this.chartService = chartService;
|
|
1807
1873
|
this.cdr = cdr;
|
|
1808
1874
|
}
|
|
1875
|
+
get deafultColors() {
|
|
1876
|
+
return this.chartService.defaultColors;
|
|
1877
|
+
}
|
|
1809
1878
|
/* ------------------ CONFIG CHANGE ------------------ */
|
|
1810
1879
|
ngOnChanges(changes) {
|
|
1811
1880
|
if (!this.config)
|
|
@@ -1815,6 +1884,44 @@ class BarChart {
|
|
|
1815
1884
|
}
|
|
1816
1885
|
this.buildOption();
|
|
1817
1886
|
}
|
|
1887
|
+
previousConfig = {
|
|
1888
|
+
xAxisName: '',
|
|
1889
|
+
yAxisName: '',
|
|
1890
|
+
secondaryYAxisName: '',
|
|
1891
|
+
};
|
|
1892
|
+
ngDoCheck() {
|
|
1893
|
+
if (!this.chartInstance || !this.config)
|
|
1894
|
+
return;
|
|
1895
|
+
const updateOption = {};
|
|
1896
|
+
if (this.previousConfig.xAxisName !== this.config.xAxisName) {
|
|
1897
|
+
this.previousConfig.xAxisName = this.config.xAxisName;
|
|
1898
|
+
updateOption.xAxis = {
|
|
1899
|
+
name: this.config?.xAxisName || '',
|
|
1900
|
+
};
|
|
1901
|
+
}
|
|
1902
|
+
if (this.previousConfig.yAxisName !== this.config.yAxisName) {
|
|
1903
|
+
this.previousConfig.yAxisName = this.config.yAxisName;
|
|
1904
|
+
updateOption.yAxis = [
|
|
1905
|
+
{
|
|
1906
|
+
name: this.config?.yAxisName || '',
|
|
1907
|
+
},
|
|
1908
|
+
];
|
|
1909
|
+
}
|
|
1910
|
+
if (this.previousConfig.secondaryYAxisName !== this.config.secondaryYAxisName) {
|
|
1911
|
+
this.previousConfig.secondaryYAxisName = this.config.secondaryYAxisName;
|
|
1912
|
+
updateOption.yAxis = [
|
|
1913
|
+
{
|
|
1914
|
+
name: this.config?.yAxisName || '',
|
|
1915
|
+
},
|
|
1916
|
+
{
|
|
1917
|
+
name: this.config?.secondaryYAxisName || '',
|
|
1918
|
+
},
|
|
1919
|
+
];
|
|
1920
|
+
}
|
|
1921
|
+
if (Object.keys(updateOption).length) {
|
|
1922
|
+
this.chartInstance.setOption(updateOption);
|
|
1923
|
+
}
|
|
1924
|
+
}
|
|
1818
1925
|
moveLeft() {
|
|
1819
1926
|
this.moveZoom(-10);
|
|
1820
1927
|
}
|
|
@@ -1850,19 +1957,19 @@ class BarChart {
|
|
|
1850
1957
|
}
|
|
1851
1958
|
/* ------------------ OPTION BUILDER ------------------ */
|
|
1852
1959
|
buildOption() {
|
|
1853
|
-
|
|
1854
|
-
|
|
1960
|
+
const selected = this.readLegendSelected();
|
|
1961
|
+
const selectedMode = this.config?.customLegend?.selectionMode === 'exclusive' ? 'single' : true;
|
|
1855
1962
|
// Common chart option
|
|
1856
1963
|
this.chartOption = {
|
|
1857
|
-
backgroundColor:
|
|
1858
|
-
color: this.config
|
|
1964
|
+
backgroundColor: 'transparent',
|
|
1965
|
+
color: this.config?.colors || this.chartService.defaultColors,
|
|
1859
1966
|
title: {
|
|
1860
|
-
show: this.config
|
|
1861
|
-
text: this.config
|
|
1862
|
-
left: this.config
|
|
1967
|
+
show: this.config?.showTitle ?? !!this.config?.title,
|
|
1968
|
+
text: this.config?.title,
|
|
1969
|
+
left: this.config?.titlePosition || 'center',
|
|
1863
1970
|
},
|
|
1864
1971
|
tooltip: {
|
|
1865
|
-
show: this.config
|
|
1972
|
+
show: this.config?.showTooltip,
|
|
1866
1973
|
trigger: 'axis',
|
|
1867
1974
|
backgroundColor: 'transparent', // remove default box
|
|
1868
1975
|
borderWidth: 0,
|
|
@@ -1874,134 +1981,306 @@ class BarChart {
|
|
|
1874
1981
|
},
|
|
1875
1982
|
legend: {
|
|
1876
1983
|
show: false,
|
|
1877
|
-
data: this.
|
|
1878
|
-
selected
|
|
1879
|
-
selectedMode
|
|
1984
|
+
data: (this.config?.series ?? []).map((series) => series.name),
|
|
1985
|
+
selected,
|
|
1986
|
+
selectedMode,
|
|
1880
1987
|
},
|
|
1881
1988
|
grid: {
|
|
1882
1989
|
left: this.config.gridLeft ?? 0,
|
|
1883
1990
|
right: this.config.gridRight ?? 0,
|
|
1884
1991
|
bottom: this.config.gridBottom ?? 0,
|
|
1885
1992
|
top: this.config.gridTop ?? 0,
|
|
1886
|
-
containLabel: true,
|
|
1887
1993
|
},
|
|
1888
1994
|
xAxis: {
|
|
1889
1995
|
type: 'category',
|
|
1890
|
-
data: this.config
|
|
1891
|
-
axisLine: {
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1996
|
+
data: this.config?.xAxisData,
|
|
1997
|
+
axisLine: {
|
|
1998
|
+
show: this.config?.showXAxisLine ?? true,
|
|
1999
|
+
lineStyle: {
|
|
2000
|
+
color: '#C0C2C5',
|
|
2001
|
+
width: 1,
|
|
2002
|
+
},
|
|
2003
|
+
},
|
|
2004
|
+
axisTick: {
|
|
2005
|
+
show: false,
|
|
2006
|
+
},
|
|
2007
|
+
axisLabel: {
|
|
2008
|
+
show: this.config?.showXAxisLabel ?? true,
|
|
2009
|
+
color: '#434A51',
|
|
2010
|
+
fontSize: 12,
|
|
2011
|
+
},
|
|
2012
|
+
name: this.config?.xAxisName || '',
|
|
2013
|
+
nameLocation: 'center',
|
|
2014
|
+
nameTextStyle: {
|
|
2015
|
+
color: '#434A51',
|
|
2016
|
+
fontSize: 14,
|
|
2017
|
+
fontWeight: 400,
|
|
2018
|
+
},
|
|
2019
|
+
splitLine: {
|
|
2020
|
+
show: this.config?.showXAxisSplitLine ?? true,
|
|
2021
|
+
lineStyle: {
|
|
2022
|
+
type: 'dashed',
|
|
2023
|
+
color: '#C0C2C5',
|
|
2024
|
+
width: 1,
|
|
2025
|
+
},
|
|
2026
|
+
},
|
|
2027
|
+
...(this.config?.xAxis || {}),
|
|
1898
2028
|
},
|
|
1899
|
-
|
|
2029
|
+
yAxis: [
|
|
2030
|
+
{
|
|
2031
|
+
type: 'value',
|
|
2032
|
+
axisLine: {
|
|
2033
|
+
show: this.config?.showYAxisLine ?? true,
|
|
2034
|
+
lineStyle: {
|
|
2035
|
+
color: '#C0C2C5',
|
|
2036
|
+
width: 1,
|
|
2037
|
+
},
|
|
2038
|
+
},
|
|
2039
|
+
axisTick: {
|
|
2040
|
+
show: false,
|
|
2041
|
+
},
|
|
2042
|
+
name: this.config?.yAxisName || '',
|
|
2043
|
+
nameLocation: 'center',
|
|
2044
|
+
nameTextStyle: {
|
|
2045
|
+
color: '#434A51',
|
|
2046
|
+
fontSize: 14,
|
|
2047
|
+
fontWeight: 400,
|
|
2048
|
+
},
|
|
2049
|
+
axisLabel: {
|
|
2050
|
+
show: this.config?.showYAxisLabel ?? true,
|
|
2051
|
+
color: '#434A51',
|
|
2052
|
+
fontSize: 12,
|
|
2053
|
+
formatter: (value) => {
|
|
2054
|
+
if (value === 0) {
|
|
2055
|
+
return '0';
|
|
2056
|
+
}
|
|
2057
|
+
const absValue = Math.abs(value);
|
|
2058
|
+
// Quadrillions
|
|
2059
|
+
if (absValue >= 1_000_000_000_000_000) {
|
|
2060
|
+
return `${+(value / 1_000_000_000_000_000).toFixed(1)}Q`;
|
|
2061
|
+
}
|
|
2062
|
+
// Trillions
|
|
2063
|
+
if (absValue >= 1_000_000_000_000) {
|
|
2064
|
+
return `${+(value / 1_000_000_000_000).toFixed(1)}T`;
|
|
2065
|
+
}
|
|
2066
|
+
// Billions
|
|
2067
|
+
if (absValue >= 1_000_000_000) {
|
|
2068
|
+
return `${+(value / 1_000_000_000).toFixed(1)}B`;
|
|
2069
|
+
}
|
|
2070
|
+
// Millions
|
|
2071
|
+
if (absValue >= 1_000_000) {
|
|
2072
|
+
return `${+(value / 1_000_000).toFixed(1)}M`;
|
|
2073
|
+
}
|
|
2074
|
+
// Thousands
|
|
2075
|
+
if (absValue >= 1_000) {
|
|
2076
|
+
return `${+(value / 1_000).toFixed(1)}K`;
|
|
2077
|
+
}
|
|
2078
|
+
// Decimal handling
|
|
2079
|
+
if (Number.isInteger(value)) {
|
|
2080
|
+
return value.toString();
|
|
2081
|
+
}
|
|
2082
|
+
return value;
|
|
2083
|
+
},
|
|
2084
|
+
},
|
|
2085
|
+
splitLine: {
|
|
2086
|
+
show: this.config?.showYAxisSplitLine ?? true,
|
|
2087
|
+
lineStyle: {
|
|
2088
|
+
type: 'dashed',
|
|
2089
|
+
color: '#C0C2C5',
|
|
2090
|
+
width: 1,
|
|
2091
|
+
},
|
|
2092
|
+
},
|
|
2093
|
+
...(this.config?.yAxis || {}),
|
|
2094
|
+
},
|
|
2095
|
+
...(this.config?.secondaryYAxis
|
|
2096
|
+
? [
|
|
2097
|
+
{
|
|
2098
|
+
type: 'value',
|
|
2099
|
+
axisLine: {
|
|
2100
|
+
show: this.config?.showYAxisLine ?? true,
|
|
2101
|
+
lineStyle: {
|
|
2102
|
+
color: '#C0C2C5',
|
|
2103
|
+
width: 1,
|
|
2104
|
+
},
|
|
2105
|
+
},
|
|
2106
|
+
axisTick: {
|
|
2107
|
+
show: false,
|
|
2108
|
+
},
|
|
2109
|
+
axisLabel: {
|
|
2110
|
+
show: this.config?.showSecondaryYAxisLabel ?? true,
|
|
2111
|
+
color: '#434A51',
|
|
2112
|
+
fontSize: 12,
|
|
2113
|
+
formatter: (value) => {
|
|
2114
|
+
if (value === 0) {
|
|
2115
|
+
return '0';
|
|
2116
|
+
}
|
|
2117
|
+
const absValue = Math.abs(value);
|
|
2118
|
+
// Quadrillions
|
|
2119
|
+
if (absValue >= 1_000_000_000_000_000) {
|
|
2120
|
+
return `${+(value / 1_000_000_000_000_000).toFixed(1)}Q`;
|
|
2121
|
+
}
|
|
2122
|
+
// Trillions
|
|
2123
|
+
if (absValue >= 1_000_000_000_000) {
|
|
2124
|
+
return `${+(value / 1_000_000_000_000).toFixed(1)}T`;
|
|
2125
|
+
}
|
|
2126
|
+
// Billions
|
|
2127
|
+
if (absValue >= 1_000_000_000) {
|
|
2128
|
+
return `${+(value / 1_000_000_000).toFixed(1)}B`;
|
|
2129
|
+
}
|
|
2130
|
+
// Millions
|
|
2131
|
+
if (absValue >= 1_000_000) {
|
|
2132
|
+
return `${+(value / 1_000_000).toFixed(1)}M`;
|
|
2133
|
+
}
|
|
2134
|
+
// Thousands
|
|
2135
|
+
if (absValue >= 1_000) {
|
|
2136
|
+
return `${+(value / 1_000).toFixed(1)}K`;
|
|
2137
|
+
}
|
|
2138
|
+
// Decimal handling
|
|
2139
|
+
if (Number.isInteger(value)) {
|
|
2140
|
+
return value.toString();
|
|
2141
|
+
}
|
|
2142
|
+
return value;
|
|
2143
|
+
},
|
|
2144
|
+
},
|
|
2145
|
+
name: this.config?.secondaryYAxisName || '',
|
|
2146
|
+
nameLocation: 'center',
|
|
2147
|
+
nameTextStyle: {
|
|
2148
|
+
color: '#434A51',
|
|
2149
|
+
fontSize: 14,
|
|
2150
|
+
fontWeight: 400,
|
|
2151
|
+
},
|
|
2152
|
+
splitLine: {
|
|
2153
|
+
show: this.config?.showSecondaryYAxisSplitLine ?? true,
|
|
2154
|
+
lineStyle: {
|
|
2155
|
+
type: 'dashed',
|
|
2156
|
+
color: '#C0C2C5',
|
|
2157
|
+
width: 1,
|
|
2158
|
+
},
|
|
2159
|
+
},
|
|
2160
|
+
...(this.config?.secondaryYAxisConfig || {}),
|
|
2161
|
+
},
|
|
2162
|
+
]
|
|
2163
|
+
: []),
|
|
2164
|
+
],
|
|
2165
|
+
series: (this.config?.series || [])?.map((s) => {
|
|
1900
2166
|
return {
|
|
1901
2167
|
type: 'bar',
|
|
1902
|
-
stack: this.config
|
|
2168
|
+
stack: this.config?.stacked ? 'total' : undefined,
|
|
1903
2169
|
emphasis: {
|
|
1904
2170
|
scale: false,
|
|
1905
2171
|
},
|
|
1906
|
-
...(this.config
|
|
2172
|
+
...(this.config?.barWidth && { barWidth: this.config?.barWidth }),
|
|
1907
2173
|
...s,
|
|
1908
2174
|
label: {
|
|
1909
|
-
show: this.config
|
|
1910
|
-
position: this.config
|
|
2175
|
+
show: this.config?.showLabel ?? false,
|
|
2176
|
+
position: this.config?.labelPosition ?? 'top',
|
|
1911
2177
|
...(s['label'] ? s['label'] : {}),
|
|
1912
2178
|
},
|
|
1913
2179
|
itemStyle: {
|
|
1914
|
-
borderRadius: this.config
|
|
2180
|
+
borderRadius: this.config?.borderRadius ?? 0,
|
|
1915
2181
|
...(s['itemStyle'] ? s['itemStyle'] : {}),
|
|
1916
2182
|
},
|
|
1917
2183
|
};
|
|
1918
2184
|
}),
|
|
1919
|
-
...(this.config?.showZoomSlider
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
textStyle: {
|
|
1940
|
-
color: 'transparent',
|
|
1941
|
-
},
|
|
1942
|
-
dataBackground: {
|
|
1943
|
-
lineStyle: {
|
|
1944
|
-
color: 'transparent',
|
|
2185
|
+
...(this.config?.showZoomSlider
|
|
2186
|
+
? {
|
|
2187
|
+
dataZoom: [
|
|
2188
|
+
{
|
|
2189
|
+
type: 'slider',
|
|
2190
|
+
show: true,
|
|
2191
|
+
xAxisIndex: 0,
|
|
2192
|
+
bottom: 0,
|
|
2193
|
+
height: 8,
|
|
2194
|
+
...(this.config.zoomStart && { start: this.config.zoomStart }),
|
|
2195
|
+
...(this.config.zoomEnd && { end: this.config.zoomEnd }),
|
|
2196
|
+
// UI styling
|
|
2197
|
+
backgroundColor: '#F0F0F0',
|
|
2198
|
+
fillerColor: '#81858A',
|
|
2199
|
+
borderColor: 'transparent',
|
|
2200
|
+
borderRadius: 100,
|
|
2201
|
+
handleSize: 0,
|
|
2202
|
+
brushSelect: false,
|
|
2203
|
+
handleStyle: {
|
|
2204
|
+
color: '#F0F0F0',
|
|
1945
2205
|
},
|
|
1946
|
-
|
|
2206
|
+
textStyle: {
|
|
1947
2207
|
color: 'transparent',
|
|
1948
2208
|
},
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
2209
|
+
dataBackground: {
|
|
2210
|
+
lineStyle: {
|
|
2211
|
+
color: 'transparent',
|
|
2212
|
+
},
|
|
2213
|
+
areaStyle: {
|
|
2214
|
+
color: 'transparent',
|
|
2215
|
+
},
|
|
1953
2216
|
},
|
|
1954
|
-
|
|
1955
|
-
|
|
2217
|
+
selectedDataBackground: {
|
|
2218
|
+
lineStyle: {
|
|
2219
|
+
color: 'transparent',
|
|
2220
|
+
},
|
|
2221
|
+
areaStyle: {
|
|
2222
|
+
color: 'transparent',
|
|
2223
|
+
},
|
|
1956
2224
|
},
|
|
2225
|
+
moveHandleSize: 0,
|
|
2226
|
+
},
|
|
2227
|
+
{
|
|
2228
|
+
type: 'inside',
|
|
2229
|
+
xAxisIndex: 0,
|
|
2230
|
+
},
|
|
2231
|
+
],
|
|
2232
|
+
}
|
|
2233
|
+
: {
|
|
2234
|
+
toolbox: {
|
|
2235
|
+
right: -1000,
|
|
2236
|
+
feature: {
|
|
2237
|
+
dataZoom: {},
|
|
1957
2238
|
},
|
|
1958
|
-
moveHandleSize: 0,
|
|
1959
|
-
},
|
|
1960
|
-
{
|
|
1961
|
-
type: 'inside',
|
|
1962
|
-
xAxisIndex: 0,
|
|
1963
2239
|
},
|
|
1964
|
-
|
|
1965
|
-
|
|
2240
|
+
dataZoom: [
|
|
2241
|
+
{
|
|
2242
|
+
type: 'inside',
|
|
2243
|
+
disabled: true,
|
|
2244
|
+
},
|
|
2245
|
+
],
|
|
2246
|
+
}),
|
|
1966
2247
|
};
|
|
1967
2248
|
}
|
|
1968
|
-
|
|
1969
|
-
|
|
2249
|
+
enableDataZoom(active) {
|
|
2250
|
+
if (!this.chartInstance)
|
|
2251
|
+
return;
|
|
2252
|
+
this.chartInstance.dispatchAction({
|
|
2253
|
+
type: 'takeGlobalCursor',
|
|
2254
|
+
key: 'dataZoomSelect',
|
|
2255
|
+
dataZoomSelectActive: active,
|
|
2256
|
+
});
|
|
2257
|
+
}
|
|
2258
|
+
resetZoom() {
|
|
2259
|
+
if (!this.chartInstance)
|
|
2260
|
+
return;
|
|
2261
|
+
this.enableDataZoom(false);
|
|
2262
|
+
this.chartInstance.dispatchAction({
|
|
2263
|
+
type: 'dataZoom',
|
|
2264
|
+
start: 0,
|
|
2265
|
+
end: 100,
|
|
2266
|
+
});
|
|
1970
2267
|
}
|
|
1971
2268
|
get hasSideLegendWidth() {
|
|
1972
|
-
return this.isSideLegend && !!this.
|
|
2269
|
+
return this.isSideLegend && !!this.config.customLegend?.maxWidth;
|
|
1973
2270
|
}
|
|
1974
2271
|
get legendShellMaxWidth() {
|
|
1975
|
-
|
|
1976
|
-
return null;
|
|
1977
|
-
const width = this.config.customLegend?.maxWidth;
|
|
1978
|
-
if (width)
|
|
1979
|
-
return width;
|
|
1980
|
-
return `${(this.config.legendContainerWidth ?? 0.7) * 100}%`;
|
|
2272
|
+
return this.isSideLegend ? (this.config.customLegend?.maxWidth ?? null) : null;
|
|
1981
2273
|
}
|
|
1982
2274
|
get isSideLegend() {
|
|
1983
|
-
return this.
|
|
1984
|
-
|
|
1985
|
-
buildLegendConfig() {
|
|
1986
|
-
const customLegend = this.config.customLegend ?? {};
|
|
1987
|
-
const layout = customLegend.layout ??
|
|
1988
|
-
(this.config.legendDirection === 'vertical' ? 'vertical' : 'horizontal');
|
|
1989
|
-
return {
|
|
1990
|
-
...customLegend,
|
|
1991
|
-
position: (customLegend.position ?? this.config.legendPosition),
|
|
1992
|
-
align: (customLegend.align ?? this.config.legendAlign),
|
|
1993
|
-
layout,
|
|
1994
|
-
maxWidth: customLegend.maxWidth ?? this.legendShellMaxWidth ?? undefined,
|
|
1995
|
-
legendTextColor: customLegend.legendTextColor ?? this.config.legendTextColor,
|
|
1996
|
-
legendFontSize: customLegend.legendFontSize ?? this.config.legendFontSize,
|
|
1997
|
-
selectionMode: customLegend.selectionMode ?? 'multiple',
|
|
1998
|
-
};
|
|
2275
|
+
return (this.config.customLegend?.position === 'left' ||
|
|
2276
|
+
this.config.customLegend?.position === 'right');
|
|
1999
2277
|
}
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
type:
|
|
2004
|
-
|
|
2278
|
+
onLegendEvent(event) {
|
|
2279
|
+
this.legendEvent.emit(event);
|
|
2280
|
+
this.chartEvent.emit({
|
|
2281
|
+
type: `legend:${event.type}`,
|
|
2282
|
+
data: event,
|
|
2283
|
+
});
|
|
2005
2284
|
}
|
|
2006
2285
|
readLegendSelected() {
|
|
2007
2286
|
const option = this.chartInstance?.getOption?.();
|
|
@@ -2093,11 +2372,11 @@ class BarChart {
|
|
|
2093
2372
|
}
|
|
2094
2373
|
}
|
|
2095
2374
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChart, deps: [{ token: Charts }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2096
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BarChart, isStandalone: true, selector: "lib-bar-chart", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions", showContextMenu: "showContextMenu" }, outputs: { contextMenuClick: "contextMenuClick", chartEvent: "chartEvent" }, host: { listeners: { "document:click": "closeCard()" } }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"bar-chart-shell\"\n [class.bar-chart-shell--legend-left]=\"
|
|
2375
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BarChart, isStandalone: true, selector: "lib-bar-chart", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions", showContextMenu: "showContextMenu" }, outputs: { contextMenuClick: "contextMenuClick", chartEvent: "chartEvent", legendEvent: "legendEvent" }, host: { listeners: { "document:click": "closeCard()" } }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"bar-chart-shell\"\n [class.bar-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.bar-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.bar-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"bar-chart-shell__legend\"\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n (chartInit)=\"onChartInit($event)\"\n class=\"chart-container\"\n ></div>\n\n @if (\n !config.hideLegend &&\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\n ) {\n <lib-chart-legend\n class=\"bar-chart-shell__legend\"\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n</div>\n@if (config.showZoomSlider) {\n <div class=\"zoom-controls\" [style]=\"config.zoomControlButtonStyle\">\n <button (click)=\"moveLeft()\"><img src=\"images/leftArrow.svg\" alt=\">\" /></button>\n <button (click)=\"moveRight()\"><img src=\"images/rightArrow.svg\" alt=\"<\" /></button>\n </div>\n}\n@if (openCard) {\n <lib-right-click-card\n [cardOptions]=\"contextMenuOptions\"\n (contextMenuClick)=\"onMenuClick($event)\"\n [cardPosition]=\"cardPosition\"\n ></lib-right-click-card>\n}\n", styles: [".bar-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.bar-chart-shell--legend-left,.bar-chart-shell--legend-right{flex-direction:row}.bar-chart-shell--legend-bottom{flex-direction:column}.bar-chart-shell__legend{flex:0 0 auto;min-width:0}.bar-chart-shell--legend-left .bar-chart-shell__legend,.bar-chart-shell--legend-right .bar-chart-shell__legend{height:100%;min-height:0}.chart-container{width:100%;height:100%;flex:1 1 auto;min-height:0;min-width:0}.zoom-controls{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;pointer-events:none}.zoom-controls button{pointer-events:all;cursor:pointer;border:none;border-radius:2px;width:14px;height:14px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "component", type: RightClickCard, selector: "lib-right-click-card", inputs: ["cardPosition", "cardOptions"], outputs: ["contextMenuClick"] }, { kind: "component", type: ChartLegendComponent, selector: "lib-chart-legend", inputs: ["chart", "series", "colors", "config", "itemTemplate"], outputs: ["legendEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2097
2376
|
}
|
|
2098
2377
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChart, decorators: [{
|
|
2099
2378
|
type: Component,
|
|
2100
|
-
args: [{ selector: 'lib-bar-chart', imports: [NgxEchartsDirective, RightClickCard, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"bar-chart-shell\"\n [class.bar-chart-shell--legend-left]=\"
|
|
2379
|
+
args: [{ selector: 'lib-bar-chart', imports: [NgxEchartsDirective, RightClickCard, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"bar-chart-shell\"\n [class.bar-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.bar-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.bar-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"bar-chart-shell__legend\"\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n (chartInit)=\"onChartInit($event)\"\n class=\"chart-container\"\n ></div>\n\n @if (\n !config.hideLegend &&\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\n ) {\n <lib-chart-legend\n class=\"bar-chart-shell__legend\"\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n</div>\n@if (config.showZoomSlider) {\n <div class=\"zoom-controls\" [style]=\"config.zoomControlButtonStyle\">\n <button (click)=\"moveLeft()\"><img src=\"images/leftArrow.svg\" alt=\">\" /></button>\n <button (click)=\"moveRight()\"><img src=\"images/rightArrow.svg\" alt=\"<\" /></button>\n </div>\n}\n@if (openCard) {\n <lib-right-click-card\n [cardOptions]=\"contextMenuOptions\"\n (contextMenuClick)=\"onMenuClick($event)\"\n [cardPosition]=\"cardPosition\"\n ></lib-right-click-card>\n}\n", styles: [".bar-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.bar-chart-shell--legend-left,.bar-chart-shell--legend-right{flex-direction:row}.bar-chart-shell--legend-bottom{flex-direction:column}.bar-chart-shell__legend{flex:0 0 auto;min-width:0}.bar-chart-shell--legend-left .bar-chart-shell__legend,.bar-chart-shell--legend-right .bar-chart-shell__legend{height:100%;min-height:0}.chart-container{width:100%;height:100%;flex:1 1 auto;min-height:0;min-width:0}.zoom-controls{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;pointer-events:none}.zoom-controls button{pointer-events:all;cursor:pointer;border:none;border-radius:2px;width:14px;height:14px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center}\n"] }]
|
|
2101
2380
|
}], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
|
|
2102
2381
|
type: Input
|
|
2103
2382
|
}], theme: [{
|
|
@@ -2112,6 +2391,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2112
2391
|
type: Output
|
|
2113
2392
|
}], chartEvent: [{
|
|
2114
2393
|
type: Output
|
|
2394
|
+
}], legendEvent: [{
|
|
2395
|
+
type: Output
|
|
2115
2396
|
}], closeCard: [{
|
|
2116
2397
|
type: HostListener,
|
|
2117
2398
|
args: ['document:click']
|
|
@@ -2296,6 +2577,9 @@ class DoughnutChart {
|
|
|
2296
2577
|
this.chartService = chartService;
|
|
2297
2578
|
this.cdr = cdr;
|
|
2298
2579
|
}
|
|
2580
|
+
get deafultColors() {
|
|
2581
|
+
return this.chartService.defaultColors;
|
|
2582
|
+
}
|
|
2299
2583
|
/* ------------------ CONFIG CHANGE ------------------ */
|
|
2300
2584
|
ngOnChanges(changes) {
|
|
2301
2585
|
if (!this.config)
|
|
@@ -2493,11 +2777,11 @@ class DoughnutChart {
|
|
|
2493
2777
|
}
|
|
2494
2778
|
}
|
|
2495
2779
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DoughnutChart, deps: [{ token: Charts }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2496
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DoughnutChart, isStandalone: true, selector: "lib-doughnut-chart", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions", showContextMenu: "showContextMenu" }, outputs: { contextMenuClick: "contextMenuClick", chartEvent: "chartEvent", legendEvent: "legendEvent" }, host: { listeners: { "document:click": "closeCard()", "window:resize": "onResize()" } }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"doughnut-chart-shell\"\n [class.doughnut-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.doughnut-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.doughnut-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"doughnut-chart-shell__legend\"\n [class.doughnut-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--doughnut-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.data || []\"\n [colors]=\"config.colors ||
|
|
2780
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DoughnutChart, isStandalone: true, selector: "lib-doughnut-chart", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions", showContextMenu: "showContextMenu" }, outputs: { contextMenuClick: "contextMenuClick", chartEvent: "chartEvent", legendEvent: "legendEvent" }, host: { listeners: { "document:click": "closeCard()", "window:resize": "onResize()" } }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"doughnut-chart-shell\"\n [class.doughnut-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.doughnut-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.doughnut-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"doughnut-chart-shell__legend\"\n [class.doughnut-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--doughnut-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.data || []\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n class=\"chart-container\"\n (chartInit)=\"onChartInit($event)\"\n ></div>\n\n @if (\n !config.hideLegend &&\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\n ) {\n <lib-chart-legend\n class=\"doughnut-chart-shell__legend\"\n [class.doughnut-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--doughnut-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.data\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n</div>\n@if (openCard) {\n <lib-right-click-card\n [cardOptions]=\"contextMenuOptions\"\n (contextMenuClick)=\"onMenuClick($event)\"\n [cardPosition]=\"cardPosition\"\n ></lib-right-click-card>\n}\n", styles: [".doughnut-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.doughnut-chart-shell--legend-left,.doughnut-chart-shell--legend-right{flex-direction:row}.doughnut-chart-shell--legend-bottom{flex-direction:column}.doughnut-chart-shell__legend{flex:0 0 auto;min-width:0}.doughnut-chart-shell--legend-left .doughnut-chart-shell__legend,.doughnut-chart-shell--legend-right .doughnut-chart-shell__legend{height:100%;max-width:min(var(--doughnut-chart-legend-max-width, 250px),70%);min-height:0}.chart-container{width:100%;height:100%;position:relative;flex:1 1 auto;min-height:0;min-width:0}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "component", type: RightClickCard, selector: "lib-right-click-card", inputs: ["cardPosition", "cardOptions"], outputs: ["contextMenuClick"] }, { kind: "component", type: ChartLegendComponent, selector: "lib-chart-legend", inputs: ["chart", "series", "colors", "config", "itemTemplate"], outputs: ["legendEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2497
2781
|
}
|
|
2498
2782
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DoughnutChart, decorators: [{
|
|
2499
2783
|
type: Component,
|
|
2500
|
-
args: [{ selector: 'lib-doughnut-chart', imports: [NgxEchartsDirective, RightClickCard, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"doughnut-chart-shell\"\n [class.doughnut-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.doughnut-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.doughnut-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"doughnut-chart-shell__legend\"\n [class.doughnut-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--doughnut-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.data || []\"\n [colors]=\"config.colors ||
|
|
2784
|
+
args: [{ selector: 'lib-doughnut-chart', imports: [NgxEchartsDirective, RightClickCard, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"doughnut-chart-shell\"\n [class.doughnut-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.doughnut-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.doughnut-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"doughnut-chart-shell__legend\"\n [class.doughnut-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--doughnut-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.data || []\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n class=\"chart-container\"\n (chartInit)=\"onChartInit($event)\"\n ></div>\n\n @if (\n !config.hideLegend &&\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\n ) {\n <lib-chart-legend\n class=\"doughnut-chart-shell__legend\"\n [class.doughnut-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--doughnut-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.data\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n</div>\n@if (openCard) {\n <lib-right-click-card\n [cardOptions]=\"contextMenuOptions\"\n (contextMenuClick)=\"onMenuClick($event)\"\n [cardPosition]=\"cardPosition\"\n ></lib-right-click-card>\n}\n", styles: [".doughnut-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.doughnut-chart-shell--legend-left,.doughnut-chart-shell--legend-right{flex-direction:row}.doughnut-chart-shell--legend-bottom{flex-direction:column}.doughnut-chart-shell__legend{flex:0 0 auto;min-width:0}.doughnut-chart-shell--legend-left .doughnut-chart-shell__legend,.doughnut-chart-shell--legend-right .doughnut-chart-shell__legend{height:100%;max-width:min(var(--doughnut-chart-legend-max-width, 250px),70%);min-height:0}.chart-container{width:100%;height:100%;position:relative;flex:1 1 auto;min-height:0;min-width:0}\n"] }]
|
|
2501
2785
|
}], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
|
|
2502
2786
|
type: Input
|
|
2503
2787
|
}], theme: [{
|
|
@@ -3356,6 +3640,9 @@ class ScatterChartComp {
|
|
|
3356
3640
|
constructor(chartService) {
|
|
3357
3641
|
this.chartService = chartService;
|
|
3358
3642
|
}
|
|
3643
|
+
get deafultColors() {
|
|
3644
|
+
return this.chartService.defaultColors;
|
|
3645
|
+
}
|
|
3359
3646
|
ngOnChanges(changes) {
|
|
3360
3647
|
if (!this.config)
|
|
3361
3648
|
return;
|
|
@@ -3397,7 +3684,6 @@ class ScatterChartComp {
|
|
|
3397
3684
|
right: this.config?.gridRight ?? 0,
|
|
3398
3685
|
bottom: this.config?.gridBottom ?? 0,
|
|
3399
3686
|
top: this.config?.gridTop ?? 0,
|
|
3400
|
-
containLabel: true,
|
|
3401
3687
|
},
|
|
3402
3688
|
xAxis: {
|
|
3403
3689
|
type: 'value',
|
|
@@ -3415,10 +3701,8 @@ class ScatterChartComp {
|
|
|
3415
3701
|
color: '#434A51',
|
|
3416
3702
|
fontSize: 12,
|
|
3417
3703
|
},
|
|
3418
|
-
containLabel: true,
|
|
3419
3704
|
name: this.config?.xAxisName || '',
|
|
3420
3705
|
nameLocation: 'center',
|
|
3421
|
-
nameGap: 30,
|
|
3422
3706
|
nameTextStyle: {
|
|
3423
3707
|
color: '#434A51',
|
|
3424
3708
|
fontSize: 14,
|
|
@@ -3437,10 +3721,8 @@ class ScatterChartComp {
|
|
|
3437
3721
|
yAxis: [
|
|
3438
3722
|
{
|
|
3439
3723
|
type: 'value',
|
|
3440
|
-
containLabel: true,
|
|
3441
3724
|
name: this.config?.yAxisName || '',
|
|
3442
3725
|
nameLocation: 'center',
|
|
3443
|
-
nameGap: 30,
|
|
3444
3726
|
nameTextStyle: {
|
|
3445
3727
|
color: '#434A51',
|
|
3446
3728
|
fontSize: 14,
|
|
@@ -3488,7 +3770,7 @@ class ScatterChartComp {
|
|
|
3488
3770
|
if (Number.isInteger(value)) {
|
|
3489
3771
|
return value.toString();
|
|
3490
3772
|
}
|
|
3491
|
-
return value
|
|
3773
|
+
return value;
|
|
3492
3774
|
},
|
|
3493
3775
|
},
|
|
3494
3776
|
splitLine: {
|
|
@@ -3539,11 +3821,11 @@ class ScatterChartComp {
|
|
|
3539
3821
|
}
|
|
3540
3822
|
}
|
|
3541
3823
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ScatterChartComp, deps: [{ token: Charts }], target: i0.ɵɵFactoryTarget.Component });
|
|
3542
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ScatterChartComp, isStandalone: true, selector: "lib-scatter-chart", inputs: { config: "config", theme: "theme" }, outputs: { chartEvent: "chartEvent", legendEvent: "legendEvent" }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"scatter-chart-shell\"\n [class.scatter-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.scatter-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.scatter-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"scatter-chart-shell__legend\"\n [class.scatter-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--scatter-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors ||
|
|
3824
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ScatterChartComp, isStandalone: true, selector: "lib-scatter-chart", inputs: { config: "config", theme: "theme" }, outputs: { chartEvent: "chartEvent", legendEvent: "legendEvent" }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"scatter-chart-shell\"\n [class.scatter-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.scatter-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.scatter-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"scatter-chart-shell__legend\"\n [class.scatter-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--scatter-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n (chartInit)=\"onChartInit($event)\"\n class=\"chart-container\"\n ></div>\n\n @if (\n !config.hideLegend &&\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\n ) {\n <lib-chart-legend\n class=\"scatter-chart-shell__legend\"\n [class.scatter-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--scatter-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n</div>\n", styles: [".scatter-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.scatter-chart-shell--legend-left,.scatter-chart-shell--legend-right{flex-direction:row}.scatter-chart-shell--legend-bottom{flex-direction:column}.scatter-chart-shell__legend{flex:0 0 auto;min-width:0}.scatter-chart-shell--legend-left .scatter-chart-shell__legend,.scatter-chart-shell--legend-right .scatter-chart-shell__legend{height:100%;max-width:min(var(--scatter-chart-legend-max-width, 360px),70%);min-height:0}.chart-container{width:100%;height:100%;position:relative;flex:1 1 auto;min-height:0;min-width:0}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "component", type: ChartLegendComponent, selector: "lib-chart-legend", inputs: ["chart", "series", "colors", "config", "itemTemplate"], outputs: ["legendEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3543
3825
|
}
|
|
3544
3826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ScatterChartComp, decorators: [{
|
|
3545
3827
|
type: Component,
|
|
3546
|
-
args: [{ selector: 'lib-scatter-chart', imports: [NgxEchartsDirective, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"scatter-chart-shell\"\n [class.scatter-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.scatter-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.scatter-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"scatter-chart-shell__legend\"\n [class.scatter-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--scatter-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors ||
|
|
3828
|
+
args: [{ selector: 'lib-scatter-chart', imports: [NgxEchartsDirective, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"scatter-chart-shell\"\n [class.scatter-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.scatter-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.scatter-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"scatter-chart-shell__legend\"\n [class.scatter-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--scatter-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n (chartInit)=\"onChartInit($event)\"\n class=\"chart-container\"\n ></div>\n\n @if (\n !config.hideLegend &&\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\n ) {\n <lib-chart-legend\n class=\"scatter-chart-shell__legend\"\n [class.scatter-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--scatter-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n</div>\n", styles: [".scatter-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.scatter-chart-shell--legend-left,.scatter-chart-shell--legend-right{flex-direction:row}.scatter-chart-shell--legend-bottom{flex-direction:column}.scatter-chart-shell__legend{flex:0 0 auto;min-width:0}.scatter-chart-shell--legend-left .scatter-chart-shell__legend,.scatter-chart-shell--legend-right .scatter-chart-shell__legend{height:100%;max-width:min(var(--scatter-chart-legend-max-width, 360px),70%);min-height:0}.chart-container{width:100%;height:100%;position:relative;flex:1 1 auto;min-height:0;min-width:0}\n"] }]
|
|
3547
3829
|
}], ctorParameters: () => [{ type: Charts }], propDecorators: { config: [{
|
|
3548
3830
|
type: Input
|
|
3549
3831
|
}], theme: [{
|