@progress/kendo-angular-chart-wizard 16.9.0-develop.11 → 16.9.0-develop.12

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.
@@ -19,7 +19,7 @@ import * as i2 from "@progress/kendo-angular-l10n";
19
19
  /**
20
20
  * @hidden
21
21
  */
22
- export class ChartWizardPropertyPaneDataTabComponent {
22
+ export class ChartWizardPropertyPaneFormatTabComponent {
23
23
  constructor(stateService, localization, cdr) {
24
24
  this.stateService = stateService;
25
25
  this.localization = localization;
@@ -28,14 +28,6 @@ export class ChartWizardPropertyPaneDataTabComponent {
28
28
  { text: 'Chart Title', value: 'Chart Title' },
29
29
  { text: 'Chart Subtitle', value: 'Chart Subtitle' },
30
30
  ];
31
- this.titleText = ActionTypes.titleText;
32
- this.titleFontName = ActionTypes.titleFontName;
33
- this.titleFontSize = ActionTypes.titleFontSize;
34
- this.titleColor = ActionTypes.titleColor;
35
- this.subtitleText = ActionTypes.subtitleText;
36
- this.subtitleFontName = ActionTypes.subtitleFontName;
37
- this.subtitleFontSize = ActionTypes.subtitleFontSize;
38
- this.subtitleColor = ActionTypes.subtitleColor;
39
31
  this.areaMarginLeft = ActionTypes.areaMarginLeft;
40
32
  this.areaMarginRight = ActionTypes.areaMarginRight;
41
33
  this.areaMarginTop = ActionTypes.areaMarginTop;
@@ -46,8 +38,6 @@ export class ChartWizardPropertyPaneDataTabComponent {
46
38
  this.legendFontSize = ActionTypes.legendFontSize;
47
39
  this.legendColor = ActionTypes.legendColor;
48
40
  this.legendPosition = ActionTypes.legendPosition;
49
- this.seriesColor = ActionTypes.seriesColor;
50
- this.seriesLabel = ActionTypes.seriesLabel;
51
41
  this.categoryAxisTitleText = ActionTypes.categoryAxisTitleText;
52
42
  this.categoryAxisTitleFontName = ActionTypes.categoryAxisTitleFontName;
53
43
  this.categoryAxisTitleFontSize = ActionTypes.categoryAxisTitleFontSize;
@@ -95,16 +85,16 @@ export class ChartWizardPropertyPaneDataTabComponent {
95
85
  : this.stateService.state.subtitle?.color;
96
86
  }
97
87
  get chartTitleTypeAction() {
98
- return this.stateService.currentTitle === 'Chart Title' ? this.titleText : this.subtitleText;
88
+ return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleText : ActionTypes.subtitleText;
99
89
  }
100
90
  get chartTitleTypeFontAction() {
101
- return this.stateService.currentTitle === 'Chart Title' ? this.titleFontName : this.subtitleFontName;
91
+ return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleFontName : ActionTypes.subtitleFontName;
102
92
  }
103
93
  get chartTitleTypeColorAction() {
104
- return this.stateService.currentTitle === 'Chart Title' ? this.titleColor : this.subtitleColor;
94
+ return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleColor : ActionTypes.subtitleColor;
105
95
  }
106
96
  get chartTitleTypeFontSizeAction() {
107
- return this.stateService.currentTitle === 'Chart Title' ? this.titleFontSize : this.subtitleFontSize;
97
+ return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleFontSize : ActionTypes.subtitleFontSize;
108
98
  }
109
99
  get seriesData() {
110
100
  return [defaultAllSeriesItem, ...this.stateService.state.series];
@@ -124,7 +114,7 @@ export class ChartWizardPropertyPaneDataTabComponent {
124
114
  this.localization.changes.unsubscribe();
125
115
  }
126
116
  updateState(action, value) {
127
- if (action === this.seriesLabel && this.stateService.currentSeries.name === defaultAllSeriesItem.name) {
117
+ if (action === ActionTypes.seriesLabel && this.stateService.currentSeries.name === defaultAllSeriesItem.name) {
128
118
  this.stateService.state = updateState(this.stateService.state, action, { name: '', all: true, visible: value.labels.visible });
129
119
  return;
130
120
  }
@@ -136,7 +126,7 @@ export class ChartWizardPropertyPaneDataTabComponent {
136
126
  toggleSeriesLabels(value) {
137
127
  this.updateCurrentSeries(this.stateService.currentSeries);
138
128
  this.stateService.currentSeries.labels = { visible: value };
139
- this.updateState(this.seriesLabel, this.stateService.currentSeries);
129
+ this.updateState(ActionTypes.seriesLabel, this.stateService.currentSeries);
140
130
  }
141
131
  updateCurrentSeries(value) {
142
132
  if (value.name === defaultAllSeriesItem.name) {
@@ -149,11 +139,11 @@ export class ChartWizardPropertyPaneDataTabComponent {
149
139
  updateSeriesColor(value) {
150
140
  this.updateCurrentSeries(this.stateService.currentSeries);
151
141
  this.stateService.currentSeries.color = value;
152
- this.updateState(this.seriesColor, this.stateService.currentSeries);
142
+ this.updateState(ActionTypes.seriesColor, this.stateService.currentSeries);
153
143
  }
154
144
  }
155
- 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 });
156
- 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: `
145
+ ChartWizardPropertyPaneFormatTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, deps: [{ token: i1.StateService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
146
+ ChartWizardPropertyPaneFormatTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneFormatTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-format-tab", ngImport: i0, template: `
157
147
  <section>
158
148
  <kendo-expansionpanel
159
149
  [style.max-width.px]="576"
@@ -168,28 +158,28 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
168
158
  <kendo-chartwizard-property-pane-form-field
169
159
  text="Left"
170
160
  inputType="numeric"
171
- [value]="$any(stateService.state.area?.margin).left"
161
+ [value]="$any(stateService.state.area.margin).left"
172
162
  (valueChange)="updateState(areaMarginLeft, $event)"
173
163
  >
174
164
  </kendo-chartwizard-property-pane-form-field>
175
165
  <kendo-chartwizard-property-pane-form-field
176
166
  text="Right"
177
167
  inputType="numeric"
178
- [value]="$any(stateService.state.area?.margin).right"
168
+ [value]="$any(stateService.state.area.margin).right"
179
169
  (valueChange)="updateState(areaMarginRight, $event)"
180
170
  >
181
171
  </kendo-chartwizard-property-pane-form-field>
182
172
  <kendo-chartwizard-property-pane-form-field
183
173
  text="Top"
184
174
  inputType="numeric"
185
- [value]="$any(stateService.state.area?.margin).top"
175
+ [value]="$any(stateService.state.area.margin).top"
186
176
  (valueChange)="updateState(areaMarginTop, $event)"
187
177
  >
188
178
  </kendo-chartwizard-property-pane-form-field>
189
179
  <kendo-chartwizard-property-pane-form-field
190
180
  text="Bottom"
191
181
  inputType="numeric"
192
- [value]="$any(stateService.state.area?.margin).bottom"
182
+ [value]="$any(stateService.state.area.margin).bottom"
193
183
  (valueChange)="updateState(areaMarginBottom, $event)"
194
184
  >
195
185
  </kendo-chartwizard-property-pane-form-field>
@@ -356,6 +346,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
356
346
  text="Show Labels"
357
347
  [value]="showLabels"
358
348
  [isLabelInsideFormFieldWrap]="true"
349
+ [colSpan]="2"
359
350
  inputType="checkbox"
360
351
  (valueChange)="toggleSeriesLabels($event)"
361
352
  >
@@ -363,10 +354,10 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
363
354
  </form>
364
355
  </kendo-expansionpanel>
365
356
  </section>
366
- <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
357
+ <section *ngIf="stateService.state.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
367
358
  <kendo-expansionpanel
368
359
  [style.max-width.px]="576"
369
- [title]="stateService.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
360
+ [title]="stateService.state.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
370
361
  [expanded]="true"
371
362
  >
372
363
  <form class="k-form k-form-md">
@@ -417,6 +408,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
417
408
  text="Font"
418
409
  inputType="comboBox"
419
410
  [data]="fontNames"
411
+ [colSpan]="2"
420
412
  placeholder="(Inherited font)"
421
413
  [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
422
414
  (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
@@ -434,7 +426,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
434
426
  <kendo-chartwizard-property-pane-form-field
435
427
  text="Color"
436
428
  inputType="colorPicker"
437
- [value]="stateService.state.categoryAxis[0]?.labels?.color || ''"
429
+ [value]="stateService.state.categoryAxis[0]?.labels?.color"
438
430
  (valueChange)="updateState(categoryAxisLabelsColor, $event)"
439
431
  >
440
432
  </kendo-chartwizard-property-pane-form-field>
@@ -461,10 +453,10 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
461
453
  </form>
462
454
  </kendo-expansionpanel>
463
455
  </section>
464
- <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
456
+ <section *ngIf="stateService.state.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
465
457
  <kendo-expansionpanel
466
458
  [style.max-width.px]="576"
467
- [title]="stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
459
+ [title]="stateService.state.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
468
460
  [expanded]="true"
469
461
  >
470
462
  <form class="k-form k-form-md">
@@ -524,6 +516,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
524
516
  text="Font"
525
517
  inputType="comboBox"
526
518
  [data]="fontNames"
519
+ [colSpan]="2"
527
520
  placeholder="(Inherited font)"
528
521
  [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
529
522
  (valueChange)="updateState(valueAxisLabelsFontName, $event)"
@@ -541,7 +534,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
541
534
  <kendo-chartwizard-property-pane-form-field
542
535
  text="Color"
543
536
  inputType="colorPicker"
544
- [value]="stateService.state.valueAxis[0]?.labels?.color || ''"
537
+ [value]="stateService.state.valueAxis[0]?.labels?.color"
545
538
  (valueChange)="updateState(valueAxisLabelsColor, $event)"
546
539
  >
547
540
  </kendo-chartwizard-property-pane-form-field>
@@ -559,7 +552,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
559
552
  </kendo-expansionpanel>
560
553
  </section>
561
554
  `, 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 });
562
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, decorators: [{
555
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, decorators: [{
563
556
  type: Component,
564
557
  args: [{
565
558
  selector: 'kendo-chartwizard-property-pane-format-tab',
@@ -579,28 +572,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
579
572
  <kendo-chartwizard-property-pane-form-field
580
573
  text="Left"
581
574
  inputType="numeric"
582
- [value]="$any(stateService.state.area?.margin).left"
575
+ [value]="$any(stateService.state.area.margin).left"
583
576
  (valueChange)="updateState(areaMarginLeft, $event)"
584
577
  >
585
578
  </kendo-chartwizard-property-pane-form-field>
586
579
  <kendo-chartwizard-property-pane-form-field
587
580
  text="Right"
588
581
  inputType="numeric"
589
- [value]="$any(stateService.state.area?.margin).right"
582
+ [value]="$any(stateService.state.area.margin).right"
590
583
  (valueChange)="updateState(areaMarginRight, $event)"
591
584
  >
592
585
  </kendo-chartwizard-property-pane-form-field>
593
586
  <kendo-chartwizard-property-pane-form-field
594
587
  text="Top"
595
588
  inputType="numeric"
596
- [value]="$any(stateService.state.area?.margin).top"
589
+ [value]="$any(stateService.state.area.margin).top"
597
590
  (valueChange)="updateState(areaMarginTop, $event)"
598
591
  >
599
592
  </kendo-chartwizard-property-pane-form-field>
600
593
  <kendo-chartwizard-property-pane-form-field
601
594
  text="Bottom"
602
595
  inputType="numeric"
603
- [value]="$any(stateService.state.area?.margin).bottom"
596
+ [value]="$any(stateService.state.area.margin).bottom"
604
597
  (valueChange)="updateState(areaMarginBottom, $event)"
605
598
  >
606
599
  </kendo-chartwizard-property-pane-form-field>
@@ -767,6 +760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
767
760
  text="Show Labels"
768
761
  [value]="showLabels"
769
762
  [isLabelInsideFormFieldWrap]="true"
763
+ [colSpan]="2"
770
764
  inputType="checkbox"
771
765
  (valueChange)="toggleSeriesLabels($event)"
772
766
  >
@@ -774,10 +768,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
774
768
  </form>
775
769
  </kendo-expansionpanel>
776
770
  </section>
777
- <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
771
+ <section *ngIf="stateService.state.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
778
772
  <kendo-expansionpanel
779
773
  [style.max-width.px]="576"
780
- [title]="stateService.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
774
+ [title]="stateService.state.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
781
775
  [expanded]="true"
782
776
  >
783
777
  <form class="k-form k-form-md">
@@ -828,6 +822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
828
822
  text="Font"
829
823
  inputType="comboBox"
830
824
  [data]="fontNames"
825
+ [colSpan]="2"
831
826
  placeholder="(Inherited font)"
832
827
  [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
833
828
  (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
@@ -845,7 +840,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
845
840
  <kendo-chartwizard-property-pane-form-field
846
841
  text="Color"
847
842
  inputType="colorPicker"
848
- [value]="stateService.state.categoryAxis[0]?.labels?.color || ''"
843
+ [value]="stateService.state.categoryAxis[0]?.labels?.color"
849
844
  (valueChange)="updateState(categoryAxisLabelsColor, $event)"
850
845
  >
851
846
  </kendo-chartwizard-property-pane-form-field>
@@ -872,10 +867,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
872
867
  </form>
873
868
  </kendo-expansionpanel>
874
869
  </section>
875
- <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
870
+ <section *ngIf="stateService.state.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
876
871
  <kendo-expansionpanel
877
872
  [style.max-width.px]="576"
878
- [title]="stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
873
+ [title]="stateService.state.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
879
874
  [expanded]="true"
880
875
  >
881
876
  <form class="k-form k-form-md">
@@ -935,6 +930,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
935
930
  text="Font"
936
931
  inputType="comboBox"
937
932
  [data]="fontNames"
933
+ [colSpan]="2"
938
934
  placeholder="(Inherited font)"
939
935
  [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
940
936
  (valueChange)="updateState(valueAxisLabelsFontName, $event)"
@@ -952,7 +948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
952
948
  <kendo-chartwizard-property-pane-form-field
953
949
  text="Color"
954
950
  inputType="colorPicker"
955
- [value]="stateService.state.valueAxis[0]?.labels?.color || ''"
951
+ [value]="stateService.state.valueAxis[0]?.labels?.color"
956
952
  (valueChange)="updateState(valueAxisLabelsColor, $event)"
957
953
  >
958
954
  </kendo-chartwizard-property-pane-form-field>
@@ -18,11 +18,14 @@ export class ChartWizardSeriesTypeButtonComponent {
18
18
  }
19
19
  onSelect() {
20
20
  this.stateService.seriesType = this.seriesType;
21
- this.stateService.state = mergeStates(this.stateService.state, createState(this.stateService.data, this.stateService.seriesType));
22
- this.stateService.currentSeries = {};
23
- if (this.stack) {
24
- this.stateService.state = updateState(this.stateService.state, ActionTypes.stacked, this.stack);
21
+ if (this.stateService.data.length > 0) {
22
+ this.stateService.state = mergeStates(this.stateService.state, createState(this.stateService.data, this.stateService.seriesType));
23
+ this.stateService.currentSeries = {};
24
+ if (this.stack) {
25
+ this.stateService.state = updateState(this.stateService.state, ActionTypes.stacked, this.stack);
26
+ }
25
27
  }
28
+ this.stateService.dataTab.detectChanges();
26
29
  }
27
30
  isSelected() {
28
31
  if (this.stack?.type === '100%') {
@@ -16,7 +16,9 @@ export class StateService {
16
16
  series: [],
17
17
  initialSeries: [],
18
18
  columns: [],
19
- data: []
19
+ data: [],
20
+ area: { margin: { top: 0, right: 0, bottom: 0, left: 0 } },
21
+ seriesType: 'bar'
20
22
  };
21
23
  this.seriesType = 'bar';
22
24
  this.currentTitle = 'Chart Title';