@progress/kendo-angular-chart-wizard 21.4.1 → 22.0.0-develop.1

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 (31) hide show
  1. package/fesm2022/progress-kendo-angular-chart-wizard.mjs +44 -44
  2. package/localization/messages.d.ts +1 -1
  3. package/package.json +21 -29
  4. package/esm2022/chart-wizard-state.mjs +0 -57
  5. package/esm2022/chart-wizard.component.mjs +0 -1237
  6. package/esm2022/chart-wizard.module.mjs +0 -67
  7. package/esm2022/common/get-wizard-data-from-data-rows.mjs +0 -6
  8. package/esm2022/common/index.mjs +0 -5
  9. package/esm2022/common/models.mjs +0 -24
  10. package/esm2022/common/window-settings.mjs +0 -5
  11. package/esm2022/directives.mjs +0 -34
  12. package/esm2022/events/export-event.mjs +0 -37
  13. package/esm2022/events/index.mjs +0 -5
  14. package/esm2022/events/preventable-event.mjs +0 -28
  15. package/esm2022/grid-integration/get-grid-selected-rows.mjs +0 -50
  16. package/esm2022/grid-integration/get-wizard-data-from-grid-selection.mjs +0 -13
  17. package/esm2022/grid-integration/grid-chart-wizard.directive.mjs +0 -95
  18. package/esm2022/grid-integration/index.mjs +0 -7
  19. package/esm2022/index.mjs +0 -12
  20. package/esm2022/localization/chartwizard-localization.service.mjs +0 -31
  21. package/esm2022/localization/custom-messages.component.mjs +0 -52
  22. package/esm2022/localization/localized-messages.directive.mjs +0 -39
  23. package/esm2022/localization/messages.mjs +0 -657
  24. package/esm2022/package-metadata.mjs +0 -16
  25. package/esm2022/progress-kendo-angular-chart-wizard.mjs +0 -8
  26. package/esm2022/property-pane/chart-tab.component.mjs +0 -260
  27. package/esm2022/property-pane/data-tab.component.mjs +0 -270
  28. package/esm2022/property-pane/form-field.component.mjs +0 -296
  29. package/esm2022/property-pane/format-tab.component.mjs +0 -1032
  30. package/esm2022/series-type-button.component.mjs +0 -71
  31. package/esm2022/state.service.mjs +0 -36
package/esm2022/property-pane/format-tab.component.mjs DELETED
@@ -1,1032 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
6
- import { ActionTypes, fontNames, fontSizes, parseFont, updateState } from '../chart-wizard-state';
7
- import { StateService } from '../state.service';
8
- import { ChartWizardPropertyPaneFormFieldComponent } from './form-field.component';
9
- import { ExpansionPanelComponent } from '@progress/kendo-angular-layout';
10
- import { LabelComponent } from '@progress/kendo-angular-label';
11
- import { SwitchComponent } from '@progress/kendo-angular-inputs';
12
- import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
13
- import { defaultAllSeriesItem, defaultFormat, labelFormats } from '../common/models';
14
- import { ChartWizardLocalizationService } from '../localization/chartwizard-localization.service';
15
- import * as i0 from "@angular/core";
16
- import * as i1 from "../state.service";
17
- import * as i2 from "../localization/chartwizard-localization.service";
18
- /**
19
- * @hidden
20
- */
21
- export class ChartWizardPropertyPaneFormatTabComponent {
22
- stateService;
23
- localization;
24
- cdr;
25
- chartTitles;
26
- areaMarginLeft = ActionTypes.areaMarginLeft;
27
- areaMarginRight = ActionTypes.areaMarginRight;
28
- areaMarginTop = ActionTypes.areaMarginTop;
29
- areaMarginBottom = ActionTypes.areaMarginBottom;
30
- areaBackground = ActionTypes.areaBackground;
31
- legendVisible = ActionTypes.legendVisible;
32
- legendFontName = ActionTypes.legendFontName;
33
- legendFontSize = ActionTypes.legendFontSize;
34
- legendColor = ActionTypes.legendColor;
35
- legendPosition = ActionTypes.legendPosition;
36
- categoryAxisTitleText = ActionTypes.categoryAxisTitleText;
37
- categoryAxisTitleFontName = ActionTypes.categoryAxisTitleFontName;
38
- categoryAxisTitleFontSize = ActionTypes.categoryAxisTitleFontSize;
39
- categoryAxisTitleColor = ActionTypes.categoryAxisTitleColor;
40
- categoryAxisLabelsFontName = ActionTypes.categoryAxisLabelsFontName;
41
- categoryAxisLabelsFontSize = ActionTypes.categoryAxisLabelsFontSize;
42
- categoryAxisLabelsColor = ActionTypes.categoryAxisLabelsColor;
43
- categoryAxisLabelsRotation = ActionTypes.categoryAxisLabelsRotation;
44
- categoryAxisReverseOrder = ActionTypes.categoryAxisReverseOrder;
45
- valueAxisTitleText = ActionTypes.valueAxisTitleText;
46
- valueAxisTitleFontName = ActionTypes.valueAxisTitleFontName;
47
- valueAxisTitleFontSize = ActionTypes.valueAxisTitleFontSize;
48
- valueAxisTitleColor = ActionTypes.valueAxisTitleColor;
49
- valueAxisLabelsFontName = ActionTypes.valueAxisLabelsFontName;
50
- valueAxisLabelsFormat = ActionTypes.valueAxisLabelsFormat;
51
- valueAxisLabelsFontSize = ActionTypes.valueAxisLabelsFontSize;
52
- valueAxisLabelsColor = ActionTypes.valueAxisLabelsColor;
53
- valueAxisLabelsRotation = ActionTypes.valueAxisLabelsRotation;
54
- parseFont = parseFont;
55
- defaultAllSeriesItem = defaultAllSeriesItem;
56
- fontNames = fontNames;
57
- fontSizes = fontSizes;
58
- labelFormats;
59
- legendPositions;
60
- labelsCategoryAxisRotation;
61
- labelsValueAxisRotation;
62
- get chartTitleTypeText() {
63
- return this.stateService.currentTitle === 'Chart Title'
64
- ? this.stateService.state.title?.text
65
- : this.stateService.state.subtitle?.text;
66
- }
67
- get chartTitleTypeFont() {
68
- return this.stateService.currentTitle === 'Chart Title'
69
- ? parseFont(this.stateService.state.title?.font).name
70
- : parseFont(this.stateService.state.subtitle?.font).name;
71
- }
72
- get chartTitleTypeFontSize() {
73
- return this.stateService.currentTitle === 'Chart Title'
74
- ? parseFont(this.stateService.state.title?.font).size
75
- : parseFont(this.stateService.state.subtitle?.font).size;
76
- }
77
- get chartTitleTypeColor() {
78
- return this.stateService.currentTitle === 'Chart Title'
79
- ? this.stateService.state.title?.color
80
- : this.stateService.state.subtitle?.color;
81
- }
82
- get chartTitleTypeAction() {
83
- return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleText : ActionTypes.subtitleText;
84
- }
85
- get chartTitleTypeFontAction() {
86
- return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleFontName : ActionTypes.subtitleFontName;
87
- }
88
- get chartTitleTypeColorAction() {
89
- return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleColor : ActionTypes.subtitleColor;
90
- }
91
- get chartTitleTypeFontSizeAction() {
92
- return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleFontSize : ActionTypes.subtitleFontSize;
93
- }
94
- get seriesData() {
95
- return [
96
- { text: this.messageFor('formatSeriesAllSeries'), name: 'All Series' },
97
- ...this.stateService.state.series.map(item => ({ text: item.name, ...item }))
98
- ];
99
- }
100
- get showLabels() {
101
- 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);
102
- }
103
- get labelFormatValue() {
104
- return labelFormats.find(f => f.value === this.stateService.state.valueAxis[0]?.labels?.format)?.value || defaultFormat.value;
105
- }
106
- constructor(stateService, localization, cdr) {
107
- this.stateService = stateService;
108
- this.localization = localization;
109
- this.cdr = cdr;
110
- this.labelFormats = [
111
- { value: '', text: this.messageFor('formatValueAxisLabelsFormatText') },
112
- { value: 'n0', text: this.messageFor('formatValueAxisLabelsFormatNumber') },
113
- { value: 'c0', text: this.messageFor('formatValueAxisLabelsFormatCurrency') },
114
- { value: 'p0', text: this.messageFor('formatValueAxisLabelsFormatPercent') }
115
- ];
116
- this.legendPositions = [
117
- { text: this.messageFor('formatLegendPositionTop'), value: 'top' },
118
- { text: this.messageFor('formatLegendPositionBottom'), value: 'bottom' },
119
- { text: this.messageFor('formatLegendPositionLeft'), value: 'left' },
120
- { text: this.messageFor('formatLegendPositionRight'), value: 'right' }
121
- ];
122
- this.labelsCategoryAxisRotation = [
123
- { text: this.messageFor('formatCategoryAxisLabelsRotationAuto'), value: 'auto' },
124
- { text: '0°', value: 0 },
125
- { text: '45°', value: 45 },
126
- { text: '90°', value: 90 },
127
- { text: '135°', value: 135 },
128
- { text: '180°', value: 180 }
129
- ];
130
- this.labelsValueAxisRotation = [
131
- { text: this.messageFor('formatValueAxisLabelsRotationAuto'), value: 'auto' },
132
- { text: '0°', value: 0 },
133
- { text: '45°', value: 45 },
134
- { text: '90°', value: 90 },
135
- { text: '135°', value: 135 },
136
- { text: '180°', value: 180 }
137
- ];
138
- this.chartTitles = [
139
- { text: this.messageFor('formatTitleChartTitle'), value: 'Chart Title' },
140
- { text: this.messageFor('formatTitleChartSubtitle'), value: 'Chart Subtitle' },
141
- ];
142
- }
143
- ngAfterViewChecked() {
144
- this.localization.changes.subscribe(() => {
145
- this.cdr.detectChanges();
146
- });
147
- }
148
- ngOnDestroy() {
149
- this.localization.changes.unsubscribe();
150
- }
151
- updateState(action, value) {
152
- if (action === ActionTypes.seriesLabel && this.stateService.currentSeries.name === defaultAllSeriesItem.name) {
153
- this.stateService.state = updateState(this.stateService.state, action, { name: '', all: true, visible: value.labels.visible });
154
- return;
155
- }
156
- this.stateService.state = updateState(this.stateService.state, action, value);
157
- }
158
- changeCurrentTitle(value) {
159
- this.stateService.currentTitle = value;
160
- }
161
- toggleSeriesLabels(value) {
162
- this.updateCurrentSeries(this.stateService.currentSeries);
163
- this.stateService.currentSeries.labels = { visible: value };
164
- this.updateState(ActionTypes.seriesLabel, this.stateService.currentSeries);
165
- }
166
- updateCurrentSeries(value) {
167
- if (value.name === defaultAllSeriesItem.name) {
168
- this.stateService.currentSeries = defaultAllSeriesItem;
169
- }
170
- else {
171
- this.stateService.currentSeries = this.stateService.state.series.find((series) => series.name === value.name);
172
- }
173
- }
174
- updateSeriesColor(value) {
175
- this.updateCurrentSeries(this.stateService.currentSeries);
176
- this.stateService.currentSeries.color = value;
177
- this.updateState(ActionTypes.seriesColor, this.stateService.currentSeries);
178
- }
179
- messageFor(key) {
180
- return this.localization.get(key);
181
- }
182
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, deps: [{ token: i1.StateService }, { token: i2.ChartWizardLocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
183
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChartWizardPropertyPaneFormatTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-format-tab", ngImport: i0, template: `
184
- <section>
185
- <kendo-expansionpanel
186
- [style.max-width.px]="576"
187
- [title]="messageFor('formatChartArea')"
188
- [expanded]="true"
189
- [attr.dir]="stateService.direction"
190
- >
191
- <form class="k-form k-form-md">
192
- <fieldset class="k-form-fieldset">
193
- <legend class="k-form-legend">{{ messageFor('formatChartAreaMargins') }}</legend>
194
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
195
- <kendo-chartwizard-property-pane-form-field
196
- [text]="messageFor('formatChartAreaMarginsLeft')"
197
- inputType="numeric"
198
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
199
- [value]="$any(stateService.state.area.margin).left"
200
- (valueChange)="updateState(areaMarginLeft, $event)"
201
- >
202
- </kendo-chartwizard-property-pane-form-field>
203
- <kendo-chartwizard-property-pane-form-field
204
- [text]="messageFor('formatChartAreaMarginsRight')"
205
- inputType="numeric"
206
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
207
- [value]="$any(stateService.state.area.margin).right"
208
- (valueChange)="updateState(areaMarginRight, $event)"
209
- >
210
- </kendo-chartwizard-property-pane-form-field>
211
- <kendo-chartwizard-property-pane-form-field
212
- [text]="messageFor('formatChartAreaMarginsTop')"
213
- inputType="numeric"
214
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
215
- [value]="$any(stateService.state.area.margin).top"
216
- (valueChange)="updateState(areaMarginTop, $event)"
217
- >
218
- </kendo-chartwizard-property-pane-form-field>
219
- <kendo-chartwizard-property-pane-form-field
220
- [text]="messageFor('formatChartAreaMarginsBottom')"
221
- inputType="numeric"
222
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
223
- [value]="$any(stateService.state.area.margin).bottom"
224
- (valueChange)="updateState(areaMarginBottom, $event)"
225
- >
226
- </kendo-chartwizard-property-pane-form-field>
227
- </div>
228
- </fieldset>
229
- <fieldset class="k-form-fieldset">
230
- <legend class="k-form-legend">{{ messageFor('formatChartAreaBackground') }}</legend>
231
- <kendo-chartwizard-property-pane-form-field
232
- [text]="messageFor('formatChartAreaBackgroundColor')"
233
- inputType="colorPicker"
234
- [value]="stateService.state.area?.background"
235
- (valueChange)="updateState(areaBackground, $event)"
236
- >
237
- </kendo-chartwizard-property-pane-form-field>
238
- </fieldset>
239
- </form>
240
- </kendo-expansionpanel>
241
- </section>
242
- <section>
243
- <kendo-expansionpanel
244
- [style.max-width.px]="576"
245
- [title]="messageFor('formatTitle')"
246
- [expanded]="true"
247
- >
248
- <form class="k-form k-form-md">
249
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
250
- <kendo-chartwizard-property-pane-form-field
251
- [text]="messageFor('formatTitleApplyTo')"
252
- inputType="dropDownList"
253
- [data]="chartTitles"
254
- [colSpan]="2"
255
- [value]="stateService.currentTitle"
256
- (valueChange)="changeCurrentTitle($event)"
257
- >
258
- </kendo-chartwizard-property-pane-form-field>
259
- <kendo-chartwizard-property-pane-form-field
260
- [text]="messageFor('formatTitleLabel')"
261
- inputType="text"
262
- [colSpan]="2"
263
- [value]="chartTitleTypeText"
264
- (valueChange)="updateState(chartTitleTypeAction, $event)"
265
- >
266
- </kendo-chartwizard-property-pane-form-field>
267
- <kendo-chartwizard-property-pane-form-field
268
- [text]="messageFor('formatTitleFont')"
269
- inputType="comboBox"
270
- [data]="fontNames"
271
- [colSpan]="2"
272
- [value]="chartTitleTypeFont"
273
- [placeholder]="messageFor('formatTitleFontPlaceholder')"
274
- (valueChange)="updateState(chartTitleTypeFontAction, $event)"
275
- >
276
- </kendo-chartwizard-property-pane-form-field>
277
- <kendo-chartwizard-property-pane-form-field
278
- [text]="messageFor('formatTitleSize')"
279
- inputType="comboBox"
280
- [placeholder]="messageFor('formatTitleSizePlaceholder')"
281
- [data]="fontSizes"
282
- [value]="chartTitleTypeFontSize"
283
- (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
284
- >
285
- </kendo-chartwizard-property-pane-form-field>
286
- <kendo-chartwizard-property-pane-form-field
287
- [text]="messageFor('formatTitleColor')"
288
- inputType="colorPicker"
289
- [value]="chartTitleTypeColor"
290
- (valueChange)="updateState(chartTitleTypeColorAction, $event)"
291
- >
292
- </kendo-chartwizard-property-pane-form-field>
293
- </div>
294
- </form>
295
- </kendo-expansionpanel>
296
- </section>
297
- <section>
298
- <kendo-expansionpanel
299
- [style.max-width.px]="576"
300
- [title]="messageFor('formatLegend')"
301
- [expanded]="true"
302
- >
303
- <form class="k-form k-form-md">
304
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
305
- <kendo-label [for]="toggleLegend" [text]="messageFor('formatLegendShowLegend')"></kendo-label>
306
- <kendo-switch
307
- #toggleLegend
308
- onLabel="On"
309
- offLabel="Off"
310
- thumbRounded="full"
311
- size="medium"
312
- [checked]="stateService.state.legend?.visible"
313
- (valueChange)="updateState(legendVisible, $event)"
314
- ></kendo-switch>
315
- <kendo-chartwizard-property-pane-form-field
316
- [text]="messageFor('formatLegendFont')"
317
- inputType="comboBox"
318
- [data]="fontNames"
319
- [colSpan]="2"
320
- [placeholder]="messageFor('formatLegendFontPlaceholder')"
321
- [value]="parseFont(stateService.state.legend?.labels?.font).name"
322
- (valueChange)="updateState(legendFontName, $event)"
323
- >
324
- </kendo-chartwizard-property-pane-form-field>
325
- <kendo-chartwizard-property-pane-form-field
326
- [text]="messageFor('formatLegendSize')"
327
- inputType="comboBox"
328
- [data]="fontSizes"
329
- [placeholder]="messageFor('formatLegendSizePlaceholder')"
330
- [value]="parseFont(stateService.state.legend?.labels?.font).size"
331
- (valueChange)="updateState(legendFontSize, $event)"
332
- >
333
- </kendo-chartwizard-property-pane-form-field>
334
- <kendo-chartwizard-property-pane-form-field
335
- [text]="messageFor('formatLegendColor')"
336
- inputType="colorPicker"
337
- [value]="stateService.state.legend?.labels?.color"
338
- (valueChange)="updateState(legendColor, $event)"
339
- >
340
- </kendo-chartwizard-property-pane-form-field>
341
- <kendo-chartwizard-property-pane-form-field
342
- [text]="messageFor('formatLegendPosition')"
343
- inputType="dropDownList"
344
- [colSpan]="2"
345
- [data]="legendPositions"
346
- [value]="stateService.state.legend?.position"
347
- (valueChange)="updateState(legendPosition, $event)"
348
- >
349
- </kendo-chartwizard-property-pane-form-field>
350
- </div>
351
- </form>
352
- </kendo-expansionpanel>
353
- </section>
354
- <section>
355
- <kendo-expansionpanel
356
- [style.max-width.px]="576"
357
- [title]="messageFor('formatSeries')"
358
- [expanded]="true"
359
- >
360
- <form class="k-form k-form-md">
361
- <div class="k-form-field">
362
- <kendo-label [for]="seriesDropDown" class="k-form-label" [text]="messageFor('formatSeriesApplyTo')"></kendo-label>
363
- <div class="k-form-field-wrap">
364
- <kendo-dropdownlist
365
- #seriesDropDown
366
- [data]="seriesData"
367
- textField="text"
368
- valueField="name"
369
- fillMode="outline"
370
- rounded="medium"
371
- size="medium"
372
- [value]="stateService.currentSeries"
373
- (valueChange)="updateCurrentSeries($event)"
374
- ></kendo-dropdownlist>
375
- </div>
376
- </div>
377
-
378
- <kendo-chartwizard-property-pane-form-field
379
- [text]="messageFor('formatSeriesColor')"
380
- [value]="stateService.currentSeries?.color"
381
- inputType="colorPicker"
382
- [disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
383
- (valueChange)="updateSeriesColor($event)"
384
- >
385
- </kendo-chartwizard-property-pane-form-field>
386
- <kendo-chartwizard-property-pane-form-field
387
- [text]="messageFor('formatSeriesShowLabels')"
388
- [value]="showLabels"
389
- [isLabelInsideFormFieldWrap]="true"
390
- [colSpan]="2"
391
- inputType="checkbox"
392
- (valueChange)="toggleSeriesLabels($event)"
393
- >
394
- </kendo-chartwizard-property-pane-form-field>
395
- </form>
396
- </kendo-expansionpanel>
397
- </section>
398
- @if (stateService.state.seriesType !== 'pie') {
399
- <section class="k-row-start-1 k-row-end-3 k-col-start-3">
400
- <kendo-expansionpanel
401
- [style.max-width.px]="576"
402
- [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatXAxis') : messageFor('formatCategoryAxis')"
403
- [expanded]="true"
404
- >
405
- <form class="k-form k-form-md">
406
- <fieldset class="k-form-fieldset">
407
- <legend class="k-form-legend">{{ messageFor('formatCategoryAxisTitle') }}</legend>
408
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
409
- <kendo-chartwizard-property-pane-form-field
410
- inputType="text"
411
- [hasLabel]="false"
412
- [colSpan]="2"
413
- [placeholder]="messageFor('formatCategoryAxisTitlePlaceholder')"
414
- [value]="stateService.state.categoryAxis[0]?.title?.text || null"
415
- (valueChange)="updateState(categoryAxisTitleText, $event)"
416
- >
417
- </kendo-chartwizard-property-pane-form-field>
418
- <kendo-chartwizard-property-pane-form-field
419
- [text]="messageFor('formatCategoryAxisTitleFont')"
420
- inputType="comboBox"
421
- [data]="fontNames"
422
- [colSpan]="2"
423
- [placeholder]="messageFor('formatCategoryAxisTitleFontPlaceholder')"
424
- [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
425
- (valueChange)="updateState(categoryAxisTitleFontName, $event)"
426
- >
427
- </kendo-chartwizard-property-pane-form-field>
428
- <kendo-chartwizard-property-pane-form-field
429
- [text]="messageFor('formatCategoryAxisTitleSize')"
430
- inputType="comboBox"
431
- [placeholder]="messageFor('formatCategoryAxisTitleSizePlaceholder')"
432
- [data]="fontSizes"
433
- [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
434
- (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
435
- >
436
- </kendo-chartwizard-property-pane-form-field>
437
- <kendo-chartwizard-property-pane-form-field
438
- [text]="messageFor('formatCategoryAxisTitleColor')"
439
- inputType="colorPicker"
440
- [value]="stateService.state.categoryAxis[0]?.title?.color"
441
- (valueChange)="updateState(categoryAxisTitleColor, $event)"
442
- >
443
- </kendo-chartwizard-property-pane-form-field>
444
- </div>
445
- </fieldset>
446
- <fieldset class="k-form-fieldset">
447
- <legend class="k-form-legend">{{ messageFor('formatCategoryAxisLabels') }}</legend>
448
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
449
- <kendo-chartwizard-property-pane-form-field
450
- [text]="messageFor('formatCategoryAxisLabelsFont')"
451
- inputType="comboBox"
452
- [data]="fontNames"
453
- [colSpan]="2"
454
- [placeholder]="messageFor('formatCategoryAxisLabelsFontPlaceholder')"
455
- [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
456
- (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
457
- >
458
- </kendo-chartwizard-property-pane-form-field>
459
- <kendo-chartwizard-property-pane-form-field
460
- [text]="messageFor('formatCategoryAxisLabelsSize')"
461
- inputType="comboBox"
462
- [data]="fontSizes"
463
- [placeholder]="messageFor('formatCategoryAxisLabelsSizePlaceholder')"
464
- [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
465
- (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
466
- >
467
- </kendo-chartwizard-property-pane-form-field>
468
- <kendo-chartwizard-property-pane-form-field
469
- [text]="messageFor('formatCategoryAxisLabelsColor')"
470
- inputType="colorPicker"
471
- [value]="stateService.state.categoryAxis[0]?.labels?.color"
472
- (valueChange)="updateState(categoryAxisLabelsColor, $event)"
473
- >
474
- </kendo-chartwizard-property-pane-form-field>
475
- <kendo-chartwizard-property-pane-form-field
476
- [text]="messageFor('formatCategoryAxisLabelsRotation')"
477
- inputType="dropDownList"
478
- [data]="labelsCategoryAxisRotation"
479
- [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
480
- (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
481
- >
482
- </kendo-chartwizard-property-pane-form-field>
483
- <span></span>
484
- <kendo-chartwizard-property-pane-form-field
485
- [text]="messageFor('formatCategoryAxisLabelsReverseOrder')"
486
- [isLabelInsideFormFieldWrap]="true"
487
- inputType="checkbox"
488
- [colSpan]="2"
489
- [value]="stateService.state.categoryAxis[0]?.reverse"
490
- (valueChange)="updateState(categoryAxisReverseOrder, $event)"
491
- >
492
- </kendo-chartwizard-property-pane-form-field>
493
- </div>
494
- </fieldset>
495
- </form>
496
- </kendo-expansionpanel>
497
- </section>
498
- }
499
- @if (stateService.state.seriesType !== 'pie') {
500
- <section class="k-row-start-1 k-row-end-3 k-col-start-4">
501
- <kendo-expansionpanel
502
- [style.max-width.px]="576"
503
- [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatYAxis') : messageFor('formatValueAxis')"
504
- [expanded]="true"
505
- >
506
- <form class="k-form k-form-md">
507
- <fieldset class="k-form-fieldset">
508
- <legend class="k-form-legend">{{ messageFor('formatValueAxisTitle') }}</legend>
509
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
510
- <kendo-chartwizard-property-pane-form-field
511
- inputType="text"
512
- [hasLabel]="false"
513
- [colSpan]="2"
514
- [placeholder]="messageFor('formatValueAxisTitlePlaceholder')"
515
- [value]="stateService.state.valueAxis[0]?.title?.text || null"
516
- (valueChange)="updateState(valueAxisTitleText, $event)"
517
- >
518
- </kendo-chartwizard-property-pane-form-field>
519
- <kendo-chartwizard-property-pane-form-field
520
- [text]="messageFor('formatValueAxisTitleFont')"
521
- inputType="comboBox"
522
- [colSpan]="2"
523
- [data]="fontNames"
524
- [placeholder]="messageFor('formatValueAxisTitleFontPlaceholder')"
525
- [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
526
- (valueChange)="updateState(valueAxisTitleFontName, $event)"
527
- >
528
- </kendo-chartwizard-property-pane-form-field>
529
- <kendo-chartwizard-property-pane-form-field
530
- [text]="messageFor('formatValueAxisTitleSize')"
531
- inputType="comboBox"
532
- [placeholder]="messageFor('formatValueAxisTitleSizePlaceholder')"
533
- [data]="fontSizes"
534
- [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
535
- (valueChange)="updateState(valueAxisTitleFontSize, $event)"
536
- >
537
- </kendo-chartwizard-property-pane-form-field>
538
- <kendo-chartwizard-property-pane-form-field
539
- [text]="messageFor('formatValueAxisTitleColor')"
540
- inputType="colorPicker"
541
- [value]="stateService.state.valueAxis[0]?.title?.color"
542
- (valueChange)="updateState(valueAxisTitleColor, $event)"
543
- >
544
- </kendo-chartwizard-property-pane-form-field>
545
- </div>
546
- </fieldset>
547
- <fieldset class="k-form-fieldset">
548
- <legend class="k-form-legend">{{ messageFor('formatValueAxisLabels') }}</legend>
549
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
550
- <kendo-chartwizard-property-pane-form-field
551
- [text]="messageFor('formatValueAxisLabelsFormat')"
552
- [colSpan]="2"
553
- inputType="dropDownList"
554
- [data]="labelFormats"
555
- [value]="labelFormatValue"
556
- (valueChange)="updateState(valueAxisLabelsFormat, $event)"
557
- >
558
- </kendo-chartwizard-property-pane-form-field>
559
- <kendo-chartwizard-property-pane-form-field
560
- [text]="messageFor('formatValueAxisLabelsFont')"
561
- inputType="comboBox"
562
- [data]="fontNames"
563
- [colSpan]="2"
564
- [placeholder]="messageFor('formatValueAxisLabelsFontPlaceholder')"
565
- [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
566
- (valueChange)="updateState(valueAxisLabelsFontName, $event)"
567
- >
568
- </kendo-chartwizard-property-pane-form-field>
569
- <kendo-chartwizard-property-pane-form-field
570
- [text]="messageFor('formatValueAxisLabelsSize')"
571
- inputType="comboBox"
572
- [data]="fontSizes"
573
- [placeholder]="messageFor('formatValueAxisLabelsSizePlaceholder')"
574
- [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
575
- (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
576
- >
577
- </kendo-chartwizard-property-pane-form-field>
578
- <kendo-chartwizard-property-pane-form-field
579
- [text]="messageFor('formatValueAxisLabelsColor')"
580
- inputType="colorPicker"
581
- [value]="stateService.state.valueAxis[0]?.labels?.color"
582
- (valueChange)="updateState(valueAxisLabelsColor, $event)"
583
- >
584
- </kendo-chartwizard-property-pane-form-field>
585
- <kendo-chartwizard-property-pane-form-field
586
- [text]="messageFor('formatValueAxisLabelsRotation')"
587
- inputType="dropDownList"
588
- [data]="labelsValueAxisRotation"
589
- [value]="stateService.state.valueAxis[0]?.labels?.rotation"
590
- (valueChange)="updateState(valueAxisLabelsRotation, $event)"
591
- >
592
- </kendo-chartwizard-property-pane-form-field>
593
- </div>
594
- </fieldset>
595
- </form>
596
- </kendo-expansionpanel>
597
- </section>
598
- }
599
- `, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: ChartWizardPropertyPaneFormFieldComponent, selector: "kendo-chartwizard-property-pane-form-field", inputs: ["currentState", "action", "class", "inputType", "text", "data", "placeholder", "colSpan", "hasLabel", "isLabelInsideFormFieldWrap", "value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
600
- }
601
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, decorators: [{
602
- type: Component,
603
- args: [{
604
- selector: 'kendo-chartwizard-property-pane-format-tab',
605
- changeDetection: ChangeDetectionStrategy.OnPush,
606
- template: `
607
- <section>
608
- <kendo-expansionpanel
609
- [style.max-width.px]="576"
610
- [title]="messageFor('formatChartArea')"
611
- [expanded]="true"
612
- [attr.dir]="stateService.direction"
613
- >
614
- <form class="k-form k-form-md">
615
- <fieldset class="k-form-fieldset">
616
- <legend class="k-form-legend">{{ messageFor('formatChartAreaMargins') }}</legend>
617
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
618
- <kendo-chartwizard-property-pane-form-field
619
- [text]="messageFor('formatChartAreaMarginsLeft')"
620
- inputType="numeric"
621
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
622
- [value]="$any(stateService.state.area.margin).left"
623
- (valueChange)="updateState(areaMarginLeft, $event)"
624
- >
625
- </kendo-chartwizard-property-pane-form-field>
626
- <kendo-chartwizard-property-pane-form-field
627
- [text]="messageFor('formatChartAreaMarginsRight')"
628
- inputType="numeric"
629
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
630
- [value]="$any(stateService.state.area.margin).right"
631
- (valueChange)="updateState(areaMarginRight, $event)"
632
- >
633
- </kendo-chartwizard-property-pane-form-field>
634
- <kendo-chartwizard-property-pane-form-field
635
- [text]="messageFor('formatChartAreaMarginsTop')"
636
- inputType="numeric"
637
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
638
- [value]="$any(stateService.state.area.margin).top"
639
- (valueChange)="updateState(areaMarginTop, $event)"
640
- >
641
- </kendo-chartwizard-property-pane-form-field>
642
- <kendo-chartwizard-property-pane-form-field
643
- [text]="messageFor('formatChartAreaMarginsBottom')"
644
- inputType="numeric"
645
- [placeholder]="messageFor('formatChartAreaMarginsAuto')"
646
- [value]="$any(stateService.state.area.margin).bottom"
647
- (valueChange)="updateState(areaMarginBottom, $event)"
648
- >
649
- </kendo-chartwizard-property-pane-form-field>
650
- </div>
651
- </fieldset>
652
- <fieldset class="k-form-fieldset">
653
- <legend class="k-form-legend">{{ messageFor('formatChartAreaBackground') }}</legend>
654
- <kendo-chartwizard-property-pane-form-field
655
- [text]="messageFor('formatChartAreaBackgroundColor')"
656
- inputType="colorPicker"
657
- [value]="stateService.state.area?.background"
658
- (valueChange)="updateState(areaBackground, $event)"
659
- >
660
- </kendo-chartwizard-property-pane-form-field>
661
- </fieldset>
662
- </form>
663
- </kendo-expansionpanel>
664
- </section>
665
- <section>
666
- <kendo-expansionpanel
667
- [style.max-width.px]="576"
668
- [title]="messageFor('formatTitle')"
669
- [expanded]="true"
670
- >
671
- <form class="k-form k-form-md">
672
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
673
- <kendo-chartwizard-property-pane-form-field
674
- [text]="messageFor('formatTitleApplyTo')"
675
- inputType="dropDownList"
676
- [data]="chartTitles"
677
- [colSpan]="2"
678
- [value]="stateService.currentTitle"
679
- (valueChange)="changeCurrentTitle($event)"
680
- >
681
- </kendo-chartwizard-property-pane-form-field>
682
- <kendo-chartwizard-property-pane-form-field
683
- [text]="messageFor('formatTitleLabel')"
684
- inputType="text"
685
- [colSpan]="2"
686
- [value]="chartTitleTypeText"
687
- (valueChange)="updateState(chartTitleTypeAction, $event)"
688
- >
689
- </kendo-chartwizard-property-pane-form-field>
690
- <kendo-chartwizard-property-pane-form-field
691
- [text]="messageFor('formatTitleFont')"
692
- inputType="comboBox"
693
- [data]="fontNames"
694
- [colSpan]="2"
695
- [value]="chartTitleTypeFont"
696
- [placeholder]="messageFor('formatTitleFontPlaceholder')"
697
- (valueChange)="updateState(chartTitleTypeFontAction, $event)"
698
- >
699
- </kendo-chartwizard-property-pane-form-field>
700
- <kendo-chartwizard-property-pane-form-field
701
- [text]="messageFor('formatTitleSize')"
702
- inputType="comboBox"
703
- [placeholder]="messageFor('formatTitleSizePlaceholder')"
704
- [data]="fontSizes"
705
- [value]="chartTitleTypeFontSize"
706
- (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
707
- >
708
- </kendo-chartwizard-property-pane-form-field>
709
- <kendo-chartwizard-property-pane-form-field
710
- [text]="messageFor('formatTitleColor')"
711
- inputType="colorPicker"
712
- [value]="chartTitleTypeColor"
713
- (valueChange)="updateState(chartTitleTypeColorAction, $event)"
714
- >
715
- </kendo-chartwizard-property-pane-form-field>
716
- </div>
717
- </form>
718
- </kendo-expansionpanel>
719
- </section>
720
- <section>
721
- <kendo-expansionpanel
722
- [style.max-width.px]="576"
723
- [title]="messageFor('formatLegend')"
724
- [expanded]="true"
725
- >
726
- <form class="k-form k-form-md">
727
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
728
- <kendo-label [for]="toggleLegend" [text]="messageFor('formatLegendShowLegend')"></kendo-label>
729
- <kendo-switch
730
- #toggleLegend
731
- onLabel="On"
732
- offLabel="Off"
733
- thumbRounded="full"
734
- size="medium"
735
- [checked]="stateService.state.legend?.visible"
736
- (valueChange)="updateState(legendVisible, $event)"
737
- ></kendo-switch>
738
- <kendo-chartwizard-property-pane-form-field
739
- [text]="messageFor('formatLegendFont')"
740
- inputType="comboBox"
741
- [data]="fontNames"
742
- [colSpan]="2"
743
- [placeholder]="messageFor('formatLegendFontPlaceholder')"
744
- [value]="parseFont(stateService.state.legend?.labels?.font).name"
745
- (valueChange)="updateState(legendFontName, $event)"
746
- >
747
- </kendo-chartwizard-property-pane-form-field>
748
- <kendo-chartwizard-property-pane-form-field
749
- [text]="messageFor('formatLegendSize')"
750
- inputType="comboBox"
751
- [data]="fontSizes"
752
- [placeholder]="messageFor('formatLegendSizePlaceholder')"
753
- [value]="parseFont(stateService.state.legend?.labels?.font).size"
754
- (valueChange)="updateState(legendFontSize, $event)"
755
- >
756
- </kendo-chartwizard-property-pane-form-field>
757
- <kendo-chartwizard-property-pane-form-field
758
- [text]="messageFor('formatLegendColor')"
759
- inputType="colorPicker"
760
- [value]="stateService.state.legend?.labels?.color"
761
- (valueChange)="updateState(legendColor, $event)"
762
- >
763
- </kendo-chartwizard-property-pane-form-field>
764
- <kendo-chartwizard-property-pane-form-field
765
- [text]="messageFor('formatLegendPosition')"
766
- inputType="dropDownList"
767
- [colSpan]="2"
768
- [data]="legendPositions"
769
- [value]="stateService.state.legend?.position"
770
- (valueChange)="updateState(legendPosition, $event)"
771
- >
772
- </kendo-chartwizard-property-pane-form-field>
773
- </div>
774
- </form>
775
- </kendo-expansionpanel>
776
- </section>
777
- <section>
778
- <kendo-expansionpanel
779
- [style.max-width.px]="576"
780
- [title]="messageFor('formatSeries')"
781
- [expanded]="true"
782
- >
783
- <form class="k-form k-form-md">
784
- <div class="k-form-field">
785
- <kendo-label [for]="seriesDropDown" class="k-form-label" [text]="messageFor('formatSeriesApplyTo')"></kendo-label>
786
- <div class="k-form-field-wrap">
787
- <kendo-dropdownlist
788
- #seriesDropDown
789
- [data]="seriesData"
790
- textField="text"
791
- valueField="name"
792
- fillMode="outline"
793
- rounded="medium"
794
- size="medium"
795
- [value]="stateService.currentSeries"
796
- (valueChange)="updateCurrentSeries($event)"
797
- ></kendo-dropdownlist>
798
- </div>
799
- </div>
800
-
801
- <kendo-chartwizard-property-pane-form-field
802
- [text]="messageFor('formatSeriesColor')"
803
- [value]="stateService.currentSeries?.color"
804
- inputType="colorPicker"
805
- [disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
806
- (valueChange)="updateSeriesColor($event)"
807
- >
808
- </kendo-chartwizard-property-pane-form-field>
809
- <kendo-chartwizard-property-pane-form-field
810
- [text]="messageFor('formatSeriesShowLabels')"
811
- [value]="showLabels"
812
- [isLabelInsideFormFieldWrap]="true"
813
- [colSpan]="2"
814
- inputType="checkbox"
815
- (valueChange)="toggleSeriesLabels($event)"
816
- >
817
- </kendo-chartwizard-property-pane-form-field>
818
- </form>
819
- </kendo-expansionpanel>
820
- </section>
821
- @if (stateService.state.seriesType !== 'pie') {
822
- <section class="k-row-start-1 k-row-end-3 k-col-start-3">
823
- <kendo-expansionpanel
824
- [style.max-width.px]="576"
825
- [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatXAxis') : messageFor('formatCategoryAxis')"
826
- [expanded]="true"
827
- >
828
- <form class="k-form k-form-md">
829
- <fieldset class="k-form-fieldset">
830
- <legend class="k-form-legend">{{ messageFor('formatCategoryAxisTitle') }}</legend>
831
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
832
- <kendo-chartwizard-property-pane-form-field
833
- inputType="text"
834
- [hasLabel]="false"
835
- [colSpan]="2"
836
- [placeholder]="messageFor('formatCategoryAxisTitlePlaceholder')"
837
- [value]="stateService.state.categoryAxis[0]?.title?.text || null"
838
- (valueChange)="updateState(categoryAxisTitleText, $event)"
839
- >
840
- </kendo-chartwizard-property-pane-form-field>
841
- <kendo-chartwizard-property-pane-form-field
842
- [text]="messageFor('formatCategoryAxisTitleFont')"
843
- inputType="comboBox"
844
- [data]="fontNames"
845
- [colSpan]="2"
846
- [placeholder]="messageFor('formatCategoryAxisTitleFontPlaceholder')"
847
- [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
848
- (valueChange)="updateState(categoryAxisTitleFontName, $event)"
849
- >
850
- </kendo-chartwizard-property-pane-form-field>
851
- <kendo-chartwizard-property-pane-form-field
852
- [text]="messageFor('formatCategoryAxisTitleSize')"
853
- inputType="comboBox"
854
- [placeholder]="messageFor('formatCategoryAxisTitleSizePlaceholder')"
855
- [data]="fontSizes"
856
- [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
857
- (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
858
- >
859
- </kendo-chartwizard-property-pane-form-field>
860
- <kendo-chartwizard-property-pane-form-field
861
- [text]="messageFor('formatCategoryAxisTitleColor')"
862
- inputType="colorPicker"
863
- [value]="stateService.state.categoryAxis[0]?.title?.color"
864
- (valueChange)="updateState(categoryAxisTitleColor, $event)"
865
- >
866
- </kendo-chartwizard-property-pane-form-field>
867
- </div>
868
- </fieldset>
869
- <fieldset class="k-form-fieldset">
870
- <legend class="k-form-legend">{{ messageFor('formatCategoryAxisLabels') }}</legend>
871
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
872
- <kendo-chartwizard-property-pane-form-field
873
- [text]="messageFor('formatCategoryAxisLabelsFont')"
874
- inputType="comboBox"
875
- [data]="fontNames"
876
- [colSpan]="2"
877
- [placeholder]="messageFor('formatCategoryAxisLabelsFontPlaceholder')"
878
- [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
879
- (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
880
- >
881
- </kendo-chartwizard-property-pane-form-field>
882
- <kendo-chartwizard-property-pane-form-field
883
- [text]="messageFor('formatCategoryAxisLabelsSize')"
884
- inputType="comboBox"
885
- [data]="fontSizes"
886
- [placeholder]="messageFor('formatCategoryAxisLabelsSizePlaceholder')"
887
- [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
888
- (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
889
- >
890
- </kendo-chartwizard-property-pane-form-field>
891
- <kendo-chartwizard-property-pane-form-field
892
- [text]="messageFor('formatCategoryAxisLabelsColor')"
893
- inputType="colorPicker"
894
- [value]="stateService.state.categoryAxis[0]?.labels?.color"
895
- (valueChange)="updateState(categoryAxisLabelsColor, $event)"
896
- >
897
- </kendo-chartwizard-property-pane-form-field>
898
- <kendo-chartwizard-property-pane-form-field
899
- [text]="messageFor('formatCategoryAxisLabelsRotation')"
900
- inputType="dropDownList"
901
- [data]="labelsCategoryAxisRotation"
902
- [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
903
- (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
904
- >
905
- </kendo-chartwizard-property-pane-form-field>
906
- <span></span>
907
- <kendo-chartwizard-property-pane-form-field
908
- [text]="messageFor('formatCategoryAxisLabelsReverseOrder')"
909
- [isLabelInsideFormFieldWrap]="true"
910
- inputType="checkbox"
911
- [colSpan]="2"
912
- [value]="stateService.state.categoryAxis[0]?.reverse"
913
- (valueChange)="updateState(categoryAxisReverseOrder, $event)"
914
- >
915
- </kendo-chartwizard-property-pane-form-field>
916
- </div>
917
- </fieldset>
918
- </form>
919
- </kendo-expansionpanel>
920
- </section>
921
- }
922
- @if (stateService.state.seriesType !== 'pie') {
923
- <section class="k-row-start-1 k-row-end-3 k-col-start-4">
924
- <kendo-expansionpanel
925
- [style.max-width.px]="576"
926
- [title]="stateService.state.seriesType === 'scatter' ? messageFor('formatYAxis') : messageFor('formatValueAxis')"
927
- [expanded]="true"
928
- >
929
- <form class="k-form k-form-md">
930
- <fieldset class="k-form-fieldset">
931
- <legend class="k-form-legend">{{ messageFor('formatValueAxisTitle') }}</legend>
932
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
933
- <kendo-chartwizard-property-pane-form-field
934
- inputType="text"
935
- [hasLabel]="false"
936
- [colSpan]="2"
937
- [placeholder]="messageFor('formatValueAxisTitlePlaceholder')"
938
- [value]="stateService.state.valueAxis[0]?.title?.text || null"
939
- (valueChange)="updateState(valueAxisTitleText, $event)"
940
- >
941
- </kendo-chartwizard-property-pane-form-field>
942
- <kendo-chartwizard-property-pane-form-field
943
- [text]="messageFor('formatValueAxisTitleFont')"
944
- inputType="comboBox"
945
- [colSpan]="2"
946
- [data]="fontNames"
947
- [placeholder]="messageFor('formatValueAxisTitleFontPlaceholder')"
948
- [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
949
- (valueChange)="updateState(valueAxisTitleFontName, $event)"
950
- >
951
- </kendo-chartwizard-property-pane-form-field>
952
- <kendo-chartwizard-property-pane-form-field
953
- [text]="messageFor('formatValueAxisTitleSize')"
954
- inputType="comboBox"
955
- [placeholder]="messageFor('formatValueAxisTitleSizePlaceholder')"
956
- [data]="fontSizes"
957
- [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
958
- (valueChange)="updateState(valueAxisTitleFontSize, $event)"
959
- >
960
- </kendo-chartwizard-property-pane-form-field>
961
- <kendo-chartwizard-property-pane-form-field
962
- [text]="messageFor('formatValueAxisTitleColor')"
963
- inputType="colorPicker"
964
- [value]="stateService.state.valueAxis[0]?.title?.color"
965
- (valueChange)="updateState(valueAxisTitleColor, $event)"
966
- >
967
- </kendo-chartwizard-property-pane-form-field>
968
- </div>
969
- </fieldset>
970
- <fieldset class="k-form-fieldset">
971
- <legend class="k-form-legend">{{ messageFor('formatValueAxisLabels') }}</legend>
972
- <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
973
- <kendo-chartwizard-property-pane-form-field
974
- [text]="messageFor('formatValueAxisLabelsFormat')"
975
- [colSpan]="2"
976
- inputType="dropDownList"
977
- [data]="labelFormats"
978
- [value]="labelFormatValue"
979
- (valueChange)="updateState(valueAxisLabelsFormat, $event)"
980
- >
981
- </kendo-chartwizard-property-pane-form-field>
982
- <kendo-chartwizard-property-pane-form-field
983
- [text]="messageFor('formatValueAxisLabelsFont')"
984
- inputType="comboBox"
985
- [data]="fontNames"
986
- [colSpan]="2"
987
- [placeholder]="messageFor('formatValueAxisLabelsFontPlaceholder')"
988
- [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
989
- (valueChange)="updateState(valueAxisLabelsFontName, $event)"
990
- >
991
- </kendo-chartwizard-property-pane-form-field>
992
- <kendo-chartwizard-property-pane-form-field
993
- [text]="messageFor('formatValueAxisLabelsSize')"
994
- inputType="comboBox"
995
- [data]="fontSizes"
996
- [placeholder]="messageFor('formatValueAxisLabelsSizePlaceholder')"
997
- [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
998
- (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
999
- >
1000
- </kendo-chartwizard-property-pane-form-field>
1001
- <kendo-chartwizard-property-pane-form-field
1002
- [text]="messageFor('formatValueAxisLabelsColor')"
1003
- inputType="colorPicker"
1004
- [value]="stateService.state.valueAxis[0]?.labels?.color"
1005
- (valueChange)="updateState(valueAxisLabelsColor, $event)"
1006
- >
1007
- </kendo-chartwizard-property-pane-form-field>
1008
- <kendo-chartwizard-property-pane-form-field
1009
- [text]="messageFor('formatValueAxisLabelsRotation')"
1010
- inputType="dropDownList"
1011
- [data]="labelsValueAxisRotation"
1012
- [value]="stateService.state.valueAxis[0]?.labels?.rotation"
1013
- (valueChange)="updateState(valueAxisLabelsRotation, $event)"
1014
- >
1015
- </kendo-chartwizard-property-pane-form-field>
1016
- </div>
1017
- </fieldset>
1018
- </form>
1019
- </kendo-expansionpanel>
1020
- </section>
1021
- }
1022
- `,
1023
- standalone: true,
1024
- imports: [
1025
- ExpansionPanelComponent,
1026
- ChartWizardPropertyPaneFormFieldComponent,
1027
- LabelComponent,
1028
- SwitchComponent,
1029
- DropDownListComponent
1030
- ]
1031
- }]
1032
- }], ctorParameters: () => [{ type: i1.StateService }, { type: i2.ChartWizardLocalizationService }, { type: i0.ChangeDetectorRef }] });