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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/chart-wizard-state.d.ts +9 -2
  2. package/common/models.d.ts +6 -0
  3. package/esm2020/chart-wizard-state.mjs +27 -11
  4. package/esm2020/chart-wizard.component.mjs +10 -12
  5. package/esm2020/common/models.mjs +4 -1
  6. package/esm2020/package-metadata.mjs +2 -2
  7. package/esm2020/property-pane/data-tab.component.mjs +7 -5
  8. package/esm2020/property-pane/form-field.component.mjs +6 -1
  9. package/esm2020/property-pane/format-tab.component.mjs +52 -19
  10. package/esm2020/state.service.mjs +2 -1
  11. package/fesm2015/progress-kendo-angular-chart-wizard.mjs +109 -51
  12. package/fesm2020/progress-kendo-angular-chart-wizard.mjs +108 -51
  13. package/package.json +16 -16
  14. package/property-pane/form-field.component.d.ts +2 -1
  15. package/property-pane/format-tab.component.d.ts +10 -2
package/esm2020/property-pane/format-tab.component.mjs CHANGED
@@ -10,7 +10,9 @@ import { ExpansionPanelComponent } from '@progress/kendo-angular-layout';
10
10
  import { LabelComponent } from '@progress/kendo-angular-label';
11
11
  import { SwitchComponent } from '@progress/kendo-angular-inputs';
12
12
  import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
13
+ import { defaultAllSeriesItem } from '../common/models';
13
14
  import { LocalizationService } from '@progress/kendo-angular-l10n';
15
+ import { NgIf } from '@angular/common';
14
16
  import * as i0 from "@angular/core";
15
17
  import * as i1 from "../state.service";
16
18
  import * as i2 from "@progress/kendo-angular-l10n";
@@ -64,6 +66,7 @@ export class ChartWizardPropertyPaneDataTabComponent {
64
66
  this.valueAxisLabelsColor = ActionTypes.valueAxisLabelsColor;
65
67
  this.valueAxisLabelsRotation = ActionTypes.valueAxisLabelsRotation;
66
68
  this.parseFont = parseFont;
69
+ this.defaultAllSeriesItem = defaultAllSeriesItem;
67
70
  this.fontNames = fontNames;
68
71
  this.fontSizes = fontSizes;
69
72
  this.legendPositions = positions;
@@ -101,6 +104,12 @@ export class ChartWizardPropertyPaneDataTabComponent {
101
104
  get chartTitleTypeFontSizeAction() {
102
105
  return this.stateService.currentTitle === 'Chart Title' ? this.titleFontSize : this.subtitleFontSize;
103
106
  }
107
+ get seriesData() {
108
+ return [defaultAllSeriesItem, ...this.stateService.state.series];
109
+ }
110
+ get showLabels() {
111
+ 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);
112
+ }
104
113
  ngAfterViewChecked() {
105
114
  this.localization.changes.subscribe(() => {
106
115
  this.cdr.detectChanges();
@@ -110,6 +119,10 @@ export class ChartWizardPropertyPaneDataTabComponent {
110
119
  this.localization.changes.unsubscribe();
111
120
  }
112
121
  updateState(action, value) {
122
+ if (action === this.seriesLabel && this.stateService.currentSeries.name === defaultAllSeriesItem.name) {
123
+ this.stateService.state = updateState(this.stateService.state, action, { name: '', all: true, visible: value.labels.visible });
124
+ return;
125
+ }
113
126
  this.stateService.state = updateState(this.stateService.state, action, value);
114
127
  }
115
128
  changeCurrentTitle(value) {
@@ -121,7 +134,12 @@ export class ChartWizardPropertyPaneDataTabComponent {
121
134
  this.updateState(this.seriesLabel, this.stateService.currentSeries);
122
135
  }
123
136
  updateCurrentSeries(value) {
124
- this.stateService.currentSeries = this.stateService.state.series.find((series) => series.name === value.name);
137
+ if (value.name === defaultAllSeriesItem.name) {
138
+ this.stateService.currentSeries = defaultAllSeriesItem;
139
+ }
140
+ else {
141
+ this.stateService.currentSeries = this.stateService.state.series.find((series) => series.name === value.name);
142
+ }
125
143
  }
126
144
  updateSeriesColor(value) {
127
145
  this.updateCurrentSeries(this.stateService.currentSeries);
@@ -141,6 +159,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVer
141
159
  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: `
142
160
  <section>
143
161
  <kendo-expansionpanel
162
+ [style.max-width.px]="576"
144
163
  title="Chart Area"
145
164
  [expanded]="isExpanded('Chart Area')"
146
165
  (expandedChange)="onExpandedChange('Chart Area', $event)"
@@ -195,6 +214,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
195
214
  </section>
196
215
  <section>
197
216
  <kendo-expansionpanel
217
+ [style.max-width.px]="576"
198
218
  title="Title"
199
219
  [expanded]="isExpanded('Title')"
200
220
  (expandedChange)="onExpandedChange('Title', $event)"
@@ -250,6 +270,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
250
270
  </section>
251
271
  <section>
252
272
  <kendo-expansionpanel
273
+ [style.max-width.px]="576"
253
274
  title="Legend"
254
275
  [expanded]="isExpanded('Legend')"
255
276
  (expandedChange)="onExpandedChange('Legend', $event)"
@@ -307,6 +328,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
307
328
  </section>
308
329
  <section>
309
330
  <kendo-expansionpanel
331
+ [style.max-width.px]="576"
310
332
  title="Series"
311
333
  [expanded]="isExpanded('Series')"
312
334
  (expandedChange)="onExpandedChange('Series', $event)"
@@ -317,7 +339,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
317
339
  <div class="k-form-field-wrap">
318
340
  <kendo-dropdownlist
319
341
  #seriesDropDown
320
- [data]="stateService.state.series"
342
+ [data]="seriesData"
321
343
  textField="name"
322
344
  valueField="name"
323
345
  fillMode="outline"
@@ -333,12 +355,13 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
333
355
  text="Color"
334
356
  [value]="stateService.currentSeries?.color"
335
357
  inputType="colorPicker"
358
+ [disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
336
359
  (valueChange)="updateSeriesColor($event)"
337
360
  >
338
361
  </kendo-chartwizard-property-pane-form-field>
339
362
  <kendo-chartwizard-property-pane-form-field
340
363
  text="Show Labels"
341
- [value]="stateService.currentSeries.labels?.visible"
364
+ [value]="showLabels"
342
365
  [isLabelInsideFormFieldWrap]="true"
343
366
  inputType="checkbox"
344
367
  (valueChange)="toggleSeriesLabels($event)"
@@ -347,9 +370,10 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
347
370
  </form>
348
371
  </kendo-expansionpanel>
349
372
  </section>
350
- <section class="k-row-start-1 k-row-end-3 k-col-start-3">
373
+ <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
351
374
  <kendo-expansionpanel
352
- title="Category axis"
375
+ [style.max-width.px]="576"
376
+ [title]="stateService.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
353
377
  [expanded]="isExpanded('Category Axis')"
354
378
  (expandedChange)="onExpandedChange('Category Axis', $event)"
355
379
  >
@@ -362,7 +386,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
362
386
  [hasLabel]="false"
363
387
  [colSpan]="2"
364
388
  placeholder="Axis Title"
365
- [value]="stateService.state.categoryAxis[0]?.title?.text"
389
+ [value]="stateService.state.categoryAxis[0]?.title?.text || null"
366
390
  (valueChange)="updateState(categoryAxisTitleText, $event)"
367
391
  >
368
392
  </kendo-chartwizard-property-pane-form-field>
@@ -445,9 +469,10 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
445
469
  </form>
446
470
  </kendo-expansionpanel>
447
471
  </section>
448
- <section class="k-row-start-1 k-row-end-3 k-col-start-4">
472
+ <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
449
473
  <kendo-expansionpanel
450
- title="Value axis"
474
+ [style.max-width.px]="576"
475
+ [title]="stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
451
476
  [expanded]="isExpanded('Value Axis')"
452
477
  (expandedChange)="onExpandedChange('Value Axis', $event)"
453
478
  >
@@ -460,7 +485,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
460
485
  [hasLabel]="false"
461
486
  [colSpan]="2"
462
487
  placeholder="Axis Title"
463
- [value]="stateService.state.valueAxis[0]?.title?.text"
488
+ [value]="stateService.state.valueAxis[0]?.title?.text || null"
464
489
  (valueChange)="updateState(valueAxisTitleText, $event)"
465
490
  >
466
491
  </kendo-chartwizard-property-pane-form-field>
@@ -533,7 +558,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
533
558
  </form>
534
559
  </kendo-expansionpanel>
535
560
  </section>
536
- `, 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 });
561
+ `, 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 });
537
562
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, decorators: [{
538
563
  type: Component,
539
564
  args: [{
@@ -542,6 +567,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
542
567
  template: `
543
568
  <section>
544
569
  <kendo-expansionpanel
570
+ [style.max-width.px]="576"
545
571
  title="Chart Area"
546
572
  [expanded]="isExpanded('Chart Area')"
547
573
  (expandedChange)="onExpandedChange('Chart Area', $event)"
@@ -596,6 +622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
596
622
  </section>
597
623
  <section>
598
624
  <kendo-expansionpanel
625
+ [style.max-width.px]="576"
599
626
  title="Title"
600
627
  [expanded]="isExpanded('Title')"
601
628
  (expandedChange)="onExpandedChange('Title', $event)"
@@ -651,6 +678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
651
678
  </section>
652
679
  <section>
653
680
  <kendo-expansionpanel
681
+ [style.max-width.px]="576"
654
682
  title="Legend"
655
683
  [expanded]="isExpanded('Legend')"
656
684
  (expandedChange)="onExpandedChange('Legend', $event)"
@@ -708,6 +736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
708
736
  </section>
709
737
  <section>
710
738
  <kendo-expansionpanel
739
+ [style.max-width.px]="576"
711
740
  title="Series"
712
741
  [expanded]="isExpanded('Series')"
713
742
  (expandedChange)="onExpandedChange('Series', $event)"
@@ -718,7 +747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
718
747
  <div class="k-form-field-wrap">
719
748
  <kendo-dropdownlist
720
749
  #seriesDropDown
721
- [data]="stateService.state.series"
750
+ [data]="seriesData"
722
751
  textField="name"
723
752
  valueField="name"
724
753
  fillMode="outline"
@@ -734,12 +763,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
734
763
  text="Color"
735
764
  [value]="stateService.currentSeries?.color"
736
765
  inputType="colorPicker"
766
+ [disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
737
767
  (valueChange)="updateSeriesColor($event)"
738
768
  >
739
769
  </kendo-chartwizard-property-pane-form-field>
740
770
  <kendo-chartwizard-property-pane-form-field
741
771
  text="Show Labels"
742
- [value]="stateService.currentSeries.labels?.visible"
772
+ [value]="showLabels"
743
773
  [isLabelInsideFormFieldWrap]="true"
744
774
  inputType="checkbox"
745
775
  (valueChange)="toggleSeriesLabels($event)"
@@ -748,9 +778,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
748
778
  </form>
749
779
  </kendo-expansionpanel>
750
780
  </section>
751
- <section class="k-row-start-1 k-row-end-3 k-col-start-3">
781
+ <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
752
782
  <kendo-expansionpanel
753
- title="Category axis"
783
+ [style.max-width.px]="576"
784
+ [title]="stateService.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
754
785
  [expanded]="isExpanded('Category Axis')"
755
786
  (expandedChange)="onExpandedChange('Category Axis', $event)"
756
787
  >
@@ -763,7 +794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
763
794
  [hasLabel]="false"
764
795
  [colSpan]="2"
765
796
  placeholder="Axis Title"
766
- [value]="stateService.state.categoryAxis[0]?.title?.text"
797
+ [value]="stateService.state.categoryAxis[0]?.title?.text || null"
767
798
  (valueChange)="updateState(categoryAxisTitleText, $event)"
768
799
  >
769
800
  </kendo-chartwizard-property-pane-form-field>
@@ -846,9 +877,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
846
877
  </form>
847
878
  </kendo-expansionpanel>
848
879
  </section>
849
- <section class="k-row-start-1 k-row-end-3 k-col-start-4">
880
+ <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
850
881
  <kendo-expansionpanel
851
- title="Value axis"
882
+ [style.max-width.px]="576"
883
+ [title]="stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
852
884
  [expanded]="isExpanded('Value Axis')"
853
885
  (expandedChange)="onExpandedChange('Value Axis', $event)"
854
886
  >
@@ -861,7 +893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
861
893
  [hasLabel]="false"
862
894
  [colSpan]="2"
863
895
  placeholder="Axis Title"
864
- [value]="stateService.state.valueAxis[0]?.title?.text"
896
+ [value]="stateService.state.valueAxis[0]?.title?.text || null"
865
897
  (valueChange)="updateState(valueAxisTitleText, $event)"
866
898
  >
867
899
  </kendo-chartwizard-property-pane-form-field>
@@ -941,7 +973,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
941
973
  ChartWizardPropertyPaneFormFieldComponent,
942
974
  LabelComponent,
943
975
  SwitchComponent,
944
- DropDownListComponent
976
+ DropDownListComponent,
977
+ NgIf
945
978
  ]
946
979
  }]
947
980
  }], ctorParameters: function () { return [{ type: i1.StateService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; } });
package/esm2020/state.service.mjs CHANGED
@@ -3,6 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { Injectable } from "@angular/core";
6
+ import { defaultAllSeriesItem } from "./common/models";
6
7
  import * as i0 from "@angular/core";
7
8
  /**
8
9
  * @hidden
@@ -19,7 +20,7 @@ export class StateService {
19
20
  };
20
21
  this.seriesType = 'bar';
21
22
  this.currentTitle = 'Chart Title';
22
- this.currentSeries = {};
23
+ this.currentSeries = defaultAllSeriesItem;
23
24
  this.data = [];
24
25
  this.deletedSeries = [];
25
26
  this.direction = 'ltr';