@xui/charts
Version:
xUI Charts for Angular
319 lines (311 loc) • 38.3 kB
JavaScript
import * as i0 from '@angular/core';
import { signal, Injectable, Component, Input, Inject, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { connect } from 'echarts';
import * as i2 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i3 from '@xui/components';
import { XuiButtonModule, XuiIcon, XuiContextMenuModule, XuiTabModule, XuiInputModule } from '@xui/components';
import * as i3$1 from '@angular/cdk/menu';
import { CdkMenuModule } from '@angular/cdk/menu';
import * as i4 from '@angular/cdk/drag-drop';
import { DragDropModule } from '@angular/cdk/drag-drop';
import * as i4$1 from 'ngx-echarts';
import { NgxEchartsModule } from 'ngx-echarts';
class AnalysisService {
get charts() {
return this._charts;
}
constructor(appRef) {
this.appRef = appRef;
this._eCharts = [];
this._isDragging = signal(false);
this._charts = [];
}
getChart(index) {
return this._charts?.[index]?.asReadonly();
}
addChart(position, trends) {
this._charts.splice(position, 0, signal(trends));
}
addTrend(chartPos, trend) {
const chart = this._charts[chartPos];
chart.update(x => [...x, trend]);
}
removeTrend(chartPos, trendPos) {
this._charts[chartPos].update(x => chart.splice(trendPos, 1));
const chart = this._charts[chartPos]();
if (!chart.length) {
this._charts.splice(chartPos, 1);
}
}
get isDragging() {
return this._isDragging.asReadonly();
}
dragStarted() {
this._isDragging.set(true);
this.appRef.tick(); // Not able to D'n'D metric unless ticked
}
dragEnded() {
this._isDragging.set(false);
}
connectChart(chart) {
this._eCharts.push(chart);
connect(this._eCharts);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AnalysisService, deps: [{ token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AnalysisService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AnalysisService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: i0.ApplicationRef }] });
class MetricsComponent {
constructor(analysis) {
this.analysis = analysis;
this.opened = [];
this.active = null;
}
ngOnInit() {
// Testing
this.active = this.entities?.[0].entities[0] ?? null;
}
isActive(entity) {
return this.active?.id === entity.id;
}
activate(entity) {
this.active = entity;
}
isOpened(group) {
// return true;
return this.opened.includes(group.id);
}
toggleGroup(group) {
if (this.isOpened(group)) {
this.opened = this.opened.filter(x => x !== group.id);
}
else {
this.opened = [...this.opened, group.id];
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MetricsComponent, deps: [{ token: AnalysisService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: MetricsComponent, selector: "xui-metrics", inputs: { entities: "entities" }, ngImport: i0, template: "<div class=\"entries\">\n <xui-input color=\"dark\" size=\"small\">\n <xui-icon icon=\"search\" xuiPostfix></xui-icon>\n </xui-input>\n\n <div class=\"buttons\">\n <xui-button> <xui-icon icon=\"add_circle\"></xui-icon> Add Entities </xui-button>\n\n <xui-button type=\"icon\">\n <xui-icon icon=\"refresh\"></xui-icon>\n </xui-button>\n </div>\n\n @for (group of entities; track group) {\n <div class=\"group\">\n <div class=\"name\" (click)=\"toggleGroup(group)\">\n <xui-icon class=\"menu-icon\" [icon]=\"isOpened(group) ? 'menu' : 'menu_open'\"></xui-icon>\n <div class=\"content\">\n <xui-icon [icon]=\"group.icon\"></xui-icon>\n {{ group.name }}\n </div>\n </div>\n\n <div class=\"entities\" *ngIf=\"isOpened(group)\">\n @for (entity of group.entities; track entity.id) {\n <div class=\"entity\" [class.active]=\"isActive(entity)\" (click)=\"activate(entity)\">\n <xui-icon icon=\"check\"></xui-icon>\n {{ entity.name }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n\n<div class=\"metrics\">\n <xui-input color=\"dark\" size=\"small\">\n <xui-icon icon=\"search\" xuiPostfix></xui-icon>\n </xui-input>\n\n @for (group of active?.metrics; track group) {\n <div class=\"group\">\n <div class=\"name\" (click)=\"toggleGroup(group)\">\n <xui-icon class=\"menu-icon\" [icon]=\"isOpened(group) ? 'menu' : 'menu_open'\"></xui-icon>\n <div class=\"content\">\n {{ group.name }}\n </div>\n </div>\n\n <div class=\"entities\" *ngIf=\"isOpened(group)\" cdkDropList cdkDropListSortingDisabled>\n @for (metric of group.metrics; track metric.id) {\n <div\n class=\"metric\"\n cdkDrag\n [cdkDragData]=\"{ metric, entity: active }\"\n (cdkDragStarted)=\"analysis.dragStarted()\"\n (cdkDragEnded)=\"analysis.dragEnded()\"\n >\n <span style=\"display: none\" *cdkDragPlaceholder></span>\n <div class=\"drag-preview\" *cdkDragPreview>\n <xui-icon icon=\"drag_indicator\"></xui-icon>\n <div>\n {{ metric.name }}\n <div class=\"description\">{{ active!.name }}</div>\n </div>\n </div>\n\n <xui-icon icon=\"drag_indicator\"></xui-icon>\n <div>\n {{ metric.name }}\n <div class=\"description\">{{ active!.name }}</div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr}.entries{border-right:1px solid gray;padding:0 12px}.entries .buttons{display:flex;justify-content:space-between;border-bottom:1px dashed gray;padding:4px 0}.metrics{padding:0 12px}.group{font-size:12px;font-weight:600}.group .name{display:flex;cursor:pointer}.group .name .menu-icon{color:var(--color-primary-default);font-size:2em}.group .name .content{display:flex;gap:8px;align-items:center}.group .name .content .x-icon{font-size:1.5em}.group .entities{display:flex;flex-direction:column}.group .entities .entity{display:flex;gap:4px;align-items:center;cursor:pointer;margin-left:24px;padding:0 4px}.group .entities .entity .x-icon{font-size:1.5em}.group .entities .entity.active{background-color:#1e90ff}.group .entities .entity:hover{outline:1px solid gray;outline-offset:-1px}.group .entities .metric{display:flex;gap:8px;padding:8px 12px 8px 0;border-top:1px solid gray;cursor:move;line-height:1.3em}.group .entities .metric:last-child{border-bottom:1px solid gray}.group .entities .metric .description{color:gray}.drag-preview{display:flex;gap:8px;padding:8px 12px 8px 0;border-radius:4px;color:var(--color-bg-floating-contrast);background-color:var(--color-bg-floating);font-size:12px;font-weight:600;line-height:1.3em}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.XuiButton, selector: "xui-button", inputs: ["type", "size", "color", "shine", "disabled", "stateDelay", "onClick"], outputs: ["click"] }, { kind: "component", type: i3.XuiIcon, selector: "xui-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "icon"], exportAs: ["xuiIcon"] }, { kind: "component", type: i3.XuiInput, selector: "xui-input", inputs: ["value", "placeholder", "color", "size", "type", "dataList", "disabled", "readOnly"], outputs: ["valueChange"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i4.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MetricsComponent, decorators: [{
type: Component,
args: [{ selector: 'xui-metrics', template: "<div class=\"entries\">\n <xui-input color=\"dark\" size=\"small\">\n <xui-icon icon=\"search\" xuiPostfix></xui-icon>\n </xui-input>\n\n <div class=\"buttons\">\n <xui-button> <xui-icon icon=\"add_circle\"></xui-icon> Add Entities </xui-button>\n\n <xui-button type=\"icon\">\n <xui-icon icon=\"refresh\"></xui-icon>\n </xui-button>\n </div>\n\n @for (group of entities; track group) {\n <div class=\"group\">\n <div class=\"name\" (click)=\"toggleGroup(group)\">\n <xui-icon class=\"menu-icon\" [icon]=\"isOpened(group) ? 'menu' : 'menu_open'\"></xui-icon>\n <div class=\"content\">\n <xui-icon [icon]=\"group.icon\"></xui-icon>\n {{ group.name }}\n </div>\n </div>\n\n <div class=\"entities\" *ngIf=\"isOpened(group)\">\n @for (entity of group.entities; track entity.id) {\n <div class=\"entity\" [class.active]=\"isActive(entity)\" (click)=\"activate(entity)\">\n <xui-icon icon=\"check\"></xui-icon>\n {{ entity.name }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n\n<div class=\"metrics\">\n <xui-input color=\"dark\" size=\"small\">\n <xui-icon icon=\"search\" xuiPostfix></xui-icon>\n </xui-input>\n\n @for (group of active?.metrics; track group) {\n <div class=\"group\">\n <div class=\"name\" (click)=\"toggleGroup(group)\">\n <xui-icon class=\"menu-icon\" [icon]=\"isOpened(group) ? 'menu' : 'menu_open'\"></xui-icon>\n <div class=\"content\">\n {{ group.name }}\n </div>\n </div>\n\n <div class=\"entities\" *ngIf=\"isOpened(group)\" cdkDropList cdkDropListSortingDisabled>\n @for (metric of group.metrics; track metric.id) {\n <div\n class=\"metric\"\n cdkDrag\n [cdkDragData]=\"{ metric, entity: active }\"\n (cdkDragStarted)=\"analysis.dragStarted()\"\n (cdkDragEnded)=\"analysis.dragEnded()\"\n >\n <span style=\"display: none\" *cdkDragPlaceholder></span>\n <div class=\"drag-preview\" *cdkDragPreview>\n <xui-icon icon=\"drag_indicator\"></xui-icon>\n <div>\n {{ metric.name }}\n <div class=\"description\">{{ active!.name }}</div>\n </div>\n </div>\n\n <xui-icon icon=\"drag_indicator\"></xui-icon>\n <div>\n {{ metric.name }}\n <div class=\"description\">{{ active!.name }}</div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr}.entries{border-right:1px solid gray;padding:0 12px}.entries .buttons{display:flex;justify-content:space-between;border-bottom:1px dashed gray;padding:4px 0}.metrics{padding:0 12px}.group{font-size:12px;font-weight:600}.group .name{display:flex;cursor:pointer}.group .name .menu-icon{color:var(--color-primary-default);font-size:2em}.group .name .content{display:flex;gap:8px;align-items:center}.group .name .content .x-icon{font-size:1.5em}.group .entities{display:flex;flex-direction:column}.group .entities .entity{display:flex;gap:4px;align-items:center;cursor:pointer;margin-left:24px;padding:0 4px}.group .entities .entity .x-icon{font-size:1.5em}.group .entities .entity.active{background-color:#1e90ff}.group .entities .entity:hover{outline:1px solid gray;outline-offset:-1px}.group .entities .metric{display:flex;gap:8px;padding:8px 12px 8px 0;border-top:1px solid gray;cursor:move;line-height:1.3em}.group .entities .metric:last-child{border-bottom:1px solid gray}.group .entities .metric .description{color:gray}.drag-preview{display:flex;gap:8px;padding:8px 12px 8px 0;border-radius:4px;color:var(--color-bg-floating-contrast);background-color:var(--color-bg-floating);font-size:12px;font-weight:600;line-height:1.3em}\n"] }]
}], ctorParameters: () => [{ type: AnalysisService }], propDecorators: { entities: [{
type: Input
}] } });
class ChartComponent {
get trends() {
return this.analysisService.getChart(this.index);
}
constructor(analysisService, document) {
this.analysisService = analysisService;
this.document = document;
this.chartOptions = {
grid: {
left: 40,
top: 10,
right: 40,
bottom: 40
},
tooltip: {
showContent: false,
trigger: 'axis',
axisPointer: { type: 'cross' }
},
xAxis: [
{
type: 'category',
axisLine: {
// show: true,
lineStyle: {
width: 2
// type: 'solid'
}
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
{
axisLine: {
onZero: false,
lineStyle: {
width: 2
}
}
}
],
yAxis: [
{
axisLine: {
show: true,
lineStyle: {
width: 2,
type: 'solid'
}
}
// type: 'value'
// splitNumber: 3,
},
{
position: 'right',
axisLine: {
show: true,
lineStyle: {
width: 2,
type: 'solid'
}
}
// splitNumber: 3,
}
],
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
showSymbol: false,
type: 'line'
},
{
data: [420, 332, 981, 924, 4290, 1930, 2320],
yAxisIndex: 1,
showSymbol: false,
type: 'line'
}
]
};
}
onChartInit(chart) {
this.chart = chart;
this.analysisService.connectChart(chart);
chart.on('highlight', (event) => {
console.log('event', event);
// const series = this.chart.getVisual({ seriesIndex: 1, dataIndex: 1 }, 'symbol');//.getSeries();
const series = this.chart.getModel().getSeries();
// const values = series.map(x => x)
console.log('series', series);
this.document.addEventListener('resize', () => {
console.log('resize');
chart.resize();
});
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ChartComponent, deps: [{ token: AnalysisService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: ChartComponent, selector: "xui-analysis-chart", inputs: { index: "index" }, ngImport: i0, template: "<div echarts (chartInit)=\"onChartInit($event)\" [options]=\"chartOptions\" class=\"chart\"></div>\n<div class=\"legend\">\n @for (trend of trends(); track trend) {\n <div class=\"trend\">\n <div class=\"metric\">\n 42.0\n <div class=\"type\">%</div>\n </div>\n\n <div class=\"labels\">\n <div class=\"metric-name\">{{ trend.metric.name }}</div>\n <div class=\"entity-name\">{{ trend.entity.name }}</div>\n </div>\n\n <xui-button type=\"icon\" [cdkMenuTriggerFor]=\"menu\">\n <xui-icon icon=\"more_horiz\"></xui-icon>\n </xui-button>\n </div>\n }\n</div>\n\n<ng-template #menu>\n <xui-context-menu cdkMenu>\n <xui-button cdkMenuItem>Remove</xui-button>\n <hr />\n <xui-button cdkMenuItem>None</xui-button>\n </xui-context-menu>\n</ng-template>\n", styles: [":host{width:100%;min-height:200px;display:flex;gap:4px}.chart{flex:1;background-color:#fff}.legend{width:280px;display:flex;flex-direction:column;gap:4px}.legend .trend{height:48px;display:flex;align-items:center;gap:8px;border-radius:4px}.legend .trend:hover{outline:1px solid gray;outline-offset:-1px}.legend .trend .metric{height:100%;flex:0 0 48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;font-weight:500;line-height:1.1em;padding:8px;background-color:#1e90ff;border-radius:4px}.legend .trend .metric .type{font-weight:initial;font-size:.8em}.legend .trend .labels{flex:1;display:flex;gap:4px;flex-direction:column;justify-content:center}.legend .trend .labels .metric-name{font-size:12px;font-weight:500;line-height:1em}.legend .trend .labels .entity-name{font-size:11px;line-height:1em;margin-left:8px}.legend .trend xui-button{display:flex;opacity:0;margin-right:4px;transition:opacity ease-in-out .3s}.legend .trend:hover xui-button{opacity:1}\n"], dependencies: [{ kind: "component", type: i3.XuiButton, selector: "xui-button", inputs: ["type", "size", "color", "shine", "disabled", "stateDelay", "onClick"], outputs: ["click"] }, { kind: "component", type: i3.XuiIcon, selector: "xui-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "icon"], exportAs: ["xuiIcon"] }, { kind: "component", type: i3.XuiContextMenu, selector: "xui-context-menu", inputs: ["anchor"], outputs: ["afterClosed"] }, { kind: "directive", type: i3$1.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i3$1.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: i3$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: i4$1.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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ChartComponent, decorators: [{
type: Component,
args: [{ selector: 'xui-analysis-chart', template: "<div echarts (chartInit)=\"onChartInit($event)\" [options]=\"chartOptions\" class=\"chart\"></div>\n<div class=\"legend\">\n @for (trend of trends(); track trend) {\n <div class=\"trend\">\n <div class=\"metric\">\n 42.0\n <div class=\"type\">%</div>\n </div>\n\n <div class=\"labels\">\n <div class=\"metric-name\">{{ trend.metric.name }}</div>\n <div class=\"entity-name\">{{ trend.entity.name }}</div>\n </div>\n\n <xui-button type=\"icon\" [cdkMenuTriggerFor]=\"menu\">\n <xui-icon icon=\"more_horiz\"></xui-icon>\n </xui-button>\n </div>\n }\n</div>\n\n<ng-template #menu>\n <xui-context-menu cdkMenu>\n <xui-button cdkMenuItem>Remove</xui-button>\n <hr />\n <xui-button cdkMenuItem>None</xui-button>\n </xui-context-menu>\n</ng-template>\n", styles: [":host{width:100%;min-height:200px;display:flex;gap:4px}.chart{flex:1;background-color:#fff}.legend{width:280px;display:flex;flex-direction:column;gap:4px}.legend .trend{height:48px;display:flex;align-items:center;gap:8px;border-radius:4px}.legend .trend:hover{outline:1px solid gray;outline-offset:-1px}.legend .trend .metric{height:100%;flex:0 0 48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;font-weight:500;line-height:1.1em;padding:8px;background-color:#1e90ff;border-radius:4px}.legend .trend .metric .type{font-weight:initial;font-size:.8em}.legend .trend .labels{flex:1;display:flex;gap:4px;flex-direction:column;justify-content:center}.legend .trend .labels .metric-name{font-size:12px;font-weight:500;line-height:1em}.legend .trend .labels .entity-name{font-size:11px;line-height:1em;margin-left:8px}.legend .trend xui-button{display:flex;opacity:0;margin-right:4px;transition:opacity ease-in-out .3s}.legend .trend:hover xui-button{opacity:1}\n"] }]
}], ctorParameters: () => [{ type: AnalysisService }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }], propDecorators: { index: [{
type: Input
}] } });
class XuiAnalysisComponent {
get charts() {
return this.analysisService.charts;
}
constructor(analysisService) {
this.analysisService = analysisService;
this.isDragging = this.analysisService.isDragging;
this.closed = false;
}
ngOnInit() {
const first = this.entities?.[0].entities[0];
this.analysisService.addChart(0, [
{
entity: first,
metric: first?.metrics?.[0].metrics?.[0]
}
]);
this.analysisService.addTrend(0, {
entity: first,
metric: first?.metrics?.[0].metrics?.[1]
});
this.analysisService.addChart(1, [
{
entity: first,
metric: first?.metrics?.[0].metrics?.[0]
}
]);
this.analysisService.addChart(3, [
{
entity: first,
metric: first?.metrics?.[0].metrics?.[0]
}
]);
// this.analysisService.addTrend(0, {
// entity: first,
// metric: first?.metrics?.[0].metrics?.[1]!
// });
// this.analysisService.addTrend(0, {
// entity: first,
// metric: first?.metrics?.[0].metrics?.[1]!
// });
// this.analysisService.addTrend(0, {
// entity: first,
// metric: first?.metrics?.[0].metrics?.[1]!
// });
}
dropped(event, index, isPlaceholder = true) {
if (isPlaceholder) {
this.analysisService.addChart(index, [event.item.data]);
}
else {
this.analysisService.addTrend(index, event.item.data);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XuiAnalysisComponent, deps: [{ token: AnalysisService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XuiAnalysisComponent, selector: "xui-analysis", inputs: { entities: "entities", loadData: "loadData" }, providers: [AnalysisService], exportAs: ["xuiAnalysis"], ngImport: i0, template: "<div class=\"header\">\n <p>New Analysis</p>\n <div class=\"buttons\">\n <xui-button><xui-icon icon=\"add_circle\"></xui-icon> New</xui-button>\n <xui-button><xui-icon icon=\"save\"></xui-icon> Save</xui-button>\n <xui-button><xui-icon icon=\"file_open\"></xui-icon> Load</xui-button>\n\n <xui-button><xui-icon icon=\"file_save\"></xui-icon> Export</xui-button>\n <xui-button><xui-icon icon=\"share\"></xui-icon> Share</xui-button>\n\n <xui-button [cdkMenuTriggerFor]=\"moreMenu\">More <xui-icon icon=\"arrow_drop_down\"></xui-icon></xui-button>\n\n <ng-template #moreMenu>\n <xui-context-menu cdkMenu>\n <xui-button cdkMenuItem>Save as ...</xui-button>\n <xui-button cdkMenuItem color=\"error\">\n Delete\n <xui-icon icon=\"delete-outline\"></xui-icon>\n </xui-button>\n </xui-context-menu>\n </ng-template>\n </div>\n</div>\n\n<div class=\"content\" cdkDropListGroup>\n <div class=\"drawer\" [class.closed]=\"closed\">\n <xui-tab-group>\n <xui-tab title=\"Metrics\">\n <xui-metrics [entities]=\"entities\"></xui-metrics>\n </xui-tab>\n <xui-tab title=\"Data\">Data</xui-tab>\n </xui-tab-group>\n\n <xui-button class=\"toggle\" type=\"icon\" (click)=\"closed = !closed\">\n <xui-icon [icon]=\"closed ? 'chevron-double-right' : 'chevron-double-left'\"></xui-icon>\n </xui-button>\n </div>\n\n <div class=\"charts\">\n <div class=\"placeholder\" cdkDropList (cdkDropListDropped)=\"dropped($event, 0)\" *ngIf=\"isDragging()\">\n Drop Here to Add Metric\n </div>\n\n @for (chart of charts; track chart; let i = $index) {\n <ng-container>\n <div class=\"placeholder-group\">\n <xui-analysis-chart [index]=\"i\" cdkDropList />\n <div class=\"placeholder\" cdkDropList (cdkDropListDropped)=\"dropped($event, i, false)\" *ngIf=\"isDragging()\">\n Drop Here to Add Metric\n </div>\n </div>\n\n <div class=\"placeholder\" cdkDropList (cdkDropListDropped)=\"dropped($event, i + 1)\" *ngIf=\"isDragging()\">\n Drop Here to Add Metric\n </div>\n </ng-container>\n }\n </div>\n</div>\n", styles: [":host{height:600px;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;background-color:var(--color-bg-secondary)}.header{display:flex;justify-content:space-between;align-items:center;padding:4px 12px;border-bottom:1px solid gray}.header p{font-weight:500}.header .buttons{display:flex}.content{height:100%;display:flex}.content .drawer{position:relative;width:45%;height:100%;border-right:1px solid gray;overflow:hidden;transition:width ease-in-out .5s}.content .drawer xui-tab-group{height:100%;transition:opacity ease-in-out .5s}.content .drawer.closed{width:45px}.content .drawer.closed xui-tab-group{opacity:0}.content .drawer .toggle{position:absolute;top:4px;right:4px}.content .charts{flex:1;display:flex;gap:12px;flex-direction:column;padding:24px 16px 0;overflow-y:auto}.content .charts .placeholder-group{position:relative;width:100%}.content .charts .placeholder-group .placeholder{position:absolute;inset:0;height:auto}.content .charts .placeholder{flex:0 0 auto;height:48px;display:grid;place-items:center;font-size:1.3rem;font-weight:600;color:var(--color-primary-default);border:3px dashed currentColor;border-radius:8px;background:oklch(var(--color-primary-default-lch)/.2) url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'><path fill='#4CAF50' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z' /></svg>\") center no-repeat;background-size:100px auto}.content .charts .placeholder:hover{color:var(--success-color-default);border-color:currentColor;background:oklch(var(--color-success-default-lch)/.2)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.XuiButton, selector: "xui-button", inputs: ["type", "size", "color", "shine", "disabled", "stateDelay", "onClick"], outputs: ["click"] }, { kind: "component", type: i3.XuiIcon, selector: "xui-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "icon"], exportAs: ["xuiIcon"] }, { kind: "component", type: i3.XuiContextMenu, selector: "xui-context-menu", inputs: ["anchor"], outputs: ["afterClosed"] }, { kind: "directive", type: i3$1.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i3$1.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: i3$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: i3.XuiTab, selector: "xui-tab", inputs: ["title", "disabled"] }, { kind: "component", type: i3.XuiTabGroup, selector: "xui-tab-group" }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: MetricsComponent, selector: "xui-metrics", inputs: ["entities"] }, { kind: "component", type: ChartComponent, selector: "xui-analysis-chart", inputs: ["index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XuiAnalysisComponent, decorators: [{
type: Component,
args: [{ selector: 'xui-analysis', exportAs: 'xuiAnalysis', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, providers: [AnalysisService], template: "<div class=\"header\">\n <p>New Analysis</p>\n <div class=\"buttons\">\n <xui-button><xui-icon icon=\"add_circle\"></xui-icon> New</xui-button>\n <xui-button><xui-icon icon=\"save\"></xui-icon> Save</xui-button>\n <xui-button><xui-icon icon=\"file_open\"></xui-icon> Load</xui-button>\n\n <xui-button><xui-icon icon=\"file_save\"></xui-icon> Export</xui-button>\n <xui-button><xui-icon icon=\"share\"></xui-icon> Share</xui-button>\n\n <xui-button [cdkMenuTriggerFor]=\"moreMenu\">More <xui-icon icon=\"arrow_drop_down\"></xui-icon></xui-button>\n\n <ng-template #moreMenu>\n <xui-context-menu cdkMenu>\n <xui-button cdkMenuItem>Save as ...</xui-button>\n <xui-button cdkMenuItem color=\"error\">\n Delete\n <xui-icon icon=\"delete-outline\"></xui-icon>\n </xui-button>\n </xui-context-menu>\n </ng-template>\n </div>\n</div>\n\n<div class=\"content\" cdkDropListGroup>\n <div class=\"drawer\" [class.closed]=\"closed\">\n <xui-tab-group>\n <xui-tab title=\"Metrics\">\n <xui-metrics [entities]=\"entities\"></xui-metrics>\n </xui-tab>\n <xui-tab title=\"Data\">Data</xui-tab>\n </xui-tab-group>\n\n <xui-button class=\"toggle\" type=\"icon\" (click)=\"closed = !closed\">\n <xui-icon [icon]=\"closed ? 'chevron-double-right' : 'chevron-double-left'\"></xui-icon>\n </xui-button>\n </div>\n\n <div class=\"charts\">\n <div class=\"placeholder\" cdkDropList (cdkDropListDropped)=\"dropped($event, 0)\" *ngIf=\"isDragging()\">\n Drop Here to Add Metric\n </div>\n\n @for (chart of charts; track chart; let i = $index) {\n <ng-container>\n <div class=\"placeholder-group\">\n <xui-analysis-chart [index]=\"i\" cdkDropList />\n <div class=\"placeholder\" cdkDropList (cdkDropListDropped)=\"dropped($event, i, false)\" *ngIf=\"isDragging()\">\n Drop Here to Add Metric\n </div>\n </div>\n\n <div class=\"placeholder\" cdkDropList (cdkDropListDropped)=\"dropped($event, i + 1)\" *ngIf=\"isDragging()\">\n Drop Here to Add Metric\n </div>\n </ng-container>\n }\n </div>\n</div>\n", styles: [":host{height:600px;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;background-color:var(--color-bg-secondary)}.header{display:flex;justify-content:space-between;align-items:center;padding:4px 12px;border-bottom:1px solid gray}.header p{font-weight:500}.header .buttons{display:flex}.content{height:100%;display:flex}.content .drawer{position:relative;width:45%;height:100%;border-right:1px solid gray;overflow:hidden;transition:width ease-in-out .5s}.content .drawer xui-tab-group{height:100%;transition:opacity ease-in-out .5s}.content .drawer.closed{width:45px}.content .drawer.closed xui-tab-group{opacity:0}.content .drawer .toggle{position:absolute;top:4px;right:4px}.content .charts{flex:1;display:flex;gap:12px;flex-direction:column;padding:24px 16px 0;overflow-y:auto}.content .charts .placeholder-group{position:relative;width:100%}.content .charts .placeholder-group .placeholder{position:absolute;inset:0;height:auto}.content .charts .placeholder{flex:0 0 auto;height:48px;display:grid;place-items:center;font-size:1.3rem;font-weight:600;color:var(--color-primary-default);border:3px dashed currentColor;border-radius:8px;background:oklch(var(--color-primary-default-lch)/.2) url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'><path fill='#4CAF50' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z' /></svg>\") center no-repeat;background-size:100px auto}.content .charts .placeholder:hover{color:var(--success-color-default);border-color:currentColor;background:oklch(var(--color-success-default-lch)/.2)}\n"] }]
}], ctorParameters: () => [{ type: AnalysisService }], propDecorators: { entities: [{
type: Input
}], loadData: [{
type: Input
}] } });
class XuiAnalysisModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XuiAnalysisModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XuiAnalysisModule, declarations: [XuiAnalysisComponent, MetricsComponent, ChartComponent], imports: [CommonModule,
XuiButtonModule,
XuiIcon,
XuiContextMenuModule,
XuiTabModule,
XuiInputModule,
CdkMenuModule,
DragDropModule, i4$1.NgxEchartsModule], exports: [XuiAnalysisComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XuiAnalysisModule, imports: [CommonModule,
XuiButtonModule,
XuiIcon,
XuiContextMenuModule,
XuiTabModule,
XuiInputModule,
CdkMenuModule,
DragDropModule,
NgxEchartsModule.forChild()] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XuiAnalysisModule, decorators: [{
type: NgModule,
args: [{
declarations: [XuiAnalysisComponent, MetricsComponent, ChartComponent],
imports: [
CommonModule,
XuiButtonModule,
XuiIcon,
XuiContextMenuModule,
XuiTabModule,
XuiInputModule,
CdkMenuModule,
DragDropModule,
NgxEchartsModule.forChild()
],
exports: [XuiAnalysisComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { XuiAnalysisComponent, XuiAnalysisModule };
//# sourceMappingURL=xui-charts.mjs.map