@progress/kendo-angular-chart-wizard
Version:
Kendo UI Angular Chart Wizard component
765 lines (645 loc) • 79.7 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, Component, EventEmitter, HostBinding, Input, Output, ViewChild, } from '@angular/core';
import { WatermarkOverlayComponent, isPresent, shouldShowValidationUI, getLicenseMessage } from '@progress/kendo-angular-common';
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
import { validatePackage } from '@progress/kendo-licensing';
import { Subscription } from 'rxjs';
import { packageMetadata } from './package-metadata';
import { ActionTypes, createState, updateState, mergeStates } from './chart-wizard-state';
import { exportIcon, fileIcon, fileImageIcon, filePdfIcon } from '@progress/kendo-svg-icons';
import { StateService } from './state.service';
import { ChartComponent } from '@progress/kendo-angular-charts';
import { saveAs } from '@progress/kendo-file-saver';
import { exportPDF } from '@progress/kendo-drawing';
import { ChartWizardPropertyPaneDataTabComponent } from './property-pane/data-tab.component';
import { ChartWizardPropertyPaneChartTabComponent } from './property-pane/chart-tab.component';
import { LegendComponent } from '@progress/kendo-angular-charts';
import { SeriesItemComponent } from '@progress/kendo-angular-charts';
import { SeriesComponent } from '@progress/kendo-angular-charts';
import { ValueAxisItemComponent } from '@progress/kendo-angular-charts';
import { ValueAxisComponent } from '@progress/kendo-angular-charts';
import { CategoryAxisItemComponent } from '@progress/kendo-angular-charts';
import { CategoryAxisComponent } from '@progress/kendo-angular-charts';
import { ChartAreaComponent } from '@progress/kendo-angular-charts';
import { SubtitleComponent } from '@progress/kendo-angular-charts';
import { TitleComponent } from '@progress/kendo-angular-charts';
import { WindowComponent } from '@progress/kendo-angular-dialog';
import { SplitterComponent, SplitterPaneComponent, TabContentDirective, TabStripComponent, TabStripTabComponent } from '@progress/kendo-angular-layout';
import { DropDownButtonComponent } from '@progress/kendo-angular-buttons';
import { ExportEvent } from './events';
import { defaultAllSeriesItem } from './common/models';
import { ChartWizardPropertyPaneFormatTabComponent } from './property-pane/format-tab.component';
import { ChartWizardCommon } from '@progress/kendo-charts';
import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
import { ChartWizardLocalizationService } from './localization/chartwizard-localization.service';
import { trigger, state, style, transition, animate } from '@angular/animations';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
import * as i2 from "./state.service";
/**
* Represents the Kendo UI for Angular Chart Wizard component.
*
* Use this component to create and configure charts with a guided interface.
*
* @example
* ```html
* <kendo-chartwizard [data]="data"></kendo-chartwizard>
* ```
* @remarks
* Supported children components are: {@link CustomMessagesComponent}.
*/
export class ChartWizardComponent {
localization;
stateService;
/**
* Sets the data for the Chart Wizard.
*/
data;
/**
* Sets the initial state for the Chart Wizard.
*/
defaultState;
/**
* Sets the export options for the Chart Wizard.
*/
exportOptions;
/**
* Specifies whether the configuration pane is collapsed by default.
* @default false
*/
collapsedConfigurationPane = false;
/**
* Sets the window settings for the Chart Wizard.
*/
windowSettings = {};
/**
* @hidden
*/
showLicenseWatermark = false;
/**
* @hidden
*/
licenseMessage;
/**
* @hidden
*/
exportIcon = exportIcon;
/**
* @hidden
*/
exportDropdownItems = [];
/**
* Fires when the Chart Wizard window closes.
*/
close = new EventEmitter();
/**
* Fires before the chart is exported. Prevent the default to cancel export.
*/
export = new EventEmitter();
get dir() {
return this.stateService.direction;
}
/**
* @hidden
*/
chart;
/**
* @hidden
*/
propertyPane;
/**
* @hidden
*/
dataTab;
/**
* @hidden
*/
messages = ChartWizardCommon.messages;
subscription = new Subscription();
constructor(localization, stateService) {
this.localization = localization;
this.stateService = stateService;
const isValid = validatePackage(packageMetadata);
this.licenseMessage = getLicenseMessage(packageMetadata);
this.showLicenseWatermark = shouldShowValidationUI(isValid);
this.stateService.direction = this.localization.rtl ? 'rtl' : 'ltr';
}
ngAfterViewInit() {
this.subscription.add(this.localization.changes.subscribe(({ rtl }) => {
this.stateService.direction = rtl ? 'rtl' : 'ltr';
this.exportDropdownItems = [
{
text: this.messageFor('exportPDFButton'),
svgIcon: filePdfIcon,
},
{
text: this.messageFor('exportSVGButton'),
svgIcon: fileIcon,
},
{
text: this.messageFor('exportPNGButton'),
svgIcon: fileImageIcon,
},
];
}));
this.stateService.dataTab = this.dataTab;
}
ngOnChanges(changes) {
if (changes['data'] && changes['data'].currentValue?.length > 0) {
const data = changes['data'].currentValue;
const clonedData = structuredClone(data);
this.stateService.data = clonedData;
this.stateService.state = createState(clonedData, this.stateService.state.seriesType);
}
if (changes['defaultState'] && this.data?.length > 0) {
const defaultState = changes['defaultState'].currentValue;
if (defaultState.seriesType) {
this.stateService.state.seriesType = defaultState.seriesType;
this.stateService.state = mergeStates(this.stateService.state, createState(this.stateService.data, this.stateService.state.seriesType));
}
this.stateService.currentSeries = defaultAllSeriesItem;
if (typeof defaultState.stack !== 'undefined') {
this.stateService.state = updateState(this.stateService.state, ActionTypes.stacked, defaultState.stack);
}
this.propertyPane?.detectChanges();
}
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
/**
* @hidden
*/
messageFor(key) {
return this.localization.get(key);
}
/**
* @hidden
*/
onExport(exportType) {
const args = new ExportEvent(this.chart, this.exportOptions);
this.export.emit(args);
if (args.isDefaultPrevented()) {
return;
}
switch (exportType.text) {
case 'PDF File':
exportPDF(this.chart.exportVisual(), this.exportOptions?.pdf).then((dataURI) => {
saveAs(dataURI, this.exportOptions?.fileName || 'chart');
});
break;
case 'SVG File':
this.chart.exportSVG(this.exportOptions?.image).then((dataURI) => {
saveAs(dataURI, this.exportOptions?.fileName || 'chart');
});
break;
case 'PNG File':
this.chart.exportImage(this.exportOptions?.image).then((dataURI) => {
saveAs(dataURI, this.exportOptions?.fileName || 'chart');
});
break;
}
}
/**
* @hidden
*/
get windowWidth() {
return isPresent(this.windowSettings?.width) ? this.windowSettings.width : this.stateService.windowSize.width;
}
/**
* @hidden
*/
get windowHeight() {
return isPresent(this.windowSettings?.height) ? this.windowSettings.height : this.stateService.windowSize.height;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartWizardComponent, deps: [{ token: i1.LocalizationService }, { token: i2.StateService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChartWizardComponent, isStandalone: true, selector: "kendo-chartwizard", inputs: { data: "data", defaultState: "defaultState", exportOptions: "exportOptions", collapsedConfigurationPane: "collapsedConfigurationPane", windowSettings: "windowSettings" }, outputs: { close: "close", export: "export" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.chartwizard',
},
ChartWizardLocalizationService,
{
provide: LocalizationService,
useExisting: ChartWizardLocalizationService
},
StateService
], viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true }, { propertyName: "propertyPane", first: true, predicate: ChartWizardPropertyPaneChartTabComponent, descendants: true }, { propertyName: "dataTab", first: true, predicate: ChartWizardPropertyPaneDataTabComponent, descendants: true }], exportAs: ["kendoChartWizard"], usesOnChanges: true, ngImport: i0, template: `
<ng-container
kendoChartWizardLocalizedMessages
i18n-windowTitle="kendo.chartwizard.windowTitle|The title of the window."
[windowTitle]="messages.windowTitle"
i18n-exportButton="kendo.chartwizard.exportButton|The text of the Export DropDownButton."
[exportButton]="messages.exportButton"
i18n-exportPDFButton="kendo.chartwizard.exportPDFButton|The text of the Export DropDownButton option that represents PDF."
[exportPDFButton]="messages.exportPDFButton"
i18n-exportSVGButton="kendo.chartwizard.exportSVGButton|The text of the Export DropDownButton option that represents SVG."
[exportSVGButton]="messages.exportSVGButton"
i18n-exportPNGButton="kendo.chartwizard.exportPNGButton|The text of the Export DropDownButton option that represents PNG."
[exportPNGButton]="messages.exportPNGButton"
i18n-tabChart="kendo.chartwizard.tabChart|The text of the Chart tab of the property pane."
[tabChart]="messages.tabChart"
i18n-tabData="kendo.chartwizard.tabData|The text of the Data tab of the property pane."
[tabData]="messages.tabData"
i18n-tabFormat="kendo.chartwizard.tabFormat|The text of the Format tab of the property pane."
[tabFormat]="messages.tabFormat"
i18n-barChart="kendo.chartwizard.barChart|The text of the Chart panel that represents Bar Charts."
[barChart]="messages.barChart"
i18n-barChartBar="kendo.chartwizard.barChartBar|The text of the Bar Chart type."
[barChartBar]="messages.barChartBar"
i18n-barChartStackedBar="kendo.chartwizard.barChartStackedBar|The text of the Stacked Bar Chart type."
[barChartStackedBar]="messages.barChartStackedBar"
i18n-barChart100StackedBar="kendo.chartwizard.barChart100StackedBar|The text of the 100% Stacked Bar Chart type."
[barChart100StackedBar]="messages.barChart100StackedBar"
i18n-pieChart="kendo.chartwizard.pieChart|The text of the Chart panel that represents Pie Charts."
[pieChart]="messages.pieChart"
i18n-pieChartPie="kendo.chartwizard.pieChartPie|The text of the Pie Chart type."
[pieChartPie]="messages.pieChartPie"
i18n-columnChart="kendo.chartwizard.columnChart|The text of the Chart panel that represents Column Charts."
[columnChart]="messages.columnChart"
i18n-columnChartColumn="kendo.chartwizard.columnChartColumn|The text of the Column Chart type."
[columnChartColumn]="messages.columnChartColumn"
i18n-columnChartStackedColumn="kendo.chartwizard.columnChartStackedColumn|The text of the Stacked Column Chart type."
[columnChartStackedColumn]="messages.columnChartStackedColumn"
i18n-columnChart100StackedColumn="kendo.chartwizard.columnChart100StackedColumn|The text of the 100% Stacked Column Chart type."
[columnChart100StackedColumn]="messages.columnChart100StackedColumn"
i18n-lineChart="kendo.chartwizard.lineChart|The text of the Chart panel that represents Line Charts."
[lineChart]="messages.lineChart"
i18n-lineChartLine="kendo.chartwizard.lineChartLine|The text of the Line Chart type."
[lineChartLine]="messages.lineChartLine"
i18n-lineChartStackedLine="kendo.chartwizard.lineChartStackedLine|The text of the Stacked Line Chart type."
[lineChartStackedLine]="messages.lineChartStackedLine"
i18n-lineChart100StackedLine="kendo.chartwizard.lineChart100StackedLine|The text of the 100% Stacked Line Chart type."
[lineChart100StackedLine]="messages.lineChart100StackedLine"
i18n-scatterChart="kendo.chartwizard.scatterChart|The text of the Chart panel that represents Scatter Charts."
[scatterChart]="messages.scatterChart"
i18n-scatterChartScatter="kendo.chartwizard.scatterChartScatter|The text of the Scatter Chart type."
[scatterChartScatter]="messages.scatterChartScatter"
i18n-configuration="kendo.chartwizard.configuration|The text of the Configuration panel of the Data tab."
[configuration]="messages.configuration"
i18n-configurationCategoryAxis="kendo.chartwizard.configurationCategoryAxis|The caption of the Category Axis DropDown in the Configuration panel."
[configurationCategoryAxis]="messages.configurationCategoryAxis"
i18n-configurationXAxis="kendo.chartwizard.configurationXAxis|The caption of the X Axis DropDown in the Configuration panel when a Scatter Chart is selected."
[configurationXAxis]="messages.configurationXAxis"
i18n-configurationValueAxis="kendo.chartwizard.configurationValueAxis|The caption of the Value Axis DropDown in the Configuration panel when a Pie Chart is selected."
[configurationValueAxis]="messages.configurationValueAxis"
i18n-configurationSeries="kendo.chartwizard.configurationSeries|The text of the Series Grid in the Configuration panel when a Categorical Chart is selected."
[configurationSeries]="messages.configurationSeries"
i18n-configurationSeriesAdd="kendo.chartwizard.configurationSeriesAdd|The text of the Add Series button in the Grid of the Configuration panel."
[configurationSeriesAdd]="messages.configurationSeriesAdd"
i18n-formatChartArea="kendo.chartwizard.formatChartArea|The text of the Chart Area panel of the Format tab."
[formatChartArea]="messages.formatChartArea"
i18n-formatChartAreaMargins="kendo.chartwizard.formatChartAreaMargins|The text of the Margins settings of the Chart Area panel."
[formatChartAreaMargins]="messages.formatChartAreaMargins"
i18n-formatChartAreaMarginsAuto="kendo.chartwizard.formatChartAreaMarginsAuto|The placeholder of the Margins settings of the Chart Area panel."
[formatChartAreaMarginsAuto]="messages.formatChartAreaMarginsAuto"
i18n-formatChartAreaMarginsLeft="kendo.chartwizard.formatChartAreaMarginsLeft|The label of the Left margin setting of the Chart Area panel."
[formatChartAreaMarginsLeft]="messages.formatChartAreaMarginsLeft"
i18n-formatChartAreaMarginsRight="kendo.chartwizard.formatChartAreaMarginsRight|The label of the Right margin setting of the Chart Area panel."
[formatChartAreaMarginsRight]="messages.formatChartAreaMarginsRight"
i18n-formatChartAreaMarginsTop="kendo.chartwizard.formatChartAreaMarginsTop|The label of the Top margin setting of the Chart Area panel."
[formatChartAreaMarginsTop]="messages.formatChartAreaMarginsTop"
i18n-formatChartAreaMarginsBottom="kendo.chartwizard.formatChartAreaMarginsBottom|The label of the Bottom margin setting of the Chart Area panel."
[formatChartAreaMarginsBottom]="messages.formatChartAreaMarginsBottom"
i18n-formatChartAreaBackground="kendo.chartwizard.formatChartAreaBackground|The text of the Background settings of the Chart Area panel."
[formatChartAreaBackground]="messages.formatChartAreaBackground"
i18n-formatChartAreaBackgroundColor="kendo.chartwizard.formatChartAreaBackgroundColor|The label of the Color background setting of the Chart Area panel."
[formatChartAreaBackgroundColor]="messages.formatChartAreaBackgroundColor"
i18n-formatTitle="kendo.chartwizard.formatTitle|The text of the Title panel of the Format tab."
[formatTitle]="messages.formatTitle"
i18n-formatTitleApplyTo="kendo.chartwizard.formatTitleApplyTo|The label of the Apply to DropDown of the Title panel."
[formatTitleApplyTo]="messages.formatTitleApplyTo"
i18n-formatTitleChartTitle="kendo.chartwizard.formatTitleChartTitle|The text of the Chart Title option of the Apply to DropDown in the Title panel."
[formatTitleChartTitle]="messages.formatTitleChartTitle"
i18n-formatTitleChartSubtitle="kendo.chartwizard.formatTitleChartSubtitle|The text of the Chart Subtitle option of the Apply to DropDown in the Title panel."
[formatTitleChartSubtitle]="messages.formatTitleChartSubtitle"
i18n-formatTitleLabel="kendo.chartwizard.formatTitleLabel|The label of the Title input of the Title panel."
[formatTitleLabel]="messages.formatTitleLabel"
i18n-formatTitleFont="kendo.chartwizard.formatTitleFont|The label of the Font setting of the Title panel."
[formatTitleFont]="messages.formatTitleFont"
i18n-formatTitleFontPlaceholder="kendo.chartwizard.formatTitleFontPlaceholder|The placeholder of the Font setting of the Title panel."
[formatTitleFontPlaceholder]="messages.formatTitleFontPlaceholder"
i18n-formatTitleSize="kendo.chartwizard.formatTitleSize|The label of the Size setting of the Title panel."
[formatTitleSize]="messages.formatTitleSize"
i18n-formatTitleSizePlaceholder="kendo.chartwizard.formatTitleSizePlaceholder|The placeholder of the Size setting of the Title panel."
[formatTitleSizePlaceholder]="messages.formatTitleSizePlaceholder"
i18n-formatTitleColor="kendo.chartwizard.formatTitleColor|The label of the Color setting of the Title panel."
[formatTitleColor]="messages.formatTitleColor"
i18n-formatSeries="kendo.chartwizard.formatSeries|The text of the Series panel of the Format tab."
[formatSeries]="messages.formatSeries"
i18n-formatSeriesApplyTo="kendo.chartwizard.formatSeriesApplyTo|The label of the Apply to DropDown of the Series panel."
[formatSeriesApplyTo]="messages.formatSeriesApplyTo"
i18n-formatSeriesAllSeries="kendo.chartwizard.formatSeriesAllSeries|The text of the All Series option of the Apply to DropDown in the Series panel."
[formatSeriesAllSeries]="messages.formatSeriesAllSeries"
i18n-formatSeriesColor="kendo.chartwizard.formatSeriesColor|The label of the Color setting of the Series panel."
[formatSeriesColor]="messages.formatSeriesColor"
i18n-formatSeriesShowLabels="kendo.chartwizard.formatSeriesShowLabels|The label of the Show Labels checkbox of the Series panel."
[formatSeriesShowLabels]="messages.formatSeriesShowLabels"
i18n-formatLegend="kendo.chartwizard.formatLegend|The text of the Legend panel of the Format tab."
[formatLegend]="messages.formatLegend"
i18n-formatLegendShowLegend="kendo.chartwizard.formatLegendShowLegend|The label of the Show Legend switch of the Legend panel."
[formatLegendShowLegend]="messages.formatLegendShowLegend"
i18n-formatLegendFont="kendo.chartwizard.formatLegendFont|The label of the Font setting of the Legend panel."
[formatLegendFont]="messages.formatLegendFont"
i18n-formatLegendFontPlaceholder="kendo.chartwizard.formatLegendFontPlaceholder|The placeholder of the Font setting of the Legend panel."
[formatLegendFontPlaceholder]="messages.formatLegendFontPlaceholder"
i18n-formatLegendSize="kendo.chartwizard.formatLegendSize|The label of the Size setting of the Legend panel."
[formatLegendSize]="messages.formatLegendSize"
i18n-formatLegendSizePlaceholder="kendo.chartwizard.formatLegendSizePlaceholder|The placeholder of the Size setting of the Legend panel."
[formatLegendSizePlaceholder]="messages.formatLegendSizePlaceholder"
i18n-formatLegendColor="kendo.chartwizard.formatLegendColor|The label of the Color setting of the Legend panel."
[formatLegendColor]="messages.formatLegendColor"
i18n-formatLegendPosition="kendo.chartwizard.formatLegendPosition|The label of the Posiiton DropDown of the Legend panel."
[formatLegendPosition]="messages.formatLegendPosition"
i18n-formatLegendPositionTop="kendo.chartwizard.formatLegendPositionTop|The text of the Top option of the Position DropDown of the Legend panel."
[formatLegendPositionTop]="messages.formatLegendPositionTop"
i18n-formatLegendPositionBottom="kendo.chartwizard.formatLegendPositionBottom|The text of the Bottom option of the Position DropDown of the Legend panel."
[formatLegendPositionBottom]="messages.formatLegendPositionBottom"
i18n-formatLegendPositionLeft="kendo.chartwizard.formatLegendPositionLeft|The text of the Left option of the Position DropDown of the Legend panel."
[formatLegendPositionLeft]="messages.formatLegendPositionLeft"
i18n-formatLegendPositionRight="kendo.chartwizard.formatLegendPositionRight|The text of the Right option of the Position DropDown of the Legend panel."
[formatLegendPositionRight]="messages.formatLegendPositionRight"
i18n-formatCategoryAxis="kendo.chartwizard.formatCategoryAxis|The text of the Category Axis panel of the Format tab."
[formatCategoryAxis]="messages.formatCategoryAxis"
i18n-formatXAxis="kendo.chartwizard.formatXAxis|The text of the X Axis panel of the Format tab when a Scatter Chart is selected."
[formatXAxis]="messages.formatXAxis"
i18n-formatCategoryAxisTitle="kendo.chartwizard.formatCategoryAxisTitle|The label of the Title settings of the Category Axis panel."
[formatCategoryAxisTitle]="messages.formatCategoryAxisTitle"
i18n-formatCategoryAxisTitlePlaceholder="kendo.chartwizard.formatCategoryAxisTitlePlaceholder|The placeholder of the Title input of the Category Axis panel."
[formatCategoryAxisTitlePlaceholder]="messages.formatCategoryAxisTitlePlaceholder"
i18n-formatCategoryAxisTitleFont="kendo.chartwizard.formatCategoryAxisTitleFont|The label of the Font settings of the Title in the Category Axis panel."
[formatCategoryAxisTitleFont]="messages.formatCategoryAxisTitleFont"
i18n-formatCategoryAxisTitleFontPlaceholder="kendo.chartwizard.formatCategoryAxisTitleFontPlaceholder|The placeholder of the Font settings of the Title in the Category Axis panel."
[formatCategoryAxisTitleFontPlaceholder]="messages.formatCategoryAxisTitleFontPlaceholder"
i18n-formatCategoryAxisTitleSize="kendo.chartwizard.formatCategoryAxisTitleSize|The label of the Size settings of the Title in the Category Axis panel."
[formatCategoryAxisTitleSize]="messages.formatCategoryAxisTitleSize"
i18n-formatCategoryAxisTitleSizePlaceholder="kendo.chartwizard.formatCategoryAxisTitleSizePlaceholder|The placeholder of the Size settings of the Title in the Category Axis panel."
[formatCategoryAxisTitleSizePlaceholder]="messages.formatCategoryAxisTitleSizePlaceholder"
i18n-formatCategoryAxisTitleColor="kendo.chartwizard.formatCategoryAxisTitleColor|The label of the Color settings of the Title in the Category Axis panel."
[formatCategoryAxisTitleColor]="messages.formatCategoryAxisTitleColor"
i18n-formatCategoryAxisLabels="kendo.chartwizard.formatCategoryAxisLabels|The label of the Labels settings of the Category Axis panel."
[formatCategoryAxisLabels]="messages.formatCategoryAxisLabels"
i18n-formatCategoryAxisLabelsFont="kendo.chartwizard.formatCategoryAxisLabelsFont|The label of the Font settings of the Labels in the Category Axis panel."
[formatCategoryAxisLabelsFont]="messages.formatCategoryAxisLabelsFont"
i18n-formatCategoryAxisLabelsFontPlaceholder="kendo.chartwizard.formatCategoryAxisLabelsFontPlaceholder|The placeholder of the Font settings of the Labels in the Category Axis panel."
[formatCategoryAxisLabelsFontPlaceholder]="messages.formatCategoryAxisLabelsFontPlaceholder"
i18n-formatCategoryAxisLabelsSize="kendo.chartwizard.formatCategoryAxisLabelsSize|The label of the Size settings of the Labels in the Category Axis panel."
[formatCategoryAxisLabelsSize]="messages.formatCategoryAxisLabelsSize"
i18n-formatCategoryAxisLabelsSizePlaceholder="kendo.chartwizard.formatCategoryAxisLabelsSizePlaceholder|The placeholder of the Size settings of the Labels in the Category Axis panel."
[formatCategoryAxisLabelsSizePlaceholder]="messages.formatCategoryAxisLabelsSizePlaceholder"
i18n-formatCategoryAxisLabelsColor="kendo.chartwizard.formatCategoryAxisLabelsColor|The label of the Color settings of the Labels in the Category Axis panel."
[formatCategoryAxisLabelsColor]="messages.formatCategoryAxisLabelsColor"
i18n-formatCategoryAxisLabelsRotation="kendo.chartwizard.formatCategoryAxisLabelsRotation|The label of the Rotation settings of the Labels in the Category Axis panel."
[formatCategoryAxisLabelsRotation]="messages.formatCategoryAxisLabelsRotation"
i18n-formatCategoryAxisLabelsRotationAuto="kendo.chartwizard.formatCategoryAxisLabelsRotationAuto|The Auto option of the Rotation settings of the Labels in the Category Axis panel."
[formatCategoryAxisLabelsRotationAuto]="messages.formatCategoryAxisLabelsRotationAuto"
i18n-formatCategoryAxisLabelsReverseOrder="kendo.chartwizard.formatCategoryAxisLabelsReverseOrder|The label of the Reverse Order checkbox of the Labels in the Category Axis panel."
[formatCategoryAxisLabelsReverseOrder]="messages.formatCategoryAxisLabelsReverseOrder"
i18n-formatValueAxis="kendo.chartwizard.formatValueAxis|The text of the Value Axis panel of the Format tab."
[formatValueAxis]="messages.formatValueAxis"
i18n-formatYAxis="kendo.chartwizard.formatYAxis|The text of the Y Axis panel of the Format tab."
[formatYAxis]="messages.formatYAxis"
i18n-formatValueAxisTitle="kendo.chartwizard.formatValueAxisTitle|The label of the Title settings of the Value Axis panel."
[formatValueAxisTitle]="messages.formatValueAxisTitle"
i18n-formatValueAxisTitlePlaceholder="kendo.chartwizard.formatValueAxisTitlePlaceholder|The placeholder of the Title settings of the Value Axis panel."
[formatValueAxisTitlePlaceholder]="messages.formatValueAxisTitlePlaceholder"
i18n-formatValueAxisTitleFont="kendo.chartwizard.formatValueAxisTitleFont|The label of the Font settings of the Value Axis panel."
[formatValueAxisTitleFont]="messages.formatValueAxisTitleFont"
i18n-formatValueAxisTitleFontPlaceholder="kendo.chartwizard.formatValueAxisTitleFontPlaceholder|The placeholder of the Font settings of the Value Axis panel."
[formatYAxis]="messages.formatValueAxisTitleFontPlaceholder"
i18n-formatValueAxisTitleSize="kendo.chartwizard.formatValueAxisTitleSize|The label of the Size settings of the Value Axis panel."
[formatValueAxisTitleSize]="messages.formatValueAxisTitleSize"
i18n-formatValueAxisTitleSizePlaceholder="kendo.chartwizard.formatValueAxisTitleSizePlaceholder|The placeholder of the Size settings of the Value Axis panel."
[formatValueAxisTitleSizePlaceholder]="messages.formatValueAxisTitleSizePlaceholder"
i18n-formatValueAxisTitleColor="kendo.chartwizard.formatValueAxisTitleColor|The label of the Color settings of the Value Axis panel."
[formatValueAxisTitleColor]="messages.formatValueAxisTitleColor"
i18n-formatValueAxisLabels="kendo.chartwizard.formatValueAxisLabels|The label of the Labels settings of the Value Axis panel."
[formatValueAxisLabels]="messages.formatValueAxisLabels"
i18n-formatValueAxisLabelsFormat="kendo.chartwizard.formatValueAxisLabelsFormat|The label of the Format DropDown of the Labels settings of the Value Axis panel."
[formatValueAxisLabelsFormat]="messages.formatValueAxisLabelsFormat"
i18n-formatValueAxisLabelsFormatText="kendo.chartwizard.formatValueAxisLabelsFormatText|The Text option of the Format DropDown of the Labels settings of the Value Axis panel."
[formatValueAxisLabelsFormatText]="messages.formatValueAxisLabelsFormatText"
i18n-formatValueAxisLabelsFormatNumber="kendo.chartwizard.formatValueAxisLabelsFormatNumber|The Number option of the Format DropDown of the Labels settings of the Value Axis panel."
[formatValueAxisLabelsFormatNumber]="messages.formatValueAxisLabelsFormatNumber"
i18n-formatValueAxisLabelsFormatCurrency="kendo.chartwizard.formatValueAxisLabelsFormatCurrency|The Currency option of the Format DropDown of the Labels settings of the Value Axis panel."
[formatValueAxisLabelsFormatCurrency]="messages.formatValueAxisLabelsFormatCurrency"
i18n-formatValueAxisLabelsFormatPercent="kendo.chartwizard.formatValueAxisLabelsFormatPercent|The Percent option of the Format DropDown of the Labels settings of the Value Axis panel."
[formatValueAxisLabelsFormatPercent]="messages.formatValueAxisLabelsFormatPercent"
i18n-formatValueAxisLabelsFont="kendo.chartwizard.formatValueAxisLabelsFont|The label of the Font settings of the Labels in the Value Axis panel."
[formatValueAxisLabelsFont]="messages.formatValueAxisLabelsFont"
i18n-formatValueAxisLabelsFontPlaceholder="kendo.chartwizard.formatValueAxisLabelsFontPlaceholder|The placeholder of the Font settings of the Labels in the Value Axis panel."
[formatValueAxisLabelsFontPlaceholder]="messages.formatValueAxisLabelsFontPlaceholder"
i18n-formatValueAxisLabelsSize="kendo.chartwizard.formatValueAxisLabelsSize|The label of the Size settings of the Labels in the Value Axis panel."
[formatValueAxisLabelsSize]="messages.formatValueAxisLabelsSize"
i18n-formatValueAxisLabelsSizePlaceholder="kendo.chartwizard.formatValueAxisLabelsSizePlaceholder|The placeholder of the Size settings of the Labels in the Value Axis panel."
[formatValueAxisLabelsSizePlaceholder]="messages.formatValueAxisLabelsSizePlaceholder"
i18n-formatValueAxisLabelsColor="kendo.chartwizard.formatValueAxisLabelsColor|The label of the Color settings of the Labels in the Value Axis panel."
[formatValueAxisLabelsColor]="messages.formatValueAxisLabelsColor"
i18n-formatValueAxisLabelsRotation="kendo.chartwizard.formatValueAxisLabelsRotation|The label of the Rotation settings of the Labels in the Value Axis panel."
[formatValueAxisLabelsRotation]="messages.formatValueAxisLabelsRotation"
i18n-formatValueAxisLabelsRotationAuto="kendo.chartwizard.formatValueAxisLabelsRotationAuto|The Auto option of the Rotation settings of the Labels in the Value Axis panel."
[formatValueAxisLabelsRotationAuto]="messages.formatValueAxisLabelsRotationAuto"
></ng-container>
@if (windowSettings?.modal) {
<div @overlayAppear class="k-overlay"> </div>
}
<kendo-window
class="k-chart-wizard"
[title]="messageFor('windowTitle')"
[width]="windowWidth"
[height]="windowHeight"
[minWidth]="windowSettings?.minWidth"
[minHeight]="windowSettings?.minHeight"
[state]="windowSettings?.state"
[resizable]="true"
(close)="close.emit()"
>
<kendo-splitter class="k-chart-wizard-splitter">
<kendo-splitter-pane class="k-chart-wizard-preview-pane">
<div class="k-preview-pane-header">
<kendo-dropdownbutton
[svgIcon]="exportIcon"
[data]="exportDropdownItems"
textField="text"
fillMode="flat"
(itemClick)="onExport($event)"
>
{{ messageFor('exportButton') }}
</kendo-dropdownbutton>
</div>
<div class="k-preview-pane-content" [style.height]="'calc(100% - 50px)'">
<kendo-chart [transitions]="false" [style.width.%]="100" [style.height.%]="100">
<kendo-chart-title
[text]="stateService.state.title?.text"
[font]="stateService.state.title?.font"
[color]="stateService.state.title?.color"
></kendo-chart-title>
<kendo-chart-subtitle
[text]="stateService.state.subtitle?.text"
[font]="stateService.state.subtitle?.font"
[color]="stateService.state.subtitle?.color"
></kendo-chart-subtitle>
<kendo-chart-area
[background]="stateService.state.area?.background"
[margin]="stateService.state.area?.margin"
>
</kendo-chart-area>
@if (stateService.state.categoryAxis) {
<kendo-chart-category-axis>
@for (axis of stateService.state.categoryAxis; track $index) {
<kendo-chart-category-axis-item
[categories]="axis.categories"
[title]="{
text: axis.title?.text,
font: axis.title?.font,
color: axis.title?.color
}"
[labels]="{
rotation: axis.labels?.rotation,
font: axis.labels?.font,
color: axis.labels?.color
}"
[reverse]="axis.reverse"
>
</kendo-chart-category-axis-item>
}
@if (stateService.state.valueAxis) {
<kendo-chart-value-axis>
@for (axis of stateService.state.valueAxis; track $index) {
<kendo-chart-value-axis-item
[title]="{
text: axis.title?.text,
font: axis.title?.font,
color: axis.title?.color
}"
[labels]="{
rotation: axis.labels?.rotation,
font: axis.labels?.font,
color: axis.labels?.color,
format: axis.labels?.format
}"
>
</kendo-chart-value-axis-item>
}
</kendo-chart-value-axis>
}
</kendo-chart-category-axis>
}
<kendo-chart-series>
@for (series of stateService.state.series; track $index) {
<kendo-chart-series-item
[type]="series.type"
[data]="series.data"
[stack]="series.stack"
[field]="series.field"
[categoryField]="series.categoryField"
[name]="series.name"
[color]="series.color"
[labels]="{ visible: series.labels?.visible }"
[width]="series.width"
>
</kendo-chart-series-item>
}
</kendo-chart-series>
<kendo-chart-legend
[visible]="stateService.state.legend?.visible"
[position]="stateService.state.legend?.position"
[labels]="stateService.state.legend?.labels"
>
</kendo-chart-legend>
</kendo-chart>
</div>
</kendo-splitter-pane>
<kendo-splitter-pane class="k-chart-wizard-property-pane" [collapsible]="true" [collapsed]="collapsedConfigurationPane" [size]="stateService.splitterPaneSize">
<kendo-tabstrip [keepTabContent]="true">
<kendo-tabstrip-tab [title]="messageFor('tabChart')" [selected]="true">
<ng-template kendoTabContent>
<kendo-chartwizard-property-pane-chart-tab>
</kendo-chartwizard-property-pane-chart-tab>
</ng-template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="messageFor('tabData')">
<ng-template kendoTabContent>
<kendo-chartwizard-property-pane-data-tab> </kendo-chartwizard-property-pane-data-tab>
</ng-template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="messageFor('tabFormat')">
<ng-template kendoTabContent>
<kendo-chartwizard-property-pane-format-tab>
</kendo-chartwizard-property-pane-format-tab>
</ng-template>
</kendo-tabstrip-tab>
</kendo-tabstrip>
</kendo-splitter-pane>
</kendo-splitter>
@if (showLicenseWatermark) {
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
}
</kendo-window>
`, isInline: true, dependencies: [{ kind: "component", type: WindowComponent, selector: "kendo-window", inputs: ["autoFocusedElement", "title", "draggable", "resizable", "themeColor", "keepContent", "state", "minWidth", "minHeight", "width", "height", "top", "left"], outputs: ["dragStart", "dragEnd", "resizeStart", "resizeEnd", "close", "widthChange", "heightChange", "topChange", "leftChange", "stateChange"], exportAs: ["kendoWindow"] }, { kind: "component", type: SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "splitbarWidth", "resizeStep", "splitterBarClass"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "splitterBarAttributes", "splitterBarClass", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: ChartComponent, selector: "kendo-chart", inputs: ["pannable", "renderAs", "seriesColors", "subtitle", "title", "noData", "observeStyles", "transitions", "zoomable", "axisDefaults", "categoryAxis", "chartArea", "legend", "panes", "paneDefaults", "plotArea", "series", "seriesDefaults", "tooltip", "valueAxis", "xAxis", "yAxis", "resizeRateLimit", "popupSettings", "drilldownLevel"], outputs: ["axisLabelClick", "drag", "dragEnd", "dragStart", "legendItemHover", "legendItemLeave", "noteClick", "noteHover", "noteLeave", "paneRender", "plotAreaClick", "plotAreaHover", "plotAreaLeave", "render", "select", "selectEnd", "selectStart", "seriesClick", "drilldown", "seriesHover", "seriesOver", "seriesLeave", "zoom", "zoomEnd", "zoomStart", "legendItemClick", "drilldownLevelChange"], exportAs: ["kendoChart"] }, { kind: "component", type: TitleComponent, selector: "kendo-chart-title", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "description", "visible"] }, { kind: "component", type: SubtitleComponent, selector: "kendo-chart-subtitle", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "visible"] }, { kind: "component", type: ChartAreaComponent, selector: "kendo-chart-area", inputs: ["background", "border", "height", "margin", "opacity", "width"] }, { kind: "component", type: CategoryAxisComponent, selector: "kendo-chart-category-axis" }, { kind: "component", type: CategoryAxisItemComponent, selector: "kendo-chart-category-axis-item", inputs: ["autoBaseUnitSteps", "axisCrossingValue", "background", "baseUnit", "baseUnitStep", "categories", "color", "justified", "line", "majorGridLines", "majorTicks", "max", "maxDateGroups", "maxDivisions", "min", "minorGridLines", "minorTicks", "name", "pane", "plotBands", "reverse", "roundToBaseUnit", "startAngle", "type", "visible", "weekStartDay", "crosshair", "labels", "notes", "select", "title", "rangeLabels"] }, { kind: "component", type: ValueAxisComponent, selector: "kendo-chart-value-axis" }, { kind: "component", type: ValueAxisItemComponent, selector: "kendo-chart-value-axis-item", inputs: ["axisCrossingValue", "background", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "type", "visible", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: SeriesComponent, selector: "kendo-chart-series" }, { kind: "component", type: SeriesItemComponent, selector: "kendo-chart-series-item", inputs: ["aggregate", "autoFit", "axis", "border", "categoryAxis", "categoryField", "closeField", "color", "colorField", "connectors", "currentField", "dashType", "data", "downColor", "downColorField", "drilldownField", "dynamicHeight", "dynamicSlope", "errorHighField", "errorLowField", "explodeField", "field", "fromField", "gap", "highField", "holeSize", "line", "lowField", "lowerField", "margin", "maxSize", "mean", "meanField", "median", "medianField", "minSize", "missingValues", "name", "neckRatio", "negativeColor", "negativeValues", "noteTextField", "opacity", "openField", "outliersField", "overlay", "padding", "q1Field", "q3Field", "segmentSpacing", "size", "sizeField", "spacing", "stack", "startAngle", "style", "summaryField", "target", "toField", "type", "upperField", "visible", "visibleInLegend", "visibleInLegendField", "visual", "width", "whiskers", "xAxis", "xErrorHighField", "xErrorLowField", "xField", "yAxis", "yErrorHighField", "yErrorLowField", "yField", "zIndex", "trendline", "for", "legendItem", "pattern", "patternField", "errorBars", "extremes", "highlight", "labels", "markers", "notes", "outliers", "tooltip"] }, { kind: "component", type: LegendComponent, selector: "kendo-chart-legend", inputs: ["align", "background", "border", "height", "labels", "margin", "offsetX", "offsetY", "orientation", "padding", "position", "reverse", "visible", "width", "markers", "spacing", "inactiveItems", "item", "title", "focusHighlight"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: ChartWizardPropertyPaneChartTabComponent, selector: "kendo-chartwizard-property-pane-chart-tab" }, { kind: "component", type: ChartWizardPropertyPaneFormatTabComponent, selector: "kendo-chartwizard-property-pane-format-tab" }, { kind: "component", type: ChartWizardPropertyPaneDataTabComponent, selector: "kendo-chartwizard-property-pane-data-tab" }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoChartWizardLocalizedMessages]" }], animations: [
trigger('overlayAppear', [
state('in', style({ opacity: 1 })),
transition('void => *', [style({ opacity: 0.1 }), animate('.3s cubic-bezier(.2, .6, .4, 1)')])
])
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartWizardComponent, decorators: [{
type: Component,
args: [{
animations: [
trigger('overlayAppear', [
state('in', style({ opacity: 1 })),
transition('void => *', [style({ opacity: 0.1 }), animate('.3s cubic-bezier(.2, .6, .4, 1)')])
])
],
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs: 'kendoChartWizard',
providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.chartwizard',
},
ChartWizardLocalizationService,
{
provide: LocalizationService,
useExisting: ChartWizardLocalizationService
},
StateService
],
selector: 'kendo-chartwizard',
template: `
<ng-container
kendoChartWizardLocalizedMessages
i18n-windowTitle="kendo.chartwizard.windowTitle|The title of the window."
[windowTitle]="messages.windowTitle"
i18n-exportButton="kendo.chartwizard.exportButton|The text of the Export DropDownButton."
[exportButton]="messages.exportButton"
i18n-exportPDFButton="kendo.chartwizard.exportPDFButton|The text of the Export DropDownButton option that represents PDF."
[exportPDFButton]="messages.exportPDFButton"
i18n-exportSVGButton="kendo.chartwizard.exportSVGButton|The text of the Export DropDownButton option that represents SVG."
[exportSVGButton]="messages.exportSVGButton"
i18n-exportPNGButton="kendo.chartwizard.exportPNGButton|The text of the Export DropDownButton option that represents PNG."
[exportPNGButton]="messages.exportPNGButton"
i18n-tabChart="kendo.chartwizard.tabChart|The text of the Chart tab of the property pane."
[tabChart]="messages.tabChart"
i18n-tabData="kendo.chartwizard.tabData|The text of the Data tab of the property pane."
[tabData]="messages.tabData"
i18n-tabFormat="kendo.chartwizard.tabFormat|The text of the Format tab of the property pane."
[tabFormat]="messages.tabFormat"
i18n-barChart="kendo.chartwizard.barChart|The text of the Chart panel that represents Bar Charts."
[barChart]="messages.barChart"
i18n-barChartBar="kendo.chartwizard.barChartBar|The text of the Bar Chart type."
[barChartBar]="messages.barChartBar"
i18n-barChartStackedBar="kendo.chartwizard.barChartStackedBar|The text of the Stacked Bar Chart type."
[barChartStackedBar]="messages.barChartStackedBar"
i18n-barChart100StackedBar="kendo.chartwizard.barChart100StackedBar|The text of the 100% Stacked Bar Chart type."
[barChart100StackedBar]="messages.barChart100StackedBar"
i18n-pieChart="kendo.chartwizard.pieChart|The text of the Chart panel that represents Pie Charts."
[pieChart]="messages.pieC