@progress/kendo-angular-chart-wizard
Version:
Kendo UI Angular Chart Wizard component
915 lines (913 loc) • 56.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 } from '@angular/core';
import { ActionTypes, fontNames, fontSizes, parseFont, updateState } from '../chart-wizard-state';
import { StateService } from '../state.service';
import { ChartWizardPropertyPaneFormFieldComponent } from './form-field.component';
import { ExpansionPanelComponent } from '@progress/kendo-angular-layout';
import { LabelComponent } from '@progress/kendo-angular-label';
import { SwitchComponent } from '@progress/kendo-angular-inputs';
import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
import { defaultAllSeriesItem, defaultFormat, labelFormats } from '../common/models';
import { ChartWizardLocalizationService } from '../localization/chartwizard-localization.service';
import * as i0 from "@angular/core";
import * as i1 from "../state.service";
import * as i2 from "../localization/chartwizard-localization.service";
/**
* @hidden
*/
export class ChartWizardPropertyPaneFormatTabComponent {
stateService;
localization;
cdr;
chartTitles;
areaMarginLeft = ActionTypes.areaMarginLeft;
areaMarginRight = ActionTypes.areaMarginRight;
areaMarginTop = ActionTypes.areaMarginTop;
areaMarginBottom = ActionTypes.areaMarginBottom;
areaBackground = ActionTypes.areaBackground;
legendVisible = ActionTypes.legendVisible;
legendFontName = ActionTypes.legendFontName;
legendFontSize = ActionTypes.legendFontSize;
legendColor = ActionTypes.legendColor;
legendPosition = ActionTypes.legendPosition;
categoryAxisTitleText = ActionTypes.categoryAxisTitleText;
categoryAxisTitleFontName = ActionTypes.categoryAxisTitleFontName;
categoryAxisTitleFontSize = ActionTypes.categoryAxisTitleFontSize;
categoryAxisTitleColor = ActionTypes.categoryAxisTitleColor;
categoryAxisLabelsFontName = ActionTypes.categoryAxisLabelsFontName;
categoryAxisLabelsFontSize = ActionTypes.categoryAxisLabelsFontSize;
categoryAxisLabelsColor = ActionTypes.categoryAxisLabelsColor;
categoryAxisLabelsRotation = ActionTypes.categoryAxisLabelsRotation;
categoryAxisReverseOrder = ActionTypes.categoryAxisReverseOrder;
valueAxisTitleText = ActionTypes.valueAxisTitleText;
valueAxisTitleFontName = ActionTypes.valueAxisTitleFontName;
valueAxisTitleFontSize = ActionTypes.valueAxisTitleFontSize;
valueAxisTitleColor = ActionTypes.valueAxisTitleColor;
valueAxisLabelsFontName = ActionTypes.valueAxisLabelsFontName;
valueAxisLabelsFormat = ActionTypes.valueAxisLabelsFormat;
valueAxisLabelsFontSize = ActionTypes.valueAxisLabelsFontSize;
valueAxisLabelsColor = ActionTypes.valueAxisLabelsColor;
valueAxisLabelsRotation = ActionTypes.valueAxisLabelsRotation;
parseFont = parseFont;
defaultAllSeriesItem = defaultAllSeriesItem;
fontNames = fontNames;
fontSizes = fontSizes;
labelFormats;
legendPositions;
labelsCategoryAxisRotation;
labelsValueAxisRotation;
get chartTitleTypeText() {
return this.stateService.currentTitle === 'Chart Title'
? this.stateService.state.title?.text
: this.stateService.state.subtitle?.text;
}
get chartTitleTypeFont() {
return this.stateService.currentTitle === 'Chart Title'
? parseFont(this.stateService.state.title?.font).name
: parseFont(this.stateService.state.subtitle?.font).name;
}
get chartTitleTypeFontSize() {
return this.stateService.currentTitle === 'Chart Title'
? parseFont(this.stateService.state.title?.font).size
: parseFont(this.stateService.state.subtitle?.font).size;
}
get chartTitleTypeColor() {
return this.stateService.currentTitle === 'Chart Title'
? this.stateService.state.title?.color
: this.stateService.state.subtitle?.color;
}
get chartTitleTypeAction() {
return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleText : ActionTypes.subtitleText;
}
get chartTitleTypeFontAction() {
return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleFontName : ActionTypes.subtitleFontName;
}
get chartTitleTypeColorAction() {
return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleColor : ActionTypes.subtitleColor;
}
get chartTitleTypeFontSizeAction() {
return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleFontSize : ActionTypes.subtitleFontSize;
}
get seriesData() {
return [
{ text: this.messageFor('formatSeriesAllSeries'), name: 'All Series' },
...this.stateService.state.series.map(item => ({ text: item.name, ...item }))
];
}
get showLabels() {
return this.stateService.currentSeries.name !== defaultAllSeriesItem.name ? this.stateService.state.series.find(s => s.name === this.stateService.currentSeries.name)?.labels?.visible : this.stateService.state.series.every(s => s.labels?.visible);
}
get labelFormatValue() {
return labelFormats.find(f => f.value === this.stateService.state.valueAxis[0]?.labels?.format)?.value || defaultFormat.value;
}
constructor(stateService, localization, cdr) {
this.stateService = stateService;
this.localization = localization;
this.cdr = cdr;
this.labelFormats = [
{ value: '', text: this.messageFor('formatValueAxisLabelsFormatText') },
{ value: 'n0', text: this.messageFor('formatValueAxisLabelsFormatNumber') },
{ value: 'c0', text: this.messageFor('formatValueAxisLabelsFormatCurrency') },
{ value: 'p0', text: this.messageFor('formatValueAxisLabelsFormatPercent') }
];
this.legendPositions = [
{ text: this.messageFor('formatLegendPositionTop'), value: 'top' },
{ text: this.messageFor('formatLegendPositionBottom'), value: 'bottom' },
{ text: this.messageFor('formatLegendPositionLeft'), value: 'left' },
{ text: this.messageFor('formatLegendPositionRight'), value: 'right' }
];
this.labelsCategoryAxisRotation = [
{ text: this.messageFor('formatCategoryAxisLabelsRotationAuto'), value: 'auto' },
{ text: '0°', value: 0 },
{ text: '45°', value: 45 },
{ text: '90°', value: 90 },
{ text: '135°', value: 135 },
{ text: '180°', value: 180 }
];
this.labelsValueAxisRotation = [
{ text: this.messageFor('formatValueAxisLabelsRotationAuto'), value: 'auto' },
{ text: '0°', value: 0 },
{ text: '45°', value: 45 },
{ text: '90°', value: 90 },
{ text: '135°', value: 135 },
{ text: '180°', value: 180 }
];
this.chartTitles = [
{ text: this.messageFor('formatTitleChartTitle'), value: 'Chart Title' },
{ text: this.messageFor('formatTitleChartSubtitle'), value: 'Chart Subtitle' },
];
}
ngAfterViewChecked() {
this.localization.changes.subscribe(() => {
this.cdr.detectChanges();
});
}
ngOnDestroy() {
this.localization.changes.unsubscribe();
}
updateState(action, value) {
if (action === ActionTypes.seriesLabel && this.stateService.currentSeries.name === defaultAllSeriesItem.name) {
this.stateService.state = updateState(this.stateService.state, action, { name: '', all: true, visible: value.labels.visible });
return;
}
this.stateService.state = updateState(this.stateService.state, action, value);
}
changeCurrentTitle(value) {
this.stateService.currentTitle = value;
}
toggleSeriesLabels(value) {
this.updateCurrentSeries(this.stateService.currentSeries);
this.stateService.currentSeries.labels = { visible: value };
this.updateState(ActionTypes.seriesLabel, this.stateService.currentSeries);
}
updateCurrentSeries(value) {
if (value.name === defaultAllSeriesItem.name) {
this.stateService.currentSeries = defaultAllSeriesItem;
}
else {
this.stateService.currentSeries = this.stateService.state.series.find((series) => series.name === value.name);
}
}
updateSeriesColor(value) {
this.updateCurrentSeries(this.stateService.currentSeries);
this.stateService.currentSeries.color = value;
this.updateState(ActionTypes.seriesColor, this.stateService.currentSeries);
}
messageFor(key) {
return this.localization.get(key);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, deps: [{ token: i1.StateService }, { token: i2.ChartWizardLocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChartWizardPropertyPaneFormatTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-format-tab", ngImport: i0, template: `
<section>
<kendo-expansionpanel
[style.max-width.px]="576"
[title]="messageFor('formatChartArea')"
[expanded]="true"
[attr.dir]="stateService.direction"
>
<form class="k-form k-form-md">
<fieldset class="k-form-fieldset">
<legend class="k-form-legend">{{ messageFor('formatChartAreaMargins') }}</legend>
<div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatChartAreaMarginsLeft')"
inputType="numeric"
[placeholder]="messageFor('formatChartAreaMarginsAuto')"
[value]="$any(stateService.state.area.margin).left"
(valueChange)="updateState(areaMarginLeft, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatChartAreaMarginsRight')"
inputType="numeric"
[placeholder]="messageFor('formatChartAreaMarginsAuto')"
[value]="$any(stateService.state.area.margin).right"
(valueChange)="updateState(areaMarginRight, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatChartAreaMarginsTop')"
inputType="numeric"
[placeholder]="messageFor('formatChartAreaMarginsAuto')"
[value]="$any(stateService.state.area.margin).top"
(valueChange)="updateState(areaMarginTop, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatChartAreaMarginsBottom')"
inputType="numeric"
[placeholder]="messageFor('formatChartAreaMarginsAuto')"
[value]="$any(stateService.state.area.margin).bottom"
(valueChange)="updateState(areaMarginBottom, $event)"
>
</kendo-chartwizard-property-pane-form-field>
</div>
</fieldset>
<fieldset class="k-form-fieldset">
<legend class="k-form-legend">{{ messageFor('formatChartAreaBackground') }}</legend>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatChartAreaBackgroundColor')"
inputType="colorPicker"
[value]="stateService.state.area?.background"
(valueChange)="updateState(areaBackground, $event)"
>
</kendo-chartwizard-property-pane-form-field>
</fieldset>
</form>
</kendo-expansionpanel>
</section>
<section>
<kendo-expansionpanel
[style.max-width.px]="576"
[title]="messageFor('formatTitle')"
[expanded]="true"
>
<form class="k-form k-form-md">
<div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatTitleApplyTo')"
inputType="dropDownList"
[data]="chartTitles"
[colSpan]="2"
[value]="stateService.currentTitle"
(valueChange)="changeCurrentTitle($event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatTitleLabel')"
inputType="text"
[colSpan]="2"
[value]="chartTitleTypeText"
(valueChange)="updateState(chartTitleTypeAction, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatTitleFont')"
inputType="comboBox"
[data]="fontNames"
[colSpan]="2"
[value]="chartTitleTypeFont"
[placeholder]="messageFor('formatTitleFontPlaceholder')"
(valueChange)="updateState(chartTitleTypeFontAction, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatTitleSize')"
inputType="comboBox"
[placeholder]="messageFor('formatTitleSizePlaceholder')"
[data]="fontSizes"
[value]="chartTitleTypeFontSize"
(valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatTitleColor')"
inputType="colorPicker"
[value]="chartTitleTypeColor"
(valueChange)="updateState(chartTitleTypeColorAction, $event)"
>
</kendo-chartwizard-property-pane-form-field>
</div>
</form>
</kendo-expansionpanel>
</section>
<section>
<kendo-expansionpanel
[style.max-width.px]="576"
[title]="messageFor('formatLegend')"
[expanded]="true"
>
<form class="k-form k-form-md">
<div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
<kendo-label [for]="toggleLegend" [text]="messageFor('formatLegendShowLegend')"></kendo-label>
<kendo-switch
#toggleLegend
onLabel="On"
offLabel="Off"
thumbRounded="full"
size="medium"
[checked]="stateService.state.legend?.visible"
(valueChange)="updateState(legendVisible, $event)"
></kendo-switch>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatLegendFont')"
inputType="comboBox"
[data]="fontNames"
[colSpan]="2"
[placeholder]="messageFor('formatLegendFontPlaceholder')"
[value]="parseFont(stateService.state.legend?.labels?.font).name"
(valueChange)="updateState(legendFontName, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatLegendSize')"
inputType="comboBox"
[data]="fontSizes"
[placeholder]="messageFor('formatLegendSizePlaceholder')"
[value]="parseFont(stateService.state.legend?.labels?.font).size"
(valueChange)="updateState(legendFontSize, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatLegendColor')"
inputType="colorPicker"
[value]="stateService.state.legend?.labels?.color"
(valueChange)="updateState(legendColor, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatLegendPosition')"
inputType="dropDownList"
[colSpan]="2"
[data]="legendPositions"
[value]="stateService.state.legend?.position"
(valueChange)="updateState(legendPosition, $event)"
>
</kendo-chartwizard-property-pane-form-field>
</div>
</form>
</kendo-expansionpanel>
</section>
<section>
<kendo-expansionpanel
[style.max-width.px]="576"
[title]="messageFor('formatSeries')"
[expanded]="true"
>
<form class="k-form k-form-md">
<div class="k-form-field">
<kendo-label [for]="seriesDropDown" class="k-form-label" [text]="messageFor('formatSeriesApplyTo')"></kendo-label>
<div class="k-form-field-wrap">
<kendo-dropdownlist
#seriesDropDown
[data]="seriesData"
textField="text"
valueField="name"
fillMode="outline"
rounded="medium"
size="medium"
[value]="stateService.currentSeries"
(valueChange)="updateCurrentSeries($event)"
></kendo-dropdownlist>
</div>
</div>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatSeriesColor')"
[value]="stateService.currentSeries?.color"
inputType="colorPicker"
[disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
(valueChange)="updateSeriesColor($event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatSeriesShowLabels')"
[value]="showLabels"
[isLabelInsideFormFieldWrap]="true"
[colSpan]="2"
inputType="checkbox"
(valueChange)="toggleSeriesLabels($event)"
>
</kendo-chartwizard-property-pane-form-field>
</form>
</kendo-expansionpanel>
</section>
@if (stateService.state.seriesType !== 'pie') {
<section class="k-row-start-1 k-row-end-3 k-col-start-3">
<kendo-expansionpanel
[style.max-width.px]="576"
[title]="stateService.state.seriesType === 'scatter' ? messageFor('formatXAxis') : messageFor('formatCategoryAxis')"
[expanded]="true"
>
<form class="k-form k-form-md">
<fieldset class="k-form-fieldset">
<legend class="k-form-legend">{{ messageFor('formatCategoryAxisTitle') }}</legend>
<div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
<kendo-chartwizard-property-pane-form-field
inputType="text"
[hasLabel]="false"
[colSpan]="2"
[placeholder]="messageFor('formatCategoryAxisTitlePlaceholder')"
[value]="stateService.state.categoryAxis[0]?.title?.text || null"
(valueChange)="updateState(categoryAxisTitleText, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatCategoryAxisTitleFont')"
inputType="comboBox"
[data]="fontNames"
[colSpan]="2"
[placeholder]="messageFor('formatCategoryAxisTitleFontPlaceholder')"
[value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
(valueChange)="updateState(categoryAxisTitleFontName, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatCategoryAxisTitleSize')"
inputType="comboBox"
[placeholder]="messageFor('formatCategoryAxisTitleSizePlaceholder')"
[data]="fontSizes"
[value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
(valueChange)="updateState(categoryAxisTitleFontSize, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatCategoryAxisTitleColor')"
inputType="colorPicker"
[value]="stateService.state.categoryAxis[0]?.title?.color"
(valueChange)="updateState(categoryAxisTitleColor, $event)"
>
</kendo-chartwizard-property-pane-form-field>
</div>
</fieldset>
<fieldset class="k-form-fieldset">
<legend class="k-form-legend">{{ messageFor('formatCategoryAxisLabels') }}</legend>
<div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatCategoryAxisLabelsFont')"
inputType="comboBox"
[data]="fontNames"
[colSpan]="2"
[placeholder]="messageFor('formatCategoryAxisLabelsFontPlaceholder')"
[value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
(valueChange)="updateState(categoryAxisLabelsFontName, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatCategoryAxisLabelsSize')"
inputType="comboBox"
[data]="fontSizes"
[placeholder]="messageFor('formatCategoryAxisLabelsSizePlaceholder')"
[value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
(valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatCategoryAxisLabelsColor')"
inputType="colorPicker"
[value]="stateService.state.categoryAxis[0]?.labels?.color"
(valueChange)="updateState(categoryAxisLabelsColor, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatCategoryAxisLabelsRotation')"
inputType="dropDownList"
[data]="labelsCategoryAxisRotation"
[value]="stateService.state.categoryAxis[0]?.labels?.rotation"
(valueChange)="updateState(categoryAxisLabelsRotation, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<span></span>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatCategoryAxisLabelsReverseOrder')"
[isLabelInsideFormFieldWrap]="true"
inputType="checkbox"
[colSpan]="2"
[value]="stateService.state.categoryAxis[0]?.reverse"
(valueChange)="updateState(categoryAxisReverseOrder, $event)"
>
</kendo-chartwizard-property-pane-form-field>
</div>
</fieldset>
</form>
</kendo-expansionpanel>
</section>
}
@if (stateService.state.seriesType !== 'pie') {
<section class="k-row-start-1 k-row-end-3 k-col-start-4">
<kendo-expansionpanel
[style.max-width.px]="576"
[title]="stateService.state.seriesType === 'scatter' ? messageFor('formatYAxis') : messageFor('formatValueAxis')"
[expanded]="true"
>
<form class="k-form k-form-md">
<fieldset class="k-form-fieldset">
<legend class="k-form-legend">{{ messageFor('formatValueAxisTitle') }}</legend>
<div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
<kendo-chartwizard-property-pane-form-field
inputType="text"
[hasLabel]="false"
[colSpan]="2"
[placeholder]="messageFor('formatValueAxisTitlePlaceholder')"
[value]="stateService.state.valueAxis[0]?.title?.text || null"
(valueChange)="updateState(valueAxisTitleText, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatValueAxisTitleFont')"
inputType="comboBox"
[colSpan]="2"
[data]="fontNames"
[placeholder]="messageFor('formatValueAxisTitleFontPlaceholder')"
[value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
(valueChange)="updateState(valueAxisTitleFontName, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatValueAxisTitleSize')"
inputType="comboBox"
[placeholder]="messageFor('formatValueAxisTitleSizePlaceholder')"
[data]="fontSizes"
[value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
(valueChange)="updateState(valueAxisTitleFontSize, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatValueAxisTitleColor')"
inputType="colorPicker"
[value]="stateService.state.valueAxis[0]?.title?.color"
(valueChange)="updateState(valueAxisTitleColor, $event)"
>
</kendo-chartwizard-property-pane-form-field>
</div>
</fieldset>
<fieldset class="k-form-fieldset">
<legend class="k-form-legend">{{ messageFor('formatValueAxisLabels') }}</legend>
<div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatValueAxisLabelsFormat')"
[colSpan]="2"
inputType="dropDownList"
[data]="labelFormats"
[value]="labelFormatValue"
(valueChange)="updateState(valueAxisLabelsFormat, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatValueAxisLabelsFont')"
inputType="comboBox"
[data]="fontNames"
[colSpan]="2"
[placeholder]="messageFor('formatValueAxisLabelsFontPlaceholder')"
[value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
(valueChange)="updateState(valueAxisLabelsFontName, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatValueAxisLabelsSize')"
inputType="comboBox"
[data]="fontSizes"
[placeholder]="messageFor('formatValueAxisLabelsSizePlaceholder')"
[value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
(valueChange)="updateState(valueAxisLabelsFontSize, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatValueAxisLabelsColor')"
inputType="colorPicker"
[value]="stateService.state.valueAxis[0]?.labels?.color"
(valueChange)="updateState(valueAxisLabelsColor, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatValueAxisLabelsRotation')"
inputType="dropDownList"
[data]="labelsValueAxisRotation"
[value]="stateService.state.valueAxis[0]?.labels?.rotation"
(valueChange)="updateState(valueAxisLabelsRotation, $event)"
>
</kendo-chartwizard-property-pane-form-field>
</div>
</fieldset>
</form>
</kendo-expansionpanel>
</section>
}
`, 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: ChartWizardPropertyPaneFormFieldComponent, selector: "kendo-chartwizard-property-pane-form-field", inputs: ["currentState", "action", "class", "inputType", "text", "data", "placeholder", "colSpan", "hasLabel", "isLabelInsideFormFieldWrap", "value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-chartwizard-property-pane-format-tab',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<section>
<kendo-expansionpanel
[style.max-width.px]="576"
[title]="messageFor('formatChartArea')"
[expanded]="true"
[attr.dir]="stateService.direction"
>
<form class="k-form k-form-md">
<fieldset class="k-form-fieldset">
<legend class="k-form-legend">{{ messageFor('formatChartAreaMargins') }}</legend>
<div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatChartAreaMarginsLeft')"
inputType="numeric"
[placeholder]="messageFor('formatChartAreaMarginsAuto')"
[value]="$any(stateService.state.area.margin).left"
(valueChange)="updateState(areaMarginLeft, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatChartAreaMarginsRight')"
inputType="numeric"
[placeholder]="messageFor('formatChartAreaMarginsAuto')"
[value]="$any(stateService.state.area.margin).right"
(valueChange)="updateState(areaMarginRight, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatChartAreaMarginsTop')"
inputType="numeric"
[placeholder]="messageFor('formatChartAreaMarginsAuto')"
[value]="$any(stateService.state.area.margin).top"
(valueChange)="updateState(areaMarginTop, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatChartAreaMarginsBottom')"
inputType="numeric"
[placeholder]="messageFor('formatChartAreaMarginsAuto')"
[value]="$any(stateService.state.area.margin).bottom"
(valueChange)="updateState(areaMarginBottom, $event)"
>
</kendo-chartwizard-property-pane-form-field>
</div>
</fieldset>
<fieldset class="k-form-fieldset">
<legend class="k-form-legend">{{ messageFor('formatChartAreaBackground') }}</legend>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatChartAreaBackgroundColor')"
inputType="colorPicker"
[value]="stateService.state.area?.background"
(valueChange)="updateState(areaBackground, $event)"
>
</kendo-chartwizard-property-pane-form-field>
</fieldset>
</form>
</kendo-expansionpanel>
</section>
<section>
<kendo-expansionpanel
[style.max-width.px]="576"
[title]="messageFor('formatTitle')"
[expanded]="true"
>
<form class="k-form k-form-md">
<div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatTitleApplyTo')"
inputType="dropDownList"
[data]="chartTitles"
[colSpan]="2"
[value]="stateService.currentTitle"
(valueChange)="changeCurrentTitle($event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatTitleLabel')"
inputType="text"
[colSpan]="2"
[value]="chartTitleTypeText"
(valueChange)="updateState(chartTitleTypeAction, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatTitleFont')"
inputType="comboBox"
[data]="fontNames"
[colSpan]="2"
[value]="chartTitleTypeFont"
[placeholder]="messageFor('formatTitleFontPlaceholder')"
(valueChange)="updateState(chartTitleTypeFontAction, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatTitleSize')"
inputType="comboBox"
[placeholder]="messageFor('formatTitleSizePlaceholder')"
[data]="fontSizes"
[value]="chartTitleTypeFontSize"
(valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatTitleColor')"
inputType="colorPicker"
[value]="chartTitleTypeColor"
(valueChange)="updateState(chartTitleTypeColorAction, $event)"
>
</kendo-chartwizard-property-pane-form-field>
</div>
</form>
</kendo-expansionpanel>
</section>
<section>
<kendo-expansionpanel
[style.max-width.px]="576"
[title]="messageFor('formatLegend')"
[expanded]="true"
>
<form class="k-form k-form-md">
<div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
<kendo-label [for]="toggleLegend" [text]="messageFor('formatLegendShowLegend')"></kendo-label>
<kendo-switch
#toggleLegend
onLabel="On"
offLabel="Off"
thumbRounded="full"
size="medium"
[checked]="stateService.state.legend?.visible"
(valueChange)="updateState(legendVisible, $event)"
></kendo-switch>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatLegendFont')"
inputType="comboBox"
[data]="fontNames"
[colSpan]="2"
[placeholder]="messageFor('formatLegendFontPlaceholder')"
[value]="parseFont(stateService.state.legend?.labels?.font).name"
(valueChange)="updateState(legendFontName, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatLegendSize')"
inputType="comboBox"
[data]="fontSizes"
[placeholder]="messageFor('formatLegendSizePlaceholder')"
[value]="parseFont(stateService.state.legend?.labels?.font).size"
(valueChange)="updateState(legendFontSize, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatLegendColor')"
inputType="colorPicker"
[value]="stateService.state.legend?.labels?.color"
(valueChange)="updateState(legendColor, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatLegendPosition')"
inputType="dropDownList"
[colSpan]="2"
[data]="legendPositions"
[value]="stateService.state.legend?.position"
(valueChange)="updateState(legendPosition, $event)"
>
</kendo-chartwizard-property-pane-form-field>
</div>
</form>
</kendo-expansionpanel>
</section>
<section>
<kendo-expansionpanel
[style.max-width.px]="576"
[title]="messageFor('formatSeries')"
[expanded]="true"
>
<form class="k-form k-form-md">
<div class="k-form-field">
<kendo-label [for]="seriesDropDown" class="k-form-label" [text]="messageFor('formatSeriesApplyTo')"></kendo-label>
<div class="k-form-field-wrap">
<kendo-dropdownlist
#seriesDropDown
[data]="seriesData"
textField="text"
valueField="name"
fillMode="outline"
rounded="medium"
size="medium"
[value]="stateService.currentSeries"
(valueChange)="updateCurrentSeries($event)"
></kendo-dropdownlist>
</div>
</div>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatSeriesColor')"
[value]="stateService.currentSeries?.color"
inputType="colorPicker"
[disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
(valueChange)="updateSeriesColor($event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatSeriesShowLabels')"
[value]="showLabels"
[isLabelInsideFormFieldWrap]="true"
[colSpan]="2"
inputType="checkbox"
(valueChange)="toggleSeriesLabels($event)"
>
</kendo-chartwizard-property-pane-form-field>
</form>
</kendo-expansionpanel>
</section>
@if (stateService.state.seriesType !== 'pie') {
<section class="k-row-start-1 k-row-end-3 k-col-start-3">
<kendo-expansionpanel
[style.max-width.px]="576"
[title]="stateService.state.seriesType === 'scatter' ? messageFor('formatXAxis') : messageFor('formatCategoryAxis')"
[expanded]="true"
>
<form class="k-form k-form-md">
<fieldset class="k-form-fieldset">
<legend class="k-form-legend">{{ messageFor('formatCategoryAxisTitle') }}</legend>
<div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
<kendo-chartwizard-property-pane-form-field
inputType="text"
[hasLabel]="false"
[colSpan]="2"
[placeholder]="messageFor('formatCategoryAxisTitlePlaceholder')"
[value]="stateService.state.categoryAxis[0]?.title?.text || null"
(valueChange)="updateState(categoryAxisTitleText, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatCategoryAxisTitleFont')"
inputType="comboBox"
[data]="fontNames"
[colSpan]="2"
[placeholder]="messageFor('formatCategoryAxisTitleFontPlaceholder')"
[value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
(valueChange)="updateState(categoryAxisTitleFontName, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatCategoryAxisTitleSize')"
inputType="comboBox"
[placeholder]="messageFor('formatCategoryAxisTitleSizePlaceholder')"
[data]="fontSizes"
[value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
(valueChange)="updateState(categoryAxisTitleFontSize, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatCategoryAxisTitleColor')"
inputType="colorPicker"
[value]="stateService.state.categoryAxis[0]?.title?.color"
(valueChange)="updateState(categoryAxisTitleColor, $event)"
>
</kendo-chartwizard-property-pane-form-field>
</div>
</fieldset>
<fieldset class="k-form-fieldset">
<legend class="k-form-legend">{{ messageFor('formatCategoryAxisLabels') }}</legend>
<div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatCategoryAxisLabelsFont')"
inputType="comboBox"
[data]="fontNames"
[colSpan]="2"
[placeholder]="messageFor('formatCategoryAxisLabelsFontPlaceholder')"
[value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
(valueChange)="updateState(categoryAxisLabelsFontName, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatCategoryAxisLabelsSize')"
inputType="comboBox"
[data]="fontSizes"
[placeholder]="messageFor('formatCategoryAxisLabelsSizePlaceholder')"
[value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
(valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatCategoryAxisLabelsColor')"
inputType="colorPicker"
[value]="stateService.state.categoryAxis[0]?.labels?.color"
(valueChange)="updateState(categoryAxisLabelsColor, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatCategoryAxisLabelsRotation')"
inputType="dropDownList"
[data]="labelsCategoryAxisRotation"
[value]="stateService.state.categoryAxis[0]?.labels?.rotation"
(valueChange)="updateState(categoryAxisLabelsRotation, $event)"
>
</kendo-chartwizard-property-pane-form-field>
<span></span>
<kendo-chartwizard-property-pane-form-field
[text]="messageFor('formatCategoryAxisLabelsReverseOrder')"
[isLabelInsideFormFieldWrap]="true"
inputType="checkbox"
[colSpan]="2"
[value]="stateService.state.categoryAxis[0]?.reverse"
(valueChange)="updateState(categoryAxisReverseOrder, $event)"
>
</kendo-chartwizard-pr