@progress/kendo-angular-chart-wizard 16.6.2 → 16.6.3-develop.2

package/fesm2020/progress-kendo-angular-chart-wizard.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostBinding, ViewChild, Directive, Inject, HostListener, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostBinding, ViewChild, Directive, HostListener, NgModule } from '@angular/core';
 import { shouldShowValidationUI, WatermarkOverlayComponent, isPresent, ResizeBatchService } from '@progress/kendo-angular-common';
 import * as i2 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -34,8 +34,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-chart-wizard',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1723021891,
-    version: '16.6.2',
+    publishDate: 1723102230,
+    version: '16.6.3-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
 };
 
@@ -77,6 +77,7 @@ const fontNames = [
  * @hidden
  */
 const rotations = [
+    { text: 'Auto', value: 'auto' },
     { text: '0°', value: 0 },
     { text: '45°', value: 45 },
     { text: '90°', value: 90 },
@@ -123,10 +124,11 @@ const axesDefinitions = {
     ],
     pie: [
         { axisType: 'category', types: categoryTypes },
-        { axisType: 'value', types: valueTypes },
+        { axisType: 'value', types: valueTypes, count: 1 },
     ],
     scatter: [
-        { axisType: 'value', types: valueTypes, count: 2 }
+        { axisType: 'category', types: categoryTypes },
+        { axisType: 'value', types: valueTypes }
     ]
 };
 const getFont = (font, size) => `${size || ''} ${font || ''}`.trim();
@@ -183,10 +185,11 @@ const emptyState = () => structuredClone({
     series: [],
     initialSeries: [],
     categoryAxis: [],
-    valueAxis: [{ labels: { visible: true } }],
+    valueAxis: [{ labels: { visible: true, rotation: 'auto' } }],
     area: {
         margin: { left: undefined, right: undefined, top: undefined, bottom: undefined }
     },
+    stack: false
 });
 const categoryValueChartState = (data, seriesType, options) => {
     const state = emptyState();
@@ -220,7 +223,7 @@ const categoryValueChartState = (data, seriesType, options) => {
             type: seriesType,
             data: valuesResult,
             stack: false,
-            labels: { visible: true },
+            labels: { visible: false },
             ...(seriesType === scatterType ? scatterSeries : {})
         });
     });
@@ -230,10 +233,10 @@ const categoryValueChartState = (data, seriesType, options) => {
         state.initialSeries = structuredClone(state.series);
     }
     if (categories.length) {
-        state.categoryAxis = [{ categories, labels: { visible: true } }];
+        state.categoryAxis = [{ categories, labels: { visible: true, rotation: 'auto' } }];
         state.categoryField = state.columns[catIndex];
     }
-    state.legend = { visible: true };
+    state.legend = { visible: true, position: 'bottom' };
     state.title = { text: null };
     state.subtitle = { text: null };
     return state;
@@ -293,6 +296,15 @@ const pieChartState = (data, seriesType, options) => {
     state.initialSeries = structuredClone(state.series);
     return state;
 };
+const hasValue = (value) => value !== undefined && value !== null;
+/**
+ * @hidden
+ */
+const createInitialState = (data, seriesType, defaultState) => {
+    const state = createState(data, defaultState?.seriesType || seriesType);
+    return typeof defaultState?.stack !== 'undefined' ?
+        updateState(state, ActionTypes.stacked, defaultState.stack) : state;
+};
 /**
  * @hidden
  */
@@ -362,7 +374,7 @@ const mergeStates = (state, newState) => {
             newState.series[i].labels = state.series[i].labels;
         }
     }
-    if (state.series.every(s => s.labels?.visible)) {
+    if (state.series.every(s => s.labels?.visible) && isCategorical(newState.seriesType) && isCategorical(state.seriesType)) {
         newState.series.forEach(s => {
             s.labels = s.labels || {};
             s.labels.visible = true;
@@ -492,9 +504,11 @@ const updateState = (currentState, action, value) => {
         case ActionTypes.categoryAxisLabelsColor:
             state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, color: value } }));
             return state;
-        case ActionTypes.categoryAxisLabelsRotation:
-            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, rotation: value } }));
+        case ActionTypes.categoryAxisLabelsRotation: {
+            const rotation = hasValue(value) ? value : 'auto';
+            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, rotation } }));
             return state;
+        }
         case ActionTypes.categoryAxisReverseOrder:
             state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, reverse: value }));
             return state;
@@ -530,14 +544,21 @@ const updateState = (currentState, action, value) => {
         case ActionTypes.valueAxisLabelsColor:
             state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, color: value } }));
             return state;
-        case ActionTypes.valueAxisLabelsRotation:
-            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, rotation: value } }));
+        case ActionTypes.valueAxisLabelsRotation: {
+            const rotation = hasValue(value) ? value : 'auto';
+            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, rotation } }));
             return state;
+        }
         default:
             return state;
     }
 };
 
+/**
+ * @hidden
+ */
+const defaultAllSeriesItem = { name: 'All Series' };
+
 /**
  * @hidden
  */
@@ -553,7 +574,7 @@ class StateService {
         };
         this.seriesType = 'bar';
         this.currentTitle = 'Chart Title';
-        this.currentSeries = {};
+        this.currentSeries = defaultAllSeriesItem;
         this.data = [];
         this.deletedSeries = [];
         this.direction = 'ltr';
@@ -577,6 +598,7 @@ class ChartWizardPropertyPaneFormFieldComponent {
         this.colSpan = 1;
         this.hasLabel = true;
         this.isLabelInsideFormFieldWrap = false;
+        this.disabled = false;
         this.valueChange = new EventEmitter();
         this.formField = true;
     }
@@ -604,7 +626,7 @@ class ChartWizardPropertyPaneFormFieldComponent {
     }
 }
 ChartWizardPropertyPaneFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, deps: [{ token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ChartWizardPropertyPaneFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneFormFieldComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-form-field", inputs: { currentState: "currentState", action: "action", class: "class", inputType: "inputType", text: "text", data: "data", placeholder: "placeholder", colSpan: "colSpan", hasLabel: "hasLabel", isLabelInsideFormFieldWrap: "isLabelInsideFormFieldWrap", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-form-field": "this.formField", "class.k-col-span-2": "this.isColSpan2" } }, viewQueries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }, { propertyName: "numericTextBox", first: true, predicate: NumericTextBoxComponent, descendants: true }, { propertyName: "colorPicker", first: true, predicate: ColorPickerComponent, descendants: true }, { propertyName: "dropDownList", first: true, predicate: DropDownListComponent, descendants: true }, { propertyName: "textBox", first: true, predicate: TextBoxComponent, descendants: true }, { propertyName: "comboBox", first: true, predicate: ComboBoxComponent, descendants: true }, { propertyName: "checkBox", first: true, predicate: CheckBoxComponent, descendants: true }], ngImport: i0, template: `
+ChartWizardPropertyPaneFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneFormFieldComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-form-field", inputs: { currentState: "currentState", action: "action", class: "class", inputType: "inputType", text: "text", data: "data", placeholder: "placeholder", colSpan: "colSpan", hasLabel: "hasLabel", isLabelInsideFormFieldWrap: "isLabelInsideFormFieldWrap", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-form-field": "this.formField", "class.k-col-span-2": "this.isColSpan2" } }, viewQueries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }, { propertyName: "numericTextBox", first: true, predicate: NumericTextBoxComponent, descendants: true }, { propertyName: "colorPicker", first: true, predicate: ColorPickerComponent, descendants: true }, { propertyName: "dropDownList", first: true, predicate: DropDownListComponent, descendants: true }, { propertyName: "textBox", first: true, predicate: TextBoxComponent, descendants: true }, { propertyName: "comboBox", first: true, predicate: ComboBoxComponent, descendants: true }, { propertyName: "checkBox", first: true, predicate: CheckBoxComponent, descendants: true }], ngImport: i0, template: `
         <kendo-label *ngIf="hasLabel && !isLabelInsideFormFieldWrap" class="k-form-label" [text]="text"></kendo-label>
         <div class="k-form-field-wrap">
             <kendo-label
@@ -625,6 +647,7 @@ ChartWizardPropertyPaneFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ mi
                 fillMode="outline"
                 rounded="medium"
                 [value]="value"
+                [disabled]="disabled"
                 (valueChange)="valueChange.emit($event)"
             ></kendo-colorpicker>
             <kendo-dropdownlist
@@ -694,6 +717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 fillMode="outline"
                 rounded="medium"
                 [value]="value"
+                [disabled]="disabled"
                 (valueChange)="valueChange.emit($event)"
             ></kendo-colorpicker>
             <kendo-dropdownlist
@@ -771,6 +795,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], value: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], formField: [{
@@ -852,6 +878,7 @@ class ChartWizardPropertyPaneDataTabComponent {
         this.valueAxisLabelsColor = ActionTypes.valueAxisLabelsColor;
         this.valueAxisLabelsRotation = ActionTypes.valueAxisLabelsRotation;
         this.parseFont = parseFont;
+        this.defaultAllSeriesItem = defaultAllSeriesItem;
         this.fontNames = fontNames;
         this.fontSizes = fontSizes;
         this.legendPositions = positions;
@@ -889,6 +916,12 @@ class ChartWizardPropertyPaneDataTabComponent {
     get chartTitleTypeFontSizeAction() {
         return this.stateService.currentTitle === 'Chart Title' ? this.titleFontSize : this.subtitleFontSize;
     }
+    get seriesData() {
+        return [defaultAllSeriesItem, ...this.stateService.state.series];
+    }
+    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);
+    }
     ngAfterViewChecked() {
         this.localization.changes.subscribe(() => {
             this.cdr.detectChanges();
@@ -898,6 +931,10 @@ class ChartWizardPropertyPaneDataTabComponent {
         this.localization.changes.unsubscribe();
     }
     updateState(action, value) {
+        if (action === this.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) {
@@ -909,7 +946,12 @@ class ChartWizardPropertyPaneDataTabComponent {
         this.updateState(this.seriesLabel, this.stateService.currentSeries);
     }
     updateCurrentSeries(value) {
-        this.stateService.currentSeries = this.stateService.state.series.find((series) => series.name === value.name);
+        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);
@@ -929,6 +971,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVer
 ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneDataTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-format-tab", ngImport: i0, template: `
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Chart Area"
                 [expanded]="isExpanded('Chart Area')"
                 (expandedChange)="onExpandedChange('Chart Area', $event)"
@@ -983,6 +1026,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
         </section>
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Title"
                 [expanded]="isExpanded('Title')"
                 (expandedChange)="onExpandedChange('Title', $event)"
@@ -1038,6 +1082,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
         </section>
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Legend"
                 [expanded]="isExpanded('Legend')"
                 (expandedChange)="onExpandedChange('Legend', $event)"
@@ -1095,6 +1140,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
         </section>
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Series"
                 [expanded]="isExpanded('Series')"
                 (expandedChange)="onExpandedChange('Series', $event)"
@@ -1105,7 +1151,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                         <div class="k-form-field-wrap">
                             <kendo-dropdownlist
                                 #seriesDropDown
-                                [data]="stateService.state.series"
+                                [data]="seriesData"
                                 textField="name"
                                 valueField="name"
                                 fillMode="outline"
@@ -1121,12 +1167,13 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                         text="Color"
                         [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="Show Labels"
-                        [value]="stateService.currentSeries.labels?.visible"
+                        [value]="showLabels"
                         [isLabelInsideFormFieldWrap]="true"
                         inputType="checkbox"
                         (valueChange)="toggleSeriesLabels($event)"
@@ -1135,9 +1182,10 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                 </form>
             </kendo-expansionpanel>
         </section>
-        <section class="k-row-start-1 k-row-end-3 k-col-start-3">
+        <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
             <kendo-expansionpanel
-                title="Category axis"
+                [style.max-width.px]="576"
+                [title]="stateService.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
                 [expanded]="isExpanded('Category Axis')"
                 (expandedChange)="onExpandedChange('Category Axis', $event)"
             >
@@ -1150,7 +1198,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                                 [hasLabel]="false"
                                 [colSpan]="2"
                                 placeholder="Axis Title"
-                                [value]="stateService.state.categoryAxis[0]?.title?.text"
+                                [value]="stateService.state.categoryAxis[0]?.title?.text || null"
                                 (valueChange)="updateState(categoryAxisTitleText, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
@@ -1233,9 +1281,10 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                 </form>
             </kendo-expansionpanel>
         </section>
-        <section class="k-row-start-1 k-row-end-3 k-col-start-4">
+        <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
             <kendo-expansionpanel
-                title="Value axis"
+                [style.max-width.px]="576"
+                [title]="stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
                 [expanded]="isExpanded('Value Axis')"
                 (expandedChange)="onExpandedChange('Value Axis', $event)"
             >
@@ -1248,7 +1297,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                                 [hasLabel]="false"
                                 [colSpan]="2"
                                 placeholder="Axis Title"
-                                [value]="stateService.state.valueAxis[0]?.title?.text"
+                                [value]="stateService.state.valueAxis[0]?.title?.text || null"
                                 (valueChange)="updateState(valueAxisTitleText, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
@@ -1321,7 +1370,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                 </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"], 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", "title", "subtitle", "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 });
+    `, 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", "title", "subtitle", "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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, decorators: [{
             type: Component,
             args: [{
@@ -1330,6 +1379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     template: `
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Chart Area"
                 [expanded]="isExpanded('Chart Area')"
                 (expandedChange)="onExpandedChange('Chart Area', $event)"
@@ -1384,6 +1434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </section>
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Title"
                 [expanded]="isExpanded('Title')"
                 (expandedChange)="onExpandedChange('Title', $event)"
@@ -1439,6 +1490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </section>
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Legend"
                 [expanded]="isExpanded('Legend')"
                 (expandedChange)="onExpandedChange('Legend', $event)"
@@ -1496,6 +1548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </section>
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Series"
                 [expanded]="isExpanded('Series')"
                 (expandedChange)="onExpandedChange('Series', $event)"
@@ -1506,7 +1559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         <div class="k-form-field-wrap">
                             <kendo-dropdownlist
                                 #seriesDropDown
-                                [data]="stateService.state.series"
+                                [data]="seriesData"
                                 textField="name"
                                 valueField="name"
                                 fillMode="outline"
@@ -1522,12 +1575,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         text="Color"
                         [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="Show Labels"
-                        [value]="stateService.currentSeries.labels?.visible"
+                        [value]="showLabels"
                         [isLabelInsideFormFieldWrap]="true"
                         inputType="checkbox"
                         (valueChange)="toggleSeriesLabels($event)"
@@ -1536,9 +1590,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </form>
             </kendo-expansionpanel>
         </section>
-        <section class="k-row-start-1 k-row-end-3 k-col-start-3">
+        <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
             <kendo-expansionpanel
-                title="Category axis"
+                [style.max-width.px]="576"
+                [title]="stateService.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
                 [expanded]="isExpanded('Category Axis')"
                 (expandedChange)="onExpandedChange('Category Axis', $event)"
             >
@@ -1551,7 +1606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                 [hasLabel]="false"
                                 [colSpan]="2"
                                 placeholder="Axis Title"
-                                [value]="stateService.state.categoryAxis[0]?.title?.text"
+                                [value]="stateService.state.categoryAxis[0]?.title?.text || null"
                                 (valueChange)="updateState(categoryAxisTitleText, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
@@ -1634,9 +1689,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </form>
             </kendo-expansionpanel>
         </section>
-        <section class="k-row-start-1 k-row-end-3 k-col-start-4">
+        <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
             <kendo-expansionpanel
-                title="Value axis"
+                [style.max-width.px]="576"
+                [title]="stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
                 [expanded]="isExpanded('Value Axis')"
                 (expandedChange)="onExpandedChange('Value Axis', $event)"
             >
@@ -1649,7 +1705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                 [hasLabel]="false"
                                 [colSpan]="2"
                                 placeholder="Axis Title"
-                                [value]="stateService.state.valueAxis[0]?.title?.text"
+                                [value]="stateService.state.valueAxis[0]?.title?.text || null"
                                 (valueChange)="updateState(valueAxisTitleText, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
@@ -1729,7 +1785,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         ChartWizardPropertyPaneFormFieldComponent,
                         LabelComponent,
                         SwitchComponent,
-                        DropDownListComponent
+                        DropDownListComponent,
+                        NgIf
                     ]
                 }]
         }], ctorParameters: function () { return [{ type: StateService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; } });
@@ -1793,7 +1850,6 @@ ChartWizardPropertyPaneFormatTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ mi
                         rounded="medium"
                         size="medium"
                     >
-                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
                     </kendo-dropdownlist>
                 </fieldset>
                 <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.seriesType)">
@@ -1845,13 +1901,15 @@ ChartWizardPropertyPaneFormatTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ mi
                         [data]="stateService.state.columns"
                         [value]="stateService.state.yField"
                         (valueChange)="updateState(valueAxisY, $event)"
+                        fillMode="outline"
+                        rounded="medium"
+                        size="medium"
                     >
-                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
                     </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", "title", "subtitle", "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: "directive", type: ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "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], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "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", "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 });
+    `, 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", "title", "subtitle", "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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "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], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "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", "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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, decorators: [{
             type: Component,
             args: [{
@@ -1872,7 +1930,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         rounded="medium"
                         size="medium"
                     >
-                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
                     </kendo-dropdownlist>
                 </fieldset>
                 <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.seriesType)">
@@ -1924,8 +1981,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         [data]="stateService.state.columns"
                         [value]="stateService.state.yField"
                         (valueChange)="updateState(valueAxisY, $event)"
+                        fillMode="outline"
+                        rounded="medium"
+                        size="medium"
                     >
-                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
                     </kendo-dropdownlist>
                 </fieldset>
             </form>
@@ -1971,10 +2030,10 @@ class ChartWizardSeriesTypeButtonComponent {
     }
     isSelected() {
         if (this.stack?.type === '100%') {
-            return this.stack?.type === this.stateService.state.series[0].stack?.type;
+            return this.stack?.type === this.stateService.state.series[0]?.stack?.type;
         }
         return (this.stateService.state.seriesType === this.seriesType &&
-            this.stateService.state.series[0].stack === this.stack);
+            this.stateService.state.series[0]?.stack === this.stack);
     }
 }
 ChartWizardSeriesTypeButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardSeriesTypeButtonComponent, deps: [{ token: StateService }], target: i0.ɵɵFactoryTarget.Component });
@@ -2476,7 +2535,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"
@@ -2492,7 +2551,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                                             color: axis.title?.color
                                         }"
                                         [labels]="{
-                                            rotation: { angle: $any(axis.labels)?.rotation },
+                                            rotation: axis.labels?.rotation,
                                             font: axis.labels?.font,
                                             color: axis.labels?.color
                                         }"
@@ -2511,8 +2570,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                                     [name]="series.name"
                                     [color]="series.color"
                                     [labels]="{ visible: series.labels?.visible }"
-                                    [xField]="series.xField"
-                                    [yField]="series.yField"
+                                    [width]="series.width"
                                 >
                                 </kendo-chart-series-item>
                             </kendo-chart-series>
@@ -2526,7 +2584,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"
@@ -2543,7 +2601,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"
@@ -2652,7 +2710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"
@@ -2668,7 +2726,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                             color: axis.title?.color
                                         }"
                                         [labels]="{
-                                            rotation: { angle: $any(axis.labels)?.rotation },
+                                            rotation: axis.labels?.rotation,
                                             font: axis.labels?.font,
                                             color: axis.labels?.color
                                         }"
@@ -2687,8 +2745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                     [name]="series.name"
                                     [color]="series.color"
                                     [labels]="{ visible: series.labels?.visible }"
-                                    [xField]="series.xField"
-                                    [yField]="series.yField"
+                                    [width]="series.width"
                                 >
                                 </kendo-chart-series-item>
                             </kendo-chart-series>
@@ -2702,7 +2759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"
@@ -2719,7 +2776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"
@@ -2924,7 +2981,7 @@ class ChartWizardGridBindingDirective {
         this.chartWizardDataChange.emit(this.chartWizardData);
     }
 }
-ChartWizardGridBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardGridBindingDirective, deps: [{ token: GridComponent }], target: i0.ɵɵFactoryTarget.Directive });
+ChartWizardGridBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardGridBindingDirective, deps: [{ token: i1.GridComponent }], target: i0.ɵɵFactoryTarget.Directive });
 ChartWizardGridBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardGridBindingDirective, isStandalone: true, selector: "[kendoChartWizardGridBinding]", inputs: { chartWizardData: "chartWizardData", data: ["kendoGridBinding", "data"], selectionKey: ["kendoGridSelectBy", "selectionKey"], columnKey: "columnKey" }, outputs: { chartWizardDataChange: "chartWizardDataChange" }, host: { listeners: { "selectedKeysChange": "onSelectionChange($event)" } }, exportAs: ["kendoChartWizardGridBinding"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardGridBindingDirective, decorators: [{
             type: Directive,
@@ -2933,10 +2990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     exportAs: 'kendoChartWizardGridBinding',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.GridComponent, decorators: [{
-                    type: Inject,
-                    args: [GridComponent]
-                }] }]; }, propDecorators: { chartWizardData: [{
+        }], ctorParameters: function () { return [{ type: i1.GridComponent }]; }, propDecorators: { chartWizardData: [{
                 type: Input
             }], chartWizardDataChange: [{
                 type: Output