@progress/kendo-angular-chart-wizard
Version:
Kendo UI Angular Chart Wizard component
271 lines (270 loc) • 16.5 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
import { StateService } from '../state.service';
import { ActionTypes, isCategorical, updateState } from '../chart-wizard-state';
import { FormBuilder } from '@angular/forms';
import { CellTemplateDirective, ColumnComponent, CommandColumnComponent, DataBindingDirective, GridComponent, GridToolbarFocusableDirective, ReactiveEditingDirective, RemoveCommandDirective, RowReorderColumnComponent, ToolbarTemplateDirective } from '@progress/kendo-angular-grid';
import { plusIcon, trashIcon } from '@progress/kendo-svg-icons';
import { ExpansionPanelComponent } from '@progress/kendo-angular-layout';
import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import { ChartWizardLocalizationService } from '../localization/chartwizard-localization.service';
import * as i0 from "@angular/core";
import * as i1 from "../state.service";
import * as i2 from "@angular/forms";
import * as i3 from "../localization/chartwizard-localization.service";
/**
* @hidden
*/
export class ChartWizardPropertyPaneDataTabComponent {
stateService;
formBuilder;
cdr;
renderer;
localization;
categoryAxisX = ActionTypes.categoryAxisX;
valueAxisY = ActionTypes.valueAxisY;
trashIcon = trashIcon;
plusIcon = plusIcon;
isCategorical = isCategorical;
grid;
constructor(stateService, formBuilder, cdr, renderer, localization) {
this.stateService = stateService;
this.formBuilder = formBuilder;
this.cdr = cdr;
this.renderer = renderer;
this.localization = localization;
this.formGroup = this.formBuilder.group({
name: null,
});
}
ngAfterViewInit() {
if (this.grid) {
const gridHeader = this.grid.wrapper.nativeElement.querySelector('.k-grid .k-grid-header');
const gridContent = this.grid.wrapper.nativeElement.querySelector('.k-grid .k-grid-content');
this.renderer.setStyle(gridHeader, 'display', 'none');
this.renderer.setStyle(gridContent, 'overflow', 'auto');
}
}
updateState(action, value) {
this.stateService.state = updateState(this.stateService.state, action, value);
}
formGroup;
createFormGroup(args) {
const item = args.isNew ? {} : args.dataItem;
this.formGroup = this.formBuilder.group({
name: item.name,
});
return this.formGroup;
}
addData() {
this.stateService.state.series.push(this.stateService.deletedSeries[0]);
this.stateService.deletedSeries.shift();
this.updateState(ActionTypes.seriesChange, this.stateService.state.series);
}
removeData(event) {
this.stateService.deletedSeries.push(event.dataItem);
this.updateState(ActionTypes.seriesChange, event.sender.data.data);
}
onRowReorder(grid) {
this.updateState(ActionTypes.seriesChange, grid.data.data);
}
isDisabled(grid) {
return grid.data.data.length === this.stateService.state.initialSeries.length;
}
detectChanges() {
this.cdr.detectChanges();
}
messageFor(key) {
return this.localization.get(key);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, deps: [{ token: i1.StateService }, { token: i2.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i3.ChartWizardLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChartWizardPropertyPaneDataTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-data-tab", viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }], ngImport: i0, template: `
<kendo-expansionpanel [title]="messageFor('configuration')" [expanded]="true">
<form class="k-form k-form-md">
<fieldset class="k-form-fieldset">
<legend class="k-form-legend">
{{ stateService.state.seriesType === 'scatter' ? messageFor('configurationXAxis') : messageFor('configurationCategoryAxis') }}
</legend>
<kendo-dropdownlist
[data]="stateService.state.columns"
[value]="stateService.state.categoryField"
(valueChange)="updateState(categoryAxisX, $event)"
fillMode="outline"
rounded="medium"
size="medium"
>
</kendo-dropdownlist>
</fieldset>
(isCategorical(stateService.state.seriesType)) {
<fieldset class="k-form-fieldset">
<legend class="k-form-legend">{{ messageFor('configurationSeries') }}</legend>
<kendo-grid
#grid
[kendoGridReactiveEditing]="createFormGroup"
[kendoGridBinding]="stateService.state.series"
[rowReorderable]="true"
(rowReorder)="onRowReorder(grid)"
(remove)="removeData($event)"
>
<ng-template kendoGridToolbarTemplate>
<button
kendoButton
type="button"
[svgIcon]="plusIcon"
fillMode="flat"
rounded="medium"
[disabled]="isDisabled(grid)"
(click)="addData()"
>
{{ messageFor('configurationSeriesAdd') }}
</button>
</ng-template>
<kendo-grid-rowreorder-column [width]="40"></kendo-grid-rowreorder-column>
<kendo-grid-column field="name" title="">
</kendo-grid-column>
<kendo-grid-command-column [width]="40">
<ng-template kendoGridCellTemplate>
<button
[svgIcon]="trashIcon"
kendoGridRemoveCommand
fillMode="flat"
rounded="medium"
[disabled]="stateService.state.series.length < 2"
></button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
</fieldset>
}
(stateService.state.seriesType === 'pie') {
<fieldset
class="k-form-fieldset"
>
<legend class="k-form-legend">
{{ messageFor('configurationValueAxis') }}
</legend>
<kendo-dropdownlist
[data]="stateService.state.columns"
[value]="stateService.state.valueField"
(valueChange)="updateState(valueAxisY, $event)"
fillMode="outline"
rounded="medium"
size="medium"
>
</kendo-dropdownlist>
</fieldset>
}
</form>
</kendo-expansionpanel>
`, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: ReactiveEditingDirective, selector: "[kendoGridReactiveEditing]", inputs: ["kendoGridReactiveEditing"] }, { kind: "directive", type: DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: RowReorderColumnComponent, selector: "kendo-grid-rowreorder-column", inputs: ["dragHandleIcon", "dragHandleSVGIcon"] }, { kind: "component", type: ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "component", type: CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: GridToolbarFocusableDirective, selector: " [kendoGridToolbarFocusable], [kendoGridAddCommand], [kendoGridCancelCommand], [kendoGridEditCommand], [kendoGridRemoveCommand], [kendoGridSaveCommand], [kendoGridExcelCommand], [kendoGridPDFCommand] " }, { kind: "component", type: RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-chartwizard-property-pane-data-tab',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `
<kendo-expansionpanel [title]="messageFor('configuration')" [expanded]="true">
<form class="k-form k-form-md">
<fieldset class="k-form-fieldset">
<legend class="k-form-legend">
{{ stateService.state.seriesType === 'scatter' ? messageFor('configurationXAxis') : messageFor('configurationCategoryAxis') }}
</legend>
<kendo-dropdownlist
[data]="stateService.state.columns"
[value]="stateService.state.categoryField"
(valueChange)="updateState(categoryAxisX, $event)"
fillMode="outline"
rounded="medium"
size="medium"
>
</kendo-dropdownlist>
</fieldset>
(isCategorical(stateService.state.seriesType)) {
<fieldset class="k-form-fieldset">
<legend class="k-form-legend">{{ messageFor('configurationSeries') }}</legend>
<kendo-grid
#grid
[kendoGridReactiveEditing]="createFormGroup"
[kendoGridBinding]="stateService.state.series"
[rowReorderable]="true"
(rowReorder)="onRowReorder(grid)"
(remove)="removeData($event)"
>
<ng-template kendoGridToolbarTemplate>
<button
kendoButton
type="button"
[svgIcon]="plusIcon"
fillMode="flat"
rounded="medium"
[disabled]="isDisabled(grid)"
(click)="addData()"
>
{{ messageFor('configurationSeriesAdd') }}
</button>
</ng-template>
<kendo-grid-rowreorder-column [width]="40"></kendo-grid-rowreorder-column>
<kendo-grid-column field="name" title="">
</kendo-grid-column>
<kendo-grid-command-column [width]="40">
<ng-template kendoGridCellTemplate>
<button
[svgIcon]="trashIcon"
kendoGridRemoveCommand
fillMode="flat"
rounded="medium"
[disabled]="stateService.state.series.length < 2"
></button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
</fieldset>
}
(stateService.state.seriesType === 'pie') {
<fieldset
class="k-form-fieldset"
>
<legend class="k-form-legend">
{{ messageFor('configurationValueAxis') }}
</legend>
<kendo-dropdownlist
[data]="stateService.state.columns"
[value]="stateService.state.valueField"
(valueChange)="updateState(valueAxisY, $event)"
fillMode="outline"
rounded="medium"
size="medium"
>
</kendo-dropdownlist>
</fieldset>
}
</form>
</kendo-expansionpanel>
`,
standalone: true,
imports: [
ExpansionPanelComponent,
DropDownListComponent,
GridComponent,
ReactiveEditingDirective,
DataBindingDirective,
ToolbarTemplateDirective,
ButtonComponent,
RowReorderColumnComponent,
ColumnComponent,
CommandColumnComponent,
CellTemplateDirective,
GridToolbarFocusableDirective,
RemoveCommandDirective
]
}]
}], ctorParameters: () => [{ type: i1.StateService }, { type: i2.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i3.ChartWizardLocalizationService }], propDecorators: { grid: [{
type: ViewChild,
args: [GridComponent]
}] } });