@progress/kendo-angular-chart-wizard 16.6.3-develop.1 → 16.7.0-develop.1

package/esm2020/property-pane/format-tab.component.mjs

@@ -10,7 +10,9 @@ 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 { LocalizationService } from '@progress/kendo-angular-l10n';
+import { NgIf } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "../state.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -60,10 +62,13 @@ export class ChartWizardPropertyPaneDataTabComponent {
         this.valueAxisTitleFontSize = ActionTypes.valueAxisTitleFontSize;
         this.valueAxisTitleColor = ActionTypes.valueAxisTitleColor;
         this.valueAxisLabelsFontName = ActionTypes.valueAxisLabelsFontName;
+        this.valueAxisLabelsFormat = ActionTypes.valueAxisLabelsFormat;
         this.valueAxisLabelsFontSize = ActionTypes.valueAxisLabelsFontSize;
         this.valueAxisLabelsColor = ActionTypes.valueAxisLabelsColor;
         this.valueAxisLabelsRotation = ActionTypes.valueAxisLabelsRotation;
         this.parseFont = parseFont;
+        this.labelFormats = labelFormats;
+        this.defaultAllSeriesItem = defaultAllSeriesItem;
         this.fontNames = fontNames;
         this.fontSizes = fontSizes;
         this.legendPositions = positions;
@@ -101,6 +106,15 @@ export 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);
+    }
+    get labelFormatValue() {
+        return labelFormats.find(f => f.value === this.stateService.state.valueAxis[0]?.labels?.format)?.value || defaultFormat.value;
+    }
     ngAfterViewChecked() {
         this.localization.changes.subscribe(() => {
             this.cdr.detectChanges();
@@ -110,6 +124,10 @@ export 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) {
@@ -121,29 +139,26 @@ export 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);
         this.stateService.currentSeries.color = value;
         this.updateState(this.seriesColor, this.stateService.currentSeries);
     }
-    onExpandedChange(panel, expanded) {
-        expanded
-            ? (this.stateService.currentFormatExpansionPanel = panel)
-            : (this.stateService.currentFormatExpansionPanel = null);
-    }
-    isExpanded(panel) {
-        return this.stateService.currentFormatExpansionPanel === panel;
-    }
 }
 ChartWizardPropertyPaneDataTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, deps: [{ token: i1.StateService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 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)"
+                [expanded]="true"
                 [attr.dir]="stateService.direction"
             >
                 <form class="k-form k-form-md">
@@ -195,9 +210,9 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
         </section>
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Title"
-                [expanded]="isExpanded('Title')"
-                (expandedChange)="onExpandedChange('Title', $event)"
+                [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">
@@ -250,9 +265,9 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
         </section>
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Legend"
-                [expanded]="isExpanded('Legend')"
-                (expandedChange)="onExpandedChange('Legend', $event)"
+                [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">
@@ -307,9 +322,9 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
         </section>
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Series"
-                [expanded]="isExpanded('Series')"
-                (expandedChange)="onExpandedChange('Series', $event)"
+                [expanded]="true"
             >
                 <form class="k-form k-form-md">
                     <div class="k-form-field">
@@ -317,7 +332,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"
@@ -333,12 +348,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)"
@@ -347,11 +363,11 @@ 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"
-                [expanded]="isExpanded('Category Axis')"
-                (expandedChange)="onExpandedChange('Category Axis', $event)"
+                [style.max-width.px]="576"
+                [title]="stateService.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
+                [expanded]="true"
             >
                 <form class="k-form k-form-md">
                     <fieldset class="k-form-fieldset">
@@ -362,7 +378,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>
@@ -445,11 +461,11 @@ 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"
-                [expanded]="isExpanded('Value Axis')"
-                (expandedChange)="onExpandedChange('Value Axis', $event)"
+                [style.max-width.px]="576"
+                [title]="stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
+                [expanded]="true"
             >
                 <form class="k-form k-form-md">
                     <fieldset class="k-form-fieldset">
@@ -460,7 +476,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>
@@ -495,6 +511,15 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                     <fieldset class="k-form-fieldset">
                         <legend class="k-form-legend">Labels</legend>
                         <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Label Format"
+                                [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="Font"
                                 inputType="comboBox"
@@ -533,7 +558,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: [{
@@ -542,9 +567,9 @@ 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)"
+                [expanded]="true"
                 [attr.dir]="stateService.direction"
             >
                 <form class="k-form k-form-md">
@@ -596,9 +621,9 @@ 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)"
+                [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">
@@ -651,9 +676,9 @@ 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)"
+                [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">
@@ -708,9 +733,9 @@ 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)"
+                [expanded]="true"
             >
                 <form class="k-form k-form-md">
                     <div class="k-form-field">
@@ -718,7 +743,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"
@@ -734,12 +759,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)"
@@ -748,11 +774,11 @@ 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"
-                [expanded]="isExpanded('Category Axis')"
-                (expandedChange)="onExpandedChange('Category Axis', $event)"
+                [style.max-width.px]="576"
+                [title]="stateService.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
+                [expanded]="true"
             >
                 <form class="k-form k-form-md">
                     <fieldset class="k-form-fieldset">
@@ -763,7 +789,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>
@@ -846,11 +872,11 @@ 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"
-                [expanded]="isExpanded('Value Axis')"
-                (expandedChange)="onExpandedChange('Value Axis', $event)"
+                [style.max-width.px]="576"
+                [title]="stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
+                [expanded]="true"
             >
                 <form class="k-form k-form-md">
                     <fieldset class="k-form-fieldset">
@@ -861,7 +887,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>
@@ -896,6 +922,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     <fieldset class="k-form-fieldset">
                         <legend class="k-form-legend">Labels</legend>
                         <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Label Format"
+                                [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="Font"
                                 inputType="comboBox"
@@ -941,7 +976,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         ChartWizardPropertyPaneFormFieldComponent,
                         LabelComponent,
                         SwitchComponent,
-                        DropDownListComponent
+                        DropDownListComponent,
+                        NgIf
                     ]
                 }]
         }], ctorParameters: function () { return [{ type: i1.StateService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; } });

package/esm2020/state.service.mjs

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Injectable } from "@angular/core";
+import { defaultAllSeriesItem } from "./common/models";
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -19,7 +20,7 @@ export class StateService {
         };
         this.seriesType = 'bar';
         this.currentTitle = 'Chart Title';
-        this.currentSeries = {};
+        this.currentSeries = defaultAllSeriesItem;
         this.data = [];
         this.deletedSeries = [];
         this.direction = 'ltr';